@zfqh/uview-x 0.0.0-stage → 0.0.1

package/components/uv-line-progress/uv-line-progress.vue

@@ -0,0 +1,166 @@
+<template>
+	<view
+		class="uv-line-progress"
+		:class="[p.customClass]"
+		:style="[$uv.addStyle(p.customStyle)]"
+	>
+		<view
+			ref="barRef"
+			class="uv-line-progress__background"
+			:style="[backgroundStyle]"
+		>
+		</view>
+		<view
+			class="uv-line-progress__line"
+			:style="[progressStyle]"
+		>
+			<slot>
+				<text
+					v-if="p.showText && innserPercentage >= 10"
+					class="uv-line-progress__text"
+				>{{ percentageText }}</text>
+			</slot>
+		</view>
+	</view>
+</template>
+
+<script setup lang="ts">
+	import { computed, onMounted, ref, watch } from 'vue'
+	import { $uv } from '../../utils'
+	import props from './props'
+	import { getRectNvue } from '../../utils/compat'
+
+	defineOptions({
+		name: 'uv-line-progress',
+		// #ifdef UNI-APP-X
+		styleIsolation: 'app-and-page',
+		// #endif
+		virtualHost: true,
+	})
+
+	/**
+	 * lineProgress 线型进度条
+	 * @description 展示操作或任务的当前进度，比如上传文件，是一个线形的进度条。
+	 * @tutorial https://www.uvui.cn/components/lineProgress.html
+	 * @property {String}			activeColor		激活部分的颜色 ( 默认 '#19be6b' )
+	 * @property {String}			inactiveColor	背景色 ( 默认 '#ececec' )
+	 * @property {String | Number}	percentage		进度百分比，数值 ( 默认 0 )
+	 * @property {Boolean}			showText		是否在进度条内部显示百分比的值 ( 默认 true )
+	 * @property {String | Number}	height			进度条的高度，单位px ( 默认 12 )
+	 * @property {Object}			customStyle		定义需要用到的外部样式
+	 * @example <uv-line-progress :percentage="70" :show-text="true"></uv-line-progress>
+	 */
+	const p = defineProps(props)
+
+	// 控制范围在0-100之间
+	const innserPercentage = computed(() => {
+		return $uv.range(0, 100, p.percentage)
+	})
+
+	const percentageText = computed(() => `${innserPercentage.value}%`)
+
+	const barRef = ref<any>(null)
+	const nvueBarWidth = ref(0)
+
+	const resize = () => {
+		getRectNvue(barRef.value).then((size: any) => {
+			if (size && size.width > 0) {
+				nvueBarWidth.value = size.width
+			}
+		})
+	}
+
+	onMounted(() => {
+		resize()
+	})
+
+	watch(
+		() => innserPercentage.value,
+		() => resize()
+	)
+
+	const backgroundStyle = computed(() => {
+		const style: any = {
+			backgroundColor: p.inactiveColor,
+			height: $uv.addUnit($uv.getPx(p.height))
+		}
+		return style
+	})
+
+	// nvue 不支持百分比宽高：先测量父宽再写 px；其余目标继续用百分比。
+	const progressStyle = computed(() => {
+		const style: any = {
+			backgroundColor: p.activeColor,
+			height: $uv.addUnit($uv.getPx(p.height))
+		}
+		// #ifdef APP-NVUE
+		style.width = nvueBarWidth.value > 0 ? `${(nvueBarWidth.value * innserPercentage.value) / 100}px` : '0px'
+		// #endif
+		// #ifndef APP-NVUE
+		style.width = `${innserPercentage.value}%`
+		// #endif
+		return style
+	})
+
+	defineExpose({
+		resize
+	})
+</script>
+
+<style lang="scss">
+	@import '../../styles/components.scss';
+
+	.uv-line-progress {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		align-items: stretch;
+		position: relative;
+		flex: 1;
+		overflow: hidden;
+		border-top-left-radius: 100px;
+		border-top-right-radius: 100px;
+		border-bottom-left-radius: 100px;
+		border-bottom-right-radius: 100px;
+	}
+
+	.uv-line-progress__background {
+		background-color: #ececec;
+		border-top-left-radius: 100px;
+		border-top-right-radius: 100px;
+		border-bottom-left-radius: 100px;
+		border-bottom-right-radius: 100px;
+		flex: 1;
+	}
+
+	.uv-line-progress__line {
+		position: absolute;
+		top: 0;
+		left: 0;
+		bottom: 0;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		transition-property: width;
+		transition-duration: 0.5s;
+		transition-timing-function: ease;
+		/* #endif */
+		flex-direction: row;
+		align-items: center;
+		color: #ffffff;
+		border-top-left-radius: 100px;
+		border-top-right-radius: 100px;
+		border-bottom-left-radius: 100px;
+		border-bottom-right-radius: 100px;
+		justify-content: flex-end;
+	}
+
+	.uv-line-progress__text {
+		font-size: 10px;
+		align-items: center;
+		text-align: right;
+		color: #ffffff;
+		margin-right: 5px;
+		transform: scale(0.9);
+	}
+</style>

