v-uni-app-ui 1.0.2 → 1.0.6

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

@@ -1,226 +0,0 @@
-<template>
-	<view class="v-form" :class="[layout]">
-		<slot></slot>
-		<slot name="operate" :handleSubmit="handleSubmit" :handleRest="handleRest" :buttonDisabled="submitting" :buttonSize="buttonSize">
-			<view class="form-actions">
-				<v-button :disabled="submitting" @click="handleSubmit" :size="buttonSize">
-					<text v-if="!submitting">{{ submitText }}</text>
-					<text v-else>提交中...</text>
-				</v-button>
-				<v-button type="info" @click="handleRest" :size="buttonSize" v-if="showRest">重置</v-button>
-			</view>
-		</slot>
-	</view>
-</template>
-
-<script lang="ts" setup>
-import { ref, provide, reactive, watchEffect, inject } from 'vue';
-
-type FormItem = {
-	validate: () => Promise<boolean>;
-	resetField: () => void;
-};
-
-interface Rules {
-	required?: boolean;
-	message?: string;
-	pattern?: RegExp;
-	minLength?: number;
-	maxLength?: number;
-	validator?: (value: any) => boolean | Promise<boolean>;
-	compareWith?: string;
-	min?: number;
-	max?: number;
-	type?: 'email' | 'mobile' | 'number' | 'integer';
-}
-
-/**
- * v-form 表单
- * model		表单数据对象
- * rules		验证规则	{ field: [{ required: true, message: '提示' }]}
- * submitText	提交按钮文字
- * layout		表单布局方式	默认值: vertical  	可选值: vertical垂直排列 | horizontal水平排列
- * labelLayout	标签对齐方式	默认值:	top			可选值:
- * labelPosition标签垂直方式 默认值: normal		可选值:center
- * buttonSize	按钮大小		默认值:	medium		可选值:small小medium中large大
- * showRest		是否显示重置按钮		默认值true	可选值:true显示 false不显示
- * disabled		是否禁用表单			默认值false	可选值:true禁用 false不禁用
- * 相关事件:validate	校验、submit提交、rest重置
- */
-
-const props = defineProps({
-	model: {
-		type: Object,
-		required: true,
-		default: () => ({})
-	},
-	rules: {
-		type: Object as () => Rules,
-		default: () => ({})
-	},
-	submitText: {
-		type: String,
-		default: '提交'
-	},
-	layout: {
-		type: String,
-		default: 'vertical',
-		validator: (v: string) => ['vertical', 'horizontal'].includes(v)
-	},
-	buttonSize: {
-		type: String,
-		default: 'medium',
-		validator: (v: string) => ['small', 'medium', 'large'].includes(v)
-	},
-	showRest: {
-		type: Boolean,
-		default: true
-	},
-	disabled: {
-		type: Boolean,
-		default: false
-	},
-	labelWidth: {
-		type: String,
-		default: '180'
-	},
-	labelLayout: {
-		type: String,
-		default: 'top'
-	},
-	labelLast: {
-		type: String,
-		default: 'auto'
-	},
-	labelPosition: {
-		type: String,
-		default: 'normal'
-	},
-	labelSpacing: {
-		type: Number,
-		default: 0
-	}
-});
-
-const emit = defineEmits(['submit', 'validate', 'rest']);
-
-const formHasError = ref(false);
-const config = inject<any>('config');
-const formItems = new Map<string, FormItem>();
-const submitting = ref(false);
-const formData = reactive({ ...props.model });
-
-provide('form', {
-	rules: props.rules || {},
-	formData,
-	register: (name: string, item: FormItem) => {
-		formItems.set(name, item);
-	},
-	unregister: (name: string) => {
-		formItems.delete(name);
-	},
-	formHasError:formHasError
-});
-
-const handleSubmit = async () => {
-	submitting.value = true;
-	formHasError.value = false;
-	try {
-		const results = await Promise.all(Array.from(formItems.values()).map((item) => item.validate()));
-		const isValid = results.every((valid) => valid);
-
-		emit('validate', isValid);
-		if (isValid) {
-			emit('submit', formData);
-		} else {
-			formHasError.value = true;
-		}
-	} finally {
-		submitting.value = false;
-	}
-};
-
-const handleRest = () => {
-	emit('rest', formData);
-};
-
-const resetForm = () => {
-	formItems.forEach((item) => item.resetField());
-};
-
-defineExpose({
-	resetForm,
-	validate: handleSubmit
-});
-
-watchEffect(() => {
-	Object.assign(formData, props.model);
-});
-</script>
-
-<style lang="scss">
-.v-form {
-	$gap: 20rpx;
-	$error-color: v-bind('config.fontColor.delete');
-
-	&.horizontal {
-		:deep(.form-item) {
-			display: flex;
-			flex-direction: row;
-
-			.label {
-				margin-right: $gap;
-			}
-		}
-	}
-
-	:deep(.form-item) {
-		margin-bottom: $gap;
-		.title {
-			width: v-bind("props.labelWidth + 'rpx'");
-			display: flex;
-			align-items: v-bind('props.labelPosition');
-
-			.label {
-				width: 80%;
-				font-size: v-bind('config.fontSize.largeText');
-				color: v-bind('config.fontColor.subTitle');
-				text-align: v-bind('props.labelLayout');
-				text-align-last: v-bind('props.labelLast');
-				letter-spacing: v-bind("props.labelSpacing + 'rpx'");
-			}
-			.required {
-				width: 20%;
-				height: 100%;
-				.v-text {
-					color: $error-color;
-					margin-left: 8rpx;
-					height: 100%;
-					display: flex !important;
-					align-items: v-bind('props.labelPosition');
-				}
-			}
-		}
-		.control {
-			min-width: 50%;
-		}
-
-		.error-message {
-			width: 100%;
-			height: 40rpx;
-			margin-top: 8rpx;
-			.v-text {
-				color: $error-color;
-				font-size: v-bind('config.fontSize.mediumText');
-			}
-		}
-	}
-
-	.form-actions {
-		margin-top: 40rpx;
-		.v-button {
-			width: 100%;
-		}
-	}
-}
-</style>

