MultiBtn finished

Page1.qml

@@ -1,37 +1,47 @@
 import QtQuick 2.13
-import "./SepantaUiKit/SKBtn"
 import "./SepantaUiKit"
+import "./SepantaUiKit/SKBtn"
+import "./SepantaUiKit/SKBtnIcon"
+import "./SepantaUiKit/SKMultiOption"
+import "./SepantaUiKit/aCommon"
 
 Item {
     anchors.fill: parent
-    Grid {
+    Column {
+        anchors.fill: parent
         spacing: 20
         anchors.margins: 20
-        anchors.fill: parent
-        SKBtn {
-            text: "Enable P"
-        }
-        SKBtn {
-            text: "Disable P"
-            isEnable: false
+        Row {
+            spacing: 20
+            SKBtn {
+                text: "Enable P"
+            }
+            SKBtn {
+                text: "Disable P"
+                isEnable: false
+            }
+            SKBtn {
+                text: "Enable S"
+                buttonType: Setting.Secondary
+            }
+            SKBtn {
+                text: "Disable S"
+                isEnable: false
+                buttonType: Setting.Secondary
+            }
+            SKBtn {
+                text: "Enable T"
+                buttonType: Setting.Tertiary
+            }
+            SKBtn {
+                text: "Disable T"
+                isEnable: false
+                buttonType: Setting.Tertiary
+            }
         }
-        SKBtn {
-            text: "Enable S"
-            buttonType: Setting.Secondary
-        }
-        SKBtn {
-            text: "Disable S"
-            isEnable: false
-            buttonType: Setting.Secondary
-        }
-        SKBtn {
-            text: "Enable T"
-            buttonType: Setting.Tertiary
-        }
-        SKBtn {
-            text: "Disable T"
-            isEnable: false
-            buttonType: Setting.Tertiary
+
+        Row {
+            SKMultiOption {}
         }
     }
 }

SepantaUiKit/Colors.qml

@@ -14,7 +14,7 @@ Item {
     property string tertiaryPressed: "#E0E7E9"
     //Other
     property string white: "#f8f8f8"
-    property string balck: "#0b0b0b"
+    property string black: "#0b0b0b"
     property string success: "#28a745"
     property string danger: "#dc3545"
     property string warning: "#ffc107"

SepantaUiKit/SKBtn/SKBtn.qml

@@ -24,7 +24,6 @@ Item {
             anchors.fill: parent
             horizontalAlignment: Text.AlignHCenter
             verticalAlignment: Text.AlignVCenter
-            color: Colors.balck
             font: Fonts.h3
             Behavior on color {
                 ColorAnimation {
@@ -64,6 +63,7 @@ Item {
     //========================================================================
     function stateChanged() {
         if (buttonType === Setting.Primary) {
+            idText.color = Colors.black
             switch (stateOfComponent) {
             case Setting.Enable:
                 idBackGround.color = Colors.primaryEnable
@@ -81,6 +81,7 @@ Item {
                 break
             }
         } else if (buttonType === Setting.Secondary) {
+            idText.color = Colors.black
             switch (stateOfComponent) {
             case Setting.Enable:
                 idBackGround.color = Colors.secondaryEnable
@@ -98,10 +99,10 @@ Item {
                 break
             }
         } else if (buttonType === Setting.Tertiary) {
-            idBackGround.color = Colors.balck
+            idBackGround.color = Colors.black
             idBackGround.border.width = 1
             idBackGround.border.color = Colors.tertiaryEnable
-            idText.color = Colors.white
+
             switch (stateOfComponent) {
             case Setting.Enable:
                 idBackGround.border.color = Colors.tertiaryEnable
@@ -118,6 +119,13 @@ Item {
                             Colors.tertiaryEnable, Setting.disableCoeffecient)
                 break
             }
+
+            if (stateOfComponent === Setting.Disabel) {
+                idText.color = Qt.darker(Colors.tertiaryEnable,
+                                         Setting.disableCoeffecient)
+            } else {
+                idText.color = Colors.white
+            }
         }
     }
     function enableHandle() {

SepantaUiKit/SKBtnIcon/SKBtnIcon.qml

@@ -1,5 +1,23 @@
 import QtQuick 2.13
+import "../"
+import "../aCommon"
 
 Item {
+    width: 16
+    height: 16
+    property string iconPath: ""
+    property bool isEnable: true
 
+    Rectangle {
+        anchors.fill: parent
+        color: Colors.black
+        border.width: 1
+        border.color: Colors.tertiaryEnable
+        radius: Setting.smallRadius
+        UImage {
+            anchors.fill: parent
+            color: Colors.tertiaryEnable
+            source: "qrc:/SepantaUiKit/icons/person.svg"
+        }
+    }
 }

SepantaUiKit/SKMultiOption/MultiOptionBtn.qml

@@ -0,0 +1,95 @@
+import QtQuick 2.13
+import QtQml 2.13
+import QtQuick.Layouts 1.13
+import QtGraphicalEffects 1.13
+import "../"
+import "../aCommon"
+
+Item {
+    id: root
+    property bool isSelected: false
+    property var stateOfComponent: Setting.Enable
+    property var indexManager
+    property var myIndex
+    property var currentIndex: indexManager.currentIndex
+
+    property bool rightHasRadius: false
+    property bool leftHasRadius: false
+
+    property int radius: 0
+
+    onCurrentIndexChanged: {
+        if (currentIndex === myIndex) {
+            isSelected = true
+        } else
+            isSelected = false
+    }
+
+    onIsSelectedChanged: buildComponent()
+    property alias text: idText.text
+    Layout.fillHeight: true
+    Layout.fillWidth: true
+
+    RectangleWithRadius {
+        id: idBackGround
+        anchors.fill: parent
+        topLeftRadiusEnable: leftHasRadius
+        buttonLeftRadiusEnable: leftHasRadius
+
+        topRightRadiusEnable: rightHasRadius
+        buttonRighttRadiusEnable: rightHasRadius
+
+        radius: root.radius
+        Behavior on color {
+            ColorAnimation {
+                duration: Setting.animationDuration
+            }
+        }
+    }
+
+    Text {
+        id: idText
+        anchors.fill: parent
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+        font: Fonts.h5
+        color: Colors.tertiaryEnable
+        Behavior on color {
+            ColorAnimation {
+                duration: Setting.animationDuration
+            }
+        }
+    }
+    MouseArea {
+        anchors.fill: parent
+        hoverEnabled: true
+        onHoveredChanged: {
+            if (containsMouse) {
+                stateOfComponent = Setting.Hoverd
+            } else {
+                stateOfComponent = Setting.Enable
+            }
+        }
+        onPressed: {
+            stateOfComponent = Setting.Pressed
+            indexManager.clicked(myIndex)
+        }
+        onReleased: {
+            stateOfComponent = Setting.Enable
+        }
+    }
+
+    function buildComponent() {
+        if (isSelected) {
+            idBackGround.color = Colors.primaryEnable
+            idText.color = Colors.black
+        } else {
+            idBackGround.color = "transparent"
+            idText.color = Colors.tertiaryEnable
+        }
+    }
+
+    Component.onCompleted: {
+        buildComponent()
+    }
+}

SepantaUiKit/SKMultiOption/SKMultiOption.qml

@@ -1,5 +1,95 @@
 import QtQuick 2.13
+import QtQml 2.13
+import QtQuick.Layouts 1.13
+import "../"
+import "../aCommon"
 
 Item {
+    id: root
+    height: 38
+    width: 400
 
+    property var listOfObj: []
+    property var options: ["High", "Low", "Medium"]
+    property var currentText: options[currentIndex]
+    property var currentIndex: 0
+
+    property var stateOfComponent: Setting.Enable
+    Item {
+        anchors.fill: parent
+
+        RowLayout {
+            id: idLayout
+            anchors.fill: parent
+            spacing: 0
+        }
+    }
+
+    Rectangle {
+        id: idBackGround
+        anchors.fill: parent
+        radius: Setting.mediumRadius
+        color: "transparent"
+        border.color: Colors.tertiaryEnable
+        border.width: 1
+        clip: true
+    }
+
+    CurrentSelectedManager {
+        id: indexManager
+    }
+
+    function buildComponent() {
+
+        let lengthOfList = listOfObj.length
+        for (var k = 0; k < lengthOfList; k++) {
+            listOfObj[k].destroy()
+        }
+        listOfObj = []
+
+        let numberOfBtns = options.length
+        let numberOfLines = numberOfBtns - 1
+
+        let btnCompoent = Qt.createComponent("MultiOptionBtn.qml")
+        let lineComponent = Qt.createComponent(
+                "qrc:/SepantaUiKit/aCommon/Line.qml")
+
+        if (numberOfLines > 0) {
+            let lengthOfEachBtn = root.width / numberOfBtns
+            for (var j = 0; j < numberOfBtns; j++) {
+                let rightHasRadius = false
+                let leftHasRadius = false
+                if (j === 0) {
+                    leftHasRadius = true
+                } else if (j === numberOfBtns - 1) {
+                    rightHasRadius = true
+                }
+
+                let sprite = btnCompoent.createObject(idLayout, {
+                                                          "text": options[j],
+                                                          "indexManager": indexManager,
+                                                          "myIndex": j,
+                                                          "leftHasRadius": leftHasRadius,
+                                                          "rightHasRadius": rightHasRadius,
+                                                          "radius": idBackGround.radius
+                                                      })
+                listOfObj.push(sprite)
+
+                if (j !== numberOfBtns - 1) {
+                    let spriteL = lineComponent.createObject(idLayout, {
+                                                                 "color": Colors.tertiaryEnable,
+                                                                 "Layout.fillHeight": true,
+                                                                 "width": 1
+                                                             })
+                    listOfObj.push(spriteL)
+                }
+            }
+        }
+    }
+
+    Line {}
+
+    Component.onCompleted: {
+        buildComponent()
+    }
 }

SepantaUiKit/Setting.qml

@@ -4,6 +4,8 @@ import QtQuick 2.13
 
 Item {
     property int radius: 25
+    property int  mediumRadius: 6
+    property int smallRadius: 2
     property real disableOpacity: 0.25
     property real hoverOpacity: 0.20
     property int animationDuration: 180

SepantaUiKit/aCommon/CurrentSelectedManager.qml

@@ -0,0 +1,13 @@
+import QtQuick 2.13
+
+Item {
+    id: root
+
+    //from child component
+    signal clicked(var index)
+    onClicked: {
+        currentIndex = index
+    }
+
+    property int currentIndex: 0
+}

SepantaUiKit/aCommon/Line.qml

@@ -0,0 +1,7 @@
+import QtQuick 2.13
+import QtQuick.Layouts 1.13
+
+Rectangle {
+    Layout.preferredWidth: width
+    Layout.preferredHeight: height
+}

SepantaUiKit/aCommon/RectangleWithRadius.qml

@@ -0,0 +1,48 @@
+import QtQuick 2.13
+
+Item {
+    id: root
+    property int radius
+    property string color: "white"
+    property bool topLeftRadiusEnable: false
+    property bool topRightRadiusEnable: false
+    property bool buttonLeftRadiusEnable: false
+    property bool buttonRighttRadiusEnable: false
+    layer.enabled: true
+    Rectangle {
+        id: main
+        anchors.fill: parent
+        color: root.color
+        radius: root.radius
+    }
+    Rectangle {
+        visible: !topLeftRadiusEnable
+        width: main.radius
+        height: main.radius
+        color: root.color
+    }
+
+    Rectangle {
+        visible: !topRightRadiusEnable
+        width: main.radius
+        height: main.radius
+        x: parent.width - width
+        color: root.color
+    }
+    Rectangle {
+        visible: !buttonLeftRadiusEnable
+        width: main.radius
+        height: main.radius
+        y: parent.height - height
+        color: root.color
+    }
+
+    Rectangle {
+        visible: !buttonRighttRadiusEnable
+        width: main.radius
+        height: main.radius
+        x: parent.width - width
+        y: parent.height - height
+        color: root.color
+    }
+}

SepantaUiKit/aCommon/UImage.qml

@@ -0,0 +1,19 @@
+import QtQuick 2.13
+import QtGraphicalEffects 1.13
+
+Item {
+    property alias color: idOverlay.color
+    property alias source: idImage.source
+    Image {
+        id: idImage
+        visible: false
+        fillMode: Image.PreserveAspectFit
+        sourceSize.width: width
+        sourceSize.height: height
+    }
+    ColorOverlay {
+        id: idOverlay
+        anchors.fill: parent
+        source: idImage
+    }
+}

SepantaUiKit/icons/Icons.qml

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

qml.qrc

@@ -17,5 +17,23 @@
         <file>SepantaUiKit/Setting.qml</file>
         <file>SepantaUiKit/qmldir</file>
         <file>SepantaUiKit/aCommon/GradientEffect1.qml</file>
+        <file>SepantaUiKit/icons/Icons.qml</file>
+        <file>SepantaUiKit/aCommon/UImage.qml</file>
+        <file>SepantaUiKit/icons/back folder.svg</file>
+        <file>SepantaUiKit/icons/check-square-fill.svg</file>
+        <file>SepantaUiKit/icons/delete folder.svg</file>
+        <file>SepantaUiKit/icons/Disk.svg</file>
+        <file>SepantaUiKit/icons/downArrow.svg</file>
+        <file>SepantaUiKit/icons/exam icon.svg</file>
+        <file>SepantaUiKit/icons/file.svg</file>
+        <file>SepantaUiKit/icons/folder.svg</file>
+        <file>SepantaUiKit/icons/folder-plus.svg</file>
+        <file>SepantaUiKit/icons/person.svg</file>
+        <file>SepantaUiKit/icons/unckeck squre.svg</file>
+        <file>SepantaUiKit/icons/USB.svg</file>
+        <file>SepantaUiKit/SKMultiOption/MultiOptionBtn.qml</file>
+        <file>SepantaUiKit/aCommon/CurrentSelectedManager.qml</file>
+        <file>SepantaUiKit/aCommon/RectangleWithRadius.qml</file>
+        <file>SepantaUiKit/aCommon/Line.qml</file>
     </qresource>
 </RCC>