@duxweb/dvha-pro 0.0.6 → 0.0.7

package/dist/esm/components/layout/table.js

@@ -1,25 +1,30 @@
-import { defineComponent as _, toRef as $, computed as s, reactive as ee, ref as te, watch as le, createVNode as e, h as A, mergeProps as ae } from "vue";
-import { useI18n as ie, useJsonSchema as D } from "@duxweb/dvha-core";
-import { useWindowSize as ne, useElementSize as re } from "@vueuse/core";
-import { NInput as E, NTabs as oe, NTab as ue, NPopover as ce, NButton as c, NPopselect as se, NTooltip as p, NProgress as pe, NPagination as fe } from "naive-ui";
-import { useAction as de } from "../../hooks/action.js";
-import { useTable as me } from "../../hooks/table.js";
-import "lodash-es";
+import { defineComponent as $, toRef as ee, computed as f, reactive as te, ref as ie, watch as ae, createVNode as t, h as D, mergeProps as ne } from "vue";
+import { useI18n as re, useJsonSchema as E } from "@duxweb/dvha-core";
+import { useWindowSize as le, useElementSize as ue } from "@vueuse/core";
+import { NInput as I, NTabs as oe, NTab as ce, NButton as u, NPopover as de, NPopselect as fe, NTooltip as p, NProgress as pe, NPagination as me } from "naive-ui";
+import { useAction as ge } from "../../hooks/action.js";
+import "@overlastic/vue";
+import "vue-echarts";
 import "clsx";
 import "jinrishici";
-import "@overlastic/vue";
+import "lodash-es";
 import "vee-validate";
 import "@vee-validate/i18n";
 import "colorizr";
+import "echarts";
+import "@ant-design/colors";
+import "@unocss/preset-typography";
 import "vue-router";
 import "vue-command-palette";
 import "@duxweb/dvha-naiveui";
 import { DuxPage as ve } from "../../pages/page.js";
 import "../../pages/page404.js";
-import { DuxTableFilter as ge } from "./filter.js";
-import { DuxTableTools as be } from "./tools.js";
+import { DuxTableFilter as be } from "./filter.js";
+import { DuxTableTools as he } from "./tools.js";
+import { useDrawer as xe } from "../../hooks/drawer.js";
+import { useTable as ye } from "../../hooks/table.js";
 import "pinia";
