@ticatec/uniface-element 0.1.9

package/dist/tag/Tag.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+    import Icon from "../icon";
+    import type {MouseClickHandler} from "../common/MouseClickHandler";
+    import utils from "../common/utils";
+
+    export let size: 'big' | 'middle' | 'small' = 'middle';
+    export let variant: 'borderless' | 'border' | 'round' = 'border';
+    export let removable: boolean = true; //是否可以删除
+    export let text: string = '';
+    export let style: string = '';
+    export {className as class};
+    export let removeHandler: MouseClickHandler = null as unknown as MouseClickHandler;
+    export let color: string = null as unknown as string;
+
+    let className: string = '';
+
+    let colorClass: string = '';
+
+    $: colorClass = utils.isEmpty(color) ? '' : `color color-g${color}`;
+
+</script>
+<div class="uniface-tag" {style}>
+    <div class="{size} {variant} {className} {colorClass}" class:removable={removable} >
+        <span>{text}</span>
+        <Icon name="uniface-icon-x" clickable class="uniface-remove-icon" onClick={removeHandler}/>
+    </div>
+</div>

package/dist/tag/Tag.svelte.d.ts

@@ -0,0 +1,30 @@
+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 Tag: $$__sveltets_2_IsomorphicComponent<{
+    size?: "big" | "middle" | "small";
+    variant?: "borderless" | "border" | "round";
+    removable?: boolean;
+    text?: string;
+    style?: string;
+    class?: string;
+    removeHandler?: MouseClickHandler;
+    color?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {
+    class: string;
+}, string>;
+type Tag = InstanceType<typeof Tag>;
+export default Tag;

package/dist/tag/index.d.ts

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

package/dist/tag/index.js

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

package/dist/text-editor/PasswordEditor.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+
+
+    import prefixFilter from "../utils/prefixFilter";
+    import CommonEditor from "../common-editor/CommonEditor.svelte";
+
+    const excludeAttrs = ['type', 'readonly', 'disabled', 'required', "form", "wrap"]
+
+    export let disabled: boolean = false;
+    export let readonly: boolean = false;
+    export let variant: '' | 'plain' | 'outlined' | 'filled' = '';
+    export let compact: boolean = false;
+    export let style: string = '';
+    export let value: string = '';
+    export {className as class};
+
+    let className: string = '';
+    let input$:any;
+    let type="password"
+
+    const toggleType = () => {
+        if (!readonly && !disabled) {
+            type = type == "password" ? "text" : "password";
+        }
+    }
+
+    $: input$ = prefixFilter($$props, "input$", excludeAttrs);
+
+
+</script>
+<CommonEditor {style} {value} type="password" {readonly} {variant} {compact} class={className}>
+    {#if type=="password"}
+        <input type="password" style="flex: 1 1 auto" bind:value={value} {disabled} {...input$}
+           on:blur on:focus />
+    {:else}
+        <input type="text" style="flex: 1 1 auto" bind:value={value} {disabled} {...input$}
+               on:blur on:focus />
+    {/if}
+    <div slot="trailing-icon" class="editor-embed-icon password-icon">
+        {#if (!readonly && !disabled)}
+            <i class={type == "password" ? "uniface-icon-eye" : "uniface-icon-eye-off"} on:click={toggleType}></i>
+        {/if}
+    </div>
+</CommonEditor>
+
+

package/dist/text-editor/PasswordEditor.svelte.d.ts

@@ -0,0 +1,32 @@
+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 PasswordEditor: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: any;
+    disabled?: boolean | undefined;
+    readonly?: boolean | undefined;
+    variant?: "" | "plain" | "outlined" | "filled" | undefined;
+    compact?: boolean | undefined;
+    style?: string | undefined;
+    value?: string | undefined;
+    class?: string | undefined;
+}, {
+    blur: FocusEvent;
+    focus: FocusEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {
+    class: string;
+}, string>;
+type PasswordEditor = InstanceType<typeof PasswordEditor>;
+export default PasswordEditor;

package/dist/text-editor/TextEditor.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+
+    import {DisplayMode} from "../common/DisplayMode";
+    import prefixFilter from "../utils/prefixFilter";
+    import CommonEditor from "../common-editor/CommonEditor.svelte";
+
+    const excludeAttrs = ['type', 'readonly', 'disabled', 'required', "form", "wrap"]
+
+    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 = '';
+    export let suffix: string = '';
+    export let prefix: string = '';
+    export let removable: boolean = true;
+    export let displayMode: DisplayMode = DisplayMode.Edit;
+    export let onChange: ((value: string) => void) | undefined = undefined;
+
+    let className: string = '';
+    let input$: any;
+    let editor: any;
+
+    $: variant = variant ?? '';
+
+    $: input$ = prefixFilter($$props, "input$", excludeAttrs);
+
+    let oldValue = value;
+
+    const clean = () => {
+        value = '';
+        editor.setFocus();
+    }
+
+    $: if (oldValue != value) {
+        onChange?.(value);
+        oldValue = value;
+    }
+
+</script>
+<CommonEditor {displayMode} {style} {value} {suffix} {prefix} {readonly} {disabled} {variant} {compact}
+              showActionIcon={!readonly && !disabled && removable && value?.length > 0}
+              class={className} clean={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} type="text" style="flex: 1 1 auto" bind:value={value} {...input$}
+           on:blur on:focus on:keydown on:keyup on:keypress on:input on:compositionstart
+           on:compositionend on:compositionupdate/>
+    <svelte:fragment slot="trailing-icon">
+        {#if $$slots['trailing-icon']}
+            <div class="editor-embed-icon">
+                <slot name="trailing-icon"/>
+            </div>
+        {/if}
+    </svelte:fragment>
+</CommonEditor>

package/dist/text-editor/TextEditor.svelte.d.ts

@@ -0,0 +1,48 @@
+import { DisplayMode } from "../common/DisplayMode";
+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 TextEditor: $$__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 | undefined;
+    suffix?: string | undefined;
+    prefix?: string | undefined;
+    removable?: boolean | undefined;
+    displayMode?: DisplayMode | undefined;
+    onChange?: ((value: string) => void) | undefined | undefined;
+}, {
+    blur: FocusEvent;
+    focus: FocusEvent;
+    keydown: KeyboardEvent;
+    keyup: KeyboardEvent;
+    keypress: KeyboardEvent;
+    input: Event;
+    compositionstart: CompositionEvent;
+    compositionend: CompositionEvent;
+    compositionupdate: CompositionEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    'leading-icon': {};
+    'trailing-icon': {};
+}, {
+    class: string;
+}, string>;
+type TextEditor = InstanceType<typeof TextEditor>;
+export default TextEditor;

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

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

package/dist/text-editor/index.js

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