fusions-ui 1.2.6 → 1.2.8

package/components/collapse-item/src/composables/use-collapse-item.ts

@@ -0,0 +1,139 @@
+import { getCurrentInstance, ref, reactive, onMounted, inject, nextTick, onUnmounted, watch } from 'vue';
+import type { CollapseItemProps } from '../collapse-item';
+// #ifdef APP-NVUE
+// @ts-ignore
+const dom = weex.requireModule('dom');
+// #endif
+
+export const useCollapseItem = (props: CollapseItemProps) => {
+	const instance = getCurrentInstance();
+	const elId = uni.$fu.uuid();
+	const isOpen = ref(false);
+	const isheight = ref<boolean | null>(null);
+	const height = ref(0);
+	const nameSync = ref<string | number>(0);
+	const currentItem = reactive({
+		nameSync: nameSync,
+		isOpen: isOpen,
+		getCollapseHeight: () => {},
+		getNvueHwight: () => {}
+	});
+	const collapse = inject<any>('collapseContext', null);
+	
+	const init = (type?: boolean) => {
+		// #ifndef APP-NVUE
+		getCollapseHeight(type)
+		// #endif
+		// #ifdef APP-NVUE
+		getNvueHwight(type)
+		// #endif
+	};
+	
+	const getCollapseHeight = (type?: boolean, index: number = 0) => {
+		const views = uni.createSelectorQuery().in(instance)
+		views.select(`#${elId}`).fields({size: true}, (data: any) => {
+			// 兼容百度中可能获取不到节点信息 ，需要循环获取
+			if (index >= 10) return
+			if (!data) {
+				index++
+				getCollapseHeight(false, index)
+				return
+			}
+			// #ifdef APP-NVUE
+			height.value = data.height + 1;
+			// #endif
+			// #ifndef APP-NVUE
+			height.value = data.height;
+			// #endif
+			isheight.value = true;
+			if (type) return
+			handleClick(isOpen.value, 'init')
+		}).exec()
+	};
+	
+	const getNvueHwight = (type?: boolean) => {
+		const refs = instance?.refs;
+		if(!refs || !refs['collapse--hook']) return
+		dom.getComponentRect(refs['collapse--hook'], (option: any) => {
+			if (option && option.result && option.size) {
+				// #ifdef APP-NVUE
+				height.value = option.size.height + 1;
+				// #endif
+				// #ifndef APP-NVUE
+				height.value = option.size.height;
+				// #endif
+				isheight.value = true;
+				if (type) return
+				handleClick(props.open, 'init')
+			}
+		})
+	};
+	
+	const handleClick = (val: boolean, type?: string) => {
+		if (props.disabled) return
+		isOpen.value = val;
+		if (isOpen.value && collapse) {
+			collapse.setAccordion(currentItem)
+		}
+		if (type !== 'init' && collapse) {
+			collapse.handleChange(isOpen.value, currentItem)
+		}
+	};
+	
+	const uninstall = () => {
+		if (collapse) {
+			collapse.unregisterItem(currentItem)
+		}
+	};
+	
+	currentItem.getCollapseHeight = getCollapseHeight;
+	currentItem.getNvueHwight = getNvueHwight;
+	
+	// 生命周期
+	onMounted(() => {
+		if(!collapse) return
+		if (props.name !== '') {
+			nameSync.value = props.name;
+		} else {
+			nameSync.value = String(collapse.childrens.value.length);
+		}
+		
+		currentItem.nameSync = nameSync.value;
+		
+		if (collapse.names.value.indexOf(nameSync.value) === -1) {
+			collapse.names.value.push(nameSync.value)
+		} else {
+			console.warn(`name 值 ${nameSync.value} 重复`);
+		}
+		
+		collapse.registerItem(currentItem)
+		
+		nextTick(() => {
+			init()
+		})
+	});
+	
+	onUnmounted(() => {
+		uninstall()
+	});
+	
+	// watch计算属性
+	watch(() => props.open, (newVal) => {
+		isOpen.value = newVal;
+		handleClick(newVal, 'init');
+	}, { immediate: true });
+	
+	watch(() => props.title, () => {
+		nextTick(() => {
+			init(true)
+		})
+	});
+	
+	return {
+		elId,
+		isOpen,
+		isheight,
+		height,
+		handleClick
+	}
+}

package/components/countdown/index.ts

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

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

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

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

