sh-view 2.8.1 → 2.8.2

package/packages/components/sh-water-fall/index.vue

@@ -1,80 +1,80 @@
-<template>
-	<div
-		v-masonry
-		class="sh-waterfall"
-		:transition-duration="duration"
-		:item-selector="selector"
-		:origin-left="originLeft"
-		:origin-top="originTop"
-		:fit-width="fitWidth"
-		:stamp="stamp"
-		:gutter="gutter"
-		:horizontal-order="horizontalOrder">
-		<div v-for="(item, itemindex) in dataSourse" :key="itemindex" v-masonry-tile class="sh-water-item" :class="itemClassName">
-			<slot name="item" :item="item" :index="itemindex"></slot>
-		</div>
-	</div>
-</template>
-
-<script>
-import { defineComponent, computed, getCurrentInstance, ref, watch, onBeforeMount } from 'vue'
-export default defineComponent({
-	name: 'ShWaterFall',
-	props: {
-		id: {
-			type: String,
-			default: 'containerId'
-		},
-		dataSourse: {
-			type: Array,
-			default() {
-				return []
-			}
-		},
-		itemClassName: {
-			type: String
-		},
-		duration: {
-			type: String,
-			default: '0.3s'
-		},
-		selector: {
-			type: String,
-			default: '.sh-water-item'
-		},
-		fitWidth: {
-			type: Boolean,
-			default: false
-		},
-		originLeft: {
-			type: Boolean,
-			default: true
-		},
-		originTop: {
-			type: Boolean,
-			default: true
-		},
-		horizontalOrder: {
-			type: Boolean,
-			default: true
-		},
-		stamp: {
-			type: String,
-			default: ''
-		},
-		gutter: {
-			type: [String, Number],
-			default: 10
-		}
-	}
-})
-</script>
-
-<style lang="scss" scoped>
-.sh-waterfall {
-	width: 100%;
-	margin: auto;
-	.sh-list-item {
-	}
-}
-</style>
+<template>
+	<div
+		v-masonry
+		class="sh-waterfall"
+		:transition-duration="duration"
+		:item-selector="selector"
+		:origin-left="originLeft"
+		:origin-top="originTop"
+		:fit-width="fitWidth"
+		:stamp="stamp"
+		:gutter="gutter"
+		:horizontal-order="horizontalOrder">
+		<div v-for="(item, itemindex) in dataSourse" :key="itemindex" v-masonry-tile class="sh-water-item" :class="itemClassName">
+			<slot name="item" :item="item" :index="itemindex"></slot>
+		</div>
+	</div>
+</template>
+
+<script>
+import { defineComponent, computed, getCurrentInstance, ref, watch, onBeforeMount } from 'vue'
+export default defineComponent({
+	name: 'ShWaterFall',
+	props: {
+		id: {
+			type: String,
+			default: 'containerId'
+		},
+		dataSourse: {
+			type: Array,
+			default() {
+				return []
+			}
+		},
+		itemClassName: {
+			type: String
+		},
+		duration: {
+			type: String,
+			default: '0.3s'
+		},
+		selector: {
+			type: String,
+			default: '.sh-water-item'
+		},
+		fitWidth: {
+			type: Boolean,
+			default: false
+		},
+		originLeft: {
+			type: Boolean,
+			default: true
+		},
+		originTop: {
+			type: Boolean,
+			default: true
+		},
+		horizontalOrder: {
+			type: Boolean,
+			default: true
+		},
+		stamp: {
+			type: String,
+			default: ''
+		},
+		gutter: {
+			type: [String, Number],
+			default: 10
+		}
+	}
+})
+</script>
+
+<style lang="scss" scoped>
+.sh-waterfall {
+	width: 100%;
+	margin: auto;
+	.sh-list-item {
+	}
+}
+</style>

package/packages/components/sh-water-mark/index.vue

