@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,10 +1,10 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
'use strict';
|
|
3
3
|
|
|
4
|
-
require('./chunk-
|
|
5
|
-
var
|
|
6
|
-
var
|
|
7
|
-
var
|
|
4
|
+
require('./chunk-2TW2TJGG.js');
|
|
5
|
+
var chunkIB3LYMKX_js = require('./chunk-IB3LYMKX.js');
|
|
6
|
+
var chunkW2LT4IQQ_js = require('./chunk-W2LT4IQQ.js');
|
|
7
|
+
var React12 = require('react');
|
|
8
8
|
var lucideReact = require('lucide-react');
|
|
9
9
|
var AlertDialogPrimitive = require('@radix-ui/react-alert-dialog');
|
|
10
10
|
var PopoverPrimitive = require('@radix-ui/react-popover');
|
|
@@ -13,6 +13,7 @@ var reactHookForm = require('react-hook-form');
|
|
|
13
13
|
var reactDayPicker = require('react-day-picker');
|
|
14
14
|
var reactSlot = require('@radix-ui/react-slot');
|
|
15
15
|
var LabelPrimitive = require('@radix-ui/react-label');
|
|
16
|
+
var SelectPrimitive = require('@radix-ui/react-select');
|
|
16
17
|
var SwitchPrimitives = require('@radix-ui/react-switch');
|
|
17
18
|
var zod$1 = require('@hookform/resolvers/zod');
|
|
18
19
|
var zod = require('zod');
|
|
@@ -38,10 +39,11 @@ function _interopNamespace(e) {
|
|
|
38
39
|
return Object.freeze(n);
|
|
39
40
|
}
|
|
40
41
|
|
|
41
|
-
var
|
|
42
|
+
var React12__namespace = /*#__PURE__*/_interopNamespace(React12);
|
|
42
43
|
var AlertDialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(AlertDialogPrimitive);
|
|
43
44
|
var PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespace(PopoverPrimitive);
|
|
44
45
|
var LabelPrimitive__namespace = /*#__PURE__*/_interopNamespace(LabelPrimitive);
|
|
46
|
+
var SelectPrimitive__namespace = /*#__PURE__*/_interopNamespace(SelectPrimitive);
|
|
45
47
|
var SwitchPrimitives__namespace = /*#__PURE__*/_interopNamespace(SwitchPrimitives);
|
|
46
48
|
var TabsPrimitive__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitive);
|
|
47
49
|
var TogglePrimitive__namespace = /*#__PURE__*/_interopNamespace(TogglePrimitive);
|
|
@@ -50,10 +52,10 @@ var ScrollAreaPrimitive__namespace = /*#__PURE__*/_interopNamespace(ScrollAreaPr
|
|
|
50
52
|
var AlertDialog = AlertDialogPrimitive__namespace.Root;
|
|
51
53
|
var AlertDialogTrigger = AlertDialogPrimitive__namespace.Trigger;
|
|
52
54
|
var AlertDialogPortal = AlertDialogPrimitive__namespace.Portal;
|
|
53
|
-
var AlertDialogOverlay =
|
|
55
|
+
var AlertDialogOverlay = React12__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React12__namespace.createElement(
|
|
54
56
|
AlertDialogPrimitive__namespace.Overlay,
|
|
55
57
|
{
|
|
56
|
-
className:
|
|
58
|
+
className: chunkW2LT4IQQ_js.cn(
|
|
57
59
|
"sb-fixed sb-inset-0 sb-z-50 sb-bg-background/80 sb-backdrop-blur-sm 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",
|
|
58
60
|
className
|
|
59
61
|
),
|
|
@@ -62,11 +64,11 @@ var AlertDialogOverlay = React11__namespace.forwardRef(({ className, ...props },
|
|
|
62
64
|
}
|
|
63
65
|
));
|
|
64
66
|
AlertDialogOverlay.displayName = AlertDialogPrimitive__namespace.Overlay.displayName;
|
|
65
|
-
var AlertDialogContent =
|
|
67
|
+
var AlertDialogContent = React12__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React12__namespace.createElement(AlertDialogPortal, null, /* @__PURE__ */ React12__namespace.createElement(AlertDialogOverlay, null), /* @__PURE__ */ React12__namespace.createElement(
|
|
66
68
|
AlertDialogPrimitive__namespace.Content,
|
|
67
69
|
{
|
|
68
70
|
ref,
|
|
69
|
-
className:
|
|
71
|
+
className: chunkW2LT4IQQ_js.cn(
|
|
70
72
|
"sb-fixed sb-font-roboto sb-left-[50%] sb-top-[50%] sb-z-50 sb-grid sb-w-full sb-max-w-lg sb-translate-x-[-50%] sb-translate-y-[-50%] sb-gap-4 sb-border sb-bg-background sb-p-6 sb-shadow-lg sb-duration-200 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-[state=closed]:sb-slide-out-to-left-1/2 data-[state=closed]:sb-slide-out-to-top-[48%] data-[state=open]:sb-slide-in-from-left-1/2 data-[state=open]:sb-slide-in-from-top-[48%] sm:sb-rounded-lg",
|
|
71
73
|
className
|
|
72
74
|
),
|
|
@@ -77,10 +79,10 @@ AlertDialogContent.displayName = AlertDialogPrimitive__namespace.Content.display
|
|
|
77
79
|
var AlertDialogFooter = ({
|
|
78
80
|
className,
|
|
79
81
|
...props
|
|
80
|
-
}) => /* @__PURE__ */
|
|
82
|
+
}) => /* @__PURE__ */ React12__namespace.createElement(
|
|
81
83
|
"div",
|
|
82
84
|
{
|
|
83
|
-
className:
|
|
85
|
+
className: chunkW2LT4IQQ_js.cn(
|
|
84
86
|
"sb-flex sb-flex-col-reverse sm:sb-flex-row sm:sb-justify-end sm:sb-space-x-2",
|
|
85
87
|
className
|
|
86
88
|
),
|
|
@@ -88,39 +90,39 @@ var AlertDialogFooter = ({
|
|
|
88
90
|
}
|
|
89
91
|
);
|
|
90
92
|
AlertDialogFooter.displayName = "AlertDialogFooter";
|
|
91
|
-
var AlertDialogTitle =
|
|
93
|
+
var AlertDialogTitle = React12__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React12__namespace.createElement(
|
|
92
94
|
AlertDialogPrimitive__namespace.Title,
|
|
93
95
|
{
|
|
94
96
|
ref,
|
|
95
|
-
className:
|
|
97
|
+
className: chunkW2LT4IQQ_js.cn("sb-text-lg sb-font-semibold", className),
|
|
96
98
|
...props
|
|
97
99
|
}
|
|
98
100
|
));
|
|
99
101
|
AlertDialogTitle.displayName = AlertDialogPrimitive__namespace.Title.displayName;
|
|
100
|
-
var AlertDialogDescription =
|
|
102
|
+
var AlertDialogDescription = React12__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React12__namespace.createElement(
|
|
101
103
|
AlertDialogPrimitive__namespace.Description,
|
|
102
104
|
{
|
|
103
105
|
ref,
|
|
104
|
-
className:
|
|
106
|
+
className: chunkW2LT4IQQ_js.cn("sb-text-sm sb-text-muted-foreground", className),
|
|
105
107
|
...props
|
|
106
108
|
}
|
|
107
109
|
));
|
|
108
110
|
AlertDialogDescription.displayName = AlertDialogPrimitive__namespace.Description.displayName;
|
|
109
|
-
var AlertDialogAction =
|
|
111
|
+
var AlertDialogAction = React12__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React12__namespace.createElement(
|
|
110
112
|
AlertDialogPrimitive__namespace.Action,
|
|
111
113
|
{
|
|
112
114
|
ref,
|
|
113
|
-
className:
|
|
115
|
+
className: chunkW2LT4IQQ_js.cn(chunkIB3LYMKX_js.buttonVariants(), className),
|
|
114
116
|
...props
|
|
115
117
|
}
|
|
116
118
|
));
|
|
117
119
|
AlertDialogAction.displayName = AlertDialogPrimitive__namespace.Action.displayName;
|
|
118
|
-
var AlertDialogCancel =
|
|
120
|
+
var AlertDialogCancel = React12__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React12__namespace.createElement(
|
|
119
121
|
AlertDialogPrimitive__namespace.Cancel,
|
|
120
122
|
{
|
|
121
123
|
ref,
|
|
122
|
-
className:
|
|
123
|
-
|
|
124
|
+
className: chunkW2LT4IQQ_js.cn(
|
|
125
|
+
chunkIB3LYMKX_js.buttonVariants({ variant: "outline" }),
|
|
124
126
|
"sb-mt-2 sm:sb-mt-0",
|
|
125
127
|
className
|
|
126
128
|
),
|
|
@@ -131,13 +133,13 @@ AlertDialogCancel.displayName = AlertDialogPrimitive__namespace.Cancel.displayNa
|
|
|
131
133
|
var Popover = PopoverPrimitive__namespace.Root;
|
|
132
134
|
var PopoverTrigger = PopoverPrimitive__namespace.Trigger;
|
|
133
135
|
var PopoverClose = PopoverPrimitive__namespace.Close;
|
|
134
|
-
var PopoverContent =
|
|
136
|
+
var PopoverContent = React12__namespace.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ React12__namespace.createElement(PopoverPrimitive__namespace.Portal, null, /* @__PURE__ */ React12__namespace.createElement(
|
|
135
137
|
PopoverPrimitive__namespace.Content,
|
|
136
138
|
{
|
|
137
139
|
ref,
|
|
138
140
|
align,
|
|
139
141
|
sideOffset,
|
|
140
|
-
className:
|
|
142
|
+
className: chunkW2LT4IQQ_js.cn(
|
|
141
143
|
"sb-z-50 sb-w-72 sb-font-roboto sb-rounded-md sb-border sb-bg-popover sb-p-4 sb-text-popover-foreground sb-shadow-md sb-outline-none 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",
|
|
142
144
|
className
|
|
143
145
|
),
|
|
@@ -151,19 +153,19 @@ function Calendar({
|
|
|
151
153
|
showOutsideDays = true,
|
|
152
154
|
...props
|
|
153
155
|
}) {
|
|
154
|
-
return /* @__PURE__ */
|
|
156
|
+
return /* @__PURE__ */ React12__namespace.createElement(
|
|
155
157
|
reactDayPicker.DayPicker,
|
|
156
158
|
{
|
|
157
159
|
showOutsideDays,
|
|
158
|
-
className:
|
|
160
|
+
className: chunkW2LT4IQQ_js.cn("sb-p-3 sb-font-roboto", className),
|
|
159
161
|
classNames: {
|
|
160
162
|
months: "sb-flex sb-flex-col sm:sb-flex-row sb-space-y-4 sm:sb-space-x-4 sm:sb-space-y-0",
|
|
161
163
|
month: "sb-space-y-4",
|
|
162
164
|
caption: "sb-flex sb-justify-center sb-pt-1 sb-relative sb-items-center",
|
|
163
165
|
caption_label: "sb-text-sm sb-font-medium",
|
|
164
166
|
nav: "sb-space-x-1 sb-flex sb-items-center",
|
|
165
|
-
nav_button:
|
|
166
|
-
|
|
167
|
+
nav_button: chunkW2LT4IQQ_js.cn(
|
|
168
|
+
chunkIB3LYMKX_js.buttonVariants({ variant: "outline" }),
|
|
167
169
|
"sb-h-7 sb-w-7 sb-bg-transparent sb-p-0 sb-opacity-50 hover:sb-opacity-100"
|
|
168
170
|
),
|
|
169
171
|
nav_button_previous: "sb-absolute sb-left-1",
|
|
@@ -172,12 +174,12 @@ function Calendar({
|
|
|
172
174
|
head_row: "sb-flex",
|
|
173
175
|
head_cell: "sb-text-muted-foreground sb-rounded-md sb-w-8 sb-font-normal sb-text-[0.8rem]",
|
|
174
176
|
row: "sb-flex sb-w-full sb-mt-2",
|
|
175
|
-
cell:
|
|
177
|
+
cell: chunkW2LT4IQQ_js.cn(
|
|
176
178
|
"sb-relative sb-p-0 sb-text-center sb-text-sm focus-within:sb-relative focus-within:sb-z-20 [&:has([aria-selected])]:sb-bg-accent [&:has([aria-selected].day-outside)]:sb-bg-accent/50 [&:has([aria-selected].day-range-end)]:sb-rounded-r-md",
|
|
177
179
|
props.mode === "range" ? "[&:has(>.day-range-end)]:sb-rounded-r-md [&:has(>.day-range-start)]:sb-rounded-l-md first:[&:has([aria-selected])]:sb-rounded-l-md last:[&:has([aria-selected])]:sb-rounded-r-md" : "[&:has([aria-selected])]:sb-rounded-md"
|
|
178
180
|
),
|
|
179
|
-
day:
|
|
180
|
-
|
|
181
|
+
day: chunkW2LT4IQQ_js.cn(
|
|
182
|
+
chunkIB3LYMKX_js.buttonVariants({ variant: "ghost" }),
|
|
181
183
|
"sb-h-8 sb-w-8 sb-p-0 sb-font-normal aria-selected:sb-opacity-100"
|
|
182
184
|
),
|
|
183
185
|
day_range_start: "day-range-start",
|
|
@@ -191,8 +193,8 @@ function Calendar({
|
|
|
191
193
|
...classNames
|
|
192
194
|
},
|
|
193
195
|
components: {
|
|
194
|
-
IconLeft: () => /* @__PURE__ */
|
|
195
|
-
IconRight: () => /* @__PURE__ */
|
|
196
|
+
IconLeft: () => /* @__PURE__ */ React12__namespace.createElement(lucideReact.ChevronLeftIcon, { className: "sb-h-4 sb-w-4" }),
|
|
197
|
+
IconRight: () => /* @__PURE__ */ React12__namespace.createElement(lucideReact.ChevronRightIcon, { className: "sb-h-4 sb-w-4" })
|
|
196
198
|
},
|
|
197
199
|
...props
|
|
198
200
|
}
|
|
@@ -212,25 +214,25 @@ var ColorPicker = (props) => {
|
|
|
212
214
|
"#009DD1",
|
|
213
215
|
"#FF0000"
|
|
214
216
|
];
|
|
215
|
-
return /* @__PURE__ */
|
|
216
|
-
|
|
217
|
+
return /* @__PURE__ */ React12__namespace.createElement(Popover, null, /* @__PURE__ */ React12__namespace.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React12__namespace.createElement(
|
|
218
|
+
chunkIB3LYMKX_js.Button,
|
|
217
219
|
{
|
|
218
220
|
variant: "outline",
|
|
219
221
|
size: "sm",
|
|
220
|
-
className:
|
|
222
|
+
className: chunkW2LT4IQQ_js.cn(
|
|
221
223
|
"sb-justify-start sb-text-left sb-font-normal sb-normal-case sb-w-full",
|
|
222
224
|
!color && "sb-text-muted-foreground",
|
|
223
225
|
className
|
|
224
226
|
)
|
|
225
227
|
},
|
|
226
|
-
/* @__PURE__ */
|
|
228
|
+
/* @__PURE__ */ React12__namespace.createElement("div", { className: "sb-w-full sb-flex sb-items-center sb-gap-2" }, color ? /* @__PURE__ */ React12__namespace.createElement(
|
|
227
229
|
"div",
|
|
228
230
|
{
|
|
229
231
|
className: "sb-h-4 sb-w-4 sb-rounded !sb-bg-center !sb-bg-cover sb-transition-all sb-border",
|
|
230
232
|
style: { background: color }
|
|
231
233
|
}
|
|
232
|
-
) : /* @__PURE__ */
|
|
233
|
-
)), /* @__PURE__ */
|
|
234
|
+
) : /* @__PURE__ */ React12__namespace.createElement(lucideReact.PaintbrushIcon, { className: "sb-h-4 sb-w-4" }), /* @__PURE__ */ React12__namespace.createElement("div", { className: "sb-truncate sb-flex-1" }, color ? color : "Kies een kleur"))
|
|
235
|
+
)), /* @__PURE__ */ React12__namespace.createElement(PopoverContent, { className: "sb-w-64 sb-p-4 sb-flex sb-flex-wrap sb-gap-1" }, colors.map((s) => /* @__PURE__ */ React12__namespace.createElement(
|
|
234
236
|
"div",
|
|
235
237
|
{
|
|
236
238
|
key: s,
|
|
@@ -240,10 +242,10 @@ var ColorPicker = (props) => {
|
|
|
240
242
|
}
|
|
241
243
|
))));
|
|
242
244
|
};
|
|
243
|
-
var labelVariants =
|
|
245
|
+
var labelVariants = chunkW2LT4IQQ_js.tv({
|
|
244
246
|
base: "sb-text-sm sb-font-medium sb-font-roboto sb-leading-none peer-disabled:sb-cursor-not-allowed peer-disabled:sb-opacity-70"
|
|
245
247
|
});
|
|
246
|
-
var Label =
|
|
248
|
+
var Label = React12__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React12__namespace.createElement(
|
|
247
249
|
LabelPrimitive__namespace.Root,
|
|
248
250
|
{
|
|
249
251
|
ref,
|
|
@@ -255,17 +257,17 @@ Label.displayName = LabelPrimitive__namespace.Root.displayName;
|
|
|
255
257
|
|
|
256
258
|
// src/components/ui/form.tsx
|
|
257
259
|
var Form = reactHookForm.FormProvider;
|
|
258
|
-
var FormFieldContext =
|
|
260
|
+
var FormFieldContext = React12__namespace.createContext(
|
|
259
261
|
{}
|
|
260
262
|
);
|
|
261
263
|
var FormField = ({
|
|
262
264
|
...props
|
|
263
265
|
}) => {
|
|
264
|
-
return /* @__PURE__ */
|
|
266
|
+
return /* @__PURE__ */ React12__namespace.createElement(FormFieldContext.Provider, { value: { name: props.name } }, /* @__PURE__ */ React12__namespace.createElement(reactHookForm.Controller, { ...props }));
|
|
265
267
|
};
|
|
266
268
|
var useFormField = () => {
|
|
267
|
-
const fieldContext =
|
|
268
|
-
const itemContext =
|
|
269
|
+
const fieldContext = React12__namespace.useContext(FormFieldContext);
|
|
270
|
+
const itemContext = React12__namespace.useContext(FormItemContext);
|
|
269
271
|
const { getFieldState, formState } = reactHookForm.useFormContext();
|
|
270
272
|
const fieldState = getFieldState(fieldContext.name, formState);
|
|
271
273
|
if (!fieldContext) {
|
|
@@ -281,30 +283,30 @@ var useFormField = () => {
|
|
|
281
283
|
...fieldState
|
|
282
284
|
};
|
|
283
285
|
};
|
|
284
|
-
var FormItemContext =
|
|
286
|
+
var FormItemContext = React12__namespace.createContext(
|
|
285
287
|
{}
|
|
286
288
|
);
|
|
287
|
-
var FormItem =
|
|
288
|
-
const id =
|
|
289
|
-
return /* @__PURE__ */
|
|
289
|
+
var FormItem = React12__namespace.forwardRef(({ className, ...props }, ref) => {
|
|
290
|
+
const id = React12__namespace.useId();
|
|
291
|
+
return /* @__PURE__ */ React12__namespace.createElement(FormItemContext.Provider, { value: { id } }, /* @__PURE__ */ React12__namespace.createElement("div", { ref, className: chunkW2LT4IQQ_js.cn("sb-space-y-2", className), ...props }));
|
|
290
292
|
});
|
|
291
293
|
FormItem.displayName = "FormItem";
|
|
292
|
-
var FormLabel =
|
|
294
|
+
var FormLabel = React12__namespace.forwardRef(({ className, ...props }, ref) => {
|
|
293
295
|
const { error, formItemId } = useFormField();
|
|
294
|
-
return /* @__PURE__ */
|
|
296
|
+
return /* @__PURE__ */ React12__namespace.createElement(
|
|
295
297
|
Label,
|
|
296
298
|
{
|
|
297
299
|
ref,
|
|
298
|
-
className:
|
|
300
|
+
className: chunkW2LT4IQQ_js.cn(error && "sb-text-destructive", className),
|
|
299
301
|
htmlFor: formItemId,
|
|
300
302
|
...props
|
|
301
303
|
}
|
|
302
304
|
);
|
|
303
305
|
});
|
|
304
306
|
FormLabel.displayName = "FormLabel";
|
|
305
|
-
var FormControl =
|
|
307
|
+
var FormControl = React12__namespace.forwardRef(({ ...props }, ref) => {
|
|
306
308
|
const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
|
|
307
|
-
return /* @__PURE__ */
|
|
309
|
+
return /* @__PURE__ */ React12__namespace.createElement(
|
|
308
310
|
reactSlot.Slot,
|
|
309
311
|
{
|
|
310
312
|
ref,
|
|
@@ -316,14 +318,14 @@ var FormControl = React11__namespace.forwardRef(({ ...props }, ref) => {
|
|
|
316
318
|
);
|
|
317
319
|
});
|
|
318
320
|
FormControl.displayName = "FormControl";
|
|
319
|
-
var FormDescription =
|
|
321
|
+
var FormDescription = React12__namespace.forwardRef(({ className, ...props }, ref) => {
|
|
320
322
|
const { formDescriptionId } = useFormField();
|
|
321
|
-
return /* @__PURE__ */
|
|
323
|
+
return /* @__PURE__ */ React12__namespace.createElement(
|
|
322
324
|
"p",
|
|
323
325
|
{
|
|
324
326
|
ref,
|
|
325
327
|
id: formDescriptionId,
|
|
326
|
-
className:
|
|
328
|
+
className: chunkW2LT4IQQ_js.cn(
|
|
327
329
|
"sb-text-sm sb-font-roboto sb-text-muted-foreground",
|
|
328
330
|
className
|
|
329
331
|
),
|
|
@@ -332,18 +334,18 @@ var FormDescription = React11__namespace.forwardRef(({ className, ...props }, re
|
|
|
332
334
|
);
|
|
333
335
|
});
|
|
334
336
|
FormDescription.displayName = "FormDescription";
|
|
335
|
-
var FormMessage =
|
|
337
|
+
var FormMessage = React12__namespace.forwardRef(({ className, children, ...props }, ref) => {
|
|
336
338
|
const { error, formMessageId } = useFormField();
|
|
337
339
|
const body = error ? String(error?.message) : children;
|
|
338
340
|
if (!body) {
|
|
339
341
|
return null;
|
|
340
342
|
}
|
|
341
|
-
return /* @__PURE__ */
|
|
343
|
+
return /* @__PURE__ */ React12__namespace.createElement(
|
|
342
344
|
"p",
|
|
343
345
|
{
|
|
344
346
|
ref,
|
|
345
347
|
id: formMessageId,
|
|
346
|
-
className:
|
|
348
|
+
className: chunkW2LT4IQQ_js.cn(
|
|
347
349
|
"sb-text-sm sb-font-roboto sb-font-medium sb-text-destructive",
|
|
348
350
|
className
|
|
349
351
|
),
|
|
@@ -353,13 +355,13 @@ var FormMessage = React11__namespace.forwardRef(({ className, children, ...props
|
|
|
353
355
|
);
|
|
354
356
|
});
|
|
355
357
|
FormMessage.displayName = "FormMessage";
|
|
356
|
-
var Input =
|
|
358
|
+
var Input = React12__namespace.forwardRef(
|
|
357
359
|
({ className, type, ...props }, ref) => {
|
|
358
|
-
return /* @__PURE__ */
|
|
360
|
+
return /* @__PURE__ */ React12__namespace.createElement(
|
|
359
361
|
"input",
|
|
360
362
|
{
|
|
361
363
|
type,
|
|
362
|
-
className:
|
|
364
|
+
className: chunkW2LT4IQQ_js.cn(
|
|
363
365
|
"sb-flex sb-h-8 sb-w-full sb-font-roboto sb-rounded-md sb-border sb-border-input sb-bg-background sb-px-3 sb-py-1 sb-text-sm sb-ring-offset-background file:sb-border-0 file:sb-bg-transparent file:sb-text-sm file:sb-font-medium placeholder:sb-text-muted-foreground focus-visible:sb-outline-none focus-visible:sb-ring-1 focus-visible:ring-sb-ring focus-visible:sb-ring-offset-2 disabled:sb-cursor-not-allowed disabled:sb-opacity-50",
|
|
364
366
|
className
|
|
365
367
|
),
|
|
@@ -370,19 +372,19 @@ var Input = React11__namespace.forwardRef(
|
|
|
370
372
|
}
|
|
371
373
|
);
|
|
372
374
|
Input.displayName = "Input";
|
|
373
|
-
var AdvancedInput =
|
|
375
|
+
var AdvancedInput = React12__namespace.forwardRef(
|
|
374
376
|
({ prepend, append, ...props }, ref) => {
|
|
375
|
-
return /* @__PURE__ */
|
|
377
|
+
return /* @__PURE__ */ React12__namespace.createElement("div", { className: "sb-relative" }, /* @__PURE__ */ React12__namespace.createElement(Input, { ref, className: "sb-pl-9 sb-pr-7 sb-text-right", ...props }), prepend && /* @__PURE__ */ React12__namespace.createElement("div", { className: "sb-absolute sb-font-roboto sb-top-1/2 sb-left-3 sb--translate-y-1/2" }, prepend), append && /* @__PURE__ */ React12__namespace.createElement("div", { className: "sb-absolute sb-font-roboto sb-top-1/2 sb-right-3 sb--translate-y-1/2" }, append));
|
|
376
378
|
}
|
|
377
379
|
);
|
|
378
380
|
AdvancedInput.displayName = "AdvancedInput";
|
|
379
381
|
var MediaInput = (props) => {
|
|
380
382
|
const { onFilesChange, limit = 32, multiple = false, onError } = props;
|
|
381
|
-
const id =
|
|
382
|
-
const [queue, setQueue] =
|
|
383
|
-
const [sources, setSources] =
|
|
383
|
+
const id = React12__namespace.useId();
|
|
384
|
+
const [queue, setQueue] = React12__namespace.useState([]);
|
|
385
|
+
const [sources, setSources] = React12__namespace.useState(props.files ?? []);
|
|
384
386
|
const maxConcurrentUploads = 3;
|
|
385
|
-
const uploadingCountRef =
|
|
387
|
+
const uploadingCountRef = React12__namespace.useRef(0);
|
|
386
388
|
const handleFilesAdd = async (e) => {
|
|
387
389
|
const files = e.target.files;
|
|
388
390
|
if (!files || files.length === 0) {
|
|
@@ -453,42 +455,42 @@ var MediaInput = (props) => {
|
|
|
453
455
|
body: JSON.stringify({ src })
|
|
454
456
|
});
|
|
455
457
|
};
|
|
456
|
-
return /* @__PURE__ */
|
|
457
|
-
|
|
458
|
+
return /* @__PURE__ */ React12__namespace.createElement("div", { className: chunkW2LT4IQQ_js.cn("flex flex-wrap gap-4", props.className) }, sources.map((src) => /* @__PURE__ */ React12__namespace.createElement(MediaInputItem, { key: src, className: chunkW2LT4IQQ_js.cn("group", props.itemClassName) }, /* @__PURE__ */ React12__namespace.createElement(
|
|
459
|
+
chunkW2LT4IQQ_js.Image,
|
|
458
460
|
{
|
|
459
461
|
src,
|
|
460
462
|
alt: "",
|
|
461
463
|
fill: true,
|
|
462
464
|
className: "sb-absolute sb-inset-0 sb-object-cover sb-pointer-events-none"
|
|
463
465
|
}
|
|
464
|
-
), /* @__PURE__ */
|
|
466
|
+
), /* @__PURE__ */ React12__namespace.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__namespace.createElement(
|
|
465
467
|
"button",
|
|
466
468
|
{
|
|
467
469
|
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",
|
|
468
470
|
onClick: () => handleSourceDelete(src)
|
|
469
471
|
},
|
|
470
|
-
/* @__PURE__ */
|
|
471
|
-
)))), queue.map((_, i) => /* @__PURE__ */
|
|
472
|
+
/* @__PURE__ */ React12__namespace.createElement(lucideReact.Trash2Icon, { className: "sb-h-4 sb-w-4" })
|
|
473
|
+
)))), queue.map((_, i) => /* @__PURE__ */ React12__namespace.createElement(
|
|
472
474
|
MediaInputItem,
|
|
473
475
|
{
|
|
474
476
|
key: i,
|
|
475
|
-
className:
|
|
477
|
+
className: chunkW2LT4IQQ_js.cn(
|
|
476
478
|
"sb-flex sb-h-28 sb-w-28 sb-items-center sb-justify-center",
|
|
477
479
|
props.itemClassName
|
|
478
480
|
)
|
|
479
481
|
},
|
|
480
|
-
/* @__PURE__ */
|
|
481
|
-
)), multiple || !multiple && !sources.length && !queue.length ? /* @__PURE__ */
|
|
482
|
+
/* @__PURE__ */ React12__namespace.createElement(lucideReact.Loader2Icon, { className: "sb-h-6 sb-w-6 sb-animate-spin" })
|
|
483
|
+
)), multiple || !multiple && !sources.length && !queue.length ? /* @__PURE__ */ React12__namespace.createElement(
|
|
482
484
|
"label",
|
|
483
485
|
{
|
|
484
486
|
htmlFor: id,
|
|
485
|
-
className:
|
|
487
|
+
className: chunkW2LT4IQQ_js.cn(
|
|
486
488
|
"sb-flex sb-h-28 sb-w-28 sb-cursor-pointer sb-items-center sb-justify-center sb-rounded-lg sb-border",
|
|
487
489
|
props.itemClassName
|
|
488
490
|
)
|
|
489
491
|
},
|
|
490
|
-
/* @__PURE__ */
|
|
491
|
-
/* @__PURE__ */
|
|
492
|
+
/* @__PURE__ */ React12__namespace.createElement(lucideReact.PlusIcon, { className: "sb-h-6 sb-w-6" }),
|
|
493
|
+
/* @__PURE__ */ React12__namespace.createElement(
|
|
492
494
|
"input",
|
|
493
495
|
{
|
|
494
496
|
id,
|
|
@@ -502,10 +504,10 @@ var MediaInput = (props) => {
|
|
|
502
504
|
) : null);
|
|
503
505
|
};
|
|
504
506
|
var MediaInputItem = (props) => {
|
|
505
|
-
return /* @__PURE__ */
|
|
507
|
+
return /* @__PURE__ */ React12__namespace.createElement(
|
|
506
508
|
"div",
|
|
507
509
|
{
|
|
508
|
-
className:
|
|
510
|
+
className: chunkW2LT4IQQ_js.cn(
|
|
509
511
|
"sb-relative sb-h-28 sb-w-28 sb-overflow-hidden sb-rounded-lg sb-border",
|
|
510
512
|
props.className
|
|
511
513
|
)
|
|
@@ -522,32 +524,135 @@ var MediaInputError = class extends Error {
|
|
|
522
524
|
this.description = description;
|
|
523
525
|
}
|
|
524
526
|
};
|
|
525
|
-
var
|
|
527
|
+
var Select = SelectPrimitive__namespace.Root;
|
|
528
|
+
var SelectValue = SelectPrimitive__namespace.Value;
|
|
529
|
+
var SelectTrigger = React12__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React12__namespace.createElement(
|
|
530
|
+
SelectPrimitive__namespace.Trigger,
|
|
531
|
+
{
|
|
532
|
+
ref,
|
|
533
|
+
className: chunkW2LT4IQQ_js.cn(
|
|
534
|
+
"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",
|
|
535
|
+
className
|
|
536
|
+
),
|
|
537
|
+
...props
|
|
538
|
+
},
|
|
539
|
+
children,
|
|
540
|
+
/* @__PURE__ */ React12__namespace.createElement(SelectPrimitive__namespace.Icon, { asChild: true }, /* @__PURE__ */ React12__namespace.createElement(lucideReact.ChevronDown, { className: "sb-h-4 sb-w-4 sb-opacity-50" }))
|
|
541
|
+
));
|
|
542
|
+
SelectTrigger.displayName = SelectPrimitive__namespace.Trigger.displayName;
|
|
543
|
+
var SelectScrollUpButton = React12__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React12__namespace.createElement(
|
|
544
|
+
SelectPrimitive__namespace.ScrollUpButton,
|
|
545
|
+
{
|
|
546
|
+
ref,
|
|
547
|
+
className: chunkW2LT4IQQ_js.cn(
|
|
548
|
+
"sb-flex sb-cursor-default sb-items-center sb-justify-center sb-py-1",
|
|
549
|
+
className
|
|
550
|
+
),
|
|
551
|
+
...props
|
|
552
|
+
},
|
|
553
|
+
/* @__PURE__ */ React12__namespace.createElement(lucideReact.ChevronUp, { className: "sb-h-4 sb-w-4" })
|
|
554
|
+
));
|
|
555
|
+
SelectScrollUpButton.displayName = SelectPrimitive__namespace.ScrollUpButton.displayName;
|
|
556
|
+
var SelectScrollDownButton = React12__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React12__namespace.createElement(
|
|
557
|
+
SelectPrimitive__namespace.ScrollDownButton,
|
|
558
|
+
{
|
|
559
|
+
ref,
|
|
560
|
+
className: chunkW2LT4IQQ_js.cn(
|
|
561
|
+
"sb-flex sb-cursor-default sb-items-center sb-justify-center sb-py-1",
|
|
562
|
+
className
|
|
563
|
+
),
|
|
564
|
+
...props
|
|
565
|
+
},
|
|
566
|
+
/* @__PURE__ */ React12__namespace.createElement(lucideReact.ChevronDown, { className: "sb-h-4 sb-w-4" })
|
|
567
|
+
));
|
|
568
|
+
SelectScrollDownButton.displayName = SelectPrimitive__namespace.ScrollDownButton.displayName;
|
|
569
|
+
var SelectContent = React12__namespace.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ React12__namespace.createElement(SelectPrimitive__namespace.Portal, null, /* @__PURE__ */ React12__namespace.createElement(
|
|
570
|
+
SelectPrimitive__namespace.Content,
|
|
571
|
+
{
|
|
572
|
+
ref,
|
|
573
|
+
className: chunkW2LT4IQQ_js.cn(
|
|
574
|
+
"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",
|
|
575
|
+
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",
|
|
576
|
+
className
|
|
577
|
+
),
|
|
578
|
+
position,
|
|
579
|
+
...props
|
|
580
|
+
},
|
|
581
|
+
/* @__PURE__ */ React12__namespace.createElement(SelectScrollUpButton, null),
|
|
582
|
+
/* @__PURE__ */ React12__namespace.createElement(
|
|
583
|
+
SelectPrimitive__namespace.Viewport,
|
|
584
|
+
{
|
|
585
|
+
className: chunkW2LT4IQQ_js.cn(
|
|
586
|
+
"sb-p-1",
|
|
587
|
+
position === "popper" && "sb-h-[var(--radix-select-trigger-height)] sb-w-full sb-min-w-[var(--radix-select-trigger-width)]"
|
|
588
|
+
)
|
|
589
|
+
},
|
|
590
|
+
children
|
|
591
|
+
),
|
|
592
|
+
/* @__PURE__ */ React12__namespace.createElement(SelectScrollDownButton, null)
|
|
593
|
+
)));
|
|
594
|
+
SelectContent.displayName = SelectPrimitive__namespace.Content.displayName;
|
|
595
|
+
var SelectLabel = React12__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React12__namespace.createElement(
|
|
596
|
+
SelectPrimitive__namespace.Label,
|
|
597
|
+
{
|
|
598
|
+
ref,
|
|
599
|
+
className: chunkW2LT4IQQ_js.cn(
|
|
600
|
+
"sb-py-1.5 sb-pl-8 sb-pr-2 sb-text-sm sb-font-semibold",
|
|
601
|
+
className
|
|
602
|
+
),
|
|
603
|
+
...props
|
|
604
|
+
}
|
|
605
|
+
));
|
|
606
|
+
SelectLabel.displayName = SelectPrimitive__namespace.Label.displayName;
|
|
607
|
+
var SelectItem = React12__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React12__namespace.createElement(
|
|
608
|
+
SelectPrimitive__namespace.Item,
|
|
609
|
+
{
|
|
610
|
+
ref,
|
|
611
|
+
className: chunkW2LT4IQQ_js.cn(
|
|
612
|
+
"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",
|
|
613
|
+
className
|
|
614
|
+
),
|
|
615
|
+
...props
|
|
616
|
+
},
|
|
617
|
+
/* @__PURE__ */ React12__namespace.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__namespace.createElement(SelectPrimitive__namespace.ItemIndicator, null, /* @__PURE__ */ React12__namespace.createElement(lucideReact.Check, { className: "sb-h-4 sb-w-4" }))),
|
|
618
|
+
/* @__PURE__ */ React12__namespace.createElement(SelectPrimitive__namespace.ItemText, null, children)
|
|
619
|
+
));
|
|
620
|
+
SelectItem.displayName = SelectPrimitive__namespace.Item.displayName;
|
|
621
|
+
var SelectSeparator = React12__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React12__namespace.createElement(
|
|
622
|
+
SelectPrimitive__namespace.Separator,
|
|
623
|
+
{
|
|
624
|
+
ref,
|
|
625
|
+
className: chunkW2LT4IQQ_js.cn("sb--mx-1 sb-my-1 sb-h-px sb-bg-muted", className),
|
|
626
|
+
...props
|
|
627
|
+
}
|
|
628
|
+
));
|
|
629
|
+
SelectSeparator.displayName = SelectPrimitive__namespace.Separator.displayName;
|
|
630
|
+
var Switch = React12__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React12__namespace.createElement(
|
|
526
631
|
SwitchPrimitives__namespace.Root,
|
|
527
632
|
{
|
|
528
|
-
className:
|
|
633
|
+
className: chunkW2LT4IQQ_js.cn(
|
|
529
634
|
"peer sb-inline-flex sb-h-6 sb-w-11 sb-shrink-0 sb-cursor-pointer sb-items-center sb-rounded-full sb-border-2 sb-border-transparent sb-transition-colors focus-visible:sb-outline-none focus-visible:sb-ring-2 focus-visible:sb-ring-ring focus-visible:sb-ring-offset-2 focus-visible:sb-ring-offset-background disabled:sb-cursor-not-allowed disabled:sb-opacity-50 data-[state=checked]:sb-bg-primary data-[state=unchecked]:sb-bg-input",
|
|
530
635
|
className
|
|
531
636
|
),
|
|
532
637
|
...props,
|
|
533
638
|
ref
|
|
534
639
|
},
|
|
535
|
-
/* @__PURE__ */
|
|
640
|
+
/* @__PURE__ */ React12__namespace.createElement(
|
|
536
641
|
SwitchPrimitives__namespace.Thumb,
|
|
537
642
|
{
|
|
538
|
-
className:
|
|
643
|
+
className: chunkW2LT4IQQ_js.cn(
|
|
539
644
|
"sb-pointer-events-none sb-block sb-h-5 sb-w-5 sb-rounded-full sb-bg-background sb-shadow-lg sb-ring-0 sb-transition-transform data-[state=checked]:sb-translate-x-5 data-[state=unchecked]:sb-translate-x-0"
|
|
540
645
|
)
|
|
541
646
|
}
|
|
542
647
|
)
|
|
543
648
|
));
|
|
544
649
|
Switch.displayName = SwitchPrimitives__namespace.Root.displayName;
|
|
545
|
-
var Textarea =
|
|
650
|
+
var Textarea = React12__namespace.forwardRef(
|
|
546
651
|
({ className, ...props }, ref) => {
|
|
547
|
-
return /* @__PURE__ */
|
|
652
|
+
return /* @__PURE__ */ React12__namespace.createElement(
|
|
548
653
|
"textarea",
|
|
549
654
|
{
|
|
550
|
-
className:
|
|
655
|
+
className: chunkW2LT4IQQ_js.cn(
|
|
551
656
|
"sb-flex sb-min-h-[60px] sb-font-roboto sb-w-full sb-rounded-md sb-border sb-border-input sb-bg-transparent sb-px-3 sb-py-2 sb-text-sm sb-shadow-sm placeholder:sb-text-muted-foreground focus-visible:sb-outline-none focus-visible:sb-ring-1 focus-visible:sb-ring-ring disabled:sb-cursor-not-allowed disabled:sb-opacity-50",
|
|
552
657
|
className
|
|
553
658
|
),
|
|
@@ -562,8 +667,8 @@ Textarea.displayName = "Textarea";
|
|
|
562
667
|
// src/components/container-item-form.tsx
|
|
563
668
|
var ContainerItemForm = (props) => {
|
|
564
669
|
const { item } = props;
|
|
565
|
-
const { patchItem } =
|
|
566
|
-
const component =
|
|
670
|
+
const { patchItem } = chunkIB3LYMKX_js.useBuilder();
|
|
671
|
+
const component = chunkW2LT4IQQ_js.builder.getComponent(item.component);
|
|
567
672
|
if (!component) {
|
|
568
673
|
throw new Error(
|
|
569
674
|
`[simple-builder]: Component with id ${item.component} not found in container item form component`
|
|
@@ -583,11 +688,11 @@ var ContainerItemForm = (props) => {
|
|
|
583
688
|
props: values
|
|
584
689
|
});
|
|
585
690
|
};
|
|
586
|
-
|
|
691
|
+
React12__namespace.useEffect(() => {
|
|
587
692
|
const subscription = form.watch(() => form.handleSubmit(onSubmit)());
|
|
588
693
|
return () => subscription.unsubscribe();
|
|
589
694
|
}, [form.watch, form.handleSubmit]);
|
|
590
|
-
return /* @__PURE__ */
|
|
695
|
+
return /* @__PURE__ */ React12__namespace.createElement(Form, { ...form }, /* @__PURE__ */ React12__namespace.createElement("form", { onSubmit: form.handleSubmit(onSubmit) }, /* @__PURE__ */ React12__namespace.createElement("div", { className: "sb-space-y-4 sb-p-4" }, (component.inputs || []).map((input) => /* @__PURE__ */ React12__namespace.createElement(
|
|
591
696
|
RenderFormField,
|
|
592
697
|
{
|
|
593
698
|
key: input.name,
|
|
@@ -604,16 +709,16 @@ var RenderFormField = (props) => {
|
|
|
604
709
|
name: input.name
|
|
605
710
|
});
|
|
606
711
|
if (input.multiple) {
|
|
607
|
-
return /* @__PURE__ */
|
|
608
|
-
(field, i) => type !== "grouped" ? /* @__PURE__ */
|
|
712
|
+
return /* @__PURE__ */ React12__namespace.createElement("fieldset", { className: "sb-space-y-2" }, /* @__PURE__ */ React12__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React12__namespace.createElement("div", { className: "sb-space-y-4" }, fieldArray.fields.map(
|
|
713
|
+
(field, i) => type !== "grouped" ? /* @__PURE__ */ React12__namespace.createElement(
|
|
609
714
|
FormField,
|
|
610
715
|
{
|
|
611
716
|
key: field.id,
|
|
612
717
|
control: form.control,
|
|
613
718
|
name: `${input.name}.${i}`,
|
|
614
|
-
render: ({ field: field2 }) => /* @__PURE__ */
|
|
719
|
+
render: ({ field: field2 }) => /* @__PURE__ */ React12__namespace.createElement("div", { className: "sb-flex sb-items-center sb-gap-3" }, /* @__PURE__ */ React12__namespace.createElement(RenderInput, { field: field2, type: input.type }), /* @__PURE__ */ React12__namespace.createElement("button", { type: "button", onClick: () => fieldArray.remove(i) }, /* @__PURE__ */ React12__namespace.createElement(lucideReact.XIcon, { className: "sb-h-4 sb-w-4" })))
|
|
615
720
|
}
|
|
616
|
-
) : /* @__PURE__ */
|
|
721
|
+
) : /* @__PURE__ */ React12__namespace.createElement("div", { className: "sb-flex sb-items-center sb-relative" }, /* @__PURE__ */ React12__namespace.createElement(
|
|
617
722
|
RenderFormField,
|
|
618
723
|
{
|
|
619
724
|
key: field.id,
|
|
@@ -626,28 +731,28 @@ var RenderFormField = (props) => {
|
|
|
626
731
|
friendlyName: ""
|
|
627
732
|
}
|
|
628
733
|
}
|
|
629
|
-
), /* @__PURE__ */
|
|
734
|
+
), /* @__PURE__ */ React12__namespace.createElement(
|
|
630
735
|
"button",
|
|
631
736
|
{
|
|
632
737
|
type: "button",
|
|
633
738
|
onClick: () => fieldArray.remove(i),
|
|
634
739
|
className: "sb-absolute sb-top-2 sb-right-2 sb-text-foreground/70 hover:sb-text-foreground"
|
|
635
740
|
},
|
|
636
|
-
/* @__PURE__ */
|
|
741
|
+
/* @__PURE__ */ React12__namespace.createElement(lucideReact.XIcon, { className: "sb-h-4 sb-w-4" })
|
|
637
742
|
))
|
|
638
|
-
), /* @__PURE__ */
|
|
639
|
-
|
|
743
|
+
), /* @__PURE__ */ React12__namespace.createElement(
|
|
744
|
+
chunkIB3LYMKX_js.Button,
|
|
640
745
|
{
|
|
641
746
|
type: "button",
|
|
642
747
|
variant: "outline",
|
|
643
748
|
size: "sm",
|
|
644
|
-
className:
|
|
749
|
+
className: chunkW2LT4IQQ_js.cn(
|
|
645
750
|
"sb-w-[89%] sb-border-2 sb-border-dashed sb-text-muted-foreground",
|
|
646
751
|
type === "grouped" && "sb-w-full"
|
|
647
752
|
),
|
|
648
753
|
onClick: () => fieldArray.append(void 0)
|
|
649
754
|
},
|
|
650
|
-
/* @__PURE__ */
|
|
755
|
+
/* @__PURE__ */ React12__namespace.createElement(lucideReact.PlusCircleIcon, { className: "sb-h-4 sb-w-4" })
|
|
651
756
|
)));
|
|
652
757
|
}
|
|
653
758
|
switch (type) {
|
|
@@ -658,27 +763,27 @@ var RenderFormField = (props) => {
|
|
|
658
763
|
case "color":
|
|
659
764
|
case "date":
|
|
660
765
|
case "file":
|
|
661
|
-
return /* @__PURE__ */
|
|
766
|
+
return /* @__PURE__ */ React12__namespace.createElement(
|
|
662
767
|
FormField,
|
|
663
768
|
{
|
|
664
769
|
key: input.name,
|
|
665
770
|
control: form.control,
|
|
666
771
|
name: input.name,
|
|
667
|
-
render: ({ field }) => /* @__PURE__ */
|
|
772
|
+
render: ({ field }) => /* @__PURE__ */ React12__namespace.createElement(FormItem, null, /* @__PURE__ */ React12__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React12__namespace.createElement(FormControl, null, /* @__PURE__ */ React12__namespace.createElement(RenderInput, { type, field, options: input?.enum })), input.helperText && /* @__PURE__ */ React12__namespace.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React12__namespace.createElement(FormMessage, null))
|
|
668
773
|
}
|
|
669
774
|
);
|
|
670
775
|
case "boolean":
|
|
671
|
-
return /* @__PURE__ */
|
|
776
|
+
return /* @__PURE__ */ React12__namespace.createElement(
|
|
672
777
|
FormField,
|
|
673
778
|
{
|
|
674
779
|
key: input.name,
|
|
675
780
|
control: form.control,
|
|
676
781
|
name: input.name,
|
|
677
|
-
render: ({ field }) => /* @__PURE__ */
|
|
782
|
+
render: ({ field }) => /* @__PURE__ */ React12__namespace.createElement(FormItem, { className: "sb-flex sb-flex-row sb-items-center sb-justify-between sb-space-y-0" }, /* @__PURE__ */ React12__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React12__namespace.createElement(FormControl, null, /* @__PURE__ */ React12__namespace.createElement(RenderInput, { type, field })), input.helperText && /* @__PURE__ */ React12__namespace.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React12__namespace.createElement(FormMessage, null))
|
|
678
783
|
}
|
|
679
784
|
);
|
|
680
785
|
case "grouped":
|
|
681
|
-
return /* @__PURE__ */
|
|
786
|
+
return /* @__PURE__ */ React12__namespace.createElement("div", { className: "sb-space-y-2 sb-w-full" }, input.friendlyName !== "" && /* @__PURE__ */ React12__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React12__namespace.createElement("div", { className: "sb-space-y-2 sb-p-3 sb-w-full sb-border sb-rounded-lg" }, input.inputs.map((sub) => /* @__PURE__ */ React12__namespace.createElement(
|
|
682
787
|
RenderFormField,
|
|
683
788
|
{
|
|
684
789
|
key: `${input.name}.${sub.name}`,
|
|
@@ -697,31 +802,33 @@ var RenderFormField = (props) => {
|
|
|
697
802
|
}
|
|
698
803
|
};
|
|
699
804
|
var RenderInput = (props) => {
|
|
700
|
-
const { type, field } = props;
|
|
805
|
+
const { type, options, field } = props;
|
|
701
806
|
switch (type) {
|
|
702
807
|
case "string":
|
|
703
|
-
|
|
808
|
+
if (!options)
|
|
809
|
+
return /* @__PURE__ */ React12__namespace.createElement(Input, { ...field });
|
|
810
|
+
return /* @__PURE__ */ React12__namespace.createElement(Select, { onValueChange: field.onChange, defaultValue: field.value }, /* @__PURE__ */ React12__namespace.createElement(SelectTrigger, null, /* @__PURE__ */ React12__namespace.createElement(SelectValue, null)), /* @__PURE__ */ React12__namespace.createElement(SelectContent, null, options.map((option) => /* @__PURE__ */ React12__namespace.createElement(SelectItem, { key: option, value: option }, option))));
|
|
704
811
|
case "longText":
|
|
705
812
|
case "richText":
|
|
706
|
-
return /* @__PURE__ */
|
|
813
|
+
return /* @__PURE__ */ React12__namespace.createElement(Textarea, { ...field });
|
|
707
814
|
case "number":
|
|
708
|
-
return /* @__PURE__ */
|
|
815
|
+
return /* @__PURE__ */ React12__namespace.createElement(Input, { type: "number", ...field });
|
|
709
816
|
case "color":
|
|
710
|
-
return /* @__PURE__ */
|
|
817
|
+
return /* @__PURE__ */ React12__namespace.createElement(ColorPicker, { color: field.value, onColorChange: field.onChange });
|
|
711
818
|
case "date":
|
|
712
|
-
return /* @__PURE__ */
|
|
713
|
-
|
|
819
|
+
return /* @__PURE__ */ React12__namespace.createElement(Popover, null, /* @__PURE__ */ React12__namespace.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React12__namespace.createElement(
|
|
820
|
+
chunkIB3LYMKX_js.Button,
|
|
714
821
|
{
|
|
715
822
|
variant: "outline",
|
|
716
823
|
size: "sm",
|
|
717
|
-
className:
|
|
824
|
+
className: chunkW2LT4IQQ_js.cn(
|
|
718
825
|
"sb-w-full sb-flex sb-justify-start sb-text-left sb-font-normal",
|
|
719
826
|
!field.value && "sb-text-muted-foreground"
|
|
720
827
|
)
|
|
721
828
|
},
|
|
722
|
-
/* @__PURE__ */
|
|
723
|
-
field.value ? dateFns.format(field.value, "PPP") : /* @__PURE__ */
|
|
724
|
-
)), /* @__PURE__ */
|
|
829
|
+
/* @__PURE__ */ React12__namespace.createElement(lucideReact.CalendarIcon, { className: "sb-mr-2 sb-h-4 sb-w-4" }),
|
|
830
|
+
field.value && !Array.isArray(field.value) ? dateFns.format(field.value, "PPP") : /* @__PURE__ */ React12__namespace.createElement("span", null, "Pick a date")
|
|
831
|
+
)), /* @__PURE__ */ React12__namespace.createElement(PopoverContent, { className: "sb-w-auto sb-p-0", align: "start" }, /* @__PURE__ */ React12__namespace.createElement(
|
|
725
832
|
Calendar,
|
|
726
833
|
{
|
|
727
834
|
mode: "single",
|
|
@@ -731,9 +838,9 @@ var RenderInput = (props) => {
|
|
|
731
838
|
}
|
|
732
839
|
)));
|
|
733
840
|
case "boolean":
|
|
734
|
-
return /* @__PURE__ */
|
|
841
|
+
return /* @__PURE__ */ React12__namespace.createElement(Switch, { checked: field.value, onCheckedChange: field.onChange });
|
|
735
842
|
case "file":
|
|
736
|
-
return /* @__PURE__ */
|
|
843
|
+
return /* @__PURE__ */ React12__namespace.createElement(
|
|
737
844
|
MediaInput,
|
|
738
845
|
{
|
|
739
846
|
className: "sb-grid sb-grid-cols-2 sb-gap-1",
|
|
@@ -753,7 +860,7 @@ var RenderInput = (props) => {
|
|
|
753
860
|
}
|
|
754
861
|
};
|
|
755
862
|
var Tabs = TabsPrimitive__namespace.Root;
|
|
756
|
-
var tabsListVariants =
|
|
863
|
+
var tabsListVariants = chunkW2LT4IQQ_js.tv({
|
|
757
864
|
variants: {
|
|
758
865
|
variant: {
|
|
759
866
|
contained: "sb-inline-flex sb-h-10 sb-items-center sb-justify-center sb-rounded-md sb-bg-muted sb-p-1 sb-text-muted-foreground",
|
|
@@ -764,7 +871,7 @@ var tabsListVariants = chunkVLRLE4MP_js.tv({
|
|
|
764
871
|
variant: "contained"
|
|
765
872
|
}
|
|
766
873
|
});
|
|
767
|
-
var TabsList =
|
|
874
|
+
var TabsList = React12__namespace.forwardRef(({ variant, className, ...props }, ref) => /* @__PURE__ */ React12__namespace.createElement(
|
|
768
875
|
TabsPrimitive__namespace.List,
|
|
769
876
|
{
|
|
770
877
|
ref,
|
|
@@ -773,7 +880,7 @@ var TabsList = React11__namespace.forwardRef(({ variant, className, ...props },
|
|
|
773
880
|
}
|
|
774
881
|
));
|
|
775
882
|
TabsList.displayName = TabsPrimitive__namespace.List.displayName;
|
|
776
|
-
var tabsTriggerVariants =
|
|
883
|
+
var tabsTriggerVariants = chunkW2LT4IQQ_js.tv({
|
|
777
884
|
variants: {
|
|
778
885
|
variant: {
|
|
779
886
|
contained: "sb-inline-flex sb-items-center sb-justify-center sb-whitespace-nowrap sb-rounded-sm sb-px-3 sb-py-1.5 sb-text-sm sb-font-medium sb-ring-offset-background sb-transition-all focus-visible:sb-outline-none focus-visible:sb-ring-2 focus-visible:sb-ring-ring focus-visible:sb-ring-offset-2 disabled:sb-pointer-events-none disabled:sb-opacity-50 data-[state=active]:sb-bg-background data-[state=active]:sb-text-foreground data-[state=active]:sb-shadow-sm",
|
|
@@ -784,7 +891,7 @@ var tabsTriggerVariants = chunkVLRLE4MP_js.tv({
|
|
|
784
891
|
variant: "contained"
|
|
785
892
|
}
|
|
786
893
|
});
|
|
787
|
-
var TabsTrigger =
|
|
894
|
+
var TabsTrigger = React12__namespace.forwardRef(({ variant, className, ...props }, ref) => /* @__PURE__ */ React12__namespace.createElement(
|
|
788
895
|
TabsPrimitive__namespace.Trigger,
|
|
789
896
|
{
|
|
790
897
|
ref,
|
|
@@ -793,11 +900,11 @@ var TabsTrigger = React11__namespace.forwardRef(({ variant, className, ...props
|
|
|
793
900
|
}
|
|
794
901
|
));
|
|
795
902
|
TabsTrigger.displayName = TabsPrimitive__namespace.Trigger.displayName;
|
|
796
|
-
var TabsContent =
|
|
903
|
+
var TabsContent = React12__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React12__namespace.createElement(
|
|
797
904
|
TabsPrimitive__namespace.Content,
|
|
798
905
|
{
|
|
799
906
|
ref,
|
|
800
|
-
className:
|
|
907
|
+
className: chunkW2LT4IQQ_js.cn(
|
|
801
908
|
"sb-ring-offset-background sb-font-roboto focus-visible:sb-outline-none focus-visible:sb-ring-2 focus-visible:sb-ring-ring focus-visible:sb-ring-offset-2",
|
|
802
909
|
className
|
|
803
910
|
),
|
|
@@ -828,38 +935,38 @@ var BackgroundPicker = (props) => {
|
|
|
828
935
|
"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)",
|
|
829
936
|
"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)"
|
|
830
937
|
];
|
|
831
|
-
const defaultTab =
|
|
938
|
+
const defaultTab = React12__namespace.useMemo(() => {
|
|
832
939
|
if (background.includes("url"))
|
|
833
940
|
return "image";
|
|
834
941
|
if (background.includes("gradient"))
|
|
835
942
|
return "gradient";
|
|
836
943
|
return "solid";
|
|
837
944
|
}, [background]);
|
|
838
|
-
return /* @__PURE__ */
|
|
839
|
-
|
|
945
|
+
return /* @__PURE__ */ React12__namespace.createElement(Popover, null, /* @__PURE__ */ React12__namespace.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React12__namespace.createElement(
|
|
946
|
+
chunkIB3LYMKX_js.Button,
|
|
840
947
|
{
|
|
841
948
|
variant: "outline",
|
|
842
949
|
size: "sm",
|
|
843
|
-
className:
|
|
950
|
+
className: chunkW2LT4IQQ_js.cn(
|
|
844
951
|
"sb-justify-start sb-text-left sb-font-normal sb-normal-case sb-w-full",
|
|
845
952
|
!background && "sb-text-muted-foreground",
|
|
846
953
|
className
|
|
847
954
|
)
|
|
848
955
|
},
|
|
849
|
-
/* @__PURE__ */
|
|
956
|
+
/* @__PURE__ */ React12__namespace.createElement("div", { className: "sb-w-full sb-flex sb-items-center sb-gap-2" }, background ? /* @__PURE__ */ React12__namespace.createElement(
|
|
850
957
|
"div",
|
|
851
958
|
{
|
|
852
959
|
className: "sb-h-4 sb-w-4 sb-rounded !sb-bg-center !sb-bg-cover sb-transition-all sb-border",
|
|
853
960
|
style: { background }
|
|
854
961
|
}
|
|
855
|
-
) : /* @__PURE__ */
|
|
856
|
-
)), /* @__PURE__ */
|
|
962
|
+
) : /* @__PURE__ */ React12__namespace.createElement(lucideReact.PaintbrushIcon, { className: "sb-h-4 sb-w-4" }), /* @__PURE__ */ React12__namespace.createElement("div", { className: "sb-truncate sb-flex-1" }, background ? background : "Kies een achtergrond"))
|
|
963
|
+
)), /* @__PURE__ */ React12__namespace.createElement(PopoverContent, { className: "sb-w-64 sb-p-0" }, /* @__PURE__ */ React12__namespace.createElement(Tabs, { defaultValue: defaultTab }, /* @__PURE__ */ React12__namespace.createElement(TabsList, { className: "sb-w-full" }, /* @__PURE__ */ React12__namespace.createElement(TabsTrigger, { className: "sb-flex-1", value: "solid" }, "Solid"), /* @__PURE__ */ React12__namespace.createElement(TabsTrigger, { className: "sb-flex-1", value: "gradient" }, "Gradient"), /* @__PURE__ */ React12__namespace.createElement(TabsTrigger, { className: "sb-flex-1", value: "image" }, "Image")), /* @__PURE__ */ React12__namespace.createElement(
|
|
857
964
|
TabsContent,
|
|
858
965
|
{
|
|
859
966
|
value: "solid",
|
|
860
967
|
className: "data-[state=active]:sb-flex sb-flex-wrap sb-gap-1 sb-p-4"
|
|
861
968
|
},
|
|
862
|
-
solids.map((s) => /* @__PURE__ */
|
|
969
|
+
solids.map((s) => /* @__PURE__ */ React12__namespace.createElement(
|
|
863
970
|
"div",
|
|
864
971
|
{
|
|
865
972
|
key: s,
|
|
@@ -868,13 +975,13 @@ var BackgroundPicker = (props) => {
|
|
|
868
975
|
onClick: () => onBackgroundChange(s)
|
|
869
976
|
}
|
|
870
977
|
))
|
|
871
|
-
), /* @__PURE__ */
|
|
978
|
+
), /* @__PURE__ */ React12__namespace.createElement(
|
|
872
979
|
TabsContent,
|
|
873
980
|
{
|
|
874
981
|
value: "gradient",
|
|
875
982
|
className: "data-[state=active]:sb-flex sb-flex-wrap sb-gap-1 sb-p-4"
|
|
876
983
|
},
|
|
877
|
-
gradients.map((s) => /* @__PURE__ */
|
|
984
|
+
gradients.map((s) => /* @__PURE__ */ React12__namespace.createElement(
|
|
878
985
|
"div",
|
|
879
986
|
{
|
|
880
987
|
key: s,
|
|
@@ -883,7 +990,7 @@ var BackgroundPicker = (props) => {
|
|
|
883
990
|
onClick: () => onBackgroundChange(s)
|
|
884
991
|
}
|
|
885
992
|
))
|
|
886
|
-
), /* @__PURE__ */
|
|
993
|
+
), /* @__PURE__ */ React12__namespace.createElement(TabsContent, { value: "image" }, /* @__PURE__ */ React12__namespace.createElement("div", { className: "sb-p-4 sb-border-b" }, /* @__PURE__ */ React12__namespace.createElement(
|
|
887
994
|
MediaInput,
|
|
888
995
|
{
|
|
889
996
|
className: "sb-grid sb-grid-cols-2 sb-gap-1",
|
|
@@ -899,7 +1006,7 @@ var BackgroundPicker = (props) => {
|
|
|
899
1006
|
"media-input: Error: " + e?.description
|
|
900
1007
|
)
|
|
901
1008
|
}
|
|
902
|
-
)), /* @__PURE__ */
|
|
1009
|
+
)), /* @__PURE__ */ React12__namespace.createElement("div", { className: "sb-grid sb-grid-cols-2 sb-gap-1 sb-p-4" }, images.map((s) => /* @__PURE__ */ React12__namespace.createElement(
|
|
903
1010
|
"div",
|
|
904
1011
|
{
|
|
905
1012
|
key: s,
|
|
@@ -909,7 +1016,7 @@ var BackgroundPicker = (props) => {
|
|
|
909
1016
|
}
|
|
910
1017
|
)))))));
|
|
911
1018
|
};
|
|
912
|
-
var toggleVariants =
|
|
1019
|
+
var toggleVariants = chunkW2LT4IQQ_js.tv({
|
|
913
1020
|
base: "sb-inline-flex sb-items-center sb-justify-center sb-rounded-md sb-text-sm sb-font-medium sb-ring-offset-background sb-transition-colors hover:sb-bg-muted hover:sb-text-muted-foreground focus-visible:sb-outline-none focus-visible:sb-ring-1 focus-visible:sb-ring-ring focus-visible:sb-ring-offset-2 disabled:sb-pointer-events-none disabled:sb-opacity-50 data-[state=on]:sb-bg-accent data-[state=on]:sb-text-accent-foreground",
|
|
914
1021
|
variants: {
|
|
915
1022
|
variant: {
|
|
@@ -927,7 +1034,7 @@ var toggleVariants = chunkVLRLE4MP_js.tv({
|
|
|
927
1034
|
size: "default"
|
|
928
1035
|
}
|
|
929
1036
|
});
|
|
930
|
-
var Toggle =
|
|
1037
|
+
var Toggle = React12__namespace.forwardRef(({ className, variant, size, ...props }, ref) => /* @__PURE__ */ React12__namespace.createElement(
|
|
931
1038
|
TogglePrimitive__namespace.Root,
|
|
932
1039
|
{
|
|
933
1040
|
ref,
|
|
@@ -939,70 +1046,70 @@ Toggle.displayName = TogglePrimitive__namespace.Root.displayName;
|
|
|
939
1046
|
|
|
940
1047
|
// src/components/ui/spacing-input.tsx
|
|
941
1048
|
var SpacingInput = (props) => {
|
|
942
|
-
const [value, setValue] =
|
|
943
|
-
const [indipendent, setIndipendent] =
|
|
1049
|
+
const [value, setValue] = React12__namespace.useState(parse(props.value || "0px"));
|
|
1050
|
+
const [indipendent, setIndipendent] = React12__namespace.useState(
|
|
944
1051
|
isIndipendent(parse(props.value || "0px"))
|
|
945
1052
|
);
|
|
946
|
-
|
|
1053
|
+
React12__namespace.useEffect(() => {
|
|
947
1054
|
if (!props.onChange)
|
|
948
1055
|
return;
|
|
949
1056
|
props.onChange(stringify(value));
|
|
950
1057
|
}, [value, props.onChange]);
|
|
951
|
-
return /* @__PURE__ */
|
|
1058
|
+
return /* @__PURE__ */ React12__namespace.createElement("div", { className: "sb-grid sb-grid-cols-[1fr,auto] sb-gap-3" }, /* @__PURE__ */ React12__namespace.createElement("div", { className: "sb-grid sb-grid-cols-2 sb-items-center sb-gap-3" }, !indipendent ? /* @__PURE__ */ React12__namespace.createElement(React12__namespace.Fragment, null, /* @__PURE__ */ React12__namespace.createElement(
|
|
952
1059
|
AdvancedInput,
|
|
953
1060
|
{
|
|
954
1061
|
value: value.left,
|
|
955
1062
|
pattern: "\\d+",
|
|
956
1063
|
onChange: ({ target: { value: value2 } }) => setValue((prev) => ({ ...prev, left: +value2, right: +value2 })),
|
|
957
|
-
prepend: /* @__PURE__ */
|
|
958
|
-
append: /* @__PURE__ */
|
|
1064
|
+
prepend: /* @__PURE__ */ React12__namespace.createElement(lucideReact.AlignHorizontalSpaceAroundIcon, { className: "sb-h-4 sb-w-4" }),
|
|
1065
|
+
append: /* @__PURE__ */ React12__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
|
|
959
1066
|
}
|
|
960
|
-
), /* @__PURE__ */
|
|
1067
|
+
), /* @__PURE__ */ React12__namespace.createElement(
|
|
961
1068
|
AdvancedInput,
|
|
962
1069
|
{
|
|
963
1070
|
value: value.top,
|
|
964
1071
|
pattern: "\\d+",
|
|
965
1072
|
onChange: ({ target: { value: value2 } }) => setValue((prev) => ({ ...prev, top: +value2, bottom: +value2 })),
|
|
966
|
-
prepend: /* @__PURE__ */
|
|
967
|
-
append: /* @__PURE__ */
|
|
1073
|
+
prepend: /* @__PURE__ */ React12__namespace.createElement(lucideReact.AlignHorizontalSpaceAroundIcon, { className: "sb-h-4 sb-w-4 sb-rotate-90" }),
|
|
1074
|
+
append: /* @__PURE__ */ React12__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
|
|
968
1075
|
}
|
|
969
|
-
)) : /* @__PURE__ */
|
|
1076
|
+
)) : /* @__PURE__ */ React12__namespace.createElement(React12__namespace.Fragment, null, /* @__PURE__ */ React12__namespace.createElement(
|
|
970
1077
|
AdvancedInput,
|
|
971
1078
|
{
|
|
972
1079
|
value: value.left,
|
|
973
1080
|
pattern: "\\d+",
|
|
974
1081
|
onChange: ({ target: { value: value2 } }) => setValue((prev) => ({ ...prev, left: +value2 })),
|
|
975
|
-
prepend: /* @__PURE__ */
|
|
976
|
-
append: /* @__PURE__ */
|
|
1082
|
+
prepend: /* @__PURE__ */ React12__namespace.createElement(lucideReact.AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4" }),
|
|
1083
|
+
append: /* @__PURE__ */ React12__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
|
|
977
1084
|
}
|
|
978
|
-
), /* @__PURE__ */
|
|
1085
|
+
), /* @__PURE__ */ React12__namespace.createElement(
|
|
979
1086
|
AdvancedInput,
|
|
980
1087
|
{
|
|
981
1088
|
value: value.top,
|
|
982
1089
|
pattern: "\\d+",
|
|
983
1090
|
onChange: ({ target: { value: value2 } }) => setValue((prev) => ({ ...prev, top: +value2 })),
|
|
984
|
-
prepend: /* @__PURE__ */
|
|
985
|
-
append: /* @__PURE__ */
|
|
1091
|
+
prepend: /* @__PURE__ */ React12__namespace.createElement(lucideReact.AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb-rotate-90" }),
|
|
1092
|
+
append: /* @__PURE__ */ React12__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
|
|
986
1093
|
}
|
|
987
|
-
), /* @__PURE__ */
|
|
1094
|
+
), /* @__PURE__ */ React12__namespace.createElement(
|
|
988
1095
|
AdvancedInput,
|
|
989
1096
|
{
|
|
990
1097
|
value: value.right,
|
|
991
1098
|
pattern: "\\d+",
|
|
992
1099
|
onChange: ({ target: { value: value2 } }) => setValue((prev) => ({ ...prev, right: +value2 })),
|
|
993
|
-
prepend: /* @__PURE__ */
|
|
994
|
-
append: /* @__PURE__ */
|
|
1100
|
+
prepend: /* @__PURE__ */ React12__namespace.createElement(lucideReact.AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb-rotate-180" }),
|
|
1101
|
+
append: /* @__PURE__ */ React12__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
|
|
995
1102
|
}
|
|
996
|
-
), /* @__PURE__ */
|
|
1103
|
+
), /* @__PURE__ */ React12__namespace.createElement(
|
|
997
1104
|
AdvancedInput,
|
|
998
1105
|
{
|
|
999
1106
|
value: value.bottom,
|
|
1000
1107
|
pattern: "\\d+",
|
|
1001
1108
|
onChange: ({ target: { value: value2 } }) => setValue((prev) => ({ ...prev, bottom: +value2 })),
|
|
1002
|
-
prepend: /* @__PURE__ */
|
|
1003
|
-
append: /* @__PURE__ */
|
|
1109
|
+
prepend: /* @__PURE__ */ React12__namespace.createElement(lucideReact.AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb--rotate-90" }),
|
|
1110
|
+
append: /* @__PURE__ */ React12__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
|
|
1004
1111
|
}
|
|
1005
|
-
))), /* @__PURE__ */
|
|
1112
|
+
))), /* @__PURE__ */ React12__namespace.createElement("div", { className: "sb-shrink-0" }, /* @__PURE__ */ React12__namespace.createElement(
|
|
1006
1113
|
Toggle,
|
|
1007
1114
|
{
|
|
1008
1115
|
className: "sb-shrink-0 sb-flex sb-w-8 sb-h-8 sb-p-0",
|
|
@@ -1011,7 +1118,7 @@ var SpacingInput = (props) => {
|
|
|
1011
1118
|
pressed: indipendent,
|
|
1012
1119
|
onPressedChange: setIndipendent
|
|
1013
1120
|
},
|
|
1014
|
-
/* @__PURE__ */
|
|
1121
|
+
/* @__PURE__ */ React12__namespace.createElement(lucideReact.ScanIcon, { className: "sb-h-4 sb-w-4" })
|
|
1015
1122
|
)));
|
|
1016
1123
|
};
|
|
1017
1124
|
var isIndipendent = (value) => {
|
|
@@ -1064,7 +1171,7 @@ var designSchema = zod.z.object({
|
|
|
1064
1171
|
});
|
|
1065
1172
|
var ItemDesignForm = (props) => {
|
|
1066
1173
|
const { item } = props;
|
|
1067
|
-
const component =
|
|
1174
|
+
const component = chunkW2LT4IQQ_js.builder.getComponent(item.component);
|
|
1068
1175
|
if (!component) {
|
|
1069
1176
|
throw new Error(
|
|
1070
1177
|
`[simple-builder]: Component "${item.component}" not found`
|
|
@@ -1105,7 +1212,7 @@ var ItemDesignForm = (props) => {
|
|
|
1105
1212
|
mobile: getDefaultDeviceValues("mobile")
|
|
1106
1213
|
}
|
|
1107
1214
|
});
|
|
1108
|
-
const { patchItem } =
|
|
1215
|
+
const { patchItem } = chunkIB3LYMKX_js.useBuilder();
|
|
1109
1216
|
const onSubmit = (values) => {
|
|
1110
1217
|
const { container, desktop, mobile } = values;
|
|
1111
1218
|
const dirtyFields = form.formState.dirtyFields;
|
|
@@ -1143,107 +1250,107 @@ var ItemDesignForm = (props) => {
|
|
|
1143
1250
|
}
|
|
1144
1251
|
});
|
|
1145
1252
|
};
|
|
1146
|
-
const [device, setDevice] =
|
|
1147
|
-
|
|
1253
|
+
const [device, setDevice] = React12__namespace.useState("desktop");
|
|
1254
|
+
React12__namespace.useEffect(() => {
|
|
1148
1255
|
const subscription = form.watch(() => form.handleSubmit(onSubmit)());
|
|
1149
1256
|
return () => subscription.unsubscribe();
|
|
1150
1257
|
}, [form.watch, form.handleSubmit]);
|
|
1151
|
-
return /* @__PURE__ */
|
|
1258
|
+
return /* @__PURE__ */ React12__namespace.createElement(Form, { ...form }, /* @__PURE__ */ React12__namespace.createElement("form", { onSubmit: form.handleSubmit(onSubmit) }, /* @__PURE__ */ React12__namespace.createElement("div", { className: "sb-space-y-4 sb-p-4" }, /* @__PURE__ */ React12__namespace.createElement(
|
|
1152
1259
|
Tabs,
|
|
1153
1260
|
{
|
|
1154
1261
|
defaultValue: device,
|
|
1155
1262
|
onValueChange: (device2) => setDevice(device2)
|
|
1156
1263
|
},
|
|
1157
|
-
/* @__PURE__ */
|
|
1158
|
-
), /* @__PURE__ */
|
|
1264
|
+
/* @__PURE__ */ React12__namespace.createElement(TabsList, { className: "sb-h-9 sb-grid sb-w-full sb-grid-cols-2" }, /* @__PURE__ */ React12__namespace.createElement(TabsTrigger, { value: "desktop", className: "sb-text-xs" }, /* @__PURE__ */ React12__namespace.createElement(lucideReact.MonitorIcon, { className: "sb-h-4 sb-w-4 sb-mr-2" }), /* @__PURE__ */ React12__namespace.createElement("span", null, "Desktop")), /* @__PURE__ */ React12__namespace.createElement(TabsTrigger, { value: "mobile", className: "sb-text-xs" }, /* @__PURE__ */ React12__namespace.createElement(lucideReact.SmartphoneIcon, { className: "sb-h-4 sb-w-4 sb-mr-2" }), /* @__PURE__ */ React12__namespace.createElement("span", null, "Mobiel")))
|
|
1265
|
+
), /* @__PURE__ */ React12__namespace.createElement("div", { className: "sb-space-y-4" }, /* @__PURE__ */ React12__namespace.createElement(
|
|
1159
1266
|
FormField,
|
|
1160
1267
|
{
|
|
1161
1268
|
control: form.control,
|
|
1162
1269
|
key: `${device}.background`,
|
|
1163
1270
|
name: `${device}.background`,
|
|
1164
|
-
render: ({ field }) => /* @__PURE__ */
|
|
1271
|
+
render: ({ field }) => /* @__PURE__ */ React12__namespace.createElement(FormItem, null, /* @__PURE__ */ React12__namespace.createElement(FormLabel, null, "Achtergrond"), /* @__PURE__ */ React12__namespace.createElement(FormControl, null, /* @__PURE__ */ React12__namespace.createElement(
|
|
1165
1272
|
BackgroundPicker,
|
|
1166
1273
|
{
|
|
1167
1274
|
background: field.value,
|
|
1168
1275
|
onBackgroundChange: field.onChange
|
|
1169
1276
|
}
|
|
1170
|
-
)), /* @__PURE__ */
|
|
1277
|
+
)), /* @__PURE__ */ React12__namespace.createElement(FormMessage, null))
|
|
1171
1278
|
}
|
|
1172
|
-
), /* @__PURE__ */
|
|
1279
|
+
), /* @__PURE__ */ React12__namespace.createElement(
|
|
1173
1280
|
FormField,
|
|
1174
1281
|
{
|
|
1175
1282
|
control: form.control,
|
|
1176
1283
|
key: `${device}.color`,
|
|
1177
1284
|
name: `${device}.color`,
|
|
1178
|
-
render: ({ field }) => /* @__PURE__ */
|
|
1285
|
+
render: ({ field }) => /* @__PURE__ */ React12__namespace.createElement(FormItem, null, /* @__PURE__ */ React12__namespace.createElement(FormLabel, null, "Inhoud kleur"), /* @__PURE__ */ React12__namespace.createElement(FormControl, null, /* @__PURE__ */ React12__namespace.createElement(
|
|
1179
1286
|
ColorPicker,
|
|
1180
1287
|
{
|
|
1181
1288
|
color: field.value,
|
|
1182
1289
|
onColorChange: field.onChange
|
|
1183
1290
|
}
|
|
1184
|
-
)), /* @__PURE__ */
|
|
1291
|
+
)), /* @__PURE__ */ React12__namespace.createElement(FormMessage, null))
|
|
1185
1292
|
}
|
|
1186
|
-
), /* @__PURE__ */
|
|
1293
|
+
), /* @__PURE__ */ React12__namespace.createElement("hr", null), /* @__PURE__ */ React12__namespace.createElement(
|
|
1187
1294
|
FormField,
|
|
1188
1295
|
{
|
|
1189
1296
|
control: form.control,
|
|
1190
1297
|
name: "container",
|
|
1191
|
-
render: ({ field }) => /* @__PURE__ */
|
|
1298
|
+
render: ({ field }) => /* @__PURE__ */ React12__namespace.createElement(FormItem, { className: "sb-flex sb-flex-row sb-items-center sb-justify-between sb-space-y-0" }, /* @__PURE__ */ React12__namespace.createElement(FormLabel, null, "Volledige breedte"), /* @__PURE__ */ React12__namespace.createElement(FormControl, null, /* @__PURE__ */ React12__namespace.createElement(
|
|
1192
1299
|
Switch,
|
|
1193
1300
|
{
|
|
1194
1301
|
checked: !field.value,
|
|
1195
1302
|
onCheckedChange: (v) => field.onChange(!v)
|
|
1196
1303
|
}
|
|
1197
|
-
)), /* @__PURE__ */
|
|
1304
|
+
)), /* @__PURE__ */ React12__namespace.createElement(FormMessage, null))
|
|
1198
1305
|
}
|
|
1199
|
-
), /* @__PURE__ */
|
|
1306
|
+
), /* @__PURE__ */ React12__namespace.createElement("hr", null), /* @__PURE__ */ React12__namespace.createElement(
|
|
1200
1307
|
FormField,
|
|
1201
1308
|
{
|
|
1202
1309
|
control: form.control,
|
|
1203
1310
|
key: `${device}.padding`,
|
|
1204
1311
|
name: `${device}.padding`,
|
|
1205
|
-
render: ({ field }) => /* @__PURE__ */
|
|
1312
|
+
render: ({ field }) => /* @__PURE__ */ React12__namespace.createElement(FormItem, null, /* @__PURE__ */ React12__namespace.createElement(FormLabel, null, "Padding"), /* @__PURE__ */ React12__namespace.createElement(FormControl, null, /* @__PURE__ */ React12__namespace.createElement(
|
|
1206
1313
|
SpacingInput,
|
|
1207
1314
|
{
|
|
1208
1315
|
value: field.value,
|
|
1209
1316
|
onChange: field.onChange
|
|
1210
1317
|
}
|
|
1211
|
-
)), /* @__PURE__ */
|
|
1318
|
+
)), /* @__PURE__ */ React12__namespace.createElement(FormMessage, null))
|
|
1212
1319
|
}
|
|
1213
|
-
), /* @__PURE__ */
|
|
1320
|
+
), /* @__PURE__ */ React12__namespace.createElement(
|
|
1214
1321
|
FormField,
|
|
1215
1322
|
{
|
|
1216
1323
|
control: form.control,
|
|
1217
1324
|
key: `${device}.margin`,
|
|
1218
1325
|
name: `${device}.margin`,
|
|
1219
|
-
render: ({ field }) => /* @__PURE__ */
|
|
1326
|
+
render: ({ field }) => /* @__PURE__ */ React12__namespace.createElement(FormItem, null, /* @__PURE__ */ React12__namespace.createElement(FormLabel, null, "Margin"), /* @__PURE__ */ React12__namespace.createElement(FormControl, null, /* @__PURE__ */ React12__namespace.createElement(
|
|
1220
1327
|
SpacingInput,
|
|
1221
1328
|
{
|
|
1222
1329
|
value: field.value,
|
|
1223
1330
|
onChange: field.onChange
|
|
1224
1331
|
}
|
|
1225
|
-
)), /* @__PURE__ */
|
|
1332
|
+
)), /* @__PURE__ */ React12__namespace.createElement(FormMessage, null))
|
|
1226
1333
|
}
|
|
1227
1334
|
)))));
|
|
1228
1335
|
};
|
|
1229
|
-
var ScrollArea =
|
|
1336
|
+
var ScrollArea = React12__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React12__namespace.createElement(
|
|
1230
1337
|
ScrollAreaPrimitive__namespace.Root,
|
|
1231
1338
|
{
|
|
1232
1339
|
ref,
|
|
1233
|
-
className:
|
|
1340
|
+
className: chunkW2LT4IQQ_js.cn("sb-relative sb-overflow-hidden", className),
|
|
1234
1341
|
...props
|
|
1235
1342
|
},
|
|
1236
|
-
/* @__PURE__ */
|
|
1237
|
-
/* @__PURE__ */
|
|
1238
|
-
/* @__PURE__ */
|
|
1343
|
+
/* @__PURE__ */ React12__namespace.createElement(ScrollAreaPrimitive__namespace.Viewport, { className: "sb-h-full sb-max-h-[80vh] sb-w-full sb-rounded-[inherit]" }, children),
|
|
1344
|
+
/* @__PURE__ */ React12__namespace.createElement(ScrollBar, null),
|
|
1345
|
+
/* @__PURE__ */ React12__namespace.createElement(ScrollAreaPrimitive__namespace.Corner, null)
|
|
1239
1346
|
));
|
|
1240
1347
|
ScrollArea.displayName = ScrollAreaPrimitive__namespace.Root.displayName;
|
|
1241
|
-
var ScrollBar =
|
|
1348
|
+
var ScrollBar = React12__namespace.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ React12__namespace.createElement(
|
|
1242
1349
|
ScrollAreaPrimitive__namespace.ScrollAreaScrollbar,
|
|
1243
1350
|
{
|
|
1244
1351
|
ref,
|
|
1245
1352
|
orientation,
|
|
1246
|
-
className:
|
|
1353
|
+
className: chunkW2LT4IQQ_js.cn(
|
|
1247
1354
|
"sb-flex sb-touch-none sb-select-none sb-transition-colors",
|
|
1248
1355
|
orientation === "vertical" && "sb-h-full sb-w-2.5 sb-border-l sb-border-l-transparent sb-p-[1px]",
|
|
1249
1356
|
orientation === "horizontal" && "sb-h-2.5 sb-flex-col sb-border-t sb-border-t-transparent sb-p-[1px]",
|
|
@@ -1251,36 +1358,36 @@ var ScrollBar = React11__namespace.forwardRef(({ className, orientation = "verti
|
|
|
1251
1358
|
),
|
|
1252
1359
|
...props
|
|
1253
1360
|
},
|
|
1254
|
-
/* @__PURE__ */
|
|
1361
|
+
/* @__PURE__ */ React12__namespace.createElement(ScrollAreaPrimitive__namespace.ScrollAreaThumb, { className: "sb-relative sb-flex-1 sb-rounded-full sb-bg-border" })
|
|
1255
1362
|
));
|
|
1256
1363
|
ScrollBar.displayName = ScrollAreaPrimitive__namespace.ScrollAreaScrollbar.displayName;
|
|
1257
1364
|
|
|
1258
1365
|
// src/components/container-item-toolbar.tsx
|
|
1259
1366
|
var ContainerItemToolbar = (props) => {
|
|
1260
1367
|
const { contentId, canBringUp = false, canBringDown = false } = props;
|
|
1261
|
-
const { bringUp, bringDown } =
|
|
1262
|
-
return /* @__PURE__ */
|
|
1263
|
-
|
|
1368
|
+
const { bringUp, bringDown } = chunkIB3LYMKX_js.useBuilder();
|
|
1369
|
+
return /* @__PURE__ */ React12__namespace.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__namespace.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__namespace.createElement(EditButton, { id: contentId }), /* @__PURE__ */ React12__namespace.createElement(
|
|
1370
|
+
chunkIB3LYMKX_js.Button,
|
|
1264
1371
|
{
|
|
1265
1372
|
variant: "ghost",
|
|
1266
1373
|
className: "sb-w-8 sb-h-8 sb-p-0",
|
|
1267
1374
|
onClick: () => bringUp(contentId),
|
|
1268
1375
|
disabled: !canBringUp
|
|
1269
1376
|
},
|
|
1270
|
-
/* @__PURE__ */
|
|
1271
|
-
), /* @__PURE__ */
|
|
1272
|
-
|
|
1377
|
+
/* @__PURE__ */ React12__namespace.createElement(lucideReact.ArrowUp, { className: "sb-h-5 sb-w-5" })
|
|
1378
|
+
), /* @__PURE__ */ React12__namespace.createElement(
|
|
1379
|
+
chunkIB3LYMKX_js.Button,
|
|
1273
1380
|
{
|
|
1274
1381
|
variant: "ghost",
|
|
1275
1382
|
className: "sb-w-8 sb-h-8 sb-p-0",
|
|
1276
1383
|
onClick: () => bringDown(contentId),
|
|
1277
1384
|
disabled: !canBringDown
|
|
1278
1385
|
},
|
|
1279
|
-
/* @__PURE__ */
|
|
1280
|
-
), /* @__PURE__ */
|
|
1386
|
+
/* @__PURE__ */ React12__namespace.createElement(lucideReact.ArrowDown, { className: "sb-h-5 sb-w-5" })
|
|
1387
|
+
), /* @__PURE__ */ React12__namespace.createElement(DeleteButton, { contentId })));
|
|
1281
1388
|
};
|
|
1282
1389
|
var EditButton = ({ id }) => {
|
|
1283
|
-
return /* @__PURE__ */
|
|
1390
|
+
return /* @__PURE__ */ React12__namespace.createElement(Popover, { modal: true }, /* @__PURE__ */ React12__namespace.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React12__namespace.createElement(chunkIB3LYMKX_js.Button, { variant: "ghost", className: "sb-w-8 sb-h-8 sb-p-0" }, /* @__PURE__ */ React12__namespace.createElement(lucideReact.Edit2Icon, { className: "sb-h-5 sb-w-5" }))), /* @__PURE__ */ React12__namespace.createElement(
|
|
1284
1391
|
PopoverContent,
|
|
1285
1392
|
{
|
|
1286
1393
|
side: "left",
|
|
@@ -1290,33 +1397,33 @@ var EditButton = ({ id }) => {
|
|
|
1290
1397
|
className: "sb-p-0 sb-relative",
|
|
1291
1398
|
collisionPadding: 16
|
|
1292
1399
|
},
|
|
1293
|
-
/* @__PURE__ */
|
|
1400
|
+
/* @__PURE__ */ React12__namespace.createElement(EditPopoverInner, { id })
|
|
1294
1401
|
));
|
|
1295
1402
|
};
|
|
1296
1403
|
var EditPopoverInner = (props) => {
|
|
1297
1404
|
const { id } = props;
|
|
1298
|
-
const { getItem } =
|
|
1405
|
+
const { getItem } = chunkIB3LYMKX_js.useBuilder();
|
|
1299
1406
|
const item = getItem(id);
|
|
1300
1407
|
if (!item) {
|
|
1301
1408
|
throw new Error(
|
|
1302
1409
|
`[simple-builder]: Item with id ${id} not found in container item form component`
|
|
1303
1410
|
);
|
|
1304
1411
|
}
|
|
1305
|
-
return /* @__PURE__ */
|
|
1412
|
+
return /* @__PURE__ */ React12__namespace.createElement(Tabs, null, /* @__PURE__ */ React12__namespace.createElement(TabsList, { variant: "text", defaultValue: "content" }, /* @__PURE__ */ React12__namespace.createElement(TabsTrigger, { variant: "text", value: "content" }, "Inhoud"), /* @__PURE__ */ React12__namespace.createElement(TabsTrigger, { variant: "text", value: "design" }, "Design")), /* @__PURE__ */ React12__namespace.createElement(TabsContent, { value: "content" }, /* @__PURE__ */ React12__namespace.createElement(ScrollArea, null, /* @__PURE__ */ React12__namespace.createElement(ContainerItemForm, { item }))), /* @__PURE__ */ React12__namespace.createElement(TabsContent, { value: "design" }, /* @__PURE__ */ React12__namespace.createElement(ItemDesignForm, { item })));
|
|
1306
1413
|
};
|
|
1307
1414
|
var DeleteButton = ({ contentId }) => {
|
|
1308
|
-
const { deleteContent } =
|
|
1309
|
-
return /* @__PURE__ */
|
|
1310
|
-
|
|
1415
|
+
const { deleteContent } = chunkIB3LYMKX_js.useBuilder();
|
|
1416
|
+
return /* @__PURE__ */ React12__namespace.createElement(AlertDialog, null, /* @__PURE__ */ React12__namespace.createElement(AlertDialogTrigger, { asChild: true }, /* @__PURE__ */ React12__namespace.createElement(
|
|
1417
|
+
chunkIB3LYMKX_js.Button,
|
|
1311
1418
|
{
|
|
1312
1419
|
variant: "ghost",
|
|
1313
1420
|
className: "sb-w-8 sb-h-8 sb-p-0 sb-text-destructive"
|
|
1314
1421
|
},
|
|
1315
|
-
/* @__PURE__ */
|
|
1316
|
-
)), /* @__PURE__ */
|
|
1422
|
+
/* @__PURE__ */ React12__namespace.createElement(lucideReact.Trash2Icon, { className: "sb-h-5 sb-w-5" })
|
|
1423
|
+
)), /* @__PURE__ */ React12__namespace.createElement(AlertDialogContent, null, /* @__PURE__ */ React12__namespace.createElement(AlertDialogDescription, null, "Weet je zeker dat je dit blok wilt verwijderen?"), /* @__PURE__ */ React12__namespace.createElement(AlertDialogFooter, null, /* @__PURE__ */ React12__namespace.createElement(AlertDialogCancel, null, "Annuleren"), /* @__PURE__ */ React12__namespace.createElement(
|
|
1317
1424
|
AlertDialogAction,
|
|
1318
1425
|
{
|
|
1319
|
-
className:
|
|
1426
|
+
className: chunkIB3LYMKX_js.buttonVariants({ variant: "destructive" }),
|
|
1320
1427
|
onClick: () => deleteContent(contentId)
|
|
1321
1428
|
},
|
|
1322
1429
|
"Verwijderen"
|
|
@@ -1332,14 +1439,14 @@ var BuildContainerInner = (props) => {
|
|
|
1332
1439
|
"[simple-builder]: Multiple content blocks detected when using property multiple false."
|
|
1333
1440
|
);
|
|
1334
1441
|
}
|
|
1335
|
-
return /* @__PURE__ */
|
|
1442
|
+
return /* @__PURE__ */ React12__namespace.createElement("div", null, items.length <= 0 ? /* @__PURE__ */ React12__namespace.createElement(AddContentPlaceholder, { parent: id, container: name, index: 0 }) : multiple && /* @__PURE__ */ React12__namespace.createElement(AddContentDividerButton, { parent: id, container: name, index: 0 }), items.map((item, i) => /* @__PURE__ */ React12__namespace.createElement(React12__namespace.Fragment, { key: item.id }, /* @__PURE__ */ React12__namespace.createElement("div", { className: "sb-relative sb-container-item" }, /* @__PURE__ */ React12__namespace.createElement(chunkW2LT4IQQ_js.DesignWrapper, { styles: item.styles }, chunkW2LT4IQQ_js.builder.bindComponent(item, true)), /* @__PURE__ */ React12__namespace.createElement(
|
|
1336
1443
|
ContainerItemToolbar,
|
|
1337
1444
|
{
|
|
1338
1445
|
contentId: item.id,
|
|
1339
1446
|
canBringUp: i > 0,
|
|
1340
1447
|
canBringDown: i < items.length - 1
|
|
1341
1448
|
}
|
|
1342
|
-
)), multiple && /* @__PURE__ */
|
|
1449
|
+
)), multiple && /* @__PURE__ */ React12__namespace.createElement(
|
|
1343
1450
|
AddContentDividerButton,
|
|
1344
1451
|
{
|
|
1345
1452
|
parent: id,
|
|
@@ -1350,12 +1457,12 @@ var BuildContainerInner = (props) => {
|
|
|
1350
1457
|
};
|
|
1351
1458
|
var build_container_client_default = BuildContainerInner;
|
|
1352
1459
|
var AddContentButton = (props) => {
|
|
1353
|
-
const components =
|
|
1354
|
-
const { addContent } =
|
|
1355
|
-
return /* @__PURE__ */
|
|
1356
|
-
const
|
|
1357
|
-
return /* @__PURE__ */
|
|
1358
|
-
|
|
1460
|
+
const components = chunkW2LT4IQQ_js.builder.getComponents();
|
|
1461
|
+
const { addContent } = chunkIB3LYMKX_js.useBuilder();
|
|
1462
|
+
return /* @__PURE__ */ React12__namespace.createElement(Popover, null, /* @__PURE__ */ React12__namespace.createElement(PopoverTrigger, { asChild: true }, props.children), /* @__PURE__ */ React12__namespace.createElement(PopoverContent, { className: "sb-p-1" }, /* @__PURE__ */ React12__namespace.createElement("div", { className: "sb-grid sb-grid-cols-2 sb-gap-2" }, components.map((component) => {
|
|
1463
|
+
const Icon2 = component.icon ?? lucideReact.ImageIcon;
|
|
1464
|
+
return /* @__PURE__ */ React12__namespace.createElement(PopoverClose, { key: component.name, asChild: true }, /* @__PURE__ */ React12__namespace.createElement(
|
|
1465
|
+
chunkIB3LYMKX_js.Button,
|
|
1359
1466
|
{
|
|
1360
1467
|
variant: "ghost",
|
|
1361
1468
|
className: "sb-justify-start",
|
|
@@ -1368,22 +1475,22 @@ var AddContentButton = (props) => {
|
|
|
1368
1475
|
);
|
|
1369
1476
|
}
|
|
1370
1477
|
},
|
|
1371
|
-
/* @__PURE__ */
|
|
1478
|
+
/* @__PURE__ */ React12__namespace.createElement(Icon2, { className: "sb-mr-2 sb-h-4 sb-w-4 sb-shrink-0" }),
|
|
1372
1479
|
component.friendlyName ?? component.name
|
|
1373
1480
|
));
|
|
1374
1481
|
}))));
|
|
1375
1482
|
};
|
|
1376
1483
|
var AddContentPlaceholder = (props) => {
|
|
1377
|
-
return /* @__PURE__ */
|
|
1484
|
+
return /* @__PURE__ */ React12__namespace.createElement(AddContentButton, { ...props }, /* @__PURE__ */ React12__namespace.createElement("div", { className: "sb-flex sb-justify-center sb-bg-primary/50 p-4" }, /* @__PURE__ */ React12__namespace.createElement(chunkIB3LYMKX_js.Button, { size: "sm" }, /* @__PURE__ */ React12__namespace.createElement(lucideReact.PlusIcon, { className: "sb-mr-2 sb-h-4 sb-w-4" }), "Blok Toevoegen")));
|
|
1378
1485
|
};
|
|
1379
1486
|
var AddContentDividerButton = (props) => {
|
|
1380
|
-
return /* @__PURE__ */
|
|
1381
|
-
|
|
1487
|
+
return /* @__PURE__ */ React12__namespace.createElement(AddContentButton, { ...props }, /* @__PURE__ */ React12__namespace.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__namespace.createElement(
|
|
1488
|
+
chunkIB3LYMKX_js.Button,
|
|
1382
1489
|
{
|
|
1383
1490
|
size: "sm",
|
|
1384
1491
|
className: "sb-absolute sb-left-1/2 sb-top-1/2 sb--translate-y-1/2 sb--translate-x-1/2 sb-shadow"
|
|
1385
1492
|
},
|
|
1386
|
-
/* @__PURE__ */
|
|
1493
|
+
/* @__PURE__ */ React12__namespace.createElement(lucideReact.PlusIcon, { className: "sb-mr-2 sb-h-4 sb-w-4" }),
|
|
1387
1494
|
"Blok Toevoegen"
|
|
1388
1495
|
)));
|
|
1389
1496
|
};
|