@sfxcode/nuxt-ui-formkit 1.0.6 → 1.1.0

package/dist/module.json

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

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

@@ -1,6 +1,6 @@
-declare var __VLS_7: {};
+declare var __VLS_19: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_7) => any;
+    default?: (props: typeof __VLS_19) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     data: {

package/dist/runtime/components/FUDataDebug.vue

@@ -6,7 +6,7 @@ defineProps({
   },
   header: {
     type: String,
-    default: "Debug"
+    default: "Debug Data"
   },
   textClass: {
     type: String,
@@ -18,15 +18,26 @@ defineProps({
 <template>
   <div class="formkit-debug">
     <client-only>
-      <h3 class="text-lg font-semibold mb-2">
-        {{ header }}
-      </h3>
-      <slot />
-      <pre
-        v-if="data"
-        :class="textClass"
-      >{{ data }}</pre>
-      <span v-else>No Data available</span>
+      <UCollapsible class="flex flex-col gap-2">
+        <UButton
+          :label="header"
+          color="neutral"
+          variant="outline"
+          leading-icon="i-lucide-bug"
+          trailing-icon="i-lucide-chevron-down"
+          block
+        />
+        <template #content>
+          <div>
+            <slot />
+          </div>
+          <pre
+            v-if="data"
+            :class="textClass"
+          >{{ data }}</pre>
+          <span v-else>No Data available</span>
+        </template>
+      </UCollapsible>
     </client-only>
   </div>
 </template>

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

@@ -1,6 +1,6 @@
-declare var __VLS_7: {};
+declare var __VLS_19: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_7) => any;
+    default?: (props: typeof __VLS_19) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     data: {

package/dist/runtime/components/FUDataEdit.vue

@@ -140,12 +140,12 @@ function handleReset() {
     <FUDataDebug
       v-if="debugData"
       :data="formData"
-      header="Data"
+      header="Debug Data"
     />
     <FUDataDebug
       v-if="debugSchema"
       :data="formSchema"
-      header="Schema"
+      header="Debug Schema"
     />
   </div>
 </template>

package/dist/runtime/components/FUDataView.vue

@@ -58,7 +58,7 @@ if (props.data) {
     <FuDataDebug
       v-if="debugData"
       :data="formData"
-      header="Data"
+      header="Debug Data"
     />
     <FuDataDebug
       v-if="debugSchema"

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

@@ -9,6 +9,8 @@ export interface FormKitCheckboxProps {
     indicator?: 'start' | 'end' | 'hidden';
     icon?: string;
     indeterminateIcon?: string;
+    trueValue?: unknown;
+    falseValue?: unknown;
     autofocus?: false | true | 'true' | 'false';
     ui?: Record<string, unknown>;
 }

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

@@ -25,6 +25,8 @@ const { handleInput, handleChange, styleClass, modelValue, color, validSlotNames
     :indicator="context.indicator"
     :icon="context.icon"
     :indeterminate-icon="context.indeterminateIcon"
+    :true-value="context.trueValue"
+    :false-value="context.falseValue"
     :autofocus="context.autofocus"
     :ui="context.ui"
     @change="handleChange"

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

@@ -9,6 +9,8 @@ export interface FormKitCheckboxProps {
     indicator?: 'start' | 'end' | 'hidden';
     icon?: string;
     indeterminateIcon?: string;
+    trueValue?: unknown;
+    falseValue?: unknown;
     autofocus?: false | true | 'true' | 'false';
     ui?: Record<string, unknown>;
 }

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

@@ -28,6 +28,10 @@ export interface FormKitInputMenuProps {
     arrow?: boolean;
     portal?: boolean;
     virtualize?: boolean;
+    content?: Record<string, unknown>;
+    mode?: 'combobox' | 'autocomplete';
+    by?: string | ((a: unknown, b: unknown) => boolean);
+    open?: boolean;
     valueKey?: string;
     labelKey?: string;
     descriptionKey?: string;

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

@@ -35,6 +35,10 @@ const { handleInput, handleChange, isInvalid, styleClass, color, modelValue, ite
     :arrow="context.arrow"
     :portal="context.portal"
     :virtualize="context.virtualize"
+    :content="context.content"
+    :mode="context.mode"
+    :by="context.by"
+    :open="context.open"
     :value-key="context.valueKey"
     :label-key="context.labelKey"
     :description-key="context.descriptionKey"

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

@@ -28,6 +28,10 @@ export interface FormKitInputMenuProps {
     arrow?: boolean;
     portal?: boolean;
     virtualize?: boolean;
+    content?: Record<string, unknown>;
+    mode?: 'combobox' | 'autocomplete';
+    by?: string | ((a: unknown, b: unknown) => boolean);
+    open?: boolean;
     valueKey?: string;
     labelKey?: string;
     descriptionKey?: string;

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

@@ -24,6 +24,7 @@ export interface FormKitInputNumberProps {
     disableWheelChange?: boolean;
     invertWheelChange?: boolean;
     focusOnChange?: boolean;
+    locale?: string;
     list: string;
     autocomplete?: string & {} | 'on' | 'off';
     ui?: Record<string, unknown>;

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

@@ -16,6 +16,7 @@ const { handleInput, handleChange, isInvalid, styleClass, color, modelValue, val
     v-bind="{ ...context?.attrs }"
     :class="styleClass"
     :disabled="!!context?.disabled"
+    :readonly="context?.attrs.readonly ?? false"
     :style="context?.attrs.style"
     :color="color"
     :size="context.size ?? 'md'"
@@ -39,6 +40,7 @@ const { handleInput, handleChange, isInvalid, styleClass, color, modelValue, val
     :disable-wheel-change="context.disableWheelChange"
     :invert-wheel-change="context.invertWheelChange"
     :focus-on-change="context.focusOnChange"
+    :locale="context.locale"
     :placeholder="context.placeholder"
     :list="context.list"
     :autocomplete="context.autocomplete"

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

@@ -24,6 +24,7 @@ export interface FormKitInputNumberProps {
     disableWheelChange?: boolean;
     invertWheelChange?: boolean;
     focusOnChange?: boolean;
+    locale?: string;
     list: string;
     autocomplete?: string & {} | 'on' | 'off';
     ui?: Record<string, unknown>;

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

@@ -16,7 +16,7 @@ export interface FormKitInputTagsProps {
     addOnTab?: boolean;
     addOnBlur?: boolean;
     duplicate?: boolean;
-    delimiters?: string | RegExp;
+    delimiter?: string | RegExp;
     max: number;
     convertValue?: (value: string) => string;
     displayValue?: (value: string) => string;

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

@@ -32,7 +32,7 @@ const { handleInput, handleChange, isInvalid, styleClass, color, modelValue, val
     :add-on-tab="context.addOnTab"
     :add-on-blur="context.addOnBlur"
     :duplicate="context.duplicate"
-    :delimiters="context.delimiters"
+    :delimiter="context.delimiter"
     :max="context.max"
     :convert-value="context.convertValue"
     :display-value="context.displayValue"

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

@@ -16,7 +16,7 @@ export interface FormKitInputTagsProps {
     addOnTab?: boolean;
     addOnBlur?: boolean;
     duplicate?: boolean;
-    delimiters?: string | RegExp;
+    delimiter?: string | RegExp;
     max: number;
     convertValue?: (value: string) => string;
     displayValue?: (value: string) => string;

package/dist/runtime/components/inputs/FUListbox.d.vue.ts

@@ -16,6 +16,7 @@ export interface ListboxItem {
 export interface FormKitListboxProps {
     options?: string[] | ListboxItem[] | ListboxItem[][];
     as?: string;
+    color?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | 'neutral';
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     by?: string | ((a: unknown, b: unknown) => boolean);
     displayMode?: 'single' | 'transfer';

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

@@ -1,5 +1,5 @@
 <script setup>
-import { computed } from "vue";
+import { computed, ref, watch } from "vue";
 import { useFormKitInput } from "../../utils/useFormKitInput";
 const props = defineProps({
   context: {
@@ -7,7 +7,7 @@ const props = defineProps({
     required: true
   }
 });
-const { handleInput, handleChange, isInvalid, styleClass, modelValue, items, validSlotNames } = useFormKitInput(props.context);
+const { handleInput, handleChange, isInvalid, styleClass, color, modelValue, items, validSlotNames } = useFormKitInput(props.context);
 const targetItems = ref(modelValue.value || []);
 const sourceSelection = ref([]);
 const targetSelection = ref([]);
@@ -50,6 +50,7 @@ watch(targetItems, (newVal) => {
     :class="styleClass"
     :style="context?.attrs.style"
     :as="context.as"
+    :color="color"
     :size="context.size ?? 'md'"
     :items="items"
     :by="context.by"

package/dist/runtime/components/inputs/FUListbox.vue.d.ts

@@ -16,6 +16,7 @@ export interface ListboxItem {
 export interface FormKitListboxProps {
     options?: string[] | ListboxItem[] | ListboxItem[][];
     as?: string;
+    color?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | 'neutral';
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     by?: string | ((a: unknown, b: unknown) => boolean);
     displayMode?: 'single' | 'transfer';

package/dist/runtime/components/inputs/FUPinInput.d.vue.ts

@@ -12,6 +12,8 @@ export interface FormKitPinInputProps {
     defaultValue?: string[] | undefined;
     mask?: boolean;
     otp?: boolean;
+    separator?: number | number[];
+    type?: 'text' | 'number';
     placeholder?: string;
     ui?: Record<string, unknown>;
 }

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

@@ -29,6 +29,8 @@ const { handleInput, handleChange, isInvalid, styleClass, color, modelValue } =
     :fixed="context.fixed"
     :mask="context.mask"
     :otp="context.otp"
+    :separator="context.separator"
+    :type="context.type ?? 'text'"
     :placeholder="context.placeholder"
     :ui="context.ui"
     @change="handleChange"

package/dist/runtime/components/inputs/FUPinInput.vue.d.ts

@@ -12,6 +12,8 @@ export interface FormKitPinInputProps {
     defaultValue?: string[] | undefined;
     mask?: boolean;
     otp?: boolean;
+    separator?: number | number[];
+    type?: 'text' | 'number';
     placeholder?: string;
     ui?: Record<string, unknown>;
 }

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

@@ -11,6 +11,7 @@ export interface FormKitSelectProps {
     selectedIcon?: string;
     arrow?: boolean;
     portal?: boolean;
+    content?: Record<string, unknown>;
     valueKey?: string;
     labelKey?: string;
     descriptionKey?: string;

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

@@ -34,6 +34,7 @@ const { handleInput, handleChange, isInvalid, color, styleClass, modelValue, ite
     :loading-icon="context.loadingIcon"
     :arrow="context.arrow"
     :portal="context.portal"
+    :content="context.content"
     :value-key="context.valueKey"
     :label-key="context.labelKey"
     :description-key="context.descriptionKey"

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

@@ -11,6 +11,7 @@ export interface FormKitSelectProps {
     selectedIcon?: string;
     arrow?: boolean;
     portal?: boolean;
+    content?: Record<string, unknown>;
     valueKey?: string;
     labelKey?: string;
     descriptionKey?: string;

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

@@ -37,6 +37,8 @@ export interface FormKitSelectMenuProps {
     arrow?: boolean;
     portal?: boolean;
     virtualize?: boolean;
+    content?: Record<string, unknown>;
+    by?: string | ((a: unknown, b: unknown) => boolean);
     valueKey?: string;
     labelKey?: string;
     descriptionKey?: string;

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

@@ -38,6 +38,8 @@ const { handleInput, handleChange, isInvalid, styleClass, color, modelValue, ite
     :arrow="context.arrow"
     :portal="context.portal"
     :virtualize="context.virtualize"
+    :content="context.content"
+    :by="context.by"
     :value-key="context.valueKey"
     :label-key="context.labelKey"
     :description-key="context.descriptionKey"

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

@@ -37,6 +37,8 @@ export interface FormKitSelectMenuProps {
     arrow?: boolean;
     portal?: boolean;
     virtualize?: boolean;
+    content?: Record<string, unknown>;
+    by?: string | ((a: unknown, b: unknown) => boolean);
     valueKey?: string;
     labelKey?: string;
     descriptionKey?: string;

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

@@ -10,6 +10,8 @@ export interface FormKitSwitchProps {
     label?: string;
     description?: string;
     defaultValue?: boolean;
+    trueValue?: unknown;
+    falseValue?: unknown;
     autofocus?: false | true | 'true' | 'false';
     ui?: Record<string, unknown>;
 }

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

@@ -26,6 +26,8 @@ const { handleInput, handleChange, styleClass, color, modelValue, validSlotNames
     :label="context.label"
     :description="context.description"
     :default-value="context.defaultValue"
+    :true-value="context.trueValue"
+    :false-value="context.falseValue"
     :autofocus="context.autofocus"
     :ui="context.ui"
     @change="handleChange"

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

@@ -10,6 +10,8 @@ export interface FormKitSwitchProps {
     label?: string;
     description?: string;
     defaultValue?: boolean;
+    trueValue?: unknown;
+    falseValue?: unknown;
     autofocus?: false | true | 'true' | 'false';
     ui?: Record<string, unknown>;
 }

package/dist/runtime/components/output/FUOutputText.d.vue.ts

@@ -10,7 +10,7 @@ export interface FormKitOutputTextProps {
     trailing?: boolean;
     trailingIcon?: string;
     variant?: 'outline' | 'soft' | 'subtle' | 'ghost' | 'none';
-    outputType?: 'text' | 'email' | 'url' | 'tel' | 'color' | 'duration';
+    outputType?: 'text' | 'email' | 'url' | 'tel' | 'color' | 'duration' | 'i18n';
 }
 declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     context: {

package/dist/runtime/components/output/FUOutputText.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { computed } from "vue";
+import { useI18n } from "vue-i18n";
 import { useFormKitOutput } from "../../utils/useFormKitOutput";
 import { convertColorToHex } from "../../utils/colorConverter";
 import { formattedDuration } from "../../utils/durationConverter";
@@ -11,10 +12,24 @@ const props = defineProps({
   }
 });
 const outputType = computed(() => props.context.outputType ?? "text");
+let translate;
+try {
+  translate = useI18n().t;
+} catch {
+  translate = void 0;
+}
 const displayValue = computed(() => {
   let result = props.context._value ?? "";
   if (outputType.value === "duration") {
     result = formattedDuration(result);
+  } else if (outputType.value === "i18n") {
+    const key = String(result ?? "");
+    if (key && translate) {
+      const translated = translate(key);
+      result = typeof translated === "string" && translated.length > 0 ? translated : key;
+    } else {
+      result = key;
+    }
   }
   return result;
 });

package/dist/runtime/components/output/FUOutputText.vue.d.ts

@@ -10,7 +10,7 @@ export interface FormKitOutputTextProps {
     trailing?: boolean;
     trailingIcon?: string;
     variant?: 'outline' | 'soft' | 'subtle' | 'ghost' | 'none';
-    outputType?: 'text' | 'email' | 'url' | 'tel' | 'color' | 'duration';
+    outputType?: 'text' | 'email' | 'url' | 'tel' | 'color' | 'duration' | 'i18n';
 }
 declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     context: {

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

@@ -17,11 +17,11 @@ 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"],
+  props: ["label", "description", "color", "variant", "size", "indicator", "icon", "indeterminateIcon", "trueValue", "falseValue", "autofocus", "ui"],
   family: "NuxtUIInput"
 });
 export const nuxtUICheckboxGroupDefinition = createInput(FUCheckboxGroup, {
-  props: ["options", "legend", "valueKey", "labelKey", "descriptionKey", "size", "variant", "orientation", "loop", "color", "indicator", "icon", "ui", "items"],
+  props: ["options", "legend", "valueKey", "labelKey", "descriptionKey", "size", "variant", "orientation", "loop", "name", "color", "indicator", "icon", "ui", "items"],
   family: "NuxtUIInput"
 });
 export const nuxtUIColorPickerDefinition = createInput(FUColorPicker, {
@@ -37,15 +37,15 @@ export const nuxtUIInputDateDefinition = createInput(FUInputDate, {
   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"],
+  props: ["options", "inputType", "placeholder", "color", "variant", "size", "autofocus", "autofocusDelay", "trailingIcon", "selectedIcon", "deleteIcon", "clear", "clearIcon", "arrow", "portal", "virtualize", "content", "mode", "by", "open", "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"],
+  props: ["placeholder", "color", "variant", "size", "highlight", "fixed", "orientation", "increment", "incrementIcon", "incrementDisabled", "decrement", "decrementIcon", "decrementDisabled", "autofocus", "autofocusDelay", "min", "max", "step", "stepSnapping", "formatOptions", "disableWheelChange", "invertWheelChange", "focusOnChange", "locale", "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"],
+  props: ["placeholder", "maxLength", "color", "variant", "size", "autofocus", "autofocusDelay", "deleteIcon", "highlight", "fixed", "addOnPaste", "addOnTab", "addOnBlur", "duplicate", "delimiter", "max", "convertValue", "displayValue", "icon", "avatar", "leading", "leadingIcon", "trailing", "trailingIcon", "loading", "loadingIcon", "list", "autocomplete", "ui"],
   family: "NuxtUIInput"
 });
 export const nuxtUIInputTimeDefinition = createInput(FUInputTime, {
@@ -53,11 +53,11 @@ export const nuxtUIInputTimeDefinition = createInput(FUInputTime, {
   family: "NuxtUIInput"
 });
 export const nuxtUIListboxDefinition = createInput(FUListbox, {
-  props: ["options", "as", "size", "by", "orientation", "selectionBehavior", "disabled", "defaultValue", "multiple", "valueKey", "labelKey", "descriptionKey", "loading", "loadingIcon", "filter", "filterFields", "ignoreFilter", "selectedIcon", "virtualize", "highlight", "highlightOnHover", "autofocus", "autofocusDelay", "searchTerm", "ui", "displayMode", "transferLeftHeaderText", "transferRightHeaderText", "transferAll", "transferHeaderClass"],
+  props: ["options", "as", "color", "size", "by", "orientation", "selectionBehavior", "disabled", "defaultValue", "multiple", "valueKey", "labelKey", "descriptionKey", "loading", "loadingIcon", "filter", "filterFields", "ignoreFilter", "selectedIcon", "virtualize", "highlight", "highlightOnHover", "autofocus", "autofocusDelay", "searchTerm", "ui", "displayMode", "transferLeftHeaderText", "transferRightHeaderText", "transferAll", "transferHeaderClass"],
   family: "NuxtUIInput"
 });
 export const nuxtUIPinInputDefinition = createInput(FUPinInput, {
-  props: ["color", "variant", "size", "length", "autofocus", "autofocusDelay", "highlight", "fixed", "defaultValue", "mask", "otp", "placeholder", "ui"],
+  props: ["color", "variant", "size", "length", "autofocus", "autofocusDelay", "highlight", "fixed", "defaultValue", "mask", "otp", "separator", "type", "placeholder", "ui"],
   family: "NuxtUIInput"
 });
 export const nuxtUIRadioGroupDefinition = createInput(FURadioGroup, {
@@ -65,11 +65,11 @@ export const nuxtUIRadioGroupDefinition = createInput(FURadioGroup, {
   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"],
+  props: ["options", "placeholder", "color", "variant", "size", "selectedIcon", "arrow", "portal", "content", "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"],
+  props: ["options", "placeholder", "searchInput", "color", "variant", "size", "icon", "avatar", "leading", "leadingIcon", "trailing", "trailingIcon", "loading", "loadingIcon", "selectedIcon", "clear", "clearIcon", "arrow", "portal", "virtualize", "content", "by", "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, {
@@ -77,7 +77,7 @@ export const nuxtUISliderDefinition = createInput(FUSlider, {
   family: "NuxtUIInput"
 });
 export const nuxtUISwitchDefinition = createInput(FUSwitch, {
-  props: ["color", "size", "loading", "loadingIcon", "checkedIcon", "uncheckedIcon", "label", "description", "defaultValue", "autofocus", "ui"],
+  props: ["color", "size", "loading", "loadingIcon", "checkedIcon", "uncheckedIcon", "label", "description", "defaultValue", "trueValue", "falseValue", "autofocus", "ui"],
   family: "NuxtUIInput"
 });
 export const nuxtUITextareaDefinition = createInput(FUTextarea, {

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

@@ -17,11 +17,11 @@ 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"],
+  props: ["label", "description", "color", "variant", "size", "indicator", "icon", "indeterminateIcon", "trueValue", "falseValue", "autofocus", "ui"],
   family: "NuxtUIInput"
 });
 export const nuxtUICheckboxGroupDefinition = createInput(FUCheckboxGroup, {
-  props: ["options", "legend", "valueKey", "labelKey", "descriptionKey", "size", "variant", "orientation", "loop", "color", "indicator", "icon", "ui", "items"],
+  props: ["options", "legend", "valueKey", "labelKey", "descriptionKey", "size", "variant", "orientation", "loop", "name", "color", "indicator", "icon", "ui", "items"],
   family: "NuxtUIInput"
 });
 export const nuxtUIColorPickerDefinition = createInput(FUColorPicker, {
@@ -37,15 +37,15 @@ export const nuxtUIInputDateDefinition = createInput(FUInputDate, {
   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"],
+  props: ["options", "inputType", "placeholder", "color", "variant", "size", "autofocus", "autofocusDelay", "trailingIcon", "selectedIcon", "deleteIcon", "clear", "clearIcon", "arrow", "portal", "virtualize", "content", "mode", "by", "open", "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"],
+  props: ["placeholder", "color", "variant", "size", "highlight", "fixed", "orientation", "increment", "incrementIcon", "incrementDisabled", "decrement", "decrementIcon", "decrementDisabled", "autofocus", "autofocusDelay", "min", "max", "step", "stepSnapping", "formatOptions", "disableWheelChange", "invertWheelChange", "focusOnChange", "locale", "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"],
+  props: ["placeholder", "maxLength", "color", "variant", "size", "autofocus", "autofocusDelay", "deleteIcon", "highlight", "fixed", "addOnPaste", "addOnTab", "addOnBlur", "duplicate", "delimiter", "max", "convertValue", "displayValue", "icon", "avatar", "leading", "leadingIcon", "trailing", "trailingIcon", "loading", "loadingIcon", "list", "autocomplete", "ui"],
   family: "NuxtUIInput"
 });
 export const nuxtUIInputTimeDefinition = createInput(FUInputTime, {
@@ -53,11 +53,11 @@ export const nuxtUIInputTimeDefinition = createInput(FUInputTime, {
   family: "NuxtUIInput"
 });
 export const nuxtUIListboxDefinition = createInput(FUListbox, {
-  props: ["options", "as", "size", "by", "orientation", "selectionBehavior", "disabled", "defaultValue", "multiple", "valueKey", "labelKey", "descriptionKey", "loading", "loadingIcon", "filter", "filterFields", "ignoreFilter", "selectedIcon", "virtualize", "highlight", "highlightOnHover", "autofocus", "autofocusDelay", "searchTerm", "ui", "displayMode", "transferLeftHeaderText", "transferRightHeaderText", "transferAll", "transferHeaderClass"],
+  props: ["options", "as", "color", "size", "by", "orientation", "selectionBehavior", "disabled", "defaultValue", "multiple", "valueKey", "labelKey", "descriptionKey", "loading", "loadingIcon", "filter", "filterFields", "ignoreFilter", "selectedIcon", "virtualize", "highlight", "highlightOnHover", "autofocus", "autofocusDelay", "searchTerm", "ui", "displayMode", "transferLeftHeaderText", "transferRightHeaderText", "transferAll", "transferHeaderClass"],
   family: "NuxtUIInput"
 });
 export const nuxtUIPinInputDefinition = createInput(FUPinInput, {
-  props: ["color", "variant", "size", "length", "autofocus", "autofocusDelay", "highlight", "fixed", "defaultValue", "mask", "otp", "placeholder", "ui"],
+  props: ["color", "variant", "size", "length", "autofocus", "autofocusDelay", "highlight", "fixed", "defaultValue", "mask", "otp", "separator", "type", "placeholder", "ui"],
   family: "NuxtUIInput"
 });
 export const nuxtUIRadioGroupDefinition = createInput(FURadioGroup, {
@@ -65,11 +65,11 @@ export const nuxtUIRadioGroupDefinition = createInput(FURadioGroup, {
   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"],
+  props: ["options", "placeholder", "color", "variant", "size", "selectedIcon", "arrow", "portal", "content", "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"],
+  props: ["options", "placeholder", "searchInput", "color", "variant", "size", "icon", "avatar", "leading", "leadingIcon", "trailing", "trailingIcon", "loading", "loadingIcon", "selectedIcon", "clear", "clearIcon", "arrow", "portal", "virtualize", "content", "by", "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, {
@@ -77,7 +77,7 @@ export const nuxtUISliderDefinition = createInput(FUSlider, {
   family: "NuxtUIInput"
 });
 export const nuxtUISwitchDefinition = createInput(FUSwitch, {
-  props: ["color", "size", "loading", "loadingIcon", "checkedIcon", "uncheckedIcon", "label", "description", "defaultValue", "autofocus", "ui"],
+  props: ["color", "size", "loading", "loadingIcon", "checkedIcon", "uncheckedIcon", "label", "description", "defaultValue", "trueValue", "falseValue", "autofocus", "ui"],
   family: "NuxtUIInput"
 });
 export const nuxtUITextareaDefinition = createInput(FUTextarea, {

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

@@ -18,19 +18,36 @@ function addInsertButton(label = "Add Item", icon = "i-lucide-plus", styleClass
     addComponent("UButton", { onClick: "$insertNode($node)", label, icon, size: buttonSize, disabled: "$node.value.length > $maxItems -1" })
   ], { class: styleClass }, render);
 }
+function addDragHandle(handleClass = "", iconName = "", render = "true") {
+  return addElement("span", [
+    addComponent("UIcon", { name: iconName })
+  ], {
+    "class": handleClass,
+    "aria-label": "Drag to reorder"
+  }, render);
+}
 export const nuxtUIRepeaterDefinition = createInput(
-  addElement("ul", [
+  addElement("div", [
     addList("$listName", [
       addInsertButton("$insertButtonLabel", "i-lucide-plus", "$insertButtonClass", "$insertButtonSize", "$node.children.length == 0 || $alwaysDisplayInsertButton"),
       addListGroup([
-        addElement(
-          "li",
-          [{ children: "$slots.default" }, addButtonGroup("$buttonGroupClass", "$buttonGroupItemClass", "$buttonSize", "$renderButtons")],
-          { class: "$internalListItemClass" }
-        )
+        addElement("div", [
+          addDragHandle("$internalDragHandleClass", "$dragHandleIconName", "$renderDragHandle"),
+          { children: "$slots.default" },
+          addButtonGroup("$buttonGroupClass", "$buttonGroupItemClass", "$buttonSize", "$renderButtons")
+        ], {
+          id: "$getListItemId($index)",
+          class: "$getListItemClass($index)",
+          draggable: "$draggable",
+          onDragstart: "$dragNodeStart($node.parent, $index)",
+          onDragover: "$dragNodeOver($index)",
+          onDragleave: "$dragNodeLeave($index)",
+          onDrop: "$dropNode($node.parent, $index)",
+          onDragend: "$dragNodeEnd"
+        })
       ], true, {})
     ], true, "true")
-  ], { class: "$internalListClass" }, true),
+  ], { class: "$internalListClass", id: "$internalListId" }, true),
   {
     props: [
       "insertButtonLabel",
@@ -49,7 +66,11 @@ export const nuxtUIRepeaterDefinition = createInput(
       "displayAddButton",
       "displayDeleteButton",
       "minItems",
-      "maxItems"
+      "maxItems",
+      "draggable",
+      "displayDragHandle",
+      "dragHandleClass",
+      "dragHandleIconName"
     ],
     features: [addRepeaterHandler]
   }
@@ -62,56 +83,113 @@ function addRepeaterHandler(node) {
     }
     return array;
   };
+  const uuid = typeof crypto !== "undefined" && crypto.randomUUID ? crypto.randomUUID() : Math.random().toString(36).slice(2);
   node.on("created", () => {
-    node.context.listName = node.name;
-    node.context.renderButtons = !node.context.hideButtonGroup;
-    node.context.insertButtonSize = node.context.insertButtonSize ? node.context.insertButtonSize : "md";
-    node.context.buttonSize = node.context.buttonSize ? node.context.buttonSize : "md";
-    node.context.renderMoveButtons = !node.context.hideMoveButtons;
-    node.context.internalListClass = node.context.listClass ? `formkit-items ${node.context.listClass}` : "formkit-items";
-    node.context.internalListItemClass = node.context.listItemClass ? `formkit-item ${node.context.listItemClass}` : "formkit-item";
-    node.context.minItems = node.context.minItems !== void 0 ? node.context.minItems : 0;
-    node.context.maxItems = node.context.maxItems !== void 0 ? node.context.maxItems : Number.POSITIVE_INFINITY;
-    node.context.insertNode = (parentNode) => () => {
-      if (parentNode && Array.isArray(parentNode._value)) {
-        const item = node.context.newItem ? { ...node.context.newItem } : {};
-        const array = parentNode.value;
-        array.push(item);
-        parentNode.input(array, false);
-      }
-    };
-    node.context.removeNode = (parentNode, index) => () => {
-      if (parentNode && Array.isArray(parentNode._value)) {
-        parentNode.input(parentNode._value.filter((_, i) => i !== index), false);
-      }
-    };
-    node.context.addNode = (parentNode, index) => () => {
-      if (parentNode && Array.isArray(parentNode._value)) {
-        const array = parentNode.value;
-        const item = node.context.newItem ? { ...node.context.newItem } : {};
-        array.splice(index + 1, 0, item);
-        parentNode.input(array, false);
-      }
-    };
-    node.context.cloneNode = (parentNode, index) => () => {
-      if (parentNode && Array.isArray(parentNode._value)) {
-        const item = parentNode.value[index];
-        const array = parentNode.value;
-        array.splice(index + 1, 0, item);
-        parentNode.input(array, false);
-      }
-    };
-    node.context.moveNodeUp = (parentNode, index) => () => {
-      if (parentNode && Array.isArray(parentNode._value)) {
-        if (index > 0)
-          parentNode.input(swapElements(parentNode.value, index - 1, index), false);
-      }
-    };
-    node.context.moveNodeDown = (parentNode, index) => () => {
-      if (parentNode && Array.isArray(parentNode._value)) {
-        if (index < parentNode.value.length - 1)
-          parentNode.input(swapElements(parentNode.value, index, index + 1), false);
-      }
-    };
+    if (node.context) {
+      let dragStartIndex = null;
+      let dragOverIndex = null;
+      const newItem = node.context.newItem || {};
+      node.context.listName = node.name;
+      node.context.renderButtons = !node.context.hideButtonGroup;
+      node.context.insertButtonSize = node.context.insertButtonSize ? node.context.insertButtonSize : "md";
+      node.context.buttonSize = node.context.buttonSize ? node.context.buttonSize : "md";
+      node.context.renderMoveButtons = !node.context.hideMoveButtons;
+      node.context.draggable = !!node.context.draggable;
+      node.context.renderDragHandle = !!node.context.displayDragHandle;
+      node.context.dragHandleIconName = node.context.dragHandleIconName || "i-lucide-grip-vertical";
+      node.context.internalDragHandleClass = node.context.dragHandleClass ? `formkit-repeater-drag-handle ${node.context.dragHandleClass}` : "formkit-repeater-drag-handle";
+      node.context.internalListClass = node.context.listClass ? `formkit-items ${node.context.listClass}` : "formkit-items";
+      node.context.internalListItemClass = node.context.listItemClass ? `formkit-item ${node.context.listItemClass}` : "formkit-item";
+      node.context.internalListId = `formkit-items-${uuid}`;
+      node.context.minItems = node.context.minItems !== void 0 ? node.context.minItems : 0;
+      node.context.maxItems = node.context.maxItems !== void 0 ? node.context.maxItems : Number.POSITIVE_INFINITY;
+      node.context.getListItemClass = (index) => {
+        if (dragOverIndex === index && dragStartIndex !== index)
+          return `${node.context?.internalListItemClass} formkit-repeater-drop-target`;
+        return node.context?.internalListItemClass?.toString() ?? "";
+      };
+      node.context.getListItemId = (index) => {
+        return `formkit-item-${index}-${uuid}`;
+      };
+      node.context.insertNode = (parentNode) => () => {
+        if (parentNode && Array.isArray(parentNode._value)) {
+          const newArray = [{ ...newItem }, ...parentNode.value];
+          parentNode.input(newArray, false);
+        }
+      };
+      node.context.removeNode = (parentNode, index) => () => {
+        if (parentNode && Array.isArray(parentNode._value)) {
+          parentNode.input(parentNode._value.filter((_, i) => i !== index), false);
+        }
+      };
+      node.context.addNode = (parentNode, index) => () => {
+        if (parentNode && Array.isArray(parentNode._value)) {
+          const array = parentNode.value;
+          array.splice(index + 1, 0, { ...newItem });
+          parentNode.input(array, false);
+        }
+      };
+      node.context.cloneNode = (parentNode, index) => () => {
+        if (parentNode && Array.isArray(parentNode._value)) {
+          const item = parentNode.value[index];
+          const array = parentNode.value;
+          array.splice(index + 1, 0, { ...item });
+          parentNode.input(array, false);
+        }
+      };
+      node.context.moveNodeUp = (parentNode, index) => () => {
+        if (parentNode && Array.isArray(parentNode._value)) {
+          if (index > 0)
+            parentNode.input(swapElements(parentNode.value, index - 1, index), false);
+        }
+      };
+      node.context.moveNodeDown = (parentNode, index) => () => {
+        if (parentNode && Array.isArray(parentNode._value)) {
+          if (index < parentNode.value.length - 1)
+            parentNode.input(swapElements(parentNode.value, index, index + 1), false);
+        }
+      };
+      node.context.dragNodeStart = (_parentNode, index) => (event) => {
+        dragStartIndex = index;
+        if (event?.dataTransfer) {
+          event.dataTransfer.effectAllowed = "move";
+          event.dataTransfer.setData("text/plain", String(index));
+        }
+      };
+      node.context.dragNodeOver = (targetIndex) => (event) => {
+        event?.preventDefault();
+        dragOverIndex = targetIndex;
+        if (event?.dataTransfer)
+          event.dataTransfer.dropEffect = "move";
+      };
+      node.context.dragNodeLeave = (targetIndex) => () => {
+        if (dragOverIndex === targetIndex)
+          dragOverIndex = null;
+      };
+      node.context.dropNode = (parentNode, targetIndex) => (event) => {
+        event?.preventDefault();
+        if (!parentNode || !Array.isArray(parentNode._value)) {
+          dragOverIndex = null;
+          return;
+        }
+        const sourceFromEvent = Number.parseInt(event?.dataTransfer?.getData("text/plain") || "", 10);
+        const sourceIndex = Number.isInteger(sourceFromEvent) ? sourceFromEvent : dragStartIndex;
+        if (sourceIndex === null || sourceIndex === targetIndex) {
+          dragOverIndex = null;
+          return;
+        }
+        if (sourceIndex < 0 || sourceIndex >= parentNode.value.length) {
+          dragOverIndex = null;
+          return;
+        }
+        parentNode.input(swapElements(parentNode.value, sourceIndex, targetIndex), false);
+        dragStartIndex = null;
+        dragOverIndex = null;
+      };
+      node.context.dragNodeEnd = () => {
+        dragStartIndex = null;
+        dragOverIndex = null;
+      };
+    }
   });
 }

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

@@ -18,19 +18,36 @@ function addInsertButton(label = "Add Item", icon = "i-lucide-plus", styleClass
     addComponent("UButton", { onClick: "$insertNode($node)", label, icon, size: buttonSize, disabled: "$node.value.length > $maxItems -1" })
   ], { class: styleClass }, render);
 }
+function addDragHandle(handleClass = "", iconName = "", render = "true") {
+  return addElement("span", [
+    addComponent("UIcon", { name: iconName })
+  ], {
+    "class": handleClass,
+    "aria-label": "Drag to reorder"
+  }, render);
+}
 export const nuxtUIRepeaterDefinition = createInput(
-  addElement("ul", [
+  addElement("div", [
     addList("$listName", [
       addInsertButton("$insertButtonLabel", "i-lucide-plus", "$insertButtonClass", "$insertButtonSize", "$node.children.length == 0 || $alwaysDisplayInsertButton"),
       addListGroup([
-        addElement(
-          "li",
-          [{ children: "$slots.default" }, addButtonGroup("$buttonGroupClass", "$buttonGroupItemClass", "$buttonSize", "$renderButtons")],
-          { class: "$internalListItemClass" }
-        )
+        addElement("div", [
+          addDragHandle("$internalDragHandleClass", "$dragHandleIconName", "$renderDragHandle"),
+          { children: "$slots.default" },
+          addButtonGroup("$buttonGroupClass", "$buttonGroupItemClass", "$buttonSize", "$renderButtons")
+        ], {
+          id: "$getListItemId($index)",
+          class: "$getListItemClass($index)",
+          draggable: "$draggable",
+          onDragstart: "$dragNodeStart($node.parent, $index)",
+          onDragover: "$dragNodeOver($index)",
+          onDragleave: "$dragNodeLeave($index)",
+          onDrop: "$dropNode($node.parent, $index)",
+          onDragend: "$dragNodeEnd"
+        })
       ], true, {})
     ], true, "true")
-  ], { class: "$internalListClass" }, true),
+  ], { class: "$internalListClass", id: "$internalListId" }, true),
   {
     props: [
       "insertButtonLabel",
@@ -49,7 +66,11 @@ export const nuxtUIRepeaterDefinition = createInput(
       "displayAddButton",
       "displayDeleteButton",
       "minItems",
-      "maxItems"
+      "maxItems",
+      "draggable",
+      "displayDragHandle",
+      "dragHandleClass",
+      "dragHandleIconName"
     ],
     features: [addRepeaterHandler]
   }
@@ -62,56 +83,113 @@ function addRepeaterHandler(node) {
     }
     return array;
   };
+  const uuid = typeof crypto !== "undefined" && crypto.randomUUID ? crypto.randomUUID() : Math.random().toString(36).slice(2);
   node.on("created", () => {
-    node.context.listName = node.name;
-    node.context.renderButtons = !node.context.hideButtonGroup;
-    node.context.insertButtonSize = node.context.insertButtonSize ? node.context.insertButtonSize : "md";
-    node.context.buttonSize = node.context.buttonSize ? node.context.buttonSize : "md";
-    node.context.renderMoveButtons = !node.context.hideMoveButtons;
-    node.context.internalListClass = node.context.listClass ? `formkit-items ${node.context.listClass}` : "formkit-items";
-    node.context.internalListItemClass = node.context.listItemClass ? `formkit-item ${node.context.listItemClass}` : "formkit-item";
-    node.context.minItems = node.context.minItems !== void 0 ? node.context.minItems : 0;
-    node.context.maxItems = node.context.maxItems !== void 0 ? node.context.maxItems : Number.POSITIVE_INFINITY;
-    node.context.insertNode = (parentNode) => () => {
-      if (parentNode && Array.isArray(parentNode._value)) {
-        const item = node.context.newItem ? { ...node.context.newItem } : {};
-        const array = parentNode.value;
-        array.push(item);
-        parentNode.input(array, false);
-      }
-    };
-    node.context.removeNode = (parentNode, index) => () => {
-      if (parentNode && Array.isArray(parentNode._value)) {
-        parentNode.input(parentNode._value.filter((_, i) => i !== index), false);
-      }
-    };
-    node.context.addNode = (parentNode, index) => () => {
-      if (parentNode && Array.isArray(parentNode._value)) {
-        const array = parentNode.value;
-        const item = node.context.newItem ? { ...node.context.newItem } : {};
-        array.splice(index + 1, 0, item);
-        parentNode.input(array, false);
-      }
-    };
-    node.context.cloneNode = (parentNode, index) => () => {
-      if (parentNode && Array.isArray(parentNode._value)) {
-        const item = parentNode.value[index];
-        const array = parentNode.value;
-        array.splice(index + 1, 0, item);
-        parentNode.input(array, false);
-      }
-    };
-    node.context.moveNodeUp = (parentNode, index) => () => {
-      if (parentNode && Array.isArray(parentNode._value)) {
-        if (index > 0)
-          parentNode.input(swapElements(parentNode.value, index - 1, index), false);
-      }
-    };
-    node.context.moveNodeDown = (parentNode, index) => () => {
-      if (parentNode && Array.isArray(parentNode._value)) {
-        if (index < parentNode.value.length - 1)
-          parentNode.input(swapElements(parentNode.value, index, index + 1), false);
-      }
-    };
+    if (node.context) {
+      let dragStartIndex = null;
+      let dragOverIndex = null;
+      const newItem = node.context.newItem || {};
+      node.context.listName = node.name;
+      node.context.renderButtons = !node.context.hideButtonGroup;
+      node.context.insertButtonSize = node.context.insertButtonSize ? node.context.insertButtonSize : "md";
+      node.context.buttonSize = node.context.buttonSize ? node.context.buttonSize : "md";
+      node.context.renderMoveButtons = !node.context.hideMoveButtons;
+      node.context.draggable = !!node.context.draggable;
+      node.context.renderDragHandle = !!node.context.displayDragHandle;
+      node.context.dragHandleIconName = node.context.dragHandleIconName || "i-lucide-grip-vertical";
+      node.context.internalDragHandleClass = node.context.dragHandleClass ? `formkit-repeater-drag-handle ${node.context.dragHandleClass}` : "formkit-repeater-drag-handle";
+      node.context.internalListClass = node.context.listClass ? `formkit-items ${node.context.listClass}` : "formkit-items";
+      node.context.internalListItemClass = node.context.listItemClass ? `formkit-item ${node.context.listItemClass}` : "formkit-item";
+      node.context.internalListId = `formkit-items-${uuid}`;
+      node.context.minItems = node.context.minItems !== void 0 ? node.context.minItems : 0;
+      node.context.maxItems = node.context.maxItems !== void 0 ? node.context.maxItems : Number.POSITIVE_INFINITY;
+      node.context.getListItemClass = (index) => {
+        if (dragOverIndex === index && dragStartIndex !== index)
+          return `${node.context?.internalListItemClass} formkit-repeater-drop-target`;
+        return node.context?.internalListItemClass?.toString() ?? "";
+      };
+      node.context.getListItemId = (index) => {
+        return `formkit-item-${index}-${uuid}`;
+      };
+      node.context.insertNode = (parentNode) => () => {
+        if (parentNode && Array.isArray(parentNode._value)) {
+          const newArray = [{ ...newItem }, ...parentNode.value];
+          parentNode.input(newArray, false);
+        }
+      };
+      node.context.removeNode = (parentNode, index) => () => {
+        if (parentNode && Array.isArray(parentNode._value)) {
+          parentNode.input(parentNode._value.filter((_, i) => i !== index), false);
+        }
+      };
+      node.context.addNode = (parentNode, index) => () => {
+        if (parentNode && Array.isArray(parentNode._value)) {
+          const array = parentNode.value;
+          array.splice(index + 1, 0, { ...newItem });
+          parentNode.input(array, false);
+        }
+      };
+      node.context.cloneNode = (parentNode, index) => () => {
+        if (parentNode && Array.isArray(parentNode._value)) {
+          const item = parentNode.value[index];
+          const array = parentNode.value;
+          array.splice(index + 1, 0, { ...item });
+          parentNode.input(array, false);
+        }
+      };
+      node.context.moveNodeUp = (parentNode, index) => () => {
+        if (parentNode && Array.isArray(parentNode._value)) {
+          if (index > 0)
+            parentNode.input(swapElements(parentNode.value, index - 1, index), false);
+        }
+      };
+      node.context.moveNodeDown = (parentNode, index) => () => {
+        if (parentNode && Array.isArray(parentNode._value)) {
+          if (index < parentNode.value.length - 1)
+            parentNode.input(swapElements(parentNode.value, index, index + 1), false);
+        }
+      };
+      node.context.dragNodeStart = (_parentNode, index) => (event) => {
+        dragStartIndex = index;
+        if (event?.dataTransfer) {
+          event.dataTransfer.effectAllowed = "move";
+          event.dataTransfer.setData("text/plain", String(index));
+        }
+      };
+      node.context.dragNodeOver = (targetIndex) => (event) => {
+        event?.preventDefault();
+        dragOverIndex = targetIndex;
+        if (event?.dataTransfer)
+          event.dataTransfer.dropEffect = "move";
+      };
+      node.context.dragNodeLeave = (targetIndex) => () => {
+        if (dragOverIndex === targetIndex)
+          dragOverIndex = null;
+      };
+      node.context.dropNode = (parentNode, targetIndex) => (event) => {
+        event?.preventDefault();
+        if (!parentNode || !Array.isArray(parentNode._value)) {
+          dragOverIndex = null;
+          return;
+        }
+        const sourceFromEvent = Number.parseInt(event?.dataTransfer?.getData("text/plain") || "", 10);
+        const sourceIndex = Number.isInteger(sourceFromEvent) ? sourceFromEvent : dragStartIndex;
+        if (sourceIndex === null || sourceIndex === targetIndex) {
+          dragOverIndex = null;
+          return;
+        }
+        if (sourceIndex < 0 || sourceIndex >= parentNode.value.length) {
+          dragOverIndex = null;
+          return;
+        }
+        parentNode.input(swapElements(parentNode.value, sourceIndex, targetIndex), false);
+        dragStartIndex = null;
+        dragOverIndex = null;
+      };
+      node.context.dragNodeEnd = () => {
+        dragStartIndex = null;
+        dragOverIndex = null;
+      };
+    }
   });
 }

package/dist/runtime/plugin.js

@@ -1,3 +1,6 @@
 import { defineNuxtPlugin } from "#app";
+import { UButton, UIcon } from "#components";
 export default defineNuxtPlugin((_nuxtApp) => {
+  _nuxtApp.vueApp.component("UButton", UButton);
+  _nuxtApp.vueApp.component("UIcon", UIcon);
 });

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

@@ -3,7 +3,7 @@ export declare function useFormKitInput(context: FormKitFrameworkContext): {
     isInvalid: import("vue").ComputedRef<any>;
     validSlotNames: import("vue").ComputedRef<string[]>;
     styleClass: import("vue").ComputedRef<string>;
-    color: import("vue").ComputedRef<"primary" | "secondary" | "success" | "info" | "warning" | "error" | "neutral">;
+    color: import("vue").ComputedRef<"neutral" | "primary" | "secondary" | "success" | "info" | "warning" | "error">;
     handleBlur: (event: FocusEvent) => void;
     handleChange: (_: unknown) => void;
     handleInput: (_: unknown) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sfxcode/nuxt-ui-formkit",
-  "version": "1.0.6",
+  "version": "1.1.0",
   "description": "FormKit integration for Nuxt UI - Seamlessly connect FormKit form handling with Nuxt UI components",
   "author": {
     "name": "Tom",
@@ -78,7 +78,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 --patch --release && npm publish --access=public && git push --follow-tags",
+    "release": "npm run lint && npm run test && npm run prepack && changelogen --minor --release && npm publish --access=public && git push --follow-tags",
     "lint": "eslint .",
     "test": "vitest run",
     "test:watch": "vitest watch",
@@ -88,40 +88,49 @@
     "docs:preview": "vitepress preview docs"
   },
   "dependencies": {
-    "@formkit/addons": "^2.0.0",
-    "@formkit/nuxt": "^2.0.0",
-    "@nuxt/kit": "4.4.6",
-    "@nuxt/ui": "^4.8.2",
-    "@vue/compiler-dom": "^3.5.35"
+    "@formkit/addons": "^2.1.0",
+    "@formkit/nuxt": "^2.1.0",
+    "@nuxt/kit": "4.4.8",
+    "@nuxt/ui": "^4.9.0",
+    "@vue/compiler-dom": "^3.5.38"
+  },
+  "peerDependencies": {
+    "vue-i18n": "^11.0.0"
+  },
+  "peerDependenciesMeta": {
+    "vue-i18n": {
+      "optional": true
+    }
   },
   "devDependencies": {
+    "@codemirror/lang-json": "^6.0.2",
+    "@codemirror/state": "^6.6.0",
+    "@codemirror/theme-one-dark": "^6.1.3",
+    "@codemirror/view": "^6.43.1",
     "@iconify-json/heroicons": "^1.2.3",
-    "@iconify-json/lucide": "^1.2.111",
-    "@iconify-json/simple-icons": "^1.2.85",
+    "@iconify-json/lucide": "^1.2.114",
+    "@iconify-json/simple-icons": "^1.2.86",
     "@nuxt/devtools": "4.0.0-alpha.7",
-    "@nuxt/eslint-config": "^1.15.2",
+    "@nuxt/eslint-config": "^1.16.0",
     "@nuxt/module-builder": "^1.0.2",
-    "@nuxt/schema": "4.4.6",
+    "@nuxt/schema": "4.4.8",
     "@nuxt/test-utils": "^4.0.3",
     "@types/node": "latest",
     "@vitejs/plugin-vue": "^6.0.7",
     "changelogen": "^0.6.2",
-    "eslint": "^10.4.1",
+    "codemirror": "^6.0.2",
+    "eslint": "^10.5.0",
     "jsdom": "^29.1.1",
     "mkdist": "^2.4.1",
-    "nuxt": "4.4.6",
+    "nuxt": "4.4.8",
     "sass-embedded": "^1.100.0",
     "typescript": "~6.0.3",
     "unbuild": "^3.6.1",
     "vitepress": "2.0.0-alpha.17",
-    "vitest": "^4.1.8",
-    "vue": "^3.5.35",
-    "vue-tsc": "^3.3.3",
-    "@codemirror/lang-json": "^6.0.2",
-    "@codemirror/state": "^6.6.0",
-    "@codemirror/theme-one-dark": "^6.1.3",
-    "@codemirror/view": "^6.43.0",
-    "codemirror": "^6.0.2"
+    "vitest": "^4.1.9",
+    "vue": "^3.5.38",
+    "vue-i18n": "^11.4.6",
+    "vue-tsc": "^3.3.5"
   },
   "packageManager": "pnpm@11.1.2+sha512.415a1cc25974731e75455c1468371be74c5aa5fb7621b50d4056d222451609f11412f23fd602e6169f1e060466641f798597e1be961a10688836a67b16569499"
 }