@ticatec/uniface-element 0.1.9 → 0.1.10

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/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;
     }
@@ -46,7 +48,7 @@
 <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)}/>
+            <ActionsRow {row} {rowHeight} 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>

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/ticatec-uniface-web.css

@@ -1510,6 +1510,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);
@@ -3748,13 +3749,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.10",
   "description": "uniface web elements",
   "scripts": {
     "dev": "vite dev",