@ticatec/uniface-element 0.1.9

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 henryfeng
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,4 @@
+# Uniface Web UI Components
+
+## Global Components
+

package/dist/UnifaceResource.d.ts

@@ -0,0 +1,43 @@
+declare const resource_en: {
+    uniface: {
+        upload: {
+            btnPickup: string;
+            btnCancel: string;
+            btnRetry: string;
+            btnRemove: string;
+        };
+        propertyEditor: {
+            colName: string;
+            colValue: string;
+        };
+        calendar: {
+            months: string[];
+            monthsAbbr: string[];
+            weekTitle: string[];
+            weekTitleAbbr: string[];
+            confirmText: string;
+        };
+    };
+};
+declare const resource_cn: {
+    uniface: {
+        upload: {
+            btnPickup: string;
+            btnCancel: string;
+            btnRetry: string;
+            btnRemove: string;
+        };
+        propertyEditor: {
+            colName: string;
+            colValue: string;
+        };
+        calendar: {
+            months: string[];
+            monthsAbbr: string[];
+            weekTitle: string[];
+            confirmText: string;
+        };
+    };
+};
+export default resource_en;
+export { resource_cn };

package/dist/UnifaceResource.js

@@ -0,0 +1,57 @@
+const resource_en = {
+    uniface: {
+        upload: {
+            btnPickup: "Pickup Files",
+            btnCancel: "Cancel",
+            btnRetry: "Retry",
+            btnRemove: "Delete"
+        },
+        propertyEditor: {
+            colName: "Name",
+            colValue: "Value"
+        },
+        calendar: {
+            months: [
+                'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'
+            ],
+            monthsAbbr: [
+                'Jan', 'Feb', 'Mar', 'Api', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
+            ],
+            weekTitle: [
+                "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"
+            ],
+            weekTitleAbbr: [
+                "Sun", "Mon", "Tue", "Wed", "Thr", "Fri", "Sat"
+            ],
+            confirmText: "OK"
+        }
+    }
+};
+const resource_cn = {
+    uniface: {
+        upload: {
+            btnPickup: "选择文件",
+            btnCancel: "取消",
+            btnRetry: "重试",
+            btnRemove: "删除"
+        },
+        propertyEditor: {
+            colName: "名称",
+            colValue: "值"
+        },
+        calendar: {
+            months: [
+                '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'
+            ],
+            monthsAbbr: [
+                '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'
+            ],
+            weekTitle: [
+                "日", "一", "二", "三", "四", "五", "六"
+            ],
+            confirmText: "确认"
+        }
+    }
+};
+export default resource_en;
+export { resource_cn };

