@sfxcode/formkit-nuxt-ui 0.7.2

package/dist/runtime/definitions/input.js

@@ -0,0 +1,81 @@
+import { createInput } from "@formkit/vue";
+import FUCheckbox from "../components/inputs/FUCheckbox.vue";
+import FUCheckboxGroup from "../components/inputs/FUCheckboxGroup.vue";
+import FUColorPicker from "../components/inputs/FUColorPicker.vue";
+import FUInput from "../components/inputs/FUInput.vue";
+import FUInputDate from "../components/inputs/FUInputDate.vue";
+import FUInputMenu from "../components/inputs/FUInputMenu.vue";
+import FUInputNumber from "../components/inputs/FUInputNumber.vue";
+import FUInputTags from "../components/inputs/FUInputTags.vue";
+import FUInputTime from "../components/inputs/FUInputTime.vue";
+import FUPinInput from "../components/inputs/FUPinInput.vue";
+import FURadioGroup from "../components/inputs/FURadioGroup.vue";
+import FUSelect from "../components/inputs/FUSelect.vue";
+import FUSelectMenu from "../components/inputs/FUSelectMenu.vue";
+import FUSlider from "../components/inputs/FUSlider.vue";
+import FUSwitch from "../components/inputs/FUSwitch.vue";
+import FUTextarea from "../components/inputs/FUTextarea.vue";
+export const nuxtUICheckboxDefinition = createInput(FUCheckbox, {
+  props: ["label", "description", "color", "variant", "size", "indicator", "icon", "indeterminateIcon", "autofocus", "ui"],
+  family: "NuxtUIInput"
+});
+export const nuxtUICheckboxGroupDefinition = createInput(FUCheckboxGroup, {
+  props: ["options", "legend", "valueKey", "labelKey", "descriptionKey", "size", "variant", "orientation", "loop", "color", "indicator", "icon", "ui", "items"],
+  family: "NuxtUIInput"
+});
+export const nuxtUIColorPickerDefinition = createInput(FUColorPicker, {
+  props: ["size", "inputClass", "format", "throttle", "ui"],
+  family: "NuxtUIInput"
+});
+export const nuxtUIInputDefinition = createInput(FUInput, {
+  props: ["inputType", "size", "autocomplete", "autofocus", "autofocusDelay", "highlight", "fixed", "color", "icon", "avatar", "leading", "leadingIcon", "trailing", "trailingIcon", "loading", "loadingIcon", "placeholder", "list", "max", "maxLength", "min", "minLength", "pattern", "step", "variant", "ui"],
+  family: "NuxtUIInput"
+});
+export const nuxtUIInputDateDefinition = createInput(FUInputDate, {
+  props: ["defaultValue", "color", "variant", "size", "highlight", "fixed", "autofocus", "autofocusDelay", "range", "separatorIcon", "icon", "avatar", "leading", "leadingIcon", "trailing", "trailingIcon", "loading", "loadingIcon", "placeholder", "defaultPlaceholder", "hourCycle", "step", "granularity", "hideTimeZone", "maxValue", "minValue", "isDateUnavailable", "ui"],
+  family: "NuxtUIInput"
+});
+export const nuxtUIInputMenuDefinition = createInput(FUInputMenu, {
+  props: ["options", "inputType", "placeholder", "color", "variant", "size", "autofocus", "autofocusDelay", "trailingIcon", "selectedIcon", "deleteIcon", "clear", "clearIcon", "arrow", "portal", "virtualize", "valueKey", "labelKey", "descriptionKey", "multiple", "highlight", "fixed", "createItem", "filterFields", "ignoreFilter", "defaultOpen", "resetSearchTermOnBlur", "resetSearchTermOnSelect", "resetModelValueOnClear", "highlightOnHover", "openOnClick", "openOnFocus", "icon", "leading", "leadingIcon", "trailing", "loading", "loadingIcon", "list", "autocomplete", "searchTerm", "ui"],
+  family: "NuxtUIInput"
+});
+export const nuxtUIInputNumberDefinition = createInput(FUInputNumber, {
+  props: ["placeholder", "color", "variant", "size", "highlight", "fixed", "orientation", "increment", "incrementIcon", "incrementDisabled", "decrement", "decrementIcon", "decrementDisabled", "autofocus", "autofocusDelay", "min", "max", "step", "stepSnapping", "formatOptions", "disableWheelChange", "invertWheelChange", "focusOnChange", "list", "autocomplete", "ui"],
+  family: "NuxtUIInput"
+});
+export const nuxtUIInputTagsDefinition = createInput(FUInputTags, {
+  props: ["placeholder", "maxLength", "color", "variant", "size", "autofocus", "autofocusDelay", "deleteIcon", "highlight", "fixed", "addOnPaste", "addOnTab", "addOnBlur", "duplicate", "delimiters", "max", "convertValue", "displayValue", "icon", "avatar", "leading", "leadingIcon", "trailing", "trailingIcon", "loading", "loadingIcon", "list", "autocomplete", "ui"],
+  family: "NuxtUIInput"
+});
+export const nuxtUIInputTimeDefinition = createInput(FUInputTime, {
+  props: ["color", "variant", "size", "highlight", "fixed", "autofocus", "autofocusDelay", "defaultValue", "placeholder", "defaultPlaceholder", "hourCycle", "step", "stepSnapping", "granularity", "hideTimeZone", "maxValue", "minValue", "icon", "avatar", "leading", "leadingIcon", "trailing", "trailingIcon", "loading", "loadingIcon", "ui"],
+  family: "NuxtUIInput"
+});
+export const nuxtUIPinInputDefinition = createInput(FUPinInput, {
+  props: ["color", "variant", "size", "length", "autofocus", "autofocusDelay", "highlight", "fixed", "defaultValue", "mask", "otp", "placeholder", "ui"],
+  family: "NuxtUIInput"
+});
+export const nuxtUIRadioGroupDefinition = createInput(FURadioGroup, {
+  props: ["options", "legend", "valueKey", "labelKey", "descriptionKey", "size", "variant", "orientation", "loop", "name", "color", "indicator", "ui"],
+  family: "NuxtUIInput"
+});
+export const nuxtUISelectDefinition = createInput(FUSelect, {
+  props: ["options", "placeholder", "color", "variant", "size", "selectedIcon", "arrow", "portal", "valueKey", "labelKey", "descriptionKey", "defaultValue", "multiple", "highlight", "fixed", "autofocus", "autofocusDelay", "open", "defaultOpen", "autocomplete", "icon", "avatar", "leading", "leadingIcon", "trailing", "trailingIcon", "loading", "loadingIcon", "ui"],
+  family: "NuxtUIInput"
+});
+export const nuxtUISelectMenuDefinition = createInput(FUSelectMenu, {
+  props: ["options", "placeholder", "searchInput", "color", "variant", "icon", "avatar", "leading", "leadingIcon", "trailing", "trailingIcon", "loading", "loadingIcon", "selectedIcon", "clear", "clearIcon", "arrow", "portal", "virtualize", "valueKey", "labelKey", "descriptionKey", "defaultValue", "multiple", "highlight", "fixed", "createItem", "filterFields", "ignoreFilter", "autofocus", "autofocusDelay", "open", "defaultOpen", "resetSearchTermOnBlur", "resetSearchTermOnSelect", "resetModelValueOnClear", "highlightOnHover", "searchTerm", "ui"],
+  family: "NuxtUIInput"
+});
+export const nuxtUISliderDefinition = createInput(FUSlider, {
+  props: ["color", "size", "orientation", "tooltip", "defaultValue", "name", "inverted", "min", "max", "step", "minStepsBetweenThumbs", "ui"],
+  family: "NuxtUIInput"
+});
+export const nuxtUISwitchDefinition = createInput(FUSwitch, {
+  props: ["color", "size", "loading", "loadingIcon", "checkedIcon", "uncheckedIcon", "label", "description", "defaultValue", "autofocus", "ui"],
+  family: "NuxtUIInput"
+});
+export const nuxtUITextareaDefinition = createInput(FUTextarea, {
+  props: ["color", "size", "variant", "placeholder", "autofocus", "autofocusDelay", "autoresize", "autoresizeDelay", "rows", "maxrows", "highlight", "fixed", "icon", "avatar", "leading", "leadingIcon", "trailing", "trailingIcon", "loading", "loadingIcon", "cols", "dirname", "maxlength", "minlength", "wrap", "ui"],
+  family: "NuxtUIInput"
+});

