x-next 1.16.1 → 1.17.0

package/dist/components/transfer/transfer-panel.d.ts

@@ -0,0 +1,82 @@
+import { PropType, SlotsType } from 'vue';
+import { VirtualListProps } from '../virtual-list-v2/interface';
+import { TransferItem, TransferValue, TransferType, TransferPagination, TransferSlots } from './interface';
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    type: {
+        type: PropType<TransferType>;
+        required: true;
+    };
+    data: {
+        type: PropType<TransferItem[]>;
+        required: true;
+    };
+    selectedKeys: {
+        type: PropType<TransferValue[]>;
+        required: true;
+    };
+    title: {
+        type: StringConstructor;
+        required: true;
+    };
+    disabled: BooleanConstructor;
+    loading: BooleanConstructor;
+    simple: BooleanConstructor;
+    oneWay: BooleanConstructor;
+    showSearch: BooleanConstructor;
+    showSelectAll: BooleanConstructor;
+    searchPlaceholder: StringConstructor;
+    filterOption: PropType<(input: string, item: TransferItem, type: TransferType) => boolean>;
+    pagination: PropType<boolean | TransferPagination>;
+    virtualListProps: PropType<VirtualListProps>;
+}>, () => VNode, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    select: (_values: TransferValue[], _checked: boolean) => true;
+    move: (_values: TransferValue[]) => true;
+    search: (_value: string) => true;
+    scroll: (_event: Event) => true;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    type: {
+        type: PropType<TransferType>;
+        required: true;
+    };
+    data: {
+        type: PropType<TransferItem[]>;
+        required: true;
+    };
+    selectedKeys: {
+        type: PropType<TransferValue[]>;
+        required: true;
+    };
+    title: {
+        type: StringConstructor;
+        required: true;
+    };
+    disabled: BooleanConstructor;
+    loading: BooleanConstructor;
+    simple: BooleanConstructor;
+    oneWay: BooleanConstructor;
+    showSearch: BooleanConstructor;
+    showSelectAll: BooleanConstructor;
+    searchPlaceholder: StringConstructor;
+    filterOption: PropType<(input: string, item: TransferItem, type: TransferType) => boolean>;
+    pagination: PropType<boolean | TransferPagination>;
+    virtualListProps: PropType<VirtualListProps>;
+}>> & Readonly<{
+    onSearch?: ((_value: string) => any) | undefined;
+    onSelect?: ((_values: TransferValue[], _checked: boolean) => any) | undefined;
+    onScroll?: ((_event: Event) => any) | undefined;
+    onMove?: ((_values: TransferValue[]) => any) | undefined;
+}>, {
+    disabled: boolean;
+    loading: boolean;
+    simple: boolean;
+    oneWay: boolean;
+    showSearch: boolean;
+    showSelectAll: boolean;
+}, SlotsType<{
+    item?: TransferSlots["item"];
+    default?: TransferSlots["source"];
+    title?: TransferSlots["source-title"];
+    footer?: TransferSlots["footer"];
+    empty?: TransferSlots["empty"];
+}>, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/transfer/utils.d.ts

@@ -0,0 +1,5 @@
+import { TransferItem, TransferValue } from './interface';
+/** Typed keys also serve as stable Vue/VirtualList keys. */
+export declare const transferKey: (value: TransferValue) => string;
+export declare const uniqueValues: (values: TransferValue[]) => TransferValue[];
+export declare const uniqueItems: (data: TransferItem[]) => TransferItem[];

package/dist/es/components/index.js

@@ -5,7 +5,7 @@ import { Dialog as n } from "./dialog/index.js";
 import { Drawer as u } from "./drawer/index.js";
 import { Dropdown as c, DropdownButton as d, DropdownGroup as T, DropdownOption as S, DropdownSubmenu as P } from "./dropdown/index.js";
 import { Empty as I } from "./empty/index.js";
-import { DatePicker as w, MonthPicker as L, QuarterPicker as b, RangePicker as s, WeekPicker as C, YearPicker as h } from "./date-picker/index.js";
+import { DatePicker as s, MonthPicker as w, QuarterPicker as L, RangePicker as b, WeekPicker as C, YearPicker as h } from "./date-picker/index.js";
 import { Form as y, FormItem as G } from "./form/index.js";
 import { Checkbox as B, CheckboxGroup as M } from "./form-checkbox/index.js";
 import { Input as A, InputGroup as E, InputPassword as _, InputSearch as N } from "./form-input/index.js";
