sh-view 2.8.1 → 2.8.2

package/packages/directive/module/ripple.js

@@ -1,166 +1,166 @@
-function magnitude(x1, y1, x2, y2) {
-	const deltaX = x1 - x2
-	const deltaY = y1 - y2
-	return Math.sqrt(deltaX * deltaX + deltaY * deltaY)
-}
-
-const RIPPLE_COUNT = 'vRippleCountInternal'
-function setRippleCount(el, count) {
-	el.dataset[RIPPLE_COUNT] = count.toString()
-}
-
-function getRippleCount(el) {
-	return parseInt(el.dataset[RIPPLE_COUNT] ?? '0', 10)
-}
-
-function incrementRippleCount(el) {
-	const count = getRippleCount(el)
-	setRippleCount(el, count + 1)
-}
-
-function decrementRippleCount(el) {
-	const count = getRippleCount(el)
-	setRippleCount(el, count - 1)
-}
-
-function deleteRippleCount(el) {
-	delete el.dataset[RIPPLE_COUNT]
-}
-
-const getRelativePointer = ({ x, y }, { top, left }) => ({ x: x - left, y: y - top })
-
-const getDistanceToFurthestCorner = (x, y, { width, height }) => {
-	// 获取点击目标的位置到块级作用域边界的距离
-	const topLeft = magnitude(x, y, 0, 0)
-	const topRight = magnitude(x, y, width, 0)
-	const bottomLeft = magnitude(x, y, 0, height)
-	const bottomRight = magnitude(x, y, width, height)
-	return Math.max(topLeft, topRight, bottomLeft, bottomRight)
-}
-
-const createContainer = ({ borderTopLeftRadius, borderTopRightRadius, borderBottomLeftRadius, borderBottomRightRadius }) => {
-	const rippleContainer = document.createElement('div')
-	rippleContainer.style.top = '0'
-	rippleContainer.style.left = '0'
-	rippleContainer.style.width = '100%'
-	rippleContainer.style.height = '100%'
-	rippleContainer.style.position = 'absolute'
-	rippleContainer.style.borderRadius = `${borderTopLeftRadius} ${borderTopRightRadius} ${borderBottomRightRadius} ${borderBottomLeftRadius}`
-	rippleContainer.style.overflow = 'hidden'
-	rippleContainer.style.pointerEvents = 'none'
-	// 兼容 ie  苹果
-	rippleContainer.style.webkitMaskImage = '-webkit-radial-gradient(white, black)'
-	return rippleContainer
-}
-
-const createrippleElement = (x, y, size, options) => {
-	const rippleElement = document.createElement('div')
-	rippleElement.style.position = 'absolute'
-	rippleElement.style.width = `${size}px`
-	rippleElement.style.height = `${size}px`
-	rippleElement.style.top = `${y}px`
-	rippleElement.style.left = `${x}px`
-	rippleElement.style.background = options.color
-	rippleElement.style.borderRadius = '50%'
-	rippleElement.style.opacity = `${options.initialOpacity}`
-	rippleElement.style.transform = `translate(-50%,-50%) scale(0)`
-	rippleElement.style.transition = `transform ${options.duration / 1000}s ${options.easing}, opacity ${options.duration / 1000}s ${options.easing}`
-	return rippleElement
-}
-
-const MULTIPLE_NUMBER = 2.05
-
-const ripple = (event, el, options) => {
-	const rect = el.getBoundingClientRect()
-	const computedStyles = window.getComputedStyle(el)
-	const { x, y } = getRelativePointer(event, rect)
-	const size = MULTIPLE_NUMBER * getDistanceToFurthestCorner(x, y, rect)
-
-	const rippleContainer = createContainer(computedStyles)
-	const rippleEl = createrippleElement(x, y, size, options)
-	let originalPositionValue = ''
-	let shouldDissolveripple = false
-	let token = null
-	function dissolveripple() {
-		rippleEl.style.transition = 'opacity 150ms linear'
-		rippleEl.style.opacity = '0'
-		setTimeout(() => {
-			rippleContainer.remove()
-			decrementRippleCount(el)
-			if (getRippleCount(el) === 0) {
-				deleteRippleCount(el)
-				el.style.position = originalPositionValue
-			}
-		}, 150)
-	}
-	function releaseripple(e) {
-		if (typeof e !== 'undefined') {
-			document.removeEventListener('pointerup', releaseripple)
-			document.removeEventListener('pointercancel', releaseripple)
-		}
-		if (shouldDissolveripple) {
-			dissolveripple()
-		} else {
-			shouldDissolveripple = true
-		}
-	}
-	function cancelripple() {
-		clearTimeout(token)
-		rippleContainer.remove()
-		document.removeEventListener('pointerup', releaseripple)
-		document.removeEventListener('pointercancel', releaseripple)
-		document.removeEventListener('pointercancel', cancelripple)
-	}
-	incrementRippleCount(el)
-	if (computedStyles.position === 'static') {
-		if (el.style.position) {
-			originalPositionValue = el.style.position
-		}
-		el.style.position = 'relative'
-	}
-	rippleContainer.appendChild(rippleEl)
-	el.appendChild(rippleContainer)
-	document.addEventListener('pointerup', releaseripple)
-	document.addEventListener('pointercancel', releaseripple)
-	token = setTimeout(() => {
-		document.removeEventListener('pointercancel', cancelripple)
-		requestAnimationFrame(() => {
-			rippleEl.style.transform = `translate(-50%,-50%) scale(1)`
-			rippleEl.style.opacity = `${options.finalOpacity}`
-			setTimeout(() => releaseripple(), options.duration)
-		})
-	}, options.delay)
-	document.addEventListener('pointercancel', cancelripple)
-}
-
-const defaultOptions = {
-	directive: 'ripple',
-	color: 'currentColor', // 你可以设置 ·currentColor· to 能够自动使用元素的文本颜色
-	initialOpacity: 0.2, // 第一次出现的透明度
-	finalOpacity: 0.1, // 在透明度 结束的时候 stopped 的时候 我们设置透明度的大小
-	duration: 400, // 动画持续时间
-	easing: 'ease-out', // css 动画 从开始到结束 以相同的时间来执行动画
-	delay: 75, // 类似于 debounceTime
-	disabled: false // 类似于 点击禁止ripple效果
-}
-export default {
-	mounted(el, binding) {
-		el.addEventListener('pointerdown', event => {
-			const options = binding.value || {}
-			// 必须确保disabled 属性存在 否则指令终止报错
-			if (binding.value && binding.value.disabled) {
-				return
-			}
-			if (options === false) {
-				return
-			}
-			ripple(event, el, {
-				...defaultOptions,
-				...options
-			})
-		})
-	},
-	updated(el, binding) {
-		binding.value = {}
-	}
-}
+function magnitude(x1, y1, x2, y2) {
+	const deltaX = x1 - x2
+	const deltaY = y1 - y2
+	return Math.sqrt(deltaX * deltaX + deltaY * deltaY)
+}
+
+const RIPPLE_COUNT = 'vRippleCountInternal'
+function setRippleCount(el, count) {
+	el.dataset[RIPPLE_COUNT] = count.toString()
+}
+
+function getRippleCount(el) {
+	return parseInt(el.dataset[RIPPLE_COUNT] ?? '0', 10)
+}
+
+function incrementRippleCount(el) {
+	const count = getRippleCount(el)
+	setRippleCount(el, count + 1)
+}
+
+function decrementRippleCount(el) {
+	const count = getRippleCount(el)
+	setRippleCount(el, count - 1)
+}
+
+function deleteRippleCount(el) {
+	delete el.dataset[RIPPLE_COUNT]
+}
+
+const getRelativePointer = ({ x, y }, { top, left }) => ({ x: x - left, y: y - top })
+
+const getDistanceToFurthestCorner = (x, y, { width, height }) => {
+	// 获取点击目标的位置到块级作用域边界的距离
+	const topLeft = magnitude(x, y, 0, 0)
+	const topRight = magnitude(x, y, width, 0)
+	const bottomLeft = magnitude(x, y, 0, height)
+	const bottomRight = magnitude(x, y, width, height)
+	return Math.max(topLeft, topRight, bottomLeft, bottomRight)
+}
+
+const createContainer = ({ borderTopLeftRadius, borderTopRightRadius, borderBottomLeftRadius, borderBottomRightRadius }) => {
+	const rippleContainer = document.createElement('div')
+	rippleContainer.style.top = '0'
+	rippleContainer.style.left = '0'
+	rippleContainer.style.width = '100%'
+	rippleContainer.style.height = '100%'
+	rippleContainer.style.position = 'absolute'
+	rippleContainer.style.borderRadius = `${borderTopLeftRadius} ${borderTopRightRadius} ${borderBottomRightRadius} ${borderBottomLeftRadius}`
+	rippleContainer.style.overflow = 'hidden'
+	rippleContainer.style.pointerEvents = 'none'
+	// 兼容 ie  苹果
+	rippleContainer.style.webkitMaskImage = '-webkit-radial-gradient(white, black)'
+	return rippleContainer
+}
+
+const createrippleElement = (x, y, size, options) => {
+	const rippleElement = document.createElement('div')
+	rippleElement.style.position = 'absolute'
+	rippleElement.style.width = `${size}px`
+	rippleElement.style.height = `${size}px`
+	rippleElement.style.top = `${y}px`
+	rippleElement.style.left = `${x}px`
+	rippleElement.style.background = options.color
+	rippleElement.style.borderRadius = '50%'
+	rippleElement.style.opacity = `${options.initialOpacity}`
+	rippleElement.style.transform = `translate(-50%,-50%) scale(0)`
+	rippleElement.style.transition = `transform ${options.duration / 1000}s ${options.easing}, opacity ${options.duration / 1000}s ${options.easing}`
+	return rippleElement
+}
+
+const MULTIPLE_NUMBER = 2.05
+
+const ripple = (event, el, options) => {
+	const rect = el.getBoundingClientRect()
+	const computedStyles = window.getComputedStyle(el)
+	const { x, y } = getRelativePointer(event, rect)
+	const size = MULTIPLE_NUMBER * getDistanceToFurthestCorner(x, y, rect)
+
+	const rippleContainer = createContainer(computedStyles)
+	const rippleEl = createrippleElement(x, y, size, options)
+	let originalPositionValue = ''
+	let shouldDissolveripple = false
+	let token = null
+	function dissolveripple() {
+		rippleEl.style.transition = 'opacity 150ms linear'
+		rippleEl.style.opacity = '0'
+		setTimeout(() => {
+			rippleContainer.remove()
+			decrementRippleCount(el)
+			if (getRippleCount(el) === 0) {
+				deleteRippleCount(el)
+				el.style.position = originalPositionValue
+			}
+		}, 150)
+	}
+	function releaseripple(e) {
+		if (typeof e !== 'undefined') {
+			document.removeEventListener('pointerup', releaseripple)
+			document.removeEventListener('pointercancel', releaseripple)
+		}
+		if (shouldDissolveripple) {
+			dissolveripple()
+		} else {
+			shouldDissolveripple = true
+		}
+	}
+	function cancelripple() {
+		clearTimeout(token)
+		rippleContainer.remove()
+		document.removeEventListener('pointerup', releaseripple)
+		document.removeEventListener('pointercancel', releaseripple)
+		document.removeEventListener('pointercancel', cancelripple)
+	}
+	incrementRippleCount(el)
+	if (computedStyles.position === 'static') {
+		if (el.style.position) {
+			originalPositionValue = el.style.position
+		}
+		el.style.position = 'relative'
+	}
+	rippleContainer.appendChild(rippleEl)
+	el.appendChild(rippleContainer)
+	document.addEventListener('pointerup', releaseripple)
+	document.addEventListener('pointercancel', releaseripple)
+	token = setTimeout(() => {
+		document.removeEventListener('pointercancel', cancelripple)
+		requestAnimationFrame(() => {
+			rippleEl.style.transform = `translate(-50%,-50%) scale(1)`
+			rippleEl.style.opacity = `${options.finalOpacity}`
+			setTimeout(() => releaseripple(), options.duration)
+		})
+	}, options.delay)
+	document.addEventListener('pointercancel', cancelripple)
+}
+
+const defaultOptions = {
+	directive: 'ripple',
+	color: 'currentColor', // 你可以设置 ·currentColor· to 能够自动使用元素的文本颜色
+	initialOpacity: 0.2, // 第一次出现的透明度
+	finalOpacity: 0.1, // 在透明度 结束的时候 stopped 的时候 我们设置透明度的大小
+	duration: 400, // 动画持续时间
+	easing: 'ease-out', // css 动画 从开始到结束 以相同的时间来执行动画
+	delay: 75, // 类似于 debounceTime
+	disabled: false // 类似于 点击禁止ripple效果
+}
+export default {
+	mounted(el, binding) {
+		el.addEventListener('pointerdown', event => {
+			const options = binding.value || {}
+			// 必须确保disabled 属性存在 否则指令终止报错
+			if (binding.value && binding.value.disabled) {
+				return
+			}
+			if (options === false) {
+				return
+			}
+			ripple(event, el, {
+				...defaultOptions,
+				...options
+			})
+		})
+	},
+	updated(el, binding) {
+		binding.value = {}
+	}
+}

