fusions-ui 1.2.7 → 1.2.8

package/components/keyboard/src/composables/use-keyboard-number.ts

@@ -0,0 +1,81 @@
+import { computed, ref, type SetupContext } from 'vue';
+import type { KeyboardNumberProps, KeyboardNumberEmits } from '../keyboard-number';
+
+export const useKeyboardNumber = (props : KeyboardNumberProps, $emit : SetupContext<KeyboardNumberEmits>['emit']) => {
+	const backspace = 'backspace'; // 退格键内容
+	const dot = '.'; // 点
+	const cardX = 'X'; // 身份证的X符号
+	const timer = ref<any>(null); // 长按多次删除的事件监听
+	
+	// 键盘需要显示的内容
+	const numList = computed(() => {
+		if (props.dotDisabled && props.mode == 'number') {
+			if (!props.random) {
+				return [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
+			} else {
+				return uni.$fu.randomArray([1, 2, 3, 4, 5, 6, 7, 8, 9, 0]);
+			}
+		} else if (!props.dotDisabled && props.mode == 'number') {
+			if (!props.random) {
+				return [1, 2, 3, 4, 5, 6, 7, 8, 9, dot, 0];
+			} else {
+				let data = uni.$fu.randomArray([1, 2, 3, 4, 5, 6, 7, 8, 9, 0]);
+				data.splice(-1, 0, dot,)
+				return data
+			}
+		} else if (props.mode == 'card') {
+			if (!props.random) {
+				return [1, 2, 3, 4, 5, 6, 7, 8, 9, cardX, 0];
+			} else {
+				return uni.$fu.randomArray([1, 2, 3, 4, 5, 6, 7, 8, 9, cardX, 0]);
+			}
+		}
+	});
+	
+	// 按键的样式，在非乱序&&数字键盘&&不显示点按钮时，index为9时，按键占位两个空间
+	const itemStyle = computed(() =>  {
+		return (index: number) => {
+			let style: Record<string, any> = {};
+			if (props.mode == 'number' && props.dotDisabled && index == 9) style.width = '464rpx';
+			return style;
+		};
+	});
+	
+	// 是否让按键显示灰色，只在非乱序&&数字键盘&&且允许点按键的时候
+	const btnBgGray = computed(() => {
+		return (index: number) => {
+			if (!props.random && index == 9 && (props.mode != 'number' || (props.mode == 'number' && !props.dotDisabled))) return true;
+			else return false;
+		};
+	});
+	
+	// 点击退格键
+	const backspaceClick = () => {
+		$emit('backspace');
+		clearInterval(timer.value); //再次清空定时器，防止重复注册定时器
+		timer.value = null;
+		timer.value = setInterval(() => {
+			$emit('backspace');
+		}, 250);
+	};
+	
+	const clearTimer = () => {
+		clearInterval(timer.value);
+		timer.value = null;
+	};
+	
+	// 获取键盘显示的内容
+	const keyboardClick = (val: string | number) => {
+		// 允许键盘显示点模式和触发非点按键时，将内容转为数字类型
+		if (!props.dotDisabled && val != dot && val !=  cardX) val = Number(val);
+		$emit('change', val);
+	};
+	
+	return {
+		numList,
+		itemStyle,
+		backspaceClick,
+		clearTimer,
+		keyboardClick
+	}
+}

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

@@ -0,0 +1,61 @@
+import { ref, type SetupContext } from 'vue';
+import type { KeyboardProps, KeyboardEmits } from '../keyboard';
+
+export const useKeyboard = (props : KeyboardProps, $emit : SetupContext<KeyboardEmits>['emit']) => {
+	const popupRef = ref<any>(null);
+	const keyboardCarRef = ref<any>(null);
+	
+	// 打开
+	const open = () => {
+		popupRef.value?.open();
+	};
+	
+	// 关闭
+	const close = () => {
+		popupRef.value?.close();
+		$emit('close')
+	};
+	
+	const change = (e: string | number) => {
+		$emit('change', e);
+	};
+	
+	// 输入完成
+	const handleConfirm = () => {
+		$emit('confirm');
+		if(props.closeOnClickConfirm) close();
+	};
+	
+	// 取消输入
+	const handleCancel = () => {
+		$emit('cancel');
+		close();
+	};
+	
+	// 退格键
+	const backspace = () => {
+		$emit('backspace');
+	};
+	
+	// car模式切换中文|英文方法
+	const changeCarInputMode = (e) => {
+		$emit('changeCarInputMode',e);
+	};
+	
+	const changeCarMode = () => {
+		keyboardCarRef.value?.changeCarInputMode?.();
+	};
+	
+	return {
+		popupRef,
+		keyboardCarRef,
+		open,
+		close,
+		change,
+		handleConfirm,
+		handleCancel,
+		backspace,
+		changeCarInputMode,
+		changeCarMode
+	}
+}

package/components/keyboard/src/keyboard-car.ts

@@ -0,0 +1,53 @@
+import type { ExtractPropTypes } from 'vue';
+
+export const keyboardCarProps = {
+	/**
+	 * @description 是否打乱键盘按键的顺序
+	 * @default false
+	 */
+	random: {
+		type: Boolean,
+		default: false
+	},
+	/**
+	 * @description 输入一个中文后，是否自动切换到英文
+	 * @default false
+	 */
+	autoChange: {
+		type: Boolean,
+		default: false
+	},
+	/**
+	 * @description 被禁用的键
+	 */
+	disKeys: {
+		type: Array,
+		default: () => []
+	},
+	/**
+	 * @description 是否自定义abc
+	 * @default false
+	 */
+	customabc: {
+		type: Boolean,
+		default: false
+	}
+};
+
+export const keyboardCarEmits = {
+	/**
+   * @description 点击键盘触发
+   */
+	change: (_e: any) => true,
+	/**
+	 * @description 点击退格键触发
+	 */
+	backspace: () => true,
+	/**
+	 * @description 切换中英文模式触发
+	 */
+	changeCarInputMode: (_e: any) => true
+};
+
+export type KeyboardCarProps = ExtractPropTypes<typeof keyboardCarProps>;
+export type KeyboardCarEmits = typeof keyboardCarEmits;

package/components/{fu-keyboard → keyboard/src}/keyboard-car.vue

@@ -32,7 +32,7 @@
 	</view>
 </template>
 
-<script>
+<script lang="ts" setup>
 	/**
 	 * keyboardCar 键盘组件
 	 * @description keyboardCar 车牌号自定义的键盘面板，内含了数字键盘，车牌号键，身份证号键盘3种模式，都有可以打乱按键顺序的选项。
@@ -45,210 +45,48 @@
 	 * @event {Function} backspace 点击退格键触发
 	 * @example <fu-keyboard ref="uKeyboard" mode="car" v-model="show"></fu-keyboard>
 	 */
-	export default {
-		name: "KeyboardCar",
-		emits: ['backspace','change','changeCarInputMode'],
-		props: {
-			/**
-			 * @description 是否打乱键盘按键的顺序
-			 * @default false
-			 */
-			random: {
-				type: Boolean,
-				default: false
-			},
-			/**
-			 * @description 输入一个中文后，是否自动切换到英文
-			 * @default false
-			 */
-			autoChange: {
-				type: Boolean,
-				default: false
-			},
-			/**
-			 * @description 被禁用的键
-			 */
-			disKeys: {
-				type: Array,
-				default: ()=>[]
-			},
-			/**
-			 * @description 是否自定义abc
-			 * @default false
-			 */
-			customabc: {
-				type: Boolean,
-				default: false
-			}
-		},
-		data() {
-			return {
-				// 车牌输入时，abc=true为输入车牌号码，bac=false为输入省份中文简称
-				abc: false
-			};
-		},
-		computed: {
-			areaList() {
-				let data = [
-					'京',
-					'沪',
-					'粤',
-					'津',
-					'冀',
-					'豫',
-					'云',
-					'辽',
-					'黑',
-					'湘',
-					'皖',
-					'鲁',
-					'苏',
-					'浙',
-					'赣',
-					'鄂',
-					'桂',
-					'甘',
-					'晋',
-					'陕',
-					'蒙',
-					'吉',
-					'闽',
-					'贵',
-					'渝',
-					'川',
-					'青',
-					'琼',
-					'宁',
-					'挂',
-					'藏',
-					'港',
-					'澳',
-					'新',
-					'使',
-					'学'
-				];
-				let tmp = [];
-				// 打乱顺序
-				if (this.random) data = this.$fu.randomArray(data);
-				// 切割成二维数组
-				tmp[0] = data.slice(0, 10);
-				tmp[1] = data.slice(10, 20);
-				tmp[2] = data.slice(20, 30);
-				tmp[3] = data.slice(30, 36);
-				return tmp;
-			},
-			engKeyBoardList() {
-				let data = [
-					1,
-					2,
-					3,
-					4,
-					5,
-					6,
-					7,
-					8,
-					9,
-					0,
-					'Q',
-					'W',
-					'E',
-					'R',
-					'T',
-					'Y',
-					'U',
-					'I',
-					'O',
-					'P',
-					'A',
-					'S',
-					'D',
-					'F',
-					'G',
-					'H',
-					'J',
-					'K',
-					'L',
-					'Z',
-					'X',
-					'C',
-					'V',
-					'B',
-					'N',
-					'M'
-				];
-				let tmp = [];
-				if (this.random) data = this.$fu.randomArray(data);
-				tmp[0] = data.slice(0, 10);
-				tmp[1] = data.slice(10, 20);
-				tmp[2] = data.slice(20, 30);
-				tmp[3] = data.slice(30, 36);
-				return tmp;
-			},
-			isDisabled(i,j) {
-				return (i,j)=>{
-					let value = '';
-					if (this.abc) value = this.engKeyBoardList[i][j];
-					else value = this.areaList[i][j];
-					return this.disKeys.indexOf(value) > -1;
-				}
-			}
-		},
-		methods: {
-			// 点击键盘按钮
-			carInputClick(i, j) {
-				if(this.isDisabled(i,j)) return;
-				let value = '';
-				// 不同模式，获取不同数组的值
-				if (this.abc) value = this.engKeyBoardList[i][j];
-				else value = this.areaList[i][j];
-				// 如果允许自动切换，则将中文状态切换为英文
-				if (!this.abc && this.autoChange) this.$fu.sleep(200).then(() => this.abc = true)
-				this.$emit('change', value);
-			},
-			// 修改汽车牌键盘的输入模式，中文|英文
-			changeCarInputMode() {
-				this.abc = !this.abc;
-				this.$emit('changeCarInputMode',this.abc);
-			},
-			// 点击退格键
-			backspaceClick() {
-				this.$emit('backspace');
-				clearInterval(this.timer); //再次清空定时器，防止重复注册定时器
-				this.timer = null;
-				this.timer = setInterval(() => {
-					this.$emit('backspace');
-				}, 250);
-			},
-			clearTimer() {
-				clearInterval(this.timer);
-				this.timer = null;
-			}
-		}
-	};
+	import { keyboardCarEmits, keyboardCarProps } from './keyboard-car';
+	import { useKeyboardCar } from './composables';
+	
+	defineOptions({ name: 'KeyboardCar', options: { virtualHost: true } });
+	
+	const props = defineProps(keyboardCarProps);
+	const $emit = defineEmits(keyboardCarEmits);
+	
+	const {
+		abc,
+		areaList,
+		engKeyBoardList,
+		isDisabled,
+		carInputClick,
+		changeCarInputMode,
+		backspaceClick,
+		clearTimer
+	} = useKeyboardCar(props, $emit);
 </script>
 
 <style lang="scss" scoped>
-	@import '../../libs/style/components.scss';
+	@use '../../../style/components.scss';
 	$show-hover: 1;
-	$fu-car-keyboard-background-color: rgb(224, 228, 230) !default;
-	$fu-car-keyboard-padding:6px 0 6px !default;
-	$fu-car-keyboard-button-inner-width:64rpx !default;
-	$fu-car-keyboard-button-inner-background-color:#FFFFFF !default;
-	$fu-car-keyboard-button-height:80rpx !default;
-	$fu-car-keyboard-button-inner-box-shadow:0 1px 0px #999992 !default;
-	$fu-car-keyboard-button-border-radius:4px !default;
-	$fu-car-keyboard-button-inner-margin:8rpx 5rpx !default;
-	$fu-car-keyboard-button-text-font-size:16px !default;
+	$fu-car-keyboard-background-color: #f5f5f5 !default;
+	$fu-car-keyboard-padding: 6px 0 6px !default;
+	$fu-car-keyboard-button-inner-width: 64rpx !default;
+	$fu-car-keyboard-button-inner-background-color: #FFFFFF !default;
+	$fu-car-keyboard-button-height: 80rpx !default;
+	$fu-car-keyboard-button-inner-box-shadow: 0 1px 0px #999992 !default;
+	$fu-car-keyboard-button-border-radius: 4px !default;
+	$fu-car-keyboard-button-inner-margin: 8rpx 5rpx !default;
+	$fu-car-keyboard-button-text-font-size: 16px !default;
 	$fu-car-keyboard-button-text-color: #303133 !default;
 	$fu-car-keyboard-center-inner-margin: 0 4rpx !default;
-	$fu-car-keyboard-special-button-width:134rpx !default;
-	$fu-car-keyboard-lang-font-size:16px !default;
+	$fu-car-keyboard-special-button-width: 134rpx !default;
+	$fu-car-keyboard-lang-font-size: 16px !default;
 	$fu-car-keyboard-lang-color: #303133 !default;
 	$fu-car-keyboard-active-color: #dd524d !default;
-	$fu-car-keyboard-line-font-size:15px !default;
+	$fu-car-keyboard-line-font-size: 15px !default;
 	$fu-car-keyboard-line-color: #303133 !default;
-	$fu-car-keyboard-line-margin:0 1px !default;
-	$fu-car-keyboard-fu-hover-class-background-color:#BBBCC6 !default;
+	$fu-car-keyboard-line-margin: 0 1px !default;
+	$fu-car-keyboard-fu-hover-class-background-color: #eaeaea !default;
 
 	.fu-keyboard {
 		flex-direction: column;
@@ -258,7 +96,7 @@
 		padding: $fu-car-keyboard-padding;
 
 		&__button {
-			@include flex(row);
+			@include components.flex(row);
 			justify-content: center;
 			flex: 1;
 			/* #ifndef APP-NVUE */
@@ -281,7 +119,7 @@
 				}
 
 				&__inner {
-					@include flex(row);
+					@include components.flex(row);
 					justify-content: center;
 					align-items: center;
 					width: $fu-car-keyboard-button-inner-width;
@@ -305,7 +143,7 @@
 					width: $fu-car-keyboard-special-button-width;
 					height: $fu-car-keyboard-button-height;
 					background-color: $fu-car-keyboard-fu-hover-class-background-color;
-					@include flex(row);
+					@include components.flex(row);
 					justify-content: center;
 					align-items: center;
 					box-shadow: $fu-car-keyboard-button-inner-box-shadow;

package/components/keyboard/src/keyboard-number.ts

@@ -0,0 +1,44 @@
+import type { ExtractPropTypes } from 'vue';
+
+export const keyboardNumberProps = {
+	/**
+	 * @description 键盘的类型
+	 * @values 'number' - 数字键盘, 'card' - 身份证键盘
+	 * @default 'number'
+	 */
+	mode: {
+		type: String,
+		default: 'number'
+	},
+	/**
+	 * @description 是否显示键盘的"."符号
+	 * @default false
+	 */
+	dotDisabled: {
+		type: Boolean,
+		default: false
+	},
+	/**
+	 * @description 是否打乱键盘按键的顺序
+	 * @default false
+	 */
+	random: {
+		type: Boolean,
+		default: false
+	}
+};
+
+export const keyboardNumberEmits = {
+	/**
+	 * @description 点击键盘触发
+	 */
+	change: (_e: any) => true,
+
+	/**
+	 * @description 点击退格键触发
+	 */
+	backspace: () => true
+};
+
+export type KeyboardNumberProps = ExtractPropTypes<typeof keyboardNumberProps>;
+export type KeyboardNumberEmits = typeof keyboardNumberEmits;

package/components/keyboard/src/keyboard-number.vue

@@ -0,0 +1,108 @@
+<template>
+	<view class="fu-keyboard" @touchmove.stop.prevent="false">
+		<view class="fu-keyboard__button-wrapper" v-for="(item, index) in numList" :key="index">
+			<view class="fu-keyboard__button-wrapper__button" :style="[itemStyle(index)]" hover-class="fu-hover-class" :hover-stay-time="200" @tap="keyboardClick(item)">
+				<text class="fu-keyboard__button-wrapper__button__text">{{ item }}</text>
+			</view>
+		</view>
+		<view class="fu-keyboard__button-wrapper">
+			<view class="fu-keyboard__button-wrapper__button fu-keyboard__button-wrapper__button--gray" hover-class="fu-hover-class" :hover-stay-time="200" @touchstart.stop="backspaceClick" @touchend="clearTimer">
+				<fu-icon name="backspace" size="28" color="#303133" />
+			</view>
+		</view>
+	</view>
+</template>
+
+<script lang="ts" setup>
+	/**
+	 * KeyboardNumber 键盘组件
+	 * @description KeyboardNumber  数字键盘组件
+	 * @property {String} mode 键盘的类型，number 数字键盘，card 身份证键盘
+	 *  @value number 数字键盘
+	 * 	@value card 身份证键盘
+	 * @property {Boolean} dotDisabled = [true|false] 是否显示键盘的"."符号（默认 false）
+	 * @property {Boolean} random = [true|false] 是否打乱键盘按键的顺序（默认 false）
+	 * @event {Function} change		点击键盘触发
+	 * @event {Function} backspace	点击退格键触发
+	 */
+	import { keyboardNumberEmits, keyboardNumberProps } from './keyboard-number';
+	import { useKeyboardNumber } from './composables';
+	
+	defineOptions({ name: 'KeyboardNumber', options: { virtualHost: true } });
+	
+	const props = defineProps(keyboardNumberProps);
+	const $emit = defineEmits(keyboardNumberEmits);
+	
+	const {
+		numList,
+		itemStyle,
+		backspaceClick,
+		clearTimer,
+		keyboardClick
+	} = useKeyboardNumber(props, $emit);
+</script>
+
+<style lang="scss" scoped>
+	@use '../../../style/components.scss';
+	$show-hover: 1;
+	$fu-number-keyboard-background-color: #f5f5f5 !default;
+	$fu-number-keyboard-padding: 8px 10rpx 8px 10rpx !default;
+	$fu-number-keyboard-button-width: 222rpx !default;
+	$fu-number-keyboard-button-margin: 4px 6rpx !default;
+	$fu-number-keyboard-button-border-top-left-radius: 4px !default;
+	$fu-number-keyboard-button-border-top-right-radius: 4px !default;
+	$fu-number-keyboard-button-border-bottom-left-radius: 4px !default;
+	$fu-number-keyboard-button-border-bottom-right-radius: 4px !default;
+	$fu-number-keyboard-button-height: 90rpx !default;
+	$fu-number-keyboard-button-background-color: #FFFFFF !default;
+	$fu-number-keyboard-button-box-shadow: 0 2px 0px #BBBCBE !default;
+	$fu-number-keyboard-text-font-size: 20px !default;
+	$fu-number-keyboard-text-font-weight: 500 !default;
+	$fu-number-keyboard-text-color: #303133 !default;
+	$fu-number-keyboard-gray-background-color: #eaeaea !default;
+	$fu-number-keyboard-fu-hover-class-background-color: #f5f5f5 !default;
+
+	.fu-keyboard {
+		@include components.flex(row);
+		justify-content: space-around;
+		background-color: $fu-number-keyboard-background-color;
+		flex-wrap: wrap;
+		padding: $fu-number-keyboard-padding;
+
+		&__button-wrapper {
+			box-shadow: $fu-number-keyboard-button-box-shadow;
+			margin: $fu-number-keyboard-button-margin;
+			border-top-left-radius: $fu-number-keyboard-button-border-top-left-radius;
+			border-top-right-radius: $fu-number-keyboard-button-border-top-right-radius;
+			border-bottom-left-radius: $fu-number-keyboard-button-border-bottom-left-radius;
+			border-bottom-right-radius: $fu-number-keyboard-button-border-bottom-right-radius;
+
+			&__button {
+				width: $fu-number-keyboard-button-width;
+				height: $fu-number-keyboard-button-height;
+				background-color: $fu-number-keyboard-button-background-color;
+				@include components.flex(row);
+				justify-content: center;
+				align-items: center;
+				border-top-left-radius: $fu-number-keyboard-button-border-top-left-radius;
+				border-top-right-radius: $fu-number-keyboard-button-border-top-right-radius;
+				border-bottom-left-radius: $fu-number-keyboard-button-border-bottom-left-radius;
+				border-bottom-right-radius: $fu-number-keyboard-button-border-bottom-right-radius;
+
+				&__text {
+					font-size: $fu-number-keyboard-text-font-size;
+					font-weight: $fu-number-keyboard-text-font-weight;
+					color: $fu-number-keyboard-text-color;
+				}
+
+				&--gray {
+					background-color: $fu-number-keyboard-gray-background-color;
+				}
+			}
+		}
+	}
+
+	.fu-hover-class {
+		background-color: $fu-number-keyboard-fu-hover-class-background-color;
+	}
+</style>