fusions-ui 1.2.7 → 1.2.8

package/components/input/src/input.ts

@@ -0,0 +1,360 @@
+import type { ExtractPropTypes } from 'vue';
+import { componentProps, componentShapes } from '../../../constants';
+
+/**
+ * 输入框 type 有效值
+ */
+export const inputTypes = [
+	'text', 
+	'password', 
+	'number', 
+	'idcard', 
+	'digit', 
+	'tel', 
+	'safe-password',
+	'nickname',
+	'none',
+	'decimal',
+	'numeric',
+	'search',
+	'email',
+	'url'
+] as const;
+
+/**
+ * 输入框 align 有效值
+ */
+export const inputAligns = ['left', 'center', 'right'] as const;
+
+/**
+ * 输入框 border 有效值
+ */
+export const inputBorders = ['surround', 'bottom', 'none'] as const;
+
+export const inputProps = {
+	/**
+	 * @description v-model 输入的值
+	 */
+	modelValue: {
+		type: [String, Number],
+		default: ''
+	},
+	/**
+	 * @description number-数字输入键盘，app-vue下可以输入浮点数，app-nvue和小程序平台下只能输入整数
+	 * @default 'text'
+	 */
+	type: {
+		type: String,
+		values: inputTypes,
+		default: 'text'
+	},
+	/**
+	 * @description 是否禁用输入框
+	 * @default false
+	 */
+	disabled: {
+		type: Boolean,
+		default: false
+	},
+	/**
+	 * @description 是否只读，与disabled不同之处在于disabled会置灰组件，而readonly则不会
+	 * @default false
+	 */
+	readonly: {
+		type: Boolean,
+		default: false
+	},
+	/**
+	 * @description 禁用状态时的背景色
+	 * @default '#F5F7FA'
+	 */
+	disabledColor: {
+		type: String,
+		default: '#F5F7FA'
+	},
+	/**
+	 * @description 是否显示清除控件
+	 * @default false
+	 */
+	clearable: {
+		type: Boolean,
+		default: false
+	},
+	/**
+	 * @description 是否密码类型
+	 * @default false
+	 */
+	password: {
+		type: Boolean,
+		default: false
+	},
+	/**
+	 * @description 最大输入长度，设置为 -1 的时候不限制最大长度
+	 * 注意：支付宝小程序如果设置 -1 同时type = digit无效
+	 * @default -1
+	 */
+	maxlength: {
+		type: [String, Number],
+		default: -1
+	},
+	/**
+	 * @description 输入框为空时的占位符
+	 * @default null
+	 */
+	placeholder: {
+		type: String,
+		default: null
+	},
+	/**
+	 * @description 指定placeholder的样式类，注意页面或组件的style中写了scoped时，需要在类名前写:deep(...)
+	 * @default 'input-placeholder'
+	 */
+	placeholderClass: {
+		type: String,
+		default: 'input-placeholder'
+	},
+	/**
+	 * @description 指定placeholder的样式
+	 * @default 'color: #CCCCCC'
+	 */
+	placeholderStyle: {
+		type: [String, Object],
+		default: 'color: #CCCCCC'
+	},
+	/**
+	 * @description 设置右下角按钮的文字，有效值：send|search|next|go|done，兼容性详见uni-app文档https://uniapp.dcloud.io/component/input
+	 * @default 'done'
+	 */
+	confirmType: {
+		type: String,
+		default: 'done'
+	},
+	/**
+	 * @description 点击键盘右下角按钮时是否保持键盘不收起，H5无效
+	 * @default false
+	 */
+	confirmHold: {
+		type: Boolean,
+		default: false
+	},
+	/**
+	 * @description focus时，点击页面的时候不收起键盘，微信小程序有效
+	 * @default false
+	 */
+	holdKeyboard: {
+		type: Boolean,
+		default: false
+	},
+	/**
+	 * @description 自动获取焦点
+	 * 在 H5 平台能否聚焦以及软键盘是否跟随弹出，取决于当前浏览器本身的实现。nvue 页面不支持，需使用组件的 focus()、blur() 方法控制焦点
+	 * @default false
+	 */
+	focus: {
+		type: Boolean,
+		default: false
+	},
+	/**
+	 * @description 键盘收起时，是否自动失去焦点，目前仅App3.0.0+有效
+	 * @default false
+	 */
+	autoBlur: {
+		type: Boolean,
+		default: false
+	},
+	/**
+	 * @description 指定focus时光标的位置
+	 * @default -1
+	 */
+	cursor: {
+		type: [String, Number],
+		default: -1
+	},
+	/**
+	 * @description 输入框聚焦时底部与键盘的距离
+	 * @default 30
+	 */
+	cursorSpacing: {
+		type: [String, Number],
+		default: 30
+	},
+	/**
+	 * @description 光标起始位置，自动聚集时有效，需与selection-end搭配使用
+	 * @default -1
+	 */
+	selectionStart: {
+		type: [String, Number],
+		default: -1
+	},
+	/**
+	 * @description 光标结束位置，自动聚集时有效，需与selection-start搭配使用
+	 * @default -1
+	 */
+	selectionEnd: {
+		type: [String, Number],
+		default: -1
+	},
+	/**
+	 * @description 键盘弹起时，是否自动上推页面
+	 * @default true
+	 */
+	adjustPosition: {
+		type: Boolean,
+		default: true
+	},
+	/**
+	 * @description 输入框内容对齐方式
+	 * @values 'left' - 左对齐, 'center' - 居中, 'right' - 右对齐
+	 * @default 'left'
+	 */
+	align: {
+		type: String,
+		values: inputAligns,
+		default: 'left'
+	},
+	/**
+	 * @description 输入框字体的大小
+	 * @default 14
+	 */
+	size: {
+		type: [String, Number],
+		default: 14
+	},
+	/**
+	 * @description 输入框字体颜色
+	 * @default '#333333'
+	 */
+	color: {
+		type: String,
+		default: '#333333'
+	},
+	/**
+	 * @description 输入框前置图标
+	 */
+	prefixIcon: {
+		type: String,
+		default: ''
+	},
+	/**
+	 * @description 输入框前置图标大小
+	 * @default 18
+	 */
+	prefixSize: {
+		type: [String, Number],
+		default: 18
+	},
+	/**
+	 * @description 输入框前置图标颜色
+	 * @default '#8f9ca2'
+	 */
+	prefixColor: {
+		type: String,
+		default: '#8f9ca2'
+	},
+	/**
+	 * @description 输入框后置图标
+	 */
+	suffixIcon: {
+		type: String,
+		default: ''
+	},
+	/**
+	 * @description 输入框后置图标大小
+	 * @default 18
+	 */
+	suffixSize: {
+		type: [String, Number],
+		default: 18
+	},
+	/**
+	 * @description 输入框后置图标颜色
+	 * @default '#8f9ca2'
+	 */
+	suffixColor: {
+		type: String,
+		default: '#8f9ca2'
+	},
+	/**
+	 * @description 边框类型
+	 * @values 'surround' - 四周边框, 'bottom' - 底部边框, 'none' - 无边框
+	 * @default 'surround'
+	 */
+	border: {
+		type: String,
+		values: inputBorders,
+		default: 'surround'
+	},
+	/**
+	 * @description 输入框形状
+	 * @values 'circle' - 圆形, 'square' - 方形
+	 * @default 'square'
+	 */
+	shape: {
+		type: String,
+		values: componentShapes,
+		default: 'square'
+	},
+	/**
+	 * @description 设置外间距
+	 */
+	margin: {
+		type: String,
+		default: '0'
+	},
+	/**
+	 * @description 用于处理或者过滤输入框内容的方法
+	 * @default null
+	 */
+	formatter: {
+		type: [Function, null],
+		default: null
+	},
+	/**
+	 * @description 是否忽略组件内对文本合成系统事件的处理
+	 * @default true
+	 */
+	ignoreCompositionEvent: {
+		type: Boolean,
+		default: true
+	},
+	...componentProps
+};
+
+export const inputEmits = {
+	'update:modelValue': (_e : any) => true,
+	/**
+	 * @description 输入内容变化时触发
+	 */
+	input: (_e : any) => true,
+	/**
+	 * @description 输入内容变化时触发
+	 */
+	change: (_e : any) => true,
+	/**
+	 * @description 点击清空内容
+	 */
+	clear: () => true,
+	/**
+	 * @description 输入框失去焦点时触发
+	 */
+	blur: (_e : any) => true,
+	/**
+	 * @description 点击完成按钮时触发
+	 */
+	confirm: (_e : any) => true,
+	/**
+	 * @description 输入框聚焦时触发
+	 */
+	focus: () => true,
+	/**
+	 * @description readonly或disabled为true时 点击input时触发
+	 */
+	click: () => true,
+	/**
+	 * @description 键盘高度发生变化的时候触发此事件
+	 */
+	keyboardheightchange: () => true
+};
+
+export type InputProps = ExtractPropTypes<typeof inputProps>;
+export type InputEmits = typeof inputEmits;

