v-uni-app-ui 1.0.2 → 1.0.6

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

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

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

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