fusions-ui 1.2.7 → 1.2.8

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

@@ -0,0 +1,325 @@
+import { ref, computed, type SetupContext, watch, onMounted } from 'vue';
+import type { DatetimePickerProps, DatetimePickerEmits } from '../datetime-picker';
+import dayjs from '../../../../utils/dayjs.js';
+function times(n: number, iteratee: (index: number) => any): any[] {
+	let index = -1
+	const result = Array(n < 0 ? 0 : n)
+	while (++index < n) {
+		result[index] = iteratee(index)
+	}
+	return result
+}
+
+export const useDatetimePicker = (props : DatetimePickerProps, $emit : SetupContext<DatetimePickerEmits>['emit']) => {
+	const pickerRef = ref();
+	const columns = ref<any[]>([]);
+	const innerDefaultIndex = ref<number[]>([]);
+	const innerValue = ref<string | number>(0);
+	const innerFormatter = ref<(type : string, value : string) => string>((type, value) => value);
+
+	// 如果以下这些变量发生了变化，意味着需要重新初始化各列的值
+	const propsChange = computed(() => {
+		return [
+			props.mode,
+			props.maxDate,
+			props.minDate,
+			props.minHour,
+			props.maxHour,
+			props.minMinute,
+			props.maxMinute,
+			props.filter,
+			props.modelValue
+		]
+	});
+
+	// 得出合法的时间
+	const correctValue = (value: string | number): string | number => {
+		const isDateMode = props.mode !== 'time';
+		if (isDateMode && !uni.$fu.checkDate(value)) {
+			// 如果是日期类型，但是又没有设置合法的当前时间的话，使用最小时间为当前时间
+			value = props.minDate;
+		} else if (!isDateMode && !value) {
+			// 如果是时间类型，而又没有默认值的话，就用最小时间
+			value = `${uni.$fu.padZero(props.minHour)}:${uni.$fu.padZero(props.minMinute)}`;
+		}
+		// 时间类型
+		if (!isDateMode) {
+			if (String(value).indexOf(':') === -1) return uni.$fu.error('时间错误，请传递如12:24的格式')
+			let [hour, minute] = value.split(':');
+			// 对时间补零，同时控制在最小值和最大值之间
+			hour = uni.$fu.padZero(uni.$fu.range(props.minHour, props.maxHour, Number(hour)));
+			minute = uni.$fu.padZero(uni.$fu.range(props.minMinute, props.maxMinute, Number(minute)));
+			return `${hour}:${minute}`
+		} else {
+			// 如果是日期格式，控制在最小日期和最大日期之间
+			value = dayjs(value).isBefore(dayjs(props.minDate)) ? props.minDate : value;
+			value = dayjs(value).isAfter(dayjs(props.maxDate)) ? props.maxDate : value;
+			return value
+		}
+	};
+
+	// 获取每列的最大和最小值
+	const getRanges = () => {
+		if (props.mode === 'time') {
+			return [
+				{ type: 'hour', range: [props.minHour, props.maxHour] },
+				{ type: 'minute', range: [props.minMinute, props.maxMinute] },
+			];
+		}
+		const { maxYear, maxDate, maxMonth, maxHour, maxMinute, } = getBoundary('max', innerValue.value);
+		const { minYear, minDate, minMonth, minHour, minMinute, } = getBoundary('min', innerValue.value);
+		const result = [
+			{ type: 'year', range: [minYear, maxYear] },
+			{ type: 'month', range: [minMonth, maxMonth] },
+			{ type: 'day', range: [minDate, maxDate] },
+			{ type: 'hour', range: [minHour, maxHour] },
+			{ type: 'minute', range: [minMinute, maxMinute] },
+		];
+		if (props.mode === 'date') result.splice(3, 2);
+		if (props.mode === 'year') result.splice(1, 4);
+		if (props.mode === 'year-month') result.splice(2, 3);
+		return result;
+	};
+
+	// 获取原始列数据
+	const getOriginColumns = () => {
+		// 生成各列的值
+		const results = getRanges().map(({ type, range }) => {
+			let values = times(range[1] - range[0] + 1, (index) => {
+				let value = range[0] + index
+				value = type === 'year' ? `${value}` : uni.$fu.padZero(value)
+				return value
+			});
+			// 进行过滤
+			if (props.filter) {
+				values = props.filter(type, values);
+			}
+			return { type, values }
+		});
+		return results
+	};
+
+	// 更新各列的值
+	const updateColumns = () => {
+		const formatter = props.formatter || innerFormatter.value;
+		// 获取各列的值，并且map后，对各列的具体值进行补0操作
+		const results = getOriginColumns().map((column) => column.values.map((value : string) => formatter(column.type, value)));
+		columns.value = results;
+	};
+
+	// 更新索引
+	const updateIndexs = (value : string | number) => {
+		let values = [];
+		const formatter = props.formatter || innerFormatter.value;
+		const padZero = uni.$fu.padZero;
+		if (props.mode === 'time') {
+			// 将time模式的时间用:分隔成数组
+			const timeArr = (value as string).split(':');
+			// 使用formatter格式化方法进行管道处理
+			values = [formatter('hour', timeArr[0]), formatter('minute', timeArr[1])];
+		} else {
+			values = [
+				formatter('year', `${dayjs(value).year()}`),
+				// 月份补0
+				formatter('month', padZero(dayjs(value).month() + 1))
+			];
+			if (props.mode === 'date') {
+				// date模式，需要添加天列
+				values.push(formatter('day', padZero(dayjs(value).date())))
+			}
+			if (props.mode === 'datetime') {
+				// 数组的push方法，可以写入多个参数
+				values.push(formatter('day', padZero(dayjs(value).date())), formatter('hour', padZero(dayjs(value).hour())), formatter('minute', padZero(dayjs(value).minute())))
+			}
+		}
+
+		// 根据当前各列的所有值，从各列默认值中找到默认值在各列中的索引
+		const indexs = columns.value.map((column, index) => {
+			// 通过取大值，可以保证不会出现找不到索引的-1情况
+			return Math.max(0, column.findIndex((item: string) => item === values[index]))
+		});
+		innerDefaultIndex.value = indexs;
+	};
+	
+	const init = () => {
+		getValue()
+		// this.updateColumnValue(this.innerValue)
+	};
+	
+	// 列发生变化时触发
+	const change = (e: any) => {
+		const { indexs, values } = e;
+		let selectValue: string | number = '';
+		if(props.mode === 'time') {
+			// 根据value各列索引，从各列数组中，取出当前时间的选中值
+			selectValue = `${intercept(values[0][indexs[0]])}:${intercept(values[1][indexs[1]])}`;
+		} else if (props.mode === 'year') {
+			const year = parseInt(intercept(values[0][indexs[0]], 'year'));
+			selectValue = Number(new Date(year, 0));
+		} else {
+			// 将选择的值转为数值，比如'03'转为数值的3，'2019'转为数值的2019
+			const year = parseInt(intercept(values[0][indexs[0]],'year'));
+			const month = parseInt(intercept(values[1][indexs[1]]));
+			let date = parseInt(values[2]? intercept(values[2][indexs[2]]) : 1);
+			let hour = 0, minute = 0;
+			// 此月份的最大天数
+			const maxDate = dayjs(`${year}-${month}`).daysInMonth();
+			// year-month模式下，date不会出现在列中，设置为1，为了符合后边需要减1的需求
+			if (props.mode === 'year-month') {
+				date = 1;
+			}
+			// 不允许超过maxDate值
+			date = Math.min(maxDate, date);
+			if (props.mode === 'datetime') {
+				hour = parseInt(intercept(values[3][indexs[3]]));
+				minute = parseInt(intercept(values[4][indexs[4]]));
+			}
+			// 转为时间模式
+			selectValue = Number(new Date(year, month - 1, date, hour, minute));
+		}
+		// 取出准确的合法值，防止超越边界的情况
+		selectValue = correctValue(selectValue);
+		innerValue.value = selectValue;
+		updateColumnValue(selectValue)
+		// 发出change时间，value为当前选中的时间戳
+		$emit('change', {
+			value: selectValue,
+			// #ifndef MP-WEIXIN
+			// 微信小程序不能传递this实例，会因为循环引用而报错
+			picker: pickerRef.value,
+			// #endif
+			mode: props.mode
+		})
+	};
+	
+	const getValue = () => {
+		innerValue.value = correctValue(props.modelValue);
+	};
+	
+	// 在微信小程序中，不支持将函数当做props参数，故只能通过ref形式调用
+	const setFormatter = (e: any) => {
+		innerFormatter.value = e;
+	};
+	
+	// 打开
+	const open = () => {
+		pickerRef.value.open();
+		getValue()
+		updateColumnValue(innerValue.value);
+	};
+	
+	// 关闭选择器
+	const close = () => {
+		if (props.maskClosable) {
+			cancel()
+			$emit('close')
+		}
+	};
+	
+	// 点击工具栏的取消按钮
+	const cancel = () => {
+		$emit('cancel')
+	};
+	
+	// 点击工具栏的确定按钮
+	const confirm = () => {
+		cancel()
+		$emit('confirm', {
+			value: innerValue.value,
+			mode: props.mode
+		})
+		$emit('input', innerValue.value)
+		$emit('update:modelValue', innerValue.value)
+	};
+	
+	//用正则截取输出值,当出现多组数字时,抛出错误
+	const intercept = (e: any, type?: string) => {
+		let judge = e.match(/\d+/g)
+		//判断是否掺杂数字
+		if(judge.length>1){
+			uni.$fu.error('请勿在过滤或格式化函数时添加数字')
+			return 0
+		}else if(type && judge[0].length == 4){//判断是否是年份
+			return judge[0]
+		}else if(judge[0].length > 2){
+			uni.$fu.error('请勿在过滤或格式化函数时添加数字')
+			return 0
+		}else{
+			return judge[0]
+		}
+	};
+	
+	// 更新各列的值，进行补0、格式化等操作
+	const updateColumnValue = (value: string | number) => {
+		innerValue.value = value;
+		updateColumns()
+		updateIndexs(value)
+	};
+	
+	// 根据minDate、maxDate、minHour、maxHour等边界值，判断各列的开始和结束边界值
+	const getBoundary = (type: any, innerValue: string | number) => {
+		const value = new Date(innerValue);
+		const boundary = new Date(props[`${type}Date`]);
+		const year = dayjs(boundary).year();
+		let month = 1;
+		let date = 1;
+		let hour = 0;
+		let minute = 0;
+		if (type === 'max') {
+			month = 12;
+			// 月份的天数
+			date = dayjs(value).daysInMonth();
+			hour = 23;
+			minute = 59;
+		}
+		
+		// 获取边界值，逻辑是：当年达到了边界值(最大或最小年)，就检查月允许的最大和最小值，以此类推
+		if (dayjs(value).year() === year) {
+			month = dayjs(boundary).month() + 1;
+			if (dayjs(value).month() + 1 === month) {
+				date = dayjs(boundary).date();
+				if (dayjs(value).date() === date) {
+					hour = dayjs(boundary).hour();
+					if (dayjs(value).hour() === hour) {
+							minute = dayjs(boundary).minute();
+					}
+				}
+			}
+		}
+		
+		return {
+			[`${type}Year`]: year,
+			[`${type}Month`]: month,
+			[`${type}Date`]: date,
+			[`${type}Hour`]: hour,
+			[`${type}Minute`]: minute
+		}
+	};
+	
+	// 生命周期
+	onMounted(() => {
+		init()
+	});
+	
+	// watch监听事件
+	watch(() => propsChange.value, () => {
+		init()
+	});
+	
+	watch(() => props.modelValue, (newVal) => {
+	    innerValue.value = correctValue(newVal) as number
+	})
+
+	return {
+		pickerRef,
+		columns,
+		innerDefaultIndex,
+		open,
+		close,
+		cancel,
+		confirm,
+		change,
+		setFormatter,
+		updateColumnValue
+	}
+}

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