@@ -0,0 +1,133 @@
+import { ref, watch, type SetupContext, onMounted, onUnmounted } from 'vue';
+import type { CountdownProps, CountdownEmits } from '../countdown';
+import { isSameSecond, formatTime, formatTimeData } from '../util';
+
+export const useCountdown = (props: CountdownProps, $emit: SetupContext<CountdownEmits>['emit']) => {
+	const timer = ref<any>(null);
+	// 各单位(天，时，分等)剩余时间
+	const timeData = ref(formatTimeData(0));
+	// 格式化后的时间，如"05:25:25"
+	const formattedTime = ref<string>('0');
+	// 倒计时是否正在进行中
+	const runing = ref<boolean>(false);
+	// 结束的毫秒时间戳
+	const endTime = ref<number>(0);
+	// 剩余的毫秒时间
+	const remainTime = ref<number>(0);
+	
+	const init = () => {
+		reset()
+	};
+	
+	// 开始倒计时
+	const start = () => {
+		if (runing.value) return
+		// 标识为进行中
+		runing.value = true;
+		// 结束时间戳 = 此刻时间戳 + 剩余的时间
+		endTime.value = Date.now() + remainTime.value;
+		toTick()
+	};
+	
+	// 根据是否展示毫秒，执行不同操作函数
+	const toTick = () => {
+		if (props.millisecond) {
+			microTick()
+		} else {
+			macroTick()
+		}
+	};
+	
+	const macroTick = () => {
+		clearTimer()
+		// 每隔一定时间，更新一遍定时器的值
+		// 同时此定时器的作用也能带来毫秒级的更新
+		timer.value = setTimeout(() => {
+			// 获取剩余时间
+			const remain = getRemainTime();
+			// 重设剩余时间
+			if (!isSameSecond(remain, remainTime.value) || remain === 0) {
+				setRemainTime(remain)
+			}
+			// 如果剩余时间不为0，则继续检查更新倒计时
+			if (remainTime.value !== 0) {
+				macroTick()
+			}
+		}, 30)
+	};
+	
+	const microTick = () => {
+		clearTimer()
+		timer.value = setTimeout(() => {
+			setRemainTime(getRemainTime())
+			if (remainTime.value !== 0) {
+				microTick()
+			}
+		}, 50)
+	};
+	
+	// 获取剩余的时间
+	const getRemainTime = () => {
+		// 取最大值，防止出现小于0的剩余时间值
+		return Math.max(endTime.value - Date.now(), 0)
+	};
+	
+	// 设置剩余的时间
+	const setRemainTime = (remain: number) => {
+		remainTime.value = remain;
+		// 根据剩余的毫秒时间，得出该有天，小时，分钟等的值，返回一个对象
+		const data = formatTimeData(remain);
+		timeData.value = data;
+		$emit('change', data)
+		// 得出格式化后的时间
+		formattedTime.value = formatTime(props.format, data);
+		// 如果时间已到，停止倒计时
+		if (remain <= 0) {
+			pause()
+			$emit('timeup')
+		}
+	};
+	
+	// 重置倒计时
+	const reset = () => {
+		pause()
+		remainTime.value = Number(props.time);
+		setRemainTime(remainTime.value)
+		if (props.autoStart) {
+			start()
+		}
+	};
+	
+	// 暂停倒计时
+	const pause = () => {
+		runing.value = false;
+		clearTimer()
+	};
+	
+	// 清空定时器
+	const clearTimer = () => {
+		clearTimeout(timer.value)
+		timer.value = null;
+	};
+	
+	// 生命周期
+	onMounted(() => {
+		init()
+	});
+	
+	onUnmounted(() => {
+		clearTimer()
+	});
+	
+	// watch监听事件
+	watch(() => props.time, () => {
+		reset()
+	});
+	
+	return {
+		formattedTime,
+		start,
+		pause,
+		reset
+	}
+}

package/components/countdown/src/countdown.ts

@@ -0,0 +1,63 @@
+import type { ExtractPropTypes } from 'vue';
+import { componentProps } from '../../../constants';
+
+export const countdownProps = {
+	/**
+	 * @description 倒计时时长，单位ms
+	 */
+	time: {
+		type: [String, Number],
+		default: 0
+	},
+	/**
+	 * @description 时间格式，D-日，h-时，m-分，s-秒，SSS-毫秒（默认 'h:m:s'）
+	 * @default 'h:m:s'
+	 */
+	format: {
+		type: String,
+		default: 'h:m:s'
+	},
+	/**
+	 * @description 是否自动开始倒计时
+	 * @default true
+	 */
+	autoStart: {
+		type: Boolean,
+		default: true
+	},
+	/**
+	 * @description 是否展示毫秒倒计时
+	 * @default false
+	 */
+	millisecond: {
+		type: Boolean,
+		default: false
+	},
+	...componentProps
+};
+
+export const countdownEmits = {
+	/**
+	 * @description 倒计时变化时触发
+	 */
+	change: (_e: any) => true,
+	/**
+	 * @description 倒计时结束时触发
+	 */
+	timeup: () => true,
+	/**
+	 * @description 开始倒计时
+	 */
+	start: () => true,
+	/**
+	 * @description 暂停倒计时
+	 */
+	pause: () => true,
+	/**
+	 * @description 重设倒计时
+	 */
+	reset: () => true
+};
+
+export type CountdownProps = ExtractPropTypes<typeof countdownProps>;
+export type CountdownEmits = typeof countdownEmits;

