@eslamdevui/ui 3.2.0-beta.1 → 3.2.0-beta.2

package/dist/runtime/components/DropdownMenuContent.vue

@@ -61,111 +61,111 @@ const groups = computed(
 </script>
 
 <template>
-  <DefineItemTemplate v-slot="{ item, active, index }">
-    <slot :name="item.slot || 'item'" :item="item" :index="index">
-      <slot :name="item.slot ? `${item.slot}-leading` : 'item-leading'" :item="item" :active="active" :index="index">
-        <UIcon v-if="item.loading" :name="loadingIcon || appConfig.ui.icons.loading" :class="ui.itemLeadingIcon({ class: [uiOverride?.itemLeadingIcon, item.ui?.itemLeadingIcon], color: item?.color, loading: true })" />
-        <UIcon v-else-if="item.icon" :name="item.icon" :class="ui.itemLeadingIcon({ class: [uiOverride?.itemLeadingIcon, item.ui?.itemLeadingIcon], color: item?.color, active })" />
-        <UAvatar v-else-if="item.avatar" :size="item.ui?.itemLeadingAvatarSize || props.uiOverride?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()" v-bind="item.avatar" :class="ui.itemLeadingAvatar({ class: [uiOverride?.itemLeadingAvatar, item.ui?.itemLeadingAvatar], active })" />
-      </slot>
-
-      <span v-if="get(item, props.labelKey) || !!slots[item.slot ? `${item.slot}-label` : 'item-label']" :class="ui.itemLabel({ class: [uiOverride?.itemLabel, item.ui?.itemLabel], active })">
-        <slot :name="item.slot ? `${item.slot}-label` : 'item-label'" :item="item" :active="active" :index="index">
-          {{ get(item, props.labelKey) }}
-        </slot>
-
-        <UIcon v-if="item.target === '_blank' && externalIcon !== false" :name="typeof externalIcon === 'string' ? externalIcon : appConfig.ui.icons.external" :class="ui.itemLabelExternalIcon({ class: [uiOverride?.itemLabelExternalIcon, item.ui?.itemLabelExternalIcon], color: item?.color, active })" />
-      </span>
-
-      <span :class="ui.itemTrailing({ class: [uiOverride?.itemTrailing, item.ui?.itemTrailing] })">
-        <slot :name="item.slot ? `${item.slot}-trailing` : 'item-trailing'" :item="item" :active="active" :index="index">
-          <UIcon v-if="item.children?.length" :name="childrenIcon" :class="ui.itemTrailingIcon({ class: [uiOverride?.itemTrailingIcon, item.ui?.itemTrailingIcon], color: item?.color, active })" />
-          <span v-else-if="item.kbds?.length" :class="ui.itemTrailingKbds({ class: [uiOverride?.itemTrailingKbds, item.ui?.itemTrailingKbds] })">
-            <UKbd v-for="(kbd, kbdIndex) in item.kbds" :key="kbdIndex" :size="item.ui?.itemTrailingKbdsSize || props.uiOverride?.itemTrailingKbdsSize || ui.itemTrailingKbdsSize()" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
-          </span>
-        </slot>
-
-        <DropdownMenu.ItemIndicator as-child>
-          <UIcon :name="checkedIcon || appConfig.ui.icons.check" :class="ui.itemTrailingIcon({ class: [uiOverride?.itemTrailingIcon, item.ui?.itemTrailingIcon], color: item?.color })" />
-        </DropdownMenu.ItemIndicator>
-      </span>
-    </slot>
-  </DefineItemTemplate>
-
-  <DropdownMenu.Portal v-bind="portalProps">
-    <component :is="sub ? DropdownMenu.SubContent : DropdownMenu.Content" :class="props.class" v-bind="contentProps">
-      <slot name="content-top" />
-
-      <div role="presentation" :class="ui.viewport({ class: props.ui?.viewport })">
-        <DropdownMenu.Group v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" :class="ui.group({ class: uiOverride?.group })">
-          <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
-            <DropdownMenu.Label v-if="item.type === 'label'" :class="ui.label({ class: [uiOverride?.label, item.ui?.label, item.class] })">
-              <ReuseItemTemplate :item="item" :index="index" />
-            </DropdownMenu.Label>
-            <DropdownMenu.Separator v-else-if="item.type === 'separator'" :class="ui.separator({ class: [uiOverride?.separator, item.ui?.separator, item.class] })" />
-            <DropdownMenu.Sub v-else-if="item?.children?.length" :open="item.open" :default-open="item.defaultOpen">
-              <DropdownMenu.SubTrigger
-                as="button"
-                type="button"
-                :disabled="item.disabled"
-                :text-value="get(item, props.labelKey)"
-                :class="ui.item({ class: [uiOverride?.item, item.ui?.item, item.class], color: item?.color })"
-              >
-                <ReuseItemTemplate :item="item" :index="index" />
-              </DropdownMenu.SubTrigger>
-
-              <UDropdownMenuContent
-                sub
-                :class="props.class"
-                :ui="ui"
-                :ui-override="uiOverride"
-                :portal="portal"
-                :items="item.children"
-                align="start"
-                :align-offset="-4"
-                :side-offset="3"
-                :label-key="labelKey"
-                :checked-icon="checkedIcon"
-                :loading-icon="loadingIcon"
-                :external-icon="externalIcon"
-                v-bind="item.content"
-              >
-                <template v-for="(_, name) in proxySlots" #[name]="slotData">
-                  <slot :name="name" v-bind="slotData" />
-                </template>
-              </UDropdownMenuContent>
-            </DropdownMenu.Sub>
-            <DropdownMenu.CheckboxItem
-              v-else-if="item.type === 'checkbox'"
-              :model-value="item.checked"
-              :disabled="item.disabled"
-              :text-value="get(item, props.labelKey)"
-              :class="ui.item({ class: [uiOverride?.item, item.ui?.item, item.class], color: item?.color })"
-              @update:model-value="item.onUpdateChecked"
-              @select="item.onSelect"
-            >
-              <ReuseItemTemplate :item="item" :index="index" />
-            </DropdownMenu.CheckboxItem>
-            <DropdownMenu.Item
-              v-else
-              as-child
-              :disabled="item.disabled"
-              :text-value="get(item, props.labelKey)"
-              @select="item.onSelect"
-            >
-              <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
-                <ULinkBase v-bind="slotProps" :class="ui.item({ class: [uiOverride?.item, item.ui?.item, item.class], color: item?.color, active })">
-                  <ReuseItemTemplate :item="item" :active="active" :index="index" />
-                </ULinkBase>
-              </ULink>
-            </DropdownMenu.Item>
-          </template>
-        </DropdownMenu.Group>
-      </div>
-
-      <slot />
-
-      <slot name="content-bottom" />
-    </component>
-  </DropdownMenu.Portal>
+  <DefineItemTemplate v-slot="{ item, active, index }">
+    <slot :name="item.slot || 'item'" :item="item" :index="index">
+      <slot :name="item.slot ? `${item.slot}-leading` : 'item-leading'" :item="item" :active="active" :index="index">
+        <UIcon v-if="item.loading" :name="loadingIcon || appConfig.ui.icons.loading" :class="ui.itemLeadingIcon({ class: [uiOverride?.itemLeadingIcon, item.ui?.itemLeadingIcon], color: item?.color, loading: true })" />
+        <UIcon v-else-if="item.icon" :name="item.icon" :class="ui.itemLeadingIcon({ class: [uiOverride?.itemLeadingIcon, item.ui?.itemLeadingIcon], color: item?.color, active })" />
+        <UAvatar v-else-if="item.avatar" :size="item.ui?.itemLeadingAvatarSize || props.uiOverride?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()" v-bind="item.avatar" :class="ui.itemLeadingAvatar({ class: [uiOverride?.itemLeadingAvatar, item.ui?.itemLeadingAvatar], active })" />
+      </slot>
+
+      <span v-if="get(item, props.labelKey) || !!slots[item.slot ? `${item.slot}-label` : 'item-label']" :class="ui.itemLabel({ class: [uiOverride?.itemLabel, item.ui?.itemLabel], active })">
+        <slot :name="item.slot ? `${item.slot}-label` : 'item-label'" :item="item" :active="active" :index="index">
+          {{ get(item, props.labelKey) }}
+        </slot>
+
+        <UIcon v-if="item.target === '_blank' && externalIcon !== false" :name="typeof externalIcon === 'string' ? externalIcon : appConfig.ui.icons.external" :class="ui.itemLabelExternalIcon({ class: [uiOverride?.itemLabelExternalIcon, item.ui?.itemLabelExternalIcon], color: item?.color, active })" />
+      </span>
+
+      <span :class="ui.itemTrailing({ class: [uiOverride?.itemTrailing, item.ui?.itemTrailing] })">
+        <slot :name="item.slot ? `${item.slot}-trailing` : 'item-trailing'" :item="item" :active="active" :index="index">
+          <UIcon v-if="item.children?.length" :name="childrenIcon" :class="ui.itemTrailingIcon({ class: [uiOverride?.itemTrailingIcon, item.ui?.itemTrailingIcon], color: item?.color, active })" />
+          <span v-else-if="item.kbds?.length" :class="ui.itemTrailingKbds({ class: [uiOverride?.itemTrailingKbds, item.ui?.itemTrailingKbds] })">
+            <UKbd v-for="(kbd, kbdIndex) in item.kbds" :key="kbdIndex" :size="item.ui?.itemTrailingKbdsSize || props.uiOverride?.itemTrailingKbdsSize || ui.itemTrailingKbdsSize()" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
+          </span>
+        </slot>
+
+        <DropdownMenu.ItemIndicator as-child>
+          <UIcon :name="checkedIcon || appConfig.ui.icons.check" :class="ui.itemTrailingIcon({ class: [uiOverride?.itemTrailingIcon, item.ui?.itemTrailingIcon], color: item?.color })" />
+        </DropdownMenu.ItemIndicator>
+      </span>
+    </slot>
+  </DefineItemTemplate>
+
+  <DropdownMenu.Portal v-bind="portalProps">
+    <component :is="sub ? DropdownMenu.SubContent : DropdownMenu.Content" :class="props.class" v-bind="contentProps">
+      <slot name="content-top" />
+
+      <div role="presentation" :class="ui.viewport({ class: props.ui?.viewport })">
+        <DropdownMenu.Group v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" :class="ui.group({ class: uiOverride?.group })">
+          <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
+            <DropdownMenu.Label v-if="item.type === 'label'" :class="ui.label({ class: [uiOverride?.label, item.ui?.label, item.class] })">
+              <ReuseItemTemplate :item="item" :index="index" />
+            </DropdownMenu.Label>
+            <DropdownMenu.Separator v-else-if="item.type === 'separator'" :class="ui.separator({ class: [uiOverride?.separator, item.ui?.separator, item.class] })" />
+            <DropdownMenu.Sub v-else-if="item?.children?.length" :open="item.open" :default-open="item.defaultOpen">
+              <DropdownMenu.SubTrigger
+                as="button"
+                type="button"
+                :disabled="item.disabled"
+                :text-value="get(item, props.labelKey)"
+                :class="ui.item({ class: [uiOverride?.item, item.ui?.item, item.class], color: item?.color })"
+              >
+                <ReuseItemTemplate :item="item" :index="index" />
+              </DropdownMenu.SubTrigger>
+
+              <UDropdownMenuContent
+                sub
+                :class="props.class"
+                :ui="ui"
+                :ui-override="uiOverride"
+                :portal="portal"
+                :items="item.children"
+                align="start"
+                :align-offset="-4"
+                :side-offset="3"
+                :label-key="labelKey"
+                :checked-icon="checkedIcon"
+                :loading-icon="loadingIcon"
+                :external-icon="externalIcon"
+                v-bind="item.content"
+              >
+                <template v-for="(_, name) in proxySlots" #[name]="slotData">
+                  <slot :name="name" v-bind="slotData" />
+                </template>
+              </UDropdownMenuContent>
+            </DropdownMenu.Sub>
+            <DropdownMenu.CheckboxItem
+              v-else-if="item.type === 'checkbox'"
+              :model-value="item.checked"
+              :disabled="item.disabled"
+              :text-value="get(item, props.labelKey)"
+              :class="ui.item({ class: [uiOverride?.item, item.ui?.item, item.class], color: item?.color })"
+              @update:model-value="item.onUpdateChecked"
+              @select="item.onSelect"
+            >
+              <ReuseItemTemplate :item="item" :index="index" />
+            </DropdownMenu.CheckboxItem>
+            <DropdownMenu.Item
+              v-else
+              as-child
+              :disabled="item.disabled"
+              :text-value="get(item, props.labelKey)"
+              @select="item.onSelect"
+            >
+              <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
+                <ULinkBase v-bind="slotProps" :class="ui.item({ class: [uiOverride?.item, item.ui?.item, item.class], color: item?.color, active })">
+                  <ReuseItemTemplate :item="item" :active="active" :index="index" />
+                </ULinkBase>
+              </ULink>
+            </DropdownMenu.Item>
+          </template>
+        </DropdownMenu.Group>
+      </div>
+
+      <slot />
+
+      <slot name="content-bottom" />
+    </component>
+  </DropdownMenu.Portal>
 </template>

package/dist/runtime/components/Error.vue

@@ -0,0 +1,57 @@
+<script>
+import theme from "#build/ui/error";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { Primitive } from "reka-ui";
+import { useAppConfig, useRouter } from "#imports";
+import { useLocalePro } from "../composables/useLocalePro";
+import { tv } from "../utils/tv";
+import UButton from "./Button.vue";
+const props = defineProps({
+  as: { type: null, required: false, default: "main" },
+  error: { type: Object, required: false, default: () => ({}) },
+  redirect: { type: String, required: false, default: "/" },
+  clear: { type: [Boolean, Object], required: false, default: true },
+  class: { type: null, required: false },
+  ui: { type: null, required: false }
+});
+const emit = defineEmits(["clear"]);
+defineSlots();
+const { t } = useLocalePro();
+const appConfig = useAppConfig();
+const router = useRouter();
+const uiPro = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.error || {} })());
+const handleError = () => {
+  if (props.error) {
+    emit("clear");
+  }
+  router.push(props.redirect);
+};
+</script>
+
+<template>
+  <Primitive :as="as" :class="uiPro.root({ class: [props.ui?.root, props.class] })">
+    <p :class="uiPro.statusCode({ class: props.ui?.statusCode })">
+      {{ props.error?.statusCode }}
+    </p>
+    <h1 v-if="props.error?.statusMessage" :class="uiPro.statusMessage({ class: props.ui?.statusMessage })">
+      {{ props.error.statusMessage }}
+    </h1>
+    <p v-if="props.error?.message && props.error.message !== props.error.statusMessage" :class="uiPro.message({ class: props.ui?.message })">
+      {{ props.error?.message }}
+    </p>
+    <div :class="uiPro.links({ class: props.ui?.links })">
+      <UButton
+        v-if="clear"
+        size="lg"
+        color="primary"
+        variant="solid"
+        :label="t('error.clear')"
+        v-bind="typeof clear === 'object' ? clear : {}"
+        @click="handleError"
+      />
+    </div>
+  </Primitive>
+</template>

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

