@sfxcode/formkit-nuxt-ui 0.7.4 → 0.7.6

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 (18) hide show
  1. package/README.md +2 -0
  2. package/dist/module.json +1 -1
  3. package/dist/runtime/components/inputs/FUCheckbox.vue +13 -2
  4. package/dist/runtime/components/inputs/FUCheckboxGroup.vue +13 -2
  5. package/dist/runtime/components/inputs/FUInput.vue +13 -2
  6. package/dist/runtime/components/inputs/FUInputDate.vue +13 -2
  7. package/dist/runtime/components/inputs/FUInputMenu.vue +13 -2
  8. package/dist/runtime/components/inputs/FUInputNumber.vue +13 -2
  9. package/dist/runtime/components/inputs/FUInputTags.vue +13 -2
  10. package/dist/runtime/components/inputs/FUInputTime.vue +13 -2
  11. package/dist/runtime/components/inputs/FURadioGroup.vue +13 -2
  12. package/dist/runtime/components/inputs/FUSelect.vue +13 -2
  13. package/dist/runtime/components/inputs/FUSelectMenu.vue +13 -2
  14. package/dist/runtime/components/inputs/FUSwitch.vue +13 -2
  15. package/dist/runtime/components/inputs/FUTextarea.vue +13 -2
  16. package/dist/runtime/index.d.ts +22 -1
  17. package/dist/runtime/plugin.d.ts +1 -1
  18. package/package.json +14 -3
package/README.md CHANGED
@@ -16,6 +16,8 @@ FormKit Nuxt UI bridges the gap between [FormKit](https://formkit.com/)'s powerf
16
16
  - [📖  FormKit Documentation](https://formkit.com/)
17
17
  - [🎨  Nuxt UI Documentation](https://ui.nuxt.com/)
18
18
 
19
+ <img src="./formkit-nuxt-ui.png" alt="FormKit Nuxt UI Screenshot" width="70%" />
20
+
19
21
  ## Features
20
22
 
21
23
  ✨ **16 Input Components** - Complete set of FormKit-wrapped Nuxt UI input components
package/dist/module.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "compatibility": {
5
5
  "nuxt": ">=4.0.0"
6
6
  },
7
- "version": "0.7.4",
7
+ "version": "0.7.6",
8
8
  "builder": {
9
9
  "@nuxt/module-builder": "1.0.2",
10
10
  "unbuild": "3.6.1"
package/dist/runtime/components/inputs/FUCheckbox.vue CHANGED
@@ -6,7 +6,7 @@ const props = defineProps({
6
6
  required: true
7
7
  }
8
8
  });
9
- const { handleInput, handleChange, styleClass, modelValue, color } = useFormKitInput(props.context);
9
+ const { handleInput, handleChange, styleClass, modelValue, color, validSlotNames } = useFormKitInput(props.context);
10
10
  </script>
11
11
 
12
12
  <template>
@@ -29,5 +29,16 @@ const { handleInput, handleChange, styleClass, modelValue, color } = useFormKitI
29
29
  :ui="context.ui"
30
30
  @change="handleChange"
31
31
  @update:model-value="handleInput"
32
- />
32
+ >
33
+ <template
34
+ v-for="slotName in validSlotNames"
35
+ :key="slotName"
36
+ #[slotName]="slotProps"
37
+ >
38
+ <component
39
+ :is="context?.slots[slotName]"
40
+ v-bind="{ ...context, ...slotProps }"
41
+ />
42
+ </template>
43
+ </UCheckbox>
33
44
  </template>
package/dist/runtime/components/inputs/FUCheckboxGroup.vue CHANGED
@@ -6,7 +6,7 @@ const props = defineProps({
6
6
  required: true
7
7
  }
8
8
  });
9
- const { handleInput, handleChange, styleClass, color, modelValue, items } = useFormKitInput(props.context);
9
+ const { handleInput, handleChange, styleClass, color, modelValue, items, validSlotNames } = useFormKitInput(props.context);
10
10
  </script>
11
11
 
12
12
  <template>
@@ -30,5 +30,16 @@ const { handleInput, handleChange, styleClass, color, modelValue, items } = useF
30
30
  :name="context.name"
31
31
  @change="handleChange"
32
32
  @update:model-value="handleInput"
33
- />
33
+ >
34
+ <template
35
+ v-for="slotName in validSlotNames"
36
+ :key="slotName"
37
+ #[slotName]="slotProps"
38
+ >
39
+ <component
40
+ :is="context?.slots[slotName]"
41
+ v-bind="{ ...context, ...slotProps }"
42
+ />
43
+ </template>
44
+ </UCheckboxGroup>
34
45
  </template>
package/dist/runtime/components/inputs/FUInput.vue CHANGED
@@ -6,7 +6,7 @@ const props = defineProps({
6
6
  required: true
7
7
  }
8
8
  });
9
- const { handleInput, handleChange, isInvalid, styleClass, color, modelValue } = useFormKitInput(props.context);
9
+ const { handleInput, handleChange, isInvalid, styleClass, color, modelValue, validSlotNames } = useFormKitInput(props.context);
10
10
  </script>
11
11
 
12
12
  <template>
@@ -46,5 +46,16 @@ const { handleInput, handleChange, isInvalid, styleClass, color, modelValue } =
46
46
  :ui="context.ui"
47
47
  @change="handleChange"
48
48
  @update:model-value="handleInput"
49
- />
49
+ >
50
+ <template
51
+ v-for="slotName in validSlotNames"
52
+ :key="slotName"
53
+ #[slotName]="slotProps"
54
+ >
55
+ <component
56
+ :is="context?.slots[slotName]"
57
+ v-bind="{ ...context, ...slotProps }"
58
+ />
59
+ </template>
60
+ </UInput>
50
61
  </template>
package/dist/runtime/components/inputs/FUInputDate.vue CHANGED
@@ -6,7 +6,7 @@ const props = defineProps({
6
6
  required: true
7
7
  }
8
8
  });