package/components/countdown/src/countdown.vue

@@ -0,0 +1,60 @@
+<template>
+	<view class="fu-count-down" :style="[$fu.addStyle(customStyle)]">
+		<slot>
+			<text class="fu-count-down__text">{{ formattedTime }}</text>
+		</slot>
+	</view>
+</template>
+
+<script lang="ts" setup>
+	/**
+	 * Countdown 倒计时
+	 * @description 此组件一般使用于某个活动的截止时间上，通过数字的变化，给用户明确的时间感受，提示用户进行某一个行为操作。
+	 * @tutorial http://www.fusions.top/components/countdown.html
+	 * @property {String | Number} time 倒计时时长，单位ms （默认 0 ）
+	 * @property {String} format 时间格式，D-日，h-时，m-分，s-秒，SSS-毫秒  （默认 'h:m:s' ）
+	 * @property {Boolean} autoStart = [true|false] 是否自动开始倒计时 （默认 true ）
+	 * @property {Boolean} millisecond = [true|false] 是否展示毫秒倒计时 （默认 false ）
+	 * 
+	 * @event {Function} change 倒计时变化时触发 
+	 * @event {Function} timeup 倒计时结束时触发 
+	 * @event {Function} start 开始倒计时
+	 * @event {Function} pause 暂停倒计时 
+	 * @event {Function} reset 重设倒计时，若 auto-start 为 true，重设后会自动开始倒计时 
+	 * @example <fu-countdown :time="time"></fu-countdown>
+	 */
+	import { countdownEmits, countdownProps } from './countdown';
+	import { useCountdown } from './composables';
+	
+	defineOptions({ name: 'FuCountdown', options: { virtualHost: true } });
+	
+	const props = defineProps(countdownProps);
+	const $emit = defineEmits(countdownEmits);
+	
+	const {
+		formattedTime,
+		start,
+		pause,
+		reset
+	} = useCountdown(props, $emit);
+	
+	// 暴露方法
+	defineExpose({
+		start,
+		pause,
+		reset
+	});
+</script>
+<style lang="scss" scoped>
+	$fu-countdown-text-color: #333333 !default;
+	$fu-countdown-text-font-size: 15px !default;
+	$fu-countdown-text-line-height: 22px !default;
+	
+	.fu-count-down {
+		&__text {
+			color: $fu-countdown-text-color;
+			font-size: $fu-countdown-text-font-size;
+			line-height: $fu-countdown-text-line-height;
+		}
+	}
+</style>

package/components/{fu-countdown/util.js → countdown/src/util.ts}

@@ -1,8 +1,8 @@
 /**
  * 补0 如：1 -> 01
- * @param {Object} 数据转化
+ * 数据转化
  */
-function formatNumber(num, targetLength = 2) {
+export function formatNumber(num: string | number, targetLength: number = 2): string {
 	if (!String.prototype.padStart) {
 		let str = String(num);
 		while (str.length < targetLength) {
@@ -24,7 +24,7 @@ const TIME_UNITS = {
  * @param {number} time - 毫秒数
  * @returns {Object} 包含各时间单位的对象
  */
-export function formatTimeData(time = 0) {
+export function formatTimeData(time: number = 0) {
 	if (typeof time !== 'number' || time < 0) {
 		throw new Error('Invalid time value');
 	}
@@ -43,7 +43,7 @@ export function formatTimeData(time = 0) {
  * @param {object} timeData - 时间数据对象
  * @returns {string} 格式化结果
  */
-export function formatTime(format, timeData) {
+export function formatTime(format: string, timeData: any) {
 	let { days, hours, minutes, seconds, milliseconds } = timeData;
 	const formatMap = [
 		{ key: 'D', value: days, multiplier: 24 },
@@ -65,6 +65,6 @@ export function formatTime(format, timeData) {
 	return result.replace('SSS', formatNumber(remainingMs, 3));
 }
 
-export function isSameSecond(time1, time2) {
+export function isSameSecond(time1: number, time2: number): boolean {
 	return Math.floor(time1 / 1000) === Math.floor(time2 / 1000)
 }

package/components/datetime-picker/index.ts

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

package/components/datetime-picker/src/composables/index.ts

@@ -0,0 +1 @@
+export * from './use-datetime-picker'