@zfqh/uview-x 0.0.0-stage → 0.0.2

package/components/uv-status-bar/uv-status-bar.vue

@@ -0,0 +1,121 @@
+<template>
+	<view
+		class="uv-status-bar"
+		:class="[p.customClass]"
+		:style="[statusBarStyle]"
+	>
+		<slot />
+	</view>
+</template>
+
+<script setup lang="ts">
+	import { computed, onMounted, ref } from 'vue'
+	import { $uv } from '../../utils'
+	import props from './props'
+
+	defineOptions({
+		name: 'uv-status-bar',
+		// #ifdef UNI-APP-X
+		styleIsolation: 'app-and-page',
+		// #endif
+		virtualHost: true,
+	})
+
+	/**
+	 * StatusBar 状态栏占位
+	 * @description 本组件主要用于状态栏填充，比如在自定义导航栏的时候，它会自动适配一个恰当的状态栏高度。
+	 * App 蒸汽模式使用 uni.getWindowInfo() 的 statusBarHeight 计算高度。
+	 * @tutorial https://www.uvui.cn/components/statusBar.html
+	 * @property {String}			bgColor		背景色 (默认 'transparent' )
+	 * @property {Object}			customStyle	自定义样式
+	 * @property {String}			customClass	自定义类名
+	 * @example <uv-status-bar></uv-status-bar>
+	 */
+	const p = defineProps(props)
+
+	// uni-app x：窗口信息用 getWindowInfo()、设备信息用 getDeviceInfo()；
+	// 旧基座缺 statusBarHeight 时回退 getSystemInfoSync() / safeArea 字段。
+	const systemInfo = ref<any>({})
+	const readSystemInfo = () => {
+		const info: any = {}
+		try {
+			const windowInfo: any = uni.getWindowInfo()
+			info.statusBarHeight = windowInfo.statusBarHeight
+			info.safeAreaInsets = windowInfo.safeAreaInsets
+			info.safeArea = windowInfo.safeArea
+		} catch (e) {}
+		try {
+			const deviceInfo: any = uni.getDeviceInfo()
+			info.osName = deviceInfo.osName
+			info.deviceType = deviceInfo.deviceType
+		} catch (e) {}
+		if (info.statusBarHeight === undefined) {
+			try {
+				const legacyInfo: any = uni.getSystemInfoSync()
+				if (info.statusBarHeight === undefined) info.statusBarHeight = legacyInfo.statusBarHeight
+				if (info.safeAreaInsets === undefined) info.safeAreaInsets = legacyInfo.safeAreaInsets
+				if (info.safeArea === undefined) info.safeArea = legacyInfo.safeArea
+			} catch (e) {}
+		}
+		systemInfo.value = info
+	}
+	readSystemInfo()
+
+	onMounted(() => {
+		readSystemInfo()
+	})
+
+	/** 状态栏高度：getWindowInfo().statusBarHeight，缺失时依次用 safeAreaInsets.top / safeArea.top 兜底 */
+	const statusBarHeight = computed(() => {
+		const info = systemInfo.value || {}
+		const height = Number(info.statusBarHeight)
+		if (height > 0) return height
+		const insets = info.safeAreaInsets
+		if (insets && typeof insets.top === 'number' && insets.top > 0) return insets.top
+		// #ifdef APP || MP
+		const safeArea = info.safeArea
+		if (safeArea && safeArea.top > 0) return safeArea.top
+		// #endif
+		return 0
+	})
+
+	const statusBarStyle = computed(() => {
+		const style: any = {}
+		const height = statusBarHeight.value
+		if (height > 0) {
+			style.height = $uv.addUnit(height, 'px')
+		}
+		if (p.bgColor) {
+			if (p.bgColor.indexOf('gradient') > -1) {
+				// #ifdef APP-NVUE
+				style.backgroundColor = '#ffffff'
+				// #endif
+				// #ifndef APP-NVUE
+				style.backgroundImage = p.bgColor
+				// #endif
+			} else {
+				style.background = p.bgColor
+			}
+		}
+		return $uv.deepMerge(style, $uv.addStyle(p.customStyle))
+	})
+</script>
+
+<style lang="scss">
+	@import '../../styles/components.scss';
+
+	.uv-status-bar {
+		/* #ifndef APP-NVUE */
+		width: 100%;
+		flex-shrink: 0;
+		/* #endif */
+	}
+
+	/* #ifndef APP-NVUE */
+	/* #ifdef APP || MP */
+	.uv-status-bar {
+		height: var(--status-bar-height);
+	}
+	/* #endif */
+	/* #endif */
+</style>

