@ecolovo/uniapp-components 1.0.9 → 2.0.0

package/components/number-input/number-input.vue

@@ -1,6 +1,6 @@
 <template>
 	<view
-		:class="[componentClassNames, { [$style['NumberInput--step-mode']]: mode === 'step' }]"
+		:class="[...classNames, $style['NumberInput'], { [$style['NumberInput--step-mode']]: mode === 'step' }]"
 		@click.stop.prevent="doNothing"
 	>
 		<view
@@ -13,17 +13,17 @@
 		>
 			<icon-cpn
 				icon="step-minus"
-				@touchstart.native="handleLongTouchStart($event, -step, disabledDecrease)"
-				@touchend.native="handleLongTouchEnd(-step)"
-				@touchcancel.native="handleLongTouchEnd(-step)"
+				@touchstart="handleStepLongTouchStart($event, -step, disabledDecrease)"
+				@touchend="handleStepLongTouchEnd(-step)"
+				@touchcancel="handleStepLongTouchEnd(-step)"
 			/>
 		</view>
 		<view v-if="isReadonly" :class="[$style['NumberInput--value'], { disabled }]">
-			{{ value }}
+			{{ modelValue }}
 		</view>
 		<input
 			v-else-if="editable || mode !== 'step'"
-			v-model="editValue"
+			:value="editValue"
 			:type="type"
 			maxlength="14"
 			:class="[$style['NumberInput--input'], mode === 'step' ? $style['NumberInput--step-input'] : '']"
@@ -34,7 +34,7 @@
 			@focus="handleFocus"
 			@blur="handleInputConfirm"
 		/>
-		<view v-else :class="$style['NumberInput--input-value']">{{ value || 0 }}</view>
+		<view v-else :class="$style['NumberInput--input-value']">{{ modelValue || 0 }}</view>
 		<view
 			v-if="mode === 'step' && !isReadonly"
 			:class="[
@@ -45,251 +45,252 @@
 		>
 			<icon-cpn
 				icon="step-plus"
-				@touchstart.native="handleLongTouchStart($event, step, disabledIncrease)"
-				@touchend.native="handleLongTouchEnd(step)"
-				@touchcancel.native="handleLongTouchEnd(step)"
+				@touchstart="handleStepLongTouchStart($event, step, disabledIncrease)"
+				@touchend="handleStepLongTouchEnd(step)"
+				@touchcancel="handleStepLongTouchEnd(step)"
 			/>
 		</view>
 	</view>
 </template>
 
-<script>
-import componentName from '../../mixins/componentName';
-import { isFormReadonly } from '../form/mixin';
+<script lang="ts" setup>
+import { computed, inject, nextTick, ref, watch } from 'vue';
+import useClassNames from '../../composable/component-name';
 import { round } from '../../utils/round';
 import IconCpn from '../icon/icon.vue';
 
