vlite3 1.4.33 → 1.4.34

package/README.md

@@ -20,6 +20,13 @@ yarn add vlite3
 
 ```
 
+### Server-side rendering
+
+The package entry is safe to evaluate during Vue SSR. Browser-only export,
+import, barcode, QR-code, and scroll-reveal runtimes are loaded lazily when
+their client-side actions or lifecycle hooks run. SSR applications can import
+VLite3 components normally without evaluating those dependencies on the server.
+
 ## 2. Tailwind CSS Setup (Tailwind v4)
 
 `vite.config.ts`

package/components/Alert.vue.js

@@ -1,10 +1,10 @@
-import { defineComponent as V, ref as B, computed as t, useSlots as N, openBlock as r, createElementBlock as i, normalizeClass as l, renderSlot as p, createBlock as S, createCommentVNode as a, createElementVNode as v, toDisplayString as f, createTextVNode as T, createVNode as j } from "vue";
-import b from "./Icon.vue.js";
-import { $t as m } from "../utils/i18n.js";
-const D = ["role"], E = {
+import { defineComponent as $, useSlots as S, ref as T, computed as t, openBlock as r, createElementBlock as i, normalizeClass as n, renderSlot as v, createBlock as D, createCommentVNode as a, createElementVNode as f, toDisplayString as b, unref as E, createTextVNode as z, createVNode as A } from "vue";
+import m from "./Icon.vue.js";
+import { $t as y } from "../utils/i18n.js";
+const O = ["role"], R = {
   key: 1,
   class: "text-sm opacity-90 [&_p]:leading-relaxed"
-}, R = /* @__PURE__ */ V({
+}, F = /* @__PURE__ */ $({
   __name: "Alert",
   props: {
     title: {},
@@ -18,71 +18,76 @@ const D = ["role"], E = {
     class: { default: "" }
   },
   emits: ["close"],
-  setup(s, { emit: y }) {
-    const e = s, x = y, u = B(!0), h = () => {
-      u.value = !1, x("close");
-    }, d = t(() => e.titleI18n ? m(e.titleI18n) : e.title), c = t(
-      () => e.descriptionI18n ? m(e.descriptionI18n) : e.description
-    ), k = t(() => ({
+  setup(s, { emit: x }) {
+    const e = s, h = x, c = S(), d = T(!0), k = () => {
+      d.value = !1, h("close");
+    }, g = t(() => e.titleI18n ? y(e.titleI18n) : e.title), u = t(() => e.descriptionI18n ? y(e.descriptionI18n) : e.description), w = t(() => ({
       danger: "bg-danger-subtle text-danger-subtle-fg border-danger-subtle-border/20",
       primary: "bg-primary-light text-primary-light-fg border-primary/10",
       success: "bg-success-subtle text-success-subtle-fg border-success-subtle-border/20",
       warning: "bg-warning-subtle text-warning-subtle-fg border-warning-subtle-border/20"
-    })[e.variant]), w = t(() => ({
+    })[e.variant]), C = t(() => ({
       primary: "text-primary-light-fg!",
       success: "text-success-subtle-fg!",
       warning: "text-warning-subtle-fg!",
       danger: "text-danger-subtle-fg!"
-    })[e.variant]), o = t(() => !c.value && !N().default), C = t(() => [
-      "relative w-full rounded-lg border px-4 [&>svg]:absolute [&>svg]:left-4 [&>svg]:text-foreground",
-      o.value ? "py-3" : "pt-4 pb-2",
-      o.value ? "[&>svg]:top-1/2 [&>svg]:-translate-y-1/2" : "[&>svg]:top-4 top-4 [&>svg+div]:translate-y-[-3px]",
-      k.value,
+    })[e.variant]), I = t(() => !!(e.icon || c.icon)), l = t(() => !u.value && !c.default), B = t(() => [
+      "relative w-full rounded-lg border px-4",
+      "[&>svg]:absolute [&>svg]:left-4 [&>svg]:text-foreground",
+      l.value ? "py-3" : "pt-4 pb-2",
+      l.value ? "[&>svg]:top-1/2 [&>svg]:-translate-y-1/2" : "[&>svg]:top-4 [&>svg+div]:translate-y-[-3px]",
+      w.value,
       e.class
-    ].join(" ")), I = t(() => [
+    ]), V = t(() => [
       "font-medium leading-none tracking-tight text-inherit!",
-      o.value ? "" : "mb-1"
-    ].join(" ")), $ = t(() => e.role ? e.role : ["danger", "warning"].includes(e.variant) ? "alert" : "status");
-    return (n, g) => u.value ? (r(), i("div", {
+      !l.value && "mb-1"
+    ]), N = t(() => e.role ? e.role : ["danger", "warning"].includes(e.variant) ? "alert" : "status");
+    return (o, p) => d.value ? (r(), i("div", {
       key: 0,
-      class: l(C.value),
-      role: $.value
+      class: n(B.value),
+      role: N.value
     }, [
-      p(n.$slots, "icon", {}, () => [
-        s.icon ? (r(), S(b, {
+      v(o.$slots, "icon", {}, () => [
+        s.icon ? (r(), D(m, {
           key: 0,
           icon: s.icon,
-          class: l(["h-4 w-4", w.value])
+          class: n(["h-4 w-4", C.value])
         }, null, 8, ["icon", "class"])) : a("", !0)
       ]),
-      v("div", {
-        class: l({ "pl-7": s.icon || n.$slots.icon, "pr-6": s.closable })
+      f("div", {
+        class: n({
+          "pl-7": I.value,
+          "pr-6": s.closable
+        })
       }, [
-        d.value ? (r(), i("h5", {
+        g.value ? (r(), i("h5", {
           key: 0,
-          class: l(I.value)
-        }, f(d.value), 3)) : a("", !0),
-        c.value || n.$slots.default ? (r(), i("div", E, [
-          p(n.$slots, "default", {}, () => [
-            T(f(c.value), 1)
+          class: n(V.value)
+        }, b(g.value), 3)) : a("", !0),
+        u.value || E(c).default ? (r(), i("div", R, [
+          v(o.$slots, "default", {}, () => [
+            z(b(u.value), 1)
           ])
         ])) : a("", !0)
       ], 2),
       s.closable ? (r(), i("button", {
         key: 0,
         type: "button",
-        onClick: h,
-        class: l(["absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", [o.value ? "top-1/2 -translate-y-1/2" : "top-4"]])
+        class: n([
+          "absolute right-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+          l.value ? "top-1/2 -translate-y-1/2" : "top-4"
+        ]),
+        onClick: k
       }, [
-        j(b, {
+        A(m, {
           icon: "lucide:x",
           class: "h-4 w-4"
         }),
-        g[0] || (g[0] = v("span", { class: "sr-only" }, "Close", -1))
+        p[0] || (p[0] = f("span", { class: "sr-only" }, " Close ", -1))
       ], 2)) : a("", !0)
-    ], 10, D)) : a("", !0);
+    ], 10, O)) : a("", !0);
   }
 });
 export {
-  R as default
+  F as default
 };

package/components/Barcode/Barcode.vue.js

@@ -1,10 +1,10 @@
-import { defineComponent as d, ref as s, onMounted as f, watch as m, openBlock as r, createElementBlock as l, toDisplayString as p, createCommentVNode as v, withDirectives as h, vShow as g } from "vue";
-import w from "jsbarcode";
-import { barcodesConstants as b } from "./types.js";
-const y = { class: "inline-flex justify-center items-center max-w-full flex-col gap-2" }, x = {
+import { defineComponent as p, ref as f, onMounted as h, watch as g, openBlock as i, createElementBlock as u, toDisplayString as w, createCommentVNode as b, withDirectives as y, vShow as x } from "vue";
+import { barcodesConstants as _ } from "./types.js";
+import { resolveModuleRuntime as C } from "../../utils/UtilsModuleInterop.js";
+const k = { class: "inline-flex justify-center items-center max-w-full flex-col gap-2" }, B = {
   key: 0,
   class: "text-sm text-destructive px-4 py-2 bg-destructive/10 rounded-md border border-destructive/20 text-center whitespace-normal overflow-wrap-anywhere"
-}, B = /* @__PURE__ */ d({
+}, D = /* @__PURE__ */ p({
   __name: "Barcode",
   props: {
     value: {},
@@ -16,16 +16,26 @@ const y = { class: "inline-flex justify-center items-center max-w-full flex-col
     background: { default: "#ffffff" },
     margin: { default: 10 }
   },
-  setup(u) {
-    const e = u, o = s(null), a = s(""), n = () => {
-      if (a.value = "", o.value && e.value) {
+  setup(m) {
+    const e = m, o = f(null), r = f("");
+    let a = 0;
+    const s = async () => {
+      const n = ++a;
+      if (r.value = "", o.value && e.value) {
         o.value.innerHTML = "";
         try {
-          const t = b.find(
-            (c) => c.value.toLowerCase() === e.format.toLowerCase()
-          ), i = t ? t.value : e.format;
-          w(o.value, e.value, {
-            format: i,
+          const t = await import("jsbarcode");
+          if (n !== a || !o.value) return;
+          const c = C(
+            t,
+            (l) => typeof l == "function"
+          );
+          if (!c) throw new Error("The barcode runtime is unavailable.");
+          const d = _.find(
+            (l) => l.value.toLowerCase() === e.format.toLowerCase()
+          ), v = d ? d.value : e.format;
+          c(o.value, e.value, {
+            format: v,
             displayValue: e.displayValue,
             width: e.width,
             height: e.height,
@@ -35,25 +45,28 @@ const y = { class: "inline-flex justify-center items-center max-w-full flex-col
             margin: e.margin
           });
         } catch (t) {
-          console.error("Failed to generate barcode:", t), a.value = typeof t == "string" ? t : t?.message || "Invalid barcode value for this format";
+          if (n !== a) return;
+          console.error("Failed to generate barcode:", t), r.value = typeof t == "string" ? t : t?.message || "Invalid barcode value for this format";
         }
       }
     };
-    return f(() => {
-      n();
-    }), m(() => e, n, { deep: !0 }), (t, i) => (r(), l("div", y, [
-      a.value ? (r(), l("div", x, p(a.value), 1)) : v("", !0),
-      h((r(), l("svg", {
+    return h(() => {
+      s();
+    }), g(() => e, () => {
+      s();
+    }, { deep: !0 }), (n, t) => (i(), u("div", k, [
+      r.value ? (i(), u("div", B, w(r.value), 1)) : b("", !0),
+      y((i(), u("svg", {
         ref_key: "barcodeRef",
         ref: o,
         class: "w-full h-auto max-w-full",
         preserveAspectRatio: "xMidYMid meet"
       }, null, 512)), [
-        [g, !a.value]
+        [x, !r.value]
       ])
     ]));
   }
 });
 export {
-  B as default
+  D as default
 };

package/components/CategoryManager/CategoryManager.vue2.js

@@ -21,7 +21,7 @@ import "@vueuse/core";
 /* empty css                          */
 import qe from "../IconPicker.vue.js";
 /* empty css                                 */
-/* empty css                         */
+/* empty css                        */
 /* empty css                 */
 /* empty css                                         */
 /* empty css                                    */

package/components/CommandPalette/CommandPaletteContent.vue2.js

@@ -4,7 +4,7 @@ import k from "../Icon.vue.js";
 import { $t as E } from "../../utils/i18n.js";
 import { useCommandPaletteItems as Y } from "./useCommandPaletteItems.js";
 import { useCommandPaletteNav as Z } from "./useCommandPaletteNav.js";
-import ee from "./CommandPaletteItem.vue2.js";
+import ee from "./CommandPaletteItem.vue.js";
 const te = { class: "command-palette-content flex flex-col w-full h-full max-h-[70vh]" }, oe = { class: "flex items-center gap-3 px-4 py-3 border-b border-border/80 shrink-0" }, se = ["placeholder"], ne = ["aria-label"], re = {
   key: 0,
   class: "flex flex-col items-center justify-center py-14 px-6 text-center select-none",

package/components/CommandPalette/{CommandPaletteItem.vue2.js → CommandPaletteItem.vue.js}

@@ -1,5 +1,5 @@
 import t from "./CommandPaletteItem.vue3.js";
-/* empty css                       */
+/* empty css                        */
 import o from "../../_virtual/_plugin-vue_export-helper.js";
 const r = /* @__PURE__ */ o(t, [["__scopeId", "data-v-66b1ae06"]]);
 export {

package/components/Dropdown/DropdownMenu.vue.js

@@ -1,4 +1,4 @@
-import o from "./DropdownMenu.vue3.js";
+import o from "./DropdownMenu.vue2.js";
 /* empty css                  */
 import r from "../../_virtual/_plugin-vue_export-helper.js";
 const m = /* @__PURE__ */ r(o, [["__scopeId", "data-v-173c7a02"]]);

package/components/ExportData/ExportData.vue.js

@@ -1,13 +1,11 @@
-import { defineComponent as _, computed as k, openBlock as i, createElementBlock as g, createBlock as f, withCtx as v, createElementVNode as u, toDisplayString as y, Fragment as j, renderList as T, createVNode as D } from "vue";
-import * as d from "xlsx";
-import N from "papaparse";
-import { saveAs as b } from "file-saver";
-import w from "../Button.vue.js";
+import { defineComponent as N, computed as k, openBlock as c, createElementBlock as E, createBlock as v, withCtx as w, createElementVNode as u, toDisplayString as g, Fragment as V, renderList as A, createVNode as D } from "vue";
+import b from "../Button.vue.js";
 import I from "../Modal.vue.js";
 import O from "../Icon.vue.js";
 import { showToast as p } from "../../composables/useNotifications.js";
-import { $t as E } from "../../utils/i18n.js";
-const V = { class: "px-1 py-1 text-sm" }, U = { class: "font-medium mb-3 text-muted-foreground" }, A = { class: "space-y-3" }, H = /* @__PURE__ */ _({
+import { $t as F } from "../../utils/i18n.js";
+import { resolveModuleRuntime as h } from "../../utils/UtilsModuleInterop.js";
+const R = { class: "px-1 py-1 text-sm" }, L = { class: "font-medium mb-3 text-muted-foreground" }, M = { class: "space-y-3" }, H = /* @__PURE__ */ N({
   __name: "ExportData",
   props: {
     data: {},
@@ -20,105 +18,129 @@ const V = { class: "px-1 py-1 text-sm" }, U = { class: "font-medium mb-3 text-mu
     mode: { default: "frontend" },
     onExport: {}
   },
-  setup(n, { expose: F }) {
-    const a = n, s = (r, e, t) => {
-      const o = t ? E(r, t) : E(r);
-      return o !== r ? o : e;
-    }, $ = (r, e) => {
-      if (!(!r || !e))
-        return e.includes(".") ? e.split(".").reduce((t, o) => t?.[o], r) : r[e];
-    }, h = k(() => [
+  setup(s, { expose: B }) {
+    const S = async () => {
+      const o = await import("xlsx"), e = h(
+        o,
+        (t) => !!(t && typeof t == "object" && "utils" in t && "write" in t && typeof t.write == "function")
+      );
+      if (!e)
+        throw new Error("The spreadsheet export runtime is unavailable.");
+      return e;
+    }, C = async () => {
+      const o = await import("papaparse"), e = h(
+        o,
+        (t) => !!(t && typeof t == "object" && "unparse" in t && typeof t.unparse == "function")
+      );
+      if (!e)
+        throw new Error("The CSV export runtime is unavailable.");
+      return e;
+    }, m = async (o, e) => {
+      const t = await import("file-saver"), r = t, a = h(
+        t,
+        (l) => typeof l == "function"
+      ) || r.saveAs || r.default?.saveAs;
+      if (!a)
+        throw new Error("The file download runtime is unavailable.");
+      a(o, e);
+    }, n = s, i = (o, e, t) => {
+      const r = t ? F(o, t) : F(o);
+      return r !== o ? r : e;
+    }, $ = (o, e) => {
+      if (!(!o || !e))
+        return e.includes(".") ? e.split(".").reduce((t, r) => t?.[r], o) : o[e];
+    }, y = k(() => [
       { label: "Excel (.xlsx)", value: "excel", icon: "lucide:file-spreadsheet" },
       { label: "CSV (.csv)", value: "csv", icon: "lucide:file-text" },
       { label: "JSON (.json)", value: "json", icon: "lucide:file-json" }
-    ].filter((e) => a.formats.includes(e.value))), B = () => a.data.map((r) => {
+    ].filter((e) => n.formats.includes(e.value))), j = () => n.data.map((o) => {
       const e = {};
-      return a.fields.forEach((t) => {
-        const o = $(r, t.field);
-        t.format ? e[t.title] = t.format(o, r) : e[t.title] = o ?? "";
+      return n.fields.forEach((t) => {
+        const r = $(o, t.field);
+        t.format ? e[t.title] = t.format(r, o) : e[t.title] = r ?? "";
       }), e;
-    }), x = async (r, e) => {
-      if (a.mode === "backend" && a.onExport)
+    }), f = async (o, e) => {
+      if (n.mode === "backend" && n.onExport)
         try {
-          await a.onExport(r), e && e();
+          await n.onExport(o), e && e();
           return;
         } catch (t) {
-          console.error("Backend export error:", t), p(s("vlite.exportData.error", "An error occurred while exporting data."), "error");
+          console.error("Backend export error:", t), p(i("vlite.exportData.error", "An error occurred while exporting data."), "error");
           return;
         }
-      if (!a.data || a.data.length === 0) {
-        p(s("vlite.exportData.noData", "No data available to export."), "warning");
+      if (!n.data || n.data.length === 0) {
+        p(i("vlite.exportData.noData", "No data available to export."), "warning");
         return;
       }
       try {
-        const t = a.filename ? a.filename : `${a.title.toLowerCase().replace(/\s+/g, "-")}-${(/* @__PURE__ */ new Date()).toISOString().split("T")[0]}`, o = B();
-        switch (r) {
+        const t = n.filename ? n.filename : `${n.title.toLowerCase().replace(/\s+/g, "-")}-${(/* @__PURE__ */ new Date()).toISOString().split("T")[0]}`, r = j();
+        switch (o) {
           case "excel": {
-            const l = d.utils.book_new(), c = d.utils.json_to_sheet(o);
-            d.utils.book_append_sheet(l, c, a.title.substring(0, 31));
-            const m = d.write(l, { bookType: "xlsx", type: "array" }), C = new Blob([m], { type: "application/octet-stream" });
-            b(C, `${t}.xlsx`);
+            const a = await S(), l = a.utils.book_new(), x = a.utils.json_to_sheet(r);
+            a.utils.book_append_sheet(l, x, n.title.substring(0, 31));
+            const d = a.write(l, { bookType: "xlsx", type: "array" }), _ = new Blob([d], { type: "application/octet-stream" });
+            await m(_, `${t}.xlsx`);
             break;
           }
           case "csv": {
-            const c = N.unparse(o), m = new Blob(["\uFEFF" + c], { type: "text/csv;charset=utf-8;" });
-            b(m, `${t}.csv`);
+            const a = await C(), l = "\uFEFF", x = a.unparse(r), d = new Blob([l + x], { type: "text/csv;charset=utf-8;" });
+            await m(d, `${t}.csv`);
             break;
           }
           case "json": {
-            const l = JSON.stringify(o, null, 2), c = new Blob([l], { type: "application/json" });
-            b(c, `${t}.json`);
+            const a = JSON.stringify(r, null, 2), l = new Blob([a], { type: "application/json" });
+            await m(l, `${t}.json`);
             break;
           }
         }
         p(
-          s("vlite.exportData.success", `Data exported successfully as ${r.toUpperCase()}`, {
-            format: r.toUpperCase()
+          i("vlite.exportData.success", `Data exported successfully as ${o.toUpperCase()}`, {
+            format: o.toUpperCase()
           }),
           "success"
         ), e && e();
       } catch (t) {
-        console.error("Export error:", t), p(s("vlite.exportData.error", "An error occurred while exporting data."), "error");
+        console.error("Export error:", t), p(i("vlite.exportData.error", "An error occurred while exporting data."), "error");
       }
-    }, S = k(() => s("vlite.exportData.selectFormat", "Select Export Format"));
-    return F({
-      exportData: x,
-      availableFormats: h
-    }), (r, e) => (i(), g("div", null, [
-      n.formats.length === 1 ? (i(), f(w, {
+    }, T = k(() => i("vlite.exportData.selectFormat", "Select Export Format"));
+    return B({
+      exportData: f,
+      availableFormats: y
+    }), (o, e) => (c(), E("div", null, [
+      s.formats.length === 1 ? (c(), v(b, {
         key: 0,
-        text: n.buttonText,
-        icon: n.buttonIcon,
+        text: s.buttonText,
+        icon: s.buttonIcon,
         variant: "outline",
-        onClick: e[0] || (e[0] = (t) => x(n.formats[0]))
-      }, null, 8, ["text", "icon"])) : (i(), f(I, {
+        onClick: e[0] || (e[0] = (t) => f(s.formats[0]))
+      }, null, 8, ["text", "icon"])) : (c(), v(I, {
         key: 1,
-        title: n.title,
+        title: s.title,
         "max-width": "sm:max-w-[400px]"
       }, {
-        trigger: v(() => [
-          D(w, {
-            text: n.buttonText,
-            icon: n.buttonIcon,
+        trigger: w(() => [
+          D(b, {
+            text: s.buttonText,
+            icon: s.buttonIcon,
             variant: "outline"
           }, null, 8, ["text", "icon"])
         ]),
-        default: v(({ close: t }) => [
-          u("div", V, [
-            u("h6", U, y(S.value), 1),
-            u("div", A, [
-              (i(!0), g(j, null, T(h.value, (o) => (i(), f(w, {
-                key: o.value,
+        default: w(({ close: t }) => [
+          u("div", R, [
+            u("h6", L, g(T.value), 1),
+            u("div", M, [
+              (c(!0), E(V, null, A(y.value, (r) => (c(), v(b, {
+                key: r.value,
                 variant: "outline",
                 class: "w-full flex items-center justify-start gap-3 h-12",
-                onClick: (l) => x(o.value, t)
+                onClick: (a) => f(r.value, t)
               }, {
-                default: v(() => [
+                default: w(() => [
                   D(O, {
-                    icon: o.icon,
+                    icon: r.icon,
                     class: "text-muted-foreground h-5 w-5"
                   }, null, 8, ["icon"]),
-                  u("span", null, y(o.label), 1)
+                  u("span", null, g(r.label), 1)
                 ]),
                 _: 2
               }, 1032, ["onClick"]))), 128))

package/components/FilePreview/FilePreview.vue.js

@@ -1,27 +1,45 @@
-import { defineComponent as l, openBlock as n, createElementBlock as r, createElementVNode as o, createVNode as t, unref as a } from "vue";
-import { VFileViewer as d } from "v-file-preview";
+import { defineComponent as c, shallowRef as n, onMounted as s, openBlock as l, createElementBlock as a, createElementVNode as i, createBlock as d, resolveDynamicComponent as u } from "vue";
 import "v-file-preview/dist/style.css";
-const c = { class: "flex flex-col h-[70vh] w-full min-h-[400px]" }, i = { class: "flex-1 relative bg-muted/10 rounded-lg border border-border overflow-hidden flex items-center justify-center" }, u = { class: "w-full h-full overflow-auto" }, v = /* @__PURE__ */ l({
+const m = { class: "flex flex-col h-[70vh] w-full min-h-[400px]" }, v = { class: "flex-1 relative bg-muted/10 rounded-lg border border-border overflow-hidden flex items-center justify-center" }, f = { class: "w-full h-full overflow-auto" }, w = {
+  key: 1,
+  class: "p-6 text-center text-sm text-muted",
+  role: "alert"
+}, p = {
+  key: 2,
+  class: "p-6 text-center text-sm text-muted",
+  role: "status",
+  "aria-live": "polite"
+}, y = /* @__PURE__ */ c({
   __name: "FilePreview",
   props: {
     url: {},
     name: {},
     canDownload: { type: Boolean, default: !0 }
   },
-  setup(e) {
-    return (f, m) => (n(), r("div", c, [
-      o("div", i, [
-        o("div", u, [
-          t(a(d), {
-            url: e.url,
-            name: e.name,
-            "can-download": e.canDownload
-          }, null, 8, ["url", "name", "can-download"])
+  setup(o) {
+    const r = n(null), t = n("loading");
+    return s(async () => {
+      try {
+        const e = await import("v-file-preview");
+        if (!e.VFileViewer) throw new Error("The file viewer component is unavailable.");
+        r.value = e.VFileViewer, t.value = "ready";
+      } catch (e) {
+        console.error("File preview runtime failed to load.", e), t.value = "error";
+      }
+    }), (e, h) => (l(), a("div", m, [
+      i("div", v, [
+        i("div", f, [
+          t.value === "ready" && r.value ? (l(), d(u(r.value), {
+            key: 0,
+            url: o.url,
+            name: o.name,
+            "can-download": o.canDownload
+          }, null, 8, ["url", "name", "can-download"])) : t.value === "error" ? (l(), a("p", w, " This file preview is unavailable. ")) : (l(), a("p", p, " Loading file preview… "))
         ])
       ])
     ]));
   }
 });
 export {
-  v as default
+  y as default
 };

package/components/Form/{AccordionView.vue.js → AccordionView.vue2.js}

@@ -1,5 +1,5 @@
 import o from "./AccordionView.vue3.js";
-/* empty css                   */
+/* empty css                  */
 import r from "../../_virtual/_plugin-vue_export-helper.js";
 const m = /* @__PURE__ */ r(o, [["__scopeId", "data-v-bb30cb10"]]);
 export {

package/components/Form/index.vue2.js

@@ -1,6 +1,6 @@
 import { defineComponent as b, computed as d, openBlock as n, createElementBlock as g, createElementVNode as R, createBlock as r, withCtx as x, createTextVNode as k, toDisplayString as I, createCommentVNode as v, unref as l } from "vue";
 import B from "./TableView.vue.js";
-import C from "./AccordionView.vue.js";
+import C from "./AccordionView.vue2.js";
 import U from "../Label.vue.js";
 import N from "../Button.vue.js";
 import { useCustomFieldRows as V } from "./composables/useCustomFieldRows.js";

package/components/ImportData/ImportStep1.vue.js

@@ -1,15 +1,15 @@
-import { defineComponent as A, ref as b, computed as d, openBlock as w, createElementBlock as V, createElementVNode as r, toDisplayString as n, withModifiers as F, normalizeClass as E, createVNode as v, createCommentVNode as J, withCtx as K, createTextVNode as L } from "vue";
-import R from "papaparse";
-import M from "../Icon.vue.js";
-import W from "../Button.vue.js";
-import q from "../Textarea.vue.js";
+import { defineComponent as J, ref as y, computed as d, openBlock as V, createElementBlock as F, createElementVNode as o, toDisplayString as n, withModifiers as E, normalizeClass as M, createVNode as v, createCommentVNode as K, withCtx as L, createTextVNode as W } from "vue";
+import S from "../Icon.vue.js";
+import q from "../Button.vue.js";
+import G from "../Textarea.vue.js";
 import { showToast as h } from "../../composables/useNotifications.js";
 import { $t as k } from "../../utils/i18n.js";
 import { camelCase as g } from "../../utils/functions.js";
-const G = { class: "space-y-2" }, Q = { class: "font-medium text-md" }, X = { class: "space-y-6" }, Y = { class: "flex flex-col items-center justify-center pointer-events-none" }, Z = { class: "w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mb-4 text-primary" }, ee = { class: "font-medium text-foreground mb-1" }, te = { class: "text-sm text-muted-foreground" }, ae = {
+import { resolveModuleRuntime as Q } from "../../utils/UtilsModuleInterop.js";
+const X = { class: "space-y-2" }, Y = { class: "font-medium text-md" }, Z = { class: "space-y-6" }, ee = { class: "flex flex-col items-center justify-center pointer-events-none" }, te = { class: "w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mb-4 text-primary" }, re = { class: "font-medium text-foreground mb-1" }, ae = { class: "text-sm text-muted-foreground" }, oe = {
   key: 0,
   class: "mt-4 text-sm font-semibold text-primary bg-background px-3 py-1 rounded-md border border-border shadow-sm inline-block"
-}, re = { class: "flex items-center gap-3 mb-4" }, oe = { class: "w-8 h-8 rounded-lg bg-secondary flex items-center justify-center text-secondary-foreground" }, se = { class: "font-medium text-foreground leading-none" }, ie = { class: "flex justify-end mt-3" }, ve = /* @__PURE__ */ A({
+}, se = { class: "flex items-center gap-3 mb-4" }, ie = { class: "w-8 h-8 rounded-lg bg-secondary flex items-center justify-center text-secondary-foreground" }, ne = { class: "font-medium text-foreground leading-none" }, le = { class: "flex justify-end mt-3" }, ge = /* @__PURE__ */ J({
   __name: "ImportStep1",
   props: {
     importMethod: {},
@@ -29,133 +29,138 @@ const G = { class: "space-y-2" }, Q = { class: "font-medium text-md" }, X = { cl
     "next"
   ],
   setup(l, { emit: P }) {
-    const y = l, i = P, s = (t, e, a) => {
-      const o = a ? k(t, a) : k(t);
-      return o !== t ? o : e;
-    }, D = b(null), m = b(!1), c = b(""), S = (t) => {
-      if (t.preventDefault(), m.value = !1, t.dataTransfer?.files && t.dataTransfer.files.length > 0) {
-        const e = t.dataTransfer.files[0];
-        e.type === "text/csv" || e.name.endsWith(".csv") ? _(e) : h(s("vlite.importData.csvOnly", "Please upload a CSV file"), "error");
+    const b = l, i = P, s = (r, e, a) => {
+      const t = a ? k(r, a) : k(r);
+      return t !== r ? t : e;
+    }, D = y(null), m = y(!1), c = y(""), T = (r) => {
+      if (r.preventDefault(), m.value = !1, r.dataTransfer?.files && r.dataTransfer.files.length > 0) {
+        const e = r.dataTransfer.files[0];
+        e.type === "text/csv" || e.name.endsWith(".csv") ? w(e) : h(s("vlite.importData.csvOnly", "Please upload a CSV file"), "error");
       }
-    }, _ = (t) => {
-      i("update:csvFile", t), i("update:importMethod", "file");
+    }, w = (r) => {
+      i("update:csvFile", r), i("update:importMethod", "file");
       const e = new FileReader();
       e.onload = (a) => {
-        a.target?.result && C(a.target.result);
-      }, e.readAsText(t);
-    }, T = () => {
-      i("update:importMethod", "paste"), c.value && C(c.value);
-    }, j = (t) => {
-      const e = g(t), a = {};
-      return y.fields.forEach((o) => {
-        a[g(o.field)] = o.field, a[g(o.title)] = o.field, o.matchings?.forEach((u) => {
-          a[g(u)] = o.field;
+        a.target?.result && _(a.target.result);
+      }, e.readAsText(r);
+    }, j = () => {
+      i("update:importMethod", "paste"), c.value && _(c.value);
+    }, O = (r) => {
+      const e = g(r), a = {};
+      return b.fields.forEach((t) => {
+        a[g(t.field)] = t.field, a[g(t.title)] = t.field, t.matchings?.forEach((u) => {
+          a[g(u)] = t.field;
         });
       }), a[e] || "";
-    }, C = (t) => {
+    }, _ = async (r) => {
       try {
-        R.parse(t, {
+        const e = await import("papaparse"), a = Q(
+          e,
+          (t) => !!(t && typeof t == "object" && "parse" in t && typeof t.parse == "function")
+        );
+        if (!a) throw new Error("The CSV import runtime is unavailable.");
+        a.parse(r, {
           header: !0,
           skipEmptyLines: !0,
-          complete: (e) => {
-            if (!e.data || e.data.length === 0) {
+          complete: (t) => {
+            if (!t.data || t.data.length === 0) {
               h(s("vlite.importData.emptyCsv", "The CSV file is empty."), "warning");
               return;
             }
-            const a = Object.keys(e.data[0]);
-            i("update:headers", a);
-            const o = e.data.map((p) => {
+            const u = Object.keys(t.data[0]);
+            i("update:headers", u);
+            const A = t.data.map((p) => {
               const f = {};
               return Object.keys(p).forEach((x) => {
-                f[x] = p[x] || y.fields.find((B) => B.field === x)?.defaultValue;
+                f[x] = p[x] || b.fields.find((R) => R.field === x)?.defaultValue;
               }), f;
             });
-            i("update:importData", o), i("update:preview", e.data.slice(0, 3));
-            const u = {};
-            a.forEach((p) => {
-              const f = j(p);
-              u[p] = f || "";
-            }), i("update:mappings", u), i("next");
+            i("update:importData", A), i("update:preview", t.data.slice(0, 3));
+            const C = {};
+            u.forEach((p) => {
+              const f = O(p);
+              C[p] = f || "";
+            }), i("update:mappings", C), i("next");
           },
-          error: (e) => h(
-            s("vlite.importData.parseError", "Failed to parse CSV: ") + e.message,
+          error: (t) => h(
+            s("vlite.importData.parseError", "Failed to parse CSV: ") + t.message,
             "error"
           )
         });
       } catch (e) {
         h(s("vlite.importData.processError", "Error processing CSV data"), "error"), console.error(e);
       }
-    }, O = (t) => {
-      const e = t.target;
-      e.files && e.files.length > 0 && _(e.files[0]);
-    }, $ = d(() => s("vlite.importData.uploadData", "Upload Data")), I = d(() => s("vlite.importData.dragDrop", "Drag & drop a file here or click to browse")), z = d(() => s("vlite.importData.csvOnlyHint", "Only CSV files are supported")), H = d(() => s("vlite.importData.pasteData", "Or paste CSV/Excel data")), N = d(() => s("vlite.importData.process", "Process Data")), U = d(() => s("vlite.importData.pastePlaceholder", `id, name, email
+    }, $ = (r) => {
+      const e = r.target;
+      e.files && e.files.length > 0 && w(e.files[0]);
+    }, I = d(() => s("vlite.importData.uploadData", "Upload Data")), z = d(() => s("vlite.importData.dragDrop", "Drag & drop a file here or click to browse")), B = d(() => s("vlite.importData.csvOnlyHint", "Only CSV files are supported")), H = d(() => s("vlite.importData.pasteData", "Or paste CSV/Excel data")), N = d(() => s("vlite.importData.process", "Process Data")), U = d(() => s("vlite.importData.pastePlaceholder", `id, name, email
 1, John Doe, john@example.com`));
