RinUI 0.0.9__py3-none-any.whl

RinUI/components/Base.qml

@@ -0,0 +1,79 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import "../themes"
+
+Item {
+    id: root
+    implicitWidth: 100
+    implicitHeight: 40
+
+    // 公共属性 / Common Properties
+    property color backgroundColor: Theme.currentTheme.colors.controlColor
+    property color borderColor: Theme.currentTheme.colors.controlBorderColor
+    property color textColor: Theme.currentTheme.colors.textColor
+
+    property real borderTransparency: Theme.currentTheme.appearance.borderFactor
+    property real controlRadius: Theme.currentTheme.appearance.buttonRadius
+
+    property bool hovered: false  // 悬停
+    property bool pressed: false  // 按下
+    property bool enabled: true  // 是否启用
+
+    // 启用 MouseArea / Enable MouseArea
+    property bool interactive: true
+
+    // Update
+    // 禁用状态
+    onEnabledChanged: updateStyle()
+
+    // 主题切换 / Theme Switching
+    Connections {
+        target: Theme
+        function onCurrentThemeChanged() {
+            updateStyle()
+        }
+    }
+
+    Component.onCompleted: updateStyle()
+
+    function updateStyle() {
+        backgroundColor = Theme.currentTheme.colors.controlColor
+        borderColor = Theme.currentTheme.colors.controlBorderColor
+        textColor = Theme.currentTheme.colors.textColor
+        controlRadius = Theme.currentTheme.appearance.buttonRadius
+        // borderTransparency = Theme.currentTheme.appearance.borderTransparency
+    }
+
+    // 颜色动画 / Color Animation
+    Behavior on backgroundColor { ColorAnimation { duration: 200; easing.type: Easing.OutQuart } }
+    Behavior on textColor { ColorAnimation { duration: 200; easing.type: Easing.OutQuart } }
+    Behavior on borderColor { ColorAnimation { duration: 200; easing.type: Easing.OutQuart } }
+
+    // 交互 / Interaction
+    MouseArea {
+        id: mouseArea
+        visible: interactive
+        anchors.fill: parent
+        hoverEnabled: true
+
+        // hover状态 / Hover State
+        onEntered: root.hovered = true
+        onExited: root.hovered = false
+
+        // 按下状态 / Pressed State
+        onPressed: root.pressed = true
+        onReleased: root.pressed = false
+
+        onClicked: {
+            if (!root.enabled) {
+                mouse.accepted = true  // 忽略鼠标点击事件
+                return
+            }
+            root.clicked()
+        }
+    }
+
+
+
+    signal clicked()
+}

RinUI/components/BasicInput/Button.qml

