@sfxcode/nuxt-ui-formkit 0.11.0 → 1.0.1

package/dist/module.json

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

package/dist/runtime/composables/useFormKitSchema.js

@@ -48,11 +48,11 @@ export function useFormKitSchema() {
     };
   };
   const addElementsInOuterDiv = (children = [], innerClass = "", outerClass = "", label = "", help = "", render = true) => {
-    const inner = addElement("div", children, { class: `formkit-inner ${innerClass}`, style: "position: relative;" });
+    const inner = addElement("div", children, { class: 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 addElement("div", [wrapperDiv, helpDiv], { class: outerClass, style: "position: relative;" }, render);
   };
   return { addComponent, addElement, addGroup, addList, addListGroup, addElementsInOuterDiv };
 }

package/dist/runtime/formkit/definitions/index.d.ts

@@ -1,29 +1,30 @@
 export * from './input.js';
 export * from './output.js';
 export declare const nuxtUIInputs: {
-    nuxtUICheckbox: import("@formkit/core").FormKitTypeDefinition;
-    nuxtUICheckboxGroup: import("@formkit/core").FormKitTypeDefinition;
-    nuxtUIColorPicker: import("@formkit/core").FormKitTypeDefinition;
-    nuxtUIInput: import("@formkit/core").FormKitTypeDefinition;
-    nuxtUIInputDate: import("@formkit/core").FormKitTypeDefinition;
-    nuxtUIInputMenu: import("@formkit/core").FormKitTypeDefinition;
-    nuxtUIInputNumber: import("@formkit/core").FormKitTypeDefinition;
-    nuxtUIInputTags: import("@formkit/core").FormKitTypeDefinition;
-    nuxtUIInputTime: import("@formkit/core").FormKitTypeDefinition;
-    nuxtUIListbox: import("@formkit/core").FormKitTypeDefinition;
-    nuxtUIPinInput: import("@formkit/core").FormKitTypeDefinition;
-    nuxtUIRadioGroup: import("@formkit/core").FormKitTypeDefinition;
-    nuxtUISelect: import("@formkit/core").FormKitTypeDefinition;
-    nuxtUISelectMenu: import("@formkit/core").FormKitTypeDefinition;
-    nuxtUISlider: import("@formkit/core").FormKitTypeDefinition;
-    nuxtUISwitch: import("@formkit/core").FormKitTypeDefinition;
-    nuxtUITextarea: import("@formkit/core").FormKitTypeDefinition;
+    nuxtUICheckbox: FormKitTypeDefinition;
+    nuxtUICheckboxGroup: FormKitTypeDefinition;
+    nuxtUIColorPicker: FormKitTypeDefinition;
+    nuxtUIInput: FormKitTypeDefinition;
+    nuxtUIInputDate: FormKitTypeDefinition;
+    nuxtUIInputMenu: FormKitTypeDefinition;
+    nuxtUIInputNumber: FormKitTypeDefinition;
+    nuxtUIInputTags: FormKitTypeDefinition;
+    nuxtUIInputTime: FormKitTypeDefinition;
+    nuxtUIListbox: FormKitTypeDefinition;
+    nuxtUIPinInput: FormKitTypeDefinition;
+    nuxtUIRadioGroup: FormKitTypeDefinition;
+    nuxtUISelect: FormKitTypeDefinition;
+    nuxtUISelectMenu: FormKitTypeDefinition;
+    nuxtUISlider: FormKitTypeDefinition;
+    nuxtUISwitch: FormKitTypeDefinition;
+    nuxtUITextarea: FormKitTypeDefinition;
+    nuxtUIRepeater: FormKitTypeDefinition;
 };
 export declare const nuxtUIOutputs: {
-    nuxtUIOutputBoolean: import("@formkit/core").FormKitTypeDefinition;
-    nuxtUIOutputDate: import("@formkit/core").FormKitTypeDefinition;
-    nuxtUIOutputLink: import("@formkit/core").FormKitTypeDefinition;
-    nuxtUIOutputList: import("@formkit/core").FormKitTypeDefinition;
-    nuxtUIOutputNumber: import("@formkit/core").FormKitTypeDefinition;
-    nuxtUIOutputText: import("@formkit/core").FormKitTypeDefinition;
+    nuxtUIOutputBoolean: FormKitTypeDefinition;
+    nuxtUIOutputDate: FormKitTypeDefinition;
+    nuxtUIOutputLink: FormKitTypeDefinition;
+    nuxtUIOutputList: FormKitTypeDefinition;
+    nuxtUIOutputNumber: FormKitTypeDefinition;
+    nuxtUIOutputText: FormKitTypeDefinition;
 };

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

@@ -1,5 +1,6 @@
 import { nuxtUICheckboxDefinition, nuxtUICheckboxGroupDefinition, nuxtUIColorPickerDefinition, nuxtUIInputDateDefinition, nuxtUIInputDefinition, nuxtUIInputMenuDefinition, nuxtUIInputNumberDefinition, nuxtUIInputTagsDefinition, nuxtUIInputTimeDefinition, nuxtUIListboxDefinition, nuxtUIPinInputDefinition, nuxtUIRadioGroupDefinition, nuxtUISelectDefinition, nuxtUISelectMenuDefinition, nuxtUISliderDefinition, nuxtUISwitchDefinition, nuxtUITextareaDefinition } from "./input.js";
 import { nuxtUIOutputBooleanDefinition, nuxtUIOutputDateDefinition, nuxtUIOutputLinkDefinition, nuxtUIOutputListDefinition, nuxtUIOutputNumberDefinition, nuxtUIOutputTextDefinition } from "./output.js";
+import { nuxtUIRepeaterDefinition } from "./repeater.js";
 export * from "./input.js";
 export * from "./output.js";
 export const nuxtUIInputs = {
@@ -19,7 +20,8 @@ export const nuxtUIInputs = {
   nuxtUISelectMenu: nuxtUISelectMenuDefinition,
   nuxtUISlider: nuxtUISliderDefinition,
   nuxtUISwitch: nuxtUISwitchDefinition,
-  nuxtUITextarea: nuxtUITextareaDefinition
+  nuxtUITextarea: nuxtUITextareaDefinition,
+  nuxtUIRepeater: nuxtUIRepeaterDefinition
 };
 export const nuxtUIOutputs = {
   nuxtUIOutputBoolean: nuxtUIOutputBooleanDefinition,

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

@@ -1,5 +1,6 @@
 import { nuxtUICheckboxDefinition, nuxtUICheckboxGroupDefinition, nuxtUIColorPickerDefinition, nuxtUIInputDateDefinition, nuxtUIInputDefinition, nuxtUIInputMenuDefinition, nuxtUIInputNumberDefinition, nuxtUIInputTagsDefinition, nuxtUIInputTimeDefinition, nuxtUIListboxDefinition, nuxtUIPinInputDefinition, nuxtUIRadioGroupDefinition, nuxtUISelectDefinition, nuxtUISelectMenuDefinition, nuxtUISliderDefinition, nuxtUISwitchDefinition, nuxtUITextareaDefinition } from "./input.mjs";
 import { nuxtUIOutputBooleanDefinition, nuxtUIOutputDateDefinition, nuxtUIOutputLinkDefinition, nuxtUIOutputListDefinition, nuxtUIOutputNumberDefinition, nuxtUIOutputTextDefinition } from "./output.mjs";
+import { nuxtUIRepeaterDefinition } from "./repeater.mjs";
 export * from "./input.mjs";
 export * from "./output.mjs";
 export const nuxtUIInputs = {
@@ -19,7 +20,8 @@ export const nuxtUIInputs = {
   nuxtUISelectMenu: nuxtUISelectMenuDefinition,
   nuxtUISlider: nuxtUISliderDefinition,
   nuxtUISwitch: nuxtUISwitchDefinition,
-  nuxtUITextarea: nuxtUITextareaDefinition
+  nuxtUITextarea: nuxtUITextareaDefinition,
+  nuxtUIRepeater: nuxtUIRepeaterDefinition
 };
 export const nuxtUIOutputs = {
   nuxtUIOutputBoolean: nuxtUIOutputBooleanDefinition,

package/dist/runtime/formkit/definitions/repeater.d.ts

@@ -0,0 +1,2 @@
+import type { FormKitTypeDefinition } from '@formkit/core';
+export declare const nuxtUIRepeaterDefinition: FormKitTypeDefinition;

package/dist/runtime/formkit/definitions/repeater.js

@@ -0,0 +1,84 @@
+import { createInput } from "@formkit/vue";
+import { useFormKitSchema } from "../../composables/useFormKitSchema.js";
+const { addList, addElement, addListGroup, addComponent, addElementsInOuterDiv } = useFormKitSchema();
+function addActionButtons(innerClass = "", outerClass = "", label, help = "", render = "true") {
+  const addButtonComponent = (onClick = "", icon = "", color = "", render2 = "true", disabled) => {
+    return addComponent("UButton", { onClick, icon, color, disabled }, render2);
+  };
+  return addElementsInOuterDiv([
+    addButtonComponent("$removeNode($node.parent, $index)", "i-lucide-x", "error"),
+    addButtonComponent("$cloneNode($node.parent, $index)", "i-lucide-copy", "secondary", "$displayCloneButton"),
+    addButtonComponent("$moveNodeDown($node.parent, $index)", "i-lucide-arrow-down", "primary", "true", "$index === $node.parent.value.length -1"),
+    addButtonComponent("$moveNodeUp($node.parent, $index)", "i-lucide-arrow-up", "primary", "true", "$index === 0")
+  ], innerClass, outerClass, label, help, render);
+}
+function addInsertButton(label = "Add Item", icon = "i-lucide-plus", styleClass = "", render = "true") {
+  return addElement("div", [
+    addComponent("UButton", { onClick: "$addNode($node)", label, icon })
+  ], { class: styleClass }, render);
+}
+export const nuxtUIRepeaterDefinition = createInput(
+  [
+    addElement("div", [
+      addList("$listName", [
+        addInsertButton("$addButtonLabel", "i-lucide-plus", "$addButtonClass", "$node.children.length == 0 || $alwaysDisplayAddButton"),
+        addListGroup([
+          addElement("div", [
+            {
+              children: "$slots.default"
+            },
+            addActionButtons("$buttonsInnerClass", "$buttonsOuterClass", "$buttonsLabel")
+          ], { class: "$itemClass" })
+        ])
+      ], true, "true")
+    ], { class: "$listClass" })
+  ],
+  {
+    props: ["buttonsOuterClass", "buttonsInnerClass", "buttonsLabel", "addButtonLabel", "addButtonClass", "newItem", "itemClass", "listClass", "displayCloneButton", "alwaysDisplayAddButton"],
+    features: [addRepeaterHandler]
+  }
+);
+function addRepeaterHandler(node) {
+  const swapElements = (array, index1, index2) => {
+    const newArray = [...array];
+    const temp = newArray[index1];
+    newArray[index1] = newArray[index2];
+    newArray[index2] = temp;
+    return newArray;
+  };
+  node.on("created", () => {
+    node.context.listName = node.name;
+    node.context.removeNode = (parentNode, index) => () => {
+      if (parentNode && parentNode._value instanceof Array) {
+        parentNode.input(parentNode._value.filter((_, i) => i !== index), false);
+      }
+    };
+    node.context.addNode = (parentNode) => () => {
+      if (parentNode && parentNode._value instanceof Array) {
+        const newArray = [...parentNode.value, node.context.newItem || {}];
+        parentNode.input(newArray, false);
+      }
+    };
+    node.context.cloneNode = (parentNode, index) => () => {
+      if (parentNode && parentNode._value instanceof Array) {
+        const item = parentNode.value[index];
+        const newArray = [...parentNode.value.slice(0, index), { ...item }, ...parentNode.value.slice(index)];
+        parentNode.input([...newArray], false);
+      }
+    };
+    node.context.moveNodeUp = (parentNode, index) => () => {
+      if (parentNode && parentNode._value instanceof Array) {
+        const array = [...parentNode.value];
+        if (index > 0)
+          parentNode.input(swapElements(array, index - 1, index), false);
+      }
+    };
+    node.context.moveNodeDown = (parentNode, index) => () => {
+      if (parentNode && parentNode._value instanceof Array) {
+        const array = [...parentNode.value];
+        if (index < array.length - 1)
+          parentNode.input(swapElements(array, index, index + 1), false);
+      }
+    };
+  });
+}

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

@@ -0,0 +1,84 @@
+import { createInput } from "@formkit/vue";
+import { useFormKitSchema } from "../../composables/useFormKitSchema";
+const { addList, addElement, addListGroup, addComponent, addElementsInOuterDiv } = useFormKitSchema();
+function addActionButtons(innerClass = "", outerClass = "", label, help = "", render = "true") {
+  const addButtonComponent = (onClick = "", icon = "", color = "", render2 = "true", disabled) => {
+    return addComponent("UButton", { onClick, icon, color, disabled }, render2);
+  };
+  return addElementsInOuterDiv([
+    addButtonComponent("$removeNode($node.parent, $index)", "i-lucide-x", "error"),
+    addButtonComponent("$cloneNode($node.parent, $index)", "i-lucide-copy", "secondary", "$displayCloneButton"),
+    addButtonComponent("$moveNodeDown($node.parent, $index)", "i-lucide-arrow-down", "primary", "true", "$index === $node.parent.value.length -1"),
+    addButtonComponent("$moveNodeUp($node.parent, $index)", "i-lucide-arrow-up", "primary", "true", "$index === 0")
+  ], innerClass, outerClass, label, help, render);
+}
+function addInsertButton(label = "Add Item", icon = "i-lucide-plus", styleClass = "", render = "true") {
+  return addElement("div", [
+    addComponent("UButton", { onClick: "$addNode($node)", label, icon })
+  ], { class: styleClass }, render);
+}
+export const nuxtUIRepeaterDefinition = createInput(
+  [
+    addElement("div", [
+      addList("$listName", [
+        addInsertButton("$addButtonLabel", "i-lucide-plus", "$addButtonClass", "$node.children.length == 0 || $alwaysDisplayAddButton"),
+        addListGroup([
+          addElement("div", [
+            {
+              children: "$slots.default"
+            },
+            addActionButtons("$buttonsInnerClass", "$buttonsOuterClass", "$buttonsLabel")
+          ], { class: "$itemClass" })
+        ])
+      ], true, "true")
+    ], { class: "$listClass" })
+  ],
+  {
+    props: ["buttonsOuterClass", "buttonsInnerClass", "buttonsLabel", "addButtonLabel", "addButtonClass", "newItem", "itemClass", "listClass", "displayCloneButton", "alwaysDisplayAddButton"],
+    features: [addRepeaterHandler]
+  }
+);
+function addRepeaterHandler(node) {
+  const swapElements = (array, index1, index2) => {
+    const newArray = [...array];
+    const temp = newArray[index1];
+    newArray[index1] = newArray[index2];
+    newArray[index2] = temp;
+    return newArray;
+  };
+  node.on("created", () => {
+    node.context.listName = node.name;
+    node.context.removeNode = (parentNode, index) => () => {
+      if (parentNode && parentNode._value instanceof Array) {
+        parentNode.input(parentNode._value.filter((_, i) => i !== index), false);
+      }
+    };
+    node.context.addNode = (parentNode) => () => {
+      if (parentNode && parentNode._value instanceof Array) {
+        const newArray = [...parentNode.value, node.context.newItem || {}];
+        parentNode.input(newArray, false);
+      }
+    };
+    node.context.cloneNode = (parentNode, index) => () => {
+      if (parentNode && parentNode._value instanceof Array) {
+        const item = parentNode.value[index];
+        const newArray = [...parentNode.value.slice(0, index), { ...item }, ...parentNode.value.slice(index)];
+        parentNode.input([...newArray], false);
+      }
+    };
+    node.context.moveNodeUp = (parentNode, index) => () => {
+      if (parentNode && parentNode._value instanceof Array) {
+        const array = [...parentNode.value];
+        if (index > 0)
+          parentNode.input(swapElements(array, index - 1, index), false);
+      }
+    };
+    node.context.moveNodeDown = (parentNode, index) => () => {
+      if (parentNode && parentNode._value instanceof Array) {
+        const array = [...parentNode.value];
+        if (index < array.length - 1)
+          parentNode.input(swapElements(array, index, index + 1), false);
+      }
+    };
+  });
+}

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sfxcode/nuxt-ui-formkit",
-  "version": "0.11.0",
+  "version": "1.0.1",
   "description": "FormKit integration for Nuxt UI - Seamlessly connect FormKit form handling with Nuxt UI components",
   "author": {
     "name": "Tom",
@@ -34,7 +34,7 @@
     "design-system",
     "form-builder"
   ],
-  "packageManager": "pnpm@10.33.2+sha512.a90faf6feeab71ad6c6e57f94e0fe1a12f5dcc22cd754db40ae9593eb6a3e0b6b12e3540218bb37ae083404b1f2ce6db2a4121e979829b4aff94b99f49da1cf8",
+  "packageManager": "pnpm@11.0.9+sha512.34ce82e6780233cf9cad8685029a8f81d2e06196c5a9bad98879f7424940c6817c4e4524fb7d38b8553ceed48b9758b8ebaf1abd3600c232c4c8cf7366086f38",
   "type": "module",
   "exports": {
     ".": {
@@ -79,7 +79,7 @@
     "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 --major --release && npm publish --access=public && git push --follow-tags",
+    "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",
@@ -93,22 +93,25 @@
   },
   "devDependencies": {
     "@iconify-json/heroicons": "^1.2.3",
-    "@iconify-json/lucide": "^1.2.105",
-    "@iconify-json/simple-icons": "^1.2.80",
+    "@iconify-json/lucide": "^1.2.106",
+    "@iconify-json/simple-icons": "^1.2.81",
     "@nuxt/devtools": "4.0.0-alpha.4",
     "@nuxt/eslint-config": "^1.15.2",
     "@nuxt/module-builder": "^1.0.2",
     "@nuxt/schema": "^4.4.4",
     "@nuxt/test-utils": "^4.0.3",
     "@types/node": "latest",
+    "@vitejs/plugin-vue": "^6.0.6",
     "changelogen": "^0.6.2",
     "eslint": "^10.3.0",
+    "jsdom": "^29.1.1",
     "mkdist": "^2.4.1",
     "nuxt": "^4.4.4",
     "sass-embedded": "^1.99.0",
     "typescript": "~6.0.3",
     "unbuild": "^3.6.1",
     "vitest": "^4.1.5",
+    "vue": "^3.5.34",
     "vue-tsc": "^3.2.8"
   }
 }

package/dist/runtime/composables/useFormKitRepeater.d.ts

@@ -1,5 +0,0 @@
-export declare function useFormKitRepeater(): {
-    addInsertButton: (label?: string, icon?: string, styleClass?: string, render?: string) => object;
-    addGroupButtons: (innerClass?: string, outerClass?: string, label?: string, help?: string, render?: string) => object;
-    addListGroupFunctions: (data: Record<string, unknown>, addNodeDefaultObject?: object) => void;
-};

package/dist/runtime/composables/useFormKitRepeater.js

@@ -1,53 +0,0 @@
-import { useFormKitSchema } from "./useFormKitSchema.js";
-export function useFormKitRepeater() {
-  const { addComponent, addElement, addElementsInOuterDiv } = useFormKitSchema();
-  function addInsertButton(label = "Add Item", icon = "i-lucide-plus", styleClass = "", render = "$node.children.length == 0") {
-    return addElement("div", [
-      addComponent("UButton", { onClick: "$addNode($node)", label, icon })
-    ], { class: styleClass }, render);
-  }
-  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 array = [...parentNode.value];
-      array.splice(index + 1, 0, { ...obj });
-      parentNode.input(array, false);
-    };
-  }
-  function addGroupButtons(innerClass = "", outerClass = "", label = "", help = "", render = "true") {
-    const addButtonComponent = (onClick = "", icon = "", color = "", render2 = "true") => {
-      return addComponent("UButton", { onClick, icon, color }, render2);
-    };
-    return addElementsInOuterDiv([
-      addButtonComponent("$removeNode($node.parent, $index)", "i-lucide-x", "error"),
-      addButtonComponent("$copyNode($node.parent, $index)", "i-lucide-copy", "secondary"),
-      addButtonComponent("$moveNodeUp($node.parent, $index)", "i-lucide-arrow-up", "primary", "$index != 0"),
-      addButtonComponent("$moveNodeDown($node.parent, $index)", "i-lucide-arrow-down", "primary", "$index < $node.parent.value.length -1")
-    ], innerClass, outerClass, label, help, render);
-  }
-  return { addInsertButton, addGroupButtons, addListGroupFunctions };
-}