@@ -22,7 +22,7 @@ import { Draggable as xo } from "./draggable/index.js";
 import { Col as no, Grid as io, GridItem as uo, Row as lo } from "./grid/index.js";
 import { Heatmap as To } from "./heatmap/index.js";
 import { Image as Po, ImagePreview as go, ImagePreviewAction as Io, ImagePreviewGroup as ko } from "./image/index.js";
-import { Layout as Lo, LayoutContent as bo, LayoutFooter as so, LayoutHeader as Co, LayoutSidebar as ho } from "./layout/index.js";
+import { Layout as wo, LayoutContent as Lo, LayoutFooter as bo, LayoutHeader as Co, LayoutSidebar as ho } from "./layout/index.js";
 import { LineChart as yo } from "./line-chart/index.js";
 import { Link as vo } from "./link/index.js";
 import { Menu as Mo, MenuItem as Ro, MenuItemGroup as Ao, MenuSubMenu as Eo } from "./menu/index.js";
@@ -43,28 +43,29 @@ import { Space as ur } from "./space/index.js";
 import { Spin as cr } from "./spin/index.js";
 import { Step as Tr, Steps as Sr } from "./steps/index.js";
 import { Table as gr, TableColumn as Ir } from "./table/index.js";
-import { TabPane as wr, Tabs as Lr } from "./tabs/index.js";
-import { Tag as sr } from "./tag/index.js";
+import { TabPane as sr, Tabs as wr } from "./tabs/index.js";
+import { Tag as br } from "./tag/index.js";
 import { TimePicker as hr } from "./time-picker/index.js";
 import { TimeRangeSelector as yr } from "./time-range-selector/index.js";
 import { Timeline as vr } from "./timeline/index.js";
 import { TimelineItem as Mr } from "./timeline-item/index.js";
 import { Tooltip as Ar } from "./tooltip/index.js";
 import { TreeSelect as _r, TreeSelectDropdown as Nr } from "./tree-select/index.js";