@@ -1,96 +1,96 @@
-<template>
-	<div ref="rootRef" class="sh-water-mark">
-		<slot></slot>
-	</div>
-</template>
-
-<script>
-import { defineComponent, computed, getCurrentInstance, ref, watch, onMounted } from 'vue'
-export default defineComponent({
-	name: 'ShWaterMark',
-	props: {
-		content: String,
-		font: {
-			type: String,
-			default: '1.5em Arial'
-		},
-		color: {
-			type: String,
-			default: 'rgba(0,0,0,0.4)'
-		},
-		rotate: {
-			type: Number,
-			default: -45
-		},
-		height: {
-			type: Number,
-			default: 150
-		},
-		width: {
-			type: Number,
-			default: 150
-		}
-	},
-	setup(props, context) {
-		const { proxy } = getCurrentInstance()
-		const { $vUtils } = proxy
-		const { emit, slots } = context
-
-		const rootRef = ref()
-		let content = null
-
-		const initWaterMark = () => {
-			if (!rootRef.value) return
-			const parentElement = rootRef.value
-			const watermarkCanvas = document.createElement('canvas')
-			watermarkCanvas.setAttribute('width', `${props.width}`)
-			watermarkCanvas.setAttribute('height', `${props.height}`)
-			const ctx = watermarkCanvas.getContext('2d')
-			ctx.font = `${props.font}`
-			ctx.fillStyle = props.color
-			ctx.textAlign = 'center'
-			ctx.translate(props.width / 2, props.height / 2)
-			ctx.rotate((Math.PI / 180) * props.rotate)
-			ctx.fillText(props.content, 0, 0)
-			const base64Url = watermarkCanvas.toDataURL()
-			if (content) content.remove()
-			content = document.createElement('div')
-			const styles = `position: absolute;
-                        pointer-events: none;
-                        z-index: 9999;
-                        inset: 0;
-                        mix-blend-mode: multiply;
-                        background-repeat:repeat;
-                        background-size: ${props.width}px, ${props.height}px;
-                        background-image:url('${base64Url}');
-                        `
-			content.setAttribute('style', styles)
-			content.classList.add('sh-watermark-box')
-			parentElement.appendChild(content)
-			const observer = new MutationObserver(() => {
-				const wortmarkBox = parentElement.querySelector('.sh-watermark-box')
-				if (!wortmarkBox) {
-					parentElement.appendChild(content)
-				} else if (wortmarkBox.getAttribute('style') !== styles) {
-					wortmarkBox.setAttribute('style', styles)
-				}
-			})
-			observer.observe(parentElement, { attributes: true, subtree: true, childList: true })
-		}
-
-		onMounted(() => {
-			initWaterMark()
-		})
-
-		return {
-			rootRef
-		}
-	}
-})
-</script>
-
-<style scoped lang="scss">
-.sh-water-mark {
-	position: relative;
-}
-</style>
+<template>
+	<div ref="rootRef" class="sh-water-mark">
+		<slot></slot>
+	</div>
+</template>
+
+<script>
+import { defineComponent, computed, getCurrentInstance, ref, watch, onMounted } from 'vue'
+export default defineComponent({
+	name: 'ShWaterMark',
+	props: {
+		content: String,
+		font: {
+			type: String,
+			default: '1.5em Arial'
+		},
+		color: {
+			type: String,
+			default: 'rgba(0,0,0,0.4)'
+		},
+		rotate: {
+			type: Number,
+			default: -45
+		},
+		height: {
+			type: Number,
+			default: 150
+		},
+		width: {
+			type: Number,
+			default: 150
+		}
+	},
+	setup(props, context) {
+		const { proxy } = getCurrentInstance()
+		const { $vUtils } = proxy
+		const { emit, slots } = context
+
+		const rootRef = ref()
+		let content = null
+
+		const initWaterMark = () => {
+			if (!rootRef.value) return
+			const parentElement = rootRef.value
+			const watermarkCanvas = document.createElement('canvas')
+			watermarkCanvas.setAttribute('width', `${props.width}`)
+			watermarkCanvas.setAttribute('height', `${props.height}`)
+			const ctx = watermarkCanvas.getContext('2d')
+			ctx.font = `${props.font}`
+			ctx.fillStyle = props.color
+			ctx.textAlign = 'center'
+			ctx.translate(props.width / 2, props.height / 2)
+			ctx.rotate((Math.PI / 180) * props.rotate)
+			ctx.fillText(props.content, 0, 0)
+			const base64Url = watermarkCanvas.toDataURL()
+			if (content) content.remove()
+			content = document.createElement('div')
+			const styles = `position: absolute;
+                        pointer-events: none;
+                        z-index: 9999;
+                        inset: 0;
+                        mix-blend-mode: multiply;
+                        background-repeat:repeat;
+                        background-size: ${props.width}px, ${props.height}px;
+                        background-image:url('${base64Url}');
+                        `
+			content.setAttribute('style', styles)
+			content.classList.add('sh-watermark-box')
+			parentElement.appendChild(content)
+			const observer = new MutationObserver(() => {
+				const wortmarkBox = parentElement.querySelector('.sh-watermark-box')
+				if (!wortmarkBox) {
+					parentElement.appendChild(content)
+				} else if (wortmarkBox.getAttribute('style') !== styles) {
+					wortmarkBox.setAttribute('style', styles)
+				}
+			})
+			observer.observe(parentElement, { attributes: true, subtree: true, childList: true })
+		}
+
+		onMounted(() => {
+			initWaterMark()
+		})
+
+		return {
+			rootRef
+		}
+	}
+})
+</script>
+
+<style scoped lang="scss">
+.sh-water-mark {
+	position: relative;
+}
+</style>

