Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 2 commits into from
Jan 18, 2023
+130 −8
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
65f4f3c
feat(checkbox): add checkbox new props of shape
mikasayw Dec 26, 2022
33a4384
docs: 修改demo单独增加一个示例
mikasayw Jan 18, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/packages/__VUE/checkbox/__tests__/__snapshots__/checkbox.spec.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>"
`;
19 changes: 19 additions & 0 deletions src/packages/__VUE/checkbox/__tests__/checkbox.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
});
28 changes: 23 additions & 5 deletions src/packages/__VUE/checkbox/common.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'],
Expand Down Expand Up @@ -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) {
Expand All @@ -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);
Expand All @@ -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()]]
);
};
}
Expand Down
16 changes: 14 additions & 2 deletions src/packages/__VUE/checkbox/demo.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -158,7 +167,8 @@ const initTranslate = () =>
checkbox: '复选框',
selectedDisable: '选中时禁用状态',
unselectDisable: '未选时禁用状态',
useGroupInte: '全选/半选/取消'
useGroupInte: '全选/半选/取消',
useShape: '按钮形状'
},
'en-US': {
basic: 'Basic usage - left and right',
Expand All @@ -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({
Expand All @@ -204,6 +215,7 @@ export default createDemo({
checkboxgroup3: ['2'],
checkboxgroup4: ['2'],
checkboxgroup5: [],
checkboxgroup6: [],
checkboxsource: [
{ label: '1', value: translate('combine') },
{ label: '2', value: translate('combine') },
Expand Down
1 change: 1 addition & 0 deletions src/packages/__VUE/checkbox/doc.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
1 change: 1 addition & 0 deletions src/packages/__VUE/checkbox/doc.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

| 字段 | 说明 | 类型 | 默认值
Expand Down
28 changes: 28 additions & 0 deletions src/packages/__VUE/checkbox/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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;
Expand Down
8 changes: 8 additions & 0 deletions src/packages/styles/variables-jdb.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
8 changes: 8 additions & 0 deletions src/packages/styles/variables-jddkh.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
8 changes: 8 additions & 0 deletions src/packages/styles/variables-jdt.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
8 changes: 8 additions & 0 deletions src/packages/styles/variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
11 changes: 11 additions & 0 deletions src/sites/mobile-taro/vue/src/dentry/pages/checkbox/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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">
Expand All @@ -130,6 +140,7 @@ export default {
checkboxgroup3: ['2'],
checkboxgroup4: ['2'],
checkboxgroup5: [],
checkboxgroup6: [],
checkboxsource: [
{ label: '1', value: '组合复选框' },
{ label: '2', value: '组合复选框' },
Expand Down