vlite3 1.5.1 → 1.5.4

package/components/Screen/Screen.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent as Ee, useSlots as Qe, computed as n, markRaw as T, onMounted as Ae, ref as h, provide as L, watch as O, openBlock as d, createElementBlock as p, normalizeClass as P, Fragment as U, createElementVNode as j, createVNode as C, createSlots as ne, withCtx as b, renderSlot as s, normalizeProps as u, guardReactiveProps as w, mergeProps as y, createBlock as M, createCommentVNode as R, unref as z, resolveDynamicComponent as Ue, toDisplayString as je } from "vue";
+import { defineComponent as Ee, useSlots as Qe, computed as n, markRaw as T, onMounted as Ae, ref as h, provide as L, watch as O, openBlock as d, createElementBlock as p, normalizeClass as P, Fragment as U, createElementVNode as j, createVNode as x, createSlots as ne, withCtx as b, renderSlot as o, normalizeProps as u, guardReactiveProps as w, mergeProps as g, createBlock as M, createCommentVNode as R, unref as z, resolveDynamicComponent as Ue, toDisplayString as je } from "vue";
 import Me from "../ConfirmationModal.vue.js";
 import Ne from "../Pagination/Pagination.vue.js";
 import He from "../ImportData/ImportData.vue.js";
@@ -6,10 +6,10 @@ import { usePersistentState as Ke } from "../../utils/usePersistentState.js";
 import { useVLiteConfig as Le } from "../../core/config.js";
 import { $t as f } from "../../utils/i18n.js";
 import { SCREEN_CONTEXT_KEY as Oe } from "../DataTable/types.js";
-import se from "./components/ScreenHeaderTitle.vue.js";
+import oe from "./components/ScreenHeaderTitle.vue.js";
 import ze from "./components/ScreenEmptyState.vue.js";
 import Xe from "./components/ScreenExportModal.vue.js";
-import oe from "./components/ScreenQuickFilters.vue.js";
+import se from "./components/ScreenQuickFilters.vue.js";
 import re from "./components/ScreenToolbar.vue.js";
 import Ye from "../Stats/Stats.vue.js";
 /* empty css                  */
