@eslamdevui/ui 3.3.3 → 4.0.0-beta

package/dist/runtime/components/Form.vue

@@ -6,22 +6,23 @@ import theme from "#build/ui/form";
 import { provide, inject, nextTick, ref, onUnmounted, onMounted, computed, useId, readonly, reactive } from "vue";
 import { useEventBus } from "@vueuse/core";
 import { useAppConfig } from "#imports";
-import { formOptionsInjectionKey, formInputsInjectionKey, formBusInjectionKey, formLoadingInjectionKey } from "../composables/useFormField";
+import { formOptionsInjectionKey, formInputsInjectionKey, formBusInjectionKey, formLoadingInjectionKey, formErrorsInjectionKey, formStateInjectionKey } from "../composables/useFormField";
 import { tv } from "../utils/tv";
-import { validateSchema } from "../utils/form";
+import { validateSchema, getAtPath, setAtPath } from "../utils/form";
 import { FormValidationException } from "../types/form";
 const props = defineProps({
   id: { type: [String, Number], required: false },
   schema: { type: null, required: false },
-  state: { type: Object, required: true },
+  state: { type: null, required: false },
   validate: { type: Function, required: false },
   validateOn: { type: Array, required: false, default() {
     return ["input", "blur", "change"];
   } },
   disabled: { type: Boolean, required: false },
+  name: { type: null, required: false },
   validateOnInputDelay: { type: Number, required: false, default: 300 },
   transform: { type: null, required: false, default: () => true },
-  attach: { type: Boolean, required: false, default: true },
+  nested: { type: null, required: false },
   loadingAuto: { type: Boolean, required: false, default: true },
   class: { type: null, required: false },
   onSubmit: { type: Function, required: false }
@@ -32,16 +33,37 @@ const appConfig = useAppConfig();
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.form || {} }));
 const formId = props.id ?? useId();
 const bus = useEventBus(`form-${formId}`);
