@sfxcode/nuxt-ui-formkit 1.0.5 → 1.0.7

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.
Files changed (11) hide show
  1. package/dist/module.json +1 -1
  2. package/dist/runtime/components/FUDataDebug.d.vue.ts +2 -2
  3. package/dist/runtime/components/FUDataDebug.vue +21 -10
  4. package/dist/runtime/components/FUDataDebug.vue.d.ts +2 -2
  5. package/dist/runtime/components/FUDataEdit.vue +2 -2
  6. package/dist/runtime/components/FUDataView.vue +1 -1
  7. package/dist/runtime/formkit/definitions/repeater.js +148 -65
  8. package/dist/runtime/formkit/definitions/repeater.mjs +148 -65
  9. package/dist/runtime/plugin.js +3 -0
  10. package/dist/runtime/utils/useFormKitInput.d.ts +1 -1
  11. package/package.json +4 -4
package/dist/module.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "compatibility": {
5
5
  "nuxt": ">=4.0.0"
6
6
  },
7
- "version": "1.0.5",
7
+ "version": "1.0.7",
8
8
  "builder": {
9
9
  "@nuxt/module-builder": "1.0.2",
10
10
  "unbuild": "3.6.1"
package/dist/runtime/components/FUDataDebug.d.vue.ts CHANGED
@@ -1,6 +1,6 @@
1
- declare var __VLS_7: {};
1
+ declare var __VLS_19: {};
2
2
  type __VLS_Slots = {} & {
3
- default?: (props: typeof __VLS_7) => any;
3
+ default?: (props: typeof __VLS_19) => any;
4
4
  };
5
5
  declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
6
6
  data: {
package/dist/runtime/components/FUDataDebug.vue CHANGED
@@ -6,7 +6,7 @@ defineProps({
6
6
  },
7
7
  header: {
8
8
  type: String,
9
- default: "Debug"
9
+ default: "Debug Data"
10
10
  },
11
11
  textClass: {
12
12
  type: String,
@@ -18,15 +18,26 @@ defineProps({
18
18
  <template>
19
19
  <div class="formkit-debug">
20
20
  <client-only>
21
- <h3 class="text-lg font-semibold mb-2">
22
- {{ header }}
23
- </h3>
24
- <slot />
25
- <pre
26
- v-if="data"
27
- :class="textClass"
28
- >{{ data }}</pre>
29
- <span v-else>No Data available</span>
21
+ <UCollapsible class="flex flex-col gap-2">
22
+ <UButton
23
+ :label="header"
24
+ color="neutral"
25
+ variant="outline"
26
+ leading-icon="i-lucide-bug"
27
+ trailing-icon="i-lucide-chevron-down"
28
+ block
29
+ />
30
+ <template #content>
31
+ <div>
32
+ <slot />
33
+ </div>
34
+ <pre
35
+ v-if="data"
36
+ :class="textClass"
37
+ >{{ data }}</pre>
38
+ <span v-else>No Data available</span>
39
+ </template>
40
+ </UCollapsible>
30
41
  </client-only>
31
42
  </div>
32
43
  </template>
package/dist/runtime/components/FUDataDebug.vue.d.ts CHANGED
@@ -1,6 +1,6 @@
1
- declare var __VLS_7: {};
1
+ declare var __VLS_19: {};
2
2
  type __VLS_Slots = {} & {
3
- default?: (props: typeof __VLS_7) => any;
3
+ default?: (props: typeof __VLS_19) => any;
4
4
  };
5
5
  declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
6
6
  data: {
package/dist/runtime/components/FUDataEdit.vue CHANGED
@@ -140,12 +140,12 @@ function handleReset() {
140
140
  <FUDataDebug
141
141
  v-if="debugData"
142
142
  :data="formData"
143
- header="Data"
143
+ header="Debug Data"
144
144
  />
145
145
  <FUDataDebug
146
146
  v-if="debugSchema"
147
147
  :data="formSchema"
148
- header="Schema"
148
+ header="Debug Schema"
149
149
  />
150
150
  </div>
151
151
  </template>
package/dist/runtime/components/FUDataView.vue CHANGED
@@ -58,7 +58,7 @@ if (props.data) {
58
58
  <FuDataDebug
59
59
  v-if="debugData"
60
60
  :data="formData"
61
- header="Data"
61
+ header="Debug Data"
62
62
  />
63
63
  <FuDataDebug
64
64
  v-if="debugSchema"
package/dist/runtime/formkit/definitions/repeater.js CHANGED
@@ -2,35 +2,52 @@ import { createInput } from "@formkit/vue";
2
2
  import { useFormKitSchema } from "../../composables/useFormKitSchema.js";
3
3
  const { addList, addElement, addListGroup, addComponent } = useFormKitSchema();
4
4
  function addButtonGroup(buttonGroupClass = "", buttonGroupItemClass = "", buttonSize, render = "true") {
5
- const addActionButtonComponent = (onClick = "", icon = "", color = "", render2 = "true", disabled) => {
5
+ const addActionButtonComponent = (onClick = "", icon = "", color = "", render2 = "true", disabled = "false") => {
6
6
  return addElement("div", [addComponent("UButton", { onClick, icon, color, disabled, size: buttonSize })], { class: buttonGroupItemClass }, render2);
7
7
  };
8
8
  return addElement("div", [
9
9
  addActionButtonComponent("$moveNodeUp($node.parent, $index)", "i-lucide-arrow-up", "primary", "$renderMoveButtons", "$index === 0"),
10
- addActionButtonComponent("$removeNode($node.parent, $index)", "i-lucide-trash", "error", "$displayDeleteButton"),
11
- addActionButtonComponent("$cloneNode($node.parent, $index)", "i-lucide-copy", "secondary", "$displayCloneButton"),
12
- addActionButtonComponent("$addNode($node.parent, $index)", "i-lucide-plus", "secondary", "$displayAddButton"),
10
+ addActionButtonComponent("$removeNode($node.parent, $index)", "i-lucide-trash", "error", "$displayDeleteButton", "$node.parent.value.length === $minItems"),
11
+ addActionButtonComponent("$cloneNode($node.parent, $index)", "i-lucide-copy", "secondary", "$displayCloneButton", "$node.parent.value.length > $maxItems -1"),
12
+ addActionButtonComponent("$addNode($node.parent, $index)", "i-lucide-plus", "secondary", "$displayAddButton", "$node.parent.value.length > $maxItems -1"),
13
13
  addActionButtonComponent("$moveNodeDown($node.parent, $index)", "i-lucide-arrow-down", "primary", "$renderMoveButtons", "$index === $node.parent.value.length -1")
14
14
  ], { class: buttonGroupClass }, render);
15
15
  }
16
16
  function addInsertButton(label = "Add Item", icon = "i-lucide-plus", styleClass = "", buttonSize, render = "true") {
17
17
  return addElement("div", [
18
- addComponent("UButton", { onClick: "$insertNode($node)", label, icon, size: buttonSize })
18
+ addComponent("UButton", { onClick: "$insertNode($node)", label, icon, size: buttonSize, disabled: "$node.value.length > $maxItems -1" })
19
19
  ], { class: styleClass }, render);
20
20
  }
21
+ function addDragHandle(handleClass = "", iconName = "", render = "true") {
22
+ return addElement("span", [
23
+ addComponent("UIcon", { name: iconName })
24
+ ], {
25
+ "class": handleClass,
26
+ "aria-label": "Drag to reorder"
27
+ }, render);
28
+ }
21
29
  export const nuxtUIRepeaterDefinition = createInput(
22
- addElement("ul", [
30
+ addElement("div", [
23
31
  addList("$listName", [
24
32
  addInsertButton("$insertButtonLabel", "i-lucide-plus", "$insertButtonClass", "$insertButtonSize", "$node.children.length == 0 || $alwaysDisplayInsertButton"),
25
33
  addListGroup([
26
- addElement(
27
- "li",
28
- [{ children: "$slots.default" }, addButtonGroup("$buttonGroupClass", "$buttonGroupItemClass", "$buttonSize", "$renderButtons")],
29
- { class: "$internalListItemClass" }
30
- )
34
+ addElement("div", [
35
+ addDragHandle("$internalDragHandleClass", "$dragHandleIconName", "$renderDragHandle"),
36
+ { children: "$slots.default" },
37
+ addButtonGroup("$buttonGroupClass", "$buttonGroupItemClass", "$buttonSize", "$renderButtons")
38
+ ], {
39
+ id: "$getListItemId($index)",
40
+ class: "$getListItemClass($index)",
41
+ draggable: "$draggable",
42
+ onDragstart: "$dragNodeStart($node.parent, $index)",
43
+ onDragover: "$dragNodeOver($index)",
44
+ onDragleave: "$dragNodeLeave($index)",
45
+ onDrop: "$dropNode($node.parent, $index)",
46
+ onDragend: "$dragNodeEnd"
47
+ })
31
48
  ], true, {})
32
49
  ], true, "true")
33
- ], { class: "$internalListClass" }, true),
50
+ ], { class: "$internalListClass", id: "$internalListId" }, true),
34
51
  {
35
52
  props: [
36
53
  "insertButtonLabel",
@@ -47,66 +64,132 @@ export const nuxtUIRepeaterDefinition = createInput(
47
64
  "buttonSize",
48
65
  "displayCloneButton",
49
66
  "displayAddButton",
50
- "displayDeleteButton"
67
+ "displayDeleteButton",
68
+ "minItems",
69
+ "maxItems",
70
+ "draggable",
71
+ "displayDragHandle",
72
+ "dragHandleClass",
73
+ "dragHandleIconName"
51
74
  ],
52
75
  features: [addRepeaterHandler]
53
76
  }
54
77
  );
55
78
  function addRepeaterHandler(node) {
56
79
  const swapElements = (array, index1, index2) => {
57
- const newArray = [...array];
58
- const temp = newArray[index1];
59
- newArray[index1] = newArray[index2];
60
- newArray[index2] = temp;
61
- return newArray;
80
+ const [element] = array.splice(index1, 1);
81
+ if (element !== void 0) {
82
+ array.splice(index2, 0, element);
83
+ }
84
+ return array;
62
85
  };
86
+ const uuid = typeof crypto !== "undefined" && crypto.randomUUID ? crypto.randomUUID() : Math.random().toString(36).slice(2);
63
87
  node.on("created", () => {
64
- node.context.listName = node.name;
65
- node.context.renderButtons = !node.context.hideButtonGroup;
66
- node.context.insertButtonSize = node.context.insertButtonSize ? node.context.insertButtonSize : "md";
67
- node.context.buttonSize = node.context.buttonSize ? node.context.buttonSize : "md";
68
- node.context.renderMoveButtons = !node.context.hideMoveButtons;
69
- node.context.internalListClass = node.context.listClass ? `formkit-items ${node.context.listClass}` : "formkit-items";
70
- node.context.internalListItemClass = node.context.listItemClass ? `formkit-item ${node.context.listItemClass}` : "formkit-item";
71
- node.context.insertNode = (parentNode) => () => {
72
- if (parentNode && parentNode._value instanceof Array) {
73
- const item = node.context.newItem ? { ...node.context.newItem } : {};
74
- const newArray = [item, ...parentNode._value];
75
- parentNode.input(newArray, false);
76
- }
77
- };
78
- node.context.removeNode = (parentNode, index) => () => {
79
- if (parentNode && parentNode._value instanceof Array) {
80
- parentNode.input(parentNode._value.filter((_, i) => i !== index), false);
81
- }
82
- };
83
- node.context.addNode = (parentNode, index) => () => {
84
- if (parentNode && parentNode._value instanceof Array) {
85
- const item = node.context.newItem ? { ...node.context.newItem } : {};
86
- const newArray = [...parentNode._value.slice(0, index + 1), { ...item }, ...parentNode._value.slice(index + 1)];
87
- parentNode.input([...newArray], false);
88
- }
89
- };
90
- node.context.cloneNode = (parentNode, index) => () => {
91
- if (parentNode && parentNode._value instanceof Array) {
92
- const item = parentNode._value[index];
93
- const newArray = [...parentNode._value.slice(0, index + 1), { ...item }, ...parentNode._value.slice(index + 1)];
94
- parentNode.input([...newArray], false);
95
- }
96
- };
97
- node.context.moveNodeUp = (parentNode, index) => () => {
98
- if (parentNode && parentNode._value instanceof Array) {
99
- const array = [...parentNode._value];
100
- if (index > 0)
101
- parentNode.input(swapElements(array, index - 1, index), false);
102
- }
103
- };
104
- node.context.moveNodeDown = (parentNode, index) => () => {
105
- if (parentNode && parentNode._value instanceof Array) {
106
- const array = [...parentNode._value];
107
- if (index < array.length - 1)
108
- parentNode.input(swapElements(array, index, index + 1), false);
109
- }
110
- };
88
+ if (node.context) {
89
+ let dragStartIndex = null;
90
+ let dragOverIndex = null;
91
+ const newItem = node.context.newItem || {};
92
+ node.context.listName = node.name;
93
+ node.context.renderButtons = !node.context.hideButtonGroup;
94
+ node.context.insertButtonSize = node.context.insertButtonSize ? node.context.insertButtonSize : "md";
95
+ node.context.buttonSize = node.context.buttonSize ? node.context.buttonSize : "md";
96
+ node.context.renderMoveButtons = !node.context.hideMoveButtons;
97
+ node.context.draggable = !!node.context.draggable;
98
+ node.context.renderDragHandle = !!node.context.displayDragHandle;
99
+ node.context.dragHandleIconName = node.context.dragHandleIconName || "i-lucide-grip-vertical";
100
+ node.context.internalDragHandleClass = node.context.dragHandleClass ? `formkit-repeater-drag-handle ${node.context.dragHandleClass}` : "formkit-repeater-drag-handle";
101
+ node.context.internalListClass = node.context.listClass ? `formkit-items ${node.context.listClass}` : "formkit-items";
102
+ node.context.internalListItemClass = node.context.listItemClass ? `formkit-item ${node.context.listItemClass}` : "formkit-item";
103
+ node.context.internalListId = `formkit-items-${uuid}`;
104
+ node.context.minItems = node.context.minItems !== void 0 ? node.context.minItems : 0;
105
+ node.context.maxItems = node.context.maxItems !== void 0 ? node.context.maxItems : Number.POSITIVE_INFINITY;
106
+ node.context.getListItemClass = (index) => {
107
+ if (dragOverIndex === index && dragStartIndex !== index)
108
+ return `${node.context?.internalListItemClass} formkit-repeater-drop-target`;
109
+ return node.context?.internalListItemClass?.toString() ?? "";
110
+ };
111
+ node.context.getListItemId = (index) => {
112
+ return `formkit-item-${index}-${uuid}`;
113
+ };
114
+ node.context.insertNode = (parentNode) => () => {
115
+ if (parentNode && Array.isArray(parentNode._value)) {
116
+ const newArray = [{ ...newItem }, ...parentNode.value];
117
+ parentNode.input(newArray, false);
118
+ }
119
+ };
120
+ node.context.removeNode = (parentNode, index) => () => {
121
+ if (parentNode && Array.isArray(parentNode._value)) {
122
+ parentNode.input(parentNode._value.filter((_, i) => i !== index), false);
123
+ }
124
+ };
125
+ node.context.addNode = (parentNode, index) => () => {
126
+ if (parentNode && Array.isArray(parentNode._value)) {
127
+ const array = parentNode.value;
128
+ array.splice(index + 1, 0, { ...newItem });
129
+ parentNode.input(array, false);
130
+ }
131
+ };
132
+ node.context.cloneNode = (parentNode, index) => () => {
133
+ if (parentNode && Array.isArray(parentNode._value)) {
134
+ const item = parentNode.value[index];
135
+ const array = parentNode.value;
136
+ array.splice(index + 1, 0, { ...item });
137
+ parentNode.input(array, false);
138
+ }
139
+ };
140
+ node.context.moveNodeUp = (parentNode, index) => () => {
141
+ if (parentNode && Array.isArray(parentNode._value)) {
142
+ if (index > 0)
143
+ parentNode.input(swapElements(parentNode.value, index - 1, index), false);
144
+ }
145
+ };
146
+ node.context.moveNodeDown = (parentNode, index) => () => {
147
+ if (parentNode && Array.isArray(parentNode._value)) {
148
+ if (index < parentNode.value.length - 1)
149
+ parentNode.input(swapElements(parentNode.value, index, index + 1), false);
150
+ }
151
+ };
152
+ node.context.dragNodeStart = (_parentNode, index) => (event) => {
153
+ dragStartIndex = index;
154
+ if (event?.dataTransfer) {
155
+ event.dataTransfer.effectAllowed = "move";
156
+ event.dataTransfer.setData("text/plain", String(index));
157
+ }
158
+ };
159
+ node.context.dragNodeOver = (targetIndex) => (event) => {
160
+ event?.preventDefault();
161
+ dragOverIndex = targetIndex;
162
+ if (event?.dataTransfer)
163
+ event.dataTransfer.dropEffect = "move";
164
+ };
165
+ node.context.dragNodeLeave = (targetIndex) => () => {
166
+ if (dragOverIndex === targetIndex)
167
+ dragOverIndex = null;
168
+ };
169
+ node.context.dropNode = (parentNode, targetIndex) => (event) => {
170
+ event?.preventDefault();
171
+ if (!parentNode || !Array.isArray(parentNode._value)) {
172
+ dragOverIndex = null;
173
+ return;
174
+ }
175
+ const sourceFromEvent = Number.parseInt(event?.dataTransfer?.getData("text/plain") || "", 10);
176
+ const sourceIndex = Number.isInteger(sourceFromEvent) ? sourceFromEvent : dragStartIndex;
177
+ if (sourceIndex === null || sourceIndex === targetIndex) {
178
+ dragOverIndex = null;
179
+ return;
180
+ }
181
+ if (sourceIndex < 0 || sourceIndex >= parentNode.value.length) {
182
+ dragOverIndex = null;
183
+ return;
184
+ }
185
+ parentNode.input(swapElements(parentNode.value, sourceIndex, targetIndex), false);
186
+ dragStartIndex = null;
187
+ dragOverIndex = null;
188
+ };
189
+ node.context.dragNodeEnd = () => {
190
+ dragStartIndex = null;
191
+ dragOverIndex = null;
192
+ };
193
+ }
111
194
  });
112
195
  }
package/dist/runtime/formkit/definitions/repeater.mjs CHANGED
@@ -2,35 +2,52 @@ import { createInput } from "@formkit/vue";
2
2
  import { useFormKitSchema } from "../../composables/useFormKitSchema";
3
3
  const { addList, addElement, addListGroup, addComponent } = useFormKitSchema();
4
4
  function addButtonGroup(buttonGroupClass = "", buttonGroupItemClass = "", buttonSize, render = "true") {
5
- const addActionButtonComponent = (onClick = "", icon = "", color = "", render2 = "true", disabled) => {
5
+ const addActionButtonComponent = (onClick = "", icon = "", color = "", render2 = "true", disabled = "false") => {
6
6
  return addElement("div", [addComponent("UButton", { onClick, icon, color, disabled, size: buttonSize })], { class: buttonGroupItemClass }, render2);
7
7
  };
8
8
  return addElement("div", [
9
9
  addActionButtonComponent("$moveNodeUp($node.parent, $index)", "i-lucide-arrow-up", "primary", "$renderMoveButtons", "$index === 0"),
10
- addActionButtonComponent("$removeNode($node.parent, $index)", "i-lucide-trash", "error", "$displayDeleteButton"),
11
- addActionButtonComponent("$cloneNode($node.parent, $index)", "i-lucide-copy", "secondary", "$displayCloneButton"),
12
- addActionButtonComponent("$addNode($node.parent, $index)", "i-lucide-plus", "secondary", "$displayAddButton"),
10
+ addActionButtonComponent("$removeNode($node.parent, $index)", "i-lucide-trash", "error", "$displayDeleteButton", "$node.parent.value.length === $minItems"),
11
+ addActionButtonComponent("$cloneNode($node.parent, $index)", "i-lucide-copy", "secondary", "$displayCloneButton", "$node.parent.value.length > $maxItems -1"),
12
+ addActionButtonComponent("$addNode($node.parent, $index)", "i-lucide-plus", "secondary", "$displayAddButton", "$node.parent.value.length > $maxItems -1"),
13
13
  addActionButtonComponent("$moveNodeDown($node.parent, $index)", "i-lucide-arrow-down", "primary", "$renderMoveButtons", "$index === $node.parent.value.length -1")
14
14
  ], { class: buttonGroupClass }, render);
15
15
  }
16
16
  function addInsertButton(label = "Add Item", icon = "i-lucide-plus", styleClass = "", buttonSize, render = "true") {
17
17
  return addElement("div", [
18
- addComponent("UButton", { onClick: "$insertNode($node)", label, icon, size: buttonSize })
18
+ addComponent("UButton", { onClick: "$insertNode($node)", label, icon, size: buttonSize, disabled: "$node.value.length > $maxItems -1" })
19
19
  ], { class: styleClass }, render);
20
20
  }
21
+ function addDragHandle(handleClass = "", iconName = "", render = "true") {
22
+ return addElement("span", [
23
+ addComponent("UIcon", { name: iconName })
24
+ ], {
25
+ "class": handleClass,
26
+ "aria-label": "Drag to reorder"
27
+ }, render);
28
+ }
21
29
  export const nuxtUIRepeaterDefinition = createInput(
22
- addElement("ul", [
30
+ addElement("div", [
23
31
  addList("$listName", [
24
32
  addInsertButton("$insertButtonLabel", "i-lucide-plus", "$insertButtonClass", "$insertButtonSize", "$node.children.length == 0 || $alwaysDisplayInsertButton"),
25
33
  addListGroup([
26
- addElement(
27
- "li",
28
- [{ children: "$slots.default" }, addButtonGroup("$buttonGroupClass", "$buttonGroupItemClass", "$buttonSize", "$renderButtons")],
29
- { class: "$internalListItemClass" }
30
- )
34
+ addElement("div", [
35
+ addDragHandle("$internalDragHandleClass", "$dragHandleIconName", "$renderDragHandle"),
36
+ { children: "$slots.default" },
37
+ addButtonGroup("$buttonGroupClass", "$buttonGroupItemClass", "$buttonSize", "$renderButtons")
38
+ ], {
39
+ id: "$getListItemId($index)",
40
+ class: "$getListItemClass($index)",
41
+ draggable: "$draggable",
42
+ onDragstart: "$dragNodeStart($node.parent, $index)",
43
+ onDragover: "$dragNodeOver($index)",
44
+ onDragleave: "$dragNodeLeave($index)",
45
+ onDrop: "$dropNode($node.parent, $index)",
46
+ onDragend: "$dragNodeEnd"
47
+ })
31
48
  ], true, {})
32
49
  ], true, "true")
33
- ], { class: "$internalListClass" }, true),
50
+ ], { class: "$internalListClass", id: "$internalListId" }, true),
34
51
  {
35
52
  props: [
36
53
  "insertButtonLabel",
@@ -47,66 +64,132 @@ export const nuxtUIRepeaterDefinition = createInput(
47
64
  "buttonSize",
48
65
  "displayCloneButton",
49
66
  "displayAddButton",
50
- "displayDeleteButton"
67
+ "displayDeleteButton",
68
+ "minItems",
69
+ "maxItems",
70
+ "draggable",
71
+ "displayDragHandle",
72
+ "dragHandleClass",
73
+ "dragHandleIconName"
51
74
  ],
52
75
  features: [addRepeaterHandler]
53
76
  }
54
77
  );
55
78
  function addRepeaterHandler(node) {
56
79
  const swapElements = (array, index1, index2) => {
57
- const newArray = [...array];
58
- const temp = newArray[index1];
59
- newArray[index1] = newArray[index2];
60
- newArray[index2] = temp;
61
- return newArray;
80
+ const [element] = array.splice(index1, 1);
81
+ if (element !== void 0) {
82
+ array.splice(index2, 0, element);
83
+ }
84
+ return array;
62
85
  };
86
+ const uuid = typeof crypto !== "undefined" && crypto.randomUUID ? crypto.randomUUID() : Math.random().toString(36).slice(2);
63
87
  node.on("created", () => {
64
- node.context.listName = node.name;
65
- node.context.renderButtons = !node.context.hideButtonGroup;
66
- node.context.insertButtonSize = node.context.insertButtonSize ? node.context.insertButtonSize : "md";
67
- node.context.buttonSize = node.context.buttonSize ? node.context.buttonSize : "md";
68
- node.context.renderMoveButtons = !node.context.hideMoveButtons;
69
- node.context.internalListClass = node.context.listClass ? `formkit-items ${node.context.listClass}` : "formkit-items";
70
- node.context.internalListItemClass = node.context.listItemClass ? `formkit-item ${node.context.listItemClass}` : "formkit-item";
71
- node.context.insertNode = (parentNode) => () => {
72
- if (parentNode && parentNode._value instanceof Array) {
73
- const item = node.context.newItem ? { ...node.context.newItem } : {};
74
- const newArray = [item, ...parentNode._value];
75
- parentNode.input(newArray, false);
76
- }
77
- };
78
- node.context.removeNode = (parentNode, index) => () => {
79
- if (parentNode && parentNode._value instanceof Array) {
80
- parentNode.input(parentNode._value.filter((_, i) => i !== index), false);
81
- }
82
- };
83
- node.context.addNode = (parentNode, index) => () => {
84
- if (parentNode && parentNode._value instanceof Array) {
85
- const item = node.context.newItem ? { ...node.context.newItem } : {};
86
- const newArray = [...parentNode._value.slice(0, index + 1), { ...item }, ...parentNode._value.slice(index + 1)];
87
- parentNode.input([...newArray], false);
88
- }
89
- };
90
- node.context.cloneNode = (parentNode, index) => () => {
91
- if (parentNode && parentNode._value instanceof Array) {
92
- const item = parentNode._value[index];
93
- const newArray = [...parentNode._value.slice(0, index + 1), { ...item }, ...parentNode._value.slice(index + 1)];
94
- parentNode.input([...newArray], false);
95
- }
96
- };
97
- node.context.moveNodeUp = (parentNode, index) => () => {
98
- if (parentNode && parentNode._value instanceof Array) {
99
- const array = [...parentNode._value];
100
- if (index > 0)
101
- parentNode.input(swapElements(array, index - 1, index), false);
102
- }
103
- };
104
- node.context.moveNodeDown = (parentNode, index) => () => {
105
- if (parentNode && parentNode._value instanceof Array) {
106
- const array = [...parentNode._value];
107
- if (index < array.length - 1)
108
- parentNode.input(swapElements(array, index, index + 1), false);
109
- }
110
- };
88
+ if (node.context) {
89
+ let dragStartIndex = null;
90
+ let dragOverIndex = null;
91
+ const newItem = node.context.newItem || {};
92
+ node.context.listName = node.name;
93
+ node.context.renderButtons = !node.context.hideButtonGroup;
94
+ node.context.insertButtonSize = node.context.insertButtonSize ? node.context.insertButtonSize : "md";
95
+ node.context.buttonSize = node.context.buttonSize ? node.context.buttonSize : "md";
96
+ node.context.renderMoveButtons = !node.context.hideMoveButtons;
97
+ node.context.draggable = !!node.context.draggable;
98
+ node.context.renderDragHandle = !!node.context.displayDragHandle;
99
+ node.context.dragHandleIconName = node.context.dragHandleIconName || "i-lucide-grip-vertical";
100
+ node.context.internalDragHandleClass = node.context.dragHandleClass ? `formkit-repeater-drag-handle ${node.context.dragHandleClass}` : "formkit-repeater-drag-handle";
101
+ node.context.internalListClass = node.context.listClass ? `formkit-items ${node.context.listClass}` : "formkit-items";
102
+ node.context.internalListItemClass = node.context.listItemClass ? `formkit-item ${node.context.listItemClass}` : "formkit-item";
103
+ node.context.internalListId = `formkit-items-${uuid}`;
104
+ node.context.minItems = node.context.minItems !== void 0 ? node.context.minItems : 0;
105
+ node.context.maxItems = node.context.maxItems !== void 0 ? node.context.maxItems : Number.POSITIVE_INFINITY;
106
+ node.context.getListItemClass = (index) => {
107
+ if (dragOverIndex === index && dragStartIndex !== index)
108
+ return `${node.context?.internalListItemClass} formkit-repeater-drop-target`;
109
+ return node.context?.internalListItemClass?.toString() ?? "";
110
+ };
111
+ node.context.getListItemId = (index) => {
112
+ return `formkit-item-${index}-${uuid}`;
113
+ };
114
+ node.context.insertNode = (parentNode) => () => {
115
+ if (parentNode && Array.isArray(parentNode._value)) {
116
+ const newArray = [{ ...newItem }, ...parentNode.value];
117
+ parentNode.input(newArray, false);
118
+ }
119
+ };
120
+ node.context.removeNode = (parentNode, index) => () => {
121
+ if (parentNode && Array.isArray(parentNode._value)) {
122
+ parentNode.input(parentNode._value.filter((_, i) => i !== index), false);
123
+ }
124
+ };
125
+ node.context.addNode = (parentNode, index) => () => {
126
+ if (parentNode && Array.isArray(parentNode._value)) {
127
+ const array = parentNode.value;
128
+ array.splice(index + 1, 0, { ...newItem });
129
+ parentNode.input(array, false);
130
+ }
131
+ };
132
+ node.context.cloneNode = (parentNode, index) => () => {
133
+ if (parentNode && Array.isArray(parentNode._value)) {
134
+ const item = parentNode.value[index];
135
+ const array = parentNode.value;
136
+ array.splice(index + 1, 0, { ...item });
137
+ parentNode.input(array, false);
138
+ }
139
+ };
140
+ node.context.moveNodeUp = (parentNode, index) => () => {
141
+ if (parentNode && Array.isArray(parentNode._value)) {
142
+ if (index > 0)
143
+ parentNode.input(swapElements(parentNode.value, index - 1, index), false);
144
+ }
145
+ };
146
+ node.context.moveNodeDown = (parentNode, index) => () => {
147
+ if (parentNode && Array.isArray(parentNode._value)) {
148
+ if (index < parentNode.value.length - 1)
149
+ parentNode.input(swapElements(parentNode.value, index, index + 1), false);
150
+ }
151
+ };
152
+ node.context.dragNodeStart = (_parentNode, index) => (event) => {
153
+ dragStartIndex = index;
154
+ if (event?.dataTransfer) {
155
+ event.dataTransfer.effectAllowed = "move";
156
+ event.dataTransfer.setData("text/plain", String(index));
157
+ }
158
+ };
159
+ node.context.dragNodeOver = (targetIndex) => (event) => {
160
+ event?.preventDefault();
161
+ dragOverIndex = targetIndex;
162
+ if (event?.dataTransfer)
163
+ event.dataTransfer.dropEffect = "move";
164
+ };
165
+ node.context.dragNodeLeave = (targetIndex) => () => {
166
+ if (dragOverIndex === targetIndex)
167
+ dragOverIndex = null;
168
+ };
169
+ node.context.dropNode = (parentNode, targetIndex) => (event) => {
170
+ event?.preventDefault();
171
+ if (!parentNode || !Array.isArray(parentNode._value)) {
172
+ dragOverIndex = null;
173
+ return;
174
+ }
175
+ const sourceFromEvent = Number.parseInt(event?.dataTransfer?.getData("text/plain") || "", 10);
176
+ const sourceIndex = Number.isInteger(sourceFromEvent) ? sourceFromEvent : dragStartIndex;
177
+ if (sourceIndex === null || sourceIndex === targetIndex) {
178
+ dragOverIndex = null;
179
+ return;
180
+ }
181
+ if (sourceIndex < 0 || sourceIndex >= parentNode.value.length) {
182
+ dragOverIndex = null;
183
+ return;
184
+ }
185
+ parentNode.input(swapElements(parentNode.value, sourceIndex, targetIndex), false);
186
+ dragStartIndex = null;
187
+ dragOverIndex = null;
188
+ };
189
+ node.context.dragNodeEnd = () => {
190
+ dragStartIndex = null;
191
+ dragOverIndex = null;
192
+ };
193
+ }
111
194
  });
112
195
  }
package/dist/runtime/plugin.js CHANGED
@@ -1,3 +1,6 @@
1
1
  import { defineNuxtPlugin } from "#app";
2
+ import { UButton, UIcon } from "#components";
2
3
  export default defineNuxtPlugin((_nuxtApp) => {
4
+ _nuxtApp.vueApp.component("UButton", UButton);
5
+ _nuxtApp.vueApp.component("UIcon", UIcon);
3
6
  });
package/dist/runtime/utils/useFormKitInput.d.ts CHANGED
@@ -3,7 +3,7 @@ export declare function useFormKitInput(context: FormKitFrameworkContext): {
3
3
  isInvalid: import("vue").ComputedRef<any>;
4
4
  validSlotNames: import("vue").ComputedRef<string[]>;
5
5
  styleClass: import("vue").ComputedRef<string>;
6
- color: import("vue").ComputedRef<"primary" | "secondary" | "success" | "info" | "warning" | "error" | "neutral">;
6
+ color: import("vue").ComputedRef<"neutral" | "primary" | "secondary" | "success" | "info" | "warning" | "error">;
7
7
  handleBlur: (event: FocusEvent) => void;
8
8
  handleChange: (_: unknown) => void;
9
9
  handleInput: (_: unknown) => void;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sfxcode/nuxt-ui-formkit",
3
- "version": "1.0.5",
3
+ "version": "1.0.7",
4
4
  "description": "FormKit integration for Nuxt UI - Seamlessly connect FormKit form handling with Nuxt UI components",
5
5
  "author": {
6
6
  "name": "Tom",
@@ -90,7 +90,7 @@
90
90
  "dependencies": {
91
91
  "@formkit/addons": "^2.0.0",
92
92
  "@formkit/nuxt": "^2.0.0",
93
- "@nuxt/kit": "^4.4.7",
93
+ "@nuxt/kit": "4.4.6",
94
94
  "@nuxt/ui": "^4.8.2",
95
95
  "@vue/compiler-dom": "^3.5.35"
96
96
  },
@@ -101,7 +101,7 @@
101
101
  "@nuxt/devtools": "4.0.0-alpha.7",
102
102
  "@nuxt/eslint-config": "^1.15.2",
103
103
  "@nuxt/module-builder": "^1.0.2",
104
- "@nuxt/schema": "^4.4.7",
104
+ "@nuxt/schema": "4.4.6",
105
105
  "@nuxt/test-utils": "^4.0.3",
106
106
  "@types/node": "latest",
107
107
  "@vitejs/plugin-vue": "^6.0.7",
@@ -109,7 +109,7 @@
109
109
  "eslint": "^10.4.1",
110
110
  "jsdom": "^29.1.1",
111
111
  "mkdist": "^2.4.1",
112
- "nuxt": "^4.4.7",
112
+ "nuxt": "4.4.6",
113
113
  "sass-embedded": "^1.100.0",
114
114
  "typescript": "~6.0.3",
115
115
  "unbuild": "^3.6.1",