@sfxcode/nuxt-ui-formkit 1.1.1 → 1.2.0

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

@@ -0,0 +1,39 @@
+import type { FormKitFrameworkContext } from '@formkit/core';
+import type { PropType } from 'vue';
+export interface FormKitFileUploadProps {
+    multiple?: boolean;
+    accept?: string;
+    icon?: string | false;
+    label?: string;
+    description?: string;
+    color?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | 'neutral';
+    variant?: 'area' | 'button';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    layout?: 'list' | 'grid';
+    position?: 'inside' | 'outside';
+    highlight?: boolean;
+    dropzone?: boolean;
+    interactive?: boolean;
+    required?: boolean;
+    reset?: boolean;
+    fileIcon?: string;
+    fileImage?: boolean;
+    fileDelete?: boolean | Record<string, unknown>;
+    fileDeleteIcon?: string;
+    preview?: boolean;
+    name?: string;
+    ui?: Record<string, unknown>;
+}
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    context: {
+        type: PropType<FormKitFrameworkContext & FormKitFileUploadProps>;
+        required: true;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    context: {
+        type: PropType<FormKitFrameworkContext & FormKitFileUploadProps>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -24,6 +24,8 @@ export interface FormKitListboxProps {
     transferRightHeaderText?: string;
     transferHeaderClass?: string;
     transferAll?: boolean;
+    transferSortIcons?: boolean;
+    transferItemDraggable?: boolean;
     orientation?: 'horizontal' | 'vertical';
     selectionBehavior?: 'toggle' | 'replace';
     disabled?: boolean;

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

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, ref, watch } from "vue";
+import { computed, nextTick, ref, watch } from "vue";
 import { useFormKitInput } from "../../utils/useFormKitInput";
 const props = defineProps({
   context: {
@@ -16,9 +16,172 @@ const transferHeaderClass = computed(() => {
   return props.context.transferHeaderClass ? props.context.transferHeaderClass : baseClass;
 });
 const sourceItems = computed(() => {
+  if (props.context.displayMode !== "transfer" || !Array.isArray(targetItems.value))
+    return [];
   const valueKey = props.context?.valueKey || "value";
   return items.value.filter((item) => !targetItems.value.some((t) => t[valueKey] === item[valueKey]));
 });
+const transferSlotNames = computed(() => validSlotNames.value.filter((name) => name !== "item-trailing"));
+const sourceContainerRef = ref();
+const targetContainerRef = ref();
+const sourceDragActive = ref(false);
+const dragOverTargetIndex = ref(null);
+const dragOverPosition = ref(null);
+const targetDisplayItems = computed(() => {
+  if (props.context.displayMode !== "transfer" || !Array.isArray(targetItems.value))
+    return [];
+  return targetItems.value.map((item, index) => {
+    if (index !== dragOverTargetIndex.value || !dragOverPosition.value)
+      return item;
+    const insertionClass = dragOverPosition.value === "before" ? "border-t-2 border-primary" : "border-b-2 border-primary";
+    return { ...item, class: [item.class, insertionClass] };
+  });
+});
+function applyItemDraggable(container, enabled) {
+  if (!container)
+    return;
+  container.querySelectorAll('[data-slot="item"]').forEach((el) => {
+    el.draggable = enabled;
+  });
+}
+watch(
+  [sourceItems, sourceContainerRef, () => props.context.transferItemDraggable],
+  () => nextTick(() => applyItemDraggable(sourceContainerRef.value, !!props.context.transferItemDraggable)),
+  { immediate: true }
+);
+watch(
+  [targetDisplayItems, targetContainerRef, () => props.context.transferItemDraggable],
+  () => nextTick(() => applyItemDraggable(targetContainerRef.value, !!props.context.transferItemDraggable)),
+  { immediate: true }
+);
+function findItemIndex(container, target) {
+  const itemEl = target?.closest('[data-slot="item"]');
+  if (!itemEl || !container)
+    return -1;
+  return Array.from(container.querySelectorAll('[data-slot="item"]')).indexOf(itemEl);
+}
+function findDropPosition(target, clientY) {
+  const itemEl = target?.closest('[data-slot="item"]');
+  if (!itemEl)
+    return "after";
+  const rect = itemEl.getBoundingClientRect();
+  return clientY < rect.top + rect.height / 2 ? "before" : "after";
+}
+function moveElement(array, fromIndex, toIndex) {
+  const result = [...array];
+  const [element] = result.splice(fromIndex, 1);
+  if (element !== void 0)
+    result.splice(toIndex, 0, element);
+  return result;
+}
+function onSourceDragStart(event) {
+  const index = findItemIndex(sourceContainerRef.value, event.target);
+  if (index === -1)
+    return;
+  event.dataTransfer?.setData("text/plain", JSON.stringify({ origin: "source", index }));
+  if (event.dataTransfer)
+    event.dataTransfer.effectAllowed = "copyMove";
+}
+function onSourceDragEnter(event) {
+  event.preventDefault();
+}
+function onSourceDragOver(event) {
+  event.preventDefault();
+  if (event.target?.tagName === "INPUT") {
+    if (event.dataTransfer)
+      event.dataTransfer.dropEffect = "none";
+    sourceDragActive.value = false;
+    return;
+  }
+  sourceDragActive.value = true;
+  if (event.dataTransfer)
+    event.dataTransfer.dropEffect = "move";
+}
+function onSourceDrop(event) {
+  event.preventDefault();
+  sourceDragActive.value = false;
+  if (event.target?.tagName === "INPUT")
+    return;
+  let payload;
+  try {
+    payload = JSON.parse(event.dataTransfer?.getData("text/plain") || "");
+  } catch {
+    return;
+  }
+  if (!payload || payload.origin !== "target" || typeof payload.index !== "number")
+    return;
+  const draggedItem = targetItems.value[payload.index];
+  if (!draggedItem)
+    return;
+  const valueKey = props.context?.valueKey || "value";
+  targetItems.value = targetItems.value.filter((item) => item[valueKey] !== draggedItem[valueKey]);
+}
+function onTargetDragStart(event) {
+  const index = findItemIndex(targetContainerRef.value, event.target);
+  if (index === -1)
+    return;
+  event.dataTransfer?.setData("text/plain", JSON.stringify({ origin: "target", index }));
+  if (event.dataTransfer)
+    event.dataTransfer.effectAllowed = "copyMove";
+}
+function onTargetDragEnter(event) {
+  event.preventDefault();
+}
+function onTargetDragOver(event) {
+  event.preventDefault();
+  const index = findItemIndex(targetContainerRef.value, event.target);
+  if (index === -1) {
+    dragOverTargetIndex.value = null;
+    dragOverPosition.value = null;
+  } else {
+    dragOverTargetIndex.value = index;
+    dragOverPosition.value = findDropPosition(event.target, event.clientY);
+  }
+}
+function onTargetDrop(event) {
+  event.preventDefault();
+  const hoveredIndex = dragOverTargetIndex.value;
+  const position = dragOverPosition.value;
+  dragOverTargetIndex.value = null;
+  dragOverPosition.value = null;
+  let payload;
+  try {
+    payload = JSON.parse(event.dataTransfer?.getData("text/plain") || "");
+  } catch {
+    return;
+  }
+  if (!payload || typeof payload.index !== "number")
+    return;
+  const dropIndex = hoveredIndex === null ? targetItems.value.length : position === "after" ? hoveredIndex + 1 : hoveredIndex;
+  if (payload.origin === "source") {
+    const draggedItem = sourceItems.value[payload.index];
+    if (!draggedItem)
+      return;
+    const newItems = [...targetItems.value];
+    newItems.splice(dropIndex, 0, draggedItem);
+    targetItems.value = newItems;
+  } else {
+    if (payload.index === dropIndex)
+      return;
+    const adjustedIndex = dropIndex > payload.index ? dropIndex - 1 : dropIndex;
+    targetItems.value = moveElement(targetItems.value, payload.index, adjustedIndex);
+  }
+}
+function onDragEnd() {
+  dragOverTargetIndex.value = null;
+  dragOverPosition.value = null;
+  sourceDragActive.value = false;
+}
+function moveTargetItemUp(index) {
+  if (index <= 0)
+    return;
+  targetItems.value = moveElement(targetItems.value, index, index - 1);
+}
+function moveTargetItemDown(index) {
+  if (index >= targetItems.value.length - 1)
+    return;
+  targetItems.value = moveElement(targetItems.value, index, index + 1);
+}
 function transferSelected() {
   targetItems.value = [...targetItems.value, ...sourceSelection.value];
   sourceSelection.value = [];
@@ -93,7 +256,16 @@ watch(targetItems, (newVal) => {
     v-if="context.displayMode === 'transfer'"
     class="flex items-stretch gap-4 w-full"
   >
-    <div class="flex flex-col flex-1 gap-1">
+    <div
+      ref="sourceContainerRef"
+      class="flex flex-col flex-1 gap-1 rounded-lg transition-colors"
+      :class="{ 'ring-2 ring-inset ring-primary': sourceDragActive }"
+      @dragstart="onSourceDragStart"
+      @dragenter.capture="onSourceDragEnter"
+      @dragover.capture="onSourceDragOver"
+      @drop.capture="onSourceDrop"
+      @dragend="onDragEnd"
+    >
       <span
         v-if="context.transferLeftHeaderText"
         :class="transferHeaderClass"
@@ -133,7 +305,7 @@ watch(targetItems, (newVal) => {
         @update:model-value="handleInput"
       >
         <template
-          v-for="slotName in validSlotNames"
+          v-for="slotName in transferSlotNames"
           :key="slotName"
           #[slotName]="slotProps"
         >
@@ -142,6 +314,17 @@ watch(targetItems, (newVal) => {
             v-bind="{ ...context, ...slotProps }"
           />
         </template>
+        <template
+          v-if="!context.disabled"
+          #item-trailing
+        >
+          <UIcon
+            name="i-lucide-grip-vertical"
+            draggable="true"
+            class="cursor-grab text-muted"
+            @click.stop
+          />
+        </template>
       </UListbox>
     </div>
     <div class="flex flex-col items-center justify-center gap-1">
@@ -176,7 +359,15 @@ watch(targetItems, (newVal) => {
         @click="removeAll"
       />
     </div>
-    <div class="flex flex-col flex-1 gap-1">
+    <div
+      ref="targetContainerRef"
+      class="flex flex-col flex-1 gap-1"
+      @dragstart="onTargetDragStart"
+      @dragenter.capture.prevent="onTargetDragEnter"
+      @dragover.capture.prevent="onTargetDragOver"
+      @drop.capture="onTargetDrop"
+      @dragend="onDragEnd"
+    >
       <span
         v-if="context.transferRightHeaderText"
         :class="transferHeaderClass"
@@ -189,7 +380,7 @@ watch(targetItems, (newVal) => {
         :style="context?.attrs.style"
         :as="context.as"
         :size="context.size ?? 'md'"
-        :items="targetItems"
+        :items="targetDisplayItems"
         :by="context.by"
         :orientation="context.orientation"
         :selection-behavior="context.selectionBehavior"
@@ -216,7 +407,7 @@ watch(targetItems, (newVal) => {
         @update:model-value="handleInput"
       >
         <template
-          v-for="slotName in validSlotNames"
+          v-for="slotName in transferSlotNames"
           :key="slotName"
           #[slotName]="slotProps"
         >
@@ -225,6 +416,35 @@ watch(targetItems, (newVal) => {
             v-bind="{ ...context, ...slotProps }"
           />
         </template>
+        <template
+          v-if="!context.disabled"
+          #item-trailing="{ index }"
+        >
+          <UButton
+            v-if="context.transferSortIcons"
+            icon="i-lucide-chevron-up"
+            color="neutral"
+            variant="ghost"
+            size="xs"
+            :disabled="index === 0"
+            @click.stop="moveTargetItemUp(index)"
+          />
+          <UButton
+            v-if="context.transferSortIcons"
+            icon="i-lucide-chevron-down"
+            color="neutral"
+            variant="ghost"
+            size="xs"
+            :disabled="index === targetItems.length - 1"
+            @click.stop="moveTargetItemDown(index)"
+          />
+          <UIcon
+            name="i-lucide-grip-vertical"
+            draggable="true"
+            class="cursor-grab text-muted"
+            @click.stop
+          />
+        </template>
       </UListbox>
     </div>
   </div>

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

@@ -24,6 +24,8 @@ export interface FormKitListboxProps {
     transferRightHeaderText?: string;
     transferHeaderClass?: string;
     transferAll?: boolean;
+    transferSortIcons?: boolean;
+    transferItemDraggable?: boolean;
     orientation?: 'horizontal' | 'vertical';
     selectionBehavior?: 'toggle' | 'replace';
     disabled?: boolean;

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

@@ -1,30 +1,33 @@
 export * from './input.js';
 export * from './output.js';
 export declare const nuxtUIInputs: {
-    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;
+    nuxtUICalendar: import("@formkit/core").FormKitTypeDefinition;
+    nuxtUICheckbox: import("@formkit/core").FormKitTypeDefinition;
+    nuxtUICheckboxGroup: import("@formkit/core").FormKitTypeDefinition;
+    nuxtUIColorPicker: import("@formkit/core").FormKitTypeDefinition;
+    nuxtUIEditor: import("@formkit/core").FormKitTypeDefinition;
+    nuxtUIFileUpload: 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;
+    nuxtUIRepeater: import("@formkit/core").FormKitTypeDefinition;
 };
 export declare const nuxtUIOutputs: {
-    nuxtUIOutputBoolean: FormKitTypeDefinition;
-    nuxtUIOutputDate: FormKitTypeDefinition;
-    nuxtUIOutputLink: FormKitTypeDefinition;
-    nuxtUIOutputList: FormKitTypeDefinition;
-    nuxtUIOutputNumber: FormKitTypeDefinition;
-    nuxtUIOutputText: FormKitTypeDefinition;
+    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;
 };

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

@@ -1,12 +1,15 @@
-import { nuxtUICheckboxDefinition, nuxtUICheckboxGroupDefinition, nuxtUIColorPickerDefinition, nuxtUIInputDateDefinition, nuxtUIInputDefinition, nuxtUIInputMenuDefinition, nuxtUIInputNumberDefinition, nuxtUIInputTagsDefinition, nuxtUIInputTimeDefinition, nuxtUIListboxDefinition, nuxtUIPinInputDefinition, nuxtUIRadioGroupDefinition, nuxtUISelectDefinition, nuxtUISelectMenuDefinition, nuxtUISliderDefinition, nuxtUISwitchDefinition, nuxtUITextareaDefinition } from "./input.js";
+import { nuxtUICalendarDefinition, nuxtUICheckboxDefinition, nuxtUICheckboxGroupDefinition, nuxtUIColorPickerDefinition, nuxtUIEditorDefinition, nuxtUIFileUploadDefinition, 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 = {
+  nuxtUICalendar: nuxtUICalendarDefinition,
   nuxtUICheckbox: nuxtUICheckboxDefinition,
   nuxtUICheckboxGroup: nuxtUICheckboxGroupDefinition,
   nuxtUIColorPicker: nuxtUIColorPickerDefinition,
+  nuxtUIEditor: nuxtUIEditorDefinition,
+  nuxtUIFileUpload: nuxtUIFileUploadDefinition,
   nuxtUIInput: nuxtUIInputDefinition,
   nuxtUIInputDate: nuxtUIInputDateDefinition,
   nuxtUIInputMenu: nuxtUIInputMenuDefinition,

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

@@ -1,12 +1,15 @@
-import { nuxtUICheckboxDefinition, nuxtUICheckboxGroupDefinition, nuxtUIColorPickerDefinition, nuxtUIInputDateDefinition, nuxtUIInputDefinition, nuxtUIInputMenuDefinition, nuxtUIInputNumberDefinition, nuxtUIInputTagsDefinition, nuxtUIInputTimeDefinition, nuxtUIListboxDefinition, nuxtUIPinInputDefinition, nuxtUIRadioGroupDefinition, nuxtUISelectDefinition, nuxtUISelectMenuDefinition, nuxtUISliderDefinition, nuxtUISwitchDefinition, nuxtUITextareaDefinition } from "./input.mjs";
+import { nuxtUICalendarDefinition, nuxtUICheckboxDefinition, nuxtUICheckboxGroupDefinition, nuxtUIColorPickerDefinition, nuxtUIEditorDefinition, nuxtUIFileUploadDefinition, 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 = {
+  nuxtUICalendar: nuxtUICalendarDefinition,
   nuxtUICheckbox: nuxtUICheckboxDefinition,
   nuxtUICheckboxGroup: nuxtUICheckboxGroupDefinition,
   nuxtUIColorPicker: nuxtUIColorPickerDefinition,
+  nuxtUIEditor: nuxtUIEditorDefinition,
+  nuxtUIFileUpload: nuxtUIFileUploadDefinition,
   nuxtUIInput: nuxtUIInputDefinition,
   nuxtUIInputDate: nuxtUIInputDateDefinition,
   nuxtUIInputMenu: nuxtUIInputMenuDefinition,

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

@@ -1,7 +1,10 @@
 import type { FormKitTypeDefinition } from '@formkit/core';
+export declare const nuxtUICalendarDefinition: FormKitTypeDefinition;
 export declare const nuxtUICheckboxDefinition: FormKitTypeDefinition;
 export declare const nuxtUICheckboxGroupDefinition: FormKitTypeDefinition;
 export declare const nuxtUIColorPickerDefinition: FormKitTypeDefinition;
+export declare const nuxtUIEditorDefinition: FormKitTypeDefinition;
+export declare const nuxtUIFileUploadDefinition: FormKitTypeDefinition;
 export declare const nuxtUIInputDefinition: FormKitTypeDefinition;
 export declare const nuxtUIInputDateDefinition: FormKitTypeDefinition;
 export declare const nuxtUIInputMenuDefinition: FormKitTypeDefinition;

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

@@ -1,7 +1,10 @@
 import { createInput } from "@formkit/vue";
+import FUCalendar from "../../../runtime/components/inputs/FUCalendar.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 FUEditor from "../../../runtime/components/inputs/FUEditor.vue";
+import FUFileUpload from "../../../runtime/components/inputs/FUFileUpload.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";
@@ -16,6 +19,10 @@ 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 nuxtUICalendarDefinition = createInput(FUCalendar, {
+  props: ["type", "range", "multiple", "color", "variant", "size", "weekNumbers", "monthControls", "yearControls", "viewControl", "defaultValue", "minValue", "maxValue", "isDateDisabled", "isDateUnavailable", "ui"],
+  family: "NuxtUIInput"
+});
 export const nuxtUICheckboxDefinition = createInput(FUCheckbox, {
   props: ["label", "description", "color", "variant", "size", "indicator", "icon", "indeterminateIcon", "trueValue", "falseValue", "autofocus", "ui"],
   family: "NuxtUIInput"
@@ -28,6 +35,14 @@ export const nuxtUIColorPickerDefinition = createInput(FUColorPicker, {
   props: ["size", "inputClass", "format", "throttle", "ui"],
   family: "NuxtUIInput"
 });
+export const nuxtUIEditorDefinition = createInput(FUEditor, {
+  props: ["contentType", "starterKit", "placeholder", "markdown", "image", "mention", "editorHandlers", "extensions", "autofocus", "toolbar", "toolbarItems", "bubbleToolbar", "bubbleToolbarItems", "dragHandle", "suggestionMenu", "suggestionMenuItems", "mentionItems", "ui"],
+  family: "NuxtUIInput"
+});
+export const nuxtUIFileUploadDefinition = createInput(FUFileUpload, {
+  props: ["multiple", "accept", "icon", "label", "description", "color", "variant", "size", "layout", "position", "dropzone", "interactive", "required", "reset", "fileIcon", "fileImage", "fileDelete", "fileDeleteIcon", "preview", "name", "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"
@@ -53,7 +68,7 @@ export const nuxtUIInputTimeDefinition = createInput(FUInputTime, {
   family: "NuxtUIInput"
 });
 export const nuxtUIListboxDefinition = createInput(FUListbox, {
-  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"],
+  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", "transferSortIcons", "transferItemDraggable"],
   family: "NuxtUIInput"
 });
 export const nuxtUIPinInputDefinition = createInput(FUPinInput, {

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

@@ -1,7 +1,10 @@
 import { createInput } from "@formkit/vue";
+import FUCalendar from "../../../runtime/components/inputs/FUCalendar.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 FUEditor from "../../../runtime/components/inputs/FUEditor.vue";
+import FUFileUpload from "../../../runtime/components/inputs/FUFileUpload.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";
@@ -16,6 +19,10 @@ 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 nuxtUICalendarDefinition = createInput(FUCalendar, {
+  props: ["type", "range", "multiple", "color", "variant", "size", "weekNumbers", "monthControls", "yearControls", "viewControl", "defaultValue", "minValue", "maxValue", "isDateDisabled", "isDateUnavailable", "ui"],
+  family: "NuxtUIInput"
+});
 export const nuxtUICheckboxDefinition = createInput(FUCheckbox, {
   props: ["label", "description", "color", "variant", "size", "indicator", "icon", "indeterminateIcon", "trueValue", "falseValue", "autofocus", "ui"],
   family: "NuxtUIInput"
@@ -28,6 +35,14 @@ export const nuxtUIColorPickerDefinition = createInput(FUColorPicker, {
   props: ["size", "inputClass", "format", "throttle", "ui"],
   family: "NuxtUIInput"
 });
+export const nuxtUIEditorDefinition = createInput(FUEditor, {
+  props: ["contentType", "starterKit", "placeholder", "markdown", "image", "mention", "editorHandlers", "extensions", "autofocus", "toolbar", "toolbarItems", "bubbleToolbar", "bubbleToolbarItems", "dragHandle", "suggestionMenu", "suggestionMenuItems", "mentionItems", "ui"],
+  family: "NuxtUIInput"
+});
+export const nuxtUIFileUploadDefinition = createInput(FUFileUpload, {
+  props: ["multiple", "accept", "icon", "label", "description", "color", "variant", "size", "layout", "position", "dropzone", "interactive", "required", "reset", "fileIcon", "fileImage", "fileDelete", "fileDeleteIcon", "preview", "name", "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"
@@ -53,7 +68,7 @@ export const nuxtUIInputTimeDefinition = createInput(FUInputTime, {
   family: "NuxtUIInput"
 });
 export const nuxtUIListboxDefinition = createInput(FUListbox, {
-  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"],
+  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", "transferSortIcons", "transferItemDraggable"],
   family: "NuxtUIInput"
 });
 export const nuxtUIPinInputDefinition = createInput(FUPinInput, {

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

@@ -28,6 +28,13 @@ function addDragHandle(handleClass = "", iconName = "", render = "true") {
 }
 export const nuxtUIRepeaterDefinition = createInput(
   addElement("div", [
+    // The nested `list` node below shares its name with this outer `input`-type
+    // node but is otherwise a distinct FormKitNode. Without an explicit
+    // `value: '$value'` binding it never inherits the outer node's value, so
+    // its own `_value` stays non-array — which breaks not just rendering
+    // pre-populated items but also every button here (insert/remove/move all
+    // guard on `Array.isArray(parentNode._value)` and silently no-op
+    // otherwise), making the whole repeater look inert until this is set.
     addList("$listName", [
       addInsertButton("$insertButtonLabel", "i-lucide-plus", "$insertButtonClass", "$insertButtonSize", "$node.children.length == 0 || $alwaysDisplayInsertButton"),
       addListGroup([
@@ -46,7 +53,7 @@ export const nuxtUIRepeaterDefinition = createInput(
           onDragend: "$dragNodeEnd"
         })
       ], true, {})
-    ], true, "true")
+    ], true, "true", { value: "$value" })
   ], { class: "$internalListClass", id: "$internalListId" }, true),
   {
     props: [

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

@@ -28,6 +28,13 @@ function addDragHandle(handleClass = "", iconName = "", render = "true") {
 }
 export const nuxtUIRepeaterDefinition = createInput(
   addElement("div", [
+    // The nested `list` node below shares its name with this outer `input`-type
+    // node but is otherwise a distinct FormKitNode. Without an explicit
+    // `value: '$value'` binding it never inherits the outer node's value, so
+    // its own `_value` stays non-array — which breaks not just rendering
+    // pre-populated items but also every button here (insert/remove/move all
+    // guard on `Array.isArray(parentNode._value)` and silently no-op
+    // otherwise), making the whole repeater look inert until this is set.
     addList("$listName", [
       addInsertButton("$insertButtonLabel", "i-lucide-plus", "$insertButtonClass", "$insertButtonSize", "$node.children.length == 0 || $alwaysDisplayInsertButton"),
       addListGroup([
@@ -46,7 +53,7 @@ export const nuxtUIRepeaterDefinition = createInput(
           onDragend: "$dragNodeEnd"
         })
       ], true, {})
-    ], true, "true")
+    ], true, "true", { value: "$value" })
   ], { class: "$internalListClass", id: "$internalListId" }, true),
   {
     props: [

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

@@ -1,5 +1,5 @@
 import type { FormKitBaseSlots, FormKitInputs } from '@formkit/inputs';
-import type { CheckboxSlots, CheckboxGroupSlots, RadioGroupSlots, InputSlots, TextareaSlots, SelectSlots, SelectMenuSlots, InputDateSlots, InputMenuSlots, InputNumberSlots, InputTagsSlots, InputTimeSlots, ListboxSlots, SwitchSlots } from '@nuxt/ui';
+import type { CalendarSlots, CheckboxSlots, CheckboxGroupSlots, EditorSlots, FileUploadSlots, RadioGroupSlots, InputSlots, TextareaSlots, SelectSlots, SelectMenuSlots, InputDateSlots, InputMenuSlots, InputNumberSlots, InputTagsSlots, InputTimeSlots, ListboxSlots, SwitchSlots } from '@nuxt/ui';
 export * from './definitions/index.js';
 export * from './plugins/index.js';
 /**
@@ -8,6 +8,9 @@ export * from './plugins/index.js';
 type MergeSlots<A, B> = A & Omit<B, keyof A>;
 declare module '@formkit/inputs' {
     interface FormKitInputProps<Props extends FormKitInputs<Props>> {
+        nuxtUICalendar: {
+            type: 'nuxtUICalendar';
+        };
         nuxtUICheckbox: {
             type: 'nuxtUICheckbox';
         };
@@ -17,6 +20,12 @@ declare module '@formkit/inputs' {
         nuxtUIColorPicker: {
             type: 'nuxtUIColorPicker';
         };
+        nuxtUIEditor: {
+            type: 'nuxtUIEditor';
+        };
+        nuxtUIFileUpload: {
+            type: 'nuxtUIFileUpload';
+        };
         nuxtUIInput: {
             type: 'nuxtUIInput';
         };
@@ -79,8 +88,11 @@ declare module '@formkit/inputs' {
         };
     }
     interface FormKitInputSlots<Props extends FormKitInputs<Props>> {
+        nuxtUICalendar: MergeSlots<FormKitBaseSlots<Props>, CalendarSlots>;
         nuxtUICheckbox: MergeSlots<FormKitBaseSlots<Props>, CheckboxSlots>;
         nuxtUICheckboxGroup: MergeSlots<FormKitBaseSlots<Props>, CheckboxGroupSlots>;
+        nuxtUIEditor: MergeSlots<FormKitBaseSlots<Props>, EditorSlots>;
+        nuxtUIFileUpload: MergeSlots<FormKitBaseSlots<Props>, FileUploadSlots>;
         nuxtUIInput: MergeSlots<FormKitBaseSlots<Props>, InputSlots>;
         nuxtUIInputDate: MergeSlots<FormKitBaseSlots<Props>, InputDateSlots>;
         nuxtUIInputMenu: MergeSlots<FormKitBaseSlots<Props>, InputMenuSlots>;