@btst/plugin-form-builder 0.0.0-stage → 1.0.0-beta.0
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/LICENSE.md +17 -0
- package/dist/api/getters.cjs +154 -0
- package/dist/api/getters.mjs +145 -0
- package/dist/api/index.cjs +25 -0
- package/dist/api/index.d.cts +119 -0
- package/dist/api/index.d.mts +119 -0
- package/dist/api/index.d.ts +119 -0
- package/dist/api/index.mjs +6 -0
- package/dist/api/lifecycle-migrations.cjs +15 -0
- package/dist/api/lifecycle-migrations.mjs +13 -0
- package/dist/api/operations.cjs +1093 -0
- package/dist/api/operations.mjs +1082 -0
- package/dist/api/plugin.cjs +201 -0
- package/dist/api/plugin.mjs +192 -0
- package/dist/api/query-key-defs.cjs +43 -0
- package/dist/api/query-key-defs.mjs +39 -0
- package/dist/client/components/forms/form-renderer.cjs +193 -0
- package/dist/client/components/forms/form-renderer.mjs +191 -0
- package/dist/client/components/index.cjs +29 -0
- package/dist/client/components/index.d.cts +97 -0
- package/dist/client/components/index.d.mts +97 -0
- package/dist/client/components/index.d.ts +97 -0
- package/dist/client/components/index.mjs +18 -0
- package/dist/client/components/loading/form-builder-skeleton.cjs +32 -0
- package/dist/client/components/loading/form-builder-skeleton.mjs +30 -0
- package/dist/client/components/loading/form-list-skeleton.cjs +21 -0
- package/dist/client/components/loading/form-list-skeleton.mjs +19 -0
- package/dist/client/components/loading/submissions-skeleton.cjs +34 -0
- package/dist/client/components/loading/submissions-skeleton.mjs +32 -0
- package/dist/client/components/pages/404-page.cjs +28 -0
- package/dist/client/components/pages/404-page.mjs +26 -0
- package/dist/client/components/pages/form-builder-page.cjs +77 -0
- package/dist/client/components/pages/form-builder-page.internal.cjs +217 -0
- package/dist/client/components/pages/form-builder-page.internal.mjs +215 -0
- package/dist/client/components/pages/form-builder-page.mjs +75 -0
- package/dist/client/components/pages/form-list-page.cjs +44 -0
- package/dist/client/components/pages/form-list-page.internal.cjs +282 -0
- package/dist/client/components/pages/form-list-page.internal.mjs +280 -0
- package/dist/client/components/pages/form-list-page.mjs +42 -0
- package/dist/client/components/pages/submissions-page.cjs +64 -0
- package/dist/client/components/pages/submissions-page.internal.cjs +255 -0
- package/dist/client/components/pages/submissions-page.internal.mjs +253 -0
- package/dist/client/components/pages/submissions-page.mjs +62 -0
- package/dist/client/components/shared/default-error.cjs +17 -0
- package/dist/client/components/shared/default-error.mjs +15 -0
- package/dist/client/components/shared/empty-state.cjs +16 -0
- package/dist/client/components/shared/empty-state.mjs +14 -0
- package/dist/client/components/shared/page-wrapper.cjs +29 -0
- package/dist/client/components/shared/page-wrapper.mjs +27 -0
- package/dist/client/components/shared/pagination.cjs +49 -0
- package/dist/client/components/shared/pagination.mjs +47 -0
- package/dist/client/constants.cjs +5 -0
- package/dist/client/constants.mjs +3 -0
- package/dist/client/hooks/form-builder-hooks.cjs +203 -0
- package/dist/client/hooks/form-builder-hooks.mjs +186 -0
- package/dist/client/hooks/form-builder-resource.cjs +13 -0
- package/dist/client/hooks/form-builder-resource.mjs +11 -0
- package/dist/client/hooks/index.cjs +22 -0
- package/dist/client/hooks/index.d.cts +378 -0
- package/dist/client/hooks/index.d.mts +378 -0
- package/dist/client/hooks/index.d.ts +378 -0
- package/dist/client/hooks/index.mjs +1 -0
- package/dist/client/index.cjs +13 -0
- package/dist/client/index.d.cts +410 -0
- package/dist/client/index.d.mts +410 -0
- package/dist/client/index.d.ts +410 -0
- package/dist/client/index.mjs +2 -0
- package/dist/client/plugin.cjs +311 -0
- package/dist/client/plugin.mjs +309 -0
- package/dist/client.css +3 -0
- package/dist/db.cjs +99 -0
- package/dist/db.mjs +97 -0
- package/dist/permissions.cjs +95 -0
- package/dist/permissions.d.cts +94 -0
- package/dist/permissions.d.mts +94 -0
- package/dist/permissions.d.ts +94 -0
- package/dist/permissions.mjs +93 -0
- package/dist/query-keys.cjs +140 -0
- package/dist/query-keys.d.cts +392 -0
- package/dist/query-keys.d.mts +392 -0
- package/dist/query-keys.d.ts +392 -0
- package/dist/query-keys.mjs +137 -0
- package/dist/schemas.cjs +91 -0
- package/dist/schemas.mjs +82 -0
- package/dist/shared/plugin-form-builder.BZYGyFgT.d.mts +351 -0
- package/dist/shared/plugin-form-builder.Bbl9NufB.d.cts +408 -0
- package/dist/shared/plugin-form-builder.CSP5HR2O.d.ts +408 -0
- package/dist/shared/plugin-form-builder.Cmk083dA.d.cts +351 -0
- package/dist/shared/plugin-form-builder.D258Qpb8.d.ts +351 -0
- package/dist/shared/plugin-form-builder.DWrQ3lRX.d.cts +118 -0
- package/dist/shared/plugin-form-builder.DWrQ3lRX.d.mts +118 -0
- package/dist/shared/plugin-form-builder.DWrQ3lRX.d.ts +118 -0
- package/dist/shared/plugin-form-builder.lp98rFNl.d.mts +408 -0
- package/dist/style.css +6 -0
- package/dist/types.cjs +2 -0
- package/dist/types.d.cts +6 -0
- package/dist/types.d.mts +6 -0
- package/dist/types.d.ts +6 -0
- package/dist/types.mjs +1 -0
- package/dist/ui/src/components/accordion.cjs +81 -0
- package/dist/ui/src/components/accordion.mjs +62 -0
- package/dist/ui/src/components/alert-dialog.cjs +157 -0
- package/dist/ui/src/components/alert-dialog.mjs +132 -0
- package/dist/ui/src/components/auto-form/common/label.cjs +18 -0
- package/dist/ui/src/components/auto-form/common/label.mjs +16 -0
- package/dist/ui/src/components/auto-form/common/tooltip.cjs +9 -0
- package/dist/ui/src/components/auto-form/common/tooltip.mjs +7 -0
- package/dist/ui/src/components/auto-form/config.cjs +40 -0
- package/dist/ui/src/components/auto-form/config.mjs +37 -0
- package/dist/ui/src/components/auto-form/dependencies.cjs +48 -0
- package/dist/ui/src/components/auto-form/dependencies.mjs +46 -0
- package/dist/ui/src/components/auto-form/fields/array.cjs +266 -0
- package/dist/ui/src/components/auto-form/fields/array.mjs +264 -0
- package/dist/ui/src/components/auto-form/fields/checkbox.cjs +38 -0
- package/dist/ui/src/components/auto-form/fields/checkbox.mjs +36 -0
- package/dist/ui/src/components/auto-form/fields/date.cjs +67 -0
- package/dist/ui/src/components/auto-form/fields/date.mjs +65 -0
- package/dist/ui/src/components/auto-form/fields/enum.cjs +73 -0
- package/dist/ui/src/components/auto-form/fields/enum.mjs +71 -0
- package/dist/ui/src/components/auto-form/fields/input.cjs +32 -0
- package/dist/ui/src/components/auto-form/fields/input.mjs +30 -0
- package/dist/ui/src/components/auto-form/fields/number.cjs +31 -0
- package/dist/ui/src/components/auto-form/fields/number.mjs +29 -0
- package/dist/ui/src/components/auto-form/fields/object.cjs +233 -0
- package/dist/ui/src/components/auto-form/fields/object.mjs +217 -0
- package/dist/ui/src/components/auto-form/fields/radio-group.cjs +67 -0
- package/dist/ui/src/components/auto-form/fields/radio-group.mjs +65 -0
- package/dist/ui/src/components/auto-form/fields/switch.cjs +38 -0
- package/dist/ui/src/components/auto-form/fields/switch.mjs +36 -0
- package/dist/ui/src/components/auto-form/fields/textarea.cjs +31 -0
- package/dist/ui/src/components/auto-form/fields/textarea.mjs +29 -0
- package/dist/ui/src/components/auto-form/helpers.cjs +270 -0
- package/dist/ui/src/components/auto-form/helpers.mjs +259 -0
- package/dist/ui/src/components/auto-form/index.cjs +92 -0
- package/dist/ui/src/components/auto-form/index.mjs +86 -0
- package/dist/ui/src/components/auto-form/stepped-auto-form.cjs +374 -0
- package/dist/ui/src/components/auto-form/stepped-auto-form.mjs +368 -0
- package/dist/ui/src/components/auto-form/types.cjs +11 -0
- package/dist/ui/src/components/auto-form/types.mjs +9 -0
- package/dist/ui/src/components/button.cjs +56 -0
- package/dist/ui/src/components/button.mjs +53 -0
- package/dist/ui/src/components/calendar.cjs +207 -0
- package/dist/ui/src/components/calendar.mjs +190 -0
- package/dist/ui/src/components/checkbox.cjs +48 -0
- package/dist/ui/src/components/checkbox.mjs +32 -0
- package/dist/ui/src/components/date-picker.cjs +41 -0
- package/dist/ui/src/components/date-picker.mjs +39 -0
- package/dist/ui/src/components/dialog.cjs +141 -0
- package/dist/ui/src/components/dialog.mjs +118 -0
- package/dist/ui/src/components/dropdown-menu.cjs +81 -0
- package/dist/ui/src/components/dropdown-menu.mjs +62 -0
- package/dist/ui/src/components/form-builder/canvas.cjs +111 -0
- package/dist/ui/src/components/form-builder/canvas.mjs +109 -0
- package/dist/ui/src/components/form-builder/components/index.cjs +571 -0
- package/dist/ui/src/components/form-builder/components/index.mjs +554 -0
- package/dist/ui/src/components/form-builder/edit-field-dialog.cjs +131 -0
- package/dist/ui/src/components/form-builder/edit-field-dialog.mjs +129 -0
- package/dist/ui/src/components/form-builder/form-preview.cjs +73 -0
- package/dist/ui/src/components/form-builder/form-preview.mjs +71 -0
- package/dist/ui/src/components/form-builder/index.cjs +350 -0
- package/dist/ui/src/components/form-builder/index.mjs +344 -0
- package/dist/ui/src/components/form-builder/nested-field-editor-dialog.cjs +263 -0
- package/dist/ui/src/components/form-builder/nested-field-editor-dialog.mjs +261 -0
- package/dist/ui/src/components/form-builder/palette.cjs +52 -0
- package/dist/ui/src/components/form-builder/palette.mjs +49 -0
- package/dist/ui/src/components/form-builder/schema-utils.cjs +128 -0
- package/dist/ui/src/components/form-builder/schema-utils.mjs +122 -0
- package/dist/ui/src/components/form-builder/sortable-field.cjs +151 -0
- package/dist/ui/src/components/form-builder/sortable-field.mjs +148 -0
- package/dist/ui/src/components/form-builder/step-tabs.cjs +180 -0
- package/dist/ui/src/components/form-builder/step-tabs.mjs +178 -0
- package/dist/ui/src/components/form-builder/types.cjs +7 -0
- package/dist/ui/src/components/form-builder/types.mjs +5 -0
- package/dist/ui/src/components/form-builder/validation-schemas.cjs +67 -0
- package/dist/ui/src/components/form-builder/validation-schemas.mjs +56 -0
- package/dist/ui/src/components/form.cjs +120 -0
- package/dist/ui/src/components/form.mjs +98 -0
- package/dist/ui/src/components/input.cjs +23 -0
- package/dist/ui/src/components/input.mjs +21 -0
- package/dist/ui/src/components/label.cjs +39 -0
- package/dist/ui/src/components/label.mjs +23 -0
- package/dist/ui/src/components/page-layout.cjs +25 -0
- package/dist/ui/src/components/page-layout.mjs +23 -0
- package/dist/ui/src/components/page-wrapper.cjs +20 -0
- package/dist/ui/src/components/page-wrapper.mjs +18 -0
- package/dist/ui/src/components/popover.cjs +60 -0
- package/dist/ui/src/components/popover.mjs +42 -0
- package/dist/ui/src/components/radio-group.cjs +62 -0
- package/dist/ui/src/components/radio-group.mjs +45 -0
- package/dist/ui/src/components/select.cjs +161 -0
- package/dist/ui/src/components/select.mjs +139 -0
- package/dist/ui/src/components/separator.cjs +43 -0
- package/dist/ui/src/components/separator.mjs +27 -0
- package/dist/ui/src/components/skeleton.cjs +17 -0
- package/dist/ui/src/components/skeleton.mjs +15 -0
- package/dist/ui/src/components/stack-attribution.cjs +24 -0
- package/dist/ui/src/components/stack-attribution.mjs +22 -0
- package/dist/ui/src/components/switch.cjs +48 -0
- package/dist/ui/src/components/switch.mjs +32 -0
- package/dist/ui/src/components/table.cjs +89 -0
- package/dist/ui/src/components/table.mjs +82 -0
- package/dist/ui/src/components/tabs.cjs +84 -0
- package/dist/ui/src/components/tabs.mjs +65 -0
- package/dist/ui/src/components/textarea.cjs +20 -0
- package/dist/ui/src/components/textarea.mjs +18 -0
- package/dist/ui/src/lib/schema-converter.cjs +133 -0
- package/dist/ui/src/lib/schema-converter.mjs +127 -0
- package/dist/ui/src/lib/utils.cjs +10 -0
- package/dist/ui/src/lib/utils.mjs +8 -0
- package/dist/utils.cjs +41 -0
- package/dist/utils.mjs +32 -0
- package/package.json +175 -3
- package/README.md +0 -3
|
@@ -0,0 +1,151 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
'use strict';
|
|
3
|
+
|
|
4
|
+
const jsxRuntime = require('react/jsx-runtime');
|
|
5
|
+
const sortable = require('@dnd-kit/sortable');
|
|
6
|
+
const utilities = require('@dnd-kit/utilities');
|
|
7
|
+
const lucideReact = require('lucide-react');
|
|
8
|
+
const utils = require('../../lib/utils.cjs');
|
|
9
|
+
const button = require('../button.cjs');
|
|
10
|
+
|
|
11
|
+
function SortableField({
|
|
12
|
+
field,
|
|
13
|
+
index,
|
|
14
|
+
component,
|
|
15
|
+
onEdit,
|
|
16
|
+
onDelete,
|
|
17
|
+
onConfigureNested
|
|
18
|
+
}) {
|
|
19
|
+
const {
|
|
20
|
+
attributes,
|
|
21
|
+
listeners,
|
|
22
|
+
setNodeRef,
|
|
23
|
+
transform,
|
|
24
|
+
transition,
|
|
25
|
+
isDragging
|
|
26
|
+
} = sortable.useSortable({
|
|
27
|
+
id: field.id,
|
|
28
|
+
data: {
|
|
29
|
+
type: "field",
|
|
30
|
+
fieldId: field.id,
|
|
31
|
+
index
|
|
32
|
+
}
|
|
33
|
+
});
|
|
34
|
+
const style = {
|
|
35
|
+
transform: utilities.CSS.Transform.toString(transform),
|
|
36
|
+
transition
|
|
37
|
+
};
|
|
38
|
+
const Icon = component?.icon;
|
|
39
|
+
const isContainerField = field.type === "object" || field.type === "array";
|
|
40
|
+
const nestedFieldCount = field.type === "object" ? field.children?.length || 0 : field.itemTemplate?.length || 0;
|
|
41
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
42
|
+
"div",
|
|
43
|
+
{
|
|
44
|
+
ref: setNodeRef,
|
|
45
|
+
style,
|
|
46
|
+
className: utils.cn(
|
|
47
|
+
"group flex items-center gap-2 p-3 rounded-lg border bg-card",
|
|
48
|
+
"transition-all duration-200",
|
|
49
|
+
isDragging && "opacity-50 shadow-lg z-50",
|
|
50
|
+
!isDragging && "hover:border-muted-foreground/30"
|
|
51
|
+
),
|
|
52
|
+
children: [
|
|
53
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
54
|
+
"div",
|
|
55
|
+
{
|
|
56
|
+
...attributes,
|
|
57
|
+
...listeners,
|
|
58
|
+
className: utils.cn(
|
|
59
|
+
"flex items-center justify-center p-1 rounded cursor-grab active:cursor-grabbing",
|
|
60
|
+
"hover:bg-muted touch-none",
|
|
61
|
+
"min-w-[44px] min-h-[44px] -m-1"
|
|
62
|
+
),
|
|
63
|
+
onClick: (e) => e.stopPropagation(),
|
|
64
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.GripVertical, { className: "h-4 w-4 text-muted-foreground" })
|
|
65
|
+
}
|
|
66
|
+
),
|
|
67
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
|
|
68
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
|
|
69
|
+
Icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "h-4 w-4 text-muted-foreground shrink-0" }),
|
|
70
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium truncate", children: field.props.label }),
|
|
71
|
+
field.props.required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-destructive text-sm", children: "*" }),
|
|
72
|
+
isContainerField && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs bg-muted px-1.5 py-0.5 rounded text-muted-foreground", children: [
|
|
73
|
+
nestedFieldCount,
|
|
74
|
+
" ",
|
|
75
|
+
nestedFieldCount === 1 ? "field" : "fields"
|
|
76
|
+
] })
|
|
77
|
+
] }),
|
|
78
|
+
field.props.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground truncate mt-0.5", children: field.props.description }),
|
|
79
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground/60 mt-1", children: component?.label || field.type })
|
|
80
|
+
] }),
|
|
81
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
|
|
82
|
+
isContainerField && onConfigureNested && /* @__PURE__ */ jsxRuntime.jsx(
|
|
83
|
+
button.Button,
|
|
84
|
+
{
|
|
85
|
+
variant: "ghost",
|
|
86
|
+
size: "icon",
|
|
87
|
+
className: utils.cn(
|
|
88
|
+
"h-8 w-8 text-muted-foreground hover:text-primary",
|
|
89
|
+
"opacity-0 group-hover:opacity-100 transition-opacity",
|
|
90
|
+
"min-w-[44px] min-h-[44px]"
|
|
91
|
+
),
|
|
92
|
+
onClick: (e) => {
|
|
93
|
+
e.stopPropagation();
|
|
94
|
+
onConfigureNested();
|
|
95
|
+
},
|
|
96
|
+
title: "Configure nested fields",
|
|
97
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings2, { className: "h-4 w-4" })
|
|
98
|
+
}
|
|
99
|
+
),
|
|
100
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
101
|
+
button.Button,
|
|
102
|
+
{
|
|
103
|
+
variant: "ghost",
|
|
104
|
+
size: "icon",
|
|
105
|
+
className: utils.cn(
|
|
106
|
+
"h-8 w-8 text-muted-foreground hover:text-primary",
|
|
107
|
+
"opacity-0 group-hover:opacity-100 transition-opacity",
|
|
108
|
+
"min-w-[44px] min-h-[44px]"
|
|
109
|
+
),
|
|
110
|
+
onClick: (e) => {
|
|
111
|
+
e.stopPropagation();
|
|
112
|
+
onEdit();
|
|
113
|
+
},
|
|
114
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pencil, { className: "h-4 w-4" })
|
|
115
|
+
}
|
|
116
|
+
),
|
|
117
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
118
|
+
button.Button,
|
|
119
|
+
{
|
|
120
|
+
variant: "ghost",
|
|
121
|
+
size: "icon",
|
|
122
|
+
className: utils.cn(
|
|
123
|
+
"h-8 w-8 text-muted-foreground hover:text-destructive",
|
|
124
|
+
"opacity-0 group-hover:opacity-100 transition-opacity",
|
|
125
|
+
"min-w-[44px] min-h-[44px]"
|
|
126
|
+
),
|
|
127
|
+
onClick: (e) => {
|
|
128
|
+
e.stopPropagation();
|
|
129
|
+
onDelete();
|
|
130
|
+
},
|
|
131
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "h-4 w-4" })
|
|
132
|
+
}
|
|
133
|
+
)
|
|
134
|
+
] })
|
|
135
|
+
]
|
|
136
|
+
}
|
|
137
|
+
);
|
|
138
|
+
}
|
|
139
|
+
function FieldDragOverlay({ field, component }) {
|
|
140
|
+
const Icon = component?.icon;
|
|
141
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 p-3 rounded-lg border bg-card shadow-lg cursor-grabbing", children: [
|
|
142
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-1", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.GripVertical, { className: "h-4 w-4 text-muted-foreground" }) }),
|
|
143
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
|
|
144
|
+
Icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "h-4 w-4 text-muted-foreground shrink-0" }),
|
|
145
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium truncate", children: field.props.label })
|
|
146
|
+
] }) })
|
|
147
|
+
] });
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
exports.FieldDragOverlay = FieldDragOverlay;
|
|
151
|
+
exports.SortableField = SortableField;
|
|
@@ -0,0 +1,148 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
3
|
+
import { useSortable } from '@dnd-kit/sortable';
|
|
4
|
+
import { CSS } from '@dnd-kit/utilities';
|
|
5
|
+
import { GripVertical, Settings2, Pencil, Trash2 } from 'lucide-react';
|
|
6
|
+
import { cn } from '../../lib/utils.mjs';
|
|
7
|
+
import { Button } from '../button.mjs';
|
|
8
|
+
|
|
9
|
+
function SortableField({
|
|
10
|
+
field,
|
|
11
|
+
index,
|
|
12
|
+
component,
|
|
13
|
+
onEdit,
|
|
14
|
+
onDelete,
|
|
15
|
+
onConfigureNested
|
|
16
|
+
}) {
|
|
17
|
+
const {
|
|
18
|
+
attributes,
|
|
19
|
+
listeners,
|
|
20
|
+
setNodeRef,
|
|
21
|
+
transform,
|
|
22
|
+
transition,
|
|
23
|
+
isDragging
|
|
24
|
+
} = useSortable({
|
|
25
|
+
id: field.id,
|
|
26
|
+
data: {
|
|
27
|
+
type: "field",
|
|
28
|
+
fieldId: field.id,
|
|
29
|
+
index
|
|
30
|
+
}
|
|
31
|
+
});
|
|
32
|
+
const style = {
|
|
33
|
+
transform: CSS.Transform.toString(transform),
|
|
34
|
+
transition
|
|
35
|
+
};
|
|
36
|
+
const Icon = component?.icon;
|
|
37
|
+
const isContainerField = field.type === "object" || field.type === "array";
|
|
38
|
+
const nestedFieldCount = field.type === "object" ? field.children?.length || 0 : field.itemTemplate?.length || 0;
|
|
39
|
+
return /* @__PURE__ */ jsxs(
|
|
40
|
+
"div",
|
|
41
|
+
{
|
|
42
|
+
ref: setNodeRef,
|
|
43
|
+
style,
|
|
44
|
+
className: cn(
|
|
45
|
+
"group flex items-center gap-2 p-3 rounded-lg border bg-card",
|
|
46
|
+
"transition-all duration-200",
|
|
47
|
+
isDragging && "opacity-50 shadow-lg z-50",
|
|
48
|
+
!isDragging && "hover:border-muted-foreground/30"
|
|
49
|
+
),
|
|
50
|
+
children: [
|
|
51
|
+
/* @__PURE__ */ jsx(
|
|
52
|
+
"div",
|
|
53
|
+
{
|
|
54
|
+
...attributes,
|
|
55
|
+
...listeners,
|
|
56
|
+
className: cn(
|
|
57
|
+
"flex items-center justify-center p-1 rounded cursor-grab active:cursor-grabbing",
|
|
58
|
+
"hover:bg-muted touch-none",
|
|
59
|
+
"min-w-[44px] min-h-[44px] -m-1"
|
|
60
|
+
),
|
|
61
|
+
onClick: (e) => e.stopPropagation(),
|
|
62
|
+
children: /* @__PURE__ */ jsx(GripVertical, { className: "h-4 w-4 text-muted-foreground" })
|
|
63
|
+
}
|
|
64
|
+
),
|
|
65
|
+
/* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
|
|
66
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
|
|
67
|
+
Icon && /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 text-muted-foreground shrink-0" }),
|
|
68
|
+
/* @__PURE__ */ jsx("span", { className: "font-medium truncate", children: field.props.label }),
|
|
69
|
+
field.props.required && /* @__PURE__ */ jsx("span", { className: "text-destructive text-sm", children: "*" }),
|
|
70
|
+
isContainerField && /* @__PURE__ */ jsxs("span", { className: "text-xs bg-muted px-1.5 py-0.5 rounded text-muted-foreground", children: [
|
|
71
|
+
nestedFieldCount,
|
|
72
|
+
" ",
|
|
73
|
+
nestedFieldCount === 1 ? "field" : "fields"
|
|
74
|
+
] })
|
|
75
|
+
] }),
|
|
76
|
+
field.props.description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground truncate mt-0.5", children: field.props.description }),
|
|
77
|
+
/* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground/60 mt-1", children: component?.label || field.type })
|
|
78
|
+
] }),
|
|
79
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
|
|
80
|
+
isContainerField && onConfigureNested && /* @__PURE__ */ jsx(
|
|
81
|
+
Button,
|
|
82
|
+
{
|
|
83
|
+
variant: "ghost",
|
|
84
|
+
size: "icon",
|
|
85
|
+
className: cn(
|
|
86
|
+
"h-8 w-8 text-muted-foreground hover:text-primary",
|
|
87
|
+
"opacity-0 group-hover:opacity-100 transition-opacity",
|
|
88
|
+
"min-w-[44px] min-h-[44px]"
|
|
89
|
+
),
|
|
90
|
+
onClick: (e) => {
|
|
91
|
+
e.stopPropagation();
|
|
92
|
+
onConfigureNested();
|
|
93
|
+
},
|
|
94
|
+
title: "Configure nested fields",
|
|
95
|
+
children: /* @__PURE__ */ jsx(Settings2, { className: "h-4 w-4" })
|
|
96
|
+
}
|
|
97
|
+
),
|
|
98
|
+
/* @__PURE__ */ jsx(
|
|
99
|
+
Button,
|
|
100
|
+
{
|
|
101
|
+
variant: "ghost",
|
|
102
|
+
size: "icon",
|
|
103
|
+
className: cn(
|
|
104
|
+
"h-8 w-8 text-muted-foreground hover:text-primary",
|
|
105
|
+
"opacity-0 group-hover:opacity-100 transition-opacity",
|
|
106
|
+
"min-w-[44px] min-h-[44px]"
|
|
107
|
+
),
|
|
108
|
+
onClick: (e) => {
|
|
109
|
+
e.stopPropagation();
|
|
110
|
+
onEdit();
|
|
111
|
+
},
|
|
112
|
+
children: /* @__PURE__ */ jsx(Pencil, { className: "h-4 w-4" })
|
|
113
|
+
}
|
|
114
|
+
),
|
|
115
|
+
/* @__PURE__ */ jsx(
|
|
116
|
+
Button,
|
|
117
|
+
{
|
|
118
|
+
variant: "ghost",
|
|
119
|
+
size: "icon",
|
|
120
|
+
className: cn(
|
|
121
|
+
"h-8 w-8 text-muted-foreground hover:text-destructive",
|
|
122
|
+
"opacity-0 group-hover:opacity-100 transition-opacity",
|
|
123
|
+
"min-w-[44px] min-h-[44px]"
|
|
124
|
+
),
|
|
125
|
+
onClick: (e) => {
|
|
126
|
+
e.stopPropagation();
|
|
127
|
+
onDelete();
|
|
128
|
+
},
|
|
129
|
+
children: /* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4" })
|
|
130
|
+
}
|
|
131
|
+
)
|
|
132
|
+
] })
|
|
133
|
+
]
|
|
134
|
+
}
|
|
135
|
+
);
|
|
136
|
+
}
|
|
137
|
+
function FieldDragOverlay({ field, component }) {
|
|
138
|
+
const Icon = component?.icon;
|
|
139
|
+
return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 p-3 rounded-lg border bg-card shadow-lg cursor-grabbing", children: [
|
|
140
|
+
/* @__PURE__ */ jsx("div", { className: "p-1", children: /* @__PURE__ */ jsx(GripVertical, { className: "h-4 w-4 text-muted-foreground" }) }),
|
|
141
|
+
/* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
|
|
142
|
+
Icon && /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 text-muted-foreground shrink-0" }),
|
|
143
|
+
/* @__PURE__ */ jsx("span", { className: "font-medium truncate", children: field.props.label })
|
|
144
|
+
] }) })
|
|
145
|
+
] });
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
export { FieldDragOverlay, SortableField };
|
|
@@ -0,0 +1,180 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
'use strict';
|
|
3
|
+
|
|
4
|
+
const jsxRuntime = require('react/jsx-runtime');
|
|
5
|
+
const React = require('react');
|
|
6
|
+
const lucideReact = require('lucide-react');
|
|
7
|
+
const utils = require('../../lib/utils.cjs');
|
|
8
|
+
const button = require('../button.cjs');
|
|
9
|
+
const input = require('../input.cjs');
|
|
10
|
+
|
|
11
|
+
function StepTabs({
|
|
12
|
+
steps,
|
|
13
|
+
activeStepIndex,
|
|
14
|
+
onActiveStepChange,
|
|
15
|
+
onAddStep,
|
|
16
|
+
onDeleteStep,
|
|
17
|
+
onRenameStep,
|
|
18
|
+
className,
|
|
19
|
+
hideStepControls
|
|
20
|
+
}) {
|
|
21
|
+
const [editingIndex, setEditingIndex] = React.useState(null);
|
|
22
|
+
const [editValue, setEditValue] = React.useState("");
|
|
23
|
+
const handleStartEdit = (index, currentTitle) => {
|
|
24
|
+
setEditingIndex(index);
|
|
25
|
+
setEditValue(currentTitle);
|
|
26
|
+
};
|
|
27
|
+
const handleConfirmEdit = () => {
|
|
28
|
+
if (editingIndex !== null && editValue.trim()) {
|
|
29
|
+
onRenameStep(editingIndex, editValue.trim());
|
|
30
|
+
}
|
|
31
|
+
setEditingIndex(null);
|
|
32
|
+
setEditValue("");
|
|
33
|
+
};
|
|
34
|
+
const handleCancelEdit = () => {
|
|
35
|
+
setEditingIndex(null);
|
|
36
|
+
setEditValue("");
|
|
37
|
+
};
|
|
38
|
+
const handleKeyDown = (e) => {
|
|
39
|
+
if (e.key === "Enter") {
|
|
40
|
+
handleConfirmEdit();
|
|
41
|
+
} else if (e.key === "Escape") {
|
|
42
|
+
handleCancelEdit();
|
|
43
|
+
}
|
|
44
|
+
};
|
|
45
|
+
if (hideStepControls) {
|
|
46
|
+
return null;
|
|
47
|
+
}
|
|
48
|
+
if (steps.length <= 1) {
|
|
49
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("flex items-center gap-2 mb-4", className), children: [
|
|
50
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
51
|
+
button.Button,
|
|
52
|
+
{
|
|
53
|
+
variant: "outline",
|
|
54
|
+
size: "sm",
|
|
55
|
+
onClick: onAddStep,
|
|
56
|
+
className: "gap-1",
|
|
57
|
+
children: [
|
|
58
|
+
/* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "h-4 w-4" }),
|
|
59
|
+
"Add Step"
|
|
60
|
+
]
|
|
61
|
+
}
|
|
62
|
+
),
|
|
63
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground", children: "Add a step to create a multi-step form" })
|
|
64
|
+
] });
|
|
65
|
+
}
|
|
66
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("flex items-center gap-2 mb-4 flex-wrap", className), children: [
|
|
67
|
+
steps.map((step, index) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
68
|
+
"div",
|
|
69
|
+
{
|
|
70
|
+
className: utils.cn(
|
|
71
|
+
"group flex items-center gap-1 px-3 py-1.5 rounded-md border transition-colors",
|
|
72
|
+
activeStepIndex === index ? "bg-primary text-primary-foreground border-primary" : "bg-card hover:bg-muted border-border"
|
|
73
|
+
),
|
|
74
|
+
children: editingIndex === index ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
|
|
75
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
76
|
+
input.Input,
|
|
77
|
+
{
|
|
78
|
+
value: editValue,
|
|
79
|
+
onChange: (e) => setEditValue(e.target.value),
|
|
80
|
+
onKeyDown: handleKeyDown,
|
|
81
|
+
className: "h-6 w-24 text-sm px-1",
|
|
82
|
+
autoFocus: true
|
|
83
|
+
}
|
|
84
|
+
),
|
|
85
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
86
|
+
button.Button,
|
|
87
|
+
{
|
|
88
|
+
variant: "ghost",
|
|
89
|
+
size: "icon",
|
|
90
|
+
className: "h-6 w-6",
|
|
91
|
+
onClick: handleConfirmEdit,
|
|
92
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-3 w-3" })
|
|
93
|
+
}
|
|
94
|
+
),
|
|
95
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
96
|
+
button.Button,
|
|
97
|
+
{
|
|
98
|
+
variant: "ghost",
|
|
99
|
+
size: "icon",
|
|
100
|
+
className: "h-6 w-6",
|
|
101
|
+
onClick: handleCancelEdit,
|
|
102
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-3 w-3" })
|
|
103
|
+
}
|
|
104
|
+
)
|
|
105
|
+
] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
106
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
107
|
+
"button",
|
|
108
|
+
{
|
|
109
|
+
type: "button",
|
|
110
|
+
onClick: () => onActiveStepChange(index),
|
|
111
|
+
className: "text-sm font-medium",
|
|
112
|
+
children: step.title
|
|
113
|
+
}
|
|
114
|
+
),
|
|
115
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
116
|
+
"div",
|
|
117
|
+
{
|
|
118
|
+
className: utils.cn(
|
|
119
|
+
"flex items-center gap-0.5 ml-1",
|
|
120
|
+
activeStepIndex === index ? "opacity-70 hover:opacity-100" : "opacity-0 group-hover:opacity-100"
|
|
121
|
+
),
|
|
122
|
+
children: [
|
|
123
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
124
|
+
button.Button,
|
|
125
|
+
{
|
|
126
|
+
variant: "ghost",
|
|
127
|
+
size: "icon",
|
|
128
|
+
className: utils.cn(
|
|
129
|
+
"h-5 w-5",
|
|
130
|
+
activeStepIndex === index ? "hover:bg-primary-foreground/20 text-primary-foreground" : "hover:bg-muted-foreground/20"
|
|
131
|
+
),
|
|
132
|
+
onClick: (e) => {
|
|
133
|
+
e.stopPropagation();
|
|
134
|
+
handleStartEdit(index, step.title);
|
|
135
|
+
},
|
|
136
|
+
title: "Rename step",
|
|
137
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pencil, { className: "h-3 w-3" })
|
|
138
|
+
}
|
|
139
|
+
),
|
|
140
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
141
|
+
button.Button,
|
|
142
|
+
{
|
|
143
|
+
variant: "ghost",
|
|
144
|
+
size: "icon",
|
|
145
|
+
className: utils.cn(
|
|
146
|
+
"h-5 w-5",
|
|
147
|
+
activeStepIndex === index ? "hover:bg-destructive/20 text-primary-foreground" : "hover:bg-destructive/20 hover:text-destructive"
|
|
148
|
+
),
|
|
149
|
+
onClick: (e) => {
|
|
150
|
+
e.stopPropagation();
|
|
151
|
+
onDeleteStep(index);
|
|
152
|
+
},
|
|
153
|
+
title: "Delete step",
|
|
154
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "h-3 w-3" })
|
|
155
|
+
}
|
|
156
|
+
)
|
|
157
|
+
]
|
|
158
|
+
}
|
|
159
|
+
)
|
|
160
|
+
] })
|
|
161
|
+
},
|
|
162
|
+
step.id
|
|
163
|
+
)),
|
|
164
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
165
|
+
button.Button,
|
|
166
|
+
{
|
|
167
|
+
variant: "outline",
|
|
168
|
+
size: "sm",
|
|
169
|
+
onClick: onAddStep,
|
|
170
|
+
className: "gap-1 h-8",
|
|
171
|
+
children: [
|
|
172
|
+
/* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "h-4 w-4" }),
|
|
173
|
+
"Add Step"
|
|
174
|
+
]
|
|
175
|
+
}
|
|
176
|
+
)
|
|
177
|
+
] });
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
exports.StepTabs = StepTabs;
|
|
@@ -0,0 +1,178 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
|
|
3
|
+
import { useState } from 'react';
|
|
4
|
+
import { Plus, Check, X, Pencil, Trash2 } from 'lucide-react';
|
|
5
|
+
import { cn } from '../../lib/utils.mjs';
|
|
6
|
+
import { Button } from '../button.mjs';
|
|
7
|
+
import { Input } from '../input.mjs';
|
|
8
|
+
|
|
9
|
+
function StepTabs({
|
|
10
|
+
steps,
|
|
11
|
+
activeStepIndex,
|
|
12
|
+
onActiveStepChange,
|
|
13
|
+
onAddStep,
|
|
14
|
+
onDeleteStep,
|
|
15
|
+
onRenameStep,
|
|
16
|
+
className,
|
|
17
|
+
hideStepControls
|
|
18
|
+
}) {
|
|
19
|
+
const [editingIndex, setEditingIndex] = useState(null);
|
|
20
|
+
const [editValue, setEditValue] = useState("");
|
|
21
|
+
const handleStartEdit = (index, currentTitle) => {
|
|
22
|
+
setEditingIndex(index);
|
|
23
|
+
setEditValue(currentTitle);
|
|
24
|
+
};
|
|
25
|
+
const handleConfirmEdit = () => {
|
|
26
|
+
if (editingIndex !== null && editValue.trim()) {
|
|
27
|
+
onRenameStep(editingIndex, editValue.trim());
|
|
28
|
+
}
|
|
29
|
+
setEditingIndex(null);
|
|
30
|
+
setEditValue("");
|
|
31
|
+
};
|
|
32
|
+
const handleCancelEdit = () => {
|
|
33
|
+
setEditingIndex(null);
|
|
34
|
+
setEditValue("");
|
|
35
|
+
};
|
|
36
|
+
const handleKeyDown = (e) => {
|
|
37
|
+
if (e.key === "Enter") {
|
|
38
|
+
handleConfirmEdit();
|
|
39
|
+
} else if (e.key === "Escape") {
|
|
40
|
+
handleCancelEdit();
|
|
41
|
+
}
|
|
42
|
+
};
|
|
43
|
+
if (hideStepControls) {
|
|
44
|
+
return null;
|
|
45
|
+
}
|
|
46
|
+
if (steps.length <= 1) {
|
|
47
|
+
return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2 mb-4", className), children: [
|
|
48
|
+
/* @__PURE__ */ jsxs(
|
|
49
|
+
Button,
|
|
50
|
+
{
|
|
51
|
+
variant: "outline",
|
|
52
|
+
size: "sm",
|
|
53
|
+
onClick: onAddStep,
|
|
54
|
+
className: "gap-1",
|
|
55
|
+
children: [
|
|
56
|
+
/* @__PURE__ */ jsx(Plus, { className: "h-4 w-4" }),
|
|
57
|
+
"Add Step"
|
|
58
|
+
]
|
|
59
|
+
}
|
|
60
|
+
),
|
|
61
|
+
/* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: "Add a step to create a multi-step form" })
|
|
62
|
+
] });
|
|
63
|
+
}
|
|
64
|
+
return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2 mb-4 flex-wrap", className), children: [
|
|
65
|
+
steps.map((step, index) => /* @__PURE__ */ jsx(
|
|
66
|
+
"div",
|
|
67
|
+
{
|
|
68
|
+
className: cn(
|
|
69
|
+
"group flex items-center gap-1 px-3 py-1.5 rounded-md border transition-colors",
|
|
70
|
+
activeStepIndex === index ? "bg-primary text-primary-foreground border-primary" : "bg-card hover:bg-muted border-border"
|
|
71
|
+
),
|
|
72
|
+
children: editingIndex === index ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
|
|
73
|
+
/* @__PURE__ */ jsx(
|
|
74
|
+
Input,
|
|
75
|
+
{
|
|
76
|
+
value: editValue,
|
|
77
|
+
onChange: (e) => setEditValue(e.target.value),
|
|
78
|
+
onKeyDown: handleKeyDown,
|
|
79
|
+
className: "h-6 w-24 text-sm px-1",
|
|
80
|
+
autoFocus: true
|
|
81
|
+
}
|
|
82
|
+
),
|
|
83
|
+
/* @__PURE__ */ jsx(
|
|
84
|
+
Button,
|
|
85
|
+
{
|
|
86
|
+
variant: "ghost",
|
|
87
|
+
size: "icon",
|
|
88
|
+
className: "h-6 w-6",
|
|
89
|
+
onClick: handleConfirmEdit,
|
|
90
|
+
children: /* @__PURE__ */ jsx(Check, { className: "h-3 w-3" })
|
|
91
|
+
}
|
|
92
|
+
),
|
|
93
|
+
/* @__PURE__ */ jsx(
|
|
94
|
+
Button,
|
|
95
|
+
{
|
|
96
|
+
variant: "ghost",
|
|
97
|
+
size: "icon",
|
|
98
|
+
className: "h-6 w-6",
|
|
99
|
+
onClick: handleCancelEdit,
|
|
100
|
+
children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" })
|
|
101
|
+
}
|
|
102
|
+
)
|
|
103
|
+
] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
104
|
+
/* @__PURE__ */ jsx(
|
|
105
|
+
"button",
|
|
106
|
+
{
|
|
107
|
+
type: "button",
|
|
108
|
+
onClick: () => onActiveStepChange(index),
|
|
109
|
+
className: "text-sm font-medium",
|
|
110
|
+
children: step.title
|
|
111
|
+
}
|
|
112
|
+
),
|
|
113
|
+
/* @__PURE__ */ jsxs(
|
|
114
|
+
"div",
|
|
115
|
+
{
|
|
116
|
+
className: cn(
|
|
117
|
+
"flex items-center gap-0.5 ml-1",
|
|
118
|
+
activeStepIndex === index ? "opacity-70 hover:opacity-100" : "opacity-0 group-hover:opacity-100"
|
|
119
|
+
),
|
|
120
|
+
children: [
|
|
121
|
+
/* @__PURE__ */ jsx(
|
|
122
|
+
Button,
|
|
123
|
+
{
|
|
124
|
+
variant: "ghost",
|
|
125
|
+
size: "icon",
|
|
126
|
+
className: cn(
|
|
127
|
+
"h-5 w-5",
|
|
128
|
+
activeStepIndex === index ? "hover:bg-primary-foreground/20 text-primary-foreground" : "hover:bg-muted-foreground/20"
|
|
129
|
+
),
|
|
130
|
+
onClick: (e) => {
|
|
131
|
+
e.stopPropagation();
|
|
132
|
+
handleStartEdit(index, step.title);
|
|
133
|
+
},
|
|
134
|
+
title: "Rename step",
|
|
135
|
+
children: /* @__PURE__ */ jsx(Pencil, { className: "h-3 w-3" })
|
|
136
|
+
}
|
|
137
|
+
),
|
|
138
|
+
/* @__PURE__ */ jsx(
|
|
139
|
+
Button,
|
|
140
|
+
{
|
|
141
|
+
variant: "ghost",
|
|
142
|
+
size: "icon",
|
|
143
|
+
className: cn(
|
|
144
|
+
"h-5 w-5",
|
|
145
|
+
activeStepIndex === index ? "hover:bg-destructive/20 text-primary-foreground" : "hover:bg-destructive/20 hover:text-destructive"
|
|
146
|
+
),
|
|
147
|
+
onClick: (e) => {
|
|
148
|
+
e.stopPropagation();
|
|
149
|
+
onDeleteStep(index);
|
|
150
|
+
},
|
|
151
|
+
title: "Delete step",
|
|
152
|
+
children: /* @__PURE__ */ jsx(Trash2, { className: "h-3 w-3" })
|
|
153
|
+
}
|
|
154
|
+
)
|
|
155
|
+
]
|
|
156
|
+
}
|
|
157
|
+
)
|
|
158
|
+
] })
|
|
159
|
+
},
|
|
160
|
+
step.id
|
|
161
|
+
)),
|
|
162
|
+
/* @__PURE__ */ jsxs(
|
|
163
|
+
Button,
|
|
164
|
+
{
|
|
165
|
+
variant: "outline",
|
|
166
|
+
size: "sm",
|
|
167
|
+
onClick: onAddStep,
|
|
168
|
+
className: "gap-1 h-8",
|
|
169
|
+
children: [
|
|
170
|
+
/* @__PURE__ */ jsx(Plus, { className: "h-4 w-4" }),
|
|
171
|
+
"Add Step"
|
|
172
|
+
]
|
|
173
|
+
}
|
|
174
|
+
)
|
|
175
|
+
] });
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
export { StepTabs };
|