tang-ui-x 1.1.0 → 1.1.1

package/components/TForm/index.uvue

@@ -213,32 +213,33 @@
 						<TRadioButton 
 							v-for="opt in (item.componentProps?.options as FormOption[])" 
 							:key="opt.value"
+							v-model="model[item.field]"
 							: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 
+						<view 
 							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)
-							}" />
+							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>
 
 					<!-- 开关 -->
@@ -338,6 +339,18 @@
 	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;

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>
+```

package/components/TRadioButton/index.uvue

@@ -14,6 +14,8 @@ type Props = {
   options?: FormOption[]
   /** 单个按钮模式：选项值 */
   value?: string | number
+  /** 单个按钮模式：显示标签 */
+  label?: string
   /** 按钮尺寸 */
   size?: 'small' | 'medium' | 'large'
   /** 活动状态颜色 */
@@ -60,14 +62,16 @@ const isOptionsMode = computed(() => props.options && props.options.length > 0)
  * 单个按钮模式：判断是否被选中
  */
 const isChecked = computed(() => {
-  if (isOptionsMode.value) {
+  // 优先使用 model.value 判断
+  if (model.value !== undefined && model.value !== null) {
     return model.value === props.value
   }
-  return props.checked || model.value === props.value
+  // 如果没有 model.value，使用 checked 属性
+  return props.checked === true
 })
 
 /**
-选择 * 处理变化
+ * 处理变化
  */
 const handleChange = (value: string | number) => {
   model.value = value
@@ -79,7 +83,9 @@ const handleChange = (value: string | number) => {
  */
 const handleClick = () => {
   if (props.disabled || isOptionsMode.value) return
-  handleChange(props.value!)
+  if (props.value !== undefined) {
+    handleChange(props.value)
+  }
 }
 
 /**
@@ -99,26 +105,26 @@ const sizeClass = computed(() => {
   <!-- 选项组模式：使用 options 属性 -->
   <view v-if="isOptionsMode" class="radio-group" :style="cssVars">
     <view
-      v-for="option in props.options"
+      v-for="option in options"
       :key="option.value"
       class="radio-item"
-      :class="{ 'radio-disabled': props.disabled }"
-      @click="!props.disabled && handleChange(option.value)"
+      :class="{ 'radio-disabled': disabled }"
+      @click="!disabled && handleChange(option.value)"
     >
-      <view class="radio-icon" :class="{ active: model === option.value, 'radio-disabled': props.disabled }">
-        <view v-if="model === option.value" class="radio-dot"></view>
+      <view class="radio-icon" :class="{ active: model.value === option.value, 'radio-disabled': disabled }">
+        <view v-if="model.value === option.value" class="radio-dot"></view>
       </view>
       <text class="radio-label">{{ option.label }}</text>
     </view>
   </view>
 
   <!-- 单个按钮模式：使用插槽或默认内容 -->
-  <view v-else class="radio-item" :class="[sizeClass, { 'radio-disabled': props.disabled }]" @click="handleClick">
-    <view class="radio-icon" :class="{ active: isChecked, 'radio-disabled': props.disabled }">
+  <view v-else class="radio-item" :class="[sizeClass, { active: isChecked, 'radio-disabled': disabled }]" :style="cssVars" @tap="handleClick">
+    <view class="radio-icon" :class="{ active: isChecked, 'radio-disabled': disabled }">
       <view v-if="isChecked" class="radio-dot"></view>
     </view>
     <slot>
-      <text v-if="props.value !== undefined" class="radio-label">{{ props.value }}</text>
+      <text v-if="label || value !== undefined" class="radio-label">{{ label || value }}</text>
     </slot>
   </view>
 </template>
@@ -126,24 +132,29 @@ const sizeClass = computed(() => {
 <style lang="scss" scoped>
 /* 选项组容器 */
 .radio-group {
+  display: flex;
   flex-direction: column;
   gap: 16rpx;
 }
 
 /* 单个按钮容器 */
 .radio-item {
+  display: flex;
   flex-direction: row;
   align-items: center;
   gap: 16rpx;
+  padding: 8rpx 0;
+  cursor: pointer;
+}
 
-  &.radio-disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
+.radio-item.radio-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
 }
 
 /* 单选按钮图标 */
 .radio-icon {
+  display: flex;
   justify-content: center;
   align-items: center;
   border-radius: 50%;
@@ -151,14 +162,14 @@ const sizeClass = computed(() => {
   border-style: solid;
   border-color: var(--radio-inactive-color);
   transition: all 0.2s ease;
+}
 
-  &.active {
-    border-color: var(--radio-active-color);
-  }
+.radio-icon.active {
+  border-color: var(--radio-active-color);
+}
 
-  &.radio-disabled {
-    border-color: #dcdfe6;
-  }
+.radio-icon.radio-disabled {
+  border-color: #dcdfe6;
 }
 
 /* 单选点 */
@@ -168,65 +179,59 @@ const sizeClass = computed(() => {
 }
 
 /* 尺寸样式 */
-.radio-size-small {
-  .radio-icon {
-    width: 28rpx;
-    height: 28rpx;
-  }
+.radio-size-small .radio-icon {
+  width: 28rpx;
+  height: 28rpx;
+}
 
-  .radio-dot {
-    width: 14rpx;
-    height: 14rpx;
-  }
+.radio-size-small .radio-dot {
+  width: 14rpx;
+  height: 14rpx;
+}
 
-  .radio-label {
-    font-size: 24rpx;
-  }
+.radio-size-small .radio-label {
+  font-size: 24rpx;
 }
 
-.radio-size-medium {
-  .radio-icon {
-    width: 36rpx;
-    height: 36rpx;
-  }
+.radio-size-medium .radio-icon {
+  width: 36rpx;
+  height: 36rpx;
+}
 
-  .radio-dot {
-    width: 20rpx;
-    height: 20rpx;
-  }
+.radio-size-medium .radio-dot {
+  width: 20rpx;
+  height: 20rpx;
+}
 
-  .radio-label {
-    font-size: 28rpx;
-  }
+.radio-size-medium .radio-label {
+  font-size: 28rpx;
 }
 
-.radio-size-large {
-  .radio-icon {
-    width: 44rpx;
-    height: 44rpx;
-  }
+.radio-size-large .radio-icon {
+  width: 44rpx;
+  height: 44rpx;
+}
 
-  .radio-dot {
-    width: 26rpx;
-    height: 26rpx;
-  }
+.radio-size-large .radio-dot {
+  width: 26rpx;
+  height: 26rpx;
+}
 
-  .radio-label {
-    font-size: 32rpx;
-  }
+.radio-size-large .radio-label {
+  font-size: 32rpx;
 }
 
 /* 文本标签 */
 .radio-label {
   color: var(--radio-inactive-color);
   transition: color 0.2s ease;
+}
 
-  .radio-item.active & {
-    color: var(--radio-active-color);
-  }
+.radio-item.active .radio-label {
+  color: var(--radio-active-color);
+}
 
-  .radio-disabled & {
-    color: #c0c4cc;
-  }
+.radio-item.radio-disabled .radio-label {
+  color: #c0c4cc;
 }
 </style>

package/package.json

@@ -1,48 +1,49 @@
-{
-  "name": "tang-ui-x",
-  "version": "1.1.0",
-  "description": "UniApp X UI 组件库 - 基于 uni-app x 的移动端 UI 组件库",
-  "main": "index.uts",
-  "module": "index.uts",
-  "types": "types/index.d.ts",
-  "files": [
-    "components",
-    "composables",
-    "utils",
-    "types",
-    "style",
-    "uni.scss",
-    "index.uts",
-    "README.md",
-    "LICENSE"
-  ],
-  "keywords": [
-    "uniapp",
-    "uni-app-x",
-    "uniapp-x",
-    "ui",
-    "components",
-    "mobile",
-    "vue3",
-    "typescript",
-    "tang-ui"
-  ],
-  "author": "sugar258596",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/sugar258596/tang-ui.git"
-  },
-  "bugs": {
-    "url": "https://github.com/sugar258596/tang-ui/issues"
-  },
-  "homepage": "https://github.com/sugar258596/tang-ui#readme",
-  "peerDependencies": {
-    "vue": "^3.0.0"
-  },
-  "scripts": {
-    "preinstall": "npx only-allow pnpm",
-    "build": "echo 'Build completed'",
-    "version": "pnpm run build"
-  }
+{
+  "name": "tang-ui-x",
+  "version": "1.1.1",
+  "description": "UniApp X UI 组件库 - 基于 uni-app x 的移动端 UI 组件库",
+  "main": "index.uts",
+  "module": "index.uts",
+  "types": "types/index.d.ts",
+  "files": [
+    "components",
+    "composables",
+    "utils",
+    "types",
+    "style",
+    "uni.scss",
+    "index.uts",
+    "README.md",
+    "LICENSE"
+  ],
+  "keywords": [
+    "uniapp",
+    "uni-app-x",
+    "uniapp-x",
+    "ui",
+    "components",
+    "mobile",
+    "vue3",
+    "typescript",
+    "tang-ui"
+  ],
+  "author": "sugar258596",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/sugar258596/tang-ui.git"
+  },
+  "bugs": {
+    "url": "https://github.com/sugar258596/tang-ui/issues"
+  },
+  "homepage": "https://github.com/sugar258596/tang-ui#readme",
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "scripts": {
+    "preinstall": "npx only-allow pnpm",
+    "prepublishOnly": "pnpm run build",
+    "build": "echo 'Build completed'",
+    "version": "pnpm run build"
+  }
 }