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

* feat(checkbox): add checkbox new props of shape

* docs: 修改demo单独增加一个示例

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

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`basic usage 1`] = `
-"<view class=\\"nut-checkbox \\"><i class=\\"nutui-iconfont nut-icon nut-icon-checked nut-checkbox__icon\\" src=\\"\\"></i>
+"<view class=\\"nut-checkbox nut-checkbox--round \\"><i class=\\"nutui-iconfont nut-icon nut-icon-checked nut-checkbox__icon\\" src=\\"\\"></i>
   <view class=\\"nut-checkbox__label \\"></view>
 </view>"
 `;

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

@@ -145,3 +145,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

@@ -49,6 +49,10 @@ export const component = (componentName: string, nutIcon: object) => {
       indeterminate: {
         type: Boolean,
         default: false
+      },
+      shape: {
+        type: String,
+        default: 'round' // button
       }
     },
     emits: ['change', 'update:modelValue'],
@@ -124,6 +128,18 @@ export const component = (componentName: string, nutIcon: object) => {
         );
       };
 
+      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) {
@@ -133,9 +149,9 @@ export const component = (componentName: string, nutIcon: object) => {
         }
         emitChange(!checked.value, slots.default?.()[0].children as string);
         if (hasParent.value) {
-          let value = parent.value.value;
-          let max = parent.max.value;
-          let { label } = props;
+          const value = parent.value.value;
+          const max = parent.max.value;
+          const { label } = props;
           const index = value.indexOf(label);
           if (index > -1) {
             value.splice(index, 1);
@@ -161,10 +177,12 @@ export const component = (componentName: string, nutIcon: object) => {
         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

@@ -128,6 +128,15 @@
         >
       </nut-checkboxgroup>
     </nut-cell-group>
+
+    <nut-cell-group :title="translate('useShape')">
+      <nut-cell>
+        <nut-checkboxgroup v-model="checkboxgroup6">
+          <nut-checkbox label="1" shape="button">{{ translate('useShape') }}</nut-checkbox>
+          <nut-checkbox label="2" shape="button">{{ translate('useShape') }}</nut-checkbox>
+        </nut-checkboxgroup>
+      </nut-cell>
+    </nut-cell-group>
   </div>
 </template>
 <script lang="ts">
@@ -158,7 +167,8 @@ const initTranslate = () =>
       checkbox: '复选框',
       selectedDisable: '选中时禁用状态',
       unselectDisable: '未选时禁用状态',
-      useGroupInte: '全选/半选/取消'
+      useGroupInte: '全选/半选/取消',
+      useShape: '按钮形状'
     },
     'en-US': {
       basic: 'Basic usage - left and right',
@@ -180,7 +190,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({
@@ -204,6 +215,7 @@ export default createDemo({
       checkboxgroup3: ['2'],
       checkboxgroup4: ['2'],
       checkboxgroup5: [],
+      checkboxgroup6: [],
       checkboxsource: [
         { label: '1', value: translate('combine') },
         { label: '2', value: translate('combine') },

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

@@ -385,6 +385,7 @@ When the value changes, the `change` event will be triggered
 | icon-font-class-name | Basic class name of custom icon font        | String                  | `nutui-iconfont` 
 | 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 `v3.3.4` | Shape, optional values：`button`、`round` | String | `round` |
 
 
 ### CheckboxGroup Props

src/packages/__VUE/checkbox/doc.md

@@ -389,6 +389,7 @@ app.use(Icon);
 | icon-font-class-name | 自定义 icon 字体基础类名        | String                  | `nutui-iconfont` |
 | label | 复选框的文本内容 | String | -
 | indeterminate | 当前是否支持半选状态，一般用在全选操作中        | Boolean                  | `false` |
+| shape `v3.3.4` | 形状，可选值：`button`、`round` | String | `round` |
 ### CheckboxGroup Props
 
 | 字段 | 说明 | 类型 | 默认值

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,26 @@
       margin-left: 0;
     }
   }
+  &__button {
+    display: inline-flex;
+    align-items: center;
+    padding: $checkbox-button-padding;
+    font-size: $checkbox-button-font-size;
+    background: $checkbox-label-button-bg-color;
+    border-radius: $checkbox-button-border-radius;
+    color: $checkbox-label-color;
+    box-sizing: border-box;
+    border: 1px solid $checkbox-label-button-border-color;
+    &--active {
+      background: $checkbox-label-button-bg-active-color;
+      color: $checkbox-label-font-active-color;
+      border: 1px solid $checkbox-label-button-border-active-color;
+    }
+    &--disabled {
+      color: $checkbox-label-disable-color;
+      border: none;
+    }
+  }
   &__label {
     flex: 1;
     margin-left: $checkbox-label-margin-left;

src/packages/styles/variables-jdb.scss

@@ -509,6 +509,14 @@ $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-button-padding: 5px 18px !default;
+$checkbox-button-font-size: 12px !default;
+$checkbox-button-border-radius: 15px !default;
+$checkbox-label-button-bg-color: #f6f7f9 !default;
+$checkbox-label-button-border-color: #f6f7f9 !default;
+$checkbox-label-button-bg-active-color: rgba($primary-color, 0.05) !default;
+$checkbox-label-button-border-active-color: $primary-color !default;
+$checkbox-label-font-active-color: $primary-color !default;
 
 //radio
 $radio-label-font-color: #1d1e1e !default;

src/packages/styles/variables-jddkh.scss

@@ -440,6 +440,14 @@ $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-button-padding: 5px 18px !default;
+$checkbox-button-font-size: 12px !default;
+$checkbox-button-border-radius: 15px !default;
+$checkbox-label-button-bg-color: #f6f7f9 !default;
+$checkbox-label-button-border-color: #f6f7f9 !default;
+$checkbox-label-button-bg-active-color: rgba($primary-color, 0.05) !default;
+$checkbox-label-button-border-active-color: $primary-color !default;
+$checkbox-label-font-active-color: $primary-color !default;
 
 //radio
 $radio-label-font-color: #1d1e1e !default;

src/packages/styles/variables-jdt.scss

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

src/packages/styles/variables.scss

@@ -440,6 +440,14 @@ $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-button-padding: 5px 18px !default;
+$checkbox-button-font-size: 12px !default;
+$checkbox-button-border-radius: 15px !default;
+$checkbox-label-button-bg-color: #f6f7f9 !default;
+$checkbox-label-button-border-color: #f6f7f9 !default;
+$checkbox-label-button-bg-active-color: rgba($primary-color, 0.05) !default;
+$checkbox-label-button-border-active-color: $primary-color !default;
+$checkbox-label-font-active-color: $primary-color !default;
 
 //radio
 $radio-label-font-color: #1d1e1e !default;

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

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