@nuxt/ui 4.0.1 → 4.2.0

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

@@ -2,17 +2,19 @@ import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/auth-form';
 import type { ButtonProps, FormProps, FormFieldProps, SeparatorProps, InputProps, CheckboxProps, SelectMenuProps, PinInputProps, IconProps } from '../types';
 import type { FormSchema, FormSubmitEvent, InferInput } from '../types/form';
+import type { FormHTMLAttributes } from '../types/html';
+import type { NonUnion } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type AuthForm = ComponentConfig<typeof theme, AppConfig, 'authForm'>;
-type AuthFormCheckboxField = Omit<FormFieldProps, 'name'> & CheckboxProps & {
+export type AuthFormCheckboxField = Omit<FormFieldProps, 'name'> & CheckboxProps & {
     name: string;
     type: 'checkbox';
 };
-type AuthFormSelectField = Omit<FormFieldProps, 'name'> & SelectMenuProps & {
+export type AuthFormSelectField = Omit<FormFieldProps, 'name'> & SelectMenuProps & {
     name: string;
     type: 'select';
 };
-type AuthFormOtpField = Omit<FormFieldProps, 'name'> & Omit<PinInputProps, 'type' | 'otp'> & {
+export type AuthFormOtpField = Omit<FormFieldProps, 'name'> & Omit<PinInputProps, 'type' | 'otp'> & {
     name: string;
     type: 'otp';
     /**
@@ -22,14 +24,13 @@ type AuthFormOtpField = Omit<FormFieldProps, 'name'> & Omit<PinInputProps, 'type
      */
     otp?: boolean | PinInputProps;
 };
-type AuthFormInputFieldType = 'password' | 'text' | 'email' | 'number';
-type AuthFormInputField<T extends AuthFormInputFieldType = AuthFormInputFieldType> = Omit<FormFieldProps, 'name'> & InputProps & {
+export type AuthFormInputFieldType = 'password' | 'text' | 'email' | 'number';
+export type AuthFormInputField<T extends AuthFormInputFieldType & NonUnion<T> = 'text'> = Omit<FormFieldProps, 'name'> & Omit<InputProps, 'type'> & {
     name: string;
     type: T;
 };
-type AuthFormFieldType = 'checkbox' | 'select' | 'otp' | 'password' | 'text' | 'email' | 'number';
-export type AuthFormField<T extends AuthFormFieldType = AuthFormFieldType> = T extends 'checkbox' ? AuthFormCheckboxField : T extends 'select' ? AuthFormSelectField : T extends 'otp' ? AuthFormOtpField : T extends AuthFormInputFieldType ? AuthFormInputField<T> : never;
-export interface AuthFormProps<T extends FormSchema = FormSchema<object>, F extends AuthFormField = AuthFormField> {
+export type AuthFormField = AuthFormCheckboxField | AuthFormSelectField | AuthFormOtpField | AuthFormInputField<'password'> | AuthFormInputField<'text'> | AuthFormInputField<'email'> | AuthFormInputField<'number'>;
+export interface AuthFormProps<T extends FormSchema = FormSchema<object>, F extends AuthFormField = AuthFormField> extends /** @vue-ignore */ FormHTMLAttributes {
     /**
      * The element or component this component should render as.
      * @defaultValue 'div'
@@ -79,7 +80,9 @@ type DynamicFieldSlots<T, F, SlotProps = {
 type DynamicFormFieldSlots<T> = Record<string, (props?: {}) => any> & Record<`${keyof T extends string ? keyof T : never}-${'label' | 'description' | 'hint' | 'help' | 'error'}`, (props?: {}) => any>;
 export type AuthFormSlots<T extends object = object, F extends AuthFormField = AuthFormField> = {
     header(props?: {}): any;
-    leading(props?: {}): any;
+    leading(props: {
+        ui: AuthForm['ui'];
+    }): any;
     title(props?: {}): any;
     description(props?: {}): any;
     providers(props?: {}): any;

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

@@ -1,14 +1,18 @@
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/avatar';
 import type { ChipProps, IconProps } from '../types';
+import type { ImgHTMLAttributes } from '../types/html';
 import type { ComponentConfig } from '../types/tv';
 type Avatar = ComponentConfig<typeof theme, AppConfig, 'avatar'>;
-export interface AvatarProps {
+export interface AvatarProps extends /** @vue-ignore */ Omit<ImgHTMLAttributes, 'src' | 'alt'> {
     /**
      * The element or component this component should render as.
      * @defaultValue 'span'
      */
-    as?: any;
+    as?: any | {
+        root?: any;
+        img?: any;
+    };
     src?: string;
     alt?: string;
     /**
@@ -28,9 +32,7 @@ export interface AvatarProps {
 export interface AvatarSlots {
     default(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<AvatarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AvatarProps> & Readonly<{}>, {
-    as: any;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<AvatarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AvatarProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     default?: (props: {}) => any;
 }>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/Avatar.vue

@@ -5,6 +5,7 @@ import theme from "#build/ui/avatar";
 <script setup>
 import { ref, computed, watch } from "vue";
 import { Primitive, Slot } from "reka-ui";
+import { defu } from "defu";
 import { useAppConfig } from "#imports";
 import ImageComponent from "#build/ui-image-component";
 import { useAvatarGroup } from "../composables/useAvatarGroup";
@@ -13,7 +14,7 @@ import UIcon from "./Icon.vue";
 import UChip from "./Chip.vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
-  as: { type: null, required: false, default: "span" },
+  as: { type: null, required: false },
   src: { type: String, required: false },
   alt: { type: String, required: false },
   icon: { type: [String, Object], required: false },
@@ -24,6 +25,12 @@ const props = defineProps({
   style: { type: null, required: false },
   ui: { type: null, required: false }
 });
+const as = computed(() => {
+  if (typeof props.as === "string" || typeof props.as?.render === "function") {
+    return { root: props.as };
+  }
+  return defu(props.as, { root: "span" });
+});
 const fallback = computed(() => props.text || (props.alt || "").split(" ").map((word) => word.charAt(0)).join("").substring(0, 2));
 const appConfig = useAppConfig();
 const { size } = useAvatarGroup(props);
@@ -55,27 +62,29 @@ function onError() {
 <template>
   <component
     :is="props.chip ? UChip : Primitive"
-    :as="as"
+    :as="as.root"
     v-bind="props.chip ? typeof props.chip === 'object' ? { inset: true, ...props.chip } : { inset: true } : {}"
+    data-slot="root"
     :class="ui.root({ class: [props.ui?.root, props.class] })"
     :style="props.style"
   >
     <component
-      :is="ImageComponent"
+      :is="as.img || ImageComponent"
       v-if="src && !error"
       :src="src"
       :alt="alt"
       :width="sizePx"
       :height="sizePx"
       v-bind="$attrs"
+      data-slot="image"
       :class="ui.image({ class: props.ui?.image })"
       @error="onError"
     />
 
     <Slot v-else v-bind="$attrs">
       <slot>
-        <UIcon v-if="icon" :name="icon" :class="ui.icon({ class: props.ui?.icon })" />
-        <span v-else :class="ui.fallback({ class: props.ui?.fallback })">{{ fallback || "\xA0" }}</span>
+        <UIcon v-if="icon" :name="icon" data-slot="icon" :class="ui.icon({ class: props.ui?.icon })" />
+        <span v-else data-slot="fallback" :class="ui.fallback({ class: props.ui?.fallback })">{{ fallback || "\xA0" }}</span>
       </slot>
     </Slot>
   </component>

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

@@ -1,14 +1,18 @@
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/avatar';
 import type { ChipProps, IconProps } from '../types';
+import type { ImgHTMLAttributes } from '../types/html';
 import type { ComponentConfig } from '../types/tv';
 type Avatar = ComponentConfig<typeof theme, AppConfig, 'avatar'>;
-export interface AvatarProps {
+export interface AvatarProps extends /** @vue-ignore */ Omit<ImgHTMLAttributes, 'src' | 'alt'> {
     /**
      * The element or component this component should render as.
      * @defaultValue 'span'
      */
-    as?: any;
+    as?: any | {
+        root?: any;
+        img?: any;
+    };
     src?: string;
     alt?: string;
     /**
@@ -28,9 +32,7 @@ export interface AvatarProps {
 export interface AvatarSlots {
     default(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<AvatarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AvatarProps> & Readonly<{}>, {
-    as: any;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<AvatarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AvatarProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     default?: (props: {}) => any;
 }>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/AvatarGroup.vue

@@ -58,8 +58,8 @@ provide(avatarGroupInjectionKey, computed(() => ({
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <UAvatar v-if="hiddenCount > 0" :text="`+${hiddenCount}`" :class="ui.base({ class: props.ui?.base })" />
-    <component :is="avatar" v-for="(avatar, count) in visibleAvatars" :key="count" :class="ui.base({ class: props.ui?.base })" />
+  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <UAvatar v-if="hiddenCount > 0" :text="`+${hiddenCount}`" data-slot="base" :class="ui.base({ class: props.ui?.base })" />
+    <component :is="avatar" v-for="(avatar, count) in visibleAvatars" :key="count" data-slot="base" :class="ui.base({ class: props.ui?.base })" />
   </Primitive>
 </template>

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

@@ -28,9 +28,15 @@ export interface BadgeProps extends Omit<UseComponentIconsProps, 'loading' | 'lo
     ui?: Badge['slots'];
 }
 export interface BadgeSlots {
-    leading(props?: {}): any;
-    default(props?: {}): any;
-    trailing(props?: {}): any;
+    leading(props: {
+        ui: Badge['ui'];
+    }): any;
+    default(props: {
+        ui: Badge['ui'];
+    }): any;
+    trailing(props: {
+        ui: Badge['ui'];
+    }): any;
 }
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<BadgeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BadgeProps> & Readonly<{}>, {
     as: any;

package/dist/runtime/components/Badge.vue

@@ -41,20 +41,20 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.badge || {} }
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.base({ class: [props.ui?.base, props.class] })">
-    <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 })" />
+  <Primitive :as="as" data-slot="base" :class="ui.base({ class: [props.ui?.base, props.class] })">
+    <slot name="leading" :ui="ui">
+      <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" data-slot="leadingIcon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
+      <UAvatar v-else-if="!!avatar" :size="props.ui?.leadingAvatarSize || ui.leadingAvatarSize()" v-bind="avatar" data-slot="leadingAvatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
     </slot>
 
-    <slot>
-      <span v-if="label !== void 0 && label !== null" :class="ui.label({ class: props.ui?.label })">
+    <slot :ui="ui">
+      <span v-if="label !== void 0 && label !== null" data-slot="label" :class="ui.label({ class: props.ui?.label })">
         {{ label }}
       </span>
     </slot>
 
-    <slot name="trailing">
-      <UIcon v-if="isTrailing && trailingIconName" :name="trailingIconName" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
+    <slot name="trailing" :ui="ui">
+      <UIcon v-if="isTrailing && trailingIconName" :name="trailingIconName" data-slot="trailingIcon" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
     </slot>
   </Primitive>
 </template>

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

@@ -28,9 +28,15 @@ export interface BadgeProps extends Omit<UseComponentIconsProps, 'loading' | 'lo
     ui?: Badge['slots'];
 }
 export interface BadgeSlots {
-    leading(props?: {}): any;
-    default(props?: {}): any;
-    trailing(props?: {}): any;
+    leading(props: {
+        ui: Badge['ui'];
+    }): any;
+    default(props: {
+        ui: Badge['ui'];
+    }): any;
+    trailing(props: {
+        ui: Badge['ui'];
+    }): any;
 }
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<BadgeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BadgeProps> & Readonly<{}>, {
     as: any;

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

@@ -49,11 +49,13 @@ export interface BannerProps {
     ui?: Banner['slots'];
 }
 export interface BannerSlots {
-    leading(props?: {}): any;
+    leading(props: {
+        ui: Banner['ui'];
+    }): any;
     title(props?: {}): any;
     actions(props?: {}): any;
     close(props: {
-        ui: any;
+        ui: Banner['ui'];
     }): any;
 }
 export interface BannerEmits {

package/dist/runtime/components/Banner.vue

@@ -60,7 +60,7 @@ function onClose() {
 </script>
 
 <template>
-  <Primitive :as="as" class="banner" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <Primitive :as="as" class="banner" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <ULink
       v-if="to"
       :aria-label="title"
@@ -72,28 +72,28 @@ function onClose() {
       <span class="absolute inset-0 " aria-hidden="true" />
     </ULink>
 
-    <UContainer :class="ui.container({ class: props.ui?.container })">
-      <div :class="ui.left({ class: props.ui?.left })" />
+    <UContainer data-slot="container" :class="ui.container({ class: props.ui?.container })">
+      <div data-slot="left" :class="ui.left({ class: props.ui?.left })" />
 
-      <div :class="ui.center({ class: props.ui?.center })">
-        <slot name="leading">
-          <UIcon v-if="icon" :name="icon" :class="ui.icon({ class: props.ui?.icon })" />
+      <div data-slot="center" :class="ui.center({ class: props.ui?.center })">
+        <slot name="leading" :ui="ui">
+          <UIcon v-if="icon" :name="icon" data-slot="icon" :class="ui.icon({ class: props.ui?.icon })" />
         </slot>
 
-        <div v-if="title || !!slots.title" :class="ui.title({ class: props.ui?.title })">
+        <div v-if="title || !!slots.title" data-slot="title" :class="ui.title({ class: props.ui?.title })">
           <slot name="title">
             {{ title }}
           </slot>
         </div>
 
-        <div v-if="actions?.length || !!slots.actions" :class="ui.actions({ class: props.ui?.actions })">
+        <div v-if="actions?.length || !!slots.actions" data-slot="actions" :class="ui.actions({ class: props.ui?.actions })">
           <slot name="actions">
             <UButton v-for="(action, index) in actions" :key="index" color="neutral" size="xs" v-bind="action" />
           </slot>
         </div>
       </div>
 
-      <div :class="ui.right({ class: props.ui?.right })">
+      <div data-slot="right" :class="ui.right({ class: props.ui?.right })">
         <slot name="close" :ui="ui">
           <UButton
             v-if="close"
@@ -103,6 +103,7 @@ function onClose() {
             variant="ghost"
             :aria-label="t('banner.close')"
             v-bind="typeof close === 'object' ? close : {}"
+            data-slot="close"
             :class="ui.close({ class: props.ui?.close })"
             @click="onClose"
           />

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

@@ -49,11 +49,13 @@ export interface BannerProps {
     ui?: Banner['slots'];
 }
 export interface BannerSlots {
-    leading(props?: {}): any;
+    leading(props: {
+        ui: Banner['ui'];
+    }): any;
     title(props?: {}): any;
     actions(props?: {}): any;
     close(props: {
-        ui: any;
+        ui: Banner['ui'];
     }): any;
 }
 export interface BannerEmits {

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

@@ -22,7 +22,9 @@ export interface BlogPostProps {
     /** The authors of the blog post. */
     authors?: UserProps[];
     /** The image of the blog post. Can be a string or an object. */
-    image?: string | Partial<HTMLImageElement>;
+    image?: string | (Partial<HTMLImageElement> & {
+        [key: string]: any;
+    });
     /**
      * The orientation of the blog post.
      * @defaultValue 'vertical'
@@ -43,8 +45,12 @@ export interface BlogPostSlots {
     badge(props?: {}): any;
     title(props?: {}): any;
     description(props?: {}): any;
-    authors(props?: {}): any;
-    header(props?: {}): any;
+    authors(props: {
+        ui: BlogPost['ui'];
+    }): any;
+    header(props: {
+        ui: BlogPost['ui'];
+    }): any;
     body(props?: {}): any;
     footer(props?: {}): any;
 }

package/dist/runtime/components/BlogPost.vue

@@ -68,18 +68,19 @@ const ariaLabel = computed(() => {
 </script>
 
 <template>
-  <Primitive :as="as" :data-orientation="orientation" :class="ui.root({ class: [props.ui?.root, props.class] })" @click="onClick">
-    <div v-if="image || !!slots.header" :class="ui.header({ class: props.ui?.header })">
-      <slot name="header">
+  <Primitive :as="as" :data-orientation="orientation" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })" @click="onClick">
+    <div v-if="image || !!slots.header" data-slot="header" :class="ui.header({ class: props.ui?.header })">
+      <slot name="header" :ui="ui">
         <component
           :is="ImageComponent"
           v-bind="typeof image === 'string' ? { src: image, alt: title } : { alt: title, ...image }"
+          data-slot="image"
           :class="ui.image({ class: props.ui?.image, to: !!to })"
         />
       </slot>
     </div>
 
-    <div :class="ui.body({ class: props.ui?.body })">
+    <div data-slot="body" :class="ui.body({ class: props.ui?.body })">
       <ULink
         v-if="to"
         :aria-label="ariaLabel"
@@ -92,32 +93,39 @@ const ariaLabel = computed(() => {
       </ULink>
 
       <slot name="body">
-        <div v-if="date || !!slots.date || (badge || !!slots.badge)" :class="ui.meta({ class: props.ui?.meta })">
+        <div v-if="date || !!slots.date || (badge || !!slots.badge)" data-slot="meta" :class="ui.meta({ class: props.ui?.meta })">
           <slot name="badge">
-            <UBadge v-if="badge" color="neutral" variant="subtle" v-bind="typeof badge === 'string' ? { label: badge } : badge" :class="ui.badge({ class: props.ui?.badge })" />
+            <UBadge
+              v-if="badge"
+              color="neutral"
+              variant="subtle"
+              v-bind="typeof badge === 'string' ? { label: badge } : badge"
+              data-slot="badge"
+              :class="ui.badge({ class: props.ui?.badge })"
+            />
           </slot>
 
-          <time v-if="date || !!slots.date" :datetime="datetime" :class="ui.date({ class: props.ui?.date })">
+          <time v-if="date || !!slots.date" :datetime="datetime" data-slot="date" :class="ui.date({ class: props.ui?.date })">
             <slot name="date">
               {{ date }}
             </slot>
           </time>
         </div>
 
-        <h2 v-if="title || !!slots.title" :class="ui.title({ class: props.ui?.title })">
+        <h2 v-if="title || !!slots.title" data-slot="title" :class="ui.title({ class: props.ui?.title })">
           <slot name="title">
             {{ title }}
           </slot>
         </h2>
 
-        <div v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
+        <div v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: props.ui?.description })">
           <slot name="description">
             {{ description }}
           </slot>
         </div>
 
-        <div v-if="authors?.length || !!slots.authors" :class="ui.authors({ class: props.ui?.authors })">
-          <slot name="authors">
+        <div v-if="authors?.length || !!slots.authors" data-slot="authors" :class="ui.authors({ class: props.ui?.authors })">
+          <slot name="authors" :ui="ui">
             <template v-if="authors?.length">
               <UAvatarGroup v-if="authors.length > 1">
                 <ULink
@@ -125,6 +133,7 @@ const ariaLabel = computed(() => {
                   :key="index"
                   :to="author.to"
                   :target="author.target"
+                  data-slot="avatar"
                   :class="ui.avatar({ class: props.ui?.avatar, to: !!author.to })"
                   raw
                 >
@@ -138,7 +147,7 @@ const ariaLabel = computed(() => {
       </slot>
     </div>
 
-    <div v-if="!!slots.footer" :class="ui.footer({ class: props.ui?.footer })">
+    <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: props.ui?.footer })">
       <slot name="footer" />
     </div>
   </Primitive>

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

@@ -22,7 +22,9 @@ export interface BlogPostProps {
     /** The authors of the blog post. */
     authors?: UserProps[];
     /** The image of the blog post. Can be a string or an object. */
-    image?: string | Partial<HTMLImageElement>;
+    image?: string | (Partial<HTMLImageElement> & {
+        [key: string]: any;
+    });
     /**
      * The orientation of the blog post.
      * @defaultValue 'vertical'
@@ -43,8 +45,12 @@ export interface BlogPostSlots {
     badge(props?: {}): any;
     title(props?: {}): any;
     description(props?: {}): any;
-    authors(props?: {}): any;
-    header(props?: {}): any;
+    authors(props: {
+        ui: BlogPost['ui'];
+    }): any;
+    header(props: {
+        ui: BlogPost['ui'];
+    }): any;
     body(props?: {}): any;
     footer(props?: {}): any;
 }

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

@@ -1,15 +1,15 @@
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/blog-posts';
-import type { BlogPostProps } from '../types';
+import type { BlogPostProps, BlogPostSlots } from '../types';
 import type { ComponentConfig } from '../types/tv';
 type BlogPosts = ComponentConfig<typeof theme, AppConfig, 'blogPosts'>;
-export interface BlogPostsProps {
+export interface BlogPostsProps<T extends BlogPostProps = BlogPostProps> {
     /**
      * The element or component this component should render as.
      * @defaultValue 'div'
      */
     as?: any;
-    posts?: BlogPostProps[];
+    posts?: T[];
     /**
      * The orientation of the blog posts.
      * @defaultValue 'horizontal'
@@ -17,16 +17,25 @@ export interface BlogPostsProps {
     orientation?: BlogPosts['variants']['orientation'];
     class?: any;
 }
-export interface BlogPostsSlots {
+type ExtendSlotWithPost<T extends BlogPostProps, K extends keyof BlogPostSlots> = BlogPostSlots[K] extends (props: infer P) => any ? (props: P & {
+    post: T;
+}) => any : BlogPostSlots[K];
+export type BlogPostsSlots<T extends BlogPostProps = BlogPostProps> = {
+    [K in keyof BlogPostSlots]: ExtendSlotWithPost<T, K>;
+} & {
     default(props?: {}): any;
-}
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<BlogPostsProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BlogPostsProps> & Readonly<{}>, {
-    orientation: BlogPosts["variants"]["orientation"];
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, BlogPostsSlots>;
+};
+declare const __VLS_export: <T extends BlogPostProps>(__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<BlogPostsProps<BlogPostProps>> & import("vue").PublicProps;
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: BlogPostsSlots<T>;
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
 declare const _default: typeof __VLS_export;
 export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T as K]: T[K];
+} & {};

package/dist/runtime/components/BlogPosts.vue

@@ -6,6 +6,7 @@ import theme from "#build/ui/blog-posts";
 import { computed } from "vue";
 import { Primitive } from "reka-ui";
 import { useAppConfig } from "#imports";
+import { omit } from "../utils";
 import { tv } from "../utils/tv";
 import UBlogPost from "./BlogPost.vue";
 const props = defineProps({
@@ -14,7 +15,8 @@ const props = defineProps({
   orientation: { type: null, required: false, default: "horizontal" },
   class: { type: null, required: false }
 });
-defineSlots();
+const slots = defineSlots();
+const getProxySlots = () => omit(slots, ["default"]);
 const appConfig = useAppConfig();
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.blogPosts || {} }));
 </script>
@@ -27,7 +29,11 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.blogPosts ||
         :key="index"
         :orientation="orientation === 'vertical' ? 'horizontal' : 'vertical'"
         v-bind="post"
-      />
+      >
+        <template v-for="(_, name) in getProxySlots()" #[name]="slotData">
+          <slot :name="name" v-bind="slotData" :post="post" />
+        </template>
+      </UBlogPost>
     </slot>
   </Primitive>
 </template>

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

@@ -1,15 +1,15 @@
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/blog-posts';
-import type { BlogPostProps } from '../types';
+import type { BlogPostProps, BlogPostSlots } from '../types';
 import type { ComponentConfig } from '../types/tv';
 type BlogPosts = ComponentConfig<typeof theme, AppConfig, 'blogPosts'>;
-export interface BlogPostsProps {
+export interface BlogPostsProps<T extends BlogPostProps = BlogPostProps> {
     /**
      * The element or component this component should render as.
      * @defaultValue 'div'
      */
     as?: any;
-    posts?: BlogPostProps[];
+    posts?: T[];
     /**
      * The orientation of the blog posts.
      * @defaultValue 'horizontal'
@@ -17,16 +17,25 @@ export interface BlogPostsProps {
     orientation?: BlogPosts['variants']['orientation'];
     class?: any;
 }
-export interface BlogPostsSlots {
+type ExtendSlotWithPost<T extends BlogPostProps, K extends keyof BlogPostSlots> = BlogPostSlots[K] extends (props: infer P) => any ? (props: P & {
+    post: T;
+}) => any : BlogPostSlots[K];
+export type BlogPostsSlots<T extends BlogPostProps = BlogPostProps> = {
+    [K in keyof BlogPostSlots]: ExtendSlotWithPost<T, K>;
+} & {
     default(props?: {}): any;
-}
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<BlogPostsProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BlogPostsProps> & Readonly<{}>, {
-    orientation: BlogPosts["variants"]["orientation"];
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, BlogPostsSlots>;
+};
+declare const __VLS_export: <T extends BlogPostProps>(__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<BlogPostsProps<BlogPostProps>> & import("vue").PublicProps;
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: BlogPostsSlots<T>;
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
 declare const _default: typeof __VLS_export;
 export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T as K]: T[K];
+} & {};