sh-view 2.0.2 → 2.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sh-view",
-  "version": "2.0.2",
+  "version": "2.0.4",
   "description": "基于vxe-table二次封装",
   "main": "packages/index.js",
   "scripts": {
@@ -26,19 +26,18 @@
     "core-js": "^3.32.0",
     "countup.js": "^1.9.3",
     "cron-parser": "^4.8.1",
-    "element-resize-detector": "^1.2.0",
     "exceljs": "^4.3.0",
     "jspdf": "^2.5.1",
     "jszip": "^3.10.1",
     "popper.js": "^1.16.1",
-    "sh-tools": "^1.4.0",
+    "sh-tools": "^1.5.0",
     "tinymce": "^5.10.5",
     "vue": "^3.3.4",
     "vue-demi": "^0.13.11",
     "vue-masonry": "^0.16.0",
     "vue-router": "^4.2.2",
     "vuex": "^4.1.0",
-    "vxe-table": "^4.5.5",
+    "vxe-table": "^4.5.6",
     "vxe-table-plugin-export-pdf": "^3.0.4",
     "vxe-table-plugin-export-xlsx": "^3.0.5",
     "xe-clipboard": "^1.10.2",

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

@@ -103,12 +103,12 @@ export default {
 		}
 	}
 	.sh-card-body {
+		display: block;
 		border-top: 1px solid var(--vxe-table-border-color);
-		@include layoutFlex;
 	}
 	.sh-card-foot {
-		border-top: 1px solid var(--vxe-table-border-color);
 		@include layoutFlex;
+		border-top: 1px solid var(--vxe-table-border-color);
 	}
 	&.large {
 		.sh-card-head .sh-card-head-title {

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

@@ -1,83 +1,84 @@
-<template>
-	<div :class="classes" :style="styles">
-		<slot></slot>
-	</div>
-</template>
-
-<script>
-import './css/index.scss'
-const prefixCls = 'sh-col'
-function parseFlex(flex) {
-	if (typeof flex === 'number') {
-		return `${flex} ${flex} auto`
-	}
-	if (/^\d+(\.\d+)?(px|em|rem|%)$/.test(flex)) {
-		return `0 0 ${flex}`
-	}
-	return flex
-}
-export default {
-	name: 'ShCol',
-	inject: ['RowInstance'],
-	props: {
-		span: [Number, String],
-		order: [Number, String],
-		offset: [Number, String],
-		push: [Number, String],
-		pull: [Number, String],
-		xs: [Number, Object],
-		sm: [Number, Object],
-		md: [Number, Object],
-		lg: [Number, Object],
-		xl: [Number, Object],
-		xxl: [Number, Object],
-		flex: {
-			type: [Number, String],
-			default: ''
-		}
-	},
-	computed: {
-		gutter() {
-			return this.RowInstance?.gutter || 0
-		},
-		classes() {
-			let classList = [
-				`${prefixCls}`,
-				{
-					[`${prefixCls}-span-${this.span}`]: this.span,
-					[`${prefixCls}-order-${this.order}`]: this.order,
-					[`${prefixCls}-offset-${this.offset}`]: this.offset,
-					[`${prefixCls}-push-${this.push}`]: this.push,
-					[`${prefixCls}-pull-${this.pull}`]: this.pull
-				}
-			]
-			;['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].forEach(size => {
-				if (typeof this[size] === 'number') {
-					classList.push(`${prefixCls}-span-${size}-${this[size]}`)
-				} else if (typeof this[size] === 'object') {
-					let props = this[size]
-					Object.keys(props).forEach(prop => {
-						classList.push(prop !== 'span' ? `${prefixCls}-${size}-${prop}-${props[prop]}` : `${prefixCls}-span-${size}-${props[prop]}`)
-					})
-				}
-			})
-			return classList
-		},
-		styles() {
-			let style = {}
-			if (this.gutter !== 0) {
-				style = {
-					paddingLeft: this.gutter / 2 + 'px',
-					paddingRight: this.gutter / 2 + 'px'
-				}
-			}
-			if (this.flex) {
-				style.flex = parseFlex(this.flex)
-			}
-			return style
-		}
-	}
-}
-</script>
-
-<style scoped lang="scss"></style>
+<template>
+	<div :class="classes" :style="styles">
+		<slot></slot>
+	</div>
+</template>
+
+<script>
+import './css/index.scss'
+const prefixCls = 'sh-col'
+function parseFlex(flex) {
+	if (typeof flex === 'number') {
+		return `${flex} ${flex} auto`
+	}
+	if (/^\d+(\.\d+)?(px|em|rem|%)$/.test(flex)) {
+		return `0 0 ${flex}`
+	}
+	return flex
+}
+export default {
+	name: 'ShCol',
+	inject: ['RowInstance'],
+	props: {
+		span: [Number, String],
+		order: [Number, String],
+		offset: [Number, String],
+		push: [Number, String],
+		pull: [Number, String],
+		xs: [Number, Object],
+		sm: [Number, Object],
+		md: [Number, Object],
+		lg: [Number, Object],
+		xl: [Number, Object],
+		xxl: [Number, Object],
+		flex: {
+			type: [Number, String],
+			default: ''
+		}
+	},
+	computed: {
+		gutter() {
+			return this.RowInstance?.gutter || 0
+		},
+		classes() {
+			let classList = [
+				`${prefixCls}`,
+				{
+					[`${prefixCls}-span-${this.span}`]: this.span,
+					[`${prefixCls}-order-${this.order}`]: this.order,
+					[`${prefixCls}-offset-${this.offset}`]: this.offset,
+					[`${prefixCls}-push-${this.push}`]: this.push,
+					[`${prefixCls}-pull-${this.pull}`]: this.pull
+				}
+			]
+			let sizeList = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl']
+			sizeList.forEach(size => {
+				if (typeof this[size] === 'number') {
+					classList.push(`${prefixCls}-span-${size}-${this[size]}`)
+				} else if (typeof this[size] === 'object') {
+					let props = this[size]
+					Object.keys(props).forEach(prop => {
+						classList.push(`${prefixCls}-${size}-${prop}-${props[prop]}`)
+					})
+				}
+			})
+			return classList
+		},
+		styles() {
+			let style = {}
+			if (this.gutter !== 0) {
+				style = {
+					paddingLeft: this.gutter / 2 + 'px',
+					paddingRight: this.gutter / 2 + 'px'
+				}
+			}
+			if (this.flex) {
+				style.flex = parseFlex(this.flex)
+			}
+			return style
+		}
+	}
+}
+</script>
+
+<style scoped lang="scss"></style>

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

@@ -116,7 +116,9 @@ export default {
 		}
 	},
 	created() {},
