v-uni-app-ui 1.0.2 → 1.0.6

package/components/layout/v-card/v-card.vue

@@ -1,108 +0,0 @@
-<template>
-	<view class="v-card" :class="{ 'v-card-elevated': elevated }" :style="{ width, padding, borderRadius }">
-		<view class="v-card-header" v-if="title || $slots.header">
-			<slot name="header">
-				<text class="v-card-title">{{ title }}</text>
-			</slot>
-		</view>
-		<view class="v-card-content">
-			<slot>
-				<text v-if="content">{{ content }}</text>
-			</slot>
-		</view>
-		<view class="v-card-actions" v-if="$slots.actions">
-			<slot name="actions"></slot>
-		</view>
-	</view>
-</template>
-
-<script lang="ts" setup>
-import { computed,inject } from 'vue';
-
-interface CardItem {
-	title?: string;
-	content?: string;
-	actions?: any;
-}
-
-/**
- * v-card
- * title			卡片标题
- * content			卡片内容
- * width			卡片宽度，默认为100%
- * padding			内边距，默认为none
- * borderRadius	圆角大小，默认为8px
- * elevated			是否启用阴影效果，默认为false
- */
-const props = defineProps({
-	title: {
-		type: String,
-		default: ''
-	},
-	content: {
-		type: String,
-		default: ''
-	},
-	width: {
-		type: String,
-		default: '100%'
-	},
-	padding: {
-		type: String,
-		default: 'none'
-	},
-	borderRadius: {
-		type: String,
-		default: '8px'
-	},
-	elevated: {
-		type: Boolean,
-		default: false
-	}
-});
-
-const config = inject<any>('config');
-// 计算样式
-const style = computed(() => ({
-	width: props.width,
-	padding: props.padding,
-	borderRadius: props.borderRadius
-}));
-</script>
-
-<style lang="scss" scoped>
-.v-card {
-	background-color: v-bind('config.backgroundColor.reversal');
-	border: 1rpx solid v-bind('config.border.color');
-	box-sizing: border-box;
-	overflow: hidden;
-	transition: box-shadow 0.3s ease;
-
-	&-elevated {
-		box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
-	}
-
-	&-header {
-		padding: 16rpx;
-		border-bottom: 1rpx solid v-bind('config.border.color');
-	}
-
-	&-title {
-		font-size: v-bind('config.fontSize.mediumText');
-		font-weight: bold;
-		color: v-bind('config.fontColor.mainText');
-	}
-
-	&-content {
-		padding: 16rpx;
-		color: v-bind('config.fontColor.subTitle');
-	}
-
-	&-actions {
-		padding: 16rpx;
-		border-top: 1rpx solid v-bind('config.border.color');
-		display: flex;
-		justify-content: flex-end;
-	}
-}
-</style>

package/components/layout/v-grid/v-grid.vue