package/components/uv-loading-icon/props.ts

@@ -0,0 +1,78 @@
+// @ts-nocheck
+
+import config from '../../utils/config';
+
+const props = {
+  // 是否显示组件
+  show: {
+    type: Boolean,
+    default: true,
+  },
+  // 颜色
+  color: {
+    type: String,
+    default: '#909193',
+  },
+  // 提示文字颜色
+  textColor: {
+    type: String,
+    default: '#909193',
+  },
+  // 文字和图标是否垂直排列
+  vertical: {
+    type: Boolean,
+    default: false,
+  },
+  // 模式选择，circle-圆形，spinner-花朵形，semicircle-半圆形
+  mode: {
+    type: String,
+    default: 'spinner',
+  },
+  // 图标大小，单位默认px
+  size: {
+    type: [String, Number],
+    default: 24,
+  },
+  // 文字大小
+  textSize: {
+    type: [String, Number],
+    default: 15,
+  },
+  // 文字样式
+  textStyle: {
+    type: Object,
+    default: () => ({}),
+  },
+  // 文字内容
+  text: {
+    type: [String, Number],
+    default: '',
+  },
+  // 动画模式
+  timingFunction: {
+    type: String,
+    default: 'linear',
+  },
+  // 动画执行周期时间
+  duration: {
+    type: [String, Number],
+    default: 1200,
+  },
+  // mode=circle时的暗边颜色
+  inactiveColor: {
+    type: String,
+    default: '',
+  },
+  customStyle: {
+    type: [Object, String],
+    default: () => ({}),
+  },
+  customClass: {
+    type: String,
+    default: '',
+  },
+
+  ...config.props.loadingIcon,
+};
+
+export default props;

package/components/uv-loading-icon/uv-loading-icon.vue

