x-next 1.16.1 → 1.18.0

package/dist/es/components/transfer/transfer-panel.js

@@ -0,0 +1,251 @@
+import { defineComponent as Y, useId as Z, ref as A, computed as r, watch as j, createVNode as t, createTextVNode as ee, mergeProps as ae, Fragment as te, nextTick as le, isVNode as ne } from "vue";
+import { Button as W } from "../button/index.js";
+import { Checkbox as $ } from "../form-checkbox/index.js";
+import { Input as re } from "../form-input/index.js";
+import { Empty as ue } from "../empty/index.js";
+import { Spin as ie } from "../spin/index.js";
+import { Pagination as oe } from "../pagination/index.js";
+import ce from "../virtual-list-v2/virtual-list.vue.js";
+import { useLocale as se } from "../../locale/index.js";
+import { transferKey as S } from "./utils.js";
+function J(a) {
+  return typeof a == "function" || Object.prototype.toString.call(a) === "[object Object]" && !ne(a);
+}
+const ke = /* @__PURE__ */ Y({
+  name: "TransferPanel",
+  props: {
+    type: {
+      type: String,
+      required: !0
+    },
+    data: {
+      type: Array,
+      required: !0
+    },
+    selectedKeys: {
+      type: Array,
+      required: !0
+    },
+    title: {
+      type: String,
+      required: !0
+    },
+    disabled: Boolean,
+    loading: Boolean,
+    simple: Boolean,
+    oneWay: Boolean,
+    showSearch: Boolean,
+    showSelectAll: Boolean,
+    searchPlaceholder: String,
+    filterOption: Function,
+    pagination: [Boolean, Object],
+    virtualListProps: Object
+  },
+  emits: {
+    select: (a, c) => !0,
+    move: (a) => !0,
+    search: (a) => !0,
+    scroll: (a) => !0
+  },
+  slots: Object,
+  setup(a, {
+    emit: c,
+    slots: u
+  }) {
+    const {
+      t: s
+    } = se(), p = `x-transfer-title-${Z()}`, I = A(), K = A(), o = A(""), g = A(1), d = r(() => a.disabled || a.loading), k = r(() => new Set(a.selectedKeys)), h = r(() => a.data.filter((e) => !o.value || (a.filterOption ? a.filterOption(o.value, e, a.type) : String(e.label).toLocaleLowerCase().includes(o.value.toLocaleLowerCase())))), m = r(() => {
+      const e = typeof a.pagination == "object" ? a.pagination.pageSize : 10;
+      return e && Number.isFinite(e) && e > 0 ? Math.max(1, Math.floor(e)) : 10;
+    }), C = r(() => Math.min(g.value, Math.max(1, Math.ceil(h.value.length / m.value)))), w = r(() => a.pagination ? h.value.slice((C.value - 1) * m.value, C.value * m.value) : h.value), b = r(() => w.value.filter((e) => !e.disabled)), M = r(() => b.value.filter((e) => k.value.has(e.value)).length), P = r(() => b.value.length > 0 && M.value === b.value.length), O = r(() => M.value > 0 && !P.value), q = r(() => a.data.filter((e) => !e.disabled && k.value.has(e.value)).length), V = r(() => a.oneWay && a.type === "target"), D = r(() => !a.pagination && !!a.virtualListProps);
+    j([o, m, () => a.pagination], () => {
+      g.value = 1;
+    }), j(C, (e) => {
+      g.value = e;
+    }), j(() => a.showSearch, (e) => {
+      !e && o.value && (o.value = "", c("search", ""));
+    });
+    const z = (e, n) => c("select", [e], n), N = (e, n) => c("select", e, n), L = (e) => c("move", e), E = r(() => ({
+      type: a.type,
+      data: h.value,
+      pageData: w.value,
+      selectedKeys: a.data.filter((e) => !e.disabled && k.value.has(e.value)).map((e) => e.value),
+      disabled: d.value,
+      onSelect: z,
+      onSelectAll: N,
+      onMove: L
+    })), T = r(() => ({
+      type: a.type,
+      title: a.title,
+      countTotal: a.data.length,
+      countSelected: q.value,
+      searchValue: o.value,
+      checked: P.value,
+      indeterminate: O.value,
+      disabled: d.value || b.value.length === 0,
+      onSelectAllChange: (e) => N(b.value.map((n) => n.value), e)
+    })), F = (e) => {
+      let n, i;
+      const l = d.value || !!e.disabled, y = k.value.has(e.value), x = () => {
+        var f;
+        return ((f = u.item) == null ? void 0 : f.call(u, {
+          item: e,
+          type: a.type,
+          selected: y,
+          disabled: l
+        })) ?? e.label;
+      };
+      return t("div", {
+        key: S(e.value),
+        "data-transfer-key": S(e.value),
+        class: ["x-transfer--item", {
+          "x-transfer--item-selected": y,
+          "x-transfer--item-disabled": l
+        }]
+      }, [a.simple || V.value ? t("div", {
+        class: "x-transfer--item-content"
+      }, [V.value ? t(te, null, [t("span", {
+        class: "x-transfer--item-label",
+        title: e.label
+      }, [x()]), t(W, {
+        size: "mini",
+        type: "text",
+        disabled: l,
+        "aria-label": s("transfer.remove", {
+          label: e.label
+        }),
+        onClick: () => L([e.value])
+      }, J(n = s("transfer.removeText")) ? n : {
+        default: () => [n]
+      })]) : t(W, {
+        type: "text",
+        block: !0,
+        disabled: l,
+        "aria-label": s(a.type === "source" ? "transfer.moveToTargetItem" : "transfer.moveToSourceItem", {
+          label: e.label
+        }),
+        onClick: () => L([e.value])
+      }, J(i = x()) ? i : {
+        default: () => [i]
+      })]) : t($, {
+        class: "x-transfer--item-checkbox",
+        modelValue: y,
+        disabled: l,
+        uninjectGroupContext: !0,
+        onChange: (f) => z(e.value, f === !0)
+      }, {
+        default: () => [t("span", {
+          class: "x-transfer--item-label",
+          title: e.label
+        }, [x()])]
+      })]);
+    }, Q = async (e) => {
+      var G, H, R, U;
+      if (d.value || u.default || !["ArrowDown", "ArrowUp", "Home", "End"].includes(e.key)) return;
+      const n = e.target;
+      if (!n.closest(".x-transfer--list")) return;
+      const i = b.value;
+      if (!i.length) return;
+      const l = (G = n.closest("[data-transfer-key]")) == null ? void 0 : G.dataset.transferKey, y = i.findIndex((_) => S(_.value) === l), x = e.key === "Home" ? 0 : e.key === "End" ? i.length - 1 : e.key === "ArrowDown" ? Math.min(y + 1, i.length - 1) : Math.max(y - 1, 0), f = S(i[x].value);
+      e.preventDefault(), (H = K.value) == null || H.scrollTo({
+        key: f,
+        align: "auto"
+      }), await le();
+      const v = Array.from(((R = I.value) == null ? void 0 : R.querySelectorAll("[data-transfer-key]")) ?? []).find((_) => _.dataset.transferKey === f), B = v == null ? void 0 : v.querySelector("input:not(:disabled),button:not(:disabled)");
+      B == null || B.focus(), D.value || (U = v == null ? void 0 : v.scrollIntoView) == null || U.call(v, {
+        block: "nearest"
+      });
+    }, X = (e) => {
+      var n;
+      o.value = e, g.value = 1, c("search", e), (n = K.value) == null || n.scrollTo(0);
+    };
+    return () => {
+      var e, n, i;
+      return t("section", {
+        ref: I,
+        class: ["x-transfer--panel", `x-transfer--panel-${a.type}`],
+        role: "group",
+        "aria-labelledby": p,
+        "aria-busy": a.loading,
+        onKeydown: Q
+      }, [t("header", {
+        class: "x-transfer--header"
+      }, [t("div", {
+        id: p,
+        class: "x-transfer--title"
+      }, [((e = u.title) == null ? void 0 : e.call(u, T.value)) ?? (a.showSelectAll && !a.simple && !V.value ? t($, {
+        modelValue: P.value,
+        indeterminate: O.value,
+        disabled: T.value.disabled,
+        uninjectGroupContext: !0,
+        onChange: (l) => T.value.onSelectAllChange(l === !0)
+      }, {
+        default: () => [a.title]
+      }) : t("span", null, [a.title]))]), t("span", {
+        class: "x-transfer--count"
+      }, [q.value, ee(" / "), a.data.length])]), a.showSearch && t("div", {
+        class: "x-transfer--search"
+      }, [t(re, {
+        modelValue: o.value,
+        disabled: d.value,
+        allowClear: !0,
+        "aria-label": s("transfer.searchLabel", {
+          title: a.title
+        }),
+        placeholder: a.searchPlaceholder ?? s("transfer.searchPlaceholder"),
+        "onUpdate:modelValue": X
+      }, null)]), t("div", {
+        class: "x-transfer--body",
+        onScroll: (l) => c("scroll", l)
+      }, [a.loading ? t("div", {
+        class: "x-transfer--state"
+      }, [t(ie, {
+        tip: s("transfer.loading")
+      }, null)]) : u.default ? u.default(E.value) : h.value.length ? D.value ? t("div", {
+        class: "x-transfer--list",
+        tabindex: d.value ? -1 : 0,
+        "aria-label": a.title
+      }, [t(ce, ae(a.virtualListProps, {
+        ref: K,
+        height: ((i = a.virtualListProps) == null ? void 0 : i.height) ?? 240,
+        data: w.value.map((l) => ({
+          ...l,
+          _transferKey: S(l.value)
+        })),
+        itemKey: "_transferKey",
+        onScroll: (l) => c("scroll", l)
+      }), {
+        item: ({
+          item: l
+        }) => F(l)
+      })]) : t("div", {
+        class: "x-transfer--list",
+        tabindex: d.value ? -1 : 0,
+        "aria-label": a.title
+      }, [w.value.map(F)]) : t("div", {
+        class: "x-transfer--state"
+      }, [((n = u.empty) == null ? void 0 : n.call(u, {
+        type: a.type,
+        searchValue: o.value
+      })) ?? t(ue, {
+        description: o.value ? s("transfer.noMatch") : s("transfer.empty")
+      }, null)])]), a.pagination && t("div", {
+        class: "x-transfer--pagination"
+      }, [t(oe, {
+        current: C.value,
+        pageSize: m.value,
+        total: h.value.length,
+        simple: !0,
+        disabled: d.value,
+        onChange: (l) => {
+          g.value = l;
+        }
+      }, null)]), u.footer && t("footer", {
+        class: "x-transfer--footer"
+      }, [u.footer(E.value)])]);
+    };
+  }
+});
+export {
+  ke as default
+};

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