package/dist/runtime/definitions/output.d.ts

@@ -0,0 +1,7 @@
+import type { FormKitTypeDefinition } from '@formkit/core';
+export declare const nuxtUIOutputTextDefinition: FormKitTypeDefinition;
+export declare const nuxtUIOutputBooleanDefinition: FormKitTypeDefinition;
+export declare const nuxtUIOutputDateDefinition: FormKitTypeDefinition;
+export declare const nuxtUIOutputLinkDefinition: FormKitTypeDefinition;
+export declare const nuxtUIOutputNumberDefinition: FormKitTypeDefinition;
+export declare const nuxtUIOutputListDefinition: FormKitTypeDefinition;

package/dist/runtime/definitions/output.js

@@ -0,0 +1,31 @@
+import { createInput } from "@formkit/vue";
+import FUOutputDate from "../components/output/FUOutputDate.vue";
+import FUOutputBoolean from "../components/output/FUOutputBoolean.vue";
+import FUOutputText from "../components/output/FUOutputText.vue";
+import FUOutputLink from "../components/output/FUOutputLink.vue";
+import FUOutputNumber from "../components/output/FUOutputNumber.vue";
+import FUOutputList from "../components/output/FUOutputList.vue";
+export const nuxtUIOutputTextDefinition = createInput(FUOutputText, {
+  props: ["size", "color", "variant", "icon", "leadingIcon", "trailingIcon", "leading", "trailing", "onIconClicked", "onLeadingIconClicked", "onTrailingIconClicked"],
+  family: "NuxtUIOutput"
+});
+export const nuxtUIOutputBooleanDefinition = createInput(FUOutputBoolean, {
+  props: ["size", "color", "variant", "icon", "leadingIcon", "trailingIcon", "leading", "trailing", "trueValue", "falseValue", "trueIcon", "falseIcon", "onIconClicked", "onLeadingIconClicked", "onTrailingIconClicked"],
+  family: "NuxtUIOutput"
+});
+export const nuxtUIOutputDateDefinition = createInput(FUOutputDate, {
+  props: ["size", "color", "variant", "icon", "leadingIcon", "trailingIcon", "leading", "trailing", "dateStyle", "timeStyle", "locale", "relative", "onIconClicked", "onLeadingIconClicked", "onTrailingIconClicked"],
+  family: "NuxtUIOutput"
+});
+export const nuxtUIOutputLinkDefinition = createInput(FUOutputLink, {
+  props: ["size", "color", "variant", "icon", "leadingIcon", "trailingIcon", "leading", "trailing", "target", "rel", "underline", "onIconClicked", "onLeadingIconClicked", "onTrailingIconClicked"],
+  family: "NuxtUIOutput"
+});
+export const nuxtUIOutputNumberDefinition = createInput(FUOutputNumber, {
+  props: ["size", "color", "variant", "icon", "leadingIcon", "trailingIcon", "leading", "trailing", "locale", "formatOptions", "onIconClicked", "onLeadingIconClicked", "onTrailingIconClicked"],
+  family: "NuxtUIOutput"
+});
+export const nuxtUIOutputListDefinition = createInput(FUOutputList, {
+  props: ["size", "color", "variant", "icon", "leadingIcon", "trailingIcon", "leading", "trailing", "listType", "separator", "itemClass", "onIconClicked", "onLeadingIconClicked", "onTrailingIconClicked"],
+  family: "NuxtUIOutput"
+});

