From bd994c93bfc3a1d2da78c7417e01e60b0882b539 Mon Sep 17 00:00:00 2001 From: Kagol Date: Fri, 1 Apr 2022 19:34:54 +0800 Subject: [PATCH 1/3] =?UTF-8?q?chore(splitter):=20=E4=BF=AE=E5=A4=8Deslint?= =?UTF-8?q?=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../devui-vue/devui/splitter/__tests__/splitter.spec.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/devui-vue/devui/splitter/__tests__/splitter.spec.ts b/packages/devui-vue/devui/splitter/__tests__/splitter.spec.ts index d678376808..8e0168bf5c 100644 --- a/packages/devui-vue/devui/splitter/__tests__/splitter.spec.ts +++ b/packages/devui-vue/devui/splitter/__tests__/splitter.spec.ts @@ -1,5 +1,5 @@ import { mount, VueWrapper } from '@vue/test-utils'; -import { ref } from 'vue'; +import { ComponentPublicInstance, ref } from 'vue'; import DSplitter from '../src/splitter'; import DSplitterPane from '../src/splitter-pane'; @@ -74,7 +74,7 @@ describe('splitter', () => { }, }; - let wrapper: VueWrapper; + let wrapper: VueWrapper; let splitterElement: HTMLElement; beforeEach(() => { wrapper = mount(testComponent); @@ -325,7 +325,7 @@ describe('splitter', () => { }, }; - let wrapper: VueWrapper; + let wrapper: VueWrapper; beforeEach(() => { wrapper = mount(testComponent); }); From c265e167b60647eabf5a70562ddfea5d616e0227 Mon Sep 17 00:00:00 2001 From: Kagol Date: Fri, 1 Apr 2022 19:43:41 +0800 Subject: [PATCH 2/3] =?UTF-8?q?chore(timeline):=20=E4=BF=AE=E5=A4=8Deslint?= =?UTF-8?q?=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../devui/timeline/__tests__/timeline.spec.ts | 36 ++++++------ .../devui/timeline/src/timeline-types.ts | 14 ++--- .../devui-vue/devui/timeline/src/timeline.tsx | 58 ++++++++++--------- 3 files changed, 55 insertions(+), 53 deletions(-) diff --git a/packages/devui-vue/devui/timeline/__tests__/timeline.spec.ts b/packages/devui-vue/devui/timeline/__tests__/timeline.spec.ts index 25c6a5ac2f..7f265d9317 100644 --- a/packages/devui-vue/devui/timeline/__tests__/timeline.spec.ts +++ b/packages/devui-vue/devui/timeline/__tests__/timeline.spec.ts @@ -56,7 +56,7 @@ describe('timeline test', () => { it('position should be rendered correctly', async () => { - const wrapper = mount({ + const wrapperPosition = mount({ components: { DTimeline, DTimelineItem }, template: ` @@ -70,22 +70,22 @@ describe('timeline test', () => { return; } }); - let timeAxisItems = wrapper.findAll('.devui-timeline-item'); + let timeAxisItemsPosition = wrapperPosition.findAll('.devui-timeline-item'); // 内容是否在正确的位置 - expect(timeAxisItems[0].find('.devui-timeline-item-data-left .devui-timeline-item-content').exists()).toBe(true); - expect(timeAxisItems[1].find('.devui-timeline-item-data-right .devui-timeline-item-content').exists()).toBe(true); - expect(timeAxisItems[2].find('.devui-timeline-item-data-right .devui-timeline-item-content').exists()).toBe(true); + expect(timeAxisItemsPosition[0].find('.devui-timeline-item-data-left .devui-timeline-item-content').exists()).toBe(true); + expect(timeAxisItemsPosition[1].find('.devui-timeline-item-data-right .devui-timeline-item-content').exists()).toBe(true); + expect(timeAxisItemsPosition[2].find('.devui-timeline-item-data-right .devui-timeline-item-content').exists()).toBe(true); // 设置横向时间轴 - await wrapper.setProps({ direction: 'horizontal' }); - timeAxisItems = wrapper.findAll('.devui-timeline-item'); - expect(timeAxisItems[0].find('.devui-timeline-item-data-bottom .devui-timeline-item-content').exists()).toBe(true); - expect(timeAxisItems[1].find('.devui-timeline-item-data-top .devui-timeline-item-content').exists()).toBe(true); - expect(timeAxisItems[3].find('.devui-timeline-item-data-top .devui-timeline-item-content').exists()).toBe(true); + await wrapperPosition.setProps({ direction: 'horizontal' }); + timeAxisItemsPosition = wrapperPosition.findAll('.devui-timeline-item'); + expect(timeAxisItemsPosition[0].find('.devui-timeline-item-data-bottom .devui-timeline-item-content').exists()).toBe(true); + expect(timeAxisItemsPosition[1].find('.devui-timeline-item-data-top .devui-timeline-item-content').exists()).toBe(true); + expect(timeAxisItemsPosition[3].find('.devui-timeline-item-data-top .devui-timeline-item-content').exists()).toBe(true); }); it('time-position should be rendered correctly', async () => { - const wrapper = mount({ + const wrapperTimePosition = mount({ components: { DTimeline, DTimelineItem }, template: ` @@ -97,16 +97,16 @@ describe('timeline test', () => { return; } }); - const timeAxisItems = wrapper.findAll('.devui-timeline-item'); + const timeAxisItemsTimePosition = wrapperTimePosition.findAll('.devui-timeline-item'); // 时间是否在正确的位置 - expect(timeAxisItems[0].find('.devui-timeline-item-data-left .devui-timeline-item-time').exists()).toBe(false); - expect(timeAxisItems[0].find('.devui-timeline-item-axis .devui-timeline-item-time').exists()).toBe(true); - expect(timeAxisItems[1].find('.devui-timeline-item-data-left .devui-timeline-item-time').exists()).toBe(true); - expect(timeAxisItems[1].find('.devui-timeline-item-axis .devui-timeline-item-time').exists()).toBe(false); + expect(timeAxisItemsTimePosition[0].find('.devui-timeline-item-data-left .devui-timeline-item-time').exists()).toBe(false); + expect(timeAxisItemsTimePosition[0].find('.devui-timeline-item-axis .devui-timeline-item-time').exists()).toBe(true); + expect(timeAxisItemsTimePosition[1].find('.devui-timeline-item-data-left .devui-timeline-item-time').exists()).toBe(true); + expect(timeAxisItemsTimePosition[1].find('.devui-timeline-item-axis .devui-timeline-item-time').exists()).toBe(false); }); it('line-style should be rendered correctly', async () => { - const wrapper = mount({ + const wrapperLineStyle = mount({ components: { DTimeline, DTimelineItem }, template: ` @@ -121,7 +121,7 @@ describe('timeline test', () => { return; } }); - const timeAxisItemAxis = wrapper.findAll('.devui-timeline-item .devui-timeline-item-axis'); + const timeAxisItemAxis = wrapperLineStyle.findAll('.devui-timeline-item .devui-timeline-item-axis'); expect(timeAxisItemAxis[0].find('.devui-timeline-item-line').classes()).toContain('devui-timeline-item-line-style-solid'); expect(timeAxisItemAxis[1].find('.devui-timeline-item-line').classes()).toContain('devui-timeline-item-line-style-dashed'); expect(timeAxisItemAxis[2].find('.devui-timeline-item-line').classes()).toContain('devui-timeline-item-line-style-dotted'); diff --git a/packages/devui-vue/devui/timeline/src/timeline-types.ts b/packages/devui-vue/devui/timeline/src/timeline-types.ts index f1381cce69..1b22643946 100644 --- a/packages/devui-vue/devui/timeline/src/timeline-types.ts +++ b/packages/devui-vue/devui/timeline/src/timeline-types.ts @@ -1,4 +1,4 @@ -import type { PropType, ExtractPropTypes,SetupContext } from 'vue'; +import type { PropType, ExtractPropTypes, SetupContext } from 'vue'; export type DataDirection = 'vertical' | 'horizontal'; export type Mode = 'normal' | 'alternative'; export type TimePosition = 'left' | 'bottom'; @@ -8,28 +8,28 @@ export const timeAxisProps = { // 设置时间轴方向 direction: { type: String as PropType, - default: 'vertical' + default: 'vertical', }, // 设置居中 center: { type: Boolean, - default: false + default: false, }, // 设置排序方向 mode: { type: String as PropType, - default: 'normal' + default: 'normal', }, // 设置时间位置 timePosition: { type: String as PropType, - default: 'left' - } + default: 'left', + }, } as const; export type TimelineProps = ExtractPropTypes; export interface TimelineRootType { - ctx: SetupContext; + ctx: SetupContext; props: TimelineProps; } diff --git a/packages/devui-vue/devui/timeline/src/timeline.tsx b/packages/devui-vue/devui/timeline/src/timeline.tsx index e29df6dd13..11b0f16291 100644 --- a/packages/devui-vue/devui/timeline/src/timeline.tsx +++ b/packages/devui-vue/devui/timeline/src/timeline.tsx @@ -1,37 +1,39 @@ -import {defineComponent, Fragment, nextTick, onMounted, provide, reactive, ref, toRef, watch} from 'vue'; -import {timeAxisProps, TimelineProps, TimelineRootType} from './timeline-types'; +import { defineComponent, Fragment, nextTick, onMounted, provide, reactive, ref, toRef, watch } from 'vue'; +import { timeAxisProps, TimelineProps, TimelineRootType } from './timeline-types'; import TimelineItem from './components/timeline-item'; import './timeline.scss'; export default defineComponent({ name: 'DTimeline', - components: {TimelineItem}, + components: { TimelineItem }, props: timeAxisProps, emits: [], setup(props: TimelineProps, ctx) { - provide('timeAxis', {ctx, props}); + provide('timeAxis', { ctx, props }); const timeAxis = ref(); const style = reactive({ marginLeft: '0px', - height: 'auto' + height: 'auto', }); const setStyle = () => { style.height = 'auto'; style.marginLeft = '0px'; if (props.direction === 'horizontal') { nextTick(() => { - const el = timeAxis.value; + const element = timeAxis.value; if (props.center) { // 计算偏移量 - style.marginLeft = (el?.firstElementChild?.clientWidth || 0) / 2 + 'px'; + style.marginLeft = (element?.firstElementChild?.clientWidth || 0) / 2 + 'px'; } // 算出最大高度 - style.height = Math.max( - ...Array.from(el?.querySelectorAll('.devui-timeline-item-data-top')).map(el => el.clientHeight), - ...Array.from(el?.querySelectorAll('.devui-timeline-item-data-bottom')).map(el => el.clientHeight) - ) * 2 - + Math.max(...Array.from(el?.querySelectorAll('.devui-timeline-item-axis')).map(el => el.clientHeight)) - + 'px'; + style.height = + Math.max( + ...Array.from(element?.querySelectorAll('.devui-timeline-item-data-top')).map((el) => el.clientHeight), + ...Array.from(element?.querySelectorAll('.devui-timeline-item-data-bottom')).map((el) => el.clientHeight) + ) * + 2 + + Math.max(...Array.from(element?.querySelectorAll('.devui-timeline-item-axis')).map((el) => el.clientHeight)) + + 'px'; }); } }; @@ -43,14 +45,11 @@ export default defineComponent({ }); return () => { const renderItemPosition = (item, position?) => { - return position - ? - : ; + return position ? : ; }; - const renderItem = () => { - const slots: any[] = ctx.slots.default?.() ?? []; + const slots = ctx.slots.default?.() ?? []; let children; if (slots.length === 1 && slots[0].type === Fragment) { children = slots[0].children || []; @@ -59,30 +58,34 @@ export default defineComponent({ } return children.map((item, index) => { // 默认隐藏最后一条线 - if ((index + 1) === children.length) { + if (index + 1 === children.length) { if (!item.props?.lineStyle && !item.props?.['line-style']) { - item = ; + item = ; } } // 如果没有单独设置time-position属性，则以全局为准 if (!item.props?.timePosition && !item.props?.['time-position']) { - item = ; + item = ; } if (props.direction === 'horizontal') { // 判断是否有自定义的位置信息，且是否正确 有，且正确直接用 - if (item.props?.position === 'top' || item.props?.position === 'bottom') {return item;} + if (item.props?.position === 'top' || item.props?.position === 'bottom') { + return item; + } // 判断是否需要交替 if (props.mode === 'alternative') { - return renderItemPosition(item, index % 2 == 0 ? 'bottom' : 'top'); + return renderItemPosition(item, index % 2 === 0 ? 'bottom' : 'top'); } else { // 不需要交替的直接给默认值 return renderItemPosition(item, 'bottom'); } } else { - if (item.props?.position === 'left' || item.props?.position === 'right') {return item;} + if (item.props?.position === 'left' || item.props?.position === 'right') { + return item; + } if (props.mode === 'alternative') { - return renderItemPosition(item, index % 2 == 0 ? 'left' : 'right'); + return renderItemPosition(item, index % 2 === 0 ? 'left' : 'right'); } else { return renderItemPosition(item, 'right'); } @@ -98,11 +101,10 @@ export default defineComponent({
+ style={style}> {renderItem()}
); }; - } + }, }); From 4dc181d7a0287043a7cd77ef833482b820b3bab5 Mon Sep 17 00:00:00 2001 From: Kagol Date: Fri, 1 Apr 2022 19:57:54 +0800 Subject: [PATCH 3/3] =?UTF-8?q?chore(rate):=20=E4=BF=AE=E5=A4=8Deslint?= =?UTF-8?q?=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../devui-vue/devui/progress/src/progress-types.ts | 13 ++++++++++--- packages/devui-vue/devui/progress/src/progress.tsx | 4 ++-- packages/devui-vue/devui/rate/src/rate.tsx | 12 +++++++++--- 3 files changed, 21 insertions(+), 8 deletions(-) diff --git a/packages/devui-vue/devui/progress/src/progress-types.ts b/packages/devui-vue/devui/progress/src/progress-types.ts index f6fd60bf15..2200f1a0b3 100644 --- a/packages/devui-vue/devui/progress/src/progress-types.ts +++ b/packages/devui-vue/devui/progress/src/progress-types.ts @@ -1,9 +1,16 @@ import { ExtractPropTypes } from 'vue'; -export interface SvgData { +interface ISvgPath { + stroke: string; + strokeDasharray: string; + strokeDashoffset: string; + transition: string; +} + +export interface ISvgData { pathString: string; - trailPath: any; - strokePath: any; + trailPath: ISvgPath; + strokePath: ISvgPath; } export const progressProps = { diff --git a/packages/devui-vue/devui/progress/src/progress.tsx b/packages/devui-vue/devui/progress/src/progress.tsx index 0d16c6bcf2..15bd9a06dc 100644 --- a/packages/devui-vue/devui/progress/src/progress.tsx +++ b/packages/devui-vue/devui/progress/src/progress.tsx @@ -1,5 +1,5 @@ import { defineComponent, reactive, toRefs, watch } from 'vue'; -import { ProgressProps, progressProps, SvgData } from './progress-types'; +import { ProgressProps, progressProps, ISvgData } from './progress-types'; import './progress.scss'; export default defineComponent({ @@ -8,7 +8,7 @@ export default defineComponent({ setup(props: ProgressProps) { const { height, percentage, percentageText, barBgColor, isCircle, strokeWidth, showContent } = toRefs(props); - const data: SvgData = reactive({ + const data: ISvgData = reactive({ pathString: '', trailPath: null, strokePath: null, diff --git a/packages/devui-vue/devui/rate/src/rate.tsx b/packages/devui-vue/devui/rate/src/rate.tsx index 7ae99fc525..a32629af85 100644 --- a/packages/devui-vue/devui/rate/src/rate.tsx +++ b/packages/devui-vue/devui/rate/src/rate.tsx @@ -7,7 +7,9 @@ export default defineComponent({ props: rateProps, emits: ['change', 'update:modelValue'], setup(props: RateProps, ctx) { - const totalLevelArray = reactive[]>([]); + const totalLevelArray = reactive<{ + width: string; + }[]>([]); const chooseValue = ref(0); // 根据mouseMove，mouseLeave,select等操作，改变颜色与是否选中 @@ -117,7 +119,9 @@ export default defineComponent({ xmlns-xlink="http://www.w3.org/1999/xlink"> - + @@ -148,7 +152,9 @@ export default defineComponent({ xmlns-xlink="http://www.w3.org/1999/xlink"> - +