diff --git a/src/components/Select.vue b/src/components/Select.vue index ba34341..9bf8614 100644 --- a/src/components/Select.vue +++ b/src/components/Select.vue @@ -17,7 +17,7 @@ {{ getOptionLabel(option) }} - + @@ -45,7 +45,7 @@ - Loading... + {{ i18n.spinner.text }} @@ -66,7 +66,7 @@ - Sorry, no matching options. + {{ i18n.noOptions.text }} @@ -77,6 +77,7 @@ import pointerScroll from '../mixins/pointerScroll' import typeAheadPointer from '../mixins/typeAheadPointer' import ajax from '../mixins/ajax' + import i18n from '../mixins/i18n' import childComponents from './childComponents'; /** @@ -85,7 +86,7 @@ export default { components: {...childComponents}, - mixins: [pointerScroll, typeAheadPointer, ajax], + mixins: [pointerScroll, typeAheadPointer, ajax, i18n], props: { /** @@ -973,7 +974,7 @@ 'readonly': !this.searchable, 'id': this.inputId, 'aria-expanded': this.dropdownOpen, - 'aria-label': 'Search for option', + 'aria-label': this.i18n.search.ariaLabel, 'ref': 'search', 'role': 'combobox', 'type': 'search', diff --git a/src/mixins/i18n.js b/src/mixins/i18n.js new file mode 100644 index 0000000..b57c7b2 --- /dev/null +++ b/src/mixins/i18n.js @@ -0,0 +1,37 @@ +export const text = { + spinner: { + text: 'Loading...' + }, + noOptions: { + text: 'Sorry, no matching options.' + }, + search: { + ariaLabel: 'Search for options' + }, + selectedOption: {}, + deselect: { + ariaLabel: 'Deselect Option' + } +}; + +/** + * @this VueSelect + * @mixin + */ +export default { + props: { + text: { + type: Function, + /** + * @param text {Object} + * @return {*} + */ + default: text => text, + }, + }, + computed: { + i18n () { + return this.text(text); + }, + }, +}; diff --git a/tests/unit/InternationalText.spec.js b/tests/unit/InternationalText.spec.js new file mode 100644 index 0000000..73dc8a0 --- /dev/null +++ b/tests/unit/InternationalText.spec.js @@ -0,0 +1,26 @@ +import { mountDefault } from '../helpers'; + +fdescribe('International Text', () => { + + it('renders default text for spinner.text', () => { + const Select = mountDefault({loading: true,}); + expect(Select.find('.vs__spinner').text()).toBe('Loading...') + }); + + it('renders default text for noOptions.text', () => { + const Select = mountDefault({options: []}); + Select.vm.open = true; + expect(Select.find('.vs__no-options').text()).toBe('Sorry, no matching options.') + }); + + it('renders default text for search.ariaLabel', () => { + const Select = mountDefault(); + expect(Select.find('.vs__search').attributes()['aria-label']).toBe('Search for options') + }); + + it('renders default text for deselect.ariaLabel', () => { + const Select = mountDefault({value: 'one', multiple: true}); + expect(Select.find('.vs__deselect').attributes()['aria-label']).toBe('Deselect Option') + }); + +});