@@ -0,0 +1,9 @@
+const r = (n) => `${typeof n}:${n}`, t = (n) => [...new Set(n)], s = (n) => {
+  const u = /* @__PURE__ */ new Set();
+  return n.filter((e) => !e || typeof e.value != "string" && typeof e.value != "number" || typeof e.value == "number" && !Number.isFinite(e.value) || u.has(e.value) ? !1 : (u.add(e.value), !0));
+};
+export {
+  r as transferKey,
+  s as uniqueItems,
+  t as uniqueValues
+};

package/dist/es/directives/wave.js

@@ -1,4 +1,4 @@
-const a = "x-wave";
+const i = "x-wave";
 const n = (e, t) => {
   const _ = t.value;
   if (_ === !1 || _ && typeof _ == "object" && _.disabled) return !0;
@@ -10,8 +10,14 @@ const n = (e, t) => {
   return t !== "transparent" && t !== "rgba(0, 0, 0, 0)" && t !== "rgba(255, 255, 255, 0)" && t !== "rgb(255, 255, 255)" && t !== "#fff" && t !== "#ffffff";
 }, v = (e) => {
   const t = getComputedStyle(e);
-  return [t.borderTopColor, t.borderColor, t.backgroundColor, t.color].find(d) ?? "currentColor";
-}, i = (e) => {
+  return [
+    t.getPropertyValue("--x-button-wave-color").trim(),
+    t.borderTopColor,
+    t.borderColor,
+    t.backgroundColor,
+    t.color
+  ].find(d) ?? "currentColor";
+}, a = (e) => {
   e.__wave_timer__ && (clearTimeout(e.__wave_timer__), delete e.__wave_timer__), e.__wave_element__ && (e.__wave_element__.remove(), delete e.__wave_element__);
 }, s = (e, t) => {
   e.__wave_disabled__ = n(e, t);
@@ -21,12 +27,12 @@ const n = (e, t) => {
     const _ = (r) => {
       if (e.__wave_disabled__)
         return;
-      i(e);
+      a(e);
       const o = document.createElement("div");
-      o.className = a, o.style.setProperty("--x-wave-color", v(e)), e.__wave_element__ = o, e.appendChild(o), requestAnimationFrame(() => {
-        o.classList.add(`${a}-active`);
+      o.className = i, o.style.setProperty("--x-wave-color", v(e)), e.__wave_element__ = o, e.appendChild(o), requestAnimationFrame(() => {
+        o.classList.add(`${i}-active`);
       }), e.__wave_timer__ = window.setTimeout(() => {
-        i(e);
+        a(e);
       }, 400);
     };
     e.__wave_handler__ = _, e.addEventListener("click", _);
@@ -35,7 +41,7 @@ const n = (e, t) => {
     s(e, t), getComputedStyle(e).position === "static" && (e.__wave_restore_position__ = e.style.position, e.style.position = "relative");
   },
   unmounted(e) {
-    e.__wave_handler__ && (e.removeEventListener("click", e.__wave_handler__), delete e.__wave_handler__), i(e), e.__wave_restore_position__ !== void 0 && (e.style.position = e.__wave_restore_position__, delete e.__wave_restore_position__), delete e.__wave_disabled__;
+    e.__wave_handler__ && (e.removeEventListener("click", e.__wave_handler__), delete e.__wave_handler__), a(e), e.__wave_restore_position__ !== void 0 && (e.style.position = e.__wave_restore_position__, delete e.__wave_restore_position__), delete e.__wave_disabled__;
   }
 };
 export {

package/dist/es/index.js

@@ -5,7 +5,7 @@ import { setupDirectives as m } from "./directives/index.js";
 import { default as s } from "./components/dialog/use.js";
 import { default as u } from "./components/message/warp.js";
 import { default as g } from "./components/message-box/MessageBox.js";
-import { default as S } from "./components/notification/warp.js";
+import { default as T } from "./components/notification/warp.js";
 import { Dialog as P } from "./components/dialog/index.js";
 import { Message as C } from "./components/message/index.js";
 import { Notification as k } from "./components/notification/index.js";
@@ -25,7 +25,7 @@ import { Checkbox as ro, CheckboxGroup as to } from "./components/form-checkbox/
 import { Col as mo, Grid as ao, GridItem as fo, Row as no } from "./components/grid/index.js";
 import { ColorPicker as io } from "./components/color-picker/index.js";
 import { ConfigProvider as so } from "./components/config-provider/index.js";
-import { DatePicker as uo, MonthPicker as go, QuarterPicker as Io, RangePicker as So, WeekPicker as To, YearPicker as Po } from "./components/date-picker/index.js";
+import { DatePicker as uo, MonthPicker as go, QuarterPicker as Io, RangePicker as To, WeekPicker as So, YearPicker as Po } from "./components/date-picker/index.js";
 import { Draggable as Co } from "./components/draggable/index.js";
 import { Drawer as ko } from "./components/drawer/index.js";
 import { Dropdown as Do, DropdownButton as wo, DropdownGroup as yo, DropdownOption as Go, DropdownSubmenu as Mo } from "./components/dropdown/index.js";
@@ -42,7 +42,7 @@ import { Link as fe } from "./components/link/index.js";
 import { Menu as xe, MenuItem as ie, MenuItemGroup as ce, MenuSubMenu as se } from "./components/menu/index.js";
 import { Network as ue } from "./components/network/index.js";
 import { Pagination as ge } from "./components/pagination/index.js";
-import { PieChart as Se } from "./components/pie-chart/index.js";
+import { PieChart as Te } from "./components/pie-chart/index.js";
 import { Popconfirm as Pe } from "./components/popconfirm/index.js";
 import { Popover as Ce } from "./components/popover/index.js";
 import { Popup as ke } from "./components/popup/index.js";
@@ -64,7 +64,7 @@ import { Table as ir, TableColumn as cr } from "./components/table/index.js";
 import { Tag as lr } from "./components/tag/index.js";
 import { default as dr } from "./components/table/table-tbody.js";
 import { default as Ir } from "./components/table/table-td.js";
-import { Textarea as Tr } from "./components/form-textarea/index.js";
+import { Textarea as Sr } from "./components/form-textarea/index.js";
 import { default as br } from "./components/table/table-th.js";
 import { default as Lr } from "./components/table/table-thead.js";
 import { TimePicker as hr } from "./components/time-picker/index.js";
@@ -73,18 +73,19 @@ import { Timeline as Gr } from "./components/timeline/index.js";
 import { TimelineItem as Nr } from "./components/timeline-item/index.js";
 import { Tooltip as Ar } from "./components/tooltip/index.js";
 import { default as Er } from "./components/table/table-tr.js";
-import { TreeSelect as Rr, TreeSelectDropdown as _r } from "./components/tree-select/index.js";
-import { TrendChart as jr } from "./components/trend-chart/index.js";
-import { Trigger as Hr } from "./components/trigger/index.js";
-import { Upload as Ur } from "./components/upload/index.js";
-import { addIcon as Qr, hasIcon as Xr, registerIcons as Yr, removeIcon as Zr } from "./icons/registry.js";
-import { canonicalIconNames as Jr, publicIconAliases as Vr, publicIconNames as $r, searchPublicIcons as ot } from "./icons/public/lucide-names.js";
-import { configProviderInjectionKey as rt } from "./components/config-provider/context.js";
-import { finiconCategories as pt, finiconIconsMeta as mt } from "./icons/public/finicon-meta.js";
-import { finiconIconNames as ft, finiconIcons as nt, registerFiniconIcons as xt } from "./icons/public/finicon.js";
-import { formInjectionKey as ct, formItemInjectionKey as st } from "./components/form/context.js";
-import { registerPublicIcons as ut } from "./icons/public/lucide.js";
-import { vWatermark as gt } from "./components/watermark/directive.js";
+import { Transfer as Rr } from "./components/transfer/index.js";
+import { TreeSelect as Fr, TreeSelectDropdown as jr } from "./components/tree-select/index.js";
+import { TrendChart as Hr } from "./components/trend-chart/index.js";
+import { Trigger as Ur } from "./components/trigger/index.js";
+import { Upload as Qr } from "./components/upload/index.js";
+import { addIcon as Yr, hasIcon as Zr, registerIcons as qr, removeIcon as Jr } from "./icons/registry.js";
+import { canonicalIconNames as $r, publicIconAliases as ot, publicIconNames as et, searchPublicIcons as rt } from "./icons/public/lucide-names.js";
+import { configProviderInjectionKey as pt } from "./components/config-provider/context.js";
+import { finiconCategories as at, finiconIconsMeta as ft } from "./icons/public/finicon-meta.js";
+import { finiconIconNames as xt, finiconIcons as it, registerFiniconIcons as ct } from "./icons/public/finicon.js";
+import { formInjectionKey as lt, formItemInjectionKey as ut } from "./components/form/context.js";
+import { registerPublicIcons as gt } from "./icons/public/lucide.js";
+import { vWatermark as Tt } from "./components/watermark/directive.js";
 const x = {
   install: function(o) {
     m(o), o.use(p), Object.keys(r).forEach((t) => {
@@ -147,10 +148,10 @@ export {
   C as MessageComponent,
   go as MonthPicker,
   ue as Network,
-  S as Notification,
+  T as Notification,
   k as NotificationComponent,
   ge as Pagination,
-  Se as PieChart,
+  Te as PieChart,
   Pe as Popconfirm,
   Ce as Popover,
   ke as Popup,
@@ -158,7 +159,7 @@ export {
   Io as QuarterPicker,
   ye as Radio,
   Ge as RadioGroup,
-  So as RangePicker,
+  To as RangePicker,
   Ne as Rate,
   Ae as ResizeBox,
   no as Row,
@@ -185,7 +186,7 @@ export {
   lr as Tag,
   dr as Tbody,
   Ir as Td,
-  Tr as Textarea,
+  Sr as Textarea,
   br as Th,
   Lr as Thead,
   hr as TimePicker,
@@ -194,44 +195,45 @@ export {
   Nr as TimelineItem,
   Ar as Tooltip,
   Er as Tr,
-  Rr as TreeSelect,
-  _r as TreeSelectDropdown,
-  jr as TrendChart,
-  Hr as Trigger,
-  Ur as Upload,
+  Rr as Transfer,
+  Fr as TreeSelect,
+  jr as TreeSelectDropdown,
+  Hr as TrendChart,
+  Ur as Trigger,
+  Qr as Upload,
   K as Watermark,
-  To as WeekPicker,
+  So as WeekPicker,
   Po as YearPicker,
-  Qr as addIcon,
+  Yr as addIcon,
   M as applyThemeColor,
-  Jr as canonicalIconNames,
-  rt as configProviderInjectionKey,
+  $r as canonicalIconNames,
+  pt as configProviderInjectionKey,
   x as default,
   W as enUS,
-  pt as finiconCategories,
-  ft as finiconIconNames,
-  nt as finiconIcons,
-  mt as finiconIconsMeta,
-  ct as formInjectionKey,
-  st as formItemInjectionKey,
+  at as finiconCategories,
+  xt as finiconIconNames,
+  it as finiconIcons,
+  ft as finiconIconsMeta,
+  lt as formInjectionKey,
+  ut as formItemInjectionKey,
   mr as formatLocaleText,
   B as formatMessage,
   N as generatePalette,
   E as getGlobalLocale,
-  Xr as hasIcon,
-  Vr as publicIconAliases,
-  $r as publicIconNames,
-  xt as registerFiniconIcons,
-  Yr as registerIcons,
-  ut as registerPublicIcons,
-  Zr as removeIcon,
-  ot as searchPublicIcons,
+  Zr as hasIcon,
+  ot as publicIconAliases,
+  et as publicIconNames,
+  ct as registerFiniconIcons,
+  qr as registerIcons,
+  gt as registerPublicIcons,
+  Jr as removeIcon,
+  rt as searchPublicIcons,
   O as setGlobalLocale,
   F as useDraggable,
   y as useFormItem,
   R as useLocale,
   D as useResizeObserver,
   z as vDraggable,
-  gt as vWatermark,
+  Tt as vWatermark,
   X as zhCN
 };

package/dist/es/locale/en-US.js

@@ -1,5 +1,21 @@
 const e = {
   code: "en-US",
+  transfer: {
+    label: "Data transfer",
+    sourceTitle: "Available",
+    targetTitle: "Selected",
+    searchLabel: "Search {title}",
+    searchPlaceholder: "Search items",
+    moveToTarget: "Move to selected",
+    moveToSource: "Move to available",
+    moveToTargetItem: "Move {label} to selected",
+    moveToSourceItem: "Move {label} to available",
+    remove: "Remove {label}",
+    removeText: "Remove",
+    loading: "Loading",
+    empty: "No data",
+    noMatch: "No matching items"
+  },
   timeRangeSelector: {
     label: "Daily time ranges",
     position: "Create from {start} to {end}; selected ranges: {ranges}",

package/dist/es/locale/zh-CN.js

@@ -1,5 +1,21 @@
 const e = {
   code: "zh-CN",
+  transfer: {
+    label: "数据穿梭框",
+    sourceTitle: "可选项",
+    targetTitle: "已选项",
+    searchLabel: "搜索{title}",
+    searchPlaceholder: "请输入搜索内容",
+    moveToTarget: "移入已选项",
+    moveToSource: "移回可选项",
+    moveToTargetItem: "移入「{label}」",
+    moveToSourceItem: "移回「{label}」",
+    remove: "移除「{label}」",
+    removeText: "移除",
+    loading: "加载中",
+    empty: "暂无数据",
+    noMatch: "没有匹配结果"
+  },
   timeRangeSelector: {
     label: "一天内的时间区间",
     position: "新建位置 {start} 至 {end}；已选区间：{ranges}",