v-uni-app-ui 1.0.0 → 1.0.2

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

@@ -0,0 +1,97 @@
+<template>
+	<view class="v-null">
+		<view class="v-null-content">
+			<slot>
+				<view class="v-null-icon" v-if="showIcon">
+					<slot name="icon">
+						<view class="v-null-default-icon"></view>
+					</slot>
+				</view>
+				<view class="v-null-text">{{ text }}</view>
+			</slot>
+		</view>
+	</view>
+</template>
+
+<script lang="ts" setup>
+import { computed, inject } from 'vue';
+
+const props = defineProps({
+	text: {
+		type: String,
+		default: '暂无数据'
+	},
+	showIcon: {
+		type: Boolean,
+		default: true
+	},
+	iconSize: {
+		type: Number,
+		default: 40
+	},
+	textColor: {
+		type: String,
+		default: '#999999'
+	},
+	iconColor: {
+		type: String,
+		default: '#cccccc'
+	}
+});
+
+const config = inject<any>('config');
+const iconSizeStyle = computed(() => ({
+	width: `${props.iconSize}rpx`,
+	height: `${props.iconSize}rpx`
+}));
+</script>
+
+<style lang="scss" scoped>
+.v-null {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	height: 100%;
+	text-align: center;
+	font-size: v-bind("config.fontSize.smallText");
+	color: v-bind('props.textColor');
+}
+
+.v-null-content {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+
+.v-null-icon {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	margin-bottom: 12rpx;
+}
+
+.v-null-default-icon {
+	width: v-bind('iconSizeStyle.width');
+	height: v-bind('iconSizeStyle.height');
+	background-color: v-bind('props.iconColor');
+	border-radius: 50%;
+	position: relative;
+	overflow: hidden;
+}
+
+.v-null-default-icon::before {
+	content: '';
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	width: 60%;
+	height: 60%;
+	background-color: #fff;
+	border-radius: 50%;
+	transform: translate(-50%, -50%);
+}
+
+.v-null-text {
+	color: v-bind('props.textColor');
+}
+</style>

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

@@ -0,0 +1,96 @@
+<template>
+	<view class="v-overlay" :class="['v-overlay-open']" @click="handleOverlayClick">
+		<slot></slot>
+	</view>
+</template>
+
+<script lang="ts" setup>
+import { ref,computed,watch,inject } from 'vue';
+
+/**
+ * v-overlay 遮罩层
+ * value 是否显示遮罩层 默认值:false 可选值true显示、false隐藏
+ * zIndex 遮罩层z-index值 默认值:999
+ * opacity 遮罩层透明度 默认值:0.5
+ * closeOnClick 是否支持点击遮罩层关闭 默认值:true 可选值true支持关闭、false不支持关闭
+ * animation 遮罩层动画效果 默认值:'fade' 可选值'fade'淡入淡出等
+ */
+const props = defineProps({
+	value: {
+		type: Boolean,
+		default: false
+	},
+	zIndex: {
+		type: Number,
+		default: 999
+	},
+	opacity: {
+		type: Number,
+		default: 0.5
+	},
+	closeOnClick: {
+		type: Boolean,
+		default: true
+	},
+	animation: {
+		type: String,
+		default: 'fade'
+	}
+});
+const emits = defineEmits(['update:value','click']);
+
+const config = inject<any>('config');
+const isVisible = ref(props.value)
+const visible = ref(isVisible.value ? "flex" : "none");
+const backgroundColor = `rgba(0, 0, 0, ${props.opacity})`
+
+
+watch(()=>props.value,(newValue)=>{
+	isVisible.value = newValue
+	visible.value = newValue ? "flex" : "none"
+})
+watch(()=>isVisible.value,(newValue)=>{
+	emits('update:value', newValue)
+})
+
+const handleOverlayClick = () => {
+	if (props.closeOnClick) {
+		isVisible.value = false;
+		visible.value = "none"
+		emits('click', false);
+	}
+};
+
+</script>
+
+<style lang="scss" scoped>
+.v-overlay {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background-color: v-bind("backgroundColor");
+	display: v-bind("visible");
+	justify-content: center;
+	align-items: center;
+	transition: opacity 0.3s ease;
+	opacity: v-bind("config.opacity.mask");
+	pointer-events: none;
+	z-index: v-bind("props.zIndex");
+}
+
+.v-overlay-open {
+	opacity: v-bind("backgroundColor");
+	pointer-events: all;
+}
+
+.v-overlay.fade {
+	opacity: v-bind("config.opacity.mask");
+	transition: opacity 0.3s ease;
+}
+
+.v-overlay.fade.v-overlay-open {
+	opacity: v-bind("backgroundColor");
+}
+</style>

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>