package/dist/runtime/formkit.config.d.ts

@@ -0,0 +1,3 @@
+import type { DefaultConfigOptions } from '@formkit/vue';
+declare const config: DefaultConfigOptions;
+export default config;

package/dist/runtime/formkit.config.js

@@ -0,0 +1,33 @@
+import { createAutoAnimatePlugin } from "@formkit/addons";
+import { de, en } from "@formkit/i18n";
+import { nuxtUIInputs, nuxtUIOutputs } from "../runtime/definitions";
+import { addNuxtAsteriskPlugin } from "../runtime/plugins";
+const config = {
+  locales: { en, de },
+  // Define the active locale
+  locale: "en",
+  inputs: { ...nuxtUIInputs, ...nuxtUIOutputs },
+  // ignore FormKit iconLoader since we use our own icons and don't want to load the default ones
+  iconLoader: (_) => {
+    return void 0;
+  },
+  plugins: [
+    createAutoAnimatePlugin(
+      {
+        /* optional AutoAnimate config */
+        // default:
+        duration: 250,
+        easing: "ease-in-out"
+      },
+      {
+        /* optional animation targets object */
+        // default:
+        global: ["outer", "inner"],
+        form: ["form"],
+        repeater: ["items"]
+      }
+    ),
+    addNuxtAsteriskPlugin
+  ]
+};
+export default config;

