fusions-ui 1.2.6 → 1.2.8

package/components/sticky/src/sticky.ts

@@ -0,0 +1,62 @@
+import type { ExtractPropTypes } from 'vue';
+import { componentProps, ZIndex } from '../../../constants';
+
+export const stickyProps = {
+	/**
+	 * @description 吸顶容器到顶部某个距离的时候，进行吸顶，在H5平台，NavigationBar为44px
+	 */
+	offsetTop: {
+		type: [String, Number],
+		default: 0
+	},
+	/**
+	 * @description 自定义导航栏的高度
+	 */
+	customNavHeight: {
+		type: [String, Number],
+		default: () => {
+			let value: number;
+			// #ifdef H5
+			// H5端的导航栏属于“自定义”导航栏的范畴，因为它是非原生的，与普通元素一致
+			value = 44;
+			// #endif
+			// #ifndef H5
+			value = 0;
+			// #endif
+			return value
+		}
+	},
+	/**
+	 * @description 是否禁用吸顶功能
+	 * @default false
+	 */
+	disabled: {
+		type: Boolean,
+		default: false
+	},
+	/**
+	 * @description 吸顶区域的背景颜色
+	 */
+	bgColor: {
+		type: String,
+		default: ''
+	},
+	/**
+	 * @description z-index值
+	 * @default 99
+	 */
+	zIndex: {
+		type: [String, Number],
+		default: ZIndex.sticky
+	},
+	/**
+	 * @description 列表中的索引值
+	 */
+	index: {
+		type: [String, Number],
+		default: 0
+	},
+	...componentProps
+};
+
+export type StickyProps = ExtractPropTypes<typeof stickyProps>;

package/components/sticky/src/sticky.vue

@@ -0,0 +1,65 @@
+<template>
+	<view :id="elId" class="fu-sticky" :class="[customClass]" :style="[stickyStyle]">
+		<view :style="[stickyContent]">
+			<slot />
+		</view>
+	</view>
+</template>
+
+<script lang="ts" setup>
+	/**
+	 * Sticky 吸顶
+	 * @description 此组件与CSS中position: sticky属性实现的效果一致，当组件达到预设的到顶部距离时， 就会固定在指定位置，组件位置大于预设的顶部距离时，会重新按照正常的布局排列。
+	 * @tutorial http://www.fusions.top/components/sticky.html
+	 * @property {String | Number} offsetTop 吸顶时与顶部的距离，单位px（默认 0 ）
+	 * @property {String | Number} customNavHeight 自定义导航栏的高度 （h5 默认44  其他默认 0 ）
+	 * @property {Boolean} disabled = [true|false] 是否禁用吸顶功能 （默认 false ）
+	 * @property {String} bgColor 背景颜色
+	 * @property {String | Number} zIndex	吸顶时的z-index值（默认 99）
+	 * @property {String | Number} index	自定义标识，用于区分是哪一个组件（默认 0）
+	 * @property {String} customClass 自定义外部样式类
+	 * @property {String | Object} customStyle 自定义外部的样式
+	 * 
+	 * @example <fu-sticky offsetTop="200"><view>此处吸顶</view></fu-sticky>
+	 */
+	import { stickyProps } from './sticky';
+	import { useSticky, useStickyCustomStyle } from './composables';
+	
+	defineOptions({ name: 'FuSticky', options: { virtualHost: true } });
+	
+	const props = defineProps(stickyProps);
+	
+	const {
+		elId,
+		cssSticky,
+		stickyTop,
+		left,
+		width,
+		height,
+		fixed,
+	} = useSticky(props);
+	
+	const {
+		stickyStyle,
+		stickyContent
+	} = useStickyCustomStyle(
+		props,
+		cssSticky,
+		stickyTop,
+		fixed,
+		left,
+		width,
+		height
+	);
+</script>
+
+<style lang="scss" scoped>
+	.fu-sticky {
+		/* #ifdef APP-VUE || MP-WEIXIN */
+		// 此处默认写sticky属性，是为了给微信和APP通过uni.createSelectorQuery查询是否支持css sticky使用
+		position: sticky;
+		/* #endif */
+		// 此处为解决个别机型会出现缝隙
+		// box-shadow: 0 -1px #ffffff;
+	}
+</style>

package/components/subsection/index.ts

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

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

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

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

