@fewangsit/wangsvue-gsts 1.0.0-alpha.38 → 1.0.0-alpha.39

package/columnlist/index.es.js

@@ -1,52 +1,52 @@
-import { reactive as P, defineComponent as _, mergeModels as q, useModel as U, ref as F, shallowRef as J, computed as M, watch as K, createElementBlock as x, openBlock as y, Fragment as B, renderList as T, createCommentVNode as z, mergeProps as I, withModifiers as g, createVNode as E } from "vue";
-import { _ as G } from "../checkbox/index.es.js";
-import { _ as H } from "../icon/index.es.js";
-import { c as Q } from "../vendor/lodash-es/cloneDeep.es.js";
-const W = (o, u, l) => {
-  if (u && l > u) {
+import { reactive as $, defineComponent as _, mergeModels as q, useModel as U, ref as J, shallowRef as K, computed as B, watch as T, createElementBlock as w, openBlock as k, Fragment as E, renderList as z, createCommentVNode as G, mergeProps as I, withModifiers as C, createVNode as A } from "vue";
+import { _ as Q } from "../checkbox/index.es.js";
+import { _ as W } from "../icon/index.es.js";
+import { c as X } from "../vendor/lodash-es/cloneDeep.es.js";
+const Y = (o, d, l) => {
+  if (d && l > d) {
     let r = 0;
     return o.map((n) => {
-      const c = u !== void 0 && r < u, d = n.checkedByDefault !== !1 && u === void 0 || n.checkedByDefault !== !1 && c;
-      return d && r++, {
+      const m = d !== void 0 && r < d, c = n.checkedByDefault !== !1 && d === void 0 || n.checkedByDefault !== !1 && m;
+      return c && r++, {
         ...n,
-        visible: d
+        visible: c
       };
     });
   }
   return o;
-}, b = "tableConfigs", X = () => "user-" + (JSON.parse(localStorage.getItem("user") ?? "{}")._id ?? "unknown"), A = async () => {
+}, x = "tableConfigs", Z = () => "user-" + (JSON.parse(localStorage.getItem("user") ?? "{}")._id ?? "unknown"), N = async () => {
   let o = null;
-  return new Promise((u) => {
-    const l = indexedDB.open(X(), 1);
+  return new Promise((d) => {
+    const l = indexedDB.open(Z(), 1);
     l.onupgradeneeded = (r) => {
-      o = r.target.result, o.createObjectStore(b);
+      o = r.target.result, o.createObjectStore(x);
     }, l.onsuccess = (r) => {
-      o = r.target.result, u(o);
+      o = r.target.result, d(o);
     };
   });
-}, Y = async () => {
-  const l = (await A()).transaction(b, "readonly").objectStore(b);
+}, ee = async () => {
+  const l = (await N()).transaction(x, "readonly").objectStore(x);
   return new Promise((r) => {
-    let n, c;
-    l.getAllKeys().onsuccess = (d) => {
-      n = d.target.result;
-    }, l.getAll().onsuccess = (d) => {
-      c = d.target.result;
-      const v = {};
-      n.forEach((m, p) => {
-        v[m] = c[p];
-      }), r(v);
+    let n, m;
+    l.getAllKeys().onsuccess = (c) => {
+      n = c.target.result;
+    }, l.getAll().onsuccess = (c) => {
+      m = c.target.result;
+      const b = {};
+      n.forEach((g, y) => {
+        b[g] = m[y];
+      }), r(b);
     };
   });
-}, h = P({}), Z = async () => {
-  const o = async (u, l) => {
-    h[u] = l, (await A()).transaction(b, "readwrite").objectStore(b).put(l, u);
+}, S = $({}), te = async () => {
+  const o = async (d, l) => {
+    S[d] = l, (await N()).transaction(x, "readwrite").objectStore(x).put(l, d);
   };
-  return Object.assign(h, await Y()), {
-    config: h,
+  return Object.assign(S, await ee()), {
+    config: S,
     setConfig: o
   };
-}, ee = ["id", "data-item-dragable", "draggable", "onDragenter", "onDragstart"], se = /* @__PURE__ */ _({
+}, ae = ["id", "data-item-dragable", "draggable", "onDragenter", "onDragstart"], re = /* @__PURE__ */ _({
   __name: "ColumnList",
   props: /* @__PURE__ */ q({
     tableId: {},
@@ -60,88 +60,110 @@ const W = (o, u, l) => {
     modelModifiers: {}
   }),
   emits: ["update:modelValue"],
-  setup(o, { expose: u }) {
-    const l = o, r = U(o, "modelValue"), n = F([]), c = J(), d = M(() => [...n.value].filter((a) => a.visible !== !1)), v = M(() => l.maxColumn ? d.value.length >= l.maxColumn : !1), m = (a) => a.dragable !== !1 && p(a), p = (a) => {
-      if (!v.value) return !0;
+  setup(o, { expose: d }) {
+    const l = o, r = U(o, "modelValue"), n = J([]), m = K(), c = B(() => [...n.value].filter((a) => a.visible !== !1)), b = B(() => l.maxColumn ? c.value.length >= l.maxColumn : !1), g = (a) => a.dragable !== !1 && y(a), y = (a) => {
+      if (!b.value) return !0;
       const t = r.value.findIndex((e) => e.field === a.field) > 0;
-      return v.value && t;
-    }, S = () => {
-      n.value = W(
+      return b.value && t;
+    }, H = (a) => {
+      const t = [];
+      for (const e of a)
+        if (e.parentHeader) {
+          const s = t.find(
+            (f) => f.parentHeaderField === e.parentHeader.field
+          );
+          s ? s.siblingHeaders.push(e) : t.push({
+            ...e,
+            parentHeaderField: e.parentHeader.field,
+            siblingHeaders: []
+          });
+        } else
+          t.push(e);
+      return t;
+    }, D = (a) => {
+      const t = [];
+      for (const e of a)
+        e.parentHeaderField ? t.push(e, ...e.siblingHeaders) : t.push(e);
+      return t;
+    }, V = () => {
+      n.value = Y(
         n.value,
         l.maxColumn,
-        d.value.length
-      ), r.value = [...d.value];
-    }, C = async () => {
-      const a = n.value.map(
-        (e) => ({
-          field: e.field,
-          width: e.width ?? "max-content",
-          visible: e.visible !== !1,
-          fixed: !!e.fixed
-        })
-      ), { setConfig: t } = await Z();
+        c.value.length
+      ), r.value = D([...c.value]);
+    }, h = async () => {
+      const a = D(
+        n.value
+      ).map((e) => ({
+        field: e.field,
+        width: e.width ?? "max-content",
+        visible: e.visible !== !1,
+        fixed: !!e.fixed
+      })), { setConfig: t } = await te();
       await t(l.tableId, a);
-    }, N = () => {
-      r.value = [...n.value];
-    }, R = (a, t, e) => {
-      const { dataTransfer: i } = a;
-      c.value = t, i && (i.dropEffect = "move", i.effectAllowed = "move", i.setData("field", t.field), i.setData("index", e.toString()));
-    }, L = async () => {
-      c.value = void 0, N(), await C();
-    }, j = (a, t) => {
-      var e, i;
-      if (a.preventDefault(), m(t)) {
-        const f = a.target, s = f.tagName === "LI" ? f : f.closest("li");
-        if (s == null || s.classList.add("bg-primary-50"), (e = s == null ? void 0 : s.nextElementSibling) == null || e.classList.remove("bg-primary-50"), (i = s == null ? void 0 : s.previousElementSibling) == null || i.classList.remove("bg-primary-50"), !s || !c.value) return;
-        const D = n.value.findIndex(
-          (k) => {
-            var V;
-            return k.field === ((V = c.value) == null ? void 0 : V.field);
+    }, R = () => {
+      r.value = D([...n.value]);
+    }, L = (a, t, e) => {
+      const { dataTransfer: s } = a;
+      m.value = t, s && (s.dropEffect = "move", s.effectAllowed = "move", s.setData("field", t.field), s.setData("index", e.toString()));
+    }, j = async () => {
+      m.value = void 0, R(), await h();
+    }, F = (a, t) => {
+      var e, s;
+      if (a.preventDefault(), g(t)) {
+        const f = a.target, u = f.tagName === "LI" ? f : f.closest("li");
+        if (u == null || u.classList.add("bg-primary-50"), (e = u == null ? void 0 : u.nextElementSibling) == null || e.classList.remove("bg-primary-50"), (s = u == null ? void 0 : u.previousElementSibling) == null || s.classList.remove("bg-primary-50"), !u || !m.value) return;
+        const i = n.value.findIndex(
+          (p) => {
+            var M;
+            return p.field === ((M = m.value) == null ? void 0 : M.field);
           }
-        ), w = n.value.findIndex(
-          (k) => k.field === s.id
+        ), v = n.value.findIndex(
+          (p) => p.field === u.id
         );
-        D !== -1 && w !== -1 && ([
-          n.value[D],
-          n.value[w]
+        i !== -1 && v !== -1 && ([
+          n.value[i],
+          n.value[v]
         ] = [
-          n.value[w],
-          n.value[D]
+          n.value[v],
+          n.value[i]
         ]);
       }
     }, O = (a) => {
       const t = a.target.querySelector("label");
       t && t.click();
-    }, $ = () => {
-      const a = Q(l.defaultColumns);
+    }, P = () => {
+      const a = X(l.defaultColumns);
       if (l.maxColumn && a.length > l.maxColumn) {
         let t = 0;
-        n.value = a.map((e) => {
-          const i = l.maxColumn !== void 0 && t < l.maxColumn, f = e.checkedByDefault !== !1 && l.maxColumn === void 0 || e.checkedByDefault !== !1 && i;
-          return f && t++, {
-            ...e,
-            visible: f
-          };
-        });
+        n.value = H(
+          a.map((e) => {
+            const s = l.maxColumn !== void 0 && t < l.maxColumn, f = e.checkedByDefault !== !1 && l.maxColumn === void 0 || e.checkedByDefault !== !1 && s;
+            return f && t++, {
+              ...e,
+              visible: f
+            };
+          })
+        );
       } else
-        n.value = a;
-      r.value = [...d.value], C();
+        n.value = H(a);
+      r.value = D([...c.value]), h();
     };
-    return K(
+    return T(
       () => l.savedColumns,
       (a) => {
-        n.value = a ?? [];
+        n.value = H(a) ?? [];
       },
       { immediate: !0 }
-    ), u({
-      setColumnVisibilityConfig: C,
-      resetToDefault: $,
-      updateVisibleColumnsModel: S
-    }), (a, t) => (y(), x("ul", null, [
-      (y(!0), x(B, null, T(n.value, (e, i) => {
-        var f;
-        return y(), x(B, null, [
-          e.reorderable !== !1 ? (y(), x("li", I(
+    ), d({
+      setColumnVisibilityConfig: h,
+      resetToDefault: P,
+      updateVisibleColumnsModel: V
+    }), (a, t) => (k(), w("ul", null, [
+      (k(!0), w(E, null, z(n.value, (e, s) => {
+        var f, u;
+        return k(), w(E, null, [
+          e.reorderable !== !1 ? (k(), w("li", I(
             {
               id: e.field,
               key: e.field,
@@ -149,56 +171,59 @@ const W = (o, u, l) => {
             },
             a.$preset.customcolumn.menuitem({
               props: l,
-              context: { dragable: m(e) }
+              context: { dragable: g(e) }
             }),
             {
-              "data-item-dragable": m(e),
-              draggable: m(e),
+              "data-item-dragable": g(e),
+              draggable: g(e),
               onClick: O,
-              onDragend: L,
-              onDragenter: g((s) => j(s, e), ["prevent"]),
-              onDragleave: t[2] || (t[2] = g(() => {
+              onDragend: j,
+              onDragenter: C((i) => F(i, e), ["prevent"]),
+              onDragleave: t[2] || (t[2] = C(() => {
               }, ["prevent"])),
-              onDragover: t[3] || (t[3] = g(() => {
+              onDragover: t[3] || (t[3] = C(() => {
               }, ["prevent"])),
-              onDragstart: (s) => R(s, e, i),
-              onMouseenter: t[4] || (t[4] = (s) => s.target.classList.add("bg-primary-50")),
-              onMouseleave: t[5] || (t[5] = (s) => s.target.classList.remove("bg-primary-50")),
+              onDragstart: (i) => L(i, e, s),
+              onMouseenter: t[4] || (t[4] = (i) => i.target.classList.add("bg-primary-50")),
+              onMouseleave: t[5] || (t[5] = (i) => i.target.classList.remove("bg-primary-50")),
               "data-wv-section": "custom-column-menu-item"
             }
           ), [
-            E(H, I(
+            A(W, I(
               {
-                onClick: t[0] || (t[0] = g(() => {
+                onClick: t[0] || (t[0] = C(() => {
                 }, ["stop"])),
                 ref_for: !0
               },
               (f = a.$preset.customcolumn) == null ? void 0 : f.dragicon({
-                context: { dragable: m(e) }
+                context: { dragable: g(e) }
               }),
               { icon: "dragable-menu" }
             ), null, 16),
-            E(G, {
+            A(Q, {
               "aria-label": e.header,
               disabled: e.fixed,
-              label: e.header,
+              label: ((u = e.parentHeader) == null ? void 0 : u.header) ?? e.header,
               "model-value": e.visible !== !1,
-              selectable: p(e),
-              onClick: t[1] || (t[1] = g(() => {
+              selectable: y(e),
+              onClick: t[1] || (t[1] = C(() => {
               }, ["stop"])),
-              "onUpdate:modelValue": (s) => {
-                e.visible = !!s, S(), C();
+              "onUpdate:modelValue": (i) => {
+                var v;
+                e.visible = !!i, (v = e.siblingHeaders) == null || v.forEach((p) => {
+                  p.visible = !!i;
+                }), V(), h();
               },
               class: "!w-full"
             }, null, 8, ["aria-label", "disabled", "label", "model-value", "selectable", "onUpdate:modelValue"])
-          ], 16, ee)) : z("", !0)
+          ], 16, ae)) : G("", !0)
         ], 64);
       }), 256))
     ]));
   }
 });
 export {
-  se as _,
-  W as s,
-  Z as u
+  re as _,
+  Y as s,
+  te as u
 };

package/customcolumn/index.d.ts

@@ -5,7 +5,11 @@ export interface CustomColumnLocaleConfig {
   resetDefaultText: string;
 }
 
-export type DragableColumn = TableColumn & { order?: number };
+export type DragableColumn = TableColumn & {
+  order?: number;
+  parentHeaderField?: string;
+  siblingHeaders?: TableColumn[];
+};
 
 export interface CustomColumnProps {
   tableId: string;

package/datatable/index.d.ts

@@ -245,8 +245,42 @@ export type ColumnPreset =
   | ColumnMultiRowPreset
   | ColumnCheckboxPreset;
 
+export interface CombinedHeaders {
+  parent: TableParentHeader[];
+  child: TreeTableColumns[];
+}
+
+export interface TableParentHeader
+  extends Pick<
+    TableColumn,
+    'header' | 'info' | 'infoSeverity' | 'headerClass'
+  > {
+  /**
+   * Field is used as the header's key, parent headers with
+   * the same field will be grouped into one cell
+   */
+  field: string;
+  /**
+   * Note: colspan is calculated automatically
+   * @ignore
+   */
+  colspan?: number;
+  /**
+   * Note: rowspan is calculated automatically
+   * @ignore
+   */
+  rowspan?: number;
+}
+
 export interface TableColumn {
   header?: string;
+  /**
+   * The headers placed above certain child headers. If there are
+   * multiple child headers with the same parent header, the parent
+   * will have its colspan extended. The parent header will be shown
+   * when at least one of its child headers is visible.
+   */
+  parentHeader?: TableParentHeader;
   field: string;
   fieldType?: 'string' | 'number' | 'boolean' | 'array';
   info?: string;
@@ -666,6 +700,10 @@ export type BaseDataTableEmits = {
    * Emits when option menu button clicked.
    */
   'toggleOption': [data: Data];
+  /**
+   * Emits when an item is double clicked.
+   */
+  'doubleClick': [data: Data];
   /**
    * @deprecated use 'v-model:selected-data' instead.
    */