@duxweb/dvha-pro 1.0.23 → 1.0.25

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

@@ -1,17 +1,28 @@
-import { defineComponent as te, toRef as D, computed as b, reactive as x, createVNode as t, h as A, mergeProps as ie, isVNode as ae } from "vue";
-import { useI18n as re, useJsonSchema as O } from "@duxweb/dvha-core";
-import { useWindowSize as ne } from "@vueuse/core";
-import { NTabs as oe, NTab as le, NButton as l, NPopselect as ue, NTooltip as h, NProgress as ce, NPagination as de, NModal as pe, NDrawer as U } from "naive-ui";
-import { useAction as fe } from "../../hooks/action.js";
+import { defineComponent as J, toRef as x, computed as m, reactive as v, createVNode as e, h as k, mergeProps as K, isVNode as G } from "vue";
+import { useI18n as H, useJsonSchema as C } from "@duxweb/dvha-core";
+import { useWindowSize as Q } from "@vueuse/core";
+import { NTabs as X, NTab as Y, NButton as r, NPopselect as Z, NTooltip as f, NProgress as $, NPagination as ee, NModal as te, NDrawer as N } from "naive-ui";
+import { useAction as oe } from "../../hooks/action.js";
 import "@overlastic/vue";
 import "clsx";
 import "vue-echarts";
+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 "vue-cropper";
-import me from "../modal/modalPage.js";
+import le from "../modal/modalPage.js";
 import "jinrishici";
 import "lodash-es";
 import "vue-draggable-plus";
-import { DuxDrawerPage as E } from "../drawer/drawerPage.js";
+import { DuxDrawerPage as R } from "../drawer/drawerPage.js";
 import "aieditor";
 import "vee-validate";
 import "vue-router";
@@ -26,32 +37,23 @@ import "@vee-validate/i18n/dist/locale/en.json";
 import "@vee-validate/i18n/dist/locale/zh_CN.json";
 import "vue-command-palette";
 import "@duxweb/dvha-naiveui";
-import { DuxPage as be } from "../../pages/page.js";
+import { DuxPage as ie } from "../../pages/page.js";
 import "../../pages/page404.js";
 import "@iconify-json/tabler/icons.json";
-import { DuxTableFilter as he } from "./filter.js";
-import { DuxFilterLayout as ge } from "./filterLayout.js";
-import { DuxTableTools as ve } from "./tools.js";
+import "../image/elements/index.js";
+import "fabric";
 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 { DuxTableFilter as ae } from "./filter.js";
+import { DuxFilterLayout as re } from "./filterLayout.js";
+import { DuxTableTools as ne } from "./tools.js";
 import "dayjs";
 import "@tanstack/vue-query";
-import { useTable as we } from "../../hooks/table.js";
+import { useTable as se } from "../../hooks/table.js";
 import "pinia";