@@ -0,0 +1,52 @@
+import type { AppConfig } from '@nuxt/schema';
+import type { ButtonProps, ComponentConfig } from '../types';
+import type { NuxtError } from '#app';
+import theme from '#build/ui/error';
+type Error = ComponentConfig<typeof theme, AppConfig, 'error'>;
+export interface ErrorProps {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    error?: Partial<NuxtError & {
+        message: string;
+    }>;
+    /**
+     * The URL to redirect to when the error is cleared.
+     * @defaultValue '/'
+     */
+    redirect?: string;
+    /**
+     * Display a button to clear the error in the links slot.
+     * `{ size: 'lg', color: 'primary', variant: 'solid', label: 'Back to home' }`{lang="ts-type"}
+     * @defaultValue true
+     */
+    clear?: boolean | Partial<ButtonProps>;
+    class?: any;
+    ui?: Error['slots'];
+}
+export interface ErrorSlots {
+    default(props?: {}): any;
+    statusCode(props?: {}): any;
+    statusMessage(props?: {}): any;
+    links(props?: {}): any;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ErrorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    clear: () => any;
+}, string, import("vue").PublicProps, Readonly<ErrorProps> & Readonly<{
+    onClear?: (() => any) | undefined;
+}>, {
+    error: Partial<NuxtError & {
+        message: string;
+    }>;
+    clear: boolean | Partial<ButtonProps>;
+    as: any;
+    redirect: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ErrorSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Form.vue

@@ -199,12 +199,12 @@ defineExpose({
 </script>
 
 <template>
-  <component
-    :is="parentBus ? 'div' : 'form'"
-    :id="formId"
-    :class="ui({ class: props.class })"
-    @submit.prevent="onSubmitWrapper"
-  >
-    <slot :errors="errors" :loading="loading" />
-  </component>
+  <component
+    :is="parentBus ? 'div' : 'form'"
+    :id="formId"
+    :class="ui({ class: props.class })"
+    @submit.prevent="onSubmitWrapper"
+  >
+    <slot :errors="errors" :loading="loading" />
+  </component>
 </template>

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

@@ -56,7 +56,7 @@ declare const _default: <S extends FormSchema, T extends boolean = true>(__VLS_p
     props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
         readonly onError?: ((payload: FormErrorEvent) => any) | undefined;
         readonly onSubmit?: ((payload: FormSubmitEvent<FormData<S, T>>) => any) | undefined;
-    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onSubmit" | "onError"> & FormProps<S, T> & Partial<{}>> & import("vue").PublicProps;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onError" | "onSubmit"> & FormProps<S, T> & Partial<{}>> & import("vue").PublicProps;
     expose(exposed: import("vue").ShallowUnwrapRef<Form<S>>): void;
     attrs: any;
     slots: FormSlots;

package/dist/runtime/components/FormField.vue

@@ -50,41 +50,41 @@ provide(formFieldInjectionKey, computed(() => ({
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <div :class="ui.wrapper({ class: props.ui?.wrapper })">
-      <div v-if="label || !!slots.label" :class="ui.labelWrapper({ class: props.ui?.labelWrapper })">
-        <Label :for="id" :class="ui.label({ class: props.ui?.label })">
-          <slot name="label" :label="label">
-            {{ label }}
-          </slot>
-        </Label>
-        <span v-if="hint || !!slots.hint" :id="`${ariaId}-hint`" :class="ui.hint({ class: props.ui?.hint })">
-          <slot name="hint" :hint="hint">
-            {{ hint }}
-          </slot>
-        </span>
-      </div>
-
-      <p v-if="description || !!slots.description" :id="`${ariaId}-description`" :class="ui.description({ class: props.ui?.description })">
-        <slot name="description" :description="description">
-          {{ description }}
-        </slot>
-      </p>
-    </div>
-
-    <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`" :class="ui.error({ class: props.ui?.error })">
-        <slot name="error" :error="error">
-          {{ error }}
-        </slot>
-      </div>
-      <div v-else-if="help || !!slots.help" :class="ui.help({ class: props.ui?.help })">
-        <slot name="help" :help="help">
-          {{ help }}
-        </slot>
-      </div>
-    </div>
-  </Primitive>
+  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div :class="ui.wrapper({ class: props.ui?.wrapper })">
+      <div v-if="label || !!slots.label" :class="ui.labelWrapper({ class: props.ui?.labelWrapper })">
+        <Label :for="id" :class="ui.label({ class: props.ui?.label })">
+          <slot name="label" :label="label">
+            {{ label }}
+          </slot>
+        </Label>
+        <span v-if="hint || !!slots.hint" :id="`${ariaId}-hint`" :class="ui.hint({ class: props.ui?.hint })">
+          <slot name="hint" :hint="hint">
+            {{ hint }}
+          </slot>
+        </span>
+      </div>
+
+      <p v-if="description || !!slots.description" :id="`${ariaId}-description`" :class="ui.description({ class: props.ui?.description })">
+        <slot name="description" :description="description">
+          {{ description }}
+        </slot>
+      </p>
+    </div>
+
+    <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`" :class="ui.error({ class: props.ui?.error })">
+        <slot name="error" :error="error">
+          {{ error }}
+        </slot>
+      </div>
+      <div v-else-if="help || !!slots.help" :class="ui.help({ class: props.ui?.help })">
+        <slot name="help" :help="help">
+          {{ help }}
+        </slot>
+      </div>
+    </div>
+  </Primitive>
 </template>

package/dist/runtime/components/Icon.vue

@@ -15,5 +15,5 @@ const iconProps = useForwardProps(reactivePick(props, "name", "mode", "size", "c
 </script>
 
 <template>
-  <Icon v-bind="iconProps" />
+  <Icon v-bind="iconProps" />
 </template>

package/dist/runtime/components/Input.vue

@@ -110,38 +110,38 @@ defineExpose({
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <input
-      :id="id"
-      ref="inputRef"
-      :type="type"
-      :value="modelValue"
-      :name="name"
-      :placeholder="placeholder"
-      :class="ui.base({ class: props.ui?.base })"
-      :disabled="disabled"
-      :required="required"
-      :autocomplete="autocomplete"
-      v-bind="{ ...$attrs, ...ariaAttrs }"
-      @input="onInput"
-      @blur="onBlur"
-      @change="onChange"
-      @focus="emitFormFocus"
-    >
-
-    <slot />
-
-    <span v-if="isLeading || !!avatar || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
-      <slot name="leading">
-        <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :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>
-    </span>
-
-    <span v-if="isTrailing || !!slots.trailing" :class="ui.trailing({ class: props.ui?.trailing })">
-      <slot name="trailing">
-        <UIcon v-if="trailingIconName" :name="trailingIconName" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
-      </slot>
-    </span>
-  </Primitive>
+  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <input
+      :id="id"
+      ref="inputRef"
+      :type="type"
+      :value="modelValue"
+      :name="name"
+      :placeholder="placeholder"
+      :class="ui.base({ class: props.ui?.base })"
+      :disabled="disabled"
+      :required="required"
+      :autocomplete="autocomplete"
+      v-bind="{ ...$attrs, ...ariaAttrs }"
+      @input="onInput"
+      @blur="onBlur"
+      @change="onChange"
+      @focus="emitFormFocus"
+    >
+
+    <slot />
+
+    <span v-if="isLeading || !!avatar || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
+      <slot name="leading">
+        <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :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>
+    </span>
+
+    <span v-if="isTrailing || !!slots.trailing" :class="ui.trailing({ class: props.ui?.trailing })">
+      <slot name="trailing">
+        <UIcon v-if="trailingIconName" :name="trailingIconName" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
+      </slot>
+    </span>
+  </Primitive>
 </template>