sh-view 1.7.6 → 2.0.0

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

@@ -0,0 +1,479 @@
+<template>
+	<div v-clickout="handleClose" class="sh-poptip" :class="classes" @mouseenter="handleMouseenter" @mouseleave="handleMouseleave">
+		<div ref="reference" class="sh-poptip-rel" @click="handleClick" @mousedown="handleFocus(false)" @mouseup="handleBlur(false)"><slot></slot></div>
+		<teleport to="body" :disabled="!transfer">
+			<transition name="fade">
+				<div v-show="visible" ref="popper" :class="popperClasses" :style="styles" @click="handleTransferClick" @mouseenter="handleMouseenter" @mouseleave="handleMouseleave">
+					<div class="sh-poptip-content">
+						<div class="sh-poptip-arrow"></div>
+						<div v-if="confirm" class="sh-poptip-inner">
+							<div class="sh-poptip-body">
+								<i class="ivu-icon ivu-icon-ios-help-circle"></i>
+								<div class="sh-poptip-body-message">
+									<slot name="title">{{ title }}</slot>
+								</div>
+							</div>
+							<div class="sh-poptip-footer">
+								<vxe-button type="text" size="small" @click="cancel">{{ cancelText }}</vxe-button>
+								<vxe-button status="primary" size="small" @click="ok">{{ comfirmText }}</vxe-button>
+							</div>
+						</div>
+						<div v-if="!confirm" class="sh-poptip-inner">
+							<div v-if="showTitle" ref="title" class="sh-poptip-title" :style="contentPaddingStyle">
+								<slot name="title">
+									<div class="sh-poptip-title-inner">{{ title }}</div>
+								</slot>
+							</div>
+							<div class="sh-poptip-body" :style="contentPaddingStyle">
+								<div :class="contentClasses">
+									<slot name="content">
+										<div class="sh-poptip-body-content-inner">{{ content }}</div>
+									</slot>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</transition>
+		</teleport>
+	</div>
+</template>
+
+<script>
+import Popper from './popper'
+import { transferIndex, transferIncrease } from '../../../utils/transfer-queue'
+export default {
+	name: 'ShPoptip',
+	mixins: [Popper],
+	props: {
+		trigger: {
+			type: String,
+			default: 'click' // 'click', 'focus', 'hover'
+		},
+		placement: {
+			type: String,
+			default: 'top' // 'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end'
+		},
+		title: {
+			type: [String, Number]
+		},
+		content: {
+			type: [String, Number],
+			default: ''
+		},
+		width: {
+			type: [String, Number]
+		},
+		confirm: {
+			type: Boolean,
+			default: false
+		},
+		comfirmText: {
+			type: String,
+			default: '确认'
+		},
+		cancelText: {
+			type: String,
+			default: '取消'
+		},
+		transfer: {
+			type: Boolean,
+			default: false
+		},
+		popperClass: {
+			type: String
+		},
+		wordWrap: {
+			type: Boolean,
+			default: false
+		},
+		padding: {
+			type: String
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		capture: {
+			type: Boolean
+		},
+		transferClassName: {
+			type: String
+		}
+	},
+	emits: ['confirm', 'cancel'],
+	data() {
+		return {
+			showTitle: true,
+			isInput: false,
+			disableCloseUnderTransfer: false, // transfer 模式下，点击 slot 也会触发关闭
+			tIndex: this.handleGetIndex()
+		}
+	},
+	computed: {
+		classes() {
+			return {
+				'sh-poptip-confirm': this.confirm
+			}
+		},
+		popperClasses() {
+			return {
+				'sh-poptip-popper': true,
+				'sh-poptip-confirm': this.transfer && this.confirm,
+				'sh-poptip-transfer': this.transfer,
+				[`${this.popperClass}`]: this.popperClass,
+				[`${this.transferClassName}`]: this.transferClassName
+			}
+		},
+		styles() {
+			let style = {}
+			if (this.width) {
+				style.width = `${this.width}px`
+			}
+			if (this.transfer) style['z-index'] = 1060 + this.tIndex
+			return style
+		},
+		contentClasses() {
+			return {
+				'sh-poptip-body-content': true,
+				'sh-poptip-body-content-word-wrap': this.wordWrap
+			}
+		},
+		contentPaddingStyle() {
+			const styles = {}
+			if (this.padding !== '') styles.padding = this.padding
+			return styles
+		}
+	},
+	mounted() {
+		if (!this.confirm) {
+			this.showTitle = this.$slots.title !== undefined || this.title
+		}
+		if (this.trigger === 'focus') {
+			this.$nextTick(() => {
+				const $children = this.getInputChildren()
+				if ($children) {
+					this.isInput = true
+					$children.addEventListener('focus', this.handleFocus, false)
+					$children.addEventListener('blur', this.handleBlur, false)
+				}
+			})
+		}
+	},
+	beforeUnmount() {
+		const $children = this.getInputChildren()
+		if ($children) {
+			$children.removeEventListener('focus', this.handleFocus, false)
+			$children.removeEventListener('blur', this.handleBlur, false)
+		}
+	},
+	methods: {
+		handleClick() {
+			if (this.disabled) return
+			if (this.confirm) {
+				this.visible = !this.visible
+				return true
+			}
+			if (this.trigger !== 'click') {
+				return false
+			}
+			this.visible = !this.visible
+		},
+		handleTransferClick() {
+			if (this.transfer) this.disableCloseUnderTransfer = true
+		},
+		handleClose() {
+			if (this.disableCloseUnderTransfer) {
+				this.disableCloseUnderTransfer = false
+				return false
+			}
+			if (this.confirm) {
+				this.visible = false
+				return true
+			}
+			if (this.trigger !== 'click') {
+				return false
+			}
+			this.visible = false
+		},
+		handleFocus(fromInput = true) {
+			if (this.disabled) return
+
+			if (this.trigger !== 'focus' || this.confirm || (this.isInput && !fromInput)) {
+				return false
+			}
+			this.visible = true
+		},
+		handleBlur(fromInput = true) {
+			if (this.trigger !== 'focus' || this.confirm || (this.isInput && !fromInput)) {
+				return false
+			}
+			this.visible = false
+		},
+		handleMouseenter() {
+			if (this.disabled) return
+			if (this.trigger !== 'hover' || this.confirm) {
+				return false
+			}
+			if (this.enterTimer) clearTimeout(this.enterTimer)
+			this.enterTimer = setTimeout(() => {
+				this.visible = true
+			}, 100)
+		},
+		handleMouseleave() {
+			if (this.trigger !== 'hover' || this.confirm) {
+				return false
+			}
+			if (this.enterTimer) {
+				clearTimeout(this.enterTimer)
+				this.enterTimer = setTimeout(() => {
+					this.visible = false
+				}, 100)
+			}
+		},
+		cancel() {
+			this.visible = false
+			this.$emit('cancel')
+		},
+		ok() {
+			this.visible = false
+			this.$emit('confirm')
+		},
+		getInputChildren() {
+			const $input = this.$refs.reference.querySelectorAll('input')
+			const $textarea = this.$refs.reference.querySelectorAll('textarea')
+			let $children = null
+			if ($input.length) {
+				$children = $input[0]
+			} else if ($textarea.length) {
+				$children = $textarea[0]
+			}
+			return $children
+		},
+		handleGetIndex() {
+			transferIncrease()
+			return transferIndex
+		},
+		handleIndexIncrease() {
+			this.tIndex = this.handleGetIndex()
+		}
+	}
+}
+</script>
+
+<style scoped lang="scss">
+$poptip-arrow: sh-poptip-arrow;
+$poptip-arrow-width: 7px;
+$poptip-arrow-outer-width: ($poptip-arrow-width + 1);
+$poptip-distance: $poptip-arrow-width - 1 + 4;
+$poptip-arrow-color: hsla(0, 0%, 85%, 0.5);
+@mixin popper($arrow, $arrow-width, $arrow-distance, $bg) {
+	display: block;
+	visibility: visible;
+	position: absolute;
+	z-index: 2000;
+	&[x-placement^='top'] {
+		padding: $arrow-width 0 $arrow-distance 0;
+	}
+	&[x-placement^='right'] {
+		padding: 0 $arrow-width 0 $arrow-distance;
+	}
+	&[x-placement^='bottom'] {
+		padding: $arrow-distance 0 $arrow-width 0;
+	}
+	&[x-placement^='left'] {
+		padding: 0 $arrow-distance 0 $arrow-width;
+	}
+	&[x-placement^='top'] .#{$arrow} {
+		bottom: $arrow-distance - $arrow-width;
+		border-width: $arrow-width $arrow-width 0;
+		border-top-color: $bg;
+	}
+	&[x-placement='top'] .#{$arrow} {
+		left: 50%;
+		margin-left: -$arrow-width;
+	}
+	&[x-placement='top-start'] .#{$arrow} {
+		left: 16px;
+	}
+	&[x-placement='top-end'] .#{$arrow} {
+		right: 16px;
+	}
+	&[x-placement^='right'] .#{$arrow} {
+		left: $arrow-distance - $arrow-width;
+		border-width: $arrow-width $arrow-width $arrow-width 0;
+		border-right-color: $bg;
+	}
+	&[x-placement='right'] .#{$arrow} {
+		top: 50%;
+		margin-top: -$arrow-width;
+	}
+	&[x-placement='right-start'] .#{$arrow} {
+		top: 8px;
+	}
+	&[x-placement='right-end'] .#{$arrow} {
+		bottom: 8px;
+	}
+	&[x-placement^='left'] .#{$arrow} {
+		right: $arrow-distance - $arrow-width;
+		border-width: $arrow-width 0 $arrow-width $arrow-width;
+		border-left-color: $bg;
+	}
+	&[x-placement='left'] .#{$arrow} {
+		top: 50%;
+		margin-top: -$arrow-width;
+	}
+	&[x-placement='left-start'] .#{$arrow} {
+		top: 8px;
+	}
+	&[x-placement='left-end'] .#{$arrow} {
+		bottom: 8px;
+	}
+	&[x-placement^='bottom'] .#{$arrow} {
+		top: $arrow-distance - $arrow-width;
+		border-width: 0 $arrow-width $arrow-width;
+		border-bottom-color: $bg;
+	}
+	&[x-placement='bottom'] .#{$arrow} {
+		left: 50%;
+		margin-left: -$arrow-width;
+	}
+	&[x-placement='bottom-start'] .#{$arrow} {
+		left: 16px;
+	}
+	&[x-placement='bottom-end'] .#{$arrow} {
+		right: 16px;
+	}
+}
+.sh-poptip {
+	display: inline-block;
+	&-rel {
+		display: inline-block;
+		position: relative;
+	}
+	&-title {
+		margin: 0;
+		padding: 8px 16px;
+		position: relative;
+		&:after {
+			content: '';
+			display: block;
+			height: 1px;
+			position: absolute;
+			left: 8px;
+			right: 8px;
+			bottom: 0;
+			background-color: var(--vxe-table-border-color);
+		}
+		&-inner {
+			color: var(--vxe-font-color);
+			font-size: var(--vxe-font-size);
+			font-weight: 500;
+		}
+	}
+	&-body {
+		padding: 8px 16px;
+		&-content {
+			overflow: auto;
+			&-word-wrap {
+				white-space: pre-wrap;
+				text-align: justify;
+			}
+			&-inner {
+				color: var(--vxe-font-color);
+			}
+		}
+	}
+	&-inner {
+		width: 100%;
+		background-color: #fff;
+		background-clip: padding-box;
+		border-radius: var(--vxe-border-radius);
+		box-shadow: var(--box-shadow);
+		white-space: nowrap;
+	}
+	&-popper {
+		min-width: 150px;
+		font-size: var(--vxe-font-size);
+		z-index: 100;
+		@include popper($poptip-arrow, $poptip-arrow-width, $poptip-distance, $poptip-arrow-color);
+		&[x-placement^='top'] .sh-poptip-arrow:after {
+			content: ' ';
+			bottom: 1px;
+			margin-left: -$poptip-arrow-width;
+			border-bottom-width: 0;
+			border-top-width: $poptip-arrow-width;
+			border-top-color: #fff;
+		}
+		&[x-placement^='right'] .sh-poptip-arrow:after {
+			content: ' ';
+			left: 1px;
+			bottom: -$poptip-arrow-width;
+			border-left-width: 0;
+			border-right-width: $poptip-arrow-width;
+			border-right-color: #fff;
+		}
+		&[x-placement^='bottom'] .sh-poptip-arrow:after {
+			content: ' ';
+			top: 1px;
+			margin-left: -$poptip-arrow-width;
+			border-top-width: 0;
+			border-bottom-width: $poptip-arrow-width;
+			border-bottom-color: #fff;
+		}
+		&[x-placement^='left'] .sh-poptip-arrow:after {
+			content: ' ';
+			right: 1px;
+			border-right-width: 0;
+			border-left-width: $poptip-arrow-width;
+			border-left-color: #fff;
+			bottom: -$poptip-arrow-width;
+		}
+	}
+	&-arrow {
+		display: block;
+		width: 0;
+		height: 0;
+		position: absolute;
+		border-color: transparent;
+		border-style: solid;
+		border-width: 8px;
+		&:after {
+			display: block;
+			width: 0;
+			height: 0;
+			position: absolute;
+			border-color: transparent;
+			border-style: solid;
+			content: '';
+			border-width: 7px;
+		}
+	}
+	&-confirm &-popper {
+		max-width: 300px;
+	}
+	&-confirm &-inner {
+		white-space: normal;
+	}
+	&-confirm &-body {
+		padding: 12px 12px 8px;
+		.ivu-icon {
+			font-size: 16px;
+			color: var(--vxe-warning-color);
+			line-height: 18px;
+			position: absolute;
+		}
+
+		&-message {
+			padding-left: 20px;
+		}
+	}
+	&-confirm &-footer {
+		text-align: right;
+		padding: 8px 12px 12px;
+		button {
+			margin-left: 4px;
+		}
+	}
+}
+</style>

