feat(empty): support tiny size. (#6197)

* feat: `n-empty` and `n-select` support tiny size

* feat: `n-empty` and `n-select` support tiny size

CHANGELOG.en-US.md

@@ -19,6 +19,7 @@
 - Adds `n-highlight` component.
 - `n-slider` `marks` prop to support render function, closes [#5967](https://github.com/tusen-ai/naive-ui/issues/5967)
 - `n-transfer` `source-title` `target-title` prop to support render function, closes [#6004](https://github.com/tusen-ai/naive-ui/issues/6004)
+- `n-empty` `size` prop to support `tiny` size.
 
 ## 2.39.0
 

CHANGELOG.zh-CN.md

@@ -19,6 +19,7 @@
 - 新增 `n-highlight` 组件
 - `n-slider` `marks` 支持渲染函数，关闭 [#5967](https://github.com/tusen-ai/naive-ui/issues/5967)
 - `n-transfer` `source-title` `target-title` 支持渲染函数，关闭 [#6004](https://github.com/tusen-ai/naive-ui/issues/6004)
+- `n-empty` `size` 支持 `tiny` 尺寸
 
 ## 2.39.0
 

src/_internal/select-menu/src/SelectMenu.tsx

@@ -589,6 +589,7 @@ export default defineComponent({
               <NEmpty
                 theme={mergedTheme.peers.Empty}
                 themeOverrides={mergedTheme.peerOverrides.Empty}
+                size={this.size}
               />
             ])}
           </div>

src/_internal/select-menu/src/interface.ts

@@ -7,7 +7,7 @@ import type {
 } from '../../../select/src/interface'
 import { createInjectionKey } from '../../../_utils/vue/create-injection-key'
 
-export type Size = 'small' | 'medium' | 'large' | 'huge'
+export type Size = 'tiny' | 'small' | 'medium' | 'large' | 'huge'
 
 export type RenderLabel = (
   option: SelectBaseOption & SelectGroupOption & SelectIgnoredOption,

src/_internal/select-menu/styles/_common.ts

@@ -1,9 +1,11 @@
 export default {
   height: 'calc(var(--n-option-height) * 7.6)',
+  paddingTiny: '4px 0',
   paddingSmall: '4px 0',
   paddingMedium: '4px 0',
   paddingLarge: '4px 0',
   paddingHuge: '4px 0',
+  optionPaddingTiny: '0 12px',
   optionPaddingSmall: '0 12px',
   optionPaddingMedium: '0 12px',
   optionPaddingLarge: '0 12px',

src/_internal/select-menu/styles/light.ts

@@ -17,10 +17,12 @@ export function self(vars: ThemeCommonVars) {
     primaryColor,
     opacityDisabled,
     hoverColor,
+    fontSizeTiny,
     fontSizeSmall,
     fontSizeMedium,
     fontSizeLarge,
     fontSizeHuge,
+    heightTiny,
     heightSmall,
     heightMedium,
     heightLarge,
@@ -28,10 +30,12 @@ export function self(vars: ThemeCommonVars) {
   } = vars
   return {
     ...commonVariables,
+    optionFontSizeTiny: fontSizeTiny,
     optionFontSizeSmall: fontSizeSmall,
     optionFontSizeMedium: fontSizeMedium,
     optionFontSizeLarge: fontSizeLarge,
     optionFontSizeHuge: fontSizeHuge,
+    optionHeightTiny: heightTiny,
     optionHeightSmall: heightSmall,
     optionHeightMedium: heightMedium,
     optionHeightLarge: heightLarge,

src/empty/demos/enUS/index.demo-entry.md

@@ -14,12 +14,12 @@ size.vue
 
 ### Empty Props
 
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| description | `string` | `'No Data'` | Description of the empty. |
-| show-description | `boolean` | `true` | Whether to show description of empty. |
-| show-icon | `boolean` | `true` | Whether to show icon of empty. |
-| size | `'small' \| 'medium' \| 'large' \| 'huge'` | `'medium'` | Empty's size. |
+| Name | Type | Default | Description | Version |
+| --- | --- | --- | --- | --- |
+| description | `string` | `'No Data'` | Description of the empty. |  |
+| show-description | `boolean` | `true` | Whether to show description of empty. |  |
+| show-icon | `boolean` | `true` | Whether to show icon of empty. |  |
+| size | `'tiny' \| 'small' \| 'medium' \| 'large' \| 'huge'` | `'medium'` | Empty's size. | NEXT_VERSION |
 
 ### Empty Slots
 

src/empty/demos/enUS/size.demo.vue

@@ -1,7 +1,7 @@
 <markdown>
 # Size
 
-Empty can be `small`, `medium`, `large` and `huge` size.
+Empty can be `tiny`, `small`, `medium`, `large` and `huge` size.
 </markdown>
 
 <template>

src/empty/demos/zhCN/index.demo-entry.md

@@ -14,12 +14,12 @@ size.vue
 
 ### Empty Props
 
-| 名称 | 类型 | 默认值 | 说明 |
-| --- | --- | --- | --- |
-| description | `string` | `'无数据'` | 描述信息 |
-| show-description | `boolean` | `true` | 是否展示描述信息 |
-| show-icon | `boolean` | `true` | 是否展示图标 |
-| size | `'small' \| 'medium' \| 'large' \| 'huge'` | `'medium'` | 尺寸大小 |
+| 名称 | 类型 | 默认值 | 说明 | 版本 |
+| --- | --- | --- | --- | --- |
+| description | `string` | `'无数据'` | 描述信息 |  |
+| show-description | `boolean` | `true` | 是否展示描述信息 |  |
+| show-icon | `boolean` | `true` | 是否展示图标 |  |
+| size | `'tiny' \| 'small' \| 'medium' \| 'large' \| 'huge'` | `'medium'` | 尺寸大小 | NEXT_VERSION |
 
 ### Empty Slots
 

src/empty/demos/zhCN/size.demo.vue

@@ -1,7 +1,7 @@
 <markdown>
 # 尺寸
 
-有 `small`、`medium`、`large` 和 `huge` 尺寸。
+有 `tiny`、 `small`、`medium`、`large` 和 `huge` 尺寸。
 </markdown>
 
 <template>

src/empty/src/Empty.tsx

@@ -29,7 +29,7 @@ export const emptyProps = {
     default: true
   },
   size: {
-    type: String as PropType<'small' | 'medium' | 'large' | 'huge'>,
+    type: String as PropType<'tiny' | 'small' | 'medium' | 'large' | 'huge'>,
     default: 'medium'
   },
   renderIcon: Function as PropType<() => VNodeChild>

src/empty/styles/_common.ts

@@ -1,4 +1,5 @@
 export default {
+  iconSizeTiny: '28px',
   iconSizeSmall: '34px',
   iconSizeMedium: '40px',
   iconSizeLarge: '46px',

src/empty/styles/light.ts

@@ -8,6 +8,7 @@ export function self(vars: ThemeCommonVars) {
     textColorDisabled,
     iconColor,
     textColor2,
+    fontSizeTiny,
     fontSizeSmall,
     fontSizeMedium,
     fontSizeLarge,
@@ -15,6 +16,7 @@ export function self(vars: ThemeCommonVars) {
   } = vars
   return {
     ...commonVars,
+    fontSizeTiny,
     fontSizeSmall,
     fontSizeMedium,
     fontSizeLarge,

src/select/src/Select.tsx

@@ -1040,7 +1040,7 @@ export default defineComponent({
                               }
                               treeMate={this.treeMate}
                               multiple={this.multiple}
-                              size="medium"
+                              size={this.size}
                               renderOption={this.renderOption}
                               renderLabel={this.renderLabel}
                               value={this.mergedValue}