@ecolovo/uniapp-components 1.0.10 → 2.0.1

package/components/number-dialog/number-dialog.vue

@@ -1,6 +1,6 @@
 <template>
 	<view
-		:class="[componentClassNames, { [$style['NumberDialog--disabled']]: disabled }]"
+		:class="[...classNames, $style['NumberDialog'], { [$style['NumberDialog--disabled']]: disabled }]"
 		@click.stop.prevent="doNothing"
 	>
 		<view
@@ -14,16 +14,18 @@
 			<icon-cpn
 				icon="step-minus"
 				tap-size="60rpx"
-				@touchstart.native="handleStepLongTouchStart($event, -step, disabledDecrease)"
-				@touchend.native="handleStepLongTouchEnd(-step)"
-				@touchcancel.native="handleStepLongTouchEnd(-step)"
+				@touchstart="handleStepLongTouchStart($event, -step, disabledDecrease)"
+				@touchend="handleStepLongTouchEnd(-step)"
+				@touchcancel="handleStepLongTouchEnd(-step)"
 			/>
 		</view>
 		<view
 			:class="[$style['NumberDialog--input'], { [$style['NumberDialog--readonly']]: isReadonly }]"
 			@click="showPad"
 		>
-			<text v-if="isReadonly || value === 0 || value" :class="$style['NumberDialog--value']">{{ value }}</text>
+			<text v-if="isReadonly || modelValue === 0 || modelValue" :class="$style['NumberDialog--value']">{{
+				modelValue
+			}}</text>
 			<text v-else :class="$style['NumberDialog--placeholder']">{{ placeholder }}</text>
 		</view>
 		<view
@@ -37,13 +39,13 @@
 			<icon-cpn
 				icon="step-plus"
 				tap-size="60rpx"
-				@touchstart.native="handleStepLongTouchStart($event, step, disabledIncrease)"
-				@touchend.native="handleStepLongTouchEnd(step)"
-				@touchcancel.native="handleStepLongTouchEnd(step)"
+				@touchstart="handleStepLongTouchStart($event, step, disabledIncrease)"
+				@touchend="handleStepLongTouchEnd(step)"
+				@touchcancel="handleStepLongTouchEnd(step)"
 			/>
 		</view>
 
-		<popover-mask-cpn v-if="isShowPad" ref="mask" v-model="isShowPad">
+		<popover-mask-cpn v-if="isShowPad" ref="maskRef" v-model="isShowPad">
 			<dialog-content-cpn
 				title="请输入数字"
 				center-title
@@ -64,9 +66,9 @@
 	</view>
 </template>
 
-<script>
-import componentName from '../../mixins/componentName';
-import { isFormReadonly } from '../form/mixin';
+<script lang="ts" setup>
+import { computed, inject, ref, watch } from 'vue';
+import useClassNames from '../../composable/component-name';
 import { round } from '../../utils/round';
 import DialogContentCpn from '../dialog/dialog-content.vue';
 import IconCpn from '../icon/icon.vue';
@@ -74,210 +76,213 @@ import NumpadCpn from '../numpad/numpad.vue';
 import PopoverContentCpn from '../popover/popover-content.vue';
 import PopoverMaskCpn from '../popover/popover-mask.vue';
 
