@ticatec/uniface-element 0.2.1 → 0.2.3

package/README.md

@@ -175,11 +175,63 @@ The library uses CSS custom properties for theming. You can customize the appear
 
 The library includes built-in internationalization support:
 
+default language is english. to load other languages:
+
+create a language resource json file in the static web directory, example: `/assets/uniface_zh-CN.json`
+```json
+{
+  "uniface": {
+    "common": {
+      "btnClose": "关闭",
+      "btnCancel": "取消",
+      "btnConfirm": "确定",
+      "textMore": "加载更多"
+    },
+    "colorPicker": "选择颜色",
+    "calendar": {
+      "months": [
+        "一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"
+      ],
+      "monthsAbbr": [
+        "一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"
+      ],
+      "weekTitle": [
+        "周日", "周一", "周二", "周三", "周四", "周五", "周六"
+      ],
+      "weekTitleAbbr": [
+        "日", "一", "二", "三", "四", "五", "六"
+      ],
+      "confirmText": "确定"
+    },
+    "upload": {
+      "btnRetry": "重试",
+      "btnRemove": "删除",
+      "btnPickup": "选择文件"
+    },
+    "propertyEditor": {
+      "colName": "属性",
+      "colValue": "值"
+    },
+    "dataTable": {
+      "rowNo": "#",
+      "actions": "操作",
+      "emptyDataSet": "暂无数据"
+    },
+    "transfer": {
+      "selectIndicator": "已选择: {{selected}}/{{total}}"
+    }
+  }
+}
+```
+
+You can load the resource file in the `+page.svelte` or other startup page.
+
 ```typescript
-import { i18n } from '@ticatec/uniface-element/i18n_resources';
+import i18n, {i18nUtils} from "@ticatec/i18n";
 
-// Set language
-i18n.setLanguage('en'); // or 'zh-CN'
+// 设置语言
+i18n.setLanguage('zh-CN'); // 或 'en'
+i18nUtils.loadResources('/assets/uniface.json'); //the language code will insert before .json
 ```
 
 ## Available Imports
@@ -187,23 +239,18 @@ i18n.setLanguage('en'); // or 'zh-CN'
 ### Modular Imports
 ```typescript
 // Individual component imports
-import { Button } from '@ticatec/uniface-element/Button';
-import { DataTable } from '@ticatec/uniface-element/DataTable';
-import { SidebarLayout } from '@ticatec/uniface-element/app-layout/SidebarLayout';
-import { AttachmentFilesField } from '@ticatec/uniface-element/AttachmentFiles';
-import { ImageFilesField } from '@ticatec/uniface-element/ImageFiles';
-import { MemoEditor } from '@ticatec/uniface-element/MemoEditor';
+import  Button from '@ticatec/uniface-element/Button';
+import DataTable from '@ticatec/uniface-element/DataTable';
+import SidebarLayout from '@ticatec/uniface-element/app-layout/SidebarLayout';
+import AttachmentFilesField from '@ticatec/uniface-element/AttachmentFiles';
+import ImageFilesField from '@ticatec/uniface-element/ImageFiles';
+import MemoEditor from '@ticatec/uniface-element/MemoEditor';
 
 // Utility imports
 import { utils } from '@ticatec/uniface-element/utils';
-import type { DataColumn } from '@ticatec/uniface-element/types';
+import type { DataColumn } from '@ticatec/uniface-element/DataTable';
 ```
 
-### Barrel Imports
-```typescript
-// Import multiple components from main entry point
-import Button, DataTable, Dialog, Card from '@ticatec/uniface-element/Button, DataTable, Dialog, Card';
-```
 
 ## Development
 

package/README_CN.md

@@ -277,13 +277,64 @@ await window.MessageBox.showInfo("操作完成", "提示");
 
 组件库内置国际化支持：
 
+中文资源文件：  
+可以将文件放置在静态网站的目录下，比如`/assets/uniface_zh-CN.json`
+```json
+{
+  "uniface": {
+    "common": {
+      "btnClose": "关闭",
+      "btnCancel": "取消",
+      "btnConfirm": "确定",
+      "textMore": "加载更多"
+    },
+    "colorPicker": "选择颜色",
+    "calendar": {
+      "months": [
+        "一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"
+      ],
+      "monthsAbbr": [
+        "一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"
+      ],
+      "weekTitle": [
+        "周日", "周一", "周二", "周三", "周四", "周五", "周六"
+      ],
+      "weekTitleAbbr": [
+        "日", "一", "二", "三", "四", "五", "六"
+      ],
+      "confirmText": "确定"
+    },
+    "upload": {
+      "btnRetry": "重试",
+      "btnRemove": "删除",
+      "btnPickup": "选择文件"
+    },
+    "propertyEditor": {
+      "colName": "属性",
+      "colValue": "值"
+    },
+    "dataTable": {
+      "rowNo": "#",
+      "actions": "操作",
+      "emptyDataSet": "暂无数据"
+    },
+    "transfer": {
+      "selectIndicator": "已选择: {{selected}}/{{total}}"
+    }
+  }
+}
+```
+
 ```typescript
-import { i18n } from '@ticatec/uniface-element/i18n_resources';
+import i18n, {i18nUtils} from "@ticatec/i18n";
 
 // 设置语言
 i18n.setLanguage('zh-CN'); // 或 'en'
+i18nUtils.loadResources('/assets/uniface.json');
 ```
 
