@ticatec/uniface-element 0.1.23 → 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-layout/ColumnsLayout.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+    import Split from "../split";
+    import {onMount} from "svelte";
+
+    export let width: string = '100%';
+    export let height: string = '100%';
+
+    export let leftWidth: string | null = null;
+
+    export let rightWidth: string | null = null;
+
+    export let leftMin: string | null = null;
+
+    export let leftMax: string | null = null;
+
+    export let rightMin: string | null = null;
+
+    export let rightMax: string | null = null;
+
+    export let leftResize: boolean = false;
+
+    export let rightResize: boolean = false;
+
+    $: colWidth = $$slots.right ? '25%' : '50%'
+
+    let leftPanel: any;
+    let rightPanel: any;
+
+    const generateStyle = (attr: string, v: string | null): string => {
+        return v ? `${attr}: ${v};` : ''
+    }
+
+    let leftStyle: string;
+    let rightStyle: string;
+
+    onMount(()=> {
+        leftStyle = `${generateStyle('min-width', leftMin)} ${generateStyle('max-width', leftMax)} ${generateStyle('width', leftWidth ?? colWidth)}`;
+        rightStyle = `${generateStyle('min-width', rightMin)} ${generateStyle('max-width', rightMax)} ${generateStyle('width', rightWidth ?? colWidth)}`;
+    })
+
+
+</script>
+<div style="display: flex; flex-direction: row;  flex-wrap: nowrap; width: {width}; height: {height}">
+    <div bind:this={leftPanel} style="flex: 0 0 auto; {leftStyle}">
+        <slot name="left"></slot>
+    </div>
+    {#if leftResize}
+        <Split bindingPanel={leftPanel}/>
+    {/if}
+    <div style="flex: 1 1 auto;">
+        <slot/>
+    </div>
+    {#if $$slots.right}
+        {#if rightResize}
+            <Split bindingPanel={rightPanel} reverse/>
+        {/if}
+        <div bind:this={rightPanel} style="flex: 0 0 auto; {rightStyle}">
+            <slot name="right"/>
+        </div>
+    {/if}
+</div>

package/dist/app-layout/ColumnsLayout.svelte.d.ts

@@ -0,0 +1,42 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const ColumnsLayout: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    width?: string;
+    height?: string;
+    leftWidth?: string | null;
+    rightWidth?: string | null;
+    leftMin?: string | null;
+    leftMax?: string | null;
+    rightMin?: string | null;
+    rightMax?: string | null;
+    leftResize?: boolean;
+    rightResize?: boolean;
+}, {
+    left: {};
+    default: {};
+    right: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    left: {};
+    default: {};
+    right: {};
+}, {}, string>;
+type ColumnsLayout = InstanceType<typeof ColumnsLayout>;
+export default ColumnsLayout;

package/dist/app-layout/RowsLayout.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+    import Split from "../split";
+    import {onMount} from "svelte";
+
+    export let width: string = '100%';
+    export let height: string = '100%';
+
+    export let topHeight: string | null = null;
+
+    export let bottomHeight: string | null = null;
+
+    export let topMin: string | null = null;
+
+    export let topMax: string | null = null;
+
+    export let bottomMin: string | null = null;
+
+    export let bottomMax: string | null = null;
+
+    export let topResize: boolean = false;
+
+    export let bottomResize: boolean = false;
+
+    $: rowHeight = $$slots.bottom ? '25%' : '50%'
+
+    let topPanel: any;
+    let bottomPanel: any;
+
+    const generateStyle = (attr: string, v: string | null): string => {
+        return v ? `${attr}: ${v};` : ''
+    }
+
+    let topStyle: string = '';
+    let bottomStyle: string = '';
+
+    onMount(() => {
+        topStyle = `${generateStyle('min-height', topMin)} ${generateStyle('max-height', topMax)} ${generateStyle('height', topHeight ?? rowHeight)}`;
+        bottomStyle = `${generateStyle('min-height', bottomMin)} ${generateStyle('max-height', bottomMax)} ${generateStyle('height', bottomHeight ?? rowHeight)}`;
+    })
+
+
+</script>
+<div style="display: flex; flex-direction: column;  flex-wrap: nowrap; width: {width}; height: {height}">
+    <div bind:this={topPanel} style="flex: 0 0 auto; {topStyle}">
+        <slot name="top"></slot>
+    </div>
+    {#if topResize}
+        <Split bindingPanel={topPanel} direction="horizontal"/>
+    {/if}
+    <div style="flex: 1 1 auto;">
+        <slot/>
+    </div>
+    {#if $$slots.bottom}
+        {#if bottomResize}
+            <Split bindingPanel={bottomPanel} reverse direction="horizontal"/>
+        {/if}
+        <div bind:this={bottomPanel} style="flex: 0 0 auto; {bottomStyle}">
+            <slot name="bottom"/>
+        </div>
+    {/if}
+</div>

package/dist/app-layout/RowsLayout.svelte.d.ts

@@ -0,0 +1,42 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const RowsLayout: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    width?: string;
+    height?: string;
+    topHeight?: string | null;
+    bottomHeight?: string | null;
+    topMin?: string | null;
+    topMax?: string | null;
+    bottomMin?: string | null;
+    bottomMax?: string | null;
+    topResize?: boolean;
+    bottomResize?: boolean;
+}, {
+    top: {};
+    default: {};
+    bottom: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    top: {};
+    default: {};
+    bottom: {};
+}, {}, string>;
+type RowsLayout = InstanceType<typeof RowsLayout>;
+export default RowsLayout;

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>