@duxweb/dvha-pro 1.0.18 → 1.0.20

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

@@ -1,17 +1,20 @@
-import { defineComponent as $, toRef as j, ref as D, computed as m, reactive as ee, watch as te, onMounted as ie, createVNode as e, h as U, mergeProps as ae } 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 f, NCheckbox as q, NTabs as ce, NTab as ue, NButton as d, NPopover as oe, NSpin as de, NProgress as pe, NPagination as me } from "naive-ui";
-import { useAction as fe } from "../../hooks/action.js";
+import { defineComponent as ie, toRef as U, ref as T, computed as m, reactive as S, watch as le, onMounted as ne, createVNode as e, h as O, mergeProps as re, isVNode as oe } from "vue";
+import { useI18n as ue, useExtendList as ce, useJsonSchema as E } from "@duxweb/dvha-core";
+import { useWindowSize as de } from "@vueuse/core";
+import { NTooltip as s, NCheckbox as q, NTabs as pe, NTab as me, NButton as d, NSpin as fe, NProgress as ge, NPagination as he, NModal as ve, NDrawer as I } from "naive-ui";
+import { useAction as se } from "../../hooks/action.js";
 import "@overlastic/vue";
 import "clsx";
 import "vue-echarts";
 import "vue-cropper";
+import be from "../modal/modalPage.js";
 import "jinrishici";
 import "lodash-es";
 import "vue-draggable-plus";
+import { DuxDrawerPage as M } from "../drawer/drawerPage.js";
 import "aieditor";
 import "vee-validate";
+import "vue-router";
 import "@vee-validate/i18n";
 import "colorizr";
 import "echarts";
@@ -21,21 +24,34 @@ import "@unocss/preset-typography";
 import "unocss/preset-wind4";
 import "@vee-validate/i18n/dist/locale/en.json";
 import "@vee-validate/i18n/dist/locale/zh_CN.json";
-import "vue-router";
 import "vue-command-palette";
 import "@duxweb/dvha-naiveui";
-import { DuxPage as ge } from "../../pages/page.js";
+import { DuxPage as xe } from "../../pages/page.js";
 import "../../pages/page404.js";
-import { DuxPageEmpty as ve } from "../../pages/pageEmpty.js";
+import { DuxPageEmpty as we } from "../../pages/pageEmpty.js";
 import "@iconify-json/tabler/icons.json";
-import { DuxTableFilter as he } from "./filter.js";
-import { DuxTableTools as be } from "./tools.js";
+import { DuxTableFilter as ye } from "./filter.js";
+import { DuxFilterLayout as Se } from "./filterLayout.js";
+import { DuxTableTools as ke } from "./tools.js";
 import "mime";
+import "vue3-ace-editor";
+import "ace-builds/src-noconflict/mode-vue";
+import "ace-builds/src-noconflict/mode-javascript";
+import "ace-builds/src-noconflict/mode-html";
+import "ace-builds/src-noconflict/mode-json";
+import "ace-builds/src-noconflict/mode-json5";
+import "ace-builds/src-noconflict/theme-tomorrow_night";
+import "ace-builds/src-noconflict/theme-tomorrow";
+import "ace-builds/src-noconflict/ext-searchbox";
+import "ace-builds/src-noconflict/ext-language_tools";
+import "ace-builds/src-noconflict/mode-snippets";
 import "dayjs";
-import { useDrawer as xe } from "../../hooks/drawer.js";
 import "@tanstack/vue-query";
 import "pinia";
