sh-view 1.7.5 → 2.0.0

package/packages/directive/module/ripple.js

@@ -0,0 +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 = {}
+	}
+}

package/packages/index.js

@@ -1,40 +1,39 @@
-import packageConfig from '../package.json'
-import { utils } from 'sh-tools'
-import { VueMasonryPlugin } from 'vue-masonry'
-import directive from './directive/index'
-import iview from './iview/index'
-import vxeTable from './vxeTable/index'
-import globalComponents 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.mixin(mixin)
-	root.use(VueMasonryPlugin, option)
-	root.use(directive)
-	root.use(iview, option)
-	root.use(vxeTable, option)
-	root.use(globalComponents, 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 globalComponents 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(globalComponents, 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/utils/transfer-queue.js

@@ -0,0 +1,12 @@
+let transferIndex = 0
+let lastVisibleIndex = 0
+
+function transferIncrease() {
+	transferIndex++
+}
+
+function lastVisibleIncrease() {
+	lastVisibleIndex++
+}
+
+export { transferIndex, transferIncrease, lastVisibleIndex, lastVisibleIncrease }

package/packages/vxeTable/css/index.scss

@@ -1,6 +1,6 @@
 /* 自定义主题覆盖部分开始 */
-$theme-color: var(--theme-color);
-$theme-weak-color: var(--theme-weak-color);
+$theme-color: var(--vxe-primary-color);
+$theme-weak-color: var(--vxe-primary-lighten-color);
 
 @import "variable.scss";
 @import 'vxe-table/styles/all.scss';
@@ -26,68 +26,8 @@ input:focus, textarea:focus,
     background-color: #a50aa5;
     border-color: #a50aa5;
 }
-// 主题色按钮
-.vxe-button.type--button.theme--theme,
-.vxe-button.type--button.theme--theme:hover {
-    color: #fff;
-}
-.vxe-button.type--button.theme--theme {
-    background-color: $theme-color;
-    border-color: $theme-color;
-}
-.vxe-button.type--button.theme--theme:active {
-    background-color: $theme-color;
-    border-color: $theme-color;
-    opacity: 0.8;
-}
-.vxe-button.type--button.theme--theme.is--disabled, .vxe-button.type--button.theme--purple.is--disabled{
-    opacity: 0.8;
-    color: #eee;
-}
-
-.vxe-pager.is--background .vxe-pager--jump-next:not(.is--disabled).is--active, .vxe-pager.is--background .vxe-pager--jump-prev:not(.is--disabled).is--active, .vxe-pager.is--background .vxe-pager--num-btn:not(.is--disabled).is--active, .vxe-pager.is--perfect .vxe-pager--jump-next:not(.is--disabled).is--active, .vxe-pager.is--perfect .vxe-pager--jump-prev:not(.is--disabled).is--active, .vxe-pager.is--perfect .vxe-pager--num-btn:not(.is--disabled).is--active{
-    background-color: $theme-color;
-}
-.vxe-pager.is--background .vxe-pager--jump-next:not(.is--disabled).is--active:focus, .vxe-pager.is--background .vxe-pager--jump-prev:not(.is--disabled).is--active:focus, .vxe-pager.is--background .vxe-pager--num-btn:not(.is--disabled).is--active:focus, .vxe-pager.is--perfect .vxe-pager--jump-next:not(.is--disabled).is--active:focus, .vxe-pager.is--perfect .vxe-pager--jump-prev:not(.is--disabled).is--active:focus, .vxe-pager.is--perfect .vxe-pager--num-btn:not(.is--disabled).is--active:focus{
-    border-color: $theme-color;
-    box-shadow: none;
-}
-.vxe-pager.is--background .vxe-pager--jump-next:not(.is--disabled).is--active:hover, .vxe-pager.is--background .vxe-pager--jump-prev:not(.is--disabled).is--active:hover, .vxe-pager.is--background .vxe-pager--num-btn:not(.is--disabled).is--active:hover, .vxe-pager.is--perfect .vxe-pager--jump-next:not(.is--disabled).is--active:hover, .vxe-pager.is--perfect .vxe-pager--jump-prev:not(.is--disabled).is--active:hover, .vxe-pager.is--perfect .vxe-pager--num-btn:not(.is--disabled).is--active:hover{
-    background-color: $theme-color;
-}
-.vxe-pager.is--border .vxe-pager--num-btn.is--active{
-    border-color: $theme-color;
-}
-.vxe-table--render-default.border--default .vxe-table--header-wrapper, .vxe-table--render-default.border--full .vxe-table--header-wrapper, .vxe-table--render-default.border--outer .vxe-table--header-wrapper{
-    background-color: var(--header-color);
-}
-.vxe-modal--wrapper .vxe-modal--header{
-    background-color: $theme-weak-color;
-}
-.is--checked.vxe-table--filter-option .vxe-checkbox--icon, .is--checked.vxe-export--panel-column-option .vxe-checkbox--icon, .vxe-table--render-default .is--checked.vxe-cell--checkbox .vxe-checkbox--icon, .is--checked.vxe-custom--option .vxe-checkbox--icon, .is--checked.vxe-checkbox .vxe-checkbox--icon, .is--indeterminate.vxe-table--filter-option .vxe-checkbox--icon, .is--indeterminate.vxe-export--panel-column-option .vxe-checkbox--icon, .vxe-table--render-default .is--indeterminate.vxe-cell--checkbox .vxe-checkbox--icon, .is--indeterminate.vxe-custom--option .vxe-checkbox--icon, .is--indeterminate.vxe-checkbox .vxe-checkbox--icon{
-    color: $theme-color !important;
-    &:hover{
-        color: $theme-color;
-    }
-}
-.is--checked.vxe-radio .vxe-radio--icon, .vxe-table--render-default .is--checked.vxe-cell--radio .vxe-radio--icon{
-    color: $theme-color !important;
-    &:hover{
-        color: $theme-color;
-    }
-}
-.vxe-checkbox:not(.is--disabled) > input:focus + .vxe-checkbox--icon{
-    color: $theme-color;
-    box-shadow: none;
-}
-.vxe-table--render-default .is--checked.vxe-cell--radio .vxe-radio--checked-icon:before{
-    background-color: $theme-color;
-    border-color: $theme-color;
-}
 /* 自定义主题覆盖部分结束 */
 
-
-
 // 按钮
 button:focus, .vxe-button.type--button:not(.is--disabled):focus{
     box-shadow: none;
@@ -102,7 +42,7 @@ button:focus, .vxe-button.type--button:not(.is--disabled):focus{
         float: none;
         &.is--error{
             .sh-code-editor{
-                border-color: var(--error-color) !important;
+                border-color: var(--vxe-danger-color) !important;
             }
         }
         .vxe-form--item-inner{
@@ -144,9 +84,6 @@ button:focus, .vxe-button.type--button:not(.is--disabled):focus{
 
 // 下拉容器
 .vxe-pulldown--panel{
-    &.animat--leave {
-        transform-style: unset;
-    }
     .vxe-pulldown--wrapper{
         box-shadow: 0 0 6px 2px rgba(0,0,0,0.1);
         padding: 0;
@@ -159,6 +96,9 @@ button:focus, .vxe-button.type--button:not(.is--disabled):focus{
 .vxe-modal--wrapper{
     width: calc(100%);
     height: calc(100%);
+    .vxe-modal--header{
+        background-color: var(--primary-weak-color);
+    }
     &.vxe-modal--preview{
         .vxe-modal--box{
             .vxe-modal--content{
@@ -168,7 +108,7 @@ button:focus, .vxe-button.type--button:not(.is--disabled):focus{
     }
     &.type--modal {
         .vxe-modal--footer{
-            border-top: 1px solid var(--border-color);
+            border-top: 1px solid var(--vxe-table-border-color);
             padding-top: 0.5rem;
             padding-bottom: 0.5em;
         }
@@ -197,13 +137,6 @@ button:focus, .vxe-button.type--button:not(.is--disabled):focus{
     &.vxe-table--render-default{
         font-family: inherit;
         color: inherit;
-        &.vxe-editable{
-            .vxe-body--column{
-                &.col--actived{
-                    background: var(--theme-weak-color);
-                }
-            }
-        }
         .vxe-table--render-wrapper{
             .vxe-cell{
                 padding-left: 2px;
@@ -256,25 +189,6 @@ button:focus, .vxe-button.type--button:not(.is--disabled):focus{
             }
         }
     }
-    .vxe-grid--form-wrapper{
-        .vxe-form{
-            &.vxe-form-collapsed{
-                &.vxe-form-collapsed-open{
-                    .vxe-form--wrapper{
-                        max-height: 200px;
-                        overflow: auto;
-                    }
-                }
-                &.vxe-form-collapsed-close{
-                    .vxe-form--wrapper{
-                    }
-                }
-            }
-            .vxe-form-slots{
-                display: block;
-            }
-        }
-    }
 }
 
 // 渲染器
@@ -369,13 +283,13 @@ button:focus, .vxe-button.type--button:not(.is--disabled):focus{
             right: 0;
             bottom: 0;
             width: 1px;
-            background-color: var(--border-color);
+            background-color: var(--vxe-table-border-color);
         }
         &.basic:after{
-            background-color: var(--danger-color);
+            background-color: var(--vxe-danger-color);
         }
         &.commafy:after{
-            background-color: var(--success-color);
+            background-color: var(--vxe-success-color);
         }
     }
 }
@@ -395,12 +309,12 @@ button:focus, .vxe-button.type--button:not(.is--disabled):focus{
                 top: 100%;
                 right: -2px;
                 height: 100%;
-                border-top: 1px solid var(--border-color);
+                border-top: 1px solid var(--vxe-table-border-color);
             }
         }
     }
     .header-money-unit-text{
-        color: var(--theme-color);
+        color: var(--vxe-primary-color);
         font-size: .9em;
     }
 }