v-uni-app-ui 1.0.0 → 1.0.2

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>

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

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

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

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