-import { TrendChart as jr } from "./trend-chart/index.js";
-import { Trigger as Hr } from "./trigger/index.js";
-import { Upload as Wr } from "./upload/index.js";
-import { Watermark as zr } from "./watermark/index.js";
-import { TABLE_LOCALE_EN_US as Yr, TABLE_LOCALE_ZH_CN as Zr, formatLocaleText as qr } from "./table/locale.js";
-import { default as Vr } from "./table/table-tbody.js";
-import { default as $r } from "./table/table-td.js";
-import { default as re } from "./table/table-th.js";
-import { default as te } from "./table/table-thead.js";
-import { default as me } from "./table/table-tr.js";
-import { configProviderInjectionKey as xe } from "./config-provider/context.js";
-import { formInjectionKey as ne, formItemInjectionKey as ie } from "./form/context.js";
-import { vDraggable as le } from "./draggable/directive.js";
-import { vWatermark as de } from "./watermark/directive.js";
+import { Transfer as jr } from "./transfer/index.js";
+import { TrendChart as Hr } from "./trend-chart/index.js";
+import { Trigger as Wr } from "./trigger/index.js";
+import { Upload as zr } from "./upload/index.js";
+import { Watermark as Yr } from "./watermark/index.js";
+import { TABLE_LOCALE_EN_US as qr, TABLE_LOCALE_ZH_CN as Jr, formatLocaleText as Vr } from "./table/locale.js";
+import { default as $r } from "./table/table-tbody.js";
+import { default as re } from "./table/table-td.js";
+import { default as te } from "./table/table-th.js";
+import { default as me } from "./table/table-thead.js";
+import { default as xe } from "./table/table-tr.js";
+import { configProviderInjectionKey as ne } from "./config-provider/context.js";
+import { formInjectionKey as ue, formItemInjectionKey as le } from "./form/context.js";
+import { vDraggable as de } from "./draggable/directive.js";
+import { vWatermark as Se } from "./watermark/directive.js";
 export {
   e as Alert,
   mo as BarChart,
@@ -75,7 +76,7 @@ export {
   no as Col,
   to as ColorPicker,
   x as ConfigProvider,
-  w as DatePicker,
+  s as DatePicker,
   n as Dialog,
   xo as Draggable,
   u as Drawer,
@@ -100,9 +101,9 @@ export {
   _ as InputPassword,
   N as InputSearch,
   H as InputTag,
-  Lo as Layout,
-  bo as LayoutContent,
-  so as LayoutFooter,
+  wo as Layout,
+  Lo as LayoutContent,
+  bo as LayoutFooter,
   Co as LayoutHeader,
   ho as LayoutSidebar,
   yo as LineChart,
@@ -112,7 +113,7 @@ export {
   Ao as MenuItemGroup,
   Eo as MenuSubMenu,
   No as Message,
-  L as MonthPicker,
+  w as MonthPicker,
   jo as Network,
   Ho as Notification,
   Wo as Pagination,
@@ -121,10 +122,10 @@ export {
   qo as Popover,
   Vo as Popup,
   $o as Progress,
-  b as QuarterPicker,
+  L as QuarterPicker,
   W as Radio,
   U as RadioGroup,
-  s as RangePicker,
+  b as RangePicker,
   rr as Rate,
   tr as ResizeBox,
   lo as Row,
@@ -142,36 +143,37 @@ export {
   Tr as Step,
   Sr as Steps,
   $ as Switch,
-  Yr as TABLE_LOCALE_EN_US,
-  Zr as TABLE_LOCALE_ZH_CN,
-  wr as TabPane,
+  qr as TABLE_LOCALE_EN_US,
+  Jr as TABLE_LOCALE_ZH_CN,
+  sr as TabPane,
   gr as Table,
   Ir as TableColumn,
-  Lr as Tabs,
-  sr as Tag,
-  Vr as Tbody,
-  $r as Td,
+  wr as Tabs,
+  br as Tag,
+  $r as Tbody,
+  re as Td,
   ro as Textarea,
-  re as Th,
-  te as Thead,
+  te as Th,
+  me as Thead,
   hr as TimePicker,
   yr as TimeRangeSelector,
   vr as Timeline,
   Mr as TimelineItem,
   Ar as Tooltip,
-  me as Tr,
+  xe as Tr,
+  jr as Transfer,
   _r as TreeSelect,
   Nr as TreeSelectDropdown,
-  jr as TrendChart,
-  Hr as Trigger,
-  Wr as Upload,
-  zr as Watermark,
+  Hr as TrendChart,
+  Wr as Trigger,
+  zr as Upload,
+  Yr as Watermark,
   C as WeekPicker,
   h as YearPicker,
-  xe as configProviderInjectionKey,
-  ne as formInjectionKey,
-  ie as formItemInjectionKey,
-  qr as formatLocaleText,
-  le as vDraggable,
-  de as vWatermark
+  ne as configProviderInjectionKey,
+  ue as formInjectionKey,
+  le as formItemInjectionKey,
+  Vr as formatLocaleText,
+  de as vDraggable,
+  Se as vWatermark
 };

package/dist/es/components/transfer/Transfer.js

@@ -0,0 +1,267 @@
+import { defineComponent as R, toRefs as G, provide as J, ref as L, computed as d, watch as D, createVNode as g, mergeProps as Q } from "vue";
+import { Button as E } from "../button/index.js";
+import U from "./transfer-panel.js";
+import { Icon as M } from "../../icons/index.js";
+import { useLocale as X } from "../../locale/index.js";
+import { useFormItem as Y, useFormItemControl as Z } from "../../_hooks/use-form-item.js";
+import { formItemInjectionKey as k } from "../form/context.js";
+import { uniqueValues as i, uniqueItems as p } from "./utils.js";
+const oe = /* @__PURE__ */ R({
+  name: "Transfer",
+  inheritAttrs: !1,
+  props: {
+    /** @zh 穿梭框数据，value 在数据内唯一 @en Transfer data with unique values */
+    data: {
+      type: Array,
+      default: () => []
+    },
+    /** @zh 目标列表的值 @en Target values @vModel */
+    modelValue: {
+      type: Array,
+      default: void 0
+    },
+    /** @zh 非受控目标默认值 @en Default target values */
+    defaultValue: {
+      type: Array,
+      default: () => []
+    },
+    /** @zh 两侧临时勾选值 @en Checked values in both panels @vModel */
+    selectedKeys: {
+      type: Array,
+      default: void 0
+    },
+    /** @zh 非受控默认勾选值 @en Default checked values */
+    defaultSelectedKeys: {
+      type: Array,
+      default: () => []
+    },
+    /** @zh 禁用整个穿梭框 @en Disable transfer */
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    /** @zh 加载中，阻止勾选和移动 @en Loading, blocks selection and moves */
+    loading: {
+      type: Boolean,
+      default: !1
+    },
+    /** @zh 错误状态 @en Error state */
+    error: {
+      type: Boolean,
+      default: !1
+    },
+    /** @zh 点击选项立即移动 @en Move items immediately when clicked */
+    simple: {
+      type: Boolean,
+      default: !1
+    },
+    /** @zh 单向模式，目标侧通过移除按钮返回 @en One-way mode with target remove buttons */
+    oneWay: {
+      type: Boolean,
+      default: !1
+    },
+    /** @zh 显示两侧搜索 @en Show search inputs */
+    showSearch: {
+      type: Boolean,
+      default: !1
+    },
+    /** @zh 显示全选，搜索/分页时仅当前可见项 @en Select all visible items */
+    showSelectAll: {
+      type: Boolean,
+      default: !0
+    },
+    /** @zh 源、目标列表标题 @en Source and target titles */
+    title: Array,
+    /** @zh 向右、向左操作文案 @en Move right and left operation labels */
+    operations: {
+      type: Array,
+      default: () => []
+    },
+    /** @zh 搜索占位文案 @en Search placeholder */
+    searchPlaceholder: String,
+    /** @zh 自定义搜索过滤 @en Custom search filter */
+    filterOption: Function,
+    /** @zh 目标排序：数据源顺序或模型追加顺序 @en Target ordering */
+    targetOrder: {
+      type: String,
+      default: "original"
+    },
+    /** @zh 两侧面板样式 @en Panel style */
+    listStyle: Object,
+    /** @zh 分页配置，优先于虚拟列表 @en Pagination takes precedence over virtual list */
+    pagination: {
+      type: [Boolean, Object],
+      default: !1
+    },
+    /** @zh 虚拟滚动配置 @en Virtual list options */
+    virtualListProps: Object
+  },
+  emits: {
+    "update:modelValue": (a) => !0,
+    "update:selectedKeys": (a) => !0,
+    /** @zh 移动完成时报告目标值、移动方向及实际移动值 @en Target values, destination and moved values */
+    change: (a, u, s) => !0,
+    /** @zh 临时勾选变化，分别报告源侧和目标侧 @en Source and target checked values */
+    select: (a, u) => !0,
+    /** @zh 搜索输入变化 @en Search input changes */
+    search: (a, u) => !0,
+    /** @zh 列表滚动 @en List scroll */
+    scroll: (a, u) => !0
+  },
+  slots: Object,
+  setup(a, {
+    attrs: u,
+    emit: s,
+    slots: r
+  }) {
+    const {
+      t: y
+    } = X(), {
+      disabled: q,
+      error: z
+    } = G(a), {
+      formItemCtx: j,
+      mergedDisabled: b,
+      mergedError: P,
+      eventHandlers: B
+    } = Y({
+      disabled: q,
+      error: z
+    }), I = Z(j, () => ({
+      ...Object.fromEntries(Object.entries(u).filter(([e]) => e === "id" || e.startsWith("aria-"))),
+      "aria-label": u["aria-label"] ?? (j.labelId ? void 0 : y("transfer.label"))
+    }), {
+      labelable: !1
+    });
+    J(k, {});
+    const K = L(i(a.modelValue ?? a.defaultValue)), T = L(i(a.selectedKeys ?? a.defaultSelectedKeys)), S = d(() => i(a.modelValue ?? K.value)), c = d(() => i(a.selectedKeys ?? T.value)), f = d(() => new Set(S.value)), _ = d(() => p(a.data)), v = d(() => new Map(_.value.map((e) => [e.value, e]))), N = d(() => _.value.filter((e) => !f.value.has(e.value))), $ = d(() => a.targetOrder === "append" ? S.value.map((e) => v.value.get(e)).filter((e) => !!e) : _.value.filter((e) => f.value.has(e.value))), O = d(() => b.value || a.loading), V = (e) => c.value.filter((l) => {
+      var t;
+      return v.value.has(l) && !((t = v.value.get(l)) != null && t.disabled) && e === "target" === f.value.has(l);
+    });
+    D(() => a.modelValue, (e) => {
+      e !== void 0 && (K.value = i(e));
+    }, {
+      deep: !0
+    }), D(() => a.selectedKeys, (e) => {
+      e !== void 0 && (T.value = i(e));
+    }, {
+      deep: !0
+    });
+    const W = (e) => {
+      if (e = i(e), e.length === c.value.length && e.every((t, n) => t === c.value[n])) return;
+      a.selectedKeys === void 0 && (T.value = e), s("update:selectedKeys", [...e]);
+      const l = e.filter((t) => {
+        var n;
+        return v.value.has(t) && !((n = v.value.get(t)) != null && n.disabled);
+      });
+      s("select", l.filter((t) => !f.value.has(t)), l.filter((t) => f.value.has(t)));
+    }, H = (e, l, t) => {
+      if (O.value || a.simple || a.oneWay && e === "target") return;
+      const n = i(l).filter((o) => {
+        const m = v.value.get(o);
+        return m && !m.disabled && e === "target" === f.value.has(o);
+      }), A = new Set(n);
+      W(t ? [...c.value, ...n] : c.value.filter((o) => !A.has(o)));
+    }, w = (e, l, t) => {
+      var m, C;
+      if (O.value) return;
+      const n = i(l).filter((h) => {
+        const F = v.value.get(h);
+        return F && !F.disabled && e === "target" === f.value.has(h);
+      });
+      if (!n.length) return;
+      const A = new Set(n), o = e === "source" ? i([...S.value, ...n]) : S.value.filter((h) => !A.has(h));
+      a.modelValue === void 0 && (K.value = o), s("update:modelValue", [...o]), s("change", [...o], e === "source" ? "target" : "source", [...n]), W(c.value.filter((h) => !A.has(h))), (C = (m = B.value) == null ? void 0 : m.onChange) == null || C.call(m, t);
+    }, x = (e) => {
+      var l;
+      return g(U, {
+        type: e,
+        data: e === "source" ? N.value : $.value,
+        title: ((l = a.title) == null ? void 0 : l[e === "source" ? 0 : 1]) ?? y(e === "source" ? "transfer.sourceTitle" : "transfer.targetTitle"),
+        selectedKeys: c.value,
+        disabled: !!b.value,
+        loading: a.loading,
+        simple: a.simple,
+        oneWay: a.oneWay,
+        showSearch: a.showSearch,
+        showSelectAll: a.showSelectAll,
+        searchPlaceholder: a.searchPlaceholder,
+        filterOption: a.filterOption,
+        pagination: a.pagination,
+        virtualListProps: a.virtualListProps,
+        style: a.listStyle,
+        onSelect: (t, n) => H(e, t, n),
+        onMove: (t) => w(e, t),
+        onSearch: (t) => s("search", t, e),
+        onScroll: (t) => s("scroll", t, e)
+      }, {
+        ...r.item ? {
+          item: r.item
+        } : {},
+        ...r[e] ? {
+          default: r[e]
+        } : {},
+        ...r[`${e}-title`] ? {
+          title: r[`${e}-title`]
+        } : {},
+        ...r.footer ? {
+          footer: r.footer
+        } : {},
+        ...r.empty ? {
+          empty: r.empty
+        } : {}
+      });
+    };
+    return () => g("div", Q(Object.fromEntries(Object.entries(u).filter(([e]) => e !== "class" && e !== "style" && e !== "id" && !e.startsWith("aria-"))), I.value, {
+      role: "group",
+      tabindex: u.tabindex === void 0 ? -1 : Number(u.tabindex),
+      class: ["x-transfer", {
+        "x-transfer-disabled": b.value,
+        "x-transfer-loading": a.loading,
+        "x-transfer-error": P.value,
+        "x-transfer-simple": a.simple
+      }, u.class],
+      style: u.style,
+      "aria-disabled": b.value || void 0,
+      "aria-invalid": P.value || I.value["aria-invalid"],
+      "aria-busy": a.loading,
+      onFocusin: (e) => {
+        var l, t;
+        e.currentTarget.contains(e.relatedTarget) || (t = (l = B.value) == null ? void 0 : l.onFocus) == null || t.call(l, e);
+      },
+      onFocusout: (e) => {
+        var l, t;
+        e.currentTarget.contains(e.relatedTarget) || (t = (l = B.value) == null ? void 0 : l.onBlur) == null || t.call(l, e);
+      }
+    }), [x("source"), !a.simple && g("div", {
+      class: "x-transfer--operations"
+    }, [g(E, {
+      size: "small",
+      disabled: O.value || !V("source").length,
+      "aria-label": y("transfer.moveToTarget"),
+      onClick: (e) => w("source", V("source"), e)
+    }, {
+      default: () => {
+        var e;
+        return [((e = r["to-target-icon"]) == null ? void 0 : e.call(r)) ?? g(M, {
+          name: "chevron-right"
+        }, null), a.operations[0]];
+      }
+    }), !a.oneWay && g(E, {
+      size: "small",
+      disabled: O.value || !V("target").length,
+      "aria-label": y("transfer.moveToSource"),
+      onClick: (e) => w("target", V("target"), e)
+    }, {
+      default: () => {
+        var e;
+        return [((e = r["to-source-icon"]) == null ? void 0 : e.call(r)) ?? g(M, {
+          name: "chevron-left"
+        }, null), a.operations[1]];
+      }
+    })]), x("target")]);
+  }
+});
+export {
+  oe as default
+};

package/dist/es/components/transfer/index.js

@@ -0,0 +1,7 @@
+import r from "./Transfer.js";
+import { generateComponent as o } from "../../_utils/vue-eco.js";
+import { getComponentPrefix as e } from "../../_utils/config.js";
+const f = o(e("Transfer"), r);
+export {
+  f as Transfer
+};