9
- const { handleInput, handleChange, isInvalid, styleClass, color, modelValue } = useFormKitInput(props.context);
9
+ const { handleInput, handleChange, isInvalid, styleClass, color, modelValue, validSlotNames } = useFormKitInput(props.context);
10
10
  </script>
11
11
 
12
12
  <template>
@@ -48,5 +48,16 @@ const { handleInput, handleChange, isInvalid, styleClass, color, modelValue } =
48
48
  :ui="context.ui"
49
49
  @change="handleChange"
50
50
  @update:model-value="handleInput"
51
- />
51
+ >
52
+ <template
53
+ v-for="slotName in validSlotNames"
54
+ :key="slotName"
55
+ #[slotName]="slotProps"
56
+ >
57
+ <component
58
+ :is="context?.slots[slotName]"
59
+ v-bind="{ ...context, ...slotProps }"
60
+ />
61
+ </template>
62
+ </UInputDate>
52
63
  </template>
package/dist/runtime/components/inputs/FUInputMenu.vue CHANGED
@@ -6,7 +6,7 @@ const props = defineProps({
6
6
  required: true
7
7
  }
8
8
  });
9
- const { handleInput, handleChange, isInvalid, styleClass, color, modelValue, items } = useFormKitInput(props.context);
9
+ const { handleInput, handleChange, isInvalid, styleClass, color, modelValue, items, validSlotNames } = useFormKitInput(props.context);
10
10
  </script>
11
11
 
12
12
  <template>
@@ -61,5 +61,16 @@ const { handleInput, handleChange, isInvalid, styleClass, color, modelValue, ite
61
61
  :ui="context.ui"
62
62
  @change="handleChange"
63
63
  @update:model-value="handleInput"
64
- />
64
+ >
65
+ <template
66
+ v-for="slotName in validSlotNames"
67
+ :key="slotName"
68
+ #[slotName]="slotProps"
69
+ >
70
+ <component
71
+ :is="context?.slots[slotName]"
72
+ v-bind="{ ...context, ...slotProps }"
73
+ />
74
+ </template>
75
+ </UInputMenu>
65
76
  </template>
package/dist/runtime/components/inputs/FUInputNumber.vue CHANGED
@@ -6,7 +6,7 @@ const props = defineProps({
6
6
  required: true
7
7
  }
8
8
  });
9
- const { handleInput, handleChange, isInvalid, styleClass, color, modelValue } = useFormKitInput(props.context);
9
+ const { handleInput, handleChange, isInvalid, styleClass, color, modelValue, validSlotNames } = useFormKitInput(props.context);
10
10
  </script>
11
11
 
12
12
  <template>
@@ -45,5 +45,16 @@ const { handleInput, handleChange, isInvalid, styleClass, color, modelValue } =
45
45
  :ui="context.ui"
