sh-view 2.7.7 → 2.7.9

package/README.md

@@ -71,16 +71,16 @@ createApp(App).use(ShView).mount('#app')
 
 
 #### 项目预览
-<img alt="img.png" src="examples/assets/img/img.png" width="100%"/>
-<img alt="img_1.png" src="examples/assets/img/img_1.png" width="49%"/>
-<img alt="img_2.png" src="examples/assets/img/img_2.png" width="49%"/>
-<img alt="img_3.png" src="examples/assets/img/img_3.png" width="49%"/>
-<img alt="img_4.png" src="examples/assets/img/img_4.png" width="49%"/>
-<img alt="img_5.png" src="examples/assets/img/img_5.png" width="49%"/>
-<img alt="img_6.png" src="examples/assets/img/img_6.png" width="49%"/>
-<img alt="img_7.png" src="examples/assets/img/img_7.png" width="49%"/>
-<img alt="img_8.png" src="examples/assets/img/img_8.png" width="49%"/>
-<img alt="img_9.png" src="examples/assets/img/img_9.png" width="49%"/>
-<img alt="img_10.png" src="examples/assets/img/img_10.png" width="49%"/>
-<img alt="img_11.png" src="examples/assets/img/img_11.png" width="49%"/>
-<img alt="img_12.png" src="examples/assets/img/img_12.png" width="49%"/>
+<img alt="img.png" src="public/img/img.png" width="100%"/>
+<img alt="img_1.png" src="public/img/img_1.png" width="49%"/>
+<img alt="img_2.png" src="public/img/img_2.png" width="49%"/>
+<img alt="img_3.png" src="public/img/img_3.png" width="49%"/>
+<img alt="img_4.png" src="public/img/img_4.png" width="49%"/>
+<img alt="img_5.png" src="public/img/img_5.png" width="49%"/>
+<img alt="img_6.png" src="public/img/img_6.png" width="49%"/>
+<img alt="img_7.png" src="public/img/img_7.png" width="49%"/>
+<img alt="img_8.png" src="public/img/img_8.png" width="49%"/>
+<img alt="img_9.png" src="public/img/img_9.png" width="49%"/>
+<img alt="img_10.png" src="public/img/img_10.png" width="49%"/>
+<img alt="img_11.png" src="public/img/img_11.png" width="49%"/>
+<img alt="img_12.png" src="public/img/img_12.png" width="49%"/>

package/other.js

@@ -0,0 +1,8 @@
+import { defineAsyncComponent } from 'vue'
+
+export const ShCronModal = defineAsyncComponent(() => import('./packages/other/sh-cron-modal/index.vue'))
+export const ShMarkdown = defineAsyncComponent(() => import('./packages/other/sh-markdown/index.vue'))
+export const ShMenu = defineAsyncComponent(() => import('./packages/other/sh-menu/index.vue'))
+export const ShMenuCard = defineAsyncComponent(() => import('./packages/other/sh-menu-card/index.vue'))
+export const ShPreview = defineAsyncComponent(() => import('./packages/other/sh-preview/index.vue'))
+export const ShSystemTip = defineAsyncComponent(() => import('./packages/other/sh-system-tip/index.vue'))

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "sh-view",
-  "version": "2.7.7",
-  "description": "基于vxe-table二次封装",
+  "version": "2.7.9",
+  "description": "基于vxe-table二次封装,更包含Alert,Badge,Card,CodeEditor,Col,Corner,CountTo,Drawer,Empty,Form,Header,Icon,List,Loading,Modal,Noticebar,Poptip,Progress,PullRefresh,Query,Result,Row,Split,Grid,Table,Tabs,Tag,Toolbar,Tree,Upload,WaterFall,WaterMark等丰富组件库",
   "main": "packages/index.js",
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -18,6 +18,7 @@
     "@codemirror/lang-json": "^6.0.1",
     "@codemirror/lang-sql": "^6.5.2",
     "@tinymce/tinymce-vue": "^5.0.0",
+    "@wolf-table/table": "^0.0.1",
     "babel-polyfill": "^6.26.0",
     "codemirror": "^6.0.1",
     "core-js": "^3.32.2",
@@ -29,7 +30,7 @@
     "jszip": "^3.10.1",
     "lunar-typescript": "^1.6.10",
     "popper.js": "^1.16.1",
