sh-view 2.1.0 → 2.2.0

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

@@ -1,228 +1,230 @@
-<template>
-	<a class="sh-corner" :style="styles" :class="classes">
-		<div class="sh-corner-content">
-			<div v-if="title || $slots.title">{{ title }}</div>
-			<span v-if="$slots.default"><slot></slot></span>
-		</div>
-		<span class="sh-corner-bg" :style="cornerStyles"></span>
-	</a>
-</template>
-
-<script>
-export default {
-	name: 'ShCorner',
-	components: {},
-	props: {
-		color: {
-			type: String,
-			default: '#e8e8e8'
-		},
-		title: {
-			type: [String, Number],
-			default: ''
-		},
-		width: {
-			type: [String, Number],
-			default: '60'
-		},
-		height: {
-			type: [String, Number],
-			default: '60'
-		},
-		font: {
-			type: [String, Number],
-			default: '10'
-		},
-		placement: {
-			type: String,
-			default: 'top-right'
-		},
-		rotate: [Boolean],
-		dark: [Boolean]
-	},
-	data() {
-		return {}
-	},
-	computed: {
-		styles() {
-			return {
-				borderColor: this.color,
-				width: `${this.width}px`,
-				height: `${this.height}px`,
-				fontSize: `${this.font}px`,
-				color: this.dark ? '#fff' : ''
-			}
-		},
-		cornerStyles() {
-			return {
-				borderWidth: `${this.width}px`
-			}
-		},
-		placeClass() {
-			return this.placement.toLowerCase().split('-')
-		},
-		classes() {
-			return [
-				...this.placeClass,
-				{
-					'sh-rotate': this.rotate
-				}
-			]
-		}
-	},
-	watch: {},
-	created() {},
-	methods: {}
-}
-</script>
-
-<style lang="scss">
-$corner-size: 4em;
-.sh-corner {
-	display: inline-block;
-	position: absolute;
-	top: 0;
-	right: 0;
-	margin: 0;
-	padding: 0 !important;
-	text-align: center;
-	border-color: #e8e8e8;
-	line-height: 1;
-	vertical-align: baseline;
-	overflow: hidden;
-	width: $corner-size;
-	height: $corner-size;
-	z-index: 1;
-	color: inherit;
-	background-color: transparent;
-	&:hover {
-		color: inherit;
-	}
-	> .sh-corner-content {
-		position: absolute;
-		margin: 0;
-		padding: 15% 5px;
-		width: 100%;
-		height: 100%;
-		right: 0;
-		top: 0;
-		display: inline-flex;
-		justify-content: flex-end;
-		align-items: flex-start;
-		flex-wrap: wrap;
-	}
-	&.sh-rotate {
-		> .sh-corner-content {
-			transform-origin: center;
-			justify-content: center !important;
-		}
-		&.top.left {
-			> .sh-corner-content {
-				right: auto;
-				left: 0;
-				top: 0;
-				transform: rotateZ(-45deg);
-			}
-		}
-		&.top.right {
-			> .sh-corner-content {
-				right: 0;
-				left: auto;
-				top: 0;
-				transform: rotateZ(45deg);
-			}
-		}
-		&.bottom.left {
-			> .sh-corner-content {
-				right: auto;
-				left: 0;
-				bottom: 0;
-				top: auto;
-				transform: rotateZ(45deg);
-				align-items: flex-end;
-			}
-		}
-		&.bottom.right {
-			> .sh-corner-content {
-				right: 0;
-				left: auto;
-				bottom: 0;
-				top: auto;
-				transform: rotateZ(-45deg);
-				align-items: flex-end;
-			}
-		}
-	}
-	& .sh-corner-bg {
-		position: absolute;
-		content: '';
-		right: 0;
-		top: 0;
-		z-index: -1;
-		width: 0;
-		height: 0;
-		background-color: transparent;
-		border-style: solid;
-		border-color: inherit;
-	}
-	&.top.left {
-		right: auto;
-		left: 0;
-		top: 0;
-		& .sh-corner-bg {
-			right: auto;
-			left: 0;
-			top: 0;
-			border-bottom-color: transparent !important;
-			border-right-color: transparent !important;
-			border-top-width: 0 !important;
-		}
-		> .sh-corner-content {
-			justify-content: flex-start;
-		}
-	}
-	&.top.right {
-		right: 0;
-		left: auto;
-		top: 0;
-		& .sh-corner-bg {
-			border-bottom-color: transparent !important;
-			border-left-color: transparent !important;
-			border-top-width: 0 !important;
-		}
-	}
-	&.bottom.left {
-		right: auto;
-		left: 0;
-		bottom: 0;
-		top: auto;
-		& .sh-corner-bg {
-			right: auto;
-			left: 0;
-			bottom: 0;
-			top: auto;
-			border-top-color: transparent !important;
-			border-right-color: transparent !important;
-			border-bottom-width: 0 !important;
-		}
-		> .sh-corner-content {
-			justify-content: flex-start;
-		}
-	}
-	&.bottom.right {
-		right: 0;
-		left: auto;
-		bottom: 0;
-		top: auto;
-		& .sh-corner-bg {
-			right: 0;
-			left: auto;
-			bottom: 0;
-			top: auto;
-			border-top-color: transparent !important;
-			border-left-color: transparent !important;
-			border-bottom-width: 0 !important;
-		}
-	}
-}
-</style>
+<template>
+	<a class="sh-corner" :style="styles" :class="classes">
+		<div class="sh-corner-content">
+			<div v-if="title || slots.title">{{ title }}</div>
+			<span v-if="slots.default"><slot></slot></span>
+		</div>
+		<span class="sh-corner-bg" :style="cornerStyles"></span>
+	</a>
+</template>
+
+<script>
+import { defineComponent, computed } from 'vue'
+export default defineComponent({
+	name: 'ShCorner',
+	props: {
+		color: {
+			type: String,
+			default: '#e8e8e8'
+		},
+		title: {
+			type: [String, Number],
+			default: ''
+		},
+		width: {
+			type: [String, Number],
+			default: '60'
+		},
+		height: {
+			type: [String, Number],
+			default: '60'
+		},
+		font: {
+			type: [String, Number],
+			default: '10'
+		},
+		placement: {
+			type: String,
+			default: 'top-right'
+		},
+		rotate: [Boolean],
+		dark: [Boolean]
+	},
+	setup(props, context) {
+		const { slots } = context
+		const styles = computed(() => {
+			return {
+				borderColor: props.color,
+				width: `${props.width}px`,
+				height: `${props.height}px`,
+				fontSize: `${props.font}px`,
+				color: props.dark ? '#fff' : ''
+			}
+		})
+		const cornerStyles = computed(() => {
+			return {
+				borderWidth: `${props.width}px`
+			}
+		})
+		const placeClass = computed(() => {
+			return props.placement.toLowerCase().split('-')
+		})
+		const classes = computed(() => {
+			return [
+				...placeClass.value,
+				{
+					'sh-rotate': props.rotate
+				}
+			]
+		})
+
+		return {
+			styles,
+			classes,
+			cornerStyles,
+			slots
+		}
+	}
+})
+</script>
+
+<style lang="scss">
+$corner-size: 4em;
+.sh-corner {
+	display: inline-block;
+	position: absolute;
+	top: 0;
+	right: 0;
+	margin: 0;
+	padding: 0 !important;
+	text-align: center;
+	border-color: #e8e8e8;
+	line-height: 1;
+	vertical-align: baseline;
+	overflow: hidden;
+	width: $corner-size;
+	height: $corner-size;
+	z-index: 1;
+	color: inherit;
+	background-color: transparent;
+	&:hover {
+		color: inherit;
+	}
+	> .sh-corner-content {
+		position: absolute;
+		margin: 0;
+		padding: 15% 5px;
+		width: 100%;
+		height: 100%;
+		right: 0;
+		top: 0;
+		display: inline-flex;
+		justify-content: flex-end;
+		align-items: flex-start;
+		flex-wrap: wrap;
+	}
+	&.sh-rotate {
+		> .sh-corner-content {
+			transform-origin: center;
+			justify-content: center !important;
+		}
+		&.top.left {
+			> .sh-corner-content {
+				right: auto;
+				left: 0;
+				top: 0;
+				transform: rotateZ(-45deg);
+			}
+		}
+		&.top.right {
+			> .sh-corner-content {
+				right: 0;
+				left: auto;
+				top: 0;
+				transform: rotateZ(45deg);
+			}
+		}
+		&.bottom.left {
+			> .sh-corner-content {
+				right: auto;
+				left: 0;
+				bottom: 0;
+				top: auto;
+				transform: rotateZ(45deg);
+				align-items: flex-end;
+			}
+		}
+		&.bottom.right {
+			> .sh-corner-content {
+				right: 0;
+				left: auto;
+				bottom: 0;
+				top: auto;
+				transform: rotateZ(-45deg);
+				align-items: flex-end;
+			}
+		}
+	}
+	& .sh-corner-bg {
+		position: absolute;
+		content: '';
+		right: 0;
+		top: 0;
+		z-index: -1;
+		width: 0;
+		height: 0;
+		background-color: transparent;
+		border-style: solid;
+		border-color: inherit;
+	}
+	&.top.left {
+		right: auto;
+		left: 0;
+		top: 0;
+		& .sh-corner-bg {
+			right: auto;
+			left: 0;
+			top: 0;
+			border-bottom-color: transparent !important;
+			border-right-color: transparent !important;
+			border-top-width: 0 !important;
+		}
+		> .sh-corner-content {
+			justify-content: flex-start;
+		}
+	}
+	&.top.right {
+		right: 0;
+		left: auto;
+		top: 0;
+		& .sh-corner-bg {
+			border-bottom-color: transparent !important;
+			border-left-color: transparent !important;
+			border-top-width: 0 !important;
+		}
+	}
+	&.bottom.left {
+		right: auto;
+		left: 0;
+		bottom: 0;
+		top: auto;
+		& .sh-corner-bg {
+			right: auto;
+			left: 0;
+			bottom: 0;
+			top: auto;
+			border-top-color: transparent !important;
+			border-right-color: transparent !important;
+			border-bottom-width: 0 !important;
+		}
+		> .sh-corner-content {
+			justify-content: flex-start;
+		}
+	}
+	&.bottom.right {
+		right: 0;
+		left: auto;
+		bottom: 0;
+		top: auto;
+		& .sh-corner-bg {
+			right: 0;
+			left: auto;
+			bottom: 0;
+			top: auto;
+			border-top-color: transparent !important;
+			border-left-color: transparent !important;
+			border-bottom-width: 0 !important;
+		}
+	}
+}
+</style>