46
46
  @change="handleChange"
47
47
  @update:model-value="handleInput"
48
- />
48
+ >
49
+ <template
50
+ v-for="slotName in validSlotNames"
51
+ :key="slotName"
52
+ #[slotName]="slotProps"
53
+ >
54
+ <component
55
+ :is="context?.slots[slotName]"
56
+ v-bind="{ ...context, ...slotProps }"
57
+ />
58
+ </template>
59
+ </UInputNumber>
49
60
  </template>
package/dist/runtime/components/inputs/FUInputTags.vue CHANGED
@@ -6,7 +6,7 @@ const props = defineProps({
6
6
  required: true
7
7
  }
8
8
  });
9
- const { handleInput, handleChange, isInvalid, styleClass, color, modelValue } = useFormKitInput(props.context);
9
+ const { handleInput, handleChange, isInvalid, styleClass, color, modelValue, validSlotNames } = useFormKitInput(props.context);
10
10
  </script>
11
11
 
12
12
  <template>
@@ -49,5 +49,16 @@ const { handleInput, handleChange, isInvalid, styleClass, color, modelValue } =
49
49
  :ui="context.ui"
50
50
  @change="handleChange"
51
51
  @update:model-value="handleInput"
52
- />
52
+ >
53
+ <template
54
+ v-for="slotName in validSlotNames"
55
+ :key="slotName"
56
+ #[slotName]="slotProps"
57
+ >
58
+ <component
59
+ :is="context?.slots[slotName]"
60
+ v-bind="{ ...context, ...slotProps }"
61
+ />
62
+ </template>
63
+ </UInputTags>
53
64
  </template>
package/dist/runtime/components/inputs/FUInputTime.vue CHANGED
@@ -6,7 +6,7 @@ const props = defineProps({
6
6
  required: true
7
7
  }
8
8
  });
9
- const { handleInput, handleChange, isInvalid, styleClass, color, modelValue } = useFormKitInput(props.context);
9
+ const { handleInput, handleChange, isInvalid, styleClass, color, modelValue, validSlotNames } = useFormKitInput(props.context);
10
10
  </script>
11
11
 
12
12
  <template>
@@ -46,5 +46,16 @@ const { handleInput, handleChange, isInvalid, styleClass, color, modelValue } =
46
46
  :ui="context.ui"
47
47
  @change="handleChange"
48
48
  @update:model-value="handleInput"
49
- />
49
+ >
50
+ <template
51
+ v-for="slotName in validSlotNames"
52
+ :key="slotName"
53
+ #[slotName]="slotProps"
54
+ >
55
+ <component
56
+ :is="context?.slots[slotName]"
57
+ v-bind="{ ...context, ...slotProps }"
58
+ />
59
+ </template>
60
+ </UInputTime>
50
61
  </template>
package/dist/runtime/components/inputs/FURadioGroup.vue CHANGED
@@ -6,7 +6,7 @@ const props = defineProps({
6
6
  required: true
7
7
  }
8
8
  });
9
- const { handleInput, handleChange, styleClass, color, modelValue, items } = useFormKitInput(props.context);
9
+ const { handleInput, handleChange, styleClass, color, modelValue, items, validSlotNames } = useFormKitInput(props.context);
10
10
  </script>
11
11
 
12
12
  <template>
@@ -31,5 +31,16 @@ const { handleInput, handleChange, styleClass, color, modelValue, items } = useF
31
31
  :ui="context.ui"
32
32
  @change="handleChange"
33
33
  @update:model-value="handleInput"
34
- />
34
+ >
35
+ <template
36
+ v-for="slotName in validSlotNames"
37
+ :key="slotName"
38
+ #[slotName]="slotProps"
39
+ >
40
+ <component
41
+ :is="context?.slots[slotName]"
42
+ v-bind="{ ...context, ...slotProps }"
43
+ />
44
+ </template>
45
+ </URadioGroup>
35
46
  </template>
package/dist/runtime/components/inputs/FUSelect.vue CHANGED
@@ -6,7 +6,7 @@ const props = defineProps({
6
6
  required: true
7
7
  }
8
8
  });
9
- const { handleInput, handleChange, isInvalid, color, styleClass, modelValue, items } = useFormKitInput(props.context);
9
+ const { handleInput, handleChange, isInvalid, color, styleClass, modelValue, items, validSlotNames } = useFormKitInput(props.context);
10
10
  </script>