@@ -1,162 +0,0 @@
-<template>
-	<view class="v-grid" :style="gridStyle">
-		<view v-for="(item, index) in items" :key="index" class="grid-item" :style="itemStyle" @click="handleItemClick(item)">
-			<slot name="item" :item="item" :index="index">
-				<view class="default-item">
-					<view class="image-container" v-if="item.image">
-						<img :src="item.image" :mode="imageMode" :lazy-load="lazyLoad" @error="handleImageError(item)" class="grid-image" :style="imageStyle" />
-						<view v-if="item.loading">
-							<slot name="loading">
-								
-							</slot>
-						</view>
-					</view>
-					<view class="content">
-						<slot name="content" :item="item" :index="index"></slot>
-					</view>
-				</view>
-			</slot>
-		</view>
-	</view>
-</template>
-
-<script lang="ts" setup>
-import { computed, ref,inject } from 'vue';
-
-interface GridItem {
-	id?: string | number;
-	image?: string;
-	title: string;
-	desc?: string;
-	price?: number;
-	loading?: boolean;
-	[key: string]: any;
-}
-
-/**
- * v-grid
- * items	数据
- * cols		列数 （支持响应式对象）
- * gap		间距 rpx
- * imageMode	图片模式
- * lazyLoad		是否懒加载
- * imageHeight	图片高度 rpx
- */
-const props = defineProps({
-	items: {
-		type: Array as () => GridItem[],
-		default: () => []
-	},
-	cols: {
-		type: [Number, Object],
-		default: 3
-	},
-	gap: {
-		type: [Number, String],
-		default: 20
-	},
-	imageMode: {
-		type: String,
-		default: 'aspectFill'
-	},
-	lazyLoad: Boolean,
-	imageHeight: {
-		type: [Number, String],
-		default: 300
-	}
-});
-
-const emit = defineEmits(['item-click', 'image-error']);
-
-const config = inject<any>('config');
-const currentCols = ref(3);
-const updateColumns = () => {
-	const screenWidth = uni.getSystemInfoSync().screenWidth;
-	if (typeof props.cols === 'object') {
-		currentCols.value =
-			screenWidth >= 1200
-				? props.cols.xl || 4
-				: screenWidth >= 992
-				? props.cols.lg || 3
-				: screenWidth >= 768
-				? props.cols.md || 2
-				: screenWidth >= 576
-				? props.cols.sm || 2
-				: props.cols.xs || 1;
-	} else {
-		currentCols.value = props.cols;
-	}
-};
-
-updateColumns();
-uni.onWindowResize(() => updateColumns());
-
-const gridStyle = computed(() => {
-	const gap = uni.upx2px(Number(props.gap));
-	return {
-		marginLeft: `-${gap / 2}px`,
-		marginRight: `-${gap / 2}px`
-	};
-});
-
-const itemStyle = computed(() => {
-	const gap = uni.upx2px(Number(props.gap));
-	const width = `calc(${100 / currentCols.value}% - ${gap}px)`;
-	return {
-		width,
-		marginLeft: `${gap / 2}px`,
-		marginRight: `${gap / 2}px`,
-		marginBottom: `${gap}px`
-	};
-});
-
-const imageStyle = computed(() => ({
-	height: uni.upx2px(Number(props.imageHeight)) + 'px'
-}));
-
-
-const handleItemClick = (item: GridItem) => {
-	emit('item-click', item);
-};
-
-const handleImageError = (item: GridItem) => {
-	emit('image-error', item);
-	item.loading = false;
-};
-</script>
-
-<style lang="scss" scoped>
-.v-grid {
-	display: flex;
-	flex-wrap: wrap;
-	box-sizing: border-box;
-
-	.grid-item {
-		box-sizing: border-box;
-		background: v-bind("config.backgroundColor.reversal");
-		border-radius: 8rpx;
-		overflow: hidden;
-		transition: all 0.3s ease;
-
-		&:active {
-			transform: scale(0.98);
-		}
-
-		.default-item {
-			.image-container {
-				position: relative;
-				background-color: v-bind("config.VGrid.backgroundColor");
-
-				.grid-image {
-					width: 100%;
-					display: block;
-				}
-			}
-
-			.content {
-				padding: 20rpx;
-			}
-		}
-	}
-}
-</style>

package/components/layout/v-icon-grid/v-icon-grid.vue

