javascript/element-plus
1
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2026-03-13 07:51:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(components): [check-tag] add disabled prop (#17936)

Browse Source 
* feat(components): [check-tag] add `disabled` prop

* style(components): [check-tag] add styles when disabled

* chore(components): [check-tag] update doc

* fix(components): [check-tag] fix bg-color in disabled

When the check-tag type is `primary` and it is unchecked, keep the background
color consistent with the `info` type. this ensures visual consistency.

* chore(components): [check-tag] update doc

Co-authored-by: btea <2356281422@qq.com>

* chore(components): [check-tag] formatting document content

* update doc

Co-authored-by: qiang <qw13131wang@gmail.com>

---------

Co-authored-by: Haceral <18274416193@163.com>
Co-authored-by: btea <2356281422@qq.com>
Co-authored-by: qiang <qw13131wang@gmail.com>
This commit is contained in:
Haceral
2024-08-30 18:41:11 +08:00
committed by GitHub
parent 1a5b5c4f2b
commit 4246d1e468
6 changed files with 82 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
docs/en-US/component/tag.md
View File

@@ -105,10 +105,11 @@ tag/checkable
### CheckTag Attributes
| Name | Description | Type | Default |
| ------------------------- | ---------------- | ------------------------------------------------------------------ | ------- |
| checked / v-model:checked | is checked | ^[boolean] | false |
| type ^(2.5.4) | type of CheckTag | ^[enum]`'primary' \| 'success' \| 'info' \| 'warning' \| 'danger'` | primary |
| Name | Description | Type | Default |
| ------------------------- | --------------------------------- | ------------------------------------------------------------------ | ------- |
| checked / v-model:checked | is checked | ^[boolean] | false |
| disabled ^(2.8.2) | whether the check-tag is disabled | ^[boolean] | false |
| type ^(2.5.4) | type of CheckTag | ^[enum]`'primary' \| 'success' \| 'info' \| 'warning' \| 'danger'` | primary |
### CheckTag Events

14
docs/examples/tag/checkable.vue
View File

@@ -2,6 +2,7 @@
<div class="flex gap-2">
<el-check-tag checked>Checked</el-check-tag>
<el-check-tag :checked="checked" @change="onChange">Toggle me</el-check-tag>
<el-check-tag disabled>Disabled</el-check-tag>
</div>
<div class="flex gap-2 mt-4">
<el-check-tag :checked="checked1" type="primary" @change="onChange1">
@@ -19,6 +20,14 @@
<el-check-tag :checked="checked5" type="danger" @change="onChange5">
Tag 5
</el-check-tag>
<el-check-tag
:checked="checked6"
disabled
type="success"
@change="onChange6"
>
Tag 6
</el-check-tag>
</div>
</template>
@@ -31,6 +40,7 @@ const checked2 = ref(true)
const checked3 = ref(true)
const checked4 = ref(true)
const checked5 = ref(true)
const checked6 = ref(true)
const onChange = (status: boolean) => {
checked.value = status
@@ -55,4 +65,8 @@ const onChange4 = (status: boolean) => {
const onChange5 = (status: boolean) => {
checked5.value = status
}
const onChange6 = (status: boolean) => {
checked6.value = status
}
</script>

24
packages/components/check-tag/__tests__/check-tag.test.tsx
View File

@@ -14,6 +14,7 @@ describe('CheckTag.vue', () => {
expect(wrapper.text()).toEqual(AXIOM)
expect(wrapper.classes()).toContain('el-check-tag')
expect(wrapper.classes()).not.toContain('is-disabled')
})
test('functionality', async () => {
@@ -40,4 +41,27 @@ describe('CheckTag.vue', () => {
expect(wrapper.vm.checked).toBe(false)
})
test('disabled', async () => {
const wrapper = mount({
data: () => ({ checked: false }),
render() {
return (
<CheckTag
disabled={true}
onChange={() => (this.checked = !this.checked)}
checked={this.checked}
>
{AXIOM}
</CheckTag>
)
},
})
expect(wrapper.text()).toEqual(AXIOM)
expect(wrapper.classes()).toContain('is-disabled')
await wrapper.find('.el-check-tag').trigger('click')
expect(wrapper.vm.checked).toBe(false)
})
})

4
packages/components/check-tag/src/check-tag.ts
View File

@@ -9,6 +9,10 @@ export const checkTagProps = buildProps({
* @description is checked
*/
checked: Boolean,
/**
* @description whether the check-tag is disabled
*/
disabled: Boolean,
/**
* @description type of Tag
*/

4
packages/components/check-tag/src/check-tag.vue
View File

@@ -17,13 +17,17 @@ const props = defineProps(checkTagProps)
const emit = defineEmits(checkTagEmits)
const ns = useNamespace('check-tag')
const isDisabled = computed(() => props.disabled)
const containerKls = computed(() => [
ns.b(),
ns.is('checked', props.checked),
ns.is('disabled', isDisabled.value),
ns.m(props.type || 'primary'),
])
const handleChange = () => {
if (isDisabled.value) return
const checked = !props.checked
emit(CHANGE_EVENT, checked)
emit('update:checked', checked)

34
packages/theme-chalk/src/check-tag.scss
View File

@@ -17,15 +17,43 @@
background-color: getCssVar('color', 'info', 'light-7');
}
@include when(checked) {
@each $type in $types {
&.#{bem('check-tag', '', $type)} {
@each $type in $types {
&.#{bem('check-tag', '', $type)} {
@include when(checked) {
background-color: getCssVar('color', $type, 'light-8');
color: getCssVar('color', $type);
&:hover {
background-color: getCssVar('color', $type, 'light-7');
}
@include when(disabled) {
background-color: getCssVar('color', $type, 'light-8');
color: getCssVar('disabled-text-color');
cursor: not-allowed;
&:hover {
background-color: getCssVar('color', $type, 'light-8');
}
}
}
@include when(disabled) {
@if $type == 'primary' {
background-color: getCssVar('color', 'info', 'light-9');
} @else {
background-color: getCssVar('color', $type, 'light-9');
}
color: getCssVar('disabled-text-color');
cursor: not-allowed;
&:hover {
@if $type == 'primary' {
background-color: getCssVar('color', 'info', 'light-9');
} @else {
background-color: getCssVar('color', $type, 'light-9');
}
}
}
}
}