sh-view 2.1.0 → 2.3.0

package/packages/components/global-components/sh-pull-refresh/index.vue

@@ -1,5 +1,5 @@
 <template>
-	<div ref="scroller" class="sh-pull-refresh" :class="classes" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">
+	<div ref="scroller" class="sh-pull-refresh" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">
 		<div class="sh-pull-refresh-container" :style="getStyle">
 			<div class="sh-pull-refresh-container-topbox" :style="getHeightStyle">
 				<div class="sh-pull-refresh-container-topbox-text">
@@ -17,7 +17,8 @@
 </template>
 
 <script>
-export default {
+import { defineComponent, computed, onMounted, getCurrentInstance, ref, reactive, watch } from 'vue'
+export default defineComponent({
 	name: 'ShPullRefresh',
 	props: {
 		modelValue: {
@@ -54,111 +55,88 @@ export default {
 		}
 	},
 	emits: ['change', 'refresh', 'update:modelValue'],
-	data() {
-		return {
-			touch: {
-				startX: 0,
-				startY: 0,
-				moveX: 0,
-				moveY: 0,
-				deltaX: 0,
-				deltaY: 0,
-				offsetX: 0,
-				offsetY: 0,
-				direction: ''
-			},
-			scrollParent: null,
-			isPullRefresh: false,
-			distance: 0,
-			status: 'normal'
-		}
-	},
-	computed: {
-		classes() {
-			const prefixCls = 'pull-refresh'
-			return {
-				[prefixCls]: true
-			}
-		},
-		getPullStatus() {
-			if (this.status === 'pulling') {
-				return !this.slots.pulling ? this.pullingTxt : ''
-			} else if (this.status === 'loosing') {
-				return !this.slots.loosing ? this.loosingTxt : ''
-			} else if (this.status === 'loading') {
-				return !this.slots.loading ? this.loadingTxt : ''
-			} else {
-				return ''
+	setup(props, context) {
+		const { emit, slots } = context
+		const touch = reactive({
+			startX: 0,
+			startY: 0,
+			moveX: 0,
+			moveY: 0,
+			deltaX: 0,
+			deltaY: 0,
+			offsetX: 0,
+			offsetY: 0,
+			direction: ''
+		})
+		let scrollParent = null
+		const isPullRefresh = ref(false)
+		const distance = ref(0)
+		const status = ref('normal')
+
+		const getPullStatus = computed(() => {
+			if (status.value === 'pulling') {
+				return !slots.pulling ? props.pullingTxt : ''
+			} else if (status.value === 'loosing') {
+				return !slots.loosing ? props.loosingTxt : ''
+			} else if (status.value === 'loading') {
+				return !slots.loading ? props.loadingTxt : ''
 			}
-		},
-		getStyle() {
+			return ''
+		})
+		const getStyle = computed(() => {
 			return {
-				transitionDuration: `${this.duration}s`,
-				transform: this.distance ? `translate3d(0,${this.distance}px, 0)` : ''
+				transitionDuration: `${props.duration}s`,
+				transform: distance.value ? `translate3d(0,${distance.value}px, 0)` : ''
 			}
-		},
-		getHeightStyle() {
-			const styles = {}
-			if (this.headHeight !== 40) styles.height = this.pxCheck(this.headHeight)
+		})
+		const getHeightStyle = computed(() => {
+			let styles = {}
+			if (props.headHeight !== 40) styles.height = pxCheck(props.headHeight)
 			return styles
+		})
+
+		const initMounted = () => {
+			scrollParent = getScrollParent()
 		}
-	},
-	watch: {
-		modelValue(val) {
-			if (val) {
-				this.setPullStatus(+this.headHeight, true)
-				this.$nextTick(() => this.$emit('refresh'))
-			} else {
-				this.setPullStatus(0)
-			}
-		}
-	},
-	mounted() {
-		this.initMounted()
-	},
-	methods: {
-		initMounted() {
-			this.scrollParent = this.getScrollParent()
-		},
-		pxCheck(value) {
+		const pxCheck = value => {
 			return isNaN(Number(value)) ? String(value) : `${value}px`
-		},
-		timing(distance) {
-			const pullDistance = +(this.pullDistance || this.headHeight)
-			let moveDistance = distance
-			if (distance > pullDistance) {
-				if (distance < pullDistance * 2) {
-					moveDistance = (distance + pullDistance) / 2
+		}
+		const timing = distanceValue => {
+			const pullDistance = +(props.pullDistance || props.headHeight)
+			let moveDistance = distanceValue
+			if (distanceValue > pullDistance) {
+				if (distanceValue < pullDistance * 2) {
+					moveDistance = (distanceValue + pullDistance) / 2
 				} else {
-					moveDistance = pullDistance + distance / 4
+					moveDistance = pullDistance + distanceValue / 4
 				}
 			}
 			return Math.round(moveDistance)
-		},
-		setPullStatus(distance, isLoading) {
-			const pullDistance = +(this.pullDistance || this.headHeight)
-			this.distance = distance
+		}
+		const setPullStatus = (distanceValue, isLoading) => {
+			const pullDistance = +(props.pullDistance || props.headHeight)
+			distance.value = distanceValue
 			if (isLoading) {
-				this.status = 'loading'
-			} else if (distance === 0) {
-				this.status = 'normal'
-			} else if (distance < pullDistance) {
-				this.status = 'pulling'
+				status.value = 'loading'
+			} else if (distanceValue === 0) {
+				status.value = 'normal'
+			} else if (distanceValue < pullDistance) {
+				status.value = 'pulling'
 			} else {
-				this.status = 'loosing'
+				status.value = 'loosing'
 			}
-			this.$emit('change', { status: this.status, distance })
-		},
-		isElement(node) {
+			emit('change', { status: status.value, distance: distanceValue })
+		}
+		const isElement = node => {
 			return node.tagName !== 'HTML' && node.tagName !== 'BODY' && node.nodeType === 1
-		},
-		isVertical() {
-			return this.touch.direction === 'vertical'
-		},
-		isHorizontal() {
-			return this.touch.direction === 'horizontal'
-		},
-		getDirection(x, y) {
+		}
+		const isVertical = () => {
+			return touch.direction === 'vertical'
+		}
+		const isHorizontal = () => {
+			return touch.direction === 'horizontal'
+		}
+		const getDirection = (x, y) => {
 			let MIN_DISTANCE = 10
 			if (x > y && x > MIN_DISTANCE) {
 				return 'horizontal'
@@ -167,35 +145,35 @@ export default {
 				return 'vertical'
 			}
 			return ''
-		},
-		resetTouch() {
-			this.touch.deltaX = 0
-			this.touch.deltaY = 0
-			this.touch.offsetX = 0
-			this.touch.offsetY = 0
-			this.touch.direction = ''
-		},
-		startTouch(event) {
-			this.resetTouch()
-			this.touch.startX = event.touches[0].clientX
-			this.touch.startY = event.touches[0].clientY
-		},
-		moveTouch(event) {
+		}
+		const resetTouch = () => {
+			touch.deltaX = 0
+			touch.deltaY = 0
+			touch.offsetX = 0
+			touch.offsetY = 0
+			touch.direction = ''
+		}
+		const startTouch = event => {
+			resetTouch()
+			touch.startX = event.touches[0].clientX
+			touch.startY = event.touches[0].clientY
+		}
+		const moveTouch = event => {
 			const touch = event.touches[0]
-			this.touch.deltaX = touch.clientX - this.touch.startX
-			this.touch.deltaY = touch.clientY - this.touch.startY
-			this.touch.moveX = touch.clientX
-			this.touch.moveY = touch.clientY
-			this.touch.offsetX = Math.abs(this.touch.deltaX)
-			this.touch.offsetY = Math.abs(this.touch.deltaY)
-			if (!this.touch.direction) {
-				this.touch.direction = this.getDirection(this.touch.offsetX, this.touch.offsetY)
+			touch.deltaX = touch.clientX - touch.startX
+			touch.deltaY = touch.clientY - touch.startY
+			touch.moveX = touch.clientX
+			touch.moveY = touch.clientY
+			touch.offsetX = Math.abs(touch.deltaX)
+			touch.offsetY = Math.abs(touch.deltaY)
+			if (!touch.direction) {
+				touch.direction = getDirection(touch.offsetX, touch.offsetY)
 			}
-		},
-		getScrollParent(el, root = window) {
+		}
+		const getScrollParent = (el, root = window) => {
 			let node = el
 			const overflowScrollReg = /scroll|auto|overlay/i
-			while (node && node !== root && this.isElement(node)) {
+			while (node && node !== root && isElement(node)) {
 				const { overflowY } = window.getComputedStyle(node)
 				if (overflowScrollReg.test(overflowY)) {
 					return node
@@ -203,57 +181,78 @@ export default {
 				node = node.parentNode
 			}
 			return root
-		},
-		getScrollTopRoot() {
+		}
+		const getScrollTopRoot = () => {
 			return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
-		},
-		isCanTouch() {
-			return this.status !== 'loading' && this.status !== 'complete'
-		},
-		isScrollTop() {
-			if (this.scrollParent === window) {
-				return this.getScrollTopRoot() === 0
+		}
+		const isCanTouch = () => {
+			return !['loading', 'complete'].includes(status.value)
+		}
+		const isScrollTop = () => {
+			if (scrollParent === window) {
+				return getScrollTopRoot() === 0
 			} else {
-				return this.scrollParent && this.scrollParent.scrollTop === 0
+				return scrollParent && scrollParent.scrollTop === 0
 			}
-		},
-		touchStart(event) {
-			if (this.isCanTouch()) {
-				if (this.isScrollTop()) {
-					this.startTouch(event)
-					this.isPullRefresh = true
-				} else {
-					this.distance = 0
-					this.isPullRefresh = false
-				}
+		}
+		const touchStart = event => {
+			if (!isCanTouch()) return
+			if (isScrollTop()) {
+				startTouch(event)
+				isPullRefresh.value = true
+			} else {
+				distance.value = 0
+				isPullRefresh.value = false
 			}
-		},
-		touchMove(event) {
-			if (this.isCanTouch()) {
-				this.moveTouch(event)
-				if (this.isVertical() && this.touch.deltaY > 0 && this.isPullRefresh) {
-					event.preventDefault()
-					this.setPullStatus(this.timing(this.touch.deltaY))
-				}
+		}
+		const touchMove = event => {
+			if (!isCanTouch()) return
+			moveTouch(event)
+			if (isVertical() && touch.deltaY > 0 && isPullRefresh) {
+				event.preventDefault()
+				setPullStatus(timing(touch.deltaY))
 			}
-		},
-		touchEnd() {
-			const that = this
-			if (that.isPullRefresh && that.isCanTouch() && that.touch.deltaY) {
-				if (that.status === 'loosing') {
-					that.setPullStatus(+that.headHeight, true)
-					that.$emit('update:modelValue', true)
-					that.$nextTick(() => that.$emit('refresh'))
+		}
+		const touchEnd = () => {
+			if (isPullRefresh.value && isCanTouch() && touch.deltaY) {
+				if (status.value === 'loosing') {
+					setPullStatus(+props.headHeight, true)
+					emit('update:modelValue', true)
+					nextTick(() => emit('refresh'))
 				} else {
-					that.setPullStatus(0)
+					setPullStatus(0)
 				}
 			}
 			setTimeout(() => {
-				that.resetTouch()
+				resetTouch()
 			}, 0)
 		}
+
+		watch(
+			() => props.modelValue,
+			val => {
+				if (val) {
+					setPullStatus(+props.headHeight, true)
+					nextTick(() => emit('refresh'))
+				} else {
+					setPullStatus(0)
+				}
+			}
+		)
+
+		onMounted(() => {
+			initMounted()
+		})
+
+		return {
+			getStyle,
+			getHeightStyle,
+			touchStart,
+			touchMove,
+			touchEnd
+		}
 	}
-}
+})
 </script>
 
 <style scoped lang="scss">

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

@@ -1,12 +1,12 @@
 <template>
 	<div class="sh-result">
-		<div v-if="isicon || $slots.icon" class="sh-result-icon" :class="resultType">
+		<div v-if="isicon || slots.icon" class="sh-result-icon" :class="resultType">
 			<slot name="icon"><sh-icon :type="resultIcon" :size="iconSize" /></slot>
 		</div>
-		<div v-if="resultTitle || $slots.title" class="sh-result-title" :title="resultTitle">
+		<div v-if="resultTitle || slots.title" class="sh-result-title" :title="resultTitle">
 			<slot name="title">{{ resultTitle }}</slot>
 		</div>
-		<div v-if="text || $slots.text" v-line-clamp="clamp" class="sh-result-text" :title="text">
+		<div v-if="text || slots.text" v-line-clamp="clamp" class="sh-result-text" :title="text">
 			<slot name="text">{{ text }}</slot>
 		</div>
 		<slot name="default"></slot>
@@ -14,9 +14,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent, computed } from 'vue'
+export default defineComponent({
 	name: 'ShResult',
-	components: {},
 	props: {
 		type: {
 			type: String,
@@ -47,31 +47,40 @@ export default {
 			default: 2
 		}
 	},
-	computed: {
-		resultType() {
-			let types = ['success', 'error', 'warning', 'info']
-			return types.includes(this.type) ? this.type : 'info'
-		},
-		resultTitle() {
-			let resultTitleMap = {
-				success: '成功',
-				error: '失败',
-				warning: '警告',
-				info: '提示'
-			}
-			return typeof this.title === 'string' ? this.title : resultTitleMap[this.resultType]
-		},
-		resultIcon() {
-			let resultIconMap = {
-				success: 'ios-checkmark-circle',
-				error: 'ios-close-circle',
-				warning: 'ios-alert',
-				info: 'ios-information-circle'
-			}
-			return resultIconMap[this.resultType]
+	setup(props, context) {
+		const { emit, slots } = context
+		let types = ['success', 'error', 'warning', 'info']
+		let resultTitleMap = {
+			success: '成功',
+			error: '失败',
+			warning: '警告',
+			info: '提示'
+		}
+		let resultIconMap = {
+			success: 'ios-checkmark-circle',
+			error: 'ios-close-circle',
+			warning: 'ios-alert',
+			info: 'ios-information-circle'
+		}
+
+		const resultType = computed(() => {
+			return types.includes(props.type) ? props.type : 'info'
+		})
+		const resultTitle = computed(() => {
+			return typeof props.title === 'string' ? props.title : resultTitleMap[resultType.value]
+		})
+		const resultIcon = computed(() => {
+			return resultIconMap[resultType.value]
+		})
+
+		return {
+			slots,
+			resultType,
+			resultTitle,
+			resultIcon
 		}
 	}
-}
+})
 </script>
 
 <style lang="scss" scoped>

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

@@ -5,15 +5,10 @@
 </template>
 
 <script>
+import { defineComponent, computed, provide } from 'vue'
 import './css/index.scss'
-const prefixCls = 'sh-row'
-export default {
+export default defineComponent({
 	name: 'ShRow',
-	provide() {
-		return {
-			RowInstance: this
-		}
-	},
 	props: {
 		align: {
 			type: String,
@@ -35,29 +30,37 @@ export default {
 			type: Boolean
 		}
 	},
-	computed: {
-		classes() {
+	setup(props, context) {
+		const prefixCls = 'sh-row'
+		provide('RowInstance', props)
+
+		const classes = computed(() => {
 			return [
 				`${prefixCls}`,
 				{
-					[`${prefixCls}-${this.align}`]: !!this.align,
-					[`${prefixCls}-${this.justify}`]: !!this.justify,
-					[`${prefixCls}-wrap`]: this.wrap
+					[`${prefixCls}-${props.align}`]: !!props.align,
+					[`${prefixCls}-${props.justify}`]: !!props.justify,
+					[`${prefixCls}-wrap`]: props.wrap
 				}
 			]
-		},
-		styles() {
+		})
+		const styles = computed(() => {
 			let style = {}
-			if (this.gutter !== 0 && this.margin) {
+			if (props.gutter !== 0 && props.margin) {
 				style = {
-					marginLeft: this.gutter / -2 + 'px',
-					marginRight: this.gutter / -2 + 'px'
+					marginLeft: props.gutter / -2 + 'px',
+					marginRight: props.gutter / -2 + 'px'
 				}
 			}
 			return style
+		})
+
+		return {
+			classes,
+			styles
 		}
 	}
-}
+})
 </script>
 
 <style scoped lang="scss"></style>