v-uni-app-ui 1.0.2 → 1.0.6

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

@@ -1,146 +0,0 @@
-<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

@@ -1,206 +0,0 @@
-<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>

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

@@ -1,222 +0,0 @@
-<template>
-	<view
-		ref="rootRef"
-		class="v-menu-container"
-		:class="[`v-menu-container--position--${menuPosition}`, { 'v-slide-x': slideAxis === 'x' }, { 'v-slide-y': slideAxis === 'y' }]"
-		@touchstart="onTouchStart"
-		@touchmove="onTouchMove"
-		@touchend="onTouchEnd"
-		@mousedown="onMouseDown"
-		@mousemove="onMouseMove"
-		@mouseup="onMouseUp"
-	>
-		<!-- 菜单栏 -->
-		<view class="v-menu">
-			<view v-for="item in menuItems" :key="item.id" :class="['menu-item', { active: activeMenuId === item.id }]" @click="handleMenuItemClick(item.id, item)">
-				{{ item.title }}
-			</view>
-		</view>
-
-		<!-- 内容区 -->
-		<view class="menu-content">
-			<template v-for="(item, index) in menuItems" :key="item.id">
-				<view v-show="activeMenuId === item.id">
-					<slot :name="`content-${index}`" :item="item">
-					</slot>
-				</view>
-			</template>
-		</view>
-	</view>
-</template>
-
-<script lang="ts" setup>
-import { ref, watch, inject, computed, getCurrentInstance, nextTick,provide } from 'vue';
-
-
-interface MenuItem {
-	id: string;
-	title: string;
-}
-
-/* ========= props ========= */
-const props = defineProps({
-	menuPosition: {
-		type: String,
-		default: 'left',
-		validator: (v: string) => ['left', 'right'].includes(v)
-	},
-	menuItems: {
-		type: Array as () => MenuItem[],
-		required: true
-	},
-	value: {
-		type: String,
-		default: ''
-	},
-	isSlide: {
-		// 是否启用滑动
-		type: Boolean,
-		default: false
-	},
-	slideAxis: {
-		// 滑动方向
-		type: String as () => 'x' | 'y',
-		default: 'x'
-	}
-});
-
-const emit = defineEmits(['update:value', 'select']);
-
-const config = inject<any>('config');
-const activeMenuId = ref(props.value || props.menuItems[0]?.id || '');
-
-/* ========= 滑动核心 ========= */
-const rootRef = ref<HTMLElement>();
-const startX = ref(0);
-const startY = ref(0);
-const isTracking = ref(false);
-const SLIDE_THRESHOLD = 50;
-
-const currentIndex = computed(() => props.menuItems.findIndex((item) => item.id === activeMenuId.value));
-
-const next = () => {
-	const len = props.menuItems.length;
-	const idx = (currentIndex.value + 1 + len) % len;
-	handleMenuItemClick(props.menuItems[idx].id, props.menuItems[idx]);
-};
-
-const prev = () => {
-	const len = props.menuItems.length;
-	const idx = (currentIndex.value - 1 + len) % len;
-	handleMenuItemClick(props.menuItems[idx].id, props.menuItems[idx]);
-};
-
-const handleMenuItemClick = (id: string, row: MenuItem) => {
-	activeMenuId.value = id;
-	emit('update:value', id);
-	emit('select', id, row);
-};
-
-/* 统一手势处理 */
-const onStart = (x: number, y: number) => {
-	if (!props.isSlide) return;
-	startX.value = x;
-	startY.value = y;
-	isTracking.value = true;
-};
-
-const onMove = (x: number, y: number) => {
-	if (!isTracking.value) return;
-	const dx = x - startX.value;
-	const dy = y - startY.value;
-	const dir = props.slideAxis === 'x' ? dx : dy;
-	const orth = props.slideAxis === 'x' ? dy : dx;
-	if (Math.abs(orth) > Math.abs(dir)) return; // 优先同轴
-};
-
-const onEnd = (x: number, y: number) => {
-	if (!isTracking.value) return;
-	isTracking.value = false;
-	const delta = props.slideAxis === 'x' ? x - startX.value : y - startY.value;
-	if (delta > SLIDE_THRESHOLD) prev();
-	else if (delta < -SLIDE_THRESHOLD) next();
-};
-
-/* Touch 事件 */
-const onTouchStart = (e: TouchEvent) => onStart(e.touches[0].clientX, e.touches[0].clientY);
-
-const onTouchMove = (e: TouchEvent) => {
-	if (!props.isSlide) return;
-	onMove(e.touches[0].clientX, e.touches[0].clientY);
-	e.preventDefault?.();
-};
-
-const onTouchEnd = (e: TouchEvent) => onEnd(e.changedTouches[0].clientX, e.changedTouches[0].clientY);
-
-/* Mouse 事件（PC H5） */
-const onMouseDown = (e: MouseEvent) => onStart(e.clientX, e.clientY);
-const onMouseMove = (e: MouseEvent) => {
-	if (!isTracking.value) return;
-	onMove(e.clientX, e.clientY);
-	e.preventDefault?.();
-};
-const onMouseUp = (e: MouseEvent) => onEnd(e.clientX, e.clientY);
-
-/* 监听 v-model 外部更新 */
-watch(
-	() => props.value,
-	(newVal) => {
-		if (newVal && newVal !== activeMenuId.value) {
-			activeMenuId.value = newVal;
-		}
-	}
-);
-
-/* H5：禁止横向/纵向滚动冲突 */
-const isH5 = typeof plus === 'undefined';
-if (isH5) {
-	nextTick(() => {
-		const el = (getCurrentInstance()?.proxy as any)?.$el as HTMLElement;
-		if (el) {
-			el.style.overscrollBehaviorX = props.slideAxis === 'x' ? 'contain' : 'auto';
-			el.style.overscrollBehaviorY = props.slideAxis === 'y' ? 'contain' : 'auto';
-		}
-	});
-}
-</script>
-
-<style lang="scss" scoped>
-.v-menu-container {
-	display: flex;
-	width: 100%;
-	height: 100%;
-	touch-action: pan-y; /* 允许垂直滚动，水平自己接管 */
-
-
-
-	&--position--right {
-		flex-direction: row-reverse;
-	}
-}
-
-.v-menu {
-	display: flex;
-	flex-direction: column;
-	background-color: v-bind('config.VMenu.backgroundColor');
-	border-right: 1rpx solid v-bind('config.border.color');
-	width: 200rpx;
-	height: 100%;
-	overflow-y: auto;
-	transition: all 0.3s ease;
-	border-radius: 6rpx 0 0 6rpx;
-}
-
-.menu-item {
-	padding: 12rpx 16rpx;
-	cursor: pointer;
-	color: v-bind('config.fontColor.subTitle');
-	transition: all 0.2s ease;
-	border-bottom: 1rpx solid transparent;
-
-	&:hover {
-		background-color: v-bind('config.VMenu.highlightBackgroundColor');
-	}
-
-	&.active {
-		background-color: v-bind('config.VMenu.highlightBackgroundColor');
-		color: v-bind('config.fontColor.mainText');
-		font-weight: bold;
-		border-left: 6rpx solid v-bind('config.border.color');
-	}
-}
-
-.menu-content {
-	flex: 1;
-	padding: 16rpx;
-	background-color: v-bind('config.VMenu.reversal');
-	min-height: 600rpx;
-	overflow: auto;
-	box-shadow: -2rpx 0 5px rgba(0, 0, 0, 0.05);
-}
-
-</style>