tang-ui-x 1.0.6 → 1.1.1

package/components/TForm/index.uvue

@@ -0,0 +1,392 @@
+<script setup lang="uts">
+	import TRadioButton from '../TRadioButton/index.uvue'
+	import TCheckbox from '../TCheckbox/index.uvue'
+	import TSwitch from '../TSwitch/index.uvue'
+	import TRate from '../TRate/index.uvue'
+	import TSlider from '../TSlider/index.uvue'
+	import type { FormOption, FormSchema, TFormProps, ComponentProps } from './type.uts'
+
+	const props = withDefaults(defineProps<TFormProps>(), {
+		labelWidth: '160rpx',
+		hideButtons: false,
+	})
+
+	const emit = defineEmits(['submit', 'reset'])
+
+	const model = defineModel<Record<string, any>>({ default: () => ({}) })
+	const errors = reactive<Record<string, string>>({})
+
+	const handlePlaceholder = (item: FormSchema): string => {
+		return item.componentProps?.placeholder || `请输入${item.label}`
+	}
+
+	const handleRange = (item: FormSchema) => {
+		const options = item.componentProps?.options as FormOption[] | undefined
+		return options?.map(o => o.label) || []
+	}
+
+	const getSelectLabel = (item: FormSchema) => {
+		const options = item.componentProps?.options as FormOption[] | undefined
+		const opt = 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 options = item.componentProps?.options as FormOption[] | undefined
+		const value = 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 onSwitchChange = (value: boolean, item: FormSchema) => {
+		model.value[item.field] = value
+		validateField(item)
+	}
+
+	const onRateChange = (value: number, item: FormSchema) => {
+		model.value[item.field] = value
+		validateField(item)
+	}
+
+	const onSliderChange = (value: number, item: FormSchema) => {
+		model.value[item.field] = value
+		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="t-form">
+		<form @submit="onFormSubmit" @reset="onFormReset">
+			<view v-for="(item, index) in schemas" class="form-item" :key="index">
+				<view class="form-label" :style="{ width: labelWidth }">
+					<text>{{ item.label }}</text>
+					<text v-if="item.required" class="required">*</text>
+				</view>
+
+				<view class="form-control">
+					<!-- 自定义插槽 -->
+					<slot v-if="$slots[item.field]" :name="item.field" :item="item" :value="model[item.field]" :error="errors[item.field]"></slot>
+					
+					<!-- 输入框 -->
+					<input v-else-if="item.component === 'Input'" 
+						v-model="model[item.field]" 
+						:placeholder="handlePlaceholder(item)"
+						:name="item.field" 
+						class="input"
+						v-bind="item.componentProps || {}"
+						@input="validateField(item)" />
+
+					<!-- 数字输入 -->
+					<input v-else-if="item.component === 'InputNumber'" 
+						v-model="model[item.field]" 
+						:placeholder="handlePlaceholder(item)"
+						type="number"
+						:name="item.field" 
+						class="input"
+						v-bind="item.componentProps || {}"
+						@input="validateField(item)" />
+
+					<!-- 文本域 -->
+					<textarea v-else-if="item.component === 'Textarea'" 
+						v-model="model[item.field]"
+						:placeholder="handlePlaceholder(item)" 
+						:name="item.field" 
+						class="textarea"
+						v-bind="item.componentProps || {}"
+						@input="validateField(item)"></textarea>
+
+					<!-- 下拉选择 -->
+					<picker v-else-if="item.component === 'Select'" 
+						mode="selector" 
+						:name="item.field"
+						:range="handleRange(item)"
+						v-bind="item.componentProps || {}"
+						@change="onSelectChange($event, item)">
+						<view class="picker">
+							{{ getSelectLabel(item) || '请选择' }}
+						</view>
+					</picker>
+
+					<!-- 日期选择 -->
+					<picker v-else-if="item.component === 'Date'" 
+						mode="date" 
+						:name="item.field" 
+						:value="model[item.field]"
+						v-bind="item.componentProps || {}"
+						@change="onTimeChange($event, item)">
+						<view class="picker">
+							{{ model[item.field] || '请选择日期' }}
+						</view>
+					</picker>
+
+					<!-- 时间选择 -->
+					<picker v-else-if="item.component === 'Time'" 
+						mode="time" 
+						:name="item.field" 
+						:value="model[item.field]"
+						v-bind="item.componentProps || {}"
+						@change="onTimeChange($event, item)">
+						<view class="picker">
+							{{ model[item.field] || '请选择时间' }}
+						</view>
+					</picker>
+
+					<!-- 单选 -->
+					<view v-else-if="item.component === 'Radio'" class="radio-group">
+						<TRadioButton 
+							v-for="opt in (item.componentProps?.options as FormOption[])" 
+							:key="opt.value"
+							v-model="model[item.field]"
+							:label="opt.label"
+							:value="opt.value"
+							@change="onRadioChange(opt.value, item)" />
+					</view>
+
+					<!-- 多选 -->
+					<view v-else-if="item.component === 'Checkbox'" class="checkbox-group">
+						<view 
+							v-for="opt in (item.componentProps?.options as FormOption[])" 
+							:key="opt.value"
+							class="checkbox-item">
+							<TCheckbox 
+								:checked="(model[item.field] || []).includes(opt.value)"
+								v-bind="item.componentProps || {}"
+								@change="(checked) => {
+									const values = model[item.field] || []
+									if (checked) {
+										values.push(opt.value)
+									} else {
+										const index = values.indexOf(opt.value)
+										if (index > -1) values.splice(index, 1)
+									}
+									onCheckboxChange(values, item)
+								}" />
+							<text class="checkbox-label">{{ opt.label }}</text>
+						</view>
+					</view>
+
+					<!-- 开关 -->
+					<TSwitch v-else-if="item.component === 'Switch'"
+						:checked="model[item.field]"
+						v-bind="item.componentProps || {}"
+						@change="onSwitchChange($event, item)" />
+
+					<!-- 评分 -->
+					<TRate v-else-if="item.component === 'Rate'"
+						:value="model[item.field] || 0"
+						v-bind="item.componentProps || {}"
+						@change="onRateChange($event, item)" />
+
+					<!-- 滑块 -->
+					<TSlider v-else-if="item.component === 'Slider'"
+						:value="model[item.field] || 0"
+						v-bind="item.componentProps || {}"
+						@change="onSliderChange($event, item)" />
+				</view>
+
+				<!-- 错误提示 -->
+				<view v-if="errors[item.field]" class="error-message">
+					<text>{{ errors[item.field] }}</text>
+				</view>
+			</view>
+
+			<!-- 按钮区域 -->
+			<view v-if="!hideButtons" class="form-footer">
+				<button class="btn btn-submit" form-type="submit">提交</button>
+				<button class="btn btn-reset" form-type="reset">重置</button>
+			</view>
+		</form>
+	</view>
+</template>
+
+<style lang="scss" scoped>
+.t-form {
+	padding: 32rpx;
+}
+
+.form-item {
+	margin-bottom: 32rpx;
+}
+
+.form-label {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	margin-bottom: 16rpx;
+	font-size: 28rpx;
+	color: #333;
+	font-weight: 500;
+}
+
+.required {
+	color: #ff4d4f;
+	margin-left: 4rpx;
+}
+
+.form-control {
+	width: 100%;
+}
+
+.input,
+.textarea,
+.picker {
+	width: 100%;
+	padding: 20rpx 24rpx;
+	font-size: 28rpx;
+	color: #333;
+	background-color: #f5f5f5;
+	border-radius: 8rpx;
+	border: 1rpx solid #e0e0e0;
+	transition: all 0.3s;
+}
+
+.input:focus,
+.textarea:focus {
+	background-color: #fff;
+	border-color: #007aff;
+}
+
+.textarea {
+	min-height: 120rpx;
+}
+
+.picker {
+	display: flex;
+	align-items: center;
+}
+
+.radio-group,
+.checkbox-group {
+	display: flex;
+	flex-direction: column;
+	gap: 16rpx;
+}
+
+.checkbox-item {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	gap: 16rpx;
+}
+
+.checkbox-label {
+	font-size: 28rpx;
+	color: #333;
+}
+
+.error-message {
+	margin-top: 8rpx;
+	font-size: 24rpx;
+	color: #ff4d4f;
+}
+
+.form-footer {
+	display: flex;
+	flex-direction: row;
+	gap: 24rpx;
+	margin-top: 48rpx;
+}
+
+.btn {
+	flex: 1;
+	height: 88rpx;
+	line-height: 88rpx;
+	text-align: center;
+	font-size: 32rpx;
+	border-radius: 8rpx;
+	transition: all 0.3s;
+}
+
+.btn-submit {
+	background-color: #007aff;
+	color: #fff;
+}
+
+.btn-reset {
+	background-color: #fff;
+	color: #007aff;
+	border: 1rpx solid #007aff;
+}
+
+.btn:active {
+	opacity: 0.7;
+	transform: scale(0.98);
+}
+</style>

package/components/TForm/type.uts

@@ -0,0 +1,80 @@
+/**
+ * 表单选项类型
+ */
+export type FormOption = {
+  label: string
+  value: string | number
+}
+
+/**
+ * 组件通用属性
+ */
+export type ComponentProps = {
+  /** 占位符 */
+  placeholder?: string
+  /** 是否禁用 */
+  disabled?: boolean
+  /** 选项列表（用于 select、radio、checkbox） */
+  options?: FormOption[]
+  /** 输入类型（用于 input） */
+  type?: string
+  /** 最大长度（用于 input、textarea） */
+  maxlength?: number
+  /** 最小值（用于 number、slider） */
+  min?: number
+  /** 最大值（用于 number、slider、rate） */
+  max?: number
+  /** 步长（用于 slider） */
+  step?: number
+  /** 是否自动聚焦（用于 input、textarea） */
+  focus?: boolean
+  /** 确认按钮文字（用于 input） */
+  confirmType?: string
+  /** 是否自动高度（用于 textarea） */
+  autoHeight?: boolean
+  /** 是否显示确认栏（用于 textarea） */
+  showConfirmBar?: boolean
+  /** 开始日期（用于 date） */
+  start?: string
+  /** 结束日期（用于 date） */
+  end?: string
+  /** 激活颜色（用于 switch） */
+  color?: string
+  /** 是否允许半星（用于 rate） */
+  allowHalf?: boolean
+  /** 是否显示值（用于 slider） */
+  showValue?: boolean
+  /** 其他扩展属性 */
+  [key: string]: any
+}
+
+/**
+ * 表单字段配置
+ */
+export type FormSchema = {
+  /** 字段名 */
+  field: string
+  /** 标签文本 */
+  label: string
+  /** 组件类型 */
+  component: 'Input' | 'Textarea' | 'Select' | 'Date' | 'Time' | 'Radio' | 'Checkbox' | 'Switch' | 'Rate' | 'Slider' | 'InputNumber'
+  /** 是否必填 */
+  required?: boolean
+  /** 组件属性 */
+  componentProps?: ComponentProps
+}
+
+/**
+ * 表单组件属性
+ */
+export type TFormProps = {
+  /** 表单配置 */
+  schemas: FormSchema[]
+  /** 标签宽度 */
+  labelWidth?: string
+  /** 是否隐藏默认按钮 */
+  hideButtons?: boolean
+}
+
+// 导出所有类型
+export { FormOption, ComponentProps, FormSchema, TFormProps }

package/components/TRadioButton/README.md

@@ -0,0 +1,117 @@
+# TRadioButton 单选按钮
+
+单选按钮组件，支持单个按钮和选项组两种使用方式。
+
+## 基础用法
+
+```vue
+<template>
+  <TRadioButton v-model="value" value="option1">选项一</TRadioButton>
+  <TRadioButton v-model="value" value="option2">选项二</TRadioButton>
+  <TRadioButton v-model="value" value="option3">选项三</TRadioButton>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+const value = ref('option1')
+</script>
+```
+
+## 选项组模式
+
+通过 `options` 属性传入选项数组，自动渲染多个单选按钮。
+
+```vue
+<template>
+  <TRadioButton 
+    v-model="value" 
+    :options="[
+      { label: '选项一', value: 'option1' },
+      { label: '选项二', value: 'option2' },
+      { label: '选项三', value: 'option3' }
+    ]" 
+  />
+</template>
+```
+
+## 禁用状态
+
+```vue
+<TRadioButton v-model="value" value="option1" disabled>禁用选项</TRadioButton>
+```
+
+## 不同尺寸
+
+```vue
+<TRadioButton v-model="value" value="small" size="small">小尺寸</TRadioButton>
+<TRadioButton v-model="value" value="medium" size="medium">中等尺寸</TRadioButton>
+<TRadioButton v-model="value" value="large" size="large">大尺寸</TRadioButton>
+```
+
+## 自定义颜色
+
+```vue
+<TRadioButton 
+  v-model="value" 
+  value="option1" 
+  activeColor="#f56c6c"
+  inactiveColor="#909399"
+>
+  自定义颜色
+</TRadioButton>
+```
+
+## Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| modelValue (v-model) | 绑定值 | `string \| number` | - |
+| value | 单选按钮的值 | `string \| number` | - |
+| label | 显示的标签文本 | `string` | - |
+| options | 选项组模式的选项列表 | `FormOption[]` | `[]` |
+| size | 按钮尺寸 | `'small' \| 'medium' \| 'large'` | `'medium'` |
+| activeColor | 激活状态颜色 | `string` | `'#00bba7'` |
+| inactiveColor | 非激活状态颜色 | `string` | `'#666666'` |
+| disabled | 是否禁用 | `boolean` | `false` |
+| checked | 是否选中（仅单个按钮模式） | `boolean` | `false` |
+| name | 原生 name 属性 | `string` | - |
+
+## Events
+
+| 事件名 | 说明 | 回调参数 |
+|--------|------|----------|
+| change | 选中值改变时触发 | `(value: string \| number)` |
+
+## FormOption 类型
+
+```typescript
+type FormOption = {
+  label: string
+  value: string | number
+}
+```
+
+## 在 TForm 中使用
+
+TRadioButton 可以在 TForm 组件中使用：
+
+```vue
+<TForm v-model="formData" :schemas="schemas" />
+
+<script setup>
+const schemas = [
+  {
+    field: 'gender',
+    label: '性别',
+    component: 'Radio',
+    required: true,
+    componentProps: {
+      options: [
+        { label: '男', value: 'male' },
+        { label: '女', value: 'female' }
+      ]
+    }
+  }
+]
+</script>
+```