@nuxt/ui 3.3.1 → 4.0.0-alpha.0

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

@@ -0,0 +1,78 @@
+import type { AppConfig } from '@nuxt/schema';
+import type { SpringOptions } from 'motion-v';
+import theme from '#build/ui/changelog-versions';
+import type { ChangelogVersionProps } from '../types';
+import type { ComponentConfig } from '../types/tv';
+type ChangelogVersions = ComponentConfig<typeof theme, AppConfig, 'changelogVersions'>;
+export interface ChangelogVersionsProps<T extends ChangelogVersionProps = ChangelogVersionProps> {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    versions?: T[];
+    /**
+     * Display an indicator bar on the left.
+     * @defaultValue true
+     */
+    indicator?: boolean;
+    /**
+     * Enable scrolling motion effect on the indicator bar.
+     * `{ damping: 30, restDelta: 0.001 }`{lang="ts-type"}
+     * @defaultValue true
+     * @see https://motion.dev/docs/vue-transitions#spring
+     */
+    indicatorMotion?: boolean | SpringOptions;
+    class?: any;
+    ui?: ChangelogVersions['slots'];
+}
+export interface ChangelogVersionsSlots<T extends ChangelogVersionProps = ChangelogVersionProps> {
+    default(props?: {}): any;
+    indicator(props?: {}): any;
+    header(props: {
+        version: T;
+    }): any;
+    badge(props: {
+        version: T;
+    }): any;
+    date(props: {
+        version: T;
+    }): any;
+    title(props: {
+        version: T;
+    }): any;
+    description(props: {
+        version: T;
+    }): any;
+    image(props: {
+        version: T;
+    }): any;
+    body(props: {
+        version: T;
+    }): any;
+    footer(props: {
+        version: T;
+    }): any;
+    authors(props: {
+        version: T;
+    }): any;
+    actions(props: {
+        version: T;
+    }): any;
+    indicator(props: {
+        version: T;
+    }): any;
+}
+declare const _default: <T extends ChangelogVersionProps>(__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<Pick<Partial<{}> & Omit<{} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, never> & ChangelogVersionsProps<T> & Partial<{}>> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: ChangelogVersionsSlots<T>;
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T as K]: T[K];
+} & {};

package/dist/runtime/components/ChatMessage.vue

@@ -0,0 +1,89 @@
+<script>
+import theme from "#build/ui/chat-message";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { Primitive } from "reka-ui";
+import { useAppConfig } from "#imports";
+import { omit } from "../utils";
+import { tv } from "../utils/tv";
+import UButton from "./Button.vue";
+import UTooltip from "./Tooltip.vue";
+import UAvatar from "./Avatar.vue";
+import UIcon from "./Icon.vue";
+const props = defineProps({
+  as: { type: null, required: false, default: "article" },
+  icon: { type: String, required: false },
+  avatar: { type: Object, required: false },
+  variant: { type: null, required: false },
+  side: { type: null, required: false },
+  actions: { type: Array, required: false },
+  compact: { type: Boolean, required: false },
+  content: { type: String, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false },
+  id: { type: String, required: true },
+  role: { type: String, required: true },
+  metadata: { type: null, required: false },
+  parts: { type: Array, required: true }
+});
+const slots = defineSlots();
+const appConfig = useAppConfig();
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.chatMessage || {} })({
+  variant: props.variant,
+  side: props.side,
+  leading: !!props.icon || !!props.avatar || !!slots.leading,
+  actions: !!props.actions || !!slots.actions,
+  compact: props.compact
+}));
+</script>
+
+<template>
+  <Primitive :as="as" :data-role="role" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div :class="ui.container({ class: props.ui?.container })">
+      <div v-if="icon || avatar || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
+        <slot name="leading" :avatar="avatar">
+          <UIcon v-if="icon" :name="icon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
+          <UAvatar v-else-if="avatar" :size="props.ui?.leadingAvatarSize || ui.leadingAvatarSize()" v-bind="avatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
+        </slot>
+      </div>
+
+      <div v-if="content || parts.length || !!slots.content" :class="ui.content({ class: props.ui?.content })">
+        <slot
+          :id="id"
+          name="content"
+          :role="role"
+          :content="content"
+          :parts="parts"
+        >
+          <template v-if="content">
+            {{ content }}
+          </template>
+          <template v-else>
+            <template v-for="(part, index) in parts" :key="`${id}-${part.type}-${index}`">
+              <template v-if="part.type === 'text'">
+                {{ part.text }}
+              </template>
+            </template>
+          </template>
+        </slot>
+      </div>
+
+      <div v-if="actions || !!slots.actions" :class="ui.actions({ class: props.ui?.actions })">
+        <slot name="actions" :actions="actions">
+          <UTooltip v-for="(action, index) in actions" :key="index" :text="action.label">
+            <UButton
+              size="sm"
+              color="neutral"
+              variant="ghost"
+              v-bind="omit(action, ['onClick'])"
+              :label="undefined"
+              @click="typeof action.onClick === 'function' ? action.onClick($event, props) : void 0"
+            />
+          </UTooltip>
+        </slot>
+      </div>
+    </div>
+  </Primitive>
+</template>

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