-const MIN = 0;
-const MAX = 9999;
-
-export default {
-	name: 'NumberDialog',
+defineOptions({
 	options: {
 		virtualHost: true,
 		styleIsolation: 'shared',
 	},
-	components: { DialogContentCpn, IconCpn, NumpadCpn, PopoverContentCpn, PopoverMaskCpn },
-	mixins: [componentName, isFormReadonly],
-	props: {
-		/** 绑定值 */
-		value: {
-			type: [Number, String],
-			default: '',
-		},
-		/** 是否禁用 */
-		disabled: {
-			type: Boolean,
-			default: false,
-		},
-		/** 是否可编辑，为 true 时点击中间数字会弹出键盘 */
-		editable: {
-			type: Boolean,
-			default: true,
-		},
-		/** 是否只读 */
-		readonly: {
-			type: Boolean,
-			default: false,
-		},
-		/** 占位提示文本 */
-		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: '',
-			/** 是否显示数字键盘 */
-			isShowPad: false,
-		};
-	},
-	computed: {
-		/** 是否只读 */
-		isReadonly() {
-			return this.readonly || this.isFormReadonly;
-		},
-		/** 是否禁用减 */
-		disabledDecrease() {
-			if (this.disabled) return true;
-			if (!isNaN(this.value) && +this.value <= Number(this.min)) return true;
-			return false;
-		},
-		/** 是否禁用增 */
-		disabledIncrease() {
-			if (this.disabled) return true;
-			if (!isNaN(this.value) && +this.value >= Number(this.max)) return true;
-			return false;
-		},
-	},
-	watch: {
-		value: {
-			handler(n) {
-				this.editValue = n + '';
-			},
-			immediate: true,
-		},
-	},
-	methods: {
-		doNothing() {},
-		/** 长按步进按钮开始处理 */
-		handleStepLongTouchStart(event, step, disabled) {
-			if (disabled) return;
-			if (event.touches && event.touches.length > 1) return;
-
-			this._lastValue = this.value;
-			this._touchingStep = step;
-			let interval = 400;
-			let times = 0;
-
-			const longTouch = () => {
-				if (!this.handleOneStep(step * (times >= 30 ? 4 : times >= 12 ? 2 : 1))) return;
-
-				this._touchTimer = setTimeout(longTouch, interval);
-				interval = Math.max(100, interval - 50);
-				times++;
-			};
-			longTouch();
-		},
-		/** 长按步进按钮结束处理 */
-		handleStepLongTouchEnd(step) {
-			if (this._touchingStep !== step) return;
-			if (this._touchTimer) {
-				clearTimeout(this._touchTimer);
-				this._touchTimer = null;
-			}
-			this._touchingStep = null;
-			this.confirmValue(this.editValue + '', true);
-		},
-		/** 单次步进处理 */
-		handleOneStep(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;
-		},
-		/** 每次步进处理 */
-		updateStepValue(value) {
-			value = this.validateValue(value, true);
-			this.$emit('input', value);
-			this.editValue = value;
-		},
-		/** 校验数据
-		 * @param {string} value 输入值
-		 * @param {boolean} isStepButton 是否为步进按钮触发
-		 */
-		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;
-		},
-		/** 确认数据
-		 * @param {string} value
-		 */
-		confirmValue(value, isStepButton = false) {
-			value = this.validateValue(value, isStepButton);
-			this.editValue = value + '';
-
-			this.$emit('input', value);
-			this.$emit('change', { value, lastValue: this._lastValue });
-		},
-		/** 显示数字键盘弹框 */
-		showPad() {
-			if (this.isReadonly || this.disabled || !this.editable) return;
-
-			this.editValue = this.value + '';
-			this.isShowPad = true;
-		},
-		/** 关闭数字键盘弹框 */
-		closePad() {
-			this.$refs.mask.close();
-		},
-		/** 点击弹框确认按钮 */
-		onConfirm() {
-			this.confirmValue(this.editValue);
-			this.closePad();
-		},
+});
+
+const classNames = useClassNames('number-dialog');
+
+const MIN = 0;
+const MAX = 9999;
+
+type _Props = {
+	/** 绑定值 */
+	modelValue?: string | number;
+	/** 是否禁用 */
+	disabled?: boolean;
+	/** 是否可编辑，为 true 时点击中间数字会弹出键盘 */
+	editable?: boolean;
+	/** 是否只读 */
+	readonly?: boolean;
+	/** 占位提示文本 */
+	placeholder?: string;
+	/** 小数的精度 */
+	precision?: number;
+	/** 步进器的步长 */
+	step?: number;
+	/** 最大值 */
+	max?: number;
+	/** 最小值 */
+	min?: number;
+};
+
+const props = withDefaults(defineProps<_Props>(), {
+	modelValue: '',
+	disabled: false,
+	editable: true,
+	readonly: false,
+	placeholder: '请输入',
+	precision: 0,
+	step: 1,
+	max: MAX,
+	min: MIN,
+});
+
+const emit = defineEmits<{
+	(e: 'update:modelValue', val: string | number): void;
+	(e: 'change', payload: { value: string | number; lastValue: string | number }): void;
+	(e: 'error', msg: string): void;
+}>();
+
+/** 表单是否只读 */
+const isFormReadonly = inject(
+	'ecolovo/form/readonly',
+	computed(() => false)
+);
+
+/** 编辑值 */
+const editValue = ref<string | number>('');
+/** 是否显示数字键盘 */
+const isShowPad = ref(false);
+
+const maskRef = ref<InstanceType<typeof PopoverMaskCpn>>();
+
+/** 是否只读 */
+const isReadonly = computed(() => props.readonly || isFormReadonly.value);
+
+/** 是否禁用减 */
+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 _touchingStep: number | null = null;
+let _touchTimer: ReturnType<typeof setTimeout> | null = null;
+
+const doNothing = () => {};
+
+/** 长按步进按钮开始处理 */
+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 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 confirmValue = (value: string, isStepButton = false) => {
+	const nextValue = validateValue(value, isStepButton);
+	editValue.value = nextValue + '';
+
+	emit('update:modelValue', nextValue);
+	emit('change', { value, lastValue: _lastValue });
+};
+
+/** 显示数字键盘弹框 */
+const showPad = () => {
+	if (isReadonly.value || props.disabled || !props.editable) return;
+
+	editValue.value = (props.modelValue ?? '') + '';
+	isShowPad.value = true;
+};
+
+/** 关闭数字键盘弹框 */
+const closePad = () => {
+	maskRef.value?.close();
+};
+
+/** 点击弹框确认按钮 */
+const onConfirm = () => {
+	confirmValue(editValue.value as string);
+	closePad();
 };
 </script>
 
 <style lang="scss" module>
-@use '../../styles/index' as *;
+@use '../../styles/utils' as *;
+@use './number-dialog' as *;
 
 // 定义外部变量
-$component-name: 'number-dialog';
-$component-vars: $number-dialog;
 %external-vars {
-	@include UTILS__DEFINE_COMPONENT_VARS();
+	@include UTILS__DEFINE_COMPONENT_VARS($number-dialog, 'number-dialog');
 }
 
 .NumberDialog {

package/components/number-input/number-input.scss

@@ -0,0 +1,9 @@
+@use 'sass:map';
+
+// 可配置的变量
+$number-input: () !default;
+$number-input-default: (
+	font-size: inherit,
+	text-align: center,
+);
+$number-input: map.merge($number-input-default, $number-input);