@ticatec/uniface-element 0.1.24 → 0.1.30

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/Breadcrumb.js

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

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}
+        <div>
+            <span>{separator}</span>
+            <span aria-hidden="true" class="breadcrumb" on:click={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/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
@@ -41,7 +44,7 @@
                 <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>

package/dist/common-range-editor/CommonRangeEditor.svelte

@@ -1,9 +1,5 @@
 <script lang="ts">
 
-
-    import utils from "../common/utils";
-    import Icon from "../icon";
-
     export let variant: '' | 'plain' | 'outlined' | 'filled' = '';
     export let compact: boolean = false;
     export {className as class};
@@ -22,7 +18,7 @@
         <div class="divider"></div>
         <slot name="to"/>
         <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>
     <slot/>

package/dist/date-picker/DatePicker.svelte

@@ -46,7 +46,7 @@
     }
 
     const handleCalendarSelect = (d: dayjs.Dayjs) => {
-        value = d;
+        value = d.toDate();
         showPopup = false;
     }
 
@@ -78,7 +78,7 @@
 
 </script>
 
-<CommonPicker {displayMode} {variant} {style} className="uniface-date-time-editor" {compact} dropDownIcon="uniface-icon-calendar"
+<CommonPicker {displayMode} {variant} {style} className="uniface-date-time-editor" {compact} dropDownIcon="icon_google_event_available"
               bind:showPopup canClean={!mandatory && value!=null} autoFit={false} clean={cleanData} {textValue} {readonly} {disabled}>
 
     <input style="width: 100%" bind:this={editor} on:click={openPopup} {placeholder} on:keydown={handleKeyDown}

package/dist/date-picker/DateTimePicker.svelte

@@ -115,7 +115,7 @@
 
 </script>
 
-<CommonPicker {displayMode} {variant} {style} className="uniface-date-time-editor" {compact} dropDownIcon="uniface-icon-calendar"
+<CommonPicker {displayMode} {variant} {style} className="uniface-date-time-editor" {compact} dropDownIcon="icon_google_access_time"
               bind:showPopup canClean={!mandatory && value!=null} autoFit={false} clean={cleanData} {textValue} {readonly} {disabled}>
 
     <input style="width: 100%" bind:this={editor} on:click={openPopup} {placeholder} on:keydown={handleKeyDown}

package/dist/date-range/DateRangeEditor.svelte

@@ -66,7 +66,7 @@
             <input style="width: 100%; text-align: center" readonly on:click={showPopover} value={textTo}/>
         </svelte:fragment>
         <svelte:fragment>
-            <i class="uniface-icon-calendar action-icon" aria-hidden="true" on:click={showPopover}></i>
+            <i class="icon_google_event_note action-icon" aria-hidden="true" on:click={showPopover}></i>
         </svelte:fragment>
     </CommonRangeEditor>
 

package/dist/drawer/Drawer.svelte

@@ -1,38 +1,30 @@
 <script lang="ts">
     import {fly} from "svelte/transition";
-    import {createEventDispatcher} from "svelte";
 
 
-    export const open = () => {
-        visible = true;
-        hidden = false;
-        dispatch('open');
-    }
+    export let visible: boolean = false;
 
-    export const close = () => {
-        visible = false;
-    }
+    let hidden: boolean = true;
 
-    export let width:number = 300;
-    export let position: 'left' | 'right' = 'left';
 
-    const dispatch = createEventDispatcher();
-    let hidden: boolean = true;
-    let visible: boolean = false;
+    export let width:number = 300;
+    export let position: 'left' | 'right' = 'left'
 
     $: if (visible) {
         hidden = false;
     }
 
+
+
     let xPos: string;
 
     $: xPos = position == 'left' ? `${-width}` : '100%';
 
 </script>
-<div class="uniface-drawer" style="display: {hidden ? 'none' : 'block'}" on:click={()=>{visible=false; dispatch('close')}}>
+<div class="uniface-drawer" aria-hidden="true" style="display: {hidden ? 'none' : 'block'}" on:click={()=>{visible=false;}}>
     {#if visible}
-        <div class={position} style="width: {width}px" transition:fly={{ x: xPos, duration: 1000, opacity: 0.5 }}
-             on:outroend={()=>{hidden = !visible}} on:click={(e)=>{e.stopPropagation()}}>
+        <div class={position} style="width: {width}px" transition:fly={{ x: xPos, duration: 1000, opacity: 0.5 }} aria-hidden="false"
+             on:outroend={()=>{hidden = !visible}} on:click|stopPropagation>
             <div>
             <slot></slot>
             </div>

package/dist/drawer/Drawer.svelte.d.ts

@@ -17,21 +17,17 @@ type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
     children?: any;
 } : {});
 declare const Drawer: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    open?: () => void;
