@sfxcode/nuxt-ui-formkit 1.1.1 → 1.2.1

package/README.md

@@ -18,10 +18,13 @@ FormKit Nuxt UI bridges the gap between [FormKit](https://formkit.com/)'s powerf
 
 ## Features
 
-✨ **17 Input Components** - Complete set of FormKit-wrapped Nuxt UI input components
+✨ **20 Input Components** - Complete set of FormKit-wrapped Nuxt UI input components
+- `nuxtUICalendar` - Bare date-grid picker with range/multiple selection
 - `nuxtUICheckbox` - Single checkbox with label and description
 - `nuxtUICheckboxGroup` - Multiple checkbox selection
 - `nuxtUIColorPicker` - Color selection with multiple formats
+- `nuxtUIEditor` - Tiptap-based rich text editor
+- `nuxtUIFileUpload` - Drag/drop and click-to-browse file input
 - `nuxtUIInput` - Text input with various types (text, email, password, etc.)
 - `nuxtUIInputDate` - Date and time picker with range support
 - `nuxtUIInputMenu` - Dropdown menu with searchable options
@@ -285,9 +288,12 @@ Refer to the [Nuxt UI documentation](https://ui.nuxt.com/) for component-specifi
 The playground includes comprehensive examples for all components:
 
 ### Input Components
+- [Calendar](./playground/app/pages/components/input/calendar.vue)
 - [Checkbox](./playground/app/pages/components/input/checkbox.vue)
 - [CheckboxGroup](./playground/app/pages/components/input/checkbox-group.vue)
 - [ColorPicker](./playground/app/pages/components/input/color-picker.vue)
+- [Editor](./playground/app/pages/components/input/editor.vue)
+- [FileUpload](./playground/app/pages/components/input/file-upload.vue)
 - [Input](./playground/app/pages/components/input/input.vue)
 - [InputDate](./playground/app/pages/components/input/input-date.vue)
 - [InputMenu](./playground/app/pages/components/input/input-menu.vue)
@@ -311,6 +317,10 @@ The playground includes comprehensive examples for all components:
 - [OutputNumber](./playground/app/pages/components/output/number.vue)
 - [OutputText](./playground/app/pages/components/output/text.vue)
 
+### Repeater
+- [Repeater](./playground/app/pages/form/repeater-sample.vue)
+- [Drag-and-Drop Repeater](./playground/app/pages/form/repeater-drag.vue)
+
 ## Development
 
 <details>

package/dist/module.json

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

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

@@ -73,9 +73,11 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: BooleanConstructor;
         default: boolean;
     };
-    modelValue: FormKitSchemaDefinition;
+    modelValue: {
+        type: PropType<FormKitSchemaDefinition>;
+    };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: any) => any;
+    "update:modelValue": (value: FormKitSchemaDefinition | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     id: {
         type: StringConstructor;
@@ -141,9 +143,11 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: BooleanConstructor;
         default: boolean;
     };
-    modelValue: FormKitSchemaDefinition;
+    modelValue: {
+        type: PropType<FormKitSchemaDefinition>;
+    };
 }>> & Readonly<{
-    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: FormKitSchemaDefinition | undefined) => any) | undefined;
 }>, {
     data: Record<string, any>;
     id: string;

package/dist/runtime/components/FUDataEdit.vue

@@ -71,7 +71,7 @@ const props = defineProps({
 });
 const emit = defineEmits(["dataSaved", "onReset"]);
 const formSchema = ref(props.schema);
-const formData = defineModel({ type: null });
+const formData = defineModel({ type: [Object, String, Array] });
 watch(() => props.schema, (newSchema) => {
   formSchema.value = newSchema;
 }, { deep: true });

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

@@ -73,9 +73,11 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: BooleanConstructor;
         default: boolean;
     };
