@ticatec/uniface-element 0.1.24 → 0.1.31

package/dist/accordion/Accordion.svelte

@@ -2,6 +2,7 @@
 
     import type AccordionItem from "./AccordionItem";
     import Accordion from "./AccordionItemView.svelte";
+    import {onMount} from "svelte";
 
     export let style: string = '';
     export {className as class};
@@ -14,6 +15,13 @@
 
     let openSet: Set<AccordionItem> = new Set();
 
+    onMount(() => {
+        if (exclusive && activeItem == null) {
+            openSet.add(accordions[0]);
+            accordions = [...accordions];
+        }
+    })
+
     const handleAccordionClick = (accordion: AccordionItem) => (event: MouseEvent) => {
         if (exclusive) {
             if (activeItem != accordion) {
@@ -36,7 +44,7 @@
 
 <div class="uniface-accordion-panel {className}" {style} class:compact>
     {#each accordions as accordion}
-        <Accordion title={accordion.title} isOpen={openSet.has(accordion)} onClick={handleAccordionClick(accordion)}>
+        <Accordion title={accordion.title} isOpen={openSet.has(accordion)} {exclusive}  onClick={handleAccordionClick(accordion)}>
             <svelte:component this={accordion.component} {...accordion.params}/>
         </Accordion>
     {/each}

package/dist/accordion/AccordionItemView.svelte

@@ -6,6 +6,8 @@
     export let onClick: MouseClickHandler = null as unknown as MouseClickHandler;
     export let header: any = null;
 
+    export let exclusive: boolean;
+
 </script>
 
 <style>
@@ -16,14 +18,22 @@
 <div class="accordion">
     <div class="header" aria-hidden="true" on:click={onClick}>
         {#if header}
-            <svelte:component this={header} {title} {isOpen}/>
+            <svelte:component this={header} {title} {isOpen}/>  <!-- TODO 自定义每个条目的标题 -->
         {: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 exclusive}
+                {#if isOpen}
+                    <div style="flex: 0 0 auto;">
+                        <i class="icon_google_folder_open"></i>
+                    </div>
+                {/if}
+            {:else}
+                <div style="flex: 0 0 auto;">
+                    <i class="{isOpen ? 'icon_google_keyboard_arrow_up' : 'icon_google_keyboard_arrow_down'}"></i>
+                </div>
+            {/if}
         {/if}
     </div>
     {#if isOpen}

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

@@ -22,6 +22,7 @@ declare const AccordionItemView: $$__sveltets_2_IsomorphicComponent<$$__sveltets
     isOpen?: boolean;
     onClick?: MouseClickHandler;
     header?: any;
+    exclusive: boolean;
 }, {
     default: {};
 }>, {

package/dist/app-top-bar/AppTopBar.svelte

@@ -1,25 +1,21 @@
 <script lang="ts">
-    export let title: string = 'My Header';
+    export let title: string;
     export let style: string = '';
 </script>
 
-<div class="uniface-header" {style}>
+<div class="uniface-top-bar" {style}>
     {#if $$slots['home']}
-    <div class="bar-home" style="align-self: center">
-        <slot name="home">
+        <div class="bar-home">
+            <slot name="home">
 
-        </slot>
-    </div>
+            </slot>
+        </div>
     {/if}
-    <div class="title">
+    <div class="main-content">
         <slot>
             <span>{title}</span>
         </slot>
     </div>
-    {#if $$slots['right']}
-        <div class="bar-right">
-        <slot name="right">
-        </slot>
-        </div>
-    {/if}
+    <slot name="right">
+    </slot>
 </div>

package/dist/app-top-bar/AppTopBar.svelte.d.ts

@@ -17,7 +17,7 @@ type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
     children?: any;
 } : {});
 declare const AppTopBar: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    title?: string;
+    title: string;
     style?: string;
 }, {
     home: {};

package/dist/breadcrumbs/Breadcrumb.d.ts

@@ -0,0 +1,4 @@
+export default interface Breadcrumb {
+    label: string;
+    data: any;
+}

package/dist/breadcrumbs/Breadcrumbs.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+    // 定义组件属性
+    import type Breadcrumb from "./Breadcrumb";
+
+    export let items: Array<Breadcrumb> = []; //
+    export let separator: string = "/"; // 分隔符
+    export let onItemClick: (item: any) => (event: MouseEvent) => void;
+
+    export let style: string = '';
+
+</script>
+
+
+<div class="uniface-breadcrumbs" {style}>
+    {#each items as item, idx}
+        <div>
+            <span>{separator}</span>
+            <span aria-hidden="true" class="breadcrumb" on:click={idx==items.length-1 ? null : onItemClick(item.data)}>{item.label}</span>
+        </div>
+    {/each}
+</div>

package/dist/breadcrumbs/Breadcrumbs.svelte.d.ts

@@ -0,0 +1,24 @@
+import type Breadcrumb from "./Breadcrumb";
+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 Breadcrumbs: $$__sveltets_2_IsomorphicComponent<{
+    items?: Array<Breadcrumb>;
+    separator?: string;
+    onItemClick: (item: any) => (event: MouseEvent) => void;
+    style?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Breadcrumbs = InstanceType<typeof Breadcrumbs>;
+export default Breadcrumbs;

package/dist/breadcrumbs/index.d.ts

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

package/dist/breadcrumbs/index.js

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

package/dist/button/Button.svelte

@@ -30,11 +30,11 @@
 <div {style} class="uniface-button common-button {variant} {size} {type}" aria-hidden="true" class:disabled
      on:click={handleClick}>
     {#if icon != null}
-        <i style="margin-right: 6px" class={icon}></i>
+        <i class={icon}></i>
     {/if}
     <slot>
         {#if label != null && label.length > 0}
-            <span>{label}</span>
+            <span style="flex: 1 1 auto">{label}</span>
         {/if}
     </slot>
 </div>

package/dist/card/Card.svelte

@@ -9,6 +9,8 @@
     export let actions: Array<CardAction> = [];
     export let variant: 'plain' | '3d' = 'plain';
 
+    export let iconColor: string | null = null;
+
 </script>
 
 <div class="uniface-card" class:shadowBox={variant=='3d'}>
@@ -26,7 +28,7 @@
             <slot/>
         </div>
         {#if actions && actions.length > 0}
-            <CommonCardActionBar {actions}/>
+            <CommonCardActionBar color={iconColor} {actions}/>
         {:else }
             {#if $$slots['action-bar']}
                 <div class="card-action-bar">

package/dist/card/Card.svelte.d.ts

@@ -22,6 +22,7 @@ declare const Card: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithC
     title?: string;
     actions?: Array<CardAction>;
     variant?: "plain" | "3d";
+    iconColor?: string | null;
 }, {
     'header-bar': {};
     default: {};

package/dist/card/CommonCardActionBar.svelte

@@ -3,7 +3,7 @@
     import utils from "../common/utils";
 
     export let actions: Array<CardAction>;
-
+    export let color: string | null = null;
 
     let clickEnable = true;
 
@@ -16,9 +16,11 @@
         }
     }
 
+    $: fontColor = color ? `color: ${color}` : '';
+
 </script>
 
-<div class="card-action-bar simple">
+<div class="card-action-bar simple" style="{fontColor}">
     {#each actions as action}
         <div class:disabled={action.disabled} class="action-item">
             {#if action.icon}

package/dist/card/CommonCardActionBar.svelte.d.ts

@@ -14,6 +14,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const CommonCardActionBar: $$__sveltets_2_IsomorphicComponent<{
     actions: Array<CardAction>;
+    color?: string | null;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;

package/dist/color-picker/ColorPicker.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+
+
+    import {DisplayMode} from "../common/DisplayMode";
+    import type {OnChangeHandler} from "../common/OnChangeHandler";
+    import CommonPicker from "../common/CommonPicker.svelte";
+
+    type OnActionHandler = () => void;
+
+    export let showHex = true;
+    export let showRgb = false;
+
+    export let variant: '' | 'plain' | 'outlined' | 'filled' = '';
+    export let disabled: boolean = false;
+    export let readonly: boolean = false;
+    export let compact: boolean = false;
+    export let value: any = "#ff3e00";
+    export let style: string = '';
+    export let onChange: OnChangeHandler<any> = null as unknown as OnChangeHandler<any>;
+
+
+    let oldValue = value;
+
+    $: if (oldValue != value) {
+        oldValue = value;
+    }
+
+    let editor: any;
+
+    const clean = () => {
+
+    }
+
+    const handleActionIconClick = () => {
+        editor.click();
+    }
+
+    function handleColorChange(event) {
+        selectedColor = event.target.value;
+        rgbValues = hexToRgb(selectedColor);
+        console.log(selectedColor, rgbValues);
+        // dispatch('change', {
+        //     hex: selectedColor,
+        //     rgb: rgbValues
+        // });
+    }
+
+</script>
+
+<CommonPicker displayMode={DisplayMode.Edit} {variant} {style} {compact} className="multiple" dropDownIcon="icon_google_color_lens"
+              canClean={false} autoFit {clean} textValue={value} {readonly} {disabled} iconClickHandler={handleActionIconClick}>
+<!--    <div style="flex: 1 1 auto; width: 50%; height: 60%; border-radius: 4px; background-color: {value}"></div>-->
+    <div style="width: 100%; display: flex; overflow: hidden; flex-direction: row; align-items: center; height: 100%; gap: 8px">
+        <input bind:this={editor} style="flex: 0 0 auto; width: 40%; height: 80%; border-radius: 8px;" type="color"  bind:value on:change={handleColorChange}/>
+        <input style="flex: 0 0 auto; width: 50%; text-align: center" class="text-editor" readonly value={value??''} {disabled}/>
+    </div>
+
+
+</CommonPicker>

package/dist/color-picker/ColorPicker.svelte.d.ts

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

package/dist/color-picker/ColorPickerPanel.svelte

@@ -0,0 +1,179 @@
+<script lang="ts">
+
+
+    // Define props with default values
+    import i18n from "@ticatec/i18n";
+    import langRes from "../i18n_resources/uniface_en_resource";
+
+    export let initialColor = "#ffffff";
+    export let showHex = true;
+    export let showRgb = false;
+    export let swatches = [];
+
+    let selectedColor = initialColor;
+    let rgbValues = hexToRgb(initialColor);
+
+
+    // Convert hex to RGB
+    function hexToRgb(hex) {
+        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+        return result ? {
+            r: parseInt(result[1], 16),
+            g: parseInt(result[2], 16),
+            b: parseInt(result[3], 16)
+        } : { r: 0, g: 0, b: 0 };
+    }
+
+    // Emit change event when color changes
+    function handleColorChange(event) {
+        selectedColor = event.target.value;
+        rgbValues = hexToRgb(selectedColor);
+        dispatch('change', {
+            hex: selectedColor,
+            rgb: rgbValues
+        });
+    }
+
+    // Select a swatch
+    function selectSwatch(color) {
+        selectedColor = color;
+        rgbValues = hexToRgb(selectedColor);
+        // dispatch('change', {
+        //     hex: selectedColor,
+        //     rgb: rgbValues
+        // });
+    }
+</script>
+
+<div class="color-picker">
+    <label for="color-input">
+        {i18n.getText('uniface.pickupColor', langRes.uniface.colorPicker)
+            }
+    </label>
+
+    <div class="color-input-group">
+        <input
+                id="color-input"
+                type="color"
+                bind:value={selectedColor}
+                on:change={handleColorChange}
+        />
+        <div
+                class="color-preview"
+                style="background-color: {selectedColor};"
+        ></div>
+    </div>
+
+    {#if showHex}
+            <div class="color-value">
+                <span>HEX:</span> {selectedColor}
+            </div>
+        {/if}
+
+    {#if showRgb}
+            <div class="color-value">
+                <span>RGB:</span> rgb({rgbValues.r}, {rgbValues.g}, {rgbValues.b})
+            </div>
+        {/if}
+
+    {#if swatches && swatches.length > 0}
+            <div class="swatches">
+                {#each swatches as swatch}
+                        <button
+                                class="swatch"
+                                style="background-color: {swatch};"
+                                on:click={() => selectSwatch(swatch)}
+                                aria-label={`Select color ${swatch}`}
+                                class:selected={selectedColor === swatch}
+                        ></button>
+                    {/each}
+            </div>
+        {/if}
+</div>
+
+<style>
+    .color-picker {
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+        padding: 16px;
+        border-radius: 8px;
+        background-color: #f8f9fa;
+        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+        width: 100%;
+        max-width: 300px;
+    }
+
+    label {
+        display: block;
+        margin-bottom: 8px;
+        font-weight: 500;
+        color: #333;
+    }
+
+    .color-input-group {
+        display: flex;
+        align-items: center;
+        margin-bottom: 12px;
+    }
+
+    input[type="color"] {
+        -webkit-appearance: none;
+        width: 40px;
+        height: 40px;
+        border: none;
+        padding: 0;
+        background: none;
+        cursor: pointer;
+    }
+
+    input[type="color"]::-webkit-color-swatch-wrapper {
+        padding: 0;
+    }
+
+    input[type="color"]::-webkit-color-swatch {
+        border: 1px solid #ddd;
+        border-radius: 4px;
+    }
+
+    .color-preview {
+        width: 40px;
+        height: 40px;
+        margin-left: 12px;
+        border-radius: 4px;
+        border: 1px solid #ddd;
+    }
+
+    .color-value {
+        margin-bottom: 8px;
+        font-size: 14px;
+    }
+
+    .color-value span {
+        font-weight: 600;
+        margin-right: 4px;
+    }
+
+    .swatches {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
+        margin-top: 12px;
+    }
+
+    .swatch {
+        width: 24px;
+        height: 24px;
+        border-radius: 50%;
+        border: 1px solid #ddd;
+        cursor: pointer;
+        transition: transform 0.2s ease;
+    }
+
+    .swatch:hover {
+        transform: scale(1.1);
+    }
+
+    .swatch.selected {
+        border: 2px solid #333;
+        box-shadow: 0 0 0 2px white inset;
+    }
+</style>

package/dist/color-picker/ColorPickerPanel.svelte.d.ts

@@ -0,0 +1,23 @@
+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 ColorPickerPanel: $$__sveltets_2_IsomorphicComponent<{
+    initialColor?: string;
+    showHex?: boolean;
+    showRgb?: boolean;
+    swatches?: any[];
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ColorPickerPanel = InstanceType<typeof ColorPickerPanel>;
+export default ColorPickerPanel;

package/dist/color-picker/index.d.ts

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

package/dist/color-picker/index.js

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

package/dist/common/CommonPicker.svelte

@@ -29,7 +29,10 @@
 </script>
 {#if displayMode === DisplayMode.View}
     <div class="uniface-display-field">
-        <span>{textValue}</span>
+        <div class="content">
+            <span>{textValue}</span>
+        </div>
+
     </div>
 {:else}
     <div bind:this={editorElement} class="uniface-common-editor {variant} uniface-common-picker {className}" tabindex="-1" class:compact
@@ -37,11 +40,11 @@
         {#if readonly || disabled}
             <input style="width: 100%" class="readonly" class:disabled readonly {disabled} value={textValue}/>
         {:else}
-            <div style="flex: 1 1 auto; position: relative; height: 100%">
+            <div style="flex: 1 1 auto; position: relative; overflow: hidden; height: 100%">
                 <slot></slot>
                 {#if canClean && textValue && textValue.length > 0}
                     <div class="uniface-editor-clean-icon">
-                        <i class="uniface-icon-x clickable " aria-hidden="true" on:click={clean}></i>
+                        <i class="icon_google_clear clickable " aria-hidden="true" on:click={clean}></i>
                     </div>
                 {/if}
             </div>

package/dist/common/Popover.svelte

@@ -74,9 +74,16 @@
         window.addEventListener("resize", updatePosition);
         document.addEventListener("scroll", updatePosition, {passive: false});
         const interval = setInterval(checkPosition, 10); // 每 100ms 检测一次
+        const resizeObserver = new ResizeObserver(entries => {
+            for (let entry of entries) {
+                updatePosition();
+            }
+        });
+        resizeObserver.observe(contentPanel);
         return () => {
             window.removeEventListener("resize", updatePosition);
             document.removeEventListener("scroll", updatePosition);
+            resizeObserver.disconnect();
             clearInterval(interval);
         };
     });
@@ -95,8 +102,8 @@
 </script>
 <svelte:window bind:innerWidth={w} bind:innerHeight={h}/>
 <Portal target="body">
-    <div class="uniface-popover-wrapper" class:hidden style="{vertPos}; left: {position.left-margin}px; width: {position.width}px; ">
-        <div class="uniface-popover" style="" use:clickOutside
+    <div class="uniface-popover-wrapper" class:hidden style="{vertPos}; height: auto; left: {position.left-margin}px; width: {position.width}px; ">
+        <div class="uniface-popover"  use:clickOutside
              on:outerClick={close}>
             <div bind:this={contentPanel} style="{horzPos}">
                 <div class="contents" style="{style}">

package/dist/common-editor/CommonEditor.svelte

@@ -43,14 +43,14 @@
 {:else}
     <div class:compact class="uniface-common-editor {variant} {className}" tabindex="-1"
          style="{style}">
-        {#if !utils.isEmpty(prefix)}
-            <div class="editor-prefix" tabindex="-1" style="flex: 0 0 auto;">
-                <span>{prefix}</span>
-            </div>
-        {:else if $$slots['leading-icon'] && hasLeadingIcon}
+        {#if $$slots['leading-icon'] && hasLeadingIcon}
             <div class="editor-embed-icon" style="flex: 0 0 auto;">
                 <slot name="leading-icon"/>
             </div>
+        {:else if !utils.isEmpty(prefix)}
+            <div class="editor-prefix" tabindex="-1" style="flex: 0 0 auto;">
+                <span>{prefix}</span>
+            </div>
         {/if}
         {#if disabled || readonly}
             <input style="flex: 1 1 auto" {value} {disabled} {readonly} {placeholder}>
@@ -58,7 +58,7 @@
             <div style="position: relative; flex: 1 1 auto">
                 <slot/>
                 <div class="uniface-editor-clean-icon {showActionIcon ? '' : 'hidden'}">
-                    <i class="uniface-icon-x clickable" aria-hidden="true" on:click={clean}></i>
+                    <i class="icon_google_clear clickable" aria-hidden="true" on:click={clean}></i>
                 </div>
             </div>
         {/if}
@@ -66,7 +66,8 @@
             <div class="editor-suffix" style="flex: 0 0 auto;">
                 <span>{suffix}</span>
             </div>
-        {:else if $$slots['trailing-icon'] && hasTrailingIcon}
+        {/if}
+        {#if $$slots['trailing-icon'] && hasTrailingIcon}
             <div class="editor-embed-icon" style="flex: 0 0 auto;">
                 <slot name="trailing-icon"/>
             </div>