package/components/input/src/input.vue

@@ -0,0 +1,241 @@
+<template>
+	<view class="fu-input" :class="inputClass" :style="[wrapperStyle]" @click="handleClick">
+		<view class="fu-input__content">
+			<view class="fu-input__content__prefix-icon">
+				<slot name="prefix">
+				    <fu-icon :name="prefixIcon" :size="prefixSize" :color="prefixColor" />
+				</slot>
+			</view>
+			<view class="fu-input__content__field-box">
+				<input class="fu-input__content__field-box__field" :style="[inputStyle]" :type="type" :value="innerValue"
+					:disabled="disabled || readonly"
+					:focus="focus"
+					:cursor="cursor"
+					:auto-blur="autoBlur"
+					:maxlength="maxlength"
+					:placeholder="placeholder"
+					:placeholder-style="placeholderStyle"
+					:placeholder-class="placeholderClass"
+					:confirm-type="confirmType"
+					:confirm-hold="confirmHold"
+					:hold-keyboard="holdKeyboard"
+					:cursor-spacing="cursorSpacing"
+					:adjust-position="adjustPosition"
+					:selection-end="selectionEnd"
+					:selection-start="selectionStart"
+					:password="password || type === 'password' || undefined"
+					:ignoreCompositionEvent="ignoreCompositionEvent"
+					@input="handleInput"
+					@blur="handleBlur"
+					@focus="handleFocus"
+					@confirm="handleConfirm"
+					@keyboardheightchange="handleKeyboardheightchange" />
+			</view>
+			<view class="fu-input__content__clear" v-if="isShowClear" @tap="handleClear">
+			    <fu-icon name="close-fill" size="25" color="#CCCCCC" />
+			</view>
+			<view class="fu-input__content__subfix-icon">
+				<slot name="suffix">
+				    <fu-icon :name="suffixIcon" :size="suffixSize" :color="suffixColor" />
+				</slot>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script lang="ts" setup>
+	/**
+	 * Input 输入框
+	 * @description 此组件为一个输入框，默认没有边框和样式，是专门为配合表单组件fu-form而设计的，利用它可以快速实现表单验证，输入内容，下拉选择等功能。
+	 * @tutorial http://www.fusions.top/components/input.html
+	 * @property {String | Number} v-model input输入的值
+	 * @property {String} type = [text|password|number|idcard|digit|tel|safe-password|nickname|none|decimal|numeric|search|email|url] 输入框类型 （ 默认 'text' ）
+     *  @value text 文本输入键盘
+	 * 	@value password 密码输入键盘
+	 * 	@value number 数字输入键盘，注意iOS上app-vue弹出的数字键盘并非9宫格方式
+	 * 	@value idcard 身份证输入键盘 注：微信、支付宝、百度、QQ小程序、快手小程序、京东小程序
+	 * 	@value digit 带小数点的数字键盘 注：均支持，App平台、H5平台 vue 页面在 iOS 平台显示的键盘包含负数（原生键盘不支持负号）
+	 * 	@value tel 电话输入键盘 注：小红书小程序不支持
+	 * 	@value safe-password 密码安全输入键盘 注：微信小程序
+	 * 	@value nickname 昵称输入键盘 注：微信小程序
+	 * 	@value none 无虚拟键盘。在应用程序或者站点需要实现自己的键盘输入控件时很有用 注：H5 (5.0+)、App (5.0+)
+	 * 	@value decimal 小数输入键盘，包含数字和分隔符（通常是“ . ”或者“ , ”），设备可能也可能不显示减号键 注：H5 (5.0+)、App (5.0+)
+	 * 	@value numeric 数字输入键盘，所需要的就是 0 到 9 的数字，设备可能也可能不显示减号键 注：H5 (5.0+)、App (5.0+)
+	 * 	@value search 为搜索输入优化的虚拟键盘，比如，返回键可能被重新标记为“搜索”，也可能还有其他的优化 注：H5 (5.0+)、App (5.0+)
+	 * 	@value email 为邮件地址输入优化的虚拟键盘，通常包含""符号和其他优化 注：H5 (5.0+)、App (5.0+)
+	 * 	@value url 为网址输入优化的虚拟键盘，比如，“/”键会更加明显、历史记录访问等 注：H5 (5.0+)、App (5.0+)
+	 * @property {Boolean} disabled = [true|false] 是否禁用输入框（ 默认 false ）
+	 * @property {Boolean} readonly = [true|false] 是否只读，与disabled不同之处在于disabled会置灰组件，而readonly则不会 （ 默认 false ）
+	 * @property {String} disabledColor 禁用状态时的背景色（默认 '#F5F7FA'）
+	 * @property {Boolean} clearable = [true|false]  是否显示清除控件 (默认false)
+	 * @property {Boolean} password = [true|false]  是否密码类型（默认false）
+	 * @property {String | Number} maxlength  最大输入长度，设置为 -1 的时候不限制最大长度 (默认 -1), 在支付宝小程序中 type="digit" 时IOS无法触发input事件
+	 * @property {String} placeholder 输入框为空时的占位符 (默认null)
+	 * @property {String} placeholderClass 指定placeholder的样式类，注意页面或组件的style中写了scoped时，需要在类名:deep()包裹 （ 默认 'input-placeholder' ）
+	 * @property {String | Object} placeholderStyle 指定placeholder的样式，字符串/对象形式，如"color: red;"
+	 * @property {String} confirmType 设置右下角按钮的文字，兼容性详见uni-app文档 （ 默认 'done' ）
+	 * @property {Boolean} confirmHold = [true|false] 点击键盘右下角按钮时是否保持键盘不收起，H5无效 （ 默认 false ）
+	 * @property {Boolean} holdKeyboard = [true|false]	focus时，点击页面的时候不收起键盘，微信小程序有效 （ 默认 false ）
+	 * @property {Boolean} focus = [true|false] 自动获取焦点，在 H5 平台能否聚焦以及软键盘是否跟随弹出，取决于当前浏览器本身的实现。nvue 页面不支持，需使用组件的 focus()、blur() 方法控制焦点 （ 默认 false ）
+	 * @property {Boolean} autoBlur = [true|false]	键盘收起时，是否自动失去焦点，目前仅App3.0.0+有效 （ 默认 false ）
+	 * @property {String | Number} cursor 指定focus时光标的位置（ 默认 -1 ）
+	 * @property {String | Number} cursorSpacing	输入框聚焦时底部与键盘的距离 （ 默认 30 ）
+	 * @property {String | Number} selectionStart	光标起始位置，自动聚集时有效，需与selection-end搭配使用 （ 默认 -1 ）
+	 * @property {String | Number} selectionEnd 光标结束位置，自动聚集时有效，需与selection-start搭配使用 （ 默认 -1 ）
+	 * @property {Boolean} adjustPosition = [true|false] 键盘弹起时，是否自动上推页面 （ 默认 true ）
+	 * @property {String} align = [left|center|right] 输入框内容对齐方式（ 默认 'left' ）
+     *  @value left 左显示
+     *  @value center 居中显示
+     *  @value right 右显示
+	 * @property {String | Number} size 输入框字体的大小（ 默认 14）
+	 * @property {String} color 输入框字体颜色（ 默认 '#333333' ）
+	 * @property {String} prefixIcon 输入框前置图标
+	 * @property {String | Number} prefixSize 输入框前置图标大小（默认 18）
+	 * @property {String} prefixColor 输入框前置图标颜色  默认（#8f9ca2）
+	 * @property {String} suffixIcon 输入框后置图标
+	 * @property {String | Number} suffixSize 输入框后置图标大小（默认18）
+	 * @property {String} suffixColor 输入框后置图标颜色  默认（#8f9ca2）
+	 * @property {String} border = [surround|bottom|none] 边框类型，surround-四周边框，bottom-底部边框，none-无边框 （ 默认 'surround' ）
+	 * 	@value surround 四周边框
+	 * 	@value bottom 底部边框
+	 * 	@value none 无边框
+	 * @property {String} shape = [circle|square] 输入框形状，circle-圆形，square-方形（默认 'square'）
+	 * 	@value circle 圆形
+	 * 	@value square 方形
+	 * @property {String} margin 自定义外间距（默认 '0'）
+	 * @property {Function} formatter 内容式化函数
+	 * @property {String | Object} customStyle 定义需要用到的外部样式
+	 * @property {Boolean} ignoreCompositionEvent 是否忽略组件内对文本合成系统事件的处理
+	 * 
+	 * @event {Function} click readonly或disabled为true时 点击input时触发
+	 * @event {Function} input 输入内容变化时触发
+	 * @event {Function} change 输入内容变化时触发
+	 * @event {Function} clear 点击清空内容
+	 * @event {Function} blur 输入框失去焦点时触发
+	 * @event {Function} confirm 点击完成按钮时触发
+	 * @event {Function} focus 输入框聚焦时触发
+	 * @event {Function} keyboardheightchange 键盘高度发生变化的时候触发此事件 微信小程序基础库2.7.0+、App 3.1.0+
+	 * @example <fu-input placeholder="请输入内容"></fu-input>
+	 */
+	import { inputEmits, inputProps } from './input';
+	import { useInput, useInputCustomStyle } from './composables';
+	
+	defineOptions({ name: 'FuInput', options: { virtualHost: true } });
+	
+	const props = defineProps(inputProps);
+	const $emit = defineEmits(inputEmits);
+	
+	const {
+		innerValue,
+		focused,
+		setFormatter,
+		handleInput,
+		handleBlur,
+		handleFocus,
+		handleClear,
+		handleConfirm,
+		handleClick,
+		handleKeyboardheightchange
+	} = useInput(props, $emit);
+	
+	const {
+		isShowClear,
+		inputClass,
+		wrapperStyle,
+		inputStyle
+	} = useInputCustomStyle(props, focused, innerValue);
+	
+	// 暴露方法给父组件
+	defineExpose({
+		setFormatter
+	});
+</script>
+
+<style lang="scss" scoped>
+	@use '../../../style/components.scss';
+	$color_333333: #333333;
+	$color_dadbde: #dadbde;
+	
+	.fu-input {
+		@include components.flex(row);
+		align-items: center;
+		justify-content: space-between;
+		flex: 1;
+		
+		&__content {
+			@include components.flex(row);
+			flex: 1;
+			align-items: center;
+			justify-content: space-between;
+			
+			&__field-box {
+				@include components.flex(row);
+				position: relative;
+				margin: 0;
+				flex: 1;
+				
+				&__field {
+					text-align: left;
+					color: $color_333333;
+					font-size: 14px;
+					flex: 1;
+					/* #ifdef MP-ALIPAY */
+					padding: 0;
+					/* #endif */
+					background-color: transparent;
+				}
+			}
+			
+			&__clear {
+				width: 20px;
+				height: 20px;
+				border-radius: 100px;
+				@include components.flex(row);
+				align-items: center;
+				justify-content: center;
+				transform: scale(0.82);
+				margin-left: 4px;
+			}
+			
+			&__subfix-icon {
+				margin-left: 4px;
+			}
+			
+			&__prefix-icon {
+				margin-right: 4px;
+			}
+		}
+	}
+	
+	.fu-border {
+		border-width: 0.5px;
+		border-color: $color_dadbde;
+		border-style: solid;
+	}
+	
+	.fu-border-bottom {
+		border-bottom-width: 0.5px;
+		border-color: $color_dadbde;
+		border-bottom-style: solid;
+	}
+	
+	.fu-input-circle {
+		border-radius: 1000rpx !important;
+		overflow: hidden;
+	}
+	
+	.fu-input-square {
+		border-radius: 5px;
+	}
+	
+	.fu-input-no-radius {
+		border-radius: 0;
+	}
+	
+	.fu-input-password {
+		:deep(.uni-input-input) {
+			-webkit-text-security: disc;
+			text-security:disc;
+		}
+	}
+</style>

