Feat: 1.Gallery增加搜索功能; 2.来自[DelegateUI]的更新.

Author: mengps

DelegateUI_Qt5/gallery/qml/Examples/DataEntry/ExpAutoComplete.qml

@@ -21,17 +21,17 @@ Flickable {
 * **继承自 { DelInput }**\n
 支持的代理：\n
 - **labelDelegate: Component** 弹出框标签项代理，代理可访问属性：\n
-  - \`textData: var\` {textRole}对应的文本数据\n
-  - \`valueData: var\` {valueRole}对应的值数据\n
-  - \`modelData: var\` 选项模型数据\n
-  - \`hovered: bool\` 是否悬浮\n
-  - \`highlighted: bool\` 是否高亮\n
+  - \`parent.textData: var\` {textRole}对应的文本数据\n
+  - \`parent.valueData: var\` {valueRole}对应的值数据\n
+  - \`parent.modelData: var\` 选项模型数据\n
+  - \`parent.hovered: bool\` 是否悬浮\n
+  - \`parent.highlighted: bool\` 是否高亮\n
 - **labelBgDelegate: Component** 弹出框标签项背景代理，代理可访问属性：\n
-  - \`textData: var\` {textRole}对应的文本数据\n
-  - \`valueData: var\` {valueRole}对应的值数据\n
-  - \`modelData: var\` 选项模型数据\n
-  - \`hovered: bool\` 是否悬浮\n
-  - \`highlighted: bool\` 是否高亮\n
+  - \`parent.textData: var\` {textRole}对应的文本数据\n
+  - \`parent.valueData: var\` {valueRole}对应的值数据\n
+  - \`parent.modelData: var\` 选项模型数据\n
+  - \`parent.hovered: bool\` 是否悬浮\n
+  - \`parent.highlighted: bool\` 是否高亮\n
 - **clearIconDelegate: Component** 清除图标代理，等同于{DelInput.iconDelegate}\n
 支持的属性：\n
 属性名 | 类型 | 描述
@@ -43,7 +43,9 @@ valueRole | string | 弹出框值的模型角色。
 tooltipVisible | bool | 是否显示文字提示
 clearIconSource | enum | 清除图标源(来自 DelIcon)
 clearIconPosition | enum | 清除图标位置(来自 DelInput)
-defaulPopupMaxHeight | color | 默认弹出框最大高度
+clearIconSize | int | 清除图标大小
+defaultPopupMaxHeight | int | 默认弹出框最大高度
+defaultOptionSpacing | int | 默认选项间隔
 \n支持的函数：\n
 - \`clearInput()\` 清空输入 \n
 - \`openPopup()\` 打开弹出框 \n

DelegateUI_Qt5/gallery/qml/Gallery.qml

@@ -104,10 +104,119 @@ DelWindow {
         anchors.left: parent.left
         anchors.right: parent.right
 
+        DelAutoComplete {
+            id: searchComponent
+            property bool expanded: false
+            z: 10
+            clip: true
+            width: (!galleryMenu.compactMode || expanded) ? (galleryMenu.defaultMenuWidth - 20) : 0
+            anchors.top: parent.top
+            anchors.left: !galleryMenu.compactMode ? galleryMenu.left : galleryMenu.right
+            anchors.margins: 10
+            topPadding: 6
+            bottomPadding: 6
+            rightPadding: 50
+            placeholderText: qsTr('搜索组件')
+            colorBg: galleryMenu.compactMode ? DelTheme.DelInput.colorBg : 'transparent'
+            Component.onCompleted: {
+                let model = [];
+                for (let i = 0; i < galleryMenu.initModel.length; i++) {
+                    let item = galleryMenu.initModel[i];
+                    if (item && item.menuChildren) {
+                        for (let j = 0; j < item.menuChildren.length; j++) {
+                            let childItem = item.menuChildren[j];
+                            if (childItem && childItem.label) {
+                                model.push({
+                                               'key': childItem.key,
+                                               'value': childItem.key,
+                                               'label': childItem.label,
+                                           });
+                            }
+                        }
+                    }
+                }
+                model.sort((a, b) => a.key.localeCompare(b.key));
+                options = model;
+            }
+            filterOption: function(input, option){
+                return option.label.toUpperCase().indexOf(input.toUpperCase()) !== -1;
+            }
+            onSelect: function(option) {
+                galleryMenu.gotoMenu(option.key);
+            }
+            labelDelegate: Text {
+                height: implicitHeight + 4
+                text: parent.textData
+                color: DelTheme.DelAutoComplete.colorItemText
+                font {
+                    family: DelTheme.DelAutoComplete.fontFamily
+                    pixelSize: DelTheme.DelAutoComplete.fontSize
+                    weight: parent.highlighted ? Font.DemiBold : Font.Normal
+                }
+                elide: Text.ElideRight
+                verticalAlignment: Text.AlignVCenter
+            }
+            clearIconDelegate: Row {
+                spacing: 5
+
+                DelIconText {
+                    visible: searchComponent.length > 0
+                    iconSource: DelIcon.CloseSquareFilled
+                    iconSize: searchComponent.iconSize
+                    colorIcon: searchComponent.enabled ?
+                                   __iconMouse.hovered ? DelTheme.DelAutoComplete.colorIconHover :
+                                                         DelTheme.DelAutoComplete.colorIcon : DelTheme.DelAutoComplete.colorIconDisabled
+
+                    Behavior on colorIcon { enabled: searchComponent.animationEnabled; ColorAnimation { duration: DelTheme.Primary.durationFast } }
+
+                    MouseArea {
+                        id: __iconMouse
+                        anchors.fill: parent
+                        hoverEnabled: true
+                        cursorShape: parent.iconSource == searchComponent.clearIconSource ? Qt.PointingHandCursor : Qt.ArrowCursor
+                        onEntered: hovered = true;
+                        onExited: hovered = false;
+                        onClicked: searchComponent.clearInput();
+                        property bool hovered: false
+                    }
+                }
+
+                DelIconText {
+                    iconSource: DelIcon.SearchOutlined
+                    iconSize: searchComponent.iconSize
+                }
+            }
+
+            Behavior on width {
+                enabled: galleryMenu.compactMode && galleryMenu.width == galleryMenu.compactWidth
+                NumberAnimation { duration: DelTheme.Primary.durationFast }
+            }
+        }
+
+        DelIconButton {
+            id: searchCollapse
+            visible: galleryMenu.compactMode
+            anchors.top: parent.top
+            anchors.left: galleryMenu.left
+            anchors.right: galleryMenu.right
+            anchors.margins: 10
+            type: DelButton.Type_Text
+            colorText: DelTheme.Primary.colorTextBase
+            iconSource: DelIcon.SearchOutlined
+            iconSize: searchComponent.iconSize
+            onClicked: searchComponent.expanded = !searchComponent.expanded;
+            onVisibleChanged: {
+                if (visible) {
+                    searchComponent.closePopup();
+                    searchComponent.expanded = false;
+                }
+            }
+        }
+
         DelMenu {
             id: galleryMenu
             anchors.left: parent.left
-            anchors.top: parent.top
+            anchors.top: searchComponent.bottom
             anchors.bottom: aboutButton.top
             showEdge: true
             defaultMenuWidth: 300

DelegateUI_Qt5/src/imports/DelegateUI/Controls/DelAutoComplete.qml

@@ -15,8 +15,10 @@ DelInput {
     property string valueRole: 'value'
     property bool tooltipVisible: false
     property alias clearIconSource: control.iconSource
+    property alias clearIconSize: control.iconSize
     property alias clearIconPosition: control.iconPosition
-    property int defaulPopupMaxHeight: 240
+    property int defaultPopupMaxHeight: 240
+    property int defaultOptionSpacing: 0
 
     property Component labelDelegate: Text {
         text: textData
@@ -51,14 +53,17 @@ DelInput {
             cursorShape: parent.iconSource == control.clearIconSource ? Qt.PointingHandCursor : Qt.ArrowCursor
             onEntered: hovered = true;
             onExited: hovered = false;
-            property bool hovered: false
             onClicked: control.clearInput();
+            property bool hovered: false
         }
     }
 
     clearIconPosition: DelInput.Position_Right
     iconDelegate: clearIconDelegate
-    onOptionsChanged: __private.model = options;
+    onOptionsChanged: {
+        __popupListView.currentIndex = -1;
+        __private.model = options;
+    }
     onTextEdited: {
         control.search(text);
         __private.filter();
@@ -70,9 +75,8 @@ DelInput {
 
     function clearInput() {
         control.clear();
-        control.search('');
+        control.textEdited();
         __popupListView.currentIndex = -1;
-        closePopup();
     }
 
     function openPopup() {
@@ -103,7 +107,7 @@ DelInput {
     DelPopup {
         id: __popup
         implicitWidth: control.width
-        implicitHeight: Math.min(control.defaulPopupMaxHeight, __popupListView.contentHeight) + topPadding + bottomPadding
+        implicitHeight: Math.min(control.defaultPopupMaxHeight, __popupListView.contentHeight) + topPadding + bottomPadding
         leftPadding: 4
         rightPadding: 4
         topPadding: 6
@@ -144,6 +148,7 @@ DelInput {
             currentIndex: -1
             model: __private.model
             boundsBehavior: Flickable.StopAtBounds
+            spacing: control.defaultOptionSpacing
             delegate: T.ItemDelegate {
                 id: __popupDelegate
 
@@ -159,6 +164,7 @@ DelInput {
                 rightPadding: 8
                 topPadding: 4
                 bottomPadding: 4
+                highlighted: __popupListView.currentIndex === index
                 contentItem: Loader {
                     sourceComponent: control.labelDelegate
                     property alias textData: __popupDelegate.textData
@@ -175,7 +181,6 @@ DelInput {
                     property alias hovered: __popupDelegate.hovered
                     property alias highlighted: __popupDelegate.highlighted
                 }
-                highlighted: __popupListView.currentIndex === index
                 onClicked: {
                     control.select(__popupDelegate.modelData);
                     control.text = __popupDelegate.valueData;