feat(checkbox): add checkbox new props of shape (#2072)

src/packages/__VUE/checkbox/__tests__/checkbox.spec.ts

@@ -97,3 +97,22 @@ test('should emit "update:modelValue" event when checkbox is clicked', async ()
   wrapper.trigger('click');
   expect(wrapper.emitted('update:modelValue')![1]).toEqual([false]);
 });
+
+test('checkbox shape test', async () => {
+  const wrapper = mount({
+    components: {
+      'nut-checkbox': Checkbox
+    },
+    template: `
+      <template>
+        <nut-checkbox shape="button"></nut-checkbox>
+        <nut-checkbox></nut-checkbox>
+      </template>
+    `
+  });
+
+  const items = wrapper.findAll('.nut-checkbox');
+
+  expect((items[0] as any).find('.nut-checkbox__button').exists()).toBeTruthy();
+  expect((items[1] as any).find('.nut-checkbox__button').exists()).toBeFalsy();
+});

src/packages/__VUE/checkbox/common.ts

@@ -28,6 +28,10 @@ export const component = (componentName: string, components: Record<string, Comp
       indeterminate: {
         type: Boolean,
         default: false
+      },
+      shape: {
+        type: String,
+        default: 'round' // button
       }
     },
     emits: ['change', 'update:modelValue'],
@@ -113,6 +117,18 @@ export const component = (componentName: string, components: Record<string, Comp
         );
       };
 
