x-next 1.11.1 → 1.12.0

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

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

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

@@ -1,8 +1,11 @@
-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({
+import { defineComponent as d, computed as c, createVNode as l, mergeProps as i } from "vue";
+import { getClassNameMixin as p } from "../../_utils/config.js";
+import { tableDomListeners as u, getTableDomListeners as f } from "./dom-listeners.js";
+const s = /* @__PURE__ */ d({
   name: "Tr",
+  inheritAttrs: !1,
   props: {
+    ...u,
     expand: {
       type: Boolean
     },
@@ -19,10 +22,10 @@ const y = /* @__PURE__ */ m({
     }
   },
   setup(e, {
-    attrs: d,
+    attrs: m,
     slots: t
   }) {
-    const r = u("table"), c = o(() => [r.element("tr"), {
+    const r = p("table"), o = c(() => [r.element("tr"), {
       [r.element("tr-expand")]: e.expand,
       [r.element("tr-empty")]: e.empty,
       [r.element("tr-checked")]: e.checked
@@ -32,8 +35,8 @@ const y = /* @__PURE__ */ m({
       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
+      })[0]) ?? "tr", i(m, f(e), {
+        class: o.value
       }), {
         default: t.default
       });
@@ -41,5 +44,5 @@ const y = /* @__PURE__ */ m({
   }
 });
 export {
-  y as default
+  s as default
 };