@ticatec/uniface-element 0.1.14 → 0.1.16

package/dist/action-bar/ActionBar.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 
     import type {ButtonActions} from "./ButtonAction";
-    import Button from "../button";
-    import Separator from "../separator";
+    import Button from "../button/Button.svelte";
+    import Separator from "../separator/Separator.svelte";
 
     export let buttons: ButtonActions = [];
     export let style: string = '';

package/dist/attachment-files/FileUploadBar.svelte

@@ -5,7 +5,7 @@
     import {ProgressStatus} from "../progress-bar/ProgressStatus";
     import {onMount} from "svelte";
     import type UploadFile from "./UploadFile";
-    import i18n from "../i18nContext";
+    import i18n from "@ticatec/i18n";
 
     export let file: UploadFile;
     export let removeFile: (file: any) => void;

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 "../i18nContext";
+    import i18n from "@ticatec/i18n";
 
     export let accept: string = "*/*";
     export let maxSize: number = 1024 * 1024 * 10;

package/dist/base-calendar/CalendarBase.svelte

@@ -12,9 +12,7 @@
     export let value: UniDate;
     export let min: UniDate = null;
     export let max: UniDate = null;
-    export let weekTitle: Array<string> | null = null;
-    export let monthTitle: Array<string> | null = null;
-    export let weekBegin: number | null = null;
+
     export let style: string = '';
     export let cellWidth: number = 32;
     export let cellHeight: number = 32;
@@ -32,6 +30,12 @@
     let showYears: boolean = false;
     let oldValue: any;
 
