fusions-ui 1.2.6 → 1.2.8

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

@@ -0,0 +1,210 @@
+import { getCurrentInstance, ref, watch, nextTick, type SetupContext, onMounted } from 'vue';
+import type { TabsProps, TabsEmits } from '../tabs';
+import { badgeProps } from '../../../badge/src/badge';
+// #ifdef APP-NVUE
+const animation = uni.requireNativePlugin('animation');
+const dom = uni.requireNativePlugin('dom');
+// #endif
+
+export const useTabs = (props: TabsProps, $emit: SetupContext<TabsEmits>['emit']) => {
+	const instance = getCurrentInstance();
+	const firstTime = ref(true);
+	const scrollLeft = ref(0);
+	const scrollViewWidth = ref(0);
+	const lineOffsetLeft = ref(0);
+	const tabsRect = ref<any>({
+		left: 0,
+		width: 0,
+		right: 0
+	});
+	const innerCurrent = ref(0);
+	
+	const setLineLeft = () => {
+		const tabItem = props.list[innerCurrent.value] as any;
+		if (!tabItem) {
+			return;
+		}
+		// 获取滑块该移动的位置
+		let offsetLeft = props.list.slice(0, innerCurrent.value).reduce((total, curr: any) => total + (curr.rect?.width || 0), 0);
+		// 获取下划线的数值px表示法
+		let lineWidth = uni.$fu.getPx(props.lineWidth);
+		// 如果传的值未带单位+设置了全局单位，则带上单位计算，这样才没有误差
+		if (uni.$fu.checkNumber(props.lineWidth) && 'px') {
+			lineWidth = uni.$fu.getPx(`${props.lineWidth}px`);
+		}
+		lineOffsetLeft.value = (offsetLeft as number) + ((tabItem.rect.width as number) - lineWidth) / 2;
+		// #ifdef APP-NVUE
+		// 第一次移动滑块，无需过渡时间
+		animationLine(lineOffsetLeft.value, firstTime.value ? 0 : props.duration)
+		// #endif
+		// 如果是第一次执行此方法，让滑块在初始化时，瞬间滑动到第一个tab item的中间
+		// 这里需要一个定时器，因为在非nvue下，是直接通过style绑定过渡时间，需要等其过渡完成后，再设置为false(非第一次移动滑块)
+		if (firstTime.value) {
+			setTimeout(() => {
+				firstTime.value = false;
+			}, 20);
+		}
+	};
+	
+	// nvue下设置滑块的位置
+	const animationLine = (x: number, duration: number = 0) => {
+		// #ifdef APP-NVUE
+		const ref = instance.proxy.$refs['fu-tabs__wrapper__nav__line'];
+		animation.transition(ref, {
+			styles: {
+				transform: `translateX(${x}px)`
+			},
+			duration
+		})
+		// #endif
+	};
+	
+	// 点击某一个标签
+	const handleClick = (item: any, index: number) => {
+		// 因为标签可能为disabled状态，所以click是一定会发出的，但是change事件是需要可用的状态才发出
+		$emit('click', {
+			...item,
+			index
+		})
+		// 如果disabled状态，返回
+		if (item.disabled) return
+		if(innerCurrent.value != index) {
+			$emit('change', {
+				...item,
+				index
+			})
+		}
+		innerCurrent.value = index;
+		// #ifndef APP-NVUE
+		nextTick(()=>{
+			resize()
+		})
+		// #endif
+		// #ifdef APP-NVUE
+		nextTick(()=>{
+			// nvue模式下再给点延时，确保万无一失
+			uni.$fu.sleep(30).then(() => {
+				resize()
+			});
+		})
+		// #endif
+	};
+	
+	const init = () => {
+		uni.$fu.sleep().then(() => {
+			resize()
+		})
+	};
+	
+	const setScrollLeft = () => {
+		// 当前活动tab的布局信息，有tab菜单的width和left(为元素左边界到父元素左边界的距离)等信息
+		const tabRect: any = props.list[innerCurrent.value];
+		// 累加得到当前item到左边的距离
+		const offsetLeft = props.list.slice(0, innerCurrent.value).reduce((total, curr: any) => {
+			return total + curr.rect.width
+		}, 0)
+		// 此处为屏幕宽度
+		const windowWidth = uni.$fu.sys().windowWidth;
+		// 将活动的tabs-item移动到屏幕正中间，实际上是对scroll-view的移动
+		let scrollLeftVal = (offsetLeft as number) - (tabsRect.value.width - tabRect.rect.width) / 2 - (windowWidth - tabsRect.value.right) / 2 + tabsRect.value.left / 2;
+		// 这里做一个限制，限制scrollLeft的最大值为整个scroll-view宽度减去tabs组件的宽度
+		scrollLeftVal = Math.min(scrollLeftVal, scrollViewWidth.value - tabsRect.value.width);
+		scrollLeft.value = Math.max(0, scrollLeftVal);
+	};
+	
+	// 获取所有标签的尺寸
+	const resize = () => {
+		// 如果不存在list，则不处理
+		if(props.list.length === 0) {
+			return
+		}
+		Promise.all([getTabsRect(), getAllItemRect()]).then(([tabsRectData, itemRect = []]) => {
+			tabsRect.value = tabsRectData;
+			scrollViewWidth.value = 0;
+			(itemRect as any[]).map((item, index) => {
+				// 计算scroll-view的宽度，这里
+				scrollViewWidth.value += item.width;
+				// 另外计算每一个item的中心点X轴坐标
+				(props.list[index] as any).rect = item;
+			})
+			// 获取了tabs的尺寸之后，设置滑块的位置
+			setLineLeft()
+			setScrollLeft()
+		})
+	};
+	
+	// 获取导航菜单的尺寸
+	const getTabsRect = () => {
+		return new Promise(resolve => {
+			queryRect('fu-tabs__wrapper__scroll-view').then(size => resolve(size))
+		})
+	};
+	
+	// 获取所有标签的尺寸
+	const getAllItemRect = () => {
+		return new Promise(resolve => {
+			const promiseAllArr = props.list.map((_, index) => queryRect(`fu-tabs__wrapper__nav__item-${index}`, true));
+			Promise.all(promiseAllArr).then(sizes => resolve(sizes))
+		})
+	};
+	
+	// 获取各个标签的尺寸
+	const queryRect = (el: string, item?: any) => {
+		return new Promise(resolve => {
+			// #ifndef APP-NVUE
+			let query = uni.createSelectorQuery().in(instance);
+			query.select(`.${el}`).boundingClientRect(data => {
+				resolve(data)
+			}).exec();
+			// #endif
+			// #ifdef APP-NVUE
+			// nvue下，使用dom模块查询元素高度
+			// 返回一个promise，让调用此方法的主体能使用then回调
+				dom.getComponentRect(item ? instance.proxy.$refs[el][0] : instance.proxy.$refs[el], (res: any) => {
+					resolve(res.size)
+				})
+			// #endif
+		})		
+	};
+	
+	const getDefaultBadgeValue = (key: string) => {
+	  const propConfig = badgeProps[key as keyof typeof badgeProps]
+	  return propConfig?.default
+	}
+	
+	const getBadgeValue = (item: any, key: string) => {
+		return item.badge?.[key] || getDefaultBadgeValue[key]
+	};
+	
+	// 生命周期
+	onMounted(() => {
+		init()
+	});
+	
+	// watch监听事件
+	watch(() => props.current, (newVal: number) => {
+		// 内外部值不相等时，才尝试移动滑块
+		if (newVal !== innerCurrent.value) {
+			innerCurrent.value = newVal;
+			nextTick(() => {
+				resize()
+			})
+		}
+	}, { immediate: true });
+	
+	// list变化时，重新渲染list各项信息
+	watch(() => props.list, () => {
+		nextTick(() => {
+			resize()
+		})
+	});
+	
+	return {
+		firstTime,
+		scrollLeft,
+		lineOffsetLeft,
+		innerCurrent,
+		handleClick,
+		getBadgeValue
+	}
+}

