v-uni-app-ui 1.0.2 → 1.0.6

package/components/model/native/v-pull-up-refresh/v-pull-up-refresh.vue

@@ -1,157 +0,0 @@
-<template>
-	<view class="v-pull-up-refresh" :style="{ height: containerHeight }">
-		<view class="pull-up-refresh-header" v-if="pullingDown || refreshing">
-			<slot name="pull-up-refresh" :pullingDown="pullingDown" :refreshing="refreshing">
-				<view class="pull-up-refresh-header-icon">
-					<view v-if="!refreshing" class="arrow-down"></view>
-					<v-min-loading v-model:value="refreshing" type="info"></v-min-loading>
-				</view>
-				<text>{{ pullingDown ? '释放刷新' : refreshing ? '正在刷新...' : '下拉刷新' }}</text>
-			</slot>
-		</view>
-		<view class="pull-up-refresh-content" :style="{ transform: `translateY(${translateY}px)` }">
-			<slot></slot>
-		</view>
-	</view>
-</template>
-
-<script lang="ts" setup>
-import { ref, onMounted, onUnmounted, nextTick, inject } from 'vue';
-
-/**
- * v-pull-up-refresh	上拉刷新
- *
- */
-const props = defineProps({
-	refreshHeight: {
-		type: Number,
-		default: 60
-	}
-});
-
-const emits = defineEmits(['refresh']);
-
-const config = inject<any>('config');
-const containerHeight = ref('100%');
-const translateY = ref(0);
-const pullingDown = ref(false);
-const refreshing = ref(false);
-
-let startY = 0;
-let moveY = 0;
-let moveDistance = 0;
-
-const handleTouchStart = (event: TouchEvent) => {
-	startY = event.touches[0].pageY;
-};
-
-const handleTouchMove = (event: TouchEvent) => {
-	if (refreshing.value) return;
-
-	moveY = event.touches[0].pageY;
-	moveDistance = moveY - startY;
-
-	if (moveDistance > 0) {
-		pullingDown.value = true;
-		translateY.value = moveDistance;
-	}
-};
-
-const handleTouchEnd = () => {
-	if (refreshing.value) return;
-
-	if (pullingDown.value && moveDistance > props.refreshHeight) {
-		startRefresh();
-	} else {
-		translateY.value = 0;
-		pullingDown.value = false;
-	}
-};
-
-const startRefresh = () => {
-	refreshing.value = true;
-	pullingDown.value = false;
-	translateY.value = props.refreshHeight;
-
-	emits('refresh', () => {
-		endRefresh();
-	});
-};
-
-const endRefresh = () => {
-	refreshing.value = false;
-	translateY.value = 0;
-	nextTick(() => {
-		translateY.value = 0;
-	});
-};
-
-onMounted(() => {
-	const container = document.querySelector('.v-pull-up-refresh');
-	if (container) {
-		container.addEventListener('touchstart', handleTouchStart);
-		container.addEventListener('touchmove', handleTouchMove);
-		container.addEventListener('touchend', handleTouchEnd);
-	}
-});
-
-onUnmounted(() => {
-	const container = document.querySelector('.v-pull-up-refresh');
-	if (container) {
-		container.removeEventListener('touchstart', handleTouchStart);
-		container.removeEventListener('touchmove', handleTouchMove);
-		container.removeEventListener('touchend', handleTouchEnd);
-	}
-});
-</script>
-
-<style lang="scss" scoped>
-.v-pull-up-refresh {
-	position: relative;
-	overflow: hidden;
-}
-
-.pull-up-refresh-content {
-	transition: transform 0.3s ease;
-}
-
-.pull-up-refresh-header {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	height: 120rpx;
-	background-color: v-bind("config.backgroundColor.reversal");
-	color:  v-bind("config.fontColor.mainText");
-	font-size: 14px;
-}
-
-.pull-up-refresh-header-icon {
-	margin-right: 16rpx;
-}
-
-.arrow-down {
-	width: 0;
-	height: 0;
-	border: 5rpx solid transparent;
-	border-bottom-color: v-bind("config.fontColor.mainText");
-	transition: transform 0.3s ease;
-}
-
-.spinner {
-	width: 20px;
-	height: 20px;
-	border: 2px solid v-bind("config.border.color");
-	border-top-color: transparent;
-	border-radius: 50%;
-	animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-	from {
-		transform: rotate(0deg);
-	}
-	to {
-		transform: rotate(360deg);
-	}
-}
-</style>

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

