fusions-ui 1.2.7 → 1.2.8

package/components/rate/src/rate.ts

@@ -0,0 +1,114 @@
+import type { ExtractPropTypes } from 'vue';
+
+export const rateProps = {
+	/**
+	 * @description v-model 当前评分
+	 */
+	modelValue: {
+		type: [Number, String],
+		default: 0
+	},
+	/**
+	 * @description  星星的类型，是否镂空
+	 * @default true
+	 */
+	isFill: {
+		type: Boolean,
+		default: true
+	},
+	/**
+	 * @description 星星选中状态颜色
+	 * @default '#ffca3e'
+	 */
+	activeColor: {
+		type: String,
+		default: "#ffca3e"
+	},
+	/**
+	 * @description 星星未选中的颜色
+	 * @default '#ececec'
+	 */
+	inactiveColor: {
+		type: String,
+		default: "#ececec"
+	},
+	/**
+	 * @description 星星禁用状态颜色
+	 * @default "#c0c0c0"
+	 */
+	disabledColor: {
+		type: String,
+		default: "#c0c0c0"
+	},
+	/**
+	 * @description 星星的大小
+	 * @default 24
+	 */
+	size: {
+		type: [Number, String],
+		default: 24
+	},
+	/**
+	 * @description 最大评分
+	 * @default 5
+	 */
+	max: {
+		type: [Number, String],
+		default: 5
+	},
+	/**
+	 * @description 星星的间距
+	 * @default 0
+	 */
+	margin: {
+		type: [Number, String],
+		default: 0
+	},
+	/**
+	 * @description 是否可点击
+	 * @default false
+	 */
+	disabled: {
+		type: Boolean,
+		default: false
+	},
+	/**
+	 * @description 是否只读
+	 * @default false
+	 */
+	readonly: {
+		type: Boolean,
+		default: false
+	},
+	/**
+	 * @description 是否显示半星
+	 * @default false
+	 */
+	allowHalf: {
+		type: Boolean,
+		default: false
+	},
+	/**
+	 * @description 是否支持滑动手势
+	 * @default true
+	 */
+	touchable: {
+		type: Boolean,
+		default: true
+	}
+};
+
+export const rateEmits = {
+	'update:modelValue': (_e: any) => true,
+	/**
+	 * @description 输入事件
+	 */
+	input: (_e: any) => true,
+	/**
+	 * @description 评分改变时触发
+	 */
+	change: (_e: any) => true
+};
+
+export type RateProps = ExtractPropTypes<typeof rateProps>;
+export type RateEmits = typeof rateEmits;

package/components/rate/src/rate.vue

