sh-view 2.1.0 → 2.2.0

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

@@ -1,14 +1,14 @@
 <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>
+		<div ref="referenceRef" 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 v-show="visible" ref="popperRef" :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>
+								<sh-icon type="ios-help-circle"></sh-icon>
 								<div class="sh-poptip-body-message">
 									<slot name="title">{{ title }}</slot>
 								</div>
@@ -18,13 +18,13 @@
 								<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">
+						<div v-else class="sh-poptip-inner">
+							<div v-if="showTitle" ref="title" class="sh-poptip-title" :style="titleStyle">
 								<slot name="title">
 									<div class="sh-poptip-title-inner">{{ title }}</div>
 								</slot>
 							</div>
-							<div class="sh-poptip-body" :style="contentPaddingStyle">
+							<div class="sh-poptip-body" :style="contentStyle">
 								<div :class="contentClasses">
 									<slot name="content">
 										<div class="sh-poptip-body-content-inner">{{ content }}</div>
@@ -40,12 +40,20 @@
 </template>
 
 <script>
-import Popper from './popper'
+import { defineComponent, computed, onMounted, onUpdated, onBeforeUnmount, getCurrentInstance, ref, watch, nextTick } from 'vue'
 import { transferIndex, transferIncrease } from '../../../utils/transfer-queue'
