SepantaUIKit/SepantaUiKit/SKBtn/SKBtn.qml

import QtQuick 2.13
import QtQml 2.13
import "qrc:/SepantaUiKit"

Item {
    id: root
    width: 140
    height: 50
    property bool isEnable: true
    property var buttonType: Setting.Primary
    property var stateOfComponent: Setting.Enable
    property alias text: idText.text

    onIsEnableChanged: enableHandle()
    onStateOfComponentChanged: stateChanged()
    //========================================================================
    Rectangle {
        id: idBackGround
        anchors.fill: parent
        radius: Setting.radius

        Text {
            id: idText
            anchors.fill: parent
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
            font: Fonts.h3
            Behavior on color {
                ColorAnimation {
                    duration: Setting.animationDuration
                }
            }
        }
        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() {
        if (buttonType === Setting.Primary) {
            idText.color = Colors.black
            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,
                                                Setting.hoverCoeffecient)
                break
            case Setting.Disabel:
                idBackGround.color = Qt.darker(Colors.primaryEnable,
                                               Setting.disableCoeffecient)
                break
            }
        } else if (buttonType === Setting.Secondary) {
            idText.color = Colors.black
            switch (stateOfComponent) {
            case Setting.Enable:
                idBackGround.color = Colors.secondaryEnable
                break
            case Setting.Pressed:
                idBackGround.color = Colors.secondaryPressed
                break
            case Setting.Hoverd:
                idBackGround.color = Qt.lighter(Colors.secondaryEnable,
                                                Setting.hoverCoeffecient)
                break
            case Setting.Disabel:
                idBackGround.color = Qt.darker(Colors.secondaryEnable,
                                               Setting.disableCoeffecient)
                break
            }
        } else if (buttonType === Setting.Tertiary) {
            idBackGround.color = Colors.black
            idBackGround.border.width = 1
            idBackGround.border.color = Colors.tertiaryEnable

            switch (stateOfComponent) {
            case Setting.Enable:
                idBackGround.border.color = Colors.tertiaryEnable
                break
            case Setting.Pressed:
                idBackGround.border.color = Colors.tertiaryPressed
                break
            case Setting.Hoverd:
                idBackGround.border.color = Qt.lighter(Colors.tertiaryEnable,
                                                       Setting.hoverCoeffecient)
                break
            case Setting.Disabel:
                idBackGround.border.color = Qt.darker(
                            Colors.tertiaryEnable, Setting.disableCoeffecient)
                break
            }

            if (stateOfComponent === Setting.Disabel) {
                idText.color = Qt.darker(Colors.tertiaryEnable,
                                         Setting.disableCoeffecient)
            } else {
                idText.color = Colors.white
            }
        }
    }
    function enableHandle() {
        if (isEnable) {
            stateOfComponent = Setting.Enable
        } else {
            stateOfComponent = Setting.Disabel
        }
    }

    Component.onCompleted: {
        enableHandle()
        stateChanged()
    }
}