-    close?: () => void;
+    visible?: boolean;
     width?: number;
     position?: "left" | "right";
 }, {
     default: {};
 }>, {
-    close: CustomEvent<any>;
+    click: MouseEvent;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {
     default: {};
-}, {
-    open: () => void;
-    close: () => void;
-}, string>;
+}, {}, string>;
 type Drawer = InstanceType<typeof Drawer>;
 export default Drawer;

package/dist/memo-editor/MemoEditor.svelte

@@ -78,7 +78,7 @@
         {/if}
         {#if !disabled && value && value.length > 0}
             <div class="action-button-wrapper" style="position: absolute; top: 0; left: 0; width: {width}px;">
-                <Icon name="uniface-icon-x" clickable class="uniface-editor-clean-icon" onClick={clean}/>
+                <Icon name="icon_google_clear" clickable class="uniface-editor-clean-icon" onClick={clean}/>
             </div>
         {/if}
     </div>

package/dist/nav-menu/MenuItem.d.ts

@@ -2,7 +2,7 @@ export default interface MenuItem {
     /**
      * 菜单编码
      */
-    code: string;
+    code?: string;
     /**
      * 菜单文字
      */

package/dist/options-multi-select/OptionsMultiSelect.svelte

@@ -104,7 +104,7 @@
 
 </script>
 
-<CommonPicker {displayMode} {variant} {style} {compact} className="multiple" dropDownIcon="uniface-icon-chevron-down"
+<CommonPicker {displayMode} {variant} {style} {compact} className="multiple" dropDownIcon="icon_google_arrow_drop_down"
               bind:showPopup canClean={value!=null} autoFit clean={cleanData} {textValue} {readonly} {disabled}>
 
     <div class="option-field" aria-hidden="true" on:click={()=>{showPopup = true}}>

package/dist/options-select/OptionsSelect.svelte

@@ -74,7 +74,7 @@
 
 </script>
 
-<CommonPicker {displayMode} {variant} {style} {compact} dropDownIcon="uniface-icon-chevron-down"
+<CommonPicker {displayMode} {variant} {style} {compact} dropDownIcon="icon_google_arrow_drop_down"
               bind:showPopup canClean={!mandatory && value!=null} autoFit clean={cleanData} {textValue} {readonly} {disabled}>
 
     <input style="width: 100%" bind:this={editor} on:click={openPopup} {placeholder} readonly

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

@@ -64,27 +64,27 @@
 
 <div bind:this={divPanel}>
     <CommonEditor {displayMode} {style} {value} {prefix} {suffix} {readonly} {variant} {compact} class={className}
-                  showActionIcon={removable && !readonly && !disabled && !utils.isEmpty(value)} {clean}>
+                  showActionIcon={removable && !readonly && !disabled && !utils.isEmpty(value)} {clean}
+                  hasLeadingIcon={$$slots['leading-icon']!=null}>
         <svelte:fragment slot="leading-icon">
             {#if $$slots['leading-icon']}
-                <div class="editor-embed-icon">
-                    <slot name="leading-icon"/>
-                </div>
+                <slot name="leading-icon"/>
             {/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">
+        <input style="width: 100%" bind:this={editor} {disabled} {placeholder} bind:value={value} {readonly}/>
+        <svelte:fragment slot="trailing-icon">
             {#if !disabled && !readonly}
-                <i class="option-dropdown uniface-icon-chevron-down" aria-hidden="true" on:click={openPopup}></i>
+                <i class="option-dropdown icon_google_arrow_drop_down" aria-hidden="true" on:click={openPopup}></i>
             {/if}
-        </div>
+        </svelte:fragment>
     </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">
+                    <div class="option-item" style="padding-left: 12px; padding-right: 12px" on:click={handleHintClick(word)}
+                         aria-hidden="true">
                         <span>{word}</span>
                     </div>
                 {/each}

package/dist/tabs/Tabs.svelte

@@ -126,10 +126,10 @@
                             {:else}
                                 <span>{tab[textField]}</span>
                                 {#if refreshable}
-                                    <i class="uniface-icon-rotate-cw tab-refresh" on:click={reloadTab(tab)} aria-hidden="true"></i>
+                                    <i class="icon_google_refresh 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>
+                                    <i class="icon_google_clear tab-action" on:click={closeTab(tab)} aria-hidden="true"></i>
                                 {/if}
                             {/if}
                         </div>

package/dist/tag/Tag.svelte

@@ -22,6 +22,6 @@
 <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}/>
+        <Icon name="icon_google_clear" clickable class="uniface-remove-icon" onClick={removeHandler}/>
     </div>
 </div>

package/dist/ticatec-uniface-web.css

@@ -44,38 +44,6 @@
   --uniface-button-common-reverse-color: #ffffff;
   --uniface-button-plain-disabled-color: #B3BCCA;
   --uniface-text-button-plain-hover-color: #374151B0;
-  --uniface-button-plain-background-color: #f0f0f0;
-  --uniface-button-plain-border-color: #f0f0f0;
-  --uniface-button-plain-text-color: #374151;
-  --uniface-button-plain-hover-color: #f0f0f0B0;
-  --uniface-button-plainy-active-color: #f0f0f0;
-  --uniface-button-primary-background-color: #42A5F5;
-  --uniface-button-primary-border-color: #42B5DB;
-  --uniface-button-primary-text-color: #ffffff;
-  --uniface-button-primary-hover-color: #42A5F5B0;
-  --uniface-button-primary-active-color: #42A5F5;
-  --uniface-text-button-primary-hover-color: #42A5F5B0;
-  --uniface-button-secondary-background-color: #FF685B;
-  --uniface-button-secondary-border-color: #FF7875;
-  --uniface-button-secondary-text-color: #ffffff;
-  --uniface-button-secondary-hover-color: #FF685BB0;
-  --uniface-button-secondary-active-color: #FF4D4F;
-  --uniface-text-button-secondary-hover-color: #D32F2FB0;
-  --uniface-button-third-background-color: #2DC071;
-  --uniface-button-third-border-color: #2DD08B;
-  --uniface-button-third-text-color: #ffffff;
-  --uniface-button-third-hover-color: #2DD057B0;
-  --uniface-button-third-active-color: #2DC071;
-  --uniface-text-button-third-hover-color: #2DC071B0;
-  --uniface-button-forth-background-color: #FAD85D;
-  --uniface-button-forth-border-color: #FAE877;
-  --uniface-button-forth-text-color: #374151;
-  --uniface-button-forth-hover-color: #FAD85DB0;
-  --uniface-button-forth-active-color: #FAD85D;
-  --uniface-text-button-forth-hover-color: #FAD85DB0;
-  --uniface-disabled-button-color: #F1F5F9;
-  --uniface-disabled-button-border-color: #E2E8F0;
-  --uniface-disabled-button-text-color: #B3BCCA;
   --uniface-text-button-color: #42A5F5;
   --uniface-text-button-hover-color: #1e648d;
   --uniface-active-border-color: #42A5F5;
@@ -430,10 +398,11 @@
   display: block;
   visibility: hidden;
   box-sizing: border-box;
-  font-size: 18px;
   color: var(--uniface-editor-text-color, #374151);
   align-self: center;
   cursor: pointer;
+  font-size: 22px;
+  line-height: 1;
 }
 .uniface-common-picker .action-icon:active {
   color: var(--uniface-active-dropdown-color, #9d9d9d);
@@ -526,6 +495,7 @@
 :root {
   --uniface-editor-clean-icon-bg: #B3BCCA;
   --uniface-editor-clean-icon-color: #ffffff;
+  --uniface-embed-icon-color: #6B7280;
   --uniface-editor-text-color: #374151;
   --uniface-editor-line-height: 16px;
   --uniface-editor-padding: 0 8px;
@@ -544,6 +514,18 @@
   --uniface-editor-inline-action-icon-hover-bg: #42A5F51A;
 }
 
+.uniface-display-field {
+  height: 24px;
+  position: relative;
+  line-height: 1.25em;
+  border-bottom: 1px solid var(--uniface-editor-border-color);
+}
+.uniface-display-field .content {
+  position: relative;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
 /*输入框中的清除按钮*/
 .uniface-editor-clean-icon {
   position: absolute;
@@ -581,12 +563,15 @@
   width: 100%;
   position: relative;
   height: 38px;
-  line-height: var(--uniface-editor-line-height, 16px);
   display: inline-flex;
   flex-direction: row;
   align-items: center;
   gap: 8px;
 }
+.uniface-common-editor .editor-embed-icon {
+  font-size: 20px;
+  color: var(--uniface-embed-icon-color);
+}
 .uniface-common-editor .editor-embed-icon img {
   width: 28px;
   height: 28px;
@@ -768,6 +753,7 @@
 .uniface-filter-field.horizontal .field-container {
   grid-template-columns: auto 1fr;
   align-items: center;
+  gap: 8px;
 }
 .uniface-filter-field.horizontal .field-label {
   text-align: var(--uniface-criteria-field-label-alignment);
@@ -894,7 +880,6 @@
 .uniface-form-field .field-hint {
   width: 100%;
   box-sizing: border-box;
-  padding: 4px 0;
   font-size: 0.9em;
   font-style: italic;
   color: var(--uniface-form-field-invalid-message-color);
@@ -922,7 +907,7 @@
 .uniface-form-field .form-content {
   width: 100%;
   display: grid;
-  gap: 4px;
+  gap: 8px;
 }
 .uniface-form-field.vertical .form-content {
   grid-template-columns: 1fr;
@@ -939,6 +924,7 @@
 }
 .uniface-form-field.horizontal .form-content {
   grid-template-columns: auto 1fr;
+  gap: 8px;
   grid-template-areas: "label field" "empty hint";
 }
 .uniface-form-field.horizontal .form-content .field-label {
@@ -986,9 +972,11 @@
   line-height: 1.5em;
   color: var(--uniface-default-text-color, #374151);
   padding: var(--uniface-memo-padding, 6px 8px);
+  border-bottom: 1px solid var(--uniface-editor-border-color, #E2E8F0);
 }
 .uniface-memo-editor:focus {
   outline: none;
+  border-bottom-color: var(--uniface-editor-outlined-active-border-color, #298DFF);
 }
 .uniface-memo-editor.plain {
   border: none;
@@ -1275,9 +1263,47 @@
   border-top: 1px solid var(--uniface-dialog-divider-color, #F0F0F0);
 }
 
+:root {
+  --uniface-button-min-width: 80px;
+  --uniface-button-plain-background-color: #f0f0f0;
+  --uniface-button-plain-border-color: #f0f0f0;
+  --uniface-button-plain-text-color: #374151;
+  --uniface-button-plain-hover-color: #f0f0f0B0;
+  --uniface-button-plainy-active-color: #f0f0f0;
+  --uniface-button-primary-background-color: #42A5F5;
+  --uniface-button-primary-border-color: #42B5DB;
+  --uniface-button-primary-text-color: #ffffff;
+  --uniface-button-primary-hover-color: #42A5F5B0;
+  --uniface-button-primary-active-color: #42A5F5;
+  --uniface-text-button-primary-hover-color: #42A5F5B0;
+  --uniface-button-secondary-background-color: #FF685B;
+  --uniface-button-secondary-border-color: #FF7875;
+  --uniface-button-secondary-text-color: #ffffff;
+  --uniface-button-secondary-hover-color: #FF685BB0;
+  --uniface-button-secondary-active-color: #FF4D4F;
+  --uniface-text-button-secondary-hover-color: #D32F2FB0;
+  --uniface-button-third-background-color: #2DC071;
+  --uniface-button-third-border-color: #2DD08B;
+  --uniface-button-third-text-color: #ffffff;
+  --uniface-button-third-hover-color: #2DD057B0;
+  --uniface-button-third-active-color: #2DC071;
+  --uniface-text-button-third-hover-color: #2DC071B0;
+  --uniface-button-forth-background-color: #FAD85D;
+  --uniface-button-forth-border-color: #FAE877;
+  --uniface-button-forth-text-color: #374151;
+  --uniface-button-forth-hover-color: #FAD85DB0;
+  --uniface-button-forth-active-color: #FAD85D;
+  --uniface-text-button-forth-hover-color: #FAD85DB0;
+  --uniface-disabled-button-color: #F1F5F9;
+  --uniface-disabled-button-border-color: #E2E8F0;
+  --uniface-disabled-button-text-color: #B3BCCA;
+}
+
 /*通用按钮设置*/
 .uniface-button {
-  display: inline-block;
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
   box-sizing: border-box;
   cursor: pointer;
   text-align: center;
@@ -1285,6 +1311,9 @@
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
+  min-width: var(--uniface-button-min-width);
+  height: 28px;
+  gap: 8px;
   font-size: 12px;
   letter-spacing: 1px;
   transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
@@ -1363,18 +1392,18 @@
   color: var(--uniface-disabled-button-text-color, #B3BCCA);
 }
 .uniface-button.common-button {
-  padding: 6px 16px;
+  padding: 0 16px;
   border-radius: 4px;
 }
-.uniface-button.common-button > span {
-  padding: 0 4px;
+.uniface-button.common-button i {
+  font-size: 1.5em;
 }
 .uniface-button.common-button.big {
-  padding: 10px 20px;
+  height: 32px;
   font-size: 1.1em;
 }
 .uniface-button.common-button.mini {
-  padding: 4px 10px;
+  height: 24px;
   font-size: 0.9em;
 }
 .uniface-button.common-button.plain {
@@ -1390,40 +1419,37 @@
   border-radius: 12px;
 }
 .uniface-button.icon-button {
-  width: 32px;
-  height: 32px;
-  padding: 2px;
+  width: 28px;
+  height: 28px;
   border-radius: 50%;
+  min-width: unset;
+  justify-content: center;
 }
 .uniface-button.icon-button i {
-  line-height: 28px;
-  font-size: 16px;
+  font-size: 18px;
 }
 .uniface-button.icon-button.big {
-  width: 48px;
-  height: 48px;
-  padding: 4px;
+  width: 32px;
+  height: 32px;
 }
 .uniface-button.icon-button.big i {
-  line-height: 40px;
-  font-size: 24px;
+  font-size: 22px;
 }
 .uniface-button.icon-button.mini {
   width: 24px;
   height: 24px;
-  padding: 2px;
 }
 .uniface-button.icon-button.mini i {
-  line-height: 20px;
-  font-size: 12px;
+  font-size: 16px;
 }
 .uniface-button.text-button {
   padding: 3px 6px;
   cursor: pointer;
   text-align: center;
   background-color: transparent;
-  color: var(--uniface-button-plain-text-color, #374151);
+  color: var(--uniface-button-plain-text-color);
   user-select: none;
+  min-width: unset;
 }
 .uniface-button.text-button.big {
   font-size: 1.2em;
@@ -1686,12 +1712,13 @@
   border-color: var(--uniface-card-divid-border-color, rgba(66, 165, 245, 0.4392156863));
 }
 .uniface-card > div .card-header {
-  height: var(--uniface-card-header-height, 54px);
-  border-bottom: 1px solid var(--uniface-card-inside-border-color, #E2E8F0);
   box-sizing: border-box;
   font-weight: 600;
+  position: relative;
 }
 .uniface-card > div .card-header.simple {
+  height: var(--uniface-card-header-height, 54px);
+  border-bottom: 1px solid var(--uniface-card-inside-border-color, #E2E8F0);
   line-height: var(--uniface-card-header-height, 54px);
   padding: var(--uniface-card-header-padding, 0 24px);
   width: 100%;
@@ -1746,7 +1773,6 @@
 }
 .uniface-card > div .card-action-bar.simple .action-item i {
   cursor: pointer;
-  color: var(--uniface-card-primary-text-color, #374151);
 }
 .uniface-card > div .card-action-bar.simple .action-item i:hover {
   font-size: var(--uniface-action-image-hover-size);
@@ -2191,49 +2217,58 @@
   line-height: 3em;
 }
 
-.uniface-header {
-  background-color: var(--uniface-primary-color, #42A5F5);
-  color: var(--uniface-primary-text-color, #ffffff);
+:root {
+  --uniface-top-bar-background-color: #0061FF;
+  --uniface-top-bar-color: #f0f0f0;
+  --uniface-top-bar-height: 48px;
+  --uniface-top-bar-font-szie: 24px;
+  --uniface-top-bar-margin: 12px;
+  --uniface-avatar-size: 40px;
+  --uniface-avatar-radius: 50%;
+}
+
+.uniface-top-bar {
+  background-color: var(--uniface-top-bar-background-color);
+  color: var(--uniface-top-bar-color);
   text-align: center;
   width: 100%;
+  height: var(--uniface-top-bar-height);
+  font-size: var(--uniface-top-bar-font-szie);
   display: flex;
   flex-direction: row;
   box-sizing: border-box;
   justify-items: center;
-  padding: 0.5em 0.5em;
+  align-items: center;
+  padding: 0 var(--uniface-top-bar-margin);
+  gap: 8px;
 }
-.uniface-header .bar-home, .uniface-header .bar-right {
+.uniface-top-bar > div {
   flex: 0 0 auto;
-  align-self: center;
 }
-.uniface-header .bar-home {
-  display: flex;
+.uniface-top-bar .bar-home {
   position: relative;
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  border: 1px solid transparent;
-  overflow: hidden;
-  box-sizing: border-box;
-  flex-direction: column;
-  justify-content: center;
-  text-align: center;
-  font-size: 22px;
-}
-.uniface-header .bar-home:hover {
-  border-color: #ffffff;
+  cursor: pointer;
 }
-.uniface-header .bar-home:active {
+.uniface-top-bar .bar-home:active {
   top: 1px;
 }
-.uniface-header .title {
+.uniface-top-bar .main-content {
   flex: 1 1 auto;
-  overflow: hidden;
-  align-self: center;
+  text-align: left;
 }
-.uniface-header .title span {
-  padding: 0 4px;
-  font-size: 24px;
+.uniface-top-bar .avatar {
+  height: var(--uniface-avatar-size);
+}
+.uniface-top-bar .avatar img {
+  position: relative;
+  width: var(--uniface-avatar-size);
+  height: var(--uniface-avatar-size);
+  border-radius: var(--uniface-avatar-radius);
+  object-fit: cover;
+  cursor: pointer;
+}
+.uniface-top-bar .avatar img:active {
+  top: 1px;
 }
 
 .uniface-lookup-editor {
@@ -2612,13 +2647,20 @@
   flex: 0 0 auto;
 }
 
+:root {
+  --uniface-navigator-menu-background-color: #ffffff;
+  --uniface-navigator-menu-color: #374151;
+  --uniface-navigator-menu-hover-background-color: #81D4FA;
+  --uniface-navigator-menu-hover-color: #374151;
+}
+
 .uniface-navigator-menu-panel {
   display: block;
   width: 100%;
   height: 100%;
   user-select: none;
-  background-color: var(--uniface-primary-color, #42A5F5);
-  color: var(--uniface-primary-text-color, #ffffff);
+  background-color: var(--uniface-navigator-menu-background-color);
+  color: var(--uniface-navigator-menu-color);
   position: relative;
   overflow-x: hidden;
   overflow-y: auto;
@@ -2649,7 +2691,7 @@
 }
 .uniface-navigator-menu-panelul li span:hover, .uniface-navigator-menu-panel ul li span:hover {
   background-color: var(--uniface-navigator-menu-hover-background-color, #81D4FA);
-  color: var(--uniface-default-text-color, #374151);
+  color: var(--uniface-navigator-menu-hover-color);
   border-radius: 4px;
 }
 .uniface-navigator-menu-panelul li.expandable > span:hover::after, .uniface-navigator-menu-panel ul li.expandable > span:hover::after {
@@ -2658,7 +2700,7 @@
   font-size: 0.9em;
   position: absolute;
   right: 8px;
-  color: var(--uniface-default-text-color, #374151);
+  color: var(--uniface-navigator-menu-color);
 }
 .uniface-navigator-menu-panelul li.expandable.fold ul, .uniface-navigator-menu-panel ul li.expandable.fold ul {
   display: none;
@@ -3565,11 +3607,13 @@
 }
 .uniface-accordion-panel .accordion .header {
   background-color: var(--uniface-accordion-title-bg, #F8FAFC);
-  padding: 12px 16px;
+  padding: 8px 12px;
   width: 100%;
   box-sizing: border-box;
   cursor: pointer;
   display: flex;
+  gap: 8px;
+  flex-direction: row;
   align-items: center;
 }
 .uniface-accordion-panel .accordion .header:hover {
@@ -3583,7 +3627,7 @@
   transition: height 0.3s ease-out;
 }
 .uniface-accordion-panel.compact .accordion .header {
-  padding: 6px 8px;
+  padding: 4px 8px;
 }
 .uniface-accordion-panel.compact .accordion .content {
   padding: 8px;
@@ -4105,6 +4149,47 @@
   overflow-y: hidden;
 }
 
+:root {
+  --breadcrumbs-gap: 8px;
+  --breadcrumbs-color: var(--uniface-primary-text-color, #374151);
+  --breadcrumbs-hover-color: var(--uniface-primary-hover-color, #298DEF);
+  --breadcrumbs-active-color: var(--uniface-primary-hover-color, #298DEF);
+  --breadcrumbs-active-weight: 600;
+  --breadcrumbs-padding: 8px 12px;
+}
+
+.uniface-breadcrumbs {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  overflow: hidden;
+  color: var(--breadcrumbs-color);
+  gap: var(--breadcrumbs-gap);
+  padding: var(--breadcrumbs-padding);
+}
+.uniface-breadcrumbs .breadcrumb {
+  margin: 0 6px;
+  cursor: pointer;
+}
+.uniface-breadcrumbs .breadcrumb:hover {
+  color: var(--breadcrumbs-hover-color);
+}
+.uniface-breadcrumbs .breadcrumb:active {
+  color: var(--breadcrumbs-active-color);
+  font-weight: var(--breadcrumbs-active-weight);
+}
+.uniface-breadcrumbs > div:last-child .breadcrumb {
+  cursor: default;
+}
+.uniface-breadcrumbs > div:last-child .breadcrumb:hover {
+  color: var(--uniface-primary-text-color);
+}
+.uniface-breadcrumbs > div:last-child .breadcrumb:active {
+  color: var(--uniface-primary-text-color);
+  font-weight: unset;
+}
+
 html {
   box-sizing: border-box;
 }

package/dist/unit-number-editor/UnitNumberEditor.svelte

@@ -82,8 +82,9 @@
 
 
     onMount(async () => {
-        unit = units.find(item => item.code == unitCode) ?? units[0];
         standardUnit = units.find(item => item.ratio == 1);
+        unit = units.find(item => item.code == unitCode) ?? standardUnit ?? units[0];
+        unitCode = unit.code;
         calculateUnitValue();
     })
 
@@ -110,18 +111,18 @@
         <NumberInput bind:this={editor} style="flex: 1 1 auto" {disabled} {placeholder} bind:value={unitValue} precision={unit?.precision}
                      {allowNegative}
                      max={unit?.max} min={unit?.min} {readonly} onChange={handleValueChange}/>
-        <div class="editor-embed-icon" slot="trailing-icon">
+        <svelte:fragment slot="trailing-icon">
             {#if !disabled && !readonly}
-                <i class="option-dropdown uniface-icon-chevron-down" aria-hidden="true" on:click={openPopup}></i>
+                <i style="font-size: 22px" class="option-dropdown icon_google_arrow_drop_down" aria-hidden="true" on:click={openPopup}></i>
             {/if}
-        </div>
+        </svelte:fragment>
     </CommonEditor>
 
     {#if showPopup}
         <Popover target={divPanel} autoFit={false} align="right" on:close={()=>{showPopup=false}}>
             <div class="options-popover" style="min-width: 90px; box-sizing: border-box; text-align: center; {mh}" >
                 {#each units as op}
-                    <div style="padding-left: 12px; padding-right: 12px" on:click={handleUnitClick(op)} aria-hidden="true">
+                    <div class="option-item" style="padding-left: 12px; padding-right: 12px" on:click={handleUnitClick(op)} aria-hidden="true">
                         <span>{op.text ?? op.code}</span>
                     </div>
                 {/each}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ticatec/uniface-element",
-  "version": "0.1.24",
+  "version": "0.1.30",
   "description": "uniface web elements",
   "scripts": {
     "dev": "vite dev",
@@ -75,6 +75,10 @@
       "types": "./dist/attachment-files/index.d.ts",
       "import": "./dist/attachment-files/index.js"
     },
+    "./Breadcrumbs": {
+      "types": "./dist/breadcrumbs/index.d.ts",
+      "import": "./dist/breadcrumbs/index.js"
+    },
     "./Box": {
       "types": "./dist/box/index.d.ts",
       "svelte": "./dist/box/Box.svelte",
@@ -321,7 +325,7 @@
     "@sveltejs/kit": "^2.0.0",
     "@sveltejs/package": "^2.0.0",
     "@sveltejs/vite-plugin-svelte": "^4.0.0",
-    "@ticatec/uniface-icons": "^0.2.0",
+    "@ticatec/uniface-google-material-icons": "^0.1.1",
     "dayjs": "^1.11.10",
     "publint": "^0.3.2",
     "sass": "^1.57.1",