v-uni-app-ui 1.0.2 → 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-text-button/v-text-button.vue

@@ -1,139 +0,0 @@
-<template>
-	<button
-		:class="['v-text-button', { 'v-text-button--disabled': disabled, 'v-text-button--loading': loading }, ` v-text-button--${type}`, `v-text-button--${size}`]"
-		:disabled="disabled || loading"
-		@click="handleClick"
-	>
-		<span v-if="loading" class="loading-text">{{ loadingText }}</span>
-		<span v-else>
-			<slot>{{ text }}</slot>
-		</span>
-	</button>
-</template>
-
-<script setup lang="ts">
-import { ref, inject } from 'vue';
-
-
-const props = defineProps({
-	type: {
-		type: String,
-		default: 'default'
-	},
-	size: {
-		type: String,
-		default: 'medium',
-		validator: (value: string) => ['small', 'medium', 'large'].includes(value)
-	},
-	text: {
-		type: String,
-		default: '',
-		required: true
-	},
-	disabled: {
-		type: Boolean,
-		default: false
-	},
-	loading: {
-		type: Boolean,
-		default: false
-	},
-	loadingText: {
-		type: String,
-		default: '加载中...'
-	}
-});
-
-const emit = defineEmits(['click']);
-const config = inject<any>('config');
-
-const handleClick = (event: MouseEvent) => {
-	if (!props.disabled && !props.loading) {
-		emit('click', event);
-	}
-};
-</script>
-
-<style lang="scss" scoped>
-.v-text-button {
-	border: none;
-	background-color: transparent;
-	cursor: pointer;
-	transition: all 0.3s;
-
-	&:hover {
-		opacity: 0.9;
-		text-decoration: underline;
-	}
-
-	&:active {
-		opacity: 0.8;
-	}
-
-	&--default {
-		color: v-bind("config.fontColor.default");
-	}
-
-	&--delete {
-		color: v-bind("config.fontColor.delete");
-	}
-
-	&--succeed {
-		color: v-bind("config.fontColor.succeed");
-	}
-
-	&--info {
-		color: v-bind("config.fontColor.info");
-	}
-
-	&--warn {
-		color: v-bind("config.fontColor.warn");
-	}
-
-	&--small {
-		font-size: v-bind("config.fontSize.smallText");
-	}
-
-	&--medium {
-		font-size: v-bind("config.fontSize.mediumText");
-	}
-
-	&--large {
-		font-size: v-bind("config.fontSize.largeText");
-	}
-
-	&--disabled,
-	&[disabled] {
-		opacity: v-bind("config.opacity.disabled");
-		cursor: not-allowed;
-	}
-
-	&--loading {
-		color: #287afa;
-		cursor: wait;
-	}
-
-	.loading-text {
-		animation: loadingDots 1.5s infinite;
-	}
-
-	@keyframes loadingDots {
-		0% {
-			opacity: 1;
-		}
-		50% {
-			opacity: 0.5;
-		}
-		100% {
-			opacity: 1;
-		}
-	}
-}
-uni-button:after {
-	border: none;
-}
-uni-button[disabled][type='default'],
-uni-button[disabled]:not([type]) {
-	background-color: transparent;
-}
-</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>