@ticatec/uniface-element 0.2.0 → 0.2.2

package/dist/color-picker/ColorPicker.svelte

@@ -5,10 +5,10 @@
     import type {OnChangeHandler} from "../common/OnChangeHandler";
     import CommonPicker from "../common/CommonPicker.svelte";
 
-    type OnActionHandler = () => void;
+    //type OnActionHandler = () => void;
 
-    export let showHex = true;
-    export let showRgb = false;
+    //export let showHex = true;
+    //export let showRgb = false;
 
     export let variant: '' | 'plain' | 'outlined' | 'filled' = '';
     export let disabled: boolean = false;
@@ -28,17 +28,17 @@
     let editor: any;
 
     const clean = () => {
-
+        onChange(null)
     }
 
-    const handleActionIconClick = () => {
+    const handleActionIconClick = async () => {
         editor.click();
     }
 
-    function handleColorChange(event) {
-        selectedColor = event.target.value;
-        rgbValues = hexToRgb(selectedColor);
-        console.log(selectedColor, rgbValues);
+    function handleColorChange(event: Event) {
+        // selectedColor = (event.target as HTMLElement).value;
+        // rgbValues = hexToRgb(selectedColor);
+        // console.log(selectedColor, rgbValues);
         // dispatch('change', {
         //     hex: selectedColor,
         //     rgb: rgbValues

package/dist/color-picker/ColorPicker.svelte.d.ts

@@ -13,8 +13,6 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     z_$$bindings?: Bindings;
 }
 declare const ColorPicker: $$__sveltets_2_IsomorphicComponent<{
-    showHex?: boolean;
-    showRgb?: boolean;
     variant?: "" | "plain" | "outlined" | "filled";
     disabled?: boolean;
     readonly?: boolean;

package/dist/color-picker/ColorPickerPanel.svelte

@@ -1,21 +1,19 @@
 <script lang="ts">
 
 
-    // Define props with default values
-    import i18n from "@ticatec/i18n";
-    import langRes from "../i18n_resources/uniface_en_resource";
+    import i18nRes from "../i18nRes";
 
     export let initialColor = "#ffffff";
     export let showHex = true;
     export let showRgb = false;
-    export let swatches = [];
+    export let swatches: Array<any> = [];
 
     let selectedColor = initialColor;
     let rgbValues = hexToRgb(initialColor);
 
 
     // Convert hex to RGB
-    function hexToRgb(hex) {
+    function hexToRgb(hex: string) {
         const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
         return result ? {
             r: parseInt(result[1], 16),
@@ -25,17 +23,17 @@
     }
 
     // Emit change event when color changes
-    function handleColorChange(event) {
-        selectedColor = event.target.value;
+    function handleColorChange(event: Event) {
+        selectedColor = "0x000000"; //event.target?.value;
         rgbValues = hexToRgb(selectedColor);
-        dispatch('change', {
-            hex: selectedColor,
-            rgb: rgbValues
-        });
+        // dispatch('change', {
+        //     hex: selectedColor,
+        //     rgb: rgbValues
+        // });
     }
 
     // Select a swatch
-    function selectSwatch(color) {
+    function selectSwatch(color: any) {
         selectedColor = color;
         rgbValues = hexToRgb(selectedColor);
         // dispatch('change', {
@@ -47,8 +45,7 @@
 
 <div class="color-picker">
     <label for="color-input">
-        {i18n.getText('uniface.pickupColor', langRes.uniface.colorPicker)
-            }
+        {i18nRes.pickupColor}
     </label>
 
     <div class="color-input-group">
@@ -116,7 +113,6 @@
     }
 
     input[type="color"] {
-        -webkit-appearance: none;
         width: 40px;
         height: 40px;
         border: none;

package/dist/color-picker/ColorPickerPanel.svelte.d.ts

@@ -15,7 +15,7 @@ declare const ColorPickerPanel: $$__sveltets_2_IsomorphicComponent<{
     initialColor?: string;
     showHex?: boolean;
     showRgb?: boolean;
-    swatches?: any[];
+    swatches?: Array<any>;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;

package/dist/common/CommonPicker.svelte

@@ -15,7 +15,7 @@
     export let autoFit: boolean = true;
     export let canClean: boolean;
     export let textValue: string;
-    export let dropDownIcon: string | null = null;
+    export let dropDownIcon: string = null as unknown as string;
     export let clean: () => void;
     export let iconClickHandler: MouseClickHandler = null as unknown as MouseClickHandler;
     export let showPopup: boolean = false;
@@ -58,7 +58,7 @@
         {/if}
     </div>
     {#if showPopup}
-        <Popover target={editorElement} on:close={()=>{showPopup=false}} {autoFit}>
+        <Popover target={editorElement} onClose={()=>{showPopup=false}} {autoFit}>
             <slot name="popup-panel"></slot>
         </Popover>
     {/if}

package/dist/common/CommonPicker.svelte.d.ts

@@ -29,7 +29,7 @@ declare const CommonPicker: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_Pr
     autoFit?: boolean;
     canClean: boolean;
     textValue: string;
-    dropDownIcon?: string | null;
+    dropDownIcon?: string;
     clean: () => void;
     iconClickHandler?: MouseClickHandler;
     showPopup?: boolean;

package/dist/common/MouseClickHandler.d.ts

@@ -1 +1 @@
-export type MouseClickHandler = (event: MouseEvent) => void;
+export type MouseClickHandler = (event: MouseEvent) => Promise<void>;

package/dist/common/Popover.svelte

@@ -1,10 +1,33 @@
 
 <script lang="ts">
-    import {createEventDispatcher, onMount} from 'svelte';
-    import {clickOutside} from './uniface-utils';
+    import { onDestroy, onMount} from 'svelte';
     import Portal from "svelte-portal";
 
-    const dispatch = createEventDispatcher();
+    export let onClose: (()=>void) | null = null;
+
+    export function outerClick(node: HTMLElement, callback: () => void) {
+        const handleClick = (event: MouseEvent) => {
+            // 如果点击目标不在node内，则触发回调
+            if (!node.contains(event.target as Node)) {
+                callback();
+            }
+        };
+
+        // 监听全局点击事件（useCapture=true，避免事件冒泡造成的问题）
+        document.addEventListener('click', handleClick, true);
+
+        // 清理事件监听器
+        onDestroy(() => {
+            document.removeEventListener('click', handleClick, true);
+        });
+
+        // action 必须返回一个对象，可以选实现 update 和 destroy
+        return {
+            destroy() {
+                document.removeEventListener('click', handleClick, true);
+            }
+        };
+    }
 
     export let style: string = '';
     export let target: any;
@@ -89,7 +112,7 @@
     });
 
     const close = () => {
-        dispatch('close');
+        onClose?.();
     };
 
     let contentPanel: any;
@@ -103,8 +126,7 @@
 <svelte:window bind:innerWidth={w} bind:innerHeight={h}/>
 <Portal target="body">
     <div class="uniface-popover-wrapper" class:hidden style="{vertPos}; height: auto; left: {position.left-margin}px; width: {position.width}px; ">
-        <div class="uniface-popover"  use:clickOutside
-             on:outerClick={close}>
+        <div class="uniface-popover"  use:outerClick={close}>
             <div bind:this={contentPanel} style="{horzPos}">
                 <div class="contents" style="{style}">
                     <div class="contents-inner">

package/dist/common/Popover.svelte.d.ts

@@ -17,6 +17,10 @@ type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
     children?: any;
 } : {});
 declare const Popover: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    onClose?: (() => void) | null;
+    outerClick?: (node: HTMLElement, callback: () => void) => {
+        destroy(): void;
+    };
     style?: string;
     target: any;
     align?: "left" | "right" | "center";
@@ -25,11 +29,13 @@ declare const Popover: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWi
 }, {
     default: {};
 }>, {
-    close: CustomEvent<any>;
-} & {
     [evt: string]: CustomEvent<any>;
 }, {
     default: {};
-}, {}, string>;
+}, {
+    outerClick: (node: HTMLElement, callback: () => void) => {
+        destroy(): void;
+    };
+}, string>;
 type Popover = InstanceType<typeof Popover>;
 export default Popover;

package/dist/common/uniface-utils.js

@@ -1,10 +1,12 @@
 export function clickOutside(node) {
     const handleClick = (event) => {
-        // @ts-ignore
+        // @ts-ignore 因为 event.target 是 EventTarget，不能直接传给 contains
         if (node && !node.contains(event.target) && !event.defaultPrevented) {
-            node.dispatchEvent(
-            // @ts-ignore
-            new CustomEvent('outerClick', node));
+            node.dispatchEvent(new CustomEvent('outerClick', {
+                bubbles: true, // 通常自定义事件要冒泡，方便捕获
+                cancelable: true, // 可取消
+                detail: { originalEvent: event } // 可选：传递原始事件信息
+            }));
             event.stopPropagation();
             event.preventDefault();
         }

package/dist/common-editor/CommonEditor.svelte

@@ -17,7 +17,7 @@
     export let input$class: string = null as unknown as string;
     export let displayMode: DisplayMode = DisplayMode.Edit;
     export let showActionIcon: boolean = false;
-    export let clean: () => void;
+    export let clean: (() => void) | null = null;
 
     export let hasLeadingIcon: boolean = true;
     export let hasTrailingIcon: boolean = true;

package/dist/common-editor/CommonEditor.svelte.d.ts

@@ -31,7 +31,7 @@ declare const CommonEditor: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_Pr
     input$class?: string;
     displayMode?: DisplayMode;
     showActionIcon?: boolean;
-    clean: () => void;
+    clean?: (() => void) | null;
     hasLeadingIcon?: boolean;
     hasTrailingIcon?: boolean;
 }, {

package/dist/common-editor/NumberInput.svelte

@@ -14,7 +14,7 @@
     export let max: number | null = null;
     export let min: number | null = null;
     export let onChange: OnChangeHandler<number | null> = null as unknown as OnChangeHandler<number | null>;
-    export let textValue: string;
+    export let textValue: string = '';
     export const focus = () => {
         editor.focus();
     }

package/dist/common-editor/NumberInput.svelte.d.ts

@@ -23,7 +23,7 @@ declare const NumberInput: $$__sveltets_2_IsomorphicComponent<{
     max?: number | null;
     min?: number | null;
     onChange?: OnChangeHandler<number | null>;
-    textValue: string;
+    textValue?: string;
     focus?: () => void;
 }, {
     [evt: string]: CustomEvent<any>;

package/dist/concise-data-table/ConciseListTable.svelte

@@ -4,6 +4,7 @@
     import DataRow from "./DataRow.svelte";
     import {type RowClickHandler, type TableOptions} from "./TableOptions";
     import utils from "./utils";
+    import type Column from "./Column";
 
     // list array to display
     export let list: Array<any>;
@@ -120,6 +121,10 @@
 
     $: tableStyle = utils.generateTableStyle(id, columns, tabOptions, viewWidth);
 
+    const handleRowClick = (row: any) => (event: MouseEvent) => {
+        rowClickHandler?.(row)
+    }
+
 
 </script>
 
@@ -141,11 +146,11 @@
         <div class="table-body-container" bind:this={viewPanel} class:auto-scroll={autoScroll}>
             <div class="table-body" style="transition: transform {autoScroll ? '2s' : '0s'} ease;">
                 {#each list as row, rowIndex}
-                    <DataRow data={row} {columns} showAlternative={rowIndex % 2 == 1} on:click={rowClickHandler?.(row)}/>
+                    <DataRow data={row} {columns} showAlternative={rowIndex % 2 == 1} on:click={handleRowClick(row)}/>
                 {/each}
                 {#if autoScroll && list.length > visibleRowCount}
                     {#each list.slice(0, visibleRowCount) as row, rowIndex}
-                        <DataRow data={row} {columns} showAlternative={rowIndex % 2 == 1} on:click={rowClickHandler?.(row)}/>
+                        <DataRow data={row} {columns} showAlternative={rowIndex % 2 == 1} on:click={handleRowClick(row)}/>
                     {/each}
                 {/if}
             </div>

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

@@ -1,4 +1,5 @@
 import { type RowClickHandler, type TableOptions } from "./TableOptions";
+import type Column from "./Column";
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

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

@@ -8,7 +8,7 @@
     export let showAlternative: boolean;
 </script>
 
-<div class="table-row" class:alternative={showAlternative} on:click>
+<div class="table-row" class:alternative={showAlternative} aria-hidden="true" on:click>
     {#each columns as column, idx}
         <DataCell {idx} {column} {data}/>
     {/each}

package/dist/concise-data-table/TableOptions.d.ts

@@ -8,4 +8,4 @@ export interface TableOptions {
     alternativeColor?: string;
     rowHeight?: number;
 }
-export type RowClickHandler = (row: any) => (event: MouseEvent) => void;
+export type RowClickHandler = (row: any) => void;

package/dist/data-table/DataTable.svelte

@@ -106,7 +106,7 @@
     {#if table && dataColumns && fixedCols}
         {#if indicatorColumn || fixedCols.length > 0}
             <FixedColumnsPanel {handleRowExpand} bind:selectedRows {orderDirection} {orderColumn} {handleCellClick} {indicatorColumn}
-                               bind:expandRow {table}
+                               bind:expandRow
                                {rowHeight} {fixedCols} {inlineRowHeight} {rows} {handleWidthChange} width={frozenWidth}
                                bind:scrollTop/>
         {/if}

package/dist/data-table/parts/ActionsPanel.svelte

@@ -4,7 +4,7 @@
     import type ActionsColumn from "../lib/ActionsColumn";
     import type TableRow from "./TableRow";
     import {onDestroy, onMount} from "svelte";
-    import i18n from "@ticatec/i18n";
+    import i18nRes from "../../i18nRes";
 
     export let actionsColumn: ActionsColumn;
     export let scrollTop: number = 0;
@@ -17,7 +17,8 @@
     export let rowHeight: number;
 
     const handleActionPanelScroll = (e: Event) => {
-        scrollTop = e.target?.scrollTop;
+        const target = e.target as HTMLDivElement;
+        scrollTop = target.scrollTop;
     }
 
     let scrollPanel: any;
@@ -43,7 +44,7 @@
         resizeObserver.disconnect();
     });
 
-    let actionText = i18n.getText('uniface.dataTable.actions', 'Actions');
+    let actionText = i18nRes.dataTable.actions;
 
 </script>
 

package/dist/data-table/parts/ActionsRow.svelte

@@ -96,7 +96,7 @@
                             onClick={()=>action.callback(row.data)}/>
             {:else}
                 <TextButton style="flex-shrink: 0; top: 0" size="mini" type="{action.type ?? 'primary'}" label={action.label}
-                            onClick={()=>action.callback(row.data)}/>
+                            onClick={async ()=>action.callback(row.data)}/>
             {/if}
         {/each}
         {#if popupList.length > 0}
@@ -111,10 +111,10 @@
                     <div class="action-popover" style="padding: 4px 6px; text-align: center">
                         {#if action.icon}
                             <IconButton style="flex-shrink: 0; top: 0" size="mini" type="{action.type ?? 'primary'}" icon={action.icon}
-                                        onClick={()=>{action.callback(row.data); showPopup=false}}/>
+                                        onClick={async ()=>{action.callback(row.data); showPopup=false}}/>
                         {:else}
                             <TextButton style="flex-shrink: 0; top: 0" size="mini" type="{action.type ?? 'primary'}" label={action.label}
-                                        onClick={()=>{action.callback(row.data); showPopup=false}}/>
+                                        onClick={async ()=>{action.callback(row.data); showPopup=false}}/>
                         {/if}
                     </div>
                 {/each}

package/dist/data-table/parts/ContentPanel.svelte

@@ -57,10 +57,11 @@
     })
 
     const handleDataTableScroll = (e: Event) => {
+        const target = e.target as HTMLElement;
         if (showVerticalScroll) {
-            scrollTop = e.target?.scrollTop;
+            scrollTop = target.scrollTop;
         }
-        scrollLeft = e.target?.scrollLeft;
+        scrollLeft = target.scrollLeft;
     }
 
 

package/dist/data-table/parts/FixedColumnsPanel.svelte

@@ -15,7 +15,6 @@
     export let width: number;
     export let scrollTop: number = 0;
     export let rows: Array<TableRow>;
-    export let table: UniDataTable;
     export let handleWidthChange: TableEventHandler;
     export let handleRowExpand: RowEventHandler;
 

package/dist/data-table/parts/FixedColumnsPanel.svelte.d.ts

@@ -1,6 +1,6 @@
 import type TableRow from "./TableRow";
 import type { IndicatorColumn } from "..";
-import UniDataTable, { type RowEventHandler, type TableEventHandler } from "../UniDataTable";
+import { type RowEventHandler, type TableEventHandler } from "../UniDataTable";
 import type DataColumn from "../lib/DataColumn";
 import { OrderDirection } from "../lib/OrderDirection";
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
@@ -22,7 +22,6 @@ declare const FixedColumnsPanel: $$__sveltets_2_IsomorphicComponent<{
     width: number;
     scrollTop?: number;
     rows: Array<TableRow>;
-    table: UniDataTable;
     handleWidthChange: TableEventHandler;
     handleRowExpand: RowEventHandler;
     handleCellClick: (col: DataColumn) => any;

package/dist/data-table/parts/FixedHeaderPanel.svelte

@@ -5,7 +5,7 @@
     import {type SelectionEventHandler, SelectionMode, type TableEventHandler} from "../UniDataTable";
     import utils from "../../common/utils";
     import {OrderDirection} from "../lib/OrderDirection";
-    import i18n from "@ticatec/i18n";
+    import i18nRes from "../../i18nRes";
 
     export let columns: Array<DataColumn>;
     export let indicatorColumn: IndicatorColumn | null;
@@ -84,7 +84,7 @@
             {:else }
                 <div style="text-align: center" class="vertical-center">
                     {#if indicatorColumn.displayNo}
-                        <span>{i18n.getText('uniface.dataTable.rowNo', '#No')}</span>
+                        <span>{i18nRes.dataTable.rowNo}</span>
                     {/if}
                 </div>
             {/if}

package/dist/data-table/parts/FixedRow.svelte

@@ -4,7 +4,8 @@
     import type {RowEventHandler, RowSelectEventHandler} from "../UniDataTable";
     import DataCell from "./DataCell.svelte";
     import type DataColumn from "../lib/DataColumn";
-    import type {IndicatorColumn} from "../..";
+    import type {IndicatorColumn} from "..";
+
 
     export let selectable: boolean = false;
     export let rowNo: number;

package/dist/data-table/parts/FixedRow.svelte.d.ts

@@ -1,7 +1,7 @@
 import type TableRow from "./TableRow";
 import type { RowEventHandler, RowSelectEventHandler } from "../UniDataTable";
 import type DataColumn from "../lib/DataColumn";
-import type { IndicatorColumn } from "../..";
+import type { IndicatorColumn } from "..";
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/data-table/parts/HrefCell.svelte

@@ -15,6 +15,27 @@
 </script>
 <div style="display: flex; flex-direction: row; gap: 8px; justify-content: center">
     {#each list as item, idx}
-        <a href="javascript:void(0)" on:click={()=>item.action()}>{item.text}</a>
+        <button class="link-style" on:click|preventDefault={()=>item.action()}>{item.text}</button>
     {/each}
-</div>
+</div>
+
+<style>
+    button.link-style {
+        background: none;
+        border: none;
+        color: blue;
+        text-decoration: underline;
+        cursor: pointer;
+        font: inherit;
+        padding: 0;
+    }
+    button.link-style:focus {
+        outline: none;
+    }
+
+    button.link-style:active {
+        /* 取消默认的active边框或者阴影 */
+        outline: none;
+        box-shadow: none;
+    }
+</style>

package/dist/data-table/parts/PopupMenu.svelte

@@ -24,6 +24,30 @@
         }
     }
 
+    export function outerClick(node: HTMLElement, callback: () => void) {
+        const handleClick = (event: MouseEvent) => {
+            // 如果点击目标不在node内，则触发回调
+            if (!node.contains(event.target as Node)) {
+                callback();
+            }
+        };
+
+        // 监听全局点击事件（useCapture=true，避免事件冒泡造成的问题）
+        document.addEventListener('click', handleClick, true);
+
+        // 清理事件监听器
+        onDestroy(() => {
+            document.removeEventListener('click', handleClick, true);
+        });
+
+        // action 必须返回一个对象，可以选实现 update 和 destroy
+        return {
+            destroy() {
+                document.removeEventListener('click', handleClick, true);
+            }
+        };
+    }
+
     onMount(async () => {
         resizeObserver = new ResizeObserver(() => {
             checkPosition();
@@ -38,8 +62,7 @@
 
 </script>
 
-
 <div bind:this={panel} style="position: absolute; right: 8px; {style}; background-color: #FFFFFF; border: 1px solid #e1e1e1; z-index: 5"
-     use:clickOutside on:outerClick={close}>
+     use:clickOutside use:outerClick={close}>
     <slot></slot>
 </div>

package/dist/data-table/parts/PopupMenu.svelte.d.ts

@@ -19,12 +19,19 @@ type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
 declare const PopupMenu: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
     closeCallback: () => void;
     parentRect: DOMRect;
+    outerClick?: (node: HTMLElement, callback: () => void) => {
+        destroy(): void;
+    };
 }, {
     default: {};
 }>, {
     [evt: string]: CustomEvent<any>;
 }, {
     default: {};
-}, {}, string>;
+}, {
+    outerClick: (node: HTMLElement, callback: () => void) => {
+        destroy(): void;
+    };
+}, string>;
 type PopupMenu = InstanceType<typeof PopupMenu>;
 export default PopupMenu;

package/dist/date-picker/DatePicker.svelte

@@ -2,7 +2,6 @@
 
     import {onMount, tick} from "svelte";
     import {DisplayMode} from "../common/DisplayMode";
-    import Popover from "../common/Popover.svelte";
     import dayjs from "dayjs";
     import Calendar from "../base-calendar";
     import type {OnChangeHandler} from "../common/OnChangeHandler";

package/dist/date-picker/DateTimePicker.svelte

@@ -9,7 +9,7 @@
     import {TextButton} from "../button";
     import type {OnChangeHandler} from "../common/OnChangeHandler";
     import CommonPicker from "../common/CommonPicker.svelte";
-    import i18nContext from "@ticatec/i18n";
+    import i18nRes from "../i18nRes";
 
     export let disabled: boolean = false;
     export let readonly: boolean = false;
@@ -31,7 +31,7 @@
     }
 
 
-    let confirmText = i18nContext.getText('uniface.calendar.confirmText');
+    let confirmText = i18nRes.calendar.confirmText;
     let textValue: string;
     let editor: any;
 
@@ -76,7 +76,7 @@
         }
     }
 
-    const confirm = () => {
+    const confirm = async () => {
         if (dateUtils.toDayjs(value)?.toDate() != currentValue.toDate()) {
             value = currentValue;
             onChange?.(currentValue.toDate());