sh-view 2.8.0 → 2.8.2

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

@@ -1,276 +1,276 @@
-<template>
-	<div class="sh-progress" :class="wrapClasses">
-		<div class="sh-progress-outer">
-			<div class="sh-progress-inner">
-				<div class="sh-progress-bg" :style="bgStyle">
-					<div v-if="textInside" class="sh-progress-inner-text">{{ percent }}%</div>
-				</div>
-				<div class="sh-progress-success-bg" :style="successBgStyle"></div>
-			</div>
-		</div>
-		<span v-if="!hideInfo && !textInside" class="sh-progress-text">
-			<slot>
-				<span v-if="isStatus" class="sh-progress-text-inner">
-					<sh-icon :type="statusIcon"></sh-icon>
-				</span>
-				<span v-else class="sh-progress-text-inner"> {{ percent }}% </span>
-			</slot>
-		</span>
-	</div>
-</template>
-<script>
-import { defineComponent, computed, onBeforeMount, getCurrentInstance, ref, watch } from 'vue'
-export default defineComponent({
-	name: 'ShProgress',
-	props: {
-		percent: {
-			type: [Number, String],
-			default: 0
-		},
-		successPercent: {
-			type: Number,
-			default: 0
-		},
-		status: {
-			type: String,
-			default: 'normal' // normal', 'active', 'wrong', 'success'
-		},
-		hideInfo: {
-			type: Boolean,
-			default: false
-		},
-		strokeWidth: {
-			type: Number,
-			default: 10
-		},
-		vertical: {
-			type: Boolean,
-			default: false
-		},
-		strokeColor: {
-			type: [String, Array]
-		},
-		textInside: {
-			type: Boolean,
-			default: false
-		}
-	},
-	emits: ['status-change'],
-	setup(props, context) {
-		const { emit, slots } = context
-		const currentStatus = ref(props.status)
-
-		const isStatus = computed(() => {
-			return ['wrong', 'success'].includes(currentStatus.value)
-		})
-		const statusIcon = computed(() => {
-			if (currentStatus.value === 'wrong') {
-				return 'ios-close-circle'
-			} else if (currentStatus.value === 'ios-checkmark-circle') {
-				return 'ios-close-circle'
-			}
-			return ''
-		})
-		const bgStyle = computed(() => {
-			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
-				} else {
-					style['background-image'] = `linear-gradient(to right, ${props.strokeColor[0]} 0%, ${props.strokeColor[1]} 100%)`
-				}
-			}
-			return style
-		})
-		const successBgStyle = computed(() => {
-			return props.vertical ? { height: `${props.successPercent}%`, width: `${props.strokeWidth}px` } : { width: `${props.successPercent}%`, height: `${props.strokeWidth}px` }
-		})
-		const wrapClasses = computed(() => {
-			return {
-				[`${currentStatus.value}`]: true,
-				[`show-info`]: !props.hideInfo && !props.textInside,
-				[`vertical`]: props.vertical
-			}
-		})
-
-		const handleStatus = isDown => {
-			if (isDown) {
-				currentStatus.value = 'normal'
-				emit('status-change', 'normal')
-			} else {
-				if (parseInt(props.percent, 10) === 100) {
-					currentStatus.value = 'success'
-					emit('status-change', 'success')
-				}
-			}
-		}
-
-		onBeforeMount(() => {
-			handleStatus()
-		})
-		watch(
-			() => props.percent,
-			(val, oldVal) => {
-				handleStatus(val < oldVal)
-			}
-		)
-		watch(
-			() => props.status,
-			val => {
-				currentStatus.value = val
-			}
-		)
-
-		return {
-			wrapClasses,
-			bgStyle,
-			successBgStyle,
-			isStatus,
-			statusIcon
-		}
-	}
-})
-</script>
-
-<style scoped lang="scss">
-.sh-progress {
-	display: inline-block;
-	width: 100%;
-	position: relative;
-	&.show-info {
-		.sh-progress-outer {
-			padding-right: 55px;
-			margin-right: -55px;
-		}
-	}
-	&.active {
-		.sh-progress-bg:before {
-			content: '';
-			opacity: 0;
-			position: absolute;
-			top: 0;
-			left: 0;
-			right: 0;
-			bottom: 0;
-			background: #fff;
-			border-radius: 10px;
-			animation: progress-active 2s ease-in-out infinite;
-		}
-	}
-	&.vertical {
-		height: 100%;
-		width: auto;
-		.sh-progress-outer {
-			height: 100%;
-			width: auto;
-		}
-		.sh-progress-inner {
-			height: 100%;
-			width: auto;
-			& > *,
-			&:after {
-				display: inline-block;
-				vertical-align: bottom;
-			}
-			&:after {
-				content: '';
-				height: 100%;
-			}
-		}
-		&.active {
-			.sh-progress-bg:before {
-				top: auto;
-				animation: progress-active-vertical 2s ease-in-out infinite;
-			}
-		}
-	}
-	&.wrong {
-		.sh-progress-bg {
-			background-color: var(--vxe-danger-color);
-		}
-		.sh-progress-text {
-			color: var(--vxe-danger-color);
-		}
-	}
-	&.success {
-		.sh-progress-bg {
-			background-color: var(--vxe-success-color);
-		}
-		.sh-progress-text {
-			color: var(--vxe-success-color);
-		}
-	}
-	&-outer {
-		display: inline-block;
-		width: 100%;
-		margin-right: 0;
-		padding-right: 0;
-	}
-	&-inner {
-		display: inline-block;
-		width: 100%;
-		background-color: #f3f3f3;
-		border-radius: 100px;
-		vertical-align: middle;
-		position: relative;
-		&-text {
-			display: inline-block;
-			vertical-align: top;
-			color: #fff;
-			font-size: 12px;
-			margin: 0 6px;
-		}
-	}
-	&-bg {
-		text-align: right;
-		border-radius: 100px;
-		background-color: var(--vxe-primary-color);
-		transition: all 1s linear;
-		position: relative;
-		&:after {
-			content: '';
-			display: inline-block;
-			height: 100%;
-			vertical-align: middle;
-		}
-	}
-	&-success-bg {
-		border-radius: 100px;
-		background-color: var(--vxe-success-color);
-		transition: all 1s linear;
-		position: absolute;
-		top: 0;
-		left: 0;
-	}
-	&-text {
-		display: inline-block;
-		margin-left: 5px;
-		text-align: left;
-		font-size: 1em;
-		vertical-align: middle;
-		color: var(--vxe-font-color);
-	}
-}
-
-@keyframes progress-active {
-	0% {
-		opacity: 0.3;
-		width: 0;
-	}
-	100% {
-		opacity: 0;
-		width: 100%;
-	}
-}
-
-@keyframes progress-active-vertical {
-	0% {
-		opacity: 0.3;
-		height: 0;
-	}
-	100% {
-		opacity: 0;
-		height: 100%;
-	}
-}
-</style>
+<template>
+	<div class="sh-progress" :class="wrapClasses">
+		<div class="sh-progress-outer">
+			<div class="sh-progress-inner">
+				<div class="sh-progress-bg" :style="bgStyle">
+					<div v-if="textInside" class="sh-progress-inner-text">{{ percent }}%</div>
+				</div>
+				<div class="sh-progress-success-bg" :style="successBgStyle"></div>
+			</div>
+		</div>
+		<span v-if="!hideInfo && !textInside" class="sh-progress-text">
+			<slot>
+				<span v-if="isStatus" class="sh-progress-text-inner">
+					<sh-icon :type="statusIcon"></sh-icon>
+				</span>
+				<span v-else class="sh-progress-text-inner"> {{ percent }}% </span>
+			</slot>
+		</span>
+	</div>
+</template>
+<script>
+import { defineComponent, computed, onBeforeMount, getCurrentInstance, ref, watch } from 'vue'
+export default defineComponent({
+	name: 'ShProgress',
+	props: {
+		percent: {
+			type: [Number, String],
+			default: 0
+		},
+		successPercent: {
+			type: Number,
+			default: 0
+		},
+		status: {
+			type: String,
+			default: 'normal' // normal', 'active', 'wrong', 'success'
+		},
+		hideInfo: {
+			type: Boolean,
+			default: false
+		},
+		strokeWidth: {
+			type: Number,
+			default: 10
+		},
+		vertical: {
+			type: Boolean,
+			default: false
+		},
+		strokeColor: {
+			type: [String, Array]
+		},
+		textInside: {
+			type: Boolean,
+			default: false
+		}
+	},
+	emits: ['status-change'],
+	setup(props, context) {
+		const { emit, slots } = context
+		const currentStatus = ref(props.status)
+
+		const isStatus = computed(() => {
+			return ['wrong', 'success'].includes(currentStatus.value)
+		})
+		const statusIcon = computed(() => {
+			if (currentStatus.value === 'wrong') {
+				return 'ios-close-circle'
+			} else if (currentStatus.value === 'ios-checkmark-circle') {
+				return 'ios-close-circle'
+			}
+			return ''
+		})
+		const bgStyle = computed(() => {
+			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
+				} else {
+					style['background-image'] = `linear-gradient(to right, ${props.strokeColor[0]} 0%, ${props.strokeColor[1]} 100%)`
+				}
+			}
+			return style
+		})
+		const successBgStyle = computed(() => {
+			return props.vertical ? { height: `${props.successPercent}%`, width: `${props.strokeWidth}px` } : { width: `${props.successPercent}%`, height: `${props.strokeWidth}px` }
+		})
+		const wrapClasses = computed(() => {
+			return {
+				[`${currentStatus.value}`]: true,
+				[`show-info`]: !props.hideInfo && !props.textInside,
+				[`vertical`]: props.vertical
+			}
+		})
+
+		const handleStatus = isDown => {
+			if (isDown) {
+				currentStatus.value = 'normal'
+				emit('status-change', 'normal')
+			} else {
+				if (parseInt(props.percent, 10) === 100) {
+					currentStatus.value = 'success'
+					emit('status-change', 'success')
+				}
+			}
+		}
+
+		onBeforeMount(() => {
+			handleStatus()
+		})
+		watch(
+			() => props.percent,
+			(val, oldVal) => {
+				handleStatus(val < oldVal)
+			}
+		)
+		watch(
+			() => props.status,
+			val => {
+				currentStatus.value = val
+			}
+		)
+
+		return {
+			wrapClasses,
+			bgStyle,
+			successBgStyle,
+			isStatus,
+			statusIcon
+		}
+	}
+})
+</script>
+
+<style scoped lang="scss">
+.sh-progress {
+	display: inline-block;
+	width: 100%;
+	position: relative;
+	&.show-info {
+		.sh-progress-outer {
+			padding-right: 55px;
+			margin-right: -55px;
+		}
+	}
+	&.active {
+		.sh-progress-bg:before {
+			content: '';
+			opacity: 0;
+			position: absolute;
+			top: 0;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			background: #fff;
+			border-radius: 10px;
+			animation: progress-active 2s ease-in-out infinite;
+		}
+	}
+	&.vertical {
+		height: 100%;
+		width: auto;
+		.sh-progress-outer {
+			height: 100%;
+			width: auto;
+		}
+		.sh-progress-inner {
+			height: 100%;
+			width: auto;
+			& > *,
+			&:after {
+				display: inline-block;
+				vertical-align: bottom;
+			}
+			&:after {
+				content: '';
+				height: 100%;
+			}
+		}
+		&.active {
+			.sh-progress-bg:before {
+				top: auto;
+				animation: progress-active-vertical 2s ease-in-out infinite;
+			}
+		}
+	}
+	&.wrong {
+		.sh-progress-bg {
+			background-color: var(--vxe-danger-color);
+		}
+		.sh-progress-text {
+			color: var(--vxe-danger-color);
+		}
+	}
+	&.success {
+		.sh-progress-bg {
+			background-color: var(--vxe-success-color);
+		}
+		.sh-progress-text {
+			color: var(--vxe-success-color);
+		}
+	}
+	&-outer {
+		display: inline-block;
+		width: 100%;
+		margin-right: 0;
+		padding-right: 0;
+	}
+	&-inner {
+		display: inline-block;
+		width: 100%;
+		background-color: #f3f3f3;
+		border-radius: 100px;
+		vertical-align: middle;
+		position: relative;
+		&-text {
+			display: inline-block;
+			vertical-align: top;
+			color: #fff;
+			font-size: 12px;
+			margin: 0 6px;
+		}
+	}
+	&-bg {
+		text-align: right;
+		border-radius: 100px;
+		background-color: var(--vxe-primary-color);
+		transition: all 1s linear;
+		position: relative;
+		&:after {
+			content: '';
+			display: inline-block;
+			height: 100%;
+			vertical-align: middle;
+		}
+	}
+	&-success-bg {
+		border-radius: 100px;
+		background-color: var(--vxe-success-color);
+		transition: all 1s linear;
+		position: absolute;
+		top: 0;
+		left: 0;
+	}
+	&-text {
+		display: inline-block;
+		margin-left: 5px;
+		text-align: left;
+		font-size: 1em;
+		vertical-align: middle;
+		color: var(--vxe-font-color);
+	}
+}
+
+@keyframes progress-active {
+	0% {
+		opacity: 0.3;
+		width: 0;
+	}
+	100% {
+		opacity: 0;
+		width: 100%;
+	}
+}
+
+@keyframes progress-active-vertical {
+	0% {
+		opacity: 0.3;
+		height: 0;
+	}
+	100% {
+		opacity: 0;
+		height: 100%;
+	}
+}
+</style>