@zfqh/uview-x 0.0.0-stage → 0.0.1

package/components/uv-popup/props.ts

@@ -0,0 +1,101 @@
+// @ts-nocheck
+
+import config from '../../utils/config';
+
+const props = {
+  // 弹出层类型，可选值，top: 顶部弹出层；bottom：底部弹出层；center：全屏弹出层
+  // message: 消息提示 ; dialog : 对话框
+  mode: {
+    type: String,
+    default: 'center',
+  },
+  // 动画时长，单位ms
+  duration: {
+    type: [String, Number],
+    default: 300,
+  },
+  // 层级（H5 与上游一致使用 997，弹层位于 H5 导航栏之下；App/小程序使用 10075）
+  zIndex: {
+    type: [String, Number],
+    default: 10075,
+  },
+  bgColor: {
+    type: String,
+    default: '#ffffff',
+  },
+  safeArea: {
+    type: Boolean,
+    default: true,
+  },
+  // 是否显示遮罩
+  overlay: {
+    type: Boolean,
+    default: true,
+  },
+  // 点击遮罩是否关闭弹窗
+  closeOnClickOverlay: {
+    type: Boolean,
+    default: true,
+  },
+  // 遮罩的透明度，0-1之间
+  overlayOpacity: {
+    type: [Number, String],
+    default: 0.4,
+  },
+  // 自定义遮罩的样式
+  overlayStyle: {
+    type: [Object, String],
+    default: '',
+  },
+  // 是否为iPhoneX留出底部安全距离
+  safeAreaInsetBottom: {
+    type: Boolean,
+    default: true,
+  },
+  // 是否留出顶部安全距离（状态栏高度）
+  safeAreaInsetTop: {
+    type: Boolean,
+    default: false,
+  },
+  // 是否显示关闭图标
+  closeable: {
+    type: Boolean,
+    default: false,
+  },
+  // 自定义关闭图标位置，top-left为左上角，top-right为右上角，bottom-left为左下角，bottom-right为右下角
+  closeIconPos: {
+    type: String,
+    default: 'top-right',
+  },
+  // 关闭图标颜色
+  closeIconColor: {
+    type: String,
+    default: '#909399',
+  },
+  // 关闭图标大小
+  closeIconSize: {
+    type: [String, Number],
+    default: 18,
+  },
+  // mode=center，也即中部弹出时，是否使用缩放模式
+  zoom: {
+    type: Boolean,
+    default: true,
+  },
+  round: {
+    type: [Number, String],
+    default: 8,
+  },
+  customStyle: {
+    type: [Object, String],
+    default: () => ({}),
+  },
+  customClass: {
+    type: String,
+    default: '',
+  },
+
+  ...config.props.popup,
+};
+
+export default props;

package/components/uv-popup/uv-popup.vue