-    modelValue: FormKitSchemaDefinition;
+    modelValue: {
+        type: PropType<FormKitSchemaDefinition>;
+    };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: any) => any;
+    "update:modelValue": (value: FormKitSchemaDefinition | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     id: {
         type: StringConstructor;
@@ -141,9 +143,11 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: BooleanConstructor;
         default: boolean;
     };
-    modelValue: FormKitSchemaDefinition;
+    modelValue: {
+        type: PropType<FormKitSchemaDefinition>;
+    };
 }>> & Readonly<{
-    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: FormKitSchemaDefinition | undefined) => any) | undefined;
 }>, {
     data: Record<string, any>;
     id: string;

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

@@ -25,9 +25,11 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: BooleanConstructor;
         default: boolean;
     };
-    modelValue: FormKitSchemaDefinition;
+    modelValue: {
+        type: PropType<FormKitSchemaDefinition>;
+    };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: any) => any;
+    "update:modelValue": (value: FormKitSchemaDefinition | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     data: {
         type: ObjectConstructor;
@@ -49,9 +51,11 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: BooleanConstructor;
         default: boolean;
     };
-    modelValue: FormKitSchemaDefinition;
+    modelValue: {
+        type: PropType<FormKitSchemaDefinition>;
+    };
 }>> & Readonly<{
-    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: FormKitSchemaDefinition | undefined) => any) | undefined;
 }>, {
     data: Record<string, any>;
     schema: FormKitSchemaDefinition;

package/dist/runtime/components/FUDataView.vue

@@ -25,7 +25,7 @@ const props = defineProps({
   }
 });
 const formSchema = ref(props.schema);
-const formData = defineModel({ type: null });
+const formData = defineModel({ type: [Object, String, Array] });
 watch(() => props.schema, (newSchema) => {
   formSchema.value = newSchema;
 }, { deep: true });

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

@@ -25,9 +25,11 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: BooleanConstructor;
         default: boolean;
     };
