fusions-ui 1.2.7 → 1.2.8

package/components/progress/src/composables/progress-custom.ts

@@ -0,0 +1,24 @@
+import { Ref, computed } from 'vue';
+import type { ProgressProps } from '../progress';
+
+export const useProgressCustomStyle = (props: ProgressProps, lineWidth: Ref<string | number>) => {
+	const lineStyle = computed(() => {
+		return {
+			backgroundColor: props.inactiveColor,
+			height: uni.$fu.addUnit(uni.$fu.getPx(props.height))
+		}
+	});
+	
+	const progressStyle = computed(() => {
+		let style: Record<string, any> = {};
+		style.width = lineWidth.value;
+		style.backgroundColor = props.activeColor;
+		style.height = uni.$fu.addUnit(uni.$fu.getPx(props.height));
+		return style
+	});
+	
+	return {
+		lineStyle,
+		progressStyle
+	}
+}

package/components/progress/src/composables/use-progress.ts

@@ -0,0 +1,159 @@
+import { getCurrentInstance, computed, ref, onMounted, watch } from 'vue';
+import type { ProgressProps } from '../progress';
+import { useCommon } from '../../../../hooks';
+// #ifdef APP-NVUE
+const dom = uni.requireNativePlugin('dom')
+// #endif
+
+export const useProgress = (props : ProgressProps) => {
+	const instance = getCurrentInstance();
+	const { getRect } = useCommon();
+	const lineBackgroundRef = ref();
+	// 线形
+	const lineWidth = ref<string | number>(0);
+	// 圆形
+	const elBgId = uni.$fu.uuid();
+	const elId = uni.$fu.uuid();
+	// 活动圆上下文
+	const progressContext = ref<any>(null);
+	// 转换成px为单位的背景宽度
+	const widthPx = ref(uni.upx2px(Number(props.size) || 200));
+	// 转换成px为单位的圆环宽度
+	const borderWidthPx = ref(uni.upx2px(Number(props.borderWidth) || 14));
+	// canvas画圆的起始角度，默认为-90度，顺时针
+	const startAngle = ref(-90 * Math.PI / 180);
+	// 动态修改进度值的时候，保存进度值的变化前后值
+	const newPercent = ref(0);
+	const oldPercent = ref(0);
+
+	const initLine = () => {
+		uni.$fu.sleep(20).then(() => {
+			resizeProgressWidth()
+		})
+	};
+
+	const initCircle = () => {
+		// 赋值，用于加载后第一个画圆使用
+		newPercent.value = Number(props.percent);
+		oldPercent.value = 0
+
+		// 这里必须加延迟,处理加载卡顿现象
+		setTimeout(() => {
+			drawProgressBg()
+			drawCircleByProgress(oldPercent.value)
+		}, 500)
+	}
+
+	const innserPercentage = computed(() => {
+		// 控制范围在0-100之间
+		return uni.$fu.range(0, 100, props.percent)
+	});
+
+	// 线形进度条方法
+	type GetProgressWidthFn = () => Promise<any>;
+	let getProgressWidth : GetProgressWidthFn;
+	// #ifndef APP-NVUE
+	getProgressWidth = () : Promise<any> => {
+		return getRect('.fu-line-progress__background')
+	};
+	// #endif
+	// #ifdef APP-NVUE
+	getProgressWidth = () : Promise<any> => {
+		// 返回一个promise
+		return new Promise(resolve => {
+			dom.getComponentRect(lineBackgroundRef.value, (res : any) => {
+				resolve(res.size)
+			})
+		})
+	};
+	// #endif
+
+	const resizeProgressWidth = () => {
+		getProgressWidth().then((size : any) => {
+			const { width } = size;
+			// 通过设置的percent值，计算其所占总长度的百分比
+			lineWidth.value = width * innserPercentage.value / 100 + 'px';
+		})
+	};
+
+	// 绘制进度条背景
+	const drawProgressBg = () => {
+		let ctx = uni.createCanvasContext(elBgId, instance);
+		// 设置线宽
+		ctx.setLineWidth(borderWidthPx.value)
+		// 设置颜色
+		ctx.setStrokeStyle(props.inactiveColor)
+		ctx.beginPath()
+		let radius = widthPx.value / 2;
+		ctx.arc(radius, radius, radius - borderWidthPx.value, 0, 2 * Math.PI, false)
+		ctx.stroke()
+		ctx.draw()
+	};
+
+	// 绘制圆弧的进度
+	const drawCircleByProgress = (progress : number) => {
+		let ctx = progressContext.value || (progressContext.value = uni.createCanvasContext(elId, instance));
+		ctx.setLineCap('round')
+		// 设置线条宽度和颜色
+		ctx.setLineWidth(borderWidthPx.value)
+		ctx.setStrokeStyle(props.activeColor)
+		let endAngle = ((2 * Math.PI) / 100) * progress + startAngle.value;
+		let radius = widthPx.value / 2;
+		ctx.beginPath()
+		ctx.arc(radius, radius, radius - borderWidthPx.value, startAngle.value, endAngle, false)
+		ctx.imageSmoothingEnabled = true;
+		ctx.stroke()
+		ctx.draw()
+
+		// 如果变更后新值大于旧值，意味着增大了百分比
+		if (newPercent.value > oldPercent.value) {
+			// 每次递增百分之一
+			progress++
+			// 如果新增后的值，大于需要设置的值百分比值，停止继续增加
+			if (progress > newPercent.value) return
+		} else {
+			progress--
+			if (progress < newPercent.value) return
+		}
+		setTimeout(() => {
+			// 定时器，每次操作间隔为time值，为了让进度条有动画效果
+			drawCircleByProgress(progress)
+		}, Math.floor(props.duration / 100))
+	};
+
+	// 生命周期
+	onMounted(() => {
+		if (props.mode === 'line') {
+			initLine()
+		} else if (props.mode === 'circle') {
+			initCircle()
+		}
+	});
+	
+	// watch监听事件
+	watch(() => props.percent, (newVal, oldVal = 0) => {
+		if (props.mode === 'line') {
+			resizeProgressWidth()
+		} else if (props.mode === 'circle') {
+			newVal = Math.min(100, Math.max(0, Number(newVal)));
+			oldVal = Math.min(100, Math.max(0, Number(oldVal)));
+
+			newPercent.value = newVal;
+			oldPercent.value = oldVal;
+			setTimeout(() => {
+				// 无论是百分比值增加还是减少，需要操作还是原来的旧的百分比值
+				// 将此值减少或者新增到新的百分比值
+				drawCircleByProgress(Number(oldVal))
+			}, 50)
+		}
+	});
+
+	return {
+		lineBackgroundRef,
+		lineWidth,
+		elBgId,
+		elId,
+		widthPx,
+		innserPercentage
+	}
+}