@@ -0,0 +1,371 @@
+<template>
+	<view
+		v-if="showPopup"
+		class="uv-popup"
+		:style="[{ zIndex: p.zIndex }]"
+		@touchmove="noop"
+	>
+		<view @touchstart="touchstart">
+			<!-- 遮罩层 -->
+			<uv-overlay
+				v-if="maskShow && p.overlay"
+				:show="showTrans"
+				:duration="p.duration"
+				:custom-style="p.overlayStyle"
+				:opacity="p.overlayOpacity"
+				:z-index="p.zIndex"
+				@click="onTap"
+			></uv-overlay>
+			<uv-transition
+				:mode="ani"
+				:custom-style="transitionStyle"
+				:duration="p.duration"
+				:show="showTrans"
+				@click="onTap"
+			>
+				<view
+					class="uv-popup__content"
+					:class="['uv-popup__content--' + layoutMode, p.customClass]"
+					:style="[contentStyle]"
+					@click="clear"
+				>
+					<uv-status-bar v-if="p.safeAreaInsetTop"></uv-status-bar>
+					<slot />
+					<uv-safe-bottom v-if="p.safeAreaInsetBottom"></uv-safe-bottom>
+					<view
+						v-if="p.closeable"
+						class="uv-popup__close"
+						:class="['uv-popup__close--' + p.closeIconPos]"
+						hover-class="uv-popup__close--hover"
+						:hover-stay-time="150"
+						@tap="close"
+					>
+						<slot name="close">
+							<uv-icon
+								name="close"
+								:color="p.closeIconColor"
+								:size="p.closeIconSize"
+								:bold="true"
+							></uv-icon>
+						</slot>
+					</view>
+				</view>
+			</uv-transition>
+		</view>
+	</view>
+</template>
+
+<script setup lang="ts">
+	import { computed, onMounted, onUnmounted, ref } from 'vue'
+	import { $uv, platform } from '../../utils'
+	import props from './props'
+	import { preventEvent } from '../../utils/compat'
+
+	defineOptions({
+		name: 'uv-popup',
+		// #ifdef UNI-APP-X
+		styleIsolation: 'app-and-page',
+		// #endif
+		virtualHost: true,
+	})
+
+	/**
+	 * PopUp 弹出层
+	 * @description 弹出层组件，用于解决遮罩弹层的问题，通过 ref 调用 open()/close() 控制显隐
+	 * @tutorial https://www.uvui.cn/components/popup.html
+	 * @property {String}	mode				弹出方式：top / bottom / center / left / right（默认 center）
+	 * @property {Number}	duration			动画时长，默认 300
+	 * @property {Boolean}	overlay				是否显示遮罩，默认 true
+	 * @property {Boolean}	overlayOpacity		遮罩透明度，默认 0.4
+	 * @property {Object}	overlayStyle		遮罩自定义样式
+	 * @property {Boolean}	closeOnClickOverlay	蒙版点击是否关闭弹窗，默认 true
+	 * @property {Number | String} zIndex		弹出层的层级
+	 * @property {Boolean}	safeAreaInsetTop	是否留出顶部安全区（状态栏高度），默认 false
+	 * @property {Boolean}	safeAreaInsetBottom	是否为留出底部安全区适配，默认 true
+	 * @property {Boolean}	closeable			是否显示关闭图标，默认 false
+	 * @property {String}	closeIconPos		自定义关闭图标位置：top-left / top-right / bottom-left / bottom-right
+	 * @property {String}	closeIconColor		关闭图标颜色，默认 #909399
+	 * @property {String | Number} closeIconSize 关闭图标大小，默认 18
+	 * @property {Boolean}	zoom				mode=center 时是否开启缩放，默认 true
+	 * @property {String}	bgColor				主窗口背景色，默认 #ffffff
+	 * @property {Number | String} round		圆角值，仅对 mode=top/bottom/center 有效
+	 * @property {Object}	customStyle			内容区自定义样式
+	 * @event {Function} change	打开/关闭弹窗触发，e={show: true | false, type}
+	 * @event {Function} maskClick	点击遮罩触发
+	 * @event {Function} close	关闭弹窗触发
+	 * @example <uv-popup ref="popup" mode="bottom"><text>内容</text></uv-popup>
+	 */
+	const p = defineProps(props)
+
+	const emit = defineEmits(['change', 'maskClick', 'close'])
+
+	// 兼容旧版的 type 别名（message->top、dialog->center、share->bottom）
+	const innerType = ['top', 'center', 'bottom', 'left', 'right', 'message', 'dialog', 'share']
+	const getLayoutMode = (mode: string): string => {
+		if (mode === 'message') return 'top'
+		if (mode === 'dialog') return 'center'
+		if (mode === 'share') return 'bottom'
+		return mode
+	}
+
+	const showPopup = ref(false)
+	const showTrans = ref(false)
+	const maskShow = ref(true)
+	const layoutMode = ref('center')
+	const clearPropagation = ref(false)
+	let closeTimer: any = null
+
+	const bg = computed(() => {
+		if (p.bgColor === '' || p.bgColor === 'none' || $uv.getPx(p.round) > 0) {
+			return 'transparent'
+		}
+		return p.bgColor
+	})
+
+	const contentStyle = computed(() => {
+		const style: any = {}
+		if (p.bgColor) {
+			style.backgroundColor = bg.value
+		}
+		if (p.round) {
+			const value = $uv.addUnit(p.round)
+			const mode = layoutMode.value
+			style.backgroundColor = p.bgColor
+			if (mode === 'top') {
+				style.borderBottomLeftRadius = value
+				style.borderBottomRightRadius = value
+			} else if (mode === 'bottom') {
+				style.borderTopLeftRadius = value
+				style.borderTopRightRadius = value
+			} else if (mode === 'center') {
+				style.borderTopLeftRadius = value
+				style.borderTopRightRadius = value
+				style.borderBottomLeftRadius = value
+				style.borderBottomRightRadius = value
+			}
+		}
+		return $uv.deepMerge(style, $uv.addStyle(p.customStyle))
+	})
+
+	const ani = computed<string[]>(() => {
+		const mode = layoutMode.value
+		if (mode === 'top') return ['slide-top']
+		if (mode === 'bottom') return ['slide-bottom']
+		if (mode === 'left') return ['slide-left']
+		if (mode === 'right') return ['slide-right']
+		return p.zoom ? ['zoom-in', 'fade'] : ['fade']
+	})
+
+	/** Web 端使用安全区 CSS 变量避开模拟导航栏/底部 tabbar；App/小程序由原生页面区域约束 */
+	const webOffset = (dir: string): any => {
+		let value: any = 0
+		// #ifdef WEB || H5
+		value = 'var(--uni-safe-area-inset-' + dir + ', 0px)'
+		// #endif
+		return value
+	}
+
+	const transitionStyle = computed(() => {
+		const mode = layoutMode.value
+		const style: any = {
+			position: 'fixed',
+			zIndex: p.zIndex
+		}
+		if (mode === 'top') {
+			style.left = webOffset('left')
+			style.right = webOffset('right')
+			style.top = webOffset('top')
+			style.backgroundColor = bg.value
+		} else if (mode === 'bottom') {
+			style.left = webOffset('left')
+			style.right = webOffset('right')
+			style.bottom = webOffset('bottom')
+			style.backgroundColor = bg.value
+		} else if (mode === 'center') {
+			style.left = webOffset('left')
+			style.right = webOffset('right')
+			style.top = webOffset('top')
+			style.bottom = webOffset('bottom')
+			style.display = 'flex'
+			style.flexDirection = 'column'
+			style.justifyContent = 'center'
+			style.alignItems = 'center'
+		} else if (mode === 'left') {
+			style.left = webOffset('left')
+			style.top = webOffset('top')
+			style.bottom = webOffset('bottom')
+			style.backgroundColor = bg.value
+			style.display = 'flex'
+			style.flexDirection = 'column'
+		} else if (mode === 'right') {
+			style.right = webOffset('right')
+			style.top = webOffset('top')
+			style.bottom = webOffset('bottom')
+			style.backgroundColor = bg.value
+			style.display = 'flex'
+			style.flexDirection = 'column'
+		}
+		return style
+	})
+
+	const noop = () => {}
+
+	const touchstart = () => {
+		clearPropagation.value = false
+	}
+
+	const clear = (e: any) => {
+		preventEvent(e)
+		clearPropagation.value = true
+	}
+
+	// #ifdef WEB || H5
+	const setBodyOverflow = (hidden: boolean) => {
+		const body = document.body
+		if (body && body.style) {
+			body.style.overflow = hidden ? 'hidden' : 'visible'
+		}
+	}
+
+	const keypressHandler = (event: any) => {
+		if (!showPopup.value || !maskShow.value) return
+		const key = event ? String(event.key || '') : ''
+		if (key === 'Escape' || key === 'Esc') {
+			onTap()
+		}
+	}
+
+	onMounted(() => {
+		document.addEventListener('keyup', keypressHandler)
+	})
+	// #endif
+
+	const clearCloseTimer = () => {
+		if (closeTimer) {
+			clearTimeout(closeTimer)
+			closeTimer = null
+		}
+	}
+
+	const close = () => {
+		if (!showTrans.value) return
+		showTrans.value = false
+		emit('close')
+		emit('change', {
+			show: false,
+			type: p.mode
+		})
+		clearCloseTimer()
+		const duration = Number(p.duration) || 300
+		closeTimer = setTimeout(() => {
+			showPopup.value = false
+			closeTimer = null
+		}, duration)
+		// #ifdef WEB || H5
+		setBodyOverflow(false)
+		// #endif
+	}
+
+	const open = (type?: string) => {
+		// 处理快速打开关闭的情况
+		if (showPopup.value) return
+		let direction: string = type || ''
+		if (!(direction && innerType.indexOf(direction) > -1)) {
+			direction = p.mode
+		}
+		if (innerType.indexOf(direction) === -1) {
+			$uv.error('缺少类型：' + direction)
+			return
+		}
+		layoutMode.value = getLayoutMode(direction)
+		showPopup.value = true
+		showTrans.value = true
+		// #ifdef WEB || H5
+		setBodyOverflow(true)
+		// #endif
+		emit('change', {
+			show: true,
+			type: direction
+		})
+	}
+
+	const closeMask = () => {
+		maskShow.value = false
+	}
+
+	const onTap = () => {
+		if (clearPropagation.value) {
+			// 处理事件冒泡导致的误关闭
+			clearPropagation.value = false
+			return
+		}
+		emit('maskClick')
+		if (!p.closeOnClickOverlay) return
+		close()
+	}
+
+	onUnmounted(() => {
+		clearCloseTimer()
+		// #ifdef WEB || H5
+		document.removeEventListener('keyup', keypressHandler)
+		setBodyOverflow(false)
+		// #endif
+	})
+
+	defineExpose({
+		open,
+		close,
+		closeMask
+	})
+</script>
+
+<style lang="scss">
+	@import '../../styles/components.scss';
+
+	.uv-popup {
+		position: fixed;
+		/* #ifndef APP-NVUE */
+		z-index: 99;
+		/* #endif */
+	}
+
+	.uv-popup__content {
+		/* #ifndef APP-NVUE */
+		overflow: hidden;
+		/* #endif */
+		position: relative;
+	}
+
+	.uv-popup__content--left,
+	.uv-popup__content--right {
+		flex: 1;
+	}
+
+	.uv-popup__close {
+		position: absolute;
+	}
+
+	.uv-popup__close--hover {
+		opacity: 0.4;
+	}
+
+	.uv-popup__close--top-left {
+		top: 15px;
+		left: 15px;
+	}
+
+	.uv-popup__close--top-right {
+		top: 15px;
+		right: 15px;
+	}
+
+	.uv-popup__close--bottom-left {
+		bottom: 15px;
+		left: 15px;
+	}
+
+	.uv-popup__close--bottom-right {
+		right: 15px;
+		bottom: 15px;
+	}
+</style>