-const parentBus = props.attach && inject(
+const isNested = props.nested?.toString() === "" || props.nested === true;
+const parentBus = isNested && inject(
   formBusInjectionKey,
   void 0
 );
+const parentState = isNested ? inject(formStateInjectionKey, void 0) : void 0;
+const state = computed(() => {
+  if (parentState?.value) {
+    return props.name ? getAtPath(parentState.value, props.name) : parentState.value;
+  }
+  return props.state;
+});
 provide(formBusInjectionKey, bus);
+provide(formStateInjectionKey, state);
 const nestedForms = ref(/* @__PURE__ */ new Map());
+onMounted(async () => {
+  if (parentBus) {
+    await nextTick();
+    parentBus.emit({ type: "attach", validate: _validate, formId, name: props.name, api });
+  }
+});
+onUnmounted(() => {
+  bus.reset();
+  if (parentBus) {
+    parentBus.emit({ type: "detach", formId });
+  }
+});
 onMounted(async () => {
   bus.on(async (event) => {
     if (event.type === "attach") {
-      nestedForms.value.set(event.formId, { validate: event.validate });
+      nestedForms.value.set(event.formId, { validate: event.validate, name: event.name, api: event.api });
     } else if (event.type === "detach") {
       nestedForms.value.delete(event.formId);
     } else if (props.validateOn?.includes(event.type) && !loading.value) {
@@ -62,22 +84,8 @@ onMounted(async () => {
     }
   });
 });
-onUnmounted(() => {
-  bus.reset();
-});
-onMounted(async () => {
-  if (parentBus) {
-    await nextTick();
-    parentBus.emit({ type: "attach", validate: _validate, formId });
-  }
-});
-onUnmounted(() => {
-  if (parentBus) {
-    parentBus.emit({ type: "detach", formId });
-  }
-});
 const errors = ref([]);
-provide("form-errors", errors);
+provide(formErrorsInjectionKey, errors);
 const inputs = ref({});
 provide(formInputsInjectionKey, inputs);
 const dirtyFields = reactive(/* @__PURE__ */ new Set());
@@ -91,9 +99,9 @@ function resolveErrorIds(errs) {
 }
 const transformedState = ref(null);
 async function getErrors() {
-  let errs = props.validate ? await props.validate(props.state) ?? [] : [];
+  let errs = props.validate ? await props.validate(state.value) ?? [] : [];
   if (props.schema) {
-    const { errors: errors2, result } = await validateSchema(props.state, props.schema);
+    const { errors: errors2, result } = await validateSchema(state.value, props.schema);
     if (errors2) {
       errs = errs.concat(errors2);
     } else {
@@ -102,38 +110,40 @@ async function getErrors() {
   }
   return resolveErrorIds(errs);
 }
-async function _validate(opts = { silent: false, nested: true, transform: false }) {
+async function _validate(opts = { silent: false, nested: false, transform: false }) {
   const names = opts.name && !Array.isArray(opts.name) ? [opts.name] : opts.name;
-  const nestedValidatePromises = !names && opts.nested ? Array.from(nestedForms.value.values()).map(
-    ({ validate }) => validate(opts).then(() => void 0).catch((error) => {
-      if (!(error instanceof FormValidationException)) {
-        throw error;
-      }
-      return error;
-    })
-  ) : [];
+  let nestedResults = [];
+  let nestedErrors = [];
+  if (!names && opts.nested) {
+    const validations = Array.from(nestedForms.value.values()).map(
+      (form) => validateNestedForm(form, opts)
+    );
+    const results = await Promise.all(validations);
+    nestedErrors = results.filter((r) => r.error).flatMap((r) => r.error.errors.map((e) => addFormPath(e, r.name)));
+    nestedResults = results.filter((r) => r.output !== void 0);
+  }
+  const currentErrors = await getErrors();
+  const allErrors = [...currentErrors, ...nestedErrors];
   if (names) {
-    const otherErrors = errors.value.filter((error) => !names.some((name) => {
-      const pattern = inputs.value?.[name]?.pattern;
-      return name === error.name || pattern && error.name?.match(pattern);
-    }));
-    const pathErrors = (await getErrors()).filter((error) => names.some((name) => {
-      const pattern = inputs.value?.[name]?.pattern;
-      return name === error.name || pattern && error.name?.match(pattern);
-    }));
-    errors.value = otherErrors.concat(pathErrors);
+    errors.value = filterErrorsByNames(allErrors, names);
   } else {
-    errors.value = await getErrors();
+    errors.value = allErrors;
   }
-  const childErrors = (await Promise.all(nestedValidatePromises)).filter((val) => val !== void 0);
-  if (errors.value.length + childErrors.length > 0) {
+  if (errors.value?.length) {
     if (opts.silent) return false;
-    throw new FormValidationException(formId, errors.value, childErrors);
+    throw new FormValidationException(formId, errors.value);
   }
   if (opts.transform) {
-    Object.assign(props.state, transformedState.value);
+    nestedResults.forEach((result) => {
+      if (result.name) {
+        setAtPath(transformedState.value, result.name, result.output);
+      } else {
+        Object.assign(transformedState.value, result.output);
+      }
+    });
+    return transformedState.value ?? state.value;
   }
-  return props.state;
+  return state.value;
 }
 const loading = ref(false);
 provide(formLoadingInjectionKey, readonly(loading));
@@ -150,8 +160,7 @@ async function onSubmitWrapper(payload) {
     }
     const errorEvent = {
       ...event,
-      errors: error.errors,
-      children: error.children
+      errors: error.errors
     };
     emits("error", errorEvent);
   } finally {
@@ -163,31 +172,105 @@ provide(formOptionsInjectionKey, computed(() => ({
   disabled: disabled.value,
   validateOnInputDelay: props.validateOnInputDelay
 })));
-defineExpose({
+async function validateNestedForm(form, opts) {
+  try {
+    const result = await form.validate({ ...opts, silent: false });
+    return { name: form.name, output: result };
+  } catch (error) {
+    if (!(error instanceof FormValidationException)) throw error;
+    return { name: form.name, error };
+  }
+}
+function addFormPath(error, formPath) {
+  if (!formPath || !error.name) return error;
+  return { ...error, name: formPath + "." + error.name };
+}
+function stripFormPath(error, formPath) {
+  const prefix = formPath + ".";
+  const name = error?.name?.startsWith(prefix) ? error.name.substring(prefix.length) : error.name;
+  return { ...error, name };
+}
+function filterFormErrors(errors2, formPath) {
+  if (!formPath) return errors2;
+  return errors2.filter((e) => e?.name?.startsWith(formPath + ".")).map((e) => stripFormPath(e, formPath));
+}
+function getFormErrors(form) {
+  return form.api.getErrors().map(
+    (e) => form.name ? { ...e, name: form.name + "." + e.name } : e
+  );
+}
+function matchesTarget(target, path) {
+  if (!target || !path) return true;
+  if (target instanceof RegExp) return target.test(path);
+  return path === target || typeof target === "string" && target.startsWith(path + ".");
+}
+function getNestedTarget(target, formPath) {
+  if (!target || target instanceof RegExp) return target;
+  if (formPath === target) return void 0;
+  if (typeof target === "string" && target.startsWith(formPath + ".")) {
+    return target.substring(formPath.length + 1);
+  }
+  return target;
+}
+function filterErrorsByNames(allErrors, names) {
+  const nameSet = new Set(names);
+  const patterns = names.map((name) => inputs.value?.[name]?.pattern).filter(Boolean);
+  const matchesNames = (error) => {
+    if (!error.name) return false;
+    if (nameSet.has(error.name)) return true;
+    return patterns.some((pattern) => pattern.test(error.name));
+  };
+  const keepErrors = errors.value.filter((error) => !matchesNames(error));
+  const newErrors = allErrors.filter(matchesNames);
+  return [...keepErrors, ...newErrors];
+}
+function filterErrorsByTarget(currentErrors, target) {
+  return currentErrors.filter(
+    (err) => target instanceof RegExp ? !(err.name && target.test(err.name)) : !err.name || err.name !== target
+  );
+}
+function isLocalError(error) {
+  return !error.name || !!inputs.value[error.name];
+}
+const api = {
   validate: _validate,
   errors,
   setErrors(errs, name) {
+    const localErrors = resolveErrorIds(errs.filter(isLocalError));
+    const nestedErrors = [];
+    for (const form of nestedForms.value.values()) {
+      if (matchesTarget(name, form.name)) {
+        const formErrors = filterFormErrors(errs, form.name);
+        form.api.setErrors(formErrors, getNestedTarget(name, form.name || ""));
+        nestedErrors.push(...getFormErrors(form));
+      }
+    }
     if (name) {
-      errors.value = errors.value.filter((error) => error.name !== name).concat(resolveErrorIds(errs));
+      const keepErrors = filterErrorsByTarget(errors.value, name);
+      errors.value = [...keepErrors, ...localErrors, ...nestedErrors];
     } else {
-      errors.value = resolveErrorIds(errs);
+      errors.value = [...localErrors, ...nestedErrors];
     }
   },
   async submit() {
     await onSubmitWrapper(new Event("submit"));
   },
   getErrors(name) {
-    if (name) {
-      return errors.value.filter((err) => err.name === name);
-    }
-    return errors.value;
+    if (!name) return errors.value;
+    return errors.value.filter(
+      (err) => name instanceof RegExp ? err.name && name.test(err.name) : err.name === name
+    );
   },
   clear(name) {
-    if (name) {
-      errors.value = errors.value.filter((err) => err.name !== name);
-    } else {
-      errors.value = [];
+    const localErrors = name ? errors.value.filter(
+      (err) => isLocalError(err) && (name instanceof RegExp ? !(err.name && name.test(err.name)) : err.name !== name)
+    ) : [];
+    const nestedErrors = [];
+    for (const form of nestedForms.value.values()) {
+      if (matchesTarget(name, form.name)) form.api.clear();
+      nestedErrors.push(...getFormErrors(form));
     }
+    errors.value = [...localErrors, ...nestedErrors];
   },
   disabled,
   loading,
@@ -195,7 +278,8 @@ defineExpose({
   dirtyFields: readonly(dirtyFields),
   blurredFields: readonly(blurredFields),
   touchedFields: readonly(touchedFields)
-});
+};
+defineExpose(api);
 </script>
 
 <template>

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

@@ -1,10 +1,10 @@
-import type { FormSchema, FormError, FormInputEvents, FormErrorEvent, FormSubmitEvent, Form, InferInput, FormData } from '../types/form';
-export interface FormProps<S extends FormSchema, T extends boolean = true> {
+import type { FormSchema, FormError, FormInputEvents, FormErrorEvent, FormSubmitEvent, FormErrorWithId, InferInput, FormData } from '../types/form';
+export type FormProps<S extends FormSchema, T extends boolean = true, N extends boolean = false> = {
     id?: string | number;
     /** Schema to validate the form state. Supports Standard Schema objects, Yup, Joi, and Superstructs. */
     schema?: S;
     /** An object representing the current state of the form. */
-    state: Partial<InferInput<S>>;
+    state?: N extends false ? Partial<InferInput<S>> : never;
     /**
      * Custom validation function to validate the form state.
      * @param state - The current state of the form.
@@ -19,21 +19,26 @@ export interface FormProps<S extends FormSchema, T extends boolean = true> {
     validateOn?: FormInputEvents[];
     /** Disable all inputs inside the form. */
     disabled?: boolean;
+    /**
+     * Path of the form's state within it's parent form.
+     * Used for nesting forms. Only available if `nested` is true.
+     */
+    name?: N extends true ? string : never;
     /**
      * Delay in milliseconds before validating the form on input events.
      * @defaultValue `300`
      */
     validateOnInputDelay?: number;
     /**
-     * If true, schema transformations will be applied to the state on submit.
+     * If true, applies schema transformations on submit.
      * @defaultValue `true`
      */
     transform?: T;
     /**
-     * If true, this form will attach to its parent Form (if any) and validate at the same time.
-     * @defaultValue `true`
+     * If true, this form will attach to its parent Form and validate at the same time.
+     * @defaultValue `false`
      */
-    attach?: boolean;
+    nested?: N;
     /**
      * When `true`, all form elements will be disabled on `@submit` event.
      * This will cause any focused input elements to lose their focus state.
@@ -42,26 +47,64 @@ export interface FormProps<S extends FormSchema, T extends boolean = true> {
     loadingAuto?: boolean;
     class?: any;
     onSubmit?: ((event: FormSubmitEvent<FormData<S, T>>) => void | Promise<void>) | (() => void | Promise<void>);
-}
+};
 export interface FormEmits<S extends FormSchema, T extends boolean = true> {
-    submit: [payload: FormSubmitEvent<FormData<S, T>>];
-    error: [payload: FormErrorEvent];
+    submit: [event: FormSubmitEvent<FormData<S, T>>];
+    error: [event: FormErrorEvent];
 }
 export interface FormSlots {
-    default(props?: {
+    default(props: {
         errors: FormError[];
         loading: boolean;
     }): any;
 }
-declare const _default: <S extends FormSchema, T extends boolean = true>(__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<{
+declare const _default: <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<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>, "onError" | "onSubmit"> & FormProps<S, T> & Partial<{}>> & import("vue").PublicProps;
-    expose(exposed: import("vue").ShallowUnwrapRef<Form<S>>): void;
+        readonly onError?: ((event: FormErrorEvent) => any) | undefined;
+        readonly onSubmit?: ((event: FormSubmitEvent<FormData<S, T>>) => any) | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onSubmit" | "onError"> & FormProps<S, T, N> & {}> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{
+        validate: {
+            <T_1 extends boolean>(opts: {
+                name?: keyof InferInput<S> | (keyof InferInput<S>)[] | undefined;
+                silent?: false | undefined;
+                nested?: boolean;
+                transform?: T_1 | undefined;
+            }): Promise<FormData<S, T_1>>;
+            <T_1 extends boolean>(opts: {
+                name?: keyof InferInput<S> | (keyof InferInput<S>)[] | undefined;
+                silent?: true | undefined;
+                nested?: boolean;
+                transform?: T_1 | undefined;
+            }): Promise<FormData<S, T_1> | false>;
+        };
+        errors: import("vue").Ref<{
+            id?: string | undefined;
+            name?: string | undefined;
+            message: string;
+        }[], FormErrorWithId[] | {
+            id?: string | undefined;
+            name?: string | undefined;
+            message: string;
+        }[]>;
+        setErrors(errs: FormError[], name?: keyof InferInput<S> | string | RegExp): void;
+        submit(): Promise<void>;
+        getErrors(name?: keyof InferInput<S> | string | RegExp): {
+            id?: string | undefined;
+            name?: string | undefined;
+            message: string;
+        }[];
+        clear(name?: keyof InferInput<S> | string | RegExp): void;
+        disabled: import("vue").ComputedRef<boolean>;
+        loading: import("vue").Ref<boolean, boolean>;
+        dirty: import("vue").ComputedRef<boolean>;
+        dirtyFields: ReadonlySet<import("vue").DeepReadonly<import("@vue/reactivity").UnwrapRefSimple<keyof InferInput<S>>>>;
+        blurredFields: ReadonlySet<import("vue").DeepReadonly<import("@vue/reactivity").UnwrapRefSimple<keyof InferInput<S>>>>;
+        touchedFields: ReadonlySet<import("vue").DeepReadonly<import("@vue/reactivity").UnwrapRefSimple<keyof InferInput<S>>>>;
+    }>): void;
     attrs: any;
     slots: FormSlots;
-    emit: ((evt: "error", payload: FormErrorEvent) => void) & ((evt: "submit", payload: FormSubmitEvent<FormData<S, T>>) => void);
+    emit: ((evt: "error", event: FormErrorEvent) => void) & ((evt: "submit", event: FormSubmitEvent<FormData<S, T>>) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

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

@@ -0,0 +1,61 @@
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/form-field';
+import type { ComponentConfig } from '../types/tv';
+type FormField = ComponentConfig<typeof theme, AppConfig, 'formField'>;
+export interface FormFieldProps {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    /** The name of the FormField. Also used to match form errors. */
+    name?: string;
+    /** A regular expression to match form error names. */
+    errorPattern?: RegExp;
+    label?: string;
+    description?: string;
+    help?: string;
+    error?: boolean | string;
+    hint?: string;
+    /**
+     * @defaultValue 'md'
+     */
+    size?: FormField['variants']['size'];
+    required?: boolean;
+    /** If true, validation on input will be active immediately instead of waiting for a blur event. */
+    eagerValidation?: boolean;
+    /**
+     * Delay in milliseconds before validating the form on input events.
+     * @defaultValue `300`
+     */
+    validateOnInputDelay?: number;
+    class?: any;
+    ui?: FormField['slots'];
+}
+export interface FormFieldSlots {
+    label(props: {
+        label?: string;
+    }): any;
+    hint(props: {
+        hint?: string;
+    }): any;
+    description(props: {
+        description?: string;
+    }): any;
+    help(props: {
+        help?: string;
+    }): any;
+    error(props: {
+        error?: boolean | string;
+    }): any;
+    default(props: {
+        error?: boolean | string;
+    }): any;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<FormFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FormFieldProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, FormFieldSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/FormField.vue

@@ -3,10 +3,10 @@ import theme from "#build/ui/form-field";
 </script>
 
 <script setup>
-import { computed, ref, inject, provide, useId } from "vue";
+import { computed, ref, inject, provide, useId, watch } from "vue";
 import { Primitive, Label } from "reka-ui";
 import { useAppConfig } from "#imports";
-import { formFieldInjectionKey, inputIdInjectionKey } from "../composables/useFormField";
+import { formFieldInjectionKey, inputIdInjectionKey, formErrorsInjectionKey, formInputsInjectionKey } from "../composables/useFormField";
 import { tv } from "../utils/tv";
 const props = defineProps({
   as: { type: null, required: false },
@@ -30,10 +30,16 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.formField ||
   size: props.size,
   required: props.required
 }));
-const formErrors = inject("form-errors", null);
-const error = computed(() => props.error || formErrors?.value?.find((error2) => error2.name && (error2.name === props.name || props.errorPattern && error2.name.match(props.errorPattern)))?.message);
+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);
 const id = ref(useId());
 const ariaId = id.value;
+const formInputs = inject(formInputsInjectionKey, void 0);
+watch(id, () => {
+  if (formInputs && props.name) {
+    formInputs.value[props.name] = { id: id.value, pattern: props.errorPattern };
+  }
+}, { immediate: true });
 provide(inputIdInjectionKey, id);
 provide(formFieldInjectionKey, computed(() => ({
   error: error.value,

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

@@ -1,6 +1,6 @@
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/form-field';
-import type { ComponentConfig } from '../types/utils';
+import type { ComponentConfig } from '../types/tv';
 type FormField = ComponentConfig<typeof theme, AppConfig, 'formField'>;
 export interface FormFieldProps {
     /**
@@ -52,7 +52,7 @@ export interface FormFieldSlots {
         error?: boolean | string;
     }): any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<FormFieldProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FormFieldProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, FormFieldSlots>;
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<FormFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FormFieldProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, FormFieldSlots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

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

@@ -0,0 +1,68 @@
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/header';
+import type { ButtonProps, DrawerProps, ModalProps, SlideoverProps } from '../types';
+import type { ComponentConfig } from '../types/tv';
+type Header = ComponentConfig<typeof theme, AppConfig, 'header'>;
+type HeaderMode = 'modal' | 'slideover' | 'drawer';
+type HeaderMenu<T> = T extends 'modal' ? ModalProps : T extends 'slideover' ? SlideoverProps : T extends 'drawer' ? DrawerProps : never;
+export interface HeaderProps<T extends HeaderMode = HeaderMode> {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'header'
+     */
+    as?: any;
+    title?: string;
+    to?: string;
+    /**
+     * The mode of the header menu.
+     * @defaultValue 'modal'
+     */
+    mode?: T;
+    /**
+     * The props for the header menu component.
+     */
+    menu?: HeaderMenu<T>;
+    /**
+     * Customize the toggle button to open the header menu displayed when the `content` slot is used.
+     * `{ color: 'neutral', variant: 'ghost' }`{lang="ts-type"}
+     */
+    toggle?: boolean | Partial<ButtonProps>;
+    /**
+     * The side to render the toggle button on.
+     * @defaultValue 'right'
+     */
+    toggleSide?: 'left' | 'right';
+    class?: any;
+    ui?: Header['slots'];
+}
+export interface HeaderSlots {
+    title(props?: {}): any;
+    left(props?: {}): any;
+    default(props?: {}): any;
+    right(props?: {}): any;
+    toggle(props: {
+        open: boolean;
+        toggle: () => void;
+    }): any;
+    top(props?: {}): any;
+    bottom(props?: {}): any;
+    body(props?: {}): any;
+    content(props?: {}): any;
+}
+declare const _default: <T extends HeaderMode>(__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<{
+        readonly "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:open"> & (HeaderProps<T> & {
+        open?: boolean;
+    }) & {}> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: HeaderSlots;
+    emit: (evt: "update:open", value: boolean) => void;
+}>) => 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/Header.vue

@@ -7,16 +7,20 @@ import { computed, watch, toRef } from "vue";
 import { Primitive } from "reka-ui";
 import { defu } from "defu";
 import { createReusableTemplate } from "@vueuse/core";
-import USlideover from "./Slideover.vue";
-import UModal from "./Modal.vue";
-import UDrawer from "./Drawer.vue";
 import { useAppConfig, useRoute } from "#imports";
-import { useLocalePro } from "../composables/useLocalePro";
+import { useLocale } from "../composables/useLocale";
 import { getSlotChildrenText } from "../utils";
 import { tv } from "../utils/tv";
+import UButton from "./Button.vue";
+import ULink from "./Link.vue";
+import UContainer from "./Container.vue";
+import USlideover from "./Slideover.vue";
+import UModal from "./Modal.vue";
+import UDrawer from "./Drawer.vue";
+defineOptions({ inheritAttrs: false });
 const props = defineProps({
   as: { type: null, required: false, default: "header" },
-  title: { type: String, required: false, default: "Nuxt UI Pro" },
+  title: { type: String, required: false, default: "Nuxt UI" },
   to: { type: String, required: false, default: "/" },
   mode: { type: null, required: false, default: "modal" },
   menu: { type: null, required: false },
@@ -28,14 +32,14 @@ const props = defineProps({
 const slots = defineSlots();
 const open = defineModel("open", { type: Boolean, ...{ default: false } });
 const route = useRoute();
-const { t } = useLocalePro();
+const { t } = useLocale();
 const appConfig = useAppConfig();
 const [DefineLeftTemplate, ReuseLeftTemplate] = createReusableTemplate();
 const [DefineRightTemplate, ReuseRightTemplate] = createReusableTemplate();
 const [DefineToggleTemplate, ReuseToggleTemplate] = createReusableTemplate();
 const ariaLabel = computed(() => {
   const slotText = slots.title && getSlotChildrenText(slots.title());
-  return (slotText || props.title || "Nuxt UI Pro").trim();
+  return (slotText || props.title || "Nuxt UI").trim();
 });
 watch(() => route.fullPath, () => {
   open.value = false;
@@ -94,7 +98,7 @@ function toggleOpen() {
     </div>
   </DefineRightTemplate>
 
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <Primitive :as="as" v-bind="$attrs" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <slot name="top" />
 
     <UContainer :class="ui.container({ class: props.ui?.container })">