update

Make the FluTableView readonly text copiable.

example/CMakeLists.txt

@@ -19,7 +19,7 @@ endif()
 file(TO_CMAKE_PATH "/" PATH_SEPARATOR)
 
 #设置版本号
-add_definitions(-DVERSION=1,3,6,2)
+add_definitions(-DVERSION=1,3,7,1)
 
 find_package(Qt6 REQUIRED COMPONENTS Quick)
 

example/qml/component/CodeExpander.qml

@@ -133,13 +133,12 @@ FluExpander{
                     "FluRemoteLoader",
                     "FluMenuBar",
                     "FluPagination",
-                    "FluRadioButtons"
+                    "FluRadioButtons",
+                    "FluImage",
+                    "FluSpinBox"
                 ];
         code = code.replace(/\n/g, "<br>");
         code = code.replace(/ /g, "&nbsp;");
         return code.replace(RegExp("\\b(" + qmlKeywords.join("|") + ")\\b", "g"), "<span style='color: #c23a80'>$1</span>");
     }
-
-
-
 }

example/qml/global/ItemsOriginal.qml

@@ -54,6 +54,12 @@ FluObject{
                 navigationView.push("qrc:/example/qml/page/T_Text.qml")
             }
         }
+        FluPaneItem{
+            title:"Image"
+            onTap:{
+                navigationView.push("qrc:/example/qml/page/T_Image.qml")
+            }
+        }
         FluPaneItem{
             title:"Slider"
             image:"qrc:/example/res/image/control/Slider.png"

example/qml/page/T_Image.qml

@@ -0,0 +1,48 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import FluentUI
+import "qrc:///example/qml/component"
+
+FluScrollablePage{
+
+    title:"Image"
+
+    FluArea{
+        Layout.fillWidth: true
+        height: 300
+        paddings: 10
+        Layout.topMargin: 20
+        Column{
+            spacing: 15
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left:parent.left
+            }
+            FluImage{
+                width: 384
+                height: 240
+                source: "https://gitee.com/zhu-zichu/zhu-zichu/raw/74f075efe2f8d3c3bb7ba3c2259e403450e4050b/image/banner_4.jpg"
+                onStatusChanged:{
+                    if(status === Image.Error){
+                        showError("图片加载失败，请重新加载")
+                    }
+                }
+                clickErrorListener: function(){
+                    source = "https://gitee.com/zhu-zichu/zhu-zichu/raw/74f075efe2f8d3c3bb7ba3c2259e403450e4050b/image/banner_1.jpg"
+                }
+            }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -1
+        code:'FluImage{
+    width: 400
+    height: 300
+    source: "https://gitee.com/zhu-zichu/zhu-zichu/raw/74f075efe2f8d3c3bb7ba3c2259e403450e4050b/image/banner_1.jpg"
+}'
+    }
+
+}

example/qml/page/T_Pivot.qml

@@ -76,5 +76,4 @@ FluScrollablePage{
 }
 '
     }
-
 }

example/qml/page/T_RemoteLoader.qml

@@ -5,8 +5,10 @@ import QtQuick.Controls
 import FluentUI
 import "qrc:///example/qml/component"
 
-FluRemoteLoader{
-    property int pageMode: FluNavigationView.SingleTop
-    property string url: ''
-    source: "https://zhu-zichu.gitee.io/T_RemoteLoader.qml"
+FluPage{
+    pageMode: FluNavigationView.SingleTop
+    FluRemoteLoader{
+        anchors.fill: parent
+        source: "https://zhu-zichu.gitee.io/T_RemoteLoader.qml"
+    }
 }

example/qml/page/T_TableView.qml

@@ -13,6 +13,28 @@ FluContentPage{
         loadData(1,1000)
     }
 
+    Component{
+        id:com_action
+        Item{
+            RowLayout{
+                anchors.centerIn: parent
+                FluButton{
+                    text:"删除"
+                    onClicked: {
+                        table_view.closeEditor()
+                        tableModel.removeRow(row)
+                    }
+                }
+                FluFilledButton{
+                    text:"编辑"
+                    onClicked: {
+                        showSuccess(JSON.stringify(tableModel.getRow(row)))
+                    }
+                }
+            }
+        }
+    }
+
     function loadData(page,count){
         var numbers = [100, 300, 500, 1000];
         function getRandomAge() {
@@ -41,9 +63,11 @@ FluContentPage{
                                 age:getRandomAge(),
                                 address: getRandomAddresses(),
                                 nickname: getRandomNickname(),
-                                height:40,
-                                minimumHeight:40,
-                                maximumHeight:200
+                                longstring:"你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好",
+                                height:44,
+                                minimumHeight:44,
+                                maximumHeight:300,
+                                action:com_action
                             })
         }
         table_view.dataSource = dataSource
@@ -112,6 +136,20 @@ FluContentPage{
                 width:100,
                 minimumWidth:80,
                 maximumWidth:200
+            },
+            {
+                title: '长字符串',
+                dataIndex: 'longstring',
+                width:200,
+                minimumWidth:100,
+                maximumWidth:300
+            },
+            {
+                title: '操作',
+                dataIndex: 'action',
+                width:160,
+                minimumWidth:160,
+                maximumWidth:160
             }
         ]
     }

example/qml/page/T_TextBox.qml

@@ -166,6 +166,41 @@ FluScrollablePage{
 }'
     }
 