-const MIN = 0;
-const MAX = 9999999999;
-const numberReg = /^(-?)(\d*)()(-?)$/;
-
-export default {
-	name: 'NumberInput',
+defineOptions({
 	options: {
 		virtualHost: true,
 		styleIsolation: 'shared',
 	},
-	components: { IconCpn },
-	mixins: [componentName, isFormReadonly],
-	props: {
-		/** 绑定值 */
-		value: {
-			type: [Number, String],
-			default: '',
-		},
-		/** 是否禁用 */
-		disabled: {
-			type: Boolean,
-			default: false,
-		},
-		/** 是否可编辑 */
-		editable: {
-			type: Boolean,
-			default: true,
-		},
-		/** 是否只读 */
-		readonly: {
-			type: Boolean,
-			default: false,
-		},
-		/** 类型: input: 只有输入框 | step: 步进器，即带 + - 按钮 */
-		mode: {
-			type: String,
-			validator: (val) => !val || ['input', 'step'].includes(val),
-			default: 'input',
-		},
-		/** 输入模式: number: 只能输入整数 | digit: 小数 | text: 如需输入负数 */
-		type: {
-			type: String,
-			validator: (val) => !val || ['number', 'digit', 'text'].includes(val),
-			default: 'number',
-		},
-		/** 占位提示文本 */
-		placeholder: {
-			type: String,
-			default: '请输入',
-		},
-		/** 小数的精度 */
-		precision: {
-			type: Number,
-			default: 0,
-		},
-		/** 步进器的步长 */
-		step: {
-			type: Number,
-			default: 1,
-		},
-		/** 最大值 */
-		max: {
-			type: Number,
-			default: MAX,
-		},
-		/** 最小值 */
-		min: {
-			type: Number,
-			default: MIN,
-		},
-	},
-	data() {
-		return {
-			/** 显示值 */
-			editValue: '',
-		};
-	},
-	computed: {
-		isReadonly() {
-			return this.readonly || this.isFormReadonly;
-		},
-		inputTestReg() {
-			return this.precision > 0 ? new RegExp('^(-?)(\\d*)(\\.\\d{0,' + this.precision + '})?(-?)$') : numberReg;
-		},
-		/** 是否禁用减 */
-		disabledDecrease() {
-			if (this.disabled) return true;
-			const val = Number(this.value);
-			if (!Number.isNaN(val) && val <= Number(this.min)) return true;
-			return false;
-		},
-		/** 是否禁用增 */
-		disabledIncrease() {
-			if (this.disabled) return true;
-			const val = Number(this.value);
-			if (!Number.isNaN(val) && val >= Number(this.max)) return true;
-			return false;
-		},
-	},
-	watch: {
-		value: {
-			handler(n) {
-				this.editValue = n + '';
-			},
-			immediate: true,
-		},
-	},
-	methods: {
-		doNothing() {},
-		/** 聚焦 */
-		handleFocus() {
-			this._lastValue = this.value;
-			this._lastEditValue = this.value;
-		},
-		handleLongTouchStart(event, step, disabled) {
-			if (disabled) return;
-			if (event.touches && event.touches.length > 1) return;
-
-			this._lastValue = this.value;
-			this._touchStep = step;
-			let interval = 400;
-			let times = 0;
-
-			const longTouch = () => {
-				if (!this.handleStep(step * (times >= 30 ? 4 : times >= 12 ? 2 : 1))) return;
-
-				this._touchTimer = setTimeout(longTouch, interval);
-				interval = Math.max(100, interval - 50);
-				times++;
-			};
-			longTouch();
-		},
-		handleLongTouchEnd(step) {
-			if (this._touchStep !== step) return;
-			if (this._touchTimer) {
-				clearTimeout(this._touchTimer);
-				this._touchTimer = null;
-			}
-			this._touchStep = null;
-			this.confirmValue(this.editValue + '', true);
-		},
-		/** 点击按钮修改数量 */
-		handleStep(step) {
-			if ((step > 0 && this.disabledIncrease) || (step < 0 && this.disabledDecrease)) {
-				return false;
-			}
-			let nextValue = round(+this.value + step, this.precision);
-
-			this.updateStepValue(nextValue + '');
-			return true;
-		},
-		handleInput(e) {
-			let value = e.detail.value.trim();
-
-			const match = this.inputTestReg.exec(value);
-			if (match) {
-				// sign: 负号; integer: 整数部分数字; decimal: 小数部分数字; resign: 再次输入负号，取消负号
-				let [, sign = '', integer = '', decimal = '', resign = ''] = match;
-				sign = !!sign ^ !!resign ? '-' : '';
-				integer = integer ? Number(integer) || '0' : decimal ? '0' : '';
-				value = sign + integer + decimal;
-
-				this._lastEditValue = value;
-				this.$emit('input', value);
-				this.$nextTick(() => {
-					this.editValue = value;
-				});
-			} else {
-				this.$nextTick(() => {
-					this.editValue = this._lastEditValue;
-				});
-			}
-		},
-		updateStepValue(value) {
-			value = this.validateValue(value, true);
-			this.$emit('input', value);
-			this.editValue = value;
-		},
-		/** 修改数目输入完毕 */
-		handleInputConfirm(e) {
-			let value = e.detail.value;
-			this.confirmValue(value);
-		},
-		/** 确认数据
-		 * @param {string} value
-		 */
-		confirmValue(value, isStepButton = false) {
-			value = this.validateValue(value, isStepButton);
-			this.editValue = value + '';
-
-			this.$emit('input', value);
-			this.$emit('change', value);
-		},
-		/** 确认数据前校验
-		 * @param {string} value
-		 */
-		validateValue(value, isStepButton = false) {
-			let _nextValue;
-			if (isNaN(value)) {
-				// 输入不合法，取消此次输入
-				_nextValue = isStepButton ? 0 : this._lastValue;
-				this.$emit('error', '请输入正确的数值');
-			} else if (value === '') {
-				// 输入空值
-				_nextValue = isStepButton ? 0 : '';
-				this.$emit('error', '请输入数值');
-			} else if (+value < this.min) {
-				// 超过最小输入值
-				_nextValue = this.min;
-				this.$emit('error', `数值不能小于 ${this.min}`);
-			} else if (+value > this.max) {
-				// 超过最大输入值
-				_nextValue = this.max;
-				this.$emit('error', `数值不能大于 ${this.max}`);
-			} else {
-				_nextValue = round(+value, this.precision);
-			}
-			return _nextValue;
-		},
+});
+
+const classNames = useClassNames('number-input');
+
+const MIN = 0;
+const MAX = 9999999999;
+const numberReg = /^(-?)(\d*)()(-?)$/;
+
+type _Props = {
+	/** 绑定值 */
+	modelValue?: string | number;
+	/** 是否禁用 */
+	disabled?: boolean;
+	/** 是否可编辑 */
+	editable?: boolean;
+	/** 是否只读 */
+	readonly?: boolean;
+	/** 类型: input: 只有输入框 | step: 步进器，即带 + - 按钮 */
+	mode?: 'input' | 'step';
+	/** 输入模式: number: 只能输入整数 | digit: 小数 | text: 如需输入负数 */
+	type?: 'number' | 'digit' | 'text';
+	/** 占位提示文本 */
+	placeholder?: string;
+	/** 小数的精度 */
+	precision?: number;
+	/** 步进器的步长 */
+	step?: number;
+	/** 最大值 */
+	max?: number;
+	/** 最小值 */
+	min?: number;
+};
+
+const props = withDefaults(defineProps<_Props>(), {
+	modelValue: '',
+	disabled: false,
+	editable: true,
+	readonly: false,
+	mode: 'input',
+	type: 'number',
+	placeholder: '请输入',
+	precision: 0,
+	step: 1,
+	max: MAX,
+	min: MIN,
+});
+
+const emit = defineEmits<{
+	(e: 'update:modelValue', val: string | number): void;
+	(e: 'change', val: string | number): void;
+	(e: 'error', msg: string): void;
+}>();
+
+/** 表单是否只读 */
+const isFormReadonly = inject(
+	'ecolovo/form/readonly',
+	computed(() => false)
+);
+
+/** 编辑值 */
+const editValue = ref('');
+
+/** 是否只读 */
+const isReadonly = computed(() => props.readonly || isFormReadonly.value);
+
+/** 输入校验正则 */
+const inputTestReg = computed(() => {
+	return props.precision > 0 ? new RegExp('^(-?)(\\d*)(\\.\\d{0,' + props.precision + '})?(-?)$') : numberReg;
+});
+
+/** 是否禁用减 */
+const disabledDecrease = computed(() => {
+	if (props.disabled) return true;
+	const val = Number(props.modelValue);
+	if (!Number.isNaN(val) && val <= Number(props.min)) return true;
+	return false;
+});
+
+/** 是否禁用增 */
+const disabledIncrease = computed(() => {
+	if (props.disabled) return true;
+	const val = Number(props.modelValue);
+	if (!Number.isNaN(val) && val >= Number(props.max)) return true;
+	return false;
+});
+
+watch(
+	() => props.modelValue,
+	(n) => {
+		editValue.value = (n ?? '') + '';
 	},
+	{ immediate: true }
+);
+
+let _lastValue: string | number = '';
+let _lastEditValue = '';
+let _touchingStep: number | null = null;
+let _touchTimer: ReturnType<typeof setTimeout> | null = null;
+
+const doNothing = () => {};
+
+/** 聚焦 */
+const handleFocus = () => {
+	_lastValue = props.modelValue;
+	_lastEditValue = (props.modelValue ?? '') + '';
+};
+
+/** 长按步进按钮开始处理 */
+const handleStepLongTouchStart = (event: TouchEvent, step: number, disabled: boolean) => {
+	if (disabled) return;
+	if (event.touches.length > 1) return;
+
+	_lastValue = props.modelValue;
+	_touchingStep = step;
+	let interval = 400;
+	let times = 0;
+
+	const longTouch = () => {
+		if (!handleOneStep(step * (times >= 30 ? 4 : times >= 12 ? 2 : 1))) return;
+
+		_touchTimer = setTimeout(longTouch, interval);
+		interval = Math.max(100, interval - 50);
+		times++;
+	};
+	longTouch();
+};
+
+/** 长按步进按钮结束处理 */
+const handleStepLongTouchEnd = (step: number) => {
+	if (_touchingStep !== step) return;
+	if (_touchTimer) {
+		clearTimeout(_touchTimer);
+		_touchTimer = null;
+	}
+	_touchingStep = null;
+	confirmValue(editValue.value + '', true);
+};
+
+/** 单次步进处理 */
+const handleOneStep = (step: number) => {
+	if ((step > 0 && disabledIncrease.value) || (step < 0 && disabledDecrease.value)) {
+		return false;
+	}
+	const nextValue = round(+props.modelValue + step, props.precision);
+
+	updateStepValue(nextValue + '');
+	return true;
+};
+
+/** 每次步进处理 */
+const updateStepValue = (value: string) => {
+	const nextValue = validateValue(value, true);
+	emit('update:modelValue', nextValue);
+	editValue.value = nextValue + '';
+};
+
+/** 修改数目输入完毕 */
+const handleInputConfirm = (e: FocusEvent) => {
+	const value = e.detail.value;
+	confirmValue(value);
+};
+
+/** 校验数据 */
+const validateValue = (value: string, isStepButton = false) => {
+	let nextValue: string | number;
+	if (isNaN(+value)) {
+		// 输入不合法，取消此次输入
+		nextValue = isStepButton ? 0 : _lastValue;
+		emit('error', '请输入正确的数值');
+	} else if (value === '') {
+		// 输入空值
+		nextValue = isStepButton ? 0 : '';
+		emit('error', '请输入数值');
+	} else if (+value < props.min) {
+		// 超过最小输入值
+		nextValue = props.min;
+		emit('error', `数值不能小于 ${props.min}`);
+	} else if (+value > props.max) {
+		// 超过最大输入值
+		nextValue = props.max;
+		emit('error', `数值不能大于 ${props.max}`);
+	} else {
+		nextValue = round(+value, props.precision);
+	}
+	return nextValue;
+};
+
+const handleInput = (e: InputEvent) => {
+	let value = e.detail.value.trim();
+
+	const match = inputTestReg.value.exec(value);
+	if (match) {
+		// sign: 负号; integer: 整数部分数字; decimal: 小数部分数字; resign: 再次输入负号，取消负号
+		const [, sign = '', integer = '', decimal = '', resign = ''] = match;
+		const signVal = (!!sign && !resign) || (!sign && !!resign) ? '-' : '';
+		const integerVal = integer ? Number(integer) || '0' : decimal ? '0' : '';
+		value = signVal + integerVal + decimal;
+
+		_lastEditValue = value;
+		emit('update:modelValue', value);
+		nextTick(() => {
+			editValue.value = value;
+		});
+	} else {
+		nextTick(() => {
+			editValue.value = _lastEditValue;
+		});
+	}
+};
+
+/** 确认数据 */
+const confirmValue = (value: string, isStepButton = false) => {
+	const nextValue = validateValue(value, isStepButton);
+	editValue.value = nextValue + '';
+
+	emit('update:modelValue', nextValue);
+	emit('change', nextValue);
 };
 </script>
 
 <style lang="scss" module>
-@use '../../styles/index' as *;
+@use '../../styles/utils' as *;
+@use './number-input' as *;
 
 // 定义外部变量
-$component-name: 'number-input';
-$component-vars: $number-input;
 %external-vars {
-	@include UTILS__DEFINE_COMPONENT_VARS();
+	@include UTILS__DEFINE_COMPONENT_VARS($number-input, 'number-input');
 }
 
 .NumberInput {

package/components/numpad/numpad.scss

@@ -0,0 +1,9 @@
+@use 'sass:map';
+
+// 可配置的变量
+$numpad: () !default;
+$numpad-default: (
+	row-gap: 20rpx,
+	col-gap: 20rpx,
+);
+$numpad: map.merge($numpad-default, $numpad);