RinUI 0.0.9__py3-none-any.whl

RinUI/components/DateAndTime/PickerView.qml

@@ -0,0 +1,217 @@
+import QtQuick 2.15
+import QtQuick.Controls.Basic 2.15
+import QtQuick.Layouts 2.15
+import "../../themes"
+import "../../components"
+
+Popup {
+    id: root
+
+    width: 300
+    height: 330
+    implicitHeight: 330
+    y: -height / 2 + buttonRow.height
+    position: Position.Center  // RinUI popup自定义属性
+
+    property var value1: undefined
+    property var value2: undefined
+    property var value3: undefined
+
+    property var model1: 12
+    property var model2: 60
+    property var model3: [qsTr("AM"), qsTr("PM")]
+
+    readonly property bool gotData: typeof value1!== "undefined" && typeof value2!== "undefined"
+
+    function formatText(count, modelData) {
+        let data = count === 60 ? modelData : modelData;
+        return data.toString().length < 2 && count !== 12  ? "0" + data
+            : data === 0 && count === 12 ? 12 : data
+    }
+
+    property int visibleItemCount: 7
+
+    // 数字/文字 选择 //
+    Component {
+        id: delegateComponent
+
+        Text {
+            readonly property bool highlighted: Tumbler.displacement < 0.5 && Tumbler.displacement > -0.5
+            text: formatText(Tumbler.tumbler.count, modelData)
+            color: highlighted? Theme.currentTheme.colors.textOnAccentColor : Theme.currentTheme.colors.textColor
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+
+            // 点击选择喵 看看啥时候把背景加上
+            MouseArea {
+                anchors.fill: parent
+                onClicked: Tumbler.tumbler.currentIndex = index
+            }
+        }
+    }
+    padding: 0
+
+    ColumnLayout {
+        id: columnLayout
+        anchors.fill: parent
+        spacing: -2
+
+        Frame {
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+            padding: 0
+            leftPadding: 4
+            rightPadding: 4
+
+            frameless: true
+            background: Rectangle {
+                id: highlightBackground
+                anchors.centerIn: parent
+                height: 40
+                radius: Theme.currentTheme.appearance.buttonRadius
+                color: Theme.currentTheme.colors.primaryColor
+                width: parent.width - parent.leftPadding - parent.rightPadding
+            }
+
+            RowLayout {
+                id: tumblerRow
+                anchors.fill: parent
+
+                Tumbler {
+                    Layout.fillWidth: true
+                    Layout.fillHeight: true
+                    id: hours
+                    model: model1
+                    visibleItemCount: root.visibleItemCount
+                    delegate: delegateComponent
+
+                }
+                ToolSeparator {
+                    Layout.fillHeight: true
+                }
+                Tumbler {
+                    Layout.fillWidth: true
+                    Layout.fillHeight: true
+                    id: minutes
+                    model: model2
+                    visibleItemCount: root.visibleItemCount
+                    delegate: delegateComponent
+                }
+                ToolSeparator {
+                    Layout.fillHeight: true
+                    visible: added.visible
+                }
+                Tumbler {
+                    Layout.fillWidth: true
+                    Layout.fillHeight: true
+                    id: added
+                    model: model3
+                    visibleItemCount: root.visibleItemCount
+                    delegate: delegateComponent
+                    visible: typeof model3 !== "undefined"
+                }
+            }
+        }
+
+        Rectangle {  // 分割线
+            Layout.fillWidth: true
+            implicitHeight: 1
+            color: Theme.currentTheme.colors.dividerBorderColor
+        }
+
+        // 确认/取消 按钮区域
+        RowLayout {
+            id: buttonRow
+            Layout.fillWidth: true
+            Layout.leftMargin: 4
+            Layout.rightMargin: 4
+            spacing: 0
+
+            // confirm
+            ToolButton {
+                Layout.fillWidth: true
+                flat: true
+                icon.name: "ic_fluent_checkmark_20_regular"
+                onClicked: {
+                    value1 = hours.currentItem.text
+                    value2 = minutes.currentItem.text
+                    typeof model3 !== "undefined" ? value3 = added.currentItem.text : undefined
+                    root.close()
+                }
+            }
+            ToolSeparator {
+                implicitHeight: 40
+            }
+            // cancel
+            ToolButton {
+                Layout.fillWidth: true
+                flat: true
+                icon.name: "ic_fluent_dismiss_20_regular"
+                onClicked: {
+                    root.close()
+                }
+            }
+        }
+    }
+
+    enter: Transition {
+        ParallelAnimation {
+            NumberAnimation {
+                target: root
+                property: "opacity"
+                from: 0
+                to: 1
+                duration: Utils.appearanceSpeed
+                easing.type: Easing.OutQuint
+            }
+            NumberAnimation {
+                target: root
+                property: "height"
+                from: implicitHeight / 2
+                to: implicitHeight
+                duration: Utils.animationSpeedMiddle * 0.8
+                easing.type: Easing.OutQuint
+            }
+            ScriptAction {
+                script: {
+                    hours.positionViewAtIndex(
+                        typeof value1 === "undefined" ? 0
+                        : typeof model1 === "number" ? value1 : model1.indexOf(value1), Tumbler.Center
+                    )
+                    minutes.positionViewAtIndex(
+                        typeof value2 === "undefined" ? 0
+                        : typeof model2 === "number" ? value2 : model2.indexOf(value2), Tumbler.Center
+                    )
+                    added.positionViewAtIndex(
+                        typeof value3 === "undefined" ? 0
+                        : typeof model3 === "number" ? value3 : model3.indexOf(value3), Tumbler.Center
+                    )
+                }
+            }
+        }
+    }
+
+    background: Rectangle {
+        id: background
+        anchors.fill: parent
+        anchors.horizontalCenter: parent.horizontalCenter
+        y: -6
+
+        radius: Theme.currentTheme.appearance.windowRadius
+        color: Theme.currentTheme.colors.backgroundAcrylicColor
+        border.color: Theme.currentTheme.colors.flyoutBorderColor
+
+        Behavior on color {
+            ColorAnimation {
+                duration: Utils.appearanceSpeed
+                easing.type: Easing.OutQuart
+            }
+        }
+
+        layer.enabled: true
+        layer.effect: Shadow {
+            style: "flyout"
+            source: background
+        }
+    }
+}

