@ticatec/uniface-element 0.3.21 → 0.3.22

package/dist/options-select/OptionsSelect.svelte

@@ -3,8 +3,8 @@
     import {DisplayMode} from "../common/DisplayMode";
     import type {OnChangeHandler} from "../common/OnChangeHandler";
     import CommonPicker from "../common/CommonPicker.svelte";
-    import {tick} from "svelte";
     import type {OnSelectedHandler} from "../common/OnSelectedHandler";
+    import SearchBox from "../search-box/SearchBox.svelte";
 
     export let variant: '' | 'plain' | 'outlined' | 'filled' = '';
     export let disabled: boolean = false;
@@ -28,9 +28,35 @@
     export let onblur: (() => void) | null = null;
     export let onSelected: OnSelectedHandler = null as unknown as OnSelectedHandler;
 
+    // Quick filter properties
+    export let quickFilter: boolean = false;
+    export let quickFilterPlaceholder: string = "Search...";
+    export let filterFunction: ((option: any, keyword: string) => boolean) | null = null;
+    export let noResultsText: string = "No results found";
+
+    let searchKeyword: string = '';
+    let searchBox: any;
+
+    const handleSearchInput = (value: string | null) => {
+        searchKeyword = value ?? '';
+        filteredOptions = getFilteredOptions();
+    };
+
+
+    const generateText = (v: string): string => {
+        let item = (options || []).find(el => el[keyField] == value);
+        return item == null ? (emptyText ?? '') : item[textField];
+    }
+
+    const defaultFilterFunction = (option: any, keyword: string): boolean => {
+        if (!keyword || keyword.length === 0) return true;
+        const text = String(option[textField] || '').toLowerCase();
+        return text.includes(keyword.toLowerCase());
+    }
+
 
     export const setFocus = () => {
-        setTimeout(()=> {
+        setTimeout(() => {
             editor && editor.focus();
         }, 50);
     }
@@ -40,12 +66,21 @@
     let oldValue = value;
     let showPopup: boolean = false;
     let mh;
-    let popupContainer: HTMLElement;
     let hasFocus: boolean = false;
 
-    const generateText = (v: string): string => {
-        let item = (options || []).find(el => el[keyField] == value);
-        return item == null ? (emptyText ?? '') : item[textField];
+    const getFilteredOptions = () => {
+        if (searchKeyword.trim() == '') {
+            return [...options]
+        } else {
+            const filterFn = filterFunction || defaultFilterFunction;
+            return (options || []).filter(op => filterFn(op, searchKeyword));
+        }
+    }
+
+    const focusSearchBox = () => {
+        setTimeout(() => {
+            searchBox?.focus();
+        }, 50);
     }
 
     const openPopup = () => {
@@ -67,6 +102,8 @@
 
     $: textValue = generateText(value);
 
+    $: filteredOptions = quickFilter ? getFilteredOptions() : (options || []);
+
     $: mh = `height: ${menu$height > 0 ? menu$height + 'px' : 'auto'}`;
 
     $: if (value != oldValue) {
@@ -75,7 +112,11 @@
     }
 
     $: if (showPopup) {
-        editor.focus();
+        if (quickFilter) {
+            focusSearchBox();
+        } else {
+            editor.focus();
+        }
     }
 
     // 监听popup关闭，如果是点击外部关闭且之前有焦点，触发blur
@@ -90,7 +131,7 @@
     }
 
     const handleKeyDown = (event: KeyboardEvent) => {
-        if (event.key=='Tab') {
+        if (event.key == 'Tab') {
             showPopup = false;
         }
     }
@@ -111,6 +152,7 @@
         // 如果popup打开，不触发blur，让popup关闭时处理
     }
 
+    let filterText: string | null = null;
 </script>
 
 <CommonPicker {displayMode} {variant} {style} {compact} dropDownIcon="icon_google_arrow_drop_down"
@@ -119,19 +161,36 @@
     <input style="width: 100%" bind:this={editor} on:click={openPopup} {placeholder} readonly
            class="text-editor" bind:value={textValue} on:blur={handleBlur} on:focus={handleFocus} on:keydown={handleKeyDown}/>
 
-    <div class="options-popover" style={mh} slot="popup-panel" bind:this={popupContainer}>
-        {#each options as op}
-            {#if hideOptions.indexOf(op[keyField]) < 0}
-                {#if itemRender != null}
-                    <svelte:component this={itemRender.component} {...itemRender.props} item={op} disabled={disableOptions.indexOf(op[keyField])>-1}
-                                      on:click={handleItemClick(op)}/>
-                {:else}
-                    <div class="option-item" class:disabled={disableOptions.indexOf(op[keyField])>-1} aria-hidden="true"
-                         on:click={handleItemClick(op)}>
-                        <span>{op[textField]}</span>
-                    </div>
+    <div class="options-popover" style={mh} slot="popup-panel">
+        {#if quickFilter}
+            <div class="quick-filter-box">
+                <SearchBox
+                        bind:value={filterText}
+                        bind:this={searchBox}
+                        oninput={handleSearchInput}
+                        placeholder={quickFilterPlaceholder}
+                />
+            </div>
+        {/if}
+        {#if filteredOptions.length === 0}
+            <div class="no-results">
+                <span>{noResultsText}</span>
+            </div>
+        {:else}
+            {#each filteredOptions as op}
+                {#if hideOptions.indexOf(op[keyField]) < 0}
+                    {#if itemRender != null}
+                        <svelte:component this={itemRender.component} {...itemRender.props} item={op}
+                                          disabled={disableOptions.indexOf(op[keyField])>-1}
+                                          on:click={handleItemClick(op)}/>
+                    {:else}
+                        <div class="option-item" class:disabled={disableOptions.indexOf(op[keyField])>-1} aria-hidden="true"
+                             on:click={handleItemClick(op)}>
+                            <span>{op[textField]}</span>
+                        </div>
+                    {/if}
                 {/if}
-            {/if}
-        {/each}
+            {/each}
+        {/if}
     </div>
 </CommonPicker>

package/dist/options-select/OptionsSelect.svelte.d.ts

@@ -36,6 +36,10 @@ declare const OptionsSelect: $$__sveltets_2_IsomorphicComponent<{
     onfocus?: (() => void) | null;
     onblur?: (() => void) | null;
     onSelected?: OnSelectedHandler;
+    quickFilter?: boolean;
+    quickFilterPlaceholder?: string;
+    filterFunction?: ((option: any, keyword: string) => boolean) | null;
+    noResultsText?: string;
     setFocus?: () => void;
 }, {
     [evt: string]: CustomEvent<any>;

package/dist/options-select/README.md

@@ -9,7 +9,7 @@ A single-selection dropdown component that allows users to select one option fro
 - **Option Control**: Hide or disable specific options
 - **Custom Rendering**: Use custom components to render dropdown items
 - **Mandatory Mode**: Prevent clearing of selected values
-- **Search Integration**: Works with CommonPicker for consistent behavior
+- **Quick Filter**: Built-in search/filter functionality for large option lists
 - **Focus Management**: Proper focus handling and keyboard navigation
 - **Display Modes**: Support for edit and view modes
 - **Empty State Handling**: Customizable placeholder and empty text
@@ -64,6 +64,10 @@ npm install @ticatec/uniface-element
 | `displayMode` | `DisplayMode` | `DisplayMode.Edit` | Edit or view mode |
 | `menu$height` | `number` | `0` | Maximum height of dropdown menu |
 | `itemRender` | `any` | `null` | Custom component for rendering items |
+| `quickFilter` | `boolean` | `false` | Enable quick filter/search in dropdown |
+| `quickFilterPlaceholder` | `string` | `'Search...'` | Placeholder text for search input |
+| `filterFunction` | `(option: any, keyword: string) => boolean` | `null` | Custom filter function |
+| `noResultsText` | `string` | `'No results found'` | Text when no options match filter |
 | `onchange` | `OnChangeHandler<any>` | `null` | Change event handler |
 | `onfocus` | `(() => void) \| null` | `null` | Focus event handler |
 | `onblur` | `(() => void) \| null` | `null` | Blur event handler |
@@ -183,11 +187,11 @@ npm install @ticatec/uniface-element
   let preferredLanguage = null;
   let languages = [
     { locale: 'en', display: 'English' },
-    { locale: 'es', display: 'Espa�ol' },
-    { locale: 'fr', display: 'Fran�ais' },
+    { locale: 'es', display: 'Espa�ol' },
+    { locale: 'fr', display: 'Fran�ais' },
     { locale: 'de', display: 'Deutsch' },
-    { locale: 'zh', display: '-�' },
-    { locale: 'ja', display: '�,�' }
+    { locale: 'zh', display: '-�' },
+    { locale: 'ja', display: '�,�' }
   ];
   
   function handleLanguageChange(locale) {
@@ -437,11 +441,78 @@ npm install @ticatec/uniface-element
 </table>
 ```
 
-### Dynamic Options Loading
+### Quick Filter for Large Lists
+
+When dealing with many options, enable the built-in quick filter:
 
 ```svelte
 <script>
   import OptionsSelect from '@ticatec/uniface-element/OptionsSelect';
+
+  let selectedCountry = null;
+  let countries = [
+    { code: 'US', name: 'United States' },
+    { code: 'CA', name: 'Canada' },
+    { code: 'UK', name: 'United Kingdom' },
+    { code: 'DE', name: 'Germany' },
+    { code: 'FR', name: 'France' },
+    { code: 'JP', name: 'Japan' },
+    { code: 'CN', name: 'China' },
+    { code: 'AU', name: 'Australia' },
+    // ... many more countries
+  ];
+</script>
+
+<OptionsSelect
+  options={countries}
+  keyField="code"
+  textField="name"
+  bind:value={selectedCountry}
+  variant="outlined"
+  placeholder="Select country"
+  quickFilter={true}
+  quickFilterPlaceholder="Type to search countries..."
+/>
+```
+
+### Custom Filter Function
+
+Provide a custom filter function for advanced filtering:
+
+```svelte
+<script>
+  import OptionsSelect from '@ticatec/uniface-element/OptionsSelect';
+
+  let selectedProduct = null;
+  let products = [
+    { sku: 'LAPTOP-001', name: 'Laptop', category: 'Electronics' },
+    { sku: 'PHONE-002', name: 'Smartphone', category: 'Electronics' },
+    { sku: 'SHIRT-003', name: 'T-Shirt', category: 'Clothing' },
+    { sku: 'PANTS-004', name: 'Jeans', category: 'Clothing' }
+  ];
+
+  const productFilter = (option, keyword) => {
+    if (!keyword) return true;
+    const search = keyword.toLowerCase();
+    return option.name.toLowerCase().includes(search) ||
+           option.sku.toLowerCase().includes(search) ||
+           option.category.toLowerCase().includes(search);
+  };
+</script>
+
+<OptionsSelect
+  options={products}
+  keyField="sku"
+  textField="name"
+  bind:value={selectedProduct}
+  quickFilter={true}
+  filterFunction={productFilter}
+  quickFilterPlaceholder="Search products..."
+  noResultsText="No matching products found"
+/>
+```
+
+### Dynamic Options Loading
   
   let selectedCategory = null;
   let selectedProduct = null;
@@ -531,7 +602,7 @@ You can provide a custom component to render dropdown items:
 </script>
 
 <div class="custom-item" class:disabled on:click={handleClick}>
-  <div class="item-icon"><�</div>
+  <div class="item-icon"><�</div>
   <div class="item-content">
     <div class="item-title">{item.title}</div>
     <div class="item-description">{item.description}</div>

package/dist/options-select/README_CN.md

@@ -9,7 +9,7 @@
 - **选项控制**：隐藏或禁用特定选项
 - **自定义渲染**：使用自定义组件渲染下拉项
 - **必填模式**：防止清除已选值
-- **搜索集成**：与 CommonPicker 配合使用，提供一致的行为
+- **快速过滤**：内置搜索/过滤功能，适用于大量选项
 - **焦点管理**：适当的焦点处理和键盘导航
 - **显示模式**：支持编辑和查看模式
 - **空状态处理**：可自定义的占位符和空文本
@@ -64,6 +64,10 @@ npm install @ticatec/uniface-element
 | `displayMode` | `DisplayMode` | `DisplayMode.Edit` | 编辑或查看模式 |
 | `menu$height` | `number` | `0` | 下拉菜单的最大高度 |
 | `itemRender` | `any` | `null` | 用于渲染选项的自定义组件 |
+| `quickFilter` | `boolean` | `false` | 启用快速过滤/搜索 |
+| `quickFilterPlaceholder` | `string` | `'Search...'` | 搜索输入框的占位符文本 |
+| `filterFunction` | `(option: any, keyword: string) => boolean` | `null` | 自定义过滤函数 |
+| `noResultsText` | `string` | `'No results found'` | 无匹配结果时显示的文本 |
 | `onchange` | `OnChangeHandler<any>` | `null` | 更改事件处理程序 |
 | `onfocus` | `(() => void) \| null` | `null` | 聚焦事件处理程序 |
 | `onblur` | `(() => void) \| null` | `null` | 失焦事件处理程序 |
@@ -437,6 +441,77 @@ npm install @ticatec/uniface-element
 </table>
 ```
 
+### 快速过滤（大量选项）
+
+当选项很多时，可以启用内置的快速过滤功能：
+
+```svelte
+<script>
+  import OptionsSelect from '@ticatec/uniface-element/OptionsSelect';
+
+  let selectedCountry = null;
+  let countries = [
+    { code: 'US', name: '美国' },
+    { code: 'CA', name: '加拿大' },
+    { code: 'UK', name: '英国' },
+    { code: 'DE', name: '德国' },
+    { code: 'FR', name: '法国' },
+    { code: 'JP', name: '日本' },
+    { code: 'CN', name: '中国' },
+    { code: 'AU', name: '澳大利亚' },
+    // ... 更多国家
+  ];
+</script>
+
+<OptionsSelect
+  options={countries}
+  keyField="code"
+  textField="name"
+  bind:value={selectedCountry}
+  variant="outlined"
+  placeholder="选择国家"
+  quickFilter={true}
+  quickFilterPlaceholder="输入搜索国家..."
+/>
+```
+
+### 自定义过滤函数
+
+提供自定义过滤函数以实现高级过滤：
+
+```svelte
+<script>
+  import OptionsSelect from '@ticatec/uniface-element/OptionsSelect';
+
+  let selectedProduct = null;
+  let products = [
+    { sku: 'LAPTOP-001', name: '笔记本电脑', category: '电子产品' },
+    { sku: 'PHONE-002', name: '智能手机', category: '电子产品' },
+    { sku: 'SHIRT-003', name: 'T恤', category: '服装' },
+    { sku: 'PANTS-004', name: '牛仔裤', category: '服装' }
+  ];
+
+  const productFilter = (option, keyword) => {
+    if (!keyword) return true;
+    const search = keyword.toLowerCase();
+    return option.name.toLowerCase().includes(search) ||
+           option.sku.toLowerCase().includes(search) ||
+           option.category.toLowerCase().includes(search);
+  };
+</script>
+
+<OptionsSelect
+  options={products}
+  keyField="sku"
+  textField="name"
+  bind:value={selectedProduct}
+  quickFilter={true}
+  filterFunction={productFilter}
+  quickFilterPlaceholder="搜索产品..."
+  noResultsText="未找到匹配的产品"
+/>
+```
+
 ### 动态选项加载
 
 ```svelte

package/dist/ticatec-uniface-web.css

@@ -1125,6 +1125,19 @@
   width: 20px;
 }
 
+.options-popover .quick-filter-box {
+  position: sticky;
+  top: 0;
+  background: white;
+  z-index: 1;
+}
+.options-popover .no-results {
+  padding: 12px 16px;
+  text-align: center;
+  color: #9e9e9e;
+  font-size: 14px;
+}
+
 .uniface-radio-button {
   display: inline-block;
   height: 26px;

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@ticatec/uniface-element",
-  "version": "0.3.21",
+  "version": "0.3.22",
   "description": "A comprehensive UI component library for Svelte applications with rich form controls, data tables, layouts and interactive elements",
   "keywords": [
     "svelte",
-    "svelte5", 
+    "svelte5",
     "ui",
     "components",
     "form",
@@ -381,6 +381,9 @@
     "@sveltejs/kit": "^2.60.1",
     "@sveltejs/package": "^2.5.7",
     "@sveltejs/vite-plugin-svelte": "^7.1.2",
+    "@ticatec/i18n": "^0.2.4",
+    "@ticatec/uniface-google-material-icons": "^0.1.8",
+    "dayjs": "^1.11.21",
     "eslint": "^10.4.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-svelte": "^3.17.1",
@@ -391,6 +394,7 @@
     "sass": "^1.99.0",
     "svelte": "^5.55.9",
     "svelte-check": "^4.4.8",
+    "svelte-portal": "^2.2.1",
     "svelte-preprocess": "^6.0.3",
     "tslib": "^2.8.1",
     "typescript": "^5.7.3",