@@ -0,0 +1,71 @@
+import { Ref, computed, ref } from 'vue';
+import type { SubsectionProps } from '../subsection';
+
+export const useSubsectionCustomStyle = (props: SubsectionProps, itemRect: Ref<any>) => {
+	const firstTime = ref<boolean>(true);
+	
+	const wrapperStyle = computed(() => {
+		const style: Record<string, any> = {};
+		// button模式时，设置背景色
+		if (props.mode === "button") {
+			style.backgroundColor = props.bgColor;
+		}
+		return style;
+	});
+	
+	// 滑块的样式
+	const barStyle = computed(() => {
+		const style: Record<string, any> = {
+			width: `${itemRect.value.width}px`,
+			height: `${itemRect.value.height}px`
+		};
+		// 通过translateX移动滑块，其移动的距离为索引*item的宽度
+		// #ifndef APP-NVUE
+		style.transform = `translateX(${ (props.current as number) * itemRect.value.width }px)`;
+		style.transitionDuration =  `${firstTime.value? 0 : parseInt(props.duration as string)}ms`;
+		// 如果是第一次执行此方法，让滑块在初始化时，瞬间滑动到默认的current第一个subsection item的中间
+		// 这里需要一个定时器，因为在非nvue下，是直接通过style绑定过渡时间，需要等其过渡完成后，再设置为false(非第一次移动滑块)
+		if (firstTime.value) {
+			setTimeout(() => {
+				firstTime.value = false;
+			}, 50);
+		}
+		// #endif
+		if (props.mode === "subsection") {
+			// 在subsection模式下，需要动态设置滑块的圆角，因为移动滑块使用的是translateX，无法通过父元素设置overflow: hidden隐藏滑块的直角
+			style.backgroundColor = props.activeColor;
+		}
+		return uni.$fu.deepMerge(style, uni.$fu.addStyle(props.customItemStyle));
+	});
+	
+	// 分段器item的样式
+	const itemStyle = computed(() => {
+		if (props.mode !== "subsection") return {};
+		return {
+			borderColor: props.activeColor,
+			borderWidth: "1px",
+			borderStyle: "solid"
+		};
+	});
+	
+	// 分段器文字颜色
+	const textStyle = computed(() => {
+		return (index: number) => {
+			const isActive = props.current === index;
+			const { mode, inactiveColor, activeColor, size, bold } = props;
+		  
+			return {
+				fontWeight: bold && isActive ? "bold" : "normal",
+				fontSize: uni.$fu.addUnit(size),  // 单位转换结果缓存
+				color: mode === "subsection"? (isActive ? "#fff" : inactiveColor): (isActive ? activeColor : inactiveColor)
+			};
+		};
+	});
+	
+	return {
+		wrapperStyle,
+		barStyle,
+		itemStyle,
+		textStyle
+	}
+}

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

@@ -0,0 +1,85 @@
+import { getCurrentInstance, ref, onMounted, type SetupContext, watch } from 'vue';
+import type { SubsectionProps, SubsectionEmits } from '../subsection';
+import { useCommon } from '../../../../hooks';
+// #ifdef APP-NVUE
+// @ts-nocheck
+const dom = uni.requireNativePlugin("dom");
+const animation = uni.requireNativePlugin("animation");
+// #endif
+	
+export const useSubsection = (props: SubsectionProps, $emit: SetupContext<SubsectionEmits>['emit']) => {
+	const instance = getCurrentInstance();
+	const { getRect } = useCommon();
+	const subsectionRef = ref();
+	// 组件尺寸
+	const itemRect = ref({
+		width: 0,
+		height: 0,
+	})
+		
+	// 初始化
+	const init = () => {
+		uni.$fu.sleep().then(() => initGetRect());
+	};
+	
+	// 判断展示文本
+	const getText = (item: any) => {
+		return typeof item === 'object' ? item[props.keyName] : item
+	};
+	
+	// 获取组件的尺寸
+	const initGetRect = () => {
+		// #ifndef APP-NVUE
+		getRect(".fu-subsection__item--0").then((size: any) => {
+			itemRect.value = size;
+		});
+		// #endif
+
+		// #ifdef APP-NVUE
+		const ref = instance?.refs["fu-subsection__item--0"]?.[0];
+		ref && dom.getComponentRect(ref, (res: any) => {
+			itemRect.value = res.size;
+		});
+		// #endif
+	};
+	
+	const handleClick = (index: number) => {
+		$emit("change", index);
+	};
+	
+	// 生命周期
+	onMounted(() => {
+		init()
+	});
+	
+	// watch监听事件
+	watch(() => props.list, () => {
+		init()
+	}, { deep: true });
+	
+	watch(() => props.current, async (newVal) => {
+		// #ifdef APP-NVUE
+		// 在安卓nvue上，如果通过translateX进行位移，到最后一个时，会导致右侧无法绘制圆角
+		// 故用animation模块进行位移
+		const subsectionElement = subsectionRef.value;
+		// 不存在ref的时候(理解为第一次初始化时，需要渲染dom，进行一定延时再获取ref)，这里的100ms是经过测试得出的结果(某些安卓需要延时久一点)，勿随意修改
+		await uni.$fu.sleep(subsectionElement? 0: 150)
+		if(subsectionElement) {
+			animation.transition(subsectionRef.value, {
+				styles: {
+					transform: `translateX(${ Number(newVal) * itemRect.value.width }px)`,
+					transformOrigin: "center center"
+				},
+				duration: 300,
+			});
+		}
+		// #endif
+	}, { immediate: true });
+	
+	return {
+		subsectionRef,
+		itemRect,
+		getText,
+		handleClick
+	}
+}

