tang-ui-x 1.0.6 → 1.1.0

package/components/TForm/index.uvue

@@ -0,0 +1,379 @@
+<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"
+							:label="opt.label"
+							:value="opt.value"
+							:checked="model[item.field] === opt.value"
+							v-bind="item.componentProps || {}"
+							@change="onRadioChange(opt.value, item)" />
+					</view>
+
+					<!-- 多选 -->
+					<view v-else-if="item.component === 'Checkbox'" class="checkbox-group">
+						<TCheckbox 
+							v-for="opt in (item.componentProps?.options as FormOption[])" 
+							:key="opt.value"
+							:label="opt.label"
+							:value="opt.value"
+							: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)
+							}" />
+					</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;
+}
+
+.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/index.uts

@@ -1,107 +1,108 @@
-/**
- * Tang UI - UniApp X UI 组件库
- * @description 基于 uni-app x 的移动端 UI 组件库
- * @version 1.0.2
- * @author sugar258596
- */
-
-/**
- * 注意：uni-app x 项目推荐使用 easycom 自动导入组件
- * 
- * 在 pages.json 中配置：
- * {
- *   "easycom": {
- *     "autoscan": true,
- *     "custom": {
- *       "^T(.*)": "tang-ui-x/components/T$1/index.uvue"
- *     }
- *   }
- * }
- * 
- * 然后在页面中直接使用：
- * <TButton type="primary">按钮</TButton>
- */
-
-// 导出工具函数
-export * from './utils/index.uts'
-
-// 导出 composables
-export { useTheme } from './composables/useTheme.uts'
-export { useToast } from './composables/useToast.uts'
-export { useModal } from './composables/useModal.uts'
-
-// 版本信息
-export const version: string = '1.0.5'
-
-// 组件列表（用于文档和类型提示）
-export const components: string[] = [
-  // 基础组件
-  'TButton',
-  'TIcon',
-  'TText',
-  'TImage',
-  'TDivider',
-
-  // 布局组件
-  'TCard',
-  'TList',
-  'TListItem',
-  'TCell',
-  'TGrid',
-  'TGridItem',
-  'TRow',
-  'TCol',
-
-  // 表单组件
-  'TInput',
-  'TNumberInput',
-  'TTextarea',
-  'TSearchBar',
-  'TSwitch',
-  'TCheckbox',
-  'TCheckboxGroup',
-  'TRadioButton',
-  'TRadioGroup',
-  'TSelect',
-  'TSlider',
-  'TRate',
-  'TPicker',
-
-  // 数据展示
-  'Tags',
-  'TBadge',
-  'TAvatar',
-  'TProgress',
-  'TNoticeBar',
-  'TCollapse',
-  'TCollapseItem',
-  'TEmpty',
-  'TErrorState',
-  'TSwiper',
-
-  // 反馈组件
-  'TLoading',
-  'TToast',
-  'TDialog',
-  'TPopup',
-  'TActionSheet',
-
-  // 导航组件
-  'Tabs',
-  'TNavBar'
-]
-
-/**
- * Tang UI 插件
- */
-const TangUI = {
-  install(app: any) {
-    // uni-app x 使用 easycom 自动导入组件，这里不需要注册组件
-    console.log('Tang UI X installed, version:', version)
-  },
-  version,
-  components
-}
-
-// 默认导出
-export default TangUI
+/**
+ * Tang UI - UniApp X UI 组件库
+ * @description 基于 uni-app x 的移动端 UI 组件库
+ * @version 1.0.2
+ * @author sugar258596
+ */
+
+/**
+ * 注意：uni-app x 项目推荐使用 easycom 自动导入组件
+ * 
+ * 在 pages.json 中配置：
+ * {
+ *   "easycom": {
+ *     "autoscan": true,
+ *     "custom": {
+ *       "^T(.*)": "tang-ui-x/components/T$1/index.uvue"
+ *     }
+ *   }
+ * }
+ * 
+ * 然后在页面中直接使用：
+ * <TButton type="primary">按钮</TButton>
+ */
+
+// 导出工具函数
+export * from './utils/index.uts'
+
+// 导出 composables
+export { useTheme } from './composables/useTheme.uts'
+export { useToast } from './composables/useToast.uts'
+export { useModal } from './composables/useModal.uts'
+
+// 版本信息
+export const version: string = '1.0.5'
+
+// 组件列表（用于文档和类型提示）
+export const components: string[] = [
+  // 基础组件
+  'TButton',
+  'TIcon',
+  'TText',
+  'TImage',
+  'TDivider',
+
+  // 布局组件
+  'TCard',
+  'TList',
+  'TListItem',
+  'TCell',
+  'TGrid',
+  'TGridItem',
+  'TRow',
+  'TCol',
+
+  // 表单组件
+  'TInput',
+  'TNumberInput',
+  'TTextarea',
+  'TSearchBar',
+  'TSwitch',
+  'TCheckbox',
+  'TCheckboxGroup',
+  'TRadioButton',
+  'TRadioGroup',
+  'TSelect',
+  'TSlider',
+  'TRate',
+  'TPicker',
+  'TForm',
+
+  // 数据展示
+  'Tags',
+  'TBadge',
+  'TAvatar',
+  'TProgress',
+  'TNoticeBar',
+  'TCollapse',
+  'TCollapseItem',
+  'TEmpty',
+  'TErrorState',
+  'TSwiper',
+
+  // 反馈组件
+  'TLoading',
+  'TToast',
+  'TDialog',
+  'TPopup',
+  'TActionSheet',
+
+  // 导航组件
+  'Tabs',
+  'TNavBar'
+]
+
+/**
+ * Tang UI 插件
+ */
+const TangUI = {
+  install(app: any) {
+    // uni-app x 使用 easycom 自动导入组件，这里不需要注册组件
+    console.log('Tang UI X installed, version:', version)
+  },
+  version,
+  components
+}
+
+// 默认导出
+export default TangUI

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tang-ui-x",
-  "version": "1.0.6",
+  "version": "1.1.0",
   "description": "UniApp X UI 组件库 - 基于 uni-app x 的移动端 UI 组件库",
   "main": "index.uts",
   "module": "index.uts",