@@ -0,0 +1,148 @@
+import QtQuick 2.15
+import QtQuick.Controls.Basic 2.15
+import QtQuick.Layouts 2.15
+import Qt5Compat.GraphicalEffects
+import "../../themes"
+import "../../components"
+
+Button {
+    id: root
+    property color primaryColor: Theme.currentTheme.colors.primaryColor
+    property color backgroundColor: flat ? Theme.currentTheme.colors.subtleSecondaryColor :
+        highlighted ? primaryColor : Theme.currentTheme.colors.controlColor
+    // default property alias icon.source: icon.source
+    property alias size: text.font.pixelSize
+    property bool hoverable: true  // 是否可悬停
+    property bool accessibliityIndicator: true  // 是否显示辅助提示
+    property string suffixIconName: ""  // 后缀图标
+
+    readonly property color hoverColor: !highlighted && !flat
+        ? Theme.currentTheme.colors.controlSecondaryColor : backgroundColor
+
+    // accessibility
+    FocusIndicator {
+        control: parent
+        opacity: accessibliityIndicator
+    }
+
+    padding: 6
+    topPadding: 5
+    bottomPadding: 7
+
+    background: Rectangle {
+        id: background
+        anchors.fill: parent
+        color: hovered ? hoverColor : backgroundColor
+        radius: Theme.currentTheme.appearance.buttonRadius
+
+        border.width: Theme.currentTheme.appearance.borderWidth  // 边框宽度 / Border Width
+        border.color: flat ? "transparent" :
+            enabled ? highlighted ? primaryColor : Theme.currentTheme.colors.controlBorderColor :
+            highlighted ? Theme.currentTheme.colors.disabledColor : Theme.currentTheme.colors.controlBorderColor
+
+        // 裁切
+        layer.enabled: true
+        layer.smooth: true
+        layer.effect: OpacityMask {
+            maskSource: Rectangle {
+                width: background.width
+                height: background.height
+                radius: background.radius
+            }
+        }
+
+        // 底部border
+        Rectangle {
+            id: indicator
+            width: parent.width
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.bottom: parent.bottom
+            height: Theme.currentTheme.appearance.borderWidth
+
+            color: flat ? "transparent" :
+                enabled ? highlighted ? Theme.currentTheme.colors.controlAccentBottomBorderColor
+                        : Theme.currentTheme.colors.controlBottomBorderColor
+                    : "transparent"
+        }
+
+        Behavior on color { ColorAnimation { duration: Utils.appearanceSpeed; easing.type: Easing.OutQuart } }
+        opacity: flat && !hovered || !hoverable ? 0 : 1
+    }
+
+    implicitWidth: Math.max(row.implicitWidth + 26, 40)
+    implicitHeight: Math.max(text.height + 12, 32)
+
+    contentItem: Item {
+        clip: true
+        anchors.fill: parent
+
+        Row {
+            id: row
+            spacing: 8
+            anchors.centerIn: parent
+            IconWidget {
+                id: iconWidget
+                size: icon || source ? text.font.pixelSize * 1.25 : 0  // 图标大小 / Icon Size
+                icon: root.icon.name
+                source: root.icon.source
+                height: parent.height
+                y: 0.25
+                color: icon.color ? icon.color : highlighted ? flat ?
+                    enabled ? Theme.currentTheme.colors.textAccentColor : Theme.currentTheme.colors.textColor :
+                    Theme.currentTheme.colors.textOnAccentColor : Theme.currentTheme.colors.textColor
+            }
+            Text {
+                id: text
+                typography: Typography.Body
+                text: root.text
+                color: highlighted ? flat ? Theme.currentTheme.colors.textAccentColor :
+                    Theme.currentTheme.colors.textOnAccentColor : Theme.currentTheme.colors.textColor
+            }
+            // 后缀图标
+            IconWidget {
+                id: suffixIcon
+                size: 12
+                height: parent.height
+                icon: root.suffixIconName
+                color: Theme.currentTheme.colors.textSecondaryColor
+                visible: root.suffixIconName !== ""
+            }
+        }
+    }
+
+    Behavior on opacity { NumberAnimation { duration: Utils.appearanceSpeed; easing.type: Easing.OutQuart } }
+
+    // 状态变化
+    states: [
+        State {
+        name: "disabled"
+            when: !enabled
+            PropertyChanges {
+                target: root
+                opacity: 0.65
+                backgroundColor: highlighted ? Theme.currentTheme.colors.disabledColor : Theme.currentTheme.colors.controlColor
+            }
+            PropertyChanges {
+                target: text
+                color: flat ? Theme.currentTheme.colors.disabledColor : text.color
+            }
+        },
+        State {
+            name: "pressed"
+            when: pressed
+            PropertyChanges {
+                target: root;
+                opacity: !highlighted && !flat ? 0.7 : 0.65
+                backgroundColor:  !highlighted && !flat ? Theme.currentTheme.colors.controlTertiaryColor : backgroundColor
+            }
+        },
+        State {
+            name: "hovered"
+            when: hovered && hoverable
+            PropertyChanges {
+                target: root;
+                opacity: !highlighted && !flat ? 1 : 0.875
+            }
+        }
+    ]
+}

RinUI/components/BasicInput/CheckBox.qml

