@ticatec/uniface-element 0.1.24 → 0.1.31

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/data-table/DataTable.svelte

@@ -21,6 +21,7 @@
     export let inlineRowHeight: number = 80;
     export let rowBorder: boolean = false;
     export let colBorder: boolean = false;
+    export let emptyIndicator: string | undefined = undefined;
 
     export let style: string = '';
 
@@ -111,7 +112,7 @@
         {/if}
 
         <ContentPanel columns={dataColumns} {orderDirection} {orderColumn} {handleWidthChange} {handleCellClick} {tabWidth} bind:rows
-                      bind:scrollTop {expandRow} {rowHeight} {list} {table} {inlineComponent} bind:inlineRowHeight
+                      bind:scrollTop {expandRow} {rowHeight} {list} {table} {inlineComponent} bind:inlineRowHeight {emptyIndicator}
                       displayHorizontalScroll={actionsColumn!=null || indicatorColumn != null || fixedCols.length > 0}
                       showVerticalScroll={actionsColumn == null}/>
     {/if}

package/dist/data-table/DataTable.svelte.d.ts

@@ -24,6 +24,7 @@ declare const DataTable: $$__sveltets_2_IsomorphicComponent<{
     inlineRowHeight?: number;
     rowBorder?: boolean;
     colBorder?: boolean;
+    emptyIndicator?: string | undefined;
     style?: string;
 }, {
     [evt: string]: CustomEvent<any>;

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

@@ -8,4 +8,8 @@ export default interface ActionsColumn {
      *
      */
     getActions: GetRowActions;
+    /**
+     * 对齐方式，默认靠左对齐
+     */
+    align?: 'left' | 'center';
 }

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

@@ -56,7 +56,7 @@
     <div bind:this={scrollPanel} class="rows-container" style="overflow-y: auto" on:scroll|passive={handleActionPanelScroll}>
         <div>
             {#each rows as row, idx}
-                <ActionsRow {row} {rowHeight} parentRect={rect} alternative={idx % 2 == 1} width={actionsColumn.width}
+                <ActionsRow {row} {rowHeight} parentRect={rect} alternative={idx % 2 == 1} width={actionsColumn.width} align={actionsColumn.align}
                             actions={actionsColumn.getActions(row.data)}/>
                 {#if row == expandRow}
                     <div class="inline-panel" style="height: {inlineRowHeight??0}px">

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

@@ -15,6 +15,8 @@
 
     export let rowHeight: number;
 
+    export let align: 'left' | 'center' | undefined;
+
     let style: string;
 
 
@@ -84,9 +86,8 @@
     $: style = rowHeight== null ? '' : `height: ${rowHeight}px`
 
 </script>
-<div class="data-row" class:alternative style="position: relative; width: {width}px; display: block; {style}">
-    <div class="action-cell" bind:this={cell}
-         style="">
+<div class="data-row" class:alternative style="position: relative;  display: block; width: {width}px; {style}">
+    <div class="action-cell" bind:this={cell} style="{align=='center' ? 'margin: 0 auto' : ''}">
         {#each actionList as action}
             <TextButton style="flex-shrink: 0; top: 0" size="mini" type="primary" label={action.label} onClick={()=>action.callback(row.data)}/>
         {/each}

package/dist/data-table/parts/ActionsRow.svelte.d.ts

@@ -20,6 +20,7 @@ declare const ActionsRow: $$__sveltets_2_IsomorphicComponent<{
     parentRect: DOMRect;
     width: number;
     rowHeight: number;
+    align: "left" | "center" | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;

package/dist/date-picker/DatePicker.svelte

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

package/dist/date-picker/DateTimePicker.svelte

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

package/dist/date-range/DateRangeEditor.svelte

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

package/dist/drawer/Drawer.svelte

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

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

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

package/dist/i18n_resources/uniface_cn_resource.d.ts

@@ -23,6 +23,7 @@ declare const langRes: {
         dataTable: {
             rowNo: string;
             actions: string;
+            emptyDataSet: string;
         };
     };
 };

package/dist/i18n_resources/uniface_cn_resource.js

@@ -30,7 +30,8 @@ const langRes = {
         },
         dataTable: {
             rowNo: "序号",
-            actions: "操作"
+            actions: "操作",
+            emptyDataSet: '空数据集'
         }
     }
 };

package/dist/i18n_resources/uniface_en_resource.d.ts

@@ -3,6 +3,7 @@ declare const langRes: {
         btnClose: string;
         btnCancel: string;
         btnConfirm: string;
+        colorPicker: string;
         calendar: {
             months: string[];
             monthsAbbr: string[];
@@ -23,6 +24,7 @@ declare const langRes: {
         dataTable: {
             rowNo: string;
             actions: string;
+            emptyDataSet: string;
         };
     };
 };

package/dist/i18n_resources/uniface_en_resource.js

@@ -3,6 +3,7 @@ const langRes = {
         btnClose: "Close",
         btnCancel: 'Cancel',
         btnConfirm: "OK",
+        colorPicker: "Pick up color",
         calendar: {
             months: [
                 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'
@@ -30,7 +31,8 @@ const langRes = {
         },
         dataTable: {
             rowNo: "Row#",
-            actions: "Actions"
+            actions: "Actions",
+            emptyDataSet: 'Empty dataset'
         }
     }
 };

package/dist/memo-editor/MemoEditor.svelte

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

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

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

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

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

package/dist/options-select/OptionsSelect.svelte

@@ -74,7 +74,7 @@
 
 </script>
 
-<CommonPicker {displayMode} {variant} {style} {compact} dropDownIcon="uniface-icon-chevron-down"
+<CommonPicker {displayMode} {variant} {style} {compact} dropDownIcon="icon_google_arrow_drop_down"
               bind:showPopup canClean={!mandatory && value!=null} autoFit clean={cleanData} {textValue} {readonly} {disabled}>
 
     <input style="width: 100%" bind:this={editor} on:click={openPopup} {placeholder} readonly
@@ -84,7 +84,7 @@
         {#each options as op}
             {#if hideOptions.indexOf(op[keyField]) < 0}
                 {#if itemRender != null}
-                    <svelte:component this={itemRender} item={op} disabled={disableOptions.indexOf(op[keyField])>-1}
+                    <svelte:component this={itemRender.component} {...itemRender.props} item={op} disabled={disableOptions.indexOf(op[keyField])>-1}
                                       on:click={handleItemClick(op)}/>
                 {:else}
                     <div class="option-item" class:disabled={disableOptions.indexOf(op[keyField])>-1} aria-hidden="true"

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

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

package/dist/tabs/Tabs.svelte

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

package/dist/tag/Tag.svelte

@@ -22,6 +22,6 @@
 <div class="uniface-tag" {style}>
     <div class="{size} {variant} {className} {colorClass}" class:removable={removable} >
         <span>{text}</span>
-        <Icon name="uniface-icon-x" clickable class="uniface-remove-icon" onClick={removeHandler}/>
+        <Icon name="icon_google_clear" clickable class="uniface-remove-icon" onClick={removeHandler}/>
     </div>
 </div>