@@ -1,138 +0,0 @@
-<template>
-	<label :class="['v-radio', { 'v-radio--disabled': isDisabled, 'v-radio--checked': isChecked }]" @click="handleChange">
-		<span class="v-radio-input">
-			<span v-if="isChecked" class="v-radio-inner"></span>
-		</span>
-		<span class="v-radio-label">
-			<slot>{{ item.label }}</slot>
-		</span>
-	</label>
-</template>
-
-<script setup lang="ts">
-import { inject, computed } from 'vue';
-
-interface RadioItem {
-	label: string;
-	value: string | number;
-}
-
-const props = defineProps({
-	value: {
-		type: [String, Number],
-		default: ''
-	},
-	item: {
-		type: Object as () => RadioItem,
-		required: true
-	},
-	disabled: {
-		type: Boolean,
-		default: false
-	}
-});
-
-const radioGroup = inject('radioGroup', null);
-const isDisabled = computed(() => {
-	return radioGroup ? radioGroup.disabled.value || props.disabled : props.disabled;
-});
-
-const isChecked = computed(() => {
-	return radioGroup ? radioGroup.value.value === props.item.value : props.value === props.item.value;
-});
-
-// 获取 radioGroup 的默认值
-const radioGroupDefaultValue = computed(() => {
-	return radioGroup ? (radioGroup as any).defaultValue : '';
-});
-
-const handleChange = () => {
-	if (isDisabled.value) return;
-
-	if (radioGroup) {
-		// 如果当前选中，则取消选择，设置为默认值
-		if (isChecked.value) {
-			radioGroup.emitUpdate(radioGroupDefaultValue.value);
-		} else {
-			radioGroup.emitUpdate(props.item.value);
-		}
-	} else {
-		// 如果是单独使用，直接更新值
-		const newValue = isChecked.value ? '' : props.item.value;
-		emit('update:value', newValue);
-		emit('change', newValue);
-	}
-};
-
-const emit = defineEmits(['update:value', 'change']);
-</script>
-
-<style lang="scss" scoped>
-.v-radio {
-	display: flex;
-	align-items: center;
-	cursor: pointer;
-	font-size: 14px;
-	color: #606266;
-	transition: all 0.3s;
-	margin-right: 16px;
-
-	&:last-child {
-		margin-right: 0;
-	}
-
-	&--disabled {
-		color: #c0c4cc;
-		cursor: not-allowed;
-
-		.v-radio-input {
-			background-color: #f5f7fa;
-			border-color: #e4e7ed;
-			cursor: not-allowed;
-		}
-	}
-
-	&--checked {
-		.v-radio-input {
-			border-color: #287afa !important;
-
-			.v-radio-inner {
-				background-color: #287afa !important;
-			}
-		}
-	}
-
-	.v-radio-input {
-		display: inline-block;
-		width: 28rpx;
-		height: 28rpx;
-		border: 2px solid #dcdfe6;
-		border-radius: 50%;
-		background-color: transparent;
-		position: relative;
-		margin-right: 8px;
-		cursor: pointer;
-		transition: all 0.3s;
-		vertical-align: middle;
-		text-align: center;
-
-		.v-radio-inner {
-			display: inline-block;
-			width: 16rpx;
-			height: 16rpx;
-			border-radius: 50%;
-			background-color: #fff;
-			position: absolute;
-			left: 50%;
-			top: 50%;
-			transform: translate(-50%, -50%) scale(1);
-			transition: all 0.3s;
-		}
-	}
-
-	.v-radio-label {
-		display: inline-block;
-		font-size: 22rpx;
-	}
-}
-</style>

package/components/model/native/v-scroll-list/v-scroll-list.vue