-const Le = /* @__PURE__ */ _({
+const Ge = /* @__PURE__ */ $({
   name: "DuxTableLayout",
   props: {
     path: {
@@ -47,239 +52,299 @@ const Le = /* @__PURE__ */ _({
     },
     tools: {
       type: Object
+    },
+    sideLeftTitle: {
+      type: String,
+      default: ""
+    },
+    sideRightTitle: {
+      type: String,
+      default: ""
     }
   },
-  setup(l, {
-    slots: t
+  setup(a, {
+    slots: e
   }) {
-    var N, k;
-    const f = $(l.filter || {}), {
-      t: r
-    } = ie(), {
-      renderAction: I
-    } = de(), b = me({
-      path: l.path,
-      filters: f.value,
-      columns: l.columns || [],
-      pagination: l.pagination
+    var C, N;
+    const m = ee(a.filter || {}), {
+      t: l
+    } = re(), {
+      renderAction: O
+    } = ge(), y = ye({
+      path: a.path,
+      filters: m.value,
+      columns: a.columns || [],
+      pagination: a.pagination
     }), {
-      meta: d,
-      columns: h,
-      tablePagination: O,
-      table: W,
-      onUpdateColumnSelected: V,
-      onUpdateChecked: m,
-      columnSelected: B,
-      autoRefetch: L,
-      autoCountdown: x,
-      onAutoRefetch: U,
-      isExporting: q,
-      isExportingRows: F,
-      isImporting: H,
-      onExport: J,
-      onExportRows: K,
-      onImport: G
-    } = b, M = s(() => h.value.filter((a) => "title" in a && "key" in a).map((a) => ({
-      label: a.title,
-      value: a.key
+      meta: g,
+      columns: w,
+      tablePagination: W,
+      table: V,
+      onUpdateColumnSelected: B,
+      onUpdateChecked: v,
+      columnSelected: U,
+      autoRefetch: q,
+      autoCountdown: R,
+      onAutoRefetch: F,
+      isExporting: b,
+      isExportingRows: H,
+      isImporting: J,
+      onExport: K,
+      onExportRows: G,
+      onImport: M
+    } = y, Q = f(() => w.value.filter((i) => "title" in i && "key" in i).map((i) => ({
+      label: i.title,
+      value: i.key
     }))), {
-      width: y
-    } = ne(), Q = s(() => h.value.reduce((o, i) => o + (Number(i == null ? void 0 : i.width) || Number(i == null ? void 0 : i.minWidth) || 110), 0)), u = ee({
+      width: o
+    } = le(), X = f(() => w.value.reduce((c, r) => c + (Number(r == null ? void 0 : r.width) || Number(r == null ? void 0 : r.minWidth) || 110), 0)), d = te({
       show: !1,
       collapse: !1
-    }), w = te(), {
-      height: X
-    } = re(w);
-    le(X, (a) => {
-      a > 35 ? u.show = !0 : u.show = !1;
+    }), k = ie(), {
+      height: Y
+    } = ue(k);
+    ae(Y, (i) => {
+      i > 35 ? d.show = !0 : d.show = !1;
     }, {
       immediate: !0,
       deep: !0
     });
-    const v = s(() => (l.filterSchema || []).map((a) => {
+    const h = f(() => (a.filterSchema || []).map((i) => {
       const {
-        title: o,
-        ...i
-      } = a;
+        title: c,
+        ...r
+      } = i;
       return {
-        tag: ge,
+        tag: be,
         attrs: {
-          label: o
+          label: c
         },
-        children: i
+        children: r
       };
     })), {
-      render: Y
-    } = D({
-      data: (N = v.value) == null ? void 0 : N.slice(1),
+      render: Z
+    } = E({
+      data: (C = h.value) == null ? void 0 : C.slice(1),
       components: {
-        NInput: E
+        NInput: I
       }
     }), {
-      render: Z
-    } = D({
-      data: (k = v.value) == null ? void 0 : k.slice(0, 1),
+      render: _
+    } = E({
+      data: (N = h.value) == null ? void 0 : N.slice(0, 1),
       components: {
-        NInput: E
+        NInput: I
       }
-    }), g = s(() => ({
+    }), x = f(() => ({
       import: !0,
       export: !0,
       refresh: !0,
-      ...l.tools
-    }));
-    return () => e(ve, {
-      actions: l.actions,
+      ...a.tools
+    })), {
+      show: T
+    } = xe();
+    return () => t(ve, {
+      actions: a.actions,
       scrollbar: !1
     }, {
+      sideLeft: () => {
+        var i;
+        return e != null && e.sideLeft && o.value >= 1024 ? (i = e == null ? void 0 : e.sideLeft) == null ? void 0 : i.call(e) : void 0;
+      },
+      sideRight: () => {
+        var i;
+        return e != null && e.sideRight && o.value >= 1024 ? (i = e == null ? void 0 : e.sideRight) == null ? void 0 : i.call(e) : void 0;
+      },
       default: () => {
-        var a, o, i, j, C, S, z, R, T;
-        return e("div", {
-          class: "flex flex-col gap-3 h-full relative "
-        }, [e("div", {
+        var i, c, r, S, s, z, j, L, P;
+        return t("div", {
+          class: "flex flex-col gap-3 h-full relative"
+        }, [t("div", {
           class: "flex gap-3 justify-between flex-col lg:flex-row"
-        }, [l.tabs && e("div", {
+        }, [a.tabs && t("div", {
           class: "flex flex-none"
-        }, [e(oe, {
+        }, [t(oe, {
           type: "segment",
           size: "small",
           style: {
             "--n-tab-padding": "4px 10px"
           },
-          "default-value": (o = (a = l.tabs) == null ? void 0 : a[0]) == null ? void 0 : o.value,
-          value: (i = f.value) == null ? void 0 : i.tab,
+          "default-value": (c = (i = a.tabs) == null ? void 0 : i[0]) == null ? void 0 : c.value,
+          value: (r = m.value) == null ? void 0 : r.tab,
           onUpdateValue: (n) => {
-            f.value.tab = n;
+            m.value.tab = n;
           }
         }, {
           default: () => {
             var n;
-            return [(n = l.tabs) == null ? void 0 : n.map((P) => e(ue, {
-              name: P.value,
-              tab: P.label
+            return [(n = a.tabs) == null ? void 0 : n.map((A) => t(ce, {
+              name: A.value,
+              tab: A.label
             }, null))];
           }
-        })]), e("div", {
-          class: ["overflow-hidden flex-1", u.collapse ? "h-auto" : "h-8.5"]
-        }, [e("div", {
-          ref: w,
-          class: ["lg:flex gap-2 flex-wrap", l.tabs ? "justify-end" : "justify-start"]
-        }, [A(Z)])]), e("div", {
+        })]), t("div", {
+          class: ["overflow-hidden flex-1 flex gap-2", d.collapse ? "h-auto" : "h-8.5"]
+        }, [(e == null ? void 0 : e.sideLeft) && o.value < 1024 && t(u, {
+          class: "flex-none",
+          secondary: !0,
+          loading: b.value,
+          onClick: () => {
+            T({
+              title: a.sideLeftTitle,
+              component: () => {
+                var n;
+                return t("div", null, [(n = e == null ? void 0 : e.sideLeft) == null ? void 0 : n.call(e)]);
+              },
+              width: 300,
+              placement: "left"
+            });
+          }
+        }, {
+          icon: () => t("div", {
+            class: "i-tabler:layout-sidebar-inactive size-4"
+          }, null)
+        }), t("div", {
+          ref: k,
+          class: ["flex-1 lg:flex gap-2 flex-wrap", a.tabs ? "justify-end" : "justify-start"]
+        }, [D(_)]), (e == null ? void 0 : e.sideRight) && o.value < 1024 && t(u, {
+          class: "flex-none",
+          secondary: !0,
+          loading: b.value,
+          onClick: () => {
+            T({
+              title: a.sideRightTitle,
+              component: () => {
+                var n;
+                return t("div", null, [(n = e == null ? void 0 : e.sideRight) == null ? void 0 : n.call(e)]);
+              },
+              width: 300,
+              placement: "right"
+            });
+          }
+        }, {
+          icon: () => t("div", {
+            class: "i-tabler:layout-sidebar-right-inactive size-4"
+          }, null)
+        })]), t("div", {
           class: "flex gap-2 justify-between lg:justify-end"
-        }, [v.value.length > 1 && e(ce, {
+        }, [h.value.length > 1 && t(de, {
           trigger: "click",
           displayDirective: "show"
         }, {
-          trigger: () => e(c, {
+          trigger: () => t(u, {
             iconPlacement: "right",
             onClick: () => {
-              u.collapse = !u.collapse;
+              d.collapse = !d.collapse;
             }
           }, {
-            default: () => r("components.button.filter"),
-            icon: () => e("div", {
+            default: () => l("components.button.filter"),
+            icon: () => t("div", {
               class: ["i-tabler:chevrons-down size-4 transition-all"]
             }, null)
           }),
-          default: () => e("div", {
+          default: () => t("div", {
             class: "flex flex-col gap-2 py-1"
-          }, [A(Y)])
-        }), e("div", {
+          }, [D(Z)])
+        }), t("div", {
           class: "flex gap-2 items-center"
-        }, [(j = t == null ? void 0 : t.tools) == null ? void 0 : j.call(t), e(se, {
-          options: M.value,
-          value: B.value,
+        }, [(S = e == null ? void 0 : e.tools) == null ? void 0 : S.call(e), t(fe, {
+          options: Q.value,
+          value: U.value,
           onUpdateValue: (n) => {
-            V(n);
+            B(n);
           },
           multiple: !0,
           placement: "bottom-start",
           trigger: "click"
         }, {
-          default: () => [e(p, null, {
-            trigger: () => e(c, {
+          default: () => [t(p, null, {
+            trigger: () => t(u, {
+              secondary: !0,
               "icon-placement": "right"
             }, {
-              icon: () => e("div", {
+              icon: () => t("div", {
                 class: "i-tabler:columns size-4"
               }, null)
             }),
-            default: () => r("components.list.columnSetting")
+            default: () => l("components.list.columnSetting")
           })]
-        }), g.value.export && e(p, null, {
-          trigger: () => e(c, {
-            loading: q.value,
-            onClick: J
+        }), x.value.export && t(p, null, {
+          trigger: () => t(u, {
+            secondary: !0,
+            loading: b.value,
+            onClick: K
           }, {
-            icon: () => e("div", {
+            icon: () => t("div", {
               class: "i-tabler:database-export size-4"
             }, null)
           }),
-          default: () => r("components.button.export")
-        }), g.value.import && e(p, null, {
-          trigger: () => e(c, {
-            loading: H.value,
-            onClick: G
+          default: () => l("components.button.export")
+        }), x.value.import && t(p, null, {
+          trigger: () => t(u, {
+            secondary: !0,
+            loading: J.value,
+            onClick: M
           }, {
-            icon: () => e("div", {
+            icon: () => t("div", {
               class: "i-tabler:database-import size-4"
             }, null)
           }),
-          default: () => r("components.button.import")
-        }), g.value.refresh && e(p, null, {
-          trigger: () => e(c, {
-            onClick: U
+          default: () => l("components.button.import")
+        }), x.value.refresh && t(p, null, {
+          trigger: () => t(u, {
+            secondary: !0,
+            onClick: F
           }, {
-            icon: () => L.value ? e(pe, {
+            icon: () => q.value ? t(pe, {
               class: "size-4",
               type: "circle",
-              percentage: x.value * 10,
+              percentage: R.value * 10,
               strokeWidth: 20,
               color: "rgba(var(--ui-color-primary))"
             }, {
-              default: () => [e("span", {
+              default: () => [t("span", {
                 class: "text-8px"
-              }, [x.value])]
-            }) : e("div", {
+              }, [R.value])]
+            }) : t("div", {
               class: "i-tabler:refresh size-4"
             }, null)
           }),
-          default: () => r("components.button.autoRefresh")
-        })]), e("div", {
+          default: () => l("components.button.autoRefresh")
+        })]), t("div", {
           class: "flex gap-2 justify-end"
-        }, [(C = t.actions) == null ? void 0 : C.call(t), ((S = l.actions) == null ? void 0 : S.length) > 0 && I({
-          type: y.value < 1024 ? "dropdown" : "button",
-          items: l.actions
-        })])])]), e("div", {
+        }, [(s = e.actions) == null ? void 0 : s.call(e), ((z = a.actions) == null ? void 0 : z.length) > 0 && O({
+          type: o.value < 1024 ? "dropdown" : "button",
+          items: a.actions
+        })])])]), t("div", {
           class: "flex-1 min-h-0"
-        }, [(z = t == null ? void 0 : t.default) == null ? void 0 : z.call(t, {
-          ...b,
-          width: Q.value
-        })]), e("div", {
+        }, [(j = e == null ? void 0 : e.default) == null ? void 0 : j.call(e, {
+          ...y,
+          width: X.value
+        })]), t("div", {
           class: "flex justify-between"
-        }, [e("div", null, [(R = t == null ? void 0 : t.bottom) == null ? void 0 : R.call(t)]), e("div", null, [l.pagination && e(fe, ae(O.value, {
-          simple: y.value < 768
+        }, [t("div", null, [(L = e == null ? void 0 : e.bottom) == null ? void 0 : L.call(e)]), t("div", null, [a.pagination && t(me, ne(W.value, {
+          simple: o.value < 768
         }), {
           prefix: () => {
             var n;
-            return e("div", null, [r("components.list.total", {
-              total: ((n = d == null ? void 0 : d.value) == null ? void 0 : n.total) || 0
+            return t("div", null, [l("components.list.total", {
+              total: ((n = g == null ? void 0 : g.value) == null ? void 0 : n.total) || 0
             })]);
           }
-        })])]), e(be, {
-          number: ((T = W.value.checkedRowKeys) == null ? void 0 : T.length) || 0 || 0,
+        })])]), t(he, {
+          number: ((P = V.value.checkedRowKeys) == null ? void 0 : P.length) || 0 || 0,
           group: [[{
             icon: "i-tabler:x",
             onClick: () => {
-              m == null || m([]);
+              v == null || v([]);
             }
           }], [{
-            label: r("components.button.export"),
+            label: l("components.button.export"),
             icon: "i-tabler:file-export",
-            loading: F.value,
-            onClick: K
+            loading: H.value,
+            onClick: G
           }, {
-            label: r("components.button.delete"),
+            label: l("components.button.delete"),
             type: "error",
             icon: "i-tabler:trash"
           }]]
@@ -289,5 +354,5 @@ const Le = /* @__PURE__ */ _({
   }
 });
 export {
-  Le as DuxTableLayout
+  Ge as DuxTableLayout
 };

package/dist/esm/components/list/card.js

@@ -1,7 +1,7 @@
-import { defineComponent as W, ref as R, computed as l, toRef as S, createVNode as s } from "vue";
+import { defineComponent as v, ref as W, computed as l, toRef as S, createVNode as g } from "vue";
 import { useElementSize as y, useWindowSize as z, watchDebounced as M } from "@vueuse/core";
-import { DuxListLayout as g } from "../layout/list.js";
-const L = /* @__PURE__ */ W({
+import { DuxListLayout as s } from "../layout/list.js";
+const j = /* @__PURE__ */ v({
   name: "DuxCardPage",
   props: {
     colWidth: {
@@ -15,20 +15,28 @@ const L = /* @__PURE__ */ W({
     maxRows: {
       type: Number,
       default: 10
+    },
+    sideLeftTitle: {
+      type: String,
+      default: ""
+    },
+    sideRightTitle: {
+      type: String,
+      default: ""
     }
   },
-  extends: g,
+  extends: s,
   slots: Object,
   setup(e, {
-    slots: a
+    slots: t
   }) {
-    const h = R(), {
+    const f = W(), {
       width: u
-    } = y(h), {
-      width: f
-    } = z(), w = l(() => e.colWidth || 320), r = (t = 0) => {
-      const i = t || f.value || 1024, o = e.colWidth || 320, c = e.rows || 4, b = e.maxRows || 10, d = 0.25 * 16 * 3, m = Math.max(1, Math.floor((i + d) / (o + d))), x = Math.floor((1920 + d) / (o + d)) * c, C = Math.ceil(x / m), v = Math.min(Math.max(C, c), b);
-      return m * v;
+    } = y(f), {
+      width: h
+    } = z(), p = l(() => e.colWidth || 320), r = (a = 0) => {
+      const o = a || h.value || 1024, i = e.colWidth || 320, d = e.rows || 4, b = e.maxRows || 10, c = 0.25 * 16 * 3, m = Math.max(1, Math.floor((o + c) / (i + c))), x = Math.floor((1920 + c) / (i + c)) * d, C = Math.ceil(x / m), R = Math.min(Math.max(C, d), b);
+      return m * R;
     }, n = S(e.pagination && typeof e.pagination == "object" ? e.pagination : {
       page: 1,
       pageSize: r()
@@ -36,43 +44,45 @@ const L = /* @__PURE__ */ W({
     M([u], () => {
       if (e.pagination && typeof e.pagination == "object")
         return;
-      const t = r(u.value);
-      t !== n.value.pageSize && (n.value.pageSize = t, n.value.page = 1);
+      const a = r(u.value);
+      a !== n.value.pageSize && (n.value.pageSize = a, n.value.page = 1);
     }, {
       debounce: 300
     });
-    const p = l(() => {
+    const w = l(() => {
       const {
-        maxRows: t,
-        rows: i,
-        colWidth: o,
-        ...c
+        maxRows: a,
+        rows: o,
+        colWidth: i,
+        ...d
       } = e;
       return {
-        ...c,
+        ...d,
         pagination: n.value
       };
     });
-    return () => s(g, p.value, {
-      default: (t) => s("div", {
+    return () => g(s, w.value, {
+      default: (a) => g("div", {
         class: "grid gap-3",
         style: {
-          "grid-template-columns": `repeat(auto-fit, minmax(${w.value}px, 1fr))`
+          "grid-template-columns": `repeat(auto-fit, minmax(${p.value}px, 1fr))`
         }
-      }, [t.list.value.map((i) => {
-        var o;
-        return (o = a == null ? void 0 : a.default) == null ? void 0 : o.call(a, {
-          item: i,
-          isChecked: t.isChecked,
-          toggleChecked: t.toggleChecked
+      }, [a.list.value.map((o) => {
+        var i;
+        return (i = t == null ? void 0 : t.default) == null ? void 0 : i.call(t, {
+          item: o,
+          isChecked: a.isChecked,
+          toggleChecked: a.toggleChecked
         });
       })]),
-      actions: a.actions,
-      tools: a.tools,
-      bottom: a.bottom
+      actions: t.actions,
+      tools: t.tools,
+      bottom: t.bottom,
+      sideLeft: t.sideLeft,
+      sideRight: t.sideRight
     });
   }
 });
 export {
-  L as DuxCardPage
+  j as DuxCardPage
 };

package/dist/esm/components/list/list.js

@@ -1,38 +1,49 @@
-import { defineComponent as p, computed as r, createVNode as a } from "vue";
-import { DuxListLayout as c } from "../layout/list.js";
-const f = /* @__PURE__ */ p({
+import { defineComponent as p, computed as r, createVNode as d } from "vue";
+import { DuxListLayout as a } from "../layout/list.js";
+const u = /* @__PURE__ */ p({
   name: "DuxListPage",
-  props: {},
-  extends: c,
+  props: {
+    sideLeftTitle: {
+      type: String,
+      default: ""
+    },
+    sideRightTitle: {
+      type: String,
+      default: ""
+    }
+  },
+  extends: a,
   slots: Object,
-  setup(i, {
+  setup(o, {
     slots: e
   }) {
-    const n = r(() => {
+    const c = r(() => {
       const {
         ...t
-      } = i;
+      } = o;
       return {
         ...t
       };
     });
-    return () => a(c, n.value, {
-      default: (t) => a("div", {
+    return () => d(a, c.value, {
+      default: (t) => d("div", {
         class: "flex flex-col gap-3"
-      }, [t.list.value.map((d) => {
-        var o;
-        return (o = e == null ? void 0 : e.default) == null ? void 0 : o.call(e, {
-          item: d,
+      }, [t.list.value.map((n) => {
+        var i;
+        return (i = e == null ? void 0 : e.default) == null ? void 0 : i.call(e, {
+          item: n,
           isChecked: t.isChecked,
           toggleChecked: t.toggleChecked
         });
       })]),
       actions: e.actions,
       tools: e.tools,
-      bottom: e.bottom
+      bottom: e.bottom,
+      sideLeft: e.sideLeft,
+      sideRight: e.sideRight
     });
   }
 });
 export {
-  f as DuxListPage
+  u as DuxListPage
 };