v-uni-app-ui 1.0.2 → 1.0.4

package/components/model/native/v-input/v-input.vue

@@ -1,352 +1,163 @@
 <template>
-	<view :class="['input-combination', `input-combination--${size}`]">
-		<view :class="['combination', 'left-combination']" v-if="combinationConfig.isShow && combinationConfig.position === 'left' || combinationConfig.position === 'ends'">
+	<view :id="props.id" :class="computedClasses" :style="computedStyle">
+		<view :style="leftSlotStyle" class="left-slot">
 			<slot name="left">
-				<button>{{ combinationConfig.buttonText }}</button>
+				<view class="left-icon" v-if="props.isIcon" :style="iconStyle">
+					<view class="iconfont icon-url"></view>
+					<view class="icon-fill" :style="iconFillStyle"></view>
+				</view>
 			</slot>
 		</view>
-		<view :class="['input-container', `input-container--${combinationConfig.position}`]">
+		<view :style="inputStyle" class="center-input">
 			<input
-				:value="inputValue"
-				:class="[
-					'v-input',
-					{ 'v-input--disabled': disabled },
-					{ 'input-focused': focused },
-					`v-input--border--${borderModel}`,
-					`v-input--right--combination--${combinationConfig.position}`
-				]"
+				v-model="inputValue"
+				:type="computedInputType"
+				:style="inputFontStyle"
 				:placeholder="currentPlaceholder"
-				:maxlength="maxlength || undefined"
-				:disabled="disabled"
-				:type="type"
-				:focus="autoFocus"
-				@input="handleInput"
-				@focus="handleFocus"
-				@blur="handleBlur"
-				@confirm="handleConfirm"
+				:disabled="props.disabled"
+				:placeholder-style="toCSS(inputPlaceholderStyle)"
+				:cursor="props.cursor"
+				:selection-start="selectionStart"
+				:selection-end="selectionEnd"
+				:maxlength="props.maxlength"
+				:random-number="props.randomNumber"
+				:cursor-color="props.cursorColor"
+				:focus="props.focus"
+				:auto-blur="props.autoBlur"
+				:password="props.type === 'password'"
+				:cursor-spacing="props.cursorSpacing"
+				@focus="focus(true)"
+				@blur="focus(false)"
 			/>
-			<view v-if="showCounter && maxlength" class="input-counter">{{ currentLength }}/{{ maxlength }}</view>
 		</view>
-		<view :class="['combination', 'right-combination']" v-if="combinationConfig.isShow && combinationConfig.position === 'right' || combinationConfig.position === 'ends'">
-			<slot name="right">
-				<button>{{ combinationConfig.buttonText }}</button>
-			</slot>
+		<view :style="rightSlotStyle" class="right-slot">
+			<slot name="right"></slot>
 		</view>
 	</view>
 </template>
 
 <script setup lang="ts">
