@ticatec/uniface-element 0.1.9

package/dist/date-picker/ScrollBar.svelte

@@ -0,0 +1,113 @@
+<script lang="ts">
+
+    import type {OnChangeHandler} from "../common/OnChangeHandler";
+
+    export let value: number;
+    export let mode: 24 | 60 = 60;
+    export let enable: boolean = true;
+    export let onChange: OnChangeHandler<number> = null as unknown as OnChangeHandler<number>;
+
+    let list: Array<any> = [];
+
+    const decValue = () => {
+        if (enable) {
+            value = (value - 1 + mode) % mode;
+            resetList();
+        }
+    }
+
+    const incValue = () => {
+        if (enable) {
+            value = (value + 1 + mode) % mode;
+            resetList();
+        }
+    }
+
+    const resetList = () => {
+        list = [];
+        onChange?.(value);
+        for (let i=0; i<7; i++) {
+            list.push((value + i - 3 + mode) % mode);
+        }
+    }
+
+    let amendValue = 0;
+
+    const handleMouseWheel = (e: WheelEvent) => {
+        if (enable) {
+            value = (value + Math.round(e.deltaY / 5) + mode) % mode;
+            resetList();
+            e.stopPropagation();
+            e.preventDefault();
+        }
+    }
+
+    const handleMouseDown = (v: number) => (e: MouseEvent) => {
+        if (enable) {
+            amendValue = v;
+            timer = setInterval(() => {
+                if (amendValue != 0) {
+                    value = (value + amendValue + mode) % mode;
+                    resetList();
+                }
+            }, 200)
+        }
+    }
+
+    const handleMouseUp = () => {
+        if (timer != null) {
+            clearInterval(timer);
+            timer = null;
+        }
+    }
+
+    const handleDigitalClick = (v: number) => {
+        value = v;
+        resetList();
+    }
+
+    let timer: any;
+
+    $:resetList();
+
+</script>
+<div class="scroll-bar" tabindex="1" on:wheel={handleMouseWheel}>
+    <div class="action-bar">
+        <div class="arrow-up" class:disabled={!enable}>
+            <i class="uniface-icon-chevron-up" on:click={decValue} on:dragstart={(e)=>{e.preventDefault()}}
+                 on:mousedown={handleMouseDown(-1)} on:mouseup={handleMouseUp} on:mouseleave={handleMouseUp}></i>
+        </div>
+    </div>
+    {#each list as v}
+        <div style={!enable && v!= value ? "visibility: hidden; " : ""} class="digital-block" on:click={()=>{handleDigitalClick(v)}} class:inactive={v!=value}><span>{v}</span></div>
+    {/each}
+    <div class="action-bar">
+        <div class="arrow-down" class:disabled={!enable}>
+            <i class="uniface-icon-chevron-down" on:click={incValue} on:dragstart={(e)=>{e.preventDefault()}}
+                 on:mousedown={handleMouseDown(1)} on:mouseup={handleMouseUp} on:mouseleave={handleMouseUp}></i>
+        </div>
+    </div>
+</div>
+
+<style>
+    .scroll-bar {
+        width: 33%;
+    }
+
+    .top-bar {
+        text-align: center;
+    }
+
+    .digital-block {
+        padding: 3px 0;
+        line-height: 1.2em;
+        font-weight: 600;
+        font-size: 13px;
+    }
+
+    .inactive {
+        font-size: 1.0em;
+        font-weight: 100;
+        color: #7f7f7f;
+    }
+</style>

package/dist/date-picker/ScrollBar.svelte.d.ts

@@ -0,0 +1,24 @@
+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 ScrollBar: $$__sveltets_2_IsomorphicComponent<{
+    value: number;
+    mode?: 24 | 60;
+    enable?: boolean;
+    onChange?: OnChangeHandler<number>;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ScrollBar = InstanceType<typeof ScrollBar>;
+export default ScrollBar;

package/dist/date-picker/TimePanel.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+
+    import ScrollBar from "./ScrollBar.svelte";
+    import dayjs from "dayjs";
+    import type {OnChangeHandler} from "../common/OnChangeHandler";
+    import type {UniDate} from "../base-calendar/dateUtils";
+    import {dateUtils} from "../../lib/base-calendar";
+
+    export let value: UniDate;
+    export let style: string = '';
+    export let precision: "H" | "M" | "S" = "M";
+    export let onChange: OnChangeHandler<dayjs.Dayjs> = null as unknown as OnChangeHandler<dayjs.Dayjs>;
+
+    let hour: number, minute: number, second: number;
+    let time: dayjs.Dayjs = dateUtils.toDayjs(value);
+
+    $: {
+        hour = time == null ? 0 : time.hour();
+        minute = precision == "H" ? 0 : time == null ? 0 : time.minute();
+        second = precision == "S" ? time == null ? 0 : time.second() : 0;
+    }
+
+    const resetTime = (unit: dayjs.UnitType) => (v: number) => {
+        time = time.set(unit, v);
+        onChange(time);
+    }
+
+</script>
+<div class="time-picker-panel" {style}>
+    <div class="scroll-panel" style="flex: 1 1 auto">
+        <ScrollBar bind:value={hour} mode={24} onChange={resetTime('hour')}/>
+        {#if precision === "M" || precision === "S"}
+            <ScrollBar bind:value={minute} onChange={resetTime('minute')}/>
+            {#if precision === "S"}
+                <ScrollBar bind:value={second} onChange={resetTime('second')}/>
+            {/if}
+        {/if}
+    </div>
+</div>

package/dist/date-picker/TimePanel.svelte.d.ts

@@ -0,0 +1,26 @@
+import dayjs from "dayjs";
+import type { OnChangeHandler } from "../common/OnChangeHandler";
+import type { UniDate } from "../base-calendar/dateUtils";
+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 TimePanel: $$__sveltets_2_IsomorphicComponent<{
+    value: UniDate;
+    style?: string;
+    precision?: "H" | "M" | "S";
+    onChange?: OnChangeHandler<dayjs.Dayjs>;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type TimePanel = InstanceType<typeof TimePanel>;
+export default TimePanel;

package/dist/date-picker/index.d.ts

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

package/dist/date-picker/index.js

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

package/dist/date-range/DateRangeEditor.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+    import CommonRangeEditor from "../common-range-editor";
+    import {dateUtils} from "../base-calendar";
+    import Calendar from "../base-calendar";
+    import Popover from "../common/Popover.svelte";
+    import Icon from "../icon";
+    import type {UniDate} from "../base-calendar/dateUtils";
+    import dayjs from "dayjs";
+
+    export let variant: '' | 'plain' | 'outlined' | 'filled' = '';
+    export let compact: boolean = false;
+    export {className as class};
+    export let style: string = '';
+    export let fromValue: UniDate = null;
+    export let toValue: UniDate = null;
+    export let format: string = "YYYY-MM-DD";
+    export let min: string | Date | null = null;
+    export let max: string | Date | null = null;
+
+    let className: string = '';
+    let maxFrom;
+    let minTo;
+
+
+    const cleanValue = () => {
+        fromValue = null;
+        toValue = null;
+    }
+
+    const toTextValue = (v: any) => {
+        return dateUtils.formatDate(v, format);
+    }
+
+    const handleFormCalendarSelect = (value: dayjs.Dayjs) => {
+        fromValue = value.toDate();
+    }
+
+
+    const handleToCalendarSelect = (value: dayjs.Dayjs) => {
+        toValue = value.toDate();
+        showPopup = false;
+    }
+
+    const showPopover = () => {
+        showPopup = true;
+    }
+
+    $: textFrom = toTextValue(fromValue);
+    $: textTo = toTextValue(toValue);
+    $: maxFrom = toValue ?? max;
+    $: minTo = fromValue ?? min;
+
+    let showPopup = false;
+    let rootElement: any;
+
+    $: showActionIcon = fromValue != null || toValue != null;
+
+</script>
+
+<div bind:this={rootElement}>
+    <CommonRangeEditor {compact} {showActionIcon} class="{className}" {variant} {style} clean={cleanValue}>
+        <svelte:fragment slot="from">
+            <input style="width: 100%; text-align: center" readonly on:click={showPopover} value={textFrom}/>
+        </svelte:fragment>
+        <svelte:fragment slot="to">
+            <input style="width: 100%; text-align: center" readonly on:click={showPopover} value={textTo}/>
+        </svelte:fragment>
+        <svelte:fragment slot="trailing-icon">
+            <i class="uniface-icon-calendar uniface-editor-action-icon" aria-hidden="true" on:click={showPopover}></i>
+        </svelte:fragment>
+    </CommonRangeEditor>
+
+    {#if showPopup}
+        <Popover target={rootElement} on:close={()=>{showPopup=false}} style="width: 452px" autoFit={false}>
+            <div style="white-space: nowrap">
+                <Calendar style="border-right: 1px solid #f0f0f0" value={fromValue} onSelect={handleFormCalendarSelect} {min} max={maxFrom}/>
+                <Calendar value={toValue} onSelect={handleToCalendarSelect} min={minTo} {max}/>
+            </div>
+        </Popover>
+    {/if}
+</div>
+

package/dist/date-range/DateRangeEditor.svelte.d.ts

@@ -0,0 +1,31 @@
+import type { UniDate } from "../base-calendar/dateUtils";
+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 DateRangeEditor: $$__sveltets_2_IsomorphicComponent<{
+    variant?: "" | "plain" | "outlined" | "filled";
+    compact?: boolean;
+    class?: string;
+    style?: string;
+    fromValue?: UniDate;
+    toValue?: UniDate;
+    format?: string;
+    min?: string | Date | null;
+    max?: string | Date | null;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {
+    class: string;
+}, string>;
+type DateRangeEditor = InstanceType<typeof DateRangeEditor>;
+export default DateRangeEditor;

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

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

package/dist/date-range/index.js

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

package/dist/dialog/Dialog.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+
+    import {fade} from "svelte/transition";
+    import type {DialogCloseConfirm} from "./DialogCloseConfirm";
+    import ActionBar, {type ButtonActions} from "../action-bar";
+    import i18n from "../i18nContext";
+    import type ButtonAction from "../action-bar/ButtonAction";
+    import {onMount} from "svelte";
+
+    export let title: string = null as unknown as string;
+    export let actions: ButtonActions;
+    export let closeConfirm: DialogCloseConfirm;
+    export let content$style: string = '';
+    export let closeHandler: () => void;
+
+
+    export let closeAction: any;
+
+    export const close = async () => {
+        let confirm = closeConfirm ? await closeConfirm() : true;
+        if (confirm) {
+            closeHandler?.();
+        }
+    }
+
+    let dialogActions: ButtonActions;
+
+    let top: number = 0;
+    let left: number = 0;
+
+    let startMove: boolean = false;
+
+    const handleMouseDown = () => {
+        startMove = true;
+    }
+
+    const handleMouseMove = (e: MouseEvent) => {
+        if (startMove) {
+            top = top + e.movementY;
+            left = left + e.movementX;
+        }
+    }
+
+    const handleMouseUp = () => {
+        startMove = false;
+    }
+
+    onMount(async () => {
+        closeAction = closeAction ?? {
+            label: i18n.getText('uniface.btnClose', 'Close'),
+            type: 'secondary'
+        };
+        closeAction.handler = close;
+        dialogActions = actions ? [...actions, closeAction] : [closeAction];
+    })
+
+    $:console.log(closeAction)
+    $:  dialogActions = actions ? [...actions, closeAction] : [closeAction];
+
+</script>
+
+<div class="uniface-dialog" style="{startMove ? 'cursor: move' : ''}" transition:fade={{duration: 500}} aria-hidden="true"
+     on:mouseleave={handleMouseUp} on:mousemove={handleMouseMove}>
+    <div>
+        <div class="uniface-dialog-box" style="top: {top}px; left: {left}px">
+            <div class="title-bar" on:mousedown={handleMouseDown} on:mouseup={handleMouseUp} aria-hidden="true">
+                <div style="flex: 1 1 auto"><span>{title ?? 'New window'}</span></div>
+                <div style="flex: 0 0 auto; padding-left: 12px">
+                    <i class="uniface-icon-x dialog-action-button" aria-hidden="true" on:click={close}></i>
+                </div>
+            </div>
+            <div class="dialog-content" style={content$style}>
+                <slot></slot>
+            </div>
+            <div class="control-bar">
+                <ActionBar buttons={dialogActions}/>
+            </div>
+        </div>
+    </div>
+</div>

package/dist/dialog/Dialog.svelte.d.ts

@@ -0,0 +1,39 @@
+import type { DialogCloseConfirm } from "./DialogCloseConfirm";
+import { type ButtonActions } from "../action-bar";
+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 Dialog: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    title?: string;
+    actions: ButtonActions;
+    closeConfirm: DialogCloseConfirm;
+    content$style?: string;
+    closeHandler: () => void;
+    closeAction: any;
+    close?: () => Promise<void>;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {
+    close: () => Promise<void>;
+}, string>;
+type Dialog = InstanceType<typeof Dialog>;
+export default Dialog;

package/dist/dialog/DialogActions.d.ts

@@ -0,0 +1,16 @@
+import type { ButtonActions } from "../action-bar";
+import type ButtonAction from "../action-bar/ButtonAction";
+export default interface DialogActions {
+    /**
+     * 操作类
+     */
+    list: ButtonActions;
+    /**
+     * 关闭窗口的action
+     */
+    close: ButtonAction;
+    /**
+     * 关闭问询
+     */
+    closeConfirm: () => Promise<boolean>;
+}

package/dist/dialog/DialogActions.js

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

package/dist/dialog/DialogBoard.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+
+
+    import {onDestroy, onMount} from "svelte";
+    import {initialize} from "./IDialog";
+    import DialogBox from "./DialogBox.svelte";
+
+    export const open = (component: any, params: any) => {
+        let dialog = {component, params}
+        params.closeHandler = remove(dialog);
+        dialogs = [...dialogs, dialog];
+    }
+
+    let dialogs:Array<any> = [];
+    let board:any;
+
+    onMount(() => {
+        document.body.appendChild(board);
+        initialize(open);
+        return () => {
+            board && board.remove();
+        };
+    });
+
+    onDestroy(() => {
+        board && board.remove();
+    });
+
+    const remove = (dialog:any) => () => {
+        let pos = dialogs.indexOf(dialog);
+        if (pos > -1) {
+            dialogs.splice(pos, 1);
+            dialogs = [...dialogs];
+        }
+    }
+
+
+</script>
+
+<div bind:this={board} class="uniface-dialog-board" style="display: {dialogs.length > 0 ? 'block' : 'none'}">
+    {#each dialogs as dialog}
+        <DialogBox closeHandler={remove(dialog)} dialog={dialog.component} params={dialog.params} >
+        </DialogBox>
+    {/each}
+</div>

package/dist/dialog/DialogBoard.svelte.d.ts

@@ -0,0 +1,22 @@
+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 DialogBoard: $$__sveltets_2_IsomorphicComponent<{
+    open?: (component: any, params: any) => void;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {
+    open: (component: any, params: any) => void;
+}, string>;
+type DialogBoard = InstanceType<typeof DialogBoard>;
+export default DialogBoard;

package/dist/dialog/DialogBox.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+
+    import Dialog from "./Dialog.svelte";
+    import type {ButtonActions} from "../action-bar";
+    import type {DialogCloseConfirm} from "..";
+
+    export let dialog: any;
+    export let params: any;
+    export let closeHandler: () => void;
+    let actions: ButtonActions = null as unknown as ButtonActions;
+
+    let title: string;
+
+    let instance: any;
+
+    let closeConfirm: DialogCloseConfirm;
+    let closeAction: any;
+
+
+</script>
+
+<Dialog bind:this={instance} {title} {closeHandler} {closeConfirm} {actions} {closeAction}>
+    <svelte:component this={dialog} dialog={instance} bind:title bind:actions bind:closeConfirm bind:closeAction
+                      {...params}></svelte:component>
+</Dialog>

package/dist/dialog/DialogBox.svelte.d.ts

@@ -0,0 +1,22 @@
+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 DialogBox: $$__sveltets_2_IsomorphicComponent<{
+    dialog: any;
+    params: any;
+    closeHandler: () => void;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type DialogBox = InstanceType<typeof DialogBox>;
+export default DialogBox;

package/dist/dialog/DialogCloseConfirm.d.ts

@@ -0,0 +1 @@
+export type DialogCloseConfirm = () => Promise<boolean>;

package/dist/dialog/DialogCloseConfirm.js

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

package/dist/dialog/IDialog.d.ts

@@ -0,0 +1,5 @@
+export default interface IDialog {
+    showModal: (dialog: any, params: any) => void;
+}
+declare const initialize: (showModal: any) => void;
+export { initialize };

package/dist/dialog/IDialog.js

@@ -0,0 +1,6 @@
+const initialize = (showModal) => {
+    window.Dialog = {
+        showModal
+    };
+};
+export { initialize };

package/dist/dialog/index.d.ts

@@ -0,0 +1,13 @@
+import Dialog from "./Dialog.svelte";
+import DialogBoard from "./DialogBoard.svelte";
+import type IDialog from "./IDialog";
+import type { DialogCloseConfirm } from "./DialogCloseConfirm";
+declare global {
+    interface Window {
+        Dialog: IDialog;
+    }
+}
+export { type IDialog };
+export { type DialogCloseConfirm };
+export { DialogBoard };
+export default Dialog;

package/dist/dialog/index.js

@@ -0,0 +1,6 @@
+import Dialog from "./Dialog.svelte";
+import DialogBoard from "./DialogBoard.svelte";
+export {};
+export {};
+export { DialogBoard };
+export default Dialog;