@ticatec/uniface-element 0.1.9

package/dist/form-panel/grid-form/GridForm.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+    export let style: string = '';
+</script>
+<div class="grid-form" {style}>
+    <div>
+        <slot/>
+    </div>
+</div>

package/dist/form-panel/grid-form/GridForm.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 GridForm: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    style?: string;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type GridForm = InstanceType<typeof GridForm>;
+export default GridForm;

package/dist/form-panel/grid-form/index.d.ts

@@ -0,0 +1,5 @@
+import GridForm from "./GridForm.svelte";
+import GridField from "./GridField.svelte";
+import EmptyCell from "./EmptyCell.svelte";
+export default GridForm;
+export { GridField, EmptyCell };

package/dist/form-panel/grid-form/index.js

@@ -0,0 +1,5 @@
+import GridForm from "./GridForm.svelte";
+import GridField from "./GridField.svelte";
+import EmptyCell from "./EmptyCell.svelte";
+export default GridForm;
+export { GridField, EmptyCell };

package/dist/form-panel/index.d.ts

@@ -0,0 +1,4 @@
+import FlexForm from "./flex-form";
+import GridForm from "./grid-form";
+import FlexRowForm from "./flex-row-form";
+export { FlexForm, GridForm, FlexRowForm };

package/dist/form-panel/index.js

@@ -0,0 +1,4 @@
+import FlexForm from "./flex-form";
+import GridForm from "./grid-form";
+import FlexRowForm from "./flex-row-form";
+export { FlexForm, GridForm, FlexRowForm };

package/dist/group-box/group-check-box/GroupCheckBox.svelte

