@sfxcode/formkit-nuxt-ui 0.7.3 → 0.7.5

package/README.md

@@ -16,6 +16,8 @@ FormKit Nuxt UI bridges the gap between [FormKit](https://formkit.com/)'s powerf
 - [📖  FormKit Documentation](https://formkit.com/)
 - [🎨  Nuxt UI Documentation](https://ui.nuxt.com/)
 
+<img src="./formkit-nuxt-ui.png" alt="FormKit Nuxt UI Screenshot" width="70%" />
+
 ## Features
 
 ✨ **16 Input Components** - Complete set of FormKit-wrapped Nuxt UI input components

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=4.0.0"
   },
-  "version": "0.7.3",
+  "version": "0.7.5",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/components/FUDataView.d.vue.ts

@@ -1,8 +1,8 @@
 import type { FormKitSchemaDefinition } from '@formkit/core';
 import type { PropType } from 'vue';
-declare var __VLS_6: {};
+declare var __VLS_12: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_6) => any;
+    default?: (props: typeof __VLS_12) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     data: {

package/dist/runtime/components/FUDataView.vue

@@ -30,11 +30,19 @@ if (props.data) {
 </script>
 
 <template>
-  <FormKitSchema
-    v-if="schema"
-    :schema="schema"
-    :data="formData"
-  />
+  <FormKit
+    v-model="formData"
+    :actions="false"
+    :form-class="formClass"
+    type="form"
+  >
+    <FormKitSchema
+      v-if="schema"
+      :schema="schema"
+      :data="formData"
+    />
+  </FormKit>
+
   <slot />
   <FuDataDebug
     v-if="debugData"

package/dist/runtime/components/FUDataView.vue.d.ts

@@ -1,8 +1,8 @@
 import type { FormKitSchemaDefinition } from '@formkit/core';
 import type { PropType } from 'vue';
-declare var __VLS_6: {};
+declare var __VLS_12: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_6) => any;
+    default?: (props: typeof __VLS_12) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     data: {

package/dist/runtime/components/inputs/FUCheckbox.vue

@@ -6,7 +6,7 @@ const props = defineProps({
     required: true
   }
 });
-const { handleInput, handleChange, styleClass, modelValue, color } = useFormKitInput(props.context);
+const { handleInput, handleChange, styleClass, modelValue, color, validSlotNames } = useFormKitInput(props.context);
 </script>
 
 <template>
@@ -29,5 +29,16 @@ const { handleInput, handleChange, styleClass, modelValue, color } = useFormKitI
     :ui="context.ui"
     @change="handleChange"
     @update:model-value="handleInput"
-  />
+  >
+    <template
+      v-for="slotName in validSlotNames"
+      :key="slotName"
+      #[slotName]="slotProps"
+    >
+      <component
+        :is="context?.slots[slotName]"
+        v-bind="{ ...context, ...slotProps }"
+      />
+    </template>
+  </UCheckbox>
 </template>

package/dist/runtime/components/inputs/FUCheckboxGroup.vue

@@ -6,7 +6,7 @@ const props = defineProps({
     required: true
   }
 });
-const { handleInput, handleChange, styleClass, color, modelValue, items } = useFormKitInput(props.context);
+const { handleInput, handleChange, styleClass, color, modelValue, items, validSlotNames } = useFormKitInput(props.context);
 </script>
 
 <template>
@@ -30,5 +30,16 @@ const { handleInput, handleChange, styleClass, color, modelValue, items } = useF
     :name="context.name"
     @change="handleChange"
     @update:model-value="handleInput"
-  />
+  >
+    <template
+      v-for="slotName in validSlotNames"
+      :key="slotName"
+      #[slotName]="slotProps"
+    >
+      <component
+        :is="context?.slots[slotName]"
+        v-bind="{ ...context, ...slotProps }"
+      />
+    </template>
+  </UCheckboxGroup>
 </template>

package/dist/runtime/components/inputs/FUInput.vue

@@ -6,7 +6,7 @@ const props = defineProps({
     required: true
   }
 });
-const { handleInput, handleChange, isInvalid, styleClass, color, modelValue } = useFormKitInput(props.context);
+const { handleInput, handleChange, isInvalid, styleClass, color, modelValue, validSlotNames } = useFormKitInput(props.context);
 </script>
 
 <template>