@@ -0,0 +1,99 @@
+import QtQuick 2.15
+import QtQuick.Controls.Basic 2.15
+import "../../themes"
+import "../../components"
+
+
+CheckBox {
+    id: root
+    property color backgroundColor: Theme.currentTheme.colors.controlSecondaryColor
+    property color primaryColor: Theme.currentTheme.colors.primaryColor
+
+    spacing: 8
+
+    // accessibility
+    FocusIndicator {
+        control: parent
+    }
+
+    contentItem: Text {
+        leftPadding: root.indicator.width + root.spacing
+        verticalAlignment: Text.AlignVCenter
+
+        text: root.text
+    }
+
+    // 指示器 / indicator //
+    indicator: Rectangle {
+        id: background
+        width: 20
+        height: 20
+        x: root.leftPadding
+        y: parent.height / 2 - height / 2
+        radius: Theme.currentTheme.appearance.buttonRadius
+        color: checkState !== Qt.Unchecked ? primaryColor :
+            hovered ? Theme.currentTheme.colors.controlTertiaryColor : backgroundColor
+        // 边框 / Border
+        border.color: checkState !== Qt.Unchecked ? "transparent" : Theme.currentTheme.colors.controlBorderStrongColor
+        border.width: Theme.currentTheme.appearance.borderWidth
+
+        Behavior on color { ColorAnimation { duration: Utils.animationSpeed; easing.type: Easing.OutQuart } }
+        Behavior on opacity { NumberAnimation { duration: Utils.appearanceSpeed; easing.type: Easing.OutQuart } }
+
+        // 指示器 / Indicator //
+        Rectangle {
+            id: mask
+            anchors.verticalCenter: background.verticalCenter
+            anchors.left: background.left
+            anchors.leftMargin: 4
+            width: checkState !== Qt.Unchecked ? 12 : 0
+            height: 12
+            clip: true
+            color: "transparent"
+
+            Behavior on width { NumberAnimation { duration: Utils.animationSpeedMiddle; easing.type: Easing.OutQuint } }
+
+            IconWidget {
+                id: indicator
+                icon: checkState !== Qt.PartiallyChecked
+                    ? "ic_fluent_checkmark_20_filled" :
+                    "ic_fluent_subtract_20_regular"
+                size: 12
+                color: Theme.currentTheme.colors.textOnAccentColor
+
+                Behavior on color { ColorAnimation { duration: Utils.appearanceSpeed; easing.type: Easing.OutQuart } }
+            }
+        }
+    }
+
+    Behavior on opacity { NumberAnimation { duration: Utils.appearanceSpeed; easing.type: Easing.OutQuart } }
+
+    // 状态变化
+    states: [
+        State {
+        name: "disabled"
+            when: !enabled
+            PropertyChanges {
+                target: root
+                opacity: 0.4
+                primaryColor: Theme.currentTheme.colors.disabledColor
+            }
+        },
+        State {
+            name: "pressed"
+            when: pressed
+            PropertyChanges {
+                target: background;
+                opacity: 0.65
+            }
+        },
+        State {
+            name: "hovered"
+            when: hovered
+            PropertyChanges {
+                target: background;
+                opacity: 0.875
+            }
+        }
+    ]
+}

RinUI/components/BasicInput/ComboBox.qml

