@simple-builder/react 1.0.20 → 1.0.21
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/dist/{build-container-client-LY4RX272.mjs → build-container-client-EGUVIJQE.mjs} +190 -180
- package/dist/{build-container-client-K5FTDOKZ.css → build-container-client-UTWTM32L.css} +19 -0
- package/dist/{build-container-client-RGQQTCKG.js → build-container-client-VLVAC2RM.js} +255 -245
- package/dist/{builder-content-PZYB2ILV.js → builder-content-BGBWMI6B.js} +7 -7
- package/dist/{builder-content-6XOZLKFJ.css → builder-content-JWIMCW6L.css} +19 -0
- package/dist/{builder-content-4TTGQUUJ.mjs → builder-content-RQZGNHGE.mjs} +2 -2
- package/dist/{chunk-IY3JM23H.js → chunk-GQ2NJQNP.js} +3 -3
- package/dist/{chunk-2Y3J2R5O.mjs → chunk-JDY3WVEQ.mjs} +1 -1
- package/dist/{chunk-J6SSP2IE.mjs → chunk-KD2J6VPO.mjs} +2 -2
- package/dist/{chunk-N6DUKS7Z.js → chunk-Q2EMWEEZ.js} +5 -5
- package/dist/{chunk-LLKCXOGO.js → chunk-SMX2JVU7.js} +19 -3
- package/dist/{chunk-SLA7GUFF.mjs → chunk-YM22QCRZ.mjs} +19 -3
- package/dist/index.css +19 -0
- package/dist/index.js +6 -6
- package/dist/index.mjs +2 -2
- package/package.json +2 -2
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import './chunk-
|
|
3
|
-
import { buttonVariants, Button, useBuilder } from './chunk-
|
|
4
|
-
import { cn, tv, DesignWrapper, builder, Image } from './chunk-
|
|
5
|
-
import * as
|
|
2
|
+
import './chunk-KD2J6VPO.mjs';
|
|
3
|
+
import { buttonVariants, Button, useBuilder } from './chunk-JDY3WVEQ.mjs';
|
|
4
|
+
import { cn, tv, DesignWrapper, builder, Image } from './chunk-YM22QCRZ.mjs';
|
|
5
|
+
import * as React17 from 'react';
|
|
6
6
|
import { ChevronDown, ChevronUp, Check, PlusIcon, ArrowUp, ArrowDown, Edit2Icon, Trash2Icon, ImageIcon, XIcon, PlusCircleIcon, CalendarIcon, MonitorIcon, SmartphoneIcon, ChevronLeftIcon, ChevronRightIcon, PaintbrushIcon, Loader2Icon, AlignHorizontalSpaceAroundIcon, AlignHorizontalJustifyStartIcon, ScanIcon } from 'lucide-react';
|
|
7
7
|
import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
|
|
8
8
|
import * as PopoverPrimitive from '@radix-ui/react-popover';
|
|
@@ -22,7 +22,7 @@ import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
|
|
|
22
22
|
var AlertDialog = AlertDialogPrimitive.Root;
|
|
23
23
|
var AlertDialogTrigger = AlertDialogPrimitive.Trigger;
|
|
24
24
|
var AlertDialogPortal = AlertDialogPrimitive.Portal;
|
|
25
|
-
var AlertDialogOverlay =
|
|
25
|
+
var AlertDialogOverlay = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React17.createElement(
|
|
26
26
|
AlertDialogPrimitive.Overlay,
|
|
27
27
|
{
|
|
28
28
|
className: cn(
|
|
@@ -34,7 +34,7 @@ var AlertDialogOverlay = React12.forwardRef(({ className, ...props }, ref) => /*
|
|
|
34
34
|
}
|
|
35
35
|
));
|
|
36
36
|
AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
|
|
37
|
-
var AlertDialogContent =
|
|
37
|
+
var AlertDialogContent = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React17.createElement(AlertDialogPortal, null, /* @__PURE__ */ React17.createElement(AlertDialogOverlay, null), /* @__PURE__ */ React17.createElement(
|
|
38
38
|
AlertDialogPrimitive.Content,
|
|
39
39
|
{
|
|
40
40
|
ref,
|
|
@@ -49,7 +49,7 @@ AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
|
|
|
49
49
|
var AlertDialogFooter = ({
|
|
50
50
|
className,
|
|
51
51
|
...props
|
|
52
|
-
}) => /* @__PURE__ */
|
|
52
|
+
}) => /* @__PURE__ */ React17.createElement(
|
|
53
53
|
"div",
|
|
54
54
|
{
|
|
55
55
|
className: cn(
|
|
@@ -60,7 +60,7 @@ var AlertDialogFooter = ({
|
|
|
60
60
|
}
|
|
61
61
|
);
|
|
62
62
|
AlertDialogFooter.displayName = "AlertDialogFooter";
|
|
63
|
-
var AlertDialogTitle =
|
|
63
|
+
var AlertDialogTitle = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React17.createElement(
|
|
64
64
|
AlertDialogPrimitive.Title,
|
|
65
65
|
{
|
|
66
66
|
ref,
|
|
@@ -69,7 +69,7 @@ var AlertDialogTitle = React12.forwardRef(({ className, ...props }, ref) => /* @
|
|
|
69
69
|
}
|
|
70
70
|
));
|
|
71
71
|
AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
|
|
72
|
-
var AlertDialogDescription =
|
|
72
|
+
var AlertDialogDescription = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React17.createElement(
|
|
73
73
|
AlertDialogPrimitive.Description,
|
|
74
74
|
{
|
|
75
75
|
ref,
|
|
@@ -78,7 +78,7 @@ var AlertDialogDescription = React12.forwardRef(({ className, ...props }, ref) =
|
|
|
78
78
|
}
|
|
79
79
|
));
|
|
80
80
|
AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
|
|
81
|
-
var AlertDialogAction =
|
|
81
|
+
var AlertDialogAction = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React17.createElement(
|
|
82
82
|
AlertDialogPrimitive.Action,
|
|
83
83
|
{
|
|
84
84
|
ref,
|
|
@@ -87,7 +87,7 @@ var AlertDialogAction = React12.forwardRef(({ className, ...props }, ref) => /*
|
|
|
87
87
|
}
|
|
88
88
|
));
|
|
89
89
|
AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
|
|
90
|
-
var AlertDialogCancel =
|
|
90
|
+
var AlertDialogCancel = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React17.createElement(
|
|
91
91
|
AlertDialogPrimitive.Cancel,
|
|
92
92
|
{
|
|
93
93
|
ref,
|
|
@@ -103,7 +103,7 @@ AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
|
|
|
103
103
|
var Popover = PopoverPrimitive.Root;
|
|
104
104
|
var PopoverTrigger = PopoverPrimitive.Trigger;
|
|
105
105
|
var PopoverClose = PopoverPrimitive.Close;
|
|
106
|
-
var PopoverContent =
|
|
106
|
+
var PopoverContent = React17.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ React17.createElement(PopoverPrimitive.Portal, null, /* @__PURE__ */ React17.createElement(
|
|
107
107
|
PopoverPrimitive.Content,
|
|
108
108
|
{
|
|
109
109
|
ref,
|
|
@@ -123,7 +123,7 @@ function Calendar({
|
|
|
123
123
|
showOutsideDays = true,
|
|
124
124
|
...props
|
|
125
125
|
}) {
|
|
126
|
-
return /* @__PURE__ */
|
|
126
|
+
return /* @__PURE__ */ React17.createElement(
|
|
127
127
|
DayPicker,
|
|
128
128
|
{
|
|
129
129
|
showOutsideDays,
|
|
@@ -163,8 +163,8 @@ function Calendar({
|
|
|
163
163
|
...classNames
|
|
164
164
|
},
|
|
165
165
|
components: {
|
|
166
|
-
IconLeft: () => /* @__PURE__ */
|
|
167
|
-
IconRight: () => /* @__PURE__ */
|
|
166
|
+
IconLeft: () => /* @__PURE__ */ React17.createElement(ChevronLeftIcon, { className: "sb-h-4 sb-w-4" }),
|
|
167
|
+
IconRight: () => /* @__PURE__ */ React17.createElement(ChevronRightIcon, { className: "sb-h-4 sb-w-4" })
|
|
168
168
|
},
|
|
169
169
|
...props
|
|
170
170
|
}
|
|
@@ -184,7 +184,7 @@ var ColorPicker = (props) => {
|
|
|
184
184
|
"#009DD1",
|
|
185
185
|
"#FF0000"
|
|
186
186
|
];
|
|
187
|
-
return /* @__PURE__ */
|
|
187
|
+
return /* @__PURE__ */ React17.createElement(Popover, null, /* @__PURE__ */ React17.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React17.createElement(
|
|
188
188
|
Button,
|
|
189
189
|
{
|
|
190
190
|
variant: "outline",
|
|
@@ -195,14 +195,14 @@ var ColorPicker = (props) => {
|
|
|
195
195
|
className
|
|
196
196
|
)
|
|
197
197
|
},
|
|
198
|
-
/* @__PURE__ */
|
|
198
|
+
/* @__PURE__ */ React17.createElement("div", { className: "sb-w-full sb-flex sb-items-center sb-gap-2" }, color ? /* @__PURE__ */ React17.createElement(
|
|
199
199
|
"div",
|
|
200
200
|
{
|
|
201
201
|
className: "sb-h-4 sb-w-4 sb-rounded !sb-bg-center !sb-bg-cover sb-transition-all sb-border",
|
|
202
202
|
style: { background: color }
|
|
203
203
|
}
|
|
204
|
-
) : /* @__PURE__ */
|
|
205
|
-
)), /* @__PURE__ */
|
|
204
|
+
) : /* @__PURE__ */ React17.createElement(PaintbrushIcon, { className: "sb-h-4 sb-w-4" }), /* @__PURE__ */ React17.createElement("div", { className: "sb-truncate sb-flex-1" }, color ? color : "Kies een kleur"))
|
|
205
|
+
)), /* @__PURE__ */ React17.createElement(PopoverContent, { className: "sb-w-64 sb-p-4 sb-flex sb-flex-wrap sb-gap-1" }, colors.map((s) => /* @__PURE__ */ React17.createElement(
|
|
206
206
|
"div",
|
|
207
207
|
{
|
|
208
208
|
key: s,
|
|
@@ -215,7 +215,7 @@ var ColorPicker = (props) => {
|
|
|
215
215
|
var labelVariants = tv({
|
|
216
216
|
base: "sb-text-sm sb-font-medium sb-font-roboto sb-leading-none peer-disabled:sb-cursor-not-allowed peer-disabled:sb-opacity-70"
|
|
217
217
|
});
|
|
218
|
-
var Label =
|
|
218
|
+
var Label = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React17.createElement(
|
|
219
219
|
LabelPrimitive.Root,
|
|
220
220
|
{
|
|
221
221
|
ref,
|
|
@@ -227,17 +227,17 @@ Label.displayName = LabelPrimitive.Root.displayName;
|
|
|
227
227
|
|
|
228
228
|
// src/components/ui/form.tsx
|
|
229
229
|
var Form = FormProvider;
|
|
230
|
-
var FormFieldContext =
|
|
230
|
+
var FormFieldContext = React17.createContext(
|
|
231
231
|
{}
|
|
232
232
|
);
|
|
233
233
|
var FormField = ({
|
|
234
234
|
...props
|
|
235
235
|
}) => {
|
|
236
|
-
return /* @__PURE__ */
|
|
236
|
+
return /* @__PURE__ */ React17.createElement(FormFieldContext.Provider, { value: { name: props.name } }, /* @__PURE__ */ React17.createElement(Controller, { ...props }));
|
|
237
237
|
};
|
|
238
238
|
var useFormField = () => {
|
|
239
|
-
const fieldContext =
|
|
240
|
-
const itemContext =
|
|
239
|
+
const fieldContext = React17.useContext(FormFieldContext);
|
|
240
|
+
const itemContext = React17.useContext(FormItemContext);
|
|
241
241
|
const { getFieldState, formState } = useFormContext();
|
|
242
242
|
const fieldState = getFieldState(fieldContext.name, formState);
|
|
243
243
|
if (!fieldContext) {
|
|
@@ -253,17 +253,17 @@ var useFormField = () => {
|
|
|
253
253
|
...fieldState
|
|
254
254
|
};
|
|
255
255
|
};
|
|
256
|
-
var FormItemContext =
|
|
256
|
+
var FormItemContext = React17.createContext(
|
|
257
257
|
{}
|
|
258
258
|
);
|
|
259
|
-
var FormItem =
|
|
260
|
-
const id =
|
|
261
|
-
return /* @__PURE__ */
|
|
259
|
+
var FormItem = React17.forwardRef(({ className, ...props }, ref) => {
|
|
260
|
+
const id = React17.useId();
|
|
261
|
+
return /* @__PURE__ */ React17.createElement(FormItemContext.Provider, { value: { id } }, /* @__PURE__ */ React17.createElement("div", { ref, className: cn("sb-space-y-2", className), ...props }));
|
|
262
262
|
});
|
|
263
263
|
FormItem.displayName = "FormItem";
|
|
264
|
-
var FormLabel =
|
|
264
|
+
var FormLabel = React17.forwardRef(({ className, ...props }, ref) => {
|
|
265
265
|
const { error, formItemId } = useFormField();
|
|
266
|
-
return /* @__PURE__ */
|
|
266
|
+
return /* @__PURE__ */ React17.createElement(
|
|
267
267
|
Label,
|
|
268
268
|
{
|
|
269
269
|
ref,
|
|
@@ -274,9 +274,9 @@ var FormLabel = React12.forwardRef(({ className, ...props }, ref) => {
|
|
|
274
274
|
);
|
|
275
275
|
});
|
|
276
276
|
FormLabel.displayName = "FormLabel";
|
|
277
|
-
var FormControl =
|
|
277
|
+
var FormControl = React17.forwardRef(({ ...props }, ref) => {
|
|
278
278
|
const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
|
|
279
|
-
return /* @__PURE__ */
|
|
279
|
+
return /* @__PURE__ */ React17.createElement(
|
|
280
280
|
Slot,
|
|
281
281
|
{
|
|
282
282
|
ref,
|
|
@@ -288,9 +288,9 @@ var FormControl = React12.forwardRef(({ ...props }, ref) => {
|
|
|
288
288
|
);
|
|
289
289
|
});
|
|
290
290
|
FormControl.displayName = "FormControl";
|
|
291
|
-
var FormDescription =
|
|
291
|
+
var FormDescription = React17.forwardRef(({ className, ...props }, ref) => {
|
|
292
292
|
const { formDescriptionId } = useFormField();
|
|
293
|
-
return /* @__PURE__ */
|
|
293
|
+
return /* @__PURE__ */ React17.createElement(
|
|
294
294
|
"p",
|
|
295
295
|
{
|
|
296
296
|
ref,
|
|
@@ -304,13 +304,13 @@ var FormDescription = React12.forwardRef(({ className, ...props }, ref) => {
|
|
|
304
304
|
);
|
|
305
305
|
});
|
|
306
306
|
FormDescription.displayName = "FormDescription";
|
|
307
|
-
var FormMessage =
|
|
307
|
+
var FormMessage = React17.forwardRef(({ className, children, ...props }, ref) => {
|
|
308
308
|
const { error, formMessageId } = useFormField();
|
|
309
309
|
const body = error ? String(error?.message) : children;
|
|
310
310
|
if (!body) {
|
|
311
311
|
return null;
|
|
312
312
|
}
|
|
313
|
-
return /* @__PURE__ */
|
|
313
|
+
return /* @__PURE__ */ React17.createElement(
|
|
314
314
|
"p",
|
|
315
315
|
{
|
|
316
316
|
ref,
|
|
@@ -325,9 +325,9 @@ var FormMessage = React12.forwardRef(({ className, children, ...props }, ref) =>
|
|
|
325
325
|
);
|
|
326
326
|
});
|
|
327
327
|
FormMessage.displayName = "FormMessage";
|
|
328
|
-
var Input =
|
|
328
|
+
var Input = React17.forwardRef(
|
|
329
329
|
({ className, type, ...props }, ref) => {
|
|
330
|
-
return /* @__PURE__ */
|
|
330
|
+
return /* @__PURE__ */ React17.createElement(
|
|
331
331
|
"input",
|
|
332
332
|
{
|
|
333
333
|
type,
|
|
@@ -342,19 +342,19 @@ var Input = React12.forwardRef(
|
|
|
342
342
|
}
|
|
343
343
|
);
|
|
344
344
|
Input.displayName = "Input";
|
|
345
|
-
var AdvancedInput =
|
|
345
|
+
var AdvancedInput = React17.forwardRef(
|
|
346
346
|
({ prepend, append, ...props }, ref) => {
|
|
347
|
-
return /* @__PURE__ */
|
|
347
|
+
return /* @__PURE__ */ React17.createElement("div", { className: "sb-relative" }, /* @__PURE__ */ React17.createElement(Input, { ref, className: "sb-pl-9 sb-pr-7 sb-text-right", ...props }), prepend && /* @__PURE__ */ React17.createElement("div", { className: "sb-absolute sb-font-roboto sb-top-1/2 sb-left-3 sb--translate-y-1/2" }, prepend), append && /* @__PURE__ */ React17.createElement("div", { className: "sb-absolute sb-font-roboto sb-top-1/2 sb-right-3 sb--translate-y-1/2" }, append));
|
|
348
348
|
}
|
|
349
349
|
);
|
|
350
350
|
AdvancedInput.displayName = "AdvancedInput";
|
|
351
351
|
var MediaInput = (props) => {
|
|
352
352
|
const { onFilesChange, limit = 32, multiple = false, onError } = props;
|
|
353
|
-
const id =
|
|
354
|
-
const [queue, setQueue] =
|
|
355
|
-
const [sources, setSources] =
|
|
353
|
+
const id = React17.useId();
|
|
354
|
+
const [queue, setQueue] = React17.useState([]);
|
|
355
|
+
const [sources, setSources] = React17.useState(props.files ?? []);
|
|
356
356
|
const maxConcurrentUploads = 3;
|
|
357
|
-
const uploadingCountRef =
|
|
357
|
+
const uploadingCountRef = React17.useRef(0);
|
|
358
358
|
const handleFilesAdd = async (e) => {
|
|
359
359
|
const files = e.target.files;
|
|
360
360
|
if (!files || files.length === 0) {
|
|
@@ -425,7 +425,7 @@ var MediaInput = (props) => {
|
|
|
425
425
|
body: JSON.stringify({ src })
|
|
426
426
|
});
|
|
427
427
|
};
|
|
428
|
-
return /* @__PURE__ */
|
|
428
|
+
return /* @__PURE__ */ React17.createElement("div", { className: cn("flex flex-wrap gap-4", props.className) }, sources.map((src) => /* @__PURE__ */ React17.createElement(MediaInputItem, { key: src, className: cn("group", props.itemClassName) }, /* @__PURE__ */ React17.createElement(
|
|
429
429
|
Image,
|
|
430
430
|
{
|
|
431
431
|
src,
|
|
@@ -433,14 +433,14 @@ var MediaInput = (props) => {
|
|
|
433
433
|
fill: true,
|
|
434
434
|
className: "sb-absolute sb-inset-0 sb-object-cover sb-pointer-events-none"
|
|
435
435
|
}
|
|
436
|
-
), /* @__PURE__ */
|
|
436
|
+
), /* @__PURE__ */ React17.createElement("div", { className: "sb-absolute sb-right-1 sb-top-1 sb-z-30 sb-flex sb-items-center sb-justify-end sb-gap-3 sb-opacity-0 sb-transition-opacity group-hover:sb-opacity-100" }, /* @__PURE__ */ React17.createElement(
|
|
437
437
|
"button",
|
|
438
438
|
{
|
|
439
439
|
className: "sb-flex sb-h-8 sb-w-8 sb-items-center sb-justify-center sb-rounded-full sb-border sb-bg-secondary sb-text-secondary-foreground sb-opacity-90 sb-shadow sb-transition-opacity hover:sb-opacity-100",
|
|
440
440
|
onClick: () => handleSourceDelete(src)
|
|
441
441
|
},
|
|
442
|
-
/* @__PURE__ */
|
|
443
|
-
)))), queue.map((_, i) => /* @__PURE__ */
|
|
442
|
+
/* @__PURE__ */ React17.createElement(Trash2Icon, { className: "sb-h-4 sb-w-4" })
|
|
443
|
+
)))), queue.map((_, i) => /* @__PURE__ */ React17.createElement(
|
|
444
444
|
MediaInputItem,
|
|
445
445
|
{
|
|
446
446
|
key: i,
|
|
@@ -449,8 +449,8 @@ var MediaInput = (props) => {
|
|
|
449
449
|
props.itemClassName
|
|
450
450
|
)
|
|
451
451
|
},
|
|
452
|
-
/* @__PURE__ */
|
|
453
|
-
)), multiple || !multiple && !sources.length && !queue.length ? /* @__PURE__ */
|
|
452
|
+
/* @__PURE__ */ React17.createElement(Loader2Icon, { className: "sb-h-6 sb-w-6 sb-animate-spin" })
|
|
453
|
+
)), multiple || !multiple && !sources.length && !queue.length ? /* @__PURE__ */ React17.createElement(
|
|
454
454
|
"label",
|
|
455
455
|
{
|
|
456
456
|
htmlFor: id,
|
|
@@ -459,8 +459,8 @@ var MediaInput = (props) => {
|
|
|
459
459
|
props.itemClassName
|
|
460
460
|
)
|
|
461
461
|
},
|
|
462
|
-
/* @__PURE__ */
|
|
463
|
-
/* @__PURE__ */
|
|
462
|
+
/* @__PURE__ */ React17.createElement(PlusIcon, { className: "sb-h-6 sb-w-6" }),
|
|
463
|
+
/* @__PURE__ */ React17.createElement(
|
|
464
464
|
"input",
|
|
465
465
|
{
|
|
466
466
|
id,
|
|
@@ -474,7 +474,7 @@ var MediaInput = (props) => {
|
|
|
474
474
|
) : null);
|
|
475
475
|
};
|
|
476
476
|
var MediaInputItem = (props) => {
|
|
477
|
-
return /* @__PURE__ */
|
|
477
|
+
return /* @__PURE__ */ React17.createElement(
|
|
478
478
|
"div",
|
|
479
479
|
{
|
|
480
480
|
className: cn(
|
|
@@ -496,7 +496,7 @@ var MediaInputError = class extends Error {
|
|
|
496
496
|
};
|
|
497
497
|
var Select = SelectPrimitive.Root;
|
|
498
498
|
var SelectValue = SelectPrimitive.Value;
|
|
499
|
-
var SelectTrigger =
|
|
499
|
+
var SelectTrigger = React17.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React17.createElement(
|
|
500
500
|
SelectPrimitive.Trigger,
|
|
501
501
|
{
|
|
502
502
|
ref,
|
|
@@ -507,10 +507,10 @@ var SelectTrigger = React12.forwardRef(({ className, children, ...props }, ref)
|
|
|
507
507
|
...props
|
|
508
508
|
},
|
|
509
509
|
children,
|
|
510
|
-
/* @__PURE__ */
|
|
510
|
+
/* @__PURE__ */ React17.createElement(SelectPrimitive.Icon, { asChild: true }, /* @__PURE__ */ React17.createElement(ChevronDown, { className: "sb-h-4 sb-w-4 sb-opacity-50" }))
|
|
511
511
|
));
|
|
512
512
|
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
|
|
513
|
-
var SelectScrollUpButton =
|
|
513
|
+
var SelectScrollUpButton = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React17.createElement(
|
|
514
514
|
SelectPrimitive.ScrollUpButton,
|
|
515
515
|
{
|
|
516
516
|
ref,
|
|
@@ -520,10 +520,10 @@ var SelectScrollUpButton = React12.forwardRef(({ className, ...props }, ref) =>
|
|
|
520
520
|
),
|
|
521
521
|
...props
|
|
522
522
|
},
|
|
523
|
-
/* @__PURE__ */
|
|
523
|
+
/* @__PURE__ */ React17.createElement(ChevronUp, { className: "sb-h-4 sb-w-4" })
|
|
524
524
|
));
|
|
525
525
|
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
|
|
526
|
-
var SelectScrollDownButton =
|
|
526
|
+
var SelectScrollDownButton = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React17.createElement(
|
|
527
527
|
SelectPrimitive.ScrollDownButton,
|
|
528
528
|
{
|
|
529
529
|
ref,
|
|
@@ -533,10 +533,10 @@ var SelectScrollDownButton = React12.forwardRef(({ className, ...props }, ref) =
|
|
|
533
533
|
),
|
|
534
534
|
...props
|
|
535
535
|
},
|
|
536
|
-
/* @__PURE__ */
|
|
536
|
+
/* @__PURE__ */ React17.createElement(ChevronDown, { className: "sb-h-4 sb-w-4" })
|
|
537
537
|
));
|
|
538
538
|
SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
|
|
539
|
-
var SelectContent =
|
|
539
|
+
var SelectContent = React17.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ React17.createElement(SelectPrimitive.Portal, null, /* @__PURE__ */ React17.createElement(
|
|
540
540
|
SelectPrimitive.Content,
|
|
541
541
|
{
|
|
542
542
|
ref,
|
|
@@ -548,8 +548,8 @@ var SelectContent = React12.forwardRef(({ className, children, position = "poppe
|
|
|
548
548
|
position,
|
|
549
549
|
...props
|
|
550
550
|
},
|
|
551
|
-
/* @__PURE__ */
|
|
552
|
-
/* @__PURE__ */
|
|
551
|
+
/* @__PURE__ */ React17.createElement(SelectScrollUpButton, null),
|
|
552
|
+
/* @__PURE__ */ React17.createElement(
|
|
553
553
|
SelectPrimitive.Viewport,
|
|
554
554
|
{
|
|
555
555
|
className: cn(
|
|
@@ -559,10 +559,10 @@ var SelectContent = React12.forwardRef(({ className, children, position = "poppe
|
|
|
559
559
|
},
|
|
560
560
|
children
|
|
561
561
|
),
|
|
562
|
-
/* @__PURE__ */
|
|
562
|
+
/* @__PURE__ */ React17.createElement(SelectScrollDownButton, null)
|
|
563
563
|
)));
|
|
564
564
|
SelectContent.displayName = SelectPrimitive.Content.displayName;
|
|
565
|
-
var SelectLabel =
|
|
565
|
+
var SelectLabel = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React17.createElement(
|
|
566
566
|
SelectPrimitive.Label,
|
|
567
567
|
{
|
|
568
568
|
ref,
|
|
@@ -574,7 +574,7 @@ var SelectLabel = React12.forwardRef(({ className, ...props }, ref) => /* @__PUR
|
|
|
574
574
|
}
|
|
575
575
|
));
|
|
576
576
|
SelectLabel.displayName = SelectPrimitive.Label.displayName;
|
|
577
|
-
var SelectItem =
|
|
577
|
+
var SelectItem = React17.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React17.createElement(
|
|
578
578
|
SelectPrimitive.Item,
|
|
579
579
|
{
|
|
580
580
|
ref,
|
|
@@ -584,11 +584,11 @@ var SelectItem = React12.forwardRef(({ className, children, ...props }, ref) =>
|
|
|
584
584
|
),
|
|
585
585
|
...props
|
|
586
586
|
},
|
|
587
|
-
/* @__PURE__ */
|
|
588
|
-
/* @__PURE__ */
|
|
587
|
+
/* @__PURE__ */ React17.createElement("span", { className: "sb-absolute sb-left-2 sb-flex sb-h-3.5 sb-w-3.5 sb-items-center sb-justify-center" }, /* @__PURE__ */ React17.createElement(SelectPrimitive.ItemIndicator, null, /* @__PURE__ */ React17.createElement(Check, { className: "sb-h-4 sb-w-4" }))),
|
|
588
|
+
/* @__PURE__ */ React17.createElement(SelectPrimitive.ItemText, null, children)
|
|
589
589
|
));
|
|
590
590
|
SelectItem.displayName = SelectPrimitive.Item.displayName;
|
|
591
|
-
var SelectSeparator =
|
|
591
|
+
var SelectSeparator = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React17.createElement(
|
|
592
592
|
SelectPrimitive.Separator,
|
|
593
593
|
{
|
|
594
594
|
ref,
|
|
@@ -597,7 +597,7 @@ var SelectSeparator = React12.forwardRef(({ className, ...props }, ref) => /* @_
|
|
|
597
597
|
}
|
|
598
598
|
));
|
|
599
599
|
SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
|
|
600
|
-
var Switch =
|
|
600
|
+
var Switch = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React17.createElement(
|
|
601
601
|
SwitchPrimitives.Root,
|
|
602
602
|
{
|
|
603
603
|
className: cn(
|
|
@@ -607,7 +607,7 @@ var Switch = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
|
|
|
607
607
|
...props,
|
|
608
608
|
ref
|
|
609
609
|
},
|
|
610
|
-
/* @__PURE__ */
|
|
610
|
+
/* @__PURE__ */ React17.createElement(
|
|
611
611
|
SwitchPrimitives.Thumb,
|
|
612
612
|
{
|
|
613
613
|
className: cn(
|
|
@@ -617,9 +617,9 @@ var Switch = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
|
|
|
617
617
|
)
|
|
618
618
|
));
|
|
619
619
|
Switch.displayName = SwitchPrimitives.Root.displayName;
|
|
620
|
-
var Textarea =
|
|
620
|
+
var Textarea = React17.forwardRef(
|
|
621
621
|
({ className, ...props }, ref) => {
|
|
622
|
-
return /* @__PURE__ */
|
|
622
|
+
return /* @__PURE__ */ React17.createElement(
|
|
623
623
|
"textarea",
|
|
624
624
|
{
|
|
625
625
|
className: cn(
|
|
@@ -658,11 +658,11 @@ var ContainerItemForm = (props) => {
|
|
|
658
658
|
props: values
|
|
659
659
|
});
|
|
660
660
|
};
|
|
661
|
-
|
|
661
|
+
React17.useEffect(() => {
|
|
662
662
|
const subscription = form.watch(() => form.handleSubmit(onSubmit)());
|
|
663
663
|
return () => subscription.unsubscribe();
|
|
664
664
|
}, [form.watch, form.handleSubmit]);
|
|
665
|
-
return /* @__PURE__ */
|
|
665
|
+
return /* @__PURE__ */ React17.createElement(Form, { ...form }, /* @__PURE__ */ React17.createElement("form", { onSubmit: form.handleSubmit(onSubmit) }, /* @__PURE__ */ React17.createElement("div", { className: "sb-space-y-4 sb-p-4" }, (component.inputs || []).map((input) => /* @__PURE__ */ React17.createElement(
|
|
666
666
|
RenderFormField,
|
|
667
667
|
{
|
|
668
668
|
key: input.name,
|
|
@@ -679,16 +679,16 @@ var RenderFormField = (props) => {
|
|
|
679
679
|
name: input.name
|
|
680
680
|
});
|
|
681
681
|
if (input.multiple) {
|
|
682
|
-
return /* @__PURE__ */
|
|
683
|
-
(field, i) => type !== "grouped" ? /* @__PURE__ */
|
|
682
|
+
return /* @__PURE__ */ React17.createElement("fieldset", { className: "sb-space-y-2" }, /* @__PURE__ */ React17.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React17.createElement("div", { className: "sb-space-y-4" }, fieldArray.fields.map(
|
|
683
|
+
(field, i) => type !== "grouped" ? /* @__PURE__ */ React17.createElement(
|
|
684
684
|
FormField,
|
|
685
685
|
{
|
|
686
686
|
key: field.id,
|
|
687
687
|
control: form.control,
|
|
688
688
|
name: `${input.name}.${i}`,
|
|
689
|
-
render: ({ field: field2 }) => /* @__PURE__ */
|
|
689
|
+
render: ({ field: field2 }) => /* @__PURE__ */ React17.createElement("div", { className: "sb-flex sb-items-center sb-gap-3" }, /* @__PURE__ */ React17.createElement(RenderInput, { field: field2, type: input.type }), /* @__PURE__ */ React17.createElement("button", { type: "button", onClick: () => fieldArray.remove(i) }, /* @__PURE__ */ React17.createElement(XIcon, { className: "sb-h-4 sb-w-4" })))
|
|
690
690
|
}
|
|
691
|
-
) : /* @__PURE__ */
|
|
691
|
+
) : /* @__PURE__ */ React17.createElement("div", { className: "sb-flex sb-items-center sb-relative" }, /* @__PURE__ */ React17.createElement(
|
|
692
692
|
RenderFormField,
|
|
693
693
|
{
|
|
694
694
|
key: field.id,
|
|
@@ -701,16 +701,16 @@ var RenderFormField = (props) => {
|
|
|
701
701
|
friendlyName: ""
|
|
702
702
|
}
|
|
703
703
|
}
|
|
704
|
-
), /* @__PURE__ */
|
|
704
|
+
), /* @__PURE__ */ React17.createElement(
|
|
705
705
|
"button",
|
|
706
706
|
{
|
|
707
707
|
type: "button",
|
|
708
708
|
onClick: () => fieldArray.remove(i),
|
|
709
709
|
className: "sb-absolute sb-top-2 sb-right-2 sb-text-foreground/70 hover:sb-text-foreground"
|
|
710
710
|
},
|
|
711
|
-
/* @__PURE__ */
|
|
711
|
+
/* @__PURE__ */ React17.createElement(XIcon, { className: "sb-h-4 sb-w-4" })
|
|
712
712
|
))
|
|
713
|
-
), /* @__PURE__ */
|
|
713
|
+
), /* @__PURE__ */ React17.createElement(
|
|
714
714
|
Button,
|
|
715
715
|
{
|
|
716
716
|
type: "button",
|
|
@@ -722,7 +722,7 @@ var RenderFormField = (props) => {
|
|
|
722
722
|
),
|
|
723
723
|
onClick: () => fieldArray.append(void 0)
|
|
724
724
|
},
|
|
725
|
-
/* @__PURE__ */
|
|
725
|
+
/* @__PURE__ */ React17.createElement(PlusCircleIcon, { className: "sb-h-4 sb-w-4" })
|
|
726
726
|
)));
|
|
727
727
|
}
|
|
728
728
|
switch (type) {
|
|
@@ -733,27 +733,27 @@ var RenderFormField = (props) => {
|
|
|
733
733
|
case "color":
|
|
734
734
|
case "date":
|
|
735
735
|
case "file":
|
|
736
|
-
return /* @__PURE__ */
|
|
736
|
+
return /* @__PURE__ */ React17.createElement(
|
|
737
737
|
FormField,
|
|
738
738
|
{
|
|
739
739
|
key: input.name,
|
|
740
740
|
control: form.control,
|
|
741
741
|
name: input.name,
|
|
742
|
-
render: ({ field }) => /* @__PURE__ */
|
|
742
|
+
render: ({ field }) => /* @__PURE__ */ React17.createElement(FormItem, null, /* @__PURE__ */ React17.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React17.createElement(FormControl, null, /* @__PURE__ */ React17.createElement(RenderInput, { type, field, options: input?.enum })), input.helperText && /* @__PURE__ */ React17.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React17.createElement(FormMessage, null))
|
|
743
743
|
}
|
|
744
744
|
);
|
|
745
745
|
case "boolean":
|
|
746
|
-
return /* @__PURE__ */
|
|
746
|
+
return /* @__PURE__ */ React17.createElement(
|
|
747
747
|
FormField,
|
|
748
748
|
{
|
|
749
749
|
key: input.name,
|
|
750
750
|
control: form.control,
|
|
751
751
|
name: input.name,
|
|
752
|
-
render: ({ field }) => /* @__PURE__ */
|
|
752
|
+
render: ({ field }) => /* @__PURE__ */ React17.createElement(FormItem, { className: "sb-flex sb-flex-row sb-items-center sb-justify-between sb-space-y-0" }, /* @__PURE__ */ React17.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React17.createElement(FormControl, null, /* @__PURE__ */ React17.createElement(RenderInput, { type, field })), input.helperText && /* @__PURE__ */ React17.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React17.createElement(FormMessage, null))
|
|
753
753
|
}
|
|
754
754
|
);
|
|
755
755
|
case "grouped":
|
|
756
|
-
return /* @__PURE__ */
|
|
756
|
+
return /* @__PURE__ */ React17.createElement("div", { className: "sb-space-y-2 sb-w-full" }, input.friendlyName !== "" && /* @__PURE__ */ React17.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React17.createElement("div", { className: "sb-space-y-2 sb-p-3 sb-w-full sb-border sb-rounded-lg" }, input.inputs.map((sub) => /* @__PURE__ */ React17.createElement(
|
|
757
757
|
RenderFormField,
|
|
758
758
|
{
|
|
759
759
|
key: `${input.name}.${sub.name}`,
|
|
@@ -776,17 +776,17 @@ var RenderInput = (props) => {
|
|
|
776
776
|
switch (type) {
|
|
777
777
|
case "string":
|
|
778
778
|
if (!options)
|
|
779
|
-
return /* @__PURE__ */
|
|
780
|
-
return /* @__PURE__ */
|
|
779
|
+
return /* @__PURE__ */ React17.createElement(Input, { ...field });
|
|
780
|
+
return /* @__PURE__ */ React17.createElement(Select, { onValueChange: field.onChange, defaultValue: field.value }, /* @__PURE__ */ React17.createElement(SelectTrigger, null, /* @__PURE__ */ React17.createElement(SelectValue, null)), /* @__PURE__ */ React17.createElement(SelectContent, null, options.map((option) => /* @__PURE__ */ React17.createElement(SelectItem, { key: option, value: option }, option))));
|
|
781
781
|
case "longText":
|
|
782
782
|
case "richText":
|
|
783
|
-
return /* @__PURE__ */
|
|
783
|
+
return /* @__PURE__ */ React17.createElement(Textarea, { ...field });
|
|
784
784
|
case "number":
|
|
785
|
-
return /* @__PURE__ */
|
|
785
|
+
return /* @__PURE__ */ React17.createElement(Input, { type: "number", ...field });
|
|
786
786
|
case "color":
|
|
787
|
-
return /* @__PURE__ */
|
|
787
|
+
return /* @__PURE__ */ React17.createElement(ColorPicker, { color: field.value, onColorChange: field.onChange });
|
|
788
788
|
case "date":
|
|
789
|
-
return /* @__PURE__ */
|
|
789
|
+
return /* @__PURE__ */ React17.createElement(Popover, null, /* @__PURE__ */ React17.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React17.createElement(
|
|
790
790
|
Button,
|
|
791
791
|
{
|
|
792
792
|
variant: "outline",
|
|
@@ -796,9 +796,9 @@ var RenderInput = (props) => {
|
|
|
796
796
|
!field.value && "sb-text-muted-foreground"
|
|
797
797
|
)
|
|
798
798
|
},
|
|
799
|
-
/* @__PURE__ */
|
|
800
|
-
field.value && !Array.isArray(field.value) ? format(field.value, "PPP") : /* @__PURE__ */
|
|
801
|
-
)), /* @__PURE__ */
|
|
799
|
+
/* @__PURE__ */ React17.createElement(CalendarIcon, { className: "sb-mr-2 sb-h-4 sb-w-4" }),
|
|
800
|
+
field.value && !Array.isArray(field.value) ? format(field.value, "PPP") : /* @__PURE__ */ React17.createElement("span", null, "Pick a date")
|
|
801
|
+
)), /* @__PURE__ */ React17.createElement(PopoverContent, { className: "sb-w-auto sb-p-0", align: "start" }, /* @__PURE__ */ React17.createElement(
|
|
802
802
|
Calendar,
|
|
803
803
|
{
|
|
804
804
|
mode: "single",
|
|
@@ -808,9 +808,9 @@ var RenderInput = (props) => {
|
|
|
808
808
|
}
|
|
809
809
|
)));
|
|
810
810
|
case "boolean":
|
|
811
|
-
return /* @__PURE__ */
|
|
811
|
+
return /* @__PURE__ */ React17.createElement(Switch, { checked: field.value, onCheckedChange: field.onChange });
|
|
812
812
|
case "file":
|
|
813
|
-
return /* @__PURE__ */
|
|
813
|
+
return /* @__PURE__ */ React17.createElement(
|
|
814
814
|
MediaInput,
|
|
815
815
|
{
|
|
816
816
|
className: "sb-grid sb-grid-cols-2 sb-gap-1",
|
|
@@ -842,7 +842,7 @@ var tabsListVariants = tv({
|
|
|
842
842
|
variant: "contained"
|
|
843
843
|
}
|
|
844
844
|
});
|
|
845
|
-
var TabsList =
|
|
845
|
+
var TabsList = React17.forwardRef(({ variant, className, ...props }, ref) => /* @__PURE__ */ React17.createElement(
|
|
846
846
|
TabsPrimitive.List,
|
|
847
847
|
{
|
|
848
848
|
ref,
|
|
@@ -862,7 +862,7 @@ var tabsTriggerVariants = tv({
|
|
|
862
862
|
variant: "contained"
|
|
863
863
|
}
|
|
864
864
|
});
|
|
865
|
-
var TabsTrigger =
|
|
865
|
+
var TabsTrigger = React17.forwardRef(({ variant, className, ...props }, ref) => /* @__PURE__ */ React17.createElement(
|
|
866
866
|
TabsPrimitive.Trigger,
|
|
867
867
|
{
|
|
868
868
|
ref,
|
|
@@ -871,7 +871,7 @@ var TabsTrigger = React12.forwardRef(({ variant, className, ...props }, ref) =>
|
|
|
871
871
|
}
|
|
872
872
|
));
|
|
873
873
|
TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
|
|
874
|
-
var TabsContent =
|
|
874
|
+
var TabsContent = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React17.createElement(
|
|
875
875
|
TabsPrimitive.Content,
|
|
876
876
|
{
|
|
877
877
|
ref,
|
|
@@ -906,14 +906,14 @@ var BackgroundPicker = (props) => {
|
|
|
906
906
|
"url(https://images.unsplash.com/photo-1688822863426-8c5f9b257090?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2532&q=90)",
|
|
907
907
|
"url(https://images.unsplash.com/photo-1691225850735-6e4e51834cad?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2532&q=90)"
|
|
908
908
|
];
|
|
909
|
-
const defaultTab =
|
|
909
|
+
const defaultTab = React17.useMemo(() => {
|
|
910
910
|
if (background.includes("url"))
|
|
911
911
|
return "image";
|
|
912
912
|
if (background.includes("gradient"))
|
|
913
913
|
return "gradient";
|
|
914
914
|
return "solid";
|
|
915
915
|
}, [background]);
|
|
916
|
-
return /* @__PURE__ */
|
|
916
|
+
return /* @__PURE__ */ React17.createElement(Popover, null, /* @__PURE__ */ React17.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React17.createElement(
|
|
917
917
|
Button,
|
|
918
918
|
{
|
|
919
919
|
variant: "outline",
|
|
@@ -924,20 +924,20 @@ var BackgroundPicker = (props) => {
|
|
|
924
924
|
className
|
|
925
925
|
)
|
|
926
926
|
},
|
|
927
|
-
/* @__PURE__ */
|
|
927
|
+
/* @__PURE__ */ React17.createElement("div", { className: "sb-w-full sb-flex sb-items-center sb-gap-2" }, background ? /* @__PURE__ */ React17.createElement(
|
|
928
928
|
"div",
|
|
929
929
|
{
|
|
930
930
|
className: "sb-h-4 sb-w-4 sb-rounded !sb-bg-center !sb-bg-cover sb-transition-all sb-border",
|
|
931
931
|
style: { background }
|
|
932
932
|
}
|
|
933
|
-
) : /* @__PURE__ */
|
|
934
|
-
)), /* @__PURE__ */
|
|
933
|
+
) : /* @__PURE__ */ React17.createElement(PaintbrushIcon, { className: "sb-h-4 sb-w-4" }), /* @__PURE__ */ React17.createElement("div", { className: "sb-truncate sb-flex-1" }, background ? background : "Kies een achtergrond"))
|
|
934
|
+
)), /* @__PURE__ */ React17.createElement(PopoverContent, { className: "sb-w-64 sb-p-0" }, /* @__PURE__ */ React17.createElement(Tabs, { defaultValue: defaultTab }, /* @__PURE__ */ React17.createElement(TabsList, { className: "sb-w-full" }, /* @__PURE__ */ React17.createElement(TabsTrigger, { className: "sb-flex-1", value: "solid" }, "Solid"), /* @__PURE__ */ React17.createElement(TabsTrigger, { className: "sb-flex-1", value: "gradient" }, "Gradient"), /* @__PURE__ */ React17.createElement(TabsTrigger, { className: "sb-flex-1", value: "image" }, "Image")), /* @__PURE__ */ React17.createElement(
|
|
935
935
|
TabsContent,
|
|
936
936
|
{
|
|
937
937
|
value: "solid",
|
|
938
938
|
className: "data-[state=active]:sb-flex sb-flex-wrap sb-gap-1 sb-p-4"
|
|
939
939
|
},
|
|
940
|
-
solids.map((s) => /* @__PURE__ */
|
|
940
|
+
solids.map((s) => /* @__PURE__ */ React17.createElement(
|
|
941
941
|
"div",
|
|
942
942
|
{
|
|
943
943
|
key: s,
|
|
@@ -946,13 +946,13 @@ var BackgroundPicker = (props) => {
|
|
|
946
946
|
onClick: () => onBackgroundChange(s)
|
|
947
947
|
}
|
|
948
948
|
))
|
|
949
|
-
), /* @__PURE__ */
|
|
949
|
+
), /* @__PURE__ */ React17.createElement(
|
|
950
950
|
TabsContent,
|
|
951
951
|
{
|
|
952
952
|
value: "gradient",
|
|
953
953
|
className: "data-[state=active]:sb-flex sb-flex-wrap sb-gap-1 sb-p-4"
|
|
954
954
|
},
|
|
955
|
-
gradients.map((s) => /* @__PURE__ */
|
|
955
|
+
gradients.map((s) => /* @__PURE__ */ React17.createElement(
|
|
956
956
|
"div",
|
|
957
957
|
{
|
|
958
958
|
key: s,
|
|
@@ -961,7 +961,7 @@ var BackgroundPicker = (props) => {
|
|
|
961
961
|
onClick: () => onBackgroundChange(s)
|
|
962
962
|
}
|
|
963
963
|
))
|
|
964
|
-
), /* @__PURE__ */
|
|
964
|
+
), /* @__PURE__ */ React17.createElement(TabsContent, { value: "image" }, /* @__PURE__ */ React17.createElement("div", { className: "sb-p-4 sb-border-b" }, /* @__PURE__ */ React17.createElement(
|
|
965
965
|
MediaInput,
|
|
966
966
|
{
|
|
967
967
|
className: "sb-grid sb-grid-cols-2 sb-gap-1",
|
|
@@ -977,7 +977,7 @@ var BackgroundPicker = (props) => {
|
|
|
977
977
|
"media-input: Error: " + e?.description
|
|
978
978
|
)
|
|
979
979
|
}
|
|
980
|
-
)), /* @__PURE__ */
|
|
980
|
+
)), /* @__PURE__ */ React17.createElement("div", { className: "sb-grid sb-grid-cols-2 sb-gap-1 sb-p-4" }, images.map((s) => /* @__PURE__ */ React17.createElement(
|
|
981
981
|
"div",
|
|
982
982
|
{
|
|
983
983
|
key: s,
|
|
@@ -1005,7 +1005,7 @@ var toggleVariants = tv({
|
|
|
1005
1005
|
size: "default"
|
|
1006
1006
|
}
|
|
1007
1007
|
});
|
|
1008
|
-
var Toggle =
|
|
1008
|
+
var Toggle = React17.forwardRef(({ className, variant, size, ...props }, ref) => /* @__PURE__ */ React17.createElement(
|
|
1009
1009
|
TogglePrimitive.Root,
|
|
1010
1010
|
{
|
|
1011
1011
|
ref,
|
|
@@ -1017,70 +1017,70 @@ Toggle.displayName = TogglePrimitive.Root.displayName;
|
|
|
1017
1017
|
|
|
1018
1018
|
// src/components/ui/spacing-input.tsx
|
|
1019
1019
|
var SpacingInput = (props) => {
|
|
1020
|
-
const [value, setValue] =
|
|
1021
|
-
const [indipendent, setIndipendent] =
|
|
1020
|
+
const [value, setValue] = React17.useState(parse(props.value || "0px"));
|
|
1021
|
+
const [indipendent, setIndipendent] = React17.useState(
|
|
1022
1022
|
isIndipendent(parse(props.value || "0px"))
|
|
1023
1023
|
);
|
|
1024
|
-
|
|
1024
|
+
React17.useEffect(() => {
|
|
1025
1025
|
if (!props.onChange)
|
|
1026
1026
|
return;
|
|
1027
1027
|
props.onChange(stringify(value));
|
|
1028
1028
|
}, [value, props.onChange]);
|
|
1029
|
-
return /* @__PURE__ */
|
|
1029
|
+
return /* @__PURE__ */ React17.createElement("div", { className: "sb-grid sb-grid-cols-[1fr,auto] sb-gap-3" }, /* @__PURE__ */ React17.createElement("div", { className: "sb-grid sb-grid-cols-2 sb-items-center sb-gap-3" }, !indipendent ? /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement(
|
|
1030
1030
|
AdvancedInput,
|
|
1031
1031
|
{
|
|
1032
1032
|
value: value.left,
|
|
1033
1033
|
pattern: "\\d+",
|
|
1034
1034
|
onChange: ({ target: { value: value2 } }) => setValue((prev) => ({ ...prev, left: +value2, right: +value2 })),
|
|
1035
|
-
prepend: /* @__PURE__ */
|
|
1036
|
-
append: /* @__PURE__ */
|
|
1035
|
+
prepend: /* @__PURE__ */ React17.createElement(AlignHorizontalSpaceAroundIcon, { className: "sb-h-4 sb-w-4" }),
|
|
1036
|
+
append: /* @__PURE__ */ React17.createElement("span", { className: "sb-text-muted-foreground" }, "px")
|
|
1037
1037
|
}
|
|
1038
|
-
), /* @__PURE__ */
|
|
1038
|
+
), /* @__PURE__ */ React17.createElement(
|
|
1039
1039
|
AdvancedInput,
|
|
1040
1040
|
{
|
|
1041
1041
|
value: value.top,
|
|
1042
1042
|
pattern: "\\d+",
|
|
1043
1043
|
onChange: ({ target: { value: value2 } }) => setValue((prev) => ({ ...prev, top: +value2, bottom: +value2 })),
|
|
1044
|
-
prepend: /* @__PURE__ */
|
|
1045
|
-
append: /* @__PURE__ */
|
|
1044
|
+
prepend: /* @__PURE__ */ React17.createElement(AlignHorizontalSpaceAroundIcon, { className: "sb-h-4 sb-w-4 sb-rotate-90" }),
|
|
1045
|
+
append: /* @__PURE__ */ React17.createElement("span", { className: "sb-text-muted-foreground" }, "px")
|
|
1046
1046
|
}
|
|
1047
|
-
)) : /* @__PURE__ */
|
|
1047
|
+
)) : /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement(
|
|
1048
1048
|
AdvancedInput,
|
|
1049
1049
|
{
|
|
1050
1050
|
value: value.left,
|
|
1051
1051
|
pattern: "\\d+",
|
|
1052
1052
|
onChange: ({ target: { value: value2 } }) => setValue((prev) => ({ ...prev, left: +value2 })),
|
|
1053
|
-
prepend: /* @__PURE__ */
|
|
1054
|
-
append: /* @__PURE__ */
|
|
1053
|
+
prepend: /* @__PURE__ */ React17.createElement(AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4" }),
|
|
1054
|
+
append: /* @__PURE__ */ React17.createElement("span", { className: "sb-text-muted-foreground" }, "px")
|
|
1055
1055
|
}
|
|
1056
|
-
), /* @__PURE__ */
|
|
1056
|
+
), /* @__PURE__ */ React17.createElement(
|
|
1057
1057
|
AdvancedInput,
|
|
1058
1058
|
{
|
|
1059
1059
|
value: value.top,
|
|
1060
1060
|
pattern: "\\d+",
|
|
1061
1061
|
onChange: ({ target: { value: value2 } }) => setValue((prev) => ({ ...prev, top: +value2 })),
|
|
1062
|
-
prepend: /* @__PURE__ */
|
|
1063
|
-
append: /* @__PURE__ */
|
|
1062
|
+
prepend: /* @__PURE__ */ React17.createElement(AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb-rotate-90" }),
|
|
1063
|
+
append: /* @__PURE__ */ React17.createElement("span", { className: "sb-text-muted-foreground" }, "px")
|
|
1064
1064
|
}
|
|
1065
|
-
), /* @__PURE__ */
|
|
1065
|
+
), /* @__PURE__ */ React17.createElement(
|
|
1066
1066
|
AdvancedInput,
|
|
1067
1067
|
{
|
|
1068
1068
|
value: value.right,
|
|
1069
1069
|
pattern: "\\d+",
|
|
1070
1070
|
onChange: ({ target: { value: value2 } }) => setValue((prev) => ({ ...prev, right: +value2 })),
|
|
1071
|
-
prepend: /* @__PURE__ */
|
|
1072
|
-
append: /* @__PURE__ */
|
|
1071
|
+
prepend: /* @__PURE__ */ React17.createElement(AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb-rotate-180" }),
|
|
1072
|
+
append: /* @__PURE__ */ React17.createElement("span", { className: "sb-text-muted-foreground" }, "px")
|
|
1073
1073
|
}
|
|
1074
|
-
), /* @__PURE__ */
|
|
1074
|
+
), /* @__PURE__ */ React17.createElement(
|
|
1075
1075
|
AdvancedInput,
|
|
1076
1076
|
{
|
|
1077
1077
|
value: value.bottom,
|
|
1078
1078
|
pattern: "\\d+",
|
|
1079
1079
|
onChange: ({ target: { value: value2 } }) => setValue((prev) => ({ ...prev, bottom: +value2 })),
|
|
1080
|
-
prepend: /* @__PURE__ */
|
|
1081
|
-
append: /* @__PURE__ */
|
|
1080
|
+
prepend: /* @__PURE__ */ React17.createElement(AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb--rotate-90" }),
|
|
1081
|
+
append: /* @__PURE__ */ React17.createElement("span", { className: "sb-text-muted-foreground" }, "px")
|
|
1082
1082
|
}
|
|
1083
|
-
))), /* @__PURE__ */
|
|
1083
|
+
))), /* @__PURE__ */ React17.createElement("div", { className: "sb-shrink-0" }, /* @__PURE__ */ React17.createElement(
|
|
1084
1084
|
Toggle,
|
|
1085
1085
|
{
|
|
1086
1086
|
className: "sb-shrink-0 sb-flex sb-w-8 sb-h-8 sb-p-0",
|
|
@@ -1089,7 +1089,7 @@ var SpacingInput = (props) => {
|
|
|
1089
1089
|
pressed: indipendent,
|
|
1090
1090
|
onPressedChange: setIndipendent
|
|
1091
1091
|
},
|
|
1092
|
-
/* @__PURE__ */
|
|
1092
|
+
/* @__PURE__ */ React17.createElement(ScanIcon, { className: "sb-h-4 sb-w-4" })
|
|
1093
1093
|
)));
|
|
1094
1094
|
};
|
|
1095
1095
|
var isIndipendent = (value) => {
|
|
@@ -1127,6 +1127,7 @@ var stringify = (value) => {
|
|
|
1127
1127
|
// src/components/item-design-form.tsx
|
|
1128
1128
|
var designSchema = z.object({
|
|
1129
1129
|
container: z.coerce.boolean(),
|
|
1130
|
+
hidden: z.enum(["always", "mobile", "desktop", "never"]),
|
|
1130
1131
|
desktop: z.object({
|
|
1131
1132
|
background: z.string(),
|
|
1132
1133
|
color: z.string(),
|
|
@@ -1179,13 +1180,14 @@ var ItemDesignForm = (props) => {
|
|
|
1179
1180
|
resolver: zodResolver(designSchema),
|
|
1180
1181
|
values: {
|
|
1181
1182
|
container: item.styles?.container ?? true,
|
|
1183
|
+
hidden: item.styles?.hidden ?? "never",
|
|
1182
1184
|
desktop: getDefaultDeviceValues("desktop"),
|
|
1183
1185
|
mobile: getDefaultDeviceValues("mobile")
|
|
1184
1186
|
}
|
|
1185
1187
|
});
|
|
1186
1188
|
const { patchItem } = useBuilder();
|
|
1187
1189
|
const onSubmit = (values) => {
|
|
1188
|
-
const { container, desktop, mobile } = values;
|
|
1190
|
+
const { container, hidden, desktop, mobile } = values;
|
|
1189
1191
|
const dirtyFields = form.formState.dirtyFields;
|
|
1190
1192
|
const desktopPatch = Object.entries(desktop).reduce(
|
|
1191
1193
|
(acc, [key, value]) => ({
|
|
@@ -1216,107 +1218,115 @@ var ItemDesignForm = (props) => {
|
|
|
1216
1218
|
patchItem(item.id, {
|
|
1217
1219
|
styles: {
|
|
1218
1220
|
...container === false && { container },
|
|
1221
|
+
...hidden !== "never" && { hidden },
|
|
1219
1222
|
...Object.keys(desktopPatch).length && { desktop: desktopPatch },
|
|
1220
1223
|
...Object.keys(mobilePatch).length && { mobile: mobilePatch }
|
|
1221
1224
|
}
|
|
1222
1225
|
});
|
|
1223
1226
|
};
|
|
1224
|
-
const [device, setDevice] =
|
|
1225
|
-
|
|
1227
|
+
const [device, setDevice] = React17.useState("desktop");
|
|
1228
|
+
React17.useEffect(() => {
|
|
1226
1229
|
const subscription = form.watch(() => form.handleSubmit(onSubmit)());
|
|
1227
1230
|
return () => subscription.unsubscribe();
|
|
1228
1231
|
}, [form.watch, form.handleSubmit]);
|
|
1229
|
-
return /* @__PURE__ */
|
|
1232
|
+
return /* @__PURE__ */ React17.createElement(Form, { ...form }, /* @__PURE__ */ React17.createElement("form", { onSubmit: form.handleSubmit(onSubmit) }, /* @__PURE__ */ React17.createElement("div", { className: "sb-space-y-4 sb-p-4" }, /* @__PURE__ */ React17.createElement(
|
|
1230
1233
|
Tabs,
|
|
1231
1234
|
{
|
|
1232
1235
|
defaultValue: device,
|
|
1233
1236
|
onValueChange: (device2) => setDevice(device2)
|
|
1234
1237
|
},
|
|
1235
|
-
/* @__PURE__ */
|
|
1236
|
-
), /* @__PURE__ */
|
|
1238
|
+
/* @__PURE__ */ React17.createElement(TabsList, { className: "sb-h-9 sb-grid sb-w-full sb-grid-cols-2" }, /* @__PURE__ */ React17.createElement(TabsTrigger, { value: "desktop", className: "sb-text-xs" }, /* @__PURE__ */ React17.createElement(MonitorIcon, { className: "sb-h-4 sb-w-4 sb-mr-2" }), /* @__PURE__ */ React17.createElement("span", null, "Desktop")), /* @__PURE__ */ React17.createElement(TabsTrigger, { value: "mobile", className: "sb-text-xs" }, /* @__PURE__ */ React17.createElement(SmartphoneIcon, { className: "sb-h-4 sb-w-4 sb-mr-2" }), /* @__PURE__ */ React17.createElement("span", null, "Mobiel")))
|
|
1239
|
+
), /* @__PURE__ */ React17.createElement("div", { className: "sb-space-y-4" }, /* @__PURE__ */ React17.createElement(
|
|
1237
1240
|
FormField,
|
|
1238
1241
|
{
|
|
1239
1242
|
control: form.control,
|
|
1240
1243
|
key: `${device}.background`,
|
|
1241
1244
|
name: `${device}.background`,
|
|
1242
|
-
render: ({ field }) => /* @__PURE__ */
|
|
1245
|
+
render: ({ field }) => /* @__PURE__ */ React17.createElement(FormItem, null, /* @__PURE__ */ React17.createElement(FormLabel, null, "Achtergrond"), /* @__PURE__ */ React17.createElement(FormControl, null, /* @__PURE__ */ React17.createElement(
|
|
1243
1246
|
BackgroundPicker,
|
|
1244
1247
|
{
|
|
1245
1248
|
background: field.value,
|
|
1246
1249
|
onBackgroundChange: field.onChange
|
|
1247
1250
|
}
|
|
1248
|
-
)), /* @__PURE__ */
|
|
1251
|
+
)), /* @__PURE__ */ React17.createElement(FormMessage, null))
|
|
1249
1252
|
}
|
|
1250
|
-
), /* @__PURE__ */
|
|
1253
|
+
), /* @__PURE__ */ React17.createElement(
|
|
1251
1254
|
FormField,
|
|
1252
1255
|
{
|
|
1253
1256
|
control: form.control,
|
|
1254
1257
|
key: `${device}.color`,
|
|
1255
1258
|
name: `${device}.color`,
|
|
1256
|
-
render: ({ field }) => /* @__PURE__ */
|
|
1259
|
+
render: ({ field }) => /* @__PURE__ */ React17.createElement(FormItem, null, /* @__PURE__ */ React17.createElement(FormLabel, null, "Inhoud kleur"), /* @__PURE__ */ React17.createElement(FormControl, null, /* @__PURE__ */ React17.createElement(
|
|
1257
1260
|
ColorPicker,
|
|
1258
1261
|
{
|
|
1259
1262
|
color: field.value,
|
|
1260
1263
|
onColorChange: field.onChange
|
|
1261
1264
|
}
|
|
1262
|
-
)), /* @__PURE__ */
|
|
1265
|
+
)), /* @__PURE__ */ React17.createElement(FormMessage, null))
|
|
1263
1266
|
}
|
|
1264
|
-
), /* @__PURE__ */
|
|
1267
|
+
), /* @__PURE__ */ React17.createElement("hr", null), /* @__PURE__ */ React17.createElement(
|
|
1268
|
+
FormField,
|
|
1269
|
+
{
|
|
1270
|
+
control: form.control,
|
|
1271
|
+
name: "hidden",
|
|
1272
|
+
render: ({ field }) => /* @__PURE__ */ React17.createElement(FormItem, null, /* @__PURE__ */ React17.createElement(FormLabel, null, "Verbergen"), /* @__PURE__ */ React17.createElement(FormControl, null, /* @__PURE__ */ React17.createElement(Select, { value: field.value, onValueChange: field.onChange }, /* @__PURE__ */ React17.createElement(SelectTrigger, null, /* @__PURE__ */ React17.createElement(SelectValue, null)), /* @__PURE__ */ React17.createElement(SelectContent, null, /* @__PURE__ */ React17.createElement(SelectItem, { value: "never" }, "Nooit"), /* @__PURE__ */ React17.createElement(SelectItem, { value: "desktop" }, "Op desktop"), /* @__PURE__ */ React17.createElement(SelectItem, { value: "mobile" }, "Op mobiel"), /* @__PURE__ */ React17.createElement(SelectItem, { value: "always" }, "Altijd")))), /* @__PURE__ */ React17.createElement(FormMessage, null))
|
|
1273
|
+
}
|
|
1274
|
+
), /* @__PURE__ */ React17.createElement("hr", null), /* @__PURE__ */ React17.createElement(
|
|
1265
1275
|
FormField,
|
|
1266
1276
|
{
|
|
1267
1277
|
control: form.control,
|
|
1268
1278
|
name: "container",
|
|
1269
|
-
render: ({ field }) => /* @__PURE__ */
|
|
1279
|
+
render: ({ field }) => /* @__PURE__ */ React17.createElement(FormItem, { className: "sb-flex sb-flex-row sb-items-center sb-justify-between sb-space-y-0" }, /* @__PURE__ */ React17.createElement(FormLabel, null, "Volledige breedte"), /* @__PURE__ */ React17.createElement(FormControl, null, /* @__PURE__ */ React17.createElement(
|
|
1270
1280
|
Switch,
|
|
1271
1281
|
{
|
|
1272
1282
|
checked: !field.value,
|
|
1273
1283
|
onCheckedChange: (v) => field.onChange(!v)
|
|
1274
1284
|
}
|
|
1275
|
-
)), /* @__PURE__ */
|
|
1285
|
+
)), /* @__PURE__ */ React17.createElement(FormMessage, null))
|
|
1276
1286
|
}
|
|
1277
|
-
), /* @__PURE__ */
|
|
1287
|
+
), /* @__PURE__ */ React17.createElement("hr", null), /* @__PURE__ */ React17.createElement(
|
|
1278
1288
|
FormField,
|
|
1279
1289
|
{
|
|
1280
1290
|
control: form.control,
|
|
1281
1291
|
key: `${device}.padding`,
|
|
1282
1292
|
name: `${device}.padding`,
|
|
1283
|
-
render: ({ field }) => /* @__PURE__ */
|
|
1293
|
+
render: ({ field }) => /* @__PURE__ */ React17.createElement(FormItem, null, /* @__PURE__ */ React17.createElement(FormLabel, null, "Padding"), /* @__PURE__ */ React17.createElement(FormControl, null, /* @__PURE__ */ React17.createElement(
|
|
1284
1294
|
SpacingInput,
|
|
1285
1295
|
{
|
|
1286
1296
|
value: field.value,
|
|
1287
1297
|
onChange: field.onChange
|
|
1288
1298
|
}
|
|
1289
|
-
)), /* @__PURE__ */
|
|
1299
|
+
)), /* @__PURE__ */ React17.createElement(FormMessage, null))
|
|
1290
1300
|
}
|
|
1291
|
-
), /* @__PURE__ */
|
|
1301
|
+
), /* @__PURE__ */ React17.createElement(
|
|
1292
1302
|
FormField,
|
|
1293
1303
|
{
|
|
1294
1304
|
control: form.control,
|
|
1295
1305
|
key: `${device}.margin`,
|
|
1296
1306
|
name: `${device}.margin`,
|
|
1297
|
-
render: ({ field }) => /* @__PURE__ */
|
|
1307
|
+
render: ({ field }) => /* @__PURE__ */ React17.createElement(FormItem, null, /* @__PURE__ */ React17.createElement(FormLabel, null, "Margin"), /* @__PURE__ */ React17.createElement(FormControl, null, /* @__PURE__ */ React17.createElement(
|
|
1298
1308
|
SpacingInput,
|
|
1299
1309
|
{
|
|
1300
1310
|
value: field.value,
|
|
1301
1311
|
onChange: field.onChange
|
|
1302
1312
|
}
|
|
1303
|
-
)), /* @__PURE__ */
|
|
1313
|
+
)), /* @__PURE__ */ React17.createElement(FormMessage, null))
|
|
1304
1314
|
}
|
|
1305
1315
|
)))));
|
|
1306
1316
|
};
|
|
1307
|
-
var ScrollArea =
|
|
1317
|
+
var ScrollArea = React17.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React17.createElement(
|
|
1308
1318
|
ScrollAreaPrimitive.Root,
|
|
1309
1319
|
{
|
|
1310
1320
|
ref,
|
|
1311
1321
|
className: cn("sb-relative sb-overflow-hidden", className),
|
|
1312
1322
|
...props
|
|
1313
1323
|
},
|
|
1314
|
-
/* @__PURE__ */
|
|
1315
|
-
/* @__PURE__ */
|
|
1316
|
-
/* @__PURE__ */
|
|
1324
|
+
/* @__PURE__ */ React17.createElement(ScrollAreaPrimitive.Viewport, { className: "sb-h-full sb-max-h-[80vh] sb-w-full sb-rounded-[inherit]" }, children),
|
|
1325
|
+
/* @__PURE__ */ React17.createElement(ScrollBar, null),
|
|
1326
|
+
/* @__PURE__ */ React17.createElement(ScrollAreaPrimitive.Corner, null)
|
|
1317
1327
|
));
|
|
1318
1328
|
ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
|
|
1319
|
-
var ScrollBar =
|
|
1329
|
+
var ScrollBar = React17.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ React17.createElement(
|
|
1320
1330
|
ScrollAreaPrimitive.ScrollAreaScrollbar,
|
|
1321
1331
|
{
|
|
1322
1332
|
ref,
|
|
@@ -1329,7 +1339,7 @@ var ScrollBar = React12.forwardRef(({ className, orientation = "vertical", ...pr
|
|
|
1329
1339
|
),
|
|
1330
1340
|
...props
|
|
1331
1341
|
},
|
|
1332
|
-
/* @__PURE__ */
|
|
1342
|
+
/* @__PURE__ */ React17.createElement(ScrollAreaPrimitive.ScrollAreaThumb, { className: "sb-relative sb-flex-1 sb-rounded-full sb-bg-border" })
|
|
1333
1343
|
));
|
|
1334
1344
|
ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
|
|
1335
1345
|
|
|
@@ -1337,7 +1347,7 @@ ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
|
|
|
1337
1347
|
var ContainerItemToolbar = (props) => {
|
|
1338
1348
|
const { contentId, canBringUp = false, canBringDown = false } = props;
|
|
1339
1349
|
const { bringUp, bringDown } = useBuilder();
|
|
1340
|
-
return /* @__PURE__ */
|
|
1350
|
+
return /* @__PURE__ */ React17.createElement("div", { className: "sb-absolute sb-z-20 sb-top-1 sb-right-1 sb-rounded-md sb-shadow sb-flex sb-flex-col sb-gap-1 sb-p-1 sb-bg-card sb-text-card-foreground sb-item-toolbar sb-opacity-0 sb-transition-opacity" }, /* @__PURE__ */ React17.createElement("div", { className: "sb-h-10 sb-p-1 sb-border sb-border-input sb-bg-background sb-rounded-md sb-text-sm sb-font-medium sb-flex sb-gap-1 sb-items-center sb-justify-start" }, /* @__PURE__ */ React17.createElement(EditButton, { id: contentId }), /* @__PURE__ */ React17.createElement(
|
|
1341
1351
|
Button,
|
|
1342
1352
|
{
|
|
1343
1353
|
variant: "ghost",
|
|
@@ -1345,8 +1355,8 @@ var ContainerItemToolbar = (props) => {
|
|
|
1345
1355
|
onClick: () => bringUp(contentId),
|
|
1346
1356
|
disabled: !canBringUp
|
|
1347
1357
|
},
|
|
1348
|
-
/* @__PURE__ */
|
|
1349
|
-
), /* @__PURE__ */
|
|
1358
|
+
/* @__PURE__ */ React17.createElement(ArrowUp, { className: "sb-h-5 sb-w-5" })
|
|
1359
|
+
), /* @__PURE__ */ React17.createElement(
|
|
1350
1360
|
Button,
|
|
1351
1361
|
{
|
|
1352
1362
|
variant: "ghost",
|
|
@@ -1354,11 +1364,11 @@ var ContainerItemToolbar = (props) => {
|
|
|
1354
1364
|
onClick: () => bringDown(contentId),
|
|
1355
1365
|
disabled: !canBringDown
|
|
1356
1366
|
},
|
|
1357
|
-
/* @__PURE__ */
|
|
1358
|
-
), /* @__PURE__ */
|
|
1367
|
+
/* @__PURE__ */ React17.createElement(ArrowDown, { className: "sb-h-5 sb-w-5" })
|
|
1368
|
+
), /* @__PURE__ */ React17.createElement(DeleteButton, { contentId })));
|
|
1359
1369
|
};
|
|
1360
1370
|
var EditButton = ({ id }) => {
|
|
1361
|
-
return /* @__PURE__ */
|
|
1371
|
+
return /* @__PURE__ */ React17.createElement(Popover, { modal: true }, /* @__PURE__ */ React17.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React17.createElement(Button, { variant: "ghost", className: "sb-w-8 sb-h-8 sb-p-0" }, /* @__PURE__ */ React17.createElement(Edit2Icon, { className: "sb-h-5 sb-w-5" }))), /* @__PURE__ */ React17.createElement(
|
|
1362
1372
|
PopoverContent,
|
|
1363
1373
|
{
|
|
1364
1374
|
side: "left",
|
|
@@ -1368,7 +1378,7 @@ var EditButton = ({ id }) => {
|
|
|
1368
1378
|
className: "sb-p-0 sb-relative",
|
|
1369
1379
|
collisionPadding: 16
|
|
1370
1380
|
},
|
|
1371
|
-
/* @__PURE__ */
|
|
1381
|
+
/* @__PURE__ */ React17.createElement(EditPopoverInner, { id })
|
|
1372
1382
|
));
|
|
1373
1383
|
};
|
|
1374
1384
|
var EditPopoverInner = (props) => {
|
|
@@ -1380,18 +1390,18 @@ var EditPopoverInner = (props) => {
|
|
|
1380
1390
|
`[simple-builder]: Item with id ${id} not found in container item form component`
|
|
1381
1391
|
);
|
|
1382
1392
|
}
|
|
1383
|
-
return /* @__PURE__ */
|
|
1393
|
+
return /* @__PURE__ */ React17.createElement(Tabs, null, /* @__PURE__ */ React17.createElement(TabsList, { variant: "text", defaultValue: "content" }, /* @__PURE__ */ React17.createElement(TabsTrigger, { variant: "text", value: "content" }, "Inhoud"), /* @__PURE__ */ React17.createElement(TabsTrigger, { variant: "text", value: "design" }, "Design")), /* @__PURE__ */ React17.createElement(TabsContent, { value: "content" }, /* @__PURE__ */ React17.createElement(ScrollArea, null, /* @__PURE__ */ React17.createElement(ContainerItemForm, { item }))), /* @__PURE__ */ React17.createElement(TabsContent, { value: "design" }, /* @__PURE__ */ React17.createElement(ItemDesignForm, { item })));
|
|
1384
1394
|
};
|
|
1385
1395
|
var DeleteButton = ({ contentId }) => {
|
|
1386
1396
|
const { deleteContent } = useBuilder();
|
|
1387
|
-
return /* @__PURE__ */
|
|
1397
|
+
return /* @__PURE__ */ React17.createElement(AlertDialog, null, /* @__PURE__ */ React17.createElement(AlertDialogTrigger, { asChild: true }, /* @__PURE__ */ React17.createElement(
|
|
1388
1398
|
Button,
|
|
1389
1399
|
{
|
|
1390
1400
|
variant: "ghost",
|
|
1391
1401
|
className: "sb-w-8 sb-h-8 sb-p-0 sb-text-destructive"
|
|
1392
1402
|
},
|
|
1393
|
-
/* @__PURE__ */
|
|
1394
|
-
)), /* @__PURE__ */
|
|
1403
|
+
/* @__PURE__ */ React17.createElement(Trash2Icon, { className: "sb-h-5 sb-w-5" })
|
|
1404
|
+
)), /* @__PURE__ */ React17.createElement(AlertDialogContent, null, /* @__PURE__ */ React17.createElement(AlertDialogDescription, null, "Weet je zeker dat je dit blok wilt verwijderen?"), /* @__PURE__ */ React17.createElement(AlertDialogFooter, null, /* @__PURE__ */ React17.createElement(AlertDialogCancel, null, "Annuleren"), /* @__PURE__ */ React17.createElement(
|
|
1395
1405
|
AlertDialogAction,
|
|
1396
1406
|
{
|
|
1397
1407
|
className: buttonVariants({ variant: "destructive" }),
|
|
@@ -1410,14 +1420,14 @@ var BuildContainerInner = (props) => {
|
|
|
1410
1420
|
"[simple-builder]: Multiple content blocks detected when using property multiple false."
|
|
1411
1421
|
);
|
|
1412
1422
|
}
|
|
1413
|
-
return /* @__PURE__ */
|
|
1423
|
+
return /* @__PURE__ */ React17.createElement("div", null, items.length <= 0 ? /* @__PURE__ */ React17.createElement(AddContentPlaceholder, { parent: id, container: name, index: 0 }) : multiple && /* @__PURE__ */ React17.createElement(AddContentDividerButton, { parent: id, container: name, index: 0 }), items.map((item, i) => /* @__PURE__ */ React17.createElement(React17.Fragment, { key: item.id }, /* @__PURE__ */ React17.createElement("div", { className: "sb-relative sb-container-item" }, /* @__PURE__ */ React17.createElement(DesignWrapper, { building: true, styles: item.styles }, builder.bindComponent(item, true)), /* @__PURE__ */ React17.createElement(
|
|
1414
1424
|
ContainerItemToolbar,
|
|
1415
1425
|
{
|
|
1416
1426
|
contentId: item.id,
|
|
1417
1427
|
canBringUp: i > 0,
|
|
1418
1428
|
canBringDown: i < items.length - 1
|
|
1419
1429
|
}
|
|
1420
|
-
)), multiple && /* @__PURE__ */
|
|
1430
|
+
)), multiple && /* @__PURE__ */ React17.createElement(
|
|
1421
1431
|
AddContentDividerButton,
|
|
1422
1432
|
{
|
|
1423
1433
|
parent: id,
|
|
@@ -1430,9 +1440,9 @@ var build_container_client_default = BuildContainerInner;
|
|
|
1430
1440
|
var AddContentButton = (props) => {
|
|
1431
1441
|
const components = builder.getComponents();
|
|
1432
1442
|
const { addContent } = useBuilder();
|
|
1433
|
-
return /* @__PURE__ */
|
|
1443
|
+
return /* @__PURE__ */ React17.createElement(Popover, null, /* @__PURE__ */ React17.createElement(PopoverTrigger, { asChild: true }, props.children), /* @__PURE__ */ React17.createElement(PopoverContent, { className: "sb-p-1" }, /* @__PURE__ */ React17.createElement("div", { className: "sb-grid sb-grid-cols-2 sb-gap-2" }, components.map((component) => {
|
|
1434
1444
|
const Icon2 = component.icon ?? ImageIcon;
|
|
1435
|
-
return /* @__PURE__ */
|
|
1445
|
+
return /* @__PURE__ */ React17.createElement(PopoverClose, { key: component.name, asChild: true }, /* @__PURE__ */ React17.createElement(
|
|
1436
1446
|
Button,
|
|
1437
1447
|
{
|
|
1438
1448
|
variant: "ghost",
|
|
@@ -1446,22 +1456,22 @@ var AddContentButton = (props) => {
|
|
|
1446
1456
|
);
|
|
1447
1457
|
}
|
|
1448
1458
|
},
|
|
1449
|
-
/* @__PURE__ */
|
|
1459
|
+
/* @__PURE__ */ React17.createElement(Icon2, { className: "sb-mr-2 sb-h-4 sb-w-4 sb-shrink-0" }),
|
|
1450
1460
|
component.friendlyName ?? component.name
|
|
1451
1461
|
));
|
|
1452
1462
|
}))));
|
|
1453
1463
|
};
|
|
1454
1464
|
var AddContentPlaceholder = (props) => {
|
|
1455
|
-
return /* @__PURE__ */
|
|
1465
|
+
return /* @__PURE__ */ React17.createElement(AddContentButton, { ...props }, /* @__PURE__ */ React17.createElement("div", { className: "sb-flex sb-justify-center sb-bg-primary/50 p-4" }, /* @__PURE__ */ React17.createElement(Button, { size: "sm" }, /* @__PURE__ */ React17.createElement(PlusIcon, { className: "sb-mr-2 sb-h-4 sb-w-4" }), "Blok Toevoegen")));
|
|
1456
1466
|
};
|
|
1457
1467
|
var AddContentDividerButton = (props) => {
|
|
1458
|
-
return /* @__PURE__ */
|
|
1468
|
+
return /* @__PURE__ */ React17.createElement(AddContentButton, { ...props }, /* @__PURE__ */ React17.createElement("div", { className: "sb-w-full sb-h-1 sb--my-[2px] sb-bg-primary sb-relative sb-z-20 sb-opacity-0 add-content-divider-button sb-transition-opacity" }, /* @__PURE__ */ React17.createElement(
|
|
1459
1469
|
Button,
|
|
1460
1470
|
{
|
|
1461
1471
|
size: "sm",
|
|
1462
1472
|
className: "sb-absolute sb-left-1/2 sb-top-1/2 sb--translate-y-1/2 sb--translate-x-1/2 sb-shadow"
|
|
1463
1473
|
},
|
|
1464
|
-
/* @__PURE__ */
|
|
1474
|
+
/* @__PURE__ */ React17.createElement(PlusIcon, { className: "sb-mr-2 sb-h-4 sb-w-4" }),
|
|
1465
1475
|
"Blok Toevoegen"
|
|
1466
1476
|
)));
|
|
1467
1477
|
};
|