fusions-ui 1.2.6 → 1.2.8

package/components/{fu-swiper/fu-swiper.vue → swiper/src/swiper.vue}

@@ -23,15 +23,17 @@
 			:duration="duration"
 			:previous-margin="effect3D? effect3DPreviousSpacing + 'px' : '0'"
 			:next-margin="effect3D ? effect3DPreviousSpacing + 'px' : '0'" 
-			@change="change"
+			@change="handleChange"
 			v-else>
 			<swiper-item class="fu-swiper__item" v-for="(item, index) in list" :key="index">
-				<view class="fu-swiper__item__wrap"
-					:class="[swiperIndex !== index ? 'fu-swiper__item__wrap__image--scale' : '']" :style="[{
+				<view 
+					class="fu-swiper__item__wrap"
+					:class="[swiperIndex !== index ? 'fu-swiper__item__wrap__image--scale' : '']" 
+					:style="[{
 						transform: effect3D && swiperIndex !== index ? 'scaleY(0.9)' : 'scaleY(1)',
 						margin: effect3D && swiperIndex !== index ? '0 20rpx' : 0
-					}]" @tap="handleClick(index)">
-
+					}]" 
+					@tap="handleClick(item, index)">
 					<image 
 						class="fu-swiper__item__wrap__image" 
 						:src="getSource(item)" 
@@ -57,7 +59,9 @@
 						v-if="getItemType(item) === 'video'">
 					</video>
 
-					<view class="fu-swiper__item__wrap__title fu-text-ellipsis" :style="[titleStyle]"
+					<view 
+						class="fu-swiper__item__wrap__title fu-text-ellipsis" 
+						:style="[titleStyle]"
 						v-if="showTitle && item[keyTitle]">
 						{{ item[keyTitle] }}
 					</view>
@@ -69,19 +73,22 @@
 		<view class="fu-swiper__indicator" :style="[indicatorStyle]" v-if="indicator">
 			<slot name="indicator">
 				<block v-if="mode === 'rect'">
-					<view class="fu-swiper__indicator__rect"
+					<view 
+						class="fu-swiper__indicator__rect"
 						:class="{'fu-swiper__indicator__rect--active': swiperIndex === index}"
-						v-for="(item, index) in list" :key="index"></view>
+						v-for="(_item, index) in list" :key="index"></view>
 				</block>
 				<block v-if="mode === 'dot'">
-					<view class="fu-swiper__indicator__dot"
+					<view 
+						class="fu-swiper__indicator__dot"
 						:class="{'fu-swiper__indicator__dot--active': swiperIndex === index}"
-						v-for="(item, index) in list" :key="index"></view>
+						v-for="(_item, index) in list" :key="index"></view>
 				</block>
 				<block v-if="mode === 'round'">
-					<view class="fu-swiper__indicator__round"
+					<view 
+						class="fu-swiper__indicator__round"
 						:class="{'fu-swiper__indicator__round--active': swiperIndex === index}"
-						v-for="(item, index) in list" :key="index"></view>
+						v-for="(_item, index) in list" :key="index"></view>
 				</block>
 				<block v-if="mode === 'number'">
 					<view class="fu-swiper__indicator__number">{{ swiperIndex + 1 }}/{{ list.length }}</view>
@@ -91,16 +98,15 @@
 	</view>
 </template>
 
-<script>
-	import mpMixin from '../../libs/mixin/mpMixin.js'
-	import props from './props.js'
+<script lang="ts" setup>
 	/**
 	 * Swiper 轮播图
 	 * @description 此组件一般用于导航轮播，广告展示等场景
+	 * @tutorial http://www.fusions.top/components/swiper.html
 	 * @property {Array} list 轮播图列表数据
-	 * @property {String,Number} radius 圆角的值 (默认 5)
+	 * @property {String | Number} radius 圆角的值 (默认 5)
 	 * @property {Number} current 初始化时，默认显示第几项
-	 * @property {String,Number} height 高度 (默认 160)
+	 * @property {String | Number} height 高度 (默认 160)
 	 * @property {String} bgColor 背景色 (默认 #f2f3f4)
 	 * @property {String} keyName 图片的属性名 (默认 image)
 	 * @property {Boolean} showTitle = [true|false] 是否显示标题（默认 false）
@@ -120,7 +126,7 @@
 	 * 	@value bottomCenter 指示器位于底部中间位置，为默认值
 	 * 	@value bottomRight 指示器位于右下角
 	 * @property {Boolean} effect3D = [true|false] 开启3D缩放效果 (默认 false)
-	 * @property {String,Number} effect3DPreviousSpacing 在3D缩放模式下，item之间的间隔（默认 25）
+	 * @property {String | Number} effect3DPreviousSpacing 在3D缩放模式下，item之间的间隔（默认 25）
 	 * @property {Boolean} autoplay = [true|false] 自定播放 (默认 true)
 	 * @property {Number} interval 图片之间播放间隔多久 (默认 3000)
 	 * @property {Number} duration 轮播间隔时间 (默认 500)
@@ -132,110 +138,35 @@
 	 * @event {Function} change 轮播图切换时触发
 	 * @example <fu-swiper :list="list"></fu-swiper>
 	 */
