@sfxcode/nuxt-ui-formkit 0.8.2

package/dist/runtime/formkit/plugins/index.js

@@ -0,0 +1,55 @@
+export function addNuxtAsteriskPlugin(node) {
+  if (!node.props.type.startsWith("nuxtUI") || node.props.type.startsWith("FUOutput"))
+    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/formkit/plugins/index.mjs

@@ -0,0 +1,55 @@
+export function addNuxtAsteriskPlugin(node) {
+  if (!node.props.type.startsWith("nuxtUI") || node.props.type.startsWith("FUOutput"))
+    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/plugin.d.ts

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

package/dist/runtime/plugin.js

@@ -0,0 +1,3 @@
+import { defineNuxtPlugin } from "#app";
+export default defineNuxtPlugin((_nuxtApp) => {
+});

package/dist/runtime/server/tsconfig.json

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

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

@@ -0,0 +1,5 @@
+/**
+ * Converts various color formats to hex
+ * Supports: hex, rgb, rgba, hsl, hsla, cmyk, lab
+ */
+export declare function convertColorToHex(color: string): string;

package/dist/runtime/utils/colorConverter.js

@@ -0,0 +1,134 @@
+export function convertColorToHex(color) {
+  if (!color)
+    return "#000000";
+  const trimmedColor = color.trim();
+  if (trimmedColor.startsWith("#")) {
+    return normalizeHex(trimmedColor);
+  }
+  if (trimmedColor.toLowerCase().startsWith("rgb")) {
+    return rgbToHex(trimmedColor);
+  }
+  if (trimmedColor.toLowerCase().startsWith("hsl")) {
+    return hslToHex(trimmedColor);
+  }
+  if (trimmedColor.toLowerCase().startsWith("cmyk")) {
+    return cmykToHex(trimmedColor);
+  }
+  if (trimmedColor.toLowerCase().startsWith("lab")) {
+    return labToHex(trimmedColor);
+  }
+  if (/^[\da-f]{3,8}$/i.test(trimmedColor)) {
+    return normalizeHex(`#${trimmedColor}`);
+  }
+  return "#000000";
+}
+function normalizeHex(hex) {
+  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]}`;
+  }
+  if (cleaned.length === 4) {
+    return `#${cleaned[0]}${cleaned[0]}${cleaned[1]}${cleaned[1]}${cleaned[2]}${cleaned[2]}`;
+  }
+  if (cleaned.length === 8) {
+    return `#${cleaned.substring(0, 6)}`;
+  }
+  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.]+)?\)/i);
+  if (!match)
+    return "#000000";
+  const r = Number.parseInt(match[1], 10);
+  const g = Number.parseInt(match[2], 10);
+  const b = Number.parseInt(match[3], 10);
+  return `#${componentToHex(r)}${componentToHex(g)}${componentToHex(b)}`;
+}
+function hslToHex(hsl) {
+  const match = hsl.match(/hsla?\((\d+),\s*([\d.]+)%,\s*([\d.]+)%(?:,\s*[\d.]+)?\)/);
+  if (!match)
+    return "#000000";
+  const h = Number.parseInt(match[1], 10) / 360;
+  const s = Number.parseFloat(match[2]) / 100;
+  const l = Number.parseFloat(match[3]) / 100;
+  let r, g, b;
+  if (s === 0) {
+    r = g = b = l;
+  } else {
+    const hue2rgb = (p2, q2, t) => {
+      if (t < 0)
+        t += 1;
+      if (t > 1)
+        t -= 1;
+      if (t < 1 / 6)
+        return p2 + (q2 - p2) * 6 * t;
+      if (t < 1 / 2)
+        return q2;
+      if (t < 2 / 3)
+        return p2 + (q2 - p2) * (2 / 3 - t) * 6;
+      return p2;
+    };
+    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+    const p = 2 * l - q;
+    r = hue2rgb(p, q, h + 1 / 3);
+    g = hue2rgb(p, q, h);
+    b = hue2rgb(p, q, h - 1 / 3);
+  }
+  return `#${componentToHex(Math.round(r * 255))}${componentToHex(Math.round(g * 255))}${componentToHex(Math.round(b * 255))}`;
+}
+function cmykToHex(cmyk) {
+  const match = cmyk.match(/cmyk\(([\d.]+)%?,\s*([\d.]+)%?,\s*([\d.]+)%?,\s*([\d.]+)%?\)/);
+  if (!match)
+    return "#000000";
+  const c = Number.parseFloat(match[1]) / 100;
+  const m = Number.parseFloat(match[2]) / 100;
+  const y = Number.parseFloat(match[3]) / 100;
+  const k = Number.parseFloat(match[4]) / 100;
+  const r = Math.round(255 * (1 - c) * (1 - k));
+  const g = Math.round(255 * (1 - m) * (1 - k));
+  const b = Math.round(255 * (1 - y) * (1 - k));
+  return `#${componentToHex(r)}${componentToHex(g)}${componentToHex(b)}`;
+}
+function labToHex(lab) {
+  const match = lab.match(/lab\(([\d.]+)%?,\s*([-\d.]+),\s*([-\d.]+)\)/);
+  if (!match)
+    return "#000000";
+  const l = Number.parseFloat(match[1]);
+  const a = Number.parseFloat(match[2]);
+  const b = Number.parseFloat(match[3]);
+  let y = (l + 16) / 116;
+  let x = a / 500 + y;
+  let z = y - b / 200;
+  const labToXyzHelper = (t) => {
+    return t > 0.206897 ? t ** 3 : (t - 16 / 116) / 7.787;
+  };
+  x = 95.047 * labToXyzHelper(x);
+  y = 100 * labToXyzHelper(y);
+  z = 108.883 * labToXyzHelper(z);
+  x = x / 100;
+  y = y / 100;
+  z = z / 100;
+  let r = x * 3.2406 + y * -1.5372 + z * -0.4986;
+  let g = x * -0.9689 + y * 1.8758 + z * 0.0415;
+  let bl = x * 0.0557 + y * -0.204 + z * 1.057;
+  const xyzToRgbHelper = (t) => {
+    return t > 31308e-7 ? 1.055 * t ** (1 / 2.4) - 0.055 : 12.92 * t;
+  };
+  r = xyzToRgbHelper(r);
+  g = xyzToRgbHelper(g);
+  bl = xyzToRgbHelper(bl);
+  return `#${componentToHex(Math.max(0, Math.min(255, Math.round(r * 255))))}${componentToHex(Math.max(0, Math.min(255, Math.round(g * 255))))}${componentToHex(Math.max(0, Math.min(255, Math.round(bl * 255))))}`;
+}
+function componentToHex(c) {
+  const hex = Math.max(0, Math.min(255, c)).toString(16);
+  return hex.length === 1 ? `0${hex}` : hex;
+}

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