11
11
 
12
12
  <template>
@@ -47,5 +47,16 @@ const { handleInput, handleChange, isInvalid, color, styleClass, modelValue, ite
47
47
  :ui="context.ui"
48
48
  @change="handleChange"
49
49
  @update:model-value="handleInput"
50
- />
50
+ >
51
+ <template
52
+ v-for="slotName in validSlotNames"
53
+ :key="slotName"
54
+ #[slotName]="slotProps"
55
+ >
56
+ <component
57
+ :is="context?.slots[slotName]"
58
+ v-bind="{ ...context, ...slotProps }"
59
+ />
60
+ </template>
61
+ </USelect>
51
62
  </template>
package/dist/runtime/components/inputs/FUSelectMenu.vue CHANGED
@@ -6,7 +6,7 @@ const props = defineProps({
6
6
  required: true
7
7
  }
8
8
  });
9
- const { handleInput, handleChange, isInvalid, styleClass, color, modelValue, items } = useFormKitInput(props.context);
9
+ const { handleInput, handleChange, isInvalid, styleClass, color, modelValue, items, validSlotNames } = useFormKitInput(props.context);
10
10
  </script>
11
11
 
12
12
  <template>
@@ -58,5 +58,16 @@ const { handleInput, handleChange, isInvalid, styleClass, color, modelValue, ite
58
58
  :ui="context.ui"
59
59
  @change="handleChange"
60
60
  @update:model-value="handleInput"
61
- />
61
+ >
62
+ <template
63
+ v-for="slotName in validSlotNames"
64
+ :key="slotName"
65
+ #[slotName]="slotProps"
66
+ >
67
+ <component
68
+ :is="context?.slots[slotName]"
69
+ v-bind="{ ...context, ...slotProps }"
70
+ />
71
+ </template>
72
+ </USelectMenu>
62
73
  </template>
package/dist/runtime/components/inputs/FUSwitch.vue CHANGED
@@ -6,7 +6,7 @@ const props = defineProps({
6
6
  required: true
7
7
  }
8
8
  });
9
- const { handleInput, handleChange, styleClass, color, modelValue } = useFormKitInput(props.context);
9
+ const { handleInput, handleChange, styleClass, color, modelValue, validSlotNames } = useFormKitInput(props.context);
10
10
  </script>
11
11
 
12
12
  <template>
@@ -30,5 +30,16 @@ const { handleInput, handleChange, styleClass, color, modelValue } = useFormKitI
30
30
  :ui="context.ui"
31
31
  @change="handleChange"
32
32
  @update:model-value="handleInput"
33
- />
33
+ >
34
+ <template
35
+ v-for="slotName in validSlotNames"
36
+ :key="slotName"
37
+ #[slotName]="slotProps"
38
+ >
39
+ <component
40
+ :is="context?.slots[slotName]"
41
+ v-bind="{ ...context, ...slotProps }"
42
+ />
43
+ </template>
44
+ </USwitch>
34
45
  </template>
package/dist/runtime/components/inputs/FUTextarea.vue CHANGED
@@ -6,7 +6,7 @@ const props = defineProps({
6
6
  required: true
7
7
  }
8
8
  });
9
- const { handleInput, handleChange, styleClass, color, isInvalid, modelValue } = useFormKitInput(props.context);
9
+ const { handleInput, handleChange, styleClass, color, isInvalid, modelValue, validSlotNames } = useFormKitInput(props.context);
10
10
  </script>
11
11
 
12
12
  <template>
@@ -46,5 +46,16 @@ const { handleInput, handleChange, styleClass, color, isInvalid, modelValue } =
46
46
  :ui="context.ui"
47
47
  @change="handleChange"
48
48
  @update:model-value="handleInput"
49
- />
49
+ >
50
+ <template
51
+ v-for="slotName in validSlotNames"
52
+ :key="slotName"
53
+ #[slotName]="slotProps"
54
+ >
55
+ <component
56
+ :is="context?.slots[slotName]"
57
+ v-bind="{ ...context, ...slotProps }"
58
+ />
59
+ </template>
60
+ </UTextarea>
50
61
  </template>