package/packages/css/index.js

@@ -1,4 +1,4 @@
-import './theme.scss'
-import './loader.scss'
-import './main.scss'
-import './animated.scss'
+import './theme.scss'
+import './loader.scss'
+import './main.scss'
+import './animated.scss'

package/packages/directive/index.js

@@ -1,19 +1,19 @@
-import draggable from './module/draggable'
-import resize from './module/resize'
-import lineClamp from './module/line-clamp'
-import preventClick from './module/prevent-click'
-import clickOut from './module/click-out'
-import ripple from './module/ripple'
-
-const index = {
-	install(Vue) {
-		Vue.directive('draggable', draggable)
-		Vue.directive('resize', resize)
-		Vue.directive('lineClamp', lineClamp)
-		Vue.directive('debounce', preventClick)
-		Vue.directive('clickout', clickOut)
-		Vue.directive('ripple', ripple)
-	}
-}
-
-export default index
+import draggable from './module/draggable'
+import resize from './module/resize'
+import lineClamp from './module/line-clamp'
+import preventClick from './module/prevent-click'
+import clickOut from './module/click-out'
+import ripple from './module/ripple'
+
+const index = {
+	install(Vue) {
+		Vue.directive('draggable', draggable)
+		Vue.directive('resize', resize)
+		Vue.directive('lineClamp', lineClamp)
+		Vue.directive('debounce', preventClick)
+		Vue.directive('clickout', clickOut)
+		Vue.directive('ripple', ripple)
+	}
+}
+
+export default index

package/packages/directive/module/click-out.js

@@ -1,14 +1,14 @@
-export default {
-	beforeMount(el, binding, vnode) {
-		function clickHandler(e) {
-			if (el.contains(e.target)) return false
-			binding.value(e)
-		}
-		el.__vueClickOutside__ = clickHandler
-		document.addEventListener('click', clickHandler)
-	},
-	unmounted(el, binding) {
-		document.removeEventListener('click', el.__vueClickOutside__)
-		delete el.__vueClickOutside__
-	}
-}
+export default {
+	beforeMount(el, binding, vnode) {
+		function clickHandler(e) {
+			if (el.contains(e.target)) return false
+			binding.value(e)
+		}
+		el.__vueClickOutside__ = clickHandler
+		document.addEventListener('click', clickHandler)
+	},
+	unmounted(el, binding) {
+		document.removeEventListener('click', el.__vueClickOutside__)
+		delete el.__vueClickOutside__
+	}
+}

package/packages/directive/module/draggable.js

@@ -1,42 +1,42 @@
-import { utils } from 'sh-tools'
-
-export default {
-	mounted: (el, binding, vnode) => {
-		let triggerDom = document.querySelector(binding.value.trigger)
-		triggerDom.style.cursor = 'move'
-		let bodyDom = document.querySelector(binding.value.body)
-		let pageX = 0
-		let pageY = 0
-		let transformX = 0
-		let transformY = 0
-		let canMove = false
-		const handleMousedown = e => {
-			let transform = /\(.*\)/.exec(bodyDom.style.transform)
-			if (transform) {
-				transform = transform[0].slice(1, transform[0].length - 1)
-				let splitxy = transform.split('px, ')
-				transformX = parseFloat(splitxy[0])
-				transformY = parseFloat(splitxy[1].split('px')[0])
-			}
-			pageX = e.pageX
-			pageY = e.pageY
-			canMove = true
-		}
-		const handleMousemove = e => {
-			let xOffset = e.pageX - pageX + transformX
-			let yOffset = e.pageY - pageY + transformY
-			if (canMove) bodyDom.style.transform = `translate(${xOffset}px, ${yOffset}px)`
-		}
-		const handleMouseup = e => {
-			canMove = false
-		}
-		utils.on(triggerDom, 'mousedown', handleMousedown)
-		utils.on(document, 'mousemove', handleMousemove)
-		utils.on(document, 'mouseup', handleMouseup)
-	},
-	updated: (el, binding, vnode) => {
-		if (!binding.value.recover) return
-		let bodyDom = document.querySelector(binding.value.body)
-		bodyDom.style.transform = ''
-	}
-}
+import { utils } from 'sh-tools'
+
+export default {
+	mounted: (el, binding, vnode) => {
+		let triggerDom = document.querySelector(binding.value.trigger)
+		triggerDom.style.cursor = 'move'
+		let bodyDom = document.querySelector(binding.value.body)
+		let pageX = 0
+		let pageY = 0
+		let transformX = 0
+		let transformY = 0
+		let canMove = false
+		const handleMousedown = e => {
+			let transform = /\(.*\)/.exec(bodyDom.style.transform)
+			if (transform) {
+				transform = transform[0].slice(1, transform[0].length - 1)
+				let splitxy = transform.split('px, ')
+				transformX = parseFloat(splitxy[0])
+				transformY = parseFloat(splitxy[1].split('px')[0])
+			}
+			pageX = e.pageX
+			pageY = e.pageY
+			canMove = true
+		}
+		const handleMousemove = e => {
+			let xOffset = e.pageX - pageX + transformX
+			let yOffset = e.pageY - pageY + transformY
+			if (canMove) bodyDom.style.transform = `translate(${xOffset}px, ${yOffset}px)`
+		}
+		const handleMouseup = e => {
+			canMove = false
+		}
+		utils.on(triggerDom, 'mousedown', handleMousedown)
+		utils.on(document, 'mousemove', handleMousemove)
+		utils.on(document, 'mouseup', handleMouseup)
+	},
+	updated: (el, binding, vnode) => {
+		if (!binding.value.recover) return
+		let bodyDom = document.querySelector(binding.value.body)
+		bodyDom.style.transform = ''
+	}
+}