@@ -46,5 +46,16 @@ const { handleInput, handleChange, isInvalid, styleClass, color, modelValue } =
     :ui="context.ui"
     @change="handleChange"
     @update:model-value="handleInput"
-  />
+  >
+    <template
+      v-for="slotName in validSlotNames"
+      :key="slotName"
+      #[slotName]="slotProps"
+    >
+      <component
+        :is="context?.slots[slotName]"
+        v-bind="{ ...context, ...slotProps }"
+      />
+    </template>
+  </UInput>
 </template>

package/dist/runtime/components/inputs/FUInputDate.vue

@@ -6,7 +6,7 @@ const props = defineProps({
     required: true
   }
 });
-const { handleInput, handleChange, isInvalid, styleClass, color, modelValue } = useFormKitInput(props.context);
+const { handleInput, handleChange, isInvalid, styleClass, color, modelValue, validSlotNames } = useFormKitInput(props.context);
 </script>
 
 <template>
@@ -48,5 +48,16 @@ const { handleInput, handleChange, isInvalid, styleClass, color, modelValue } =
     :ui="context.ui"
     @change="handleChange"
     @update:model-value="handleInput"
-  />
+  >
+    <template
+      v-for="slotName in validSlotNames"
+      :key="slotName"
+      #[slotName]="slotProps"
+    >
+      <component
+        :is="context?.slots[slotName]"
+        v-bind="{ ...context, ...slotProps }"
+      />
+    </template>
+  </UInputDate>
 </template>

package/dist/runtime/components/inputs/FUInputMenu.vue

@@ -6,7 +6,7 @@ const props = defineProps({
     required: true
   }
 });
-const { handleInput, handleChange, isInvalid, styleClass, color, modelValue, items } = useFormKitInput(props.context);
+const { handleInput, handleChange, isInvalid, styleClass, color, modelValue, items, validSlotNames } = useFormKitInput(props.context);
 </script>
 
 <template>
@@ -61,5 +61,16 @@ const { handleInput, handleChange, isInvalid, styleClass, color, modelValue, ite
     :ui="context.ui"
     @change="handleChange"
     @update:model-value="handleInput"
-  />
+  >
+    <template
+      v-for="slotName in validSlotNames"
+      :key="slotName"
+      #[slotName]="slotProps"
+    >
+      <component
+        :is="context?.slots[slotName]"
+        v-bind="{ ...context, ...slotProps }"
+      />
+    </template>
+  </UInputMenu>
 </template>

package/dist/runtime/components/inputs/FUInputNumber.vue

@@ -6,7 +6,7 @@ const props = defineProps({
     required: true
   }
 });
-const { handleInput, handleChange, isInvalid, styleClass, color, modelValue } = useFormKitInput(props.context);
+const { handleInput, handleChange, isInvalid, styleClass, color, modelValue, validSlotNames } = useFormKitInput(props.context);
 </script>
 
 <template>
@@ -45,5 +45,16 @@ const { handleInput, handleChange, isInvalid, styleClass, color, modelValue } =
     :ui="context.ui"
     @change="handleChange"
     @update:model-value="handleInput"
-  />
+  >
+    <template
+      v-for="slotName in validSlotNames"
+      :key="slotName"
+      #[slotName]="slotProps"
+    >
+      <component
+        :is="context?.slots[slotName]"
+        v-bind="{ ...context, ...slotProps }"
+      />
+    </template>
+  </UInputNumber>
 </template>

package/dist/runtime/components/inputs/FUInputTags.vue

@@ -6,7 +6,7 @@ const props = defineProps({
     required: true
   }
 });
-const { handleInput, handleChange, isInvalid, styleClass, color, modelValue } = useFormKitInput(props.context);
+const { handleInput, handleChange, isInvalid, styleClass, color, modelValue, validSlotNames } = useFormKitInput(props.context);
 </script>
 
 <template>
@@ -49,5 +49,16 @@ const { handleInput, handleChange, isInvalid, styleClass, color, modelValue } =
     :ui="context.ui"
     @change="handleChange"
     @update:model-value="handleInput"
