sh-view 1.7.6 → 2.0.0

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

@@ -0,0 +1,518 @@
+<template>
+	<teleport to="body" :disabled="!transfer">
+		<div class="sh-drawer-box">
+			<transition name="fade">
+				<div v-show="visible" v-if="mask" class="sh-drawer-mask" :class="maskClasses" :style="maskStyle" @click="handleMask"></div>
+			</transition>
+			<div class="sh-drawer-wrap" :class="wrapClasses" @click="handleWrapClick">
+				<transition :name="transitionName">
+					<div v-show="visible" ref="drawer" class="sh-drawer" :class="classes" :style="mainStyles">
+						<div ref="content" class="sh-drawer-content" :class="contentClasses">
+							<a v-if="closable" class="sh-drawer-close" @click="close">
+								<slot name="close">
+									<sh-icon type="ios-close"></sh-icon>
+								</slot>
+							</a>
+							<div v-if="showHead" class="sh-drawer-header">
+								<slot name="header">
+									<div class="sh-drawer-header-inner">{{ title }}</div>
+								</slot>
+							</div>
+							<div class="sh-drawer-body" :style="styles"><slot></slot></div>
+						</div>
+						<div v-if="draggable && (placement === 'left' || placement === 'right')" class="sh-drawer-drag" :class="'sh-drawer-drag-' + placement" @mousedown="handleTriggerMousedown">
+							<slot name="trigger">
+								<div class="sh-drawer-drag-move-trigger">
+									<div class="sh-drawer-drag-move-trigger-point"><i></i><i></i><i></i><i></i><i></i></div>
+								</div>
+							</slot>
+						</div>
+					</div>
+				</transition>
+			</div>
+		</div>
+	</teleport>
+</template>
+
+<script>
+import ScrollbarMixins from './scrollbar'
+export default {
+	name: 'ShDrawer',
+	mixins: [ScrollbarMixins],
+	props: {
+		modelValue: {
+			type: Boolean,
+			default: false
+		},
+		title: {
+			type: String
+		},
+		width: {
+			type: [Number, String],
+			default: 256
+		},
+		height: {
+			type: [Number, String],
+			default: 256
+		},
+		closable: {
+			type: Boolean,
+			default: true
+		},
+		maskClosable: {
+			type: Boolean,
+			default: true
+		},
+		mask: {
+			type: Boolean,
+			default: true
+		},
+		maskStyle: {
+			type: Object
+		},
+		styles: {
+			type: Object
+		},
+		scrollable: {
+			type: Boolean,
+			default: false
+		},
+		placement: {
+			type: String,
+			default: 'right' // 'left', 'right', 'top', 'bottom'
+		},
+		zIndex: {
+			type: Number,
+			default: 1000
+		},
+		transfer: {
+			type: Boolean
+		},
+		className: {
+			type: String
+		},
+		inner: {
+			type: Boolean,
+			default: false
+		},
+		draggable: {
+			type: Boolean,
+			default: false
+		},
+		beforeClose: Function
+	},
+	emits: ['update:modelValue', 'close', 'resize-width', 'visible-change', 'drag'],
+	data() {
+		return {
+			visible: this.modelValue,
+			wrapShow: false,
+			showHead: true,
+			canMove: false,
+			dragWidth: this.width,
+			dragHeight: this.height,
+			wrapperWidth: this.width,
+			wrapperHeight: this.height,
+			wrapperLeft: 0,
+			minWidth: 256,
+			minHeight: 256,
+			id: this.$vUtils.randomStr(6),
+			tableList: [],
+			sliderList: []
+		}
+	},
+	computed: {
+		wrapClasses() {
+			return {
+				'sh-drawer-hidden': !this.wrapShow,
+				'sh-drawer-no-mask': !this.mask,
+				'sh-drawer-wrap-inner': this.inner,
+				'sh-drawer-wrap-dragging': this.canMove,
+				[`${this.className}`]: !!this.className
+			}
+		},
+		mainStyles() {
+			let style = {}
+			if (this.placement === 'left' || this.placement === 'right') {
+				const width = parseInt(this.dragWidth)
+				const styleWidth = {
+					width: width <= 100 ? `${width}%` : `${width}px`
+				}
+				Object.assign(style, styleWidth)
+			} else {
+				const height = parseInt(this.dragHeight)
+				const styleHeight = {
+					height: height <= 100 ? `${height}%` : `${height}px`
+				}
+				Object.assign(style, styleHeight)
+			}
+			return style
+		},
+		contentClasses() {
+			return {
+				'sh-drawer-content-no-mask': !this.mask
+			}
+		},
+		classes() {
+			return {
+				[`sh-drawer-${this.placement}`]: true,
+				'sh-drawer-no-header': !this.showHead,
+				'sh-drawer-inner': this.inner
+			}
+		},
+		maskClasses() {
+			return {
+				'sh-drawer-mask-inner': this.inner
+			}
+		},
+		transitionName() {
+			if (this.placement === 'left' || this.placement === 'right') return `move-${this.placement}`
+			else if (this.placement === 'top') return 'move-up'
+			else return 'move-down'
+		}
+	},
+	watch: {
+		modelValue(val) {
+			this.visible = val
+		},
+		visible(val) {
+			if (val === false) {
+				this.timer = setTimeout(() => {
+					this.wrapShow = false
+					const drawers = this.$root.drawerList.map(item => item.drawer)
+					const otherDrawers = drawers.filter(item => item.id !== this.id)
+					const isScrollDrawer = otherDrawers.some(item => item.visible && !item.scrollable)
+					if (!isScrollDrawer) {
+						this.removeScrollEffect()
+					}
+				}, 300)
+			} else {
+				if (this.timer) clearTimeout(this.timer)
+				this.wrapShow = true
+				if (!this.scrollable) {
+					this.addScrollEffect()
+				}
+			}
+			this.tableList.forEach(item => {
+				item.table.handleOnVisibleChange(val)
+			})
+			this.sliderList.forEach(item => {
+				item.slider.handleOnVisibleChange(val)
+			})
+			this.$emit('visible-change', val)
+		},
+		scrollable(val) {
+			if (!val) {
+				this.addScrollEffect()
+			} else {
+				this.removeScrollEffect()
+			}
+		},
+		title(val) {
+			if (this.$slots.header === undefined) {
+				this.showHead = !!val
+			}
+		},
+		width(val) {
+			this.dragWidth = val
+		},
+		height(val) {
+			this.dragHeight = val
+		}
+	},
+	mounted() {
+		if (this.visible) {
+			this.wrapShow = true
+		}
+		let showHead = true
+		if (this.$slots.header === undefined && !this.title) {
+			showHead = false
+		}
+		this.showHead = showHead
+		this.addDrawer()
+		this.$vUtils.onListener(document, 'mousemove', this.handleMousemove)
+		this.$vUtils.onListener(document, 'mouseup', this.handleMouseup)
+		this.handleSetWrapperWidth()
+	},
+	beforeUnmount() {
+		this.removeDrawer()
+		this.$vUtils.offListener(document, 'mousemove', this.handleMousemove)
+		this.$vUtils.offListener(document, 'mouseup', this.handleMouseup)
+		this.removeScrollEffect()
+	},
+	methods: {
+		close() {
+			if (!this.beforeClose) {
+				return this.handleClose()
+			}
+			const before = this.beforeClose()
+			if (before && before.then) {
+				before.then(() => {
+					this.handleClose()
+				})
+			} else {
+				this.handleClose()
+			}
+		},
+		handleClose() {
+			this.visible = false
+			this.$emit('update:modelValue', false)
+			this.$emit('close')
+		},
+		handleMask() {
+			if (this.canMove) return
+			if (this.maskClosable && this.mask) {
+				this.close()
+			}
+		},
+		handleWrapClick(event) {
+			const className = event.target.getAttribute('class')
+			if (className && className.indexOf('sh-drawer-wrap') > -1) this.handleMask()
+		},
+		handleMousemove(event) {
+			if (!this.canMove || !this.draggable || !this.visible) return
+			// 更新容器宽度和距离左侧页面距离，如果是window则距左侧距离为0
+			this.handleSetWrapperWidth()
+			const left = event.pageX - this.wrapperLeft
+			// 如果抽屉方向为右边，宽度计算需用容器宽度减去left
+			let width = this.placement === 'right' ? this.wrapperWidth - left : left
+			// 限定最小宽度
+			width = Math.max(width, parseFloat(this.minWidth))
+			event.atMin = width === parseFloat(this.minWidth)
+			// 如果当前width不大于100，视为百分比
+			if (width <= 100) width = (width / this.wrapperWidth) * 100
+			if (width >= window.innerWidth) width = window.innerWidth
+			this.dragWidth = width
+			this.$emit('resize-width', parseInt(this.dragWidth))
+			this.$emit('drag', 'dragging', parseInt(this.dragWidth))
+		},
+		handleSetWrapperWidth() {
+			const { width, left } = this.$refs.drawer.getBoundingClientRect()
+			this.wrapperWidth = width
+			this.wrapperLeft = left
+		},
+		handleMouseup() {
+			if (!this.draggable || !this.visible) return
+			setTimeout(() => {
+				this.canMove = false
+			})
+			this.$emit('drag', 'end')
+		},
+		handleTriggerMousedown() {
+			this.canMove = true
+			// 防止鼠标选中抽屉中文字，造成拖动trigger触发浏览器原生拖动行为
+			window.getSelection().removeAllRanges()
+			this.$emit('drag', 'start')
+		},
+		addDrawer() {
+			const root = this.$root
+			if (!root.drawerList) root.drawerList = []
+			root.drawerList.push({
+				id: this.id,
+				drawer: this
+			})
+		},
+		removeDrawer() {
+			const root = this.$root
+			if (!root.drawerList) return
+			const index = root.drawerList.findIndex(item => item.id === this.id)
+			root.drawerList.splice(index, 1)
+		}
+	}
+}
+</script>
+
+<style scoped lang="scss">
+.sh-drawer {
+	width: auto;
+	height: 100%;
+	position: fixed;
+	top: 0;
+	&-inner {
+		position: absolute;
+	}
+	&-left {
+		left: 0;
+	}
+	&-right {
+		right: 0;
+	}
+	&-top,
+	&-bottom {
+		width: 100%;
+		height: auto;
+		top: auto;
+	}
+	&-bottom {
+		bottom: 0;
+	}
+	&-hidden {
+		display: none !important;
+	}
+	&-wrap {
+		position: fixed;
+		overflow: auto;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		z-index: 1000;
+		-webkit-overflow-scrolling: touch;
+		outline: 0;
+		&-inner {
+			position: absolute;
+			overflow: hidden;
+		}
+		&-dragging {
+			user-select: none;
+		}
+	}
+	&-wrap * {
+		box-sizing: border-box;
+		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+	}
+	&-mask {
+		position: fixed;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		background-color: rgba(55, 55, 55, 0.6);
+		height: 100%;
+		z-index: 1000;
+		&-hidden {
+			display: none;
+		}
+		&-inner {
+			position: absolute;
+		}
+	}
+	&-content {
+		width: 100%;
+		height: 100%;
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		background-color: #fff;
+		border: 0;
+		background-clip: padding-box;
+		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+		&-no-mask {
+			pointer-events: auto;
+		}
+	}
+	&-header {
+		border-bottom: 1px solid var(--vxe-table-border-color);
+		padding: 14px 16px;
+		line-height: 1;
+		&-inner {
+			display: inline-block;
+			width: 100%;
+			height: 20px;
+			line-height: 20px;
+			font-size: var(--vxe-font-size-medium);
+			font-weight: 500;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
+	}
+	&-close {
+		z-index: 1;
+		position: absolute;
+		right: 8px;
+		top: 10px;
+		overflow: hidden;
+		cursor: pointer;
+		font-size: 26px;
+		display: inline-block;
+		vertical-align: top;
+		line-height: 1;
+	}
+	&-body {
+		width: 100%;
+		height: calc(100% - 51px);
+		padding: 16px;
+		font-size: var(--vxe-font-size);
+		line-height: 1.5;
+		word-wrap: break-word;
+		position: absolute;
+		overflow: auto;
+	}
+	&-no-header &-body {
+		height: 100%;
+	}
+	&-no-mask {
+		pointer-events: none;
+		.sh-drawer-drag {
+			pointer-events: auto;
+		}
+	}
+	&-drag {
+		top: 0;
+		height: 100%;
+		width: 0;
+		position: absolute;
+		&-left {
+			right: 0;
+		}
+		&-top,
+		&-bottom {
+			top: auto;
+			width: 100%;
+			height: 0;
+		}
+		&-top {
+			bottom: 0;
+		}
+		&-bottom {
+			top: 0;
+		}
+		&-move-trigger {
+			width: 8px;
+			height: 100px;
+			line-height: 100px;
+			position: absolute;
+			top: 50%;
+			background: rgb(243, 243, 243);
+			transform: translate(-50%, -50%);
+			border-radius: 4px;
+			box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2);
+			cursor: col-resize;
+			&-point {
+				display: inline-block;
+				width: 50%;
+				transform: translateX(50%);
+				i {
+					display: block;
+					border-bottom: 1px solid rgb(192, 192, 192);
+					padding-bottom: 2px;
+				}
+			}
+		}
+		&-top &-move-trigger,
+		&-bottom &-move-trigger {
+			width: 100px;
+			height: 8px;
+			line-height: 8px;
+			top: auto;
+			left: 50%;
+			cursor: row-resize;
+			&-point {
+				width: 100%;
+				height: 50%;
+				transform: translateY(-75%);
+				text-align: center;
+				i {
+					display: inline-block;
+					border-bottom: inherit;
+					width: 1px;
+					height: 100%;
+					border-left: 1px solid rgb(192, 192, 192);
+					padding-bottom: inherit;
+					margin-left: 2px;
+				}
+			}
+		}
+	}
+}
+</style>

