update

example/qml/page/T_Progress.qml

@@ -35,8 +35,9 @@ FluScrollablePage{
             FluSlider{
                 value:50
                 onValueChanged:{
-                    progress_bar.progress = value/100
-                    progress_ring.progress = value/100
+                    var progress = value/100
+                    progress_bar.progress = progress
+                    progress_ring.progress = progress
                 }
             }
         }

example/qml/page/T_Slider.qml

@@ -15,7 +15,6 @@ FluScrollablePage{
         paddings: 10
         Layout.topMargin: 20
         FluSlider{
-            value: 50
             anchors.verticalCenter: parent.verticalCenter
         }
     }
@@ -34,10 +33,8 @@ FluScrollablePage{
         paddings: 10
         Layout.topMargin: 20
         FluSlider{
-            value: 50
-            vertical:true
+            orientation: Qt.Vertical
             anchors.left: parent.left
-            anchors.leftMargin: 20
             anchors.verticalCenter: parent.verticalCenter
         }
     }
@@ -45,7 +42,7 @@ FluScrollablePage{
         Layout.fillWidth: true
         Layout.topMargin: -1
         code:'FluSlider{
-    vertical:true
+    orientation: Qt.Vertical
     value:50
 }'
     }

example/qml/page/T_Typography.qml

