v-uni-app-ui 1.0.0 → 1.0.2

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

@@ -0,0 +1,352 @@
+<template>
+	<view :class="['input-combination', `input-combination--${size}`]">
+		<view :class="['combination', 'left-combination']" v-if="combinationConfig.isShow && combinationConfig.position === 'left' || combinationConfig.position === 'ends'">
+			<slot name="left">
+				<button>{{ combinationConfig.buttonText }}</button>
+			</slot>
+		</view>
+		<view :class="['input-container', `input-container--${combinationConfig.position}`]">
+			<input
+				:value="inputValue"
+				:class="[
+					'v-input',
+					{ 'v-input--disabled': disabled },
+					{ 'input-focused': focused },
+					`v-input--border--${borderModel}`,
+					`v-input--right--combination--${combinationConfig.position}`
+				]"
+				:placeholder="currentPlaceholder"
+				:maxlength="maxlength || undefined"
+				:disabled="disabled"
+				:type="type"
+				:focus="autoFocus"
+				@input="handleInput"
+				@focus="handleFocus"
+				@blur="handleBlur"
+				@confirm="handleConfirm"
+			/>
+			<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>
+	</view>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, onMounted, onUnmounted, inject } from 'vue';
+
+interface CombinationConfig {
+	isShow: Boolean;
+	position: String;
+	buttonText: String;
+}
+
+/**
+ * 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 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;
+
+watch(
+	() => props.value,
+	(newVal) => {
+		inputValue.value = newVal;
+		currentLength.value = newVal.length;
+	}
+);
+
+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;
+		}
+	},
+	{ immediate: true }
+);
+
+onMounted(() => {
+	if (Array.isArray(props.placeholder) && props.placeholder.length > 1) {
+		startPlaceholderRotation();
+	}
+});
+
+onUnmounted(() => {
+	if (placeholderInterval) {
+		clearInterval(placeholderInterval);
+		placeholderInterval = 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;
+	}
+}
+</style>

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

@@ -0,0 +1,146 @@
+<template>
+	<div class="v-input-code">
+		<div class="input-box" :style="{ width: `${inputWidth * length + (length - 1) * 20}px`, height: `${inputHeight}px` }">
+			<input
+				v-for="(item, index) in length"
+				:key="index"
+				type="text"
+				:class="['input-item', { 'input-focus': focusIndex === index }]"
+				:maxlength="1"
+				:placeholder="placeholder"
+				@input="onInput(index, $event)"
+				@focus="onFocus(index)"
+				@blur="onBlur(index)"
+				@keydown="onkeydown(index, $event)"
+				:focus="inputFocus[index]"
+				:blur="inputBlur[index]"
+			/>
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch, onMounted, inject } from 'vue';
+
+const props = defineProps({
+	value: {
+		type: String,
+		default: ''
+	},
+	length: {
+		type: Number,
+		default: 4
+	},
+	inputWidth: {
+		type: Number,
+		default: 30
+	},
+	inputHeight: {
+		type: Number,
+		default: 50
+	},
+	focus: {
+		type: Boolean,
+		default: false
+	},
+	placeholder: {
+		type: String,
+		default: ''
+	}
+});
+
+const emit = defineEmits(['update:value', 'complete']);
+
+const config = inject<any>('config');
+const focusIndex = ref<number | null>(null);
+const inputFocus = ref([]);
+const inputBlur = ref([]);
+
+onMounted(() => {
+	inputFocus.value.length = props.length;
+	inputBlur.value.length = props.length;
+});
+
+const onInput = (index: number, event: any) => {
+	const value = event.detail.value;
+	if (value) {
+		if (index < props.length - 1) {
+			console.log(index + 1);
+			inputFocus.value[index + 1] = true;
+		}
+		updateModelValue(value, index);
+	} else {
+		updateModelValue('', index);
+	}
+};
+const onkeydown = (index: number, event: any) => {
+	if (event.code === 'Backspace') {
+		inputFocus.value[index] = false;
+		// inputFocus.value[index - 2] = false;
+		// inputFocus.value[index - 2] = true;
+	}
+};
+
+const onFocus = (index: number) => {
+	focusIndex.value = index;
+};
+
+const onBlur = (index: number) => {
+	if (focusIndex.value === index) {
+		focusIndex.value = null;
+	}
+};
+
+const updateModelValue = (value: string, index: number) => {
+	const newValue = props.value.split('');
+	newValue[index] = value;
+	const joinedValue = newValue.join('');
+	emit('update:value', joinedValue);
+	if (joinedValue.length === props.length) {
+		emit('complete');
+	}
+};
+
+watch(
+	() => props.focus,
+	(newValue) => {
+		if (newValue) {
+			inputFocus.value[0].focus();
+		}
+	}
+);
+</script>
+
+<style lang="scss" scoped>
+.v-input-code {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.input-box {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.input-item {
+	width: v-bind("inputWidth + 'rpx'");
+	height: v-bind("inputHeight + 'rpx'");
+	margin: 0 15rpx;
+	padding: 0 15rpx;
+	text-align: center;
+	font-size: 16px;
+	border-bottom: 4rpx solid v-bind("config.border.color");
+	outline: none;
+	transition: all 0.3s ease;
+}
+
+.input-item:focus {
+	border-bottom: 4rpx solid v-bind("config.border.default");
+}
+
+.input-focus {
+	border-bottom: 4rpx solid v-bind("config.border.default");
+}
+</style>

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

@@ -0,0 +1,206 @@
+<template>
+	<view v-if="currentShow" :class="['v-loading', { 'v-loading--full-screen': fullScreen }]" :style="loadingStyle">
+		<slot name="spinner">
+			<view class="v-loading-spinner">
+				<view class="spinner-outer"></view>
+				<view class="spinner-inner"></view>
+			</view>
+		</slot>
+		<text v-if="text" class="v-loading-text">{{ text }}</text>
+	</view>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch,onMounted,inject } from 'vue';
+
+const props = defineProps({
+	fullScreen: {
+		type: Boolean,
+		default: false
+	},
+	text: {
+		type: String,
+		default: '',
+		required: true
+	},
+	size: {
+		type: String,
+		default: 'medium',
+		validator: (value: any) => {
+			return ['small', 'medium', 'large'].includes(value);
+		}
+	},
+	color: {
+		type: String,
+		default: '#287afa'
+	},
+	textColor: {
+		type: String,
+		default: '#666'
+	},
+	duration: {
+		type: Number,
+		default: 0
+	},
+	show: {
+		type: Boolean,
+		default: false
+	}
+});
+
+const emit = defineEmits(['update:show']);
+
+const config = inject<any>('config');
+const currentShow = ref(props.show);
+let timer: NodeJS.Timeout | null = null;
+
+watch(
+	() => props.show,
+	(newValue) => {
+		currentShow.value = newValue;
+		if (newValue) {
+			if (timer) {
+				clearTimeout(timer);
+			}
+			if (props.duration > 0) {
+				timer = setTimeout(() => {
+					currentShow.value = false;
+					emit('update:show', false);
+				}, props.duration);
+			}
+		}
+	}
+);
+
+watch(
+	() => props.duration,
+	(newValue) => {
+		if (currentShow.value && newValue > 0) {
+			if (timer) {
+				clearTimeout(timer);
+			}
+			timer = setTimeout(() => {
+				currentShow.value = false;
+				emit('update:show', false);
+			}, newValue);
+		}
+	}
+);
+
+onMounted(()=>{
+	if (currentShow.value &&  props.duration > 0) {
+		if (timer) {
+			clearTimeout(timer);
+		}
+		timer = setTimeout(() => {
+			currentShow.value = false;
+			emit('update:show', false);
+		},  props.duration);
+	}
+})
+
+const loadingStyle = computed(() => {
+	return {
+		'--loading-color': props.color,
+		'--text-color': props.textColor
+	};
+});
+</script>
+
+<style lang="scss" scoped>
+.v-loading {
+	min-height: 150rpx;
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	padding: 16rpx;
+	z-index: 1000;
+
+	&--full-screen {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background-color: rgba(255, 255, 255, 0.8);
+	}
+
+	.v-loading-spinner {
+		width: 80rpx;
+		height: 80rpx;
+		position: relative;
+		margin-bottom: 12rpx;
+	}
+
+	.spinner-outer {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		border: 6rpx solid var(--loading-color);
+		border-radius: 50%;
+		border-top-color: transparent;
+		animation: spin 1s linear infinite;
+	}
+
+	.spinner-inner {
+		position: absolute;
+		top: 20%;
+		left: 20%;
+		transform: translate(-50%, -50%);
+		width: 60%;
+		height: 60%;
+		border: 6rpx solid var(--loading-color);
+		border-radius: 50%;
+		border-top-color: transparent;
+		animation: spin 0.6s linear infinite reverse;
+	}
+
+	.v-loading-text {
+		color: var(--text-color);
+		font-size: v-bind("config.fontSize.mediumText");
+	}
+
+	@keyframes spin {
+		0% {
+			transform: rotate(0deg);
+		}
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+
+	&--small .v-loading-spinner {
+		width: 60rpx;
+		height: 60rpx;
+	}
+
+	&--small .spinner-outer {
+		border-width: 4rpx;
+	}
+
+	&--small .spinner-inner {
+		width: 70%;
+		height: 70%;
+		border-width: 4rpx;
+	}
+
+	&--large .v-loading-spinner {
+		width: 100rpx;
+		height: 100rpx;
+	}
+
+	&--large .spinner-outer {
+		border-width: 8rpx;
+	}
+
+	&--large .spinner-inner {
+		width: 50%;
+		height: 50%;
+		border-width: 8rpx;
+	}
+}
+</style>