package/components/progress/src/progress.ts

@@ -0,0 +1,84 @@
+import type { ExtractPropTypes } from 'vue';
+
+/**
+ * 进度条 mode 有效值
+ */
+export const progressModes = ['line', 'circle'] as const;
+
+export const progressProps = {
+	/**
+	 * @description 进度条类型
+	 * @values 'line' - 线形, 'circle' - 圆形
+	 * @default 'line'
+	 */
+	mode: {
+		type: String,
+		values: progressModes,
+		default: 'line'
+	},
+	/**
+	 * @description 激活部分的颜色
+	 * @default '#2979ff'
+	 */
+	activeColor: {
+		type: String,
+		default: '#2979ff'
+	},
+	/**
+	 * @description 未激活部分的颜色
+	 * @default '#f0f0f0'
+	 */
+	inactiveColor: {
+		type: String,
+		default: '#f0f0f0'
+	},
+	/**
+	 * @description 进度百分比，数值
+	 * @default 0
+	 */
+	percent: {
+		type: [String, Number],
+		default: 0
+	},
+	/**
+	 * @description 是否在进度条内部显示百分比的值
+	 * @default true
+	 */
+	showPercent: {
+		type: Boolean,
+		default: true
+	},
+	/**
+	 * @description 进度条的高度（仅mode=line时生效）
+	 * @default 12
+	 */
+	height: {
+		type: [String, Number],
+		default: 12
+	},
+	/**
+	 * @description 进度条大小（仅mode=circle时生效）
+	 * @default 200
+	 */
+	size: {
+		type: [String, Number],
+		default: 200
+	},
+	/**
+	 * @description 进度条圆环宽度（仅mode=circle时生效）
+	 * @default 12
+	 */
+	borderWidth: {
+		type: [String, Number],
+		default: 14
+	},
+	/**
+	 * @description 圆环执行动画的时间，单位 ms（仅mode=circle时生效）
+	 */
+	duration: {
+		type: Number,
+		default: 1500
+	}
+};
+
+export type ProgressProps = ExtractPropTypes<typeof progressProps>;