package/packages/components/global-components/sh-count-to/index.vue

@@ -1,14 +1,15 @@
 <template>
 	<div class="sh-count-to">
 		<slot name="left"></slot>
-		<span ref="count" class="count-up" :class="countClass"></span>
+		<span ref="countRef" class="count-up" :class="countClass"></span>
 		<slot name="right"></slot>
 	</div>
 </template>
 
 <script>
-import CountUp from 'countup.js'
-export default {
+import { defineComponent, ref, watch, onMounted, onUnmounted } from 'vue'
+import CountUpJs from 'countup.js'
+export default defineComponent({
 	name: 'ShCountTo',
 	props: {
 		start: {
@@ -40,63 +41,71 @@ export default {
 			type: [String, Object]
 		}
 	},
-	data() {
-		return {
-			CountUp: null
-		}
-	},
-	watch: {
-		end(value) {
-			if (this.CountUp && this.CountUp.update) {
-				this.CountUp.update(value)
+	setup(props, context) {
+		const countUp = ref(null)
+		const countRef = ref()
+
+		watch(
+			() => props.end,
+			value => {
+				if (countUp.value && countUp.value.update) {
+					countUp.value.update(value)
+				}
+			}
+		)
+
+		const init = () => {
+			if (!countUp.value) {
+				countUp.value = new CountUpJs(countRef.value, props.start, props.end, props.decimals, props.duration, props.options)
+				countUp.value.start(() => {
+					props.callback(countUp.value)
+				})
 			}
 		}
-	},
-	mounted() {
-		this.init()
-	},
-	methods: {
-		init() {
-			if (!this.CountUp) {
-				this.CountUp = new CountUp(this.$refs.count, this.start, this.end, this.decimals, this.duration, this.options)
-				this.CountUp.start(() => {
-					this.callback(this.CountUp)
+
+		const destroy = () => {
+			countUp.value = null
+		}
+
+		const start = callback => {
+			if (countUp.value && countUp.value.start) {
+				countUp.value.start(() => {
+					callback && callback(countUp.value)
 				})
 			}
-		},
-		destroy() {
-			this.CountUp = null
 		}
-	},
-	beforeUnmounted() {
-		this.destroy()
-	},
-	start(callback) {
-		if (this.CountUp && this.CountUp.start) {
-			this.CountUp.start(() => {
-				callback && callback(this.CountUp)
-			})
+
+		const pauseResume = () => {
+			if (countUp.value && countUp.value.pauseResume) {
+				countUp.value.pauseResume()
+			}
 		}
-	},
-	pauseResume() {
-		if (this.CountUp && this.CountUp.pauseResume) {
-			this.CountUp.pauseResume()
+
+		const reset = () => {
+			if (countUp.value && countUp.value.reset) {
+				countUp.value.reset()
+			}
 		}
-	},
-	reset() {
-		if (this.CountUp && this.CountUp.reset) {
-			this.CountUp.reset()
+
+		const updated = newEndVal => {
+			if (countUp.value && countUp.value.update) {
+				countUp.value.update(newEndVal)
+			}
 		}
-	},
-	update(newEndVal) {
-		if (this.CountUp && this.CountUp.update) {
-			this.CountUp.update(newEndVal)
+
+		onMounted(() => {
+			init()
+		})
+
+		onUnmounted(() => {
+			destroy()
+		})
+
+		return {
+			countRef
 		}
 	}
-}
+})
 </script>
 
-<style scoped lang="scss">
-.sh-count-to {
-}
-</style>
+<style scoped lang="scss"></style>