@@ -0,0 +1,67 @@
+import type { AppConfig } from '@nuxt/schema';
+import type { UIMessage } from 'ai';
+import theme from '#build/ui/chat-message';
+import type { AvatarProps, ButtonProps } from '../types';
+import type { ComponentConfig } from '../types/tv';
+type ChatMessage = ComponentConfig<typeof theme, AppConfig, 'chatMessage'>;
+export interface ChatMessageProps extends UIMessage {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'article'
+     */
+    as?: any;
+    /**
+     * @IconifyIcon
+     */
+    icon?: string;
+    avatar?: AvatarProps & {
+        [key: string]: any;
+    };
+    /**
+     * @defaultValue 'naked'
+     */
+    variant?: ChatMessage['variants']['variant'];
+    /**
+     * @defaultValue 'left'
+     */
+    side?: ChatMessage['variants']['side'];
+    /**
+     * Display a list of actions under the message.
+     * The `label` will be used in a tooltip.
+     * `{ size: 'xs', color: 'neutral', variant: 'ghost' }`{lang="ts-type"}
+     */
+    actions?: (Omit<ButtonProps, 'onClick'> & {
+        onClick?: (e: MouseEvent, message: UIMessage) => void;
+    })[];
+    /**
+     * Render the message in a compact style.
+     * This is done automatically when used inside a `UChatPalette`{lang="ts-type"}.
+     * @defaultValue false
+     */
+    compact?: boolean;
+    /**
+     * @deprecated Use `parts` instead. (https://ai-sdk.dev/docs/migration-guides/migration-guide-5-0#content--parts-array)
+     * Use to display the content of the message.
+     */
+    content?: string;
+    class?: any;
+    ui?: ChatMessage['slots'];
+}
+export interface ChatMessageSlots {
+    leading(props: {
+        avatar: ChatMessageProps['avatar'];
+    }): any;
+    content(props: ChatMessageProps): any;
+    actions(props: {
+        actions: ChatMessageProps['actions'];
+    }): any;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ChatMessageProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ChatMessageProps> & Readonly<{}>, {
+    as: any;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ChatMessageSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/ChatMessages.vue

@@ -0,0 +1,209 @@
+<script>
+import theme from "#build/ui/chat-messages";
+</script>
+
+<script setup>
+import { ref, computed, watch, nextTick, toRef, onMounted } from "vue";
+import { Presence } from "reka-ui";
+import { defu } from "defu";
+import { useElementBounding, useEventListener, watchThrottled } from "@vueuse/core";
+import { useAppConfig } from "#imports";
+import { omit } from "../utils";
+import { tv } from "../utils/tv";
+import UChatMessage from "./ChatMessage.vue";
+import UButton from "./Button.vue";
+const props = defineProps({
+  messages: { type: Array, required: false },
+  status: { type: String, required: false },
+  shouldAutoScroll: { type: Boolean, required: false, default: false },
+  shouldScrollToBottom: { type: Boolean, required: false, default: true },
+  autoScroll: { type: [Boolean, Object], required: false, default: true },
+  autoScrollIcon: { type: String, required: false },
+  user: { type: Object, required: false },
+  assistant: { type: Object, required: false },
+  compact: { type: Boolean, required: false },
+  spacingOffset: { type: Number, required: false, default: 0 },
+  class: { type: null, required: false },
+  ui: { type: null, required: false }
+});
+const slots = defineSlots();
+const proxySlots = omit(slots, ["default", "indicator", "viewport"]);
+const appConfig = useAppConfig();
+const userProps = toRef(() => defu(props.user, { side: "right", variant: "soft" }));
+const assistantProps = toRef(() => defu(props.assistant, { side: "left", variant: "naked" }));
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.chatMessages || {} })({
+  compact: props.compact
+}));
+const el = ref(null);
+const parent = ref(null);
+const messagesRefs = ref(/* @__PURE__ */ new Map());
+const showAutoScroll = ref(false);
+const lastMessageHeight = ref(0);
+const lastMessageSubmitted = ref(false);
+function registerMessageRef(id, element) {
+  const elInstance = element?.$el;
+  if (elInstance) {
+    messagesRefs.value.set(id, elInstance);
+  }
+}
+function scrollToMessage(id) {
+  const element = messagesRefs.value.get(id);
+  if (element) {
+    element.scrollIntoView({ behavior: "smooth", block: "start" });
+  }
+}
+function scrollToBottom(smooth = true) {
+  if (!parent.value) {
+    return;
+  }
+  if (smooth) {
+    parent.value.scrollTo({ top: parent.value.scrollHeight, behavior: "smooth" });
+  } else {
+    parent.value.scrollTop = parent.value.scrollHeight;
+  }
+}
+watchThrottled([() => props.messages, () => props.status], ([_, status]) => {
+  if (status !== "streaming") {
+    return;
+  }
+  if (props.shouldAutoScroll) {
+    requestAnimationFrame(() => nextTick(scrollToBottom));
+  } else {
+    checkScrollPosition();
+  }
+}, { throttle: 100, leading: true });
+watch(() => props.status, (status) => {
+  if (status !== "submitted") {
+    return;
+  }
+  const lastMessage = props.messages?.[props.messages.length - 1];
+  if (!lastMessage || lastMessage.role !== "user") {
+    return;
+  }
+  nextTick(() => {
+    lastMessageSubmitted.value = true;
+    updateLastMessageHeight();
+    nextTick(() => {
+      scrollToMessage(lastMessage.id);
+    });
+  });
+});
+function checkScrollPosition() {
+  if (!parent.value) {
+    return;
+  }
+  const scrollPosition = parent.value.scrollTop + parent.value.clientHeight;
+  const scrollHeight = parent.value.scrollHeight;
+  const threshold = 100;
+  showAutoScroll.value = scrollHeight - scrollPosition >= threshold;
+}
+function onAutoScrollClick() {
+  scrollToBottom();
+}
+function getScrollParent(node) {
+  if (!node) {
+    return document.documentElement;
+  }
+  const overflowRegex = /auto|scroll/;
+  let current = node;
+  while (current && current !== document.body && current !== document.documentElement) {
+    const style = window.getComputedStyle(current);
+    if (overflowRegex.test(style.overflowY)) {
+      return current;
+    }
+    current = current.parentElement;
+  }
+  return document.documentElement;
+}
+function updateLastMessageHeight() {
+  if (!el.value || !parent.value || !props.messages?.length || !lastMessageSubmitted.value) {
+    return;
+  }
+  const { height: parentHeight } = useElementBounding(parent.value);
+  const lastMessage = props.messages.findLast((m) => m.role === "user");
+  if (!lastMessage) {
+    return;
+  }
+  const lastMessageEl = messagesRefs.value.get(lastMessage.id);
+  if (!lastMessageEl) {
+    return;
+  }
+  let spacingOffset = props.spacingOffset || 0;
+  const elComputedStyle = window.getComputedStyle(el.value);
+  const parentComputedStyle = window.getComputedStyle(parent.value);
+  spacingOffset += Number.parseFloat(elComputedStyle.rowGap) || Number.parseFloat(elComputedStyle.gap) || 0;
+  spacingOffset += Number.parseFloat(parentComputedStyle.paddingTop) || 0;
+  spacingOffset += Number.parseFloat(parentComputedStyle.paddingBottom) || 0;
+  lastMessageHeight.value = Math.max(parentHeight.value - lastMessageEl.offsetHeight - spacingOffset, 0);
+}
+onMounted(() => {
+  parent.value = getScrollParent(el.value);
+  if (!parent.value) {
+    return;
+  }
+  if (props.shouldScrollToBottom) {
+    nextTick(() => scrollToBottom(false));
+  } else {
+    checkScrollPosition();
+  }
+  useEventListener(parent, "scroll", checkScrollPosition);
+  useEventListener(window, "resize", () => nextTick(updateLastMessageHeight));
+});
+</script>
+
+<template>
+  <div
+    ref="el"
+    :data-status="status"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
+    :style="{ '--last-message-height': `${lastMessageHeight}px` }"
+  >
+    <slot>
+      <UChatMessage
+        v-for="message in messages"
+        :key="message.id"
+        v-bind="{ ...message, ...message.role === 'user' ? userProps : assistantProps }"
+        :ref="(el) => registerMessageRef(message.id, el)"
+        :compact="compact"
+      >
+        <template v-for="(_, name) in proxySlots" #[name]>
+          <slot :name="name" v-bind="{ message }" />
+        </template>
+      </UChatMessage>
+    </slot>
+
+    <UChatMessage
+      v-if="status === 'submitted'"
+      id="indicator"
+      role="assistant"
+      v-bind="{ ...assistantProps, actions: void 0, parts: [] }"
+      :compact="compact"
+    >
+      <template #content>
+        <div :class="ui.indicator({ class: props.ui?.indicator })">
+          <slot name="indicator">
+            <span />
+            <span />
+            <span />
+          </slot>
+        </div>
+      </template>
+    </UChatMessage>
+
+    <Presence :present="showAutoScroll">
+      <div :data-state="showAutoScroll ? 'open' : 'closed'" :class="ui.viewport({ class: props.ui?.viewport })">
+        <slot name="viewport" :on-click="onAutoScrollClick">
+          <UButton
+            v-if="autoScroll"
+            :icon="autoScrollIcon || appConfig.ui.icons.arrowDown"
+            color="neutral"
+            variant="outline"
+            v-bind="typeof autoScroll === 'object' ? autoScroll : {}"
+            :class="ui.autoScroll({ class: props.ui?.autoScroll })"
+            @click="onAutoScrollClick"
+          />
+        </slot>
+      </div>
+    </Presence>
+  </div>
+</template>

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