package/components/subsection/src/subsection.ts

@@ -0,0 +1,107 @@
+import type { ExtractPropTypes } from 'vue';
+import { componentProps } from '../../../constants';
+
+/**
+ * 分段器 mode 有效值
+ */
+export const subsectionModes = [] as const;
+
+export const subsectionProps = {
+	/**
+	 * @description 滑块的移动过渡时间，单位ms
+	 * @default 300
+	 */
+	duration: {
+		type: [String, Number],
+		default: 300
+	},
+	/**
+	 * @description subsection的数据
+	 */
+	list: {
+		type: Array,
+		default: () => []
+	},
+	/**
+	 * @description 当前活动的subsection的index
+	 */
+	current: {
+		type: [String, Number],
+		default: 0
+	},
+	/**
+	 * @description 激活的颜色
+	 */
+	activeColor: {
+		type: String,
+		default: '#2979ff'
+	},
+	/**
+	 * @description 未激活的颜色
+	 */
+	inactiveColor: {
+		type: String,
+		default: '#303133'
+	},
+	// 模式选择（默认 'button'）
+	/**
+	 * @description 模式选择
+	 * @values 'button' - 按钮模式, 'subsection' - 分段器模式
+	 * @default 'button'
+	 */
+	mode: {
+		type: String,
+		values: subsectionModes,
+		default: 'button'
+	},
+	/**
+	 * @description 字体大小
+	 * @default 12
+	 */
+	size: {
+		type: [String, Number],
+		default: 12
+	},
+	/**
+	 * @description 激活subsection的字体是否加粗
+	 * @default true
+	 */
+	bold: {
+		type: Boolean,
+		default: true
+	},
+	/**
+	 * @description 组件背景颜色（仅mode=button时生效）
+	 * @default '#efeff0'
+	 */
+	bgColor: {
+		type: String,
+		default: '#efeff0'
+	},
+	/**
+	 * @description 从list元素对象中读取的键名
+	 * @default 'name'
+	 */
+	keyName: {
+		type: String,
+		default: 'name'
+	},
+	/**
+	 * @description 自定义item外部样式
+	 */
+	customItemStyle: {
+		type: [String, Object],
+		default: ''
+	},
+	...componentProps
+};
+
+export const subsectionEmits = {
+	/**
+	 * @description 分段器选项发生改变时触发
+	 */
+	change: (_e: any) => true
+};
+
+export type SubsectionProps = ExtractPropTypes<typeof subsectionProps>;
+export type SubsectionEmits = typeof subsectionEmits;

package/components/subsection/src/subsection.vue