-import { ref, watch, onMounted, onUnmounted, inject } from 'vue';
+import { ref, onUnmounted, computed } from 'vue';
+import inputProps from '@/components/config/interface/props/components/input-props';
+import { useComponentStyle } from '@/components/config/style/components-style';
+import { usePropertyMonitor } from '@/components/config/interface/monitor/property-monitor';
+
+const props = defineProps(inputProps);
+const emit = defineEmits<{
+	input: [value: string];
+	blur: [event: FocusEvent];
+	focus: [event: FocusEvent];
+	'update:value': [value: any];
+	'update:placeholderConfig': [value: any];
+	'update:disabled': [value: any];
+}>();
+
+const { style: computedStyle, classes: computedClasses, sonStyle, toCSS, focus } = useComponentStyle('input', props);
+const getSonStyle = (element: string): Record<string, string | number> => {
+	return sonStyle.value[element as keyof typeof sonStyle.value] || {};
+};
+const inputPlaceholderStyle = computed(() => {
+	return Object.assign(getSonStyle('placeholder'), props.placeholderStyle);
+});
+const inputStyle = computed(() => getSonStyle('input'));
+const inputFontStyle = computed(() => {
+	const { width, height, margin, padding, ...fontStyles } = inputStyle.value;
+	return fontStyles;
+});
+const leftSlotStyle = computed(() => getSonStyle('leftSlot'));
+const rightSlotStyle = computed(() => getSonStyle('rightSlot'));
+const iconStyle = computed(() => getSonStyle('icon'));
+const iconFillStyle = computed(() => getSonStyle('iconFill'));
+const computedInputType = computed(() => {
+	const typeMap: Record<string, string> = {
+		text: 'text',
+		id: 'idcard',
+		password: 'text',
+		'safe-password': 'safe-password',
+		number: 'number',
+		digit: 'digit',
+		numeric: 'numeric',
+		decimal: 'decimal',
+		email: 'email',
+		phone: 'tel',
+		url: 'url',
+		textarea: 'text', // uni-app 的 input 不支持 textarea，需用单独的 textarea 组件，此处降级为 text
+		name: 'nickname',
+		search: 'search',
+		none: 'none'
+	};
+
+	return typeMap[props.type] || 'text';
+});
+const currentPlaceholderIndex = ref(0);
+const currentPlaceholder = computed(() => {
+	const placeholder = props.placeholder;
+	if (!placeholder || placeholder.length === 0) return '';
+	const index = currentPlaceholderIndex.value % placeholder.length;
+	return placeholder[index];
+});
 
-interface CombinationConfig {
-	isShow: Boolean;
-	position: String;
-	buttonText: String;
-}
+// 定时器管理
+let placeholderTimer: ReturnType<typeof setInterval> | null = null;
 
