vexip-ui/es/components/transfer/transfer.mjs

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

import { defineComponent as ve, ref as u, toRef as be, computed as c, watchEffect as B, watch as M, reactive as me, createVNode as i, renderSlot as ye, mergeProps as K } from "vue";
import "../button/index.mjs";
import "../icon/index.mjs";
import "../renderer/index.mjs";
import "../form/index.mjs";
import { useProps as he, createIconProp as Se, createStateProp as Te, useNameHelper as ke, useLocale as Ce, useIcons as we, emitEvent as N } from "@vexip-ui/config";
import { isNull as Ee } from "@vexip-ui/utils";
import { useRtl as Fe, createSlotRender as Le } from "@vexip-ui/hooks";
import U from "./transfer-panel.mjs";
import { transferProps as Ie } from "./props.mjs";
import { useFieldStore as Pe } from "../form/helper.mjs";
import j from "../renderer/renderer.mjs";
import q from "../button/button.mjs";
import D from "../icon/icon.mjs";
const Re = {
  value: "value",
  label: "label",
  disabled: "disabled"
}, De = /* @__PURE__ */ ve({
  name: "Transfer",
  props: Ie,
  emits: ["update:value"],
  setup(G, {
    slots: x,
    emit: J,
    expose: Q
  }) {
    const {
      idFor: W,
      labelId: X,
      state: Y,
      disabled: Z,
      loading: _,
      validateField: ee,
      getFieldValue: te,
      setFieldValue: ae
    } = Pe(() => {
      var t, a;
      return (a = (t = b.value) == null ? void 0 : t.$el) == null ? void 0 : a.focus();
    }), e = he("transfer", G, {
      state: Te(Y),
      locale: null,
      options: {
        default: () => [],
        static: !0
      },
      value: {
        default: () => te(),
        static: !0
      },
      disabled: () => Z.value,
      paged: !1,
      filter: !1,
      emptyText: null,
      keyConfig: () => ({}),
      optionHeight: {
        default: 32,
        validator: (t) => t > 0
      },
      ignoreCase: !1,
      sourceTitle: null,
      targetTitle: null,
      deepState: !1,
      loading: () => _.value,
      loadingIcon: Se(),
      loadingLock: !1,
      loadingEffect: null,
      slots: () => ({})
    }), {
      isRtl: S
    } = Fe(), r = ke("transfer"), g = Ce("transfer", be(e, "locale")), T = we(), d = u(null), p = u(/* @__PURE__ */ new Set()), v = u(/* @__PURE__ */ new Set()), L = u([]), I = u([]), P = u([]), b = u(), k = u(), le = c(() => ({
      ...Re,
      ...e.keyConfig
    }));
    let C = /* @__PURE__ */ new Map(), f = e.value;
    const V = u(0);
    B(() => {
      e.keyConfig.value, e.keyConfig.label, e.keyConfig.disabled;
      for (let t = 0, a = e.options.length; t < a; ++t)
        e.options[t];
      V.value++;
    }), M(V, oe, {
      immediate: !0
    }), B(() => {
      if (!d.value.size) {
        L.value = Array.from(P.value), I.value = [];
        return;
      }
      const t = new Set(d.value), a = [], l = [];
      for (const o of P.value)
        t.has(o.value) ? a.push(o) : l.push(o);
      I.value = a, L.value = l;
    });
    function oe() {
      const {
        value: t,
        label: a,
        disabled: l
      } = le.value, o = C, s = /* @__PURE__ */ new Map();
      e.options.forEach((w) => {
        const E = typeof w == "string" ? {
          [t]: w
        } : w, F = E[t];
        if (Ee(F)) return;
        const fe = E[a] || String(F), {
          [l]: ge = !1
        } = E, m = o.get(E.value), pe = me({
          disabled: ge,
          value: F,
          label: fe,
          hidden: (m == null ? void 0 : m.hidden) ?? !1,
          hitting: (m == null ? void 0 : m.hitting) ?? !1,
          data: w
        });
        s.set(F, pe);
      }), C = s, P.value = Array.from(s.values()), d.value = new Set(f);
    }
    const R = c(() => e.loading && e.loadingLock), ne = c(() => [r.b(), r.bs("vars"), {
      [r.bm("inherit")]: e.inherit,
      [r.bm(e.state)]: e.state !== "default",
      [r.bm("readonly")]: R.value,
      [r.bm("loading")]: e.loading
    }]), H = c(() => e.deepState && e.state !== "default" ? e.state : "primary"), re = c(() => !!p.value.size), ie = c(() => !!v.value.size), se = c(() => e.ignoreCase ? (t, a) => a.label.toLocaleLowerCase().includes(t) : (t, a) => a.label.includes(t)), ue = c(() => O("source")), ce = c(() => O("target"));
    M(() => e.value, (t) => {
      f = t, d.value = new Set(f);
    }), Q({
      handleToTarget: y,
      handleToSource: h,
      handlePanelFocus: $,
      handlePanelBlur: de,
      focus: (t) => {
        var a, l;
        return (l = (a = b.value) == null ? void 0 : a.$el) == null ? void 0 : l.focus(t);
      },
      blur: () => {
        var t, a, l, o;
        (a = (t = b.value) == null ? void 0 : t.$el) == null || a.blur(), (o = (l = k.value) == null ? void 0 : l.$el) == null || o.blur();
      }
    });
    function O(t) {
      const a = e.filter;
      if (a)
        return typeof a == "function" ? (l, o) => a(l, o, t) : se.value;
    }
    function z() {
      f = Array.from(d.value), J("update:value", f), ae(f), N(e.onChange, f), ee();
    }
    function y() {
      for (const t of p.value)
        d.value.add(t);
      p.value.clear(), z();
    }
    function h() {
      for (const t of v.value)
        d.value.delete(t);
      v.value.clear(), z();
    }
    function A(t) {
      const a = {
        source: Array.from(p.value),
        target: Array.from(v.value)
      }, l = {
        source: a.source.map((o) => {
          var s;
          return ((s = C.get(o)) == null ? void 0 : s.data) ?? "";
        }),
        target: a.target.map((o) => {
          var s;
          return ((s = C.get(o)) == null ? void 0 : s.data) ?? "";
        })
      };
      N(e.onSelect, t, a, l);
    }
    function $(t) {
      var a, l;
      t === "source" ? (a = b.value) == null || a.$el.focus() : (l = k.value) == null || l.$el.focus();
    }
    function de() {
      var t, a;
      (t = b.value) == null || t.$el.blur(), (a = k.value) == null || a.$el.blur();
    }
    function n(t) {
      let a = Le(x, t);
      if (!a) {
        for (const l of t)
          if (a = e.slots[l], typeof a == "function")
            break;
        return typeof a == "function" ? (l) => i(j, {
          renderer: a,
          data: l
        }, null) : null;
      }
      return null;
    }
    return () => i("div", {
      id: W.value,
      class: ne.value,
      role: "application",
      "aria-labelledby": X.value
    }, [i(U, {
      ref: b,
      selected: p.value,
      "onUpdate:selected": (t) => p.value = t,
      type: "source",
      class: r.bem("panel", "source"),
      state: e.state,
      paged: e.paged,
      filter: ue.value,
      disabled: e.disabled,
      title: e.sourceTitle || g.value.source,
      options: L.value,
      "empty-text": e.emptyText || g.value.empty,
      "option-height": e.optionHeight,
      "ignore-case": e.ignoreCase,
      "deep-state": e.deepState,
      loading: e.loading,
      "loading-icon": e.loadingIcon,
      "loading-lock": e.loadingLock,
      "loading-effect": e.loadingEffect,
      locale: g.value,
      onSelect: () => A("source"),
      onEnter: y,
      onSwitch: () => $("target")
    }, {
      header: n(["source-header", "sourceHeader", "header"]),
      title: n(["source-title", "sourceTitle", "title"]),
      body: n(["source-body", "sourceBody", "body"]),
      footer: n(["source-footer", "sourceFooter", "footer"]),
      option: n(["source-option", "sourceOption", "option"]),
      label: n(["source-label", "sourceLabel", "label"])
    }), i("div", {
      class: r.be("actions")
    }, [ye(x, "actions", {
      handleToTarget: y,
      handleToSource: h
    }, () => [i(j, {
      renderer: e.slots.actions,
      data: {
        handleToTarget: y,
        handleToSource: h
      }
    }, {
      default: () => [i(q, {
        key: 1,
        inherit: !0,
        class: r.be("action"),
        type: H.value,
        size: "small",
        disabled: e.disabled || !re.value,
        loading: R.value,
        "loading-icon": e.loadingIcon,
        "loading-effect": e.loadingEffect,
        style: {
          marginBottom: "6px"
        },
        onClick: y
      }, {
        icon: () => i(D, K(S.value ? T.value.angleLeft : T.value.angleRight, {
          label: S.value ? "to left" : "to right"
        }), null)
      }), i(q, {
        key: 2,
        inherit: !0,
        class: r.be("action"),
        type: H.value,
        size: "small",
        disabled: e.disabled || !ie.value,
        loading: R.value,
        "loading-icon": e.loadingIcon,
        "loading-effect": e.loadingEffect,
        style: {
          margin: "0"
        },
        onClick: h
      }, {
        icon: () => i(D, K(S.value ? T.value.angleRight : T.value.angleLeft, {
          label: S.value ? "to right" : "to left"
        }), null)
      })]
    })])]), i(U, {
      ref: k,
      selected: v.value,
      "onUpdate:selected": (t) => v.value = t,
      type: "target",
      class: r.bem("panel", "target"),
      state: e.state,
      paged: e.paged,
      filter: ce.value,
      disabled: e.disabled,
      title: e.targetTitle || g.value.target,
      options: I.value,
      "empty-text": e.emptyText || g.value.empty,
      "option-height": e.optionHeight,
      "ignore-case": e.ignoreCase,
      "deep-state": e.deepState,
      loading: e.loading,
      "loading-icon": e.loadingIcon,
      "loading-lock": e.loadingLock,
      "loading-effect": e.loadingEffect,
      locale: g.value,
      onSelect: () => A("target"),
      onEnter: h,
      onSwitch: () => $("source")
    }, {
      header: n(["target-header", "targetHeader", "header"]),
      title: n(["target-title", "targetTitle", "title"]),
      body: n(["target-body", "targetBody", "body"]),
      footer: n(["target-footer", "targetFooter", "footer"]),
      option: n(["target-option", "targetOption", "option"]),
      label: n(["target-label", "targetLabel", "label"])
    })]);
  }
});
export {
  De as default
};
//# sourceMappingURL=transfer.mjs.map