package/dist/accordion/Accordion.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+
+    import type AccordionItem from "./AccordionItem";
+    import Accordion from "./AccordionItemView.svelte";
+
+    export let style: string = '';
+    export {className as class};
+    export let compact: boolean = false;
+    export let accordions: Array<AccordionItem> = [];
+    export let exclusive: boolean = false;
+    export let activeItem: AccordionItem = null as unknown as AccordionItem;
+
+    let className: string = '';
+
+    let openSet: Set<AccordionItem> = new Set();
+
+    const handleAccordionClick = (accordion: AccordionItem) => (event: MouseEvent) => {
+        if (exclusive) {
+            if (activeItem != accordion) {
+                activeItem = accordion;
+                openSet.clear();
+                openSet.add(accordion);
+            }
+        } else {
+            if (openSet.has(accordion)) {
+                openSet.delete(accordion);
+            } else {
+                openSet.add(accordion);
+            }
+        }
+        accordions = [...accordions];
+    }
+
+
+</script>
+
+<div class="uniface-accordion-panel {className}" {style} class:compact>
+    {#each accordions as accordion}
+        <Accordion title={accordion.title} isOpen={openSet.has(accordion)} onClick={handleAccordionClick(accordion)}>
+            <svelte:component this={accordion.component} {...accordion.params}/>
+        </Accordion>
+    {/each}
+</div>

package/dist/accordion/Accordion.svelte.d.ts

@@ -0,0 +1,29 @@
+import type AccordionItem from "./AccordionItem";
+import Accordion from "./AccordionItemView.svelte";
+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 Accordion: $$__sveltets_2_IsomorphicComponent<{
+    style?: string;
+    class?: string;
+    compact?: boolean;
+    accordions?: Array<AccordionItem>;
+    exclusive?: boolean;
+    activeItem?: AccordionItem;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {
+    class: string;
+}, string>;
+type Accordion = InstanceType<typeof Accordion>;
+export default Accordion;

package/dist/accordion/AccordionItem.d.ts

@@ -0,0 +1,14 @@
+export default interface AccordionItem {
+    /**
+     *
+     */
+    title: string;
+    /**
+     *
+     */
+    component: any;
+    /**
+     * 组件参数
+     */
+    params?: any;
+}

package/dist/accordion/AccordionItem.js

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

package/dist/accordion/AccordionItemView.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+    import type {MouseClickHandler} from "../common/MouseClickHandler";
+
+    export let title: string = "";
+    export let isOpen = false;
+    export let onClick: MouseClickHandler = null as unknown as MouseClickHandler;
+    export let header: any = null;
+
+</script>
+
+<style>
+
+
+</style>
+
+<div class="accordion">
+    <div class="header" aria-hidden="true" on:click={onClick}>
+        {#if header}
+            <svelte:component this={header} {title} {isOpen}/>
+        {:else}
+            <div style="flex: 0 0 auto; padding-right: 8px">
+                <i class="{isOpen ? 'uniface-icon-chevron-down' : 'uniface-icon-chevron-right'}"></i>
+            </div>
+            <div style="flex: 1 1 auto; overflow: hidden; white-space: nowrap; text-overflow: ellipsis">
+                <span>{title}</span>
+            </div>
+        {/if}
+    </div>
+    {#if isOpen}
+        <div class="content">
+            <slot></slot>
+        </div>
+    {/if}
+</div>

package/dist/accordion/AccordionItemView.svelte.d.ts

@@ -0,0 +1,33 @@
+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;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const AccordionItemView: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    title?: string;
+    isOpen?: boolean;
+    onClick?: MouseClickHandler;
+    header?: any;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type AccordionItemView = InstanceType<typeof AccordionItemView>;
+export default AccordionItemView;

package/dist/accordion/index.d.ts

@@ -0,0 +1,4 @@
+import Accordion from "./Accordion.svelte";
+import type AccordionItem from "./AccordionItem";
+export default Accordion;
+export type { AccordionItem };

package/dist/accordion/index.js

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

package/dist/action-bar/ActionBar.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+
+    import type {ButtonActions} from "./ButtonAction";
+    import Button from "../button";
+    import Separator from "../separator";
+
+    export let buttons: ButtonActions = [];
+    export let style: string = '';
+    export let gap: number = 8;
+
+
+</script>
+
+<div class="uniface-action-bar" style="gap: {gap}px; {style}">
+    {#each (buttons ?? []) as button}
+        {#if button}
+            <Button label={button.label} icon={button.icon} disabled={button.disabled===true} type={button.type} onClick={button.handler}/>
+        {:else }
+            <Separator height="24px"/>
+        {/if}
+    {:else }
+        <slot></slot>
+    {/each}
+</div>

package/dist/action-bar/ActionBar.svelte.d.ts

@@ -0,0 +1,32 @@
+import type { ButtonActions } from "./ButtonAction";
+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 ActionBar: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    buttons?: ButtonActions;
+    style?: string;
+    gap?: number;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type ActionBar = InstanceType<typeof ActionBar>;
+export default ActionBar;

package/dist/action-bar/ButtonAction.d.ts

@@ -0,0 +1,25 @@
+import type { ButtonType } from "../button/ButtonType";
+import type { MouseClickHandler } from "..";
+export default interface ButtonAction {
+    /**
+     * 按钮的文字
+     */
+    label: string;
+    /**
+     * 是否禁用
+     */
+    disabled?: boolean;
+    /**
+     * 前缀图标
+     */
+    icon?: string;
+    /**
+     * 按钮的类型
+     */
+    type?: ButtonType;
+    /**
+     * click处理函数
+     */
+    handler: MouseClickHandler;
+}
+export type ButtonActions = Array<ButtonAction | null>;

package/dist/action-bar/ButtonAction.js

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

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

@@ -0,0 +1,5 @@
+import ActionBar from "./ActionBar.svelte";
+import type { ButtonActions } from "./ButtonAction";
+import type ButtonAction from "./ButtonAction";
+export default ActionBar;
+export type { ButtonActions, ButtonAction };

package/dist/action-bar/index.js

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

package/dist/app-layout/ClassicLayout.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+
+    import Split from "../split";
+
+    export let headerHeight: string = "48px";
+    export let sidebarWidth: string = '300px';
+    export let statusHeight: string = "22px";
+
+    export let rightBarWidth: string = '240px';
+
+    export let sidebarResize: boolean = false;
+    export let sidebarMaxWidth: string | null = null;
+    export let sidebarMinWidth: string | null = null;
+
+    export let rightBarResize: boolean = false;
+    export let rightBarMaxWidth: string | null = null;
+    export let rightBarMinWidth: string | null = null;
+
+    let sidebar: any;
+
+    let maxWidth: string;
+    let minWidth: string;
+
+    let rightBar: any;
+    let rightMaxWidth: string;
+    let rightMinWidth: string;
+
+    $: if (sidebarResize && sidebarMaxWidth) {
+        maxWidth = `max-width: ${sidebarMaxWidth};`
+    }
+
+    $: if (sidebarResize && sidebarMinWidth) {
+        minWidth = `min-width: ${sidebarMinWidth};`
+    }
+
+    $: if (rightBarResize && rightBarMaxWidth) {
+        rightMaxWidth = `max-width: ${rightBarMaxWidth};`
+    }
+
+    $: if (rightBarResize && rightBarMinWidth) {
+        rightMinWidth = `min-width: ${rightBarMinWidth};`
+    }
+
+
+</script>
+
+<div style="width: 100%; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; position: relative">
+    <div style="height: 100%; flex: 0 0 auto; position: relative; height: {headerHeight}">
+        <slot name="header"></slot>
+    </div>
+    <div style="height: 100%; flex: 1 1 auto; overflow: hidden; display: flex; flex-direction: row; position: relative">
+        <div bind:this={sidebar} style="width: 100%; flex: 0 0 auto; overflow: auto; width: {sidebarWidth}; {minWidth} {maxWidth}">
+            <slot name="sidebar"></slot>
+        </div>
+        {#if sidebarResize}
+            <Split direction="vertical" bindingPanel={sidebar}/>
+        {/if}
+        <div style="width: 100%; flex: 1 1 auto; overflow: auto">
+            <slot></slot>
+        </div>
+        {#if $$slots['right-sidebar']}
+            {#if sidebarResize}
+                <Split direction="vertical" bindingPanel={rightBar}/>
+            {/if}
+            <div bind:this={rightBar} style="width: 100%; flex: 0 0 auto; overflow: auto; width: {rightBarWidth}; {rightMinWidth} {rightMaxWidth}">
+                <slot name="right-sidebar"></slot>
+            </div>
+        {/if}
+    </div>
+    {#if $$slots['bottom']}
+        <div style="height: 100%; flex: 0 0 auto; position:relative; height: {statusHeight}">
+            <slot name="bottom"></slot>
+        </div>
+    {/if}
+</div>

package/dist/app-layout/ClassicLayout.svelte.d.ts

@@ -0,0 +1,46 @@
+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 ClassicLayout: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    headerHeight?: string;
+    sidebarWidth?: string;
+    statusHeight?: string;
+    rightBarWidth?: string;
+    sidebarResize?: boolean;
+    sidebarMaxWidth?: string | null;
+    sidebarMinWidth?: string | null;
+    rightBarResize?: boolean;
+    rightBarMaxWidth?: string | null;
+    rightBarMinWidth?: string | null;
+}, {
+    header: {};
+    sidebar: {};
+    default: {};
+    'right-sidebar': {};
+    bottom: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    header: {};
+    sidebar: {};
+    default: {};
+    'right-sidebar': {};
+    bottom: {};
+}, {}, string>;
+type ClassicLayout = InstanceType<typeof ClassicLayout>;
+export default ClassicLayout;

package/dist/app-layout/HeaderLayout.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+    import Split from "../split";
+
+    export let headerHeight: string = "48px";
+    export let sidebarWidth: string = '300px';
+
+    export let sidebarResize: boolean = false;
+    export let sidebarMaxWidth: string | null = null;
+    export let sidebarMinWidth: string | null = null;
+
+    let sidebar: any;
+
+    let maxWidth: string;
+    let minWidth: string;
+
+    $: if (sidebarResize && sidebarMaxWidth) {
+        maxWidth = `max-width: ${sidebarMaxWidth};`
+    }
+
+    $: if (sidebarResize && sidebarMinWidth) {
+        minWidth = `min-width: ${sidebarMinWidth};`
+    }
+
+
+
+</script>
+
+<div style="width: 100%; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; position: relative">
+    <div style="width: 100%; flex: 0 0 auto; height: {headerHeight}">
+        <slot name="header"></slot>
+    </div>
+    <div style="width: 100%; flex: 1 1 auto; overflow: hidden; display: flex; flex-direction: row;">
+        <div bind:this={sidebar}
+             style="height: 100%; flex: 0 0 auto; overflow: auto; width: {sidebarWidth}px; {minWidth} {maxWidth}">
+            <slot name="sidebar"></slot>
+        </div>
+        {#if sidebarResize}
+            <Split direction="vertical" bindingPanel={sidebar}/>
+        {/if}
+        <div style="height: 100%; flex: 1 1 auto; overflow: auto">
+            <slot></slot>
+        </div>
+    </div>
+</div>

package/dist/app-layout/HeaderLayout.svelte.d.ts

@@ -0,0 +1,37 @@
+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 HeaderLayout: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    headerHeight?: string;
+    sidebarWidth?: string;
+    sidebarResize?: boolean;
+    sidebarMaxWidth?: string | null;
+    sidebarMinWidth?: string | null;
+}, {
+    header: {};
+    sidebar: {};
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    header: {};
+    sidebar: {};
+    default: {};
+}, {}, string>;
+type HeaderLayout = InstanceType<typeof HeaderLayout>;
+export default HeaderLayout;

package/dist/app-layout/SidebarLayout.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+
+    import Split from "../split";
+
+    export let sidebarResize: boolean = false;
+    export let headerHeight: string = "48px";
+    export let sidebarWidth: string = '300px';
+    export let sidebarMaxWidth: string | null = null;
+    export let sidebarMinWidth: string | null = null;
+
+    let sidebar: any;
+    let maxWidth: string;
+    let minWidth: string;
+
+    $: if (sidebarResize && sidebarMaxWidth) {
+        maxWidth = `max-width: ${sidebarMaxWidth};`
+    }
+
+    $: if (sidebarResize && sidebarMinWidth) {
+        minWidth = `min-width: ${sidebarMinWidth};`
+    }
+
+</script>
+
+<div style="width: 100%; height: 100%; box-sizing: border-box; display: flex; flex-direction: row">
+    <div bind:this={sidebar}
+         style="height: 100%; flex: 0 0 auto; overflow: auto; border-right: 1px solid var(--uniface-plain-border-color, #f0f0f0); width: {sidebarWidth}; {maxWidth} {minWidth}">
+        <slot name="sidebar"></slot>
+    </div>
+    {#if sidebarResize}
+        <Split direction="vertical" bindingPanel={sidebar}/>
+    {/if}
+    <div style="height: 100%; flex: 1 1 auto; overflow: hidden; display: flex; flex-direction: column">
+        {#if $$slots['header']}
+            <div style="width: 100%; flex: 0 0 auto; overflow: auto; height: {headerHeight}">
+                <slot name="header"></slot>
+            </div>
+        {/if}
+        <div style="width: 100%; flex: 1 1 auto; overflow: auto">
+            <slot></slot>
+        </div>
+    </div>
+</div>