@@ -94,7 +94,7 @@ const Ge = { key: 0 }, Je = {
   },
   emits: ["add", "delete", "activeView"],
   setup(t, { emit: de }) {
-    const a = t, I = Le(), q = de, g = Qe(), ce = n(() => a.name || a.title || "default-screen"), ue = n(() => {
+    const a = t, I = Le(), q = de, y = Qe(), ce = n(() => a.name || a.title || "default-screen"), ue = n(() => {
       const e = f("vlite.screen.tableView");
       return e !== "vlite.screen.tableView" ? e : "Table View";
     }), ve = n(() => {
@@ -113,22 +113,22 @@ const Ge = { key: 0 }, Je = {
           component: typeof i.component == "object" && i.component !== null ? T(i.component) : i.component
         }));
       const e = [];
-      return (a.table || g.table) && e.push({
+      return (a.table || y.table) && e.push({
         key: "table",
         component: a.table ? T(a.table) : null,
         icon: "lucide:list",
         label: ue.value
-      }), (a.list || g.list || g.grid) && e.push({
+      }), (a.list || y.list || y.grid) && e.push({
         key: "list",
         component: a.list ? T(a.list) : null,
         icon: "lucide:layout-grid",
         label: ve.value
-      }), (a.kanban || g.kanban) && e.push({
+      }), (a.kanban || y.kanban) && e.push({
         key: "kanban",
         component: a.kanban ? T(a.kanban) : null,
         icon: "lucide:kanban",
         label: fe.value
-      }), (a.calendar || g.calendar) && e.push({
+      }), (a.calendar || y.calendar) && e.push({
         key: "calendar",
         component: a.calendar ? T(a.calendar) : null,
         icon: "lucide:calendar",
@@ -140,7 +140,7 @@ const Ge = { key: 0 }, Je = {
     Ae(() => {
       V.value.length > 0 && !he.value.includes(c.value) && (c.value = Y.value), q("activeView", c.value);
     });
-    const F = n(() => c.value === "table" && g.table ? "table" : c.value === "list" && g.list ? "list" : c.value === "list" && g.grid ? "grid" : c.value === "kanban" && g.kanban ? "kanban" : c.value === "calendar" && g.calendar ? "calendar" : null), k = h(""), m = h({}), $ = h({ field: "", order: "" }), S = h(a.pageInfo?.currentPage || 1), E = h(a.pageInfo?.itemsPerPage || a.paginationProps?.itemsPerPage || 10), o = h([]), Q = h([]), B = h(!1), v = h(
+    const F = n(() => c.value === "table" && y.table ? "table" : c.value === "list" && y.list ? "list" : c.value === "list" && y.grid ? "grid" : c.value === "kanban" && y.kanban ? "kanban" : c.value === "calendar" && y.calendar ? "calendar" : null), k = h(""), m = h({}), $ = h({ field: "", order: "" }), S = h(a.pageInfo?.currentPage || 1), E = h(a.pageInfo?.itemsPerPage || a.paginationProps?.itemsPerPage || 10), s = h([]), Q = h([]), B = h(!1), v = h(
       a.defaultQuickFilter !== void 0 ? a.defaultQuickFilter : a.quickFilters && a.quickFilters.length > 0 ? a.quickFilters[0].value : ""
     ), W = n(() => !a.quickFilters || a.quickFilters.length === 0 ? !1 : a.skipQuickFilterViews && a.skipQuickFilterViews.length > 0 ? !a.skipQuickFilterViews.includes(c.value) : !0), Z = (e) => {
       v.value = e, S.value = 1, D();
@@ -154,7 +154,7 @@ const Ge = { key: 0 }, Je = {
       activeSort: $.value,
       page: S.value,
       limit: E.value,
-      selectedRows: o.value,
+      selectedRows: s.value,
       isFiltered: _.value,
       hasData: ee.value,
       loading: a.loading
@@ -164,13 +164,13 @@ const Ge = { key: 0 }, Je = {
         $.value = { field: e.sort.field, order: e.sort.order }, D();
       }
     };
-    L(Oe, we), L("screen-selected-rows", o), L("screen-request-delete", (e) => x(e));
-    const x = (e) => {
+    L(Oe, we), L("screen-selected-rows", s), L("screen-request-delete", (e) => C(e));
+    const C = (e) => {
       Q.value = e, B.value = !0;
-    }, ye = () => {
-      q("delete", Q.value), B.value = !1, o.value = [];
-    }, ge = (e) => {
-      q("delete", e), o.value = [];
+    }, ge = () => {
+      q("delete", Q.value), B.value = !1, s.value = [];
+    }, ye = (e) => {
+      q("delete", e), s.value = [];
     };
     O(
       () => a.pageInfo?.currentPage,
@@ -212,10 +212,10 @@ const Ge = { key: 0 }, Je = {
     }), le = n(() => {
       const e = f("vlite.screen.searchPlaceholder");
       return e !== "vlite.screen.searchPlaceholder" ? e : "Search...";
-    }), xe = n(() => {
+    }), Ce = n(() => {
       const e = f("vlite.screen.confirmDeleteTitle");
       return e !== "vlite.screen.confirmDeleteTitle" ? e : "Confirm Deletion";
-    }), Ce = n(() => {
+    }), xe = n(() => {
       const e = f("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"}?`;
     }), Ve = n(() => {
@@ -269,7 +269,7 @@ const Ge = { key: 0 }, Je = {
       class: P(["flex flex-col w-full space-y-8", t.containerClass])
     }, [
       t.variant === "two" ? (d(), p(U, { key: 0 }, [
-        t.customHeader ? s(e.$slots, "custom-header", u(y({ key: 1 }, r.value))) : (d(), p("div", {
+        t.customHeader ? o(e.$slots, "custom-header", u(g({ key: 1 }, r.value))) : (d(), p("div", {
           key: 0,
           class: P([t.headerClass, "flex flex-col space-y-6"])
         }, [
@@ -279,7 +279,7 @@ const Ge = { key: 0 }, Je = {
               t.topHeaderClass
             ])
           }, [
-            C(se, {
+            x(oe, {
               title: t.title,
               "title-i18n": t.titleI18n,
               "title-class": t.titleClass,
@@ -292,21 +292,21 @@ const Ge = { key: 0 }, Je = {
               e.$slots.title ? {
                 name: "title",
                 fn: b(() => [
-                  s(e.$slots, "title", u(w(r.value)))
+                  o(e.$slots, "title", u(w(r.value)))
                 ]),
                 key: "0"
               } : void 0,
               e.$slots.description ? {
                 name: "description",
                 fn: b(() => [
-                  s(e.$slots, "description", u(w(r.value)))
+                  o(e.$slots, "description", u(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(), p("div", Ge, [
-              C(Ye, y({ items: t.stats }, t.statsProps), null, 16, ["items"])
-            ])) : s(e.$slots, "header-stats", { key: 1 })
+              x(Ye, g({ items: t.stats }, t.statsProps), null, 16, ["items"])
+            ])) : o(e.$slots, "header-stats", { key: 1 })
           ], 2),
           j("div", {
             class: P([
@@ -320,7 +320,7 @@ const Ge = { key: 0 }, Je = {
                 t.filtersContainerClass
               ])
             }, [
-              W.value ? (d(), M(oe, {
+              W.value ? (d(), M(se, {
                 key: 0,
                 modelValue: v.value,
                 "onUpdate:modelValue": i[0] || (i[0] = (l) => v.value = l),
@@ -329,12 +329,10 @@ const Ge = { key: 0 }, Je = {
                 onChange: Z
               }, null, 8, ["modelValue", "options", "variant"])) : R("", !0)
             ], 2),
-            C(re, {
-              class: P([
-                "flex items-center gap-2.5 max-sm:w-full sm:w-auto justify-end",
-                t.actionsContainerClass
-              ]),
-              "selected-rows": o.value,
+            x(re, {
+              inline: "",
+              class: P(["w-full lg:w-auto", t.actionsContainerClass]),
+              "selected-rows": s.value,
               "hide-selectable": t.hideSelectable,
               "hide-delete-btn": t.hideDeleteBtn,
               "txt-delete-selected": te.value,
@@ -359,7 +357,7 @@ const Ge = { key: 0 }, Je = {
               "export-props": t.exportProps,
               "import-props": t.importProps,
               "screen-state": r.value,
-              onDelete: x,
+              onDelete: C,
               "onUpdate:activeView": J,
               "onUpdate:searchQuery": i[1] || (i[1] = (l) => k.value = l),
               "onUpdate:activeFilters": i[2] || (i[2] = (l) => m.value = l),
@@ -368,25 +366,26 @@ const Ge = { key: 0 }, Je = {
               onSelectDropdown: ie
             }, {
               "before-search": b((l) => [
-                s(e.$slots, "before-search", u(w(l)))
+                o(e.$slots, "before-search", u(w(l)))
               ]),
               actions: b((l) => [
-                s(e.$slots, "actions", u(w(l)))
+                o(e.$slots, "actions", u(w(l)))
               ]),
               "after-add": b((l) => [
-                s(e.$slots, "after-add", u(w(l)))
+                o(e.$slots, "after-add", u(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", u(w(r.value)))
+        o(e.$slots, "sub-header", u(w(r.value)))
       ], 64)) : (d(), p(U, { key: 1 }, [
-        t.customHeader ? s(e.$slots, "custom-header", u(y({ key: 1 }, r.value))) : (d(), p("div", {
+        t.customHeader ? o(e.$slots, "custom-header", u(g({ key: 1 }, r.value))) : (d(), p("div", {
           key: 0,
-          class: P([t.headerClass, "flex flex-col md:flex-row sm:items-start md:items-center justify-between gap-4"])
+          class: P([t.headerClass, "grid grid-cols-1 min-[900px]:grid-cols-[1fr_auto] min-[1250px]:grid-cols-[1fr_auto_auto] items-start gap-x-4 gap-y-3 w-full"])
         }, [
-          C(se, {
+          x(oe, {
+            class: "order-1 min-w-0",
             title: t.title,
             "title-i18n": t.titleI18n,
             "title-class": t.titleClass,
@@ -399,21 +398,20 @@ const Ge = { key: 0 }, Je = {
             e.$slots.title ? {
               name: "title",
               fn: b(() => [
-                s(e.$slots, "title", u(w(r.value)))
+                o(e.$slots, "title", u(w(r.value)))
               ]),
               key: "0"
             } : void 0,
             e.$slots.description ? {
               name: "description",
               fn: b(() => [
-                s(e.$slots, "description", u(w(r.value)))
+                o(e.$slots, "description", u(w(r.value)))
               ]),
               key: "1"
             } : void 0
           ]), 1032, ["title", "title-i18n", "title-class", "description", "description-i18n", "description-class", "info", "info-i18n"]),
-          C(re, {
-            class: "flex flex-col sm:flex-row items-start sm:items-center gap-2.5 w-full justify-end",
-            "selected-rows": o.value,
+          x(re, {
+            "selected-rows": s.value,
             "hide-selectable": t.hideSelectable,
             "hide-delete-btn": t.hideDeleteBtn,
             "txt-delete-selected": te.value,
@@ -438,7 +436,7 @@ const Ge = { key: 0 }, Je = {
             "export-props": t.exportProps,
             "import-props": t.importProps,
             "screen-state": r.value,
-            onDelete: x,
+            onDelete: C,
             "onUpdate:activeView": J,
             "onUpdate:searchQuery": i[4] || (i[4] = (l) => k.value = l),
             "onUpdate:activeFilters": i[5] || (i[5] = (l) => m.value = l),
@@ -447,20 +445,20 @@ const Ge = { key: 0 }, Je = {
             onSelectDropdown: ie
           }, {
             "before-search": b((l) => [
-              s(e.$slots, "before-search", u(w(l)))
+              o(e.$slots, "before-search", u(w(l)))
             ]),
             actions: b((l) => [
-              s(e.$slots, "actions", u(w(l)))
+              o(e.$slots, "actions", u(w(l)))
             ]),
             "after-add": b((l) => [
-              s(e.$slots, "after-add", u(w(l)))
+              o(e.$slots, "after-add", u(w(l)))
             ]),
             _: 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", u(w(r.value))),
+        o(e.$slots, "sub-header", u(w(r.value))),
         W.value ? (d(), p("div", Je, [
-          C(oe, {
+          x(se, {
             modelValue: v.value,
             "onUpdate:modelValue": i[7] || (i[7] = (l) => v.value = l),
             options: t.quickFilters,
@@ -473,7 +471,7 @@ const Ge = { key: 0 }, Je = {
         class: P(["flex-1 w-full relative", t.mainContainerClass])
       }, [
         !ee.value && !t.loading && !pe.value ? (d(), p(U, { key: 0 }, [
-          e.$slots.empty ? s(e.$slots, "empty", u(y({ key: 0 }, r.value))) : (d(), M(ze, {
+          e.$slots.empty ? o(e.$slots, "empty", u(g({ key: 0 }, r.value))) : (d(), M(ze, {
             key: 1,
             "empty-title": t.emptyTitle,
             "empty-title-i18n": t.emptyTitleI18n,
@@ -486,55 +484,55 @@ const Ge = { key: 0 }, Je = {
             "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)) : (d(), p(U, { key: 1 }, [
-          F.value === "table" ? s(e.$slots, "table", y({
+          F.value === "table" ? o(e.$slots, "table", g({
             key: 0,
             data: t.data,
             loading: t.loading,
-            selectedRows: o.value,
-            delete: x,
-            updateSelectedRows: (l) => o.value = l
-          }, r.value)) : F.value === "list" ? s(e.$slots, "list", y({
+            selectedRows: s.value,
+            delete: C,
+            updateSelectedRows: (l) => s.value = l
+          }, r.value)) : F.value === "list" ? o(e.$slots, "list", g({
             key: 1,
             data: t.data,
             loading: t.loading,
-            selectedRows: o.value,
-            delete: x,
-            updateSelectedRows: (l) => o.value = l
-          }, r.value)) : F.value === "grid" ? s(e.$slots, "grid", y({
+            selectedRows: s.value,
+            delete: C,
+            updateSelectedRows: (l) => s.value = l
+          }, r.value)) : F.value === "grid" ? o(e.$slots, "grid", g({
             key: 2,
             data: t.data,
             loading: t.loading,
-            selectedRows: o.value,
-            delete: x,
-            updateSelectedRows: (l) => o.value = l
-          }, r.value)) : F.value === "kanban" ? s(e.$slots, "kanban", y({
+            selectedRows: s.value,
+            delete: C,
+            updateSelectedRows: (l) => s.value = l
+          }, r.value)) : F.value === "kanban" ? o(e.$slots, "kanban", g({
             key: 3,
             data: t.data,
             loading: t.loading,
-            selectedRows: o.value,
-            delete: x,
-            updateSelectedRows: (l) => o.value = l
-          }, r.value)) : F.value === "calendar" ? s(e.$slots, "calendar", y({
+            selectedRows: s.value,
+            delete: C,
+            updateSelectedRows: (l) => s.value = l
+          }, r.value)) : F.value === "calendar" ? o(e.$slots, "calendar", g({
             key: 4,
             data: t.data,
             loading: t.loading,
-            selectedRows: o.value,
-            delete: x,
-            updateSelectedRows: (l) => o.value = l
-          }, r.value)) : G.value ? (d(), M(Ue(G.value), y({
+            selectedRows: s.value,
+            delete: C,
+            updateSelectedRows: (l) => s.value = l
+          }, r.value)) : G.value ? (d(), M(Ue(G.value), g({
             key: 5,
             data: t.data,
             loading: t.loading,
             refetch: t.refetch,
-            selectedRows: o.value,
-            "onUpdate:selectedRows": i[8] || (i[8] = (l) => o.value = l),
-            delete: x,
-            onDelete: ge
+            selectedRows: s.value,
+            "onUpdate:selectedRows": i[8] || (i[8] = (l) => s.value = l),
+            delete: C,
+            onDelete: ye
           }, t.viewProps), null, 16, ["data", "loading", "refetch", "selectedRows"])) : (d(), p("div", We, je(Pe.value), 1))
         ], 64))
       ], 2),
       t.pagination && t.pageInfo && t.pageInfo.totalPages > 1 ? (d(), p("div", Ze, [
-        C(z(Ne), y({
+        x(z(Ne), g({
           "current-page": t.pageInfo.currentPage,
           "total-pages": t.pageInfo.totalPages,
           "total-items": t.pageInfo.totalItems
@@ -543,15 +541,15 @@ const Ge = { key: 0 }, Je = {
           "onUpdate:itemsPerPage": be
         }), null, 16, ["current-page", "total-pages", "total-items"])
       ])) : R("", !0),
-      C(Me, {
+      x(Me, {
         show: B.value,
         "onUpdate:show": i[9] || (i[9] = (l) => B.value = l),
-        title: xe.value,
-        description: Ce.value,
+        title: Ce.value,
+        description: xe.value,
         "confirm-text": Ve.value,
         "cancel-text": De.value,
         variant: "danger",
-        onConfirm: ye,
+        onConfirm: ge,
         onCancel: i[10] || (i[10] = (l) => B.value = !1)
       }, null, 8, ["show", "title", "description", "confirm-text", "cancel-text"]),
       A.value ? (d(), M(Xe, {
@@ -565,7 +563,7 @@ const Ge = { key: 0 }, Je = {
         "on-export": qe
       }, null, 8, ["show", "data", "fields", "mode", "export-props"])) : R("", !0),
       H.value ? (d(), p("div", _e, [
-        C(He, y({
+        x(He, g({
           show: K.value,
           "onUpdate:show": i[12] || (i[12] = (l) => K.value = l),
           ref_key: "importDataRef",

package/components/Screen/ScreenFilter.vue.js

@@ -17,15 +17,15 @@ import "v-datepicker-lite/style.css";
 /* empty css                      */
 import "@jaames/iro";
 import "@vueuse/core";
-/* empty css                          */
+/* empty css                           */
 import "iconify-icon-picker";
 import "iconify-icon-picker/style.css";
 /* empty css                                 */
 /* empty css                         */
 /* empty css                 */
 /* empty css                                         */
-/* empty css                                    */
-/* empty css                                        */
+/* empty css                                     */
+/* empty css                                         */
 import "../../core/config.js";
 /* empty css                                    */
 /* empty css                      */

package/components/Screen/components/ScreenAddAction.vue.js

@@ -1,8 +1,8 @@
-import { defineComponent as x, computed as m, markRaw as s, resolveComponent as N, openBlock as d, createBlock as o, resolveDynamicComponent as P, createElementBlock as f, Fragment as y, mergeProps as e, withCtx as n, createVNode as B, createTextVNode as i, toDisplayString as r, createCommentVNode as k } from "vue";
+import { defineComponent as A, computed as m, markRaw as y, resolveComponent as N, openBlock as n, createBlock as o, resolveDynamicComponent as P, createElementBlock as f, Fragment as k, mergeProps as e, withCtx as d, createVNode as B, createTextVNode as i, toDisplayString as r, createCommentVNode as s } from "vue";
 import c from "../../Button.vue.js";
 import V from "../../Modal.vue.js";
 import { $t as g } from "../../../utils/i18n.js";
-const D = ["href", "target"], F = /* @__PURE__ */ x({
+const D = ["href", "target"], F = /* @__PURE__ */ A({
   __name: "ScreenAddAction",
   props: {
     canAdd: { type: Boolean },
@@ -13,11 +13,11 @@ const D = ["href", "target"], F = /* @__PURE__ */ x({
     refetch: {}
   },
   emits: ["add"],
-  setup(t, { emit: C }) {
-    const a = t, b = C, v = m(
-      () => a.addComponent ? s(a.addComponent) : void 0
-    ), h = m(
-      () => a.addBtn?.modal ? s(a.addBtn.modal) : void 0
+  setup(t, { emit: x }) {
+    const a = t, C = x, v = m(
+      () => a.addComponent ? y(a.addComponent) : void 0
+    ), b = m(
+      () => a.addBtn?.modal ? y(a.addBtn.modal) : void 0
     ), l = m(() => {
       if (a.addBtn?.labelI18n) return g(a.addBtn.labelI18n);
       if (a.addBtn?.label) return a.addBtn.label;
@@ -25,80 +25,80 @@ const D = ["href", "target"], F = /* @__PURE__ */ x({
       return u !== "vlite.screen.addNew" ? u : "Add New";
     });
     return (u, w) => {
-      const A = N("router-link");
-      return v.value ? (d(), o(P(v.value), { key: 0 })) : t.canAdd ? (d(), f(y, { key: 1 }, [
-        t.addBtn ? (d(), f(y, { key: 0 }, [
-          t.addBtn.modal ? (d(), o(V, e({
+      const h = N("router-link");
+      return v.value ? (n(), o(P(v.value), { key: 0 })) : t.canAdd ? (n(), f(k, { key: 1 }, [
+        t.addBtn ? (n(), f(k, { key: 0 }, [
+          t.addBtn.modal ? (n(), o(V, e({
             key: 0,
-            body: h.value
+            body: b.value
           }, t.addBtn.modalProps, {
             refetch: t.refetch,
             data: t.data,
-            class: "w-full md:w-auto!",
+            class: "w-full min-[900px]:w-auto!",
             loading: t.loading
           }), {
-            trigger: n(() => [
+            trigger: d(() => [
               B(c, e({
-                class: "w-full md:w-auto!",
+                class: "w-full min-[900px]:w-auto!",
                 icon: t.addBtn.icon || "fluent:add-16-filled",
                 variant: t.addBtn.variant || "primary"
               }, t.addBtn.buttonProps), {
-                default: n(() => [
+                default: d(() => [
                   i(r(l.value), 1)
                 ]),
                 _: 1
               }, 16, ["icon", "variant"])
             ]),
             _: 1
-          }, 16, ["body", "refetch", "data", "loading"])) : t.addBtn.to ? (d(), o(A, {
+          }, 16, ["body", "refetch", "data", "loading"])) : t.addBtn.to ? (n(), o(h, {
             key: 1,
             to: t.addBtn.to,
-            class: "inline-flex w-full sm:w-auto"
+            class: "inline-flex w-full min-[900px]:w-auto"
           }, {
-            default: n(() => [
+            default: d(() => [
               B(c, e({
-                class: "w-full md:w-auto!",
+                class: "w-full min-[900px]:w-auto!",
                 icon: t.addBtn.icon || "fluent:add-16-filled",
                 variant: t.addBtn.variant || "primary"
               }, t.addBtn.buttonProps), {
-                default: n(() => [
+                default: d(() => [
                   i(r(l.value), 1)
                 ]),
                 _: 1
               }, 16, ["icon", "variant"])
             ]),
             _: 1
-          }, 8, ["to"])) : t.addBtn.href ? (d(), f("a", {
+          }, 8, ["to"])) : t.addBtn.href ? (n(), f("a", {
             key: 2,
             href: t.addBtn.href,
             target: t.addBtn.target,
-            class: "inline-flex w-full sm:w-auto"
+            class: "inline-flex w-full min-[900px]:w-auto"
           }, [
             B(c, e({
-              class: "w-full md:w-auto!",
+              class: "w-full min-[900px]:w-auto!",
               icon: t.addBtn.icon || "fluent:add-16-filled",
               variant: t.addBtn.variant || "primary"
             }, t.addBtn.buttonProps), {
-              default: n(() => [
+              default: d(() => [
                 i(r(l.value), 1)
               ]),
               _: 1
             }, 16, ["icon", "variant"])
-          ], 8, D)) : (d(), o(c, e({
+          ], 8, D)) : (n(), o(c, e({
             key: 3,
-            class: "w-full md:w-auto!",
+            class: "w-full min-[900px]:w-auto!",
             icon: t.addBtn.icon || "fluent:add-16-filled",
             variant: t.addBtn.variant || "primary"
           }, t.addBtn.buttonProps, {
-            onClick: w[0] || (w[0] = (I) => t.addBtn.onClick ? t.addBtn.onClick() : b("add"))
+            onClick: w[0] || (w[0] = (I) => t.addBtn.onClick ? t.addBtn.onClick() : C("add"))
           }), {
-            default: n(() => [
+            default: d(() => [
               i(r(l.value), 1)
             ]),
             _: 1
           }, 16, ["icon", "variant"]))
-        ], 64)) : k("", !0)
-      ], 64)) : k("", !0);
+        ], 64)) : s("", !0)
+      ], 64)) : s("", !0);
     };
   }
 });

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

@@ -2,7 +2,7 @@ import { defineComponent as p, computed as c, openBlock as n, createElementBlock
 import C from "../../Icon.vue.js";
 import g from "../../Tooltip.vue.js";
 import { $t as f } from "../../../utils/i18n.js";
-const v = { class: "flex flex-col" }, y = {
+const v = { class: "flex flex-col min-w-0" }, y = {
   key: 0,
   class: "flex items-center! gap-2"
 }, S = /* @__PURE__ */ p({

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

@@ -24,6 +24,15 @@ type __VLS_Props = {
     exportProps?: any;
     importProps?: any;
     screenState: any;
+    /**
+     * Layout mode.
+     * - `false` (default): "header" mode — the two logical groups are emitted as
+     *   sibling flex items (via a `display:contents` wrapper) so the parent header
+     *   grid can reflow them across breakpoints (see Screen.vue variant one).
+     * - `true`: "inline" mode — the groups render inside a self-contained flex row,
+     *   used by variant two where the toolbar sits next to the quick-filters.
+     */
+    inline?: boolean;
 };
 declare function __VLS_template(): {
     attrs: Partial<{}>;