update

example/qml/component/CodeExpander.qml

@@ -134,13 +134,11 @@ FluExpander{
                     "FluMenuBar",
                     "FluPagination",
                     "FluRadioButtons",
-                    "FluImage"
+                    "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/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';

src/imports/FluentUI/Controls/FluSpinBox.qml

@@ -0,0 +1,42 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+import FluentUI
+
+FluTextBox {
+    id:control
+    width: 200
+    closeRightMargin:55
+    rightPadding: 80
+    text:"0"
+    validator: IntValidator {}
+    inputMethodHints: Qt.ImhDigitsOnly
+    FluIconButton{
+        width: 20
+        height: 20
+        iconSize: 16
+        iconSource: FluentIcons.ChevronUp
+        anchors{
+            verticalCenter: parent.verticalCenter
+            right: parent.right
+            rightMargin: 30
+        }
+        onClicked: {
+            control.text = Number(control.text) + 1
+        }
+    }
+    FluIconButton{
+        iconSource: FluentIcons.ChevronDown
+        width: 20
+        height: 20
+        iconSize: 16
+        anchors{
+            verticalCenter: parent.verticalCenter
+            right: parent.right
+            rightMargin: 5
+        }
+        onClicked: {
+            control.text = Number(control.text) - 1
+        }
+    }
+}

src/imports/FluentUI/Controls/FluTableView.qml

@@ -11,7 +11,6 @@ Rectangle {
     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: {
@@ -190,9 +189,6 @@ Rectangle {
                 id:item_table
                 property var position: Qt.point(column,row)
                 required property bool selected
-                //                onSelectedChanged: {
-                //                    d.selectionFlag = !d.selectionFlag
-                //                }
                 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

src/imports/FluentUI/Controls/FluTextBox.qml

@@ -12,6 +12,7 @@ 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
     enabled: !disabled
@@ -78,7 +79,7 @@ TextField{
         anchors{
             verticalCenter: parent.verticalCenter
             right: parent.right
-            rightMargin: icon_end.visible ? 25 : 5
+            rightMargin: closeRightMargin
         }
         onClicked:{
             control.text = ""