stellar-ui-v2 1.40.21 → 1.40.23

package/components/{ste-pate-container/ste-pate-container.vue → ste-page-container/ste-page-container.vue}

@@ -1,220 +1,220 @@
-<template>
-	<!-- #ifdef MP-WEIXIN -->
-	<page-container
-		v-if="useWxNative"
-		:show="show"
-		:duration="duration"
-		:z-index="zIndex"
-		:overlay="overlay"
-		:position="position"
-		:round="round"
-		:close-on-slide-down="closeOnSlideDown"
-		:overlay-style="overlayStyle"
-		:custom-style="customStyle"
-		:safe-area-inset-bottom="safeAreaInsetBottom"
-		@beforeenter="emitEvent('beforeenter', $event)"
-		@enter="emitEvent('enter', $event)"
-		@afterenter="emitEvent('afterenter', $event)"
-		@beforeleave="emitEvent('beforeleave', $event)"
-		@leave="emitEvent('leave', $event)"
-		@afterleave="emitEvent('afterleave', $event)"
-		@clickoverlay="onClickOverlay"
-	>
-		<slot></slot>
-	</page-container>
-
-	<ste-popup
-		v-else
-		:show.sync="innerShow"
-		:duration="duration"
-		:zIndex="zIndex"
-		:showMask="overlay"
-		:position="popupPosition"
-		:round="round"
-		:isMaskClick="overlay"
-		:showClose="false"
-		@clickMask="onClickOverlay"
-		@open-after="onPopupOpenAfter"
-	>
-		<view class="ste-pate-container-content" :class="{ 'safe-area-bottom': safeAreaInsetBottom && position === 'bottom' }" :style="customStyle">
-			<slot></slot>
-		</view>
-	</ste-popup>
-	<!-- #endif -->
-
-	<!-- #ifndef MP-WEIXIN -->
-	<ste-popup
-		:show.sync="innerShow"
-		:duration="duration"
-		:zIndex="zIndex"
-		:showMask="overlay"
-		:position="popupPosition"
-		:round="round"
-		:isMaskClick="overlay"
-		:showClose="false"
-		@clickMask="onClickOverlay"
-		@open-after="onPopupOpenAfter"
-	>
-		<view class="ste-pate-container-content" :class="{ 'safe-area-bottom': safeAreaInsetBottom && position === 'bottom' }" :style="customStyle">
-			<slot></slot>
-		</view>
-	</ste-popup>
-	<!-- #endif -->
-</template>
-
-<script>
-/**
- * ste-pate-container 页面容器
- * @description 微信小程序下使用原生 page-container，其他平台使用 ste-popup 兼容实现
- * @property {Boolean} show 是否显示容器
- * @property {Number} duration 动画时长，单位 ms
- * @property {Number} zIndex 层级
- * @property {Boolean} overlay 是否显示遮罩
- * @property {String} position 弹出位置，top/bottom/right/center
- * @property {Boolean} round 是否展示圆角
- * @property {Boolean} closeOnSlideDown 是否允许下滑关闭（仅微信小程序）
- * @property {String} overlayStyle 遮罩层样式（仅微信小程序）
- * @property {String} customStyle 容器样式
- * @property {Boolean} safeAreaInsetBottom 是否适配底部安全区
- */
-export default {
-	group: '基础组件',
-	title: 'PageContainer 页面容器',
-	name: 'ste-pate-container',
-	props: {
-		show: { type: [Boolean, null], default: false },
-		duration: { type: [Number, null], default: 300 },
-		zIndex: { type: [Number, String, null], default: 100 },
-		overlay: { type: [Boolean, null], default: true },
-		position: {
-			type: [String, null],
-			default: 'bottom',
-			validator(value) {
-				return ['top', 'bottom', 'right', 'center'].includes(value);
-			},
-		},
-		round: { type: [Boolean, null], default: false },
-		closeOnSlideDown: { type: [Boolean, null], default: false },
-		overlayStyle: { type: [String, null], default: '' },
-		customStyle: { type: [String, null], default: '' },
-		safeAreaInsetBottom: { type: [Boolean, null], default: false },
-	},
-	data() {
-		return {
-			innerShow: this.show,
-			leaveTimer: null,
-			useWxNative: false,
-		};
-	},
-	computed: {
-		popupPosition() {
-			if (['top', 'bottom', 'right', 'center'].includes(this.position)) {
-				return this.position;
-			}
-			return 'bottom';
-		},
-	},
-	watch: {
-		show(newVal) {
-			if (!this.useWxNative) {
-				if (this.innerShow !== newVal) {
-					this.innerShow = newVal;
-				}
-				this.triggerTransition(newVal);
-			}
-		},
-		innerShow(newVal) {
-			if (!this.useWxNative && newVal !== this.show) {
-				this.$emit('update:show', newVal);
-			}
-		},
-	},
-	beforeDestroy() {
-		this.clearTimers();
-		this.releaseWxNativeOwner();
-	},
-	created() {
-		this.initMode();
-		if (!this.useWxNative && this.show) {
-			this.triggerTransition(true);
-		}
-	},
-	methods: {
-		getGlobalScope() {
-			if (typeof globalThis !== 'undefined') return globalThis;
-			if (typeof global !== 'undefined') return global;
-			return {};
-		},
-		initMode() {
-			// #ifdef MP-WEIXIN
-			const scope = this.getGlobalScope();
-			if (!scope.__stePateContainerOwnerUid) {
-				scope.__stePateContainerOwnerUid = this._uid;
-				this.useWxNative = true;
-				return;
-			}
-			this.useWxNative = scope.__stePateContainerOwnerUid === this._uid;
-			// #endif
-			// #ifndef MP-WEIXIN
-			this.useWxNative = false;
-			// #endif
-		},
-		releaseWxNativeOwner() {
-			// #ifdef MP-WEIXIN
-			const scope = this.getGlobalScope();
-			if (scope.__stePateContainerOwnerUid === this._uid) {
-				scope.__stePateContainerOwnerUid = null;
-			}
-			// #endif
-		},
-		emitEvent(eventName, e) {
-			this.$emit(eventName, e);
-		},
-		onClickOverlay(e) {
-			this.$emit('clickoverlay', e);
-		},
-		onPopupOpenAfter(e) {
-			this.$emit('afterenter', e);
-		},
-		open() {
-			this.$emit('update:show', true);
-		},
-		close() {
-			this.$emit('update:show', false);
-		},
-		clearTimers() {
-			if (this.leaveTimer) {
-				clearTimeout(this.leaveTimer);
-				this.leaveTimer = null;
-			}
-		},
-		triggerTransition(show) {
-			this.clearTimers();
-			if (show) {
-				this.$emit('beforeenter');
-				this.$emit('enter');
-				return;
-			}
-			this.$emit('beforeleave');
-			this.$emit('leave');
-			this.leaveTimer = setTimeout(() => {
-				this.$emit('afterleave');
-				this.leaveTimer = null;
-			}, this.duration);
-		},
-	},
-};
-</script>
-
-<style lang="scss" scoped>
-.ste-pate-container-content {
-	width: 100%;
-	height: 100%;
-}
-
-.safe-area-bottom {
-	padding-bottom: constant(safe-area-inset-bottom);
-	padding-bottom: env(safe-area-inset-bottom);
-	box-sizing: border-box;
-}
-</style>
+<template>
+	<!-- #ifdef MP-WEIXIN -->
+	<page-container
+		v-if="useWxNative"
+		:show="show"
+		:duration="duration"
+		:z-index="zIndex"
+		:overlay="overlay"
+		:position="position"
+		:round="round"
+		:close-on-slide-down="closeOnSlideDown"
+		:overlay-style="overlayStyle"
+		:custom-style="customStyle"
+		:safe-area-inset-bottom="safeAreaInsetBottom"
+		@beforeenter="emitEvent('beforeenter', $event)"
+		@enter="emitEvent('enter', $event)"
+		@afterenter="emitEvent('afterenter', $event)"
+		@beforeleave="emitEvent('beforeleave', $event)"
+		@leave="emitEvent('leave', $event)"
+		@afterleave="emitEvent('afterleave', $event)"
+		@clickoverlay="onClickOverlay"
+	>
+		<slot></slot>
+	</page-container>
+
+	<ste-popup
+		v-else
+		:show.sync="innerShow"
+		:duration="duration"
+		:zIndex="zIndex"
+		:showMask="overlay"
+		:position="popupPosition"
+		:round="round"
+		:isMaskClick="overlay"
+		:showClose="false"
+		@clickMask="onClickOverlay"
+		@open-after="onPopupOpenAfter"
+	>
+		<view class="ste-page-container-content" :class="{ 'safe-area-bottom': safeAreaInsetBottom && position === 'bottom' }" :style="customStyle">
+			<slot></slot>
+		</view>
+	</ste-popup>
+	<!-- #endif -->
+
+	<!-- #ifndef MP-WEIXIN -->
+	<ste-popup
+		:show.sync="innerShow"
+		:duration="duration"
+		:zIndex="zIndex"
+		:showMask="overlay"
+		:position="popupPosition"
+		:round="round"
+		:isMaskClick="overlay"
+		:showClose="false"
+		@clickMask="onClickOverlay"
+		@open-after="onPopupOpenAfter"
+	>
+		<view class="ste-page-container-content" :class="{ 'safe-area-bottom': safeAreaInsetBottom && position === 'bottom' }" :style="customStyle">
+			<slot></slot>
+		</view>
+	</ste-popup>
+	<!-- #endif -->
+</template>
+
+<script>
+/**
+ * ste-page-container 页面容器
+ * @description 微信小程序下使用原生 page-container，其他平台使用 ste-popup 兼容实现
+ * @property {Boolean} show 是否显示容器
+ * @property {Number} duration 动画时长，单位 ms
+ * @property {Number} zIndex 层级
+ * @property {Boolean} overlay 是否显示遮罩
+ * @property {String} position 弹出位置，top/bottom/right/center
+ * @property {Boolean} round 是否展示圆角
+ * @property {Boolean} closeOnSlideDown 是否允许下滑关闭（仅微信小程序）
+ * @property {String} overlayStyle 遮罩层样式（仅微信小程序）
+ * @property {String} customStyle 容器样式
+ * @property {Boolean} safeAreaInsetBottom 是否适配底部安全区
+ */
+export default {
+	group: '基础组件',
+	title: 'PageContainer 页面容器',
+	name: 'ste-page-container',
+	props: {
+		show: { type: Boolean, default: false },
+		duration: { type: Number, default: 300 },
+		zIndex: { type: [Number, String], default: 100 },
+		overlay: { type: Boolean, default: true },
+		position: {
+			type: String,
+			default: 'bottom',
+			validator(value) {
+				return ['top', 'bottom', 'right', 'center'].includes(value);
+			},
+		},
+		round: { type: Boolean, default: false },
+		closeOnSlideDown: { type: Boolean, default: false },
+		overlayStyle: { type: String, default: '' },
+		customStyle: { type: String, default: '' },
+		safeAreaInsetBottom: { type: Boolean, default: false },
+	},
+	data() {
+		return {
+			innerShow: this.show,
+			leaveTimer: null,
+			useWxNative: false,
+		};
+	},
+	computed: {
+		popupPosition() {
+			if (['top', 'bottom', 'right', 'center'].includes(this.position)) {
+				return this.position;
+			}
+			return 'bottom';
+		},
+	},
+	watch: {
+		show(newVal) {
+			if (!this.useWxNative) {
+				if (this.innerShow !== newVal) {
+					this.innerShow = newVal;
+				}
+				this.triggerTransition(newVal);
+			}
+		},
+		innerShow(newVal) {
+			if (!this.useWxNative && newVal !== this.show) {
+				this.$emit('update:show', newVal);
+			}
+		},
+	},
+	beforeDestroy() {
+		this.clearTimers();
+		this.releaseWxNativeOwner();
+	},
+	created() {
+		this.initMode();
+		if (!this.useWxNative && this.show) {
+			this.triggerTransition(true);
+		}
+	},
+	methods: {
+		getGlobalScope() {
+			if (typeof globalThis !== 'undefined') return globalThis;
+			if (typeof global !== 'undefined') return global;
+			return {};
+		},
+		initMode() {
+			// #ifdef MP-WEIXIN
+			const scope = this.getGlobalScope();
+			if (!scope.__stePageContainerOwnerUid) {
+				scope.__stePageContainerOwnerUid = this._uid;
+				this.useWxNative = true;
+				return;
+			}
+			this.useWxNative = scope.__stePageContainerOwnerUid === this._uid;
+			// #endif
+			// #ifndef MP-WEIXIN
+			this.useWxNative = false;
+			// #endif
+		},
+		releaseWxNativeOwner() {
+			// #ifdef MP-WEIXIN
+			const scope = this.getGlobalScope();
+			if (scope.__stePageContainerOwnerUid === this._uid) {
+				scope.__stePageContainerOwnerUid = null;
+			}
+			// #endif
+		},
+		emitEvent(eventName, e) {
+			this.$emit(eventName, e);
+		},
+		onClickOverlay(e) {
+			this.$emit('clickoverlay', e);
+		},
+		onPopupOpenAfter(e) {
+			this.$emit('afterenter', e);
+		},
+		open() {
+			this.$emit('update:show', true);
+		},
+		close() {
+			this.$emit('update:show', false);
+		},
+		clearTimers() {
+			if (this.leaveTimer) {
+				clearTimeout(this.leaveTimer);
+				this.leaveTimer = null;
+			}
+		},
+		triggerTransition(show) {
+			this.clearTimers();
+			if (show) {
+				this.$emit('beforeenter');
+				this.$emit('enter');
+				return;
+			}
+			this.$emit('beforeleave');
+			this.$emit('leave');
+			this.leaveTimer = setTimeout(() => {
+				this.$emit('afterleave');
+				this.leaveTimer = null;
+			}, this.duration);
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.ste-page-container-content {
+	width: 100%;
+	height: 100%;
+}
+
+.safe-area-bottom {
+	padding-bottom: constant(safe-area-inset-bottom);
+	padding-bottom: env(safe-area-inset-bottom);
+	box-sizing: border-box;
+}
+</style>