tang-ui-x 1.1.4 → 1.1.6

package/components/TForm/index.uvue

@@ -5,6 +5,7 @@
 	import TSwitch from '../TSwitch/index.uvue'
 	import TRate from '../TRate/index.uvue'
 	import TSlider from '../TSlider/index.uvue'
+	import TSelect from '../TSelect/index.uvue'
 	import type { FormOption, FormSchema, TFormProps, ComponentProps } from './type.uts'
 	import { useI18n } from '../../composables/useI18n.uts'
 
@@ -52,23 +53,9 @@
 		return $t('form.inputPlaceholder', { label: item.label })
 	}
 
-	const handleRange = (item : FormSchema) => {
+	const getSelectOptions = (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)
+		return options?.map(o => ({ label: o.label, value: o.value })) || []
 	}
 
 	const onTimeChange = (e : any, item : FormSchema) => {
@@ -79,11 +66,23 @@
 	const validateField = (item : FormSchema) => {
 		if (item.required && !model.value[item.field]) {
 			errors[item.field] = $t('form.requiredError', { label: item.label })
+			// 触发抖动动画
+			triggerShake(item.field)
 		} else {
 			delete errors[item.field]
 		}
 	}
 
+	// 抖动动画状态
+	const shakeFields = reactive<Record<string, boolean>>({})
+
+	const triggerShake = (field : string) => {
+		shakeFields[field] = true
+		setTimeout(() => {
+			shakeFields[field] = false
+		}, 500)
+	}
+
 	const onRadioChange = (value : string | number) => {
 		// 值已通过 v-model 更新，只需验证
 	}
@@ -164,7 +163,9 @@
 <template>
 	<view class="t-form">
 		<form @submit="onFormSubmit" @reset="onFormReset">
-			<view v-for="(item, index) in schemas" class="form-item" :key="index">
+			<view v-for="(item, index) in schemas" class="form-item" 
+				:class="{ 'form-item-error': errors[item.field], 'form-item-shake': shakeFields[item.field] }" 
+				:key="index">
 				<view class="form-item-content" :class="`form-item--${getItemLayout(item)}`">
 					<view class="form-label" >
 						<text class="text" :style="{ width: getItemLayout(item) === 'horizontal' ? getItemLabelWidth(item) : labelWidth }">{{ item.label }}</text>
@@ -192,13 +193,12 @@
 						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) || $t('form.selectPlaceholder') }}
-						</view>
-					</picker>
+					<TSelect v-else-if="item.component === 'Select'" 
+						v-model="model[item.field]"
+						:options="getSelectOptions(item)"
+						:placeholder="item.componentProps?.placeholder || $t('form.selectPlaceholder')"
+						v-bind="item.componentProps || {}"
+						@change="validateField(item)" />
 
 					<!-- 日期选择 -->
 					<picker v-else-if="item.component === 'Date'" mode="date" :name="item.field"
@@ -245,7 +245,7 @@
 
 				<!-- 错误提示 -->
 				<view v-if="errors[item.field]" class="error-message">
-					<text>{{ errors[item.field] }}</text>
+					<text class="error-text">{{ errors[item.field] }}</text>
 				</view>
 			</view>
 
