fix(NcCheckboxRadioSwitch): keep data attributes bound to the wrapper
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
This commit is contained in:
Родитель
229f6c1891
Коммит
74dc419278
|
@ -258,7 +258,7 @@ export default {
|
||||||
class="checkbox-radio-switch"
|
class="checkbox-radio-switch"
|
||||||
:style="cssVars"
|
:style="cssVars"
|
||||||
:type="isButtonType ? 'button' : null"
|
:type="isButtonType ? 'button' : null"
|
||||||
v-bind="isButtonType ? $attrs : {}"
|
v-bind="isButtonType ? $attrs : dataAttrs"
|
||||||
v-on="isButtonType ? listeners : null">
|
v-on="isButtonType ? listeners : null">
|
||||||
<input v-if="!isButtonType"
|
<input v-if="!isButtonType"
|
||||||
:id="id"
|
:id="id"
|
||||||
|
@ -272,7 +272,7 @@ export default {
|
||||||
:indeterminate.prop="hasIndeterminate ? indeterminate : null"
|
:indeterminate.prop="hasIndeterminate ? indeterminate : null"
|
||||||
:required="required"
|
:required="required"
|
||||||
:name="name"
|
:name="name"
|
||||||
v-bind="$attrs"
|
v-bind="nonDataAttrs"
|
||||||
v-on="listeners">
|
v-on="listeners">
|
||||||
<NcCheckboxContent :id="id"
|
<NcCheckboxContent :id="id"
|
||||||
class="checkbox-radio-switch__content"
|
class="checkbox-radio-switch__content"
|
||||||
|
@ -450,6 +450,18 @@ export default {
|
||||||
emits: ['update:checked'],
|
emits: ['update:checked'],
|
||||||
|
|
||||||
computed: {
|
computed: {
|
||||||
|
dataAttrs() {
|
||||||
|
// filter all data attributes
|
||||||
|
return Object.fromEntries(Object.entries(this.$attrs)
|
||||||
|
.filter(([key]) => key.startsWith('data-')))
|
||||||
|
},
|
||||||
|
|
||||||
|
nonDataAttrs() {
|
||||||
|
// filter all non-data attributes
|
||||||
|
return Object.fromEntries(Object.entries(this.$attrs)
|
||||||
|
.filter(([key]) => !key.startsWith('data-')))
|
||||||
|
},
|
||||||
|
|
||||||
isButtonType() {
|
isButtonType() {
|
||||||
return this.type === TYPE_BUTTON
|
return this.type === TYPE_BUTTON
|
||||||
},
|
},
|
||||||
|
|
|
@ -17,7 +17,7 @@ describe('NcCheckboxRadioSwitch', () => {
|
||||||
expect(wrapper.text()).toContain('Test')
|
expect(wrapper.text()).toContain('Test')
|
||||||
})
|
})
|
||||||
|
|
||||||
it('forwards aria-invalid and aria-errormessage to input', () => {
|
it('forwards all but data- attributes to the input', () => {
|
||||||
const wrapper = shallowMount(NcCheckboxRadioSwitch, {
|
const wrapper = shallowMount(NcCheckboxRadioSwitch, {
|
||||||
slots: {
|
slots: {
|
||||||
default: 'Test',
|
default: 'Test',
|
||||||
|
@ -25,11 +25,17 @@ describe('NcCheckboxRadioSwitch', () => {
|
||||||
attrs: {
|
attrs: {
|
||||||
'aria-invalid': 'true',
|
'aria-invalid': 'true',
|
||||||
'aria-errormessage': 'id-test',
|
'aria-errormessage': 'id-test',
|
||||||
|
'data-test': 'checkbox-test-data-attr',
|
||||||
|
title: 'Test title',
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
const input = wrapper.find('input')
|
const input = wrapper.find('input')
|
||||||
expect(input.attributes('aria-invalid')).toBe('true')
|
expect(input.attributes('aria-invalid')).toBe('true')
|
||||||
expect(input.attributes('aria-errormessage')).toBe('id-test')
|
expect(input.attributes('aria-errormessage')).toBe('id-test')
|
||||||
|
expect(input.attributes('title')).toBe('Test title')
|
||||||
|
expect(input.attributes('data-test')).not.toBe('checkbox-test-data-attr')
|
||||||
|
expect(wrapper.attributes('data-test')).toBe('checkbox-test-data-attr')
|
||||||
|
expect(wrapper.attributes('title')).not.toBe('Test title')
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
Загрузка…
Ссылка в новой задаче