vlite3 1.2.1 → 1.2.4

package/components/Screen/Screen.vue.js

@@ -1,32 +1,24 @@
-import { defineComponent as Fe, useSlots as Be, computed as i, markRaw as T, ref as m, provide as U, watch as N, openBlock as r, createElementBlock as y, normalizeClass as M, createVNode as S, createSlots as Te, withCtx as X, renderSlot as d, normalizeProps as x, guardReactiveProps as $, createElementVNode as Q, createBlock as V, createCommentVNode as g, isRef as Re, unref as Y, mergeProps as h, Fragment as G, resolveDynamicComponent as qe, toDisplayString as Ee } from "vue";
-import Qe from "../Input.vue.js";
-/* empty css            */
-import J from "../Button.vue.js";
+import { defineComponent as Re, useSlots as qe, computed as n, markRaw as T, ref as p, provide as K, watch as L, openBlock as d, createElementBlock as h, normalizeClass as C, Fragment as A, createElementVNode as U, createVNode as V, createSlots as le, withCtx as b, renderSlot as s, normalizeProps as c, guardReactiveProps as w, mergeProps as y, createBlock as j, createCommentVNode as R, unref as O, resolveDynamicComponent as Ee, toDisplayString as Qe } from "vue";
 import Ae from "../ConfirmationModal.vue.js";