@@ -0,0 +1,2 @@
+export declare function durationToMinutes(duration: string): number;
+export declare function formattedDuration(duration: string): string;

package/dist/runtime/utils/durationConverter.js

@@ -0,0 +1,32 @@
+export function durationToMinutes(duration) {
+  let hours = 0;
+  let minutes = 0;
+  const lowerDuration = duration.toLowerCase();
+  if (lowerDuration.includes(":")) {
+    const [h, m] = lowerDuration.split(":").map((part) => +(part?.trim() || "0"));
+    hours = h ?? 0;
+    minutes = m ?? 0;
+  } else {
+    if (lowerDuration.includes("h")) {
+      hours = +(lowerDuration.split("h")[0]?.trim() || "0");
+      const remainder = lowerDuration.split("h")[1] || "";
+      if (remainder.includes("m"))
+        minutes = +(remainder.split("m")[0]?.trim() || "0");
+      else if (/^\d+$/.test(remainder))
+        minutes = +remainder;
+    } else if (lowerDuration.includes("m")) {
+      minutes = +(lowerDuration.split("m")[0]?.trim() || "0");
+    } else if (/^\d+$/.test(lowerDuration)) {
+      minutes = +lowerDuration;
+    }
+  }
+  return hours * 60 + minutes;
+}
+export function formattedDuration(duration) {
+  const minutes = durationToMinutes(duration);
+  const hours = Math.trunc(minutes / 60);
+  const remainingMinutes = minutes % 60;
+  if (minutes === 0)
+    return "0";
+  return `${hours > 0 ? `${hours}h` : ""}${hours > 0 && remainingMinutes > 0 ? " " : ""}${remainingMinutes > 0 ? `${remainingMinutes}m` : ""}`;
+}

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,114 @@
+{
+  "name": "@sfxcode/nuxt-ui-formkit",
+  "version": "0.8.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/nuxt-ui-formkit",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/sfxcode/nuxt-ui-formkit.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"
+    },
+    "./definitions": {
+      "types": "./dist/runtime/formkit/definitions/index.d.ts",
+      "import": "./dist/runtime/formkit/definitions/index.mjs"
+    },
+    "./plugins": {
+      "types": "./dist/runtime/formkit/plugins/index.d.ts",
+      "import": "./dist/runtime/formkit/plugins/index.mjs"
+    },
+    "./formkit": {
+      "types": "./dist/runtime/formkit/index.d.ts",
+      "import": "./dist/runtime/formkit/index.mjs"
+    }
+  },
+  "main": "./dist/module.mjs",
+  "typesVersions": {
+    "*": {
+      ".": [
+        "./dist/types.d.mts"
+      ],
+      "definitions": [
+        "./dist/runtime/formkit/definitions/index.d.ts"
+      ],
+      "plugins": [
+        "./dist/runtime/formkit/plugins/index.d.ts"
+      ],
+      "formkit": [
+        "./dist/runtime/formkit/index.d.ts"
+      ]
+    }
+  },
+  "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",
+    "mkdist": "^2.4.1",
+    "nuxt": "^4.3.1",
+    "sass-embedded": "^1.97.3",
+    "typescript": "~5.9.3",
+    "unbuild": "^3.6.1",
+    "vitest": "^4.0.18",
+    "vue-tsc": "^3.2.5"
+  }
+}