-export default {
+import Popper from 'popper.js'
+const handleGetIndex = () => {
+	transferIncrease()
+	return transferIndex
+}
+export default defineComponent({
 	name: 'ShPoptip',
-	mixins: [Popper],
 	props: {
+		modelValue: {
+			type: Boolean,
+			default: false
+		},
 		trigger: {
 			type: String,
 			default: 'click' // 'click', 'focus', 'hover'
@@ -64,6 +72,9 @@ export default {
 		width: {
 			type: [String, Number]
 		},
+		height: {
+			type: [String, Number]
+		},
 		confirm: {
 			type: Boolean,
 			default: false
@@ -99,149 +110,163 @@ export default {
 		},
 		transferClassName: {
 			type: String
+		},
+		eventsEnabled: {
+			type: Boolean,
+			default: false
+		},
+		boundariesPadding: {
+			type: Number,
+			default: 5
+		},
+		reference: Object,
+		popper: Object,
+		offset: {
+			type: Number,
+			default: 0
+		},
+		transition: String,
+		options: {
+			type: Object,
+			default() {
+				return {
+					modifiers: {
+						computeStyle: {
+							gpuAcceleration: false
+						},
+						preventOverflow: {
+							boundariesElement: 'window'
+						}
+					}
+				}
+			}
 		}
 	},
-	emits: ['confirm', 'cancel'],
-	data() {
-		return {
-			showTitle: true,
-			isInput: false,
-			disableCloseUnderTransfer: false, // transfer 模式下，点击 slot 也会触发关闭
-			tIndex: this.handleGetIndex()
-		}
-	},
-	computed: {
-		classes() {
+	emits: ['update:modelValue', 'popper-show', 'popper-hide', 'created', 'confirm', 'cancel'],
+	setup(props, context) {
+		const { emit, slots } = context
+		const popperRef = ref()
+		const referenceRef = ref()
+		const visible = ref(props.modelValue)
+		const showTitle = ref(true)
+		const isInput = ref(false)
+		const disableCloseUnderTransfer = ref(false)
+		const tIndex = ref(handleGetIndex())
+		let enterTimer = null
+		let popperJS = null
+
+		const classes = computed(() => {
 			return {
-				'sh-poptip-confirm': this.confirm
+				'sh-poptip-confirm': props.confirm
 			}
-		},
-		popperClasses() {
+		})
+		const popperClasses = computed(() => {
 			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
+				'sh-poptip-confirm': props.transfer && props.confirm,
+				'sh-poptip-transfer': props.transfer,
+				[`${props.popperClass}`]: props.popperClass,
+				[`${props.transferClassName}`]: props.transferClassName
 			}
-		},
-		styles() {
-			let style = {}
-			if (this.width) {
-				style.width = `${this.width}px`
+		})
+		const styles = computed(() => {
+			let style = {
+				width: `${props.width}px`
 			}
-			if (this.transfer) style['z-index'] = 1060 + this.tIndex
+			if (props.transfer) style['z-index'] = 1060 + tIndex.value
 			return style
-		},
-		contentClasses() {
+		})
+		const contentClasses = computed(() => {
 			return {
 				'sh-poptip-body-content': true,
-				'sh-poptip-body-content-word-wrap': this.wordWrap
+				'sh-poptip-body-content-word-wrap': props.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
+		})
+		const titleStyle = computed(() => {
+			return {
+				padding: props.padding
+			}
+		})
+		const contentStyle = computed(() => {
+			return {
+				height: `${props.height}px`,
+				padding: props.padding
+			}
+		})
+
+		const handleClick = () => {
+			if (props.disabled) return
+			if (props.confirm) {
+				visible.value = !visible.value
 				return true
 			}
-			if (this.trigger !== 'click') {
+			if (props.trigger !== 'click') {
 				return false
 			}
-			this.visible = !this.visible
-		},
-		handleTransferClick() {
-			if (this.transfer) this.disableCloseUnderTransfer = true
-		},
-		handleClose() {
-			if (this.disableCloseUnderTransfer) {
-				this.disableCloseUnderTransfer = false
+			visible.value = !visible.value
+		}
+		const handleTransferClick = () => {
+			if (props.transfer) disableCloseUnderTransfer.value = true
+		}
+		const handleClose = () => {
+			if (disableCloseUnderTransfer.value) {
+				disableCloseUnderTransfer.value = false
 				return false
 			}
-			if (this.confirm) {
-				this.visible = false
+			if (props.confirm) {
+				visible.value = false
 				return true
 			}
-			if (this.trigger !== 'click') {
+			if (props.trigger !== 'click') {
 				return false
 			}
-			this.visible = false
-		},
-		handleFocus(fromInput = true) {
-			if (this.disabled) return
-
-			if (this.trigger !== 'focus' || this.confirm || (this.isInput && !fromInput)) {
+			visible.value = false
+		}
+		const handleFocus = (fromInput = true) => {
+			if (props.disabled) return
+			if (props.trigger !== 'focus' || props.confirm || (isInput.value && !fromInput)) {
 				return false
 			}
-			this.visible = true
-		},
-		handleBlur(fromInput = true) {
-			if (this.trigger !== 'focus' || this.confirm || (this.isInput && !fromInput)) {
+			visible.value = true
+		}
+		const handleBlur = (fromInput = true) => {
+			if (props.trigger !== 'focus' || props.confirm || (isInput.value && !fromInput)) {
 				return false
 			}
-			this.visible = false
-		},
-		handleMouseenter() {
-			if (this.disabled) return
-			if (this.trigger !== 'hover' || this.confirm) {
+			visible.value = false
+		}
+		const handleMouseenter = () => {
+			if (props.disabled) return
+			if (props.trigger !== 'hover' || props.confirm) {
 				return false
 			}
-			if (this.enterTimer) clearTimeout(this.enterTimer)
-			this.enterTimer = setTimeout(() => {
-				this.visible = true
+			if (enterTimer) clearTimeout(enterTimer)
+			enterTimer = setTimeout(() => {
+				visible.value = true
 			}, 100)
-		},
-		handleMouseleave() {
-			if (this.trigger !== 'hover' || this.confirm) {
+		}
+		const handleMouseleave = () => {
+			if (props.trigger !== 'hover' || props.confirm) {
 				return false
 			}
-			if (this.enterTimer) {
-				clearTimeout(this.enterTimer)
-				this.enterTimer = setTimeout(() => {
-					this.visible = false
+			if (enterTimer) {
+				clearTimeout(enterTimer)
+				enterTimer = setTimeout(() => {
+					visible.value = 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')
+		}
+		const cancel = () => {
+			visible.value = false
+			emit('cancel')
+		}
+		const ok = () => {
+			visible.value = false
+			emit('confirm')
+		}
+		const getInputChildren = () => {
+			const $input = referenceRef.value.querySelectorAll('input')
+			const $textarea = referenceRef.value.querySelectorAll('textarea')
 			let $children = null
 			if ($input.length) {
 				$children = $input[0]
@@ -249,16 +274,108 @@ export default {
 				$children = $textarea[0]
 			}
 			return $children
-		},
-		handleGetIndex() {
-			transferIncrease()
-			return transferIndex
-		},
-		handleIndexIncrease() {
-			this.tIndex = this.handleGetIndex()
+		}
+		const handleIndexIncrease = () => {
+			tIndex.value = handleGetIndex()
+		}
+		const createPopper = () => {
+			if (!/^(top|bottom|left|right)(-start|-end)?$/g.test(props.placement)) {
+				return
+			}
+			const options = props.options
+			const popper = props.popper || popperRef.value
+			const reference = referenceRef.value
+			if (!popper || !reference) return
+			if (popperJS && popperJS.hasOwnProperty('destroy')) {
+				popperJS.destroy()
+			}
+			options.eventsEnabled = props.eventsEnabled
+			options.placement = props.placement
+			if (!options.modifiers.offset) {
+				options.modifiers.offset = {}
+			}
+			options.modifiers.offset.offset = props.offset
+			options.onCreate = () => {
+				nextTick(updatePopper)
+				emit('created')
+			}
+			popperJS = new Popper(reference, popper, options)
+		}
+		const updatePopper = () => {
+			popperJS ? popperJS.update() : createPopper()
+		}
+		watch(
+			() => props.modelValue,
+			val => {
+				visible.value = val
+				emit('update:modelValue', val)
+			}
+		)
+		watch(
+			() => visible.value,
+			val => {
+				if (val) {
+					if (handleIndexIncrease) handleIndexIncrease() // just use for Poptip
+					updatePopper()
+					emit('popper-show')
+				} else {
+					emit('popper-hide')
+				}
+				emit('update:modelValue', val)
+			}
+		)
+		onMounted(() => {
+			if (!props.confirm) {
+				showTitle.value = slots.title !== undefined || props.title
+			}
+			if (props.trigger === 'focus') {
+				nextTick(() => {
+					const $children = getInputChildren()
+					if ($children) {
+						isInput.value = true
+						$children.addEventListener('focus', handleFocus, false)
+						$children.addEventListener('blur', handleBlur, false)
+					}
+				})
+			}
+		})
+		onUpdated(() => {
+			nextTick(() => updatePopper())
+		})
+		onBeforeUnmount(() => {
+			if (popperJS) {
+				popperJS.destroy()
+			}
+			const $children = getInputChildren()
+			if ($children) {
+				$children.removeEventListener('focus', handleFocus, false)
+				$children.removeEventListener('blur', handleBlur, false)
+			}
+		})
+
+		return {
+			referenceRef,
+			popperRef,
+			classes,
+			visible,
+			popperClasses,
+			styles,
+			titleStyle,
+			contentStyle,
+			contentClasses,
+			showTitle,
+			handleClose,
+			handleMouseenter,
+			handleMouseleave,
+			handleClick,
+			handleFocus,
+			handleBlur,
+			handleTransferClick,
+			cancel,
+			ok
 		}
 	}
-}
+})
 </script>
 
 <style scoped lang="scss">
@@ -374,8 +491,8 @@ $poptip-arrow-color: hsla(0, 0%, 85%, 0.5);
 	}
 	&-body {
 		padding: 8px 16px;
+		overflow: auto;
 		&-content {
-			overflow: auto;
 			&-word-wrap {
 				white-space: pre-wrap;
 				text-align: justify;
@@ -458,10 +575,10 @@ $poptip-arrow-color: hsla(0, 0%, 85%, 0.5);
 	}
 	&-confirm &-body {
 		padding: 12px 12px 8px;
-		.ivu-icon {
+		.sh-icon {
 			font-size: 16px;
 			color: var(--vxe-warning-color);
-			line-height: 18px;
+			line-height: 20px;
 			position: absolute;
 		}
 

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

@@ -18,9 +18,9 @@
 		</span>
 	</div>
 </template>
-
 <script>
-export default {
+import { defineComponent, computed, onBeforeMount, getCurrentInstance, ref, watch } from 'vue'
+export default defineComponent({
 	name: 'ShProgress',
 	props: {
 		percent: {
@@ -56,94 +56,96 @@ export default {
 		}
 	},
 	emits: ['status-change'],
-	data() {
-		return {
-			currentStatus: this.status
-		}
-	},
-	computed: {
-		isStatus() {
-			return this.currentStatus === 'wrong' || this.currentStatus === 'success'
-		},
-		statusIcon() {
-			let type = ''
-			switch (this.currentStatus) {
-				case 'wrong':
-					type = 'ios-close-circle'
-					break
-				case 'success':
-					type = 'ios-checkmark-circle'
-					break
+	setup(props, context) {
+		const { emit, slots } = context
+		const currentStatus = ref(props.status)
+
+		const isStatus = computed(() => {
+			return ['wrong', 'success'].includes(currentStatus.value)
+		})
+		const statusIcon = computed(() => {
+			if (currentStatus.value === 'wrong') {
+				return 'ios-close-circle'
+			} else if (currentStatus.value === 'ios-checkmark-circle') {
+				return 'ios-close-circle'
 			}
-			return type
-		},
-		bgStyle() {
-			const style = this.vertical
+			return ''
+		})
+		const bgStyle = computed(() => {
+			const style = props.vertical
 				? {
-						height: `${this.percent}%`,
-						width: `${this.strokeWidth}px`
+						height: `${props.percent}%`,
+						width: `${props.strokeWidth}px`
 				  }
 				: {
-						width: `${this.percent}%`,
-						height: `${this.strokeWidth}px`
+						width: `${props.percent}%`,
+						height: `${props.strokeWidth}px`
 				  }
-			if (this.strokeColor) {
-				if (typeof this.strokeColor === 'string') {
-					style['background-color'] = this.strokeColor
+			if (props.strokeColor) {
+				if (typeof props.strokeColor === 'string') {
+					style['background-color'] = props.strokeColor
 				} else {
-					style['background-image'] = `linear-gradient(to right, ${this.strokeColor[0]} 0%, ${this.strokeColor[1]} 100%)`
+					style['background-image'] = `linear-gradient(to right, ${props.strokeColor[0]} 0%, ${props.strokeColor[1]} 100%)`
 				}
 			}
 			return style
-		},
-		successBgStyle() {
-			return this.vertical
+		})
+		const successBgStyle = computed(() => {
+			return props.vertical
 				? {
-						height: `${this.successPercent}%`,
-						width: `${this.strokeWidth}px`
+						height: `${props.successPercent}%`,
+						width: `${props.strokeWidth}px`
 				  }
 				: {
-						width: `${this.successPercent}%`,
-						height: `${this.strokeWidth}px`
+						width: `${props.successPercent}%`,
+						height: `${props.strokeWidth}px`
 				  }
-		},
-		wrapClasses() {
+		})
+		const wrapClasses = computed(() => {
 			return {
-				[`${this.currentStatus}`]: true,
-				[`show-info`]: !this.hideInfo && !this.textInside,
-				[`vertical`]: this.vertical
-			}
-		}
-	},
-	watch: {
-		percent(val, oldVal) {
-			if (val < oldVal) {
-				this.handleStatus(true)
-			} else {
-				this.handleStatus()
+				[`${currentStatus.value}`]: true,
+				[`show-info`]: !props.hideInfo && !props.textInside,
+				[`vertical`]: props.vertical
 			}
-		},
-		status(val) {
-			this.currentStatus = val
-		}
-	},
-	created() {
-		this.handleStatus()
-	},
-	methods: {
-		handleStatus(isDown) {
+		})
+
+		const handleStatus = isDown => {
 			if (isDown) {
-				this.currentStatus = 'normal'
-				this.$emit('status-change', 'normal')
+				currentStatus.value = 'normal'
+				emit('status-change', 'normal')
 			} else {
-				if (parseInt(this.percent, 10) === 100) {
-					this.currentStatus = 'success'
-					this.$emit('status-change', 'success')
+				if (parseInt(props.percent, 10) === 100) {
+					currentStatus.value = 'success'
+					emit('status-change', 'success')
 				}
 			}
 		}
+
+		onBeforeMount(() => {
+			handleStatus()
+		})
+		watch(
+			() => props.percent,
+			(val, oldVal) => {
+				handleStatus(val < oldVal)
+			}
+		)
+		watch(
+			() => props.status,
+			val => {
+				currentStatus.value = val
+			}
+		)
+
+		return {
+			wrapClasses,
+			bgStyle,
+			successBgStyle,
+			isStatus,
+			statusIcon
+		}
 	}
-}
+})
 </script>
 
 <style scoped lang="scss">