@@ -0,0 +1,107 @@
+<script lang="ts">
+
+    import utils from "../../common/utils";
+    import {DisplayMode} from "../../common/DisplayMode";
+    import CheckBox from "../../checkbox";
+    import type {OnChangeHandler} from "../../common/OnChangeHandler";
+
+    export let disabled: boolean = false;
+    export let readonly: boolean = false;
+    export let style: string = "";
+    export let value: string | number;
+    export let bitBase: boolean = false;
+    export let options: Array<any>;
+    export let keyField: string = "code";
+    export let textField: string = "text";
+    export let delimiter: string = ';';
+    export let displayMode: DisplayMode = DisplayMode.Edit;
+    export let item$style: string = '';
+    export let disabledOptions: Array<string> = [];
+    export let hideOptions: Array<string> = [];
+    export let variant: '' | 'plain' | 'outlined' | 'filled' = '';
+    export let compact: boolean = false;
+    export let onChange: OnChangeHandler<string | number> = null as unknown as OnChangeHandler<string | number>;
+
+    let textValue: string;
+
+    let selectedList: Array<any> = [];
+
+    const generateText = (list: Array<string>) => {
+        if (list.length > 0) {
+            let arr = [];
+            for (let item of options) {
+                if (list.indexOf(item[keyField]) > -1) {
+                    arr.push(item[textField]);
+                }
+            }
+            textValue = arr.length == 0 ? '' : arr.join(delimiter);
+        } else {
+            textValue = '';
+        }
+    }
+
+
+
+    const handleCheckboxChange = (key: string) => async (checked: boolean) => {
+        if (checked) {
+            selectedList.push(key);
+        } else {
+            let idx = selectedList.findIndex(el => el == key);
+            if (idx > -1) {
+                selectedList.splice(idx, 1);
+            }
+        }
+        if (bitBase) {
+            let v = 0;
+            for (let i=0; i<options.length; i++) {
+                if (selectedList.indexOf(options[i][keyField]) > -1) {
+                    v += (1 << i);
+                }
+            }
+            value = v;
+        } else {
+            value = selectedList.length==0 ?  '' : selectedList.join(delimiter)
+        }
+        onChange?.(value);
+    }
+
+    const generateSelectedListViaBits = (v: number): void => {
+        value = Math.round(v??0);
+        let s = [];
+        let idx=0;
+        while (v > 0) {
+            if ((v % 2) == 1) {
+                s.push(options[idx][keyField]);
+            }
+            idx++;
+            v = v >> 1;
+        }
+        selectedList = s;
+    }
+
+    const generateSelectedListViaString = (v: string): void => {
+        value = v;
+        selectedList = (value == null || value.toString().trim() == '') ? [] : value.split(delimiter);
+    }
+
+    $: bitBase ? generateSelectedListViaBits(utils.getNumberValue(value)??0) : generateSelectedListViaString(utils.getStringValue(value)??'');
+    $: generateText(selectedList);
+
+
+</script>
+{#if displayMode === DisplayMode.View}
+    <div class="uniface-display-field">
+        <span>{textValue}</span>
+    </div>
+{:else}
+    <div class="uniface-group-box {variant}" {style} class:compact class:disabled>
+        {#each options as op}
+            {#if (hideOptions??[]).indexOf(op[keyField]) === -1}
+                <CheckBox {compact} {readonly} disabled={disabled || disabledOptions.indexOf(op[keyField]) > -1}
+                      label={op[textField]} style={item$style} value={selectedList.indexOf(op[keyField]) > -1}
+                      onChange={handleCheckboxChange(op[keyField])}/>
+            {/if}
+        {/each}
+    </div>
+{/if}
+

package/dist/group-box/group-check-box/GroupCheckBox.svelte.d.ts

@@ -0,0 +1,37 @@
+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 GroupCheckBox: $$__sveltets_2_IsomorphicComponent<{
+    disabled?: boolean;
+    readonly?: boolean;
+    style?: string;
+    value: string | number;
+    bitBase?: boolean;
+    options: Array<any>;
+    keyField?: string;
+    textField?: string;
+    delimiter?: string;
+    displayMode?: DisplayMode;
+    item$style?: string;
+    disabledOptions?: Array<string>;
+    hideOptions?: Array<string>;
+    variant?: "" | "plain" | "outlined" | "filled";
+    compact?: boolean;
+    onChange?: OnChangeHandler<string | number>;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type GroupCheckBox = InstanceType<typeof GroupCheckBox>;
+export default GroupCheckBox;

package/dist/group-box/group-check-box/index.d.ts

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

package/dist/group-box/group-check-box/index.js

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

package/dist/group-box/group-radio-box/GroupRadioBox.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+
+    import {DisplayMode} from "../../common/DisplayMode";
+    import RadioButton from "../../radio-button";
+    import type {OnChangeHandler} from "../../common/OnChangeHandler";
+
+    export let disabled: boolean = false;
+    export let readonly: boolean = false;
+    export let value: any;
+    export let options: Array<any>;
+    export let keyField: string = "code";
+    export let textField: string = "text";
+    export let displayMode: DisplayMode = DisplayMode.Edit;
+    export let item$style: string = '';
+    export let disabledOptions: Array<string> = [];
+    export let variant: '' | 'plain' | 'outlined' | 'filled' = '';
+    export let compact: boolean = false;
+    export let onChange: OnChangeHandler<any> = null as unknown as OnChangeHandler<any>;
+
+    let textValue: string;
+    let oldValue = value;
+
+    $: if (oldValue != value) {
+        oldValue = value;
+        onChange?.(value);
+    }
+
+    $: {
+        let item = options.find(el=>el[keyField]==value);
+        textValue = item == null ? '' : item[textField];
+    }
+
+</script>
+
+{#if displayMode === DisplayMode.View}
+    <div class="uniface-display-field">
+        <span>{textValue}</span>
+    </div>
+{:else}
+    <div style="width: 100%;" class="uniface-group-box {variant}" class:compact >
+        {#each options as op}
+            <RadioButton {readonly} {compact} disabled={disabled || disabledOptions.indexOf(op[keyField]) > -1}
+                         bind:group={value} label={op[textField]} style={item$style} value={op[keyField]}/>
+        {/each}
+    </div>
+{/if}
+

package/dist/group-box/group-radio-box/GroupRadioBox.svelte.d.ts

@@ -0,0 +1,33 @@
+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 GroupRadioBox: $$__sveltets_2_IsomorphicComponent<{
+    disabled?: boolean;
+    readonly?: boolean;
+    value: any;
+    options: Array<any>;
+    keyField?: string;
+    textField?: string;
+    displayMode?: DisplayMode;
+    item$style?: string;
+    disabledOptions?: Array<string>;
+    variant?: "" | "plain" | "outlined" | "filled";
+    compact?: boolean;
+    onChange?: OnChangeHandler<any>;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type GroupRadioBox = InstanceType<typeof GroupRadioBox>;
+export default GroupRadioBox;

package/dist/group-box/group-radio-box/index.d.ts

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

package/dist/group-box/group-radio-box/index.js

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

package/dist/i18nContext.d.ts

@@ -0,0 +1,21 @@
+declare class I18nContext {
+    private resource;
+    /**
+     * 设置语言包
+     * @param languagePackage
+     */
+    setResource(languagePackage: any): void;
+    /**
+     * 根据key值获取相应的文本值
+     * @param key
+     * @param defaultText
+     */
+    getText(key: string, defaultText?: string): string;
+    /**
+     * 根据key获取一个节点
+     * @param key
+     */
+    get(key: string): any;
+}
+declare const i18n: I18nContext;
+export default i18n;

package/dist/i18nContext.js

@@ -0,0 +1,29 @@
+import utils from "./common/utils";
+class I18nContext {
+    resource = {};
+    /**
+     * 设置语言包
+     * @param languagePackage
+     */
+    setResource(languagePackage) {
+        this.resource = languagePackage;
+    }
+    /**
+     * 根据key值获取相应的文本值
+     * @param key
+     * @param defaultText
+     */
+    getText(key, defaultText) {
+        let text = utils.getNestedValue(this.resource, key) ?? defaultText ?? `Invalid key: ${key}`;
+        return typeof text == "string" ? text : `Invalid key: ${key}`;
+    }
+    /**
+     * 根据key获取一个节点
+     * @param key
+     */
+    get(key) {
+        return utils.getNestedValue(this.resource, key);
+    }
+}
+const i18n = new I18nContext();
+export default i18n;

package/dist/icon/Icon.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+
+    import utils from "../common/utils";
+    import type {MouseClickHandler} from "../common/MouseClickHandler";
+
+    export let name: string;
+    export let onClick: MouseClickHandler | null = null;
+    export let style: string = '';
+    export {className as class};
+
+    let className: string = '';
+    let respClick: boolean = true;
+
+    const handleClickEvent = async (e: MouseEvent) => {
+        if (onClick != null && respClick) {
+            respClick = false;
+            onClick?.(e);
+            await utils.sleep(0.2);
+            respClick = true;
+        }
+    }
+
+
+</script>
+<div class="uniface-icon {className}" class:clickable={onClick!=null} {style} aria-hidden="true" on:click={handleClickEvent}>
+    <i class={name}></i>
+</div>

package/dist/icon/Icon.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { MouseClickHandler } from "../common/MouseClickHandler";
+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 Icon: $$__sveltets_2_IsomorphicComponent<{
+    name: string;
+    onClick?: MouseClickHandler | null;
+    style?: string;
+    class?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {
+    class: string;
+}, string>;
+type Icon = InstanceType<typeof Icon>;
+export default Icon;

package/dist/icon/index.d.ts

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

package/dist/icon/index.js

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

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

@@ -0,0 +1,12 @@
+export default interface ImageFile {
+    /**
+     * 附件名
+     */
+    name: string;
+    /**
+     * oss保存的文件路径
+     */
+    uri: string;
+    thumbnail?: string | undefined | null;
+}
+export type RemoveConfirm = (file: ImageFile) => Promise<boolean>;

package/dist/image-files/ImageFile.js

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

package/dist/image-files/ImageFilesField.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+
+    import {onMount} from "svelte";
+    import {DisplayMode} from "../common/DisplayMode";
+    import type ImageFile from "./ImageFile";
+    import {type RemoveConfirm} from "./ImageFile";
+    import type UploadFile from "../attachment-files/UploadFile";
+    import type {FileUpload} from "../attachment-files/FileUpload";
+    import FileUploadPanel from "../attachment-files/FileUploadPanel.svelte";
+    import ImageRender from "./ImageRender.svelte";
+    import ImagePreview from "./ImagePreview.svelte";
+
+    export let variant: '' | 'plain' | 'outlined' | 'filled' = '';
+    export let disabled: boolean = false;
+    export let readonly: boolean = false;
+    export let files: Array<ImageFile> = [];
+    export let style: string = '';
+    export let displayMode: DisplayMode = DisplayMode.Edit;
+    export let removeFileConfirm: RemoveConfirm = null as unknown as RemoveConfirm;
+    export let uploadFile: FileUpload;
+    export let maxFiles: number = 1;
+
+    export let text: string | null = null;
+
+    let showUpload: boolean = false;
+    let showPreview: boolean = false;
+    let previewImgSrc: string = null as unknown as string;
+
+    let canClose: boolean = true;
+
+    onMount(() => {
+
+    })
+
+    const showDialog = () => {
+        showUpload = true;
+    }
+    const appendNewFile = (file: UploadFile) => {
+        files = [...files, {
+            name: file.file.name,
+            uri: file.url ?? '',
+            thumbnail: file.thumbnail
+        }]
+    }
+
+    const removeFile = async (file: ImageFile) => {
+        let confirmed = removeFileConfirm == null ? true : await removeFileConfirm(file);
+        if (confirmed) {
+            let pos = files.findIndex(item => item == file);
+            if (pos > -1) {
+                files.splice(pos, 1);
+                files = [...files];
+            }
+        }
+    }
+
+    $: text = '<div>' + files.map(item => (item.name)).join("</div><div>") + '</div>'
+
+</script>
+
+{#if displayMode === DisplayMode.View}
+    <div class="uniface-display-field images-field">
+        {#each files as file}
+            <div>
+                <img width="40" height="40" src={file.thumbnail??file.uri}/>
+                <div class="img-file-name">
+                    <span>{file.name}</span>
+                </div>
+            </div>
+        {/each}
+    </div>
+{:else }
+    <div class="uniface-images-field" {style}>
+        <div class="uniface-common-editor {variant}" tabindex="-1">
+            <div class="files-field">
+                {#each files as file}
+                    <ImageRender {file} {readonly} onRemove={removeFile}
+                                 onPreview={(file: ImageFile) => {showPreview = true; previewImgSrc = file.uri}}/>
+                {/each}
+            </div>
+            {#if !disabled && !readonly}
+                <div class="editor-action-icon ">
+                    <i class="uniface-icon-upload" aria-hidden="true" on:click={showDialog}></i>
+                </div>
+            {/if}
+        </div>
+    </div>
+    {#if showUpload}
+        <FileUploadPanel bind:visible={showUpload} accept="image/*" {maxFiles} onFileUploaded={appendNewFile} {uploadFile}/>
+    {/if}
+    <ImagePreview bind:visible={showPreview} src={previewImgSrc}/>
+{/if}

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

@@ -0,0 +1,33 @@
+import { DisplayMode } from "../common/DisplayMode";
+import type ImageFile from "./ImageFile";
+import { type RemoveConfirm } from "./ImageFile";
+import type { FileUpload } from "../attachment-files/FileUpload";
+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 ImageFilesField: $$__sveltets_2_IsomorphicComponent<{
+    variant?: "" | "plain" | "outlined" | "filled";
+    disabled?: boolean;
+    readonly?: boolean;
+    files?: Array<ImageFile>;
+    style?: string;
+    displayMode?: DisplayMode;
+    removeFileConfirm?: RemoveConfirm;
+    uploadFile: FileUpload;
+    maxFiles?: number;
+    text?: string | null;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ImageFilesField = InstanceType<typeof ImageFilesField>;
+export default ImageFilesField;

package/dist/image-files/ImagePreview.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">
+    import {onMount} from "svelte";
+    import Portal from "svelte-portal";
+    import Button, {IconButton} from "../button";
+
+    export let src = ""; // 传入图片地址
+    export let visible: boolean = false;
+
+
+    let scale = 1; // 当前缩放比例
+    let imgWidth = 0, imgHeight = 0; // 原始图片尺寸
+    let containerWidth = 0, containerHeight = 0; // 窗口尺寸
+    let imgRef; // 图片引用
+    let imgPanelWidth = 0, imgPanelHeight = 0;
+
+
+    // 计算窗口大小
+    const updateContainerSize = () => {
+
+        containerWidth = window.innerWidth;
+        containerHeight = window.innerHeight;
+
+        updateScale();
+    }
+
+    // 计算适合的缩放比例
+    const updateScale = () => {
+        if (!imgWidth || !imgHeight) return;
+        const widthRatio = containerWidth / imgWidth * 0.9;
+        const heightRatio = containerHeight / imgHeight * 0.9;
+        scale = Math.min(widthRatio, heightRatio, 1); // 不超过原尺寸
+        imgPanelWidth = imgWidth * scale;
+        imgPanelHeight = imgHeight * scale;
+    }
+
+    // 图片加载完成后获取尺寸
+    const handleImageLoad = (event: any) => {
+        imgWidth = event.target.naturalWidth;
+        imgHeight = event.target.naturalHeight;
+        scale = 1;
+        updateContainerSize();
+    }
+
+    // 放大
+    function zoomIn() {
+        scale *= 1.2;
+    }
+
+    // 缩小
+    function zoomOut() {
+        scale /= 1.2;
+    }
+
+    // 监听窗口变化
+    onMount(() => {
+        window.addEventListener("resize", updateContainerSize);
+        updateContainerSize();
+
+        return () => {
+            window.removeEventListener("resize", updateContainerSize);
+        };
+    });
+
+    let imgStyle = ""
+
+    $: imgPanelHeight = Math.floor(imgHeight * scale);
+    $: imgPanelWidth = Math.floor(imgWidth * scale);
+
+    $: imgStyle = imgPanelHeight > containerHeight ? "" : "display: flex; justify-content: center; align-items: center;"
+
+</script>
+
+{#if visible}
+    <Portal target="body">
+        <div class="uniface-image-preview-overlay" on:click={()=>{visible = false}} aria-hidden="true">
+            <div>
+                <div style="width: 100%; height: 100%; overflow: auto">
+                    <!-- 图片容器 -->
+                    <div class="image-container"
+                         style="width: {containerWidth}px; height: {containerHeight}px;  {imgStyle}">
+                        <img on:click|stopPropagation aria-hidden="true"
+                                bind:this={imgRef}
+                                src={src}
+                                alt="Preview"
+                                on:load={handleImageLoad}
+                                style="width: {imgPanelWidth}px; height: {imgPanelHeight}px;"
+                        />
+                    </div>
+                </div>
+                <!-- 顶部工具栏 -->
+                <div class="toolbar" on:click|stopPropagation aria-hidden="true">
+                    <IconButton icon="uniface-icon-zoom-in" type="default" onClick={zoomIn}></IconButton>
+                    <IconButton icon="uniface-icon-zoom-out" type="default" onClick={zoomOut}></IconButton>
+                    <IconButton icon="uniface-icon-x" type="default" onClick={()=>{visible = false}}></IconButton>
+                </div>
+            </div>
+        </div>
+    </Portal>
+{/if}