sh-view 1.7.5 → 2.0.0

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

@@ -0,0 +1,290 @@
+<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>
+export default {
+	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'],
+	data() {
+		return {
+			currentStatus: this.status
+		}
+	},
+	computed: {
+		isStatus() {
+			return this.currentStatus === 'wrong' || this.currentStatus === 'success'
+		},
+		statusIcon() {
+			let type = ''
+			switch (this.currentStatus) {
+				case 'wrong':
+					type = 'ios-close-circle'
+					break
+				case 'success':
+					type = 'ios-checkmark-circle'
+					break
+			}
+			return type
+		},
+		bgStyle() {
+			const style = this.vertical
+				? {
+						height: `${this.percent}%`,
+						width: `${this.strokeWidth}px`
+				  }
+				: {
+						width: `${this.percent}%`,
+						height: `${this.strokeWidth}px`
+				  }
+			if (this.strokeColor) {
+				if (typeof this.strokeColor === 'string') {
+					style['background-color'] = this.strokeColor
+				} else {
+					style['background-image'] = `linear-gradient(to right, ${this.strokeColor[0]} 0%, ${this.strokeColor[1]} 100%)`
+				}
+			}
+			return style
+		},
+		successBgStyle() {
+			return this.vertical
+				? {
+						height: `${this.successPercent}%`,
+						width: `${this.strokeWidth}px`
+				  }
+				: {
+						width: `${this.successPercent}%`,
+						height: `${this.strokeWidth}px`
+				  }
+		},
+		wrapClasses() {
+			return {
+				[`${this.currentStatus}`]: true,
+				[`show-info`]: !this.hideInfo && !this.textInside,
+				[`vertical`]: this.vertical
+			}
+		}
+	},
+	watch: {
+		percent(val, oldVal) {
+			if (val < oldVal) {
+				this.handleStatus(true)
+			} else {
+				this.handleStatus()
+			}
+		},
+		status(val) {
+			this.currentStatus = val
+		}
+	},
+	created() {
+		this.handleStatus()
+	},
+	methods: {
+		handleStatus(isDown) {
+			if (isDown) {
+				this.currentStatus = 'normal'
+				this.$emit('status-change', 'normal')
+			} else {
+				if (parseInt(this.percent, 10) === 100) {
+					this.currentStatus = 'success'
+					this.$emit('status-change', 'success')
+				}
+			}
+		}
+	}
+}
+</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>