-	export default {
-		name: 'FuSwiper',
-		emits: ['click', 'change'],
-		mixins: [mpMixin, props],
-		data() {
-			return {
-				// 当前显示的item的index
-				swiperIndex: this.current
-			}
-		},
-		computed: {
-			indicatorStyle() {
-				let style = {}
-				if (this.indicatorPosition === 'topLeft' || this.indicatorPosition === 'bottomLeft') style.justifyContent = 'flex-start'
-				if (this.indicatorPosition === 'topCenter' || this.indicatorPosition === 'bottomCenter') style.justifyContent = 'center'
-				if (this.indicatorPosition === 'topRight' || this.indicatorPosition === 'bottomRight') style.justifyContent = 'flex-end'
-				if (['topLeft', 'topCenter', 'topRight'].indexOf(this.indicatorPosition) >= 0) {
-					style.top = '12rpx';
-					style.bottom = 'auto';
-				} else {
-					style.top = 'auto';
-					style.bottom = '12rpx';
-				}
-				style.padding = `0 ${this.effect3D? '74rpx': '24rpx'}`;
-
-				return style
-			},
-			swiperTitleStyle() {
-				let style = {}
-				if (this.mode === 'none' || this.mode === '') style.paddingBottom = '12rpx'
-				if (['bottomLeft', 'bottomCenter', 'bottomRight'].indexOf(this.indicatorPosition) >= 0 && this.mode === 'number') {
-					style.paddingBottom = '60rpx';
-				} else if (['bottomLeft', 'bottomCenter', 'bottomRight'].indexOf(this.indicatorPosition) >= 0 && this.mode !== 'number') {
-					style.paddingBottom = '40rpx';
-				} else {
-					style.paddingBottom = '12rpx';
-				}
-
-				return Object.assign(style, this.titleStyle)
-			}
-		},
-		methods: {
-			getItemType(e) {
-				if (typeof e === 'string') return this.$fu.isVideo(this.getSource(e)) ? 'video' : 'image'
-				if (typeof e === 'object' && this.keyName) {
-					if (!e.type) return this.$fu.isVideo(this.getSource(e))? 'video': 'image'
-					if (e.type === 'image') return 'image'
-					if (e.type === 'video') return 'video'
-					return 'image'
-				}
-			},
-
-			getSource(e) {
-				if (typeof e === 'string') return e
-				if (typeof e === 'object' && this.keyName) return e[this.keyName]
-				else this.$fu.error('请按格式传递列表参数')
-				return ''
-			},
-
-			// 点击某个item
-			handleClick(index) {
-				this.$emit('click', index)
-			},
-
-			// 轮播切换时触发
-			change(event) {
-				const current = event.detail.current;
-				this.pauseVideo(this.swiperIndex)
-				this.swiperIndex = current
-				this.$emit('change', current)
-			},
-
-			// 切换轮播时，暂停视频播放
-			pauseVideo(index) {
-				const lastItem = this.getSource(this.list[index])
-				if (this.$fu.isVideo(lastItem)) {
-					// 当视频隐藏时，暂停播放
-					const video = uni.createVideoContext(`video-${index}`, this)
-					video.pause()
-				}
-			},
-			// 当一个轮播item为视频时，获取它的视频海报
-			getPoster(item) {
-				return typeof item === 'object' && item.poster ? item.poster : ''
-			}
-		},
-		watch: {
-			list(newVal, oldVal) {
-				// 如果修改了list的数据，重置current的值
-				if (newVal.length !== oldVal.length) this.swiperIndex = 0
-			},
-			current(value) {
-				// 监听外部current的变化，实时修改内部依赖于此测swiperIndex值，如果更新了current，而不是更新swiperIndex，就会错乱，因为指示器是依赖于swiperIndex的
-				this.swiperIndex = value
-			}
-		}
-	}
+	import { swiperEmits, swiperProps } from './swiper';
+	import { useSwiper, useSwiperCustomStyle } from './composables';
+	
+	defineOptions({ name: 'FuSwiper', options: {  } });
+	
+	const props = defineProps(swiperProps);
+	const $emit = defineEmits(swiperEmits);
+	
+	const {
+		swiperIndex,
+		getItemType,
+		getSource,
+		handleClick,
+		handleChange,
+		pauseVideo,
+		getPoster
+	} = useSwiper(props, $emit);
+	
+	const {
+		indicatorStyle,
+		swiperTitleStyle
+	} = useSwiperCustomStyle(props);
 </script>
 
 <style lang="scss" scoped>