@@ -10,10 +10,6 @@ FluContentPage {
     title: "Typography"
     rightPadding: 10
 
-    Component.onCompleted: {
-        slider.seek(0)
-    }
-
     FluArea{
         anchors{
             top:parent.top
@@ -73,7 +69,7 @@ FluContentPage {
 
         FluSlider{
             id:slider
-            vertical:true
+            orientation: Qt.Vertical
             anchors{
                 right: parent.right
                 rightMargin: 45

src/CMakeLists.txt

@@ -33,7 +33,7 @@ foreach(filepath ${QML_PATHS})
 endforeach(filepath)
 
 #遍历所有资源文件
-file(GLOB_RECURSE RES_PATHS *.png *.jpg *.svg *.ico *.ttf *.webp *.qsb *.metainfo)
+file(GLOB_RECURSE RES_PATHS *.png *.jpg *.svg *.ico *.ttf *.webp)
 foreach(filepath ${RES_PATHS})
     string(REPLACE "${CMAKE_CURRENT_SOURCE_DIR}/" "" filename ${filepath})
     list(APPEND resource_files ${filename})
@@ -58,8 +58,6 @@ qt_add_qml_module(fluentuiplugin
     SOURCES ${sources_files} fluentui.rc
     QML_FILES ${qml_files}
     RESOURCES ${resource_files}
-    #支持designer
-    DESIGNER_SUPPORTED
 )
 
 #链接库
@@ -68,3 +66,6 @@ target_link_libraries(fluentuiplugin PUBLIC
     Qt::Quick
     Qt::Qml
 )
+
+#安装
+install(DIRECTORY ${QML_PLUGIN_DIRECTORY} DESTINATION ${CMAKE_INSTALL_PREFIX}/imports)

src/imports/FluentUI/Controls/FluSlider.qml

@@ -1,83 +1,40 @@
 import QtQuick
-import QtQuick.Controls
-import Qt5Compat.GraphicalEffects
+import QtQuick.Controls.impl
+import QtQuick.Templates as T
 import FluentUI
 
-Item{
-    property int size: 180
-    property int dotSize: 24
-    property int value: 50
-    property int maxValue: 100
-    property bool vertical: false
-    property bool tipEnabled : true
-    property var onLineClickFunc
-    signal pressed
-    signal released
-    id:root
-    height: control.height
-    width: control.width
-    rotation: vertical ? 180 : 0
-    Component.onCompleted: {
-        seek(value)
-    }
-    MouseArea{
-        id:mouse_line
-        anchors.centerIn: control
-        width: vertical ? 10 : control.width
-        height: vertical ? control.height : 10
-        hoverEnabled: true
-        onClicked:
-            (mouse) => {
-                var val;
-                if(vertical){
-                    val = mouse.y*maxValue/control.height
-                }else{
-                    val = mouse.x*maxValue/control.width
-                }
-                if(onLineClickFunc){
-                    onLineClickFunc(val)
-                }else{
-                    seek(val)
-                }
-            }
-    }
-    Rectangle {
+T.Slider {
     id: control
-        width: vertical ? 4 :size
-        height:  vertical ? size : 4
-        radius: 2
-        anchors.verticalCenter: parent.verticalCenter
-        color:FluTheme.dark ? Qt.rgba(162/255,162/255,162/255,1) : Qt.rgba(138/255,138/255,138/255,1)
-        Rectangle{
-            id:rect
-            radius: 2.5
-            width: vertical ? 5 : control.width*(value/maxValue)
-            height: vertical ? control.height*(value/maxValue) :  5
-            color:FluTheme.dark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark
-        }
-    }
-    Rectangle{
-        id:dot
-        width: dotSize
-        height: dotSize
-        FluShadow{
-            radius: dotSize/2
-        }
-        radius: dotSize/2
-        anchors.verticalCenter: vertical ? undefined : parent.verticalCenter
-        anchors.horizontalCenter: vertical ? parent.horizontalCenter : undefined
+    to:100
+    stepSize:1
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitHandleWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitHandleHeight + topPadding + bottomPadding)
+
+    padding: 6
+
+    handle: Rectangle {
+        x: control.leftPadding + (control.horizontal ? control.visualPosition * (control.availableWidth - width) : (control.availableWidth - width) / 2)
+        y: control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : control.visualPosition * (control.availableHeight - height))
+        implicitWidth: 24
+        implicitHeight: 24
+        radius: 12
         color:FluTheme.dark ? Qt.rgba(69/255,69/255,69/255,1) :Qt.rgba(1,1,1,1)
+        FluShadow{
+            radius: 12
+        }
         Rectangle{
-            width: dotSize
-            height: dotSize
-            radius: dotSize/2
+            width: 24
+            height: 24
+            radius: 12
             color:FluTheme.dark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark
             anchors.centerIn: parent
             scale: {
-                if(control_mouse.pressed){
+                if(control.pressed){
                     return 4/10
                 }
-                return control_mouse.containsMouse || mouse_line.containsMouse  ? 6/10 : 5/10
+                return control.hovered ? 6/10 : 5/10
             }
             Behavior on scale {
                 NumberAnimation{
@@ -85,47 +42,24 @@ Item{
                 }
             }
         }
-        MouseArea{
-            id:control_mouse
-            anchors.fill: parent
-            hoverEnabled: true
-            drag {
-                target: dot
-                axis: vertical ? Drag.YAxis : Drag.XAxis
-                minimumX: vertical ? 0 : -dotSize/2
-                maximumX: vertical ? 0 : (control.width - dotSize/2)
-                minimumY: vertical ? -dotSize/2 : 0
-                maximumY: vertical ? (control.height - dotSize/2) : 0
     }
-            onPressed: {
-                if(tipEnabled){
-                    tool_tip.visible  =  true
-                }
-                root.pressed()
-            }
-            onReleased: {
-                tool_tip.visible  =  false
-                root.released()
-            }
-        }
-        FluTooltip{
-            id:tool_tip
-            text:String(root.value)
-            y: vertical ? 32 : -40
-        }
-    }
-    function seek(val){
-        if(vertical){
-            dot.y =val/maxValue*control.height - dotSize/2
-            root.value = Qt.binding(function(){
-                return (dot.y+dotSize/2)/control.height*maxValue
-            })
-        }else{
-            dot.x =val/maxValue*control.width - dotSize/2
-            root.value = Qt.binding(function(){
-                return (dot.x+dotSize/2)/control.width*maxValue
-            })
+
+    background: Rectangle {
+        x: control.leftPadding + (control.horizontal ? 0 : (control.availableWidth - width) / 2)
+        y: control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : 0)
+        implicitWidth: control.horizontal ? 180 : 4
+        implicitHeight: control.horizontal ? 4 : 180
+        width: control.horizontal ? control.availableWidth : implicitWidth
+        height: control.horizontal ? implicitHeight : control.availableHeight
+        radius: 3
+        color:FluTheme.dark ? Qt.rgba(162/255,162/255,162/255,1) : Qt.rgba(138/255,138/255,138/255,1)
+        scale: control.horizontal && control.mirrored ? -1 : 1
+        Rectangle {
+            y: control.horizontal ? 0 : control.visualPosition * parent.height
+            width: control.horizontal ? control.position * parent.width : 4
+            height: control.horizontal ? 4 : control.position * parent.height
+            radius: 2
+            color:FluTheme.dark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark
         }
     }
 }
-

src/imports/FluentUI/designer/fluentui.metainfo

@@ -1,144 +0,0 @@
-MetaInfo {
-
-	Type {
-        name: "FluentUI.Controls.FluTextButton"
-        icon: "images/button-icon16.png"
-
-        ItemLibraryEntry {
-            name: "FluTextButton"
-            category: "FluentUI - Controls"
-            libraryIcon: "images/button-icon.png"
-            version: "1.0"
-            requiredImport: "FluentUI"
-            toolTip: qsTr("A button with text.")
-
-            Property { name: "text"; type: "binding"; value: "qsTr(\"Text Button\")" }
-        }
-    }
-
-    Type {
-        name: "FluentUI.Controls.FluButton"
-        icon: "images/button-icon16.png"
-
-        ItemLibraryEntry {
-            name: "FluButton"
-            category: "FluentUI - Controls"
-            libraryIcon: "images/button-icon.png"
-            version: "1.0"
-            requiredImport: "FluentUI"
-            toolTip: qsTr("A button with text.")
-
-            Property { name: "text"; type: "binding"; value: "qsTr(\"Standard Button\")" }
-        }
-    }
-	
-	Type {
-        name: "FluentUI.Controls.FluFilledButton"
-        icon: "images/button-icon16.png"
-
-        ItemLibraryEntry {
-            name: "FluFilledButton"
-            category: "FluentUI - Controls"
-            libraryIcon: "images/button-icon.png"
-            version: "1.0"
-            requiredImport: "FluentUI"
-            toolTip: qsTr("A button with text.")
-
-            Property { name: "text"; type: "binding"; value: "qsTr(\"Filled Button\")" }
-        }
-    }
-	
-	Type {
-        name: "FluentUI.Controls.FluToggleButton"
-        icon: "images/button-icon16.png"
-
-        ItemLibraryEntry {
-            name: "FluToggleButton"
-            category: "FluentUI - Controls"
-            libraryIcon: "images/button-icon.png"
-            version: "1.0"
-            requiredImport: "FluentUI"
-            toolTip: qsTr("A button with text.")
-
-            Property { name: "text"; type: "binding"; value: "qsTr(\"Toggle Button\")" }
-        }
-    }
-	
-	Type {
-        name: "FluentUI.Controls.FluIconButton"
-        icon: "images/button-icon16.png"
-
-        ItemLibraryEntry {
-            name: "FluIconButton"
-            category: "FluentUI - Controls"
-            libraryIcon: "images/button-icon.png"
-            version: "1.0"
-            requiredImport: "FluentUI"
-        }
-    }
-	
-	Type {
-        name: "FluentUI.Controls.FluDropDownButton"
-        icon: "images/button-icon16.png"
-
-        ItemLibraryEntry {
-            name: "FluDropDownButton"
-            category: "FluentUI - Controls"
-            libraryIcon: "images/button-icon.png"
-            version: "1.0"
-            requiredImport: "FluentUI"
-            toolTip: qsTr("A button with text.")
-
-            Property { name: "text"; type: "binding"; value: "qsTr(\"DropDownButton\")" }
-        }
-    }
-	
-	Type {
-        name: "FluentUI.Controls.FluRadioButton"
-        icon: "images/button-icon16.png"
-
-        ItemLibraryEntry {
-            name: "FluRadioButton"
-            category: "FluentUI - Controls"
-            libraryIcon: "images/button-icon.png"
-            version: "1.0"
-            requiredImport: "FluentUI"
-            toolTip: qsTr("A button with text.")
-
-            Property { name: "text"; type: "binding"; value: "qsTr(\"Radio Button\")" }
-        }
-    }
-	
-	Type {
-        name: "FluentUI.Controls.FluCheckBox"
-        icon: "images/button-icon16.png"
-
-        ItemLibraryEntry {
-            name: "FluCheckBox"
-            category: "FluentUI - Controls"
-            libraryIcon: "images/button-icon.png"
-            version: "1.0"
-            requiredImport: "FluentUI"
-            toolTip: qsTr("A button with text.")
-
-            Property { name: "text"; type: "binding"; value: "qsTr(\"CheckBox\")" }
-        }
-    }
-
-    Type {
-        name: "FluentUI.Controls.FluText"
-        icon: "images/label-icon16.png"
-
-        ItemLibraryEntry {
-            name: "FluText"
-            category: "FluentUI - Controls"
-            libraryIcon: "images/label-icon.png"
-            version: "1.0"
-            requiredImport: "FluentUI"
-            toolTip: qsTr("A text.")
-
-            Property { name: "text"; type: "binding"; value: "qsTr(\"Text\")" }
-        }
-    }
-	
-}