vlite3 1.1.1 → 1.1.4

package/components/Invoice/InvoiceVariant1.vue.js

@@ -1,314 +1,347 @@
-import { defineComponent as z, computed as y, openBlock as t, createElementBlock as o, normalizeStyle as g, createElementVNode as a, normalizeClass as l, createCommentVNode as c, toDisplayString as u, createTextVNode as i, Fragment as x, unref as d, createVNode as m, renderList as k } from "vue";
-import v from "../Price/Price.vue.js";
-import I from "../DateTime/DateTime.vue.js";
-import { getStatusColorClass as D } from "../../utils/status.js";
+import { defineComponent as _, computed as p, openBlock as o, createElementBlock as a, normalizeStyle as w, createElementVNode as s, normalizeClass as n, createVNode as r, toDisplayString as t, createCommentVNode as c, unref as d, createBlock as z, createTextVNode as m, Fragment as x, renderList as D } from "vue";
+import f from "../Price/Price.vue.js";
+import b from "../DateTime/DateTime.vue.js";
 import N from "../Barcode/Barcode.vue.js";
 import T from "../QRCode/QRCode.vue.js";
-const j = ["src", "alt"], C = {
+import k from "../Avatar.vue.js";
+import B from "../StatusChip/StatusChip.vue.js";
+import V from "./InvoiceTotals.vue.js";
+const $ = { class: "flex items-center justify-between gap-3" }, q = { class: "shrink-0" }, S = {
+  key: 0,
+  class: "flex items-center gap-3 border-r-[1.5px] pr-3 border-gray-300"
+}, C = { class: "text-muted-foreground uppercase tracking-wider font-medium" }, L = {
   key: 1,
-  class: "mt-1 text-muted-foreground space-y-0.5 text-sm"
-}, S = { key: 0 }, L = { key: 1 }, V = { key: 2 }, B = { key: 3 }, $ = { key: 4 }, q = { key: 5 }, E = {
+  class: "flex items-center gap-3 border-r-[1.5px] pr-3 border-gray-250"
+}, j = { class: "text-muted-foreground uppercase tracking-wider font-medium" }, E = { class: "grid grid-cols-2 gap-8" }, F = { key: 0 }, U = { key: 0 }, K = { key: 1 }, O = { key: 2 }, P = {
+  key: 3,
+  class: "pt-0.5"
+}, Q = { key: 4 }, A = {
+  key: 5,
+  class: "pt-0.5"
+}, G = { key: 1 }, H = { key: 0 }, J = { key: 1 }, M = { key: 2 }, R = {
+  key: 3,
+  class: "pt-0.5"
+}, W = { key: 4 }, X = {
+  key: 5,
+  class: "pt-0.5"
+}, Y = {
   key: 1,
-  class: "flex md:justify-end items-center gap-2 text-sm"
-}, P = {
-  key: 2,
-  class: "flex md:justify-end items-center gap-2 text-sm"
-}, _ = { class: "font-semibold text-lg" }, F = { class: "text-muted-foreground space-y-0.5 text-sm" }, G = { key: 0 }, K = { key: 1 }, O = { key: 2 }, Q = { key: 3 }, U = { key: 4 }, A = { key: 5 }, H = { class: "bg-muted text-muted-foreground uppercase font-semibold text-xs" }, J = { class: "divide-y divide-border" }, M = { class: "flex items-start gap-3" }, R = ["src", "alt"], W = { class: "space-y-0.5 min-w-0 flex-1" }, X = ["title"], Y = ["title"], Z = {
+  class: "border-b border-border overflow-x-auto"
+}, Z = { class: "invoice-thead" }, ee = {
+  scope: "col",
+  class: "invoice-th"
+}, te = {
+  scope: "col",
+  class: "invoice-th invoice-text-right"
+}, oe = {
+  key: 0,
+  scope: "col",
+  class: "invoice-th invoice-text-right"
+}, ae = {
+  scope: "col",
+  class: "invoice-th invoice-text-right"
+}, se = {
   key: 1,
-  class: "text-xs text-muted-foreground line-clamp-1 max-w-[280px]"
-}, ee = {
+  scope: "col",
+  class: "invoice-th invoice-text-right"
+}, ce = {
+  scope: "col",
+  class: "invoice-th invoice-text-right"
+}, le = { class: "invoice-tbody" }, ne = { class: "invoice-td" }, ue = { class: "flex items-start gap-3" }, ie = { class: "min-w-0 flex-1" }, re = ["title"], de = {
   key: 0,
-  class: "flex flex-col items-end"
-}, te = {
+  class: "text-muted-foreground uppercase tracking-wider font-medium mt-0.5 text-xs"
+}, me = {
+  key: 1,
+  class: "text-muted-foreground mt-0.5 whitespace-normal max-w-xs text-xs leading-snug"
+}, ve = { class: "invoice-td invoice-text-right tabular-nums font-medium text-sm" }, pe = {
   key: 0,
-  class: "text-xs uppercase font-bold"
-}, oe = { key: 1 }, ae = {
+  class: "invoice-td invoice-text-right tabular-nums text-muted-foreground"
+}, xe = { class: "invoice-td invoice-text-right tabular-nums" }, fe = {
+  key: 1,
+  class: "invoice-td invoice-text-right tabular-nums text-success font-semibold"
+}, he = {
   key: 0,
-  class: "space-y-1"
-}, se = { class: "flex gap-4 items-end" }, ce = {
+  class: "flex flex-col items-end gap-0.5"
+}, ye = {
+  key: 1,
+  class: "text-muted-foreground font-normal"
+}, ge = { class: "invoice-td invoice-text-right tabular-nums font-bold text-foreground" }, be = { key: 0 }, ke = {
+  key: 1,
+  class: "flex flex-row flex-wrap gap-3 items-center"
+}, Ie = {
   key: 0,
-  class: "flex flex-col items-center gap-2"
-}, le = {
+  class: "shrink-0"
+}, _e = {
   key: 1,
-  class: "flex flex-col items-start gap-2"
-}, ue = { class: "w-full md:w-1/3 min-w-[220px]" }, xe = /* @__PURE__ */ z({
+  class: "shrink-0"
+}, we = { class: "w-full lg:w-2/5 min-w-[220px]" }, Ce = /* @__PURE__ */ _({
   __name: "InvoiceVariant1",
   props: {
     data: {},
-    compact: { type: Boolean, default: !1 }
+    compact: { type: Boolean, default: !1 },
+    displayBarcodeValue: { type: Boolean, default: !1 },
+    labels: {}
   },
-  setup(s) {
-    const w = s, e = y(() => w.data), b = y(() => e.value.items.some((p) => !!p.size)), h = y(() => e.value.items.some((p) => p.discount !== void 0));
-    return (p, r) => (t(), o("div", {
-      class: "v-invoice-v1 bg-background text-foreground rounded-xl border border-border overflow-hidden shadow-sm",
-      style: g({
-        "--text-sm": s.compact ? "13px" : "14px"
+  setup(l) {
+    const h = l, e = p(() => h.data), i = p(() => h.labels || {}), y = p(() => e.value.items.some((v) => !!v.size)), g = p(() => e.value.items.some((v) => v.discount !== void 0));
+    return (v, ze) => (o(), a("div", {
+      class: "v-invoice-v1 bg-background text-foreground border border-border rounded-sm",
+      style: w({
+        "--text-sm": l.compact ? "12.5px" : "13.5px",
+        "--invoice-cell-px": l.compact ? "0.875rem" : "1.25rem",
+        "--invoice-cell-py": l.compact ? "0.625rem" : "0.875rem",
+        "--invoice-thead-bg": "var(--color-muted)",
+        "--invoice-tr-border": "1px solid var(--color-border)",
+        "--invoice-tr-hover-bg": "color-mix(in oklab, var(--color-muted) 40%, transparent)"
       })
     }, [
-      a("div", {
-        class: l(["flex flex-col md:flex-row justify-between items-start border-b border-border bg-muted/20", s.compact ? "gap-4 p-6" : "gap-6 p-6 sm:p-8"])
+      s("div", {
+        class: n(["border-b border-border", l.compact ? "px-5 py-3" : "px-6 pt-5 pb-3.5"])
       }, [
-        a("div", {
-          class: l(s.compact ? "space-y-3" : "space-y-4")
-        }, [
-          e.value.brandLogo ? (t(), o("div", {
-            key: 0,
-            class: l(s.compact ? "h-10" : "h-12")
-          }, [
-            a("img", {
-              src: e.value.brandLogo,
-              alt: e.value.brandName,
-              class: "h-full object-contain"
-            }, null, 8, j)
-          ], 2)) : c("", !0),
-          a("div", null, [
-            e.value.brandName ? (t(), o("h2", {
-              key: 0,
-              class: l(s.compact ? "text-lg font-bold" : "text-xl font-bold")
-            }, u(e.value.brandName), 3)) : c("", !0),
-            e.value.companyInfo ? (t(), o("div", C, [
-              e.value.companyInfo.address ? (t(), o("p", S, u(e.value.companyInfo.address), 1)) : c("", !0),
-              e.value.companyInfo.city || e.value.companyInfo.state || e.value.companyInfo.zip ? (t(), o("p", L, [
-                i(u(e.value.companyInfo.city), 1),
-                e.value.companyInfo.city && e.value.companyInfo.state ? (t(), o(x, { key: 0 }, [
-                  i(", ")
-                ], 64)) : c("", !0),
-                i(u(e.value.companyInfo.state) + " " + u(e.value.companyInfo.zip), 1)
-              ])) : c("", !0),
-              e.value.companyInfo.country ? (t(), o("p", V, u(e.value.companyInfo.country), 1)) : c("", !0),
-              e.value.companyInfo.email ? (t(), o("p", B, u(e.value.companyInfo.email), 1)) : c("", !0),
-              e.value.companyInfo.phone ? (t(), o("p", $, u(e.value.companyInfo.phone), 1)) : c("", !0),
-              e.value.companyInfo.taxId ? (t(), o("p", q, "Tax ID: " + u(e.value.companyInfo.taxId), 1)) : c("", !0)
-            ])) : c("", !0)
-          ])
-        ], 2),
-        a("div", {
-          class: l(["text-left md:text-right shrink-0", s.compact ? "space-y-3" : "space-y-4"])
-        }, [
-          a("div", null, [
-            a("h1", {
-              class: l(["font-bold tracking-tight text-primary uppercase", s.compact ? "text-2xl" : "text-3xl"])
-            }, u(e.value.brandTitle || "Invoice"), 3),
-            a("p", {
-              class: l(["font-medium mt-1 text-muted-foreground", s.compact ? "text-base" : "text-lg"])
-            }, " #" + u(e.value.invoiceNumber), 3)
+        s("div", $, [
+          s("div", q, [
+            s("div", {
+              class: n(l.compact ? "h-10 w-10" : "h-13 w-13")
+            }, [
+              r(k, {
+                src: e.value.brandLogo,
+                alt: e.value.brandName,
+                class: "h-full w-auto object-contain",
+                rounded: "md"
+              }, null, 8, ["src", "alt"])
+            ], 2)
           ]),
-          a("div", {
-            class: l((s.compact, "space-y-1"))
+          s("div", {
+            class: n(["flex-1 min-w-0", l.compact ? "space-y-0.5" : "space-y-1"])
           }, [
-            e.value.status ? (t(), o("div", {
+            e.value.brandName ? (o(), a("p", {
               key: 0,
-              class: l(["text-xs font-bold uppercase tracking-widest mb-1", d(D)(e.value.status)])
-            }, u(e.value.status), 3)) : c("", !0),
-            e.value.issuedDate ? (t(), o("div", E, [
-              r[0] || (r[0] = a("span", { class: "text-muted-foreground font-medium w-24 md:w-auto" }, "Issued:", -1)),
-              m(d(I), {
-                value: e.value.issuedDate,
-                type: "date",
-                class: "font-medium"
-              }, null, 8, ["value"])
-            ])) : c("", !0),
-            e.value.dueDate ? (t(), o("div", P, [
-              r[1] || (r[1] = a("span", { class: "text-muted-foreground font-medium w-24 md:w-auto" }, "Due:", -1)),
-              m(d(I), {
-                value: e.value.dueDate,
-                type: "date",
-                class: "font-medium"
-              }, null, 8, ["value"])
-            ])) : c("", !0)
+              class: n(["font-bold text-foreground leading-tight truncate", l.compact ? "text-base" : "text-lg"])
+            }, t(e.value.brandName), 3)) : c("", !0),
+            e.value.brandTitle ? (o(), a("p", {
+              key: 1,
+              class: n(["text-muted-foreground font-medium truncate", l.compact ? "text-xs" : "text-sm"])
+            }, t(e.value.brandTitle), 3)) : c("", !0)
+          ], 2),
+          s("div", {
+            class: n(["text-right shrink-0", l.compact ? "space-y-2" : "space-y-3"])
+          }, [
+            s("div", null, [
+              s("h1", {
+                class: n(["font-black tracking-tight text-foreground uppercase", l.compact ? "text-2xl" : "text-3xl"])
+              }, t(i.value.invoice || "Invoice"), 3),
+              s("p", {
+                class: n(["text-muted-foreground font-medium mt-0.5", l.compact ? "text-xs" : "text-sm"])
+              }, " #" + t(e.value.invoiceNumber), 3)
+            ])
           ], 2)
+        ]),
+        s("div", {
+          class: n(["flex items-center gap-4 text-xs", l.compact ? "mt-2" : "mt-4"])
+        }, [
+          e.value.issuedDate ? (o(), a("div", S, [
+            s("span", C, t(i.value.issued || "Issued"), 1),
+            r(d(b), {
+              value: e.value.issuedDate,
+              type: "date",
+              class: "font-semibold text-foreground tabular-nums"
+            }, null, 8, ["value"])
+          ])) : c("", !0),
+          e.value.dueDate ? (o(), a("div", L, [
+            s("span", j, t(i.value.due || "Due"), 1),
+            r(d(b), {
+              value: e.value.dueDate,
+              type: "date",
+              class: "font-semibold text-foreground tabular-nums"
+            }, null, 8, ["value"])
+          ])) : c("", !0),
+          e.value.status ? (o(), z(B, {
+            key: 2,
+            status: e.value.status,
+            "hide-icon": "",
+            size: "small"
+          }, null, 8, ["status"])) : c("", !0)
         ], 2)
       ], 2),
-      a("div", {
-        class: l(s.compact ? "p-6 space-y-6" : "p-6 sm:p-8 space-y-8")
+      e.value.companyInfo || e.value.customerInfo ? (o(), a("div", {
+        key: 0,
+        class: n(["border-b border-border", l.compact ? "px-5 py-4" : "px-6 pt-4 pb-5"])
       }, [
-        e.value.customerInfo ? (t(), o("div", {
-          key: 0,
-          class: l(s.compact ? "space-y-1" : "space-y-2")
-        }, [
-          r[2] || (r[2] = a("h3", { class: "text-sm font-semibold text-muted-foreground uppercase tracking-wider" }, " Billed To ", -1)),
-          a("p", _, u(e.value.customerInfo.name), 1),
-          a("div", F, [
-            e.value.customerInfo.address ? (t(), o("p", G, u(e.value.customerInfo.address), 1)) : c("", !0),
-            e.value.customerInfo.city || e.value.customerInfo.state ? (t(), o("p", K, [
-              i(u(e.value.customerInfo.city), 1),
-              e.value.customerInfo.city && e.value.customerInfo.state ? (t(), o(x, { key: 0 }, [
-                i(", ")
-              ], 64)) : c("", !0),
-              i(u(e.value.customerInfo.state) + " " + u(e.value.customerInfo.zip), 1)
-            ])) : c("", !0),
-            e.value.customerInfo.country ? (t(), o("p", O, u(e.value.customerInfo.country), 1)) : c("", !0),
-            e.value.customerInfo.email ? (t(), o("p", Q, u(e.value.customerInfo.email), 1)) : c("", !0),
-            e.value.customerInfo.phone ? (t(), o("p", U, u(e.value.customerInfo.phone), 1)) : c("", !0),
-            e.value.customerInfo.taxId ? (t(), o("p", A, "Tax ID: " + u(e.value.customerInfo.taxId), 1)) : c("", !0)
-          ])
-        ], 2)) : c("", !0),
-        e.value.items && e.value.items.length ? (t(), o("div", {
-          key: 1,
-          class: "overflow-x-auto rounded-lg border border-border",
-          style: g({
-            "--text-sm": s.compact ? "13px" : "14px"
-          })
+        s("div", E, [
+          e.value.companyInfo ? (o(), a("div", F, [
+            s("p", {
+              class: n(["text-muted-foreground uppercase tracking-widest font-semibold mb-2", l.compact ? "text-[9px]" : "text-[10px]"])
+            }, t(i.value.from || "From"), 3),
+            e.value.brandName ? (o(), a("p", {
+              key: 0,
+              class: n(["font-bold text-foreground", l.compact ? "text-sm" : "text-base"])
+            }, t(e.value.brandName), 3)) : c("", !0),
+            s("div", {
+              class: n(["text-muted-foreground leading-snug mt-1", l.compact ? "text-xs space-y-0.5" : "text-sm space-y-0.5"])
+            }, [
+              e.value.companyInfo.address ? (o(), a("p", U, t(e.value.companyInfo.address), 1)) : c("", !0),
+              e.value.companyInfo.city || e.value.companyInfo.state || e.value.companyInfo.zip ? (o(), a("p", K, [
+                m(t(e.value.companyInfo.city), 1),
+                e.value.companyInfo.city && e.value.companyInfo.state ? (o(), a(x, { 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(), a("p", O, t(e.value.companyInfo.country), 1)) : c("", !0),
+              e.value.companyInfo.email ? (o(), a("p", P, t(e.value.companyInfo.email), 1)) : c("", !0),
+              e.value.companyInfo.phone ? (o(), a("p", Q, t(e.value.companyInfo.phone), 1)) : c("", !0),
+              e.value.companyInfo.taxId ? (o(), a("p", A, t(i.value.taxId || "Tax ID") + ": " + t(e.value.companyInfo.taxId), 1)) : c("", !0)
+            ], 2)
+          ])) : c("", !0),
+          e.value.customerInfo ? (o(), a("div", G, [
+            s("p", {
+              class: n(["text-muted-foreground uppercase tracking-widest font-semibold mb-2", l.compact ? "text-[9px]" : "text-[10px]"])
+            }, t(i.value.billedTo || "Billed To"), 3),
+            s("p", {
+              class: n(["font-bold text-foreground", l.compact ? "text-sm" : "text-base"])
+            }, t(e.value.customerInfo.name), 3),
+            s("div", {
+              class: n(["text-muted-foreground leading-snug mt-1", l.compact ? "text-xs space-y-0.5" : "text-sm space-y-0.5"])
+            }, [
+              e.value.customerInfo.address ? (o(), a("p", H, t(e.value.customerInfo.address), 1)) : c("", !0),
+              e.value.customerInfo.city || e.value.customerInfo.state ? (o(), a("p", J, [
+                m(t(e.value.customerInfo.city), 1),
+                e.value.customerInfo.city && e.value.customerInfo.state ? (o(), a(x, { 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(), a("p", M, t(e.value.customerInfo.country), 1)) : c("", !0),
+              e.value.customerInfo.email ? (o(), a("p", R, t(e.value.customerInfo.email), 1)) : c("", !0),
+              e.value.customerInfo.phone ? (o(), a("p", W, t(e.value.customerInfo.phone), 1)) : c("", !0),
+              e.value.customerInfo.taxId ? (o(), a("p", X, t(i.value.taxId || "Tax ID") + ": " + t(e.value.customerInfo.taxId), 1)) : c("", !0)
+            ], 2)
+          ])) : c("", !0)
+        ])
+      ], 2)) : c("", !0),
+      e.value.items && e.value.items.length ? (o(), a("div", Y, [
+        s("table", {
+          class: n(["invoice-table", l.compact ? "text-xs" : "text-sm"])
         }, [
-          a("table", {
-            class: l(["w-full text-left whitespace-nowrap", s.compact ? "text-xs" : "text-sm"])
-          }, [
-            a("thead", H, [
-              a("tr", null, [
-                a("th", {
-                  scope: "col",
-                  class: l(s.compact ? "px-4 py-2" : "px-6 py-3")
-                }, "Product", 2),
-                a("th", {
-                  scope: "col",
-                  class: l(["text-right", s.compact ? "px-4 py-2" : "px-6 py-3"])
-                }, " Qty ", 2),
-                b.value ? (t(), o("th", {
-                  key: 0,
-                  scope: "col",
-                  class: l(["text-right", s.compact ? "px-4 py-2" : "px-6 py-3"])
-                }, " Size ", 2)) : c("", !0),
-                a("th", {
-                  scope: "col",
-                  class: l(["text-right", s.compact ? "px-4 py-2" : "px-6 py-3"])
-                }, " Price ", 2),
-                h.value ? (t(), o("th", {
-                  key: 1,
-                  scope: "col",
-                  class: l(["text-right", s.compact ? "px-4 py-2" : "px-6 py-3"])
-                }, " Discount ", 2)) : c("", !0),
-                a("th", {
-                  scope: "col",
-                  class: l(["text-right", s.compact ? "px-4 py-2" : "px-6 py-3"])
-                }, " Total ", 2)
-              ])
-            ]),
-            a("tbody", J, [
-              (t(!0), o(x, null, k(e.value.items, (n, f) => (t(), o("tr", {
-                key: n.id || f,
-                class: "hover:bg-muted/50 transition-colors"
-              }, [
-                a("td", {
-                  class: l(s.compact ? "px-4 py-2" : "px-5 py-3")
-                }, [
-                  a("div", M, [
-                    n.thumbnail ? (t(), o("div", {
-                      key: 0,
-                      class: l(["shrink-0 rounded-md bg-muted overflow-hidden border border-border/50", s.compact ? "w-8 h-8" : "w-10 h-10"])
-                    }, [
-                      a("img", {
-                        src: n.thumbnail,
-                        alt: n.name,
-                        class: "w-full h-full object-cover"
-                      }, null, 8, R)
-                    ], 2)) : c("", !0),
-                    a("div", W, [
-                      a("div", {
-                        class: "font-medium text-foreground truncate text-sm",
-                        title: n.name
-                      }, u(n.name), 9, X),
-                      n.sku ? (t(), o("div", {
-                        key: 0,
-                        class: "text-xs uppercase tracking-wider text-muted-foreground font-normal truncate",
-                        title: n.sku
-                      }, " SKU: " + u(n.sku), 9, Y)) : c("", !0),
-                      n.description && !s.compact ? (t(), o("div", Z, u(n.description), 1)) : c("", !0)
-                    ])
+          s("thead", Z, [
+            s("tr", null, [
+              s("th", ee, t(i.value.item || "Description"), 1),
+              s("th", te, t(i.value.qty || "Qty"), 1),
+              y.value ? (o(), a("th", oe, t(i.value.size || "Size"), 1)) : c("", !0),
+              s("th", ae, t(i.value.price || "Unit Price"), 1),
+              g.value ? (o(), a("th", se, t(i.value.discount || "Discount"), 1)) : c("", !0),
+              s("th", ce, t(i.value.total || "Total"), 1)
+            ])
+          ]),
+          s("tbody", le, [
+            (o(!0), a(x, null, D(e.value.items, (u, I) => (o(), a("tr", {
+              key: u.id || I,
+              class: "invoice-tr group"
+            }, [
+              s("td", ne, [
+                s("div", ue, [
+                  u.thumbnail ? (o(), a("div", {
+                    key: 0,
+                    class: n(["shrink-0 overflow-hidden", l.compact ? "w-9 h-9" : "w-10 h-10"])
+                  }, [
+                    r(k, {
+                      src: u.thumbnail,
+                      alt: u.name,
+                      class: "w-full h-full ronded!",
+                      rounded: "md"
+                    }, null, 8, ["src", "alt"])
+                  ], 2)) : c("", !0),
+                  s("div", ie, [
+                    s("p", {
+                      class: "font-semibold text-foreground whitespace-normal text-sm",
+                      title: u.name
+                    }, t(u.name), 9, re),
+                    u.sku ? (o(), a("p", de, t(i.value.sku || "SKU") + ": " + t(u.sku), 1)) : c("", !0),
+                    u.description && !l.compact ? (o(), a("p", me, t(u.description), 1)) : c("", !0)
                   ])
-                ], 2),
-                a("td", {
-                  class: l(["text-right text-sm tabular-nums", s.compact ? "px-4 py-2" : "px-6 py-4"])
-                }, u(n.quantity), 3),
-                b.value ? (t(), o("td", {
-                  key: 0,
-                  class: l(["text-right tabular-nums text-muted-foreground text-sm", s.compact ? "px-4 py-2" : "px-6 py-4"])
-                }, u(n.size || "-"), 3)) : c("", !0),
-                a("td", {
-                  class: l(["text-right tabular-nums text-sm", s.compact ? "px-4 py-2" : "px-6 py-4"])
-                }, [
-                  m(d(v), {
-                    value: n.price
-                  }, null, 8, ["value"])
-                ], 2),
-                h.value ? (t(), o("td", {
-                  key: 1,
-                  class: l(["text-right tabular-nums text-success/80 font-medium", s.compact ? "px-4 py-2" : "px-6 py-4"])
-                }, [
-                  n.discount !== void 0 ? (t(), o("div", ee, [
-                    m(d(v), {
-                      value: -n.discount,
-                      class: "text-sm"
-                    }, null, 8, ["value"]),
-                    n.discountLabel ? (t(), o("span", te, u(n.discountLabel), 1)) : c("", !0)
-                  ])) : (t(), o("span", oe, "-"))
-                ], 2)) : c("", !0),
-                a("td", {
-                  class: l(["text-right tabular-nums font-medium", s.compact ? "px-4 py-2" : "px-6 py-4"])
-                }, [
-                  m(d(v), {
-                    value: n.total,
+                ])
+              ]),
+              s("td", ve, t(u.quantity), 1),
+              y.value ? (o(), a("td", pe, t(u.size || "—"), 1)) : c("", !0),
+              s("td", xe, [
+                r(d(f), {
+                  value: u.price,
+                  class: "text-sm"
+                }, null, 8, ["value"])
+              ]),
+              g.value ? (o(), a("td", fe, [
+                u.discount !== void 0 ? (o(), a("div", he, [
+                  r(d(f), {
+                    value: -u.discount,
                     class: "text-sm"
-                  }, null, 8, ["value"])
-                ], 2)
-              ]))), 128))
-            ])
-          ], 2)
-        ], 4)) : c("", !0),
-        a("div", {
-          class: l(["flex flex-col-reverse md:flex-row justify-between", s.compact ? "gap-4 pt-2" : "gap-8 pt-4"])
+                  }, null, 8, ["value"]),
+                  u.discountLabel ? (o(), a("span", {
+                    key: 0,
+                    class: n(["uppercase tracking-wider font-bold text-muted-foreground", l.compact ? "text-[8px]" : "text-[9px]"])
+                  }, t(u.discountLabel), 3)) : c("", !0)
+                ])) : (o(), a("span", ye, "—"))
+              ])) : c("", !0),
+              s("td", ge, [
+                r(d(f), {
+                  value: u.total,
+                  class: "text-sm"
+                }, null, 8, ["value"])
+              ])
+            ]))), 128))
+          ])
+        ], 2)
+      ])) : c("", !0),
+      s("div", {
+        class: n(l.compact ? "p-6" : "p-8")
+      }, [
+        s("div", {
+          class: n(["flex flex-col-reverse lg:flex-row justify-between", l.compact ? "gap-6" : "gap-8"])
         }, [
-          a("div", {
-            class: l(["w-full md:w-1/2", s.compact ? "space-y-3" : "space-y-6"])
+          s("div", {
+            class: n(["w-full lg:w-1/2 flex flex-col", l.compact ? "gap-4" : "gap-5"])
           }, [
-            e.value.notes ? (t(), o("div", ae, [
-              r[3] || (r[3] = a("h4", { class: "font-semibold text-muted-foreground uppercase tracking-wider text-sm" }, " Notes ", -1)),
-              a("div", {
-                class: l(["text-muted-foreground whitespace-pre-wrap leading-relaxed rounded-lg border border-border/50 text-sm", s.compact ? "p-3 bg-muted/20" : "p-4 bg-muted/30"])
-              }, u(e.value.notes), 3)
+            e.value.notes ? (o(), a("div", be, [
+              s("p", {
+                class: n(["text-muted-foreground uppercase tracking-widest font-semibold mb-2", l.compact ? "text-[9px]" : "text-[10px]"])
+              }, t(i.value.notes || "Notes"), 3),
+              s("p", {
+                class: n(["text-muted-foreground whitespace-pre-wrap leading-relaxed", l.compact ? "text-xs" : "text-sm"])
+              }, t(e.value.notes), 3)
             ])) : c("", !0),
-            a("div", se, [
-              e.value.qrcode ? (t(), o("div", ce, [
-                m(d(T), {
-                  text: e.value.qrcode,
-                  size: s.compact ? 64 : 80
-                }, null, 8, ["text", "size"])
+            e.value.qrcode || e.value.barcode ? (o(), a("div", ke, [
+              e.value.qrcode ? (o(), a("div", Ie, [
+                r(d(T), {
+                  value: e.value.qrcode,
+                  size: l.compact ? 48 : 56
+                }, null, 8, ["value", "size"])
               ])) : c("", !0),
-              e.value.barcode ? (t(), o("div", le, [
-                m(d(N), {
+              e.value.barcode ? (o(), a("div", _e, [
+                r(d(N), {
                   value: e.value.barcode,
                   format: "CODE128",
-                  height: s.compact ? 32 : 40,
-                  width: s.compact ? 1.3 : 1.5
-                }, null, 8, ["value", "height", "width"])
+                  height: l.compact ? 24 : 30,
+                  width: l.compact ? 1.2 : 1.4,
+                  "display-value": l.displayBarcodeValue
+                }, null, 8, ["value", "height", "width", "display-value"])
               ])) : c("", !0)
-            ])
+            ])) : c("", !0)
           ], 2),
-          a("div", ue, [
-            a("div", {
-              class: l(["rounded-lg bg-muted/20 border border-border", s.compact ? "p-4 space-y-2" : "p-5 space-y-3"])
-            }, [
-              (t(!0), o(x, null, k(e.value.totals, (n, f) => (t(), o("div", {
-                key: f,
-                class: l(["flex justify-between items-center", [
-                  n.isGrandTotal ? s.compact ? "pt-2 border-t border-border mt-2 text-base font-bold text-foreground" : "pt-3 border-t border-border mt-3 text-base font-bold text-foreground" : "text-sm text-muted-foreground font-medium"
-                ]])
-              }, [
-                a("span", null, u(n.label), 1),
-                m(d(v), {
-                  value: n.value
-                }, null, 8, ["value"])
-              ], 2))), 128))
-            ], 2)
+          s("div", we, [
+            r(V, {
+              totals: e.value.totals,
+              compact: l.compact,
+              variant: "Variant1"
+            }, null, 8, ["totals", "compact"])
           ])
         ], 2)
       ], 2),
-      e.value.footerText ? (t(), o("div", {
-        key: 0,
-        class: l(["bg-muted/40 border-t border-border text-center text-muted-foreground", s.compact ? "px-6 py-3 text-xs" : "px-6 py-4 text-xs"])
-      }, u(e.value.footerText), 3)) : c("", !0)
+      e.value.footerText ? (o(), a("div", {
+        key: 2,
+        class: n(["border-t border-border text-center text-muted-foreground font-medium uppercase tracking-widest", l.compact ? "px-6 py-3 text-[9px]" : "px-6 py-4 text-[10px]"])
+      }, t(e.value.footerText), 3)) : c("", !0)
     ], 4));
   }
 });
 export {
-  xe as default
+  Ce as default
 };