package/components/progress/src/progress.vue

@@ -0,0 +1,150 @@
+<template>
+	<view class="fu-progress">
+		<!-- 线形 -->
+		<view class="fu-line-progress" v-if="mode === 'line'">
+			<view ref="lineBackgroundRef" class="fu-line-progress__background" :style="[lineStyle]"></view>
+			<view class="fu-line-progress__line" :style="[progressStyle]">
+				<slot>
+					<text class="fu-line-progress__text" v-if="showPercent && percent >= 10">{{ innserPercentage + '%' }}</text>
+				</slot>
+			</view>
+		</view>
+
+		<!-- 圆形 -->
+		<view class="fu-circle-progress" :style="{width: widthPx + 'px', height: widthPx + 'px'}"
+			v-if="mode === 'circle'">
+			<!-- 支付宝小程序不支持canvas-id属性，必须用id属性 -->
+			<!-- 默认圆环 -->
+			<canvas 
+				:id="elBgId" 
+				:canvas-id="elBgId" 
+				class="fu-circle-progress__canvas-bg" 
+				:style="{width: widthPx + 'px', height: widthPx + 'px'}">
+			</canvas>
+			<!-- 进度圆环 -->
+			<canvas 
+				:id="elId" 
+				:canvas-id="elId" 
+				class="fu-circle-progress__canvas" 
+				:style="{width: widthPx + 'px', height: widthPx + 'px'}">
+			</canvas>
+			<view class="fu-circle-progress__content">
+				<slot v-if="$slots.default || $slots.$default"></slot>
+				<view class="fu-circle-progress__content__percent" v-else-if="showPercent">{{ percent + '%' }}</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script lang="ts" setup>
+	/**
+	 * Progress 进度条
+	 * @description 此组件展示操作或任务的当前进度，比如上传文件，是一个线形的进度条。
+	 * @tutorial http://www.fusions.top/components/progress.html
+	 * @property {String} mode = [line|circle] 进度条类型
+	 * 	@value line 线形
+	 * 	@value circle 圆形
+	 * @property {String} activeColor 激活部分的颜色（默认 '#2979ff'）
+	 * @property {String} inactiveColor 未激活部分的颜色（默认 '#f0f0f0'）
+	 * @property {String | Number} percent 进度百分比，数值（默认 0）
+	 * @property {Boolean} showPercent = [true|false] 是否在进度条内部显示百分比的值（默认 true）
+	 * @property {String | Number} height 进度条的高度，单位px（仅mode = line有效）
+	 * @property {String | Number} size 进度条大小（仅mode = circle有效）
+	 * @property {String | Number} borderWidth 进度条圆环宽度（仅mode = circle有效）
+	 * @property {Number} duration 圆环执行动画的时间，单位 ms（仅mode = circle有效）
+	 * 
+	 * @example <fu-progress :percent="percent"></fu-progress>
+	 */
+	import { progressProps } from './progress';
+	import { useProgress, useProgressCustomStyle } from './composables';
+	
+	defineOptions({ name: 'FuProgress', options: { virtualHost: true } });
+	
+	const props = defineProps(progressProps);
+	
+	const {
+		lineBackgroundRef,
+		lineWidth,
+		elBgId,
+		elId,
+		widthPx,
+		innserPercentage
+	} = useProgress(props);
+	
+	const {
+		lineStyle,
+		progressStyle
+	} = useProgressCustomStyle(props, lineWidth);
+</script>
+
+<style lang="scss" scoped>
+	@use '../../../style/components.scss';
+	$bg-color: #f0f0f0;
+
+	// 线形
+	.fu-line-progress {
+		@include components.flex(row);
+		align-items: stretch;
+		position: relative;
+		flex: 1;
+		overflow: hidden;
+		border-radius: 100px;
+
+		&__background {
+			background-color: $bg-color;
+			border-radius: 100px;
+			flex: 1;
+		}
+
+		&__line {
+			@include components.flex(row);
+			align-items: center;
+			justify-content: flex-end;
+			position: absolute;
+			top: 0;
+			left: 0;
+			bottom: 0;
+			color: #ffffff;
+			border-radius: 100px;
+			transition: width 0.5s ease;
+		}
+
+		&__text {
+			font-size: 10px;
+			align-items: center;
+			text-align: right;
+			color: #FFFFFF;
+			margin-right: 5px;
+			transform: scale(0.9);
+		}
+	}
+
+	// 圆形
+	.fu-circle-progress {
+		position: relative;
+		/* #ifndef APP-NVUE */
+		display: inline-flex;
+		/* #endif */
+		align-items: center;
+		justify-content: center;
+		background-color: transparent;
+
+		&__canvas {
+			position: absolute;
+
+			&-bg {
+				position: absolute;
+			}
+		}
+
+		&__content {
+			@include components.flex;
+			align-items: center;
+			justify-content: center;
+
+			&__percent {
+				font-size: 28rpx;
+			}
+		}
+	}
+</style>

