v-uni-app-ui 1.0.0 → 1.0.4

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

@@ -0,0 +1,203 @@
+<template>
+	<view class="v-table-container">
+		<view class="v-table">
+			<view class="v-table-header" @click="handleHeaderClick">
+				<view class="v-table-header-cell" v-for="(column, index) in columns" :key="index" :style="{ width: column.width , flex:  '1 1 0%'}">
+					{{ column.label }}
+					<view v-if="column.prop && sortable" class="sort-icon">
+						<text class="arrow-up" :class="{ active: column.prop === sortConfig.prop && sortConfig.order === 'asc' }">↑</text>
+						<text class="arrow-down" :class="{ active: column.prop === sortConfig.prop && sortConfig.order === 'desc' }">↓</text>
+					</view>
+				</view>
+			</view>
+			<view class="v-table-body">
+				<view v-if="!data.length" class="empty-data">
+					<slot name="empty">暂无数据</slot>
+				</view>
+				<view class="v-table-row" v-for="(row, rowIndex) in sortedData" :key="rowIndex">
+					<view class="v-table-cell" v-for="(column, colIndex) in columns" :key="colIndex" :style="{ width: column.width , flex:  '1 1 0%'}">
+						<slot :name="`cell-${column.prop}`" :row="row" :column="column" :index="rowIndex">
+							{{ row[column.prop] }}
+						</slot>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref ,inject} from 'vue';
+
+interface TableColumn {
+	prop: string;
+	label: string;
+	width?: string;
+}
+
+interface SortConfig {
+	prop: string | null;
+	order: 'asc' | 'desc' | null;
+}
+
+/**
+ * v-table
+ * columns 表格列配置
+ *        prop 表格列绑定的数据属性名
+ *        label 表格列标题
+ *        width 表格列宽度
+ * data 表格数据数组
+ * sortable 是否支持排序 默认值:false 可选值true支持排序、false不支持排序
+ */
+const props = defineProps({
+	columns: {
+		type: Array,
+		default: () => [],
+		required: true
+	},
+	data: {
+		type: Array,
+		default: () => []
+	},
+	sortable: {
+		type: Boolean,
+		default: false
+	}
+});
+
+const config = inject<any>('config');
+const sortConfig = ref<SortConfig>({
+	prop: null,
+	order: null
+});
+
+const sortedData = computed(() => {
+	if (!props.sortable || !props.data.length || !sortConfig.value.prop) {
+		return props.data;
+	}
+
+	return [...props.data].sort((a, b) => {
+		const aValue = a[sortConfig.value.prop];
+		const bValue = b[sortConfig.value.prop];
+
+		if (sortConfig.value.order === 'asc') {
+			return aValue > bValue ? 1 : -1;
+		} else {
+			return aValue < bValue ? 1 : -1;
+		}
+	});
+});
+
+const handleHeaderClick = (event: any) => {
+	const target = event.target;
+	const columnName = target.closest('.v-table-header-cell');
+	if (!columnName) return;
+
+	const columnProp = props.columns.find((col, index) => {
+		const cell = target.closest('.v-table-header-cell');
+		return cell && cell.getAttribute('data-index') === index.toString();
+	}).prop;
+
+	if (!columnProp) return;
+
+	if (sortConfig.value.prop === columnProp) {
+		sortConfig.value.order = sortConfig.value.order === 'asc' ? 'desc' : 'asc';
+	} else {
+		sortConfig.value.prop = columnProp;
+		sortConfig.value.order = 'asc';
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.v-table-container {
+	width: 100%;
+	border-radius: 8rpx;
+	overflow: hidden;
+	box-shadow: 0 2rpx 12rpx 0 rgba(0, 0, 0, 0.1);
+	border: 1rpx solid v-bind("config.border.color");
+}
+
+.v-table {
+	width: 100%;
+	box-sizing: border-box;
+}
+
+.v-table-header {
+	display: flex;
+	background-color: v-bind("config.VTable.backgroundColor");
+	border-bottom: 1rpx solid v-bind("config.border.color");
+}
+
+.v-table-header-cell {
+	padding: 12rpx 16rpx;
+	font-weight: bold;
+	color: v-bind("config.fontColor.mianTitle");
+	text-align: left;
+	box-sizing: border-box;
+	border-right: 1rpx solid v-bind("config.border.color");
+	cursor: pointer;
+	position: relative;
+	user-select: none;
+}
+
+.v-table-header-cell:hover {
+	background-color: v-bind("config.VTable.backgroundColor");
+}
+
+.sort-icon {
+	display: inline-block;
+	margin-left: 5rpx;
+	vertical-align: middle;
+}
+
+.arrow-up,
+.arrow-down {
+	display: block;
+	font-size: v-bind("config.fontSize.smallText");
+	color: v-bind("config.fontColor.text");
+	margin: 0 2rpx;
+}
+
+.arrow-up.active,
+.arrow-down.active {
+	color: v-bind("config.fontColor.default");
+}
+
+.v-table-body {
+	display: flex;
+	flex-direction: column;
+}
+
+.v-table-row {
+	display: flex;
+	border-bottom: 1rpx solid v-bind("config.border.color");
+	transition: background-color 0.3s;
+}
+
+.v-table-row:hover {
+	background-color: v-bind("config.VTable.backgroundColor");
+}
+
+.v-table-row:last-child {
+	border-bottom: none;
+}
+
+.v-table-row:nth-child(even) {
+	background-color: #v-bind("config.VTable.backgroundColor");
+}
+
+.v-table-cell {
+	padding: 12px 16px;
+	color: v-bind("config.fontColor.text");
+	text-align: left;
+	box-sizing: border-box;
+	border-right: 1rpx solid v-bind("config.border.color");
+}
+
+.empty-data {
+	padding: 20rpx;
+	text-align: center;
+	color: v-bind("config.fontColor.text");
+}
+</style>

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

@@ -0,0 +1,235 @@
+<template>
+	<view class="v-tabs">
+		<scroll-view scroll-x class="tabs-scroll" :scroll-left="scrollLeft" :show-scrollbar="false" :scroll-with-animation="true">
+			<view class="tabs-container">
+				<view
+					v-for="(item, index) in tabs"
+					:key="item.key || index"
+					class="tab-item"
+					:class="[{ active: index === activeIndex }, hoverClass]"
+					:style="{
+						minWidth: `${minTabWidth}rpx`,
+						padding: `0 ${itemPadding}rpx`
+					}"
+					@click="handleTabClick(index)"
+					:id="`tab_${index}`"
+				>
+					<text class="tab-text">{{ item.title }}</text>
+				</view>
+				<view v-show="isLine" class="tab-line" :style="lineStyle"></view>
+			</view>
+		</scroll-view>
+	</view>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed, watch, onMounted, nextTick } from 'vue';
+
+interface TabList {
+	title: string;
+	key: string;
+}
+
+/**
+ * v-tabs 	标签页 无内容
+ * value	双向绑定值	默认值:0
+ * tabs		标签标题
+ * activeColor	高亮颜色		默认值:#287afa
+ * inactiveColor	标题颜色		默认值:#666
+ * isLine		是否显示下划线	默认值:true
+ * lineWidth		下划线宽度	默认值:最大标题宽度
+ * lineHeight		下划线厚度	默认值:8
+ * lineOffset		下划线距离标题距离	默认值:4
+ * minTabWidth		最小标题宽度		默认值:120
+ * itemPadding		标题内边距		默认值:32
+ * hoverClass		悬浮名称			默认值:tabs-hover
+ * 相关事件:change
+ */
+const props = defineProps({
+	value: {
+		type: Number,
+		default: 0
+	},
+	tabs: {
+		type: Array as () => TabList[],
+		required: true
+	},
+	activeColor: {
+		type: String,
+		default: '#287afa'
+	},
+	inactiveColor: {
+		type: String,
+		default: '#666'
+	},
+	isLine: {
+		type: Boolean,
+		default: true
+	},
+	lineHeight: {
+		type: String,
+		default: '8'
+	},
+	lineWidth: {
+		type: Number,
+		default: 20
+	},
+	lineOffset: {
+		type: Number,
+		default: 0
+	},
+	minTabWidth: {
+		type: Number,
+		default: 120
+	},
+	itemPadding: {
+		type: Number,
+		default: 32
+	},
+	hoverClass: {
+		type: String,
+		default: 'tabs-hover'
+	}
+});
+
+const emit = defineEmits(['update:value', 'change']);
+
+const activeIndex = ref(props.value);
+const tabRects = ref<{ left: number; width: number }[]>([]);
+const scrollLeft = ref(0);
+const isLandscape = ref(false);
+
+const lineStyle = computed(() => {
+	if (!tabRects.value[activeIndex.value]) return {};
+	const current = tabRects.value[activeIndex.value];
+	return {
+		width: `${props.lineWidth === 0 ? current.width : props.lineWidth}px`,
+		transform: `translateX(${current.left}px)`,
+		backgroundColor: props.activeColor,
+		height: uni.upx2px(parseFloat(props.lineHeight)) + 'px',
+		bottom: `2rpx`
+	};
+});
+
+let updateTimer = null;
+const updateTabRects = () => {
+	clearTimeout(updateTimer);
+	updateTimer = setTimeout(() => {
+		nextTick(() => {
+			uni.createSelectorQuery()
+				.selectAll('.tab-item')
+				.boundingClientRect((rects: any) => {
+					tabRects.value = rects.map((rect: any) => ({
+						left: rect.left - (rects[0]?.left || 0),
+						width: rect.width
+					}));
+				})
+				.exec();
+		});
+	}, 100);
+};
+
+const handleTabClick = (index: number) => {
+	if (activeIndex.value === index) return;
+	activeIndex.value = index;
+	scrollToTab(index);
+	emit('change', index);
+};
+
+const scrollToTab = (index: number) => {
+	const current = tabRects.value[index];
+	if (!current) return;
+
+	const systemInfo = uni.getSystemInfoSync();
+	const tabWidth = current.width;
+	const tabLeft = current.left;
+
+	const viewCenter = systemInfo.windowWidth / 2;
+	const tabCenter = tabLeft + tabWidth / 2;
+	const targetScroll = Math.max(0, tabCenter - viewCenter);
+
+	requestAnimationFrame(() => {
+		scrollLeft.value = targetScroll;
+	});
+};
+
+const checkOrientation = () => {
+	const { windowWidth, windowHeight } = uni.getSystemInfoSync();
+	isLandscape.value = windowWidth > windowHeight;
+	updateTabRects();
+	scrollToTab(activeIndex.value);
+};
+
+watch(activeIndex, (val) => {
+	emit('update:value', val);
+});
+
+onMounted(() => {
+	checkOrientation();
+	uni.onWindowResize(checkOrientation);
+});
+
+watch(() => props.tabs, updateTabRects);
+</script>
+
+<style lang="scss" scoped>
+.v-tabs {
+	width: 100%;
+	background-color: #fff;
+	position: relative;
+	padding: 0 env(safe-area-inset-left);
+}
+
+.tabs-scroll {
+	width: 100%;
+	white-space: nowrap;
+	padding: 0 env(safe-area-inset-right);
+}
+
+.tabs-container {
+	position: relative;
+	display: inline-flex;
+	height: 80rpx;
+	align-items: center;
+	padding: 0 20rpx;
+	will-change: transform;
+}
+
+.tab-item {
+	position: relative;
+	height: 100%;
+	display: inline-flex;
+	align-items: center;
+	transition: color 0.3s;
+	flex-shrink: 0;
+
+	&.active {
+		.tab-text {
+			color: v-bind('props.activeColor');
+			font-weight: 500;
+		}
+	}
+
+	.tab-text {
+		margin: auto;
+		font-size: clamp(24rpx, 4vw, 32rpx);
+		color: v-bind('props.inactiveColor');
+		transition: color 0.3s;
+	}
+}
+
+.tab-line {
+	position: absolute;
+	bottom: 0;
+	border-radius: v-bind('props.lineHeight');
+	transition: all 0.3s cubic-bezier(0.35, 0, 0.25, 1);
+	transform-origin: 0 50%;
+	-webkit-backface-visibility: hidden;
+	backface-visibility: hidden;
+}
+
+.tabs-hover {
+	opacity: 0.6;
+	transition: opacity 0.2s;
+}
+</style>

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