package/components/tabs/src/tabs.ts

@@ -0,0 +1,123 @@
+import type { ExtractPropTypes } from 'vue';
+
+export const tabsProps = {
+	/**
+	 * @description 滑块的移动过渡时间，单位ms
+	 * @default 300
+	 */
+	duration: {
+		type: Number,
+		default: 300
+	},
+	/**
+	 * @description tabs标签数组
+	 */
+	list: {
+		type: Array,
+		default: () => []
+	},
+	/**
+	 * @description 滑块颜色
+	 */
+	lineColor: {
+		type: String,
+		default: ''
+	},
+	/**
+	 * @description 菜单选择中时的样式
+	 */
+	activeStyle: {
+		type: [String, Object],
+		default: () => ({
+			color: '#303133'
+		})
+	},
+	/**
+	 * @description 菜单非选中时的样式
+	 */
+	inactiveStyle: {
+		type: [String, Object],
+		default: () => ({
+			color: '#606266'
+		})
+	},
+	/**
+	 * @description 滑块长度
+	 * @default 20
+	 */
+	lineWidth: {
+		type: [String, Number],
+		default: 20
+	},
+	/**
+	 * @description 滑块高度
+	 * @default 3
+	 */
+	lineHeight: {
+		type: [String, Number],
+		default: 3
+	},
+	/**
+	 * @description 滑块背景显示大小，当滑块背景设置为图片时使用
+	 * @default 'cover'
+	 */
+	lineBgSize: {
+		type: String,
+		default: 'cover'
+	},
+	/**
+	 * @description 菜单item的样式
+	 */
+	itemStyle: {
+		type: [String, Object],
+		default: () => ({
+			height: '44px',
+			padding: '0 15px'
+		})
+	},
+	/**
+	 * @description 菜单是否可滚动
+	 * @default true
+	 */
+	scrollable: {
+		type: Boolean,
+		default: true
+	},
+	/**
+	 * @description 当前选中标签的索引
+	 */
+	current: {
+		type: [String, Number],
+		default: 0
+	},
+	/**
+	 * @description 默认读取的键名
+	 * @default 'name'
+	 */
+	keyName: {
+		type: String,
+		default: 'name'
+	},
+	/**
+	 * @description 各个元素的内边距可在itemStyle设置
+	 * @default '0 15px'
+	 */
+	padding: {
+		type: String,
+		default: '0 15px'
+	}
+};
+
+export const tabsEmits = {
+	/**
+	 * @description 点击标签时触发 index: 点击了第几个tab，索引从0开始
+	 */
+	click: (_e: any) => true,
+	/**
+	 * @description 标签改变时触发 index: 点击了第几个tab，索引从0开始
+	 */
+	change: (_e: any) => true
+};
+
+export type TabsProps = ExtractPropTypes<typeof tabsProps>;
+export type TabsEmits = typeof tabsEmits;

