@ticatec/uniface-element 0.1.9

package/dist/progress-step-bar/ProgressStep.js

@@ -0,0 +1,6 @@
+export var ProgressStepStatus;
+(function (ProgressStepStatus) {
+    ProgressStepStatus["Pending"] = "pending";
+    ProgressStepStatus["Processing"] = "processing";
+    ProgressStepStatus["Completed"] = "completed";
+})(ProgressStepStatus || (ProgressStepStatus = {}));

package/dist/progress-step-bar/ProgressStepBar.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+
+    import type ProgressStep from "./ProgressStep";
+    import ProgressStepBlock from "./ProgressStepBlock.svelte";
+
+    export let steps: Array<ProgressStep>;
+    export let direction: 'vertical' | 'horizontal' = 'horizontal';
+    export let backgroundColor: string = 'var(--uniface-progress-step-bar-bg, #ffffff)';
+    export let style: string = '';
+
+</script>
+
+<div class="uniface-progress-step-container {direction}" style="{style}; background-color: {backgroundColor}">
+    <div class="container-panel">
+        {#each steps as step, idx}
+            <ProgressStepBlock pos={idx+1} status={step.status} comment={step.comment} topic={step.topic} {direction}
+                               {backgroundColor}></ProgressStepBlock>
+        {/each}
+    </div>
+</div>
+

package/dist/progress-step-bar/ProgressStepBar.svelte.d.ts

@@ -0,0 +1,24 @@
+import type ProgressStep from "./ProgressStep";
+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 ProgressStepBar: $$__sveltets_2_IsomorphicComponent<{
+    steps: Array<ProgressStep>;
+    direction?: "vertical" | "horizontal";
+    backgroundColor?: string;
+    style?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ProgressStepBar = InstanceType<typeof ProgressStepBar>;
+export default ProgressStepBar;

package/dist/progress-step-bar/ProgressStepBlock.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+
+    import {ProgressStepStatus} from "./ProgressStep";
+
+    export let status: ProgressStepStatus;
+    export let pos: number = 1;
+    export let topic: string;
+    export let comment: string = null as unknown as string;
+    export let style: string = '';
+    export let backgroundColor: string | null;
+    export let direction: 'vertical' | 'horizontal';
+
+    let panelBg: string;
+    $: panelBg = direction==='vertical' ? 'background-color: transparent' : `background-color:${backgroundColor}`;
+</script>
+
+<div class="progress-step-block {status}" {style}>
+    <div class="step-indicator" style="{panelBg}">
+        <div style="background-color: {backgroundColor}">
+            {#if status === ProgressStepStatus.Completed}
+                <span>✔</span>
+            {:else}
+                <span>{pos}</span>
+            {/if}
+        </div>
+    </div>
+    <div class="step-text {status}">
+        <div class="step-topic" >
+            <span style="{panelBg}">{topic}</span>
+        </div>
+        {#if comment}
+            <div class="step-comment">
+                <span>{comment}</span>
+            </div>
+        {/if}
+    </div>
+</div>

package/dist/progress-step-bar/ProgressStepBlock.svelte.d.ts

@@ -0,0 +1,27 @@
+import { ProgressStepStatus } from "./ProgressStep";
+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 ProgressStepBlock: $$__sveltets_2_IsomorphicComponent<{
+    status: ProgressStepStatus;
+    pos?: number;
+    topic: string;
+    comment?: string;
+    style?: string;
+    backgroundColor: string | null;
+    direction: "vertical" | "horizontal";
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ProgressStepBlock = InstanceType<typeof ProgressStepBlock>;
+export default ProgressStepBlock;

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

@@ -0,0 +1,6 @@
+import ProgressStepBar from "./ProgressStepBar.svelte";
+import { ProgressStepStatus } from "./ProgressStep";
+import type ProgressStep from "./ProgressStep";
+export default ProgressStepBar;
+export { ProgressStepStatus };
+export { type ProgressStep };

package/dist/progress-step-bar/index.js

@@ -0,0 +1,5 @@
+import ProgressStepBar from "./ProgressStepBar.svelte";
+import { ProgressStepStatus } from "./ProgressStep";
+export default ProgressStepBar;
+export { ProgressStepStatus };
+export {};

package/dist/prompts-text-editor/PromptsTextEditor.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+
+    import {DisplayMode} from "../common/DisplayMode";
+    import CommonEditor from "../common-editor/CommonEditor.svelte";
+    import type {OnChangeHandler} from "../common/OnChangeHandler";
+    import Popover from "../common/Popover.svelte";
+    import prefixFilter from "../utils/prefixFilter";
+    import utils from "../common/utils.js";
+
+    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 style: string = '';
+    export let value: string | null;
+    export let prefix: string = '';
+    export let suffix: string = '';
+    export let displayMode: DisplayMode = DisplayMode.Edit;
+    export let removable: boolean = true;
+    export let onChange: OnChangeHandler<number | null> = null as unknown as OnChangeHandler<number | null>;
+    export let words: Array<string>;
+    export let menu$height: number = 0;
+    export let placeholder: string = '';
+
+    const excludeAttrs = ['type', 'readonly', 'disabled', 'required', "form", "wrap"]
+
+    let className: string = '';
+    let editor: any;
+
+
+    let showPopup: boolean = false;
+    let divPanel: any;
+    let mh;
+
+    $: mh = `height: ${menu$height > 0 ? menu$height + 'px' : 'auto'}`;
+
+    const openPopup = () => {
+        showPopup = true;
+    }
+
+    const handleHintClick = (item: string) => (e: MouseEvent) => {
+        value = item;
+        showPopup = false;
+        e.stopPropagation();
+        e.preventDefault();
+    }
+
+    $: input$ = prefixFilter($$props, "input$", excludeAttrs);
+
+    let oldValue = value;
+
+    const clean = () => {
+        value = '';
+        editor.setFocus();
+    }
+
+    $: if (oldValue != value) {
+        onChange?.(value);
+        oldValue = value;
+    }
+
+</script>
+
+<div bind:this={divPanel}>
+    <CommonEditor {displayMode} {style} {value} {prefix} {suffix} {readonly} {variant} {compact} class={className}
+                  showActionIcon={removable && !readonly && !disabled && !utils.isEmpty(value)} {clean}>
+        <svelte:fragment slot="leading-icon">
+            {#if $$slots['leading-icon']}
+                <div class="editor-embed-icon">
+                    <slot name="leading-icon"/>
+                </div>
+            {/if}
+        </svelte:fragment>
+        <input bind:this={editor}  style="flex: 1 1 auto" {disabled} {placeholder} bind:value={value} {readonly}/>
+        <div class="editor-embed-icon" slot="trailing-icon">
+            {#if !disabled && !readonly}
+                <i class="option-dropdown uniface-icon-chevron-down" aria-hidden="true" on:click={openPopup}></i>
+            {/if}
+        </div>
+    </CommonEditor>
+
+    {#if showPopup}
+        <Popover target={divPanel} autoFit align="right" on:close={()=>{showPopup=false}}>
+            <div class="options-popover" style={mh}>
+                {#each words as word}
+                    <div style="padding-left: 12px; padding-right: 12px" on:click={handleHintClick(word)} aria-hidden="true">
+                        <span>{word}</span>
+                    </div>
+                {/each}
+            </div>
+        </Popover>
+    {/if}
+</div>

package/dist/prompts-text-editor/PromptsTextEditor.svelte.d.ts

@@ -0,0 +1,41 @@
+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 PromptsTextEditor: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: any;
+    disabled?: boolean | undefined;
+    readonly?: boolean | undefined;
+    variant?: "" | "plain" | "outlined" | "filled" | undefined;
+    compact?: boolean | undefined;
+    class?: string | undefined;
+    style?: string | undefined;
+    value: string | null;
+    prefix?: string | undefined;
+    suffix?: string | undefined;
+    displayMode?: DisplayMode | undefined;
+    removable?: boolean | undefined;
+    onChange?: OnChangeHandler<number | null> | undefined;
+    words: Array<string>;
+    menu$height?: number | undefined;
+    placeholder?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    'leading-icon': {};
+}, {
+    class: string;
+}, string>;
+type PromptsTextEditor = InstanceType<typeof PromptsTextEditor>;
+export default PromptsTextEditor;

package/dist/prompts-text-editor/index.d.ts

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

package/dist/prompts-text-editor/index.js

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

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

@@ -0,0 +1,51 @@
+export declare enum MetaEditorType {
+    /**
+     * 文字类型
+     */
+    Text = "Text",
+    /**
+     * 带常用词的文字输入
+     */
+    CommonText = "CommonText",
+    /**
+     * 数字类型
+     */
+    Number = "Number",
+    /**
+     * 日期类型
+     */
+    Date = "Date",
+    /**
+     * 日期时间类型
+     */
+    DateTime = "DateTime",
+    /**
+     * 下拉框类型
+     */
+    Options = "Options",
+    /**
+     * 布尔型
+     */
+    Boolean = "Boolean"
+}
+export default interface PropertyField {
+    /**
+     * 字段名称
+     */
+    name: string;
+    /**
+     * 文字
+     */
+    label: string;
+    /**
+     * 类型
+     */
+    type: MetaEditorType;
+    /**
+     * 属性
+     */
+    attrs?: any;
+}
+export interface PropertyEditor extends PropertyField {
+    component: any;
+}

package/dist/property-editor/MetaEditorType.js

@@ -0,0 +1,31 @@
+export var MetaEditorType;
+(function (MetaEditorType) {
+    /**
+     * 文字类型
+     */
+    MetaEditorType["Text"] = "Text";
+    /**
+     * 带常用词的文字输入
+     */
+    MetaEditorType["CommonText"] = "CommonText";
+    /**
+     * 数字类型
+     */
+    MetaEditorType["Number"] = "Number";
+    /**
+     * 日期类型
+     */
+    MetaEditorType["Date"] = "Date";
+    /**
+     * 日期时间类型
+     */
+    MetaEditorType["DateTime"] = "DateTime";
+    /**
+     * 下拉框类型
+     */
+    MetaEditorType["Options"] = "Options";
+    /**
+     * 布尔型
+     */
+    MetaEditorType["Boolean"] = "Boolean";
+})(MetaEditorType || (MetaEditorType = {}));

package/dist/property-editor/PropertyEditor.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+
+    import type PropertyField from "./MetaEditorType";
+    import {MetaEditorType, type PropertyEditor} from "./MetaEditorType";
+    import PropertyDateTimePickup from "./component/PropertyDateTimePickup.svelte";
+    import PropertyTextEditor from "./component/PropertyTextEditor.svelte";
+    import PropertyDatePickup from "./component/PropertyDatePickup.svelte";
+    import PropertyNumberEditor from "./component/PropertyNumberEditor.svelte";
+    import PropertyOptionsSelector from "./component/PropertyOptionsSelector.svelte";
+    import i18n from "../i18nContext";
+    import PropertyTextWordsEditor from "./component/PropertyPromptsTextEditor.svelte";
+
+    export let fields: Array<PropertyField>;
+
+    const booleanOptions = [
+        {code: true, text: "true"},
+        {code: false, text: "false"}
+    ]
+
+    let propertyFields: Array<PropertyEditor> = [];
+
+    export let data: any;
+
+    let nameLabel: string = i18n.getText('uniface.propertyEditor.colName', 'Name');
+    let valueLabel: string = i18n.getText('uniface.propertyEditor.colValue', 'Value');
+
+    const getEditor = (property: PropertyField) => {
+        switch (property.type) {
+            case MetaEditorType.Text:
+                return PropertyTextEditor
+            case MetaEditorType.CommonText:
+                return PropertyTextWordsEditor
+            case MetaEditorType.DateTime:
+                return PropertyDateTimePickup
+            case MetaEditorType.Date:
+                return PropertyDatePickup
+            case MetaEditorType.Number:
+                return PropertyNumberEditor
+            case MetaEditorType.Options:
+                return PropertyOptionsSelector
+            case MetaEditorType.Boolean:
+                property.attrs = {...property.attrs, options: booleanOptions};
+                return PropertyOptionsSelector
+
+        }
+    }
+
+    $: propertyFields = fields.map(item => ({component: getEditor(item), ...item}));
+
+</script>
+
+<div class="uniface-property-editor">
+    <div class="table-header">
+        <div class="header_label">
+            {nameLabel}
+        </div>
+        <div class="header_value">
+            {valueLabel}
+        </div>
+    </div>
+    <div class="table-content">
+        <div>
+            {#each propertyFields as property}
+                <div class="property_label">
+                    <span>{property.label}</span>
+                </div>
+                <div class="property_control">
+                    {#if property.component}
+                        <svelte:component this={property.component} attrs={property.attrs} field={property.name} {data}/>
+                    {:else}
+                        <span>Error type</span>
+                    {/if}
+                </div>
+            {/each}
+        </div>
+    </div>
+</div>

package/dist/property-editor/PropertyEditor.svelte.d.ts

@@ -0,0 +1,23 @@
+import type PropertyField from "./MetaEditorType";
+import { type PropertyEditor } from "./MetaEditorType";
+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 PropertyEditor: $$__sveltets_2_IsomorphicComponent<{
+    fields: Array<PropertyField>;
+    data: any;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type PropertyEditor = InstanceType<typeof PropertyEditor>;
+export default PropertyEditor;

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

@@ -0,0 +1,22 @@
+<script lang="ts">
+
+    import utils from "../../common/utils";
+    import DatePicker from "../../date-picker";
+
+    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>
+
+<DatePicker variant="plain" bind:value={obj[key]} {...attrs}/>

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

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

@@ -0,0 +1,22 @@
+<script lang="ts">
+
+    import utils from "../../common/utils";
+    import {DateTimePicker} from "../../date-picker";
+
+    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>
+
+<DateTimePicker variant="plain" bind:value={obj[key]} {...attrs}/>

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

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

@@ -0,0 +1,22 @@
+<script lang="ts">
+
+    import utils from "../../common/utils";
+    import NumberEditor from "../../number-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>
+
+<NumberEditor variant="plain" bind:value={obj[key]} {...attrs}/>

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

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

@@ -0,0 +1,22 @@
+<script lang="ts">
+
+    import utils from "../../common/utils";
+    import OptionsSelect from "../../options-select";
+
+    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>
+
+<OptionsSelect variant="plain" bind:value={obj[key]} {...attrs}/>

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