fix(NcCheckboxRadioSwitch): keep data attributes bound to the wrapper

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
This commit is contained in:
John Molakvoæ (skjnldsv) 2024-07-04 08:55:36 +02:00 коммит произвёл Ferdinand Thiessen
Родитель 229f6c1891
Коммит 74dc419278
Не найден ключ, соответствующий данной подписи
Идентификатор ключа GPG: 45FAE7268762B400
2 изменённых файлов: 21 добавлений и 3 удалений

Просмотреть файл

@ -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')
}) })
}) })