@ticatec/uniface-element 0.1.51 → 0.1.53

package/dist/app-layout/SidebarLayout.svelte

@@ -22,8 +22,8 @@
 
 </script>
 
-<div style="width: 100%; height: 100%; box-sizing: border-box; display: flex; flex-direction: row">
-    {#if $$slots[sidebar]}
+<div style="width: 100%; height: 100%; box-sizing: border-box; display: flex; flex-direction: row; gap: 8px">
+    {#if $$slots["sidebar"]}
         <div bind:this={sidebar}
              style="height: 100%; flex: 0 0 auto; overflow: auto; border-right: 1px solid var(--uniface-plain-border-color, #f0f0f0); width: {sidebarWidth}; {maxWidth} {minWidth}">
             <slot name="sidebar"></slot>

package/dist/i18n_resources/uniface_en_resource.d.ts

@@ -26,6 +26,9 @@ declare const langRes: {
             actions: string;
             emptyDataSet: string;
         };
+        transfer: {
+            selectIndicator: string;
+        };
     };
 };
 export default langRes;

package/dist/i18n_resources/uniface_en_resource.js

@@ -33,6 +33,9 @@ const langRes = {
             rowNo: "Row#",
             actions: "Actions",
             emptyDataSet: 'Empty dataset'
+        },
+        transfer: {
+            selectIndicator: "Selected: {{selected}}/{{total}}"
         }
     }
 };

package/dist/list-box/ListBox.svelte

