diff --git a/components.json b/components.json index 49772f4889d..62d748707b3 100644 --- a/components.json +++ b/components.json @@ -85,5 +85,6 @@ "skeleton-item": "./packages/skeleton-item/index.js", "empty": "./packages/empty/index.js", "descriptions": "./packages/descriptions/index.js", - "descriptions-item": "./packages/descriptions-item/index.js" + "descriptions-item": "./packages/descriptions-item/index.js", + "result": "./packages/result/index.js" } diff --git a/examples/docs/en-US/result.md b/examples/docs/en-US/result.md new file mode 100644 index 00000000000..d23a5b01f23 --- /dev/null +++ b/examples/docs/en-US/result.md @@ -0,0 +1,76 @@ +## Result + +Used to give feedback on the result of user's operation or access exception. + +### Basic usage + +:::demo + +```html + + + + + + + + + + + + + + + + + + + + + + +``` + +::: + +### Customized content + +:::demo + +```html + + + + +``` + +::: + +### Result Attributes + +| Attribute | Description | Type | Accepted Values | Default | +|------------- |---------------- |---------------- |---------------------- |-------- | +| title | title | string | — | — | +| sub-title | sub title | string | — | — | +| icon | icon type | string | success / warning / info / error | info | + +### Result Slots + +| Name | Description | +|------|--------| +| icon | custom icon | +| title | custom title | +| subTitle | custom sub title | +| extra | custom extra area | diff --git a/examples/docs/es/result.md b/examples/docs/es/result.md new file mode 100644 index 00000000000..d23a5b01f23 --- /dev/null +++ b/examples/docs/es/result.md @@ -0,0 +1,76 @@ +## Result + +Used to give feedback on the result of user's operation or access exception. + +### Basic usage + +:::demo + +```html + + + + + + + + + + + + + + + + + + + + + + +``` + +::: + +### Customized content + +:::demo + +```html + + + + +``` + +::: + +### Result Attributes + +| Attribute | Description | Type | Accepted Values | Default | +|------------- |---------------- |---------------- |---------------------- |-------- | +| title | title | string | — | — | +| sub-title | sub title | string | — | — | +| icon | icon type | string | success / warning / info / error | info | + +### Result Slots + +| Name | Description | +|------|--------| +| icon | custom icon | +| title | custom title | +| subTitle | custom sub title | +| extra | custom extra area | diff --git a/examples/docs/fr-FR/result.md b/examples/docs/fr-FR/result.md new file mode 100644 index 00000000000..d23a5b01f23 --- /dev/null +++ b/examples/docs/fr-FR/result.md @@ -0,0 +1,76 @@ +## Result + +Used to give feedback on the result of user's operation or access exception. + +### Basic usage + +:::demo + +```html + + + + + + + + + + + + + + + + + + + + + + +``` + +::: + +### Customized content + +:::demo + +```html + + + + +``` + +::: + +### Result Attributes + +| Attribute | Description | Type | Accepted Values | Default | +|------------- |---------------- |---------------- |---------------------- |-------- | +| title | title | string | — | — | +| sub-title | sub title | string | — | — | +| icon | icon type | string | success / warning / info / error | info | + +### Result Slots + +| Name | Description | +|------|--------| +| icon | custom icon | +| title | custom title | +| subTitle | custom sub title | +| extra | custom extra area | diff --git a/examples/docs/zh-CN/result.md b/examples/docs/zh-CN/result.md new file mode 100644 index 00000000000..2d6e54926eb --- /dev/null +++ b/examples/docs/zh-CN/result.md @@ -0,0 +1,76 @@ +## Result 结果 + +用于对用户的操作结果或者异常状态做反馈。 + +### 基础用法 + +:::demo + +```html + + + + + + + + + + + + + + + + + + + + + + +``` + +::: + +### 自定义内容 + +:::demo + +```html + + + + +``` + +::: + +### Result Attributes + +| 参数 | 说明 | 类型 | 可选值 | 默认值 | +|------------- |---------------- |---------------- |---------------------- |-------- | +| title | 标题 | string | — | — | +| sub-title | 二级标题 | string | — | — | +| icon | 图标类型 | string | success / warning / info / error | info | + +### Result Slots + +| Name | 说明 | +|------|--------| +| icon | 自定义图标 | +| title | 自定义标题 | +| subTitle | 自定义二级标题 | +| extra | 自定义底部额外区域 | diff --git a/examples/nav.config.json b/examples/nav.config.json index c717d63d2d2..3377ac93339 100644 --- a/examples/nav.config.json +++ b/examples/nav.config.json @@ -188,6 +188,10 @@ { "path": "/descriptions", "title": "Descriptions 描述列表" + }, + { + "path": "/result", + "title": "Result 结果" } ] }, @@ -494,6 +498,10 @@ { "path": "/descriptions", "title": "Descriptions" + }, + { + "path": "/result", + "title": "Result" } ] }, @@ -804,6 +812,10 @@ { "path": "/descriptions", "title": "Descriptions" + }, + { + "path": "/result", + "title": "Result" } ] }, @@ -1114,6 +1126,10 @@ { "path": "/descriptions", "title": "Descriptions" + }, + { + "path": "/result", + "title": "Result" } ] }, diff --git a/packages/result/index.js b/packages/result/index.js new file mode 100644 index 00000000000..b967c163a85 --- /dev/null +++ b/packages/result/index.js @@ -0,0 +1,8 @@ +import Result from './src/index.vue'; + +/* istanbul ignore next */ +Result.install = function(Vue) { + Vue.component(Result.name, Result); +}; + +export default Result; diff --git a/packages/result/src/icon-error.vue b/packages/result/src/icon-error.vue new file mode 100644 index 00000000000..7888f7b75c1 --- /dev/null +++ b/packages/result/src/icon-error.vue @@ -0,0 +1,13 @@ + + + diff --git a/packages/result/src/icon-info.vue b/packages/result/src/icon-info.vue new file mode 100644 index 00000000000..b019d184608 --- /dev/null +++ b/packages/result/src/icon-info.vue @@ -0,0 +1,13 @@ + + + diff --git a/packages/result/src/icon-success.vue b/packages/result/src/icon-success.vue new file mode 100644 index 00000000000..7f8217c1653 --- /dev/null +++ b/packages/result/src/icon-success.vue @@ -0,0 +1,13 @@ + + + diff --git a/packages/result/src/icon-warning.vue b/packages/result/src/icon-warning.vue new file mode 100644 index 00000000000..a5aaa8d9a06 --- /dev/null +++ b/packages/result/src/icon-warning.vue @@ -0,0 +1,13 @@ + + + diff --git a/packages/result/src/index.vue b/packages/result/src/index.vue new file mode 100644 index 00000000000..19b300bb8c5 --- /dev/null +++ b/packages/result/src/index.vue @@ -0,0 +1,65 @@ + + diff --git a/packages/skeleton/src/index.vue b/packages/skeleton/src/index.vue index 150c200e610..e89746252bf 100644 --- a/packages/skeleton/src/index.vue +++ b/packages/skeleton/src/index.vue @@ -6,7 +6,7 @@ { { template: ` - + ` }, @@ -29,8 +29,8 @@ describe('Descriptions', () => { { template: ` - {{ item }} - {{ item }} + ` }, true @@ -44,7 +44,7 @@ describe('Descriptions', () => { { template: ` - {{ item }} + {{ item }} ` }, @@ -58,7 +58,7 @@ describe('Descriptions', () => { vm = createVue({ template: ` - {{ item }} + {{ item }} `, data() { @@ -79,7 +79,7 @@ describe('Descriptions', () => { template: ` - {{ item }} + {{ item }} `, data() { @@ -102,7 +102,7 @@ describe('Descriptions', () => { template: ` - {{ item }} + {{ item }} ` }, true); diff --git a/test/unit/specs/result.spec.js b/test/unit/specs/result.spec.js new file mode 100644 index 00000000000..0ef5ad5f423 --- /dev/null +++ b/test/unit/specs/result.spec.js @@ -0,0 +1,120 @@ +import { createVue, destroyVM, waitImmediate } from '../util'; + +const AXIOM = 'Rem is the best girl'; + +describe('Result', () => { + + let vm; + afterEach(() => { + destroyVM(vm); + }); + + it('render test', () => { + vm = createVue({ + template: '' + }, true); + expect(vm.$el.querySelector('.el-result__icon')).to.exist; + expect(Array.from(vm.$el.classList)).to.contain('el-result'); + }); + + it('should render title props', () => { + vm = createVue({ + template: '', + data() { + return { + title: AXIOM + }; + } + }, true); + expect(vm.$el.querySelector('.el-result__title').innerText).to.be.equal(AXIOM); + }); + + it('should render sub-title props', () => { + vm = createVue({ + template: '', + data() { + return { + subTitle: AXIOM + }; + } + }, true); + expect(vm.$el.querySelector('.el-result__subtitle').innerText).to.be.equal(AXIOM); + }); + + it('should render icon props', async() => { + vm = createVue({ + template: '', + data() { + return { + icon: 'success' + }; + } + }, true); + expect(vm.$el.querySelector('.el-result__icon svg')).to.exist; + expect(Array.from(vm.$el.querySelector('.el-result__icon svg').classList)).to.contain('icon-success'); + vm.icon = 'error'; + await waitImmediate(); + expect(vm.$el.querySelector('.el-result__icon svg')).to.exist; + expect(Array.from(vm.$el.querySelector('.el-result__icon svg').classList)).to.contain('icon-error'); + vm.icon = 'warning'; + await waitImmediate(); + expect(vm.$el.querySelector('.el-result__icon svg')).to.exist; + expect(Array.from(vm.$el.querySelector('.el-result__icon svg').classList)).to.contain('icon-warning'); + vm.icon = 'info'; + await waitImmediate(); + expect(vm.$el.querySelector('.el-result__icon svg')).to.exist; + expect(Array.from(vm.$el.querySelector('.el-result__icon svg').classList)).to.contain('icon-info'); + }); + + it('should render icon slots', () => { + vm = createVue({ + template: '', + data() { + return { + icon: AXIOM + }; + } + }, true); + expect(vm.$el.querySelector('.el-result__icon')).to.exist; + expect(vm.$el.querySelector('.el-result__icon').innerText).to.be.equal(AXIOM); + }); + + it('should render title slots', () => { + vm = createVue({ + template: '', + data() { + return { + title: AXIOM + }; + } + }, true); + expect(vm.$el.querySelector('.el-result__title')).to.exist; + expect(vm.$el.querySelector('.el-result__title').innerText).to.be.equal(AXIOM); + }); + + it('should render sub-title slots', () => { + vm = createVue({ + template: '', + data() { + return { + subTitle: AXIOM + }; + } + }, true); + expect(vm.$el.querySelector('.el-result__subtitle')).to.exist; + expect(vm.$el.querySelector('.el-result__subtitle').innerText).to.be.equal(AXIOM); + }); + + it('should render extra slots', () => { + vm = createVue({ + template: '', + data() { + return { + extra: AXIOM + }; + } + }, true); + expect(vm.$el.querySelector('.el-result__extra')).to.exist; + expect(vm.$el.querySelector('.el-result__extra').innerText).to.be.equal(AXIOM); + }); +}); diff --git a/types/element-ui.d.ts b/types/element-ui.d.ts index 8dccab6d7de..c4ee1af20c2 100644 --- a/types/element-ui.d.ts +++ b/types/element-ui.d.ts @@ -87,6 +87,7 @@ import { ElEmpty } from './empty' import { ElSpinner } from './spinner' import { ElDescriptions } from './descriptions' import { ElDescriptionsItem } from './descriptions-item' +import { ElResult } from './result' export interface InstallationOptions { locale: any, @@ -371,4 +372,7 @@ export class Spinner extends ElSpinner {} export class Descripitions extends ElDescriptions {} /** Description Item Component */ -export class DescripitionsItem extends ElDescriptionsItem {} \ No newline at end of file +export class DescripitionsItem extends ElDescriptionsItem {} + +/** Result Component */ +export class Result extends ElResult {} \ No newline at end of file diff --git a/types/result.d.ts b/types/result.d.ts new file mode 100644 index 00000000000..dc56f149ba0 --- /dev/null +++ b/types/result.d.ts @@ -0,0 +1,33 @@ +import { ElementUIComponent } from './component' +import { VNode } from 'vue' + +interface ElResultSlots { + /* title slot: custom title */ + title: VNode[] + + /* icon slot: custom icon */ + icon: VNode[] + + /* subTitle slot: custom sub title */ + subTitle: VNode[] + + /* extra slot: custom extra area, display on the top right */ + extra: VNode[] + + [key: string]: VNode[] +} + +/** Used to give feedback on the result of user's operation or access exception. **/ +export declare class ElResult extends ElementUIComponent { + + /* title */ + title: string + + /* sub title */ + subTitle: string + + /* icon type */ + icon: 'success' | 'warning' | 'info' | 'error' + + $slots: ElResultSlots +}