@ticatec/uniface-element 0.1.9

package/dist/common/FullscreenOverlay.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+
+    import Portal from "svelte-portal";
+
+    export let visible: boolean = false;
+
+</script>
+
+{#if visible}
+    <Portal target="body">
+        <div class="uniface-mask-overlay">
+            <div style="position: relative; width: 100%; height: 100%;"
+                 on:click={()=>{visible = false}} aria-hidden="true">
+                <slot></slot>
+            </div>
+        </div>
+    </Portal>
+{/if}

package/dist/common/FullscreenOverlay.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;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const FullscreenOverlay: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    visible?: boolean;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type FullscreenOverlay = InstanceType<typeof FullscreenOverlay>;
+export default FullscreenOverlay;

package/dist/common/ModalPopover.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+
+    import Portal from "svelte-portal";
+    import {onMount} from "svelte";
+
+    export let visible: boolean = false;
+    export let canClose: boolean = true;
+
+    let hidden = true;
+
+    onMount(() => {
+        setTimeout(() => hidden = false, 100);  // 延迟显示 portal
+    });
+
+</script>
+
+{#if visible}
+    <Portal target="body">
+        <div class="uniface-mask-overlay" class:hidden>
+            <div style="position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center"
+                 on:click={()=>{if (canClose) {visible = false}}} aria-hidden="true">
+                <div style="flex: 0 0 auto">
+                    <slot></slot>
+                </div>
+            </div>
+        </div>
+    </Portal>
+{/if}

package/dist/common/ModalPopover.svelte.d.ts

@@ -0,0 +1,30 @@
+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 ModalPopover: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    visible?: boolean;
+    canClose?: boolean;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type ModalPopover = InstanceType<typeof ModalPopover>;
+export default ModalPopover;

package/dist/common/MouseClickHandler.d.ts

@@ -0,0 +1 @@
+export type MouseClickHandler = (event: MouseEvent) => void;

package/dist/common/MouseClickHandler.js

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

package/dist/common/OnChangeHandler.d.ts

@@ -0,0 +1 @@
+export type OnChangeHandler<T> = (value: T) => void;

package/dist/common/OnChangeHandler.js

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

package/dist/common/OnSelectHandler.d.ts

@@ -0,0 +1 @@
+export type OnSelectHandler<T> = (value: T) => void;

package/dist/common/OnSelectHandler.js

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

package/dist/common/Popover.svelte

@@ -0,0 +1,110 @@
+
+<script lang="ts">
+    import {createEventDispatcher, onMount} from 'svelte';
+    import {clickOutside} from './uniface-utils';
+    import Portal from "svelte-portal";
+
+    const dispatch = createEventDispatcher();
+
+    export let style: string = '';
+    export let target: any;
+    export let align: 'left' | 'right' | 'center' = 'left';
+    export let autoFit: boolean = true;
+
+    export let margin: number = 0;
+
+    let position = {top: 0, left: 0, width: 0, height: 0};
+
+
+    const updatePosition = () => {
+        if (!hidden && target) {
+            let rect = target.getBoundingClientRect();
+            position = {
+                top: rect.top,
+                left: rect.left,
+                width: rect.width,
+                height: rect.height
+            };
+            rect = contentPanel.getBoundingClientRect();
+            width = rect.width;
+            vertPos = (h - position.top - position.height) > rect.height ? `top: ${(position.top + position.height)}px` : `top: ${position.top - rect.height}px`;
+
+            if (align == 'left') {
+                if (position.left + position.width < width) {
+                    horzPos = "left: 0";
+                } else {
+                    horzPos = `right: 0`;
+                }
+            } else {
+                if (position.left + position.width > width) {
+                    horzPos = `right: 0`;
+                } else {
+                    horzPos = "left: 0";
+                }
+            }
+            if (autoFit) {
+                horzPos += '; width: 100%'
+            }
+        }
+    }
+
+    const checkPosition = () => {
+        if (!hidden && target) {
+            const rect = target.getBoundingClientRect();
+            if (rect.top != position.top || rect.left != position.left) {
+                updatePosition();
+            }
+        }
+    }
+
+    let hidden = true;
+
+
+
+    onMount(() => {
+        const overflowY = window.getComputedStyle(document.body).overflowY;
+        document.body.style.overflowY = 'hidden';
+        setTimeout(() => {
+            updatePosition();
+            hidden = false;
+            setTimeout(()=>{
+                document.body.style.overflowY = overflowY;
+            }, 50);
+        }, 50);  // 延迟显示 portal
+        window.addEventListener("resize", updatePosition);
+        document.addEventListener("scroll", updatePosition, {passive: false});
+        const interval = setInterval(checkPosition, 10); // 每 100ms 检测一次
+        return () => {
+            window.removeEventListener("resize", updatePosition);
+            document.removeEventListener("scroll", updatePosition);
+            clearInterval(interval);
+        };
+    });
+
+    const close = () => {
+        dispatch('close');
+    };
+
+    let contentPanel: any;
+
+    let w: number, h: number;
+    let width = 0;
+    let vertPos = '';
+    let horzPos = '';
+
+</script>
+<svelte:window bind:innerWidth={w} bind:innerHeight={h}/>
+<Portal target="body">
+    <div class="uniface-popover-wrapper" class:hidden style="{vertPos}; left: {position.left-margin}px; width: {position.width}px; ">
+        <div class="uniface-popover" style="" use:clickOutside
+             on:outerClick={close}>
+            <div bind:this={contentPanel} style="{horzPos}">
+                <div class="contents" style="{style}">
+                    <div class="contents-inner">
+                        <slot></slot>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</Portal>

package/dist/common/Popover.svelte.d.ts

@@ -0,0 +1,35 @@
+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 Popover: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    style?: string;
+    target: any;
+    align?: "left" | "right" | "center";
+    autoFit?: boolean;
+    margin?: number;
+}, {
+    default: {};
+}>, {
+    close: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type Popover = InstanceType<typeof Popover>;
+export default Popover;

package/dist/common/ShowHint.d.ts

@@ -0,0 +1 @@
+export type ShowHint = (src: Element, text: any, x: number, y: number) => void;

package/dist/common/ShowHint.js

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

package/dist/common/date-utils.d.ts

@@ -0,0 +1,5 @@
+import type { UniDate } from "../calendar/dateUtils";
+declare const _default: {
+    formatDate: (d: UniDate, fmt: string) => string;
+};
+export default _default;

package/dist/common/date-utils.js

@@ -0,0 +1,7 @@
+import dayjs, { isDayjs } from "dayjs";
+const formatDate = (d, fmt) => {
+    return (d == null) ? '' : isDayjs(d) ? d.format(fmt) : dayjs(d).format(fmt);
+};
+export default {
+    formatDate
+};

package/dist/common/uniface-utils.d.ts

@@ -0,0 +1,3 @@
+export declare function clickOutside(node: Node): {
+    destroy(): void;
+};

package/dist/common/uniface-utils.js

@@ -0,0 +1,18 @@
+export function clickOutside(node) {
+    const handleClick = (event) => {
+        // @ts-ignore
+        if (node && !node.contains(event.target) && !event.defaultPrevented) {
+            node.dispatchEvent(
+            // @ts-ignore
+            new CustomEvent('outerClick', node));
+            event.stopPropagation();
+            event.preventDefault();
+        }
+    };
+    document.addEventListener('click', handleClick, true);
+    return {
+        destroy() {
+            document.removeEventListener('click', handleClick, true);
+        }
+    };
+}

package/dist/common/utils.d.ts

@@ -0,0 +1,13 @@
+declare const _default: {
+    isEmpty: (s: any) => boolean;
+    getNumberValue: (n: any) => number | null;
+    getStringValue: (n: any) => string | null;
+    sleep: (n: number) => Promise<void>;
+    getNumberRegex: (precision: number | null | undefined, allowNegative: boolean) => string;
+    isValidNumber: (n: number, precision: number | null | undefined, allowNegative: boolean, max?: number | null, min?: number | null) => boolean;
+    formatNumber: (n: number | null, precision: number | null | undefined) => string;
+    filterFiles: (files: Array<File>, accept: string) => File[];
+    getNestedObject: (obj: any, keys: string[]) => any;
+    getNestedValue: (data: any, key: string) => any;
+};
+export default _default;

package/dist/common/utils.js

@@ -0,0 +1,141 @@
+/**
+ * 是否空
+ * @param s
+ */
+const isEmpty = (s) => {
+    return s == null || (typeof s == "string" && s.trim().length == 0);
+};
+const getNumberValue = (n) => {
+    let v = typeof (n) == "number" ? n : typeof (n) == "string" ? parseFloat(n) : null;
+    return v != null ? isNaN(v) ? null : v : v;
+};
+const getStringValue = (n) => {
+    return typeof (n) == "string" ? n : typeof (n) == "number" ? n.toString() : null;
+};
+/**
+ * 睡眠n秒
+ * @param n
+ */
+const sleep = (n) => {
+    if (n < 0) {
+        n = 1;
+    }
+    return new Promise(resolve => {
+        setTimeout(() => {
+            resolve();
+        }, n * 1000);
+    });
+};
+/**
+ *
+ * @param precision
+ * @param allowNegative
+ */
+const getNumberRegex = (precision, allowNegative) => {
+    if (precision == null) {
+        return allowNegative ? `^-?\\d+(\\.\\d*)?$` : `^\\d+(\\.\\d*)?$`;
+    }
+    else if (precision > 0) {
+        return allowNegative ? `^-?\\d+(\\.\\d{0,${precision}})?$` : `^\\d+(\\.\\d{0,${precision}})?$`;
+    }
+    else {
+        return allowNegative ? `^-?\\d+$` : `^\\d+$`;
+    }
+};
+/**
+ * 检查是不是一个有效的数字
+ * @param n
+ * @param precision
+ * @param allowNegative
+ * @param max
+ * @param min
+ */
+const isValidNumber = (n, precision, allowNegative, max = null, min = null) => {
+    let valid = true;
+    if (precision != null && precision > 0) {
+        let base = Math.pow(10, precision);
+        valid = n * base == Math.floor(n * base);
+    }
+    if (valid && max != null) {
+        valid = n <= max;
+    }
+    if (valid && allowNegative && min != null) {
+        valid = n >= min;
+    }
+    return valid;
+};
+const formatNumber = (n, precision) => {
+    if (n == null) {
+        return '';
+    }
+    else {
+        if (precision != null) {
+            if (precision > 0) {
+                let base = Math.pow(10, precision);
+                return (Math.floor(n * base) / base).toFixed(precision);
+            }
+            else {
+                return Math.floor(n).toString();
+            }
+        }
+        else {
+            return n.toString();
+        }
+    }
+};
+/**
+ * 过滤文件列表，返回符合 accept 规则的文件
+ * @param {FileList | File[]} files - 用户选择或拖入的文件列表
+ * @param {string} accept - 允许的文件类型，如 "image/*" 或 ".doc,.docx,.pdf"
+ * @returns {File[]} - 过滤后的符合规则的文件
+ */
+const filterFiles = (files, accept) => {
+    if (isEmpty(accept) || accept === "*/*" || !accept)
+        return Array.from(files); // 允许所有文件
+    const allowedExtensions = accept.split(",").map(ext => ext.trim().toLowerCase());
+    return Array.from(files).filter(file => {
+        const fileName = file.name.toLowerCase();
+        const fileType = file.type.toLowerCase();
+        // 如果是 image/*，则匹配所有图片类型
+        if (accept.includes("image/*") && fileType.startsWith("image/"))
+            return true;
+        // 其他情况，检查扩展名是否匹配
+        return allowedExtensions.some(ext => fileName.endsWith(ext));
+    });
+};
+/**
+ * 获取嵌套属性节点，如果中间为null，补空对象
+ * @param obj
+ * @param path
+ */
+const getNestedObject = (obj, keys) => {
+    let current = obj;
+    for (const property of keys) {
+        // 检查当前值是否为 null 或非对象，或者当前属性在对象中不存在
+        if (current === null || typeof current !== 'object' || !current.hasOwnProperty(property)) {
+            return {}; // 如果中间任何值不存在，返回空对象
+        }
+        current = current[property]; // 访问下一层属性
+    }
+    return current;
+};
+/**
+ * 获取嵌套定义key的值
+ * @param data
+ * @param key
+ */
+const getNestedValue = (data, key) => {
+    let keys = key.split('.');
+    let attr = keys.pop();
+    if (attr == null) {
+        return null;
+    }
+    else {
+        let obj = keys.length > 0 ? getNestedObject(data, keys) : data;
+        return obj[attr];
+    }
+};
+export default {
+    isEmpty, getNumberValue, getStringValue, sleep, getNumberRegex, isValidNumber, formatNumber, filterFiles, getNestedObject,
+    getNestedValue
+};

package/dist/common-editor/CommonEditor.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+
+    import {DisplayMode} from "../common/DisplayMode";
+    import utils from "../common/utils";
+
+
+    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 placeholder: string = '';
+    export let style: string = '';
+    export let value: any = null;
+    export let suffix: string = '';
+    export let prefix: string = '';
+    export let displayMode: DisplayMode = DisplayMode.Edit;
+    export let showActionIcon: boolean = false;
+    export let clean: () => void;
+
+    let className: string = '';
+
+</script>
+{#if displayMode === DisplayMode.View}
+    <div class="uniface-display-field" style="display: flex; flex-direction: row;">
+        {#if !utils.isEmpty(prefix)}
+            <div style="flex: 0 0 auto;">
+                <span style="padding-right: 4px">{prefix}</span>
+            </div>
+        {/if}
+        <div style="flex: 1 1 auto; overflow: hidden">
+            <span>{value ?? ''}</span>
+        </div>
+        {#if !utils.isEmpty(suffix)}
+            <div style="flex: 0 0 auto;">
+                <span style="padding-left: 4px">{suffix}</span>
+            </div>
+        {/if}
+    </div>
+{: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>
+        {/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>
+        {/if}
+        {#if !utils.isEmpty(suffix)}
+            <div class="editor-suffix" style="flex: 0 0 auto;">
+                <span>{suffix}</span>
+            </div>
+        {/if}
+        {#if $$slots['trailing-icon']}
+            <slot name="trailing-icon"/>
+        {/if}
+    </div>
+{/if}

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

@@ -0,0 +1,48 @@
+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;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const CommonEditor: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    disabled?: boolean;
+    readonly?: boolean;
+    variant?: "" | "plain" | "outlined" | "filled";
+    compact?: boolean;
+    class?: string;
+    placeholder?: string;
+    style?: string;
+    value?: any;
+    suffix?: string;
+    prefix?: string;
+    displayMode?: DisplayMode;
+    showActionIcon?: boolean;
+    clean: () => void;
+}, {
+    'leading-icon': {};
+    default: {};
+    'trailing-icon': {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    'leading-icon': {};
+    default: {};
+    'trailing-icon': {};
+}, {
+    class: string;
+}, string>;
+type CommonEditor = InstanceType<typeof CommonEditor>;
+export default CommonEditor;

package/dist/common-editor/DateInput.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+
+    import type {OnChangeHandler} from "../common/OnChangeHandler";
+    import type {UniDate} from "../base-calendar/dateUtils";
+    import {DateFormats} from "../common/DateFormats";
+    import dateUtils from "../common/date-utils";
+
+    export let disabled: boolean = false;
+    export let readonly: boolean = false;
+    export let value: UniDate = null;
+    export let style: string = '';
+    export let placeholder: string = "";
+    export let format: DateFormats = DateFormats.ISO8601;
+    export let onChange: OnChangeHandler<Date> = null as unknown as OnChangeHandler<Date>;
+
+    const ctrlKeys: Array<string> = ['Backspace', 'Delete', 'Tab', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'];
+
+    let regex: RegExp;
+
+    let textValue: string;
+
+    let editor: any;
+
+    $: textValue = dateUtils.formatDate(value, format);
+
+</script>
+<input bind:this={editor} type="text" {readonly} {placeholder} {style} {disabled} bind:value={textValue}/>

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

@@ -0,0 +1,29 @@
+import type { OnChangeHandler } from "../common/OnChangeHandler";
+import type { UniDate } from "../base-calendar/dateUtils";
+import { DateFormats } from "../common/DateFormats";
+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 DateInput: $$__sveltets_2_IsomorphicComponent<{
+    disabled?: boolean;
+    readonly?: boolean;
+    value?: UniDate;
+    style?: string;
+    placeholder?: string;
+    format?: DateFormats;
+    onChange?: OnChangeHandler<Date>;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type DateInput = InstanceType<typeof DateInput>;
+export default DateInput;