@@ -1,195 +0,0 @@
-<template>
-	<view class="v-icon-grid">
-		<scroll-view class="scroll-container" :scroll-x="scrollable" :show-scrollbar="false" :scroll-with-animation="true">
-			<view class="icon-grid" :style="{ 'grid-template-columns': `repeat(${columns}, 1fr)` }">
-				<view
-					v-for="(icon, index) in icons"
-					:key="index"
-					class="icon-item"
-					:class="{ 'icon-item-active': activeIndex === index }"
-					@click="handleIconClick(index)"
-					:style="{
-						width: typeof itemWidth === 'string' ? itemWidth : `${itemWidth}px`,
-						margin: typeof gutter === 'string' ? `calc(${gutter} / 2)` : `${gutter / 2}px`
-					}"
-				>
-					<view class="icon-wrapper">
-						<view class="icon" :style="{ 'font-size': fontSize }">
-							<text v-if="useIcon" :class="icon.icon"></text>
-							<v-image v-else :src="icon.image" :style="{ width: iconSize, height: iconSize }" />
-						</view>
-					</view>
-					<view
-						class="icon-text"
-						:style="{
-							color: textColor,
-							...textStyle
-						}"
-					>
-						{{ icon.title }}
-					</view>
-				</view>
-			</view>
-		</scroll-view>
-	</view>
-</template>
-
-<script lang="ts" setup>
-import { ref, computed, inject } from 'vue';
-
-interface IconItem {
-	title: string;
-	icon?: string;
-	image?: string;
-}
-/**
- * v-icon-grid    	图标排版
- * icons :        	图标数组        		title标题    icon图标类名        image图片路径
- * iconSize        	图标大小
- * textColor    	文本颜色
- * activeColor    	活动图标颜色
- * itemWidth   		每个图标项的宽度
- * gutter        	图标项之间的间距
- * scrollable    	是否可滚动        	默认值:true滚动    可选值:true滚动    false不滚动
- * useIcon        	图标还是图片        	默认值:true图标    可选值:true图标    false图片
- * rows				图片排数				默认值:1
- */
-const props = defineProps({
-	icons: {
-		type: Array as () => IconItem[],
-		default: () => []
-	},
-	iconSize: {
-		type: String,
-		default: '50rpx'
-	},
-	fontSize: {
-		type: String,
-		default: '25rpx'
-	},
-	textColor: {
-		type: String,
-		default: '#333333'
-	},
-	activeColor: {
-		type: String,
-		default: 'transparent'
-	},
-	itemWidth: {
-		type: [Number, String],
-		default: 80
-	},
-	gutter: {
-		type: [Number, String],
-		default: 10
-	},
-	scrollable: {
-		type: Boolean,
-		default: true
-	},
-	useIcon: {
-		type: Boolean,
-		default: true
-	},
-	rows: {
-		type: Number,
-		default: 1
-	},
-	iconTextModel: {
-		type: String as () => 'normal' | 'wrap' | 'ellipsis',
-		default: 'normal'
-	}
-});
-
-const emits = defineEmits(['select']);
-const config = inject<any>('config');
-
-const activeIndex = ref(0);
-const columns = computed(() => {
-	const totalIcons = props.icons.length;
-	const maxIconsPerRow = Math.ceil(totalIcons / props.rows);
-	return maxIconsPerRow;
-});
-const textStyle = computed(() => {
-	switch (props.iconTextModel) {
-		case 'wrap':
-			return {
-				whiteSpace: 'normal',
-				overflow: 'visible',
-				textOverflow: 'clip'
-			};
-		case 'ellipsis':
-			return {
-				whiteSpace: 'nowrap',
-				overflow: 'hidden',
-				textOverflow: 'ellipsis'
-			};
-		default: // normal
-			return {
-				whiteSpace: 'normal',
-				overflow: 'visible',
-				textOverflow: 'clip'
-			};
-	}
-});
-
-const handleIconClick = (index: number) => {
-	activeIndex.value = index;
-	emits('select', index, props.icons[index]);
-};
-</script>
-
-<style lang="scss" scoped>
-.v-icon-grid {
-	width: 100%;
-	position: relative;
-}
-
-.scroll-container {
-	width: 100%;
-	white-space: nowrap;
-	overflow: hidden;
-	flex: 1;
-}
-
-.icon-grid {
-	display: grid;
-	gap: 10rpx;
-}
-
-.icon-item {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	border-radius: 10rpx;
-	transition: all 0.3s ease;
-	box-sizing: border-box;
-}
-
-.icon-item-active {
-	background-color: v-bind('props.activeColor');
-}
-
-.icon-wrapper {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	width: v-bind('props.iconSize');
-	height: v-bind('props.iconSize');
-	margin-bottom: 5rpx;
-}
-
-.icon {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	width: 100%;
-	height: 100%;
-}
-
-.icon-text {
-	font-size: v-bind('config.fontSize.mediumText');
-	text-align: center;
-}
-</style>

package/components/layout/v-infinite-scroll/v-infinite-scroll.vue