@@ -0,0 +1,113 @@
+<template>
+	<view>
+		<view ref="rateRef" :id="elId" class="fu-rate">
+			<view 
+				class="fu-rate__icon" 
+				:class="{'fu-cursor-not-allowed': disabled}"
+				:style="{ marginRight: marginNumber + 'px' }" 
+				v-for="(star, index) in stars" :key="index"
+				@touchstart.stop="touchstart" 
+				@touchmove.stop="touchmove" 
+				@mousedown.stop="mousedown"
+				@mousemove.stop="mousemove" 
+				@mouseleave="mouseleave">
+				<fu-icon :color="inactiveColor" :size="size" :name="isFill ? 'star-fill' : 'star'" />
+				<!-- #ifdef APP-NVUE -->
+				<view class="fu-rate__icon-on" :style="{ width: star.activeWitch.replace('%', '') * size / 100 + 'px'}">
+					<fu-icon 
+						style="text-align: left;" 
+						:color="disabled? '#cccccc': activeColor" 
+						:size="size" 
+						name="star-fill" />
+				</view>
+				<!-- #endif -->
+				<!-- #ifndef APP-NVUE -->
+				<view class="fu-rate__icon-on" :style="{ width: star.activeWitch}">
+					<fu-icon 
+						:color="disabled? disabledColor: activeColor" 
+						:size="size"
+						name="star-fill" />
+				</view>
+				<!-- #endif -->
+			</view>
+		</view>
+	</view>
+</template>
+
+<script lang="ts" setup>
+	/**
+	 * Rate 评分
+	 * @description 此组件多用于商品评价打分、服务态度评价、用户满意度等场景。
+	 * @tutorial http://www.fusions.top/components/rate.html
+	 * @property {Number | String} v-model 当前评分
+	 * @property {Boolean} isFill = [true|false] 星星的类型，是否为实心类型, 默认为实心
+	 * @property {String} activeColor 选中状态的星星颜色，默认为 "#ffca3e"
+	 * @property {String} inactiveColor 未选中状态的星星颜色，默认为 "#ececec"
+	 * @property {String} disabledColor 禁用状态的星星颜色，默认为 "#c0c0c0"
+	 * @property {Number | String} size 星星的大小
+	 * @property {Number | String} max 最大评分评分数量，目前一分一颗星
+	 * @property {Number | String} margin 星星的间距，单位 px
+	 * @property {Boolean} disabled = [true|false] 	是否为禁用状态，默认为 false
+	 * @property {Boolean} readonly = [true|false] 	是否为只读状态，默认为 false
+	 * @property {Boolean} allowHalf = [true|false] 是否实现半星，默认为 false
+	 * @property {Boolean} touchable = [true|false] 是否支持滑动手势，默认为 true
+	 * 
+	 * @event {Function} change 改变时触发事件，e={value:Number}
+	 * @example <fu-rate></fu-rate>
+	 */
+	import { rateEmits, rateProps} from './rate';
+	import { useRate } from './composables';
+	
+	defineOptions({ name: 'FuRate', options: { virtualHost: true } });
+	
+	const props = defineProps(rateProps);
+	const $emit = defineEmits(rateEmits);
+	
+	const {
+		rateRef,
+		elId,
+		stars,
+		marginNumber,
+		touchstart,
+		touchmove,
+		mousedown,
+		mousemove,
+		mouseleave
+	} = useRate(props, $emit);
+</script>
+
+<style lang="scss" scoped>
+	@use '../../../style/components.scss';
+	
+	.fu-rate {
+		@include components.flex(row);
+		line-height: 1;
+		font-size: 0;
+		/* #ifdef H5 */
+		cursor: pointer;
+		/* #endif */
+	}
+
+	.fu-rate__icon {
+		position: relative;
+		line-height: 1;
+		font-size: 0;
+	}
+
+	.fu-rate__icon-on {
+		/* #ifndef APP-NVUE */
+		overflow: hidden;
+		/* #endif */
+		position: absolute;
+		top: 0;
+		left: 0;
+		line-height: 1;
+		text-align: left;
+	}
+
+	.fu-cursor-not-allowed {
+		/* #ifdef H5 */
+		cursor: not-allowed !important;
+		/* #endif */
+	}
+</style>

package/components/read-more/index.ts

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

package/components/read-more/src/composables/index.ts

@@ -0,0 +1,2 @@
+export * from './read-more-custom'
+export * from './use-read-more'

package/components/read-more/src/composables/read-more-custom.ts

@@ -0,0 +1,46 @@
+import { computed, Ref } from 'vue';
+import type { ReadMoreProps } from '../read-more';
+
+export const useReadMoreCustomStyle = (
+	props: ReadMoreProps, 
+	isLongContent: Ref<boolean>, 
+	showMore: Ref<boolean>, 
+	initHeight: Ref<boolean>,
+	contentHeight: Ref<number>,
+) => {
+	const contentStyle = computed(() => {
+		let style: Record<string, any> = {};
+		if (isLongContent.value && !showMore.value) {
+			style.height = `${props.showHeight}rpx`;
+		} else {
+			if (!initHeight.value) {
+				style.height = 'auto';
+			} else {
+				style.height = `${contentHeight.value}px`;
+			}
+		}
+		return style
+	});
+	
+	const innerShadowStyle = computed(() => {
+		let style = {}
+		// 折叠时才需要阴影样式
+		if (!showMore.value) {
+			style = Object.assign(style, props.shadowStyle)
+		}
+		return style
+	});
+	
+	const fontStyle = computed(() => {
+		return {
+			color: props.color,
+			fontSize: uni.$fu.addUnit(props.size)
+		}
+	});
+	
+	return {
+		contentStyle,
+		innerShadowStyle,
+		fontStyle
+	}
+}