package/packages/directive/module/line-clamp.js

@@ -1,22 +1,22 @@
-/**
- * 限制文本最多显示几行，以...结束，仅适用于 webkit 内核浏览器
- * */
-import { utils } from 'sh-tools'
-
-export default {
-	mounted(el, binding) {
-		if (binding.value) {
-			utils.addClass(el, 'sh-line-clamp')
-			el.style['-webkit-line-clamp'] = binding.value
-		}
-	},
-	updated(el, binding) {
-		if (binding.value) {
-			el.style['-webkit-line-clamp'] = binding.value
-		}
-	},
-	unmounted(el) {
-		utils.removeClass(el, 'sh-line-clamp')
-		el.style['-webkit-line-clamp'] = null
-	}
-}
+/**
+ * 限制文本最多显示几行，以...结束，仅适用于 webkit 内核浏览器
+ * */
+import { utils } from 'sh-tools'
+
+export default {
+	mounted(el, binding) {
+		if (binding.value) {
+			utils.addClass(el, 'sh-line-clamp')
+			el.style['-webkit-line-clamp'] = binding.value
+		}
+	},
+	updated(el, binding) {
+		if (binding.value) {
+			el.style['-webkit-line-clamp'] = binding.value
+		}
+	},
+	unmounted(el) {
+		utils.removeClass(el, 'sh-line-clamp')
+		el.style['-webkit-line-clamp'] = null
+	}
+}

package/packages/directive/module/prevent-click.js

@@ -1,18 +1,18 @@
-import { utils } from 'sh-tools'
-
-let preventClass = 'sh-prevent--disabled'
-
-export default {
-	mounted(el, binding) {
-		el.addEventListener('click', () => {
-			if (!el.disabled) {
-				el.disabled = true
-				if (!utils.hasClass(el, preventClass)) utils.addClass(el, preventClass)
-				setTimeout(() => {
-					el.disabled = false
-					if (utils.hasClass(el, preventClass)) utils.removeClass(el, preventClass)
-				}, binding.value || 1500)
-			}
-		})
-	}
-}
+import { utils } from 'sh-tools'
+
+let preventClass = 'sh-prevent--disabled'
+
+export default {
+	mounted(el, binding) {
+		el.addEventListener('click', () => {
+			if (!el.disabled) {
+				el.disabled = true
+				if (!utils.hasClass(el, preventClass)) utils.addClass(el, preventClass)
+				setTimeout(() => {
+					el.disabled = false
+					if (utils.hasClass(el, preventClass)) utils.removeClass(el, preventClass)
+				}, binding.value || 1500)
+			}
+		})
+	}
+}

package/packages/directive/module/resize.js

@@ -1,14 +1,14 @@
-import { createResizeEvent, XEResizeObserver } from '../../utils/resize'
-
-export default {
-	beforeMount(el, binding) {
-		const _callback = binding.value
-		el.__observer__ = createResizeEvent(_callback)
-		el.__observer__.observe(el)
-	},
-	unmounted(el, binding) {
-		if (!el.__observer__) return
-		el.__observer__.unobserve(el)
-		delete el.__observer__
-	}
-}
+import { createResizeEvent, XEResizeObserver } from '../../utils/resize'
+
+export default {
+	beforeMount(el, binding) {
+		const _callback = binding.value
+		el.__observer__ = createResizeEvent(_callback)
+		el.__observer__.observe(el)
+	},
+	unmounted(el, binding) {
+		if (!el.__observer__) return
+		el.__observer__.unobserve(el)
+		delete el.__observer__
+	}
+}