@@ -0,0 +1,83 @@
+import type { AppConfig } from '@nuxt/schema';
+import type { UIMessage, ChatStatus } from 'ai';
+import theme from '#build/ui/chat-messages';
+import type { ButtonProps, ChatMessageProps } from '../types';
+import type { ComponentConfig } from '../types/tv';
+type ChatMessages = ComponentConfig<typeof theme, AppConfig, 'chatMessages'>;
+export interface ChatMessagesProps {
+    messages?: UIMessage[];
+    status?: ChatStatus;
+    /**
+     * Whether to automatically scroll to the bottom when a message is streaming.
+     * @defaultValue false
+     */
+    shouldAutoScroll?: boolean;
+    /**
+     * Whether to scroll to the bottom on mounted.
+     * @defaultValue true
+     */
+    shouldScrollToBottom?: boolean;
+    /**
+     * Display an auto scroll button.
+     * `{ size: 'md', color: 'neutral', variant: 'outline' }`{lang="ts-type"}
+     * @defaultValue true
+     */
+    autoScroll?: boolean | Partial<ButtonProps>;
+    /**
+     * The icon displayed in the auto scroll button.
+     * @defaultValue appConfig.ui.icons.arrowDown
+     * @IconifyIcon
+     */
+    autoScrollIcon?: string;
+    /**
+     * The `user` messages props.
+     * `{ side: 'right', variant: 'soft' }`{lang="ts-type"}
+     */
+    user?: Pick<ChatMessageProps, 'icon' | 'avatar' | 'variant' | 'side' | 'actions'>;
+    /**
+     * The `assistant` messages props.
+     * `{ side: 'left', variant: 'naked' }`{lang="ts-type"}
+     */
+    assistant?: Pick<ChatMessageProps, 'icon' | 'avatar' | 'variant' | 'side' | 'actions'>;
+    /**
+     * Render the messages in a compact style.
+     * This is done automatically when used inside a `UChatPalette`{lang="ts-type"}.
+     * @defaultValue false
+     */
+    compact?: boolean;
+    /**
+     * The spacing offset for the last message in px. Can be useful when the prompt is sticky for example.
+     * @defaultValue 0
+     */
+    spacingOffset?: number;
+    class?: any;
+    ui?: ChatMessages['slots'];
+}
+export interface ChatMessagesSlots {
+    default(props?: {}): any;
+    indicator(props?: {}): any;
+    viewport(props: {
+        onClick: () => void;
+    }): any;
+    content(props: {
+        message: UIMessage;
+    }): any;
+    leading(props: {
+        message: UIMessage;
+    }): any;
+    actions(props: {
+        message: UIMessage;
+    }): any;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ChatMessagesProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ChatMessagesProps> & Readonly<{}>, {
+    autoScroll: boolean | Partial<ButtonProps>;
+    shouldAutoScroll: boolean;
+    shouldScrollToBottom: boolean;
+    spacingOffset: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ChatMessagesSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/ChatPalette.vue

@@ -0,0 +1,32 @@
+<script>
+import theme from "#build/ui/chat-palette";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { Primitive, Slot } from "reka-ui";
+import { useAppConfig } from "#imports";
+import { tv } from "../utils/tv";
+const props = defineProps({
+  as: { type: null, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false }
+});
+const slots = defineSlots();
+const appConfig = useAppConfig();
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.chatPalette || {} })());
+</script>
+
+<template>
+  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div :class="ui.content({ class: props.ui?.content })">
+      <Slot compact>
+        <slot />
+      </Slot>
+    </div>
+
+    <Slot v-if="!!slots.prompt" :class="ui.prompt({ class: props.ui?.prompt })">
+      <slot name="prompt" />
+    </Slot>
+  </Primitive>
+</template>

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

