sh-view 2.1.0 → 2.2.0

package/packages/directive/module/resize.js

@@ -1,159 +1,16 @@
-/**
- * 是否是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
-}
+import ResizeObserver from 'resize-observer-polyfill'
+import { utils } from 'sh-tools'
+const throttleTime = 200
 
 export default {
-	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')
-		}
-	},
-	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__)
-		}
+	beforeMount(el, binding) {
+		const _callback = utils.throttle(binding.value, throttleTime)
+		el.__observer__ = new ResizeObserver(_callback)
+		el.__observer__.observe(el)
 	},
-	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__)
-		}
+	unmounted(el, binding) {
+		if (!el.__observer__) return
+		el.__observer__.unobserve(el)
+		delete el.__observer__
 	}
 }

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 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
+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/mixin/index.js

@@ -1,87 +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)
-		}
-	},
-	watch: {}
-}
-
-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

package/packages/vxeTable/render/cell/vxe-render-checkbox.vue

@@ -2,7 +2,6 @@
 	<span class="vxe-render--inner" :class="{ 'vxe-render--inner--readonly': !redit, 'form-render': rform, 'td-render': !rform }">
 		<template v-if="redit || isEditAll">
 			<vxe-checkbox v-model="renderValue" v-bind="rprops" :size="rsize" @change="vxeCheckCallBack" />
-			<span style="display: none" v-html="renderText"></span>
 		</template>
 		<template v-else>
 			<vxe-checkbox :model-value="renderText" :disabled="true" :size="rsize" v-bind="rprops" />
@@ -11,9 +10,19 @@
 </template>
 
 <script>
-import mixin from '../mixin/cell-mixin'
-export default {
+import { defineComponent, getCurrentInstance } from 'vue'
+import cellProps from '../mixin/cell-props'
+import cellHooks from '../mixin/cell-hooks'
+export default defineComponent({
 	name: 'VxeRenderCheckbox',
-	mixins: [mixin]
-}
+	props: cellProps,
+	setup(props, context) {
+		const { proxy } = getCurrentInstance()
+		const useCell = cellHooks(props, context, proxy)
+
+		return {
+			...useCell
+		}
+	}
+})
 </script>

package/packages/vxeTable/render/cell/vxe-render-checkgroup.vue

@@ -1,36 +1,43 @@
-<template>
-	<span class="vxe-render--inner" :class="{ 'form-render': rform, 'td-render': !rform }">
-		<template v-if="redit || isEditAll">
-			<vxe-checkbox-group v-model="renderValue" v-bind="rprops" :size="rsize" @change="vxeCheckCallBack">
-				<vxe-checkbox v-for="checkitem in rprops.options" :key="checkitem.value" :label="checkitem.value" :content="checkitem.label" />
-			</vxe-checkbox-group>
-			<span style="display: none" v-html="renderText"></span>
-		</template>
-		<template v-else-if="!redit && showType">
-			<div v-for="roption in rprops.options" :key="roption">
-				<sh-tag v-if="roptionShow(roption)" :color="roption.tagColor || rprops.tagColor" :type="roption.tagType || rprops.tagType">{{ roption.label }}</sh-tag>
-			</div>
-		</template>
-		<template v-else>
-			<span v-html="renderText"></span>
-		</template>
-	</span>
-</template>
-
-<script>
-import mixin from '../mixin/cell-mixin'
-export default {
-	name: 'VxeRenderCheckgroup',
-	mixins: [mixin],
-	computed: {
-		showType() {
-			return this.rprops.showType === 'tag'
-		}
-	},
-	methods: {
-		roptionShow(roption) {
-			return this.renderText.split(this.rprops.split).includes(roption.label)
-		}
-	}
-}
-</script>
+<template>
+	<span class="vxe-render--inner" :class="{ 'form-render': rform, 'td-render': !rform }">
+		<template v-if="redit || isEditAll">
+			<vxe-checkbox-group v-model="renderValue" v-bind="rprops" :size="rsize" @change="vxeCheckCallBack">
+				<vxe-checkbox v-for="checkitem in rprops.options" :key="checkitem.value" :label="checkitem.value" :content="checkitem.label" />
+			</vxe-checkbox-group>
+		</template>
+		<template v-else-if="!redit && showType">
+			<div v-for="roption in rprops.options" :key="roption">
+				<sh-tag v-if="roptionShow(roption)" :color="roption.tagColor || rprops.tagColor" :type="roption.tagType || rprops.tagType">{{ roption.label }}</sh-tag>
+			</div>
+		</template>
+		<template v-else>
+			<span v-html="renderText"></span>
+		</template>
+	</span>
+</template>
+
+<script>
+import { computed, defineComponent, getCurrentInstance } from 'vue'
+import cellProps from '../mixin/cell-props'
+import cellHooks from '../mixin/cell-hooks'
+export default defineComponent({
+	name: 'VxeRenderCheckgroup',
+	props: cellProps,
+	setup(props, context) {
+		const { proxy } = getCurrentInstance()
+		const useCell = cellHooks(props, context, proxy)
+
+		const showType = computed(() => props.rprops.showType === 'tag')
+
+		const roptionShow = roption => {
+			return useCell.renderText.value.split(props.rprops.split).includes(roption.label)
+		}
+
+		return {
+			...useCell,
+			showType,
+			roptionShow
+		}
+	}
+})
+</script>

package/packages/vxeTable/render/cell/vxe-render-code.vue

@@ -2,7 +2,6 @@
 	<span class="vxe-render--inner" :class="{ 'form-render': rform, 'td-render': !rform }">
 		<template v-if="redit || isEditAll">
 			<sh-code-editor v-model="renderValue" v-bind="rprops" @change="vxeInputChange" @blur="vxeBlurCallback"></sh-code-editor>
-			<span style="display: none" v-html="renderText"></span>
 		</template>
 		<template v-else>
 			<span>{{ renderText }}</span>
@@ -11,9 +10,19 @@
 </template>
 
 <script>
-import mixin from '../mixin/cell-mixin'
-export default {
+import { defineComponent, getCurrentInstance } from 'vue'
+import cellProps from '../mixin/cell-props'
+import cellHooks from '../mixin/cell-hooks'
+export default defineComponent({
 	name: 'VxeRenderCode',
-	mixins: [mixin]
-}
+	props: cellProps,
+	setup(props, context) {
+		const { proxy } = getCurrentInstance()
+		const useCell = cellHooks(props, context, proxy)
+
+		return {
+			...useCell
+		}
+	}
+})
 </script>

package/packages/vxeTable/render/cell/vxe-render-goption.vue

@@ -16,17 +16,20 @@
 </template>
 
 <script>
-import mixin from '../mixin/cell-mixin'
-export default {
+import { computed, defineComponent, getCurrentInstance } from 'vue'
+import cellProps from '../mixin/cell-props'
+import cellHooks from '../mixin/cell-hooks'
+export default defineComponent({
 	name: 'VxeRenderGoption',
-	mixins: [mixin],
-	data() {
-		return {}
-	},
-	computed: {
-		renderBtns() {
+	props: cellProps,
+	setup(props, context) {
+		const { proxy } = getCurrentInstance()
+		const { $vUtils } = proxy
+		const useCell = cellHooks(props, context, proxy)
+
+		const renderBtns = computed(() => {
 			let renderBtns = []
-			let { btnContain, btnsConfig } = this.rprops
+			let { btnContain, btnsConfig } = props.rprops
 			if (btnsConfig && Array.isArray(btnsConfig)) {
 				renderBtns = btnsConfig
 			}
@@ -38,19 +41,18 @@ export default {
 				})
 			}
 			return renderBtns
-		}
-	},
-	methods: {
+		})
+
 		// 按钮是否显示条件
-		isBtnRender(renderBtn) {
-			if (this.$vUtils.has(renderBtn, 'condition')) {
-				let condition = this.$vUtils.get(renderBtn, 'condition')
-				return this.$vUtils.calculate(condition, this.rdata)
+		const isBtnRender = renderBtn => {
+			if ($vUtils.has(renderBtn, 'condition')) {
+				let condition = $vUtils.get(renderBtn, 'condition')
+				return $vUtils.calculate(condition, props.rdata)
 			}
 			return true
-		},
+		}
 		// 规定按钮文字
-		getBtnContent(renderBtn) {
+		const getBtnContent = renderBtn => {
 			let renderContent = ''
 			let renderStatus = ''
 			let renderIcon = ''
@@ -81,14 +83,22 @@ export default {
 					break
 			}
 			return { content: renderContent, status: renderStatus, icon: renderIcon }
-		},
+		}
 		// 按钮点击回调
-		vxeBtnCallback({ $event }, renderBtn) {
+		const vxeBtnCallback = ({ $event }, renderBtn) => {
 			$event.stopPropagation()
-			let { $table } = this.rparams
-			let renderBtnObj = Object.assign({}, this.getBtnContent(renderBtn), renderBtn)
-			$table.xegrid.context.emit('option-click', renderBtnObj, this.rparams)
+			let tableComponent = props.rparams.$table.xegrid || props.rparams.$table
+			let renderBtnObj = Object.assign({}, getBtnContent(renderBtn), renderBtn)
+			tableComponent.context.emit('option-click', renderBtnObj, props.rparams)
+		}
+
+		return {
+			...useCell,
+			renderBtns,
+			isBtnRender,
+			getBtnContent,
+			vxeBtnCallback
 		}
 	}
-}
+})
 </script>