@sfxcode/nuxt-ui-formkit 1.1.0 → 1.2.0

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

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=4.0.0"
   },
-  "version": "1.1.0",
+  "version": "1.2.0",
   "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,38 @@
+import type { FormKitFrameworkContext } from '@formkit/core';
+import type { DateValue } from '@internationalized/date';
+import type { PropType } from 'vue';
+export interface CalendarDateRange {
+    start: DateValue;
+    end: DateValue;
+}
+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;
+    defaultValue?: DateValue | DateValue[] | CalendarDateRange;
+    minValue?: DateValue;
+    maxValue?: DateValue;
+    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,49 @@
+<script setup>
+import { useFormKitInput } from "../../utils/useFormKitInput";
+const props = defineProps({
+  context: {
+    type: Object,
+    required: true
+  }
+});
+const { handleInput, styleClass, color, modelValue, validSlotNames } = useFormKitInput(props.context);
+</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="context.defaultValue"
+    :min-value="context.minValue"
+    :max-value="context.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,38 @@
+import type { FormKitFrameworkContext } from '@formkit/core';
+import type { DateValue } from '@internationalized/date';
+import type { PropType } from 'vue';
+export interface CalendarDateRange {
+    start: DateValue;
+    end: DateValue;
+}
+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;
+    defaultValue?: DateValue | DateValue[] | CalendarDateRange;
+    minValue?: DateValue;
+    maxValue?: DateValue;
+    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;

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

@@ -0,0 +1,56 @@
+<script setup>
+import { useFormKitInput } from "../../utils/useFormKitInput";
+const props = defineProps({
+  context: {
+    type: Object,
+    required: true
+  }
+});
+const { handleInput, handleChange, isInvalid, styleClass, color, modelValue, validSlotNames } = useFormKitInput(props.context);
+</script>
+
+<template>
+  <UFileUpload
+    :id="context.id"
+    v-model="modelValue"
+    v-bind="{ ...context?.attrs }"
+    :class="styleClass"
+    :disabled="!!context?.disabled"
+    :style="context?.attrs.style"
+    :highlight="isInvalid || context.highlight"
+    :multiple="context.multiple"
+    :accept="context.accept"
+    :icon="context.icon"
+    :label="context.label"
+    :description="context.description"
+    :color="color"
+    :variant="context.variant ?? 'area'"
+    :size="context.size ?? 'md'"
+    :layout="context.layout ?? 'list'"
+    :position="context.position ?? 'outside'"
+    :dropzone="context.dropzone"
+    :interactive="context.interactive"
+    :required="context.required"
+    :reset="context.reset"
+    :file-icon="context.fileIcon"
+    :file-image="context.fileImage"
+    :file-delete="context.fileDelete"
+    :file-delete-icon="context.fileDeleteIcon"
+    :preview="context.preview"
+    :name="context.name"
+    :ui="context.ui"
+    @change="handleChange"
+    @update:model-value="handleInput"
+  >
+    <template
+      v-for="slotName in validSlotNames"
+      :key="slotName"
+      #[slotName]="slotProps"
+    >
+      <component
+        :is="context?.slots[slotName]"
+        v-bind="{ ...context, ...slotProps }"
+      />
+    </template>
+  </UFileUpload>
+</template>