@ticatec/uniface-element 0.1.9

package/dist/image-files/ImagePreview.svelte.d.ts

@@ -0,0 +1,23 @@
+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 ImagePreview: $$__sveltets_2_IsomorphicComponent<{
+    src?: string;
+    visible?: boolean;
+}, {
+    click: MouseEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ImagePreview = InstanceType<typeof ImagePreview>;
+export default ImagePreview;

package/dist/image-files/ImageRender.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+
+    import type ImageFile from "./ImageFile";
+
+
+    export let file: ImageFile;
+    export let readonly: boolean = false;
+    export let onRemove: (file: ImageFile) => Promise<void>;
+    export let onPreview: (file: ImageFile) => void;
+
+
+    const removeFile = () => {
+        onRemove?.(file);
+    }
+
+</script>
+
+<div style="width: 80px; box-sizing: border-box; padding: 6px 8px;">
+    <div class="file-icon">
+        <img src={file.thumbnail??file.uri} alt="" width="40px" height="40px"/>
+        <div class="img-overlay">
+            <div>
+                <div class="action-icon" style="top: 15px;">
+                    <i class="uniface-icon-eye" aria-hidden="true" on:click={()=>{onPreview?.(file)}}></i>
+                </div>
+                {#if !readonly}
+                    <div class="action-icon" style="top: 35px;">
+                        <i class="uniface-icon-x" aria-hidden="true" on:click={removeFile}></i>
+                    </div>
+                {/if}
+            </div>
+        </div>
+
+
+    </div>
+</div>

package/dist/image-files/ImageRender.svelte.d.ts

@@ -0,0 +1,24 @@
+import type ImageFile from "./ImageFile";
+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 ImageRender: $$__sveltets_2_IsomorphicComponent<{
+    file: ImageFile;
+    readonly?: boolean;
+    onRemove: (file: ImageFile) => Promise<void>;
+    onPreview: (file: ImageFile) => void;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ImageRender = InstanceType<typeof ImageRender>;
+export default ImageRender;

package/dist/image-files/index.d.ts

@@ -0,0 +1,4 @@
+import ImageFilesField from "./ImageFilesField.svelte";
+import type ImageFile from "./ImageFile";
+export default ImageFilesField;
+export type { ImageFile };

package/dist/image-files/index.js

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

package/dist/index.d.ts

@@ -0,0 +1,26 @@
+import { DateContext } from "./base-calendar";
+import type CardAction from "./card/CardAction";
+import type { DialogCloseConfirm, IDialog } from './dialog';
+import { type IMessageBox, ModuleResult } from "./message-box";
+import type { Toast } from "./toast";
+import type { Indicator } from "./indicator";
+import type { UnitOption } from "./unit-number-editor";
+import { DisplayMode } from "./common/DisplayMode.js";
+import type { FunFilter, LazyLoader, LoadResult } from "./list-box";
+import type { ActionsColumn, FormatCell, CellHint, IndicatorColumn, RowAction, GetRowActions, ActionFunction, DataColumn } from "./data-table";
+import type { ContextMenuItem, OnContextMenu, ActionCallback } from "./context-menu";
+import type { MouseClickHandler } from "./common/MouseClickHandler";
+export { DateContext, ModuleResult, DisplayMode };
+declare global {
+    interface Window {
+        Indicator: Indicator;
+        Toast: Toast;
+        MessageBox: IMessageBox;
+        Dialog: IDialog;
+    }
+}
+export type { CardAction, IDialog, DialogCloseConfirm, IMessageBox, Toast, UnitOption };
+export type { MouseClickHandler };
+export type { LazyLoader, FunFilter, LoadResult };
+export type { ActionsColumn, FormatCell, CellHint, IndicatorColumn, RowAction, GetRowActions, ActionFunction, DataColumn };
+export type { ContextMenuItem, OnContextMenu, ActionCallback };

package/dist/index.js

@@ -0,0 +1,4 @@
+import { DateContext } from "./base-calendar";
+import { ModuleResult } from "./message-box";
+import { DisplayMode } from "./common/DisplayMode.js";
+export { DateContext, ModuleResult, DisplayMode };

package/dist/indicator/Indicator.d.ts

@@ -0,0 +1,8 @@
+type ShowIndicator = (msg: string) => void;
+type HideIndicator = () => void;
+export default interface Indicator {
+    show: ShowIndicator;
+    hide: HideIndicator;
+}
+declare const initialize: (show: ShowIndicator, hide: HideIndicator) => void;
+export { initialize };

package/dist/indicator/Indicator.js

@@ -0,0 +1,7 @@
+const initialize = (show, hide) => {
+    window.Indicator = {
+        show,
+        hide
+    };
+};
+export { initialize };

package/dist/indicator/IndicatorBoard.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+
+
+    import {onDestroy, onMount} from "svelte";
+    import {initialize} from "./Indicator";
+    import iconLoading from "../assets/loading.gif";
+
+    let indicator: string;
+
+    export const show = (msg: string) => {
+        indicator = msg;
+        visible = true;
+    }
+
+    export let hide = () => {
+        visible = false;
+    }
+
+
+    let board: any;
+    let visible: boolean = false;
+
+    onMount(() => {
+        document.body.appendChild(board);
+        initialize(show, hide)
+        return () => {
+            board && board.remove();
+        };
+    });
+
+    onDestroy(() => {
+        board && board.remove();
+    });
+
+
+
+</script>
+
+<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"/>
+        <span style="padding-left: 12px">{indicator}</span>
+    </div>
+</div>

package/dist/indicator/IndicatorBoard.svelte.d.ts

@@ -0,0 +1,23 @@
+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 IndicatorBoard: $$__sveltets_2_IsomorphicComponent<{
+    show?: (msg: string) => void;
+    hide?: () => void;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {
+    show: (msg: string) => void;
+}, string>;
+type IndicatorBoard = InstanceType<typeof IndicatorBoard>;
+export default IndicatorBoard;

package/dist/indicator/index.d.ts

@@ -0,0 +1,4 @@
+import IndicatorBoard from "./IndicatorBoard.svelte";
+import type Indicator from "./Indicator";
+export default IndicatorBoard;
+export type { Indicator };

package/dist/indicator/index.js

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

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

@@ -0,0 +1,107 @@
+<script lang="ts">
+
+    import {DisplayMode} from "../common/DisplayMode";
+    import Popover from "../common/Popover.svelte";
+    import type {OnChangeHandler} from "../common/OnChangeHandler";
+    import CommonPicker from "../common/CommonPicker.svelte";
+
+    type OnInputHandler = (s: string) => void;
+
+    export let variant: '' | 'plain' | 'outlined' | 'filled' = '';
+    export let disabled: boolean = false;
+    export let readonly: boolean = false;
+    export let compact: boolean = false;
+    export let text: string = '';
+    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 displayMode: DisplayMode = DisplayMode.Edit;
+    export let itemRender: any = null;
+    export let onChange: OnChangeHandler<any> = null as unknown as OnChangeHandler<any>;
+    export let onInput: OnInputHandler = null as unknown as OnInputHandler;
+
+    let editor: any;
+    let inputText: string;
+    let oldValue: any = value;
+
+    const handleItemClick = (data: any) => () => {
+        value = data[keyField];
+        text = data[textField];
+        if (value != oldValue) {
+            onChange?.(value);
+        }
+        editor.focus();
+        showPopup = false;
+    }
+
+    let composing: boolean = false;
+
+    const handleInput = () => {
+        if (composing == false) {
+            text = inputText;
+            value = null;
+            onInput?.(text);
+        }
+    };
+    const handleCompositionStart = (event: CompositionEvent) => {
+        composing = true;
+    };
+
+    const handleCompositionEnd = (event: CompositionEvent) => {
+        composing = false;
+        text = inputText;
+        value = null;
+        onInput?.(text);
+    };
+
+    const handleBlurEvent = (e: FocusEvent) => {
+        if (value == null) {
+            text = '';
+        }
+    }
+
+    const clean = () => {
+        value = null;
+        text = '';
+        onChange?.(value);
+    }
+
+    let showPopup: boolean = false;
+
+    let mh;
+
+    $: mh = `height: ${menu$height > 0 ? menu$height + 'px' : 'auto'}`;
+
+    $: showPopup = options && options.length > 0;
+
+    $: inputText = text;
+
+
+</script>
+<!-- 待解决浏览模式显示的问题 -->
+
+<CommonPicker {displayMode} {variant} {style} {compact}
+              bind:showPopup canClean={value!=null} autoFit {clean} textValue={text} {readonly} {disabled}>
+    <input style="width: 100%" bind:this={editor} {placeholder}
+           class="text-editor" bind:value={inputText} {disabled}
+           on:input={handleInput}
+           on:compositionstart={handleCompositionStart} on:compositionend={handleCompositionEnd}
+           on:blur={handleBlurEvent} on:focus/>
+
+    <div class="options-popover" style={mh} slot="popup-panel">
+        {#each options as op}
+            {#if itemRender != null}
+                <svelte:component this={itemRender} item={op}
+                                  on:click={handleItemClick(op)}/>
+            {:else}
+                <div on:click={handleItemClick(op)} aria-hidden="true">
+                    <span>{op[textField]}</span>
+                </div>
+            {/if}
+        {/each}
+    </div>
+</CommonPicker>

package/dist/input-options-select/InputOptionsSelect.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 InputOptionsSelect: $$__sveltets_2_IsomorphicComponent<{
+    variant?: "" | "plain" | "outlined" | "filled";
+    disabled?: boolean;
+    readonly?: boolean;
+    compact?: boolean;
+    text?: string;
+    value?: any;
+    options?: Array<any>;
+    keyField?: string;
+    textField?: string;
+    menu$height?: number;
+    style?: string;
+    placeholder?: string;
+    displayMode?: DisplayMode;
+    itemRender?: any;
+    onChange?: OnChangeHandler<any>;
+    onInput?: (s: string) => void;
+}, {
+    focus: FocusEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type InputOptionsSelect = InstanceType<typeof InputOptionsSelect>;
+export default InputOptionsSelect;

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

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

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

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

package/dist/layout/flex/FlexBlock.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+
+    export let fixed: boolean = false;
+    export let style: string = '';
+    export {className as class };
+    export let direction: 'horizontal' | 'vertical' = 'horizontal';
+    export let flex: boolean = false;
+    export let autoFit: boolean = false;
+    export let grow: boolean = false;
+    export let shrink: boolean = false;
+
+    let className:string = '';
+
+</script>
+<div class:flex class="flex-block {flex ? direction : ''}" class:fixed class:grow class:shrink class:auto_fit={autoFit} {style}>
+    <slot/>
+</div>

package/dist/layout/flex/FlexBlock.svelte.d.ts

@@ -0,0 +1,38 @@
+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;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const FlexBlock: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    fixed?: boolean;
+    style?: string;
+    class?: string;
+    direction?: "horizontal" | "vertical";
+    flex?: boolean;
+    autoFit?: boolean;
+    grow?: boolean;
+    shrink?: boolean;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {
+    class: string;
+}, string>;
+type FlexBlock = InstanceType<typeof FlexBlock>;
+export default FlexBlock;

package/dist/layout/flex/index.d.ts

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

package/dist/layout/flex/index.js

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

package/dist/layout/index.d.ts

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

package/dist/layout/index.js

@@ -0,0 +1 @@
+"use strict";

package/dist/list-box/ListBox.svelte

@@ -0,0 +1,184 @@
+<script lang="ts">
+    import {onMount} from "svelte";
+    import SearchBox from "../search-box"
+    import type {FunFilter} from "./types";
+    import type {LazyLoader} from "./types";
+    import CheckBox from "../checkbox/CheckBox.svelte";
+
+    let className: string = '';
+
+    type OnSelectChange = (item: any) => void;
+    type OnItemDblClick = (item: any) => void;
+
+    export let readonly:boolean = false;
+    export let style: string = '';
+    export let header$style: string = '';
+    export let list:Array<any>;
+    export let itemRender: any;
+    export let selectMode: 'none' | 'single' | 'multiple' = 'none';
+    export let filter: FunFilter | null;
+    export let lazyLoader: LazyLoader | null = null;
+    export let selectedItem: any = null;
+    export let selectedList: Array<any> = [];
+    export {className as class};
+    export let item$props: any = null;
+    export let onSelectChange: OnSelectChange= null as unknown as OnSelectChange;
+    export let onItemDblClick: OnItemDblClick = null as unknown as OnItemDblClick;
+
+    let filterText: string;
+    let hasMore: boolean;
+    let isBusy: boolean = false;
+    let pageNo: number = 1;
+
+    let filteredList: Array<any>;
+
+    const handleItemClick = (item:any) => (e: MouseEvent) => {
+        if (selectMode == 'single' && readonly==false) {
+            if (selectedItem != item) {
+                selectedItem = item;
+                onSelectChange?.(item);
+            }
+        }
+    }
+
+    const handleItemDblClick = (item:any) => (e: MouseEvent) => {
+        if (selectMode == 'single') {
+            onItemDblClick?.(item);
+        }
+    }
+
+    const doFilter = () => {
+        const newList:Array<any> = [];
+        list.forEach(item => {
+            if (filter?.(item, filterText)) {
+                newList.push(item)
+            }
+            filteredList = newList;
+        });
+        if (selectMode == 'single') {
+            selectedItem = null;
+            onSelectChange?.(null);
+        }
+    }
+
+    const lazyLoad = async (clean: boolean = true) => {
+        isBusy = true;
+        try {
+            let result = await lazyLoader?.(filterText, pageNo);
+            if (result) {
+                if (clean) {
+                    list = result.list;
+                } else {
+                    list = [...list, ...result.list];
+                }
+                filteredList = list;
+                hasMore = result.hasMore;
+            }
+        } finally {
+            isBusy = false;
+        }
+    }
+
+    const handleCriteriaChange = (e) => {
+        if (lazyLoader != null) {
+            pageNo = 1;
+            lazyLoad();
+        } else {
+            if (filterText.length > 0) {
+                doFilter();
+            } else {
+                filteredList = [...(list ?? [])]
+            }
+        }
+    }
+
+    $: if (list && lazyLoader == null) {
+        if (filter != null && filterText && filterText.length > 0) {
+            doFilter();
+        } else {
+            filteredList = list;
+        }
+    }
+
+    const handleSelectionChanged = (item: any) => (e) => {
+        let idx = selectedList.indexOf(item);
+        if (e.detail) {
+            if (idx < 0) {
+                selectedList = [...selectedList, item];
+            }
+        } else {
+            if (idx>-1) {
+                selectedList.splice(idx, 1);
+                selectedList = [...selectedList];
+            }
+        }
+    }
+
+    onMount(async () => {
+        if (lazyLoader != null) {
+            filterText = '';
+            await lazyLoad();
+        }
+    })
+
+    const fetchMore = async () => {
+        pageNo++;
+        await lazyLoad(false);
+    }
+
+    let scrollElement:any;
+
+    const handleScroll = () => {
+        const bottom = scrollElement.scrollHeight - scrollElement.scrollTop === scrollElement.clientHeight;
+        if (bottom && lazyLoader && !isBusy && hasMore) {
+            fetchMore();
+        }
+    }
+
+
+</script>
+
+<div class="uniface-listbox {className}" {style}>
+    {#if $$slots.header || filter || lazyLoader}
+        <div class="listbox-header" style={header$style}>
+            {#if $$slots.header}
+                <slot name="header"></slot>
+            {/if}
+            {#if readonly===false && (filter!=null || lazyLoader!=null)}
+                <SearchBox loading={isBusy} variant="plain" style="width: 100%" bind:value={filterText} on:change={handleCriteriaChange}/>
+            {/if}
+        </div>
+    {/if}
+    <div class="listbox-content" class:selectable={selectMode==='single'} bind:this={scrollElement} on:scroll={handleScroll}>
+        {#if filteredList && itemRender}
+            {#each filteredList as item}
+                {#if selectMode === "multiple"}
+                    <div class="listview-item" style="display: flex; flex-direction: row; align-items: center">
+                        <CheckBox style="flex: 0 0 auto; margin-left: 8px" {readonly} value={selectedList.indexOf(item) > -1} on:change={handleSelectionChanged(item)}/>
+                        <svelte:component this={itemRender} {readonly} {item} {...item$props}/>
+                    </div>
+                {:else }
+                    <div class="listview-item" class:selected={item===selectedItem} aria-hidden="true"
+                         on:dblclick={handleItemDblClick(item)} on:click={handleItemClick(item)}>
+                        <svelte:component this={itemRender} {item} {readonly} selected={item===selectedItem}
+                                          {...item$props}/>
+                    </div>
+                {/if}
+            {/each}
+        {/if}
+        <slot></slot>
+        {#if hasMore}
+            <slot name="loadMoreIndicator"></slot>
+        {/if}
+    </div>
+    {#if $$slots.footer}
+        <div class="listbox-footer">
+            <slot name="footer"></slot>
+        </div>
+    {/if}
+    {#if isBusy}
+        <div class="uniface-mask">
+
+        </div>
+    {/if}
+</div>