package/packages/components/global-components/sh-drawer/scrollbar.js

@@ -0,0 +1,76 @@
+let cached
+export function getScrollBarSize(fresh) {
+	if (fresh || cached === undefined) {
+		const inner = document.createElement('div')
+		inner.style.width = '100%'
+		inner.style.height = '200px'
+		const outer = document.createElement('div')
+		const outerStyle = outer.style
+		outerStyle.position = 'absolute'
+		outerStyle.top = 0
+		outerStyle.left = 0
+		outerStyle.pointerEvents = 'none'
+		outerStyle.visibility = 'hidden'
+		outerStyle.width = '200px'
+		outerStyle.height = '150px'
+		outerStyle.overflow = 'hidden'
+		outer.appendChild(inner)
+		document.body.appendChild(outer)
+		const widthContained = inner.offsetWidth
+		outer.style.overflow = 'scroll'
+		let widthScroll = inner.offsetWidth
+		if (widthContained === widthScroll) {
+			widthScroll = outer.clientWidth
+		}
+		document.body.removeChild(outer)
+		cached = widthContained - widthScroll
+	}
+	return cached
+}
+
+export default {
+	props: {
+		lockScroll: {
+			type: Boolean,
+			default: true
+		}
+	},
+	methods: {
+		checkScrollBar() {
+			let fullWindowWidth = window.innerWidth
+			if (!fullWindowWidth) {
+				const documentElementRect = document.documentElement.getBoundingClientRect()
+				fullWindowWidth = documentElementRect.right - Math.abs(documentElementRect.left)
+			}
+			this.bodyIsOverflowing = document.body.clientWidth < fullWindowWidth
+			if (this.bodyIsOverflowing) {
+				this.scrollBarWidth = getScrollBarSize()
+			}
+		},
+		checkMaskInVisible() {
+			let masks = document.getElementsByClassName('ivu-modal-mask') || []
+			return Array.from(masks).every(m => m.style.display === 'none' || m.classList.contains('fade-leave-to'))
+		},
+		setScrollBar() {
+			if (this.bodyIsOverflowing && this.scrollBarWidth !== undefined) {
+				document.body.style.paddingRight = `${this.scrollBarWidth}px`
+			}
+		},
+		resetScrollBar() {
+			document.body.style.paddingRight = ''
+		},
+		addScrollEffect() {
+			if (!this.lockScroll) return
+			this.checkScrollBar()
+			this.setScrollBar()
+			document.body.style.overflow = 'hidden'
+		},
+		removeScrollEffect() {
+			if (!this.lockScroll) return
+			if (this.checkMaskInVisible()) {
+				document.body.style.overflow = ''
+				this.resetScrollBar()
+			}
+		}
+	}
+}

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

