@simple-builder/react 1.0.15 → 1.0.17
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-7AH7M5MI.mjs} +272 -166
- package/dist/{build-container-client-GI5HL65K.js → build-container-client-WY6I3S6X.js} +329 -222
- package/dist/{builder-content-Y5UGAVGE.js → builder-content-LN4AL22U.js} +7 -7
- package/dist/{builder-content-SMRSZVD3.css → builder-content-NRFOTOLD.css} +99 -0
- package/dist/{builder-content-ETNK3ZJU.mjs → builder-content-ZUCSF3IA.mjs} +2 -2
- package/dist/{chunk-DO2DIXEI.js → chunk-2TW2TJGG.js} +3 -3
- package/dist/{chunk-ZHTUNLVE.mjs → chunk-4YC3BMSK.mjs} +2 -2
- package/dist/{chunk-UINPX3PZ.mjs → chunk-EAJECB23.mjs} +1 -1
- package/dist/{chunk-YUXA4HAL.js → chunk-IB3LYMKX.js} +5 -5
- package/dist/{chunk-VLRLE4MP.js → chunk-W2LT4IQQ.js} +1 -1
- package/dist/{chunk-2LPUNQNU.mjs → chunk-WBBJYW7G.mjs} +1 -1
- 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-4YC3BMSK.mjs';
|
|
3
|
+
import { buttonVariants, Button, useBuilder } from './chunk-EAJECB23.mjs';
|
|
4
|
+
import { cn, tv, DesignWrapper, builder, Image } from './chunk-WBBJYW7G.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,21 @@ 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
|
+
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
781
|
case "longText":
|
|
676
782
|
case "richText":
|
|
677
|
-
return /* @__PURE__ */
|
|
783
|
+
return /* @__PURE__ */ React12.createElement(Textarea, { ...field });
|
|
678
784
|
case "number":
|
|
679
|
-
return /* @__PURE__ */
|
|
785
|
+
return /* @__PURE__ */ React12.createElement(Input, { type: "number", ...field });
|
|
680
786
|
case "color":
|
|
681
|
-
return /* @__PURE__ */
|
|
787
|
+
return /* @__PURE__ */ React12.createElement(ColorPicker, { color: field.value, onColorChange: field.onChange });
|
|
682
788
|
case "date":
|
|
683
|
-
return /* @__PURE__ */
|
|
789
|
+
return /* @__PURE__ */ React12.createElement(Popover, null, /* @__PURE__ */ React12.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React12.createElement(
|
|
684
790
|
Button,
|
|
685
791
|
{
|
|
686
792
|
variant: "outline",
|
|
@@ -690,9 +796,9 @@ var RenderInput = (props) => {
|
|
|
690
796
|
!field.value && "sb-text-muted-foreground"
|
|
691
797
|
)
|
|
692
798
|
},
|
|
693
|
-
/* @__PURE__ */
|
|
694
|
-
field.value ? format(field.value, "PPP") : /* @__PURE__ */
|
|
695
|
-
)), /* @__PURE__ */
|
|
799
|
+
/* @__PURE__ */ React12.createElement(CalendarIcon, { className: "sb-mr-2 sb-h-4 sb-w-4" }),
|
|
800
|
+
field.value && !Array.isArray(field.value) ? format(field.value, "PPP") : /* @__PURE__ */ React12.createElement("span", null, "Pick a date")
|
|
801
|
+
)), /* @__PURE__ */ React12.createElement(PopoverContent, { className: "sb-w-auto sb-p-0", align: "start" }, /* @__PURE__ */ React12.createElement(
|
|
696
802
|
Calendar,
|
|
697
803
|
{
|
|
698
804
|
mode: "single",
|
|
@@ -702,9 +808,9 @@ var RenderInput = (props) => {
|
|
|
702
808
|
}
|
|
703
809
|
)));
|
|
704
810
|
case "boolean":
|
|
705
|
-
return /* @__PURE__ */
|
|
811
|
+
return /* @__PURE__ */ React12.createElement(Switch, { checked: field.value, onCheckedChange: field.onChange });
|
|
706
812
|
case "file":
|
|
707
|
-
return /* @__PURE__ */
|
|
813
|
+
return /* @__PURE__ */ React12.createElement(
|
|
708
814
|
MediaInput,
|
|
709
815
|
{
|
|
710
816
|
className: "sb-grid sb-grid-cols-2 sb-gap-1",
|
|
@@ -735,7 +841,7 @@ var tabsListVariants = tv({
|
|
|
735
841
|
variant: "contained"
|
|
736
842
|
}
|
|
737
843
|
});
|
|
738
|
-
var TabsList =
|
|
844
|
+
var TabsList = React12.forwardRef(({ variant, className, ...props }, ref) => /* @__PURE__ */ React12.createElement(
|
|
739
845
|
TabsPrimitive.List,
|
|
740
846
|
{
|
|
741
847
|
ref,
|
|
@@ -755,7 +861,7 @@ var tabsTriggerVariants = tv({
|
|
|
755
861
|
variant: "contained"
|
|
756
862
|
}
|
|
757
863
|
});
|
|
758
|
-
var TabsTrigger =
|
|
864
|
+
var TabsTrigger = React12.forwardRef(({ variant, className, ...props }, ref) => /* @__PURE__ */ React12.createElement(
|
|
759
865
|
TabsPrimitive.Trigger,
|
|
760
866
|
{
|
|
761
867
|
ref,
|
|
@@ -764,7 +870,7 @@ var TabsTrigger = React11.forwardRef(({ variant, className, ...props }, ref) =>
|
|
|
764
870
|
}
|
|
765
871
|
));
|
|
766
872
|
TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
|
|
767
|
-
var TabsContent =
|
|
873
|
+
var TabsContent = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React12.createElement(
|
|
768
874
|
TabsPrimitive.Content,
|
|
769
875
|
{
|
|
770
876
|
ref,
|
|
@@ -799,14 +905,14 @@ var BackgroundPicker = (props) => {
|
|
|
799
905
|
"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
906
|
"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
907
|
];
|
|
802
|
-
const defaultTab =
|
|
908
|
+
const defaultTab = React12.useMemo(() => {
|
|
803
909
|
if (background.includes("url"))
|
|
804
910
|
return "image";
|
|
805
911
|
if (background.includes("gradient"))
|
|
806
912
|
return "gradient";
|
|
807
913
|
return "solid";
|
|
808
914
|
}, [background]);
|
|
809
|
-
return /* @__PURE__ */
|
|
915
|
+
return /* @__PURE__ */ React12.createElement(Popover, null, /* @__PURE__ */ React12.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React12.createElement(
|
|
810
916
|
Button,
|
|
811
917
|
{
|
|
812
918
|
variant: "outline",
|
|
@@ -817,20 +923,20 @@ var BackgroundPicker = (props) => {
|
|
|
817
923
|
className
|
|
818
924
|
)
|
|
819
925
|
},
|
|
820
|
-
/* @__PURE__ */
|
|
926
|
+
/* @__PURE__ */ React12.createElement("div", { className: "sb-w-full sb-flex sb-items-center sb-gap-2" }, background ? /* @__PURE__ */ React12.createElement(
|
|
821
927
|
"div",
|
|
822
928
|
{
|
|
823
929
|
className: "sb-h-4 sb-w-4 sb-rounded !sb-bg-center !sb-bg-cover sb-transition-all sb-border",
|
|
824
930
|
style: { background }
|
|
825
931
|
}
|
|
826
|
-
) : /* @__PURE__ */
|
|
827
|
-
)), /* @__PURE__ */
|
|
932
|
+
) : /* @__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"))
|
|
933
|
+
)), /* @__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
934
|
TabsContent,
|
|
829
935
|
{
|
|
830
936
|
value: "solid",
|
|
831
937
|
className: "data-[state=active]:sb-flex sb-flex-wrap sb-gap-1 sb-p-4"
|
|
832
938
|
},
|
|
833
|
-
solids.map((s) => /* @__PURE__ */
|
|
939
|
+
solids.map((s) => /* @__PURE__ */ React12.createElement(
|
|
834
940
|
"div",
|
|
835
941
|
{
|
|
836
942
|
key: s,
|
|
@@ -839,13 +945,13 @@ var BackgroundPicker = (props) => {
|
|
|
839
945
|
onClick: () => onBackgroundChange(s)
|
|
840
946
|
}
|
|
841
947
|
))
|
|
842
|
-
), /* @__PURE__ */
|
|
948
|
+
), /* @__PURE__ */ React12.createElement(
|
|
843
949
|
TabsContent,
|
|
844
950
|
{
|
|
845
951
|
value: "gradient",
|
|
846
952
|
className: "data-[state=active]:sb-flex sb-flex-wrap sb-gap-1 sb-p-4"
|
|
847
953
|
},
|
|
848
|
-
gradients.map((s) => /* @__PURE__ */
|
|
954
|
+
gradients.map((s) => /* @__PURE__ */ React12.createElement(
|
|
849
955
|
"div",
|
|
850
956
|
{
|
|
851
957
|
key: s,
|
|
@@ -854,7 +960,7 @@ var BackgroundPicker = (props) => {
|
|
|
854
960
|
onClick: () => onBackgroundChange(s)
|
|
855
961
|
}
|
|
856
962
|
))
|
|
857
|
-
), /* @__PURE__ */
|
|
963
|
+
), /* @__PURE__ */ React12.createElement(TabsContent, { value: "image" }, /* @__PURE__ */ React12.createElement("div", { className: "sb-p-4 sb-border-b" }, /* @__PURE__ */ React12.createElement(
|
|
858
964
|
MediaInput,
|
|
859
965
|
{
|
|
860
966
|
className: "sb-grid sb-grid-cols-2 sb-gap-1",
|
|
@@ -870,7 +976,7 @@ var BackgroundPicker = (props) => {
|
|
|
870
976
|
"media-input: Error: " + e?.description
|
|
871
977
|
)
|
|
872
978
|
}
|
|
873
|
-
)), /* @__PURE__ */
|
|
979
|
+
)), /* @__PURE__ */ React12.createElement("div", { className: "sb-grid sb-grid-cols-2 sb-gap-1 sb-p-4" }, images.map((s) => /* @__PURE__ */ React12.createElement(
|
|
874
980
|
"div",
|
|
875
981
|
{
|
|
876
982
|
key: s,
|
|
@@ -898,7 +1004,7 @@ var toggleVariants = tv({
|
|
|
898
1004
|
size: "default"
|
|
899
1005
|
}
|
|
900
1006
|
});
|
|
901
|
-
var Toggle =
|
|
1007
|
+
var Toggle = React12.forwardRef(({ className, variant, size, ...props }, ref) => /* @__PURE__ */ React12.createElement(
|
|
902
1008
|
TogglePrimitive.Root,
|
|
903
1009
|
{
|
|
904
1010
|
ref,
|
|
@@ -910,70 +1016,70 @@ Toggle.displayName = TogglePrimitive.Root.displayName;
|
|
|
910
1016
|
|
|
911
1017
|
// src/components/ui/spacing-input.tsx
|
|
912
1018
|
var SpacingInput = (props) => {
|
|
913
|
-
const [value, setValue] =
|
|
914
|
-
const [indipendent, setIndipendent] =
|
|
1019
|
+
const [value, setValue] = React12.useState(parse(props.value || "0px"));
|
|
1020
|
+
const [indipendent, setIndipendent] = React12.useState(
|
|
915
1021
|
isIndipendent(parse(props.value || "0px"))
|
|
916
1022
|
);
|
|
917
|
-
|
|
1023
|
+
React12.useEffect(() => {
|
|
918
1024
|
if (!props.onChange)
|
|
919
1025
|
return;
|
|
920
1026
|
props.onChange(stringify(value));
|
|
921
1027
|
}, [value, props.onChange]);
|
|
922
|
-
return /* @__PURE__ */
|
|
1028
|
+
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
1029
|
AdvancedInput,
|
|
924
1030
|
{
|
|
925
1031
|
value: value.left,
|
|
926
1032
|
pattern: "\\d+",
|
|
927
1033
|
onChange: ({ target: { value: value2 } }) => setValue((prev) => ({ ...prev, left: +value2, right: +value2 })),
|
|
928
|
-
prepend: /* @__PURE__ */
|
|
929
|
-
append: /* @__PURE__ */
|
|
1034
|
+
prepend: /* @__PURE__ */ React12.createElement(AlignHorizontalSpaceAroundIcon, { className: "sb-h-4 sb-w-4" }),
|
|
1035
|
+
append: /* @__PURE__ */ React12.createElement("span", { className: "sb-text-muted-foreground" }, "px")
|
|
930
1036
|
}
|
|
931
|
-
), /* @__PURE__ */
|
|
1037
|
+
), /* @__PURE__ */ React12.createElement(
|
|
932
1038
|
AdvancedInput,
|
|
933
1039
|
{
|
|
934
1040
|
value: value.top,
|
|
935
1041
|
pattern: "\\d+",
|
|
936
1042
|
onChange: ({ target: { value: value2 } }) => setValue((prev) => ({ ...prev, top: +value2, bottom: +value2 })),
|
|
937
|
-
prepend: /* @__PURE__ */
|
|
938
|
-
append: /* @__PURE__ */
|
|
1043
|
+
prepend: /* @__PURE__ */ React12.createElement(AlignHorizontalSpaceAroundIcon, { className: "sb-h-4 sb-w-4 sb-rotate-90" }),
|
|
1044
|
+
append: /* @__PURE__ */ React12.createElement("span", { className: "sb-text-muted-foreground" }, "px")
|
|
939
1045
|
}
|
|
940
|
-
)) : /* @__PURE__ */
|
|
1046
|
+
)) : /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(
|
|
941
1047
|
AdvancedInput,
|
|
942
1048
|
{
|
|
943
1049
|
value: value.left,
|
|
944
1050
|
pattern: "\\d+",
|
|
945
1051
|
onChange: ({ target: { value: value2 } }) => setValue((prev) => ({ ...prev, left: +value2 })),
|
|
946
|
-
prepend: /* @__PURE__ */
|
|
947
|
-
append: /* @__PURE__ */
|
|
1052
|
+
prepend: /* @__PURE__ */ React12.createElement(AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4" }),
|
|
1053
|
+
append: /* @__PURE__ */ React12.createElement("span", { className: "sb-text-muted-foreground" }, "px")
|
|
948
1054
|
}
|
|
949
|
-
), /* @__PURE__ */
|
|
1055
|
+
), /* @__PURE__ */ React12.createElement(
|
|
950
1056
|
AdvancedInput,
|
|
951
1057
|
{
|
|
952
1058
|
value: value.top,
|
|
953
1059
|
pattern: "\\d+",
|
|
954
1060
|
onChange: ({ target: { value: value2 } }) => setValue((prev) => ({ ...prev, top: +value2 })),
|
|
955
|
-
prepend: /* @__PURE__ */
|
|
956
|
-
append: /* @__PURE__ */
|
|
1061
|
+
prepend: /* @__PURE__ */ React12.createElement(AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb-rotate-90" }),
|
|
1062
|
+
append: /* @__PURE__ */ React12.createElement("span", { className: "sb-text-muted-foreground" }, "px")
|
|
957
1063
|
}
|
|
958
|
-
), /* @__PURE__ */
|
|
1064
|
+
), /* @__PURE__ */ React12.createElement(
|
|
959
1065
|
AdvancedInput,
|
|
960
1066
|
{
|
|
961
1067
|
value: value.right,
|
|
962
1068
|
pattern: "\\d+",
|
|
963
1069
|
onChange: ({ target: { value: value2 } }) => setValue((prev) => ({ ...prev, right: +value2 })),
|
|
964
|
-
prepend: /* @__PURE__ */
|
|
965
|
-
append: /* @__PURE__ */
|
|
1070
|
+
prepend: /* @__PURE__ */ React12.createElement(AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb-rotate-180" }),
|
|
1071
|
+
append: /* @__PURE__ */ React12.createElement("span", { className: "sb-text-muted-foreground" }, "px")
|
|
966
1072
|
}
|
|
967
|
-
), /* @__PURE__ */
|
|
1073
|
+
), /* @__PURE__ */ React12.createElement(
|
|
968
1074
|
AdvancedInput,
|
|
969
1075
|
{
|
|
970
1076
|
value: value.bottom,
|
|
971
1077
|
pattern: "\\d+",
|
|
972
1078
|
onChange: ({ target: { value: value2 } }) => setValue((prev) => ({ ...prev, bottom: +value2 })),
|
|
973
|
-
prepend: /* @__PURE__ */
|
|
974
|
-
append: /* @__PURE__ */
|
|
1079
|
+
prepend: /* @__PURE__ */ React12.createElement(AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb--rotate-90" }),
|
|
1080
|
+
append: /* @__PURE__ */ React12.createElement("span", { className: "sb-text-muted-foreground" }, "px")
|
|
975
1081
|
}
|
|
976
|
-
))), /* @__PURE__ */
|
|
1082
|
+
))), /* @__PURE__ */ React12.createElement("div", { className: "sb-shrink-0" }, /* @__PURE__ */ React12.createElement(
|
|
977
1083
|
Toggle,
|
|
978
1084
|
{
|
|
979
1085
|
className: "sb-shrink-0 sb-flex sb-w-8 sb-h-8 sb-p-0",
|
|
@@ -982,7 +1088,7 @@ var SpacingInput = (props) => {
|
|
|
982
1088
|
pressed: indipendent,
|
|
983
1089
|
onPressedChange: setIndipendent
|
|
984
1090
|
},
|
|
985
|
-
/* @__PURE__ */
|
|
1091
|
+
/* @__PURE__ */ React12.createElement(ScanIcon, { className: "sb-h-4 sb-w-4" })
|
|
986
1092
|
)));
|
|
987
1093
|
};
|
|
988
1094
|
var isIndipendent = (value) => {
|
|
@@ -1114,102 +1220,102 @@ var ItemDesignForm = (props) => {
|
|
|
1114
1220
|
}
|
|
1115
1221
|
});
|
|
1116
1222
|
};
|
|
1117
|
-
const [device, setDevice] =
|
|
1118
|
-
|
|
1223
|
+
const [device, setDevice] = React12.useState("desktop");
|
|
1224
|
+
React12.useEffect(() => {
|
|
1119
1225
|
const subscription = form.watch(() => form.handleSubmit(onSubmit)());
|
|
1120
1226
|
return () => subscription.unsubscribe();
|
|
1121
1227
|
}, [form.watch, form.handleSubmit]);
|
|
1122
|
-
return /* @__PURE__ */
|
|
1228
|
+
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
1229
|
Tabs,
|
|
1124
1230
|
{
|
|
1125
1231
|
defaultValue: device,
|
|
1126
1232
|
onValueChange: (device2) => setDevice(device2)
|
|
1127
1233
|
},
|
|
1128
|
-
/* @__PURE__ */
|
|
1129
|
-
), /* @__PURE__ */
|
|
1234
|
+
/* @__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")))
|
|
1235
|
+
), /* @__PURE__ */ React12.createElement("div", { className: "sb-space-y-4" }, /* @__PURE__ */ React12.createElement(
|
|
1130
1236
|
FormField,
|
|
1131
1237
|
{
|
|
1132
1238
|
control: form.control,
|
|
1133
1239
|
key: `${device}.background`,
|
|
1134
1240
|
name: `${device}.background`,
|
|
1135
|
-
render: ({ field }) => /* @__PURE__ */
|
|
1241
|
+
render: ({ field }) => /* @__PURE__ */ React12.createElement(FormItem, null, /* @__PURE__ */ React12.createElement(FormLabel, null, "Achtergrond"), /* @__PURE__ */ React12.createElement(FormControl, null, /* @__PURE__ */ React12.createElement(
|
|
1136
1242
|
BackgroundPicker,
|
|
1137
1243
|
{
|
|
1138
1244
|
background: field.value,
|
|
1139
1245
|
onBackgroundChange: field.onChange
|
|
1140
1246
|
}
|
|
1141
|
-
)), /* @__PURE__ */
|
|
1247
|
+
)), /* @__PURE__ */ React12.createElement(FormMessage, null))
|
|
1142
1248
|
}
|
|
1143
|
-
), /* @__PURE__ */
|
|
1249
|
+
), /* @__PURE__ */ React12.createElement(
|
|
1144
1250
|
FormField,
|
|
1145
1251
|
{
|
|
1146
1252
|
control: form.control,
|
|
1147
1253
|
key: `${device}.color`,
|
|
1148
1254
|
name: `${device}.color`,
|
|
1149
|
-
render: ({ field }) => /* @__PURE__ */
|
|
1255
|
+
render: ({ field }) => /* @__PURE__ */ React12.createElement(FormItem, null, /* @__PURE__ */ React12.createElement(FormLabel, null, "Inhoud kleur"), /* @__PURE__ */ React12.createElement(FormControl, null, /* @__PURE__ */ React12.createElement(
|
|
1150
1256
|
ColorPicker,
|
|
1151
1257
|
{
|
|
1152
1258
|
color: field.value,
|
|
1153
1259
|
onColorChange: field.onChange
|
|
1154
1260
|
}
|
|
1155
|
-
)), /* @__PURE__ */
|
|
1261
|
+
)), /* @__PURE__ */ React12.createElement(FormMessage, null))
|
|
1156
1262
|
}
|
|
1157
|
-
), /* @__PURE__ */
|
|
1263
|
+
), /* @__PURE__ */ React12.createElement("hr", null), /* @__PURE__ */ React12.createElement(
|
|
1158
1264
|
FormField,
|
|
1159
1265
|
{
|
|
1160
1266
|
control: form.control,
|
|
1161
1267
|
name: "container",
|
|
1162
|
-
render: ({ field }) => /* @__PURE__ */
|
|
1268
|
+
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
1269
|
Switch,
|
|
1164
1270
|
{
|
|
1165
1271
|
checked: !field.value,
|
|
1166
1272
|
onCheckedChange: (v) => field.onChange(!v)
|
|
1167
1273
|
}
|
|
1168
|
-
)), /* @__PURE__ */
|
|
1274
|
+
)), /* @__PURE__ */ React12.createElement(FormMessage, null))
|
|
1169
1275
|
}
|
|
1170
|
-
), /* @__PURE__ */
|
|
1276
|
+
), /* @__PURE__ */ React12.createElement("hr", null), /* @__PURE__ */ React12.createElement(
|
|
1171
1277
|
FormField,
|
|
1172
1278
|
{
|
|
1173
1279
|
control: form.control,
|
|
1174
1280
|
key: `${device}.padding`,
|
|
1175
1281
|
name: `${device}.padding`,
|
|
1176
|
-
render: ({ field }) => /* @__PURE__ */
|
|
1282
|
+
render: ({ field }) => /* @__PURE__ */ React12.createElement(FormItem, null, /* @__PURE__ */ React12.createElement(FormLabel, null, "Padding"), /* @__PURE__ */ React12.createElement(FormControl, null, /* @__PURE__ */ React12.createElement(
|
|
1177
1283
|
SpacingInput,
|
|
1178
1284
|
{
|
|
1179
1285
|
value: field.value,
|
|
1180
1286
|
onChange: field.onChange
|
|
1181
1287
|
}
|
|
1182
|
-
)), /* @__PURE__ */
|
|
1288
|
+
)), /* @__PURE__ */ React12.createElement(FormMessage, null))
|
|
1183
1289
|
}
|
|
1184
|
-
), /* @__PURE__ */
|
|
1290
|
+
), /* @__PURE__ */ React12.createElement(
|
|
1185
1291
|
FormField,
|
|
1186
1292
|
{
|
|
1187
1293
|
control: form.control,
|
|
1188
1294
|
key: `${device}.margin`,
|
|
1189
1295
|
name: `${device}.margin`,
|
|
1190
|
-
render: ({ field }) => /* @__PURE__ */
|
|
1296
|
+
render: ({ field }) => /* @__PURE__ */ React12.createElement(FormItem, null, /* @__PURE__ */ React12.createElement(FormLabel, null, "Margin"), /* @__PURE__ */ React12.createElement(FormControl, null, /* @__PURE__ */ React12.createElement(
|
|
1191
1297
|
SpacingInput,
|
|
1192
1298
|
{
|
|
1193
1299
|
value: field.value,
|
|
1194
1300
|
onChange: field.onChange
|
|
1195
1301
|
}
|
|
1196
|
-
)), /* @__PURE__ */
|
|
1302
|
+
)), /* @__PURE__ */ React12.createElement(FormMessage, null))
|
|
1197
1303
|
}
|
|
1198
1304
|
)))));
|
|
1199
1305
|
};
|
|
1200
|
-
var ScrollArea =
|
|
1306
|
+
var ScrollArea = React12.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React12.createElement(
|
|
1201
1307
|
ScrollAreaPrimitive.Root,
|
|
1202
1308
|
{
|
|
1203
1309
|
ref,
|
|
1204
1310
|
className: cn("sb-relative sb-overflow-hidden", className),
|
|
1205
1311
|
...props
|
|
1206
1312
|
},
|
|
1207
|
-
/* @__PURE__ */
|
|
1208
|
-
/* @__PURE__ */
|
|
1209
|
-
/* @__PURE__ */
|
|
1313
|
+
/* @__PURE__ */ React12.createElement(ScrollAreaPrimitive.Viewport, { className: "sb-h-full sb-max-h-[80vh] sb-w-full sb-rounded-[inherit]" }, children),
|
|
1314
|
+
/* @__PURE__ */ React12.createElement(ScrollBar, null),
|
|
1315
|
+
/* @__PURE__ */ React12.createElement(ScrollAreaPrimitive.Corner, null)
|
|
1210
1316
|
));
|
|
1211
1317
|
ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
|
|
1212
|
-
var ScrollBar =
|
|
1318
|
+
var ScrollBar = React12.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ React12.createElement(
|
|
1213
1319
|
ScrollAreaPrimitive.ScrollAreaScrollbar,
|
|
1214
1320
|
{
|
|
1215
1321
|
ref,
|
|
@@ -1222,7 +1328,7 @@ var ScrollBar = React11.forwardRef(({ className, orientation = "vertical", ...pr
|
|
|
1222
1328
|
),
|
|
1223
1329
|
...props
|
|
1224
1330
|
},
|
|
1225
|
-
/* @__PURE__ */
|
|
1331
|
+
/* @__PURE__ */ React12.createElement(ScrollAreaPrimitive.ScrollAreaThumb, { className: "sb-relative sb-flex-1 sb-rounded-full sb-bg-border" })
|
|
1226
1332
|
));
|
|
1227
1333
|
ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
|
|
1228
1334
|
|
|
@@ -1230,7 +1336,7 @@ ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
|
|
|
1230
1336
|
var ContainerItemToolbar = (props) => {
|
|
1231
1337
|
const { contentId, canBringUp = false, canBringDown = false } = props;
|
|
1232
1338
|
const { bringUp, bringDown } = useBuilder();
|
|
1233
|
-
return /* @__PURE__ */
|
|
1339
|
+
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
1340
|
Button,
|
|
1235
1341
|
{
|
|
1236
1342
|
variant: "ghost",
|
|
@@ -1238,8 +1344,8 @@ var ContainerItemToolbar = (props) => {
|
|
|
1238
1344
|
onClick: () => bringUp(contentId),
|
|
1239
1345
|
disabled: !canBringUp
|
|
1240
1346
|
},
|
|
1241
|
-
/* @__PURE__ */
|
|
1242
|
-
), /* @__PURE__ */
|
|
1347
|
+
/* @__PURE__ */ React12.createElement(ArrowUp, { className: "sb-h-5 sb-w-5" })
|
|
1348
|
+
), /* @__PURE__ */ React12.createElement(
|
|
1243
1349
|
Button,
|
|
1244
1350
|
{
|
|
1245
1351
|
variant: "ghost",
|
|
@@ -1247,11 +1353,11 @@ var ContainerItemToolbar = (props) => {
|
|
|
1247
1353
|
onClick: () => bringDown(contentId),
|
|
1248
1354
|
disabled: !canBringDown
|
|
1249
1355
|
},
|
|
1250
|
-
/* @__PURE__ */
|
|
1251
|
-
), /* @__PURE__ */
|
|
1356
|
+
/* @__PURE__ */ React12.createElement(ArrowDown, { className: "sb-h-5 sb-w-5" })
|
|
1357
|
+
), /* @__PURE__ */ React12.createElement(DeleteButton, { contentId })));
|
|
1252
1358
|
};
|
|
1253
1359
|
var EditButton = ({ id }) => {
|
|
1254
|
-
return /* @__PURE__ */
|
|
1360
|
+
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
1361
|
PopoverContent,
|
|
1256
1362
|
{
|
|
1257
1363
|
side: "left",
|
|
@@ -1261,7 +1367,7 @@ var EditButton = ({ id }) => {
|
|
|
1261
1367
|
className: "sb-p-0 sb-relative",
|
|
1262
1368
|
collisionPadding: 16
|
|
1263
1369
|
},
|
|
1264
|
-
/* @__PURE__ */
|
|
1370
|
+
/* @__PURE__ */ React12.createElement(EditPopoverInner, { id })
|
|
1265
1371
|
));
|
|
1266
1372
|
};
|
|
1267
1373
|
var EditPopoverInner = (props) => {
|
|
@@ -1273,18 +1379,18 @@ var EditPopoverInner = (props) => {
|
|
|
1273
1379
|
`[simple-builder]: Item with id ${id} not found in container item form component`
|
|
1274
1380
|
);
|
|
1275
1381
|
}
|
|
1276
|
-
return /* @__PURE__ */
|
|
1382
|
+
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
1383
|
};
|
|
1278
1384
|
var DeleteButton = ({ contentId }) => {
|
|
1279
1385
|
const { deleteContent } = useBuilder();
|
|
1280
|
-
return /* @__PURE__ */
|
|
1386
|
+
return /* @__PURE__ */ React12.createElement(AlertDialog, null, /* @__PURE__ */ React12.createElement(AlertDialogTrigger, { asChild: true }, /* @__PURE__ */ React12.createElement(
|
|
1281
1387
|
Button,
|
|
1282
1388
|
{
|
|
1283
1389
|
variant: "ghost",
|
|
1284
1390
|
className: "sb-w-8 sb-h-8 sb-p-0 sb-text-destructive"
|
|
1285
1391
|
},
|
|
1286
|
-
/* @__PURE__ */
|
|
1287
|
-
)), /* @__PURE__ */
|
|
1392
|
+
/* @__PURE__ */ React12.createElement(Trash2Icon, { className: "sb-h-5 sb-w-5" })
|
|
1393
|
+
)), /* @__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
1394
|
AlertDialogAction,
|
|
1289
1395
|
{
|
|
1290
1396
|
className: buttonVariants({ variant: "destructive" }),
|
|
@@ -1303,14 +1409,14 @@ var BuildContainerInner = (props) => {
|
|
|
1303
1409
|
"[simple-builder]: Multiple content blocks detected when using property multiple false."
|
|
1304
1410
|
);
|
|
1305
1411
|
}
|
|
1306
|
-
return /* @__PURE__ */
|
|
1412
|
+
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
1413
|
ContainerItemToolbar,
|
|
1308
1414
|
{
|
|
1309
1415
|
contentId: item.id,
|
|
1310
1416
|
canBringUp: i > 0,
|
|
1311
1417
|
canBringDown: i < items.length - 1
|
|
1312
1418
|
}
|
|
1313
|
-
)), multiple && /* @__PURE__ */
|
|
1419
|
+
)), multiple && /* @__PURE__ */ React12.createElement(
|
|
1314
1420
|
AddContentDividerButton,
|
|
1315
1421
|
{
|
|
1316
1422
|
parent: id,
|
|
@@ -1323,9 +1429,9 @@ var build_container_client_default = BuildContainerInner;
|
|
|
1323
1429
|
var AddContentButton = (props) => {
|
|
1324
1430
|
const components = builder.getComponents();
|
|
1325
1431
|
const { addContent } = useBuilder();
|
|
1326
|
-
return /* @__PURE__ */
|
|
1327
|
-
const
|
|
1328
|
-
return /* @__PURE__ */
|
|
1432
|
+
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) => {
|
|
1433
|
+
const Icon2 = component.icon ?? ImageIcon;
|
|
1434
|
+
return /* @__PURE__ */ React12.createElement(PopoverClose, { key: component.name, asChild: true }, /* @__PURE__ */ React12.createElement(
|
|
1329
1435
|
Button,
|
|
1330
1436
|
{
|
|
1331
1437
|
variant: "ghost",
|
|
@@ -1339,22 +1445,22 @@ var AddContentButton = (props) => {
|
|
|
1339
1445
|
);
|
|
1340
1446
|
}
|
|
1341
1447
|
},
|
|
1342
|
-
/* @__PURE__ */
|
|
1448
|
+
/* @__PURE__ */ React12.createElement(Icon2, { className: "sb-mr-2 sb-h-4 sb-w-4 sb-shrink-0" }),
|
|
1343
1449
|
component.friendlyName ?? component.name
|
|
1344
1450
|
));
|
|
1345
1451
|
}))));
|
|
1346
1452
|
};
|
|
1347
1453
|
var AddContentPlaceholder = (props) => {
|
|
1348
|
-
return /* @__PURE__ */
|
|
1454
|
+
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
1455
|
};
|
|
1350
1456
|
var AddContentDividerButton = (props) => {
|
|
1351
|
-
return /* @__PURE__ */
|
|
1457
|
+
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
1458
|
Button,
|
|
1353
1459
|
{
|
|
1354
1460
|
size: "sm",
|
|
1355
1461
|
className: "sb-absolute sb-left-1/2 sb-top-1/2 sb--translate-y-1/2 sb--translate-x-1/2 sb-shadow"
|
|
1356
1462
|
},
|
|
1357
|
-
/* @__PURE__ */
|
|
1463
|
+
/* @__PURE__ */ React12.createElement(PlusIcon, { className: "sb-mr-2 sb-h-4 sb-w-4" }),
|
|
1358
1464
|
"Blok Toevoegen"
|
|
1359
1465
|
)));
|
|
1360
1466
|
};
|