-    return (t, e) => (w(), V("div", G, [
-      r("h5", Q, n($.value), 1),
-      r("div", X, [
-        r("div", {
-          class: E([
+    return (r, e) => (V(), F("div", X, [
+      o("h5", Y, n(I.value), 1),
+      o("div", Z, [
+        o("div", {
+          class: M([
             "relative border-2 border-dashed rounded-xl p-8 text-center cursor-pointer transition-colors",
             l.importMethod === "file" ? "border-primary bg-primary/5" : "border-border hover:border-primary/50",
             m.value ? "border-primary bg-primary/10 scale-[1.01]" : ""
           ]),
           onClick: e[0] || (e[0] = (a) => D.value?.click()),
-          onDragover: e[1] || (e[1] = F((a) => m.value = !0, ["prevent"])),
-          onDragleave: e[2] || (e[2] = F((a) => m.value = !1, ["prevent"])),
-          onDrop: S
+          onDragover: e[1] || (e[1] = E((a) => m.value = !0, ["prevent"])),
+          onDragleave: e[2] || (e[2] = E((a) => m.value = !1, ["prevent"])),
+          onDrop: T
         }, [
-          r("input", {
+          o("input", {
             type: "file",
             ref_key: "fileInput",
             ref: D,
             class: "hidden",
             accept: ".csv",
-            onChange: O
+            onChange: $
           }, null, 544),
-          r("div", Y, [
-            r("div", Z, [
-              v(M, {
+          o("div", ee, [
+            o("div", te, [
+              v(S, {
                 icon: "lucide:upload-cloud",
                 class: "w-6 h-6"
               })
             ]),
-            r("p", ee, n(I.value), 1),
-            r("p", te, n(z.value), 1),
-            l.csvFile ? (w(), V("p", ae, n(l.csvFile.name) + " (" + n((l.csvFile.size / 1024).toFixed(2)) + " KB) ", 1)) : J("", !0)
+            o("p", re, n(z.value), 1),
+            o("p", ae, n(B.value), 1),
+            l.csvFile ? (V(), F("p", oe, n(l.csvFile.name) + " (" + n((l.csvFile.size / 1024).toFixed(2)) + " KB) ", 1)) : K("", !0)
           ])
         ], 34),
-        r("div", {
-          class: E([
+        o("div", {
+          class: M([
             "border rounded-xl p-6 transition-colors",
             l.importMethod === "paste" ? "border-primary shadow-sm ring-1 ring-primary/20" : "border-border"
           ])
         }, [
-          r("div", re, [
-            r("div", oe, [
-              v(M, {
+          o("div", se, [
+            o("div", ie, [
+              v(S, {
                 icon: "lucide:clipboard-paste",
                 class: "w-4 h-4"
               })
             ]),
-            r("div", null, [
-              r("p", se, n(H.value), 1)
+            o("div", null, [
+              o("p", ne, n(H.value), 1)
             ])
           ]),
-          v(q, {
+          v(G, {
             modelValue: c.value,
             "onUpdate:modelValue": e[3] || (e[3] = (a) => c.value = a),
             class: "w-full h-32",
             placeholder: U.value
           }, null, 8, ["modelValue", "placeholder"]),
-          r("div", ie, [
-            v(W, {
+          o("div", le, [
+            v(q, {
               variant: "secondary",
               size: "sm",
-              onClick: T,
+              onClick: j,
               disabled: !c.value
             }, {
-              default: K(() => [
-                L(n(N.value), 1)
+              default: L(() => [
+                W(n(N.value), 1)
               ]),
               _: 1
             }, 8, ["disabled"])
@@ -166,5 +171,5 @@ const G = { class: "space-y-2" }, Q = { class: "font-medium text-md" }, X = { cl
   }
 });
 export {
-  ve as default
+  ge as default
 };

package/components/NavbarCommandPalette.vue.js

@@ -3,7 +3,7 @@ import L from "./Icon.vue.js";
 import v from "./Modal.vue.js";
 import N from "./CommandPalette/CommandPaletteContent.vue.js";
 import { $t as U } from "../utils/i18n.js";
-/* empty css                                      */
+/* empty css                                       */
 const V = { class: "block truncate -text-fs-1.5" }, S = { class: "ml-auto inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded text-[10px] font-mono font-medium border border-border/80 bg-background text-muted-foreground ml-1" }, A = /* @__PURE__ */ x({
   __name: "NavbarCommandPalette",
   props: {

package/components/QRCode/QRCode.vue.js

@@ -1,9 +1,9 @@
-import { defineComponent as h, ref as v, computed as c, watchEffect as y, openBlock as s, createElementBlock as u, normalizeStyle as x, toDisplayString as z, createCommentVNode as C } from "vue";
-import _ from "qrcode";
-const U = ["src", "alt"], k = {
+import { defineComponent as x, ref as g, computed as s, watchEffect as R, openBlock as u, createElementBlock as f, normalizeStyle as U, toDisplayString as z, createCommentVNode as C } from "vue";
+import { resolveModuleRuntime as _ } from "../../utils/UtilsModuleInterop.js";
+const k = ["src", "alt"], L = {
   key: 1,
   class: "text-[10px] text-danger text-center leading-tight px-1"
-}, R = /* @__PURE__ */ h({
+}, Q = /* @__PURE__ */ x({
   __name: "QRCode",
   props: {
     value: {},
@@ -15,19 +15,19 @@ const U = ["src", "alt"], k = {
     alt: { default: "QR Code" },
     color: {}
   },
-  setup(f) {
-    const e = f, n = v(""), r = v("");
-    let o = 0;
-    const l = c(() => {
+  setup(m) {
+    const e = m, a = g(""), r = g("");
+    let l = 0;
+    const i = s(() => {
       const t = e.value || "";
       return /^data:image\//i.test(t) ? t : "";
     });
-    y(async () => {
-      const t = ++o;
-      n.value = "", r.value = "";
-      const i = e.value?.trim() || "", p = e.imageUrl || l.value;
-      if (!i || p) return;
-      const m = {
+    R(async () => {
+      const t = ++l;
+      a.value = "", r.value = "";
+      const c = e.value?.trim() || "", y = e.imageUrl || i.value;
+      if (typeof window > "u" || !c || y) return;
+      const v = {
         errorCorrectionLevel: e.errorCorrectionLevel,
         margin: e.margin,
         color: {
@@ -35,34 +35,39 @@ const U = ["src", "alt"], k = {
           light: e.color?.light || "#ffffffff"
         }
       };
-      typeof e.size == "number" && (m.width = e.size * e.scale);
+      typeof e.size == "number" && (v.width = e.size * e.scale);
       try {
-        const a = await _.toDataURL(i, m);
-        t === o && (n.value = a);
-      } catch (a) {
-        t === o && (r.value = a instanceof Error ? a.message : "Failed to render QR code");
+        const o = await import("qrcode"), p = _(
+          o,
+          (n) => !!(n && typeof n == "object" && "toDataURL" in n && typeof n.toDataURL == "function")
+        );
+        if (!p) throw new Error("The QR code runtime is unavailable.");
+        const w = await p.toDataURL(c, v);
+        t === l && (a.value = w);
+      } catch (o) {
+        t === l && (r.value = o instanceof Error ? o.message : "Failed to render QR code");
       }
     });
-    const d = c(() => e.imageUrl ? e.imageUrl : l.value ? l.value : n.value), g = c(() => {
+    const d = s(() => e.imageUrl ? e.imageUrl : i.value ? i.value : a.value), h = s(() => {
       const t = typeof e.size == "number" ? `${e.size}px` : e.size;
       return {
         width: t,
         height: t
       };
     });
-    return (t, i) => (s(), u("div", {
+    return (t, c) => (u(), f("div", {
       class: "inline-flex justify-center items-center max-w-full",
-      style: x(g.value)
+      style: U(h.value)
     }, [
-      d.value ? (s(), u("img", {
+      d.value ? (u(), f("img", {
         key: 0,
         src: d.value,
-        alt: f.alt,
+        alt: m.alt,
         class: "w-full h-full object-contain pointer-events-none"
-      }, null, 8, U)) : r.value ? (s(), u("span", k, z(r.value), 1)) : C("", !0)
+      }, null, 8, k)) : r.value ? (u(), f("span", L, z(r.value), 1)) : C("", !0)
     ], 4));
   }
 });
 export {
-  R as default
+  Q as default
 };

package/components/Screen/ScreenFilter.vue.js

@@ -20,7 +20,7 @@ import "@vueuse/core";
 import "iconify-icon-picker";
 import "iconify-icon-picker/style.css";
 /* empty css                                 */
-/* empty css                         */
+/* empty css                        */
 /* empty css                 */
 /* empty css                                         */
 /* empty css                                    */

package/directives/vScrollReveal.js

@@ -1,5 +1,5 @@
-import c from "scrollreveal";
-const o = /* @__PURE__ */ new WeakMap(), s = {
+import { resolveModuleRuntime as f } from "../utils/UtilsModuleInterop.js";
+const s = /* @__PURE__ */ new WeakMap(), i = {
   distance: "50px",
   duration: 800,
   delay: 200,
@@ -15,34 +15,39 @@ const o = /* @__PURE__ */ new WeakMap(), s = {
   useDelay: "always",
   viewFactor: 0
 };
-function r(e) {
+function a(e) {
   if (!e) return window;
   if (e === document.body || e === document.documentElement)
     return document.documentElement;
   const t = getComputedStyle(e).overflowY;
-  return (t === "auto" || t === "scroll" || t === "overlay") && e.scrollHeight > e.clientHeight ? e : r(e.parentElement);
+  return (t === "auto" || t === "scroll" || t === "overlay") && e.scrollHeight > e.clientHeight ? e : a(e.parentElement);
 }
-const u = {
-  mounted: (e, l) => {
+const d = {
+  mounted: async (e, n) => {
     if (typeof window > "u") return;
-    const t = r(e.parentElement);
-    let n = o.get(t);
-    n || (n = c({
+    const t = await import("scrollreveal"), o = f(
+      t,
+      (u) => typeof u == "function"
+    );
+    if (!o) return;
+    const l = a(e.parentElement);
+    let r = s.get(l);
+    r || (r = o({
       // If container is window/html, ScrollReveal expects 'document.documentElement' usually,
       // but 'container' option defaults to window.document.documentElement.
       // If it's a specific div, we pass that div.
-      container: t === window ? document.documentElement : t
-    }), o.set(t, n));
-    const a = Object.assign({}, s, l.value);
-    e.classList.add("v-scroll-reveal"), n.reveal(e, a);
+      container: l === window ? document.documentElement : l
+    }), s.set(l, r));
+    const c = Object.assign({}, i, n.value);
+    e.classList.add("v-scroll-reveal"), r.reveal(e, c);
   },
-  updated: (e, l) => {
-    if (!(typeof window > "u") && JSON.stringify(l.value) !== JSON.stringify(l.oldValue)) {
-      const t = r(e.parentElement), n = o.get(t);
-      n && n.reveal(e, Object.assign({}, s, l.value));
+  updated: (e, n) => {
+    if (!(typeof window > "u") && JSON.stringify(n.value) !== JSON.stringify(n.oldValue)) {
+      const t = a(e.parentElement), o = s.get(t);
+      o && o.reveal(e, Object.assign({}, i, n.value));
     }
   }
 };
 export {
-  u as vScrollReveal
+  d as vScrollReveal
 };

package/package.json

@@ -3,7 +3,7 @@
   "private": false,
   "description": "A Vue 3 UI component library built with Tailwind CSS.",
   "license": "MIT",
-  "version": "1.4.33",
+  "version": "1.4.34",
   "type": "module",
   "main": "index.js",
   "module": "index.js",
@@ -57,7 +57,7 @@
     "tailwindcss": "^4.1.18",
     "v-datepicker-lite": "^0.1.10",
     "v-event-calendar": "^0.0.10",
-    "v-file-preview": "^0.1.3",
+    "v-file-preview": "0.1.5",
     "v-tooltip-lite": "^1.0.2",
     "vue-carousel-lite": "^0.2.9",
     "vue-draggable-plus": "^0.5.3",

package/utils/UtilsModuleInterop.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Resolves either a native ESM namespace or a CommonJS value exposed through
+ * an ESM `default` wrapper. Browser-only integrations use this after a lazy
+ * import so their packages are never evaluated during server rendering.
+ */
+export declare const resolveModuleRuntime: <T>(imported: unknown, isRuntime: (candidate: unknown) => candidate is T) => T | null;

package/utils/UtilsModuleInterop.js

@@ -0,0 +1,9 @@
+const e = (l, n) => {
+  if (n(l)) return l;
+  if (!l || typeof l != "object") return null;
+  const u = l.default;
+  return n(u) ? u : null;
+};
+export {
+  e as resolveModuleRuntime
+};