vlite3 0.9.1 → 0.9.3

package/components/Screen/Screen.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent as ge, useSlots as ye, computed as i, ref as s, markRaw as we, provide as F, watch as R, openBlock as n, 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 { 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 f, normalizeClass as q, createVNode as w, createSlots as ke, withCtx as Q, renderSlot as d, createElementVNode as I, createBlock as h, createCommentVNode as u, 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 O from "../Button.vue.js";
@@ -6,10 +6,10 @@ 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 Ve } from "../../utils/usePersistentState.js";
-import { useVLiteConfig as Te } from "../../core/config.js";
-import { $t as f } from "../../utils/i18n.js";
-import { SCREEN_CONTEXT_KEY as Be } from "../DataTable/types.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";
@@ -71,8 +71,11 @@ const Ne = { class: "flex flex-col w-full space-y-8" }, Qe = { class: "flex flex
     showRefresh: { type: Boolean, default: !1 },
     containerClass: {},
     headerClass: {},
+    titleClass: {},
+    descriptionClass: {},
     viewProps: { default: () => ({}) },
     hideSelectable: { type: Boolean, default: !1 },
+    hideDeleteBtn: { type: Boolean, default: !1 },
     quickFilters: { default: () => [] },
     quickFilterKey: { default: "status" },
     defaultQuickFilter: {},
@@ -80,26 +83,26 @@ const Ne = { class: "flex flex-col w-full space-y-8" }, Qe = { class: "flex flex
   },
   emits: ["add", "delete"],
   setup(t, { emit: K }) {
-    const l = t, x = Te(), E = K, P = ye(), L = i(() => l.name || l.title || "default-screen"), h = Ve(
+    const l = t, x = Ve(), E = K, P = ye(), L = n(() => l.name || l.title || "default-screen"), g = 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), V = s(l.pageInfo?.itemsPerPage || l.paginationProps?.itemsPerPage || 10), r = s([]), S = s([]), C = s(!1), y = s(
+    ), y = s(""), m = 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), c = s(
       l.defaultQuickFilter !== void 0 ? l.defaultQuickFilter : l.quickFilters && l.quickFilters.length > 0 ? l.quickFilters[0].value : ""
-    ), z = i(() => l.quickFilters && l.quickFilters.length > 0), H = (e) => {
-      y.value = e, k.value = 1, v();
-    }, U = i(() => {
+    ), z = n(() => l.quickFilters && l.quickFilters.length > 0), H = (e) => {
+      c.value = e, k.value = 1, p();
+    }, U = n(() => {
       let e;
-      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 = i(() => 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
+      return g.value === "table" ? e = l.table || !!P.table : e = l.list || !!P.list || !!P.grid, typeof e == "object" && e !== null ? we(e) : e;
+    }), X = n(() => 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 = {
       disableSearch: !0,
       forceSelectable: !l.hideSelectable,
       onTableChange: (e) => {
-        j.value = { field: e.sort.field, order: e.sort.order }, v();
+        j.value = { field: e.sort.field, order: e.sort.order }, p();
       }
     };
-    F(Be, Y), F("screen-selected-rows", r), F("screen-request-delete", (e) => b(e));
+    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 = () => {
@@ -115,65 +118,65 @@ const Ne = { class: "flex flex-col w-full space-y-8" }, Qe = { class: "flex flex
     ), R(
       () => l.pageInfo?.itemsPerPage,
       (e) => {
-        e && (V.value = e);
+        e && (B.value = e);
       }
     );
-    let T = null;
-    R(g, () => {
-      T && clearTimeout(T), T = setTimeout(() => {
-        k.value = 1, v();
+    let V = null;
+    R(y, () => {
+      V && clearTimeout(V), V = setTimeout(() => {
+        k.value = 1, p();
       }, 300);
     });
     const W = (e) => {
-      k.value = e, v();
+      k.value = e, p();
     }, Z = (e) => {
-      V.value = e, k.value = 1, v();
-    }, v = () => {
+      B.value = e, k.value = 1, p();
+    }, p = () => {
       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: V.value },
-        search: g.value,
+      const e = { ...m.value };
+      c.value !== "" && c.value !== null && c.value !== void 0 && (e[l.quickFilterKey] = c.value), l.refetch({
+        pagination: { page: k.value, limit: B.value },
+        search: y.value,
         sort: { ...j.value },
         filter: e
       });
-    }, _ = i(() => l.data && l.data.length > 0), ee = i(() => {
-      const e = f("vlite.screen.deleteSelected");
+    }, _ = n(() => l.data && l.data.length > 0), ee = n(() => {
+      const e = v("vlite.screen.deleteSelected");
       return e !== "vlite.screen.deleteSelected" ? e : "Delete Selected";
-    }), te = i(() => {
-      const e = f("vlite.screen.refresh");
+    }), te = n(() => {
+      const e = v("vlite.screen.refresh");
       return e !== "vlite.screen.refresh" ? e : "Refresh";
-    }), le = i(() => {
-      const e = f("vlite.screen.searchPlaceholder");
+    }), le = n(() => {
+      const e = v("vlite.screen.searchPlaceholder");
       return e !== "vlite.screen.searchPlaceholder" ? e : "Search...";
-    }), ae = i(() => {
-      const e = f("vlite.screen.confirmDeleteTitle");
+    }), ae = n(() => {
+      const e = v("vlite.screen.confirmDeleteTitle");
       return e !== "vlite.screen.confirmDeleteTitle" ? e : "Confirm Deletion";
-    }), oe = i(() => {
-      const e = f("vlite.screen.confirmDeleteDesc", { count: S.value.length });
+    }), ie = n(() => {
+      const e = v("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"}?`;
-    }), ie = i(() => {
-      const e = f("vlite.screen.confirmDeleteBtn");
+    }), ne = n(() => {
+      const e = v("vlite.screen.confirmDeleteBtn");
       return e !== "vlite.screen.confirmDeleteBtn" ? e : "Delete";
-    }), ne = i(() => {
-      const e = f("vlite.screen.cancelBtn");
+    }), oe = n(() => {
+      const e = v("vlite.screen.cancelBtn");
       return e !== "vlite.screen.cancelBtn" ? e : "Cancel";
-    }), re = i(() => {
-      const e = f("vlite.screen.missingView");
+    }), re = n(() => {
+      const e = v("vlite.screen.missingView");
       return e !== "vlite.screen.missingView" ? e : "Please provide a `:list` or `:table` component or slot.";
-    }), N = i(
+    }), N = n(
       () => l.exportSchema && l.exportSchema.length > 0 && l.exportProps !== !1 || l.importSchema && l.importSchema.length > 0 && l.importProps !== !1
-    ), se = i(() => {
-      const e = f("vlite.screen.importData");
+    ), se = n(() => {
+      const e = v("vlite.screen.importData");
       return e !== "vlite.screen.importData" ? e : "Import Data";
-    }), de = s(null), $ = s(!1), B = s(!1), ce = (e) => {
-      e.value === "export" ? $.value = !0 : e.value === "import" && (B.value = !0);
-    }, ue = i(
+    }), 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
       }))
-    ), me = i(
+    ), me = n(
       () => (l.importSchema || []).map((e) => ({
         field: e.name || e.field,
         title: e.label || e.title || e.name || e.field,
@@ -188,27 +191,29 @@ const Ne = { class: "flex flex-col w-full space-y-8" }, Qe = { class: "flex flex
       skipped: 0,
       failed: 0,
       errors: []
-    }), ve = () => v(), pe = i(
+    }), ve = () => p(), 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: g.value,
-        filter: u.value
+        search: y.value,
+        filter: m.value
       }) : console.warn(
         "VLite Screen: No exportApi configured or no exportType provided for generic backend export."
       );
     };
-    return (e, o) => (n(), m("div", Ne, [
-      t.customHeader ? d(e.$slots, "custom-header", { key: 1 }) : (n(), m("div", {
+    return (e, i) => (o(), f("div", Ne, [
+      t.customHeader ? d(e.$slots, "custom-header", { key: 1 }) : (o(), f("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 }, [
@@ -226,24 +231,24 @@ const Ne = { class: "flex flex-col w-full space-y-8" }, Qe = { class: "flex flex
             ]),
             key: "1"
           } : void 0
-        ]), 1032, ["title", "title-i18n", "description", "description-i18n", "info", "info-i18n"]),
+        ]), 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 ? (n(), p(O, {
+            r.value.length > 0 && !t.hideSelectable && !t.hideDeleteBtn ? (o(), h(O, {
               key: 0,
               variant: "outline",
               class: "hover:bg-destructive/10 shrink-0 h-9! w-9!",
               icon: "lucide:trash-2",
               title: ee.value,
-              onClick: o[0] || (o[0] = (a) => b(r.value))
-            }, null, 8, ["title"])) : c("", !0),
-            (t.table || e.$slots.table) && (t.list || e.$slots.list || e.$slots.grid) ? (n(), p(Re, {
+              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) ? (o(), h(Re, {
               key: 1,
-              modelValue: D(h),
-              "onUpdate:modelValue": o[1] || (o[1] = (a) => be(h) ? h.value = a : null)
-            }, null, 8, ["modelValue"])) : c("", !0),
+              modelValue: D(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(), p(O, {
+            t.showRefresh ? (o(), h(O, {
               key: 2,
               variant: "outline",
               icon: "lucide:refresh-cw",
@@ -251,28 +256,28 @@ const Ne = { class: "flex flex-col w-full space-y-8" }, Qe = { class: "flex flex
               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 ? (n(), p($e, {
+              onClick: p
+            }, null, 8, ["title", "disabled"])) : u("", !0),
+            t.filterSchema && t.filterSchema.length > 0 ? (o(), h($e, {
               key: 3,
               schema: t.filterSchema,
               type: t.filterType,
-              modelValue: u.value,
-              "onUpdate:modelValue": o[2] || (o[2] = (a) => u.value = a),
-              onChange: v
-            }, null, 8, ["schema", "type", "modelValue"])) : c("", !0),
-            t.canSearch ? (n(), m("div", Oe, [
+              modelValue: m.value,
+              "onUpdate:modelValue": i[2] || (i[2] = (a) => m.value = a),
+              onChange: p
+            }, null, 8, ["schema", "type", "modelValue"])) : u("", !0),
+            t.canSearch ? (o(), f("div", Oe, [
               w(De, {
                 lazy: "",
-                modelValue: g.value,
-                "onUpdate:modelValue": o[3] || (o[3] = (a) => g.value = a),
+                modelValue: y.value,
+                "onUpdate:modelValue": i[3] || (i[3] = (a) => y.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)
+            ])) : u("", !0)
           ]),
           I("div", Ke, [
             d(e.$slots, "actions", {}, () => [
@@ -283,37 +288,37 @@ const Ne = { class: "flex flex-col w-full space-y-8" }, Qe = { class: "flex flex
                 loading: t.loading,
                 data: t.data,
                 refetch: t.refetch,
-                onAdd: o[4] || (o[4] = (a) => e.$emit("add"))
+                onAdd: i[4] || (i[4] = (a) => e.$emit("add"))
               }, null, 8, ["can-add", "add-component", "add-btn", "loading", "data", "refetch"])
             ]),
-            N.value ? (n(), p(qe, {
+            N.value ? (o(), h(qe, {
               key: 0,
               "export-props": t.exportProps,
               "import-props": t.importProps,
               onSelect: ce
-            }, null, 8, ["export-props", "import-props"])) : c("", !0),
+            }, null, 8, ["export-props", "import-props"])) : u("", !0),
             d(e.$slots, "after-add")
           ])
         ])
       ], 2)),
-      z.value ? (n(), m("div", {
+      d(e.$slots, "sub-header"),
+      z.value ? (o(), f("div", {
         key: 2,
-        class: q(["max-sm:-mt-1", t.quickFilterVariant == "line" ? "mb-1.5 sm:mb-0" : "mb-2"])
+        class: q(["-mt-1", t.quickFilterVariant == "line" ? "mb-1.5 sm:mb-1" : "mb-2"])
       }, [
         w(Ue, {
-          modelValue: y.value,
-          "onUpdate:modelValue": o[5] || (o[5] = (a) => y.value = a),
+          modelValue: c.value,
+          "onUpdate:modelValue": i[5] || (i[5] = (a) => c.value = a),
           options: t.quickFilters,
           variant: t.quickFilterVariant,
           onChange: H
         }, null, 8, ["modelValue", "options", "variant"])
-      ], 2)) : c("", !0),
-      d(e.$slots, "sub-header"),
+      ], 2)) : u("", !0),
       I("div", {
         class: q(["flex-1 w-full relative", t.containerClass])
       }, [
-        !_.value && !t.loading ? (n(), m(M, { key: 0 }, [
-          e.$slots.empty ? d(e.$slots, "empty", { key: 0 }) : (n(), p(Ee, {
+        !_.value && !t.loading ? (o(), f(M, { key: 0 }, [
+          e.$slots.empty ? d(e.$slots, "empty", { key: 0 }) : (o(), h(Ee, {
             key: 1,
             "empty-title": t.emptyTitle,
             "empty-title-i18n": t.emptyTitleI18n,
@@ -325,41 +330,41 @@ const Ne = { class: "flex flex-col w-full space-y-8" }, Qe = { class: "flex flex
             "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(), m(M, { key: 1 }, [
-          D(h) === "table" && e.$slots.table ? d(e.$slots, "table", {
+        ], 64)) : (o(), f(M, { key: 1 }, [
+          D(g) === "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", {
+          }) : D(g) === "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", {
+          }) : D(g) === "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 ? (n(), p(xe(U.value), A({
+          }) : U.value ? (o(), h(xe(U.value), A({
             key: 3,
             data: t.data,
             loading: t.loading,
             refetch: t.refetch,
             selectedRows: r.value,
-            "onUpdate:selectedRows": o[6] || (o[6] = (a) => r.value = a),
+            "onUpdate:selectedRows": i[6] || (i[6] = (a) => r.value = a),
             delete: b,
             onDelete: J
-          }, t.viewProps), null, 16, ["data", "loading", "refetch", "selectedRows"])) : (n(), m("div", Le, Ce(re.value), 1))
+          }, t.viewProps), null, 16, ["data", "loading", "refetch", "selectedRows"])) : (o(), f("div", Le, Ce(re.value), 1))
         ], 64))
       ], 2),
-      t.pagination && t.pageInfo && t.pageInfo.totalPages > 1 ? (n(), m("div", ze, [
+      t.pagination && t.pageInfo && t.pageInfo.totalPages > 1 ? (o(), f("div", ze, [
         w(D(Se), A({
           "current-page": t.pageInfo.currentPage,
           "total-pages": t.pageInfo.totalPages,
@@ -368,32 +373,32 @@ const Ne = { class: "flex flex-col w-full space-y-8" }, Qe = { class: "flex flex
           onChange: W,
           "onUpdate:itemsPerPage": Z
         }), null, 16, ["current-page", "total-pages", "total-items"])
-      ])) : c("", !0),
+      ])) : u("", !0),
       w(Pe, {
         show: C.value,
-        "onUpdate:show": o[7] || (o[7] = (a) => C.value = a),
+        "onUpdate:show": i[7] || (i[7] = (a) => C.value = a),
         title: ae.value,
-        description: oe.value,
-        "confirm-text": ie.value,
-        "cancel-text": ne.value,
+        description: ie.value,
+        "confirm-text": ne.value,
+        "cancel-text": oe.value,
         variant: "danger",
         onConfirm: G,
-        onCancel: o[8] || (o[8] = (a) => C.value = !1)
+        onCancel: i[8] || (i[8] = (a) => C.value = !1)
       }, null, 8, ["show", "title", "description", "confirm-text", "cancel-text"]),
-      $.value ? (n(), p(je, {
+      $.value ? (o(), h(je, {
         key: 4,
         show: $.value,
-        "onUpdate:show": o[9] || (o[9] = (a) => $.value = a),
+        "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 ? (n(), m("div", He, [
+      }, null, 8, ["show", "data", "fields", "mode", "export-props"])) : u("", !0),
+      N.value ? (o(), f("div", He, [
         w(Ie, A({
-          show: B.value,
-          "onUpdate:show": o[10] || (o[10] = (a) => B.value = a),
+          show: T.value,
+          "onUpdate:show": i[10] || (i[10] = (a) => T.value = a),
           ref_key: "importDataRef",
           ref: de,
           fields: me.value,
@@ -403,7 +408,7 @@ const Ne = { class: "flex flex-col w-full space-y-8" }, Qe = { class: "flex flex
           title: se.value,
           class: "hidden!"
         }), null, 16, ["show", "fields", "title"])
-      ])) : c("", !0)
+      ])) : u("", !0)
     ]));
   }
 });

package/components/Screen/ScreenFilter.vue.js

@@ -15,13 +15,14 @@ import "@vueuse/core";
 /* empty css                           */
 import "iconify-icon-picker";
 import "iconify-icon-picker/style.css";
+import "vue-draggable-plus";
 /* empty css                        */
 /* empty css                      */
 import "../../core/config.js";
 const A = { class: "text-gray-800! h-4! w-4! flex items-center justify-center" }, E = { style: { "will-change": "transform", contain: "layout style" } }, I = {
   class: "py-4 px-3.5 min-w-[290px]",
   style: { "will-change": "transform", contain: "layout style" }
-}, le = /* @__PURE__ */ B({
+}, se = /* @__PURE__ */ B({
   __name: "ScreenFilter",
   props: {
     schema: {},
@@ -180,5 +181,5 @@ const A = { class: "text-gray-800! h-4! w-4! flex items-center justify-center" }
   }
 });
 export {
-  le as default
+  se as default
 };

package/components/Screen/components/ScreenEmptyState.vue.js

@@ -1,9 +1,9 @@
-import { defineComponent as C, computed as m, markRaw as k, resolveComponent as p, openBlock as n, createBlock as a, unref as h, withCtx as d, createElementBlock as o, Fragment as u, resolveDynamicComponent as w, mergeProps as i, createVNode as f, createTextVNode as y, toDisplayString as B, createCommentVNode as l } from "vue";
+import { defineComponent as p, computed as m, markRaw as k, resolveComponent as C, openBlock as n, createBlock as a, unref as h, withCtx as d, createElementBlock as o, Fragment as u, resolveDynamicComponent as w, mergeProps as i, createVNode as f, createTextVNode as s, toDisplayString as y, createCommentVNode as l } from "vue";
 import x from "../../Empty/Empty.vue.js";
-import s from "../../Button.vue.js";
+import B from "../../Button.vue.js";
 import A from "../../Modal.vue.js";
 import { $t as I } from "../../../utils/i18n.js";
-const D = ["href", "target"], $ = /* @__PURE__ */ C({
+const D = ["href", "target"], $ = /* @__PURE__ */ p({
   __name: "ScreenEmptyState",
   props: {
     emptyTitle: {},
@@ -28,8 +28,9 @@ const D = ["href", "target"], $ = /* @__PURE__ */ C({
       return r !== "vlite.screen.addNew" ? r : "Add New";
     });
     return (r, N) => {
-      const g = p("router-link");
+      const g = C("router-link");
       return n(), a(h(x), {
+        class: "py-0.5!",
         title: e.emptyTitle,
         titleI18n: e.emptyTitleI18n,
         description: e.emptyDescription,
@@ -45,14 +46,14 @@ const D = ["href", "target"], $ = /* @__PURE__ */ C({
                   body: b.value
                 }, e.addBtn.modalProps), {
                   trigger: d(() => [
-                    f(s, i({
+                    f(B, i({
                       icon: e.addBtn.icon || "fluent:add-16-filled",
                       variant: "secondary",
                       rounded: "full",
                       class: "px-6!"
                     }, e.addBtn.buttonProps), {
                       default: d(() => [
-                        y(B(c.value), 1)
+                        s(y(c.value), 1)
                       ]),
                       _: 1
                     }, 16, ["icon"])
@@ -64,12 +65,12 @@ const D = ["href", "target"], $ = /* @__PURE__ */ C({
                   class: "inline-flex"
                 }, {
                   default: d(() => [
-                    f(s, i({
+                    f(B, i({
                       icon: e.addBtn.icon || "fluent:add-16-filled",
                       variant: "secondary"
                     }, e.addBtn.buttonProps), {
                       default: d(() => [
-                        y(B(c.value), 1)
+                        s(y(c.value), 1)
                       ]),
                       _: 1
                     }, 16, ["icon"])
@@ -81,12 +82,12 @@ const D = ["href", "target"], $ = /* @__PURE__ */ C({
                   target: e.addBtn.target,
                   class: "inline-flex"
                 }, [
-                  f(s, i({
+                  f(B, i({
                     icon: e.addBtn.icon || "lucide:plus",
                     variant: "secondary"
                   }, e.addBtn.buttonProps), {
                     default: d(() => [
-                      y(B(c.value), 1)
+                      s(y(c.value), 1)
                     ]),
                     _: 1
                   }, 16, ["icon"])

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

@@ -5,6 +5,8 @@ type __VLS_Props = {
     descriptionI18n?: string;
     info?: string;
     infoI18n?: string;
+    titleClass?: string;
+    descriptionClass?: string;
 };
 declare function __VLS_template(): {
     attrs: Partial<{}>;

package/components/Screen/components/ScreenHeaderTitle.vue.js

@@ -1,14 +1,11 @@
-import { defineComponent as f, computed as l, openBlock as n, createElementBlock as o, renderSlot as a, createElementVNode as p, toDisplayString as d, createBlock as u, withCtx as x, createVNode as h, createCommentVNode as i } from "vue";
-import I from "../../Icon.vue.js";
-import _ from "../../Tooltip.vue.js";
-import { $t as m } from "../../../utils/i18n.js";
-const g = { class: "flex flex-col shrink-0" }, k = {
+import { defineComponent as p, computed as c, openBlock as n, createElementBlock as o, renderSlot as a, createElementVNode as u, normalizeClass as d, toDisplayString as m, createBlock as x, withCtx as h, createVNode as I, createCommentVNode as i } from "vue";
+import C from "../../Icon.vue.js";
+import g from "../../Tooltip.vue.js";
+import { $t as f } from "../../../utils/i18n.js";
+const k = { class: "flex flex-col shrink-0" }, v = {
   key: 0,
   class: "flex items-center! gap-2"
-}, v = { class: "text-fs-7.5 font-bold text-foreground" }, y = {
-  key: 0,
-  class: "text-sm text-gray-700 mt-1 md:max-w-[450px]"
-}, S = /* @__PURE__ */ f({
+}, S = /* @__PURE__ */ p({
   __name: "ScreenHeaderTitle",
   props: {
     title: {},
@@ -16,24 +13,28 @@ const g = { class: "flex flex-col shrink-0" }, k = {
     description: {},
     descriptionI18n: {},
     info: {},
-    infoI18n: {}
+    infoI18n: {},
+    titleClass: {},
+    descriptionClass: {}
   },
-  setup(e) {
-    const t = e, r = l(() => t.titleI18n ? m(t.titleI18n) : t.title), s = l(
-      () => t.descriptionI18n ? m(t.descriptionI18n) : t.description
+  setup(t) {
+    const e = t, s = c(() => e.titleI18n ? f(e.titleI18n) : e.title), r = c(
+      () => e.descriptionI18n ? f(e.descriptionI18n) : e.description
     );
-    return (c, $) => (n(), o("div", g, [
-      a(c.$slots, "title", {}, () => [
-        r.value ? (n(), o("div", k, [
-          p("h1", v, d(r.value), 1),
-          e.info || e.infoI18n ? (n(), u(_, {
+    return (l, y) => (n(), o("div", k, [
+      a(l.$slots, "title", {}, () => [
+        s.value ? (n(), o("div", v, [
+          u("h1", {
+            class: d(["text-fs-7.5 font-bold text-foreground", t.titleClass])
+          }, m(s.value), 3),
+          t.info || t.infoI18n ? (n(), x(g, {
             key: 0,
-            content: e.info,
-            "content-i18n": e.infoI18n,
+            content: t.info,
+            "content-i18n": t.infoI18n,
             placement: "right"
           }, {
-            default: x(() => [
-              h(I, {
+            default: h(() => [
+              I(C, {
                 icon: "lucide:info",
                 class: "w-[18px] h-[18px] mt-3! text-muted-foreground hover:text-foreground cursor-pointer transition-colors outline-none"
               })
@@ -42,8 +43,11 @@ const g = { class: "flex flex-col shrink-0" }, k = {
           }, 8, ["content", "content-i18n"])) : i("", !0)
         ])) : i("", !0)
       ]),
-      a(c.$slots, "description", {}, () => [
-        s.value ? (n(), o("p", y, d(s.value), 1)) : i("", !0)
+      a(l.$slots, "description", {}, () => [
+        r.value ? (n(), o("p", {
+          key: 0,
+          class: d(["text-sm text-gray-700 mt-1 md:max-w-[450px]", t.descriptionClass])
+        }, m(r.value), 3)) : i("", !0)
       ])
     ]));
   }

package/components/Screen/components/ScreenQuickFilters.vue.js

@@ -22,7 +22,7 @@ const p = { class: "w-max" }, V = /* @__PURE__ */ i({
     };
     return (e, v) => (r(), u("div", p, [
       m(d(b), {
-        class: "border-b-0! border-0! pb-0.5",
+        class: "border-b-0! border-0! pb-0",
         "model-value": a.modelValue,
         options: t.value,
         variant: a.variant || "line",

package/components/Screen/types.d.ts

@@ -84,8 +84,11 @@ export interface ScreenProps {
     showRefresh?: boolean;
     containerClass?: string;
     headerClass?: string;
+    titleClass?: string;
+    descriptionClass?: string;
     viewProps?: Record<string, any>;
     hideSelectable?: boolean;
+    hideDeleteBtn?: boolean;
     /**
      * Quick-filter tabs rendered below the header (above the content).
      * Inspired by modern dashboards (Shopify, Linear, Vercel).