@duxweb/dvha-pro 1.1.29 → 1.1.31

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

@@ -1,633 +1,411 @@
-import { defineComponent as Se, toRef as A, computed as n, reactive as P, ref as B, unref as Te, createVNode as e, watch as L, nextTick as k, onMounted as je, h as K, mergeProps as ze, toRaw as N } from "vue";
-import { useI18n as Oe, useJsonSchema as V, useTabStore as Fe } from "@duxweb/dvha-core";
-import { useWindowSize as Ae } from "@vueuse/core";
-import { cloneDeep as $, isEqual as Pe } from "lodash-es";
-import { NButton as s, NTabs as Be, NTab as Le, NPopselect as Ne, NTooltip as R, NProgress as De, NPagination as Ee, NDrawer as J } from "naive-ui";
-import { useAction as Ue } 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 "jinrishici";
-import { DuxTableFilter as qe } from "./filter.js";
-import "@vee-validate/i18n";
-import "colorizr";
-import "echarts";
-import "highlight.js/lib/core";
-import "highlight.js/lib/languages/bash";
-import "highlight.js/lib/languages/css";
-import "highlight.js/lib/languages/go";
-import "highlight.js/lib/languages/java";
-import "highlight.js/lib/languages/javascript";
-import "highlight.js/lib/languages/json";
-import "highlight.js/lib/languages/markdown";
-import "highlight.js/lib/languages/php";
-import "highlight.js/lib/languages/python";
-import "highlight.js/lib/languages/shell";
-import "highlight.js/lib/languages/sql";
-import "highlight.js/lib/languages/typescript";
-import "highlight.js/lib/languages/xml";
-import "@ant-design/colors";
-import "@unocss/preset-icons/browser";
-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 "vee-validate";
-import "vue-router";
-import "vue-command-palette";
-import "@duxweb/dvha-naiveui";
-import { DuxPage as Me } from "../../pages/page.js";
-import "../../pages/page404.js";
-import { DuxDrawerPage as G } from "../drawer/drawerPage.js";
-import { DuxTableTools as Ie } from "./tools.js";
-import "vue-draggable-plus";
-import "short-unique-id";
-import "aieditor";
-import "@vue-flow/core";
-import "lodash-es/cloneDeep";
-import "@vue-flow/background";
-/* empty css                      */
-import "mime";
-import "@iconify-json/tabler/icons.json";
-import "../posterEditor/elements/index.js";
-import "fabric";
-import "../schemaEditor/schemaEditor.js";
-import "dayjs";
-import "@tanstack/vue-query";
-import { useTable as We } from "../../hooks/table.js";
-import "pinia";
-const rl = /* @__PURE__ */ Se({
-  name: "DuxTableLayout",
-  props: {
-    path: {
-      type: String,
-      required: !0
-    },
-    filter: {
-      type: Object
-    },
-    filterSchema: {
-      type: Array
-    },
-    filterType: {
-      type: String,
-      default: "simple"
-    },
-    filterReactive: {
-      type: Object
-    },
-    filterNumber: {
-      type: Number,
-      default: 1
-    },
-    sorter: {
-      type: Object
-    },
-    columns: {
-      type: Array
-    },
-    pagination: {
-      type: [Boolean, Object],
-      default: !0
-    },
-    tabs: {
-      type: Array
-    },
-    actions: {
-      type: Array,
-      default: () => []
-    },
-    tools: {
-      type: Object
-    },
-    sideLeftTitle: {
-      type: String,
-      default: ""
-    },
-    sideRightTitle: {
-      type: String,
-      default: ""
-    },
-    batchOptions: {
-      type: Array
-    },
-    hookTableProps: {
-      type: Object
-    }
-  },
-  setup(a, {
-    slots: r,
-    expose: H
-  }) {
-    const f = A(a, "filter", {}), Q = A(a, "sorter", {}), g = n(() => a.filterReactive || {}), X = A(a, "columns", []), {
-      t: c
-    } = Oe(), {
-      renderAction: Y
-    } = Ue(), o = P({
-      ...f.value || {}
-    }), u = We({
-      ...a.hookTableProps,
-      path: a.path,
-      filters: o,
-      sorters: Q.value,
-      columns: X,
-      pagination: a.pagination
-    });
-    H(u);
-    const {
-      columns: D,
-      tablePagination: Z,
-      table: E,
-      onUpdateColumnSelected: _,
-      onUpdateChecked: ee,
-      columnSelected: te,
-      autoRefetch: le,
-      autoCountdown: U,
-      onAutoRefetch: ae,
-      isExporting: ie,
-      isExportingRows: re,
-      isImporting: oe,
-      onExport: se,
-      onExportRows: ne,
-      onImport: ce
-    } = u, ue = n(() => D.value.filter((t) => "title" in t && "key" in t).map((t) => ({
-      label: t.title,
-      value: t.key
-    }))), {
-      width: d
-    } = Ae(), de = n(() => D.value.reduce((l, i) => l + (Number(i?.width) || Number(i?.minWidth) || 110), 0)), v = P({
-      show: !1
-    }), h = P({
-      show: !1
-    }), x = B(!1), fe = n(() => {
-      const t = Te(a.filterSchema);
-      return Array.isArray(t) ? t : [];
-    }), C = n(() => fe.value.map((t, l) => {
-      const m = (Array.isArray(t) ? t : [t]).map((p, ke) => {
-        const {
-          label: Re,
-          ...Ce
-        } = p || {};
-        return {
-          key: `filter-node-${l}-${ke}`,
-          label: Re ?? p?.title ?? "",
-          schema: Ce
-        };
-      });
-      return {
-        key: `filter-row-${l}`,
-        nodes: m
-      };
-    })), q = n(() => C.value.some((t) => t.nodes.some((l) => Object.keys(l.schema || {}).length > 0))), y = n(() => !!r.filter || q.value), pe = n(() => C.value.flatMap((t) => t.nodes.map((l) => ({
-      tag: qe,
-      attrs: {
-        label: l.label
-      },
-      children: l.schema
-    })))), {
-      render: me
-    } = V({
-      data: n(() => pe.value)
-    }), S = n(() => ({
-      import: !1,
-      export: !0,
-      refresh: !0,
-      ...a.tools
-    })), T = B(0), b = B(null), j = (t) => $(N(t) || {}), ve = () => $(N(o) || {}), z = (t) => {
-      const l = ve();
-      t();
-      const i = N(o) || {};
-      return !Pe(l, i);
-    }, O = (t) => {
-      if (t) {
-        u.page?.value !== 1 && u.onUpdatePage?.(1);
-        return;
-      }
-      u.onRefresh?.();
-    }, w = () => {
-      const t = z(() => {
-        Object.keys(o).forEach((l) => {
-          delete o[l];
-        }), Object.assign(o, j(f.value)), Object.assign(o, j(g.value));
-      });
-      O(t);
-    }, F = () => {
-      const t = f.value?.tab;
-      Object.keys(f.value || {}).forEach((i) => {
-        i !== "tab" && delete f.value[i];
-      });
-      const l = z(() => {
-        Object.keys(o).forEach((i) => {
-          delete o[i];
-        }), t !== void 0 && (o.tab = t), Object.assign(o, j(g.value));
-      });
-      O(l), T.value++;
-    }, he = n(() => ({
-      tag: "div",
-      attrs: {
-        class: "flex flex-wrap gap-2 items-center w-full"
-      },
-      children: [{
-        tag: "div",
-        attrs: {
-          class: "text-right text-sm text-muted w-24 px-1"
-        }
-      }, {
-        tag: "div",
-        attrs: {
-          class: "flex flex-wrap gap-2 flex-1"
-        },
-        children: [{
-          tag: s,
-          attrs: {
-            type: "primary",
-            secondary: !0,
-            onClick: w
-          },
-          slots: {
-            icon: () => e("div", {
-              class: "i-tabler:search size-4"
-            }, null),
-            default: () => c("components.button.search")
-          }
-        }, {
-          tag: s,
-          attrs: {
-            secondary: !0,
-            onClick: F
-          },
-          slots: {
-            icon: () => e("div", {
-              class: "i-tabler:arrow-back-up size-4"
-            }, null),
-            default: () => c("components.button.reset")
-          }
-        }, {
-          tag: s,
-          attrs: {
-            secondary: !0,
-            onClick: () => u.onRefresh?.()
-          },
-          slots: {
-            icon: () => e("div", {
-              class: "i-tabler:refresh size-4"
-            }, null)
-          }
-        }]
-      }]
-    })), be = n(() => {
-      if (!q.value)
-        return [];
-      const t = C.value.map((l) => {
-        const i = l.nodes.length > 1;
-        return {
-          tag: "div",
-          attrs: {
-            class: "flex flex-wrap gap-2 w-full items-start",
-            "data-filter-row": l.key
-          },
-          children: l.nodes.map((m) => {
-            const p = m.label;
-            return {
-              tag: "div",
-              attrs: {
-                class: i ? "flex items-start gap-2" : "flex items-start gap-2 w-full"
-              },
-              children: [p ? {
-                tag: "div",
-                attrs: {
-                  class: "w-24 text-right text-sm text-muted px-1 flex-none pt-1.5"
-                },
-                children: p
-              } : {
-                tag: "div",
-                attrs: {
-                  class: "w-24 flex-none"
-                }
-              }, {
-                tag: "div",
-                attrs: {
-                  class: "min-w-50"
-                },
-                children: m.schema
-              }]
-            };
-          })
-        };
-      });
-      return t.push(he.value), t;
-    }), {
-      render: ge
-    } = V({
-      data: be
-    }), M = () => {
-      const t = !!r?.sideLeft && d.value < 1024, l = !!r?.sideRight && d.value < 1024, i = !r?.filter && y.value && d.value < 1024;
-      return !t && !l && !i ? null : e("div", {
-        class: ["flex gap-2"]
-      }, [t && e(s, {
-        class: "flex-none",
-        secondary: !0,
-        onClick: () => {
-          v.show = !v.show;
-        }
-      }, {
-        icon: () => e("div", {
-          class: "i-tabler:layout-sidebar-inactive size-4"
-        }, null)
-      }), l && e(s, {
-        class: "flex-none",
-        secondary: !0,
-        onClick: () => {
-          h.show = !h.show;
-        }
-      }, {
-        icon: () => e("div", {
-          class: "i-tabler:layout-sidebar-right-inactive size-4"
-        }, null)
-      }), i && e("div", {
-        class: "flex-none lg:hidden"
-      }, [e(s, {
-        secondary: !0,
-        onClick: () => {
-          x.value = !x.value;
-        }
-      }, {
-        icon: () => e("div", {
-          class: "i-tabler:filter size-4"
-        }, null)
-      })])]);
-    }, xe = () => e("div", {
-      class: ["flex gap-2 flex-row"]
-    }, [e("div", {
-      class: "flex lg:hidden"
-    }, [e(s, {
-      type: "primary",
-      secondary: !0,
-      onClick: w
-    }, {
-      icon: () => e("div", {
-        class: "i-tabler:search size-4"
-      }, null)
-    })]), e("div", {
-      class: ["hidden lg:flex gap-2"]
-    }, [e(s, {
-      type: "primary",
-      secondary: !0,
-      onClick: w
-    }, {
-      icon: () => e("div", {
-        class: "i-tabler:search size-4"
-      }, null),
-      default: () => c("components.button.search")
-    }), e(s, {
-      secondary: !0,
-      onClick: F
-    }, {
-      icon: () => e("div", {
-        class: "i-tabler:arrow-back-up size-4"
-      }, null),
-      default: () => c("components.button.reset")
-    }), e(s, {
-      secondary: !0,
-      onClick: () => u.onRefresh?.()
-    }, {
-      icon: () => e("div", {
-        class: "i-tabler:refresh size-4"
-      }, null)
-    })])]), I = (t) => {
-      const l = M(), i = t ? xe() : null;
-      return !l && !i ? null : e("div", {
-        class: "flex justify-between gap-2"
-      }, [l, i]);
-    };
-    L(() => a.tabs?.map((t) => t.value), () => {
-      const t = a.tabs?.map((l) => l.value) || [];
-      if (f.value?.tab === void 0) {
-        const l = t[0];
-        l !== void 0 && (f.value.tab = l);
-      }
-      k(() => b.value?.syncBarPosition());
-    }, {
-      deep: !0
-    }), L(() => d.value, () => {
-      k(() => {
-        b.value?.syncBarPosition();
-      });
-    });
-    const W = Fe(), ye = W.tabs.find((t) => t.path === W.current), we = n(() => {
-      const t = a.tabs?.map((i) => i.value) || [], l = f.value?.tab;
-      return t.includes(l) ? l : t[0];
-    });
-    return je(() => {
-      k(() => {
-        b.value?.syncBarPosition();
-      });
-    }), L(() => g.value, (t) => {
-      z(() => {
-        const i = t || {};
-        Object.keys(i).forEach((m) => {
-          const p = i[m];
-          p == null || p === "" ? delete o[m] : o[m] = p;
-        });
-      }) && O(!0);
-    }, {
-      deep: !0
-    }), () => e(Me, {
-      actions: a.actions,
-      scrollbar: !1
-    }, {
-      sideLeft: () => r?.sideLeft && d.value >= 1024 ? r?.sideLeft?.() : void 0,
-      sideRight: () => r?.sideRight && d.value >= 1024 ? r?.sideRight?.() : void 0,
-      default: () => e("div", {
-        class: ["flex flex-col h-full relative", y.value && "gap-3"]
-      }, [e("div", {
-        class: ["flex gap-2 justify-between flex-row", y.value && "border-b border-muted"]
-      }, [e("div", {
-        class: "relative top-1.5px"
-      }, [!a.tabs && e("div", {
-        class: "pb-4 pt-2 text-base"
-      }, [ye?.label]), a.tabs && e(Be, {
-        ref: b,
-        type: "bar",
-        size: "small",
-        style: {
-          "--n-tab-padding": "5px 20px 15px 20px",
-          "--n-tab-gap": "20px"
-        },
-        "default-value": a.tabs?.[0]?.value || "",
-        value: we.value,
-        onUpdateValue: (t) => {
-          f.value.tab = t, o.tab = t, k(() => b.value?.syncBarPosition());
-        }
-      }, {
-        default: () => [a.tabs?.map((t) => e(Le, {
-          name: t.value,
-          tab: t.label
-        }, null))]
-      })]), e("div", {
-        class: "flex gap-2 justify-end pb-2"
-      }, [r.actions?.(), a.actions?.length > 0 && Y({
-        type: d.value < 1024 ? "dropdown" : "button",
-        items: a.actions
-      })])]), y.value ? r.filter ? r.filter({
-        filter: f.value,
-        filterReactive: g.value,
-        onSearch: w,
-        onReset: F
-      }) : a.filterType === "multi" && d.value >= 1024 ? e("div", {
-        class: "flex flex-col gap-3"
-      }, [(d.value >= 1024 || x.value) && e("div", {
-        class: "flex flex-col gap-3 w-full"
-      }, [e("div", {
-        key: T.value,
-        class: "flex flex-col gap-3"
-      }, [K(ge)])]), I(!1)]) : e("div", {
-        class: "flex gap-2 justify-between flex-col-reverse lg:flex-row"
-      }, [(d.value >= 1024 || x.value) && e("div", {
-        class: ["flex-1 flex flex-col lg:flex-row gap-2 flex-wrap"]
-      }, [e("div", {
-        key: T.value,
-        class: "contents"
-      }, [K(me)])]), I(!0)]) : M(), r?.header?.(), e("div", {
-        class: "flex-1 min-h-0"
-      }, [r?.default?.({
-        ...u,
-        width: de.value
-      })]), e("div", {
-        class: "flex justify-between"
-      }, [e("div", {
-        class: "flex items-center gap-0.5"
-      }, [r?.bottom?.(), r?.tools?.(), e(Ne, {
-        options: ue.value,
-        value: te.value,
-        onUpdateValue: (t) => {
-          _(t);
-        },
-        multiple: !0,
-        placement: "bottom-start",
-        trigger: "click"
-      }, {
-        default: () => [e(R, null, {
-          trigger: () => e(s, {
-            quaternary: !0,
-            circle: !0,
-            "icon-placement": "right"
-          }, {
-            icon: () => e("div", {
-              class: "i-tabler:columns size-4"
-            }, null)
-          }),
-          default: () => c("components.list.columnSetting")
-        })]
-      }), S.value.export && e(R, null, {
-        trigger: () => e(s, {
-          quaternary: !0,
-          circle: !0,
-          loading: ie.value,
-          onClick: se
-        }, {
-          icon: () => e("div", {
-            class: "i-tabler:database-export size-4"
-          }, null)
-        }),
-        default: () => c("components.button.export")
-      }), S.value.import && e(R, null, {
-        trigger: () => e(s, {
-          quaternary: !0,
-          circle: !0,
-          loading: oe.value,
-          onClick: ce
-        }, {
-          icon: () => e("div", {
-            class: "i-tabler:database-import size-4"
-          }, null)
-        }),
-        default: () => c("components.button.import")
-      }), S.value.refresh && e(R, null, {
-        trigger: () => e(s, {
-          quaternary: !0,
-          circle: !0,
-          onClick: ae
-        }, {
-          icon: () => le.value ? e(De, {
-            class: "size-4",
-            type: "circle",
-            percentage: U.value * 10,
-            strokeWidth: 20,
-            color: "rgba(var(--ui-color-primary))"
-          }, {
-            default: () => [e("span", {
-              class: "text-8px"
-            }, [U.value])]
-          }) : e("div", {
-            class: "i-tabler:refresh size-4"
-          }, null)
-        }),
-        default: () => c("components.button.autoRefresh")
-      })]), e("div", null, [a.pagination && e(Ee, ze(Z.value, {
-        simple: d.value < 768
-      }), {
-        prefix: () => e("div", null, [c("components.list.total", {
-          total: u.total.value || 0
-        })])
-      })])]), e(Ie, {
-        isLoading: u.isBatching.value,
-        onBatch: u.onBatch,
-        selecteds: E.value.checkedRowKeys,
-        number: E.value.checkedRowKeys?.length || 0 || 0,
-        group: [[{
-          icon: "i-tabler:x",
-          onClick: () => {
-            ee?.([]);
-          }
-        }], [{
-          label: c("components.button.export"),
-          icon: "i-tabler:file-export",
-          loading: re.value,
-          onClick: ne
-        }, ...a.batchOptions || []]]
-      }, null), e(J, {
-        show: v.show,
-        onUpdateShow: (t) => v.show = t,
-        autoFocus: !1,
-        placement: "left"
-      }, {
-        default: () => [e(G, {
-          title: a.sideLeftTitle || c("components.button.sideLeft"),
-          onClose: () => v.show = !1,
-          scrollbar: !1
-        }, {
-          default: () => [r?.sideLeft?.()]
-        })]
-      }), e(J, {
-        show: h.show,
-        onUpdateShow: (t) => h.show = t,
-        autoFocus: !1,
-        placement: "right"
-      }, {
-        default: () => [e(G, {
-          title: a.sideRightTitle || c("components.button.sideRight"),
-          onClose: () => h.show = !1,
-          scrollbar: !1
-        }, {
-          default: () => [r?.sideRight?.()]
-        })]
-      })])
-    });
-  }
+import { useAction as e } from "../../hooks/action.js";
+import { useTable as t } from "../../hooks/table.js";
+import "../../hooks/index.js";
+import { DuxTableFilter as n } from "./filter.js";
+import { DuxPage as r } from "../../pages/page.js";
+import "../../pages/index.js";
+import { DuxDrawerPage as i } from "../drawer/drawerPage.js";
+import "../drawer/index.js";
+import { DuxTableTools as ee } from "./tools.js";
+import { computed as a, createVNode as o, defineComponent as s, h as c, mergeProps as te, nextTick as l, onMounted as ne, reactive as u, ref as d, toRaw as f, toRef as p, unref as m, watch as h } from "vue";
+import { useI18n as re, useJsonSchema as g, useTabStore as ie } from "@duxweb/dvha-core";
+import { NButton as _, NDrawer as v, NPagination as ae, NPopselect as oe, NProgress as se, NTab as ce, NTabs as le, NTooltip as y } from "naive-ui";
+import { useWindowSize as ue } from "@vueuse/core";
+import { cloneDeep as b, isEqual as x } from "lodash-es";
+const S = /* @__PURE__ */ s({
+	name: "DuxTableLayout",
+	props: {
+		path: {
+			type: String,
+			required: !0
+		},
+		filter: { type: Object },
+		filterSchema: { type: Array },
+		filterType: {
+			type: String,
+			default: "simple"
+		},
+		filterReactive: { type: Object },
+		filterNumber: {
+			type: Number,
+			default: 1
+		},
+		sorter: { type: Object },
+		columns: { type: Array },
+		pagination: {
+			type: [Boolean, Object],
+			default: !0
+		},
+		tabs: { type: Array },
+		actions: {
+			type: Array,
+			default: () => []
+		},
+		tools: { type: Object },
+		sideLeftTitle: {
+			type: String,
+			default: ""
+		},
+		sideRightTitle: {
+			type: String,
+			default: ""
+		},
+		batchOptions: { type: Array },
+		hookTableProps: { type: Object }
+	},
+	setup(s, { slots: S, expose: de }) {
+		let C = p(s, "filter", {}), fe = p(s, "sorter", {}), w = a(() => s.filterReactive || {}), pe = p(s, "columns", []), { t: T } = re(), { renderAction: me } = e(), E = u({ ...C.value || {} }), D = t({
+			...s.hookTableProps,
+			path: s.path,
+			filters: E,
+			sorters: fe.value,
+			columns: pe,
+			pagination: s.pagination
+		});
+		de(D);
+		let { columns: O, tablePagination: he, table: k, onUpdateColumnSelected: ge, onUpdateChecked: _e, columnSelected: ve, autoRefetch: A, autoCountdown: j, onAutoRefetch: M, isExporting: N, isExportingRows: P, isImporting: F, onExport: ye, onExportRows: be, onImport: xe } = D, Se = a(() => O.value.filter((e) => "title" in e && "key" in e).map((e) => ({
+			label: e.title,
+			value: e.key
+		}))), { width: I } = ue(), Ce = a(() => O.value.reduce((e, t) => e + (Number(t?.width) || Number(t?.minWidth) || 110), 0)), L = u({ show: !1 }), R = u({ show: !1 }), z = d(!1), we = a(() => {
+			let e = m(s.filterSchema);
+			return Array.isArray(e) ? e : [];
+		}), B = a(() => we.value.map((e, t) => {
+			let n = (Array.isArray(e) ? e : [e]).map((e, n) => {
+				let { label: r, ...i } = e || {};
+				return {
+					key: `filter-node-${t}-${n}`,
+					label: r ?? e?.title ?? "",
+					schema: i
+				};
+			});
+			return {
+				key: `filter-row-${t}`,
+				nodes: n
+			};
+		})), V = a(() => B.value.some((e) => e.nodes.some((e) => Object.keys(e.schema || {}).length > 0))), H = a(() => !!S.filter || V.value), Te = a(() => B.value.flatMap((e) => e.nodes.map((e) => ({
+			tag: n,
+			attrs: { label: e.label },
+			children: e.schema
+		})))), { render: Ee } = g({ data: a(() => Te.value) }), U = a(() => ({
+			import: !1,
+			export: !0,
+			refresh: !0,
+			...s.tools
+		})), W = d(0), G = d(null), K = (e) => b(f(e) || {}), De = () => b(f(E) || {}), q = (e) => {
+			let t = De();
+			return e(), !x(t, f(E) || {});
+		}, J = (e) => {
+			if (e) {
+				D.page?.value !== 1 && D.onUpdatePage?.(1);
+				return;
+			}
+			D.onRefresh?.();
+		}, Y = () => {
+			J(q(() => {
+				Object.keys(E).forEach((e) => {
+					delete E[e];
+				}), Object.assign(E, K(C.value)), Object.assign(E, K(w.value));
+			}));
+		}, X = () => {
+			let e = C.value?.tab;
+			Object.keys(C.value || {}).forEach((e) => {
+				e !== "tab" && delete C.value[e];
+			}), J(q(() => {
+				Object.keys(E).forEach((e) => {
+					delete E[e];
+				}), e !== void 0 && (E.tab = e), Object.assign(E, K(w.value));
+			})), W.value++;
+		}, Oe = a(() => ({
+			tag: "div",
+			attrs: { class: "flex flex-wrap gap-2 items-center w-full" },
+			children: [{
+				tag: "div",
+				attrs: { class: "text-right text-sm text-muted w-24 px-1" }
+			}, {
+				tag: "div",
+				attrs: { class: "flex flex-wrap gap-2 flex-1" },
+				children: [
+					{
+						tag: _,
+						attrs: {
+							type: "primary",
+							secondary: !0,
+							onClick: Y
+						},
+						slots: {
+							icon: () => o("div", { class: "i-tabler:search size-4" }, null),
+							default: () => T("components.button.search")
+						}
+					},
+					{
+						tag: _,
+						attrs: {
+							secondary: !0,
+							onClick: X
+						},
+						slots: {
+							icon: () => o("div", { class: "i-tabler:arrow-back-up size-4" }, null),
+							default: () => T("components.button.reset")
+						}
+					},
+					{
+						tag: _,
+						attrs: {
+							secondary: !0,
+							onClick: () => D.onRefresh?.()
+						},
+						slots: { icon: () => o("div", { class: "i-tabler:refresh size-4" }, null) }
+					}
+				]
+			}]
+		})), { render: ke } = g({ data: a(() => {
+			if (!V.value) return [];
+			let e = B.value.map((e) => {
+				let t = e.nodes.length > 1;
+				return {
+					tag: "div",
+					attrs: {
+						class: "flex flex-wrap gap-2 w-full items-start",
+						"data-filter-row": e.key
+					},
+					children: e.nodes.map((e) => {
+						let n = e.label;
+						return {
+							tag: "div",
+							attrs: { class: t ? "flex items-start gap-2" : "flex items-start gap-2 w-full" },
+							children: [n ? {
+								tag: "div",
+								attrs: { class: "w-24 text-right text-sm text-muted px-1 flex-none pt-1.5" },
+								children: n
+							} : {
+								tag: "div",
+								attrs: { class: "w-24 flex-none" }
+							}, {
+								tag: "div",
+								attrs: { class: "min-w-50" },
+								children: e.schema
+							}]
+						};
+					})
+				};
+			});
+			return e.push(Oe.value), e;
+		}) }), Z = () => {
+			let e = !!S?.sideLeft && I.value < 1024, t = !!S?.sideRight && I.value < 1024, n = !S?.filter && H.value && I.value < 1024;
+			return !e && !t && !n ? null : o("div", { class: ["flex gap-2"] }, [
+				e && o(_, {
+					class: "flex-none",
+					secondary: !0,
+					onClick: () => {
+						L.show = !L.show;
+					}
+				}, { icon: () => o("div", { class: "i-tabler:layout-sidebar-inactive size-4" }, null) }),
+				t && o(_, {
+					class: "flex-none",
+					secondary: !0,
+					onClick: () => {
+						R.show = !R.show;
+					}
+				}, { icon: () => o("div", { class: "i-tabler:layout-sidebar-right-inactive size-4" }, null) }),
+				n && o("div", { class: "flex-none lg:hidden" }, [o(_, {
+					secondary: !0,
+					onClick: () => {
+						z.value = !z.value;
+					}
+				}, { icon: () => o("div", { class: "i-tabler:filter size-4" }, null) })])
+			]);
+		}, Ae = () => o("div", { class: ["flex gap-2 flex-row"] }, [o("div", { class: "flex lg:hidden" }, [o(_, {
+			type: "primary",
+			secondary: !0,
+			onClick: Y
+		}, { icon: () => o("div", { class: "i-tabler:search size-4" }, null) })]), o("div", { class: ["hidden lg:flex gap-2"] }, [
+			o(_, {
+				type: "primary",
+				secondary: !0,
+				onClick: Y
+			}, {
+				icon: () => o("div", { class: "i-tabler:search size-4" }, null),
+				default: () => T("components.button.search")
+			}),
+			o(_, {
+				secondary: !0,
+				onClick: X
+			}, {
+				icon: () => o("div", { class: "i-tabler:arrow-back-up size-4" }, null),
+				default: () => T("components.button.reset")
+			}),
+			o(_, {
+				secondary: !0,
+				onClick: () => D.onRefresh?.()
+			}, { icon: () => o("div", { class: "i-tabler:refresh size-4" }, null) })
+		])]), Q = (e) => {
+			let t = Z(), n = e ? Ae() : null;
+			return !t && !n ? null : o("div", { class: "flex justify-between gap-2" }, [t, n]);
+		};
+		h(() => s.tabs?.map((e) => e.value), () => {
+			let e = s.tabs?.map((e) => e.value) || [];
+			if (C.value?.tab === void 0) {
+				let t = e[0];
+				t !== void 0 && (C.value.tab = t);
+			}
+			l(() => G.value?.syncBarPosition());
+		}, { deep: !0 }), h(() => I.value, () => {
+			l(() => {
+				G.value?.syncBarPosition();
+			});
+		});
+		let $ = ie(), je = $.tabs.find((e) => e.path === $.current), Me = a(() => {
+			let e = s.tabs?.map((e) => e.value) || [], t = C.value?.tab;
+			return e.includes(t) ? t : e[0];
+		});
+		return ne(() => {
+			l(() => {
+				G.value?.syncBarPosition();
+			});
+		}), h(() => w.value, (e) => {
+			q(() => {
+				let t = e || {};
+				Object.keys(t).forEach((e) => {
+					let n = t[e];
+					n == null || n === "" ? delete E[e] : E[e] = n;
+				});
+			}) && J(!0);
+		}, { deep: !0 }), () => o(r, {
+			actions: s.actions,
+			scrollbar: !1
+		}, {
+			sideLeft: () => S?.sideLeft && I.value >= 1024 ? S?.sideLeft?.() : void 0,
+			sideRight: () => S?.sideRight && I.value >= 1024 ? S?.sideRight?.() : void 0,
+			default: () => o("div", { class: ["flex flex-col h-full relative", H.value && "gap-3"] }, [
+				o("div", { class: ["flex gap-2 justify-between flex-row", H.value && "border-b border-muted"] }, [o("div", { class: "relative top-1.5px" }, [!s.tabs && o("div", { class: "pb-4 pt-2 text-base" }, [je?.label]), s.tabs && o(le, {
+					ref: G,
+					type: "bar",
+					size: "small",
+					style: {
+						"--n-tab-padding": "5px 20px 15px 20px",
+						"--n-tab-gap": "20px"
+					},
+					"default-value": s.tabs?.[0]?.value || "",
+					value: Me.value,
+					onUpdateValue: (e) => {
+						C.value.tab = e, E.tab = e, l(() => G.value?.syncBarPosition());
+					}
+				}, { default: () => [s.tabs?.map((e) => o(ce, {
+					name: e.value,
+					tab: e.label
+				}, null))] })]), o("div", { class: "flex gap-2 justify-end pb-2" }, [S.actions?.(), s.actions?.length > 0 && me({
+					type: I.value < 1024 ? "dropdown" : "button",
+					items: s.actions
+				})])]),
+				H.value ? S.filter ? S.filter({
+					filter: C.value,
+					filterReactive: w.value,
+					onSearch: Y,
+					onReset: X
+				}) : s.filterType === "multi" && I.value >= 1024 ? o("div", { class: "flex flex-col gap-3" }, [(I.value >= 1024 || z.value) && o("div", { class: "flex flex-col gap-3 w-full" }, [o("div", {
+					key: W.value,
+					class: "flex flex-col gap-3"
+				}, [c(ke)])]), Q(!1)]) : o("div", { class: "flex gap-2 justify-between flex-col-reverse lg:flex-row" }, [(I.value >= 1024 || z.value) && o("div", { class: ["flex-1 flex flex-col lg:flex-row gap-2 flex-wrap"] }, [o("div", {
+					key: W.value,
+					class: "contents"
+				}, [c(Ee)])]), Q(!0)]) : Z(),
+				S?.header?.(),
+				o("div", { class: "flex-1 min-h-0" }, [S?.default?.({
+					...D,
+					width: Ce.value
+				})]),
+				o("div", { class: "flex justify-between" }, [o("div", { class: "flex items-center gap-0.5" }, [
+					S?.bottom?.(),
+					S?.tools?.(),
+					o(oe, {
+						options: Se.value,
+						value: ve.value,
+						onUpdateValue: (e) => {
+							ge(e);
+						},
+						multiple: !0,
+						placement: "bottom-start",
+						trigger: "click"
+					}, { default: () => [o(y, null, {
+						trigger: () => o(_, {
+							quaternary: !0,
+							circle: !0,
+							"icon-placement": "right"
+						}, { icon: () => o("div", { class: "i-tabler:columns size-4" }, null) }),
+						default: () => T("components.list.columnSetting")
+					})] }),
+					U.value.export && o(y, null, {
+						trigger: () => o(_, {
+							quaternary: !0,
+							circle: !0,
+							loading: N.value,
+							onClick: ye
+						}, { icon: () => o("div", { class: "i-tabler:database-export size-4" }, null) }),
+						default: () => T("components.button.export")
+					}),
+					U.value.import && o(y, null, {
+						trigger: () => o(_, {
+							quaternary: !0,
+							circle: !0,
+							loading: F.value,
+							onClick: xe
+						}, { icon: () => o("div", { class: "i-tabler:database-import size-4" }, null) }),
+						default: () => T("components.button.import")
+					}),
+					U.value.refresh && o(y, null, {
+						trigger: () => o(_, {
+							quaternary: !0,
+							circle: !0,
+							onClick: M
+						}, { icon: () => A.value ? o(se, {
+							class: "size-4",
+							type: "circle",
+							percentage: j.value * 10,
+							strokeWidth: 20,
+							color: "rgba(var(--ui-color-primary))"
+						}, { default: () => [o("span", { class: "text-8px" }, [j.value])] }) : o("div", { class: "i-tabler:refresh size-4" }, null) }),
+						default: () => T("components.button.autoRefresh")
+					})
+				]), o("div", null, [s.pagination && o(ae, te(he.value, { simple: I.value < 768 }), { prefix: () => o("div", null, [T("components.list.total", { total: D.total.value || 0 })]) })])]),
+				o(ee, {
+					isLoading: D.isBatching.value,
+					onBatch: D.onBatch,
+					selecteds: k.value.checkedRowKeys,
+					number: k.value.checkedRowKeys?.length || 0,
+					group: [[{
+						icon: "i-tabler:x",
+						onClick: () => {
+							_e?.([]);
+						}
+					}], [{
+						label: T("components.button.export"),
+						icon: "i-tabler:file-export",
+						loading: P.value,
+						onClick: be
+					}, ...s.batchOptions || []]]
+				}, null),
+				o(v, {
+					show: L.show,
+					onUpdateShow: (e) => L.show = e,
+					autoFocus: !1,
+					placement: "left"
+				}, { default: () => [o(i, {
+					title: s.sideLeftTitle || T("components.button.sideLeft"),
+					onClose: () => L.show = !1,
+					scrollbar: !1
+				}, { default: () => [S?.sideLeft?.()] })] }),
+				o(v, {
+					show: R.show,
+					onUpdateShow: (e) => R.show = e,
+					autoFocus: !1,
+					placement: "right"
+				}, { default: () => [o(i, {
+					title: s.sideRightTitle || T("components.button.sideRight"),
+					onClose: () => R.show = !1,
+					scrollbar: !1
+				}, { default: () => [S?.sideRight?.()] })] })
+			])
+		});
+	}
 });
-export {
-  rl as DuxTableLayout
-};
+export { S as DuxTableLayout };