+    let weekTitle: Array<string> = dateCtx.weekTitleAbbr;
+    let monthTitle: Array<string> = dateCtx.months;
+    let weekBegin: number = dateCtx.weekBegin;
+
+    console.log("日期资源", dateCtx.weekTitle, dateCtx.months, dateCtx.weekTitleAbbr)
+
     const onSelectDate = (date: dayjs.Dayjs) => {
         value = date;
         onSelect(value);

package/dist/base-calendar/CalendarBase.svelte.d.ts

@@ -18,9 +18,6 @@ declare const CalendarBase: $$__sveltets_2_IsomorphicComponent<{
     value: UniDate;
     min?: UniDate;
     max?: UniDate;
-    weekTitle?: Array<string> | null;
-    monthTitle?: Array<string> | null;
-    weekBegin?: number | null;
     style?: string;
     cellWidth?: number;
     cellHeight?: number;

package/dist/base-calendar/DateContext.d.ts

@@ -1,18 +1,10 @@
-declare const i18nDateString: any;
-export { i18nDateString };
 export default class DateContext {
-    private _months;
-    private _monthsAbbr;
-    private _weekTitle;
-    private _weekTitleAbbr;
     private _weekBegin;
     private _dateFmt;
     private _timeFmt;
-    private _confirmText;
     private static instance;
     private constructor();
     static getInstance(): DateContext;
-    static initialize(res: any): DateContext;
     get months(): Array<string>;
     get monthsAbbr(): Array<string>;
     get weekTitle(): Array<string>;
@@ -23,5 +15,4 @@ export default class DateContext {
     get dateFormat(): string;
     set timeFormat(value: string);
     get timeFormat(): string;
-    get confirmText(): string;
 }

package/dist/base-calendar/DateContext.js

@@ -1,86 +1,28 @@
-const i18nDateString = {
-    zh: {
-        months: [
-            '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'
-        ],
-        monthsAbbr: [
-            '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'
-        ],
-        weekTitle: [
-            "日", "一", "二", "三", "四", "五", "六"
-        ],
-        confirmText: "确认"
-    },
-    en: {
-        months: [
-            'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'
-        ],
-        monthsAbbr: [
-            'Jan', 'Feb', 'Mar', 'Api', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
-        ],
-        weekTitle: [
-            "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"
-        ],
-        weekTitleAbbr: [
-            "Sun", "Mon", "Tue", "Wed", "Thr", "Fri", "Sat"
-        ],
-        confirmText: "OK"
-    },
-    fr: {
-        months: [
-            'Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'
-        ],
-        monthsAbbr: [
-            'Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Juin', 'Juil', 'Août', 'Sept', 'Oct', 'Nov', 'Déc'
-        ],
-        weekTitle: [
-            "Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi"
-        ],
-        weekTitleAbbr: [
-            "Dim", "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam"
-        ],
-        confirmText: "OK"
-    }
-};
-export { i18nDateString };
+import i18n from "@ticatec/i18n";
 export default class DateContext {
-    _months;
-    _monthsAbbr;
-    _weekTitle;
-    _weekTitleAbbr;
     _weekBegin = 1;
     _dateFmt = "YYYY-MM-DD";
     _timeFmt = "HH:mm:ss";
-    _confirmText = 'OK';
     static instance;
-    constructor(res) {
-        this._months = res.months;
-        this._monthsAbbr = res.monthsAbbr ?? res.months;
-        this._weekTitle = res.weekTitle;
-        this._weekTitleAbbr = res.weekTitleAbbr ?? res.weekTitle;
-        this._confirmText = res.confirmText ?? 'OK';
+    constructor() {
     }
     static getInstance() {
         if (DateContext.instance == null) {
-            DateContext.instance = new DateContext(i18nDateString.en);
+            DateContext.instance = new DateContext();
         }
         return DateContext.instance;
     }
-    static initialize(res) {
-        DateContext.instance = new DateContext(res || i18nDateString.en);
-        return DateContext.instance;
-    }
     get months() {
-        return [...this._months];
+        return i18n.get("uniface.calendar.months");
     }
     get monthsAbbr() {
-        return [...this._monthsAbbr];
+        return i18n.get("uniface.calendar.monthsAbbr");
     }
     get weekTitle() {
-        return [...this._weekTitle];
+        return i18n.get("uniface.calendar.weekTitle");
     }
     get weekTitleAbbr() {
-        return [...this._weekTitleAbbr];
+        return i18n.get("uniface.calendar.weekTitleAbbr");
     }
     set weekBegin(value) {
         if (value < 0 || value > 6) {
@@ -103,7 +45,4 @@ export default class DateContext {
     get timeFormat() {
         return this._timeFmt;
     }
-    get confirmText() {
-        return this._confirmText;
-    }
 }

package/dist/base-calendar/index.d.ts

@@ -1,5 +1,5 @@
 import Calendar from "./CalendarBase.svelte";
-import DateContext, { i18nDateString } from "./DateContext";
+import DateContext from "./DateContext";
 import dateUtils from "./dateUtils";
 export default Calendar;
-export { DateContext, i18nDateString, dateUtils };
+export { DateContext, dateUtils };

package/dist/base-calendar/index.js

@@ -1,5 +1,5 @@
 import Calendar from "./CalendarBase.svelte";
-import DateContext, { i18nDateString } from "./DateContext";
+import DateContext from "./DateContext";
 import dateUtils from "./dateUtils";
 export default Calendar;
-export { DateContext, i18nDateString, dateUtils };
+export { DateContext, dateUtils };

package/dist/box/Box.svelte

@@ -3,17 +3,22 @@
     export let style: string = "";
     export let title: string = null as unknown as string;
     export let round: boolean = false;
+    export let content$style: string | null = null;
+    export let header$style: string | null = null;
+    export let footer$style: string | null = null;
+    export let showFooter: boolean = true;
+    export {className as class};
+
+    let className: string | null = null;
 
-    export let content$style: string = '';
-    export let fonter$style: string = '';
 
 </script>
 
-<div {style} class="uniface-box" class:round>
+<div {style} class="uniface-box {className}" class:round>
     {#if title || $$slots['header']}
-        <div class="box-title">
+        <div class="box-header flex-container" style={header$style}>
             <slot name="header">
-                <div style="width: 100%; box-sizing: border-box; padding: 6px 12px; overflow: hidden; text-overflow: ellipsis">
+                <div class="title">
                     <span>{title}</span>
                 </div>
             </slot>
@@ -23,9 +28,8 @@
         <slot></slot>
     </div>
     {#if $$slots['footer']}
-        <div class="box-footer" style={fonter$style}>
+        <div class="box-footer flex-container" style="{footer$style}; {showFooter ? '' : 'display: none' }">
             <slot name="footer">
-
             </slot>
         </div>
     {/if}

package/dist/box/Box.svelte.d.ts

@@ -20,8 +20,11 @@ declare const Box: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithCh
     style?: string;
     title?: string;
     round?: boolean;
-    content$style?: string;
-    fonter$style?: string;
+    content$style?: string | null;
+    header$style?: string | null;
+    footer$style?: string | null;
+    showFooter?: boolean;
+    class?: null;
 }, {
     header: {};
     default: {};
@@ -32,6 +35,8 @@ declare const Box: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithCh
     header: {};
     default: {};
     footer: {};
-}, {}, string>;
+}, {
+    class: null;
+}, string>;
 type Box = InstanceType<typeof Box>;
 export default Box;

package/dist/checkbox/CheckBox.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
 
     import type {OnChangeHandler} from "../common/OnChangeHandler";
+    import {tick} from "svelte";
 
-    export let label: string = "";
+    export let label: string | null = null;
     export let readonly: boolean = false;
     export let disabled: boolean = false;
     export let value: boolean = false;
@@ -15,6 +16,7 @@
     let oldValue = value;
 
     let checkbox: any;
+    let checked: boolean;
 
     const handleClickEvent = (e: MouseEvent) => {
         if (readonly || disabled) {
@@ -22,8 +24,13 @@
             e.preventDefault();
         } else {
             indeterminate = false;
-            setTimeout(()=>{
+            setTimeout(async () => {
                 onClick?.(e);
+                await tick();
+                if (checked != oldValue) {
+                    value = checked;
+                    onChange?.(value)
+                }
             }, 50)
             e.stopPropagation();
         }
@@ -33,16 +40,18 @@
         checkbox.indeterminate = indeterminate;
     }
 
-    $: if (value != oldValue) {
+    $: { //当value从外面发生变化的时候
+        checked = value;
         oldValue = value;
-        onChange?.(value)
     }
 
 
 </script>
 <div class="uniface-checkbox" class:disabled class:compact {style}>
-    <label on:click={handleClickEvent} >
-        <input bind:this={checkbox} type="checkbox" bind:checked={value} {readonly} {disabled}/>
-        <span>{label}</span>
+    <label on:click={handleClickEvent}>
+        <input bind:this={checkbox} type="checkbox" bind:checked={checked} {readonly} {disabled}/>
+        {#if label}
+            <span>{label}</span>
+        {/if}
     </label>
 </div>

package/dist/checkbox/CheckBox.svelte.d.ts

@@ -13,7 +13,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     z_$$bindings?: Bindings;
 }
 declare const CheckBox: $$__sveltets_2_IsomorphicComponent<{
-    label?: string;
+    label?: string | null;
     readonly?: boolean;
     disabled?: boolean;
     value?: boolean;

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 = "";
+    export let dropDownIcon: string | null = null;
     export let clean: () => void;
     export let iconClickHandler: MouseClickHandler = null as unknown as MouseClickHandler;
     export let showPopup: boolean = false;
@@ -37,15 +37,21 @@
         {#if readonly || disabled}
             <input style="width: 100%" class="readonly" class:disabled readonly {disabled} value={textValue}/>
         {:else}
-            <slot></slot>
-            {#if canClean && textValue && textValue.length > 0}
-                <div class="uniface-editor-clean-icon">
-                    <i class="uniface-icon-x clickable " aria-hidden="true" on:click={clean}></i>
+            <div style="flex: 1 1 auto; position: relative; height: 100%">
+                <slot></slot>
+                {#if canClean && textValue && textValue.length > 0}
+                    <div class="uniface-editor-clean-icon">
+                        <i class="uniface-icon-x clickable " aria-hidden="true" on:click={clean}></i>
+                    </div>
+                {/if}
+            </div>
+            {#if $$slots['dropdown-icon'] || dropDownIcon}
+                <div style="flex: 0 0 auto">
+                    <slot name="dropdown-icon">
+                        <Icon name={dropDownIcon} class="action-icon" onClick={iconClickHandler??openPopup}/>
+                    </slot>
                 </div>
             {/if}
-            <slot name="dropdown-icon">
-                <Icon name={dropDownIcon} class="action-icon" onClick={iconClickHandler??openPopup}/>
-            </slot>
         {/if}
     </div>
     {#if showPopup}

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;
+    dropDownIcon?: string | null;
     clean: () => void;
     iconClickHandler?: MouseClickHandler;
     showPopup?: boolean;

package/dist/common-editor/CommonEditor.svelte

@@ -18,6 +18,9 @@
     export let showActionIcon: boolean = false;
     export let clean: () => void;
 
+    export let hasLeadingIcon: boolean = false;
+    export let hasTrailingIcon: boolean = false;
+
     let className: string = '';
 
 </script>
@@ -40,29 +43,34 @@
 {:else}
     <div class:compact class="uniface-common-editor {variant} {className}" tabindex="-1"
          style="{style}">
-        {#if $$slots['leading-icon']}
-            <slot name="leading-icon"/>
-        {/if}
         {#if !utils.isEmpty(prefix)}
             <div class="editor-prefix" tabindex="-1" style="flex: 0 0 auto;">
                 <span>{prefix}</span>
             </div>
+        {:else if $$slots['leading-icon'] && hasLeadingIcon}
+            <div class="editor-embed-icon" style="flex: 0 0 auto;">
+                <slot name="leading-icon"/>
+            </div>
         {/if}
         {#if disabled || readonly}
             <input style="flex: 1 1 auto" {value} {disabled} {readonly} {placeholder}>
         {:else}
-            <slot/>
-            <div class="uniface-editor-clean-icon {showActionIcon ? '' : 'hidden'}">
-                <i class="uniface-icon-x clickable" aria-hidden="true" on:click={clean}></i>
+            <div style="position: relative; flex: 1 1 auto">
+                <slot/>
+                <div class="uniface-editor-clean-icon {showActionIcon ? '' : 'hidden'}">
+                    <i class="uniface-icon-x clickable" aria-hidden="true" on:click={clean}></i>
+                </div>
             </div>
         {/if}
         {#if !utils.isEmpty(suffix)}
             <div class="editor-suffix" style="flex: 0 0 auto;">
                 <span>{suffix}</span>
             </div>
+        {:else if $$slots['trailing-icon'] && hasTrailingIcon}
+            <div class="editor-embed-icon" style="flex: 0 0 auto;">
+                <slot name="trailing-icon"/>
+            </div>
         {/if}
-        {#if $$slots['trailing-icon']}
-            <slot name="trailing-icon"/>
-        {/if}
+
     </div>
 {/if}

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

@@ -31,6 +31,8 @@ declare const CommonEditor: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_Pr
     displayMode?: DisplayMode;
     showActionIcon?: boolean;
     clean: () => void;
+    hasLeadingIcon?: boolean;
+    hasTrailingIcon?: boolean;
 }, {
     'leading-icon': {};
     default: {};

package/dist/common-range-editor/CommonRangeEditor.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
 
+
+    import utils from "../common/utils";
     import Icon from "../icon";
 
     export let variant: '' | 'plain' | 'outlined' | 'filled' = '';
@@ -12,19 +14,16 @@
     let className: string = '';
 
 </script>
-<div class="uniface-range-wrapper {className}" tabindex="-1" class:compact {style} on:blur>
-    <div class="uniface-range-editor uniface-common-picker {variant}">
+
+<div class="uniface-common-editor uniface-range-editor uniface-common-picker {variant} {className}" class:compact tabindex="-1" {style}
+     on:blur>
+    <div style="flex: 1 1 auto; height: 100%; display: flex; flex-direction: row; gap: 2px; position: relative">
         <slot name="from"/>
         <div class="divider"></div>
         <slot name="to"/>
         <div class="uniface-editor-clean-icon {showActionIcon ? '' : 'hidden'}">
             <i class="uniface-icon-x clickable" aria-hidden="true" on:click={clean}></i>
         </div>
-        {#if $$slots['trailing-icon']}
-            <div class="action-icon">
-                <slot name="trailing-icon"/>
-            </div>
-        {/if}
     </div>
-    <slot></slot>
-</div>
+    <slot/>
+</div>

package/dist/common-range-editor/CommonRangeEditor.svelte.d.ts

@@ -26,7 +26,6 @@ declare const CommonRangeEditor: $$__sveltets_2_IsomorphicComponent<$$__sveltets
 }, {
     from: {};
     to: {};
-    'trailing-icon': {};
     default: {};
 }>, {
     blur: FocusEvent;
@@ -35,7 +34,6 @@ declare const CommonRangeEditor: $$__sveltets_2_IsomorphicComponent<$$__sveltets
 }, {
     from: {};
     to: {};
-    'trailing-icon': {};
     default: {};
 }, {
     class: string;

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

@@ -0,0 +1,9 @@
+export default interface Column {
+    title: string;
+    field: string;
+    width: number;
+    align?: "left" | "center" | "right";
+    weight?: number;
+    formatter?: (value: any) => string;
+    escapeHTML?: boolean;
+}

package/dist/concise-data-table/Column.js

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