@ticatec/uniface-element 0.1.33 → 0.1.35

package/dist/base-calendar/CalendarBase.svelte

@@ -93,14 +93,14 @@
     <div>
         <div class="uniface-title-bar">
             <div class="action-icon" on:click={adjustMonth(-1)} aria-hidden="true">
-                <i class="uniface-icon-chevron-left"></i>
+                <i class="icon_google_keyboard_arrow_left"></i>
             </div>
             <div style="flex: 1 1 auto; text-align: center">
                 <span class="title-text" on:click={pickupYear} aria-hidden="true">{year}</span>
                 <span class="title-text" on:click={pickupMonth} aria-hidden="true">{month + 1}</span>
             </div>
             <div class="action-icon" on:click={adjustMonth(1)} aria-hidden="true">
-                <i class="uniface-icon-chevron-right"></i>
+                <i class="icon_google_keyboard_arrow_right"></i>
             </div>
         </div>
         <div style="flex: 1 1 auto; overflow: hidden">

package/dist/base-calendar/YearPickupPanel.svelte

@@ -33,7 +33,7 @@
         <div>
             <div style="text-align: center">
                 <div style="display: inline-block; width: 30px; height: 10px; padding: 6px 0">
-                    <i class="uniface-icon-chevrons-up" on:click={showYears(-years)}></i>
+                    <i class="icon_google_keyboard_arrow_up" on:click={showYears(-years)}></i>
                 </div>
             </div>
             <div style="display: grid; grid-template-columns: auto auto auto auto; width: 100%; overflow: hidden">
@@ -45,7 +45,7 @@
             </div>
             <div style="text-align: center">
                 <div style="display: inline-block; width: 30px; height: 10px; padding: 6px 0">
-                    <i class="uniface-icon-chevrons-down" on:click={showYears(years)}></i>
+                    <i class="icon_google_keyboard_arrow_down" on:click={showYears(years)}></i>
                 </div>
             </div>
         </div>

package/dist/box/Box.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
 
-    export let style: string = "";
+    export let style: string | null = null;
     export let title: string = null as unknown as string;
     export let round: boolean = false;
     export let content$style: string | null = null;
     export let header$style: string | null = null;
     export let footer$style: string | null = null;
-    export let showFooter: boolean = true;
+
     export {className as class};
 
     let className: string | null = null;
@@ -28,7 +28,7 @@
         <slot></slot>
     </div>
     {#if $$slots['footer']}
-        <div class="box-footer flex-container" style="{footer$style}; {showFooter ? '' : 'display: none' }">
+        <div class="box-footer flex-container" style="{footer$style};">
             <slot name="footer">
             </slot>
         </div>

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

@@ -17,13 +17,12 @@ type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
     children?: any;
 } : {});
 declare const Box: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    style?: string;
+    style?: string | null;
     title?: string;
     round?: boolean;
     content$style?: string | null;
     header$style?: string | null;
     footer$style?: string | null;
