@duxweb/dvha-pro 0.0.6 → 0.0.7

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

@@ -1,25 +1,30 @@
-import { defineComponent as _, toRef as R, ref as U, computed as s, reactive as $, watch as ee, onMounted as te, createVNode as e, h as D, mergeProps as ae } from "vue";
-import { useI18n as le, useExtendList as ie, useJsonSchema as E } from "@duxweb/dvha-core";
-import { useWindowSize as ne } from "@vueuse/core";
-import { NTooltip as f, NCheckbox as L, NTabs as re, NTab as oe, NButton as d, NPopover as ce, NSpin as ue, NProgress as se, NPagination as de } from "naive-ui";
-import { useAction as pe } from "../../hooks/action.js";
-import "@duxweb/dvha-naiveui";
-import "lodash-es";
+import { defineComponent as $, toRef as j, ref as D, computed as f, reactive as ee, watch as te, onMounted as ae, createVNode as e, h as U, mergeProps as ie } from "vue";
+import { useI18n as ne, useExtendList as le, useJsonSchema as E } from "@duxweb/dvha-core";
+import { useWindowSize as re } from "@vueuse/core";
+import { NTooltip as g, NCheckbox as q, NTabs as ce, NTab as ue, NButton as d, NPopover as oe, NSpin as de, NProgress as pe, NPagination as fe } 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 { DuxPage as fe } from "../../pages/page.js";
+import "@duxweb/dvha-naiveui";
+import { DuxPage as me } from "../../pages/page.js";
 import "../../pages/page404.js";
-import { DuxPageEmpty as me } from "../../pages/pageEmpty.js";
-import { DuxTableFilter as ge } from "./filter.js";
-import { DuxTableTools as ve } from "./tools.js";
+import { DuxPageEmpty as ve } from "../../pages/pageEmpty.js";
+import { DuxTableFilter as he } from "./filter.js";
+import { DuxTableTools as be } from "./tools.js";
+import { useDrawer as xe } from "../../hooks/drawer.js";
 import "pinia";
