v-uni-app-ui 1.0.4 → 1.0.7

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

@@ -1,364 +0,0 @@
-<template>
-	<view class="v-menu-slide" :class="[`v-menu-slide--${direction}`]">
-		<!-- 菜单标题区域 -->
-		<view :class="['menu-header', `menu-header--${direction}`]">
-			<view
-				v-for="(titleItem, index) in processedTitleItems"
-				:key="index"
-				:class="['menu-item', { 'menu-item--active': activeIndex === index }]"
-				@click="selectMenuItem(index)"
-			>
-				<slot name="title" :item="titleItem" :index="index" :active="activeIndex === index" :direction="direction">
-					<view class="menu-item__content" :class="[`menu-item__content--${direction}`]">
-						<text class="menu-item__text">{{ titleItem.title }}</text>
-					</view>
-				</slot>
-			</view>
-		</view>
-
-		<!-- 内容区域 -->
-		<view class="menu-content">
-			<swiper :current="activeIndex" :vertical="direction === 'y'" :duration="transitionDuration" @change="onSwiperChange" class="menu-content-swiper">
-				<swiper-item v-for="(contentItem, index) in processedContentItems" :key="index">
-					<view class="content-item">
-						<slot name="content" :item="contentItem" :index="index">
-							<text class="content-default-text">{{ contentItem.content || `内容 ${index + 1}` }}</text>
-						</slot>
-					</view>
-				</swiper-item>
-			</swiper>
-		</view>
-	</view>
-</template>
-
-<script setup>
-import { ref, watch, onMounted, computed } from 'vue';
-
-const props = defineProps({
-	// 菜单项数据（合并格式）
-	items: {
-		type: Array,
-		default: () => []
-	},
-	// 菜单标题项数据（分开格式）
-	titleItems: {
-		type: Array,
-		default: () => []
-	},
-	// 菜单内容项数据（分开格式）
-	contentItems: {
-		type: Array,
-		default: () => []
-	},
-	// 排列方向：x（水平）或 y（垂直）
-	direction: {
-		type: String,
-		default: 'x',
-		validator: (value) => ['x', 'y'].includes(value)
-	},
-	// 默认激活的菜单项索引
-	defaultActive: {
-		type: Number,
-		default: 0
-	},
-	// 过渡动画时长（毫秒）
-	transitionDuration: {
-		type: Number,
-		default: 300
-	},
-	// 标题数据的关联键名
-	titleKey: {
-		type: String,
-		default: null
-	},
-	// 内容数据的关联键名
-	contentKey: {
-		type: String,
-		default: null
-	},
-	// 向后兼容的关联键名（如果设置了，会同时设置 titleKey 和 contentKey）
-	relationKey: {
-		type: String,
-		default: null
-	}
-});
-
-const emit = defineEmits(['update:active', 'change']);
-
-// 当前激活的菜单项索引
-const activeIndex = ref(props.defaultActive);
-
-// 计算实际使用的键名
-const effectiveTitleKey = computed(() => {
-	if (props.titleKey) return props.titleKey;
-	if (props.relationKey) return props.relationKey;
-	return null; // 默认按索引匹配
-});
-
-const effectiveContentKey = computed(() => {
-	if (props.contentKey) return props.contentKey;
-	if (props.relationKey) return props.relationKey;
-	return null; // 默认按索引匹配
-});
-
-// 检测数据格式
-const isSeparateFormat = computed(() => {
-	return props.titleItems.length > 0 && props.contentItems.length > 0;
-});
-
-// 处理标题项数据
-const processedTitleItems = computed(() => {
-	if (isSeparateFormat.value) {
-		return props.titleItems;
-	}
-	return props.items;
-});
-
-// 处理内容项数据
-const processedContentItems = computed(() => {
-	if (isSeparateFormat.value) {
-		// 分开格式：根据关联键匹配内容
-		if (effectiveTitleKey.value && effectiveContentKey.value && props.titleItems.length > 0 && props.contentItems.length > 0) {
-			return props.titleItems.map((titleItem) => {
-				const titleValue = titleItem[effectiveTitleKey.value];
-				const matchedContent = props.contentItems.find((contentItem) => contentItem[effectiveContentKey.value] === titleValue);
-				return matchedContent || { content: '暂无内容' };
-			});
-		}
-
-		// 分开格式：按索引匹配
-		return props.contentItems.length > 0 ? props.contentItems : props.titleItems.map(() => ({}));
-	}
-
-	// 合并格式：直接使用 items
-	return props.items;
-});
-
-// 选择菜单项
-const selectMenuItem = (index) => {
-	if (activeIndex.value === index) return;
-
-	activeIndex.value = index;
-	emit('update:active', index);
-	emit('change', index);
-};
-
-// Swiper 切换回调
-const onSwiperChange = (e) => {
-	const index = e.detail.current;
-	if (activeIndex.value === index) return;
-
-	activeIndex.value = index;
-	emit('update:active', index);
-	emit('change', index);
-};
-
-// 监听外部 active 变化
-watch(
-	() => props.defaultActive,
-	(newVal) => {
-		if (activeIndex.value !== newVal) {
-			activeIndex.value = newVal;
-		}
-	}
-);
-
-// 监听 items 变化
-watch(
-	() => [props.items, props.titleItems, props.contentItems],
-	() => {
-		// 数据变化时重置激活索引（可选）
-		const maxIndex = isSeparateFormat.value ? Math.min(props.titleItems.length, props.contentItems.length) - 1 : props.items.length - 1;
-
-		if (activeIndex.value > maxIndex) {
-			activeIndex.value = Math.max(0, maxIndex);
-		}
-	},
-	{ deep: true }
-);
-
-// 初始化
-onMounted(() => {
-	if (props.items.length === 0 && props.titleItems.length === 0) {
-		console.warn('v-menu-slide: 请提供菜单数据（items 或 titleItems/contentItems）');
-	}
-
-	// 数据格式检查
-	if (props.items.length > 0 && (props.titleItems.length > 0 || props.contentItems.length > 0)) {
-		console.warn('v-menu-slide: 检测到同时提供了 items 和 titleItems/contentItems，将优先使用 titleItems/contentItems');
-	}
-
-	// 键名检查
-	if (isSeparateFormat.value && effectiveTitleKey.value && effectiveContentKey.value) {
-		// 检查标题数据中是否包含指定的键
-		if (props.titleItems.length > 0 && !props.titleItems[0].hasOwnProperty(effectiveTitleKey.value)) {
-			console.warn(`v-menu-slide: 标题数据中未找到键 "${effectiveTitleKey.value}"，将按索引匹配`);
-		}
-
-		// 检查内容数据中是否包含指定的键
-		if (props.contentItems.length > 0 && !props.contentItems[0].hasOwnProperty(effectiveContentKey.value)) {
-			console.warn(`v-menu-slide: 内容数据中未找到键 "${effectiveContentKey.value}"，将按索引匹配`);
-		}
-	}
-});
-</script>
-
-<style lang="scss" scoped>
-/* 样式保持不变，与之前相同 */
-.v-menu-slide {
-	width: 100%;
-	height: 100%;
-	display: flex;
-
-	// 默认X轴方向
-	flex-direction: column;
-
-	// Y轴方向布局
-	&--y {
-		flex-direction: row;
-	}
-}
-
-// 菜单标题区域
-.menu-header {
-	display: flex;
-	background-color: #fff;
-	z-index: 10;
-
-	&--x {
-		flex-direction: row;
-		overflow-x: auto;
-		white-space: nowrap;
-		// 隐藏滚动条（H5和App兼容）
-		&::-webkit-scrollbar {
-			display: none;
-			width: 0;
-			height: 0;
-			color: transparent;
-		}
-	}
-
-	&--y {
-		flex-direction: column;
-		width: 200rpx; // Y轴方向时固定宽度
-		flex-shrink: 0; // 防止被压缩
-		overflow-y: auto;
-		// 隐藏滚动条（H5和App兼容）
-		&::-webkit-scrollbar {
-			display: none;
-			width: 0;
-			height: 0;
-			color: transparent;
-		}
-	}
-}
-
-// 菜单项
-.menu-item {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	padding: 20rpx 30rpx;
-	position: relative;
-	transition: all 0.3s ease;
-	flex-shrink: 0; // 防止在x方向排列时被压缩
-
-	// Y轴方向时，菜单项内容横向排列
-	.menu-header--y & {
-		justify-content: flex-start;
-	}
-
-	&--active {
-		color: #007aff; // 激活状态颜色
-
-		&::after {
-			content: '';
-			position: absolute;
-			background-color: #007aff;
-			transition: all 0.3s ease;
-		}
-	}
-
-	// X方向激活指示器
-	.menu-header--x &--active::after {
-		bottom: 0;
-		left: 20%;
-		right: 20%;
-		height: 4rpx;
-	}
-
-	// Y方向激活指示器
-	.menu-header--y &--active::after {
-		top: 20%;
-		bottom: 20%;
-		left: 0;
-		width: 4rpx;
-	}
-}
-
-// 菜单项内容容器
-.menu-item__content {
-	display: flex;
-	align-items: center;
-
-	// Y轴方向时，内容横向排列
-	&--y {
-		flex-direction: row;
-	}
-}
-
-.menu-item__text {
-	font-size: 28rpx;
-	font-weight: 500;
-}
-
-// 内容区域
-.menu-content {
-	flex: 1;
-	position: relative;
-	overflow: hidden;
-}
-
-.menu-content-swiper {
-	width: 100%;
-	height: 100%;
-}
-
-.content-item {
-	width: 100%;
-	height: 100%;
-	padding: 20rpx;
-	box-sizing: border-box;
-	/* #ifdef H5 */
-	overflow: auto;
-	/* #endif */
-	// 隐藏滚动条（H5和App兼容）
-	&::-webkit-scrollbar {
-		display: none;
-		width: 0;
-		height: 0;
-		color: transparent;
-	}
-}
-
-.content-default-text {
-	font-size: 28rpx;
-	color: #666;
-}
-
-/* App和H5兼容性处理 */
-/* #ifdef APP-PLUS */
-.menu-header--x {
-	-webkit-overflow-scrolling: touch;
-}
-/* #endif */
-
-/* #ifdef H5 */
-// H5特定样式
-@media (hover: hover) {
-	.menu-item:hover {
-		background-color: #f5f5f5;
-	}
-}
-/* #endif */
-</style>

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

