@farris/ui-vue/components/transfer/index.esm.js

Farris Vue, a Farris Design based Vue3 component library.

import { ref as r, computed as j, createVNode as t, Fragment as le, watch as J, withModifiers as xe, withDirectives as Ae, vModelText as Me, defineComponent as ve, onMounted as ke, inject as Re, createTextVNode as pe } from "vue";
import ye from "../tree-view/index.esm.js";
import Se from "../data-grid/index.esm.js";
import { LocaleService as K } from "../locale/index.esm.js";
import { resolveAppearance as De, createPropsResolver as Oe } from "../dynamic-resolver/index.esm.js";
import { getCustomStyle as we, getCustomClass as fe, withInstall as Be } from "../common/index.esm.js";
import { useFilter as Le, useIdentify as je, useHierarchy as He, useGroupData as _e, useDataView as Pe, useSelection as Ee, usePagination as ze, useRow as Ue, useEdit as Ge, useVisualDataBound as Ne, useVisualDataCell as We, useVisualDataRow as $e, useVisualGroupRow as Ye, useVisualSummaryRow as Ke, useVisualData as qe, useSidebar as Xe, useColumn as Je, useVirtualScroll as Qe } from "../data-view/index.esm.js";
import Ve, { FCheckbox as me } from "../checkbox/index.esm.js";
import { cloneDeep as Ce } from "lodash-es";
import { useDesignerComponent as Ze } from "../designer-canvas/index.esm.js";
const et = /* @__PURE__ */ new Map([
  ["appearance", De]
]);
function tt(e, l, u) {
  return l;
}
const lt = "transfer", nt = "A Farris Component", at = "object", ot = {
  basic: {
    description: "Basic Infomation",
    title: "基本信息",
    properties: {
      id: {
        description: "组件标识",
        title: "标识",
        type: "string",
        readonly: !0
      },
      type: {
        description: "组件类型",
        title: "控件类型",
        type: "select",
        editor: {
          type: "waiting for modification",
          enum: []
        }
      }
    }
  }
}, st = {
  title: lt,
  description: nt,
  type: at,
  categories: ot
}, it = "https://json-schema.org/draft/2020-12/schema", ut = "https://farris-design.gitee.io/transfer.schema.json", ct = "transfer", rt = "A Farris Component", dt = "object", ft = {
  id: {
    description: "The unique identifier for transfer",
    type: "string"
  },
  type: {
    description: "The type string of transfer",
    type: "string",
    default: "transfer"
  },
  appearance: {
    description: "",
    type: "object",
    properties: {
      class: {
        type: "string"
      },
      style: {
        type: "string"
      }
    },
    default: {}
  },
  binding: {
    description: "",
    type: "object",
    default: {}
  },
  disable: {
    type: "string",
    default: !1
  },
  editable: {
    description: "",
    type: "boolean",
    default: !0
  },
  placeholder: {
    description: "",
    type: "string",
    default: ""
  },
  readonly: {
    description: "",
    type: "boolean",
    default: !1
  },
  require: {
    description: "",
    type: "boolean",
    default: !1
  },
  tabindex: {
    description: "",
    type: "number",
    default: -1
  },
  visible: {
    description: "",
    type: "boolean",
    default: !0
  }
}, vt = [
  "id",
  "type"
], mt = {
  $schema: it,
  $id: ut,
  title: ct,
  description: rt,
  type: dt,
  properties: ft,
  required: vt
}, ge = {
  preset: { type: String, default: "classic" },
  /**
   * 数据源
   * @default []
   */
  dataSource: {
    type: Array,
    default: []
  },
  /**
   * 显示类型
   * @default List
   */
  displayType: { type: String, default: "List" },
  /**
   * 启用搜索
   * @default true
   */
  enableSearch: { type: Boolean, default: !0 },
  /**
   * 标识字段
   * @default id
   */
  identifyField: { type: String, default: "id" },
  /**
   * 显示文本字段
   * @default name
   */
  textField: { type: String, default: "name" },
  placeholder: { type: String, default: "" },
  selections: { type: Array, default: [] },
  selectionValues: { type: Array, default: [] },
  virtualized: { type: Boolean, default: !1 },
  rowOption: { type: Object },
  columns: {
    type: Array,
    default: [
      { field: "name", title: "", dataType: "string", width: "100%" }
    ]
  },
  /**
   * 删除右侧已选数据前的检查方法，返回值为true时可以删除当前数据
   */
  checkBeforeRemoveItem: { type: Function, default: null },
  /**
   * 已选项的样式
   */
  selectedItemClass: {
    Type: [String, Function],
    default: "draggable-item--text-truncate",
    validator: (e) => typeof e == "string" || typeof e == "function"
  }
}, Te = Oe(ge, mt, et, tt, st), gt = {
  /**
   * 列集合
   */
  columns: {
    type: Array,
    default: [
      { field: "name", title: "", dataType: "string" }
    ]
  },
  customClass: { type: String, default: "" },
  /**
   * 列表数组数据
   * @default []
   */
  data: { type: Array, default: [] },
  /**
   * 是否可拖拽
   * @default false
   */
  draggable: { type: Boolean, default: !1 },
  /**
   * 是否支持多选
   * @default false
   */
  multiSelect: { type: Boolean, default: !1 },
  // multiSelectMode: { type: String as PropType<MultiSelectMode>, default: 'OnCheck' },
  /**
   * 定义列表的唯一标识字段
   * @default 'id'
   */
  idField: { type: String, default: "id" },
  /**
   * 值字段
   * @default 'id'
   */
  valueField: { type: String, default: "id" },
  /**
   * 文本字段
   * @default 'name'
   */
  textField: { type: String, default: "name" },
  /**
   * 标题字段
   * @default 'name'
   */
  titleField: { type: String, default: "name" },
  /**
   * 视图
   * @default 'ContentView'
   */
  view: { type: String, default: "ContentView" },
  /**
   * 尺寸
   * @default 'default'
   */
  size: { type: String, default: "default" },
  /**
   * 占位符
   * @default ''
   */
  placeholder: { type: String, default: "" },
  /**
   * 列表头
   * @default 'ContentHeader'
   */
  header: { type: String, default: "ContentHeader" },
  /**
   * 列表头类
   * @default ''
   */
  headerClass: { type: String, default: "" },
  /**
   * 项目类
   * @default ''
   */
  itemClass: {
    type: [String, Function],
    default: "",
    validator: (e) => typeof e == "string" || typeof e == "function"
  },
  itemStyle: {
    type: [String, Function],
    default: "",
    validator: (e) => typeof e == "string" || typeof e == "function"
  },
  itemContentClass: { type: String, default: "" },
  /**
   * 已选列
   * @default []
   */
  selectionValues: { type: Array, default: [] },
  /**
   * 分组配置
   */
  group: { type: Object },
  /**
   * 选择配置
   */
  selection: {
    type: Object,
    default: {
      enableSelectRow: !0,
      multiSelect: !1,
      multiSelectMode: "DependOnCheck",
      showCheckbox: !1,
      showSelectAll: !1,
      showSelection: !0
    }
  },
  /**
   * 是否保持排序
   * @default false
   */
  keepOrder: { type: Boolean, default: !1 },
  /**
   * 不可操作字段
   * @default 'disabled'
   */
  disableField: { type: String, default: "disabled" },
  // 搜索启用高亮
  enableHighlightSearch: { type: Boolean, default: !0 },
  /**
   * 虚拟化渲染数据
   */
  virtualized: { type: Boolean, default: !0 },
  /**
   * 删除数据前的检查方法，返回值为true时可以删除当前数据
   */
  checkBeforeRemoveItem: { type: Function, default: null },
  /**
   * 头部模板
   */
  headerTemplate: { type: Object },
  /**
   * 内容模板
   */
  contentTemplate: { type: Object },
  /**
   * 底部模板
   */
  footerTemplate: { type: Object },
  /**
   * 空数据模板
   */
  emptyTemplate: { type: Object },
  /**
   * 分页
   */
  pagination: { type: Object, default: { enable: !1, size: 20 } },
  /**
   * 定义属性，开启时，当多选开启时，展示选中项的背景色等样式；不开启时，不展示选中项的背景色等样式
   */
  showActiveWhenMultiSelect: { type: Boolean, default: !0 },
  /**
   * 允许删除
   */
  allowDelete: { type: Boolean, default: !0 }
};
function ht(e, l) {
  function u(f) {
    const i = [];
    let n = f.nextNode();
    for (; n; )
      i.push(n), n = f.nextNode();
    return i;
  }
  function O(f, i) {
    const n = document.createTreeWalker(f, NodeFilter.SHOW_TEXT);
    return u(n).map((g) => ({ textNode: g, text: (g.textContent || "").toLocaleLowerCase() })).map(({ textNode: g, text: M }) => {
      const I = [];
      let d = 0;
      for (; d < M.length; ) {
        const V = M.indexOf(i, d);
        if (V === -1)
          break;
        I.push(V), d = V + i.length;
      }
      return I.map((V) => {
        const A = new Range();
        return A.setStart(g, V), A.setEnd(g, V + i.length), A;
      });
    }).flat();
  }
  function w(f) {
    if (!CSS.highlights || (CSS.highlights.clear(), !f || !l))
      return;
    const i = O(l.value, f.toLocaleLowerCase()), n = new Highlight(...i);
    CSS.highlights.set("search-result", n);
  }
  return { search: w };
}
function Ie(e, l, u, O, w, f, i, n, p, D) {
  const k = r(e.size), g = r(e.textField), M = r(e.titleField), I = r(e.disableField), d = j(() => {
    var c, m;
    return ((c = e.selection) == null ? void 0 : c.multiSelect) && ((m = e.selection) == null ? void 0 : m.showCheckbox);
  }), {
    onMouseenterItem: V,
    onMouseoverItem: A,
    onMouseoutItem: S
  } = f, {
    getKey: y,
    listViewItemClass: H,
    listViewItemStyle: L,
    onCheckItem: v,
    onClickItem: R
  } = i, C = j(() => {
    const c = {
      "text-overflow": "ellipsis",
      overflow: "hidden",
      "white-space": "nowrap"
    };
    return e.itemClass ? c : {
      margin: k.value === "small" ? "0.25rem 0" : "8px 0",
      ...c
    };
  });
  function T(c, m, F) {
    return c.checked = n.findIndexInSelectedItems(c) > -1, t("li", {
      class: H(c, m),
      id: y(c, m),
      key: y(c, m),
      style: L(c, m),
      onClick: (B) => R(c, m, B),
      onMouseenter: (B) => V(B, c, m),
      onMouseover: (B) => A(B, c, m),
      onMouseout: (B) => S(B, c, m)
    }, [d.value && t("div", {
      class: "f-list-select",
      onClick: (B) => B.stopPropagation()
    }, [t(me, {
      id: "list-" + y(c, m),
      customClass: "listview-checkbox float-left",
      disabled: c[I.value],
      checked: c.checked,
      "onUpdate:checked": (B) => c.checked = B,
      onChange: (B) => {
        v(c, m, !B.checked);
      }
    }, null)]), t("div", {
      class: "f-list-content"
    }, [t("div", {
      class: e.itemContentClass,
      style: C.value,
      title: c.raw[M.value] || c.raw[g.value]
    }, [c.raw[g.value]])])]);
  }
  return {
    renderItem: T
  };
}
function pt(e, l, u, O, w, f, i, n, p, D) {
  const k = r(e.multiSelect), g = r(e.disableField), M = r(e.textField), {
    onMouseenterItem: I,
    onMouseoverItem: d,
    onMouseoutItem: V
  } = f, {
    getKey: A,
    listViewItemClass: S,
    listViewItemStyle: y,
    onCheckItem: H,
    onClickItem: L,
    updateSelectedItems: v
  } = i;
  function R(T, c, m) {
    return e.contentTemplate ? t(le, null, [e.contentTemplate({
      item: T.raw,
      index: c,
      selectedItem: m
    })]) : l.slots.content ? t(le, null, [l.slots.content && l.slots.content({
      item: T.raw,
      index: c,
      selectedItem: m
    })]) : t("div", {
      style: "margin: 10px 0;"
    }, [T.raw[M.value || "name"]]);
  }
  function C(T, c, m) {
    return t("li", {
      class: S(T, c),
      id: A(T, c),
      key: A(T, c),
      style: y(T, c),
      onClick: (F) => L(T, c, F),
      onMouseenter: (F) => I(F, T, c),
      onMouseover: (F) => d(F, T, c),
      onMouseout: (F) => V(F, T, c)
    }, [k.value && t("div", {
      class: "f-list-select",
      onClick: (F) => F.stopPropagation()
    }, [t(me, {
      id: "list-" + A(T, c),
      customClass: "listview-checkbox",
      disabled: T[g.value],
      checked: T.checked,
      "onUpdate:checked": (F) => T.checked = F,
      onChange: (F) => {
        H(T, c, !F.checked), v();
      }
    }, null)]), t("div", {
      class: "f-list-content"
    }, [R(T, c, m)])]);
  }
  return {
    renderItem: C
  };
}
function yt(e, l, u, O, w, f, i, n, p, D) {
  const k = r(e.multiSelect), g = r(e.disableField), M = r(e.textField), {
    onMouseenterItem: I,
    onMouseoverItem: d,
    onMouseoutItem: V
  } = f, {
    getKey: A,
    listViewItemClass: S,
    onCheckItem: y,
    onClickItem: H
  } = i, {
    dragstart: L,
    dragenter: v,
    dragover: R,
    dragend: C
  } = O, {
    removeItem: T
  } = p, c = j(() => ({
    margin: k.value ? "10px 0" : "10px 0px 10px 14px"
  }));
  function m(s, o = "") {
    const b = s.target;
    b.title = b.scrollWidth > b.clientWidth ? o : "";
  }
  function F(s) {
    return t("div", {
      style: c.value,
      onMouseenter: (o) => m(o, s.raw[M.value || "name"])
    }, [s.raw[M.value || "name"]]);
  }
  function B() {
    return l.slots.itemContent ? l.slots.itemContent : F;
  }
  const _ = B();
  function U(s, o, b) {
    return t("li", {
      class: S(s, o),
      id: A(s, o),
      key: A(s, o),
      onClick: (a) => H(s, o, a),
      onMouseenter: (a) => I(a, s, o),
      onMouseover: (a) => d(a, s, o),
      onMouseout: (a) => V(a, s, o),
      draggable: "true",
      onDragstart: (a) => L(a, s, o),
      onDragenter: (a) => v(a, o),
      onDragend: (a) => C(a, s),
      onDragover: (a) => R(a)
    }, [k.value && t("div", {
      class: "f-list-select",
      onClick: (a) => a.stopPropagation()
    }, [t(me, {
      id: "list-" + A(s, o),
      customClass: "listview-checkbox",
      disabled: s[g.value],
      checked: s.checked,
      "onUpdate:checked": (a) => s.checked = a,
      onChange: (a) => y(s, o, !a.checked)
    }, null)]), t("div", {
      class: "f-list-content"
    }, [_(s)]), e.allowDelete && t("div", {
      class: "f-list-remove",
      onClick: (a) => {
        a.stopPropagation(), T(o);
      }
    }, [t("div", {
      class: "f-list-remove-icon"
    }, [t("i", {
      class: "f-icon f-icon-remove_face"
    }, null)])]), t("div", {
      class: "f-list-handle"
    }, [t("div", null, [t("i", {
      class: "f-icon f-icon-drag-vertical"
    }, null)])])]);
  }
  return {
    renderItem: U
  };
}
function St(e, l, u, O, w, f, i, n, p, D) {
  var A;
  const k = r(((A = e.group) == null ? void 0 : A.groupFields) || []), {
    collpaseGroupIconClass: g
  } = w, {
    toggleGroupRow: M
  } = D;
  function I(S, y) {
    S.stopPropagation(), y.collapse = !y.collapse, u.value = M(y.collapse ? "collapse" : "expand", y, u.value);
  }
  function d(S, y, H) {
    return l.slots.group ? t(le, null, [l.slots.content && l.slots.group({
      item: S.raw,
      index: y,
      selectedItem: H
    })]) : t("div", {
      class: "f-navlookup-recentHeader",
      onClick: (L) => I(L, S)
    }, [t("div", {
      class: "fv-grid-group-row-icon"
    }, [t("span", {
      class: g(S)
    }, null)]), t("div", {
      class: "f-navlookup-recommandLabel"
    }, [S.raw[k.value[S.layer]]])]);
  }
  function V(S, y, H) {
    return S.layer > -1 && d(S, y, H);
  }
  return {
    renderItem: V
  };
}
function wt(e, l, u, O) {
  const { dataView: w } = u, { updateSelectedItems: f } = O;
  function i(n) {
    if (n > -1 && n < w.value.length) {
      if (e != null && e.checkBeforeRemoveItem && !e.checkBeforeRemoveItem(w.value[n]))
        return;
      const p = w.value.splice(n, 1);
      f(), l.emit("removeItem", p[0]);
    }
  }
  return { removeItem: i };
}
function Ct(e, l, u, O, w, f, i, n, p, D) {
  const k = r(e.view), g = r(e.view === "CardView"), M = r({}), I = wt(e, l, O, p), d = j(() => ({
    "f-list-view-group": !0,
    "f-list-view-group-multiselect": e.multiSelect,
    "d-flex": g.value,
    "flex-wrap": g.value
  })), V = j(() => !!u.value && u.value.length > 0), A = j(() => u.value.length === 0);
  j(() => A.value && !l.slots.empty);
  function S() {
    return k.value === "SingleView" ? Ie : k.value === "DraggableView" ? yt : (k.value === "ContentView" || k.value === "CardView") && (e.contentTemplate || l.slots.content) ? pt : Ie;
  }
  const y = S(), {
    renderItem: H
  } = y(e, l, u, D, w, f, p, i, I, n), {
    renderItem: L
  } = St(e, l, u, D, w, f, p, i, I, n), v = [H, L];
  function R() {
    return u.value.filter((c) => c.visible !== !1).map((c, m) => v[c.type](c, m, M));
  }
  function C() {
    return t("div", {
      class: "f-list-view-emptydata",
      style: "margin: 0 auto;"
    }, [t("p", {
      class: "f-empty-title"
    }, [e.emptyTemplate ? e.emptyTemplate() : l.slots.empty ? l.slots.empty() : K.getLocaleValue("listView.emptyMessage")])]);
  }
  function T() {
    return t("ul", {
      class: d.value,
      style: "list-style: none;"
    }, [V.value && R(), A.value && C()]);
  }
  return {
    renderListArea: T
  };
}
function It(e, l, u, O, w) {
  const {
    showSelectAll: f,
    selectAll: i,
    unSelectAll: n,
    selectAllStatus: p,
    indeterminateStatus: D
  } = O;
  function k(I) {
    I ? i() : n();
  }
  const g = j(() => "f-list-view-group-item f-combo-list-item f-un-select");
  function M() {
    return t("div", {
      class: "f-list-view-header"
    }, [f.value && w.dataView.value.length > 0 && t("ul", {
      class: "f-list-view-group f-list-view-group-multiselect",
      style: "list-style: none;"
    }, [t("li", {
      class: g.value
    }, [t("div", {
      class: "f-list-select"
    }, [t(Ve, {
      customClass: "listview-checkbox float-left",
      modelValue: p.value,
      indeterminate: D.value,
      "onUpdate:modelValue": (I) => k(I)
    }, null)])])]), l.slots.header && l.slots.header()]);
  }
  return {
    renderHeader: M
  };
}
function be(e, l, u, O, w) {
  const f = r(e.headerClass), i = r(e.placeholder), n = r(""), p = j(() => !n.value), D = j(() => !!n.value), {
    showSelectAll: k,
    selectAll: g,
    unSelectAll: M,
    selectAllStatus: I,
    indeterminateStatus: d
  } = O, V = j(() => "f-list-view-group-item f-combo-list-item f-un-select");
  function A(v) {
    n.value = "";
  }
  function S(v) {
    v ? g() : M();
  }
  J(n, (v) => {
    e.enableHighlightSearch && u.search(v), l.emit("afterSearch", v);
  });
  const y = j(() => {
    const v = {
      "form-group": !0,
      "farris-form-group": !0
    };
    return f.value && f.value.split(" ").reduce((C, T) => (C[T] = !0, C), v), v;
  });
  function H(v) {
  }
  function L() {
    return t("div", {
      class: "f-list-view-header",
      onClick: xe(() => H, ["prevent", "stop"])
    }, [k.value && w.dataView.value.length > 0 && t("ul", {
      class: "f-list-view-group f-list-view-group-multiselect",
      style: "list-style: none;"
    }, [t("li", {
      class: V.value
    }, [t("div", {
      class: "f-list-select"
    }, [t(Ve, {
      customClass: "listview-checkbox float-left",
      modelValue: I.value,
      indeterminate: d.value,
      "onUpdate:modelValue": (v) => S(v)
    }, null)])])]), t("div", {
      class: y.value
    }, [t("div", {
      class: "farris-input-wrap"
    }, [t("div", {
      class: "f-cmp-inputgroup"
    }, [t("div", {
      class: "input-group f-state-editable"
    }, [Ae(t("input", {
      class: "form-control f-utils-fill text-left",
      "onUpdate:modelValue": (v) => n.value = v,
      name: "input-group-value",
      type: "text",
      placeholder: i.value,
      autocomplete: "off"
    }, null), [[Me, n.value]]), t("div", {
      class: "input-group-append"
    }, [D.value && t("span", {
      class: "input-group-text input-group-clear",
      onClick: (v) => A()
    }, [t("i", {
      class: "f-icon f-icon-close-circle"
    }, null)]), p.value && t("span", {
      class: "input-group-text"
    }, [t("span", {
      class: "f-icon f-icon-search"
    }, null)])])])])])])]);
  }
  return {
    renderHeader: L
  };
}
function bt() {
  const e = r(""), l = r(-1), u = r(""), O = r(-1), w = r(!1);
  function f(g, M, I) {
    O.value = I;
  }
  function i(g, M, I) {
    w.value || (O.value = I);
  }
  function n(g, M, I) {
    O.value = -1;
  }
  function p() {
    w.value = !0;
  }
  function D() {
    w.value = !1;
  }
  function k() {
    l.value = -1, e.value = "";
  }
  return {
    activeIndex: l,
    focusedItemId: u,
    hoverIndex: O,
    clearActiveItem: k,
    onMouseenterItem: f,
    onMouseoverItem: i,
    onMouseoutItem: n,
    resumeHover: D,
    suspendHover: p
  };
}
function kt(e, l, u, O, w) {
  const f = r(e.idField), { dataView: i } = u, n = r(-1), p = r(!1), { activeIndex: D, focusedItemId: k, hoverIndex: g, resumeHover: M, suspendHover: I } = O;
  let d, V = 0, A = 0, S = null, y = null;
  const H = 10, L = 50;
  function v(s) {
    if (!s)
      return null;
    const { overflowY: o } = getComputedStyle(s);
    return o === "auto" || o === "scroll" ? s : v(s.parentElement);
  }
  function R(s, o) {
    y && clearInterval(y), y = window.setInterval(() => {
      o === "up" ? s.scrollTop -= H : s.scrollTop += H;
    }, 16);
  }
  function C() {
    y && (clearInterval(y), y = null);
  }
  function T(s) {
    const o = s.target;
    if (S || (S = v(o)), !S) {
      C();
      return;
    }
    const b = S.getBoundingClientRect(), a = s.clientY, G = a - b.top, N = b.bottom - a;
    G < L && S.scrollTop > 0 ? R(S, "up") : N < L && S.scrollTop < S.scrollHeight - S.clientHeight ? R(S, "down") : C();
  }
  function c(s, o) {
    const b = s - V, a = o - A;
    d.style.left = parseInt(d.style.left) + b + "px", d.style.top = parseInt(d.style.top) + a + "px", V = s, A = o;
  }
  function m(s) {
    const { left: o, top: b } = s.getBoundingClientRect(), a = s.cloneNode(!0);
    return a.className = a.className + " f-listview-drag-moving", a.style.cssText = `
        position:absolute;
        left:${o}px;
        top:${document.documentElement.scrollTop ? b + document.documentElement.scrollTop : b}px;
        z-index: 999999;
        pointer-events: none;
        border-radius: 10px;
        margin: 4px 2px;    
        display: flex;
        align-items: center;
        float: none;
        text-align: initial;
        width:${getComputedStyle(s).width};
        height:${getComputedStyle(s).height};
        `, a.children[0].style.cssText = "padding: 0 0 0 14px", a.children[0].children[0].style.cssText = `
        margin: 10px 0px 10px 14px;
        overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
        `, a.children[1].style.cssText = "flex:1 1 auto; width:100%", a.children[2].style.cssText = "padding: 0 14px 0 0", a.children[2].children[0].style.cssText = "display: initial", document.body.appendChild(a), a;
  }
  function F(s, o, b) {
    if (s.stopPropagation(), I(), o) {
      if (d = m(s.target), s.dataTransfer) {
        const a = new Image();
        a.src = "", s.dataTransfer.setDragImage(a, 0, 0);
      }
      V = s.pageX, A = s.pageY, setTimeout(() => {
        n.value = b, p.value = !0, o.moving = !0;
      });
    }
  }
  function B(s, o) {
    if (s.preventDefault(), n.value !== o && n.value !== -1) {
      const b = i.value[n.value], a = w.value[n.value];
      b && a && (i.value.splice(n.value, 1), i.value.splice(o, 0, b), w.value.splice(n.value, 1), w.value.splice(o, 0, a), w.value.forEach((G, N) => {
        G.index = N, G.raw.__fv_index__ = N;
      }), n.value = o, c(s.pageX, s.pageY));
    }
  }
  function _(s) {
    s.preventDefault(), s.dataTransfer && (s.dataTransfer.dropEffect = "move"), c(s.pageX, s.pageY), T(s);
  }
  function U(s, o) {
    var a, G;
    C(), S = null, o && (o.moving = !1, d && (document.body.removeChild(d), d = null)), i.value.forEach((N, $) => {
      N.__fv_index__ = $;
    }), w.value.forEach((N, $) => {
      N.index = $, N.raw && (N.raw.__fv_index__ = $);
    }), p.value = !1, M();
    const b = ((a = o.raw) == null ? void 0 : a.__fv_index__) ?? 0;
    g.value = b, D.value = b, k.value = (G = o.raw) == null ? void 0 : G[f.value], l.emit("change", i.value), l.emit("activeChange", [o.raw]);
  }
  return {
    dragstart: F,
    dragenter: B,
    dragover: _,
    dragend: U,
    isDragging: p
  };
}
function Vt(e, l, u, O, w, f) {
  var U, s;
  const i = r(e.idField), n = r(e.disableField), p = r(e.draggable);
  r(e.itemClass);
  const D = r(((U = e.selection) == null ? void 0 : U.multiSelect) ?? !1), k = r(((s = e.selection) == null ? void 0 : s.multiSelectMode) || "DependOnCheck"), { isDragging: g } = O, { activeIndex: M, focusedItemId: I, hoverIndex: d } = w, { clearSelection: V, getSelectedItems: A, toggleSelectItem: S, currentSelectedDataId: y, multiSelectOnlyOnCheck: H } = f, L = r(A()), v = (o) => L.value.length === 0 ? !1 : L.value.some((b) => {
    let a = "";
    return b.data ? a = b.data[i.value] : a = b[i.value], a === o;
  });
  function R() {
    L.value = A();
  }
  function C(o, b) {
    return o.raw[i.value] != null ? o.raw[i.value] + "_" + b : "";
  }
  function T(o, b) {
    const a = {
      "f-list-view-group-item": !0,
      "f-list-view-draggable-item": p.value,
      "f-un-click": !o.checked,
      "f-un-select": !!o.raw[n.value],
      "f-listview-active": (
        // 多选
        D.value && v(C(o, b)) && e.showActiveWhenMultiSelect || // 单选
        !D.value && o.raw[i.value] === y.value || D.value && !e.showActiveWhenMultiSelect && o.raw[i.value] === y.value
      ),
      "f-listview-hover": !g.value && b === d.value,
      moving: !!o.moving
    };
    if (typeof e.itemClass == "string")
      return fe(a, e.itemClass);
    if (typeof e.itemClass == "function") {
      const G = e.itemClass(o);
      return fe(a, G);
    }
    return a;
  }
  function c(o, b) {
    const a = {};
    if (typeof e.itemStyle == "string")
      return we(a, e.itemStyle);
    if (typeof e.itemStyle == "function") {
      const G = e.itemStyle(o);
      return we(a, G);
    }
    return a;
  }
  const m = j(() => !D.value);
  function F(o, b, a) {
    o.checked = a, !o.raw[n.value] && (m.value && (I.value = o.raw[i.value]), S(o));
  }
  const B = j(() => !D.value || D.value && k.value === "OnCheckAndClick");
  function _(o, b, a) {
    if (o.raw[n.value]) {
      a == null || a.preventDefault(), a == null || a.stopPropagation();
      return;
    }
    y.value = o.raw[i.value], I.value = o.raw[i.value], M.value = b, B.value && (S(o), R()), l.emit("clickItem", { data: L.value, index: b, dataItem: o.raw }), l.emit("activeChange", L.value);
  }
  return {
    getKey: C,
    selectedItems: L,
    listViewItemClass: T,
    listViewItemStyle: c,
    updateSelectedItems: R,
    onCheckItem: F,
    onClickItem: _
  };
}
const ne = /* @__PURE__ */ ve({
  name: "FListView",
  props: gt,
  emits: ["afterSearch", "checkValuesChange", "clickItem", "selectItem", "unSelectItem", "selectionChange", "removeItem", "change", "activeChange", "pageIndexChanged", "pageSizeChanged", "changed", "selectionUpdate"],
  setup(e, l) {
    var he;
    const u = r(!1), O = r(), w = r(!0), f = r(((he = e.rowOption) == null ? void 0 : he.rowHeight) || 28), i = r(!1), n = r([]), p = 0, D = r(e.columns), k = Le(e, l), g = je(e), M = He(e), I = _e(e, g), d = Pe(e, /* @__PURE__ */ new Map(), k, M, g), V = Ee(e, d, g, n, l), A = ht(e, O), S = ze(e, d), y = j(() => d.dataView.value.length), H = Ue(e, l, V, g), L = Ge(e, l, g, H, n), v = Ne(e, d, f), R = We(e, L, v), C = $e(e, d, L, M, g, v, R, f), T = Ye(e, g, R, C), c = Ke(e, g, R, C), m = qe(e, D, d, y, p, C, T, c), {
      getVisualData: F
    } = m;
    n.value = F(0, y.value + p - 1);
    const B = j(() => {
      const E = {
        "f-list-view": !0,
        "f-list-view-multiple": e.multiSelect
      };
      return e.size !== "default" && (E[`${e.size}-item`] = !0), fe(E, e.customClass);
    }), _ = j(() => !!l.slots.footer || w.value);
    function U() {
      return e.header === "SearchBar" ? be : e.header === "ContentHeader" ? It : be;
    }
    const s = U(), {
      renderHeader: o
    } = s(e, l, A, V, d), b = bt(), a = kt(e, l, d, b, n), G = Vt(e, l, n, a, b, V), {
      renderListArea: N
    } = Ct(e, l, n, d, I, b, V, m, G, a);
    function $(E) {
      A.search(E);
    }
    function oe(E) {
      E && (d.load(E), n.value = F(0, y.value + p - 1));
    }
    function se() {
      V.clearSelection(), b.clearActiveItem();
    }
    function ie() {
      return G.selectedItems.value;
    }
    function ue() {
      return G.selectedItems.value.map((E) => E[g.idField.value]);
    }
    function Q(E) {
      V.selectedValues.value = E, G.updateSelectedItems();
    }
    function Z() {
      return V.currentSelectedDataId.value;
    }
    function ee(E) {
      H.activeRowById(E);
    }
    function ce(E) {
      const Y = g.idField.value, X = n.value.find((de) => de.raw[Y] === E), te = n.value.findIndex((de) => de.raw[Y] === E);
      X && te > -1 && G.onClickItem(X, te);
    }
    function h(E) {
      const Y = g.idField.value, X = n.value.find((te) => te.raw[Y] === E);
      X && H.changeRow(X);
    }
    function x(E) {
      S.updatePagination(E);
    }
    function P(E) {
      return n.value.filter((Y) => E.includes(Y.raw[e.idField]));
    }
    l.expose({
      search: $,
      updateDataSource: oe,
      clearSelection: se,
      getSelections: ie,
      updateSelectionByIds: Q,
      getSelectionIds: ue,
      activeRowById: ee,
      getCurrentRowId: Z,
      clickRowItemById: ce,
      updatePagination: x,
      getVisibleDataByIds: P,
      selectRowById: h
    }), J(() => e.selectionValues, (E, Y) => {
      E !== Y && Q(E);
    });
    const z = Xe(e, V), {
      sidebarWidth: W,
      showSidebarCheckBox: q
    } = z, re = Je(e, l), {
      applyColumnSorter: xt,
      columnContext: Fe,
      updateColumnRenderContext: At
    } = re;
    return Qe(e, d, n, Fe, m, y, p, W, f, u, L), () => t("div", {
      class: B.value
    }, [o(), t("div", {
      ref: O,
      class: "f-list-view-content",
      onMouseover: () => {
        i.value || (i.value = !0);
      },
      onMouseleave: () => {
        i.value && (i.value = !1);
      }
    }, [N()]), _.value && t("div", {
      class: "f-list-view-footer"
    }, [e.footerTemplate ? e.footerTemplate() : l.slots.footer && l.slots.footer()])]);
  }
});
function Tt(e, l, u, O, w) {
  const f = r([]), i = r([...l]), n = r(""), p = r(""), D = j(() => {
    const v = new Set(i.value.map((R) => R[u]));
    return e.filter((R) => !v.has(R[u]));
  }), k = j(() => i.value);
  function g(v, R, C) {
    if (!R || !R.trim())
      return v;
    const T = R.toLowerCase().trim();
    return v.filter((c) => {
      const m = c[C];
      return typeof m == "string" && m.toLowerCase().includes(T);
    });
  }
  const M = j(
    () => g(D.value, n.value, "name")
  ), I = j(
    () => g(k.value, p.value, "name")
  );
  function d() {
    O.emit("update:selections", [...i.value]);
  }
  function V() {
    const v = new Set(f.value);
    if (v.size === 0)
      return;
    const R = D.value.filter((C) => v.has(C[u]));
    if (R.length === 0) {
      f.value = [];
      return;
    }
    i.value = [...i.value, ...R.map((C) => ({ ...C }))], f.value = [], d();
  }
  function A() {
    i.value = e.map((v) => ({ ...v })), f.value = [], d();
  }
  function S() {
    const v = new Set(f.value);
    if (v.size === 0)
      return;
    const R = i.value.filter((C) => v.has(C[u]));
    if (w) {
      for (const C of R)
        if (!w(C))
          return;
    }
    i.value = i.value.filter((C) => !v.has(C[u])), f.value = [], d();
  }
  function y() {
    if (w) {
      for (const v of i.value)
        if (!w(v))
          return;
    }
    i.value = [], f.value = [], d();
  }
  function H() {
    f.value = M.value.map((v) => v[u]);
  }
  function L() {
    f.value = [];
  }
  return {
    selectedIds: f,
    selections: i,
    sourceList: D,
    targetList: k,
    filteredSource: M,
    filteredTarget: I,
    sourceSearchText: n,
    targetSearchText: p,
    moveSelected: V,
    moveAll: A,
    removeSelected: S,
    removeAll: y,
    selectAllVisible: H,
    deselectAll: L,
    filterByKeyword: g
  };
}
const ae = /* @__PURE__ */ ve({
  name: "FTransfer",
  props: ge,
  emits: ["change", "activeChange", "selectItem", "unSelectItem", "removeItem", "update:selections"],
  setup(e, l) {
    const u = r(e.identifyField), O = r(e.displayType), w = r(!1), f = r(e.dataSource), i = r(e.textField), n = r(e.selections || []), p = j(() => n.value.map((h) => h[u.value])), D = /* @__PURE__ */ new Map(), k = r(), g = r(), M = r();
    let I;
    const {
      selectedIds: d,
      filteredSource: V,
      filteredTarget: A,
      sourceList: S,
      targetList: y,
      sourceSearchText: H,
      targetSearchText: L,
      moveSelected: v,
      moveAll: R,
      removeSelected: C,
      removeAll: T,
      selectAllVisible: c
    } = Tt(f.value, n.value, u.value, l, e.checkBeforeRemoveItem || void 0);
    function m() {
      const h = /* @__PURE__ */ new Map(), x = e.selectionValues || [];
      x.length && x.reduce((z, W) => (z.set(W, !0), z), h);
      const P = e.selections || [];
      P.length && (h.clear(), P.reduce((z, W) => (z.set(W[u.value], !0), z), h)), n.value.length || (n.value = f.value.filter((z) => h.has(z[u.value])).map((z) => Object.assign({}, z))), f.value.forEach((z) => {
        const W = z[u.value], q = h.has(W);
        z.checked = q, q && D.set(W, z);
      });
    }
    J(() => e.selections, (h) => {
      e.preset !== "modern" && (n.value = h || [], m());
    }), m(), J(() => e.dataSource, (h) => {
      var x;
      f.value = h, e.preset === "classic" && (m(), (x = M.value) == null || x.updateDataSource(h));
    });
    const F = j(() => O.value === "List"), B = j(() => O.value === "Tree");
    function _(h) {
      const x = Ce(n.value);
      n.value = h.map((P) => Object.assign({}, P)), l.emit("change", n.value, x);
    }
    function U(h) {
      l.emit("selectItem", h);
    }
    function s(h) {
      l.emit("unSelectItem", h);
    }
    function o() {
      return t(ne, {
        class: "f-utils-fill",
        data: f.value,
        multiSelect: !0,
        itemClass: "f-transfer-list-item",
        textField: i.value,
        selection: {
          enableSelectRow: !0,
          multiSelect: !0,
          multiSelectMode: "OnCheckAndClick",
          showCheckbox: !0,
          showSelectAll: !1,
          showSelection: !0
        },
        draggable: !1,
        header: "Search",
        headerClass: "transfer-search-box",
        selectionValues: p.value,
        onSelectionUpdate: _
      }, null);
    }
    function b() {
      return t(ye, {
        ref: M,
        data: f.value,
        columns: e.columns,
        virtualized: e.virtualized,
        rowOption: e.rowOption,
        textField: i.value,
        selection: {
          enableSelectRow: !0,
          multiSelect: !0,
          multiSelectMode: "OnCheckAndClick",
          showCheckbox: !0,
          showSelectAll: !1,
          showSelection: !0
        },
        selectionValues: p.value,
        onSelectionUpdate: _,
        onSelectItem: U,
        onUnSelectItem: s
      }, null);
    }
    function a() {
      return t("div", {
        class: "f-utils-fill option-pane d-flex flex-column"
      }, [t("div", {
        class: "f-utils-flex-column option-pane-content f-utils-fill"
      }, [t("div", {
        class: "container columns-box d-flex f-utils-fill"
      }, [F.value && o(), B.value && b()])])]);
    }
    function G(h) {
      const x = h[u.value];
      if (x !== null || x !== void 0) {
        n.value = n.value.filter((z) => z[u.value] !== x);
        const P = D.get(x);
        P && (P.checked = !1, D.delete(x)), l.emit("change", n.value), l.emit("removeItem", h);
      }
    }
    J(n, (h) => {
      var z, W, q;
      if (e.preset === "modern")
        return;
      (z = k.value) == null || z.updateDataSource(Ce(h));
      const x = I == null ? void 0 : I[u.value], P = h.find((re) => x === re[u.value]);
      P ? (W = k.value) == null || W.activeRowById(P[u.value]) : (I = null, (q = k.value) == null || q.activeRowById(""));
    });
    function N(h) {
      const x = /* @__PURE__ */ new Map();
      n.value.reduce((P, z) => (P.set(z[u.value], z), P), x), n.value = h.map((P) => x.get(P[u.value])), l.emit("change", n.value);
    }
    function $(h) {
      I = h[0], l.emit("activeChange", h);
    }
    function oe() {
      var h;
      return t(ne, {
        ref: k,
        columns: e.columns,
        style: "flex:1",
        data: n.value,
        draggable: !0,
        view: "DraggableView",
        "keep-order": !0,
        textField: i.value,
        itemClass: e.selectedItemClass,
        onChange: N,
        onRemoveItem: G,
        onActiveChange: $,
        checkBeforeRemoveItem: e.checkBeforeRemoveItem
      }, {
        itemContent: (h = l.slots) != null && h.text ? (x) => {
          var P;
          return ((P = l.slots) == null ? void 0 : P.text) && l.slots.text(x);
        } : null
      });
    }
    function se() {
      return t("div", {
        class: "f-utils-fill selection-pane d-flex flex-column"
      }, [t("div", {
        class: "f-utils-flex-column selection-pane-content f-utils-fill"
      }, [t("div", {
        class: "selection-pane-title d-flex align-items-center p-0 pl-2",
        style: "height: 36px;"
      }, [t("span", {
        class: "selection-title"
      }, [K.getLocaleValue("transfer.selectedStart")]), t("span", {
        class: "selection-count"
      }, [n.value && n.value.length]), t("span", {
        class: "selection-item-title"
      }, [K.getLocaleValue("transfer.selectedEnd")])]), t("div", {
        class: "container columns-box f-utils-fill d-flex"
      }, [oe()])])]);
    }
    function ie() {
      if (l.slots.source)
        return l.slots.source({
          data: S.value,
          columns: e.columns,
          searchText: H.value,
          selectedIds: d.value,
          onSelect: (x) => {
            d.value = x;
          },
          onSelectAll: c
        });
      const h = O.value === "Tree";
      return t("div", {
        class: "f-utils-fill option-pane d-flex flex-column"
      }, [e.enableSearch && t("div", {
        class: "transfer-search-box p-2"
      }, [t("input", {
        type: "text",
        class: "form-control",
        placeholder: K.getLocaleValue("common.search") || "搜索...",
        value: H.value,
        onInput: (x) => H.value = x.target.value
      }, null)]), t("div", {
        class: "f-utils-flex-column f-utils-fill"
      }, [h ? t(ye, {
        ref: M,
        data: V.value,
        columns: e.columns,
        virtualized: e.virtualized,
        rowOption: e.rowOption,
        textField: i.value,
        selection: {
          enableSelectRow: !0,
          multiSelect: !0,
          multiSelectMode: "OnCheckAndClick",
          showCheckbox: !0,
          showSelectAll: !1,
          showSelection: !0
        },
        selectionValues: d.value,
        onSelectionUpdate: (x) => d.value = x.map((P) => P[u.value]),
        onSelectItem: U,
        onUnSelectItem: s
      }, null) : t(Se, {
        dataSource: V.value,
        columns: e.columns,
        showSelection: !0,
        multiSelect: !0,
        selectionValues: d.value,
        onSelectionUpdate: (x) => d.value = x.map((P) => P[u.value]),
        onSelectItem: U,
        onUnSelectItem: s
      }, null)])]);
    }
    function ue() {
      return l.slots.target ? l.slots.target({
        data: y.value,
        columns: e.columns,
        searchText: L.value,
        selectedIds: d.value,
        onRemove: (h) => {
          d.value = [h], C();
        }
      }) : t("div", {
        class: "f-utils-fill selection-pane d-flex flex-column"
      }, [e.enableSearch && t("div", {
        class: "transfer-search-box p-2"
      }, [t("input", {
        type: "text",
        class: "form-control",
        placeholder: K.getLocaleValue("common.search") || "搜索...",
        value: L.value,
        onInput: (h) => L.value = h.target.value
      }, null)]), t("div", {
        class: "selection-pane-title d-flex align-items-center p-0 pl-2",
        style: "height: 36px;"
      }, [t("span", {
        class: "selection-title"
      }, [K.getLocaleValue("transfer.selectedStart")]), t("span", {
        class: "selection-count"
      }, [y.value && y.value.length]), t("span", {
        class: "selection-item-title"
      }, [K.getLocaleValue("transfer.selectedEnd")])]), t("div", {
        class: "f-utils-flex-column f-utils-fill"
      }, [t(Se, {
        dataSource: A.value,
        columns: e.columns,
        selectionValues: d.value,
        multiSelect: !0,
        onSelectionUpdate: (h) => d.value = h.map((x) => x[u.value]),
        commandColumn: [{
          type: "remove",
          title: "",
          width: 40,
          onClick: (h) => {
            d.value = [h[u.value]], C();
          }
        }]
      }, null)])]);
    }
    function Q() {
      if (l.slots.operations)
        return l.slots.operations({
          sourceCount: S.value.length,
          targetCount: y.value.length,
          selectedCount: d.value.length,
          onMoveSelected: v,
          onMoveAll: R,
          onRemoveSelected: C,
          onRemoveAll: T
        });
      const h = S.value.length === 0, x = y.value.length === 0, P = d.value.length === 0;
      return t("div", {
        class: "f-multi-select-list-btns"
      }, [t("button", {
        title: "移动所有到右侧",
        class: "btn btn-secondary f-btn-icon",
        type: "button",
        disabled: h,
        onClick: R
      }, [t("span", {
        class: "f-icon f-icon-arrow-seek-right"
      }, null)]), t("button", {
        title: "移动到右侧",
        class: "btn btn-secondary f-btn-icon right-all",
        type: "button",
        disabled: h || P,
        onClick: v
      }, [t("span", {
        class: "f-icon f-icon-arrow-chevron-right"
      }, null)]), t("button", {
        title: "移动到左侧",
        class: "btn btn-secondary f-btn-icon",
        type: "button",
        disabled: x || P,
        onClick: C
      }, [t("span", {
        class: "f-icon f-icon-arrow-chevron-left"
      }, null)]), t("button", {
        title: "移动所有到左侧",
        class: "btn btn-secondary f-btn-icon",
        type: "button",
        disabled: x,
        onClick: T
      }, [t("span", {
        class: "f-icon f-icon-arrow-seek-left"
      }, null)])]);
    }
    const Z = j(() => ({
      "f-transfer": !0,
      row: !0,
      "f-utils-fill": w.value
    })), ee = j(() => ({
      height: w.value ? "100%" : "480px"
    }));
    function ce() {
      return t("div", {
        ref: g,
        class: Z.value,
        style: ee.value
      }, [ie(), Q(), ue()]);
    }
    return ke(() => {
      g.value && g.value.parentElement && getComputedStyle(g.value.parentElement).display === "flex" && (w.value = !0);
    }), l.expose({
      selectRowById: (h) => {
        var x;
        (x = k.value) == null || x.clickRowItemById(h);
      }
    }), () => e.preset === "modern" ? ce() : t("div", {
      ref: g,
      class: Z.value,
      style: ee.value
    }, [l.slots.children ? l.slots.children({
      selections: n.value
    }) : a(), se()]);
  }
}), Ft = /* @__PURE__ */ ve({
  name: "FTransferDesign",
  props: ge,
  emits: ["change"],
  setup(e, l) {
    const u = r(e.identifyField), O = r("已选："), w = r("项数据"), f = r(e.displayType), i = r(!1), n = r(e.dataSource), p = r(e.selections || []), D = j(() => p.value.map((m) => m[u.value])), k = /* @__PURE__ */ new Map();
    function g() {
      const m = /* @__PURE__ */ new Map(), F = e.selectionValues || [];
      F.length && F.reduce((_, U) => (_.set(U, !0), _), m);
      const B = e.selections || [];
      B.length && (m.clear(), B.reduce((_, U) => (_.set(U[u.value], !0), _), m)), p.value.length || (p.value = n.value.filter((_) => m.has(_[u.value])).map((_) => Object.assign({}, _))), n.value.forEach((_) => {
        const U = _[u.value], s = m.has(U);
        _.checked = s, s && k.set(U, _);
      });
    }
    g();
    const M = j(() => f.value === "List"), I = j(() => f.value === "Tree");
    function d(m) {
      p.value = m.map((F) => Object.assign({}, F)), l.emit("change", p.value);
    }
    function V() {
      return t(ne, {
        class: "f-utils-fill",
        data: n.value,
        "multi-select": !0,
        draggable: !1,
        header: "Search",
        headerClass: "transfer-search-box",
        "selection-values": D.value,
        onSelectionChange: d
      }, {
        default: () => [pe(" ")]
      });
    }
    function A() {
      return t(le, null, null);
    }
    function S() {
      return t("div", {
        class: "f-utils-fill option-pane d-flex flex-column"
      }, [t("div", {
        class: "f-utils-flex-column option-pane-content f-utils-fill"
      }, [t("div", {
        class: "container columns-box d-flex f-utils-fill"
      }, [M.value && V(), I.value && A()])])]);
    }
    function y(m) {
      const F = m[u.value];
      if (F !== null || F !== void 0) {
        p.value = p.value.filter((_) => _[u.value] !== F);
        const B = k.get(F);
        B && (B.checked = !1, k.delete(F)), l.emit("change", p.value);
      }
    }
    function H(m) {
      const F = /* @__PURE__ */ new Map();
      p.value.reduce((B, _) => (B.set(_[u.value], _), B), F), p.value = m.map((B) => F.get(B[u.value])), l.emit("change", p.value);
    }
    function L() {
      return t(ne, {
        style: "flex:1",
        data: p.value,
        draggable: !0,
        view: "DraggableView",
        "keep-order": !0,
        onChange: H,
        onRemoveItem: y
      }, {
        default: () => [pe(" ")]
      });
    }
    function v() {
      return t("div", {
        class: "f-utils-fill selection-pane d-flex flex-column"
      }, [t("div", {
        class: "f-utils-flex-column selection-pane-content f-utils-fill"
      }, [t("div", {
        class: "selection-pane-title"
      }, [t("span", {
        class: "selection-title"
      }, [O.value]), t("span", {
        class: "selection-count"
      }, [p.value && p.value.length]), t("span", {
        class: "selection-item-title"
      }, [w.value])]), t("div", {
        class: "container columns-box f-utils-fill d-flex"
      }, [L()])])]);
    }
    const R = j(() => ({
      transfer: !0,
      row: !0,
      "f-utils-fill": i.value
    })), C = r(), T = Re("design-item-context"), c = Ze(C, T);
    return ke(() => {
      C.value.componentInstance = c;
    }), l.expose(c.value), () => t("div", {
      ref: C,
      class: R.value,
      style: "height:480px"
    }, [S(), v()]);
  }
});
ae.register = (e, l, u) => {
  e.transfer = ae, l.transfer = Te;
};
ae.registerDesigner = (e, l, u) => {
  e.transfer = Ft, l.transfer = Te;
};
const Et = Be(ae);
export {
  ae as FTransfer,
  Et as default,
  Te as propsResolver,
  ge as transferProps
};