Skip to content

Commit bda37ef

Browse files
adambereczadamberecz
committed
chore: build, version, cl
1 parent 0fa2621 commit bda37ef

File tree

6 files changed

+85
-117
lines changed

6 files changed

+85
-117
lines changed

‎CHANGELOG.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,10 @@
1+
## v2.5.4
2+
3+
> `2022-09-26`
4+
5+
### 🎉 Feature
6+
- A11y improvements.
7+
18
## v2.5.3
29

310
> `2022-09-22`

‎dist/multiselect.global.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/multiselect.js‎

Lines changed: 33 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { toRefs, getCurrentInstance, ref, computed, watch, nextTick, onMounted, openBlock, createElementBlock, normalizeClass, createCommentVNode, mergeProps, withModifiers, Fragment, renderList, renderSlot, withKeys, createTextVNode, toDisplayString, createElementVNode } from 'vue';
1+
import { toRefs, getCurrentInstance, ref, computed, watch, nextTick, onMounted, openBlock, createElementBlock, mergeProps, createCommentVNode, withModifiers, normalizeClass, Fragment, renderList, renderSlot, withKeys, createTextVNode, toDisplayString, createElementVNode } from 'vue';
22

33
function isNullish (val) {
44
return [null, undefined].indexOf(val) !== -1
@@ -1891,10 +1891,10 @@ function useScroll (props, context, dep)
18911891
// ============ DEPENDENCIES ============
18921892

18931893
const pointer = dep.pointer;
1894-
const iv = dep.iv;
1895-
const hasSelected = dep.hasSelected;
1896-
const multipleLabelText = dep.multipleLabelText;
1897-
const isOpen = dep.isOpen;
1894+
dep.iv;
1895+
dep.hasSelected;
1896+
dep.multipleLabelText;
1897+
dep.isOpen;
18981898

18991899
// ================ DATA ================
19001900

@@ -1930,37 +1930,10 @@ function useScroll (props, context, dep)
19301930
}
19311931
});
19321932

1933-
const ariaLabel = computed(() => {
1934-
let texts = [];
1935-
1936-
/* istanbul ignore next */
1937-
if (label.value) {
1938-
texts.push(label.value);
1939-
}
1940-
1941-
if (!pointer.value || !isOpen.value) {
1942-
if (placeholder.value && !hasSelected.value) {
1943-
texts.push(placeholder.value);
1944-
}
1945-
1946-
if (mode.value === 'single' && iv.value && iv.value[labelProp.value] !== undefined) {
1947-
texts.push(iv.value[labelProp.value]);
1948-
}
1949-
1950-
if (mode.value === 'multiple' && hasSelected.value) {
1951-
texts.push(multipleLabelText.value);
1952-
}
1953-
1954-
if (mode.value === 'tags' && hasSelected.value) {
1955-
texts.push(...iv.value.map(v => v[labelProp.value]));
1956-
}
1957-
}
19581933

1959-
return texts.join(', ')
1960-
});
19611934

19621935
const ariaPlaceholder = computed(() => {
1963-
return ariaLabel.value
1936+
return placeholder.value
19641937
});
19651938