@@ -1,80 +0,0 @@
-<template>
-	<view v-show="value" :class="['spinner', `spinner--type--${props.type}`]"></view>
-</template>
-
-<script lang="ts" setup>
-import { inject } from 'vue';
-
-const props = defineProps({
-	value: {
-		type: Boolean,
-		default: false
-	},
-	type: {
-		type: String,
-		default: 'default'
-	},
-	customizeColor: {
-		type: String,
-		default: null
-	},
-	vacancyColor: {
-		type: String,
-		default: '#fff'
-	},
-	opacity: {
-		type: Number,
-		default: 0.5
-	}
-});
-
-const config = inject<any>('config');
-const type = props.customizeColor === null ? '1px solid transparent' : `1px solid ${props.customizeColor}`;
-</script>
-
-<style lang="scss" scoped>
-.spinner {
-	width: 20rpx;
-	height: 20rpx;
-	border-radius: 50%;
-	border-top-color: v-bind('props.vacancyColor') !important;
-	animation: spin 1s ease-in-out infinite;
-	margin: auto;
-	opacity: v-bind('props.opacity');
-
-	&--type--default {
-		border: 1rpx solid ;
-		border-color: v-bind("config.border.default");
-	}
-
-	&--type--warn {
-		border: 1rpx solid ;
-		border-color: v-bind("config.border.warn");
-	}
-
-	&--type--info {
-		border: 1rpx solid ;
-		border-color: v-bind("config.border.info");
-	}
-
-	&--type--delete {
-		border: 1rpx solid ;
-		border-color: v-bind("config.border.delete");
-	}
-
-	&--type--succeed {
-		border: 1rpx solid ;
-		border-color: v-bind("config.border.succeed");
-	}
-
-	&--type--customize {
-		border: v-bind('type');
-	}
-}
-
-@keyframes spin {
-	to {
-		transform: rotate(360deg);
-	}
-}
-</style>

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

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

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