+    FluArea{
+        Layout.fillWidth: true
+        height: 68
+        paddings: 10
+        Layout.topMargin: 20
+
+        FluSpinBox{
+            Layout.topMargin: 20
+//            disabled: spin_box_switch.checked
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+        }
+
+        Row{
+            spacing: 5
+            anchors{
+                verticalCenter: parent.verticalCenter
+                right: parent.right
+            }
+            FluToggleSwitch{
+                id:spin_box_switch
+                Layout.alignment: Qt.AlignRight
+                text:"Disabled"
+            }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -1
+        code:'FluSpinBox{
+
+}'
+    }
 
     function generateRandomNames(numNames) {
         const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

example/qml/window/MainWindow.qml

@@ -4,6 +4,7 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import Qt.labs.platform
 import FluentUI
+import example
 import "qrc:///example/qml/component"
 import "qrc:///example/qml/global"
 
@@ -112,6 +113,12 @@ CustomWindow {
             }
             Row{
                 z:8
+                anchors{
+                    top: parent.top
+                    left: parent.left
+                    topMargin: FluTools.isMacos() ? 20 : 5
+                    leftMargin: 5
+                }
                 FluIconButton{
                     iconSource: FluentIcons.ChromeBack
                     width: 30
@@ -201,54 +208,12 @@ CustomWindow {
         }
     }
 
-    Image{
-        id:img_cache
-        visible: false
+    CircularReveal{
+        id:reveal
+        target:window.contentItem
         anchors.fill: parent
-    }
-
-    Canvas{
-        id:canvas
-        anchors.fill: parent
-        property int centerX: canvas.width / 2
-        property int centerY: canvas.height / 2
-        property real radius: 0
-        property int maxRadius: 0
-        property url imageUrl
-        Behavior on radius{
-            id:anim_radius
-            NumberAnimation {
-                target: canvas
-                property: "radius"
-                duration: 333
-                easing.type: Easing.OutCubic
-            }
-        }
-        onRadiusChanged: {
-            canvas.requestPaint()
-        }
-        onPaint: {
-            var ctx = canvas.getContext("2d");
-            ctx.setTransform(1, 0, 0, 1, 0, 0);
-            ctx.clearRect(0, 0, canvasSize.width, canvasSize.height);
-            ctx.save()
-            if(img_cache.source.toString().length!==0){
-                try{
-                    ctx.drawImage(img_cache, 0, 0,  canvasSize.width, canvasSize.height, 0, 0,  canvasSize.width, canvasSize.height)
-                }catch(e){
-                    img_cache.source = ""
-                }
-            }
-            clearArc(ctx, centerX, centerY, radius)
-            ctx.restore()
-        }
-        function clearArc(ctx,x, y, radius, startAngle, endAngle) {
-            ctx.beginPath()
-            ctx.globalCompositeOperation = 'destination-out'
-            ctx.fillStyle = 'black'
-            ctx.arc(x, y, radius, 0, 2*Math.PI);
-            ctx.fill();
-            ctx.closePath();
+        onImageChanged: {
+            changeDark()
         }
     }
 
@@ -257,32 +222,23 @@ CustomWindow {
     }
 
     function handleDarkChanged(button){
-        var changeDark = function(){
-            if(FluTheme.dark){
-                FluTheme.darkMode = FluDarkMode.Light
-            }else{
-                FluTheme.darkMode = FluDarkMode.Dark
-            }
-        }
-        if(FluTools.isWin()){
+        if(FluTools.isMacos()){
+            changeDark()
+        }else{
             var target = window.contentItem
             var pos = button.mapToItem(target,0,0)
             var mouseX = pos.x
             var mouseY = pos.y
-            canvas.maxRadius = Math.max(distance(mouseX,mouseY,0,0),distance(mouseX,mouseY,target.width,0),distance(mouseX,mouseY,0,target.height),distance(mouseX,mouseY,target.width,target.height))
-            target.grabToImage(function(result) {
-                img_cache.source = result.url
-                canvas.requestPaint()
-                changeDark()
-                canvas.centerX = mouseX
-                canvas.centerY = mouseY
-                anim_radius.enabled = false
-                canvas.radius = 0
-                anim_radius.enabled = true
-                canvas.radius = canvas.maxRadius
-            },canvas.canvasSize)
+            var radius = Math.max(distance(mouseX,mouseY,0,0),distance(mouseX,mouseY,target.width,0),distance(mouseX,mouseY,0,target.height),distance(mouseX,mouseY,target.width,target.height))
+            reveal.start(reveal.width*Screen.devicePixelRatio,reveal.height*Screen.devicePixelRatio,Qt.point(mouseX,mouseY),radius)
+        }
+    }
+
+    function changeDark(){
+        if(FluTheme.dark){
+            FluTheme.darkMode = FluDarkMode.Light
         }else{
-            changeDark()
+            FluTheme.darkMode = FluDarkMode.Dark
         }
     }
 

example/src/component/CircularReveal.cpp

@@ -0,0 +1,45 @@
+#include "CircularReveal.h"
+#include <QGuiApplication>
+#include <QQuickItemGrabResult>
+#include <QPainterPath>
+
+CircularReveal::CircularReveal(QQuickItem* parent) : QQuickPaintedItem(parent)
+{
+    _anim = new QPropertyAnimation(this, "radius", this);
+    _anim->setDuration(333);
+    _anim->setEasingCurve(QEasingCurve::OutCubic);
+    connect(_anim, &QPropertyAnimation::finished,this,[=](){
+        setVisible(false);
+    });
+    connect(this,&CircularReveal::radiusChanged,this,[=](){
+        update();
+    });
+}
+
+void CircularReveal::paint(QPainter* painter)
+{
+    painter->save();
+    painter->drawImage(QRect(0, 0, static_cast<int>(width()), static_cast<int>(height())), _source);
+    QPainterPath path;
+    path.moveTo(_center.x(),_center.y());
+    path.addEllipse(QPointF(_center.x(),_center.y()), _radius, _radius);
+    painter->setCompositionMode(QPainter::CompositionMode_Clear);
+    painter->fillPath(path, Qt::black);
+    painter->restore();
+}
+
+void CircularReveal::start(int w,int h,const QPoint& center,int radius){
+    _anim->setStartValue(0);
+    _anim->setEndValue(radius);
+    _center = center;
+    _grabResult = _target->grabToImage(QSize(w,h));
+    connect(_grabResult.data(), &QQuickItemGrabResult::ready, this, &CircularReveal::handleGrabResult);
+}
+
+void CircularReveal::handleGrabResult(){
+    _grabResult.data()->image().swap(_source);
+    update();
+    setVisible(true);
+    Q_EMIT imageChanged();
+    _anim->start();
+}

example/src/component/CircularReveal.h

@@ -0,0 +1,28 @@
+#ifndef CIRCULARREVEAL_H
+#define CIRCULARREVEAL_H
+
+#include <QQuickItem>
+#include <QQuickPaintedItem>
+#include <QPainter>
+#include <QPropertyAnimation>
+#include "src/stdafx.h"
+
+class CircularReveal : public QQuickPaintedItem
+{
+    Q_OBJECT
+    Q_PROPERTY_AUTO(QQuickItem*,target)
+    Q_PROPERTY_AUTO(int,radius)
+public:
+    CircularReveal(QQuickItem* parent = nullptr);
+    void paint(QPainter* painter) override;
+    Q_INVOKABLE void start(int w,int h,const QPoint& center,int radius);
+    Q_SIGNAL void imageChanged();
+    Q_SLOT void handleGrabResult();
+private:
+    QImage _source;
+    QPropertyAnimation* _anim;
+    QPoint _center;
+    QSharedPointer<QQuickItemGrabResult>  _grabResult;
+};
+
+#endif // CIRCULARREVEAL_H

example/src/main.cpp

@@ -6,6 +6,7 @@
 #include <QProcess>
 #include <FramelessHelper/Quick/framelessquickmodule.h>
 #include <FramelessHelper/Core/private/framelessconfig_p.h>
+#include "src/component/CircularReveal.h"
 #include "AppInfo.h"
 
 FRAMELESSHELPER_USE_NAMESPACE
@@ -37,6 +38,8 @@ int main(int argc, char *argv[])
     app.setQuitOnLastWindowClosed(false);
     QQmlApplicationEngine engine;
     FramelessHelper::Quick::registerTypes(&engine);
+    qmlRegisterType<CircularReveal>("example", 1, 0, "CircularReveal");
+
     appInfo->init(&engine);
     const QUrl url(QStringLiteral("qrc:/example/qml/App.qml"));
     QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,

src/CMakeLists.txt

@@ -12,7 +12,7 @@ endif()
 set(QML_PLUGIN_DIRECTORY ${CMAKE_PREFIX_PATH}/qml/FluentUI)
 
 #设置版本号
-add_definitions(-DVERSION=1,3,6,2)
+add_definitions(-DVERSION=1,3,7,1)
 
 find_package(Qt6 REQUIRED COMPONENTS Core Quick Qml)
 

src/FluApp.cpp

@@ -109,3 +109,11 @@ QJsonArray FluApp::awesomelist(const QString& keyword)
 void FluApp::closeApp(){
     qApp->exit(0);
 }
+
+void FluApp::deleteWindow(QQuickWindow* window){
+    if(window){
+        wnds.remove(window->winId());
+        window->deleteLater();
+        window = nullptr;
+    }
+}

src/FluApp.h

@@ -73,6 +73,8 @@ public:
      */
     Q_INVOKABLE void closeApp();
 
+    Q_INVOKABLE void deleteWindow(QQuickWindow* window);
+
 public:
     /**
      * @brief wnds

src/FluTools.cpp

@@ -87,3 +87,10 @@ void FluTools::setOverrideCursor(Qt::CursorShape shape){
 void FluTools::restoreOverrideCursor(){
     qApp->restoreOverrideCursor();
 }
+
+void FluTools::deleteItem(QObject *p){
+    if(p){
+        delete p;
+        p = nullptr;
+    }
+}

src/FluTools.h

@@ -58,6 +58,7 @@ public:
 
     Q_INVOKABLE void restoreOverrideCursor();
 
+    Q_INVOKABLE void deleteItem(QObject *p);
 };
 
 #endif // FLUTOOLS_H

src/WindowHelper.cpp

@@ -1,7 +1,6 @@
 #include "WindowHelper.h"
 
 #include "FluRegister.h"
-#include "FluApp.h"
 
 WindowHelper::WindowHelper(QObject *parent)
     : QObject{parent}
@@ -19,10 +18,3 @@ QVariant WindowHelper::createRegister(QQuickWindow* window,const QString& path){
     p->path(path);
     return  QVariant::fromValue(p);
 }
-
-void WindowHelper::deleteWindow(){
-    if(this->window){
-        FluApp::getInstance()->wnds.remove(this->window->winId());
-        this->window->deleteLater();
-    }
-}

src/WindowHelper.h

@@ -24,11 +24,6 @@ public:
      */
     Q_INVOKABLE void initWindow(QQuickWindow* window);
 
-    /**
-     * @brief deleteWindow 销毁窗口，释放资源，QML中的Window close并不会销毁窗口，只是把窗口隐藏了
-     */
-    Q_INVOKABLE void deleteWindow();
-
     /**
      * @brief createRegister 创建一个FluRegsiter对象，在FluWindow中registerForWindowResult方法调用
      * @param window

src/imports/FluentUI/Controls/FluComboBox.qml

@@ -44,8 +44,8 @@ ComboBox {
         topPadding: 6 - control.padding
         bottomPadding: 6 - control.padding
         renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering
-        selectionColor: FluTheme.primaryColor.lightest
-        selectedTextColor: control.palette.highlightedText
+        selectionColor: Qt.alpha(FluTheme.primaryColor.lightest,0.6)
+        selectedTextColor: color
         text: control.editable ? control.editText : control.displayText
         enabled: control.editable
         autoScroll: control.editable
@@ -67,17 +67,16 @@ ComboBox {
         Component.onCompleted: {
             forceActiveFocus()
         }
-        Keys.onEnterPressed: {
-            control.commit()
-        }
-        Keys.onReturnPressed: {
+        Keys.onEnterPressed: (event)=> handleCommit(event)
+        Keys.onReturnPressed:(event)=> handleCommit(event)
+        function handleCommit(event){
             control.commit()
         }
     }
 
     background: Rectangle {
         implicitWidth: 140
-        implicitHeight: 28
+        implicitHeight: 32
         border.color: FluTheme.dark ? "#505050" : "#DFDFDF"
         border.width: 1
         visible: !control.flat || control.down

src/imports/FluentUI/Controls/FluCopyableText.qml

@@ -14,16 +14,19 @@ TextEdit {
     leftPadding: 0
     rightPadding: 0
     topPadding: 0
-    selectedTextColor: FluColors.Grey220
+    selectByMouse: true
+    selectedTextColor: color
     bottomPadding: 0
-    selectionColor: FluTheme.primaryColor.lightest
+    selectionColor: Qt.alpha(FluTheme.primaryColor.lightest,0.6)
     font:FluTextStyle.Body
     onSelectedTextChanged: {
         control.forceActiveFocus()
     }
-    TapHandler {
+    MouseArea{
+        anchors.fill: parent
+        cursorShape: Qt.IBeamCursor
         acceptedButtons: Qt.RightButton
-        onTapped: control.echoMode !== TextInput.Password && menu.popup()
+        onClicked: control.echoMode !== TextInput.Password && menu.popup()
     }
     FluTextBoxMenu{
         id:menu

src/imports/FluentUI/Controls/FluImage.qml

@@ -0,0 +1,44 @@
+import QtQuick
+import QtQuick.Controls
+import FluentUI
+
+Item {
+    property alias sourceSize : image.sourceSize
+    property alias fillMode : image.fillMode
+    property url source
+    property string errorButtonText: "重新加载"
+    property var status
+    property var clickErrorListener : function(){
+        image.source = ""
+        image.source = control.source
+    }
+    id: control
+    Image{
+        id:image
+        anchors.fill: parent
+        source: control.source
+        opacity: control.status === Image.Ready
+        onStatusChanged:{
+            control.status = image.status
+        }
+        Behavior on opacity {
+            NumberAnimation{
+                duration: 83
+            }
+        }
+    }
+    Rectangle{
+        anchors.fill: parent
+        color: FluTheme.dark ? Qt.rgba(1,1,1,0.03) : Qt.rgba(0,0,0,0.03)
+        FluProgressRing{
+            anchors.centerIn: parent
+            visible: control.status === Image.Loading
+        }
+        FluFilledButton{
+            text: control.errorButtonText
+            anchors.centerIn: parent
+            visible: control.status === Image.Error
+            onClicked: clickErrorListener()
+        }
+    }
+}

src/imports/FluentUI/Controls/FluMultilineTextBox.qml

@@ -22,8 +22,11 @@ TextArea{
     }
     font:FluTextStyle.Body
     wrapMode: Text.WrapAnywhere
+    padding: 8
+    leftPadding: 8
     renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering
-    selectionColor: FluTheme.primaryColor.lightest
+    selectedTextColor: color
+    selectionColor: Qt.alpha(FluTheme.primaryColor.lightest,0.6)
     placeholderTextColor: {
         if(!enabled){
             return placeholderDisableColor
@@ -35,15 +38,23 @@ TextArea{
     }
     selectByMouse: true
     background: FluTextBoxBackground{ inputItem: control }
-    Keys.onEnterPressed: {
-        control.commit()
+    Keys.onEnterPressed: (event)=> d.handleCommit(event)
+    Keys.onReturnPressed:(event)=> d.handleCommit(event)
+    QtObject{
+        id:d
+        function handleCommit(event){
+            if(event.modifiers & Qt.ControlModifier){
+                insert(control.cursorPosition, "\n")
+                return
+            }
+            control.commit()
+        }
     }
-    Keys.onBackPressed: {
-        control.commit()
-    }
-    TapHandler {
+    MouseArea{
+        anchors.fill: parent
+        cursorShape: Qt.IBeamCursor
         acceptedButtons: Qt.RightButton
-        onTapped: control.echoMode !== TextInput.Password && menu.popup()
+        onClicked: control.echoMode !== TextInput.Password && menu.popup()
     }
     FluTextBoxMenu{
         id:menu

src/imports/FluentUI/Controls/FluNavigationView.qml

@@ -31,7 +31,6 @@ Item {
     id:control
     QtObject{
         id:d
-        property var pageMap: ({})
         property var stackItems: []
         property int displayMode: FluNavigationView.Open
         property bool enableNavigationPanel: false
@@ -519,7 +518,7 @@ Item {
                 disabled:  nav_swipe.depth <= 1
                 iconSize: 13
                 onClicked: {
-                    nav_swipe.pop()
+                    FluTools.deleteItem(nav_swipe.pop())
                     d.stackItems.pop()
                     var item = d.stackItems[d.stackItems.length-1]
                     if(item.idx<(nav_list.count - layout_footer.count)){
@@ -959,6 +958,13 @@ Item {
             control_popup.open()
         }
     }
+    Component{
+        id:com_placeholder
+        Item{
+            property int pageMode: FluNavigationView.SingleInstance
+            property string url
+        }
+    }
     function collapseAll(){
         for(var i=0;i<nav_list.model.length;i++){
             var item = nav_list.model[i]
@@ -977,18 +983,8 @@ Item {
     function getItems(){
         return nav_list.model
     }
-
-
-    Component{
-        id:com_placeholder
-        Item{
-            property int pageMode: FluNavigationView.SingleInstance
-            property string url
-        }
-    }
-
     function push(url,argument={}){
-        let page = nav_swipe.find(function(item) {
+        var page = nav_swipe.find(function(item) {
             return item.url === url;
         })
         if(page){
@@ -997,7 +993,7 @@ Item {
             case FluNavigationView.SingleTask:
                 while(nav_swipe.currentItem !== page)
                 {
-                    nav_swipe.pop()
+                    FluTools.deleteItem(nav_swipe.pop())
                     d.stackItems.pop()
                 }
                 return
@@ -1010,22 +1006,22 @@ Item {
             default:
             }
         }
-        var comp = Qt.createComponent(url)
-        if (comp.status === Component.Ready) {
-            //先判断nav_swipe2中是否有当前url数据
-            var pageIndex = -1
-            for(var i=0;i<nav_swipe2.children.length;i++){
-                var item =  nav_swipe2.children[i]
-                if(item.url === url){
-                    pageIndex = i
-                    break
-                }
+
+        var pageIndex = -1
+        for(var i=0;i<nav_swipe2.children.length;i++){
+            var item =  nav_swipe2.children[i]
+            if(item.url === url){
+                pageIndex = i
+                break
             }
-            var options = Object.assign(argument,{url:url})
-            if(pageIndex!==-1){
-                nav_swipe2.currentIndex = pageIndex
-                nav_swipe.push(com_placeholder,options)
-            }else{
+        }
+        var options = Object.assign(argument,{url:url})
+        if(pageIndex!==-1){
+            nav_swipe2.currentIndex = pageIndex
+            nav_swipe.push(com_placeholder,options)
+        }else{
+            var comp = Qt.createComponent(url)
+            if (comp.status === Component.Ready) {
                 var obj  = comp.createObject(nav_swipe,options)
                 if(obj.pageMode === FluNavigationView.SingleInstance){
                     nav_swipe.push(com_placeholder,options)
@@ -1034,11 +1030,11 @@ Item {
                 }else{
                     nav_swipe.push(obj)
                 }
+            }else{
+                console.error(comp.errorString())
             }
-            d.stackItems.push(nav_list.model[nav_list.currentIndex])
-        }else{
-            console.error(comp.errorString())
         }
+        d.stackItems.push(nav_list.model[nav_list.currentIndex])
     }
     function getCurrentIndex(){
         return nav_list.currentIndex

src/imports/FluentUI/Controls/FluPasswordBox.qml

@@ -22,9 +22,12 @@ TextField{
         return normalColor
     }
     font:FluTextStyle.Body
+    padding: 8
+    leftPadding: 8
     echoMode:btn_reveal.pressed ? TextField.Normal : TextField.Password
     renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering
-    selectionColor: FluTheme.primaryColor.lightest
+    selectionColor: Qt.alpha(FluTheme.primaryColor.lightest,0.6)
+    selectedTextColor: color
     placeholderTextColor: {
         if(!enabled){
             return placeholderDisableColor
@@ -51,11 +54,13 @@ TextField{
             }
         }
     }
-    Keys.onEnterPressed: {
-        control.commit()
-    }
-    Keys.onBackPressed: {
-        control.commit()
+    Keys.onEnterPressed: (event)=> d.handleCommit(event)
+    Keys.onReturnPressed:(event)=> d.handleCommit(event)
+    QtObject{
+        id:d
+        function handleCommit(event){
+            control.commit()
+        }
     }
     FluIconButton{
         id:btn_reveal
@@ -71,10 +76,6 @@ TextField{
             rightMargin: icon_end.visible ? 25 : 5
         }
     }
-    TapHandler {
-        acceptedButtons: Qt.RightButton
-        onTapped: control.echoMode !== TextInput.Password && menu.popup()
-    }
     FluTextBoxMenu{
         id:menu
         inputItem: control

src/imports/FluentUI/Controls/FluScrollBar.qml

@@ -1,189 +1,88 @@
 import QtQuick
-import QtQuick.Controls.Basic
+import QtQuick.Controls.impl
+import QtQuick.Templates as T
 import FluentUI
 
-ScrollBar {
-    property color handleNormalColor: Qt.rgba(134/255,134/255,134/255,1)
-    property color handleHoverColor: Qt.lighter(handleNormalColor)
-    property color handlePressColor: Qt.darker(handleNormalColor)
-    property bool expand: false
+T.ScrollBar {
     id: control
+
+    property color color : FluTheme.dark ? Qt.rgba(159/255,159/255,159/255,1) : Qt.rgba(138/255,138/255,138/255,1)
+    property color pressedColor: FluTheme.dark ? Qt.darker(color,1.2) : Qt.lighter(color,1.2)
+
     implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
                             implicitContentWidth + leftPadding + rightPadding)
     implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
                              implicitContentHeight + topPadding + bottomPadding)
-    visible: control.policy !== ScrollBar.AlwaysOff
-    minimumSize: 0.3
-    topPadding:{
-        if(vertical){
-            if(expand)
-                return 15
-            return 2
-        }else{
-            if(expand){
-                return 2
-            }
-            return 4
-        }
-    }
-    bottomPadding:{
-        if(vertical){
-            if(expand)
-                return 15
-            return 2
-        }else{
-            if(expand){
-                return 2
-            }
-            return 4
-        }
-    }
-    leftPadding:{
-        if(vertical){
-            if(expand){
-                return 2
-            }
-            return 4
-        }else{
-            if(expand)
-                return 15
-            return 2
-        }
-    }
-    rightPadding:{
-        if(vertical){
-            if(expand){
-                return 2
-            }
-            return 4
-        }else{
-            if(expand)
-                return 15
-            return 2
-        }
-    }
-    Behavior on topPadding {
-        NumberAnimation{
-            duration: 150
-        }
-    }
-    Behavior on bottomPadding {
-        NumberAnimation{
-            duration: 150
-        }
-    }
-    Behavior on leftPadding {
-        NumberAnimation{
-            duration: 150
-        }
-    }
-    Behavior on rightPadding {
-        NumberAnimation{
-            duration: 150
-        }
-    }
-    contentItem: Rectangle {
-        id:item_react
-        implicitWidth: expand ? 8 : 2
-        implicitHeight:  expand ? 8 : 2
-        radius: width / 2
-        color: control.pressed?handlePressColor:control.hovered?handleHoverColor:handleNormalColor
-        opacity:(control.policy === ScrollBar.AlwaysOn || control.size < 1.0)?1.0:0.0
-    }
-    background:  Rectangle{
-        radius: 5
-        color: {
-            if(expand && item_react.opacity){
-                if(FluTheme.dark){
-                    return Qt.rgba(0,0,0,1)
+
+    padding: 2
+    visible: control.policy !== T.ScrollBar.AlwaysOff
+    minimumSize: Math.max(orientation === Qt.Horizontal ? height / width : width / height,0.3)
+    contentItem: Item {
+        property bool collapsed: (control.policy === T.ScrollBar.AlwaysOn || (control.active && control.size < 1.0))
+        implicitWidth: control.interactive ? 6 : 2
+        implicitHeight: control.interactive ? 6 : 2
+
+        Rectangle{
+            id:rect_bar
+            width:  vertical ? 2 : parent.width
+            height: horizontal  ? 2 : parent.height
+            color:{
+                if(control.pressed){
+                    return control.pressedColor
                 }
-                return Qt.rgba(1,1,1,1)
+                return control .color
             }
-            return Qt.rgba(0,0,0,0)
-        }
-        MouseArea{
-            id:mouse_item
-            hoverEnabled: true
-            anchors.fill: parent
-            onEntered: {
-                timer.restart()
+            anchors{
+                right: vertical ? parent.right : undefined
+                bottom: horizontal ? parent.bottom : undefined
             }
-            onExited: {
-                timer.restart()
+            radius: width / 2
+            visible: control.size < 1.0
+        }
+        states: [
+            State{
+                name:"hide"
+                when: contentItem.collapsed
+                PropertyChanges {
+                    target: rect_bar
+                    width:  vertical ? 6 : parent.width
+                    height: horizontal  ? 6 : parent.height
+                }
             }
-        }
-    }
-    Timer{
-        id:timer
-        interval: 800
-        onTriggered: {
-            expand = mouse_item.containsMouse || btn_top.hovered || btn_bottom.hovered || btn_left.hovered || btn_right.hovered
-        }
-    }
-    Behavior on implicitWidth {
-        NumberAnimation{
-            duration: 150
-        }
-    }
-    FluIconButton{
-        id:btn_top
-        iconSource: FluentIcons.CaretSolidUp
-        anchors.horizontalCenter: parent.horizontalCenter
-        width:10
-        height:10
-        z:100
-        iconColor: hovered ? FluColors.Black : FluColors.Grey120
-        iconSize: 8
-        anchors.top: parent.top
-        anchors.topMargin: 4
-        visible:vertical && expand && item_react.opacity
-        onClicked:{
-            decrease()
-        }
-    }
-    FluIconButton{
-        id:btn_bottom
-        iconSource: FluentIcons.CaretSolidDown
-        visible:vertical && expand && item_react.opacity
-        width:10
-        height:10
-        iconSize: 8
-        iconColor: hovered ? FluColors.Black : FluColors.Grey120
-        anchors.horizontalCenter: parent.horizontalCenter
-        anchors.bottom: parent.bottom
-        anchors.bottomMargin: 4
-        onClicked:{
-            increase()
-        }
-    }
-    FluIconButton{
-        id:btn_left
-        iconSource: FluentIcons.CaretSolidLeft
-        visible:!vertical && expand && item_react.opacity
-        width:10
-        height:10
-        iconSize: 8
-        iconColor: hovered ? FluColors.Black : FluColors.Grey120
-        anchors.leftMargin: 4
-        anchors.verticalCenter: parent.verticalCenter
-        anchors.left: parent.left
-        onClicked:{
-            decrease()
-        }
-    }
-    FluIconButton{
-        id:btn_right
-        iconSource: FluentIcons.CaretSolidRight
-        visible:!vertical && expand && item_react.opacity
-        width:10
-        height:10
-        iconSize: 8
-        iconColor: hovered ? FluColors.Black : FluColors.Grey120
-        anchors.rightMargin: 4
-        anchors.verticalCenter: parent.verticalCenter
-        anchors.right: parent.right
-        onClicked:{
-            increase()
-        }
+            ,State{
+                name:"show"
+                when: !contentItem.expand
+                PropertyChanges {
+                    target: rect_bar
+                    width:  vertical ? 2 : parent.width
+                    height: horizontal  ? 2 : parent.height
+                }
+            }
+        ]
+        transitions:[
+            Transition {
+                from: "hide"
+                SequentialAnimation {
+                    PauseAnimation { duration: 450 }
+                    NumberAnimation {
+                        target: rect_bar
+                        properties: vertical ? "width"  : "height"
+                        duration: 167
+                        easing.type: Easing.InCubic
+                        to:2
+                    }
+                }
+            }
+            ,Transition {
+                from: "show"
+                NumberAnimation {
+                    target: rect_bar
+                    properties: vertical ? "width"  : "height"
+                    duration: 167
+                    easing.type: Easing.InCubic
+                    to:6
+                }
+            }
+        ]
     }
 }

src/imports/FluentUI/Controls/FluScrollablePage.qml

@@ -41,6 +41,8 @@ FluPage {
         contentWidth: parent.width
         contentHeight: container.height
         ScrollBar.vertical: FluScrollBar {
+            anchors.right: flickview.right
+            anchors.rightMargin: 2
         }
         anchors{
             top: text_title.bottom

src/imports/FluentUI/Controls/FluSpinBox.qml

@@ -0,0 +1,147 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+import FluentUI
+
+Rectangle{
+    readonly property string displayText : d._displayText
+    property int from: 0
+    property int to: 99
+    property var validator: IntValidator {
+        bottom: Math.min(control.from, control.to)
+        top: Math.max(control.from, control.to)
+    }
+    id:control
+    implicitWidth: 200
+    implicitHeight: 34
+    radius: 4
+    color: FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(1,1,1,1)
+    border.width: 1
+    border.color: FluTheme.dark ? Qt.rgba(76/255,76/255,76/255,1) : Qt.rgba(240/255,240/255,240/255,1)
+    QtObject{
+        id:d
+        property string _displayText: "0"
+    }
+    Component{
+        id:com_edit
+        FluTextBox{
+            rightPadding: 80
+            closeRightMargin: 55
+            validator: control.validator
+            text: d._displayText
+            Component.onCompleted: {
+                forceActiveFocus()
+            }
+            onCommit: {
+                var number = Number(text)
+                if(number>=control.from && number<=control.to){
+                    d._displayText = String(number)
+                }
+                edit_loader.sourceComponent = null
+            }
+            onActiveFocusChanged: {
+                if(!activeFocus){
+                    edit_loader.sourceComponent = null
+                }
+            }
+        }
+    }
+    FluTextBox{
+        id:text_number
+        anchors.fill: parent
+        readOnly: true
+        rightPadding: 80
+        text: control.displayText
+        MouseArea{
+            anchors.fill: parent
+            onClicked: {
+                edit_loader.sourceComponent = com_edit
+            }
+        }
+    }
+    Loader{
+        id:edit_loader
+        anchors.fill: parent
+    }
+    FluIconButton{
+        id:btn_up
+        width: 20
+        height: 20
+        iconSize: 16
+        iconSource: FluentIcons.ChevronUp
+        enabled: Number(control.displayText) !== control.to
+        anchors{
+            verticalCenter: parent.verticalCenter
+            right: parent.right
+            rightMargin: 30
+        }
+        onClicked: {
+            d._displayText = String(Math.min(Number(d._displayText)+1,control.to))
+        }
+        MouseArea{
+            anchors.fill: parent
+            onReleased: {
+                timer.stop()
+            }
+            TapHandler{
+                onTapped: {
+                    btn_up.clicked()
+                }
+                onCanceled: {
+                    timer.stop()
+                }
+                onLongPressed: {
+                    timer.isUp = true
+                    timer.start()
+                }
+            }
+        }
+    }
+    FluIconButton{
+        id:btn_down
+        iconSource: FluentIcons.ChevronDown
+        width: 20
+        height: 20
+        iconSize: 16
+        enabled: Number(control.displayText) !== control.from
+        anchors{
+            verticalCenter: parent.verticalCenter
+            right: parent.right
+            rightMargin: 5
+        }
+        onClicked: {
+            d._displayText = String(Math.max(Number(d._displayText)-1,control.from))
+        }
+        MouseArea{
+            anchors.fill: parent
+            onReleased: {
+                timer.stop()
+            }
+            TapHandler{
+                onTapped: {
+                    btn_down.clicked()
+                }
+                onCanceled: {
+                    timer.stop()
+                }
+                onLongPressed: {
+                    timer.isUp = false
+                    timer.start()
+                }
+            }
+        }
+    }
+    Timer{
+        id:timer
+        property bool isUp : true
+        interval: 50
+        repeat: true
+        onTriggered: {
+            if(isUp){
+                btn_up.clicked()
+            }else{
+                btn_down.clicked()
+            }
+        }
+    }
+}

src/imports/FluentUI/Controls/FluTableView.qml

@@ -8,6 +8,9 @@ import FluentUI
 Rectangle {
     property var columnSource
     property var dataSource
+    property color selectionColor: Qt.alpha(FluTheme.primaryColor.lightest,0.6)
+    property color hoverButtonColor: Qt.alpha(selectionColor,0.2)
+    property color pressedButtonColor: Qt.alpha(selectionColor,0.4)
     id:control
     color: FluTheme.dark ? Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
     onColumnSourceChanged: {
@@ -30,6 +33,24 @@ Rectangle {
     QtObject{
         id:d
         property var header_rows:[]
+        property bool selectionFlag: true
+        function obtEditDelegate(column,row){
+            var display = table_model.data(table_model.index(row,column),"display")
+            var cellItem = table_view.itemAtCell(column, row)
+            var cellPosition = cellItem.mapToItem(scroll_table, 0, 0)
+            item_loader.column = column
+            item_loader.row = row
+            item_loader.x = table_view.contentX + cellPosition.x
+            item_loader.y = table_view.contentY + cellPosition.y
+            item_loader.width = table_view.columnWidthProvider(column)
+            item_loader.height = table_view.rowHeightProvider(row)
+            item_loader.display = display
+            var obj =columnSource[column].editDelegate
+            if(obj){
+                return obj
+            }
+            return com_edit
+        }
     }
     onDataSourceChanged: {
         table_model.clear()
@@ -42,21 +63,78 @@ Rectangle {
     }
     Component{
         id:com_edit
-        FluTextBox {
+        Item{
             anchors.fill: parent
-            text: display
-            verticalAlignment: TextInput.AlignVCenter
-            Component.onCompleted: {
-                forceActiveFocus()
-                selectAll()
+            ScrollView{
+                id:item_scroll
+                clip: true
+                anchors.fill: parent
+                ScrollBar.vertical: FluScrollBar{
+                    parent: item_scroll
+                    x: item_scroll.mirrored ? 0 : item_scroll.width - width
+                    y: item_scroll.topPadding
+                    height: item_scroll.availableHeight
+                    active: item_scroll.ScrollBar.horizontal.active
+                }
+                FluMultilineTextBox {
+                    id:text_box
+                    text: display
+                    readOnly: true === columnSource[column].readOnly
+                    verticalAlignment: TextInput.AlignVCenter
+                    Component.onCompleted: {
+                        forceActiveFocus()
+                        selectAll()
+                    }
+                    rightPadding: 24
+                    onCommit: {
+                        if(!readOnly){
+                            display = text
+                        }
+                        tableView.closeEditor()
+                    }
+                }
             }
-            onCommit: {
-                display = text
-                tableView.closeEditor()
+            FluIconButton{
+                iconSource:FluentIcons.ChromeClose
+                iconSize: 10
+                width: 20
+                height: 20
+                visible: {
+                    if(text_box.readOnly)
+                        return false
+                    return text_box.text !== ""
+                }
+                anchors{
+                    verticalCenter: parent.verticalCenter
+                    right: parent.right
+                    rightMargin: 5
+                }
+                onClicked:{
+                    text_box.text = ""
+                }
+            }
+        }
+    }
+    Component{
+        id:com_text
+        FluText {
+            id:item_text
+            text: itemData
+            anchors.fill: parent
+            anchors.margins: 10
+            elide: Text.ElideRight
+            wrapMode: Text.WrapAnywhere
+            verticalAlignment: Text.AlignVCenter
+            HoverHandler{
+                id: hover_handler
+            }
+            FluTooltip{
+                text: item_text.text
+                delay: 500
+                visible: item_text.contentWidth < item_text.implicitWidth && item_text.contentHeight < item_text.implicitHeight &&  hover_handler.hovered
             }
         }
     }
-
     ScrollView{
         id:scroll_table
         anchors.left: header_vertical.right
@@ -75,6 +153,12 @@ Rectangle {
             ScrollBar.vertical: FluScrollBar{}
             selectionModel: ItemSelectionModel {
                 id:selection_model
+                model: table_model
+                onSelectionChanged: {
+                    if(selection_rect.dragging){
+                        d.selectionFlag = !d.selectionFlag
+                    }
+                }
             }
             columnWidthProvider: function(column) {
                 var w = columnSource[column].width
@@ -107,33 +191,58 @@ Rectangle {
             model: table_model
             clip: true
             delegate: Rectangle {
+                id:item_table
+                property var position: Qt.point(column,row)
                 required property bool selected
-                required property bool current
-                property var readOnly: columnSource[column].readOnly
-                color: selected ? FluTheme.primaryColor.lightest: (row%2!==0) ? control.color : (FluTheme.dark ? Qt.rgba(1,1,1,0.06) : Qt.rgba(0,0,0,0.06))
+                color: (row%2!==0) ? control.color : (FluTheme.dark ? Qt.rgba(1,1,1,0.06) : Qt.rgba(0,0,0,0.06))
                 implicitHeight: 40
                 implicitWidth: columnSource[column].width
-                TapHandler{
+                Rectangle{
+                    anchors.fill: parent
+                    visible: item_loader.sourceComponent === null
+                    color: selected ? control.selectionColor : "#00000000"
+                }
+                MouseArea{
+                    anchors.fill: parent
                     acceptedButtons: Qt.LeftButton
-                    onDoubleTapped: {
-                        if(readOnly){
+                    onPressed:{
+                        closeEditor()
+                        table_view.interactive = false
+                    }
+                    onReleased: {
+                        table_view.interactive = true
+                    }
+                    onDoubleClicked:{
+                        if(display instanceof Component){
                             return
                         }
-                        item_loader.sourceComponent = obtEditDelegate(column,row)
-                        var index = table_view.index(row,column)
+                        item_loader.sourceComponent = d.obtEditDelegate(column,row)
                     }
-                    onTapped: {
-                        if(!current){
+                    onClicked:
+                        (event)=>{
                             item_loader.sourceComponent = null
+                            if(!(event.modifiers & Qt.ControlModifier)){
+                                selection_model.clear()
+                            }
+                            selection_model.select(table_model.index(row,column),ItemSelectionModel.Select)
+                            d.selectionFlag = !d.selectionFlag
+                            event.accepted = true
                         }
-                    }
                 }
-                FluText {
-                    text: display
+                Loader{
+                    property var itemData: display
+                    property var tableView: table_view
+                    property var tableModel: table_model
+                    property var position: item_table.position
+                    property int row: position.y
+                    property int column: position.x
                     anchors.fill: parent
-                    anchors.margins: 10
-                    elide: Text.ElideRight
-                    verticalAlignment: Text.AlignVCenter
+                    sourceComponent: {
+                        if(itemData instanceof Component){
+                            return itemData
+                        }
+                        return com_text
+                    }
                 }
             }
         }
@@ -144,59 +253,20 @@ Rectangle {
             property int column
             property int row
             property var tableView: control
+            sourceComponent: null
             onDisplayChanged: {
-                table_model.setData(table_view.index(row,column),"display",display)
+                var obj = table_model.getRow(row)
+                obj[columnSource[column].dataIndex] = display
+                table_model.setRow(row,obj)
             }
         }
     }
-
-    function obtEditDelegate(column,row){
-        var display = table_model.data(table_view.index(row,column),"display")
-        var cellItem = table_view.itemAtCell(column, row)
-        var cellPosition = cellItem.mapToItem(scroll_table, 0, 0)
-        item_loader.column = column
-        item_loader.row = row
-        item_loader.x = table_view.contentX + cellPosition.x
-        item_loader.y = table_view.contentY + cellPosition.y
-        item_loader.width = table_view.columnWidthProvider(column)
-        item_loader.height = table_view.rowHeightProvider(row)
-        item_loader.display = display
-        var obj =columnSource[column].editDelegate
-        if(obj){
-            return obj
-        }
-        return com_edit
-    }
-
     Component{
         id:com_handle
-        FluControl {
-            width: 24
-            height: 24
-            background: Rectangle{
-                radius: 12
-                color: FluTheme.dark ? Qt.rgba(69/255,69/255,69/255,1) :Qt.rgba(1,1,1,1)
-            }
-            visible: SelectionRectangle.control.active
-            FluShadow{
-                radius: 12
-            }
-            Rectangle{
-                width: 24
-                height: 24
-                radius: 12
-                scale: pressed?4/10:hovered?6/10:5/10
-                color:FluTheme.dark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark
-                anchors.centerIn: parent
-                Behavior on scale {
-                    NumberAnimation{
-                        duration: 167
-                    }
-                }
-            }
-        }
+        Item {}
     }
     SelectionRectangle {
+        id:selection_rect
         target: {
             if(item_loader.sourceComponent){
                 return null
@@ -205,6 +275,11 @@ Rectangle {
         }
         bottomRightHandle:com_handle
         topLeftHandle: com_handle
+        onDraggingChanged: {
+            if(!dragging){
+                table_view.interactive = true
+            }
+        }
     }
     TableView {
         id: header_horizontal
@@ -220,37 +295,53 @@ Rectangle {
         syncView: table_view
         boundsBehavior: Flickable.StopAtBounds
         clip: true
-        delegate: Rectangle {
+        delegate: FluControl {
+            id:column_item_control
             readonly property real cellPadding: 8
             readonly property var obj : columnSource[column]
             implicitWidth: column_text.implicitWidth + (cellPadding * 2)
             implicitHeight: Math.max(header_horizontal.height, column_text.implicitHeight + (cellPadding * 2))
-            color:FluTheme.dark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(247/255,247/255,247/255,1)
-            border.color: FluTheme.dark ? "#252525" : "#e4e4e4"
+            Rectangle{
+                anchors.fill: parent
+                color:{
+                    d.selectionFlag
+                    if(column_item_control.pressed){
+                        return control.pressedButtonColor
+                    }
+                    if(selection_model.isColumnSelected(column)){
+                        return control.hoverButtonColor
+                    }
+                    return column_item_control.hovered ? control.hoverButtonColor :  FluTheme.dark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(247/255,247/255,247/255,1)
+                }
+                border.color: FluTheme.dark ? "#252525" : "#e4e4e4"
+            }
             FluText {
                 id: column_text
-                text: display
+                text: model.display
                 width: parent.width
                 height: parent.height
-                font.bold: true
+                font.bold:{
+                    d.selectionFlag
+                    return selection_model.columnIntersectsSelection(column)
+                }
                 horizontalAlignment: Text.AlignHCenter
                 verticalAlignment: Text.AlignVCenter
             }
-            TapHandler{
-                onDoubleTapped: {
-                    selection_model.clear()
-                    for(var i=0;i<=table_view.rows;i++){
-                        selection_model.select(table_view.index(i,column),ItemSelectionModel.Select)
-                    }
+            onClicked: {
+                closeEditor()
+                selection_model.clear()
+                for(var i=0;i<=table_view.rows;i++){
+                    selection_model.select(table_model.index(i,column),ItemSelectionModel.Select)
                 }
+                d.selectionFlag = !d.selectionFlag
             }
             MouseArea{
                 property point clickPos: "0,0"
                 height: parent.height
-                width: 4
+                width: 6
                 anchors.right: parent.right
                 acceptedButtons: Qt.LeftButton
-                visible: !(obj.width === obj.maximumWidth && obj.width === obj.maximumWidth)
+                visible: !(obj.width === obj.minimumWidth && obj.width === obj.maximumWidth)
                 cursorShape: Qt.SplitHCursor
                 preventStealing: true
                 propagateComposedEvents: true
@@ -297,35 +388,54 @@ Rectangle {
                 return []
             }
         }
-        delegate: Rectangle{
+        delegate: FluControl{
+            id:item_control
             readonly property real cellPadding: 8
-            readonly property var obj : table_model.getRow(row)
             implicitWidth: Math.max(header_vertical.width, row_text.implicitWidth + (cellPadding * 2))
             implicitHeight: row_text.implicitHeight + (cellPadding * 2)
-            color:FluTheme.dark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(247/255,247/255,247/255,1)
-            border.color: FluTheme.dark ? "#252525" : "#e4e4e4"
+            Rectangle{
+                anchors.fill: parent
+                color: {
+                    d.selectionFlag
+                    if(item_control.pressed){
+                        return control.pressedButtonColor
+                    }
+                    if(selection_model.isRowSelected(row)){
+                        return control.hoverButtonColor
+                    }
+                    return item_control.hovered ? control.hoverButtonColor :  FluTheme.dark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(247/255,247/255,247/255,1)
+                }
+                border.color: FluTheme.dark ? "#252525" : "#e4e4e4"
+            }
             FluText{
                 id:row_text
                 anchors.centerIn: parent
                 text: row + 1
-            }
-            TapHandler{
-                onDoubleTapped: {
-                    selection_model.clear()
-                    for(var i=0;i<=columnSource.length;i++){
-                        selection_model.select(table_view.index(row,i),ItemSelectionModel.Select)
-                    }
+                font.bold:{
+                    d.selectionFlag
+                    return selection_model.rowIntersectsSelection(row)
                 }
             }
+            onClicked: {
+                closeEditor()
+                selection_model.clear()
+                for(var i=0;i<=columnSource.length;i++){
+                    selection_model.select(table_model.index(row,i),ItemSelectionModel.Select)
+                }
+                d.selectionFlag = !d.selectionFlag
+            }
             MouseArea{
                 property point clickPos: "0,0"
-                height: 4
+                height: 6
                 width: parent.width
                 anchors.bottom: parent.bottom
                 acceptedButtons: Qt.LeftButton
                 cursorShape: Qt.SplitVCursor
                 preventStealing: true
-                visible: !(obj.height === obj.minimumHeight && obj.width === obj.maximumHeight)
+                visible: {
+                    var obj = table_model.getRow(row)
+                    return !(obj.height === obj.minimumHeight && obj.width === obj.maximumHeight)
+                }
                 propagateComposedEvents: true
                 onPressed :
                     (mouse)=>{
@@ -337,11 +447,12 @@ Rectangle {
                 }
                 onPositionChanged:
                     (mouse)=>{
+                        var obj = table_model.getRow(row)
                         var delta = Qt.point(mouse.x - clickPos.x, mouse.y - clickPos.y)
                         var minimumHeight = obj.minimumHeight
                         var maximumHeight = obj.maximumHeight
                         if(!minimumHeight){
-                            minimumHeight = 40
+                            minimumHeight = 44
                         }
                         if(!maximumHeight){
                             maximumHeight = 65535
@@ -353,13 +464,10 @@ Rectangle {
             }
         }
     }
-
     function closeEditor(){
         item_loader.sourceComponent = null
     }
-
     function resetPosition(){
-       table_view.positionViewAtCell(Qt.point(0, 0),TableView.AlignTop|TableView.AlignLeft)
+        table_view.positionViewAtCell(Qt.point(0, 0),Qt.AlignTop|Qt.AlignLeft)
     }
-
 }

src/imports/FluentUI/Controls/FluTextBox.qml

@@ -12,8 +12,11 @@ TextField{
     property color placeholderNormalColor: FluTheme.dark ? Qt.rgba(210/255,210/255,210/255,1) : Qt.rgba(96/255,96/255,96/255,1)
     property color placeholderFocusColor: FluTheme.dark ? Qt.rgba(152/255,152/255,152/255,1) : Qt.rgba(141/255,141/255,141/255,1)
     property color placeholderDisableColor: FluTheme.dark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1)
+    property int closeRightMargin: icon_end.visible ? 25 : 5
     id:control
     width: 300
+    padding: 8
+    leftPadding: 8
     enabled: !disabled
     color: {
         if(!enabled){
@@ -23,7 +26,8 @@ TextField{
     }
     font:FluTextStyle.Body
     renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering
-    selectionColor: FluTheme.primaryColor.lightest
+    selectionColor: Qt.alpha(FluTheme.primaryColor.lightest,0.6)
+    selectedTextColor: color
     placeholderTextColor: {
         if(!enabled){
             return placeholderDisableColor
@@ -33,12 +37,6 @@ TextField{
         }
         return placeholderNormalColor
     }
-    Keys.onEnterPressed: {
-        control.commit()
-    }
-    Keys.onReturnPressed: {
-        control.commit()
-    }
     selectByMouse: true
     rightPadding: icon_end.visible ? 50 : 30
     background: FluTextBoxBackground{
@@ -56,26 +54,39 @@ TextField{
             }
         }
     }
+    Keys.onEnterPressed: (event)=> d.handleCommit(event)
+    Keys.onReturnPressed:(event)=> d.handleCommit(event)
+    QtObject{
+        id:d
+        function handleCommit(event){
+            control.commit()
+        }
+    }
+    MouseArea{
+        anchors.fill: parent
+        cursorShape: Qt.IBeamCursor
+        acceptedButtons: Qt.RightButton
+        onClicked: control.echoMode !== TextInput.Password && menu.popup()
+    }
     FluIconButton{
         iconSource:FluentIcons.ChromeClose
         iconSize: 10
         width: 20
         height: 20
-        opacity: 0.5
-        visible: control.text !== ""
+        visible: {
+            if(control.readOnly)
+                return false
+            return control.text !== ""
+        }
         anchors{
             verticalCenter: parent.verticalCenter
             right: parent.right
-            rightMargin: icon_end.visible ? 25 : 5
+            rightMargin: closeRightMargin
         }
         onClicked:{
             control.text = ""
         }
     }
-    TapHandler {
-        acceptedButtons: Qt.RightButton
-        onTapped: control.echoMode !== TextInput.Password && menu.popup()
-    }
     FluTextBoxMenu{
         id:menu
         inputItem: control

src/imports/FluentUI/Controls/FluWindow.qml

@@ -44,11 +44,6 @@ Window {
         id: bg
         anchors.fill: parent
         color: backgroundColor
-        Behavior on color{
-            ColorAnimation {
-                duration: 300
-            }
-        }
     }
     Item{
         id:container
@@ -78,7 +73,7 @@ Window {
         return helper.createRegister(window,path)
     }
     function deleteWindow(){
-        helper.deleteWindow()
+        FluApp.deleteWindow(window)
     }
     function onResult(data){
         if(pageRegister){