package/components/uv-safe-bottom/props.ts

@@ -0,0 +1,18 @@
+// @ts-nocheck
+
+import config from '../../utils/config';
+
+const props = {
+  customStyle: {
+    type: [Object, String],
+    default: () => ({}),
+  },
+  customClass: {
+    type: String,
+    default: '',
+  },
+
+  ...config.props.safeBottom,
+};
+
+export default props;

package/components/uv-safe-bottom/uv-safe-bottom.vue

@@ -0,0 +1,120 @@
+<template>
+	<view
+		class="uv-safe-bottom"
+		:class="[p.customClass]"
+		:style="[safeBottomStyle]"
+	></view>
+</template>
+
+<script setup lang="ts">
+	import { computed, onMounted, ref } from 'vue'
+	import { $uv } from '../../utils'
+	import props from './props'
+
+
+	defineOptions({
+		name: 'uv-safe-bottom',
+		// #ifdef UNI-APP-X
+		styleIsolation: 'app-and-page',
+		// #endif
+		virtualHost: true,
+	})
+
+	/**
+	 * SafeBottom 底部安全区
+	 * @description 针对 iPhone X 等底部带指示条的机型做底部安全区适配。
+	 * App 蒸汽模式使用 uni.getWindowInfo() 的 safeAreaInsets 计算占位高度，
+	 * Web / 小程序的 env() 作为兜底。
+	 * @tutorial https://www.uvui.cn/components/safeAreaInset.html
+	 * @property {Object}	customStyle	定义需要用到的外部样式
+	 * @property {String}	customClass	自定义类名
+	 * @example <uv-safe-bottom></uv-safe-bottom>
+	 */
+	const p = defineProps(props)
+
+	// uni-app x：窗口信息用 getWindowInfo()、设备信息用 getDeviceInfo()；
+	// 旧基座缺字段时回退 getSystemInfoSync()，兼容 safeArea 坐标与 safeAreaInsets 的字段差异。
+	const systemInfo = ref<any>({})
+	const readSystemInfo = () => {
+		const info: any = {}
+		try {
+			const windowInfo: any = uni.getWindowInfo()
+			info.safeAreaInsets = windowInfo.safeAreaInsets
+			info.safeArea = windowInfo.safeArea
+			info.screenHeight = windowInfo.screenHeight
+			info.statusBarHeight = windowInfo.statusBarHeight
+		} catch (e) {}
+		try {
+			const deviceInfo: any = uni.getDeviceInfo()
+			info.osName = deviceInfo.osName
+			info.deviceType = deviceInfo.deviceType
+		} catch (e) {}
+		if (info.safeAreaInsets === undefined || info.safeArea === undefined) {
+			try {
+				const legacyInfo: any = uni.getSystemInfoSync()
+				if (info.safeAreaInsets === undefined) info.safeAreaInsets = legacyInfo.safeAreaInsets
+				if (info.safeArea === undefined) info.safeArea = legacyInfo.safeArea
+				if (info.screenHeight === undefined) info.screenHeight = legacyInfo.screenHeight
+				if (info.statusBarHeight === undefined) info.statusBarHeight = legacyInfo.statusBarHeight
+			} catch (e) {}
+		}
+		systemInfo.value = info
+	}
+	readSystemInfo()
+
+	onMounted(() => {
+		readSystemInfo()
+	})
+
+	/** 底部安全区高度：优先 safeAreaInsets.bottom，App 端用 safeArea 坐标换算兜底 */
+	const safeBottomHeight = computed(() => {
+		const info = systemInfo.value || {}
+		const insets = info.safeAreaInsets
+		if (insets && typeof insets.bottom === 'number' && insets.bottom > 0) {
+			return insets.bottom
+		}
+		// #ifdef APP || MP
+		// 旧 API 的 safeArea 是屏幕坐标，需要 screenHeight - safeArea.bottom 换算成安全区高度
+		const safeArea = info.safeArea
+		const screenHeight = Number(info.screenHeight)
+		if (safeArea && screenHeight > 0 && safeArea.bottom > 0) {
+			const bottom = screenHeight - Number(safeArea.bottom)
+			if (bottom > 0) return bottom
+		}
+		// #endif
+		return 0
+	})
+
+	const safeBottomStyle = computed(() => {
+		const style: any = {}
+		const height = safeBottomHeight.value
+		if (height > 0) {
+			style.height = $uv.addUnit(height, 'px')
+		}
+		return $uv.deepMerge(style, $uv.addStyle(p.customStyle))
+	})
+</script>
+
+<style lang="scss">
+	@import '../../styles/components.scss';
+
+	.uv-safe-bottom {
+		/* #ifndef APP-NVUE */
+		width: 100%;
+		flex-shrink: 0;
+		/* #endif */
+	}
+
+	/* #ifdef APP && !APP-NVUE */
+	.uv-safe-bottom {
+		height: var(--uni-safe-area-inset-bottom, 0px);
+	}
+	/* #endif */
+
+	/* #ifdef WEB || H5 || MP */
+	.uv-safe-bottom {
+		height: constant(safe-area-inset-bottom);
+		height: env(safe-area-inset-bottom);
+	}
+	/* #endif */
+</style>

package/components/uv-status-bar/props.ts

@@ -0,0 +1,22 @@
+// @ts-nocheck
+
+import config from '../../utils/config';
+
+const props = {
+  bgColor: {
+    type: String,
+    default: 'transparent',
+  },
+  customStyle: {
+    type: [Object, String],
+    default: () => ({}),
+  },
+  customClass: {
+    type: String,
+    default: '',
+  },
+
+  ...config.props.statusBar,
+};
+
+export default props;