-  />
+  >
+    <template
+      v-for="slotName in validSlotNames"
+      :key="slotName"
+      #[slotName]="slotProps"
+    >
+      <component
+        :is="context?.slots[slotName]"
+        v-bind="{ ...context, ...slotProps }"
+      />
+    </template>
+  </UInputTags>
 </template>

package/dist/runtime/components/inputs/FUInputTime.vue

@@ -6,7 +6,7 @@ const props = defineProps({
     required: true
   }
 });
-const { handleInput, handleChange, isInvalid, styleClass, color, modelValue } = useFormKitInput(props.context);
+const { handleInput, handleChange, isInvalid, styleClass, color, modelValue, validSlotNames } = useFormKitInput(props.context);
 </script>
 
 <template>
@@ -46,5 +46,16 @@ const { handleInput, handleChange, isInvalid, styleClass, color, modelValue } =
     :ui="context.ui"
     @change="handleChange"
     @update:model-value="handleInput"
-  />
+  >
+    <template
+      v-for="slotName in validSlotNames"
+      :key="slotName"
+      #[slotName]="slotProps"
+    >
+      <component
+        :is="context?.slots[slotName]"
+        v-bind="{ ...context, ...slotProps }"
+      />
+    </template>
+  </UInputTime>
 </template>

package/dist/runtime/components/inputs/FURadioGroup.vue

@@ -6,7 +6,7 @@ const props = defineProps({
     required: true
   }
 });
-const { handleInput, handleChange, styleClass, color, modelValue, items } = useFormKitInput(props.context);
+const { handleInput, handleChange, styleClass, color, modelValue, items, validSlotNames } = useFormKitInput(props.context);
 </script>
 
 <template>
@@ -31,5 +31,16 @@ const { handleInput, handleChange, styleClass, color, modelValue, items } = useF
     :ui="context.ui"
     @change="handleChange"
     @update:model-value="handleInput"
-  />
+  >
+    <template
+      v-for="slotName in validSlotNames"
+      :key="slotName"
+      #[slotName]="slotProps"
+    >
+      <component
+        :is="context?.slots[slotName]"
+        v-bind="{ ...context, ...slotProps }"
+      />
+    </template>
+  </URadioGroup>
 </template>

package/dist/runtime/components/inputs/FUSelect.vue

@@ -6,7 +6,7 @@ const props = defineProps({
     required: true
   }
 });
-const { handleInput, handleChange, isInvalid, color, styleClass, modelValue, items } = useFormKitInput(props.context);
+const { handleInput, handleChange, isInvalid, color, styleClass, modelValue, items, validSlotNames } = useFormKitInput(props.context);
 </script>
 
 <template>
@@ -47,5 +47,16 @@ const { handleInput, handleChange, isInvalid, color, styleClass, modelValue, ite
     :ui="context.ui"
     @change="handleChange"
     @update:model-value="handleInput"
-  />
+  >
+    <template
+      v-for="slotName in validSlotNames"
+      :key="slotName"
+      #[slotName]="slotProps"
+    >
+      <component
+        :is="context?.slots[slotName]"
+        v-bind="{ ...context, ...slotProps }"
+      />
+    </template>
+  </USelect>
 </template>

package/dist/runtime/components/inputs/FUSelectMenu.vue

@@ -6,7 +6,7 @@ const props = defineProps({
     required: true
   }
 });
-const { handleInput, handleChange, isInvalid, styleClass, color, modelValue, items } = useFormKitInput(props.context);
+const { handleInput, handleChange, isInvalid, styleClass, color, modelValue, items, validSlotNames } = useFormKitInput(props.context);
 </script>
 
 <template>
@@ -58,5 +58,16 @@ const { handleInput, handleChange, isInvalid, styleClass, color, modelValue, ite
     :ui="context.ui"
     @change="handleChange"
     @update:model-value="handleInput"
-  />
+  >
+    <template
+      v-for="slotName in validSlotNames"
+      :key="slotName"
+      #[slotName]="slotProps"
+    >
+      <component
+        :is="context?.slots[slotName]"
+        v-bind="{ ...context, ...slotProps }"
+      />
+    </template>
+  </USelectMenu>
 </template>

package/dist/runtime/components/inputs/FUSwitch.vue

@@ -6,7 +6,7 @@ const props = defineProps({
     required: true
   }
 });
