diff --git a/packages/components/_private/empty/__tests__/__snapshots__/empty.spec.ts.snap b/packages/components/_private/empty/__tests__/__snapshots__/empty.spec.ts.snap index 370ef6352..c4a02b275 100644 --- a/packages/components/_private/empty/__tests__/__snapshots__/empty.spec.ts.snap +++ b/packages/components/_private/empty/__tests__/__snapshots__/empty.spec.ts.snap @@ -2,8 +2,140 @@ exports[`Empty > render work 1`] = ` "
-
-
Empty content
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
暂无数据
" `; diff --git a/packages/components/_private/empty/__tests__/empty.spec.ts b/packages/components/_private/empty/__tests__/empty.spec.ts index 4792c2c41..7b6fddc3a 100644 --- a/packages/components/_private/empty/__tests__/empty.spec.ts +++ b/packages/components/_private/empty/__tests__/empty.spec.ts @@ -17,12 +17,16 @@ describe('Empty', () => { renderWork(Empty, { props: { empty: 'Empty content' } }) test('empty work', async () => { - let empty = 'empty 1' + let empty = 'default' const wrapper = EmptyMount({ props: { empty } }) - expect(wrapper.find('.ix-empty-description').text()).toBe(empty) + expect(wrapper.classes()).not.toContain('ix-empty-simple') + + empty = 'simple' + await wrapper.setProps({ empty }) + + expect(wrapper.classes()).toContain('ix-empty-simple') - empty = 'empty 2' await wrapper.setProps({ empty: { description: empty } }) expect(wrapper.find('.ix-empty-description').text()).toBe(empty) @@ -30,7 +34,6 @@ describe('Empty', () => { test('empty slot work', () => { const wrapper = EmptyMount({ - props: { empty: 'empty 1' }, slots: { empty: () => h(IxEmpty, { description: 'empty slot' }) }, }) diff --git a/packages/components/_private/empty/src/Empty.tsx b/packages/components/_private/empty/src/Empty.tsx index 3b1af3b69..300b60ff6 100644 --- a/packages/components/_private/empty/src/Empty.tsx +++ b/packages/components/_private/empty/src/Empty.tsx @@ -5,20 +5,21 @@ * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE */ -import type { EmptyProps } from './types' -import type { FunctionalComponent } from 'vue' +import { type FunctionalComponent } from 'vue' import { isString } from 'lodash-es' import { IxEmpty } from '@idux/components/empty' +import { type EmptyProps } from './types' + const Empty: FunctionalComponent = (props, { slots }) => { if (slots.empty) { - return slots.empty(props) + return slots.empty() } const { empty } = props - const emptyProps = isString(empty) ? { description: empty } : empty + const emptyProps = isString(empty) ? { simple: empty === 'simple' } : empty return } diff --git a/packages/components/_private/empty/src/types.ts b/packages/components/_private/empty/src/types.ts index 02cc3390f..4b1ba8ff0 100644 --- a/packages/components/_private/empty/src/types.ts +++ b/packages/components/_private/empty/src/types.ts @@ -8,5 +8,5 @@ import type { EmptyProps as IxEmptyProps } from '@idux/components/empty' export interface EmptyProps { - empty?: string | IxEmptyProps + empty?: 'default' | 'simple' | IxEmptyProps } diff --git a/packages/components/cascader/docs/Api.zh.md b/packages/components/cascader/docs/Api.zh.md index 42a5941b9..7c131f9fd 100644 --- a/packages/components/cascader/docs/Api.zh.md +++ b/packages/components/cascader/docs/Api.zh.md @@ -20,7 +20,7 @@ | `customAdditional` | 自定义下拉选项的额外属性 | `CascaderCustomAdditional` | - | - | 例如 `class`, 或者原生事件 | | `dataSource` | 树型数据数组,参见[CascaderData](#CascaderData) | `CascaderData[]` | `[]` | - | - | | `disabled` | 禁用选择器 | `boolean` | - | - | - | -| `empty` | 空数据时的内容 | `string \| EmptyProps \| #empty` | - | - | - | +| `empty` | 空数据时的内容 | `'default' \| 'simple' \| EmptyProps` | `'simple'` | - | - | | `expandIcon` | 展开图标 | `string \| #expandIcon="{key: VKey, expanded: boolean, data: CascaderData}"` | `right` | ✅ | - | | `expandTrigger` | 触发展开的方式 | `'click' \| 'hover'` | `click` | - | - | | `fullPath` | 选中后的值是否包含全部路径 | `boolean` | `true` | ✅ | 会影响值的类型，参见 [基本使用](#components-cascader-demo-Basic) 和 [多选模式](#components-cascader-demo-Multiple) | @@ -64,8 +64,9 @@ | 名称 | 说明 | 参数类型 | 备注 | | --- | --- | --- | --- | +| `empty` | 自定义空状态 | - | - | | `selectedItem` | 自定义选中项 | `data: SelectedItemProps` | 使用该插槽后`selectedLabel`将无效 | -| `selectedLabel` | 自定义选中的标签 | `data: CascaderData` | | +| `selectedLabel` | 自定义选中的标签 | `data: CascaderData` | - | | `overflowedLabel` | 自定义超出最多显示多少个标签的内容 | `data: CascaderData[]` | 参数为超出的数组 | | `optionLabel` | 自定义选项的文本 | `data: SelectOption` | - | diff --git a/packages/components/cascader/src/types.ts b/packages/components/cascader/src/types.ts index 30d7cdb94..a61d0a704 100644 --- a/packages/components/cascader/src/types.ts +++ b/packages/components/cascader/src/types.ts @@ -30,7 +30,7 @@ export const cascaderProps = { customAdditional: { type: Function as PropType, default: undefined }, dataSource: { type: Array as PropType, default: () => [] }, disabled: { type: Boolean, default: false }, - empty: { type: [String, Object] as PropType, default: undefined }, + empty: { type: [String, Object] as PropType<'default' | 'simple' | EmptyProps>, default: 'simple' }, expandIcon: { type: String, default: undefined }, expandTrigger: { type: String as PropType, default: 'click' }, fullPath: { type: Boolean, default: undefined }, diff --git a/packages/components/config/src/defaultConfig.ts b/packages/components/config/src/defaultConfig.ts index 9bdafbf1d..2a855d027 100644 --- a/packages/components/config/src/defaultConfig.ts +++ b/packages/components/config/src/defaultConfig.ts @@ -112,9 +112,7 @@ export const defaultConfig: GlobalConfig = { showArrow: false, trigger: 'hover', }, - empty: { - icon: 'empty', - }, + empty: {}, form: { colonless: false, labelAlign: 'end', diff --git a/packages/components/config/src/types.ts b/packages/components/config/src/types.ts index f5b363f1b..1dfd85630 100644 --- a/packages/components/config/src/types.ts +++ b/packages/components/config/src/types.ts @@ -224,7 +224,10 @@ export interface DropdownConfig { } export interface EmptyConfig { - icon: string | VNode + /** + * @deprecated + */ + icon?: string | VNode image?: string | VNode } diff --git a/packages/components/empty/__tests__/__snapshots__/empty.spec.ts.snap b/packages/components/empty/__tests__/__snapshots__/empty.spec.ts.snap index 663b89d2a..5d1b2e395 100644 --- a/packages/components/empty/__tests__/__snapshots__/empty.spec.ts.snap +++ b/packages/components/empty/__tests__/__snapshots__/empty.spec.ts.snap @@ -2,7 +2,156 @@ exports[`Empty > render work 1`] = ` "
-
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
暂无数据
+ +
" +`; + +exports[`Empty > simple work 1`] = ` +"
+
+ + + + + + + + +
暂无数据
" diff --git a/packages/components/empty/__tests__/empty.spec.ts b/packages/components/empty/__tests__/empty.spec.ts index bc6d6dfdc..1cbba6a05 100644 --- a/packages/components/empty/__tests__/empty.spec.ts +++ b/packages/components/empty/__tests__/empty.spec.ts @@ -45,14 +45,24 @@ describe('Empty', () => { test('image work', async () => { const wrapper = EmptyMount() - expect(wrapper.find('.ix-icon-empty').exists()).toBe(true) + expect(wrapper.find('svg').exists()).toBe(true) await wrapper.setProps({ image: 'image.url' }) - expect(wrapper.find('.ix-icon-empty').exists()).toBe(false) + expect(wrapper.find('svg').exists()).toBe(false) expect(wrapper.find('img').exists()).toBe(true) }) + test('simple work', async () => { + const wrapper = EmptyMount({ props: { simple: true } }) + expect(wrapper.classes()).toContain('ix-empty-simple') + expect(wrapper.html()).toMatchSnapshot() + + await wrapper.setProps({ simple: false }) + + expect(wrapper.classes()).not.toContain('ix-empty-simple') + }) + test('default slot work', async () => { const content = 'content' const wrapper = EmptyMount({ slots: { default: () => content } }) diff --git a/packages/components/empty/demo/Basic.vue b/packages/components/empty/demo/Basic.vue index e8a8f0df4..b20d6557c 100644 --- a/packages/components/empty/demo/Basic.vue +++ b/packages/components/empty/demo/Basic.vue @@ -1,5 +1,3 @@ diff --git a/packages/components/empty/demo/Components.md b/packages/components/empty/demo/Components.md new file mode 100644 index 000000000..db3e59321 --- /dev/null +++ b/packages/components/empty/demo/Components.md @@ -0,0 +1,10 @@ +--- +order: 5 +title: + zh: 组件 + en: Components +--- + +## zh + +组件的默认空状态。 diff --git a/packages/components/empty/demo/Components.vue b/packages/components/empty/demo/Components.vue new file mode 100644 index 000000000..eef5cc181 --- /dev/null +++ b/packages/components/empty/demo/Components.vue @@ -0,0 +1,10 @@ + diff --git a/packages/components/empty/demo/Content.md b/packages/components/empty/demo/Content.md index 6dd1689fd..1c53915c3 100644 --- a/packages/components/empty/demo/Content.md +++ b/packages/components/empty/demo/Content.md @@ -1,5 +1,5 @@ --- -order: 4 +order: 3 title: zh: 自定义内容 en: Customize content diff --git a/packages/components/empty/demo/Content.vue b/packages/components/empty/demo/Content.vue index f6bd6c2cf..417268462 100644 --- a/packages/components/empty/demo/Content.vue +++ b/packages/components/empty/demo/Content.vue @@ -1,5 +1,6 @@ diff --git a/packages/components/empty/demo/Description.md b/packages/components/empty/demo/Description.md deleted file mode 100644 index 23301e817..000000000 --- a/packages/components/empty/demo/Description.md +++ /dev/null @@ -1,14 +0,0 @@ ---- -order: 1 -title: - zh: 描述 - en: Description ---- - -## zh - -可以通过 `description` 或者插槽来自定义描述内容 - -## en - -You can customize the description through `description` or slot. diff --git a/packages/components/empty/demo/Description.vue b/packages/components/empty/demo/Description.vue deleted file mode 100644 index a0d2f2ba6..000000000 --- a/packages/components/empty/demo/Description.vue +++ /dev/null @@ -1,9 +0,0 @@ - diff --git a/packages/components/empty/demo/Image.md b/packages/components/empty/demo/Image.md index 7d78ae94c..809d51958 100644 --- a/packages/components/empty/demo/Image.md +++ b/packages/components/empty/demo/Image.md @@ -1,14 +1,14 @@ --- -order: 3 +order: 2 title: - zh: 图片 - en: Image + zh: 自定义图片 + en: Customize Image --- ## zh -可以通过 `image` 或者插槽来自定义图片 +可以通过 `image` 属性或者插槽来自定义图片 ## en -You can customize the image through `image` or slot. +You can customize the image through `image` prop or slot. diff --git a/packages/components/empty/demo/Image.vue b/packages/components/empty/demo/Image.vue index d62787594..3eb0b1615 100644 --- a/packages/components/empty/demo/Image.vue +++ b/packages/components/empty/demo/Image.vue @@ -1,9 +1,3 @@ diff --git a/packages/components/empty/demo/Simple.md b/packages/components/empty/demo/Simple.md new file mode 100644 index 000000000..98f25827d --- /dev/null +++ b/packages/components/empty/demo/Simple.md @@ -0,0 +1,10 @@ +--- +order: 1 +title: + zh: 简易模式 + en: Simple +--- + +## zh + +可以通过设置 `simple` 使用简易模式 diff --git a/packages/components/empty/demo/Simple.vue b/packages/components/empty/demo/Simple.vue new file mode 100644 index 000000000..1de143384 --- /dev/null +++ b/packages/components/empty/demo/Simple.vue @@ -0,0 +1,3 @@ + diff --git a/packages/components/empty/docs/Api.zh.md b/packages/components/empty/docs/Api.zh.md index b7985c8c6..ba8d4074a 100644 --- a/packages/components/empty/docs/Api.zh.md +++ b/packages/components/empty/docs/Api.zh.md @@ -6,12 +6,14 @@ | 名称 | 说明 | 类型 | 默认值 | 全局配置 | 备注 | | --- | --- | --- | --- | --- | --- | -| `description` | 自定义描述内容 | `string \| #description` | - | - | - | -| `icon` | 设置自定义图标 | `string` | `empty` | ✅ | - | -| `image` | 设置自定义图片地址 | `string \| #image` | - | ✅ | 优先级高于 `icon` | +| `description` | 自定义描述内容 | `string` | - | - | - | +| `image` | 自定义图片 | `string \| VNode` | - | ✅ | - | +| `simple` | 简易模式 | `boolean` | - | - | - | #### EmptySlots | 名称 | 说明 | 参数类型 | 备注 | | --- | --- | --- | --- | | `default` | 自定义 `content` 区域内容 | - | - | +| `description` | 自定义 `description` 区域内容 | - | - | +| `image` | 自定义图片 | - | - | diff --git a/packages/components/empty/docs/Design.zh.md b/packages/components/empty/docs/Design.zh.md index 2132a44d7..491f03f14 100644 --- a/packages/components/empty/docs/Design.zh.md +++ b/packages/components/empty/docs/Design.zh.md @@ -1,7 +1,3 @@ -## 组件定义 - -空状态通常用于当前的内容区域（页面、区块、组件、单数据）没有数据展示时，帮助用户明确当前状态，引导摆脱空状态。 - ## 使用场景 在表格、列表页中没有数据时，显示空状态 @@ -12,7 +8,7 @@ | --- | --- | | 图标（必选） | 用于图示化表达无数据的含义 | | 暂无数据说明（必选） | 用于说明当前功能的没有数据，通用为“暂无数据”，可根据场景功能自行定义其他文案 | -| 副标题说明（可选） | 可用户说明当前状态会对使用产生什么影响，应该如何继续操作 | +| 补充说明文字（可选） | 可用户说明当前状态会对使用产生什么影响，应该如何继续操作 | | 引导按钮（可选） | 引导用户进入管理的操作流程 | ## 组件类型 @@ -21,5 +17,5 @@ | 名称 | 说明 | | --- | --- | -| 全局空态 | 用于整个页面空态 | -| 局部空态 | 用于单个列表卡片、弹窗、穿梭框中的空态 | +| 默认类型 | 用于整个页面空状态 | +| 简易类型 | 用于单个下拉菜单、弹窗、穿梭框中的空状态 | diff --git a/packages/components/empty/docs/Index.zh.md b/packages/components/empty/docs/Index.zh.md index 992b6f971..85fc05093 100644 --- a/packages/components/empty/docs/Index.zh.md +++ b/packages/components/empty/docs/Index.zh.md @@ -3,7 +3,7 @@ category: components type: 数据展示 title: Empty subtitle: 空数据 -cover: -cols: 1 +theme: true --- +空状态通常用于当前的内容区域（页面、区块、组件、单数据）没有数据展示时，帮助用户明确当前状态，引导摆脱空状态。 diff --git a/packages/components/empty/docs/Theme.zh.md b/packages/components/empty/docs/Theme.zh.md index e5195e14e..96e17051e 100644 --- a/packages/components/empty/docs/Theme.zh.md +++ b/packages/components/empty/docs/Theme.zh.md @@ -1,15 +1,6 @@ | 名称 | default | seer | 备注 | | --- | --- | --- | --- | -| `@empty-line-height` | `@line-height-base` | - | - | -| `@empty-margin` | `@spacing-lg 0` | - | - | -| `@empty-image-margin-bottom` | `@spacing-sm` | - | - | -| `@empty-image-icon-opacity` | `0.3` | - | - | -| `@empty-image-icon-font-size` | `64px` | `48px` | - | -| `@empty-image-icon-color` | `@text-color` | - | - | -| `@empty-description-opacity` | `1` | `1` | - | -| `@empty-description-margin` | `0` | - | - | -| `@empty-description-color` | `@color-graphite-d10` | `@color-graphite-d10` | - | -| `@empty-description-font-size` | `@font-size-md` | `@font-size-sm` | - | -| `@empty-content-margin-top` | `@spacing-lg` | - | - | -| `@empty-content-color` | `@color-graphite` | `@color-graphite` | - | -| `@empty-content-font-size` | `@font-size-md` | `@font-size-sm` | - | +| `@empty-color` | `var(--ix-text-color-info)` | - | - | +| `@empty-font-size` | `var(--ix-font-size-md)` | `var(--ix-font-size-sm)` | - | +| `@empty-description-color` | `var(--ix-text-color-secondary)` | - | - | +| `@empty-description-font-size` | `var(--ix-font-size-lg)` | - | - | diff --git a/packages/components/empty/src/Empty.tsx b/packages/components/empty/src/Empty.tsx index 42bdb93ec..5843ece80 100644 --- a/packages/components/empty/src/Empty.tsx +++ b/packages/components/empty/src/Empty.tsx @@ -5,13 +5,14 @@ * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE */ -import { type Slots, computed, defineComponent } from 'vue' +import { type Slots, computed, defineComponent, normalizeClass } from 'vue' import { isString } from 'lodash-es' import { type EmptyConfig, useGlobalConfig } from '@idux/components/config' import { IxIcon } from '@idux/components/icon' +import { EmptyDefaultImage, EmptySimpleImage } from './Images' import { type EmptyProps, emptyProps } from './types' export default defineComponent({ @@ -22,13 +23,21 @@ export default defineComponent({ const locale = useGlobalConfig('locale') const mergedPrefixCls = computed(() => `${common.prefixCls}-empty`) const config = useGlobalConfig('empty') - const description = computed(() => props.description ?? locale.empty.description) + const mergedDescription = computed(() => props.description ?? locale.empty.description) + + const classes = computed(() => { + const prefixCls = mergedPrefixCls.value + return normalizeClass({ + [prefixCls]: true, + [`${prefixCls}-simple`]: props.simple, + }) + }) return () => { const prefixCls = mergedPrefixCls.value - const descriptionNode = slots.description ? slots.description() : description.value + const descriptionNode = slots.description ? slots.description() : mergedDescription.value return ( -
+
{renderImage(props, slots, config)}
{descriptionNode &&
{descriptionNode}
} {slots.default &&
{slots.default()}
} @@ -40,7 +49,7 @@ export default defineComponent({ function renderImage(props: EmptyProps, slots: Slots, config: EmptyConfig) { if (slots.image) { - return slots.image() + return slots.image(props) } const image = props.image ?? config.image if (image) { @@ -51,5 +60,9 @@ function renderImage(props: EmptyProps, slots: Slots, config: EmptyConfig) { } const icon = props.icon ?? config.icon - return isString(icon) ? : icon + if (icon) { + return isString(icon) ? : icon + } + + return props.simple ? : } diff --git a/packages/components/empty/src/Images.tsx b/packages/components/empty/src/Images.tsx new file mode 100644 index 000000000..8f656c5eb --- /dev/null +++ b/packages/components/empty/src/Images.tsx @@ -0,0 +1,214 @@ +/** + * @license + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE + */ + +import { type FunctionalComponent } from 'vue' + +export const EmptySimpleImage: FunctionalComponent = () => ( + + + + + + + + + + +) + +export const EmptyDefaultImage: FunctionalComponent = () => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +) diff --git a/packages/components/empty/src/types.ts b/packages/components/empty/src/types.ts index 49929ea8a..a6fa0336f 100644 --- a/packages/components/empty/src/types.ts +++ b/packages/components/empty/src/types.ts @@ -10,8 +10,12 @@ import type { DefineComponent, HTMLAttributes, PropType, VNode } from 'vue' export const emptyProps = { description: String, + /** + * @deprecated + */ icon: [String, Object] as PropType, image: [String, Object] as PropType, + simple: Boolean, } as const export type EmptyProps = ExtractInnerPropTypes diff --git a/packages/components/empty/style/index.less b/packages/components/empty/style/index.less index 6ecb7a4dc..1bf783429 100644 --- a/packages/components/empty/style/index.less +++ b/packages/components/empty/style/index.less @@ -1,36 +1,43 @@ @import '../../style/mixins/reset.less'; .@{empty-prefix} { - .reset-component(); + .reset-component-new(); + color: @empty-color; + font-size: @empty-font-size; + line-height: calc(@empty-font-size + var(--ix-line-height-gutter)); + margin: var(--ix-spacing-xl) var(--ix-spacing-lg); text-align: center; - line-height: @empty-line-height; - margin: @empty-margin; &-image { - margin-bottom: @empty-image-margin-bottom; + height: 100%; img { height: 100%; } - .@{icon-prefix} { - opacity: @empty-image-icon-opacity; - font-size: @empty-image-icon-font-size; - color: @empty-image-icon-color; + svg { + height: 100%; + margin: auto; } } &-description { - opacity: @empty-description-opacity; - margin: @empty-description-margin; color: @empty-description-color; font-size: @empty-description-font-size; + line-height: calc(@empty-description-font-size + var(--ix-line-height-gutter)); } &-content { - margin-top: @empty-content-margin-top; - color: @empty-content-color; - font-size: @empty-content-font-size; + margin-top: var(--ix-spacing-sm); + } + + &-simple { + margin: var(--ix-spacing-sm) 0; + } + + &-simple &-description { + font-size: inherit; + line-height: inherit; } } diff --git a/packages/components/empty/style/themes/default.variable.less b/packages/components/empty/style/themes/default.variable.less index 2dfd44a13..7d13a0bef 100644 --- a/packages/components/empty/style/themes/default.variable.less +++ b/packages/components/empty/style/themes/default.variable.less @@ -1,16 +1,5 @@ -@empty-line-height: @line-height-base; -@empty-margin: @spacing-lg 0; +@empty-color: var(--ix-text-color-info); +@empty-font-size: var(--ix-font-size-md); -@empty-image-margin-bottom: @spacing-sm; -@empty-image-icon-opacity: 0.3; -@empty-image-icon-font-size: 64px; -@empty-image-icon-color: @text-color; - -@empty-description-opacity: 1; -@empty-description-margin: 0; -@empty-description-color: @color-graphite-d10; -@empty-description-font-size: @font-size-md; - -@empty-content-margin-top: @spacing-lg; -@empty-content-color: @color-graphite; -@empty-content-font-size: @font-size-md; +@empty-description-color: var(--ix-text-color-secondary); +@empty-description-font-size: var(--ix-font-size-lg); diff --git a/packages/components/empty/style/themes/seer.variable.less b/packages/components/empty/style/themes/seer.variable.less index 52f2e6cd1..2e2e308bc 100644 --- a/packages/components/empty/style/themes/seer.variable.less +++ b/packages/components/empty/style/themes/seer.variable.less @@ -1,10 +1,3 @@ @import './default.variable.less'; -@empty-description-opacity: 1; -@empty-description-color: @color-graphite-d10; -@empty-description-font-size: @font-size-sm; - -@empty-content-color: @color-graphite; -@empty-content-font-size: @font-size-sm; - -@empty-image-icon-font-size: 48px; +@empty-font-size: var(--ix-font-size-sm); diff --git a/packages/components/list/docs/Api.zh.md b/packages/components/list/docs/Api.zh.md index 023a0f6e7..a9c6619e8 100644 --- a/packages/components/list/docs/Api.zh.md +++ b/packages/components/list/docs/Api.zh.md @@ -8,7 +8,7 @@ | --- | --- | --- | --- | --- | --- | | `header` | 列表头部 | `string \| slot` | - | - | - | | `footer` | 列表底部 | `string \| slot` | - | - | - | -| `empty` | 空状态 | `string \| slot` | - | - | - | +| `empty` | 空状态 | `'default' \| 'simple' \| EmptyProps` | `'default'` | - | - | | `borderless` | 是否无边框 | `boolean` | true | ✅ | - | | `loading` | 加载状态 | `boolean \| SpinProps` | false | - | SpinProps请参照 spin 组件 | | `size` | 大小 | `'lg' \| 'md' \| 'sm'` | `'md'` | ✅ | - | diff --git a/packages/components/list/src/List.tsx b/packages/components/list/src/List.tsx index 5c6bbdb2d..c71f5c6fc 100644 --- a/packages/components/list/src/List.tsx +++ b/packages/components/list/src/List.tsx @@ -8,9 +8,8 @@ import { computed, defineComponent, normalizeClass, provide } from 'vue' import { getFirstValidNode } from '@idux/cdk/utils' -import { IxButton } from '@idux/components/button' +import { ɵEmpty } from '@idux/components/_private/empty' import { useGlobalConfig } from '@idux/components/config' -import { IxEmpty } from '@idux/components/empty' import { IxRow } from '@idux/components/grid' import { IxSpin } from '@idux/components/spin' @@ -19,11 +18,6 @@ import { ListProps, listProps } from './types' export default defineComponent({ name: 'IxList', - components: { - IxSpin, - IxButton, - IxEmpty, - }, props: listProps, setup(props: ListProps, { slots }) { const common = useGlobalConfig('common') @@ -59,9 +53,8 @@ export default defineComponent({ return () => { const header = props.header ?? slots.header?.() const footer = props.footer ?? slots.footer?.() - const content = getFirstValidNode(slots.default?.()) - ? slots.default?.() - : slots.empty?.() ?? + const children = slots.default ? slots.default() : [] + const content = getFirstValidNode(children) ? children : <ɵEmpty v-slots={slots} empty={props.empty} /> const renderContent = () => { if (props.grid) { diff --git a/packages/components/list/src/types.ts b/packages/components/list/src/types.ts index ddcb1bbd2..1b07c511f 100644 --- a/packages/components/list/src/types.ts +++ b/packages/components/list/src/types.ts @@ -6,6 +6,7 @@ */ import type { ExtractInnerPropTypes, ExtractPublicPropTypes } from '@idux/cdk/utils' +import type { EmptyProps } from '@idux/components/empty' import type { ColProps, RowProps } from '@idux/components/grid' import type { SpinProps } from '@idux/components/spin' import type { DefineComponent, HTMLAttributes, PropType } from 'vue' @@ -19,7 +20,7 @@ export interface ListGridProps extends RowProps, ColPropsType { export const listProps = { header: String, footer: String, - empty: String, + empty: { type: [String, Object] as PropType<'default' | 'simple' | EmptyProps>, default: 'default' }, borderless: { type: Boolean, default: undefined, diff --git a/packages/components/select/__tests__/select.spec.ts b/packages/components/select/__tests__/select.spec.ts index 5ec7be5a3..ce7d76833 100644 --- a/packages/components/select/__tests__/select.spec.ts +++ b/packages/components/select/__tests__/select.spec.ts @@ -242,13 +242,8 @@ describe('Select', () => { }) test('empty work', async () => { - let emptyText = 'empty text' - const wrapper = SelectMount({ props: { open: true, empty: emptyText, dataSource: [] } }) - - expect(wrapper.findComponent(Panel).find('.ix-empty-description').text()).toBe(emptyText) - - emptyText = 'empty text 2' - await wrapper.setProps({ empty: { description: emptyText } }) + const emptyText = 'empty text' + const wrapper = SelectMount({ props: { open: true, empty: { description: emptyText }, dataSource: [] } }) expect(wrapper.findComponent(Panel).find('.ix-empty-description').text()).toBe(emptyText) }) diff --git a/packages/components/select/docs/Api.zh.md b/packages/components/select/docs/Api.zh.md index 2d6a0977f..6bed48f09 100644 --- a/packages/components/select/docs/Api.zh.md +++ b/packages/components/select/docs/Api.zh.md @@ -19,7 +19,7 @@ | `customAdditional` | 自定义下拉选项的额外属性 | `SelectCustomAdditional` | - | - | 例如 `class`, 或者原生事件 | | `dataSource` | 选项数据源 | `SelectData[]` | - | - | 优先级高于 `default` 插槽, 性能会更好 | | `disabled` | 是否禁用状态 | `boolean` | `false` | - | 使用 `control` 时，此配置无效 | -| `empty` | 自定义当下拉列表为空时显示的内容 | `string \| EmptyProps \| #empty` | - | - | - | +| `empty` | 自定义当下拉列表为空时显示的内容 | `'default' \| 'simple' \| EmptyProps` | `'simple'` | - | - | | `getKey` | 获取数据的唯一标识 | `string \| (data: SelectData) => VKey` | `key` | ✅ | 为了兼容之前的版本，默认值也会支持 `value` | | `labelKey` | 选项 label 的 key | `string` | `label` | ✅ | 仅在使用 `dataSource` 时有效 | | `maxLabel` | 最多显示多少个标签，响应式模式会对性能产生损耗 | `number \| 'responsive'` | - | - | - | @@ -75,12 +75,12 @@ export type SelectSearchFn = (data: SelectData, searchValue: string) => boolean | 名称 | 说明 | 参数类型 | 备注 | | -- | -- | -- | -- | -| `default` | 选项内容 | - | - | -| `selectedItem` | 自定义选中项 | `data: SelectedItemProps` | 使用该插槽后`selectedLabel`将无效 | -| `selectedLabel` | 自定义选中的标签 | `data: SelectOption` | | -| `overflowedLabel` | 自定义超出最多显示多少个标签的内容 | `data: SelectOption[]` | 参数为超出的数组 | -| `optionLabel` | 自定义选项的文本 | `data: SelectOption` | - | -| `optionGroupLabel` | 自定义选项组的文本 | `data: SelectOptionGroup` | - | +| `empty` | 自定义空状态 | - | - | +| `selectedItem` | 自定义选中项 | `data: SelectedItemProps` | 使用该插槽后`selectedLabel`将无效 | +| `selectedLabel` | 自定义选中的标签 | `data: SelectOption` | | +| `overflowedLabel` | 自定义超出最多显示多少个标签的内容 | `data: SelectOption[]` | 参数为超出的数组 | +| `optionLabel` | 自定义选项的文本 | `data: SelectOption` | - | +| `optionGroupLabel` | 自定义选项组的文本 | `data: SelectOptionGroup` | - | ```ts interface SelectedItemProps { @@ -113,7 +113,7 @@ interface SelectedItemProps { | `childrenKey` | 分组选项的 key | `string` | `children` | ✅ | 仅在使用 `dataSource` 时有效 | | `customAdditional` | 自定义下拉选项的额外属性 | `SelectCustomAdditional` | - | - | 例如 `class`, 或者原生事件 | | `dataSource` | 选项数据源 | `SelectData[]` | - | - | IxSelectPanel仅支持使用dataSource，不支持通过插槽配置 | -| `empty` | 自定义当下拉列表为空时显示的内容 | `string \| EmptyProps \| #empty` | - | - | - | +| `empty` | 自定义当下拉列表为空时显示的内容 | `'default' \| 'simple' \| EmptyProps` | `'simple'` | - | - | | `getKey` | 获取数据的唯一标识 | `string \| (data: SelectData) => VKey` | `key` | ✅ | 为了兼容之前的版本，默认值也会支持 `value` | | `labelKey` | 选项 label 的 key | `string` | `label` | ✅ | 仅在使用 `dataSource` 时有效 | | `multiple` | 多选模式 | `boolean` | `false` | - | - | @@ -123,6 +123,12 @@ interface SelectedItemProps { | `onScrolledChange` | 滚动的位置发生变化 | `(startIndex: number, endIndex: number, visibleData: SelectData[]) => void` | - | - | 仅 `virtual` 模式下可用 | | `onScrolledBottom` | 滚动到底部时触发 | `() => void` | - | - | 仅 `virtual` 模式下可用 | +#### SelectPanelSlots + +| 名称 | 说明 | 参数类型 | 备注 | +| -- | -- | -- | -- | +| `empty` | 自定义空状态 | - | - | + #### SelectPanelMethods | 名称 | 说明 | 参数类型 | 备注 | diff --git a/packages/components/select/src/types.ts b/packages/components/select/src/types.ts index 5b4f76d31..0e619ce6d 100644 --- a/packages/components/select/src/types.ts +++ b/packages/components/select/src/types.ts @@ -22,7 +22,7 @@ export const selectPanelProps = { customAdditional: { type: Function as PropType, default: undefined }, dataSource: { type: Array as PropType, default: undefined }, - empty: { type: [String, Object] as PropType, default: undefined }, + empty: { type: [String, Object] as PropType<'default' | 'simple' | EmptyProps>, default: 'simple' }, getKey: { type: [String, Function] as PropType) => any)>, default: undefined }, labelKey: { type: String, default: undefined }, multiple: { type: Boolean, default: false }, @@ -58,7 +58,7 @@ export const selectProps = { customAdditional: { type: Object as PropType, default: undefined }, dataSource: { type: Array as PropType, default: undefined }, disabled: { type: Boolean, default: false }, - empty: { type: [String, Object] as PropType, default: undefined }, + empty: { type: [String, Object] as PropType<'default' | 'simple' | EmptyProps>, default: 'simple' }, getKey: { type: [String, Function] as PropType VKey)>, default: undefined }, labelKey: { type: String, default: undefined }, maxLabel: { type: [Number, String] as PropType, default: Number.MAX_SAFE_INTEGER }, diff --git a/packages/components/table/__tests__/table.spec.ts b/packages/components/table/__tests__/table.spec.ts index b82deec37..99ab70685 100644 --- a/packages/components/table/__tests__/table.spec.ts +++ b/packages/components/table/__tests__/table.spec.ts @@ -240,13 +240,8 @@ describe('Table', () => { }) test('empty work', async () => { - let emptyText = 'empty text' - const wrapper = TableMount({ props: { empty: emptyText, dataSource: [] } }) - - expect(wrapper.find('tbody').find('.ix-empty-description').text()).toBe(emptyText) - - emptyText = 'empty text 2' - await wrapper.setProps({ empty: { description: emptyText } }) + const emptyText = 'empty text' + const wrapper = TableMount({ props: { empty: { description: emptyText }, dataSource: [] } }) expect(wrapper.find('tbody').find('.ix-empty-description').text()).toBe(emptyText) }) diff --git a/packages/components/table/docs/Api.zh.md b/packages/components/table/docs/Api.zh.md index eb90d09d9..8af1d5171 100644 --- a/packages/components/table/docs/Api.zh.md +++ b/packages/components/table/docs/Api.zh.md @@ -15,7 +15,7 @@ | `customAdditional` | 自定义表格行和单元格的额外属性 | `TableCustomAdditional` | - | - | 参见[TableCustomAdditional](#TableCustomAdditional) | | `dataSource` | 表格数据数组 | `object[]` | - | - | - | | `ellipsis` | 超过宽度将自动省略 | `boolean \| { title: boolean }` | `false` | - | `title` 为 `false` 时, 不显示原生的 `title` | -| `empty` | `dataSource` 为空时默认渲染的内容 | `string \| EmptyProps \| #empty` | - | - | - | +| `empty` | `dataSource` 为空时默认渲染的内容 | `'default' \| 'simple' \| EmptyProps` | `'default'` | - | - | | `emptyCell` | 单元格数据为空时默认渲染的内容 | `string \| ((options: TableEmptyCellOptions) => VNodeChild) \| #emptyCell='TableEmptyCellOptions'` | - | ✅ | 仅支持普通列，且数据为 `undefined \| null \| ''` 时生效 | | `getKey` | 获取数据的唯一标识 | `string \| (record: any) => VKey` | `key` | ✅ | - | | `headless` | 是否隐藏表头 | `boolean` | `false` | - |- | @@ -171,6 +171,7 @@ export type TablePaginationPosition = 'topStart' | 'top' | 'topEnd' | 'bottomSta | 名称 | 说明 | 参数类型 | 备注 | | --- | --- | --- | --- | | `alert` | 表格提示 | - | - | +| `empty` | 自定义空状态 | - | - | | `footer` | 表格尾部 | - | - | | `header` | 表格头部 | - | - | | `summary` | 表格总结栏 | - | - | diff --git a/packages/components/table/src/types.ts b/packages/components/table/src/types.ts index 293c5124b..f5c35894c 100644 --- a/packages/components/table/src/types.ts +++ b/packages/components/table/src/types.ts @@ -32,7 +32,7 @@ export const tableProps = { customTag: { type: Object as PropType, default: undefined }, dataSource: { type: Array as PropType, default: () => [] }, ellipsis: { type: [Boolean, Object] as PropType, default: false }, - empty: { type: [String, Object] as PropType, default: undefined }, + empty: { type: [String, Object] as PropType<'default' | 'simple' | EmptyProps>, default: 'default' }, emptyCell: { type: [String, Function] as PropType VNodeChild)>, default: undefined, diff --git a/packages/components/transfer/__tests__/__snapshots__/transfer.spec.ts.snap b/packages/components/transfer/__tests__/__snapshots__/transfer.spec.ts.snap index 7fa2cac2c..eadffed9b 100644 --- a/packages/components/transfer/__tests__/__snapshots__/transfer.spec.ts.snap +++ b/packages/components/transfer/__tests__/__snapshots__/transfer.spec.ts.snap @@ -116,8 +116,17 @@ exports[`Transfer > render work 1`] = `
-
-
+
+
+ + + + + + + + +
暂无数据
diff --git a/packages/components/transfer/__tests__/__snapshots__/transferSlots.spec.ts.snap b/packages/components/transfer/__tests__/__snapshots__/transferSlots.spec.ts.snap index ae728bbb7..a10a385d4 100644 --- a/packages/components/transfer/__tests__/__snapshots__/transferSlots.spec.ts.snap +++ b/packages/components/transfer/__tests__/__snapshots__/transferSlots.spec.ts.snap @@ -717,16 +717,54 @@ exports[`Transfer > clearIcon slot work 1`] = ` class="ix-transfer-body-empty-wrapper" >
- + + + + + + + + + +
footer slot work 1`] = ` class="ix-transfer-body-empty-wrapper" >
- + + + + + + + + + +
headerLabel slot work 1`] = ` class="ix-transfer-body-empty-wrapper" >
- + + + + + + + + + +
label slot work 1`] = ` class="ix-transfer-body-empty-wrapper" >
- + + + + + + + + + +
string \| number` | - | - | 默认取数据的 `key` 属性 | | `mode` | 穿梭框模式 | `'default' \| 'immediate'` | `'default'` | - | `'immediate'` 模式为勾选即触发穿梭，不展示穿梭操作按钮 | | `pagination` | 数据列表分页配置 | `boolean \| TransferPaginationProps` | `false` | ✅ | 仅使用默认列表底部时可用 | diff --git a/packages/components/transfer/src/types.ts b/packages/components/transfer/src/types.ts index 7549e8b1b..660d8e4db 100644 --- a/packages/components/transfer/src/types.ts +++ b/packages/components/transfer/src/types.ts @@ -139,7 +139,7 @@ export const transferProps = { type: Boolean, default: false, }, - empty: [String, Object] as PropType, + empty: { type: [String, Object] as PropType<'default' | 'simple' | EmptyProps>, default: 'simple' }, getKey: [String, Function] as PropType) => any)>, mode: { type: String as PropType, diff --git a/packages/components/tree-select/__tests__/treeSelect.spec.ts b/packages/components/tree-select/__tests__/treeSelect.spec.ts index f8311bfa2..369ef5a83 100644 --- a/packages/components/tree-select/__tests__/treeSelect.spec.ts +++ b/packages/components/tree-select/__tests__/treeSelect.spec.ts @@ -462,13 +462,8 @@ describe('TreeSelect', () => { } test('empty work', async () => { - let emptyText = 'empty text' - const wrapper = TreeSelectMount({ props: { open: true, empty: emptyText, dataSource: [] } }) - - expect(wrapper.findComponent(Content).find('.ix-empty-description').text()).toBe(emptyText) - - emptyText = 'empty text 2' - await wrapper.setProps({ empty: { description: emptyText } }) + const emptyText = 'empty text' + const wrapper = TreeSelectMount({ props: { open: true, empty: { description: emptyText }, dataSource: [] } }) expect(wrapper.findComponent(Content).find('.ix-empty-description').text()).toBe(emptyText) }) diff --git a/packages/components/tree-select/docs/Api.zh.md b/packages/components/tree-select/docs/Api.zh.md index 965998fbe..60c96a7be 100644 --- a/packages/components/tree-select/docs/Api.zh.md +++ b/packages/components/tree-select/docs/Api.zh.md @@ -24,7 +24,7 @@ | `draggable` | 是否允许拖拽节点 | `boolean` | `false` | - | - | | `draggableIcon` | 拖拽节点图标 | `string \| #draggableIcon` | `holder` | - | - | | `droppable` | 是否允许放置节点,参见[TreeDroppable](/components/tree/zh#TreeDroppable) | `TreeDroppable` | - | - | - | -| `empty` | 空数据时的内容 | `string \|` [EmptyProps](/components/empty/zh#EmptyProps) | - | - | - | +| `empty` | 空数据时的内容 | `'default' \| 'simple' \| [EmptyProps](/components/empty/zh#EmptyProps)` | `'simple'` | - | - | | `expandIcon` | 树组件中的展开图标 | `string \| [string, string] \| #expandIcon="{key: VKey, expanded: boolean, node: TreeNode}"` | `right` | ✅ | 当为数组时表示[`展开时图标`,`未展开时图标`] | | `getKey` | 获取数据的唯一标识 | `string \| (record: any) => VKey` | `key` | ✅ | - | | `labelKey` | 替代[TreeSelectNode](#TreeSelectNode)中的`label`字段 | `string` | `label` | ✅ | - diff --git a/packages/components/tree-select/src/types.ts b/packages/components/tree-select/src/types.ts index 4a822cb50..4573d5b38 100644 --- a/packages/components/tree-select/src/types.ts +++ b/packages/components/tree-select/src/types.ts @@ -38,7 +38,7 @@ export const treeSelectProps = { draggable: { type: Boolean, default: false }, draggableIcon: { type: String, default: undefined }, droppable: { type: Function as PropType, default: undefined }, - empty: { type: [String, Object] as PropType, default: undefined }, + empty: { type: [String, Object] as PropType<'default' | 'simple' | EmptyProps>, default: 'simple' }, expandIcon: { type: [String, Array] as PropType, default: undefined }, getKey: { type: [String, Function] as PropType) => any)>, default: undefined }, labelKey: { type: String, default: undefined }, diff --git a/packages/components/tree/__tests__/tree.spec.ts b/packages/components/tree/__tests__/tree.spec.ts index 51e5e41b9..f91fc870c 100644 --- a/packages/components/tree/__tests__/tree.spec.ts +++ b/packages/components/tree/__tests__/tree.spec.ts @@ -659,17 +659,12 @@ describe('Tree', () => { }) test('empty work', async () => { - let emptyDescription = 'This is an empty tree' + const emptyDescription = 'This is an empty tree' const wrapper = TreeMount({ - props: { dataSource: [], empty: emptyDescription }, + props: { dataSource: [], empty: { description: emptyDescription } }, }) expect(wrapper.find('.ix-empty').text()).toBe(emptyDescription) - - emptyDescription = 'This is an empty tree2' - await wrapper.setProps({ empty: { description: emptyDescription } }) - - expect(wrapper.find('.ix-empty').text()).toBe(emptyDescription) }) test('empty slot work', async () => { diff --git a/packages/components/tree/docs/Api.zh.md b/packages/components/tree/docs/Api.zh.md index db57ed197..9f0461047 100644 --- a/packages/components/tree/docs/Api.zh.md +++ b/packages/components/tree/docs/Api.zh.md @@ -22,7 +22,7 @@ | `draggable` | 是否允许拖拽节点 | `boolean` | `false` | - | - | | `draggableIcon` | 拖拽节点图标 | `string \| #draggableIcon` | `holder` | ✅ | - | | `droppable` | 是否允许放置节点,参见[TreeDroppable](#TreeDroppable) | `TreeDroppable` | - | - | - | -| `empty` | 空数据时的内容 | `string \| EmptyProps \| #empty` | - | - | - | +| `empty` | 空数据时的内容 | `'default' \| 'simple' \| EmptyProps` | `'simple'` | - | - | | `expandIcon` | 展开图标 | `string \| [string, string] \| #expandIcon="{key: VKey, expanded: boolean, node: TreeNode}"` | `right` | ✅ | 当为数组时表示[`展开时图标`,`未展开时图标`] | | `getKey` | 获取数据的唯一标识 | `string \| (record: any) => VKey` | `key` | ✅ | - | | `height` | 设置虚拟滚动容器高度 | `number` | - | - | - | @@ -89,6 +89,7 @@ export type TreeDropType = 'before' | 'inside' | 'after' | 名称 | 说明 | 参数类型 | 备注 | | --- | --- | --- | --- | +| `empty` | 自定义空状态 | - | - | | `label` | 自定义节点的文本 | `{node: TreeNode}` | - | | `prefix` | 自定义节点的前缀图标 | `{key: VKey, selected: boolean, node: TreeNode}` | - | | `suffix` | 自定义节点的后缀图标 | `{key: VKey, selected: boolean, node: TreeNode}` | - | diff --git a/packages/components/tree/src/types.ts b/packages/components/tree/src/types.ts index 7986dfe52..07238d201 100644 --- a/packages/components/tree/src/types.ts +++ b/packages/components/tree/src/types.ts @@ -53,7 +53,7 @@ export const treeProps = { }, draggableIcon: { type: String, default: undefined }, droppable: Function as PropType, - empty: [String, Object] as PropType, + empty: { type: [String, Object] as PropType<'default' | 'simple' | EmptyProps>, default: 'simple' }, expandIcon: { type: [String, Array] as PropType, default: undefined }, getKey: { type: [String, Function] as PropType) => any)>, default: undefined }, height: Number, diff --git a/packages/pro/table/src/types.ts b/packages/pro/table/src/types.ts index 1aaf7f220..2ecb8d47a 100644 --- a/packages/pro/table/src/types.ts +++ b/packages/pro/table/src/types.ts @@ -52,7 +52,7 @@ export const proTableProps = { dataSource: { type: Array as PropType, default: () => [] }, editable: { type: Boolean, default: false }, ellipsis: { type: [Boolean, Object] as PropType, default: false }, - empty: { type: [String, Object] as PropType, default: undefined }, + empty: { type: [String, Object] as PropType<'default' | 'simple' | EmptyProps>, default: 'default' }, getKey: { type: [String, Function] as PropType any)>, default: undefined }, header: { type: [String, Object] as PropType, default: undefined }, headless: { type: Boolean, default: undefined }, diff --git a/packages/pro/transfer/docs/Api.zh.md b/packages/pro/transfer/docs/Api.zh.md index b5ddca46d..12e4f7dc9 100644 --- a/packages/pro/transfer/docs/Api.zh.md +++ b/packages/pro/transfer/docs/Api.zh.md @@ -16,7 +16,7 @@ | `dataSource` | 源数据数组 | `TransferData[]` | `[]` | - | - | | `disabled` | 是否禁用穿梭框 | `boolean` | `false` | - | - | | `defaultTargetData` | 初始默认目标列表数据 | `TransferData` | - | - | 仅用于设置初始数据，不可响应式变更 | -| `empty` | 空状态的配置 | `string \| EmptyProps` | - | - | - | +| `empty` | 空状态的配置 | `'default' \| 'simple' \| EmptyProps` | `'simple'` | - | - | | `flatTargetData` | 是否平展开已选树数据 | `boolean \| 'all'` | `false` | - | 平展开后仅将树的叶子节点数据以列表展示，仅在 `type` 为 `'tree'` 下生效 | | `getKey` | 数据项 `key` 的取值 | `string \| (item: unknown) => string \| number` | - | - | 默认取数据的 `key` 属性 | | `mode` | 穿梭框模式 | `'default' \| 'immediate'` | `'default'` | - | `'immediate'` 模式为勾选即触发穿梭，不展示穿梭操作按钮 | @@ -87,7 +87,7 @@ export type ProTransferTreeProps = Pick< | 名称 | 说明 | 参数类型 | 备注 | | --- | --- | --- | --- | | `clearIcon` | 清除按钮 | - | - | -| `empty` | 穿梭框列表空状态 | `EmptyProps` | 详情参考基础穿梭框组件 | +| `empty` | 穿梭框列表空状态 | - | 详情参考基础穿梭框组件 | | `header` | 穿梭框列表头部 | `TransferBindings & { isSource: boolean }` | 详情参考基础穿梭框组件 | | `footer` | 穿梭框列表底部 | `TransferBindings & { isSource: boolean }` | 详情参考基础穿梭框组件 | | `headerLabel` | 穿梭框列表头部标签 | `{ data: TransferData[], isSource: boolean }` | 详情参考基础穿梭框组件 | diff --git a/packages/pro/transfer/src/types.ts b/packages/pro/transfer/src/types.ts index 35b003a62..c492bb4df 100644 --- a/packages/pro/transfer/src/types.ts +++ b/packages/pro/transfer/src/types.ts @@ -83,7 +83,7 @@ export const proTransferProps = { default: undefined, }, clearIcon: String as PropType, - empty: [String, Object] as PropType, + empty: { type: [String, Object] as PropType<'default' | 'simple' | EmptyProps>, default: 'simple' }, pagination: [Boolean, Object] as PropType, mode: { type: String as PropType, diff --git a/packages/pro/tree/docs/Api.zh.md b/packages/pro/tree/docs/Api.zh.md index 44f21ebf8..e79bd132e 100644 --- a/packages/pro/tree/docs/Api.zh.md +++ b/packages/pro/tree/docs/Api.zh.md @@ -25,7 +25,7 @@ | `draggable` | 是否允许拖拽节点 | `boolean` | `false` | - | - | | `draggableIcon` | 拖拽节点图标 | `string \| #draggableIcon` | `holder` | - | - | | `droppable` | 是否允许放置节点,参见[TreeDroppable](#TreeDroppable) | `TreeDroppable` | - | - | - | -| `empty` | 空数据时的内容 | `string \| EmptyProps \| #empty` | - | - | - | +| `empty` | 空数据时的内容 | `'default' \| 'simple' \| EmptyProps` | `'simple'` | - | - | | `expandIcon` | 树节点展开图标 | `string \| [string, string] \| #expandIcon="{key: VKey, expanded: boolean, node: TreeNode}"` | `['minus-square', 'plus-square']` | - | 当为数组时表示[`展开时图标`,`未展开时图标`] | | `header` | 树的头部 | `string \| HeaderProps \| #header="{expanded, onClick}"` | - | - | - | | `height` | 设置虚拟滚动容器高度 | `number` | - | - | - | diff --git a/packages/pro/tree/src/types.ts b/packages/pro/tree/src/types.ts index 06384d710..1a22cc550 100644 --- a/packages/pro/tree/src/types.ts +++ b/packages/pro/tree/src/types.ts @@ -40,7 +40,7 @@ export const proTreeProps = { collapseIcon: { type: Array as PropType, default: undefined }, dataSource: { type: Array as PropType, default: undefined }, disabled: { type: Function as PropType<(node: TreeNode) => boolean | TreeNodeDisabled>, default: undefined }, - empty: { type: [String, Object] as PropType, default: undefined }, + empty: { type: [String, Object] as PropType<'default' | 'simple' | EmptyProps>, default: 'simple' }, draggable: { type: Boolean, default: false }, draggableIcon: { type: String, default: undefined }, droppable: { type: Function as PropType, default: undefined },