vlite3 1.1.1 → 1.1.4

package/components/Invoice/InvoiceVariant2.vue.d.ts

@@ -1,10 +1,15 @@
-import { InvoiceData } from './types';
+import { InvoiceData, InvoiceLabels } from './types';
 type __VLS_Props = {
     data: InvoiceData;
     /** Reduces padding, spacing, and font sizes for print-friendly output */
     compact?: boolean;
+    /** Toggles the display of the barcode text value underneath the bars */
+    displayBarcodeValue?: boolean;
+    /** Custom text labels for static UI strings */
+    labels?: InvoiceLabels;
 };
 declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     compact: boolean;
+    displayBarcodeValue: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 export default _default;

package/components/Invoice/InvoiceVariant2.vue.js

@@ -1,230 +1,217 @@
-import { defineComponent as f, computed as b, openBlock as s, createElementBlock as o, normalizeStyle as g, normalizeClass as n, createElementVNode as t, createCommentVNode as c, toDisplayString as d, createVNode as i, unref as u, Fragment as y, renderList as p } from "vue";
+import { defineComponent as b, computed as v, openBlock as o, createElementBlock as c, normalizeStyle as h, normalizeClass as l, createElementVNode as a, createVNode as u, createCommentVNode as n, toDisplayString as s, unref as i, Fragment as g, renderList as k } from "vue";
 import m from "../Price/Price.vue.js";