@@ -1,43 +1,43 @@
-<template>
-	<div class="sh-empty-info">
-		<div v-if="noDataIcon" class="sh-empty-icon"><sh-icon :type="noDataIcon" size="24" /></div>
-		<div v-if="noDataText" v-line-clamp="clamp" class="sh-empty-text">{{ noDataText }}</div>
-	</div>
-</template>
-
-<script>
-export default {
-	name: 'ShEmpty',
-	components: {},
-	props: {
-		noDataIcon: {
-			type: String,
-			default: 'ios-cube-outline'
-		},
-		noDataText: {
-			type: String,
-			default: '暂无数据'
-		},
-		clamp: {
-			type: Number,
-			default: 2
-		}
-	}
-}
-</script>
-
-<style lang="scss" scoped>
-.sh-empty-info {
-	width: 100%;
-	display: block;
-	text-align: center;
-	padding: 10px 0;
-	.sh-empty-icon {
-		padding: 3px;
-		box-sizing: border-box;
-		color: var(--theme-color);
-	}
-	.sh-empty-text {
-	}
-}
-</style>
+<template>
+	<div class="sh-empty-info">
+		<div v-if="icon" class="sh-empty-icon"><sh-icon :type="icon" size="24" /></div>
+		<div v-if="content" v-line-clamp="clamp" class="sh-empty-text">{{ content }}</div>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'ShEmpty',
+	components: {},
+	props: {
+		icon: {
+			type: String,
+			default: 'ios-cube-outline'
+		},
+		content: {
+			type: String,
+			default: '暂无数据'
+		},
+		clamp: {
+			type: Number,
+			default: 2
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.sh-empty-info {
+	width: 100%;
+	display: block;
+	text-align: center;
+	padding: 10px 0;
+	.sh-empty-icon {
+		padding: 3px;
+		box-sizing: border-box;
+		color: var(--vxe-primary-color);
+	}
+	.sh-empty-text {
+	}
+}
+</style>

package/packages/components/global-components/{sh-vxe-form → sh-form}/css/index.scss

@@ -6,17 +6,17 @@
                 cursor: auto;
                 color: #333;
                 background-color: #fff;
-                border-color: var(--theme-weak-color);
+                border-color: var(--vxe-primary-lighten-color);
             }
             .vxe-checkbox.is--disabled{
                 cursor: auto;
                 color: #333;
                 & > input + .vxe-checkbox--icon{
                     background-color: #fff;
-                    border-color: var(--theme-weak-color);
+                    border-color: var(--vxe-primary-lighten-color);
                 }
                 & > input + .vxe-checkbox--icon:before{
-                    border-color: var(--theme-color);
+                    border-color: var(--vxe-primary-color);
                 }
                 & > input + .vxe-checkbox--icon + .vxe-checkbox--label{
                     color: #333;
@@ -32,13 +32,13 @@
         }
     }
     .vxe-form{
-        .vxe-form--gather{
-            border: 1px solid var(--border-color);
+        .vxe-form--gather.shFormTitleItem{
+            border: 1px solid var(--vxe-table-border-color);
         }
         .vxe-form--item{
             &.shFormTitleItem{
                 padding: 0.2em 0.8em;
-                border-left: 5px solid var(--theme-color);
+                border-left: 5px solid var(--vxe-primary-color);
                 margin-bottom: 0.5em;
                 .vxe-form--item-inner{
                     min-height: auto;