RinUI/components/DateAndTime/TimePicker.qml

@@ -0,0 +1,115 @@
+import QtQuick 2.15
+import QtQuick.Controls.Basic 2.15
+import QtQuick.Layouts 2.15
+import "../../themes"
+import "../../components"
+
+Button {
+    id: timePickerButton
+
+    property string amText: qsTr("AM")
+    property string pmText: qsTr("PM")
+    property string hourText: qsTr("hour")
+    property string minuteText: qsTr("minute")
+
+    // 是否使用24小时制
+    property bool use24Hour: false
+
+    property alias hour: pickerView.value1
+    property alias minute: pickerView.value2
+    property alias hourSystem: pickerView.value3
+
+    implicitWidth: 250
+    padding: 0
+
+    // 获取 / 设置时间 // Get / Set time (hh:mm)
+    // 获取 / 设置时间 (hh:mm)
+    property string time: {
+        if (!pickerView.gotData) return ""
+        let h = parseInt(hour)
+        if (!use24Hour) {
+            if (hourSystem === pmText && h < 12) h += 12
+            if (hourSystem === amText && h === 12) h = 0
+        }
+        let hh = h < 10 ? "0" + h : "" + h
+        let mm = parseInt(minute)
+        let mmStr = mm < 10 ? "0" + mm : "" + mm
+        return hh + ":" + mmStr
+    }
+
+    function setTime(hhmm) {
+        if (!hhmm || typeof hhmm !== "string" || !hhmm.match(/^\d{2}:\d{2}$/)) return
+
+        let parts = hhmm.split(":")
+        let h = parseInt(parts[0])
+        let m = parseInt(parts[1])
+
+        if (h >= 0 && h < 24 && m >= 0 && m < 60) {
+            if (use24Hour) {
+                pickerView.value1 = h.toString()
+                pickerView.value2 = m.toString()
+                pickerView.value3 = undefined
+            } else {
+                pickerView.value1 = ((h % 12 === 0) ? 12 : h % 12).toString()
+                pickerView.value2 = m.toString()
+                pickerView.value3 = h >= 12 ? pmText : amText
+            }
+            pickerView.gotData = true
+        }
+    }
+
+    // 重写按钮结果
+    contentItem: RowLayout {
+        anchors.fill: parent
+        spacing: 0
+
+        Text {
+            Layout.fillWidth: true
+            Layout.maximumWidth: use24Hour ? timePickerButton.implicitWidth / 2 : timePickerButton.implicitWidth / 3
+            color: pickerView.gotData ? Theme.currentTheme.colors.textColor
+                : Theme.currentTheme.colors.textSecondaryColor
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+
+            text: pickerView.gotData ? pickerView.value1 : hourText
+        }
+        ToolSeparator {
+            implicitHeight: 32
+        }
+        Text {
+            Layout.fillWidth: true
+            Layout.maximumWidth: use24Hour ? timePickerButton.implicitWidth / 2 : timePickerButton.implicitWidth / 3
+            color: pickerView.gotData ? Theme.currentTheme.colors.textColor
+                : Theme.currentTheme.colors.textSecondaryColor
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+
+            text: pickerView.gotData ? pickerView.value2 : minuteText
+        }
+        ToolSeparator {
+            implicitHeight: 32
+            visible: !use24Hour
+        }
+        Text {
+            Layout.fillWidth: true
+            Layout.maximumWidth: timePickerButton.implicitWidth / 3
+            color: pickerView.gotData ? Theme.currentTheme.colors.textColor
+                : Theme.currentTheme.colors.textSecondaryColor
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+
+            text: pickerView.gotData ? pickerView.value3 : amText
+            visible: !use24Hour
+        }
+    }
+
+    onClicked: pickerView.open()
+
+    PickerView {
+        id: pickerView
+        width: parent.width
+
+        model1: use24Hour ? 24 : 12
+        model3: use24Hour ? undefined : [amText, pmText]
+    }
+}

