v-uni-app-ui 1.0.4 → 1.0.6

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

@@ -1,187 +0,0 @@
-<template>
-	<!-- <text :class="['v-text', `v-text--${type}`, `v-text--${size}`]" :style="textStyle">
-		<slot v-if="!processedText">{{ processedText }}</slot>
-		<view v-html="processedText">
-			
-		</view>
-	</text> -->
-	<view :class="['v-text', `v-text--${type}`, `v-text--${size}`]" :style="textStyle">
-		<slot v-if="!processedText">{{ processedText }}</slot>
-		<rich-text :nodes="processedText"></rich-text>
-	</view>
-</template>
-
-<script setup lang="ts">
-import { computed, inject } from 'vue';
-
-const props = defineProps({
-	text: {
-		type: String,
-		default: ''
-	},
-	type: {
-		type: String,
-		default: 'default',
-		validator: (value: string) => {
-			return ['default', 'primary', 'succeed', 'warning', 'delete', 'info'].includes(value);
-		}
-	},
-	size: {
-		type: String,
-		default: 'medium',
-		validator: (value: string) => {
-			return ['small', 'medium', 'large'].includes(value);
-		}
-	},
-	color: {
-		type: String,
-		default: ''
-	},
-	lineHeight: {
-		type: [Number, String],
-		default: 1.5
-	},
-	mode: {
-		type: String,
-		default: '',
-		validator: (value: string) => {
-			return ['', 'timestamp', 'amount'].includes(value);
-		}
-	},
-	encrypt: {
-		type: String,
-		default: '',
-		validator: (value: string) => {
-			return ['', 'phone', 'name'].includes(value);
-		}
-	},
-	lines: {
-		type: [Number, String],
-		default: 1
-	},
-	format: {
-		type: String,
-		default: ''
-	},
-	keyword: { type: String, default: '' },
-	keywordColor: { type: String, default: '#ff5e5e' }
-});
-
-const config = inject<any>('config');
-
-const processedText = computed(() => {
-	let result = props.text;
-
-	if (props.mode === 'timestamp' && props.format) {
-		// 尝试将文本转换为日期对象
-		let date: Date;
-		if (/^\d+$/.test(props.text)) {
-			// 如果是时间戳（数字）
-			date = new Date(parseInt(props.text));
-		} else {
-			// 如果是日期字符串
-			date = new Date(props.text);
-		}
-
-		if (!isNaN(date.getTime())) {
-			const year = date.getFullYear();
-			const month = date.getMonth() + 1;
-			const day = date.getDate();
-			const hours = date.getHours();
-			const minutes = date.getMinutes();
-			const seconds = date.getSeconds();
-
-			result = props.format
-				.replace('yyyy', year.toString())
-				.replace('MM', month.toString().padStart(2, '0'))
-				.replace('dd', day.toString().padStart(2, '0'))
-				.replace('HH', hours.toString().padStart(2, '0'))
-				.replace('mm', minutes.toString().padStart(2, '0'))
-				.replace('ss', seconds.toString().padStart(2, '0'));
-		}
-	} else if (props.mode === 'amount' && props.format) {
-		const amount = parseFloat(props.text);
-		if (!isNaN(amount)) {
-			if (props.format === '$') {
-				result = `$${amount.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
-			} else if (props.format === '￥') {
-				result = `￥${amount.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
-			}
-		}
-	}
-
-	if (props.encrypt === 'phone' && result.length === 11) {
-		result = result.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
-	} else if (props.encrypt === 'name' && result.length > 1) {
-		const firstChar = result.charAt(0);
-		result = firstChar + '****' + result.slice(-1);
-	}
-
-	// 关键字高亮（最后一步）
-	if (props.keyword) {
-		const reg = new RegExp(`(${props.keyword.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi');
-		// 先转义再替换
-		const escape = (str: string) => str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#x27;');
-		result = escape(result).replace(reg, `<span style="color:${props.keywordColor}" class="v-text__keyword">$1</span>`);
-	}
-
-	return result;
-});
-
-const textStyle = computed(() => {
-	const style: Record<string, string | number> = {};
-	if (props.color) style.color = props.color;
-	if (props.lineHeight) style.lineHeight = typeof props.lineHeight === 'number' ? `${props.lineHeight}` : props.lineHeight;
-	if (props.lines) {
-		style.webkitLineClamp = typeof props.lines === 'number' ? `${props.lines}` : props.lines;
-		style.overflow = 'hidden';
-		style.textOverflow = 'ellipsis';
-		style.display = '-webkit-box';
-		style.webkitBoxOrient = 'vertical';
-	}
-	return style;
-});
-</script>
-
-<style lang="scss" scoped>
-.v-text {
-	font-size: v-bind('config.fontSize.mediumText');
-	line-height: 1.5;
-
-	&--default {
-		color: v-bind('config.fontColor.text');
-	}
-
-	&--primary {
-		color: v-bind('config.fontColor.default');
-	}
-
-	&--succeed {
-		color: v-bind('config.fontColor.succeed');
-	}
-
-	&--warn {
-		color: v-bind('config.fontColor.warn');
-	}
-
-	&--delete {
-		color: v-bind('config.fontColor.delete');
-	}
-
-	&--info {
-		color: v-bind('config.fontColor.info');
-	}
-
-	&--small {
-		font-size: v-bind('config.fontSize.smallText');
-	}
-
-	&--medium {
-		font-size: v-bind('config.fontSize.mediumText');
-	}
-
-	&--large {
-		font-size: v-bind('config.fontSize.largeText');
-	}
-}
-</style>

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

@@ -1,178 +0,0 @@
-<template>
-	<view class="v-textarea-container">
-		<textarea
-			:value="inputValue"
-			:class="['v-textarea', { 'v-textarea--disabled': disabled, 'v-textarea--focused': focused }, `v-textarea--border--${boderModel}`]"
-			:placeholder="placeholder"
-			:maxlength="maxlength || undefined"
-			:disabled="disabled"
-			:auto-height="autoHeight"
-			@input="handleInput"
-			@focus="handleFocus"
-			@blur="handleBlur"
-			@confirm="handleConfirm"
-		></textarea>
-		<view v-if="showCounter" class="v-textarea-counter">{{ currentLength }}/{{ maxlength }}</view>
-	</view>
-</template>
-
-<script setup lang="ts">
-import { ref, watch,inject } from 'vue';
-
-/**
- * v-textarea 文本框
- * value 		双向绑定
- * placeholder 	提示词
- * maxlength	最大输入限制
- * disabled		是否禁用				默认值:false		可选值:true禁用	false不禁用
- * autoHeight	是否自动延长高度		默认值:true		可选值:true禁用	false不禁用
- * boderModel	边框模式				默认值:all		可选值:all普通边框 nont无边框模式 bottom底部边框模式 top上边框模式 left左边框模式 right右边框模式 ends左右两端边框模式 up-down上下边框模式
- * showCounter	是否显示字数
- * inputTextPosition 输入框文本位置  默认值：left  可选值：left居左 right居右 center居中
- * 相关事件:focus、blur、confirm
- */
-const props = defineProps({
-	value: {
-		type: String,
-		default: '',
-		required: true
-	},
-	placeholder: {
-		type: String,
-		default: ''
-	},
-	maxlength: {
-		type: Number,
-		default: null
-	},
-	disabled: {
-		type: Boolean,
-		default: false
-	},
-	autoHeight: {
-		type: Boolean,
-		default: true
-	},
-	boderModel: {
-		type: String,
-		default: 'all'
-	},
-	showCounter: {
-		type: Boolean,
-		default: false
-	},
-	inputTextPosition:{
-		type:String,
-		default:"left"
-	}
-});
-
-const emit = defineEmits(['update:value', 'input', 'focus', 'blur', 'confirm']);
-
-const config = inject<any>('config');
-const inputValue = ref(props.value);
-const focused = ref(false);
-const currentLength = ref(props.value.length);
-
-watch(
-	() => props.value,
-	(newVal) => {
-		inputValue.value = newVal;
-		currentLength.value = newVal.length;
-	}
-);
-
-const handleInput = (e: any) => {
-	const value = e.detail.value;
-	inputValue.value = value;
-	currentLength.value = value.length;
-	emit('update:value', value);
-	emit('input', value);
-};
-
-const handleFocus = (e: any) => {
-	focused.value = true;
-	emit('focus', e);
-};
-
-const handleBlur = (e: any) => {
-	focused.value = false;
-	emit('blur', e);
-};
-
-const handleConfirm = (e: any) => {
-	emit('confirm', e);
-};
-</script>
-
-<style lang="scss" scoped>
-.v-textarea-container {
-	position: relative;
-}
-
-.v-textarea {
-	width: 100%;
-	padding: 24rpx;
-	box-sizing: border-box;
-	background-color: #fff;
-	font-size:  v-bind("config.fontSize.mediumText");
-	line-height: 1.5;
-	transition: border-color 0.3s;
-	resize: none;
-	text-align: v-bind("props.inputTextPosition");
-
-	&--border--all {
-		border-radius: 6rpx;
-		border: 1px solid v-bind("config.border.color");
-
-		&.v-textarea--focused {
-			border-color: v-bind("config.border.default");
-			box-shadow: v-bind("config.VInput.boxShadow");
-		}
-	}
-
-	&--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");
-	}
-	
-	&--disabled{
-		opacity: v-bind('config.opacity.disabled');
-		background-color: v-bind('config.backgroundColor.disabled');
-		color: v-bind('config.fontColor.text');
-	}
-}
-
-.v-textarea-counter {
-	position: absolute;
-	bottom: 5rpx;
-	right: 5rpx;
-	font-size: v-bind("config.fontSize.mediumText");
-	color: #999;
-}
-</style>

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

@@ -1,91 +0,0 @@
-<template>
-	<view :class="['v-title', `v-title--level-${level}`]" :style="titleStyle">
-		<slot></slot>
-	</view>
-</template>
-
-<script lang="ts" setup>
-import { computed,inject } from 'vue';
-
-const props = defineProps({
-	level: {
-		type: Number,
-		default: 1,
-		validator: (val: number) => val >= 1 && val <= 6
-	},
-	fontSize: {
-		type: String,
-		default: ''
-	},
-	color: {
-		type: String,
-		default: ''
-	}
-});
-
-const config = inject<any>('config');
-const titleStyle = computed(() => {
-	const style: Record<string, string> = {};
-	if (props.fontSize) {
-		style['font-size'] = props.fontSize;
-	}
-	if (props.color) {
-		style['color'] = props.color;
-	}
-	return style;
-});
-</script>
-
-<style lang="scss" scoped>
-.v-title {
-	font-weight: bold;
-
-	&--level-1 {
-		font-size: v-bind("config.fontSize.largeTitle");
-		color: v-bind("config.fontColor.mianTitle");
-	}
-
-	&--level-2 {
-		font-size: v-bind("config.fontSize.mediumTitle");
-		color: v-bind("config.fontColor.mianTitle");
-	}
-
-	&--level-3 {
-		font-size: v-bind("config.fontSize.smallTitle");
-		color: v-bind("config.fontColor.mianTitle");
-	}
-
-	&--level-4 {
-		font-size: v-bind("config.fontSize.largeText");
-		color: v-bind("config.fontColor.subTitle");
-	}
-
-	&--level-5 {
-		font-size: v-bind("config.fontSize.mediumText");
-		color: v-bind("config.fontColor.subTitle");
-	}
-
-	&--level-6 {
-		font-size: v-bind("config.fontSize.smallText");
-		color: v-bind("config.fontColor.subTitle");
-	}
-
-	@media (prefers-color-scheme: dark) {
-		&--level-1,
-		&--level-2,
-		&--level-3 {
-			color: #e0e0e0;
-		}
-
-		&--level-4,
-		&--level-5,
-		&--level-6 {
-			color: #b0b0b0;
-		}
-
-		:deep(.v-title) {
-			color: #e0e0e0;
-		}
-	}
-}
-</style>

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

@@ -1,198 +0,0 @@
-<template>
-	<view v-if="toastList.length > 0" class="toast-container">
-		<view v-for="(toast, index) in toastList" :key="index" class="toast-content-wrapper" :style="{ top: `${20 + index * 10}%` }">
-			<view class="toast-content" :class="[toast.typeClass, toast.customClass]" v-if="toast.isVisible">
-				<!-- 信息图标 -->
-				<text v-if="toast.type === 'info'" class="icon">
-					<image src="./info.png" />
-				</text>
-				<!-- 警告图标 -->
-				<text v-else-if="toast.type === 'warn'" class="icon"><image src="./warn.png" /></text>
-				<!-- 加载中图标 -->
-				<view v-else-if="toast.type === 'loading'" class="loading-icon"></view>
-				<!-- 成功图标 -->
-				<text v-else-if="toast.type === 'success'" class="icon"><image src="./success.png" /></text>
-				<!-- 错误图标 -->
-				<text v-else-if="toast.type === 'error'" class="icon"><view class="text-icon">✕</view></text>
-				<!-- 消息内容 -->
-				<text class="toast-message">{{ toast.message }}</text>
-			</view>
-		</view>
-	</view>
-</template>
-
-<script lang="ts" setup>
-import { ref, computed, onUnmounted } from 'vue';
-import { config } from '../../../config';
-
-type ToastType = 'info' | 'success' | 'error' | 'loading' | 'warn';
-type ToastPosition = 'top' | 'center' | 'bottom';
-
-interface ToastItem {
-	message: string;
-	type: ToastType;
-	position: ToastPosition;
-	duration: number;
-	customClass: string;
-	typeClass: string;
-	isVisible: boolean;
-	isLoaded: boolean;
-	timer?: NodeJS.Timeout;
-}
-
-// Toast 列表
-const toastList = ref<ToastItem[]>([]);
-
-const show = (options: { message: string; type?: ToastType; duration?: number; position?: ToastPosition; customClass?: string }) => {
-	// 如果超过3个，则清空全部
-	if (toastList.value.length >= 3) {
-		clearAll();
-	}
-
-	// 添加新的 Toast
-	const newToast: ToastItem = {
-		message: options.message,
-		type: options.type || 'info',
-		duration: options.duration || 2000,
-		position: options.position || 'top',
-		customClass: options.customClass || '',
-		typeClass: `toast-${options.type || 'info'}`,
-		isVisible: true,
-		isLoaded: false
-	};
-
-	toastList.value.push(newToast);
-	if (newToast.duration > 0) {
-		newToast.timer = setTimeout(() => {
-			removeToast(newToast);
-		}, newToast.duration);
-	}
-};
-
-const removeToast = (toast: ToastItem) => {
-	if (!toast.timer) {
-		return;
-	}
-	clearTimeout(toast.timer);
-	toast.timer = undefined; 
-	toast.isVisible = false;
-	console.log(JSON.stringify(toast));
-	toastList.value = toastList.value.filter((t) => t !== toast);
-};
-
-const clearAll = () => {
-	// 清除所有定时器
-	toastList.value.forEach((toast) => {
-		if (toast.timer) {
-			clearTimeout(toast.timer);
-			toast.timer = undefined;
-		}
-	});
-	toastList.value = [];
-};
-
-onUnmounted(() => {
-	clearAll();
-});
-
-defineExpose({ show, clearAll });
-</script>
-
-<style lang="scss">
-.toast-container {
-	position: fixed;
-	left: 0;
-	right: 0;
-	top: 10%;
-	bottom: 0;
-	display: flex;
-	flex-direction: column;
-	justify-content: flex-start;
-	pointer-events: none;
-	z-index: 9999;
-}
-
-.toast-content-wrapper {
-	margin-top: 2.5%;
-	display: flex;
-	justify-content: center;
-}
-
-.toast-content {
-	min-width: 65%;
-	padding: 15rpx 25rpx;
-	background-color: #000000;
-	opacity: v-bind('config.opacity.toast');
-	border-radius: 8rpx;
-	color: v-bind('config.fontColor.reversal');
-	font-size: 28rpx;
-	display: flex;
-	align-items: center;
-	max-width: 70%;
-	box-sizing: border-box;
-	line-height: 1.5;
-
-	.icon {
-		margin-right: 16rpx;
-		font-size: 36rpx;
-		image {
-			margin: auto;
-			width: 32rpx;
-			height: 32rpx;
-			margin-top: 10rpx;
-		}
-		.text-icon {
-			display: block;
-			margin-top: -8rpx;
-		}
-	}
-	.toast-message {
-		margin-left: 20rpx;
-		text-align: left;
-		display: flex;
-		align-items: center;
-	}
-
-	.loading-icon {
-		width: 36rpx;
-		height: 36rpx;
-		margin-right: 16rpx;
-		border: 4rpx solid #fff;
-		border-top-color: transparent;
-		border-radius: 50%;
-		animation: rotating 1s linear infinite;
-		display: flex;
-		align-items: center;
-	}
-
-	&.toast-info {
-		background-color: v-bind('config.backgroundColor.info');
-	}
-
-	&.toast-success {
-		background-color: v-bind('config.backgroundColor.succeed');
-	}
-
-	&.toast-error {
-		background-color: v-bind('config.backgroundColor.delete');
-	}
-
-	&.toast-warn {
-		background-color: v-bind('config.backgroundColor.warn');
-	}
-
-	&.toast-loading {
-		background-color: #000000;
-		opacity: v-bind('config.opacity.toast');
-	}
-}
-
-@keyframes rotating {
-	from {
-		transform: rotate(0deg);
-	}
-	to {
-		transform: rotate(360deg);
-	}
-}
-</style>