19661939
const ariaMultiselectable = computed(() => {
@@ -2029,7 +2002,6 @@ function useScroll (props, context, dep)
20292002

20302003
return {
20312004
ariaOwns,
2032-
ariaLabel,
20332005
ariaPlaceholder,
20342006
ariaMultiselectable,
20352007
ariaActiveDescendant,
@@ -2341,6 +2313,11 @@ var script = {
23412313
required: false,
23422314
default: false,
23432315
},
2316+
aria: {
2317+
required: false,
2318+
type: Object,
2319+
default: () => ({}),
2320+
},
23442321
},
23452322
setup(props, context)
23462323
{
@@ -2361,11 +2338,11 @@ var script = {
23612338
}
23622339
};
23632340

2364-
const _hoisted_1 = ["tabindex", "id", "dir", "aria-owns", "aria-label", "aria-placeholder", "aria-expanded", "aria-activedescendant", "aria-multiselectable"];
2365-
const _hoisted_2 = ["type", "modelValue", "value", "autocomplete", "id", "aria-owns", "aria-label", "aria-placeholder", "aria-expanded", "aria-activedescendant", "aria-multiselectable"];
2341+
const _hoisted_1 = ["tabindex", "id", "dir", "aria-owns", "aria-placeholder", "aria-expanded", "aria-activedescendant", "aria-multiselectable", "role"];
2342+
const _hoisted_2 = ["type", "modelValue", "value", "autocomplete", "id", "aria-owns", "aria-placeholder", "aria-expanded", "aria-activedescendant", "aria-multiselectable"];
23662343
const _hoisted_3 = ["onKeyup", "aria-label"];
23672344
const _hoisted_4 = ["onClick"];
2368-
const _hoisted_5 = ["type", "modelValue", "value", "id", "autocomplete", "aria-owns", "aria-label", "aria-placeholder", "aria-expanded", "aria-activedescendant", "aria-multiselectable"];
2345+
const _hoisted_5 = ["type", "modelValue", "value", "id", "autocomplete", "aria-owns", "aria-placeholder", "aria-expanded", "aria-activedescendant", "aria-multiselectable"];
23692346
const _hoisted_6 = ["innerHTML"];
23702347
const _hoisted_7 = ["innerHTML"];
23712348
const _hoisted_8 = ["id"];
@@ -2384,25 +2361,24 @@ const _hoisted_20 = ["name", "value"];
23842361
const _hoisted_21 = ["name", "value"];
23852362

23862363
function render(_ctx, _cache, $props, $setup, $data, $options) {
2387-
return (openBlock(), createElementBlock("div", {
2364+
return (openBlock(), createElementBlock("div", mergeProps({
23882365
ref: "multiselect",
23892366
tabindex: _ctx.tabindex,
2390-
class: normalizeClass(_ctx.classList.container),
2367+
class: _ctx.classList.container,
23912368
id: $props.searchable ? undefined : $props.id,
23922369
dir: $props.rtl ? 'rtl' : undefined,
23932370
onFocusin: _cache[9] || (_cache[9] = (...args) => (_ctx.handleFocusIn && _ctx.handleFocusIn(...args))),
23942371
onFocusout: _cache[10] || (_cache[10] = (...args) => (_ctx.handleFocusOut && _ctx.handleFocusOut(...args))),
23952372
onKeydown: _cache[11] || (_cache[11] = (...args) => (_ctx.handleKeydown && _ctx.handleKeydown(...args))),
23962373
onKeyup: _cache[12] || (_cache[12] = (...args) => (_ctx.handleKeyup && _ctx.handleKeyup(...args))),
23972374
onMousedown: _cache[13] || (_cache[13] = (...args) => (_ctx.handleMousedown && _ctx.handleMousedown(...args))),
2398-
"aria-owns": _ctx.ariaOwns,
2399-
"aria-label": _ctx.ariaLabel,
2400-
"aria-placeholder": _ctx.ariaPlaceholder,
2401-
"aria-expanded": _ctx.isOpen,
2402-
"aria-activedescendant": _ctx.ariaActiveDescendant,
2403-
"aria-multiselectable": _ctx.ariaMultiselectable,
2404-
role: "listbox"
2405-
}, [
2375+
"aria-owns": !$props.searchable ? _ctx.ariaOwns : undefined,
2376+
"aria-placeholder": !$props.searchable ? _ctx.ariaPlaceholder : undefined,
2377+
"aria-expanded": !$props.searchable ? _ctx.isOpen : undefined,
2378+
"aria-activedescendant": !$props.searchable ? _ctx.ariaActiveDescendant : undefined,
2379+
"aria-multiselectable": !$props.searchable ? _ctx.ariaMultiselectable : undefined,
2380+
role: !$props.searchable ? 'listbox' : undefined
2381+
}, !$props.searchable ? $props.aria : {}), [
24062382
createCommentVNode(" Search "),
24072383
($props.mode !== 'tags' && $props.searchable && !$props.disabled)
24082384
? (openBlock(), createElementBlock("input", mergeProps({
@@ -2412,19 +2388,20 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
24122388
value: _ctx.search,
24132389
class: _ctx.classList.search,
24142390
autocomplete: $props.autocomplete,
2415-
id: $props.searchable ? $props.id : undefined
2416-
}, $props.attrs, {
2391+
id: $props.searchable ? $props.id : undefined,
24172392
onInput: _cache[0] || (_cache[0] = (...args) => (_ctx.handleSearchInput && _ctx.handleSearchInput(...args))),
24182393
onKeypress: _cache[1] || (_cache[1] = (...args) => (_ctx.handleKeypress && _ctx.handleKeypress(...args))),
24192394
onPaste: _cache[2] || (_cache[2] = withModifiers((...args) => (_ctx.handlePaste && _ctx.handlePaste(...args)), ["stop"])),
24202395
ref: "input",
24212396
"aria-owns": _ctx.ariaOwns,
2422-
"aria-label": _ctx.ariaLabel,
24232397
"aria-placeholder": _ctx.ariaPlaceholder,
24242398
"aria-expanded": _ctx.isOpen,
24252399
"aria-activedescendant": _ctx.ariaActiveDescendant,
24262400
"aria-multiselectable": _ctx.ariaMultiselectable,
24272401
role: "listbox"
2402+
}, {
2403+
...$props.attrs,
2404+
...$props.aria,
24282405
}), null, 16 /* FULL_PROPS */, _hoisted_2))
24292406
: createCommentVNode("v-if", true),
24302407
createCommentVNode(" Tags (with search) "),
@@ -2479,20 +2456,21 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
24792456
value: _ctx.search,
24802457
class: _ctx.classList.tagsSearch,
24812458
id: $props.searchable ? $props.id : undefined,
2482-
autocomplete: $props.autocomplete
2483-
}, $props.attrs, {
2459+
autocomplete: $props.autocomplete,
24842460
onInput: _cache[3] || (_cache[3] = (...args) => (_ctx.handleSearchInput && _ctx.handleSearchInput(...args))),
24852461
onKeypress: _cache[4] || (_cache[4] = (...args) => (_ctx.handleKeypress && _ctx.handleKeypress(...args))),
24862462
onPaste: _cache[5] || (_cache[5] = withModifiers((...args) => (_ctx.handlePaste && _ctx.handlePaste(...args)), ["stop"])),
24872463
ref: "input",
24882464
"aria-owns": _ctx.ariaOwns,
2489-
"aria-label": _ctx.ariaLabel,
24902465
"aria-placeholder": _ctx.ariaPlaceholder,
24912466
"aria-expanded": _ctx.isOpen,
24922467
"aria-activedescendant": _ctx.ariaActiveDescendant,
24932468
"aria-multiselectable": _ctx.ariaMultiselectable,
24942469
role: "listbox"
2495-
}), null, 16 /* FULL_PROPS */, _hoisted_5))
2470+
}, {
2471+
...$props.attrs,
2472+
...$props.aria,
2473+
}), null, 16 /* FULL_PROPS */, _hoisted_5))
24962474
: createCommentVNode("v-if", true)
24972475
], 2 /* CLASS */)
24982476
], 2 /* CLASS */))
@@ -2735,7 +2713,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
27352713
createElementVNode("div", {
27362714
class: normalizeClass(_ctx.classList.spacer)
27372715
}, null, 2 /* CLASS */)
2738-
], 42 /* CLASS, PROPS, HYDRATE_EVENTS */, _hoisted_1))
2716+
], 16 /* FULL_PROPS */, _hoisted_1))
27392717
}
27402718

