x-next 1.0.1 → 1.1.0

package/dist/es/components/table/table-th.js

@@ -0,0 +1,270 @@
+import { defineComponent as Y, toRefs as Z, useId as ee, inject as te, computed as a, createVNode as o, mergeProps as L, isVNode as le } from "vue";
+import { Checkbox as ne } from "../form-checkbox/index.js";
+import { Radio as oe } from "../form-radio/index.js";
+import { Button as N } from "../button/index.js";
+import { Trigger as ie } from "../trigger/index.js";
+import re from "../../icons/_self/down.js";
+import ue from "../../icons/_self/up.js";
+import ae from "../../icons/default/filter.js";
+import { useColumnSorter as ce } from "./hooks/use-column-sorter.js";
+import { useColumnFilter as me } from "./hooks/use-column-filter.js";
+import { getStyle as se, getFixedCls as de } from "./utils.js";
+import { isObject as fe, isBoolean as ve, isFunction as ge } from "../../_utils/is.js";
+import he from "../_components/icon-hover/index.vue.js";
+import { tableInjectionKey as Ce } from "./context.js";
+import xe from "../_components/auto-tooltip/auto-tooltip.js";
+import { getClassNameMixin as ye } from "../../_utils/config.js";
+import { formatLocaleText as be } from "./locale.js";
+import { useLocale as Se } from "../../locale/index.js";
+function Te(t) {
+  return typeof t == "function" || Object.prototype.toString.call(t) === "[object Object]" && !le(t);
+}
+const Ge = /* @__PURE__ */ Y({
+  name: "Th",
+  props: {
+    column: {
+      type: Object,
+      default: () => ({})
+    },
+    operations: {
+      type: Array,
+      default: () => []
+    },
+    dataColumns: {
+      type: Array,
+      default: () => []
+    },
+    resizable: Boolean
+  },
+  setup(t, {
+    attrs: j,
+    slots: m
+  }) {
+    const {
+      column: F
+    } = Z(t), n = ye("table"), k = `${ee()}-filter-popup`, {
+      t: h
+    } = Se(), C = {
+      resetText: h("table.resetText"),
+      okText: h("table.okText"),
+      currentColumnText: h("table.currentColumnText"),
+      filterLabelText: h("table.filterLabelText")
+    }, u = te(Ce, {}), z = a(() => {
+      var e;
+      return ((e = t.column) == null ? void 0 : e.dataIndex) && u.resizingColumn === t.column.dataIndex;
+    }), A = a(() => {
+      var e;
+      if (fe((e = t.column) == null ? void 0 : e.tooltip))
+        return t.column.tooltip;
+    }), s = a(() => {
+      var e;
+      return (e = t.column) != null && e.filterable && ve(t.column.filterable.alignLeft) ? t.column.filterable.alignLeft : u.filterIconAlignLeft;
+    }), {
+      sortOrder: d,
+      hasSorter: c,
+      hasAscendBtn: O,
+      hasDescendBtn: B,
+      nextSortOrder: I,
+      handleClickSorter: V
+      // @ts-ignore
+    } = ce({
+      column: F,
+      tableCtx: u
+    }), {
+      filterPopupVisible: S,
+      isFilterActive: D,
+      isMultipleFilter: M,
+      columnFilterValue: f,
+      handleFilterPopupVisibleChange: K,
+      setFilterValue: T,
+      handleCheckboxFilterChange: R,
+      handleRadioFilterChange: G,
+      handleFilterConfirm: x,
+      handleFilterReset: y
+    } = me({
+      column: F,
+      tableCtx: u
+    }), _ = () => {
+      var l, i, r, v, g;
+      const {
+        filterable: e
+      } = t.column;
+      return (l = t.column.slots) != null && l["filter-content"] ? (i = t.column.slots) == null ? void 0 : i["filter-content"]({
+        filterValue: f.value,
+        setFilterValue: T,
+        handleFilterConfirm: x,
+        handleFilterReset: y
+      }) : e != null && e.slotName ? (v = (r = u == null ? void 0 : u.slots) == null ? void 0 : r[e == null ? void 0 : e.slotName]) == null ? void 0 : v.call(r, {
+        filterValue: f.value,
+        setFilterValue: T,
+        handleFilterConfirm: x,
+        handleFilterReset: y
+      }) : e != null && e.renderContent ? e.renderContent({
+        filterValue: f.value,
+        setFilterValue: T,
+        handleFilterConfirm: x,
+        handleFilterReset: y
+      }) : o("div", {
+        class: n.element("filters--content")
+      }, [o("ul", {
+        class: n.element("filters--list")
+      }, [(g = e == null ? void 0 : e.filters) == null ? void 0 : g.map((b, X) => o("li", {
+        class: n.element("filters--item"),
+        key: X
+      }, [M.value ? o(ne, {
+        value: b.value,
+        modelValue: f.value,
+        uninjectGroupContext: !0,
+        onChange: R
+      }, {
+        default: () => [b.text]
+      }) : o(oe, {
+        value: b.value,
+        modelValue: f.value[0] ?? "",
+        uninjectGroupContext: !0,
+        onChange: G
+      }, {
+        default: () => [b.text]
+      })]))]), o("div", {
+        class: n.element("filters--bottom")
+      }, [o(N, {
+        size: "mini",
+        onClick: y
+      }, {
+        default: () => [C.resetText]
+      }), o(N, {
+        type: "primary",
+        size: "mini",
+        onClick: x
+      }, {
+        default: () => [C.okText]
+      })])]);
+    }, p = a(() => {
+      const e = t.column.title, l = String(typeof e == "string" || typeof e == "number" ? e : t.column.dataIndex ?? C.currentColumnText);
+      return be(C.filterLabelText, {
+        column: l
+      });
+    }), $ = () => o("div", {
+      id: k,
+      role: "dialog",
+      "aria-label": p.value
+    }, [_()]), w = () => {
+      const {
+        filterable: e
+      } = t.column;
+      return e ? o(ie, L({
+        popupVisible: S.value,
+        trigger: "click",
+        autoFitPosition: !0,
+        popupOffset: s.value ? 4 : 0,
+        onPopupVisibleChange: K
+      }, e.triggerProps), {
+        default: () => [o(he, {
+          as: "button",
+          "aria-label": p.value,
+          "aria-haspopup": "dialog",
+          "aria-expanded": String(S.value),
+          "aria-controls": k,
+          class: [n.element("filters"), {
+            [n.element("filters-active")]: D.value,
+            [n.element("filters-open")]: S.value,
+            [n.element("filters-align-left")]: s.value
+          }],
+          onClick: (l) => l.stopPropagation(),
+          onKeydown: (l) => l.stopPropagation()
+        }, {
+          default: () => {
+            var l, i, r;
+            return [((i = (l = t.column.slots) == null ? void 0 : l["filter-icon"]) == null ? void 0 : i.call(l)) ?? ((r = e.icon) == null ? void 0 : r.call(e)) ?? o(ae, null, null)];
+          }
+        })],
+        content: $
+      }) : null;
+    }, E = a(() => {
+      var l;
+      const e = [n.element("cell"), n.element(`cell-align-${((l = t.column) == null ? void 0 : l.align) ?? (t.column.children ? "center" : "left")}`)];
+      return c.value && e.push(n.element("cell-with-sorter"), {
+        [n.element("cell-next-ascend")]: I.value === "ascend",
+        [n.element("cell-next-descend")]: I.value === "descend"
+      }), s.value && e.push(n.element("cell-with-filter")), e;
+    }), P = () => {
+      var e, l, i, r, v, g;
+      return m.default ? m.default() : (e = t.column) != null && e.titleSlotName && ((l = u.slots) != null && l[t.column.titleSlotName]) ? (r = (i = u.slots)[t.column.titleSlotName]) == null ? void 0 : r.call(i, {
+        column: t.column
+      }) : (g = (v = t.column) == null ? void 0 : v.slots) != null && g.title ? t.column.slots.title() : ge(t.column.title) ? t.column.title() : t.column.title;
+    }, H = () => {
+      var l, i, r;
+      let e;
+      return o("span", {
+        class: E.value,
+        onClick: c.value ? V : void 0
+      }, [(l = t.column) != null && l.ellipsis && ((i = t.column) != null && i.tooltip) ? o(xe, {
+        class: n.element("th--title"),
+        tooltipProps: A.value
+      }, Te(e = P()) ? e : {
+        default: () => [e]
+      }) : o("span", {
+        class: [n.element("th--title"), {
+          [n.modifier("text-ellipsis")]: (r = t.column) == null ? void 0 : r.ellipsis
+        }]
+      }, [P()]), c.value && o("span", {
+        class: n.element("sorter")
+      }, [O.value && o("div", {
+        class: [n.element("sorter--icon"), {
+          [n.element("sorter--icon-active")]: d.value === "ascend"
+        }]
+      }, [o(ue, null, null)]), B.value && o("div", {
+        class: [n.element("sorter--icon"), {
+          [n.element("sorter--icon-active")]: d.value === "descend"
+        }]
+      }, [o(re, null, null)])]), s.value && w()]);
+    }, U = a(() => {
+      if (c.value)
+        return d.value === "ascend" ? "ascending" : d.value === "descend" ? "descending" : "none";
+    }), q = (e) => {
+      c.value && e.target === e.currentTarget && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), V(e));
+    }, J = a(() => {
+      var e, l;
+      return {
+        ...se(t.column, {
+          dataColumns: t.dataColumns,
+          operations: t.operations
+        }),
+        ...(e = t.column) == null ? void 0 : e.cellStyle,
+        ...(l = t.column) == null ? void 0 : l.headerCellStyle
+      };
+    }), Q = a(() => {
+      var e, l;
+      return [n.element("th"), {
+        [n.element("col-sorted")]: !!d.value,
+        [n.element("th-resizing")]: z.value
+      }, ...de(n.block, t.column), (e = t.column) == null ? void 0 : e.cellClass, (l = t.column) == null ? void 0 : l.headerCellClass];
+    }), W = (e) => {
+      var l, i, r;
+      (l = t.column) != null && l.dataIndex && ((r = u.onThMouseDown) == null || r.call(u, (i = t.column) == null ? void 0 : i.dataIndex, e));
+    };
+    return () => {
+      var i;
+      const e = t.column.colSpan ?? 1, l = t.column.rowSpan ?? 1;
+      return o(((i = m.th) == null ? void 0 : i.call(m, {
+        column: t.column
+      })[0]) ?? "th", L(j, {
+        class: Q.value,
+        style: J.value,
+        colspan: e > 1 ? e : void 0,
+        rowspan: l > 1 ? l : void 0,
+        tabindex: c.value ? 0 : void 0,
+        "aria-sort": U.value,
+        onKeydown: q
+      }), {
+        default: () => [H(), !s.value && w(), t.resizable && o("span", {
+          class: n.element("column-handle"),
+          onMousedown: W
+        }, null)]
+      });
+    };
+  }
+});
+export {
+  Ge as default
+};

