@sfxcode/nuxt-ui-formkit 1.0.1 → 1.0.3

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 (5) hide show
  1. package/README.md +9 -5
  2. package/dist/module.json +1 -1
  3. package/dist/runtime/formkit/definitions/repeater.js +63 -35
  4. package/dist/runtime/formkit/definitions/repeater.mjs +63 -35
  5. package/package.json +9 -9
package/README.md CHANGED
@@ -37,6 +37,9 @@ FormKit Nuxt UI bridges the gap between [FormKit](https://formkit.com/)'s powerf
37
37
  - `nuxtUISwitch` - Toggle switch for boolean states
38
38
  - `nuxtUITextarea` - Multi-line text input with autoresize
39
39
 
40
+ 🔁 **Repeater Component** - Dynamic repeatable form sections
41
+ - `nuxtUIRepeater` - Create dynamic lists with add, remove, clone, and reorder functionality
42
+
40
43
  📊 **6 Output Components** - Display-only components for read-only data
41
44
  - `nuxtUIOutputBoolean` - Boolean display with custom icons
42
45
  - `nuxtUIOutputDate` - Formatted date/time display
@@ -50,11 +53,12 @@ FormKit Nuxt UI bridges the gap between [FormKit](https://formkit.com/)'s powerf
50
53
  - `FUDataView` - Read-only data display with schema support
51
54
  - `FUDataDebug` - Development tool for form debugging
52
55
 
53
- 🔧 **Composables** - Reusable form logic
54
- - `useFormKitInput` - Input component utilities
55
- - `useFormKitOutput` - Output component utilities
56
- - `useFormKitRepeater` - Repeatable form sections
57
- - `useFormKitSchema` - Schema-based form generation
56
+ 🔧 **Composables & Utilities** - Reusable form logic
57
+ - `useFormKitSchema` - Schema-based form generation with element builders
58
+ - `useFormKitInput` - Input component utilities and prop handling
59
+ - `useFormKitOutput` - Output component utilities and prop handling
60
+ - `colorConverter` - Color format conversion utilities
61
+ - `durationConverter` - Duration format conversion utilities
58
62
 
59
63
  🎨 **Full Nuxt UI Integration** - All components respect Nuxt UI theming
60
64
  - Color modes (light/dark)
package/dist/module.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "compatibility": {
5
5
  "nuxt": ">=4.0.0"
6
6
  },
7
- "version": "1.0.1",
7
+ "version": "1.0.3",
8
8
  "builder": {
9
9
  "@nuxt/module-builder": "1.0.2",
10
10
  "unbuild": "3.6.1"
package/dist/runtime/formkit/definitions/repeater.js CHANGED
@@ -1,40 +1,54 @@
1
1
  import { createInput } from "@formkit/vue";
2
2
  import { useFormKitSchema } from "../../composables/useFormKitSchema.js";
3
- const { addList, addElement, addListGroup, addComponent, addElementsInOuterDiv } = useFormKitSchema();
4
- function addActionButtons(innerClass = "", outerClass = "", label, help = "", render = "true") {
5
- const addButtonComponent = (onClick = "", icon = "", color = "", render2 = "true", disabled) => {
6
- return addComponent("UButton", { onClick, icon, color, disabled }, render2);
3
+ const { addList, addElement, addListGroup, addComponent } = useFormKitSchema();
4
+ function addButtonGroup(buttonGroupClass = "", buttonGroupItemClass = "", buttonSize, render = "true") {
5
+ const addActionButtonComponent = (onClick = "", icon = "", color = "", render2 = "true", disabled) => {
6
+ return addElement("div", [addComponent("UButton", { onClick, icon, color, disabled, size: buttonSize })], { class: buttonGroupItemClass }, render2);
7
7
  };
8
- return addElementsInOuterDiv([
9
- addButtonComponent("$removeNode($node.parent, $index)", "i-lucide-x", "error"),
10
- addButtonComponent("$cloneNode($node.parent, $index)", "i-lucide-copy", "secondary", "$displayCloneButton"),
11
- addButtonComponent("$moveNodeDown($node.parent, $index)", "i-lucide-arrow-down", "primary", "true", "$index === $node.parent.value.length -1"),
12
- addButtonComponent("$moveNodeUp($node.parent, $index)", "i-lucide-arrow-up", "primary", "true", "$index === 0")
13
- ], innerClass, outerClass, label, help, render);
8
+ return addElement("div", [
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"),
13
+ addActionButtonComponent("$moveNodeDown($node.parent, $index)", "i-lucide-arrow-down", "primary", "$renderMoveButtons", "$index === $node.parent.value.length -1")
14
+ ], { class: buttonGroupClass }, render);
14
15
  }
15
- function addInsertButton(label = "Add Item", icon = "i-lucide-plus", styleClass = "", render = "true") {
16
+ function addInsertButton(label = "Add Item", icon = "i-lucide-plus", styleClass = "", buttonSize, render = "true") {
16
17
  return addElement("div", [
17
- addComponent("UButton", { onClick: "$addNode($node)", label, icon })
18
+ addComponent("UButton", { onClick: "$insertNode($node)", label, icon, size: buttonSize })
18
19
  ], { class: styleClass }, render);
19
20
  }
20
21
  export const nuxtUIRepeaterDefinition = createInput(
21
- [
22
- addElement("div", [
23
- addList("$listName", [
24
- addInsertButton("$addButtonLabel", "i-lucide-plus", "$addButtonClass", "$node.children.length == 0 || $alwaysDisplayAddButton"),
25
- addListGroup([
26
- addElement("div", [
27
- {
28
- children: "$slots.default"
29
- },
30
- addActionButtons("$buttonsInnerClass", "$buttonsOuterClass", "$buttonsLabel")
31
- ], { class: "$itemClass" })
32
- ])
33
- ], true, "true")
34
- ], { class: "$listClass" })
35
- ],
22
+ addElement("ul", [
23
+ addList("$listName", [
24
+ addInsertButton("$insertButtonLabel", "i-lucide-plus", "$insertButtonClass", "$insertButtonSize", "$node.children.length == 0 || $alwaysDisplayInsertButton"),
25
+ addListGroup([
26
+ addElement(
27
+ "li",
28
+ [{ children: "$slots.default" }, addButtonGroup("$buttonGroupClass", "$buttonGroupItemClass", "$buttonSize", "$renderButtons")],
29
+ { class: "$internalListItemClass" }
30
+ )
31
+ ], true, {})
32
+ ], true, "true")
33
+ ], { class: "$internalListClass" }, true),
36
34
  {
37
- props: ["buttonsOuterClass", "buttonsInnerClass", "buttonsLabel", "addButtonLabel", "addButtonClass", "newItem", "itemClass", "listClass", "displayCloneButton", "alwaysDisplayAddButton"],
35
+ props: [
36
+ "insertButtonLabel",
37
+ "insertButtonClass",
38
+ "insertButtonSize",
39
+ "alwaysDisplayInsertButton",
40
+ "newItem",
41
+ "listClass",
42
+ "listItemClass",
43
+ "hideButtonGroup",
44
+ "hideMoveButtons",
45
+ "buttonGroupClass",
46
+ "buttonGroupItemClass",
47
+ "buttonSize",
48
+ "displayCloneButton",
49
+ "displayAddButton",
50
+ "displayDeleteButton"
51
+ ],
38
52
  features: [addRepeaterHandler]
39
53
  }
40
54
  );
@@ -48,34 +62,48 @@ function addRepeaterHandler(node) {
48
62
  };
49
63
  node.on("created", () => {
50
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
+ };
51
78
  node.context.removeNode = (parentNode, index) => () => {
52
79
  if (parentNode && parentNode._value instanceof Array) {
53
80
  parentNode.input(parentNode._value.filter((_, i) => i !== index), false);
54
81
  }
55
82
  };
56
- node.context.addNode = (parentNode) => () => {
83
+ node.context.addNode = (parentNode, index) => () => {
57
84
  if (parentNode && parentNode._value instanceof Array) {
58
- const newArray = [...parentNode.value, node.context.newItem || {}];
59
- parentNode.input(newArray, false);
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);
60
88
  }
61
89
  };
62
90
  node.context.cloneNode = (parentNode, index) => () => {
63
91
  if (parentNode && parentNode._value instanceof Array) {
64
- const item = parentNode.value[index];
65
- const newArray = [...parentNode.value.slice(0, index), { ...item }, ...parentNode.value.slice(index)];
92
+ const item = parentNode._value[index];
93
+ const newArray = [...parentNode._value.slice(0, index + 1), { ...item }, ...parentNode._value.slice(index + 1)];
66
94
  parentNode.input([...newArray], false);
67
95
  }
68
96
  };
69
97
  node.context.moveNodeUp = (parentNode, index) => () => {
70
98
  if (parentNode && parentNode._value instanceof Array) {
71
- const array = [...parentNode.value];
99
+ const array = [...parentNode._value];
72
100
  if (index > 0)
73
101
  parentNode.input(swapElements(array, index - 1, index), false);
74
102
  }
75
103
  };
76
104
  node.context.moveNodeDown = (parentNode, index) => () => {
77
105
  if (parentNode && parentNode._value instanceof Array) {
78
- const array = [...parentNode.value];
106
+ const array = [...parentNode._value];
79
107
  if (index < array.length - 1)
80
108
  parentNode.input(swapElements(array, index, index + 1), false);
81
109
  }
package/dist/runtime/formkit/definitions/repeater.mjs CHANGED
@@ -1,40 +1,54 @@
1
1
  import { createInput } from "@formkit/vue";
2
2
  import { useFormKitSchema } from "../../composables/useFormKitSchema";
3
- const { addList, addElement, addListGroup, addComponent, addElementsInOuterDiv } = useFormKitSchema();
4
- function addActionButtons(innerClass = "", outerClass = "", label, help = "", render = "true") {
5
- const addButtonComponent = (onClick = "", icon = "", color = "", render2 = "true", disabled) => {
6
- return addComponent("UButton", { onClick, icon, color, disabled }, render2);
3
+ const { addList, addElement, addListGroup, addComponent } = useFormKitSchema();
4
+ function addButtonGroup(buttonGroupClass = "", buttonGroupItemClass = "", buttonSize, render = "true") {
5
+ const addActionButtonComponent = (onClick = "", icon = "", color = "", render2 = "true", disabled) => {
6
+ return addElement("div", [addComponent("UButton", { onClick, icon, color, disabled, size: buttonSize })], { class: buttonGroupItemClass }, render2);
7
7
  };
8
- return addElementsInOuterDiv([
9
- addButtonComponent("$removeNode($node.parent, $index)", "i-lucide-x", "error"),
10
- addButtonComponent("$cloneNode($node.parent, $index)", "i-lucide-copy", "secondary", "$displayCloneButton"),
11
- addButtonComponent("$moveNodeDown($node.parent, $index)", "i-lucide-arrow-down", "primary", "true", "$index === $node.parent.value.length -1"),
12
- addButtonComponent("$moveNodeUp($node.parent, $index)", "i-lucide-arrow-up", "primary", "true", "$index === 0")
13
- ], innerClass, outerClass, label, help, render);
8
+ return addElement("div", [
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"),
13
+ addActionButtonComponent("$moveNodeDown($node.parent, $index)", "i-lucide-arrow-down", "primary", "$renderMoveButtons", "$index === $node.parent.value.length -1")
14
+ ], { class: buttonGroupClass }, render);
14
15
  }
15
- function addInsertButton(label = "Add Item", icon = "i-lucide-plus", styleClass = "", render = "true") {
16
+ function addInsertButton(label = "Add Item", icon = "i-lucide-plus", styleClass = "", buttonSize, render = "true") {
16
17
  return addElement("div", [
17
- addComponent("UButton", { onClick: "$addNode($node)", label, icon })
18
+ addComponent("UButton", { onClick: "$insertNode($node)", label, icon, size: buttonSize })
18
19
  ], { class: styleClass }, render);
19
20
  }
20
21
  export const nuxtUIRepeaterDefinition = createInput(
21
- [
22
- addElement("div", [
23
- addList("$listName", [
24
- addInsertButton("$addButtonLabel", "i-lucide-plus", "$addButtonClass", "$node.children.length == 0 || $alwaysDisplayAddButton"),
25
- addListGroup([
26
- addElement("div", [
27
- {
28
- children: "$slots.default"
29
- },
30
- addActionButtons("$buttonsInnerClass", "$buttonsOuterClass", "$buttonsLabel")
31
- ], { class: "$itemClass" })
32
- ])
33
- ], true, "true")
34
- ], { class: "$listClass" })
35
- ],
22
+ addElement("ul", [
23
+ addList("$listName", [
24
+ addInsertButton("$insertButtonLabel", "i-lucide-plus", "$insertButtonClass", "$insertButtonSize", "$node.children.length == 0 || $alwaysDisplayInsertButton"),
25
+ addListGroup([
26
+ addElement(
27
+ "li",
28
+ [{ children: "$slots.default" }, addButtonGroup("$buttonGroupClass", "$buttonGroupItemClass", "$buttonSize", "$renderButtons")],
29
+ { class: "$internalListItemClass" }
30
+ )
31
+ ], true, {})
32
+ ], true, "true")
33
+ ], { class: "$internalListClass" }, true),
36
34
  {
37
- props: ["buttonsOuterClass", "buttonsInnerClass", "buttonsLabel", "addButtonLabel", "addButtonClass", "newItem", "itemClass", "listClass", "displayCloneButton", "alwaysDisplayAddButton"],
35
+ props: [
36
+ "insertButtonLabel",
37
+ "insertButtonClass",
38
+ "insertButtonSize",
39
+ "alwaysDisplayInsertButton",
40
+ "newItem",
41
+ "listClass",
42
+ "listItemClass",
43
+ "hideButtonGroup",
44
+ "hideMoveButtons",
45
+ "buttonGroupClass",
46
+ "buttonGroupItemClass",
47
+ "buttonSize",
48
+ "displayCloneButton",
49
+ "displayAddButton",
50
+ "displayDeleteButton"
51
+ ],
38
52
  features: [addRepeaterHandler]
39
53
  }
40
54
  );
@@ -48,34 +62,48 @@ function addRepeaterHandler(node) {
48
62
  };
49
63
  node.on("created", () => {
50
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
+ };
51
78
  node.context.removeNode = (parentNode, index) => () => {
52
79
  if (parentNode && parentNode._value instanceof Array) {
53
80
  parentNode.input(parentNode._value.filter((_, i) => i !== index), false);
54
81
  }
55
82
  };
56
- node.context.addNode = (parentNode) => () => {
83
+ node.context.addNode = (parentNode, index) => () => {
57
84
  if (parentNode && parentNode._value instanceof Array) {
58
- const newArray = [...parentNode.value, node.context.newItem || {}];
59
- parentNode.input(newArray, false);
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);
60
88
  }
61
89
  };
62
90
  node.context.cloneNode = (parentNode, index) => () => {
63
91
  if (parentNode && parentNode._value instanceof Array) {
64
- const item = parentNode.value[index];
65
- const newArray = [...parentNode.value.slice(0, index), { ...item }, ...parentNode.value.slice(index)];
92
+ const item = parentNode._value[index];
93
+ const newArray = [...parentNode._value.slice(0, index + 1), { ...item }, ...parentNode._value.slice(index + 1)];
66
94
  parentNode.input([...newArray], false);
67
95
  }
68
96
  };
69
97
  node.context.moveNodeUp = (parentNode, index) => () => {
70
98
  if (parentNode && parentNode._value instanceof Array) {
71
- const array = [...parentNode.value];
99
+ const array = [...parentNode._value];
72
100
  if (index > 0)
73
101
  parentNode.input(swapElements(array, index - 1, index), false);
74
102
  }
75
103
  };
76
104
  node.context.moveNodeDown = (parentNode, index) => () => {
77
105
  if (parentNode && parentNode._value instanceof Array) {
78
- const array = [...parentNode.value];
106
+ const array = [...parentNode._value];
79
107
  if (index < array.length - 1)
80
108
  parentNode.input(swapElements(array, index, index + 1), false);
81
109
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sfxcode/nuxt-ui-formkit",
3
- "version": "1.0.1",
3
+ "version": "1.0.3",
4
4
  "description": "FormKit integration for Nuxt UI - Seamlessly connect FormKit form handling with Nuxt UI components",
5
5
  "author": {
6
6
  "name": "Tom",
@@ -88,30 +88,30 @@
88
88
  "dependencies": {
89
89
  "@formkit/addons": "^2.0.0",
90
90
  "@formkit/nuxt": "^2.0.0",
91
- "@nuxt/kit": "^4.4.4",
91
+ "@nuxt/kit": "^4.4.5",
92
92
  "@nuxt/ui": "^4.7.1"
93
93
  },
94
94
  "devDependencies": {
95
95
  "@iconify-json/heroicons": "^1.2.3",
96
- "@iconify-json/lucide": "^1.2.106",
97
- "@iconify-json/simple-icons": "^1.2.81",
96
+ "@iconify-json/lucide": "^1.2.107",
97
+ "@iconify-json/simple-icons": "^1.2.82",
98
98
  "@nuxt/devtools": "4.0.0-alpha.4",
99
99
  "@nuxt/eslint-config": "^1.15.2",
100
100
  "@nuxt/module-builder": "^1.0.2",
101
- "@nuxt/schema": "^4.4.4",
101
+ "@nuxt/schema": "^4.4.5",
102
102
  "@nuxt/test-utils": "^4.0.3",
103
103
  "@types/node": "latest",
104
- "@vitejs/plugin-vue": "^6.0.6",
104
+ "@vitejs/plugin-vue": "^6.0.7",
105
105
  "changelogen": "^0.6.2",
106
106
  "eslint": "^10.3.0",
107
107
  "jsdom": "^29.1.1",
108
108
  "mkdist": "^2.4.1",
109
- "nuxt": "^4.4.4",
109
+ "nuxt": "^4.4.5",
110
110
  "sass-embedded": "^1.99.0",
111
111
  "typescript": "~6.0.3",
112
112
  "unbuild": "^3.6.1",
113
- "vitest": "^4.1.5",
113
+ "vitest": "^4.1.6",
114
114
  "vue": "^3.5.34",
115
- "vue-tsc": "^3.2.8"
115
+ "vue-tsc": "^3.2.9"
116
116
  }
117
117
  }