vlite3 1.1.1 → 1.1.2

package/components/Invoice/InvoiceVariant4.vue.js

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

package/components/Invoice/types.d.ts

@@ -90,4 +90,8 @@ 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;
 }

package/components/List/List.vue.d.ts

@@ -1,15 +1,7 @@
 import { ListProps } from './types';
 declare function __VLS_template(): any;
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<ListProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ListProps> & Readonly<{}>, {
-    class: string;
-    variant: import('./types').ListVariant;
-    loading: boolean;
-    columns: import('./types').ListColumns;
-    showColon: boolean;
-    stackedBorderStyle: import('./types').StackedBorderStyle;
-    skeletonRows: number;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import('vue').DefineComponent<ListProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ListProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {