@sfxcode/formkit-nuxt-ui 0.7.6 → 0.7.8

package/dist/module.d.ts

@@ -0,0 +1,7 @@
+import * as _nuxt_schema from '@nuxt/schema';
+
+type ModuleOptions = Record<string, never>;
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
+
+export { _default as default };
+export type { ModuleOptions };

package/dist/module.json

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

package/dist/runtime/composables/useFormKitRepeater.mjs

@@ -0,0 +1,54 @@
+import { useFormKitSchema } from "./useFormKitSchema.mjs";
+export function useFormKitRepeater() {
+  const { addElement, addComponent, addElementsInOuterDiv } = useFormKitSchema();
+  function addInsertButton(label = "Add", innerClass = "", outerClass = "", buttonClass = "p-button-sm", iconClass = "pi pi-plus") {
+    return addElementsInOuterDiv([
+      addComponent("Button", { onClick: "$addNode($node.parent)", label, class: buttonClass, icon: iconClass }, "$node.parent.value.length == 0")
+    ], innerClass, outerClass);
+  }
+  function addListGroupFunctions(data, addNodeDefaultObject = {}) {
+    const swapElements = (array, index1, index2) => {
+      const newArray = [...array];
+      const temp = newArray[index1];
+      newArray[index1] = newArray[index2];
+      newArray[index2] = temp;
+      return newArray;
+    };
+    data.addNode = (parentNode) => () => {
+      const newArray = [...parentNode.value, addNodeDefaultObject];
+      parentNode.input(newArray, false);
+    };
+    data.removeNode = (parentNode, index) => () => {
+      parentNode.input(parentNode._value.filter((_, i) => i !== index), false);
+    };
+    data.moveNodeUp = (parentNode, index) => () => {
+      const array = [...parentNode.value];
+      if (index > 0)
+        parentNode.input(swapElements(array, index - 1, index), false);
+    };
+    data.moveNodeDown = (parentNode, index) => () => {
+      const array = [...parentNode.value];
+      if (index < array.length - 1)
+        parentNode.input(swapElements(array, index, index + 1), false);
+    };
+    data.copyNode = (parentNode, index) => () => {
+      const obj = parentNode.value[index];
+      const newArray = [...parentNode.value, { ...obj }];
+      parentNode.input(newArray, false);
+    };
+  }
+  function addGroupButtons(innerClass = "", outerClass = "col-4", label = "Actions", help = "", render = "true") {
+    const addButtonComponent = (onClick = "", label2 = "", icon = "", severity = "", render2 = "true", styleClass = "p-button-sm") => {
+      return addComponent("Button", { onClick, label: label2, icon, class: styleClass, severity }, render2);
+    };
+    return addElementsInOuterDiv([
+      addButtonComponent("$removeNode($node.parent, $index)", "", "pi pi-times", "danger"),
+      addButtonComponent("$copyNode($node.parent, $index)", "", "pi pi-plus"),
+      addButtonComponent("$moveNodeUp($node.parent, $index)", "", "pi pi-arrow-up", "secondary", "$index != 0"),
+      addElement("span", [], { class: "p-space" }, "$index == 0"),
+      addButtonComponent("$moveNodeDown($node.parent, $index)", "", "pi pi-arrow-down", "secondary", "$index < $node.parent.value.length -1"),
+      addElement("span", [], { class: "p-space" }, "$index == $node.parent.value.length -1")
+    ], `p-action-buttons ${innerClass}`, outerClass, label, help, render);
+  }
+  return { addInsertButton, addGroupButtons, addListGroupFunctions };
+}

package/dist/runtime/composables/useFormKitSchema.mjs

@@ -0,0 +1,58 @@
+export function useFormKitSchema() {
+  const addComponent = (component = "Button", props = {}, render = true, formKitAttrs = {}) => {
+    return {
+      $cmp: component,
+      if: render.toString(),
+      props,
+      ...formKitAttrs
+    };
+  };
+  const addElement = (element = "div", children = [], attrs = {}, render = true, formKitAttrs = {}) => {
+    return {
+      $el: element,
+      if: render.toString(),
+      attrs,
+      children,
+      ...formKitAttrs
+    };
+  };
+  const addGroup = (name, children = [], render = true, formKitAttrs = {}) => {
+    return {
+      $formkit: "group",
+      if: render.toString(),
+      name,
+      children,
+      ...formKitAttrs
+    };
+  };
+  const addList = (name, children = [], dynamic = true, render = true, formKitAttrs = {}) => {
+    return {
+      $formkit: "list",
+      if: render.toString(),
+      name,
+      dynamic,
+      children,
+      ...formKitAttrs
+    };
+  };
+  const addListGroup = (children = [], render = true, formKitAttrs = {}) => {
+    return {
+      $formkit: "group",
+      if: render.toString(),
+      for: ["item", "index", "$items"],
+      // 👈 $items is in the slot’s scope
+      key: "$item",
+      index: "$index",
+      children,
+      ...formKitAttrs
+    };
+  };
+  const addElementsInOuterDiv = (children = [], innerClass = "", outerClass = "", label = "", help = "", render = true) => {
+    const inner = addElement("div", children, { class: `formkit-inner ${innerClass}`, style: "position: relative;" });
+    const labelDiv = addElement("label", [label], { class: "formkit-label" });
+    const wrapperDiv = addElement("div", [labelDiv, inner], { class: "formkit-wrapper" });
+    const helpDiv = addElement("div", [help], { class: "formkit-help" });
+    return addElement("div", [wrapperDiv, helpDiv], { class: `formkit-outer ${outerClass}`, style: "position: relative;" }, render);
+  };
+  return { addComponent, addElement, addGroup, addList, addListGroup, addElementsInOuterDiv };
+}

package/dist/runtime/{definitions → formkit/definitions}/index.js

