vlite3 0.8.11 → 0.9.2

package/components/Screen/Screen.vue.js

@@ -1,40 +1,32 @@
-import { defineComponent as Re, useSlots as Ee, computed as n, ref as h, markRaw as H, provide as K, watch as J, resolveComponent as je, openBlock as a, createElementBlock as s, normalizeClass as N, createElementVNode as g, renderSlot as y, toDisplayString as p, createBlock as f, withCtx as u, createVNode as c, createCommentVNode as d, unref as x, resolveDynamicComponent as Q, Fragment as C, mergeProps as v, createTextVNode as S, renderList as Ae } from "vue";
-import Oe from "../Input.vue.js";
+import { defineComponent as ge, useSlots as ye, computed as n, ref as s, markRaw as we, provide as F, watch as R, openBlock as o, createElementBlock as m, normalizeClass as q, createVNode as w, createSlots as ke, withCtx as Q, renderSlot as d, createElementVNode as I, createBlock as p, createCommentVNode as c, isRef as be, unref as D, Fragment as M, resolveDynamicComponent as xe, mergeProps as A, toDisplayString as Ce } from "vue";
+import De from "../Input.vue.js";
 /* empty css            */
-import w from "../Button.vue.js";
-import F from "../Icon.vue.js";
-import Ne from "../Tooltip.vue.js";
-import X from "../Modal.vue.js";
-import Fe from "../ConfirmationModal.vue.js";
-import Me from "../Pagination/Pagination.vue.js";
-import Le from "../Empty/Empty.vue.js";
-import Ue from "./ScreenFilter.vue.js";
-import qe from "../Dropdown/Dropdown.vue.js";
-import ze from "../ExportData/ExportData.vue.js";
-import He from "../ImportData/ImportData.vue.js";
-import { usePersistentState as Ke } from "../../utils/usePersistentState.js";
-import { useVLiteConfig as Je } from "../../core/config.js";
-import { $t as r } from "../../utils/i18n.js";
-import { SCREEN_CONTEXT_KEY as Qe } from "../DataTable/types.js";
-const Xe = { class: "flex flex-col w-full space-y-8" }, Ye = { class: "flex flex-col shrink-0" }, Ge = {
-  key: 0,
-  class: "flex items-center! gap-2"
-}, We = { class: "text-fs-7.5 font-bold text-foreground" }, Ze = {
-  key: 0,
-  class: "text-sm text-gray-700 mt-1 md:max-w-[450px]"
-}, _e = { class: "flex flex-col sm:flex-row items-start sm:items-center gap-2.5 w-full justify-end" }, et = { class: "flex items-center gap-2 w-full sm:w-auto flex-1 md:flex-none justify-start sm:justify-end" }, tt = {
-  key: 1,
-  class: "flex items-center p-1 rounded-md border border-border shrink-0"
-}, lt = ["title"], at = ["title"], nt = {
+import O from "../Button.vue.js";
+import Pe from "../ConfirmationModal.vue.js";
+import Se from "../Pagination/Pagination.vue.js";
+import $e from "./ScreenFilter.vue.js";
+import Ie from "../ImportData/ImportData.vue.js";
+import { usePersistentState as Be } from "../../utils/usePersistentState.js";
+import { useVLiteConfig as Ve } from "../../core/config.js";
+import { $t as f } from "../../utils/i18n.js";
+import { SCREEN_CONTEXT_KEY as Te } from "../DataTable/types.js";
+import Fe from "./components/ScreenHeaderTitle.vue.js";
+import Re from "./components/ScreenViewToggle.vue.js";
+import qe from "./components/ScreenOptionsDropdown.vue.js";
+import Ae from "./components/ScreenAddAction.vue.js";
+import Ee from "./components/ScreenEmptyState.vue.js";
+import je from "./components/ScreenExportModal.vue.js";
+import Ue from "./components/ScreenQuickFilters.vue.js";
+const Ne = { class: "flex flex-col w-full space-y-8" }, Qe = { class: "flex flex-col sm:flex-row items-start sm:items-center gap-2.5 w-full justify-end" }, Me = { class: "flex items-center gap-2 w-full sm:w-auto flex-1 md:flex-none justify-start sm:justify-end" }, Oe = {
   key: 4,
   class: "w-full md:w-60! max-sm:order-last"
-}, ot = { class: "flex items-center gap-3 max-sm:w-full sm:w-auto max-sm:order-last" }, it = ["href", "target"], rt = ["href", "target"], st = {
+}, Ke = { class: "flex items-center gap-3 max-sm:w-full sm:w-auto max-sm:order-last" }, Le = {
   key: 4,
   class: "p-8 text-center text-muted-foreground border border-dashed border-border rounded-lg"
-}, dt = {
-  key: 2,
+}, ze = {
+  key: 3,
   class: "-mt-2"
-}, ct = { class: "px-1 py-1 text-sm" }, ut = { class: "font-medium mb-3 text-muted-foreground" }, ft = { class: "space-y-3" }, mt = { key: 4 }, Et = /* @__PURE__ */ Re({
+}, He = { key: 5 }, mt = /* @__PURE__ */ ge({
   __name: "Screen",
   props: {
     name: { default: "" },
@@ -79,128 +71,118 @@ const Xe = { class: "flex flex-col w-full space-y-8" }, Ye = { class: "flex flex
     showRefresh: { type: Boolean, default: !1 },
     containerClass: {},
     headerClass: {},
+    titleClass: {},
+    descriptionClass: {},
     viewProps: { default: () => ({}) },
-    canSelectRows: { type: Boolean, default: !0 }
+    hideSelectable: { type: Boolean, default: !1 },
+    hideDeleteBtn: { type: Boolean, default: !1 },
+    quickFilters: { default: () => [] },
+    quickFilterKey: { default: "status" },
+    defaultQuickFilter: {},
+    quickFilterVariant: { default: "line" }
   },
   emits: ["add", "delete"],
-  setup(t, { emit: ne }) {
-    const l = t, $ = Je(), Y = ne, R = Ee(), oe = n(() => l.name || l.title || "default-screen"), B = Ke(
-      `view-mode-${oe.value}`,
-      l.table || R.table ? "table" : "list"
-    ), k = h(""), b = h({}), G = h({ field: "", order: "" }), T = h(l.pageInfo?.currentPage || 1), M = h(l.pageInfo?.itemsPerPage || l.paginationProps?.itemsPerPage || 10), m = h([]), E = h([]), V = h(!1), j = n(
-      () => l.addComponent ? H(l.addComponent) : void 0
-    ), W = n(
-      () => l.addBtn?.modal ? H(l.addBtn.modal) : void 0
-    ), Z = n(() => {
+  setup(t, { emit: K }) {
+    const l = t, x = Ve(), E = K, P = ye(), L = n(() => l.name || l.title || "default-screen"), h = Be(
+      `view-mode-${L.value}`,
+      l.table || P.table ? "table" : "list"
+    ), g = s(""), u = s({}), j = s({ field: "", order: "" }), k = s(l.pageInfo?.currentPage || 1), B = s(l.pageInfo?.itemsPerPage || l.paginationProps?.itemsPerPage || 10), r = s([]), S = s([]), C = s(!1), y = s(
+      l.defaultQuickFilter !== void 0 ? l.defaultQuickFilter : l.quickFilters && l.quickFilters.length > 0 ? l.quickFilters[0].value : ""
+    ), z = n(() => l.quickFilters && l.quickFilters.length > 0), H = (e) => {
+      y.value = e, k.value = 1, v();
+    }, U = n(() => {
       let e;
-      return B.value === "table" ? e = l.table || !!R.table : e = l.list || !!R.list || !!R.grid, typeof e == "object" && e !== null ? H(e) : e;
-    }), ie = n(() => k.value && k.value.trim() !== "" ? !0 : b.value ? Object.keys(b.value).some(
-      (e) => b.value[e] !== "" && b.value[e] !== null && b.value[e] !== void 0
-    ) : !1), re = {
+      return h.value === "table" ? e = l.table || !!P.table : e = l.list || !!P.list || !!P.grid, typeof e == "object" && e !== null ? we(e) : e;
+    }), X = n(() => g.value && g.value.trim() !== "" ? !0 : u.value ? Object.keys(u.value).some(
+      (e) => u.value[e] !== "" && u.value[e] !== null && u.value[e] !== void 0
+    ) : !1), Y = {
       disableSearch: !0,
-      forceSelectable: l.canSelectRows,
+      forceSelectable: !l.hideSelectable,
       onTableChange: (e) => {
-        G.value = { field: e.sort.field, order: e.sort.order }, D();
+        j.value = { field: e.sort.field, order: e.sort.order }, v();
       }
     };
-    K(Qe, re), K("screen-selected-rows", m), K("screen-request-delete", (e) => I(e));
-    const I = (e) => {
-      E.value = e, V.value = !0;
-    }, se = () => {
-      Y("delete", E.value), V.value = !1, m.value = [];
-    }, de = (e) => {
-      Y("delete", e), m.value = [];
+    F(Te, Y), F("screen-selected-rows", r), F("screen-request-delete", (e) => b(e));
+    const b = (e) => {
+      S.value = e, C.value = !0;
+    }, G = () => {
+      E("delete", S.value), C.value = !1, r.value = [];
+    }, J = (e) => {
+      E("delete", e), r.value = [];
     };
-    J(
+    R(
       () => l.pageInfo?.currentPage,
       (e) => {
-        e && (T.value = e);
+        e && (k.value = e);
       }
-    ), J(
+    ), R(
       () => l.pageInfo?.itemsPerPage,
       (e) => {
-        e && (M.value = e);
+        e && (B.value = e);
       }
     );
-    let L = null;
-    J(k, () => {
-      L && clearTimeout(L), L = setTimeout(() => {
-        T.value = 1, D();
+    let V = null;
+    R(g, () => {
+      V && clearTimeout(V), V = setTimeout(() => {
+        k.value = 1, v();
       }, 300);
     });
-    const ce = (e) => {
-      T.value = e, D();
-    }, ue = (e) => {
-      M.value = e, T.value = 1, D();
-    }, D = () => {
-      l.refetch && l.refetch({
-        pagination: { page: T.value, limit: M.value },
-        search: k.value,
-        sort: { ...G.value },
-        filter: { ...b.value }
+    const W = (e) => {
+      k.value = e, v();
+    }, Z = (e) => {
+      B.value = e, k.value = 1, v();
+    }, v = () => {
+      if (!l.refetch) return;
+      const e = { ...u.value };
+      y.value !== "" && y.value !== null && y.value !== void 0 && (e[l.quickFilterKey] = y.value), l.refetch({
+        pagination: { page: k.value, limit: B.value },
+        search: g.value,
+        sort: { ...j.value },
+        filter: e
       });
-    }, fe = n(() => l.data && l.data.length > 0), _ = n(() => l.titleI18n ? r(l.titleI18n) : l.title), ee = n(
-      () => l.descriptionI18n ? r(l.descriptionI18n) : l.description
-    ), me = n(() => {
-      const e = r("vlite.screen.deleteSelected");
+    }, _ = n(() => l.data && l.data.length > 0), ee = n(() => {
+      const e = f("vlite.screen.deleteSelected");
       return e !== "vlite.screen.deleteSelected" ? e : "Delete Selected";
-    }), ve = n(() => {
-      const e = r("vlite.screen.listView");
-      return e !== "vlite.screen.listView" ? e : "List View";
-    }), he = n(() => {
-      const e = r("vlite.screen.tableView");
-      return e !== "vlite.screen.tableView" ? e : "Table View";
-    }), ge = n(() => {
-      const e = r("vlite.screen.refresh");
+    }), te = n(() => {
+      const e = f("vlite.screen.refresh");
       return e !== "vlite.screen.refresh" ? e : "Refresh";
-    }), pe = n(() => {
-      const e = r("vlite.screen.searchPlaceholder");
+    }), le = n(() => {
+      const e = f("vlite.screen.searchPlaceholder");
       return e !== "vlite.screen.searchPlaceholder" ? e : "Search...";
-    }), ye = n(() => {
-      const e = r("vlite.screen.confirmDeleteTitle");
+    }), ae = n(() => {
+      const e = f("vlite.screen.confirmDeleteTitle");
       return e !== "vlite.screen.confirmDeleteTitle" ? e : "Confirm Deletion";
-    }), xe = n(() => {
-      const e = r("vlite.screen.confirmDeleteDesc", { count: E.value.length });
-      return e !== "vlite.screen.confirmDeleteDesc" ? e : `Are you sure you want to delete the selected ${E.value.length > 1 ? "items" : "item"}?`;
-    }), we = n(() => {
-      const e = r("vlite.screen.confirmDeleteBtn");
+    }), ie = n(() => {
+      const e = f("vlite.screen.confirmDeleteDesc", { count: S.value.length });
+      return e !== "vlite.screen.confirmDeleteDesc" ? e : `Are you sure you want to delete the selected ${S.value.length > 1 ? "items" : "item"}?`;
+    }), ne = n(() => {
+      const e = f("vlite.screen.confirmDeleteBtn");
       return e !== "vlite.screen.confirmDeleteBtn" ? e : "Delete";
-    }), be = n(() => {
-      const e = r("vlite.screen.cancelBtn");
+    }), oe = n(() => {
+      const e = f("vlite.screen.cancelBtn");
       return e !== "vlite.screen.cancelBtn" ? e : "Cancel";
-    }), Be = n(() => {
-      const e = r("vlite.screen.missingView");
+    }), re = n(() => {
+      const e = f("vlite.screen.missingView");
       return e !== "vlite.screen.missingView" ? e : "Please provide a `:list` or `:table` component or slot.";
-    }), P = n(() => {
-      if (l.addBtn?.labelI18n) return r(l.addBtn.labelI18n);
-      if (l.addBtn?.label) return l.addBtn.label;
-      const e = r("vlite.screen.addNew");
-      return e !== "vlite.screen.addNew" ? e : "Add New";
-    }), te = n(
+    }), N = n(
       () => l.exportSchema && l.exportSchema.length > 0 && l.exportProps !== !1 || l.importSchema && l.importSchema.length > 0 && l.importProps !== !1
-    ), U = n(() => {
-      const e = r("vlite.screen.exportData");
-      return e !== "vlite.screen.exportData" ? e : "Export Data";
-    }), le = n(() => {
-      const e = r("vlite.screen.importData");
+    ), se = n(() => {
+      const e = f("vlite.screen.importData");
       return e !== "vlite.screen.importData" ? e : "Import Data";
-    }), ke = n(() => {
-      const e = [];
-      return l.exportProps !== !1 && e.push({ value: "export", label: U.value, icon: "lucide:download" }), l.importProps !== !1 && e.push({ value: "import", label: le.value, icon: "lucide:upload" }), e;
-    }), q = h(null), De = h(null), A = h(!1), z = h(!1), Pe = (e) => {
-      e.value === "export" ? A.value = !0 : e.value === "import" && (z.value = !0);
-    }, Ce = n(
+    }), de = s(null), $ = s(!1), T = s(!1), ce = (e) => {
+      e.value === "export" ? $.value = !0 : e.value === "import" && (T.value = !0);
+    }, ue = n(
       () => (l.exportSchema || []).map((e) => ({
         field: e.name || e.field,
         title: e.label || e.title || e.name || e.field
       }))
-    ), Se = n(
+    ), me = n(
       () => (l.importSchema || []).map((e) => ({
         field: e.name || e.field,
         title: e.label || e.title || e.name || e.field,
         required: e.required || !1
       }))
-    ), Ie = async (e) => $?.services?.importApi && l.importType ? await $.services.importApi(l.importType, e) : (console.warn(
+    ), fe = async (e) => x?.services?.importApi && l.importType ? await x.services.importApi(l.importType, e) : (console.warn(
       "VLite Screen: No importApi configured or no importType provided for generic import."
     ), {
       processed: e.data.length,
@@ -209,405 +191,227 @@ const Xe = { class: "flex flex-col w-full space-y-8" }, Ye = { class: "flex flex
       skipped: 0,
       failed: 0,
       errors: []
-    }), $e = () => D(), Te = n(
-      () => l.exportMode || $?.exportData?.mode || "frontend"
-    ), Ve = async (e) => {
-      $?.services?.exportApi && l.exportType ? await $.services.exportApi(l.exportType, {
+    }), ve = () => v(), pe = n(
+      () => l.exportMode || x?.exportData?.mode || "frontend"
+    ), he = async (e) => {
+      x?.services?.exportApi && l.exportType ? await x.services.exportApi(l.exportType, {
         format: e,
-        search: k.value,
-        filter: b.value
+        search: g.value,
+        filter: u.value
       }) : console.warn(
         "VLite Screen: No exportApi configured or no exportType provided for generic backend export."
       );
     };
-    return (e, i) => {
-      const ae = je("router-link");
-      return a(), s("div", Xe, [
-        t.customHeader ? y(e.$slots, "custom-header", { key: 1 }) : (a(), s("div", {
-          key: 0,
-          class: N([t.headerClass, "flex flex-col md:flex-row sm:items-start md:items-center justify-between gap-4"])
-        }, [
-          g("div", Ye, [
-            y(e.$slots, "title", {}, () => [
-              _.value ? (a(), s("div", Ge, [
-                g("h1", We, p(_.value), 1),
-                t.info || t.infoI18n ? (a(), f(Ne, {
-                  key: 0,
-                  content: t.info,
-                  "content-i18n": t.infoI18n,
-                  placement: "right"
-                }, {
-                  default: u(() => [
-                    c(F, {
-                      icon: "lucide:info",
-                      class: "w-[18px] h-[18px] mt-3! text-muted-foreground hover:text-foreground cursor-pointer transition-colors outline-none"
-                    })
-                  ]),
-                  _: 1
-                }, 8, ["content", "content-i18n"])) : d("", !0)
-              ])) : d("", !0)
+    return (e, i) => (o(), m("div", Ne, [
+      t.customHeader ? d(e.$slots, "custom-header", { key: 1 }) : (o(), m("div", {
+        key: 0,
+        class: q([t.headerClass, "flex flex-col md:flex-row sm:items-start md:items-center justify-between gap-4"])
+      }, [
+        w(Fe, {
+          title: t.title,
+          "title-i18n": t.titleI18n,
+          "title-class": t.titleClass,
+          description: t.description,
+          "description-i18n": t.descriptionI18n,
+          "description-class": t.descriptionClass,
+          info: t.info,
+          "info-i18n": t.infoI18n
+        }, ke({ _: 2 }, [
+          e.$slots.title ? {
+            name: "title",
+            fn: Q(() => [
+              d(e.$slots, "title")
             ]),
-            y(e.$slots, "description", {}, () => [
-              ee.value ? (a(), s("p", Ze, p(ee.value), 1)) : d("", !0)
-            ])
-          ]),
-          g("div", _e, [
-            g("div", et, [
-              m.value.length > 0 && t.canSelectRows ? (a(), f(w, {
-                key: 0,
-                variant: "outline",
-                class: "hover:bg-destructive/10 shrink-0 h-9! w-9!",
-                icon: "lucide:trash-2",
-                title: me.value,
-                onClick: i[0] || (i[0] = (o) => I(m.value))
-              }, null, 8, ["title"])) : d("", !0),
-              (t.table || e.$slots.table) && (t.list || e.$slots.list || e.$slots.grid) ? (a(), s("div", tt, [
-                g("button", {
-                  onClick: i[1] || (i[1] = (o) => B.value = "list"),
-                  class: N(["p-1.5 rounded", [
-                    x(B) === "list" ? "bg-secondary/85 dark:bg-secondary shadow-sm text-foreground" : "text-muted-foreground hover:text-foreground"
-                  ]]),
-                  title: ve.value
-                }, [
-                  c(F, {
-                    icon: "lucide:layout-grid",
-                    class: "w-4 h-4"
-                  })
-                ], 10, lt),
-                g("button", {
-                  onClick: i[2] || (i[2] = (o) => B.value = "table"),
-                  class: N(["p-1.5 rounded", [
-                    x(B) === "table" ? "bg-secondary/85 dark:bg-secondary shadow-sm text-foreground" : "text-muted-foreground hover:text-foreground"
-                  ]]),
-                  title: he.value
-                }, [
-                  c(F, {
-                    icon: "lucide:list",
-                    class: "w-4 h-4"
-                  })
-                ], 10, at)
-              ])) : d("", !0),
-              y(e.$slots, "before-search"),
-              t.showRefresh ? (a(), f(w, {
-                key: 2,
-                variant: "outline",
-                icon: "lucide:refresh-cw",
-                size: "lg",
-                class: "shrink-0 h-9! w-9!",
-                title: ge.value,
-                disabled: t.loading,
-                onClick: D
-              }, null, 8, ["title", "disabled"])) : d("", !0),
-              t.filterSchema && t.filterSchema.length > 0 ? (a(), f(Ue, {
-                key: 3,
-                schema: t.filterSchema,
-                type: t.filterType,
-                modelValue: b.value,
-                "onUpdate:modelValue": i[3] || (i[3] = (o) => b.value = o),
-                onChange: D
-              }, null, 8, ["schema", "type", "modelValue"])) : d("", !0),
-              t.canSearch ? (a(), s("div", nt, [
-                c(Oe, {
-                  lazy: "",
-                  modelValue: k.value,
-                  "onUpdate:modelValue": i[4] || (i[4] = (o) => k.value = o),
-                  icon: "lucide:search",
-                  placeholder: pe.value,
-                  variant: "outline",
-                  class: "bg-background w-full",
-                  "show-clear-button": !0
-                }, null, 8, ["modelValue", "placeholder"])
-              ])) : d("", !0)
+            key: "0"
+          } : void 0,
+          e.$slots.description ? {
+            name: "description",
+            fn: Q(() => [
+              d(e.$slots, "description")
             ]),
-            g("div", ot, [
-              y(e.$slots, "actions", {}, () => [
-                j.value ? (a(), f(Q(j.value), { key: 0 })) : t.canAdd ? (a(), s(C, { key: 1 }, [
-                  t.addBtn ? (a(), s(C, { key: 0 }, [
-                    t.addBtn.modal ? (a(), f(X, v({
-                      key: 0,
-                      body: W.value
-                    }, t.addBtn.modalProps, {
-                      refetch: t.refetch,
-                      data: t.data,
-                      triggerClass: "w-full",
-                      loading: t.loading
-                    }), {
-                      trigger: u(() => [
-                        c(w, v({
-                          class: "w-full",
-                          icon: t.addBtn.icon || "fluent:add-16-filled",
-                          variant: t.addBtn.variant || "primary"
-                        }, t.addBtn.buttonProps), {
-                          default: u(() => [
-                            S(p(P.value), 1)
-                          ]),
-                          _: 1
-                        }, 16, ["icon", "variant"])
-                      ]),
-                      _: 1
-                    }, 16, ["body", "refetch", "data", "loading"])) : t.addBtn.to ? (a(), f(ae, {
-                      key: 1,
-                      to: t.addBtn.to,
-                      class: "inline-flex w-full sm:w-auto"
-                    }, {
-                      default: u(() => [
-                        c(w, v({
-                          class: "w-full",
-                          icon: t.addBtn.icon || "fluent:add-16-filled",
-                          variant: t.addBtn.variant || "primary"
-                        }, t.addBtn.buttonProps), {
-                          default: u(() => [
-                            S(p(P.value), 1)
-                          ]),
-                          _: 1
-                        }, 16, ["icon", "variant"])
-                      ]),
-                      _: 1
-                    }, 8, ["to"])) : t.addBtn.href ? (a(), s("a", {
-                      key: 2,
-                      href: t.addBtn.href,
-                      target: t.addBtn.target,
-                      class: "inline-flex w-full sm:w-auto"
-                    }, [
-                      c(w, v({
-                        class: "w-full",
-                        icon: t.addBtn.icon || "fluent:add-16-filled",
-                        variant: t.addBtn.variant || "primary"
-                      }, t.addBtn.buttonProps), {
-                        default: u(() => [
-                          S(p(P.value), 1)
-                        ]),
-                        _: 1
-                      }, 16, ["icon", "variant"])
-                    ], 8, it)) : (a(), f(w, v({
-                      key: 3,
-                      class: "w-full sm:w-auto",
-                      icon: t.addBtn.icon || "fluent:add-16-filled",
-                      variant: t.addBtn.variant || "primary"
-                    }, t.addBtn.buttonProps, {
-                      onClick: i[5] || (i[5] = (o) => t.addBtn.onClick ? t.addBtn.onClick() : e.$emit("add"))
-                    }), {
-                      default: u(() => [
-                        S(p(P.value), 1)
-                      ]),
-                      _: 1
-                    }, 16, ["icon", "variant"]))
-                  ], 64)) : d("", !0)
-                ], 64)) : d("", !0)
-              ]),
-              te.value ? (a(), f(qe, {
-                key: 0,
-                closeOnSelect: "",
-                position: "bottom-end",
-                options: ke.value,
-                onOnSelect: Pe
-              }, {
-                trigger: u(() => [
-                  c(w, {
-                    variant: "outline",
-                    icon: "lucide:more-vertical",
-                    class: "px-2!",
-                    title: x(r)("vlite.screen.moreOptions") !== "vlite.screen.moreOptions" ? x(r)("vlite.screen.moreOptions") : "More Options"
-                  }, null, 8, ["title"])
-                ]),
-                _: 1
-              }, 8, ["options"])) : d("", !0),
-              y(e.$slots, "after-add")
-            ])
-          ])
-        ], 2)),
-        y(e.$slots, "sub-header"),
-        g("div", {
-          class: N(["flex-1 w-full relative", t.containerClass])
-        }, [
-          !fe.value && !t.loading ? y(e.$slots, "empty", { key: 0 }, () => [
-            c(x(Le), {
-              title: t.emptyTitle,
-              titleI18n: t.emptyTitleI18n,
-              description: t.emptyDescription,
-              descriptionI18n: t.emptyDescriptionI18n,
-              icon: t.emptyIcon
-            }, {
-              action: u(() => [
-                ie.value ? d("", !0) : (a(), s(C, { key: 0 }, [
-                  j.value ? (a(), f(Q(j.value), { key: 0 })) : t.canAdd ? (a(), s(C, { key: 1 }, [
-                    t.addBtn ? (a(), s(C, { key: 0 }, [
-                      t.addBtn.modal ? (a(), f(X, v({
-                        key: 0,
-                        body: W.value
-                      }, t.addBtn.modalProps), {
-                        trigger: u(() => [
-                          c(w, v({
-                            icon: t.addBtn.icon || "fluent:add-16-filled",
-                            variant: "secondary",
-                            rounded: "full",
-                            class: "px-6!"
-                          }, t.addBtn.buttonProps), {
-                            default: u(() => [
-                              S(p(P.value), 1)
-                            ]),
-                            _: 1
-                          }, 16, ["icon"])
-                        ]),
-                        _: 1
-                      }, 16, ["body"])) : t.addBtn.to ? (a(), f(ae, {
-                        key: 1,
-                        to: t.addBtn.to,
-                        class: "inline-flex"
-                      }, {
-                        default: u(() => [
-                          c(w, v({
-                            icon: t.addBtn.icon || "fluent:add-16-filled",
-                            variant: "secondary"
-                          }, t.addBtn.buttonProps), {
-                            default: u(() => [
-                              S(p(P.value), 1)
-                            ]),
-                            _: 1
-                          }, 16, ["icon"])
-                        ]),
-                        _: 1
-                      }, 8, ["to"])) : t.addBtn.href ? (a(), s("a", {
-                        key: 2,
-                        href: t.addBtn.href,
-                        target: t.addBtn.target,
-                        class: "inline-flex"
-                      }, [
-                        c(w, v({
-                          icon: t.addBtn.icon || "lucide:plus",
-                          variant: "secondary"
-                        }, t.addBtn.buttonProps), {
-                          default: u(() => [
-                            S(p(P.value), 1)
-                          ]),
-                          _: 1
-                        }, 16, ["icon"])
-                      ], 8, rt)) : d("", !0)
-                    ], 64)) : d("", !0)
-                  ], 64)) : d("", !0)
-                ], 64))
-              ]),
-              _: 1
-            }, 8, ["title", "titleI18n", "description", "descriptionI18n", "icon"])
-          ]) : (a(), s(C, { key: 1 }, [
-            x(B) === "table" && e.$slots.table ? y(e.$slots, "table", {
+            key: "1"
+          } : void 0
+        ]), 1032, ["title", "title-i18n", "title-class", "description", "description-i18n", "description-class", "info", "info-i18n"]),
+        I("div", Qe, [
+          I("div", Me, [
+            r.value.length > 0 && !t.hideSelectable && !t.hideDeleteBtn ? (o(), p(O, {
               key: 0,
-              data: t.data,
-              loading: t.loading,
-              selectedRows: m.value,
-              delete: I,
-              updateSelectedRows: (o) => m.value = o
-            }) : x(B) === "list" && e.$slots.list ? y(e.$slots, "list", {
+              variant: "outline",
+              class: "hover:bg-destructive/10 shrink-0 h-9! w-9!",
+              icon: "lucide:trash-2",
+              title: ee.value,
+              onClick: i[0] || (i[0] = (a) => b(r.value))
+            }, null, 8, ["title"])) : c("", !0),
+            (t.table || e.$slots.table) && (t.list || e.$slots.list || e.$slots.grid) ? (o(), p(Re, {
               key: 1,
-              data: t.data,
-              loading: t.loading,
-              selectedRows: m.value,
-              delete: I,
-              updateSelectedRows: (o) => m.value = o
-            }) : x(B) === "list" && e.$slots.grid ? y(e.$slots, "grid", {
+              modelValue: D(h),
+              "onUpdate:modelValue": i[1] || (i[1] = (a) => be(h) ? h.value = a : null)
+            }, null, 8, ["modelValue"])) : c("", !0),
+            d(e.$slots, "before-search"),
+            t.showRefresh ? (o(), p(O, {
               key: 2,
-              data: t.data,
-              loading: t.loading,
-              selectedRows: m.value,
-              delete: I,
-              updateSelectedRows: (o) => m.value = o
-            }) : Z.value ? (a(), f(Q(Z.value), v({
+              variant: "outline",
+              icon: "lucide:refresh-cw",
+              size: "lg",
+              class: "shrink-0 h-9! w-9!",
+              title: te.value,
+              disabled: t.loading,
+              onClick: v
+            }, null, 8, ["title", "disabled"])) : c("", !0),
+            t.filterSchema && t.filterSchema.length > 0 ? (o(), p($e, {
               key: 3,
-              data: t.data,
-              loading: t.loading,
-              refetch: t.refetch,
-              selectedRows: m.value,
-              "onUpdate:selectedRows": i[6] || (i[6] = (o) => m.value = o),
-              delete: I,
-              onDelete: de
-            }, t.viewProps), null, 16, ["data", "loading", "refetch", "selectedRows"])) : (a(), s("div", st, p(Be.value), 1))
-          ], 64))
-        ], 2),
-        t.pagination && t.pageInfo && t.pageInfo.totalPages > 1 ? (a(), s("div", dt, [
-          c(x(Me), v({
-            "current-page": t.pageInfo.currentPage,
-            "total-pages": t.pageInfo.totalPages,
-            "total-items": t.pageInfo.totalItems
-          }, t.paginationProps, {
-            onChange: ce,
-            "onUpdate:itemsPerPage": ue
-          }), null, 16, ["current-page", "total-pages", "total-items"])
-        ])) : d("", !0),
-        c(Fe, {
-          show: V.value,
-          "onUpdate:show": i[7] || (i[7] = (o) => V.value = o),
-          title: ye.value,
-          description: xe.value,
-          "confirm-text": we.value,
-          "cancel-text": be.value,
-          variant: "danger",
-          onConfirm: se,
-          onCancel: i[8] || (i[8] = (o) => V.value = !1)
-        }, null, 8, ["show", "title", "description", "confirm-text", "cancel-text"]),
-        A.value ? (a(), f(X, {
-          key: 3,
-          show: A.value,
-          "onUpdate:show": i[9] || (i[9] = (o) => A.value = o),
-          title: U.value,
-          "max-width": "sm:max-w-[400px]"
-        }, {
-          default: u(({ close: o }) => [
-            c(ze, v({
-              ref_key: "exportDataRef",
-              ref: q,
-              data: t.data || [],
-              fields: Ce.value,
-              mode: Te.value,
-              "on-export": Ve
-            }, typeof t.exportProps == "object" ? t.exportProps : {}, {
-              title: U.value,
-              class: "hidden!"
-            }), null, 16, ["data", "fields", "mode", "title"]),
-            g("div", ct, [
-              g("h6", ut, p(x(r)("vlite.exportData.selectFormat") !== "vlite.exportData.selectFormat" ? x(r)("vlite.exportData.selectFormat") : "Select Export Format"), 1),
-              g("div", ft, [
-                (a(!0), s(C, null, Ae(q.value?.availableFormats || [
-                  { value: "excel", label: "Excel (.xlsx)", icon: "lucide:file-spreadsheet" },
-                  { value: "csv", label: "CSV (.csv)", icon: "lucide:file-text" },
-                  { value: "json", label: "JSON (.json)", icon: "lucide:file-json" }
-                ], (O) => (a(), f(w, {
-                  key: O.value,
-                  variant: "outline",
-                  class: "w-full flex items-center justify-start gap-3 h-12",
-                  onClick: (vt) => q.value?.exportData(O.value, o)
-                }, {
-                  default: u(() => [
-                    c(F, {
-                      icon: O.icon,
-                      class: "text-muted-foreground h-5 w-5"
-                    }, null, 8, ["icon"]),
-                    g("span", null, p(O.label), 1)
-                  ]),
-                  _: 2
-                }, 1032, ["onClick"]))), 128))
-              ])
-            ])
+              schema: t.filterSchema,
+              type: t.filterType,
+              modelValue: u.value,
+              "onUpdate:modelValue": i[2] || (i[2] = (a) => u.value = a),
+              onChange: v
+            }, null, 8, ["schema", "type", "modelValue"])) : c("", !0),
+            t.canSearch ? (o(), m("div", Oe, [
+              w(De, {
+                lazy: "",
+                modelValue: g.value,
+                "onUpdate:modelValue": i[3] || (i[3] = (a) => g.value = a),
+                icon: "lucide:search",
+                placeholder: le.value,
+                variant: "outline",
+                class: "bg-background w-full",
+                "show-clear-button": !0
+              }, null, 8, ["modelValue", "placeholder"])
+            ])) : c("", !0)
           ]),
-          _: 1
-        }, 8, ["show", "title"])) : d("", !0),
-        te.value ? (a(), s("div", mt, [
-          c(He, v({
-            show: z.value,
-            "onUpdate:show": i[10] || (i[10] = (o) => z.value = o),
-            ref_key: "importDataRef",
-            ref: De,
-            fields: Se.value,
-            processBatch: Ie,
-            onComplete: $e
-          }, typeof t.importProps == "object" ? t.importProps : {}, {
-            title: le.value,
-            class: "hidden!"
-          }), null, 16, ["show", "fields", "title"])
-        ])) : d("", !0)
-      ]);
-    };
+          I("div", Ke, [
+            d(e.$slots, "actions", {}, () => [
+              w(Ae, {
+                "can-add": t.canAdd,
+                "add-component": t.addComponent,
+                "add-btn": t.addBtn,
+                loading: t.loading,
+                data: t.data,
+                refetch: t.refetch,
+                onAdd: i[4] || (i[4] = (a) => e.$emit("add"))
+              }, null, 8, ["can-add", "add-component", "add-btn", "loading", "data", "refetch"])
+            ]),
+            N.value ? (o(), p(qe, {
+              key: 0,
+              "export-props": t.exportProps,
+              "import-props": t.importProps,
+              onSelect: ce
+            }, null, 8, ["export-props", "import-props"])) : c("", !0),
+            d(e.$slots, "after-add")
+          ])
+        ])
+      ], 2)),
+      d(e.$slots, "sub-header"),
+      z.value ? (o(), m("div", {
+        key: 2,
+        class: q(["-mt-1", t.quickFilterVariant == "line" ? "mb-1.5 sm:mb-1" : "mb-2"])
+      }, [
+        w(Ue, {
+          modelValue: y.value,
+          "onUpdate:modelValue": i[5] || (i[5] = (a) => y.value = a),
+          options: t.quickFilters,
+          variant: t.quickFilterVariant,
+          onChange: H
+        }, null, 8, ["modelValue", "options", "variant"])
+      ], 2)) : c("", !0),
+      I("div", {
+        class: q(["flex-1 w-full relative", t.containerClass])
+      }, [
+        !_.value && !t.loading ? (o(), m(M, { key: 0 }, [
+          e.$slots.empty ? d(e.$slots, "empty", { key: 0 }) : (o(), p(Ee, {
+            key: 1,
+            "empty-title": t.emptyTitle,
+            "empty-title-i18n": t.emptyTitleI18n,
+            "empty-description": t.emptyDescription,
+            "empty-description-i18n": t.emptyDescriptionI18n,
+            "empty-icon": t.emptyIcon,
+            "is-filtered": X.value,
+            "can-add": t.canAdd,
+            "add-component": t.addComponent,
+            "add-btn": t.addBtn
+          }, null, 8, ["empty-title", "empty-title-i18n", "empty-description", "empty-description-i18n", "empty-icon", "is-filtered", "can-add", "add-component", "add-btn"]))
+        ], 64)) : (o(), m(M, { key: 1 }, [
+          D(h) === "table" && e.$slots.table ? d(e.$slots, "table", {
+            key: 0,
+            data: t.data,
+            loading: t.loading,
+            selectedRows: r.value,
+            delete: b,
+            updateSelectedRows: (a) => r.value = a
+          }) : D(h) === "list" && e.$slots.list ? d(e.$slots, "list", {
+            key: 1,
+            data: t.data,
+            loading: t.loading,
+            selectedRows: r.value,
+            delete: b,
+            updateSelectedRows: (a) => r.value = a
+          }) : D(h) === "list" && e.$slots.grid ? d(e.$slots, "grid", {
+            key: 2,
+            data: t.data,
+            loading: t.loading,
+            selectedRows: r.value,
+            delete: b,
+            updateSelectedRows: (a) => r.value = a
+          }) : U.value ? (o(), p(xe(U.value), A({
+            key: 3,
+            data: t.data,
+            loading: t.loading,
+            refetch: t.refetch,
+            selectedRows: r.value,
+            "onUpdate:selectedRows": i[6] || (i[6] = (a) => r.value = a),
+            delete: b,
+            onDelete: J
+          }, t.viewProps), null, 16, ["data", "loading", "refetch", "selectedRows"])) : (o(), m("div", Le, Ce(re.value), 1))
+        ], 64))
+      ], 2),
+      t.pagination && t.pageInfo && t.pageInfo.totalPages > 1 ? (o(), m("div", ze, [
+        w(D(Se), A({
+          "current-page": t.pageInfo.currentPage,
+          "total-pages": t.pageInfo.totalPages,
+          "total-items": t.pageInfo.totalItems
+        }, t.paginationProps, {
+          onChange: W,
+          "onUpdate:itemsPerPage": Z
+        }), null, 16, ["current-page", "total-pages", "total-items"])
+      ])) : c("", !0),
+      w(Pe, {
+        show: C.value,
+        "onUpdate:show": i[7] || (i[7] = (a) => C.value = a),
+        title: ae.value,
+        description: ie.value,
+        "confirm-text": ne.value,
+        "cancel-text": oe.value,
+        variant: "danger",
+        onConfirm: G,
+        onCancel: i[8] || (i[8] = (a) => C.value = !1)
+      }, null, 8, ["show", "title", "description", "confirm-text", "cancel-text"]),
+      $.value ? (o(), p(je, {
+        key: 4,
+        show: $.value,
+        "onUpdate:show": i[9] || (i[9] = (a) => $.value = a),
+        data: t.data || [],
+        fields: ue.value,
+        mode: pe.value,
+        "export-props": t.exportProps,
+        "on-export": he
+      }, null, 8, ["show", "data", "fields", "mode", "export-props"])) : c("", !0),
+      N.value ? (o(), m("div", He, [
+        w(Ie, A({
+          show: T.value,
+          "onUpdate:show": i[10] || (i[10] = (a) => T.value = a),
+          ref_key: "importDataRef",
+          ref: de,
+          fields: me.value,
+          processBatch: fe,
+          onComplete: ve
+        }, typeof t.importProps == "object" ? t.importProps : {}, {
+          title: se.value,
+          class: "hidden!"
+        }), null, 16, ["show", "fields", "title"])
+      ])) : c("", !0)
+    ]));
   }
 });
 export {
-  Et as default
+  mt as default
 };