-const { handleInput, handleChange, styleClass, color, modelValue } = useFormKitInput(props.context);
+const { handleInput, handleChange, styleClass, color, modelValue, validSlotNames } = useFormKitInput(props.context);
 </script>
 
 <template>
@@ -30,5 +30,16 @@ const { handleInput, handleChange, styleClass, color, modelValue } = useFormKitI
     :ui="context.ui"
     @change="handleChange"
     @update:model-value="handleInput"
-  />
+  >
+    <template
+      v-for="slotName in validSlotNames"
+      :key="slotName"
+      #[slotName]="slotProps"
+    >
+      <component
+        :is="context?.slots[slotName]"
+        v-bind="{ ...context, ...slotProps }"
+      />
+    </template>
+  </USwitch>
 </template>

package/dist/runtime/components/inputs/FUTextarea.vue

@@ -6,7 +6,7 @@ const props = defineProps({
     required: true
   }
 });
-const { handleInput, handleChange, styleClass, color, isInvalid, modelValue } = useFormKitInput(props.context);
+const { handleInput, handleChange, styleClass, color, isInvalid, modelValue, validSlotNames } = useFormKitInput(props.context);
 </script>
 
 <template>
@@ -46,5 +46,16 @@ const { handleInput, handleChange, styleClass, color, isInvalid, modelValue } =
     :ui="context.ui"
     @change="handleChange"
     @update:model-value="handleInput"
-  />
+  >
+    <template
+      v-for="slotName in validSlotNames"
+      :key="slotName"
+      #[slotName]="slotProps"
+    >
+      <component
+        :is="context?.slots[slotName]"
+        v-bind="{ ...context, ...slotProps }"
+      />
+    </template>
+  </UTextarea>
 </template>

package/dist/runtime/index.d.ts