RinUI/components/DialogsAndFlyouts/Dialog.qml

@@ -0,0 +1,106 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 2.15
+import "../../themes"
+import "../../components"
+
+
+Dialog {
+    id: root
+
+    property bool titleBarVisible: false
+
+    anchors.centerIn: Overlay.overlay  // Center in the overlay
+    closePolicy: Popup.NoAutoClose  // 更符合fds规范
+
+    padding: 24
+    topPadding: 24
+    bottomPadding: 24
+    implicitWidth: Math.max(Utils.dialogMinimumWidth, Math.min(implicitContentWidth + 48, Utils.dialogMaximumWidth))
+
+    contentItem: ColumnLayout {
+        spacing: 12
+        Text {
+            Layout.fillWidth: true
+            typography: Typography.Subtitle
+            text: root.title
+        }
+    }
+
+
+    header: Item {}
+
+    // 定制footer
+    footer: DialogButtonBox {
+        id: buttonBox
+        standardButtons: root.standardButtons
+    }
+
+    background: Rectangle {
+        id: background
+        anchors.fill: parent
+        color: Theme.currentTheme.colors.backgroundAcrylicColor
+        border.color: Theme.currentTheme.colors.windowBorderColor
+        border.width: 1
+        radius: Theme.currentTheme.appearance.windowRadius
+
+        Behavior on color {
+            ColorAnimation {
+                duration: Utils.backdropEnabled ? 0 : 150
+            }
+        }
+
+        layer.enabled: true
+        layer.effect: Shadow {
+            style: "dialog"
+            source: background
+        }
+    }
+
+    Overlay.modal: Rectangle {
+        color: Theme.currentTheme.colors.backgroundSmokeColor
+    }
+
+    // 动画 / Animation //
+    enter: Transition {
+        ParallelAnimation {
+            NumberAnimation {
+                target: root
+                property: "opacity"
+                from: 0
+                to: 1
+                duration: Utils.appearanceSpeed
+                easing.type: Easing.InOutQuart
+            }
+            NumberAnimation {
+                target: root
+                property: "scale"
+                from: 1.1
+                to: 1
+                duration: Utils.animationSpeedMiddle
+                easing.type: Easing.OutQuint
+            }
+        }
+    }
+
+    exit: Transition {
+        ParallelAnimation {
+            NumberAnimation {
+                target: root
+                property: "opacity"
+                from: 1
+                to: 0
+                duration: 100
+                easing.type: Easing.InOutQuart
+            }
+            NumberAnimation {
+                target: root
+                property: "scale"
+                from: 1
+                to: 1.1
+                duration: Utils.animationSpeedMiddle
+                easing.type: Easing.OutQuint
+            }
+        }
+    }
+}

RinUI/components/DialogsAndFlyouts/DialogButtonBox.qml

@@ -0,0 +1,47 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 2.15
+import "../../components"
+
+
+DialogButtonBox {
+    id: buttonBox
+
+    implicitWidth: 320
+
+    background: Rectangle {
+        anchors.fill: parent
+        color: Theme.currentTheme.colors.backgroundColor
+        border.color: Theme.currentTheme.colors.windowBorderColor
+        radius: Theme.currentTheme.appearance.windowRadius
+
+        Rectangle {
+            anchors.top: parent.top
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.margins: 1
+            height: parent.radius
+            color: parent.color
+        }
+    }
+
+    padding: 24
+    spacing: 8
+
+    alignment: undefined
+
+    contentItem: RowLayout {
+        spacing: buttonBox.spacing
+
+        Repeater {
+            model: buttonBox.contentModel
+        }
+    }
+
+    delegate: Button {
+        Layout.alignment: Qt.AlignRight
+        Layout.preferredWidth: buttonBox.availableWidth / 2
+        Layout.fillWidth: !(buttonBox.count === 1)
+        highlighted: DialogButtonBox.buttonRole === DialogButtonBox.AcceptRole  // 高亮
+    }
+}

