@ticatec/uniface-element 0.1.9

package/dist/property-editor/component/PropertyPromptsTextEditor.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+
+    import utils from "../../common/utils";
+    import PromptsTextEditor from "../../prompts-text-editor";
+
+    export let data: any;
+    export let field: string;
+
+    export let attrs: any;
+
+    let key: string = field;
+    let obj: any = data;
+
+    $: if (field && data) {
+        let keys = field.split('.');
+        key = keys.pop() ?? '';
+        obj = utils.getNestedObject(data, keys);
+    }
+
+</script>
+
+<PromptsTextEditor variant="plain" bind:value={obj[key]} {...attrs}/>

package/dist/property-editor/component/PropertyPromptsTextEditor.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 PropertyPromptsTextEditor: $$__sveltets_2_IsomorphicComponent<{
+    data: any;
+    field: string;
+    attrs: any;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type PropertyPromptsTextEditor = InstanceType<typeof PropertyPromptsTextEditor>;
+export default PropertyPromptsTextEditor;

package/dist/property-editor/component/PropertyTextEditor.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+
+    import TextEditor from "../../text-editor";
+    import utils from "../../common/utils";
+
+    export let data: any;
+    export let field: string;
+
+    export let attrs: any;
+
+    let key: string = field;
+    let obj: any = data;
+
+    $: if (field && data) {
+        let keys = field.split('.');
+        key = keys.pop() ?? '';
+        obj = utils.getNestedObject(data, keys);
+    }
+
+</script>
+
+<TextEditor variant="plain" bind:value={obj[key]} {...attrs}/>

package/dist/property-editor/component/PropertyTextEditor.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 PropertyTextEditor: $$__sveltets_2_IsomorphicComponent<{
+    data: any;
+    field: string;
+    attrs: any;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type PropertyTextEditor = InstanceType<typeof PropertyTextEditor>;
+export default PropertyTextEditor;

package/dist/property-editor/index.d.ts

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

package/dist/property-editor/index.js

@@ -0,0 +1 @@
+"use strict";

package/dist/radio-button/RadioButton.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+    import {onMount} from "svelte";
+
+    export let value: any;
+    export let label: string;
+    export let group: any;
+    export let disabled: boolean = false;
+    export let readonly: boolean = false;
+    export let compact: boolean = false;
+    export let style: string = '';
+
+    let roProps: any = {};
+
+    onMount(()=>{
+
+    })
+
+    const handleClick = (e: MouseEvent) => {
+        if (disabled || readonly) {
+            e.stopPropagation();
+            e.preventDefault();
+        }
+    }
+
+    $: roProps = readonly ? {readonly} : {}
+
+</script>
+
+<label class="uniface-radio-button" {style} class:disabled class:compact>{label}
+    <input type="radio" bind:group {disabled} {...roProps} on:click={handleClick} {value}>
+    <span></span>
+</label>

package/dist/radio-button/RadioButton.svelte.d.ts

@@ -0,0 +1,26 @@
+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 RadioButton: $$__sveltets_2_IsomorphicComponent<{
+    value: any;
+    label: string;
+    group: any;
+    disabled?: boolean;
+    readonly?: boolean;
+    compact?: boolean;
+    style?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type RadioButton = InstanceType<typeof RadioButton>;
+export default RadioButton;

package/dist/radio-button/index.d.ts

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

package/dist/radio-button/index.js

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

package/dist/search-box/SearchBox.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+
+    import CommonEditor from "../common-editor/CommonEditor.svelte";
+    import iconLoader from "../assets/loading.gif";
+    import type {OnChangeHandler} from "../common/OnChangeHandler";
+
+    export let variant: '' | 'plain' | 'outlined' | 'filled' = '';
+    export let compact: boolean = false;
+    export let style: string = '';
+    export let value: string = '';
+    export let loading: boolean = false;
+    export let onChange: OnChangeHandler<string> = null as unknown as OnChangeHandler<string>;
+
+    let composing: boolean = false;
+    let inputText: string;
+
+    $: inputText = value;
+
+    const handleInput = () => {
+        if (composing == false) {
+            value = inputText;
+            onChange?.(value);
+        }
+    };
+    const handleCompositionStart = (event: CompositionEvent) => {
+        //event.target.composing = true;
+        composing = true;
+    };
+
+    const handleCompositionEnd = (event: CompositionEvent) => {
+        //event.target.composing = false;
+        composing = false;
+        value = inputText;
+        onChange?.(value);
+    };
+
+</script>
+
+<CommonEditor {variant} {compact} {style}>
+    <div slot='leading-icon'>
+        {#if loading}
+            <img width="20" height="20" src={iconLoader} alt=""/>
+        {:else}
+            <i class="uniface-icon-search"></i>
+        {/if}
+    </div>
+    <input style="width: 100%" bind:value={inputText} on:input={handleInput} on:compositionstart={handleCompositionStart}
+           on:compositionend={handleCompositionEnd} />
+</CommonEditor>

package/dist/search-box/SearchBox.svelte.d.ts

@@ -0,0 +1,26 @@
+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 SearchBox: $$__sveltets_2_IsomorphicComponent<{
+    variant?: "" | "plain" | "outlined" | "filled";
+    compact?: boolean;
+    style?: string;
+    value?: string;
+    loading?: boolean;
+    onChange?: OnChangeHandler<string>;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type SearchBox = InstanceType<typeof SearchBox>;
+export default SearchBox;

package/dist/search-box/index.d.ts

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

package/dist/search-box/index.js

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

package/dist/separator/Separator.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+
+    export let height: string = '24px';
+    export let style: string = '';
+
+</script>
+
+<div class="uniface-separator" style="height: {height}; {style};">
+
+</div>

package/dist/separator/Separator.svelte.d.ts

@@ -0,0 +1,21 @@
+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 Separator: $$__sveltets_2_IsomorphicComponent<{
+    height?: string;
+    style?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Separator = InstanceType<typeof Separator>;
+export default Separator;

package/dist/separator/index.d.ts

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

package/dist/separator/index.js

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

package/dist/split/Split.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+
+    export let direction: "horizontal" | "vertical" = "vertical";
+    export let width: number = 2;
+    export let bindingPanel: any = null;
+
+    let fixed: boolean = true;
+
+    let style: string;
+
+
+    $: style = direction == "horizontal" ? `height: ${width}px` : `width: ${width}px`;
+
+    let isDragging = false;
+
+    const startDrag = (event: MouseEvent) => {
+        if (!fixed) {
+            isDragging = true;
+            document.addEventListener("mousemove", onDrag);
+            document.addEventListener("mouseup", stopDrag);
+        } else {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    }
+
+    const onDrag = (event: MouseEvent) => {
+        if (isDragging && bindingPanel) {
+            if (direction === "horizontal") {
+                bindingPanel.style.height = `${Math.max(5, event.movementY + bindingPanel.clientHeight)}px`;
+            } else {
+                bindingPanel.style.width = `${Math.max(5, event.movementX + bindingPanel.clientWidth)}px`;
+            }
+        }
+    }
+
+    const stopDrag = () => {
+        isDragging = false;
+        document.removeEventListener("mousemove", onDrag);
+        document.removeEventListener("mouseup", stopDrag);
+    }
+
+    $:fixed = bindingPanel == null;
+</script>
+
+<div class="uniface-divider {direction}" class:fixed {style} aria-hidden="true" on:mousedown={startDrag}>
+
+</div>

package/dist/split/Split.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 Split: $$__sveltets_2_IsomorphicComponent<{
+    direction?: "horizontal" | "vertical";
+    width?: number;
+    bindingPanel?: any;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Split = InstanceType<typeof Split>;
+export default Split;

package/dist/split/index.d.ts

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

package/dist/split/index.js

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

package/dist/switch/Switch.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+
+    export let checkLabel: string = "On";
+    export let uncheckLabel: string = "Off";
+    export let readonly: boolean = false;
+    export let disabled: boolean = false;
+
+    export let value: boolean;
+
+    const toggleSwitch = (e: MouseEvent) => {
+        if (readonly || disabled) {
+            //value = !value;
+            e.stopPropagation();
+            e.preventDefault();
+        }
+    }
+
+</script>
+
+<div class="switch-box">
+    <label class="switch" class:readonly class:disabled aria-hidden="true" on:click={toggleSwitch}>
+        <input type="checkbox" bind:checked={value}>
+        <span class="slider"></span>
+        <span class="text">{value ? uncheckLabel : checkLabel}</span>
+    </label>
+</div>
+

package/dist/switch/Switch.svelte.d.ts

@@ -0,0 +1,24 @@
+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 Switch: $$__sveltets_2_IsomorphicComponent<{
+    checkLabel?: string;
+    uncheckLabel?: string;
+    readonly?: boolean;
+    disabled?: boolean;
+    value: boolean;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Switch = InstanceType<typeof Switch>;
+export default Switch;

package/dist/switch/index.d.ts

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

package/dist/switch/index.js

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

package/dist/tabs/Tabs.svelte

@@ -0,0 +1,147 @@
+<script lang="ts">
+
+    import {onMount, onDestroy} from "svelte";
+    import {Tween} from 'svelte/motion';
+    import {cubicOut} from 'svelte/easing';
+    import type {TabActionHandler, TabCloseHandler, TabRender} from "./types";
+
+
+
+    export {className as class};
+    export let simple: boolean = false;
+    export let textField: string = 'text';
+    export let style: string = '';
+    export let tabs: Array<any> = [];
+    export let closable: boolean | TabActionHandler = false;
+    export let activeTab: any = null;
+    export let refreshable: boolean = false;
+    export let tabRender: TabRender = null as unknown as TabRender;
+    export let reloadHandler: TabActionHandler = null as unknown as TabActionHandler;
+    export let closeHandler: TabCloseHandler = null as unknown as TabCloseHandler;
+
+    let className: string = "";
+
+    let container: any;
+    let showLeft = false;
+    let showRight = false;
+    let scrollX = new Tween(0, {duration: 300, easing: cubicOut});
+    let currentLeft = 0;
+
+    onMount(() => {
+        if (activeTab == null && tabs.length > 0) {
+            activeTab = tabs[0];
+        }
+
+        checkOverflow();
+        container.addEventListener('scroll', checkOverflow);
+        window.addEventListener('resize', checkOverflow);
+        checkOverflow();
+    });
+
+    onDestroy(() => {
+        window.removeEventListener('resize', checkOverflow);
+    });
+
+    const checkOverflow = () => {
+        if (container) {
+            if (currentLeft + container.clientWidth > container.scrollWidth) {
+                currentLeft = container.scrollWidth - container.clientWidth;
+                scrollX.set(currentLeft);
+            }
+            if (currentLeft > 0 && container.clientWidth <= container.scrollWidth) {
+                currentLeft = container.scrollWidth - container.clientWidth;
+                scrollX.set(currentLeft);
+            }
+            showRight = currentLeft + container.clientWidth < container.scrollWidth;
+            showLeft = currentLeft > 0;
+        }
+    };
+
+    const scroll = (direction: any) => {
+        if (container) {
+            const scrollAmount = 100;
+            currentLeft = currentLeft + direction * scrollAmount;
+            if (currentLeft < 0) {
+                currentLeft = 0;
+            } else if (currentLeft + container.clientWidth > container.scrollWidth) {
+                currentLeft = container.scrollWidth - container.clientWidth + 1;
+            }
+            scrollX.set(currentLeft);
+            checkOverflow();
+        }
+    };
+
+
+    const handleTabClick = (tab: any) => (e: MouseEvent) => {
+        if (tab != activeTab) {
+            activeTab = tab;
+        }
+    }
+
+    const closeTab = (tab: any) => async (e: MouseEvent) => {
+        let pos = tabs.indexOf(tab);
+        if (pos > -1) {
+            let canClose = closeHandler == null ? true : await closeHandler(tab);
+            if (canClose) {
+                tabs.splice(pos, 1);
+                tabs = [...tabs];
+                if (tab == activeTab) {
+                    if (tabs.length > 0) {
+                        if (pos > tabs.length) {
+                            pos = tabs.length - 1;
+                        }
+                        if (pos == -1) {
+                            pos = 0;
+                        }
+                        activeTab = tabs[pos];
+                    } else {
+                        activeTab = null;
+                    }
+                }
+                checkOverflow();
+            }
+        }
+        e.stopPropagation();
+        e.preventDefault();
+    }
+
+    const reloadTab = (tab: any) => (e: MouseEvent) => {
+        reloadHandler?.(tab);
+    }
+
+
+</script>
+<div class="uniface-tab-panel {className}" {style}>
+    <div>
+        <div class="uniface-tabs-wrap" class:simple>
+            <div class="scroll-left" style="visibility: {showLeft ? 'visible' : 'hidden'}">
+                <i class="uniface-icon-chevron-left" aria-hidden="true" on:click={() => scroll(-1)}></i>
+            </div>
+            <div class="tabs-panel" style="overflow: hidden;">
+                <div style="position: relative; left: {-scrollX.current}px" bind:this={container}>
+                    {#each tabs as tab}
+                        <div class="uniface-tab" class:active={tab===activeTab} on:click={handleTabClick(tab)} aria-hidden="true">
+                            {#if tabRender != null}
+                                <svelte:component this={tabRender} {tab} {refreshable} {closable} on:reload on:close={closeTab(tab)}/>
+                            {:else}
+                                <span>{tab[textField]}</span>
+                                {#if refreshable}
+                                    <i class="uniface-icon-rotate-cw tab-refresh" on:click={reloadTab(tab)} aria-hidden="true"></i>
+                                {/if}
+                                {#if closable === true || (typeof (closable) == "function" && closable(tab))}
+                                    <i class="uniface-icon-x tab-action" on:click={closeTab(tab)} aria-hidden="true"></i>
+                                {/if}
+                            {/if}
+                        </div>
+                    {/each}
+                </div>
+            </div>
+            <div class="scroll-right" style="visibility: {showRight ? 'visible' : 'hidden'}">
+                <i class="uniface-icon-chevron-right" aria-hidden="true" on:click={() => scroll(1)}></i>
+            </div>
+        </div>
+        <div class="tab-content" style="flex: 1 1 auto; height: 100%; overflow: hidden">
+            <slot/>
+        </div>
+    </div>
+</div>

package/dist/tabs/Tabs.svelte.d.ts

@@ -0,0 +1,44 @@
+import type { TabActionHandler, TabCloseHandler, TabRender } from "./types";
+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 Tabs: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    class?: string;
+    simple?: boolean;
+    textField?: string;
+    style?: string;
+    tabs?: Array<any>;
+    closable?: boolean | TabActionHandler;
+    activeTab?: any;
+    refreshable?: boolean;
+    tabRender?: TabRender;
+    reloadHandler?: TabActionHandler;
+    closeHandler?: TabCloseHandler;
+}, {
+    default: {};
+}>, {
+    reload: any;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {
+    class: string;
+}, string>;
+type Tabs = InstanceType<typeof Tabs>;
+export default Tabs;

package/dist/tabs/index.d.ts

@@ -0,0 +1,4 @@
+import Tabs from "./Tabs.svelte";
+import type { TabActionHandler, TabCloseHandler, TabRender } from "./types";
+export default Tabs;
+export type { TabActionHandler, TabCloseHandler, TabRender };

package/dist/tabs/index.js

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

package/dist/tabs/types.d.ts

@@ -0,0 +1,3 @@
+export type TabActionHandler = (tab: any) => void;
+export type TabCloseHandler = (tab: any) => Promise<boolean>;
+export type TabRender = (tab: any) => any;

package/dist/tabs/types.js

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