feat: number input basics

Author: FlyAndNotDown

Editor/Qml/ENumberInput.qml

@@ -0,0 +1,64 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Controls.Basic
+
+Item {
+    property int value: spinBox.value
+    property int from: spinBox.from
+    property int to: spinBox.to
+    property bool editable: spinBox.editable
+
+    id: root
+    implicitWidth: spinBox.implicitWidth
+    implicitHeight: spinBox.implicitHeight
+
+    SpinBox {
+        id: spinBox
+        implicitHeight: textField.implicitHeight
+        value: root.value
+        editable: root.editable
+        from: root.from
+        to: root.to
+
+        contentItem: ETextField {
+            id: textField
+            implicitWidth: 40
+            text: spinBox.textFromValue(spinBox.value)
+            validator: spinBox.validator
+        }
+
+        down.indicator: Rectangle {
+            id: downIndicator
+            x: 0
+            implicitWidth: 25
+            implicitHeight: textField.implicitHeight
+            radius: 5
+            color: spinBox.down.hovered ? ETheme.secondaryBgColor : ETheme.primaryBgColor
+
+            EIcon {
+                name: 'minus'
+                anchors.centerIn: downIndicator
+            }
+        }
+
+        up.indicator: Rectangle {
+            id: upIndicator
+            x: spinBox.width - width
+            implicitWidth: 25
+            implicitHeight: textField.implicitHeight
+            radius: 5
+            color: spinBox.up.hovered ? ETheme.secondaryBgColor : ETheme.primaryBgColor
+
+            EIcon {
+                name: 'add'
+                anchors.centerIn: upIndicator
+            }
+        }
+
+        background: Rectangle {
+            implicitWidth: 100
+            radius: 5
+            color: ETheme.primaryBgColor
+        }
+    }
+}

Editor/Qml/ETextField.qml

@@ -5,7 +5,10 @@ import QtQuick.Controls.Basic
 Item {
     property string placeHolderText: ''
     property int wrapMode: TextInput.NoWrap
-    property string text: ''
+    property string text: textField.text
+    property var validator: null
+
+    signal accepted()
 
     id: root
     implicitWidth: textField.implicitWidth
@@ -24,6 +27,8 @@ Item {
         font.pixelSize: ETheme.contentFontSize
         font.family: ETheme.fontFamily
         wrapMode: root.wrapMode
+        validator: root.validator
+        onAccepted: root.accepted()
 
         background: Rectangle {
             radius: 5

Editor/Qml/EWidgetSamples.qml

@@ -350,6 +350,26 @@ Rectangle {
                     }
                 }
 
+                RowLayout {
+                    ETextField {
+                        id: textFieldWithValidator
+                        Layout.preferredWidth: 300
+                        placeHolderText: 'Hello World'
+                        validator: IntValidator {
+                            bottom: 1
+                            top: 10
+                        }
+                        onAccepted: {
+                            console.log('value accepted, value=' + text)
+                        }
+                    }
+
+                    EText {
+                        Layout.leftMargin: 5
+                        text: 'With Validator'
+                    }
+                }
+
                 RowLayout {
                     ETextField {
                         Layout.preferredWidth: 300
@@ -370,6 +390,40 @@ Rectangle {
                     }
                 }
             }
+
+            RowLayout {
+                Layout.leftMargin: 5
+                Layout.topMargin: 35
+                EText {
+                    text: 'NumberInput'
+                    style: EText.Style.Title1
+                }
+            }
+
+            ColumnLayout {
+                Layout.margins: 5
+
+                RowLayout {
+                    ENumberInput {}
+
+                    EText {
+                        Layout.leftMargin: 5
+                        text: 'Default'
+                    }
+                }
+
+                RowLayout {
+                    ENumberInput {
+                        from: 0
+                        to: 10
+                    }
+
+                    EText {
+                        Layout.leftMargin: 5
+                        text: 'Limit 0-10'
+                    }
+                }
+            }
         }
     }
 }