@@ -1,169 +0,0 @@
-<template>
-	<view class="v-scroll-list-container">
-		<scroll-view
-			class="v-scroll-list"
-			scroll-y
-			:scroll-into-view="activeId"
-			:scroll-with-animation="true"
-			:show-scrollbar="false"
-			:style="{
-				height: scrollHeight + 'rpx'
-			}"
-			@scroll="handleScroll"
-		>
-			<view
-				v-for="(item, index) in options"
-				:key="index"
-				:id="`item_${item.value}`"
-				class="v-scroll-list-item"
-				:class="{ 'v-scroll-list-item-active': item.value === selectedValue }"
-				:style="{ height: itemHeight + 'rpx' }"
-			>
-				{{ item.label }}
-			</view>
-		</scroll-view>
-		<view class="v-scroll-list-mask" :style="maskStyle"></view>
-	</view>
-</template>
-
-<script lang="ts" setup>
-import { ref, computed, watch, nextTick, inject } from 'vue';
-
-interface ScrollListItem {
-	value: any;
-	label: string;
-}
-
-/**
- * v-scroll-list
- * @description 滚动选择列表
- * @property {Array} options 列表数据
- * @property {String|Number} value 当前选中值
- * @property {Number} scrollHeight 滚动区域高度
- * @property {Number} itemHeight 列表项高度
- * @event {Function} update:value 选中值变化时触发
- * @example
- * <v-scroll-list :options="options" v-model="value" :scroll-height="500" :item-height="80"></v-scroll-list>
- */
-const props = defineProps({
-	options: {
-		type: Array as () => ScrollListItem[],
-		required: true
-	},
-	value: {
-		type: [String, Number],
-		default: ''
-	},
-	scrollHeight: {
-		type: Number,
-		default: 500
-	},
-	itemHeight: {
-		type: Number,
-		default: 80
-	}
-});
-
-const emit = defineEmits(['update:value']);
-
-const config = inject<any>('config');
-const selectedValue = ref(props.value);
-const activeId = ref('');
-const itemPositions = ref<number[]>([]);
-let currentIndex = 0;
-let currentTop = 0;
-let isProgrammaticScroll = ref(true);
-
-const maskHeight = computed(() => (props.scrollHeight - props.itemHeight) / 2);
-const maskStyle = computed(() => ({
-	top: `0`,
-	height: `${props.itemHeight}rpx`
-}));
-
-const initPositions = async () => {
-	await nextTick();
-	activeId.value = `item_${selectedValue.value}`;
-	currentIndex = props.options.findIndex((item) => item.value === selectedValue.value) - 1;
-};
-
-const handleScroll = (event: any) => {
-	if (isProgrammaticScroll.value) {
-		const operation = event.detail.deltaY;
-
-		if (operation < 0) {
-			currentIndex++;
-			if (operation < -5) {
-				currentIndex += Math.trunc(Math.abs(operation) % 3);
-			}
-		} else {
-			currentIndex--;
-			if (operation > 5) {
-				currentIndex -= Math.trunc(Math.abs(operation) % 3);
-			}
-		}
-
-		if (currentIndex < 0) {
-			currentIndex = props.options.length - 1;
-		} else if (currentIndex >= props.options.length) {
-			currentIndex = 0;
-		}
-
-		selectedValue.value = props.options[currentIndex].value;
-		activeId.value = `item_${selectedValue.value}`;
-		emit('update:value', selectedValue.value);
-		isProgrammaticScroll.value = false;
-	} else {
-		isProgrammaticScroll.value = true;
-	}
-};
-
-// 选中项变化时自动居中
-watch(selectedValue, (newVal) => {
-	if (isProgrammaticScroll.value) {
-		activeId.value = `item_${currentIndex}`;
-		isProgrammaticScroll.value = false;
-	}
-});
-
-watch(() => props.options, initPositions, { deep: true });
-
-initPositions();
-</script>
-
-<style lang="scss" scoped>
-.v-scroll-list-container {
-	position: relative;
-	height: 100%;
-}
-
-.v-scroll-list {
-	box-sizing: content-box;
-}
-
-.v-scroll-list-item {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	font-size: v-bind('config.fontSize.mediumText');
-	color: v-bind('config.fontColor.mainText');
-	transition: all 0.2s ease;
-}
-.v-scroll-list-item:last-child {
-	padding-bottom: 300rpx;
-}
-.v-scroll-list-item-active {
-	color: v-bind('config.fontColor.default');
-	font-weight: bold;
-	transform: scale(1.1);
-}
-
-.v-scroll-list-mask {
-	position: absolute;
-	left: 0;
-	right: 0;
-	pointer-events: none;
-	background: rgba(200, 200, 200, 0.1);
-	border-top: 1rpx solid v-bind('config.border.color');
-	border-bottom: 1rpx solid v-bind('config.border.color');
-}
-</style>

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

