feat(element): radio/checkbox add optionType prop (#2114)

* feat(element): radio/checkbox add optionType prop * docs(element): imporve docs
alibaba · Sep 6, 2021 · 54072a6 · 54072a6
1 parent 9f87569
commit 54072a6
Show file tree

Hide file tree

Showing 14 changed files with 139 additions and 46 deletions.
diff --git a/packages/element/docs/demos/guide/checkbox/template.vue b/packages/element/docs/demos/guide/checkbox/template.vue
@@ -14,8 +14,12 @@
         { label: '选项2', value: 2 },
       ]"
       :decorator="[FormItem]"
-      :component="[Checkbox.Group]"
-    />
+      :component="[Checkbox.Group, { optionType: 'button' }]"
+    >
+      <template v-slot:option="{ option }">
+        <div>{{ option.label }}</div>
+      </template>
+    </ArrayField>
     <Submit @submit="onSubmit">提交</Submit>
   </Form>
 </template>

diff --git a/packages/element/docs/demos/guide/form-item/size.vue b/packages/element/docs/demos/guide/form-item/size.vue
@@ -5,7 +5,7 @@
         name="size"
         title="Radio.Group"
         x-decorator="FormItem"
-        x-component="RadioGroup"
+        x-component="Radio.Group"
         :enum="[
           { value: 'small', label: 'Small' },
           { value: 'default', label: 'Default' },
@@ -106,7 +106,7 @@ import {
   DatePicker,
   Switch,
   InputNumber,
-  RadioGroup,
+  Radio,
 } from '@formily/element'
 
 const Div = {
@@ -139,7 +139,7 @@ const fields = createSchemaField({
     DatePicker,
     Switch,
     InputNumber,
-    RadioGroup,
+    Radio,
     Div,
   },
 })

diff --git a/packages/element/docs/demos/guide/form-step/markup-schema.vue b/packages/element/docs/demos/guide/form-step/markup-schema.vue
@@ -88,7 +88,7 @@ const SchemaField = createSchemaField({
     Input,
   },
 })
-const formStep = FormStep.createFormStep
+const formStep = FormStep.createFormStep()
 
 export default {
   components: {

diff --git a/packages/element/docs/demos/guide/radio/json-schema.vue b/packages/element/docs/demos/guide/radio/json-schema.vue
@@ -38,6 +38,9 @@ export default {
           ],
           'x-decorator': 'FormItem',
           'x-component': 'Radio.Group',
+          'x-component-props': {
+            optionType: 'button',
+          },
         },
       },
     }

diff --git a/packages/element/docs/demos/guide/space/json-schema.vue b/packages/element/docs/demos/guide/space/json-schema.vue
@@ -17,7 +17,6 @@ import {
   FormLayout,
   FormItem,
   Input,
-  TextArea,
   Submit,
   Space,
 } from '@formily/element'
@@ -27,7 +26,6 @@ const { SchemaField } = createSchemaField({
     FormLayout,
     FormItem,
     Input,
-    TextArea,
     Space,
   },
 })
