@ticatec/uniface-element 0.2.1 → 0.2.2

package/dist/image-files/ImageFilesField.svelte

@@ -62,7 +62,7 @@
     <div class="uniface-display-field images-field">
         {#each files as file}
             <div>
-                <img width="40" height="40" src={file.thumbnail??file.uri}/>
+                <img width="40" height="40" alt="file" src={file.thumbnail??file.uri}>
                 <div class="img-file-name">
                     <span>{file.name}</span>
                 </div>

package/dist/indicator/IndicatorBoard.svelte

@@ -38,7 +38,7 @@
 
 <div bind:this={board} class="uniface-indicator-board" style="display: {visible ? 'flex' : 'none'}">
     <div style="display: flex; flex-direction: row; justify-items: center">
-        <img src={iconLoading} width="32px" height="32px"/>
+        <img src={iconLoading} alt="loading" width="32px" height="32px"/>
         <span style="padding-left: 12px">{indicator}</span>
     </div>
 </div>

package/dist/inline-cell-editor/InvalidEditor.svelte

@@ -6,6 +6,7 @@
     export let props: any;
     export let active: boolean;
 
+    console.warn("Invalid type", readonly, props, active);
 
 </script>
 <div>

package/dist/input-options-select/InputOptionsSelect.svelte

@@ -4,10 +4,10 @@
     import type {OnChangeHandler} from "../common/OnChangeHandler";
     import {tick} from "svelte";
     import type {LazyLoader} from "../list-box/types"
+    import i18nRes from "../i18nRes";
 
     import loading from "../assets/loading.gif"
     import CommonPicker from "../common/CommonPicker.svelte";
-    import i18n from "@ticatec/i18n";
 
     export let variant: '' | 'plain' | 'outlined' | 'filled' = '';
     export let disabled: boolean = false;
@@ -23,7 +23,7 @@
     export let displayMode: DisplayMode = DisplayMode.Edit;
     export let itemRender: any = null;
     export let onChange: OnChangeHandler<any> = null as unknown as OnChangeHandler<any>;
-    export let lazyLoader: LazyLoader;
+    export let lazyLoader: LazyLoader = null as unknown as LazyLoader;
 
     let editor: any;
     let inputText: string;
@@ -131,7 +131,7 @@
 
     const loadMore = async () => {
         editor.focus();
-        if (lazyLoader && !isBusy && hasMore) {
+        if (lazyLoader != null && !isBusy && hasMore) {
             pageNo++;
             await lazyLoad(false);
         }
@@ -154,7 +154,7 @@
     {#if isBusy}
         <div style="position: absolute; top: 0px; bottom: 0px; right: 8px">
             <div style="position: relative; top: 50%; transform: translateY(-50%)">
-                <img src={loading} width="16" height="16"/>
+                <img src={loading} alt="loading" width="16" height="16"/>
             </div>
         </div>
     {/if}
@@ -171,8 +171,8 @@
             </div>
         {/each}
         {#if hasMore}
-            <div class="more-indicator-footer" on:click={loadMore}>
-                {i18n.getText('uniface.loadMore', 'Load more')}
+            <div class="more-indicator-footer" aria-hidden="true" on:click={loadMore}>
+                {i18nRes.common.textMore}
             </div>
         {/if}
         {#if isBusy}

package/dist/input-options-select/InputOptionsSelect.svelte.d.ts

@@ -29,7 +29,7 @@ declare const InputOptionsSelect: $$__sveltets_2_IsomorphicComponent<{
     displayMode?: DisplayMode;
     itemRender?: any;
     onChange?: OnChangeHandler<any>;
-    lazyLoader: LazyLoader;
+    lazyLoader?: LazyLoader;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;

package/dist/layout/flex/FlexBlock.svelte

@@ -12,6 +12,6 @@
     let className:string = '';
 
 </script>
-<div class:flex class="flex-block {flex ? direction : ''}" class:fixed class:grow class:shrink class:auto_fit={autoFit} {style}>
+<div class:flex class="flex-block {className} {flex ? direction : ''}" class:fixed class:grow class:shrink class:auto_fit={autoFit} {style}>
     <slot/>
 </div>

package/dist/lookup-editor/LookupEditor.svelte

@@ -32,7 +32,7 @@
         onChange?.(value)
     }
 
-    const handleActionIconClick = () => {
+    const handleActionIconClick = async (event: MouseEvent) => {
         onAction?.();
     }
 

package/dist/memo-editor/MemoEditor.svelte

@@ -53,7 +53,7 @@
         }
     });
 
-    const clean = () => {
+    const clean = async () => {
         value='';
     }
 
@@ -78,7 +78,7 @@
         {/if}
         {#if !disabled && value && value.length > 0}
             <div class="action-button-wrapper" style="position: absolute; top: 0; left: 0; width: {width}px;">
-                <Icon name="icon_google_clear" clickable class="uniface-editor-clean-icon" onClick={clean}/>
+                <Icon name="icon_google_clear" class="uniface-editor-clean-icon" onClick={clean}/>
             </div>
         {/if}
     </div>

package/dist/message-box/IMessageBox.d.ts

@@ -10,14 +10,12 @@ declare enum ModalResult {
     MR_CLOSE = 3
 }
 declare const InfoButtons: {
-    text: string;
-    key: string;
+    text: any;
     type: string;
     result: ModalResult;
 }[];
 declare const ConfirmButtons: {
-    text: string;
-    key: string;
+    text: any;
     type: string;
     result: ModalResult;
 }[];

package/dist/message-box/IMessageBox.js

@@ -1,6 +1,4 @@
-import i18n from "@ticatec/i18n";
-import langRes from "../i18n_resources/uniface_en_resource";
-;
+import i18nRes from "../i18nRes";
 var ModalResult;
 (function (ModalResult) {
     ModalResult[ModalResult["MR_OK"] = 1] = "MR_OK";
@@ -8,11 +6,11 @@ var ModalResult;
     ModalResult[ModalResult["MR_CLOSE"] = 3] = "MR_CLOSE";
 })(ModalResult || (ModalResult = {}));
 const InfoButtons = [
-    { text: langRes.uniface.btnClose, key: 'uniface.btnClose', type: 'primary', result: ModalResult.MR_OK }
+    { text: i18nRes.common.btnClose, type: 'primary', result: ModalResult.MR_OK }
 ];
 const ConfirmButtons = [
-    { text: langRes.uniface.btnConfirm, key: 'uniface.btnConfirm', type: 'primary', result: ModalResult.MR_OK },
-    { text: langRes.uniface.btnCancel, key: 'uniface.btnCancel', type: 'secondary', result: ModalResult.MR_CANCEL }
+    { text: i18nRes.common.btnConfirm, type: 'primary', result: ModalResult.MR_OK },
+    { text: i18nRes.common.btnCancel, type: 'secondary', result: ModalResult.MR_CANCEL }
 ];
 const initialize = (showInfo, showConfirm) => {
     window.MessageBox = {

package/dist/message-box/MessageBoxBoard.svelte

@@ -5,7 +5,6 @@
     import Button from "../button";
     import {fade} from "svelte/transition";
     import utils from "../common/utils";
-    import i18n from "@ticatec/i18n";
 
     export let appTitle: string = null as unknown as string;
 
@@ -38,8 +37,7 @@
             escapeHTML = _escapeHTML != false;
             if (_buttons) {
                 _buttons.forEach(button => {
-                    console.log(button.key, i18n.getText(button.key, button.text));
-                    button.label = i18n.getText(button.key, button.text)
+                    button.label = button.text
                 });
             }
             buttons = _buttons;

package/dist/options-multi-select/OptionsMultiSelect.svelte

@@ -79,7 +79,7 @@
         return s.length == 0 ? '' : s.join(delimiter);
     }
 
-    const removeOption = (code: string) => (e: MouseEvent) => {
+    const removeOption = (code: string) => async (e: MouseEvent) => {
         removeSelectCode(code);
         e.stopPropagation();
         e.preventDefault();

package/dist/prompts-text-editor/PromptsTextEditor.svelte

@@ -18,7 +18,7 @@
     export let suffix: string = '';
     export let displayMode: DisplayMode = DisplayMode.Edit;
     export let removable: boolean = true;
-    export let onChange: OnChangeHandler<number | null> = null as unknown as OnChangeHandler<number | null>;
+    export let onChange: OnChangeHandler<string | null> = null as unknown as OnChangeHandler<string | null>;
     export let words: Array<string>;
     export let menu$height: number = 0;
     export let placeholder: string = '';
@@ -80,7 +80,7 @@
     </CommonEditor>
 
     {#if showPopup}
-        <Popover target={divPanel} autoFit align="right" on:close={()=>{showPopup=false}}>
+        <Popover target={divPanel} autoFit align="right" onClose={()=>{showPopup=false}}>
             <div class="options-popover" style={mh}>
                 {#each words as word}
                     <div class="option-item" style="padding-left: 12px; padding-right: 12px" on:click={handleHintClick(word)}

package/dist/prompts-text-editor/PromptsTextEditor.svelte.d.ts

@@ -26,7 +26,7 @@ declare const PromptsTextEditor: $$__sveltets_2_IsomorphicComponent<{
     suffix?: string | undefined;
     displayMode?: DisplayMode | undefined;
     removable?: boolean | undefined;
-    onChange?: OnChangeHandler<number | null> | undefined;
+    onChange?: OnChangeHandler<string | null> | undefined;
     words: Array<string>;
     menu$height?: number | undefined;
     placeholder?: string | undefined;

package/dist/property-editor/PropertyEditor.svelte

@@ -7,7 +7,7 @@
     import PropertyDatePickup from "./component/PropertyDatePickup.svelte";
     import PropertyNumberEditor from "./component/PropertyNumberEditor.svelte";
     import PropertyOptionsSelector from "./component/PropertyOptionsSelector.svelte";
-    import i18n from "@ticatec/i18n";
+    import i18nRes from "../i18nRes";
     import PropertyTextWordsEditor from "./component/PropertyPromptsTextEditor.svelte";
 
     export let fields: Array<PropertyField>;
@@ -21,8 +21,8 @@
 
     export let data: any;
 
-    let nameLabel: string = i18n.getText('uniface.propertyEditor.colName', 'Name');
-    let valueLabel: string = i18n.getText('uniface.propertyEditor.colValue', 'Value');
+    let nameLabel: string = i18nRes.propertyEditor.colName;
+    let valueLabel: string = i18nRes.propertyEditor.colValue;
 
     const getEditor = (property: PropertyField) => {
         switch (property.type) {

package/dist/text-editor/PasswordEditor.svelte

@@ -38,7 +38,7 @@
     {/if}
     <div slot="trailing-icon" class="editor-embed-icon">
         {#if (!readonly && !disabled)}
-            <i class={type == "password" ? "icon_google_remove_red_eye" : "icon_google_visibility_off"} on:click={toggleType}></i>
+            <i class={type == "password" ? "icon_google_remove_red_eye" : "icon_google_visibility_off"} aria-hidden="true" on:click={toggleType}></i>
         {/if}
     </div>
 </CommonEditor>

package/dist/transfer/Transfer.svelte

@@ -4,25 +4,24 @@
 
     import type {FunFilter} from "../list-box";
     import type {TransferData} from "./types";
-    import i18n from "@ticatec/i18n";
-
+    import i18n, {i18nUtils} from "@ticatec/i18n";
+    import i18nRes from "../i18nRes";
 
 
     export let style: string = '';
-    export let sourceList:Array<any>;
+    export let sourceList: Array<any>;
     export let sourceTitle: string;
-    export let targetList:Array<any>;
+    export let targetList: Array<any>;
     export let targetTitle: string;
 
     export let itemRender: any = null;
-    export let filter: FunFilter = null;
-    export let transferData: TransferData = null;
-    export let header$style: string = '';
+    export let filter: FunFilter = null as unknown as FunFilter;
+    export let transferData: TransferData = null as unknown as TransferData;
     export let footer$style: string = 'width: 100%; background-color: #f0f0f0; padding: 2px 6px; text-align: right; box-sizing: border-box';
 
 
-    let sourceSelectedList = [];
-    let targetSelectedList = [];
+    let sourceSelectedList: Array<any> = [];
+    let targetSelectedList: Array<any> = [];
 
     const moveToTarget = async () => {
         if (sourceSelectedList.length > 0 && await transferData?.(sourceSelectedList, "right")) {
@@ -45,7 +44,10 @@
     <ListBox class="list-container" title={sourceTitle} {filter} style="{style}; grid-column: 1/2" list={sourceList} selectMode="multiple"
              bind:selectedList={sourceSelectedList} {itemRender}>
         <div slot="footer" style={footer$style}>
-            <span>{i18n.getText('uniface.transfer.selectIndicator', {selected: sourceSelectedList.length, total: sourceList.length})}</span>
+            <span>{i18nUtils.formatText(i18nRes.transfer.selectIndicator, {
+                selected: sourceSelectedList.length,
+                total: sourceList.length
+            })}</span>
         </div>
     </ListBox>
     <div class="icon-button-container" style="grid-column: 2/3;">
@@ -57,9 +59,12 @@
         </IconButton>
     </div>
     <ListBox class="list-container" title={targetTitle} style="{style}; grid-column: 3/4" {filter} list={targetList} selectMode="multiple"
-             bind:selectedList={targetSelectedList} {itemRender} }>
+             bind:selectedList={targetSelectedList} {itemRender}>
         <div slot="footer" style={footer$style}>
-            <span>{i18n.getText('uniface.transfer.selectIndicator', {selected: targetSelectedList.length, total: targetList.length})}</span>
+            <span>{i18nUtils.formatText(i18n.getText('uniface.transfer.selectIndicator'), {
+                selected: targetSelectedList.length,
+                total: targetList.length
+            })}</span>
         </div>
     </ListBox>
 </div>

package/dist/transfer/Transfer.svelte.d.ts

@@ -22,7 +22,6 @@ declare const Transfer: $$__sveltets_2_IsomorphicComponent<{
     itemRender?: any;
     filter?: FunFilter;
     transferData?: TransferData;
-    header$style?: string;
     footer$style?: string;
 }, {
     [evt: string]: CustomEvent<any>;

package/dist/unit-number-editor/UnitNumberEditor.svelte

@@ -52,7 +52,7 @@
         } else {
             value = uv;
         }
-        onChange?.()
+        onChange?.(value)
     }
 
     const handleUnitClick = (item: any) => (e: MouseEvent) => {
@@ -119,7 +119,7 @@
     </CommonEditor>
 
     {#if showPopup}
-        <Popover target={divPanel} autoFit={false} align="right" on:close={()=>{showPopup=false}}>
+        <Popover target={divPanel} autoFit={false} align="right" onClose={()=>{showPopup=false}}>
             <div class="options-popover" style="min-width: 90px; box-sizing: border-box; text-align: center; {mh}" >
                 {#each units as op}
                     <div class="option-item" style="padding-left: 12px; padding-right: 12px" on:click={handleUnitClick(op)} aria-hidden="true">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ticatec/uniface-element",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "A comprehensive UI component library for Svelte applications with rich form controls, data tables, layouts and interactive elements",
   "keywords": [
     "svelte",
@@ -16,8 +16,8 @@
   ],
   "homepage": "https://github.com/ticatec/uniface-element#readme",
   "repository": {
-    "type": "git",
-    "url": "https://github.com/ticatec/uniface-element.git"
+    "type": "https",
+    "url": "git+https://github.com/ticatec/uniface-element.git"
   },
   "bugs": {
     "url": "https://github.com/ticatec/uniface-element/issues"
@@ -32,8 +32,8 @@
     "lint": "npm run check",
     "typecheck": "npm run check",
     "test": "npm run check",
-    "prepublishOnly": "npm run build",
-    "publish:public": "npm run build && npm publish --access public"
+    "prepublishOnly": "rm -rf ./dist && npm run build",
+    "publish:public": "npm publish --access public"
   },
   "files": [
     "dist",
@@ -371,21 +371,21 @@
     "svelte": "^5.0.0"
   },
   "devDependencies": {
-    "@sveltejs/adapter-auto": "^4.0.0",
-    "@sveltejs/kit": "^2.0.0",
-    "@sveltejs/package": "^2.0.0",
-    "@sveltejs/vite-plugin-svelte": "^4.0.0",
+    "@sveltejs/adapter-auto": "^6.0.2",
+    "@sveltejs/kit": "^2.27.3",
+    "@sveltejs/package": "^2.4.1",
+    "@sveltejs/vite-plugin-svelte": "^6.1.1",
     "@ticatec/uniface-google-material-icons": "^0.1.2",
     "dayjs": "^1.11.10",
     "publint": "^0.3.2",
-    "sass": "^1.57.1",
+    "sass": "^1.90.0",
     "svelte": "^5.0.0",
-    "svelte-check": "^4.0.0",
+    "svelte-check": "^4.3.1",
     "svelte-portal": "^2.2.1",
     "svelte-preprocess": "^6.0.3",
     "tslib": "^2.3.1",
     "typescript": "^5.7.3",
-    "vite": "^5.5.0",
+    "vite": "^6.3.5",
     "@ticatec/i18n": "^0.2.1"
   },
   "author": "Henry Feng",
@@ -399,5 +399,12 @@
     "access": "public"
   },
   "dependencies": {
-  }
+  },
+  "title": "uniface-element",
+  "url": "https://github.com/ticatec/uniface-element",
+  "npm": "@ticatec/uniface-element",
+  "categories": [
+    "ui-components",
+    "forms-and-input"
+  ]
 }

package/dist/common-editor/DateInput.svelte

@@ -1,27 +0,0 @@
-<script lang="ts">
-
-    import type {OnChangeHandler} from "../common/OnChangeHandler";
-    import type {UniDate} from "../base-calendar/dateUtils";
-    import {DateFormats} from "../common/DateFormats";
-    import dateUtils from "../base-calendar/dateUtils";
-
-    export let disabled: boolean = false;
-    export let readonly: boolean = false;
-    export let value: UniDate = null;
-    export let style: string = '';
-    export let placeholder: string = "";
-    export let format: DateFormats = DateFormats.ISO8601;
-    export let onChange: OnChangeHandler<Date> = null as unknown as OnChangeHandler<Date>;
-
-    const ctrlKeys: Array<string> = ['Backspace', 'Delete', 'Tab', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'];
-
-    let regex: RegExp;
-
-    let textValue: string;
-
-    let editor: any;
-
-    $: textValue = dateUtils.formatDate(value, format);
-
-</script>
-<input bind:this={editor} type="text" {readonly} {placeholder} {style} {disabled} bind:value={textValue}/>

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

@@ -1,29 +0,0 @@
-import type { OnChangeHandler } from "../common/OnChangeHandler";
-import type { UniDate } from "../base-calendar/dateUtils";
-import { DateFormats } from "../common/DateFormats";
-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 DateInput: $$__sveltets_2_IsomorphicComponent<{
-    disabled?: boolean;
-    readonly?: boolean;
-    value?: UniDate;
-    style?: string;
-    placeholder?: string;
-    format?: DateFormats;
-    onChange?: OnChangeHandler<Date>;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type DateInput = InstanceType<typeof DateInput>;
-export default DateInput;

package/dist/i18n_resources/index.d.ts

@@ -1,3 +0,0 @@
-import cn_resource from "./uniface_cn_resource";
-import en_resource from "./uniface_en_resource";
-export { cn_resource, en_resource };

package/dist/i18n_resources/index.js

@@ -1,3 +0,0 @@
-import cn_resource from "./uniface_cn_resource";
-import en_resource from "./uniface_en_resource";
-export { cn_resource, en_resource };