Skip to content

feat: ✨checkbox label slot support use option label #6642

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

Merged
merged 6 commits into from
Jun 15, 2023
Merged

feat: ✨checkbox label slot support use option label #6642

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
6989bd5
docs: 📃change the default setting of "treeNodeFilterProp" from "va…
waldonUB May 27, 2023
d69050f
revert: ↩revert this config and create another pr to commit
waldonUB May 28, 2023
a75bf73
Merge branch 'vueComponent:main' into main
waldonUB Jun 8, 2023
8fe7b27
feat: ✨checkbox label slot support use option label
waldonUB Jun 8, 2023
b6e5f90
test: 🧪update checkbox *.snap file
waldonUB Jun 8, 2023
7fe1028
Merge branch 'feat-v4' into main
tangjinzhou Jun 15, 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 components/checkbox/Group.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@ export default defineComponent({
onChange={option.onChange}
class={`${groupPrefixCls.value}-item`}
>
{option.label === undefined ? slots.label?.(option) : option.label}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

算是破环性更新了，合并到 v4 分支了，v3 这个不动了

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

OK

{slots.label !== undefined ? slots.label?.(option) : option.label}
</Checkbox>
));
}
Expand Down
2 changes: 1 addition & 1 deletion components/checkbox/__tests__/__snapshots__/demo.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ exports[`renders ./components/checkbox/demo/group.vue correctly 1`] = `
<div class="ant-checkbox-group"><label class="ant-checkbox-wrapper ant-checkbox-group-item"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="Apple"><span class="ant-checkbox-inner"></span></span><span>Apple</span></label><label class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-group-item"><span class="ant-checkbox ant-checkbox-checked"><input type="checkbox" class="ant-checkbox-input" value="Pear"><span class="ant-checkbox-inner"></span></span><span>Pear</span></label><label class="ant-checkbox-wrapper ant-checkbox-group-item"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="Orange"><span class="ant-checkbox-inner"></span></span><span>Orange</span></label></div>
<br>
<br>
<div class="ant-checkbox-group"><label class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-disabled ant-checkbox-group-item"><span class="ant-checkbox ant-checkbox-checked ant-checkbox-disabled"><input type="checkbox" disabled="" class="ant-checkbox-input" value="Apple"><span class="ant-checkbox-inner"></span></span><span><span style="color: red;">Apple</span></span></label><label class="ant-checkbox-wrapper ant-checkbox-wrapper-disabled ant-checkbox-group-item"><span class="ant-checkbox ant-checkbox-disabled"><input type="checkbox" disabled="" class="ant-checkbox-input" value="Pear"><span class="ant-checkbox-inner"></span></span><span>Pear</span></label><label class="ant-checkbox-wrapper ant-checkbox-wrapper-disabled ant-checkbox-group-item"><span class="ant-checkbox ant-checkbox-disabled"><input type="checkbox" disabled="" class="ant-checkbox-input" value="Orange"><span class="ant-checkbox-inner"></span></span><span>Orange</span></label></div>
<div class="ant-checkbox-group"><label class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-disabled ant-checkbox-group-item"><span class="ant-checkbox ant-checkbox-checked ant-checkbox-disabled"><input type="checkbox" disabled="" class="ant-checkbox-input" value="Apple"><span class="ant-checkbox-inner"></span></span><span><span style="color: red;">Apple</span></span></label><label class="ant-checkbox-wrapper ant-checkbox-wrapper-disabled ant-checkbox-group-item"><span class="ant-checkbox ant-checkbox-disabled"><input type="checkbox" disabled="" class="ant-checkbox-input" value="Pear"><span class="ant-checkbox-inner"></span></span><span><span style="color: red;">Pear</span></span></label><label class="ant-checkbox-wrapper ant-checkbox-wrapper-disabled ant-checkbox-group-item"><span class="ant-checkbox ant-checkbox-disabled"><input type="checkbox" disabled="" class="ant-checkbox-input" value="Orange"><span class="ant-checkbox-inner"></span></span><span><span style="color: red;">Orange</span></span></label></div>
`;

exports[`renders ./components/checkbox/demo/layout.vue correctly 1`] = `
Expand Down
6 changes: 3 additions & 3 deletions components/checkbox/demo/group.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,8 @@ Generate a group of checkboxes from an array
<br />
<br />
<a-checkbox-group v-model:value="state.value4" :options="optionsWithDisabled" disabled>
<template #label="{ value }">
<span style="color: red">{{ value }}</span>
<template #label="{ label }">
<span style="color: red">{{ label }}</span>
</template>
</a-checkbox-group>
</template>
Expand All @@ -42,7 +42,7 @@ const options = [
{ label: 'Orange', value: 'Orange' },
];
const optionsWithDisabled = [
{ value: 'Apple' },
{ label: 'Apple', value: 'Apple' },
{ label: 'Pear', value: 'Pear' },
{ label: 'Orange', value: 'Orange', disabled: false },
];
Expand Down