package/dist/es/components/table/table-thead.js

@@ -0,0 +1,18 @@
+import { defineComponent as d, createVNode as t, mergeProps as n } from "vue";
+const m = /* @__PURE__ */ d({
+  name: "Thead",
+  setup(u, {
+    attrs: r,
+    slots: e
+  }) {
+    return () => {
+      var a;
+      return t(((a = e.thead) == null ? void 0 : a.call(e)[0]) ?? "thead", n(r), {
+        default: e.default
+      });
+    };
+  }
+});
+export {
+  m as default
+};

package/dist/es/components/table/table-tr.js

@@ -0,0 +1,45 @@
+import { defineComponent as m, computed as o, createVNode as l, mergeProps as p } from "vue";
+import { getClassNameMixin as u } from "../../_utils/config.js";
+const y = /* @__PURE__ */ m({
+  name: "Tr",
+  props: {
+    expand: {
+      type: Boolean
+    },
+    empty: {
+      type: Boolean
+    },
+    checked: {
+      type: Boolean
+    },
+    rowIndex: Number,
+    record: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  setup(e, {
+    attrs: d,
+    slots: t
+  }) {
+    const r = u("table"), c = o(() => [r.element("tr"), {
+      [r.element("tr-expand")]: e.expand,
+      [r.element("tr-empty")]: e.empty,
+      [r.element("tr-checked")]: e.checked
+    }]);
+    return () => {
+      var n, a;
+      return l(((a = t.tr) == null ? void 0 : a.call(t, {
+        rowIndex: e.rowIndex,
+        record: (n = e.record) == null ? void 0 : n.raw
+      })[0]) ?? "tr", p(d, {
+        class: c.value
+      }), {
+        default: t.default
+      });
+    };
+  }
+});
+export {
+  y as default
+};

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

@@ -0,0 +1,168 @@
+import { isUndefined as c, isArray as h, isNull as S } from "../../_utils/is.js";
+import { isNamedComponent as y, resolveProps as _, isSlotsChildren as $, isArrayChildren as b } from "../../_utils/vue-eco.js";
+const R = (t) => {
+  let i = 0;
+  const e = (r) => {
+    if (h(r) && r.length > 0)
+      for (const d of r)
+        d.children ? e(d.children) : i += 1;
+  };
+  return e(t), i;
+}, F = (t) => {
+  let i = 0;
+  if (h(t) && t.length > 0) {
+    i = 1;
+    for (const e of t)
+      if (e.children) {
+        const r = F(e.children);
+        r > 0 && (i = Math.max(i, r + 1));
+      }
+  }
+  return i;
+}, p = (t, i) => {
+  let { parent: e } = t;
+  for (; e; )
+    e.fixed === i && (i === "left" ? e.isLastLeftFixed = !0 : e.isFirstRightFixed = !0), e = e.parent;
+}, v = (t, i, e) => {
+  const r = F(t);
+  i.clear();
+  const d = [], s = [...Array(r)].map(() => []);
+  let f, l;
+  const x = (w, {
+    level: a = 0,
+    parent: L,
+    fixed: g
+  } = {}) => {
+    for (const C of w) {
+      const n = { ...C, parent: L };
+      if (h(n.children)) {
+        const o = R(n.children);
+        o > 1 && (n.colSpan = o), s[a].push(n), x(n.children, {
+          level: a + 1,
+          parent: n,
+          fixed: n.fixed
+        });
+      } else {
+        const o = r - a;
+        o > 1 && (n.rowSpan = o), (g || n.fixed) && (n.fixed = n.fixed ?? g, n.fixed === "left" ? f = d.length : c(l) && (l = d.length)), (c(n.dataIndex) || S(n.dataIndex)) && (n.dataIndex = `__arco_data_index_${d.length}`), e[n.dataIndex] && (n._resizeWidth = e[n.dataIndex]), i.set(n.dataIndex, n), d.push(n), s[a].push(n);
+      }
+    }
+  };
+  return x(t), c(f) || (d[f].isLastLeftFixed = !0, p(d[f], "left")), c(l) || (d[l].isFirstRightFixed = !0, p(d[l], "right")), { dataColumns: d, groupColumns: s };
+}, k = (t, i) => {
+  for (let e = 0; e < t.length; e++)
+    if (t[e].name === i)
+      return e;
+  return -1;
+}, N = (t, i) => {
+  const e = k(i, t.name);
+  if (e <= 0)
+    return 0;
+  let r = 0;
+  const d = i.slice(0, e);
+  for (const s of d)
+    r += s.width ?? 0;
+  return r;
+}, m = (t) => t.children && t.children.length > 0 ? m(t.children[0]) : t, I = (t) => t.children && t.children.length > 0 ? I(t.children[t.children.length - 1]) : t, A = (t, {
+  dataColumns: i,
+  operations: e
+}) => {
+  let r = 0;
+  if (t.fixed === "left") {
+    for (const f of e)
+      r += f.width ?? 40;
+    const s = m(t);
+    for (const f of i) {
+      if (s.dataIndex === f.dataIndex)
+        break;
+      r += f._resizeWidth ?? f.width ?? 0;
+    }
+    return r;
+  }
+  const d = I(t);
+  for (let s = i.length - 1; s >= 0; s--) {
+    const f = i[s];
+    if (d.dataIndex === f.dataIndex)
+      break;
+    f.fixed === "right" && (r += f._resizeWidth ?? f.width ?? 0);
+  }
+  return r;
+}, H = (t, i) => i.fixed ? [
+  `${t}-col-fixed-left`,
+  {
+    [`${t}-col-fixed-left-last`]: i.isLastLeftFixed
+  }
+] : [], P = (t, i) => i.fixed === "left" ? [
+  `${t}-col-fixed-left`,
+  {
+    [`${t}-col-fixed-left-last`]: i.isLastLeftFixed
+  }
+] : i.fixed === "right" ? [
+  `${t}-col-fixed-right`,
+  {
+    [`${t}-col-fixed-right-first`]: i.isFirstRightFixed
+  }
+] : [], G = (t, {
+  dataColumns: i,
+  operations: e
+}) => {
+  if (t.fixed) {
+    const r = `${A(t, { dataColumns: i, operations: e })}px`;
+    return t.fixed === "left" ? {
+      left: r
+    } : {
+      right: r
+    };
+  }
+  return {};
+}, K = (t, i) => t.fixed ? {
+  left: `${N(t, i)}px`
+} : {}, u = (t) => {
+  const i = [];
+  for (const e of t)
+    if (y(e, "TableColumn")) {
+      const r = _(e);
+      $(e, e.children) && (e.children.default && (r.children = u(e.children.default())), e.children.cell && (r.render = e.children.cell), e.children.title && (r.title = e.children.title)), i.push(r);
+    } else b(e, e.children) ? i.push(...u(e.children)) : h(e) && i.push(...u(e));
+  return i;
+};
+function D(t) {
+  return t.map((i) => {
+    const e = { ...i };
+    return e.children && (e.children = D(e.children)), e;
+  });
+}
+function O(t) {
+  return t.map((i) => {
+    const e = { ...i.raw };
+    return i.children && (e.children = O(i.children)), e;
+  });
+}
+const z = (t) => {
+  const i = [];
+  if (t.children)
+    for (const e of t.children)
+      e.isLeaf ? i.push(e.key) : i.push(...z(e));
+  return i;
+}, U = (t, i) => {
+  let e = !1, r = !1;
+  const d = i.filter((s) => t.includes(s));
+  return d.length > 0 && (d.length >= i.length ? e = !0 : r = !0), {
+    checked: e,
+    indeterminate: r
+  };
+};
+export {
+  u as getColumnsFromSlot,
+  P as getFixedCls,
+  A as getFixedNumber,
+  v as getGroupColumns,
+  z as getLeafKeys,
+  H as getOperationFixedCls,
+  N as getOperationFixedNumber,
+  K as getOperationStyle,
+  U as getSelectionStatus,
+  G as getStyle,
+  D as mapArrayWithChildren,
+  O as mapRawTableData
+};

package/dist/es/components/tabs/TabPane.vue.js

@@ -0,0 +1,27 @@
+import o from "./TabPane.vue2.js";
+import { openBlock as a, createElementBlock as t, normalizeClass as n, renderSlot as r, createCommentVNode as s } from "vue";
+import i from "../../_virtual/_plugin-vue_export-helper.js";
+const m = ["tabindex", "aria-hidden"];
+function l(e, d, c, p, f, u) {
+  return a(), t("div", {
+    ref: "itemRef",
+    role: "tabpanel",
+    tabindex: e.active ? 0 : -1,
+    "aria-hidden": !e.active,
+    class: n([
+      e.className.element("content--item"),
+      { [`${e.className.element("content--item")}-active`]: e.active }
+    ])
+  }, [
+    e.mounted ? (a(), t("div", {
+      key: 0,
+      class: n(e.className.element("pane"))
+    }, [
+      r(e.$slots, "default")
+    ], 2)) : s("", !0)
+  ], 10, m);
+}
+const h = /* @__PURE__ */ i(o, [["render", l]]);
+export {
+  h as default
+};

package/dist/es/components/tabs/TabPane.vue2.js

@@ -0,0 +1,73 @@
+import { defineComponent as I, toRefs as g, getCurrentInstance as H, inject as O, ref as m, computed as c, reactive as j, onBeforeUnmount as k, watch as K, onUpdated as N } from "vue";
+import { tabsInjectionKey as R } from "./context.js";
+import { getClassNameMixin as U } from "../../_utils/config.js";
+const z = I({
+  name: "TabPane",
+  props: {
+    /**
+     * @zh 选项卡的标题
+     * @en Title of the tab
+     */
+    title: String,
+    /**
+     * @zh 是否禁用
+     * @en Whether to disable
+     */
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * @zh 是否允许关闭此选项卡（仅在可编辑模式生效）
+     * @en Whether to allow this tab to be closed (only effective in editable mode)
+     */
+    closable: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * @zh 是否在不显示标签时销毁内容
+     * @en Whether to destroy the content when the label is not displayed
+     * @version 2.27.0
+     */
+    destroyOnHide: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  /**
+   * @zh 选项卡标题
+   * @en Tab title
+   * @slot title
+   */
+  setup(d, { slots: n }) {
+    var s, r;
+    const { title: v, disabled: p, closable: y } = g(d), e = H(), b = U("tabs"), t = O(R, {}), B = m(), i = c(() => e == null ? void 0 : e.vnode.key), l = c(() => {
+      var o;
+      return i.value === ((o = t.activeKey) == null ? void 0 : o.value);
+    }), a = m((s = t.lazyLoad) != null && s.value ? l.value : !0), u = j({
+      key: i,
+      title: v,
+      disabled: p,
+      closable: y,
+      slots: n
+    });
+    return e != null && e.uid && ((r = t.addItem) == null || r.call(t, e.uid, u)), k(() => {
+      var o;
+      e != null && e.uid && ((o = t.removeItem) == null || o.call(t, e.uid));
+    }), K(l, (o) => {
+      var f;
+      o ? a.value || (a.value = !0) : (d.destroyOnHide || (f = t.destroyOnHide) != null && f.value) && (a.value = !1);
+    }), N(() => {
+      u.slots = { ...n };
+    }), {
+      className: b,
+      active: l,
+      itemRef: B,
+      mounted: a
+    };
+  }
+});
+export {
+  z as default
+};