@ticatec/uniface-element 0.1.9

package/dist/options-select/OptionsSelect.svelte.d.ts

@@ -0,0 +1,42 @@
+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 OptionsSelect: $$__sveltets_2_IsomorphicComponent<{
+    variant?: "" | "plain" | "outlined" | "filled";
+    disabled?: boolean;
+    readonly?: boolean;
+    compact?: boolean;
+    mandatory?: boolean;
+    value?: any;
+    options: Array<any>;
+    keyField?: string;
+    textField?: string;
+    menu$height?: number;
+    style?: string;
+    placeholder?: string;
+    disableOptions?: Array<string>;
+    hideOptions?: Array<string>;
+    displayMode?: DisplayMode;
+    itemRender?: any;
+    emptyText?: string;
+    onChange?: OnChangeHandler<any>;
+}, {
+    blur: FocusEvent;
+    focus: FocusEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type OptionsSelect = InstanceType<typeof OptionsSelect>;
+export default OptionsSelect;

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

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

package/dist/options-select/index.js

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

package/dist/page/Page.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+
+    import PageHeader from "./PageHeader.svelte";
+
+    export let title: string = '';
+    export let comment: string = null as unknown as string;
+    export let header$style: string = '';
+    export let content$style: string = '';
+    export let round: boolean = false;
+    export let shadow: boolean = true;
+    export let style: string = '';
+
+</script>
+
+<div class="uniface-page-wrapper" {style}>
+    <div class="uniface-page" class:shadow class:round>
+        <div class="uniface-page-header" style={header$style}>
+            <slot name="page-header">
+                <PageHeader {title} {comment}>
+                    <slot name="header-ext"></slot>
+                </PageHeader>
+            </slot>
+        </div>
+        <div class="page-container" style={content$style}>
+            <slot></slot>
+        </div>
+    </div>
+</div>
+

package/dist/page/Page.svelte.d.ts

@@ -0,0 +1,39 @@
+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 Page: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    title?: string;
+    comment?: string;
+    header$style?: string;
+    content$style?: string;
+    round?: boolean;
+    shadow?: boolean;
+    style?: string;
+}, {
+    'page-header': {};
+    'header-ext': {};
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    'page-header': {};
+    'header-ext': {};
+    default: {};
+}, {}, string>;
+type Page = InstanceType<typeof Page>;
+export default Page;

