feat: 完善form组件

components/pi-checkbox-group/index.vue

@@ -148,6 +148,9 @@ export default {
   &.horizontal {
     flex-direction: row;
     align-items: center;
+    /deep/ .pi-check-wrap:not(:last-child) {
+      margin-right: 32rpx;
+    }
   }
   &.vertical {
     flex-direction: column;

components/pi-form-item/index.vue

@@ -1,197 +1,181 @@
 <template>
   <view
-    class="pi-list-item pi-align-center"
-    :hover-class="hoverClass"
+    class="pi-form-item pi-align-center"
     :style="[customStyle, itemStyle]"
     :class="[{ border: getBorder }, customClass]"
-    :hover-start-time="hoverStartTime"
-    :hover-stay-time="hoverStayTime"
     @tap.stop="handleItemClick"
   >
     <!-- 左侧区域 -->
-    <view v-if="$slots.left" class="pi-pd-right-24">
-      <slot name="left" />
+    <view class="form-label" :style="[getLabelStyle, labelStyle]">
+      <slot name="label">
+        {{ label }}
+      </slot>
+      <text v-if="getColon" class="pi-pd-left-8">:</text>
     </view>
 
-    <!-- 标题和描述 -->
-    <view v-if="title || desc">
-      <view v-if="title" :style="[titleStyle]" class="list-item-title">{{ title }}</view>
-      <view v-if="desc" :style="[descStyle]" class="list-item-desc">{{ desc }}</view>
-    </view>
     <!-- 中间区域 -->
-    <view class="pi-flex-sub"><slot /></view>
+    <view
+      class="input-wrap pi-flex-sub pi-align-center"
+      :style="[inputWrapStyle]"
+      :class="[getInputAlign]"
+    >
+      <slot />
+    </view>
     <!-- 右侧区域 -->
-    <view class="extra">{{ extraText }}</view>
     <view v-if="$slots.right" class="pi-pd-left-24">
       <slot name="right" />
     </view>
-    <pi-icon
-      v-else-if="showRightIcon"
-      :name="rightIcon.name"
-      :dot="rightIcon.dot"
-      :badge="rightIcon.badge"
-      :color="rightIcon.color"
-      :size="rightIcon.size"
-      :class-prefix="rightIcon.classPrefix"
-      custom-class="pi-pd-left-12"
-    />
   </view>
 </template>
 
 <script>
+import { childInit } from '../../mixin/props-sync'
 import { getConfig } from '../../config'
 
-const TAG = 'PiListItem'
-const { listItem } = getConfig()
+const TAG = 'PiFormItem'
+const { formItem } = getConfig()
+const extendPiFrom = childInit('Form')
+
+const alignFlexMap = {
+  left: 'flex-start',
+  center: 'center',
+  right: 'flex-end'
+}
 
 export default {
-  name: 'ListItem',
+  name: 'FormItem',
+  mixins: [extendPiFrom], // 注入inheritProps
   props: {
     // 自定义样式，对象形式（默认值：{}）
     customStyle: {
       type: Object,
       default() {
-        return listItem.customStyle
+        return formItem.customStyle
       }
     },
     // 自定义样式类，字符串形式（''）
     customClass: {
       type: String,
       default() {
-        return listItem.customClass
+        return formItem.customClass
       }
     },
-    // 列表高度
+    // 高度
     height: {
       type: [String, Number],
       default() {
-        return listItem.height
+        return formItem.height
       }
     },
-    // 标题
-    title: {
+    // 列表项内边距
+    padding: {
       type: String,
       default() {
-        return listItem.title
+        return formItem.padding
       }
     },
-    // 标题自定义样式，对象形式（默认值：{}）
-    titleStyle: {
-      type: Object,
-      default() {
-        return listItem.titleStyle
-      }
+    label: {
+      type: String
     },
-    // 描述
-    desc: {
-      type: String,
+    // 表单项 label 宽度，默认单位为rpx
+    labelWidth: {
+      type: [String, Number],
       default() {
-        return listItem.title
+        return formItem.labelWidth
       }
     },
-    // 描述自定义样式，对象形式（默认值：{}）
-    descStyle: {
+    // 表单项 label样式
+    labelStyle: {
       type: Object,
       default() {
-        return listItem.descStyle
+        return formItem.labelStyle
       }
     },
-    // 右侧文字
-    extraText: {
+    // 表单label区域 label 对齐方式，可选值为 left center right
+    labelAlign: {
       type: String,
       default() {
-        return listItem.title
+        return formItem.labelAlign
+      },
+      validator: function(value) {
+        return ['left', 'center', 'right'].includes(value)
       }
     },
-    // 右侧文字自定义样式，对象形式（默认值：{}）
-    extraStyle: {
-      type: Object,
+    // 表单输入区域 label 对齐方式，可选值为 left center right
+    inputAlign: {
+      type: String,
       default() {
-        return listItem.extraStyle
+        return formItem.inputAlign
+      },
+      validator: function(value) {
+        return ['left', 'center', 'right'].includes(value)
       }
     },
+    // 是否在 label 后面添加冒号
+    colon: {
+      type: Boolean,
+      default: formItem.colon
+    },
     // 是否禁用
     disabled: {
       type: Boolean,
-      default() {
-        return listItem.disabled
-      }
+      default: formItem.disabled
     },
     // 是否显示边框
     border: {
       type: Boolean,
-      default() {
-        return listItem.border
-      }
-    },
-    // 列表项内边距
-    padding: {
-      type: String,
-      default() {
-        return listItem.padding
-      }
-    },
-    // 是否显示右边icon
-    showRightIcon: {
-      type: Boolean,
-      default() {
-        return listItem.showRightIcon
-      }
-    },
-    // 右侧icon样式
-    rightIcon: {
-      type: Object,
-      default() {
-        return listItem.rightIcon
-      }
-    },
-    // 指定按下去的样式类。当 hover-class="none" 时，没有点击态效果
-    hoverClass: {
-      type: String,
-      default() {
-        return listItem.hoverClass
-      }
-    },
-    // 按住后多久出现点击态，单位毫秒
-    hoverStartTime: {
-      type: [String, Number],
-      default() {
-        return listItem.hoverStartTime
-      }
-    },
-    // 手指松开后点击态保留时间，单位毫秒
-    hoverStayTime: {
-      type: [String, Number],
-      default() {
-        return listItem.hoverStayTime
-      }
+      default: formItem.border
     }
   },
   computed: {
     getBorder() {
-      return this.piList ? this.piList.border : this.border
+      return this.inheritProps.border !== undefined ? this.inheritProps.border : this.border
+    },
+    getColon() {
+      return this.inheritProps.colon !== undefined ? this.inheritProps.colon : this.colon
     },
-    getHeight() {
-      return this.$pi.common.addUnit(
-        this.piList && this.piList.height ? this.piList.height : this.height
-      )
+    getLabelAlign() {
+      return this.inheritProps.labelAlign !== undefined
+        ? this.inheritProps.labelAlign
+        : this.labelAlign
+    },
+    getInputAlign() {
+      return this.inheritProps.inputAlign !== undefined
+        ? this.inheritProps.inputAlign
+        : this.inputAlign
     },
     itemStyle() {
       const style = {
-        padding: this.padding,
-        height: this.getHeight
+        padding: this.padding
+      }
+      const height = this.height || this.inheritProps.height
+      if (height) {
+        style.height = this.$pi.common.addUnit(height)
       }
       return style
+    },
+    getLabelStyle() {
+      const style = {}
+      const labelWidth = this.labelWidth || this.inheritProps.labelWidth
+      if (labelWidth) {
+        style.minWidth = this.$pi.common.addUnit(labelWidth)
+      }
+      style.textAlign = this.getLabelAlign
+      return style
+    },
+    inputWrapStyle() {
+      const style = {}
+      style.justifyContent = alignFlexMap[this.getInputAlign]
+      return style
     }
   },
   inject: {
-    piList: { default: undefined }
+    piForm: { default: undefined }
   },
   created() {},
   methods: {
     handleItemClick(e) {
       this.$emit('click', e)
-      this.$emit('tap', e)
     }
   }
 }
@@ -200,21 +184,40 @@ export default {
 <style lang="scss" scoped>
 @import '../../scss/border.scss';
 
-.pi-list-item {
+.pi-form-item {
   height: $pi-form-item-height;
-  .list-item-title {
-    font-size: $pi-list-title-fontsize;
-    color: $pi-list-title-color;
-  }
-  .list-item-desc {
-    font-size: $pi-list-desc-fontsize;
-    color: $pi-list-desc-color;
-  }
+  font-size: $pi-form-size;
   &.border {
     @include pi-border;
     &::after {
-      border: 0 solid $pi-list-border-color;
-      border-bottom-width: $pi-list-border-width;
+      border: 0 solid $pi-form-border-color;
+      border-bottom-width: $pi-form-border-width;
+    }
+  }
+  .form-label {
+    font-weight: $pi-form-label-weight;
+    color: $pi-form-label-color;
+    white-space: nowrap;
+  }
+  .input-wrap {
+    padding-left: 24rpx;
+    /deep/ .pi-input-wrap {
+      width: 100%;
+    }
+    &.left {
+      /deep/ .pi-input-wrap {
+        text-align: left;
+      }
+    }
+    &.center {
+      /deep/ .pi-input-wrap {
+        text-align: center;
+      }
+    }
+    &.right {
+      /deep/ .pi-input-wrap {
+        text-align: right;
+      }
     }
   }
 }