From 1aa78d515d65774e41c7616c4ddd6af9bcbc99eb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=B0=8F=E6=9C=AF?= Date: Mon, 29 Nov 2021 19:52:20 +0800 Subject: [PATCH 1/6] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E7=BB=93?= =?UTF-8?q?=E6=9E=9C=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../devui/result/__tests__/result.spec.ts | 8 ++ packages/devui-vue/devui/result/index.ts | 17 ++++ .../devui/result/src/result-types.ts | 20 +++++ .../devui-vue/devui/result/src/result.scss | 43 ++++++++++ .../devui-vue/devui/result/src/result.tsx | 28 +++++++ .../devui-vue/docs/components/result/index.md | 79 +++++++++++++++++++ 6 files changed, 195 insertions(+) create mode 100644 packages/devui-vue/devui/result/__tests__/result.spec.ts create mode 100644 packages/devui-vue/devui/result/index.ts create mode 100644 packages/devui-vue/devui/result/src/result-types.ts create mode 100644 packages/devui-vue/devui/result/src/result.scss create mode 100644 packages/devui-vue/devui/result/src/result.tsx create mode 100644 packages/devui-vue/docs/components/result/index.md diff --git a/packages/devui-vue/devui/result/__tests__/result.spec.ts b/packages/devui-vue/devui/result/__tests__/result.spec.ts new file mode 100644 index 00000000..59d95436 --- /dev/null +++ b/packages/devui-vue/devui/result/__tests__/result.spec.ts @@ -0,0 +1,8 @@ +import { mount } from '@vue/test-utils'; +import { Result } from '../index'; + +describe('result test', () => { + it('result init render', async () => { + // todo + }) +}) diff --git a/packages/devui-vue/devui/result/index.ts b/packages/devui-vue/devui/result/index.ts new file mode 100644 index 00000000..750a3b8d --- /dev/null +++ b/packages/devui-vue/devui/result/index.ts @@ -0,0 +1,17 @@ +import type { App } from 'vue' +import Result from './src/result' + +Result.install = function(app: App): void { + app.component(Result.name, Result) +} + +export { Result } + +export default { + title: 'Result 结果', + category: '反馈', + status: '10%', // TODO: 组件若开发完成则填入"已完成"，并删除该注释 + install(app: App): void { + app.use(Result as any) + } +} diff --git a/packages/devui-vue/devui/result/src/result-types.ts b/packages/devui-vue/devui/result/src/result-types.ts new file mode 100644 index 00000000..b2588a28 --- /dev/null +++ b/packages/devui-vue/devui/result/src/result-types.ts @@ -0,0 +1,20 @@ +import type { ExtractPropTypes } from 'vue' + +export type ResultIcon = 'success' | 'danger' | 'warning' | 'info' + +export const resultProps = { + icon: { + type: String as () => ResultIcon, + default: 'info' + }, + title: { + type: String, + default: '' + }, + desc: { + type: String, + default: '' + } +} as const + +export type ResultProps = ExtractPropTypes diff --git a/packages/devui-vue/devui/result/src/result.scss b/packages/devui-vue/devui/result/src/result.scss new file mode 100644 index 00000000..9a0cec2b --- /dev/null +++ b/packages/devui-vue/devui/result/src/result.scss @@ -0,0 +1,43 @@ +@import '../../style/theme/color'; +@import '../../style/theme/font'; + +.devui-result { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + text-align: center; + box-sizing: border-box; + padding: 30px; + + &__icon{ + &-success::before{ + color: $devui-success + } + &-danger::before{ + color: $devui-danger + } + &-warning::before{ + color: $devui-warning + } + &-info::before{ + color: $devui-info + } + } + + &__title { + margin-top: 20px; + color: $devui-text; + font-size: $devui-font-size-lg; + } + + &__desc { + margin-top: 10px; + color: $devui-text-weak; + font-size: $devui-font-size-md; + } + + &__extra{ + margin-top: 30px; + } +} \ No newline at end of file diff --git a/packages/devui-vue/devui/result/src/result.tsx b/packages/devui-vue/devui/result/src/result.tsx new file mode 100644 index 00000000..04a91a19 --- /dev/null +++ b/packages/devui-vue/devui/result/src/result.tsx @@ -0,0 +1,28 @@ +import { defineComponent } from 'vue' +import { resultProps, ResultProps } from './result-types' +import Icon from '../../icon/src/icon' +import './result.scss' + +export default defineComponent({ + name: 'DResult', + props: resultProps, + emits: [], + setup(props: ResultProps, ctx) { + enum IconEnum {success = 'right-o', danger='error-o', warning='warning-o', info='info-o'} + + return () => { + return ( +
+ { + ctx.slots.icon ? ctx.slots.icon() : + } +
+ {ctx.slots.title ? ctx.slots?.title() : props.title} +
+
{ctx.slots.title ? ctx.slots?.title() : props.desc}
+
{ctx.slots.extra ? ctx.slots?.extra() : ''}
+
+ ) + } + } +}) diff --git a/packages/devui-vue/docs/components/result/index.md b/packages/devui-vue/docs/components/result/index.md new file mode 100644 index 00000000..b30efe6a --- /dev/null +++ b/packages/devui-vue/docs/components/result/index.md @@ -0,0 +1,79 @@ +# Result 结果 + +操作结果反馈。 + +### 何时使用 + +用于对用户的操作结果或者异常状态做反馈。 + +### 基本用法 + +:::demo + +```vue + +``` + +::: + +### 自定义 + +:::demo + +```vue + +``` + +::: + +### d-result +d-result 参数 + +| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | +| ----- | --------------------------- | ---- | -------------- | --------------------- | +| icon | [`ResultIcon`](#ResultIcon) | info | 指定 icon 类型 | [基本用法](#基本用法) | +| title | string | - | 结果标题 | [基本用法](#基本用法) | +| desc | string | - | 结果描述 | [基本用法](#基本用法) | + +### ResultIcon + +默认值为'info' + +```ts +export type ResultIcon = 'success' | 'danger' | 'warning' | 'info' +``` + +### 插槽 +两种方式使用：`v-slot:icon` 或者具名插槽`#icon` + +| 参数 | 说明 | +| ----- | -------------- | +| icon | 自定义图标 | +| title | 自定义标题 | +| desc | 自定义描述内容 | +| extra | 底部额外区域 | -- Gitee From 731483dec66e628b1a4f3fe2f0c325ca3a89e945 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=B0=8F=E6=9C=AF?= Date: Mon, 29 Nov 2021 19:55:42 +0800 Subject: [PATCH 2/6] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E7=BB=93?= =?UTF-8?q?=E6=9E=9C=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/devui-vue/devui/result/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/devui-vue/devui/result/index.ts b/packages/devui-vue/devui/result/index.ts index 750a3b8d..b89985ec 100644 --- a/packages/devui-vue/devui/result/index.ts +++ b/packages/devui-vue/devui/result/index.ts @@ -10,7 +10,7 @@ export { Result } export default { title: 'Result 结果', category: '反馈', - status: '10%', // TODO: 组件若开发完成则填入"已完成"，并删除该注释 + status: '已完成', install(app: App): void { app.use(Result as any) } -- Gitee From 2ed2c53c5fcb1b2edd4a6f5e53e1b64c77bc415b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=B0=8F=E6=9C=AF?= Date: Mon, 29 Nov 2021 21:02:00 +0800 Subject: [PATCH 3/6] =?UTF-8?q?test(result):=E6=96=B0=E5=A2=9Eresult?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=8D=95=E5=85=83=E6=B5=8B=E8=AF=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../devui/result/__tests__/result.spec.ts | 38 ++++++++++++++++++- 1 file changed, 37 insertions(+), 1 deletion(-) diff --git a/packages/devui-vue/devui/result/__tests__/result.spec.ts b/packages/devui-vue/devui/result/__tests__/result.spec.ts index 59d95436..a546e9af 100644 --- a/packages/devui-vue/devui/result/__tests__/result.spec.ts +++ b/packages/devui-vue/devui/result/__tests__/result.spec.ts @@ -3,6 +3,42 @@ import { Result } from '../index'; describe('result test', () => { it('result init render', async () => { - // todo + const wrapper = mount(Result) + expect(wrapper.classes()).toContain('devui-result') + }) + + it('icon', async () => { + const wrapper = mount(Result, { props: { icon: 'info' } }) + + let firstChild: Element = wrapper.element.firstElementChild + expect(firstChild.classList).toContain('devui-result__icon-info') + + await wrapper.setProps({ icon: 'success' }); + firstChild = wrapper.element.firstElementChild + expect(firstChild.classList).toContain('devui-result__icon-success') + + await wrapper.setProps({ icon: 'danger' }); + firstChild = wrapper.element.firstElementChild + expect(firstChild.classList).toContain('devui-result__icon-danger') + + await wrapper.setProps({ icon: 'warning' }); + firstChild = wrapper.element.firstElementChild + expect(firstChild.classList).toContain('devui-result__icon-warning') + }) + + it('slot', async ()=>{ + const wrapper = mount(Result, { + slots: { + icon: 'This is icon slot', + title: 'This is title slot', + desc: 'This is desc slot', + extra: 'This is extra slot' + } + }) + + expect(wrapper.element.children[0].innerHTML).toEqual('This is icon slot') + expect(wrapper.element.children[1].innerHTML).toEqual('This is title slot') + expect(wrapper.element.children[2].innerHTML).toEqual('This is desc slot') + expect(wrapper.element.children[3].innerHTML).toEqual('This is extra slot') }) }) -- Gitee From 9093d272f577382a007679ef5c85229245828afc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=B0=8F=E6=9C=AF?= Date: Mon, 29 Nov 2021 21:02:48 +0800 Subject: [PATCH 4/6] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8Dresult=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E8=87=AA=E5=AE=9A=E4=B9=89desc=E6=98=BE=E7=A4=BA?= =?UTF-8?q?=E9=94=99=E8=AF=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/devui-vue/devui/result/src/result.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/devui-vue/devui/result/src/result.tsx b/packages/devui-vue/devui/result/src/result.tsx index 04a91a19..472fd8c6 100644 --- a/packages/devui-vue/devui/result/src/result.tsx +++ b/packages/devui-vue/devui/result/src/result.tsx @@ -14,12 +14,12 @@ export default defineComponent({ return (
{ - ctx.slots.icon ? ctx.slots.icon() : + ctx.slots.icon ?
{ctx.slots?.icon()}
: }
{ctx.slots.title ? ctx.slots?.title() : props.title}
-
{ctx.slots.title ? ctx.slots?.title() : props.desc}
+
{ctx.slots.desc ? ctx.slots?.desc() : props.desc}
{ctx.slots.extra ? ctx.slots?.extra() : ''}
) -- Gitee From a3d303f443c6785ea8be2d8266fe284c4429bcdf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=B0=8F=E6=9C=AF?= Date: Mon, 29 Nov 2021 21:09:35 +0800 Subject: [PATCH 5/6] =?UTF-8?q?fix:=20=E6=96=87=E6=A1=A3=E8=BF=9B=E5=BA=A6?= =?UTF-8?q?=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/devui-vue/devui/result/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/devui-vue/devui/result/index.ts b/packages/devui-vue/devui/result/index.ts index b89985ec..dec29649 100644 --- a/packages/devui-vue/devui/result/index.ts +++ b/packages/devui-vue/devui/result/index.ts @@ -10,7 +10,7 @@ export { Result } export default { title: 'Result 结果', category: '反馈', - status: '已完成', + status: '100%', install(app: App): void { app.use(Result as any) } -- Gitee From 25ba78528b0c32537da92fc09f85e7b78da24121 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=B0=8F=E6=9C=AF?= Date: Mon, 29 Nov 2021 21:14:45 +0800 Subject: [PATCH 6/6] =?UTF-8?q?fix:=20=E5=88=A0=E9=99=A4=E6=9C=AA=E4=BD=BF?= =?UTF-8?q?=E7=94=A8emit=E5=B1=9E=E6=80=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/devui-vue/devui/result/src/result.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/devui-vue/devui/result/src/result.tsx b/packages/devui-vue/devui/result/src/result.tsx index 472fd8c6..b54671ea 100644 --- a/packages/devui-vue/devui/result/src/result.tsx +++ b/packages/devui-vue/devui/result/src/result.tsx @@ -6,7 +6,6 @@ import './result.scss' export default defineComponent({ name: 'DResult', props: resultProps, - emits: [], setup(props: ResultProps, ctx) { enum IconEnum {success = 'right-o', danger='error-o', warning='warning-o', info='info-o'} -- Gitee