package/dist/page/PageHeader.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+
+    export let title: string;
+    export let comment: string = '';
+
+</script>
+<div class="page-topic">
+    <span>{title}</span>
+</div>
+<div class="page-comment">
+    {#if comment}
+        <span>{comment}</span>
+    {/if}
+</div>
+<slot></slot>

package/dist/page/PageHeader.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 PageHeader: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    title: string;
+    comment?: string;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type PageHeader = InstanceType<typeof PageHeader>;
+export default PageHeader;

package/dist/page/index.d.ts

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

package/dist/page/index.js

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

package/dist/pagination/OnPageChange.d.ts

@@ -0,0 +1 @@
+export type OnPageChange = (page: number) => void;

package/dist/pagination/OnPageChange.js

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

package/dist/pagination/Pagination.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+    import {onMount} from "svelte";
+    import type {OnPageChange} from "./OnPageChange";
+
+    export let pageCount: number = 0;
+    export let pageNo: number = 1;
+    export let type: 'plain' | 'round' | 'circle' = "round"
+    export let style: string = '';
+    export let big: boolean = false;
+    export let onPageChange: OnPageChange;
+
+
+
+    let pagination: Array<number | null> = [];
+
+    const buildPagination = () => {
+        if (pageNo < 1) {
+            pageNo = 1;
+        } else if (pageNo > pageCount) {
+            pageNo = pageCount;
+        }
+        let arr:Array<number | null> = [1];
+        if (pageCount < 6) {
+            for (let i=2; i<=pageCount; i++) {
+                arr.push(i);
+            }
+        } else {
+            if (pageNo == 1 || pageNo == 2) {
+                arr = arr.concat([2, 3, null, pageCount]);
+            } else if (pageNo == pageCount || pageNo == pageCount - 1) {
+                arr = arr.concat([null, pageCount - 2, pageCount - 1, pageCount])
+            } else if (pageNo == 3) {
+                arr = arr.concat([2, 3, 4, null, pageCount]);
+            } else if (pageNo == pageCount - 2) {
+                arr = arr.concat([null, pageCount - 3,pageCount - 2, pageCount - 1, pageCount])
+            } else {
+                arr.push(null);
+                for (let i=pageNo-1; i<=pageNo+1; i++) {
+                    arr.push(i);
+                }
+                arr.push(null);
+                arr.push(pageCount);
+            }
+        }
+        pagination = arr;
+    }
+
+    const selectPage = (value: number) => (e: MouseEvent) => {
+        if (pageNo != value) {
+            onPageChange?.(value)
+        }
+    }
+
+    const showPagination = (_pageNo: number, _pageCount: number):void => {
+        buildPagination();
+    }
+
+    $: showPagination(pageNo, pageCount);
+
+
+    onMount(()=>{
+        buildPagination();
+    })
+</script>
+
+<div class="uniface-pagination-panel {type}" class:big  {style}>
+    {#each pagination as page}
+        {#if page}
+            <div class="uniface-page-no" on:click={selectPage(page)} aria-hidden="true" class:selected={page===pageNo}>
+                <span tabindex="-1" >
+                    {page}
+                </span>
+            </div>
+        {:else}
+            <div class="uniface-page-gap">
+                <span>...</span>
+            </div>
+        {/if}
+    {/each}
+</div>

package/dist/pagination/Pagination.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { OnPageChange } from "./OnPageChange";
+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 Pagination: $$__sveltets_2_IsomorphicComponent<{
+    pageCount?: number;
+    pageNo?: number;
+    type?: "plain" | "round" | "circle";
+    style?: string;
+    big?: boolean;
+    onPageChange: OnPageChange;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Pagination = InstanceType<typeof Pagination>;
+export default Pagination;

package/dist/pagination/index.d.ts

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

package/dist/pagination/index.js

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

package/dist/pagination-panel/GenerateTotalInfo.d.ts

@@ -0,0 +1 @@
+export type GenerateTotalInfo = (total: number, pageCount: number, pageNo: number, rows: number) => string;

package/dist/pagination-panel/GenerateTotalInfo.js

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

package/dist/pagination-panel/OnRowCountChanged.d.ts

@@ -0,0 +1 @@
+export type OnRowCountChanged = (rows: number) => void;

package/dist/pagination-panel/OnRowCountChanged.js

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

package/dist/pagination-panel/PaginationPanel.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+
+    import Pagination from "../pagination";
+    import OptionSelect from "../options-select";
+    import type {OnPageChange} from "../pagination/OnPageChange";
+    import type {OnRowCountChanged} from "./OnRowCountChanged";
+    import type {GenerateTotalInfo} from "./GenerateTotalInfo";
+
+    export let pageCount: number = 0;
+    export let pageNo: number = 1;
+    export let type: 'plain' | 'round' | 'circle' = "round"
+    export let page$style: string = '';
+    export let big: boolean = false;
+    export let rowsSet: Array<number> = [25, 50, 100];
+    export let total: number = null as unknown as number;
+    export let generateInfo: GenerateTotalInfo;
+    export let rowCount: number = 25;
+    export let rowCountLabel: string = 'Rows/Page';
+    export let align: 'left' | 'right' | '' = '';
+
+    export let onRowCountChanged: OnRowCountChanged;
+
+    export let onPageChange: OnPageChange;
+
+
+    let pagesOptions: Array<any> = [];
+
+    $: {
+        pagesOptions = (rowsSet ?? [25, 50, 100]).map(v => ({code: v, text: `${v}`}));
+    }
+
+    const handlePageChange = () => {
+        onRowCountChanged(rowCount);
+    }
+
+    let totalText: string;
+
+    $: totalText = generateInfo ? generateInfo(total, pageCount, pageNo, rowCount) : `Total: <b>${total}</b> entities.`;
+
+</script>
+
+<div class="uniface-pagination-panel {align}">
+    <div class="page-options">
+        <OptionSelect compact={!big || type=="plain"} style="width: 80px" variant="outlined" mandatory options={pagesOptions}
+                      bind:value={rowCount} onChange={handlePageChange}/>
+        <span style="margin-left: 8px">{rowCountLabel}</span>
+    </div>
+    <div class="pagination">
+        <Pagination {pageCount} {pageNo} {type} style={page$style} {big} {onPageChange}/>
+    </div>
+    <div class="pagination-info">
+        {@html totalText}
+    </div>
+</div>

package/dist/pagination-panel/PaginationPanel.svelte.d.ts

@@ -0,0 +1,35 @@
+import type { OnPageChange } from "../pagination/OnPageChange";
+import type { OnRowCountChanged } from "./OnRowCountChanged";
+import type { GenerateTotalInfo } from "./GenerateTotalInfo";
+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 PaginationPanel: $$__sveltets_2_IsomorphicComponent<{
+    pageCount?: number;
+    pageNo?: number;
+    type?: "plain" | "round" | "circle";
+    page$style?: string;
+    big?: boolean;
+    rowsSet?: Array<number>;
+    total?: number;
+    generateInfo: GenerateTotalInfo;
+    rowCount?: number;
+    rowCountLabel?: string;
+    align?: "left" | "right" | "";
+    onRowCountChanged: OnRowCountChanged;
+    onPageChange: OnPageChange;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type PaginationPanel = InstanceType<typeof PaginationPanel>;
+export default PaginationPanel;

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

@@ -0,0 +1,6 @@
+import PaginationPanel from "./PaginationPanel.svelte";
+import type { OnRowCountChanged } from "./OnRowCountChanged";
+import type { OnPageChange } from "../pagination/OnPageChange";
+import type { GenerateTotalInfo } from "./GenerateTotalInfo";
+export default PaginationPanel;
+export type { OnRowCountChanged, OnPageChange, GenerateTotalInfo };

package/dist/pagination-panel/index.js

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

package/dist/popup-hint/PopupHint.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+    import Portal from "svelte-portal";
+    import type {ShowHint} from "../common/ShowHint";
+    import utils from "../common/utils";
+
+    let message = ''; // 提示信息ø
+    let targetElement: Element | null = null;
+    let hintVisible = false;
+    let hintStyle = '';
+
+    // 显示提示框函数
+    export const show: ShowHint = async (element: Element, text: string, x: number, y: number) => {
+        if (targetElement != null) {
+            targetElement.removeEventListener('mouseout', hideHint);
+        }
+        targetElement = element;
+        message = text;
+        await utils.sleep(1);
+        targetElement.addEventListener('mouseout', hideHint);
+        calculatePosition(x, y);
+        hintVisible = true;
+    };
+
+    // 计算提示框的位置
+    const calculatePosition = (x: number, y: number) => {
+        if (targetElement) {
+            const rect = targetElement.getBoundingClientRect();
+            hintStyle = `max-width: ${rect.width + 20}px; left: ${x + 10}px; top: ${y}px`;
+        }
+    }
+
+    // 隐藏提示框
+    const hideHint = () => {
+        hintVisible = false;
+        if (targetElement) {
+            targetElement.removeEventListener('mouseout', hideHint);
+        }
+        targetElement = null;
+    };
+
+</script>
+
+
+<Portal target="body">
+    {#if hintVisible}
+        <div class="uniface-popup-hint" style={hintStyle}>
+            <span>{message}</span>
+        </div>
+    {/if}
+</Portal>

package/dist/popup-hint/PopupHint.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { ShowHint } from "../common/ShowHint";
+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 PopupHint: $$__sveltets_2_IsomorphicComponent<{
+    show?: ShowHint;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {
+    show: ShowHint;
+}, string>;
+type PopupHint = InstanceType<typeof PopupHint>;
+export default PopupHint;

package/dist/progress-bar/ProgressBar.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+
+    import {ProgressStatus} from "./ProgressStatus";
+
+    export let progress = 0; // 进度，范围 0-100
+    export let size = 100; // 圆的大小
+    export let type: "circular" | "liner" = "circular"; // "circular" 或 "linear"
+    export let height: number = 5; // 仅直线模式使用
+    export let showText = true; // 是否显示进度文本
+    export let status: ProgressStatus = ProgressStatus.progressing;
+
+
+
+    const radius = (size - height) / 2;
+    const circumference = 2 * Math.PI * radius;
+    $: offset = circumference * (1 - progress / 100);
+
+    let strokeColor: string = "var(--uniface-progress-bar-color, #22BDFF)";
+
+    const getCurrentColor = (value: ProgressStatus): string => {
+        switch (value) {
+            case ProgressStatus.successful:
+                return 'var(--uniface-progress-bar-success-color, #2DC071)'
+            case ProgressStatus.failure:
+                return 'var(--uniface-progress-bar-failure-color, #FF685B)'
+            case ProgressStatus.canceled:
+                return 'var(--uniface-progress-bar-canceled-color, #FFC53)'
+            default:
+                return 'var(--uniface-progress-bar-color, #22BDFF)'
+        }
+    }
+
+    $: strokeColor = getCurrentColor(status);
+
+
+
+</script>
+
+{#if type === "circular"}
+    <svg width={size} height={size} viewBox="0 0 {size} {size}">
+        <circle cx={size / 2} cy={size / 2} r={radius} fill="none" stroke="var(--uniface-progress-bar-bg, #E2E8F0)" stroke-width={height}/>
+        <circle
+                cx={size / 2} cy={size / 2} r={radius}
+                fill="none" stroke={strokeColor} stroke-width={height}
+                stroke-linecap="round"
+                stroke-dasharray={circumference}
+                stroke-dashoffset={offset}
+                transform="rotate(-90 {size / 2} {size / 2})"
+        />
+        {#if showText}
+            <text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle"
+                  font-size="{status === ProgressStatus.progressing ? '1em' : '2em'}"
+                  fill={strokeColor}>
+                {#if status == ProgressStatus.successful}
+                    ✔
+                {:else if status == ProgressStatus.failure}
+                    &#x2715;
+                {:else if status == ProgressStatus.canceled}
+                    !
+                {:else}
+                    {progress}%
+                {/if}
+            </text>
+        {/if}
+    </svg>
+
+{:else}
+    <div class="uniface-progress-container {status}" >
+        <div class="progress-bar" style="width: 100%; height: {height}px;">
+            <div class="progress-fill" style="width: {progress}%"></div>
+        </div>
+        {#if showText}
+            <span class="progress-text">
+                {#if status == ProgressStatus.successful}
+                    ✔
+                {:else if status == ProgressStatus.failure}
+                    &#x2715;
+                {:else}
+                    {progress}%
+                {/if}
+            </span>
+        {/if}
+    </div>
+{/if}

package/dist/progress-bar/ProgressBar.svelte.d.ts

@@ -0,0 +1,26 @@
+import { ProgressStatus } from "./ProgressStatus";
+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 ProgressBar: $$__sveltets_2_IsomorphicComponent<{
+    progress?: number;
+    size?: number;
+    type?: "circular" | "liner";
+    height?: number;
+    showText?: boolean;
+    status?: ProgressStatus;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ProgressBar = InstanceType<typeof ProgressBar>;
+export default ProgressBar;

package/dist/progress-bar/ProgressStatus.d.ts

@@ -0,0 +1,6 @@
+export declare enum ProgressStatus {
+    progressing = "progressing",
+    successful = "successful",
+    failure = "failure",
+    canceled = "canceled"
+}

package/dist/progress-bar/ProgressStatus.js

@@ -0,0 +1,8 @@
+export var ProgressStatus;
+(function (ProgressStatus) {
+    ProgressStatus["progressing"] = "progressing";
+    ProgressStatus["successful"] = "successful";
+    ProgressStatus["failure"] = "failure";
+    ProgressStatus["canceled"] = "canceled";
+})(ProgressStatus || (ProgressStatus = {}));
+;

package/dist/progress-bar/index.d.ts

@@ -0,0 +1,4 @@
+import ProgressBar from "./ProgressBar.svelte";
+import { ProgressStatus } from "./ProgressStatus.js";
+export default ProgressBar;
+export { ProgressStatus };

package/dist/progress-bar/index.js

@@ -0,0 +1,4 @@
+import ProgressBar from "./ProgressBar.svelte";
+import { ProgressStatus } from "./ProgressStatus.js";
+export default ProgressBar;
+export { ProgressStatus };

package/dist/progress-step-bar/ProgressStep.d.ts

@@ -0,0 +1,19 @@
+export declare enum ProgressStepStatus {
+    Pending = "pending",
+    Processing = "processing",
+    Completed = "completed"
+}
+export default interface ProgressStep {
+    /**
+     *
+     */
+    topic: string;
+    /**
+     *
+     */
+    comment?: string;
+    /**
+     *
+     */
+    status: ProgressStepStatus;
+}