vuux/dist/es/Transfer/src/hook/useTransfer.mjs

Vue3 Nuxt3 Nuxt4 组件库

import { computed as c, ref as f, watchEffect as I, onUnmounted as U } from "vue";
const M = (i, r) => {
  const d = c(() => i.label), a = c(() => i.value), h = c(() => i.disabled), n = f([]), m = c(() => ({
    "--transfer-theme": i.theme,
    "--transfer-height": `${i.height}px`,
    "--transfer-width": `${i.width}px`
  })), o = c(() => i.list.filter((e) => !n.value.some((t) => t[a.value] === e[a.value]))), v = f([]), u = f([]), L = (e) => v.value.includes(e[a.value]), b = (e, t) => {
    const l = e[a.value];
    t ? !v.value.includes(l) && v.value.push(l) : v.value = v.value.filter((s) => s !== l);
  }, R = c(() => {
    const e = o.value.filter((t) => !t[h.value]);
    return e.length > 0 && v.value.length === e.length;
  }), w = c(() => {
    const e = o.value.filter((t) => !t[h.value]);
    return v.value.length > 0 && v.value.length < e.length;
  }), V = (e) => {
    v.value = e ? o.value.filter((t) => !t[h.value]).map((t) => t[a.value]) : [];
  }, k = (e) => u.value.includes(e[a.value]), y = (e, t) => {
    const l = e[a.value];
    t ? !u.value.includes(l) && u.value.push(l) : u.value = u.value.filter((s) => s !== l);
  }, A = c(() => {
    const e = n.value.filter((t) => !t[h.value]);
    return e.length > 0 && u.value.length === e.length;
  }), C = c(() => {
    const e = n.value.filter((t) => !t[h.value]);
    return u.value.length > 0 && u.value.length < e.length;
  }), E = (e) => {
    u.value = e ? n.value.filter((t) => !t[h.value]).map((t) => t[a.value]) : [];
  }, g = () => {
    const e = n.value.map((t) => t[a.value]);
    r("update:modelValue", e), r("change", e);
  }, x = () => {
    if (v.value.length === 0)
      return;
    const e = [];
    for (let l = 0; l < i.list.length; l++) {
      const s = i.list[l];
      v.value.includes(s[a.value]) && !s[h.value] && e.push(s);
    }
    const t = new Set(n.value.map((l) => l[a.value]));
    for (let l = 0; l < e.length; l++) {
      const s = e[l];
      t.has(s[a.value]) || n.value.push(s);
    }
    v.value = [];
    for (let l = 0; l < e.length; l++) {
      const s = e[l][a.value];
      u.value = u.value.filter((T) => T !== s);
    }
    g();
  }, S = () => {
    if (u.value.length === 0)
      return;
    const e = [];
    for (let t = 0; t < n.value.length; t++) {
      const l = n.value[t];
      u.value.includes(l[a.value]) ? l[h.value] && e.push(l) : e.push(l);
    }
    n.value = e, u.value = [], v.value = [], g();
  }, K = I(() => {
    Array.isArray(i.modelValue) ? (n.value = i.list.filter((l) => i.modelValue.includes(l[a.value])), u.value = []) : (n.value = [], u.value = []);
    const e = new Set(n.value.map((l) => l[a.value])), t = [];
    for (let l = 0; l < i.list.length; l++) {
      const s = i.list[l];
      e.has(s[a.value]) && t.push(s);
    }
    n.value = t, v.value = [];
  });
  return U(() => {
    K();
  }), {
    labelKey: d,
    valueKey: a,
    rightList: n,
    styles: m,
    leftList: o,
    leftCheckedValues: v,
    rightCheckedValues: u,
    isLeftChecked: L,
    onLeftCheck: b,
    isLeftAllSelected: R,
    isLeftIndeterminate: w,
    toggleLeftAll: V,
    isRightChecked: k,
    onRightCheck: y,
    isRightAllSelected: A,
    isRightIndeterminate: C,
    toggleRightAll: E,
    moveToRight: x,
    moveToLeft: S
  };
};
export {
  M as useTransfer
};