-    modelValue: FormKitSchemaDefinition;
+    modelValue: {
+        type: PropType<FormKitSchemaDefinition>;
+    };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: any) => any;
+    "update:modelValue": (value: FormKitSchemaDefinition | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     data: {
         type: ObjectConstructor;
@@ -49,9 +51,11 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: BooleanConstructor;
         default: boolean;
     };
-    modelValue: FormKitSchemaDefinition;
+    modelValue: {
+        type: PropType<FormKitSchemaDefinition>;
+    };
 }>> & Readonly<{
-    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: FormKitSchemaDefinition | undefined) => any) | undefined;
 }>, {
     data: Record<string, any>;
     schema: FormKitSchemaDefinition;

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

@@ -0,0 +1,48 @@
+import type { FormKitFrameworkContext } from '@formkit/core';
+import type { DateValue } from '@internationalized/date';
+import type { PropType } from 'vue';
+import type { DateValueType } from '../../utils/dateValueConversion.js';
+type DateLike = DateValue | Date | string;
+export interface CalendarDateRange {
+    start: DateLike;
+    end: DateLike;
+}
+export interface FormKitCalendarProps {
+    type?: 'date' | 'month' | 'year';
+    color?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | 'neutral';
+    variant?: 'solid' | 'outline' | 'soft' | 'subtle';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    range?: boolean;
+    multiple?: boolean;
+    weekNumbers?: boolean;
+    monthControls?: boolean;
+    yearControls?: boolean;
+    viewControl?: boolean;
+    /**
+     * Shape of the value read from / written to the FormKit form data.
+     * `'calendar'` (default) keeps the native `@internationalized/date` `DateValue`.
+     * `'date'` converts to/from a JS `Date`. `'iso'` converts to/from an ISO 8601 string.
+     */
+    valueType?: DateValueType;
+    /** Timezone used when converting to/from `'date'`/`'iso'`. Defaults to the local timezone. */
+    timeZone?: string;
+    defaultValue?: DateLike | DateLike[] | CalendarDateRange;
+    minValue?: DateLike;
+    maxValue?: DateLike;
+    isDateDisabled?: (date: DateValue) => boolean;
+    isDateUnavailable?: (date: DateValue) => boolean;
+    ui?: Record<string, unknown>;
+}
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    context: {
+        type: PropType<FormKitFrameworkContext & FormKitCalendarProps>;
+        required: true;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    context: {
+        type: PropType<FormKitFrameworkContext & FormKitCalendarProps>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,61 @@
+<script setup>
+import { computed } from "vue";
+import { useFormKitInput } from "../../utils/useFormKitInput";
+import { toDateValue, toDateValueOrRangeOrArray, fromDateValueOrRangeOrArray } from "../../utils/dateValueConversion";
+const props = defineProps({
+  context: {
+    type: Object,
+    required: true
+  }
+});
+const { handleInput, styleClass, color, validSlotNames } = useFormKitInput(props.context);
+const conversionOptions = computed(() => ({ timeZone: props.context.timeZone }));
+const modelValue = computed({
+  get: () => toDateValueOrRangeOrArray(props.context._value, conversionOptions.value),
+  set: (value) => {
+    props.context.node.input(fromDateValueOrRangeOrArray(value, props.context.valueType ?? "calendar", props.context.timeZone));
+  }
+});
+const defaultValue = computed(() => toDateValueOrRangeOrArray(props.context.defaultValue, conversionOptions.value));
+const minValue = computed(() => toDateValue(props.context.minValue, conversionOptions.value));
+const maxValue = computed(() => toDateValue(props.context.maxValue, conversionOptions.value));
+</script>
+
+<template>
+  <UCalendar
+    :id="context.id"
+    v-model="modelValue"
+    v-bind="{ ...context?.attrs }"
+    :class="styleClass"
+    :disabled="!!context?.disabled"
+    :style="context?.attrs.style"
+    :type="context.type ?? 'date'"
+    :color="color"
+    :variant="context.variant"
+    :size="context.size ?? 'md'"
+    :range="context.range"
+    :multiple="context.multiple"
+    :week-numbers="context.weekNumbers"
+    :month-controls="context.monthControls"
+    :year-controls="context.yearControls"
+    :view-control="context.viewControl"
+    :default-value="defaultValue"
+    :min-value="minValue"
+    :max-value="maxValue"
+    :is-date-disabled="context.isDateDisabled"
+    :is-date-unavailable="context.isDateUnavailable"
+    :ui="context.ui"
+    @update:model-value="handleInput"
+  >
+    <template
+      v-for="slotName in validSlotNames"
+      :key="slotName"
+      #[slotName]="slotProps"
+    >
+      <component
+        :is="context?.slots[slotName]"
+        v-bind="{ ...context, ...slotProps }"
+      />
+    </template>
+  </UCalendar>
+</template>

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

@@ -0,0 +1,48 @@
+import type { FormKitFrameworkContext } from '@formkit/core';
+import type { DateValue } from '@internationalized/date';
+import type { PropType } from 'vue';
+import type { DateValueType } from '../../utils/dateValueConversion.js';
+type DateLike = DateValue | Date | string;
+export interface CalendarDateRange {
+    start: DateLike;
+    end: DateLike;
+}
+export interface FormKitCalendarProps {
+    type?: 'date' | 'month' | 'year';
+    color?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | 'neutral';
+    variant?: 'solid' | 'outline' | 'soft' | 'subtle';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    range?: boolean;
+    multiple?: boolean;
+    weekNumbers?: boolean;
+    monthControls?: boolean;
+    yearControls?: boolean;
+    viewControl?: boolean;
+    /**
+     * Shape of the value read from / written to the FormKit form data.
+     * `'calendar'` (default) keeps the native `@internationalized/date` `DateValue`.
+     * `'date'` converts to/from a JS `Date`. `'iso'` converts to/from an ISO 8601 string.
+     */
+    valueType?: DateValueType;
+    /** Timezone used when converting to/from `'date'`/`'iso'`. Defaults to the local timezone. */
+    timeZone?: string;
+    defaultValue?: DateLike | DateLike[] | CalendarDateRange;
+    minValue?: DateLike;
+    maxValue?: DateLike;
+    isDateDisabled?: (date: DateValue) => boolean;
+    isDateUnavailable?: (date: DateValue) => boolean;
+    ui?: Record<string, unknown>;
+}
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    context: {
+        type: PropType<FormKitFrameworkContext & FormKitCalendarProps>;
+        required: true;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    context: {
+        type: PropType<FormKitFrameworkContext & FormKitCalendarProps>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,60 @@
+import type { FormKitFrameworkContext } from '@formkit/core';
+import type { AnyExtension } from '@tiptap/core';
+import type { PropType } from 'vue';
+export interface FormKitEditorHandler {
+    canExecute: (editor: unknown, cmd?: unknown) => boolean;
+    execute: (editor: unknown, cmd?: unknown) => unknown;
+    isActive: (editor: unknown, cmd?: unknown) => boolean;
+    isDisabled?: (editor: unknown, cmd?: unknown) => boolean;
+}
+export interface FormKitEditorItem {
+    kind: string;
+    icon?: string;
+    label?: string;
+    tooltip?: Record<string, unknown>;
+    [key: string]: unknown;
+}
+export interface FormKitEditorSuggestionItem extends FormKitEditorItem {
+    label: string;
+}
+export interface FormKitEditorMentionItem {
+    label: string;
+    description?: string;
+    icon?: string;
+    avatar?: Record<string, unknown>;
+    disabled?: boolean;
+    [key: string]: unknown;
+}
+export interface FormKitEditorProps {
+    contentType?: 'json' | 'html' | 'markdown';
+    starterKit?: Record<string, unknown>;
+    placeholder?: string | Record<string, unknown>;
+    markdown?: Record<string, unknown>;
+    image?: boolean | Record<string, unknown>;
+    mention?: boolean | Record<string, unknown>;
+    editorHandlers?: Record<string, FormKitEditorHandler>;
+    extensions?: AnyExtension[];
+    autofocus?: boolean;
+    toolbar?: boolean;
+    toolbarItems?: FormKitEditorItem[] | FormKitEditorItem[][];
+    bubbleToolbar?: boolean;
+    bubbleToolbarItems?: FormKitEditorItem[] | FormKitEditorItem[][];
+    dragHandle?: boolean;
+    suggestionMenu?: boolean;
+    suggestionMenuItems?: FormKitEditorSuggestionItem[] | FormKitEditorSuggestionItem[][];
+    mentionItems?: FormKitEditorMentionItem[];
+    ui?: Record<string, unknown>;
+}
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    context: {
+        type: PropType<FormKitFrameworkContext & FormKitEditorProps>;
+        required: true;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    context: {
+        type: PropType<FormKitFrameworkContext & FormKitEditorProps>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,121 @@
+<script setup>
+import { useFormKitInput } from "../../utils/useFormKitInput";
+const DEFAULT_EDITOR_TOOLBAR_ITEMS = [
+  [
+    { kind: "undo", icon: "i-lucide-undo", tooltip: { text: "Undo" } },
+    { kind: "redo", icon: "i-lucide-redo", tooltip: { text: "Redo" } }
+  ],
+  [
+    { kind: "heading", level: 1, icon: "i-lucide-heading-1", tooltip: { text: "Heading 1" } },
+    { kind: "heading", level: 2, icon: "i-lucide-heading-2", tooltip: { text: "Heading 2" } },
+    { kind: "heading", level: 3, icon: "i-lucide-heading-3", tooltip: { text: "Heading 3" } }
+  ],
+  [
+    { kind: "mark", mark: "bold", icon: "i-lucide-bold", tooltip: { text: "Bold" } },
+    { kind: "mark", mark: "italic", icon: "i-lucide-italic", tooltip: { text: "Italic" } },
+    { kind: "mark", mark: "underline", icon: "i-lucide-underline", tooltip: { text: "Underline" } },
+    { kind: "mark", mark: "strike", icon: "i-lucide-strikethrough", tooltip: { text: "Strikethrough" } },
+    { kind: "mark", mark: "code", icon: "i-lucide-code", tooltip: { text: "Code" } }
+  ],
+  [
+    { kind: "bulletList", icon: "i-lucide-list", tooltip: { text: "Bullet List" } },
+    { kind: "orderedList", icon: "i-lucide-list-ordered", tooltip: { text: "Ordered List" } },
+    { kind: "blockquote", icon: "i-lucide-quote", tooltip: { text: "Blockquote" } },
+    { kind: "codeBlock", icon: "i-lucide-square-code", tooltip: { text: "Code Block" } },
+    { kind: "horizontalRule", icon: "i-lucide-minus", tooltip: { text: "Horizontal Rule" } },
+    { kind: "link", icon: "i-lucide-link", tooltip: { text: "Link" } }
+  ]
+];
+const DEFAULT_BUBBLE_TOOLBAR_ITEMS = [
+  [
+    { kind: "mark", mark: "bold", icon: "i-lucide-bold", tooltip: { text: "Bold" } },
+    { kind: "mark", mark: "italic", icon: "i-lucide-italic", tooltip: { text: "Italic" } },
+    { kind: "mark", mark: "underline", icon: "i-lucide-underline", tooltip: { text: "Underline" } },
+    { kind: "mark", mark: "strike", icon: "i-lucide-strikethrough", tooltip: { text: "Strikethrough" } },
+    { kind: "mark", mark: "code", icon: "i-lucide-code", tooltip: { text: "Code" } }
+  ],
+  [
+    { kind: "link", icon: "i-lucide-link", tooltip: { text: "Link" } }
+  ]
+];
+const DEFAULT_SUGGESTION_MENU_ITEMS = [
+  [
+    { kind: "paragraph", label: "Paragraph", icon: "i-lucide-type" },
+    { kind: "heading", level: 1, label: "Heading 1", icon: "i-lucide-heading-1" },
+    { kind: "heading", level: 2, label: "Heading 2", icon: "i-lucide-heading-2" },
+    { kind: "heading", level: 3, label: "Heading 3", icon: "i-lucide-heading-3" },
+    { kind: "bulletList", label: "Bullet List", icon: "i-lucide-list" },
+    { kind: "orderedList", label: "Numbered List", icon: "i-lucide-list-ordered" },
+    { kind: "blockquote", label: "Blockquote", icon: "i-lucide-text-quote" },
+    { kind: "codeBlock", label: "Code Block", icon: "i-lucide-square-code" },
+    { kind: "horizontalRule", label: "Horizontal Rule", icon: "i-lucide-separator-horizontal" }
+  ]
+];
+function bubbleToolbarShouldShow({ view, state }) {
+  return view.hasFocus() && !state.selection.empty;
+}
+const props = defineProps({
+  context: {
+    type: Object,
+    required: true
+  }
+});
+const { handleInput, styleClass, modelValue } = useFormKitInput(props.context);
+</script>
+
+<template>
+  <UEditor
+    :id="context.id"
+    v-model="modelValue"
+    v-bind="{ ...context?.attrs }"
+    :class="styleClass"
+    :editable="!context?.disabled"
+    :style="context?.attrs.style"
+    :content-type="context.contentType"
+    :starter-kit="context.starterKit"
+    :placeholder="context.placeholder"
+    :markdown="context.markdown"
+    :image="context.image"
+    :mention="context.mention"
+    :handlers="context.editorHandlers"
+    :extensions="context.extensions"
+    :autofocus="context.autofocus"
+    :ui="context.ui"
+    @update:model-value="handleInput"
+  >
+    <template #default="{ editor, handlers }">
+      <UEditorToolbar
+        v-if="context.toolbar !== false"
+        :editor="editor"
+        :items="context.toolbarItems ?? DEFAULT_EDITOR_TOOLBAR_ITEMS"
+        class="border-b border-default px-2 py-1 mb-2 flex-wrap"
+      />
+      <UEditorToolbar
+        v-if="context.bubbleToolbar !== false"
+        :editor="editor"
+        :items="context.bubbleToolbarItems ?? DEFAULT_BUBBLE_TOOLBAR_ITEMS"
+        layout="bubble"
+        :should-show="bubbleToolbarShouldShow"
+      />
+      <UEditorDragHandle
+        v-if="context.dragHandle"
+        :editor="editor"
+      />
+      <UEditorSuggestionMenu
+        v-if="context.suggestionMenu"
+        :editor="editor"
+        :items="context.suggestionMenuItems ?? DEFAULT_SUGGESTION_MENU_ITEMS"
+      />
+      <UEditorMentionMenu
+        v-if="context.mentionItems?.length"
+        :editor="editor"
+        :items="context.mentionItems"
+      />
+      <component
+        :is="context.slots.default"
+        v-if="context?.slots?.default"
+        v-bind="{ ...context, editor, handlers }"
+      />
+    </template>
+  </UEditor>
+</template>

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

@@ -0,0 +1,60 @@
+import type { FormKitFrameworkContext } from '@formkit/core';
+import type { AnyExtension } from '@tiptap/core';
+import type { PropType } from 'vue';
+export interface FormKitEditorHandler {
+    canExecute: (editor: unknown, cmd?: unknown) => boolean;
+    execute: (editor: unknown, cmd?: unknown) => unknown;
+    isActive: (editor: unknown, cmd?: unknown) => boolean;
+    isDisabled?: (editor: unknown, cmd?: unknown) => boolean;
+}
+export interface FormKitEditorItem {
+    kind: string;
+    icon?: string;
+    label?: string;
+    tooltip?: Record<string, unknown>;
+    [key: string]: unknown;
+}
+export interface FormKitEditorSuggestionItem extends FormKitEditorItem {
+    label: string;
+}
+export interface FormKitEditorMentionItem {
+    label: string;
+    description?: string;
+    icon?: string;
+    avatar?: Record<string, unknown>;
+    disabled?: boolean;
+    [key: string]: unknown;
+}
+export interface FormKitEditorProps {
+    contentType?: 'json' | 'html' | 'markdown';
+    starterKit?: Record<string, unknown>;
+    placeholder?: string | Record<string, unknown>;
+    markdown?: Record<string, unknown>;
+    image?: boolean | Record<string, unknown>;
+    mention?: boolean | Record<string, unknown>;
+    editorHandlers?: Record<string, FormKitEditorHandler>;
+    extensions?: AnyExtension[];
+    autofocus?: boolean;
+    toolbar?: boolean;
+    toolbarItems?: FormKitEditorItem[] | FormKitEditorItem[][];
+    bubbleToolbar?: boolean;
+    bubbleToolbarItems?: FormKitEditorItem[] | FormKitEditorItem[][];
+    dragHandle?: boolean;
+    suggestionMenu?: boolean;
+    suggestionMenuItems?: FormKitEditorSuggestionItem[] | FormKitEditorSuggestionItem[][];
+    mentionItems?: FormKitEditorMentionItem[];
+    ui?: Record<string, unknown>;
+}
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    context: {
+        type: PropType<FormKitFrameworkContext & FormKitEditorProps>;
+        required: true;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    context: {
+        type: PropType<FormKitFrameworkContext & FormKitEditorProps>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/inputs/FUFileUpload.d.vue.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;