package/components/read-more/src/composables/use-read-more.ts

@@ -0,0 +1,72 @@
+import { ref, computed, nextTick, type SetupContext, watch, onMounted } from "vue";
+import type { ReadMoreProps, ReadMoreEmits } from '../read-more';
+import { useCommon } from '../../../../hooks';
+
+export const useReadMore = (props: ReadMoreProps, $emit: SetupContext<ReadMoreEmits>['emit']) => {
+	const { getRect } = useCommon();
+	const elId = uni.$fu.uuid();
+	// 标记是否已经初始化高度完成
+	const initHeight = ref(false);
+	// 是否需要隐藏一部分内容
+	const isLongContent = ref(false);
+	// 当前展开的打开、关闭状态
+	const showMore = ref(false);
+	// 内容的高度
+	const contentHeight = ref(0);
+	
+	const paramsChange = computed(() => {
+		return `${props.openText}-${props.showHeight}`
+	});
+	
+	// 初始化组件
+	const init = () => {
+		// 判断高度，如果真实内容的高度大于占位高度，则显示展开与收起的控制按钮
+		getRect('#' + elId).then((res: any) => {
+			contentHeight.value = res.height;
+			initHeight.value = true;
+			if (res.height > uni.upx2px(props.showHeight)) {
+				isLongContent.value = true;
+				showMore.value = false;
+			}
+		})
+	};
+
+	// 展开或者收起内容
+	const toggleReadMore = () => {
+		showMore.value = !showMore.value
+		// 是否显示收起按钮
+		if (!props.closeBtn) isLongContent.value = false
+		
+		if(showMore.value) {
+			$emit('open', props.index)
+		} else {
+			$emit('close', props.index)
+		}
+	};
+	
+	// 生命周期
+	onMounted(() => {
+		nextTick(() => {
+			init()
+		})
+	});
+	
+	// watch监听事件
+	watch(() => paramsChange.value, () => {
+		initHeight.value = false;
+		isLongContent.value = false;
+		showMore.value = true;
+		nextTick(() => {
+			init()
+		})
+	})
+	
+	return {
+		elId,
+		initHeight,
+		isLongContent,
+		showMore,
+		contentHeight,
+		toggleReadMore
+	}
+}

package/components/read-more/src/read-more.ts

@@ -0,0 +1,102 @@
+import type { ExtractPropTypes } from 'vue';
+
+export const readMoreProps = {
+	/**
+	 * @description 默认占位高度
+	 * @default 400
+	 */
+	showHeight: {
+		type: Number,
+		default: 400
+	},
+	/**
+	 * @description 显示收起按钮
+	 * @default false
+	 */
+	closeBtn: {
+		type: Boolean,
+		default: false
+	},
+	/**
+	 * @description 展开提示文字
+	 * @default '展开阅读全文'
+	 */
+	openText: {
+		type: String,
+		default: '展开阅读全文'
+	},
+	/**
+	 * @description 收起提示文字
+	 * @default '收起'
+	 */
+	closeText: {
+		type: String,
+		default: '收起'
+	},
+	/**
+	 * @description 展开提示图标
+	 * @default 'down'
+	 */
+	openIcon: {
+		type: String,
+		default: 'down'
+	},
+	/**
+	 * @description 收起提示图标
+	 * @default 'up'
+	 */
+	closeIcon: {
+		type: String,
+		default: 'up'
+	},
+	/**
+	 * @description 阴影样式
+	 */
+	shadowStyle: {
+		type: Object,
+		default() {
+			return {
+				backgroundImage: "linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 80%)",
+				paddingTop: "300rpx",
+				marginTop: "-300rpx"
+			}
+		}
+	},
+	/**
+	 * @description 组件标识
+	 */
+	index: {
+		type: [String, Number],
+		default: ''
+	},
+	/**
+	 * @description 字体颜色
+	 * @default '#e6544f'
+	 */
+	color: {
+		type: String,
+		default: '#e6544f'
+	},
+	/**
+	 * @description 字体大小
+	 * @default 14
+	 */
+	size: {
+		type: [String, Number],
+		default: 14
+	}
+};
+
+export const readMoreEmits = {
+	/**
+	 * @description 点击展开时触发
+	 */
+	open: (_e: any) => true,
+	/**
+	 * @description 点击收起时触发
+	 */
+	close: (_e: any) => true
+};
+
+export type ReadMoreProps = ExtractPropTypes<typeof readMoreProps>;
+export type ReadMoreEmits = typeof readMoreEmits;

