@stonecrop/atable 0.3.1 → 0.3.2

package/dist/atable.d.ts

@@ -61,9 +61,9 @@ width?: string;
 pinned?: boolean;
 cellComponent?: string;
 cellComponentProps?: Record<string, any>;
-modalComponent?: string | ((context?: CellContext) => string);
+modalComponent?: string | ((context: CellContext) => string);
 modalComponentExtraProps?: Record<string, any>;
-format?: string | ((value: any, context?: CellContext) => string);
+format?: string | ((value: any, context: CellContext) => string);
 mask?: (value: any) => any;
 }[], TableColumn[] | {
 name: string;
@@ -75,9 +75,9 @@ width?: string;
 pinned?: boolean;
 cellComponent?: string;
 cellComponentProps?: Record<string, any>;
-modalComponent?: string | ((context?: CellContext) => string);
+modalComponent?: string | ((context: CellContext) => string);
 modalComponentExtraProps?: Record<string, any>;
-format?: string | ((value: any, context?: CellContext) => string);
+format?: string | ((value: any, context: CellContext) => string);
 mask?: (value: any) => any;
 }[]>;
 rows: Ref<    {
@@ -163,9 +163,9 @@ width?: string;
 pinned?: boolean;
 cellComponent?: string;
 cellComponentProps?: Record<string, any>;
-modalComponent?: string | ((context?: CellContext) => string);
+modalComponent?: string | ((context: CellContext) => string);
 modalComponentExtraProps?: Record<string, any>;
-format?: string | ((value: any, context?: CellContext) => string);
+format?: string | ((value: any, context: CellContext) => string);
 mask?: (value: any) => any;
 }[], TableColumn[] | {
 name: string;
@@ -177,9 +177,9 @@ width?: string;
 pinned?: boolean;
 cellComponent?: string;
 cellComponentProps?: Record<string, any>;
-modalComponent?: string | ((context?: CellContext) => string);
+modalComponent?: string | ((context: CellContext) => string);
 modalComponentExtraProps?: Record<string, any>;
-format?: string | ((value: any, context?: CellContext) => string);
+format?: string | ((value: any, context: CellContext) => string);
 mask?: (value: any) => any;
 }[]>;
 rows: Ref<    {
@@ -265,9 +265,9 @@ width?: string;
 pinned?: boolean;
 cellComponent?: string;
 cellComponentProps?: Record<string, any>;
-modalComponent?: string | ((context?: CellContext) => string);
+modalComponent?: string | ((context: CellContext) => string);
 modalComponentExtraProps?: Record<string, any>;
-format?: string | ((value: any, context?: CellContext) => string);
+format?: string | ((value: any, context: CellContext) => string);
 mask?: (value: any) => any;
 }[], TableColumn[] | {
 name: string;
@@ -279,9 +279,9 @@ width?: string;
 pinned?: boolean;
 cellComponent?: string;
 cellComponentProps?: Record<string, any>;
-modalComponent?: string | ((context?: CellContext) => string);
+modalComponent?: string | ((context: CellContext) => string);
 modalComponentExtraProps?: Record<string, any>;
-format?: string | ((value: any, context?: CellContext) => string);
+format?: string | ((value: any, context: CellContext) => string);
 mask?: (value: any) => any;
 }[]>;
 rows: Ref<    {
@@ -379,9 +379,23 @@ export declare type TableColumn = {
     pinned?: boolean;
     cellComponent?: string;
     cellComponentProps?: Record<string, any>;
-    modalComponent?: string | ((context?: CellContext) => string);
+    /**
+     * The component to use for the modal. If a function is provided, it will be called with the cell context.
+     * The following properties are available on the cell context:
+     * - `row` - the row object
+     * - `column` - the column object
+     * - `table` - the table object
+     *
+     * The function should return the name of the component to use for the modal.
+     *
+     * Additionally, the following properties will be automatically passed to the modal component:
+     * - `colIndex` - the column index of the current cell
+     * - `rowIndex` - the row index of the current cell
+     * - `store` - the table data store
+     */
+    modalComponent?: string | ((context: CellContext) => string);
     modalComponentExtraProps?: Record<string, any>;
-    format?: string | ((value: any, context?: CellContext) => string);
+    format?: string | ((value: any, context: CellContext) => string);
     mask?: (value: any) => any;
 };
 

package/dist/atable.js

@@ -1,4 +1,4 @@
-import { onMounted as Y, ref as x, watch as M, onBeforeUnmount as qe, computed as $, unref as g, getCurrentScope as Te, onScopeDispose as Me, getCurrentInstance as se, nextTick as Re, toRef as Ge, readonly as Ye, customRef as Xe, defineComponent as W, useTemplateRef as ee, openBlock as E, createElementBlock as k, normalizeStyle as j, normalizeClass as z, createBlock as Z, resolveDynamicComponent as Oe, mergeProps as ae, toDisplayString as F, Fragment as _, createElementVNode as B, renderSlot as R, createCommentVNode as U, withDirectives as oe, vShow as Le, renderList as le, createTextVNode as Je, createVNode as ge, withCtx as ye } from "vue";
+import { onMounted as Y, ref as x, watch as T, onBeforeUnmount as qe, computed as $, unref as g, getCurrentScope as Te, onScopeDispose as Me, getCurrentInstance as se, nextTick as Re, toRef as Ge, readonly as Ye, customRef as Xe, defineComponent as W, useTemplateRef as ee, openBlock as E, createElementBlock as k, normalizeStyle as j, normalizeClass as z, createBlock as Z, resolveDynamicComponent as Oe, mergeProps as ae, toDisplayString as F, Fragment as _, createElementVNode as B, renderSlot as R, createCommentVNode as U, withDirectives as oe, vShow as Le, renderList as le, createTextVNode as Je, createVNode as ge, withCtx as ye } from "vue";
 import { defineStore as Qe } from "pinia";
 import './assets/index.css';function Pe(e) {
   return Te() ? (Me(e), !0) : !1;
@@ -22,7 +22,7 @@ function G(...e) {
   Array.isArray(n) || (n = [n]), Array.isArray(o) || (o = [o]);
   const a = [], l = () => {
     a.forEach((u) => u()), a.length = 0;
-  }, i = (u, f, d, v) => (u.addEventListener(f, d, v), () => u.removeEventListener(f, d, v)), s = M(
+  }, i = (u, f, d, v) => (u.addEventListener(f, d, v), () => u.removeEventListener(f, d, v)), s = T(
     () => [q(t), ie(r)],
     ([u, f]) => {
       if (l(), !u)
@@ -56,7 +56,7 @@ function lt(e, t, n = {}) {
   }, s = $(() => {
     const d = ie(e), v = (Array.isArray(d) ? d : [d]).map(q).filter(Ke);
     return new Set(v);
-  }), c = M(
+  }), c = T(
     () => s.value,
     (d) => {
       i(), l.value && d.size && (a = new MutationObserver(t), d.forEach((v) => a.observe(v, r)));
@@ -114,7 +114,7 @@ function ct(e, { window: t = X, scrollTarget: n } = {}) {
       o.value = i.top <= (t.innerHeight || a.documentElement.clientHeight) && i.left <= (t.innerWidth || a.documentElement.clientWidth) && i.bottom >= 0 && i.right >= 0;
     }
   };
-  return M(
+  return T(
     () => q(e),
     () => r(),
     { immediate: !0, flush: "post" }
@@ -225,7 +225,7 @@ const O = (e) => {
 }, Ce = (e) => {
   const t = e.target.parentElement.firstElementChild;
   return t && (!L(t) || !O(t)) ? fe(t) : t;
-}, Ae = (e) => {
+}, Ie = (e) => {
   const t = e.target.parentElement.lastElementChild;
   return t && (!L(t) || !O(t)) ? de(t) : t;
 }, Q = ["alt", "control", "shift", "meta"], ft = {
@@ -263,11 +263,11 @@ const O = (e) => {
     t && (e.preventDefault(), e.stopPropagation(), t.focus());
   },
   "keydown.control.right": (e) => {
-    const t = Ae(e);
+    const t = Ie(e);
     t && (e.preventDefault(), e.stopPropagation(), t.focus());
   },
   "keydown.end": (e) => {
-    const t = Ae(e);
+    const t = Ie(e);
     t && (e.preventDefault(), e.stopPropagation(), t.focus());
   },
   "keydown.enter": (e) => {
@@ -349,7 +349,7 @@ function ve(e) {
     for (const l of e) {
       const i = t(l), s = o(l), c = r(l), u = i ? [i] : s;
       for (const f of u) {
-        const { focused: d } = it(x(f)), v = M(d, (y) => {
+        const { focused: d } = it(x(f)), v = T(d, (y) => {
           y ? f.addEventListener("keydown", c) : f.removeEventListener("keydown", c);
         });
         a.push(v);
@@ -363,7 +363,7 @@ function ve(e) {
 function J(e) {
   return Te() ? (Me(e), !0) : !1;
 }
-function T(e) {
+function M(e) {
   return typeof e == "function" ? e() : g(e);
 }
 const pe = typeof window < "u" && typeof document < "u";
@@ -389,18 +389,18 @@ function gt(e, t = !0, n) {
 const we = pe ? window : void 0;
 function D(e) {
   var t;
-  const n = T(e);
+  const n = M(e);
   return (t = n == null ? void 0 : n.$el) != null ? t : n;
 }
-function Ie(...e) {
+function Ae(...e) {
   let t, n, o, r;
   if (typeof e[0] == "string" || Array.isArray(e[0]) ? ([n, o, r] = e, t = we) : [t, n, o, r] = e, !t)
     return P;
   Array.isArray(n) || (n = [n]), Array.isArray(o) || (o = [o]);
   const a = [], l = () => {
     a.forEach((u) => u()), a.length = 0;
-  }, i = (u, f, d, v) => (u.addEventListener(f, d, v), () => u.removeEventListener(f, d, v)), s = M(
-    () => [D(t), T(r)],
+  }, i = (u, f, d, v) => (u.addEventListener(f, d, v), () => u.removeEventListener(f, d, v)), s = T(
+    () => [D(t), M(r)],
     ([u, f]) => {
       if (l(), !u)
         return;
@@ -431,9 +431,9 @@ function He(e, t, n = {}) {
   const l = We(() => o && "MutationObserver" in o), i = () => {
     a && (a.disconnect(), a = void 0);
   }, s = $(() => {
-    const d = T(e), v = (Array.isArray(d) ? d : [d]).map(D).filter(mt);
+    const d = M(e), v = (Array.isArray(d) ? d : [d]).map(D).filter(mt);
     return new Set(v);
-  }), c = M(
+  }), c = T(
     () => s.value,
     (d) => {
       i(), l.value && d.size && (a = new MutationObserver(t), d.forEach((v) => a.observe(v, r)));
@@ -454,9 +454,9 @@ function bt(e, t, n = {}) {
   const l = We(() => o && "ResizeObserver" in o), i = () => {
     a && (a.disconnect(), a = void 0);
   }, s = $(() => {
-    const f = T(e);
+    const f = M(e);
     return Array.isArray(f) ? f.map((d) => D(d)) : [D(f)];
-  }), c = M(
+  }), c = T(
     s,
     (f) => {
       if (i(), l.value && o) {
@@ -494,9 +494,9 @@ function xt(e, t = {}) {
   function w() {
     l === "sync" ? p() : l === "next-frame" && requestAnimationFrame(() => p());
   }
-  return bt(e, w), M(() => D(e), (m) => !m && w()), He(e, w, {
+  return bt(e, w), T(() => D(e), (m) => !m && w()), He(e, w, {
     attributeFilter: ["style", "class"]
-  }), r && Ie("scroll", w, { capture: !0, passive: !0 }), o && Ie("resize", w, { passive: !0 }), gt(() => {
+  }), r && Ae("scroll", w, { capture: !0, passive: !0 }), o && Ae("resize", w, { passive: !0 }), gt(() => {
     a && w();
   }), {
     height: i,
@@ -513,7 +513,7 @@ function xt(e, t = {}) {
 const Et = (e) => {
   const t = new DOMParser().parseFromString(e, "text/html");
   return Array.from(t.body.childNodes).some((n) => n.nodeType === 1);
-}, kt = ["data-colindex", "data-rowindex", "data-editable", "contenteditable", "tabindex"], Ct = ["innerHTML"], At = { key: 2 }, Ne = /* @__PURE__ */ W({
+}, kt = ["data-colindex", "data-rowindex", "data-editable", "contenteditable", "tabindex"], Ct = ["innerHTML"], It = { key: 2 }, Ne = /* @__PURE__ */ W({
   __name: "ACell",
   props: {
     colIndex: {},
@@ -524,7 +524,14 @@ const Et = (e) => {
     pinned: { type: Boolean }
   },
   setup(e) {
-    const t = ee("cell"), { bottom: n, left: o } = xt(t), r = e.store.getCellData(e.colIndex, e.rowIndex), a = e.store.getCellDisplayValue(e.colIndex, e.rowIndex), l = x(""), i = x(!1), s = e.store.columns[e.colIndex], c = e.store.rows[e.rowIndex], u = s.align || "center", f = s.width || "40ch", d = $(() => typeof a == "string" ? Et(a) : !1), v = $(() => {
+    const t = ee("cell"), { bottom: n, left: o } = xt(t), r = e.store.getCellData(e.colIndex, e.rowIndex), a = x(e.store.getCellDisplayValue(e.colIndex, e.rowIndex)), l = x(""), i = x(!1), s = e.store.columns[e.colIndex], c = e.store.rows[e.rowIndex], u = s.align || "center", f = s.width || "40ch";
+    T(
+      () => e.store.getCellData(e.colIndex, e.rowIndex),
+      (m) => {
+        a.value = e.store.getFormattedValue(e.colIndex, e.rowIndex, m);
+      }
+    );
+    const d = $(() => typeof a.value == "string" ? Et(a.value) : !1), v = $(() => {
       var m;
       return {
         textAlign: u,
@@ -580,14 +587,14 @@ const Et = (e) => {
     }, [
       g(s).cellComponent ? (E(), Z(Oe(g(s).cellComponent), ae({
         key: 0,
-        value: g(a)
+        value: a.value
       }, g(s).cellComponentProps), null, 16, ["value"])) : d.value ? (E(), k("span", {
         key: 1,
-        innerHTML: g(a)
-      }, null, 8, Ct)) : (E(), k("span", At, F(g(a)), 1))
+        innerHTML: a.value
+      }, null, 8, Ct)) : (E(), k("span", It, F(a.value), 1))
     ], 46, kt));
   }
-}), It = ["tabindex"], St = ["tabindex"], $t = ["colspan"], Tt = /* @__PURE__ */ W({
+}), At = ["tabindex"], St = ["tabindex"], $t = ["colspan"], Tt = /* @__PURE__ */ W({
   __name: "AExpansionRow",
   props: {
     rowIndex: {},
@@ -622,7 +629,7 @@ const Et = (e) => {
           class: "row-index"
         }, F(n.value), 1),
         R(o.$slots, "row")
-      ], 16, It),
+      ], 16, At),
       o.store.display[o.rowIndex].expanded ? (E(), k("tr", {
         key: 0,
         ref: "rowExpanded",
@@ -686,7 +693,7 @@ const Et = (e) => {
 }), je = pe ? window : void 0;
 function V(e) {
   var t;
-  const n = T(e);
+  const n = M(e);
   return (t = n == null ? void 0 : n.$el) != null ? t : n;
 }
 function K(...e) {
@@ -696,8 +703,8 @@ function K(...e) {
   Array.isArray(n) || (n = [n]), Array.isArray(o) || (o = [o]);
   const a = [], l = () => {
     a.forEach((u) => u()), a.length = 0;
-  }, i = (u, f, d, v) => (u.addEventListener(f, d, v), () => u.removeEventListener(f, d, v)), s = M(
-    () => [V(t), T(r)],
+  }, i = (u, f, d, v) => (u.addEventListener(f, d, v), () => u.removeEventListener(f, d, v)), s = T(
+    () => [V(t), M(r)],
     ([u, f]) => {
       if (l(), !u)
         return;
@@ -719,7 +726,7 @@ function $e(e, t, n = {}) {
     return P;
   re && !Se && (Se = !0, Array.from(o.document.body.children).forEach((p) => p.addEventListener("click", P)), o.document.documentElement.addEventListener("click", P));
   let i = !0;
-  const s = (p) => T(r).some((w) => {
+  const s = (p) => M(r).some((w) => {
     if (typeof w == "string")
       return Array.from(o.document.querySelectorAll(w)).some((m) => m === p.target || p.composedPath().includes(m));
     {
@@ -728,11 +735,11 @@ function $e(e, t, n = {}) {
     }
   });
   function c(p) {
-    const w = T(p);
+    const w = M(p);
     return w && w.$.subTree.shapeFlag === 16;
   }
   function u(p, w) {
-    const m = T(p), C = m.$.subTree && m.$.subTree.children;
+    const m = M(p), C = m.$.subTree && m.$.subTree.children;
     return C == null || !Array.isArray(C) ? !1 : C.some((H) => H.el === w.target || w.composedPath().includes(H.el));
   }
   const f = (p) => {
@@ -800,8 +807,8 @@ const ne = /* @__PURE__ */ new WeakMap();
 function Lt(e, t = !1) {
   const n = x(t);
   let o = null, r = "";
-  M(ht(e), (i) => {
-    const s = te(T(i));
+  T(ht(e), (i) => {
+    const s = te(M(i));
     if (s) {
       const c = s;
       if (ne.get(c) || ne.set(c, c.style.overflow), c.style.overflow !== "hidden" && (r = c.style.overflow), c.style.overflow === "hidden")
@@ -813,7 +820,7 @@ function Lt(e, t = !1) {
     immediate: !0
   });
   const a = () => {
-    const i = te(T(e));
+    const i = te(M(e));
     !i || n.value || (re && (o = K(
       i,
       "touchmove",
@@ -823,7 +830,7 @@ function Lt(e, t = !1) {
       { passive: !1 }
     )), i.style.overflow = "hidden", n.value = !0);
   }, l = () => {
-    const i = te(T(e));
+    const i = te(M(e));
     !i || !n.value || (re && (o == null || o()), i.style.overflow = r, ne.delete(i), n.value = !1);
   };
   return J(l), $({
@@ -843,7 +850,7 @@ function Pt() {
       return;
     e = !0;
     const r = Lt(n, o.value);
-    M(t, (a) => r.value = a);
+    T(t, (a) => r.value = a);
   };
 }
 Pt();
@@ -909,32 +916,32 @@ const Dt = {
   return Qe(`table-${t}`, () => {
     const o = () => {
       const h = {};
-      for (const [b, A] of a.value.entries())
-        for (const [S, I] of l.value.entries())
-          h[`${b}:${S}`] = I[A.name];
+      for (const [b, I] of a.value.entries())
+        for (const [S, A] of l.value.entries())
+          h[`${b}:${S}`] = A[I.name];
       return h;
     }, r = (h) => {
       const b = [Object.assign({}, { rowModified: !1 })];
       if (h && "0:0" in h)
         return h;
-      const A = /* @__PURE__ */ new Set();
+      const I = /* @__PURE__ */ new Set();
       for (let S = l.value.length - 1; S >= 0; S--) {
-        const I = l.value[S];
-        I.parent && A.add(I.parent), b[S] = {
+        const A = l.value[S];
+        A.parent && I.add(A.parent), b[S] = {
           childrenOpen: !1,
           expanded: !1,
-          indent: I.indent || null,
-          isParent: A.has(S),
-          isRoot: I.parent === null || I.parent === void 0,
+          indent: A.indent || null,
+          isParent: I.has(S),
+          isRoot: A.parent === null || A.parent === void 0,
           rowModified: !1,
-          open: I.parent === null || I.parent === void 0,
-          parent: I.parent
+          open: A.parent === null || A.parent === void 0,
+          parent: A.parent
         };
       }
       return b;
-    }, a = x(e.columns), l = x(e.rows), i = x(e.config || {}), s = x(e.table || o()), c = x(r(e.display)), u = x(e.modal || { visible: !1 }), f = $(() => a.value.some((h) => h.pinned)), d = $(() => `${Math.ceil(l.value.length / 100 + 1)}ch`), v = $(() => ["list", "tree", "list-expansion"].includes(i.value.view)), y = (h, b) => s.value[`${h}:${b}`], p = (h, b, A) => {
-      const S = `${h}:${b}`, I = a.value[h];
-      s.value[S] !== A && (c.value[b].rowModified = !0), s.value[S] = A, l.value[b][I.name] = A;
+    }, a = x(e.columns), l = x(e.rows), i = x(e.config || {}), s = x(e.table || o()), c = x(r(e.display)), u = x(e.modal || { visible: !1 }), f = $(() => a.value.some((h) => h.pinned)), d = $(() => `${Math.ceil(l.value.length / 100 + 1)}ch`), v = $(() => ["list", "tree", "list-expansion"].includes(i.value.view)), y = (h, b) => s.value[`${h}:${b}`], p = (h, b, I) => {
+      const S = `${h}:${b}`, A = a.value[h];
+      s.value[S] !== I && (c.value[b].rowModified = !0), s.value[S] = I, l.value[b][A.name] = I;
     }, w = (h) => ({
       minWidth: h.width || "40ch",
       textAlign: h.align || "center",
@@ -946,11 +953,11 @@ const Dt = {
           c.value[b].parent === h && (c.value[b].open = !c.value[b].open, c.value[b].childrenOpen && H(b));
       } else i.value.view === "list-expansion" && (c.value[h].expanded = !c.value[h].expanded);
     }, Ue = (h, b) => {
-      const A = y(h, b);
-      return he(h, b, A);
-    }, he = (h, b, A) => {
-      const S = a.value[h], I = l.value[b], N = S.format;
-      return N ? typeof N == "function" ? N(A, { table: s.value, row: I, column: S }) : typeof N == "string" ? Function(`"use strict";return (${N})`)()(A, { table: s.value, row: I, column: S }) : A : A;
+      const I = y(h, b);
+      return he(h, b, I);
+    }, he = (h, b, I) => {
+      const S = a.value[h], A = l.value[b], N = S.format;
+      return N ? typeof N == "function" ? N(I, { table: s.value, row: A, column: S }) : typeof N == "string" ? Function(`"use strict";return (${N})`)()(I, { table: s.value, row: A, column: S }) : I : I;
     };
     return {
       // state
@@ -997,7 +1004,7 @@ const Dt = {
         const [f, d, v] = u, y = c.getCellData(f, d);
         o("cellUpdate", [f, d, v, y]);
       }
-    }), M(
+    }), T(
       () => l.rows,
       (s) => {
         o("update:modelValue", s);