@ticatec/uniface-element 0.1.9

package/dist/nav-menu/NavigatorMenuItem.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+
+    import {slide} from "svelte/transition";
+    import type MenuItem from "./MenuItem";
+    import type {OnMenuClick} from "./MenuItem";
+    import i18n from "../i18nContext";
+
+    export let item: MenuItem;
+    export let expand: boolean = false;
+
+    export let onMenuItemClick: OnMenuClick;
+
+
+    let expandable: boolean;
+
+    $: {
+        expandable = item.children != null && item.children.length > 0
+    }
+
+    let respond: boolean = true;
+    const handleMenuItemClick = () => {
+        if (respond) {
+            respond = false;
+            setTimeout(() => respond = true, 200);
+            if (expandable) {
+                item.expand = !item.expand;
+                expand = !expand;
+            } else {
+                onMenuItemClick?.(item);
+            }
+        }
+
+    }
+
+</script>
+<li class:expandable class:fold={!expand}>
+    <span on:click={handleMenuItemClick} aria-hidden="true">{item.key ? i18n.getText(item.key, item.text) : item.text}</span>
+    {#if item.children}
+        {#if expand}
+            <ul transition:slide={{duration: 200}}>
+                {#each item.children as el}
+                    <svelte:self item={el} {onMenuItemClick}/>
+                {/each}
+            </ul>
+        {/if}
+    {/if}
+</li>

package/dist/nav-menu/NavigatorMenuItem.svelte.d.ts

@@ -0,0 +1,24 @@
+import type MenuItem from "./MenuItem";
+import type { OnMenuClick } from "./MenuItem";
+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 NavigatorMenuItem: $$__sveltets_2_IsomorphicComponent<{
+    item: MenuItem;
+    expand?: boolean;
+    onMenuItemClick: OnMenuClick;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type NavigatorMenuItem = InstanceType<typeof NavigatorMenuItem>;
+export default NavigatorMenuItem;

package/dist/nav-menu/index.d.ts

@@ -0,0 +1,5 @@
+import NavigatorMenu from "./NavigatorMenu.svelte";
+import type MenuItem from "./MenuItem";
+import type { OnMenuClick } from "./MenuItem";
+export default NavigatorMenu;
+export type { MenuItem, OnMenuClick };

package/dist/nav-menu/index.js

@@ -0,0 +1,2 @@
+import NavigatorMenu from "./NavigatorMenu.svelte";
+export default NavigatorMenu;

package/dist/nav-menu/readme.MD

@@ -0,0 +1 @@
+# 导航菜单

package/dist/navigator/NavItemStatus.d.ts

@@ -0,0 +1,5 @@
+export declare enum NavItemStatus {
+    Completed = "nav-completed",
+    Warning = "nav-warning",
+    NotStart = "nav-not-start"
+}

package/dist/navigator/NavItemStatus.js

@@ -0,0 +1,6 @@
+export var NavItemStatus;
+(function (NavItemStatus) {
+    NavItemStatus["Completed"] = "nav-completed";
+    NavItemStatus["Warning"] = "nav-warning";
+    NavItemStatus["NotStart"] = "nav-not-start";
+})(NavItemStatus || (NavItemStatus = {}));

package/dist/navigator/Navigator.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+
+    import {NavItemStatus} from "./NavItemStatus";
+
+    type ItemClickHandler = (item: any) => void;
+    type RetrieveItemStatus = (item: any) => NavItemStatus;
+
+    export let items: Array<any>;
+    export let activeItem: any = null;
+    export let style: string = "";
+    export let itemClickHandler: ItemClickHandler;
+    export let retrieveStatus: RetrieveItemStatus;
+
+    const handleItemClick = (item: any) => (e: MouseEvent) => {
+        activeItem = item;
+        itemClickHandler?.(item);
+    }
+
+</script>
+
+<div class="uniface-navigator-panel" {style}>
+    <div class="navigator-content">
+        {#each items as item}
+            <div class="uniface-navigator-item {retrieveStatus?.(item)??NavItemStatus.Completed}" class:active={activeItem===item}
+                 aria-hidden="true" on:click={handleItemClick(item)}>
+                <span>{item.text}</span>
+            </div>
+        {/each}
+    </div>
+</div>
+

package/dist/navigator/Navigator.svelte.d.ts

@@ -0,0 +1,25 @@
+import { NavItemStatus } from "./NavItemStatus";
+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 Navigator: $$__sveltets_2_IsomorphicComponent<{
+    items: Array<any>;
+    activeItem?: any;
+    style?: string;
+    itemClickHandler: (item: any) => void;
+    retrieveStatus: (item: any) => NavItemStatus;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Navigator = InstanceType<typeof Navigator>;
+export default Navigator;

package/dist/navigator/index.d.ts

@@ -0,0 +1,4 @@
+import Navigator from "./Navigator.svelte";
+import { NavItemStatus } from "./NavItemStatus";
+export default Navigator;
+export { NavItemStatus };

package/dist/navigator/index.js

@@ -0,0 +1,4 @@
+import Navigator from "./Navigator.svelte";
+import { NavItemStatus } from "./NavItemStatus";
+export default Navigator;
+export { NavItemStatus };

package/dist/number-editor/NumberEditor.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+
+    import {DisplayMode} from "../common/DisplayMode";
+    import CommonEditor from "../common-editor/CommonEditor.svelte";
+    import type {OnChangeHandler} from "../common/OnChangeHandler";
+    import NumberInput from "../common-editor/NumberInput.svelte";
+
+
+
+    export let disabled: boolean = false;
+    export let readonly: boolean = false;
+    export let variant: '' | 'plain' | 'outlined' | 'filled' = '';
+    export let compact: boolean = false;
+    export {className as class};
+    export let style: string = '';
+    export let placeholder: string = '';
+    export let value: number | null;
+    export let precision: number | null = null;
+    export let suffix: string = '';
+    export let prefix: string = '';
+    export let allowNegative: boolean = false;
+    export let displayMode: DisplayMode = DisplayMode.Edit;
+    export let max: number | null = null;
+    export let min: number | null = null;
+    export let removable: boolean = true;
+    export let onChange: OnChangeHandler<number | null> = null as unknown as OnChangeHandler<number | null>;
+
+    let className: string = '';
+    let editor: NumberInput;
+
+    const clean = () => {
+        value = null;
+        editor.setFocus();
+    }
+
+
+</script>
+<CommonEditor {displayMode} {style} {value} {suffix} {prefix} {readonly} {variant} {compact} class={className}
+              showActionIcon={removable && !readonly && !disabled && value != null} {clean}>
+    <svelte:fragment slot="leading-icon">
+        {#if $$slots['leading-icon']}
+            <div class="editor-embed-icon">
+                <slot name="leading-icon"/>
+            </div>
+        {/if}
+    </svelte:fragment>
+    <NumberInput bind:this={editor} style="flex: 1 1 auto" {disabled} {placeholder} bind:value {precision} {allowNegative} {max} {min} {readonly} {onChange}/>
+    <svelte:fragment slot="trailing-icon">
+        {#if $$slots['trailing-icon']}
+            <div class="editor-embed-icon">
+                <slot name="trailing-icon"/>
+            </div>
+        {/if}
+    </svelte:fragment>
+</CommonEditor>

package/dist/number-editor/NumberEditor.svelte.d.ts

@@ -0,0 +1,43 @@
+import { DisplayMode } from "../common/DisplayMode";
+import type { OnChangeHandler } from "../common/OnChangeHandler";
+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 NumberEditor: $$__sveltets_2_IsomorphicComponent<{
+    disabled?: boolean;
+    readonly?: boolean;
+    variant?: "" | "plain" | "outlined" | "filled";
+    compact?: boolean;
+    class?: string;
+    style?: string;
+    placeholder?: string;
+    value: number | null;
+    precision?: number | null;
+    suffix?: string;
+    prefix?: string;
+    allowNegative?: boolean;
+    displayMode?: DisplayMode;
+    max?: number | null;
+    min?: number | null;
+    removable?: boolean;
+    onChange?: OnChangeHandler<number | null>;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    'leading-icon': {};
+    'trailing-icon': {};
+}, {
+    class: string;
+}, string>;
+type NumberEditor = InstanceType<typeof NumberEditor>;
+export default NumberEditor;

package/dist/number-editor/README.md

@@ -0,0 +1,26 @@
+# NumberEditor
+
+## 使用方法
+
+```sveltehtml
+<NumberEditor filled max={500} suffix="KG" compact/>
+```
+
+## 属性
+| 属性            | 描述               | 类型              |
+|---|------------------|-----------------|
+| disabled      | 当前的数字输入框是否可用     | true / false    |
+| readonly      | 当前的数字输入框为只读或者可编辑 | true / false    |
+| outlined      | 当前的是否带边框         | true / false    |
+| filled        | 当前输入框是否填充        | true / false    |
+| compact       | 按照紧凑格式显示         | true / false    |
+| style         | 自定义style         | 字符串             |
+| value         | 值                | true / false    |
+| precision     | 精度               | 整数              |
+| suffix        | 后缀               | 字符              |
+| prefix        | 前缀               | 字符              |
+| allowNegative | 是否可以是负数          | true / false    |
+| displayMode   | 最小值              | 0(格式显示) / 1（正常） |
+| max           | 最大值              | 数字              |
+
+

package/dist/number-editor/index.d.ts

@@ -0,0 +1,2 @@
+import NumberEditor from "./NumberEditor.svelte";
+export default NumberEditor;

package/dist/number-editor/index.js

@@ -0,0 +1,2 @@
+import NumberEditor from "./NumberEditor.svelte";
+export default NumberEditor;

package/dist/number-range/NumberRange.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+
+    import CommonRangeEditor from "../common-range-editor";
+    import NumberInput from "../common-editor/NumberInput.svelte";
+
+    export let variant: '' | 'plain' | 'outlined' | 'filled' = '';
+    export let compact: boolean = false;
+    export {className as class};
+    export let style: string = '';
+    export let min: number | null = null;
+    export let max: number | null = null;
+    export let fromValue: number = null as unknown as number;
+    export let toValue: number = null as unknown as number;
+
+    let className: string = '';
+    let showActionIcon: boolean = true;
+    let editor: NumberInput;
+
+    const cleanValue = () => {
+        fromValue = null as unknown as number;
+        toValue = null as unknown as number;
+        editor.setFocus();
+    }
+
+    $: showActionIcon = fromValue != null || toValue != null;
+
+</script>
+<CommonRangeEditor {compact} class="{className}" {style} {variant} {showActionIcon} clean={cleanValue}>
+    <svelte:fragment slot="from">
+        <NumberInput bind:this={editor} style="width: 100%; text-align: center" placeholder="" {min} max={toValue} bind:value={fromValue}/>
+    </svelte:fragment>
+    <svelte:fragment slot="to">
+        <NumberInput style="width: 100%; text-align: center" placeholder="" {max} min={fromValue} bind:value={toValue}/>
+    </svelte:fragment>
+</CommonRangeEditor>

package/dist/number-range/NumberRange.svelte.d.ts

@@ -0,0 +1,29 @@
+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 NumberRange: $$__sveltets_2_IsomorphicComponent<{
+    variant?: "" | "plain" | "outlined" | "filled";
+    compact?: boolean;
+    class?: string;
+    style?: string;
+    min?: number | null;
+    max?: number | null;
+    fromValue?: number;
+    toValue?: number;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {
+    class: string;
+}, string>;
+type NumberRange = InstanceType<typeof NumberRange>;
+export default NumberRange;

package/dist/number-range/index.d.ts

@@ -0,0 +1,2 @@
+import NumberRange from "./NumberRange.svelte";
+export default NumberRange;

package/dist/number-range/index.js

@@ -0,0 +1,2 @@
+import NumberRange from "./NumberRange.svelte";
+export default NumberRange;

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

@@ -0,0 +1,118 @@
+<script lang="ts">
+
+    import {DisplayMode} from "../common/DisplayMode";
+    import CheckBox from "../checkbox/CheckBox.svelte";
+    import CommonPicker from "../common/CommonPicker.svelte";
+    import utils from "../common/utils";
+    import type {OnChangeHandler} from "../common/OnChangeHandler";
+    import Tag from "../tag";
+
+    export let style: string = "";
+    export let variant: '' | 'plain' | 'outlined' | 'filled' = '';
+    export let compact: boolean = false;
+    export let disabled: boolean = false;
+    export let readonly: boolean = false;
+    export let menu$height: number = 0;
+    export let value: string = '';
+    export let delimiter: string = ';';
+    export let options: Array<any> = [];
+    export let keyField: string = "code";
+    export let textField: string = "text";
+    export let placeholder: string = '';
+    export let disableOptions: Array<string> = [];
+    export let hideOptions: Array<string> = [];
+    export let displayMode: DisplayMode = DisplayMode.Edit;
+    export let onChange: OnChangeHandler<Array<string>> = null as unknown as OnChangeHandler<Array<string>>;
+    export let tagColor: string = '';
+    export let tagVariant: 'borderless' | 'border' | 'round' = 'border';
+
+
+    let selectedList: Array<string> = [];
+
+    let textValue: string;
+    let mh;
+
+
+    const handleChange = (key: string) => (checked: boolean) => {
+        if (checked) {
+            if (selectedList.indexOf(key) < 0) {
+                selectedList.push(key);
+                selectedList = [...selectedList];
+                value = selectedList.length > 0 ? selectedList.join(delimiter) : '';
+            }
+        } else {
+            removeSelectCode(key);
+        }
+        onChange?.(selectedList)
+    }
+
+    const getOptionItem = (code: string) => {
+        let item = options.find(el => el[keyField] == code);
+        return item == null ? '' : item[textField];
+    }
+
+    const removeSelectCode = (code: string) => {
+        let pos = selectedList.findIndex(sc => sc == code);
+        if (pos > -1) {
+            selectedList.splice(pos, 1);
+            selectedList = [...selectedList];
+            value = selectedList.length > 0 ? selectedList.join(delimiter) : '';
+        }
+    }
+
+    const generateTextValue = (v: Array<any>) => {
+        let s = [];
+        for (let item of options) {
+            if (v.indexOf(item[keyField]) > -1) {
+                s.push(item[textField]);
+            }
+        }
+        return s.length == 0 ? '' : s.join(delimiter);
+    }
+
+    const removeOption = (code: string) => (e: MouseEvent) => {
+        removeSelectCode(code);
+        e.stopPropagation();
+        e.preventDefault();
+    }
+
+    const cleanData = () => {
+        value = '';
+        onChange?.([])
+    }
+
+    let showPopup: boolean = false;
+
+    $: selectedList = utils.isEmpty(value) ? [] : ((value ?? '').toString()).split(delimiter);
+    $: mh = `height: ${menu$height > 0 ? menu$height + 'px' : 'auto'}`;
+    $: textValue = generateTextValue(selectedList);
+
+</script>
+
+<CommonPicker {displayMode} {variant} {style} {compact} className="multiple" dropDownIcon="uniface-icon-chevron-down"
+              bind:showPopup canClean={value!=null} autoFit clean={cleanData} {textValue} {readonly} {disabled}>
+
+    <div class="option-field" aria-hidden="true" on:click={()=>{showPopup = true}}>
+        <div style="width: 100%; overflow: hidden; display: flex; flex-direction: row; gap: 6px">
+            {#if selectedList.length > 0 }
+                {#each selectedList as code}
+                    <Tag style="flex-shrink: 0" color={tagColor} variant={tagVariant} text={getOptionItem(code)}
+                         removable={!readonly && !disabled} removeHandler={removeOption(code)}/>
+                {/each}
+            {:else if placeholder != null}
+                <div class:readonly={readonly || disabled}>
+                    <span style="color: #7f7f7f">{placeholder}</span>
+                </div>
+            {/if}
+        </div>
+    </div>
+    <div class="options-popover" style={mh} slot="popup-panel">
+        {#each options as op}
+            {#if hideOptions.indexOf(op[keyField]) < 0}
+                <CheckBox style="width: 100%" label={op[textField]} onChange={handleChange(op[keyField])}
+                          value={selectedList.indexOf(op[keyField])>-1}
+                          disabled={disableOptions.indexOf(op[keyField])>-1}/>
+            {/if}
+        {/each}
+    </div>
+</CommonPicker>

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

@@ -0,0 +1,39 @@
+import { DisplayMode } from "../common/DisplayMode";
+import type { OnChangeHandler } from "../common/OnChangeHandler";
+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 OptionsMultiSelect: $$__sveltets_2_IsomorphicComponent<{
+    style?: string;
+    variant?: "" | "plain" | "outlined" | "filled";
+    compact?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    menu$height?: number;
+    value?: string;
+    delimiter?: string;
+    options?: Array<any>;
+    keyField?: string;
+    textField?: string;
+    placeholder?: string;
+    disableOptions?: Array<string>;
+    hideOptions?: Array<string>;
+    displayMode?: DisplayMode;
+    onChange?: OnChangeHandler<Array<string>>;
+    tagColor?: string;
+    tagVariant?: "borderless" | "border" | "round";
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type OptionsMultiSelect = InstanceType<typeof OptionsMultiSelect>;
+export default OptionsMultiSelect;

package/dist/options-multi-select/index.d.ts

@@ -0,0 +1,2 @@
+import OptionsMultiSelect from "./OptionsMultiSelect.svelte";
+export default OptionsMultiSelect;

package/dist/options-multi-select/index.js

@@ -0,0 +1,2 @@
+import OptionsMultiSelect from "./OptionsMultiSelect.svelte";
+export default OptionsMultiSelect;

package/dist/options-select/OptionsSelect.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+
+
+    import {DisplayMode} from "../common/DisplayMode";
+    import type {OnChangeHandler} from "../common/OnChangeHandler";
+    import CommonPicker from "../common/CommonPicker.svelte";
+
+
+    export let variant: '' | 'plain' | 'outlined' | 'filled' = '';
+    export let disabled: boolean = false;
+    export let readonly: boolean = false;
+    export let compact: boolean = false;
+    export let mandatory: boolean = false;
+    export let value: any = null;
+    export let options: Array<any>;
+    export let keyField: string = "code";
+    export let textField: string = "text";
+    export let menu$height: number = 0;
+    export let style: string = '';
+    export let placeholder: string = "";
+    export let disableOptions: Array<string> = [];
+    export let hideOptions: Array<string> = [];
+    export let displayMode: DisplayMode = DisplayMode.Edit;
+    export let itemRender: any = null;
+    export let emptyText: string = null as unknown as string;
+    export let onChange: OnChangeHandler<any> = null as unknown as OnChangeHandler<any>;
+
+
+    let textValue: string;
+    let editor: any;
+    let oldValue = value;
+    let showPopup: boolean = false;
+    let mh;
+
+    const generateText = (v: string): string => {
+        let item = (options || []).find(el => el[keyField] == value);
+        return item == null ? (emptyText ?? '') : item[textField];
+    }
+
+    const openPopup = () => {
+        showPopup = true;
+    }
+
+    const handleItemClick = (data: any) => () => {
+        if (disableOptions.indexOf(data[keyField]) < 0) {
+            value = data[keyField];
+            editor.focus();
+            showPopup = false;
+        }
+    }
+
+    const cleanData = () => {
+        value = null;
+    }
+
+    $: textValue = generateText(value);
+
+    $: mh = `height: ${menu$height > 0 ? menu$height + 'px' : 'auto'}`;
+
+    $: if (value != oldValue) {
+        onChange?.(value);
+        oldValue = value;
+    }
+
+    $: if (showPopup) {
+        editor.focus();
+    }
+
+</script>
+
+<CommonPicker {displayMode} {variant} {style} {compact} dropDownIcon="uniface-icon-chevron-down"
+              bind:showPopup canClean={!mandatory && value!=null} autoFit clean={cleanData} {textValue} {readonly} {disabled}>
+
+    <input style="width: 100%" bind:this={editor} on:click={openPopup} {placeholder} {readonly}
+           class="text-editor" bind:value={textValue} on:blur on:focus/>
+
+    <div class="options-popover" style={mh} slot="popup-panel">
+        {#each options as op}
+            {#if hideOptions.indexOf(op[keyField]) < 0}
+                {#if itemRender != null}
+                    <svelte:component this={itemRender} item={op} disabled={disableOptions.indexOf(op[keyField])>-1}
+                                      on:click={handleItemClick(op)}/>
+                {:else}
+                    <div class="option-item" class:disabled={disableOptions.indexOf(op[keyField])>-1} aria-hidden="true"
+                         on:click={handleItemClick(op)}>
+                        <span>{op[textField]}</span>
+                    </div>
+                {/if}
+            {/if}
+        {/each}
+    </div>
+</CommonPicker>