@@ -0,0 +1,226 @@
+<template>
+	<view
+		v-if="p.show"
+		class="uv-loading-icon"
+		:class="[p.vertical ? 'uv-loading-icon--vertical' : '', p.customClass]"
+		:style="[$uv.addStyle(p.customStyle)]"
+	>
+		<view
+			class="uv-loading-icon__spinner"
+			:class="['uv-loading-icon__spinner--' + p.mode]"
+			:style="[spinnerStyle]"
+		>
+			<!-- #ifdef APP-NVUE -->
+			<loading-indicator
+				v-if="p.mode === 'spinner'"
+				:animating="true"
+				:style="{ color: p.color, width: $uv.addUnit(p.size), height: $uv.addUnit(p.size) }"
+			/>
+			<!-- #endif -->
+			<!-- #ifndef APP-NVUE -->
+			<template v-if="p.mode === 'spinner'">
+				<view
+					v-for="(item, index) in array12"
+					:key="index"
+					class="uv-loading-icon__dot"
+					:style="[dotStyle(index)]"
+				>
+					<view
+						class="uv-loading-icon__dot-bar"
+						:style="{ backgroundColor: p.color }"
+					></view>
+				</view>
+			</template>
+			<!-- #endif -->
+		</view>
+		<text
+			v-if="p.text"
+			class="uv-loading-icon__text"
+			:class="[p.vertical ? 'uv-loading-icon__text--vertical' : '']"
+			:style="[{
+				fontSize: $uv.addUnit(p.textSize),
+				color: p.textColor
+			}, $uv.addStyle(p.textStyle)]"
+		>{{ p.text }}</text>
+	</view>
+</template>
+
+<script setup lang="ts">
+	import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
+	import { $uv } from '../../utils'
+	import props from './props'
+
+	defineOptions({
+		name: 'uv-loading-icon',
+		// #ifdef UNI-APP-X
+		styleIsolation: 'app-and-page',
+		// #endif
+		virtualHost: true,
+	})
+
+	/**
+	 * loading 加载动画
+	 * @description 此组件为一个小动画，目前用在uvui的loadmore加载更多和switch开关等组件的正在加载状态场景。
+	 * @tutorial https://www.uvui.cn/components/loading.html
+	 * @property {Boolean}			show			是否显示组件  (默认 true)
+	 * @property {String}			color			动画活动区域的颜色 （默认 '#909193'）
+	 * @property {String}			textColor		提示文本的颜色（默认 '#909193'）
+	 * @property {Boolean}			vertical		文字和图标是否垂直排列 (默认 false )
+	 * @property {String}			mode			模式选择，circle-圆形，spinner-花朵形，semicircle-半圆形（默认 'spinner' ）
+	 * @property {String | Number}	size			加载图标的大小，单位px （默认 24 ）
+	 * @property {String | Number}	textSize		文字大小（默认 15 ）
+	 * @property {String | Number}	text			文字内容
+	 * @property {Object}			textStyle		文字样式
+	 * @property {String}			timingFunction	动画模式 （默认 'linear' ）
+	 * @property {String | Number}	duration		动画执行周期时间（默认 1200）
+	 * @property {String}			inactiveColor	mode=circle时的暗边颜色
+	 * @property {Object}			customStyle		定义需要用到的外部样式
+	 * @example <uv-loading-icon mode="circle"></uv-loading-icon>
+	 */
+	const p = defineProps(props)
+
+	// 花瓣模式下 12 个点
+	const array12 = Array.from({
+		length: 12
+	})
+
+	const rotateDeg = ref(0)
+	let timer: any = null
+
+	const durationTime = computed(() => Number(p.duration) || 0)
+
+	// 当为circle类型时，给其另外三边设置一个更轻一些的颜色
+	// 之所以需要这么做的原因是，比如父组件传了color为红色，那么需要另外的三个边为浅红色
+	const otherBorderColor = computed(() => {
+		const lightColor = $uv.colorGradient(p.color, '#ffffff', 100)[80]
+		if (p.mode === 'circle') {
+			return p.inactiveColor ? p.inactiveColor : lightColor
+		}
+		return 'transparent'
+	})
+
+	const spinnerStyle = computed(() => {
+		return {
+			color: p.color,
+			width: $uv.addUnit(p.size),
+			height: $uv.addUnit(p.size),
+			borderTopColor: p.color,
+			borderBottomColor: otherBorderColor.value,
+			borderLeftColor: otherBorderColor.value,
+			borderRightColor: otherBorderColor.value,
+			transform: `rotate(${rotateDeg.value}deg)`,
+			transitionProperty: 'transform',
+			transitionDuration: `${durationTime.value}ms`,
+			// 花瓣模式按 12 个点步进旋转，圆形/半圆按传入的缓动函数
+			transitionTimingFunction: p.mode === 'spinner' ? 'steps(12)' : p.timingFunction
+		}
+	})
+
+	const dotStyle = (index: number) => {
+		return {
+			transform: `rotate(${(index + 1) * 30}deg)`,
+			opacity: 1 - 0.0625 * index
+		}
+	}
+
+	const clearTimer = () => {
+		if (timer) {
+			clearInterval(timer)
+			timer = null
+		}
+	}
+
+	const startRotate = () => {
+		clearTimer()
+		// duration 为 0 时不启动旋转，避免 0ms 定时器空转
+		if (durationTime.value <= 0) return
+		nextTick(() => {
+			// 用 CSS transition 代替 @keyframes / uni.createAnimation：每次增加 360deg 形成连续旋转
+			rotateDeg.value += 360
+		})
+		timer = setInterval(() => {
+			rotateDeg.value += 360
+		}, durationTime.value)
+	}
+
+	onMounted(() => {
+		startRotate()
+	})
+
+	onUnmounted(() => {
+		clearTimer()
+	})
+
+	watch(
+		() => p.duration,
+		() => {
+			startRotate()
+		}
+	)
+</script>
+
+<style lang="scss">
+	@import '../../styles/components.scss';
+	@import '../../styles/color.scss';
+
+	.uv-loading-icon {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
+		color: #909193;
+	}
+	.uv-loading-icon--vertical {
+		flex-direction: column;
+	}
+	.uv-loading-icon__text {
+		margin-left: 4px;
+		color: $uv-content-color;
+		font-size: 14px;
+		line-height: 20px;
+	}
+	.uv-loading-icon__text--vertical {
+		margin-left: 0;
+		margin-top: 6px;
+	}
+	.uv-loading-icon__spinner {
+		position: relative;
+		/* #ifndef APP-NVUE */
+		box-sizing: border-box;
+		/* #endif */
+	}
+	.uv-loading-icon__spinner--semicircle {
+		border-width: 2px;
+		border-color: transparent;
+		border-top-right-radius: 100px;
+		border-top-left-radius: 100px;
+		border-bottom-left-radius: 100px;
+		border-bottom-right-radius: 100px;
+		border-style: solid;
+	}
+	.uv-loading-icon__spinner--circle {
+		border-top-right-radius: 100px;
+		border-top-left-radius: 100px;
+		border-bottom-left-radius: 100px;
+		border-bottom-right-radius: 100px;
+		border-width: 2px;
+		border-style: solid;
+	}
+	/* #ifndef APP-NVUE */
+	.uv-loading-icon__dot {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+	}
+	.uv-loading-icon__dot-bar {
+		width: 2px;
+		height: 25%;
+		border-radius: 2px;
+	}
+	/* #endif */
+</style>

