diff --git a/src/packages/__VUE/checkbox/__tests__/__snapshots__/checkbox.spec.ts.snap b/src/packages/__VUE/checkbox/__tests__/__snapshots__/checkbox.spec.ts.snap index f415d085d4..abb923d53d 100644 --- a/src/packages/__VUE/checkbox/__tests__/__snapshots__/checkbox.spec.ts.snap +++ b/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>" `; diff --git a/src/packages/__VUE/checkbox/__tests__/checkbox.spec.ts b/src/packages/__VUE/checkbox/__tests__/checkbox.spec.ts index da3a90e1e0..0c62da1ec2 100644 --- a/src/packages/__VUE/checkbox/__tests__/checkbox.spec.ts +++ b/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(); +}); diff --git a/src/packages/__VUE/checkbox/common.ts b/src/packages/__VUE/checkbox/common.ts index 43fb2c6958..3e8aab3190 100644 --- a/src/packages/__VUE/checkbox/common.ts +++ b/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()]] ); }; } diff --git a/src/packages/__VUE/checkbox/demo.vue b/src/packages/__VUE/checkbox/demo.vue index 8686b432bf..52d4b116d2 100644 --- a/src/packages/__VUE/checkbox/demo.vue +++ b/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') }, diff --git a/src/packages/__VUE/checkbox/doc.en-US.md b/src/packages/__VUE/checkbox/doc.en-US.md index b0c94de768..539f2c434e 100644 --- a/src/packages/__VUE/checkbox/doc.en-US.md +++ b/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 diff --git a/src/packages/__VUE/checkbox/doc.md b/src/packages/__VUE/checkbox/doc.md index 9076d4dba9..9bde8908bc 100644 --- a/src/packages/__VUE/checkbox/doc.md +++ b/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 | 字段 | 说明 | 类型 | 默认值 diff --git a/src/packages/__VUE/checkbox/index.scss b/src/packages/__VUE/checkbox/index.scss index a620d3981a..35b6230c39 100644 --- a/src/packages/__VUE/checkbox/index.scss +++ b/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; diff --git a/src/packages/styles/variables-jdb.scss b/src/packages/styles/variables-jdb.scss index 8ba8503842..d94c5159bc 100644 --- a/src/packages/styles/variables-jdb.scss +++ b/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; diff --git a/src/packages/styles/variables-jddkh.scss b/src/packages/styles/variables-jddkh.scss index a2258d0bbe..e44996824b 100644 --- a/src/packages/styles/variables-jddkh.scss +++ b/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; diff --git a/src/packages/styles/variables-jdt.scss b/src/packages/styles/variables-jdt.scss index ea3ee47475..f7ac866dad 100644 --- a/src/packages/styles/variables-jdt.scss +++ b/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; diff --git a/src/packages/styles/variables.scss b/src/packages/styles/variables.scss index 6b4a66f85e..47ddd560ab 100644 --- a/src/packages/styles/variables.scss +++ b/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; diff --git a/src/sites/mobile-taro/vue/src/dentry/pages/checkbox/index.vue b/src/sites/mobile-taro/vue/src/dentry/pages/checkbox/index.vue index 59c0cbf290..6d81cdb57d 100644 --- a/src/sites/mobile-taro/vue/src/dentry/pages/checkbox/index.vue +++ b/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: '组合复选框' },