vlite3 1.0.4 → 1.0.6

package/components/Screen/Screen.vue.js

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

package/components/Screen/components/ScreenViewToggle.vue.d.ts

@@ -1,9 +1,12 @@
+import { ScreenView } from '../types';
 type __VLS_Props = {
-    modelValue: 'table' | 'list';
+    modelValue: string;
+    /** Dynamic views array. When provided, renders one button per entry. */
+    views?: ScreenView[];
 };
 declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
-    "update:modelValue": (val: "table" | "list") => any;
+    "update:modelValue": (val: string) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
-    "onUpdate:modelValue"?: (val: "table" | "list") => any;
+    "onUpdate:modelValue"?: (val: string) => any;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 export default _default;