vlite3 1.4.3 → 1.4.5
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/AppShell/AppShellLayoutStorefront.vue.js +2 -2
- package/components/AvatarUploader/AvatarUploader.vue.d.ts +2 -2
- package/components/Cart/Cart.vue.d.ts +27 -0
- package/components/Cart/Cart.vue.js +242 -0
- package/components/Cart/Cart.vue2.js +4 -0
- package/components/Cart/CartCouponInput.vue.d.ts +32 -0
- package/components/Cart/CartCouponInput.vue.js +176 -0
- package/components/Cart/CartCouponInput.vue2.js +4 -0
- package/components/Cart/CartEmptyState.vue.d.ts +17 -0
- package/components/Cart/CartEmptyState.vue.js +48 -0
- package/components/Cart/CartEmptyState.vue2.js +4 -0
- package/components/Cart/CartLineItem.vue.d.ts +29 -0
- package/components/Cart/CartLineItem.vue.js +341 -0
- package/components/Cart/CartLineItem.vue2.js +4 -0
- package/components/Cart/CartSummary.vue.d.ts +29 -0
- package/components/Cart/CartSummary.vue.js +157 -0
- package/components/Cart/CartSummary.vue2.js +4 -0
- package/components/Cart/CartVariant1.vue.d.ts +42 -0
- package/components/Cart/CartVariant1.vue.js +156 -0
- package/components/Cart/CartVariant1.vue2.js +4 -0
- package/components/Cart/CartVariant2.vue.d.ts +42 -0
- package/components/Cart/CartVariant2.vue.js +154 -0
- package/components/Cart/CartVariant2.vue2.js +4 -0
- package/components/Cart/CartVariant3.vue.d.ts +41 -0
- package/components/Cart/CartVariant3.vue.js +192 -0
- package/components/Cart/CartVariant3.vue2.js +4 -0
- package/components/Cart/CartVariant4.vue.d.ts +41 -0
- package/components/Cart/CartVariant4.vue.js +145 -0
- package/components/Cart/CartVariant4.vue2.js +4 -0
- package/components/Cart/composables/useCart.d.ts +46 -0
- package/components/Cart/composables/useCart.js +110 -0
- package/components/Cart/composables/useCartCalculation.d.ts +91 -0
- package/components/Cart/composables/useCartCalculation.js +145 -0
- package/components/Cart/index.d.ts +9 -0
- package/components/Cart/types.d.ts +391 -0
- package/components/CategoryManager/CategoryManager.vue.d.ts +2 -2
- package/components/CategoryManager/CategoryManager.vue.js +3 -3
- package/components/CategoryManager/CategoryManager.vue2.js +224 -248
- package/components/CategoryManager/utils.d.ts +3 -0
- package/components/CategoryManager/utils.js +31 -0
- package/components/CategoryMenu/CategoryMenu.vue.d.ts +2 -0
- package/components/CategoryMenu/CategoryMenu.vue.js +46 -40
- package/components/CategoryMenu/CategoryMenuVariant1.vue.d.ts +5 -1
- package/components/CategoryMenu/CategoryMenuVariant1.vue.js +5 -144
- package/components/CategoryMenu/CategoryMenuVariant1.vue2.js +220 -2
- package/components/CategoryMenu/CategoryMenuVariant2.vue.d.ts +5 -1
- package/components/CategoryMenu/CategoryMenuVariant2.vue.js +5 -160
- package/components/CategoryMenu/CategoryMenuVariant2.vue2.js +235 -2
- package/components/CategoryMenu/types.d.ts +5 -2
- package/components/Clipboard.vue.d.ts +2 -2
- package/components/Dropdown/Dropdown.vue.d.ts +1 -0
- package/components/Dropdown/Dropdown.vue.js +31 -29
- package/components/FilePicker/FilePicker.vue.d.ts +2 -2
- package/components/FilePicker/FilePicker.vue.js +278 -202
- package/components/Form/CustomFields.vue.d.ts +4 -0
- package/components/Form/CustomFields.vue.js +2 -2
- package/components/Form/CustomFields.vue2.js +349 -145
- package/components/Form/FormField.vue.d.ts +1 -1
- package/components/Form/FormField.vue.js +1 -1
- package/components/Form/types.d.ts +3 -0
- package/components/Modal.vue.d.ts +2 -0
- package/components/Modal.vue.js +1 -1
- package/components/Modal.vue2.js +30 -28
- package/components/OTPInput/OTPInput.vue.d.ts +1 -1
- package/components/Rating/Rating.vue.d.ts +1 -1
- package/components/Screen/ScreenFilter.vue.js +3 -2
- package/components/SidePanel.vue.d.ts +2 -0
- package/components/SidePanel.vue.js +1 -1
- package/components/SidePanel.vue2.js +25 -23
- package/components/SidebarMenu/SidebarMenu.vue.js +145 -128
- package/components/index.d.ts +1 -0
- package/core/config.d.ts +128 -0
- package/index.d.ts +1 -0
- package/index.js +327 -306
- package/package.json +1 -1
- package/style.css +1 -1
- package/types/config.type.d.ts +2 -0
|
@@ -0,0 +1,341 @@
|
|
|
1
|
+
import { defineComponent as D, computed as o, openBlock as a, createElementBlock as l, normalizeClass as t, createCommentVNode as s, createElementVNode as i, toDisplayString as u, createBlock as v, unref as d, createVNode as c, Fragment as R, createTextVNode as I } from "vue";
|
|
2
|
+
import r from "../Price/Price.vue.js";
|
|
3
|
+
import m from "../Button.vue.js";
|
|
4
|
+
const M = ["src", "alt"], P = { class: "flex-1 min-w-0 flex flex-col gap-0.5" }, T = ["title"], E = {
|
|
5
|
+
key: 0,
|
|
6
|
+
class: "text-muted-foreground uppercase tracking-wider font-medium"
|
|
7
|
+
}, F = { class: "flex items-center justify-between gap-2 mt-1.5" }, $ = { class: "flex items-center gap-1.5" }, L = ["value", "aria-label"], O = { class: "flex-1 min-w-0" }, A = {
|
|
8
|
+
key: 0,
|
|
9
|
+
class: "text-muted-foreground uppercase tracking-wider"
|
|
10
|
+
}, G = {
|
|
11
|
+
key: 1,
|
|
12
|
+
class: "text-muted-foreground"
|
|
13
|
+
}, H = { class: "text-muted-foreground tabular-nums" }, J = {
|
|
14
|
+
key: 0,
|
|
15
|
+
class: "inline-flex items-center rounded border border-input bg-background overflow-hidden h-6"
|
|
16
|
+
}, K = { class: "w-6 text-center text-[11px] font-semibold tabular-nums" }, U = {
|
|
17
|
+
key: 1,
|
|
18
|
+
class: "text-xs font-semibold tabular-nums text-foreground"
|
|
19
|
+
}, W = ["src", "alt"], X = { class: "flex-1 min-w-0 flex flex-col gap-1.5" }, Y = { class: "flex items-start justify-between gap-2" }, Z = { class: "min-w-0 flex-1" }, _ = {
|
|
20
|
+
key: 0,
|
|
21
|
+
class: "text-muted-foreground uppercase tracking-wider font-medium"
|
|
22
|
+
}, ee = {
|
|
23
|
+
key: 1,
|
|
24
|
+
class: "inline-flex items-center px-1.5 py-0.5 rounded bg-muted text-muted-foreground font-medium"
|
|
25
|
+
}, te = { class: "flex items-center justify-between" }, ae = { class: "flex items-center gap-2" }, ie = { class: "flex items-center gap-1.5" }, ne = ["value", "aria-label"], le = { class: "flex-1 min-w-0" }, oe = /* @__PURE__ */ D({
|
|
26
|
+
__name: "CartLineItem",
|
|
27
|
+
props: {
|
|
28
|
+
item: {},
|
|
29
|
+
features: {},
|
|
30
|
+
labels: {},
|
|
31
|
+
compact: { type: Boolean, default: !1 },
|
|
32
|
+
readonly: { type: Boolean, default: !1 },
|
|
33
|
+
layout: { default: "drawer" }
|
|
34
|
+
},
|
|
35
|
+
emits: ["update:quantity", "remove"],
|
|
36
|
+
setup(e, { emit: B }) {
|
|
37
|
+
const n = e, b = B, f = o(() => n.labels || {}), p = o(() => n.features.thumbnails && n.layout !== "compact" && n.layout !== "mini"), N = o(() => n.features.description && !n.compact), q = o(() => n.features.sku), g = o(() => n.features.itemVariant && !!n.item.variant), z = o(() => n.features.editableQuantity && !n.readonly), h = o(() => n.features.removable && !n.readonly), y = o(() => n.item.maxQuantity !== void 0 && n.item.quantity >= n.item.maxQuantity), k = o(() => n.item.quantity <= 1), C = o(() => (n.item.price || 0) * (n.item.quantity || 0));
|
|
38
|
+
function j() {
|
|
39
|
+
y.value || b("update:quantity", n.item.id, n.item.quantity + 1);
|
|
40
|
+
}
|
|
41
|
+
function Q() {
|
|
42
|
+
k.value || b("update:quantity", n.item.id, n.item.quantity - 1);
|
|
43
|
+
}
|
|
44
|
+
function S(V) {
|
|
45
|
+
const x = Number(V.target.value);
|
|
46
|
+
Number.isFinite(x) && x > 0 && b("update:quantity", n.item.id, Math.floor(x));
|
|
47
|
+
}
|
|
48
|
+
function w() {
|
|
49
|
+
b("remove", n.item.id);
|
|
50
|
+
}
|
|
51
|
+
return (V, x) => e.layout === "drawer" ? (a(), l("div", {
|
|
52
|
+
key: 0,
|
|
53
|
+
class: t(["v-cart-line flex gap-3 items-start", [e.item.inStock === !1 ? "opacity-60" : "", e.compact ? "py-2" : "py-3"]])
|
|
54
|
+
}, [
|
|
55
|
+
p.value ? (a(), l("div", {
|
|
56
|
+
key: 0,
|
|
57
|
+
class: t(["shrink-0 overflow-hidden border border-border bg-muted", e.compact ? "w-12 h-12 rounded" : "w-16 h-16 rounded-md"])
|
|
58
|
+
}, [
|
|
59
|
+
e.item.thumbnail ? (a(), l("img", {
|
|
60
|
+
key: 0,
|
|
61
|
+
src: e.item.thumbnail,
|
|
62
|
+
alt: e.item.name,
|
|
63
|
+
class: "w-full h-full object-cover"
|
|
64
|
+
}, null, 8, M)) : s("", !0)
|
|
65
|
+
], 2)) : s("", !0),
|
|
66
|
+
i("div", P, [
|
|
67
|
+
i("p", {
|
|
68
|
+
class: t(["font-semibold text-foreground leading-tight truncate", e.compact ? "text-xs" : "text-sm"]),
|
|
69
|
+
title: e.item.name
|
|
70
|
+
}, u(e.item.name), 11, T),
|
|
71
|
+
N.value && e.item.description ? (a(), l("p", {
|
|
72
|
+
key: 0,
|
|
73
|
+
class: t(["text-muted-foreground leading-snug line-clamp-1", e.compact ? "text-[10px]" : "text-xs"])
|
|
74
|
+
}, u(e.item.description), 3)) : s("", !0),
|
|
75
|
+
i("div", {
|
|
76
|
+
class: t(["flex items-center gap-2 flex-wrap", e.compact ? "text-[10px] mt-0.5" : "text-xs mt-1"])
|
|
77
|
+
}, [
|
|
78
|
+
q.value && e.item.sku ? (a(), l("span", E, u(e.item.sku), 1)) : s("", !0),
|
|
79
|
+
g.value ? (a(), l("span", {
|
|
80
|
+
key: 1,
|
|
81
|
+
class: t(["inline-flex items-center px-1.5 py-0.5 rounded bg-muted text-muted-foreground font-medium", e.compact ? "text-[9px]" : "text-[10px]"])
|
|
82
|
+
}, u(e.item.variant), 3)) : s("", !0),
|
|
83
|
+
e.item.inStock === !1 ? (a(), l("span", {
|
|
84
|
+
key: 2,
|
|
85
|
+
class: t(["inline-flex items-center px-1.5 py-0.5 rounded bg-danger-light text-danger font-semibold uppercase tracking-wider", e.compact ? "text-[9px]" : "text-[10px]"])
|
|
86
|
+
}, " Out of stock ", 2)) : s("", !0)
|
|
87
|
+
], 2),
|
|
88
|
+
i("div", F, [
|
|
89
|
+
i("div", {
|
|
90
|
+
class: t(["flex items-center gap-1.5", e.compact ? "text-xs" : "text-sm"])
|
|
91
|
+
}, [
|
|
92
|
+
e.item.originalPrice && e.item.originalPrice > e.item.price ? (a(), v(d(r), {
|
|
93
|
+
key: 0,
|
|
94
|
+
value: e.item.originalPrice,
|
|
95
|
+
class: t(["text-muted-foreground line-through tabular-nums", e.compact ? "text-[10px]" : "text-xs"])
|
|
96
|
+
}, null, 8, ["value", "class"])) : s("", !0),
|
|
97
|
+
c(d(r), {
|
|
98
|
+
value: e.item.price,
|
|
99
|
+
class: t(["font-bold text-foreground tabular-nums", e.compact ? "text-xs" : "text-sm"])
|
|
100
|
+
}, null, 8, ["value", "class"])
|
|
101
|
+
], 2),
|
|
102
|
+
i("div", $, [
|
|
103
|
+
z.value ? (a(), l("div", {
|
|
104
|
+
key: 0,
|
|
105
|
+
class: t(["inline-flex items-center rounded border border-input bg-background overflow-hidden", e.compact ? "h-6" : "h-7"])
|
|
106
|
+
}, [
|
|
107
|
+
c(m, {
|
|
108
|
+
variant: "ghost",
|
|
109
|
+
rounded: "none",
|
|
110
|
+
size: e.compact ? "xs" : "sm",
|
|
111
|
+
icon: "lucide:minus",
|
|
112
|
+
class: "!h-full !px-1.5",
|
|
113
|
+
disabled: k.value,
|
|
114
|
+
"aria-label": "Decrease quantity",
|
|
115
|
+
onClick: Q
|
|
116
|
+
}, null, 8, ["size", "disabled"]),
|
|
117
|
+
i("input", {
|
|
118
|
+
type: "text",
|
|
119
|
+
inputmode: "numeric",
|
|
120
|
+
class: t(["w-7 text-center bg-transparent border-0 outline-none text-foreground font-semibold tabular-nums", e.compact ? "text-[11px]" : "text-xs"]),
|
|
121
|
+
value: e.item.quantity,
|
|
122
|
+
"aria-label": f.value.quantity || "Quantity",
|
|
123
|
+
onChange: S
|
|
124
|
+
}, null, 42, L),
|
|
125
|
+
c(m, {
|
|
126
|
+
variant: "ghost",
|
|
127
|
+
rounded: "none",
|
|
128
|
+
size: e.compact ? "xs" : "sm",
|
|
129
|
+
icon: "lucide:plus",
|
|
130
|
+
class: "!h-full !px-1.5",
|
|
131
|
+
disabled: y.value,
|
|
132
|
+
"aria-label": "Increase quantity",
|
|
133
|
+
onClick: j
|
|
134
|
+
}, null, 8, ["size", "disabled"])
|
|
135
|
+
], 2)) : (a(), l("span", {
|
|
136
|
+
key: 1,
|
|
137
|
+
class: t(["inline-flex items-center justify-center px-2 rounded bg-muted text-foreground font-semibold tabular-nums", [e.compact ? "h-6 text-[11px]" : "h-7 text-xs"]])
|
|
138
|
+
}, " ×" + u(e.item.quantity), 3)),
|
|
139
|
+
h.value ? (a(), v(m, {
|
|
140
|
+
key: 2,
|
|
141
|
+
variant: "ghost",
|
|
142
|
+
size: e.compact ? "xs" : "sm",
|
|
143
|
+
icon: "lucide:trash-2",
|
|
144
|
+
"aria-label": f.value.remove || "Remove",
|
|
145
|
+
onClick: w
|
|
146
|
+
}, null, 8, ["size", "aria-label"])) : s("", !0)
|
|
147
|
+
])
|
|
148
|
+
])
|
|
149
|
+
])
|
|
150
|
+
], 2)) : e.layout === "compact" ? (a(), l("div", {
|
|
151
|
+
key: 1,
|
|
152
|
+
class: t(["v-cart-line flex items-center gap-2", e.compact ? "py-1.5" : "py-2"])
|
|
153
|
+
}, [
|
|
154
|
+
i("div", O, [
|
|
155
|
+
i("p", {
|
|
156
|
+
class: t(["font-semibold text-foreground leading-tight truncate", e.compact ? "text-xs" : "text-sm"])
|
|
157
|
+
}, u(e.item.name), 3),
|
|
158
|
+
i("div", {
|
|
159
|
+
class: t(["flex items-center gap-1.5", e.compact ? "text-[10px] mt-0.5" : "text-xs mt-0.5"])
|
|
160
|
+
}, [
|
|
161
|
+
q.value && e.item.sku ? (a(), l("span", A, u(e.item.sku), 1)) : s("", !0),
|
|
162
|
+
g.value ? (a(), l("span", G, "· " + u(e.item.variant), 1)) : s("", !0),
|
|
163
|
+
x[0] || (x[0] = i("span", { class: "text-muted-foreground" }, "·", -1)),
|
|
164
|
+
i("span", H, [
|
|
165
|
+
c(d(r), {
|
|
166
|
+
value: e.item.price,
|
|
167
|
+
class: "text-muted-foreground"
|
|
168
|
+
}, null, 8, ["value"])
|
|
169
|
+
])
|
|
170
|
+
], 2)
|
|
171
|
+
]),
|
|
172
|
+
z.value ? (a(), l("div", J, [
|
|
173
|
+
c(m, {
|
|
174
|
+
variant: "ghost",
|
|
175
|
+
rounded: "none",
|
|
176
|
+
size: "xs",
|
|
177
|
+
icon: "lucide:minus",
|
|
178
|
+
class: "!w-6 !h-full !px-0",
|
|
179
|
+
disabled: k.value,
|
|
180
|
+
"aria-label": "Decrease",
|
|
181
|
+
onClick: Q
|
|
182
|
+
}, null, 8, ["disabled"]),
|
|
183
|
+
i("span", K, u(e.item.quantity), 1),
|
|
184
|
+
c(m, {
|
|
185
|
+
variant: "ghost",
|
|
186
|
+
rounded: "none",
|
|
187
|
+
size: "xs",
|
|
188
|
+
icon: "lucide:plus",
|
|
189
|
+
class: "!w-6 !h-full !px-0",
|
|
190
|
+
disabled: y.value,
|
|
191
|
+
"aria-label": "Increase",
|
|
192
|
+
onClick: j
|
|
193
|
+
}, null, 8, ["disabled"])
|
|
194
|
+
])) : (a(), l("span", U, "×" + u(e.item.quantity), 1)),
|
|
195
|
+
c(d(r), {
|
|
196
|
+
value: C.value,
|
|
197
|
+
class: t(["font-bold text-foreground tabular-nums shrink-0 w-16 text-right", e.compact ? "text-xs" : "text-sm"])
|
|
198
|
+
}, null, 8, ["value", "class"]),
|
|
199
|
+
h.value ? (a(), v(m, {
|
|
200
|
+
key: 2,
|
|
201
|
+
variant: "ghost",
|
|
202
|
+
size: "xs",
|
|
203
|
+
icon: "lucide:x",
|
|
204
|
+
class: "!w-6 !h-6",
|
|
205
|
+
"aria-label": f.value.remove || "Remove",
|
|
206
|
+
onClick: w
|
|
207
|
+
}, null, 8, ["aria-label"])) : s("", !0)
|
|
208
|
+
], 2)) : e.layout === "card" ? (a(), l("div", {
|
|
209
|
+
key: 2,
|
|
210
|
+
class: t(["v-cart-line flex gap-3 p-3 border border-border", [e.item.inStock === !1 ? "opacity-60" : "", e.compact ? "p-2" : ""]])
|
|
211
|
+
}, [
|
|
212
|
+
p.value ? (a(), l("div", {
|
|
213
|
+
key: 0,
|
|
214
|
+
class: t(["shrink-0 overflow-hidden border border-border bg-muted rounded-md", e.compact ? "w-14 h-14" : "w-20 h-20"])
|
|
215
|
+
}, [
|
|
216
|
+
e.item.thumbnail ? (a(), l("img", {
|
|
217
|
+
key: 0,
|
|
218
|
+
src: e.item.thumbnail,
|
|
219
|
+
alt: e.item.name,
|
|
220
|
+
class: "w-full h-full object-cover"
|
|
221
|
+
}, null, 8, W)) : s("", !0)
|
|
222
|
+
], 2)) : s("", !0),
|
|
223
|
+
i("div", X, [
|
|
224
|
+
i("div", Y, [
|
|
225
|
+
i("div", Z, [
|
|
226
|
+
i("p", {
|
|
227
|
+
class: t(["font-semibold text-foreground leading-tight", e.compact ? "text-xs" : "text-sm"])
|
|
228
|
+
}, u(e.item.name), 3),
|
|
229
|
+
N.value && e.item.description ? (a(), l("p", {
|
|
230
|
+
key: 0,
|
|
231
|
+
class: t(["text-muted-foreground line-clamp-2 leading-snug", e.compact ? "text-[10px] mt-0.5" : "text-xs mt-1"])
|
|
232
|
+
}, u(e.item.description), 3)) : s("", !0),
|
|
233
|
+
i("div", {
|
|
234
|
+
class: t(["flex items-center gap-2 flex-wrap", e.compact ? "text-[10px] mt-1" : "text-xs mt-1.5"])
|
|
235
|
+
}, [
|
|
236
|
+
q.value && e.item.sku ? (a(), l("span", _, u(e.item.sku), 1)) : s("", !0),
|
|
237
|
+
g.value ? (a(), l("span", ee, u(e.item.variant), 1)) : s("", !0)
|
|
238
|
+
], 2)
|
|
239
|
+
]),
|
|
240
|
+
c(d(r), {
|
|
241
|
+
value: C.value,
|
|
242
|
+
class: t(["font-extrabold text-foreground tabular-nums shrink-0", e.compact ? "text-sm" : "text-base"])
|
|
243
|
+
}, null, 8, ["value", "class"])
|
|
244
|
+
]),
|
|
245
|
+
i("div", te, [
|
|
246
|
+
i("div", ae, [
|
|
247
|
+
i("span", {
|
|
248
|
+
class: t(["text-muted-foreground tabular-nums", e.compact ? "text-[10px]" : "text-xs"])
|
|
249
|
+
}, [
|
|
250
|
+
c(d(r), {
|
|
251
|
+
value: e.item.price,
|
|
252
|
+
class: "text-muted-foreground"
|
|
253
|
+
}, null, 8, ["value"]),
|
|
254
|
+
e.item.quantity > 1 ? (a(), l(R, { key: 0 }, [
|
|
255
|
+
I(" × " + u(e.item.quantity), 1)
|
|
256
|
+
], 64)) : s("", !0)
|
|
257
|
+
], 2)
|
|
258
|
+
]),
|
|
259
|
+
i("div", ie, [
|
|
260
|
+
z.value ? (a(), l("div", {
|
|
261
|
+
key: 0,
|
|
262
|
+
class: t(["inline-flex items-center rounded border border-input bg-background overflow-hidden", e.compact ? "h-7" : "h-8"])
|
|
263
|
+
}, [
|
|
264
|
+
c(m, {
|
|
265
|
+
variant: "ghost",
|
|
266
|
+
rounded: "none",
|
|
267
|
+
size: e.compact ? "xs" : "sm",
|
|
268
|
+
icon: "lucide:minus",
|
|
269
|
+
class: "!w-7 !h-full !px-0",
|
|
270
|
+
disabled: k.value,
|
|
271
|
+
"aria-label": "Decrease",
|
|
272
|
+
onClick: Q
|
|
273
|
+
}, null, 8, ["size", "disabled"]),
|
|
274
|
+
i("input", {
|
|
275
|
+
type: "text",
|
|
276
|
+
inputmode: "numeric",
|
|
277
|
+
class: t(["w-8 text-center bg-transparent border-0 outline-none font-semibold tabular-nums", e.compact ? "text-xs" : "text-sm"]),
|
|
278
|
+
value: e.item.quantity,
|
|
279
|
+
"aria-label": f.value.quantity || "Quantity",
|
|
280
|
+
onChange: S
|
|
281
|
+
}, null, 42, ne),
|
|
282
|
+
c(m, {
|
|
283
|
+
variant: "ghost",
|
|
284
|
+
rounded: "none",
|
|
285
|
+
size: e.compact ? "xs" : "sm",
|
|
286
|
+
icon: "lucide:plus",
|
|
287
|
+
class: "!w-7 !h-full !px-0",
|
|
288
|
+
disabled: y.value,
|
|
289
|
+
"aria-label": "Increase",
|
|
290
|
+
onClick: j
|
|
291
|
+
}, null, 8, ["size", "disabled"])
|
|
292
|
+
], 2)) : (a(), l("span", {
|
|
293
|
+
key: 1,
|
|
294
|
+
class: t(["inline-flex items-center justify-center px-2 rounded bg-muted text-foreground font-semibold tabular-nums", [e.compact ? "h-7 text-xs" : "h-8 text-sm"]])
|
|
295
|
+
}, " ×" + u(e.item.quantity), 3)),
|
|
296
|
+
h.value ? (a(), v(m, {
|
|
297
|
+
key: 2,
|
|
298
|
+
variant: "ghost",
|
|
299
|
+
size: e.compact ? "sm" : "sm2",
|
|
300
|
+
icon: "lucide:trash-2",
|
|
301
|
+
"aria-label": f.value.remove || "Remove",
|
|
302
|
+
onClick: w
|
|
303
|
+
}, null, 8, ["size", "aria-label"])) : s("", !0)
|
|
304
|
+
])
|
|
305
|
+
])
|
|
306
|
+
])
|
|
307
|
+
], 2)) : (a(), l("div", {
|
|
308
|
+
key: 3,
|
|
309
|
+
class: t(["v-cart-line flex items-center justify-between gap-2", e.compact ? "py-1.5" : "py-2"])
|
|
310
|
+
}, [
|
|
311
|
+
i("div", le, [
|
|
312
|
+
i("p", {
|
|
313
|
+
class: t(["font-medium text-foreground leading-tight truncate", e.compact ? "text-xs" : "text-sm"])
|
|
314
|
+
}, u(e.item.name), 3),
|
|
315
|
+
g.value ? (a(), l("p", {
|
|
316
|
+
key: 0,
|
|
317
|
+
class: t(["text-muted-foreground", e.compact ? "text-[10px]" : "text-xs"])
|
|
318
|
+
}, u(e.item.variant), 3)) : s("", !0)
|
|
319
|
+
]),
|
|
320
|
+
i("span", {
|
|
321
|
+
class: t(["text-muted-foreground tabular-nums", e.compact ? "text-[10px]" : "text-xs"])
|
|
322
|
+
}, " ×" + u(e.item.quantity), 3),
|
|
323
|
+
c(d(r), {
|
|
324
|
+
value: C.value,
|
|
325
|
+
class: t(["font-semibold text-foreground tabular-nums shrink-0", e.compact ? "text-xs" : "text-sm"])
|
|
326
|
+
}, null, 8, ["value", "class"]),
|
|
327
|
+
h.value ? (a(), v(m, {
|
|
328
|
+
key: 0,
|
|
329
|
+
variant: "ghost",
|
|
330
|
+
size: "xs",
|
|
331
|
+
icon: "lucide:x",
|
|
332
|
+
class: "!w-5 !h-5 !min-w-5 !min-h-5",
|
|
333
|
+
"aria-label": "Remove",
|
|
334
|
+
onClick: w
|
|
335
|
+
})) : s("", !0)
|
|
336
|
+
], 2));
|
|
337
|
+
}
|
|
338
|
+
});
|
|
339
|
+
export {
|
|
340
|
+
oe as default
|
|
341
|
+
};
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { CartTotals, CartFeatures, CartLabels, CartVariant, CartCoupon } from './types';
|
|
2
|
+
/**
|
|
3
|
+
* Subtotal / Discount / Estimated Tax / Shipping / Grand Total renderer.
|
|
4
|
+
* Used by Variant1, Variant2, Variant3. Variant4 inlines its own summary
|
|
5
|
+
* to preserve the mini-cart look.
|
|
6
|
+
*
|
|
7
|
+
* Driven entirely by `features` — every row is conditionally rendered, so
|
|
8
|
+
* the same component can produce a single-line POS total or a full
|
|
9
|
+
* e-commerce summary without branching at the call site.
|
|
10
|
+
*
|
|
11
|
+
* Accepts the applied `coupon` (optional) so it can render the discount
|
|
12
|
+
* row as "Discount · WELCOME10" + "−$25.00" / "−10%". Also renders the
|
|
13
|
+
* free-shipping progress hint ("Add $X more for free shipping") when the
|
|
14
|
+
* totals carry a `freeShippingProgress` payload.
|
|
15
|
+
*/
|
|
16
|
+
type __VLS_Props = {
|
|
17
|
+
totals: CartTotals;
|
|
18
|
+
features: CartFeatures;
|
|
19
|
+
labels: CartLabels;
|
|
20
|
+
compact?: boolean;
|
|
21
|
+
variant?: CartVariant;
|
|
22
|
+
/** Currently applied coupon (for the discount-row caption + pill) */
|
|
23
|
+
coupon?: CartCoupon;
|
|
24
|
+
};
|
|
25
|
+
declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
|
|
26
|
+
variant: CartVariant;
|
|
27
|
+
compact: boolean;
|
|
28
|
+
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
|
|
29
|
+
export default _default;
|
|
@@ -0,0 +1,157 @@
|
|
|
1
|
+
import { defineComponent as S, computed as o, openBlock as n, createElementBlock as r, normalizeClass as a, createElementVNode as l, toDisplayString as c, createVNode as u, unref as d, createCommentVNode as m, createTextVNode as g, createBlock as T } from "vue";
|
|
2
|
+
import b from "../Icon.vue.js";
|
|
3
|
+
import f from "../Price/Price.vue.js";
|
|
4
|
+
const C = { class: "text-muted-foreground font-medium" }, $ = { class: "text-success font-medium inline-flex items-center gap-1.5 min-w-0" }, j = { class: "truncate" }, B = { class: "text-muted-foreground font-medium" }, E = { class: "text-foreground font-semibold tabular-nums" }, N = {
|
|
5
|
+
key: 0,
|
|
6
|
+
class: "text-success font-semibold"
|
|
7
|
+
}, D = { class: "text-muted-foreground font-medium" }, P = { class: "uppercase tracking-widest text-xs font-bold text-muted-foreground" }, F = { class: "text-success font-semibold inline-flex items-center gap-1.5" }, z = /* @__PURE__ */ S({
|
|
8
|
+
__name: "CartSummary",
|
|
9
|
+
props: {
|
|
10
|
+
totals: {},
|
|
11
|
+
features: {},
|
|
12
|
+
labels: {},
|
|
13
|
+
compact: { type: Boolean, default: !1 },
|
|
14
|
+
variant: { default: "Variant1" },
|
|
15
|
+
coupon: {}
|
|
16
|
+
},
|
|
17
|
+
setup(t) {
|
|
18
|
+
const e = t, s = o(() => e.labels || {}), h = o(() => s.value.estimatedTax ? s.value.estimatedTax : e.totals.taxRate !== void 0 ? `Estimated Tax (${e.totals.taxRate}%)` : "Estimated Tax");
|
|
19
|
+
o(() => {
|
|
20
|
+
const i = e.totals.itemCount ?? 0;
|
|
21
|
+
return i === 0 ? s.value.itemCount || "Items" : `${s.value.itemCount || "Items"} (${i})`;
|
|
22
|
+
});
|
|
23
|
+
const p = o(() => {
|
|
24
|
+
const i = e.coupon?.definition;
|
|
25
|
+
return i && i.type === "percentage" ? `−${i.value}%` : null;
|
|
26
|
+
}), y = o(() => e.coupon?.code ? `${s.value.discount || "Discount"} · ${e.coupon.code}` : s.value.discount || "Discount"), k = o(() => {
|
|
27
|
+
switch (e.variant) {
|
|
28
|
+
case "Variant2":
|
|
29
|
+
return e.compact ? "space-y-1.5 text-xs" : "space-y-2 text-sm";
|
|
30
|
+
case "Variant3":
|
|
31
|
+
return "space-y-2 text-sm";
|
|
32
|
+
case "Variant4":
|
|
33
|
+
return "space-y-1.5 text-sm";
|
|
34
|
+
default:
|
|
35
|
+
return e.compact ? "space-y-1.5" : "space-y-2.5";
|
|
36
|
+
}
|
|
37
|
+
}), x = o(() => (e.variant === "Variant2", e.compact ? "text-xs" : "text-sm")), w = o(() => {
|
|
38
|
+
switch (e.variant) {
|
|
39
|
+
case "Variant2":
|
|
40
|
+
return ["border-t border-dashed border-border pt-2 mt-1.5", e.compact ? "text-sm" : "text-base", "font-extrabold text-foreground"];
|
|
41
|
+
case "Variant3":
|
|
42
|
+
return ["border-t border-border pt-3 mt-1 text-base font-extrabold text-foreground"];
|
|
43
|
+
case "Variant4":
|
|
44
|
+
return ["border-t border-border pt-2 mt-1 text-base font-extrabold text-foreground"];
|
|
45
|
+
default:
|
|
46
|
+
return [
|
|
47
|
+
"border-t border-border pt-3 mt-1",
|
|
48
|
+
e.compact ? "text-base" : "text-lg",
|
|
49
|
+
"font-black text-foreground"
|
|
50
|
+
];
|
|
51
|
+
}
|
|
52
|
+
}), V = o(
|
|
53
|
+
() => e.features.shipping && e.totals.freeShippingProgress && e.totals.freeShippingProgress.remaining > 0
|
|
54
|
+
);
|
|
55
|
+
return (i, v) => (n(), r("div", {
|
|
56
|
+
class: a(["v-cart-summary", k.value])
|
|
57
|
+
}, [
|
|
58
|
+
t.features.subtotal ? (n(), r("div", {
|
|
59
|
+
key: 0,
|
|
60
|
+
class: a(["flex items-center justify-between gap-3", x.value])
|
|
61
|
+
}, [
|
|
62
|
+
l("span", C, c(s.value.subtotal || "Subtotal"), 1),
|
|
63
|
+
u(d(f), {
|
|
64
|
+
value: t.totals.subtotal,
|
|
65
|
+
class: "text-foreground font-semibold tabular-nums"
|
|
66
|
+
}, null, 8, ["value"])
|
|
67
|
+
], 2)) : m("", !0),
|
|
68
|
+
t.features.discount && t.totals.discount && t.totals.discount > 0 ? (n(), r("div", {
|
|
69
|
+
key: 1,
|
|
70
|
+
class: a(["flex items-center justify-between gap-3", x.value])
|
|
71
|
+
}, [
|
|
72
|
+
l("span", $, [
|
|
73
|
+
u(b, {
|
|
74
|
+
icon: "lucide:tag",
|
|
75
|
+
class: "w-3.5 h-3.5 shrink-0"
|
|
76
|
+
}),
|
|
77
|
+
l("span", j, c(y.value), 1),
|
|
78
|
+
p.value ? (n(), r("span", {
|
|
79
|
+
key: 0,
|
|
80
|
+
class: a(["inline-flex items-center px-1.5 py-0.5 rounded bg-success/10 text-success font-bold tabular-nums shrink-0", t.compact ? "text-[9px]" : "text-[10px]"])
|
|
81
|
+
}, c(p.value), 3)) : m("", !0)
|
|
82
|
+
]),
|
|
83
|
+
u(d(f), {
|
|
84
|
+
value: -t.totals.discount,
|
|
85
|
+
class: "text-success font-semibold tabular-nums"
|
|
86
|
+
}, null, 8, ["value"])
|
|
87
|
+
], 2)) : m("", !0),
|
|
88
|
+
V.value ? (n(), r("div", {
|
|
89
|
+
key: 2,
|
|
90
|
+
class: a(["flex items-center gap-1.5 text-muted-foreground", t.compact ? "text-[10px]" : "text-xs"])
|
|
91
|
+
}, [
|
|
92
|
+
u(b, {
|
|
93
|
+
icon: "lucide:truck",
|
|
94
|
+
class: a(t.compact ? "w-3 h-3" : "w-3.5 h-3.5")
|
|
95
|
+
}, null, 8, ["class"]),
|
|
96
|
+
l("span", null, [
|
|
97
|
+
v[0] || (v[0] = g(" Add ", -1)),
|
|
98
|
+
u(d(f), {
|
|
99
|
+
value: t.totals.freeShippingProgress.remaining,
|
|
100
|
+
class: "font-semibold text-foreground"
|
|
101
|
+
}, null, 8, ["value"]),
|
|
102
|
+
v[1] || (v[1] = g(" more for free shipping ", -1))
|
|
103
|
+
])
|
|
104
|
+
], 2)) : m("", !0),
|
|
105
|
+
t.features.shipping && t.totals.shipping !== void 0 ? (n(), r("div", {
|
|
106
|
+
key: 3,
|
|
107
|
+
class: a(["flex items-center justify-between gap-3", x.value])
|
|
108
|
+
}, [
|
|
109
|
+
l("span", B, c(s.value.shipping || "Shipping"), 1),
|
|
110
|
+
l("span", E, [
|
|
111
|
+
t.totals.shipping === 0 ? (n(), r("span", N, "Free")) : (n(), T(d(f), {
|
|
112
|
+
key: 1,
|
|
113
|
+
value: t.totals.shipping
|
|
114
|
+
}, null, 8, ["value"]))
|
|
115
|
+
])
|
|
116
|
+
], 2)) : m("", !0),
|
|
117
|
+
t.features.estimatedTax && t.totals.estimatedTax !== void 0 ? (n(), r("div", {
|
|
118
|
+
key: 4,
|
|
119
|
+
class: a(["flex items-center justify-between gap-3", x.value])
|
|
120
|
+
}, [
|
|
121
|
+
l("span", D, c(h.value), 1),
|
|
122
|
+
u(d(f), {
|
|
123
|
+
value: t.totals.estimatedTax,
|
|
124
|
+
class: "text-foreground font-semibold tabular-nums"
|
|
125
|
+
}, null, 8, ["value"])
|
|
126
|
+
], 2)) : m("", !0),
|
|
127
|
+
l("div", {
|
|
128
|
+
class: a(["flex items-center justify-between gap-3", w.value])
|
|
129
|
+
}, [
|
|
130
|
+
l("span", P, c(s.value.grandTotal || "Grand Total"), 1),
|
|
131
|
+
u(d(f), {
|
|
132
|
+
value: t.totals.grandTotal,
|
|
133
|
+
class: a(["font-black text-foreground tabular-nums", e.compact ? "text-base" : "text-lg"])
|
|
134
|
+
}, null, 8, ["value", "class"])
|
|
135
|
+
], 2),
|
|
136
|
+
t.features.totalSavings && t.totals.totalSavings && t.totals.totalSavings > 0 ? (n(), r("div", {
|
|
137
|
+
key: 5,
|
|
138
|
+
class: a(["flex items-center justify-between gap-3 pt-1", t.compact ? "text-[10px]" : "text-xs"])
|
|
139
|
+
}, [
|
|
140
|
+
l("span", F, [
|
|
141
|
+
u(b, {
|
|
142
|
+
icon: "lucide:circle-dollar-sign",
|
|
143
|
+
class: a(t.compact ? "w-3 h-3" : "w-3.5 h-3.5")
|
|
144
|
+
}, null, 8, ["class"]),
|
|
145
|
+
g(" " + c(s.value.totalSavings || "Total Savings"), 1)
|
|
146
|
+
]),
|
|
147
|
+
u(d(f), {
|
|
148
|
+
value: t.totals.totalSavings,
|
|
149
|
+
class: "text-success font-bold tabular-nums"
|
|
150
|
+
}, null, 8, ["value"])
|
|
151
|
+
], 2)) : m("", !0)
|
|
152
|
+
], 2));
|
|
153
|
+
}
|
|
154
|
+
});
|
|
155
|
+
export {
|
|
156
|
+
z as default
|
|
157
|
+
};
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { CartData, CartActions, CartFeatures, CartLabels, CartVariant } from './types';
|
|
2
|
+
/**
|
|
3
|
+
* Variant 1 — E-commerce Drawer / Slide-over Cart
|
|
4
|
+
*
|
|
5
|
+
* - Full-width drawer / panel layout
|
|
6
|
+
* - Header: title + item count + close
|
|
7
|
+
* - Scrollable line-items list
|
|
8
|
+
* - Sticky footer: coupon + summary + actions
|
|
9
|
+
* - Best for: site.com slide-over cart, mobile / tablet cart drawer
|
|
10
|
+
*/
|
|
11
|
+
type __VLS_Props = {
|
|
12
|
+
data: CartData;
|
|
13
|
+
actions: CartActions;
|
|
14
|
+
features: CartFeatures;
|
|
15
|
+
labels: CartLabels;
|
|
16
|
+
compact?: boolean;
|
|
17
|
+
variant?: CartVariant;
|
|
18
|
+
containerClass?: string | any[] | Record<string, boolean>;
|
|
19
|
+
};
|
|
20
|
+
declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
|
|
21
|
+
clear: () => any;
|
|
22
|
+
remove: (itemId: string | number) => any;
|
|
23
|
+
continue: () => any;
|
|
24
|
+
"update:quantity": (itemId: string | number, quantity: number) => any;
|
|
25
|
+
"continue-shopping": () => any;
|
|
26
|
+
"apply-coupon": (code: string) => any;
|
|
27
|
+
"remove-coupon": () => any;
|
|
28
|
+
"coupon-change": (code: string) => any;
|
|
29
|
+
}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
|
|
30
|
+
onClear?: () => any;
|
|
31
|
+
onRemove?: (itemId: string | number) => any;
|
|
32
|
+
onContinue?: () => any;
|
|
33
|
+
"onUpdate:quantity"?: (itemId: string | number, quantity: number) => any;
|
|
34
|
+
"onContinue-shopping"?: () => any;
|
|
35
|
+
"onApply-coupon"?: (code: string) => any;
|
|
36
|
+
"onRemove-coupon"?: () => any;
|
|
37
|
+
"onCoupon-change"?: (code: string) => any;
|
|
38
|
+
}>, {
|
|
39
|
+
variant: CartVariant;
|
|
40
|
+
compact: boolean;
|
|
41
|
+
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
|
|
42
|
+
export default _default;
|