vlite3 1.2.16 → 1.3.1

package/components/NumberInput.vue2.js

@@ -1,17 +1,17 @@
-import { defineComponent as E, ref as k, watch as p, computed as u, onBeforeUnmount as q, openBlock as f, createElementBlock as y, normalizeClass as i, withModifiers as r, createVNode as g, createCommentVNode as P, createElementVNode as h, withKeys as z } from "vue";
+import { defineComponent as E, ref as C, watch as q, computed as u, onBeforeUnmount as L, openBlock as f, createElementBlock as y, normalizeClass as r, withModifiers as i, createVNode as g, createCommentVNode as P, createElementVNode as h, withKeys as z } from "vue";
 import w from "./Icon.vue.js";
-const L = ["disabled", "data-testid"], M = ["value", "placeholder", "disabled", "readonly", "onKeydown", "data-testid"], U = ["disabled", "data-testid"], W = {
+const M = ["disabled", "data-testid"], U = ["value", "placeholder", "disabled", "readonly", "onKeydown", "data-testid"], W = ["disabled", "data-testid"], A = {
   key: 2,
-  class: "flex flex-col justify-center h-full py-[3px] pr-[3px]"
-}, A = { class: "flex flex-col h-full w-6 scale-80" }, D = ["disabled", "data-testid"], G = ["disabled", "data-testid"], O = /* @__PURE__ */ E({
+  class: "flex flex-col justify-center h-full py-[2px] pr-[2px]"
+}, D = { class: "flex flex-col h-full w-6 scale-85" }, G = ["disabled", "data-testid"], H = ["disabled", "data-testid"], Q = /* @__PURE__ */ E({
   __name: "NumberInput",
   props: {
     modelValue: { default: void 0 },
     min: {},
     max: {},
     step: { default: 1 },
-    variant: { default: "split" },
-    mode: { default: "outline" },
+    layout: { default: "split" },
+    variant: { default: "outline" },
     size: { default: "md" },
     disabled: { type: Boolean, default: !1 },
     placeholder: {},
@@ -22,14 +22,14 @@ const L = ["disabled", "data-testid"], M = ["value", "placeholder", "disabled",
   },
   emits: ["update:modelValue", "change", "focus", "blur"],
   setup(e, { emit: V }) {
-    const n = e, m = V, a = k(n.modelValue ?? "");
-    p(
+    const n = e, m = V, a = C(n.modelValue ?? "");
+    q(
       () => n.modelValue,
       (d) => {
         d !== void 0 && (a.value = d);
       }
     );
-    const B = k(null), c = u(() => {
+    const B = C(null), c = u(() => {
       const d = {
         xs: { h: "h-7", text: "text-xs", px: "px-2", icon: "w-3 h-3" },
         sm: { h: "h-8", text: "text-xs", px: "px-2", icon: "w-3.5 h-3.5" },
@@ -63,26 +63,26 @@ const L = ["disabled", "data-testid"], M = ["value", "placeholder", "disabled",
       "2xl": "rounded-r-2xl",
       full: "rounded-r-full"
     })[n.rounded] || "rounded-r-md"), F = u(() => [
-      "flex items-center w-full relative transition-all duration-200",
+      "flex items-center w-full relative transition-all duration-200 text-foreground",
       n.disabled ? "opacity-50 cursor-not-allowed" : "",
-      n.mode === "solid" ? "bg-muted" : "",
-      n.mode === "outline" ? "border border-input bg-background" : "",
-      n.mode === "ghost" ? "bg-transparent" : "",
+      n.variant === "solid" ? "bg-gray-100" : "",
+      n.variant === "outline" ? "border border-input bg-background" : "",
+      n.variant === "transparent" ? "bg-transparent" : "",
       c.value.h,
       I.value
     ]), K = u(() => [
-      "flex-1 w-full bg-transparent focus:outline-none appearance-none",
-      n.variant === "split" ? "text-center" : "text-left pl-3 pr-2",
+      "flex-1 w-full bg-transparent focus:outline-none appearance-none text-foreground",
+      n.layout === "split" ? "text-center" : "text-left pl-3 pr-2",
       "placeholder:text-muted-foreground/50",
       c.value.text,
       n.disabled ? "cursor-not-allowed" : ""
-    ]), C = u(() => {
-      const d = "flex items-center justify-center transition-colors active:scale-95 shrink-0 select-none", t = n.disabled ? "" : "hover:text-primary hover:bg-muted/50";
-      return n.size === "xs" || n.size, n.variant === "split" ? n.mode === "solid" ? [
+    ]), k = u(() => {
+      const d = "flex items-center justify-center transition-colors active:scale-95 shrink-0 select-none", t = n.disabled ? "" : "hover:text-primary hover:bg-accent";
+      return n.size === "xs" || n.size, n.layout === "split" ? n.variant === "solid" ? [
         d,
-        n.disabled ? "" : "hover:text-primary hover:bg-background/80",
-        "bg-background shadow-sm rounded-full mx-1 my-0.5 aspect-square self-center h-[calc(100%-12px)] w-auto max-w-[calc(100%-12px)] flex items-center justify-center"
-      ] : [d, t, "h-full", "px-2"] : [d, t, "h-1/2 w-8 border-l border-input/50"];
+        n.disabled ? "" : "hover:text-primary hover:bg-gray-100 shadow-sm",
+        "bg-background rounded-md mx-1 my-0.5 aspect-square self-center h-[calc(100%-8px)] w-auto max-w-[calc(100%-8px)] flex items-center justify-center text-foreground"
+      ] : [d, t, "h-full", "px-3", "text-gray-600 hover:text-gray-900"] : [d, t, "h-1/2 w-8 border-l border-input text-muted-foreground"];
     }), s = (d) => {
       if (n.disabled || n.readonly) return;
       let t = d;
@@ -123,34 +123,34 @@ const L = ["disabled", "data-testid"], M = ["value", "placeholder", "disabled",
       const t = parseFloat(String(a.value));
       isNaN(t) ? s(n.min || 0) : s(t);
     };
-    return q(() => {
+    return L(() => {
       l();
     }), (d, t) => (f(), y("div", {
-      class: i([F.value, "overflow-hidden"])
+      class: r([F.value, "overflow-hidden"])
     }, [
-      e.variant === "split" && !e.disabled && !e.readonly ? (f(), y("button", {
+      e.layout === "split" && !e.disabled && !e.readonly ? (f(), y("button", {
         key: 0,
         tabindex: "-1",
         type: "button",
-        class: i([
-          C.value,
-          e.mode === "outline" ? "border-r border-input" : "",
-          e.variant === "split" && e.mode !== "solid" ? j.value : ""
+        class: r([
+          k.value,
+          e.variant === "outline" ? "border-r border-input" : "",
+          e.layout === "split" && e.variant !== "solid" ? j.value : ""
         ]),
         disabled: e.disabled || e.min !== void 0 && Number(a.value) <= e.min,
         onPointerdown: t[0] || (t[0] = (o) => v("dec", o)),
         onPointerup: l,
         onPointerleave: l,
         onPointercancel: l,
-        onContextmenu: t[1] || (t[1] = r(() => {
+        onContextmenu: t[1] || (t[1] = i(() => {
         }, ["prevent"])),
         "data-testid": d.$attrs["data-testid"] ? `${d.$attrs["data-testid"]}-dec` : e.name ? `number-${e.name}-dec` : e.id ? `number-${e.id}-dec` : "number-input-dec"
       }, [
         g(w, {
           icon: "lucide:minus",
-          class: i(c.value.icon)
+          class: r(c.value.icon)
         }, null, 8, ["class"])
-      ], 42, L)) : P("", !0),
+      ], 42, M)) : P("", !0),
       h("input", {
         ref_key: "inputRef",
         ref: B,
@@ -159,86 +159,86 @@ const L = ["disabled", "data-testid"], M = ["value", "placeholder", "disabled",
         placeholder: e.placeholder,
         disabled: e.disabled,
         readonly: e.readonly,
-        class: i(K.value),
+        class: r(K.value),
         onInput: R,
         onFocus: t[2] || (t[2] = (o) => m("focus", o)),
         onBlur: T,
         onKeydown: [
-          z(r($, ["prevent"]), ["up"]),
-          z(r(N, ["prevent"]), ["down"])
+          z(i($, ["prevent"]), ["up"]),
+          z(i(N, ["prevent"]), ["down"])
         ],
-        onWheel: t[3] || (t[3] = r(() => {
+        onWheel: t[3] || (t[3] = i(() => {
         }, ["prevent"])),
-        onInvalid: t[4] || (t[4] = r(() => {
+        onInvalid: t[4] || (t[4] = i(() => {
         }, ["prevent"])),
         "data-testid": d.$attrs["data-testid"] || (e.name ? `number-${e.name}` : e.id ? `number-${e.id}` : "number-input")
-      }, null, 42, M),
-      e.variant === "split" && !e.disabled && !e.readonly ? (f(), y("button", {
+      }, null, 42, U),
+      e.layout === "split" && !e.disabled && !e.readonly ? (f(), y("button", {
         key: 1,
         tabindex: "-1",
         type: "button",
-        class: i([
-          C.value,
-          e.mode === "outline" ? "border-l border-input" : "",
-          e.variant === "split" && e.mode !== "solid" ? S.value : ""
+        class: r([
+          k.value,
+          e.variant === "outline" ? "border-l border-input" : "",
+          e.layout === "split" && e.variant !== "solid" ? S.value : ""
         ]),
         disabled: e.disabled || e.max !== void 0 && Number(a.value) >= e.max,
         onPointerdown: t[5] || (t[5] = (o) => v("inc", o)),
         onPointerup: l,
         onPointerleave: l,
         onPointercancel: l,
-        onContextmenu: t[6] || (t[6] = r(() => {
+        onContextmenu: t[6] || (t[6] = i(() => {
         }, ["prevent"])),
         "data-testid": d.$attrs["data-testid"] ? `${d.$attrs["data-testid"]}-inc` : e.name ? `number-${e.name}-inc` : e.id ? `number-${e.id}-inc` : "number-input-inc"
       }, [
         g(w, {
           icon: "lucide:plus",
-          class: i(c.value.icon)
+          class: r(c.value.icon)
         }, null, 8, ["class"])
-      ], 42, U)) : P("", !0),
-      e.variant === "stacked" && !e.disabled && !e.readonly ? (f(), y("div", W, [
-        h("div", A, [
+      ], 42, W)) : P("", !0),
+      e.layout === "stacked" && !e.disabled && !e.readonly ? (f(), y("div", A, [
+        h("div", D, [
           h("button", {
             tabindex: "-1",
             type: "button",
-            class: "flex-1 flex items-center justify-center bg-gray-100 hover:bg-gray-200 text-muted-foreground hover:text-foreground rounded-t-[3px] border-b border-gray-300 transition-colors disabled:cursor-not-allowed",
+            class: r(["flex-1 flex items-center justify-center hover:text-foreground rounded-t-[3px] border-b border-input transition-colors disabled:cursor-not-allowed", e.variant === "solid" ? "bg-background hover:bg-gray-100 text-foreground" : "bg-gray-100 hover:bg-gray-200 text-gray-600"]),
             disabled: e.disabled || e.max !== void 0 && Number(a.value) >= e.max,
             onPointerdown: t[7] || (t[7] = (o) => v("inc", o)),
             onPointerup: l,
             onPointerleave: l,
             onPointercancel: l,
-            onContextmenu: t[8] || (t[8] = r(() => {
+            onContextmenu: t[8] || (t[8] = i(() => {
             }, ["prevent"])),
             "data-testid": d.$attrs["data-testid"] ? `${d.$attrs["data-testid"]}-inc` : e.name ? `number-${e.name}-inc` : e.id ? `number-${e.id}-inc` : "number-input-inc"
           }, [
             g(w, {
-              class: i(["text-gray-700/85!", e.size === "xs" || e.size === "sm" ? "w-3 h-3" : "w-3.5 h-3.5"]),
+              class: r(["text-current", e.size === "xs" || e.size === "sm" ? "w-3 h-3" : "w-3.5 h-3.5"]),
               icon: "mynaui:chevron-up-solid"
             }, null, 8, ["class"])
-          ], 40, D),
+          ], 42, G),
           h("button", {
             tabindex: "-1",
             type: "button",
-            class: "flex-1 flex items-center justify-center bg-gray-100 hover:bg-gray-200 text-muted-foreground hover:text-foreground rounded-b-[3px] transition-colors disabled:cursor-not-allowed",
+            class: r(["flex-1 flex items-center justify-center hover:text-foreground rounded-b-[3px] transition-colors disabled:cursor-not-allowed", e.variant === "solid" ? "bg-background hover:bg-gray-100 text-foreground" : "bg-gray-100 hover:bg-gray-200 text-gray-600"]),
             disabled: e.disabled || e.min !== void 0 && Number(a.value) <= e.min,
             onPointerdown: t[9] || (t[9] = (o) => v("dec", o)),
             onPointerup: l,
             onPointerleave: l,
             onPointercancel: l,
-            onContextmenu: t[10] || (t[10] = r(() => {
+            onContextmenu: t[10] || (t[10] = i(() => {
             }, ["prevent"])),
             "data-testid": d.$attrs["data-testid"] ? `${d.$attrs["data-testid"]}-dec` : e.name ? `number-${e.name}-dec` : e.id ? `number-${e.id}-dec` : "number-input-dec"
           }, [
             g(w, {
-              class: i(["text-gray-700/85!", e.size === "xs" || e.size === "sm" ? "w-3 h-3" : "w-3.5 h-3.5"]),
+              class: r(["text-current", e.size === "xs" || e.size === "sm" ? "w-3 h-3" : "w-3.5 h-3.5"]),
               icon: "mynaui:chevron-down-solid"
             }, null, 8, ["class"])
-          ], 40, G)
+          ], 42, H)
         ])
       ])) : P("", !0)
     ], 2));
   }
 });
 export {
-  O as default
+  Q as default
 };

package/components/Screen/Screen.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent as Re, useSlots as qe, computed as n, markRaw as T, ref as p, provide as K, watch as L, openBlock as d, createElementBlock as h, normalizeClass as C, Fragment as A, createElementVNode as U, createVNode as V, createSlots as le, withCtx as b, renderSlot as s, normalizeProps as c, guardReactiveProps as w, mergeProps as y, createBlock as j, createCommentVNode as R, unref as O, resolveDynamicComponent as Ee, toDisplayString as Qe } from "vue";
+import { defineComponent as Re, useSlots as qe, computed as n, markRaw as T, ref as p, provide as K, watch as L, openBlock as d, createElementBlock as h, normalizeClass as D, Fragment as A, createElementVNode as U, createVNode as C, createSlots as le, withCtx as b, renderSlot as s, normalizeProps as c, guardReactiveProps as w, mergeProps as y, createBlock as j, createCommentVNode as R, unref as O, resolveDynamicComponent as Ee, toDisplayString as Qe } from "vue";
 import Ae from "../ConfirmationModal.vue.js";
 import Ue from "../Pagination/Pagination.vue.js";
 import je from "../ImportData/ImportData.vue.js";
@@ -13,12 +13,15 @@ import ne from "./components/ScreenQuickFilters.vue.js";
 import se from "./components/ScreenToolbar.vue.js";
 import Oe from "../Stats/Stats.vue.js";
 const ze = { key: 0 }, Xe = {
+  key: 2,
+  class: "-mt-1.5 w-full min-w-0 overflow-hidden mb-3.5"
+}, Ye = {
   key: 6,
   class: "p-8 text-center text-muted-foreground border border-dashed border-border rounded-lg"
-}, Ye = {
+}, Ge = {
   key: 2,
   class: "-mt-2"
-}, Ge = { key: 4 }, ct = /* @__PURE__ */ Re({
+}, Je = { key: 4 }, ut = /* @__PURE__ */ Re({
   __name: "Screen",
   props: {
     name: { default: "" },
@@ -90,7 +93,7 @@ const ze = { key: 0 }, Xe = {
   },
   emits: ["add", "delete"],
   setup(t, { emit: oe }) {
-    const a = t, F = He(), z = oe, g = qe(), re = n(() => a.name || a.title || "default-screen"), de = n(() => {
+    const a = t, I = He(), z = oe, g = qe(), re = n(() => a.name || a.title || "default-screen"), de = n(() => {
       const e = f("vlite.screen.tableView");
       return e !== "vlite.screen.tableView" ? e : "Table View";
     }), ce = n(() => {
@@ -132,10 +135,10 @@ const ze = { key: 0 }, Xe = {
       }), e;
     });
     n(() => S.value.map((e) => e.key));
-    const X = n(() => S.value.length > 1), fe = n(() => S.value.length > 0 ? S.value[0].key : "table"), u = Ne(`view-mode-${re.value}`, fe.value), Y = n(() => S.value.find((i) => i.key === u.value)?.component ?? null), I = n(() => u.value === "table" && g.table ? "table" : u.value === "list" && g.list ? "list" : u.value === "list" && g.grid ? "grid" : u.value === "kanban" && g.kanban ? "kanban" : u.value === "calendar" && g.calendar ? "calendar" : null), k = p(""), m = p({}), $ = p({ field: "", order: "" }), P = p(a.pageInfo?.currentPage || 1), q = p(a.pageInfo?.itemsPerPage || a.paginationProps?.itemsPerPage || 10), o = p([]), E = p([]), B = p(!1), v = p(
+    const X = n(() => S.value.length > 1), fe = n(() => S.value.length > 0 ? S.value[0].key : "table"), u = Ne(`view-mode-${re.value}`, fe.value), Y = n(() => S.value.find((i) => i.key === u.value)?.component ?? null), F = n(() => u.value === "table" && g.table ? "table" : u.value === "list" && g.list ? "list" : u.value === "list" && g.grid ? "grid" : u.value === "kanban" && g.kanban ? "kanban" : u.value === "calendar" && g.calendar ? "calendar" : null), k = p(""), m = p({}), $ = p({ field: "", order: "" }), P = p(a.pageInfo?.currentPage || 1), q = p(a.pageInfo?.itemsPerPage || a.paginationProps?.itemsPerPage || 10), o = p([]), E = p([]), B = p(!1), v = p(
       a.defaultQuickFilter !== void 0 ? a.defaultQuickFilter : a.quickFilters && a.quickFilters.length > 0 ? a.quickFilters[0].value : ""
     ), G = n(() => !a.quickFilters || a.quickFilters.length === 0 ? !1 : a.skipQuickFilterViews && a.skipQuickFilterViews.length > 0 ? !a.skipQuickFilterViews.includes(u.value) : !0), J = (e) => {
-      v.value = e, P.value = 1, D();
+      v.value = e, P.value = 1, V();
     }, W = n(() => k.value && k.value.trim() !== "" || v.value !== "" && v.value !== null && v.value !== void 0 ? !0 : m.value ? Object.keys(m.value).some(
       (e) => m.value[e] !== "" && m.value[e] !== null && m.value[e] !== void 0
     ) : !1), Z = n(() => a.data && a.data.length > 0), me = n(() => !a.skipEmptyViews || a.skipEmptyViews.length === 0 ? !1 : a.skipEmptyViews.includes(u.value)), r = n(() => ({
@@ -153,7 +156,7 @@ const ze = { key: 0 }, Xe = {
     })), pe = {
       forceSelectable: !a.hideSelectable,
       onTableChange: (e) => {
-        $.value = { field: e.sort.field, order: e.sort.order }, D();
+        $.value = { field: e.sort.field, order: e.sort.order }, V();
       }
     };
     K(Me, pe), K("screen-selected-rows", o), K("screen-request-delete", (e) => x(e));
@@ -178,14 +181,14 @@ const ze = { key: 0 }, Xe = {
     let N = null;
     L(k, () => {
       N && clearTimeout(N), N = setTimeout(() => {
-        P.value = 1, D();
+        P.value = 1, V();
       }, 300);
     });
     const ye = (e) => {
-      P.value = e, D();
+      P.value = e, V();
     }, ge = (e) => {
-      q.value = e, P.value = 1, D();
-    }, D = () => {
+      q.value = e, P.value = 1, V();
+    }, V = () => {
       if (!a.refetch) return;
       const e = { ...m.value };
       v.value !== "" && v.value !== null && v.value !== void 0 && (e[a.quickFilterKey] = v.value);
@@ -237,7 +240,7 @@ const ze = { key: 0 }, Xe = {
         title: e.label || e.title || e.name || e.field,
         required: e.required || !1
       }))
-    ), Fe = async (e) => F?.services?.importApi && a.importType ? await F.services.importApi(a.importType, e) : (console.warn(
+    ), Ie = async (e) => I?.services?.importApi && a.importType ? await I.services.importApi(a.importType, e) : (console.warn(
       "VLite Screen: No importApi configured or no importType provided for generic import."
     ), {
       processed: e.data.length,
@@ -246,10 +249,10 @@ const ze = { key: 0 }, Xe = {
       skipped: 0,
       failed: 0,
       errors: []
-    }), Ie = () => D(), Be = n(
-      () => a.exportMode || F?.exportData?.mode || "frontend"
+    }), Fe = () => V(), Be = n(
+      () => a.exportMode || I?.exportData?.mode || "frontend"
     ), Te = async (e) => {
-      F?.services?.exportApi && a.exportType ? await F.services.exportApi(a.exportType, {
+      I?.services?.exportApi && a.exportType ? await I.services.exportApi(a.exportType, {
         format: e,
         search: k.value,
         filter: m.value
@@ -258,20 +261,20 @@ const ze = { key: 0 }, Xe = {
       );
     };
     return (e, i) => (d(), h("div", {
-      class: C(["flex flex-col w-full space-y-8", t.containerClass])
+      class: D(["flex flex-col w-full space-y-8", t.containerClass])
     }, [
       t.variant === "two" ? (d(), h(A, { key: 0 }, [
         t.customHeader ? s(e.$slots, "custom-header", c(y({ key: 1 }, r.value))) : (d(), h("div", {
           key: 0,
-          class: C([t.headerClass, "flex flex-col space-y-6"])
+          class: D([t.headerClass, "flex flex-col space-y-6"])
         }, [
           U("div", {
-            class: C([
+            class: D([
               "flex flex-col md:flex-row justify-between items-start md:items-center gap-4",
               t.topHeaderClass
             ])
           }, [
-            V(ie, {
+            C(ie, {
               title: t.title,
               "title-i18n": t.titleI18n,
               "title-class": t.titleClass,
@@ -297,18 +300,18 @@ const ze = { key: 0 }, Xe = {
               } : void 0
             ]), 1032, ["title", "title-i18n", "title-class", "description", "description-i18n", "description-class", "info", "info-i18n"]),
             t.stats && t.stats.length > 0 ? (d(), h("div", ze, [
-              V(Oe, y({ items: t.stats }, t.statsProps), null, 16, ["items"])
+              C(Oe, y({ items: t.stats }, t.statsProps), null, 16, ["items"])
             ])) : s(e.$slots, "header-stats", { key: 1 })
           ], 2),
           U("div", {
-            class: C([
+            class: D([
               "flex flex-col lg:flex-row lg:items-center justify-between gap-4",
               t.bottomHeaderClass
             ])
           }, [
             U("div", {
-              class: C([
-                "flex-1 w-full flex items-center justify-start overflow-x-auto pt-1.5",
+              class: D([
+                "flex-1 w-full min-w-0 flex items-center justify-start overflow-hidden pt-1.5",
                 t.filtersContainerClass
               ])
             }, [
@@ -321,8 +324,8 @@ const ze = { key: 0 }, Xe = {
                 onChange: J
               }, null, 8, ["modelValue", "options", "variant"])) : R("", !0)
             ], 2),
-            V(se, {
-              class: C([
+            C(se, {
+              class: D([
                 "flex items-center gap-2.5 max-sm:w-full sm:w-auto justify-end",
                 t.actionsContainerClass
               ]),
@@ -355,7 +358,7 @@ const ze = { key: 0 }, Xe = {
               "onUpdate:activeView": i[1] || (i[1] = (l) => u.value = l),
               "onUpdate:searchQuery": i[2] || (i[2] = (l) => k.value = l),
               "onUpdate:activeFilters": i[3] || (i[3] = (l) => m.value = l),
-              onRefresh: D,
+              onRefresh: V,
               onAdd: i[4] || (i[4] = (l) => e.$emit("add")),
               onSelectDropdown: ae
             }, {
@@ -376,9 +379,9 @@ const ze = { key: 0 }, Xe = {
       ], 64)) : (d(), h(A, { key: 1 }, [
         t.customHeader ? s(e.$slots, "custom-header", c(y({ key: 1 }, r.value))) : (d(), h("div", {
           key: 0,
-          class: C([t.headerClass, "flex flex-col md:flex-row sm:items-start md:items-center justify-between gap-4"])
+          class: D([t.headerClass, "flex flex-col md:flex-row sm:items-start md:items-center justify-between gap-4"])
         }, [
-          V(ie, {
+          C(ie, {
             title: t.title,
             "title-i18n": t.titleI18n,
             "title-class": t.titleClass,
@@ -403,7 +406,7 @@ const ze = { key: 0 }, Xe = {
               key: "1"
             } : void 0
           ]), 1032, ["title", "title-i18n", "title-class", "description", "description-i18n", "description-class", "info", "info-i18n"]),
-          V(se, {
+          C(se, {
             class: "flex flex-col sm:flex-row items-start sm:items-center gap-2.5 w-full justify-end",
             "selected-rows": o.value,
             "hide-selectable": t.hideSelectable,
@@ -434,7 +437,7 @@ const ze = { key: 0 }, Xe = {
             "onUpdate:activeView": i[5] || (i[5] = (l) => u.value = l),
             "onUpdate:searchQuery": i[6] || (i[6] = (l) => k.value = l),
             "onUpdate:activeFilters": i[7] || (i[7] = (l) => m.value = l),
-            onRefresh: D,
+            onRefresh: V,
             onAdd: i[8] || (i[8] = (l) => e.$emit("add")),
             onSelectDropdown: ae
           }, {
@@ -451,21 +454,18 @@ const ze = { key: 0 }, Xe = {
           }, 8, ["selected-rows", "hide-selectable", "hide-delete-btn", "txt-delete-selected", "has-multiple-views", "active-view", "resolved-views", "show-refresh", "loading", "txt-refresh", "filter-schema", "filter-type", "active-filters", "can-search", "search-query", "txt-search", "can-add", "add-component", "add-btn", "data", "refetch", "has-export-or-import", "export-props", "import-props", "screen-state"])
         ], 2)),
         s(e.$slots, "sub-header", c(w(r.value))),
-        G.value ? (d(), h("div", {
-          key: 2,
-          class: C(["-mt-1 max-sm:hidden!", t.quickFilterVariant == "line" ? "mb-1.5 sm:mb-3" : "mb-3.5"])
-        }, [
-          V(ne, {
+        G.value ? (d(), h("div", Xe, [
+          C(ne, {
             modelValue: v.value,
             "onUpdate:modelValue": i[9] || (i[9] = (l) => v.value = l),
             options: t.quickFilters,
             variant: t.quickFilterVariant,
             onChange: J
           }, null, 8, ["modelValue", "options", "variant"])
-        ], 2)) : R("", !0)
+        ])) : R("", !0)
       ], 64)),
       U("div", {
-        class: C(["flex-1 w-full relative", t.mainContainerClass])
+        class: D(["flex-1 w-full relative", t.mainContainerClass])
       }, [
         !Z.value && !t.loading && !me.value ? (d(), h(A, { key: 0 }, [
           e.$slots.empty ? s(e.$slots, "empty", c(y({ key: 0 }, r.value))) : (d(), j(Ke, {
@@ -481,35 +481,35 @@ const ze = { key: 0 }, Xe = {
             "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(), h(A, { key: 1 }, [
-          I.value === "table" ? s(e.$slots, "table", y({
+          F.value === "table" ? s(e.$slots, "table", y({
             key: 0,
             data: t.data,
             loading: t.loading,
             selectedRows: o.value,
             delete: x,
             updateSelectedRows: (l) => o.value = l
-          }, r.value)) : I.value === "list" ? s(e.$slots, "list", y({
+          }, r.value)) : F.value === "list" ? s(e.$slots, "list", y({
             key: 1,
             data: t.data,
             loading: t.loading,
             selectedRows: o.value,
             delete: x,
             updateSelectedRows: (l) => o.value = l
-          }, r.value)) : I.value === "grid" ? s(e.$slots, "grid", y({
+          }, r.value)) : F.value === "grid" ? s(e.$slots, "grid", y({
             key: 2,
             data: t.data,
             loading: t.loading,
             selectedRows: o.value,
             delete: x,
             updateSelectedRows: (l) => o.value = l
-          }, r.value)) : I.value === "kanban" ? s(e.$slots, "kanban", y({
+          }, r.value)) : F.value === "kanban" ? s(e.$slots, "kanban", y({
             key: 3,
             data: t.data,
             loading: t.loading,
             selectedRows: o.value,
             delete: x,
             updateSelectedRows: (l) => o.value = l
-          }, r.value)) : I.value === "calendar" ? s(e.$slots, "calendar", y({
+          }, r.value)) : F.value === "calendar" ? s(e.$slots, "calendar", y({
             key: 4,
             data: t.data,
             loading: t.loading,
@@ -525,11 +525,11 @@ const ze = { key: 0 }, Xe = {
             "onUpdate:selectedRows": i[10] || (i[10] = (l) => o.value = l),
             delete: x,
             onDelete: we
-          }, t.viewProps), null, 16, ["data", "loading", "refetch", "selectedRows"])) : (d(), h("div", Xe, Qe(Ve.value), 1))
+          }, t.viewProps), null, 16, ["data", "loading", "refetch", "selectedRows"])) : (d(), h("div", Ye, Qe(Ve.value), 1))
         ], 64))
       ], 2),
-      t.pagination && t.pageInfo && t.pageInfo.totalPages > 1 ? (d(), h("div", Ye, [
-        V(O(Ue), y({
+      t.pagination && t.pageInfo && t.pageInfo.totalPages > 1 ? (d(), h("div", Ge, [
+        C(O(Ue), y({
           "current-page": t.pageInfo.currentPage,
           "total-pages": t.pageInfo.totalPages,
           "total-items": t.pageInfo.totalItems
@@ -538,7 +538,7 @@ const ze = { key: 0 }, Xe = {
           "onUpdate:itemsPerPage": ge
         }), null, 16, ["current-page", "total-pages", "total-items"])
       ])) : R("", !0),
-      V(Ae, {
+      C(Ae, {
         show: B.value,
         "onUpdate:show": i[11] || (i[11] = (l) => B.value = l),
         title: ke.value,
@@ -559,15 +559,15 @@ const ze = { key: 0 }, Xe = {
         "export-props": t.exportProps,
         "on-export": Te
       }, null, 8, ["show", "data", "fields", "mode", "export-props"])) : R("", !0),
-      H.value ? (d(), h("div", Ge, [
-        V(je, y({
+      H.value ? (d(), h("div", Je, [
+        C(je, y({
           show: M.value,
           "onUpdate:show": i[14] || (i[14] = (l) => M.value = l),
           ref_key: "importDataRef",
           ref: Se,
           fields: $e.value,
-          processBatch: Fe,
-          onComplete: Ie
+          processBatch: Ie,
+          onComplete: Fe
         }, typeof t.importProps == "object" ? t.importProps : {}, {
           title: De.value,
           class: "hidden!"
@@ -577,5 +577,5 @@ const ze = { key: 0 }, Xe = {
   }
 });
 export {
-  ct as default
+  ut as default
 };

package/components/Screen/ScreenFilter.vue.js

@@ -14,7 +14,7 @@ import "v-datepicker-lite";
 import "v-datepicker-lite/style.css";
 import "@jaames/iro";
 import "@vueuse/core";
-/* empty css                           */
+/* empty css                          */
 import "iconify-icon-picker";
 import "iconify-icon-picker/style.css";
 /* empty css                        */
@@ -127,7 +127,7 @@ const N = { class: "text-gray-800! h-4! w-4! flex items-center justify-center" }
       "onUpdate:isOpen": t[4] || (t[4] = (c) => s.value = c),
       "close-on-select": !1,
       position: "bottom-end",
-      maxHeight: "400px",
+      maxHeight: "430px",
       "class-name": "pb-0! always-scroll",
       class: "w-auto"
     }, {

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

@@ -1,6 +1,6 @@
-import { defineComponent as s, computed as i, openBlock as r, createElementBlock as u, createVNode as m, unref as d } from "vue";
+import { defineComponent as i, computed as s, openBlock as r, createElementBlock as u, createVNode as m, unref as d } from "vue";
 import b from "../../Tabes/Tabes.vue.js";
-const p = { class: "w-max" }, g = /* @__PURE__ */ s({
+const p = { class: "w-full min-w-0" }, g = /* @__PURE__ */ i({
   __name: "ScreenQuickFilters",
   props: {
     modelValue: {},
@@ -9,7 +9,7 @@ const p = { class: "w-max" }, g = /* @__PURE__ */ s({
   },
   emits: ["update:modelValue", "change"],
   setup(a, { emit: l }) {
-    const o = a, n = l, t = i(
+    const o = a, n = l, t = s(
       () => o.options.map((e) => ({
         value: e.value,
         icon: e.icon,

package/components/Switch.vue.js

@@ -28,7 +28,7 @@ const w = { class: "flex flex-col gap-0.5 min-w-0" }, p = {
     );
     return (l, $) => e.variant === "card" ? (n(), s("div", {
       key: 0,
-      class: i(["flex items-start justify-between gap-4 w-full rounded-md border border-border bg-background px-4 py-3 cursor-pointer", e.disabled ? "opacity-50 pointer-events-none" : ""]),
+      class: i(["flex items-center justify-between gap-4 w-full rounded-md border border-border bg-background px-4 py-3 cursor-pointer", e.disabled ? "opacity-50 pointer-events-none" : ""]),
       onClick: r
     }, [
       o("div", w, [
@@ -48,7 +48,10 @@ const w = { class: "flex flex-col gap-0.5 min-w-0" }, p = {
       }, [
         o("span", {
           "aria-hidden": "true",
-          class: i(["pointer-events-none inline-block h-4.5 w-4.5 transform rounded-full bg-background shadow-lg ring-0 transition duration-200 ease-in-out", e.modelValue ? "translate-x-5 rtl:translate-x-0" : "translate-x-0 rtl:-translate-x-5"])
+          class: i([
+            "pointer-events-none inline-block h-4.5 w-4.5 transform rounded-full bg-background shadow-lg ring-0 transition duration-200 ease-in-out",
+            e.modelValue ? "translate-x-5 rtl:translate-x-0" : "translate-x-0 rtl:-translate-x-5"
+          ])
         }, null, 2)
       ], 10, y)
     ], 2)) : (n(), s("div", {
@@ -68,7 +71,10 @@ const w = { class: "flex flex-col gap-0.5 min-w-0" }, p = {
       }, [
         o("span", {
           "aria-hidden": "true",
-          class: i(["pointer-events-none inline-block h-4.5 w-4.5 transform rounded-full bg-background shadow-lg ring-0 transition duration-200 ease-in-out", e.modelValue ? "translate-x-5 rtl:translate-x-0" : "translate-x-0 rtl:-translate-x-5"])
+          class: i([
+            "pointer-events-none inline-block h-4.5 w-4.5 transform rounded-full bg-background shadow-lg ring-0 transition duration-200 ease-in-out",
+            e.modelValue ? "translate-x-5 rtl:translate-x-0" : "translate-x-0 rtl:-translate-x-5"
+          ])
         }, null, 2)
       ], 10, x),
       t.value ? (n(), s("label", {

package/components/Tabes/Tabes.vue.d.ts

@@ -25,6 +25,7 @@ declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, imp
     block: boolean;
     wrap: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    scrollRef: HTMLDivElement;
     containerRef: HTMLDivElement;
-}, any>;
+}, HTMLDivElement>;
 export default _default;

package/components/Tabes/Tabes.vue.js

@@ -1,7 +1,7 @@
 import o from "./Tabes.vue2.js";
 /* empty css           */
 import t from "../../_virtual/_plugin-vue_export-helper.js";
-const f = /* @__PURE__ */ t(o, [["__scopeId", "data-v-1e044fd1"]]);
+const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-d8420cf9"]]);
 export {
-  f as default
+  m as default
 };