@ticatec/uniface-element 0.1.9

package/dist/list-box/ListBox.svelte.d.ts

@@ -0,0 +1,50 @@
+import type { FunFilter } from "./types";
+import type { LazyLoader } from "./types";
+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 ListBox: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    readonly?: boolean;
+    style?: string;
+    header$style?: string;
+    list: Array<any>;
+    itemRender: any;
+    selectMode?: "none" | "single" | "multiple";
+    filter: FunFilter | null;
+    lazyLoader?: LazyLoader | null;
+    selectedItem?: any;
+    selectedList?: Array<any>;
+    class?: string;
+    item$props?: any;
+    onSelectChange?: (item: any) => void;
+    onItemDblClick?: (item: any) => void;
+}, {
+    header: {};
+    default: {};
+    loadMoreIndicator: {};
+    footer: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    header: {};
+    default: {};
+    loadMoreIndicator: {};
+    footer: {};
+}, {}, string>;
+type ListBox = InstanceType<typeof ListBox>;
+export default ListBox;

package/dist/list-box/ListViewItem.svelte

@@ -0,0 +1,6 @@
+<script lang="ts">
+
+</script>
+<div class="listview-item">
+
+</div>

package/dist/list-box/ListViewItem.svelte.d.ts

@@ -0,0 +1,18 @@
+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: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ListViewItem: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ListViewItem = InstanceType<typeof ListViewItem>;
+export default ListViewItem;

package/dist/list-box/index.d.ts

@@ -0,0 +1,5 @@
+import ListBox from "./ListBox.svelte";
+import type { FunFilter } from "./types";
+import type { LazyLoader, LoadResult } from "./types";
+export default ListBox;
+export type { LazyLoader, FunFilter, LoadResult };

package/dist/list-box/index.js

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

package/dist/list-box/types.d.ts

@@ -0,0 +1,6 @@
+export interface LoadResult {
+    hasMore: boolean;
+    list: Array<any>;
+}
+export type FunFilter = (item: any, text: string) => boolean;
+export type LazyLoader = (text: string, pageNo: number) => Promise<LoadResult>;

package/dist/list-box/types.js

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

package/dist/lookup-editor/LookupEditor.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+
+
+    import {DisplayMode} from "../common/DisplayMode";
+    import type {OnChangeHandler} from "../common/OnChangeHandler";
+    import CommonPicker from "../common/CommonPicker.svelte";
+
+    type OnActionHandler = () => void;
+
+    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 style: string = '';
+    export let placeholder: string = "";
+    export let displayMode: DisplayMode = DisplayMode.Edit;
+    export let text: string;
+    export let onChange: OnChangeHandler<any> = null as unknown as OnChangeHandler<any>;
+    export let onAction: OnActionHandler = null as unknown as OnActionHandler;
+
+    let oldValue = value;
+
+    $: if (oldValue != value) {
+        oldValue = value;
+    }
+
+    const clean = () => {
+        value = null;
+        text = '';
+        onChange?.(value)
+    }
+
+    const handleActionIconClick = () => {
+        onAction?.();
+    }
+
+</script>
+
+<CommonPicker {displayMode} {variant} {style} {compact} className="multiple" dropDownIcon="uniface-icon-more-horizontal"
+               canClean={!mandatory && value!=null} autoFit {clean} textValue={text} {readonly} {disabled} iconClickHandler={handleActionIconClick}>
+    <input style="width: 100%" {placeholder} class="text-editor" readonly value={text??''} {disabled}
+           on:keydown on:focus on:click={handleActionIconClick}/>
+</CommonPicker>

package/dist/lookup-editor/LookupEditor.svelte.d.ts

