sh-view 2.8.0 → 2.8.2

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

@@ -1,342 +1,342 @@
-<template>
-	<div ref="splitRef" v-resize="computeOffset" class="sh-split" :class="{ 'no-select': isMoving }">
-		<sh-loading v-if="loading" loading :content="loadingText" class="layout-loader"></sh-loading>
-		<div v-if="isHorizontal" class="sh-split-horizontal">
-			<div :style="{ right: `${anotherOffset}%` }" class="left-pane" :class="paneClasses">
-				<slot name="left" />
-			</div>
-			<div class="sh-split-trigger-con" :style="{ left: `${offset}%` }" @mousedown="handleMousedown">
-				<slot name="trigger">
-					<trigger mode="vertical" />
-				</slot>
-			</div>
-			<div :style="{ left: `${offset}%` }" class="right-pane" :class="paneClasses">
-				<slot name="right" />
-			</div>
-		</div>
-		<div v-else class="sh-split-vertical">
-			<div :style="{ bottom: `${anotherOffset}%` }" class="top-pane" :class="paneClasses">
-				<slot name="top" />
-			</div>
-			<div class="sh-split-trigger-con" :style="{ top: `${offset}%` }" @mousedown="handleMousedown">
-				<slot name="trigger">
-					<trigger mode="horizontal" />
-				</slot>
-			</div>
-			<div :style="{ top: `${offset}%` }" class="bottom-pane" :class="paneClasses">
-				<slot name="bottom" />
-			</div>
-		</div>
-	</div>
-</template>
-
-<script>
-import { defineComponent, computed, getCurrentInstance, ref, watch, onMounted, nextTick } from 'vue'
-import trigger from './components/trigger.vue'
-export default defineComponent({
-	name: 'ShSplit',
-	components: {
-		trigger
-	},
-	props: {
-		modelValue: {
-			type: [Number, String],
-			default: 0.2
-		},
-		mode: {
-			type: String,
-			default: 'horizontal' // horizontal, vertical
-		},
-		min: {
-			type: [Number, String],
-			default: 0
-		},
-		max: {
-			type: [Number, String],
-			default: 0.6
-		},
-		disabled: {
-			type: Boolean,
-			default: false
-		},
-		dividerText: {
-			type: String,
-			default: ''
-		},
-		loading: {
-			type: Boolean
-		},
-		loadingText: {
-			type: String,
-			default: ''
-		},
-		loadingType: {
-			type: String,
-			default: '2'
-		}
-	},
-	emits: ['update:modelValue', 'move-start', 'moveing', 'move-end'],
-	setup(props, context) {
-		const vm = getCurrentInstance()
-		const { $vUtils } = vm.proxy
-		const { emit, slots } = context
-
-		const splitRef = ref()
-		const offset = ref(0)
-		const initOffset = ref(0)
-		const oldOffset = ref(0)
-		const isMoving = ref(false)
-		const computedMin = ref(0)
-		const computedMax = ref(0)
-		const currentValue = ref(props.modelValue)
-
-		const paneClasses = computed(() => {
-			return {
-				'sh-split-pane': true,
-				'sh-split-pane-moving': props.isMoving
-			}
-		})
-		const isHorizontal = computed(() => {
-			return props.mode === 'horizontal'
-		})
-		const anotherOffset = computed(() => {
-			return 100 - offset.value
-		})
-		const valueIsPx = computed(() => {
-			return typeof props.modelValue === 'string'
-		})
-		const offsetSize = computed(() => {
-			return isHorizontal.value ? 'offsetWidth' : 'offsetHeight'
-		})
-
-		const px2percent = (numerator, denominator) => {
-			return parseFloat(numerator) / parseFloat(denominator)
-		}
-		const getComputedThresholdValue = type => {
-			let size = splitRef.value[offsetSize.value]
-			if (valueIsPx.value) return typeof props[type] === 'string' ? props[type] : size * props[type]
-			else return typeof props[type] === 'string' ? px2percent(props[type], size) : props[type]
-		}
-		const getMin = (value1, value2) => {
-			if (valueIsPx.value) return `${Math.min(parseFloat(value1), parseFloat(value2))}px`
-			else return Math.min(value1, value2)
-		}
-		const getMax = (value1, value2) => {
-			if (valueIsPx.value) return `${Math.max(parseFloat(value1), parseFloat(value2))}px`
-			else return Math.max(value1, value2)
-		}
-		const getAnotherOffset = value => {
-			let res = 0
-			if (valueIsPx.value) res = `${splitRef.value[offsetSize.value] - parseFloat(value)}px`
-			else res = 1 - value
-			return res
-		}
-		const handleMove = e => {
-			let pageOffset = isHorizontal.value ? e.pageX : e.pageY
-			let offset = pageOffset - initOffset.value
-			let outerWidth = splitRef.value[offsetSize.value]
-			let value = valueIsPx.value ? `${parseFloat(oldOffset.value) + offset}px` : px2percent(outerWidth * oldOffset.value + offset, outerWidth)
-			let anotherValue = getAnotherOffset(value)
-			if (parseFloat(value) <= parseFloat(computedMin.value)) value = computedMin.value
-			if (parseFloat(anotherValue) <= parseFloat(computedMax.value)) value = getAnotherOffset(getMax(anotherValue, computedMax.value))
-			e.atMin = currentValue.value === computedMin.value
-			e.atMax = valueIsPx.value ? getAnotherOffset(currentValue.value) === computedMax.value : getAnotherOffset(currentValue.value).toFixed(5) === computedMax.value.toFixed(5)
-			emitValue(value)
-			emit('moveing', e)
-		}
-		const handleUp = () => {
-			isMoving.value = false
-			$vUtils.offListener(document, 'mousemove', handleMove)
-			$vUtils.offListener(document, 'mouseup', handleUp)
-			emit('move-end')
-		}
-		const handleMousedown = e => {
-			initOffset.value = isHorizontal.value ? e.pageX : e.pageY
-			oldOffset.value = currentValue.value
-			isMoving.value = true
-			$vUtils.onListener(document, 'mousemove', handleMove)
-			$vUtils.onListener(document, 'mouseup', handleUp)
-			emit('move-start')
-		}
-		const computeOffset = () => {
-			computedMin.value = getComputedThresholdValue('min')
-			computedMax.value = getComputedThresholdValue('max')
-			offset.value = ((valueIsPx.value ? px2percent(currentValue.value, splitRef.value[offsetSize.value]) : currentValue.value) * 10000) / 100
-			// return nextTick()
-		}
-		const resetOffset = val => {
-			if (val !== currentValue.value) {
-				currentValue.value = val
-				computeOffset()
-			}
-		}
-		const emitValue = value => {
-			emit('update:modelValue', value)
-			resetOffset(value)
-		}
-
-		watch(
-			() => props.modelValue,
-			val => {
-				resetOffset(val)
-			}
-		)
-
-		return {
-			splitRef,
-			isMoving,
-			isHorizontal,
-			anotherOffset,
-			paneClasses,
-			offset,
-			computeOffset,
-			handleMousedown
-		}
-	}
-})
-</script>
-
-<style lang="scss">
-$box-shadow: var(--box-shadow);
-$trigger-bar-background: rgba(23, 35, 61, 0.25);
-$trigger-background: #f8f8f9;
-$trigger-width: 6px;
-$trigger-bar-width: 4px;
-$trigger-bar-offset: calc(($trigger-width - $trigger-bar-width) / 2);
-$trigger-bar-interval: 3px;
-$trigger-bar-weight: 1px;
-$trigger-bar-con-height: calc(($trigger-bar-weight + $trigger-bar-interval) * 8);
-
-.sh-split {
-	position: relative;
-	width: 100%;
-	height: 100%;
-	.layout-loader {
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		background: rgba(0, 0, 0, 0.4);
-		transition: opacity 0.65s;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		flex-wrap: wrap;
-		font-size: 15px;
-		color: #fff;
-		z-index: 100;
-	}
-	&-pane {
-		position: absolute;
-		overflow: auto;
-		&.left-pane,
-		&.right-pane {
-			top: 0;
-			bottom: 0;
-		}
-		&.left-pane {
-			left: 0;
-			margin-right: $trigger-bar-width;
-		}
-		&.right-pane {
-			right: 0;
-			margin-left: $trigger-bar-width;
-		}
-		&.top-pane,
-		&.bottom-pane {
-			left: 0;
-			right: 0;
-		}
-		&.top-pane {
-			top: 0;
-			margin-bottom: $trigger-bar-width;
-		}
-		&.bottom-pane {
-			bottom: 0;
-			margin-top: $trigger-bar-width;
-		}
-		&-moving {
-			-webkit-user-select: none;
-			-moz-user-select: none;
-			-ms-user-select: none;
-			user-select: none;
-		}
-	}
-	&-trigger {
-		border: 1px solid var(--vxe-border-radius);
-		&-con {
-			position: absolute;
-			transform: translate(-50%, -50%);
-			z-index: 10;
-		}
-		&-bar-con {
-			position: absolute;
-			overflow: hidden;
-			&.vertical {
-				left: $trigger-bar-offset;
-				top: 50%;
-				height: $trigger-bar-con-height;
-				transform: translate(0, -50%);
-			}
-			&.horizontal {
-				left: 50%;
-				top: $trigger-bar-offset;
-				width: $trigger-bar-con-height;
-				transform: translate(-50%, 0);
-			}
-		}
-		&-vertical {
-			width: $trigger-width;
-			height: 100%;
-			background: $trigger-background;
-			border-top: none;
-			border-bottom: none;
-			cursor: col-resize;
-			.sh-split-trigger-bar {
-				width: $trigger-bar-width;
-				height: 1px;
-				background: $trigger-bar-background;
-				float: left;
-				margin-top: $trigger-bar-interval;
-			}
-		}
-		&-horizontal {
-			height: $trigger-width;
-			width: 100%;
-			background: $trigger-background;
-			border-left: none;
-			border-right: none;
-			cursor: row-resize;
-			.sh-split-trigger-bar {
-				height: $trigger-bar-width;
-				width: 1px;
-				background: $trigger-bar-background;
-				float: left;
-				margin-right: $trigger-bar-interval;
-			}
-		}
-	}
-	&-horizontal {
-		> .sh-split-trigger-con {
-			top: 50%;
-			height: 100%;
-			width: $trigger-width;
-		}
-	}
-	&-vertical {
-		> .sh-split-trigger-con {
-			left: 50%;
-			height: $trigger-width;
-			width: 100%;
-		}
-	}
-	.no-select {
-		-webkit-touch-callout: none;
-		-webkit-user-select: none;
-		-moz-user-select: none;
-		-ms-user-select: none;
-		user-select: none;
-	}
-}
-</style>
+<template>
+	<div ref="splitRef" v-resize="computeOffset" class="sh-split" :class="{ 'no-select': isMoving }">
+		<sh-loading v-if="loading" loading :content="loadingText" class="layout-loader"></sh-loading>
+		<div v-if="isHorizontal" class="sh-split-horizontal">
+			<div :style="{ right: `${anotherOffset}%` }" class="left-pane" :class="paneClasses">
+				<slot name="left" />
+			</div>
+			<div class="sh-split-trigger-con" :style="{ left: `${offset}%` }" @mousedown="handleMousedown">
+				<slot name="trigger">
+					<trigger mode="vertical" />
+				</slot>
+			</div>
+			<div :style="{ left: `${offset}%` }" class="right-pane" :class="paneClasses">
+				<slot name="right" />
+			</div>
+		</div>
+		<div v-else class="sh-split-vertical">
+			<div :style="{ bottom: `${anotherOffset}%` }" class="top-pane" :class="paneClasses">
+				<slot name="top" />
+			</div>
+			<div class="sh-split-trigger-con" :style="{ top: `${offset}%` }" @mousedown="handleMousedown">
+				<slot name="trigger">
+					<trigger mode="horizontal" />
+				</slot>
+			</div>
+			<div :style="{ top: `${offset}%` }" class="bottom-pane" :class="paneClasses">
+				<slot name="bottom" />
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import { defineComponent, computed, getCurrentInstance, ref, watch, onMounted, nextTick } from 'vue'
+import trigger from './components/trigger.vue'
+export default defineComponent({
+	name: 'ShSplit',
+	components: {
+		trigger
+	},
+	props: {
+		modelValue: {
+			type: [Number, String],
+			default: 0.2
+		},
+		mode: {
+			type: String,
+			default: 'horizontal' // horizontal, vertical
+		},
+		min: {
+			type: [Number, String],
+			default: 0
+		},
+		max: {
+			type: [Number, String],
+			default: 0.6
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		dividerText: {
+			type: String,
+			default: ''
+		},
+		loading: {
+			type: Boolean
+		},
+		loadingText: {
+			type: String,
+			default: ''
+		},
+		loadingType: {
+			type: String,
+			default: '2'
+		}
+	},
+	emits: ['update:modelValue', 'move-start', 'moveing', 'move-end'],
+	setup(props, context) {
+		const vm = getCurrentInstance()
+		const { $vUtils } = vm.proxy
+		const { emit, slots } = context
+
+		const splitRef = ref()
+		const offset = ref(0)
+		const initOffset = ref(0)
+		const oldOffset = ref(0)
+		const isMoving = ref(false)
+		const computedMin = ref(0)
+		const computedMax = ref(0)
+		const currentValue = ref(props.modelValue)
+
+		const paneClasses = computed(() => {
+			return {
+				'sh-split-pane': true,
+				'sh-split-pane-moving': props.isMoving
+			}
+		})
+		const isHorizontal = computed(() => {
+			return props.mode === 'horizontal'
+		})
+		const anotherOffset = computed(() => {
+			return 100 - offset.value
+		})
+		const valueIsPx = computed(() => {
+			return typeof props.modelValue === 'string'
+		})
+		const offsetSize = computed(() => {
+			return isHorizontal.value ? 'offsetWidth' : 'offsetHeight'
+		})
+
+		const px2percent = (numerator, denominator) => {
+			return parseFloat(numerator) / parseFloat(denominator)
+		}
+		const getComputedThresholdValue = type => {
+			let size = splitRef.value[offsetSize.value]
+			if (valueIsPx.value) return typeof props[type] === 'string' ? props[type] : size * props[type]
+			else return typeof props[type] === 'string' ? px2percent(props[type], size) : props[type]
+		}
+		const getMin = (value1, value2) => {
+			if (valueIsPx.value) return `${Math.min(parseFloat(value1), parseFloat(value2))}px`
+			else return Math.min(value1, value2)
+		}
+		const getMax = (value1, value2) => {
+			if (valueIsPx.value) return `${Math.max(parseFloat(value1), parseFloat(value2))}px`
+			else return Math.max(value1, value2)
+		}
+		const getAnotherOffset = value => {
+			let res = 0
+			if (valueIsPx.value) res = `${splitRef.value[offsetSize.value] - parseFloat(value)}px`
+			else res = 1 - value
+			return res
+		}
+		const handleMove = e => {
+			let pageOffset = isHorizontal.value ? e.pageX : e.pageY
+			let offset = pageOffset - initOffset.value
+			let outerWidth = splitRef.value[offsetSize.value]
+			let value = valueIsPx.value ? `${parseFloat(oldOffset.value) + offset}px` : px2percent(outerWidth * oldOffset.value + offset, outerWidth)
+			let anotherValue = getAnotherOffset(value)
+			if (parseFloat(value) <= parseFloat(computedMin.value)) value = computedMin.value
+			if (parseFloat(anotherValue) <= parseFloat(computedMax.value)) value = getAnotherOffset(getMax(anotherValue, computedMax.value))
+			e.atMin = currentValue.value === computedMin.value
+			e.atMax = valueIsPx.value ? getAnotherOffset(currentValue.value) === computedMax.value : getAnotherOffset(currentValue.value).toFixed(5) === computedMax.value.toFixed(5)
+			emitValue(value)
+			emit('moveing', e)
+		}
+		const handleUp = () => {
+			isMoving.value = false
+			$vUtils.offListener(document, 'mousemove', handleMove)
+			$vUtils.offListener(document, 'mouseup', handleUp)
+			emit('move-end')
+		}
+		const handleMousedown = e => {
+			initOffset.value = isHorizontal.value ? e.pageX : e.pageY
+			oldOffset.value = currentValue.value
+			isMoving.value = true
+			$vUtils.onListener(document, 'mousemove', handleMove)
+			$vUtils.onListener(document, 'mouseup', handleUp)
+			emit('move-start')
+		}
+		const computeOffset = () => {
+			computedMin.value = getComputedThresholdValue('min')
+			computedMax.value = getComputedThresholdValue('max')
+			offset.value = ((valueIsPx.value ? px2percent(currentValue.value, splitRef.value[offsetSize.value]) : currentValue.value) * 10000) / 100
+			// return nextTick()
+		}
+		const resetOffset = val => {
+			if (val !== currentValue.value) {
+				currentValue.value = val
+				computeOffset()
+			}
+		}
+		const emitValue = value => {
+			emit('update:modelValue', value)
+			resetOffset(value)
+		}
+
+		watch(
+			() => props.modelValue,
+			val => {
+				resetOffset(val)
+			}
+		)
+
+		return {
+			splitRef,
+			isMoving,
+			isHorizontal,
+			anotherOffset,
+			paneClasses,
+			offset,
+			computeOffset,
+			handleMousedown
+		}
+	}
+})
+</script>
+
+<style lang="scss">
+$box-shadow: var(--box-shadow);
+$trigger-bar-background: rgba(23, 35, 61, 0.25);
+$trigger-background: #f8f8f9;
+$trigger-width: 6px;
+$trigger-bar-width: 4px;
+$trigger-bar-offset: calc(($trigger-width - $trigger-bar-width) / 2);
+$trigger-bar-interval: 3px;
+$trigger-bar-weight: 1px;
+$trigger-bar-con-height: calc(($trigger-bar-weight + $trigger-bar-interval) * 8);
+
+.sh-split {
+	position: relative;
+	width: 100%;
+	height: 100%;
+	.layout-loader {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		background: rgba(0, 0, 0, 0.4);
+		transition: opacity 0.65s;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-wrap: wrap;
+		font-size: 15px;
+		color: #fff;
+		z-index: 100;
+	}
+	&-pane {
+		position: absolute;
+		overflow: auto;
+		&.left-pane,
+		&.right-pane {
+			top: 0;
+			bottom: 0;
+		}
+		&.left-pane {
+			left: 0;
+			margin-right: $trigger-bar-width;
+		}
+		&.right-pane {
+			right: 0;
+			margin-left: $trigger-bar-width;
+		}
+		&.top-pane,
+		&.bottom-pane {
+			left: 0;
+			right: 0;
+		}
+		&.top-pane {
+			top: 0;
+			margin-bottom: $trigger-bar-width;
+		}
+		&.bottom-pane {
+			bottom: 0;
+			margin-top: $trigger-bar-width;
+		}
+		&-moving {
+			-webkit-user-select: none;
+			-moz-user-select: none;
+			-ms-user-select: none;
+			user-select: none;
+		}
+	}
+	&-trigger {
+		border: 1px solid var(--vxe-border-radius);
+		&-con {
+			position: absolute;
+			transform: translate(-50%, -50%);
+			z-index: 10;
+		}
+		&-bar-con {
+			position: absolute;
+			overflow: hidden;
+			&.vertical {
+				left: $trigger-bar-offset;
+				top: 50%;
+				height: $trigger-bar-con-height;
+				transform: translate(0, -50%);
+			}
+			&.horizontal {
+				left: 50%;
+				top: $trigger-bar-offset;
+				width: $trigger-bar-con-height;
+				transform: translate(-50%, 0);
+			}
+		}
+		&-vertical {
+			width: $trigger-width;
+			height: 100%;
+			background: $trigger-background;
+			border-top: none;
+			border-bottom: none;
+			cursor: col-resize;
+			.sh-split-trigger-bar {
+				width: $trigger-bar-width;
+				height: 1px;
+				background: $trigger-bar-background;
+				float: left;
+				margin-top: $trigger-bar-interval;
+			}
+		}
+		&-horizontal {
+			height: $trigger-width;
+			width: 100%;
+			background: $trigger-background;
+			border-left: none;
+			border-right: none;
+			cursor: row-resize;
+			.sh-split-trigger-bar {
+				height: $trigger-bar-width;
+				width: 1px;
+				background: $trigger-bar-background;
+				float: left;
+				margin-right: $trigger-bar-interval;
+			}
+		}
+	}
+	&-horizontal {
+		> .sh-split-trigger-con {
+			top: 50%;
+			height: 100%;
+			width: $trigger-width;
+		}
+	}
+	&-vertical {
+		> .sh-split-trigger-con {
+			left: 50%;
+			height: $trigger-width;
+			width: 100%;
+		}
+	}
+	.no-select {
+		-webkit-touch-callout: none;
+		-webkit-user-select: none;
+		-moz-user-select: none;
+		-ms-user-select: none;
+		user-select: none;
+	}
+}
+</style>