package/components/uv-overlay/props.ts

@@ -0,0 +1,38 @@
+// @ts-nocheck
+
+import config from '../../utils/config';
+
+const props = {
+  show: {
+    type: Boolean,
+    default: false,
+  },
+  zIndex: {
+    type: [String, Number],
+    default: 10070,
+  },
+  duration: {
+    type: [String, Number],
+    default: 300,
+  },
+  opacity: {
+    type: [String, Number],
+    default: 0.5,
+  },
+  hidden: {
+    type: Boolean,
+    default: true,
+  },
+  customStyle: {
+    type: [Object, String],
+    default: () => ({}),
+  },
+  customClass: {
+    type: String,
+    default: '',
+  },
+
+  ...config.props.overlay,
+};
+
+export default props;

package/components/uv-overlay/uv-overlay.vue

@@ -0,0 +1,120 @@
+<template>
+	<uv-transition
+		:show="p.show"
+		mode="fade"
+		:custom-class="overlayClass"
+		:duration="p.duration"
+		:custom-style="overlayStyle"
+		@click="clickHandler"
+		@touchmove="clear"
+	>
+		<slot />
+	</uv-transition>
+</template>
+
+<script setup lang="ts">
+	import { computed, onUnmounted, watch } from 'vue'
+	import { $uv } from '../../utils'
+	import props from './props'
+	import { preventEvent } from '../../utils/compat'
+
+	defineOptions({
+		name: 'uv-overlay',
+		// #ifdef UNI-APP-X
+		styleIsolation: 'app-and-page',
+		// #endif
+		virtualHost: true,
+	})
+
+	/**
+	 * overlay 遮罩
+	 * @description 创建一个遮罩层，用于强调特定的页面元素，并阻止用户对遮罩下层的内容进行操作，一般用于弹窗场景
+	 * @tutorial https://www.uvui.cn/components/overlay.html
+	 * @property {Boolean}			show		是否显示遮罩（默认 false ）
+	 * @property {String | Number}	zIndex		zIndex 层级（默认 10070 ）
+	 * @property {String | Number}	duration	动画时长，单位毫秒（默认 300 ）
+	 * @property {String | Number}	opacity		不透明度值，当做rgba的第四个参数 （默认 0.5 ）
+	 * @property {Boolean}			hidden		显示时 Web 的 body 是否添加 overflow: hidden（默认 true，仅 WEB 生效）
+	 * @property {Object}			customStyle	定义需要用到的外部样式
+	 * @event {Function} click 点击遮罩发送事件
+	 * @example <uv-overlay :show="show" @click="show = false"></uv-overlay>
+	 */
+	const p = defineProps(props)
+
+	const emit = defineEmits(['click'])
+
+	const overlayClass = computed(() => {
+		const classes = ['uv-overlay']
+		if (p.customClass) classes.push(p.customClass)
+		return classes
+	})
+
+	const overlayStyle = computed(() => {
+		const style: any = {
+			position: 'fixed',
+			top: 0,
+			left: 0,
+			right: 0,
+			bottom: 0,
+			zIndex: p.zIndex,
+			backgroundColor: `rgba(0, 0, 0, ${p.opacity})`
+		}
+		return $uv.deepMerge(style, $uv.addStyle(p.customStyle))
+	})
+
+	const clickHandler = () => {
+		emit('click')
+	}
+
+	/**
+	 * 触摸移动时阻止页面滚动穿透；nvue 无法阻止原生 scroller，仅做冒泡处理。
+	 */
+	const clear = (event?: any) => {
+		if (event && typeof event.preventDefault === 'function') {
+			event.preventDefault()
+		}
+		preventEvent(event)
+	}
+
+	// #ifdef WEB || H5
+	const setBodyOverflow = (hidden: boolean) => {
+		const body = document.body
+		if (body && body.style) {
+			body.style.overflow = hidden ? 'hidden' : ''
+		}
+	}
+
+	watch(
+		() => p.show,
+		(show: boolean) => {
+			if (!p.hidden) return
+			setBodyOverflow(show)
+		}
+	)
+
+	onUnmounted(() => {
+		if (p.hidden) setBodyOverflow(false)
+	})
+	// #endif
+
+	defineExpose({
+		clear
+	})
+</script>
+
+<style lang="scss">
+	@import '../../styles/components.scss';
+
+	$uv-overlay-top: 0 !default;
+	$uv-overlay-left: 0 !default;
+	$uv-overlay-background-color: rgba(0, 0, 0, 0.7) !default;
+
+	.uv-overlay {
+		position: fixed;
+		top: $uv-overlay-top;
+		left: $uv-overlay-left;
+		right: 0;
+		bottom: 0;
+		background-color: $uv-overlay-background-color;
+	}
+</style>