fusions-ui 1.2.7 → 1.2.8

package/{libs/function/colorGradient.js → components/loading/src/composables/colorGradient.ts}

@@ -4,7 +4,7 @@
  * @param {string} endColor 结束的颜色
  * @param {number} step 颜色等分的份额
  * */
-function colorGradient(startColor = 'rgb(0, 0, 0)', endColor = 'rgb(255, 255, 255)', step = 10) {
+function colorGradient(startColor: string = 'rgb(0, 0, 0)', endColor: string = 'rgb(255, 255, 255)', step: number = 10) {
     const startRGB = hexToRgb(startColor, false); // 转换为rgb数组模式
     const startR = startRGB[0];
     const startG = startRGB[1];
@@ -34,7 +34,7 @@ function colorGradient(startColor = 'rgb(0, 0, 0)', endColor = 'rgb(255, 255, 25
 }
 
 // 将hex表示方式转换为rgb表示方式(这里返回rgb数组模式)
-function hexToRgb(sColor, str = true) {
+function hexToRgb(sColor: string, str: boolean = true) {
     const reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/
     sColor = String(sColor).toLowerCase()
     if (sColor && reg.test(sColor)) {
@@ -62,7 +62,7 @@ function hexToRgb(sColor, str = true) {
 }
 
 // 将rgb表示方式转换为hex表示方式
-function rgbToHex(rgb) {
+function rgbToHex(rgb: string) {
     const _this = rgb
     const reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/
     if (/^(rgb|RGB)/.test(_this)) {
@@ -101,7 +101,7 @@ function rgbToHex(rgb) {
 * sHex为传入的十六进制的色值
 * alpha为rgba的透明度
 */
-function colorToRgba(color, alpha) {
+function colorToRgba(color: string, alpha: number) {
     color = rgbToHex(color)
     // 十六进制颜色值的正则表达式
     const reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/

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

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

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

@@ -0,0 +1,21 @@
+import { computed } from 'vue';
+import type { LoadingProps } from '../loading';
+import { colorGradient } from './colorGradient';
+
+export const userLoadingCustomStyle = (props: LoadingProps) => {
+	// 当为circle类型时，给其另外三边设置一个更轻一些的颜色
+	// 之所以需要这么做的原因是，比如父组件传了color为红色，那么需要另外的三个边为浅红色
+	// 而不能是固定的某一个其他颜色(因为这个固定的颜色可能浅蓝，导致效果没有那么细腻良好)
+	const otherBorderColor = computed(() => {
+		const lightColor = colorGradient(props.color, '#ffffff', 100)[80]
+		if (props.mode === 'circle') {
+			return props.inactiveColor ? props.inactiveColor : lightColor
+		} else {
+			return 'transparent'
+		}
+	})
+	
+	return {
+		otherBorderColor
+	}
+}

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

@@ -0,0 +1,100 @@
+import { ref, onMounted, watch } from 'vue';
+import type { LoadingProps } from '../loading';
+// #ifdef APP-NVUE
+// @ts-ignore
+const animation = weex.requireModule('animation') as any;
+// #endif
+
+export const useLoading = (props: LoadingProps) => {
+	// Array.form可以通过一个伪数组对象创建指定长度的数组
+	// https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/from
+	const array12 = ref(Array.from({
+		length: 12
+	}));
+	// 这里需要设置默认值为360，否则在安卓nvue上，会延迟一个duration周期后才执行
+	// 在iOS nvue上，则会一开始默认执行两个周期的动画
+	const aniAngel = ref(360); // 动画旋转角度
+	const webviewHide = ref(false); // 监听webview的状态，如果隐藏了页面，则停止动画，以免性能消耗
+	const ani = ref(null);
+	const loading = ref(false); // 是否运行中，针对nvue使用
+	
+	const init = () => {
+		setTimeout(() => {
+			// #ifdef APP-NVUE
+			props.show && nvueAnimate()
+			// #endif
+			// #ifdef APP-PLUS 
+			props.show && addEventListenerToWebview()
+			// #endif
+		}, 20)
+	};
+	
+	// 监听webview的显示与隐藏
+	const addEventListenerToWebview = () => {
+		// webview的堆栈
+		const pages = getCurrentPages();
+		// 获取当前页面
+		const presentPage = pages[pages.length - 1];
+		// 当前页面的webview实例
+		const currentWebview = presentPage.$getAppWebview();
+		// 监听webview的显示与隐藏，从而停止或者开始动画(为了性能)
+		currentWebview.addEventListener('hide', () => {
+			webviewHide.value = true;
+		})
+		currentWebview.addEventListener('show', () => {
+			webviewHide.value = false;
+		})
+	};
+			
+	// #ifdef APP-NVUE
+	const nvueAnimate = () => {
+		// nvue下，非flower类型时才需要旋转，因为nvue的flower类型，使用了weex的
+		// loading-indicator组件，自带旋转功能
+		props.mode !== 'flower' && startAnimate()
+	};
+	
+	// 执行nvue的animate模块动画
+	const startAnimate = () => {
+		loading.value = true;
+		if (!ani.value) return
+		animation.transition(ani.value, {
+			// 进行角度旋转
+			styles: {
+				transform: `rotate(${aniAngel.value}deg)`,
+				transformOrigin: 'center center'
+			},
+			duration: props.duration,
+			timingFunction: props.timingFunction,
+			delay: 10
+		}, () => {
+			// 每次增加360deg，为了让其重新旋转一周
+			aniAngel.value += 360;
+			// 动画结束后，继续循环执行动画，需要同时判断webviewHide变量
+			// nvue安卓，页面隐藏后依然会继续执行startAnimate方法
+			props.show && !webviewHide.value ? startAnimate() : loading.value = false;
+		})
+	}
+	// #endif
+	
+	// 生命周期
+	onMounted(() => {
+		init()
+	});
+		
+	// watch监听事件
+	watch(() => props.show, (newVal) => {
+		// nvue中，show为true，且为非loading状态，就重新执行动画模块
+		// #ifdef APP-NVUE
+		if (newVal && !loading.value) {
+			setTimeout(() => {
+				startAnimate()
+			}, 30)
+		}
+		// #endif
+	});
+	
+	return {
+		array12,
+		webviewHide
+	}
+}

package/components/loading/src/loading.ts

@@ -0,0 +1,77 @@
+import type { ExtractPropTypes } from 'vue';
+import { componentProps } from '../../../constants';
+
+/**
+ * 加载动画mode有效值
+ */
+export const loadingModes = ['circle', 'semicircle', 'flower', 'over'] as const;
+
+export const loadingProps = {
+	/**
+	 * @description 是否显示
+	 * @default true
+	 * @example <fu-loading :show="false"></fu-loading>
+	 */
+	show: {
+		type: Boolean,
+		default: true
+	},
+	/**
+	 * @description 动画类型
+	 * @values 'circle' - 圆圈形状, 'semicircle' - 半圆形状, 'flower' - 花朵形状, 'over' - 翻转效果
+	 * @default 'flower'
+	 * @example <fu-loading mode="circle"></fu-loading>
+	 */
+	mode: {
+		type: String,
+		values: loadingModes,
+		default: 'flower'
+	},
+	/**
+	 * @description 加载颜色
+	 * @default '#a5a6a8'
+	 * @example <fu-loading color="red"></fu-loading>
+	 */
+	color: {
+		type: String,
+		default: '#a5a6a8'
+	},
+	/**
+	 * @description 加载动画大小
+	 * @default 20
+	 * @example <fu-loading size="18"></fu-loading>
+	 */
+	size: {
+		type: [String, Number],
+		default: 20
+	},
+	/**
+	 * @description 动画模式
+	 * @default 'linear'
+	 * @example <fu-loading timingFunction="linear"></fu-loading>
+	 */
+	timingFunction: {
+		type: String,
+		default: 'linear'
+	},
+	/**
+	 * @description 动画执行周期时间
+	 * @default 1200
+	 * @example <fu-loading duration="2000"></fu-loading>
+	 */
+	duration: {
+		type: [String, Number],
+		default: 1200
+	},
+	/**
+	 * @description 暗边颜色（仅mode=circle时生效）
+	 * @example <fu-loading inactiveColor="#eeeeee"></fu-loading>
+	 */
+	inactiveColor: {
+		type: String,
+		default: ''
+	},
+	...componentProps
+}
+
+export type LoadingProps = ExtractPropTypes<typeof loadingProps>;

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

@@ -14,12 +14,12 @@
 					borderBottomColor: otherBorderColor,
 					borderLeftColor: otherBorderColor,
 					borderRightColor: otherBorderColor,
-					'animation-duration': `${duration}ms`,
-					'animation-timing-function': mode === 'semicircle' || mode === 'circle' ? timingFunction : ''
+					animationDuration: `${duration}ms`,
+					animationTimingFunction: mode === 'semicircle' || mode === 'circle' ? timingFunction : ''
 				}" v-if="!webviewHide">
 				<block v-if="mode === 'flower'">
 					<!-- #ifndef APP-NVUE -->
-					<view v-for="(item,index) in array12" :key="index" class="fu-loading__dot"></view>
+					<view v-for="(_,index) in array12" :key="index" class="fu-loading__dot"></view>
 					<!-- #endif -->
 					<!-- #ifdef APP-NVUE -->
 					<!-- 此组件内部图标部分无法设置宽高，即使通过width和height配置了也无效 -->
@@ -31,17 +31,11 @@
 	</fu-transition>
 </template>
 
-<script>
-	import { colorGradient } from '../../libs/function/colorGradient.js'
-	import mpMixin from '../../libs/mixin/mpMixin.js'
-	import mixin from '../../libs/mixin/mixin.js'
-	import props from './props.js'
-	// #ifdef APP-NVUE
-	const animation = weex.requireModule('animation');
-	// #endif
+<script lang="ts" setup>	
 	/**
 	 * Loading 加载动画
 	 * @description 此组件为一个小动画，目前用在fusionsUi的loadingMore加载更多和switch开关等组件的正在加载状态场景。
+	 * @tutorial http://www.fusions.top/components/loading.html
 	 * @property {Boolean} show = [true|false] 是否显示 (默认 false)
 	 * @property {String} mode = [circle|semicircle|flower|over] 动画类型（默认 flower）
 	 * 	@value circle 圆圈形状
@@ -49,120 +43,30 @@
 	 * 	@value flower 花朵形状
 	 * 	@value over 翻转效果
 	 * @property {String} color 动画颜色
-	 * @property {String,Number} size 动画大小（默认 20）
-	 * @property {String,Number} duration 动画执行周期时间（默认 1200）
+	 * @property {String | Number} size 动画大小（默认 20）
+	 * @property {String | Number} duration 动画执行周期时间（默认 1200）
 	 * @property {String} inactiveColor	暗边颜色（仅mode=circle时有效） 
 	 * @property {String} timingFunction 动画模式 （默认 'linear' ）
 	 * @property {String} customClass 定义需要用到的外部样式类
-	 * @property {Object,String} customStyle 定义需要用到的外部样式
+	 * @property {String | Object} customStyle 定义需要用到的外部样式
 	 * 
 	 * @example <fu-loading></fu-loading>
 	 */
-	export default {
-		name: "FuLoading",
-		mixins: [mpMixin, mixin, props],
-		data() {
-			return {
-				// Array.form可以通过一个伪数组对象创建指定长度的数组
-				// https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/from
-				array12: Array.from({
-					length: 12
-				}),
-				// 这里需要设置默认值为360，否则在安卓nvue上，会延迟一个duration周期后才执行
-				// 在iOS nvue上，则会一开始默认执行两个周期的动画
-				aniAngel: 360, // 动画旋转角度
-				webviewHide: false, // 监听webview的状态，如果隐藏了页面，则停止动画，以免性能消耗
-				loading: false, // 是否运行中，针对nvue使用
-			};
-		},
-		computed: {
-			// 当为circle类型时，给其另外三边设置一个更轻一些的颜色
-			// 之所以需要这么做的原因是，比如父组件传了color为红色，那么需要另外的三个边为浅红色
-			// 而不能是固定的某一个其他颜色(因为这个固定的颜色可能浅蓝，导致效果没有那么细腻良好)
-			otherBorderColor() {
-				const lightColor = colorGradient(this.color, '#ffffff', 100)[80]
-				if (this.mode === 'circle') {
-					return this.inactiveColor ? this.inactiveColor : lightColor
-				} else {
-					return 'transparent'
-				}
-			}
-		},
-		mounted() {
-			this.init()
-		},
-		methods: {
-			init() {
-				setTimeout(() => {
-					// #ifdef APP-NVUE
-					this.show && this.nvueAnimate()
-					// #endif
-					// #ifdef APP-PLUS 
-					this.show && this.addEventListenerToWebview()
-					// #endif
-				}, 20)
-			},
-			
-			// 监听webview的显示与隐藏
-			addEventListenerToWebview() {
-				// webview的堆栈
-				const pages = getCurrentPages();
-				// 获取当前页面
-				const presentPage = pages[pages.length - 1];
-				// 当前页面的webview实例
-				const currentWebview = presentPage.$getAppWebview();
-				// 监听webview的显示与隐藏，从而停止或者开始动画(为了性能)
-				currentWebview.addEventListener('hide', () => {
-					this.webviewHide = true;
-				})
-				currentWebview.addEventListener('show', () => {
-					this.webviewHide = false;
-				})
-			},
-			
-			// #ifdef APP-NVUE
-			nvueAnimate() {
-				// nvue下，非flower类型时才需要旋转，因为nvue的flower类型，使用了weex的
-				// loading-indicator组件，自带旋转功能
-				this.mode !== 'flower' && this.startAnimate()
-			},
-			// 执行nvue的animate模块动画
-			startAnimate() {
-				this.loading = true;
-				const ani = this.$refs.ani;
-				if (!ani) return
-				animation.transition(ani, {
-					// 进行角度旋转
-					styles: {
-						transform: `rotate(${this.aniAngel}deg)`,
-						transformOrigin: 'center center'
-					},
-					duration: this.duration,
-					timingFunction: this.timingFunction,
-					delay: 10
-				}, () => {
-					// 每次增加360deg，为了让其重新旋转一周
-					this.aniAngel += 360;
-					// 动画结束后，继续循环执行动画，需要同时判断webviewHide变量
-					// nvue安卓，页面隐藏后依然会继续执行startAnimate方法
-					this.show && !this.webviewHide ? this.startAnimate() : this.loading = false;
-				})
-			}
-			// #endif
-		},
-		watch: {
-			show(n) {
-				// nvue中，show为true，且为非loading状态，就重新执行动画模块
-				// #ifdef APP-NVUE
-				if (n && !this.loading) {
-					setTimeout(() => {
-						this.startAnimate()
-					}, 30)
-				}
-				// #endif
-			}
-		}
-	}
+	import { loadingProps } from './loading';
+	import { useLoading, userLoadingCustomStyle } from './composables';
+	
+	defineOptions({ name: 'FuLoading', options: { virtualHost: true } });
+	
+	const props = defineProps(loadingProps);
+	
+	const {
+		array12,
+		webviewHide
+	} = useLoading(props);
+	
+	const {
+		otherBorderColor
+	} = userLoadingCustomStyle(props);
 </script>
 
 <style lang="scss" scoped>

package/components/loading-more/index.ts

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

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

@@ -0,0 +1,75 @@
+import type { ExtractPropTypes } from 'vue';
+import { componentProps } from '../../../constants';
+
+/**
+ * 加载更多 mode 有效值
+ */
+export const loadingMoreModes = ['circle', 'semicircle', 'flower', 'over'] as const;
+
+export const loadingMoreProps = {
+	/**
+	 * @description 加载状态
+	 * @values 0 - loading前, 1 - loading中, 2 - 没有更多了
+	 * @default 0
+	 * @example <fu-loading-more :loadingType="1"></fu-loading-more>
+	 */
+	loadingType: {
+		type: [String, Number],
+		default: 0
+	},
+	/**
+	 * @description 动画类型
+	 * @values 'circle' - 圆圈形状, 'semicircle' - 半圆形状, 'flower' - 花朵形状, 'over' - 翻转效果
+	 * @default 'flower'
+	 * @example <fu-loading-more mode="circle"></fu-loading-more>
+	 */
+	mode: {
+		type: String,
+		values: loadingMoreModes,
+		default: 'flower'
+	},
+	/**
+	 * @description 文本&字体颜色
+	 * @default '#a5a6a8'
+	 * @example <fu-loading-more color="red"></fu-loading-more>
+	 */
+	color: {
+		type: String,
+		default: "#a5a6a8"
+	},
+	/**
+	 * @description 字体大小
+	 * @default 12
+	 * @example <fu-loading-more size="14"></fu-loading-more>
+	 */
+	size: {
+		type: [String, Number],
+		default: 12
+	},
+	/**
+	 * @description 图标大小
+	 * @default 18
+	 * @example <fu-loading-more iconSize="20"></fu-loading-more>
+	 */
+	iconSize: {
+		type: [String, Number],
+		default: 18
+	},
+	/**
+	 * @description 文字描述
+	 * @example <fu-loading-more :contentText="{contentdown: "上拉加载更多", contentrefresh: "正在加载", contentnomore: "没有更多了"}"></fu-loading-more>
+	 */
+	contentText: {
+		type: Object,
+		default () {
+			return {
+				contentdown: "上拉显示更多",
+				contentrefresh: "正在努力加载",
+				contentnomore: "已经到底了"
+			}
+		}
+	},
+	...componentProps
+};
+
+export type LoadingMoreProps = ExtractPropTypes<typeof loadingMoreProps>;

package/components/{fu-loading-more/fu-loading-more.vue → loading-more/src/loading-more.vue}

@@ -1,5 +1,5 @@
 <template>
-	<view class="fu-loading-more" :class="[customClass]" :style="[$fu.addStyle(this.customStyle)]">
+	<view class="fu-loading-more" :class="customClass" :style="[$fu.addStyle(customStyle)]">
 		<fu-loading 
 			:mode="mode" 
 			:color="color" 
@@ -17,42 +17,41 @@
 	</view>
 </template>
 
-<script>
-	import mixin from '../../libs/mixin/mixin.js'
-	import mpMixin from '../../libs/mixin/mpMixin.js'
-	import props from './props.js'
+<script lang="ts" setup>
 	/**
 	 * LoadingMore加载更多
 	 * @description 此组件一般用于标识页面底部加载数据时的状态
-	 * @property {String,Number} loadingType = [0|1|2] 组件状态  默认0 上拉的状态：0-loading前；1-loading中；2-没有更多了
+	 * @tutorial http://www.fusions.top/components/loading-more.html
+	 * @property {String | Number} loadingType = [0|1|2] 组件状态（默认 0）
+	 * 	@value 0 loading前
+	 * 	@value 1 loading中
+	 * 	@value 2 没有更多了
 	 * @property {String} color 定义颜色（默认 '#a5a6a8'）
-	 * @property {String,Number} size 定义字体大小（默认 12）
-	 * @property {Object} contentText 定义文字描述 （ 默认{contentdown: "上拉显示更多", contentrefresh: "正在努力加载", contentnomore: "已经到底了"}）
-	 * @property {String,Number} iconSize 定义图标大小（默认 18）
+	 * @property {String | Number} size 定义字体大小（默认 12）
+	 * @property {Object} contentText 定义文字描述 （ 默认 {contentdown: '上拉显示更多', contentrefresh: '正在努力加载', contentnomore: '已经到底了'} ）
+	 * @property {String | Number} iconSize 定义图标大小（默认 18）
 	 * @property {String} mode = [circle|semicircle|flower|over] 动画类型（默认 flower）
 	 * 	@value circle 圆圈形状
 	 * 	@value semicircle 半圆形状
 	 * 	@value flower 花朵形状
 	 * 	@value over  翻转效果
 	 * @property {String} customClass 定义需要用到的外部类
-	 * @property {Object,String} customStyle 定义需要用到的外部样式
+	 * @property {String | Object} customStyle 定义需要用到的外部样式
 	 * 
 	 * @example <fu-loading-more :loadingType="1"></fu-loading-more>
 	 */
-	export default {
-		name: "FuLoadingMore",
-		mixins: [mixin, mpMixin, props],
-		data() {
-			return {};
-		}
-	}
+	import { loadingMoreProps } from './loading-more';
+	
+	defineOptions({ name: 'FuLoadingMore', options: { virtualHost: true } })
+	
+	const props = defineProps(loadingMoreProps);
 </script>
 
 <style lang="scss" scoped>
-	@import '../../libs/style/components.scss';
+	@use '../../../style/components.scss';
 	
 	.fu-loading-more {
-		@include flex(row);
+		@include components.flex(row);
 		align-items: center;
 		justify-content: center;
 		height: 40px;

package/components/modal/index.ts

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

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

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

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

@@ -0,0 +1,17 @@
+import { computed, type CSSProperties } from 'vue';
+import type { ModalProps } from '../modal';
+
+export const useModalCustomStyle = (props: ModalProps) => {
+	const nvueStyle = computed<CSSProperties>(() => {
+		const style: Record<string, any> = {};
+		// 避免nvue中不能换行的问题
+		// #ifdef APP-NVUE
+		style.width = uni.$fu.addUnit(uni.$fu.getPx(props.width) - 50, 'px');
+		// #endif
+		return style;
+	});
+	
+	return {
+		nvueStyle
+	}
+}

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

@@ -0,0 +1,56 @@
+import { ref, nextTick, type SetupContext } from 'vue';
+import type { ModalProps, ModalEmits } from '../modal';
+
+export const useModal = (props: ModalProps, $emit: SetupContext<ModalEmits>['emit']) => {
+	const popupRef = ref();
+	const loading = ref(false);
+	
+	const open = () => {
+		popupRef.value.open();
+		if (loading.value) loading.value = false;
+	};
+	
+	const close = () => {
+		popupRef.value.close();
+	};
+	
+	const popupChange = (e: any) => {
+		if (!e.show) $emit('close');
+	};
+	
+	// 点击确定按钮
+	const confirmHandler = () => {
+		if (!loading.value) {
+			$emit('confirm');
+		}
+		// 如果配置了异步关闭，将按钮值为loading状态
+		if (props.asyncClose) {
+			loading.value = true;
+		} else {
+			close();
+		}
+	};
+	
+	// 点击取消按钮
+	const cancelHandler = () => {
+		$emit('cancel');
+		close();
+	};
+	
+	const closeLoading = () => {
+		nextTick(() => {
+			loading.value = false;
+		})
+	};
+		
+	return {
+		popupRef,
+		loading,
+		open,
+		close,
+		popupChange,
+		confirmHandler,
+		cancelHandler,
+		closeLoading
+	}
+}