@sfxcode/nuxt-ui-formkit 1.0.2 → 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 +19 -21
  4. package/dist/runtime/formkit/definitions/repeater.mjs +19 -21
  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.2",
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
@@ -19,21 +19,18 @@ function addInsertButton(label = "Add Item", icon = "i-lucide-plus", styleClass
19
19
  ], { class: styleClass }, render);
20
20
  }
21
21
  export const nuxtUIRepeaterDefinition = createInput(
22
- [
23
- addElement("div", [
24
- addList("$listName", [
25
- addInsertButton("$insertButtonLabel", "i-lucide-plus", "$insertButtonClass", "$insertButtonSize", "$node.children.length == 0 || $alwaysDisplayInsertButton"),
26
- addListGroup(
27
- [
28
- addElement("div", [
29
- addElement("div", [{ children: "$slots.default" }], { class: "$groupClass" }),
30
- addButtonGroup("$buttonGroupClass", "$buttonGroupItemClass", "$buttonSize", "$renderButtons")
31
- ], { class: "$listItemClass" })
32
- ]
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" }
33
30
  )
34
- ], true, "true")
35
- ], { class: "$listClass" })
36
- ],
31
+ ], true, {})
32
+ ], true, "true")
33
+ ], { class: "$internalListClass" }, true),
37
34
  {
38
35
  props: [
39
36
  "insertButtonLabel",
@@ -43,7 +40,6 @@ export const nuxtUIRepeaterDefinition = createInput(
43
40
  "newItem",
44
41
  "listClass",
45
42
  "listItemClass",
46
- "groupClass",
47
43
  "hideButtonGroup",
48
44
  "hideMoveButtons",
49
45
  "buttonGroupClass",
@@ -70,10 +66,12 @@ function addRepeaterHandler(node) {
70
66
  node.context.insertButtonSize = node.context.insertButtonSize ? node.context.insertButtonSize : "md";
71
67
  node.context.buttonSize = node.context.buttonSize ? node.context.buttonSize : "md";
72
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";
73
71
  node.context.insertNode = (parentNode) => () => {
74
72
  if (parentNode && parentNode._value instanceof Array) {
75
73
  const item = node.context.newItem ? { ...node.context.newItem } : {};
76
- const newArray = [item, ...parentNode.value];
74
+ const newArray = [item, ...parentNode._value];
77
75
  parentNode.input(newArray, false);
78
76
  }
79
77
  };
@@ -85,27 +83,27 @@ function addRepeaterHandler(node) {
85
83
  node.context.addNode = (parentNode, index) => () => {
86
84
  if (parentNode && parentNode._value instanceof Array) {
87
85
  const item = node.context.newItem ? { ...node.context.newItem } : {};
88
- const newArray = [...parentNode.value.slice(0, index + 1), { ...item }, ...parentNode.value.slice(index + 1)];
86
+ const newArray = [...parentNode._value.slice(0, index + 1), { ...item }, ...parentNode._value.slice(index + 1)];
89
87
  parentNode.input([...newArray], false);
90
88
  }
91
89
  };
92
90
  node.context.cloneNode = (parentNode, index) => () => {
93
91
  if (parentNode && parentNode._value instanceof Array) {
94
- const item = parentNode.value[index];
95
- const newArray = [...parentNode.value.slice(0, index + 1), { ...item }, ...parentNode.value.slice(index + 1)];
92
+ const item = parentNode._value[index];
93
+ const newArray = [...parentNode._value.slice(0, index + 1), { ...item }, ...parentNode._value.slice(index + 1)];
96
94
  parentNode.input([...newArray], false);
97
95
  }
98
96
  };
99
97
  node.context.moveNodeUp = (parentNode, index) => () => {
100
98
  if (parentNode && parentNode._value instanceof Array) {
101
- const array = [...parentNode.value];
99
+ const array = [...parentNode._value];
102
100
  if (index > 0)
103
101
  parentNode.input(swapElements(array, index - 1, index), false);
104
102
  }
105
103
  };
106
104
  node.context.moveNodeDown = (parentNode, index) => () => {
107
105
  if (parentNode && parentNode._value instanceof Array) {
108
- const array = [...parentNode.value];
106
+ const array = [...parentNode._value];
109
107
  if (index < array.length - 1)
110
108
  parentNode.input(swapElements(array, index, index + 1), false);
111
109
  }
package/dist/runtime/formkit/definitions/repeater.mjs CHANGED
@@ -19,21 +19,18 @@ function addInsertButton(label = "Add Item", icon = "i-lucide-plus", styleClass
19
19
  ], { class: styleClass }, render);
20
20
  }
21
21
  export const nuxtUIRepeaterDefinition = createInput(
22
- [
23
- addElement("div", [
24
- addList("$listName", [
25
- addInsertButton("$insertButtonLabel", "i-lucide-plus", "$insertButtonClass", "$insertButtonSize", "$node.children.length == 0 || $alwaysDisplayInsertButton"),
26
- addListGroup(
27
- [
28
- addElement("div", [
29
- addElement("div", [{ children: "$slots.default" }], { class: "$groupClass" }),
30
- addButtonGroup("$buttonGroupClass", "$buttonGroupItemClass", "$buttonSize", "$renderButtons")
31
- ], { class: "$listItemClass" })
32
- ]
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" }
33
30
  )
34
- ], true, "true")
35
- ], { class: "$listClass" })
36
- ],
31
+ ], true, {})
32
+ ], true, "true")
33
+ ], { class: "$internalListClass" }, true),
37
34
  {
38
35
  props: [
39
36
  "insertButtonLabel",
@@ -43,7 +40,6 @@ export const nuxtUIRepeaterDefinition = createInput(
43
40
  "newItem",
44
41
  "listClass",
45
42
  "listItemClass",
46
- "groupClass",
47
43
  "hideButtonGroup",
48
44
  "hideMoveButtons",
49
45
  "buttonGroupClass",
@@ -70,10 +66,12 @@ function addRepeaterHandler(node) {
70
66
  node.context.insertButtonSize = node.context.insertButtonSize ? node.context.insertButtonSize : "md";
71
67
  node.context.buttonSize = node.context.buttonSize ? node.context.buttonSize : "md";
72
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";
73
71
  node.context.insertNode = (parentNode) => () => {
74
72
  if (parentNode && parentNode._value instanceof Array) {
75
73
  const item = node.context.newItem ? { ...node.context.newItem } : {};
76
- const newArray = [item, ...parentNode.value];
74
+ const newArray = [item, ...parentNode._value];
77
75
  parentNode.input(newArray, false);
78
76
  }
79
77
  };
@@ -85,27 +83,27 @@ function addRepeaterHandler(node) {
85
83
  node.context.addNode = (parentNode, index) => () => {
86
84
  if (parentNode && parentNode._value instanceof Array) {
87
85
  const item = node.context.newItem ? { ...node.context.newItem } : {};
88
- const newArray = [...parentNode.value.slice(0, index + 1), { ...item }, ...parentNode.value.slice(index + 1)];
86
+ const newArray = [...parentNode._value.slice(0, index + 1), { ...item }, ...parentNode._value.slice(index + 1)];
89
87
  parentNode.input([...newArray], false);
90
88
  }
91
89
  };
92
90
  node.context.cloneNode = (parentNode, index) => () => {
93
91
  if (parentNode && parentNode._value instanceof Array) {
94
- const item = parentNode.value[index];
95
- const newArray = [...parentNode.value.slice(0, index + 1), { ...item }, ...parentNode.value.slice(index + 1)];
92
+ const item = parentNode._value[index];
93
+ const newArray = [...parentNode._value.slice(0, index + 1), { ...item }, ...parentNode._value.slice(index + 1)];
96
94
  parentNode.input([...newArray], false);
97
95
  }
98
96
  };
99
97
  node.context.moveNodeUp = (parentNode, index) => () => {
100
98
  if (parentNode && parentNode._value instanceof Array) {
101
- const array = [...parentNode.value];
99
+ const array = [...parentNode._value];
102
100
  if (index > 0)
103
101
  parentNode.input(swapElements(array, index - 1, index), false);
104
102
  }
105
103
  };
106
104
  node.context.moveNodeDown = (parentNode, index) => () => {
107
105
  if (parentNode && parentNode._value instanceof Array) {
108
- const array = [...parentNode.value];
106
+ const array = [...parentNode._value];
109
107
  if (index < array.length - 1)
110
108
  parentNode.input(swapElements(array, index, index + 1), false);
111
109
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sfxcode/nuxt-ui-formkit",
3
- "version": "1.0.2",
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
  }