@ticatec/uniface-element 0.3.20 → 0.3.22

package/dist/concise-data-table/DataRow.svelte.d.ts

@@ -18,7 +18,7 @@ declare const DataRow: $$__sveltets_2_IsomorphicComponent<{
     showAlternative: boolean;
     rowIndex?: number;
 }, {
-    click: MouseEvent;
+    click: PointerEvent;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;

package/dist/drawer/Drawer.svelte.d.ts

@@ -23,7 +23,7 @@ declare const Drawer: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWit
 }, {
     default: {};
 }>, {
-    click: MouseEvent;
+    click: PointerEvent;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {

package/dist/image-files/ImagePreview.svelte.d.ts

@@ -15,7 +15,7 @@ declare const ImagePreview: $$__sveltets_2_IsomorphicComponent<{
     src?: string;
     visible?: boolean;
 }, {
-    click: MouseEvent;
+    click: PointerEvent;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;

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

@@ -428,10 +428,6 @@
   background-color: var(--uniface-plain-hover-border-color, #b3d8ff);
 }
 
-.options-popover {
-  user-select: none;
-  max-height: 30vh;
-}
 .options-popover .more-indicator-footer {
   line-height: 24px;
   color: #B3BCCA;
@@ -448,6 +444,10 @@
   right: 0;
   color: rgba(255, 255, 255, 0.1254901961);
 }
+.options-popover {
+  user-select: none;
+  max-height: 30vh;
+}
 .options-popover .option-item {
   width: 100%;
   box-sizing: border-box;
@@ -791,7 +791,7 @@
   visibility: hidden;
   display: none;
 }
-.switch-box*, .switch-box::after, .switch-box::before {
+.switch-box, .switch-box::after, .switch-box::before {
   box-sizing: border-box;
 }
 .switch-box .switch {
@@ -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;
@@ -1354,7 +1367,6 @@
   transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
   border: none;
   outline: none;
-  /*普通按钮*/
 }
 .uniface-button.common-button.default, .uniface-button.icon-button.default {
   background-color: var(--uniface-button-plain-background-color, #f0f0f0);
@@ -1428,6 +1440,9 @@
   background-color: var(--uniface-disabled-button-color, #F1F5F9);
   color: var(--uniface-disabled-button-text-color, #B3BCCA);
 }
+.uniface-button {
+  /*普通按钮*/
+}
 .uniface-button.common-button {
   padding: 0 16px;
   border-radius: 4px;
@@ -3317,11 +3332,13 @@ root {
   color: var(--uniface-progress-step-pending-color, #B3BCCA);
   margin-left: 8px;
   background-color: inherit;
-  background: linear-gradient(to bottom, transparent 12px, var(--uniface-progress-step-pending-color, #B3BCCA) 12px, var(--uniface-progress-step-pending-color, #B3BCCA) 14px, transparent 14px);
 }
 .uniface-progress-step-container .progress-step-block:first-child {
   margin-left: 0;
 }
+.uniface-progress-step-container .progress-step-block {
+  background: linear-gradient(to bottom, transparent 12px, var(--uniface-progress-step-pending-color, #B3BCCA) 12px, var(--uniface-progress-step-pending-color, #B3BCCA) 14px, transparent 14px);
+}
 .uniface-progress-step-container .progress-step-block .step-indicator {
   flex: 0 0 auto;
   padding-right: 12px;
@@ -3917,17 +3934,17 @@ root {
   background-color: var(--uniface-data-table-bg, #ffffff);
   border-top: 1px solid var(--uniface-data-table-inline-border-color, rgba(225, 225, 225, 0.5019607843));
 }
-.uniface-data-table .left-fixed-panel {
-  z-index: 1;
-  border-right: 1px solid var(--uniface-data-table-inline-border-color, rgba(225, 225, 225, 0.5019607843));
-  box-shadow: var(--uniface-data-table-separator-shadow, rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px);
-}
 .uniface-data-table .left-fixed-panel .data-cell {
   flex: 0 0 auto;
 }
 .uniface-data-table .left-fixed-panel .data-cell:last-child {
   border-right: none;
 }
+.uniface-data-table .left-fixed-panel {
+  z-index: 1;
+  border-right: 1px solid var(--uniface-data-table-inline-border-color, rgba(225, 225, 225, 0.5019607843));
+  box-shadow: var(--uniface-data-table-separator-shadow, rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px);
+}
 .uniface-data-table .left-fixed-panel .indicator-cell {
   display: flex;
   flex-direction: row;
@@ -4271,13 +4288,15 @@ html {
   left: 0;
   width: 100%;
   height: 100%;
-  z-index: 100;
 }
 .uniface-mask > div, .uniface-mask-overlay > div {
   position: relative;
   width: 100%;
   height: 100%;
 }
+.uniface-mask, .uniface-mask-overlay {
+  z-index: 100;
+}
 
 .uniface-mask {
   background-color: rgba(255, 255, 255, 0.0039215686);

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@ticatec/uniface-element",
-  "version": "0.3.20",
+  "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",
@@ -376,26 +376,30 @@
     "svelte": "^5.0.0"
   },
   "devDependencies": {
-    "@eslint/js": "^9.18.0",
-    "@sveltejs/adapter-auto": "^6.0.2",
-    "@sveltejs/kit": "^2.27.3",
-    "@sveltejs/package": "^2.4.1",
-    "@sveltejs/vite-plugin-svelte": "^6.1.1",
-    "eslint": "^9.18.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-svelte": "^2.46.0",
-    "globals": "^15.14.0",
+    "@eslint/js": "^10.0.1",
+    "@sveltejs/adapter-auto": "^7.0.1",
+    "@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",
+    "globals": "^17.6.0",
     "prettier": "^3.4.2",
-    "prettier-plugin-svelte": "^3.3.2",
-    "publint": "^0.3.2",
-    "sass": "^1.90.0",
-    "svelte": "^5.0.0",
-    "svelte-check": "^4.3.1",
+    "prettier-plugin-svelte": "^4.0.0",
+    "publint": "^0.3.21",
+    "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.3.1",
+    "tslib": "^2.8.1",
     "typescript": "^5.7.3",
-    "typescript-eslint": "^8.19.1",
-    "vite": "^6.3.5"
+    "typescript-eslint": "^8.59.4",
+    "vite": "^8.0.13"
   },
   "author": "Henry Feng",
   "license": "MIT",