@@ -0,0 +1,223 @@
+import type { ExtractPropTypes } from 'vue';
+
+/**
+ * 日期时间选择器 mode 有效值
+ */
+export const datetimePickerModes = ['date', 'time', 'year', 'year-month', 'datetime'] as const;
+
+export const datetimePickerProps = {
+	/**
+	 * @description 绑定值
+	 */
+	modelValue: {
+		type: [String, Number],
+		default: 0
+	},
+	/**
+	 * @description 顶部标题
+	 */
+	title: {
+		type: String,
+		default: ''
+	},
+	/**
+	 * @description 顶部标题字体大小 (注：不传单位，默认px)
+	 * @default 15
+	 */
+	titleSize: {
+		type: [String, Number],
+		default: 15
+	},
+	/**
+	 * @description 顶部标题字体颜色
+	 * @default '#333333'
+	 */
+	titleColor: {
+		type: String,
+		default: '#333333'
+	},
+	/**
+	 * @description 展示格式
+	 * @values 'date' - 日期选择, 'time' - 时间选择, 'year' - 年选择, 'year-month' - 年月选择, 'datetime' - 日期时间选择
+	 * @default 'datetime'
+	 */
+	mode: {
+		type: String,
+		values: datetimePickerModes,
+		default: 'datetime'
+	},
+	/**
+	 * @description 可选的最大时间 最大默认值为后10年
+	 */
+	maxDate: {
+		type: Number,
+		default: new Date(new Date().getFullYear() + 10, 0, 1).getTime()
+	},
+	/**
+	 * @description 可选的最小时间 最小默认值为前10年
+	 */
+	minDate: {
+		type: Number,
+		default: new Date(new Date().getFullYear() - 10, 0, 1).getTime()
+	},
+	/**
+	 * @description 可选的最小小时（仅mode=time时生效）
+	 */
+	minHour: {
+		type: Number,
+		default: 0
+	},
+	/**
+	 * @description 可选的最大小时（仅mode=time时生效）
+	 * @default 23
+	 */
+	maxHour: {
+		type: Number,
+		default: 23
+	},
+	/**
+	 * @description 可选的最小分钟（仅mode=time时生效）
+	 * @default 0
+	 */
+	minMinute: {
+		type: Number,
+		default: 0
+	},
+	/**
+	 * @description 可选的最大分钟（仅mode=time时生效）
+	 * @default 59
+	 */
+	maxMinute: {
+		type: Number,
+		default: 59
+	},
+	/**
+	 * @description 选项过滤函数
+	 * @default null
+	 */
+	filter: {
+		type: [Function, null],
+		default: null
+	},
+	/**
+	 * @description 选项格式化函数
+	 * @default null
+	 */
+	formatter: {
+		type: [Function, null],
+		default: null
+	},
+	/**
+	 * @description 是否显示加载中状态
+	 * @default false
+	 */
+	loading: {
+		type: Boolean,
+		default: false
+	},
+	/**
+	 * @description 各列中，单个选项的高度
+	 * @default 44
+	 */
+	itemHeight: {
+		type: [String, Number],
+		default: 44
+	},
+	/**
+	 * @description 取消按钮的文字
+	 * @default '取消'
+	 */
+	cancelText: {
+		type: String,
+		default: '取消'
+	},
+	/**
+	 * @description 取消按钮字体大小 (注：不传单位，默认px)
+	 * @default 13
+	 */
+	cancelSize: {
+		type: [String, Number],
+		default: 13
+	},
+	/**
+	 * @description 取消按钮文本颜色
+	 * @default '#888888'
+	 */
+	cancelColor: {
+		type: String,
+		default: '#888888'
+	},
+	/**
+	 * @description 确认按钮的文字
+	 * @default '确认'
+	 */
+	confirmText: {
+		type: String,
+		default: '确认'
+	},
+	/**
+	 * @description 确认按钮字体大小 (注：不传单位，默认px)
+	 * @default 13
+	 */
+	confirmSize: {
+		type: [String, Number],
+		default: 13
+	},
+	/**
+	 * @description 确认按钮文本颜色
+	 */
+	confirmColor: {
+		type: String,
+		default: ''
+	},
+	/**
+	 * @description 每列中可见选项的数量
+	 * @default 5
+	 */
+	visibleItemCount: {
+		type: [String, Number],
+		default: 5
+	},
+	/**
+	 * @description 各列的默认索引
+	 */
+	defaultIndex: {
+		type: Array,
+		default: () => []
+	},
+	/**
+	 * @description 是否允许点击遮罩关闭选择器
+	 * @default true
+	 */
+	maskClosable: {
+		type: Boolean,
+		default: true
+	}
+};
+
+export const datetimePickerEmits = {
+	'update:modelValue': (_e: any) => true,
+	/**
+	 * @description 关闭选择器时触发
+	 */
+	close: () => true,
+	/**
+	 * @description 点击取消按钮
+	 */
+	cancel: () => true,
+	/**
+	 * @description 点击确定按钮
+	 */
+	confirm: (_e: any) => true,
+	/**
+	 * @description 当选择值变化时触发
+	 */
+	change: (_e: any) => true,
+	/**
+	 * @description 输入事件
+	 */
+	input: (_e: any) => true
+};
+
+export type DatetimePickerProps = ExtractPropTypes<typeof datetimePickerProps>;
+export type DatetimePickerEmits = typeof datetimePickerEmits;