+
+
 ## 可用导入
 
 ### 模块化导入

package/dist/accordion/Accordion.svelte

@@ -22,7 +22,7 @@
         }
     })
 
-    const handleAccordionClick = (accordion: AccordionItem) => (event: MouseEvent) => {
+    const handleAccordionClick = (accordion: AccordionItem) => async (event: MouseEvent) => {
         if (exclusive) {
             if (activeItem != accordion) {
                 activeItem = accordion;

package/dist/action-bar/ActionBar.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 
+    import type ButtonAction from "./ButtonAction";
     import type {ButtonActions} from "./ButtonAction";
     import Button from "../button/Button.svelte";
     import Separator from "../separator/Separator.svelte";
@@ -8,13 +9,18 @@
     export let style: string = '';
     export let gap: number = 8;
 
+    const handleButtonClick = (button: ButtonAction) => (event: MouseEvent) => {
+        button.handler?.(event)
+    }
+
 
 </script>
 
 <div class="uniface-action-bar" style="gap: {gap}px; {style}">
     {#each (buttons ?? []) as button}
         {#if button}
-            <Button label={button.label} icon={button.icon} disabled={button.disabled===true} type={button.type} onClick={button.handler}/>
+            <Button label={button.label} icon={button.icon} disabled={button.disabled===true} type={button.type}
+                    onClick={handleButtonClick(button)}/>
         {:else }
             <Separator height="24px"/>
         {/if}

package/dist/attachment-files/FileRender.svelte

@@ -48,7 +48,7 @@
 
 <div style="width: 80px; height: 100%; box-sizing: border-box; padding: 6px 8px;">
     <div class="file-icon">
-        <img src={icon} width="64px" height="64px"/>
+        <img src={icon} alt="icon" width="64px" height="64px"/>
         <div class="action-icon" style="top: 15px;">
             <i class="icon_google_file_download" ></i>
         </div>

package/dist/attachment-files/FileUploadBar.svelte

@@ -5,7 +5,8 @@
     import {ProgressStatus} from "../progress-bar/ProgressStatus";
     import {onMount} from "svelte";
     import type UploadFile from "./UploadFile";
-    import i18n from "@ticatec/i18n";
+    import i18nRes from "../i18nRes";
+
 
     export let file: UploadFile;
     export let removeFile: (file: any) => void;
@@ -13,9 +14,9 @@
     let status: ProgressStatus;
     let progress: number = 0;
 
-    let cancelLabel: string = i18n.getText('uniface.upload.btnCancel', 'Cancel');
-    let retryLabel: string = i18n.getText('uniface.upload.btnRetry', 'Retry');
-    let removeLabel: string = i18n.getText('uniface.upload.btnRemove', 'Delete');
+    let cancelLabel: string = i18nRes.common.btnCancel;
+    let retryLabel: string = i18nRes.upload.btnRetry;
+    let removeLabel: string = i18nRes.upload.btnRemove;
 
     const cancelUpload = async () => {
         if (await file.cancel()) {
@@ -23,11 +24,11 @@
         }
     }
 
-    const retryUpload = () => {
+    const retryUpload = async () => {
         file.restart();
     }
 
-    const removeUploadFile = () => {
+    const removeUploadFile = async () => {
         removeFile?.(file);
     }
 

package/dist/attachment-files/FileUploadPanel.svelte

@@ -8,7 +8,7 @@
     import type {FileUpload} from "./FileUpload";
     import utils from "../common/utils";
     import ModalPopover from "../common/ModalPopover.svelte";
-    import i18n from "@ticatec/i18n";
+    import i18nRes from "../i18nRes";
 
     export let accept: string = "*/*";
     export let maxSize: number = 1024 * 1024 * 10;
@@ -19,7 +19,7 @@
     export let canClose: boolean = false;
     export let visible: boolean = false;
 
-    let btnPickup: string = i18n.getText('uniface.upload.btnPickup', "Pickup files");
+    let btnPickup: string = i18nRes.upload.btnPickup;
 
     let files: Array<UploadFile> = [];
     let dropZone: any;

package/dist/base-calendar/DateContext.js

@@ -1,3 +1,4 @@
+import i18nRes from "../i18nRes";
 import i18n from "@ticatec/i18n";
 export default class DateContext {
     _weekBegin = 1;
@@ -13,16 +14,16 @@ export default class DateContext {
         return DateContext.instance;
     }
     get months() {
-        return i18n.get("uniface.calendar.months");
+        return i18nRes.calendar.months;
     }
     get monthsAbbr() {
-        return i18n.get("uniface.calendar.monthsAbbr");
+        return i18nRes.calendar.monthsAbbr;
     }
     get weekTitle() {
-        return i18n.get("uniface.calendar.weekTitle");
+        return i18nRes.calendar.weekTitle;
     }
     get weekTitleAbbr() {
-        return i18n.get("uniface.calendar.weekTitleAbbr");
+        return i18nRes.calendar.weekTitleAbbr;
     }
     set weekBegin(value) {
         if (value < 0 || value > 6) {

package/dist/base-calendar/YearPickupPanel.svelte

@@ -28,24 +28,24 @@
     const isDisabled = (y: number) => (maxYear!=null && y > maxYear) || (minYear!=null && y < minYear);
 
 </script>
-<div class="uniface-year-pickup-panel" on:click={onClick}>
+<div class="uniface-year-pickup-panel" aria-hidden="true" on:click={onClick}>
     <div>
         <div>
             <div style="text-align: center">
                 <div style="display: inline-block; width: 30px; height: 10px; padding: 6px 0">
-                    <i class="icon_google_keyboard_arrow_up" on:click={showYears(-years)}></i>
+                    <i class="icon_google_keyboard_arrow_up" aria-hidden="true" on:click={showYears(-years)}></i>
                 </div>
             </div>
             <div style="display: grid; grid-template-columns: auto auto auto auto; width: 100%; overflow: hidden">
                 {#each Array(years) as _, i}
-                    <div class="year-block" on:click={handleYearClick(i)} class:disabled={isDisabled(year-offset+i)} class:selected={year===year-offset+i}>
+                    <div class="year-block" on:click={handleYearClick(i)} aria-hidden="true" class:disabled={isDisabled(year-offset+i)} class:selected={year===year-offset+i}>
                         <span>{year-offset+i}</span>
                     </div>
                 {/each}
             </div>
             <div style="text-align: center">
                 <div style="display: inline-block; width: 30px; height: 10px; padding: 6px 0">
-                    <i class="icon_google_keyboard_arrow_down" on:click={showYears(years)}></i>
+                    <i class="icon_google_keyboard_arrow_down" aria-hidden="true" on:click={showYears(years)}></i>
                 </div>
             </div>
         </div>

package/dist/card/Card.svelte

@@ -9,7 +9,7 @@
     export let actions: Array<CardAction> = [];
     export let variant: 'plain' | '3d' = 'plain';
     export let iconColor: string | null = null;
-    export let data: any;
+    export let data: any = null;
 
 </script>
 

package/dist/card/Card.svelte.d.ts

@@ -23,7 +23,7 @@ declare const Card: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithC
     actions?: Array<CardAction>;
     variant?: "plain" | "3d";
     iconColor?: string | null;
-    data: any;
+    data?: any;
 }, {
     'header-bar': {};
     default: {};

package/dist/cascade-options-select/CascadeOptionSelect.svelte

@@ -134,6 +134,5 @@
                 </div>
             {/if}
         </div>
-</CommonPicker>
-
-<!--{/if}-->
+    </div>
+</CommonPicker>

package/dist/cascade-options-select/CascadeOptionSelect.svelte.d.ts

@@ -1 +1,46 @@
-export {};
+import { DisplayMode } from "../common/DisplayMode";
+import type { OnChangeHandler } from "../common/OnChangeHandler";
+import type { IsLeafDetermine } from "./isLeafDetermine";
+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;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const CascadeOptionSelect: $$__sveltets_2_IsomorphicComponent<{
+    variant?: "" | "plain" | "outlined" | "filled";
+    disabled?: boolean;
+    readonly?: boolean;
+    compact?: boolean;
+    mandatory?: boolean;
+    value?: any;
+    keyField?: string;
+    textField?: string;
+    abbrField?: string;
+    childrenField?: string;
+    style?: string;
+    placeholder?: string;
+    displayMode?: DisplayMode;
+    emptyText?: string | null;
+    checkLeaf?: IsLeafDetermine | null;
+    text?: string;
+    nodes?: Array<any>;
+    menu$height?: number;
+    onSelect: (item: any) => Promise<Array<any>>;
+    box$style?: string;
+    onChange?: OnChangeHandler<any>;
+}, {
+    blur: FocusEvent;
+    focus: FocusEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type CascadeOptionSelect = InstanceType<typeof CascadeOptionSelect>;
+export default CascadeOptionSelect;

package/dist/cascade-options-select/CascadePanel.svelte

@@ -43,7 +43,7 @@
     <div style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: #e1e1e110;">
         <div style="position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center">
             <div style="width: 100px; margin: 0 auto; text-align: center; background-color: #f0f0f0; border-radius: 4px; padding: 8px 12px; box-sizing: border-box;">
-                <img src={iconLoading} width="32" height="32"/>
+                <img src={iconLoading} alt="loading" width="32" height="32"/>
             </div>
         </div>
     </div>

package/dist/checkbox/CheckBox.svelte

@@ -59,7 +59,7 @@
 
 </script>
 <div class="uniface-checkbox" class:disabled class:compact {style}>
-    <label on:click={handleClickEvent}>
+    <label aria-hidden="true" on:click={handleClickEvent}>
         <input bind:this={checkbox} type="checkbox" bind:checked={checked} {readonly} {disabled}/>
         {#if label}
             <span>{label}</span>

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/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;