@@ -0,0 +1,160 @@
+import QtQuick 2.15
+import QtQuick.Controls.Basic 2.15
+import Qt5Compat.GraphicalEffects
+import "../../themes"
+import "../../components"
+
+
+ComboBox {
+    id: root
+
+    // 属性 / Properties
+    property real controlRadius: Theme.currentTheme.appearance.buttonRadius
+    property string placeholderText: ""
+    property alias maxHeight: menu.maxHeight
+    property string headerText: ""
+
+    implicitWidth: Math.max(contentItem.implicitWidth + 50, 60)
+    // implicitHeight: contentItem.implicitHeight + 12
+
+    padding: 0
+
+    // accessibility
+    FocusIndicator {
+        Indicator {
+            id: focusIndicator
+            anchors.left: parent.left
+            anchors.leftMargin: 2
+            anchors.verticalCenter: parent.verticalCenter
+        }
+        anchors.margins: -1
+        control: parent
+    }
+
+
+    // 背景 / Background //
+    background: Rectangle {
+        id: background
+        anchors.fill: parent
+        color: Theme.currentTheme.colors.controlColor
+        radius: Theme.currentTheme.appearance.buttonRadius
+
+        border.width: Theme.currentTheme.appearance.borderWidth  // 边框宽度 / Border Width
+        border.color: Theme.currentTheme.colors.controlBorderColor
+
+        // 裁切
+        layer.enabled: true
+        layer.smooth: true
+        layer.effect: OpacityMask {
+            maskSource: Rectangle {
+                width: background.width
+                height: background.height
+                radius: background.radius
+            }
+        }
+
+        // 底部border
+        Rectangle {
+            id: indicator
+            width: parent.width
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.bottom: parent.bottom
+            height: Theme.currentTheme.appearance.borderWidth
+
+            color: Theme.currentTheme.colors.controlBottomBorderColor
+        }
+
+        Behavior on color { ColorAnimation { duration: Utils.appearanceSpeed; easing.type: Easing.OutQuart } }
+        opacity: flat && !hovered ? 0 : 1
+    }
+
+    // 指示器 / Indicator //
+    indicator: ToolButton {
+        flat: true
+        width: 32
+        height: 24
+        focusPolicy: editable ? Qt.StrongFocus : Qt.NoFocus
+        anchors.right: parent.right
+        anchors.margins: 4
+        anchors.verticalCenter: parent.verticalCenter
+        icon.name: "ic_fluent_chevron_down_20_regular"
+        size: 14
+        color: Theme.currentTheme.colors.textSecondaryColor
+        hoverable: editable
+
+        onClicked: menu.open()
+    }
+
+    // Text //
+    // contentItem: Text {
+    //     id: text
+    //     typography: Typography.Body
+    //     anchors.left: parent.left
+    //     anchors.leftMargin: 11  // 左边距为 11
+    //     verticalAlignment: Text.AlignVCenter
+    //     height: parent.height
+    //     text: root.displayText ? root.displayText : root.placeholderText
+    //     color: root.displayText ? Theme.currentTheme.colors.textColor : Theme.currentTheme.colors.textSecondaryColor
+    // }
+
+    contentItem: TextField {
+        id: text
+        anchors.fill: parent
+        text: root.displayText
+        editable: root.editable
+        frameless: true
+        placeholderText: root.placeholderText
+    }
+
+    // 弹出菜单 / Menu //
+    popup: ContextMenu {
+        id: menu
+        width: root.width
+        model: root.model
+        currentIndex: root.currentIndex
+
+        function handleItemSelected(index) {
+            root.currentIndex = index
+            return true
+        }
+        onItemSelected: handleItemSelected(index)
+    }
+
+    // 动画
+    Behavior on opacity { NumberAnimation { duration: 150; easing.type: Easing.OutQuart } }
+    Behavior on implicitWidth { NumberAnimation { duration: 100; easing.type: Easing.InOutQuart } }
+
+
+    // 状态变化
+    states: [
+        State {
+        name: "disabled"
+            when: !enabled
+            PropertyChanges {  // 禁用时禁止改变属性
+                target: root;
+                opacity: 0.4
+            }
+        },
+        State {
+            name: "pressed"
+            when: pressed
+            PropertyChanges {
+                target: root;
+                opacity: 0.7
+            }
+            PropertyChanges {
+                target: background;
+                color: Theme.currentTheme.colors.controlTertiaryColor
+            }
+        },
+        State {
+            name: "hovered"
+            when: hovered
+            PropertyChanges {
+                target: background;
+                opacity: 1
+                color: Theme.currentTheme.colors.controlSecondaryColor
+            }
+        }
+    ]
+}

RinUI/components/BasicInput/DropDownButton.qml