-const Ie = /* @__PURE__ */ _({
+const Ke = /* @__PURE__ */ $({
   name: "DuxListLayout",
   props: {
     rowKey: {
@@ -52,151 +57,207 @@ const Ie = /* @__PURE__ */ _({
     },
     checkable: {
       type: Boolean
+    },
+    sideLeftTitle: {
+      type: String,
+      default: ""
+    },
+    sideRightTitle: {
+      type: String,
+      default: ""
     }
   },
-  setup(t, {
-    slots: l
+  setup(a, {
+    slots: t
   }) {
-    var A;
-    const T = R(t.filter || {}), {
-      t: n
-    } = le(), {
-      renderAction: q
-    } = pe(), I = R(t.pagination && typeof t.pagination == "object" ? t.pagination : {
+    var P;
+    const I = j(a.filter || {}), {
+      t: r
+    } = ne(), {
+      renderAction: O
+    } = ge(), W = j(a.pagination && typeof a.pagination == "object" ? a.pagination : {
       page: 1,
       pageSize: 20
-    }), m = U({}), O = () => {
-      Object.assign(m.value, T.value);
-    }, a = ie({
-      path: t.path,
+    }), m = D({}), B = () => {
+      Object.assign(m.value, I.value);
+    }, i = le({
+      path: a.path,
       filters: m.value,
-      pagination: I.value
+      pagination: W.value
     }), {
-      meta: v,
-      list: b,
-      isLoading: x,
-      autoRefetch: W,
-      autoCountdown: y,
-      onAutoRefetch: B,
-      isExporting: V,
-      isExportingRows: J,
+      meta: h,
+      list: y,
+      isLoading: s,
+      autoRefetch: V,
+      autoCountdown: w,
+      onAutoRefetch: J,
+      isExporting: b,
+      isExportingRows: M,
       isImporting: S,
-      onExport: M,
-      onExportRows: K,
-      onImport: Q
-    } = a, G = s(() => ({
-      page: a.page.value,
-      pageSize: a.pageSize.value,
-      pageCount: a.pageCount.value,
-      pageSizes: a.pageSizes,
+      onExport: K,
+      onExportRows: Q,
+      onImport: G
+    } = i, H = f(() => ({
+      page: i.page.value,
+      pageSize: i.pageSize.value,
+      pageCount: i.pageCount.value,
+      pageSizes: i.pageSizes,
       pageSlot: 5,
-      onUpdatePage: a.onUpdatePage,
-      onUpdatePageSize: a.onUpdatePageSize,
+      onUpdatePage: i.onUpdatePage,
+      onUpdatePageSize: i.onUpdatePageSize,
       showSizePicker: !0,
       showQuickJumper: !0
-    })), k = $({
+    })), k = ee({
       show: !1,
       collapse: !1
-    }), g = U(((A = t.filterSchema) == null ? void 0 : A.length) || 0), {
-      width: p
-    } = ne(), w = () => {
-      var u;
-      if (!((u = t.filterSchema) != null && u.length)) return 0;
-      const o = t.filterSchema.length;
-      if (o <= 3)
-        return o;
-      const c = p.value || 1024;
-      let r = 3;
-      return c >= 1280 ? r = 4 : c >= 1024 ? r = 3 : c >= 768 ? r = 2 : r = 1, Math.min(o, r);
+    }), v = D(((P = a.filterSchema) == null ? void 0 : P.length) || 0), {
+      width: u
+    } = re(), C = () => {
+      var p;
+      if (!((p = a.filterSchema) != null && p.length)) return 0;
+      const l = a.filterSchema.length;
+      if (l <= 3)
+        return l;
+      const o = u.value || 1024;
+      let c = 3;
+      return o >= 1280 ? c = 4 : o >= 1024 ? c = 3 : o >= 768 ? c = 2 : c = 1, Math.min(l, c);
     };
-    ee(p, () => {
-      g.value = w();
-    }), te(() => {
-      g.value = w();
+    te(u, () => {
+      v.value = C();
+    }), ae(() => {
+      v.value = C();
     });
-    const H = s(() => (t.filterSchema || []).slice(0, g.value)), C = s(() => (t.filterSchema || []).slice(g.value)), X = s(() => C.value.length > 0), z = (o) => o.map((c) => {
+    const X = f(() => (a.filterSchema || []).slice(0, v.value)), z = f(() => (a.filterSchema || []).slice(v.value)), Y = f(() => z.value.length > 0), R = (l) => l.map((o) => {
       const {
-        title: r,
-        ...u
-      } = c;
+        title: c,
+        ...p
+      } = o;
       return {
-        tag: ge,
+        tag: he,
         attrs: {
-          label: r,
+          label: c,
           class: "flex-1 min-w-0"
         },
-        children: u
+        children: p
       };
     }), {
-      render: Y
+      render: Z
     } = E({
-      data: s(() => z(H.value))
+      data: f(() => R(X.value))
     }), {
-      render: Z
+      render: _
     } = E({
-      data: s(() => z(C.value))
-    }), h = s(() => ({
+      data: f(() => R(z.value))
+    }), x = f(() => ({
       import: !0,
       export: !0,
       refresh: !0,
-      ...t.tools
-    }));
-    return () => e(fe, {
+      ...a.tools
+    })), {
+      show: A
+    } = xe();
+    return () => e(me, {
       padding: !1,
       scrollbar: !1
     }, {
+      sideLeft: () => {
+        var l;
+        return t != null && t.sideLeft && u.value >= 1024 ? (l = t == null ? void 0 : t.sideLeft) == null ? void 0 : l.call(t) : void 0;
+      },
+      sideRight: () => {
+        var l;
+        return t != null && t.sideRight && u.value >= 1024 ? (l = t == null ? void 0 : t.sideRight) == null ? void 0 : l.call(t) : void 0;
+      },
       default: () => {
-        var o, c, r, u, P, F, N;
+        var l, o, c, p, L, F, N;
         return e("div", {
           class: "flex flex-col h-full relative"
         }, [e("div", {
           class: "lg:justify-between gap-2 p-3"
         }, [e("div", {
-          class: "flex flex-col lg:flex-row items-center gap-2"
-        }, [t.checkable && e("div", {
+          class: "flex flex-col lg:flex-row lg:items-center gap-2"
+        }, [a.checkable && e("div", {
           class: "hidden lg:flex items-center pl-2"
-        }, [e(f, null, {
+        }, [e(g, null, {
           trigger: () => e("div", {
             class: "flex items-center"
-          }, [e(L, {
-            checked: a.isAllChecked.value,
-            indeterminate: a.isIndeterminate.value,
-            onUpdateChecked: a.toggleSelectAll
+          }, [e(q, {
+            checked: i.isAllChecked.value,
+            indeterminate: i.isIndeterminate.value,
+            onUpdateChecked: i.toggleSelectAll
           }, null)]),
-          default: () => n("components.list.selectAll")
-        })]), t.tabs && e("div", null, [e(re, {
+          default: () => r("components.list.selectAll")
+        })]), a.tabs && e("div", null, [e(ce, {
           type: "segment",
           size: "small",
           style: {
             "--n-tab-padding": "4px 10px"
           },
-          "default-value": (c = (o = t.tabs) == null ? void 0 : o[0]) == null ? void 0 : c.value,
-          value: (r = m.value) == null ? void 0 : r.tab,
-          onUpdateValue: (i) => {
-            m.value.tab = i;
+          "default-value": (o = (l = a.tabs) == null ? void 0 : l[0]) == null ? void 0 : o.value,
+          value: (c = m.value) == null ? void 0 : c.tab,
+          onUpdateValue: (n) => {
+            m.value.tab = n;
           }
         }, {
           default: () => {
-            var i;
-            return [(i = t.tabs) == null ? void 0 : i.map((j) => e(oe, {
-              name: j.value,
-              tab: j.label
+            var n;
+            return [(n = a.tabs) == null ? void 0 : n.map((T) => e(ue, {
+              name: T.value,
+              tab: T.label
             }, null))];
           }
         })]), e("div", {
           class: "flex gap-2"
-        }, [e("div", {
+        }, [(t == null ? void 0 : t.sideLeft) && u.value < 1024 && e(d, {
+          class: "flex-none",
+          secondary: !0,
+          loading: b.value,
+          onClick: () => {
+            A({
+              title: a.sideLeftTitle,
+              component: () => {
+                var n;
+                return e("div", null, [(n = t == null ? void 0 : t.sideLeft) == null ? void 0 : n.call(t)]);
+              },
+              width: 300,
+              placement: "left"
+            });
+          }
+        }, {
+          icon: () => e("div", {
+            class: "i-tabler:layout-sidebar-inactive size-4"
+          }, null)
+        }), e("div", {
           class: "flex flex-wrap gap-2 items-center flex-1 lg:flex-none"
-        }, [D(Y)]), e(d, {
+        }, [U(Z)]), e(d, {
           type: "primary",
           secondary: !0,
-          onClick: O
+          onClick: B
         }, {
           icon: () => e("div", {
             class: "i-tabler:search size-4"
           }, null),
-          default: () => n("components.button.search")
-        }), X.value && e(ce, {
+          default: () => r("components.button.search")
+        }), (t == null ? void 0 : t.sideRight) && u.value < 1024 && e(d, {
+          class: "flex-none",
+          secondary: !0,
+          loading: b.value,
+          onClick: () => {
+            A({
+              title: a.sideRightTitle,
+              component: () => {
+                var n;
+                return e("div", null, [(n = t == null ? void 0 : t.sideRight) == null ? void 0 : n.call(t)]);
+              },
+              width: 300,
+              placement: "right"
+            });
+          }
+        }, {
+          icon: () => e("div", {
+            class: "i-tabler:layout-sidebar-right-inactive size-4"
+          }, null)
+        }), Y.value && e(oe, {
           trigger: "click",
           displayDirective: "show"
         }, {
@@ -206,54 +267,54 @@ const Ie = /* @__PURE__ */ _({
               k.collapse = !k.collapse;
             }
           }, {
-            default: () => n("components.button.advanced"),
+            default: () => r("components.button.advanced"),
             icon: () => e("div", {
               class: ["i-tabler:chevrons-down size-4 transition-all"]
             }, null)
           }),
           default: () => e("div", {
             class: "flex flex-col gap-2 py-1"
-          }, [D(Z)])
+          }, [U(_)])
         })])]), e("div", {
           class: "flex gap-2"
-        }, [(u = l.actions) == null ? void 0 : u.call(l), ((P = t.actions) == null ? void 0 : P.length) > 0 && q({
-          type: p.value < 1024 ? "dropdown" : "button",
-          text: p.value < 1024,
-          items: t.actions
-        })])]), e(ue, {
-          show: x.value,
+        }, [(p = t.actions) == null ? void 0 : p.call(t), ((L = a.actions) == null ? void 0 : L.length) > 0 && O({
+          type: u.value < 1024 ? "dropdown" : "button",
+          text: u.value < 1024,
+          items: a.actions
+        })])]), e(de, {
+          show: s.value,
           class: "flex-1 min-h-0",
           contentClass: "h-full"
         }, {
           default: () => {
-            var i;
+            var n;
             return [e("div", {
               class: ["h-full overflow-auto rounded-lg px-3"]
-            }, [!x.value && b.value.length === 0 && e("div", {
+            }, [!s.value && y.value.length === 0 && e("div", {
               class: "flex justify-center items-center h-full"
-            }, [e(me, null, null)]), b.value.length > 0 && ((i = l == null ? void 0 : l.default) == null ? void 0 : i.call(l, a))])];
+            }, [e(ve, null, null)]), y.value.length > 0 && ((n = t == null ? void 0 : t.default) == null ? void 0 : n.call(t, i))])];
           }
         }), e("div", {
           class: "flex justify-between px-3 py-2 gap-2"
         }, [e("div", null, [e("div", {
           class: "flex gap-1 items-center"
-        }, [t.checkable && e(f, null, {
+        }, [a.checkable && e(g, null, {
           trigger: () => e(d, {
             loading: S.value,
             circle: !0,
             quaternary: !0
           }, {
-            default: () => [e(L, {
-              checked: a.isAllChecked.value,
-              indeterminate: a.isIndeterminate.value,
-              onUpdateChecked: a.toggleSelectAll
+            default: () => [e(q, {
+              checked: i.isAllChecked.value,
+              indeterminate: i.isIndeterminate.value,
+              onUpdateChecked: i.toggleSelectAll
             }, null)]
           }),
-          default: () => n("components.list.selectAll")
-        }), (F = l == null ? void 0 : l.tools) == null ? void 0 : F.call(l), h.value.export && e(f, null, {
+          default: () => r("components.list.selectAll")
+        }), (F = t == null ? void 0 : t.tools) == null ? void 0 : F.call(t), x.value.export && e(g, null, {
           trigger: () => e(d, {
-            loading: V.value,
-            onClick: M,
+            loading: b.value,
+            onClick: K,
             circle: !0,
             quaternary: !0
           }, {
@@ -261,11 +322,11 @@ const Ie = /* @__PURE__ */ _({
               class: "i-tabler:database-export size-4"
             }, null)
           }),
-          default: () => n("components.button.export")
-        }), h.value.import && e(f, null, {
+          default: () => r("components.button.export")
+        }), x.value.import && e(g, null, {
           trigger: () => e(d, {
             loading: S.value,
-            onClick: Q,
+            onClick: G,
             circle: !0,
             quaternary: !0
           }, {
@@ -273,54 +334,54 @@ const Ie = /* @__PURE__ */ _({
               class: "i-tabler:database-import size-4"
             }, null)
           }),
-          default: () => n("components.button.import")
-        }), h.value.refresh && e(f, null, {
+          default: () => r("components.button.import")
+        }), x.value.refresh && e(g, null, {
           trigger: () => e(d, {
-            onClick: B,
+            onClick: J,
             circle: !0,
             quaternary: !0
           }, {
-            icon: () => W.value ? e(se, {
+            icon: () => V.value ? e(pe, {
               class: "size-4",
               type: "circle",
-              percentage: y.value * 10,
+              percentage: w.value * 10,
               strokeWidth: 20,
               color: "rgba(var(--ui-color-primary))"
             }, {
               default: () => [e("span", {
                 class: "text-8px"
-              }, [y.value])]
+              }, [w.value])]
             }) : e("div", {
               class: "i-tabler:refresh size-4"
             }, null)
           }),
-          default: () => n("components.button.autoRefresh")
+          default: () => r("components.button.autoRefresh")
         })])]), e("div", {
           class: "flex items-center gap-2"
-        }, [(N = l == null ? void 0 : l.bottom) == null ? void 0 : N.call(l), t.pagination && e(de, ae(G.value, {
-          simple: p.value < 768
+        }, [(N = t == null ? void 0 : t.bottom) == null ? void 0 : N.call(t), a.pagination && e(fe, ie(H.value, {
+          simple: u.value < 768
         }), {
           prefix: () => {
-            var i;
-            return e("div", null, [n("components.list.total", {
-              total: ((i = v == null ? void 0 : v.value) == null ? void 0 : i.total) || 0
+            var n;
+            return e("div", null, [r("components.list.total", {
+              total: ((n = h == null ? void 0 : h.value) == null ? void 0 : n.total) || 0
             })]);
           }
-        })])]), e(ve, {
-          number: a.checkeds.value.length,
+        })])]), e(be, {
+          number: i.checkeds.value.length,
           group: [[{
             icon: "i-tabler:x",
             onClick: () => {
-              var i;
-              a.checkeds.value = [], (i = a.onUpdateChecked) == null || i.call(a, []);
+              var n;
+              i.checkeds.value = [], (n = i.onUpdateChecked) == null || n.call(i, []);
             }
           }], [{
-            label: n("components.button.export"),
+            label: r("components.button.export"),
             icon: "i-tabler:file-export",
-            loading: J.value,
-            onClick: K
+            loading: M.value,
+            onClick: Q
           }, {
-            label: n("components.button.delete"),
+            label: r("components.button.delete"),
             type: "error",
             icon: "i-tabler:trash"
           }]]
@@ -330,5 +391,5 @@ const Ie = /* @__PURE__ */ _({
   }
 });
 export {
-  Ie as DuxListLayout
+  Ke as DuxListLayout
 };