@ticatec/uniface-element 0.1.12 → 0.1.13

package/dist/app-layout/ClassicLayout.svelte

@@ -60,7 +60,7 @@
         </div>
         {#if $$slots['right-sidebar']}
             {#if sidebarResize}
-                <Split direction="vertical" bindingPanel={rightBar}/>
+                <Split direction="vertical" bindingPanel={rightBar} reverse/>
             {/if}
             <div bind:this={rightBar} style="width: 100%; flex: 0 0 auto; overflow: auto; width: {rightBarWidth}; {rightMinWidth} {rightMaxWidth}">
                 <slot name="right-sidebar"></slot>

package/dist/box/Box.svelte

@@ -5,6 +5,7 @@
     export let round: boolean = false;
 
     export let content$style: string = '';
+    export let fonter$style: string = '';
 
 </script>
 
@@ -21,4 +22,11 @@
     <div class="box-content" style={content$style}>
         <slot></slot>
     </div>
+    {#if $$slots['footer']}
+        <div class="box-footer" style={fonter$style}>
+            <slot name="footer">
+
+            </slot>
+        </div>
+    {/if}
 </div>

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

@@ -21,14 +21,17 @@ declare const Box: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithCh
     title?: string;
     round?: boolean;
     content$style?: string;
+    fonter$style?: string;
 }, {
     header: {};
     default: {};
+    footer: {};
 }>, {
     [evt: string]: CustomEvent<any>;
 }, {
     header: {};
     default: {};
+    footer: {};
 }, {}, string>;
 type Box = InstanceType<typeof Box>;
 export default Box;

package/dist/card/Card.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 
-    import CardHeader from "./CardHeader.svelte";
     import type CardAction from "./CardAction";
     import CommonCardActionBar from "./CommonCardActionBar.svelte";
 
@@ -15,7 +14,9 @@
 <div class="uniface-card" class:shadowBox={variant=='3d'}>
     <div {style}>
         {#if title}
-            <CardHeader {title}/>
+            <div class="card-header simple">
+                <span>{title}</span>
+            </div>
         {:else if $$slots['header-bar']}
             <div class="card-header">
                 <slot name="header-bar"/>

package/dist/card/CardAction.d.ts

@@ -1,5 +1,6 @@
 export type ActionCallback = () => void;
 export default interface CardAction {
     icon?: string;
+    disabled?: boolean;
     callback: ActionCallback;
 }

package/dist/card/CommonCardActionBar.svelte

@@ -8,7 +8,7 @@
     let clickEnable = true;
 
     const handleActionClick = (action: CardAction) => async (e: MouseEvent) => {
-        if (clickEnable) {
+        if (clickEnable && !action.disabled) {
             clickEnable = false;
             action.callback?.();
             await utils.sleep(0.5);
@@ -20,8 +20,8 @@
 
 <div class="card-action-bar simple">
     {#each actions as action}
-        <div class="action-item">
-            <i class={action.icon} on:click={handleActionClick(action)}></i>
+        <div class:disabled={action.disabled} class="action-item">
+            <i class={action.icon} aria-hidden="true" on:click={handleActionClick(action)}></i>
         </div>
     {/each}
 </div>

package/dist/checkbox/CheckBox.svelte

@@ -41,7 +41,7 @@
 
 </script>
 <div class="uniface-checkbox" class:disabled class:compact {style}>
-    <label on:click={handleClickEvent} aria-hidden="true" >
+    <label on:click={handleClickEvent} >
         <input bind:this={checkbox} type="checkbox" bind:checked={value} {readonly} {disabled}/>
         <span>{label}</span>
     </label>

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

@@ -137,7 +137,7 @@
                 {/each}
             </div>
         {:else}
-            <div class="empty-content-board" style="width: {width}px;">
+            <div class="empty-content-board" style="width: 100%">
                 <div>{indicatorColumn.emptyIndicator ?? "Empty dataset."}</div>
             </div>
         {/if}

package/dist/date-picker/DatePicker.svelte

@@ -56,6 +56,11 @@
                 value = null;
                 textValue = '';
                 showPopup = false;
+            } else if (e.key == 'Tab') {
+                if (showPopup) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                }
             } else if (e.key == 'Escape') {
                 showPopup = false;
             } else {

package/dist/date-picker/DateTimePicker.svelte

@@ -28,7 +28,7 @@
     let textValue: string;
     let editor: any;
     let oldValue: Date = dateUtils.toDayjs(value)?.toDate();
-    let currentValue : dayjs.Dayjs;
+    let currentValue: dayjs.Dayjs;
 
     const dateFmts = {
         "H": "YYYY-MM-DD HH:mm",
@@ -64,6 +64,11 @@
         if (e.key == 'Backspace' || e.key == 'Delete') {
             value = null;
             showPopup = false;
+        } else if (e.key == 'Tab') {
+            if (showPopup) {
+                e.preventDefault();
+                e.stopPropagation();
+            }
         } else if (e.key == 'Escape') {
             showPopup = false;
         }

package/dist/dialog/Dialog.svelte

@@ -4,7 +4,6 @@
     import type {DialogCloseConfirm} from "./DialogCloseConfirm";
     import ActionBar, {type ButtonActions} from "../action-bar";
     import i18n from "../i18nContext";
-    import type ButtonAction from "../action-bar/ButtonAction";
     import {onMount} from "svelte";
 
     export let title: string = null as unknown as string;

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import { DateContext } from "./base-calendar";
 import type CardAction from "./card/CardAction";
 import type { DialogCloseConfirm, IDialog } from './dialog';
-import { type IMessageBox, ModuleResult } from "./message-box";
+import { type IMessageBox, ModalResult } from "./message-box";
 import type { Toast } from "./toast";
 import type { Indicator } from "./indicator";
 import type { UnitOption } from "./unit-number-editor";
@@ -10,7 +10,7 @@ import type { FunFilter, LazyLoader, LoadResult } from "./list-box";
 import type { ActionsColumn, FormatCell, CellHint, IndicatorColumn, RowAction, GetRowActions, ActionFunction, DataColumn } from "./data-table";
 import type { ContextMenuItem, OnContextMenu, ActionCallback } from "./context-menu";
 import type { MouseClickHandler } from "./common/MouseClickHandler";
-export { DateContext, ModuleResult, DisplayMode };
+export { DateContext, ModalResult, DisplayMode };
 declare global {
     interface Window {
         Indicator: Indicator;

package/dist/index.js

@@ -1,4 +1,4 @@
 import { DateContext } from "./base-calendar";
-import { ModuleResult } from "./message-box";
+import { ModalResult } from "./message-box";
 import { DisplayMode } from "./common/DisplayMode.js";
-export { DateContext, ModuleResult, DisplayMode };
+export { DateContext, ModalResult, DisplayMode };

package/dist/list-box/index.d.ts

@@ -1,5 +1,4 @@
 import ListBox from "./ListBox.svelte";
-import type { FunFilter } from "./types";
-import type { LazyLoader, LoadResult } from "./types";
+import type { LazyLoader, LoadResult, FunFilter } from "./types";
 export default ListBox;
 export type { LazyLoader, FunFilter, LoadResult };

package/dist/message-box/IMessageBox.d.ts

@@ -4,7 +4,7 @@ export default interface IMessageBox {
     showInfo: ShowFun;
     showConfirm: ShowConfirmFun;
 }
-declare enum ModuleResult {
+declare enum ModalResult {
     MR_OK = 1,
     MR_CANCEL = 2,
     MR_CLOSE = 3
@@ -12,12 +12,12 @@ declare enum ModuleResult {
 declare const InfoButtons: {
     label: string;
     type: string;
-    result: ModuleResult;
+    result: ModalResult;
 }[];
 declare const ConfirmButtons: {
     label: string;
     type: string;
-    result: ModuleResult;
+    result: ModalResult;
 }[];
 declare const initialize: (showInfo: any, showConfirm: any) => void;
-export { initialize, ModuleResult, InfoButtons, ConfirmButtons };
+export { initialize, ModalResult, InfoButtons, ConfirmButtons };

package/dist/message-box/IMessageBox.js

@@ -1,17 +1,17 @@
 import i18n from "../i18nContext";
 ;
-var ModuleResult;
-(function (ModuleResult) {
-    ModuleResult[ModuleResult["MR_OK"] = 1] = "MR_OK";
-    ModuleResult[ModuleResult["MR_CANCEL"] = 2] = "MR_CANCEL";
-    ModuleResult[ModuleResult["MR_CLOSE"] = 3] = "MR_CLOSE";
-})(ModuleResult || (ModuleResult = {}));
+var ModalResult;
+(function (ModalResult) {
+    ModalResult[ModalResult["MR_OK"] = 1] = "MR_OK";
+    ModalResult[ModalResult["MR_CANCEL"] = 2] = "MR_CANCEL";
+    ModalResult[ModalResult["MR_CLOSE"] = 3] = "MR_CLOSE";
+})(ModalResult || (ModalResult = {}));
 const InfoButtons = [
-    { label: i18n.getText('uniface.btnClose', 'Close'), type: 'primary', result: ModuleResult.MR_OK }
+    { label: i18n.getText('uniface.btnClose', 'Close'), type: 'primary', result: ModalResult.MR_OK }
 ];
 const ConfirmButtons = [
-    { label: i18n.getText('uniface.btnCancel', 'Cancel'), type: 'default', result: ModuleResult.MR_CANCEL },
-    { label: i18n.getText('uniface.btnConfirm', 'OK'), type: 'primary', result: ModuleResult.MR_OK }
+    { label: i18n.getText('uniface.btnCancel', 'Cancel'), type: 'default', result: ModalResult.MR_CANCEL },
+    { label: i18n.getText('uniface.btnConfirm', 'OK'), type: 'primary', result: ModalResult.MR_OK }
 ];
 const initialize = (showInfo, showConfirm) => {
     window.MessageBox = {
@@ -19,4 +19,4 @@ const initialize = (showInfo, showConfirm) => {
         showConfirm
     };
 };
-export { initialize, ModuleResult, InfoButtons, ConfirmButtons };
+export { initialize, ModalResult, InfoButtons, ConfirmButtons };

package/dist/message-box/MessageBoxBoard.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 
     import {onDestroy, onMount} from "svelte";
-    import {initialize, ConfirmButtons, ModuleResult} from "./IMessageBox";
+    import {initialize, ConfirmButtons, ModalResult} from "./IMessageBox";
     import Button from "../button";
     import {fade} from "svelte/transition";
     import utils from "../common/utils";
@@ -80,7 +80,7 @@
         startMove = false;
     }
 
-    const handleButtonClick = (mr: ModuleResult) => (e: MouseEvent) => {
+    const handleButtonClick = (mr: ModalResult) => (e: MouseEvent) => {
         if (resolve != null) {
             resolve(mr);
             resolve = null;
@@ -90,7 +90,7 @@
 
     const handleCloseClick = (e: MouseEvent) => {
         if (resolve != null) {
-            resolve(ModuleResult.MR_CANCEL);
+            resolve(ModalResult.MR_CANCEL);
             resolve = null;
             visible = false;
         }

package/dist/message-box/index.d.ts

@@ -1,5 +1,5 @@
 import MessageBoxBoard from "./MessageBoxBoard.svelte";
 import type IMessageBox from "./IMessageBox";
-import { ModuleResult } from "./IMessageBox";
+import { ModalResult } from "./IMessageBox";
 export default MessageBoxBoard;
-export { ModuleResult, type IMessageBox };
+export { ModalResult, type IMessageBox };

package/dist/message-box/index.js

@@ -1,4 +1,4 @@
 import MessageBoxBoard from "./MessageBoxBoard.svelte";
-import { ModuleResult } from "./IMessageBox";
+import { ModalResult } from "./IMessageBox";
 export default MessageBoxBoard;
-export { ModuleResult };
+export { ModalResult };

package/dist/number-range/NumberRange.svelte

@@ -11,6 +11,7 @@
     export let max: number | null = null;
     export let fromValue: number = null as unknown as number;
     export let toValue: number = null as unknown as number;
+    export let allowNegative: boolean = false;
 
     let className: string = '';
     let showActionIcon: boolean = true;
@@ -27,9 +28,9 @@
 </script>
 <CommonRangeEditor {compact} class="{className}" {style} {variant} {showActionIcon} clean={cleanValue}>
     <svelte:fragment slot="from">
-        <NumberInput bind:this={editor} style="width: 100%; text-align: center" placeholder="" {min} max={toValue} bind:value={fromValue}/>
+        <NumberInput bind:this={editor} style="width: 100%; text-align: center" {allowNegative} placeholder="" {min} max={toValue} bind:value={fromValue}/>
     </svelte:fragment>
     <svelte:fragment slot="to">
-        <NumberInput style="width: 100%; text-align: center" placeholder="" {max} min={fromValue} bind:value={toValue}/>
+        <NumberInput style="width: 100%; text-align: center" {allowNegative} placeholder="" {max} min={fromValue} bind:value={toValue}/>
     </svelte:fragment>
 </CommonRangeEditor>

package/dist/number-range/NumberRange.svelte.d.ts

@@ -20,6 +20,7 @@ declare const NumberRange: $$__sveltets_2_IsomorphicComponent<{
     max?: number | null;
     fromValue?: number;
     toValue?: number;
+    allowNegative?: boolean;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {

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

@@ -19,6 +19,7 @@
     export let keyField: string = "code";
     export let textField: string = "text";
     export let placeholder: string = '';
+    export let emptyText: string = '';
     export let disableOptions: Array<string> = [];
     export let hideOptions: Array<string> = [];
     export let displayMode: DisplayMode = DisplayMode.Edit;
@@ -43,7 +44,9 @@
         } else {
             removeSelectCode(key);
         }
-        onChange?.(selectedList)
+        onChange?.(selectedList);
+        editor.focus();
+
     }
 
     const getOptionItem = (code: string) => {
@@ -76,6 +79,12 @@
         e.preventDefault();
     }
 
+    const handleKeyDown = (event: KeyboardEvent) => {
+        if (event.key=='Tab') {
+            showPopup = false;
+        }
+    }
+
     const cleanData = () => {
         value = '';
         onChange?.([])
@@ -87,21 +96,28 @@
     $: mh = `height: ${menu$height > 0 ? menu$height + 'px' : 'auto'}`;
     $: textValue = generateTextValue(selectedList);
 
+    let editor: any;
+
+    $: if (showPopup) {
+        editor.focus();
+    }
+
 </script>
 
 <CommonPicker {displayMode} {variant} {style} {compact} className="multiple" dropDownIcon="uniface-icon-chevron-down"
               bind:showPopup canClean={value!=null} autoFit clean={cleanData} {textValue} {readonly} {disabled}>
 
     <div class="option-field" aria-hidden="true" on:click={()=>{showPopup = true}}>
+        <input bind:this={editor} style="position: absolute; left: 1px; width: 1px" on:keydown={handleKeyDown}/>
         <div style="width: 100%; overflow: hidden; display: flex; flex-direction: row; gap: 6px">
             {#if selectedList.length > 0 }
                 {#each selectedList as code}
                     <Tag style="flex-shrink: 0" color={tagColor} variant={tagVariant} text={getOptionItem(code)}
                          removable={!readonly && !disabled} removeHandler={removeOption(code)}/>
                 {/each}
-            {:else if placeholder != null}
+            {:else if emptyText != null || placeholder != null}
                 <div class:readonly={readonly || disabled}>
-                    <span style="color: #7f7f7f">{placeholder}</span>
+                    <span>{emptyText ?? placeholder}</span>
                 </div>
             {/if}
         </div>

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

@@ -26,6 +26,7 @@ declare const OptionsMultiSelect: $$__sveltets_2_IsomorphicComponent<{
     keyField?: string;
     textField?: string;
     placeholder?: string;
+    emptyText?: string;
     disableOptions?: Array<string>;
     hideOptions?: Array<string>;
     displayMode?: DisplayMode;

package/dist/options-select/OptionsSelect.svelte

@@ -66,13 +66,19 @@
         editor.focus();
     }
 
+    const handleKeyDown = (event: KeyboardEvent) => {
+        if (event.key=='Tab') {
+            showPopup = false;
+        }
+    }
+
 </script>
 
 <CommonPicker {displayMode} {variant} {style} {compact} dropDownIcon="uniface-icon-chevron-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}
-           class="text-editor" bind:value={textValue} on:blur on:focus/>
+    <input style="width: 100%" bind:this={editor} on:click={openPopup} {placeholder} readonly
+           class="text-editor" bind:value={textValue} on:blur on:focus on:keydown={handleKeyDown}/>
 
     <div class="options-popover" style={mh} slot="popup-panel">
         {#each options as op}

package/dist/split/Split.svelte

@@ -4,6 +4,8 @@
     export let width: number = 2;
     export let bindingPanel: any = null;
 
+    export let reverse: boolean = false;
+
     let fixed: boolean = true;
 
     let style: string;
@@ -18,24 +20,34 @@
             isDragging = true;
             document.addEventListener("mousemove", onDrag);
             document.addEventListener("mouseup", stopDrag);
+            document.body.style.cursor = direction == "horizontal" ? 'row-resize' : 'col-resize'
         } else {
             event.preventDefault();
             event.stopPropagation();
         }
     }
 
+    const calculateHeight = (event: MouseEvent) => {
+        reverse ? Math.max(5, bindingPanel.clientHeight - event.movementY) : Math.max(5, bindingPanel.clientHeight + event.movementY)
+    }
+
+    const calculateWidth = (event: MouseEvent) => {
+        return reverse ? Math.max(5, bindingPanel.clientWidth - event.movementX) : Math.max(5, bindingPanel.clientWidth + event.movementX)
+    }
+
     const onDrag = (event: MouseEvent) => {
         if (isDragging && bindingPanel) {
             if (direction === "horizontal") {
-                bindingPanel.style.height = `${Math.max(5, event.movementY + bindingPanel.clientHeight)}px`;
+                bindingPanel.style.height = `${calculateHeight(event)}px`;
             } else {
-                bindingPanel.style.width = `${Math.max(5, event.movementX + bindingPanel.clientWidth)}px`;
+                bindingPanel.style.width = `${calculateWidth(event)}px`;
             }
         }
     }
 
     const stopDrag = () => {
         isDragging = false;
+        document.body.style.cursor = 'default';
         document.removeEventListener("mousemove", onDrag);
         document.removeEventListener("mouseup", stopDrag);
     }

package/dist/split/Split.svelte.d.ts

@@ -15,6 +15,7 @@ declare const Split: $$__sveltets_2_IsomorphicComponent<{
     direction?: "horizontal" | "vertical";
     width?: number;
     bindingPanel?: any;
+    reverse?: boolean;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;

package/dist/text-editor/TextEditor.svelte

@@ -19,6 +19,8 @@
     export let displayMode: DisplayMode = DisplayMode.Edit;
     export let onChange: ((value: string) => void) | undefined = undefined;
 
+    export let autoFocus: boolean = false;
+
     let className: string = '';
     let input$: any;
     let editor: any;
@@ -31,7 +33,7 @@
 
     const clean = () => {
         value = '';
-        editor.setFocus();
+        editor.focus();
     }
 
     $: if (oldValue != value) {
@@ -39,6 +41,10 @@
         oldValue = value;
     }
 
+    $: if (editor && autoFocus) {
+        editor.focus();
+    }
+
 </script>
 <CommonEditor {displayMode} {style} {value} {suffix} {prefix} {readonly} {disabled} {variant} {compact}
               showActionIcon={!readonly && !disabled && removable && value?.length > 0} placeholder={input$['placeholder']}

package/dist/text-editor/TextEditor.svelte.d.ts

@@ -26,6 +26,7 @@ declare const TextEditor: $$__sveltets_2_IsomorphicComponent<{
     removable?: boolean | undefined;
     displayMode?: DisplayMode | undefined;
     onChange?: ((value: string) => void) | undefined | undefined;
+    autoFocus?: boolean | undefined;
 }, {
     blur: FocusEvent;
     focus: FocusEvent;

package/dist/ticatec-uniface-web.css

@@ -201,6 +201,9 @@
   --uniface-popup-hint-color: #374151;
   --uniface-context-menu-bg: #ffffff;
   --uniface-context-menu-box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
+  --uniface-box-header-bg: #F8FAFC;
+  --uniface-box-footer-bg: #F8FAFC;
+  --uniface-box-border-radius: 8px;
 }
 
 .uniface-common-picker {
@@ -1564,6 +1567,17 @@
   position: relative;
   top: 1px;
 }
+.uniface-card > div .card-action-bar.simple .action-item.disabled i {
+  cursor: default;
+  color: var(--uniface-disabled-button-text-color, #B3BCCA);
+}
+.uniface-card > div .card-action-bar.simple .action-item.disabled i:hover {
+  color: var(--uniface-disabled-button-text-color, #B3BCCA);
+}
+.uniface-card > div .card-action-bar.simple .action-item.disabled i:active {
+  position: relative;
+  top: 0;
+}
 .uniface-card > div .card-content {
   overflow: hidden;
 }
@@ -3024,6 +3038,16 @@
   flex-direction: row;
   align-items: center;
 }
+.uniface-box .box-footer {
+  width: 100%;
+  background-color: var(--uniface-box-footer-bg, #F8FAFC);
+  flex: 0 0 auto;
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
 .uniface-box .box-content {
   flex: 1 1 auto;
   position: relative;
@@ -4068,3 +4092,9 @@
   visibility: hidden;
   opacity: 0;
 }
+
+.uniface-vertical-middle-block {
+  position: relative;
+  top: 50%;
+  transform: translateY(-50%);
+}

package/package.json

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

package/dist/list-box/ListViewItem.svelte

@@ -1,6 +0,0 @@
-<script lang="ts">
-
-</script>
-<div class="listview-item">
-
-</div>

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

@@ -1,18 +0,0 @@
-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: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const ListViewItem: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type ListViewItem = InstanceType<typeof ListViewItem>;
-export default ListViewItem;