@@ -0,0 +1,206 @@
+<template>
+	<view
+		v-show="show"
+		:class="['v-tag', `v-tag--${type}`, `v-tag--${model}`, { 'v-tag--disabled': disabled, 'v-tag--plain': plain }, `v-tag--${size}`]"
+		@click="handleClick"
+		:style="{ backgroundColor: bgColor, color: txtColor }"
+	>
+		<view v-if="closable && !disabled" class="v-tag-close" @click.stop="handleClose">×</view>
+		<text class="v-tag-content">
+			<slot>{{ content }}</slot>
+		</text>
+	</view>
+</template>
+
+<script setup lang="ts">
+import { ref, inject, computed } from 'vue';
+
+const props = defineProps({
+	type: {
+		type: String,
+		default: 'default',
+		validator: (value: string) => {
+			return ['default', 'delete', 'succeed', 'info', 'warn'].includes(value);
+		}
+	},
+	model: {
+		type: String,
+		default: 'semicircle',
+		validator: (value: string) => {
+			return ['semicircle', 'circle', 'square'].includes(value);
+		}
+	},
+	size: {
+		type: String,
+		default: 'medium',
+		validator: (value: string) => ['small', 'medium', 'large'].includes(value)
+	},
+	content: {
+		type: String,
+		default: ''
+	},
+	backgroundColor: {
+		type: String,
+		default: ''
+	},
+	fontColor: {
+		type: String,
+		default: ''
+	},
+	closable: {
+		type: Boolean,
+		default: false
+	},
+	disabled: {
+		type: Boolean,
+		default: false
+	},
+	plain: {
+		type: Boolean,
+		default: false
+	}
+});
+
+const emit = defineEmits(['click', 'close']);
+
+const config = inject<any>('config');
+const show = ref(true);
+
+const bgColor = computed(() => props.backgroundColor );
+
+const txtColor = computed(() => props.fontColor );
+
+const handleClick = (event: MouseEvent) => {
+	if (!props.disabled) {
+		emit('click', event);
+	}
+};
+
+const handleClose = () => {
+	if (!props.disabled && props.closable) {
+		show.value = false;
+		emit('close', props.content, show.value);
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.v-tag {
+	display: inline-flex;
+	align-items: center;
+	cursor: pointer;
+	position: relative;
+	transition: all 0.3s;
+	color: v-bind('config.fontColor.reversal');
+
+	.v-tag-content {
+		text-align: center;
+		margin: auto;
+	}
+
+	.v-tag-close {
+		width: 18rpx;
+		height: 18rpx;
+		position: absolute;
+		top: -10rpx;
+		right: -10rpx;
+		cursor: pointer;
+		color: #fff;
+		background-color: #666666;
+		font-weight: bold;
+		font-size: 15rpx;
+		padding: 5rpx;
+		border-radius: 50%;
+		text-align: center;
+		line-height: 18rpx;
+	}
+
+	&--small {
+		padding: 14rpx 10rpx;
+		font-size: v-bind('config.fontSize.smallText');
+	}
+	&--medium {
+		padding: 15rpx 12.5rpx;
+		font-size: v-bind('config.fontSize.mediumText');
+	}
+	&--large {
+		padding: 20rpx 15rpx;
+		font-size: v-bind('config.fontSize.largeText');
+	}
+
+	&--default {
+		background-color: v-bind('config.backgroundColor.default');
+	}
+
+	&--succeed {
+		background-color: v-bind('config.backgroundColor.succeed');
+	}
+
+	&--warn {
+		background-color: v-bind('config.backgroundColor.warn');
+	}
+
+	&--delete {
+		background-color: v-bind('config.backgroundColor.delete');
+	}
+
+	&--info {
+		background-color: v-bind('config.backgroundColor.info');
+	}
+
+	&--semicircle {
+		border-radius: v-bind('config.borderRadius.semicircle');
+	}
+
+	&--circle {
+		border-radius: v-bind('config.borderRadius.circle');
+	}
+
+	&--square {
+		border-radius: v-bind('config.borderRadius.square');
+	}
+
+	&--disabled {
+		opacity: v-bind('config.opacity.disabled');
+	}
+
+	&--plain {
+		background-color: transparent;
+		border: 1rpx solid;
+		padding: 8rpx 12rpx;
+
+		&.v-tag--default {
+			border-color: v-bind('config.border.default');
+			color: v-bind('config.fontColor.default');
+		}
+
+		&.v-tag--succeed {
+			border-color: v-bind('config.border.succeed');
+			color: v-bind('config.fontColor.succeed');
+		}
+
+		&.v-tag--warn {
+			border-color: v-bind('config.border.warn');
+			color: v-bind('config.fontColor.warn');
+		}
+
+		&.v-tag--delete {
+			border-color: v-bind('config.border.delete');
+			color: v-bind('config.fontColor.delete');
+		}
+
+		&.v-tag--info {
+			border-color: v-bind('config.border.info');
+			color: v-bind('config.fontColor.info');
+		}
+
+		&.v-tag--semicircle {
+			border-radius: v-bind('config.borderRadius.semicircle');
+		}
+
+		&.v-tag--square {
+			border-radius: v-bind('config.borderRadius.square');
+		}
+	}
+}
+</style>