package/components/rate/index.ts

@@ -0,0 +1 @@
+export * from './src/rate'

package/components/rate/src/composables/index.ts

@@ -0,0 +1 @@
+export * from './use-rate'

package/components/rate/src/composables/use-rate.ts

@@ -0,0 +1,196 @@
+import { computed, ref, watch, type SetupContext, onMounted } from 'vue';
+import type { RateProps, RateEmits } from '../rate';
+import { useCommon } from '../../../../hooks';
+import { isPC } from "../../../../utils/isPC";
+// #ifdef APP-NVUE
+const dom = uni.requireNativePlugin('dom')
+// #endif
+
+export const useRate = (props: RateProps, $emit: SetupContext<RateEmits>['emit']) => {
+	const { getRect } = useCommon();
+	const rateRef = ref();
+	const elId = uni.$fu.uuid();
+	const valueSync = ref(Number(props.modelValue));
+	const userMouseFristMove = ref(true);
+	const userRated = ref(false);
+	const userLastRate = ref(1);
+	const rateBoxLeft = ref(0);
+	const oldValue = ref<any>(null);
+	
+	const stars = computed(() => {
+		const value = valueSync.value? valueSync.value : 0;
+		const starList = [];
+		const floorValue = Math.floor(value);
+		const ceilValue = Math.ceil(value);
+		for (let i = 0; i < Number(props.max); i++) {
+			if (floorValue > i) {
+				starList.push({
+					activeWitch: "100%"
+				});
+			} else if (ceilValue - 1 === i) {
+				starList.push({
+					activeWitch: (value - floorValue) * 100 + "%"
+				});
+			} else {
+				starList.push({
+					activeWitch: "0"
+				});
+			}
+		}
+		return starList;
+	});
+
+	const marginNumber = computed(() => {
+		return Number(props.margin)
+	});
+	
+	/**
+	 * 获取星星距离屏幕左侧距离
+	 */
+	const initSize = () => {
+		// #ifndef APP-NVUE
+		getRect(`#${elId}`).then((ret: any) => {
+			if (ret) {
+				rateBoxLeft.value = ret.left;
+			}
+		})
+		// #endif
+		// #ifdef APP-NVUE
+		dom.getComponentRect(rateRef.value, (ret: any) => {
+			const size = ret.size;
+			if (size) {
+				rateBoxLeft.value = size.left;
+			}
+		})
+		// #endif
+	};
+	
+	// 获取星星个数
+	const handleRateCount = (clientX: number) => {
+	    initSize()
+	    const size = Number(props.size)
+	    if (isNaN(size)) {
+	      console.error('size 属性只能设置为数字')
+	      return
+	    }
+	    
+	    const rateMoveRange = clientX - rateBoxLeft.value
+	    let index = parseInt(String(rateMoveRange / (size + marginNumber.value)))
+	    index = index < 0 ? 0 : index
+	    index = index > Number(props.max) ? Number(props.max) : index
+	    const range = parseInt(String(rateMoveRange - (size + marginNumber.value) * index))
+	    
+	    // #ifndef H5
+	    if (oldValue.value === index) return
+	    // #endif
+	    
+	    oldValue.value = index
+	    
+	    let value = 0
+	    if (props.allowHalf) {
+	      if (range > (size / 2)) {
+	        value = index + 1
+	      } else {
+	        value = index + 0.5
+	      }
+	    } else {
+	      value = index + 1
+	    }
+	
+	    value = Math.max(0.5, Math.min(value, Number(props.max)))
+	    valueSync.value = value
+	    handleChange()
+	};
+	
+	/**
+	 * 触发动态修改
+	 */
+	const handleChange = () => {
+		$emit("input", valueSync.value);
+		$emit("update:modelValue", valueSync.value);
+		$emit("change", {
+			value: valueSync.value
+		});
+	};
+	
+	const touchstart = (e: any) => {
+		// #ifdef H5
+		if (isPC()) return
+		// #endif
+		if (props.readonly || props.disabled) return
+		const { clientX, screenX } = e.changedTouches[0];
+		// 做一下兼容，只有 Nvue 下才有 screenX，其他平台式 clientX
+		handleRateCount(clientX || screenX)
+	};
+	
+	const touchmove = (e: any) => {
+		// #ifdef H5
+		if (isPC()) return
+		// #endif
+		if (props.readonly || props.disabled || !props.touchable) return
+		const { clientX, screenX } = e.changedTouches[0];
+		handleRateCount(clientX || screenX)
+	};
+
+	/**
+	 * 兼容 PC @tian
+	 */
+	const mousedown = (e: any) => {
+		// #ifdef H5
+		if (!isPC()) return
+		if (props.readonly || props.disabled) return
+		const { clientX } = e
+		userLastRate.value = valueSync.value;
+		handleRateCount(clientX)
+		userRated.value = true;
+		// #endif
+	};
+	
+	const mousemove = (e: any) => {
+		// #ifdef H5
+		if (!isPC()) return
+		if (userRated.value) return
+		if (userMouseFristMove.value) {
+			userLastRate.value = valueSync.value;
+			userMouseFristMove.value = false;
+		}
+		if (props.readonly || props.disabled || !props.touchable) return
+		const { clientX } = e
+		handleRateCount(clientX)
+		// #endif
+	};
+	
+	const mouseleave = () => {
+		// #ifdef H5
+		if (!isPC()) return
+		if (props.readonly || props.disabled || !props.touchable) return
+		if (userRated.value) {
+			userRated.value = false;
+			return
+		}
+		valueSync.value = userLastRate.value;
+		// #endif
+	};
+	
+	// 生命周期
+	onMounted(() => {
+		initSize()
+	});
+	
+	// 监听事件
+	watch(() => props.modelValue, (newVal) => {
+		valueSync.value = Number(newVal);
+	});
+	
+	return {
+		rateRef,
+		elId,
+		stars,
+		marginNumber,
+		touchstart,
+		touchmove,
+		mousedown,
+		mousemove,
+		mouseleave
+	}
+}