vlite3 1.1.1 → 1.1.4

package/components/Invoice/InvoiceVariant4.vue.js

@@ -1,290 +1,333 @@
-import { defineComponent as k, computed as f, openBlock as o, createElementBlock as c, createElementVNode as s, normalizeClass as a, toDisplayString as d, createCommentVNode as n, createVNode as u, unref as r, Fragment as v, renderList as y } from "vue";
-import i from "../Price/Price.vue.js";
+import { defineComponent as I, computed as x, openBlock as o, createElementBlock as s, normalizeStyle as w, createElementVNode as a, normalizeClass as n, toDisplayString as t, createBlock as D, createCommentVNode as c, createVNode as r, unref as u, createTextVNode as m, Fragment as f, renderList as z } from "vue";
+import p from "../Price/Price.vue.js";
 import g from "../DateTime/DateTime.vue.js";
-import { getStatusColorClass as w } from "../../utils/status.js";
-import I from "../Barcode/Barcode.vue.js";
-const D = { class: "v-invoice-v4 bg-background border border-border text-foreground overflow-hidden rounded-2xl shadow-lg font-sans" }, T = { class: "flex flex-col md:items-end gap-2 text-right" }, N = ["src", "alt"], j = { key: 0 }, z = { key: 1 }, C = { key: 0 }, L = { key: 1 }, S = { key: 2 }, V = { key: 3 }, B = { key: 1 }, E = { key: 1 }, G = { key: 2 }, $ = { key: 3 }, F = { class: "border-b-2 border-primary/20" }, O = { class: "divide-y divide-border/50" }, P = { class: "flex items-center gap-2" }, q = ["src", "alt"], K = { class: "min-w-0 flex-1" }, Q = ["title"], U = ["title"], A = {
+import T from "../Barcode/Barcode.vue.js";
+import N from "../QRCode/QRCode.vue.js";
+import k from "../Avatar.vue.js";
+import V from "../StatusChip/StatusChip.vue.js";
+import B from "./InvoiceTotals.vue.js";
+const $ = { class: "flex flex-col sm:flex-row justify-between items-start gap-4" }, C = { class: "flex flex-col gap-3" }, L = { class: "flex items-center gap-2.5 mt-1.5 flex-wrap" }, S = { class: "flex flex-wrap gap-5" }, j = { key: 0 }, q = { key: 1 }, E = { class: "flex flex-col items-start sm:items-end gap-2 shrink-0" }, F = { class: "grid grid-cols-1 md:grid-cols-2 gap-5 mb-6" }, O = { key: 0 }, P = { key: 1 }, K = { key: 2 }, Q = { key: 3 }, U = { class: "flex flex-col gap-0.5" }, A = { key: 0 }, G = { key: 1 }, H = {
+  key: 2,
+  class: "text-gray-700 font-medium"
+}, J = { key: 4 }, M = { key: 1 }, R = { key: 1 }, W = { key: 2 }, X = { key: 3 }, Y = { class: "flex flex-col gap-0.5" }, Z = { key: 0 }, ee = { key: 1 }, te = {
+  key: 4,
+  class: "text-xs font-semibold"
+}, oe = {
+  scope: "col",
+  class: "invoice-th font-bold"
+}, ae = {
+  scope: "col",
+  class: "invoice-th invoice-text-right font-bold"
+}, se = {
+  key: 0,
+  scope: "col",
+  class: "invoice-th invoice-text-right font-bold"
+}, ce = {
+  scope: "col",
+  class: "invoice-th invoice-text-right font-bold"
+}, le = {
+  key: 1,
+  scope: "col",
+  class: "invoice-th invoice-text-right font-bold"
+}, ne = {
+  scope: "col",
+  class: "invoice-th invoice-text-right font-bold text-gray-900"
+}, ie = { class: "invoice-tbody" }, de = { class: "invoice-td" }, re = { class: "flex items-center gap-3" }, ue = { class: "min-w-0 flex-1" }, me = ["title"], ve = ["title"], xe = {
   key: 1,
-  class: "block text-xs text-muted-foreground font-normal mt-0.5 line-clamp-1 max-w-sm"
-}, H = {
+  class: "block text-xs text-muted-foreground line-clamp-2 max-w-md whitespace-normal mt-0.5 leading-relaxed"
+}, fe = { class: "invoice-td invoice-text-right tabular-nums text-muted-foreground font-semibold text-sm" }, pe = {
+  key: 0,
+  class: "invoice-td invoice-text-right tabular-nums text-muted-foreground text-sm"
+}, he = { class: "invoice-td invoice-text-right tabular-nums text-muted-foreground font-medium" }, be = {
+  key: 1,
+  class: "invoice-td invoice-text-right tabular-nums text-success font-bold"
+}, ye = {
   key: 0,
   class: "flex flex-col items-end"
-}, J = {
+}, ge = {
   key: 0,
-  class: "text-[9px] uppercase font-bold"
-}, M = { key: 1 }, R = { key: 0 }, W = { key: 1 }, at = /* @__PURE__ */ k({
+  class: "text-sm uppercase tracking-wider font-extrabold opacity-80 mt-0.5"
+}, ke = {
+  key: 1,
+  class: "text-muted-foreground font-normal"
+}, _e = { class: "invoice-td invoice-text-right tabular-nums font-bold text-foreground" }, Ie = { class: "flex flex-row flex-wrap gap-2 items-center" }, we = {
+  key: 0,
+  class: "shrink-0 inline-block"
+}, De = {
+  key: 1,
+  class: "shrink-0 inline-block overflow-hidden"
+}, ze = { key: 0 }, Te = { class: "w-full md:w-[42%] min-w-[260px]" }, Ne = { key: 0 }, Ve = { key: 1 }, Oe = /* @__PURE__ */ I({
   __name: "InvoiceVariant4",
   props: {
     data: {},
-    compact: { type: Boolean, default: !1 }
+    compact: { type: Boolean, default: !1 },
+    displayBarcodeValue: { type: Boolean, default: !1 },
+    labels: {}
   },
-  setup(t) {
-    const h = t, e = f(() => h.data), p = f(() => e.value.items.some((m) => !!m.size)), b = f(() => e.value.items.some((m) => m.discount !== void 0));
-    return (m, X) => (o(), c("div", D, [
-      s("div", {
-        class: a(["bg-gray-100", t.compact ? "p-5" : "p-8 sm:p-10"])
+  setup(l) {
+    const h = l, e = x(() => h.data), d = x(() => h.labels || {}), b = x(() => e.value.items.some((v) => !!v.size)), y = x(() => e.value.items.some((v) => v.discount !== void 0));
+    return (v, Be) => (o(), s("div", {
+      class: "v-invoice-v4 bg-background border border-border text-foreground overflow-hidden rounded-xl font-sans print:shadow-none print:border-none",
+      style: w({
+        "--invoice-cell-px": l.compact ? "0.75rem" : "1rem",
+        "--invoice-cell-py": l.compact ? "0.5rem" : "0.75rem",
+        "--invoice-thead-bg": "var(--color-muted)",
+        "--invoice-thead-border": "1px solid var(--color-border)",
+        "--invoice-thead-color": "var(--color-muted-foreground)",
+        "--invoice-tr-border": "1px solid var(--color-border)",
+        "--invoice-tr-hover-bg": "color-mix(in oklab, var(--color-muted) 40%, transparent)",
+        "--invoice-td-valign": "middle"
+      })
+    }, [
+      a("div", {
+        class: n(["bg-gray-900 text-white", l.compact ? "px-5 py-4" : "px-6 py-5 sm:px-8"])
       }, [
-        s("div", {
-          class: a(["flex flex-col md:flex-row justify-between", t.compact ? "gap-4 mb-2" : "gap-6 mb-6"])
-        }, [
-          s("div", null, [
-            s("h1", {
-              class: a(["font-extrabold tracking-tight", t.compact ? "text-2xl mb-1" : "text-3xl md:text-4xl mb-2"])
-            }, d(e.value.brandTitle || "INVOICE"), 3),
-            s("p", {
-              class: a(["text-foreground/80 font-medium tracking-wide", t.compact ? "text-sm" : "text-lg"])
-            }, " #" + d(e.value.invoiceNumber), 3)
+        a("div", $, [
+          a("div", C, [
+            a("div", null, [
+              a("h1", {
+                class: n(["font-black tracking-tighter uppercase leading-none text-white", l.compact ? "text-3xl" : "text-4xl"])
+              }, t(e.value.brandTitle || d.value.invoice || "INVOICE"), 3),
+              a("div", L, [
+                a("span", {
+                  class: n(["font-semibold opacity-80", l.compact ? "text-sm" : "text-base"])
+                }, " #" + t(e.value.invoiceNumber), 3),
+                e.value.status ? (o(), D(V, {
+                  key: 0,
+                  status: e.value.status,
+                  "hide-icon": "",
+                  size: "small"
+                }, null, 8, ["status"])) : c("", !0)
+              ])
+            ]),
+            a("div", S, [
+              e.value.issuedDate ? (o(), s("div", j, [
+                a("p", {
+                  class: n(["font-semibold uppercase tracking-widest opacity-60", l.compact ? "text-[9px] mb-0.5" : "text-[10px] mb-1"])
+                }, t(d.value.issued || "Issue Date"), 3),
+                r(u(g), {
+                  value: e.value.issuedDate,
+                  type: "date",
+                  class: n(["font-extrabold", l.compact ? "text-sm" : "text-base"])
+                }, null, 8, ["value", "class"])
+              ])) : c("", !0),
+              e.value.dueDate ? (o(), s("div", q, [
+                a("p", {
+                  class: n(["font-semibold uppercase tracking-widest opacity-60", l.compact ? "text-[9px] mb-0.5" : "text-[10px] mb-1"])
+                }, t(d.value.due || "Due Date"), 3),
+                r(u(g), {
+                  value: e.value.dueDate,
+                  type: "date",
+                  class: n(["font-extrabold", l.compact ? "text-sm" : "text-base"])
+                }, null, 8, ["value", "class"])
+              ])) : c("", !0)
+            ])
           ]),
-          s("div", T, [
-            e.value.brandLogo ? (o(), c("div", {
+          a("div", E, [
+            e.value.brandLogo ? (o(), s("div", {
               key: 0,
-              class: a(["bg-white/10 rounded-xl backdrop-blur-sm shadow-sm inline-block", t.compact ? "h-10 p-1 mb-1" : "h-14 p-2 mb-2"])
+              class: n(["bg-white/10 rounded-lg p-2 border border-white/20", l.compact ? "h-11" : "h-14"])
             }, [
-              s("img", {
+              r(k, {
                 src: e.value.brandLogo,
                 alt: e.value.brandName,
-                class: "h-full object-contain filter brightness-0 invert"
-              }, null, 8, N)
-            ], 2)) : n("", !0),
-            e.value.brandName ? (o(), c("h2", {
+                class: "h-full w-auto object-contain",
+                rounded: "sm"
+              }, null, 8, ["src", "alt"])
+            ], 2)) : c("", !0),
+            e.value.brandName ? (o(), s("h2", {
               key: 1,
-              class: a(["font-bold", t.compact ? "text-base" : "text-lg"])
-            }, d(e.value.brandName), 3)) : n("", !0)
+              class: n(["font-extrabold tracking-tight opacity-90 text-white", l.compact ? "text-base" : "text-lg"])
+            }, t(e.value.brandName), 3)) : c("", !0)
           ])
-        ], 2),
-        s("div", {
-          class: a(["flex flex-col md:flex-row justify-between items-start md:items-end gap-6 border-t border-white/20", t.compact ? "pt-3" : "pt-5"])
-        }, [
-          s("div", {
-            class: a(t.compact ? "flex gap-5" : "flex gap-8")
-          }, [
-            e.value.issuedDate ? (o(), c("div", j, [
-              s("p", {
-                class: a(["text-foreground/60 font-semibold uppercase tracking-widest", t.compact ? "text-[10px] mb-0.5" : "text-xs mb-1"])
-              }, " Issue Date ", 2),
-              u(r(g), {
-                value: e.value.issuedDate,
-                type: "date",
-                class: a(["font-bold", t.compact ? "text-sm" : "text-base"])
-              }, null, 8, ["value", "class"])
-            ])) : n("", !0),
-            e.value.dueDate ? (o(), c("div", z, [
-              s("p", {
-                class: a(["text-foreground/60 font-semibold uppercase tracking-widest", t.compact ? "text-[10px] mb-0.5" : "text-xs mb-1"])
-              }, " Due Date ", 2),
-              u(r(g), {
-                value: e.value.dueDate,
-                type: "date",
-                class: a(["font-bold", t.compact ? "text-sm" : "text-base"])
-              }, null, 8, ["value", "class"])
-            ])) : n("", !0)
-          ], 2),
-          e.value.status ? (o(), c("div", {
-            key: 0,
-            class: a(["font-extrabold uppercase tracking-widest text-xs", r(w)(e.value.status)])
-          }, d(e.value.status), 3)) : n("", !0)
-        ], 2)
+        ])
       ], 2),
-      s("div", {
-        class: a(t.compact ? "p-5 sm:p-6" : "p-8 sm:p-10")
+      a("div", {
+        class: n(l.compact ? "p-5" : "px-7 py-4.5")
       }, [
-        s("div", {
-          class: a(["grid grid-cols-1 md:grid-cols-2", t.compact ? "gap-6 mb-6" : "gap-10 mb-10"])
-        }, [
-          e.value.companyInfo ? (o(), c("div", C, [
-            s("p", {
-              class: a(["font-bold text-primary uppercase tracking-widest", t.compact ? "text-[10px] mb-1.5" : "text-xs mb-3"])
-            }, " From ", 2),
-            s("div", {
-              class: a(["text-muted-foreground leading-relaxed", t.compact ? "text-xs" : "text-sm"])
+        a("div", F, [
+          e.value.companyInfo ? (o(), s("div", O, [
+            a("p", {
+              class: n(["font-bold text-gray-700 uppercase tracking-widest border-b border-gray-300 pb-1 inline-block mb-2", l.compact ? "text-[10px]" : "text-[11px]"])
+            }, t(d.value.from || "From"), 3),
+            a("div", {
+              class: n(["text-muted-foreground leading-relaxed", l.compact ? "text-xs space-y-0.5" : "text-sm space-y-1"])
             }, [
-              e.value.companyInfo.name ? (o(), c("p", {
+              e.value.companyInfo.name ? (o(), s("p", {
                 key: 0,
-                class: a(["font-bold text-foreground", t.compact ? "text-sm mb-0.5" : "text-base mb-1"])
-              }, d(e.value.companyInfo.name), 3)) : n("", !0),
-              e.value.companyInfo.address ? (o(), c("p", L, d(e.value.companyInfo.address), 1)) : n("", !0),
-              e.value.companyInfo.city ? (o(), c("p", S, d(e.value.companyInfo.city) + ", " + d(e.value.companyInfo.state) + " " + d(e.value.companyInfo.zip), 1)) : n("", !0),
-              e.value.companyInfo.email ? (o(), c("p", V, d(e.value.companyInfo.email), 1)) : n("", !0)
+                class: n(["font-extrabold text-foreground", l.compact ? "text-sm mb-0.5" : "text-base mb-1"])
+              }, t(e.value.companyInfo.name), 3)) : c("", !0),
+              e.value.companyInfo.address ? (o(), s("p", P, t(e.value.companyInfo.address), 1)) : c("", !0),
+              e.value.companyInfo.city || e.value.companyInfo.state ? (o(), s("p", K, [
+                m(t(e.value.companyInfo.city), 1),
+                e.value.companyInfo.city && e.value.companyInfo.state ? (o(), s(f, { key: 0 }, [
+                  m(", ")
+                ], 64)) : c("", !0),
+                m(t(e.value.companyInfo.state) + " " + t(e.value.companyInfo.zip), 1)
+              ])) : c("", !0),
+              e.value.companyInfo.country ? (o(), s("p", Q, t(e.value.companyInfo.country), 1)) : c("", !0),
+              a("div", U, [
+                e.value.companyInfo.email ? (o(), s("p", A, t(e.value.companyInfo.email), 1)) : c("", !0),
+                e.value.companyInfo.phone ? (o(), s("p", G, t(e.value.companyInfo.phone), 1)) : c("", !0),
+                e.value.companyInfo.website ? (o(), s("p", H, t(e.value.companyInfo.website), 1)) : c("", !0)
+              ]),
+              e.value.companyInfo.taxId ? (o(), s("p", J, t(d.value.taxId || "Tax ID") + ": " + t(e.value.companyInfo.taxId), 1)) : c("", !0)
             ], 2)
-          ])) : n("", !0),
-          e.value.customerInfo ? (o(), c("div", B, [
-            s("p", {
-              class: a(["font-bold text-primary uppercase tracking-widest", t.compact ? "text-[10px] mb-1.5" : "text-xs mb-3"])
-            }, " Billed To ", 2),
-            s("div", {
-              class: a(["text-muted-foreground leading-relaxed", t.compact ? "text-xs" : "text-sm"])
+          ])) : c("", !0),
+          e.value.customerInfo ? (o(), s("div", M, [
+            a("p", {
+              class: n(["font-bold text-gray-700 uppercase tracking-widest border-b border-gray-300 pb-1 inline-block mb-2", l.compact ? "text-[10px]" : "text-[11px]"])
+            }, t(d.value.billedTo || "Billed To"), 3),
+            a("div", {
+              class: n(["text-muted-foreground leading-relaxed", l.compact ? "text-xs space-y-0.5" : "text-sm space-y-1"])
             }, [
-              e.value.customerInfo.name ? (o(), c("p", {
+              e.value.customerInfo.name ? (o(), s("p", {
                 key: 0,
-                class: a(["font-bold text-foreground", t.compact ? "text-sm mb-0.5" : "text-base mb-1"])
-              }, d(e.value.customerInfo.name), 3)) : n("", !0),
-              e.value.customerInfo.address ? (o(), c("p", E, d(e.value.customerInfo.address), 1)) : n("", !0),
-              e.value.customerInfo.city ? (o(), c("p", G, d(e.value.customerInfo.city) + ", " + d(e.value.customerInfo.state) + " " + d(e.value.customerInfo.zip), 1)) : n("", !0),
-              e.value.customerInfo.email ? (o(), c("p", $, d(e.value.customerInfo.email), 1)) : n("", !0)
+                class: n(["font-extrabold text-foreground", l.compact ? "text-sm mb-0.5" : "text-base mb-1"])
+              }, t(e.value.customerInfo.name), 3)) : c("", !0),
+              e.value.customerInfo.address ? (o(), s("p", R, t(e.value.customerInfo.address), 1)) : c("", !0),
+              e.value.customerInfo.city || e.value.customerInfo.state ? (o(), s("p", W, [
+                m(t(e.value.customerInfo.city), 1),
+                e.value.customerInfo.city && e.value.customerInfo.state ? (o(), s(f, { key: 0 }, [
+                  m(", ")
+                ], 64)) : c("", !0),
+                m(t(e.value.customerInfo.state) + " " + t(e.value.customerInfo.zip), 1)
+              ])) : c("", !0),
+              e.value.customerInfo.country ? (o(), s("p", X, t(e.value.customerInfo.country), 1)) : c("", !0),
+              a("div", Y, [
+                e.value.customerInfo.email ? (o(), s("p", Z, t(e.value.customerInfo.email), 1)) : c("", !0),
+                e.value.customerInfo.phone ? (o(), s("p", ee, t(e.value.customerInfo.phone), 1)) : c("", !0)
+              ]),
+              e.value.customerInfo.taxId ? (o(), s("p", te, t(d.value.taxId || "Tax ID") + ": " + t(e.value.customerInfo.taxId), 1)) : c("", !0)
             ], 2)
-          ])) : n("", !0)
-        ], 2),
-        s("div", {
-          class: a(t.compact ? "mb-5" : "mb-8")
+          ])) : c("", !0)
+        ]),
+        a("div", {
+          class: n(["border border-border rounded-lg overflow-x-auto", l.compact ? "mb-5" : "mb-6"])
         }, [
-          s("table", {
-            class: a(["w-full text-left whitespace-nowrap", t.compact ? "text-xs" : ""])
+          a("table", {
+            class: n(["invoice-table", l.compact ? "text-xs" : "text-sm"])
           }, [
-            s("thead", null, [
-              s("tr", F, [
-                s("th", {
-                  scope: "col",
-                  class: a(["font-bold text-muted-foreground uppercase tracking-widest", t.compact ? "py-2 text-xs" : "py-4 text-xs"])
-                }, " Product ", 2),
-                s("th", {
-                  scope: "col",
-                  class: a(["font-bold text-muted-foreground uppercase tracking-widest text-right", t.compact ? "py-2 text-xs" : "py-4 text-xs"])
-                }, " Qty ", 2),
-                p.value ? (o(), c("th", {
-                  key: 0,
-                  scope: "col",
-                  class: a(["font-bold text-muted-foreground uppercase tracking-widest text-right", t.compact ? "py-2 text-xs" : "py-4 text-xs"])
-                }, " Size ", 2)) : n("", !0),
-                s("th", {
-                  scope: "col",
-                  class: a(["font-bold text-muted-foreground uppercase tracking-widest text-right", t.compact ? "py-2 text-xs" : "py-4 text-xs"])
-                }, " Price ", 2),
-                b.value ? (o(), c("th", {
-                  key: 1,
-                  scope: "col",
-                  class: a(["font-bold text-muted-foreground uppercase tracking-widest text-right", t.compact ? "py-2 text-xs" : "py-4 text-xs"])
-                }, " Discount ", 2)) : n("", !0),
-                s("th", {
-                  scope: "col",
-                  class: a(["font-bold text-muted-foreground uppercase tracking-widest text-right", t.compact ? "py-2 text-xs" : "py-4 text-xs"])
-                }, " Total ", 2)
+            a("thead", {
+              class: n(["invoice-thead uppercase", l.compact ? "text-[9px]" : "text-[10px]"])
+            }, [
+              a("tr", null, [
+                a("th", oe, t(d.value.item || "Product"), 1),
+                a("th", ae, t(d.value.qty || "Qty"), 1),
+                b.value ? (o(), s("th", se, t(d.value.size || "Size"), 1)) : c("", !0),
+                a("th", ce, t(d.value.price || "Price"), 1),
+                y.value ? (o(), s("th", le, t(d.value.discount || "Discount"), 1)) : c("", !0),
+                a("th", ne, t(d.value.total || "Total"), 1)
               ])
-            ]),
-            s("tbody", O, [
-              (o(!0), c(v, null, y(e.value.items, (l, x) => (o(), c("tr", {
-                key: l.id || x,
-                class: "group hover:bg-muted/10"
+            ], 2),
+            a("tbody", ie, [
+              (o(!0), s(f, null, z(e.value.items, (i, _) => (o(), s("tr", {
+                key: i.id || _,
+                class: "invoice-tr group"
               }, [
-                s("td", {
-                  class: a(["font-medium text-foreground pr-4", t.compact ? "py-3" : "py-4"])
-                }, [
-                  s("div", P, [
-                    l.thumbnail ? (o(), c("div", {
+                a("td", de, [
+                  a("div", re, [
+                    i.thumbnail ? (o(), s("div", {
                       key: 0,
-                      class: a(["shrink-0 rounded-xl bg-muted overflow-hidden border border-border shadow-sm", t.compact ? "w-9 h-9" : "w-11 h-11"])
+                      class: n(["shrink-0 overflow-hidden border border-border", l.compact ? "w-9 h-9 rounded-md" : "w-10 h-10 rounded-lg"])
                     }, [
-                      s("img", {
-                        src: l.thumbnail,
-                        alt: l.name,
-                        class: "w-full h-full object-cover"
-                      }, null, 8, q)
-                    ], 2)) : n("", !0),
-                    s("div", K, [
-                      s("span", {
-                        class: a(["block font-medium truncate", t.compact ? "text-sm" : "text-base"]),
-                        title: l.name
-                      }, d(l.name), 11, Q),
-                      l.sku ? (o(), c("div", {
+                      r(k, {
+                        src: i.thumbnail,
+                        alt: i.name,
+                        class: "w-full h-full",
+                        rounded: "sm"
+                      }, null, 8, ["src", "alt"])
+                    ], 2)) : c("", !0),
+                    a("div", ue, [
+                      a("span", {
+                        class: "block truncate font-semibold text-foreground text-sm",
+                        title: i.name
+                      }, t(i.name), 9, me),
+                      i.sku ? (o(), s("div", {
                         key: 0,
-                        class: "text-[9px] uppercase tracking-widest text-muted-foreground font-normal truncate mt-0.5",
-                        title: l.sku
-                      }, " SKU: " + d(l.sku), 9, U)) : n("", !0),
-                      l.description && !t.compact ? (o(), c("span", A, d(l.description), 1)) : n("", !0)
+                        class: "text-xs uppercase tracking-widest text-muted-foreground font-medium truncate mt-0.5",
+                        title: i.sku
+                      }, t(d.value.sku || "SKU") + ": " + t(i.sku), 9, ve)) : c("", !0),
+                      i.description && !l.compact ? (o(), s("span", xe, t(i.description), 1)) : c("", !0)
                     ])
                   ])
-                ], 2),
-                s("td", {
-                  class: a(["text-right tabular-nums text-muted-foreground font-medium", t.compact ? "py-3" : "py-4"])
-                }, d(l.quantity), 3),
-                p.value ? (o(), c("td", {
-                  key: 0,
-                  class: a(["text-right tabular-nums text-muted-foreground", t.compact ? "py-3" : "py-4"])
-                }, d(l.size || "-"), 3)) : n("", !0),
-                s("td", {
-                  class: a(["text-right tabular-nums text-muted-foreground", t.compact ? "py-3" : "py-4"])
-                }, [
-                  u(r(i), {
-                    value: l.price
+                ]),
+                a("td", fe, t(i.quantity), 1),
+                b.value ? (o(), s("td", pe, t(i.size || "-"), 1)) : c("", !0),
+                a("td", he, [
+                  r(u(p), {
+                    value: i.price,
+                    class: "text-sm"
                   }, null, 8, ["value"])
-                ], 2),
-                b.value ? (o(), c("td", {
-                  key: 1,
-                  class: a(["text-right tabular-nums text-success font-semibold", t.compact ? "py-3 text-xs" : "py-4 text-sm"])
-                }, [
-                  l.discount !== void 0 ? (o(), c("div", H, [
-                    u(r(i), {
-                      value: -l.discount
+                ]),
+                y.value ? (o(), s("td", be, [
+                  i.discount !== void 0 ? (o(), s("div", ye, [
+                    r(u(p), {
+                      value: -i.discount,
+                      class: "text-sm"
                     }, null, 8, ["value"]),
-                    l.discountLabel ? (o(), c("span", J, d(l.discountLabel), 1)) : n("", !0)
-                  ])) : (o(), c("span", M, "-"))
-                ], 2)) : n("", !0),
-                s("td", {
-                  class: a(["text-right tabular-nums font-bold text-foreground", t.compact ? "py-3 text-sm" : "py-4 text-sm"])
-                }, [
-                  u(r(i), {
-                    value: l.total
+                    i.discountLabel ? (o(), s("span", ge, t(i.discountLabel), 1)) : c("", !0)
+                  ])) : (o(), s("span", ke, "-"))
+                ])) : c("", !0),
+                a("td", _e, [
+                  r(u(p), {
+                    value: i.total,
+                    class: "text-sm"
                   }, null, 8, ["value"])
-                ], 2)
+                ])
               ]))), 128))
             ])
           ], 2)
         ], 2),
-        s("div", {
-          class: a(["flex flex-col-reverse md:flex-row justify-between items-end", t.compact ? "gap-6" : "gap-10"])
+        a("div", {
+          class: n(["flex flex-col-reverse md:flex-row justify-between items-start", l.compact ? "gap-5" : "gap-6"])
         }, [
-          s("div", {
-            class: a(["w-full md:w-1/2", t.compact ? "space-y-3" : "space-y-4"])
+          a("div", {
+            class: n(["w-full md:w-1/2 flex flex-col", l.compact ? "gap-3" : "gap-4"])
           }, [
-            e.value.barcode ? (o(), c("div", {
-              key: 0,
-              class: a(["inline-block border border-border/50 rounded-xl bg-muted/10", t.compact ? "p-2" : "p-4"])
-            }, [
-              u(r(I), {
-                value: e.value.barcode,
-                format: "CODE128",
-                height: t.compact ? 28 : 40,
-                width: t.compact ? 1.4 : 1.8
-              }, null, 8, ["value", "height", "width"])
-            ], 2)) : n("", !0),
-            e.value.notes ? (o(), c("p", {
-              key: 1,
-              class: a(["text-muted-foreground italic leading-relaxed max-w-sm", t.compact ? "text-xs" : "text-sm"])
-            }, ' "' + d(e.value.notes) + '" ', 3)) : n("", !0)
+            a("div", Ie, [
+              e.value.qrcode ? (o(), s("div", we, [
+                r(u(N), {
+                  value: e.value.qrcode,
+                  size: l.compact ? 56 : 72
+                }, null, 8, ["value", "size"])
+              ])) : c("", !0),
+              e.value.barcode ? (o(), s("div", De, [
+                r(u(T), {
+                  value: e.value.barcode,
+                  format: "CODE128",
+                  height: l.compact ? 28 : 40,
+                  width: l.compact ? 1.3 : 1.5,
+                  "display-value": l.displayBarcodeValue
+                }, null, 8, ["value", "height", "width", "display-value"])
+              ])) : c("", !0)
+            ]),
+            e.value.notes ? (o(), s("div", ze, [
+              a("h4", {
+                class: n(["font-bold text-muted-foreground uppercase tracking-widest mb-1.5", l.compact ? "text-[9px]" : "text-[10px]"])
+              }, t(d.value.notes || "Notes & Terms"), 3),
+              a("div", {
+                class: n(["text-muted-foreground leading-relaxed whitespace-pre-wrap p-3 bg-muted/30 rounded-lg border border-border", l.compact ? "text-xs max-w-xs" : "text-xs max-w-sm"])
+              }, t(e.value.notes), 3)
+            ])) : c("", !0)
           ], 2),
-          s("div", {
-            class: a(["w-full md:w-1/3", t.compact ? "min-w-[200px]" : "min-w-[240px]"])
-          }, [
-            s("div", {
-              class: a(t.compact ? "space-y-2" : "space-y-3")
-            }, [
-              (o(!0), c(v, null, y(e.value.totals, (l, x) => (o(), c("div", {
-                key: x,
-                class: a(["flex justify-between items-center", [
-                  l.isGrandTotal ? t.compact ? "pt-2 border-t-2 border-primary/20 text-lg font-black text-primary" : "pt-4 border-t-2 border-primary/20 text-xl font-black text-primary" : t.compact ? "text-xs font-semibold text-muted-foreground" : "text-sm font-semibold text-muted-foreground"
-                ]])
-              }, [
-                s("span", {
-                  class: a({
-                    "uppercase tracking-widest text-xs": l.isGrandTotal && !t.compact,
-                    "uppercase tracking-wide text-xs": l.isGrandTotal && t.compact
-                  })
-                }, d(l.label), 3),
-                u(r(i), {
-                  value: l.value
-                }, null, 8, ["value"])
-              ], 2))), 128))
-            ], 2)
-          ], 2)
+          a("div", Te, [
+            r(B, {
+              totals: e.value.totals,
+              compact: l.compact,
+              variant: "Variant4"
+            }, null, 8, ["totals", "compact"])
+          ])
         ], 2)
       ], 2),
-      s("div", {
-        class: a(["bg-primary/5 border-t border-primary/10 flex justify-center font-semibold text-primary uppercase tracking-widest", t.compact ? "py-2 px-5 sm:px-6 text-[10px]" : "py-3 px-8 text-xs"])
+      a("div", {
+        class: n(["bg-gray-900 text-white flex justify-center font-bold uppercase tracking-widest", l.compact ? "py-2 px-4 text-[9px]" : "py-2.5 px-6 text-[10px]"])
       }, [
-        e.value.footerText ? (o(), c("span", R, d(e.value.footerText), 1)) : (o(), c("span", W, "Thank you for your business"))
+        e.value.footerText ? (o(), s("span", Ne, t(e.value.footerText), 1)) : (o(), s("span", Ve, "Thank you for your business"))
       ], 2)
-    ]));
+    ], 4));
   }
 });
 export {
-  at as default
+  Oe as default
 };

package/components/Invoice/index.d.ts

@@ -1,2 +1,3 @@
 export { default as Invoice } from './Invoice.vue';
+export { default as InvoiceTotals } from './InvoiceTotals.vue';
 export * from './types';

package/components/Invoice/types.d.ts

@@ -82,6 +82,24 @@ export interface InvoiceData {
     /** Footer text, usually for terms and conditions */
     footerText?: string;
 }
+export interface InvoiceLabels {
+    invoice?: string;
+    invoiceNumber?: string;
+    issued?: string;
+    due?: string;
+    from?: string;
+    billedTo?: string;
+    status?: string;
+    item?: string;
+    price?: string;
+    qty?: string;
+    size?: string;
+    discount?: string;
+    total?: string;
+    notes?: string;
+    sku?: string;
+    taxId?: string;
+}
 export interface InvoiceProps {
     data: InvoiceData;
     variant?: InvoiceVariant;
@@ -90,4 +108,12 @@ export interface InvoiceProps {
      * for a more compact, print-friendly layout that uses less paper.
      */
     compact?: boolean;
+    /**
+     * Whether to display the text value underneath the barcode
+     */
+    displayBarcodeValue?: boolean;
+    /**
+     * Custom text labels for static UI strings (e.g. overriding "Invoice", "Issued")
+     */
+    labels?: InvoiceLabels;
 }