@ticatec/uniface-element 0.1.35 → 0.1.45

package/README.md

@@ -1,4 +1,4 @@
-# Uniface Web UI Components
+# Uniface Element
 
 ## Global Components
 

package/dist/attachment-files/AttachmentFilesField.svelte

@@ -67,7 +67,7 @@
             </div>
             {#if !disabled && !readonly}
                 <div class="editor-action-icon">
-                    <i class="uniface-icon-upload" aria-hidden="true" on:click={showDialog}></i>
+                    <i class="icon_google_file_upload" aria-hidden="true" on:click={showDialog}></i>
                 </div>
             {/if}
         </div>

package/dist/attachment-files/FileRender.svelte

@@ -50,11 +50,11 @@
     <div class="file-icon">
         <img src={icon} width="64px" height="64px"/>
         <div class="action-icon" style="top: 15px;">
-            <i class="uniface-icon-download" ></i>
+            <i class="icon_google_file_download" ></i>
         </div>
         {#if !readonly}
             <div class="action-icon" style="top: 35px;">
-                <i class="uniface-icon-x" aria-hidden="true" on:click={removeFile}></i>
+                <i class="icon_google_clear" aria-hidden="true" on:click={removeFile}></i>
             </div>
     {/if}
     </div>

package/dist/attachment-files/FileUploadPanel.svelte

@@ -117,7 +117,7 @@
                 <input bind:this={fileInput} type="file" {accept} multiple={maxFiles > 1} on:change={handleFilePickup}/>
             </div>
             <div style="margin-bottom: 8px; flex: 0 0 auto; text-align: center">
-                <Button type="primary" disabled={files.length >= maxFiles} icon="uniface-icon-upload" label={btnPickup}
+                <Button type="primary" disabled={files.length >= maxFiles} icon="icon_google_file_upload" label={btnPickup}
                         onClick={showFileDialog}></Button>
             </div>
             <div style="flex: 1 1 auto; overflow: auto; padding: 0 24px">

package/dist/box/Box.svelte

@@ -9,7 +9,7 @@
 
     export {className as class};
 
-    let className: string | null = null;
+    let className: string = null as unknown as string;
 
 
 </script>

package/dist/box/Box.svelte.d.ts

@@ -23,7 +23,7 @@ declare const Box: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithCh
     content$style?: string | null;
     header$style?: string | null;
     footer$style?: string | null;
-    class?: null;
+    class?: string;
 }, {
     header: {};
     default: {};
@@ -35,7 +35,7 @@ declare const Box: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithCh
     default: {};
     footer: {};
 }, {
-    class: null;
+    class: string;
 }, string>;
 type Box = InstanceType<typeof Box>;
 export default Box;

package/dist/cascade-options-select/CascadeOptionSelect.svelte

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

package/dist/criteria-field/CriteriaField.svelte

@@ -4,14 +4,13 @@
     export let label: string = "Label"
     export let style: string = '';
     export let label$style: string = '';
-    export let arrangement: 'vertical' | 'horizontal' = 'vertical' ;
     export let size: '' | 'x15' | 'x20' | 'x25' | 'x30' | 'x35' | 'x40' = '';
     export let labelSuffix: string = ':';
 
     let className: string = '';
 
 </script>
-<div class="uniface-filter-field {size} {arrangement} {className}" {style} >
+<div class="uniface-filter-field {size} {className}" {style} >
     <div class="field-container">
         <div class="field-label" style={label$style}>
             <span>{label}{labelSuffix}</span>

package/dist/criteria-field/CriteriaField.svelte.d.ts

@@ -21,7 +21,6 @@ declare const CriteriaField: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_P
     label?: string;
     style?: string;
     label$style?: string;
-    arrangement?: "vertical" | "horizontal";
     size?: "" | "x15" | "x20" | "x25" | "x30" | "x35" | "x40";
     labelSuffix?: string;
 }, {

package/dist/data-table/lib/IndicatorColumn.d.ts

@@ -6,7 +6,7 @@ export default interface IndicatorColumn {
     /**
      *
      */
-    selectable: boolean;
+    selectable?: boolean;
     /**
      *
      */

package/dist/data-table/parts/FixedHeaderPanel.svelte

@@ -97,7 +97,7 @@
                 <span>{column.text}</span>
                 {#if column === orderColumn}
                     <i style="margin-left: 2px; font-size: 12px; position: absolute; top: 0; right: 4px"
-                       class={orderDirection===OrderDirection.Ascending ? 'uniface-icon-chevron-up' : 'uniface-icon-chevron-down'}></i>
+                       class={orderDirection===OrderDirection.Ascending ? 'icon_google_keyboard_arrow_up' : 'icon_google_keyboard_arrow_down'}></i>
                 {/if}
             </div>
 

package/dist/data-table/parts/FixedRow.svelte

@@ -46,7 +46,7 @@
 
             {#if expandable}
                 <div class="expand-icon" style="">
-                    <i class={row == expandRow ? 'uniface-icon-folder' : "uniface-icon-folder-plus"} aria-hidden="true" on:click={showInlineData}></i>
+                    <i class={row == expandRow ? 'icon_google_folder' : "icon_google_folder_open"} aria-hidden="true" on:click={showInlineData}></i>
                 </div>
             {/if}
             {#if indicatorColumn.displayNo}

package/dist/date-picker/ScrollBar.svelte

@@ -74,7 +74,7 @@
 <div class="scroll-bar" tabindex="1" on:wheel={handleMouseWheel}>
     <div class="action-bar">
         <div class="arrow-up" class:disabled={!enable}>
-            <i class="uniface-icon-chevron-up" on:click={decValue} on:dragstart={(e)=>{e.preventDefault()}}
+            <i class="icon_google_keyboard_arrow_up" on:click={decValue} on:dragstart={(e)=>{e.preventDefault()}}
                  on:mousedown={handleMouseDown(-1)} on:mouseup={handleMouseUp} on:mouseleave={handleMouseUp}></i>
         </div>
     </div>
@@ -83,7 +83,7 @@
     {/each}
     <div class="action-bar">
         <div class="arrow-down" class:disabled={!enable}>
-            <i class="uniface-icon-chevron-down" on:click={incValue} on:dragstart={(e)=>{e.preventDefault()}}
+            <i class="icon_google_keyboard_arrow_downn" on:click={incValue} on:dragstart={(e)=>{e.preventDefault()}}
                  on:mousedown={handleMouseDown(1)} on:mouseup={handleMouseUp} on:mouseleave={handleMouseUp}></i>
         </div>
     </div>

package/dist/dialog/Dialog.svelte

@@ -61,7 +61,7 @@
             <div class="title-bar" on:mousedown={handleMouseDown} on:mouseup={handleMouseUp} aria-hidden="true">
                 <div style="flex: 1 1 auto"><span>{title ?? 'New window'}</span></div>
                 <div style="flex: 0 0 auto; padding-left: 12px">
-                    <i class="uniface-icon-x dialog-action-button" aria-hidden="true" on:click={close}></i>
+                    <i class="icon_google_clear dialog-action-button" aria-hidden="true" on:click={close}></i>
                 </div>
             </div>
             <div class="dialog-content" style={content$style}>

package/dist/form-field/FormField.svelte

@@ -8,22 +8,22 @@
     export let label$style: string | null = null;
     export let required: boolean = false;
     export let error: string | null = null;
-    export let arrangement: 'vertical' | 'horizontal' = 'vertical';
     export let labelSuffix: string = ':';
-    export let label$alignment: 'center' | 'top' = 'center'
+    export let label$alignment: 'center' | 'top' = 'center';
+
 
     let className: string = '';
 
 </script>
-<div class="uniface-form-field {arrangement} {className}" {style}>
-    <div class="form-content" style="width: 100%">
-        <div class="field-label" style={label$style} class:vert-top={arrangement== 'horizontal' && label$alignment=='top'}>
+<div class="uniface-form-field {className}" {style}>
+    <div class="form-content" style="width: 100%;">
+        <div class="field-label" style={label$style} class:vert-top={label$alignment=='top'}>
             {#if required}
                 <span class="required-indicator">*</span>
             {/if}
             <span>{label}{labelSuffix}</span>
         </div>
-        <div class="field">
+        <div class="field" style="">
             <slot/>
         </div>
         {#if !utils.isEmpty(error)}

package/dist/form-field/FormField.svelte.d.ts

@@ -23,7 +23,6 @@ declare const FormField: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_Props
     label$style?: string | null;
     required?: boolean;
     error?: string | null;
-    arrangement?: "vertical" | "horizontal";
     labelSuffix?: string;
     label$alignment?: "center" | "top";
 }, {

package/dist/form-panel/flex-form/CellField.svelte

@@ -8,7 +8,6 @@
     export let label$style: string = '';
     export let required: boolean = false;
     export let error: string | null = null;
-    export let arrangement: 'vertical' | 'horizontal' = 'vertical' ;
     export let labelSuffix: string = ':';
 
     let cellCss: string = '';
@@ -25,6 +24,6 @@
     $: cellCss = generateCss(span);
 
 </script>
-<FormField class="cell-field" {label} {labelSuffix} style="{style}; {cellCss}" {label$style} {required} {error} {arrangement}>
+<FormField class="form-cell" {label} {labelSuffix} style="{style}; {cellCss}" {label$style} {required} {error}>
     <slot/>
 </FormField>

package/dist/form-panel/flex-form/CellField.svelte.d.ts

@@ -23,7 +23,6 @@ declare const CellField: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_Props
     label$style?: string;
     required?: boolean;
     error?: string | null;
-    arrangement?: "vertical" | "horizontal";
     labelSuffix?: string;
 }, {
     default: {};

package/dist/form-panel/flex-form/FlexForm.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
     export let style: string = '';
+    export let fieldLayout: 'vertical' | 'horizontal' = 'vertical';
+
 </script>
-<div class="flex-form" {style}>
+<div class="flex-form" class:field-layout-horizontal={fieldLayout=='horizontal'}  {style}>
     <div>
         <slot/>
     </div>

package/dist/form-panel/flex-form/FlexForm.svelte.d.ts

@@ -18,6 +18,7 @@ type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
 } : {});
 declare const FlexForm: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
     style?: string;
+    fieldLayout?: "vertical" | "horizontal";
 }, {
     default: {};
 }>, {

package/dist/form-panel/flex-row-form/FormContainer.svelte

@@ -2,11 +2,12 @@
 
     export {className as class };
     export let style: string = '';
+    export let fieldLayout: 'vertical' | 'horizontal' = 'vertical';
 
     let className: string = "";
 
 </script>
-<div class="flex-row-form" {style}>
+<div class="flex-row-form" class:field-layout-horizontal={fieldLayout=='horizontal'} {style}>
     <div>
         <slot/>
     </div>

package/dist/form-panel/flex-row-form/FormContainer.svelte.d.ts

@@ -19,6 +19,7 @@ type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
 declare const FormContainer: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
     class?: string;
     style?: string;
+    fieldLayout?: "vertical" | "horizontal";
 }, {
     default: {};
 }>, {

package/dist/form-panel/grid-form/GridField.svelte

@@ -4,12 +4,14 @@
     export let label: string = "Label:"
     export let label$style: string = '';
     export let required: boolean = false;
-    export let error: string = null;
+    export let error: string | null = null;
     export let arrangement: 'vertical' | 'horizontal' = 'vertical' ;
     export let rowSpan: number = 1;
     export let colSpan: number = 1;
-    export let row: number = null;
-    export let col: number = null;
+    export let row: number | null = null;
+    export let col: number | null = null;
+
+    export let height: string | undefined = undefined;
 
     export let labelSuffix: string = ':';
 
@@ -18,12 +20,12 @@
     $: {
         style = rowSpan > 1 ? `grid-row-end: span ${rowSpan};` : '';
         style += colSpan > 1 ? `grid-column-end: span ${colSpan};` : '';
-        style += row != null ? `grid-row-start: span ${row};` : '';
-        style += col != null ? `grid-column-start: span ${col};` : '';
+        style += row != null ? `grid-row-start: ${row};` : '';
+        style += col != null ? `grid-column-start: ${col};` : '';
     }
 
 
 </script>
-<FormField class="cell-field" {label$style} {labelSuffix} {style} {label} {required} {error} {arrangement}>
+<FormField class="form-cell" {label$style} {labelSuffix} {style} {label} {required} {error} {arrangement} {height}>
     <slot/>
 </FormField>

package/dist/form-panel/grid-form/GridField.svelte.d.ts

@@ -20,12 +20,13 @@ declare const GridField: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_Props
     label?: string;
     label$style?: string;
     required?: boolean;
-    error?: string;
+    error?: string | null;
     arrangement?: "vertical" | "horizontal";
     rowSpan?: number;
     colSpan?: number;
-    row?: number;
-    col?: number;
+    row?: number | null;
+    col?: number | null;
+    height?: string | undefined;
     labelSuffix?: string;
 }, {
     default: {};

package/dist/form-panel/grid-form/GridForm.svelte

@@ -1,8 +1,15 @@
 <script lang="ts">
+
     export let style: string = '';
+    export let columns: number = 6; //默认6列
+    export let fieldLayout: 'vertical' | 'horizontal' = 'vertical';
+
+
+    $: gridStyle = `grid-template-columns: repeat(${columns}, 1fr)`
+
 </script>
-<div class="grid-form" {style}>
-    <div>
+<div class="grid-form" class:field-layout-horizontal={fieldLayout=='horizontal'} {style}>
+    <div style="{gridStyle}">
         <slot/>
     </div>
 </div>

package/dist/form-panel/grid-form/GridForm.svelte.d.ts

@@ -18,6 +18,8 @@ type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
 } : {});
 declare const GridForm: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
     style?: string;
+    columns?: number;
+    fieldLayout?: "vertical" | "horizontal";
 }, {
     default: {};
 }>, {

package/dist/image-files/ImageFilesField.svelte

@@ -80,7 +80,7 @@
             </div>
             {#if !disabled && !readonly}
                 <div class="editor-action-icon ">
-                    <i class="uniface-icon-upload" aria-hidden="true" on:click={showDialog}></i>
+                    <i class="icon_google_file_upload" aria-hidden="true" on:click={showDialog}></i>
                 </div>
             {/if}
         </div>

package/dist/image-files/ImagePreview.svelte

@@ -89,9 +89,9 @@
                 </div>
                 <!-- 顶部工具栏 -->
                 <div class="toolbar" on:click|stopPropagation aria-hidden="true">
-                    <IconButton icon="uniface-icon-zoom-in" type="default" onClick={zoomIn}></IconButton>
-                    <IconButton icon="uniface-icon-zoom-out" type="default" onClick={zoomOut}></IconButton>
-                    <IconButton icon="uniface-icon-x" type="default" onClick={()=>{visible = false}}></IconButton>
+                    <IconButton icon="icon_google_zoom_in" type="default" onClick={zoomIn}></IconButton>
+                    <IconButton icon="icon_google_zoom_out" type="default" onClick={zoomOut}></IconButton>
+                    <IconButton icon="icon_google_cancel" type="default" onClick={()=>{visible = false}}></IconButton>
                 </div>
             </div>
         </div>

package/dist/image-files/ImageRender.svelte

@@ -21,11 +21,11 @@
         <div class="img-overlay">
             <div>
                 <div class="action-icon" style="top: 15px;">
-                    <i class="uniface-icon-eye" aria-hidden="true" on:click={()=>{onPreview?.(file)}}></i>
+                    <i class="icon_google_remove_red_eye" aria-hidden="true" on:click={()=>{onPreview?.(file)}}></i>
                 </div>
                 {#if !readonly}
                     <div class="action-icon" style="top: 35px;">
-                        <i class="uniface-icon-x" aria-hidden="true" on:click={removeFile}></i>
+                        <i class="icon_google_delete" aria-hidden="true" on:click={removeFile}></i>
                     </div>
                 {/if}
             </div>

package/dist/list-box/ListBox.svelte

@@ -68,7 +68,6 @@
     }
 
     const lazyLoad = async (clean: boolean = true) => {
-        console.log('加载数据...')
         isBusy = true;
         try {
             let result = await lazyLoader?.(filterText, pageNo);
@@ -81,7 +80,6 @@
                 selectedItem = null;
                 filteredList = list;
                 hasMore = result.hasMore;
-                console.log('加载数据完成')
             }
         } finally {
             isBusy = false;
@@ -157,7 +155,7 @@
     let searchBox: any;
 
     const handleScroll = () => {
-        const bottom = scrollElement.scrollHeight - scrollElement.scrollTop === scrollElement.clientHeight;
+        const bottom = scrollElement.scrollHeight - scrollElement.scrollTop - scrollElement.clientHeight < 2;
         if (bottom && lazyLoader && !isBusy && hasMore) {
             fetchMore();
         }
@@ -167,18 +165,22 @@
 
 </script>
 
-<div {style} class="uniface-box {className}" class:round>
-    {#if title || $$slots['header']}
-        <slot name="header">
-            <div class="title" style={boxHeaderStyle}>
-                <span>{title}</span>
-            </div>
-        </slot>
-    {/if}
-    {#if readonly === false && (filter || lazyLoader)}
-        <div class="header-search">
-            <SearchBox bind:this={searchBox} compact variant="plain" disabled={isBusy} style="width: 100%" bind:value={filterText}
-                       onChange={handleCriteriaChange}/>
+<div {style} class="uniface-listbox {className}" class:round>
+    {#if title || $$slots['header'] || (readonly === false && (filter || lazyLoader))}
+        <div class="box-header">
+            {#if title || $$slots['header']}
+                <slot name="header">
+                    <div class="title" style={boxHeaderStyle}>
+                        <span>{title}</span>
+                    </div>
+                </slot>
+            {/if}
+            {#if readonly === false && (filter || lazyLoader)}
+                <div class="header-search">
+                    <SearchBox bind:this={searchBox} compact variant="plain" disabled={isBusy} style="width: 100%" bind:value={filterText}
+                               onChange={handleCriteriaChange}/>
+                </div>
+            {/if}
         </div>
     {/if}
     <div class="listbox-content" class:selectable={selectMode==='single'} bind:this={scrollElement} on:scroll={handleScroll}>

package/dist/lookup-editor/LookupEditor.svelte

@@ -38,7 +38,7 @@
 
 </script>
 
-<CommonPicker {displayMode} {variant} {style} {compact} className="multiple" dropDownIcon="uniface-icon-more-horizontal"
+<CommonPicker {displayMode} {variant} {style} {compact} className="multiple" dropDownIcon="icon_google_keyboard_control"
                canClean={!mandatory && value!=null} autoFit {clean} textValue={text} {readonly} {disabled} iconClickHandler={handleActionIconClick}>
     <input style="width: 100%" {placeholder} class="text-editor" readonly value={text??''} {disabled}
            on:keydown on:focus on:click={handleActionIconClick}/>

package/dist/message-box/MessageBoxBoard.svelte

@@ -114,7 +114,7 @@
                 <div style="top: {top}px; left: {left}px">
                     <div class="title-bar" aria-hidden="true" on:mousedown={handleMouseDown} on:mouseup={handleMouseUp}>
                         <div>
-                            <i class="uniface-icon-x dialog-action-button" aria-hidden="true" on:click={handleCloseClick}></i>
+                            <i class="icon_google_clear dialog-action-button" aria-hidden="true" on:click={handleCloseClick}></i>
                         </div>
                     </div>
                     <div class="box-content" style="min-height: 40px">

package/dist/navigator/Navigator.svelte

@@ -8,6 +8,7 @@
     export let items: Array<any>;
     export let activeItem: any = null;
     export let style: string = "";
+    export let highlights: Array<any> = [];
     export let itemClickHandler: ItemClickHandler;
     export let retrieveStatus: RetrieveItemStatus;
 
@@ -22,6 +23,7 @@
     <div class="navigator-content">
         {#each items as item}
             <div class="uniface-navigator-item {retrieveStatus?.(item)??NavItemStatus.Completed}" class:active={activeItem===item}
+                 class:highlight={highlights.indexOf(item)>-1}
                  aria-hidden="true" on:click={handleItemClick(item)}>
                 <span>{item.text}</span>
             </div>

package/dist/navigator/Navigator.svelte.d.ts

@@ -16,6 +16,7 @@ declare const Navigator: $$__sveltets_2_IsomorphicComponent<{
     items: Array<any>;
     activeItem?: any;
     style?: string;
+    highlights?: Array<any>;
     itemClickHandler: (item: any) => void;
     retrieveStatus: (item: any) => NavItemStatus;
 }, {

package/dist/search-box/SearchBox.svelte

@@ -48,8 +48,8 @@
 </script>
 
 <CommonEditor {variant} {compact} {style} showActionIcon={value != null && value.length > 0} {clean}>
-    <div slot='leading-icon'>
-        <i class="uniface-icon-search"></i>
+    <div slot='leading-icon' style="line-height: 16px; font-size: 18px">
+        <i class="icon_google_search"></i>
     </div>
     <input bind:this={editor} style="width: 100%" bind:value={inputText} {disabled}  on:input={handleInput} on:compositionstart={handleCompositionStart}
            on:compositionend={handleCompositionEnd} {placeholder}/>

package/dist/tabs/Tabs.svelte

@@ -1,17 +1,17 @@
 <script lang="ts">
 
-    import {onMount, onDestroy} from "svelte";
+    import {onMount, onDestroy, tick} from "svelte";
     import {Tween} from 'svelte/motion';
     import {cubicOut} from 'svelte/easing';
     import type {TabActionHandler, TabCloseHandler, TabRender} from "./types";
 
 
-
     export {className as class};
     export let simple: boolean = false;
     export let textField: string = 'text';
     export let style: string = '';
     export let tabs: Array<any> = [];
+    export let scrollStep = 100;
     export let closable: boolean | TabActionHandler = false;
     export let activeTab: any = null;
     export let tabRender: TabRender = null as unknown as TabRender;
@@ -30,25 +30,26 @@
         if (activeTab == null && tabs.length > 0) {
             activeTab = tabs[0];
         }
-
         checkOverflow();
-        container.addEventListener('scroll', checkOverflow);
         window.addEventListener('resize', checkOverflow);
-        checkOverflow();
+        container.addEventListener('scroll', checkOverflow);
     });
 
     onDestroy(() => {
         window.removeEventListener('resize', checkOverflow);
+        container.removeEventListener('scroll', checkOverflow);
     });
 
+
     const checkOverflow = () => {
         if (container) {
-            if (currentLeft + container.clientWidth > container.scrollWidth) {
+            console.log(currentLeft, container.clientWidth, container.scrollWidth);
+            if (currentLeft + container.clientWidth >= container.scrollWidth) {
                 currentLeft = container.scrollWidth - container.clientWidth;
                 scrollX.set(currentLeft);
             }
-            if (currentLeft > 0 && container.clientWidth <= container.scrollWidth) {
-                currentLeft = container.scrollWidth - container.clientWidth;
+            if (currentLeft > 0 && container.clientWidth >= container.scrollWidth) {
+                currentLeft = 0;
                 scrollX.set(currentLeft);
             }
             showRight = currentLeft + container.clientWidth < container.scrollWidth;
@@ -56,18 +57,13 @@
         }
     };
 
-    const scroll = (direction: any) => {
-        if (container) {
-            const scrollAmount = 100;
-            currentLeft = currentLeft + direction * scrollAmount;
-            if (currentLeft < 0) {
-                currentLeft = 0;
-            } else if (currentLeft + container.clientWidth > container.scrollWidth) {
-                currentLeft = container.scrollWidth - container.clientWidth + 1;
-            }
-            scrollX.set(currentLeft);
-            checkOverflow();
-        }
+    const scroll = (dir: 1 | -1) => {
+        const maxScroll = container.scrollWidth - container.clientWidth;
+        currentLeft += dir * scrollStep;
+        if (currentLeft < 0) currentLeft = 0;
+        if (currentLeft > maxScroll) currentLeft = maxScroll;
+        scrollX.set(currentLeft);
+        checkOverflow();
     };
 
 
@@ -85,18 +81,12 @@
                 tabs.splice(pos, 1);
                 tabs = [...tabs];
                 if (tab == activeTab) {
-                    if (tabs.length > 0) {
-                        if (pos > tabs.length) {
-                            pos = tabs.length - 1;
-                        }
-                        if (pos == -1) {
-                            pos = 0;
-                        }
-                        activeTab = tabs[pos];
-                    } else {
-                        activeTab = null;
+                    if (pos >= tabs.length) {
+                        pos = tabs.length - 1;
                     }
+                    activeTab = tabs[pos];
                 }
+                await tick();
                 checkOverflow();
             }
         }
@@ -107,7 +97,7 @@
     const reloadTab = (tab: any) => (e: MouseEvent) => {
         reloadHandler?.(tab);
     }
-
+    //
 
 </script>
 <div class="uniface-tab-panel {className}" {style}>
@@ -123,14 +113,14 @@
                             {#if tabRender != null}
                                 <svelte:component this={tabRender} {tab} closeTab={closeHandler != null ? closeTab(tab) : null}
                                                   reloadTab={reloadHandler != null ? reloadTab(tab) : null}
-                                                  closable={closable === true || (typeof (closable) == "function" && closable(tab))}  />
+                                                  closable={closable === true || (typeof (closable) == "function" && closable(tab))}/>
                             {:else}
                                 <span>{tab[textField]}</span>
                                 {#if reloadHandler != null}
                                     <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="icon_google_clear tab-action" on:click={closeTab(tab)} aria-hidden="true"></i>
+                                {#if tabs.length > 1 && (closable === true || (typeof (closable) == "function" && closable(tab)))}
+                                    <i class="icon_google_clear tab-action" on:click|stopPropagation={closeTab(tab)} aria-hidden="true"></i>
                                 {/if}
                             {/if}
                         </div>

package/dist/tabs/Tabs.svelte.d.ts

@@ -23,6 +23,7 @@ declare const Tabs: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithC
     textField?: string;
     style?: string;
     tabs?: Array<any>;
+    scrollStep?: number;
     closable?: boolean | TabActionHandler;
     activeTab?: any;
     tabRender?: TabRender;

package/dist/tag/Tag.svelte

@@ -20,8 +20,10 @@
 
 </script>
 <div class="uniface-tag" {style}>
-    <div class="{size} {variant} {className} {colorClass}" class:removable={removable} >
+    <div class="{size} {variant} {className} {colorClass}" class:removable={removable}>
         <span>{text}</span>
-        <Icon name="icon_google_clear" clickable class="uniface-remove-icon" onClick={removeHandler}/>
+        {#if removable}
+            <Icon name="icon_google_clear" class="uniface-remove-icon" onClick={removeHandler}/>
+        {/if}
     </div>
 </div>

package/dist/text-editor/PasswordEditor.svelte

@@ -28,7 +28,7 @@
 
 
 </script>
-<CommonEditor {style} {value} type="password" {readonly} {variant} {compact} class={className}>
+<CommonEditor {style} {value} {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 />
@@ -36,9 +36,9 @@
         <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">
+    <div slot="trailing-icon" class="editor-embed-icon">
         {#if (!readonly && !disabled)}
-            <i class={type == "password" ? "uniface-icon-eye" : "uniface-icon-eye-off"} on:click={toggleType}></i>
+            <i class={type == "password" ? "icon_google_remove_red_eye" : "icon_google_visibility_off"} on:click={toggleType}></i>
         {/if}
     </div>
 </CommonEditor>

package/dist/ticatec-uniface-web.css

@@ -85,7 +85,7 @@
   --uniface-box-footer-height: 24px;
   --uniface-box-header-border: none;
   --uniface-box-header-margin: 8px;
-  --uniface-box-border-color: var(--uniface-plain-border-color, #f0f0f0);
+  --uniface-box-border-color: #f0f0f0;
 }
 
 .uniface-box {
@@ -137,6 +137,9 @@
   --uniface-list-box-hover-bg: #FFFFE1;
   --uniface-list-box-selected-bg: #b1c8f6;
   --uniface-list-box-header-bottom-border: 1px solid #f0f0f0;
+  --uniface-list-box-border-color: #f0f0f0;
+  --uniface-list-box-header-bg: #F8FAFC;
+  --uniface-list-box-footer-bg: #F8FAFC;
 }
 
 .uniface-listbox {
@@ -146,6 +149,7 @@
   overflow: hidden;
   box-sizing: border-box;
   user-select: none;
+  border: 1px solid var(--uniface-list-box-border-color);
 }
 .uniface-listbox .list-view-mask {
   width: 100%;
@@ -163,7 +167,8 @@
 .uniface-listbox .box-header .title {
   font-weight: 600;
   line-height: 32px;
-  border-bottom: 1px solid var(--uniface-box-border-color);
+  padding: 0 8px;
+  background-color: var(--uniface-list-box-header-bg, #F8FAFC);
 }
 .uniface-listbox .box-header .header-search {
   width: 100%;
@@ -174,6 +179,7 @@
 }
 .uniface-listbox .box-footer {
   border-top: var(--uniface-list-box-header-bottom-border);
+  background-color: var(--uniface-list-box-footer-bg);
   height: auto;
 }
 .uniface-listbox .listbox-header {
@@ -731,38 +737,37 @@
   display: grid;
   position: relative;
   gap: 4px;
+  grid-template-columns: 1fr;
 }
 .uniface-filter-field .field-label {
   color: var(--uniface-criteria-field-label-color);
   font-size: 0.9em;
   font-weight: 500;
   box-sizing: border-box;
-}
-.uniface-filter-field.vertical .field-container {
-  grid-template-columns: 1fr;
-}
-.uniface-filter-field.vertical .field-label {
   width: 100%;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.uniface-filter-field.vertical .field {
+.uniface-filter-field .field {
   position: relative;
   display: flex;
   flex-direction: row;
   justify-items: center;
   width: 100%;
 }
-.uniface-filter-field.horizontal .field-container {
+
+.field-layout-horizontal .field-container {
   grid-template-columns: auto 1fr;
   align-items: center;
   gap: 8px;
 }
-.uniface-filter-field.horizontal .field-label {
+.field-layout-horizontal .field-label {
   text-align: var(--uniface-criteria-field-label-alignment);
   width: var(--uniface-criteria-field-label-width);
-  overflow: hidden;
+  overflow: unset;
+  text-overflow: unset;
+  white-space: unset;
 }
 
 .switch-box input[type=checkbox] {
@@ -870,6 +875,7 @@
   --uniface-form-field-label-width: 120px;
   --uniface-form-field-label-alignment: right;
   --uniface-form-field-padding: 6px 4px;
+  --uniface-field-gap: 4px;
 }
 
 .uniface-form-field {
@@ -877,7 +883,6 @@
   display: block;
   position: relative;
   height: auto;
-  padding: var(--uniface-form-field-padding);
 }
 .uniface-form-field .required-indicator {
   color: var(--uniface-form-field-required-indicator-color);
@@ -889,6 +894,7 @@
   font-style: italic;
   color: var(--uniface-form-field-invalid-message-color);
   grid-area: hint;
+  margin-top: 8px;
 }
 .uniface-form-field .field {
   width: 100%;
@@ -912,29 +918,35 @@
 .uniface-form-field .form-content {
   width: 100%;
   display: grid;
-  gap: 8px;
-}
-.uniface-form-field.vertical .form-content {
+  grid-template-rows: auto 1fr auto;
   grid-template-columns: 1fr;
   grid-template-areas: "label" "field" "hint";
 }
-.uniface-form-field.vertical .form-content .field-label {
+.uniface-form-field .form-content .field-label {
   width: 100%;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  margin-bottom: var(--uniface-field-gap);
+  padding: 0 4px;
 }
-.uniface-form-field.vertical .form-content .empty-field {
+.uniface-form-field .form-content .empty-field {
   display: none;
 }
-.uniface-form-field.horizontal .form-content {
+
+.field-layout-horizontal .form-content {
+  grid-template-rows: 1fr auto;
   grid-template-columns: auto 1fr;
-  gap: 8px;
   grid-template-areas: "label field" "empty hint";
 }
-.uniface-form-field.horizontal .form-content .field-label {
+.field-layout-horizontal .form-content .field-label {
   width: var(--uniface-form-field-label-width);
+  white-space: wrap;
+  overflow: unset;
+  text-overflow: unset;
+  margin-bottom: unset;
   text-align: var(--uniface-form-field-label-alignment);
+  padding-right: 8px;
 }
 
 .flex-block {
@@ -1857,6 +1869,7 @@
 }
 .uniface-tabs-wrap .scroll-right, .uniface-tabs-wrap .scroll-left {
   width: 24px;
+  flex: 0 0 auto;
   text-align: center;
   cursor: pointer;
 }
@@ -2111,6 +2124,12 @@
   width: 100%;
 }
 
+root {
+  --uniface-drawer-bg: #ffffff;
+  --uniface-drawer-shadow: rgba(0, 0, 0, 0.16) 0 3px 6px, rgba(0, 0, 0, 0.23) 0 3px 6px;
+  --uniface-drawer-border-color: #e1e1e1;
+}
+
 .uniface-drawer {
   position: fixed;
   top: 0;
@@ -2123,8 +2142,8 @@
 .uniface-drawer > div {
   position: absolute;
   height: 100%;
-  background-color: var(--tsui-app-background-color, #ffffff);
-  box-shadow: rgba(0, 0, 0, 0.16) 0 3px 6px, rgba(0, 0, 0, 0.23) 0 3px 6px;
+  background-color: var(--uniface-drawer-bg);
+  box-shadow: var(--uniface-drawer-shadow);
 }
 .uniface-drawer > div > div {
   position: relative;
@@ -2134,11 +2153,11 @@
 }
 .uniface-drawer > div.left {
   left: 0;
-  border-right: 1px solid var(--tsui-border-color, #9d9d9d);
+  border-right: 1px solid var(--uniface-drawer-border-color);
 }
 .uniface-drawer > div.right {
   right: 0;
-  border-left: 1px solid var(--tsui-border-color, #9d9d9d);
+  border-left: 1px solid var(--uniface-drawer-border-color);
 }
 
 .uniface-pagination-panel {
@@ -2738,56 +2757,51 @@
   margin: auto 20px;
 }
 
-.flex-row-form {
+:root {
+  --uniface-flex-form-row-gap: 12px;
+  --uniface-flex-container-padding: 8px 6px;
+  --uniface-flex-cell-padding: 0 6px;
+  --uniface-flex-form-row-padding: 6px 0;
+  --uniface-grid-cell-padding: 6px;
+}
+
+.flex-row-form, .flex-form {
   width: 100%;
-  height: 100%;
-  overflow: auto;
   position: relative;
   box-sizing: border-box;
+  padding: var(--uniface-flex-container-padding);
 }
-.flex-row-form > div {
+.flex-row-form > div, .flex-form > div {
   width: 100%;
   height: 100%;
   display: flex;
-  flex-direction: column;
   position: relative;
+  justify-items: start;
   box-sizing: border-box;
 }
-.flex-row-form .form-row {
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  justify-items: flex-start;
-  box-sizing: border-box;
-  padding: 3px 0;
-}
-.flex-row-form .form-row .cell-field {
-  box-sizing: border-box;
-  padding: 0 4px;
-}
-.flex-row-form .form-row .form-cell {
+.flex-row-form .form-cell, .flex-form .form-cell {
   position: relative;
   box-sizing: border-box;
-  padding: 0 4px;
   flex: 0 0 auto;
+  padding: var(--uniface-flex-cell-padding);
 }
 
-.flex-form {
-  position: relative;
-  width: 100%;
-  display: block;
+.flex-row-form > div {
+  flex-direction: column;
 }
-.flex-form > div {
-  position: relative;
-  width: 100%;
+.flex-row-form .form-row {
   display: flex;
-  flex-wrap: wrap;
-  justify-items: start;
-  box-sizing: border-box;
+  flex-direction: row;
+  padding: var(--uniface-flex-form-row-padding);
 }
-.flex-form .cell-field {
-  box-sizing: border-box;
-  padding: 4px;
+.flex-row-form .form-row:last-child {
+  padding-bottom: 0;
+}
+
+.flex-form > div {
+  flex-wrap: wrap;
+  flex-direction: row;
+  row-gap: var(--uniface-flex-form-row-gap);
 }
 .flex-form .row-break {
   width: 100%;
@@ -2798,35 +2812,20 @@
   position: relative;
   width: 100%;
   display: block;
+  padding: var(--uniface-flex-container-padding);
 }
 .grid-form > div {
   width: 100%;
+  height: 100%;
   position: relative;
   display: grid;
-  grid-template-columns: repeat(12, 1fr);
   justify-items: start;
   box-sizing: border-box;
-  padding: 6px 8px;
-  grid-row-gap: 3px;
-  grid-column-gap: 4px;
 }
-.grid-form .cell-field {
+.grid-form .form-cell {
   width: 100%;
   box-sizing: border-box;
-}
-.grid-form .uniface-form-field.vertical .form-content {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-.grid-form .uniface-form-field.vertical .form-content .field-label {
-  flex: 0 0 auto;
-}
-.grid-form .uniface-form-field.vertical .form-content .field-hint {
-  flex: 0 0 auto;
-}
-.grid-form .uniface-form-field.vertical .form-content .field {
-  flex: 1 1 auto;
+  padding: var(--uniface-grid-cell-padding);
 }
 
 .uniface-display-field.images-field > div {
@@ -3097,6 +3096,7 @@
   --uniface-navigator-hover-text-color: #298DFF;
   --uniface-navigator-active-text-color: #0061FF;
   --uniface-navigator-active-text-weight: 600;
+  --uniface-navigator-highlight-text-color: #0061FF;
 }
 
 .uniface-navigator-panel {
@@ -3158,6 +3158,9 @@
   color: var(--uniface-navigator-hover-text-color);
   cursor: pointer;
 }
+.uniface-navigator-panel .navigator-content .uniface-navigator-item.highlight {
+  color: var(--uniface-navigator-highlight-text-color);
+}
 .uniface-navigator-panel .navigator-content .uniface-navigator-item.active {
   color: var(--uniface-navigator-active-text-color);
   font-weight: var(--uniface-navigator-active-text-weight);
@@ -3477,6 +3480,7 @@
 
 .uniface-tag {
   display: inline-block;
+  cursor: default;
 }
 .uniface-tag > div {
   display: block;
@@ -3507,6 +3511,7 @@
   height: 14px;
   width: 14px;
   border-radius: 50%;
+  cursor: pointer;
   top: 2px;
   right: 1px;
   line-height: 12px;

package/dist/tree-view/TreeNodeView.svelte

@@ -6,7 +6,7 @@
     import type {OnContextMenu} from "../context-menu/ContextMenuItem";
 
     export let node: TreeNode;
-    export let lazyLoader: LazyLoader;
+    export let lazyLoader: LazyLoader | null;
     export let activeNode: any;
     export let isVisible: NodeVisibleFun;
     export let level: number = 1;

package/dist/tree-view/TreeNodeView.svelte.d.ts

@@ -16,7 +16,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const TreeNodeView: $$__sveltets_2_IsomorphicComponent<{
     node: TreeNode;
-    lazyLoader: LazyLoader;
+    lazyLoader: LazyLoader | null;
     activeNode: any;
     isVisible: NodeVisibleFun;
     level?: number;

package/dist/tree-view/TreeView.svelte

@@ -8,7 +8,7 @@
 
     export let nodes: Array<TreeNode>;
     export let style: string = "";
-    export let lazyLoader: LazyLoader;
+    export let lazyLoader: LazyLoader | null = null;
     export let activeNode: any = null;
     export {className as class};
     export let isVisible: NodeVisibleFun = null as unknown as NodeVisibleFun;

package/dist/tree-view/TreeView.svelte.d.ts

@@ -17,7 +17,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 declare const TreeView: $$__sveltets_2_IsomorphicComponent<{
     nodes: Array<TreeNode>;
     style?: string;
-    lazyLoader: LazyLoader;
+    lazyLoader?: LazyLoader | null;
     activeNode?: any;
     class?: string;
     isVisible?: NodeVisibleFun;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ticatec/uniface-element",
-  "version": "0.1.35",
+  "version": "0.1.45",
   "description": "uniface web elements",
   "scripts": {
     "dev": "vite dev",