-function ye(i) {
-  return typeof i == "function" || Object.prototype.toString.call(i) === "[object Object]" && !ae(i);
+function ue(t) {
+  return typeof t == "function" || Object.prototype.toString.call(t) === "[object Object]" && !G(t);
 }
-const gt = /* @__PURE__ */ te({
+const st = /* @__PURE__ */ J({
   name: "DuxTableLayout",
   props: {
     path: {
@@ -64,6 +66,10 @@ const gt = /* @__PURE__ */ te({
     filterSchema: {
       type: Array
     },
+    filterNumber: {
+      type: Number,
+      default: 1
+    },
     columns: {
       type: Array
     },
@@ -93,308 +99,289 @@ const gt = /* @__PURE__ */ te({
       type: Object
     }
   },
-  setup(i, {
-    slots: e
+  setup(t, {
+    slots: l
   }) {
-    var C, S;
-    const g = D(i, "filter", {}), F = D(i, "columns", []), {
-      t: n
-    } = re(), {
-      renderAction: V
-    } = fe(), v = we({
-      path: i.path,
-      filters: g.value,
-      columns: F,
-      pagination: i.pagination,
-      ...i.hookTableProps
+    const p = x(t, "filter", {}), S = x(t, "columns", []), {
+      t: i
+    } = H(), {
+      renderAction: T
+    } = oe(), b = se({
+      path: t.path,
+      filters: p.value,
+      columns: S,
+      pagination: t.pagination,
+      ...t.hookTableProps
     }), {
-      columns: R,
-      tablePagination: W,
-      table: I,
-      onUpdateColumnSelected: B,
-      onUpdateChecked: w,
-      columnSelected: M,
-      autoRefetch: _,
-      autoCountdown: k,
-      onAutoRefetch: q,
-      isExporting: J,
-      isExportingRows: K,
-      isImporting: G,
-      onExport: H,
-      onExportRows: Q,
-      onImport: X
-    } = v, Y = b(() => R.value.filter((r) => "title" in r && "key" in r).map((r) => ({
-      label: r.title,
-      value: r.key
+      columns: w,
+      tablePagination: j,
+      table: L,
+      onUpdateColumnSelected: P,
+      onUpdateChecked: z,
+      columnSelected: D,
+      autoRefetch: A,
+      autoCountdown: y,
+      onAutoRefetch: O,
+      isExporting: U,
+      isExportingRows: E,
+      isImporting: F,
+      onExport: V,
+      onExportRows: W,
+      onImport: I
+    } = b, B = m(() => w.value.filter((o) => "title" in o && "key" in o).map((o) => ({
+      label: o.title,
+      value: o.key
     }))), {
-      width: u
-    } = ne(), Z = b(() => R.value.reduce((c, o) => c + (Number(o == null ? void 0 : o.width) || Number(o == null ? void 0 : o.minWidth) || 110), 0)), p = x({
+      width: n
+    } = Q(), M = m(() => w.value.reduce((a, d) => a + (Number(d?.width) || Number(d?.minWidth) || 110), 0)), s = v({
       show: !1
-    }), f = x({
+    }), u = v({
       show: !1
-    }), m = x({
+    }), c = v({
       show: !1
-    }), y = b(() => (i.filterSchema || []).map((r) => {
+    }), h = m(() => (t.filterSchema || []).map((o) => {
       const {
-        label: c,
-        ...o
-      } = r;
+        label: a,
+        ...d
+      } = o;
       return {
-        tag: he,
+        tag: ae,
         attrs: {
-          label: c
+          label: a
         },
-        children: o
+        children: d
       };
     })), {
-      render: $
-    } = O({
-      data: (C = y.value) == null ? void 0 : C.slice(1)
+      render: _
+    } = C({
+      data: h.value?.slice(t.filterNumber)
     }), {
-      render: ee
-    } = O({
-      data: (S = y.value) == null ? void 0 : S.slice(0, 1)
-    }), s = b(() => ({
+      render: q
+    } = C({
+      data: h.value?.slice(0, t.filterNumber)
+    }), g = m(() => ({
       import: !1,
       export: !0,
       refresh: !0,
-      ...i.tools
+      ...t.tools
     }));
-    return () => t(be, {
-      actions: i.actions,
+    return () => e(ie, {
+      actions: t.actions,
       scrollbar: !1
     }, {
-      sideLeft: () => {
-        var r;
-        return e != null && e.sideLeft && u.value >= 1024 ? (r = e == null ? void 0 : e.sideLeft) == null ? void 0 : r.call(e) : void 0;
-      },
-      sideRight: () => {
-        var r;
-        return e != null && e.sideRight && u.value >= 1024 ? (r = e == null ? void 0 : e.sideRight) == null ? void 0 : r.call(e) : void 0;
-      },
-      default: () => {
-        var r, c, o, T, j, L, N, P, z;
-        return t("div", {
-          class: "flex flex-col gap-2 h-full relative"
-        }, [t("div", {
-          class: "flex gap-2 justify-between flex-col lg:flex-row"
-        }, [i.tabs && t("div", {
-          class: "flex flex-none"
-        }, [t(oe, {
-          type: "segment",
-          size: "small",
-          style: {
-            "--n-tab-padding": "4px 10px"
-          },
-          "default-value": (c = (r = i.tabs) == null ? void 0 : r[0]) == null ? void 0 : c.value,
-          value: (o = g.value) == null ? void 0 : o.tab,
-          onUpdateValue: (a) => {
-            g.value.tab = a;
-          }
+      sideLeft: () => l?.sideLeft && n.value >= 1024 ? l?.sideLeft?.() : void 0,
+      sideRight: () => l?.sideRight && n.value >= 1024 ? l?.sideRight?.() : void 0,
+      default: () => e("div", {
+        class: "flex flex-col gap-2 h-full relative"
+      }, [e("div", {
+        class: "flex gap-2 justify-between flex-col lg:flex-row"
+      }, [t.tabs && e("div", {
+        class: "flex flex-none"
+      }, [e(X, {
+        type: "segment",
+        size: "small",
+        style: {
+          "--n-tab-padding": "4px 10px"
+        },
+        "default-value": t.tabs?.[0]?.value,
+        value: p.value?.tab,
+        onUpdateValue: (o) => {
+          p.value.tab = o;
+        }
+      }, {
+        default: () => [t.tabs?.map((o) => e(Y, {
+          name: o.value,
+          tab: o.label
+        }, null))]
+      })]), e("div", {
+        class: ["overflow-hidden flex-1 flex gap-2"]
+      }, [l?.sideLeft && n.value < 1024 && e(r, {
+        class: "flex-none",
+        secondary: !0,
+        onClick: () => {
+          u.show = !u.show;
+        }
+      }, {
+        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"]
+      }, [k(q)]), l?.sideRight && n.value < 1024 && e(r, {
+        class: "flex-none",
+        secondary: !0,
+        onClick: () => {
+          c.show = !c.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 gap-2 items-center"
+      }, [h.value.length > t.filterNumber && e(r, {
+        iconPlacement: "right",
+        onClick: () => {
+          s.show = !s.show;
+        }
+      }, {
+        default: () => i("components.button.filter"),
+        icon: () => e("div", {
+          class: ["i-tabler:chevrons-down size-4 transition-all"]
+        }, null)
+      }), l?.tools?.(), e(Z, {
+        options: B.value,
+        value: D.value,
+        onUpdateValue: (o) => {
+          P(o);
+        },
+        multiple: !0,
+        placement: "bottom-start",
+        trigger: "click"
+      }, {
+        default: () => [e(f, null, {
+          trigger: () => e(r, {
+            secondary: !0,
+            "icon-placement": "right"
+          }, {
+            icon: () => e("div", {
+              class: "i-tabler:columns size-4"
+            }, null)
+          }),
+          default: () => i("components.list.columnSetting")
+        })]
+      }), g.value.export && e(f, null, {
+        trigger: () => e(r, {
+          secondary: !0,
+          loading: U.value,
+          onClick: V
         }, {
-          default: () => {
-            var a;
-            return [(a = i.tabs) == null ? void 0 : a.map((d) => t(le, {
-              name: d.value,
-              tab: d.label
-            }, null))];
-          }
-        })]), t("div", {
-          class: ["overflow-hidden flex-1 flex gap-2"]
-        }, [(e == null ? void 0 : e.sideLeft) && u.value < 1024 && t(l, {
-          class: "flex-none",
+          icon: () => e("div", {
+            class: "i-tabler:database-export size-4"
+          }, null)
+        }),
+        default: () => i("components.button.export")
+      }), g.value.import && e(f, null, {
+        trigger: () => e(r, {
           secondary: !0,
-          onClick: () => {
-            f.show = !f.show;
-          }
+          loading: F.value,
+          onClick: I
         }, {
-          icon: () => t("div", {
-            class: "i-tabler:layout-sidebar-inactive size-4"
+          icon: () => e("div", {
+            class: "i-tabler:database-import size-4"
           }, null)
-        }), t("div", {
-          class: ["flex-1 lg:flex gap-2 flex-wrap", i.tabs ? "justify-end" : "justify-start"]
-        }, [A(ee)]), (e == null ? void 0 : e.sideRight) && u.value < 1024 && t(l, {
-          class: "flex-none",
+        }),
+        default: () => i("components.button.import")
+      }), g.value.refresh && e(f, null, {
+        trigger: () => e(r, {
           secondary: !0,
-          onClick: () => {
-            m.show = !m.show;
-          }
+          onClick: O
         }, {
-          icon: () => t("div", {
-            class: "i-tabler:layout-sidebar-right-inactive size-4"
+          icon: () => A.value ? e($, {
+            class: "size-4",
+            type: "circle",
+            percentage: y.value * 10,
+            strokeWidth: 20,
+            color: "rgba(var(--ui-color-primary))"
+          }, {
+            default: () => [e("span", {
+              class: "text-8px"
+            }, [y.value])]
+          }) : e("div", {
+            class: "i-tabler:refresh size-4"
           }, null)
-        })]), t("div", {
-          class: "flex gap-2 justify-between lg:justify-end"
-        }, [t("div", {
-          class: "flex gap-2 items-center"
-        }, [y.value.length > 1 && t(l, {
-          iconPlacement: "right",
+        }),
+        default: () => i("components.button.autoRefresh")
+      })]), e("div", {
+        class: "flex gap-2 justify-end"
+      }, [l.actions?.(), t.actions?.length > 0 && T({
+        type: n.value < 1024 ? "dropdown" : "button",
+        items: t.actions
+      })])])]), e("div", {
+        class: "flex-1 min-h-0"
+      }, [l?.default?.({
+        ...b,
+        width: M.value
+      })]), e("div", {
+        class: "flex justify-between"
+      }, [e("div", null, [l?.bottom?.()]), e("div", null, [t.pagination && e(ee, K(j.value, {
+        simple: n.value < 768
+      }), {
+        prefix: () => e("div", null, [i("components.list.total", {
+          total: b.total.value || 0
+        })])
+      })])]), e(ne, {
+        number: L.value.checkedRowKeys?.length || 0 || 0,
+        group: [[{
+          icon: "i-tabler:x",
           onClick: () => {
-            p.show = !p.show;
+            z?.([]);
           }
+        }], [{
+          label: i("components.button.export"),
+          icon: "i-tabler:file-export",
+          loading: E.value,
+          onClick: W
         }, {
-          default: () => n("components.button.filter"),
-          icon: () => t("div", {
-            class: ["i-tabler:chevrons-down size-4 transition-all"]
-          }, null)
-        }), (T = e == null ? void 0 : e.tools) == null ? void 0 : T.call(e), t(ue, {
-          options: Y.value,
-          value: M.value,
-          onUpdateValue: (a) => {
-            B(a);
-          },
-          multiple: !0,
-          placement: "bottom-start",
-          trigger: "click"
-        }, {
-          default: () => [t(h, null, {
-            trigger: () => t(l, {
-              secondary: !0,
-              "icon-placement": "right"
-            }, {
-              icon: () => t("div", {
-                class: "i-tabler:columns size-4"
-              }, null)
-            }),
-            default: () => n("components.list.columnSetting")
-          })]
-        }), s.value.export && t(h, null, {
-          trigger: () => t(l, {
-            secondary: !0,
-            loading: J.value,
-            onClick: H
-          }, {
-            icon: () => t("div", {
-              class: "i-tabler:database-export size-4"
-            }, null)
-          }),
-          default: () => n("components.button.export")
-        }), s.value.import && t(h, null, {
-          trigger: () => t(l, {
-            secondary: !0,
-            loading: G.value,
-            onClick: X
-          }, {
-            icon: () => t("div", {
-              class: "i-tabler:database-import size-4"
-            }, null)
-          }),
-          default: () => n("components.button.import")
-        }), s.value.refresh && t(h, null, {
-          trigger: () => t(l, {
-            secondary: !0,
-            onClick: q
+          label: i("components.button.delete"),
+          type: "error",
+          icon: "i-tabler:trash"
+        }]]
+      }, null), e(te, {
+        draggable: !0,
+        class: "bg-white rounded dark:shadow-gray-950/80  dark:bg-gray-800/60 backdrop-blur min-w-110",
+        show: s.show,
+        onUpdateShow: (o) => s.show = o
+      }, {
+        default: ({
+          draggableClass: o
+        }) => {
+          let a;
+          return e(le, {
+            title: i("components.button.filter"),
+            handle: o,
+            onClose: () => s.show = !1
           }, {
-            icon: () => _.value ? t(ce, {
-              class: "size-4",
-              type: "circle",
-              percentage: k.value * 10,
-              strokeWidth: 20,
-              color: "rgba(var(--ui-color-primary))"
-            }, {
-              default: () => [t("span", {
-                class: "text-8px"
-              }, [k.value])]
-            }) : t("div", {
-              class: "i-tabler:refresh size-4"
-            }, null)
-          }),
-          default: () => n("components.button.autoRefresh")
-        })]), t("div", {
-          class: "flex gap-2 justify-end"
-        }, [(j = e.actions) == null ? void 0 : j.call(e), ((L = i.actions) == null ? void 0 : L.length) > 0 && V({
-          type: u.value < 1024 ? "dropdown" : "button",
-          items: i.actions
-        })])])]), t("div", {
-          class: "flex-1 min-h-0"
-        }, [(N = e == null ? void 0 : e.default) == null ? void 0 : N.call(e, {
-          ...v,
-          width: Z.value
-        })]), t("div", {
-          class: "flex justify-between"
-        }, [t("div", null, [(P = e == null ? void 0 : e.bottom) == null ? void 0 : P.call(e)]), t("div", null, [i.pagination && t(de, ie(W.value, {
-          simple: u.value < 768
-        }), {
-          prefix: () => t("div", null, [n("components.list.total", {
-            total: v.total.value || 0
-          })])
-        })])]), t(ve, {
-          number: ((z = I.value.checkedRowKeys) == null ? void 0 : z.length) || 0 || 0,
-          group: [[{
-            icon: "i-tabler:x",
-            onClick: () => {
-              w == null || w([]);
-            }
-          }], [{
-            label: n("components.button.export"),
-            icon: "i-tabler:file-export",
-            loading: K.value,
-            onClick: Q
-          }, {
-            label: n("components.button.delete"),
-            type: "error",
-            icon: "i-tabler:trash"
-          }]]
-        }, null), t(pe, {
-          draggable: !0,
-          class: "bg-white rounded dark:shadow-gray-950/80  dark:bg-gray-800/60 backdrop-blur",
-          show: p.show,
-          onUpdateShow: (a) => p.show = a
+            default: () => [e(re, {
+              showLabel: !0,
+              labelPlacement: "top"
+            }, ue(a = k(_)) ? a : {
+              default: () => [a]
+            })]
+          });
+        }
+      }), e(N, {
+        show: u.show,
+        onUpdateShow: (o) => u.show = o,
+        autoFocus: !1,
+        placement: "left"
+      }, {
+        default: () => [e(R, {
+          title: t.sideLeftTitle || i("components.button.sideLeft"),
+          onClose: () => u.show = !1,
+          scrollbar: !1
         }, {
-          default: ({
-            draggableClass: a
-          }) => {
-            let d;
-            return t(me, {
-              title: n("components.button.filter"),
-              handle: a,
-              onClose: () => p.show = !1
-            }, {
-              default: () => [t(ge, {
-                showLabel: !0,
-                labelPlacement: "top"
-              }, ye(d = A($)) ? d : {
-                default: () => [d]
-              })]
-            });
-          }
-        }), t(U, {
-          show: f.show,
-          onUpdateShow: (a) => f.show = a,
-          autoFocus: !1,
-          placement: "left"
+          default: () => [l?.sideLeft?.()]
+        })]
+      }), e(N, {
+        show: c.show,
+        onUpdateShow: (o) => c.show = o,
+        autoFocus: !1,
+        placement: "right"
+      }, {
+        default: () => [e(R, {
+          title: t.sideRightTitle || i("components.button.sideRight"),
+          onClose: () => c.show = !1,
+          scrollbar: !1
         }, {
-          default: () => [t(E, {
-            title: i.sideLeftTitle || n("components.button.sideLeft"),
-            onClose: () => f.show = !1,
-            scrollbar: !1
-          }, {
-            default: () => {
-              var a;
-              return [(a = e == null ? void 0 : e.sideLeft) == null ? void 0 : a.call(e)];
-            }
-          })]
-        }), t(U, {
-          show: m.show,
-          onUpdateShow: (a) => m.show = a,
-          autoFocus: !1,
-          placement: "right"
-        }, {
-          default: () => [t(E, {
-            title: i.sideRightTitle || n("components.button.sideRight"),
-            onClose: () => m.show = !1,
-            scrollbar: !1
-          }, {
-            default: () => {
-              var a;
-              return [(a = e == null ? void 0 : e.sideRight) == null ? void 0 : a.call(e)];
-            }
-          })]
-        })]);
-      }
+          default: () => [l?.sideRight?.()]
+        })]
+      })])
     });
   }
 });
 export {
-  gt as DuxTableLayout
+  st as DuxTableLayout
 };