27412719
script.render = render;

‎dist/multiselect.vue2.global.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/multiselect.vue2.js‎

Lines changed: 42 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1891,10 +1891,10 @@ function useScroll (props, context, dep)
18911891
// ============ DEPENDENCIES ============
18921892

18931893
const pointer = dep.pointer;
1894-
const iv = dep.iv;
1895-
const hasSelected = dep.hasSelected;
1896-
const multipleLabelText = dep.multipleLabelText;
1897-
const isOpen = dep.isOpen;
1894+
dep.iv;
1895+
dep.hasSelected;
1896+
dep.multipleLabelText;
1897+
dep.isOpen;
18981898

18991899
// ================ DATA ================
19001900

@@ -1930,37 +1930,10 @@ function useScroll (props, context, dep)
19301930
}
19311931
});
19321932

1933-
const ariaLabel = computed(() => {
1934-
let texts = [];
1935-
1936-
/* istanbul ignore next */
1937-
if (label.value) {
1938-
texts.push(label.value);
1939-
}
1940-
1941-
if (!pointer.value || !isOpen.value) {
1942-
if (placeholder.value && !hasSelected.value) {
1943-
texts.push(placeholder.value);
1944-
}
1945-
1946-
if (mode.value === 'single' && iv.value && iv.value[labelProp.value] !== undefined) {
1947-
texts.push(iv.value[labelProp.value]);
1948-
}
19491933

1950-
if (mode.value === 'multiple' && hasSelected.value) {
1951-
texts.push(multipleLabelText.value);
1952-
}
1953-
1954-
if (mode.value === 'tags' && hasSelected.value) {
1955-
texts.push(...iv.value.map(v => v[labelProp.value]));
1956-
}
1957-
}
1958-
1959-
return texts.join(', ')
1960-
});
19611934

19621935
const ariaPlaceholder = computed(() => {
1963-
return ariaLabel.value
1936+
return placeholder.value
19641937
});
19651938

