[+] add Search

src/logic/util.rs

@@ -9,7 +9,7 @@ use cutil::{
     rand::{self, Rng},
     time,
 };
-use slint::{ComponentHandle, Model, SharedString, VecModel};
+use slint::{ComponentHandle, Model, ModelRc, SharedString, VecModel};
 use std::str::FromStr;
 use webbrowser::{self, Browser};
 
@@ -171,6 +171,20 @@ pub fn init(ui: &AppWindow) {
             items.push(text);
         });
 
+    ui.global::<Util>()
+        .on_search_str_items_by(move |items, text| {
+            if text.is_empty() {
+                return ModelRc::default();
+            }
+
+            let items = items
+                .iter()
+                .filter(|item| item.to_lowercase().contains(text.to_lowercase().as_str()))
+                .collect::<Vec<SharedString>>();
+
+            ModelRc::new(VecModel::from_slice(&items[..]))
+        });
+
     ui.global::<Util>()
         .on_format_number_with_commas(move |number_str| {
             number::format_number_with_commas(number_str.as_str()).into()

ui/base/collapse.slint

@@ -17,7 +17,7 @@ export component Collapse inherits Rectangle {
 
     in-out property <color> title-color: Theme.primary-text-color;
     in-out property <length> title-font-size: Theme.title3-font-size;
-    in-out property <int> title-font-weight: 700;
+    in-out property <int> title-font-weight: Theme.bold-font-weight;
 
     in-out property <length> description-font-size: Theme.default-font-size;
     in-out property <color> description-color: Theme.regular-text-color;
@@ -48,6 +48,7 @@ export component Collapse inherits Rectangle {
                     padding-bottom: root.vpadding;
 
                     lb := Label {
+                        overflow: elide;
                         text: entry.title;
                         font-size: root.title-font-size;
                         color: entry.disabled ? Theme.disabled-color : root.title-color;

ui/base/search.slint

@@ -0,0 +1,124 @@
+import { ComponentPosition } from "def.slint";
+import { Theme, Icons } from "../theme.slint";
+import { Logic } from "../logic.slint";
+import { Util } from "../util.slint";
+import { LineInput } from "line-input.slint";
+import { Label } from "label.slint";
+
+export component Search inherits Rectangle {
+    in-out property text <=> input.text;
+
+    in-out property <[string]> values;
+    in-out property <bool> enabled-popup: false;
+    in-out property <length> popup-max-height: 300px;
+    in-out property <ComponentPosition> popup-position: ComponentPosition.Bottom;
+
+    in-out property <length> font-size: Theme.default-font-size;
+    in-out property <length> hpadding: Theme.padding * 3;
+    in-out property <length> vpadding: Theme.padding * 3;
+    in-out property <length> spacing: Theme.spacing * 2;
+
+    private property <[string]> matched-values;
+    private property <bool> is-show-popup;
+
+    callback search(string);
+    callback edited(string);
+
+    function inner-search(text: string) {
+        if (text == "") {
+            root.is-show-popup = false;
+            return;
+        }
+
+        matched-values = Util.search-str-items-by(root.values, text);
+        if (matched-values.length > 0) {
+            root.is-show-popup = true;
+        } else {
+            root.is-show-popup = false;
+        }
+    }
+
+    preferred-width: 300px;
+    height: input.preferred-height;
+    background: Theme.base-background;
+    border-radius: Theme.border-radius;
+    border-color: Theme.focus-color;
+
+    fs := FocusScope {}
+
+    input := LineInput {
+        is-show-icon: true;
+        icon: Icons.search;
+        placeholder-text: Logic.tr("Search");
+        border-radius: root.border-radius;
+        font-size: root.font-size;
+
+        clicked => {
+            root.search(self.text);
+        }
+
+        accepted => {
+            root.search(self.text);
+        }
+
+        edited => {
+            if (root.enabled-popup) {
+                root.inner-search(self.text);
+            }
+
+            root.edited(self.text);
+        }
+    }
+
+    if root.enabled-popup && root.is-show-popup: pop := Rectangle {
+        y: root.popup-position == ComponentPosition.Top ? -pop.height - Theme.padding : root.height + Theme.padding;
+        height: Math.min(root.popup-max-height, input.preferred-height * root.matched-values.length + Theme.padding * 2);
+
+        background: Theme.base-background;
+        border-width: 1px;
+        border-color: Theme.base-border-color;
+        border-radius: Theme.border-radius;
+
+        Flickable {
+            width: pop.width - 2px;
+            height: pop.height;
+            viewport-height: pop.height;
+
+            for value[index] in root.matched-values: Rectangle {
+                y: Theme.padding + pop-hbox.preferred-height * index;
+                height: pop-hbox.preferred-height;
+                background: pop-ta.has-hover ? Theme.hover-background : Theme.base-background;
+
+                init => {
+                    parent.viewport-height = self.y + self.height + Theme.padding;
+                }
+
+                pop-hbox := HorizontalLayout {
+                    alignment: LayoutAlignment.space-between;
+                    padding-left: root.hpadding;
+                    padding-right: root.hpadding;
+                    padding-top: root.vpadding;
+                    padding-bottom: root.vpadding;
+                    spacing: Theme.spacing * 2;
+
+                    pop-lb := Label {
+                        overflow: elide;
+                        text: value;
+                        font-size: root.font-size;
+                        color: Theme.primary-text-color;
+                    }
+                }
+
+                pop-ta := TouchArea {
+                    clicked => {
+                        root.text = value;
+                        root.search(value);
+                        root.is-show-popup = false;
+
+                        fs.focus();
+                    }
+                }
+            }
+        }
+    }
+}

ui/base/widgets.slint

@@ -66,6 +66,7 @@ import { Badge } from "badge.slint";
 import { Select } from "select.slint";
 import { Slider } from "slider.slint";
 import { Collapse, CollapseEntry } from "collapse.slint";
+import { Search } from "search.slint";
 
 export {
     AppPosType,
@@ -166,5 +167,6 @@ SwitchBtn,
     Select,
     Slider,
     Collapse,
-    CollapseEntry
+    CollapseEntry,
+    Search
 }

ui/panel/desktop/panel.slint

@@ -2,7 +2,7 @@ import { Theme, Store, TabIndex, SettingDetailIndex, Logic, Icons } from "../def
 import { SettingDialog, AboutDialog, SettingIconsBar } from "../setting/desktop.slint";
 import { Blanket, StatusBar, Divider, AboutSetting, ToolTip, ToolTipSetting } from "../../base/widgets.slint";
 
-import { ProcessStep, CircleProgress, RecordIndicator, ProgressBar,  ComponentPosition, Pagination, SkeletonType, Skeleton, PinCodes, Badge, Banner, CheckBtn, Select, ComponentPosition, Slider, CollapseEntry, Collapse } from "../../base/widgets.slint";
+import { ProcessStep, CircleProgress, RecordIndicator, ProgressBar,  ComponentPosition, Pagination, SkeletonType, Skeleton, PinCodes, Badge, Banner, CheckBtn, Select, ComponentPosition, Slider, CollapseEntry, Collapse, Search } from "../../base/widgets.slint";
 import { Util } from "../../util.slint";
 
 export component DesktopPanel inherits Rectangle {
@@ -58,25 +58,21 @@ export component DesktopPanel inherits Rectangle {
 
                 HorizontalLayout {
                     alignment: center;
+                    height: 500px;
 
-                    Collapse {
-                        is-accordion: true;
-                        entries: [
-                            {
-                                disabled: true,
-                                title: "This is panel header 1",
-                                description: "Hi, bytedance dance dance. This is the docsite of Semi UI.",
-                                is-open: true
-                            },
-                            {
-                                title: "This is panel header 2",
-                                description: "Hi, bytedance dance dance. This is the docsite of Semi UI.",
-                            },
-                            {
-                                title: "This is panel header 3",
-                                description: "Hi, bytedance dance dance. This is the docsite of Semi UI.",
-                            },
-                        ];
+                    Search {
+                        width: 500px;
+                        values: ["Hello", "World", "Nice", "Good"];
+                        // popup-position: ComponentPosition.Top;
+                        enabled-popup: true;
+
+                        search(text) => {
+                            debug(text);
+                        }
+
+                        edited(text) => {
+                            debug(text);
+                        }
                     }
                 }
             }

ui/theme.slint

@@ -23,6 +23,9 @@ export global Theme {
     in-out property <length> title2-font-size: default-font-size + 6px;
     in-out property <length> title1-font-size: default-font-size + 8px;
 
+    in-out property <int> normal-font-weight: 400;
+    in-out property <int> bold-font-weight: 700;
+
     out property <length> icon-size: Math.max(24px, default-font-size + 8px);
     out property <length> avatar-size: icon-size + Theme.padding * 2;
     out property <duration> default-animate-duration: 200ms;

ui/util.slint

@@ -38,6 +38,11 @@ export global Util {
 
     callback append-str-to-items([string], string);
 
+    callback search-str-items-by([string], string) -> [string];
+    search-str-items-by(items, text) => {
+        return items;
+    }
+
     pure callback text-len(string) -> int;
 
     // (low-bound, up-bound) => void