tang-ui-x 1.0.5 → 1.1.0

package/components/VbenFrom/index.uvue

@@ -1,392 +0,0 @@
-<script  setup lang="uts" >
-
-	import RadioButton from '../RadioButton/index'
-	import CheckboxButton from '../CheckboxButton/index'
-
-	type FormOption = { label : string; value : string | number }
-	type FormSchema = {
-		field : string
-		label : string
-		component : 'input' | 'textarea' | 'select' | 'date' | 'radio' | 'checkbox' | 'switch'
-		placeholder ?: string
-		required ?: boolean
-		options ?: FormOption[]
-		type ?: string
-	}
-
-	type Props = {
-		schemas : FormSchema[]
-		activeColor ?: string
-		inactiveColor ?: string
-		backgroundColor ?: string
-		hideButtons ?: boolean // 是否隐藏默认按钮
-	}
-
-	const props = withDefaults(defineProps<Props>(), {
-		activeColor: '#00bba7',
-		inactiveColor: '#666666',
-		backgroundColor: '#ffffff',
-		hideButtons: false,
-	})
-
-	const emit = defineEmits(['submit', 'reset'])
-
-	/** 使用 defineModel 实现双向数据绑定 */
-	const model = defineModel<Record<string, any>>({ default: () => ({}) })
-
-	/** 验证错误状态 */
-	const errors = reactive<Record<string, string>>({})
-
-	/** 动态 CSS 变量 */
-	const cssVars = computed(() => ({
-		'--hover-active-color': props.activeColor,
-		'--hover-inactive-color': props.inactiveColor,
-		'--hover-bg-color': props.backgroundColor,
-	}))
-
-
-	/** placeholder */
-
-	const hanldePlaceholder=(item : FormSchema): string => {
-		return item.placeholder || `请输入${item.label}`
-	}
-	/** 处理范围选择器选项 */
-	const hanldeRange = (options) => {
-		return options?.map(o => o.label) || []
-	}
-
-
-	/** select 选中项文字 */
-	const getSelectLabel = (item : FormSchema) => {
-		const opt = item.options?.find(o => o.value === model.value[item.field])
-		return opt?.label || ''
-	}
-
-	/** 选择器变化 */
-	const onSelectChange = (e : any, item : FormSchema) => {
-		const index = e.detail.value as number
-		const value = item.options?.[index]?.value ?? ''
-		model.value[item.field] = value
-		validateField(item)
-	}
-
-
-	/** 选择时间 */
-	const onTimeChange = (e : any, item : FormSchema) => {
-		model.value[item.field] = e.detail.value
-		validateField(item)
-	}
-
-	/** 验证单个字段 */
-	const validateField = (item : FormSchema) => {
-		if (item.required && !model.value[item.field]) {
-			errors[item.field] = `请输入${item.label}`
-		} else {
-			delete errors[item.field]
-		}
-	}
-
-	/** 单选变化 */
-	const onRadioChange = (value : string | number, item : FormSchema) => {
-		model.value[item.field] = value
-		validateField(item)
-	}
-
-	/** 多选变化 */
-	const onCheckboxChange = (values : (string | number)[], item : FormSchema) => {
-		model.value[item.field] = values
-		validateField(item)
-	}
-
- /** 提交表单 */
-const onFormSubmit = async (e: UniFormSubmitEvent): Promise<{ valid: boolean, values: any }> => {
-  // 清空所有错误
-  Object.keys(errors).forEach(k => delete errors[k])
-
-  // 验证所有必填项
-  let hasError = false
-  for (const item of props.schemas) {
-    validateField(item)
-    if (item.required && !model.value[item.field]) {
-      hasError = true
-    }
-  }
-
-  // 如果有错误，阻止提交
-  if (hasError) {
-    console.warn('表单验证失败，存在必填项未填写')
-    return { valid: false, values: null }
-  }
-
-  // ✅ 返回异步提交结果
-  try {
-    await emit('submit', model.value)
-    return { valid: true, values: model.value}
-  } catch (err) {
-    console.error('表单提交失败:', err)
-    return { valid: false, values: null }
-  }
-}
-
-
-	/** 重置表单 */
-	const onFormReset = () => {
-		Object.keys(model.value).forEach(k => (model.value[k] = ''))
-		Object.keys(errors).forEach(k => delete errors[k])
-		emit('reset')
-	}
-
-	// 对外暴露的方法
-	defineExpose({
-		/** 提交表单 */
-		submit:async () => {
-	 return	await	onFormSubmit({} as UniFormSubmitEvent)
-		},
-		/** 重置表单 */
-		reset: () => {
-			onFormReset()
-		},
-		/** 验证所有字段 */
-		validate: () => {
-			Object.keys(errors).forEach(k => delete errors[k])
-			let hasError = false
-			for (const item of props.schemas) {
-				validateField(item)
-				if (item.required && !model.value[item.field]) {
-					hasError = true
-				}
-			}
-			return !hasError
-		},
-		/** 获取表单数据 */
-		getFormData: () => ({ ...model.value }),
-		/** 获取错误信息 */
-		getErrors: () => ({ ...errors })
-	})
-</script>
-
-<template>
-	<view class="vform-container" :style="cssVars">
-		<form @submit="onFormSubmit" @reset="onFormReset">
-			<view v-for="(item, index) in schemas" class="form-item-box" :key="index">
-				<view class="form-item">
-					<view class="label">
-						<text>{{ item.label }}</text>
-						<text v-if="item.required" class="required">*</text>
-					</view>
-
-					<view class="components">
-						<input v-if="item.component === 'input'" v-model="model[item.field]" :placeholder="hanldePlaceholder(item)"
-							:type="item.type || 'text'" :name="item.field" class="input" @input="validateField(item)" />
-
-						<!-- 文本域 -->
-						<textarea v-if="item.component === 'textarea'" v-model="model[item.field]"
-							:placeholder="hanldePlaceholder(item)" :name="item.field" class="textarea"
-							@input="validateField(item)"></textarea>
-
-						<!-- 下拉选择 -->
-						<picker v-else-if="item.component === 'select'" mode="selector" :name="item.field"
-							:range="hanldeRange(item.options)" @change="onSelectChange($event, item)">
-							<view class="select">
-								{{ getSelectLabel(item) || '请选择' }}
-							</view>
-						</picker>
-
-						<!-- 日期选择 -->
-						<picker v-else-if="item.component === 'date'" mode="date" :name="item.field" :value="model[item.field]"
-							@change="onTimeChange($event, item)">
-							<view class="select">
-								{{ model[item.field] || '请选择日期' }}
-							</view>
-						</picker>
-					</view>
-				</view>
-				<!-- 错误提示 -->
-				<view v-if="errors[item.field]" class="error-message">
-					<text>{{ errors[item.field] }}</text>
-				</view>
-			</view>
-
-			<!-- 默认按钮区域（可通过hideButtons隐藏） -->
-			<view v-if="!hideButtons" class="form-footer">
-				<button class="btn btn-submit" form-type="submit" type="primary">提交</button>
-				<button class="btn btn-reset" form-type="reset" type="default">重置</button>
-			</view>
-		</form>
-	</view>
-</template>
-
-<style lang="scss" scoped>
-$color-primary: #14b8a6;
-$color-secondary: #2dd4bf;
-$color-accent: #5eead4;
-$color-error: #ff6b6b;
-$color-warning: #feca57;
-
-$color-text: #333;
-$color-border: rgba(0, 0, 0, 0.05);
-$color-bg-light: rgba(255, 255, 255, 0.8);
-$color-disabled: #e0e0e0;
-$color-disabled-text: #999;
-
-// 深色模式
-$dark-bg: rgba(30, 30, 30, 0.95);
-$dark-bg-sub: rgba(40, 40, 40, 0.8);
-$dark-bg-item: rgba(50, 50, 50, 0.8);
-$dark-border: rgba(255, 255, 255, 0.1);
-$dark-text: #fff;
-
-
-.vform-container {
-	/* 移除默认背景和内边距，完全由父组件控制 */
-	background-color: transparent;
-	padding: 40rpx 32rpx 32rpx;
-}
-
-.form-item-box {
-	/* 移除默认布局，完全由自定义样式控制 */
-	align-items: flex-start;
-	width: 100%;
-	margin: 10rpx 0;
-	padding: 16rpx 24rpx;
-	border-radius: 16rpx;
-	border: 1rpx solid $color-border;
-	transition: all 0.3s ease;
-
-	&:focus-within {
-		background: #fff;
-		border-color: $color-primary ;
-		box-shadow: 0 0 0 4rpx rgba($color-primary, 0.1);
-		transform: translateY(-2rpx);
-	}
-}
-
-.form-item {
-	/* 移除默认布局，完全由自定义样式控制 */
-	flex-direction: row;
-	align-items: flex-start;
-	width: 100%;
-
-	border-radius: 16rpx;
-	background: $color-bg-light;
-	transition: all 0.3s ease;
-
-
-}
-
-.label {
-	flex-direction: row;
-	margin-bottom: 12rpx;
-	color: $color-text ;
-	font-weight: 500;
-	font-size: 28rpx;
-	padding: 10rpx 0;
-	margin-right: 12rpx;
-}
-
-.required {
-	color: $color-error ;
-}
-
-.components {
-	flex: 1;
-	justify-content: center
-}
-
-.input,
-.textarea,
-.select {
-	/* 移除所有默认样式，完全由自定义样式控制 */
-	display: flex;
-	justify-content: center;
-	border: none;
-	padding: 0;
-	margin: 0;
-	font-size: inherit;
-	color: inherit;
-	border-radius: 0;
-	outline: none;
-	resize: none;
-	min-height: 34px;
-}
-
-/* 确保输入框样式完全被自定义样式覆盖 */
-.input:focus,
-.textarea:focus,
-.select:focus {
-	width: 100%;
-	background: transparent;
-	border: none;
-	padding: 12rpx 0;
-	font-size: 30rpx;
-	color: $color-text ;
-	transition: all 0.3s ease;
-	border-bottom: 2rpx solid transparent;
-	text-align: left;
-
-	&:focus {
-		border-bottom-color: $color-primary ;
-		outline: none;
-	}
-}
-
-.radio-button-container,
-.checkbox-button-container,
-uni-picker {
-	width: 100%;
-	background: transparent;
-	border: none;
-	padding: 0;
-	text-align: left;
-}
-
-
-uni-picker {
-	/* 移除默认样式 */
-	width: auto;
-	text-align: left;
-}
-
-.form-footer {
-	flex-direction: row;
-	gap: 8px;
-}
-
-.btn {
-	/* 移除默认按钮样式 */
-	flex: 1;
-	transition: all 0.3s ease;
-
-	&:active {
-		opacity: 0.7;
-		transform: scale(0.98);
-	}
-}
-
-.btn-submit {
-	background-color: $color-primary;
-	color: $dark-text
-}
-
-.btn-reset {
-	border-width: 1px;
-	border-style: solid;
-	border-color: $color-primary;
-	color: $color-primary;
-}
-
-.error-message {
-	margin-top: 8rpx;
-	text-align: left;
-	color: $color-error ;
-	font-size: 24rpx;
-	line-height: 1.4;
-}
-
-.error-message text {
-	color: $color-error;
-	font-size: 24rpx;
-	line-height: 1.4;
-	text-align: right;
-}
-</style>