@@ -264,10 +264,36 @@
 	}
 
 	.form-item {
-		margin-bottom: 32rpx;
+		padding: 24rpx;
+		border-radius: 12rpx;
+		border: 2rpx solid transparent;
+		transition: all 0.3s ease;
+		overflow:visible;
+
+		&.form-item-error {
+			border-color: #ff4d4f;
+			background-color: #fff1f0;
+		}
+
+		&.form-item-shake {
+			animation: shake 0.5s ease-in-out;
+		}
+	}
+
+	@keyframes shake {
+		0%, 100% {
+			transform: translateX(0);
+		}
+		10%, 30%, 50%, 70%, 90% {
+			transform: translateX(-8rpx);
+		}
+		20%, 40%, 60%, 80% {
+			transform: translateX(8rpx);
+		}
 	}
 
 	.form-item-content {
+		overflow:visible;
 		&.form-item--horizontal {
 			display: flex;
 			flex-direction: row;
@@ -317,6 +343,7 @@
 	.form-control {
 		flex: 1;
 		width: 100%;
+    overflow: visible;
 
 		.form-item-content.form-item--horizontal & {
 			width: auto;
@@ -324,8 +351,7 @@
 	}
 
 	.input,
-	.textarea,
-	.picker {
+	.textarea {
 		width: 100%;
 		padding: 20rpx 24rpx;
 		font-size: 28rpx;
@@ -346,13 +372,6 @@
 		min-height: 120rpx;
 	}
 
-	.picker {
-		display: flex;
-		align-items: center;
-	}
-
-
-
 	.error-message {
 		margin-top: 8rpx;
 		font-size: 24rpx;

package/components/TSelect/index.uvue

@@ -306,14 +306,11 @@
 
 
 	/* 基础容器样式 */
-	.select-root,
-	uni-view {
-		overflow: visible;
-	}
-
+ 
 	.select-container {
 		position: relative;
 		width: 100%;
+		overflow: visible;
 	}
 
 	/* 选择框样式 */

package/package.json

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

package/style/index.scss

@@ -137,9 +137,9 @@ $z-index-toast: 1080 !default;
   visibility: hidden !important;
 }
 
-uni-view {
-  overflow: visible;
-}
+// uni-view {
+//   overflow: visible;
+// }
 
 // Flex 布局
 .flex {
@@ -232,79 +232,78 @@ uni-view {
 }
 
 // 字体大小
-@each $name, $size in (
-  'xs': $font-size-xs,
+@each $name, $size in ('xs': $font-size-xs,
   'sm': $font-size-sm,
   'base': $font-size-base,
   'md': $font-size-md,
   'lg': $font-size-lg,
   'xl': $font-size-xl,
-  'xxl': $font-size-xxl
-) {
+  'xxl': $font-size-xxl) {
   .text-#{$name} {
     font-size: $size !important;
   }
 }
 
 // 字体粗细
-@each $name, $weight in (
-  'light': $font-weight-light,
+@each $name, $weight in ('light': $font-weight-light,
   'normal': $font-weight-normal,
   'medium': $font-weight-medium,
   'semibold': $font-weight-semibold,
-  'bold': $font-weight-bold
-) {
+  'bold': $font-weight-bold) {
   .font-#{$name} {
     font-weight: $weight !important;
   }
 }
 
 // 圆角
-@each $name, $radius in (
-  'none': $border-radius-none,
+@each $name, $radius in ('none': $border-radius-none,
   'sm': $border-radius-sm,
   'base': $border-radius-base,
   'md': $border-radius-md,
   'lg': $border-radius-lg,
   'xl': $border-radius-xl,
-  'full': $border-radius-full
-) {
+  'full': $border-radius-full) {
   .rounded-#{$name} {
     border-radius: $radius !important;
   }
 }
 
 // 间距（内边距和外边距）
-@each $name, $space in (
-  'xs': $spacing-xs,
+@each $name, $space in ('xs': $spacing-xs,
   'sm': $spacing-sm,
   'base': $spacing-base,
   'md': $spacing-md,
   'lg': $spacing-lg,
   'xl': $spacing-xl,
-  'xxl': $spacing-xxl
-) {
+  'xxl': $spacing-xxl) {
+
   // 内边距
   .p-#{$name} {
     padding: $space !important;
   }
+
   .px-#{$name} {
     padding-left: $space !important;
     padding-right: $space !important;
   }
+
   .py-#{$name} {
     padding-top: $space !important;
     padding-bottom: $space !important;
   }
+
   .pt-#{$name} {
     padding-top: $space !important;
   }
+
   .pr-#{$name} {
     padding-right: $space !important;
   }
+
   .pb-#{$name} {
     padding-bottom: $space !important;
   }
+
   .pl-#{$name} {
     padding-left: $space !important;
   }
@@ -313,23 +312,29 @@ uni-view {
   .m-#{$name} {
     margin: $space !important;
   }
+
   .mx-#{$name} {
     margin-left: $space !important;
     margin-right: $space !important;
   }
+
   .my-#{$name} {
     margin-top: $space !important;
     margin-bottom: $space !important;
   }
+
   .mt-#{$name} {
     margin-top: $space !important;
   }
+
   .mr-#{$name} {
     margin-right: $space !important;
   }
+
   .mb-#{$name} {
     margin-bottom: $space !important;
   }
+
   .ml-#{$name} {
     margin-left: $space !important;
   }
@@ -373,13 +378,11 @@ uni-view {
 }
 
 // 阴影
-@each $name, $shadow in (
-  'sm': $shadow-sm,
+@each $name, $shadow in ('sm': $shadow-sm,
   'base': $shadow-base,
   'md': $shadow-md,
   'lg': $shadow-lg,
-  'xl': $shadow-xl
-) {
+  'xl': $shadow-xl) {
   .shadow-#{$name} {
     box-shadow: $shadow !important;
   }