-    showFooter?: boolean;
     class?: null;
 }, {
     header: {};

package/dist/form-field/FormField.svelte

@@ -7,10 +7,9 @@
     export let style: string = '';
     export let label$style: string | null = null;
     export let required: boolean = false;
-    export let error: string = '';
+    export let error: string | null = null;
     export let arrangement: 'vertical' | 'horizontal' = 'vertical';
     export let labelSuffix: string = ':';
-
     export let label$alignment: 'center' | 'top' = 'center'
 
     let className: string = '';

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

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

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

@@ -7,7 +7,7 @@
     export let style: string = '';
     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 labelSuffix: string = ':';
 

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

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

package/dist/list-box/ListBox.svelte

@@ -90,7 +90,7 @@
 
     let idleTime = 0;
     const delayReload = async () => {
-        idleTime ++;
+        idleTime++;
         if (idleTime > 10) {
             clearInterval(interval);
             interval = null;
@@ -167,22 +167,20 @@
 
 </script>
 
-<Box class="uniface-listbox {className}" {round} {footer$style} {style} showFooter={$$slots.footer!=null}
-     header$style={boxHeaderStyle}>
-    <svelte:fragment slot="header">
-        {#if title || $$slots['header']}
-            <slot name="header">
-                <div class="title">
-                    <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-box {className}" class:round>
+    {#if title || $$slots['header']}
+        <slot name="header">
+            <div class="title" style={boxHeaderStyle}>
+                <span>{title}</span>
             </div>
-        {/if}
-    </svelte:fragment>
+        </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 class="listbox-content" class:selectable={selectMode==='single'} bind:this={scrollElement} on:scroll={handleScroll}>
         {#if filteredList && itemRender}
             {#each filteredList as item}
@@ -207,7 +205,12 @@
             <slot name="loadMoreIndicator"></slot>
         {/if}
     </div>
-    <slot name="footer" slot="footer"/>
+    {#if $$slots['footer']}
+        <div class="box-footer flex-container" style="{footer$style};">
+            <slot name="footer">
+            </slot>
+        </div>
+    {/if}
     {#if isBusy}
         <div class="list-view-mask">
             <div style="height: 100%; height: 100%; text-align: center">
@@ -215,4 +218,4 @@
             </div>
         </div>
     {/if}
-</Box>
+</div>

package/dist/list-box/ListBox.svelte.d.ts

@@ -36,9 +36,7 @@ declare const ListBox: $$__sveltets_2_IsomorphicComponent<{
 }, {
     header: {};
     loadMoreIndicator: {};
-    footer: {
-        slot: string;
-    };
+    footer: {};
 }, {}, string>;
 type ListBox = InstanceType<typeof ListBox>;
 export default ListBox;

package/dist/options-select/OptionsSelect.svelte

@@ -1,11 +1,9 @@
 <script lang="ts">
 
-
     import {DisplayMode} from "../common/DisplayMode";
     import type {OnChangeHandler} from "../common/OnChangeHandler";
     import CommonPicker from "../common/CommonPicker.svelte";
 
-
     export let variant: '' | 'plain' | 'outlined' | 'filled' = '';
     export let disabled: boolean = false;
     export let readonly: boolean = false;

package/dist/tabs/Tabs.svelte

@@ -14,7 +14,6 @@
     export let tabs: Array<any> = [];
     export let closable: boolean | TabActionHandler = false;
     export let activeTab: any = null;
-    export let refreshable: boolean = false;
     export let tabRender: TabRender = null as unknown as TabRender;
     export let reloadHandler: TabActionHandler = null as unknown as TabActionHandler;
     export let closeHandler: TabCloseHandler = null as unknown as TabCloseHandler;
@@ -115,17 +114,19 @@
     <div>
         <div class="uniface-tabs-wrap" class:simple>
             <div class="scroll-left" style="visibility: {showLeft ? 'visible' : 'hidden'}">
-                <i class="uniface-icon-chevron-left" aria-hidden="true" on:click={() => scroll(-1)}></i>
+                <i class="icon_google_arrow_left" aria-hidden="true" on:click={() => scroll(-1)}></i>
             </div>
             <div class="tabs-panel" style="overflow: hidden;">
                 <div style="position: relative; left: {-scrollX.current}px" bind:this={container}>
                     {#each tabs as tab}
                         <div class="uniface-tab" class:active={tab===activeTab} on:click={handleTabClick(tab)} aria-hidden="true">
                             {#if tabRender != null}
-                                <svelte:component this={tabRender} {tab} {refreshable} {closable} on:reload on:close={closeTab(tab)}/>
+                                <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))}  />
                             {:else}
                                 <span>{tab[textField]}</span>
-                                {#if refreshable}
+                                {#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))}
@@ -137,7 +138,7 @@
                 </div>
             </div>
             <div class="scroll-right" style="visibility: {showRight ? 'visible' : 'hidden'}">
-                <i class="uniface-icon-chevron-right" aria-hidden="true" on:click={() => scroll(1)}></i>
+                <i class="icon_google_arrow_right" aria-hidden="true" on:click={() => scroll(1)}></i>
             </div>
         </div>
         <div class="tab-content" style="flex: 1 1 auto; height: 100%; overflow: hidden">

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

@@ -25,15 +25,12 @@ declare const Tabs: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithC
     tabs?: Array<any>;
     closable?: boolean | TabActionHandler;
     activeTab?: any;
-    refreshable?: boolean;
     tabRender?: TabRender;
     reloadHandler?: TabActionHandler;
     closeHandler?: TabCloseHandler;
 }, {
     default: {};
 }>, {
-    reload: any;
-} & {
     [evt: string]: CustomEvent<any>;
 }, {
     default: {};

package/dist/ticatec-uniface-web.css

@@ -351,7 +351,7 @@
   }
 }
 .uniface-group-box {
-  border-bottom: 1px solid var(--uniface-border-color, #9d9d9d);
+  border-bottom: 1px solid var(--uniface-editor-border-color);
   padding: var(--uniface-box-padding, 0 4px);
   width: 100%;
   box-sizing: border-box;
@@ -363,28 +363,32 @@
 }
 .uniface-group-box:focus-within, .uniface-group-box:focus, .uniface-group-box:active {
   outline: none;
-  border-bottom-color: var(--uniface-active-border-color, #ff3e00);
+  border-bottom-color: var(--uniface-active-border-color);
+}
+.uniface-group-box.filled {
+  border-top-right-radius: var(--uniface-field-round, 4px);
+  border-top-left-radius: var(--uniface-field-round, 4px);
+  background-color: var(--uniface-editor-filled-backgournd-color);
+}
+.uniface-group-box.disabled {
+  background-color: var(--uniface-editor-outlined-disabled-backgournd-color);
+  color: var(--uniface-editor-outlined-disabled-text-color);
 }
 .uniface-group-box.disabled:focus-within, .uniface-group-box.disabled:focus, .uniface-group-box.disabled:active {
-  border-bottom-color: var(--uniface-border-color, #9d9d9d);
+  border-bottom-color: var(--uniface-editor-border-color);
 }
 .uniface-group-box.plain {
   border: none;
 }
 .uniface-group-box.outlined {
-  border: 1px solid var(--uniface-border-color, #9d9d9d);
+  border: 1px solid var(--uniface-editor-border-color);
   border-radius: var(--uniface-field-round, 4px);
 }
 .uniface-group-box.outlined:focus-within, .uniface-group-box.outlined:focus, .uniface-group-box.outlined:active {
-  border-color: var(--uniface-active-border-color, #ff3e00);
+  border-color: var(--uniface-editor-border-color);
 }
 .uniface-group-box.outlined.disabled:focus-within, .uniface-group-box.outlined.disabled:focus, .uniface-group-box.outlined.disabled:active {
-  border-color: var(--uniface-border-color, #9d9d9d);
-}
-.uniface-group-box.filled {
-  border-top-right-radius: var(--uniface-field-round, 4px);
-  border-top-left-radius: var(--uniface-field-round, 4px);
-  background-color: var(--uniface-filled-color, #f7f7f7);
+  border-color: var(--uniface-editor-border-color);
 }
 .uniface-group-box.compact {
   min-height: 28px;
@@ -865,6 +869,7 @@
   --uniface-form-field-invalid-message-color: #ff3e00;
   --uniface-form-field-label-width: 120px;
   --uniface-form-field-label-alignment: right;
+  --uniface-form-field-padding: 6px 4px;
 }
 
 .uniface-form-field {
@@ -872,7 +877,7 @@
   display: block;
   position: relative;
   height: auto;
-  padding: 6px 4px;
+  padding: var(--uniface-form-field-padding);
 }
 .uniface-form-field .required-indicator {
   color: var(--uniface-form-field-required-indicator-color);
@@ -1121,8 +1126,8 @@
 .uniface-radio-button > span:after {
   content: "";
   position: absolute;
-  top: 4px;
-  left: 4px;
+  top: 3px;
+  left: 3px;
   width: 10px;
   height: 10px;
   border-radius: 50%;
@@ -1169,8 +1174,8 @@
   position: absolute;
   top: 3px;
   left: 3px;
-  width: 10px;
-  height: 10px;
+  width: 8px;
+  height: 8px;
 }
 
 :root {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ticatec/uniface-element",
-  "version": "0.1.33",
+  "version": "0.1.35",
   "description": "uniface web elements",
   "scripts": {
     "dev": "vite dev",
@@ -132,6 +132,10 @@
       "types": "./dist/date-picker/index.d.ts",
       "import": "./dist/date-picker/index.js"
     },
+    "./DateTimePicker": {
+      "types": "./dist/date-picker/DateTimePicker.svelte.d.ts",
+      "import": "./dist/date-picker/DateTimePicker.svelte"
+    },
     "./DataTable": {
       "types": "./dist/data-table/index.d.ts",
       "import": "./dist/data-table/index.js"