update

example/CMakeLists.txt

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

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("复制成功")

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

@@ -11,7 +11,7 @@ FluScrollablePage{
 
     FluArea{
         Layout.fillWidth: true
-        height: 300
+        height: 260
         paddings: 10
         Layout.topMargin: 20
         Column{

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_TableView.qml

@@ -64,8 +64,8 @@ FluContentPage{
                                 address: getRandomAddresses(),
                                 nickname: getRandomNickname(),
                                 longstring:"你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好",
-                                height:44,
-                                minimumHeight:44,
+                                height:42,
+                                minimumHeight:42,
                                 maximumHeight:300,
                                 action:com_action
                             })

example/qml/page/T_TextBox.qml

@@ -174,7 +174,7 @@ FluScrollablePage{
 
         FluSpinBox{
             Layout.topMargin: 20
-//            disabled: spin_box_switch.checked
+            disabled: spin_box_switch.checked
             anchors{
                 verticalCenter: parent.verticalCenter
                 left: parent.left

example/qml/window/MainWindow.qml

@@ -16,7 +16,7 @@ CustomWindow {
     height: 640
     closeDestory:false
     minimumWidth: 520
-    minimumHeight: 460
+    minimumHeight: 200
     appBarVisible: false
     launchMode: FluWindow.SingleTask
 
@@ -95,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
@@ -180,7 +180,7 @@ CustomWindow {
                     }
                 }
                 transformOrigin: Item.Center
-                onLoginClicked:{
+                onLogoClicked:{
                     clickCount += 1
                     if(clickCount === 1){
                         loader.reload()

src/CMakeLists.txt

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

src/imports/FluentUI/Controls/FluComboBox.qml

@@ -39,8 +39,8 @@ 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

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/FluMultilineTextBox.qml

@@ -23,7 +23,7 @@ TextArea{
     font:FluTextStyle.Body
     wrapMode: Text.WrapAnywhere
     padding: 8
-    leftPadding: 8
+    leftPadding: padding+2
     renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering
     selectedTextColor: color
     selectionColor: Qt.alpha(FluTheme.primaryColor.lightest,0.6)

src/imports/FluentUI/Controls/FluNavigationView.qml

@@ -27,7 +27,7 @@ Item {
     property Component autoSuggestBox
     property Component actionItem
     property int topPadding: 0
-    signal loginClicked
+    signal logoClicked
     id:control
     QtObject{
         id:d
@@ -118,11 +118,6 @@ Item {
                 }
                 return 1
             }
-            Behavior on height {
-                NumberAnimation{
-                    duration: 83
-                }
-            }
         }
     }
     Component{
@@ -242,7 +237,8 @@ Item {
                         }
                         Behavior on rotation {
                             NumberAnimation{
-                                duration: 83
+                                duration: 167
+                                easing.type: Easing.OutCubic
                             }
                         }
                     }
@@ -564,7 +560,7 @@ Item {
                 Behavior on Layout.preferredWidth {
                     NumberAnimation{
                         duration: 167
-                        easing.type: Easing.InCubic
+                        easing.type: Easing.OutCubic
                     }
                 }
             }
@@ -584,7 +580,7 @@ Item {
                 MouseArea{
                     anchors.fill: parent
                     onClicked: {
-                        loginClicked()
+                        logoClicked()
                     }
                 }
             }
@@ -630,7 +626,7 @@ Item {
         Behavior on anchors.leftMargin {
             NumberAnimation{
                 duration: 167
-                easing.type: Easing.InCubic
+                easing.type: Easing.OutCubic
             }
         }
         StackView{
@@ -685,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: {
@@ -751,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
@@ -779,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
@@ -809,6 +815,7 @@ Item {
             height: childrenRect.height
             anchors.bottom: parent.bottom
             interactive: false
+            boundsBehavior: ListView.StopAtBounds
             currentIndex: -1
             model: {
                 if(footerItems){

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

@@ -23,7 +23,7 @@ TextField{
     }
     font:FluTextStyle.Body
     padding: 8
-    leftPadding: 8
+    leftPadding: padding+2
     echoMode:btn_reveal.pressed ? TextField.Normal : TextField.Password
     renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering
     selectionColor: Qt.alpha(FluTheme.primaryColor.lightest,0.6)

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/FluScrollBar.qml

@@ -41,7 +41,7 @@ T.ScrollBar {
         }
         states: [
             State{
-                name:"hide"
+                name:"show"
                 when: contentItem.collapsed
                 PropertyChanges {
                     target: rect_bar
@@ -50,8 +50,8 @@ T.ScrollBar {
                 }
             }
             ,State{
-                name:"show"
-                when: !contentItem.expand
+                name:"hide"
+                when: !contentItem.collapsed
                 PropertyChanges {
                     target: rect_bar
                     width:  vertical ? 2 : parent.width
@@ -61,26 +61,27 @@ T.ScrollBar {
         ]
         transitions:[
             Transition {
-                from: "hide"
+                to: "hide"
                 SequentialAnimation {
                     PauseAnimation { duration: 450 }
                     NumberAnimation {
                         target: rect_bar
                         properties: vertical ? "width"  : "height"
                         duration: 167
-                        easing.type: Easing.InCubic
-                        to:2
+                        easing.type: Easing.OutCubic
                     }
                 }
             }
             ,Transition {
-                from: "show"
-                NumberAnimation {
-                    target: rect_bar
-                    properties: vertical ? "width"  : "height"
-                    duration: 167
-                    easing.type: Easing.InCubic
-                    to:6
+                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

@@ -44,6 +44,7 @@ FluPage {
             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

@@ -5,6 +5,7 @@ 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 {
@@ -27,6 +28,7 @@ Rectangle{
         FluTextBox{
             rightPadding: 80
             closeRightMargin: 55
+            disabled: control.disabled
             validator: control.validator
             text: d._displayText
             Component.onCompleted: {
@@ -51,6 +53,7 @@ Rectangle{
         anchors.fill: parent
         readOnly: true
         rightPadding: 80
+        disabled: control.disabled
         text: control.displayText
         MouseArea{
             anchors.fill: parent
@@ -68,8 +71,13 @@ Rectangle{
         width: 20
         height: 20
         iconSize: 16
+        disabled: {
+            if(control.disabled===true){
+                return true
+            }
+            return Number(control.displayText) === control.to
+        }
         iconSource: FluentIcons.ChevronUp
-        enabled: Number(control.displayText) !== control.to
         anchors{
             verticalCenter: parent.verticalCenter
             right: parent.right
@@ -102,8 +110,13 @@ Rectangle{
         iconSource: FluentIcons.ChevronDown
         width: 20
         height: 20
+        disabled: {
+            if(control.disabled === true){
+                return true
+            }
+            return Number(control.displayText) === control.from
+        }
         iconSize: 16
-        enabled: Number(control.displayText) !== control.from
         anchors{
             verticalCenter: parent.verticalCenter
             right: parent.right

src/imports/FluentUI/Controls/FluTableView.qml

@@ -49,6 +49,9 @@ Rectangle {
             if(obj){
                 return obj
             }
+            if(columnSource[column].editMultiline === true){
+                return com_edit_multiline
+            }
             return com_edit
         }
     }
@@ -63,6 +66,23 @@ Rectangle {
     }
     Component{
         id:com_edit
+        FluTextBox{
+            text: display
+            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{
@@ -175,6 +195,9 @@ Rectangle {
                 return w
             }
             rowHeightProvider: function(row) {
+                if(row>=table_model.rowCount){
+                    return 0
+                }
                 var h = table_model.getRow(row).height
                 if(row === item_loader.row){
                     item_loader.height = h
@@ -199,7 +222,7 @@ Rectangle {
                 implicitWidth: columnSource[column].width
                 Rectangle{
                     anchors.fill: parent
-                    visible: item_loader.sourceComponent === null
+                    visible: !item_loader.sourceComponent
                     color: selected ? control.selectionColor : "#00000000"
                 }
                 MouseArea{
@@ -209,6 +232,9 @@ Rectangle {
                         closeEditor()
                         table_view.interactive = false
                     }
+                    onCanceled: {
+                        table_view.interactive = true
+                    }
                     onReleased: {
                         table_view.interactive = true
                     }
@@ -267,12 +293,7 @@ Rectangle {
     }
     SelectionRectangle {
         id:selection_rect
-        target: {
-            if(item_loader.sourceComponent){
-                return null
-            }
-            return table_view
-        }
+        target: table_view
         bottomRightHandle:com_handle
         topLeftHandle: com_handle
         onDraggingChanged: {
@@ -295,26 +316,24 @@ Rectangle {
         syncView: table_view
         boundsBehavior: Flickable.StopAtBounds
         clip: true
-        delegate: FluControl {
+        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))
-            Rectangle{
-                anchors.fill: parent
-                color:{
-                    d.selectionFlag
-                    if(column_item_control.pressed){
-                        return control.pressedButtonColor
-                    }
-                    if(selection_model.isColumnSelected(column)){
-                        return control.hoverButtonColor
-                    }
-                    return column_item_control.hovered ? control.hoverButtonColor :  FluTheme.dark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(247/255,247/255,247/255,1)
+            color:{
+                d.selectionFlag
+                if(column_item_control_mouse.pressed){
+                    return control.pressedButtonColor
                 }
-                border.color: FluTheme.dark ? "#252525" : "#e4e4e4"
+                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
@@ -327,13 +346,30 @@ Rectangle {
                 horizontalAlignment: Text.AlignHCenter
                 verticalAlignment: Text.AlignVCenter
             }
-            onClicked: {
-                closeEditor()
-                selection_model.clear()
-                for(var i=0;i<=table_view.rows;i++){
-                    selection_model.select(table_model.index(i,column),ItemSelectionModel.Select)
+            MouseArea{
+                id:column_item_control_mouse
+                anchors.fill: parent
+                anchors.rightMargin: 6
+                hoverEnabled: true
+                onCanceled: {
+                    column_item_control.canceled = true
                 }
-                d.selectionFlag = !d.selectionFlag
+                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"
@@ -341,20 +377,28 @@ Rectangle {
                 width: 6
                 anchors.right: parent.right
                 acceptedButtons: Qt.LeftButton
+                hoverEnabled: true
                 visible: !(obj.width === obj.minimumWidth && obj.width === obj.maximumWidth)
                 cursorShape: Qt.SplitHCursor
-                preventStealing: true
-                propagateComposedEvents: true
                 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
@@ -388,25 +432,23 @@ Rectangle {
                 return []
             }
         }
-        delegate: FluControl{
+        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)
-            Rectangle{
-                anchors.fill: parent
-                color: {
-                    d.selectionFlag
-                    if(item_control.pressed){
-                        return control.pressedButtonColor
-                    }
-                    if(selection_model.isRowSelected(row)){
-                        return control.hoverButtonColor
-                    }
-                    return item_control.hovered ? control.hoverButtonColor :  FluTheme.dark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(247/255,247/255,247/255,1)
+            color: {
+                d.selectionFlag
+                if(item_control_mouse.pressed){
+                    return control.pressedButtonColor
                 }
-                border.color: FluTheme.dark ? "#252525" : "#e4e4e4"
+                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
@@ -416,13 +458,30 @@ Rectangle {
                     return selection_model.rowIntersectsSelection(row)
                 }
             }
-            onClicked: {
-                closeEditor()
-                selection_model.clear()
-                for(var i=0;i<=columnSource.length;i++){
-                    selection_model.select(table_model.index(row,i),ItemSelectionModel.Select)
+            MouseArea{
+                id:item_control_mouse
+                anchors.fill: parent
+                anchors.bottomMargin: 6
+                hoverEnabled: true
+                onCanceled: {
+                    item_control.canceled = true
                 }
-                d.selectionFlag = !d.selectionFlag
+                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"
@@ -431,28 +490,35 @@ Rectangle {
                 anchors.bottom: parent.bottom
                 acceptedButtons: Qt.LeftButton
                 cursorShape: Qt.SplitVCursor
-                preventStealing: true
                 visible: {
                     var obj = table_model.getRow(row)
                     return !(obj.height === obj.minimumHeight && obj.width === obj.maximumHeight)
                 }
-                propagateComposedEvents: true
                 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 = 44
+                            minimumHeight = 42
                         }
                         if(!maximumHeight){
                             maximumHeight = 65535

src/imports/FluentUI/Controls/FluTextBox.qml

@@ -16,7 +16,7 @@ TextField{
     id:control
     width: 300
     padding: 8
-    leftPadding: 8
+    leftPadding: padding+2
     enabled: !disabled
     color: {
         if(!enabled){

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/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
                     }
                 }
             }