@@ -112,7 +110,7 @@ export default {
           type: 'string',
           title: '文本框',
           'x-decorator': 'FormItem',
-          'x-component': 'TextArea',
+          'x-component': 'Input.TextArea',
           'x-component-props': {
             style: {
               width: 400,

diff --git a/packages/element/docs/guide/checkbox.md b/packages/element/docs/guide/checkbox.md
@@ -20,6 +20,7 @@
 
 ### 扩展属性
 
-| 属性名  | 类型                                                                                       | 描述 | 默认值 |
-| ------- | ------------------------------------------------------------------------------------------ | ---- | ------ |
-| options | [CheckboxProps](https://element.eleme.io/#/zh-CN/component/checkbox#checkbox-attributes)[] | 选项 | []     |
+| 属性名     | 类型                                                                                       | 描述     | 默认值  |
+| ---------- | ------------------------------------------------------------------------------------------ | -------- | ------- |
+| options    | [CheckboxProps](https://element.eleme.io/#/zh-CN/component/checkbox#checkbox-attributes)[] | 选项     | []      |
+| optionType | default/button                                                                             | 样式类型 | default |
diff --git a/packages/element/docs/guide/radio.md b/packages/element/docs/guide/radio.md
@@ -20,6 +20,7 @@
 
 ### 扩展属性
 
-| 属性名  | 类型                                                                              | 描述 | 默认值 |
-| ------- | --------------------------------------------------------------------------------- | ---- | ------ |
-| options | [RadioProps](https://element.eleme.io/#/zh-CN/component/radio#radio-attributes)[] | 选项 | []     |
+| 属性名     | 类型                                                                              | 描述     | 默认值  |
+| ---------- | --------------------------------------------------------------------------------- | -------- | ------- |
+| options    | [RadioProps](https://element.eleme.io/#/zh-CN/component/radio#radio-attributes)[] | 选项     | []      |
+| optionType | default/button                                                                    | 样式类型 | default |
diff --git a/packages/element/src/__builtins__/shared/index.ts b/packages/element/src/__builtins__/shared/index.ts
@@ -4,3 +4,4 @@ export * from './create-context'
 export * from './utils'
 export * from './portal'
 export * from './loading'
+export * from './types'
diff --git a/packages/element/src/__builtins__/shared/resolve-component.ts b/packages/element/src/__builtins__/shared/resolve-component.ts
@@ -2,11 +2,20 @@ import { h, toRaw } from '@vue/composition-api'
 import { Component, VNode } from 'vue'
 
 export const resolveComponent = (
-  child?: Component | string | number | ((...args: any[]) => VNode[] | VNode),
+  child?:
+    | Component
+    | string
+    | number
+    | boolean
+    | ((...args: any[]) => VNode[] | VNode),
   props?: Record<string, any>
 ) => {
   if (child) {
-    if (typeof child === 'string' || typeof child === 'number') {
+    if (
+      typeof child === 'string' ||
+      typeof child === 'number' ||
+      typeof child === 'boolean'
+    ) {
       return child
     } else if (typeof child === 'function') {
       return (child as Function)(props)

diff --git a/packages/element/src/__builtins__/shared/types.ts b/packages/element/src/__builtins__/shared/types.ts
@@ -0,0 +1,8 @@
+import { Component, VNode } from 'vue'
+
+export type SlotTypes =
+  | Component
+  | string
+  | number
+  | ((props: Record<string, any>) => VNode[] | VNode)
+  | VNode
diff --git a/packages/element/src/checkbox/index.ts b/packages/element/src/checkbox/index.ts
@@ -1,13 +1,19 @@
 import { connect, mapProps, h, mapReadPretty } from '@formily/vue'
-import { defineComponent } from '@vue/composition-api'
-import { composeExport, getComponentByTag } from '../__builtins__/shared'
+import { defineComponent, PropType } from '@vue/composition-api'
+import {
+  composeExport,
+  getComponentByTag,
+  resolveComponent,
+  SlotTypes,
+} from '../__builtins__/shared'
 import type {
   Checkbox as _ElCheckboxProps,
   CheckboxGroup as ElCheckboxGroupProps,
 } from 'element-ui'
 import {
   Checkbox as ElCheckbox,
   CheckboxGroup as ElCheckboxGroup,
+  CheckboxButton as ElCheckboxButton,
 } from 'element-ui'
 import { PreviewText } from '../preview-text'
 
@@ -18,12 +24,13 @@ type ElCheckboxProps = Omit<_ElCheckboxProps, 'value'> & {
 export interface CheckboxProps extends ElCheckboxProps {
   option: Omit<_ElCheckboxProps, 'value'> & {
     value: ElCheckboxProps['label']
-    label: string
+    label: SlotTypes
   }
 }
 
 const CheckboxOption = defineComponent<CheckboxProps>({
   name: 'Checkbox',
+  inheritAttrs: false,
   props: {
     option: {
       type: Object,
@@ -35,16 +42,18 @@ const CheckboxOption = defineComponent<CheckboxProps>({
       const props = attrs as unknown as CheckboxProps
       const option = curtomProps?.option
       if (option) {
-        const children = option.label
-          ? { default: () => [option.label] }
-          : slots
+        const children = {
+          default: () => [
+            resolveComponent(slots.default ?? option.label, { option }),
+          ],
+        }
         const newProps = {} as Partial<ElCheckboxProps>
         Object.assign(newProps, option)
         newProps.label = option.value
         delete newProps.value
 
         return h(
-          ElCheckbox,
+          attrs.optionType === 'button' ? ElCheckboxButton : ElCheckbox,
           {
             attrs: {
               ...newProps,
@@ -71,6 +80,7 @@ const CheckboxOption = defineComponent<CheckboxProps>({
 export type CheckboxGroupProps = ElCheckboxGroupProps & {
   value: any[]
   options?: Array<CheckboxProps | string>
+  optionType: 'default' | 'button'
 }
 
 const TransformElCheckboxGroup = getComponentByTag(ElCheckboxGroup, {
@@ -84,6 +94,10 @@ const CheckboxGroupOption = defineComponent<CheckboxGroupProps>({
       type: Array,
       default: () => [],
     },
+    optionType: {
+      type: String as PropType<CheckboxGroupProps['optionType']>,
+      default: 'default',
+    },
   },
   setup(customProps, { attrs, slots, listeners }) {
     return () => {
@@ -96,11 +110,36 @@ const CheckboxGroupOption = defineComponent<CheckboxGroupProps>({
                   if (typeof option === 'string') {
                     return h(
                       Checkbox,
-                      { props: { option: { label: option, value: option } } },
-                      {}
+                      {
+                        props: {
+                          option: {
+                            label: option,
+                            value: option,
+                          },
+                        },
+                        attrs: {
+                          optionType: customProps.optionType,
+                        },
+                      },
+                      slots?.option
+                        ? { default: () => slots.option({ option }) }
+                        : {}
                     )
                   } else {
-                    return h(Checkbox, { props: { option } }, {})
+                    return h(
+                      Checkbox,
+                      {
+                        props: {
+                          option,
+                        },
+                        attrs: {
+                          optionType: customProps.optionType,
+                        },
+                      },
+                      slots?.option
+                        ? { default: () => slots.option({ option }) }
+                        : {}
+                    )
                   }
                 }),
             }

diff --git a/packages/element/src/form-item/index.ts b/packages/element/src/form-item/index.ts
@@ -107,17 +107,17 @@ export const FormBaseItem = defineComponent<FormItemProps>({
     className: {},
     required: {},
     label: {},
-    colon: { default: true },
+    colon: {},
     layout: {},
     tooltip: {},
     labelStyle: {},
     labelAlign: {},
-    labelWrap: { default: false },
+    labelWrap: {},
     labelWidth: {},
     wrapperWidth: {},
     labelCol: {},
     wrapperCol: {},
-    wrapperAlign: { default: 'left' },
+    wrapperAlign: {},
     wrapperWrap: {},
     wrapperStyle: {},
     fullness: {},
@@ -151,16 +151,16 @@ export const FormBaseItem = defineComponent<FormItemProps>({
     return () => {
       const {
         label,
-        colon,
+        colon = deepLayout.colon ?? true,
         layout = deepLayout.layout ?? 'horizontal',
         tooltip,
         labelStyle = {},
-        labelWrap = deepLayout.labelWrap,
+        labelWrap = deepLayout.labelWrap ?? false,
         labelWidth = deepLayout.labelWidth,
         wrapperWidth = deepLayout.wrapperWidth,
         labelCol = deepLayout.labelCol,
         wrapperCol = deepLayout.wrapperCol,
-        wrapperAlign = deepLayout.wrapperAlign,
+        wrapperAlign = deepLayout.wrapperAlign ?? 'left',
         wrapperWrap = deepLayout.wrapperWrap,
         wrapperStyle = {},
         fullness = deepLayout.fullness,

diff --git a/packages/element/src/form-item/style.scss b/packages/element/src/form-item/style.scss
@@ -316,7 +316,7 @@
 }
 
 .#{$form-item-prefix}-colon {
-  margin-left: 4px / 2;
+  margin-left: 2px;
   margin-right: 8px;
 }