slim-select 2.3.2 → 2.4.0

package/src/vue/dist/slimselectvue.ssr.js

@@ -61,6 +61,7 @@ class Settings {
         this.class = [];
         this.isMultiple = false;
         this.isOpen = false;
+        this.isWindowFocused = true;
         this.triggerFocus = true;
         this.intervalMove = null;
         if (!settings) {
@@ -348,6 +349,7 @@ class Render {
         this.main = this.mainDiv();
         this.content = this.contentDiv();
         this.updateClassStyles();
+        this.updateAriaAttributes();
         this.settings.contentLocation.appendChild(this.content.main);
     }
     enable() {
@@ -361,6 +363,7 @@ class Render {
     open() {
         this.main.arrow.path.setAttribute('d', this.classes.arrowOpen);
         this.main.main.classList.add(this.settings.openPosition === 'up' ? this.classes.openAbove : this.classes.openBelow);
+        this.main.main.setAttribute('aria-expanded', 'true');
         this.moveContent();
         const selectedOptions = this.store.getSelectedOptions();
         if (selectedOptions.length) {
@@ -374,6 +377,7 @@ class Render {
     close() {
         this.main.main.classList.remove(this.classes.openAbove);
         this.main.main.classList.remove(this.classes.openBelow);
+        this.main.main.setAttribute('aria-expanded', 'false');
         this.content.main.classList.remove(this.classes.openAbove);
         this.content.main.classList.remove(this.classes.openBelow);
         this.main.arrow.path.setAttribute('d', this.classes.arrowClose);
@@ -400,15 +404,18 @@ class Render {
             this.content.main.classList.add('ss-' + this.settings.contentPosition);
         }
     }
+    updateAriaAttributes() {
+        this.main.main.role = 'combobox';
+        this.main.main.setAttribute('aria-haspopup', 'listbox');
+        this.main.main.setAttribute('aria-controls', this.content.main.id);
+        this.main.main.setAttribute('aria-expanded', 'false');
+        this.content.main.setAttribute('role', 'listbox');
+    }
     mainDiv() {
         const main = document.createElement('div');
         main.dataset.id = this.settings.id;
+        main.id = this.settings.id;
         main.tabIndex = 0;
-        main.onfocus = () => {
-            if (this.settings.triggerFocus) {
-                this.callbacks.open();
-            }
-        };
         main.onkeydown = (e) => {
             switch (e.key) {
                 case 'ArrowUp':
@@ -420,6 +427,8 @@ class Render {
                     this.callbacks.close();
                     return true;
                 case 'Enter':
+                case ' ':
+                    this.callbacks.open();
                     const highlighted = this.content.list.querySelector('.' + this.classes.highlighted);
                     if (highlighted) {
                         highlighted.click();
@@ -496,11 +505,13 @@ class Render {
             },
         };
     }
-    mainFocus(trigger) {
+    mainFocus(trigger, eventType) {
         if (!trigger) {
             this.settings.triggerFocus = false;
         }
-        this.main.main.focus({ preventScroll: true });
+        if (eventType !== 'click') {
+            this.main.main.focus({ preventScroll: true });
+        }
         this.settings.triggerFocus = true;
     }
     placeholder() {
@@ -677,6 +688,7 @@ class Render {
     contentDiv() {
         const main = document.createElement('div');
         main.dataset.id = this.settings.id;
+        main.id = this.settings.id;
         const search = this.searchDiv();
         main.appendChild(search.main);
         const list = this.listDiv();
@@ -744,6 +756,7 @@ class Render {
                     this.callbacks.close();
                     return false;
                 case 'Enter':
+                case ' ':
                     if (this.callbacks.addable && e.ctrlKey) {
                         addable.click();
                     }
@@ -895,7 +908,6 @@ class Render {
     listDiv() {
         const options = document.createElement('div');
         options.classList.add(this.classes.list);
-        options.setAttribute('role', 'listbox');
         return options;
     }
     renderError(error) {
@@ -1040,6 +1052,7 @@ class Render {
         }
         const optionEl = document.createElement('div');
         optionEl.dataset.id = option.id;
+        optionEl.id = option.id;
         optionEl.classList.add(this.classes.option);
         optionEl.setAttribute('role', 'option');
         if (option.class) {
@@ -1073,9 +1086,12 @@ class Render {
         }
         if (option.selected) {
             optionEl.classList.add(this.classes.selected);
+            optionEl.setAttribute('aria-selected', 'true');
+            this.main.main.setAttribute('aria-activedescendant', optionEl.id);
         }
         else {
             optionEl.classList.remove(this.classes.selected);
+            optionEl.setAttribute('aria-selected', 'false');
         }
         optionEl.addEventListener('click', (e) => {
             e.preventDefault();
@@ -1509,8 +1525,19 @@ class SlimSelect {
                 return;
             }
             if (e.target && !hasClassInTree(e.target, this.settings.id)) {
+                this.close(e.type);
+            }
+        };
+        this.windowVisibilityChange = () => {
+            if (document.hidden) {
+                this.settings.isWindowFocused = false;
                 this.close();
             }
+            else {
+                setTimeout(() => {
+                    this.settings.isWindowFocused = true;
+                }, 20);
+            }
         };
         this.selectEl = (typeof config.select === 'string' ? document.querySelector(config.select) : config.select);
         if (!this.selectEl) {
@@ -1583,6 +1610,14 @@ class SlimSelect {
         this.render = new Render(this.settings, this.store, callbacks);
         this.render.renderValues();
         this.render.renderOptions(this.store.getData());
+        const selectAriaLabel = this.selectEl.getAttribute('aria-label');
+        const selectAriaLabelledBy = this.selectEl.getAttribute('aria-labelledby');
+        if (selectAriaLabel) {
+            this.render.main.main.setAttribute('aria-label', selectAriaLabel);
+        }
+        else if (selectAriaLabelledBy) {
+            this.render.main.main.setAttribute('aria-labelledby', selectAriaLabelledBy);
+        }
         if (this.selectEl.parentNode) {
             this.selectEl.parentNode.insertBefore(this.render.main.main, this.selectEl.nextSibling);
         }
@@ -1591,6 +1626,7 @@ class SlimSelect {
         if (this.settings.openPosition === 'auto') {
             window.addEventListener('scroll', this.windowScroll, false);
         }
+        document.addEventListener('visibilitychange', this.windowVisibilityChange);
         if (this.settings.disabled) {
             this.disable();
         }
@@ -1651,7 +1687,9 @@ class SlimSelect {
     }
     addOption(option) {
         const selected = this.store.getSelected();
-        this.store.addOption(option);
+        if (!this.store.getDataOptions().some((o) => { var _a; return o.value === ((_a = option.value) !== null && _a !== void 0 ? _a : option.text); })) {
+            this.store.addOption(option);
+        }
         const data = this.store.getData();
         this.select.updateOptions(data);
         this.render.renderValues();
@@ -1684,7 +1722,7 @@ class SlimSelect {
             this.settings.intervalMove = setInterval(this.render.moveContent.bind(this.render), 500);
         }
     }
-    close() {
+    close(eventType = null) {
         if (!this.settings.isOpen || this.settings.alwaysOpen) {
             return;
         }
@@ -1695,7 +1733,7 @@ class SlimSelect {
         if (this.render.content.search.input.value !== '') {
             this.search('');
         }
-        this.render.mainFocus(false);
+        this.render.mainFocus(false, eventType);
         setTimeout(() => {
             if (this.events.afterClose) {
                 this.events.afterClose();
@@ -1739,6 +1777,7 @@ class SlimSelect {
         if (this.settings.openPosition === 'auto') {
             window.removeEventListener('scroll', this.windowScroll, false);
         }
+        document.removeEventListener('visibilitychange', this.windowVisibilityChange);
         this.store.setData([]);
         this.render.destroy();
         this.select.destroy();

package/src/vue/dist/vue/slimselect.vue.d.ts

@@ -35,6 +35,7 @@ declare const _default: import("vue").DefineComponent<{
             class: string[];
             isMultiple: boolean;
             isOpen: boolean;
+            isWindowFocused: boolean;
             triggerFocus: boolean;
             intervalMove: {
                 hasRef: () => boolean;
@@ -112,6 +113,7 @@ declare const _default: import("vue").DefineComponent<{
                 class: string[];
                 isMultiple: boolean;
                 isOpen: boolean;
+                isWindowFocused: boolean;
                 triggerFocus: boolean;
                 intervalMove: {
                     hasRef: () => boolean;
@@ -241,8 +243,9 @@ declare const _default: import("vue").DefineComponent<{
             open: () => void;
             close: () => void;
             updateClassStyles: () => void;
+            updateAriaAttributes: () => void;
             mainDiv: () => import("../slim-select/render").Main;
-            mainFocus: (trigger: boolean) => void;
+            mainFocus: (trigger: boolean, eventType: string | null) => void;
             placeholder: () => HTMLDivElement;
             renderValues: () => void;
             multipleValue: (option: Option) => HTMLDivElement;
@@ -283,7 +286,7 @@ declare const _default: import("vue").DefineComponent<{
         setSelected: (value: string | string[], runAfterChange?: boolean) => void;
         addOption: (option: import("../slim-select/store").OptionOptional) => void;
         open: () => void;
-        close: () => void;
+        close: (eventType?: string | null) => void;
         search: (value: string) => void;
         destroy: () => void;
     } | null;

package/src/vue/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@slim-select/vue",
   "private": false,
-  "version": "1.3.2",
+  "version": "1.4.0",
   "description": "Vue integration",
   "repository": {
     "type": "git",
@@ -16,6 +16,7 @@
   "bugs": {
     "url": "https://github.com/brianvoe/slim-select/issues"
   },
+  "type": "module",
   "main": "dist/slimselectvue.ssr.js",
   "browser": "dist/slimselect.global.js",
   "module": "dist/slimselectvue.es.js",