@@ -188,7 +188,7 @@
             {#each filteredList as item}
                 {#if selectMode === "multiple"}
                     <div class="listview-item" style="display: flex; flex-direction: row; align-items: center; gap: 8px">
-                        <CheckBox style="flex: 0 0 auto" {readonly} value={selectedList.indexOf(item) > -1}
+                        <CheckBox style="flex: 0 0 auto; margin-left: 8px" {readonly} value={selectedList.indexOf(item) > -1}
                                   onChange={handleSelectionChanged(item)}/>
                         <div style="flex: 1 1 auto; cursor: pointer" aria-hidden="true" on:click={handleSelectionChanged(item)}>
                             <svelte:component this={itemRender} {readonly} {item} {...item$props}/>

package/dist/ticatec-uniface-web.css

@@ -2736,25 +2736,30 @@ root {
   padding-left: 1em;
 }
 
-.container {
+.uniface-transfer-container {
   height: 100%;
   width: 100%;
-  display: flex;
-  flex-direction: row;
+  display: grid;
+  grid-auto-columns: 1fr 60px 1fr;
+  column-gap: 16px;
 }
-.container .header-container {
+.uniface-transfer-container .header-container {
   margin: 10px auto 10px 10px;
 }
-.container .list-container {
-  height: 300px;
-  width: 220px;
-  overflow: auto;
-  border: 1px solid #eadcdc;
+.uniface-transfer-container .list-container {
+  height: 100%;
+  flex: 1 1 auto;
+  overflow: hidden;
+  border: 1px solid var(--uniface-inside-border-color);
   box-sizing: border-box;
-  border-radius: 20px;
+  border-radius: 8px;
 }
-.container .icon-button-container {
-  margin: auto 20px;
+.uniface-transfer-container .icon-button-container {
+  display: flex;
+  row-gap: 24px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
 }
 
 :root {

package/dist/transfer/Transfer.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+    import ListBox from "../list-box";
+    import IconButton from "../button/IconButton.svelte";
+
+    import type {FunFilter} from "../list-box";
+    import type {TransferData} from "./types";
+    import i18n from "@ticatec/i18n";
+
+
+
+    export let style: string = '';
+    export let sourceList:Array<any>;
+    export let sourceTitle: string;
+    export let targetList:Array<any>;
+    export let targetTitle: string;
+
+    export let itemRender: any = null;
+    export let filter: FunFilter = null;
+    export let transferData: TransferData = null;
+    export let header$style: string = '';
+    export let footer$style: string = 'width: 100%; background-color: #f0f0f0; padding: 2px 6px; text-align: right; box-sizing: border-box';
+
+
+    let sourceSelectedList = [];
+    let targetSelectedList = [];
+
+    const moveToTarget = async () => {
+        if (sourceSelectedList.length > 0 && await transferData?.(sourceSelectedList, "right")) {
+            targetList = [...targetList, ...sourceSelectedList];
+            sourceList = sourceList.filter(item => sourceSelectedList.indexOf(item) === -1);
+            sourceSelectedList = [];
+        }
+    }
+
+    const moveToSource = async () => {
+        if (targetSelectedList.length > 0 && await transferData?.(targetSelectedList, "left")) {
+            sourceList = [...sourceList, ...targetSelectedList];
+            targetList = targetList.filter(item => targetSelectedList.indexOf(item) === -1);
+            targetSelectedList = [];
+        }
+    }
+</script>
+
+<div class="uniface-transfer-container">
+    <ListBox class="list-container" title={sourceTitle} {filter} style="{style}; grid-column: 1/2" list={sourceList} selectMode="multiple"
+             bind:selectedList={sourceSelectedList} {itemRender}>
+        <div slot="footer" style={footer$style}>
+            <span>{i18n.getText('uniface.transfer.selectIndicator', {selected: sourceSelectedList.length, total: sourceList.length})}</span>
+        </div>
+    </ListBox>
+    <div class="icon-button-container" style="grid-column: 2/3;">
+        <IconButton onClick={moveToSource} type="primary" disabled={targetSelectedList.length === 0}>
+            <i class="icon_google_navigate_before"></i>
+        </IconButton>
+        <IconButton onClick={moveToTarget} type="primary" disabled={sourceSelectedList.length === 0}>
+            <i class="icon_google_navigate_next"></i>
+        </IconButton>
+    </div>
+    <ListBox class="list-container" title={targetTitle} style="{style}; grid-column: 3/4" {filter} list={targetList} selectMode="multiple"
+             bind:selectedList={targetSelectedList} {itemRender} }>
+        <div slot="footer" style={footer$style}>
+            <span>{i18n.getText('uniface.transfer.selectIndicator', {selected: targetSelectedList.length, total: targetList.length})}</span>
+        </div>
+    </ListBox>
+</div>

package/dist/{transfer-field/TransferField.svelte.d.ts → transfer/Transfer.svelte.d.ts}

@@ -1,5 +1,5 @@
-import { SvelteComponent } from "svelte";
-import type { FunFilter } from "./types";
+import type { FunFilter } from "../list-box";
+import type { TransferData } from "./types";
 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;
@@ -13,24 +13,19 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const TransferField: $$__sveltets_2_IsomorphicComponent<{
-    height?: string;
-    width?: string;
+declare const Transfer: $$__sveltets_2_IsomorphicComponent<{
     style?: string;
-    sourceList?: any[];
-    disabled?: boolean;
-    itemRender?: SvelteComponent;
+    sourceList: Array<any>;
+    sourceTitle: string;
+    targetList: Array<any>;
+    targetTitle: string;
+    itemRender?: any;
     filter?: FunFilter;
-    sourceSelectedList?: any[];
+    transferData?: TransferData;
     header$style?: string;
     footer$style?: string;
-    echoValue?: any[];
-    echoData: () => void;
 }, {
     [evt: string]: CustomEvent<any>;
-}, {
-    sourceHeader: {};
-    targetHeader: {};
-}, {}, string>;
-type TransferField = InstanceType<typeof TransferField>;
-export default TransferField;
+}, {}, {}, string>;
+type Transfer = InstanceType<typeof Transfer>;
+export default Transfer;

package/dist/transfer/index.d.ts

@@ -0,0 +1,4 @@
+import Transfer from "./Transfer.svelte";
+import type { TransferData } from "./types";
+export default Transfer;
+export type { TransferData };

package/dist/transfer/index.js

@@ -0,0 +1,2 @@
+import Transfer from "./Transfer.svelte";
+export default Transfer;

package/dist/transfer/types.d.ts

@@ -0,0 +1 @@
+export type TransferData = (list: Array<any>, direction: "left" | "right") => Promise<boolean>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ticatec/uniface-element",
-  "version": "0.1.51",
+  "version": "0.1.53",
   "description": "uniface web elements",
   "scripts": {
     "dev": "vite dev",
@@ -320,6 +320,10 @@
       "types": "./dist/time-editor/index.d.ts",
       "import": "./dist/time-editor/index.js"
     },
+    "./Transfer": {
+      "types": "./dist/transfer/index.d.ts",
+      "import": "./dist/transfer/index.js"
+    },
     "./UnitNumberEditor": {
       "types": "./dist/unit-number-editor/index.d.ts",
       "import": "./dist/unit-number-editor/index.js"

package/dist/transfer-field/TransferField.svelte

@@ -1,91 +0,0 @@
-<script lang="ts">
-    import ListBox from "../list-box";
-    import IconButton from "../button";
-    import {onMount, SvelteComponent} from "svelte";
-    import type {FunFilter} from "./types";
-
-    export let height: string = '';
-    export let width: string = '';
-    export let style: string = '';
-    export let sourceList = [];
-    export let disabled: boolean = false;
-    export let itemRender: SvelteComponent = null;
-    export let filter: FunFilter = null;
-    export let sourceSelectedList = [];
-    export let header$style: string = '';
-    export let footer$style: string = 'width: 100%; background-color: #f0f0f0; padding: 2px 6px; text-align: right; box-sizing: border-box';
-    export let echoValue = [];
-    export let echoData: () => void;
-
-    let targetList = [];
-    let targetSelectedList = [];
-    let sourceSelectedItem = null;
-    let targetSelectedItem = null;
-
-    const moveToTarget = () => {
-        if (sourceSelectedList.length > 0) {
-            targetList = [...targetList, ...sourceSelectedList];
-            sourceList = sourceList.filter(item => sourceSelectedList.indexOf(item) === -1);
-            sourceSelectedList = [];
-        } else if (sourceSelectedItem) {
-            targetList = [...targetList, sourceSelectedItem];
-            sourceList = sourceList.filter(item => item !== sourceSelectedItem);
-            sourceSelectedItem = null;
-        }
-    }
-
-    const moveToSource = () => {
-        if (targetSelectedList.length > 0) {
-            sourceList = [...sourceList, ...targetSelectedList];
-            targetList = targetList.filter(item => targetSelectedList.indexOf(item) === -1);
-            targetSelectedList = [];
-        } else if (targetSelectedItem) {
-            sourceList = [...sourceList, targetSelectedItem];
-            targetList = targetList.filter(item => item !== targetSelectedItem);
-            targetSelectedItem = null;
-        }
-    }
-
-    onMount(() => {
-        if (echoValue.length > 0) {
-            targetList = [...targetList, ...echoValue];
-            sourceList = sourceList.filter(item => echoValue.indexOf(item) === -1);
-        }
-    })
-
-    $: {
-        if (echoData) {
-            echoData();
-        }
-    }
-
-</script>
-
-<div class="container" style="height: {height}px; width: {width}px">
-    <ListBox class="list-container" {filter} {style} list={sourceList} selectMode="multiple" bind:selectedList={sourceSelectedList}
-             {itemRender} bind:selectedItem={sourceSelectedItem}>
-        <div slot="header" style={header$style}>
-            <slot name="sourceHeader"></slot>
-        </div>
-        <div slot="footer" style={footer$style}>
-            <span>选中：{sourceSelectedList.length}/{sourceList.length}</span>
-        </div>
-    </ListBox>
-    <div class="icon-button-container">
-        <IconButton on:click={moveToSource} type="primary" disabled={targetSelectedList.length === 0}>
-            <i class="uniface-icon-chevron-left"></i>
-        </IconButton>
-        <IconButton on:click={moveToTarget} type="primary" disabled={sourceSelectedList.length === 0}>
-            <i class="uniface-icon-chevron-right"></i>
-        </IconButton>
-    </div>
-    <ListBox class="list-container" {style} {filter} list={targetList} selectMode="multiple" bind:selectedList={targetSelectedList}
-             {itemRender} bind:selectedItem={targetSelectedItem}>
-        <div slot="header" style={header$style}>
-            <slot name="targetHeader"></slot>
-        </div>
-        <div slot="footer" style={footer$style}>
-            <span>选中：{targetSelectedList.length}/{targetList.length}</span>
-        </div>
-    </ListBox>
-</div>

package/dist/transfer-field/index.d.ts

@@ -1,2 +0,0 @@
-import TransferField from "./TransferField.svelte";
-export default TransferField;

package/dist/transfer-field/index.js

@@ -1,2 +0,0 @@
-import TransferField from "./TransferField.svelte";
-export default TransferField;

package/dist/transfer-field/types.d.ts

@@ -1,6 +0,0 @@
-export interface LoadResult {
-    hasMore: boolean;
-    list: Array<any>;
-}
-export type FunFilter = (item: any, text: string) => boolean;
-export type LazyLoader = (text: string) => Promise<LoadResult>;