@duxweb/dvha-pro 1.1.0 → 1.1.2

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

@@ -1,8 +1,8 @@
-import { defineComponent as Q, toRef as v, computed as u, reactive as w, createVNode as e, h as C, mergeProps as X, isVNode as Y } from "vue";
-import { useI18n as Z, useJsonSchema as N, useTabStore as $ } from "@duxweb/dvha-core";
-import { useWindowSize as ee } from "@vueuse/core";
-import { NTabs as te, NTab as oe, NButton as r, NPopselect as ie, NTooltip as f, NProgress as le, NPagination as ae, NModal as re, NDrawer as S } from "naive-ui";
-import { useAction as ne } from "../../hooks/action.js";
+import { defineComponent as $, toRef as x, reactive as w, computed as d, ref as k, watch as O, nextTick as v, onMounted as ee, createVNode as e, h as te, mergeProps as ae } from "vue";
+import { useI18n as ie, useJsonSchema as le, useTabStore as oe } from "@duxweb/dvha-core";
+import { useWindowSize as re } from "@vueuse/core";
+import { NTabs as ne, NTab as se, NButton as s, NPopselect as ue, NTooltip as h, NProgress as ce, NPagination as pe, NDrawer as j } from "naive-ui";
+import { useAction as de } 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 se from "../modal/modalPage.js";
 import "jinrishici";
 import "lodash-es";
 import "vue-draggable-plus";
-import { DuxTableFilter as ue } from "./filter.js";
-import { DuxFilterLayout as ce } from "./filterLayout.js";
+import { DuxTableFilter as me } from "./filter.js";
 import "@vee-validate/i18n";
 import "colorizr";
 import "echarts";
@@ -51,10 +49,10 @@ import "vee-validate";
 import "vue-router";
 import "vue-command-palette";
 import "@duxweb/dvha-naiveui";
-import { DuxPage as me } from "../../pages/page.js";
+import { DuxPage as fe } from "../../pages/page.js";
 import "../../pages/page404.js";
-import { DuxDrawerPage as T } from "../drawer/drawerPage.js";
-import { DuxTableTools as de } from "./tools.js";
+import { DuxDrawerPage as P } from "../drawer/drawerPage.js";
+import { DuxTableTools as be } from "./tools.js";
 import "short-unique-id";
 import "aieditor";
 import "@vue-flow/core";
@@ -66,12 +64,9 @@ import "../posterEditor/elements/index.js";
 import "fabric";
 import "dayjs";
 import "@tanstack/vue-query";
-import { useTable as pe } from "../../hooks/table.js";
+import { useTable as ve } from "../../hooks/table.js";
 import "pinia";
