update

example/T_Slider.qml

@@ -17,7 +17,7 @@ FluScrollablePage{
         Layout.leftMargin: 10
     }
     FluSlider{
-        orientation:FluSlider.Vertical
+        vertical:true
         Layout.topMargin: 20
         Layout.leftMargin: 10
         Layout.bottomMargin: 20

example/T_TabView.qml

@@ -11,6 +11,8 @@ FluScrollablePage{
     rightPadding:10
     bottomPadding:20
 
+    property var colors : [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green]
+
     Component{
         id:com_page
         Rectangle{
@@ -19,26 +21,93 @@ FluScrollablePage{
         }
     }
 
+    function newTab(){
+        tab_view.appendTab("qrc:/res/image/favicon.ico","Document "+tab_view.count(),com_page,colors[Math.floor(Math.random() * 8)].dark)
+    }
+
     Component.onCompleted: {
-        var colors = [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green]
+        newTab()
-        for(var i =0;i<colors.length;i++){
+        newTab()
-            tab_view.appendTab("","Document "+i,com_page,colors[i].dark)
+        newTab()
-        }
     }
 
     FluArea{
         width: parent.width
         Layout.topMargin: 20
-        height: 400
+        height: 50
         paddings: 10
-
+        RowLayout{
-
+            spacing: 14
-        FluTabView{
+            FluDropDownButton{
-            id:tab_view
+                id:btn_tab_width_behavior
+                Layout.preferredWidth: 140
+                text:"Equal"
+                items:[
+                    FluMenuItem{
+                        text:"Equal"
+                        onClicked: {
+                            btn_tab_width_behavior.text = text
+                            tab_view.tabWidthBehavior = FluTabView.Equal
+                        }
+                    },
+                    FluMenuItem{
+                        text:"SizeToContent"
+                        onClicked: {
+                            btn_tab_width_behavior.text = text
+                            tab_view.tabWidthBehavior = FluTabView.SizeToContent
+                        }
+                    },
+                    FluMenuItem{
+                        text:"Compact"
+                        onClicked: {
+                            btn_tab_width_behavior.text = text
+                            tab_view.tabWidthBehavior = FluTabView.Compact
+                        }
+                    }
+                ]
+            }
+            FluDropDownButton{
+                id:btn_close_button_visibility
+                text:"Always"
+                 Layout.preferredWidth: 120
+                items:[
+                    FluMenuItem{
+                        text:"Nerver"
+                        onClicked: {
+                            btn_close_button_visibility.text = text
+                            tab_view.closeButtonVisibility = FluTabView.Nerver
+                        }
+                    },
+                    FluMenuItem{
+                        text:"Always"
+                        onClicked: {
+                            btn_close_button_visibility.text = text
+                            tab_view.closeButtonVisibility = FluTabView.Always
+                        }
+                    },
+                    FluMenuItem{
+                        text:"OnHover"
+                        onClicked: {
+                            btn_close_button_visibility.text = text
+                            tab_view.closeButtonVisibility = FluTabView.OnHover
+                        }
+                    }
+                ]
+            }
         }
-
-
     }
 
+    FluArea{
+        width: parent.width
+        Layout.topMargin: 5
+        height: 400
+        paddings: 10
+        FluTabView{
+            id:tab_view
+            onNewPressed:{
+                newTab()
+            }
+        }
+    }
 
 }

src/controls/FluCalendarPicker.qml

@@ -50,7 +50,7 @@ Rectangle {
     FluIcon{
         iconSource: FluentIcons.Calendar
         iconSize: 14
-        color: text_date.color
+        iconColor: text_date.color
         anchors{
             verticalCenter: parent.verticalCenter
             right: parent.right

src/controls/FluCheckBox.qml

@@ -83,7 +83,7 @@ Button {
                 iconSource: FluentIcons.AcceptMedium
                 iconSize: 15
                 visible: selected
-                color: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
+                iconColor: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
                 Behavior on visible {
                     NumberAnimation{
                         duration: 150

src/controls/FluDropDownButton.qml

@@ -44,7 +44,7 @@ Button {
                 rightMargin: 10
                 verticalCenter: parent.verticalCenter
             }
-            color:title.color
+            iconColor:title.color
         }
 
     }

src/controls/FluInfoBar.qml

@@ -178,7 +178,7 @@ FluObject {
                         return FluentIcons.FA_info_circle
                     }
                     iconSize:20
-                    color: {
+                    iconColor: {
                         if(FluTheme.dark){
                             switch(_super.type){
                             case mcontrol.const_success: return Qt.rgba(108/255,203/255,95/255,1);

src/controls/FluItem.qml

@@ -14,6 +14,18 @@ Item{
         opacity: 0
     }
 
+    onWidthChanged: {
+        canvas.requestPaint()
+    }
+
+    onHeightChanged: {
+        canvas.requestPaint()
+    }
+
+    onRadiusChanged: {
+        canvas.requestPaint()
+    }
+
     Canvas {
         id: canvas
         anchors.fill: parent

src/controls/FluMediaPlayer.qml

@@ -83,7 +83,7 @@ Rectangle {
             size:parent.width-20
             y:20
             anchors.horizontalCenter: parent.horizontalCenter
-            enableTip:false
+            tipEnabled:false
             onPressed: {
                 mediaplayer.autoSeek = false
                 mediaplayer.pause()

src/controls/FluSlider.qml

@@ -4,17 +4,12 @@ import QtGraphicalEffects 1.15
 
 Item{
 
-    enum Orientation  {
-        Horizontal,
-        Vertical
-    }
     property int size: 180
     property int dotSize: 24
     property int value: 50
     property int maxValue: 100
-    property int orientation: FluSlider.Horizontal
+    property bool vertical: false
-    property bool isHorizontal: orientation === FluSlider.Horizontal
+    property bool tipEnabled : true
-    property bool enableTip : true
     property var onLineClickFunc
     signal pressed
     signal released
@@ -22,7 +17,7 @@ Item{
     id:root
     height: control.height
     width: control.width
-    rotation: isHorizontal ? 0 : 180
+    rotation: vertical ? 180 : 0
 
     Component.onCompleted: {
         seek(value)
@@ -31,16 +26,16 @@ Item{
     MouseArea{
         id:mouse_line
         anchors.centerIn: control
-        width: isHorizontal ? control.width : 10
+        width: vertical ? 10 : control.width
-        height: isHorizontal ? 10 : control.height
+        height: vertical ? control.height : 10
         hoverEnabled: true
         onClicked:
             (mouse) => {
                 var val;
-                if(isHorizontal){
+                if(vertical){
-                    val = mouse.x*maxValue/control.width
-                }else{
                     val = mouse.y*maxValue/control.height
+                }else{
+                    val = mouse.x*maxValue/control.width
                 }
                 if(onLineClickFunc){
                     onLineClickFunc(val)
@@ -52,20 +47,18 @@ Item{
 
     Rectangle {
         id: control
-        width: isHorizontal ? size : 4
+        width: vertical ? 4 :size
-        height:  isHorizontal ? 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: isHorizontal ? control.width*(value/maxValue) : 5
+            width: vertical ? 5 : control.width*(value/maxValue)
-            height: isHorizontal ?  5  : control.height*(value/maxValue)
+            height: vertical ? control.height*(value/maxValue) :  5
             color:FluTheme.dark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark
         }
-
-
     }
 
     Rectangle{
@@ -76,8 +69,8 @@ Item{
             radius: dotSize/2
         }
         radius: dotSize/2
-        anchors.verticalCenter: isHorizontal ?  parent.verticalCenter : undefined
+        anchors.verticalCenter: vertical ? undefined : parent.verticalCenter
-        anchors.horizontalCenter: isHorizontal ? undefined :parent.horizontalCenter
+        anchors.horizontalCenter: vertical ? parent.horizontalCenter : undefined
         color:FluTheme.dark ? Qt.rgba(69/255,69/255,69/255,1) :Qt.rgba(1,1,1,1)
         Rectangle{
             width: dotSize/2
@@ -85,7 +78,12 @@ Item{
             radius: dotSize/4
             color:FluTheme.dark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark
             anchors.centerIn: parent
-            scale: control_mouse.containsMouse || mouse_line.containsMouse  ? 1.3 : 1
+            scale: {
+                if(control_mouse.pressed){
+                    return 0.9
+                }
+                return control_mouse.containsMouse || mouse_line.containsMouse  ? 1.3 : 1
+            }
             Behavior on scale {
                 NumberAnimation{
                     duration: 150
@@ -98,14 +96,14 @@ Item{
             hoverEnabled: true
             drag {
                 target: dot
-                axis: isHorizontal ? Drag.XAxis : Drag.YAxis
+                axis: vertical ? Drag.YAxis : Drag.XAxis
-                minimumX: isHorizontal ? -dotSize/2 : 0
+                minimumX: vertical ? 0 : -dotSize/2
-                maximumX: isHorizontal ?  (control.width - dotSize/2) : 0
+                maximumX: vertical ? 0 : (control.width - dotSize/2)
-                minimumY: isHorizontal ? 0 : -dotSize/2
+                minimumY: vertical ? -dotSize/2 : 0
-                maximumY: isHorizontal ? 0 : (control.height - dotSize/2)
+                maximumY: vertical ? (control.height - dotSize/2) : 0
             }
             onPressed: {
-                if(enableTip){
+                if(tipEnabled){
                     tool_tip.visible  =  true
                 }
                 root.pressed()
@@ -120,23 +118,22 @@ Item{
         FluTooltip{
             id:tool_tip
             text:String(root.value)
-            y: isHorizontal ? -40 : 32
+            y: vertical ? 32 : -40
         }
     }
 
     function seek(val){
-        if(isHorizontal){
+        if(vertical){
-            dot.x =val/maxValue*control.width - dotSize/2
-            root.value = Qt.binding(function(){
-                return (dot.x+dotSize/2)/control.width*maxValue
-            })
-        }else{
             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
+            })
         }
     }
-
 }
 

src/controls/FluTabView.qml

@@ -1,5 +1,6 @@
 import QtQuick 2.15
 import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
 import FluentUI 1.0
 
 Item {
@@ -14,6 +15,11 @@ Item {
     implicitHeight: height
     implicitWidth: width
 
+    MouseArea{
+        anchors.fill: parent
+        preventStealing: true
+    }
+
     enum TabWidthBehavior {
         Equal,
         SizeToContent,
@@ -29,23 +35,42 @@ Item {
     property int tabWidthBehavior : FluTabView.Equal
     property int closeButtonVisibility : FluTabView.Always
     property int itemWidth: 146
+    signal newPressed
 
     QtObject {
         id: d
         property int dragIndex: -1
         property bool dragBehavior: false
         property bool itemPress: false
+        property int maxEqualWidth: 240
     }
 
     ListModel{
         id:tab_model
     }
 
+    FluIconButton{
+        id:btn_new
+        width: 34
+        height: 34
+        x:Math.min(tab_nav.contentWidth,tab_nav.width)
+        anchors.top: parent.top
+        iconSource: FluentIcons.Add
+        onClicked: {
+            newPressed()
+        }
+    }
+
     ListView{
         id:tab_nav
         height: 34
         orientation: ListView.Horizontal
-        width: parent.width
+        anchors{
+            top: parent.top
+            left: parent.left
+            right: parent.right
+            rightMargin: 34
+        }
         interactive: false
         model: tab_model
         move: Transition {
@@ -56,20 +81,20 @@ Item {
             NumberAnimation { properties: "x"; duration: 300; easing.type: Easing.OutCubic}
             NumberAnimation { properties: "y"; duration: 100;  easing.type: Easing.OutCubic }
         }
-        clip: false
+        clip: true
         ScrollBar.horizontal: ScrollBar{
             id: scroll_nav
             policy: ScrollBar.AlwaysOff
         }
         delegate:  Item{
 
-            width: itemWidth
+            width: item_layout.width
             height: item_container.height
             z: item_mouse_drag.pressed ? 1000 : 1
 
             Item{
                 id:item_layout
-                width: itemWidth
+                width: item_container.width
                 height: item_container.height
 
                 FluItem{
@@ -78,8 +103,19 @@ Item {
                     property real timestamp: new Date().getTime()
 
                     height: tab_nav.height
-                    width: itemWidth
+                    width: {
-                    radius: [5,5,0,0]
+                        if(tabWidthBehavior === FluTabView.Equal){
+                            return Math.max(Math.min(d.maxEqualWidth,tab_nav.width/tab_nav.count),41 + item_btn_close.width)
+                        }
+                        if(tabWidthBehavior === FluTabView.SizeToContent){
+                            return itemWidth
+                        }
+                        if(tabWidthBehavior === FluTabView.Compact){
+                            return item_mouse_hove.containsMouse || item_btn_close.hovered || tab_nav.currentIndex === index  ? itemWidth : 41 + item_btn_close.width
+                        }
+                        return Math.max(Math.min(d.maxEqualWidth,tab_nav.width/tab_nav.count),41 + item_btn_close.width)
+                    }
+                    radius: [6,6,0,0]
                     Behavior on x { enabled: d.dragBehavior; NumberAnimation { duration: 200 } }
                     Behavior on y { enabled: d.dragBehavior; NumberAnimation { duration: 200 } }
 
@@ -198,19 +234,51 @@ Item {
                         }
                     }
 
-                    FluText{
+                    RowLayout{
-                        id:item_text
+                        spacing: 0
-                        anchors.centerIn: parent
+                        height: parent.height
-                        text: model.text
+                        Image{
-                        rightPadding: 24
+                            source:model.icon
+                            Layout.leftMargin: 10
+                            Layout.preferredWidth: 14
+                            Layout.preferredHeight: 14
+                            Layout.alignment: Qt.AlignVCenter
+                        }
+                        FluText{
+                            id:item_text
+                            text: model.text
+                            Layout.leftMargin: 10
+                            visible: {
+                                if(tabWidthBehavior === FluTabView.Equal){
+                                    return true
+                                }
+                                if(tabWidthBehavior === FluTabView.SizeToContent){
+                                    return true
+                                }
+                                if(tabWidthBehavior === FluTabView.Compact){
+                                    return item_mouse_hove.containsMouse || item_btn_close.hovered || tab_nav.currentIndex === index
+                                }
+                                return false
+                            }
+                            Layout.preferredWidth: visible?item_container.width - 41 - item_btn_close.width:0
+                            elide: Text.ElideRight
+                            Layout.alignment: Qt.AlignVCenter
+                        }
                     }
 
                     FluIconButton{
                         id:item_btn_close
                         iconSource: FluentIcons.ChromeClose
                         iconSize: 10
-                        width: 24
+                        width: visible ? 24 : 0
                         height: 24
+                        visible: {
+                            if(closeButtonVisibility === FluTabView.Nerver)
+                                return false
+                            if(closeButtonVisibility === FluTabView.OnHover)
+                                return item_mouse_hove.containsMouse || item_btn_close.hovered
+                            return true
+                        }
                         anchors{
                             right: parent.right
                             rightMargin: 5
@@ -220,6 +288,15 @@ Item {
                             tab_model.remove(index)
                         }
                     }
+
+                    FluDivider{
+                        width: 1
+                        height: 16
+                        anchors{
+                            verticalCenter: parent.verticalCenter
+                            right: parent.right
+                        }
+                    }
                 }
             }
         }
@@ -260,4 +337,8 @@ Item {
         tab_model.append(list)
     }
 
+    function count(){
+        return tab_nav.count
+    }
+
 }

src/controls/FluToggleSwitch.qml

@@ -31,7 +31,6 @@ Button {
             height: control.height
             radius: height / 2
             smooth: true
-            antialiasing: true
             FluFocusRectangle{
                 visible: control.visualFocus
                 radius: 20
@@ -58,8 +57,13 @@ Button {
             border.width: 1
             border.color: selected ? Qt.lighter(FluTheme.primaryColor.dark,1.2) : "#666666"
             Rectangle {
-                x:  selected ? control_backgound.width  - width - 4 : 4
+                width: pressed ?  control.height - 4 : control.height - 8
-                width: pressed ?  control.height - 6 : control.height - 8
+                anchors{
+                    left: selected ? undefined : parent.left
+                    leftMargin: selected ? control_backgound.width  - width - 4 : 4
+                    right: selected ? parent.right : undefined
+                    rightMargin: selected ? 4 : control_backgound.width  - width - 4
+                }
                 height: control.height - 8
                 radius: width / 2
                 antialiasing: true
@@ -67,7 +71,10 @@ Button {
                 smooth: true
                 anchors.verticalCenter: parent.verticalCenter
                 color: selected ? "#FFFFFF" : "#666666"
-                Behavior on x {
+                Behavior on anchors.leftMargin  {
+                    NumberAnimation { duration: 150 }
+                }
+                Behavior on anchors.rightMargin  {
                     NumberAnimation { duration: 150 }
                 }
                 Behavior on width {