@shopflowateam/ui 1.0.6 → 1.0.9
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/package.json +1 -1
- package/pkg/index.cjs.js +0 -298
- package/pkg/index.es.js +1 -299
- package/pkg/style.css +4 -0
package/package.json
CHANGED
package/pkg/index.cjs.js
CHANGED
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const jsxRuntime = require("@builder.io/qwik/jsx-runtime");
|
|
4
4
|
const qwik = require("@builder.io/qwik");
|
|
5
|
-
const qwikCity = require("@builder.io/qwik-city");
|
|
6
5
|
const qwikReact = require("@builder.io/qwik-react");
|
|
7
6
|
const formatCurrency = (amountInCents) => {
|
|
8
7
|
return new Intl.NumberFormat("en-US", {
|
|
@@ -59,304 +58,7 @@ const ProductCardQwik = qwik.component$(({ product }) => {
|
|
|
59
58
|
]
|
|
60
59
|
});
|
|
61
60
|
});
|
|
62
|
-
const CartItemQwik = qwik.component$(({ item, cartAction, onUpdateQuantity$, onRemove$ }) => {
|
|
63
|
-
return /* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
64
|
-
class: "[container-type:inline-size] bg-surface-dim rounded-lg border border-border group transition-all hover:border-text-muted",
|
|
65
|
-
children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
|
|
66
|
-
class: "flex flex-col @[500px]:flex-row gap-8 p-8",
|
|
67
|
-
children: [
|
|
68
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
69
|
-
class: "w-full @[500px]:w-32 aspect-square rounded-lg overflow-hidden bg-white border border-border flex-shrink-0",
|
|
70
|
-
children: /* @__PURE__ */ jsxRuntime.jsx("img", {
|
|
71
|
-
src: item.images?.[0],
|
|
72
|
-
alt: item.name,
|
|
73
|
-
class: "w-full h-full object-cover transition-transform group-hover:scale-105 duration-500",
|
|
74
|
-
width: 128,
|
|
75
|
-
height: 128
|
|
76
|
-
})
|
|
77
|
-
}),
|
|
78
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", {
|
|
79
|
-
class: "flex-1 flex flex-col justify-between py-1",
|
|
80
|
-
children: [
|
|
81
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", {
|
|
82
|
-
class: "flex justify-between items-start gap-4",
|
|
83
|
-
children: [
|
|
84
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", {
|
|
85
|
-
children: [
|
|
86
|
-
/* @__PURE__ */ jsxRuntime.jsx(qwikCity.Link, {
|
|
87
|
-
href: `/products/${item.id}`,
|
|
88
|
-
class: "text-lg font-bold hover:text-primary transition-colors uppercase tracking-tight",
|
|
89
|
-
children: item.name
|
|
90
|
-
}),
|
|
91
|
-
/* @__PURE__ */ jsxRuntime.jsx("p", {
|
|
92
|
-
class: "text-[10px] font-black text-text-muted mt-2 uppercase tracking-widest",
|
|
93
|
-
children: item.variantName || "Standard"
|
|
94
|
-
})
|
|
95
|
-
]
|
|
96
|
-
}),
|
|
97
|
-
/* @__PURE__ */ jsxRuntime.jsx("p", {
|
|
98
|
-
class: "text-lg font-bold tracking-tighter",
|
|
99
|
-
children: formatCurrency(item.price)
|
|
100
|
-
})
|
|
101
|
-
]
|
|
102
|
-
}),
|
|
103
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", {
|
|
104
|
-
class: "flex justify-between items-end mt-10",
|
|
105
|
-
children: [
|
|
106
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", {
|
|
107
|
-
class: "flex items-center gap-4",
|
|
108
|
-
children: [
|
|
109
|
-
/* @__PURE__ */ jsxRuntime.jsxs(qwikCity.Form, {
|
|
110
|
-
action: cartAction,
|
|
111
|
-
onSubmitCompleted$: onUpdateQuantity$,
|
|
112
|
-
children: [
|
|
113
|
-
/* @__PURE__ */ jsxRuntime.jsx("input", {
|
|
114
|
-
type: "hidden",
|
|
115
|
-
name: "type",
|
|
116
|
-
value: "update"
|
|
117
|
-
}),
|
|
118
|
-
/* @__PURE__ */ jsxRuntime.jsx("input", {
|
|
119
|
-
type: "hidden",
|
|
120
|
-
name: "id",
|
|
121
|
-
value: item.cartItemId
|
|
122
|
-
}),
|
|
123
|
-
/* @__PURE__ */ jsxRuntime.jsx("input", {
|
|
124
|
-
type: "hidden",
|
|
125
|
-
name: "quantity",
|
|
126
|
-
value: item.quantity - 1
|
|
127
|
-
}),
|
|
128
|
-
/* @__PURE__ */ jsxRuntime.jsx("button", {
|
|
129
|
-
disabled: item.quantity <= 1 || cartAction.isRunning,
|
|
130
|
-
class: "w-10 h-10 flex items-center justify-center cursor-pointer rounded-xl border border-border bg-surface-dim disabled:opacity-30 transition-all shadow-sm",
|
|
131
|
-
"aria-label": "Decrease",
|
|
132
|
-
children: /* @__PURE__ */ jsxRuntime.jsx("svg", {
|
|
133
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
134
|
-
width: "14",
|
|
135
|
-
height: "14",
|
|
136
|
-
viewBox: "0 0 24 24",
|
|
137
|
-
fill: "none",
|
|
138
|
-
stroke: "currentColor",
|
|
139
|
-
"stroke-width": "3",
|
|
140
|
-
"stroke-linecap": "round",
|
|
141
|
-
"stroke-linejoin": "round",
|
|
142
|
-
children: /* @__PURE__ */ jsxRuntime.jsx("line", {
|
|
143
|
-
x1: "5",
|
|
144
|
-
y1: "12",
|
|
145
|
-
x2: "19",
|
|
146
|
-
y2: "12"
|
|
147
|
-
})
|
|
148
|
-
})
|
|
149
|
-
})
|
|
150
|
-
]
|
|
151
|
-
}),
|
|
152
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", {
|
|
153
|
-
class: "w-8 text-center font-black text-xs",
|
|
154
|
-
children: item.quantity
|
|
155
|
-
}),
|
|
156
|
-
/* @__PURE__ */ jsxRuntime.jsxs(qwikCity.Form, {
|
|
157
|
-
action: cartAction,
|
|
158
|
-
onSubmitCompleted$: onUpdateQuantity$,
|
|
159
|
-
children: [
|
|
160
|
-
/* @__PURE__ */ jsxRuntime.jsx("input", {
|
|
161
|
-
type: "hidden",
|
|
162
|
-
name: "type",
|
|
163
|
-
value: "update"
|
|
164
|
-
}),
|
|
165
|
-
/* @__PURE__ */ jsxRuntime.jsx("input", {
|
|
166
|
-
type: "hidden",
|
|
167
|
-
name: "id",
|
|
168
|
-
value: item.cartItemId
|
|
169
|
-
}),
|
|
170
|
-
/* @__PURE__ */ jsxRuntime.jsx("input", {
|
|
171
|
-
type: "hidden",
|
|
172
|
-
name: "quantity",
|
|
173
|
-
value: item.quantity + 1
|
|
174
|
-
}),
|
|
175
|
-
/* @__PURE__ */ jsxRuntime.jsx("button", {
|
|
176
|
-
disabled: item.quantity >= 99 || cartAction.isRunning,
|
|
177
|
-
class: "w-10 h-10 flex items-center cursor-pointer justify-center rounded-xl border border-border bg-surface-dim disabled:opacity-30 transition-all shadow-sm",
|
|
178
|
-
"aria-label": "Increase",
|
|
179
|
-
children: /* @__PURE__ */ jsxRuntime.jsxs("svg", {
|
|
180
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
181
|
-
width: "14",
|
|
182
|
-
height: "14",
|
|
183
|
-
viewBox: "0 0 24 24",
|
|
184
|
-
fill: "none",
|
|
185
|
-
stroke: "currentColor",
|
|
186
|
-
"stroke-width": "3",
|
|
187
|
-
"stroke-linecap": "round",
|
|
188
|
-
"stroke-linejoin": "round",
|
|
189
|
-
children: [
|
|
190
|
-
/* @__PURE__ */ jsxRuntime.jsx("line", {
|
|
191
|
-
x1: "12",
|
|
192
|
-
y1: "5",
|
|
193
|
-
x2: "12",
|
|
194
|
-
y2: "19"
|
|
195
|
-
}),
|
|
196
|
-
/* @__PURE__ */ jsxRuntime.jsx("line", {
|
|
197
|
-
x1: "5",
|
|
198
|
-
y1: "12",
|
|
199
|
-
x2: "19",
|
|
200
|
-
y2: "12"
|
|
201
|
-
})
|
|
202
|
-
]
|
|
203
|
-
})
|
|
204
|
-
})
|
|
205
|
-
]
|
|
206
|
-
})
|
|
207
|
-
]
|
|
208
|
-
}),
|
|
209
|
-
/* @__PURE__ */ jsxRuntime.jsxs(qwikCity.Form, {
|
|
210
|
-
action: cartAction,
|
|
211
|
-
onSubmitCompleted$: onRemove$,
|
|
212
|
-
children: [
|
|
213
|
-
/* @__PURE__ */ jsxRuntime.jsx("input", {
|
|
214
|
-
type: "hidden",
|
|
215
|
-
name: "type",
|
|
216
|
-
value: "remove"
|
|
217
|
-
}),
|
|
218
|
-
/* @__PURE__ */ jsxRuntime.jsx("input", {
|
|
219
|
-
type: "hidden",
|
|
220
|
-
name: "id",
|
|
221
|
-
value: item.cartItemId
|
|
222
|
-
}),
|
|
223
|
-
/* @__PURE__ */ jsxRuntime.jsx("button", {
|
|
224
|
-
class: "text-[10px] font-black uppercase tracking-[0.2em] text-red-500 hover:text-red-700 transition-colors p-2 underline decoration-2 underline-offset-4",
|
|
225
|
-
children: "Remove"
|
|
226
|
-
})
|
|
227
|
-
]
|
|
228
|
-
})
|
|
229
|
-
]
|
|
230
|
-
})
|
|
231
|
-
]
|
|
232
|
-
})
|
|
233
|
-
]
|
|
234
|
-
})
|
|
235
|
-
});
|
|
236
|
-
});
|
|
237
|
-
const EmptyState = qwik.component$((props) => {
|
|
238
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", {
|
|
239
|
-
class: "py-24 px-6 text-center animate-in fade-in slide-in-from-bottom-4 duration-700",
|
|
240
|
-
children: [
|
|
241
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
242
|
-
class: "w-16 h-16 bg-surface-dim rounded-md lg:rounded-2xl flex items-center justify-center mx-auto mb-8 border border-border",
|
|
243
|
-
children: props.icon === "error" ? /* @__PURE__ */ jsxRuntime.jsxs("svg", {
|
|
244
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
245
|
-
width: "24",
|
|
246
|
-
height: "24",
|
|
247
|
-
viewBox: "0 0 24 24",
|
|
248
|
-
fill: "none",
|
|
249
|
-
stroke: "currentColor",
|
|
250
|
-
"stroke-width": "2",
|
|
251
|
-
"stroke-linecap": "round",
|
|
252
|
-
"stroke-linejoin": "round",
|
|
253
|
-
class: "text-text-muted",
|
|
254
|
-
children: [
|
|
255
|
-
/* @__PURE__ */ jsxRuntime.jsx("circle", {
|
|
256
|
-
cx: "12",
|
|
257
|
-
cy: "12",
|
|
258
|
-
r: "10"
|
|
259
|
-
}),
|
|
260
|
-
/* @__PURE__ */ jsxRuntime.jsx("line", {
|
|
261
|
-
x1: "12",
|
|
262
|
-
y1: "8",
|
|
263
|
-
x2: "12",
|
|
264
|
-
y2: "12"
|
|
265
|
-
}),
|
|
266
|
-
/* @__PURE__ */ jsxRuntime.jsx("line", {
|
|
267
|
-
x1: "12",
|
|
268
|
-
y1: "16",
|
|
269
|
-
x2: "12.01",
|
|
270
|
-
y2: "16"
|
|
271
|
-
})
|
|
272
|
-
]
|
|
273
|
-
}) : props.icon === "cart" ? /* @__PURE__ */ jsxRuntime.jsxs("svg", {
|
|
274
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
275
|
-
width: "24",
|
|
276
|
-
height: "24",
|
|
277
|
-
viewBox: "0 0 24 24",
|
|
278
|
-
fill: "none",
|
|
279
|
-
stroke: "currentColor",
|
|
280
|
-
"stroke-width": "2",
|
|
281
|
-
"stroke-linecap": "round",
|
|
282
|
-
"stroke-linejoin": "round",
|
|
283
|
-
class: "text-text-muted",
|
|
284
|
-
children: [
|
|
285
|
-
/* @__PURE__ */ jsxRuntime.jsx("circle", {
|
|
286
|
-
cx: "8",
|
|
287
|
-
cy: "21",
|
|
288
|
-
r: "1"
|
|
289
|
-
}),
|
|
290
|
-
/* @__PURE__ */ jsxRuntime.jsx("circle", {
|
|
291
|
-
cx: "19",
|
|
292
|
-
cy: "21",
|
|
293
|
-
r: "1"
|
|
294
|
-
}),
|
|
295
|
-
/* @__PURE__ */ jsxRuntime.jsx("path", {
|
|
296
|
-
d: "M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12"
|
|
297
|
-
})
|
|
298
|
-
]
|
|
299
|
-
}) : /* @__PURE__ */ jsxRuntime.jsxs("svg", {
|
|
300
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
301
|
-
width: "24",
|
|
302
|
-
height: "24",
|
|
303
|
-
viewBox: "0 0 24 24",
|
|
304
|
-
fill: "none",
|
|
305
|
-
stroke: "currentColor",
|
|
306
|
-
"stroke-width": "2",
|
|
307
|
-
"stroke-linecap": "round",
|
|
308
|
-
"stroke-linejoin": "round",
|
|
309
|
-
class: "text-text-muted",
|
|
310
|
-
children: [
|
|
311
|
-
/* @__PURE__ */ jsxRuntime.jsx("circle", {
|
|
312
|
-
cx: "11",
|
|
313
|
-
cy: "11",
|
|
314
|
-
r: "8"
|
|
315
|
-
}),
|
|
316
|
-
/* @__PURE__ */ jsxRuntime.jsx("line", {
|
|
317
|
-
x1: "21",
|
|
318
|
-
y1: "21",
|
|
319
|
-
x2: "16.65",
|
|
320
|
-
y2: "16.65"
|
|
321
|
-
})
|
|
322
|
-
]
|
|
323
|
-
})
|
|
324
|
-
}),
|
|
325
|
-
props.title && /* @__PURE__ */ jsxRuntime.jsx("h3", {
|
|
326
|
-
class: "text-2xl font-semibold mb-2 tracking-tight uppercase",
|
|
327
|
-
children: props.title
|
|
328
|
-
}),
|
|
329
|
-
/* @__PURE__ */ jsxRuntime.jsx("p", {
|
|
330
|
-
class: "text-text-muted max-w-sm mx-auto leading-relaxed mb-10 font-medium",
|
|
331
|
-
children: props.message
|
|
332
|
-
}),
|
|
333
|
-
props.actionLabel && props.actionHref && /* @__PURE__ */ jsxRuntime.jsx(qwikCity.Link, {
|
|
334
|
-
href: props.actionHref,
|
|
335
|
-
class: "inline-block bg-black text-white px-5 py-2.5 rounded font-semibold text-sm hover:bg-primary transition-all",
|
|
336
|
-
children: props.actionLabel
|
|
337
|
-
})
|
|
338
|
-
]
|
|
339
|
-
});
|
|
340
|
-
});
|
|
341
61
|
qwikReact.qwikify$(ProductCardQwik, {
|
|
342
62
|
eagerness: "hover"
|
|
343
63
|
});
|
|
344
|
-
qwikReact.qwikify$(CartItemQwik, {
|
|
345
|
-
eagerness: "hover"
|
|
346
|
-
});
|
|
347
|
-
const emitShopFlowEvent = (event) => {
|
|
348
|
-
if (typeof window !== "undefined") {
|
|
349
|
-
window.parent.postMessage({
|
|
350
|
-
source: "shopflow",
|
|
351
|
-
...event
|
|
352
|
-
}, "*");
|
|
353
|
-
window.dispatchEvent(new CustomEvent("shopflow-event", {
|
|
354
|
-
detail: event
|
|
355
|
-
}));
|
|
356
|
-
console.debug("[ShopFlow Bridge] Emitting event:", event);
|
|
357
|
-
}
|
|
358
|
-
};
|
|
359
|
-
exports.CartItem = CartItemQwik;
|
|
360
|
-
exports.EmptyState = EmptyState;
|
|
361
64
|
exports.ProductCard = ProductCardQwik;
|
|
362
|
-
exports.emitShopFlowEvent = emitShopFlowEvent;
|
package/pkg/index.es.js
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { jsxs, jsx } from "@builder.io/qwik/jsx-runtime";
|
|
2
2
|
import { component$ } from "@builder.io/qwik";
|
|
3
|
-
import { Link, Form } from "@builder.io/qwik-city";
|
|
4
3
|
import { qwikify$ } from "@builder.io/qwik-react";
|
|
5
4
|
const formatCurrency = (amountInCents) => {
|
|
6
5
|
return new Intl.NumberFormat("en-US", {
|
|
@@ -57,306 +56,9 @@ const ProductCardQwik = component$(({ product }) => {
|
|
|
57
56
|
]
|
|
58
57
|
});
|
|
59
58
|
});
|
|
60
|
-
const CartItemQwik = component$(({ item, cartAction, onUpdateQuantity$, onRemove$ }) => {
|
|
61
|
-
return /* @__PURE__ */ jsx("div", {
|
|
62
|
-
class: "[container-type:inline-size] bg-surface-dim rounded-lg border border-border group transition-all hover:border-text-muted",
|
|
63
|
-
children: /* @__PURE__ */ jsxs("div", {
|
|
64
|
-
class: "flex flex-col @[500px]:flex-row gap-8 p-8",
|
|
65
|
-
children: [
|
|
66
|
-
/* @__PURE__ */ jsx("div", {
|
|
67
|
-
class: "w-full @[500px]:w-32 aspect-square rounded-lg overflow-hidden bg-white border border-border flex-shrink-0",
|
|
68
|
-
children: /* @__PURE__ */ jsx("img", {
|
|
69
|
-
src: item.images?.[0],
|
|
70
|
-
alt: item.name,
|
|
71
|
-
class: "w-full h-full object-cover transition-transform group-hover:scale-105 duration-500",
|
|
72
|
-
width: 128,
|
|
73
|
-
height: 128
|
|
74
|
-
})
|
|
75
|
-
}),
|
|
76
|
-
/* @__PURE__ */ jsxs("div", {
|
|
77
|
-
class: "flex-1 flex flex-col justify-between py-1",
|
|
78
|
-
children: [
|
|
79
|
-
/* @__PURE__ */ jsxs("div", {
|
|
80
|
-
class: "flex justify-between items-start gap-4",
|
|
81
|
-
children: [
|
|
82
|
-
/* @__PURE__ */ jsxs("div", {
|
|
83
|
-
children: [
|
|
84
|
-
/* @__PURE__ */ jsx(Link, {
|
|
85
|
-
href: `/products/${item.id}`,
|
|
86
|
-
class: "text-lg font-bold hover:text-primary transition-colors uppercase tracking-tight",
|
|
87
|
-
children: item.name
|
|
88
|
-
}),
|
|
89
|
-
/* @__PURE__ */ jsx("p", {
|
|
90
|
-
class: "text-[10px] font-black text-text-muted mt-2 uppercase tracking-widest",
|
|
91
|
-
children: item.variantName || "Standard"
|
|
92
|
-
})
|
|
93
|
-
]
|
|
94
|
-
}),
|
|
95
|
-
/* @__PURE__ */ jsx("p", {
|
|
96
|
-
class: "text-lg font-bold tracking-tighter",
|
|
97
|
-
children: formatCurrency(item.price)
|
|
98
|
-
})
|
|
99
|
-
]
|
|
100
|
-
}),
|
|
101
|
-
/* @__PURE__ */ jsxs("div", {
|
|
102
|
-
class: "flex justify-between items-end mt-10",
|
|
103
|
-
children: [
|
|
104
|
-
/* @__PURE__ */ jsxs("div", {
|
|
105
|
-
class: "flex items-center gap-4",
|
|
106
|
-
children: [
|
|
107
|
-
/* @__PURE__ */ jsxs(Form, {
|
|
108
|
-
action: cartAction,
|
|
109
|
-
onSubmitCompleted$: onUpdateQuantity$,
|
|
110
|
-
children: [
|
|
111
|
-
/* @__PURE__ */ jsx("input", {
|
|
112
|
-
type: "hidden",
|
|
113
|
-
name: "type",
|
|
114
|
-
value: "update"
|
|
115
|
-
}),
|
|
116
|
-
/* @__PURE__ */ jsx("input", {
|
|
117
|
-
type: "hidden",
|
|
118
|
-
name: "id",
|
|
119
|
-
value: item.cartItemId
|
|
120
|
-
}),
|
|
121
|
-
/* @__PURE__ */ jsx("input", {
|
|
122
|
-
type: "hidden",
|
|
123
|
-
name: "quantity",
|
|
124
|
-
value: item.quantity - 1
|
|
125
|
-
}),
|
|
126
|
-
/* @__PURE__ */ jsx("button", {
|
|
127
|
-
disabled: item.quantity <= 1 || cartAction.isRunning,
|
|
128
|
-
class: "w-10 h-10 flex items-center justify-center cursor-pointer rounded-xl border border-border bg-surface-dim disabled:opacity-30 transition-all shadow-sm",
|
|
129
|
-
"aria-label": "Decrease",
|
|
130
|
-
children: /* @__PURE__ */ jsx("svg", {
|
|
131
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
132
|
-
width: "14",
|
|
133
|
-
height: "14",
|
|
134
|
-
viewBox: "0 0 24 24",
|
|
135
|
-
fill: "none",
|
|
136
|
-
stroke: "currentColor",
|
|
137
|
-
"stroke-width": "3",
|
|
138
|
-
"stroke-linecap": "round",
|
|
139
|
-
"stroke-linejoin": "round",
|
|
140
|
-
children: /* @__PURE__ */ jsx("line", {
|
|
141
|
-
x1: "5",
|
|
142
|
-
y1: "12",
|
|
143
|
-
x2: "19",
|
|
144
|
-
y2: "12"
|
|
145
|
-
})
|
|
146
|
-
})
|
|
147
|
-
})
|
|
148
|
-
]
|
|
149
|
-
}),
|
|
150
|
-
/* @__PURE__ */ jsx("span", {
|
|
151
|
-
class: "w-8 text-center font-black text-xs",
|
|
152
|
-
children: item.quantity
|
|
153
|
-
}),
|
|
154
|
-
/* @__PURE__ */ jsxs(Form, {
|
|
155
|
-
action: cartAction,
|
|
156
|
-
onSubmitCompleted$: onUpdateQuantity$,
|
|
157
|
-
children: [
|
|
158
|
-
/* @__PURE__ */ jsx("input", {
|
|
159
|
-
type: "hidden",
|
|
160
|
-
name: "type",
|
|
161
|
-
value: "update"
|
|
162
|
-
}),
|
|
163
|
-
/* @__PURE__ */ jsx("input", {
|
|
164
|
-
type: "hidden",
|
|
165
|
-
name: "id",
|
|
166
|
-
value: item.cartItemId
|
|
167
|
-
}),
|
|
168
|
-
/* @__PURE__ */ jsx("input", {
|
|
169
|
-
type: "hidden",
|
|
170
|
-
name: "quantity",
|
|
171
|
-
value: item.quantity + 1
|
|
172
|
-
}),
|
|
173
|
-
/* @__PURE__ */ jsx("button", {
|
|
174
|
-
disabled: item.quantity >= 99 || cartAction.isRunning,
|
|
175
|
-
class: "w-10 h-10 flex items-center cursor-pointer justify-center rounded-xl border border-border bg-surface-dim disabled:opacity-30 transition-all shadow-sm",
|
|
176
|
-
"aria-label": "Increase",
|
|
177
|
-
children: /* @__PURE__ */ jsxs("svg", {
|
|
178
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
179
|
-
width: "14",
|
|
180
|
-
height: "14",
|
|
181
|
-
viewBox: "0 0 24 24",
|
|
182
|
-
fill: "none",
|
|
183
|
-
stroke: "currentColor",
|
|
184
|
-
"stroke-width": "3",
|
|
185
|
-
"stroke-linecap": "round",
|
|
186
|
-
"stroke-linejoin": "round",
|
|
187
|
-
children: [
|
|
188
|
-
/* @__PURE__ */ jsx("line", {
|
|
189
|
-
x1: "12",
|
|
190
|
-
y1: "5",
|
|
191
|
-
x2: "12",
|
|
192
|
-
y2: "19"
|
|
193
|
-
}),
|
|
194
|
-
/* @__PURE__ */ jsx("line", {
|
|
195
|
-
x1: "5",
|
|
196
|
-
y1: "12",
|
|
197
|
-
x2: "19",
|
|
198
|
-
y2: "12"
|
|
199
|
-
})
|
|
200
|
-
]
|
|
201
|
-
})
|
|
202
|
-
})
|
|
203
|
-
]
|
|
204
|
-
})
|
|
205
|
-
]
|
|
206
|
-
}),
|
|
207
|
-
/* @__PURE__ */ jsxs(Form, {
|
|
208
|
-
action: cartAction,
|
|
209
|
-
onSubmitCompleted$: onRemove$,
|
|
210
|
-
children: [
|
|
211
|
-
/* @__PURE__ */ jsx("input", {
|
|
212
|
-
type: "hidden",
|
|
213
|
-
name: "type",
|
|
214
|
-
value: "remove"
|
|
215
|
-
}),
|
|
216
|
-
/* @__PURE__ */ jsx("input", {
|
|
217
|
-
type: "hidden",
|
|
218
|
-
name: "id",
|
|
219
|
-
value: item.cartItemId
|
|
220
|
-
}),
|
|
221
|
-
/* @__PURE__ */ jsx("button", {
|
|
222
|
-
class: "text-[10px] font-black uppercase tracking-[0.2em] text-red-500 hover:text-red-700 transition-colors p-2 underline decoration-2 underline-offset-4",
|
|
223
|
-
children: "Remove"
|
|
224
|
-
})
|
|
225
|
-
]
|
|
226
|
-
})
|
|
227
|
-
]
|
|
228
|
-
})
|
|
229
|
-
]
|
|
230
|
-
})
|
|
231
|
-
]
|
|
232
|
-
})
|
|
233
|
-
});
|
|
234
|
-
});
|
|
235
|
-
const EmptyState = component$((props) => {
|
|
236
|
-
return /* @__PURE__ */ jsxs("div", {
|
|
237
|
-
class: "py-24 px-6 text-center animate-in fade-in slide-in-from-bottom-4 duration-700",
|
|
238
|
-
children: [
|
|
239
|
-
/* @__PURE__ */ jsx("div", {
|
|
240
|
-
class: "w-16 h-16 bg-surface-dim rounded-md lg:rounded-2xl flex items-center justify-center mx-auto mb-8 border border-border",
|
|
241
|
-
children: props.icon === "error" ? /* @__PURE__ */ jsxs("svg", {
|
|
242
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
243
|
-
width: "24",
|
|
244
|
-
height: "24",
|
|
245
|
-
viewBox: "0 0 24 24",
|
|
246
|
-
fill: "none",
|
|
247
|
-
stroke: "currentColor",
|
|
248
|
-
"stroke-width": "2",
|
|
249
|
-
"stroke-linecap": "round",
|
|
250
|
-
"stroke-linejoin": "round",
|
|
251
|
-
class: "text-text-muted",
|
|
252
|
-
children: [
|
|
253
|
-
/* @__PURE__ */ jsx("circle", {
|
|
254
|
-
cx: "12",
|
|
255
|
-
cy: "12",
|
|
256
|
-
r: "10"
|
|
257
|
-
}),
|
|
258
|
-
/* @__PURE__ */ jsx("line", {
|
|
259
|
-
x1: "12",
|
|
260
|
-
y1: "8",
|
|
261
|
-
x2: "12",
|
|
262
|
-
y2: "12"
|
|
263
|
-
}),
|
|
264
|
-
/* @__PURE__ */ jsx("line", {
|
|
265
|
-
x1: "12",
|
|
266
|
-
y1: "16",
|
|
267
|
-
x2: "12.01",
|
|
268
|
-
y2: "16"
|
|
269
|
-
})
|
|
270
|
-
]
|
|
271
|
-
}) : props.icon === "cart" ? /* @__PURE__ */ jsxs("svg", {
|
|
272
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
273
|
-
width: "24",
|
|
274
|
-
height: "24",
|
|
275
|
-
viewBox: "0 0 24 24",
|
|
276
|
-
fill: "none",
|
|
277
|
-
stroke: "currentColor",
|
|
278
|
-
"stroke-width": "2",
|
|
279
|
-
"stroke-linecap": "round",
|
|
280
|
-
"stroke-linejoin": "round",
|
|
281
|
-
class: "text-text-muted",
|
|
282
|
-
children: [
|
|
283
|
-
/* @__PURE__ */ jsx("circle", {
|
|
284
|
-
cx: "8",
|
|
285
|
-
cy: "21",
|
|
286
|
-
r: "1"
|
|
287
|
-
}),
|
|
288
|
-
/* @__PURE__ */ jsx("circle", {
|
|
289
|
-
cx: "19",
|
|
290
|
-
cy: "21",
|
|
291
|
-
r: "1"
|
|
292
|
-
}),
|
|
293
|
-
/* @__PURE__ */ jsx("path", {
|
|
294
|
-
d: "M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12"
|
|
295
|
-
})
|
|
296
|
-
]
|
|
297
|
-
}) : /* @__PURE__ */ jsxs("svg", {
|
|
298
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
299
|
-
width: "24",
|
|
300
|
-
height: "24",
|
|
301
|
-
viewBox: "0 0 24 24",
|
|
302
|
-
fill: "none",
|
|
303
|
-
stroke: "currentColor",
|
|
304
|
-
"stroke-width": "2",
|
|
305
|
-
"stroke-linecap": "round",
|
|
306
|
-
"stroke-linejoin": "round",
|
|
307
|
-
class: "text-text-muted",
|
|
308
|
-
children: [
|
|
309
|
-
/* @__PURE__ */ jsx("circle", {
|
|
310
|
-
cx: "11",
|
|
311
|
-
cy: "11",
|
|
312
|
-
r: "8"
|
|
313
|
-
}),
|
|
314
|
-
/* @__PURE__ */ jsx("line", {
|
|
315
|
-
x1: "21",
|
|
316
|
-
y1: "21",
|
|
317
|
-
x2: "16.65",
|
|
318
|
-
y2: "16.65"
|
|
319
|
-
})
|
|
320
|
-
]
|
|
321
|
-
})
|
|
322
|
-
}),
|
|
323
|
-
props.title && /* @__PURE__ */ jsx("h3", {
|
|
324
|
-
class: "text-2xl font-semibold mb-2 tracking-tight uppercase",
|
|
325
|
-
children: props.title
|
|
326
|
-
}),
|
|
327
|
-
/* @__PURE__ */ jsx("p", {
|
|
328
|
-
class: "text-text-muted max-w-sm mx-auto leading-relaxed mb-10 font-medium",
|
|
329
|
-
children: props.message
|
|
330
|
-
}),
|
|
331
|
-
props.actionLabel && props.actionHref && /* @__PURE__ */ jsx(Link, {
|
|
332
|
-
href: props.actionHref,
|
|
333
|
-
class: "inline-block bg-black text-white px-5 py-2.5 rounded font-semibold text-sm hover:bg-primary transition-all",
|
|
334
|
-
children: props.actionLabel
|
|
335
|
-
})
|
|
336
|
-
]
|
|
337
|
-
});
|
|
338
|
-
});
|
|
339
59
|
qwikify$(ProductCardQwik, {
|
|
340
60
|
eagerness: "hover"
|
|
341
61
|
});
|
|
342
|
-
qwikify$(CartItemQwik, {
|
|
343
|
-
eagerness: "hover"
|
|
344
|
-
});
|
|
345
|
-
const emitShopFlowEvent = (event) => {
|
|
346
|
-
if (typeof window !== "undefined") {
|
|
347
|
-
window.parent.postMessage({
|
|
348
|
-
source: "shopflow",
|
|
349
|
-
...event
|
|
350
|
-
}, "*");
|
|
351
|
-
window.dispatchEvent(new CustomEvent("shopflow-event", {
|
|
352
|
-
detail: event
|
|
353
|
-
}));
|
|
354
|
-
console.debug("[ShopFlow Bridge] Emitting event:", event);
|
|
355
|
-
}
|
|
356
|
-
};
|
|
357
62
|
export {
|
|
358
|
-
|
|
359
|
-
EmptyState,
|
|
360
|
-
ProductCardQwik as ProductCard,
|
|
361
|
-
emitShopFlowEvent
|
|
63
|
+
ProductCardQwik as ProductCard
|
|
362
64
|
};
|