package/components/tabs/src/tabs.vue

@@ -0,0 +1,153 @@
+<template>
+	<view class="fu-tabs">
+		<view class="fu-tabs__wrapper">
+			<slot name="left" />
+			<view class="fu-tabs__wrapper__scroll-view-wrapper">
+				<scroll-view ref="fu-tabs__wrapper__scroll-view" class="fu-tabs__wrapper__scroll-view" :scroll-x="scrollable" :scroll-left="scrollLeft" scroll-with-animation :show-scrollbar="false">
+					<view ref="fu-tabs__wrapper__nav" class="fu-tabs__wrapper__nav" :style="{flex: scrollable? '' : 1}">
+						<view :ref="`fu-tabs__wrapper__nav__item-${index}`" class="fu-tabs__wrapper__nav__item" :class="[`fu-tabs__wrapper__nav__item-${index}`, (item as any)?.disabled && 'fu-tabs__wrapper__nav__item--disabled']"
+							:style="[{flex: scrollable? '': 1, padding}, itemStyle]" v-for="(item, index) in list" :key="index" @tap="handleClick(item, index)">
+							<text class="fu-tabs__wrapper__nav__item__text" :class="[(item as any)?.disabled && 'fu-tabs__wrapper__nav__item__text--disabled']" :style="[textStyle(index)]">{{ item[keyName] }}</text>
+							
+							<!-- 徽标 -->
+							<fu-badge 
+								:value="getBadgeValue(item, 'value')"
+								:isDot="getBadgeValue(item, 'isDot')"
+								:max="getBadgeValue(item, 'max')"
+								:type="getBadgeValue(item, 'type')"
+								:showZero="getBadgeValue(item, 'showZero')"
+								:bgColor="getBadgeValue(item, 'bgColor')"
+								:color="getBadgeValue(item, 'color')"
+								:shape="getBadgeValue(item, 'shape')"
+								:numberType="getBadgeValue(item, 'numberType')"
+								:inverted="getBadgeValue(item, 'inverted')"
+								:absolute="getBadgeValue(item, 'absolute')"
+								:offset="getBadgeValue(item, 'offset')"
+								customStyle="margin-left: 4px;" 
+								v-if="!!((item as any)?.badge && ((item as any)?.badge.isDot || (item as any)?.badge.value))">
+							</fu-badge>
+						</view>
+						<view ref="fu-tabs__wrapper__nav__line" class="fu-tabs__wrapper__nav__line" :style="[lineStyle]"></view>
+					</view>
+				</scroll-view>
+			</view>
+			<slot name="right" />
+		</view>
+	</view>
+</template>
+
+<script lang="ts" setup>
+	/**
+	 * Tabs 标签
+	 * @description 此组件在标签多的时候，可以配置为左右滑动，标签少的时候，可以禁止滑动。 该组件的一个特点是配置为滚动模式时，激活的tab会自动移动到组件的中间位置。
+	 * @tutorial http://www.fusions.top/components/tabs.html
+	 * @property {Array} list 标签数组，元素为对象，如[{name: '推荐'}]
+	 * @property {String | Number} duration 滑块移动一次所需的时间，单位秒（默认 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	滑块颜色
+	 * @property {String} lineBgSize 滑块背景显示大小，当滑块背景设置为图片时使用（默认 cover）
+	 * @property {String | Object} itemStyle	菜单item的样式（默认 { height: '44px' }）
+	 * @property {String} padding 各个元素的内边距可在itemStyle设置（默认 '0 15px'） 
+	 * @property {String} scrollable = [true|false]	菜单是否可滚动，选项很少的时候设置为false整个tabs自动居中显示（默认：true）
+	 * @property {String | Number} current 当前选中标签的索引（默认 0 ）
+	 * @property {String} keyName 从list元素对象中读取的键名（默认 'name' ）
+	 * 
+	 * @event {Function} change 标签改变时触发 index: 点击了第几个tab，索引从0开始
+	 * @event {Function} click 点击标签时触发 index: 点击了第几个tab，索引从0开始
+	 * @example <fu-tabs :list="list" :current="current" @change="change"></fu-tabs>
+	 */
+	import { tabsEmits, tabsProps } from './tabs';
+	import { useTabs, useTabsCustomStyle } from './composables';
+	
+	defineOptions({ name: 'FuTabs', options: { virtualHost: true } });
+	
+	const props = defineProps(tabsProps);
+	const $emit = defineEmits(tabsEmits);
+	
+	const {
+		firstTime,
+		scrollLeft,
+		lineOffsetLeft,
+		innerCurrent,
+		handleClick,
+		getBadgeValue
+	} = useTabs(props, $emit);
+	
+	const {
+		textStyle,
+		lineStyle
+	} = useTabsCustomStyle(
+		props, 
+		firstTime, 
+		lineOffsetLeft, 
+		innerCurrent
+	);
+</script>
+<style lang="scss" scoped>
+	@use '../../../style/components.scss';
+	@use '../../../style/color.scss' as *;
+	
+	.fu-tabs {
+
+		&__wrapper {
+			@include components.flex(row);
+			align-items: center;
+
+			&__scroll-view-wrapper {
+				flex: 1;
+				/* #ifndef APP-NVUE */
+				overflow: auto hidden;
+				/* #endif */
+			}
+
+			&__scroll-view {
+				@include components.flex(row);
+				flex: 1;
+			}
+
+			&__nav {
+				@include components.flex(row);
+				position: relative;
+
+				&__item {
+					@include components.flex(row);
+					align-items: center;
+					justify-content: center;
+					/* #ifndef APP-NVUE */
+					flex-shrink: 0;
+					/* #endif */
+					position: relative;
+
+					&--disabled {
+						/* #ifndef APP-NVUE */
+						cursor: not-allowed;
+						/* #endif */
+					}
+
+					&__text {
+						font-size: 15px;
+						color: #c8c9cc;
+
+						&--disabled {
+							color: #c8c9cc !important;
+						}
+					}
+				}
+
+				&__line {
+					height: 3px;
+					background: $fu-color-primary;
+					width: 30px;
+					position: absolute;
+					bottom: 2px;
+					border-radius: 100px;
+					transition-property: transform;
+					transition-duration: 300ms;
+				}
+			}
+		}
+	}
+</style>