RinUI/components/DialogsAndFlyouts/Flyout.qml

@@ -0,0 +1,144 @@
+import QtQuick 2.15
+import QtQuick.Controls.Basic 2.15
+import QtQuick.Layouts 2.15
+import Qt5Compat.GraphicalEffects
+import "../../themes"
+import "../../components"
+
+Popup {
+    id: flyout
+    property string text: "Flyout"
+    property alias buttonBox: buttonLayout.data  // 按钮列表
+    property string image: ""  // 图片
+    property real maximumWidth: 350  // 最大宽度
+
+    position: Position.Top
+
+    padding: 16
+
+    // 坐标
+
+    contentItem: ColumnLayout {
+        spacing: 0
+
+        Image {
+            id: flyoutImg
+            Layout.fillWidth: true
+            Layout.maximumWidth: maximumWidth
+            Layout.margins: -flyout.padding + 2
+            Layout.bottomMargin: 0
+            Layout.preferredHeight: width * (sourceSize.height / sourceSize.width)
+            fillMode: Image.PreserveAspectCrop
+            source: flyout.image
+            visible: flyout.image !== ""
+
+            layer.enabled: true
+            layer.smooth: true
+            layer.effect: OpacityMask {
+            maskSource: Rectangle {
+                width: flyoutImg.width
+                height: flyoutImg.height
+                radius: background.radius
+                color: "black"
+
+                Rectangle {
+                    anchors.bottom: parent.bottom
+                    width: parent.width
+                    height: background.radius
+                    color: "black"
+                }
+            }
+        }
+        }
+
+        Item {
+            height: 16
+            visible: flyoutImg.visible
+        }
+
+        Text {
+            id: flyoutText
+            Layout.fillWidth: true
+            Layout.maximumWidth: maximumWidth
+            typography: Typography.Body
+            text: flyout.text
+        }
+
+        Item {
+            height: 16
+            visible: buttonLayout.children.length > 0
+        }
+
+        RowLayout {
+            Layout.fillWidth: true
+            id: buttonLayout
+            spacing: 8
+        }
+    }
+
+    // background: Rectangle {
+    //     id: background
+    //     anchors.fill: parent
+    //     anchors.horizontalCenter: parent.horizontalCenter
+    //     y: -6
+    //
+    //     radius: Theme.currentTheme.appearance.windowRadius
+    //     color: Theme.currentTheme.colors.backgroundAcrylicColor
+    //     border.color: Theme.currentTheme.colors.flyoutBorderColor
+    //
+    //     Behavior on color {
+    //         ColorAnimation {
+    //             duration: Utils.appearanceSpeed
+    //             easing.type: Easing.OutQuart
+    //         }
+    //     }
+    //
+    //     layer.enabled: true
+    //     layer.effect: Shadow {
+    //         style: "flyout"
+    //         source: background
+    //     }
+    // }
+
+    // 动画 / Animation //
+    enter: Transition {
+        ParallelAnimation {
+            NumberAnimation {
+                target: flyout
+                property: "opacity"
+                from: 0
+                to: 1
+                duration: Utils.appearanceSpeed
+                easing.type: Easing.OutQuint
+            }
+            NumberAnimation {
+                target: flyout
+                property: "y"
+                from: posY + (position === Position.Top ? 15 : position === Position.Bottom ? -15 : 0)
+                to: posY
+                duration: Utils.animationSpeedMiddle * 1.25
+                easing.type: Easing.OutQuint
+            }
+            NumberAnimation {
+                target: flyout
+                property: "x"
+                from: posX + (position === Position.Left ? 15 : position === Position.Right ? -15 : 0)
+                to: posX
+                duration: Utils.animationSpeedMiddle * 1.25
+                easing.type: Easing.OutQuint
+            }
+        }
+    }
+    exit: Transition {
+        ParallelAnimation {
+            NumberAnimation {
+                target: flyout
+                property: "opacity"
+                from: 1
+                to: 0
+                duration: Utils.animationSpeed
+                easing.type: Easing.OutQuint
+            }
+        }
+    }
+}