v-uni-app-ui 1.0.0 → 1.0.4

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

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

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

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

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

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

package/components/model/compound/v-checkbox-group/v-checkbox-group.vue

@@ -0,0 +1,96 @@
+<template>
+	<view :class="['v-checkbox-group', vertical ? 'vertical' : 'horizontal']" :style="groupStyle" role="checkboxgroup">
+		<slot />
+	</view>
+</template>
+
+<script lang="ts" setup>
+import { provide, computed, ref, watch } from 'vue';
+
+/**
+ * v-checkbox-group 复选按钮组
+ * value	双向绑定
+ * vertical	布局方向		默认值:false		可选值:true竖		false:行
+ * disabled	是否禁用		默认值:false		可选值:false不禁用	true禁用
+ * indeterminate	是否开启全选/半选功能	默认值:false			可选值:false不开启	true开启
+ * groupStyle	自定义样式
+ * 相关事件:change
+ */
+const props = defineProps({
+	value: {
+		type: Array as () => Array<string | number | object>,
+		default: () => []
+	},
+	vertical: {
+		type: Boolean,
+		default: false
+	},
+	disabled: {
+		type: Boolean,
+		default: false
+	},
+	indeterminate: {
+		type: Boolean,
+		default: false
+	},
+	groupStyle: {
+		type: Object,
+		default: () => ({})
+	}
+});
+
+const emit = defineEmits(['update:value', 'change']);
+
+const checkedValues = ref([...props.value]);
+
+provide('checkboxGroup', {
+	name: 'vCheckboxGroup',
+	checkedValues,
+	disabled: computed(() => props.disabled),
+	indeterminate: computed(() => props.indeterminate)
+});
+
+watch(
+	() => props.value,
+	(newVal) => {
+		checkedValues.value = [...newVal];
+	}
+);
+
+const updateValues = (newValues: any[]) => {
+	checkedValues.value = newValues;
+	emit('update:value', newValues);
+	emit('change', newValues);
+};
+
+defineExpose({
+	updateValues
+});
+</script>
+
+<style lang="scss">
+.v-checkbox-group {
+	&.horizontal {
+		display: flex;
+		flex-wrap: wrap;
+
+		.v-checkbox {
+			margin-right: 32rpx;
+
+			&:last-child {
+				margin-right: 0;
+			}
+		}
+	}
+
+	&.vertical {
+		.v-checkbox {
+			margin-bottom: 24rpx;
+
+			&:last-child {
+				margin-bottom: 0;
+			}
+		}
+	}
+}
+</style>