package/components/uv-tabs/props.ts

@@ -0,0 +1,84 @@
+// @ts-nocheck
+
+import config from '../../utils/config';
+
+const props = {
+  // 滑块的移动过渡时间，单位ms
+  duration: {
+    type: Number,
+    default: 300,
+  },
+  // tabs标签数组
+  list: {
+    type: Array,
+    default: () => [],
+  },
+  // 滑块颜色
+  lineColor: {
+    type: String,
+    default: '#3c9cff',
+  },
+  // 菜单选择中时的样式
+  activeStyle: {
+    type: [String, Object],
+    default: () => ({
+      color: '#303133',
+    }),
+  },
+  // 菜单非选中时的样式
+  inactiveStyle: {
+    type: [String, Object],
+    default: () => ({
+      color: '#606266',
+    }),
+  },
+  // 滑块长度
+  lineWidth: {
+    type: [String, Number],
+    default: 20,
+  },
+  // 滑块高度
+  lineHeight: {
+    type: [String, Number],
+    default: 3,
+  },
+  // 滑块背景显示大小，当滑块背景设置为图片时使用
+  lineBgSize: {
+    type: String,
+    default: 'cover',
+  },
+  // 菜单item的样式
+  itemStyle: {
+    type: [String, Object],
+    default: () => ({
+      height: '44px',
+    }),
+  },
+  // 菜单是否可滚动
+  scrollable: {
+    type: Boolean,
+    default: true,
+  },
+  // 当前选中标签的索引
+  current: {
+    type: [Number, String],
+    default: 0,
+  },
+  // 默认读取的键名
+  keyName: {
+    type: String,
+    default: 'name',
+  },
+  customStyle: {
+    type: [Object, String],
+    default: () => ({}),
+  },
+  customClass: {
+    type: String,
+    default: '',
+  },
+
+  ...config.props.tabs,
+};
+
+export default props;

package/components/uv-tabs/uv-tabs.vue

