sh-view 2.1.0 → 2.2.0

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

@@ -2,12 +2,12 @@
 	<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>
+				<div v-show="visible" v-if="mask" class="sh-drawer-mask" :class="{ 'sh-drawer-mask-inner': inner }" :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">
+					<div v-show="visible" ref="drawerRef" class="sh-drawer" :class="classes" :style="mainStyles">
+						<div ref="drawerContent" class="sh-drawer-content" :class="{ 'sh-drawer-content-no-mask': !mask }">
 							<a v-if="closable" class="sh-drawer-close" @click="close">
 								<slot name="close">
 									<sh-icon type="ios-close"></sh-icon>
@@ -37,10 +37,10 @@
 </template>
 
 <script>
-import ScrollbarMixins from './scrollbar'
-export default {
+import { defineComponent, ref, watch, onMounted, onBeforeUnmount, getCurrentInstance, computed } from 'vue'
+import useScrollbar from './scrollbar'
+export default defineComponent({
 	name: 'ShDrawer',
-	mixins: [ScrollbarMixins],
 	props: {
 		modelValue: {
 			type: Boolean,
@@ -108,223 +108,250 @@ export default {
 		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() {
+	setup(props, context) {
+		const vm = getCurrentInstance()
+		const { $vUtils } = vm.proxy
+		const { emit, slots } = context
+		const drawerRef = ref()
+		const drawerContent = ref()
+
+		const visible = ref(props.modelValue)
+		const wrapShow = ref(false)
+		const showHead = ref(true)
+		const canMove = ref(false)
+		const dragWidth = ref(props.width)
+		const dragHeight = ref(props.height)
+		const wrapperWidth = ref(props.width)
+		const wrapperHeight = ref(props.height)
+		const wrapperLeft = ref(0)
+		const minWidth = ref(256)
+		const minHeight = ref(256)
+		const id = ref($vUtils.randomStr(6))
+		const tableList = ref([])
+		const sliderList = ref([])
+		let timer = null
+
+		const wrapClasses = computed(() => {
 			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
+				'sh-drawer-hidden': !wrapShow.value,
+				'sh-drawer-no-mask': !props.mask,
+				'sh-drawer-wrap-inner': props.inner,
+				'sh-drawer-wrap-dragging': canMove.value,
+				[`${props.className}`]: !!props.className
 			}
-		},
-		mainStyles() {
+		})
+		const mainStyles = computed(() => {
 			let style = {}
-			if (this.placement === 'left' || this.placement === 'right') {
-				const width = parseInt(this.dragWidth)
+			if (props.placement === 'left' || props.placement === 'right') {
+				const width = parseInt(dragWidth.value)
 				const styleWidth = {
 					width: width <= 100 ? `${width}%` : `${width}px`
 				}
 				Object.assign(style, styleWidth)
 			} else {
-				const height = parseInt(this.dragHeight)
+				const height = parseInt(dragHeight.value)
 				const styleHeight = {
 					height: height <= 100 ? `${height}%` : `${height}px`
 				}
 				Object.assign(style, styleHeight)
 			}
 			return style
-		},
-		contentClasses() {
-			return {
-				'sh-drawer-content-no-mask': !this.mask
-			}
-		},
-		classes() {
+		})
+		const classes = computed(() => {
 			return {
-				[`sh-drawer-${this.placement}`]: true,
-				'sh-drawer-no-header': !this.showHead,
-				'sh-drawer-inner': this.inner
+				[`sh-drawer-${props.placement}`]: true,
+				'sh-drawer-no-header': !showHead.value,
+				'sh-drawer-inner': props.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'
+		})
+		const transitionName = computed(() => {
+			if (props.placement === 'left' || props.placement === 'right') return `move-${props.placement}`
+			else if (props.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 { addScrollEffect, removeScrollEffect } = useScrollbar(props)
+
+		const close = () => {
+			if (!props.beforeClose) {
+				return handleClose()
 			}
-			const before = this.beforeClose()
+			const before = props.beforeClose()
 			if (before && before.then) {
 				before.then(() => {
-					this.handleClose()
+					handleClose()
 				})
 			} else {
-				this.handleClose()
+				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()
+		}
+		const handleClose = () => {
+			visible.value = false
+			emit('update:modelValue', false)
+			emit('close')
+		}
+		const handleMask = () => {
+			if (canMove.value) return
+			if (props.maskClosable && props.mask) {
+				close()
 			}
-		},
-		handleWrapClick(event) {
+		}
+		const 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
+			if (className && className.indexOf('sh-drawer-wrap') > -1) handleMask()
+		}
+		const handleMousemove = event => {
+			if (!canMove.value || !props.draggable || !visible.value) return
 			// 更新容器宽度和距离左侧页面距离，如果是window则距左侧距离为0
-			this.handleSetWrapperWidth()
-			const left = event.pageX - this.wrapperLeft
+			handleSetWrapperWidth()
+			const left = event.pageX - wrapperLeft.value
 			// 如果抽屉方向为右边，宽度计算需用容器宽度减去left
-			let width = this.placement === 'right' ? this.wrapperWidth - left : left
+			let width = props.placement === 'right' ? wrapperWidth.value - left : left
 			// 限定最小宽度
-			width = Math.max(width, parseFloat(this.minWidth))
-			event.atMin = width === parseFloat(this.minWidth)
+			width = Math.max(width, parseFloat(minWidth.value))
+			event.atMin = width === parseFloat(minWidth.value)
 			// 如果当前width不大于100，视为百分比
-			if (width <= 100) width = (width / this.wrapperWidth) * 100
+			if (width <= 100) width = (width / wrapperWidth.value) * 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
+			dragWidth.value = width
+			emit('resize-width', parseInt(dragWidth.value))
+			emit('drag', 'dragging', parseInt(dragWidth.value))
+		}
+		const handleSetWrapperWidth = () => {
+			const { width, left } = drawerRef.value.getBoundingClientRect()
+			wrapperWidth.value = width
+			wrapperLeft.value = left
+		}
+		const handleMouseup = () => {
+			if (!props.draggable || !visible.value) return
 			setTimeout(() => {
-				this.canMove = false
+				canMove.value = false
 			})
-			this.$emit('drag', 'end')
-		},
-		handleTriggerMousedown() {
-			this.canMove = true
+			emit('drag', 'end')
+		}
+		const handleTriggerMousedown = () => {
+			canMove.value = true
 			// 防止鼠标选中抽屉中文字，造成拖动trigger触发浏览器原生拖动行为
 			window.getSelection().removeAllRanges()
-			this.$emit('drag', 'start')
-		},
-		addDrawer() {
-			const root = this.$root
+			emit('drag', 'start')
+		}
+		const addDrawer = () => {
+			const root = vm.root
 			if (!root.drawerList) root.drawerList = []
 			root.drawerList.push({
-				id: this.id,
-				drawer: this
+				id: id.value,
+				drawer: vm
 			})
-		},
-		removeDrawer() {
-			const root = this.$root
+		}
+		const removeDrawer = () => {
+			const root = vm.root
 			if (!root.drawerList) return
-			const index = root.drawerList.findIndex(item => item.id === this.id)
+			const index = root.drawerList.findIndex(item => item.id === id.value)
 			root.drawerList.splice(index, 1)
 		}
+
+		watch(
+			() => props.modelValue,
+			value => {
+				visible.value = value
+			}
+		)
+		watch(
+			() => visible.value,
+			val => {
+				if (val === false) {
+					timer = setTimeout(() => {
+						wrapShow.value = false
+						const drawers = vm.root.drawerList.map(item => item.drawer)
+						const otherDrawers = drawers.filter(item => item.id !== id.value)
+						const isScrollDrawer = otherDrawers.some(item => item.visible && !item.scrollable)
+						if (!isScrollDrawer) {
+							removeScrollEffect()
+						}
+					}, 300)
+				} else {
+					if (timer) clearTimeout(timer)
+					wrapShow.value = true
+					if (!props.scrollable) {
+						addScrollEffect()
+					}
+				}
+				tableList.value.forEach(item => {
+					item.table.handleOnVisibleChange(val)
+				})
+				sliderList.value.forEach(item => {
+					item.slider.handleOnVisibleChange(val)
+				})
+				emit('visible-change', val)
+			}
+		)
+		watch(
+			() => props.scrollable,
+			val => {
+				if (!val) {
+					addScrollEffect()
+				} else {
+					removeScrollEffect()
+				}
+			}
+		)
+		watch(
+			() => props.title,
+			val => {
+				if (slots.header === undefined) {
+					showHead.value = !!val
+				}
+			}
+		)
+		watch(
+			() => props.width,
+			val => {
+				dragWidth.value = val
+			}
+		)
+		watch(
+			() => props.height,
+			val => {
+				dragHeight.value = val
+			}
+		)
+		onMounted(() => {
+			if (visible.value) {
+				wrapShow.value = true
+			}
+			let isShowHead = true
+			if (slots.header === undefined && !props.title) {
+				isShowHead = false
+			}
+			showHead.value = isShowHead
+			addDrawer()
+			$vUtils.onListener(document, 'mousemove', handleMousemove)
+			$vUtils.onListener(document, 'mouseup', handleMouseup)
+			handleSetWrapperWidth()
+		})
+		onBeforeUnmount(() => {
+			removeDrawer()
+			$vUtils.offListener(document, 'mousemove', handleMousemove)
+			$vUtils.offListener(document, 'mouseup', handleMouseup)
+			removeScrollEffect()
+		})
+
+		return {
+			visible,
+			handleMask,
+			wrapClasses,
+			handleWrapClick,
+			transitionName,
+			classes,
+			mainStyles,
+			close,
+			showHead,
+			handleTriggerMousedown,
+			drawerRef,
+			drawerContent
+		}
 	}
-}
+})
 </script>
 
 <style scoped lang="scss">

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

@@ -28,49 +28,51 @@ export function getScrollBarSize(fresh) {
 	return cached
 }
 
-export default {
-	props: {
-		lockScroll: {
-			type: Boolean,
-			default: true
+export default function (props, state = {}) {
+	const { lockScroll = true } = props
+	const checkScrollBar = () => {
+		let fullWindowWidth = window.innerWidth
+		if (!fullWindowWidth) {
+			const documentElementRect = document.documentElement.getBoundingClientRect()
+			fullWindowWidth = documentElementRect.right - Math.abs(documentElementRect.left)
 		}
-	},
-	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()
-			}
+		state.bodyIsOverflowing = document.body.clientWidth < fullWindowWidth
+		if (state.bodyIsOverflowing) {
+			state.scrollBarWidth = getScrollBarSize()
 		}
 	}
+
+	const checkMaskInVisible = () => {
+		let masks = document.getElementsByClassName('sh-drawer-mask') || []
+		return Array.from(masks).every(m => m.style.display === 'none' || m.classList.contains('fade-leave-to'))
+	}
+
+	const setScrollBar = () => {
+		if (state.bodyIsOverflowing && state.scrollBarWidth !== undefined) {
+			document.body.style.paddingRight = `${state.scrollBarWidth}px`
+		}
+	}
+
+	const resetScrollBar = () => {
+		document.body.style.paddingRight = ''
+	}
+
+	const addScrollEffect = () => {
+		if (!lockScroll) return
+		checkScrollBar()
+		setScrollBar()
+		document.body.style.overflow = 'hidden'
+	}
+
+	const removeScrollEffect = () => {
+		if (!lockScroll) return
+		if (checkMaskInVisible()) {
+			document.body.style.overflow = ''
+			resetScrollBar()
+		}
+	}
+	return {
+		addScrollEffect,
+		removeScrollEffect
+	}
 }

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

@@ -8,7 +8,6 @@
 <script>
 export default {
 	name: 'ShEmpty',
-	components: {},
 	props: {
 		icon: {
 			type: String,

package/packages/components/global-components/sh-form/form.vue

@@ -0,0 +1,110 @@
+<template>
+	<div class="sh-vxe-form" :class="{ readonly: readonly, disabled: disabled }">
+		<vxe-form
+			ref="formRef"
+			:key="renderKey"
+			v-bind="formBindConfig"
+			@submit="onFormSubmit"
+			@submit-invalid="onFormSubmitInvalid"
+			@reset="onFormReset"
+			@collapse="onFormCollapse"
+			@edit-closed="onFormEditClosed"
+			@prefix-click="onPrefixClick"
+			@suffix-click="onSuffixClick">
+			<div v-if="footer" class="sh-common-footer">
+				<div class="sh-common-footer-left">
+					<slot name="formLeft"></slot>
+				</div>
+				<div class="sh-common-footer-right">
+					<slot name="formRight"></slot>
+					<vxe-button v-ripple type="submit" status="primary" :size="size" :disabled="disabled || loading">
+						{{ globalConfig?.submitBtnText || '确认' }}
+					</vxe-button>
+					<vxe-button v-ripple type="reset" :size="size">{{ globalConfig?.resetBtnText || '重置' }}</vxe-button>
+				</div>
+			</div>
+			<template v-for="slot in Object.keys(slots)" #[slot]="scope">
+				<!-- 以之前的名字命名插槽，同时把数据原样绑定 -->
+				<slot :name="slot" v-bind="scope"></slot>
+			</template>
+		</vxe-form>
+	</div>
+</template>
+
+<script>
+import { defineComponent, getCurrentInstance } from 'vue'
+import props from './js/props'
+import useForm from './js/useForm'
+export default defineComponent({
+	name: 'ShForm',
+	props: props,
+	emits: ['submit', 'reset', 'edit-closed', 'submit-invalid', 'collapse', 'prefix-click', 'suffix-click'],
+	setup(props, context) {
+		const { proxy } = getCurrentInstance()
+		const useFormHooks = useForm(props, context, proxy, true)
+
+		return {
+			...useFormHooks
+		}
+	}
+})
+</script>
+
+<style lang="scss">
+.sh-vxe-form {
+	position: relative;
+	&.readonly {
+		.vxe-form {
+			.vxe-input--inner[disabled],
+			.vxe-textarea--inner[disabled] {
+				cursor: auto;
+				color: #333;
+				background-color: var(--vxe-table-body-background-color);
+				border-color: var(--vxe-primary-lighten-color);
+			}
+			.vxe-checkbox.is--disabled {
+				cursor: auto;
+				color: #333;
+				& > input + .vxe-checkbox--icon {
+					background-color: var(--vxe-table-body-background-color);
+					border-color: var(--vxe-primary-lighten-color);
+				}
+				& > input + .vxe-checkbox--icon:before {
+					border-color: var(--vxe-primary-color);
+				}
+				& > input + .vxe-checkbox--icon + .vxe-checkbox--label {
+					color: #333;
+				}
+			}
+			.vxe-input.is--disabled .vxe-input--date-picker-suffix,
+			.vxe-input.is--disabled .vxe-input--number-suffix,
+			.vxe-input.is--disabled .vxe-input--password-suffix,
+			.vxe-input.is--disabled .vxe-input--search-suffix,
+			.vxe-input.is--disabled .vxe-input--suffix {
+				cursor: auto;
+			}
+		}
+	}
+	.vxe-form {
+		.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(--vxe-primary-color);
+				margin-bottom: 0.5em;
+				.vxe-form--item-inner {
+					min-height: auto;
+					.vxe-form--item-title {
+						max-width: 100%;
+						.vxe-form--item-title-postfix {
+							display: none;
+						}
+					}
+				}
+			}
+		}
+	}
+}
+</style>