Add Primary Btn

Page1.qml

@@ -0,0 +1,18 @@
+import QtQuick 2.13
+import "./SepantaUiKit/SKBtn"
+
+Item {
+    anchors.fill: parent
+    Grid {
+        spacing: 20
+        anchors.margins: 20
+        anchors.fill: parent
+        SKBtn {
+            text: "Enable"
+        }
+        SKBtn {
+            text: "Disable"
+            isEnable: false
+        }
+    }
+}

SepantaUiKit/Colors.qml

@@ -1,4 +1,6 @@
-import QtQuick 2.15
+pragma Singleton
+
+import QtQuick 2.13
 
 Item {
     //Primary
@@ -6,7 +8,6 @@ Item {
     property string primaryPressed: "#3CFCE6"
     //Secondary
     property string secondaryEnable: "#007dff"
-
     property string secondaryPressed: "#abb5be"
     //Tertiary
     property string tertiaryEnable: "#E9E8E8"

SepantaUiKit/Fonts.qml

@@ -1,40 +1,42 @@
-import QtQuick 2.15
+pragma Singleton
+
+import QtQuick 2.13
 
 Item {
     property font h1: Qt.font({
                                   "family": 'Roboto',
                                   "weight": Font.Normal,
                                   "italic": false,
-                                  "pointSize": 40
+                                  "pixelSize": 40
                               })
     property font h2: Qt.font({
                                   "family": 'Roboto',
                                   "weight": Font.Medium,
                                   "italic": false,
-                                  "pointSize": 20
+                                  "pixelSize": 20
                               })
     property font h3: Qt.font({
                                   "family": 'Roboto',
                                   "weight": Font.Bold,
                                   "italic": false,
-                                  "pointSize": 16
+                                  "pixelSize": 16
                               })
     property font h4: Qt.font({
                                   "family": 'Roboto',
                                   "weight": Font.DemiBold,
                                   "italic": false,
-                                  "pointSize": 16
+                                  "pixelSize": 16
                               })
     property font h5: Qt.font({
                                   "family": 'Roboto',
                                   "weight": Font.Normal,
                                   "italic": false,
-                                  "pointSize": 16
+                                  "pixelSize": 16
                               })
     property font h6: Qt.font({
                                   "family": 'Roboto',
                                   "weight": Font.Normal,
                                   "italic": false,
-                                  "pointSize": 12
+                                  "pixelSize": 12
                               })
 }

SepantaUiKit/SKBtn/SKBtn.qml

@@ -1,5 +1,87 @@
-import QtQuick 2.15
+import QtQuick 2.13
+import QtQml 2.13
+import "qrc:/SepantaUiKit"
 
 Item {
+    id: root
+    width: 140
+    height: 50
+    property bool isEnable: true
+    onIsEnableChanged: enableHandle()
+    function enableHandle() {
+        if (isEnable) {
+            stateOfComponent = Setting.Enable
+        } else {
+            stateOfComponent = Setting.Disabel
+        }
+    }
+
+    property var stateOfComponent: Setting.Enable
+    onStateOfComponentChanged: stateChanged()
+    property alias text: idText.text
+    Rectangle {
+        id: idBackGround
+        anchors.fill: parent
+        radius: Setting.radius
+
+        Text {
+            id: idText
+            anchors.fill: parent
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+            color: Colors.balck
+            font: Fonts.h3
+            Component.onCompleted: console.log(JSON.stringify(idText.fontInfo))
+        }
+        Behavior on color {
+            ColorAnimation {
+                duration: Setting.animationDuration
+            }
+        }
+    }
+    MouseArea {
+        anchors.fill: parent
+        hoverEnabled: true
+        onHoveredChanged: {
+            if (isEnable) {
+                if (containsMouse) {
+                    stateOfComponent = Setting.Hoverd
+                } else {
+                    stateOfComponent = Setting.Enable
+                }
+            }
+        }
+        onPressed: {
+            if (isEnable) {
+                stateOfComponent = Setting.Pressed
+            }
+        }
+        onReleased: {
+            if (isEnable) {
+                stateOfComponent = Setting.Enable
+            }
+        }
+    }
 
+    function stateChanged() {
+        switch (stateOfComponent) {
+        case Setting.Enable:
+            idBackGround.color = Colors.primaryEnable
+            break
+        case Setting.Pressed:
+            idBackGround.color = Colors.primaryPressed
+            break
+        case Setting.Hoverd:
+            idBackGround.color = Qt.lighter(Colors.primaryEnable, 1.07)
+            break
+        case Setting.Disabel:
+            idBackGround.color = Qt.darker(Colors.primaryEnable, 4)
+            break
+        }
+    }
+
+    Component.onCompleted: {
+        enableHandle()
+        stateChanged()
+    }
 }

SepantaUiKit/SKBtnIcon/SKBtnIcon.qml

@@ -1,4 +1,4 @@
-import QtQuick 2.15
+import QtQuick 2.13
 
 Item {
 

SepantaUiKit/SKCheckBox/SKCheckBox.qml

@@ -1,4 +1,4 @@
-import QtQuick 2.15
+import QtQuick 2.13
 
 Item {
 

SepantaUiKit/SKDropDown/SKDropDown.qml

@@ -1,4 +1,4 @@
-import QtQuick 2.15
+import QtQuick 2.13
 
 Item {
 

SepantaUiKit/SKMultiOption/SKMultiOption.qml

@@ -1,4 +1,4 @@
-import QtQuick 2.15
+import QtQuick 2.13
 
 Item {
 

SepantaUiKit/SKMultiOptionWithDropDown/SKMultiOptionWithDropDown.qml

@@ -1,4 +1,4 @@
-import QtQuick 2.15
+import QtQuick 2.13
 
 Item {
 

SepantaUiKit/SKPathSelector/SKPathSelector.qml

@@ -1,4 +1,4 @@
-import QtQuick 2.15
+import QtQuick 2.13
 
 Item {
 

SepantaUiKit/SKTextField/SKTextField.qml

@@ -1,4 +1,4 @@
-import QtQuick 2.15
+import QtQuick 2.13
 
 Item {
 

SepantaUiKit/Setting.qml

@@ -0,0 +1,17 @@
+pragma Singleton
+
+import QtQuick 2.13
+
+Item {
+    property int radius: 25
+    property real disableOpacity: 0.25
+    property real hoverOpacity: 0.20
+    property int animationDuration: 200
+
+    enum State {
+        Enable,
+        Pressed,
+        Hoverd,
+        Disabel
+    }
+}

SepantaUiKit/SkScrollView/SkScrollView.qml

@@ -1,4 +1,4 @@
-import QtQuick 2.15
+import QtQuick 2.13
 
 Item {
 

SepantaUiKit/aCommon/Effects.qml

@@ -1,4 +1,4 @@
-import QtQuick 2.15
+import QtQuick 2.13
 
 Item {
 

SepantaUiKit/aCommon/GradientEffect1.qml

@@ -0,0 +1,5 @@
+import QtQuick 2.13
+
+Item {
+
+}

SepantaUiKit/qmldir

@@ -0,0 +1,3 @@
+singleton Colors 1.0 Colors.qml
+singleton Fonts 1.0 Fonts.qml
+singleton Setting 1.0 Setting.qml

main.qml

@@ -1,6 +1,5 @@
 import QtQuick 2.13
 import QtQuick.Window 2.13
-import "./SepantaUiKit/SKBtn"
 import QtQuick.Window 2.11
 
 Window {
@@ -11,6 +10,11 @@ Window {
     title: "SepantaUiKit"
     color: "black"
 
+    Page1 {
+
+    }
+
+
     Shortcut {
         sequence: "F5"
         onActivated: {

qml.qrc

@@ -13,5 +13,9 @@
         <file>SepantaUiKit/SKPathSelector/SKPathSelector.qml</file>
         <file>SepantaUiKit/SkScrollView/SkScrollView.qml</file>
         <file>SepantaUiKit/aCommon/Effects.qml</file>
+        <file>Page1.qml</file>
+        <file>SepantaUiKit/Setting.qml</file>
+        <file>SepantaUiKit/qmldir</file>
+        <file>SepantaUiKit/aCommon/GradientEffect1.qml</file>
     </qresource>
 </RCC>