package/dist/runtime/plugin.d.ts

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

package/dist/runtime/plugin.js

@@ -0,0 +1,5 @@
+import { defineNuxtPlugin } from "#app";
+import { consola } from "consola";
+export default defineNuxtPlugin((_nuxtApp) => {
+  consola.info("Plugin injected by @sfxcode/formkit-nuxt-ui!");
+});

package/dist/runtime/plugins/index.d.ts

@@ -0,0 +1,3 @@
+import type { FormKitNode } from '@formkit/core';
+export declare function addNuxtAsteriskPlugin(node: FormKitNode): void;
+export declare function addNuxtLabelPlugin(node: FormKitNode): void;

package/dist/runtime/plugins/index.js

@@ -0,0 +1,55 @@
+export function addNuxtAsteriskPlugin(node) {
+  if (!node.props.type.startsWith("nuxtUI") || node.props.type.startsWith("UFOutput"))
+    return;
+  node.on("created", () => {
+    if (node.props.definition?.schema) {
+      const schemaFn = node.props.definition?.schema;
+      node.props.definition.schema = (sectionsSchema = {}) => {
+        sectionsSchema.label = {
+          children: ["$label", {
+            $el: "span",
+            if: "$state.required",
+            attrs: {
+              class: "text-error nuxt-ui-formkit--asterisk"
+            },
+            children: [" *"]
+          }]
+        };
+        return schemaFn(sectionsSchema);
+      };
+    }
+  });
+}
+export function addNuxtLabelPlugin(node) {
+  if (!node.props.type.startsWith("nuxtUi"))
+    return;
+  node.on("created", () => {
+    if (node.props.definition?.schema) {
+      const schemaFn = node.props.definition?.schema;
+      node.props.definition.schema = (sectionsSchema = {}) => {
+        sectionsSchema.label = {
+          children: [{
+            $el: "span",
+            attrs: {
+              title: "$help",
+              class: "p-formkit-label"
+            },
+            children: ["$label"]
+          }, {
+            $el: "span",
+            if: "$state.required",
+            attrs: {
+              class: "p-formkit-required",
+              title: "$help"
+            },
+            children: ["*"]
+          }]
+        };
+        sectionsSchema.help = {
+          children: []
+        };
+        return schemaFn(sectionsSchema);
+      };
+    }
+  });
+}

package/dist/runtime/server/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../../../.nuxt/tsconfig.server.json",
+}

package/dist/runtime/utils/useFormKitInput.d.ts

@@ -0,0 +1,13 @@
+import type { FormKitFrameworkContext } from '@formkit/core';
+export declare function useFormKitInput(context: FormKitFrameworkContext): {
+    isInvalid: import("vue").ComputedRef<boolean>;
+    validSlotNames: import("vue").ComputedRef<string[]>;
+    styleClass: import("vue").ComputedRef<string>;
+    color: import("vue").ComputedRef<"error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral">;
+    handleBlur: (event: FocusEvent) => void;
+    handleChange: (_: unknown) => void;
+    handleInput: (_: unknown) => void;
+    handleSelect: (e: unknown) => void;
+    modelValue: import("vue").WritableComputedRef<any, any>;
+    items: import("vue").ComputedRef<any[]>;
+};