package/packages/index.js

@@ -1,39 +1,39 @@
-import packageConfig from '../package.json'
-import { utils, notice } from 'sh-tools'
-import { VueMasonryPlugin } from 'vue-masonry'
-import directive from './directive/index'
-import vxeTable from './vxeTable/index'
-import components from './components/index'
-import mixin from './mixin/index'
-import './css/index'
-
-// 全局公共封装组件
-const install = function (root, option = {}) {
-	if (install.installed) return
-	root.config.globalProperties.$vUtils = utils
-	root.config.globalProperties.$Notice = notice
-	root.mixin(mixin)
-	root.use(VueMasonryPlugin, option)
-	root.use(directive)
-	root.use(vxeTable, option)
-	root.use(components, option)
-}
-
-const ShUI = {
-	name: packageConfig.name,
-	version: packageConfig.version,
-	install
-}
-
-let consInfo = ''
-let defaultBg = 'padding: 5px; color: #111; background: #f5f7f9; font-weight: bold;'
-let tagBg1 = 'padding: 5px; color: #fff; background: #8e2eff; font-weight: bold;'
-let tagBg2 = 'padding: 5px; color: #333; background: #ffee2e; font-weight: bold;'
-if ((window.navigator.language || window.navigator.browserLanguage).toLowerCase() === 'zh-cn') {
-	consInfo = `%c由%c${ShUI.name}%c提供技术支持，版本%c${ShUI.version}%c`
-} else {
-	consInfo = `%cPowered by%c${ShUI.name}%c，version%c${ShUI.version}%c`
-}
-console.info(consInfo, defaultBg, tagBg1, defaultBg, tagBg2, defaultBg)
-
-export default ShUI
+import packageConfig from '../package.json'
+import { utils, notice } from 'sh-tools'
+import { VueMasonryPlugin } from 'vue-masonry'
+import directive from './directive/index'
+import vxeTable from './vxeTable/index'
+import components from './components/index'
+import mixin from './mixin/index'
+import './css/index'
+
+// 全局公共封装组件
+const install = function (root, option = {}) {
+	if (install.installed) return
+	root.config.globalProperties.$vUtils = utils
+	root.config.globalProperties.$Notice = notice
+	root.mixin(mixin)
+	root.use(VueMasonryPlugin, option)
+	root.use(directive)
+	root.use(vxeTable, option)
+	root.use(components, option)
+}
+
+const ShUI = {
+	name: packageConfig.name,
+	version: packageConfig.version,
+	install
+}
+
+let consInfo = ''
+let defaultBg = 'padding: 5px; color: #111; background: #f5f7f9; font-weight: bold;'
+let tagBg1 = 'padding: 5px; color: #fff; background: #8e2eff; font-weight: bold;'
+let tagBg2 = 'padding: 5px; color: #333; background: #ffee2e; font-weight: bold;'
+if ((window.navigator.language || window.navigator.browserLanguage).toLowerCase() === 'zh-cn') {
+	consInfo = `%c由%c${ShUI.name}%c提供技术支持，版本%c${ShUI.version}%c`
+} else {
+	consInfo = `%cPowered by%c${ShUI.name}%c，version%c${ShUI.version}%c`
+}
+console.info(consInfo, defaultBg, tagBg1, defaultBg, tagBg2, defaultBg)
+
+export default ShUI

