v-uni-app-ui 1.0.2 → 1.0.6

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>

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

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

package/components/model/compound/v-console/v-console.js

@@ -1,20 +0,0 @@
-export function initVConsole() {
-	const STORAGE_KEY = 'v-console-logs';
-	const logs = [];
-
-	['log', 'info', 'warn', 'error', 'debug'].forEach((type) => {
-		const original = console[type];
-		console[type] = (...args) => {
-			original.apply(console, args);
-			const time = new Date().toLocaleTimeString();
-			const msg = args.map((v) => (typeof v === 'object' ? JSON.stringify(v) : String(v))).join(' ');
-			logs.unshift({
-				type,
-				msg,
-				time,
-				blockLines: 2
-			});
-			uni.setStorageSync(STORAGE_KEY, logs);
-		};
-	});
-}

package/components/model/compound/v-console/v-console.vue

@@ -1,299 +0,0 @@
-<template>
-	<view
-		v-if="!visible"
-		class="console-toggle"
-		:style="{ left: btnPos.x + 'rpx', top: btnPos.y + 'rpx' }"
-		@touchstart="onTouchStart"
-		@touchmove="onTouchMove"
-		@touchend="onTouchEnd"
-		@mousedown="onTouchStart"
-		@mousemove="onTouchMove"
-		@mouseup="onTouchEnd"
-		@click="toggle"
-	>
-		<v-button>控制台</v-button>
-	</view>
-	<view v-if="visible" class="v-console" :class="{ expanded: expanded }">
-		<view class="toolbar">
-			<view class="buttons">
-				<v-text-button size="medium" @click="toggle">关闭</v-text-button>
-				<v-text-button size="medium" @click="toggleExpand">
-					{{ expanded ? '收起' : '展开' }}
-				</v-text-button>
-				<v-text-button size="medium" @click="clear">清空</v-text-button>
-			</view>
-			<view class="filter">
-				<v-input v-model="keyword" placeholder="关键字筛选" class="keyword" @confirm="onKeywordConfirm" />
-				<v-select-picker :options="levels" :value="levelIndex" @confirm="onLevelConfirm" class="level" />
-			</view>
-		</view>
-		<scroll-view scroll-y class="list">
-			<view v-for="(log, i) in showList" :key="i" :class="'log ' + log.type">
-				<text v-if="log.time" class="time">{{ log.time }} {{ log.type }}</text>
-				<!-- <v-text :class="['msg', log.type]" :lines="log.blockLines" @longpress="copyLog(log.msg)">{{ log.msg }}</v-text> -->
-				<view class="msg" :class="log.type" @longpress="copyLog(log.msg)">
-					<v-text :lines="log.blockLines">{{ log.msg }}</v-text>
-				</view>
-				<v-text-button class="detail-info" @click="log.blockLines == 2 ? (log.blockLines = 999) : (log.blockLines = 2)">
-					{{ log.blockLines == 2 ? '详细' : '简略' }}
-				</v-text-button>
-			</view>
-		</scroll-view>
-	</view>
-</template>
-
-<script setup>
-import { ref, computed, onMounted } from 'vue';
-
-const STORAGE_KEY = 'v-console-logs';
-const visible = ref(false);
-const toggle = () => (visible.value = !visible.value);
-
-const expanded = ref(false);
-const toggleExpand = () => (expanded.value = !expanded.value);
-
-const logs = ref([]);
-const keyword = ref('');
-const levelIndex = ref(0);
-const levels = [
-	{ label: '全部', value: 0 },
-	{ label: 'log', value: 1 },
-	{ label: 'info', value: 2 },
-	{ label: 'warn', value: 3 },
-	{ label: 'error', value: 4 },
-	{ label: 'debug', value: 5 }
-];
-
-const btnPos = ref({ x: 30, y: 100 });
-const dragging = ref(false);
-const startPos = ref({ x: 0, y: 0 });
-
-const rpx2px = (rpx) => (rpx * uni.getSystemInfoSync().windowWidth) / 750;
-
-onMounted(() => {
-	loadLogs();
-});
-
-const getPos = (e) => {
-	// #ifdef H5
-	return { x: e.clientX, y: e.clientY };
-	// #endif
-	// #ifndef H5
-	const touch = e.touches[0] || e.changedTouches[0];
-	return { x: touch.clientX, y: touch.clientY };
-	// #endif
-};
-
-/* 按下 */
-const onTouchStart = (e) => {
-	dragging.value = true;
-	startPos.value = getPos(e);
-};
-
-/* 移动 */
-const onTouchMove = (e) => {
-	if (!dragging.value) return;
-	const { windowWidth, windowHeight } = uni.getSystemInfoSync();
-	const cur = getPos(e);
-	const dx = cur.x - startPos.value.x;
-	const dy = cur.y - startPos.value.y;
-
-	/* 转成 rpx */
-	const newX = btnPos.value.x + (dx * 750) / windowWidth;
-	const newY = btnPos.value.y + (dy * 750) / windowHeight;
-
-	/* 边界限制：0~屏幕宽/高 - 按钮宽/高(≈120rpx) */
-	btnPos.value.x = Math.max(0, Math.min(newX, (windowWidth * 750) / windowWidth - 120));
-	btnPos.value.y = Math.max(0, Math.min(newY, (windowHeight * 750) / windowWidth - 120));
-
-	startPos.value = cur;
-};
-
-const onTouchEnd = () => (dragging.value = false);
-
-if (typeof window !== 'undefined') {
-	window.onerror = (msg, url, line, col, error) => {
-		console.error('[Global Error]', msg, `${url}:${line}:${col}`, error?.stack);
-	};
-	window.onunhandledrejection = (e) => {
-		console.error('[Unhandled Promise]', e.reason);
-	};
-} else {
-	// #ifdef MP-WEIXIN || MP-ALIPAY || MP-BAIDU || MP-QQ
-	wx.onError?.((res) => console.error('[wx Error]', res));
-	wx.onUnhandledRejection?.((res) => console.error('[wx Promise]', res.reason));
-	// #endif
-}
-
-
-['log', 'info', 'warn', 'error', 'debug'].forEach((type) => {
-	const origin = console[type];
-	console[type] = (...args) => {
-		origin.apply(console, args);
-		const time = new Date().toLocaleTimeString();
-		const msg = args.map((v) => (typeof v === 'object' ? JSON.stringify(v) : String(v))).join(' ');
-		const newLog = { type, msg, time, blockLines: 2 };
-		logs.value.unshift(newLog);
-		saveLogs();
-	};
-});
-
-const showList = computed(() => {
-	let list = logs.value;
-	if (levelIndex.value) {
-		list = list.filter((l) => l.type === levels[levelIndex.value].label.toLowerCase());
-	}
-
-	if (keyword.value.trim()) {
-		const k = keyword.value.trim().toLowerCase();
-		list = list.filter((l) => l.msg.toLowerCase().includes(k));
-	}
-	list.blockLines = 2;
-	return list;
-});
-const saveLogs = () => {
-	try {
-		// #ifdef H5
-		sessionStorage.setItem(STORAGE_KEY, JSON.stringify(logs.value));
-		// #endif
-		// #ifndef H5
-		uni.setStorageSync(STORAGE_KEY, logs.value);
-		// #endif
-	} catch (_) {}
-};
-
-const loadLogs = () => {
-	try {
-		let data = null;
-		// #ifdef H5
-		data = JSON.parse(sessionStorage.getItem(STORAGE_KEY) || '[]');
-		// #endif
-		// #ifndef H5
-		data = uni.getStorageSync(STORAGE_KEY) || [];
-		// #endif
-		logs.value = data;
-	} catch (_) {}
-};
-
-const clear = () => {
-	logs.value = [];
-	try {
-		// #ifdef H5
-		sessionStorage.removeItem(STORAGE_KEY);
-		// #endif
-		// #ifndef H5
-		uni.removeStorageSync(STORAGE_KEY);
-		// #endif
-	} catch (_) {}
-};
-
-const copyLog = (msg) => {
-	// #ifdef H5
-	const input = document.createElement('textarea');
-	input.value = msg;
-	document.body.appendChild(input);
-	input.select();
-	document.execCommand('copy');
-	document.body.removeChild(input);
-	uni.showToast({ title: '已复制', icon: 'none' });
-	// #endif
-	// #ifndef H5
-	uni.setClipboardData({ data: msg, showToast: false });
-	uni.showToast({ title: '已复制', icon: 'none' });
-	// #endif
-};
-const onKeywordConfirm = (e) => {
-	console.log(e);
-	keyword.value = e;
-};
-const onLevelConfirm = (e) => {
-	levelIndex.value = e;
-};
-</script>
-
-<style lang="scss" scoped>
-/* 悬浮开关按钮（黑底白字） */
-.console-toggle {
-	position: fixed;
-	right: 30rpx;
-	bottom: 100rpx;
-	z-index: 10000;
-}
-
-/* 控制台主体：白底黑字 */
-.v-console {
-	position: fixed;
-	left: 0;
-	right: 0;
-	bottom: 0;
-	z-index: 9999;
-	background: #fff;
-	color: #000;
-	font-family: monospace;
-	font-size: 0.75rem;
-	height: 120rpx; /* 默认收缩高度 */
-	transition: height 0.25s ease;
-	border-top: 1rpx solid #e5e5e5;
-
-	&.expanded {
-		height: 50%; /* 展开后高度 */
-	}
-
-	.toolbar {
-		display: flex;
-		padding: 12rpx 24rpx;
-		background: #f7f7f7;
-		border-bottom: 1rpx solid #e5e5e5;
-		flex-direction: column;
-		.buttons {
-			display: flex;
-		}
-		.filter {
-			display: flex;
-			.keyword {
-				flex: 1;
-				margin-right: 20rpx;
-			}
-			.level {
-				width: 200rpx;
-				:deep(.select-input) {
-					height: 60rpx;
-					line-height: 60rpx;
-				}
-			}
-		}
-	}
-
-	.list {
-		height: calc(100% - 100rpx);
-		padding: 16rpx;
-		.log {
-			display: flex;
-			line-height: 1.4;
-			margin-bottom: 8rpx;
-			.time {
-				margin-right: 12rpx;
-				color: #666;
-			}
-			.msg {
-				width: 50%;
-				&.log {
-					color: #008000;
-				}
-				&.info {
-					color: #0066cc;
-				}
-				&.warn {
-					color: #ff6600;
-				}
-				&.error {
-					color: #cc0000;
-				}
-				&.debug {
-					color: #666;
-				}
-			}
-		}
-	}
-}
-</style>