@sfxcode/nuxt-ui-formkit 1.0.2 → 1.0.5

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/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.5",
8
8
  "builder": {
9
9
  "@nuxt/module-builder": "1.0.2",
10
10
  "unbuild": "3.6.1"
@@ -73,13 +73,9 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
73
73
  type: BooleanConstructor;
74
74
  default: boolean;
75
75
  };
76
- modelValue: {
77
- type: PropType<object>;
78
- };
76
+ modelValue: FormKitSchemaDefinition;
79
77
  }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
80
- onReset: (...args: any[]) => void;
81
- dataSaved: (...args: any[]) => void;
82
- "update:modelValue": (value: object | undefined) => void;
78
+ "update:modelValue": (value: any) => any;
83
79
  }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
84
80
  id: {
85
81
  type: StringConstructor;
@@ -145,13 +141,9 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
145
141
  type: BooleanConstructor;
146
142
  default: boolean;
147
143
  };
148
- modelValue: {
149
- type: PropType<object>;
150
- };
144
+ modelValue: FormKitSchemaDefinition;
151
145
  }>> & Readonly<{
152
- onOnReset?: ((...args: any[]) => any) | undefined;
153
- onDataSaved?: ((...args: any[]) => any) | undefined;
154
- "onUpdate:modelValue"?: ((value: object | undefined) => any) | undefined;
146
+ "onUpdate:modelValue"?: ((value: any) => any) | undefined;
155
147
  }>, {
156
148
  data: Record<string, any>;
157
149
  id: string;
@@ -1,7 +1,7 @@
1
1
  <script setup>
2
2
  import { reset } from "@formkit/core";
3
3
  import { FormKit, FormKitMessages, FormKitSchema } from "@formkit/vue";
4
- import { ref } from "vue";
4
+ import { ref, watch } from "vue";
5
5
  import FUDataDebug from "./FUDataDebug.vue";
6
6
  const props = defineProps({
7
7
  id: {
@@ -70,11 +70,19 @@ const props = defineProps({
70
70
  }
71
71
  });
72
72
  const emit = defineEmits(["dataSaved", "onReset"]);
73
- const formData = defineModel({ type: Object });
73
+ const formSchema = ref(props.schema);
74
+ const formData = defineModel({ type: null });
75
+ watch(() => props.schema, (newSchema) => {
76
+ formSchema.value = newSchema;
77
+ }, { deep: true });
78
+ watch(() => props.data, (newData) => {
79
+ if (newData && newData !== formData.value) {
80
+ formData.value = newData;
81
+ }
82
+ }, { deep: true });
74
83
  if (props.data) {
75
84
  formData.value = props.data;
76
85
  }
77
- const formSchema = ref(props.schema);
78
86
  function handleSave() {
79
87
  emit("dataSaved", formData.value);
80
88
  }
@@ -73,13 +73,9 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
73
73
  type: BooleanConstructor;
74
74
  default: boolean;
75
75
  };
76
- modelValue: {
77
- type: PropType<object>;
78
- };
76
+ modelValue: FormKitSchemaDefinition;
79
77
  }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
80
- onReset: (...args: any[]) => void;
81
- dataSaved: (...args: any[]) => void;
82
- "update:modelValue": (value: object | undefined) => void;
78
+ "update:modelValue": (value: any) => any;
83
79
  }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
84
80
  id: {
85
81
  type: StringConstructor;
@@ -145,13 +141,9 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
145
141
  type: BooleanConstructor;
146
142
  default: boolean;
147
143
  };
148
- modelValue: {
149
- type: PropType<object>;
150
- };
144
+ modelValue: FormKitSchemaDefinition;
151
145
  }>> & Readonly<{
152
- onOnReset?: ((...args: any[]) => any) | undefined;
153
- onDataSaved?: ((...args: any[]) => any) | undefined;
154
- "onUpdate:modelValue"?: ((value: object | undefined) => any) | undefined;
146
+ "onUpdate:modelValue"?: ((value: any) => any) | undefined;
155
147
  }>, {
156
148
  data: Record<string, any>;
157
149
  id: string;
@@ -25,11 +25,9 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
25
25
  type: BooleanConstructor;
26
26
  default: boolean;
27
27
  };
28
- modelValue: {
29
- type: PropType<Record<string, unknown>>;
30
- };
28
+ modelValue: FormKitSchemaDefinition;
31
29
  }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
32
- "update:modelValue": (value: Record<string, unknown> | undefined) => any;
30
+ "update:modelValue": (value: any) => any;
33
31
  }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
34
32
  data: {
35
33
  type: ObjectConstructor;
@@ -51,11 +49,9 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
51
49
  type: BooleanConstructor;
52
50
  default: boolean;
53
51
  };