-function fe(t) {
-  return typeof t == "function" || Object.prototype.toString.call(t) === "[object Object]" && !Y(t);
-}
-const zt = /* @__PURE__ */ Q({
+const zt = /* @__PURE__ */ $({
   name: "DuxTableLayout",
   props: {
     path: {
@@ -123,107 +118,143 @@ const zt = /* @__PURE__ */ Q({
       type: Object
     }
   },
-  setup(t, {
-    slots: i,
-    expose: j
+  setup(a, {
+    slots: l,
+    expose: z
   }) {
-    const b = v(t, "filter", {}), L = v(t, "sorter", {}), P = v(t, "columns", []), {
-      t: l
-    } = Z(), {
-      renderAction: z
-    } = ne(), n = pe({
-      ...t.hookTableProps,
-      path: t.path,
-      filters: b.value,
+    const r = x(a, "filter", {}), L = x(a, "sorter", {}), B = x(a, "columns", []), {
+      t: n
+    } = ie(), {
+      renderAction: U
+    } = de(), o = w({
+      ...r.value || {}
+    }), u = ve({
+      ...a.hookTableProps,
+      path: a.path,
+      filters: o,
       sorters: L.value,
-      columns: P,
-      pagination: t.pagination
+      columns: B,
+      pagination: a.pagination
     });
-    j(n);
+    z(u);
     const {
-      columns: y,
-      tablePagination: D,
-      table: x,
-      onUpdateColumnSelected: O,
-      onUpdateChecked: A,
-      columnSelected: U,
-      autoRefetch: B,
-      autoCountdown: k,
-      onAutoRefetch: E,
-      isExporting: F,
-      isExportingRows: I,
-      isImporting: V,
-      onExport: W,
-      onExportRows: K,
-      onImport: M
-    } = n, _ = u(() => y.value.filter((o) => "title" in o && "key" in o).map((o) => ({
-      label: o.title,
-      value: o.key
+      columns: C,
+      tablePagination: A,
+      table: R,
+      onUpdateColumnSelected: D,
+      onUpdateChecked: E,
+      columnSelected: q,
+      autoRefetch: F,
+      autoCountdown: S,
+      onAutoRefetch: I,
+      isExporting: J,
+      isExportingRows: W,
+      isImporting: K,
+      onExport: V,
+      onExportRows: M,
+      onImport: G
+    } = u, H = d(() => C.value.filter((t) => "title" in t && "key" in t).map((t) => ({
+      label: t.title,
+      value: t.key
     }))), {
-      width: s
-    } = ee(), q = u(() => y.value.reduce((a, p) => a + (Number(p?.width) || Number(p?.minWidth) || 110), 0)), c = w({
+      width: c
+    } = re(), Q = d(() => C.value.reduce((i, p) => i + (Number(p?.width) || Number(p?.minWidth) || 110), 0)), m = w({
       show: !1
-    }), m = w({
+    }), f = w({
       show: !1
-    }), d = w({
-      show: !1
-    }), h = u(() => (t.filterSchema || []).map((o) => {
+    }), g = k(!1), X = d(() => (a.filterSchema || []).map((t) => {
       const {
-        label: a,
+        label: i,
         ...p
-      } = o;
+      } = t;
       return {
-        tag: ue,
+        tag: me,
         attrs: {
-          label: a
+          label: i
         },
         children: p
       };
     })), {
-      render: J
-    } = N({
-      data: u(() => h.value?.slice(t.filterNumber))
-    }), {
-      render: G
-    } = N({
-      data: u(() => h.value?.slice(0, t.filterNumber))
-    }), g = u(() => ({
+      render: Y
+    } = le({
+      data: d(() => X.value)
+    }), y = d(() => ({
       import: !1,
       export: !0,
       refresh: !0,
-      ...t.tools
-    })), R = $(), H = R.tabs.find((o) => o.path === R.current);
-    return () => e(me, {
-      actions: t.actions,
+      ...a.tools
+    })), T = k(0), b = k(null);
+    O(() => a.tabs?.map((t) => t.value), () => {
+      const t = a.tabs?.map((i) => i.value) || [];
+      if (r.value?.tab === void 0) {
+        const i = t[0];
+        i !== void 0 && (r.value.tab = i);
+      }
+      v(() => b.value?.syncBarPosition());
+    }, {
+      deep: !0
+    }), O(() => c.value, () => {
+      v(() => {
+        b.value?.syncBarPosition();
+      });
+    });
+    const N = oe(), Z = N.tabs.find((t) => t.path === N.current), _ = d(() => {
+      const t = a.tabs?.map((p) => p.value) || [], i = r.value?.tab;
+      return t.includes(i) ? i : t[0];
+    });
+    return ee(() => {
+      v(() => {
+        b.value?.syncBarPosition();
+      });
+    }), () => e(fe, {
+      actions: a.actions,
       scrollbar: !1
     }, {
-      sideLeft: () => i?.sideLeft && s.value >= 1024 ? i?.sideLeft?.() : void 0,
-      sideRight: () => i?.sideRight && s.value >= 1024 ? i?.sideRight?.() : void 0,
+      sideLeft: () => l?.sideLeft && c.value >= 1024 ? l?.sideLeft?.() : void 0,
+      sideRight: () => l?.sideRight && c.value >= 1024 ? l?.sideRight?.() : void 0,
       default: () => e("div", {
-        class: "flex flex-col gap-2 h-full relative"
+        class: "flex flex-col gap-3 h-full relative"
+      }, [e("div", {
+        class: "flex gap-2 justify-between flex-row border-b border-muted"
       }, [e("div", {
-        class: "flex gap-2 justify-between flex-col lg:flex-row"
-      }, [t.tabs && e("div", {
-        class: "flex flex-none"
-      }, [e(te, {
-        type: "segment",
+        class: "relative top-1.5px"
+      }, [!a.tabs && e("div", {
+        class: "pt-1 text-base"
+      }, [Z?.label]), a.tabs && e(ne, {
+        ref: b,
+        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: b.value?.tab,
-        onUpdateValue: (o) => {
-          b.value.tab = o;
+        "default-value": a.tabs?.[0]?.value || "",
+        value: _.value,
+        onUpdateValue: (t) => {
+          r.value.tab = t, o.tab = t, v(() => b.value?.syncBarPosition());
         }
       }, {
-        default: () => [t.tabs?.map((o) => e(oe, {
-          name: o.value,
-          tab: o.label
+        default: () => [a.tabs?.map((t) => e(se, {
+          name: t.value,
+          tab: t.label
         }, null))]
       })]), e("div", {
-        class: ["overflow-hidden flex-1 flex gap-2"]
-      }, [i?.sideLeft && s.value < 1024 && e(r, {
+        class: "flex gap-2 justify-end pb-2"
+      }, [l.actions?.(), a.actions?.length > 0 && U({
+        type: c.value < 1024 ? "dropdown" : "button",
+        items: a.actions
+      })])]), e("div", {
+        class: "flex gap-2 justify-between flex-col-reverse lg:flex-row"
+      }, [(c.value >= 1024 || g.value) && e("div", {
+        class: ["flex-1 flex flex-col lg:flex-row gap-2 flex-wrap"]
+      }, [e("div", {
+        key: T.value,
+        class: "contents"
+      }, [te(Y)])]), e("div", {
+        class: "flex justify-between gap-2"
+      }, [e("div", {
+        class: ["flex gap-2"]
+      }, [l?.sideLeft && c.value < 1024 && e(s, {
         class: "flex-none",
         secondary: !0,
         onClick: () => {
@@ -233,179 +264,194 @@ const zt = /* @__PURE__ */ Q({
         icon: () => e("div", {
           class: "i-tabler:layout-sidebar-inactive size-4"
         }, null)
-      }), e("div", {
-        class: ["flex-1 flex flex-col lg:flex-row gap-2 flex-wrap", t.tabs ? "justify-end" : "justify-start"]
-      }, [!t.tabs && !t.filterSchema?.length && e("div", {
-        class: "flex flex-none items-center text-base font-medium"
-      }, [H?.label]), C(G)]), i?.sideRight && s.value < 1024 && e(r, {
+      }), l?.sideRight && c.value < 1024 && e(s, {
         class: "flex-none",
         secondary: !0,
         onClick: () => {
-          d.show = !d.show;
+          f.show = !f.show;
         }
       }, {
         icon: () => e("div", {
           class: "i-tabler:layout-sidebar-right-inactive size-4"
         }, null)
-      })]), e("div", {
-        class: "flex gap-2 justify-between lg:justify-end"
+      }), e("div", {
+        class: "flex-none lg:hidden"
+      }, [e(s, {
+        secondary: !0,
+        onClick: () => {
+          g.value = !g.value;
+        }
+      }, {
+        icon: () => e("div", {
+          class: "i-tabler:filter size-4"
+        }, null)
+      })])]), e("div", {
+        class: ["flex gap-2 flex-row"]
       }, [e("div", {
-        class: "flex gap-2 items-center"
-      }, [h.value.length > t.filterNumber && e(r, {
-        iconPlacement: "right",
+        class: "flex lg:hidden"
+      }, [e(s, {
+        type: "primary",
+        secondary: !0,
         onClick: () => {
-          c.show = !c.show;
+          Object.keys(o).forEach((t) => {
+            delete o[t];
+          }), Object.assign(o, JSON.parse(JSON.stringify(r.value || {}))), u.onUpdatePage?.(1);
         }
       }, {
-        default: () => l("components.button.filter"),
         icon: () => e("div", {
-          class: ["i-tabler:chevrons-down size-4 transition-all"]
+          class: "i-tabler:search size-4"
         }, null)
-      }), i?.tools?.(), e(ie, {
-        options: _.value,
-        value: U.value,
-        onUpdateValue: (o) => {
-          O(o);
+      })]), e("div", {
+        class: ["hidden lg:flex gap-2"]
+      }, [e(s, {
+        type: "primary",
+        secondary: !0,
+        onClick: () => {
+          Object.keys(o).forEach((t) => delete o[t]), Object.assign(o, JSON.parse(JSON.stringify(r.value || {}))), u.onUpdatePage?.(1);
+        }
+      }, {
+        icon: () => e("div", {
+          class: "i-tabler:search size-4"
+        }, null),
+        default: () => n("components.button.search")
+      }), e(s, {
+        secondary: !0,
+        onClick: () => {
+          const t = r.value.tab;
+          Object.keys(r.value || {}).forEach((i) => {
+            i !== "tab" && delete r.value[i];
+          }), Object.keys(o).forEach((i) => {
+            delete o[i];
+          }), t !== void 0 && (o.tab = t), u.onUpdatePage?.(1), T.value++;
+        }
+      }, {
+        icon: () => e("div", {
+          class: "i-tabler:arrow-back-up size-4"
+        }, null),
+        default: () => n("components.button.reset")
+      })])])])]), l?.header?.(), e("div", {
+        class: "flex-1 min-h-0"
+      }, [l?.default?.({
+        ...u,
+        width: Q.value
+      })]), e("div", {
+        class: "flex justify-between"
+      }, [e("div", {
+        class: "flex items-center gap-0.5"
+      }, [l?.bottom?.(), l?.tools?.(), e(ue, {
+        options: H.value,
+        value: q.value,
+        onUpdateValue: (t) => {
+          D(t);
         },
         multiple: !0,
         placement: "bottom-start",
         trigger: "click"
       }, {
-        default: () => [e(f, null, {
-          trigger: () => e(r, {
-            secondary: !0,
+        default: () => [e(h, null, {
+          trigger: () => e(s, {
+            quaternary: !0,
+            circle: !0,
             "icon-placement": "right"
           }, {
             icon: () => e("div", {
               class: "i-tabler:columns size-4"
             }, null)
           }),
-          default: () => l("components.list.columnSetting")
+          default: () => n("components.list.columnSetting")
         })]
-      }), g.value.export && e(f, null, {
-        trigger: () => e(r, {
-          secondary: !0,
-          loading: F.value,
-          onClick: W
+      }), y.value.export && e(h, null, {
+        trigger: () => e(s, {
+          quaternary: !0,
+          circle: !0,
+          loading: J.value,
+          onClick: V
         }, {
           icon: () => e("div", {
             class: "i-tabler:database-export size-4"
           }, null)
         }),
-        default: () => l("components.button.export")
-      }), g.value.import && e(f, null, {
-        trigger: () => e(r, {
-          secondary: !0,
-          loading: V.value,
-          onClick: M
+        default: () => n("components.button.export")
+      }), y.value.import && e(h, null, {
+        trigger: () => e(s, {
+          quaternary: !0,
+          circle: !0,
+          loading: K.value,
+          onClick: G
         }, {
           icon: () => e("div", {
             class: "i-tabler:database-import size-4"
           }, null)
         }),
-        default: () => l("components.button.import")
-      }), g.value.refresh && e(f, null, {
-        trigger: () => e(r, {
-          secondary: !0,
-          onClick: E
+        default: () => n("components.button.import")
+      }), y.value.refresh && e(h, null, {
+        trigger: () => e(s, {
+          quaternary: !0,
+          circle: !0,
+          onClick: I
         }, {
-          icon: () => B.value ? e(le, {
+          icon: () => F.value ? e(ce, {
             class: "size-4",
             type: "circle",
-            percentage: k.value * 10,
+            percentage: S.value * 10,
             strokeWidth: 20,
             color: "rgba(var(--ui-color-primary))"
           }, {
             default: () => [e("span", {
               class: "text-8px"
-            }, [k.value])]
+            }, [S.value])]
           }) : e("div", {
             class: "i-tabler:refresh size-4"
           }, null)
         }),
-        default: () => l("components.button.autoRefresh")
-      })]), e("div", {
-        class: "flex gap-2 justify-end"
-      }, [i.actions?.(), t.actions?.length > 0 && z({
-        type: s.value < 1024 ? "dropdown" : "button",
-        items: t.actions
-      })])])]), i?.header?.(), e("div", {
-        class: "flex-1 min-h-0"
-      }, [i?.default?.({
-        ...n,
-        width: q.value
-      })]), e("div", {
-        class: "flex justify-between"
-      }, [e("div", null, [i?.bottom?.()]), e("div", null, [t.pagination && e(ae, X(D.value, {
-        simple: s.value < 768
+        default: () => n("components.button.autoRefresh")
+      })]), e("div", null, [a.pagination && e(pe, ae(A.value, {
+        simple: c.value < 768
       }), {
-        prefix: () => e("div", null, [l("components.list.total", {
-          total: n.total.value || 0
+        prefix: () => e("div", null, [n("components.list.total", {
+          total: u.total.value || 0
         })])
-      })])]), e(de, {
-        isLoading: n.isBatching.value,
-        onBatch: n.onBatch,
-        selecteds: x.value.checkedRowKeys,
-        number: x.value.checkedRowKeys?.length || 0 || 0,
+      })])]), e(be, {
+        isLoading: u.isBatching.value,
+        onBatch: u.onBatch,
+        selecteds: R.value.checkedRowKeys,
+        number: R.value.checkedRowKeys?.length || 0 || 0,
         group: [[{
           icon: "i-tabler:x",
           onClick: () => {
-            A?.([]);
+            E?.([]);
           }
         }], [{
-          label: l("components.button.export"),
+          label: n("components.button.export"),
           icon: "i-tabler:file-export",
-          loading: I.value,
-          onClick: K
-        }, ...t.batchOptions || []]]
-      }, null), e(re, {
-        draggable: !0,
-        class: "bg-white rounded dark:shadow-gray-950/80  dark:bg-gray-800/60 backdrop-blur min-w-110",
-        show: c.show,
-        onUpdateShow: (o) => c.show = o
-      }, {
-        default: ({
-          draggableClass: o
-        }) => {
-          let a;
-          return e(se, {
-            title: l("components.button.filter"),
-            handle: o,
-            onClose: () => c.show = !1
-          }, {
-            default: () => [e(ce, {
-              showLabel: !0,
-              labelPlacement: "top"
-            }, fe(a = C(J)) ? a : {
-              default: () => [a]
-            })]
-          });
-        }
-      }), e(S, {
+          loading: W.value,
+          onClick: M
+        }, ...a.batchOptions || []]]
+      }, null), e(j, {
         show: m.show,
-        onUpdateShow: (o) => m.show = o,
+        onUpdateShow: (t) => m.show = t,
         autoFocus: !1,
         placement: "left"
       }, {
-        default: () => [e(T, {
-          title: t.sideLeftTitle || l("components.button.sideLeft"),
+        default: () => [e(P, {
+          title: a.sideLeftTitle || n("components.button.sideLeft"),
           onClose: () => m.show = !1,
           scrollbar: !1
         }, {
-          default: () => [i?.sideLeft?.()]
+          default: () => [l?.sideLeft?.()]
         })]
-      }), e(S, {
-        show: d.show,
-        onUpdateShow: (o) => d.show = o,
+      }), e(j, {
+        show: f.show,
+        onUpdateShow: (t) => f.show = t,
         autoFocus: !1,
         placement: "right"
       }, {
-        default: () => [e(T, {
-          title: t.sideRightTitle || l("components.button.sideRight"),
-          onClose: () => d.show = !1,
+        default: () => [e(P, {
+          title: a.sideRightTitle || n("components.button.sideRight"),
+          onClose: () => f.show = !1,
           scrollbar: !1
         }, {
-          default: () => [i?.sideRight?.()]
+          default: () => [l?.sideRight?.()]
         })]
       })])
     });

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

@@ -105,7 +105,7 @@ const Bt = /* @__PURE__ */ u({
       leaveToClass: "transform translate-y-full opacity-0"
     }, {
       default: () => [m.value ? o("div", {
-        class: "flex h-12 px-1 justify-between lg:justify-center gap-2 pointer-events-auto"
+        class: "flex h-10 px-1 justify-between lg:justify-center gap-2 pointer-events-auto"
       }, [i.value?.map((s, n) => o("div", {
         class: "h-10 mt-1 bg-default rounded px-4 py-1 shadow flex items-center gap-4"
       }, [n === i.value.length - 1 && o(c, null, [o("span", {

package/dist/esm/components/widget/image.js

@@ -1,63 +1,28 @@
-import { defineComponent as a, createVNode as e, h as c, mergeProps as n } from "vue";
+import { defineComponent as r, createVNode as t, h as m, mergeProps as d } from "vue";
 import { NImage as i } from "naive-ui";
-import { DuxPlaceholder as o } from "./placeholder.js";
-const g = /* @__PURE__ */ a({
+import { DuxPlaceholder as h } from "./placeholder.js";
+const o = /* @__PURE__ */ r({
   name: "DuxImage",
   props: {},
   extends: i,
-  setup(r) {
-    return () => {
-      const l = `size-${r.height}px`, t = e("svg", {
-        viewBox: "0 0 100 100",
-        class: l
-      }, [e("circle", {
-        cx: "50",
-        cy: "50",
-        r: "50",
-        fill: "rgb(var(--ui-color-primary))",
-        "fill-opacity": "0.1"
-      }, null), e("g", {
-        fill: "rgb(var(--ui-color-primary))",
-        "fill-opacity": "0.65"
-      }, [e("circle", {
-        cx: "50",
-        cy: "36",
-        r: "14"
-      }, null), e("path", {
-        d: "M 50 54 C 30 54 15 69 15 87 L 15 100 L 85 100 L 85 87 C 85 69 70 54 50 54 Z"
-      }, null)]), e("g", {
-        fill: "rgb(var(--ui-color-primary))",
-        "fill-opacity": "0.3"
-      }, [e("circle", {
-        cx: "20",
-        cy: "20",
-        r: "1.5"
-      }, [e("animate", {
-        attributeName: "r",
-        values: "1.5;2.5;1.5",
-        dur: "3s",
-        repeatCount: "indefinite"
-      }, null)]), e("circle", {
-        cx: "80",
-        cy: "25",
-        r: "1"
-      }, [e("animate", {
-        attributeName: "r",
-        values: "1;2;1",
-        dur: "4s",
-        repeatCount: "indefinite"
-      }, null)])])]);
-      return r.src ? e(i, n(r, {
-        src: r.src
-      }), {
-        placeholder: () => e(o, {
-          width: r.width,
-          height: r.height
-        }, null)
-      }) : c(t);
-    };
+  setup(e) {
+    return () => e.src ? t(i, d(e, {
+      src: e.src
+    }), {
+      placeholder: () => t(h, {
+        width: e.width,
+        height: e.height
+      }, null),
+      error: () => t(h, {
+        width: e.width,
+        height: e.height
+      }, null)
+    }) : m(h, {
+      width: e.width,
+      height: e.height
+    });
   }
 });
 export {
-  g as DuxImage
+  o as DuxImage
 };