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,1)
+add_definitions(-DVERSION=1,3,7,3)
 
 find_package(Qt6 REQUIRED COMPONENTS Quick)
 

example/qml/App.qml

@@ -5,7 +5,8 @@ import QtQuick.Layouts
 import FluentUI
 
 Window {
-    id:app
+    id: app
+    flags: Qt.SplashScreen
     Component.onCompleted: {
         FluApp.init(app)
         FluTheme.darkMode = FluDarkMode.System

example/qml/component/CodeExpander.qml

@@ -37,11 +37,6 @@ FluExpander{
             rightMargin: 5
             topMargin: 5
         }
-        onActiveFocusChanged: {
-            if(activeFocus){
-                control.expand = true
-            }
-        }
         onClicked:{
             FluTools.clipText(content.text)
             showSuccess("复制成功")
@@ -133,13 +128,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_FlipView.qml

@@ -76,7 +76,6 @@ FluScrollablePage{
                 Image{
                     source: "qrc:/example/res/image/banner_1.jpg"
                     asynchronous: true
-                    sourceSize: Qt.size(400,300)
                     fillMode:Image.PreserveAspectCrop
                 }
                 Image{

example/qml/page/T_Home.qml

@@ -8,6 +8,7 @@ import FluentUI
 FluScrollablePage{
 
     pageMode: FluNavigationView.SingleTask
+    animDisabled: true
 
     ListModel{
         id:model_header

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: 260
+        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_Progress.qml

@@ -12,32 +12,71 @@ FluScrollablePage{
     FluArea{
         Layout.fillWidth: true
         Layout.topMargin: 20
-        height: 260
+        height: 110
         paddings: 10
+
         ColumnLayout{
-            spacing: 20
+            spacing: 10
             anchors{
                 verticalCenter: parent.verticalCenter
                 left: parent.left
             }
+            FluText{
+                text: "indeterminate = true"
+            }
             FluProgressBar{
             }
             FluProgressRing{
             }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -1
+        code:'FluProgressBar{
+
+}
+FluProgressRing{
+
+}
+'
+    }
+
+    FluArea{
+        Layout.fillWidth: true
+        Layout.topMargin: 20
+        height: 230
+        paddings: 10
+
+        ColumnLayout{
+            spacing: 10
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+            FluText{
+                text: "indeterminate = false"
+            }
             FluProgressBar{
-                id:progress_bar
                 indeterminate: false
+                progress: slider.value/100
             }
             FluProgressRing{
-                id:progress_ring
                 indeterminate: false
+                progress: slider.value/100
+            }
+            FluProgressBar{
+                indeterminate: false
+                progressVisible: true
+                progress: slider.value/100
+            }
+            FluProgressRing{
+                indeterminate: false
+                progressVisible: true
+                progress: slider.value/100
             }
             FluSlider{
-                onValueChanged:{
-                    var progress = value/100
-                    progress_bar.progress = progress
-                    progress_ring.progress = progress
-                }
+                id:slider
                 Component.onCompleted: {
                     value = 50
                 }
@@ -48,22 +87,14 @@ FluScrollablePage{
         Layout.fillWidth: true
         Layout.topMargin: -1
         code:'FluProgressBar{
-
-}
-
-FluProgressRing{
-
-}
-
-FluProgressBar{
     indeterminate: false
 }
-
 FluProgressRing{
     indeterminate: false
-}'
+    progressVisible: true
+}
+'
     }
 
 
-
 }

example/qml/page/T_Rectangle.qml

@@ -12,7 +12,7 @@ FluScrollablePage{
     FluArea{
         Layout.fillWidth: true
         Layout.topMargin: 20
-        height: 480
+        height: 460
         paddings: 10
 
         Column{

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

@@ -10,7 +10,29 @@ FluContentPage{
     title:"TableView"
 
     Component.onCompleted: {
-        loadData(1,2000)
+        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){
@@ -40,7 +62,12 @@ FluContentPage{
                                 name: getRandomName(),
                                 age:getRandomAge(),
                                 address: getRandomAddresses(),
-                                nickname: getRandomNickname()
+                                nickname: getRandomNickname(),
+                                longstring:"你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好",
+                                height:42,
+                                minimumHeight:42,
+                                maximumHeight:300,
+                                action:com_action
                             })
         }
         table_view.dataSource = dataSource
@@ -48,9 +75,9 @@ FluContentPage{
 
     Component{
         id:com_combobox
-
         FluComboBox {
             anchors.fill: parent
+            focus: true
             currentIndex: display
             editable: true
             model: ListModel {
@@ -63,23 +90,30 @@ FluContentPage{
                 currentIndex=[100,300,500,1000].findIndex((element) => element === Number(display))
                 selectAll()
             }
-            TableView.onCommit: {
+            onCommit: {
                 display = editText
+                tableView.closeEditor()
             }
         }
     }
 
     FluTableView{
         id:table_view
-        anchors.fill: parent
+        anchors{
+            left: parent.left
+            right: parent.right
+            top: parent.top
+            bottom: gagination.top
+        }
         anchors.topMargin: 20
         columnSource:[
             {
                 title: '姓名',
                 dataIndex: 'name',
                 width:100,
-                minimumWidth:50
-
+                minimumWidth:80,
+                maximumWidth:200,
+                readOnly:true
             },
             {
                 title: '年龄',
@@ -87,19 +121,57 @@ FluContentPage{
                 editDelegate:com_combobox,
                 width:100,
                 minimumWidth:100,
-                maximumWidth: 100
+                maximumWidth:100
             },
             {
                 title: '住址',
                 dataIndex: 'address',
-                width:200
+                width:200,
+                minimumWidth:100,
+                maximumWidth:250
             },
             {
                 title: '别名',
                 dataIndex: 'nickname',
                 width:100,
-
+                minimumWidth:80,
+                maximumWidth:200
+            },
+            {
+                title: '长字符串',
+                dataIndex: 'longstring',
+                width:200,
+                minimumWidth:100,
+                maximumWidth:300
+            },
+            {
+                title: '操作',
+                dataIndex: 'action',
+                width:160,
+                minimumWidth:160,
+                maximumWidth:160
             }
         ]
     }
+
+    FluPagination{
+        id:gagination
+        anchors{
+            bottom: parent.bottom
+            left: parent.left
+        }
+        pageCurrent: 1
+        itemCount: 100000
+        pageButtonCount: 7
+        __itemPerPage: 1000
+        onRequestPage:
+            (page,count)=> {
+                table_view.closeEditor()
+                loadData(page,count)
+                table_view.resetPosition()
+            }
+    }
+
+
+
 }

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"
 
@@ -15,7 +16,7 @@ CustomWindow {
     height: 640
     closeDestory:false
     minimumWidth: 520
-    minimumHeight: 460
+    minimumHeight: 200
     appBarVisible: false
     launchMode: FluWindow.SingleTask
 
@@ -94,7 +95,7 @@ CustomWindow {
             when: flipable.flipped
         }
         transitions: Transition {
-            NumberAnimation { target: flipable; property: "flipAngle"; duration: 1000 ; easing.type: Easing.OutQuad}
+            NumberAnimation { target: flipable; property: "flipAngle"; duration: 1000 ; easing.type: Easing.OutCubic}
         }
         back: Item{
             anchors.fill: flipable
@@ -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
@@ -134,6 +141,7 @@ CustomWindow {
 
             FluRemoteLoader{
                 id:loader
+                lazy: true
                 anchors.fill: parent
                 //                source: "http://localhost:9000/RemoteComponent.qml"
                 source: "https://zhu-zichu.gitee.io/RemoteComponent.qml"
@@ -172,7 +180,7 @@ CustomWindow {
                     }
                 }
                 transformOrigin: Item.Center
-                onLoginClicked:{
+                onLogoClicked:{
                     clickCount += 1
                     if(clickCount === 1){
                         loader.reload()
@@ -200,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()
         }
     }
 
@@ -256,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,1)
+add_definitions(-DVERSION=1,3,7,3)
 
 find_package(Qt6 REQUIRED COMPONENTS Core Quick Qml)
 

src/FluApp.cpp

@@ -38,13 +38,13 @@ void FluApp::run(){
 
 void FluApp::navigate(const QString& route,const QJsonObject& argument,FluRegister* fluRegister){
     if(!routes().contains(route)){
-        qFatal()<<"No route found "<<route;
+        qCritical()<<"No route found "<<route;
         return;
     }
     QQmlEngine *engine = qmlEngine(appWindow);
     QQmlComponent component(engine, routes().value(route).toString());
     if (component.isError()) {
-        qFatal() << component.errors();
+        qCritical() << component.errors();
         return;
     }
     QVariantMap properties;
@@ -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

@@ -2,6 +2,7 @@
 #include <QGuiApplication>
 #include <QClipboard>
 #include <QUuid>
+#include <QCursor>
 
 FluTools* FluTools::m_instance = nullptr;
 
@@ -63,6 +64,33 @@ bool FluTools::isWin(){
 #endif
 }
 
+int FluTools::qtMajor(){
+    const QString qtVersion = QString::fromLatin1(qVersion());
+    const QStringList versionParts = qtVersion.split('.');
+    return versionParts[0].toInt();
+}
+
+int FluTools::qtMinor(){
+    const QString qtVersion = QString::fromLatin1(qVersion());
+    const QStringList versionParts = qtVersion.split('.');
+    return versionParts[1].toInt();
+}
+
 void FluTools::setQuitOnLastWindowClosed(bool val){
     qApp->setQuitOnLastWindowClosed(val);
 }
+
+void FluTools::setOverrideCursor(Qt::CursorShape shape){
+    qApp->setOverrideCursor(QCursor(shape));
+}
+
+void FluTools::restoreOverrideCursor(){
+    qApp->restoreOverrideCursor();
+}
+
+void FluTools::deleteItem(QObject *p){
+    if(p){
+        delete p;
+        p = nullptr;
+    }
+}

src/FluTools.h

@@ -50,6 +50,15 @@ public:
 
     Q_INVOKABLE void setQuitOnLastWindowClosed(bool val);
 
+    Q_INVOKABLE int qtMajor();
+
+    Q_INVOKABLE int qtMinor();
+
+    Q_INVOKABLE void setOverrideCursor(Qt::CursorShape shape);
+
+    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

@@ -6,6 +6,7 @@ import QtQuick.Templates as T
 
 ComboBox {
     id: control
+    signal commit
     property bool disabled: false
     property color normalColor: FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(254/255,254/255,254/255,1)
     property color hoverColor: FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
@@ -38,12 +39,13 @@ ComboBox {
     }
     contentItem: T.TextField {
         property bool disabled: !control.editable
-        leftPadding: !control.mirrored ? 12 : control.editable && activeFocus ? 3 : 1
-        rightPadding: control.mirrored ? 12 : control.editable && activeFocus ? 3 : 1
+        leftPadding: !control.mirrored ? 10 : control.editable && activeFocus ? 3 : 1
+        rightPadding: control.mirrored ? 10 : control.editable && activeFocus ? 3 : 1
         topPadding: 6 - control.padding
         bottomPadding: 6 - control.padding
         renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering
-        selectionColor: FluTheme.primaryColor.lightest
+        selectionColor: Qt.alpha(FluTheme.primaryColor.lightest,0.6)
+        selectedTextColor: color
         text: control.editable ? control.editText : control.displayText
         enabled: control.editable
         autoScroll: control.editable
@@ -57,17 +59,24 @@ ComboBox {
         leftInset:1
         topInset:1
         bottomInset:1
-        focus: true
         rightInset:1
         background: FluTextBoxBackground{
             border.width: 0
             inputItem: contentItem
         }
+        Component.onCompleted: {
+            forceActiveFocus()
+        }
+        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,15 +14,19 @@ TextEdit {
     leftPadding: 0
     rightPadding: 0
     topPadding: 0
+    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/FluExpander.qml

@@ -9,10 +9,8 @@ Item {
     property int contentHeight : 300
     default property alias content: container.data
     id:control
-    height: layout_header.height + container.height
-    width: 400
-    implicitWidth: width
-    implicitHeight: height
+    implicitHeight: Math.max((layout_header.height + container.height),layout_header.height)
+    implicitWidth: 400
     Rectangle{
         id:layout_header
         width: parent.width
@@ -58,29 +56,66 @@ Item {
                 Behavior on rotation {
                     NumberAnimation{
                         duration: 167
+                        easing.type: Easing.OutCubic
                     }
                 }
             }
         }
     }
-    Rectangle{
-        id:container
-        width: parent.width
-        clip: true
+    Item{
         anchors{
             top: layout_header.bottom
             topMargin: -1
             left: layout_header.left
         }
-        radius: 4
-        color: FluTheme.dark ? Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
-        border.color: FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,229/255,234/255,1)
-        height: expand ? contentHeight : 0
-        Behavior on height {
-            NumberAnimation{
-                duration: 167
-                easing.type: Easing.InCubic
-            }
+        width: parent.width
+        clip: true
+        visible: contentHeight+container.y !== 0
+        height: contentHeight+container.y
+        Rectangle{
+            id:container
+            width: parent.width
+            height: parent.height
+            radius: 4
+            color: FluTheme.dark ? Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
+            border.color: FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,229/255,234/255,1)
+            y: -contentHeight
+            states: [
+                State{
+                    name:"expand"
+                    when: control.expand
+                    PropertyChanges {
+                        target: container
+                        y:0
+                    }
+                },
+                State{
+                    name:"collapsed"
+                    when: !control.expand
+                    PropertyChanges {
+                        target: container
+                        y:-contentHeight
+                    }
+                }
+            ]
+            transitions: [
+                Transition {
+                    to:"expand"
+                    NumberAnimation {
+                        properties: "y"
+                        duration: 167
+                        easing.type: Easing.OutCubic
+                    }
+                },
+                Transition {
+                    to:"collapsed"
+                    NumberAnimation {
+                        properties: "y"
+                        duration: 167
+                        easing.type: Easing.OutCubic
+                    }
+                }
+            ]
         }
     }
 }

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

@@ -4,6 +4,7 @@ import QtQuick.Controls.Basic
 import FluentUI
 
 TextArea{
+    signal commit
     property bool disabled: false
     property color normalColor: FluTheme.dark ?  Qt.rgba(255/255,255/255,255/255,1) : Qt.rgba(27/255,27/255,27/255,1)
     property color disableColor: FluTheme.dark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1)
@@ -21,8 +22,11 @@ TextArea{
     }
     font:FluTextStyle.Body
     wrapMode: Text.WrapAnywhere
+    padding: 8
+    leftPadding: padding+2
     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
@@ -34,9 +38,23 @@ TextArea{
     }
     selectByMouse: true
     background: FluTextBoxBackground{ inputItem: control }
-    TapHandler {
+    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()
+        }
+    }
+    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

@@ -27,11 +27,10 @@ Item {
     property Component autoSuggestBox
     property Component actionItem
     property int topPadding: 0
-    signal loginClicked
+    signal logoClicked
     id:control
     QtObject{
         id:d
-        property var pageMap: ({})
         property var stackItems: []
         property int displayMode: FluNavigationView.Open
         property bool enableNavigationPanel: false
@@ -119,11 +118,6 @@ Item {
                 }
                 return 1
             }
-            Behavior on height {
-                NumberAnimation{
-                    duration: 83
-                }
-            }
         }
     }
     Component{
@@ -243,7 +237,8 @@ Item {
                         }
                         Behavior on rotation {
                             NumberAnimation{
-                                duration: 83
+                                duration: 167
+                                easing.type: Easing.OutCubic
                             }
                         }
                     }
@@ -519,7 +514,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)){
@@ -565,7 +560,7 @@ Item {
                 Behavior on Layout.preferredWidth {
                     NumberAnimation{
                         duration: 167
-                        easing.type: Easing.InCubic
+                        easing.type: Easing.OutCubic
                     }
                 }
             }
@@ -585,7 +580,7 @@ Item {
                 MouseArea{
                     anchors.fill: parent
                     onClicked: {
-                        loginClicked()
+                        logoClicked()
                     }
                 }
             }
@@ -631,7 +626,7 @@ Item {
         Behavior on anchors.leftMargin {
             NumberAnimation{
                 duration: 167
-                easing.type: Easing.InCubic
+                easing.type: Easing.OutCubic
             }
         }
         StackView{
@@ -686,13 +681,13 @@ Item {
         Behavior on width {
             NumberAnimation{
                 duration: 167
-                easing.type: Easing.InCubic
+                easing.type: Easing.OutCubic
             }
         }
         Behavior on x {
             NumberAnimation{
                 duration: 167
-                easing.type: Easing.InCubic
+                easing.type: Easing.OutCubic
             }
         }
         visible: {
@@ -752,27 +747,8 @@ Item {
                 }
             }
         }
-        ListView{
-            id:nav_list
-            clip: true
-            ScrollBar.vertical: FluScrollBar {}
-            model:d.handleItems()
-            highlightMoveDuration: 167
-            highlight: Item{
-                clip: true
-                Rectangle{
-                    height: 18
-                    radius: 1.5
-                    color: FluTheme.primaryColor.dark
-                    width: 3
-                    anchors{
-                        verticalCenter: parent.verticalCenter
-                        left: parent.left
-                        leftMargin: 6
-                    }
-                }
-            }
-            currentIndex: -1
+        Flickable{
+            id:layout_flickable
             anchors{
                 top: layout_header.bottom
                 topMargin: 6
@@ -780,29 +756,58 @@ Item {
                 right: parent.right
                 bottom: layout_footer.top
             }
-            delegate: Loader{
-                property var model: modelData
-                property var idx: index
-                property int type: 0
-                sourceComponent: {
-                    if(modelData instanceof FluPaneItem){
-                        return com_panel_item
+            boundsBehavior: ListView.StopAtBounds
+            clip: true
+            contentHeight: nav_list.contentHeight
+            ScrollBar.vertical: FluScrollBar {}
+            ListView{
+                id:nav_list
+                clip: true
+                anchors.fill: parent
+                model:d.handleItems()
+                boundsBehavior: ListView.StopAtBounds
+                highlightMoveDuration: 167
+                highlight: Item{
+                    clip: true
+                    Rectangle{
+                        height: 18
+                        radius: 1.5
+                        color: FluTheme.primaryColor.dark
+                        width: 3
+                        anchors{
+                            verticalCenter: parent.verticalCenter
+                            left: parent.left
+                            leftMargin: 6
+                        }
                     }
-                    if(modelData instanceof FluPaneItemHeader){
-                        return com_panel_item_header
-                    }
-                    if(modelData instanceof FluPaneItemSeparator){
-                        return com_panel_item_separatorr
-                    }
-                    if(modelData instanceof FluPaneItemExpander){
-                        return com_panel_item_expander
-                    }
-                    if(modelData instanceof FluPaneItemEmpty){
-                        return com_panel_item_empty
+                }
+                currentIndex: -1
+
+                delegate: Loader{
+                    property var model: modelData
+                    property var idx: index
+                    property int type: 0
+                    sourceComponent: {
+                        if(modelData instanceof FluPaneItem){
+                            return com_panel_item
+                        }
+                        if(modelData instanceof FluPaneItemHeader){
+                            return com_panel_item_header
+                        }
+                        if(modelData instanceof FluPaneItemSeparator){
+                            return com_panel_item_separatorr
+                        }
+                        if(modelData instanceof FluPaneItemExpander){
+                            return com_panel_item_expander
+                        }
+                        if(modelData instanceof FluPaneItemEmpty){
+                            return com_panel_item_empty
+                        }
                     }
                 }
             }
         }
+
         ListView{
             id:layout_footer
             clip: true
@@ -810,6 +815,7 @@ Item {
             height: childrenRect.height
             anchors.bottom: parent.bottom
             interactive: false
+            boundsBehavior: ListView.StopAtBounds
             currentIndex: -1
             model: {
                 if(footerItems){
@@ -959,6 +965,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 +990,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 +1000,7 @@ Item {
             case FluNavigationView.SingleTask:
                 while(nav_swipe.currentItem !== page)
                 {
-                    nav_swipe.pop()
+                    FluTools.deleteItem(nav_swipe.pop())
                     d.stackItems.pop()
                 }
                 return
@@ -1010,22 +1013,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 +1037,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/FluPage.qml

@@ -6,17 +6,28 @@ import FluentUI
 
 Item {
     property int pageMode: FluNavigationView.SingleTop
+    property bool animDisabled: false
     property string url : ""
     id: control
     opacity: visible
     visible: false
     Behavior on opacity{
+        enabled: !animDisabled
         NumberAnimation{
-            duration: 83
+            duration: 167
+        }
+    }
+    transform: Translate {
+        y: control.visible ? 0 : 80
+        Behavior on y{
+            enabled: !animDisabled
+            NumberAnimation{
+                duration: 167
+                easing.type: Easing.OutCubic
+            }
         }
     }
     Component.onCompleted: {
         visible = true
     }
-
 }

src/imports/FluentUI/Controls/FluPasswordBox.qml

@@ -4,6 +4,7 @@ import QtQuick.Controls.Basic
 import FluentUI
 
 TextField{
+    signal commit
     property bool disabled: false
     property int iconSource: 0
     property color normalColor: FluTheme.dark ?  Qt.rgba(255/255,255/255,255/255,1) : Qt.rgba(27/255,27/255,27/255,1)
@@ -21,9 +22,12 @@ TextField{
         return normalColor
     }
     font:FluTextStyle.Body
+    padding: 8
+    leftPadding: padding+2
     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
@@ -50,6 +54,14 @@ TextField{
             }
         }
     }
+    Keys.onEnterPressed: (event)=> d.handleCommit(event)
+    Keys.onReturnPressed:(event)=> d.handleCommit(event)
+    QtObject{
+        id:d
+        function handleCommit(event){
+            control.commit()
+        }
+    }
     FluIconButton{
         id:btn_reveal
         iconSource:FluentIcons.RevealPasswordMedium
@@ -64,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/FluPivot.qml

@@ -40,7 +40,7 @@ Item {
                 Behavior on width {
                     NumberAnimation{
                         duration: 167
-                        easing.type: Easing.InCubic
+                        easing.type: Easing.OutCubic
                     }
                 }
             }

src/imports/FluentUI/Controls/FluPopup.qml

@@ -21,6 +21,7 @@ Popup {
             from:1.2
             to:1
             duration: 83
+            easing.type: Easing.OutCubic
         }
         NumberAnimation {
             property: "opacity"
@@ -35,6 +36,7 @@ Popup {
             from:1
             to:1.2
             duration: 83
+            easing.type: Easing.OutCubic
         }
         NumberAnimation {
             property: "opacity"

src/imports/FluentUI/Controls/FluProgressBar.qml

@@ -2,44 +2,67 @@ import QtQuick
 import QtQuick.Controls
 import FluentUI
 
-FluRectangle {
+Item{
+
     property real progress: 0.5
     property bool indeterminate: true
+    property bool progressVisible: false
     id: control
     width: 150
     height: 5
-    radius: [3,3,3,3]
-    clip: true
-    color:  FluTheme.dark ? Qt.rgba(99/255,99/255,99/255,1) : Qt.rgba(214/255,214/255,214/255,1)
-    Component.onCompleted: {
-        if(indeterminate){
-            bar.x = -control.width*0.5
-            behavior.enabled = true
-            bar.x = control.width
-        }else{
-            bar.x = 0
+
+    FluRectangle {
+        shadow: false
+        radius: [3,3,3,3]
+        anchors.fill: parent
+        color:  FluTheme.dark ? Qt.rgba(99/255,99/255,99/255,1) : Qt.rgba(214/255,214/255,214/255,1)
+        Component.onCompleted: {
+            if(indeterminate){
+                bar.x = -control.width*0.5
+                behavior.enabled = true
+                bar.x = control.width
+            }else{
+                bar.x = 0
+            }
         }
-    }
-    Rectangle{
-        id:bar
-        radius: 3
-        width: control.width*progress
-        height:  control.height
-        color:FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
-        Behavior on x{
-            id:behavior
-            enabled: false
-            NumberAnimation{
-                duration: 1000
-                onRunningChanged: {
-                    if(!running){
-                        behavior.enabled = false
-                        bar.x = -control.width*0.5
-                        behavior.enabled = true
-                        bar.x = control.width
+        Rectangle{
+            id:bar
+            radius: 3
+            width: control.width*progress
+            height:  control.height
+            color:FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
+            Behavior on x{
+                id:behavior
+                enabled: false
+                NumberAnimation{
+                    duration: 1000
+                    onRunningChanged: {
+                        if(!running){
+                            behavior.enabled = false
+                            bar.x = -control.width*0.5
+                            behavior.enabled = true
+                            bar.x = control.width
+                        }
                     }
                 }
             }
         }
     }
+
+    FluText{
+        text:(control.progress * 100).toFixed(0) + "%"
+        font.pixelSize: 10
+        visible: {
+            if(control.indeterminate){
+                return false
+            }
+            return control.progressVisible
+        }
+        anchors{
+            left: parent.left
+            leftMargin: control.width+5
+            verticalCenter: parent.verticalCenter
+        }
+    }
 }
+

src/imports/FluentUI/Controls/FluProgressRing.qml

@@ -3,11 +3,11 @@ import QtQuick.Controls
 import FluentUI
 
 Rectangle {
-    property real linWidth : width/8
+    property real linWidth : 5
     property real progress: 0.25
     property bool indeterminate: true
-    readonly property real radius2 : radius - linWidth/2
     property color primaryColor : FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
+    property bool progressVisible: false
     id: control
     width: 44
     height: 44
@@ -24,6 +24,10 @@ Rectangle {
             control.rotation = 360
         }
     }
+    QtObject{
+        id:d
+        property real _radius: control.radius-control.linWidth/2
+    }
     Connections{
         target: FluTheme
         function onDarkChanged(){
@@ -35,8 +39,6 @@ Rectangle {
         enabled: false
         NumberAnimation{
             duration: 999
-            easing.type: Easing.BezierSpline
-            easing.bezierCurve: [0.55,0.55,0,1]
             onRunningChanged: {
                 if(!running){
                     behavior.enabled = false
@@ -53,18 +55,29 @@ Rectangle {
         antialiasing: true
         renderTarget: Canvas.Image
         onPaint: {
-            var ctx = canvas.getContext("2d");
-            ctx.setTransform(1, 0, 0, 1, 0, 0);
-            ctx.clearRect(0, 0, canvas.width, canvas.height);
-            ctx.save();
-            ctx.lineWidth = linWidth;
-            ctx.strokeStyle = primaryColor;
-            ctx.fillStyle = primaryColor;
-            ctx.beginPath();
-            ctx.arc(width/2, height/2, radius2 ,-0.5 * Math.PI,-0.5 * Math.PI + progress * 2 * Math.PI);
-            ctx.stroke();
-            ctx.closePath();
-            ctx.restore();
+            var ctx = canvas.getContext("2d")
+            ctx.setTransform(1, 0, 0, 1, 0, 0)
+            ctx.clearRect(0, 0, canvas.width, canvas.height)
+            ctx.save()
+            ctx.lineWidth = linWidth
+            ctx.strokeStyle = primaryColor
+            ctx.fillStyle = primaryColor
+            ctx.beginPath()
+            ctx.arc(width/2, height/2, d._radius ,-0.5 * Math.PI,-0.5 * Math.PI + progress * 2 * Math.PI)
+            ctx.stroke()
+            ctx.closePath()
+            ctx.restore()
         }
     }
+    FluText{
+        text:(control.progress * 100).toFixed(0) + "%"
+        font.pixelSize: 10
+        visible: {
+            if(control.indeterminate){
+                return false
+            }
+            return control.progressVisible
+        }
+        anchors.centerIn: parent
+    }
 }

src/imports/FluentUI/Controls/FluRadioButton.qml

@@ -64,8 +64,7 @@ Button {
             Behavior on border.width {
                 NumberAnimation{
                     duration: 167
-                    easing.type: Easing.BezierSpline
-                    easing.bezierCurve: [ 0, 0, 0, 1 ]
+                    easing.type: Easing.OutCubic
                 }
             }
             border.color: {

src/imports/FluentUI/Controls/FluRemoteLoader.qml

@@ -4,15 +4,20 @@ import FluentUI
 
 FluStatusView {
     property url source: ""
+    property bool lazy: false
     color:"transparent"
     id:control
     onErrorClicked: {
         reload()
     }
+    Component.onCompleted: {
+        if(!lazy){
+            loader.source = control.source
+        }
+    }
     Loader{
         id:loader
         anchors.fill: parent
-        source: control.source
         asynchronous: true
         onStatusChanged: {
             if(status === Loader.Error){

src/imports/FluentUI/Controls/FluScrollBar.qml

@@ -1,189 +1,89 @@
 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:"show"
+                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:"hide"
+                when: !contentItem.collapsed
+                PropertyChanges {
+                    target: rect_bar
+                    width:  vertical ? 2 : parent.width
+                    height: horizontal  ? 2 : parent.height
+                }
+            }
+        ]
+        transitions:[
+            Transition {
+                to: "hide"
+                SequentialAnimation {
+                    PauseAnimation { duration: 450 }
+                    NumberAnimation {
+                        target: rect_bar
+                        properties: vertical ? "width"  : "height"
+                        duration: 167
+                        easing.type: Easing.OutCubic
+                    }
+                }
+            }
+            ,Transition {
+                to: "show"
+                SequentialAnimation{
+                    PauseAnimation { duration: 100 }
+                    NumberAnimation {
+                        target: rect_bar
+                        properties: vertical ? "width"  : "height"
+                        duration: 167
+                        easing.type: Easing.OutCubic
+                    }
+                }
+            }
+        ]
     }
 }

src/imports/FluentUI/Controls/FluScrollablePage.qml

@@ -41,7 +41,10 @@ FluPage {
         contentWidth: parent.width
         contentHeight: container.height
         ScrollBar.vertical: FluScrollBar {
+            anchors.right: flickview.right
+            anchors.rightMargin: 2
         }
+        boundsBehavior: Flickable.StopAtBounds
         anchors{
             top: text_title.bottom
             bottom: parent.bottom

src/imports/FluentUI/Controls/FluSlider.qml

@@ -38,6 +38,7 @@ T.Slider {
             Behavior on scale {
                 NumberAnimation{
                     duration: 167
+                    easing.type: Easing.OutCubic
                 }
             }
         }

src/imports/FluentUI/Controls/FluSpinBox.qml

@@ -0,0 +1,160 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+import FluentUI
+
+Rectangle{
+    readonly property string displayText : d._displayText
+    property bool disabled: false
+    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
+            disabled: control.disabled
+            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
+        disabled: control.disabled
+        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
+        disabled: {
+            if(control.disabled===true){
+                return true
+            }
+            return Number(control.displayText) === control.to
+        }
+        iconSource: FluentIcons.ChevronUp
+        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
+        disabled: {
+            if(control.disabled === true){
+                return true
+            }
+            return Number(control.displayText) === control.from
+        }
+        iconSize: 16
+        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: {
@@ -15,14 +18,43 @@ Rectangle {
             var com_column = Qt.createComponent("FluTableModelColumn.qml")
             if (com_column.status === Component.Ready) {
                 var columns= []
+                var header_rows = {}
                 columnSource.forEach(function(item){
                     var column = com_column.createObject(table_model,{display:item.dataIndex});
                     columns.push(column)
+                    header_rows[item.dataIndex] = item.title
                 })
                 table_model.columns = columns
+                header_model.columns = columns
+                d.header_rows = [header_rows]
             }
         }
     }
+    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
+            }
+            if(columnSource[column].editMultiline === true){
+                return com_edit_multiline
+            }
+            return com_edit
+        }
+    }
     onDataSourceChanged: {
         table_model.clear()
         dataSource.forEach(function(item){
@@ -34,13 +66,92 @@ Rectangle {
     }
     Component{
         id:com_edit
-        FluTextBox {
-            anchors.fill: parent
+        FluTextBox{
             text: display
-            verticalAlignment: TextInput.AlignVCenter
-            Component.onCompleted: selectAll()
-            TableView.onCommit: {
-                display = text
+            readOnly: true === columnSource[column].readOnly
+            Component.onCompleted: {
+                forceActiveFocus()
+                selectAll()
+            }
+            onCommit: {
+                if(!readOnly){
+                    display = text
+                }
+                tableView.closeEditor()
+            }
+        }
+    }
+    Component{
+        id:com_edit_multiline
+        Item{
+            anchors.fill: parent
+            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()
+                    }
+                }
+            }
+            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
             }
         }
     }
@@ -60,105 +171,369 @@ Rectangle {
             boundsBehavior: Flickable.StopAtBounds
             ScrollBar.horizontal: FluScrollBar{}
             ScrollBar.vertical: FluScrollBar{}
-            selectionModel: ItemSelectionModel {}
-            columnWidthProvider: function(column) {
-                let w = explicitColumnWidth(column)
-                if (w >= 0){
-                    var minimumWidth = columnSource[column].minimumWidth
-                    var maximumWidth = columnSource[column].maximumWidth
-                    if(!minimumWidth){
-                        minimumWidth = 100
+            selectionModel: ItemSelectionModel {
+                id:selection_model
+                model: table_model
+                onSelectionChanged: {
+                    if(selection_rect.dragging){
+                        d.selectionFlag = !d.selectionFlag
                     }
-                    if(!maximumWidth){
-                        maximumWidth = 65535
-                    }
-
-                    return Math.min(Math.max(minimumWidth, w),maximumWidth)
                 }
-                return implicitColumnWidth(column)
+            }
+            columnWidthProvider: function(column) {
+                var w = columnSource[column].width
+                if(column === item_loader.column){
+                    item_loader.width = w
+                }
+                if(column === item_loader.column-1){
+                    let cellItem = table_view.itemAtCell(item_loader.column, item_loader.row)
+                    if(cellItem){
+                        let cellPosition = cellItem.mapToItem(scroll_table, 0, 0)
+                        item_loader.x = table_view.contentX + cellPosition.x
+                    }
+                }
+                return w
             }
             rowHeightProvider: function(row) {
-                let h = explicitRowHeight(row)
-                if (h >= 0){
-                    return Math.max(40, h)
+                if(row>=table_model.rowCount){
+                    return 0
                 }
-                return implicitRowHeight(row)
+                var h = table_model.getRow(row).height
+                if(row === item_loader.row){
+                    item_loader.height = h
+                }
+                if(row === item_loader.row-1){
+                    let cellItem = table_view.itemAtCell(item_loader.column, item_loader.row)
+                    if(cellItem){
+                        let cellPosition = cellItem.mapToItem(scroll_table, 0, 0)
+                        item_loader.y = table_view.contentY + cellPosition.y
+                    }
+                }
+                return h
             }
             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
-                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
-                FluText {
-                    text: display
+                Rectangle{
                     anchors.fill: parent
-                    anchors.margins: 10
-                    elide: Text.ElideRight
-                    verticalAlignment: Text.AlignVCenter
+                    visible: !item_loader.sourceComponent
+                    color: selected ? control.selectionColor : "#00000000"
                 }
-                TableView.editDelegate: {
-                    var obj =columnSource[column].editDelegate
-                    if(obj){
-                        return obj
+                MouseArea{
+                    anchors.fill: parent
+                    acceptedButtons: Qt.LeftButton
+                    onPressed:{
+                        closeEditor()
+                        table_view.interactive = false
                     }
-                    return com_edit
+                    onCanceled: {
+                        table_view.interactive = true
+                    }
+                    onReleased: {
+                        table_view.interactive = true
+                    }
+                    onDoubleClicked:{
+                        if(display instanceof Component){
+                            return
+                        }
+                        item_loader.sourceComponent = d.obtEditDelegate(column,row)
+                    }
+                    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
+                        }
                 }
+                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
+                    sourceComponent: {
+                        if(itemData instanceof Component){
+                            return itemData
+                        }
+                        return com_text
+                    }
+                }
+            }
+        }
+        Loader{
+            id:item_loader
+            z:2
+            property var display
+            property int column
+            property int row
+            property var tableView: control
+            sourceComponent: null
+            onDisplayChanged: {
+                var obj = table_model.getRow(row)
+                obj[columnSource[column].dataIndex] = display
+                table_model.setRow(row,obj)
             }
         }
     }
     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: table_view
         bottomRightHandle:com_handle
         topLeftHandle: com_handle
+        onDraggingChanged: {
+            if(!dragging){
+                table_view.interactive = true
+            }
+        }
     }
-    FluHorizontalHeaderView {
+    TableView {
         id: header_horizontal
-        textRole: "title"
-        model: columnSource
+        model: TableModel{
+            id:header_model
+            rows: d.header_rows
+        }
+        syncDirection: Qt.Horizontal
         anchors.left: scroll_table.left
         anchors.top: parent.top
+        implicitWidth: syncView ? syncView.width : 0
+        implicitHeight: Math.max(1, contentHeight)
         syncView: table_view
         boundsBehavior: Flickable.StopAtBounds
         clip: true
+        delegate: Rectangle {
+            id:column_item_control
+            readonly property real cellPadding: 8
+            property bool canceled: false
+            readonly property var obj : columnSource[column]
+            implicitWidth: column_text.implicitWidth + (cellPadding * 2)
+            implicitHeight: Math.max(header_horizontal.height, column_text.implicitHeight + (cellPadding * 2))
+            color:{
+                d.selectionFlag
+                if(column_item_control_mouse.pressed){
+                    return control.pressedButtonColor
+                }
+                if(selection_model.isColumnSelected(column)){
+                    return control.hoverButtonColor
+                }
+                return column_item_control_mouse.containsMouse&&!canceled ? 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: model.display
+                width: parent.width
+                height: parent.height
+                font.bold:{
+                    d.selectionFlag
+                    return selection_model.columnIntersectsSelection(column)
+                }
+                horizontalAlignment: Text.AlignHCenter
+                verticalAlignment: Text.AlignVCenter
+            }
+            MouseArea{
+                id:column_item_control_mouse
+                anchors.fill: parent
+                anchors.rightMargin: 6
+                hoverEnabled: true
+                onCanceled: {
+                    column_item_control.canceled = true
+                }
+                onContainsMouseChanged: {
+                    if(!containsMouse){
+                        column_item_control.canceled = false
+                    }
+                }
+                onClicked:
+                    (event)=>{
+                        closeEditor()
+                        if(!(event.modifiers & Qt.ControlModifier)){
+                            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: 6
+                anchors.right: parent.right
+                acceptedButtons: Qt.LeftButton
+                hoverEnabled: true
+                visible: !(obj.width === obj.minimumWidth && obj.width === obj.maximumWidth)
+                cursorShape: Qt.SplitHCursor
+                onPressed :
+                    (mouse)=>{
+                        header_horizontal.interactive = false
+                        FluTools.setOverrideCursor(Qt.SplitHCursor)
+                        clickPos = Qt.point(mouse.x, mouse.y)
+                    }
+                onReleased:{
+                    header_horizontal.interactive = true
+                    FluTools.restoreOverrideCursor()
+                }
+                onCanceled: {
+                    header_horizontal.interactive = true
+                    FluTools.restoreOverrideCursor()
+                }
+                onPositionChanged:
+                    (mouse)=>{
+                        if(!pressed){
+                            return
+                        }
+                        var delta = Qt.point(mouse.x - clickPos.x, mouse.y - clickPos.y)
+                        var minimumWidth = obj.minimumWidth
+                        var maximumWidth = obj.maximumWidth
+                        if(!minimumWidth){
+                            minimumWidth = 100
+                        }
+                        if(!maximumWidth){
+                            maximumWidth = 65535
+                        }
+                        obj.width = Math.min(Math.max(minimumWidth, obj.width + delta.x),maximumWidth)
+                        table_view.forceLayout()
+                    }
+            }
+        }
     }
-    FluVerticalHeaderView {
+    TableView {
         id: header_vertical
         boundsBehavior: Flickable.StopAtBounds
         anchors.top: scroll_table.top
         anchors.left: parent.left
+        implicitWidth: Math.max(1, contentWidth)
+        implicitHeight: syncView ? syncView.height : 0
+        syncDirection: Qt.Vertical
         syncView: table_view
         clip: true
+        model: TableModel{
+            TableModelColumn {}
+            rows: {
+                if(dataSource)
+                    return dataSource
+                return []
+            }
+        }
+        delegate: Rectangle{
+            id:item_control
+            readonly property real cellPadding: 8
+            property bool canceled: false
+            implicitWidth: Math.max(header_vertical.width, row_text.implicitWidth + (cellPadding * 2))
+            implicitHeight: row_text.implicitHeight + (cellPadding * 2)
+            color: {
+                d.selectionFlag
+                if(item_control_mouse.pressed){
+                    return control.pressedButtonColor
+                }
+                if(selection_model.isRowSelected(row)){
+                    return control.hoverButtonColor
+                }
+                return item_control_mouse.containsMouse&&!canceled ? 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
+                font.bold:{
+                    d.selectionFlag
+                    return selection_model.rowIntersectsSelection(row)
+                }
+            }
+            MouseArea{
+                id:item_control_mouse
+                anchors.fill: parent
+                anchors.bottomMargin: 6
+                hoverEnabled: true
+                onCanceled: {
+                    item_control.canceled = true
+                }
+                onContainsMouseChanged: {
+                    if(!containsMouse){
+                        item_control.canceled = false
+                    }
+                }
+                onClicked:
+                    (event)=>{
+                        closeEditor()
+                        if(!(event.modifiers & Qt.ControlModifier)){
+                            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: 6
+                width: parent.width
+                anchors.bottom: parent.bottom
+                acceptedButtons: Qt.LeftButton
+                cursorShape: Qt.SplitVCursor
+                visible: {
+                    var obj = table_model.getRow(row)
+                    return !(obj.height === obj.minimumHeight && obj.width === obj.maximumHeight)
+                }
+                onPressed :
+                    (mouse)=>{
+                        header_vertical.interactive = false
+                        FluTools.setOverrideCursor(Qt.SplitVCursor)
+                        clickPos = Qt.point(mouse.x, mouse.y)
+                    }
+                onReleased:{
+                    header_vertical.interactive = true
+                    FluTools.restoreOverrideCursor()
+                }
+                onCanceled: {
+                    header_vertical.interactive = true
+                    FluTools.restoreOverrideCursor()
+                }
+                onPositionChanged:
+                    (mouse)=>{
+                        if(!pressed){
+                            return
+                        }
+                        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 = 42
+                        }
+                        if(!maximumHeight){
+                            maximumHeight = 65535
+                        }
+                        obj.height = Math.min(Math.max(minimumHeight, obj.height + delta.y),maximumHeight)
+                        table_model.setRow(row,obj)
+                        table_view.forceLayout()
+                    }
+            }
+        }
+    }
+    function closeEditor(){
+        item_loader.sourceComponent = null
+    }
+    function resetPosition(){
+        table_view.positionViewAtCell(Qt.point(0, 0),Qt.AlignTop|Qt.AlignLeft)
     }
 }
-

src/imports/FluentUI/Controls/FluTextBox.qml

@@ -4,6 +4,7 @@ import QtQuick.Controls.Basic
 import FluentUI
 
 TextField{
+    signal commit
     property bool disabled: false
     property int iconSource: 0
     property color normalColor: FluTheme.dark ?  Qt.rgba(255/255,255/255,255/255,1) : Qt.rgba(27/255,27/255,27/255,1)
@@ -11,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: padding+2
     enabled: !disabled
     color: {
         if(!enabled){
@@ -22,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
@@ -49,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/FluTextBoxBackground.qml

@@ -49,8 +49,7 @@ Rectangle{
         Behavior on height{
             NumberAnimation{
                 duration: 83
-                easing.type: Easing.BezierSpline
-                easing.bezierCurve: [ 1, 0, 0, 0 ]
+                easing.type: Easing.OutCubic
             }
         }
     }

src/imports/FluentUI/Controls/FluTextBoxMenu.qml

@@ -12,9 +12,7 @@ FluMenu{
     animEnabled: false
     width: 120
     onVisibleChanged: {
-        if(visible){
-            inputItem.forceActiveFocus()
-        }
+        inputItem.forceActiveFocus()
     }
     Connections{
         target: inputItem

src/imports/FluentUI/Controls/FluToggleSwitch.qml

@@ -92,25 +92,25 @@ Button {
                 Behavior on anchors.leftMargin  {
                     NumberAnimation {
                         duration: 167
-                        easing.type: Easing.BezierSpline
-                        easing.bezierCurve: [ 1, 0, 0, 0 ]
+                        easing.type: Easing.OutCubic
                     }
                 }
                 Behavior on anchors.rightMargin  {
                     NumberAnimation {
                         duration: 167
-                        easing.type: Easing.BezierSpline
-                        easing.bezierCurve: [ 0, 0, 0, 1 ]
+                        easing.type: Easing.OutCubic
                     }
                 }
                 Behavior on width {
                     NumberAnimation {
                         duration: 167
+                        easing.type: Easing.OutCubic
                     }
                 }
                 Behavior on scale {
                     NumberAnimation {
                         duration: 167
+                        easing.type: Easing.OutCubic
                     }
                 }
             }

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){