package/components/datetime-picker/src/datetime-picker.vue

@@ -0,0 +1,96 @@
+<template>
+	<fu-picker 
+		ref="pickerRef"
+		:columns="columns"
+		:title="title" 
+		:titleSize="titleSize" 
+		:titleColor="titleColor" 
+		:itemHeight="itemHeight" 
+		:visibleItemCount="visibleItemCount"
+		:defaultIndex="innerDefaultIndex" 
+		:cancelText="cancelText" 
+		:cancelSize="cancelSize"
+		:cancelColor="cancelColor" 
+		:confirmText="confirmText"
+		:confirmSize="confirmSize"
+		:confirmColor="confirmColor" 
+		:maskClosable="maskClosable"
+		@close="close"
+		@cancel="cancel" 
+		@confirm="confirm" 
+		@change="change"></fu-picker>
+</template>
+
+<script lang="ts" setup>
+	/**
+	 * DatetimePicker 时间日期选择器
+	 * @description 此组件选择器用于时间日期
+	 * @tutorial http://www.fusions.top/components/datetimePicker.html
+	 * @property {String | Number} value 绑定值 默认0
+	 * @property {String} title 顶部标题  不传不显示
+	 * @property {String | Number} titleSize 顶部标题字体大小 默认15  (注：不传单位，默认px)
+	 * @property {String} titleColor 顶部标题字体颜色
+	 * @property {String} mode = [date|time|year|year-month|datetime] 展示格式 ( 默认 'datetime' )
+	 * 	@value date 日期选择
+	 * 	@value time 时间选择
+	 * 	@value year 年选择
+	 * 	@value year-month 年月选择
+	 * 	@value datetime 日期时间
+	 * @property {Number} maxDate 可选的最大时间 最大默认值为后10年
+	 * @property {Number} minDate 可选的最小时间 最小默认值为前10年
+	 * @property {Number} maxHour 可选的最大小时，仅mode=time有效 ( 默认 23 )
+	 * @property {Number} minHour 可选的最小小时，仅mode=time有效 ( 默认 0 )
+	 * @property {Number} maxMinute 可选的最大分钟，仅mode=time有效 ( 默认 59 )
+	 * @property {Number} minMinute	可选的最小分钟，仅mode=time有效 ( 默认 0 )
+	 * @property {Function}	filter 选项过滤函数 默认null
+	 * @property {Function}	formatter 选项格式化函数 默认null
+	 * @property {Boolean} loading = [true|false] 是否显示加载中状态 默认false
+	 * @property {String | Number} itemHeight	各列中，单个选项的高度  ( 默认 44 )
+	 * @property {String} cancelText 取消按钮文本 默认取消
+	 * @property {String | Number} cancelSize 取消按钮字体大小 默认13 (注：不传单位，默认px)
+	 * @property {String} cancelColor 取消按钮文本颜色 默认#888888
+	 * @property {String} confirmText 确认按钮的文字  ( 默认 '确定' )
+	 * @property {String | Number} confirmSize 确认按钮字体大小 默认13  (注：不传单位，默认px)
+	 * @property {String} confirmColor 确认按钮文本颜色
+	 * @property {String | Number} visibleItemCount 每列中可见选项的数量  ( 默认 5 )
+	 * @property {Array} defaultIndex 各列的默认索引
+	 * @property {Boolean} maskClosable = [true|false] 是否允许点击遮罩关闭选择器 默认 true
+	 * 
+	 * @event {Function} close 关闭选择器时触发
+	 * @event {Function} confirm 点击确定按钮，返回当前选择的值
+	 * @event {Function} change 当选择值变化时触发
+	 * @event {Function} cancel 点击取消按钮
+	 * @example <fu-datetime-picker ref="datetimePicker" mode="datetime"></fu-datetime-picker>
+	 */
+	import { datetimePickerProps, datetimePickerEmits } from './datetime-picker';
+	import { useDatetimePicker } from './composables';
+	
+	defineOptions({ name: 'FuDatetimePicker', options: { virtualHost: true } });
+	
+	const props = defineProps(datetimePickerProps);
+	const $emit = defineEmits(datetimePickerEmits);
+	
+	const {
+		pickerRef,
+		columns,
+		innerDefaultIndex,
+		open,
+		close,
+		cancel,
+		confirm,
+		change,
+		setFormatter,
+		updateColumnValue
+	} = useDatetimePicker(props, $emit);
+	
+	// 暴露方法
+	defineExpose({
+		open,
+		close,
+		setFormatter,
+		updateColumnValue
+	});
+</script>
+
+<style>
+</style>

package/components/form/index.ts

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

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

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