package/dist/runtime/index.d.ts CHANGED
@@ -1,4 +1,9 @@
1
- import type { FormKitInputs } from '@formkit/inputs';
1
+ import type { FormKitBaseSlots, FormKitInputs } from '@formkit/inputs';
2
+ import type { CheckboxSlots, CheckboxGroupSlots, RadioGroupSlots, InputSlots, TextareaSlots, SelectSlots, SelectMenuSlots, InputDateSlots, InputMenuSlots, InputNumberSlots, InputTagsSlots, InputTimeSlots, SwitchSlots } from '@nuxt/ui';
3
+ /**
4
+ * Keeps all slots from 1st argument, add any slots from 2nd type which do not collide with the 1st's names.
5
+ */
6
+ type MergeSlots<A, B> = A & Omit<B, keyof A>;
2
7
  declare module '@formkit/inputs' {
3
8
  interface FormKitInputProps<Props extends FormKitInputs<Props>> {
4
9
  nuxtUICheckbox: {
@@ -68,4 +73,20 @@ declare module '@formkit/inputs' {
68
73
  type: 'nuxtUIOutputList';
69
74
  };
70
75
  }
76
+ interface FormKitInputSlots<Props extends FormKitInputs<Props>> {
77
+ nuxtUICheckbox: MergeSlots<FormKitBaseSlots<Props>, CheckboxSlots>;
78
+ nuxtUICheckboxGroup: MergeSlots<FormKitBaseSlots<Props>, CheckboxGroupSlots>;
79
+ nuxtUIInput: MergeSlots<FormKitBaseSlots<Props>, InputSlots>;
80
+ nuxtUIInputDate: MergeSlots<FormKitBaseSlots<Props>, InputDateSlots>;
81
+ nuxtUIInputMenu: MergeSlots<FormKitBaseSlots<Props>, InputMenuSlots>;
82
+ nuxtUIInputNumber: MergeSlots<FormKitBaseSlots<Props>, InputNumberSlots>;
83
+ nuxtUIInputTags: MergeSlots<FormKitBaseSlots<Props>, InputTagsSlots>;
84
+ nuxtUIInputTime: MergeSlots<FormKitBaseSlots<Props>, InputTimeSlots>;
85
+ nuxtUIRadioGroup: MergeSlots<FormKitBaseSlots<Props>, RadioGroupSlots>;
86
+ nuxtUISelect: MergeSlots<FormKitBaseSlots<Props>, SelectSlots>;
87
+ nuxtUISelectMenu: MergeSlots<FormKitBaseSlots<Props>, SelectMenuSlots>;
88
+ nuxtUISwitch: MergeSlots<FormKitBaseSlots<Props>, SwitchSlots>;
89
+ nuxtUITextarea: MergeSlots<FormKitBaseSlots<Props>, TextareaSlots>;
90
+ }
71
91
  }
92
+ export {};
package/dist/runtime/plugin.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- declare const _default: import("nuxt/app").Plugin<Record<string, unknown>> & import("nuxt/app").ObjectPlugin<Record<string, unknown>>;
1
+ declare const _default: import("#app").Plugin<Record<string, unknown>> & import("#app").ObjectPlugin<Record<string, unknown>>;
2
2
  export default _default;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sfxcode/formkit-nuxt-ui",
3
- "version": "0.7.4",
3
+ "version": "0.7.6",
4
4
  "description": "FormKit integration for Nuxt UI - Seamlessly connect FormKit form handling with Nuxt UI components",
5
5
  "author": {
6
6
  "name": "Tom",
@@ -40,14 +40,25 @@
40
40
  ".": {
41
41
  "types": "./dist/types.d.mts",
42
42
  "import": "./dist/module.mjs"
43
+ },
44
+ "./runtime": {
45
+ "types": "./dist/runtime/index.d.ts",
46
+ "import": "./dist/runtime/index.js"
47
+ },
48
+ "./runtime/definitions": {
49
+ "types": "./dist/runtime/definitions/index.d.ts",
50
+ "import": "./dist/runtime/definitions/index.js"
51
+ },
52
+ "./runtime/plugins": {
53
+ "types": "./dist/runtime/plugins/index.d.ts",
54
+ "import": "./dist/runtime/plugins/index.js"
43
55
  }
44
56
  },
45
57
  "main": "./dist/module.mjs",
46
58
  "typesVersions": {
47
59
  "*": {
48
60
  ".": [
49
- "./dist/types.d.mts",
50
- "./dist/runtime/index.d.ts"
61
+ "./dist/types.d.mts"
51
62
  ]
52
63
  }
53
64
  },