feat: add slots typing for all components (#6603)

* feat(alert): add slots type (#6599)

* feat(auto-complete): add slots type (#6599)

* fix(auto-complete): slots type (#6599)

* feat(auto-complete): export slots type (#6599)

* feat(avatar): add slots type (#6599)

* feat(avatar-group): add slots type (#6599), may not be particularly precise

* feat(breadcrumb-item): add slots type (#6599)

* feat(breadcrumb-item): export slots type (#6599)

* feat(button): add slots type (#6599)

* feat(calendar): add slots type (#6599)

* feat(card): add slots type (#6599)

* feat(carousel): add slots type (#6599)

* feat(cascader): add slots type (#6599)

* feat(collapse): add slots type (#6599)

* feat(color-picker): add slots type (#6599)

* feat(data-table): add slots type (#6599)

* feat(date-picker): add slots type (#6599)

* feat(descriptions): add slots type (#6599)

* feat(dialog): add slots type (#6599)

* feat(drawer-content): add slots type (#6599)

* feat(dynamic-input): add slots type (#6599)

* feat(dynamic-tags): add slots type (#6599)

* feat(ellipsis): add slots type (#6599)

* feat(empty): add slots type (#6599)

* feat(float-button): add slots type (#6599)

* feat(image): add slots type (#6599)

* feat(input): add slots type (#6599)

* feat(input-number): add slots type (#6599)

* feat(list): add slots type (#6599)

* feat(mention): add slots type (#6599)

* feat(modal): add slots type (#6599)

* feat(page-header): add slots type (#6599)

* feat(pagination): add slots type (#6599)

* feat(popconfirm): add slots type (#6599)

* feat(popover): add slots type (#6599)

* feat(popselect): add slots type (#6599)

* feat(result): add slots type (#6599)

* feat(select): add slots type (#6599)

* feat(slider): add slots type (#6599)

* feat(spin): add slots type (#6599)

* feat(split): add slots type (#6599)

* feat(statistic): add slots type (#6599)

* feat(step): add slots type (#6599)

* feat(switch): add slots type (#6599)

* feat(tabs): add slots type (#6599)

* feat(tag): add slots type (#6599)

* feat(thing): add slots type (#6599)

* feat(time-picker): add slots type (#6599)

* feat(time-picker): export slots type (#6599)

* feat(timeline): export slots type (#6599)

* feat(tooltip): export slots type (#6599)

* feat(tree): export slots type (#6599)

* feat(tree-select): export slots type (#6599)

* feat(upload-trigger): export slots type (#6599)

---------

Co-authored-by: Naily <[email protected]>

src/alert/index.ts

@@ -1,2 +1,2 @@
 export { alertProps, default as NAlert } from './src/Alert'
-export type { AlertProps } from './src/Alert'
+export type { AlertProps, AlertSlots } from './src/Alert'

src/alert/src/Alert.tsx

@@ -10,6 +10,7 @@ import {
   mergeProps,
   type PropType,
   ref,
+  type SlotsType,
   watchEffect
 } from 'vue'
 import { NBaseClose, NBaseIcon, NFadeInExpandTransition } from '../../_internal'
@@ -56,10 +57,17 @@ export const alertProps = {
 
 export type AlertProps = ExtractPublicPropTypes<typeof alertProps>
 
+export interface AlertSlots {
+  default?: any
+  icon?: any
+  header?: any
+}
+
 export default defineComponent({
   name: 'Alert',
   inheritAttrs: false,
   props: alertProps,
+  slots: Object as SlotsType<AlertSlots>,
   setup(props) {
     if (__DEV__) {
       watchEffect(() => {

src/auto-complete/index.ts

@@ -1,6 +1,7 @@
 export { autoCompleteProps, default as NAutoComplete } from './src/AutoComplete'
-export type { AutoCompleteProps } from './src/AutoComplete'
+export type { AutoCompleteProps, AutoCompleteSlots } from './src/AutoComplete'
 export type {
+  AutoCompleteDefaultSlotOptions,
   AutoCompleteGroupOption,
   AutoCompleteInst,
   AutoCompleteOption

src/auto-complete/src/AutoComplete.tsx

@@ -12,6 +12,7 @@ import type {
 } from '../../select/src/interface'
 import type { AutoCompleteTheme } from '../styles'
 import type {
+  AutoCompleteDefaultSlotOptions,
   AutoCompleteInst,
   AutoCompleteOption,
   AutoCompleteOptions,
@@ -33,6 +34,7 @@ import {
   type InputHTMLAttributes,
   type PropType,
   ref,
+  type SlotsType,
   toRef,
   Transition,
   watchEffect,
@@ -114,9 +116,17 @@ export const autoCompleteProps = {
 
 export type AutoCompleteProps = ExtractPublicPropTypes<typeof autoCompleteProps>
 
+export interface AutoCompleteSlots {
+  default?: (options: AutoCompleteDefaultSlotOptions) => any
+  empty?: any
+  prefix?: any
+  suffix?: any
+}
+
 export default defineComponent({
   name: 'AutoComplete',
   props: autoCompleteProps,
+  slots: Object as SlotsType<AutoCompleteSlots>,
   setup(props) {
     if (__DEV__) {
       watchEffect(() => {
@@ -368,7 +378,7 @@ export default defineComponent({
                         handleFocus: this.handleFocus,
                         handleBlur: this.handleBlur,
                         value: this.mergedValue
-                      })
+                      } as AutoCompleteDefaultSlotOptions)
                     }
                     const { mergedTheme } = this
                     return (

src/auto-complete/src/interface.ts

@@ -22,3 +22,11 @@ export interface AutoCompleteInst {
   focus: () => void
   blur: () => void
 }
+
+export interface AutoCompleteDefaultSlotOptions {
+  handleInput: (value: string) => void
+  handleFocus: (e: FocusEvent) => void
+  handleBlur: (e: FocusEvent) => void
+  value: string
+  theme: string | null
+}

src/avatar-group/index.ts

@@ -1,2 +1,6 @@
 export { avatarGroupProps, default as NAvatarGroup } from './src/AvatarGroup'
 export type { AvatarGroupOption, AvatarGroupProps } from './src/AvatarGroup'
+export type {
+  AvatarGroupAvatarSlotOptions,
+  AvatarGroupRestSlotOptions
+} from './src/interface'

src/avatar-group/src/AvatarGroup.tsx

@@ -2,13 +2,18 @@ import type { ThemeProps } from '../../_mixins'
 import type { ExtractPublicPropTypes } from '../../_utils'
 import type { Size } from '../../avatar/src/interface'
 import type { AvatarGroupTheme } from '../styles'
+import type {
+  AvatarGroupAvatarSlotOptions,
+  AvatarGroupRestSlotOptions
+} from './interface'
 import {
   computed,
   type CSSProperties,
   defineComponent,
   h,
   type PropType,
-  provide
+  provide,
+  type SlotsType
 } from 'vue'
 import { useConfig, useTheme } from '../../_mixins'
 import { useRtl } from '../../_mixins/use-rtl'
@@ -40,9 +45,16 @@ export const avatarGroupProps = {
 
 export type AvatarGroupProps = ExtractPublicPropTypes<typeof avatarGroupProps>
 
+export interface AvatarGroupSlots {
+  avatar?: (info: AvatarGroupAvatarSlotOptions) => any
+  rest?: (info: AvatarGroupRestSlotOptions) => any
+  default?: any
+}
+
 export default defineComponent({
   name: 'AvatarGroup',
   props: avatarGroupProps,
+  slots: Object as SlotsType<AvatarGroupSlots>,
   setup(props) {
     const { mergedClsPrefixRef, mergedRtlRef } = useConfig(props)
     const mergedThemeRef = useTheme(

src/avatar-group/src/interface.ts

@@ -0,0 +1,8 @@
+export interface AvatarGroupAvatarSlotOptions {
+  option: Record<string, any>
+}
+
+export interface AvatarGroupRestSlotOptions {
+  options: Array<any>
+  rest: number
+}

src/avatar/index.ts

@@ -1,2 +1,2 @@
 export { avatarProps, default as NAvatar } from './src/Avatar'
-export type { AvatarProps } from './src/Avatar'
+export type { AvatarProps, AvatarSlots } from './src/Avatar'

src/avatar/src/Avatar.tsx

@@ -12,6 +12,7 @@ import {
   onMounted,
   type PropType,
   ref,
+  type SlotsType,
   type VNodeChild,
   watch,
   watchEffect
@@ -65,9 +66,16 @@ export const avatarProps = {
 
 export type AvatarProps = ExtractPublicPropTypes<typeof avatarProps>
 
+export interface AvatarSlots {
+  default: any
+  placeholder: any
+  fallback: any
+}
+
 export default defineComponent({
   name: 'Avatar',
   props: avatarProps,
+  slots: Object as SlotsType<AvatarSlots>,
   setup(props) {
     const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props)
     const hasLoadErrorRef = ref(false)

src/breadcrumb/index.ts

@@ -4,4 +4,7 @@ export {
   breadcrumbItemProps,
   default as NBreadcrumbItem
 } from './src/BreadcrumbItem'
-export type { BreadcrumbItemProps } from './src/BreadcrumbItem'
+export type {
+  BreadcrumbItemProps,
+  BreadcrumbItemSlots
+} from './src/BreadcrumbItem'

src/breadcrumb/src/BreadcrumbItem.tsx

@@ -4,7 +4,8 @@ import {
   type ExtractPropTypes,
   h,
   inject,
-  type PropType
+  type PropType,
+  type SlotsType
 } from 'vue'
 import { resolveSlot, warn } from '../../_utils'
 import { useBrowserLocation } from '../../_utils/composable/use-browser-location'
@@ -24,9 +25,15 @@ export type BreadcrumbItemProps = Partial<
   ExtractPropTypes<typeof breadcrumbItemProps>
 >
 
+export interface BreadcrumbItemSlots {
+  default?: any
+  separator?: any
+}
+
 export default defineComponent({
   name: 'BreadcrumbItem',
   props: breadcrumbItemProps,
+  slots: Object as SlotsType<BreadcrumbItemSlots>,
   setup(props, { slots }) {
     const NBreadcrumb = inject(breadcrumbInjectionKey, null)
     if (!NBreadcrumb) {

src/button/index.ts

@@ -3,4 +3,4 @@ export {
   default as NButton,
   XButton as NxButton
 } from './src/Button'
-export type { ButtonProps } from './src/Button'
+export type { ButtonProps, ButtonSlots } from './src/Button'

src/button/src/Button.tsx

@@ -15,6 +15,7 @@ import {
   inject,
   type PropType,
   ref,
+  type SlotsType,
   type VNodeChild,
   watchEffect
 } from 'vue'
@@ -95,9 +96,15 @@ export const buttonProps = {
 
 export type ButtonProps = ExtractPublicPropTypes<typeof buttonProps>
 
+export interface ButtonSlots {
+  default?: any
+  icon?: any
+}
+
 const Button = defineComponent({
   name: 'Button',
   props: buttonProps,
+  slots: Object as SlotsType<ButtonSlots>,
   setup(props) {
     if (__DEV__) {
       watchEffect(() => {

src/calendar/src/Calendar.tsx

@@ -1,7 +1,13 @@
 import type { ThemeProps } from '../../_mixins'
 import type { ExtractPublicPropTypes, MaybeArray } from '../../_utils'
 import type { CalendarTheme } from '../styles'
-import type { DateItem, OnPanelChange, OnUpdateValue } from './interface'
+import type {
+  CalendarDefaultSlotOptions,
+  CalendarHeaderSlotOptions,
+  DateItem,
+  OnPanelChange,
+  OnUpdateValue
+} from './interface'
 import {
   addMonths,
   format,
@@ -19,6 +25,7 @@ import {
   h,
   type PropType,
   ref,
+  type SlotsType,
   toRef
 } from 'vue'
 import { NBaseIcon } from '../../_internal'
@@ -46,9 +53,15 @@ export const calendarProps = {
 
 export type CalendarProps = ExtractPublicPropTypes<typeof calendarProps>
 
+export interface CalendarSlots {
+  default?: (props: CalendarDefaultSlotOptions) => any
+  header?: (props: CalendarHeaderSlotOptions) => any
+}
+
 export default defineComponent({
   name: 'Calendar',
   props: calendarProps,
+  slots: Object as SlotsType<CalendarSlots>,
   setup(props) {
     const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props)
     const themeRef = useTheme(

src/calendar/src/interface.ts

@@ -7,3 +7,14 @@ export interface DateItem {
 }
 
 export type OnPanelChange = (info: { year: number, month: number }) => void
+
+export interface CalendarDefaultSlotOptions {
+  year: number
+  month: number
+  date: number
+}
+
+export interface CalendarHeaderSlotOptions {
+  year: number
+  month: number
+}

src/card/index.ts

@@ -1,2 +1,2 @@
 export { cardProps, default as NCard } from './src/Card'
-export type { CardProps, CardSegmented } from './src/Card'
+export type { CardProps, CardSegmented, CardSlots } from './src/Card'

src/card/src/Card.tsx

@@ -8,6 +8,7 @@ import {
   defineComponent,
   h,
   type PropType,
+  type SlotsType,
   type VNodeChild
 } from 'vue'
 import { NBaseClose } from '../../_internal'
@@ -71,9 +72,19 @@ export const cardProps = {
 
 export type CardProps = ExtractPublicPropTypes<typeof cardProps>
 
+export interface CardSlots {
+  default?: any
+  cover?: any
+  header?: any
+  'header-extra'?: any
+  footer?: any
+  action?: any
+}
+
 export default defineComponent({
   name: 'Card',
   props: cardProps,
+  slots: Object as SlotsType<CardSlots>,
   setup(props) {
     const handleCloseClick = (): void => {
       const { onClose } = props

src/carousel/index.ts

@@ -1,4 +1,8 @@
 export { carouselProps, default as NCarousel } from './src/Carousel'
-export type { CarouselProps } from './src/Carousel'
+export type { CarouselProps, CarouselSlots } from './src/Carousel'
 export { default as NCarouselItem } from './src/CarouselItem'
-export type { CarouselInst } from './src/interface'
+export type {
+  CarouselArrowSlotOptions,
+  CarouselDotSlotOptions,
+  CarouselInst
+} from './src/interface'

src/carousel/src/Carousel.tsx

@@ -1,9 +1,18 @@
-import type { CSSProperties, PropType, Ref, TransitionProps, VNode } from 'vue'
+import type {
+  CSSProperties,
+  PropType,
+  Ref,
+  SlotsType,
+  TransitionProps,
+  VNode
+} from 'vue'
 import type { ThemeProps } from '../../_mixins'
 import type { ExtractPublicPropTypes } from '../../_utils'
 import type { CarouselTheme } from '../styles'
 import type {
   ArrowScopedSlotProps,
+  CarouselArrowSlotOptions,
+  CarouselDotSlotOptions,
   CarouselInst,
   DotScopedSlotProps,
   Size
@@ -139,12 +148,19 @@ export const carouselProps = {
 
 export type CarouselProps = ExtractPublicPropTypes<typeof carouselProps>
 
+export interface CarouselSlots {
+  default?: () => any
+  arrow?: (info: CarouselArrowSlotOptions) => any
+  dots?: (info: CarouselDotSlotOptions) => any
+}
+
 // only one carousel is allowed to trigger touch globally
 let globalDragging = false
 
 export default defineComponent({
   name: 'Carousel',
   props: carouselProps,
+  slots: Object as SlotsType<CarouselSlots>,
   setup(props) {
     const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props)
     // Dom

src/carousel/src/interface.ts

@@ -25,3 +25,17 @@ export interface Size {
   width: number
   height: number
 }
+
+export interface CarouselArrowSlotOptions {
+  total: number
+  currentIndex: number
+  to: (index: number) => void
+  prev: () => void
+  next: () => void
+}
+
+export interface CarouselDotSlotOptions {
+  total: number
+  currentIndex: number
+  to: (index: number) => void
+}