@@ -1,172 +0,0 @@
-<template>
-	<scroll-view
-		class="infinite-scroll-container"
-		:scroll-y="true"
-		:style="containerStyle"
-		@scroll="handleScroll"
-		:scroll-with-animation="false"
-		@scrolltolower="handleScrollToLower"
-	>
-		<slot />
-		<!-- 加载状态提示 -->
-		<template v-if="$slots.loading">
-			<slot name="loading" />
-		</template>
-		<template v-else-if="loading">
-			<view class="status-text">加载中...</view>
-		</template>
-		<template v-if="$slots.null">
-			<slot name="null" />
-		</template>
-		<template v-else-if="noMore">
-			<view class="status-text">没有更多了</view>
-		</template>
-	</scroll-view>
-</template>
-
-<script lang="ts" setup>
-import { ref, onMounted, onUnmounted, nextTick,inject } from 'vue';
-
-const props = defineProps({
-	load: {
-		type: Function,
-		required: true
-	},
-	disabled: {
-		type: Boolean,
-		default: false
-	},
-	immediate: {
-		type: Boolean,
-		default: true
-	},
-	distance: {
-		type: Number,
-		default: 200
-	},
-	throttle: {
-		type: Number,
-		default: 200
-	},
-	containerStyle: {
-		type: Object,
-		default: () => ({})
-	},
-	noMore: {
-		type: Boolean,
-		default: false
-	},
-	timeout: {
-		type: Number,
-		default: 5000
-	}
-});
-
-const config = inject('config');
-const loading = ref(false);
-const lastCall = ref(0);
-const isFirstLoad = ref(true);
-const lastScrollHeight = ref(0);
-let timeoutId: NodeJS.Timeout | null = null;
-
-// 节流函数
-const throttle = (fn: Function, delay: number) => {
-	let lastTime = 0;
-	return function (this: any, ...args: any[]) {
-		const now = Date.now();
-		if (now - lastTime >= delay) {
-			fn.apply(this, args);
-			lastTime = now;
-		}
-	};
-};
-
-// 处理滚动事件
-const handleScroll = throttle((event: any) => {
-	const { scrollTop, scrollHeight } = event.detail;
-	lastScrollHeight.value = scrollHeight;
-
-	// 只有当内容高度变化时才处理
-	if (scrollHeight !== lastScrollHeight.value) {
-		checkLoadMore(scrollTop, scrollHeight);
-	}
-}, props.throttle);
-
-// 处理滚动到底部事件（作为兜底）
-const handleScrollToLower = () => {
-	if (!loading.value && !props.noMore && !props.disabled) {
-		loadMore();
-	}
-};
-
-// 检查是否需要加载更多
-const checkLoadMore = (scrollTop: number, scrollHeight: number) => {
-	const now = Date.now();
-	if (now - lastCall.value < props.throttle) return;
-	lastCall.value = now;
-
-	// 计算距离底部的距离
-	const triggerPosition = scrollTop + props.distance >= scrollHeight - props.distance;
-
-	if (triggerPosition) {
-		loadMore();
-	}
-};
-
-// 加载更多数据
-const loadMore = async () => {
-	if (props.disabled || loading.value || props.noMore) return;
-
-	loading.value = true;
-
-	try {
-		await props.load();
-		// 等待DOM更新
-		await nextTick();
-	} catch (e) {
-		console.error('加载失败:', e);
-	} finally {
-		loading.value = false;
-		isFirstLoad.value = false;
-	}
-};
-
-// 初始化检查
-const checkInitialLoad = () => {
-	// 不使用节点查询，改为延迟执行首次加载
-	if (props.immediate && isFirstLoad.value) {
-		setTimeout(() => {
-			loadMore();
-		}, 100);
-	}
-};
-
-onMounted(() => {
-	checkInitialLoad();
-});
-
-onUnmounted(() => {
-	if (timeoutId) {
-		clearTimeout(timeoutId);
-	}
-});
-</script>
-
-<style lang="scss">
-.infinite-scroll-container {
-	box-sizing: border-box;
-	height: 100%;
-	position: relative;
-
-	.status-text {
-		padding: 20rpx;
-		text-align: center;
-		color: v-bind('config.fontColor.mainText');
-		font-size: v-bind('config.fontSize.mediumText');
-
-		&:last-child {
-			padding-bottom: 40rpx;
-		}
-	}
-}
-</style>

package/components/layout/v-list/v-list.vue

@@ -1,43 +0,0 @@
-<template>
-  <view :class="['v-list', `v-list--border-${borderMode}`]">
-    <slot></slot>
-  </view>
-</template>
-
-<script setup lang="ts">
-import { computed,inject } from 'vue';
-
-const props = defineProps({
-  borderMode: {
-    type: String,
-    default: 'all',
-    validator: (value: any) => {
-      return ['all', 'none', 'item'].includes(value);
-    }
-  }
-});
-
-const config = inject<any>('config');
-</script>
-
-<style lang="scss" scoped>
-.v-list {
-  width: 100%;
-  background-color: v-bind("config.backgroundColor.reversal");
-
-  &--border-all {
-    border: 1rpx solid v-bind("config.border.color");
-    border-radius: 4rpx;
-  }
-
-  &--border-none {
-    border: none;
-  }
-
-  &--border-item {
-    ::v-deep .v-list-item:not(:last-child) {
-      border-bottom: 1px solid v-bind("config.border.color");
-    }
-  }
-}
-</style>