@ticatec/uniface-element 0.1.9 → 0.1.11

package/dist/app-layout/HeaderLayout.svelte

@@ -22,7 +22,6 @@
     }
 
 
-
 </script>
 
 <div style="width: 100%; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; position: relative">
@@ -30,14 +29,16 @@
         <slot name="header"></slot>
     </div>
     <div style="width: 100%; flex: 1 1 auto; overflow: hidden; display: flex; flex-direction: row;">
-        <div bind:this={sidebar}
-             style="height: 100%; flex: 0 0 auto; overflow: auto; width: {sidebarWidth}px; {minWidth} {maxWidth}">
-            <slot name="sidebar"></slot>
-        </div>
-        {#if sidebarResize}
-            <Split direction="vertical" bindingPanel={sidebar}/>
+        {#if $$slots['sidebar']}
+            <div bind:this={sidebar}
+                 style="height: 100%; flex: 0 0 auto; overflow: auto; width: {sidebarWidth}; {minWidth} {maxWidth}">
+                <slot name="sidebar"></slot>
+            </div>
+            {#if sidebarResize}
+                <Split direction="vertical" bindingPanel={sidebar}/>
+            {/if}
         {/if}
-        <div style="height: 100%; flex: 1 1 auto; overflow: auto">
+        <div style="height: 100%; flex: 1 1 auto; overflow: hidden">
             <slot></slot>
         </div>
     </div>

package/dist/base-calendar/dateUtils.js

@@ -1,4 +1,4 @@
-import dayjs from "dayjs";
+import dayjs, { isDayjs } from "dayjs";
 /**
  * 获取今日的日期，时间清空
  */

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

@@ -3,9 +3,10 @@
     import {DisplayMode} from "../common/DisplayMode";
     import iconLoading from "../assets/loading.gif";
     import OptionsBox from "./OptionsBox.svelte";
-    import {tick} from "svelte";
+    import {onMount, tick} from "svelte";
     import CommonPicker from "../common/CommonPicker.svelte";
     import type {OnChangeHandler} from "../common/OnChangeHandler";
+    import type {IsLeafDetermine} from "./isLeafDetermine";
 
     type OnSelectOption = (item: any) => Promise<Array<any>>;
 
@@ -18,12 +19,14 @@
     export let keyField: string = "code";
     export let textField: string = "text";
     export let abbrField: string = 'abbr';
+    export let childrenField: string = 'children';
     export let style: string = '';
     export let placeholder: string = "";
     export let displayMode: DisplayMode = DisplayMode.Edit;
     export let emptyText: string | null = null;
+    export let checkLeaf: IsLeafDetermine | null = null;
     export let text: string = '';
-    export let nodes: Array<Array<any>> = [];
+    export let nodes: Array<any> = [];
     export let menu$height: number = 150;
     export let onSelect: OnSelectOption;
     export let box$style: string = "";
@@ -32,22 +35,45 @@
     let oldValue = value;
     let selectedItems: Array<any> = [];
     let busy: boolean = false;
+    let list: Array<Array<any>> = [];
+
+    onMount(async () => {
+        list = [...nodes];
+    })
 
     const selectOption = (level: number) => async (item: any) => {
         value = item?.[keyField];
-        let newArr = nodes.slice(0, level + 1)
+        let newList = list.slice(0, level + 1)
         if (level == 0) {
             selectedItems = [item];
         } else {
             selectedItems = [...selectedItems.slice(0, level), item];
         }
-        busy = true;
-        let list = await (onSelect?.(item));
-        busy = false;
-        if (list && list.length > 0) {
-            nodes = [...newArr, list];
-            await tick();
-            contentPanel.scrollLeft = contentPanel.scrollWidth;
+        let isLeaf = checkLeaf == null ? false : checkLeaf(item);
+        if (!isLeaf) {
+            if (item[childrenField] == null && onSelect != null) {
+                busy = true;
+                let children = (await (onSelect(item))) ?? [];
+                busy = false;
+                item[childrenField] = children;
+                if (children.length > 0) {
+                    list = [...newList, children];
+                    await tick();
+                    contentPanel.scrollLeft = contentPanel.scrollWidth;
+                } else {
+                    showPopup = false;
+                }
+            } else {
+
+                if (item[childrenField] && item[childrenField].length > 0) {
+                    console.log('存在子节点')
+                    list = [...newList, item[childrenField]];
+                    await tick();
+                    contentPanel.scrollLeft = contentPanel.scrollWidth;
+                } else {
+                    showPopup = false;
+                }
+            }
         } else {
             showPopup = false;
         }
@@ -68,6 +94,8 @@
 
     $: mh = `height: ${menu$height}px`;
 
+    $: list = [...nodes];
+
     $: text = selectedItems && selectedItems.length > 0 ? selectedItems[selectedItems.length - 1][textField] : emptyText ?? '';
 
     const cleanData = () => {
@@ -91,7 +119,7 @@
     <div class="cascade-options-popover" style={mh} slot="popup-panel">
         <div style="width: 100%; height: 100%; position: relative">
             <div bind:this={contentPanel} style="width: 100%; height: 100%; display: flex; flex-direction: row; overflow: auto">
-                {#each nodes as node, idx}
+                {#each list as node, idx}
                     <OptionsBox options={node} {keyField} textField={abbrField} {box$style} onSelect={selectOption(idx)}
                                 selectedItem={selectedItems[idx]}/>
                 {/each}

package/dist/cascade-options-select/isLeafDetermine.d.ts

@@ -0,0 +1,4 @@
+/**
+ * 判断当前节点是否为末端节点
+ */
+export type IsLeafDetermine = (item: any) => boolean;

package/dist/cascade-options-select/isLeafDetermine.js

@@ -0,0 +1 @@
+export {};

package/dist/common-editor/DateInput.svelte

@@ -3,7 +3,7 @@
     import type {OnChangeHandler} from "../common/OnChangeHandler";
     import type {UniDate} from "../base-calendar/dateUtils";
     import {DateFormats} from "../common/DateFormats";
-    import dateUtils from "../common/date-utils";
+    import dateUtils from "../base-calendar/dateUtils";
 
     export let disabled: boolean = false;
     export let readonly: boolean = false;

package/dist/data-table/DataTable.svelte

@@ -32,7 +32,8 @@
         table = new UniDataTable(id, indicatorColumn.width);
     })
     const sortRows = (compareFun: CompareFunction, descending: boolean) => {
-        //table.(compareFun, descending);
+        let oList = list.sort(compareFun);
+        displayList = descending ? oList.reverse() : oList;
         rows = table.rows;
     }
 
@@ -46,11 +47,12 @@
 
     $: selectedRows = selectedRows ?? [];
 
+    $: displayList = [...list];
 
     $: {
         if (table && columns) {
             table.setColumns(columns)
-            table.data = list;
+            table.data = displayList;
             rows = table.rows;
             dataColumns = table.columns;
             colStyle = table.generateTemplateStyle();

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 
     import ActionsRow from "./ActionsRow.svelte";
-    import type {ActionsColumn} from "..";
+    import type ActionsColumn from "../lib/ActionsColumn";
     import type TableRow from "./TableRow";
     import {onDestroy, onMount} from "svelte";
 
@@ -13,6 +13,8 @@
 
     export let expandRow: TableRow;
 
+    export let rowHeight: number;
+
     const handleActionPanelScroll = (e: Event) => {
         scrollTop = e.target?.scrollTop;
     }
@@ -43,15 +45,18 @@
 
 </script>
 
-<div class="action-panel" bind:this={panel}  style="user-select: none; width: {actionsColumn.width}px;">
+<div class="action-panel" bind:this={panel} style="user-select: none; width: {actionsColumn.width}px;">
     <div bind:this={scrollPanel} class="scroll-panel" on:scroll|passive={handleActionPanelScroll}>
-        {#each rows as row, idx}
-            <ActionsRow {row} parentRect={rect} alternative={idx % 2 == 1} width={actionsColumn.width} actions={actionsColumn.getActions(row)}/>
-            {#if row == expandRow}
-                <div class="inline-panel" style="height: {inlineRowHeight??0}px">
-                </div>
-            {/if}
-        {/each}
+        <div>
+            {#each rows as row, idx}
+                <ActionsRow {row} {rowHeight} parentRect={rect} alternative={idx % 2 == 1} width={actionsColumn.width}
+                            actions={actionsColumn.getActions(row.data)}/>
+                {#if row == expandRow}
+                    <div class="inline-panel" style="height: {inlineRowHeight??0}px">
+                    </div>
+                {/if}
+            {/each}
+        </div>
     </div>
     <div class="bottom-mask-overlay">
         <!-- 用于匹配中间数据区域的滚动条 -->

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

@@ -1,4 +1,4 @@
-import type { ActionsColumn } from "..";
+import type ActionsColumn from "../lib/ActionsColumn";
 import type TableRow from "./TableRow";
 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> & {
@@ -19,6 +19,7 @@ declare const ActionsPanel: $$__sveltets_2_IsomorphicComponent<{
     rows: Array<TableRow>;
     inlineRowHeight?: number;
     expandRow: TableRow;
+    rowHeight: number;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;

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

@@ -6,8 +6,6 @@
     import {onDestroy, onMount, tick} from "svelte";
     import utils from "../../common/utils";
     import PopupMenu from "./PopupMenu.svelte";
-
-
     export let row: TableRow;
     export let actions: Array<RowAction>;
     export let alternative: boolean;
@@ -15,6 +13,11 @@
 
     export let width: number;
 
+    export let rowHeight: number;
+
+    let style: string;
+
+
     let actionList: Array<RowAction> = [...actions]
     let popupList: Array<RowAction> = [];
 
@@ -78,8 +81,10 @@
         checkOverflow();
     }
 
+    $: style = rowHeight== null ? '' : `height: ${rowHeight}px`
+
 </script>
-<div class="table-row" class:alternative style="position: relative; width: {width}px; height: 36px; display: block;">
+<div class="table-row" class:alternative style="position: relative; width: {width}px; display: block; {style}">
     <div bind:this={cell}
          style="width: max-content; overflow-x: auto; white-space: nowrap; top: 50%; position: relative; transform: translateY(-50%);">
         {#each actionList as action}

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

@@ -19,6 +19,7 @@ declare const ActionsRow: $$__sveltets_2_IsomorphicComponent<{
     alternative: boolean;
     parentRect: DOMRect;
     width: number;
+    rowHeight: number;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;

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

@@ -107,7 +107,7 @@
 
 </script>
 <div class="data-content-panel">
-    <FixedColumnsPanel {indicatorColumn} {expandRow} {fixedCols} {inlineRowHeight} {rows} bind:scrollTop {handleRowExpand}
+    <FixedColumnsPanel {indicatorColumn} {expandRow} {rowHeight} {fixedCols} {inlineRowHeight} {rows} bind:scrollTop {handleRowExpand}
                        {handleRowSelectChange}/>
     <div class="data-view-panel" bind:this={dataPanel} on:scroll|passive={handleDataTableScroll} on:wheel|passive={handleWheelEvent}
          style="{actionsColumn == null ? 'overflow-y: scroll' : ''}">
@@ -143,6 +143,6 @@
         {/if}
     </div>
     {#if actionsColumn}
-        <ActionPanel {expandRow} {actionsColumn} {rows} {inlineRowHeight} bind:scrollTop/>
+        <ActionPanel {expandRow} {rowHeight} {actionsColumn} {rows} {inlineRowHeight} bind:scrollTop/>
     {/if}
 </div>

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

@@ -16,6 +16,8 @@
 
     export let expandRow: TableRow;
 
+    export let rowHeight: number;
+
     let width: number = indicatorColumn.width;
 
     export let inlineRowHeight: number = 0;
@@ -32,9 +34,9 @@
 <div class="fixed-panel" style="width: {width}px">
     <div class="scroll-panel" style="overflow-y: hidden">
         <div style="top: {-scrollTop}px">
-            {#each rows??[] as row, idx}
+            {#each rows ?? [] as row, idx}
                 <FixedRow rowNo={idx+1} {row} selected={row.selected} alternative={idx % 2 == 1} {selectable} cols={fixedCols}
-                              {expandable} {handleRowExpand} {handleRowSelectChange}/>
+                          {rowHeight} {expandable} {handleRowExpand} {handleRowSelectChange}/>
                 {#if row == expandRow}
                     <div class="inline-panel" style="height: {inlineRowHeight}px">
 

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

@@ -23,6 +23,7 @@ declare const FixedColumnsPanel: $$__sveltets_2_IsomorphicComponent<{
     handleRowExpand: RowEventHandler;
     handleRowSelectChange: TableEventHandler;
     expandRow: TableRow;
+    rowHeight: number;
     inlineRowHeight?: number;
 }, {
     [evt: string]: CustomEvent<any>;

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

@@ -15,12 +15,9 @@
     export let handleRowSelectChange: RowEventHandler;
     export let selected: boolean = row.selected;
 
+    export let rowHeight: number;
 
-
-    // const handleCheckBoxClick = (e: MouseEvent) => {
-    //     e.stopPropagation();
-    //     toggleRowSectionHandler?.(row);
-    // }
+    let style: string;
 
     const showInlineData = (e: MouseEvent) => {
         handleRowExpand?.(row);
@@ -33,8 +30,10 @@
         handleRowSelectChange(row.selected);
     }
 
+    $: style = rowHeight== null ? '' : `height: ${rowHeight}px`
+
 </script>
-<div class="table-row" class:alternative >
+<div class="table-row" class:alternative {style}>
     <div class="indicator-cell">
         {#if selectable}
             <input type="checkbox" bind:checked={selected}/>

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

@@ -24,6 +24,7 @@ declare const FixedRow: $$__sveltets_2_IsomorphicComponent<{
     handleRowExpand: RowEventHandler;
     handleRowSelectChange: RowEventHandler;
     selected?: boolean;
+    rowHeight: number;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;

package/dist/date-picker/TimePanel.svelte

@@ -4,7 +4,7 @@
     import dayjs from "dayjs";
     import type {OnChangeHandler} from "../common/OnChangeHandler";
     import type {UniDate} from "../base-calendar/dateUtils";
-    import {dateUtils} from "../../lib/base-calendar";
+    import dateUtils from "../base-calendar/dateUtils";
 
     export let value: UniDate;
     export let style: string = '';

package/dist/ticatec-uniface-web.css

@@ -203,6 +203,9 @@
   --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-common-picker {
+  padding: 0 8px;
+}
 .uniface-common-picker .editor-dropdown {
   visibility: hidden;
   margin-left: 8px;
@@ -213,7 +216,6 @@
   font-size: 18px;
   color: var(--uniface-editor-text-color, #374151);
   align-self: center;
-  margin-right: 4px;
   cursor: pointer;
 }
 .uniface-common-picker .action-icon:active {
@@ -1510,6 +1512,7 @@
   height: var(--uniface-card-header-height, 54px);
   border-bottom: 1px solid var(--uniface-card-inside-border-color, #E2E8F0);
   box-sizing: border-box;
+  font-weight: 600;
 }
 .uniface-card > div .card-header.simple {
   line-height: var(--uniface-card-header-height, 54px);
@@ -3631,6 +3634,11 @@
   flex-wrap: nowrap;
   flex-direction: row;
   align-items: center;
+  background-color: var(--uniface-data-table-background-color, #ffffff);
+  height: 36px;
+}
+.uniface-data-table .table-row.alternative {
+  background-color: var(--uniface-data-table-background-color, #f7f7f7);
 }
 .uniface-data-table.row-border .table-row {
   border-bottom: 1px solid var(--uniface-data-table-row-border-color, #f0f0f0);
@@ -3748,13 +3756,19 @@
   height: 100%;
   position: relative;
   box-sizing: border-box;
-  padding: 0 4px;
+  padding: 4px;
 }
 .uniface-data-table .data-content-panel .table-row .table-data-cell > div {
   position: relative;
   top: 50%;
   transform: translateY(-50%);
 }
+.uniface-data-table .data-content-panel .table-row .table-data-cell .cell-text {
+  overflow: hidden;
+}
+.uniface-data-table .data-content-panel .table-row .table-data-cell:first-child {
+  padding-left: 8px;
+}
 .uniface-data-table .data-content-panel .table-row .table-data-cell:last-child {
   padding: 0;
 }

package/package.json

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

package/dist/common/date-utils.d.ts

@@ -1,5 +0,0 @@
-import type { UniDate } from "../calendar/dateUtils";
-declare const _default: {
-    formatDate: (d: UniDate, fmt: string) => string;
-};
-export default _default;

package/dist/common/date-utils.js

@@ -1,7 +0,0 @@
-import dayjs, { isDayjs } from "dayjs";
-const formatDate = (d, fmt) => {
-    return (d == null) ? '' : isDayjs(d) ? d.format(fmt) : dayjs(d).format(fmt);
-};
-export default {
-    formatDate
-};