package/dist/runtime/utils/useFormKitInput.js

@@ -0,0 +1,42 @@
+import { computed } from "vue";
+export function useFormKitInput(context) {
+  const isInvalid = computed(() => {
+    return context?.state?.validationVisible && !context?.state?.valid;
+  });
+  const styleClass = computed(() => {
+    return isInvalid.value ? `${context?.attrs?.class || ""} nuxt-ui-formkit--invalid` : String(context?.attrs?.class || "");
+  });
+  const color = computed(() => {
+    return isInvalid.value ? "error" : context?.color || "primary";
+  });
+  const formKitCreateInputSlots = /* @__PURE__ */ new Set(["label", "help", "messages", "message", "input"]);
+  const validSlotNames = computed(
+    () => Object.keys(context?.slots || {}).filter((slotName) => !formKitCreateInputSlots.has(slotName))
+  );
+  function handleBlur(event) {
+    context?.handlers?.blur?.(event);
+  }
+  function handleChange(_) {
+    context?.node?.input?.(context?._value);
+  }
+  function handleInput(_) {
+    context?.node?.input?.(context?._value);
+  }
+  function handleSelect(e) {
+    context?.node?.input?.(e);
+  }
+  const modelValue = computed({
+    get: () => context._value,
+    set: (value) => {
+      context.node.input(value);
+    }
+  });
+  const items = computed(() => {
+    const options = context.options ?? context.attrs.items;
+    if (Array.isArray(options)) {
+      return options;
+    }
+    return [];
+  });
+  return { isInvalid, validSlotNames, styleClass, color, handleBlur, handleChange, handleInput, handleSelect, modelValue, items };
+}

package/dist/runtime/utils/useFormKitOutput.d.ts

@@ -0,0 +1,10 @@
+import type { FormKitFrameworkContext } from '@formkit/core';
+export declare function useFormKitOutput(context: FormKitFrameworkContext): {
+    colorClass: import("vue").ComputedRef<string>;
+    sizeClass: import("vue").ComputedRef<string>;
+    variantClass: import("vue").ComputedRef<string>;
+    containerClass: import("vue").ComputedRef<string>;
+    iconClass: import("vue").ComputedRef<string>;
+    leadingIconName: import("vue").ComputedRef<string | null>;
+    trailingIconName: import("vue").ComputedRef<string | null>;
+};

package/dist/runtime/utils/useFormKitOutput.js

@@ -0,0 +1,73 @@
+import { computed } from "vue";
+export function useFormKitOutput(context) {
+  const colorClass = computed(() => {
+    const color = context.color ?? "neutral";
+    const colorMap = {
+      primary: "text-primary",
+      secondary: "text-secondary",
+      success: "text-success",
+      info: "text-info",
+      warning: "text-warning",
+      error: "text-error",
+      neutral: "text-gray-900 dark:text-gray-100"
+    };
+    return colorMap[color] || colorMap.neutral;
+  });
+  const sizeClass = computed(() => {
+    const size = context.size ?? "md";
+    const sizeMap = {
+      xs: "text-xs",
+      sm: "text-sm",
+      md: "text-base",
+      lg: "text-lg",
+      xl: "text-xl"
+    };
+    return sizeMap[size] || sizeMap.md;
+  });
+  const variantClass = computed(() => {
+    const variant = context.variant ?? "none";
+    const variantMap = {
+      outline: "border border-gray-300 dark:border-gray-700 rounded-md px-2 py-1",
+      soft: "bg-gray-100 dark:bg-gray-800 rounded-md",
+      subtle: "bg-gray-50 dark:bg-gray-900 rounded-md",
+      ghost: "hover:bg-gray-100 dark:hover:bg-gray-800 rounded-md",
+      none: ""
+    };
+    return variantMap[variant] || variantMap.none;
+  });
+  const containerClass = computed(() => {
+    return [
+      "inline-flex items-center gap-2",
+      colorClass.value,
+      sizeClass.value,
+      variantClass.value,
+      context?.attrs?.class
+    ].filter(Boolean).join(" ");
+  });
+  const iconClass = computed(() => {
+    const size = context.size ?? "md";
+    const iconSizeMap = {
+      xs: "h-3 w-3",
+      sm: "h-4 w-4",
+      md: "h-5 w-5",
+      lg: "h-6 w-6",
+      xl: "h-7 w-7"
+    };
+    return iconSizeMap[size] || iconSizeMap.md;
+  });
+  const leadingIconName = computed(() => {
+    return context.leadingIcon || context.leading && context.icon || null;
+  });
+  const trailingIconName = computed(() => {
+    return context.trailingIcon || context.trailing && context.icon || null;
+  });
+  return {
+    colorClass,
+    sizeClass,
+    variantClass,
+    containerClass,
+    iconClass,
+    leadingIconName,
+    trailingIconName
+  };
+}