package/components/read-more/src/read-more.vue

@@ -0,0 +1,104 @@
+<template>
+	<view class="fu-read-more">
+		<!-- 内容 -->
+		<view :id="elId" class="fu-read-more__content" :style="[contentStyle]">
+			<slot></slot>
+		</view>
+	
+		<!-- 展开收起按钮 -->
+		<view class="fu-read-more__show-more__wrap" :class="{'fu-read-more__show-more': showMore}" :style="[innerShadowStyle]" @tap="toggleReadMore" v-if="isLongContent">
+			<text class="fu-read-more__show-more--text" :style="[fontStyle]">{{ showMore ? closeText : openText }}</text>
+			<view class="fu-read-more__show-more--icon" v-if="showMore || openIcon">
+				<fu-icon :name="showMore? closeIcon: openIcon? openIcon: ''" :size="fontStyle.fontSize" :color="fontStyle.color" />
+			</view>
+		</view>
+	</view>
+</template>
+
+<script lang="ts" setup>
+	/**
+	 * ReadMore 组件
+	 * @description 此组件查看更多 一般用于内容过多，或者限制部分查看
+	 * @tutorial http://www.fusions.top/components/readMore.html
+	 * @property {Number} showHeight 默认占位高度（默认 400） 
+	 * @property {Boolean} closeBtn = [true|false] 显示收起按钮（默认 false）
+	 * @property {String} openText 展开提示文字（默认 '展开阅读全文'） 
+	 * @property {String} closeText 收起提示文字（默认 '收起'） 
+	 * @property {String} openIcon 展开提示图标（默认 'down'） 
+	 * @property {String} closeIcon 收起提示图标（默认 'up'） 
+	 * @property {Object} shadowStyle 阴影样式
+	 * @property {String | Number} index 组件标识 
+	 * @property {String} color 字体颜色（默认 '#e6544f'）
+	 * @property {String | Number} size 字体大小（默认 14）
+	 * 
+	 * @event {Function} open 点击展开时触发
+	 * @event {Function} close 点击收起时触发
+	 * @example <fu-read-more>...</fu-read-more>
+	 */
+	import { readMoreEmits, readMoreProps } from './read-more';
+	import { useReadMore, useReadMoreCustomStyle } from './composables';
+	
+	defineOptions({ name: 'FuReadMore', options: { virtualHost: true } });
+	
+	const props = defineProps(readMoreProps);
+	const $emit = defineEmits(readMoreEmits);
+	
+	const {
+		elId,
+		initHeight,
+		isLongContent,
+		showMore,
+		contentHeight,
+		toggleReadMore
+	} = useReadMore(props, $emit);
+	
+	const {
+		contentStyle,
+		innerShadowStyle,
+		fontStyle
+	} = useReadMoreCustomStyle(props, isLongContent, showMore, initHeight, contentHeight);
+</script>
+
+<style lang="scss" scoped>
+	@use '../../../style/components.scss';
+	
+	.fu-read-more {
+
+		&__content {
+			font-size: 28rpx;
+			color: #333333;
+			line-height: 1.8;
+			text-align: left;
+			/* #ifndef APP-NVUE */
+			overflow: hidden;
+			/* #endif */
+			transition: all 0.3s linear;
+		}
+
+		&__show-more {
+			padding-top: 0;
+			background: none;
+			margin-top: 20rpx;
+
+			&__wrap {
+				@include components.flex(row);
+				position: relative;
+				width: 100%;
+				align-items: center;
+				justify-content: center;
+				padding-bottom: 26rpx;
+			}
+
+			&--text {
+				@include components.flex(row);
+				align-items: center;
+				justify-content: center;
+				line-height: 1;
+			}
+
+			&--icon {
+				margin-left: 14rpx;
+			}
+		}
+	}
+</style>

