@ibiz-template/vue3-components 0.7.40 → 0.7.41-alpha.1

package/es/common/map-chart-user/map-chart-user.util.mjs

@@ -57,7 +57,7 @@ const getCssVarByName = (name) => {
 const getPointStaticOption = (params) => {
   const { pointSymbol } = params;
   const ns = useNamespace("map-chart-user");
-  const textColor = getCssVarByName(ns.cssVarName("color-text-1"));
+  const textColor = getCssVarByName(ns.cssVarName("color-danger"));
   const fontSize = getCssVarByName(ns.cssVarName("font-size-header-4"));
   const options = {
     type: "scatter",

package/es/control/app-menu/app-menu.d.ts

@@ -1,7 +1,7 @@
 import { Namespace } from '@ibiz-template/core';
 import { IAppMenu } from '@ibiz/model-core';
-import { PropType, Ref } from 'vue';
-import { AppMenuController, IControlProvider } from '@ibiz-template/runtime';
+import { Ref, PropType } from 'vue';
+import { IControlProvider, AppMenuController } from '@ibiz-template/runtime';
 import './app-menu.scss';
 export declare const AppMenuControl: import("vue").DefineComponent<{
     /**

package/es/control/app-menu/app-menu.mjs

@@ -1,6 +1,6 @@
 import { isVNode, resolveComponent, createVNode, ref, watch, onUnmounted, computed, onMounted, nextTick, mergeProps, defineComponent } from 'vue';
 import { RuntimeError, showTitle, findRecursiveChild } from '@ibiz-template/core';
-import { useControlController, useNamespace } from '@ibiz-template/vue3-util';
+import { useControlController, useNamespace, route2routePath } from '@ibiz-template/vue3-util';
 import { createUUID } from 'qx-util';
 import { AppMenuController, formatSeparator, ViewCallTag } from '@ibiz-template/runtime';
 import { useRoute } from 'vue-router';
@@ -259,24 +259,32 @@ const AppMenuControl = /* @__PURE__ */ defineComponent({
     const calcCurMenu = () => {
       const allItems = c.getAllItems();
       return allItems.find((item) => {
-        if (item.itemType === "MENUITEM" && item.appFuncId) {
+        var _a;
+        if (item.itemType !== "MENUITEM" || !item.appFuncId)
+          return false;
+        if (ibiz.config.appMenu.echoMode === "VIEW") {
           const app = ibiz.hub.getApp(item.appId);
-          if (!app) {
+          if (!app)
             return false;
-          }
           const func = app.getAppFunc(item.appFuncId);
-          if (func && func.appViewId && route.params.view2) {
+          if (func && func.appViewId && (route == null ? void 0 : route.params.view2)) {
             return func.appViewId.split(".")[1] === route.params.view2;
           }
+        } else {
+          if (!route) {
+            return false;
+          }
+          const routePath = route2routePath(route);
+          if (routePath.pathNodes.length > 1)
+            return item.id === ((_a = routePath.pathNodes[1].params) == null ? void 0 : _a.srfmenuitem);
         }
         return false;
       });
     };
     const onClick = async (id, event) => {
       const activeMenu = calcCurMenu();
-      if (activeMenu && activeMenu.id === id) {
+      if (activeMenu && activeMenu.id === id)
         return;
-      }
       defaultActive.value = id;
       const menu = c.getAllItems().find((m) => m.id === id);
       if ((menu == null ? void 0 : menu.itemType) === "RAWITEM" || c.runMode === "DESIGN") {
@@ -285,7 +293,7 @@ const AppMenuControl = /* @__PURE__ */ defineComponent({
       await c.onClickMenuItem(id, event);
     };
     if (c.runMode !== "DESIGN") {
-      watch(() => route.params.view2, (newVal, oldVal) => {
+      watch(() => route == null ? void 0 : route.params.view2, (newVal, oldVal) => {
         if (newVal !== oldVal && ibiz.config.appMenu.enableEcho) {
           const activeMenu = calcCurMenu();
           defaultActive.value = activeMenu ? activeMenu.id : "";
@@ -301,7 +309,7 @@ const AppMenuControl = /* @__PURE__ */ defineComponent({
       const defaultActiveMenuItem = allItems.find((item) => {
         return item.openDefault && !item.hidden;
       });
-      if (defaultActiveMenuItem && !route.params.view2 && !route.fullPath.includes("404")) {
+      if (defaultActiveMenuItem && !(route == null ? void 0 : route.params.view2) && !(route == null ? void 0 : route.fullPath.includes("404"))) {
         defaultActive.value = defaultActiveMenuItem.id;
         onClick(defaultActive.value);
       } else if (ibiz.config.appMenu.enableEcho) {

package/es/control/calendar/calendar.mjs

@@ -546,13 +546,17 @@ const CalendarControl = /* @__PURE__ */ defineComponent({
           const {
             data
           } = value;
-          this.c.onRowClick(data[0]);
+          const item = data[0];
+          if (item)
+            this.c.onRowClick(item);
         },
         "onEventDblClick": (value) => {
           const {
             data
           } = value;
-          this.c.onDbRowClick(data[0]);
+          const item = data[0];
+          if (item)
+            this.c.onDbRowClick(item);
         }
       }, _isSlot(slots) ? slots : {
         default: () => [slots]

package/es/control/calendar/components/calendar-daily/use-calendar-daily.mjs

@@ -125,7 +125,7 @@ const useCalendarDaily = (props, emit) => {
       const difference = new Date(endTime).getTime() - new Date(startTime).getTime();
       height = Math.floor(difference / (1e3 * 60));
     }
-    if (height < 3) {
+    if (height < 30) {
       height = "auto";
     }
     return height;

package/es/control/calendar/components/calendar-week/use-calendar-week.mjs

@@ -151,7 +151,7 @@ const useCalendarWeek = (props, emit) => {
           const width = "".concat(percentage, "%");
           const styleLeft = "".concat(index * percentage, "%");
           Object.assign(tempEventContent, { width, styleLeft });
-          let height = 3;
+          let height = "auto";
           let styleTop = 60;
           let timeRange = "";
           if (isToday(event.beginTime, event.endTime)) {
@@ -299,8 +299,8 @@ const useCalendarWeek = (props, emit) => {
       const difference = new Date(endTime).getTime() - new Date(startTime).getTime();
       height = Math.floor(difference / (1e3 * 60));
     }
-    if (height < 3) {
-      height = 3;
+    if (height < 30) {
+      height = "auto";
     }
     return height;
   };

package/es/control/drbar/drbar.controller.mjs

@@ -301,6 +301,7 @@ class DRBarController extends ControlController {
    * @memberof DRBarController
    */
   initDRBarItems() {
+    var _a;
     const { dedrctrlItems, dedrbarGroups } = this.model;
     const drBarItems = [];
     if (!this.state.hideEditItem) {
@@ -322,7 +323,7 @@ class DRBarController extends ControlController {
         caption,
         disabled: false,
         sysImage: editItemSysImage,
-        fullPath: this.router.currentRoute.value.fullPath
+        fullPath: (_a = this.router) == null ? void 0 : _a.currentRoute.value.fullPath
       });
       this.state.defaultItem = uniqueTag;
     }
@@ -354,11 +355,11 @@ class DRBarController extends ControlController {
         });
       } else {
         dedrbarGroups.forEach((group) => {
-          var _a;
+          var _a2;
           const groupItems = dedrctrlItems.filter(
             (item) => item.dedrbarGroupId === group.id
           );
-          if (groupItems.length > 1 || ((_a = this.controlParams) == null ? void 0 : _a.singleitemgroup) === "true" && groupItems.length === 1) {
+          if (groupItems.length > 1 || ((_a2 = this.controlParams) == null ? void 0 : _a2.singleitemgroup) === "true" && groupItems.length === 1) {
             let itemCaption = group.caption;
             if (group.capLanguageRes) {
               itemCaption = ibiz.i18n.t(

package/es/control/drtab/drtab-control.util.mjs

@@ -1,5 +1,5 @@
 import { ref, watch, watchEffect, onUnmounted } from 'vue';
-import { defaultNamespace } from '../../node_modules/.pnpm/@ibiz-template_core@0.7.40_axios@1.6.8_lodash-es@4.17.21_qs@6.11.2_qx-util@0.4.8_ramda@0.29.1/node_modules/@ibiz-template/core/out/utils/namespace/namespace.mjs';
+import { defaultNamespace } from '../../node_modules/.pnpm/@ibiz-template_core@0.7.41-alpha.1_axios@1.6.8_lodash-es@4.17.21_qs@6.11.2_qx-util@0.4.8_ramda@0.29.1/node_modules/@ibiz-template/core/out/utils/namespace/namespace.mjs';
 
 "use strict";
 function useAppDRTab(c, controlRef, counterData) {

package/es/control/grid/grid/grid-control.util.mjs

@@ -509,11 +509,57 @@ function useAppGridBase(c, props) {
     }
     return state.rows.map((row) => row.data);
   });
+  const calcGroupColumns = (groupColumn) => {
+    const result = { ...groupColumn };
+    const columns = [];
+    const degridColumns = groupColumn.degridColumns || [];
+    degridColumns.forEach((column) => {
+      var _a, _b;
+      if (column.columnType === "GROUPGRIDCOLUMN") {
+        const children = calcGroupColumns(column);
+        if (children.degridColumns && children.degridColumns.length) {
+          columns.push(children);
+        }
+      } else {
+        const columnState = c.state.columnStates.find(
+          (item) => item.key === column.codeName
+        );
+        if (columnState && !columnState.hidden) {
+          const columnModel = ((_a = c.fieldColumns[columnState.key]) == null ? void 0 : _a.model) || ((_b = c.uaColumns[columnState.key]) == null ? void 0 : _b.model);
+          if (columnModel) {
+            columns.push(columnModel);
+          }
+        }
+      }
+    });
+    result.degridColumns = columns;
+    return result;
+  };
   const renderColumns = computed(() => {
+    const columns = [];
     if (c.isMultistageHeader) {
-      return c.model.degridColumns || [];
+      const degridColumns = c.model.degridColumns || [];
+      degridColumns.forEach((column) => {
+        var _a, _b;
+        if (column.columnType === "GROUPGRIDCOLUMN") {
+          const groupColumn = calcGroupColumns(column);
+          if (groupColumn.degridColumns && groupColumn.degridColumns.length) {
+            columns.push(groupColumn);
+          }
+        } else {
+          const columnState = c.state.columnStates.find(
+            (item) => item.key === column.codeName
+          );
+          if (columnState && !columnState.hidden) {
+            const columnModel = ((_a = c.fieldColumns[columnState.key]) == null ? void 0 : _a.model) || ((_b = c.uaColumns[columnState.key]) == null ? void 0 : _b.model);
+            if (columnModel) {
+              columns.push(columnModel);
+            }
+          }
+        }
+      });
+      return columns;
     }
-    const columns = [];
     c.state.columnStates.forEach((item) => {
       var _a, _b;
       if (item.hidden) {

package/es/control/grid/row-edit-popover/row-edit-popover.css

@@ -1 +1 @@
-.ibiz-row-edit-popover{position:absolute;z-index:2;padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base);background-color:var(--ibiz-control-grid-row-edit-bg-color)}.ibiz-row-edit-popover.is-hidden{top:-9999px;left:-9999px;z-index:-9999}.ibiz-row-edit-popover::before{position:absolute;top:0;left:-50px;width:0;height:0;content:"";border-color:transparent var(--ibiz-control-grid-row-edit-bg-color) transparent transparent;border-style:solid;border-width:0 50px 50px 0}.ibiz-row-edit-popover::after{position:absolute;top:0;right:-50px;width:0;height:0;content:"";border-color:transparent transparent transparent var(--ibiz-control-grid-row-edit-bg-color);border-style:solid;border-width:0 0 50px 50px}.row-edit-popover__placeholder{height:50px}
+.ibiz-row-edit-popover{position:absolute;z-index:2;padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base);white-space:nowrap;background-color:var(--ibiz-control-grid-row-edit-bg-color)}.ibiz-row-edit-popover.is-hidden{top:-9999px;left:-9999px;z-index:-9999}.ibiz-row-edit-popover::before{position:absolute;top:0;left:-50px;width:0;height:0;content:"";border-color:transparent var(--ibiz-control-grid-row-edit-bg-color) transparent transparent;border-style:solid;border-width:0 50px 50px 0}.ibiz-row-edit-popover::after{position:absolute;top:0;right:-50px;width:0;height:0;content:"";border-color:transparent transparent transparent var(--ibiz-control-grid-row-edit-bg-color);border-style:solid;border-width:0 0 50px 50px}.row-edit-popover__placeholder{height:50px}

package/es/control/kanban/kanban.mjs

@@ -235,7 +235,12 @@ const KanbanControl = /* @__PURE__ */ defineComponent({
       const findIndex = c.state.selectedData.findIndex((data) => {
         return data.srfkey === item.srfkey;
       });
-      const cardClass = [ns.b("item"), ns.is("selected", findIndex !== -1), ns.is("disabled", disabled.value)];
+      const cardClass = [
+        ns.b("item"),
+        ns.is("selected", findIndex !== -1),
+        // 数据更新时不允许拖拽，鼠标变为禁用
+        ns.is("disabled", c.state.draggable && c.state.updating)
+      ];
       const cardStyle = {};
       if (c.model.cardWidth) {
         cardStyle.width = "".concat(c.model.cardWidth, "px");

package/es/editor/check-box-list/ibiz-checkbox-list/ibiz-checkbox-list.d.ts

@@ -5,6 +5,7 @@ import './ibiz-checkbox-list.scss';
  *
  * @description 使用el-checkbox-group组件，通过选项框组选择多项数据，该组件通常用于绘制代码表。支持编辑器类型包含：`选项框列表`
  * @primary
+ * @editorparams {name:rowNumber,parameterType:number | undefined,description:设置每行呈现的多选框个数}
  * @ignoreprops autoFocus | overflowMode
  * @ignoreemits blur | focus | enter
  */

package/es/editor/data-picker/ibiz-transfer-picker/components/index.d.ts

@@ -0,0 +1 @@
+export * from './transfer/transfer';

package/es/editor/data-picker/ibiz-transfer-picker/components/index.mjs

@@ -0,0 +1,3 @@
+export { TransferSelect } from './transfer/transfer.mjs';
+
+"use strict";

package/es/editor/data-picker/ibiz-transfer-picker/components/transfer/icon.d.ts

@@ -0,0 +1,2 @@
+export declare const arrowLeft: () => JSX.Element;
+export declare const arrowRight: () => JSX.Element;

package/es/editor/data-picker/ibiz-transfer-picker/components/transfer/icon.mjs

@@ -0,0 +1,19 @@
+import { createVNode } from 'vue';
+
+"use strict";
+const arrowLeft = () => createVNode("svg", {
+  "xmlns": "http://www.w3.org/2000/svg",
+  "viewBox": "0 0 1024 1024"
+}, [createVNode("path", {
+  "fill": "currentColor",
+  "d": "M609.408 149.376 277.76 489.6a32 32 0 0 0 0 44.672l331.648 340.352a29.12 29.12 0 0 0 41.728 0 30.592 30.592 0 0 0 0-42.752L339.264 511.936l311.872-319.872a30.592 30.592 0 0 0 0-42.688 29.12 29.12 0 0 0-41.728 0z"
+}, null)]);
+const arrowRight = () => createVNode("svg", {
+  "xmlns": "http://www.w3.org/2000/svg",
+  "viewBox": "0 0 1024 1024"
+}, [createVNode("path", {
+  "fill": "currentColor",
+  "d": "M340.864 149.312a30.592 30.592 0 0 0 0 42.752L652.736 512 340.864 831.872a30.592 30.592 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z"
+}, null)]);
+
+export { arrowLeft, arrowRight };

package/es/editor/data-picker/ibiz-transfer-picker/components/transfer/interface.d.ts

@@ -0,0 +1,99 @@
+import type { ExtractPropTypes, h as H, PropType, VNode } from 'vue';
+export declare const UPDATE_MODEL_EVENT = "update:modelValue";
+export declare const CHANGE_EVENT = "change";
+export declare const INPUT_EVENT = "input";
+export declare const LEFT_CHECK_CHANGE_EVENT = "leftCheckChange";
+export declare const RIGHT_CHECK_CHANGE_EVENT = "rightCheckChange";
+export declare const LEFT_AC_SEARCH = "leftAcSearch";
+export type TransferKey = string | number;
+export type TransferDirection = 'left' | 'right';
+export type renderContent = (h: typeof H, option: IData) => VNode | VNode[];
+export interface TransferFormat {
+    noChecked?: string;
+    hasChecked?: string;
+}
+export interface TransferPropsAlias {
+    label?: string;
+    key?: string;
+    disabled?: string;
+}
+export interface TransferCheckedState {
+    leftChecked: TransferKey[];
+    rightChecked: TransferKey[];
+}
+export declare const transferCheckedChangeFn: (value: TransferKey[], movedKeys?: TransferKey[]) => boolean;
+export declare const transferProps: {
+    data: {
+        type: PropType<import("@ibiz-template/core").IApiData>;
+        default: () => IData;
+    };
+    titles: {
+        type: PropType<string[]>;
+        default: () => Array<string>;
+    };
+    buttonTexts: {
+        type: PropType<string[]>;
+        default: () => Array<string>;
+    };
+    filterPlaceholder: StringConstructor;
+    filterMethod: {
+        type: PropType<(query: string, item: IData) => boolean>;
+    };
+    rightSearchMethod: {
+        type: PropType<(query: string) => IData[]>;
+    };
+    leftDefaultChecked: {
+        type: PropType<TransferKey[]>;
+        default: () => Array<TransferKey>;
+    };
+    rightDefaultChecked: {
+        type: PropType<TransferKey[]>;
+        default: () => Array<TransferKey>;
+    };
+    renderContent: {
+        type: PropType<renderContent>;
+    };
+    modelValue: {
+        type: PropType<TransferKey[]>;
+        default: () => Array<TransferKey>;
+    };
+    format: {
+        type: PropType<TransferFormat>;
+        default: () => TransferFormat;
+    };
+    filterable: BooleanConstructor;
+    props: {
+        type: PropType<TransferPropsAlias>;
+        default: () => TransferPropsAlias;
+    };
+    targetOrder: {
+        type: StringConstructor;
+        values: string[];
+        default: string;
+    };
+    enableRemoteSearch: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    validateEvent: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+};
+export type TransferProps = ExtractPropTypes<typeof transferProps>;
+export declare const transferEmits: {
+    change: (value: TransferKey[], direction: TransferDirection, movedKeys: TransferKey[]) => boolean;
+    "update:modelValue": (value: TransferKey[]) => boolean;
+    leftCheckChange: (value: TransferKey[], movedKeys?: TransferKey[]) => boolean;
+    rightCheckChange: (value: TransferKey[], movedKeys?: TransferKey[]) => boolean;
+    leftAcSearch: (query: string) => string;
+};
+export type TransferEmits = typeof transferEmits;

package/es/editor/data-picker/ibiz-transfer-picker/components/transfer/interface.mjs

@@ -0,0 +1,89 @@
+import { isArray, isNil } from 'lodash-es';
+
+"use strict";
+const UPDATE_MODEL_EVENT = "update:modelValue";
+const CHANGE_EVENT = "change";
+const INPUT_EVENT = "input";
+const LEFT_CHECK_CHANGE_EVENT = "leftCheckChange";
+const RIGHT_CHECK_CHANGE_EVENT = "rightCheckChange";
+const LEFT_AC_SEARCH = "leftAcSearch";
+const transferCheckedChangeFn = (value, movedKeys) => [value, movedKeys].every(isArray) || isArray(value) && isNil(movedKeys);
+const transferProps = {
+  data: {
+    type: Array,
+    default: () => []
+  },
+  titles: {
+    type: Array,
+    default: () => []
+  },
+  buttonTexts: {
+    type: Array,
+    default: () => []
+  },
+  filterPlaceholder: String,
+  filterMethod: {
+    type: Function
+  },
+  rightSearchMethod: {
+    type: Function
+  },
+  leftDefaultChecked: {
+    type: Array,
+    default: () => []
+  },
+  rightDefaultChecked: {
+    type: Array,
+    default: () => []
+  },
+  renderContent: {
+    type: Function
+  },
+  modelValue: {
+    type: Array,
+    default: () => []
+  },
+  format: {
+    type: Object,
+    default: () => ({})
+  },
+  filterable: Boolean,
+  props: {
+    type: Object,
+    default: () => ({
+      label: "label",
+      key: "key",
+      disabled: "disabled"
+    })
+  },
+  targetOrder: {
+    type: String,
+    values: ["original", "push", "unshift"],
+    default: "original"
+  },
+  enableRemoteSearch: {
+    type: Boolean,
+    default: false
+  },
+  validateEvent: {
+    type: Boolean,
+    default: true
+  },
+  loading: {
+    type: Boolean,
+    default: false
+  },
+  readonly: {
+    type: Boolean,
+    default: false
+  }
+};
+const transferEmits = {
+  [CHANGE_EVENT]: (value, direction, movedKeys) => [value, movedKeys].every(isArray) && ["left", "right"].includes(direction),
+  [UPDATE_MODEL_EVENT]: (value) => isArray(value),
+  [LEFT_CHECK_CHANGE_EVENT]: transferCheckedChangeFn,
+  [RIGHT_CHECK_CHANGE_EVENT]: transferCheckedChangeFn,
+  [LEFT_AC_SEARCH]: (query) => query
+};
+
+export { CHANGE_EVENT, INPUT_EVENT, LEFT_AC_SEARCH, LEFT_CHECK_CHANGE_EVENT, RIGHT_CHECK_CHANGE_EVENT, UPDATE_MODEL_EVENT, transferCheckedChangeFn, transferEmits, transferProps };

package/es/editor/data-picker/ibiz-transfer-picker/components/transfer/transfer-util.d.ts

@@ -0,0 +1,17 @@
+import type { ComputedRef, SetupContext } from 'vue';
+import type { TransferCheckedState, TransferEmits, TransferKey, TransferProps, TransferPropsAlias } from './interface';
+export declare const usePropsAlias: (props: {
+    props: TransferPropsAlias;
+}) => ComputedRef;
+export declare const useComputedData: (props: TransferProps) => {
+    sourceData: ComputedRef;
+    targetData: ComputedRef;
+};
+export declare const useCheckedChange: (checkedState: TransferCheckedState, emit: SetupContext<TransferEmits>['emit']) => {
+    onSourceCheckedChange: (val: TransferKey[], movedKeys?: TransferKey[]) => void;
+    onTargetCheckedChange: (val: TransferKey[], movedKeys?: TransferKey[]) => void;
+};
+export declare const useMove: (props: TransferProps, checkedState: TransferCheckedState, emit: SetupContext<TransferEmits>['emit']) => {
+    addToLeft: () => void;
+    addToRight: () => void;
+};

package/es/editor/data-picker/ibiz-transfer-picker/components/transfer/transfer-util.mjs

@@ -0,0 +1,103 @@
+import { computed } from 'vue';
+import { LEFT_CHECK_CHANGE_EVENT, RIGHT_CHECK_CHANGE_EVENT, UPDATE_MODEL_EVENT, CHANGE_EVENT } from './interface.mjs';
+
+"use strict";
+const usePropsAlias = (props) => {
+  const initProps = {
+    label: "label",
+    key: "key",
+    disabled: "disabled"
+  };
+  return computed(() => ({
+    ...initProps,
+    ...props.props
+  }));
+};
+const useComputedData = (props) => {
+  const propsAlias = usePropsAlias(props);
+  const dataObj = computed(
+    () => props.data.reduce(
+      // eslint-disable-next-line no-return-assign, no-param-reassign
+      (o, cur) => (o[cur[propsAlias.value.key]] = cur) && o,
+      {}
+    )
+  );
+  const sourceData = computed(
+    () => props.data.filter(
+      (item) => !props.modelValue.includes(item[propsAlias.value.key])
+    )
+  );
+  const targetData = computed(() => {
+    if (props.targetOrder === "original") {
+      return props.data.filter(
+        (item) => props.modelValue.includes(item[propsAlias.value.key])
+      );
+    }
+    return props.modelValue.reduce((arr, cur) => {
+      const val = dataObj.value[cur];
+      if (val) {
+        arr.push(val);
+      }
+      return arr;
+    }, []);
+  });
+  return {
+    sourceData,
+    targetData
+  };
+};
+const useCheckedChange = (checkedState, emit) => {
+  const onSourceCheckedChange = (val, movedKeys) => {
+    checkedState.leftChecked = val;
+    if (!movedKeys)
+      return;
+    emit(LEFT_CHECK_CHANGE_EVENT, val, movedKeys);
+  };
+  const onTargetCheckedChange = (val, movedKeys) => {
+    checkedState.rightChecked = val;
+    if (!movedKeys)
+      return;
+    emit(RIGHT_CHECK_CHANGE_EVENT, val, movedKeys);
+  };
+  return {
+    onSourceCheckedChange,
+    onTargetCheckedChange
+  };
+};
+const useMove = (props, checkedState, emit) => {
+  const propsAlias = usePropsAlias(props);
+  const _emit = (value, direction, movedKeys) => {
+    emit(UPDATE_MODEL_EVENT, value);
+    emit(CHANGE_EVENT, value, direction, movedKeys);
+  };
+  const addToLeft = () => {
+    const currentValue = props.modelValue.slice();
+    checkedState.rightChecked.forEach((item) => {
+      const index = currentValue.indexOf(item);
+      if (index > -1) {
+        currentValue.splice(index, 1);
+      }
+    });
+    _emit(currentValue, "left", checkedState.rightChecked);
+  };
+  const addToRight = () => {
+    let currentValue = props.modelValue.slice();
+    const itemsToBeMoved = props.data.filter((item) => {
+      const itemKey = item[propsAlias.value.key];
+      return checkedState.leftChecked.includes(itemKey) && !props.modelValue.includes(itemKey);
+    }).map((item) => item[propsAlias.value.key]);
+    currentValue = props.targetOrder === "unshift" ? itemsToBeMoved.concat(currentValue) : currentValue.concat(itemsToBeMoved);
+    if (props.targetOrder === "original") {
+      currentValue = props.data.filter(
+        (item) => currentValue.includes(item[propsAlias.value.key])
+      ).map((item) => item[propsAlias.value.key]);
+    }
+    _emit(currentValue, "right", checkedState.leftChecked);
+  };
+  return {
+    addToLeft,
+    addToRight
+  };
+};
+
+export { useCheckedChange, useComputedData, useMove, usePropsAlias };

package/es/editor/data-picker/ibiz-transfer-picker/components/transfer/transfer.css

@@ -0,0 +1 @@
+.ibiz-transfer__buttons{display:inline-block;padding:0 1.875rem;vertical-align:middle}.ibiz-transfer__button{vertical-align:top}.ibiz-transfer__button:nth-child(2){margin:0 0 0 10px}.ibiz-transfer__button i,.ibiz-transfer__button span{font-size:var(--ibiz-font-size-header-6)}.ibiz-transfer__button .el-icon{font-size:var(--ibiz-font-size-regular)}