@@ -0,0 +1,21 @@
+import QtQuick 2.15
+import QtQuick.Controls.Basic 2.15
+import QtQuick.Layouts 2.15
+import "../../themes"
+import "../../components"
+
+Button {
+    id: root
+    default property alias contentData: menu.contentData
+    suffixIconName: "ic_fluent_chevron_down_20_filled"
+
+    Menu {
+        id: menu
+    }
+
+    onClicked: {
+        if (menu.count > 0) {
+            menu.open()
+        }
+    }
+}

RinUI/components/BasicInput/Hyperlink.qml

@@ -0,0 +1,18 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import "../../themes"
+import "../../components"
+
+
+Button {
+    id: root
+    property url openUrl: root.openUrl
+    property alias url: root.openUrl
+    flat: true
+    highlighted: true
+    // underline: !root.hovered
+
+    onClicked: {
+        Qt.openUrlExternally(openUrl)
+    }
+}

RinUI/components/BasicInput/RadioButton.qml

@@ -0,0 +1,95 @@
+import QtQuick 2.15
+import QtQuick.Controls.Basic 2.15
+import "../../themes"
+import "../../components"
+
+
+RadioButton {
+    id: root
+    property color backgroundColor: Theme.currentTheme.colors.controlSecondaryColor
+    property color primaryColor: Theme.currentTheme.colors.primaryColor
+
+    spacing: 8
+
+    // accessibility
+    FocusIndicator {
+        control: parent
+    }
+
+    contentItem: Text {
+        leftPadding: root.indicator.width + root.spacing
+        verticalAlignment: Text.AlignVCenter
+
+        text: root.text
+    }
+
+    // 指示器 / indicator //
+    indicator: Rectangle {
+        id: background
+        width: 20
+        height: 20
+        x: root.leftPadding
+        y: parent.height / 2 - height / 2
+
+        radius: width / 2
+        color: checked ? primaryColor :
+            hovered ? Theme.currentTheme.colors.controlTertiaryColor : backgroundColor
+        // 边框 / Border
+        border.color: checked ? "transparent" : Theme.currentTheme.colors.controlBorderStrongColor
+        border.width: Theme.currentTheme.appearance.borderWidth
+
+        Behavior on color { ColorAnimation { duration: Utils.animationSpeed; easing.type: Easing.OutQuart } }
+        Behavior on opacity { NumberAnimation { duration: Utils.appearanceSpeed; easing.type: Easing.OutQuart } }
+
+        // 指示器 / Indicator //
+        Rectangle {
+            id: indicator
+            anchors.centerIn: parent
+            width: background.width / 2
+            height: background.height / 2
+            scale: enabled ?
+                checked ? pressed ? 0.8 : hovered ? 1.25 : 1   // checked
+                    : pressed ? 1 : 0  // unchecked
+                : checked ? 1 : 0  // disabled
+
+            anchors.verticalCenter: background.verticalCenter
+            radius: height / 2
+            color: checked ? Theme.currentTheme.colors.textOnAccentColor : pressed ? Theme.currentTheme.colors.textOnAccentColor : "transparent"
+            // color: Theme.currentTheme.colors.textOnAccentColor
+
+            Behavior on color { ColorAnimation { duration: Utils.animationSpeed; easing.type: Easing.OutQuart } }
+            Behavior on scale { NumberAnimation { duration: Utils.animationSpeed; easing.type: Easing.OutQuint } }
+        }
+    }
+
+    Behavior on opacity { NumberAnimation { duration: Utils.appearanceSpeed; easing.type: Easing.OutQuart } }
+
+    // 状态变化
+    states: [
+        State {
+        name: "disabled"
+            when: !enabled
+            PropertyChanges {
+                target: root
+                opacity: 0.4
+                primaryColor: Theme.currentTheme.colors.disabledColor
+            }
+        },
+        State {
+            name: "pressed"
+            when: pressed
+            PropertyChanges {
+                target: background;
+                opacity: 0.65
+            }
+        },
+        State {
+            name: "hovered"
+            when: hovered
+            PropertyChanges {
+                target: background;
+                opacity: 0.875
+            }
+        }
+    ]
+}