slim-select 2.4.0 → 2.4.2

package/README.md

@@ -1,10 +1,9 @@
 # Slim Select 2
 
-## slimselectjs.com
+## [slimselectjs.com](https://slimselectjs.com)
 
 Advanced select dropdown
 
-[![Build Status](https://travis-ci.org/brianvoe/slim-select.svg?branch=master)](https://travis-ci.org/brianvoe/slim-select)
 [![NPM Downloads](https://img.shields.io/npm/dt/slim-select.svg)](https://www.npmjs.com/package/slim-select)
 
 ## Support
@@ -13,7 +12,9 @@ Advanced select dropdown
 
 <a href="https://www.buymeacoffee.com/brianvoe" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png" alt="Buy Me A Coffee" style="height: auto !important;width: auto !important;" ></a>
 
-For documentation and examples on all features see: http://slimselectjs.com
+## [Documentation and Examples](https://slimselectjs.com)
+
+See [website](https://slimselectjs.com) for the full list of settings, methods and event callbacks
 
 ![](https://raw.githubusercontent.com/brianvoe/slim-select/master/slimselect.gif)
 
@@ -55,12 +56,123 @@ npm install slim-select
 <link rel="stylesheet" href="https://unpkg.com/slim-select@latest/dist/slimselect.css" />
 ```
 
-## Usage
+## Simple Usage
 
 ```javascript
 import SlimSelect from 'slim-select'
 
 new SlimSelect({
-  select: '#slim-select',
+  select: '#selectElement',
+})
+```
+
+```html
+<select id="selectElement">
+  <option value="value1">Value 1</option>
+</select>
+```
+
+## Data
+
+Data is an array of objects that represent both option and optgroups.
+
+See below for list of data types
+
+```javascript
+new SlimSelect({
+  select: '#selectElement',
+
+  // Array of Option objects
+  data: [{ text: 'Value 1', value: 'value1' }],
+
+  // or
+
+  // Array of Optgroups and/or Options
+  data: [{ label: 'Optgroup Label', options: { text: 'Value 1', value: 'value1' } }],
+})
+```
+
+## Data Types
+
+```javascript
+// <optgroup>
+var optgroup = {
+  label: 'label', // Required
+  selectAll: false, // Optional - default false
+  closable: 'off', // Optional - default 'off' - 'off', 'open', 'close'
+  options: [], // Required - value is an array of options
+}
+
+// <option>
+var option = {
+  text: 'text', // Required
+  value: 'value', // Optional - value will be set by text if not set
+  html: '<b>Html</b>', // Optional - if set, used for display purposes
+  selected: false, // Optional - default is false
+  display: true, // Optional - default is true
+  disabled: false, // Optional - default is false
+  mandatory: false, // Optional - default is false
+  placeholder: false, // Optional - default is false
+  class: '', // Optional - default is not set
+  style: '', // Optional - default is not set
+  data: {}, // Optional - If you have data attributes
+}
+```
+
+## Settings
+
+Settings are a list of fields that help customize how SlimSelect operates
+
+```javascript
+new SlimSelect({
+  select: '#selectElement',
+
+  settings: {
+    // Below are a list of optional fields
+    // their values are the defaults
+    disabled: false,
+    alwaysOpen: false,
+    showSearch: true,
+    searchPlaceholder: 'Search',
+    searchText: 'No Results',
+    searchingText: 'Searching...',
+    searchHighlight: false,
+    closeOnSelect: true,
+    contentLocation: document.body,
+    contentPosition: 'absolute',
+    openPosition: 'auto', // options: auto, up, down
+    placeholderText: 'Select Value',
+    allowDeselect: false,
+    hideSelected: false,
+    showOptionTooltips: false,
+    minSelected: 0,
+    maxSelected: 1000,
+    timeoutDelay: 200,
+    maxValuesShown: 20,
+    maxValuesMessage: '{number} selected',
+  },
+})
+```
+
+## Events
+
+Events are function callbacks for when certain actions happen
+
+```javascript
+new SlimSelect({
+  select: '#selectElement',
+
+  events: {
+    search: (searchValue: string, currentData: DataArray) => Promise<DataArrayPartial> | DataArrayPartial
+    searchFilter: (option: Option, search: string) => boolean
+    addable: (value: string) => Promise<OptionOptional | string> | OptionOptional | string
+    beforeChange: (newVal: Option[], oldVal: Option[]) => boolean | void
+    afterChange: (newVal: Option[]) => void
+    beforeOpen: () => void
+    afterOpen: () => void
+    beforeClose: () => void
+    afterClose: () => void
+    error: (err: Error) => void
+  },
 })
 ```

package/dist/render.d.ts

@@ -93,7 +93,7 @@ export default class Render {
     updateClassStyles(): void;
     updateAriaAttributes(): void;
     mainDiv(): Main;
-    mainFocus(trigger: boolean, eventType: string | null): void;
+    mainFocus(eventType: string | null): void;
     placeholder(): HTMLDivElement;
     renderValues(): void;
     private renderSingleValue;
@@ -102,7 +102,7 @@ export default class Render {
     contentDiv(): Content;
     moveContent(): void;
     searchDiv(): Search;
-    searchFocus(trigger: boolean): void;
+    searchFocus(): void;
     getOptions(notPlaceholder?: boolean, notDisabled?: boolean, notHidden?: boolean): HTMLDivElement[];
     highlight(dir: 'up' | 'down'): void;
     listDiv(): HTMLDivElement;

package/dist/settings.d.ts

@@ -6,8 +6,7 @@ export default class Settings {
     class: string[];
     isMultiple: boolean;
     isOpen: boolean;
-    isWindowFocused: boolean;
-    triggerFocus: boolean;
+    isFullOpen: boolean;
     intervalMove: NodeJS.Timeout | null;
     disabled: boolean;
     alwaysOpen: boolean;

package/dist/slimselect.cjs.js

@@ -59,8 +59,7 @@ class Settings {
         this.class = [];
         this.isMultiple = false;
         this.isOpen = false;
-        this.isWindowFocused = true;
-        this.triggerFocus = true;
+        this.isFullOpen = false;
         this.intervalMove = null;
         if (!settings) {
             settings = {};
@@ -503,14 +502,10 @@ class Render {
             },
         };
     }
-    mainFocus(trigger, eventType) {
-        if (!trigger) {
-            this.settings.triggerFocus = false;
-        }
+    mainFocus(eventType) {
         if (eventType !== 'click') {
             this.main.main.focus({ preventScroll: true });
         }
-        this.settings.triggerFocus = true;
     }
     placeholder() {
         const placeholderOption = this.store.filter((o) => o.placeholder, false);
@@ -744,7 +739,6 @@ class Render {
             switch (e.key) {
                 case 'ArrowUp':
                 case 'ArrowDown':
-                    this.callbacks.open();
                     e.key === 'ArrowDown' ? this.highlight('down') : this.highlight('up');
                     return false;
                 case 'Tab':
@@ -757,21 +751,17 @@ class Render {
                 case ' ':
                     if (this.callbacks.addable && e.ctrlKey) {
                         addable.click();
+                        return false;
                     }
                     else {
                         const highlighted = this.content.list.querySelector('.' + this.classes.highlighted);
                         if (highlighted) {
                             highlighted.click();
+                            return false;
                         }
                     }
-                    return false;
-            }
-        };
-        input.onfocus = () => {
-            if (this.settings.isOpen) {
-                return;
+                    return true;
             }
-            this.callbacks.open();
         };
         main.appendChild(input);
         if (this.callbacks.addable) {
@@ -845,12 +835,8 @@ class Render {
         }
         return searchReturn;
     }
-    searchFocus(trigger) {
-        if (!trigger) {
-            this.settings.triggerFocus = false;
-        }
+    searchFocus() {
         this.content.search.input.focus();
-        this.settings.triggerFocus = true;
     }
     getOptions(notPlaceholder = false, notDisabled = false, notHidden = false) {
         let query = '.' + this.classes.option;
@@ -1507,13 +1493,13 @@ class SlimSelect {
             afterClose: undefined,
         };
         this.windowResize = debounce(() => {
-            if (!this.settings.isOpen) {
+            if (!this.settings.isOpen && !this.settings.isFullOpen) {
                 return;
             }
             this.render.moveContent();
         });
         this.windowScroll = debounce(() => {
-            if (!this.settings.isOpen) {
+            if (!this.settings.isOpen && !this.settings.isFullOpen) {
                 return;
             }
             this.render.moveContent();
@@ -1528,14 +1514,8 @@ class SlimSelect {
         };
         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) {
@@ -1705,13 +1685,16 @@ class SlimSelect {
         }
         this.render.open();
         if (this.settings.showSearch) {
-            this.render.searchFocus(false);
+            this.render.searchFocus();
         }
+        this.settings.isOpen = true;
         setTimeout(() => {
             if (this.events.afterOpen) {
                 this.events.afterOpen();
             }
-            this.settings.isOpen = true;
+            if (this.settings.isOpen) {
+                this.settings.isFullOpen = true;
+            }
         }, this.settings.timeoutDelay);
         if (this.settings.contentPosition === 'absolute') {
             if (this.settings.intervalMove) {
@@ -1731,12 +1714,13 @@ class SlimSelect {
         if (this.render.content.search.input.value !== '') {
             this.search('');
         }
-        this.render.mainFocus(false, eventType);
+        this.render.mainFocus(eventType);
+        this.settings.isOpen = false;
+        this.settings.isFullOpen = false;
         setTimeout(() => {
             if (this.events.afterClose) {
                 this.events.afterClose();
             }
-            this.settings.isOpen = false;
         }, this.settings.timeoutDelay);
         if (this.settings.intervalMove) {
             clearInterval(this.settings.intervalMove);

package/dist/slimselect.es.js

@@ -57,8 +57,7 @@ class Settings {
         this.class = [];
         this.isMultiple = false;
         this.isOpen = false;
-        this.isWindowFocused = true;
-        this.triggerFocus = true;
+        this.isFullOpen = false;
         this.intervalMove = null;
         if (!settings) {
             settings = {};
@@ -501,14 +500,10 @@ class Render {
             },
         };
     }
-    mainFocus(trigger, eventType) {
-        if (!trigger) {
-            this.settings.triggerFocus = false;
-        }
+    mainFocus(eventType) {
         if (eventType !== 'click') {
             this.main.main.focus({ preventScroll: true });
         }
-        this.settings.triggerFocus = true;
     }
     placeholder() {
         const placeholderOption = this.store.filter((o) => o.placeholder, false);
@@ -742,7 +737,6 @@ class Render {
             switch (e.key) {
                 case 'ArrowUp':
                 case 'ArrowDown':
-                    this.callbacks.open();
                     e.key === 'ArrowDown' ? this.highlight('down') : this.highlight('up');
                     return false;
                 case 'Tab':
@@ -755,21 +749,17 @@ class Render {
                 case ' ':
                     if (this.callbacks.addable && e.ctrlKey) {
                         addable.click();
+                        return false;
                     }
                     else {
                         const highlighted = this.content.list.querySelector('.' + this.classes.highlighted);
                         if (highlighted) {
                             highlighted.click();
+                            return false;
                         }
                     }
-                    return false;
-            }
-        };
-        input.onfocus = () => {
-            if (this.settings.isOpen) {
-                return;
+                    return true;
             }
-            this.callbacks.open();
         };
         main.appendChild(input);
         if (this.callbacks.addable) {
@@ -843,12 +833,8 @@ class Render {
         }
         return searchReturn;
     }
-    searchFocus(trigger) {
-        if (!trigger) {
-            this.settings.triggerFocus = false;
-        }
+    searchFocus() {
         this.content.search.input.focus();
-        this.settings.triggerFocus = true;
     }
     getOptions(notPlaceholder = false, notDisabled = false, notHidden = false) {
         let query = '.' + this.classes.option;
@@ -1505,13 +1491,13 @@ class SlimSelect {
             afterClose: undefined,
         };
         this.windowResize = debounce(() => {
-            if (!this.settings.isOpen) {
+            if (!this.settings.isOpen && !this.settings.isFullOpen) {
                 return;
             }
             this.render.moveContent();
         });
         this.windowScroll = debounce(() => {
-            if (!this.settings.isOpen) {
+            if (!this.settings.isOpen && !this.settings.isFullOpen) {
                 return;
             }
             this.render.moveContent();
@@ -1526,14 +1512,8 @@ class SlimSelect {
         };
         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) {
@@ -1703,13 +1683,16 @@ class SlimSelect {
         }
         this.render.open();
         if (this.settings.showSearch) {
-            this.render.searchFocus(false);
+            this.render.searchFocus();
         }
+        this.settings.isOpen = true;
         setTimeout(() => {
             if (this.events.afterOpen) {
                 this.events.afterOpen();
             }
-            this.settings.isOpen = true;
+            if (this.settings.isOpen) {
+                this.settings.isFullOpen = true;
+            }
         }, this.settings.timeoutDelay);
         if (this.settings.contentPosition === 'absolute') {
             if (this.settings.intervalMove) {
@@ -1729,12 +1712,13 @@ class SlimSelect {
         if (this.render.content.search.input.value !== '') {
             this.search('');
         }
-        this.render.mainFocus(false, eventType);
+        this.render.mainFocus(eventType);
+        this.settings.isOpen = false;
+        this.settings.isFullOpen = false;
         setTimeout(() => {
             if (this.events.afterClose) {
                 this.events.afterClose();
             }
-            this.settings.isOpen = false;
         }, this.settings.timeoutDelay);
         if (this.settings.intervalMove) {
             clearInterval(this.settings.intervalMove);

package/dist/slimselect.global.js

@@ -60,8 +60,7 @@ var SlimSelect = (function () {
             this.class = [];
             this.isMultiple = false;
             this.isOpen = false;
-            this.isWindowFocused = true;
-            this.triggerFocus = true;
+            this.isFullOpen = false;
             this.intervalMove = null;
             if (!settings) {
                 settings = {};
@@ -504,14 +503,10 @@ var SlimSelect = (function () {
                 },
             };
         }
-        mainFocus(trigger, eventType) {
-            if (!trigger) {
-                this.settings.triggerFocus = false;
-            }
+        mainFocus(eventType) {
             if (eventType !== 'click') {
                 this.main.main.focus({ preventScroll: true });
             }
-            this.settings.triggerFocus = true;
         }
         placeholder() {
             const placeholderOption = this.store.filter((o) => o.placeholder, false);
@@ -745,7 +740,6 @@ var SlimSelect = (function () {
                 switch (e.key) {
                     case 'ArrowUp':
                     case 'ArrowDown':
-                        this.callbacks.open();
                         e.key === 'ArrowDown' ? this.highlight('down') : this.highlight('up');
                         return false;
                     case 'Tab':
@@ -758,21 +752,17 @@ var SlimSelect = (function () {
                     case ' ':
                         if (this.callbacks.addable && e.ctrlKey) {
                             addable.click();
+                            return false;
                         }
                         else {
                             const highlighted = this.content.list.querySelector('.' + this.classes.highlighted);
                             if (highlighted) {
                                 highlighted.click();
+                                return false;
                             }
                         }
-                        return false;
-                }
-            };
-            input.onfocus = () => {
-                if (this.settings.isOpen) {
-                    return;
+                        return true;
                 }
-                this.callbacks.open();
             };
             main.appendChild(input);
             if (this.callbacks.addable) {
@@ -846,12 +836,8 @@ var SlimSelect = (function () {
             }
             return searchReturn;
         }
-        searchFocus(trigger) {
-            if (!trigger) {
-                this.settings.triggerFocus = false;
-            }
+        searchFocus() {
             this.content.search.input.focus();
-            this.settings.triggerFocus = true;
         }
         getOptions(notPlaceholder = false, notDisabled = false, notHidden = false) {
             let query = '.' + this.classes.option;
@@ -1508,13 +1494,13 @@ var SlimSelect = (function () {
                 afterClose: undefined,
             };
             this.windowResize = debounce(() => {
-                if (!this.settings.isOpen) {
+                if (!this.settings.isOpen && !this.settings.isFullOpen) {
                     return;
                 }
                 this.render.moveContent();
             });
             this.windowScroll = debounce(() => {
-                if (!this.settings.isOpen) {
+                if (!this.settings.isOpen && !this.settings.isFullOpen) {
                     return;
                 }
                 this.render.moveContent();
@@ -1529,14 +1515,8 @@ var SlimSelect = (function () {
             };
             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) {
@@ -1706,13 +1686,16 @@ var SlimSelect = (function () {
             }
             this.render.open();
             if (this.settings.showSearch) {
-                this.render.searchFocus(false);
+                this.render.searchFocus();
             }
+            this.settings.isOpen = true;
             setTimeout(() => {
                 if (this.events.afterOpen) {
                     this.events.afterOpen();
                 }
-                this.settings.isOpen = true;
+                if (this.settings.isOpen) {
+                    this.settings.isFullOpen = true;
+                }
             }, this.settings.timeoutDelay);
             if (this.settings.contentPosition === 'absolute') {
                 if (this.settings.intervalMove) {
@@ -1732,12 +1715,13 @@ var SlimSelect = (function () {
             if (this.render.content.search.input.value !== '') {
                 this.search('');
             }
-            this.render.mainFocus(false, eventType);
+            this.render.mainFocus(eventType);
+            this.settings.isOpen = false;
+            this.settings.isFullOpen = false;
             setTimeout(() => {
                 if (this.events.afterClose) {
                     this.events.afterClose();
                 }
-                this.settings.isOpen = false;
             }, this.settings.timeoutDelay);
             if (this.settings.intervalMove) {
                 clearInterval(this.settings.intervalMove);