package/components/keyboard/index.ts

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

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

@@ -0,0 +1,3 @@
+export * from './use-keyboard-car'
+export * from './use-keyboard-number'
+export * from './use-keyboard'

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

@@ -0,0 +1,99 @@
+import { computed, ref, type SetupContext } from 'vue';
+import type { KeyboardCarProps, KeyboardCarEmits } from '../keyboard-car';
+
+export const useKeyboardCar = (props : KeyboardCarProps, $emit : SetupContext<KeyboardCarEmits>['emit']) => {
+	// 车牌输入时，abc=true为输入车牌号码，bac=false为输入省份中文简称
+	const abc = ref(false);
+	const timer = ref<any>(null);
+
+	const areaList = computed(() => {
+		const data = [
+			'京', '沪', '粤', '津', '冀', '豫', '云', '辽', '黑', '湘',
+			'皖', '鲁', '苏', '浙', '赣', '鄂', '桂', '甘', '晋', '陕',
+			'蒙', '吉', '闽', '贵', '渝', '川', '青', '琼', '宁', '挂',
+			'藏', '港', '澳', '新', '使', '学'
+		];
+		let processedData = [...data];
+		// 打乱顺序
+		if (props.random) processedData = uni.fu.randomArray(processedData)
+		// 切割成二维数组
+		let tmp: string[][] = [];
+		tmp[0] = processedData.slice(0, 10);
+		tmp[1] = processedData.slice(10, 20);
+		tmp[2] = processedData.slice(20, 30);
+		tmp[3] = processedData.slice(30, 36);
+		return tmp;
+	});
+
+	const engKeyBoardList = computed(() => {
+		const 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 processedData = [...data];
+		if (props.random) {
+			processedData = uni.$fu.randomArray(processedData)
+		}
+		let tmp: (string | number)[][] = [];
+		tmp[0] = processedData.slice(0, 10);
+		tmp[1] = processedData.slice(10, 20);
+		tmp[2] = processedData.slice(20, 30);
+		tmp[3] = processedData.slice(30, 36);
+		return tmp;
+	});
+
+	const isDisabled = computed(() => {
+		return (i : number, j : number) : boolean => {
+			let value = '';
+			if (abc.value) value = String(engKeyBoardList.value[i][j]);
+			else value = areaList.value[i][j];
+			return props.disKeys.indexOf(value) > -1;
+		}
+	});
+	
+	// 点击键盘按钮
+	const carInputClick = (i, j) => {
+		if(isDisabled.value(i,j)) return;
+		let value = '';
+		// 不同模式，获取不同数组的值
+		if (abc.value) value = String(engKeyBoardList.value[i][j]);
+		else value = areaList.value[i][j];
+		// 如果允许自动切换，则将中文状态切换为英文
+		if (!abc.value && props.autoChange) uni.$fu.sleep(200).then(() => abc.value = true)
+		$emit('change', value);
+	};
+	
+	// 修改汽车牌键盘的输入模式，中文|英文
+	const changeCarInputMode = () => {
+		abc.value = !abc.value;
+		$emit('changeCarInputMode', abc.value);
+	};
+	
+	// 点击退格键
+	const backspaceClick = () => {
+		$emit('backspace');
+		clearInterval(timer.value); //再次清空定时器，防止重复注册定时器
+		timer.value = null;
+		timer.value = setInterval(() => {
+			$emit('backspace');
+		}, 250);
+	};
+	
+	const clearTimer = () => {
+		clearInterval(timer.value);
+		timer.value = null;
+	}
+
+	return {
+		abc,
+		areaList,
+		engKeyBoardList,
+		isDisabled,
+		carInputClick,
+		changeCarInputMode,
+		backspaceClick,
+		clearTimer
+	}
+}