vlite3 1.4.17 → 1.4.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/CategoryManager/CategoryManager.vue2.js +1 -1
- package/components/ColorPicker/ColorIro.vue3.js +2 -2
- package/components/ColorPicker/ColorPicker.vue.js +2 -2
- package/components/Dropdown/DropdownMenu.vue.js +1 -1
- package/components/Invoice/InvoiceVariant1.vue.js +8 -8
- package/components/Invoice/InvoiceVariant2.vue.js +9 -9
- package/components/Invoice/InvoiceVariant3.vue.js +7 -7
- package/components/Invoice/InvoiceVariant4.vue.js +56 -56
- package/components/Invoice/types.d.ts +2 -0
- package/components/QRCode/QRCode.vue.d.ts +4 -10
- package/components/QRCode/QRCode.vue.js +45 -15
- package/components/QRCode/index.d.ts +1 -0
- package/components/QRCode/types.d.ts +14 -0
- package/components/ScaleGenerator/ScaleGenerator.vue.d.ts +1 -1
- package/components/Screen/ScreenFilter.vue.js +1 -1
- package/components/ThemeToggle.vue.d.ts +1 -1
- package/package.json +1 -1
- /package/components/ColorPicker/{ColorIro.vue2.js → ColorIro.vue.js} +0 -0
- /package/components/Dropdown/{DropdownMenu.vue3.js → DropdownMenu.vue2.js} +0 -0
|
@@ -7,8 +7,8 @@ import "../../core/config.js";
|
|
|
7
7
|
/* empty css */
|
|
8
8
|
/* empty css */
|
|
9
9
|
import E from "../Button.vue.js";
|
|
10
|
-
import _ from "./ColorIro.
|
|
11
|
-
/* empty css
|
|
10
|
+
import _ from "./ColorIro.vue.js";
|
|
11
|
+
/* empty css */
|
|
12
12
|
import { useEyeDropper as I } from "@vueuse/core";
|
|
13
13
|
const N = { class: "absolute left-2.5 top-1/2 -translate-y-1/2 flex items-center justify-center z-20 pointer-events-none" }, j = {
|
|
14
14
|
key: 0,
|
|
@@ -6,7 +6,7 @@ import N from "../QRCode/QRCode.vue.js";
|
|
|
6
6
|
import k from "../Avatar.vue.js";
|
|
7
7
|
import M from "../StatusChip/StatusChip.vue.js";
|
|
8
8
|
import B from "./InvoiceTotals.vue.js";
|
|
9
|
-
const
|
|
9
|
+
const S = { class: "flex items-center justify-between gap-3" }, V = { class: "shrink-0" }, $ = {
|
|
10
10
|
key: 0,
|
|
11
11
|
class: "flex items-center gap-3 border-r-[1.5px] pr-3 border-gray-300"
|
|
12
12
|
}, q = { class: "text-muted-foreground uppercase tracking-wider font-medium" }, C = {
|
|
@@ -77,10 +77,10 @@ const V = { class: "flex items-center justify-between gap-3" }, S = { class: "sh
|
|
|
77
77
|
}, Be = {
|
|
78
78
|
key: 0,
|
|
79
79
|
class: "shrink-0"
|
|
80
|
-
},
|
|
80
|
+
}, Se = {
|
|
81
81
|
key: 1,
|
|
82
82
|
class: "shrink-0"
|
|
83
|
-
},
|
|
83
|
+
}, Ve = { class: "w-full lg:w-2/5 min-w-[220px]" }, Ke = /* @__PURE__ */ _({
|
|
84
84
|
__name: "InvoiceVariant1",
|
|
85
85
|
props: {
|
|
86
86
|
data: {},
|
|
@@ -104,8 +104,8 @@ const V = { class: "flex items-center justify-between gap-3" }, S = { class: "sh
|
|
|
104
104
|
c("div", {
|
|
105
105
|
class: l(["border-b border-border", n.compact ? "px-5 py-3" : "px-6 pt-5 pb-3.5"])
|
|
106
106
|
}, [
|
|
107
|
-
c("div",
|
|
108
|
-
c("div",
|
|
107
|
+
c("div", S, [
|
|
108
|
+
c("div", V, [
|
|
109
109
|
c("div", {
|
|
110
110
|
class: l(n.compact ? "h-10 w-10" : "h-13 w-13")
|
|
111
111
|
}, [
|
|
@@ -361,10 +361,10 @@ const V = { class: "flex items-center justify-between gap-3" }, S = { class: "sh
|
|
|
361
361
|
e.value.qrcode ? (o(), a("div", Be, [
|
|
362
362
|
d(m(N), {
|
|
363
363
|
value: e.value.qrcode,
|
|
364
|
-
size: n.compact ? 48 : 56
|
|
364
|
+
size: e.value.qrcodeSize ?? (n.compact ? 48 : 56)
|
|
365
365
|
}, null, 8, ["value", "size"])
|
|
366
366
|
])) : s("", !0),
|
|
367
|
-
e.value.barcode ? (o(), a("div",
|
|
367
|
+
e.value.barcode ? (o(), a("div", Se, [
|
|
368
368
|
d(m(T), {
|
|
369
369
|
value: e.value.barcode,
|
|
370
370
|
format: "CODE128",
|
|
@@ -375,7 +375,7 @@ const V = { class: "flex items-center justify-between gap-3" }, S = { class: "sh
|
|
|
375
375
|
])) : s("", !0)
|
|
376
376
|
])) : s("", !0)
|
|
377
377
|
], 2),
|
|
378
|
-
c("div",
|
|
378
|
+
c("div", Ve, [
|
|
379
379
|
d(B, {
|
|
380
380
|
totals: e.value.totals,
|
|
381
381
|
compact: n.compact,
|
|
@@ -9,10 +9,10 @@ import z from "./InvoiceTotals.vue.js";
|
|
|
9
9
|
const N = {
|
|
10
10
|
key: 0,
|
|
11
11
|
class: "flex justify-center mb-2"
|
|
12
|
-
}, T = { key: 0 }, V = { key: 1 }, B = { key: 2 },
|
|
12
|
+
}, T = { key: 0 }, V = { key: 1 }, B = { key: 2 }, S = { key: 3 }, $ = { class: "flex justify-between items-center" }, D = { class: "text-muted-foreground font-medium" }, M = { class: "font-semibold text-foreground" }, L = {
|
|
13
13
|
key: 0,
|
|
14
14
|
class: "flex justify-between items-center"
|
|
15
|
-
},
|
|
15
|
+
}, q = { class: "text-muted-foreground font-medium" }, C = {
|
|
16
16
|
key: 1,
|
|
17
17
|
class: "flex justify-between items-start mt-1.5"
|
|
18
18
|
}, E = { class: "text-muted-foreground font-medium shrink-0 mr-4" }, A = { class: "text-right flex flex-col" }, F = { class: "font-semibold text-foreground" }, K = {
|
|
@@ -96,7 +96,7 @@ const N = {
|
|
|
96
96
|
e.value.companyInfo.address ? (a(), o("p", T, t(e.value.companyInfo.address), 1)) : l("", !0),
|
|
97
97
|
e.value.companyInfo.city || e.value.companyInfo.state ? (a(), o("p", V, t(e.value.companyInfo.city) + " " + t(e.value.companyInfo.state) + " " + t(e.value.companyInfo.zip), 1)) : l("", !0),
|
|
98
98
|
e.value.companyInfo.phone ? (a(), o("p", B, t(e.value.companyInfo.phone), 1)) : l("", !0),
|
|
99
|
-
e.value.companyInfo.taxId ? (a(), o("p",
|
|
99
|
+
e.value.companyInfo.taxId ? (a(), o("p", S, t(d.value.taxId || "VAT") + ": " + t(e.value.companyInfo.taxId), 1)) : l("", !0)
|
|
100
100
|
], 2)) : l("", !0)
|
|
101
101
|
], 2),
|
|
102
102
|
s("div", {
|
|
@@ -105,19 +105,19 @@ const N = {
|
|
|
105
105
|
s("div", {
|
|
106
106
|
class: c(n.compact ? "px-4 py-2.5 space-y-1 text-xs" : "px-5 py-3.5 space-y-1.5 text-sm")
|
|
107
107
|
}, [
|
|
108
|
-
s("div",
|
|
109
|
-
s("span",
|
|
110
|
-
s("span",
|
|
108
|
+
s("div", $, [
|
|
109
|
+
s("span", D, t(d.value.invoiceNumber || "Receipt #"), 1),
|
|
110
|
+
s("span", M, t(e.value.invoiceNumber), 1)
|
|
111
111
|
]),
|
|
112
112
|
e.value.issuedDate ? (a(), o("div", L, [
|
|
113
|
-
s("span",
|
|
113
|
+
s("span", q, t(d.value.issued || "Date"), 1),
|
|
114
114
|
i(r(_), {
|
|
115
115
|
value: e.value.issuedDate,
|
|
116
116
|
type: "dateTime",
|
|
117
117
|
class: "font-medium text-foreground"
|
|
118
118
|
}, null, 8, ["value"])
|
|
119
119
|
])) : l("", !0),
|
|
120
|
-
e.value.customerInfo?.name ? (a(), o("div",
|
|
120
|
+
e.value.customerInfo?.name ? (a(), o("div", C, [
|
|
121
121
|
s("span", E, t(d.value.billedTo || "Bill To"), 1),
|
|
122
122
|
s("div", A, [
|
|
123
123
|
s("span", F, t(e.value.customerInfo.name), 1),
|
|
@@ -236,7 +236,7 @@ const N = {
|
|
|
236
236
|
e.value.qrcode ? (a(), o("div", fe, [
|
|
237
237
|
i(r(w), {
|
|
238
238
|
value: e.value.qrcode,
|
|
239
|
-
size: n.compact ? 48 : 64
|
|
239
|
+
size: e.value.qrcodeSize ?? (n.compact ? 48 : 64)
|
|
240
240
|
}, null, 8, ["value", "size"])
|
|
241
241
|
])) : l("", !0),
|
|
242
242
|
e.value.barcode ? (a(), o("div", pe, [
|
|
@@ -9,7 +9,7 @@ import B from "./InvoiceTotals.vue.js";
|
|
|
9
9
|
const S = { class: "flex items-center gap-3" }, V = {
|
|
10
10
|
key: 0,
|
|
11
11
|
class: "shrink-0"
|
|
12
|
-
}, $ = { class: "flex flex-col leading-tight" },
|
|
12
|
+
}, $ = { class: "flex flex-col leading-tight" }, q = { class: "flex items-center gap-3" }, M = { key: 0 }, L = { class: "mt-0.5 text-muted-foreground space-y-0.5 text-xs" }, C = { key: 0 }, j = { key: 1 }, E = { key: 2 }, P = {
|
|
13
13
|
key: 3,
|
|
14
14
|
class: "pt-0.5"
|
|
15
15
|
}, F = { key: 1 }, K = { class: "mt-0.5 text-muted-foreground space-y-0.5 text-xs" }, O = { key: 0 }, Q = { key: 1 }, U = { key: 2 }, A = { key: 2 }, G = { class: "mt-0.5 text-muted-foreground space-y-0.5 text-xs" }, H = { key: 0 }, J = { key: 1 }, R = { key: 2 }, W = { key: 3 }, X = { key: 4 }, Y = { class: "flex flex-col md:items-end gap-2" }, Z = {
|
|
@@ -54,7 +54,7 @@ const S = { class: "flex items-center gap-3" }, V = {
|
|
|
54
54
|
}, Be = { class: "invoice-td invoice-text-right tabular-nums font-semibold text-foreground" }, Se = {
|
|
55
55
|
key: 0,
|
|
56
56
|
class: "text-muted-foreground text-xs border-t border-border pt-3"
|
|
57
|
-
}, Ve = { class: "text-foreground" }, $e = { class: "whitespace-pre-wrap" },
|
|
57
|
+
}, Ve = { class: "text-foreground" }, $e = { class: "whitespace-pre-wrap" }, qe = {
|
|
58
58
|
key: 1,
|
|
59
59
|
class: "text-center text-muted-foreground opacity-70 text-xs"
|
|
60
60
|
}, Qe = /* @__PURE__ */ b({
|
|
@@ -67,7 +67,7 @@ const S = { class: "flex items-center gap-3" }, V = {
|
|
|
67
67
|
},
|
|
68
68
|
setup(n) {
|
|
69
69
|
const f = n, e = v(() => f.data), d = v(() => f.labels || {}), h = v(() => e.value.items.some((m) => !!m.size)), x = v(() => e.value.items.some((m) => m.discount !== void 0));
|
|
70
|
-
return (m,
|
|
70
|
+
return (m, Me) => (s(), a("div", {
|
|
71
71
|
class: i(["v-invoice-v3 bg-background text-foreground border border-border rounded-lg overflow-hidden", n.compact ? "text-xs" : "text-sm"]),
|
|
72
72
|
style: k({
|
|
73
73
|
"--invoice-cell-px": n.compact ? "0.75rem" : "1rem",
|
|
@@ -100,7 +100,7 @@ const S = { class: "flex items-center gap-3" }, V = {
|
|
|
100
100
|
}, t(e.value.brandTitle), 3)) : c("", !0)
|
|
101
101
|
])
|
|
102
102
|
]),
|
|
103
|
-
o("div",
|
|
103
|
+
o("div", q, [
|
|
104
104
|
o("span", {
|
|
105
105
|
class: i(["opacity-80 font-medium", n.compact ? "text-xs" : "text-sm"])
|
|
106
106
|
}, "#" + t(e.value.invoiceNumber), 3),
|
|
@@ -118,7 +118,7 @@ const S = { class: "flex items-center gap-3" }, V = {
|
|
|
118
118
|
o("div", {
|
|
119
119
|
class: i(["grid grid-cols-1 sm:grid-cols-2", [e.value.shippingInfo ? "md:grid-cols-4" : "md:grid-cols-3", n.compact ? "gap-3" : "gap-5"]])
|
|
120
120
|
}, [
|
|
121
|
-
e.value.companyInfo ? (s(), a("div",
|
|
121
|
+
e.value.companyInfo ? (s(), a("div", M, [
|
|
122
122
|
o("p", {
|
|
123
123
|
class: i(["text-muted-foreground uppercase tracking-widest font-semibold mb-1.5", n.compact ? "text-[9px]" : "text-[10px]"])
|
|
124
124
|
}, t(d.value.from || "From"), 3),
|
|
@@ -189,7 +189,7 @@ const S = { class: "flex items-center gap-3" }, V = {
|
|
|
189
189
|
e.value.qrcode ? (s(), a("div", ue, [
|
|
190
190
|
u(r(D), {
|
|
191
191
|
value: e.value.qrcode,
|
|
192
|
-
size: n.compact ? 40 : 48
|
|
192
|
+
size: e.value.qrcodeSize ?? (n.compact ? 40 : 48)
|
|
193
193
|
}, null, 8, ["value", "size"])
|
|
194
194
|
])) : c("", !0),
|
|
195
195
|
e.value.barcode ? (s(), a("div", re, [
|
|
@@ -301,7 +301,7 @@ const S = { class: "flex items-center gap-3" }, V = {
|
|
|
301
301
|
o("strong", Ve, t(d.value.notes || "Notes") + ":", 1),
|
|
302
302
|
o("span", $e, t(e.value.notes), 1)
|
|
303
303
|
])) : c("", !0),
|
|
304
|
-
e.value.footerText ? (s(), a("div",
|
|
304
|
+
e.value.footerText ? (s(), a("div", qe, t(e.value.footerText), 1)) : c("", !0)
|
|
305
305
|
], 2)
|
|
306
306
|
], 6));
|
|
307
307
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { defineComponent as _, computed as v, openBlock as o, createElementBlock as a, normalizeStyle as w, createElementVNode as s, normalizeClass as
|
|
1
|
+
import { defineComponent as _, computed as v, openBlock as o, createElementBlock as a, normalizeStyle as w, createElementVNode as s, normalizeClass as n, toDisplayString as t, createBlock as z, createCommentVNode as c, createVNode as u, unref as m, createTextVNode as r, Fragment as x, renderList as D } from "vue";
|
|
2
2
|
import f from "../Price/Price.vue.js";
|
|
3
3
|
import g from "../DateTime/DateTime.vue.js";
|
|
4
4
|
import T from "../Barcode/Barcode.vue.js";
|
|
@@ -6,13 +6,13 @@ import N from "../QRCode/QRCode.vue.js";
|
|
|
6
6
|
import k from "../Avatar.vue.js";
|
|
7
7
|
import V from "../StatusChip/StatusChip.vue.js";
|
|
8
8
|
import B from "./InvoiceTotals.vue.js";
|
|
9
|
-
const S = { class: "flex flex-col sm:flex-row justify-between items-start gap-4" }, $ = { class: "flex flex-col gap-3" }, M = { class: "flex items-center gap-2.5 mt-1.5 flex-wrap" },
|
|
9
|
+
const S = { class: "flex flex-col sm:flex-row justify-between items-start gap-4" }, $ = { class: "flex flex-col gap-3" }, M = { class: "flex items-center gap-2.5 mt-1.5 flex-wrap" }, q = { class: "flex flex-wrap gap-5" }, C = { key: 0 }, L = { key: 1 }, j = { key: 2 }, E = { key: 3 }, P = { class: "flex flex-col items-start sm:items-end gap-2 shrink-0" }, F = { key: 0 }, O = { key: 1 }, K = { key: 2 }, Q = { key: 3 }, U = { class: "flex flex-col gap-0.5" }, A = { key: 0 }, G = { key: 1 }, H = {
|
|
10
10
|
key: 2,
|
|
11
11
|
class: "text-gray-700 font-medium"
|
|
12
12
|
}, J = { key: 4 }, R = { key: 1 }, W = { key: 1 }, X = { key: 2 }, Y = { key: 3 }, Z = { class: "flex flex-col gap-0.5" }, ee = { key: 0 }, te = { key: 1 }, oe = {
|
|
13
13
|
key: 4,
|
|
14
14
|
class: "text-xs font-semibold"
|
|
15
|
-
}, ae = { key: 2 }, se = { key: 1 }, ce = { key: 2 },
|
|
15
|
+
}, ae = { key: 2 }, se = { key: 1 }, ce = { key: 2 }, le = { key: 3 }, ne = { class: "flex flex-col gap-0.5" }, ie = { key: 0 }, de = { key: 1 }, ue = {
|
|
16
16
|
scope: "col",
|
|
17
17
|
class: "invoice-th font-bold"
|
|
18
18
|
}, re = {
|
|
@@ -56,7 +56,7 @@ const S = { class: "flex flex-col sm:flex-row justify-between items-start gap-4"
|
|
|
56
56
|
}, Me = {
|
|
57
57
|
key: 1,
|
|
58
58
|
class: "shrink-0 inline-block overflow-hidden"
|
|
59
|
-
},
|
|
59
|
+
}, qe = { key: 0 }, Ce = { class: "w-full md:w-[42%] min-w-[260px]" }, Le = { key: 0 }, je = { key: 1 }, He = /* @__PURE__ */ _({
|
|
60
60
|
__name: "InvoiceVariant4",
|
|
61
61
|
props: {
|
|
62
62
|
data: {},
|
|
@@ -64,13 +64,13 @@ const S = { class: "flex flex-col sm:flex-row justify-between items-start gap-4"
|
|
|
64
64
|
displayBarcodeValue: { type: Boolean, default: !1 },
|
|
65
65
|
labels: {}
|
|
66
66
|
},
|
|
67
|
-
setup(
|
|
68
|
-
const h =
|
|
67
|
+
setup(l) {
|
|
68
|
+
const h = l, e = v(() => h.data), d = v(() => h.labels || {}), y = v(() => e.value.items.some((p) => !!p.size)), b = v(() => e.value.items.some((p) => p.discount !== void 0));
|
|
69
69
|
return (p, Ee) => (o(), a("div", {
|
|
70
70
|
class: "v-invoice-v4 bg-background border border-border text-foreground overflow-hidden rounded-xl font-sans print:shadow-none print:border-none",
|
|
71
71
|
style: w({
|
|
72
|
-
"--invoice-cell-px":
|
|
73
|
-
"--invoice-cell-py":
|
|
72
|
+
"--invoice-cell-px": l.compact ? "0.75rem" : "1rem",
|
|
73
|
+
"--invoice-cell-py": l.compact ? "0.5rem" : "0.75rem",
|
|
74
74
|
"--invoice-thead-bg": "var(--color-muted)",
|
|
75
75
|
"--invoice-thead-border": "1px solid var(--color-border)",
|
|
76
76
|
"--invoice-thead-color": "var(--color-muted-foreground)",
|
|
@@ -80,17 +80,17 @@ const S = { class: "flex flex-col sm:flex-row justify-between items-start gap-4"
|
|
|
80
80
|
})
|
|
81
81
|
}, [
|
|
82
82
|
s("div", {
|
|
83
|
-
class:
|
|
83
|
+
class: n(["bg-gray-900 text-white", l.compact ? "px-5 py-4" : "px-6 py-5 sm:px-8"])
|
|
84
84
|
}, [
|
|
85
85
|
s("div", S, [
|
|
86
86
|
s("div", $, [
|
|
87
87
|
s("div", null, [
|
|
88
88
|
s("h1", {
|
|
89
|
-
class:
|
|
89
|
+
class: n(["font-black tracking-tighter uppercase leading-none text-white", l.compact ? "text-3xl" : "text-4xl"])
|
|
90
90
|
}, t(e.value.brandTitle || d.value.invoice || "INVOICE"), 3),
|
|
91
91
|
s("div", M, [
|
|
92
92
|
s("span", {
|
|
93
|
-
class:
|
|
93
|
+
class: n(["font-semibold opacity-80", l.compact ? "text-sm" : "text-base"])
|
|
94
94
|
}, " #" + t(e.value.invoiceNumber), 3),
|
|
95
95
|
e.value.status ? (o(), z(V, {
|
|
96
96
|
key: 0,
|
|
@@ -100,41 +100,41 @@ const S = { class: "flex flex-col sm:flex-row justify-between items-start gap-4"
|
|
|
100
100
|
}, null, 8, ["status"])) : c("", !0)
|
|
101
101
|
])
|
|
102
102
|
]),
|
|
103
|
-
s("div",
|
|
104
|
-
e.value.issuedDate ? (o(), a("div",
|
|
103
|
+
s("div", q, [
|
|
104
|
+
e.value.issuedDate ? (o(), a("div", C, [
|
|
105
105
|
s("p", {
|
|
106
|
-
class:
|
|
106
|
+
class: n(["font-semibold uppercase tracking-widest opacity-60", l.compact ? "text-[9px] mb-0.5" : "text-[10px] mb-1"])
|
|
107
107
|
}, t(d.value.issued || "Issue Date"), 3),
|
|
108
108
|
u(m(g), {
|
|
109
109
|
value: e.value.issuedDate,
|
|
110
110
|
type: "date",
|
|
111
|
-
class:
|
|
111
|
+
class: n(["font-extrabold", l.compact ? "text-sm" : "text-base"])
|
|
112
112
|
}, null, 8, ["value", "class"])
|
|
113
113
|
])) : c("", !0),
|
|
114
|
-
e.value.dueDate ? (o(), a("div",
|
|
114
|
+
e.value.dueDate ? (o(), a("div", L, [
|
|
115
115
|
s("p", {
|
|
116
|
-
class:
|
|
116
|
+
class: n(["font-semibold uppercase tracking-widest opacity-60", l.compact ? "text-[9px] mb-0.5" : "text-[10px] mb-1"])
|
|
117
117
|
}, t(d.value.due || "Due Date"), 3),
|
|
118
118
|
u(m(g), {
|
|
119
119
|
value: e.value.dueDate,
|
|
120
120
|
type: "date",
|
|
121
|
-
class:
|
|
121
|
+
class: n(["font-extrabold", l.compact ? "text-sm" : "text-base"])
|
|
122
122
|
}, null, 8, ["value", "class"])
|
|
123
123
|
])) : c("", !0),
|
|
124
|
-
e.value.paymentMethod ? (o(), a("div",
|
|
124
|
+
e.value.paymentMethod ? (o(), a("div", j, [
|
|
125
125
|
s("p", {
|
|
126
|
-
class:
|
|
126
|
+
class: n(["font-semibold uppercase tracking-widest opacity-60", l.compact ? "text-[9px] mb-0.5" : "text-[10px] mb-1"])
|
|
127
127
|
}, t(d.value.paymentMethod || "Payment"), 3),
|
|
128
128
|
s("p", {
|
|
129
|
-
class:
|
|
129
|
+
class: n(["font-extrabold", l.compact ? "text-sm" : "text-base"])
|
|
130
130
|
}, t(e.value.paymentMethod), 3)
|
|
131
131
|
])) : c("", !0),
|
|
132
132
|
e.value.shippingMethod ? (o(), a("div", E, [
|
|
133
133
|
s("p", {
|
|
134
|
-
class:
|
|
134
|
+
class: n(["font-semibold uppercase tracking-widest opacity-60", l.compact ? "text-[9px] mb-0.5" : "text-[10px] mb-1"])
|
|
135
135
|
}, t(d.value.shippingMethod || "Shipping"), 3),
|
|
136
136
|
s("p", {
|
|
137
|
-
class:
|
|
137
|
+
class: n(["font-extrabold", l.compact ? "text-sm" : "text-base"])
|
|
138
138
|
}, t(e.value.shippingMethod), 3)
|
|
139
139
|
])) : c("", !0)
|
|
140
140
|
])
|
|
@@ -142,7 +142,7 @@ const S = { class: "flex flex-col sm:flex-row justify-between items-start gap-4"
|
|
|
142
142
|
s("div", P, [
|
|
143
143
|
e.value.brandLogo ? (o(), a("div", {
|
|
144
144
|
key: 0,
|
|
145
|
-
class:
|
|
145
|
+
class: n(["bg-white/10 rounded-lg p-2 border border-white/20", l.compact ? "h-11" : "h-14"])
|
|
146
146
|
}, [
|
|
147
147
|
u(k, {
|
|
148
148
|
src: e.value.brandLogo,
|
|
@@ -153,27 +153,27 @@ const S = { class: "flex flex-col sm:flex-row justify-between items-start gap-4"
|
|
|
153
153
|
], 2)) : c("", !0),
|
|
154
154
|
e.value.brandName ? (o(), a("h2", {
|
|
155
155
|
key: 1,
|
|
156
|
-
class:
|
|
156
|
+
class: n(["font-extrabold tracking-tight opacity-90 text-white", l.compact ? "text-base" : "text-lg"])
|
|
157
157
|
}, t(e.value.brandName), 3)) : c("", !0)
|
|
158
158
|
])
|
|
159
159
|
])
|
|
160
160
|
], 2),
|
|
161
161
|
s("div", {
|
|
162
|
-
class: l
|
|
162
|
+
class: n(l.compact ? "p-5" : "px-7 py-4.5")
|
|
163
163
|
}, [
|
|
164
164
|
s("div", {
|
|
165
|
-
class:
|
|
165
|
+
class: n(["grid grid-cols-1 sm:grid-cols-2 gap-5 mb-6", e.value.shippingInfo ? "md:grid-cols-3" : "md:grid-cols-2"])
|
|
166
166
|
}, [
|
|
167
167
|
e.value.companyInfo ? (o(), a("div", F, [
|
|
168
168
|
s("p", {
|
|
169
|
-
class:
|
|
169
|
+
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]"])
|
|
170
170
|
}, t(d.value.from || "From"), 3),
|
|
171
171
|
s("div", {
|
|
172
|
-
class:
|
|
172
|
+
class: n(["text-muted-foreground leading-relaxed", l.compact ? "text-xs space-y-0.5" : "text-sm space-y-1"])
|
|
173
173
|
}, [
|
|
174
174
|
e.value.companyInfo.name ? (o(), a("p", {
|
|
175
175
|
key: 0,
|
|
176
|
-
class:
|
|
176
|
+
class: n(["font-extrabold text-foreground", l.compact ? "text-sm mb-0.5" : "text-base mb-1"])
|
|
177
177
|
}, t(e.value.companyInfo.name), 3)) : c("", !0),
|
|
178
178
|
e.value.companyInfo.address ? (o(), a("p", O, t(e.value.companyInfo.address), 1)) : c("", !0),
|
|
179
179
|
e.value.companyInfo.city || e.value.companyInfo.state ? (o(), a("p", K, [
|
|
@@ -194,14 +194,14 @@ const S = { class: "flex flex-col sm:flex-row justify-between items-start gap-4"
|
|
|
194
194
|
])) : c("", !0),
|
|
195
195
|
e.value.customerInfo ? (o(), a("div", R, [
|
|
196
196
|
s("p", {
|
|
197
|
-
class:
|
|
197
|
+
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]"])
|
|
198
198
|
}, t(d.value.billedTo || "Billed To"), 3),
|
|
199
199
|
s("div", {
|
|
200
|
-
class:
|
|
200
|
+
class: n(["text-muted-foreground leading-relaxed", l.compact ? "text-xs space-y-0.5" : "text-sm space-y-1"])
|
|
201
201
|
}, [
|
|
202
202
|
e.value.customerInfo.name ? (o(), a("p", {
|
|
203
203
|
key: 0,
|
|
204
|
-
class:
|
|
204
|
+
class: n(["font-extrabold text-foreground", l.compact ? "text-sm mb-0.5" : "text-base mb-1"])
|
|
205
205
|
}, t(e.value.customerInfo.name), 3)) : c("", !0),
|
|
206
206
|
e.value.customerInfo.address ? (o(), a("p", W, t(e.value.customerInfo.address), 1)) : c("", !0),
|
|
207
207
|
e.value.customerInfo.city || e.value.customerInfo.state ? (o(), a("p", X, [
|
|
@@ -221,14 +221,14 @@ const S = { class: "flex flex-col sm:flex-row justify-between items-start gap-4"
|
|
|
221
221
|
])) : c("", !0),
|
|
222
222
|
e.value.shippingInfo ? (o(), a("div", ae, [
|
|
223
223
|
s("p", {
|
|
224
|
-
class:
|
|
224
|
+
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]"])
|
|
225
225
|
}, t(d.value.shipTo || "Ship To"), 3),
|
|
226
226
|
s("div", {
|
|
227
|
-
class:
|
|
227
|
+
class: n(["text-muted-foreground leading-relaxed", l.compact ? "text-xs space-y-0.5" : "text-sm space-y-1"])
|
|
228
228
|
}, [
|
|
229
229
|
e.value.shippingInfo.name ? (o(), a("p", {
|
|
230
230
|
key: 0,
|
|
231
|
-
class:
|
|
231
|
+
class: n(["font-extrabold text-foreground", l.compact ? "text-sm mb-0.5" : "text-base mb-1"])
|
|
232
232
|
}, t(e.value.shippingInfo.name), 3)) : c("", !0),
|
|
233
233
|
e.value.shippingInfo.address ? (o(), a("p", se, t(e.value.shippingInfo.address), 1)) : c("", !0),
|
|
234
234
|
e.value.shippingInfo.city || e.value.shippingInfo.state ? (o(), a("p", ce, [
|
|
@@ -238,8 +238,8 @@ const S = { class: "flex flex-col sm:flex-row justify-between items-start gap-4"
|
|
|
238
238
|
], 64)) : c("", !0),
|
|
239
239
|
r(t(e.value.shippingInfo.state) + " " + t(e.value.shippingInfo.zip), 1)
|
|
240
240
|
])) : c("", !0),
|
|
241
|
-
e.value.shippingInfo.country ? (o(), a("p",
|
|
242
|
-
s("div",
|
|
241
|
+
e.value.shippingInfo.country ? (o(), a("p", le, t(e.value.shippingInfo.country), 1)) : c("", !0),
|
|
242
|
+
s("div", ne, [
|
|
243
243
|
e.value.shippingInfo.email ? (o(), a("p", ie, t(e.value.shippingInfo.email), 1)) : c("", !0),
|
|
244
244
|
e.value.shippingInfo.phone ? (o(), a("p", de, t(e.value.shippingInfo.phone), 1)) : c("", !0)
|
|
245
245
|
])
|
|
@@ -247,13 +247,13 @@ const S = { class: "flex flex-col sm:flex-row justify-between items-start gap-4"
|
|
|
247
247
|
])) : c("", !0)
|
|
248
248
|
], 2),
|
|
249
249
|
s("div", {
|
|
250
|
-
class:
|
|
250
|
+
class: n(["border border-border rounded-lg overflow-x-auto", l.compact ? "mb-5" : "mb-6"])
|
|
251
251
|
}, [
|
|
252
252
|
s("table", {
|
|
253
|
-
class:
|
|
253
|
+
class: n(["invoice-table", l.compact ? "text-xs" : "text-sm"])
|
|
254
254
|
}, [
|
|
255
255
|
s("thead", {
|
|
256
|
-
class:
|
|
256
|
+
class: n(["invoice-thead uppercase", l.compact ? "text-[9px]" : "text-[10px]"])
|
|
257
257
|
}, [
|
|
258
258
|
s("tr", null, [
|
|
259
259
|
s("th", ue, t(d.value.item || "Product"), 1),
|
|
@@ -273,7 +273,7 @@ const S = { class: "flex flex-col sm:flex-row justify-between items-start gap-4"
|
|
|
273
273
|
s("div", ye, [
|
|
274
274
|
i.thumbnail ? (o(), a("div", {
|
|
275
275
|
key: 0,
|
|
276
|
-
class:
|
|
276
|
+
class: n(["shrink-0 overflow-hidden border border-border", l.compact ? "w-9 h-9 rounded-md" : "w-10 h-10 rounded-lg"])
|
|
277
277
|
}, [
|
|
278
278
|
u(k, {
|
|
279
279
|
src: i.thumbnail,
|
|
@@ -292,7 +292,7 @@ const S = { class: "flex flex-col sm:flex-row justify-between items-start gap-4"
|
|
|
292
292
|
class: "text-xs uppercase tracking-widest text-muted-foreground font-medium truncate mt-0.5",
|
|
293
293
|
title: i.sku
|
|
294
294
|
}, t(d.value.sku || "SKU") + ": " + t(i.sku), 9, ke)) : c("", !0),
|
|
295
|
-
i.description && !
|
|
295
|
+
i.description && !l.compact ? (o(), a("span", Ie, t(i.description), 1)) : c("", !0)
|
|
296
296
|
])
|
|
297
297
|
])
|
|
298
298
|
]),
|
|
@@ -324,50 +324,50 @@ const S = { class: "flex flex-col sm:flex-row justify-between items-start gap-4"
|
|
|
324
324
|
], 2)
|
|
325
325
|
], 2),
|
|
326
326
|
s("div", {
|
|
327
|
-
class:
|
|
327
|
+
class: n(["flex flex-col-reverse md:flex-row justify-between items-start", l.compact ? "gap-5" : "gap-6"])
|
|
328
328
|
}, [
|
|
329
329
|
s("div", {
|
|
330
|
-
class:
|
|
330
|
+
class: n(["w-full md:w-1/2 flex flex-col", l.compact ? "gap-3" : "gap-4"])
|
|
331
331
|
}, [
|
|
332
332
|
s("div", Se, [
|
|
333
333
|
e.value.qrcode ? (o(), a("div", $e, [
|
|
334
334
|
u(m(N), {
|
|
335
335
|
value: e.value.qrcode,
|
|
336
|
-
size:
|
|
336
|
+
size: e.value.qrcodeSize ?? (l.compact ? 56 : 72)
|
|
337
337
|
}, null, 8, ["value", "size"])
|
|
338
338
|
])) : c("", !0),
|
|
339
339
|
e.value.barcode ? (o(), a("div", Me, [
|
|
340
340
|
u(m(T), {
|
|
341
341
|
value: e.value.barcode,
|
|
342
342
|
format: "CODE128",
|
|
343
|
-
height:
|
|
344
|
-
width:
|
|
345
|
-
"display-value":
|
|
343
|
+
height: l.compact ? 28 : 40,
|
|
344
|
+
width: l.compact ? 1.3 : 1.5,
|
|
345
|
+
"display-value": l.displayBarcodeValue
|
|
346
346
|
}, null, 8, ["value", "height", "width", "display-value"])
|
|
347
347
|
])) : c("", !0)
|
|
348
348
|
]),
|
|
349
|
-
e.value.notes ? (o(), a("div",
|
|
349
|
+
e.value.notes ? (o(), a("div", qe, [
|
|
350
350
|
s("h4", {
|
|
351
|
-
class:
|
|
351
|
+
class: n(["font-bold text-muted-foreground uppercase tracking-widest mb-1.5", l.compact ? "text-[9px]" : "text-[10px]"])
|
|
352
352
|
}, t(d.value.notes || "Notes & Terms"), 3),
|
|
353
353
|
s("div", {
|
|
354
|
-
class:
|
|
354
|
+
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"])
|
|
355
355
|
}, t(e.value.notes), 3)
|
|
356
356
|
])) : c("", !0)
|
|
357
357
|
], 2),
|
|
358
|
-
s("div",
|
|
358
|
+
s("div", Ce, [
|
|
359
359
|
u(B, {
|
|
360
360
|
totals: e.value.totals,
|
|
361
|
-
compact:
|
|
361
|
+
compact: l.compact,
|
|
362
362
|
variant: "Variant4"
|
|
363
363
|
}, null, 8, ["totals", "compact"])
|
|
364
364
|
])
|
|
365
365
|
], 2)
|
|
366
366
|
], 2),
|
|
367
367
|
s("div", {
|
|
368
|
-
class:
|
|
368
|
+
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]"])
|
|
369
369
|
}, [
|
|
370
|
-
e.value.footerText ? (o(), a("span",
|
|
370
|
+
e.value.footerText ? (o(), a("span", Le, t(e.value.footerText), 1)) : (o(), a("span", je, "Thank you for your business"))
|
|
371
371
|
], 2)
|
|
372
372
|
], 4));
|
|
373
373
|
}
|
|
@@ -83,6 +83,8 @@ export interface InvoiceData {
|
|
|
83
83
|
barcode?: string;
|
|
84
84
|
/** A QR Code string */
|
|
85
85
|
qrcode?: string;
|
|
86
|
+
/** Overrides the visual variant's default QR display size. */
|
|
87
|
+
qrcodeSize?: number;
|
|
86
88
|
/** Additional notes at the bottom of the invoice */
|
|
87
89
|
notes?: string;
|
|
88
90
|
/** Footer text, usually for terms and conditions */
|
|
@@ -1,15 +1,9 @@
|
|
|
1
|
-
|
|
2
|
-
value?: string;
|
|
3
|
-
imageUrl?: string;
|
|
4
|
-
size?: number | string;
|
|
5
|
-
margin?: number;
|
|
6
|
-
color?: {
|
|
7
|
-
dark?: string;
|
|
8
|
-
light?: string;
|
|
9
|
-
};
|
|
10
|
-
}
|
|
1
|
+
import { QRCodeProps } from './types';
|
|
11
2
|
declare const _default: import('vue').DefineComponent<QRCodeProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<QRCodeProps> & Readonly<{}>, {
|
|
3
|
+
alt: string;
|
|
12
4
|
size: number | string;
|
|
13
5
|
margin: number;
|
|
6
|
+
scale: number;
|
|
7
|
+
errorCorrectionLevel: import('./types').QRCodeErrorCorrectionLevel;
|
|
14
8
|
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
|
|
15
9
|
export default _default;
|
|
@@ -1,38 +1,68 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import
|
|
3
|
-
const
|
|
1
|
+
import { defineComponent as h, ref as v, computed as c, watchEffect as y, openBlock as s, createElementBlock as u, normalizeStyle as x, toDisplayString as z, createCommentVNode as C } from "vue";
|
|
2
|
+
import _ from "qrcode";
|
|
3
|
+
const U = ["src", "alt"], k = {
|
|
4
|
+
key: 1,
|
|
5
|
+
class: "text-[10px] text-danger text-center leading-tight px-1"
|
|
6
|
+
}, R = /* @__PURE__ */ h({
|
|
4
7
|
__name: "QRCode",
|
|
5
8
|
props: {
|
|
6
9
|
value: {},
|
|
7
10
|
imageUrl: {},
|
|
8
11
|
size: { default: 200 },
|
|
9
12
|
margin: { default: 4 },
|
|
13
|
+
scale: { default: 4 },
|
|
14
|
+
errorCorrectionLevel: { default: "M" },
|
|
15
|
+
alt: { default: "QR Code" },
|
|
10
16
|
color: {}
|
|
11
17
|
},
|
|
12
|
-
setup(
|
|
13
|
-
const e =
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
18
|
+
setup(f) {
|
|
19
|
+
const e = f, n = v(""), r = v("");
|
|
20
|
+
let o = 0;
|
|
21
|
+
const l = c(() => {
|
|
22
|
+
const t = e.value || "";
|
|
23
|
+
return /^data:image\//i.test(t) ? t : "";
|
|
24
|
+
});
|
|
25
|
+
y(async () => {
|
|
26
|
+
const t = ++o;
|
|
27
|
+
n.value = "", r.value = "";
|
|
28
|
+
const i = e.value?.trim() || "", p = e.imageUrl || l.value;
|
|
29
|
+
if (!i || p) return;
|
|
30
|
+
const m = {
|
|
31
|
+
errorCorrectionLevel: e.errorCorrectionLevel,
|
|
32
|
+
margin: e.margin,
|
|
33
|
+
color: {
|
|
34
|
+
dark: e.color?.dark || "#000000ff",
|
|
35
|
+
light: e.color?.light || "#ffffffff"
|
|
36
|
+
}
|
|
37
|
+
};
|
|
38
|
+
typeof e.size == "number" && (m.width = e.size * e.scale);
|
|
39
|
+
try {
|
|
40
|
+
const a = await _.toDataURL(i, m);
|
|
41
|
+
t === o && (n.value = a);
|
|
42
|
+
} catch (a) {
|
|
43
|
+
t === o && (r.value = a instanceof Error ? a.message : "Failed to render QR code");
|
|
44
|
+
}
|
|
45
|
+
});
|
|
46
|
+
const d = c(() => e.imageUrl ? e.imageUrl : l.value ? l.value : n.value), g = c(() => {
|
|
17
47
|
const t = typeof e.size == "number" ? `${e.size}px` : e.size;
|
|
18
48
|
return {
|
|
19
49
|
width: t,
|
|
20
50
|
height: t
|
|
21
51
|
};
|
|
22
52
|
});
|
|
23
|
-
return (t,
|
|
53
|
+
return (t, i) => (s(), u("div", {
|
|
24
54
|
class: "inline-flex justify-center items-center max-w-full",
|
|
25
|
-
style:
|
|
55
|
+
style: x(g.value)
|
|
26
56
|
}, [
|
|
27
|
-
|
|
57
|
+
d.value ? (s(), u("img", {
|
|
28
58
|
key: 0,
|
|
29
|
-
src:
|
|
30
|
-
alt:
|
|
59
|
+
src: d.value,
|
|
60
|
+
alt: f.alt,
|
|
31
61
|
class: "w-full h-full object-contain pointer-events-none"
|
|
32
|
-
}, null, 8,
|
|
62
|
+
}, null, 8, U)) : r.value ? (s(), u("span", k, z(r.value), 1)) : C("", !0)
|
|
33
63
|
], 4));
|
|
34
64
|
}
|
|
35
65
|
});
|
|
36
66
|
export {
|
|
37
|
-
|
|
67
|
+
R as default
|
|
38
68
|
};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
export type QRCodeErrorCorrectionLevel = 'L' | 'M' | 'Q' | 'H';
|
|
2
|
+
export interface QRCodeProps {
|
|
3
|
+
value?: string;
|
|
4
|
+
imageUrl?: string;
|
|
5
|
+
size?: number | string;
|
|
6
|
+
margin?: number;
|
|
7
|
+
scale?: number;
|
|
8
|
+
errorCorrectionLevel?: QRCodeErrorCorrectionLevel;
|
|
9
|
+
alt?: string;
|
|
10
|
+
color?: {
|
|
11
|
+
dark?: string;
|
|
12
|
+
light?: string;
|
|
13
|
+
};
|
|
14
|
+
}
|
|
@@ -25,10 +25,10 @@ declare const __VLS_component: import('vue').DefineComponent<ScaleGeneratorProps
|
|
|
25
25
|
maxWidth: number;
|
|
26
26
|
contentClass: string;
|
|
27
27
|
enabled: boolean;
|
|
28
|
+
scale: number | null;
|
|
28
29
|
targetWidth: number;
|
|
29
30
|
minScale: number;
|
|
30
31
|
maxScale: number;
|
|
31
|
-
scale: number | null;
|
|
32
32
|
isEditMode: boolean;
|
|
33
33
|
horizontalAlign: ScaleHorizontalAlign;
|
|
34
34
|
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
|
package/package.json
CHANGED
|
File without changes
|
|
File without changes
|