-	mounted() {},
+	mounted() {
+		this.computeOffset()
+	},
 	beforeUnmount() {},
 	methods: {
 		px2percent(numerator, denominator) {

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

@@ -246,7 +246,7 @@ export default {
 			overflow: hidden;
 		}
 		&-inner {
-			display: block;
+			display: flex;
 			width: fit-content;
 			white-space: nowrap;
 			transition: transform 0.2s ease-in-out;
@@ -294,7 +294,7 @@ export default {
 			}
 			.sh-tab-item-active {
 				background-color: var(--vxe-primary-color);
-				border-color: var(--vxe-primary-darken-color);
+				border-color: var(--vxe-primary-color);
 				color: #fff !important;
 			}
 		}

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

@@ -1,8 +1,8 @@
 <template>
 	<div class="sh-tag" :class="classes" :style="[borderStyle, backgroundStyle]" @click.stop="check">
-		<span v-if="type === 'dot'" class="sh-tag-dot" :style="[backgroundStyle]"></span>
+		<span v-if="type === 'dot'" class="sh-tag-other"><span class="sh-tag-dot" :style="[backgroundStyle]"></span></span>
 		<span class="sh-tag-text" :class="textClasses" :style="[fontStyle]"><slot></slot></span>
-		<a v-if="closable" class="sh-tag-close" :style="[borderStyle]" @click="close">
+		<a v-if="closable" class="sh-tag-other sh-tag-close" :style="[borderStyle]" @click="close">
 			<slot name="close"><sh-icon type="ios-close"></sh-icon></slot>
 		</a>
 	</div>
@@ -118,7 +118,7 @@ export default {
 $default-color: #f7f7f7;
 .sh-tag {
 	display: inline-flex;
-	align-items: center;
+	align-items: stretch;
 	margin: 2px 4px 2px 0;
 	border: 1px solid var(--vxe-table-border-color);
 	border-radius: var(--vxe-border-radius);
@@ -141,13 +141,17 @@ $default-color: #f7f7f7;
 			border: none !important;
 		}
 	}
+	&-other {
+		display: inline-flex;
+		align-items: center;
+	}
 	&-dot {
 		display: inline-block;
 		width: 12px;
 		height: 12px;
 		border-radius: 50%;
 		background-color: #ccc;
-		margin: 0 5px 0 12px;
+		margin: 0 2px 0 8px;
 	}
 	&-text {
 		padding: 0 8px;

package/packages/components/index.js

@@ -6,7 +6,6 @@ import ShCodeEditor from './global-components/sh-code-editor/index.vue'
 import ShCol from './global-components/sh-col/index.vue'
 import ShCorner from './global-components/sh-corner/index.vue'
 import ShCountTo from './global-components/sh-count-to/index.vue'
-import ShDate from './global-components/sh-date/index.vue'
 import ShDrawer from './global-components/sh-drawer/index.vue'
 import ShEmpty from './global-components/sh-empty/index.vue'
 import ShForm from './global-components/sh-form/index.vue'
@@ -41,7 +40,6 @@ const components = {
 	ShCol,
 	ShCorner,
 	ShCountTo,
-	ShDate,
 	ShDrawer,
 	ShEmpty,
 	ShForm,

package/packages/components/other-components/sh-menu-card/index.vue

@@ -180,6 +180,7 @@ export default {
 	justify-content: space-between;
 	align-items: center;
 	flex-wrap: wrap;
+	width: 100%;
 	> div {
 		width: 47%;
 		display: inline-flex;

package/packages/directive/module/resize.js

@@ -1,19 +1,159 @@
-import elementResizeDetectorMaker from 'element-resize-detector'
+/**
+ * 是否是IE浏览器的判断
+ * @function
+ * @return {Boolean} 是否IE浏览器的判断结果
+ */
+function isIE() {
+	let _isIE = false
+	if (typeof navigator !== 'undefined') {
+		_isIE = navigator.userAgent.match(/Trident/) || navigator.userAgent.match(/Edge/)
+	}
+	return _isIE
+}
+
+var lastTime = 0
+var vendors = ['ms', 'moz', 'webkit', 'o']
+if (typeof window === 'undefined') {
+	global.window = {}
+}
+for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
+	window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame']
+	window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame']
+}
+
+if (!window.requestAnimationFrame) {
+	window.requestAnimationFrame = function (callback, element) {
+		var currTime = new Date().getTime()
+		var timeToCall = Math.max(0, 16 - (currTime - lastTime))
+		var id = window.setTimeout(function () {
+			callback(currTime + timeToCall)
+		}, timeToCall)
+		lastTime = currTime + timeToCall
+		return id
+	}
+}
+
+if (!window.cancelAnimationFrame) {
+	window.cancelAnimationFrame = function (id) {
+		clearTimeout(id)
+	}
+}
+
+/**
+ * requestAnimationFrame的兼容处理
+ */
+const $requestAnimationFrame = window.requestAnimationFrame
+
+/**
+ * cancelAnimationFrame的兼容处理
+ */
+const $cancelAnimationFrame = window.cancelAnimationFrame
+
+/**
+ * resize处理器，此处回调元素v-resize的方法
+ * @param event {Event} resizeTrigge的resize事件传递，来自{@link registereResizeHandler}方法中产生的事件源
+ * @function
+ */
+function resizeHandler(event) {
+	event.__currentTarget__ = this.__container__
+	this.__resize__handler__.call(
+		this,
+		{
+			width: this.offsetWidth,
+			height: this.offsetHeight
+		},
+		event
+	)
+}
+
+/**
+ * 优化resize监听
+ * @param event {Event} resizeTrigge的resize事件传递，来自{@link registereResizeHandler}方法中产生的事件源
+ * @function
+ */
+function resizeTriggerListener(event) {
+	const _resizeTrigger = event.currentTarget || event.srcElement
+	if (_resizeTrigger.__requestAnimationFrameID__) {
+		$cancelAnimationFrame(_resizeTrigger.__requestAnimationFrameID__)
+	}
+	_resizeTrigger.__requestAnimationFrameID__ = $requestAnimationFrame(resizeHandler.bind(this, event))
+}
+
+/**
+ * 注册resize处理方法
+ * @function
+ */
+function registereResizeHandler() {
+	if (document.attachEvent) {
+		this.__container__.attachEvent('onresize', resizeHandler.bind(this))
+	} else {
+		this.contentDocument.defaultView.addEventListener('resize', resizeTriggerListener.bind(this))
+	}
+}
+
+/**
+ * 创建resize真正的触发器
+ * @function
+ */
+function createResizeTrigger() {
+	const object = document.createElement('object')
+	object.setAttribute('aria-hidden', 'true')
+	object.setAttribute('tabindex', -1)
+	const objectStyle = `
+    display: block !important; 
+    position: absolute !important; 
+    top: 0 !important; 
+    left: 0 !important; 
+    width: 100% !important; 
+    height: 100% !important; 
+    overflow: hidden !important; 
+    pointer-events: none !important; 
+    z-index: -1 !important; 
+    opacity: 0 !important;
+  `
+	object.setAttribute('style', objectStyle)
+	object.type = 'text/html'
+	return object
+}
 
 export default {
-	// 使用 bind，会在初始化时调用两次handler
-	mounted(el, binding) {
-		function resizeHandler(e) {
-			binding.value(e)
+	beforeMount(el, binding, vnode, oldVnode) {
+		// 获得真正的触发器
+		el.__resizeTrigger__ = createResizeTrigger()
+		el.__resizeTrigger__.__container__ = el
+		el.__resizeTrigger__.__resize__handler__ = binding.value
+		el.__resizeTrigger__.onload = registereResizeHandler
+		// 将真正的触发器作为子元素添加到当前元素
+		const _isIE = isIE()
+		_isIE && el.appendChild(el.__resizeTrigger__)
+		el.__resizeTrigger__.data = 'about:blank'
+		!_isIE && el.appendChild(el.__resizeTrigger__)
+	},
+	mounted(el, binding, vnode, oldVnode) {
+		if (getComputedStyle(el).position === 'static') {
+			el.style.setProperty('position', 'relative', 'important')
 		}
-		el.__resizeHandler__ = resizeHandler
-		el.__observer__ = elementResizeDetectorMaker()
-		el.__observer__.listenTo(el, resizeHandler)
 	},
-	updated() {},
-	unmounted(el, binding) {
-		el.__observer__.removeListener(el, el.__resizeHandler__)
-		delete el.__resizeHandler__
-		delete el.__observer__
+	updated(el, binding, vnode, oldVnode) {
+		var inserted = false
+		for (var i = 0, length = el.children.length; i < length; i++) {
+			if (el.children[i] === el.__resizeTrigger__) {
+				inserted = true
+			}
+		}
+		if (!inserted) {
+			var _isIE = isIE()
+			_isIE && el.appendChild(el.__resizeTrigger__)
+			el.__resizeTrigger__.data = 'about:blank'
+			!_isIE && el.appendChild(el.__resizeTrigger__)
+		}
+	},
+	unmounted(el, binding, vnode, oldVnode) {
+		if (document.attachEvent) {
+			el.detachEvent('onresize', resizeHandler)
+		} else if (el.__resizeTrigger__ && el.__resizeTrigger__.contentDocument) {
+			el.__resizeTrigger__.contentDocument.defaultView.removeEventListener('resize', resizeTriggerListener)
+			el.__resizeTrigger__ = !el.removeChild(el.__resizeTrigger__)
+		}
 	}
 }

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

@@ -1,40 +0,0 @@
-<template>
-	<div class="sh-date">
-		<div class="sh-date-input" @click="inputClick">{{ dataValue }}</div>
-		<div class="sh-date-drop">
-			<vxe-input ref="inputA" v-model="value1" type="date"></vxe-input>
-			<vxe-input ref="inputB" v-model="value2" type="date"></vxe-input>
-		</div>
-	</div>
-</template>
-
-<script>
-export default {
-	name: 'ShDate',
-	emits: ['update:modelValue'],
-	data() {
-		return {
-			dataValue: '',
-			value1: '',
-			value2: ''
-		}
-	},
-	computed: {},
-	methods: {
-		inputClick() {
-			this.$refs.inputA.focus()
-			this.$refs.inputB.focus()
-		}
-	}
-}
-</script>
-
-<style scoped lang="scss">
-.sh-date {
-	&-input {
-		width: 300px;
-		height: 50px;
-		border: 1px solid #ccc;
-	}
-}
-</style>