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

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

@@ -0,0 +1,182 @@
+import { VNode } from 'vue';
+import type { TransferDirection } from './interface';
+import './transfer.scss';
+export declare const TransferSelect: import("vue").DefineComponent<{
+    data: {
+        type: import("vue").PropType<import("@ibiz-template/core").IApiData>;
+        default: () => import("@ibiz-template/core").IApiData;
+    };
+    titles: {
+        type: import("vue").PropType<string[]>;
+        default: () => string[];
+    };
+    buttonTexts: {
+        type: import("vue").PropType<string[]>;
+        default: () => string[];
+    };
+    filterPlaceholder: StringConstructor;
+    filterMethod: {
+        type: import("vue").PropType<(query: string, item: import("@ibiz-template/core").IApiData) => boolean>;
+    };
+    rightSearchMethod: {
+        type: import("vue").PropType<(query: string) => import("@ibiz-template/core").IApiData[]>;
+    };
+    leftDefaultChecked: {
+        type: import("vue").PropType<import("./interface").TransferKey[]>;
+        default: () => import("./interface").TransferKey[];
+    };
+    rightDefaultChecked: {
+        type: import("vue").PropType<import("./interface").TransferKey[]>;
+        default: () => import("./interface").TransferKey[];
+    };
+    renderContent: {
+        type: import("vue").PropType<import("./interface").renderContent>;
+    };
+    modelValue: {
+        type: import("vue").PropType<import("./interface").TransferKey[]>;
+        default: () => import("./interface").TransferKey[];
+    };
+    format: {
+        type: import("vue").PropType<import("./interface").TransferFormat>;
+        default: () => import("./interface").TransferFormat;
+    };
+    filterable: BooleanConstructor;
+    props: {
+        type: import("vue").PropType<import("./interface").TransferPropsAlias>;
+        default: () => import("./interface").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;
+    };
+}, {
+    ns: import("@ibiz-template/core").Namespace;
+    targetData: import("vue").ComputedRef<any>;
+    rightPanelTitle: import("vue").ComputedRef<string>;
+    optionRender: import("vue").ComputedRef<(option: IData) => VNode | VNode[]>;
+    panelFilterPlaceholder: import("vue").ComputedRef<string>;
+    leftPanelTitle: import("vue").ComputedRef<string>;
+    sourceData: import("vue").ComputedRef<any>;
+    leftPanel: import("vue").Ref<any>;
+    rightPanel: import("vue").Ref<any>;
+    hasButtonTexts: import("vue").ComputedRef<boolean>;
+    checkedState: {
+        leftChecked: import("./interface").TransferKey[];
+        rightChecked: import("./interface").TransferKey[];
+    };
+    addToLeft: () => void;
+    addToRight: () => void;
+    clearQuery: (which: TransferDirection) => void;
+    onLeftAcSearch: (query: string) => void;
+    onSourceCheckedChange: (val: import("./interface").TransferKey[], movedKeys?: import("./interface").TransferKey[] | undefined) => void;
+    onTargetCheckedChange: (val: import("./interface").TransferKey[], movedKeys?: import("./interface").TransferKey[] | undefined) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (value: import("./interface").TransferKey[], direction: TransferDirection, movedKeys: import("./interface").TransferKey[]) => boolean;
+    "update:modelValue": (value: import("./interface").TransferKey[]) => boolean;
+    leftCheckChange: (value: import("./interface").TransferKey[], movedKeys?: import("./interface").TransferKey[] | undefined) => boolean;
+    rightCheckChange: (value: import("./interface").TransferKey[], movedKeys?: import("./interface").TransferKey[] | undefined) => boolean;
+    leftAcSearch: (query: string) => string;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    data: {
+        type: import("vue").PropType<import("@ibiz-template/core").IApiData>;
+        default: () => import("@ibiz-template/core").IApiData;
+    };
+    titles: {
+        type: import("vue").PropType<string[]>;
+        default: () => string[];
+    };
+    buttonTexts: {
+        type: import("vue").PropType<string[]>;
+        default: () => string[];
+    };
+    filterPlaceholder: StringConstructor;
+    filterMethod: {
+        type: import("vue").PropType<(query: string, item: import("@ibiz-template/core").IApiData) => boolean>;
+    };
+    rightSearchMethod: {
+        type: import("vue").PropType<(query: string) => import("@ibiz-template/core").IApiData[]>;
+    };
+    leftDefaultChecked: {
+        type: import("vue").PropType<import("./interface").TransferKey[]>;
+        default: () => import("./interface").TransferKey[];
+    };
+    rightDefaultChecked: {
+        type: import("vue").PropType<import("./interface").TransferKey[]>;
+        default: () => import("./interface").TransferKey[];
+    };
+    renderContent: {
+        type: import("vue").PropType<import("./interface").renderContent>;
+    };
+    modelValue: {
+        type: import("vue").PropType<import("./interface").TransferKey[]>;
+        default: () => import("./interface").TransferKey[];
+    };
+    format: {
+        type: import("vue").PropType<import("./interface").TransferFormat>;
+        default: () => import("./interface").TransferFormat;
+    };
+    filterable: BooleanConstructor;
+    props: {
+        type: import("vue").PropType<import("./interface").TransferPropsAlias>;
+        default: () => import("./interface").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;
+    };
+}>> & {
+    onChange?: ((value: import("./interface").TransferKey[], direction: TransferDirection, movedKeys: import("./interface").TransferKey[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: import("./interface").TransferKey[]) => any) | undefined;
+    onLeftCheckChange?: ((value: import("./interface").TransferKey[], movedKeys?: import("./interface").TransferKey[] | undefined) => any) | undefined;
+    onRightCheckChange?: ((value: import("./interface").TransferKey[], movedKeys?: import("./interface").TransferKey[] | undefined) => any) | undefined;
+    onLeftAcSearch?: ((query: string) => any) | undefined;
+}, {
+    props: import("./interface").TransferPropsAlias;
+    data: import("@ibiz-template/core").IApiData;
+    loading: boolean;
+    modelValue: import("./interface").TransferKey[];
+    readonly: boolean;
+    format: import("./interface").TransferFormat;
+    titles: string[];
+    buttonTexts: string[];
+    leftDefaultChecked: import("./interface").TransferKey[];
+    rightDefaultChecked: import("./interface").TransferKey[];
+    filterable: boolean;
+    targetOrder: string;
+    enableRemoteSearch: boolean;
+    validateEvent: boolean;
+}, {}>;

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

@@ -0,0 +1,146 @@
+import { reactive, ref, computed, h, createVNode, resolveComponent, defineComponent } from 'vue';
+import { isEmpty } from 'ramda';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import { usePropsAlias, useComputedData, useCheckedChange, useMove } from './transfer-util.mjs';
+import { transferProps, transferEmits } from './interface.mjs';
+import { TransferPanel } from '../transfer-panel/transfer-panel.mjs';
+import { arrowLeft, arrowRight } from './icon.mjs';
+import './transfer.css';
+
+"use strict";
+const TransferSelect = /* @__PURE__ */ defineComponent({
+  name: "IBizTransfer",
+  props: transferProps,
+  emits: transferEmits,
+  setup(props, {
+    emit,
+    slots
+  }) {
+    const ns = useNamespace("transfer");
+    const checkedState = reactive({
+      leftChecked: [],
+      rightChecked: []
+    });
+    const propsAlias = usePropsAlias(props);
+    const {
+      sourceData,
+      targetData
+    } = useComputedData(props);
+    const {
+      onSourceCheckedChange,
+      onTargetCheckedChange
+    } = useCheckedChange(checkedState, emit);
+    const {
+      addToLeft,
+      addToRight
+    } = useMove(props, checkedState, emit);
+    const leftPanel = ref();
+    const rightPanel = ref();
+    const clearQuery = (which) => {
+      switch (which) {
+        case "left":
+          leftPanel.value.query = "";
+          break;
+        case "right":
+          rightPanel.value.query = "";
+          break;
+        default:
+          break;
+      }
+    };
+    const onLeftAcSearch = (query) => {
+      emit("leftAcSearch", query);
+    };
+    const hasButtonTexts = computed(() => props.buttonTexts.length === 2);
+    const leftPanelTitle = computed(() => props.titles[0] || "\u53EF\u9009\u5217\u8868");
+    const rightPanelTitle = computed(() => props.titles[1] || "\u5DF2\u9009\u5217\u8868");
+    const panelFilterPlaceholder = computed(() => props.filterPlaceholder || "\u8BF7\u8F93\u5165");
+    const optionRender = computed(() => (option) => {
+      var _a;
+      if (props.renderContent)
+        return props.renderContent(h, option);
+      const defaultSlotVNodes = (((_a = slots.default) == null ? void 0 : _a.call(slots, {
+        option
+      })) || []).filter((node) => node.type !== Comment);
+      if (defaultSlotVNodes.length) {
+        return defaultSlotVNodes;
+      }
+      return h("span", option[propsAlias.value.label] || option[propsAlias.value.key]);
+    });
+    return {
+      ns,
+      targetData,
+      rightPanelTitle,
+      optionRender,
+      panelFilterPlaceholder,
+      leftPanelTitle,
+      sourceData,
+      leftPanel,
+      rightPanel,
+      hasButtonTexts,
+      checkedState,
+      addToLeft,
+      addToRight,
+      clearQuery,
+      onLeftAcSearch,
+      onSourceCheckedChange,
+      onTargetCheckedChange
+    };
+  },
+  render() {
+    return createVNode("div", {
+      "class": this.ns.b()
+    }, [createVNode(TransferPanel, {
+      "ref": "leftPanel",
+      "data": this.sourceData,
+      "readonly": this.readonly,
+      "optionRender": this.optionRender,
+      "placeholder": this.panelFilterPlaceholder,
+      "title": this.leftPanelTitle,
+      "filterable": this.filterable,
+      "format": this.format,
+      "enableAcSearch": this.enableRemoteSearch,
+      "loading": this.loading,
+      "filterMethod": this.filterMethod,
+      "defaultChecked": this.leftDefaultChecked,
+      "onAcSearch": this.onLeftAcSearch,
+      "props": this.props,
+      "onCheckedChange": this.onSourceCheckedChange
+    }, null), createVNode("div", {
+      "class": this.ns.e("buttons")
+    }, [createVNode(resolveComponent("el-button"), {
+      "class": [this.ns.e("button"), this.ns.is("with-texts", this.hasButtonTexts)],
+      "type": "primary",
+      "disabled": !!isEmpty(this.checkedState.rightChecked) || this.readonly,
+      "onClick": this.addToLeft
+    }, {
+      default: () => [createVNode(resolveComponent("el-icon"), null, {
+        default: () => arrowLeft()
+      }), this.buttonTexts[0] !== void 0 ? createVNode("span", null, [this.buttonTexts[0]]) : null]
+    }), createVNode(resolveComponent("el-button"), {
+      "class": [this.ns.e("button"), this.ns.is("with-texts", this.hasButtonTexts)],
+      "type": "primary",
+      "disabled": !!isEmpty(this.checkedState.leftChecked) || this.readonly,
+      "onClick": this.addToRight
+    }, {
+      default: () => [this.buttonTexts[1] !== void 0 ? createVNode("span", null, [this.buttonTexts[1]]) : null, createVNode(resolveComponent("el-icon"), null, {
+        default: () => arrowRight()
+      })]
+    })]), createVNode(TransferPanel, {
+      "ref": "rightPanel",
+      "data": this.targetData,
+      "readonly": this.readonly,
+      "optionRender": this.optionRender,
+      "placeholder": this.panelFilterPlaceholder,
+      "filterable": this.filterable,
+      "format": this.format,
+      "filterMethod": this.filterMethod,
+      "title": this.rightPanelTitle,
+      "defaultChecked": this.rightDefaultChecked,
+      "props": this.props,
+      "onCheckedChange": this.onTargetCheckedChange
+    }, null)]);
+  }
+});
+
+export { TransferSelect };

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

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

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

@@ -0,0 +1,12 @@
+import { createVNode } from 'vue';
+
+"use strict";
+const Search = () => createVNode("svg", {
+  "xmlns": "http://www.w3.org/2000/svg",
+  "viewBox": "0 0 1024 1024"
+}, [createVNode("path", {
+  "fill": "currentColor",
+  "d": "m795.904 750.72 124.992 124.928a32 32 0 0 1-45.248 45.248L750.656 795.904a416 416 0 1 1 45.248-45.248zM480 832a352 352 0 1 0 0-704 352 352 0 0 0 0 704"
+}, null)]);
+
+export { Search };

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

@@ -0,0 +1,60 @@
+import { ExtractPropTypes, PropType, VNode } from 'vue';
+import { TransferFormat } from '../transfer/interface';
+export declare const CHECKED_CHANGE_EVENT = "checkedChange";
+export declare const AC_SEARCH = "acSearch";
+export type TransferKey = string | number;
+export interface TransferPanelState {
+    checked: TransferKey[];
+    allChecked: boolean;
+    query: string;
+    checkChangeByUser: boolean;
+}
+export interface TransferPropsAlias {
+    label?: string;
+    key?: string;
+    disabled?: string;
+}
+export type CheckboxValueType = string | number | boolean;
+export declare const transferCheckedChangeFn: (value: TransferKey[], movedKeys?: TransferKey[]) => boolean;
+export declare const transferPanelProps: {
+    data: {
+        type: PropType<import("@ibiz-template/core").IApiData>;
+        default: () => IData;
+    };
+    optionRender: {
+        type: PropType<(option: IData) => VNode | VNode[]>;
+    };
+    placeholder: StringConstructor;
+    title: StringConstructor;
+    filterable: BooleanConstructor;
+    enableAcSearch: BooleanConstructor;
+    format: {
+        type: PropType<TransferFormat>;
+        default: () => TransferFormat;
+    };
+    filterMethod: {
+        type: PropType<(query: string, item: IData) => boolean>;
+    };
+    defaultChecked: {
+        type: PropType<TransferKey[]>;
+        default: () => Array<TransferKey>;
+    };
+    props: {
+        type: PropType<TransferPropsAlias>;
+        default: () => TransferPropsAlias;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+};
+export type TransferPanelProps = ExtractPropTypes<typeof transferPanelProps>;
+export declare const transferPanelEmits: {
+    checkedChange: (value: TransferKey[], movedKeys?: TransferKey[]) => boolean;
+    acSearch: (query: string) => string;
+};
+export type TransferPanelEmits = typeof transferPanelEmits;

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

@@ -0,0 +1,52 @@
+import { isArray, isNil } from 'lodash-es';
+
+"use strict";
+const CHECKED_CHANGE_EVENT = "checkedChange";
+const AC_SEARCH = "acSearch";
+const transferCheckedChangeFn = (value, movedKeys) => [value, movedKeys].every(isArray) || isArray(value) && isNil(movedKeys);
+const transferPanelProps = {
+  data: {
+    type: Array,
+    default: () => []
+  },
+  optionRender: {
+    type: Function
+  },
+  placeholder: String,
+  title: String,
+  filterable: Boolean,
+  enableAcSearch: Boolean,
+  format: {
+    type: Object,
+    default: () => ({})
+  },
+  filterMethod: {
+    type: Function
+  },
+  defaultChecked: {
+    type: Array,
+    default: () => []
+  },
+  props: {
+    type: Object,
+    default: () => ({
+      label: "label",
+      key: "key",
+      disabled: "disabled"
+    })
+  },
+  loading: {
+    type: Boolean,
+    default: false
+  },
+  readonly: {
+    type: Boolean,
+    default: false
+  }
+};
+const transferPanelEmits = {
+  [CHECKED_CHANGE_EVENT]: transferCheckedChangeFn,
+  [AC_SEARCH]: (query) => query
+};
+
+export { AC_SEARCH, CHECKED_CHANGE_EVENT, transferCheckedChangeFn, transferPanelEmits, transferPanelProps };

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

@@ -0,0 +1,14 @@
+import { ComputedRef, SetupContext, Ref } from 'vue';
+import { CheckboxValueType, TransferPanelEmits, TransferPanelProps, TransferPanelState, TransferPropsAlias } from './interface';
+export declare const usePropsAlias: (props: {
+    props: TransferPropsAlias;
+}) => ComputedRef;
+export declare const useCheck: (props: TransferPanelProps, panelState: TransferPanelState, emit: SetupContext<TransferPanelEmits>['emit']) => {
+    filteredData: Ref;
+    checkableData: ComputedRef;
+    checkedSummary: ComputedRef;
+    isIndeterminate: ComputedRef;
+    onInputChange: (value: string) => void;
+    updateAllChecked: () => void;
+    handleAllCheckedChange: (value: CheckboxValueType) => void;
+};

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

@@ -0,0 +1,130 @@
+import { computed, ref, watch } from 'vue';
+import { isFunction } from 'lodash-es';
+import { CHECKED_CHANGE_EVENT } from './interface.mjs';
+
+"use strict";
+const usePropsAlias = (props) => {
+  const initProps = {
+    label: "label",
+    key: "key",
+    disabled: "disabled"
+  };
+  return computed(() => ({
+    ...initProps,
+    ...props.props
+  }));
+};
+const useCheck = (props, panelState, emit) => {
+  const propsAlias = usePropsAlias(props);
+  const filteredData = ref([]);
+  const checkableData = computed(
+    () => filteredData.value.filter((item) => {
+      return !item[propsAlias.value.disabled];
+    })
+  );
+  const checkedSummary = computed(() => {
+    const checkedLength = panelState.checked.length;
+    const dataLength = props.data.length;
+    const { noChecked, hasChecked } = props.format;
+    if (noChecked && hasChecked) {
+      return checkedLength > 0 ? hasChecked.replace(/\${checked}/g, checkedLength.toString()).replace(/\${total}/g, dataLength.toString()) : noChecked.replace(/\${total}/g, dataLength.toString());
+    }
+    return "".concat(checkedLength, "/").concat(dataLength);
+  });
+  const isIndeterminate = computed(() => {
+    const checkedLength = panelState.checked.length;
+    return checkedLength > 0 && checkedLength < checkableData.value.length;
+  });
+  const handleFilteredData = (value = "") => {
+    filteredData.value = props.data.filter((item) => {
+      if (isFunction(props.filterMethod)) {
+        return props.filterMethod(value, item);
+      }
+      const label = String(
+        item[propsAlias.value.label] || item[propsAlias.value.key]
+      );
+      return label.toLowerCase().includes(value.toLowerCase());
+    });
+  };
+  const onInputChange = async (value) => {
+    if (props.enableAcSearch) {
+      emit("acSearch", value);
+    } else {
+      handleFilteredData(value);
+    }
+  };
+  const updateAllChecked = () => {
+    const checkableDataKeys = checkableData.value.map(
+      (item) => item[propsAlias.value.key]
+    );
+    panelState.allChecked = checkableDataKeys.length > 0 && checkableDataKeys.every(
+      (item) => panelState.checked.includes(item)
+    );
+  };
+  const handleAllCheckedChange = (value) => {
+    panelState.checked = value ? checkableData.value.map((item) => item[propsAlias.value.key]) : [];
+  };
+  watch(
+    () => panelState.checked,
+    (val, oldVal) => {
+      updateAllChecked();
+      if (panelState.checkChangeByUser) {
+        const movedKeys = val.concat(oldVal).filter((v) => !val.includes(v) || !oldVal.includes(v));
+        emit(CHECKED_CHANGE_EVENT, val, movedKeys);
+      } else {
+        emit(CHECKED_CHANGE_EVENT, val);
+        panelState.checkChangeByUser = true;
+      }
+    }
+  );
+  watch(checkableData, () => {
+    updateAllChecked();
+  });
+  watch(
+    () => props.data,
+    () => {
+      handleFilteredData(panelState.query);
+      const checked = [];
+      const filteredDataKeys = filteredData.value.map(
+        (item) => item[propsAlias.value.key]
+      );
+      panelState.checked.forEach((item) => {
+        if (filteredDataKeys.includes(item)) {
+          checked.push(item);
+        }
+      });
+      panelState.checkChangeByUser = false;
+      panelState.checked = checked;
+    }
+  );
+  watch(
+    () => props.defaultChecked,
+    (val) => {
+      const checked = [];
+      const checkableDataKeys = props.data.map(
+        (item) => item[propsAlias.value.key]
+      );
+      val.forEach((item) => {
+        if (checkableDataKeys.includes(item)) {
+          checked.push(item);
+        }
+      });
+      panelState.checkChangeByUser = false;
+      panelState.checked = checked;
+    },
+    {
+      immediate: true
+    }
+  );
+  return {
+    filteredData,
+    checkableData,
+    checkedSummary,
+    isIndeterminate,
+    onInputChange,
+    updateAllChecked,
+    handleAllCheckedChange
+  };
+};
+
+export { useCheck, usePropsAlias };

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

@@ -0,0 +1 @@
+.ibiz-transfer-panel{--ibiz-transfer-panel-border-color:var(--ibiz-editor-default-border-color);--ibiz-transfer-panel-border-radius:var(--ibiz-border-radius-extra-small);--ibiz-transfer-panel-width:200px;--ibiz-transfer-panel-header-height:40px;--ibiz-transfer-panel-header-bg-color:var(--ibiz-color-fill-0);--ibiz-transfer-panel-footer-height:40px;--ibiz-transfer-panel-body-height:278px;--ibiz-transfer-panel-item-height:30px;--ibiz-transfer-panel-filter-height:32px;--ibiz-transfer-panel-spacing-base:var(--ibiz-spacing-base);position:relative;box-sizing:border-box;display:inline-block;width:var(--ibiz-transfer-panel-width);max-height:100%;overflow:hidden;text-align:left;vertical-align:middle;background:var(--ibiz-color-bg-2)}.ibiz-transfer-panel__header{box-sizing:border-box;display:flex;align-items:center;height:var(--ibiz-transfer-panel-header-height);padding-left:var(--ibiz-transfer-panel-spacing-base);margin:0;color:var(--ibiz-color-text-1);background:var(--ibiz-transfer-panel-header-bg-color);border:1px solid var(--ibiz-transfer-panel-border-color);border-top-left-radius:var(--ibiz-transfer-panel-border-radius);border-top-right-radius:var(--ibiz-transfer-panel-border-radius)}.ibiz-transfer-panel__header .el-checkbox{position:relative;display:flex;align-items:center;width:100%}.ibiz-transfer-panel__header .el-checkbox .el-checkbox__label{font-size:var(--ibiz-font-size-header-5);font-weight:400;color:var(--ibiz-color-text-1)}.ibiz-transfer-panel__header .el-checkbox .el-checkbox__label span{position:absolute;top:50%;right:var(--ibiz-transfer-panel-spacing-base);font-size:var(--ibiz-font-size-regular);font-weight:400;color:var(--ibiz-color-text-3);transform:translate3d(0,-50%,0)}.ibiz-transfer-panel__body{height:var(--ibiz-transfer-panel-body-height);overflow:hidden;border-right:1px solid var(--ibiz-transfer-panel-border-color);border-bottom:1px solid var(--ibiz-transfer-panel-border-color);border-left:1px solid var(--ibiz-transfer-panel-border-color);border-bottom-right-radius:var(--ibiz-transfer-panel-border-radius);border-bottom-left-radius:var(--ibiz-transfer-panel-border-radius)}.ibiz-transfer-panel__filter{--el-input-height:var(--ibiz-transfer-panel-filter-height);box-sizing:border-box;padding:var(--ibiz-transfer-panel-spacing-base);text-align:center}.ibiz-transfer-panel__filter .el-icon{font-size:inherit}.ibiz-transfer-panel__content{width:100%;height:var(--ibiz-transfer-panel-body-height);padding:6px 0}.ibiz-transfer-panel__content.is-filterable{height:calc(100% - var(--ibiz-transfer-panel-filter-height) - var(--ibiz-transfer-panel-spacing-base) * 2);padding-top:0}.ibiz-transfer-panel__list{box-sizing:border-box;height:100%;margin:0;overflow:auto;list-style:none}.ibiz-transfer-panel__item{height:var(--ibiz-transfer-panel-item-height);padding-left:var(--ibiz-transfer-panel-spacing-base);line-height:var(--ibiz-transfer-panel-item-height)}.ibiz-transfer-panel__item.el-checkbox{--el-checkbox-font-size:var(--ibiz-font-size-regular);display:flex;align-items:center;color:var(--ibiz-color-text-0)}.ibiz-transfer-panel__item.el-checkbox .el-checkbox__label{box-sizing:border-box;display:block;width:100%;padding-left:22px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-transfer-panel__item .el-checkbox__input{position:absolute}.ibiz-transfer-panel__empty{padding:6px 15px 0;margin:0;text-align:center}.ibiz-transfer-panel__empty .ibiz-no-data.el-empty{justify-content:flex-start;padding:0}.ibiz-transfer-panel__empty .ibiz-no-data .el-empty__image{width:52px}.ibiz-transfer-panel .el-checkbox__inner{width:1em;height:1em;border-radius:3px}.ibiz-transfer-panel .el-checkbox__label{padding-left:var(--ibiz-spacing-tight)}