@@ -1,253 +0,0 @@
-<template>
-	<view class="v-steps" :class="[direction]">
-		<view v-for="(step, index) in steps" :key="index" class="step-item" :class="[getStepStatus(index), { 'last-item': index === steps.length - 1 }]">
-			<view class="step-icon-container">
-				<view class="step-icon">
-					<text v-if="index < active" class="icon-check">✓</text>
-					<text v-else-if="index === active" class="step-number">{{ index + 1 }}</text>
-					<text v-else class="step-number">{{ index + 1 }}</text>
-				</view>
-				<view v-if="index !== steps.length - 1" class="step-line"></view>
-			</view>
-			<view class="step-content">
-				<text class="step-title">{{ step.title }}</text>
-				<text v-if="step.desc" class="step-desc">{{ step.desc }}</text>
-			</view>
-		</view>
-	</view>
-</template>
-
-<script lang="ts" setup>
-import { computed, inject } from 'vue';
-
-interface Step {
-	title: string;
-	desc?: string;
-}
-
-const props = defineProps({
-	steps: {
-		type: Array as () => Step[],
-		required: true
-	},
-	active: {
-		type: Number,
-		default: 0,
-		validator: (value: number) => value >= 0
-	},
-	direction: {
-		type: String,
-		default: 'horizontal',
-		validator: (value: string) => ['horizontal', 'vertical'].includes(value)
-	}
-});
-const config = inject<any>('config');
-const getStepStatus = (index: number) => {
-	if (index < props.active) return 'finished';
-	if (index === props.active) return 'active';
-	return 'waiting';
-};
-</script>
-
-<style lang="scss" scoped>
-$primary-color: #287afa;
-$success-color: #31d283;
-$warning-color: #ff9628;
-$info-color: #969696;
-$text-primary: #333333;
-$text-regular: #666666;
-$text-placeholder: #c0c4cc;
-$border-color: #969696;
-$bg-color: #f5f7fa;
-
-.v-steps {
-	display: flex;
-	width: 100%;
-	box-sizing: border-box;
-
-	&.horizontal {
-		flex-direction: row;
-		justify-content: space-between;
-		padding: 16rpx 0;
-
-		.step-item {
-			flex: 1;
-			display: flex;
-			flex-direction: column;
-			align-items: center;
-			position: relative;
-
-			.step-icon-container {
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				position: relative;
-				width: 100%;
-
-				.step-line {
-					position: absolute;
-					left: 72.5%;
-					top: 50%;
-					transform: translateY(-50%);
-					width: calc(100% - 80rpx);
-					height: 4rpx;
-					background-color: v-bind('config.VSteps.lineBackgroundColor');
-					z-index: 1;
-				}
-			}
-
-			.step-content {
-				text-align: center;
-				margin-top: 16rpx;
-				padding: 0 20rpx;
-			}
-
-			&.last-item .step-line {
-				display: none;
-			}
-		}
-	}
-
-	&.vertical {
-		flex-direction: column;
-		padding: 16rpx 0;
-
-		.step-item {
-			display: flex;
-			position: relative;
-			padding-bottom: 40rpx;
-
-			&:last-child {
-				padding-bottom: 0;
-			}
-
-			.step-icon-container {
-				display: flex;
-				flex-direction: column;
-				align-items: center;
-				margin-right: 24rpx;
-
-				.step-line {
-					flex: 1;
-					width: 4rpx;
-					background-color: v-bind('config.VSteps.lineBackgroundColor');
-					margin-top: 16rpx;
-				}
-			}
-
-			.step-content {
-				flex: 1;
-				padding-bottom: 40rpx;
-			}
-
-			&.last-item .step-line {
-				display: none;
-			}
-		}
-	}
-
-	.step-icon {
-		width: 60rpx;
-		height: 60rpx;
-		border-radius: 50%;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		position: relative;
-		z-index: 2;
-		font-size: 32rpx;
-		font-weight: bold;
-		background-color: white;
-		border: 4rpx solid v-bind('config.border.color');
-		color: v-bind('config.fontColor.subTitle');
-		transition: all 0.3s ease;
-
-		.step-number {
-			line-height: 1;
-		}
-
-		.icon-check {
-			font-size: 36rpx;
-			font-weight: bold;
-			line-height: 1;
-		}
-	}
-
-	.step-title {
-		font-size: 32rpx;
-		font-weight: bold;
-		color: v-bind('config.fontColor.default');
-		display: block;
-		line-height: 1.4;
-	}
-
-	.step-desc {
-		font-size: 26rpx;
-		color: v-bind('config.fontColor.subTitle');
-		display: block;
-		margin-top: 8rpx;
-		line-height: 1.4;
-	}
-	.finished {
-		.step-icon {
-			border-color: v-bind('config.border.color');
-			background-color: v-bind('config.backgroundColor.succeed');
-			color: white;
-		}
-
-		.step-line {
-			background-color: v-bind('config.backgroundColor.succeed') !important;
-		}
-
-		.step-title {
-			color: v-bind('config.fontColor.default');
-		}
-	}
-	.active {
-		.step-icon {
-			border-color: v-bind('config.border.default');
-			background-color: v-bind('config.backgroundColor.default');
-			color: white;
-		}
-
-		.step-title {
-			color: v-bind('config.fontColor.default');
-			font-weight: bold;
-		}
-	}
-
-	.waiting {
-		.step-icon {
-			border-color: v-bind('config.border.color');
-			background-color: white;
-			color: v-bind('config.fontColor.text');
-		}
-
-		.step-title {
-			color: v-bind('config.fontColor.text');
-		}
-
-		.step-desc {
-			color: v-bind('config.fontColor.text');
-		}
-	}
-}
-
-@media (max-width: 768px) {
-	.v-steps.horizontal {
-		.step-item {
-			.step-content {
-				padding: 0 10rpx;
-			}
-
-			.step-title {
-				font-size: 28rpx;
-			}
-
-			.step-desc {
-				font-size: 24rpx;
-			}
-		}
-	}
-}
-</style>