package/packages/mixin/index.js

@@ -1,86 +1,86 @@
-const msgDefault = {
-	title: '',
-	className: 'globalMessageBox',
-	draggable: false
-}
-
-const mixin = {
-	methods: {
-		// 全局msg提示方法
-		msg(options) {
-			return this.$vTable.modal.message(options)
-		},
-		msginfo(options) {
-			let opts = Object.assign({}, msgDefault, typeof options === 'string' ? { content: options, status: 'info' } : options)
-			return this.msg(opts)
-		},
-		msgsuccess(options) {
-			let opts = Object.assign({}, msgDefault, typeof options === 'string' ? { content: options, status: 'success' } : options)
-			return this.msg(opts)
-		},
-		msgwarning(options) {
-			let opts = Object.assign({}, msgDefault, typeof options === 'string' ? { content: options, status: 'warning' } : options)
-			return this.msg(opts)
-		},
-		msgerror(options) {
-			let opts = Object.assign({}, msgDefault, typeof options === 'string' ? { content: options, status: 'error' } : options)
-			return this.msg(opts)
-		},
-		msgconfirm(options) {
-			return new Promise(async resolve => {
-				let opts = Object.assign({}, typeof options === 'string' ? { content: options } : options)
-				let type = await this.$vTable.modal.confirm({
-					showHeader: Boolean(opts.title),
-					...opts
-				})
-				if (type === 'confirm') resolve(type)
-			})
-		},
-		// 全局路由跳
-		routerTo(route) {
-			let { name, params, query } = {}
-			if (typeof route === 'string') name = route
-			else {
-				name = route.name
-				params = route.params
-				query = route.query
-			}
-			if (name.indexOf('isTurnByHref_') > -1) {
-				window.open(name.split('_')[1])
-				return
-			}
-			try {
-				this.$router.push({ name, params, query })
-			} catch (e) {
-				this.$router.replace({ path: '/401' })
-			}
-		},
-		// 全局路由返回上一页
-		routerback() {
-			this.$router.back()
-		},
-		// 全局判断是否有子节点
-		hasChildren(item, name = 'children') {
-			return item && item[name] && Array.isArray(item[name]) && item[name].length > 0
-		},
-		// 全局格式化名称
-		formatTitle(item) {
-			let { title, __titleIsFunction__ } = item.meta || {}
-			if (!title) return false
-			if (this.$config.useI18n) {
-				if (title.includes('{{') && title.includes('}}')) title = title.replace(/({{[\s\S]+?}})/, (m, str) => str.replace(/{{([\s\S]*)}}/, (m, _) => this.$t(_.trim())))
-				else if (__titleIsFunction__) title = item.meta.title
-				else title = this.$t(item.name)
-			} else title = (item.meta && item.meta.title) || item.name
-			return title
-		},
-		// 配置继承方法
-		getExtendConfig(config = {}, name, module) {
-			let moduleConfig = config[module] || config.default || {}
-			let nameConfig = moduleConfig[name]
-			return this.$vUtils.clone(nameConfig, true)
-		}
-	}
-}
-
-export default mixin
+const msgDefault = {
+	title: '',
+	className: 'globalMessageBox',
+	draggable: false
+}
+
+const mixin = {
+	methods: {
+		// 全局msg提示方法
+		msg(options) {
+			return this.$vTable.modal.message(options)
+		},
+		msginfo(options) {
+			let opts = Object.assign({}, msgDefault, typeof options === 'string' ? { content: options, status: 'info' } : options)
+			return this.msg(opts)
+		},
+		msgsuccess(options) {
+			let opts = Object.assign({}, msgDefault, typeof options === 'string' ? { content: options, status: 'success' } : options)
+			return this.msg(opts)
+		},
+		msgwarning(options) {
+			let opts = Object.assign({}, msgDefault, typeof options === 'string' ? { content: options, status: 'warning' } : options)
+			return this.msg(opts)
+		},
+		msgerror(options) {
+			let opts = Object.assign({}, msgDefault, typeof options === 'string' ? { content: options, status: 'error' } : options)
+			return this.msg(opts)
+		},
+		msgconfirm(options) {
+			return new Promise(async resolve => {
+				let opts = Object.assign({}, typeof options === 'string' ? { content: options } : options)
+				let type = await this.$vTable.modal.confirm({
+					showHeader: Boolean(opts.title),
+					...opts
+				})
+				if (type === 'confirm') resolve(type)
+			})
+		},
+		// 全局路由跳
+		routerTo(route) {
+			let { name, params, query } = {}
+			if (typeof route === 'string') name = route
+			else {
+				name = route.name
+				params = route.params
+				query = route.query
+			}
+			if (name.indexOf('isTurnByHref_') > -1) {
+				window.open(name.split('_')[1])
+				return
+			}
+			try {
+				this.$router.push({ name, params, query })
+			} catch (e) {
+				this.$router.replace({ path: '/401' })
+			}
+		},
+		// 全局路由返回上一页
+		routerback() {
+			this.$router.back()
+		},
+		// 全局判断是否有子节点
+		hasChildren(item, name = 'children') {
+			return item && item[name] && Array.isArray(item[name]) && item[name].length > 0
+		},
+		// 全局格式化名称
+		formatTitle(item) {
+			let { title, __titleIsFunction__ } = item.meta || {}
+			if (!title) return false
+			if (this.$config.useI18n) {
+				if (title.includes('{{') && title.includes('}}')) title = title.replace(/({{[\s\S]+?}})/, (m, str) => str.replace(/{{([\s\S]*)}}/, (m, _) => this.$t(_.trim())))
+				else if (__titleIsFunction__) title = item.meta.title
+				else title = this.$t(item.name)
+			} else title = (item.meta && item.meta.title) || item.name
+			return title
+		},
+		// 配置继承方法
+		getExtendConfig(config = {}, name, module) {
+			let moduleConfig = config[module] || config.default || {}
+			let nameConfig = moduleConfig[name]
+			return this.$vUtils.clone(nameConfig, true)
+		}
+	}
+}
+
+export default mixin