@@ -0,0 +1,24 @@
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/chat-palette';
+import type { ComponentConfig } from '../types/tv';
+type ChatPalette = ComponentConfig<typeof theme, AppConfig, 'chatPalette'>;
+export interface ChatPaletteProps {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    class?: any;
+    ui?: ChatPalette['slots'];
+}
+export interface ChatPaletteSlots {
+    default(props?: {}): any;
+    prompt(props?: {}): any;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ChatPaletteProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ChatPaletteProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ChatPaletteSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/ChatPrompt.vue

@@ -0,0 +1,79 @@
+<script>
+import theme from "#build/ui/chat-prompt";
+</script>
+
+<script setup>
+import { computed, useTemplateRef } from "vue";
+import { Primitive, useForwardProps } from "reka-ui";
+import { reactivePick } from "@vueuse/core";
+import { useAppConfig } from "#imports";
+import { useLocale } from "../composables/useLocale";
+import { omit, transformUI } from "../utils";
+import { tv } from "../utils/tv";
+import UTextarea from "./Textarea.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  as: { type: null, required: false, default: "form" },
+  placeholder: { type: String, required: false },
+  autofocus: { type: Boolean, required: false, default: true },
+  autoresize: { type: Boolean, required: false, default: true },
+  rows: { type: Number, required: false, default: 1 },
+  variant: { type: null, required: false },
+  error: { type: Error, required: false },
+  class: { type: null, required: false },
+  ui: { type: void 0, required: false }
+});
+const emits = defineEmits(["submit", "close"]);
+const slots = defineSlots();
+const model = defineModel({ type: String, ...{ default: "" } });
+const { t } = useLocale();
+const appConfig = useAppConfig();
+const textareaProps = useForwardProps(reactivePick(props, "autofocus", "autoresize", "rows"));
+const proxySlots = omit(slots, ["header", "footer"]);
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.chatPrompt || {} })({
+  variant: props.variant
+}));
+function submit(e) {
+  if (model.value.trim() === "") {
+    return;
+  }
+  emits("submit", e);
+}
+function blur(e) {
+  textarea.value?.textareaRef?.blur();
+  emits("close", e);
+}
+const textarea = useTemplateRef("textarea");
+defineExpose({
+  textareaRef: textarea.value?.textareaRef
+});
+</script>
+
+<template>
+  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })" @submit.prevent="submit">
+    <div v-if="!!slots.header" :class="ui.header({ class: props.ui?.header })">
+      <slot name="header" />
+    </div>
+
+    <UTextarea
+      ref="textarea"
+      v-model="model"
+      :placeholder="placeholder || t('chatPrompt.placeholder')"
+      :disabled="Boolean(error)"
+      variant="none"
+      v-bind="{ ...textareaProps, ...$attrs }"
+      :ui="transformUI(omit(ui, ['root', 'body', 'header', 'footer']), props.ui)"
+      :class="ui.body({ class: props.ui?.body })"
+      @keydown.enter.exact.prevent="submit"
+      @keydown.esc="blur"
+    >
+      <template v-for="(_, name) in proxySlots" #[name]="slotData">
+        <slot :name="name" v-bind="slotData" />
+      </template>
+    </UTextarea>
+
+    <div v-if="!!slots.footer" :class="ui.footer({ class: props.ui?.footer })">
+      <slot name="footer" />
+    </div>
+  </Primitive>
+</template>