@@ -1,5 +1,5 @@
-import { nuxtUICheckboxDefinition, nuxtUICheckboxGroupDefinition, nuxtUIColorPickerDefinition, nuxtUIInputDateDefinition, nuxtUIInputDefinition, nuxtUIInputMenuDefinition, nuxtUIInputNumberDefinition, nuxtUIInputTagsDefinition, nuxtUIInputTimeDefinition, nuxtUIPinInputDefinition, nuxtUIRadioGroupDefinition, nuxtUISelectDefinition, nuxtUISelectMenuDefinition, nuxtUISliderDefinition, nuxtUISwitchDefinition, nuxtUITextareaDefinition } from "../definitions/input.js";
-import { nuxtUIOutputBooleanDefinition, nuxtUIOutputDateDefinition, nuxtUIOutputLinkDefinition, nuxtUIOutputListDefinition, nuxtUIOutputNumberDefinition, nuxtUIOutputTextDefinition } from "../definitions/output.js";
+import { nuxtUICheckboxDefinition, nuxtUICheckboxGroupDefinition, nuxtUIColorPickerDefinition, nuxtUIInputDateDefinition, nuxtUIInputDefinition, nuxtUIInputMenuDefinition, nuxtUIInputNumberDefinition, nuxtUIInputTagsDefinition, nuxtUIInputTimeDefinition, nuxtUIPinInputDefinition, nuxtUIRadioGroupDefinition, nuxtUISelectDefinition, nuxtUISelectMenuDefinition, nuxtUISliderDefinition, nuxtUISwitchDefinition, nuxtUITextareaDefinition } from "./input.js";
+import { nuxtUIOutputBooleanDefinition, nuxtUIOutputDateDefinition, nuxtUIOutputLinkDefinition, nuxtUIOutputListDefinition, nuxtUIOutputNumberDefinition, nuxtUIOutputTextDefinition } from "./output.js";
 export const nuxtUIInputs = {
   nuxtUICheckbox: nuxtUICheckboxDefinition,
   nuxtUICheckboxGroup: nuxtUICheckboxGroupDefinition,

package/dist/runtime/formkit/definitions/index.mjs

@@ -0,0 +1,28 @@
+import { nuxtUICheckboxDefinition, nuxtUICheckboxGroupDefinition, nuxtUIColorPickerDefinition, nuxtUIInputDateDefinition, nuxtUIInputDefinition, nuxtUIInputMenuDefinition, nuxtUIInputNumberDefinition, nuxtUIInputTagsDefinition, nuxtUIInputTimeDefinition, nuxtUIPinInputDefinition, nuxtUIRadioGroupDefinition, nuxtUISelectDefinition, nuxtUISelectMenuDefinition, nuxtUISliderDefinition, nuxtUISwitchDefinition, nuxtUITextareaDefinition } from "./input.mjs";
+import { nuxtUIOutputBooleanDefinition, nuxtUIOutputDateDefinition, nuxtUIOutputLinkDefinition, nuxtUIOutputListDefinition, nuxtUIOutputNumberDefinition, nuxtUIOutputTextDefinition } from "./output.mjs";
+export const nuxtUIInputs = {
+  nuxtUICheckbox: nuxtUICheckboxDefinition,
+  nuxtUICheckboxGroup: nuxtUICheckboxGroupDefinition,
+  nuxtUIColorPicker: nuxtUIColorPickerDefinition,
+  nuxtUIInput: nuxtUIInputDefinition,
+  nuxtUIInputDate: nuxtUIInputDateDefinition,
+  nuxtUIInputMenu: nuxtUIInputMenuDefinition,
+  nuxtUIInputNumber: nuxtUIInputNumberDefinition,
+  nuxtUIInputTags: nuxtUIInputTagsDefinition,
+  nuxtUIInputTime: nuxtUIInputTimeDefinition,
+  nuxtUIPinInput: nuxtUIPinInputDefinition,
+  nuxtUIRadioGroup: nuxtUIRadioGroupDefinition,
+  nuxtUISelect: nuxtUISelectDefinition,
+  nuxtUISelectMenu: nuxtUISelectMenuDefinition,
+  nuxtUISlider: nuxtUISliderDefinition,
+  nuxtUISwitch: nuxtUISwitchDefinition,
+  nuxtUITextarea: nuxtUITextareaDefinition
+};
+export const nuxtUIOutputs = {
+  nuxtUIOutputBoolean: nuxtUIOutputBooleanDefinition,
+  nuxtUIOutputDate: nuxtUIOutputDateDefinition,
+  nuxtUIOutputLink: nuxtUIOutputLinkDefinition,
+  nuxtUIOutputList: nuxtUIOutputListDefinition,
+  nuxtUIOutputNumber: nuxtUIOutputNumberDefinition,
+  nuxtUIOutputText: nuxtUIOutputTextDefinition
+};

package/dist/runtime/{definitions → formkit/definitions}/input.js

@@ -1,20 +1,20 @@
 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";
+import FUCheckbox from "../../runtime/components/inputs/FUCheckbox.vue";
+import FUCheckboxGroup from "../../runtime/components/inputs/FUCheckboxGroup.vue";
+import FUColorPicker from "../../runtime/components/inputs/FUColorPicker.vue";
+import FUInput from "../../runtime/components/inputs/FUInput.vue";
+import FUInputDate from "../../runtime/components/inputs/FUInputDate.vue";
+import FUInputMenu from "../../runtime/components/inputs/FUInputMenu.vue";
+import FUInputNumber from "../../runtime/components/inputs/FUInputNumber.vue";
+import FUInputTags from "../../runtime/components/inputs/FUInputTags.vue";
+import FUInputTime from "../../runtime/components/inputs/FUInputTime.vue";
+import FUPinInput from "../../runtime/components/inputs/FUPinInput.vue";
+import FURadioGroup from "../../runtime/components/inputs/FURadioGroup.vue";
+import FUSelect from "../../runtime/components/inputs/FUSelect.vue";
+import FUSelectMenu from "../../runtime/components/inputs/FUSelectMenu.vue";
+import FUSlider from "../../runtime/components/inputs/FUSlider.vue";
+import FUSwitch from "../../runtime/components/inputs/FUSwitch.vue";
+import FUTextarea from "../../runtime/components/inputs/FUTextarea.vue";
 export const nuxtUICheckboxDefinition = createInput(FUCheckbox, {
   props: ["label", "description", "color", "variant", "size", "indicator", "icon", "indeterminateIcon", "autofocus", "ui"],
   family: "NuxtUIInput"

package/dist/runtime/formkit/definitions/input.mjs

@@ -0,0 +1,81 @@
+import { createInput } from "@formkit/vue";
+import FUCheckbox from "../../runtime/components/inputs/FUCheckbox.vue";
+import FUCheckboxGroup from "../../runtime/components/inputs/FUCheckboxGroup.vue";
+import FUColorPicker from "../../runtime/components/inputs/FUColorPicker.vue";
+import FUInput from "../../runtime/components/inputs/FUInput.vue";
+import FUInputDate from "../../runtime/components/inputs/FUInputDate.vue";
+import FUInputMenu from "../../runtime/components/inputs/FUInputMenu.vue";
+import FUInputNumber from "../../runtime/components/inputs/FUInputNumber.vue";
+import FUInputTags from "../../runtime/components/inputs/FUInputTags.vue";
+import FUInputTime from "../../runtime/components/inputs/FUInputTime.vue";
+import FUPinInput from "../../runtime/components/inputs/FUPinInput.vue";
+import FURadioGroup from "../../runtime/components/inputs/FURadioGroup.vue";
+import FUSelect from "../../runtime/components/inputs/FUSelect.vue";
+import FUSelectMenu from "../../runtime/components/inputs/FUSelectMenu.vue";
+import FUSlider from "../../runtime/components/inputs/FUSlider.vue";
+import FUSwitch from "../../runtime/components/inputs/FUSwitch.vue";
+import FUTextarea from "../../runtime/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 → formkit/definitions}/output.js

@@ -1,10 +1,10 @@
 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";
+import FUOutputDate from "../../runtime/components/output/FUOutputDate.vue";
+import FUOutputBoolean from "../../runtime/components/output/FUOutputBoolean.vue";
+import FUOutputText from "../../runtime/components/output/FUOutputText.vue";
+import FUOutputLink from "../../runtime/components/output/FUOutputLink.vue";
+import FUOutputNumber from "../../runtime/components/output/FUOutputNumber.vue";
+import FUOutputList from "../../runtime/components/output/FUOutputList.vue";
 export const nuxtUIOutputTextDefinition = createInput(FUOutputText, {
   props: ["size", "color", "variant", "icon", "leadingIcon", "trailingIcon", "leading", "trailing", "onIconClicked", "onLeadingIconClicked", "onTrailingIconClicked", "outputType"],
   family: "NuxtUIOutput"

package/dist/runtime/formkit/definitions/output.mjs

@@ -0,0 +1,31 @@
+import { createInput } from "@formkit/vue";
+import FUOutputDate from "../../runtime/components/output/FUOutputDate.vue";
+import FUOutputBoolean from "../../runtime/components/output/FUOutputBoolean.vue";
+import FUOutputText from "../../runtime/components/output/FUOutputText.vue";
+import FUOutputLink from "../../runtime/components/output/FUOutputLink.vue";
+import FUOutputNumber from "../../runtime/components/output/FUOutputNumber.vue";
+import FUOutputList from "../../runtime/components/output/FUOutputList.vue";
+export const nuxtUIOutputTextDefinition = createInput(FUOutputText, {
+  props: ["size", "color", "variant", "icon", "leadingIcon", "trailingIcon", "leading", "trailing", "onIconClicked", "onLeadingIconClicked", "onTrailingIconClicked", "outputType"],
+  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/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.mjs

@@ -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/utils/colorConverter.mjs

@@ -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.mjs

@@ -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.mjs

@@ -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.mjs

@@ -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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sfxcode/formkit-nuxt-ui",
-  "version": "0.7.6",
+  "version": "0.7.8",
   "description": "FormKit integration for Nuxt UI - Seamlessly connect FormKit form handling with Nuxt UI components",
   "author": {
     "name": "Tom",
@@ -41,17 +41,20 @@
       "types": "./dist/types.d.mts",
       "import": "./dist/module.mjs"
     },
-    "./runtime": {
-      "types": "./dist/runtime/index.d.ts",
-      "import": "./dist/runtime/index.js"
+    "./runtime/formkit": {
+      "types": "./dist/runtime/formkit/index.d.ts",
+      "import": "./dist/runtime/formkit/index.mjs",
+      "require": "./dist/runtime/formkit/index.js"
     },
-    "./runtime/definitions": {
-      "types": "./dist/runtime/definitions/index.d.ts",
-      "import": "./dist/runtime/definitions/index.js"
+    "./runtime/formkit/definitions": {
+      "types": "./dist/runtime/formkit/definitions/index.d.ts",
+      "import": "./dist/runtime/formkit/definitions/index.mjs",
+      "require": "./dist/runtime/formkit/definitions/index.js"
     },
-    "./runtime/plugins": {
-      "types": "./dist/runtime/plugins/index.d.ts",
-      "import": "./dist/runtime/plugins/index.js"
+    "./runtime/formkit/plugins": {
+      "types": "./dist/runtime/formkit/plugins/index.d.ts",
+      "import": "./dist/runtime/formkit/plugins/index.mjs",
+      "require": "./dist/runtime/formkit/plugins/index.js"
     }
   },
   "main": "./dist/module.mjs",
@@ -94,9 +97,11 @@
     "@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"
   }

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

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

package/dist/runtime/formkit.config.js

@@ -1,33 +0,0 @@
-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;