@duxweb/dvha-pro 1.1.1 → 1.1.3

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

@@ -1,8 +1,8 @@
-import { defineComponent as Z, toRef as z, ref as P, computed as c, reactive as b, watch as $, onMounted as ee, createVNode as e, h as R, mergeProps as te, isVNode as le } from "vue";
-import { useI18n as ie, useExtendList as ae, useJsonSchema as A } from "@duxweb/dvha-core";
-import { useWindowSize as oe } from "@vueuse/core";
-import { NTooltip as f, NCheckbox as F, NTabs as re, NTab as ne, NButton as s, NSpin as se, NProgress as ue, NPagination as ce, NModal as de, NDrawer as j } from "naive-ui";
-import { useAction as pe } from "../../hooks/action.js";
+import { defineComponent as Q, toRef as z, reactive as x, computed as m, ref as w, watch as L, nextTick as v, onMounted as G, createVNode as e, h as H, mergeProps as X } from "vue";
+import { useI18n as Y, useExtendList as Z, useJsonSchema as _ } from "@duxweb/dvha-core";
+import { useWindowSize as $ } from "@vueuse/core";
+import { NTabs as ee, NTab as te, NButton as u, NSpin as ae, NTooltip as g, NCheckbox as ie, NProgress as le, NPagination as oe, NDrawer as R } from "naive-ui";
+import { useAction as re } from "../../hooks/action.js";
 import "@overlastic/vue";
 import "clsx";
 import "vue-echarts";
@@ -18,12 +18,10 @@ import "ace-builds/src-noconflict/ext-searchbox";
 import "ace-builds/src-noconflict/ext-language_tools";
 import "ace-builds/src-noconflict/mode-snippets";
 import "vue-cropper";
-import me from "../modal/modalPage.js";
 import "jinrishici";
 import "lodash-es";
 import "vue-draggable-plus";
-import { DuxTableFilter as fe } from "./filter.js";
-import { DuxFilterLayout as he } from "./filterLayout.js";
+import { DuxTableFilter as ne } from "./filter.js";
 import "@vee-validate/i18n";
 import "colorizr";
 import "echarts";
@@ -51,11 +49,11 @@ import "vee-validate";
 import "vue-router";
 import "vue-command-palette";
 import "@duxweb/dvha-naiveui";
-import { DuxPage as ge } from "../../pages/page.js";
+import { DuxPage as se } from "../../pages/page.js";
 import "../../pages/page404.js";
-import { DuxPageEmpty as ve } from "../../pages/pageEmpty.js";
-import { DuxDrawerPage as N } from "../drawer/drawerPage.js";
-import { DuxTableTools as be } from "./tools.js";
+import { DuxPageEmpty as ue } from "../../pages/pageEmpty.js";
+import { DuxDrawerPage as j } from "../drawer/drawerPage.js";
+import { DuxTableTools as ce } from "./tools.js";
 import "short-unique-id";
 import "aieditor";
 import "@vue-flow/core";
@@ -68,10 +66,7 @@ import "fabric";
 import "dayjs";
 import "@tanstack/vue-query";
 import "pinia";