@@ -0,0 +1,165 @@
+<template>
+	<view ref="fu-subsection" class="fu-subsection" :class="[`fu-subsection--${mode}`]" :style="[$fu.addStyle(customStyle), wrapperStyle]">
+		<view 
+			ref="subsectionRef" 
+			class="fu-subsection__bar" 
+			:style="[barStyle]"
+			:class="[
+			mode === 'button' && 'fu-subsection--button__bar',
+			current === 0 && mode === 'subsection' && 'fu-subsection__bar--first',
+			current > 0 && current < list.length - 1 && mode === 'subsection' && 'fu-subsection__bar--center',
+			current === list.length - 1 && mode === 'subsection' && 'fu-subsection__bar--last'
+		]"></view>
+		<view 
+			:ref="`fu-subsection__item--${index}`" 
+			class="fu-subsection__item"
+			:class="[
+			`fu-subsection__item--${index}`,
+			index < list.length - 1 && 'fu-subsection__item--no-border-right',
+			index === 0 && 'fu-subsection__item--first',
+			index === list.length - 1 && 'fu-subsection__item--last'
+		]" :style="[itemStyle]" v-for="(item, index) in list" :key="index" @tap="handleClick(index)">
+			<text class="fu-subsection__item__text" :style="[textStyle(index)]">{{ getText(item) }}</text>
+		</view>
+	</view>
+</template>
+
+<script lang="ts" setup>
+	/**
+	 * Subsection 分段器
+	 * @description 此组件分段器一般用于用户从几个选项中选择某一个的场景
+	 * @tutorial http://www.fusions.top/components/subsection.html
+	 * @property {String | Number} duration 滑块的移动过渡时间，单位ms （默认 300）
+	 * @property {Array} list 选项的数组
+	 * @property {String | Number} current 当前激活的选项索引index（默认 0 ）
+	 * @property {String} activeColor 激活时的颜色（默认 '#2979ff' ）
+	 * @property {String} inactiveColor	未激活时的颜色（默认 '#303133' ）
+	 * @property {String} mode = [button|subsection] 模式选择（默认 'button' ）
+	 * 	@value button 按钮模式
+	 * 	@value subsection 分段器模式
+	 * @property {String | Number} size 字体大小，单位px（默认 12 ）
+	 * @property {Boolean} bold = [true|false] 激活选项的字体是否加粗（默认 true ）
+	 * @property {String} bgColor 组件背景颜色，mode为button时有效（默认 '#efeff0' ）
+	 * @property {String | Object} customStyle 定义需要用到的外部样式
+	 * @property {String | Object} customItemStyle 自定义选项样式
+	 * @property {String} keyName 从`list`元素对象中读取的键名（默认 'name' ）
+	 * 
+	 * @event {Function} change 分段器选项发生改变时触发  回调 index：选项的index索引值，从0开始
+	 * @example <fu-subsection :list="list" :current="current" @change="sectionChange"></fu-subsection>
+	 */
+	import { subsectionEmits, subsectionProps } from "./subsection";
+	import { useSubsection, useSubsectionCustomStyle } from './composables';
+	
+	defineOptions({ name: 'fuSubsection', options: { virtualHost: true } });
+	
+	const props = defineProps(subsectionProps);
+	const $emit = defineEmits(subsectionEmits);
+	
+	const {
+		subsectionRef,
+		itemRect,
+		getText,
+		handleClick
+	} = useSubsection(props, $emit);
+	
+	const {
+		wrapperStyle,
+		barStyle,
+		itemStyle,
+		textStyle
+	} = useSubsectionCustomStyle(props, itemRect)
+</script>
+
+<style lang="scss" scoped>
+	@use '../../../style/components.scss';
+	$padding: 3px;
+	$border-radius: 3px;
+	
+	.fu-subsection {
+		@include components.flex(row);
+		position: relative;
+		/* #ifndef APP-NVUE */
+		width: 100%;
+		box-sizing: border-box;
+		overflow: hidden;
+		/* #endif */
+		
+		&--button {
+			height: 32px;
+			background-color: rgb(238, 238, 239);
+			padding: $padding;
+			border-radius: $border-radius;
+			align-items: stretch;
+			
+			&__bar {
+				background-color: #ffffff;
+			}
+		}
+		
+		&--subsection {
+			height: 30px;
+		}
+		
+		&__bar {
+			position: absolute;
+			/* #ifndef APP-NVUE */
+			transition-property: transform, color;
+			transition-duration: 0.3s;
+			transition-timing-function: ease-in-out;
+			/* #endif */
+			
+			&--first {
+				border-top-left-radius: $border-radius;
+				border-bottom-left-radius: $border-radius;
+				border-top-right-radius: 0px;
+				border-bottom-right-radius: 0px;
+			}
+			
+			&--center {
+				border-top-left-radius: 0px;
+				border-bottom-left-radius: 0px;
+				border-top-right-radius: 0px;
+				border-bottom-right-radius: 0px;
+			}
+			
+			&--last {
+				border-top-left-radius: 0px;
+				border-bottom-left-radius: 0px;
+				border-top-right-radius: $border-radius;
+				border-bottom-right-radius: $border-radius;
+			}
+		}
+		
+		&__item {
+			@include components.flex(row);
+			justify-content: center;
+			align-items: center;
+			flex: 1;
+			// vue环境下，需要设置相对定位，因为滑块为绝对定位，item需要在滑块的上面
+			position: relative;
+			
+			&--no-border-right {
+				border-right-width: 0 !important;
+			}
+			
+			&--first {
+				border-top-left-radius: $border-radius;
+				border-bottom-left-radius: $border-radius;
+			}
+			
+			&--last {
+				border-top-right-radius: $border-radius;
+				border-bottom-right-radius: $border-radius;
+			}
+			
+			&__text {
+				@include components.flex(row);
+				font-size: 12px;
+				line-height: 12px;
+				align-items: center;
+				transition-property: color;
+				transition-duration: 0.3s;
+			}
+		}
+	}
+</style>