-const it = /* @__PURE__ */ $({
+function Ce(i) {
+  return typeof i == "function" || Object.prototype.toString.call(i) === "[object Object]" && !oe(i);
+}
+const yt = /* @__PURE__ */ ie({
   name: "DuxListLayout",
   props: {
     rowKey: {
@@ -76,111 +92,116 @@ const it = /* @__PURE__ */ $({
     sideRightTitle: {
       type: String,
       default: ""
+    },
+    hookListProps: {
+      type: Object
     }
   },
   setup(i, {
     slots: t
   }) {
-    var P;
-    const I = j(i.filter || {}), {
+    var F;
+    const V = U(i.filter || {}), {
       t: r
-    } = ne(), {
-      renderAction: O
-    } = fe(), W = j(i.pagination && typeof i.pagination == "object" ? i.pagination : {
+    } = ue(), {
+      renderAction: W
+    } = se(), B = U(i.pagination && typeof i.pagination == "object" ? i.pagination : {
       page: 1,
       pageSize: 20
-    }), g = D({}), B = () => {
-      Object.assign(g.value, I.value);
-    }, a = le({
+    }), b = T({}), J = () => {
+      Object.assign(b.value, V.value);
+    }, l = ce({
       path: i.path,
-      filters: g.value,
-      pagination: W.value
+      filters: b.value,
+      pagination: B.value,
+      ...i.hookListProps
     }), {
-      meta: h,
-      list: y,
-      isLoading: s,
-      autoRefetch: V,
-      autoCountdown: w,
-      onAutoRefetch: J,
-      isExporting: b,
-      isExportingRows: M,
-      isImporting: S,
-      onExport: K,
-      onExportRows: Q,
-      onImport: G
-    } = a, H = m(() => ({
-      page: a.page.value,
-      pageSize: a.pageSize.value,
-      pageCount: a.pageCount.value,
-      pageSizes: a.pageSizes,
+      meta: w,
+      list: k,
+      isLoading: C,
+      autoRefetch: _,
+      autoCountdown: L,
+      onAutoRefetch: K,
+      isExporting: Q,
+      isExportingRows: G,
+      isImporting: z,
+      onExport: H,
+      onExportRows: X,
+      onImport: Y
+    } = l, Z = m(() => ({
+      page: l.page.value,
+      pageSize: l.pageSize.value,
+      pageCount: l.pageCount.value,
+      pageSizes: l.pageSizes,
       pageSlot: 5,
-      onUpdatePage: a.onUpdatePage,
-      onUpdatePageSize: a.onUpdatePageSize,
+      onUpdatePage: l.onUpdatePage,
+      onUpdatePageSize: l.onUpdatePageSize,
       showSizePicker: !0,
       showQuickJumper: !0
-    })), k = ee({
-      show: !1,
-      collapse: !1
-    }), v = D(((P = i.filterSchema) == null ? void 0 : P.length) || 0), {
+    })), g = S({
+      show: !1
+    }), h = S({
+      show: !1
+    }), v = S({
+      show: !1
+    }), x = T(((F = i.filterSchema) == null ? void 0 : F.length) || 0), {
       width: u
-    } = re(), C = () => {
+    } = de(), P = () => {
       var p;
       if (!((p = i.filterSchema) != null && p.length)) return 0;
-      const l = i.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);
+      const n = i.filterSchema.length;
+      if (n <= 3)
+        return n;
+      const c = u.value || 1024;
+      let o = 3;
+      return c >= 1280 ? o = 4 : c >= 1024 ? o = 3 : c >= 768 ? o = 2 : o = 1, Math.min(n, o);
     };
-    te(u, () => {
-      v.value = C();
-    }), ie(() => {
-      v.value = C();
+    le(u, () => {
+      x.value = P();
+    }), ne(() => {
+      x.value = P();
     });
-    const X = m(() => (i.filterSchema || []).slice(0, v.value)), z = m(() => (i.filterSchema || []).slice(v.value)), Y = m(() => z.value.length > 0), R = (l) => l.map((o) => {
+    const $ = m(() => (i.filterSchema || []).slice(0, x.value)), R = m(() => (i.filterSchema || []).slice(x.value)), ee = m(() => R.value.length > 0), A = (n) => n.map((c) => {
       const {
-        title: c,
+        title: o,
         ...p
-      } = o;
+      } = c;
       return {
-        tag: he,
+        tag: ye,
         attrs: {
-          label: c,
+          label: o,
           class: "flex-1 min-w-0"
         },
         children: p
       };
     }), {
-      render: Z
+      render: te
     } = E({
-      data: m(() => R(X.value))
+      data: m(() => A($.value))
     }), {
-      render: _
+      render: ae
     } = E({
-      data: m(() => R(z.value))
-    }), x = m(() => ({
-      import: !0,
+      data: m(() => A(R.value))
+    }), y = m(() => ({
+      import: !1,
       export: !0,
       refresh: !0,
       ...i.tools
-    })), {
-      show: A
-    } = xe();
-    return () => e(ge, {
+    }));
+    return () => e(xe, {
       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;
+        var n;
+        return t != null && t.sideLeft && u.value >= 1024 ? (n = t == null ? void 0 : t.sideLeft) == null ? void 0 : n.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;
+        var n;
+        return t != null && t.sideRight && u.value >= 1024 ? (n = t == null ? void 0 : t.sideRight) == null ? void 0 : n.call(t) : void 0;
       },
       default: () => {
-        var l, o, c, p, L, F, N;
+        var n, c, o, p, j, N, D;
         return e("div", {
           class: "flex flex-col h-full relative"
         }, [e("div", {
@@ -189,32 +210,32 @@ const it = /* @__PURE__ */ $({
           class: "flex flex-col lg:flex-row lg:items-center gap-2"
         }, [i.checkable && e("div", {
           class: "hidden lg:flex items-center pl-2"
-        }, [e(f, null, {
+        }, [e(s, null, {
           trigger: () => e("div", {
             class: "flex items-center"
           }, [e(q, {
-            checked: a.isAllChecked.value,
-            indeterminate: a.isIndeterminate.value,
-            onUpdateChecked: a.toggleSelectAll
+            checked: l.isAllChecked.value,
+            indeterminate: l.isIndeterminate.value,
+            onUpdateChecked: l.toggleSelectAll
           }, null)]),
           default: () => r("components.list.selectAll")
-        })]), i.tabs && e("div", null, [e(ce, {
+        })]), i.tabs && e("div", null, [e(pe, {
           type: "segment",
           size: "small",
           style: {
             "--n-tab-padding": "4px 10px"
           },
-          "default-value": (o = (l = i.tabs) == null ? void 0 : l[0]) == null ? void 0 : o.value,
-          value: (c = g.value) == null ? void 0 : c.tab,
-          onUpdateValue: (n) => {
-            g.value.tab = n;
+          "default-value": (c = (n = i.tabs) == null ? void 0 : n[0]) == null ? void 0 : c.value,
+          value: (o = b.value) == null ? void 0 : o.tab,
+          onUpdateValue: (a) => {
+            b.value.tab = a;
           }
         }, {
           default: () => {
-            var n;
-            return [(n = i.tabs) == null ? void 0 : n.map((T) => e(ue, {
-              name: T.value,
-              tab: T.label
+            var a;
+            return [(a = i.tabs) == null ? void 0 : a.map((f) => e(me, {
+              name: f.value,
+              tab: f.label
             }, null))];
           }
         })]), e("div", {
@@ -222,17 +243,8 @@ const it = /* @__PURE__ */ $({
         }, [(t == null ? void 0 : t.sideLeft) && u.value < 1024 && e(d, {
           class: "flex-none",
           secondary: !0,
-          loading: b.value,
           onClick: () => {
-            A({
-              title: i.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"
-            });
+            h.show = !h.show;
           }
         }, {
           icon: () => e("div", {
@@ -240,10 +252,10 @@ const it = /* @__PURE__ */ $({
           }, null)
         }), e("div", {
           class: "flex flex-wrap gap-2 items-center flex-1 lg:flex-none"
-        }, [U(Z)]), e(d, {
+        }, [O(te)]), e(d, {
           type: "primary",
           secondary: !0,
-          onClick: B
+          onClick: J
         }, {
           icon: () => e("div", {
             class: "i-tabler:search size-4"
@@ -252,80 +264,63 @@ const it = /* @__PURE__ */ $({
         }), (t == null ? void 0 : t.sideRight) && u.value < 1024 && e(d, {
           class: "flex-none",
           secondary: !0,
-          loading: b.value,
           onClick: () => {
-            A({
-              title: i.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"
-            });
+            v.show = !v.show;
           }
         }, {
           icon: () => e("div", {
             class: "i-tabler:layout-sidebar-right-inactive size-4"
           }, null)
-        }), Y.value && e(oe, {
-          trigger: "click",
-          displayDirective: "show"
+        }), ee.value && e(d, {
+          iconPlacement: "right",
+          onClick: () => {
+            g.show = !g.show;
+          }
         }, {
-          trigger: () => e(d, {
-            iconPlacement: "right",
-            onClick: () => {
-              k.collapse = !k.collapse;
-            }
-          }, {
-            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"
-          }, [U(_)])
+          default: () => r("components.button.advanced"),
+          icon: () => e("div", {
+            class: ["i-tabler:chevrons-down size-4 transition-all"]
+          }, null)
         })])]), e("div", {
           class: "flex gap-2"
-        }, [(p = t.actions) == null ? void 0 : p.call(t), ((L = i.actions) == null ? void 0 : L.length) > 0 && O({
+        }, [(p = t.actions) == null ? void 0 : p.call(t), ((j = i.actions) == null ? void 0 : j.length) > 0 && W({
           type: u.value < 1024 ? "dropdown" : "button",
           text: u.value < 1024,
           items: i.actions
-        })])]), e(de, {
-          show: s.value,
+        })])]), e(fe, {
+          show: C.value,
           class: "flex-1 min-h-0",
           contentClass: "h-full"
         }, {
           default: () => {
-            var n;
+            var a;
             return [e("div", {
               class: ["h-full overflow-auto rounded-lg px-3"]
-            }, [!s.value && y.value.length === 0 && e("div", {
+            }, [!C.value && k.value.length === 0 && e("div", {
               class: "flex justify-center items-center h-full"
-            }, [e(ve, null, null)]), y.value.length > 0 && ((n = t == null ? void 0 : t.default) == null ? void 0 : n.call(t, a))])];
+            }, [e(we, null, null)]), k.value.length > 0 && ((a = t == null ? void 0 : t.default) == null ? void 0 : a.call(t, l))])];
           }
         }), e("div", {
           class: "flex justify-between px-3 py-2 gap-2"
         }, [e("div", null, [e("div", {
           class: "flex gap-1 items-center"
-        }, [i.checkable && e(f, null, {
+        }, [i.checkable && e(s, null, {
           trigger: () => e(d, {
-            loading: S.value,
+            loading: z.value,
             circle: !0,
             quaternary: !0
           }, {
             default: () => [e(q, {
-              checked: a.isAllChecked.value,
-              indeterminate: a.isIndeterminate.value,
-              onUpdateChecked: a.toggleSelectAll
+              checked: l.isAllChecked.value,
+              indeterminate: l.isIndeterminate.value,
+              onUpdateChecked: l.toggleSelectAll
             }, null)]
           }),
           default: () => r("components.list.selectAll")
-        }), (F = t == null ? void 0 : t.tools) == null ? void 0 : F.call(t), x.value.export && e(f, null, {
+        }), (N = t == null ? void 0 : t.tools) == null ? void 0 : N.call(t), y.value.export && e(s, null, {
           trigger: () => e(d, {
-            loading: b.value,
-            onClick: K,
+            loading: Q.value,
+            onClick: H,
             circle: !0,
             quaternary: !0
           }, {
@@ -334,10 +329,10 @@ const it = /* @__PURE__ */ $({
             }, null)
           }),
           default: () => r("components.button.export")
-        }), x.value.import && e(f, null, {
+        }), y.value.import && e(s, null, {
           trigger: () => e(d, {
-            loading: S.value,
-            onClick: G,
+            loading: z.value,
+            onClick: Y,
             circle: !0,
             quaternary: !0
           }, {
@@ -346,22 +341,22 @@ const it = /* @__PURE__ */ $({
             }, null)
           }),
           default: () => r("components.button.import")
-        }), x.value.refresh && e(f, null, {
+        }), y.value.refresh && e(s, null, {
           trigger: () => e(d, {
-            onClick: J,
+            onClick: K,
             circle: !0,
             quaternary: !0
           }, {
-            icon: () => V.value ? e(pe, {
+            icon: () => _.value ? e(ge, {
               class: "size-4",
               type: "circle",
-              percentage: w.value * 10,
+              percentage: L.value * 10,
               strokeWidth: 20,
               color: "rgba(var(--ui-color-primary))"
             }, {
               default: () => [e("span", {
                 class: "text-8px"
-              }, [w.value])]
+              }, [L.value])]
             }) : e("div", {
               class: "i-tabler:refresh size-4"
             }, null)
@@ -369,38 +364,93 @@ const it = /* @__PURE__ */ $({
           default: () => r("components.button.autoRefresh")
         })])]), e("div", {
           class: "flex items-center gap-2"
-        }, [(N = t == null ? void 0 : t.bottom) == null ? void 0 : N.call(t), i.pagination && e(me, ae(H.value, {
+        }, [(D = t == null ? void 0 : t.bottom) == null ? void 0 : D.call(t), i.pagination && e(he, re(Z.value, {
           simple: u.value < 768
         }), {
           prefix: () => {
-            var n;
+            var a;
             return e("div", null, [r("components.list.total", {
-              total: ((n = h == null ? void 0 : h.value) == null ? void 0 : n.total) || 0
+              total: ((a = w == null ? void 0 : w.value) == null ? void 0 : a.total) || 0
             })]);
           }
-        })])]), e(be, {
-          number: a.checkeds.value.length,
+        })])]), e(ke, {
+          number: l.checkeds.value.length,
           group: [[{
             icon: "i-tabler:x",
             onClick: () => {
-              var n;
-              a.checkeds.value = [], (n = a.onUpdateChecked) == null || n.call(a, []);
+              var a;
+              l.checkeds.value = [], (a = l.onUpdateChecked) == null || a.call(l, []);
             }
           }], [{
             label: r("components.button.export"),
             icon: "i-tabler:file-export",
-            loading: M.value,
-            onClick: Q
+            loading: G.value,
+            onClick: X
           }, {
             label: r("components.button.delete"),
             type: "error",
             icon: "i-tabler:trash"
           }]]
-        }, null)]);
+        }, null), e(ve, {
+          draggable: !0,
+          class: "bg-white rounded dark:shadow-gray-950/80  dark:bg-gray-800/60 backdrop-blur",
+          show: g.show,
+          onUpdateShow: (a) => g.show = a
+        }, {
+          default: ({
+            draggableClass: a
+          }) => {
+            let f;
+            return e(be, {
+              title: r("components.button.filter"),
+              handle: a,
+              onClose: () => g.show = !1
+            }, {
+              default: () => [e(Se, {
+                showLabel: !0,
+                labelPlacement: "top"
+              }, Ce(f = O(ae)) ? f : {
+                default: () => [f]
+              })]
+            });
+          }
+        }), e(I, {
+          show: h.show,
+          onUpdateShow: (a) => h.show = a,
+          autoFocus: !1,
+          placement: "left"
+        }, {
+          default: () => [e(M, {
+            title: i.sideLeftTitle || r("components.button.sideLeft"),
+            onClose: () => h.show = !1,
+            scrollbar: !1
+          }, {
+            default: () => {
+              var a;
+              return [(a = t == null ? void 0 : t.sideLeft) == null ? void 0 : a.call(t)];
+            }
+          })]
+        }), e(I, {
+          show: v.show,
+          onUpdateShow: (a) => v.show = a,
+          autoFocus: !1,
+          placement: "right"
+        }, {
+          default: () => [e(M, {
+            title: i.sideRightTitle || r("components.button.sideRight"),
+            onClose: () => v.show = !1,
+            scrollbar: !1
+          }, {
+            default: () => {
+              var a;
+              return [(a = t == null ? void 0 : t.sideRight) == null ? void 0 : a.call(t)];
+            }
+          })]
+        })]);
       }
     });
   }
 });
 export {
-  it as DuxListLayout
+  yt as DuxListLayout
 };