fix: component size type refactoring

Author: 07akioni

src/_mixins/use-form-item.ts

@@ -1,9 +1,11 @@
 import type { ComputedRef, Ref } from 'vue'
-import type { FormValidationStatus } from '../form/src/public-types'
+import type {
+  FormItemSize,
+  FormValidationStatus
+} from '../form/src/public-types'
 import { computed, inject, onBeforeUnmount, provide } from 'vue'
 import { createInjectionKey } from '../_utils'
 
-type FormItemSize = 'small' | 'medium' | 'large'
 type AllowedSize = 'tiny' | 'small' | 'medium' | 'large' | 'huge' | number
 
 export interface FormItemInjection {

src/button-group/src/ButtonGroup.tsx

@@ -1,21 +1,18 @@
 import type { PropType } from 'vue'
 import type { ExtractPublicPropTypes } from '../../_utils'
-import type { Size } from '../../button/src/interface'
+import type { ButtonSize } from '../../button/src/public-types'
 import { defineComponent, h, provide } from 'vue'
 import { useConfig, useStyle } from '../../_mixins'
 import { useRtl } from '../../_mixins/use-rtl'
 import { buttonGroupInjectionKey } from './context'
 import style from './styles/index.cssr'
 
 export interface ButtonGroupInjection {
-  size?: Size | undefined
+  size?: ButtonSize | undefined
 }
 
 export const buttonGroupProps = {
-  size: {
-    type: String as PropType<Size | undefined>,
-    default: undefined
-  },
+  size: String as PropType<ButtonSize | undefined>,
   vertical: Boolean
 } as const
 

src/button-group/src/styles/index.cssr.ts

@@ -1,11 +1,11 @@
 import type { CNode } from 'css-render'
-import type { Type } from '../../../button/src/interface'
+import type { ButtonType } from '../../../button/src/public-types'
 import { c, cB, cE, cM, cNotM } from '../../../_utils/cssr/index'
 
 export const zero = '0!important'
 export const n1 = '-1px!important'
 
-function createLeftBorderStyle(type: Type): CNode {
+function createLeftBorderStyle(type: ButtonType): CNode {
   return cM(`${type}-type`, [
     c('& +', [
       cB('button', {}, [
@@ -22,7 +22,7 @@ function createLeftBorderStyle(type: Type): CNode {
   ])
 }
 
-function createTopBorderStyle(type: Type): CNode {
+function createTopBorderStyle(type: ButtonType): CNode {
   return cM(`${type}-type`, [
     c('& +', [
       cB('button', [

src/button-group/src/styles/rtl.cssr.ts

@@ -1,9 +1,9 @@
 import type { CNode } from 'css-render'
-import type { Type } from '../../../button/src/interface'
+import type { ButtonType } from '../../../button/src/public-types'
 import { c, cB, cE, cM, cNotM } from '../../../_utils/cssr'
 import { n1, zero } from './index.cssr'
 
-function createRightBorderStyle(type: Type): CNode {
+function createRightBorderStyle(type: ButtonType): CNode {
   return cM(`${type}-type`, [
     c('& +', [
       cB('button', {}, [

src/button/src/Button.tsx

@@ -11,8 +11,7 @@ import type { BaseWaveRef } from '../../_internal'
 import type { ThemeProps } from '../../_mixins'
 import type { ExtractPublicPropTypes, MaybeArray } from '../../_utils'
 import type { ButtonTheme } from '../styles'
-import type { Size, Type } from './interface'
-import type { ButtonSpinProps } from './public-types'
+import type { ButtonSize, ButtonSpinProps, ButtonType } from './public-types'
 import { changeColor } from 'seemly'
 import { useMemo } from 'vooks'
 import { computed, defineComponent, h, inject, ref, watchEffect } from 'vue'
@@ -47,7 +46,7 @@ export const buttonProps = {
   loading: Boolean,
   disabled: Boolean,
   circle: Boolean,
-  size: String as PropType<Size>,
+  size: String as PropType<ButtonSize>,
   ghost: Boolean,
   round: Boolean,
   secondary: Boolean,
@@ -67,7 +66,7 @@ export const buttonProps = {
     default: 'button'
   },
   type: {
-    type: String as PropType<Type>,
+    type: String as PropType<ButtonType>,
     default: 'default'
   },
   dashed: Boolean,

src/button/src/interface.ts

@@ -1,3 +1,12 @@
 import type { SharedSpinProps } from '../../_internal'
 
+export type ButtonSize = 'tiny' | 'small' | 'medium' | 'large'
 export type ButtonSpinProps = SharedSpinProps
+export type ButtonType
+  = | 'default'
+    | 'tertiary'
+    | 'primary'
+    | 'info'
+    | 'success'
+    | 'warning'
+    | 'error'

src/button/src/public-types.ts

@@ -26,7 +26,7 @@ size.vue
 | abstract | `boolean` | `false` | If `n-config-provider` has no wrapper DOM |  |
 | breakpoints | `{ [k: string]: number }` | `{ xs: <640, s: ≥640, m: ≥1024, l: ≥1280, xl: ≥1536, xxl: ≥1920 }` | Responsive breakpoints, it will be used in `n-grid`. The prop is not responsive, you need to set it on its first mount. |  |
 | cls-prefix | `string` | `undefined` | The class prefix of all inner components. (Since `2.40.0`) If you don't set the `cls-prefix` prop of `n-config-provider`, it will inherit the class prefix from its parent by default. Note that this prop is not reactive. |  |
-| component-options | `GlobalComponentConfig` | `undefined` | Global component options. `renderEmpty` can be configured per component. If set to `undefined` it will inherit its parent `n-config-provider`. |  |
+| component-options | `GlobalComponentConfig` | `undefined` | Global component options. Some props can be configured per component. If set to `undefined` it will inherit its parent `n-config-provider`. |  |
 | date-locale | `DateLocale \| null` | `undefined` | The date locale object to be consumed by its child. If set to `null` it will use the default `dateEnUS` locale. If set to `undefined` it will inherit its parent `n-config-provider`. |  |
 | inline-theme-disabled | `boolean` | `false` | Whether to disabled inline theme CSS variables. If you won't change theme overrides frequently in client side, and need SSR or make devtools looks clear. You can enable the prop. Note that the prop is not responsive. | 2.26.0 |
 | katex | `object` | `undefined` | Katex object for `n-equation`. | 2.34.0 |
@@ -42,17 +42,87 @@ size.vue
 
 ```ts
 interface GlobalComponentConfig {
+  Button?: {
+    size?: ButtonSize
+  }
+  Card?: {
+    size?: CardSize
+  }
   Cascader?: {
     renderEmpty?: () => VNodeChild
   }
+  Checkbox?: {
+    size?: CheckboxSize
+  }
   DataTable?: {
+    size?: DataTableSize
     renderFilter?: DataTableRenderFilter
     renderSorter?: DataTableRenderSorter
     renderEmpty?: () => VNodeChild
   }
+  DatePicker?: {
+    timePickerSize?: TimePickerSize
+  }
+  Descriptions?: {
+    size?: DescriptionsSize
+  }
+  Dialog?: {
+    iconPlacement?: IconPlacement
+  }
+  Dropdown?: {
+    size?: DropdownSize
+  }
+  DynamicInput?: {
+    buttonSize?: ButtonSize
+  }
+  DynamicTags?: {
+    size?: DynamicTagsSize
+  }
+  Empty?: Pick<EmptyProps, 'description' | 'renderIcon'>
+  Form?: {
+    size?: FormSize
+  }
+  Input?: {
+    size?: InputSize
+  }
+  Pagination?: {
+    size?: PaginationSize
+    inputSize?: InputSize
+    selectSize?: SelectSize
+  }
+  Popselect?: {
+    size?: PopselectSize
+  }
+  Radio?: {
+    size?: RadioSize
+  }
+  Rate?: {
+    size?: RateSize
+  }
+  Result?: {
+    size?: ResultSize
+  }
   Select?: {
     renderEmpty?: () => VNodeChild
   }
+  Skeleton?: {
+    size?: SkeletonSize
+  }
+  Space?: {
+    size?: SpaceSize
+  }
+  Switch?: {
+    size?: SwitchSize
+  }
+  Table?: {
+    size?: TableSize
+  }
+  Tabs?: {
+    size?: TabsSize
+  }
+  Tag?: {
+    size?: TagSize
+  }
   Transfer?: {
     renderEmpty?: () => VNodeChild
   }

src/config-provider/demos/enUS/index.demo-entry.md

@@ -26,7 +26,7 @@ size.vue
 | abstract | `boolean` | `false` | 是否不存在 DOM 包裹 |  |
 | breakpoints | `{ [k: string]: number }` | `{ xs: <640, s: ≥640, m: ≥1024, l: ≥1280, xl: ≥1536, xxl: ≥1920 }` | 屏幕响应式断点，对 `n-grid` 生效。这个属性不是响应式的，你需要在组件第一次挂载时就设定好 |  |
 | cls-prefix | `string` | `undefined` | 内部所有组件的类的前缀。（从 `2.40.0` 开始）如果不设置 `n-config-provider` 的类前缀 `cls-prefix`，则默认继承父级的类前缀。注意，该属性不是响应式的。 |  |
-| component-options | `GlobalComponentConfig` | `undefined` | 全局组件配置项。`renderEmpty` 按组件维度分别配置。为 `undefined` 时会继承上级 `n-config-provider` |  |
+| component-options | `GlobalComponentConfig` | `undefined` | 全局组件配置项。一些属性可以按组件维度分别配置。为 `undefined` 时会继承上级 `n-config-provider` |  |
 | date-locale | `DateLocale \| null` | `undefined` | 对后代组件生效的日期语言对象，为 `null` 时会使用默认 `dateEnUS`，为 `undefined` 时会继承上级 `n-config-provider` |  |
 | inline-theme-disabled | `boolean` | `false` | 是否禁用 inline css 主题变量，如果你不会频繁调整主题变量，并且需要 SSR 或者想让 devtools 看起来更干净，可以打开这个选项。注意，这个属性不是响应式的 | 2.26.0 |
 | katex | `object` | `undefined` | 公式组件需要的 katex 对象 | 2.34.0 |
@@ -42,17 +42,87 @@ size.vue
 
 ```ts
 interface GlobalComponentConfig {
+  Button?: {
+    size?: ButtonSize
+  }
+  Card?: {
+    size?: CardSize
+  }
   Cascader?: {
     renderEmpty?: () => VNodeChild
   }
+  Checkbox?: {
+    size?: CheckboxSize
+  }
   DataTable?: {
+    size?: DataTableSize
     renderFilter?: DataTableRenderFilter
     renderSorter?: DataTableRenderSorter
     renderEmpty?: () => VNodeChild
   }
+  DatePicker?: {
+    timePickerSize?: TimePickerSize
+  }
+  Descriptions?: {
+    size?: DescriptionsSize
+  }
+  Dialog?: {
+    iconPlacement?: IconPlacement
+  }
+  Dropdown?: {
+    size?: DropdownSize
+  }
+  DynamicInput?: {
+    buttonSize?: ButtonSize
+  }
+  DynamicTags?: {
+    size?: DynamicTagsSize
+  }
+  Empty?: Pick<EmptyProps, 'description' | 'renderIcon'>
+  Form?: {
+    size?: FormSize
+  }
+  Input?: {
+    size?: InputSize
+  }
+  Pagination?: {
+    size?: PaginationSize
+    inputSize?: InputSize
+    selectSize?: SelectSize
+  }
+  Popselect?: {
+    size?: PopselectSize
+  }
+  Radio?: {
+    size?: RadioSize
+  }
+  Rate?: {
+    size?: RateSize
+  }
+  Result?: {
+    size?: ResultSize
+  }
   Select?: {
     renderEmpty?: () => VNodeChild
   }
+  Skeleton?: {
+    size?: SkeletonSize
+  }
+  Space?: {
+    size?: SpaceSize
+  }
+  Switch?: {
+    size?: SwitchSize
+  }
+  Table?: {
+    size?: TableSize
+  }
+  Tabs?: {
+    size?: TabsSize
+  }
+  Tag?: {
+    size?: TagSize
+  }
   Transfer?: {
     renderEmpty?: () => VNodeChild
   }

src/config-provider/demos/zhCN/index.demo-entry.md

@@ -13,7 +13,7 @@ import type { BackTopTheme } from '../../back-top/styles'
 import type { BadgeTheme } from '../../badge/styles'
 import type { BreadcrumbTheme } from '../../breadcrumb/styles'
 import type { ButtonGroupTheme } from '../../button-group/styles/light'
-import type { Size as ButtonSize } from '../../button/src/interface'
+import type { ButtonSize } from '../../button/src/public-types'
 import type { ButtonTheme } from '../../button/styles'
 import type { CalendarTheme } from '../../calendar/styles'
 import type { CardSize } from '../../card/src/public-types'
@@ -52,7 +52,7 @@ import type { EquationTheme } from '../../equation/styles'
 import type { FlexTheme } from '../../flex/styles'
 import type { FloatButtonGroupTheme } from '../../float-button-group/styles'
 import type { FloatButtonTheme } from '../../float-button/styles'
-import type { Size as FormSize } from '../../form/src/interface'
+import type { FormSize } from '../../form/src/public-types'
 import type { FormTheme } from '../../form/styles'
 import type { GradientTextTheme } from '../../gradient-text/styles'
 import type { HeatmapTheme } from '../../heatmap/styles'
@@ -61,7 +61,7 @@ import type { IconTheme } from '../../icon/styles'
 import type { ImageTheme } from '../../image/styles'
 import type { InputNumberTheme } from '../../input-number/styles'
 import type { InputOtpTheme } from '../../input-otp/styles'
-import type { Size as InputSize } from '../../input/src/interface'
+import type { InputSize } from '../../input/src/public-types'
 import type { InputTheme } from '../../input/styles'
 import type { LayoutTheme } from '../../layout/styles'
 import type { RowTheme } from '../../legacy-grid/styles'
@@ -77,11 +77,11 @@ import type { MessageTheme } from '../../message/styles'
 import type { ModalTheme } from '../../modal/styles'
 import type { NotificationTheme } from '../../notification/styles'
 import type { PageHeaderTheme } from '../../page-header/styles'
-import type { Size as PaginationSize } from '../../pagination/src/interface'
+import type { PaginationSize } from '../../pagination/src/public-types'
 import type { PaginationTheme } from '../../pagination/styles'
 import type { PopconfirmTheme } from '../../popconfirm/styles'
 import type { PopoverTheme } from '../../popover/styles'
-import type { PopselectSize } from '../../popselect/src/interface'
+import type { PopselectSize } from '../../popselect/src/public-types'
 import type { PopselectTheme } from '../../popselect/styles'
 import type { ProgressTheme } from '../../progress/styles'
 import type { QrCodeTheme } from '../../qr-code/styles'
@@ -91,7 +91,7 @@ import type { RateSize } from '../../rate/src/public-types'
 import type { RateTheme } from '../../rate/styles'
 import type { ResultSize } from '../../result/src/public-types'
 import type { ResultTheme } from '../../result/styles'
-import type { Size as SelectSize } from '../../select/src/interface'
+import type { SelectSize } from '../../select/src/public-types'
 import type { SelectTheme } from '../../select/styles'
 import type { SkeletonSize } from '../../skeleton/src/public-types'
 import type { SkeletonTheme } from '../../skeleton/styles'
@@ -111,7 +111,7 @@ import type { TabsTheme } from '../../tabs/styles'
 import type { TagSize } from '../../tag/src/public-types'
 import type { TagTheme } from '../../tag/styles'
 import type { ThingTheme } from '../../thing/styles'
-import type { Size as TimePickerSize } from '../../time-picker/src/interface'
+import type { TimePickerSize } from '../../time-picker/src/public-types'
 import type { TimePickerTheme } from '../../time-picker/styles'
 import type { TimelineTheme } from '../../timeline/styles'
 import type { TooltipTheme } from '../../tooltip/styles'