@easy-editor/setters 0.0.5 → 0.0.6
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/index.cjs +230 -281
- package/dist/index.cjs.map +1 -1
- package/dist/index.esm.js +225 -276
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +279 -329
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +4 -4
- package/dist/index.min.js.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -2,12 +2,11 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var React = require('react');
|
|
5
|
+
var React$1 = require('react');
|
|
6
6
|
var reactSlot = require('@radix-ui/react-slot');
|
|
7
7
|
var classVarianceAuthority = require('class-variance-authority');
|
|
8
8
|
var clsx = require('clsx');
|
|
9
9
|
var tailwindMerge = require('tailwind-merge');
|
|
10
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
11
10
|
var PopoverPrimitive = require('@radix-ui/react-popover');
|
|
12
11
|
var Sketch = require('@uiw/react-color-sketch');
|
|
13
12
|
var SwitchPrimitive = require('@radix-ui/react-switch');
|
|
@@ -32,12 +31,22 @@ function _interopNamespaceDefault(e) {
|
|
|
32
31
|
return Object.freeze(n);
|
|
33
32
|
}
|
|
34
33
|
|
|
35
|
-
var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
|
|
34
|
+
var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React$1);
|
|
36
35
|
var PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(PopoverPrimitive);
|
|
37
36
|
var SwitchPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(SwitchPrimitive);
|
|
38
37
|
var CollapsiblePrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(CollapsiblePrimitive);
|
|
39
38
|
var TabsPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(TabsPrimitive);
|
|
40
39
|
|
|
40
|
+
function _extends() {
|
|
41
|
+
return _extends = Object.assign ? Object.assign.bind() : function (n) {
|
|
42
|
+
for (var e = 1; e < arguments.length; e++) {
|
|
43
|
+
var t = arguments[e];
|
|
44
|
+
for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
|
|
45
|
+
}
|
|
46
|
+
return n;
|
|
47
|
+
}, _extends.apply(null, arguments);
|
|
48
|
+
}
|
|
49
|
+
|
|
41
50
|
function cn(...inputs) {
|
|
42
51
|
return tailwindMerge.twMerge(clsx.clsx(inputs));
|
|
43
52
|
}
|
|
@@ -74,7 +83,7 @@ const Button = /*#__PURE__*/React__namespace.forwardRef(({
|
|
|
74
83
|
...props
|
|
75
84
|
}, ref) => {
|
|
76
85
|
const Comp = asChild ? reactSlot.Slot : "button";
|
|
77
|
-
return /*#__PURE__*/
|
|
86
|
+
return /*#__PURE__*/React__namespace.createElement(Comp, _extends({
|
|
78
87
|
ref: ref,
|
|
79
88
|
"data-slot": "button",
|
|
80
89
|
"data-variant": variant,
|
|
@@ -83,27 +92,24 @@ const Button = /*#__PURE__*/React__namespace.forwardRef(({
|
|
|
83
92
|
variant,
|
|
84
93
|
size,
|
|
85
94
|
className
|
|
86
|
-
}))
|
|
87
|
-
|
|
88
|
-
});
|
|
95
|
+
}))
|
|
96
|
+
}, props));
|
|
89
97
|
});
|
|
90
98
|
Button.displayName = "Button";
|
|
91
99
|
|
|
92
100
|
function Popover({
|
|
93
101
|
...props
|
|
94
102
|
}) {
|
|
95
|
-
return /*#__PURE__*/
|
|
96
|
-
"data-slot": "popover"
|
|
97
|
-
|
|
98
|
-
});
|
|
103
|
+
return /*#__PURE__*/React__namespace.createElement(PopoverPrimitive__namespace.Root, _extends({
|
|
104
|
+
"data-slot": "popover"
|
|
105
|
+
}, props));
|
|
99
106
|
}
|
|
100
107
|
function PopoverTrigger({
|
|
101
108
|
...props
|
|
102
109
|
}) {
|
|
103
|
-
return /*#__PURE__*/
|
|
104
|
-
"data-slot": "popover-trigger"
|
|
105
|
-
|
|
106
|
-
});
|
|
110
|
+
return /*#__PURE__*/React__namespace.createElement(PopoverPrimitive__namespace.Trigger, _extends({
|
|
111
|
+
"data-slot": "popover-trigger"
|
|
112
|
+
}, props));
|
|
107
113
|
}
|
|
108
114
|
function PopoverContent({
|
|
109
115
|
className,
|
|
@@ -111,15 +117,12 @@ function PopoverContent({
|
|
|
111
117
|
sideOffset = 4,
|
|
112
118
|
...props
|
|
113
119
|
}) {
|
|
114
|
-
return /*#__PURE__*/
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
...props
|
|
121
|
-
})
|
|
122
|
-
});
|
|
120
|
+
return /*#__PURE__*/React__namespace.createElement(PopoverPrimitive__namespace.Portal, null, /*#__PURE__*/React__namespace.createElement(PopoverPrimitive__namespace.Content, _extends({
|
|
121
|
+
"data-slot": "popover-content",
|
|
122
|
+
align: align,
|
|
123
|
+
sideOffset: sideOffset,
|
|
124
|
+
className: cn("bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden", className)
|
|
125
|
+
}, props)));
|
|
123
126
|
}
|
|
124
127
|
|
|
125
128
|
const ColorSetter = props => {
|
|
@@ -129,51 +132,42 @@ const ColorSetter = props => {
|
|
|
129
132
|
onChange,
|
|
130
133
|
disableAlpha = false
|
|
131
134
|
} = props;
|
|
132
|
-
return /*#__PURE__*/
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
disableAlpha: disableAlpha,
|
|
156
|
-
onChange: res => onChange(res.hexa),
|
|
157
|
-
presetColors: []
|
|
158
|
-
})
|
|
159
|
-
})]
|
|
160
|
-
});
|
|
135
|
+
return /*#__PURE__*/React.createElement(Popover, null, /*#__PURE__*/React.createElement(PopoverTrigger, {
|
|
136
|
+
asChild: true
|
|
137
|
+
}, /*#__PURE__*/React.createElement(Button, {
|
|
138
|
+
"aria-label": "Select color",
|
|
139
|
+
className: 'h-8 w-full justify-start gap-2 bg-transparent px-2 py-[5px] text-left font-normal text-xs',
|
|
140
|
+
variant: 'outline'
|
|
141
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
142
|
+
"aria-label": "Current color",
|
|
143
|
+
className: "h-3.5 w-3.5 rounded-full border border-muted-foreground",
|
|
144
|
+
style: {
|
|
145
|
+
backgroundColor: value ?? initialValue
|
|
146
|
+
}
|
|
147
|
+
}), /*#__PURE__*/React.createElement("span", {
|
|
148
|
+
className: "truncate font-mono"
|
|
149
|
+
}, value ?? initialValue))), /*#__PURE__*/React.createElement(PopoverContent, {
|
|
150
|
+
align: "start",
|
|
151
|
+
className: "w-auto p-0"
|
|
152
|
+
}, /*#__PURE__*/React.createElement(Sketch, {
|
|
153
|
+
color: value,
|
|
154
|
+
disableAlpha: disableAlpha,
|
|
155
|
+
onChange: res => onChange(res.hexa),
|
|
156
|
+
presetColors: []
|
|
157
|
+
})));
|
|
161
158
|
};
|
|
162
159
|
|
|
163
160
|
const NodeIdSetter = props => {
|
|
164
161
|
const {
|
|
165
162
|
selected
|
|
166
163
|
} = props;
|
|
167
|
-
return /*#__PURE__*/
|
|
168
|
-
className: "flex flex-col"
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
children: selected.componentMeta.title
|
|
175
|
-
})]
|
|
176
|
-
});
|
|
164
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
165
|
+
className: "flex flex-col"
|
|
166
|
+
}, /*#__PURE__*/React.createElement("p", {
|
|
167
|
+
className: "leading-7"
|
|
168
|
+
}, selected.id), /*#__PURE__*/React.createElement("p", {
|
|
169
|
+
className: "text-muted-foreground text-xs"
|
|
170
|
+
}, selected.componentMeta.title));
|
|
177
171
|
};
|
|
178
172
|
|
|
179
173
|
function Input({
|
|
@@ -181,12 +175,11 @@ function Input({
|
|
|
181
175
|
type,
|
|
182
176
|
...props
|
|
183
177
|
}) {
|
|
184
|
-
return /*#__PURE__*/
|
|
178
|
+
return /*#__PURE__*/React__namespace.createElement("input", _extends({
|
|
185
179
|
type: type,
|
|
186
180
|
"data-slot": "input",
|
|
187
|
-
className: cn("file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]", "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", className)
|
|
188
|
-
|
|
189
|
-
});
|
|
181
|
+
className: cn("file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]", "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", className)
|
|
182
|
+
}, props));
|
|
190
183
|
}
|
|
191
184
|
|
|
192
185
|
const NumberSetter = props => {
|
|
@@ -197,20 +190,18 @@ const NumberSetter = props => {
|
|
|
197
190
|
onChange,
|
|
198
191
|
suffix
|
|
199
192
|
} = props;
|
|
200
|
-
return /*#__PURE__*/
|
|
201
|
-
className: "relative w-full"
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
})]
|
|
213
|
-
});
|
|
193
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
194
|
+
className: "relative w-full"
|
|
195
|
+
}, /*#__PURE__*/React.createElement(Input, {
|
|
196
|
+
className: cn('h-8 px-2 py-[5px] pr-8 text-xs! [-moz-appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none', !!suffix && 'pr-8'),
|
|
197
|
+
onChange: e => onChange(+e.target.value),
|
|
198
|
+
placeholder: placeholder || '',
|
|
199
|
+
type: "number",
|
|
200
|
+
value: value ?? initialValue
|
|
201
|
+
}), !!suffix && /*#__PURE__*/React.createElement("span", {
|
|
202
|
+
"aria-label": `Unit: ${suffix}`,
|
|
203
|
+
className: "pointer-events-none absolute top-1/2 right-3 -translate-y-1/2 text-muted-foreground"
|
|
204
|
+
}, suffix));
|
|
214
205
|
};
|
|
215
206
|
|
|
216
207
|
const RectSetter = props => {
|
|
@@ -224,58 +215,49 @@ const RectSetter = props => {
|
|
|
224
215
|
[key]: newValue
|
|
225
216
|
});
|
|
226
217
|
};
|
|
227
|
-
return /*#__PURE__*/
|
|
228
|
-
className: "flex w-full flex-wrap gap-2"
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
type: "number",
|
|
271
|
-
value: formatDecimal(value.height)
|
|
272
|
-
}), /*#__PURE__*/jsxRuntime.jsx("span", {
|
|
273
|
-
"aria-label": 'Unit: H',
|
|
274
|
-
className: "pointer-events-none absolute top-1/2 right-3 -translate-y-1/2 text-muted-foreground",
|
|
275
|
-
children: "H"
|
|
276
|
-
})]
|
|
277
|
-
})]
|
|
278
|
-
});
|
|
218
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
219
|
+
className: "flex w-full flex-wrap gap-2"
|
|
220
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
221
|
+
className: "relative w-[calc(50%-4px)]"
|
|
222
|
+
}, /*#__PURE__*/React.createElement(Input, {
|
|
223
|
+
className: "h-8 px-2 py-[5px] pr-8 text-xs! [-moz-appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none",
|
|
224
|
+
onChange: e => handleChange('x', Number(e.target.value)),
|
|
225
|
+
type: "number",
|
|
226
|
+
value: formatDecimal(value.x)
|
|
227
|
+
}), /*#__PURE__*/React.createElement("span", {
|
|
228
|
+
"aria-label": 'Unit: X',
|
|
229
|
+
className: "pointer-events-none absolute top-1/2 right-3 -translate-y-1/2 text-muted-foreground"
|
|
230
|
+
}, "X")), /*#__PURE__*/React.createElement("div", {
|
|
231
|
+
className: "relative w-[calc(50%-4px)]"
|
|
232
|
+
}, /*#__PURE__*/React.createElement(Input, {
|
|
233
|
+
className: "h-8 px-2 py-[5px] pr-8 text-xs! [-moz-appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none",
|
|
234
|
+
onChange: e => handleChange('y', Number(e.target.value)),
|
|
235
|
+
type: "number",
|
|
236
|
+
value: formatDecimal(value.y)
|
|
237
|
+
}), /*#__PURE__*/React.createElement("span", {
|
|
238
|
+
"aria-label": 'Unit: Y',
|
|
239
|
+
className: "pointer-events-none absolute top-1/2 right-3 -translate-y-1/2 text-muted-foreground"
|
|
240
|
+
}, "Y")), /*#__PURE__*/React.createElement("div", {
|
|
241
|
+
className: "relative w-[calc(50%-4px)]"
|
|
242
|
+
}, /*#__PURE__*/React.createElement(Input, {
|
|
243
|
+
className: "h-8 px-2 py-[5px] pr-8 text-xs! [-moz-appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none",
|
|
244
|
+
onChange: e => handleChange('width', Number(e.target.value)),
|
|
245
|
+
type: "number",
|
|
246
|
+
value: formatDecimal(value.width)
|
|
247
|
+
}), /*#__PURE__*/React.createElement("span", {
|
|
248
|
+
"aria-label": 'Unit: W',
|
|
249
|
+
className: "pointer-events-none absolute top-1/2 right-3 -translate-y-1/2 text-muted-foreground"
|
|
250
|
+
}, "W")), /*#__PURE__*/React.createElement("div", {
|
|
251
|
+
className: "relative w-[calc(50%-4px)]"
|
|
252
|
+
}, /*#__PURE__*/React.createElement(Input, {
|
|
253
|
+
className: "h-8 px-2 py-[5px] pr-8 text-xs! [-moz-appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none",
|
|
254
|
+
onChange: e => handleChange('height', Number(e.target.value)),
|
|
255
|
+
type: "number",
|
|
256
|
+
value: formatDecimal(value.height)
|
|
257
|
+
}), /*#__PURE__*/React.createElement("span", {
|
|
258
|
+
"aria-label": 'Unit: H',
|
|
259
|
+
className: "pointer-events-none absolute top-1/2 right-3 -translate-y-1/2 text-muted-foreground"
|
|
260
|
+
}, "H")));
|
|
279
261
|
};
|
|
280
262
|
const decimalRegex = /(\.\d{2})\d+$/;
|
|
281
263
|
const formatDecimal = num => num.toString().replace(decimalRegex, '$1');
|
|
@@ -288,34 +270,30 @@ const StringSetter = props => {
|
|
|
288
270
|
onChange,
|
|
289
271
|
suffix
|
|
290
272
|
} = props;
|
|
291
|
-
return /*#__PURE__*/
|
|
292
|
-
className: "relative w-full"
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
})]
|
|
303
|
-
});
|
|
273
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
274
|
+
className: "relative w-full"
|
|
275
|
+
}, /*#__PURE__*/React.createElement(Input, {
|
|
276
|
+
className: cn('h-8 px-2 py-[5px] text-xs!', !!suffix && 'pr-8'),
|
|
277
|
+
onChange: e => onChange(e.target.value),
|
|
278
|
+
placeholder: placeholder || '',
|
|
279
|
+
value: value || initialValue
|
|
280
|
+
}), !!suffix && /*#__PURE__*/React.createElement("span", {
|
|
281
|
+
"aria-label": `Unit: ${suffix}`,
|
|
282
|
+
className: "pointer-events-none absolute top-1/2 right-3 -translate-y-1/2 text-muted-foreground"
|
|
283
|
+
}, suffix));
|
|
304
284
|
};
|
|
305
285
|
|
|
306
286
|
function Switch({
|
|
307
287
|
className,
|
|
308
288
|
...props
|
|
309
289
|
}) {
|
|
310
|
-
return /*#__PURE__*/
|
|
290
|
+
return /*#__PURE__*/React__namespace.createElement(SwitchPrimitive__namespace.Root, _extends({
|
|
311
291
|
"data-slot": "switch",
|
|
312
|
-
className: cn("peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50", className)
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
})
|
|
318
|
-
});
|
|
292
|
+
className: cn("peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50", className)
|
|
293
|
+
}, props), /*#__PURE__*/React__namespace.createElement(SwitchPrimitive__namespace.Thumb, {
|
|
294
|
+
"data-slot": "switch-thumb",
|
|
295
|
+
className: cn("bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0")
|
|
296
|
+
}));
|
|
319
297
|
}
|
|
320
298
|
|
|
321
299
|
const SwitchSetter = props => {
|
|
@@ -324,13 +302,12 @@ const SwitchSetter = props => {
|
|
|
324
302
|
initialValue,
|
|
325
303
|
onChange
|
|
326
304
|
} = props;
|
|
327
|
-
return /*#__PURE__*/
|
|
328
|
-
className: "py-0.5"
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
});
|
|
305
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
306
|
+
className: "py-0.5"
|
|
307
|
+
}, /*#__PURE__*/React.createElement(Switch, {
|
|
308
|
+
checked: value || initialValue,
|
|
309
|
+
onCheckedChange: onChange
|
|
310
|
+
}));
|
|
334
311
|
};
|
|
335
312
|
|
|
336
313
|
const UploadSetter = props => {
|
|
@@ -340,8 +317,8 @@ const UploadSetter = props => {
|
|
|
340
317
|
accept = '.jpg,.jpeg,.png,.gif',
|
|
341
318
|
maxSize = 10 * 1024 * 1024
|
|
342
319
|
} = props;
|
|
343
|
-
const [error, setError] = React.useState('');
|
|
344
|
-
const inputRef = React.useRef(null);
|
|
320
|
+
const [error, setError] = React$1.useState('');
|
|
321
|
+
const inputRef = React$1.useRef(null);
|
|
345
322
|
const handleFileChange = async e => {
|
|
346
323
|
const file = e.target.files?.[0];
|
|
347
324
|
setError('');
|
|
@@ -404,77 +381,63 @@ const UploadSetter = props => {
|
|
|
404
381
|
inputRef.current.value = '';
|
|
405
382
|
}
|
|
406
383
|
};
|
|
407
|
-
return /*#__PURE__*/
|
|
408
|
-
className: "group relative w-full overflow-hidden"
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
children: value.raw?.name
|
|
443
|
-
}), /*#__PURE__*/jsxRuntime.jsxs("span", {
|
|
444
|
-
className: "shrink-0 whitespace-nowrap text-muted-foreground/50",
|
|
445
|
-
children: [(value.raw?.size / 1024).toFixed(1), "KB"]
|
|
446
|
-
})]
|
|
447
|
-
}), !!error && /*#__PURE__*/jsxRuntime.jsx("p", {
|
|
448
|
-
className: "mt-1 text-destructive text-xs",
|
|
449
|
-
role: "alert",
|
|
450
|
-
children: error
|
|
451
|
-
})]
|
|
452
|
-
});
|
|
384
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
385
|
+
className: "group relative w-full overflow-hidden"
|
|
386
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
387
|
+
className: "flex gap-2"
|
|
388
|
+
}, /*#__PURE__*/React.createElement("label", {
|
|
389
|
+
className: "flex-1 cursor-pointer"
|
|
390
|
+
}, /*#__PURE__*/React.createElement("input", {
|
|
391
|
+
accept: accept,
|
|
392
|
+
className: cn('h-8 cursor-pointer px-2 py-[5px] text-xs', 'border-dashed transition-colors hover:border-primary', 'absolute h-0 w-0 opacity-0'),
|
|
393
|
+
onChange: handleFileChange,
|
|
394
|
+
ref: inputRef,
|
|
395
|
+
type: "file"
|
|
396
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
397
|
+
className: "flex h-8 w-full items-center justify-center rounded-md border border-dashed text-muted-foreground text-xs transition-colors hover:border-primary"
|
|
398
|
+
}, /*#__PURE__*/React.createElement(lucideReact.Upload, {
|
|
399
|
+
className: "mr-2 h-4 w-4"
|
|
400
|
+
}), /*#__PURE__*/React.createElement("span", null, value ? '更换文件' : '点击上传'))), !!value && /*#__PURE__*/React.createElement(Button, {
|
|
401
|
+
"aria-label": "\u6E05\u9664\u6587\u4EF6",
|
|
402
|
+
className: "h-8 px-2 text-muted-foreground hover:text-destructive",
|
|
403
|
+
onClick: handleClear,
|
|
404
|
+
size: "sm",
|
|
405
|
+
type: "button",
|
|
406
|
+
variant: "ghost"
|
|
407
|
+
}, /*#__PURE__*/React.createElement(lucideReact.X, {
|
|
408
|
+
className: "h-4 w-4"
|
|
409
|
+
}))), !!value && /*#__PURE__*/React.createElement("div", {
|
|
410
|
+
className: "mt-2 flex w-full items-center gap-2 text-foreground/80 text-xs"
|
|
411
|
+
}, /*#__PURE__*/React.createElement("span", {
|
|
412
|
+
className: "min-w-0 flex-1 truncate"
|
|
413
|
+
}, value.raw?.name), /*#__PURE__*/React.createElement("span", {
|
|
414
|
+
className: "shrink-0 whitespace-nowrap text-muted-foreground/50"
|
|
415
|
+
}, (value.raw?.size / 1024).toFixed(1), "KB")), !!error && /*#__PURE__*/React.createElement("p", {
|
|
416
|
+
className: "mt-1 text-destructive text-xs",
|
|
417
|
+
role: "alert"
|
|
418
|
+
}, error));
|
|
453
419
|
};
|
|
454
420
|
|
|
455
421
|
function Collapsible({
|
|
456
422
|
...props
|
|
457
423
|
}) {
|
|
458
|
-
return /*#__PURE__*/
|
|
459
|
-
"data-slot": "collapsible"
|
|
460
|
-
|
|
461
|
-
});
|
|
424
|
+
return /*#__PURE__*/React.createElement(CollapsiblePrimitive__namespace.Root, _extends({
|
|
425
|
+
"data-slot": "collapsible"
|
|
426
|
+
}, props));
|
|
462
427
|
}
|
|
463
428
|
function CollapsibleTrigger({
|
|
464
429
|
...props
|
|
465
430
|
}) {
|
|
466
|
-
return /*#__PURE__*/
|
|
467
|
-
"data-slot": "collapsible-trigger"
|
|
468
|
-
|
|
469
|
-
});
|
|
431
|
+
return /*#__PURE__*/React.createElement(CollapsiblePrimitive__namespace.CollapsibleTrigger, _extends({
|
|
432
|
+
"data-slot": "collapsible-trigger"
|
|
433
|
+
}, props));
|
|
470
434
|
}
|
|
471
435
|
function CollapsibleContent({
|
|
472
436
|
...props
|
|
473
437
|
}) {
|
|
474
|
-
return /*#__PURE__*/
|
|
475
|
-
"data-slot": "collapsible-content"
|
|
476
|
-
|
|
477
|
-
});
|
|
438
|
+
return /*#__PURE__*/React.createElement(CollapsiblePrimitive__namespace.CollapsibleContent, _extends({
|
|
439
|
+
"data-slot": "collapsible-content"
|
|
440
|
+
}, props));
|
|
478
441
|
}
|
|
479
442
|
|
|
480
443
|
const CollapseSetter = props => {
|
|
@@ -484,74 +447,62 @@ const CollapseSetter = props => {
|
|
|
484
447
|
initialValue,
|
|
485
448
|
icon = true
|
|
486
449
|
} = props;
|
|
487
|
-
const [isOpen, setIsOpen] = React.useState(initialValue ?? true);
|
|
488
|
-
return /*#__PURE__*/
|
|
450
|
+
const [isOpen, setIsOpen] = React$1.useState(initialValue ?? true);
|
|
451
|
+
return /*#__PURE__*/React.createElement(Collapsible, {
|
|
489
452
|
className: "w-[calc(100%+32px)] -translate-x-4 space-y-2",
|
|
490
453
|
onOpenChange: setIsOpen,
|
|
491
|
-
open: isOpen
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
})]
|
|
507
|
-
})
|
|
508
|
-
})]
|
|
509
|
-
}), /*#__PURE__*/jsxRuntime.jsx(CollapsibleContent, {
|
|
510
|
-
className: "space-y-3 px-4 py-2",
|
|
511
|
-
children: children
|
|
512
|
-
})]
|
|
513
|
-
});
|
|
454
|
+
open: isOpen
|
|
455
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
456
|
+
className: "flex h-8 items-center justify-between space-x-4 bg-muted px-4"
|
|
457
|
+
}, /*#__PURE__*/React.createElement("h4", null, field.title), !!icon && /*#__PURE__*/React.createElement(CollapsibleTrigger, {
|
|
458
|
+
asChild: true
|
|
459
|
+
}, /*#__PURE__*/React.createElement(Button, {
|
|
460
|
+
size: "sm",
|
|
461
|
+
variant: "ghost"
|
|
462
|
+
}, /*#__PURE__*/React.createElement(lucideReact.ChevronsUpDown, {
|
|
463
|
+
className: "h-4 w-4"
|
|
464
|
+
}), /*#__PURE__*/React.createElement("span", {
|
|
465
|
+
className: "sr-only"
|
|
466
|
+
}, "Toggle")))), /*#__PURE__*/React.createElement(CollapsibleContent, {
|
|
467
|
+
className: "space-y-3 px-4 py-2"
|
|
468
|
+
}, children));
|
|
514
469
|
};
|
|
515
470
|
|
|
516
471
|
function Tabs({
|
|
517
472
|
className,
|
|
518
473
|
...props
|
|
519
474
|
}) {
|
|
520
|
-
return /*#__PURE__*/
|
|
475
|
+
return /*#__PURE__*/React__namespace.createElement(TabsPrimitive__namespace.Root, _extends({
|
|
521
476
|
"data-slot": "tabs",
|
|
522
|
-
className: cn("flex flex-col gap-2", className)
|
|
523
|
-
|
|
524
|
-
});
|
|
477
|
+
className: cn("flex flex-col gap-2", className)
|
|
478
|
+
}, props));
|
|
525
479
|
}
|
|
526
480
|
function TabsList({
|
|
527
481
|
className,
|
|
528
482
|
...props
|
|
529
483
|
}) {
|
|
530
|
-
return /*#__PURE__*/
|
|
484
|
+
return /*#__PURE__*/React__namespace.createElement(TabsPrimitive__namespace.List, _extends({
|
|
531
485
|
"data-slot": "tabs-list",
|
|
532
|
-
className: cn("bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]", className)
|
|
533
|
-
|
|
534
|
-
});
|
|
486
|
+
className: cn("bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]", className)
|
|
487
|
+
}, props));
|
|
535
488
|
}
|
|
536
489
|
function TabsTrigger({
|
|
537
490
|
className,
|
|
538
491
|
...props
|
|
539
492
|
}) {
|
|
540
|
-
return /*#__PURE__*/
|
|
493
|
+
return /*#__PURE__*/React__namespace.createElement(TabsPrimitive__namespace.Trigger, _extends({
|
|
541
494
|
"data-slot": "tabs-trigger",
|
|
542
|
-
className: cn("data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className)
|
|
543
|
-
|
|
544
|
-
});
|
|
495
|
+
className: cn("data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className)
|
|
496
|
+
}, props));
|
|
545
497
|
}
|
|
546
498
|
function TabsContent({
|
|
547
499
|
className,
|
|
548
500
|
...props
|
|
549
501
|
}) {
|
|
550
|
-
return /*#__PURE__*/
|
|
502
|
+
return /*#__PURE__*/React__namespace.createElement(TabsPrimitive__namespace.Content, _extends({
|
|
551
503
|
"data-slot": "tabs-content",
|
|
552
|
-
className: cn("flex-1 outline-none", className)
|
|
553
|
-
|
|
554
|
-
});
|
|
504
|
+
className: cn("flex-1 outline-none", className)
|
|
505
|
+
}, props));
|
|
555
506
|
}
|
|
556
507
|
|
|
557
508
|
const TabSetter = props => {
|
|
@@ -560,7 +511,7 @@ const TabSetter = props => {
|
|
|
560
511
|
initialValue,
|
|
561
512
|
children
|
|
562
513
|
} = props;
|
|
563
|
-
const tabsList = React.useMemo(() => {
|
|
514
|
+
const tabsList = React$1.useMemo(() => {
|
|
564
515
|
if (tabs) {
|
|
565
516
|
return tabs;
|
|
566
517
|
}
|
|
@@ -572,25 +523,23 @@ const TabSetter = props => {
|
|
|
572
523
|
}
|
|
573
524
|
throw new Error('TabSetter: children or tabs must be an array');
|
|
574
525
|
}, [tabs, children]);
|
|
575
|
-
const firstTabValue = React.useMemo(() => tabsList[0]?.value, [tabsList]);
|
|
576
|
-
return /*#__PURE__*/
|
|
526
|
+
const firstTabValue = React$1.useMemo(() => tabsList[0]?.value, [tabsList]);
|
|
527
|
+
return /*#__PURE__*/React$1.createElement(Tabs, {
|
|
577
528
|
className: "w-full",
|
|
578
|
-
defaultValue: initialValue ?? firstTabValue
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
}, child.props.field.config.key))]
|
|
593
|
-
});
|
|
529
|
+
defaultValue: initialValue ?? firstTabValue
|
|
530
|
+
}, /*#__PURE__*/React$1.createElement(TabsList, {
|
|
531
|
+
className: "grid w-full",
|
|
532
|
+
style: {
|
|
533
|
+
gridTemplateColumns: `repeat(${tabsList.length}, minmax(0, 1fr))`
|
|
534
|
+
}
|
|
535
|
+
}, tabsList.map(tab => /*#__PURE__*/React$1.createElement(TabsTrigger, {
|
|
536
|
+
key: tab.value,
|
|
537
|
+
value: tab.value
|
|
538
|
+
}, tab.label))), Array.isArray(children) && children.map(child => /*#__PURE__*/React$1.createElement(TabsContent, {
|
|
539
|
+
className: "mt-0 box-border space-y-3 p-2",
|
|
540
|
+
key: child.props.field.config.key,
|
|
541
|
+
value: child.props.field.config.key
|
|
542
|
+
}, child)));
|
|
594
543
|
};
|
|
595
544
|
|
|
596
545
|
const setterMap = {
|