-    "sh-tools": "^2.2.2",
+    "sh-tools": "^2.2.5",
     "tinymce": "^5.10.5",
     "vue": "^3.3.4",
     "vue-masonry": "^0.16.0",

package/packages/components/index.js

@@ -1,39 +1,39 @@
 // 全局公共封装组件
-import ShAlert from './global-components/sh-alert/index.vue'
-import ShBadge from './global-components/sh-badge/index.vue'
-import ShCalendar from './global-components/sh-calendar/index.vue'
-import ShCard from './global-components/sh-card/index.vue'
-import ShCodeEditor from './global-components/sh-code-editor/index.vue'
-import ShCol from './global-components/sh-col/index.vue'
-import ShCorner from './global-components/sh-corner/index.vue'
-import ShCountTo from './global-components/sh-count-to/index.vue'
-import ShDate from './global-components/sh-date/index.vue'
-import ShDrawer from './global-components/sh-drawer/index.vue'
-import ShEmpty from './global-components/sh-empty/index.vue'
-import ShForm from './global-components/sh-form/form.vue'
-import ShHeader from './global-components/sh-header/index.vue'
-import ShIcon from './global-components/sh-icon/index.vue'
-import ShImage from './global-components/sh-image/index.vue'
-import ShList from './global-components/sh-list/index.vue'
-import ShLoading from './global-components/sh-loading/index.vue'
-import ShModal from './global-components/sh-modal/index.vue'
-import ShNoticebar from './global-components/sh-noticebar/index.vue'
-import ShPoptip from './global-components/sh-poptip/index.vue'
-import ShProgress from './global-components/sh-progress/index.vue'
-import ShPullRefresh from './global-components/sh-pull-refresh/index.vue'
-import ShQuery from './global-components/sh-form/query.vue'
-import ShResult from './global-components/sh-result/index.vue'
-import ShRow from './global-components/sh-row/index.vue'
-import ShSplit from './global-components/sh-split/index.vue'
-import ShGrid from './global-components/sh-table/grid.vue'
-import ShTable from './global-components/sh-table/table.vue'
-import ShTabs from './global-components/sh-tabs/index.vue'
-import ShTag from './global-components/sh-tag/index.vue'
-import ShToolbar from './global-components/sh-toolbar/index.vue'
-import ShTree from './global-components/sh-tree/index.vue'
-import ShUpload from './global-components/sh-upload/index.vue'
-import ShWaterFall from './global-components/sh-water-fall/index.vue'
-import ShWaterMark from './global-components/sh-water-mark/index.vue'
+import ShAlert from './sh-alert/index.vue'
+import ShBadge from './sh-badge/index.vue'
+import ShCalendar from './sh-calendar/index.vue'
+import ShCard from './sh-card/index.vue'
+import ShCodeEditor from './sh-code-editor/index.vue'
+import ShCol from './sh-col/index.vue'
+import ShCorner from './sh-corner/index.vue'
+import ShCountTo from './sh-count-to/index.vue'
+import ShDate from './sh-date/index.vue'
+import ShDrawer from './sh-drawer/index.vue'
+import ShEmpty from './sh-empty/index.vue'
+import ShForm from './sh-form/form.vue'
+import ShHeader from './sh-header/index.vue'
+import ShIcon from './sh-icon/index.vue'
+import ShImage from './sh-image/index.vue'
+import ShList from './sh-list/index.vue'
+import ShLoading from './sh-loading/index.vue'
+import ShModal from './sh-modal/index.vue'
+import ShNoticebar from './sh-noticebar/index.vue'
+import ShPoptip from './sh-poptip/index.vue'
+import ShProgress from './sh-progress/index.vue'
+import ShPullRefresh from './sh-pull-refresh/index.vue'
+import ShQuery from './sh-form/query.vue'
+import ShResult from './sh-result/index.vue'
+import ShRow from './sh-row/index.vue'
+import ShSplit from './sh-split/index.vue'
+import ShGrid from './sh-table/grid.vue'
+import ShTable from './sh-table/table.vue'
+import ShTabs from './sh-tabs/index.vue'
+import ShTag from './sh-tag/index.vue'
+import ShToolbar from './sh-toolbar/index.vue'
+import ShTree from './sh-tree/index.vue'
+import ShUpload from './sh-upload/index.vue'
+import ShWaterFall from './sh-water-fall/index.vue'
+import ShWaterMark from './sh-water-mark/index.vue'
 import { VxeButton, VxeInput, VxeTextarea, VxeSelect } from 'vxe-table'
 
 const components = {

package/packages/components/{global-components/sh-alert → sh-alert}/index.vue

@@ -55,23 +55,16 @@ export default defineComponent({
 		const { slots, emit } = context
 		const closed = ref(false)
 
+		const iconTypeMap = {
+			success: 'ios-checkmark-circle',
+			info: 'ios-information-circle',
+			warning: 'ios-alert',
+			error: 'ios-close-circle'
+		}
+
 		const isDesc = computed(() => !!slots.content)
 		const iconType = computed(() => {
-			let type = ''
-			switch (props.type) {
-				case 'success':
-					type = 'ios-checkmark-circle'
-					break
-				case 'info':
-					type = 'ios-information-circle'
-					break
-				case 'warning':
-					type = 'ios-alert'
-					break
-				case 'error':
-					type = 'ios-close-circle'
-					break
-			}
+			let type = iconTypeMap[props.type]
 			if (isDesc.value) type += '-outline'
 			return type
 		})

package/packages/components/{global-components/sh-badge → sh-badge}/index.vue

@@ -72,19 +72,20 @@ export default defineComponent({
 			return parseInt(props.count) >= parseInt(props.overflowCount) ? `${props.overflowCount}+` : props.count
 		})
 		const hasBadge = computed(() => {
+			let hasStatus = false
 			if (props.count) {
-				status = !(parseInt(props.count) === 0)
+				hasStatus = !(parseInt(props.count) === 0)
 			}
 			if (props.dot) {
-				status = true
+				hasStatus = true
 				if (props.count !== null) {
 					if (parseInt(props.count) === 0) {
-						status = false
+						hasStatus = false
 					}
 				}
 			}
-			if (props.text !== '') status = true
-			return status || props.showZero
+			if (props.text !== '') hasStatus = true
+			return hasStatus || props.showZero
 		})
 		const hasCount = computed(() => {
 			if (props.count || props.text !== '') return true

package/packages/components/{global-components/sh-drawer → sh-drawer}/index.vue

@@ -25,7 +25,7 @@
 								<slot name="footer"></slot>
 							</div>
 						</div>
-						<div v-if="draggable && (placement === 'left' || placement === 'right')" class="sh-drawer-drag" :class="'sh-drawer-drag-' + placement" @mousedown="handleTriggerMousedown">
+						<div v-if="draggable" class="sh-drawer-drag" :class="'sh-drawer-drag-' + placement" @mousedown="handleTriggerMousedown">
 							<slot name="trigger">
 								<div class="sh-drawer-drag-move-trigger">
 									<div class="sh-drawer-drag-move-trigger-point"><i></i><i></i><i></i><i></i><i></i></div>
@@ -127,6 +127,7 @@ export default defineComponent({
 		const wrapperWidth = ref(props.width)
 		const wrapperHeight = ref(props.height)
 		const wrapperLeft = ref(0)
+		const wrapperTop = ref(0)
 		const minWidth = ref(256)
 		const minHeight = ref(256)
 		const id = ref($vUtils.randomStr(6))
@@ -134,6 +135,7 @@ export default defineComponent({
 		const sliderList = ref([])
 		let timer = null
 
+		const isHorizontal = computed(() => ['left', 'right'].includes(props.placement))
 		const wrapClasses = computed(() => {
 			return {
 				'sh-drawer-hidden': !wrapShow.value,
@@ -145,7 +147,7 @@ export default defineComponent({
 		})
 		const mainStyles = computed(() => {
 			let style = {}
-			if (props.placement === 'left' || props.placement === 'right') {
+			if (isHorizontal.value) {
 				const width = parseInt(dragWidth.value)
 				const styleWidth = {
 					width: width <= 100 ? `${width}%` : `${width}px`
@@ -168,7 +170,7 @@ export default defineComponent({
 			}
 		})
 		const transitionName = computed(() => {
-			if (props.placement === 'left' || props.placement === 'right') return `move-${props.placement}`
+			if (isHorizontal.value) return `move-${props.placement}`
 			else if (props.placement === 'top') return 'move-up'
 			else return 'move-down'
 		})
@@ -205,25 +207,45 @@ export default defineComponent({
 		}
 		const handleMousemove = event => {
 			if (!canMove.value || !props.draggable || !visible.value) return
-			// 更新容器宽度和距离左侧页面距离，如果是window则距左侧距离为0
-			handleSetWrapperWidth()
-			const left = event.pageX - wrapperLeft.value
-			// 如果抽屉方向为右边，宽度计算需用容器宽度减去left
-			let width = props.placement === 'right' ? wrapperWidth.value - left : left
-			// 限定最小宽度
-			width = Math.max(width, parseFloat(minWidth.value))
-			event.atMin = width === parseFloat(minWidth.value)
-			// 如果当前width不大于100，视为百分比
-			if (width <= 100) width = (width / wrapperWidth.value) * 100
-			if (width >= window.innerWidth) width = window.innerWidth
-			dragWidth.value = width
-			emit('resize-width', parseInt(dragWidth.value))
-			emit('drag', 'dragging', parseInt(dragWidth.value))
+			// 更新容器距离
+			handleSetWrapper()
+			if (isHorizontal.value) {
+				const left = event.pageX - wrapperLeft.value
+				// 如果抽屉方向为右边，宽度计算需用容器宽度减去left
+				let width = props.placement === 'right' ? wrapperWidth.value - left : left
+				// 限定最小宽度
+				width = Math.max(width, parseFloat(minWidth.value))
+				event.atMin = width === parseFloat(minWidth.value)
+				// 如果当前width不大于100，视为百分比
+				if (width <= 100) width = (width / wrapperWidth.value) * 100
+				if (width >= window.innerWidth) width = window.innerWidth
+				dragWidth.value = width
+				emit('resize-width', parseInt(dragWidth.value))
+				emit('drag', 'dragging', parseInt(dragWidth.value))
+			} else {
+				const top = event.pageY - wrapperTop.value
+				// 如果抽屉方向为下面，宽度计算需用容器宽度减去left
+				let heigth = props.placement === 'bottom' ? wrapperHeight.value - top : top
+				// 限定最小高度
+				heigth = Math.max(heigth, parseFloat(minHeight.value))
+				event.atMin = heigth === parseFloat(minHeight.value)
+				// 如果当前heigth不大于100，视为百分比
+				if (heigth <= 100) heigth = (heigth / wrapperHeight.value) * 100
+				if (heigth >= window.innerHeight) heigth = window.innerHeight
+				dragHeight.value = heigth
+				emit('resize-width', parseInt(dragHeight.value))
+				emit('drag', 'dragging', parseInt(dragHeight.value))
+			}
 		}
-		const handleSetWrapperWidth = () => {
-			const { width, left } = drawerRef.value.getBoundingClientRect()
-			wrapperWidth.value = width
-			wrapperLeft.value = left
+		const handleSetWrapper = () => {
+			const { width, height, left, top } = drawerRef.value.getBoundingClientRect()
+			if (isHorizontal.value) {
+				wrapperWidth.value = width
+				wrapperLeft.value = left
+			} else {
+				wrapperHeight.value = height
+				wrapperTop.value = top
+			}
 		}
 		const handleMouseup = () => {
 			if (!props.draggable || !visible.value) return
@@ -330,7 +352,7 @@ export default defineComponent({
 			addDrawer()
 			$vUtils.onListener(document, 'mousemove', handleMousemove)
 			$vUtils.onListener(document, 'mouseup', handleMouseup)
-			handleSetWrapperWidth()
+			handleSetWrapper()
 		})
 		onBeforeUnmount(() => {
 			removeDrawer()
@@ -342,17 +364,17 @@ export default defineComponent({
 		return {
 			slots,
 			visible,
-			handleMask,
 			wrapClasses,
-			handleWrapClick,
 			transitionName,
 			classes,
 			mainStyles,
-			close,
 			showHead,
-			handleTriggerMousedown,
 			drawerRef,
-			drawerContent
+			drawerContent,
+			close,
+			handleMask,
+			handleWrapClick,
+			handleTriggerMousedown
 		}
 	}
 })

package/packages/components/{global-components/sh-form → sh-form}/js/useForm.js

@@ -57,8 +57,8 @@ export default function (props, context, proxy, isForm) {
 	}
 	// 表单重置
 	const onFormReset = params => {
-		initFormItems()
-		$vUtils.clear(props.data, null)
+		$vUtils.clear(props.data)
+		refreshRender()
 		emit('reset', params)
 	}
 	// 表单项编辑回调

package/packages/components/sh-header/index.vue

@@ -0,0 +1,260 @@
+<template>
+	<div class="sh-pageheader" :style="styles" :class="classes">
+		<sh-loading :loading="loading" fix />
+		<div class="sh-pageheader-heading">
+			<div v-if="showback" class="sh-pageheader-back">
+				<div class="sh-pageheader-back-button" @click="handleBack"><sh-icon :size="iconSize" type="ios-arrow-back" /></div>
+			</div>
+			<sh-icon v-if="icon" style="margin-right: 0.5rem" :type="icon" :size="iconSize" :color="iconColor"></sh-icon>
+			<span v-if="title || slots.title" class="sh-pageheader-title" :style="titleStyle">
+				<slot name="title">{{ title }}</slot>
+			</span>
+			<span v-if="subTitle || slots.subTitle" class="sh-pageheader-subtitle">
+				<slot name="subTitle">{{ subTitle }}</slot>
+			</span>
+			<div v-if="slots.tags" class="sh-pageheader-tags"><slot name="tags"></slot></div>
+			<div v-if="slots.extra" class="sh-pageheader-extra"><slot name="extra"></slot></div>
+		</div>
+		<div v-if="slots.default" :class="contentClass">
+			<slot></slot>
+		</div>
+		<slot name="body"></slot>
+		<div v-if="slots.footer" class="sh-pageheader-footer"><slot name="footer"></slot></div>
+	</div>
+</template>
+
+<script>
+import { defineComponent, computed } from 'vue'
+export default defineComponent({
+	name: 'ShHeader',
+	props: {
+		size: {
+			type: String,
+			default: 'default'
+		},
+		color: {
+			type: String,
+			default: ''
+		},
+		theme: {
+			type: String,
+			default: ''
+		},
+		icon: {
+			type: String
+		},
+		iconSize: {
+			type: Number,
+			default: 20
+		},
+		iconColor: {
+			type: String
+		},
+		ghost: {
+			type: Boolean
+		},
+		full: {
+			type: Boolean
+		},
+		border: {
+			type: Boolean
+		},
+		type: {
+			type: String,
+			default: '' // 'success', 'info', 'warning', 'error'
+		},
+		title: {
+			type: String,
+			default: ''
+		},
+		subTitle: {
+			type: String,
+			default: ''
+		},
+		loading: {
+			type: Boolean
+		},
+		nowrap: {
+			type: Boolean
+		},
+		showback: {
+			type: Boolean
+		}
+	},
+	emits: ['back'],
+	setup(props, context) {
+		const { emit, slots } = context
+
+		let sizeMap = {
+			large: '19px',
+			default: '17px',
+			medium: 'var(--vxe-font-size)',
+			small: 'var(--vxe-font-size-small)',
+			mini: 'var(--vxe-font-size-smini)'
+		}
+
+		const styles = computed(() => {
+			return {
+				backgroundColor: props.color
+			}
+		})
+		const classes = computed(() => {
+			return {
+				'sh-pageheader-ghost': props.ghost,
+				'sh-pageheader-full': props.full,
+				'sh-pageheader-border': props.border,
+				[`sh-pageheader-theme-${props.theme}`]: props.theme,
+				'has-footer': slots.footer,
+				[`sh-pageheader-type-${props.type}`]: props.type,
+				[`${props.size}`]: props.size
+			}
+		})
+		const titleStyle = computed(() => {
+			return {
+				fontSize: sizeMap[props.size] || sizeMap.default,
+				whiteSpace: props.nowrap ? 'nowrap' : ''
+			}
+		})
+		const contentClass = computed(() => {
+			return {
+				'sh-pageheader-content': true,
+				'no-padding': !props.title && !slots.title && !props.subTitle && !slots.subTitle && !slots.tags && !slots.extra
+			}
+		})
+
+		const handleBack = () => {
+			emit('back')
+		}
+		return {
+			styles,
+			classes,
+			titleStyle,
+			contentClass,
+			slots,
+			handleBack
+		}
+	}
+})
+</script>
+
+<style lang="scss" scoped>
+.sh-pageheader {
+	display: block;
+	box-sizing: border-box;
+	border-radius: 2px;
+	line-height: 1.5;
+	position: relative;
+	padding: 0.5rem 1rem;
+	background-color: var(--vxe-table-body-background-color);
+	&-theme {
+		color: #fff;
+		&-primary {
+			background-color: var(--vxe-primary-color);
+		}
+		&-success {
+			background-color: var(--vxe-success-color);
+		}
+		&-warning {
+			background-color: var(--vxe-warning-color);
+		}
+		&-error {
+			background-color: var(--vxe-danger-color);
+		}
+		&-info {
+			background-color: var(--vxe-info-color);
+		}
+	}
+	&-type {
+		color: #fff;
+		&-primary {
+			border-left: 4px solid var(--vxe-primary-color);
+			background-color: var(--primary-weak-color);
+			.sh-pageheader-heading-title {
+				color: var(--vxe-primary-color);
+			}
+		}
+		&-success {
+			border-left: 4px solid var(--vxe-success-color);
+			background-color: #edfff3;
+			.sh-pageheader-heading-title {
+				color: var(--vxe-success-color);
+			}
+		}
+		&-warning {
+			border-left: 4px solid var(--vxe-warning-color);
+			background-color: #fff9e6;
+			.sh-pageheader-heading-title {
+				color: var(--vxe-warning-color);
+			}
+		}
+		&-error {
+			border-left: 4px solid var(--vxe-danger-color);
+			background-color: #ffefe6;
+			.sh-pageheader-heading-title {
+				color: var(--vxe-danger-color);
+			}
+		}
+		&-info {
+			border-left: 4px solid var(--vxe-info-color);
+			background-color: #f0faff;
+			.sh-pageheader-heading-title {
+				color: var(--vxe-info-color);
+			}
+		}
+	}
+	&-full {
+		padding-left: 0;
+		padding-right: 0;
+	}
+	&-ghost {
+		background-color: transparent;
+	}
+	&-border {
+		border: 1px solid var(--vxe-table-border-color);
+	}
+	&-heading {
+		width: 100%;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+	}
+	&-content {
+		margin-top: 10px;
+		&.no-padding {
+			padding-top: 0;
+		}
+	}
+	&-footer {
+		margin-top: 10px;
+	}
+	&-back {
+		font-size: 1.2rem;
+		line-height: 1;
+		margin-right: 0.5rem;
+		&-button {
+			color: inherit;
+			text-decoration: none;
+			outline: none;
+			transition: color 0.3s;
+			cursor: pointer;
+			&:hover {
+				opacity: 0.85;
+			}
+		}
+	}
+	&-title {
+		display: block;
+		margin-right: 0.5rem;
+		font-weight: 600;
+	}
+	&-subtitle {
+		margin-right: 0.5rem;
+		color: rgba(0, 0, 0, 0.45);
+	}
+	&-tags {
+	}
+	&-extra {
+		margin-left: auto;
+	}
+}
+</style>

package/packages/components/{global-components/sh-poptip → sh-poptip}/index.vue

@@ -41,7 +41,7 @@
 
 <script>
 import { defineComponent, computed, onMounted, onUpdated, onBeforeUnmount, getCurrentInstance, ref, watch, nextTick } from 'vue'
-import { transferIndex, transferIncrease } from '../../../utils/transfer-queue'
+import { transferIndex, transferIncrease } from '../../utils/transfer-queue'
 import Popper from 'popper.js'
 const handleGetIndex = () => {
 	transferIncrease()

package/packages/components/{global-components/sh-progress → sh-progress}/index.vue

@@ -72,15 +72,7 @@ export default defineComponent({
 			return ''
 		})
 		const bgStyle = computed(() => {
-			const style = props.vertical
-				? {
-						height: `${props.percent}%`,
-						width: `${props.strokeWidth}px`
-				  }
-				: {
-						width: `${props.percent}%`,
-						height: `${props.strokeWidth}px`
-				  }
+			const style = props.vertical ? { height: `${props.percent}%`, width: `${props.strokeWidth}px` } : { width: `${props.percent}%`, height: `${props.strokeWidth}px` }
 			if (props.strokeColor) {
 				if (typeof props.strokeColor === 'string') {
 					style['background-color'] = props.strokeColor
@@ -91,15 +83,7 @@ export default defineComponent({
 			return style
 		})
 		const successBgStyle = computed(() => {
-			return props.vertical
-				? {
-						height: `${props.successPercent}%`,
-						width: `${props.strokeWidth}px`
-				  }
-				: {
-						width: `${props.successPercent}%`,
-						height: `${props.strokeWidth}px`
-				  }
+			return props.vertical ? { height: `${props.successPercent}%`, width: `${props.strokeWidth}px` } : { width: `${props.successPercent}%`, height: `${props.strokeWidth}px` }
 		})
 		const wrapClasses = computed(() => {
 			return {