19661939
const ariaMultiselectable = computed(() => {
@@ -2029,7 +2002,6 @@ function useScroll (props, context, dep)
20292002

20302003
return {
20312004
ariaOwns,
2032-
ariaLabel,
20332005
ariaPlaceholder,
20342006
ariaMultiselectable,
20352007
ariaActiveDescendant,
@@ -2343,6 +2315,11 @@ function resolveDeps (props, context, features, deps = {}) {
23432315
required: false,
23442316
default: false,
23452317
},
2318+
aria: {
2319+
required: false,
2320+
type: Object,
2321+
default: () => ({}),
2322+
},
23462323
},
23472324
setup(props, context)
23482325
{
@@ -2448,29 +2425,37 @@ var __vue_render__ = function () {
24482425
var _c = _vm._self._c || _h;
24492426
return _c(
24502427
"div",
2451-
{
2452-
ref: "multiselect",
2453-
class: _vm.classList.container,
2454-
attrs: {
2455-
tabindex: _vm.tabindex,
2456-
id: _vm.searchable ? undefined : _vm.id,
2457-
dir: _vm.rtl ? "rtl" : undefined,
2458-
"aria-owns": _vm.ariaOwns,
2459-
"aria-label": _vm.ariaLabel,
2460-
"aria-placeholder": _vm.ariaPlaceholder,
2461-
"aria-expanded": _vm.isOpen,
2462-
"aria-activedescendant": _vm.ariaActiveDescendant,
2463-
"aria-multiselectable": _vm.ariaMultiselectable,
2464-
role: "listbox",
2428+
_vm._b(
2429+
{
2430+
ref: "multiselect",
2431+
class: _vm.classList.container,
2432+
attrs: {
2433+
tabindex: _vm.tabindex,
2434+
id: _vm.searchable ? undefined : _vm.id,
2435+
dir: _vm.rtl ? "rtl" : undefined,
2436+
"aria-owns": !_vm.searchable ? _vm.ariaOwns : undefined,
2437+
"aria-placeholder": !_vm.searchable ? _vm.ariaPlaceholder : undefined,
2438+
"aria-expanded": !_vm.searchable ? _vm.isOpen : undefined,
2439+
"aria-activedescendant": !_vm.searchable
2440+
? _vm.ariaActiveDescendant
2441+
: undefined,
2442+
"aria-multiselectable": !_vm.searchable
2443+
? _vm.ariaMultiselectable
2444+
: undefined,
2445+
role: !_vm.searchable ? "listbox" : undefined,
2446+
},
2447+
on: {
2448+
focusin: _vm.handleFocusIn,
2449+
focusout: _vm.handleFocusOut,
2450+
keydown: _vm.handleKeydown,
2451+
keyup: _vm.handleKeyup,
2452+
mousedown: _vm.handleMousedown,
2453+
},
24652454
},
2466-
on: {
2467-
focusin: _vm.handleFocusIn,
2468-
focusout: _vm.handleFocusOut,
2469-
keydown: _vm.handleKeydown,
2470-
keyup: _vm.handleKeyup,
2471-
mousedown: _vm.handleMousedown,
2472-
},
2473-
},
2455+
"div",
2456+
!_vm.searchable ? _vm.aria : {},
2457+
false
2458+
),
24742459
[
24752460
_vm.mode !== "tags" && _vm.searchable && !_vm.disabled
24762461
? [
@@ -2486,7 +2471,6 @@ var __vue_render__ = function () {
24862471
autocomplete: _vm.autocomplete,
24872472
id: _vm.searchable ? _vm.id : undefined,
24882473
"aria-owns": _vm.ariaOwns,
2489-
"aria-label": _vm.ariaLabel,
24902474
"aria-placeholder": _vm.ariaPlaceholder,
24912475
"aria-expanded": _vm.isOpen,
24922476
"aria-activedescendant": _vm.ariaActiveDescendant,
@@ -2504,7 +2488,7 @@ var __vue_render__ = function () {
25042488
},
25052489
},
25062490
"input",
2507-
_vm.attrs,
2491+
Object.assign({}, _vm.attrs, _vm.aria),
25082492
false
25092493
)
25102494
),
@@ -2609,7 +2593,6 @@ var __vue_render__ = function () {
26092593
id: _vm.searchable ? _vm.id : undefined,
26102594
autocomplete: _vm.autocomplete,
26112595
"aria-owns": _vm.ariaOwns,
2612-
"aria-label": _vm.ariaLabel,
26132596
"aria-placeholder": _vm.ariaPlaceholder,
26142597
"aria-expanded": _vm.isOpen,
26152598
"aria-activedescendant":
@@ -2628,7 +2611,7 @@ var __vue_render__ = function () {
26282611
},
26292612
},
26302613
"input",
2631-
_vm.attrs,
2614+
Object.assign({}, _vm.attrs, _vm.aria),
26322615
false
26332616
)
26342617
)

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@vueform/multiselect",
3-
"version": "2.5.3",
3+
"version": "2.5.4",
44
"private": false,
55
"description": "Vue 3 multiselect component with single select, multiselect and tagging options.",
66
"license": "MIT",

0 commit comments

Comments
 (0)