54
- modelValue: {
55
- type: PropType<Record<string, unknown>>;
56
- };
52
+ modelValue: FormKitSchemaDefinition;
57
53
  }>> & Readonly<{
58
- "onUpdate:modelValue"?: ((value: Record<string, unknown> | undefined) => any) | undefined;
54
+ "onUpdate:modelValue"?: ((value: any) => any) | undefined;
59
55
  }>, {
60
56
  data: Record<string, any>;
61
57
  schema: FormKitSchemaDefinition;
@@ -1,6 +1,7 @@
1
1
  <script setup>
2
2
  import { FormKitSchema } from "@formkit/vue";
3
3
  import FuDataDebug from "./FUDataDebug.vue";
4
+ import { ref, watch } from "vue";
4
5
  const props = defineProps({
5
6
  data: {
6
7
  type: Object,
@@ -23,7 +24,16 @@ const props = defineProps({
23
24
  default: false
24
25
  }
25
26
  });
26
- const formData = defineModel({ type: Object });
27
+ const formSchema = ref(props.schema);
28
+ const formData = defineModel({ type: null });
29
+ watch(() => props.schema, (newSchema) => {
30
+ formSchema.value = newSchema;
31
+ }, { deep: true });
32
+ watch(() => props.data, (newData) => {
33
+ if (newData && newData !== formData.value) {
34
+ formData.value = newData;
35
+ }
36
+ }, { deep: true });
27
37
  if (props.data) {
28
38
  formData.value = props.data;
29
39
  }
@@ -25,11 +25,9 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
25
25
  type: BooleanConstructor;
26
26
  default: boolean;
27
27
  };
28
- modelValue: {
29
- type: PropType<Record<string, unknown>>;
30
- };
28
+ modelValue: FormKitSchemaDefinition;
31
29
  }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
32
- "update:modelValue": (value: Record<string, unknown> | undefined) => any;
30
+ "update:modelValue": (value: any) => any;
33
31
  }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
34
32
  data: {
35
33
  type: ObjectConstructor;
@@ -51,11 +49,9 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
51
49
  type: BooleanConstructor;
52
50
  default: boolean;
53
51
  };
54
- modelValue: {
55
- type: PropType<Record<string, unknown>>;
56
- };
52
+ modelValue: FormKitSchemaDefinition;
57
53
  }>> & Readonly<{
58
- "onUpdate:modelValue"?: ((value: Record<string, unknown> | undefined) => any) | undefined;
54
+ "onUpdate:modelValue"?: ((value: any) => any) | undefined;
59
55
  }>, {
60
56
  data: Record<string, any>;
61
57
  schema: FormKitSchemaDefinition;
@@ -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
  }
@@ -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.5",
4
4
  "description": "FormKit integration for Nuxt UI - Seamlessly connect FormKit form handling with Nuxt UI components",
5
5
  "author": {
6
6
  "name": "Tom",
@@ -34,7 +34,6 @@
34
34
  "design-system",
35
35
  "form-builder"
36
36
  ],
37
- "packageManager": "pnpm@11.0.9+sha512.34ce82e6780233cf9cad8685029a8f81d2e06196c5a9bad98879f7424940c6817c4e4524fb7d38b8553ceed48b9758b8ebaf1abd3600c232c4c8cf7366086f38",
38
37
  "type": "module",
39
38
  "exports": {
40
39
  ".": {
@@ -83,35 +82,46 @@
83
82
  "lint": "eslint .",
84
83
  "test": "vitest run",
85
84
  "test:watch": "vitest watch",
86
- "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit"
85
+ "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit",
86
+ "docs:dev": "vitepress dev docs",
87
+ "docs:build": "vitepress build docs",
88
+ "docs:preview": "vitepress preview docs"
87
89
  },
88
90
  "dependencies": {
89
91
  "@formkit/addons": "^2.0.0",
90
92
  "@formkit/nuxt": "^2.0.0",
91
- "@nuxt/kit": "^4.4.4",
92
- "@nuxt/ui": "^4.7.1"
93
+ "@nuxt/kit": "^4.4.7",
94
+ "@nuxt/ui": "^4.8.2",
95
+ "@vue/compiler-dom": "^3.5.35"
93
96
  },
94
97
  "devDependencies": {
95
98
  "@iconify-json/heroicons": "^1.2.3",
96
- "@iconify-json/lucide": "^1.2.106",
97
- "@iconify-json/simple-icons": "^1.2.81",
98
- "@nuxt/devtools": "4.0.0-alpha.4",
99
+ "@iconify-json/lucide": "^1.2.111",
100
+ "@iconify-json/simple-icons": "^1.2.85",
101
+ "@nuxt/devtools": "4.0.0-alpha.7",
99
102
  "@nuxt/eslint-config": "^1.15.2",
100
103
  "@nuxt/module-builder": "^1.0.2",
101
- "@nuxt/schema": "^4.4.4",
104
+ "@nuxt/schema": "^4.4.7",
102
105
  "@nuxt/test-utils": "^4.0.3",
103
106
  "@types/node": "latest",
104
- "@vitejs/plugin-vue": "^6.0.6",
107
+ "@vitejs/plugin-vue": "^6.0.7",
105
108
  "changelogen": "^0.6.2",
106
- "eslint": "^10.3.0",
109
+ "eslint": "^10.4.1",
107
110
  "jsdom": "^29.1.1",
108
111
  "mkdist": "^2.4.1",
109
- "nuxt": "^4.4.4",
110
- "sass-embedded": "^1.99.0",
112
+ "nuxt": "^4.4.7",
113
+ "sass-embedded": "^1.100.0",
111
114
  "typescript": "~6.0.3",
112
115
  "unbuild": "^3.6.1",
113
- "vitest": "^4.1.5",
114
- "vue": "^3.5.34",
115
- "vue-tsc": "^3.2.8"
116
- }
116
+ "vitepress": "2.0.0-alpha.17",
117
+ "vitest": "^4.1.8",
118
+ "vue": "^3.5.35",
119
+ "vue-tsc": "^3.3.3",
120
+ "@codemirror/lang-json": "^6.0.2",
121
+ "@codemirror/state": "^6.6.0",
122
+ "@codemirror/theme-one-dark": "^6.1.3",
123
+ "@codemirror/view": "^6.43.0",
124
+ "codemirror": "^6.0.2"
125
+ },
126
+ "packageManager": "pnpm@11.1.2+sha512.415a1cc25974731e75455c1468371be74c5aa5fb7621b50d4056d222451609f11412f23fd602e6169f1e060466641f798597e1be961a10688836a67b16569499"
117
127
  }