v-uni-app-ui 1.0.4 → 1.0.6

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>

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

@@ -1,142 +0,0 @@
-<template>
-	<view :class="['v-row', `v-row--justify-${justify}`, `v-row--align-${align}`, `v-row--border-${borderMode}`]" :style="rowStyle">
-		<slot></slot>
-	</view>
-</template>
-
-<script setup lang="ts">
-import { computed, inject } from 'vue';
-
-/**
- * v-row 行
- * gutter	子元素之间的间距	Number	0	-
- * justify	水平排列方式	String	'start'	'start', 'end', 'center', 'space-between', 'space-around', 'space-evenly'
- * align	垂直排列方式	String	'top'	'top', 'center', 'bottom', 'stretch', 'baseline'
- * borderMode	边框模式	String	'all'	'all', 'none', 'bottom', 'top', 'left', 'right', 'ends', 'up-down'
- */
-const props = defineProps({
-	gutter: {
-		type: Number,
-		default: 0
-	},
-	justify: {
-		type: String,
-		default: 'start',
-		validator: (value: any) => {
-			return ['start', 'end', 'center', 'space-between', 'space-around', 'space-evenly'].includes(value);
-		}
-	},
-	align: {
-		type: String,
-		default: 'top',
-		validator: (value: string) => {
-			return ['top', 'center', 'bottom', 'stretch', 'baseline'].includes(value);
-		}
-	},
-	borderMode: {
-		type: String,
-		default: 'none',
-		validator: (value: string) => {
-			return ['all', 'none', 'bottom', 'top', 'left', 'right', 'ends', 'up-down'].includes(value);
-		}
-	}
-});
-
-const config = inject<any>('config');
-
-const rowStyle = computed(() => {
-	const style: Record<string, string | number> = {};
-	if (props.gutter) {
-		style.marginLeft = `-${props.gutter / 2}rpx`;
-		style.marginRight = `-${props.gutter / 2}rpx`;
-	}
-	return style;
-});
-</script>
-
-<style lang="scss" scoped>
-.v-row {
-	display: flex;
-	flex-wrap: wrap;
-	box-sizing: border-box;
-	border: 1rpx solid v-bind('config.border.color');
-	border-radius: 4rpx;
-
-	// 边框模式
-	&--border-none {
-		border: none;
-	}
-
-	&--border-bottom {
-		border-bottom: 1rpx solid v-bind('config.border.color');
-	}
-
-	&--border-top {
-		border-top: 1rpx solid v-bind('config.border.color');
-	}
-
-	&--border-left {
-		border-left: 1rpx solid v-bind('config.border.color');
-	}
-
-	&--border-right {
-		border-right: 1rpx solid v-bind('config.border.color');
-	}
-
-	&--border-ends {
-		border-left: 1rpx solid v-bind('config.border.color');
-		border-right: 1rpx solid v-bind('config.border.color');
-	}
-
-	&--border-up-down {
-		border-top: 1rpx solid v-bind('config.border.color');
-		border-bottom: 1rpx solid v-bind('config.border.color');
-	}
-
-	// 对齐方式
-	&--justify-start {
-		justify-content: flex-start;
-	}
-
-	&--justify-end {
-		justify-content: flex-end;
-	}
-
-	&--justify-center {
-		justify-content: center;
-	}
-
-	&--justify-space-between {
-		justify-content: space-between;
-	}
-
-	&--justify-space-around {
-		justify-content: space-around;
-	}
-
-	&--justify-space-evenly {
-		justify-content: space-evenly;
-	}
-
-	// 垂直对齐
-	&--align-top {
-		align-items: flex-start;
-	}
-
-	&--align-center {
-		align-items: center;
-	}
-
-	&--align-bottom {
-		align-items: flex-end;
-	}
-
-	&--align-stretch {
-		align-items: stretch;
-	}
-
-	&--align-baseline {
-		align-items: baseline;
-	}
-}
-</style>

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

@@ -1,79 +0,0 @@
-<template>
-	<view class="v-waterfall">
-		<view v-for="(column, columnIndex) in columnsList" :key="columnIndex" class="column">
-			<view v-for="(item, itemIndex) in column" :key="itemIndex" class="waterfall-item">
-				<slot name="item" :item="item" />
-			</view>
-		</view>
-	</view>
-</template>
-
-<script lang="ts" setup>
-import { ref, watch } from 'vue';
-
-interface WaterfallItem {
-	height: number;
-	content: any;
-}
-
-const props = defineProps({
-	items: {
-		type: Array as () => WaterfallItem[],
-		default: () => []
-	},
-	columns: {
-		type: Number,
-		default: 2
-	},
-	columnWidth: {
-		type: String,
-		default: '50%'
-	}
-});
-
-const columnsList = ref<WaterfallItem[][]>([]);
-
-const splitIntoColumns = () => {
-	const cols = Array.from({ length: props.columns }, () => []);
-	props.items.forEach((item, index) => {
-		const columnIndex = index % props.columns;
-		cols[columnIndex].push(item);
-	});
-	columnsList.value = cols;
-};
-
-splitIntoColumns();
-
-watch(
-	() => props.items,
-	() => {
-		splitIntoColumns();
-	},
-	{ deep: true }
-);
-
-watch(
-	() => props.columns,
-	() => {
-		splitIntoColumns();
-	}
-);
-</script>
-
-<style lang="scss" scoped>
-.v-waterfall {
-	display: flex;
-	flex-wrap: wrap;
-}
-
-.column {
-	width: v-bind('100 / props.columns + "%"');
-	box-sizing: border-box;
-	padding: 0 5rpx;
-}
-
-.waterfall-item {
-	margin-bottom: 5rpx;
-	padding: 10rpx 0;
-}
-</style>