@nuxt/ui 4.2.0 → 4.3.0

package/dist/runtime/components/EditorToolbar.vue

@@ -0,0 +1,242 @@
+<script>
+import theme from "#build/ui/editor-toolbar";
+</script>
+
+<script setup>
+import { computed, inject } from "vue";
+import { Primitive, Separator, useForwardProps } from "reka-ui";
+import { defu } from "defu";
+import { BubbleMenu, FloatingMenu } from "@tiptap/vue-3/menus";
+import { reactiveOmit } from "@vueuse/core";
+import { useAppConfig } from "#imports";
+import { isArrayOfArray, pick, omit } from "../utils";
+import { createHandlers } from "../utils/editor";
+import { tv } from "../utils/tv";
+import UButton from "./Button.vue";
+import UDropdownMenu from "./DropdownMenu.vue";
+import UTooltip from "./Tooltip.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  as: { type: null, required: false },
+  color: { type: null, required: false, default: "neutral" },
+  variant: { type: null, required: false, default: "ghost" },
+  activeColor: { type: null, required: false, default: "primary" },
+  activeVariant: { type: null, required: false, default: "soft" },
+  size: { type: null, required: false, default: "sm" },
+  items: { type: null, required: false },
+  editor: { type: Object, required: true },
+  class: { type: null, required: false },
+  ui: { type: null, required: false },
+  layout: { type: String, required: false, default: "fixed" },
+  pluginKey: { type: [Object, String], required: false },
+  updateDelay: { type: Number, required: false },
+  resizeDelay: { type: Number, required: false },
+  shouldShow: { type: [Function, null], required: false },
+  appendTo: { type: Function, required: false, skipCheck: true },
+  getReferencedVirtualElement: { type: Function, required: false },
+  options: { type: Object, required: false }
+});
+defineSlots();
+const appConfig = useAppConfig();
+const handlers = inject("editorHandlers", computed(() => createHandlers()));
+const Component = computed(() => {
+  return {
+    bubble: BubbleMenu,
+    floating: FloatingMenu,
+    fixed: "template"
+  }[props.layout];
+});
+const rootProps = useForwardProps(reactiveOmit(props, "as", "color", "variant", "activeColor", "activeVariant", "size", "items", "layout", "editor", "class", "ui"));
+const options = computed(() => defu(props.options, {
+  offset: 8,
+  shift: { padding: 8 }
+}));
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.editorToolbar || {} })({
+  layout: props.layout
+}));
+const groups = computed(
+  () => props.items?.length ? isArrayOfArray(props.items) ? props.items : [props.items] : []
+);
+function isActive(item) {
+  if (!props.editor?.isEditable) {
+    return false;
+  }
+  if ("items" in item && item.items?.length) {
+    return item.items?.some((item2) => isActive(item2)) || false;
+  }
+  if (!("kind" in item)) {
+    return item.active ?? false;
+  }
+  const handler = handlers?.value?.[item.kind];
+  return handler?.isActive(props.editor, item) || false;
+}
+function isDisabled(item) {
+  if (!props.editor?.isEditable) {
+    return true;
+  }
+  if ("items" in item && item.items?.length) {
+    const items = isArrayOfArray(item.items) ? item.items.flat() : item.items;
+    const itemItems = items.filter((item2) => "kind" in item2);
+    if (itemItems.length === 0) {
+      return true;
+    }
+    return itemItems.every((item2) => isDisabled(item2));
+  }
+  if (!("kind" in item)) {
+    return item.disabled ?? false;
+  }
+  const handler = handlers?.value?.[item.kind];
+  if (!handler) {
+    return false;
+  }
+  if (handler.isDisabled?.(props.editor, item)) {
+    return true;
+  }
+  return !handler.canExecute(props.editor, item);
+}
+function onClick(e, item) {
+  if (!props.editor?.isEditable || isDisabled(item)) {
+    return;
+  }
+  if ("items" in item || !("kind" in item)) {
+    if ("onClick" in item) {
+      for (const onClick2 of Array.isArray(item.onClick) ? item.onClick : [item.onClick]) {
+        onClick2?.(e);
+      }
+    }
+    return;
+  }
+  const handler = handlers?.value?.[item.kind];
+  if (handler) {
+    handler.execute(props.editor, item).run();
+  }
+}
+function getActiveChildItem(item) {
+  if (!item.items) {
+    return void 0;
+  }
+  const items = isArrayOfArray(item.items) ? item.items.flat() : item.items;
+  return items.find((childItem) => {
+    if (!("kind" in childItem)) {
+      return false;
+    }
+    return isActive(childItem);
+  });
+}
+function getButtonProps(item) {
+  const baseProps = omit(item, ["kind", "mark", "align", "level", "href", "src", "pos", "items", "slot", "checkedIcon", "loadingIcon", "externalIcon", "content", "arrow", "portal", "modal", "tooltip"]);
+  if ("items" in item && item.items?.length) {
+    const activeChild = getActiveChildItem(item);
+    if (activeChild?.icon) {
+      baseProps.icon = activeChild.icon;
+    }
+    if (activeChild?.label && baseProps.label !== void 0) {
+      baseProps.label = activeChild.label;
+    }
+  }
+  return defu(baseProps, {
+    color: props.color,
+    activeColor: props.activeColor,
+    activeVariant: props.activeVariant,
+    variant: props.variant,
+    size: props.size
+  });
+}
+function getDropdownProps(item) {
+  const baseProps = pick(item, ["checkedIcon", "loadingIcon", "externalIcon", "content", "arrow", "portal", "modal", "ui"]);
+  return defu(baseProps, {
+    modal: false
+  });
+}
+function mapDropdownItem(item) {
+  const children = "children" in item && Array.isArray(item.children) ? item.children.map(mapDropdownItem) : void 0;
+  if (!("kind" in item)) {
+    return children ? { ...item, children } : item;
+  }
+  const editorToolbarItem = item;
+  return {
+    ...editorToolbarItem,
+    ...children && { children },
+    active: isActive(editorToolbarItem),
+    disabled: isDisabled(editorToolbarItem),
+    onSelect: (e) => onClick(e, editorToolbarItem)
+  };
+}
+function getDropdownItems(item) {
+  if (!item.items) {
+    return [];
+  }
+  return isArrayOfArray(item.items) ? item.items.map((group) => group.map(mapDropdownItem)) : [item.items.map(mapDropdownItem)];
+}
+</script>
+
+<template>
+  <Primitive
+    :as="Component"
+    v-bind="Component !== 'template' ? {
+  editor,
+  tabindex: -1,
+  class: ui.root({ class: props.ui?.root }),
+  ...rootProps,
+  options,
+  ...$attrs
+} : {
+  ...$attrs
+}"
+  >
+    <Primitive :as="as" role="toolbar" data-slot="base" :class="ui.base({ class: [props.ui?.base, props.class] })">
+      <template v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`">
+        <div role="group" data-slot="group" :class="ui.group({ class: props.ui?.group })">
+          <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
+            <slot
+              :name="item.slot || 'item'"
+              :item="item"
+              :index="index"
+              :is-active="isActive"
+              :is-disabled="isDisabled"
+              :on-click="onClick"
+            >
+              <UDropdownMenu
+                v-if="'items' in item && item.items?.length"
+                v-bind="getDropdownProps(item)"
+                :items="getDropdownItems(item)"
+              >
+                <UTooltip v-if="item.tooltip" :disabled="isDisabled(item)" v-bind="{ ...item.tooltip || {} }">
+                  <UButton :active="isActive(item)" :disabled="isDisabled(item)" v-bind="getButtonProps(item)" />
+                </UTooltip>
+
+                <UButton v-else :active="isActive(item)" :disabled="isDisabled(item)" v-bind="getButtonProps(item)" />
+              </UDropdownMenu>
+
+              <UTooltip v-else-if="item.tooltip" :disabled="isDisabled(item)" v-bind="{ ...item.tooltip || {} }">
+                <UButton
+                  :active="isActive(item)"
+                  :disabled="isDisabled(item)"
+                  v-bind="getButtonProps(item)"
+                  :ui="item.ui"
+                  @click="onClick($event, item)"
+                />
+              </UTooltip>
+
+              <UButton
+                v-else
+                :active="isActive(item)"
+                :disabled="isDisabled(item)"
+                v-bind="getButtonProps(item)"
+                :ui="item.ui"
+                @click="onClick($event, item)"
+              />
+            </slot>
+          </template>
+        </div>
+
+        <Separator
+          v-if="groupIndex < groups.length - 1"
+          data-slot="separator"
+          :class="ui.separator({ class: props.ui?.separator })"
+          orientation="vertical"
+        />
+      </template>
+    </Primitive>
+  </Primitive>
+</template>

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

@@ -0,0 +1,90 @@
+import type { AppConfig } from '@nuxt/schema';
+import type { Editor } from '@tiptap/vue-3';
+import type { BubbleMenuPluginProps } from '@tiptap/extension-bubble-menu';
+import type { FloatingMenuPluginProps } from '@tiptap/extension-floating-menu';
+import theme from '#build/ui/editor-toolbar';
+import type { ButtonProps, DropdownMenuProps, DropdownMenuItem, TooltipProps, LinkPropsKeys } from '../types';
+import type { EditorItem, EditorCustomHandlers } from '../types/editor';
+import type { ArrayOrNested, DynamicSlots, MergeTypes, NestedItem } from '../types/utils';
+import type { ComponentConfig } from '../types/tv';
+type EditorToolbar = ComponentConfig<typeof theme, AppConfig, 'editorToolbar'>;
+type ButtonItem = Omit<ButtonProps, 'type'> & {
+    'slot'?: string;
+    'tooltip'?: TooltipProps;
+    'aria-label'?: string;
+};
+type EditorToolbarButtonItem<H extends EditorCustomHandlers = EditorCustomHandlers> = Omit<ButtonItem, LinkPropsKeys> & EditorItem<H>;
+type EditorToolbarDropdownChildItem<H extends EditorCustomHandlers = EditorCustomHandlers> = DropdownMenuItem | (Omit<DropdownMenuItem, 'type'> & EditorItem<H>);
+type EditorToolbarDropdownItem<H extends EditorCustomHandlers = EditorCustomHandlers> = ButtonItem & DropdownMenuProps<ArrayOrNested<EditorToolbarDropdownChildItem<H>>>;
+export type EditorToolbarItem<H extends EditorCustomHandlers = EditorCustomHandlers> = ButtonItem | EditorToolbarButtonItem<H> | EditorToolbarDropdownItem<H>;
+type EditorToolbarBaseProps<T extends ArrayOrNested<EditorToolbarItem> = ArrayOrNested<EditorToolbarItem>> = {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    /**
+     * The color of the toolbar controls.
+     * @defaultValue 'neutral'
+     */
+    color?: ButtonProps['color'];
+    /**
+     * The variant of the toolbar controls.
+     * @defaultValue 'ghost'
+     */
+    variant?: ButtonProps['variant'];
+    /**
+     * The color of the active toolbar control.
+     * @defaultValue 'primary'
+     */
+    activeColor?: ButtonProps['color'];
+    /**
+     * The variant of the active toolbar control.
+     * @defaultValue 'soft'
+     */
+    activeVariant?: ButtonProps['variant'];
+    /**
+     * The size of the toolbar controls.
+     * @defaultValue 'sm'
+     */
+    size?: ButtonProps['size'];
+    items?: T;
+    editor: Editor;
+    class?: any;
+    ui?: EditorToolbar['slots'];
+};
+export type EditorToolbarProps<T extends ArrayOrNested<EditorToolbarItem> = ArrayOrNested<EditorToolbarItem>> = (EditorToolbarBaseProps<T> & {
+    layout?: 'fixed';
+}) | (EditorToolbarBaseProps<T> & Partial<Omit<BubbleMenuPluginProps, 'editor' | 'element'>> & {
+    layout?: 'bubble';
+}) | (EditorToolbarBaseProps<T> & Partial<Omit<FloatingMenuPluginProps, 'editor' | 'element'>> & {
+    layout?: 'floating';
+});
+type SlotPropsProps = {
+    index: number;
+    isActive: (item: EditorToolbarItem) => boolean;
+    isDisabled: (item: EditorToolbarItem) => boolean;
+    onClick: (e: MouseEvent, item: EditorToolbarItem) => void;
+};
+type SlotProps<T extends EditorToolbarItem> = (props: {
+    item: T;
+} & SlotPropsProps) => any;
+export type EditorToolbarSlots<A extends ArrayOrNested<EditorToolbarItem> = ArrayOrNested<EditorToolbarItem>, T extends NestedItem<A> = NestedItem<A>> = {
+    item: SlotProps<T>;
+} & DynamicSlots<MergeTypes<T>, undefined, SlotPropsProps>;
+declare const __VLS_export: <T extends ArrayOrNested<EditorToolbarItem>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<EditorToolbarProps<T>> & import("vue").PublicProps & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: EditorToolbarSlots<T, NestedItem<T>>;
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T as K]: T[K];
+} & {};

package/dist/runtime/components/Empty.vue

@@ -11,7 +11,7 @@ import UAvatar from "./Avatar.vue";
 import UButton from "./Button.vue";
 const props = defineProps({
   as: { type: null, required: false },
-  icon: { type: [String, Object], required: false },
+  icon: { type: null, required: false },
   avatar: { type: Object, required: false },
   title: { type: String, required: false },
   description: { type: String, required: false },

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

@@ -23,7 +23,7 @@ export interface ErrorProps {
      * `{ size: 'lg', color: 'primary', variant: 'solid', label: 'Back to home' }`{lang="ts-type"}
      * @defaultValue true
      */
-    clear?: boolean | Partial<ButtonProps>;
+    clear?: boolean | ButtonProps;
     class?: any;
     ui?: Error['slots'];
 }
@@ -34,10 +34,7 @@ export interface ErrorSlots {
     message(props?: {}): any;
     links(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ErrorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ErrorProps> & Readonly<{}>, {
-    redirect: string;
-    clear: boolean | Partial<ButtonProps>;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ErrorSlots>;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ErrorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ErrorProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ErrorSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

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

@@ -23,7 +23,7 @@ export interface ErrorProps {
      * `{ size: 'lg', color: 'primary', variant: 'solid', label: 'Back to home' }`{lang="ts-type"}
      * @defaultValue true
      */
-    clear?: boolean | Partial<ButtonProps>;
+    clear?: boolean | ButtonProps;
     class?: any;
     ui?: Error['slots'];
 }
@@ -34,10 +34,7 @@ export interface ErrorSlots {
     message(props?: {}): any;
     links(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ErrorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ErrorProps> & Readonly<{}>, {
-    redirect: string;
-    clear: boolean | Partial<ButtonProps>;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ErrorSlots>;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ErrorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ErrorProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ErrorSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

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

@@ -23,9 +23,7 @@ export interface FieldGroupProps {
 export interface FieldGroupSlots {
     default(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<FieldGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FieldGroupProps> & Readonly<{}>, {
-    orientation: FieldGroup["variants"]["orientation"];
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, FieldGroupSlots>;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<FieldGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FieldGroupProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, FieldGroupSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

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

@@ -23,9 +23,7 @@ export interface FieldGroupProps {
 export interface FieldGroupSlots {
     default(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<FieldGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FieldGroupProps> & Readonly<{}>, {
-    orientation: FieldGroup["variants"]["orientation"];
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, FieldGroupSlots>;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<FieldGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FieldGroupProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, FieldGroupSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

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

@@ -1,7 +1,7 @@
 import type { AppConfig } from '@nuxt/schema';
 import type { UseFileDialogReturn } from '@vueuse/core';
 import theme from '#build/ui/file-upload';
-import type { ButtonProps, IconProps } from '../types';
+import type { ButtonProps, IconProps, LinkPropsKeys } from '../types';
 import type { InputHTMLAttributes } from '../types/html';
 import type { ComponentConfig } from '../types/tv';
 type FileUpload = ComponentConfig<typeof theme, AppConfig, 'fileUpload'>;
@@ -83,7 +83,7 @@ export interface FileUploadProps<M extends boolean = false> extends /** @vue-ign
      * When `layout` is `grid`, the default is `{ color: 'neutral', variant: 'solid', size: 'xs' }`{lang="ts-type"}
      * When `layout` is `list`, the default is `{ color: 'neutral', variant: 'link' }`{lang="ts-type"}
      */
-    fileDelete?: boolean | Partial<ButtonProps>;
+    fileDelete?: boolean | Omit<ButtonProps, LinkPropsKeys>;
     /**
      * The icon displayed to delete a file.
      * @defaultValue appConfig.ui.icons.close
@@ -157,10 +157,9 @@ export interface FileUploadSlots<M extends boolean = false> {
 declare const __VLS_export: <M extends boolean = false>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: __VLS_PrettifyLocal<(FileUploadProps<M> & {
         modelValue?: (M extends true ? File[] : File) | null;
-    }) & {
-        onChange?: ((event: Event) => any) | undefined;
-        "onUpdate:modelValue"?: ((value: (M extends true ? File[] : File) | null | undefined) => any) | undefined;
-    }> & import("vue").PublicProps;
+    }) & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: (M extends true ? File[] : File) | null | undefined) => void)>>> & import("vue").PublicProps & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
     expose: (exposed: import("vue").ShallowUnwrapRef<{
         inputRef: Readonly<import("vue").Ref<HTMLInputElement, HTMLInputElement>>;
         dropzoneRef: import("vue").Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;

package/dist/runtime/components/FileUpload.vue

@@ -18,7 +18,7 @@ const props = defineProps({
   as: { type: null, required: false },
   id: { type: String, required: false },
   name: { type: String, required: false },
-  icon: { type: [String, Object], required: false },
+  icon: { type: null, required: false },
   label: { type: String, required: false },
   description: { type: String, required: false },
   color: { type: null, required: false },
@@ -34,9 +34,9 @@ const props = defineProps({
   interactive: { type: Boolean, required: false, default: true },
   required: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
-  fileIcon: { type: [String, Object], required: false },
+  fileIcon: { type: null, required: false },
   fileDelete: { type: [Boolean, Object], required: false, default: true },
-  fileDeleteIcon: { type: [String, Object], required: false },
+  fileDeleteIcon: { type: null, required: false },
   preview: { type: Boolean, required: false, default: true },
   class: { type: null, required: false },
   ui: { type: null, required: false }

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

@@ -1,7 +1,7 @@
 import type { AppConfig } from '@nuxt/schema';
 import type { UseFileDialogReturn } from '@vueuse/core';
 import theme from '#build/ui/file-upload';
-import type { ButtonProps, IconProps } from '../types';
+import type { ButtonProps, IconProps, LinkPropsKeys } from '../types';
 import type { InputHTMLAttributes } from '../types/html';
 import type { ComponentConfig } from '../types/tv';
 type FileUpload = ComponentConfig<typeof theme, AppConfig, 'fileUpload'>;
@@ -83,7 +83,7 @@ export interface FileUploadProps<M extends boolean = false> extends /** @vue-ign
      * When `layout` is `grid`, the default is `{ color: 'neutral', variant: 'solid', size: 'xs' }`{lang="ts-type"}
      * When `layout` is `list`, the default is `{ color: 'neutral', variant: 'link' }`{lang="ts-type"}
      */
-    fileDelete?: boolean | Partial<ButtonProps>;
+    fileDelete?: boolean | Omit<ButtonProps, LinkPropsKeys>;
     /**
      * The icon displayed to delete a file.
      * @defaultValue appConfig.ui.icons.close
@@ -157,10 +157,9 @@ export interface FileUploadSlots<M extends boolean = false> {
 declare const __VLS_export: <M extends boolean = false>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: __VLS_PrettifyLocal<(FileUploadProps<M> & {
         modelValue?: (M extends true ? File[] : File) | null;
-    }) & {
-        onChange?: ((event: Event) => any) | undefined;
-        "onUpdate:modelValue"?: ((value: (M extends true ? File[] : File) | null | undefined) => any) | undefined;
-    }> & import("vue").PublicProps;
+    }) & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: (M extends true ? File[] : File) | null | undefined) => void)>>> & import("vue").PublicProps & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
     expose: (exposed: import("vue").ShallowUnwrapRef<{
         inputRef: Readonly<import("vue").Ref<HTMLInputElement, HTMLInputElement>>;
         dropzoneRef: import("vue").Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;

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

@@ -18,9 +18,7 @@ export interface FooterSlots {
     top(props?: {}): any;
     bottom(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<FooterProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FooterProps> & Readonly<{}>, {
-    as: any;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, FooterSlots>;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<FooterProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FooterProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, FooterSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

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

@@ -18,9 +18,7 @@ export interface FooterSlots {
     top(props?: {}): any;
     bottom(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<FooterProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FooterProps> & Readonly<{}>, {
-    as: any;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, FooterSlots>;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<FooterProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FooterProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, FooterSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

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

@@ -50,7 +50,9 @@ export interface FooterColumnsSlots<T extends FooterColumnLink = FooterColumnLin
     }): any;
 }
 declare const __VLS_export: <T extends FooterColumnLink>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<FooterColumnsProps<T>> & import("vue").PublicProps;
+    props: __VLS_PrettifyLocal<FooterColumnsProps<T>> & import("vue").PublicProps & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: FooterColumnsSlots<T>;

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

@@ -50,7 +50,9 @@ export interface FooterColumnsSlots<T extends FooterColumnLink = FooterColumnLin
     }): any;
 }
 declare const __VLS_export: <T extends FooterColumnLink>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<FooterColumnsProps<T>> & import("vue").PublicProps;
+    props: __VLS_PrettifyLocal<FooterColumnsProps<T>> & import("vue").PublicProps & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: FooterColumnsSlots<T>;

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

@@ -60,10 +60,9 @@ export interface FormSlots {
     }): any;
 }
 declare const __VLS_export: <S extends FormSchema, T extends boolean = true, N extends boolean = false>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<FormProps<S, T, N> & {
-        onError?: ((event: FormErrorEvent) => any) | undefined;
-        onSubmit?: ((event: FormSubmitEvent<FormData<S, T>>) => any) | undefined;
-    }> & import("vue").PublicProps;
+    props: __VLS_PrettifyLocal<FormProps<S, T, N> & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "error", event: FormErrorEvent) => void) & ((evt: "submit", event: FormSubmitEvent<FormData<S, T>>) => void)>>> & import("vue").PublicProps & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
     expose: (exposed: import("vue").ShallowUnwrapRef<{
         validate: {
             <T_1 extends boolean>(opts: {

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

@@ -60,10 +60,9 @@ export interface FormSlots {
     }): any;
 }
 declare const __VLS_export: <S extends FormSchema, T extends boolean = true, N extends boolean = false>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<FormProps<S, T, N> & {
-        onError?: ((event: FormErrorEvent) => any) | undefined;
-        onSubmit?: ((event: FormSubmitEvent<FormData<S, T>>) => any) | undefined;
-    }> & import("vue").PublicProps;
+    props: __VLS_PrettifyLocal<FormProps<S, T, N> & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "error", event: FormErrorEvent) => void) & ((evt: "submit", event: FormSubmitEvent<FormData<S, T>>) => void)>>> & import("vue").PublicProps & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
     expose: (exposed: import("vue").ShallowUnwrapRef<{
         validate: {
             <T_1 extends boolean>(opts: {

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

@@ -29,6 +29,11 @@ export interface FormFieldProps {
      * @defaultValue `300`
      */
     validateOnInputDelay?: number;
+    /**
+     * The orientation of the form field.
+     * @defaultValue 'vertical'
+     */
+    orientation?: FormField['variants']['orientation'];
     class?: any;
     ui?: FormField['slots'];
 }

package/dist/runtime/components/FormField.vue

@@ -15,12 +15,13 @@ const props = defineProps({
   label: { type: String, required: false },
   description: { type: String, required: false },
   help: { type: String, required: false },
-  error: { type: [Boolean, String], required: false },
+  error: { type: [Boolean, String], required: false, default: void 0 },
   hint: { type: String, required: false },
   size: { type: null, required: false },
   required: { type: Boolean, required: false },
   eagerValidation: { type: Boolean, required: false },
   validateOnInputDelay: { type: Number, required: false },
+  orientation: { type: null, required: false },
   class: { type: null, required: false },
   ui: { type: null, required: false }
 });
@@ -28,7 +29,8 @@ const slots = defineSlots();
 const appConfig = useAppConfig();
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.formField || {} })({
   size: props.size,
-  required: props.required
+  required: props.required,
+  orientation: props.orientation
 }));
 const formErrors = inject(formErrorsInjectionKey, null);
 const error = computed(() => props.error || formErrors?.value?.find((error2) => error2.name === props.name || props.errorPattern && error2.name?.match(props.errorPattern))?.message);
@@ -56,7 +58,7 @@ provide(formFieldInjectionKey, computed(() => ({
 </script>
 
 <template>
-  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <Primitive :as="as" :data-orientation="orientation" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <div data-slot="wrapper" :class="ui.wrapper({ class: props.ui?.wrapper })">
       <div v-if="label || !!slots.label" data-slot="labelWrapper" :class="ui.labelWrapper({ class: props.ui?.labelWrapper })">
         <Label :for="id" data-slot="label" :class="ui.label({ class: props.ui?.label })">
@@ -80,8 +82,7 @@ provide(formFieldInjectionKey, computed(() => ({
 
     <div :class="[(label || !!slots.label || description || !!slots.description) && ui.container({ class: props.ui?.container })]">
       <slot :error="error" />
-
-      <div v-if="typeof error === 'string' && error || !!slots.error" :id="`${ariaId}-error`" data-slot="error" :class="ui.error({ class: props.ui?.error })">
+      <div v-if="props.error !== false && (typeof error === 'string' && error || !!slots.error)" :id="`${ariaId}-error`" data-slot="error" :class="ui.error({ class: props.ui?.error })">
         <slot name="error" :error="error">
           {{ error }}
         </slot>