From 01ace8d2bb47d95c24972246e8b215ff4bd1a96c Mon Sep 17 00:00:00 2001 From: liusu <851209312@qq.com> Date: Thu, 5 Aug 2021 13:46:32 +0800 Subject: [PATCH 1/4] =?UTF-8?q?feat():=20dstatus=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/status/__tests__/status.spec.ts | 67 +++++++++++++++++++++++++++ devui/status/demo/status-demo.tsx | 23 +++++++-- devui/status/status.scss | 65 ++++++++++++++++++++++++++ devui/status/status.tsx | 23 +++++++-- 4 files changed, 172 insertions(+), 6 deletions(-) create mode 100644 devui/status/__tests__/status.spec.ts create mode 100644 devui/status/status.scss diff --git a/devui/status/__tests__/status.spec.ts b/devui/status/__tests__/status.spec.ts new file mode 100644 index 00000000..159251c9 --- /dev/null +++ b/devui/status/__tests__/status.spec.ts @@ -0,0 +1,67 @@ +import { mount } from '@vue/test-utils'; +import Status from '../status'; + +describe('d-status', () => { + + it('type', () => { + const wrapper = mount(Status, { + props: { type: 'success' }, + }); + expect(wrapper.classes()).toContain('devui-status-bg-success'); + }); + + it('type', () => { + const wrapper = mount(Status, { + props: { type: 'error' }, + }); + expect(wrapper.classes()).toContain('devui-status-bg-error'); + }); + + it('type', () => { + const wrapper = mount(Status, { + props: { type: 'warning' }, + }); + expect(wrapper.classes()).toContain('devui-status-bg-warning'); + }); + + it('type', () => { + const wrapper = mount(Status, { + props: { type: 'initial' }, + }); + expect(wrapper.classes()).toContain('devui-status-bg-initial'); + }); + + it('type', () => { + const wrapper = mount(Status, { + props: { type: 'waiting' }, + }); + expect(wrapper.classes()).toContain('devui-status-bg-waiting'); + }); + + it('type', () => { + const wrapper = mount(Status, { + props: { type: 'running' }, + }); + expect(wrapper.classes()).toContain('devui-status-bg-running'); + }); + + it('type', () => { + const wrapper = mount(Status, { + props: { type: 'invalid' }, + }); + expect(wrapper.classes()).toContain('devui-status-bg-invalid'); + }); + + + + + it('slot', () => { + const statusText = 'vue3 devui'; + const wrapper = mount(Status, { + slots: { + default: statusText + } + }); + expect(wrapper.text()).toEqual(statusText); + }); +}); diff --git a/devui/status/demo/status-demo.tsx b/devui/status/demo/status-demo.tsx index 63003ea6..96d96ccd 100644 --- a/devui/status/demo/status-demo.tsx +++ b/devui/status/demo/status-demo.tsx @@ -1,12 +1,29 @@ -import { defineComponent } from 'vue' + +import { defineComponent, computed } from 'vue' +import '../status.scss'; +export type IStatusType = 'success' | 'error' | 'reset' | 'initial' |'waiting'|'running'|'invalid'; export default defineComponent({ - name: 'd-status-demo', + name: 'DStatus', props: { + type:{ + default: 'invalid', + value: String as () => IStatusType + } }, setup(props, ctx) { + + const typeClass = computed(() => { + const { type } = props; + const typeClassStr = `devui-status devui-status-bg-${type}`; + return typeClassStr; + }); + return () => { - return
devui-status-demo
+ + return + {ctx.slots.default?.()} + } } }) \ No newline at end of file diff --git a/devui/status/status.scss b/devui/status/status.scss new file mode 100644 index 00000000..5b0ed270 --- /dev/null +++ b/devui/status/status.scss @@ -0,0 +1,65 @@ +@import '../style/mixins/index'; +@import '../style/theme/color'; +@import '../style/theme/variables'; +@import '../style/theme/font'; +@import '../style/theme/corner'; + +.devui-status { + line-height: 20px; + height: 20px; + display: flex; + align-items: center; + + &::before { + display: inline-block; + content: ''; + width: 10px; + height: 10px; + margin-right: 5px; + border-radius: 100%; + } +} + +.devui-status.devui-status-bg { + &-success { + &::before { + background-color: $devui-success; + } + } + + &-error { + &::before { + background-color: $devui-danger; + } + } + + &-warning { + &::before { + background-color: $devui-warning; + } + } + + &-initial { + &::before { + background-color: $devui-initial; + } + } + + &-waiting { + &::before { + background-color: $devui-waiting; + } + } + + &-running { + &::before { + background-color: $devui-info; + } + } + + &-invalid { + &::before { + background-color: $devui-dividing-line; + } + } +} diff --git a/devui/status/status.tsx b/devui/status/status.tsx index 3252bd0e..96d96ccd 100644 --- a/devui/status/status.tsx +++ b/devui/status/status.tsx @@ -1,12 +1,29 @@ -import { defineComponent } from 'vue' + +import { defineComponent, computed } from 'vue' +import '../status.scss'; +export type IStatusType = 'success' | 'error' | 'reset' | 'initial' |'waiting'|'running'|'invalid'; export default defineComponent({ - name: 'd-status', + name: 'DStatus', props: { + type:{ + default: 'invalid', + value: String as () => IStatusType + } }, setup(props, ctx) { + + const typeClass = computed(() => { + const { type } = props; + const typeClassStr = `devui-status devui-status-bg-${type}`; + return typeClassStr; + }); + return () => { - return
devui-status
+ + return + {ctx.slots.default?.()} + } } }) \ No newline at end of file -- Gitee From a60657f15ecf1250adc21fe9a36a974868052bfe Mon Sep 17 00:00:00 2001 From: liusu <851209312@qq.com> Date: Thu, 5 Aug 2021 18:04:30 +0800 Subject: [PATCH 2/4] =?UTF-8?q?fix():=20=E4=BF=AE=E6=94=B9type=E7=B1=BB?= =?UTF-8?q?=E5=9E=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/status/demo/status-demo.tsx | 2 +- devui/status/status.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/devui/status/demo/status-demo.tsx b/devui/status/demo/status-demo.tsx index 96d96ccd..6e6d7860 100644 --- a/devui/status/demo/status-demo.tsx +++ b/devui/status/demo/status-demo.tsx @@ -1,7 +1,7 @@ import { defineComponent, computed } from 'vue' import '../status.scss'; -export type IStatusType = 'success' | 'error' | 'reset' | 'initial' |'waiting'|'running'|'invalid'; +export type IStatusType = 'success' | 'error' | 'initial' | 'warning' | 'waiting' | 'running' | 'invalid'; export default defineComponent({ name: 'DStatus', diff --git a/devui/status/status.tsx b/devui/status/status.tsx index 96d96ccd..52d063c6 100644 --- a/devui/status/status.tsx +++ b/devui/status/status.tsx @@ -1,7 +1,7 @@ import { defineComponent, computed } from 'vue' -import '../status.scss'; -export type IStatusType = 'success' | 'error' | 'reset' | 'initial' |'waiting'|'running'|'invalid'; +import './status.scss'; +export type IStatusType = 'success' | 'error' | 'initial' | 'warning' | 'waiting' | 'running' | 'invalid'; export default defineComponent({ name: 'DStatus', -- Gitee From c8954a5adbb797e273ce66d4369d6d205430af3e Mon Sep 17 00:00:00 2001 From: liusu <851209312@qq.com> Date: Fri, 6 Aug 2021 21:46:12 +0800 Subject: [PATCH 3/4] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9Edemo?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/status/demo/code/status-code.tsx | 21 ++++++++++++++ devui/status/demo/status-demo.tsx | 40 +++++++++++--------------- devui/status/doc/api-cn.md | 2 +- devui/status/doc/api-en.md | 2 +- devui/status/status.tsx | 13 +++++---- 5 files changed, 47 insertions(+), 31 deletions(-) create mode 100644 devui/status/demo/code/status-code.tsx diff --git a/devui/status/demo/code/status-code.tsx b/devui/status/demo/code/status-code.tsx new file mode 100644 index 00000000..00384b10 --- /dev/null +++ b/devui/status/demo/code/status-code.tsx @@ -0,0 +1,21 @@ +import { defineComponent } from 'vue'; +import Status from '../../status'; + +export default defineComponent({ + name: 'DStatusCode', + setup() { + return () => { + return ( +
+ success + error + warning + initial + waiting + running + invalid +
+ ); + } + } +}); \ No newline at end of file diff --git a/devui/status/demo/status-demo.tsx b/devui/status/demo/status-demo.tsx index 6e6d7860..27155077 100644 --- a/devui/status/demo/status-demo.tsx +++ b/devui/status/demo/status-demo.tsx @@ -1,29 +1,21 @@ - -import { defineComponent, computed } from 'vue' -import '../status.scss'; -export type IStatusType = 'success' | 'error' | 'initial' | 'warning' | 'waiting' | 'running' | 'invalid'; - +import { defineComponent } from 'vue' +import CodeBox from '../../shared/devui-codebox/devui-codebox' +import Status from './code/status-code' +import StatusCode from './code/status-code.tsx?raw' export default defineComponent({ - name: 'DStatus', - props: { - type:{ - default: 'invalid', - value: String as () => IStatusType - } - }, - setup(props, ctx) { - - const typeClass = computed(() => { - const { type } = props; - const typeClassStr = `devui-status devui-status-bg-${type}`; - return typeClassStr; - }); - + name: 'DStatusDemo', + setup() { + const StatusSource: any[] = [{title: 'TSX', language: 'TSX', code: StatusCode}]; return () => { - - return - {ctx.slots.default?.()} - + return
+
+
{ '基本用法' }
+
+ + + +
+
} } }) \ No newline at end of file diff --git a/devui/status/doc/api-cn.md b/devui/status/doc/api-cn.md index ab04ceb4..285635fa 100644 --- a/devui/status/doc/api-cn.md +++ b/devui/status/doc/api-cn.md @@ -13,4 +13,4 @@ import { StatusModule } from 'ng-devui/status'; | 参数 | 类型 | 默认 | 说明 | 跳转 Demo | | :--: | :------: | :-------: | :--------------------------------------------------------------------------- | ------------------------------------------- | -| type | `invalid\|running\|waiting\|important\|less-important\|error` | 'invalid' | 必选，类型，值有 success、error、warning、initial、waiting、running、invalid | [基本用法](demo#basic-usage) | +| type | `success\|error\|warning\|initial\|running\|invalid` | 'invalid' | 必选，类型，值有 success、error、warning、initial、waiting、running、invalid | [基本用法](demo#basic-usage) | diff --git a/devui/status/doc/api-en.md b/devui/status/doc/api-en.md index 38090811..ec6128c3 100644 --- a/devui/status/doc/api-en.md +++ b/devui/status/doc/api-en.md @@ -15,4 +15,4 @@ On the page | Parameter | Type | Default | Description | Jump to Demo | | :-------: | :-----------------------------------------------------------: | :-------: | :----------------------------------------------------------------------------------------- | -------------------------------------------------------- | -| type | `invalid\|running\|waiting\|important\|less-important\|error` | 'invalid' | Required. The value can be success, error, warning, initial, waiting, running, or invalid. | [Basic usage](demo#basic-usage) | +| type | `success\|error\|warning\|initial\|running\|invalid` | 'invalid' | Required. The value can be success、error、warning、initial、waiting、running, or invalid. | [Basic usage](demo#basic-usage) | diff --git a/devui/status/status.tsx b/devui/status/status.tsx index 52d063c6..1f390dd0 100644 --- a/devui/status/status.tsx +++ b/devui/status/status.tsx @@ -8,19 +8,22 @@ export default defineComponent({ props: { type:{ default: 'invalid', - value: String as () => IStatusType + value: (val:IStatusType):IStatusType => { + return val + } } }, setup(props, ctx) { - const typeClass = computed(() => { const { type } = props; - const typeClassStr = `devui-status devui-status-bg-${type}`; + const typeStatus = ['success' , 'error' , 'initial' , 'warning' , 'waiting' , 'running' , 'invalid']; + let typeClassStr = `devui-status devui-status-bg-invalid`; + if(typeStatus.includes(type)){ + typeClassStr = `devui-status devui-status-bg-${type}`; + } return typeClassStr; }); - return () => { - return {ctx.slots.default?.()} -- Gitee From 04e03dcb4ea57ce16bec757a9d326348f1e6fce9 Mon Sep 17 00:00:00 2001 From: liusu <851209312@qq.com> Date: Sat, 7 Aug 2021 18:32:24 +0800 Subject: [PATCH 4/4] =?UTF-8?q?fix:=201.=E4=BF=AE=E5=A4=8D=E8=AF=AD?= =?UTF-8?q?=E6=B3=95=E5=88=86=E5=8F=B7=202.=E4=BF=AE=E6=94=B9=E6=B5=8B?= =?UTF-8?q?=E8=AF=95=E7=94=A8=E4=BE=8B=203.=E4=BF=AE=E6=94=B9status=20Prop?= =?UTF-8?q?Type?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/status/__tests__/status.spec.ts | 53 ++++++++------------------- devui/status/demo/status-demo.tsx | 8 ++-- devui/status/demo/status.route.ts | 8 ++-- devui/status/status.tsx | 6 +-- 4 files changed, 26 insertions(+), 49 deletions(-) diff --git a/devui/status/__tests__/status.spec.ts b/devui/status/__tests__/status.spec.ts index 159251c9..5bd4546d 100644 --- a/devui/status/__tests__/status.spec.ts +++ b/devui/status/__tests__/status.spec.ts @@ -2,63 +2,42 @@ import { mount } from '@vue/test-utils'; import Status from '../status'; describe('d-status', () => { - - it('type', () => { + it('type', async () => { const wrapper = mount(Status, { - props: { type: 'success' }, + props: { type: 'success' } }); + expect(wrapper.classes()).toContain('devui-status-bg-success'); - }); - it('type', () => { - const wrapper = mount(Status, { - props: { type: 'error' }, - }); + await wrapper.setProps({ type: 'error' }); + expect(wrapper.classes()).toContain('devui-status-bg-error'); - }); - it('type', () => { - const wrapper = mount(Status, { - props: { type: 'warning' }, - }); + await wrapper.setProps({ type: 'warning' }); + expect(wrapper.classes()).toContain('devui-status-bg-warning'); - }); - it('type', () => { - const wrapper = mount(Status, { - props: { type: 'initial' }, - }); + await wrapper.setProps({type: 'initial'}); + expect(wrapper.classes()).toContain('devui-status-bg-initial'); - }); - it('type', () => { - const wrapper = mount(Status, { - props: { type: 'waiting' }, - }); + await wrapper.setProps({type: 'waiting'}); + expect(wrapper.classes()).toContain('devui-status-bg-waiting'); - }); - it('type', () => { - const wrapper = mount(Status, { - props: { type: 'running' }, - }); + await wrapper.setProps({type: 'running'}); + expect(wrapper.classes()).toContain('devui-status-bg-running'); - }); - it('type', () => { - const wrapper = mount(Status, { - props: { type: 'invalid' }, - }); + await wrapper.setProps({type: 'invalid'}); + expect(wrapper.classes()).toContain('devui-status-bg-invalid'); }); - - - it('slot', () => { const statusText = 'vue3 devui'; const wrapper = mount(Status, { - slots: { + slots: { default: statusText } }); diff --git a/devui/status/demo/status-demo.tsx b/devui/status/demo/status-demo.tsx index 27155077..5cf904d2 100644 --- a/devui/status/demo/status-demo.tsx +++ b/devui/status/demo/status-demo.tsx @@ -1,7 +1,7 @@ -import { defineComponent } from 'vue' -import CodeBox from '../../shared/devui-codebox/devui-codebox' -import Status from './code/status-code' -import StatusCode from './code/status-code.tsx?raw' +import { defineComponent } from 'vue'; +import CodeBox from '../../shared/devui-codebox/devui-codebox'; +import Status from './code/status-code'; +import StatusCode from './code/status-code.tsx?raw'; export default defineComponent({ name: 'DStatusDemo', setup() { diff --git a/devui/status/demo/status.route.ts b/devui/status/demo/status.route.ts index adb8b979..a5a70083 100644 --- a/devui/status/demo/status.route.ts +++ b/devui/status/demo/status.route.ts @@ -1,8 +1,8 @@ -import StatusDemoComponent from './status-demo' -import DevUIApiComponent from '../../shared/devui-api/devui-api' +import StatusDemoComponent from './status-demo'; +import DevUIApiComponent from '../../shared/devui-api/devui-api'; -import ApiCn from '../doc/api-cn.md' -import ApiEn from '../doc/api-en.md' +import ApiCn from '../doc/api-cn.md'; +import ApiEn from '../doc/api-en.md'; const routes = [ { path: '', redirectTo: 'demo' }, { path: 'demo', component: StatusDemoComponent}, diff --git a/devui/status/status.tsx b/devui/status/status.tsx index 1f390dd0..842e680e 100644 --- a/devui/status/status.tsx +++ b/devui/status/status.tsx @@ -1,5 +1,5 @@ -import { defineComponent, computed } from 'vue' +import { defineComponent, computed } from 'vue'; import './status.scss'; export type IStatusType = 'success' | 'error' | 'initial' | 'warning' | 'waiting' | 'running' | 'invalid'; @@ -8,9 +8,7 @@ export default defineComponent({ props: { type:{ default: 'invalid', - value: (val:IStatusType):IStatusType => { - return val - } + type: String as () => IStatusType } }, setup(props, ctx) { -- Gitee