@simple-builder/react 1.0.15 → 1.0.16
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-2NZERZ4Y.css → build-container-client-5Z6CS44L.css} +99 -0
- package/dist/{build-container-client-3JDIT5JC.mjs → build-container-client-OYPWDSFF.mjs} +273 -166
- package/dist/{build-container-client-GI5HL65K.js → build-container-client-RZM5T6MI.js} +330 -222
- package/dist/{builder-content-SMRSZVD3.css → builder-content-NRFOTOLD.css} +99 -0
- package/dist/{builder-content-ETNK3ZJU.mjs → builder-content-OUZ6DU5D.mjs} +2 -2
- package/dist/{builder-content-Y5UGAVGE.js → builder-content-SF4P2BPU.js} +7 -7
- package/dist/{chunk-UINPX3PZ.mjs → chunk-BK43TKWV.mjs} +1 -1
- package/dist/{chunk-YUXA4HAL.js → chunk-GST3B44T.js} +5 -5
- package/dist/{chunk-ZHTUNLVE.mjs → chunk-MOOE7HQW.mjs} +2 -2
- package/dist/{chunk-2LPUNQNU.mjs → chunk-SALB4QYA.mjs} +1 -1
- package/dist/{chunk-VLRLE4MP.js → chunk-VR3UNUZD.js} +1 -1
- package/dist/{chunk-DO2DIXEI.js → chunk-YWKSTMRO.js} +3 -3
- package/dist/index.css +99 -0
- package/dist/index.js +6 -6
- package/dist/index.mjs +2 -2
- package/package.json +3 -2
|
@@ -1,9 +1,9 @@
|
|
|
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
|
|
6
|
-
import { PlusIcon, ArrowUp, ArrowDown, Edit2Icon, Trash2Icon, ImageIcon, XIcon, PlusCircleIcon, CalendarIcon, MonitorIcon, SmartphoneIcon, ChevronLeftIcon, ChevronRightIcon, PaintbrushIcon, Loader2Icon, AlignHorizontalSpaceAroundIcon, AlignHorizontalJustifyStartIcon, ScanIcon } from 'lucide-react';
|
|
2
|
+
import './chunk-MOOE7HQW.mjs';
|
|
3
|
+
import { buttonVariants, Button, useBuilder } from './chunk-BK43TKWV.mjs';
|
|
4
|
+
import { cn, tv, DesignWrapper, builder, Image } from './chunk-SALB4QYA.mjs';
|
|
5
|
+
import * as React12 from 'react';
|
|
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';
|
|
9
9
|
import { format } from 'date-fns';
|
|
@@ -11,6 +11,7 @@ import { useFormContext, useForm, useFieldArray, FormProvider, Controller } from
|
|
|
11
11
|
import { DayPicker } from 'react-day-picker';
|
|
12
12
|
import { Slot } from '@radix-ui/react-slot';
|
|
13
13
|
import * as LabelPrimitive from '@radix-ui/react-label';
|
|
14
|
+
import * as SelectPrimitive from '@radix-ui/react-select';
|
|
14
15
|
import * as SwitchPrimitives from '@radix-ui/react-switch';
|
|
15
16
|
import { zodResolver } from '@hookform/resolvers/zod';
|
|
16
17
|
import { z } from 'zod';
|
|
@@ -21,7 +22,7 @@ import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
|
|
|
21
22
|
var AlertDialog = AlertDialogPrimitive.Root;
|
|
22
23
|
var AlertDialogTrigger = AlertDialogPrimitive.Trigger;
|
|
23
24
|
var AlertDialogPortal = AlertDialogPrimitive.Portal;
|
|
24
|
-
var AlertDialogOverlay =
|
|
25
|
+
var AlertDialogOverlay = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React12.createElement(
|
|
25
26
|
AlertDialogPrimitive.Overlay,
|
|
26
27
|
{
|
|
27
28
|
className: cn(
|
|
@@ -33,7 +34,7 @@ var AlertDialogOverlay = React11.forwardRef(({ className, ...props }, ref) => /*
|
|
|
33
34
|
}
|
|
34
35
|
));
|
|
35
36
|
AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
|
|
36
|
-
var AlertDialogContent =
|
|
37
|
+
var AlertDialogContent = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React12.createElement(AlertDialogPortal, null, /* @__PURE__ */ React12.createElement(AlertDialogOverlay, null), /* @__PURE__ */ React12.createElement(
|
|
37
38
|
AlertDialogPrimitive.Content,
|
|
38
39
|
{
|
|
39
40
|
ref,
|
|
@@ -48,7 +49,7 @@ AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
|
|
|
48
49
|
var AlertDialogFooter = ({
|
|
49
50
|
className,
|
|
50
51
|
...props
|
|
51
|
-
}) => /* @__PURE__ */
|
|
52
|
+
}) => /* @__PURE__ */ React12.createElement(
|
|
52
53
|
"div",
|
|
53
54
|
{
|
|
54
55
|
className: cn(
|
|
@@ -59,7 +60,7 @@ var AlertDialogFooter = ({
|
|
|
59
60
|
}
|
|
60
61
|
);
|
|
61
62
|
AlertDialogFooter.displayName = "AlertDialogFooter";
|
|
62
|
-
var AlertDialogTitle =
|
|
63
|
+
var AlertDialogTitle = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React12.createElement(
|
|
63
64
|
AlertDialogPrimitive.Title,
|
|
64
65
|
{
|
|
65
66
|
ref,
|
|
@@ -68,7 +69,7 @@ var AlertDialogTitle = React11.forwardRef(({ className, ...props }, ref) => /* @
|
|
|
68
69
|
}
|
|
69
70
|
));
|
|
70
71
|
AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
|
|
71
|
-
var AlertDialogDescription =
|
|
72
|
+
var AlertDialogDescription = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React12.createElement(
|
|
72
73
|
AlertDialogPrimitive.Description,
|
|
73
74
|
{
|
|
74
75
|
ref,
|
|
@@ -77,7 +78,7 @@ var AlertDialogDescription = React11.forwardRef(({ className, ...props }, ref) =
|
|
|
77
78
|
}
|
|
78
79
|
));
|
|
79
80
|
AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
|
|
80
|
-
var AlertDialogAction =
|
|
81
|
+
var AlertDialogAction = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React12.createElement(
|
|
81
82
|
AlertDialogPrimitive.Action,
|
|
82
83
|
{
|
|
83
84
|
ref,
|
|
@@ -86,7 +87,7 @@ var AlertDialogAction = React11.forwardRef(({ className, ...props }, ref) => /*
|
|
|
86
87
|
}
|
|
87
88
|
));
|
|
88
89
|
AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
|
|
89
|
-
var AlertDialogCancel =
|
|
90
|
+
var AlertDialogCancel = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React12.createElement(
|
|
90
91
|
AlertDialogPrimitive.Cancel,
|
|
91
92
|
{
|
|
92
93
|
ref,
|
|
@@ -102,7 +103,7 @@ AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
|
|
|
102
103
|
var Popover = PopoverPrimitive.Root;
|
|
103
104
|
var PopoverTrigger = PopoverPrimitive.Trigger;
|
|
104
105
|
var PopoverClose = PopoverPrimitive.Close;
|
|
105
|
-
var PopoverContent =
|
|
106
|
+
var PopoverContent = React12.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ React12.createElement(PopoverPrimitive.Portal, null, /* @__PURE__ */ React12.createElement(
|
|
106
107
|
PopoverPrimitive.Content,
|
|
107
108
|
{
|
|
108
109
|
ref,
|
|
@@ -122,7 +123,7 @@ function Calendar({
|
|
|
122
123
|
showOutsideDays = true,
|
|
123
124
|
...props
|
|
124
125
|
}) {
|
|
125
|
-
return /* @__PURE__ */
|
|
126
|
+
return /* @__PURE__ */ React12.createElement(
|
|
126
127
|
DayPicker,
|
|
127
128
|
{
|
|
128
129
|
showOutsideDays,
|
|
@@ -162,8 +163,8 @@ function Calendar({
|
|
|
162
163
|
...classNames
|
|
163
164
|
},
|
|
164
165
|
components: {
|
|
165
|
-
IconLeft: () => /* @__PURE__ */
|
|
166
|
-
IconRight: () => /* @__PURE__ */
|
|
166
|
+
IconLeft: () => /* @__PURE__ */ React12.createElement(ChevronLeftIcon, { className: "sb-h-4 sb-w-4" }),
|
|
167
|
+
IconRight: () => /* @__PURE__ */ React12.createElement(ChevronRightIcon, { className: "sb-h-4 sb-w-4" })
|
|
167
168
|
},
|
|
168
169
|
...props
|
|
169
170
|
}
|
|
@@ -183,7 +184,7 @@ var ColorPicker = (props) => {
|
|
|
183
184
|
"#009DD1",
|
|
184
185
|
"#FF0000"
|
|
185
186
|
];
|
|
186
|
-
return /* @__PURE__ */
|
|
187
|
+
return /* @__PURE__ */ React12.createElement(Popover, null, /* @__PURE__ */ React12.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React12.createElement(
|
|
187
188
|
Button,
|
|
188
189
|
{
|
|
189
190
|
variant: "outline",
|
|
@@ -194,14 +195,14 @@ var ColorPicker = (props) => {
|
|
|
194
195
|
className
|
|
195
196
|
)
|
|
196
197
|
},
|
|
197
|
-
/* @__PURE__ */
|
|
198
|
+
/* @__PURE__ */ React12.createElement("div", { className: "sb-w-full sb-flex sb-items-center sb-gap-2" }, color ? /* @__PURE__ */ React12.createElement(
|
|
198
199
|
"div",
|
|
199
200
|
{
|
|
200
201
|
className: "sb-h-4 sb-w-4 sb-rounded !sb-bg-center !sb-bg-cover sb-transition-all sb-border",
|
|
201
202
|
style: { background: color }
|
|
202
203
|
}
|
|
203
|
-
) : /* @__PURE__ */
|
|
204
|
-
)), /* @__PURE__ */
|
|
204
|
+
) : /* @__PURE__ */ React12.createElement(PaintbrushIcon, { className: "sb-h-4 sb-w-4" }), /* @__PURE__ */ React12.createElement("div", { className: "sb-truncate sb-flex-1" }, color ? color : "Kies een kleur"))
|
|
205
|
+
)), /* @__PURE__ */ React12.createElement(PopoverContent, { className: "sb-w-64 sb-p-4 sb-flex sb-flex-wrap sb-gap-1" }, colors.map((s) => /* @__PURE__ */ React12.createElement(
|
|
205
206
|
"div",
|
|
206
207
|
{
|
|
207
208
|
key: s,
|
|
@@ -214,7 +215,7 @@ var ColorPicker = (props) => {
|
|
|
214
215
|
var labelVariants = tv({
|
|
215
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"
|
|
216
217
|
});
|
|
217
|
-
var Label =
|
|
218
|
+
var Label = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React12.createElement(
|
|
218
219
|
LabelPrimitive.Root,
|
|
219
220
|
{
|
|
220
221
|
ref,
|
|
@@ -226,17 +227,17 @@ Label.displayName = LabelPrimitive.Root.displayName;
|
|
|
226
227
|
|
|
227
228
|
// src/components/ui/form.tsx
|
|
228
229
|
var Form = FormProvider;
|
|
229
|
-
var FormFieldContext =
|
|
230
|
+
var FormFieldContext = React12.createContext(
|
|
230
231
|
{}
|
|
231
232
|
);
|
|
232
233
|
var FormField = ({
|
|
233
234
|
...props
|
|
234
235
|
}) => {
|
|
235
|
-
return /* @__PURE__ */
|
|
236
|
+
return /* @__PURE__ */ React12.createElement(FormFieldContext.Provider, { value: { name: props.name } }, /* @__PURE__ */ React12.createElement(Controller, { ...props }));
|
|
236
237
|
};
|
|
237
238
|
var useFormField = () => {
|
|
238
|
-
const fieldContext =
|
|
239
|
-
const itemContext =
|
|
239
|
+
const fieldContext = React12.useContext(FormFieldContext);
|
|
240
|
+
const itemContext = React12.useContext(FormItemContext);
|
|
240
241
|
const { getFieldState, formState } = useFormContext();
|
|
241
242
|
const fieldState = getFieldState(fieldContext.name, formState);
|
|
242
243
|
if (!fieldContext) {
|
|
@@ -252,17 +253,17 @@ var useFormField = () => {
|
|
|
252
253
|
...fieldState
|
|
253
254
|
};
|
|
254
255
|
};
|
|
255
|
-
var FormItemContext =
|
|
256
|
+
var FormItemContext = React12.createContext(
|
|
256
257
|
{}
|
|
257
258
|
);
|
|
258
|
-
var FormItem =
|
|
259
|
-
const id =
|
|
260
|
-
return /* @__PURE__ */
|
|
259
|
+
var FormItem = React12.forwardRef(({ className, ...props }, ref) => {
|
|
260
|
+
const id = React12.useId();
|
|
261
|
+
return /* @__PURE__ */ React12.createElement(FormItemContext.Provider, { value: { id } }, /* @__PURE__ */ React12.createElement("div", { ref, className: cn("sb-space-y-2", className), ...props }));
|
|
261
262
|
});
|
|
262
263
|
FormItem.displayName = "FormItem";
|
|
263
|
-
var FormLabel =
|
|
264
|
+
var FormLabel = React12.forwardRef(({ className, ...props }, ref) => {
|
|
264
265
|
const { error, formItemId } = useFormField();
|
|
265
|
-
return /* @__PURE__ */
|
|
266
|
+
return /* @__PURE__ */ React12.createElement(
|
|
266
267
|
Label,
|
|
267
268
|
{
|
|
268
269
|
ref,
|
|
@@ -273,9 +274,9 @@ var FormLabel = React11.forwardRef(({ className, ...props }, ref) => {
|
|
|
273
274
|
);
|
|
274
275
|
});
|
|
275
276
|
FormLabel.displayName = "FormLabel";
|
|
276
|
-
var FormControl =
|
|
277
|
+
var FormControl = React12.forwardRef(({ ...props }, ref) => {
|
|
277
278
|
const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
|
|
278
|
-
return /* @__PURE__ */
|
|
279
|
+
return /* @__PURE__ */ React12.createElement(
|
|
279
280
|
Slot,
|
|
280
281
|
{
|
|
281
282
|
ref,
|
|
@@ -287,9 +288,9 @@ var FormControl = React11.forwardRef(({ ...props }, ref) => {
|
|
|
287
288
|
);
|
|
288
289
|
});
|
|
289
290
|
FormControl.displayName = "FormControl";
|
|
290
|
-
var FormDescription =
|
|
291
|
+
var FormDescription = React12.forwardRef(({ className, ...props }, ref) => {
|
|
291
292
|
const { formDescriptionId } = useFormField();
|
|
292
|
-
return /* @__PURE__ */
|
|
293
|
+
return /* @__PURE__ */ React12.createElement(
|
|
293
294
|
"p",
|
|
294
295
|
{
|
|
295
296
|
ref,
|
|
@@ -303,13 +304,13 @@ var FormDescription = React11.forwardRef(({ className, ...props }, ref) => {
|
|
|
303
304
|
);
|
|
304
305
|
});
|
|
305
306
|
FormDescription.displayName = "FormDescription";
|
|
306
|
-
var FormMessage =
|
|
307
|
+
var FormMessage = React12.forwardRef(({ className, children, ...props }, ref) => {
|
|
307
308
|
const { error, formMessageId } = useFormField();
|
|
308
309
|
const body = error ? String(error?.message) : children;
|
|
309
310
|
if (!body) {
|
|
310
311
|
return null;
|
|
311
312
|
}
|
|
312
|
-
return /* @__PURE__ */
|
|
313
|
+
return /* @__PURE__ */ React12.createElement(
|
|
313
314
|
"p",
|
|
314
315
|
{
|
|
315
316
|
ref,
|
|
@@ -324,9 +325,9 @@ var FormMessage = React11.forwardRef(({ className, children, ...props }, ref) =>
|
|
|
324
325
|
);
|
|
325
326
|
});
|
|
326
327
|
FormMessage.displayName = "FormMessage";
|
|
327
|
-
var Input =
|
|
328
|
+
var Input = React12.forwardRef(
|
|
328
329
|
({ className, type, ...props }, ref) => {
|
|
329
|
-
return /* @__PURE__ */
|
|
330
|
+
return /* @__PURE__ */ React12.createElement(
|
|
330
331
|
"input",
|
|
331
332
|
{
|
|
332
333
|
type,
|
|
@@ -341,19 +342,19 @@ var Input = React11.forwardRef(
|
|
|
341
342
|
}
|
|
342
343
|
);
|
|
343
344
|
Input.displayName = "Input";
|
|
344
|
-
var AdvancedInput =
|
|
345
|
+
var AdvancedInput = React12.forwardRef(
|
|
345
346
|
({ prepend, append, ...props }, ref) => {
|
|
346
|
-
return /* @__PURE__ */
|
|
347
|
+
return /* @__PURE__ */ React12.createElement("div", { className: "sb-relative" }, /* @__PURE__ */ React12.createElement(Input, { ref, className: "sb-pl-9 sb-pr-7 sb-text-right", ...props }), prepend && /* @__PURE__ */ React12.createElement("div", { className: "sb-absolute sb-font-roboto sb-top-1/2 sb-left-3 sb--translate-y-1/2" }, prepend), append && /* @__PURE__ */ React12.createElement("div", { className: "sb-absolute sb-font-roboto sb-top-1/2 sb-right-3 sb--translate-y-1/2" }, append));
|
|
347
348
|
}
|
|
348
349
|
);
|
|
349
350
|
AdvancedInput.displayName = "AdvancedInput";
|
|
350
351
|
var MediaInput = (props) => {
|
|
351
352
|
const { onFilesChange, limit = 32, multiple = false, onError } = props;
|
|
352
|
-
const id =
|
|
353
|
-
const [queue, setQueue] =
|
|
354
|
-
const [sources, setSources] =
|
|
353
|
+
const id = React12.useId();
|
|
354
|
+
const [queue, setQueue] = React12.useState([]);
|
|
355
|
+
const [sources, setSources] = React12.useState(props.files ?? []);
|
|
355
356
|
const maxConcurrentUploads = 3;
|
|
356
|
-
const uploadingCountRef =
|
|
357
|
+
const uploadingCountRef = React12.useRef(0);
|
|
357
358
|
const handleFilesAdd = async (e) => {
|
|
358
359
|
const files = e.target.files;
|
|
359
360
|
if (!files || files.length === 0) {
|
|
@@ -424,7 +425,7 @@ var MediaInput = (props) => {
|
|
|
424
425
|
body: JSON.stringify({ src })
|
|
425
426
|
});
|
|
426
427
|
};
|
|
427
|
-
return /* @__PURE__ */
|
|
428
|
+
return /* @__PURE__ */ React12.createElement("div", { className: cn("flex flex-wrap gap-4", props.className) }, sources.map((src) => /* @__PURE__ */ React12.createElement(MediaInputItem, { key: src, className: cn("group", props.itemClassName) }, /* @__PURE__ */ React12.createElement(
|
|
428
429
|
Image,
|
|
429
430
|
{
|
|
430
431
|
src,
|
|
@@ -432,14 +433,14 @@ var MediaInput = (props) => {
|
|
|
432
433
|
fill: true,
|
|
433
434
|
className: "sb-absolute sb-inset-0 sb-object-cover sb-pointer-events-none"
|
|
434
435
|
}
|
|
435
|
-
), /* @__PURE__ */
|
|
436
|
+
), /* @__PURE__ */ React12.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__ */ React12.createElement(
|
|
436
437
|
"button",
|
|
437
438
|
{
|
|
438
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",
|
|
439
440
|
onClick: () => handleSourceDelete(src)
|
|
440
441
|
},
|
|
441
|
-
/* @__PURE__ */
|
|
442
|
-
)))), queue.map((_, i) => /* @__PURE__ */
|
|
442
|
+
/* @__PURE__ */ React12.createElement(Trash2Icon, { className: "sb-h-4 sb-w-4" })
|
|
443
|
+
)))), queue.map((_, i) => /* @__PURE__ */ React12.createElement(
|
|
443
444
|
MediaInputItem,
|
|
444
445
|
{
|
|
445
446
|
key: i,
|
|
@@ -448,8 +449,8 @@ var MediaInput = (props) => {
|
|
|
448
449
|
props.itemClassName
|
|
449
450
|
)
|
|
450
451
|
},
|
|
451
|
-
/* @__PURE__ */
|
|
452
|
-
)), multiple || !multiple && !sources.length && !queue.length ? /* @__PURE__ */
|
|
452
|
+
/* @__PURE__ */ React12.createElement(Loader2Icon, { className: "sb-h-6 sb-w-6 sb-animate-spin" })
|
|
453
|
+
)), multiple || !multiple && !sources.length && !queue.length ? /* @__PURE__ */ React12.createElement(
|
|
453
454
|
"label",
|
|
454
455
|
{
|
|
455
456
|
htmlFor: id,
|
|
@@ -458,8 +459,8 @@ var MediaInput = (props) => {
|
|
|
458
459
|
props.itemClassName
|
|
459
460
|
)
|
|
460
461
|
},
|
|
461
|
-
/* @__PURE__ */
|
|
462
|
-
/* @__PURE__ */
|
|
462
|
+
/* @__PURE__ */ React12.createElement(PlusIcon, { className: "sb-h-6 sb-w-6" }),
|
|
463
|
+
/* @__PURE__ */ React12.createElement(
|
|
463
464
|
"input",
|
|
464
465
|
{
|
|
465
466
|
id,
|
|
@@ -473,7 +474,7 @@ var MediaInput = (props) => {
|
|
|
473
474
|
) : null);
|
|
474
475
|
};
|
|
475
476
|
var MediaInputItem = (props) => {
|
|
476
|
-
return /* @__PURE__ */
|
|
477
|
+
return /* @__PURE__ */ React12.createElement(
|
|
477
478
|
"div",
|
|
478
479
|
{
|
|
479
480
|
className: cn(
|
|
@@ -493,7 +494,110 @@ var MediaInputError = class extends Error {
|
|
|
493
494
|
this.description = description;
|
|
494
495
|
}
|
|
495
496
|
};
|
|
496
|
-
var
|
|
497
|
+
var Select = SelectPrimitive.Root;
|
|
498
|
+
var SelectValue = SelectPrimitive.Value;
|
|
499
|
+
var SelectTrigger = React12.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React12.createElement(
|
|
500
|
+
SelectPrimitive.Trigger,
|
|
501
|
+
{
|
|
502
|
+
ref,
|
|
503
|
+
className: cn(
|
|
504
|
+
"sb-flex sb-h-10 sb-w-full sb-items-center sb-justify-between sb-rounded-md sb-border sb-border-input sb-bg-background sb-px-3 sb-py-2 sb-text-sm sb-ring-offset-background placeholder:sb-text-muted-foreground focus:sb-outline-none focus:sb-ring-2 focus:sb-ring-ring focus:sb-ring-offset-2 disabled:sb-cursor-not-allowed disabled:sb-opacity-50 [&>span]:sb-line-clamp-1",
|
|
505
|
+
className
|
|
506
|
+
),
|
|
507
|
+
...props
|
|
508
|
+
},
|
|
509
|
+
children,
|
|
510
|
+
/* @__PURE__ */ React12.createElement(SelectPrimitive.Icon, { asChild: true }, /* @__PURE__ */ React12.createElement(ChevronDown, { className: "sb-h-4 sb-w-4 sb-opacity-50" }))
|
|
511
|
+
));
|
|
512
|
+
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
|
|
513
|
+
var SelectScrollUpButton = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React12.createElement(
|
|
514
|
+
SelectPrimitive.ScrollUpButton,
|
|
515
|
+
{
|
|
516
|
+
ref,
|
|
517
|
+
className: cn(
|
|
518
|
+
"sb-flex sb-cursor-default sb-items-center sb-justify-center sb-py-1",
|
|
519
|
+
className
|
|
520
|
+
),
|
|
521
|
+
...props
|
|
522
|
+
},
|
|
523
|
+
/* @__PURE__ */ React12.createElement(ChevronUp, { className: "sb-h-4 sb-w-4" })
|
|
524
|
+
));
|
|
525
|
+
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
|
|
526
|
+
var SelectScrollDownButton = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React12.createElement(
|
|
527
|
+
SelectPrimitive.ScrollDownButton,
|
|
528
|
+
{
|
|
529
|
+
ref,
|
|
530
|
+
className: cn(
|
|
531
|
+
"sb-flex sb-cursor-default sb-items-center sb-justify-center sb-py-1",
|
|
532
|
+
className
|
|
533
|
+
),
|
|
534
|
+
...props
|
|
535
|
+
},
|
|
536
|
+
/* @__PURE__ */ React12.createElement(ChevronDown, { className: "sb-h-4 sb-w-4" })
|
|
537
|
+
));
|
|
538
|
+
SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
|
|
539
|
+
var SelectContent = React12.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ React12.createElement(SelectPrimitive.Portal, null, /* @__PURE__ */ React12.createElement(
|
|
540
|
+
SelectPrimitive.Content,
|
|
541
|
+
{
|
|
542
|
+
ref,
|
|
543
|
+
className: cn(
|
|
544
|
+
"sb-relative sb-z-50 sb-max-h-96 sb-min-w-[8rem] sb-overflow-hidden sb-rounded-md sb-border sb-bg-popover sb-text-popover-foreground sb-shadow-md data-[state=open]:sb-animate-in data-[state=closed]:sb-animate-out data-[state=closed]:sb-fade-out-0 data-[state=open]:sb-fade-in-0 data-[state=closed]:sb-zoom-out-95 data-[state=open]:sb-zoom-in-95 data-[side=bottom]:sb-slide-in-from-top-2 data-[side=left]:sb-slide-in-from-right-2 data-[side=right]:sb-slide-in-from-left-2 data-[side=top]:sb-slide-in-from-bottom-2",
|
|
545
|
+
position === "popper" && "data-[side=bottom]:sb-translate-y-1 data-[side=left]:sb--translate-x-1 data-[side=right]:sb-translate-x-1 data-[side=top]:sb--translate-y-1",
|
|
546
|
+
className
|
|
547
|
+
),
|
|
548
|
+
position,
|
|
549
|
+
...props
|
|
550
|
+
},
|
|
551
|
+
/* @__PURE__ */ React12.createElement(SelectScrollUpButton, null),
|
|
552
|
+
/* @__PURE__ */ React12.createElement(
|
|
553
|
+
SelectPrimitive.Viewport,
|
|
554
|
+
{
|
|
555
|
+
className: cn(
|
|
556
|
+
"sb-p-1",
|
|
557
|
+
position === "popper" && "sb-h-[var(--radix-select-trigger-height)] sb-w-full sb-min-w-[var(--radix-select-trigger-width)]"
|
|
558
|
+
)
|
|
559
|
+
},
|
|
560
|
+
children
|
|
561
|
+
),
|
|
562
|
+
/* @__PURE__ */ React12.createElement(SelectScrollDownButton, null)
|
|
563
|
+
)));
|
|
564
|
+
SelectContent.displayName = SelectPrimitive.Content.displayName;
|
|
565
|
+
var SelectLabel = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React12.createElement(
|
|
566
|
+
SelectPrimitive.Label,
|
|
567
|
+
{
|
|
568
|
+
ref,
|
|
569
|
+
className: cn(
|
|
570
|
+
"sb-py-1.5 sb-pl-8 sb-pr-2 sb-text-sm sb-font-semibold",
|
|
571
|
+
className
|
|
572
|
+
),
|
|
573
|
+
...props
|
|
574
|
+
}
|
|
575
|
+
));
|
|
576
|
+
SelectLabel.displayName = SelectPrimitive.Label.displayName;
|
|
577
|
+
var SelectItem = React12.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React12.createElement(
|
|
578
|
+
SelectPrimitive.Item,
|
|
579
|
+
{
|
|
580
|
+
ref,
|
|
581
|
+
className: cn(
|
|
582
|
+
"sb-relative sb-flex sb-w-full sb-cursor-default sb-select-none sb-items-center sb-rounded-sm sb-py-1.5 sb-pl-8 sb-pr-2 sb-text-sm sb-outline-none focus:sb-bg-accent focus:sb-text-accent-foreground data-[disabled]:sb-pointer-events-none data-[disabled]:sb-opacity-50",
|
|
583
|
+
className
|
|
584
|
+
),
|
|
585
|
+
...props
|
|
586
|
+
},
|
|
587
|
+
/* @__PURE__ */ React12.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__ */ React12.createElement(SelectPrimitive.ItemIndicator, null, /* @__PURE__ */ React12.createElement(Check, { className: "sb-h-4 sb-w-4" }))),
|
|
588
|
+
/* @__PURE__ */ React12.createElement(SelectPrimitive.ItemText, null, children)
|
|
589
|
+
));
|
|
590
|
+
SelectItem.displayName = SelectPrimitive.Item.displayName;
|
|
591
|
+
var SelectSeparator = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React12.createElement(
|
|
592
|
+
SelectPrimitive.Separator,
|
|
593
|
+
{
|
|
594
|
+
ref,
|
|
595
|
+
className: cn("sb--mx-1 sb-my-1 sb-h-px sb-bg-muted", className),
|
|
596
|
+
...props
|
|
597
|
+
}
|
|
598
|
+
));
|
|
599
|
+
SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
|
|
600
|
+
var Switch = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React12.createElement(
|
|
497
601
|
SwitchPrimitives.Root,
|
|
498
602
|
{
|
|
499
603
|
className: cn(
|
|
@@ -503,7 +607,7 @@ var Switch = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
|
|
|
503
607
|
...props,
|
|
504
608
|
ref
|
|
505
609
|
},
|
|
506
|
-
/* @__PURE__ */
|
|
610
|
+
/* @__PURE__ */ React12.createElement(
|
|
507
611
|
SwitchPrimitives.Thumb,
|
|
508
612
|
{
|
|
509
613
|
className: cn(
|
|
@@ -513,9 +617,9 @@ var Switch = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
|
|
|
513
617
|
)
|
|
514
618
|
));
|
|
515
619
|
Switch.displayName = SwitchPrimitives.Root.displayName;
|
|
516
|
-
var Textarea =
|
|
620
|
+
var Textarea = React12.forwardRef(
|
|
517
621
|
({ className, ...props }, ref) => {
|
|
518
|
-
return /* @__PURE__ */
|
|
622
|
+
return /* @__PURE__ */ React12.createElement(
|
|
519
623
|
"textarea",
|
|
520
624
|
{
|
|
521
625
|
className: cn(
|
|
@@ -554,11 +658,11 @@ var ContainerItemForm = (props) => {
|
|
|
554
658
|
props: values
|
|
555
659
|
});
|
|
556
660
|
};
|
|
557
|
-
|
|
661
|
+
React12.useEffect(() => {
|
|
558
662
|
const subscription = form.watch(() => form.handleSubmit(onSubmit)());
|
|
559
663
|
return () => subscription.unsubscribe();
|
|
560
664
|
}, [form.watch, form.handleSubmit]);
|
|
561
|
-
return /* @__PURE__ */
|
|
665
|
+
return /* @__PURE__ */ React12.createElement(Form, { ...form }, /* @__PURE__ */ React12.createElement("form", { onSubmit: form.handleSubmit(onSubmit) }, /* @__PURE__ */ React12.createElement("div", { className: "sb-space-y-4 sb-p-4" }, (component.inputs || []).map((input) => /* @__PURE__ */ React12.createElement(
|
|
562
666
|
RenderFormField,
|
|
563
667
|
{
|
|
564
668
|
key: input.name,
|
|
@@ -575,16 +679,16 @@ var RenderFormField = (props) => {
|
|
|
575
679
|
name: input.name
|
|
576
680
|
});
|
|
577
681
|
if (input.multiple) {
|
|
578
|
-
return /* @__PURE__ */
|
|
579
|
-
(field, i) => type !== "grouped" ? /* @__PURE__ */
|
|
682
|
+
return /* @__PURE__ */ React12.createElement("fieldset", { className: "sb-space-y-2" }, /* @__PURE__ */ React12.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React12.createElement("div", { className: "sb-space-y-4" }, fieldArray.fields.map(
|
|
683
|
+
(field, i) => type !== "grouped" ? /* @__PURE__ */ React12.createElement(
|
|
580
684
|
FormField,
|
|
581
685
|
{
|
|
582
686
|
key: field.id,
|
|
583
687
|
control: form.control,
|
|
584
688
|
name: `${input.name}.${i}`,
|
|
585
|
-
render: ({ field: field2 }) => /* @__PURE__ */
|
|
689
|
+
render: ({ field: field2 }) => /* @__PURE__ */ React12.createElement("div", { className: "sb-flex sb-items-center sb-gap-3" }, /* @__PURE__ */ React12.createElement(RenderInput, { field: field2, type: input.type }), /* @__PURE__ */ React12.createElement("button", { type: "button", onClick: () => fieldArray.remove(i) }, /* @__PURE__ */ React12.createElement(XIcon, { className: "sb-h-4 sb-w-4" })))
|
|
586
690
|
}
|
|
587
|
-
) : /* @__PURE__ */
|
|
691
|
+
) : /* @__PURE__ */ React12.createElement("div", { className: "sb-flex sb-items-center sb-relative" }, /* @__PURE__ */ React12.createElement(
|
|
588
692
|
RenderFormField,
|
|
589
693
|
{
|
|
590
694
|
key: field.id,
|
|
@@ -597,16 +701,16 @@ var RenderFormField = (props) => {
|
|
|
597
701
|
friendlyName: ""
|
|
598
702
|
}
|
|
599
703
|
}
|
|
600
|
-
), /* @__PURE__ */
|
|
704
|
+
), /* @__PURE__ */ React12.createElement(
|
|
601
705
|
"button",
|
|
602
706
|
{
|
|
603
707
|
type: "button",
|
|
604
708
|
onClick: () => fieldArray.remove(i),
|
|
605
709
|
className: "sb-absolute sb-top-2 sb-right-2 sb-text-foreground/70 hover:sb-text-foreground"
|
|
606
710
|
},
|
|
607
|
-
/* @__PURE__ */
|
|
711
|
+
/* @__PURE__ */ React12.createElement(XIcon, { className: "sb-h-4 sb-w-4" })
|
|
608
712
|
))
|
|
609
|
-
), /* @__PURE__ */
|
|
713
|
+
), /* @__PURE__ */ React12.createElement(
|
|
610
714
|
Button,
|
|
611
715
|
{
|
|
612
716
|
type: "button",
|
|
@@ -618,7 +722,7 @@ var RenderFormField = (props) => {
|
|
|
618
722
|
),
|
|
619
723
|
onClick: () => fieldArray.append(void 0)
|
|
620
724
|
},
|
|
621
|
-
/* @__PURE__ */
|
|
725
|
+
/* @__PURE__ */ React12.createElement(PlusCircleIcon, { className: "sb-h-4 sb-w-4" })
|
|
622
726
|
)));
|
|
623
727
|
}
|
|
624
728
|
switch (type) {
|
|
@@ -629,27 +733,27 @@ var RenderFormField = (props) => {
|
|
|
629
733
|
case "color":
|
|
630
734
|
case "date":
|
|
631
735
|
case "file":
|
|
632
|
-
return /* @__PURE__ */
|
|
736
|
+
return /* @__PURE__ */ React12.createElement(
|
|
633
737
|
FormField,
|
|
634
738
|
{
|
|
635
739
|
key: input.name,
|
|
636
740
|
control: form.control,
|
|
637
741
|
name: input.name,
|
|
638
|
-
render: ({ field }) => /* @__PURE__ */
|
|
742
|
+
render: ({ field }) => /* @__PURE__ */ React12.createElement(FormItem, null, /* @__PURE__ */ React12.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React12.createElement(FormControl, null, /* @__PURE__ */ React12.createElement(RenderInput, { type, field, options: input?.enum })), input.helperText && /* @__PURE__ */ React12.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React12.createElement(FormMessage, null))
|
|
639
743
|
}
|
|
640
744
|
);
|
|
641
745
|
case "boolean":
|
|
642
|
-
return /* @__PURE__ */
|
|
746
|
+
return /* @__PURE__ */ React12.createElement(
|
|
643
747
|
FormField,
|
|
644
748
|
{
|
|
645
749
|
key: input.name,
|
|
646
750
|
control: form.control,
|
|
647
751
|
name: input.name,
|
|
648
|
-
render: ({ field }) => /* @__PURE__ */
|
|
752
|
+
render: ({ field }) => /* @__PURE__ */ React12.createElement(FormItem, { className: "sb-flex sb-flex-row sb-items-center sb-justify-between sb-space-y-0" }, /* @__PURE__ */ React12.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React12.createElement(FormControl, null, /* @__PURE__ */ React12.createElement(RenderInput, { type, field })), input.helperText && /* @__PURE__ */ React12.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React12.createElement(FormMessage, null))
|
|
649
753
|
}
|
|
650
754
|
);
|
|
651
755
|
case "grouped":
|
|
652
|
-
return /* @__PURE__ */
|
|
756
|
+
return /* @__PURE__ */ React12.createElement("div", { className: "sb-space-y-2 sb-w-full" }, input.friendlyName !== "" && /* @__PURE__ */ React12.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React12.createElement("div", { className: "sb-space-y-2 sb-p-3 sb-w-full sb-border sb-rounded-lg" }, input.inputs.map((sub) => /* @__PURE__ */ React12.createElement(
|
|
653
757
|
RenderFormField,
|
|
654
758
|
{
|
|
655
759
|
key: `${input.name}.${sub.name}`,
|
|
@@ -668,19 +772,22 @@ var RenderFormField = (props) => {
|
|
|
668
772
|
}
|
|
669
773
|
};
|
|
670
774
|
var RenderInput = (props) => {
|
|
671
|
-
const { type, field } = props;
|
|
775
|
+
const { type, options, field } = props;
|
|
672
776
|
switch (type) {
|
|
673
777
|
case "string":
|
|
674
|
-
|
|
778
|
+
if (!options)
|
|
779
|
+
return /* @__PURE__ */ React12.createElement(Input, { ...field });
|
|
780
|
+
console.log("options", options);
|
|
781
|
+
return /* @__PURE__ */ React12.createElement(Select, { onValueChange: field.onChange, defaultValue: field.value }, /* @__PURE__ */ React12.createElement(SelectTrigger, null, /* @__PURE__ */ React12.createElement(SelectValue, null)), /* @__PURE__ */ React12.createElement(SelectContent, null, options.map((option) => /* @__PURE__ */ React12.createElement(SelectItem, { key: option, value: option }, option))));
|
|
675
782
|
case "longText":
|
|
676
783
|
case "richText":
|
|
677
|
-
return /* @__PURE__ */
|
|
784
|
+
return /* @__PURE__ */ React12.createElement(Textarea, { ...field });
|
|
678
785
|
case "number":
|
|
679
|
-
return /* @__PURE__ */
|
|
786
|
+
return /* @__PURE__ */ React12.createElement(Input, { type: "number", ...field });
|
|
680
787
|
case "color":
|
|
681
|
-
return /* @__PURE__ */
|
|
788
|
+
return /* @__PURE__ */ React12.createElement(ColorPicker, { color: field.value, onColorChange: field.onChange });
|
|
682
789
|
case "date":
|
|
683
|
-
return /* @__PURE__ */
|
|
790
|
+
return /* @__PURE__ */ React12.createElement(Popover, null, /* @__PURE__ */ React12.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React12.createElement(
|
|
684
791
|
Button,
|
|
685
792
|
{
|
|
686
793
|
variant: "outline",
|
|
@@ -690,9 +797,9 @@ var RenderInput = (props) => {
|
|
|
690
797
|
!field.value && "sb-text-muted-foreground"
|
|
691
798
|
)
|
|
692
799
|
},
|
|
693
|
-
/* @__PURE__ */
|
|
694
|
-
field.value ? format(field.value, "PPP") : /* @__PURE__ */
|
|
695
|
-
)), /* @__PURE__ */
|
|
800
|
+
/* @__PURE__ */ React12.createElement(CalendarIcon, { className: "sb-mr-2 sb-h-4 sb-w-4" }),
|
|
801
|
+
field.value && !Array.isArray(field.value) ? format(field.value, "PPP") : /* @__PURE__ */ React12.createElement("span", null, "Pick a date")
|
|
802
|
+
)), /* @__PURE__ */ React12.createElement(PopoverContent, { className: "sb-w-auto sb-p-0", align: "start" }, /* @__PURE__ */ React12.createElement(
|
|
696
803
|
Calendar,
|
|
697
804
|
{
|
|
698
805
|
mode: "single",
|
|
@@ -702,9 +809,9 @@ var RenderInput = (props) => {
|
|
|
702
809
|
}
|
|
703
810
|
)));
|
|
704
811
|
case "boolean":
|
|
705
|
-
return /* @__PURE__ */
|
|
812
|
+
return /* @__PURE__ */ React12.createElement(Switch, { checked: field.value, onCheckedChange: field.onChange });
|
|
706
813
|
case "file":
|
|
707
|
-
return /* @__PURE__ */
|
|
814
|
+
return /* @__PURE__ */ React12.createElement(
|
|
708
815
|
MediaInput,
|
|
709
816
|
{
|
|
710
817
|
className: "sb-grid sb-grid-cols-2 sb-gap-1",
|
|
@@ -735,7 +842,7 @@ var tabsListVariants = tv({
|
|
|
735
842
|
variant: "contained"
|
|
736
843
|
}
|
|
737
844
|
});
|
|
738
|
-
var TabsList =
|
|
845
|
+
var TabsList = React12.forwardRef(({ variant, className, ...props }, ref) => /* @__PURE__ */ React12.createElement(
|
|
739
846
|
TabsPrimitive.List,
|
|
740
847
|
{
|
|
741
848
|
ref,
|
|
@@ -755,7 +862,7 @@ var tabsTriggerVariants = tv({
|
|
|
755
862
|
variant: "contained"
|
|
756
863
|
}
|
|
757
864
|
});
|
|
758
|
-
var TabsTrigger =
|
|
865
|
+
var TabsTrigger = React12.forwardRef(({ variant, className, ...props }, ref) => /* @__PURE__ */ React12.createElement(
|
|
759
866
|
TabsPrimitive.Trigger,
|
|
760
867
|
{
|
|
761
868
|
ref,
|
|
@@ -764,7 +871,7 @@ var TabsTrigger = React11.forwardRef(({ variant, className, ...props }, ref) =>
|
|
|
764
871
|
}
|
|
765
872
|
));
|
|
766
873
|
TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
|
|
767
|
-
var TabsContent =
|
|
874
|
+
var TabsContent = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React12.createElement(
|
|
768
875
|
TabsPrimitive.Content,
|
|
769
876
|
{
|
|
770
877
|
ref,
|
|
@@ -799,14 +906,14 @@ var BackgroundPicker = (props) => {
|
|
|
799
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)",
|
|
800
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)"
|
|
801
908
|
];
|
|
802
|
-
const defaultTab =
|
|
909
|
+
const defaultTab = React12.useMemo(() => {
|
|
803
910
|
if (background.includes("url"))
|
|
804
911
|
return "image";
|
|
805
912
|
if (background.includes("gradient"))
|
|
806
913
|
return "gradient";
|
|
807
914
|
return "solid";
|
|
808
915
|
}, [background]);
|
|
809
|
-
return /* @__PURE__ */
|
|
916
|
+
return /* @__PURE__ */ React12.createElement(Popover, null, /* @__PURE__ */ React12.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React12.createElement(
|
|
810
917
|
Button,
|
|
811
918
|
{
|
|
812
919
|
variant: "outline",
|
|
@@ -817,20 +924,20 @@ var BackgroundPicker = (props) => {
|
|
|
817
924
|
className
|
|
818
925
|
)
|
|
819
926
|
},
|
|
820
|
-
/* @__PURE__ */
|
|
927
|
+
/* @__PURE__ */ React12.createElement("div", { className: "sb-w-full sb-flex sb-items-center sb-gap-2" }, background ? /* @__PURE__ */ React12.createElement(
|
|
821
928
|
"div",
|
|
822
929
|
{
|
|
823
930
|
className: "sb-h-4 sb-w-4 sb-rounded !sb-bg-center !sb-bg-cover sb-transition-all sb-border",
|
|
824
931
|
style: { background }
|
|
825
932
|
}
|
|
826
|
-
) : /* @__PURE__ */
|
|
827
|
-
)), /* @__PURE__ */
|
|
933
|
+
) : /* @__PURE__ */ React12.createElement(PaintbrushIcon, { className: "sb-h-4 sb-w-4" }), /* @__PURE__ */ React12.createElement("div", { className: "sb-truncate sb-flex-1" }, background ? background : "Kies een achtergrond"))
|
|
934
|
+
)), /* @__PURE__ */ React12.createElement(PopoverContent, { className: "sb-w-64 sb-p-0" }, /* @__PURE__ */ React12.createElement(Tabs, { defaultValue: defaultTab }, /* @__PURE__ */ React12.createElement(TabsList, { className: "sb-w-full" }, /* @__PURE__ */ React12.createElement(TabsTrigger, { className: "sb-flex-1", value: "solid" }, "Solid"), /* @__PURE__ */ React12.createElement(TabsTrigger, { className: "sb-flex-1", value: "gradient" }, "Gradient"), /* @__PURE__ */ React12.createElement(TabsTrigger, { className: "sb-flex-1", value: "image" }, "Image")), /* @__PURE__ */ React12.createElement(
|
|
828
935
|
TabsContent,
|
|
829
936
|
{
|
|
830
937
|
value: "solid",
|
|
831
938
|
className: "data-[state=active]:sb-flex sb-flex-wrap sb-gap-1 sb-p-4"
|
|
832
939
|
},
|
|
833
|
-
solids.map((s) => /* @__PURE__ */
|
|
940
|
+
solids.map((s) => /* @__PURE__ */ React12.createElement(
|
|
834
941
|
"div",
|
|
835
942
|
{
|
|
836
943
|
key: s,
|
|
@@ -839,13 +946,13 @@ var BackgroundPicker = (props) => {
|
|
|
839
946
|
onClick: () => onBackgroundChange(s)
|
|
840
947
|
}
|
|
841
948
|
))
|
|
842
|
-
), /* @__PURE__ */
|
|
949
|
+
), /* @__PURE__ */ React12.createElement(
|
|
843
950
|
TabsContent,
|
|
844
951
|
{
|
|
845
952
|
value: "gradient",
|
|
846
953
|
className: "data-[state=active]:sb-flex sb-flex-wrap sb-gap-1 sb-p-4"
|
|
847
954
|
},
|
|
848
|
-
gradients.map((s) => /* @__PURE__ */
|
|
955
|
+
gradients.map((s) => /* @__PURE__ */ React12.createElement(
|
|
849
956
|
"div",
|
|
850
957
|
{
|
|
851
958
|
key: s,
|
|
@@ -854,7 +961,7 @@ var BackgroundPicker = (props) => {
|
|
|
854
961
|
onClick: () => onBackgroundChange(s)
|
|
855
962
|
}
|
|
856
963
|
))
|
|
857
|
-
), /* @__PURE__ */
|
|
964
|
+
), /* @__PURE__ */ React12.createElement(TabsContent, { value: "image" }, /* @__PURE__ */ React12.createElement("div", { className: "sb-p-4 sb-border-b" }, /* @__PURE__ */ React12.createElement(
|
|
858
965
|
MediaInput,
|
|
859
966
|
{
|
|
860
967
|
className: "sb-grid sb-grid-cols-2 sb-gap-1",
|
|
@@ -870,7 +977,7 @@ var BackgroundPicker = (props) => {
|
|
|
870
977
|
"media-input: Error: " + e?.description
|
|
871
978
|
)
|
|
872
979
|
}
|
|
873
|
-
)), /* @__PURE__ */
|
|
980
|
+
)), /* @__PURE__ */ React12.createElement("div", { className: "sb-grid sb-grid-cols-2 sb-gap-1 sb-p-4" }, images.map((s) => /* @__PURE__ */ React12.createElement(
|
|
874
981
|
"div",
|
|
875
982
|
{
|
|
876
983
|
key: s,
|
|
@@ -898,7 +1005,7 @@ var toggleVariants = tv({
|
|
|
898
1005
|
size: "default"
|
|
899
1006
|
}
|
|
900
1007
|
});
|
|
901
|
-
var Toggle =
|
|
1008
|
+
var Toggle = React12.forwardRef(({ className, variant, size, ...props }, ref) => /* @__PURE__ */ React12.createElement(
|
|
902
1009
|
TogglePrimitive.Root,
|
|
903
1010
|
{
|
|
904
1011
|
ref,
|
|
@@ -910,70 +1017,70 @@ Toggle.displayName = TogglePrimitive.Root.displayName;
|
|
|
910
1017
|
|
|
911
1018
|
// src/components/ui/spacing-input.tsx
|
|
912
1019
|
var SpacingInput = (props) => {
|
|
913
|
-
const [value, setValue] =
|
|
914
|
-
const [indipendent, setIndipendent] =
|
|
1020
|
+
const [value, setValue] = React12.useState(parse(props.value || "0px"));
|
|
1021
|
+
const [indipendent, setIndipendent] = React12.useState(
|
|
915
1022
|
isIndipendent(parse(props.value || "0px"))
|
|
916
1023
|
);
|
|
917
|
-
|
|
1024
|
+
React12.useEffect(() => {
|
|
918
1025
|
if (!props.onChange)
|
|
919
1026
|
return;
|
|
920
1027
|
props.onChange(stringify(value));
|
|
921
1028
|
}, [value, props.onChange]);
|
|
922
|
-
return /* @__PURE__ */
|
|
1029
|
+
return /* @__PURE__ */ React12.createElement("div", { className: "sb-grid sb-grid-cols-[1fr,auto] sb-gap-3" }, /* @__PURE__ */ React12.createElement("div", { className: "sb-grid sb-grid-cols-2 sb-items-center sb-gap-3" }, !indipendent ? /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(
|
|
923
1030
|
AdvancedInput,
|
|
924
1031
|
{
|
|
925
1032
|
value: value.left,
|
|
926
1033
|
pattern: "\\d+",
|
|
927
1034
|
onChange: ({ target: { value: value2 } }) => setValue((prev) => ({ ...prev, left: +value2, right: +value2 })),
|
|
928
|
-
prepend: /* @__PURE__ */
|
|
929
|
-
append: /* @__PURE__ */
|
|
1035
|
+
prepend: /* @__PURE__ */ React12.createElement(AlignHorizontalSpaceAroundIcon, { className: "sb-h-4 sb-w-4" }),
|
|
1036
|
+
append: /* @__PURE__ */ React12.createElement("span", { className: "sb-text-muted-foreground" }, "px")
|
|
930
1037
|
}
|
|
931
|
-
), /* @__PURE__ */
|
|
1038
|
+
), /* @__PURE__ */ React12.createElement(
|
|
932
1039
|
AdvancedInput,
|
|
933
1040
|
{
|
|
934
1041
|
value: value.top,
|
|
935
1042
|
pattern: "\\d+",
|
|
936
1043
|
onChange: ({ target: { value: value2 } }) => setValue((prev) => ({ ...prev, top: +value2, bottom: +value2 })),
|
|
937
|
-
prepend: /* @__PURE__ */
|
|
938
|
-
append: /* @__PURE__ */
|
|
1044
|
+
prepend: /* @__PURE__ */ React12.createElement(AlignHorizontalSpaceAroundIcon, { className: "sb-h-4 sb-w-4 sb-rotate-90" }),
|
|
1045
|
+
append: /* @__PURE__ */ React12.createElement("span", { className: "sb-text-muted-foreground" }, "px")
|
|
939
1046
|
}
|
|
940
|
-
)) : /* @__PURE__ */
|
|
1047
|
+
)) : /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(
|
|
941
1048
|
AdvancedInput,
|
|
942
1049
|
{
|
|
943
1050
|
value: value.left,
|
|
944
1051
|
pattern: "\\d+",
|
|
945
1052
|
onChange: ({ target: { value: value2 } }) => setValue((prev) => ({ ...prev, left: +value2 })),
|
|
946
|
-
prepend: /* @__PURE__ */
|
|
947
|
-
append: /* @__PURE__ */
|
|
1053
|
+
prepend: /* @__PURE__ */ React12.createElement(AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4" }),
|
|
1054
|
+
append: /* @__PURE__ */ React12.createElement("span", { className: "sb-text-muted-foreground" }, "px")
|
|
948
1055
|
}
|
|
949
|
-
), /* @__PURE__ */
|
|
1056
|
+
), /* @__PURE__ */ React12.createElement(
|
|
950
1057
|
AdvancedInput,
|
|
951
1058
|
{
|
|
952
1059
|
value: value.top,
|
|
953
1060
|
pattern: "\\d+",
|
|
954
1061
|
onChange: ({ target: { value: value2 } }) => setValue((prev) => ({ ...prev, top: +value2 })),
|
|
955
|
-
prepend: /* @__PURE__ */
|
|
956
|
-
append: /* @__PURE__ */
|
|
1062
|
+
prepend: /* @__PURE__ */ React12.createElement(AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb-rotate-90" }),
|
|
1063
|
+
append: /* @__PURE__ */ React12.createElement("span", { className: "sb-text-muted-foreground" }, "px")
|
|
957
1064
|
}
|
|
958
|
-
), /* @__PURE__ */
|
|
1065
|
+
), /* @__PURE__ */ React12.createElement(
|
|
959
1066
|
AdvancedInput,
|
|
960
1067
|
{
|
|
961
1068
|
value: value.right,
|
|
962
1069
|
pattern: "\\d+",
|
|
963
1070
|
onChange: ({ target: { value: value2 } }) => setValue((prev) => ({ ...prev, right: +value2 })),
|
|
964
|
-
prepend: /* @__PURE__ */
|
|
965
|
-
append: /* @__PURE__ */
|
|
1071
|
+
prepend: /* @__PURE__ */ React12.createElement(AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb-rotate-180" }),
|
|
1072
|
+
append: /* @__PURE__ */ React12.createElement("span", { className: "sb-text-muted-foreground" }, "px")
|
|
966
1073
|
}
|
|
967
|
-
), /* @__PURE__ */
|
|
1074
|
+
), /* @__PURE__ */ React12.createElement(
|
|
968
1075
|
AdvancedInput,
|
|
969
1076
|
{
|
|
970
1077
|
value: value.bottom,
|
|
971
1078
|
pattern: "\\d+",
|
|
972
1079
|
onChange: ({ target: { value: value2 } }) => setValue((prev) => ({ ...prev, bottom: +value2 })),
|
|
973
|
-
prepend: /* @__PURE__ */
|
|
974
|
-
append: /* @__PURE__ */
|
|
1080
|
+
prepend: /* @__PURE__ */ React12.createElement(AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb--rotate-90" }),
|
|
1081
|
+
append: /* @__PURE__ */ React12.createElement("span", { className: "sb-text-muted-foreground" }, "px")
|
|
975
1082
|
}
|
|
976
|
-
))), /* @__PURE__ */
|
|
1083
|
+
))), /* @__PURE__ */ React12.createElement("div", { className: "sb-shrink-0" }, /* @__PURE__ */ React12.createElement(
|
|
977
1084
|
Toggle,
|
|
978
1085
|
{
|
|
979
1086
|
className: "sb-shrink-0 sb-flex sb-w-8 sb-h-8 sb-p-0",
|
|
@@ -982,7 +1089,7 @@ var SpacingInput = (props) => {
|
|
|
982
1089
|
pressed: indipendent,
|
|
983
1090
|
onPressedChange: setIndipendent
|
|
984
1091
|
},
|
|
985
|
-
/* @__PURE__ */
|
|
1092
|
+
/* @__PURE__ */ React12.createElement(ScanIcon, { className: "sb-h-4 sb-w-4" })
|
|
986
1093
|
)));
|
|
987
1094
|
};
|
|
988
1095
|
var isIndipendent = (value) => {
|
|
@@ -1114,102 +1221,102 @@ var ItemDesignForm = (props) => {
|
|
|
1114
1221
|
}
|
|
1115
1222
|
});
|
|
1116
1223
|
};
|
|
1117
|
-
const [device, setDevice] =
|
|
1118
|
-
|
|
1224
|
+
const [device, setDevice] = React12.useState("desktop");
|
|
1225
|
+
React12.useEffect(() => {
|
|
1119
1226
|
const subscription = form.watch(() => form.handleSubmit(onSubmit)());
|
|
1120
1227
|
return () => subscription.unsubscribe();
|
|
1121
1228
|
}, [form.watch, form.handleSubmit]);
|
|
1122
|
-
return /* @__PURE__ */
|
|
1229
|
+
return /* @__PURE__ */ React12.createElement(Form, { ...form }, /* @__PURE__ */ React12.createElement("form", { onSubmit: form.handleSubmit(onSubmit) }, /* @__PURE__ */ React12.createElement("div", { className: "sb-space-y-4 sb-p-4" }, /* @__PURE__ */ React12.createElement(
|
|
1123
1230
|
Tabs,
|
|
1124
1231
|
{
|
|
1125
1232
|
defaultValue: device,
|
|
1126
1233
|
onValueChange: (device2) => setDevice(device2)
|
|
1127
1234
|
},
|
|
1128
|
-
/* @__PURE__ */
|
|
1129
|
-
), /* @__PURE__ */
|
|
1235
|
+
/* @__PURE__ */ React12.createElement(TabsList, { className: "sb-h-9 sb-grid sb-w-full sb-grid-cols-2" }, /* @__PURE__ */ React12.createElement(TabsTrigger, { value: "desktop", className: "sb-text-xs" }, /* @__PURE__ */ React12.createElement(MonitorIcon, { className: "sb-h-4 sb-w-4 sb-mr-2" }), /* @__PURE__ */ React12.createElement("span", null, "Desktop")), /* @__PURE__ */ React12.createElement(TabsTrigger, { value: "mobile", className: "sb-text-xs" }, /* @__PURE__ */ React12.createElement(SmartphoneIcon, { className: "sb-h-4 sb-w-4 sb-mr-2" }), /* @__PURE__ */ React12.createElement("span", null, "Mobiel")))
|
|
1236
|
+
), /* @__PURE__ */ React12.createElement("div", { className: "sb-space-y-4" }, /* @__PURE__ */ React12.createElement(
|
|
1130
1237
|
FormField,
|
|
1131
1238
|
{
|
|
1132
1239
|
control: form.control,
|
|
1133
1240
|
key: `${device}.background`,
|
|
1134
1241
|
name: `${device}.background`,
|
|
1135
|
-
render: ({ field }) => /* @__PURE__ */
|
|
1242
|
+
render: ({ field }) => /* @__PURE__ */ React12.createElement(FormItem, null, /* @__PURE__ */ React12.createElement(FormLabel, null, "Achtergrond"), /* @__PURE__ */ React12.createElement(FormControl, null, /* @__PURE__ */ React12.createElement(
|
|
1136
1243
|
BackgroundPicker,
|
|
1137
1244
|
{
|
|
1138
1245
|
background: field.value,
|
|
1139
1246
|
onBackgroundChange: field.onChange
|
|
1140
1247
|
}
|
|
1141
|
-
)), /* @__PURE__ */
|
|
1248
|
+
)), /* @__PURE__ */ React12.createElement(FormMessage, null))
|
|
1142
1249
|
}
|
|
1143
|
-
), /* @__PURE__ */
|
|
1250
|
+
), /* @__PURE__ */ React12.createElement(
|
|
1144
1251
|
FormField,
|
|
1145
1252
|
{
|
|
1146
1253
|
control: form.control,
|
|
1147
1254
|
key: `${device}.color`,
|
|
1148
1255
|
name: `${device}.color`,
|
|
1149
|
-
render: ({ field }) => /* @__PURE__ */
|
|
1256
|
+
render: ({ field }) => /* @__PURE__ */ React12.createElement(FormItem, null, /* @__PURE__ */ React12.createElement(FormLabel, null, "Inhoud kleur"), /* @__PURE__ */ React12.createElement(FormControl, null, /* @__PURE__ */ React12.createElement(
|
|
1150
1257
|
ColorPicker,
|
|
1151
1258
|
{
|
|
1152
1259
|
color: field.value,
|
|
1153
1260
|
onColorChange: field.onChange
|
|
1154
1261
|
}
|
|
1155
|
-
)), /* @__PURE__ */
|
|
1262
|
+
)), /* @__PURE__ */ React12.createElement(FormMessage, null))
|
|
1156
1263
|
}
|
|
1157
|
-
), /* @__PURE__ */
|
|
1264
|
+
), /* @__PURE__ */ React12.createElement("hr", null), /* @__PURE__ */ React12.createElement(
|
|
1158
1265
|
FormField,
|
|
1159
1266
|
{
|
|
1160
1267
|
control: form.control,
|
|
1161
1268
|
name: "container",
|
|
1162
|
-
render: ({ field }) => /* @__PURE__ */
|
|
1269
|
+
render: ({ field }) => /* @__PURE__ */ React12.createElement(FormItem, { className: "sb-flex sb-flex-row sb-items-center sb-justify-between sb-space-y-0" }, /* @__PURE__ */ React12.createElement(FormLabel, null, "Volledige breedte"), /* @__PURE__ */ React12.createElement(FormControl, null, /* @__PURE__ */ React12.createElement(
|
|
1163
1270
|
Switch,
|
|
1164
1271
|
{
|
|
1165
1272
|
checked: !field.value,
|
|
1166
1273
|
onCheckedChange: (v) => field.onChange(!v)
|
|
1167
1274
|
}
|
|
1168
|
-
)), /* @__PURE__ */
|
|
1275
|
+
)), /* @__PURE__ */ React12.createElement(FormMessage, null))
|
|
1169
1276
|
}
|
|
1170
|
-
), /* @__PURE__ */
|
|
1277
|
+
), /* @__PURE__ */ React12.createElement("hr", null), /* @__PURE__ */ React12.createElement(
|
|
1171
1278
|
FormField,
|
|
1172
1279
|
{
|
|
1173
1280
|
control: form.control,
|
|
1174
1281
|
key: `${device}.padding`,
|
|
1175
1282
|
name: `${device}.padding`,
|
|
1176
|
-
render: ({ field }) => /* @__PURE__ */
|
|
1283
|
+
render: ({ field }) => /* @__PURE__ */ React12.createElement(FormItem, null, /* @__PURE__ */ React12.createElement(FormLabel, null, "Padding"), /* @__PURE__ */ React12.createElement(FormControl, null, /* @__PURE__ */ React12.createElement(
|
|
1177
1284
|
SpacingInput,
|
|
1178
1285
|
{
|
|
1179
1286
|
value: field.value,
|
|
1180
1287
|
onChange: field.onChange
|
|
1181
1288
|
}
|
|
1182
|
-
)), /* @__PURE__ */
|
|
1289
|
+
)), /* @__PURE__ */ React12.createElement(FormMessage, null))
|
|
1183
1290
|
}
|
|
1184
|
-
), /* @__PURE__ */
|
|
1291
|
+
), /* @__PURE__ */ React12.createElement(
|
|
1185
1292
|
FormField,
|
|
1186
1293
|
{
|
|
1187
1294
|
control: form.control,
|
|
1188
1295
|
key: `${device}.margin`,
|
|
1189
1296
|
name: `${device}.margin`,
|
|
1190
|
-
render: ({ field }) => /* @__PURE__ */
|
|
1297
|
+
render: ({ field }) => /* @__PURE__ */ React12.createElement(FormItem, null, /* @__PURE__ */ React12.createElement(FormLabel, null, "Margin"), /* @__PURE__ */ React12.createElement(FormControl, null, /* @__PURE__ */ React12.createElement(
|
|
1191
1298
|
SpacingInput,
|
|
1192
1299
|
{
|
|
1193
1300
|
value: field.value,
|
|
1194
1301
|
onChange: field.onChange
|
|
1195
1302
|
}
|
|
1196
|
-
)), /* @__PURE__ */
|
|
1303
|
+
)), /* @__PURE__ */ React12.createElement(FormMessage, null))
|
|
1197
1304
|
}
|
|
1198
1305
|
)))));
|
|
1199
1306
|
};
|
|
1200
|
-
var ScrollArea =
|
|
1307
|
+
var ScrollArea = React12.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React12.createElement(
|
|
1201
1308
|
ScrollAreaPrimitive.Root,
|
|
1202
1309
|
{
|
|
1203
1310
|
ref,
|
|
1204
1311
|
className: cn("sb-relative sb-overflow-hidden", className),
|
|
1205
1312
|
...props
|
|
1206
1313
|
},
|
|
1207
|
-
/* @__PURE__ */
|
|
1208
|
-
/* @__PURE__ */
|
|
1209
|
-
/* @__PURE__ */
|
|
1314
|
+
/* @__PURE__ */ React12.createElement(ScrollAreaPrimitive.Viewport, { className: "sb-h-full sb-max-h-[80vh] sb-w-full sb-rounded-[inherit]" }, children),
|
|
1315
|
+
/* @__PURE__ */ React12.createElement(ScrollBar, null),
|
|
1316
|
+
/* @__PURE__ */ React12.createElement(ScrollAreaPrimitive.Corner, null)
|
|
1210
1317
|
));
|
|
1211
1318
|
ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
|
|
1212
|
-
var ScrollBar =
|
|
1319
|
+
var ScrollBar = React12.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ React12.createElement(
|
|
1213
1320
|
ScrollAreaPrimitive.ScrollAreaScrollbar,
|
|
1214
1321
|
{
|
|
1215
1322
|
ref,
|
|
@@ -1222,7 +1329,7 @@ var ScrollBar = React11.forwardRef(({ className, orientation = "vertical", ...pr
|
|
|
1222
1329
|
),
|
|
1223
1330
|
...props
|
|
1224
1331
|
},
|
|
1225
|
-
/* @__PURE__ */
|
|
1332
|
+
/* @__PURE__ */ React12.createElement(ScrollAreaPrimitive.ScrollAreaThumb, { className: "sb-relative sb-flex-1 sb-rounded-full sb-bg-border" })
|
|
1226
1333
|
));
|
|
1227
1334
|
ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
|
|
1228
1335
|
|
|
@@ -1230,7 +1337,7 @@ ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
|
|
|
1230
1337
|
var ContainerItemToolbar = (props) => {
|
|
1231
1338
|
const { contentId, canBringUp = false, canBringDown = false } = props;
|
|
1232
1339
|
const { bringUp, bringDown } = useBuilder();
|
|
1233
|
-
return /* @__PURE__ */
|
|
1340
|
+
return /* @__PURE__ */ React12.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__ */ React12.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__ */ React12.createElement(EditButton, { id: contentId }), /* @__PURE__ */ React12.createElement(
|
|
1234
1341
|
Button,
|
|
1235
1342
|
{
|
|
1236
1343
|
variant: "ghost",
|
|
@@ -1238,8 +1345,8 @@ var ContainerItemToolbar = (props) => {
|
|
|
1238
1345
|
onClick: () => bringUp(contentId),
|
|
1239
1346
|
disabled: !canBringUp
|
|
1240
1347
|
},
|
|
1241
|
-
/* @__PURE__ */
|
|
1242
|
-
), /* @__PURE__ */
|
|
1348
|
+
/* @__PURE__ */ React12.createElement(ArrowUp, { className: "sb-h-5 sb-w-5" })
|
|
1349
|
+
), /* @__PURE__ */ React12.createElement(
|
|
1243
1350
|
Button,
|
|
1244
1351
|
{
|
|
1245
1352
|
variant: "ghost",
|
|
@@ -1247,11 +1354,11 @@ var ContainerItemToolbar = (props) => {
|
|
|
1247
1354
|
onClick: () => bringDown(contentId),
|
|
1248
1355
|
disabled: !canBringDown
|
|
1249
1356
|
},
|
|
1250
|
-
/* @__PURE__ */
|
|
1251
|
-
), /* @__PURE__ */
|
|
1357
|
+
/* @__PURE__ */ React12.createElement(ArrowDown, { className: "sb-h-5 sb-w-5" })
|
|
1358
|
+
), /* @__PURE__ */ React12.createElement(DeleteButton, { contentId })));
|
|
1252
1359
|
};
|
|
1253
1360
|
var EditButton = ({ id }) => {
|
|
1254
|
-
return /* @__PURE__ */
|
|
1361
|
+
return /* @__PURE__ */ React12.createElement(Popover, { modal: true }, /* @__PURE__ */ React12.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React12.createElement(Button, { variant: "ghost", className: "sb-w-8 sb-h-8 sb-p-0" }, /* @__PURE__ */ React12.createElement(Edit2Icon, { className: "sb-h-5 sb-w-5" }))), /* @__PURE__ */ React12.createElement(
|
|
1255
1362
|
PopoverContent,
|
|
1256
1363
|
{
|
|
1257
1364
|
side: "left",
|
|
@@ -1261,7 +1368,7 @@ var EditButton = ({ id }) => {
|
|
|
1261
1368
|
className: "sb-p-0 sb-relative",
|
|
1262
1369
|
collisionPadding: 16
|
|
1263
1370
|
},
|
|
1264
|
-
/* @__PURE__ */
|
|
1371
|
+
/* @__PURE__ */ React12.createElement(EditPopoverInner, { id })
|
|
1265
1372
|
));
|
|
1266
1373
|
};
|
|
1267
1374
|
var EditPopoverInner = (props) => {
|
|
@@ -1273,18 +1380,18 @@ var EditPopoverInner = (props) => {
|
|
|
1273
1380
|
`[simple-builder]: Item with id ${id} not found in container item form component`
|
|
1274
1381
|
);
|
|
1275
1382
|
}
|
|
1276
|
-
return /* @__PURE__ */
|
|
1383
|
+
return /* @__PURE__ */ React12.createElement(Tabs, null, /* @__PURE__ */ React12.createElement(TabsList, { variant: "text", defaultValue: "content" }, /* @__PURE__ */ React12.createElement(TabsTrigger, { variant: "text", value: "content" }, "Inhoud"), /* @__PURE__ */ React12.createElement(TabsTrigger, { variant: "text", value: "design" }, "Design")), /* @__PURE__ */ React12.createElement(TabsContent, { value: "content" }, /* @__PURE__ */ React12.createElement(ScrollArea, null, /* @__PURE__ */ React12.createElement(ContainerItemForm, { item }))), /* @__PURE__ */ React12.createElement(TabsContent, { value: "design" }, /* @__PURE__ */ React12.createElement(ItemDesignForm, { item })));
|
|
1277
1384
|
};
|
|
1278
1385
|
var DeleteButton = ({ contentId }) => {
|
|
1279
1386
|
const { deleteContent } = useBuilder();
|
|
1280
|
-
return /* @__PURE__ */
|
|
1387
|
+
return /* @__PURE__ */ React12.createElement(AlertDialog, null, /* @__PURE__ */ React12.createElement(AlertDialogTrigger, { asChild: true }, /* @__PURE__ */ React12.createElement(
|
|
1281
1388
|
Button,
|
|
1282
1389
|
{
|
|
1283
1390
|
variant: "ghost",
|
|
1284
1391
|
className: "sb-w-8 sb-h-8 sb-p-0 sb-text-destructive"
|
|
1285
1392
|
},
|
|
1286
|
-
/* @__PURE__ */
|
|
1287
|
-
)), /* @__PURE__ */
|
|
1393
|
+
/* @__PURE__ */ React12.createElement(Trash2Icon, { className: "sb-h-5 sb-w-5" })
|
|
1394
|
+
)), /* @__PURE__ */ React12.createElement(AlertDialogContent, null, /* @__PURE__ */ React12.createElement(AlertDialogDescription, null, "Weet je zeker dat je dit blok wilt verwijderen?"), /* @__PURE__ */ React12.createElement(AlertDialogFooter, null, /* @__PURE__ */ React12.createElement(AlertDialogCancel, null, "Annuleren"), /* @__PURE__ */ React12.createElement(
|
|
1288
1395
|
AlertDialogAction,
|
|
1289
1396
|
{
|
|
1290
1397
|
className: buttonVariants({ variant: "destructive" }),
|
|
@@ -1303,14 +1410,14 @@ var BuildContainerInner = (props) => {
|
|
|
1303
1410
|
"[simple-builder]: Multiple content blocks detected when using property multiple false."
|
|
1304
1411
|
);
|
|
1305
1412
|
}
|
|
1306
|
-
return /* @__PURE__ */
|
|
1413
|
+
return /* @__PURE__ */ React12.createElement("div", null, items.length <= 0 ? /* @__PURE__ */ React12.createElement(AddContentPlaceholder, { parent: id, container: name, index: 0 }) : multiple && /* @__PURE__ */ React12.createElement(AddContentDividerButton, { parent: id, container: name, index: 0 }), items.map((item, i) => /* @__PURE__ */ React12.createElement(React12.Fragment, { key: item.id }, /* @__PURE__ */ React12.createElement("div", { className: "sb-relative sb-container-item" }, /* @__PURE__ */ React12.createElement(DesignWrapper, { styles: item.styles }, builder.bindComponent(item, true)), /* @__PURE__ */ React12.createElement(
|
|
1307
1414
|
ContainerItemToolbar,
|
|
1308
1415
|
{
|
|
1309
1416
|
contentId: item.id,
|
|
1310
1417
|
canBringUp: i > 0,
|
|
1311
1418
|
canBringDown: i < items.length - 1
|
|
1312
1419
|
}
|
|
1313
|
-
)), multiple && /* @__PURE__ */
|
|
1420
|
+
)), multiple && /* @__PURE__ */ React12.createElement(
|
|
1314
1421
|
AddContentDividerButton,
|
|
1315
1422
|
{
|
|
1316
1423
|
parent: id,
|
|
@@ -1323,9 +1430,9 @@ var build_container_client_default = BuildContainerInner;
|
|
|
1323
1430
|
var AddContentButton = (props) => {
|
|
1324
1431
|
const components = builder.getComponents();
|
|
1325
1432
|
const { addContent } = useBuilder();
|
|
1326
|
-
return /* @__PURE__ */
|
|
1327
|
-
const
|
|
1328
|
-
return /* @__PURE__ */
|
|
1433
|
+
return /* @__PURE__ */ React12.createElement(Popover, null, /* @__PURE__ */ React12.createElement(PopoverTrigger, { asChild: true }, props.children), /* @__PURE__ */ React12.createElement(PopoverContent, { className: "sb-p-1" }, /* @__PURE__ */ React12.createElement("div", { className: "sb-grid sb-grid-cols-2 sb-gap-2" }, components.map((component) => {
|
|
1434
|
+
const Icon2 = component.icon ?? ImageIcon;
|
|
1435
|
+
return /* @__PURE__ */ React12.createElement(PopoverClose, { key: component.name, asChild: true }, /* @__PURE__ */ React12.createElement(
|
|
1329
1436
|
Button,
|
|
1330
1437
|
{
|
|
1331
1438
|
variant: "ghost",
|
|
@@ -1339,22 +1446,22 @@ var AddContentButton = (props) => {
|
|
|
1339
1446
|
);
|
|
1340
1447
|
}
|
|
1341
1448
|
},
|
|
1342
|
-
/* @__PURE__ */
|
|
1449
|
+
/* @__PURE__ */ React12.createElement(Icon2, { className: "sb-mr-2 sb-h-4 sb-w-4 sb-shrink-0" }),
|
|
1343
1450
|
component.friendlyName ?? component.name
|
|
1344
1451
|
));
|
|
1345
1452
|
}))));
|
|
1346
1453
|
};
|
|
1347
1454
|
var AddContentPlaceholder = (props) => {
|
|
1348
|
-
return /* @__PURE__ */
|
|
1455
|
+
return /* @__PURE__ */ React12.createElement(AddContentButton, { ...props }, /* @__PURE__ */ React12.createElement("div", { className: "sb-flex sb-justify-center sb-bg-primary/50 p-4" }, /* @__PURE__ */ React12.createElement(Button, { size: "sm" }, /* @__PURE__ */ React12.createElement(PlusIcon, { className: "sb-mr-2 sb-h-4 sb-w-4" }), "Blok Toevoegen")));
|
|
1349
1456
|
};
|
|
1350
1457
|
var AddContentDividerButton = (props) => {
|
|
1351
|
-
return /* @__PURE__ */
|
|
1458
|
+
return /* @__PURE__ */ React12.createElement(AddContentButton, { ...props }, /* @__PURE__ */ React12.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__ */ React12.createElement(
|
|
1352
1459
|
Button,
|
|
1353
1460
|
{
|
|
1354
1461
|
size: "sm",
|
|
1355
1462
|
className: "sb-absolute sb-left-1/2 sb-top-1/2 sb--translate-y-1/2 sb--translate-x-1/2 sb-shadow"
|
|
1356
1463
|
},
|
|
1357
|
-
/* @__PURE__ */
|
|
1464
|
+
/* @__PURE__ */ React12.createElement(PlusIcon, { className: "sb-mr-2 sb-h-4 sb-w-4" }),
|
|
1358
1465
|
"Blok Toevoegen"
|
|
1359
1466
|
)));
|
|
1360
1467
|
};
|