package/packages/components/global-components/sh-poptip/popper.js

@@ -0,0 +1,115 @@
+import { nextTick } from 'vue'
+import Popper from 'popper.js'
+
+export default {
+	emits: ['popper-show', 'popper-hide', 'created', 'update:modelValue'],
+	props: {
+		eventsEnabled: {
+			type: Boolean,
+			default: false
+		},
+		placement: {
+			type: String,
+			default: 'bottom'
+		},
+		boundariesPadding: {
+			type: Number,
+			default: 5
+		},
+		reference: Object,
+		popper: Object,
+		offset: {
+			default: 0
+		},
+		modelValue: {
+			type: Boolean,
+			default: false
+		},
+		transition: String,
+		options: {
+			type: Object,
+			default() {
+				return {
+					modifiers: {
+						computeStyle: {
+							gpuAcceleration: false
+						},
+						preventOverflow: {
+							boundariesElement: 'window'
+						}
+					}
+				}
+			}
+		}
+	},
+	data() {
+		return {
+			visible: this.modelValue
+		}
+	},
+	watch: {
+		modelValue: {
+			immediate: true,
+			handler(val) {
+				this.visible = val
+				this.$emit('update:modelValue', val)
+			}
+		},
+		visible(val) {
+			if (val) {
+				if (this.handleIndexIncrease) this.handleIndexIncrease() // just use for Poptip
+				this.updatePopper()
+				this.$emit('popper-show')
+			} else {
+				this.$emit('popper-hide')
+			}
+			this.$emit('update:modelValue', val)
+		}
+	},
+	methods: {
+		createPopper() {
+			if (!/^(top|bottom|left|right)(-start|-end)?$/g.test(this.placement)) {
+				return
+			}
+			const options = this.options
+			const popper = this.popper || this.$refs.popper
+			const reference = this.reference || this.$refs.reference
+
+			if (!popper || !reference) return
+
+			if (this.popperJS && this.popperJS.hasOwnProperty('destroy')) {
+				this.popperJS.destroy()
+			}
+			options.eventsEnabled = this.eventsEnabled
+
+			options.placement = this.placement
+
+			if (!options.modifiers.offset) {
+				options.modifiers.offset = {}
+			}
+			options.modifiers.offset.offset = this.offset
+			options.onCreate = () => {
+				nextTick(this.updatePopper)
+				this.$emit('created', this)
+			}
+
+			this.popperJS = new Popper(reference, popper, options)
+		},
+		updatePopper() {
+			this.popperJS ? this.popperJS.update() : this.createPopper()
+		},
+		doDestroy() {
+			if (this.visible) return
+			this.popperJS.destroy()
+			this.popperJS = null
+		}
+	},
+	updated() {
+		nextTick(() => this.updatePopper())
+	},
+	beforeUnmount() {
+		if (this.popperJS) {
+			this.popperJS.destroy()
+		}
+	}
+}