v-uni-app-ui 1.0.0 → 1.0.4

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

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

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

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

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