@@ -0,0 +1,432 @@
+<template>
+	<view
+		class="uv-tabs"
+		:class="[p.customClass]"
+		:style="[$uv.addStyle(p.customStyle)]"
+	>
+		<view class="uv-tabs__wrapper">
+			<slot name="left" />
+			<view class="uv-tabs__wrapper__scroll-view-wrapper">
+				<scroll-view
+					<!-- #ifdef UNI-APP-X -->
+					:direction="p.scrollable ? 'horizontal' : 'none'"
+					<!-- #endif -->
+					<!-- #ifndef UNI-APP-X -->
+					:scroll-x="p.scrollable"
+					<!-- #endif -->
+					<!-- #ifdef APP-NVUE -->
+					ref="scrollRef"
+					<!-- #endif -->
+					<!-- #ifdef WEB || H5 -->
+					ref="scrollFrameRef"
+					<!-- #endif -->
+					class="uv-tabs__wrapper__scroll-view"
+					:scroll-left="scrollLeft"
+					:scroll-with-animation="true"
+					:show-scrollbar="false"
+				>
+					<view
+						class="uv-tabs__wrapper__nav"
+						:style="[navStyle]"
+					>
+						<view
+							v-for="(item, index) in p.list"
+							:key="index"
+							<!-- #ifdef APP-NVUE -->
+							ref="itemRefs"
+							<!-- #endif -->
+							class="uv-tabs__wrapper__nav__item"
+							:class="[
+								`uv-tabs__wrapper__nav__item-${index}`,
+								item.disabled ? 'uv-tabs__wrapper__nav__item--disabled' : ''
+							]"
+							:style="[itemFlexStyle, $uv.addStyle(p.itemStyle)]"
+							@tap="clickHandler(item, index)"
+						>
+							<text
+								class="uv-tabs__wrapper__nav__item__text"
+								:class="[item.disabled ? 'uv-tabs__wrapper__nav__item__text--disabled' : '']"
+								:style="[textStyle(index)]"
+							>{{ item[p.keyName] }}</text>
+							<uv-badge
+								:show="!!(item.badge && (item.badge.show || item.badge.isDot || item.badge.value))"
+								:is-dot="item.badge && item.badge.isDot"
+								:value="item.badge && item.badge.value"
+								:max="item.badge && item.badge.max"
+								:type="item.badge && item.badge.type"
+								:show-zero="item.badge && item.badge.showZero"
+								:bg-color="item.badge && item.badge.bgColor"
+								:color="item.badge && item.badge.color"
+								:shape="item.badge && item.badge.shape"
+								:number-type="item.badge && item.badge.numberType"
+								:inverted="item.badge && item.badge.inverted"
+								custom-style="margin-left: 4px;"
+							></uv-badge>
+						</view>
+						<view
+							v-if="Number(p.lineHeight) > 0 && Number(p.lineWidth) > 0"
+							class="uv-tabs__wrapper__nav__line"
+							:style="[lineStyle]"
+						></view>
+					</view>
+				</scroll-view>
+			</view>
+			<slot name="right" />
+		</view>
+	</view>
+</template>
+
+<script setup lang="ts">
+	import { computed, getCurrentInstance, nextTick, onMounted, ref, watch } from 'vue'
+	import { $uv } from '../../utils'
+	import props from './props'
+	import { getRect, getRectNvue } from '../../utils/compat'
+
+	defineOptions({
+		name: 'uv-tabs',
+		// #ifdef UNI-APP-X
+		styleIsolation: 'app-and-page',
+		// #endif
+		virtualHost: true,
+	})
+
+	/**
+	 * Tabs 标签
+	 * @description tabs标签组件，在标签多的时候，可以配置为左右滑动，标签少的时候，可以禁止滑动。该组件的一个特点是配置为滚动模式时，激活的tab会自动移动到组件的中间位置。
+	 * @tutorial https://www.uvui.cn/components/tabs.html
+	 * @property {Array}	list	标签数组，元素为对象，如[{name: '推荐'}]
+	 * @property {String | Number}	duration			滑块移动一次所需的时间，单位ms（默认 300 ）
+	 * @property {String | Object} activeStyle	菜单选中时的样式（默认{ color: '#303133' }）
+	 * @property {String | Object} inactiveStyle	菜单非选中时的样式（默认{ color: '#606266' }）
+	 * @property {String | Number} lineWidth	滑块长度（默认 20）
+	 * @property {String | Number} lineHeight	滑块高度（默认 3）
+	 * @property {String}	lineColor	滑块颜色（默认：'#3c9cff'）
+	 * @property {String} lineBgSize	滑块背景显示大小，当滑块背景设置为图片时使用（默认 cover）
+	 * @property {String | Object} itemStyle	菜单item的样式（默认 { height: '44px' }）
+	 * @property {Boolean}	scrollable	菜单是否可滚动，选项很少的时候设置为false整个tabs自动居中显示（默认：true）
+	 * @property {String | Number}	current	当前选中标签的索引（默认 0 ）
+	 * @property {String}	keyName	从list元素对象中读取的键名（默认 'name' ）
+	 * @property {Object}	customStyle	自定义外部样式
+	 * @event {Function} change 标签改变时触发 index: 点击了第几个tab，索引从0开始
+	 * @event {Function} click 点击标签时触发 index: 点击了第几个tab，索引从0开始
+	 * @example <uv-tabs :list="list" :current="current" @change="change"></uv-tabs>
+	 */
+	const p = defineProps(props)
+
+	const emit = defineEmits(['click', 'change'])
+
+	const instance = getCurrentInstance()
+
+	// 第一次移动滑块时不需要过渡动画
+	const firstTime = ref(true)
+	const scrollLeft = ref(0)
+	const lineOffsetLeft = ref(0)
+	const innerCurrent = ref(0)
+	// 导航内容总宽度（可滚动模式由测量值决定，保证内容宽度大于容器宽度才可滚动）
+	const navWidth = ref(0)
+
+	// #ifdef APP-NVUE
+	// nvue 不支持 uni.createSelectorQuery，使用 dom 模块对 ref 节点测量
+	const scrollRef = ref<any>(null)
+	const itemRefs = ref<any[]>([])
+	// #endif
+
+	// #ifdef WEB || H5
+	// uni-app x 的 H5 运行时对 scroll-left 响应式更新不稳定（x App 用 direction），
+	// H5 下直接同步内部滚动容器的 scrollLeft，保证各端滚动定位一致。
+	const scrollFrameRef = ref<any>(null)
+	const applyH5ScrollLeft = (value: number) => {
+		nextTick(() => {
+			const frame: any = scrollFrameRef.value
+			const root: any = frame && frame.$el ? frame.$el : frame
+			if (!root || typeof root.querySelectorAll !== 'function') return
+			const nodes: any[] = root.querySelectorAll('.uni-scroll-view')
+			const scroller: any = nodes && nodes.length > 1 ? nodes[1] : nodes && nodes[0]
+			if (scroller) scroller.scrollLeft = value
+		})
+	}
+	// #endif
+
+	// 非响应式的测量结果，仅用于计算滑块位置与滚动位置
+	let itemRects: any[] = []
+	let tabsRect: any = {
+		left: 0,
+		right: 0,
+		width: 0
+	}
+	let scrollViewWidth = 0
+	let isMounted = false
+
+	const navStyle = computed(() => {
+		if (!p.scrollable) {
+			return { flex: 1 }
+		}
+		// 可滚动模式下显式设置内容总宽度，避免各端 scroll-view 对横向内容布局差异导致无法滚动
+		return navWidth.value > 0 ? { width: `${navWidth.value}px` } : {}
+	})
+	const itemFlexStyle = computed(() => (p.scrollable ? {} : { flex: 1 }))
+
+	const lineStyle = computed(() => {
+		const style: any = {
+			width: $uv.addUnit(p.lineWidth),
+			transform: `translate(${lineOffsetLeft.value}px)`,
+			transitionDuration: `${firstTime.value ? 0 : Number(p.duration) || 0}ms`,
+			height: firstTime.value ? 0 : $uv.addUnit(p.lineHeight),
+			// 使用 background 简写而不是 backgroundColor：lineColor 支持传入背景图（url(...)）
+			background: p.lineColor,
+			backgroundSize: p.lineBgSize
+		}
+		return style
+	})
+
+	const textStyle = (index: number) => {
+		const item = p.list[index] as any
+		// 取当前是否激活的样式
+		const style: any =
+			(index === innerCurrent.value ? $uv.addStyle(p.activeStyle) : $uv.addStyle(p.inactiveStyle)) || {}
+		const extra: any = {}
+		// 如果当前菜单被禁用，则加上对应颜色
+		if (item && item.disabled) {
+			extra.color = '#c8c9cc'
+		}
+		return $uv.deepMerge(style, extra)
+	}
+
+	// 获取单个节点的尺寸（返回 unbounded 的 rect 对象）
+	const queryRect = (selector: string) => {
+		return getRect(instance ? instance.proxy : null, selector)
+	}
+
+	// 获取导航菜单 scroll-view 的尺寸
+	const getTabsRect = () => {
+		// #ifdef APP-NVUE
+		return getRectNvue(scrollRef.value)
+		// #endif
+		// #ifndef APP-NVUE
+		return queryRect('.uv-tabs__wrapper__scroll-view')
+		// #endif
+	}
+
+	// 获取所有标签的尺寸（selectAll，返回顺序与 list 一致）
+	const getAllItemRect = () => {
+		// #ifdef APP-NVUE
+		const refs = Array.isArray(itemRefs.value) ? itemRefs.value : []
+		if (!refs.length) return Promise.resolve([])
+		return Promise.all(refs.map((item: any) => getRectNvue(item)))
+		// #endif
+		// #ifndef APP-NVUE
+		return getRect(instance ? instance.proxy : null, '.uv-tabs__wrapper__nav__item', true)
+		// #endif
+	}
+
+	// 设置滑块的位置
+	const setLineLeft = () => {
+		const tabItem = itemRects[innerCurrent.value]
+		if (!tabItem || !tabItem.width) return
+		// 获取滑块该移动的位置
+		let offsetLeft = 0
+		for (let i = 0; i < innerCurrent.value; i++) {
+			const rect = itemRects[i]
+			if (rect) offsetLeft += rect.width
+		}
+		// 获取下划线的数值px表示法
+		let lineWidth = $uv.getPx(p.lineWidth)
+		if ($uv.test.number(p.lineWidth) && $uv.config.unit) {
+			lineWidth = $uv.getPx(`${p.lineWidth}${$uv.config.unit}`)
+		}
+		lineOffsetLeft.value = offsetLeft + (tabItem.width - lineWidth) / 2
+		// 第一次移动滑块，需要等过渡结束后再开启动画
+		if (firstTime.value) {
+			setTimeout(() => {
+				firstTime.value = false
+			}, 20)
+		}
+	}
+
+	// 将激活的 tab 移动到 scroll-view 的中间
+	const setScrollLeft = () => {
+		const tabRect = itemRects[innerCurrent.value]
+		if (!tabRect || !tabsRect.width) return
+		// 累加得到当前 item 到左边的距离
+		let offsetLeft = 0
+		for (let i = 0; i < innerCurrent.value; i++) {
+			const rect = itemRects[i]
+			if (rect) offsetLeft += rect.width
+		}
+		const windowWidth = $uv.sys().windowWidth || 0
+		// nvue 的 dom.getComponentRect 在部分基座下只返回 width/height，缺失 left/right 时兜底：
+		// right 用 left + width 补齐，left 缺失按 0 处理，避免 NaN 导致 scrollLeft 失效。
+		const tabsWidth = Number(tabsRect.width) || 0
+		const tabsLeft = typeof tabsRect.left === 'number' && isFinite(tabsRect.left) ? tabsRect.left : 0
+		const tabsRight =
+			typeof tabsRect.right === 'number' && isFinite(tabsRect.right) ? tabsRect.right : tabsLeft + tabsWidth
+		let left =
+			offsetLeft -
+			(tabsWidth - tabRect.width) / 2 -
+			(windowWidth - tabsRight) / 2 +
+			tabsLeft / 2
+		if (!isFinite(left)) left = 0
+		// 限制 scrollLeft 的最大值为整个内容宽度减去 scroll-view 的宽度
+		left = Math.min(left, scrollViewWidth - tabsWidth)
+		scrollLeft.value = Math.max(0, left)
+		// #ifdef WEB || H5
+		applyH5ScrollLeft(scrollLeft.value)
+		// #endif
+	}
+
+	// 获取所有标签的尺寸并重新定位滑块
+	const resize = () => {
+		// 组件未挂载时 DOM 还不存在，跳过（由 onMounted 中的 init 负责首次测量）
+		if (!isMounted) return
+		if (!p.list || p.list.length === 0) return
+		return Promise.all([getTabsRect(), getAllItemRect()]).then((results: any[]) => {
+			const tabs = results[0]
+			const rects = Array.isArray(results[1]) ? results[1] : []
+			if (tabs) tabsRect = tabs
+			itemRects = rects
+			scrollViewWidth = 0
+			rects.forEach((rect: any) => {
+				if (rect) scrollViewWidth += rect.width
+			})
+			navWidth.value = scrollViewWidth
+			setLineLeft()
+			setScrollLeft()
+		})
+	}
+
+	const init = () => {
+		$uv.sleep().then(() => {
+			resize()
+		})
+	}
+
+	// 点击某一个标签
+	const clickHandler = (item: any, index: number) => {
+		const payload = {
+			...item,
+			index
+		}
+		// 因为标签可能为 disabled 状态，所以 click 是一定会发出的，但是 change 事件是需要可用的状态才发出
+		emit('click', payload)
+		// 如果 disabled 状态，返回
+		if (item && item.disabled) return
+		if (innerCurrent.value !== index) {
+			emit('change', payload)
+		}
+		innerCurrent.value = index
+		nextTick(() => {
+			resize()
+		})
+	}
+
+	watch(
+		() => p.current,
+		(newValue: any) => {
+			const value = Number(newValue) || 0
+			// 内外部值不相等时，才尝试移动滑块
+			if (value !== innerCurrent.value) {
+				innerCurrent.value = value
+				nextTick(() => {
+					resize()
+				})
+			}
+		},
+		{ immediate: true }
+	)
+
+	// list 变化时，重新渲染 list 各项信息
+	watch(
+		() => p.list,
+		() => {
+			nextTick(() => {
+				resize()
+			})
+		}
+	)
+
+	onMounted(() => {
+		isMounted = true
+		init()
+	})
+
+	defineExpose({
+		init,
+		resize,
+		setLineLeft,
+		setScrollLeft
+	})
+</script>
+
+<style lang="scss">
+	@import '../../styles/components.scss';
+	@import '../../styles/color.scss';
+
+	.uv-tabs {
+		display: flex;
+		flex-direction: column;
+	}
+
+	.uv-tabs__wrapper {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+	}
+
+	.uv-tabs__wrapper__scroll-view-wrapper {
+		flex: 1;
+		/* #ifdef WEB || H5 || MP */
+		overflow: auto hidden;
+		/* #endif */
+	}
+
+	.uv-tabs__wrapper__scroll-view {
+		flex: 1;
+	}
+
+	.uv-tabs__wrapper__nav {
+		display: flex;
+		flex-direction: row;
+		position: relative;
+		/* #ifndef APP-NVUE */
+		flex-shrink: 0;
+		/* #endif */
+	}
+
+	.uv-tabs__wrapper__nav__item {
+		padding: 0 11px;
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
+		/* #ifndef APP-NVUE */
+		flex-shrink: 0;
+		/* #endif */
+	}
+
+	.uv-tabs__wrapper__nav__item--disabled {
+		/* #ifdef WEB || H5 || MP */
+		cursor: not-allowed;
+		/* #endif */
+	}
+
+	.uv-tabs__wrapper__nav__item__text {
+		font-size: 15px;
+		color: $uv-content-color;
+	}
+
+	.uv-tabs__wrapper__nav__item__text--disabled {
+		color: $uv-disabled-color !important;
+	}
+
+	.uv-tabs__wrapper__nav__line {
+		height: 3px;
+		background-color: $uv-primary;
+		width: 30px;
+		position: absolute;
+		left: 0;
+		bottom: 2px;
+		border-radius: 100px;
+		transition-property: transform;
+		transition-duration: 300ms;
+	}
+</style>

package/components/uv-transition/props.ts

@@ -0,0 +1,38 @@
+// @ts-nocheck
+
+import config from '../../utils/config';
+
+const props = {
+  show: {
+    type: Boolean,
+    default: false,
+  },
+  mode: {
+    type: [Array, String, null],
+    default: () => 'fade',
+  },
+  duration: {
+    type: [String, Number],
+    default: 300,
+  },
+  timingFunction: {
+    type: String,
+    default: 'ease-out',
+  },
+  customStyle: {
+    type: [Object, String],
+    default: () => ({}),
+  },
+  customClass: {
+    type: [String, Array],
+    default: '',
+  },
+  cellChild: {
+    type: Boolean,
+    default: false,
+  },
+
+  ...config.props.transition,
+};
+
+export default props;