-import je from "../Pagination/Pagination.vue.js";
-import Ue from "./ScreenFilter.vue.js";
-import Ne from "../ImportData/ImportData.vue.js";
-import { usePersistentState as Me } from "../../utils/usePersistentState.js";
-import { useVLiteConfig as Ke } from "../../core/config.js";
-import { $t as u } from "../../utils/i18n.js";
-import { SCREEN_CONTEXT_KEY as Le } from "../DataTable/types.js";
-import Oe from "./components/ScreenHeaderTitle.vue.js";
-import ze from "./components/ScreenViewToggle.vue.js";
-import He from "./components/ScreenOptionsDropdown.vue.js";
-import Xe from "./components/ScreenAddAction.vue.js";
-import Ye from "./components/ScreenEmptyState.vue.js";
-import Ge from "./components/ScreenExportModal.vue.js";
-import Je from "./components/ScreenQuickFilters.vue.js";
-const We = { class: "flex flex-col w-full space-y-8" }, Ze = { class: "flex flex-col sm:flex-row items-start sm:items-center gap-2.5 w-full justify-end" }, _e = { class: "flex items-center gap-2 w-full sm:w-auto flex-1 md:flex-none justify-start sm:justify-end" }, et = {
-  key: 4,
-  class: "w-full md:w-60! max-sm:order-last"
-}, tt = { class: "flex items-center gap-3 max-sm:w-full sm:w-auto max-sm:order-last" }, lt = {
+import Ue from "../Pagination/Pagination.vue.js";
+import je from "../ImportData/ImportData.vue.js";
+import { usePersistentState as Ne } from "../../utils/usePersistentState.js";
+import { useVLiteConfig as He } from "../../core/config.js";
+import { $t as f } from "../../utils/i18n.js";
+import { SCREEN_CONTEXT_KEY as Me } from "../DataTable/types.js";
+import ie from "./components/ScreenHeaderTitle.vue.js";
+import Ke from "./components/ScreenEmptyState.vue.js";
+import Le from "./components/ScreenExportModal.vue.js";
+import ne from "./components/ScreenQuickFilters.vue.js";
+import se from "./components/ScreenToolbar.vue.js";
+import Oe from "../Stats/Stats.vue.js";
+const ze = { key: 0 }, Xe = {
   key: 6,
   class: "p-8 text-center text-muted-foreground border border-dashed border-border rounded-lg"
-}, at = {
-  key: 3,
+}, Ye = {
+  key: 2,
   class: "-mt-2"
-}, nt = { key: 5 }, Ct = /* @__PURE__ */ Fe({
+}, Ge = { key: 4 }, ct = /* @__PURE__ */ Re({
   __name: "Screen",
   props: {
     name: { default: "" },
@@ -39,6 +31,11 @@ const We = { class: "flex flex-col w-full space-y-8" }, Ze = { class: "flex flex
     pageInfo: {},
     data: { default: () => [] },
     loading: { type: Boolean, default: !1 },
+    variant: { default: "one" },
+    stats: { default: () => [] },
+    statsProps: { default: () => ({
+      variant: "transparent-header"
+    }) },
     refetch: {},
     paginationProps: { default: () => ({
       alignment: "between",
@@ -73,7 +70,12 @@ const We = { class: "flex flex-col w-full space-y-8" }, Ze = { class: "flex flex
     filterType: { default: "modal" },
     showRefresh: { type: Boolean, default: !0 },
     containerClass: {},
+    mainContainerClass: {},
     headerClass: {},
+    topHeaderClass: {},
+    bottomHeaderClass: {},
+    filtersContainerClass: {},
+    actionsContainerClass: {},
     titleClass: {},
     descriptionClass: {},
     viewProps: { default: () => ({}) },
@@ -87,155 +89,155 @@ const We = { class: "flex flex-col w-full space-y-8" }, Ze = { class: "flex flex
     skipEmptyViews: { default: () => [] }
   },
   emits: ["add", "delete"],
-  setup(t, { emit: W }) {
-    const l = t, I = Ke(), K = W, v = Be(), Z = i(() => l.name || l.title || "default-screen"), _ = i(() => {
-      const e = u("vlite.screen.tableView");
+  setup(t, { emit: oe }) {
+    const a = t, F = He(), z = oe, g = qe(), re = n(() => a.name || a.title || "default-screen"), de = n(() => {
+      const e = f("vlite.screen.tableView");
       return e !== "vlite.screen.tableView" ? e : "Table View";
-    }), ee = i(() => {
-      const e = u("vlite.screen.listView");
+    }), ce = n(() => {
+      const e = f("vlite.screen.listView");
       return e !== "vlite.screen.listView" ? e : "List View";
-    }), te = i(() => {
-      const e = u("vlite.screen.kanbanView");
+    }), ue = n(() => {
+      const e = f("vlite.screen.kanbanView");
       return e !== "vlite.screen.kanbanView" ? e : "Kanban View";
-    }), le = i(() => {
-      const e = u("vlite.screen.calendarView");
+    }), ve = n(() => {
+      const e = f("vlite.screen.calendarView");
       return e !== "vlite.screen.calendarView" ? e : "Calendar View";
-    }), D = i(() => {
-      if (l.views && l.views.length > 0)
-        return l.views.map((a) => ({
-          ...a,
-          component: typeof a.component == "object" && a.component !== null ? T(a.component) : a.component
+    }), S = n(() => {
+      if (a.views && a.views.length > 0)
+        return a.views.map((i) => ({
+          ...i,
+          component: typeof i.component == "object" && i.component !== null ? T(i.component) : i.component
         }));
       const e = [];
-      return (l.table || v.table) && e.push({
+      return (a.table || g.table) && e.push({
         key: "table",
-        component: l.table ? T(l.table) : null,
+        component: a.table ? T(a.table) : null,
         icon: "lucide:list",
-        label: _.value
-      }), (l.list || v.list || v.grid) && e.push({
+        label: de.value
+      }), (a.list || g.list || g.grid) && e.push({
         key: "list",
-        component: l.list ? T(l.list) : null,
+        component: a.list ? T(a.list) : null,
         icon: "lucide:layout-grid",
-        label: ee.value
-      }), (l.kanban || v.kanban) && e.push({
+        label: ce.value
+      }), (a.kanban || g.kanban) && e.push({
         key: "kanban",
-        component: l.kanban ? T(l.kanban) : null,
+        component: a.kanban ? T(a.kanban) : null,
         icon: "lucide:kanban",
-        label: te.value
-      }), (l.calendar || v.calendar) && e.push({
+        label: ue.value
+      }), (a.calendar || g.calendar) && e.push({
         key: "calendar",
-        component: l.calendar ? T(l.calendar) : null,
+        component: a.calendar ? T(a.calendar) : null,
         icon: "lucide:calendar",
-        label: le.value
+        label: ve.value
       }), e;
     });
-    i(() => D.value.map((e) => e.key));
-    const ae = i(() => D.value.length > 1), ne = i(() => D.value.length > 0 ? D.value[0].key : "table"), c = Me(`view-mode-${Z.value}`, ne.value), L = i(() => D.value.find((a) => a.key === c.value)?.component ?? null), F = i(() => c.value === "table" && v.table ? "table" : c.value === "list" && v.list ? "list" : c.value === "list" && v.grid ? "grid" : c.value === "kanban" && v.kanban ? "kanban" : c.value === "calendar" && v.calendar ? "calendar" : null), w = m(""), p = m({}), P = m({ field: "", order: "" }), C = m(l.pageInfo?.currentPage || 1), R = m(l.pageInfo?.itemsPerPage || l.paginationProps?.itemsPerPage || 10), o = m([]), q = m([]), B = m(!1), f = m(
-      l.defaultQuickFilter !== void 0 ? l.defaultQuickFilter : l.quickFilters && l.quickFilters.length > 0 ? l.quickFilters[0].value : ""
-    ), ie = i(() => !l.quickFilters || l.quickFilters.length === 0 ? !1 : l.skipQuickFilterViews && l.skipQuickFilterViews.length > 0 ? !l.skipQuickFilterViews.includes(c.value) : !0), oe = (e) => {
-      f.value = e, C.value = 1, b();
-    }, O = i(() => w.value && w.value.trim() !== "" || f.value !== "" && f.value !== null && f.value !== void 0 ? !0 : p.value ? Object.keys(p.value).some(
-      (e) => p.value[e] !== "" && p.value[e] !== null && p.value[e] !== void 0
-    ) : !1), z = i(() => l.data && l.data.length > 0), re = i(() => !l.skipEmptyViews || l.skipEmptyViews.length === 0 ? !1 : l.skipEmptyViews.includes(c.value)), s = i(() => ({
-      activeView: c.value,
-      searchQuery: w.value,
-      activeFilters: p.value,
-      activeQuickFilter: f.value,
-      activeSort: P.value,
-      page: C.value,
-      limit: R.value,
+    n(() => S.value.map((e) => e.key));
+    const X = n(() => S.value.length > 1), fe = n(() => S.value.length > 0 ? S.value[0].key : "table"), u = Ne(`view-mode-${re.value}`, fe.value), Y = n(() => S.value.find((i) => i.key === u.value)?.component ?? null), I = n(() => u.value === "table" && g.table ? "table" : u.value === "list" && g.list ? "list" : u.value === "list" && g.grid ? "grid" : u.value === "kanban" && g.kanban ? "kanban" : u.value === "calendar" && g.calendar ? "calendar" : null), k = p(""), m = p({}), $ = p({ field: "", order: "" }), P = p(a.pageInfo?.currentPage || 1), q = p(a.pageInfo?.itemsPerPage || a.paginationProps?.itemsPerPage || 10), o = p([]), E = p([]), B = p(!1), v = p(
+      a.defaultQuickFilter !== void 0 ? a.defaultQuickFilter : a.quickFilters && a.quickFilters.length > 0 ? a.quickFilters[0].value : ""
+    ), G = n(() => !a.quickFilters || a.quickFilters.length === 0 ? !1 : a.skipQuickFilterViews && a.skipQuickFilterViews.length > 0 ? !a.skipQuickFilterViews.includes(u.value) : !0), J = (e) => {
+      v.value = e, P.value = 1, D();
+    }, W = n(() => k.value && k.value.trim() !== "" || v.value !== "" && v.value !== null && v.value !== void 0 ? !0 : m.value ? Object.keys(m.value).some(
+      (e) => m.value[e] !== "" && m.value[e] !== null && m.value[e] !== void 0
+    ) : !1), Z = n(() => a.data && a.data.length > 0), me = n(() => !a.skipEmptyViews || a.skipEmptyViews.length === 0 ? !1 : a.skipEmptyViews.includes(u.value)), r = n(() => ({
+      activeView: u.value,
+      searchQuery: k.value,
+      activeFilters: m.value,
+      activeQuickFilter: v.value,
+      activeSort: $.value,
+      page: P.value,
+      limit: q.value,
       selectedRows: o.value,
-      isFiltered: O.value,
-      hasData: z.value,
-      loading: l.loading
-    })), se = {
-      forceSelectable: !l.hideSelectable,
+      isFiltered: W.value,
+      hasData: Z.value,
+      loading: a.loading
+    })), pe = {
+      forceSelectable: !a.hideSelectable,
       onTableChange: (e) => {
-        P.value = { field: e.sort.field, order: e.sort.order }, b();
+        $.value = { field: e.sort.field, order: e.sort.order }, D();
       }
     };
-    U(Le, se), U("screen-selected-rows", o), U("screen-request-delete", (e) => k(e));
-    const k = (e) => {
-      q.value = e, B.value = !0;
-    }, de = () => {
-      K("delete", q.value), B.value = !1, o.value = [];
-    }, ue = (e) => {
-      K("delete", e), o.value = [];
+    K(Me, pe), K("screen-selected-rows", o), K("screen-request-delete", (e) => x(e));
+    const x = (e) => {
+      E.value = e, B.value = !0;
+    }, he = () => {
+      z("delete", E.value), B.value = !1, o.value = [];
+    }, we = (e) => {
+      z("delete", e), o.value = [];
     };
-    N(
-      () => l.pageInfo?.currentPage,
+    L(
+      () => a.pageInfo?.currentPage,
       (e) => {
-        e && (C.value = e);
+        e && (P.value = e);
       }
-    ), N(
-      () => l.pageInfo?.itemsPerPage,
+    ), L(
+      () => a.pageInfo?.itemsPerPage,
       (e) => {
-        e && (R.value = e);
+        e && (q.value = e);
       }
     );
-    let A = null;
-    N(w, () => {
-      A && clearTimeout(A), A = setTimeout(() => {
-        C.value = 1, b();
+    let N = null;
+    L(k, () => {
+      N && clearTimeout(N), N = setTimeout(() => {
+        P.value = 1, D();
       }, 300);
     });
-    const ce = (e) => {
-      C.value = e, b();
-    }, me = (e) => {
-      R.value = e, C.value = 1, b();
-    }, b = () => {
-      if (!l.refetch) return;
-      const e = { ...p.value };
-      f.value !== "" && f.value !== null && f.value !== void 0 && (e[l.quickFilterKey] = f.value);
-      const a = P.value.field && P.value.order ? { field: P.value.field, order: P.value.order } : void 0, n = {
-        pagination: { page: C.value, limit: R.value },
-        search: w.value,
+    const ye = (e) => {
+      P.value = e, D();
+    }, ge = (e) => {
+      q.value = e, P.value = 1, D();
+    }, D = () => {
+      if (!a.refetch) return;
+      const e = { ...m.value };
+      v.value !== "" && v.value !== null && v.value !== void 0 && (e[a.quickFilterKey] = v.value);
+      const i = $.value.field && $.value.order ? { field: $.value.field, order: $.value.order } : void 0, l = {
+        pagination: { page: P.value, limit: q.value },
+        search: k.value,
         filter: e
       };
-      a && (n.sort = a), l.refetch(n);
-    }, fe = i(() => {
-      const e = u("vlite.screen.deleteSelected");
+      i && (l.sort = i), a.refetch(l);
+    }, _ = n(() => {
+      const e = f("vlite.screen.deleteSelected");
       return e !== "vlite.screen.deleteSelected" ? e : "Delete Selected";
-    }), ve = i(() => {
-      const e = u("vlite.screen.refresh");
+    }), ee = n(() => {
+      const e = f("vlite.screen.refresh");
       return e !== "vlite.screen.refresh" ? e : "Refresh";
-    }), pe = i(() => {
-      const e = u("vlite.screen.searchPlaceholder");
+    }), te = n(() => {
+      const e = f("vlite.screen.searchPlaceholder");
       return e !== "vlite.screen.searchPlaceholder" ? e : "Search...";
-    }), ge = i(() => {
-      const e = u("vlite.screen.confirmDeleteTitle");
+    }), ke = n(() => {
+      const e = f("vlite.screen.confirmDeleteTitle");
       return e !== "vlite.screen.confirmDeleteTitle" ? e : "Confirm Deletion";
-    }), he = i(() => {
-      const e = u("vlite.screen.confirmDeleteDesc", { count: q.value.length });
-      return e !== "vlite.screen.confirmDeleteDesc" ? e : `Are you sure you want to delete the selected ${q.value.length > 1 ? "items" : "item"}?`;
-    }), ye = i(() => {
-      const e = u("vlite.screen.confirmDeleteBtn");
+    }), be = n(() => {
+      const e = f("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"}?`;
+    }), xe = n(() => {
+      const e = f("vlite.screen.confirmDeleteBtn");
       return e !== "vlite.screen.confirmDeleteBtn" ? e : "Delete";
-    }), we = i(() => {
-      const e = u("vlite.screen.cancelBtn");
+    }), Ce = n(() => {
+      const e = f("vlite.screen.cancelBtn");
       return e !== "vlite.screen.cancelBtn" ? e : "Cancel";
-    }), ke = i(() => {
-      const e = u("vlite.screen.missingView");
+    }), Ve = n(() => {
+      const e = f("vlite.screen.missingView");
       return e !== "vlite.screen.missingView" ? e : "Please provide a `:list`, `:table`, or `:views` component/slot.";
-    }), H = i(
-      () => l.exportSchema && l.exportSchema.length > 0 && l.exportProps !== !1 || l.importSchema && l.importSchema.length > 0 && l.importProps !== !1
-    ), be = i(() => {
-      const e = u("vlite.screen.importData");
+    }), H = n(
+      () => a.exportSchema && a.exportSchema.length > 0 && a.exportProps !== !1 || a.importSchema && a.importSchema.length > 0 && a.importProps !== !1
+    ), De = n(() => {
+      const e = f("vlite.screen.importData");
       return e !== "vlite.screen.importData" ? e : "Import Data";
-    }), xe = m(null), E = m(!1), j = m(!1), Ve = (e) => {
-      e.value === "export" ? E.value = !0 : e.value === "import" && (j.value = !0);
-    }, Ce = i(
-      () => (l.exportSchema || []).map((e) => ({
+    }), Se = p(null), Q = p(!1), M = p(!1), ae = (e) => {
+      e.value === "export" ? Q.value = !0 : e.value === "import" && (M.value = !0);
+    }, Pe = n(
+      () => (a.exportSchema || []).map((e) => ({
         field: e.name || e.field,
         title: e.label || e.title || e.name || e.field
       }))
-    ), Se = i(
-      () => (l.importSchema || []).map((e) => ({
+    ), $e = n(
+      () => (a.importSchema || []).map((e) => ({
         field: e.name || e.field,
         title: e.label || e.title || e.name || e.field,
         required: e.required || !1
       }))
-    ), De = async (e) => I?.services?.importApi && l.importType ? await I.services.importApi(l.importType, e) : (console.warn(
+    ), Fe = async (e) => F?.services?.importApi && a.importType ? await F.services.importApi(a.importType, e) : (console.warn(
       "VLite Screen: No importApi configured or no importType provided for generic import."
     ), {
       processed: e.data.length,
@@ -244,242 +246,336 @@ const We = { class: "flex flex-col w-full space-y-8" }, Ze = { class: "flex flex
       skipped: 0,
       failed: 0,
       errors: []
-    }), Pe = () => b(), $e = i(
-      () => l.exportMode || I?.exportData?.mode || "frontend"
-    ), Ie = async (e) => {
-      I?.services?.exportApi && l.exportType ? await I.services.exportApi(l.exportType, {
+    }), Ie = () => D(), Be = n(
+      () => a.exportMode || F?.exportData?.mode || "frontend"
+    ), Te = async (e) => {
+      F?.services?.exportApi && a.exportType ? await F.services.exportApi(a.exportType, {
         format: e,
-        search: w.value,
-        filter: p.value
+        search: k.value,
+        filter: m.value
       }) : console.warn(
         "VLite Screen: No exportApi configured or no exportType provided for generic backend export."
       );
     };
-    return (e, a) => (r(), y("div", We, [
-      t.customHeader ? d(e.$slots, "custom-header", x(h({ key: 1 }, s.value))) : (r(), y("div", {
-        key: 0,
-        class: M([t.headerClass, "flex flex-col md:flex-row sm:items-start md:items-center justify-between gap-4"])
-      }, [
-        S(Oe, {
-          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
-        }, Te({ _: 2 }, [
-          e.$slots.title ? {
-            name: "title",
-            fn: X(() => [
-              d(e.$slots, "title", x($(s.value)))
+    return (e, i) => (d(), h("div", {
+      class: C(["flex flex-col w-full space-y-8", t.containerClass])
+    }, [
+      t.variant === "two" ? (d(), h(A, { key: 0 }, [
+        t.customHeader ? s(e.$slots, "custom-header", c(y({ key: 1 }, r.value))) : (d(), h("div", {
+          key: 0,
+          class: C([t.headerClass, "flex flex-col space-y-6"])
+        }, [
+          U("div", {
+            class: C([
+              "flex flex-col md:flex-row justify-between items-start md:items-center gap-4",
+              t.topHeaderClass
+            ])
+          }, [
+            V(ie, {
+              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
+            }, le({ _: 2 }, [
+              e.$slots.title ? {
+                name: "title",
+                fn: b(() => [
+                  s(e.$slots, "title", c(w(r.value)))
+                ]),
+                key: "0"
+              } : void 0,
+              e.$slots.description ? {
+                name: "description",
+                fn: b(() => [
+                  s(e.$slots, "description", c(w(r.value)))
+                ]),
+                key: "1"
+              } : void 0
+            ]), 1032, ["title", "title-i18n", "title-class", "description", "description-i18n", "description-class", "info", "info-i18n"]),
+            t.stats && t.stats.length > 0 ? (d(), h("div", ze, [
+              V(Oe, y({ items: t.stats }, t.statsProps), null, 16, ["items"])
+            ])) : s(e.$slots, "header-stats", { key: 1 })
+          ], 2),
+          U("div", {
+            class: C([
+              "flex flex-col lg:flex-row lg:items-center justify-between gap-4",
+              t.bottomHeaderClass
+            ])
+          }, [
+            U("div", {
+              class: C([
+                "flex-1 w-full flex items-center justify-start overflow-x-auto pt-1.5",
+                t.filtersContainerClass
+              ])
+            }, [
+              G.value ? (d(), j(ne, {
+                key: 0,
+                modelValue: v.value,
+                "onUpdate:modelValue": i[0] || (i[0] = (l) => v.value = l),
+                options: t.quickFilters,
+                variant: t.quickFilterVariant,
+                onChange: J
+              }, null, 8, ["modelValue", "options", "variant"])) : R("", !0)
+            ], 2),
+            V(se, {
+              class: C([
+                "flex items-center gap-2.5 max-sm:w-full sm:w-auto justify-end",
+                t.actionsContainerClass
+              ]),
+              "selected-rows": o.value,
+              "hide-selectable": t.hideSelectable,
+              "hide-delete-btn": t.hideDeleteBtn,
+              "txt-delete-selected": _.value,
+              "has-multiple-views": X.value,
+              "active-view": O(u),
+              "resolved-views": S.value,
+              "show-refresh": t.showRefresh,
+              loading: t.loading,
+              "txt-refresh": ee.value,
+              "filter-schema": t.filterSchema,
+              "filter-type": t.filterType,
+              "active-filters": m.value,
+              "can-search": t.canSearch,
+              "search-query": k.value,
+              "txt-search": te.value,
+              "can-add": t.canAdd,
+              "add-component": t.addComponent,
+              "add-btn": t.addBtn,
+              data: t.data,
+              refetch: t.refetch,
+              "has-export-or-import": H.value,
+              "export-props": t.exportProps,
+              "import-props": t.importProps,
+              "screen-state": r.value,
+              onDelete: x,
+              "onUpdate:activeView": i[1] || (i[1] = (l) => u.value = l),
+              "onUpdate:searchQuery": i[2] || (i[2] = (l) => k.value = l),
+              "onUpdate:activeFilters": i[3] || (i[3] = (l) => m.value = l),
+              onRefresh: D,
+              onAdd: i[4] || (i[4] = (l) => e.$emit("add")),
+              onSelectDropdown: ae
+            }, {
+              "before-search": b((l) => [
+                s(e.$slots, "before-search", c(w(l)))
+              ]),
+              actions: b((l) => [
+                s(e.$slots, "actions", c(w(l)))
+              ]),
+              "after-add": b((l) => [
+                s(e.$slots, "after-add", c(w(l)))
+              ]),
+              _: 3
+            }, 8, ["class", "selected-rows", "hide-selectable", "hide-delete-btn", "txt-delete-selected", "has-multiple-views", "active-view", "resolved-views", "show-refresh", "loading", "txt-refresh", "filter-schema", "filter-type", "active-filters", "can-search", "search-query", "txt-search", "can-add", "add-component", "add-btn", "data", "refetch", "has-export-or-import", "export-props", "import-props", "screen-state"])
+          ], 2)
+        ], 2)),
+        s(e.$slots, "sub-header", c(w(r.value)))
+      ], 64)) : (d(), h(A, { key: 1 }, [
+        t.customHeader ? s(e.$slots, "custom-header", c(y({ key: 1 }, r.value))) : (d(), h("div", {
+          key: 0,
+          class: C([t.headerClass, "flex flex-col md:flex-row sm:items-start md:items-center justify-between gap-4"])
+        }, [
+          V(ie, {
+            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
+          }, le({ _: 2 }, [
+            e.$slots.title ? {
+              name: "title",
+              fn: b(() => [
+                s(e.$slots, "title", c(w(r.value)))
+              ]),
+              key: "0"
+            } : void 0,
+            e.$slots.description ? {
+              name: "description",
+              fn: b(() => [
+                s(e.$slots, "description", c(w(r.value)))
+              ]),
+              key: "1"
+            } : void 0
+          ]), 1032, ["title", "title-i18n", "title-class", "description", "description-i18n", "description-class", "info", "info-i18n"]),
+          V(se, {
+            class: "flex flex-col sm:flex-row items-start sm:items-center gap-2.5 w-full justify-end",
+            "selected-rows": o.value,
+            "hide-selectable": t.hideSelectable,
+            "hide-delete-btn": t.hideDeleteBtn,
+            "txt-delete-selected": _.value,
+            "has-multiple-views": X.value,
+            "active-view": O(u),
+            "resolved-views": S.value,
+            "show-refresh": t.showRefresh,
+            loading: t.loading,
+            "txt-refresh": ee.value,
+            "filter-schema": t.filterSchema,
+            "filter-type": t.filterType,
+            "active-filters": m.value,
+            "can-search": t.canSearch,
+            "search-query": k.value,
+            "txt-search": te.value,
+            "can-add": t.canAdd,
+            "add-component": t.addComponent,
+            "add-btn": t.addBtn,
+            data: t.data,
+            refetch: t.refetch,
+            "has-export-or-import": H.value,
+            "export-props": t.exportProps,
+            "import-props": t.importProps,
+            "screen-state": r.value,
+            onDelete: x,
+            "onUpdate:activeView": i[5] || (i[5] = (l) => u.value = l),
+            "onUpdate:searchQuery": i[6] || (i[6] = (l) => k.value = l),
+            "onUpdate:activeFilters": i[7] || (i[7] = (l) => m.value = l),
+            onRefresh: D,
+            onAdd: i[8] || (i[8] = (l) => e.$emit("add")),
+            onSelectDropdown: ae
+          }, {
+            "before-search": b((l) => [
+              s(e.$slots, "before-search", c(w(l)))
             ]),
-            key: "0"
-          } : void 0,
-          e.$slots.description ? {
-            name: "description",
-            fn: X(() => [
-              d(e.$slots, "description", x($(s.value)))
+            actions: b((l) => [
+              s(e.$slots, "actions", c(w(l)))
             ]),
-            key: "1"
-          } : void 0
-        ]), 1032, ["title", "title-i18n", "title-class", "description", "description-i18n", "description-class", "info", "info-i18n"]),
-        Q("div", Ze, [
-          Q("div", _e, [
-            o.value.length > 0 && !t.hideSelectable && !t.hideDeleteBtn ? (r(), V(J, {
-              key: 0,
-              variant: "outline",
-              class: "hover:bg-destructive/10 shrink-0 h-9! w-9!",
-              icon: "lucide:trash-2",
-              title: fe.value,
-              onClick: a[0] || (a[0] = (n) => k(o.value))
-            }, null, 8, ["title"])) : g("", !0),
-            ae.value ? (r(), V(ze, {
-              key: 1,
-              modelValue: Y(c),
-              "onUpdate:modelValue": a[1] || (a[1] = (n) => Re(c) ? c.value = n : null),
-              views: D.value
-            }, null, 8, ["modelValue", "views"])) : g("", !0),
-            d(e.$slots, "before-search", x($(s.value))),
-            t.showRefresh ? (r(), V(J, {
-              key: 2,
-              variant: "outline",
-              icon: "lucide:refresh-cw",
-              size: "lg",
-              class: "shrink-0 h-9! w-9!",
-              title: ve.value,
-              disabled: t.loading,
-              onClick: b
-            }, null, 8, ["title", "disabled"])) : g("", !0),
-            t.filterSchema && t.filterSchema.length > 0 ? (r(), V(Ue, {
-              key: 3,
-              schema: t.filterSchema,
-              type: t.filterType,
-              modelValue: p.value,
-              "onUpdate:modelValue": a[2] || (a[2] = (n) => p.value = n),
-              onChange: b
-            }, null, 8, ["schema", "type", "modelValue"])) : g("", !0),
-            t.canSearch ? (r(), y("div", et, [
-              S(Qe, {
-                lazy: "",
-                modelValue: w.value,
-                "onUpdate:modelValue": a[3] || (a[3] = (n) => w.value = n),
-                icon: "lucide:search",
-                placeholder: pe.value,
-                variant: "outline",
-                class: "bg-background w-full",
-                "show-clear-button": !0
-              }, null, 8, ["modelValue", "placeholder"])
-            ])) : g("", !0)
-          ]),
-          Q("div", tt, [
-            d(e.$slots, "actions", x($(s.value)), () => [
-              S(Xe, {
-                "can-add": t.canAdd,
-                "add-component": t.addComponent,
-                "add-btn": t.addBtn,
-                loading: t.loading,
-                data: t.data,
-                refetch: t.refetch,
-                onAdd: a[4] || (a[4] = (n) => e.$emit("add"))
-              }, null, 8, ["can-add", "add-component", "add-btn", "loading", "data", "refetch"])
+            "after-add": b((l) => [
+              s(e.$slots, "after-add", c(w(l)))
             ]),
-            H.value ? (r(), V(He, {
-              key: 0,
-              "export-props": t.exportProps,
-              "import-props": t.importProps,
-              onSelect: Ve
-            }, null, 8, ["export-props", "import-props"])) : g("", !0),
-            d(e.$slots, "after-add", x($(s.value)))
-          ])
-        ])
-      ], 2)),
-      d(e.$slots, "sub-header", x($(s.value))),
-      ie.value ? (r(), y("div", {
-        key: 2,
-        class: M(["-mt-1 max-sm:hidden!", t.quickFilterVariant == "line" ? "mb-1.5 sm:mb-3" : "mb-3.5"])
-      }, [
-        S(Je, {
-          modelValue: f.value,
-          "onUpdate:modelValue": a[5] || (a[5] = (n) => f.value = n),
-          options: t.quickFilters,
-          variant: t.quickFilterVariant,
-          onChange: oe
-        }, null, 8, ["modelValue", "options", "variant"])
-      ], 2)) : g("", !0),
-      Q("div", {
-        class: M(["flex-1 w-full relative", t.containerClass])
+            _: 3
+          }, 8, ["selected-rows", "hide-selectable", "hide-delete-btn", "txt-delete-selected", "has-multiple-views", "active-view", "resolved-views", "show-refresh", "loading", "txt-refresh", "filter-schema", "filter-type", "active-filters", "can-search", "search-query", "txt-search", "can-add", "add-component", "add-btn", "data", "refetch", "has-export-or-import", "export-props", "import-props", "screen-state"])
+        ], 2)),
+        s(e.$slots, "sub-header", c(w(r.value))),
+        G.value ? (d(), h("div", {
+          key: 2,
+          class: C(["-mt-1 max-sm:hidden!", t.quickFilterVariant == "line" ? "mb-1.5 sm:mb-3" : "mb-3.5"])
+        }, [
+          V(ne, {
+            modelValue: v.value,
+            "onUpdate:modelValue": i[9] || (i[9] = (l) => v.value = l),
+            options: t.quickFilters,
+            variant: t.quickFilterVariant,
+            onChange: J
+          }, null, 8, ["modelValue", "options", "variant"])
+        ], 2)) : R("", !0)
+      ], 64)),
+      U("div", {
+        class: C(["flex-1 w-full relative", t.mainContainerClass])
       }, [
-        !z.value && !t.loading && !re.value ? (r(), y(G, { key: 0 }, [
-          e.$slots.empty ? d(e.$slots, "empty", x(h({ key: 0 }, s.value))) : (r(), V(Ye, {
+        !Z.value && !t.loading && !me.value ? (d(), h(A, { key: 0 }, [
+          e.$slots.empty ? s(e.$slots, "empty", c(y({ key: 0 }, r.value))) : (d(), j(Ke, {
             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": O.value,
+            "is-filtered": W.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)) : (r(), y(G, { key: 1 }, [
-          F.value === "table" ? d(e.$slots, "table", h({
+        ], 64)) : (d(), h(A, { key: 1 }, [
+          I.value === "table" ? s(e.$slots, "table", y({
             key: 0,
             data: t.data,
             loading: t.loading,
             selectedRows: o.value,
-            delete: k,
-            updateSelectedRows: (n) => o.value = n
-          }, s.value)) : F.value === "list" ? d(e.$slots, "list", h({
+            delete: x,
+            updateSelectedRows: (l) => o.value = l
+          }, r.value)) : I.value === "list" ? s(e.$slots, "list", y({
             key: 1,
             data: t.data,
             loading: t.loading,
             selectedRows: o.value,
-            delete: k,
-            updateSelectedRows: (n) => o.value = n
-          }, s.value)) : F.value === "grid" ? d(e.$slots, "grid", h({
+            delete: x,
+            updateSelectedRows: (l) => o.value = l
+          }, r.value)) : I.value === "grid" ? s(e.$slots, "grid", y({
             key: 2,
             data: t.data,
             loading: t.loading,
             selectedRows: o.value,
-            delete: k,
-            updateSelectedRows: (n) => o.value = n
-          }, s.value)) : F.value === "kanban" ? d(e.$slots, "kanban", h({
+            delete: x,
+            updateSelectedRows: (l) => o.value = l
+          }, r.value)) : I.value === "kanban" ? s(e.$slots, "kanban", y({
             key: 3,
             data: t.data,
             loading: t.loading,
             selectedRows: o.value,
-            delete: k,
-            updateSelectedRows: (n) => o.value = n
-          }, s.value)) : F.value === "calendar" ? d(e.$slots, "calendar", h({
+            delete: x,
+            updateSelectedRows: (l) => o.value = l
+          }, r.value)) : I.value === "calendar" ? s(e.$slots, "calendar", y({
             key: 4,
             data: t.data,
             loading: t.loading,
             selectedRows: o.value,
-            delete: k,
-            updateSelectedRows: (n) => o.value = n
-          }, s.value)) : L.value ? (r(), V(qe(L.value), h({
+            delete: x,
+            updateSelectedRows: (l) => o.value = l
+          }, r.value)) : Y.value ? (d(), j(Ee(Y.value), y({
             key: 5,
             data: t.data,
             loading: t.loading,
             refetch: t.refetch,
             selectedRows: o.value,
-            "onUpdate:selectedRows": a[6] || (a[6] = (n) => o.value = n),
-            delete: k,
-            onDelete: ue
-          }, t.viewProps), null, 16, ["data", "loading", "refetch", "selectedRows"])) : (r(), y("div", lt, Ee(ke.value), 1))
+            "onUpdate:selectedRows": i[10] || (i[10] = (l) => o.value = l),
+            delete: x,
+            onDelete: we
+          }, t.viewProps), null, 16, ["data", "loading", "refetch", "selectedRows"])) : (d(), h("div", Xe, Qe(Ve.value), 1))
         ], 64))
       ], 2),
-      t.pagination && t.pageInfo && t.pageInfo.totalPages > 1 ? (r(), y("div", at, [
-        S(Y(je), h({
+      t.pagination && t.pageInfo && t.pageInfo.totalPages > 1 ? (d(), h("div", Ye, [
+        V(O(Ue), y({
           "current-page": t.pageInfo.currentPage,
           "total-pages": t.pageInfo.totalPages,
           "total-items": t.pageInfo.totalItems
         }, t.paginationProps, {
-          onChange: ce,
-          "onUpdate:itemsPerPage": me
+          onChange: ye,
+          "onUpdate:itemsPerPage": ge
         }), null, 16, ["current-page", "total-pages", "total-items"])
-      ])) : g("", !0),
-      S(Ae, {
+      ])) : R("", !0),
+      V(Ae, {
         show: B.value,
-        "onUpdate:show": a[7] || (a[7] = (n) => B.value = n),
-        title: ge.value,
-        description: he.value,
-        "confirm-text": ye.value,
-        "cancel-text": we.value,
+        "onUpdate:show": i[11] || (i[11] = (l) => B.value = l),
+        title: ke.value,
+        description: be.value,
+        "confirm-text": xe.value,
+        "cancel-text": Ce.value,
         variant: "danger",
-        onConfirm: de,
-        onCancel: a[8] || (a[8] = (n) => B.value = !1)
+        onConfirm: he,
+        onCancel: i[12] || (i[12] = (l) => B.value = !1)
       }, null, 8, ["show", "title", "description", "confirm-text", "cancel-text"]),
-      E.value ? (r(), V(Ge, {
-        key: 4,
-        show: E.value,
-        "onUpdate:show": a[9] || (a[9] = (n) => E.value = n),
+      Q.value ? (d(), j(Le, {
+        key: 3,
+        show: Q.value,
+        "onUpdate:show": i[13] || (i[13] = (l) => Q.value = l),
         data: t.data || [],
-        fields: Ce.value,
-        mode: $e.value,
+        fields: Pe.value,
+        mode: Be.value,
         "export-props": t.exportProps,
-        "on-export": Ie
-      }, null, 8, ["show", "data", "fields", "mode", "export-props"])) : g("", !0),
-      H.value ? (r(), y("div", nt, [
-        S(Ne, h({
-          show: j.value,
-          "onUpdate:show": a[10] || (a[10] = (n) => j.value = n),
+        "on-export": Te
+      }, null, 8, ["show", "data", "fields", "mode", "export-props"])) : R("", !0),
+      H.value ? (d(), h("div", Ge, [
+        V(je, y({
+          show: M.value,
+          "onUpdate:show": i[14] || (i[14] = (l) => M.value = l),
           ref_key: "importDataRef",
-          ref: xe,
-          fields: Se.value,
-          processBatch: De,
-          onComplete: Pe
+          ref: Se,
+          fields: $e.value,
+          processBatch: Fe,
+          onComplete: Ie
         }, typeof t.importProps == "object" ? t.importProps : {}, {
-          title: be.value,
+          title: De.value,
           class: "hidden!"
         }), null, 16, ["show", "fields", "title"])
-      ])) : g("", !0)
-    ]));
+      ])) : R("", !0)
+    ], 2));
   }
 });
 export {
-  Ct as default
+  ct as default
 };