@@ -1,4 +1,9 @@
-import type { FormKitInputs } from '@formkit/inputs';
+import type { FormKitBaseSlots, FormKitInputs } from '@formkit/inputs';
+import type { CheckboxSlots, CheckboxGroupSlots, RadioGroupSlots, InputSlots, TextareaSlots, SelectSlots, SelectMenuSlots, InputDateSlots, InputMenuSlots, InputNumberSlots, InputTagsSlots, InputTimeSlots, SwitchSlots } from '@nuxt/ui';
+/**
+ * Keeps all slots from 1st argument, add any slots from 2nd type which do not collide with the 1st's names.
+ */
+type MergeSlots<A, B> = A & Omit<B, keyof A>;
 declare module '@formkit/inputs' {
     interface FormKitInputProps<Props extends FormKitInputs<Props>> {
         nuxtUICheckbox: {
@@ -68,4 +73,20 @@ declare module '@formkit/inputs' {
             type: 'nuxtUIOutputList';
         };
     }
+    interface FormKitInputSlots<Props extends FormKitInputs<Props>> {
+        nuxtUICheckbox: MergeSlots<FormKitBaseSlots<Props>, CheckboxSlots>;
+        nuxtUICheckboxGroup: MergeSlots<FormKitBaseSlots<Props>, CheckboxGroupSlots>;
+        nuxtUIInput: MergeSlots<FormKitBaseSlots<Props>, InputSlots>;
+        nuxtUIInputDate: MergeSlots<FormKitBaseSlots<Props>, InputDateSlots>;
+        nuxtUIInputMenu: MergeSlots<FormKitBaseSlots<Props>, InputMenuSlots>;
+        nuxtUIInputNumber: MergeSlots<FormKitBaseSlots<Props>, InputNumberSlots>;
+        nuxtUIInputTags: MergeSlots<FormKitBaseSlots<Props>, InputTagsSlots>;
+        nuxtUIInputTime: MergeSlots<FormKitBaseSlots<Props>, InputTimeSlots>;
+        nuxtUIRadioGroup: MergeSlots<FormKitBaseSlots<Props>, RadioGroupSlots>;
+        nuxtUISelect: MergeSlots<FormKitBaseSlots<Props>, SelectSlots>;
+        nuxtUISelectMenu: MergeSlots<FormKitBaseSlots<Props>, SelectMenuSlots>;
+        nuxtUISwitch: MergeSlots<FormKitBaseSlots<Props>, SwitchSlots>;
+        nuxtUITextarea: MergeSlots<FormKitBaseSlots<Props>, TextareaSlots>;
+    }
 }
+export {};

package/dist/runtime/plugin.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("nuxt/app").Plugin<Record<string, unknown>> & import("nuxt/app").ObjectPlugin<Record<string, unknown>>;
+declare const _default: import("#app").Plugin<Record<string, unknown>> & import("#app").ObjectPlugin<Record<string, unknown>>;
 export default _default;

package/dist/runtime/plugins/index.js

@@ -1,5 +1,5 @@
 export function addNuxtAsteriskPlugin(node) {
-  if (!node.props.type.startsWith("nuxtUI") || node.props.type.startsWith("UFOutput"))
+  if (!node.props.type.startsWith("nuxtUI") || node.props.type.startsWith("FUOutput"))
     return;
   node.on("created", () => {
     if (node.props.definition?.schema) {

package/dist/runtime/utils/colorConverter.js

@@ -5,16 +5,16 @@ export function convertColorToHex(color) {
   if (trimmedColor.startsWith("#")) {
     return normalizeHex(trimmedColor);
   }
-  if (trimmedColor.startsWith("rgb")) {
+  if (trimmedColor.toLowerCase().startsWith("rgb")) {
     return rgbToHex(trimmedColor);
   }
-  if (trimmedColor.startsWith("hsl")) {
+  if (trimmedColor.toLowerCase().startsWith("hsl")) {
     return hslToHex(trimmedColor);
   }
-  if (trimmedColor.startsWith("cmyk")) {
+  if (trimmedColor.toLowerCase().startsWith("cmyk")) {
     return cmykToHex(trimmedColor);
   }
-  if (trimmedColor.startsWith("lab")) {
+  if (trimmedColor.toLowerCase().startsWith("lab")) {
     return labToHex(trimmedColor);
   }
   if (/^[\da-f]{3,8}$/i.test(trimmedColor)) {
@@ -23,7 +23,10 @@ export function convertColorToHex(color) {
   return "#000000";
 }
 function normalizeHex(hex) {
-  const cleaned = hex.replace("#", "");
+  const cleaned = hex.replace("#", "").toLowerCase();
+  if (!/^[\da-f]+$/i.test(cleaned) || cleaned.length === 0) {
+    return "#000000";
+  }
   if (cleaned.length === 3) {
     return `#${cleaned[0]}${cleaned[0]}${cleaned[1]}${cleaned[1]}${cleaned[2]}${cleaned[2]}`;
   }
@@ -33,10 +36,16 @@ function normalizeHex(hex) {
   if (cleaned.length === 8) {
     return `#${cleaned.substring(0, 6)}`;
   }
-  return `#${cleaned.substring(0, 6).padEnd(6, "0")}`;
+  if (cleaned.length === 6) {
+    return `#${cleaned}`;
+  }
+  if (cleaned.length < 6) {
+    return `#${cleaned.padEnd(6, "0")}`;
+  }
+  return `#${cleaned.substring(0, 6)}`;
 }
 function rgbToHex(rgb) {
-  const match = rgb.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*[\d.]+)?\)/);
+  const match = rgb.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*[\d.]+)?\)/i);
   if (!match)
     return "#000000";
   const r = Number.parseInt(match[1], 10);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sfxcode/formkit-nuxt-ui",
-  "version": "0.7.3",
+  "version": "0.7.5",
   "description": "FormKit integration for Nuxt UI - Seamlessly connect FormKit form handling with Nuxt UI components",
   "author": {
     "name": "Tom",
@@ -40,14 +40,17 @@
     ".": {
       "types": "./dist/types.d.mts",
       "import": "./dist/module.mjs"
+    },
+    "./runtime": {
+      "types": "./dist/runtime/index.d.ts",
+      "import": "./dist/runtime/index.js"
     }
   },
   "main": "./dist/module.mjs",
   "typesVersions": {
     "*": {
       ".": [
-        "./dist/types.d.mts",
-        "./dist/runtime/index.d.ts"
+        "./dist/types.d.mts"
       ]
     }
   },