package/components/tag/index.ts

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

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

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

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

@@ -0,0 +1,61 @@
+import { computed } from 'vue';
+import type { TagProps } from '../tag';
+
+export const useTagCustomStyle = (props: TagProps) => {
+	const tagStyle = computed(() => {
+		let style: Record<string, any> = {};
+		if (props.bgColor) {
+			style.backgroundColor = props.bgColor;
+		}
+		if (props.color) {
+			style.color = props.color;
+		}
+		if (props.borderColor) {
+			style.borderColor = props.borderColor;
+		}
+		return style
+	});
+	
+	// nvue下，文本颜色无法继承父元素
+	const textColor = computed(() => {
+		let style: Record<string, any> = {};
+		if (props.color) {
+			style.color = props.color;
+		}
+		return style
+	});
+	
+	const imgStyle = computed(() => {
+		const width = props.size === 'large' ? '17px' : props.size === 'medium' ? '15px' : '13px';
+		return {
+			width,
+			height: width
+		}
+	});
+	
+	// 文本的样式
+	const closeSize = computed(() => {
+		const size = props.size === 'large' ? 15 : props.size === 'medium' ? 12 : 12;
+		return size
+	});
+	
+	// 图标大小
+	const iconSize = computed(() => {
+		const size = props.size === 'large' ? 21 : props.size === 'medium' ? 19 : 16;
+		return size
+	});
+	
+	// 图标颜色
+	const elIconColor = computed(() => {
+		return props.iconColor ? props.iconColor : props.plain ? props.type : '#ffffff';
+	});
+	
+	return {
+		tagStyle,
+		textColor,
+		imgStyle,
+		closeSize,
+		iconSize,
+		elIconColor
+	}
+}

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

@@ -0,0 +1,23 @@
+import { ref, type SetupContext } from 'vue';
+import type { TagProps, TagEmits } from '../tag';
+
+export const useTag = (props: TagProps, $emit: SetupContext<TagEmits>['emit']) => {
+	const isShow = ref(props.show);
+	
+	// 点击标签
+	const handleClick = () => {
+		$emit('click', props.index)
+	};
+
+	// 点击关闭按钮
+	const handleClose = () => {
+		isShow.value = false;
+		$emit('close', props.index)
+	};
+	
+	return {
+		isShow,
+		handleClick,
+		handleClose
+	}
+}