Skip to content

Commit

Permalink
feat(comp:empty): add simple mode and support css variable (#1268)
Browse files Browse the repository at this point in the history
  • Loading branch information
@danranVm
danranVm committed Nov 16, 2022
1 parent d4653bb commit 4d5e770
Show file tree
Hide file tree
Showing 55 changed files with 870 additions and 218 deletions.
136 changes: 134 additions & 2 deletions packages/components/_private/empty/__tests__/__snapshots__/empty.spec.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,140 @@

exports[`Empty > render work 1`] = `
"<div class=\\"ix-empty\\">
<div class=\\"ix-empty-image\\"><i class=\\"ix-icon ix-icon-empty\\" role=\\"img\\" aria-label=\\"empty\\"></i></div>
<div class=\\"ix-empty-description\\">Empty content</div>
<div class=\\"ix-empty-image\\"><svg width=\\"240\\" height=\\"150\\" viewBox=\\"0 0 240 150\\" xmlns=\\"http://www.w3.org/2000/svg\\">
<defs>
<linearGradient id=\\"a\\" x1=\\"98.732%\\" x2=\\"1.144%\\" y1=\\"35.249%\\" y2=\\"64.751%\\">
<stop offset=\\"0%\\" stop-color=\\"#EBEDF1\\" stop-opacity=\\"0\\"></stop>
<stop offset=\\"50.721%\\" stop-color=\\"#D3D7DE\\"></stop>
<stop offset=\\"100%\\" stop-color=\\"#D3D7DE\\" stop-opacity=\\"0\\"></stop>
</linearGradient>
<linearGradient id=\\"b\\" x1=\\"98.732%\\" x2=\\"-4.28%\\" y1=\\"29.211%\\" y2=\\"74.009%\\">
<stop offset=\\"0%\\" stop-color=\\"#EBEDF1\\" stop-opacity=\\"0\\"></stop>
<stop offset=\\"50.721%\\" stop-color=\\"#D3D7DE\\"></stop>
<stop offset=\\"100%\\" stop-color=\\"#D3D7DE\\" stop-opacity=\\"0\\"></stop>
</linearGradient>
<linearGradient id=\\"c\\" x1=\\"98.732%\\" x2=\\"1.773%\\" y1=\\"34.607%\\" y2=\\"65.393%\\">
<stop offset=\\"0%\\" stop-color=\\"#EBEDF1\\" stop-opacity=\\"0\\"></stop>
<stop offset=\\"50.721%\\" stop-color=\\"#D3D7DE\\"></stop>
<stop offset=\\"100%\\" stop-color=\\"#D3D7DE\\" stop-opacity=\\"0\\"></stop>
</linearGradient>
<linearGradient id=\\"d\\" x1=\\"98.732%\\" x2=\\"-4.054%\\" y1=\\"31.668%\\" y2=\\"69.567%\\">
<stop offset=\\"0%\\" stop-color=\\"#EBEDF1\\" stop-opacity=\\"0\\"></stop>
<stop offset=\\"50.721%\\" stop-color=\\"#D3D7DE\\"></stop>
<stop offset=\\"100%\\" stop-color=\\"#D3D7DE\\" stop-opacity=\\"0\\"></stop>
</linearGradient>
<linearGradient id=\\"e\\" x1=\\"109.243%\\" x2=\\"2.442%\\" y1=\\"57.269%\\" y2=\\"42.07%\\">
<stop offset=\\"0%\\" stop-color=\\"#EBEDF1\\" stop-opacity=\\"0\\"></stop>
<stop offset=\\"50.721%\\" stop-color=\\"#D3D7DE\\"></stop>
<stop offset=\\"100%\\" stop-color=\\"#D3D7DE\\" stop-opacity=\\"0\\"></stop>
</linearGradient>
<linearGradient id=\\"f\\" x1=\\"109.243%\\" x2=\\"16.437%\\" y1=\\"56.689%\\" y2=\\"45.02%\\">
<stop offset=\\"0%\\" stop-color=\\"#EBEDF1\\" stop-opacity=\\"0\\"></stop>
<stop offset=\\"50.721%\\" stop-color=\\"#D3D7DE\\"></stop>
<stop offset=\\"100%\\" stop-color=\\"#D3D7DE\\" stop-opacity=\\"0\\"></stop>
</linearGradient>
<linearGradient id=\\"g\\" x1=\\"106.552%\\" x2=\\"-9.479%\\" y1=\\"57.117%\\" y2=\\"40.471%\\">
<stop offset=\\"0%\\" stop-color=\\"#EBEDF1\\" stop-opacity=\\"0\\"></stop>
<stop offset=\\"50.721%\\" stop-color=\\"#D3D7DE\\"></stop>
<stop offset=\\"100%\\" stop-color=\\"#D3D7DE\\" stop-opacity=\\"0\\"></stop>
</linearGradient>
<linearGradient id=\\"h\\" x1=\\"89.696%\\" x2=\\"2.512%\\" y1=\\"55.015%\\" y2=\\"41.695%\\">
<stop offset=\\"0%\\" stop-color=\\"#EBEDF1\\" stop-opacity=\\"0\\"></stop>
<stop offset=\\"50.721%\\" stop-color=\\"#D3D7DE\\"></stop>
<stop offset=\\"100%\\" stop-color=\\"#D3D7DE\\" stop-opacity=\\"0\\"></stop>
</linearGradient>
<linearGradient id=\\"i\\" x1=\\"0%\\" x2=\\"89.377%\\" y1=\\"49.118%\\" y2=\\"50%\\">
<stop offset=\\"0%\\" stop-color=\\"#CDD2DA\\" stop-opacity=\\".531\\"></stop>
<stop offset=\\"100%\\" stop-color=\\"#BEC3CC\\" stop-opacity=\\".178\\"></stop>
</linearGradient>
<linearGradient id=\\"j\\" x1=\\"3.227%\\" x2=\\"87.16%\\" y1=\\"66.363%\\" y2=\\"73.709%\\">
<stop offset=\\"0%\\" stop-color=\\"#E1E5EB\\"></stop>
<stop offset=\\"100%\\" stop-color=\\"#BEC3CC\\"></stop>
</linearGradient>
<path id=\\"k\\" d=\\"M86.24 47.88L77.495 61.93a.234.234 0 0 0 .301.335l8.446-4.118v-9.73l31.681-13.992L86.241 47.88z\\"></path>
<filter id=\\"l\\" width=\\"102.5%\\" height=\\"103.6%\\" x=\\"-1.2%\\" y=\\"-1.8%\\" filterUnits=\\"objectBoundingBox\\">
<feGaussianBlur in=\\"SourceAlpha\\" result=\\"shadowBlurInner1\\" stdDeviation=\\".5\\"></feGaussianBlur>
<feOffset in=\\"shadowBlurInner1\\" result=\\"shadowOffsetInner1\\"></feOffset>
<feComposite in=\\"shadowOffsetInner1\\" in2=\\"SourceAlpha\\" k2=\\"-1\\" k3=\\"1\\" operator=\\"arithmetic\\" result=\\"shadowInnerInner1\\"></feComposite>
<feColorMatrix in=\\"shadowInnerInner1\\" values=\\"0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0\\"></feColorMatrix>
</filter>
<linearGradient id=\\"m\\" x1=\\"31.515%\\" x2=\\"73.396%\\" y1=\\"0%\\" y2=\\"100%\\">
<stop offset=\\"0%\\" stop-color=\\"#F7F9FC\\"></stop>
<stop offset=\\"100%\\" stop-color=\\"#E1E5EB\\"></stop>
</linearGradient>
<linearGradient id=\\"n\\" x1=\\"35.265%\\" x2=\\"64.735%\\" y1=\\"20.531%\\" y2=\\"71.964%\\">
<stop offset=\\"0%\\" stop-color=\\"#E1E5EB\\"></stop>
<stop offset=\\"100%\\" stop-color=\\"#BEC3CC\\"></stop>
</linearGradient>
<path id=\\"o\\" d=\\"M0 15.191L31.462 0v38.684a.376.376 0 0 1-.181.322L0 57.956V15.19z\\"></path>
<linearGradient id=\\"p\\" x1=\\"0%\\" y1=\\"45.743%\\" y2=\\"53.173%\\">
<stop offset=\\"0%\\" stop-color=\\"#E1E5EB\\"></stop>
<stop offset=\\"100%\\" stop-color=\\"#BEC3CC\\"></stop>
</linearGradient>
<path id=\\"q\\" d=\\"M0 13.457l38.276 13.049L69.74 11.457 31.682 0z\\"></path>
<linearGradient id=\\"r\\" x1=\\"13.714%\\" x2=\\"13.714%\\" y1=\\"13.836%\\" y2=\\"113.032%\\">
<stop offset=\\"0%\\" stop-color=\\"#F7F9FC\\"></stop>
<stop offset=\\"100%\\" stop-color=\\"#E1E5EB\\"></stop>
</linearGradient>
<path id=\\"t\\" d=\\"M0 13.457l38.276 13.049L69.74 11.457 31.682 0z\\"></path>
<linearGradient id=\\"u\\" x1=\\"50%\\" x2=\\"54.931%\\" y1=\\"42.206%\\" y2=\\"57.223%\\">
<stop offset=\\"0%\\" stop-color=\\"#E1E5EB\\"></stop>
<stop offset=\\"100%\\" stop-color=\\"#FFF\\"></stop>
</linearGradient>
<linearGradient id=\\"w\\" x1=\\"2.15%\\" y1=\\"41.152%\\" y2=\\"53.34%\\">
<stop offset=\\"0%\\" stop-color=\\"#E1E5EB\\"></stop>
<stop offset=\\"100%\\" stop-color=\\"#BEC3CC\\"></stop>
</linearGradient>
<path id=\\"y\\" d=\\"M124.517 60.93l-.05 1.737 7.545 14.903c.092.181.31.257.494.171l33.014-15.395a.376.376 0 0 0 .162-.536l-9.703-15.93-31.462 15.05z\\"></path>
<filter id=\\"x\\" width=\\"102.4%\\" height=\\"103.1%\\" x=\\"-1.2%\\" y=\\"-1.6%\\" filterUnits=\\"objectBoundingBox\\">
<feGaussianBlur in=\\"SourceAlpha\\" result=\\"shadowBlurInner1\\" stdDeviation=\\".5\\"></feGaussianBlur>
<feOffset in=\\"shadowBlurInner1\\" result=\\"shadowOffsetInner1\\"></feOffset>
<feComposite in=\\"shadowOffsetInner1\\" in2=\\"SourceAlpha\\" k2=\\"-1\\" k3=\\"1\\" operator=\\"arithmetic\\" result=\\"shadowInnerInner1\\"></feComposite>
<feColorMatrix in=\\"shadowInnerInner1\\" values=\\"0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.353775131 0\\"></feColorMatrix>
</filter>
<linearGradient id=\\"z\\" x1=\\"0%\\" y1=\\"38.098%\\" y2=\\"58.871%\\">
<stop offset=\\"0%\\" stop-color=\\"#E1E5EB\\"></stop>
<stop offset=\\"100%\\" stop-color=\\"#BEC3CC\\"></stop>
</linearGradient>
</defs>
<g fill=\\"none\\" fill-rule=\\"evenodd\\">
<g stroke-dasharray=\\"4,10\\" stroke-width=\\".8\\">
<path stroke=\\"url(#a)\\" d=\\"M.325 103.602L191.027.344\\"></path>
<path stroke=\\"url(#b)\\" d=\\"M117.37 139.398l125.286-80.541\\"></path>
<path stroke=\\"url(#c)\\" d=\\"M6.195 132.145L225.446 10.67\\"></path>
<path stroke=\\"url(#d)\\" d=\\"M76.264 130.444l149.182-90.173\\"></path>
<path stroke=\\"url(#e)\\" d=\\"M23.405 37.861l191.371 72.969-191.37-72.969z\\"></path>
<path stroke=\\"url(#f)\\" d=\\"M32.354 14.456L237.493 89.49 32.354 14.456z\\"></path>
<path stroke=\\"url(#g)\\" d=\\"M13.768 85.36l151.444 57.136L13.768 85.36z\\"></path>
<path stroke=\\"url(#h)\\" d=\\"M15.144 58.513l207.204 79.164L15.144 58.513z\\"></path>
</g>
<path fill=\\"url(#i)\\" fill-rule=\\"nonzero\\" d=\\"M124.157 103.884l31.966 11.166 40.333-25.333-40.477-14.692z\\" opacity=\\".424\\"></path>
<use fill=\\"url(#j)\\" xlink:href=\\"#k\\"></use>
<use fill=\\"#000\\" filter=\\"url(#l)\\" xlink:href=\\"#k\\"></use>
<path fill=\\"url(#m)\\" fill-rule=\\"nonzero\\" d=\\"M86.24 47.88l38.277 13.05v42.907L86.481 89.143a.376.376 0 0 1-.24-.35V47.88z\\"></path>
<path fill=\\"#BEC3CC\\" fill-rule=\\"nonzero\\" d=\\"M93.681 63.157l21.828 6.506c.608.181 1.025.74 1.025 1.375a.797.797 0 0 1-1.025.763L93.68 65.296a1.435 1.435 0 0 1-1.024-1.375.797.797 0 0 1 1.024-.764zM93.683 72.243l14.497 4.261a1.429 1.429 0 0 1 1.026 1.37.8.8 0 0 1-1.026.769L93.683 74.38a1.429 1.429 0 0 1-1.026-1.37.8.8 0 0 1 1.026-.768z\\" opacity=\\".65\\"></path>
<path fill=\\"url(#n)\\" fill-rule=\\"nonzero\\" d=\\"M0 15.191L31.462 0v38.684a.376.376 0 0 1-.181.322L0 57.956V15.19z\\" transform=\\"translate(124.517 45.88)\\"></path>
<path fill=\\"url(#p)\\" fill-rule=\\"nonzero\\" d=\\"M86.24 47.88l38.277 13.05 31.462-15.05-38.057-11.456z\\"></path>
<g transform=\\"translate(86.24 34.424)\\">
<mask id=\\"s\\" fill=\\"#fff\\">
<use xlink:href=\\"#q\\"></use>
</mask>
<path fill=\\"url(#r)\\" fill-rule=\\"nonzero\\" d=\\"M31.684-8.02L82.34-4.687V57.87l-50.655-1.334z\\" mask=\\"url(#s)\\"></path>
</g>
<g transform=\\"translate(86.24 34.424)\\">
<mask id=\\"v\\" fill=\\"#fff\\">
<use xlink:href=\\"#t\\"></use>
</mask>
<path stroke=\\"url(#u)\\" d=\\"M31.689.124l37.726 11.358L38.269 26.38.328 13.445z\\" mask=\\"url(#v)\\"></path>
</g>
<path fill=\\"url(#w)\\" fill-rule=\\"nonzero\\" d=\\"M124.517 60.93l-.05 1.737 7.545 14.903c.092.181.31.257.494.171l33.014-15.395a.376.376 0 0 0 .162-.536l-9.703-15.93-31.462 15.05z\\"></path>
<g fill=\\"#000\\">
<use filter=\\"url(#x)\\" xlink:href=\\"#y\\"></use>
</g>
<path stroke=\\"url(#z)\\" stroke-dasharray=\\"2.406\\" stroke-width=\\".8\\" d=\\"M118.145 48c19.263-2.343 28.895-8.87 28.895-19.582 0-16.066-27.203-1.937-13.381 5.75 13.822 7.69 29.746-6.203 32.892-16.93\\"></path>
</g>
</svg></div>
<div class=\\"ix-empty-description\\">暂无数据</div>
<!---->
</div>"
`;
11 changes: 7 additions & 4 deletions packages/components/_private/empty/__tests__/empty.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,20 +17,23 @@ describe('Empty', () => {
renderWork<EmptyProps>(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)
})

test('empty slot work', () => {
const wrapper = EmptyMount({
props: { empty: 'empty 1' },
slots: { empty: () => h(IxEmpty, { description: 'empty slot' }) },
})

Expand Down
9 changes: 5 additions & 4 deletions packages/components/_private/empty/src/Empty.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<EmptyProps> = (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 <IxEmpty {...emptyProps}></IxEmpty>
}
Expand Down
2 changes: 1 addition & 1 deletion packages/components/_private/empty/src/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,5 +8,5 @@
import type { EmptyProps as IxEmptyProps } from '@idux/components/empty'

export interface EmptyProps {
empty?: string | IxEmptyProps
empty?: 'default' | 'simple' | IxEmptyProps
}
5 changes: 3 additions & 2 deletions packages/components/cascader/docs/Api.zh.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) |
Expand Down Expand Up @@ -64,8 +64,9 @@

| 名称 | 说明 | 参数类型 | 备注 |
| --- | --- | --- | --- |
| `empty` | 自定义空状态 | - | - |
| `selectedItem` | 自定义选中项 | `data: SelectedItemProps` | 使用该插槽后`selectedLabel`将无效 |
| `selectedLabel` | 自定义选中的标签 | `data: CascaderData` | |
| `selectedLabel` | 自定义选中的标签 | `data: CascaderData` | - |
| `overflowedLabel` | 自定义超出最多显示多少个标签的内容 | `data: CascaderData[]` | 参数为超出的数组 |
| `optionLabel` | 自定义选项的文本 | `data: SelectOption` | - |

Expand Down
2 changes: 1 addition & 1 deletion packages/components/cascader/src/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ export const cascaderProps = {
customAdditional: { type: Function as PropType<CascaderCustomAdditional>, default: undefined },
dataSource: { type: Array as PropType<CascaderData[]>, default: () => [] },
disabled: { type: Boolean, default: false },
empty: { type: [String, Object] as PropType<string | EmptyProps>, default: undefined },
empty: { type: [String, Object] as PropType<'default' | 'simple' | EmptyProps>, default: 'simple' },
expandIcon: { type: String, default: undefined },
expandTrigger: { type: String as PropType<CascaderExpandTrigger>, default: 'click' },
fullPath: { type: Boolean, default: undefined },
Expand Down
4 changes: 1 addition & 3 deletions packages/components/config/src/defaultConfig.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,9 +112,7 @@ export const defaultConfig: GlobalConfig = {
showArrow: false,
trigger: 'hover',
},
empty: {
icon: 'empty',
},
empty: {},
form: {
colonless: false,
labelAlign: 'end',
Expand Down
5 changes: 4 additions & 1 deletion packages/components/config/src/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -224,7 +224,10 @@ export interface DropdownConfig {
}

export interface EmptyConfig {
icon: string | VNode
/**
* @deprecated
*/
icon?: string | VNode
image?: string | VNode
}

Expand Down

0 comments on commit 4d5e770

Please sign in to comment.