package/components/safe-bottom/index.ts

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

package/components/safe-bottom/src/composables/index.ts

@@ -0,0 +1,2 @@
+export * from './safe-bottom-custom'
+export * from './use-safe-bottom'

package/components/safe-bottom/src/composables/safe-bottom-custom.ts

@@ -0,0 +1,18 @@
+import { computed, type CSSProperties } from 'vue';
+import type { SafeBottomProps } from '../safe-bottom';
+
+export const useSafeBottomCustomStyle = (props: SafeBottomProps) => {
+	const safeBottomStyle = computed<CSSProperties>(() => {
+		let style: Record<string, any> = {};
+		// #ifdef APP-NVUE || MP-TOUTIAO || MP-LARK
+		// nvue下，高度使用js计算填充
+		style.height = uni.$fu.addUnit(uni.$fu.sys()?.safeAreaInsets?.bottom, 'px');
+		// #endif
+		
+		return uni.$fu.deepMerge(style, uni.$fu.addStyle(props.customStyle));
+	});
+	
+	return {
+		safeBottomStyle
+	}
+}

package/components/safe-bottom/src/composables/use-safe-bottom.ts

@@ -0,0 +1,17 @@
+import { ref, onMounted } from 'vue';
+
+export const useSafeBottom = () => {
+	const isNvue = ref(false);
+	
+	// 生命周期
+	onMounted(() => {
+		// #ifdef APP-NVUE
+		// 标识是否为nvue
+		isNvue.value = true;
+		// #endif
+	});
+	
+	return {
+		isNvue
+	}
+};

package/components/safe-bottom/src/safe-bottom.ts

@@ -0,0 +1,8 @@
+import type { ExtractPropTypes } from 'vue';
+import { componentProps } from '../../../constants';
+
+export const safeBottomProps = {
+	...componentProps
+}
+
+export type SafeBottomProps = ExtractPropTypes<typeof safeBottomProps>;

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

@@ -0,0 +1,43 @@
+<template>
+	<view 
+		class="fu-safe-area-bottom"
+		:class="[!isNvue && `fu-safe-area-inset-bottom`, customClass]"
+		:style="[safeBottomStyle]">
+	</view>
+</template>
+
+<script lang="ts" setup>
+	/**
+	 * SafeArea 安全区
+	 * @description 主要是针对IPhone X等一些底部带指示条的机型，指示条的操作区域与页面底部存在重合，容易导致用户误操作，因此我们需要针对这些机型进行底部安全区适配。
+	 * @tutorial http://www.fusions.top/components/safeBottom.html
+	 * @property {String} mode = [top|bottom] 安全区方向
+	 * 	@value top 顶部安全区
+	 * 	@value bottom 底部安全区
+	 * @property {String} customClass 定义需要用到的外部类
+	 * @property {String|Object} customStyle 定义需要用到的外部样式
+	 * @example <fu-safe-area-bottom></fu-safe-area-bottom>
+	 */
+	import { safeBottomProps } from './safe-bottom';
+	import { useSafeBottom, useSafeBottomCustomStyle } from './composables';
+	
+	defineOptions({ name: 'FuSafeArea', options: { virtualHost: true } })
+	
+	const props = defineProps(safeBottomProps);
+	
+	const {
+		isNvue
+	} = useSafeBottom();
+	
+	const {
+		safeBottomStyle
+	} = useSafeBottomCustomStyle(props);
+</script>
+
+<style lang="scss" scoped>
+	.fu-safe-area-bottom {
+		/* #ifndef APP-NVUE */
+		width: 100%;
+		/* #endif */
+	}
+</style>

package/components/scroll-list/index.ts

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

package/components/scroll-list/src/composables/index.ts

@@ -0,0 +1,2 @@
+export * from './scroll-list-custom'
+export * from './use-scroll-list'