@@ -0,0 +1,36 @@
+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 LookupEditor: $$__sveltets_2_IsomorphicComponent<{
+    variant?: "" | "plain" | "outlined" | "filled";
+    disabled?: boolean;
+    readonly?: boolean;
+    compact?: boolean;
+    mandatory?: boolean;
+    value?: any;
+    style?: string;
+    placeholder?: string;
+    displayMode?: DisplayMode;
+    text: string;
+    onChange?: OnChangeHandler<any>;
+    onAction?: () => void;
+}, {
+    keydown: KeyboardEvent;
+    focus: FocusEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type LookupEditor = InstanceType<typeof LookupEditor>;
+export default LookupEditor;

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

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

package/dist/lookup-editor/index.js

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

package/dist/memo-editor/MemoEditor.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+
+    import {DisplayMode} from "../common/DisplayMode";
+    import prefixFilter from "../utils/prefixFilter";
+    import {onMount} from "svelte";
+    import Icon from "../icon";
+
+    const excludeAttrs = ['readonly', 'disabled', 'required', "rows", "form", "wrap"]
+
+    export let disabled: boolean = false;
+    export let readonly: boolean = false;
+    export let variant: '' | 'plain' | 'outlined' | 'filled' = '';
+    export {className as class};
+    export let style: string = '';
+    export let value: string;
+    export let wrap: "hard" | "soft" = "hard";
+    export let resize: 'none' | 'horizontal' | 'vertical' | 'both' = 'none';
+    export let displayMode: DisplayMode = DisplayMode.Edit;
+    export let input$rows: number = 3;
+    export let showIndicator: boolean = false;
+    export let maxLength: number = null as unknown as number;
+
+    let input$;
+    let className: string = '';
+    let textValue: string;
+    let len: number;
+
+
+    const escapeHTML = (text: string) => {
+        return text == null ? '' : text.replace(/</g, "&lt;").replace(/>/g, "&gt;");
+    }
+
+    $: textValue = displayMode == DisplayMode.View ? escapeHTML(value).replace(/\n/g, "<br/>").replace(/ /g, '&nbsp;') : value;
+
+    $: input$ = prefixFilter($$props, "input$", excludeAttrs);
+
+    $: len = textValue == null ? 0 : textValue.length;
+
+    let editor: any;
+    let width: number = 0;
+    onMount(() => {
+        if (editor) {
+            const resizeObserver = new ResizeObserver(entries => {
+                for (let entry of entries) {
+                    const style = getComputedStyle(editor);
+                    let paddingLeft = parseFloat(style.paddingLeft);
+                    let paddingRight = parseFloat(style.paddingRight);
+                    width = entry.contentRect.width + paddingRight + paddingLeft;
+                }
+            });
+            resizeObserver.observe(editor);
+            return () => resizeObserver.disconnect();
+        }
+    });
+
+    const clean = () => {
+        value='';
+    }
+
+</script>
+{#if displayMode === DisplayMode.View}
+    <div class="uniface-display-field" style="width:100%; min-height: 60px; {style};">
+        {@html textValue }
+    </div>
+{:else if readonly}
+    <textarea style="width:100%; {style}; resize: {resize}" class="uniface-memo-editor {variant} {className}" {readonly} rows={input$rows??3}
+              {value} {disabled} {...input$}></textarea>
+{:else}
+    <div class="uniface-memo-editor-wrapper" tabindex="-1" style="position: relative; {style}">
+        <textarea bind:this={editor} style="width:100%; ; resize: {resize}" class="uniface-memo-editor {variant} {className}"
+                  rows={input$rows??3}
+                  {wrap} bind:value {disabled} {...input$} maxlength={maxLength}
+                  on:blur on:focus on:keydown on:keyup on:keypress on:change on:input></textarea>
+        {#if showIndicator && maxLength}
+            <div class="uniface-memo-indicator" style="width: {width}px">
+                <span>{len} / {maxLength}</span>
+            </div>
+        {/if}
+        {#if !disabled && value && value.length > 0}
+            <div class="action-button-wrapper" style="position: absolute; top: 0; left: 0; width: {width}px;">
+                <Icon name="uniface-icon-x" clickable class="uniface-editor-clean-icon" onClick={clean}/>
+            </div>
+        {/if}
+    </div>
+{/if}

package/dist/memo-editor/MemoEditor.svelte.d.ts

@@ -0,0 +1,43 @@
+import { DisplayMode } from "../common/DisplayMode";
+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 MemoEditor: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: any;
+    disabled?: boolean | undefined;
+    readonly?: boolean | undefined;
+    variant?: "" | "plain" | "outlined" | "filled" | undefined;
+    class?: string | undefined;
+    style?: string | undefined;
+    value: string;
+    wrap?: "hard" | "soft" | undefined;
+    resize?: "none" | "horizontal" | "vertical" | "both" | undefined;
+    displayMode?: DisplayMode | undefined;
+    input$rows?: number | undefined;
+    showIndicator?: boolean | undefined;
+    maxLength?: number | undefined;
+}, {
+    blur: FocusEvent;
+    focus: FocusEvent;
+    keydown: KeyboardEvent;
+    keyup: KeyboardEvent;
+    keypress: KeyboardEvent;
+    change: Event;
+    input: Event;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {
+    class: string;
+}, string>;
+type MemoEditor = InstanceType<typeof MemoEditor>;
+export default MemoEditor;

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

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

package/dist/memo-editor/index.js

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

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

@@ -0,0 +1,23 @@
+type ShowFun = (message: string, title?: string, escapeHTML?: boolean) => Promise<void>;
+type ShowConfirmFun = (message: string, title?: string | null, escapeHTML?: boolean, type?: 'info' | 'warning') => Promise<any>;
+export default interface IMessageBox {
+    showInfo: ShowFun;
+    showConfirm: ShowConfirmFun;
+}
+declare enum ModuleResult {
+    MR_OK = 1,
+    MR_CANCEL = 2,
+    MR_CLOSE = 3
+}
+declare const InfoButtons: {
+    label: string;
+    type: string;
+    result: ModuleResult;
+}[];
+declare const ConfirmButtons: {
+    label: string;
+    type: string;
+    result: ModuleResult;
+}[];
+declare const initialize: (showInfo: any, showConfirm: any) => void;
+export { initialize, ModuleResult, InfoButtons, ConfirmButtons };

package/dist/message-box/IMessageBox.js

@@ -0,0 +1,22 @@
+import i18n from "../i18nContext";
+;
+var ModuleResult;
+(function (ModuleResult) {
+    ModuleResult[ModuleResult["MR_OK"] = 1] = "MR_OK";
+    ModuleResult[ModuleResult["MR_CANCEL"] = 2] = "MR_CANCEL";
+    ModuleResult[ModuleResult["MR_CLOSE"] = 3] = "MR_CLOSE";
+})(ModuleResult || (ModuleResult = {}));
+const InfoButtons = [
+    { label: i18n.getText('uniface.btnClose', 'Close'), type: 'primary', result: ModuleResult.MR_OK }
+];
+const ConfirmButtons = [
+    { label: i18n.getText('uniface.btnCancel', 'Cancel'), type: 'default', result: ModuleResult.MR_CANCEL },
+    { label: i18n.getText('uniface.btnConfirm', 'OK'), type: 'primary', result: ModuleResult.MR_OK }
+];
+const initialize = (showInfo, showConfirm) => {
+    window.MessageBox = {
+        showInfo,
+        showConfirm
+    };
+};
+export { initialize, ModuleResult, InfoButtons, ConfirmButtons };

package/dist/message-box/MessageBoxBoard.svelte

@@ -0,0 +1,145 @@
+<script lang="ts">
+
+    import {onDestroy, onMount} from "svelte";
+    import {initialize, ConfirmButtons, ModuleResult} from "./IMessageBox";
+    import Button from "../button";
+    import {fade} from "svelte/transition";
+    import utils from "../common/utils";
+
+    export let appTitle: string = null as unknown as string;
+
+    let board: any;
+    let visible: boolean = false;
+    let resolve: any = null;
+    let title: string;
+    let message: string;
+    let type: string;
+    let escapeHTML: boolean = true;
+    let buttons: Array<any> | null;
+    let iconType: string;
+
+    let show = (_message: string, _title: string, _escapeHTML: boolean = false): Promise<void> => {
+        return showMessageBox(_message, null, _title, null, _escapeHTML)
+    }
+
+    let showConfirm = (_message: string, _title: string, _escapeHTML: boolean = false, type: 'info' | 'warning' = 'info'): Promise<any> => {
+        return showMessageBox(_message, ConfirmButtons, _title, type, _escapeHTML)
+    }
+
+    let showMessageBox = (_message: string, _buttons: Array<any> | null, _title: string, _type: string | null, _escapeHTML: boolean = true): Promise<any> => {
+        if (!visible) {
+            top = 0;
+            left = 0;
+            startMove = false;
+            message = _message;
+            title = _title ?? appTitle;
+            escapeHTML = _escapeHTML != false;
+            buttons = _buttons;
+            iconType = _type == null ? 'uniface-icon-alert-circle' : _type == 'info' ? 'uniface-icon-help-circle' : 'uniface-icon-alert-triangle';
+            type = _type ?? "info";
+            visible = true;
+            return new Promise<any>(r => {
+                resolve = r
+            });
+        } else {
+            return new Promise<any>((r, reject) => {
+                reject(new Error('No message box slot.'))
+            });
+        }
+    }
+
+    onMount(() => {
+        document.body.appendChild(board);
+        initialize(show, showConfirm);
+        return () => {
+            board && board.remove();
+        };
+    });
+
+    onDestroy(() => {
+        board && board.remove();
+    });
+
+    let top: number = 0;
+    let left: number = 0;
+
+    let startMove: boolean = false;
+
+    const handleMouseDown = (e: MouseEvent) => {
+        startMove = true;
+    }
+
+    const handleMouseMove = (e: MouseEvent) => {
+        if (startMove) {
+            top = top + e.movementY;
+            left = left + e.movementX;
+        }
+    }
+
+    const handleMouseUp = (e: MouseEvent) => {
+        startMove = false;
+    }
+
+    const handleButtonClick = (mr: ModuleResult) => (e: MouseEvent) => {
+        if (resolve != null) {
+            resolve(mr);
+            resolve = null;
+            visible = false;
+        }
+    }
+
+    const handleCloseClick = (e: MouseEvent) => {
+        if (resolve != null) {
+            resolve(ModuleResult.MR_CANCEL);
+            resolve = null;
+            visible = false;
+        }
+    }
+
+
+</script>
+
+<div bind:this={board} class="uniface-message-board" style="display: {visible ? 'block' : 'none'}">
+    {#if visible}
+        <div style={startMove ? 'cursor: move' : ''} on:mousemove={handleMouseMove} aria-hidden="true">
+            <div class="uniface-message-box" transition:fade={{duration: 500}}>
+                <div style="top: {top}px; left: {left}px">
+                    <div class="title-bar" aria-hidden="true" on:mousedown={handleMouseDown} on:mouseup={handleMouseUp}>
+                        <div>
+                            <i class="uniface-icon-x dialog-action-button" aria-hidden="true" on:click={handleCloseClick}></i>
+                        </div>
+                    </div>
+                    <div class="box-content" style="min-height: 40px">
+                        {#if iconType != null}
+                            <div class="box-icon {type}">
+                                <i style="font-size: 40px" class={iconType}></i>
+                            </div>
+                        {/if}
+                        <div style="flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center">
+                            {#if !utils.isEmpty(title)}
+                                <div class="message-topic">
+                                    <span>{title}</span>
+                                </div>
+                            {/if}
+                            <div>
+                                {#if escapeHTML}
+                                    <span>{@html message}</span>
+                                {:else }
+                                    <span>{message}</span>
+                                {/if}
+                            </div>
+                        </div>
+                    </div>
+                    <div class="control-bar">
+                        {#if buttons && buttons.length > 0}
+                            {#each buttons as button}
+                                <Button style="margin: 0 4px; width: 90px" type={button.type??''} label={button.label}
+                                        onClick={handleButtonClick(button.result)}/>
+                            {/each}
+                        {/if}
+                    </div>
+                </div>
+            </div>
+        </div>
+    {/if}
+</div>

package/dist/message-box/MessageBoxBoard.svelte.d.ts

@@ -0,0 +1,20 @@
+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 MessageBoxBoard: $$__sveltets_2_IsomorphicComponent<{
+    appTitle?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type MessageBoxBoard = InstanceType<typeof MessageBoxBoard>;
+export default MessageBoxBoard;

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

@@ -0,0 +1,5 @@
+import MessageBoxBoard from "./MessageBoxBoard.svelte";
+import type IMessageBox from "./IMessageBox";
+import { ModuleResult } from "./IMessageBox";
+export default MessageBoxBoard;
+export { ModuleResult, type IMessageBox };

package/dist/message-box/index.js

@@ -0,0 +1,4 @@
+import MessageBoxBoard from "./MessageBoxBoard.svelte";
+import { ModuleResult } from "./IMessageBox";
+export default MessageBoxBoard;
+export { ModuleResult };

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

@@ -0,0 +1,27 @@
+export default interface MenuItem {
+    /**
+     * 菜单编码
+     */
+    code: string;
+    /**
+     * 菜单文字
+     */
+    text: string;
+    /**
+     * 用于i18n的key
+     */
+    key?: string;
+    /**
+     * 绑定数据，用户处理，通常为uri的跳转地址
+     */
+    data?: any;
+    /**
+     * 子菜单项
+     */
+    children?: Array<MenuItem>;
+    /**
+     * 是否打开
+     */
+    expand?: boolean;
+}
+export type OnMenuClick = (item: MenuItem) => void;

package/dist/nav-menu/MenuItem.js

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

package/dist/nav-menu/NavigatorMenu.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+    import type MenuItem from "./MenuItem";
+    import type {OnMenuClick} from "./MenuItem";
+    import NavigatorMenuItem from "./NavigatorMenuItem.svelte";
+
+    export let menuItems: Array<MenuItem>;
+    export let style: string = '';
+    export let onItemClick: OnMenuClick;
+
+
+</script>
+
+
+<div class="uniface-navigator-menu-panel" {style}>
+    {#if menuItems && menuItems.length > 0}
+        <ul>
+            {#each menuItems as item}
+                <NavigatorMenuItem {item} onMenuItemClick={onItemClick} expand={item.expand}/>
+            {/each}
+        </ul>
+    {/if}
+</div>

package/dist/nav-menu/NavigatorMenu.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 NavigatorMenu: $$__sveltets_2_IsomorphicComponent<{
+    menuItems: Array<MenuItem>;
+    style?: string;
+    onItemClick: OnMenuClick;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type NavigatorMenu = InstanceType<typeof NavigatorMenu>;
+export default NavigatorMenu;