-import h from "../DateTime/DateTime.vue.js";
-import { getStatusColorClass as k } from "../../utils/status.js";
-import w from "../Barcode/Barcode.vue.js";
-import I from "../QRCode/QRCode.vue.js";
-const j = ["src", "alt"], z = { key: 0 }, C = { key: 1 }, N = { key: 2 }, D = { key: 3 }, S = { class: "flex justify-between" }, _ = { class: "font-semibold" }, L = {
+import w from "../DateTime/DateTime.vue.js";
+import I from "../Barcode/Barcode.vue.js";
+import _ from "../QRCode/QRCode.vue.js";
+import p from "../Avatar.vue.js";
+import j from "../StatusChip/StatusChip.vue.js";
+import z from "./InvoiceTotals.vue.js";
+const N = {
   key: 0,
-  class: "flex justify-between"
-}, T = {
+  class: "flex justify-center mb-2"
+}, V = { key: 0 }, $ = { key: 1 }, B = { key: 2 }, D = { key: 3 }, C = { class: "flex justify-between items-center" }, L = { class: "text-muted-foreground font-medium" }, T = { class: "font-semibold text-foreground" }, S = {
+  key: 0,
+  class: "flex justify-between items-center"
+}, q = { class: "text-muted-foreground font-medium" }, E = {
   key: 1,
-  class: "flex justify-between mt-2"
-}, V = { class: "font-semibold" }, $ = {
+  class: "flex justify-between items-center"
+}, A = { class: "text-muted-foreground font-medium" }, F = { class: "font-semibold text-foreground" }, K = {
   key: 2,
-  class: "flex justify-between"
-}, q = { class: "flex items-start gap-2" }, B = {
-  key: 0,
-  class: "shrink-0 w-8 h-8 rounded bg-gray-100 overflow-hidden border border-gray-200 mt-0.5"
-}, E = ["src", "alt"], A = { class: "flex-1 min-w-0" }, F = { class: "flex justify-between font-medium" }, G = ["title"], K = ["title"], O = { class: "text-gray-500 flex flex-wrap gap-x-2 gap-y-0.5 text-xs" }, R = {
+  class: "flex justify-between items-center"
+}, O = { class: "text-muted-foreground font-medium" }, R = { class: "flex items-start gap-2.5" }, U = { class: "flex-1 min-w-0" }, G = { class: "flex justify-between items-start gap-2" }, H = ["title"], J = {
   key: 0,
-  class: "text-gray-400 font-medium text-xs"
-}, U = {
+  class: "text-muted-foreground"
+}, M = {
   key: 1,
-  class: "text-success font-medium flex items-center gap-1"
-}, H = {
-  key: 0,
-  class: "text-xs!"
-}, J = { class: "text-sm" }, M = {
+  class: "text-success font-medium flex items-center gap-0.5"
+}, P = { key: 0 }, Q = { class: "flex flex-row flex-wrap items-center justify-center gap-3" }, W = {
   key: 0,
-  class: "p-1 bg-white border border-gray-200 rounded"
-}, P = {
-  key: 0,
-  class: "text-gray-600 whitespace-pre-wrap text-xs"
-}, Q = {
+  class: "bg-white"
+}, X = {
   key: 1,
-  class: "text-gray-400 font-medium uppercase tracking-widest text-xs"
-}, se = /* @__PURE__ */ f({
+  class: "bg-white overflow-hidden"
+}, ne = /* @__PURE__ */ b({
   __name: "InvoiceVariant2",
   props: {
     data: {},
-    compact: { type: Boolean, default: !1 }
+    compact: { type: Boolean, default: !1 },
+    displayBarcodeValue: { type: Boolean, default: !1 },
+    labels: {}
   },
-  setup(a) {
-    const v = a, e = b(() => v.data);
-    return (W, r) => (s(), o("div", {
-      class: n(["v-invoice-v2 bg-body text-gray-900 border border-gray-200 mx-auto print:max-w-[300px] shadow-sm font-sans tracking-tight", a.compact ? "max-w-xs" : "max-w-sm sm:max-w-md"]),
-      style: g({
-        "--text-sm": a.compact ? "12px" : "13.5px",
-        "--text-xs": a.compact ? "9.5px" : "10px"
+  setup(t) {
+    const x = t, e = v(() => x.data), r = v(() => x.labels || {});
+    return (Y, f) => (o(), c("div", {
+      class: l(["v-invoice-v2 bg-background text-foreground border border-border mx-auto print:max-w-[300px] font-sans tracking-tight", t.compact ? "max-w-xs" : "max-w-sm sm:max-w-md"]),
+      style: h({
+        "--text-sm": t.compact ? "12px" : "13.5px",
+        "--text-xs": t.compact ? "9.5px" : "10px"
       })
     }, [
-      t("div", {
-        class: n(["text-center", a.compact ? "p-3 space-y-1.5 pb-2" : "p-6 space-y-3 pb-4"])
+      a("div", {
+        class: l(["text-center", t.compact ? "p-4 pb-3" : "p-6 pb-4"])
       }, [
-        e.value.brandLogo ? (s(), o("div", {
-          key: 0,
-          class: n(a.compact ? "h-8 mx-auto mb-1" : "h-14 mx-auto mb-2")
-        }, [
-          t("img", {
+        e.value.brandLogo ? (o(), c("div", N, [
+          u(p, {
             src: e.value.brandLogo,
             alt: e.value.brandName,
-            class: "h-full object-contain mx-auto grayscale"
-          }, null, 8, j)
-        ], 2)) : c("", !0),
-        t("div", null, [
-          e.value.brandName ? (s(), o("h2", {
-            key: 0,
-            class: n(["font-bold uppercase tracking-widest", a.compact ? "text-base" : "text-2xl"])
-          }, d(e.value.brandName), 3)) : c("", !0),
-          e.value.companyInfo ? (s(), o("div", {
-            key: 1,
-            class: n(["text-gray-500 space-y-0.5", a.compact ? "mt-1 text-sm" : "mt-2 text-sm"])
-          }, [
-            e.value.companyInfo.address ? (s(), o("p", z, d(e.value.companyInfo.address), 1)) : c("", !0),
-            e.value.companyInfo.city || e.value.companyInfo.state ? (s(), o("p", C, d(e.value.companyInfo.city) + " " + d(e.value.companyInfo.state) + " " + d(e.value.companyInfo.zip), 1)) : c("", !0),
-            e.value.companyInfo.phone ? (s(), o("p", N, d(e.value.companyInfo.phone), 1)) : c("", !0),
-            e.value.companyInfo.taxId ? (s(), o("p", D, "VAT: " + d(e.value.companyInfo.taxId), 1)) : c("", !0)
-          ], 2)) : c("", !0)
-        ])
+            class: l(t.compact ? "h-9 w-9" : "h-12 w-12"),
+            rounded: "md"
+          }, null, 8, ["src", "alt", "class"])
+        ])) : n("", !0),
+        e.value.brandName ? (o(), c("h2", {
+          key: 1,
+          class: l(["font-bold uppercase tracking-widest text-foreground", t.compact ? "text-base" : "text-xl"])
+        }, s(e.value.brandName), 3)) : n("", !0),
+        e.value.companyInfo ? (o(), c("div", {
+          key: 2,
+          class: l(["text-muted-foreground space-y-0.5 mt-1", t.compact ? "text-xs" : "text-sm"])
+        }, [
+          e.value.companyInfo.address ? (o(), c("p", V, s(e.value.companyInfo.address), 1)) : n("", !0),
+          e.value.companyInfo.city || e.value.companyInfo.state ? (o(), c("p", $, s(e.value.companyInfo.city) + " " + s(e.value.companyInfo.state) + " " + s(e.value.companyInfo.zip), 1)) : n("", !0),
+          e.value.companyInfo.phone ? (o(), c("p", B, s(e.value.companyInfo.phone), 1)) : n("", !0),
+          e.value.companyInfo.taxId ? (o(), c("p", D, s(r.value.taxId || "VAT") + ": " + s(e.value.companyInfo.taxId), 1)) : n("", !0)
+        ], 2)) : n("", !0)
       ], 2),
-      t("div", {
-        class: n(["border-t border-dashed border-gray-300", a.compact ? "mx-3" : "mx-6"])
+      a("div", {
+        class: l(["border-t border-dashed border-border", t.compact ? "mx-3" : "mx-5"])
       }, null, 2),
-      t("div", {
-        class: n(a.compact ? "px-3 py-2 space-y-1 text-sm" : "px-6 py-4 space-y-1.5 text-sm")
+      a("div", {
+        class: l(t.compact ? "px-4 py-2.5 space-y-1 text-xs" : "px-5 py-3.5 space-y-1.5 text-sm")
       }, [
-        t("div", S, [
-          r[0] || (r[0] = t("span", { class: "text-gray-500 font-medium" }, "Receipt #", -1)),
-          t("span", _, d(e.value.invoiceNumber), 1)
+        a("div", C, [
+          a("span", L, s(r.value.invoiceNumber || "Receipt #"), 1),
+          a("span", T, s(e.value.invoiceNumber), 1)
         ]),
-        e.value.issuedDate ? (s(), o("div", L, [
-          r[1] || (r[1] = t("span", { class: "text-gray-500 font-medium" }, "Date", -1)),
-          i(u(h), {
+        e.value.issuedDate ? (o(), c("div", S, [
+          a("span", q, s(r.value.issued || "Date"), 1),
+          u(i(w), {
             value: e.value.issuedDate,
             type: "dateTime",
-            class: "font-medium"
+            class: "font-medium text-foreground"
           }, null, 8, ["value"])
-        ])) : c("", !0),
-        e.value.customerInfo?.name ? (s(), o("div", T, [
-          r[2] || (r[2] = t("span", { class: "text-gray-500 font-medium" }, "Customer", -1)),
-          t("span", V, d(e.value.customerInfo.name), 1)
-        ])) : c("", !0),
-        e.value.status ? (s(), o("div", $, [
-          r[3] || (r[3] = t("span", { class: "text-gray-500 font-medium" }, "Status", -1)),
-          t("span", {
-            class: n(["uppercase font-bold tracking-widest", u(k)(e.value.status)])
-          }, d(e.value.status), 3)
-        ])) : c("", !0)
+        ])) : n("", !0),
+        e.value.customerInfo?.name ? (o(), c("div", E, [
+          a("span", A, s(r.value.billedTo || "Customer"), 1),
+          a("span", F, s(e.value.customerInfo.name), 1)
+        ])) : n("", !0),
+        e.value.status ? (o(), c("div", K, [
+          a("span", O, s(r.value.status || "Status"), 1),
+          u(j, {
+            status: e.value.status,
+            "hide-icon": "",
+            size: "small"
+          }, null, 8, ["status"])
+        ])) : n("", !0)
       ], 2),
-      t("div", {
-        class: n(["border-t border-dashed border-gray-300", a.compact ? "mx-3" : "mx-6"])
+      a("div", {
+        class: l(["border-t border-dashed border-border", t.compact ? "mx-3" : "mx-5"])
       }, null, 2),
-      t("div", {
-        class: n(a.compact ? "px-3 py-2" : "px-6 py-4")
+      a("div", {
+        class: l(t.compact ? "px-4 py-2.5" : "px-5 py-3.5")
       }, [
-        t("div", {
-          class: n(["flex justify-between font-semibold text-gray-500 uppercase tracking-wider", a.compact ? "text-xs! mb-1.5" : "text-sm! mb-3"])
-        }, [...r[4] || (r[4] = [
-          t("span", null, "Item", -1),
-          t("span", null, "Amount", -1)
-        ])], 2),
-        t("div", {
-          class: n(a.compact ? "space-y-2" : "space-y-4")
+        a("div", {
+          class: l(["flex justify-between font-semibold text-muted-foreground uppercase tracking-wider mb-2", t.compact ? "text-[10px]" : "text-xs"])
+        }, [
+          a("span", null, s(r.value.item || "Item"), 1),
+          a("span", null, s(r.value.total || "Amount"), 1)
+        ], 2),
+        a("div", {
+          class: l(t.compact ? "space-y-2.5" : "space-y-3.5")
         }, [
-          (s(!0), o(y, null, p(e.value.items, (l, x) => (s(), o("div", {
-            key: l.id || x
+          (o(!0), c(g, null, k(e.value.items, (d, y) => (o(), c("div", {
+            key: d.id || y
           }, [
-            t("div", q, [
-              l.thumbnail ? (s(), o("div", B, [
-                t("img", {
-                  src: l.thumbnail,
-                  alt: l.name,
-                  class: "w-full h-full object-cover grayscale"
-                }, null, 8, E)
-              ])) : c("", !0),
-              t("div", A, [
-                t("div", F, [
-                  t("span", {
-                    class: "truncate pr-2 text-sm!",
-                    title: l.name
-                  }, d(l.name), 9, G),
-                  i(u(m), {
-                    value: l.total,
-                    class: "shrink-0 font-bold text-xs"
-                  }, null, 8, ["value"])
+            a("div", R, [
+              d.thumbnail ? (o(), c("div", {
+                key: 0,
+                class: l(["shrink-0 overflow-hidden border border-border mt-0.5", t.compact ? "w-8 h-8 rounded" : "w-9 h-9 rounded-md"])
+              }, [
+                u(p, {
+                  src: d.thumbnail,
+                  alt: d.name,
+                  class: "w-full h-full",
+                  rounded: "sm"
+                }, null, 8, ["src", "alt"])
+              ], 2)) : n("", !0),
+              a("div", U, [
+                a("div", G, [
+                  a("span", {
+                    class: l(["font-semibold text-foreground truncate", t.compact ? "text-xs" : "text-sm"]),
+                    title: d.name
+                  }, s(d.name), 11, H),
+                  u(i(m), {
+                    value: d.total,
+                    class: l(["shrink-0 font-bold text-foreground", t.compact ? "text-xs" : "text-sm"])
+                  }, null, 8, ["value", "class"])
                 ]),
-                l.sku ? (s(), o("div", {
+                d.sku ? (o(), c("div", {
                   key: 0,
-                  class: "text-xs uppercase text-gray-400 font-normal tracking-tight truncate",
-                  title: l.sku
-                }, " SKU: " + d(l.sku), 9, K)) : c("", !0),
-                t("div", O, [
-                  t("span", null, d(l.quantity) + " x", 1),
-                  i(u(m), {
-                    value: l.price,
-                    class: "text-xs"
+                  class: l(["text-muted-foreground uppercase tracking-tight truncate mt-0.5", t.compact ? "text-[9px]" : "text-[10px]"])
+                }, s(r.value.sku || "SKU") + ": " + s(d.sku), 3)) : n("", !0),
+                a("div", {
+                  class: l(["text-muted-foreground flex flex-wrap gap-x-1.5 gap-y-0.5 mt-0.5", t.compact ? "text-[10px]" : "text-xs"])
+                }, [
+                  a("span", null, s(d.quantity) + " x", 1),
+                  u(i(m), {
+                    value: d.price
                   }, null, 8, ["value"]),
-                  l.size ? (s(), o("span", R, "| Size: " + d(l.size), 1)) : c("", !0),
-                  l.discount !== void 0 ? (s(), o("div", U, [
-                    r[5] || (r[5] = t("span", { class: "text-xs" }, "| Disc:", -1)),
-                    i(u(m), {
-                      value: -l.discount,
-                      class: "text-xs!"
+                  d.size ? (o(), c("span", J, "· " + s(d.size), 1)) : n("", !0),
+                  d.discount !== void 0 ? (o(), c("div", M, [
+                    f[0] || (f[0] = a("span", null, "· Disc:", -1)),
+                    u(i(m), {
+                      value: -d.discount
                     }, null, 8, ["value"]),
-                    l.discountLabel ? (s(), o("span", H, "(" + d(l.discountLabel) + ")", 1)) : c("", !0)
-                  ])) : c("", !0)
-                ])
+                    d.discountLabel ? (o(), c("span", P, "(" + s(d.discountLabel) + ")", 1)) : n("", !0)
+                  ])) : n("", !0)
+                ], 2)
               ])
             ])
           ]))), 128))
         ], 2)
       ], 2),
-      t("div", {
-        class: n(["border-t border-dashed border-gray-300", a.compact ? "mx-3" : "mx-6"])
+      a("div", {
+        class: l(["border-t border-dashed border-border", t.compact ? "mx-3" : "mx-5"])
       }, null, 2),
-      t("div", {
-        class: n(a.compact ? "px-3 py-2 space-y-1" : "px-6 py-4 space-y-1")
-      }, [
-        (s(!0), o(y, null, p(e.value.totals, (l, x) => (s(), o("div", {
-          key: x,
-          class: n([
-            "flex justify-between",
-            l.isGrandTotal ? a.compact ? "mt-1 pt-1 border-t border-gray-200 text-base font-bold" : "mt-2 pt-2 border-t border-gray-200 text-lg font-bold" : (a.compact, "font-medium text-gray-600")
-          ])
-        }, [
-          t("span", J, d(l.label), 1),
-          i(u(m), {
-            value: l.value,
-            class: "text-sm"
-          }, null, 8, ["value"])
-        ], 2))), 128))
-      ], 2),
-      t("div", {
-        class: n(["border-t border-dashed border-gray-300", a.compact ? "mx-3" : "mx-6"])
+      u(z, {
+        totals: e.value.totals,
+        compact: t.compact,
+        variant: "Variant2"
+      }, null, 8, ["totals", "compact"]),
+      a("div", {
+        class: l(["border-t border-dashed border-border", t.compact ? "mx-3" : "mx-5"])
       }, null, 2),
-      t("div", {
-        class: n(a.compact ? "px-3 py-3 text-center space-y-3" : "px-6 py-6 text-center space-y-4")
+      a("div", {
+        class: l(t.compact ? "px-4 py-3 text-center space-y-3" : "px-5 py-4 text-center space-y-4")
       }, [
-        t("div", {
-          class: n(["flex flex-col items-center justify-center", a.compact ? "gap-1" : "gap-2"])
-        }, [
-          e.value.qrcode ? (s(), o("div", M, [
-            i(u(I), {
-              text: e.value.qrcode,
-              size: a.compact ? 64 : 96
-            }, null, 8, ["text", "size"])
-          ])) : c("", !0),
-          e.value.barcode ? (s(), o("div", {
-            key: 1,
-            class: n(
-              a.compact ? "inline-block overflow-hidden" : "scale-90 inline-block overflow-hidden"
-            )
-          }, [
-            i(u(w), {
+        a("div", Q, [
+          e.value.qrcode ? (o(), c("div", W, [
+            u(i(_), {
+              value: e.value.qrcode,
+              size: t.compact ? 48 : 64
+            }, null, 8, ["value", "size"])
+          ])) : n("", !0),
+          e.value.barcode ? (o(), c("div", X, [
+            u(i(I), {
               value: e.value.barcode,
               format: "CODE128",
-              height: a.compact ? 28 : 40,
-              width: a.compact ? 1 : 1.2
-            }, null, 8, ["value", "height", "width"])
-          ], 2)) : c("", !0)
-        ], 2),
-        e.value.notes ? (s(), o("div", P, d(e.value.notes), 1)) : c("", !0),
-        e.value.footerText ? (s(), o("div", Q, d(e.value.footerText), 1)) : c("", !0)
+              height: t.compact ? 24 : 32,
+              width: t.compact ? 1 : 1.2,
+              "display-value": t.displayBarcodeValue
+            }, null, 8, ["value", "height", "width", "display-value"])
+          ])) : n("", !0)
+        ]),
+        e.value.notes ? (o(), c("div", {
+          key: 0,
+          class: l(["text-muted-foreground whitespace-pre-wrap", t.compact ? "text-[10px]" : "text-xs"])
+        }, s(e.value.notes), 3)) : n("", !0),
+        e.value.footerText ? (o(), c("div", {
+          key: 1,
+          class: l(["text-muted-foreground font-medium uppercase tracking-widest", t.compact ? "text-[9px]" : "text-[10px]"])
+        }, s(e.value.footerText), 3)) : n("", !0)
       ], 2)
     ], 6));
   }
 });
 export {
-  se as default
+  ne as default
 };

package/components/Invoice/InvoiceVariant3.vue.d.ts

@@ -1,10 +1,15 @@
-import { InvoiceData } from './types';
+import { InvoiceData, InvoiceLabels } from './types';
 type __VLS_Props = {
     data: InvoiceData;
     /** Reduces padding, spacing, and font sizes for print-friendly output */
     compact?: boolean;
+    /** Toggles the display of the barcode text value underneath the bars */
+    displayBarcodeValue?: boolean;
+    /** Custom text labels for static UI strings */
+    labels?: InvoiceLabels;
 };
 declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     compact: boolean;
+    displayBarcodeValue: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 export default _default;