vlite3 1.5.1 → 1.5.2

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<{}>;

package/components/Screen/components/ScreenToolbar.vue.js

@@ -1,15 +1,12 @@
-import { defineComponent as h, openBlock as o, createElementBlock as m, createElementVNode as u, createBlock as i, createCommentVNode as d, renderSlot as n, normalizeProps as r, guardReactiveProps as s, createVNode as c } from "vue";
-import f from "../../Button.vue.js";
-import v from "../../Input.vue.js";
+import { defineComponent as b, useSlots as R, computed as i, openBlock as o, createElementBlock as m, normalizeClass as s, createBlock as d, createCommentVNode as r, renderSlot as c, normalizeProps as f, guardReactiveProps as h, createVNode as w, createElementVNode as P } from "vue";
+import y from "../../Button.vue.js";
+import A from "../../Input.vue.js";
 /* empty css               */
-import w from "./ScreenViewToggle.vue.js";
-import y from "../ScreenFilter.vue.js";
-import S from "./ScreenAddAction.vue.js";
-import $ from "./ScreenOptionsDropdown.vue.js";
-const g = { class: "flex items-center gap-2 w-full sm:w-auto flex-1 md:flex-none justify-start sm:justify-end" }, B = {
-  key: 4,
-  class: "w-full md:w-60! max-sm:order-last"
-}, k = { class: "flex items-center gap-3 max-sm:w-full sm:w-auto max-sm:order-last" }, E = /* @__PURE__ */ h({
+import D from "./ScreenViewToggle.vue.js";
+import E from "../ScreenFilter.vue.js";
+import F from "./ScreenAddAction.vue.js";
+import z from "./ScreenOptionsDropdown.vue.js";
+const W = /* @__PURE__ */ b({
   __name: "ScreenToolbar",
   props: {
     selectedRows: {},
@@ -36,28 +33,53 @@ const g = { class: "flex items-center gap-2 w-full sm:w-auto flex-1 md:flex-none
     hasExportOrImport: { type: Boolean },
     exportProps: {},
     importProps: {},
-    screenState: {}
+    screenState: {},
+    inline: { type: Boolean }
   },
   emits: ["update:activeView", "update:activeFilters", "update:searchQuery", "delete", "refresh", "add", "select-dropdown"],
   setup(e) {
-    return (l, t) => (o(), m("div", null, [
-      u("div", g, [
-        e.selectedRows.length > 0 && !e.hideSelectable && !e.hideDeleteBtn ? (o(), i(f, {
+    const t = e, u = R(), p = i(
+      () => t.selectedRows.length > 0 && !t.hideSelectable && !t.hideDeleteBtn
+    ), v = i(() => !!t.filterSchema && t.filterSchema.length > 0), x = i(
+      () => p.value || t.hasMultipleViews || !!u["before-search"] || !!t.showRefresh || v.value || !!t.canSearch
+    ), S = i(
+      () => !!u.actions || !!t.addComponent || !!t.canAdd && !!t.addBtn
+    ), g = i(
+      () => S.value || !!t.hasExportOrImport || !!u["after-add"]
+    ), k = i(
+      () => t.inline ? "flex flex-col sm:flex-row items-stretch sm:items-center gap-2.5 w-full lg:w-auto justify-end" : "contents"
+    ), $ = i(
+      () => t.inline ? "flex items-center gap-2.5 w-full sm:w-auto min-w-0" : "order-2 min-[900px]:order-3 min-[1250px]:order-2 min-[900px]:col-span-2 min-[1250px]:col-span-1 flex items-center gap-2.5 min-w-0"
+    ), B = i(
+      () => t.inline ? "flex items-center gap-3 shrink-0 w-full sm:w-auto justify-end" : "order-3 min-[900px]:order-2 min-[1250px]:order-3 flex items-center gap-3 shrink-0 justify-end"
+    ), V = i(
+      () => t.inline ? "flex-1 sm:flex-none sm:w-56 lg:w-60 min-w-0" : "flex-1 min-w-0 min-[1250px]:flex-none min-[1250px]:w-60"
+    ), C = i(
+      () => t.inline ? "w-full sm:w-auto" : "flex-1 min-[900px]:flex-none min-w-0"
+    );
+    return (a, l) => (o(), m("div", {
+      class: s(k.value)
+    }, [
+      x.value ? (o(), m("div", {
+        key: 0,
+        class: s($.value)
+      }, [
+        p.value ? (o(), d(y, {
           key: 0,
           variant: "outline",
           class: "hover:bg-destructive/10 shrink-0 h-9! w-9!",
           icon: "lucide:trash-2",
           title: e.txtDeleteSelected,
-          onClick: t[0] || (t[0] = (a) => l.$emit("delete", e.selectedRows))
-        }, null, 8, ["title"])) : d("", !0),
-        e.hasMultipleViews ? (o(), i(w, {
+          onClick: l[0] || (l[0] = (n) => a.$emit("delete", e.selectedRows))
+        }, null, 8, ["title"])) : r("", !0),
+        e.hasMultipleViews ? (o(), d(D, {
           key: 1,
           "model-value": e.activeView,
-          "onUpdate:modelValue": t[1] || (t[1] = (a) => l.$emit("update:activeView", a)),
+          "onUpdate:modelValue": l[1] || (l[1] = (n) => a.$emit("update:activeView", n)),
           views: e.resolvedViews
-        }, null, 8, ["model-value", "views"])) : d("", !0),
-        n(l.$slots, "before-search", r(s(e.screenState))),
-        e.showRefresh ? (o(), i(f, {
+        }, null, 8, ["model-value", "views"])) : r("", !0),
+        c(a.$slots, "before-search", f(h(e.screenState))),
+        e.showRefresh ? (o(), d(y, {
           key: 2,
           variant: "outline",
           icon: "lucide:refresh-cw",
@@ -65,52 +87,63 @@ const g = { class: "flex items-center gap-2 w-full sm:w-auto flex-1 md:flex-none
           class: "shrink-0 h-9! w-9!",
           title: e.txtRefresh,
           disabled: e.loading,
-          onClick: t[2] || (t[2] = (a) => l.$emit("refresh"))
-        }, null, 8, ["title", "disabled"])) : d("", !0),
-        e.filterSchema && e.filterSchema.length > 0 ? (o(), i(y, {
+          onClick: l[2] || (l[2] = (n) => a.$emit("refresh"))
+        }, null, 8, ["title", "disabled"])) : r("", !0),
+        v.value ? (o(), d(E, {
           key: 3,
           schema: e.filterSchema,
           type: e.filterType,
           "model-value": e.activeFilters,
-          "onUpdate:modelValue": t[3] || (t[3] = (a) => l.$emit("update:activeFilters", a)),
-          onChange: t[4] || (t[4] = (a) => l.$emit("refresh"))
-        }, null, 8, ["schema", "type", "model-value"])) : d("", !0),
-        e.canSearch ? (o(), m("div", B, [
-          c(v, {
+          "onUpdate:modelValue": l[3] || (l[3] = (n) => a.$emit("update:activeFilters", n)),
+          onChange: l[4] || (l[4] = (n) => a.$emit("refresh"))
+        }, null, 8, ["schema", "type", "model-value"])) : r("", !0),
+        e.canSearch ? (o(), m("div", {
+          key: 4,
+          class: s(V.value)
+        }, [
+          w(A, {
             lazy: "",
             "model-value": e.searchQuery,
-            "onUpdate:modelValue": t[5] || (t[5] = (a) => l.$emit("update:searchQuery", String(a))),
+            "onUpdate:modelValue": l[5] || (l[5] = (n) => a.$emit("update:searchQuery", String(n))),
             icon: "lucide:search",
             placeholder: e.txtSearch,
             variant: "outline",
             class: "bg-background w-full",
             "show-clear-button": !0
           }, null, 8, ["model-value", "placeholder"])
-        ])) : d("", !0)
-      ]),
-      u("div", k, [
-        n(l.$slots, "actions", r(s(e.screenState)), () => [
-          c(S, {
-            "can-add": e.canAdd,
-            "add-component": e.addComponent,
-            "add-btn": e.addBtn,
-            loading: e.loading,
-            data: e.data,
-            refetch: e.refetch,
-            onAdd: t[6] || (t[6] = (a) => l.$emit("add"))
-          }, null, 8, ["can-add", "add-component", "add-btn", "loading", "data", "refetch"])
-        ]),
-        e.hasExportOrImport ? (o(), i($, {
+        ], 2)) : r("", !0)
+      ], 2)) : r("", !0),
+      g.value ? (o(), m("div", {
+        key: 1,
+        class: s(B.value)
+      }, [
+        P("div", {
+          class: s(C.value)
+        }, [
+          c(a.$slots, "actions", f(h(e.screenState)), () => [
+            w(F, {
+              "can-add": e.canAdd,
+              "add-component": e.addComponent,
+              "add-btn": e.addBtn,
+              loading: e.loading,
+              data: e.data,
+              refetch: e.refetch,
+              onAdd: l[6] || (l[6] = (n) => a.$emit("add"))
+            }, null, 8, ["can-add", "add-component", "add-btn", "loading", "data", "refetch"])
+          ])
+        ], 2),
+        e.hasExportOrImport ? (o(), d(z, {
           key: 0,
+          class: "shrink-0",
           "export-props": e.exportProps,
           "import-props": e.importProps,
-          onSelect: t[7] || (t[7] = (a) => l.$emit("select-dropdown", a))
-        }, null, 8, ["export-props", "import-props"])) : d("", !0),
-        n(l.$slots, "after-add", r(s(e.screenState)))
-      ])
-    ]));
+          onSelect: l[7] || (l[7] = (n) => a.$emit("select-dropdown", n))
+        }, null, 8, ["export-props", "import-props"])) : r("", !0),
+        c(a.$slots, "after-add", f(h(e.screenState)))
+      ], 2)) : r("", !0)
+    ], 2));
   }
 });
 export {
-  E as default
+  W as default
 };