-	@import "../../libs/style/components.scss";
+	@use "../../../style/components.scss";
 
 	.fu-swiper {
-		@include flex;
+		@include components.flex;
 		justify-content: center;
 		align-items: center;
 		position: relative;
@@ -252,7 +183,7 @@
 			flex: 1;
 			
 			&__wrap {
-				@include flex;
+				@include components.flex;
 				position: relative;
 				/* #ifndef APP-NVUE */
 				overflow: hidden;

package/components/switch/index.ts

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

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

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

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

@@ -0,0 +1,32 @@
+import { Ref, computed } from 'vue';
+import type { SwitchProps } from '../switch';
+
+export const useSwitchCustomStyle = (props: SwitchProps, isActive: Ref<boolean | string | number>) => {
+	const switchStyle = computed(() => {
+		let style: Record<string, any> = {};
+		style.fontSize = uni.$fu.addUnit(props.size);
+		style.backgroundColor = isActive.value? props.activeColor: props.inactiveColor;
+		return style
+	});
+
+	const switchNodeStyle = computed(() => {
+		let style: Record<string, any> = {};
+		style.width = uni.$fu.addUnit(props.size);
+		style.height = style.width;
+		return style
+	});
+
+	const iconStyle = computed(() => {
+		let style: Record<string, any> = {}
+		style.fontSize = uni.$fu.addUnit(props.size - 20)
+		style.lineHeight = uni.$fu.addUnit(props.size)
+		return style
+	});
+	
+	return {
+		isActive,
+		switchStyle,
+		switchNodeStyle,
+		iconStyle
+	}
+}

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

@@ -0,0 +1,38 @@
+import { ref, nextTick, computed, watch, type SetupContext } from 'vue';
+import type { SwitchProps, SwitchEmits } from '../switch';
+
+export const useSwitch = (props : SwitchProps, $emit : SetupContext<SwitchEmits>['emit']) => {
+	const innerValue = ref(props.modelValue);
+
+	const handleClick = () => {
+		if (!props.disabled && !props.loading) {
+			if (props.vibrateShort) uni.vibrateShort()
+			const oldVal = isActive.value? props.inactiveValue: props.activeValue;
+			$emit('input', oldVal)
+			$emit('update:modelValue', oldVal)
+			// 放到下一个生命周期，因为双向绑定的value修改父组件状态需要时间，且是异步的
+			nextTick(() => {
+				$emit('change', oldVal);
+			})
+		}
+	};
+	
+	// computed计算属性
+	const isActive = computed(() => {
+		return innerValue.value === props.activeValue;
+	});
+	
+	// watch监听事件
+	watch(() => props.modelValue, (newVal) => {
+		if (newVal !== props.inactiveValue && newVal !== props.activeValue) {
+			return uni.$fu.error('v-model绑定的值必须为inactiveValue、activeValue二者之一')
+		}
+		innerValue.value = newVal;
+	});
+	
+	return {
+		innerValue,
+		isActive,
+		handleClick
+	}
+}

package/components/switch/src/switch.ts

@@ -0,0 +1,115 @@
+import type { ExtractPropTypes } from 'vue';
+import { componentShapes } from '../../../constants';
+
+export const switchProps = {
+	/**
+	 * @description v-model 绑定的值
+	 */
+	modelValue: {
+		type: [Boolean, String, Number],
+		default: false
+	},
+	/**
+	 * @description 设置形状
+	 * @values 'circle' - 圆角, 'square' - 方形
+	 * @default 'circle'
+	 */
+	shape: {
+		type: String,
+		values: componentShapes,
+		default: 'circle'
+	},
+	/**
+	 * @description 是否禁用
+	 * @default false
+	 */
+	disabled: {
+		type: Boolean,
+		default: false
+	},
+	/**
+	 * @description 设置尺寸
+	 * @default 20
+	 */
+	size: {
+		type: [String, Number],
+		default: 20
+	},
+	/**
+	 * @description 打开时的背景颜色
+	 * @default '#2979ff'
+	 */
+	activeColor: {
+		type: String,
+		default: '#2979ff'
+	},
+	/**
+	 * @description 关闭时的背景颜色
+	 * @default '#d6d6d6'
+	 */
+	inactiveColor: {
+		type: String,
+		default: '#d6d6d6'
+	},
+	/**
+	 * @description 激活时的值
+	 * @default true
+	 */
+	activeValue: {
+		type: [Boolean, String, Number],
+		default: true
+	},
+	/**
+	 * @description 关闭时的值
+	 * @default false
+	 */
+	inactiveValue: {
+		type: [Boolean, String, Number],
+		default: false
+	},
+	/**
+	 * @description 左图标
+	 */
+	leftIcon: {
+		type: String,
+		default: ''
+	},
+	/**
+	 * @description 右图标
+	 */
+	rightIcon: {
+		type: String,
+		default: ''
+	},
+	/**
+	 * @description 是否为加载状态
+	 * @default false
+	 */
+	loading: {
+		type: Boolean,
+		default: false
+	},
+	/**
+	 * @description 点击手机是否震动
+	 * @default false
+	 */
+	vibrateShort: {
+		type: Boolean,
+		default: false
+	}
+};
+
+export const switchEmits = {
+	'update:modelValue': (_e: any) => true,
+	/**
+	   * @description v-model 输入事件
+	   */
+	input: (_e: any) => true,
+	/**
+	 * @description 开关状态变化时触发
+	 */
+	change: (_e: any) => true
+};
+
+export type SwitchProps = ExtractPropTypes<typeof switchProps>;
+export type SwitchEmits = typeof switchEmits;

package/components/{fu-switch/fu-switch.vue → switch/src/switch.vue}

@@ -17,22 +17,21 @@
 	</view>
 </template>
 
-<script>
-	import mpMixin from '../../libs/mixin/mpMixin.js'
-	import props from './props.js'
+<script lang="ts" setup>
 	/**
 	 * Switch 开关选择器
 	 * @description 此组件选择开关一般用于只有两个选择，且只能选其一的场景。
-	 * @property {Boolean,String,Number} value	通过v-model双向绑定的值 （默认 false ）
+	 * @tutorial http://www.fusions.top/components/switch.html
+	 * @property {Boolean | String | Number} v-model 绑定的值 （默认 false ）
 	 * @property {String} shape = [circle|square] 设置形状（默认 'circle'）
 	 * 	@value circle 圆角
 	 * 	@value square 方形
 	 * @property {Boolean} disabled = [true|false] 是否禁用（默认 false）
-	 * @property {String,Number} size 尺寸（默认 20）
+	 * @property {String | Number} size 尺寸（默认 20）
 	 * @property {String} activeColor 打开时的背景颜色（默认 '#2979ff'）
 	 * @property {String} inactiveColor 关闭时的背景颜色（默认 '#d6d6d6'）
-	 * @property {Number,String,Boolean} activeValue 激活时的值 (默认 true)
-	 * @property {Number,String,Boolean} inactiveValue 关闭时的值（默认false）
+	 * @property {Boolean | String | Number} activeValue 激活时的值 (默认 true)
+	 * @property {Boolean | String | Number} inactiveValue 关闭时的值（默认false）
 	 * @property {String} leftIcon 左图标
 	 * @property {String} rightIcon 右图标
 	 * @property {Boolean} loading = [true|false] 是否为加载状态
@@ -41,72 +40,25 @@
 	 * @event {Function} change 在switch打开或关闭时触发
 	 * @example <fu-switch v-model="checked"></fu-switch>
 	 */
-	export default {
-		name: 'FuSwitch',
-		emits: ['input', 'update:modelValue', 'change'],
-		mixins: [mpMixin, props],
-		data() {
-			return {
-				innerValue: false
-			};
-		},
-		created() {
-			this.innerValue = this.value || this.modelValue;
-		},
-		computed: {
-			isActive() {
-				return this.innerValue === this.activeValue;
-			},
-			switchStyle() {
-				let style = {};
-				style.fontSize = this.$fu.addUnit(this.size);
-				style.backgroundColor = this.isActive? this.activeColor: this.inactiveColor;
-				return style
-			},
-
-			switchNodeStyle() {
-				let style = {};
-				style.width = this.$fu.addUnit(this.size);
-				style.height = style.width;
-				return style
-			},
-
-			iconStyle() {
-				let style = {}
-				style.fontSize = this.$fu.addUnit(this.size - 20)
-				style.lineHeight = this.$fu.addUnit(this.size)
-				return style
-			}
-		},
-		methods: {
-			handleClick() {
-				if (!this.disabled && !this.loading) {
-					if (this.vibrateShort) uni.vibrateShort()
-					const oldVal = this.isActive? this.inactiveValue: this.activeValue;
-					this.$emit('input', oldVal)
-					this.$emit('update:modelValue', oldVal)
-					// 放到下一个生命周期，因为双向绑定的value修改父组件状态需要时间，且是异步的
-					this.$nextTick(() => {
-						this.$emit('change', oldVal);
-					})
-				}
-			}
-		},
-		watch: {
-			value(newVal) {
-				if (newVal !== this.inactiveValue && newVal !== this.activeValue) {
-					return this.$fu.error('v-model绑定的值必须为inactiveValue、activeValue二者之一')
-				}
-				this.innerValue = newVal;
-			},
-			modelValue(newVal) {
-				if (newVal !== this.inactiveValue && newVal !== this.activeValue) {
-					return this.$fu.error('v-model绑定的值必须为inactiveValue、activeValue二者之一')
-				}
-				this.innerValue = newVal;
-			}
-		}
-	}
+	import { switchEmits, switchProps } from './switch';
+	import { useSwitch, useSwitchCustomStyle } from './composables';
+	
+	defineOptions({ name: 'FuSwitch', options: { virtualHost: true } });
+	
+	const props = defineProps(switchProps);
+	const $emit = defineEmits(switchEmits);
+	
+	const {
+		innerValue,
+		isActive,
+		handleClick
+	} = useSwitch(props, $emit);
+	
+	const {
+		switchStyle,
+		switchNodeStyle,
+		iconStyle
+	} = useSwitchCustomStyle(props, isActive);
 </script>
 
 <style lang="scss" scoped>

package/components/tabs/index.ts

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

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

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

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

@@ -0,0 +1,43 @@
+import { computed, Ref } from 'vue';
+import type { TabsProps } from '../tabs';
+
+export const useTabsCustomStyle = (
+	props: TabsProps, 
+	firstTime: Ref<boolean>, 
+	lineOffsetLeft: Ref<number>, 
+	innerCurrent: Ref<number>
+) => {
+	const textStyle = computed(() => {
+		return (index: number) => {
+			const style: Record<string, any> = {};
+			// 取当期是否激活的样式
+			const customeStyle = index == innerCurrent.value ? uni.$fu.addStyle(props.activeStyle) : uni.$fu.addStyle(props.inactiveStyle);
+			// 如果当前菜单被禁用，则加上对应颜色，需要在此做处理，是因为nvue下，无法在style样式中通过!import覆盖标签的内联样式
+			if ((props.list[index] as any)?.disabled) {
+				style.color = '#c8c9cc';
+			}
+			return uni.$fu.deepMerge(customeStyle, style)
+		}
+	});
+	
+	const lineStyle = computed(() => {
+		let style: Record<string, any> = {
+			width: `${props.lineWidth}px`,
+			height: firstTime.value? 0: `${props.lineHeight}px`,
+			background: props.lineColor,
+			backgroundSize: props.lineBgSize,
+		};
+
+		// #ifndef APP-NVUE
+		style.transform = `translate(${lineOffsetLeft.value}px)`;
+		style.transitionDuration = `${firstTime.value? 0 : props.duration}ms`;
+		// #endif
+		
+		return style
+	});
+	
+	return {
+		textStyle,
+		lineStyle
+	}
+}