package/dist/types.d.mts

@@ -0,0 +1,3 @@
+export { default } from './module.mjs'
+
+export { type ModuleOptions } from './module.mjs'

package/package.json

@@ -0,0 +1,91 @@
+{
+  "name": "@sfxcode/formkit-nuxt-ui",
+  "version": "0.7.2",
+  "description": "FormKit integration for Nuxt UI - Seamlessly connect FormKit form handling with Nuxt UI components",
+  "author": {
+    "name": "Tom",
+    "email": "tom@sfxcode.com"
+  },
+  "contributors": [
+    {
+      "name": "sfxcode",
+      "email": "tom@sfxcode.com"
+    }
+  ],
+  "license": "MIT",
+  "homepage": "https://github.com/sfxcode/formkit-nuxt-ui",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/sfxcode/formkit-nuxt-ui.git"
+  },
+  "keywords": [
+    "nuxt",
+    "nuxt-module",
+    "nuxt3",
+    "nuxt4",
+    "formkit",
+    "nuxt-ui",
+    "vue",
+    "vue3",
+    "forms",
+    "form-validation",
+    "ui-components",
+    "typescript",
+    "design-system",
+    "form-builder"
+  ],
+  "packageManager": "pnpm@10.30.1+sha512.3590e550d5384caa39bd5c7c739f72270234b2f6059e13018f975c313b1eb9fefcc09714048765d4d9efe961382c312e624572c0420762bdc5d5940cdf9be73a",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/types.d.mts",
+      "import": "./dist/module.mjs"
+    }
+  },
+  "main": "./dist/module.mjs",
+  "typesVersions": {
+    "*": {
+      ".": [
+        "./dist/types.d.mts"
+      ]
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "prepack": "nuxt-module-build build",
+    "dev": "npm run dev:prepare && nuxi dev playground",
+    "dev:build": "nuxi build playground",
+    "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
+    "release": "npm run lint && npm run test && npm run prepack && changelogen --patch --release && npm publish --access=public && git push --follow-tags",
+    "lint": "eslint .",
+    "test": "vitest run",
+    "test:watch": "vitest watch",
+    "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit"
+  },
+  "dependencies": {
+    "@formkit/addons": "^1.7.2",
+    "@formkit/nuxt": "^1.7.2",
+    "@nuxt/kit": "^4.3.1",
+    "@nuxt/ui": "^4.4.0"
+  },
+  "devDependencies": {
+    "@iconify-json/heroicons": "^1.2.3",
+    "@iconify-json/lucide": "^1.2.92",
+    "@iconify-json/simple-icons": "^1.2.71",
+    "@nuxt/devtools": "^3.2.1",
+    "@nuxt/eslint-config": "^1.15.1",
+    "@nuxt/module-builder": "^1.0.2",
+    "@nuxt/schema": "^4.3.1",
+    "@nuxt/test-utils": "^4.0.0",
+    "@types/node": "latest",
+    "changelogen": "^0.6.2",
+    "eslint": "^10.0.1",
+    "nuxt": "^4.3.1",
+    "sass-embedded": "^1.97.3",
+    "typescript": "~5.9.3",
+    "vitest": "^4.0.18",
+    "vue-tsc": "^3.2.5"
+  }
+}