-/**
- * v-input 输入框
- * value 双向绑定值
- * size 文本框大小             	默认值:medium   可选值small小、medium中、large大
- * placeholder 提示语 字符串、数组
- * placeholderTimeNumber 更换提示词耗时 			默认:8秒
- * maxlength 最大输入值 			默认:null 		不限制
- * disabled 是否禁用           	默认:false   	可选值:true禁用 false不禁用
- * type 文本框类型             	默认:text    	可选值:text、password‌、number‌‌
- * showCounter 是否显示统计文字 	默认:false  		可选值:true显示统计文字 false不显示统计文字
- * borderModel 边框模式         	默认:all    		可选值:all普通边框 nont无边框模式 bottom底部边框模式 top上边框模式 left左边框模式 right右边框模式 ends左右两端边框模式 up-down上下边框模式
- * combinationConfig 组合组件
- * 		isShow:是否显示插槽 默认值:false  		可选值:true显示 false不显示
- * 		position:组合组件显示位置 默认值:default	可选值:right右边 left左边 ends两端
- * 		插槽right、left
- * 相关事件:focus、blur、confirm
- */
-const props = defineProps({
-	value: {
-		type: String,
-		default: '',
-		required: true
-	},
-	size: {
-		type: String,
-		default: 'medium',
-		validator: (value: string) => ['small', 'medium', 'large'].includes(value)
-	},
-	placeholder: {
-		type: [String, Array],
-		default: ''
-	},
-	placeholderTimeNumber: {
-		type: Number,
-		default: 8000
-	},
-	maxlength: {
-		type: Number,
-		default: null
-	},
-	disabled: {
-		type: Boolean,
-		default: false
-	},
-	type: {
-		type: String,
-		default: 'text',
-		validator: (value: string) => ['text', 'password', 'number'].includes(value)
-	},
-	showCounter: {
-		type: Boolean,
-		default: false
-	},
-	borderModel: {
-		type: String,
-		default: 'all'
-	},
-	combinationConfig: {
-		type: Object as () => CombinationConfig,
-		default: {
-			isShow: false,
-			position: 'default',
-			buttonText: ''
-		}
-	},
-	inputTextPosition: {
-		type: String,
-		default: 'left'
-	},
-	autoFocus: {
-	  type: Boolean,
-	  default: false
+const managePlaceholderRotation = () => {
+	// 清理现有定时器
+	if (placeholderTimer) {
+		clearInterval(placeholderTimer);
+		placeholderTimer = null;
 	}
-});
 
-const emit = defineEmits(['update:value', 'input', 'focus', 'blur', 'confirm']);
-
-const config = inject<any>('config');
-const inputValue = ref(props.value);
-const focused = ref(false);
-const currentLength = ref(props.value.length);
-const currentPlaceholder = ref('');
-const placeholderIndex = ref(0);
-let placeholderInterval: NodeJS.Timeout | null = null;
+	// 启动条件：未被禁用 且 配置有效
+	if (!props.disabled && props.placeholder && props.placeholder.length > 1 && props.placeholderTimeNumber > 0) {
+		placeholderTimer = setInterval(() => {
+			const placeholderArray = Array.isArray(props.placeholder) ? props.placeholder : [props.placeholder!];
+			currentPlaceholderIndex.value = (currentPlaceholderIndex.value + 1) % placeholderArray.length;
+		}, props.placeholderTimeNumber);
+	}
+};
 
-watch(
-	() => props.value,
-	(newVal) => {
-		inputValue.value = newVal;
-		currentLength.value = newVal.length;
+const inputValue = computed({
+	get: () => props.value,
+	set: (newValue) => {
+		emit('update:value', newValue);
 	}
-);
+});
 
-watch(
-	() => props.placeholder,
-	(newVal) => {
-		if (Array.isArray(newVal) && newVal.length > 0) {
-			currentPlaceholder.value = newVal[0];
-			placeholderIndex.value = 0;
-		} else if (typeof newVal === 'string') {
-			currentPlaceholder.value = newVal;
-		}
+usePropertyMonitor({ source: inputValue, propertyName: 'value' }, emit);
+usePropertyMonitor(
+	{
+		source: () => props.disabled,
+		propertyName: 'disabled',
+		// 状态变化时重新管理定时器
+		onChange: managePlaceholderRotation
 	},
-	{ immediate: true }
+	emit
+);
+usePropertyMonitor(
+	{
+		source: () => ({
+			placeholder: props.placeholder,
+			time: props.placeholderTimeNumber
+		}),
+		propertyName: 'placeholderConfig',
+		onChange: managePlaceholderRotation,
+		immediate: true
+	},
+	emit
 );
-
-onMounted(() => {
-	if (Array.isArray(props.placeholder) && props.placeholder.length > 1) {
-		startPlaceholderRotation();
-	}
-});
 
 onUnmounted(() => {
-	if (placeholderInterval) {
-		clearInterval(placeholderInterval);
-		placeholderInterval = null;
+	if (placeholderTimer) {
+		clearInterval(placeholderTimer);
+		placeholderTimer = null;
 	}
 });
-
-const startPlaceholderRotation = () => {
-	placeholderInterval = setInterval(() => {
-		placeholderIndex.value = (placeholderIndex.value + 1) % props.placeholder.length;
-		currentPlaceholder.value = props.placeholder[placeholderIndex.value];
-	}, props.placeholderTimeNumber);
-};
-
-const handleInput = (e: any) => {
-	const value = e.detail.value;
-	inputValue.value = value;
-	currentLength.value = value.length;
-	emit('update:value', value);
-	emit('input', value);
-};
-
-const handleFocus = (e: any) => {
-	focused.value = true;
-	emit('focus', e);
-};
-
-const handleBlur = (e: any) => {
-	focused.value = false;
-	emit('blur', e);
-};
-
-//回车搜索
-const handleConfirm = (e: any) => {
-	if (e.detail.value.trim() === '' && Array.isArray(props.placeholder) && currentPlaceholder.value) {
-		emit('confirm', currentPlaceholder.value, e);
-	} else {
-		emit('confirm', e.detail.value, e);
-	}
-};
 </script>
 
 <style lang="scss" scoped>
-.input-combination {
-	display: flex;
-
-	&--small {
-		height: 50rpx;
-	}
-
-	&--medium {
-		height: 60rpx;
-	}
-
-	&--large {
-		height: 70rpx;
-	}
-
-	.input-container {
-		width: 100%;
-		height: 100%;
-		position: relative;
-
-		&--default {
-			width: 100%;
-		}
-
-		&--right,
-		&--left {
-			width: 75%;
-		}
-		&--ends {
-			width: 50%;
-		}
-
-		.v-input {
-			width: 100%;
-			height: 100%;
-			min-height: 45rpx;
-			box-sizing: border-box;
-			background-color: #fff;
-			font-size: v-bind("config.fontSize.mediumText");
-			line-height: 1.5;
-			transition: border-color 0.3s;
-			text-align: v-bind('props.inputTextPosition');
-
-			::v-deep .uni-input-wrapper {
-				width: 92% !important;
-				margin-left: 3%;
-			}
-
-			&--border--all {
-				border: 1px solid v-bind('config.border.color');
-				border-radius: 6rpx;
-
-				&.input-focused {
-					border-color: v-bind('config.border.default');
-					box-shadow: v-bind("config.VInput.boxShadow");
-				}
-			}
-
-			&--border--none {
-				border: none;
-			}
-
-			&--border--bottom {
-				border-bottom: 1rpx solid v-bind('config.border.color');
-			}
-
-			&--border--top {
-				border-top: 1rpx solid v-bind('config.border.color');
-			}
-
-			&--border--left {
-				border-left: 1rpx solid v-bind('config.border.color');
-			}
-
-			&--border--right {
-				border-right: 1rpx solid v-bind('config.border.color');
-			}
-
-			&--border--ends {
-				border-left: 1rpx solid v-bind('config.border.color');
-				border-right: 1rpx solid v-bind('config.border.color');
-			}
-
-			&--border--up-down {
-				border-top: 1rpx solid v-bind('config.border.color');
-				border-bottom: 1rpx solid v-bind('config.border.color');
-			}
-
-			&--right--combination--right {
-				border-right: none;
-				border-top-right-radius: 0;
-				border-bottom-right-radius: 0;
-			}
-
-			&--right--combination--left {
-				border-left: none;
-				border-top-left-radius: 0;
-				border-bottom-left-radius: 0;
-			}
-
-			&--right--combination--ends {
-				border-right: none;
-				border-top-right-radius: 0;
-				border-bottom-right-radius: 0;
-
-				border-left: none;
-				border-top-left-radius: 0;
-				border-bottom-left-radius: 0;
-			}
-
-			&--disabled {
-				opacity: v-bind('config.opacity.disabled');
-				background-color: v-bind('config.backgroundColor.disabled');
-				color: v-bind('config.fontColor.text');
-			}
-		}
-		.input-counter {
-			position: absolute;
-			bottom: 8rpx;
-			right: 8rpx;
-			font-size: v-bind("config.fontSize.smallText");
-			color: v-bind('config.fontColor.text');
-		}
-	}
-
-	.combination {
-		width: 25%;
-		height: 100%;
-		button {
-			width: 100%;
-			height: 100%;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			background-color: v-bind('config.backgroundColor.default');
-			color: v-bind('config.fontColor.reversal');
-			font-size: v-bind("config.fontSize.mediumText");
-		}
-	}
-
-	.left-combination button {
-		border-bottom-right-radius: 0;
-		border-top-right-radius: 0;
-	}
-
-	.right-combination button {
-		border-bottom-left-radius: 0;
-		border-top-left-radius: 0;
-	}
+uni-input {
+	height: 100%;
+	min-height: auto;
+	line-height: normal;
 }
 </style>

package/components/utils/event-modifiers.ts

@@ -0,0 +1,139 @@
+import { ref, onUnmounted } from 'vue';
+
+// ========== 类型定义 ==========
+
+type TimerHandle = ReturnType<typeof setTimeout>;
+type IntervalHandle = ReturnType<typeof setInterval>;
+
+export interface DebounceOptions {
+	/** 防抖等待时间（毫秒） */
+	wait: number;
+	/** 是否立即执行第一次 */
+	immediate?: boolean;
+}
+
+export interface CooldownOptions {
+	/** 总冷却时间（毫秒） */
+	stabilizationTime: number;
+	/** 每次倒计时减少的值 */
+	degressionTime: number;
+	/** 倒计时更新间隔 */
+	intervalUpdateTime: number;
+	/** 是否在冷却期间点击时重置计时器 */
+	resetOnClick?: boolean;
+	/** 倒计时回调 */
+	onCountdown?: (payload: { remaining: number; total: number }) => void;
+	/** 冷却完成回调 */
+	onComplete?: () => void;
+}
+
+// ========== 防抖 Hook ==========
+
+export function useDebounce<T extends (...args: any[]) => any>(callback: T, options: DebounceOptions) {
+	const timer = ref<TimerHandle | null>(null);
+	const isPending = ref(false);
+
+	function debounce(...args: Parameters<T>) {
+		if (timer.value) clearTimeout(timer.value);
+
+		const shouldCallNow = options.immediate && !isPending.value;
+
+		isPending.value = true;
+		timer.value = setTimeout(() => {
+			if (!options.immediate) {
+				callback(...args);
+			}
+			isPending.value = false;
+		}, options.wait);
+
+		if (shouldCallNow) {
+			callback(...args);
+		}
+	}
+
+	function cancel() {
+		if (timer.value) {
+			clearTimeout(timer.value);
+			timer.value = null;
+		}
+		isPending.value = false;
+	}
+
+	onUnmounted(() => {
+		cancel();
+	});
+
+	return {
+		debounce,
+		cancel,
+		isPending
+	};
+}
+
+// ========== 冷却 Hook ==========
+
+export function useCooldown(options: CooldownOptions) {
+	const countdownTimer = ref<IntervalHandle | null>(null);
+	const cooldownTimer = ref<TimerHandle | null>(null);
+	const countdown = ref(options.stabilizationTime);
+	const isCountingDown = ref(false);
+
+	function stop() {
+		if (countdownTimer.value) {
+			clearInterval(countdownTimer.value);
+			countdownTimer.value = null;
+		}
+		if (cooldownTimer.value) {
+			clearTimeout(cooldownTimer.value);
+			cooldownTimer.value = null;
+		}
+		isCountingDown.value = false;
+	}
+
+	function start() {
+		// 如果已在冷却中且允许重置，则重新开始
+		if (isCountingDown.value && options.resetOnClick) {
+			stop();
+		} else if (isCountingDown.value) {
+			return; // 冷却中且不允许重置，直接返回
+		}
+
+		isCountingDown.value = true;
+		countdown.value = options.stabilizationTime;
+
+		// 立即触发一次
+		options.onCountdown?.({
+			remaining: countdown.value,
+			total: options.stabilizationTime
+		});
+
+		// 倒计时 interval
+		countdownTimer.value = setInterval(() => {
+			countdown.value -= options.degressionTime;
+
+			const remaining = Math.max(0, countdown.value);
+			options.onCountdown?.({ remaining, total: options.stabilizationTime });
+
+			if (countdown.value <= 0) {
+				stop();
+				options.onComplete?.();
+			}
+		}, options.intervalUpdateTime);
+
+		// 冷却结束定时器
+		cooldownTimer.value = setTimeout(() => {
+			isCountingDown.value = false;
+		}, options.stabilizationTime);
+	}
+
+	onUnmounted(() => {
+		stop();
+	});
+
+	return {
+		countdown,
+		isCountingDown,
+		start,
+		stop
+	};
+}