@ticatec/uniface-element 5.0.4 → 5.1.0

package/dist/form/cascade_options_select/CascadeOptionSelect.svelte

@@ -4,11 +4,11 @@
     import OptionsBox from "./OptionsBox.svelte";
     import {CommonPicker} from "../common_editor";
     import type CommonPickerProps from "../common_editor/CommonPickerProps";
-    import type {IsLeafDetermine} from "./isLeafDetermine";
+    import type {IsLeaf} from "./IsLeaf";
 
-    import type {KeyboardEvents} from "../common_editor/EditorEvents";
+    import type {KeyboardEvents} from "../events";
 
-    type OnSelectOption = (item: any) => Promise<Array<any>>;
+    type LoadChildren = (item: any) => Promise<Array<any>>;
 
     interface Props extends CommonPickerProps, KeyboardEvents {
         value: any;
@@ -18,10 +18,11 @@
         abbrField?: string;
         childrenField?: string;
         emptyText?: string;
-        checkLeaf?: IsLeafDetermine | null;
+        checkLeaf?: IsLeaf | null;
         menu$height?: number;
         box$style?: string;
-        onSelect?: OnSelectOption;
+        /** 按需加载叶节点的子级选项；返回空数组表示确实是叶子 */
+        loadChildren?: LoadChildren;
     }
 
     let {
@@ -29,7 +30,7 @@
         disabled = false,
         readonly = false,
         compact = false,
-        mandatory = false,
+        clearable,
         error,
         tooltip,
         theme,
@@ -45,7 +46,7 @@
         checkLeaf = null,
         menu$height = 150,
         box$style = "",
-        onSelect,
+        loadChildren,
         onchange,
         onfocus,
         onblur,
@@ -59,11 +60,11 @@
 
     let picker: CommonPicker;
 
-    export const focus = () => {
+    export function focus() {
         setTimeout(() => {
             picker?.focus();
         }, 50);
-    };
+    }
 
     // Previously a flat "width: 400px" regardless of how many cascade levels
     // (columns) were actually open — with box$style unset (columns had no
@@ -93,9 +94,9 @@
 
         const isLeaf = checkLeaf == null ? false : checkLeaf(item);
         if (!isLeaf) {
-            if (item[childrenField] == null && onSelect != null) {
+            if (item[childrenField] == null && loadChildren != null) {
                 busy = true;
-                const children = (await onSelect(item)) ?? [];
+                const children = (await loadChildren(item)) ?? [];
                 busy = false;
                 item[childrenField] = children;
                 if (children.length > 0) {
@@ -133,12 +134,12 @@
     bind:this={picker}
     {error} {tooltip} {variant} {style} {compact}
     {textValue} {readonly} {placeholder} {disabled}
-    bind:isOpen
-    {theme} {value} {mandatory}
+    bind:expanded={isOpen}
+    {theme} {value} {clearable}
     clear={cleanData}
     {onfocus} {onblur}
     autoFit={false}>
-    {#snippet popupLayer()}
+    {#snippet popup()}
         <div class="cascade-options-popover" style={mh}>
             <div style="height: 100%; position: relative">
                 <div
@@ -150,7 +151,7 @@
                             {keyField}
                             textField={abbrField}
                             {box$style}
-                            onSelect={selectOption(idx)}
+                            onselect={selectOption(idx)}
                             selectedItem={selectedItems[idx]}/>
                     {/each}
                 </div>

package/dist/form/cascade_options_select/CascadeOptionSelect.svelte.d.ts

@@ -1,7 +1,7 @@
 import type CommonPickerProps from "../common_editor/CommonPickerProps";
-import type { IsLeafDetermine } from "./isLeafDetermine";
-import type { KeyboardEvents } from "../common_editor/EditorEvents";
-type OnSelectOption = (item: any) => Promise<Array<any>>;
+import type { IsLeaf } from "./IsLeaf";
+import type { KeyboardEvents } from "../events";
+type LoadChildren = (item: any) => Promise<Array<any>>;
 interface Props extends CommonPickerProps, KeyboardEvents {
     value: any;
     nodes?: Array<any>;
@@ -10,10 +10,11 @@ interface Props extends CommonPickerProps, KeyboardEvents {
     abbrField?: string;
     childrenField?: string;
     emptyText?: string;
-    checkLeaf?: IsLeafDetermine | null;
+    checkLeaf?: IsLeaf | null;
     menu$height?: number;
     box$style?: string;
-    onSelect?: OnSelectOption;
+    /** 按需加载叶节点的子级选项；返回空数组表示确实是叶子 */
+    loadChildren?: LoadChildren;
 }
 declare const CascadeOptionSelect: import("svelte").Component<Props, {
     focus: () => void;

package/dist/form/cascade_options_select/IsLeaf.d.ts

@@ -0,0 +1,4 @@
+/**
+ * 判断当前节点是否为末端节点
+ */
+export type IsLeaf = (item: any) => boolean;

package/dist/form/cascade_options_select/IsLeaf.js

@@ -0,0 +1 @@
+export {};

package/dist/form/cascade_options_select/OptionsBox.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-    import type { OnSelectHandler } from "../../types";
+    import type { OnSelect } from "../../types";
 
     interface Props {
         options: Array<any>;
-        onSelect: OnSelectHandler<any>;
+        onselect: OnSelect<any>;
         selectedItem: any;
         keyField: string;
         textField: string;
@@ -12,7 +12,7 @@
 
     let {
         options,
-        onSelect,
+        onselect,
         selectedItem,
         keyField,
         textField,
@@ -21,7 +21,7 @@
 
     const handleItemClick = (item: any) => (e: MouseEvent) => {
         selectedItem = item;
-        onSelect(item);
+        onselect(item);
     }
 
     const handleItemKeyDown = (item: any) => (e: KeyboardEvent) => {

package/dist/form/cascade_options_select/OptionsBox.svelte.d.ts

@@ -1,7 +1,7 @@
-import type { OnSelectHandler } from "../../types";
+import type { OnSelect } from "../../types";
 interface Props {
     options: Array<any>;
-    onSelect: OnSelectHandler<any>;
+    onselect: OnSelect<any>;
     selectedItem: any;
     keyField: string;
     textField: string;

package/dist/form/color_picker/ColorPicker.svelte

@@ -59,7 +59,7 @@
 
     let swatchValue = $derived(value && HEX_PATTERN.test(value) ? value : DEFAULT_SWATCH);
 
-    export const focus = () => {
+    export function focus() {
         editor?.focus();
     }
 
@@ -160,8 +160,8 @@
 
 </script>
 
-<CommonPicker {variant} {style} {theme} {error} {tooltip} {compact} {placeholder} className="multiple" iconName="icon_google_color_lens"
-              autoFit clear={clean} textValue={value} {readonly} {disabled} {onfocus} {onblur} iconClickHandler={handleActionIconClick}
+<CommonPicker {variant} {style} {theme} {error} {tooltip} {compact} {placeholder} class="multiple" iconName="icon_google_color_lens"
+              autoFit clear={clean} textValue={value} {readonly} {disabled} {onfocus} {onblur} onIconClick={handleActionIconClick}
               input$style={HIDDEN_INTERNAL_INPUT_STYLE}>
     <div style="width: 100%; display: flex; overflow: hidden; flex-direction: row; align-items: center; height: 100%; gap: 8px">
         <input bind:this={editor} style="flex: 0 0 auto; width: 40%; height: 80%; border-radius: 8px;" type="color" value={swatchValue} {disabled}

package/dist/form/color_picker/ColorPickerPanel.svelte

@@ -47,7 +47,7 @@
 
 <div class="color-picker">
     <label for="color-input">
-        {i18nRes.pickupColor}
+        {i18nRes.colorPicker()}
     </label>
 
     <div class="color-input-group">

package/dist/form/common_editor/BasePicker.svelte

@@ -6,10 +6,10 @@
     import type CommonPickerProps from "./CommonPickerProps";
 
     interface Props extends CommonPickerProps {
-        isOpen: boolean;
+        expanded: boolean;
         autoFit?: boolean;
         children: Snippet;
-        popupLayer?: Snippet;
+        popup?: Snippet;
     }
 
     let {
@@ -19,13 +19,13 @@
         disabled = false,
         readonly = false,
         compact = false,
-        isOpen = $bindable(false),
+        expanded = $bindable(false),
         style,
         autoFit = true,
         tooltip,
         error,
         children,
-        popupLayer,
+        popup,
     }: Props = $props();
 
 
@@ -39,9 +39,9 @@
     </div>
 </FormEditor>
 
-{#if isOpen}
-    <Popover target={editorElement} onclose={()=>{isOpen=false}} {autoFit} {theme}>
-        {#if popupLayer}
+{#if expanded}
+    <Popover target={editorElement} onclose={()=>{expanded=false}} {autoFit} {theme}>
+        {#if popup}
             {@render children()}
         {/if}
     </Popover>

package/dist/form/common_editor/BasePicker.svelte.d.ts

@@ -1,11 +1,11 @@
 import type { Snippet } from "svelte";
 import type CommonPickerProps from "./CommonPickerProps";
 interface Props extends CommonPickerProps {
-    isOpen: boolean;
+    expanded: boolean;
     autoFit?: boolean;
     children: Snippet;
-    popupLayer?: Snippet;
+    popup?: Snippet;
 }
-declare const BasePicker: import("svelte").Component<Props, {}, "isOpen">;
+declare const BasePicker: import("svelte").Component<Props, {}, "expanded">;
 type BasePicker = ReturnType<typeof BasePicker>;
 export default BasePicker;

package/dist/form/common_editor/CommonEditor.svelte

@@ -7,7 +7,7 @@
         textValue?: string;
         children: Snippet;
         input$class?: string;
-        canClean?: boolean;
+        clearable?: boolean;
         clear?: () => void;
     }
 
@@ -19,7 +19,7 @@
         disabled = false,
         readonly = false,
         compact = false,
-        canClean = true,
+        clearable = true,
         style,
         textValue,
         suffix,
@@ -34,17 +34,17 @@
     let container = $state<HTMLDivElement | null>(null);
 
     // ✨ 修复点 1：显式暴露获取原生 DOM 的方法
-    export const getNativeElement = () => {
+    export function getElement() {
         return container;
-    };
+    }
 
     // ✨ 修复点 2：显式暴露让内部 input 聚焦的方法
-    export const focus = () => {
+    export function focus() {
         if (container) {
             const inputElement = container.querySelector('input');
             inputElement?.focus();
         }
-    };
+    }
 
     const handleContainerClick = () => {
         if (disabled) return;
@@ -93,14 +93,14 @@
         {:else}
             <div class={input$class} style="position: relative; flex: 1 1 auto">
                 {@render children()}
-                {#if canClean}
+                {#if clearable}
                     <!-- Reserved unconditionally (not gated on textValue) so
                          .uniface-common-editor:has(.clean-icon)'s input
                          padding-right in uniface-form-editor.scss stays
                          constant — otherwise the editor visibly grows/shifts
                          the moment text is first entered. -->
                     <div class="clean-icon" class:has-value={textValue}>
-                        <i class="icon_google_clear" role="button" tabindex={textValue ? 0 : -1} aria-label="Clear"
+                        <i class="icon_google_clear" role="button" tabindex="-1" aria-label="Clear"
                            onmousedown={(e: MouseEvent)=>{e.preventDefault()}} onclick={textValue ? clear : undefined}
                            onkeydown={(e: KeyboardEvent) => { if (textValue && (e.key === 'Enter' || e.key === ' ')) { e.preventDefault(); clear?.(); } }}></i>
                     </div>

package/dist/form/common_editor/CommonEditor.svelte.d.ts

@@ -4,11 +4,11 @@ interface Props extends CommonEditorProps {
     textValue?: string;
     children: Snippet;
     input$class?: string;
-    canClean?: boolean;
+    clearable?: boolean;
     clear?: () => void;
 }
 declare const CommonEditor: import("svelte").Component<Props, {
-    getNativeElement: () => HTMLDivElement | null;
+    getElement: () => HTMLDivElement | null;
     focus: () => void;
 }, "">;
 type CommonEditor = ReturnType<typeof CommonEditor>;

package/dist/form/common_editor/CommonPicker.svelte

@@ -12,12 +12,12 @@
         value?: any;
         autoFit?: boolean;
         iconName?: string;
-        className?: string;
+        class?: string;
         children?: Snippet;
-        popupLayer?: Snippet;
+        popup?: Snippet;
         clear?: () => void;
-        isOpen?: boolean;
-        displayAction?: boolean;
+        expanded?: boolean;
+        showAction?: boolean;
         oninput?: (event: Event) => void;
         oncompositionstart?: (event: CompositionEvent) => void;
         oncompositionend?: (event: CompositionEvent) => void;
@@ -27,7 +27,7 @@
          * 后置图标片段，渲染在输入区域后方
          */
         trailingIcon?: Snippet;
-        iconClickHandler?: () => void;
+        onIconClick?: () => void;
     }
 
     let {
@@ -36,8 +36,8 @@
         disabled = false,
         readonly = false,
         compact = false,
-        mandatory = false,
-        isOpen = $bindable(false),
+        clearable = true,
+        expanded = $bindable(false),
         value,
         textValue,
         style,
@@ -45,16 +45,17 @@
         autoFit = true,
         tooltip,
         error,
-        className,
+        class: className,
         iconName = 'icon_google_arrow_drop_down',
-        iconClickHandler,
+        onIconClick,
         children,
         onfocus,
         onblur,
         clear,
-        popupLayer,
+        popup,
+        trailingIcon,
         input$readonly = true,
-        displayAction = true,
+        showAction = true,
         input$style,
         oninput,
         onchange,
@@ -62,7 +63,8 @@
         oncompositionend,
     }: Props = $props();
 
-    export const focus = () => {
+
+    export function focus() {
         editor?.focus();
     }
 
@@ -80,7 +82,7 @@
     }
 
     const handleBlur = (event: FocusEvent) => {
-        if (!isOpen) {
+        if (!expanded) {
             hasFocus = false;
             onblur?.(event);
         }
@@ -91,18 +93,18 @@
         switch (e.code) {
             case 'Backspace':
             case 'Delete':
-                if (input$readonly && !mandatory) {
+                if (input$readonly && clearable) {
                     clear?.();
-                    isOpen = false;
+                    expanded = false;
                 }
                 break;
             case 'Tab':
             case 'Escape':
-                isOpen = false;
+                expanded = false;
                 break;
             case 'Space':
                 if (input$readonly) {
-                    isOpen = true;
+                    expanded = true;
                 }
                 break;
         }
@@ -110,20 +112,23 @@
     }
 
     $effect(() => {
-        if (!isOpen && hasFocus) {
-            setTimeout(() => {
+        if (!expanded && hasFocus) {
+            const timer = setTimeout(() => {
                 if (document.activeElement !== editor) {
                     hasFocus = false;
                     onblur?.(new FocusEvent('blur'));
                 }
             }, 50);
+            return () => {
+                clearTimeout(timer);
+            };
         }
     });
 
     const openPopup = (event: Event) => {
         if (!readonly && !disabled) {
-            if (!isOpen) {
-                isOpen = true;
+            if (!expanded) {
+                expanded = true;
             }
         }
     }
@@ -132,12 +137,12 @@
         clear?.();
         editor?.focus();
         onchange?.();
-        isOpen = false;
+        expanded = false;
     }
 
 
 </script>
-<FormEditor {variant} {readonly} {disabled} {theme} {style} {tooltip} {compact} {error} {className}>
+<FormEditor {variant} {readonly} {disabled} {theme} {style} {tooltip} {compact} {error} class={className}>
     <div bind:this={editorElement} class="uniface-common-picker" tabindex="-1">
         {#if readonly || disabled}
             {#if children}
@@ -157,7 +162,7 @@
                 {#if children}
                     {@render children()}
                 {/if}
-                {#if !mandatory}
+                {#if clearable}
                     <!-- Space is reserved (and input padding-right adjusted via
                          .uniface-common-picker:has(.clean-icon) in
                          uniface-form-editor.scss) whenever clearing is allowed
@@ -167,23 +172,30 @@
                          glyph itself still depends on there being something to
                          clear. -->
                     <div class="clean-icon" class:has-value={textValue}>
-                        <i class="icon_google_clear" role="none" onclick={textValue ? doClean : undefined}></i>
+                        <i class="icon_google_clear" role="button" tabindex="-1" aria-label="Clear"
+                           onmousedown={(e: MouseEvent)=>{e.preventDefault()}} onclick={textValue ? doClean : undefined}
+                           onkeydown={(e: KeyboardEvent) => { if (textValue && (e.key === 'Enter' || e.key === ' ')) { e.preventDefault(); doClean(); } }}></i>
                     </div>
                 {/if}
             </div>
-            {#if displayAction}
+            {#if trailingIcon}
+                <div class="trailing-icon" style="flex: 0 0 auto">
+                    {@render trailingIcon()}
+                </div>
+            {/if}
+            {#if showAction}
                 <div class="action-icon" style="flex: 0 0 auto">
-                    <Icon name={iconName} onclick={iconClickHandler ?? openPopup}/>
+                    <Icon name={iconName} tabindex={-1} onclick={onIconClick ?? openPopup}/>
                 </div>
             {/if}
         {/if}
     </div>
 </FormEditor>
 
-{#if !disabled && !readonly && isOpen}
-    <Popover target={editorElement} onclose={()=>{isOpen=false}} {autoFit} {theme}>
-        {#if popupLayer}
-            {@render popupLayer()}
+{#if !disabled && !readonly && expanded}
+    <Popover target={editorElement} onclose={()=>{expanded=false}} {autoFit} {theme}>
+        {#if popup}
+            {@render popup()}
         {/if}
     </Popover>
 {/if}

package/dist/form/common_editor/CommonPicker.svelte.d.ts

@@ -5,12 +5,12 @@ interface Props extends CommonPickerProps {
     value?: any;
     autoFit?: boolean;
     iconName?: string;
-    className?: string;
+    class?: string;
     children?: Snippet;
-    popupLayer?: Snippet;
+    popup?: Snippet;
     clear?: () => void;
-    isOpen?: boolean;
-    displayAction?: boolean;
+    expanded?: boolean;
+    showAction?: boolean;
     oninput?: (event: Event) => void;
     oncompositionstart?: (event: CompositionEvent) => void;
     oncompositionend?: (event: CompositionEvent) => void;
@@ -20,10 +20,10 @@ interface Props extends CommonPickerProps {
      * 后置图标片段，渲染在输入区域后方
      */
     trailingIcon?: Snippet;
-    iconClickHandler?: () => void;
+    onIconClick?: () => void;
 }
 declare const CommonPicker: import("svelte").Component<Props, {
     focus: () => void;
-}, "isOpen">;
+}, "expanded">;
 type CommonPicker = ReturnType<typeof CommonPicker>;
 export default CommonPicker;

package/dist/form/common_editor/CommonPickerProps.d.ts

@@ -6,7 +6,7 @@ import type CommonFieldProps from "./CommonFieldProps";
  */
 export default interface CommonPickerProps extends CommonFieldProps {
     /**
-     * 是否为必填字段，必填时字段值不能为空
+     * 是否允许清空（显示清空按钮），默认 true
      */
-    mandatory?: boolean;
+    clearable?: boolean;
 }

package/dist/form/common_editor/CommonPopupEditor.svelte

@@ -8,10 +8,9 @@
         textValue?: string;
         prefix?: string;
         suffix?: string;
-        hasFocus?: boolean;
         children: Snippet;
         autoFit?: boolean
-        popupLayer: Snippet;
+        popup: Snippet;
         leadingIcon?: Snippet;
         clear?: () => void;
     }
@@ -22,7 +21,6 @@
         compact = false,
         disabled = false,
         readonly = false,
-        hasFocus = $bindable(false),
         style,
         textValue,
         prefix,
@@ -31,21 +29,23 @@
         tooltip,
         clear,
         leadingIcon,
-        popupLayer,
+        popup,
         children,
     }: Props = $props();
 
+    let hasFocus = $state(false);
+
     let showPopup = $state(false);
     let editorRef = $state<any>(null);
 
-    export const focus = () => {
+    export function focus() {
         hasFocus = true;
         editorRef?.focus();
-    };
+    }
 
     // 正确获取经由子组件暴露的原生 DOM 节点
     const getTargetElement = () => {
-        return editorRef?.getNativeElement() || null;
+        return editorRef?.getElement() || null;
     };
 
     const openPopup = () => {
@@ -54,7 +54,7 @@
         }
     };
 
-    export const closePopup = () => {
+    export function close() {
         showPopup = false;
     }
 
@@ -63,7 +63,7 @@
             e.preventDefault();
             openPopup();
         }
-    };
+    }
 </script>
 
 <CommonEditor
@@ -84,15 +84,15 @@
 
     {#snippet trailingIcon()}
         {#if !disabled && !readonly}
-            <i class="icon_google_arrow_drop_down" role="button" tabindex="0" aria-label="Open" aria-expanded={showPopup}
+            <i class="icon_google_arrow_drop_down" role="button" tabindex="-1" aria-label="Open" aria-expanded={showPopup}
                onclick={openPopup} onkeydown={handleTriggerKeyDown}></i>
         {/if}
     {/snippet}
 
     {#if showPopup && getTargetElement()}
-        <Popover target={getTargetElement()} {autoFit} {theme} align="right" onclose={closePopup}>
-            {#if popupLayer}
-                {@render popupLayer()}
+        <Popover target={getTargetElement()} {autoFit} {theme} align="right" onclose={close}>
+            {#if popup}
+                {@render popup()}
             {/if}
         </Popover>
     {/if}

package/dist/form/common_editor/CommonPopupEditor.svelte.d.ts

@@ -4,16 +4,15 @@ interface Props extends CommonFieldProps {
     textValue?: string;
     prefix?: string;
     suffix?: string;
-    hasFocus?: boolean;
     children: Snippet;
     autoFit?: boolean;
-    popupLayer: Snippet;
+    popup: Snippet;
     leadingIcon?: Snippet;
     clear?: () => void;
 }
 declare const CommonPopupEditor: import("svelte").Component<Props, {
     focus: () => void;
-    closePopup: () => void;
-}, "hasFocus">;
+    close: () => void;
+}, "">;
 type CommonPopupEditor = ReturnType<typeof CommonPopupEditor>;
 export default CommonPopupEditor;