-function xe(t) {
-  return typeof t == "function" || Object.prototype.toString.call(t) === "[object Object]" && !le(t);
-}
-const Ot = /* @__PURE__ */ Z({
+const Pt = /* @__PURE__ */ Q({
   name: "DuxListLayout",
   props: {
     rowKey: {
@@ -120,140 +115,143 @@ const Ot = /* @__PURE__ */ Z({
       type: Object
     }
   },
-  setup(t, {
+  setup(a, {
     slots: o,
-    expose: D
+    expose: O
   }) {
-    const U = z(t.filter || {}), {
-      t: a
-    } = ie(), {
-      renderAction: T
-    } = pe(), O = z(t.pagination && typeof t.pagination == "object" ? t.pagination : {
+    const n = z(a, "filter", {}), {
+      t: r
+    } = Y(), {
+      renderAction: N
+    } = re(), T = z(a.pagination && typeof a.pagination == "object" ? a.pagination : {
       page: 1,
       pageSize: 20
-    }), h = P({}), B = () => {
-      Object.assign(h.value, U.value);
-    }, l = ae({
-      path: t.path,
-      filters: h.value,
-      pagination: O.value,
-      ...t.hookListProps
+    }), s = x({
+      ...n.value || {}
+    }), i = Z({
+      path: a.path,
+      filters: s,
+      pagination: T.value,
+      ...a.hookListProps
     });
-    D(l);
+    O(i);
     const {
-      meta: E,
-      list: x,
-      isLoading: w,
-      autoRefetch: q,
-      autoCountdown: y,
-      onAutoRefetch: I,
-      isExporting: M,
-      isExportingRows: V,
-      isImporting: S,
-      onExport: W,
-      onExportRows: J,
-      onImport: _
-    } = l, K = c(() => ({
-      page: l.page.value,
-      pageSize: l.pageSize.value,
-      pageCount: l.pageCount.value,
-      pageSizes: l.pageSizes,
+      meta: U,
+      list: k,
+      isLoading: S,
+      autoRefetch: A,
+      autoCountdown: C,
+      onAutoRefetch: B,
+      isExporting: E,
+      isExportingRows: D,
+      isImporting: J,
+      onExport: q,
+      onExportRows: F,
+      onImport: I
+    } = i, W = m(() => ({
+      page: i.page.value,
+      pageSize: i.pageSize.value,
+      pageCount: i.pageCount.value,
+      pageSizes: i.pageSizes,
       pageSlot: 5,
-      onUpdatePage: l.onUpdatePage,
-      onUpdatePageSize: l.onUpdatePageSize,
+      onUpdatePage: i.onUpdatePage,
+      onUpdatePageSize: i.onUpdatePageSize,
       showSizePicker: !0,
       showQuickJumper: !0
-    })), d = b({
+    })), p = x({
       show: !1
-    }), p = b({
+    }), d = x({
       show: !1
-    }), m = b({
-      show: !1
-    }), g = P(t.filterSchema?.length || 0), {
-      width: r
-    } = oe(), k = () => {
-      if (!t.filterSchema?.length) return 0;
-      const i = t.filterSchema.length;
-      if (i <= 3)
-        return i;
-      const n = r.value || 1024;
-      let u = 3;
-      return n >= 1280 ? u = 4 : n >= 1024 ? u = 3 : n >= 768 ? u = 2 : u = 1, Math.min(i, u);
-    };
-    $(r, () => {
-      g.value = k();
-    }), ee(() => {
-      g.value = k();
-    });
-    const Q = c(() => (t.filterSchema || []).slice(0, g.value)), C = c(() => (t.filterSchema || []).slice(g.value)), G = c(() => C.value.length > 0), L = (i) => i.map((n) => {
+    }), {
+      width: c
+    } = $(), K = m(() => (a.filterSchema || []).map((t) => {
       const {
-        title: u,
-        ...Y
-      } = n;
+        label: l,
+        ...y
+      } = t;
       return {
-        tag: fe,
+        tag: ne,
         attrs: {
-          label: u,
-          class: "flex-1 min-w-0"
+          label: l
         },
-        children: Y
+        children: y
       };
-    }), {
-      render: H
-    } = A({
-      data: c(() => L(Q.value))
-    }), {
-      render: X
-    } = A({
-      data: c(() => L(C.value))
-    }), v = c(() => ({
+    })), {
+      render: V
+    } = _({
+      data: m(() => K.value)
+    }), P = w(0), h = m(() => ({
       import: !1,
       export: !0,
       refresh: !0,
-      ...t.tools
-    }));
-    return () => e(ge, {
-      padding: !1,
+      ...a.tools
+    })), f = w(null), M = m(() => {
+      const t = a.tabs?.map((y) => y.value) || [], l = n.value?.tab;
+      return t.includes(l) ? l : t[0];
+    });
+    L(() => a.tabs?.map((t) => t.value), () => {
+      const t = a.tabs?.map((l) => l.value) || [];
+      if (n.value?.tab === void 0) {
+        const l = t[0];
+        l !== void 0 && (n.value.tab = l);
+      }
+      v(() => f.value?.syncBarPosition());
+    }, {
+      deep: !0
+    }), L(() => c.value, () => {
+      v(() => f.value?.syncBarPosition());
+    }), G(() => {
+      v(() => f.value?.syncBarPosition());
+    });
+    const b = w(!1);
+    return () => e(se, {
+      actions: a.actions,
       scrollbar: !1
     }, {
-      sideLeft: () => o?.sideLeft && r.value >= 1024 ? o?.sideLeft?.() : void 0,
-      sideRight: () => o?.sideRight && r.value >= 1024 ? o?.sideRight?.() : void 0,
+      sideLeft: () => o?.sideLeft && c.value >= 1024 ? o?.sideLeft?.() : void 0,
+      sideRight: () => o?.sideRight && c.value >= 1024 ? o?.sideRight?.() : void 0,
       default: () => e("div", {
-        class: "flex flex-col h-full relative"
+        class: "flex flex-col gap-3 h-full relative"
       }, [e("div", {
-        class: "lg:justify-between gap-2 p-3"
+        class: "flex gap-2 justify-between flex-row border-b border-muted"
       }, [e("div", {
-        class: "flex flex-col lg:flex-row lg:items-center gap-2"
-      }, [t.checkable && e("div", {
-        class: "hidden lg:flex items-center pl-2"
-      }, [e(f, null, {
-        trigger: () => e("div", {
-          class: "flex items-center"
-        }, [e(F, {
-          checked: l.isAllChecked.value,
-          indeterminate: l.isIndeterminate.value,
-          onUpdateChecked: l.toggleSelectAll
-        }, null)]),
-        default: () => a("components.list.selectAll")
-      })]), t.tabs && e("div", null, [e(re, {
-        type: "segment",
+        class: "relative top-1.5px"
+      }, [a.tabs && e(ee, {
+        ref: f,
+        type: "bar",
         size: "small",
         style: {
-          "--n-tab-padding": "4px 10px"
+          "--n-tab-padding": "5px 20px 15px 20px",
+          "--n-tab-gap": "20px"
         },
-        "default-value": t.tabs?.[0]?.value,
-        value: h.value?.tab,
-        onUpdateValue: (i) => {
-          h.value.tab = i;
+        "default-value": a.tabs?.[0]?.value || "",
+        value: M.value,
+        onUpdateValue: (t) => {
+          n.value.tab = t, v(() => f.value?.syncBarPosition());
         }
       }, {
-        default: () => [t.tabs?.map((i) => e(ne, {
-          name: i.value,
-          tab: i.label
+        default: () => [a.tabs?.map((t) => e(te, {
+          name: t.value,
+          tab: t.label
         }, null))]
       })]), e("div", {
-        class: "flex gap-2"
-      }, [o?.sideLeft && r.value < 1024 && e(s, {
+        class: "flex gap-2 justify-end"
+      }, [o.actions?.(), a.actions?.length > 0 && N({
+        type: c.value < 1024 ? "dropdown" : "button",
+        text: c.value < 1024,
+        items: a.actions
+      })])]), e("div", {
+        class: "flex gap-2 justify-between flex-col-reverse lg:flex-row"
+      }, [(c.value >= 1024 || b.value) && e("div", {
+        class: ["flex-1 flex flex-col lg:flex-row gap-2 flex-wrap"]
+      }, [e("div", {
+        key: P.value,
+        class: "contents"
+      }, [H(V)])]), e("div", {
+        class: "flex justify-between gap-2"
+      }, [e("div", {
+        class: ["flex-1 flex gap-2"]
+      }, [o?.sideLeft && c.value < 1024 && e(u, {
         class: "flex-none",
         secondary: !0,
         onClick: () => {
@@ -263,188 +261,190 @@ const Ot = /* @__PURE__ */ Z({
         icon: () => e("div", {
           class: "i-tabler:layout-sidebar-inactive size-4"
         }, null)
+      }), o?.sideRight && c.value < 1024 && e(u, {
+        class: "flex-none",
+        secondary: !0,
+        onClick: () => {
+          d.show = !d.show;
+        }
+      }, {
+        icon: () => e("div", {
+          class: "i-tabler:layout-sidebar-right-inactive size-4"
+        }, null)
       }), e("div", {
-        class: "flex flex-wrap gap-2 items-center flex-1 lg:flex-none"
-      }, [R(H)]), e(s, {
+        class: "flex-none lg:hidden"
+      }, [e(u, {
+        secondary: !0,
+        onClick: () => {
+          b.value = !b.value;
+        }
+      }, {
+        icon: () => e("div", {
+          class: "i-tabler:filter size-4"
+        }, null)
+      })])]), e("div", {
+        class: ["flex gap-2 items-center", "flex-row"]
+      }, [e("div", {
+        class: "flex lg:hidden"
+      }, [e(u, {
         type: "primary",
         secondary: !0,
-        onClick: B
+        onClick: () => {
+          Object.keys(s).forEach((t) => delete s[t]), Object.assign(s, JSON.parse(JSON.stringify(n.value || {}))), i.onUpdatePage?.(1);
+        }
       }, {
         icon: () => e("div", {
           class: "i-tabler:search size-4"
-        }, null),
-        default: () => a("components.button.search")
-      }), o?.sideRight && r.value < 1024 && e(s, {
-        class: "flex-none",
+        }, null)
+      })]), e("div", {
+        class: ["hidden lg:flex gap-2"]
+      }, [e(u, {
+        type: "primary",
         secondary: !0,
         onClick: () => {
-          m.show = !m.show;
+          Object.keys(s).forEach((t) => delete s[t]), Object.assign(s, JSON.parse(JSON.stringify(n.value || {}))), i.onUpdatePage?.(1);
         }
       }, {
         icon: () => e("div", {
-          class: "i-tabler:layout-sidebar-right-inactive size-4"
-        }, null)
-      }), G.value && e(s, {
-        iconPlacement: "right",
+          class: "i-tabler:search size-4"
+        }, null),
+        default: () => r("components.button.search")
+      }), e(u, {
+        secondary: !0,
         onClick: () => {
-          d.show = !d.show;
+          const t = n.value.tab;
+          Object.keys(n.value || {}).forEach((l) => {
+            l !== "tab" && delete n.value[l];
+          }), Object.keys(s).forEach((l) => {
+            delete s[l];
+          }), t !== void 0 && (s.tab = t), i.onUpdatePage?.(1), P.value++;
         }
       }, {
-        default: () => a("components.button.advanced"),
         icon: () => e("div", {
-          class: ["i-tabler:chevrons-down size-4 transition-all"]
-        }, null)
-      })])]), e("div", {
-        class: "flex gap-2"
-      }, [o.actions?.(), t.actions?.length > 0 && T({
-        type: r.value < 1024 ? "dropdown" : "button",
-        text: r.value < 1024,
-        items: t.actions
-      })])]), e(se, {
-        show: w.value,
+          class: "i-tabler:arrow-back-up size-4"
+        }, null),
+        default: () => r("components.button.reset")
+      })])])])]), e(ae, {
+        show: S.value,
         class: "flex-1 min-h-0",
         contentClass: "h-full"
       }, {
         default: () => [e("div", {
-          class: ["h-full overflow-auto rounded-lg px-3"]
-        }, [!w.value && x.value.length === 0 && e("div", {
+          class: ["h-full overflow-auto"]
+        }, [!S.value && k.value.length === 0 && e("div", {
           class: "flex justify-center items-center h-full"
-        }, [e(ve, null, null)]), x.value.length > 0 && o?.default?.(l)])]
+        }, [e(ue, null, null)]), k.value.length > 0 && o?.default?.(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, {
-        trigger: () => e(s, {
-          loading: S.value,
+        class: "flex justify-between"
+      }, [e("div", {
+        class: "flex items-center gap-0.5"
+      }, [a.checkable && e(g, null, {
+        trigger: () => e(u, {
           circle: !0,
           quaternary: !0
         }, {
-          default: () => [e(F, {
-            checked: l.isAllChecked.value,
-            indeterminate: l.isIndeterminate.value,
-            onUpdateChecked: l.toggleSelectAll
+          default: () => [e(ie, {
+            checked: i.isAllChecked.value,
+            indeterminate: i.isIndeterminate.value,
+            onUpdateChecked: i.toggleSelectAll
           }, null)]
         }),
-        default: () => a("components.list.selectAll")
-      }), o?.tools?.(), v.value.export && e(f, null, {
-        trigger: () => e(s, {
-          loading: M.value,
-          onClick: W,
+        default: () => r("components.list.selectAll")
+      }), o?.bottom?.(), o?.tools?.(), h.value.export && e(g, null, {
+        trigger: () => e(u, {
+          quaternary: !0,
           circle: !0,
-          quaternary: !0
+          loading: E.value,
+          onClick: q
         }, {
           icon: () => e("div", {
             class: "i-tabler:database-export size-4"
           }, null)
         }),
-        default: () => a("components.button.export")
-      }), v.value.import && e(f, null, {
-        trigger: () => e(s, {
-          loading: S.value,
-          onClick: _,
+        default: () => r("components.button.export")
+      }), h.value.import && e(g, null, {
+        trigger: () => e(u, {
+          quaternary: !0,
           circle: !0,
-          quaternary: !0
+          loading: J.value,
+          onClick: I
         }, {
           icon: () => e("div", {
             class: "i-tabler:database-import size-4"
           }, null)
         }),
-        default: () => a("components.button.import")
-      }), v.value.refresh && e(f, null, {
-        trigger: () => e(s, {
-          onClick: I,
+        default: () => r("components.button.import")
+      }), h.value.refresh && e(g, null, {
+        trigger: () => e(u, {
+          quaternary: !0,
           circle: !0,
-          quaternary: !0
+          onClick: B
         }, {
-          icon: () => q.value ? e(ue, {
+          icon: () => A.value ? e(le, {
             class: "size-4",
             type: "circle",
-            percentage: y.value * 10,
+            percentage: C.value * 10,
             strokeWidth: 20,
             color: "rgba(var(--ui-color-primary))"
           }, {
             default: () => [e("span", {
               class: "text-8px"
-            }, [y.value])]
+            }, [C.value])]
           }) : e("div", {
             class: "i-tabler:refresh size-4"
           }, null)
         }),
-        default: () => a("components.button.autoRefresh")
-      })])]), e("div", {
+        default: () => r("components.button.autoRefresh")
+      })]), e("div", {
         class: "flex items-center gap-2"
-      }, [o?.bottom?.(), t.pagination && e(ce, te(K.value, {
-        simple: r.value < 768
+      }, [a.pagination && e(oe, X(W.value, {
+        simple: c.value < 768
       }), {
-        prefix: () => e("div", null, [a("components.list.total", {
-          total: E?.value?.total || 0
+        prefix: () => e("div", null, [r("components.list.total", {
+          total: U?.value?.total || 0
         })])
-      })])]), e(be, {
-        isLoading: l.isBatching.value,
-        onBatch: l.onBatch,
-        selecteds: l.checkeds.value,
-        number: l.checkeds.value.length,
+      })])]), e(ce, {
+        isLoading: i.isBatching.value,
+        onBatch: i.onBatch,
+        selecteds: i.checkeds.value,
+        number: i.checkeds.value.length,
         group: [[{
           icon: "i-tabler:x",
           onClick: () => {
-            l.checkeds.value = [], l.onUpdateChecked?.([]);
+            i.checkeds.value = [], i.onUpdateChecked?.([]);
           }
         }], [{
-          label: a("components.button.export"),
+          label: r("components.button.export"),
           icon: "i-tabler:file-export",
-          loading: V.value,
-          onClick: J
+          loading: D.value,
+          onClick: F
         }, {
-          label: a("components.button.delete"),
+          label: r("components.button.delete"),
           type: "error",
           icon: "i-tabler:trash"
         }]]
-      }, null), e(de, {
-        draggable: !0,
-        class: "bg-white rounded dark:shadow-gray-950/80  dark:bg-gray-800/60 backdrop-blur",
-        show: d.show,
-        onUpdateShow: (i) => d.show = i
-      }, {
-        default: ({
-          draggableClass: i
-        }) => {
-          let n;
-          return e(me, {
-            title: a("components.button.filter"),
-            handle: i,
-            onClose: () => d.show = !1
-          }, {
-            default: () => [e(he, {
-              showLabel: !0,
-              labelPlacement: "top"
-            }, xe(n = R(X)) ? n : {
-              default: () => [n]
-            })]
-          });
-        }
-      }), e(j, {
+      }, null), e(R, {
         show: p.show,
-        onUpdateShow: (i) => p.show = i,
+        onUpdateShow: (t) => p.show = t,
         autoFocus: !1,
         placement: "left"
       }, {
-        default: () => [e(N, {
-          title: t.sideLeftTitle || a("components.button.sideLeft"),
+        default: () => [e(j, {
+          title: a.sideLeftTitle || r("components.button.sideLeft"),
           onClose: () => p.show = !1,
           scrollbar: !1
         }, {
           default: () => [o?.sideLeft?.()]
         })]
-      }), e(j, {
-        show: m.show,
-        onUpdateShow: (i) => m.show = i,
+      }), e(R, {
+        show: d.show,
+        onUpdateShow: (t) => d.show = t,
         autoFocus: !1,
         placement: "right"
       }, {
-        default: () => [e(N, {
-          title: t.sideRightTitle || a("components.button.sideRight"),
-          onClose: () => m.show = !1,
+        default: () => [e(j, {
+          title: a.sideRightTitle || r("components.button.sideRight"),
+          onClose: () => d.show = !1,
           scrollbar: !1
         }, {
           default: () => [o?.sideRight?.()]
@@ -454,5 +454,5 @@ const Ot = /* @__PURE__ */ Z({
   }
 });
 export {
-  Ot as DuxListLayout
+  Pt as DuxListLayout
 };