vlite3 0.5.3 → 0.5.5

package/README.md

@@ -14,6 +14,10 @@ yarn add vlite3
 
 ```
 
+## Demo
+
+[Live Demo](https://vlite3.vercel.app/)
+
 ## 2. Tailwind CSS Setup (Tailwind v4)
 
 `vite.config.ts`

package/components/Barcode/Barcode.vue.js

@@ -1,5 +1,5 @@
 import { defineComponent as d, ref as i, 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 "../../_virtual/JsBarcode.js";
+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 = {
   key: 0,

package/components/ColorPicker/ColorIro.vue3.js

@@ -1,5 +1,5 @@
-import o from "./ColorIro.vue.js";
-/* empty css              */
+import o from "./ColorIro.vue2.js";
+/* empty css             */
 export {
   o as default
 };

package/components/ColorPicker/ColorPicker.vue.js

@@ -1,11 +1,12 @@
-import { defineComponent as z, ref as p, watch as i, openBlock as a, createBlock as f, unref as v, withCtx as u, createElementBlock as h, createVNode as c, createCommentVNode as d, createElementVNode as $, mergeProps as w } from "vue";
+import { defineComponent as z, ref as p, watch as i, openBlock as a, createBlock as f, unref as v, withCtx as u, createElementBlock as h, createVNode as c, createCommentVNode as m, createElementVNode as $, mergeProps as w } from "vue";
 import B from "../Dropdown/Dropdown.vue.js";
 import "@iconify/vue";
 import O from "../Input.vue.js";
+/* empty css            */
 import "../../core/config.js";
 import y from "../Button.vue.js";
-import E from "./ColorIro.vue.js";
-/* empty css              */
+import E from "./ColorIro.vue2.js";
+/* empty css             */
 import { useEyeDropper as P } from "@vueuse/core";
 const I = {
   key: 0,
@@ -13,7 +14,7 @@ const I = {
 }, N = {
   key: 0,
   class: "flex items-center gap-1.5 w-full"
-}, D = { class: "w-32" }, J = /* @__PURE__ */ z({
+}, D = { class: "w-32" }, K = /* @__PURE__ */ z({
   __name: "ColorPicker",
   props: {
     modelValue: { default: "#000000" },
@@ -25,7 +26,7 @@ const I = {
   },
   emits: ["update:modelValue", "change"],
   setup(o, { emit: V }) {
-    const n = o, m = V, r = p(!1), t = p(n.modelValue || "#000000"), { isSupported: b, open: g, sRGBHex: k } = P();
+    const n = o, d = V, r = p(!1), t = p(n.modelValue || "#000000"), { isSupported: b, open: g, sRGBHex: k } = P();
     i(k, (e) => {
       e && (t.value = e);
     });
@@ -42,7 +43,7 @@ const I = {
         e && e !== t.value && (t.value = e);
       }
     ), i(t, (e) => {
-      /^#([0-9A-F]{3,8})$/i.test(e) && e !== n.modelValue && (m("update:modelValue", e), m("change", e));
+      /^#([0-9A-F]{3,8})$/i.test(e) && e !== n.modelValue && (d("update:modelValue", e), d("change", e));
     });
     const C = (e) => {
       t.value = e;
@@ -85,7 +86,7 @@ const I = {
                   variant: "outline",
                   size: "sm",
                   class: "px-2 shrink-0"
-                })) : d("", !0),
+                })) : m("", !0),
                 $("div", D, [
                   c(O, {
                     modelValue: t.value,
@@ -97,16 +98,16 @@ const I = {
                     "input-class": "font-mono text-xs uppercase "
                   }, null, 8, ["modelValue"])
                 ])
-              ])) : d("", !0)
+              ])) : m("", !0)
             ]),
             _: 1
           }, 8, ["color", "size"])
-        ])) : d("", !0)
+        ])) : m("", !0)
       ]),
       _: 1
     }, 8, ["disabled", "position"]));
   }
 });
 export {
-  J as default
+  K as default
 };

package/components/DataTable/DataTableToolbar.vue.js

@@ -1,10 +1,11 @@
 import { defineComponent as V, computed as d, openBlock as t, createElementBlock as o, normalizeClass as n, renderSlot as s, createCommentVNode as u, createElementVNode as m, createVNode as b } from "vue";
 import g from "../Input.vue.js";
+/* empty css            */
 import { $t as i } from "../../utils/i18n.js";
 const w = {
   key: 0,
   class: "flex items-center gap-3 mr-auto"
-}, $ = { class: "ml-auto" }, k = { class: "flex items-center gap-3" }, T = /* @__PURE__ */ V({
+}, $ = { class: "ml-auto" }, k = { class: "flex items-center gap-3" }, _ = /* @__PURE__ */ V({
   __name: "DataTableToolbar",
   props: {
     modelValue: { default: "" },
@@ -55,5 +56,5 @@ const w = {
   }
 });
 export {
-  T as default
+  _ as default
 };

package/components/DatePicker.vue.js

@@ -3,9 +3,10 @@ import b from "./Button.vue.js";
 import w from "./Dropdown/Dropdown.vue.js";
 import "@iconify/vue";
 import { $t as y } from "../utils/i18n.js";
+/* empty css           */
 import I, { TimePicker as z } from "v-datepicker-lite";
 import "v-datepicker-lite/style.css";
-const S = { class: "overflow-hidden min-w-[300px]" }, H = /* @__PURE__ */ P({
+const S = { class: "overflow-hidden min-w-[300px]" }, U = /* @__PURE__ */ P({
   __name: "DatePicker",
   props: {
     placeholder: {},
@@ -128,5 +129,5 @@ const S = { class: "overflow-hidden min-w-[300px]" }, H = /* @__PURE__ */ P({
   }
 });
 export {
-  H as default
+  U as default
 };

package/components/DateRangePicker.vue.js

@@ -2,13 +2,14 @@ import { defineComponent as V, ref as w, watch as L, computed as u, openBlock as
 import T from "./Dropdown/Dropdown.vue.js";
 import f from "./Icon.vue.js";
 import { $t as l } from "../utils/i18n.js";
+/* empty css           */
 import P from "./Button.vue.js";
 import p from "v-datepicker-lite";
 import "v-datepicker-lite/style.css";
 const $ = { class: "flex items-center gap-2" }, H = { class: "flex flex-col sm:flex-row bg-background rounded-md" }, Q = {
   key: 0,
   class: "flex flex-col gap-1 sm:pr-3 py-2 sm:border-r border-border max-h-[280px]"
-}, j = { class: "flex flex-col sm:flex-row items-center gap-4 py-2 p-3" }, O = { class: "border border-border rounded-md overflow-hidden bg-background" }, I = { class: "flex items-center justify-center shrink-0" }, U = { class: "border border-border rounded-md overflow-hidden bg-background" }, Z = /* @__PURE__ */ V({
+}, j = { class: "flex flex-col sm:flex-row items-center gap-4 py-2 p-3" }, O = { class: "border border-border rounded-md overflow-hidden bg-background" }, I = { class: "flex items-center justify-center shrink-0" }, U = { class: "border border-border rounded-md overflow-hidden bg-background" }, ee = /* @__PURE__ */ V({
   __name: "DateRangePicker",
   props: {
     modelValue: {},
@@ -227,5 +228,5 @@ const $ = { class: "flex items-center gap-2" }, H = { class: "flex flex-col sm:f
   }
 });
 export {
-  Z as default
+  ee as default
 };

package/components/Dropdown/DropdownMenu.vue.js

@@ -1,6 +1,7 @@
 import { defineComponent as Z, defineAsyncComponent as ee, ref as j, computed as h, watch as T, onMounted as te, onBeforeUnmount as le, openBlock as n, createElementBlock as c, createVNode as S, createCommentVNode as u, renderSlot as b, unref as o, normalizeStyle as se, normalizeClass as _, toDisplayString as D, createBlock as v, Fragment as E, renderList as ne, withCtx as N, createElementVNode as $, createSlots as oe, mergeProps as re, nextTick as ae } from "vue";
 import I from "../Icon.vue.js";
 import ce from "../Input.vue.js";
+/* empty css            */
 import de from "./DropdownItem.vue.js";
 import ie from "./DropdownBooleanItem.vue.js";
 import ue from "./DropdownGroupedLayout.vue.js";
@@ -25,7 +26,7 @@ const he = ["dir"], ve = {
 }, Se = {
   key: 3,
   class: "shrink-0"
-}, De = /* @__PURE__ */ Z({
+}, Ee = /* @__PURE__ */ Z({
   __name: "DropdownMenu",
   props: {
     options: { default: () => [] },
@@ -245,5 +246,5 @@ const he = ["dir"], ve = {
   }
 });
 export {
-  De as default
+  Ee as default
 };

package/components/ExportData/ExportData.vue.js

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

package/components/Form/FormField.vue.js

@@ -4,6 +4,7 @@ import O from "../NumberInput.vue.js";
 import v from "../Button.vue.js";
 import { $t as T } from "../../utils/i18n.js";
 import g from "../Input.vue.js";
+/* empty css            */
 import j from "../Switch.vue.js";
 import D from "../CheckBox.vue.js";
 import E from "../FilePicker/FilePicker.vue.js";
@@ -14,7 +15,7 @@ import G from "../DatePicker.vue.js";
 import J from "../ColorPicker/ColorPicker.vue.js";
 import K from "../IconPicker.vue.js";
 import M from "./CustomFields.vue.js";
-const ue = /* @__PURE__ */ U({
+const se = /* @__PURE__ */ U({
   __name: "FormField",
   props: {
     field: {},
@@ -75,13 +76,13 @@ const ue = /* @__PURE__ */ U({
         default:
           return g;
       }
-    }), x = o(() => {
+    }), b = o(() => {
       const t = e.field.type, a = {
         disabled: e.disabled || e.field.disabled === !0,
         ...e?.field || {},
         ...e.field.props || {},
-        label: e?.field?.label,
-        labelI18n: e?.field?.labelI18n
+        label: "",
+        labelI18n: ""
       }, i = e.field.placeholderI18n ? T(e.field.placeholderI18n) : e.field.placeholder;
       return t === "text" || t === "email" || t === "password" || t === "tel" || t === "url" || t === "search" || t === "textarea" || !t ? {
         ...a,
@@ -175,6 +176,8 @@ const ue = /* @__PURE__ */ U({
         value: e.value || "lucide:smile"
       } : t === "customFields" ? {
         ...a,
+        label: e?.field?.label,
+        labelI18n: e?.field?.labelI18n,
         modelValue: Array.isArray(e.value) ? e.value : [],
         schema: e.field.props?.schema || [],
         headers: e.field.props?.headers || [],
@@ -188,7 +191,7 @@ const ue = /* @__PURE__ */ U({
         value: e.value,
         values: e.values
       } : a;
-    }), b = o(() => {
+    }), x = o(() => {
       const t = e.field.type;
       return t === "text" || t === "email" || t === "password" || t === "tel" || t === "url" || t === "search" || t === "textarea" || t === "switch" || t === "check" || t === "number" || !t ? {
         "update:modelValue": w
@@ -234,9 +237,9 @@ const ue = /* @__PURE__ */ U({
       t.action && s("addonAction", t.action);
     };
     return (t, a) => P.value ? (r(), f(g, u({ key: 0 }, {
-      ...x.value,
+      ...b.value,
       ...l.field?.props || {}
-    }, S(b.value)), N({ _: 2 }, [
+    }, S(x.value)), N({ _: 2 }, [
       R(p)(l.field.addonLeft) ? {
         name: "addon-left",
         fn: n(() => [
@@ -307,11 +310,11 @@ const ue = /* @__PURE__ */ U({
       key: 1,
       class: ["switch", "check"].includes(l.field?.type) ? "" : "w-full"
     }, {
-      ...x.value,
+      ...b.value,
       ...l.field?.props || {}
-    }, S(b.value)), null, 16, ["class"]));
+    }, S(x.value)), null, 16, ["class"]));
   }
 });
 export {
-  ue as default
+  se as default
 };

package/components/IconPicker.vue.js

@@ -2,10 +2,11 @@ import { defineComponent as g, ref as v, computed as w, openBlock as k, createBl
 import $ from "./Dropdown/Dropdown.vue.js";
 import "@iconify/vue";
 import { $t as d } from "../utils/i18n.js";
+/* empty css           */
 import C from "./Button.vue.js";
 import I from "iconify-icon-picker";
 import "iconify-icon-picker/style.css";
-const z = /* @__PURE__ */ g({
+const V = /* @__PURE__ */ g({
   __name: "IconPicker",
   props: {
     btnProps: {},
@@ -15,12 +16,12 @@ const z = /* @__PURE__ */ g({
     placeholderI18n: {}
   },
   emits: ["onSelect", "onTrigger", "onClose"],
-  setup(o, { emit: u }) {
-    const t = o, i = u, m = v(!1), l = () => {
-      m.value = !1;
-    }, h = (e, r) => {
+  setup(o, { emit: m }) {
+    const t = o, i = m, u = v(!1), l = () => {
+      u.value = !1;
+    }, p = (e, r) => {
       i("onSelect", e, r), l();
-    }, p = w(() => {
+    }, h = w(() => {
       if (t.placeholderI18n) return d(t.placeholderI18n);
       if (t.placeholder) return t.placeholder;
       const e = d("vlite.iconPicker.search");
@@ -116,10 +117,10 @@ const z = /* @__PURE__ */ g({
         c(e.$slots, "menu-top", { close: l }),
         s(a(I), {
           id: "icon-picker",
-          placeholder: p.value,
+          placeholder: h.value,
           "items-per-page": 35,
           value: o.value,
-          onOnSelect: h,
+          onOnSelect: p,
           defaultIcons: f
         }, null, 8, ["placeholder", "value"])
       ]),
@@ -128,5 +129,5 @@ const z = /* @__PURE__ */ g({
   }
 });
 export {
-  z as default
+  V as default
 };

package/components/ImportData/ImportStep1.vue.js

@@ -1,5 +1,5 @@
 import { defineComponent as A, ref as b, computed as d, openBlock as w, createElementBlock as V, createElementVNode as a, toDisplayString as l, withModifiers as F, normalizeClass as E, createVNode as h, createCommentVNode as J, withCtx as K, createTextVNode as L } from "vue";
-import R from "../../_virtual/papaparse.min.js";
+import R from "papaparse";
 import M from "../Icon.vue.js";
 import W from "../Button.vue.js";
 import q from "../Textarea.vue.js";

package/components/ImportData/ImportStep2.vue.js

@@ -2,6 +2,7 @@ import { defineComponent as H, ref as M, computed as c, openBlock as o, createEl
 import A from "../Dropdown/Dropdown.vue.js";
 import "@iconify/vue";
 import { $t as B } from "../../utils/i18n.js";
+/* empty css            */
 import I from "../CheckBox.vue.js";
 const O = { class: "space-y-6" }, j = { class: "font-medium text-lg mb-1" }, E = { class: "text-sm text-muted-foreground" }, P = { class: "border border-border rounded-xl overflow-hidden" }, R = { class: "overflow-x-auto max-h-[400px]" }, U = { class: "w-full text-sm text-left" }, q = { class: "text-xs text-muted-foreground uppercase bg-muted sticky top-0 z-10" }, L = { class: "px-4 py-3 font-medium" }, W = { class: "px-4 py-3 font-medium" }, G = { class: "px-4 py-3 font-medium" }, J = { class: "divide-y divide-border" }, K = { class: "px-4 py-3 font-medium text-foreground whitespace-nowrap" }, Q = { class: "px-4 py-2 min-w-[200px]" }, T = {
   key: 1,
@@ -12,7 +13,7 @@ const O = { class: "space-y-6" }, j = { class: "font-medium text-lg mb-1" }, E =
 }, Z = { class: "px-4 py-3 text-center align-middle" }, ee = { class: "flex justify-center items-center h-full" }, te = {
   key: 0,
   class: "text-center text-sm text-warning font-medium p-4 bg-warning/10 rounded-lg border border-warning/20"
-}, ae = /* @__PURE__ */ H({
+}, ce = /* @__PURE__ */ H({
   __name: "ImportStep2",
   props: {
     headers: {},
@@ -94,5 +95,5 @@ const O = { class: "space-y-6" }, j = { class: "font-medium text-lg mb-1" }, E =
   }
 });
 export {
-  ae as default
+  ce as default
 };