package/components/model/compound/v-form-item/v-form-item.vue

@@ -1,255 +0,0 @@
-<template>
-	<view :class="['form-item', `form-item--border--${borderModel}`, { 'form-item--hint--model': !hintModel }]">
-		<view class="title">
-			<view class="required" v-if="requiredPosition == 'left'">
-				<v-text v-if="isRequired">*</v-text>
-			</view>
-			<view v-if="label" class="label">
-				{{ label }}
-			</view>
-			<view class="required" v-if="requiredPosition == 'right'">
-				<v-text v-if="isRequired">*</v-text>
-			</view>
-		</view>
-		<view class="control">
-			<slot></slot>
-			<view class="error-message" v-if="hintModel">
-				<v-text v-if="error" type="danger">{{ error }}</v-text>
-			</view>
-		</view>
-		<v-toast ref="toast"></v-toast>
-	</view>
-</template>
-
-<script lang="ts" setup>
-import { ref, inject, onMounted, onUnmounted } from 'vue';
-import { getCurrentInstance } from 'vue';
-
-const { proxy } = getCurrentInstance();
-
-const props = defineProps({
-	label: {
-		type: String,
-		default: ''
-	},
-	name: {
-		type: String,
-		required: true
-	},
-	requiredPosition: {
-		type: String,
-		default: 'right'
-	},
-	hintModel: {
-		type: Boolean,
-		default: true
-	},
-	borderModel: {
-		type: String,
-		default: 'bottom',
-		validator: (v) => ['all', 'none', 'bottom', 'top', 'left', 'right', 'ends', 'up-down'].includes(v)
-	}
-});
-
-const toast = ref(null);
-const error = ref('');
-const isRequired = ref(false);
-const config = inject('config');
-const formContext = inject('form', {
-	rules: {},
-	formData: {},
-	register: (name, validate) => {
-		console.log(name, validate);
-	},
-	unregister: (name) => {
-		console.log(name);
-	},
-	formHasError:{
-		value:false
-	},
-});
-
-const validate = async () => {
-	const rules = formContext.rules[props.name] || [];
-	const value = formContext.formData[props.name];
-	const formData = formContext.formData;
-
-	for (const rule of rules) {
-		// 必填校验
-		if (rule.required) {
-			let isEmpty = false;
-			if (value === null || value === undefined || value === '') {
-				isEmpty = true;
-			} else if (typeof value === 'string' || typeof value === 'number') {
-				if (value != null && value !== undefined) {
-					isEmpty = !value.toString().trim();
-				}
-			} else if (Array.isArray(value)) {
-				isEmpty = value.length === 0;
-			} else if (typeof value === 'object') {
-				isEmpty = Object.keys(value).length === 0;
-			}
-			if (isEmpty) {
-				hintModelMessage(rule.message || `${props.label}不能为空`);
-				return false;
-			}
-		}
-
-		// 类型转换校验（非空后执行）
-		let processedValue = value;
-		if ((rule.type === 'number' || rule.type === 'integer') && value !== null && value !== undefined) {
-			processedValue = Number(value);
-			if (isNaN(processedValue)) {
-				hintModelMessage(rule.message || `${props.label}必须为数字`);
-				return false;
-			}
-			if (rule.type === 'integer' && !Number.isInteger(processedValue)) {
-				hintModelMessage(rule.message || `${props.label}必须为整数`);
-				return false;
-			}
-		}
-
-		// 格式校验
-		if (value !== null && value !== undefined && value !== '') {
-			if (rule.pattern && !rule.pattern.test(value)) {
-				hintModelMessage(rule.message || `${props.label}格式错误`);
-				return false;
-			}
-
-			// 内置类型校验
-			if (rule.type === 'email' && !/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(value)) {
-				hintModelMessage(rule.message || `请输入有效的邮箱地址`);
-				return false;
-			}
-
-			if (rule.type === 'mobile' && !/^1[3-9]\d{9}$/.test(value)) {
-				hintModelMessage(rule.message || `请输入有效的手机号码`);
-				return false;
-			}
-
-			// 长度校验
-			if (rule.minLength !== undefined && value.length < rule.minLength) {
-				hintModelMessage(rule.message || `${props.label}至少需要${rule.minLength}个字符`);
-				return false;
-			}
-
-			if (rule.maxLength !== undefined && value.length > rule.maxLength) {
-				hintModelMessage(rule.message || `${props.label}不能超过${rule.maxLength}个字符`);
-				return false;
-			}
-
-			// 数值范围校验
-			if (typeof rule.min === 'number' && processedValue < rule.min) {
-				hintModelMessage(rule.message || `${props.label}不能小于${rule.min}`);
-				return false;
-			}
-
-			if (typeof rule.max === 'number' && processedValue > rule.max) {
-				hintModelMessage(rule.message || `${props.label}不能大于${rule.max}`);
-				return false;
-			}
-
-			// 关联字段校验（如密码确认）
-			if (rule.compareWith) {
-				const compareValue = formData[rule.compareWith];
-				if (value !== compareValue) {
-					hintModelMessage(rule.message || `${props.label}必须与${rule.compareWith}保持一致`);
-					return false;
-				}
-			}
-
-			// 自定义校验函数
-			if (rule.validator) {
-				const result = await rule.validator(value, formData);
-				if (!result) {
-					hintModelMessage(rule.message || `${props.label}验证未通过`);
-					return false;
-				}
-			}
-		}
-	}
-
-	error.value = '';
-	return true;
-};
-
-const hintModelMessage = (message: string) => {
-	if (props.hintModel) {
-		error.value = message;
-	} else {
-		if (formContext && formContext.formHasError.value) {
-			return;
-		}
-		if (toast.value) {
-			toast.value.show({
-				message: message,
-				type: 'error',
-				duration: 3000
-			});
-			formContext.formHasError.value = true;
-		}
-	}
-};
-
-const resetField = () => {
-	error.value = '';
-	formContext.formData[props.name] = null;
-};
-
-// 注册到父表单
-onMounted(() => {
-	if (formContext && formContext.register) {
-		formContext.register(props.name, { validate, resetField });
-		if (formContext.rules && formContext.rules[props.name]) {
-			isRequired.value = formContext.rules[props.name].some((r) => r.required);
-		}
-	}
-});
-
-onUnmounted(() => {
-	if (formContext && formContext.unregister) {
-		formContext.unregister(props.name);
-	}
-});
-</script>
-<style lang="scss" scoped>
-.form-item {
-	&--hint--model {
-		padding-bottom: 20rpx;
-	}
-
-	&--border--all {
-		border: 1rpx solid v-bind('config.VFormItem.borderColor');
-	}
-
-	&--border--none {
-		border: none;
-	}
-
-	&--border--bottom {
-		border-bottom: 1rpx solid v-bind('config.VFormItem.borderColor');
-	}
-
-	&--border--top {
-		border-top: 1rpx solid v-bind('config.VFormItem.borderColor');
-	}
-
-	&--border--left {
-		border-left: 1rpx solid v-bind('config.VFormItem.borderColor');
-	}
-
-	&--border--right {
-		border-right: 1rpx solid v-bind('config.VFormItem.borderColor');
-	}
-
-	&--border--ends {
-		border-left: 1rpx solid v-bind('config.VFormItem.borderColor');
-		border-right: 1rpx solid v-bind('config.VFormItem.borderColor');
-	}
-
-	&--border--up-down {
-		border-top: 1rpx solid v-bind('config.VFormItem.borderColor');
-		border-bottom: 1rpx solid v-bind('config.VFormItem.borderColor');
-	}
-}
-</style>