package/components/swipe-action/src/composables/index.ts

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

package/components/swipe-action/src/composables/use-swipe-action.ts

@@ -0,0 +1,58 @@
+import { ref, provide } from 'vue';
+
+export const useSwipeAction = () => {
+	const children: any[] = [];
+	const openItem = ref<any>(null);
+	
+	// 公开给用户使用，重制组件样式
+	const resize = () => {
+		// wxs 会自己计算组件大小，所以无需执行下面代码
+		// #ifndef APP-VUE || H5 || MP-WEIXIN
+		children.forEach(item => {
+			item.init()
+		})
+		// #endif
+	};
+	
+	// 公开给用户使用，关闭全部 已经打开的组件
+	const closeAll = () => {
+		children.forEach( item => {
+			// #ifdef APP-VUE || H5 || MP-WEIXIN
+			item.is_show = 'none';
+			// #endif
+
+			// #ifndef APP-VUE || H5 || MP-WEIXIN
+			item.close()
+			// #endif
+		})
+	};
+	
+	const closeOther = (item: any) => {
+		if (openItem.value && openItem.value !== item) {
+			// #ifdef APP-VUE || H5 || MP-WEIXIN
+			openItem.value.is_show = 'none';
+			// #endif
+
+			// #ifndef APP-VUE || H5 || MP-WEIXIN
+			openItem.value.close()
+			// #endif
+		}
+		// 记录上一个打开的 swipe-action-item ,用于 auto-close
+		openItem.value = item
+	};
+	
+	// 提供父组件上下文
+	provide('swipeActionContext', {
+		children,
+		resize,
+		closeAll,
+		closeOther
+	});
+	
+	return {
+		children,
+		resize,
+		closeAll,
+		closeOther
+	}
+}

package/components/swipe-action/src/swipe-action.vue

@@ -0,0 +1,81 @@
+<template>
+	<view class="fu-swipe-action">
+		<slot></slot>
+	</view>
+</template>
+
+<script lang="ts" setup>
+	/**
+	 * SwipeAction 滑动菜单
+	 * @description 此组件一般用于左滑唤出操作菜单的场景，用的最多的是左滑删除操作。
+	 * @tutorial http://www.fusions.top/components/swipeAction.html
+	 */
+	import { useSwipeAction } from './composables';
+	
+	defineOptions({ name: 'FuSwipeAction', options: { virtualHost: true } });
+	
+	const {
+		children,
+		resize,
+		closeAll,
+		closeOther
+	} = useSwipeAction();
+	
+	// 暴露方法
+	defineExpose({
+		children,
+		resize,
+		closeAll,
+		closeOther
+	});
+	
+	// export default {
+	// 	name:"FuSwipeAction",
+	// 	data() {
+	// 		return {};
+	// 	},
+	// 	created() {
+	// 		this.children = [];
+	// 	},
+	// 	methods: {
+	// 		// 公开给用户使用，重制组件样式
+	// 		resize(){
+	// 			// wxs 会自己计算组件大小，所以无需执行下面代码
+	// 			// #ifndef APP-VUE || H5 || MP-WEIXIN
+	// 			this.children.forEach(item=>{
+	// 				item.init()
+	// 			})
+	// 			// #endif
+	// 		},
+	// 		// 公开给用户使用，关闭全部 已经打开的组件
+	// 		closeAll(){
+	// 			this.children.forEach(item=>{
+	// 				// #ifdef APP-VUE || H5 || MP-WEIXIN
+	// 				item.is_show = 'none';
+	// 				// #endif
+		
+	// 				// #ifndef APP-VUE || H5 || MP-WEIXIN
+	// 				item.close()
+	// 				// #endif
+	// 			})
+	// 		},
+	// 		closeOther(item) {
+	// 			if (this.openItem && this.openItem !== item) {
+	// 				// #ifdef APP-VUE || H5 || MP-WEIXIN
+	// 				this.openItem.is_show = 'none';
+	// 				// #endif
+		
+	// 				// #ifndef APP-VUE || H5 || MP-WEIXIN
+	// 				this.openItem.close()
+	// 				// #endif
+	// 			}
+	// 			// 记录上一个打开的 swipe-action-item ,用于 auto-close
+	// 			this.openItem = item
+	// 		}
+	// 	}
+	// }
+</script>
+
+<style>
+
+</style>