fusions-ui 1.2.6 → 1.2.8

package/components/swipe-action-item/index.ts

@@ -0,0 +1 @@
+export * from './src/swipe-action-item'

package/components/{fu-swipe-action-item/mpwxs.js → swipe-action-item/src/mpwxs.ts}

@@ -1,13 +1,11 @@
-let mpMixins = {}
-let is_pc = null
+let mpMixins = {};
+let is_pc = null;
 // #ifdef H5
-import {
-	isPC
-} from "./isPC"
+import { isPC } from "../../../utils/isPC";
 is_pc = isPC()
 // #endif
-// #ifdef APP-VUE|| MP-WEIXIN || H5
 
+// #ifdef APP-VUE|| MP-WEIXIN || H5
 mpMixins = {
 	data() {
 		return {
@@ -15,8 +13,8 @@ mpMixins = {
 		}
 	},
 	watch: {
-		show(newVal) {
-			this.is_show = this.show
+		show() {
+			this.is_show = this.show;
 		}
 	},
 	created() {
@@ -26,39 +24,36 @@ mpMixins = {
 		}
 	},
 	mounted() {
-		this.is_show = this.show
+		this.is_show = this.show;
 	},
 	methods: {
 		// wxs 中调用
-		closeSwipe(e) {
+		closeSwipe() {
 			if (this.autoClose && this.swipeaction) {
 				this.swipeaction.closeOther(this)
 			}
 		},
 
-		change(e) {
+		change(e: any) {
 			this.$emit('change', e.open)
 			if (this.is_show !== e.open) {
-				this.is_show = e.open
+				this.is_show = e.open;
 			}
 		},
 
-		appTouchStart(e) {
-			if (is_pc) return
-			const {
-				clientX
-			} = e.changedTouches[0]
-			this.clientX = clientX
-			this.timestamp = new Date().getTime()
+		appTouchStart(e: any) {
+			if(is_pc) return
+			const { clientX } = e.changedTouches[0];
+			this.clientX = clientX;
+			this.timestamp = new Date().getTime();
 		},
-		appTouchEnd(e, index, item, position) {
-			if (is_pc) return
-			const {
-				clientX
-			} = e.changedTouches[0]
+		
+		appTouchEnd(e: any, index: number, item: any, position: string) {
+			if(is_pc) return
+			const { clientX } = e.changedTouches[0];
 			// fixed by xxxx 模拟点击事件，解决 ios 13 点击区域错位的问题
-			let diff = Math.abs(this.clientX - clientX)
-			let time = (new Date().getTime()) - this.timestamp
+			let diff = Math.abs(this.clientX - clientX);
+			let time = (new Date().getTime()) - this.timestamp;
 			if (diff < 40 && time < 300) {
 				this.$emit('click', {
 					content: item,
@@ -67,7 +62,7 @@ mpMixins = {
 				})
 			}
 		},
-		handleClickForPC(index, item, position) {
+		handleClickForPC(index: number, item: any, position: string) {
 			if (!is_pc) return
 			// #ifdef H5
 			this.$emit('click', {

package/components/swipe-action-item/src/swipe-action-item.ts

@@ -0,0 +1,68 @@
+import type { ExtractPropTypes } from 'vue';
+
+export const swipeActionItemProps = {
+	/**
+	 * @description 控制开关
+	 * @default 'none'
+	 */
+	show: {
+		type: String,
+		default: 'none'
+	},
+	/**
+	 * @description 是否禁用
+	 * @default false
+	 */
+	disabled: {
+		type: Boolean,
+		default: false
+	},
+	/**
+	 * @description 是否自动关闭
+	 * @default true
+	 */
+	autoClose: {
+		type: Boolean,
+		default: true
+	},
+	/**
+	 * @description 滑动缺省距离
+	 * @default 20
+	 */
+	threshold: {
+		type: Number,
+		default: 20
+	},
+	/**
+	 * @description 左侧按钮内容
+	 */
+	leftOptions: {
+		type: Array,
+		default () {
+			return []
+		}
+	},
+	/**
+	 * @description 右侧按钮内容
+	 */
+	rightOptions: {
+		type: Array,
+		default () {
+			return []
+		}
+	}
+};
+
+export const swipeActionItemEmits = {
+	/**
+	 * @description 点击选项按钮时触发事件
+	 */
+	click: (_e: any): boolean => true,
+	/**
+	 * @description 组件打开或关闭时触发
+	 */
+	change: (_e: any): boolean => true
+};
+
+export type SwipeActionItemProps = ExtractPropTypes<typeof swipeActionItemProps>;
+export type SwipeActionItemEmits = typeof swipeActionItemEmits;

package/components/{fu-swipe-action-item/fu-swipe-action-item.vue → swipe-action-item/src/swipe-action-item.vue}

@@ -57,6 +57,7 @@
 		</view>
 	</view>
 	<!-- #endif -->
+	
 	<!-- app nvue端 使用 bindingx -->
 	<!-- #ifdef APP-NVUE -->
 	<view ref="selector-box--hock" class="fu-swipe" @horizontalpan="touchstart" @touchend="touchend">
@@ -93,8 +94,8 @@
 	<view class="fu-swipe">
 		<view 
 			class="fu-swipe_box" 
-			:class="{ani:ani}"
-			:style="{transform:moveLeft}" 
+			:class="{ani: ani}"
+			:style="{transform: moveLeft}" 
 			@touchstart="touchstart" 
 			@touchmove="touchmove" 
 			@touchend="touchend">
@@ -102,11 +103,11 @@
 				<slot name="left">
 					<view 
 						class="fu-swipe_button button-hock" 
-						:style="{ backgroundColor: item.style && item.style.backgroundColor? item.style.backgroundColor: '#C7C6CD', fontSize: item.style && item.style.fontSize? item.style.fontSize: '16px'}" 
+						:style="{backgroundColor: item.style && item.style.backgroundColor? item.style.backgroundColor: '#C7C6CD', fontSize: item.style && item.style.fontSize? item.style.fontSize: '16px'}" 
 						v-for="(item,index) in leftOptions" :key="index"
 						@touchstart="appTouchStart"
 						@touchend="appTouchEnd($event,index,item,'left')">
-						<text class="fu-swipe_button-text" :style="{color: item.style && item.style.color ? item.style.color : '#FFFFFF'}">{{ item.text }}</text>
+						<text class="fu-swipe_button-text" :style="{color: item.style && item.style.color? item.style.color : '#FFFFFF'}">{{ item.text }}</text>
 					</view>
 				</slot>
 			</view>
@@ -131,7 +132,7 @@
 <script src="./wx.wxs" module="wxsswipe" lang="wxs"></script>
 
 <script module="renderswipe" lang="renderjs">
-	import render from './render.js'
+	import render from './render.js';
 	export default {
 		mounted(e, ins, owner) {
 			this.state = {}
@@ -152,12 +153,12 @@
 		}
 	}
 </script>
+
 <script>
-	import mpMixin from '../../libs/mixin/mpMixin.js'
-	import mpwxs from './mpwxs'
-	import bindingx from './bindingx.js'
-	import mpother from './mpother'
-	import props from './props.js'
+	import mpwxs from './mpwxs';
+	import bindingx from './bindingx.js';
+	import mpother from './mpother';
+	import { swipeActionItemProps } from './swipe-action-item';
 	/**
 	 * SwipeActionItem 滑动操作子组件
 	 * @description 通过滑动触发选项的容器
@@ -167,12 +168,16 @@
 	 * @property {Number}  threshold 滑动缺省值
 	 * @property {Array} leftOptions 左侧选项内容及样式
 	 * @property {Array} rgihtOptions 右侧选项内容及样式
+	 * 
 	 * @event {Function} click 点击选项按钮时触发事件，e = {content,index} ，content（点击内容）、index（下标)
 	 * @event {Function} change 组件打开或关闭时触发，left\right\none
 	 */
+	const propsMixin = {
+		props: swipeActionItemProps
+	};
 	export default {
 		name:"FuSwipeActionItem",
-		mixins: [mpMixin, mpwxs, bindingx, mpother, props],
+		mixins: [mpwxs, bindingx, mpother, propsMixin],
 		emits: ['click', 'change'],
 		methods: {
 			uninstall() {
@@ -184,6 +189,7 @@
 					})
 				}
 			},
+			
 			/**
 			 * 获取父元素实例
 			 */
@@ -212,8 +218,9 @@
 		// #endif
 	}
 </script>
+
 <style lang="scss" scoped>
-	@import '../../libs/style/components.scss';
+	@use '../../../style/components.scss';
 	
 	.fu-swipe {
 		position: relative;
@@ -223,7 +230,7 @@
 	}
 
 	.fu-swipe_box {
-		@include flex;
+		@include components.flex;
 		/* #ifndef APP-NVUE */
 		flex: 0 0 auto;
 		touch-action: none;
@@ -239,7 +246,7 @@
 	}
 
 	.fu-swipe_button-group {
-		@include flex(row);
+		@include components.flex(row);
 		/* #ifndef APP-NVUE */
 		box-sizing: border-box;
 		/* #endif */
@@ -265,7 +272,7 @@
 		/* #ifdef APP-NVUE */
 		flex: 1;
 		/* #endif */
-		@include flex(row);
+		@include components.flex(row);
 		justify-content: center;
 		align-items: center;
 		padding: 0 20px;
@@ -291,7 +298,7 @@
 	}
 
 	.movable-view {
-		@include flex;
+		@include components.flex;
 		justify-content: center;
 		position: relative;
 		flex: 1;
@@ -300,7 +307,7 @@
 	}
 
 	.movable-view-button {
-		@include flex(row);
+		@include components.flex(row);
 		/* #ifndef APP-NVUE */
 		flex: 0 0 auto;
 		/* #endif */

package/components/{fu-swipe-action-item → swipe-action-item/src}/wx.wxs

@@ -69,7 +69,7 @@ function touchmove(e, ownerInstance) {
 	if (state.direction !== 'horizontal') {
 		return;
 	}
-
+	
 	if (e.preventDefault) {
 		// 阻止页面滚动
 		e.preventDefault()
@@ -289,7 +289,7 @@ function stopTouchMove(event) {
 
 function isPC() {
 	var userAgentInfo = navigator.userAgent;
-	var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
+	var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod", "HarmonyOS"];
 	var flag = true;
 	for (var v = 0; v < Agents.length - 1; v++) {
 		if (userAgentInfo.indexOf(Agents[v]) > 0) {

package/components/swiper/index.ts

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

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

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

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

@@ -0,0 +1,40 @@
+import { computed, type CSSProperties } from 'vue';
+import type { SwiperProps } from '../swiper';
+
+export const useSwiperCustomStyle = (props: SwiperProps) => {
+	const indicatorStyle = computed<CSSProperties>(() => {
+		let style: Record<string, any> = {}
+		if (props.indicatorPosition === 'topLeft' || props.indicatorPosition === 'bottomLeft') style.justifyContent = 'flex-start'
+		if (props.indicatorPosition === 'topCenter' || props.indicatorPosition === 'bottomCenter') style.justifyContent = 'center'
+		if (props.indicatorPosition === 'topRight' || props.indicatorPosition === 'bottomRight') style.justifyContent = 'flex-end'
+		if (['topLeft', 'topCenter', 'topRight'].indexOf(props.indicatorPosition) >= 0) {
+			style.top = '12rpx';
+			style.bottom = 'auto';
+		} else {
+			style.top = 'auto';
+			style.bottom = '12rpx';
+		}
+		style.padding = `0 ${props.effect3D? '74rpx': '24rpx'}`;
+
+		return style
+	});
+	
+	const swiperTitleStyle = computed<CSSProperties>(() => {
+		let style: Record<string, any> = {}
+		if (props.mode === 'none' || props.mode === '') style.paddingBottom = '12rpx'
+		if (['bottomLeft', 'bottomCenter', 'bottomRight'].indexOf(props.indicatorPosition) >= 0 && props.mode === 'number') {
+			style.paddingBottom = '60rpx';
+		} else if (['bottomLeft', 'bottomCenter', 'bottomRight'].indexOf(props.indicatorPosition) >= 0 && props.mode !== 'number') {
+			style.paddingBottom = '40rpx';
+		} else {
+			style.paddingBottom = '12rpx';
+		}
+
+		return Object.assign(style, props.titleStyle)
+	});
+	
+	return {
+		indicatorStyle,
+		swiperTitleStyle
+	}
+}

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

@@ -0,0 +1,75 @@
+import { getCurrentInstance, ref, watch, type SetupContext } from 'vue';
+import type { SwiperProps, SwiperEmits } from '../swiper';
+
+export const useSwiper = (props: SwiperProps, $emit: SetupContext<SwiperEmits>['emit']) => {
+	const instance = getCurrentInstance();
+	const swiperIndex = ref(props.current);
+	
+	const getItemType = (e: any): 'image' | 'video' => {
+		if (typeof e === 'string') return uni.$fu.isVideo(getSource(e)) ? 'video' : 'image'
+		if (typeof e === 'object' && props.keyName) {
+			if (!e.type) return uni.$fu.isVideo(getSource(e))? 'video': 'image'
+			if (e.type === 'image') return 'image'
+			if (e.type === 'video') return 'video'
+			return 'image'
+		}
+	};
+
+	const getSource = (e: any): string => {
+		if (typeof e === 'string') return e
+		if (typeof e === 'object' && props.keyName) return e[props.keyName]
+		else uni.$fu.error('请按格式传递列表参数')
+		return ''
+	};
+
+	// 点击某个item
+	const handleClick = (item: any, index: number) => {
+		$emit('click', {
+			detail: item,
+			index
+		})
+	};
+
+	// 轮播切换时触发
+	const handleChange = (event: any) => {
+		const current = event.detail.current;
+		pauseVideo(swiperIndex.value)
+		swiperIndex.value = current
+		$emit('change', current)
+	};
+
+	// 切换轮播时，暂停视频播放
+	const pauseVideo = (index: number) => {
+		const lastItem = getSource(props.list[index])
+		if (uni.$fu.isVideo(lastItem)) {
+			// 当视频隐藏时，暂停播放
+			const video = uni.createVideoContext(`video-${index}`, instance)
+			video.pause()
+		}
+	};
+	
+	// 当一个轮播item为视频时，获取它的视频海报
+	const getPoster = (item: any): string => {
+		return typeof item === 'object' && item.poster ? item.poster : ''
+	};
+	
+	// watch监听事件
+	watch(() => props.list, (newVal, oldVal) => {
+		// 如果修改了list的数据，重置current的值
+		if (newVal.length !== oldVal.length) swiperIndex.value = 0;
+	});
+	watch(() => props.current, (newVal) => {
+		// 监听外部current的变化，实时修改内部依赖于此测swiperIndex值，如果更新了current，而不是更新swiperIndex，就会错乱，因为指示器是依赖于swiperIndex的
+		swiperIndex.value = newVal;
+	});
+	
+	return {
+		swiperIndex,
+		getItemType,
+		getSource,
+		handleClick,
+		handleChange,
+		pauseVideo,
+		getPoster
+	}
+}

package/components/swiper/src/swiper.ts

@@ -0,0 +1,189 @@
+import type { ExtractPropTypes } from 'vue';
+
+/**
+ * 轮播图 mode 有效值
+ */
+export const swiperModes = ['rect', 'round', 'dot', 'number'] as const;
+
+/**
+ * 轮播图 indicatorPosition 有效值
+ */
+export const swiperIndicatorPositions = ['topLeft', 'topCenter', 'topRight', 'bottomLeft', 'bottomCenter', 'bottomRight'] as const;
+
+export const swiperProps = {
+	/**
+	 * @description 轮播图列表数据 如：[{image: xxx.jpg, title: 'xxxx'}]  ['xxxx', 'xxxx', 'xxxx']
+	 */
+	list: {
+		type: Array,
+		default: () => []
+	},
+	/**
+	 * @description 设置圆角
+	 * @default 5
+	 */
+	radius: {
+		type: [String, Number],
+		default: 5
+	},
+	/**
+	 * @description 初始化时，默认显示第几项
+	 */
+	current: {
+		type: Number,
+		default: 0
+	},
+	/**
+	 * @description 设置高度
+	 * @default 160
+	 */
+	height: {
+		type: [String, Number],
+		default: 160
+	},
+	/**
+	 * @description 背景颜色
+	 * @default '#f2f3f4'
+	 */
+	bgColor: {
+		type: String,
+		default: '#f2f3f4'
+	},
+	/**
+	 * @description 图片的属性名
+	 * @default 'image'
+	 */
+	keyName: {
+		type: String,
+		default: 'image'
+	},
+	/**
+	 * @description 是否显示标题
+	 * @default false
+	 */
+	showTitle: {
+		type: Boolean,
+		default: false
+	},
+	/**
+	 * @description 是否显示标题
+	 * @default 'title'
+	 */
+	keyTitle: {
+		type: String,
+		default: 'title'
+	},
+	/**
+	 * @description 定义需要用到的外部标题样式
+	 */
+	titleStyle: {
+		type: Object,
+		default: () => {}
+	},
+	/**
+	 * @description 指示器模式
+	 * @values 'rect' - 方形, 'round' - 圆角方形, 'dot' - 点, 'number' - 轮播图下标
+	 * @default 'round'
+	 */
+	mode: {
+		type: String,
+		values: swiperModes,
+		default: 'round'
+	},
+	/**
+	 * @description 是否显示指示灯
+	 * @default true
+	 */
+	indicator: {
+		type: Boolean,
+		default: true
+	},
+	/**
+	 * @description 指示器位置
+	 * @values 'topLeft' - 指示器位于左上角, 'topCenter' - 指示器位于上方中间位置, 'topRight' - 指示器位于右上角, 'bottomLeft' - 指示器位于左下角, 'bottomCenter' - 指示器位于底部中间位置, 'bottomRight' - 指示器位于右下角
+	 * @default 'bottomCenter'
+	 */
+	indicatorPosition: {
+		type: String,
+		values: swiperIndicatorPositions,
+		default: 'bottomCenter'
+	},
+	/**
+	 * @description 开启3D缩放效果
+	 * @default false
+	 */
+	effect3D: {
+		type: Boolean,
+		default: false
+	},
+	/**
+	 * @description 在3D缩放模式下，item之间的间隔
+	 * @default 25
+	 */
+	effect3DPreviousSpacing: {
+		type: [String, Number],
+		default: 25
+	},
+	/**
+	 * @description 自动播放
+	 * @default true
+	 */
+	autoplay: {
+		type: Boolean,
+		default: true
+	},
+	/**
+	 * @description 图片之间播放间隔多久
+	 * @default 3000
+	 */
+	interval: {
+		type: Number,
+		default: 3000
+	},
+	/**
+	 * @description 轮播间隔时间
+	 * @default 500
+	 */
+	duration: {
+		type: Number,
+		default: 500
+	},
+	/**
+	 * @description 是否衔接滑动
+	 * @default true
+	 */
+	circular: {
+		type: Boolean,
+		default: true
+	},
+	/**
+	 * @description 图片裁剪模式
+	 * @default 'aspectFill'
+	 */
+	imgMode: {
+		type: String,
+		default: 'aspectFill'
+	},
+	/**
+	 * @description 是否加载中
+	 * @default false
+	 */
+	loading: {
+		type: Boolean,
+		default: false
+	}
+};
+
+export const swiperEmits = {
+	/**
+	 * @description 点击轮播图时触发
+	 */
+	click: (_e: any) => true,
+	/**
+	 * @description 轮播图切换时触发
+	 */
+	change: (_e: any) => true
+};
+
+export type SwiperProps = ExtractPropTypes<typeof swiperProps>;
+export type SwiperEmits = typeof swiperEmits;