+      const renderButton = () => {
+        return h(
+          'view',
+          {
+            class: `${componentName}__button ${pValue.value && `${componentName}__button--active`} ${
+              pDisabled.value ? `${componentName}__button--disabled` : ''
+            }`
+          },
+          slots.default?.()
+        );
+      };
+
       const handleClick = (e: MouseEvent | TouchEvent) => {
         if (pDisabled.value) return;
         if (checked.value && state.partialSelect) {
@@ -150,10 +166,13 @@ export const component = (componentName: string, components: Record<string, Comp
         return h(
           'view',
           {
-            class: `${componentName} ${props.textPosition === 'left' ? `${componentName}--reverse` : ''}`,
+            class: `${componentName} ${componentName}--${props.shape} ${
+              props.textPosition === 'left' ? `${componentName}--reverse` : ''
+            }`,
+
             onClick: handleClick
           },
-          [renderIcon(), renderLabel()]
+          [props.shape == 'button' ? renderButton() : [renderIcon(), renderLabel()]]
         );
       };
     }

src/packages/__VUE/checkbox/demo.vue

@@ -126,6 +126,14 @@
         </nut-cell>
       </nut-checkbox-group>
     </nut-cell-group>
+    <nut-cell-group :title="translate('useShape')">
+      <nut-cell>
+        <nut-checkbox-group v-model="checkboxgroup6">
+          <nut-checkbox label="1" shape="button">{{ translate('useShape') }}</nut-checkbox>
+          <nut-checkbox label="2" shape="button">{{ translate('useShape') }}</nut-checkbox>
+        </nut-checkbox-group>
+      </nut-cell>
+    </nut-cell-group>
   </div>
 </template>
 <script lang="ts">
@@ -157,7 +165,8 @@ const initTranslate = () =>
       checkbox: '复选框',
       selectedDisable: '选中时禁用状态',
       unselectDisable: '未选时禁用状态',
-      useGroupInte: '全选/半选/取消'
+      useGroupInte: '全选/半选/取消',
+      useShape: '按钮形状'
     },
     'en-US': {
       basic: 'Basic usage - left and right',
@@ -179,7 +188,8 @@ const initTranslate = () =>
       checkbox: 'check box',
       selectedDisable: 'Disabled when selected',
       unselectDisable: 'Disabled when not selected',
-      useGroupInte: 'Select all / half / cancel'
+      useGroupInte: 'Select all / half / cancel',
+      useShape: 'Button shape'
     }
   });
 export default createDemo({
@@ -206,6 +216,7 @@ export default createDemo({
       checkboxgroup3: ['2'],
       checkboxgroup4: ['2'],
       checkboxgroup5: [],
+      checkboxgroup6: [],
       checkboxsource: [
         { label: '1', value: translate('combine') },
         { label: '2', value: translate('combine') },
@@ -237,6 +248,7 @@ export default createDemo({
     };
 
     const changeBox6 = (label: string[]) => {
+      console.log(11);
       if (label.length === 4) {
         data.indeterminate = false;
         data.checkbox10 = true;

src/packages/__VUE/checkbox/doc.en-US.md

@@ -417,6 +417,7 @@ When the value changes, the `change` event will be triggered
 | icon-size | [Icon Size](#/en-US/icon) | string \| number | `18` 
 | label | Text content of the check box | string | - 
 | indeterminate | Whether half selection status is currently supported. It is generally used in select all operation       | boolean                  | `false` |
+| shape | Shape, optional values：`button`、`round` | String | `round` |
 
 ### Checkbox Slots
 | Name | Description |
@@ -468,3 +469,11 @@ The component provides the following CSS variables, which can be used to customi
 | --nut-checkbox-label-font-size| _14px_ |
 | --nut-checkbox-icon-font-size| _18px_ |
 | --nut-checkbox-icon-disable-color2| _var(--nut-help-color)_ |
+| --nut-checkbox-button-padding|  _5px 18px_  |
+| --nut-checkbox-button-font-size|  _12px_  |
+| --nut-checkbox-button-border-radius|  _15px_  |
+| --nut-checkbox-button-border-color|  _#f6f7f9_  |
+| --nut-checkbox-button-background|  _#f6f7f9_  |
+| --nut-checkbox-button-font-color-active|  _var(--nut-primary-color)_  |
+| --nut-checkbox-button-border-color-active|  _var(--nut-primary-color)_  |
+| --nut-checkbox-button-background-active|  _var(--nut-primary-color)_  |

src/packages/__VUE/checkbox/doc.md

@@ -422,6 +422,8 @@ app.use(CheckboxGroup);
 | icon-size | [图标尺寸](#/zh-CN/component/icon) | string \| number | `18`
 | label | 复选框的文本内容 | string | -
 | indeterminate | 当前是否支持半选状态，一般用在全选操作中        | boolean                  | `false` |
+| shape | 形状，可选值：`button`、`round` | String | `round` |
+
 ### Checkbox Slots
 | 名称 | 说明 |
 |-|-|
@@ -473,3 +475,11 @@ app.use(CheckboxGroup);
 | --nut-checkbox-label-font-size| _14px_ |
 | --nut-checkbox-icon-font-size| _18px_ |
 | --nut-checkbox-icon-disable-color2| _var(--nut-help-color)_ |
+| --nut-checkbox-button-padding|  _5px 18px_  |
+| --nut-checkbox-button-font-size|  _12px_  |
+| --nut-checkbox-button-border-radius|  _15px_  |
+| --nut-checkbox-button-border-color|  _#f6f7f9_  |
+| --nut-checkbox-button-background|  _#f6f7f9_  |
+| --nut-checkbox-button-font-color-active|  _var(--nut-primary-color)_  |
+| --nut-checkbox-button-border-color-active|  _var(--nut-primary-color)_  |
+| --nut-checkbox-button-background-active|  _var(--nut-primary-color)_  |

src/packages/__VUE/checkbox/doc.taro.md

@@ -382,6 +382,8 @@ app.use(CheckboxGroup);
 | icon-size | [图标尺寸](#/zh-CN/component/icon) | string \| number | `18`
 | label | 复选框的文本内容 | string | -
 | indeterminate | 当前是否支持半选状态，一般用在全选操作中        | boolean                  | `false` |
+| shape | 形状，可选值：`button`、`round` | String | `round` |
+
 ### Checkbox Slots
 | 名称 | 说明 |
 |-|-|
@@ -433,3 +435,11 @@ app.use(CheckboxGroup);
 | --nut-checkbox-label-font-size| _14px_ | -  |
 | --nut-checkbox-icon-font-size| _18px_ | -  |
 | --nut-checkbox-icon-disable-color2| _var(--nut-help-color)_ | -  |
+| --nut-checkbox-button-padding|  _5px 18px_  |
+| --nut-checkbox-button-font-size|  _12px_  |
+| --nut-checkbox-button-border-radius|  _15px_  |
+| --nut-checkbox-button-border-color|  _#f6f7f9_  |
+| --nut-checkbox-button-background|  _#f6f7f9_  |
+| --nut-checkbox-button-font-color-active|  _var(--nut-primary-color)_  |
+| --nut-checkbox-button-border-color-active|  _var(--nut-primary-color)_  |
+| --nut-checkbox-button-background-active|  _var(--nut-primary-color)_  |

src/packages/__VUE/checkbox/index.scss

@@ -6,6 +6,14 @@
         color: $checkbox-label-disable-color;
       }
     }
+    &__button {
+      background: $dark-background;
+      color: $dark-color;
+      &--disabled {
+        color: $checkbox-label-disable-color;
+        border: 1px solid $checkbox-label-disable-color;
+      }
+    }
   }
 }
 .nut-checkbox {
@@ -18,6 +26,39 @@
       margin-left: 0;
     }
   }
+  &__button {
+    display: inline-flex;
+    align-items: center;
+    padding: $checkbox-button-padding;
+    font-size: $checkbox-button-font-size;
+    background: $checkbox-button-background;
+    border-radius: $checkbox-button-border-radius;
+    color: $checkbox-label-color;
+    box-sizing: border-box;
+    border: 1px solid $checkbox-button-border-color;
+    &--active {
+      background: transparent;
+      color: $checkbox-button-font-color-active;
+      border: 1px solid $checkbox-button-border-color-active;
+      position: relative;
+      &::after {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: $checkbox-button-background-active;
+        opacity: 0.05;
+        content: '';
+      }
+    }
+    &--disabled {
+      color: $checkbox-label-disable-color;
+      border: none;
+    }
+  }
   &__label {
     flex: 1;
     margin-left: $checkbox-label-margin-left;

src/packages/styles/variables-jdb.scss

@@ -504,7 +504,15 @@ $checkbox-icon-disable-color: #d6d6d6 !default;
 $checkbox-label-margin-left: 15px !default;
 $checkbox-label-font-size: 14px !default;
 $checkbox-icon-font-size: 18px !default;
-$checkbox-icon-disable-color2: $help-color !default;
+$checkbox-icon-disable-color2: var(--nut-checkbox-icon-disable-color2, $help-color) !default;
+$checkbox-button-padding: var(--nut-checkbox-button-padding, 5px 18px) !default;
+$checkbox-button-font-size: var(--nut-checkbox-button-font-size, 12px) !default;
+$checkbox-button-border-radius: var(--nut-checkbox-button-border-radius, 15px) !default;
+$checkbox-button-border-color: var(--nut-checkbox-button-border-color, #f6f7f9) !default;
+$checkbox-button-background: var(--nut-checkbox-button-background, #f6f7f9) !default;
+$checkbox-button-font-color-active: var(--nut-checkbox-button-font-color-active, $primary-color) !default;
+$checkbox-button-border-color-active: var(--nut-checkbox-button-border-color-active, $primary-color) !default;
+$checkbox-button-background-active: var(--nut-checkbox-button-background-active, $primary-color) !default;
 
 //radio
 $radio-label-font-color: #1d1e1e !default;

src/packages/styles/variables-jddkh.scss

@@ -436,7 +436,15 @@ $checkbox-icon-disable-color: #d6d6d6 !default;
 $checkbox-label-margin-left: 15px !default;
 $checkbox-label-font-size: 14px !default;
 $checkbox-icon-font-size: 18px !default;
-$checkbox-icon-disable-color2: $checkbox-icon-disable-color !default;
+$checkbox-icon-disable-color2: var(--nut-checkbox-icon-disable-color2, $help-color) !default;
+$checkbox-button-padding: var(--nut-checkbox-button-padding, 5px 18px) !default;
+$checkbox-button-font-size: var(--nut-checkbox-button-font-size, 12px) !default;
+$checkbox-button-border-radius: var(--nut-checkbox-button-border-radius, 15px) !default;
+$checkbox-button-border-color: var(--nut-checkbox-button-border-color, #f6f7f9) !default;
+$checkbox-button-background: var(--nut-checkbox-button-background, #f6f7f9) !default;
+$checkbox-button-font-color-active: var(--nut-checkbox-button-font-color-active, $primary-color) !default;
+$checkbox-button-border-color-active: var(--nut-checkbox-button-border-color-active, $primary-color) !default;
+$checkbox-button-background-active: var(--nut-checkbox-button-background-active, $primary-color) !default;
 
 //radio
 $radio-label-font-color: #1d1e1e !default;

src/packages/styles/variables-jdt.scss

@@ -442,6 +442,14 @@ $checkbox-label-margin-left: var(--nut-checkbox-label-margin-left, 8px) !default
 $checkbox-label-font-size: var(--nut-checkbox-label-font-size, 16px) !default;
 $checkbox-icon-font-size: var(--nut-checkbox-icon-font-size, 20px) !default;
 $checkbox-icon-disable-color2: var(--nut-checkbox-icon-disable-color2, $help-color) !default;
+$checkbox-button-padding: var(--nut-checkbox-button-padding, 5px 18px) !default;
+$checkbox-button-font-size: var(--nut-checkbox-button-font-size, 12px) !default;
+$checkbox-button-border-radius: var(--nut-checkbox-button-border-radius, 15px) !default;
+$checkbox-button-border-color: var(--nut-checkbox-button-border-color, #f6f7f9) !default;
+$checkbox-button-background: var(--nut-checkbox-button-background, #f6f7f9) !default;
+$checkbox-button-font-color-active: var(--nut-checkbox-button-font-color-active, $primary-color) !default;
+$checkbox-button-border-color-active: var(--nut-checkbox-button-border-color-active, $primary-color) !default;
+$checkbox-button-background-active: var(--nut-checkbox-button-background-active, $primary-color) !default;
 
 //radio
 $radio-label-font-color: var(--nut-radio-label-font-color, rgba(0, 0, 0, 0.85)) !default;

src/packages/styles/variables.scss

@@ -480,6 +480,14 @@ $checkbox-label-margin-left: var(--nut-checkbox-label-margin-left, 15px) !defaul
 $checkbox-label-font-size: var(--nut-checkbox-label-font-size, 14px) !default;
 $checkbox-icon-font-size: var(--nut-checkbox-icon-font-size, 18px) !default;
 $checkbox-icon-disable-color2: var(--nut-checkbox-icon-disable-color2, $help-color) !default;
+$checkbox-button-padding: var(--nut-checkbox-button-padding, 5px 18px) !default;
+$checkbox-button-font-size: var(--nut-checkbox-button-font-size, 12px) !default;
+$checkbox-button-border-radius: var(--nut-checkbox-button-border-radius, 15px) !default;
+$checkbox-button-border-color: var(--nut-checkbox-button-border-color, #f6f7f9) !default;
+$checkbox-button-background: var(--nut-checkbox-button-background, #f6f7f9) !default;
+$checkbox-button-font-color-active: var(--nut-checkbox-button-font-color-active, $primary-color) !default;
+$checkbox-button-border-color-active: var(--nut-checkbox-button-border-color-active, $primary-color) !default;
+$checkbox-button-background-active: var(--nut-checkbox-button-background-active, $primary-color) !default;
 
 //radio
 $radio-label-font-color: var(--nut-radio-label-font-color, #1d1e1e) !default;

src/sites/mobile-taro/vue/src/dentry/pages/checkbox/index.vue

@@ -107,6 +107,14 @@
         <nut-cell><nut-checkbox label="4">组合复选框</nut-checkbox></nut-cell>
       </nut-checkbox-group>
     </nut-cell-group>
+    <nut-cell-group title="按钮形状">
+      <nut-cell>
+        <nut-checkbox-group v-model="checkboxgroup6">
+          <nut-checkbox label="1" shape="button">按钮形状</nut-checkbox>
+          <nut-checkbox label="2" shape="button">按钮形状</nut-checkbox>
+        </nut-checkbox-group>
+      </nut-cell>
+    </nut-cell-group>
   </div>
 </template>
 <script lang="ts">
@@ -140,6 +148,7 @@ export default {
       checkboxgroup3: ['2'],
       checkboxgroup4: ['2'],
       checkboxgroup5: [],
+      checkboxgroup6: [],
       checkboxsource: [
         { label: '1', value: '组合复选框' },
         { label: '2', value: '组合复选框' },