Allow to select multiple options

dev/html/multiple-select.html

@@ -0,0 +1,21 @@
+<section>
+    <h2 class="heading-separator"><span>Multiple select</span></h2>
+
+    <label class="row">
+        <strong>Allow to select multiple options</strong>
+        <span class="col-right">
+            <select data-easy-select='{"search": "true", "multiple": "true", "align":"right"}'>
+                <option value="1">One</option>
+                <option value="2">Two - Hai</option>
+                <option value="3">Three - 第三的</option>
+                <option value="4">Four - よん</option>
+                <option value="5">Five - これは五です。</option>
+                <option value="6">Six</option>
+                <option value="7">Seven</option>
+                <option value="8">Eight</option>
+                <option value="9">Nine</option>
+                <option value="10">Ten</option>
+            </select>
+        </span>
+    </label>
+</section>

dev/js/test-multiple-select.js

@@ -0,0 +1,8 @@
+import html from "../html/multiple-select.html";
+
+export function testMultipleSelect(root){
+    root.insertAdjacentHTML('beforeend', html);
+
+    // Init: default layout
+    EasySelect.init();
+}

dev/script.js

@@ -12,6 +12,7 @@ import {testLayout} from "./js/test-layout";
 import {testMethods} from "./js/test-methods";
 import {testDisabled} from "./js/test-disabled";
 import {testSearch} from "./js/test-search";
+import {testMultipleSelect} from "./js/test-multiple-select";
 
 // import package info
 const packageInfo = require('../package.json');
@@ -34,4 +35,5 @@ testMethods(root);
 testSearch(root);
 testLayout(root);
 testInit(root);
-testDisabled(root);
+testDisabled(root);
+testMultipleSelect(root);

dev/style.scss

@@ -16,8 +16,9 @@ section {
 }
 
 .col-right {
-  width: 200px;
+  width: 400px;
   display: block;
+  text-align: right;
 }
 
 code {

src/_index.js

@@ -1,7 +1,7 @@
 import {getSelectData, val} from "./data";
 import {fireOnChangeEvent, init} from "./methods";
-import {getOptionHTML, updateDropdownHTML} from "./layout";
-import {findObjectInArray, getSelectTag} from "./utils";
+import {getCurrentInnerHTML, getOptionHTML, updateDropdownHTML} from "./layout";
+import {findObjectInArray, getOptionByValue, getSelectTag} from "./utils";
 import {EventsManager, getOptionsFromAttribute} from "@phucbm/os-util";
 import {CLASSES, ATTRS, DEFAULTS} from './configs'
 
@@ -114,7 +114,7 @@ class EasySelect{
      * @param disabled
      */
     disableOption(optionValue, disabled){
-        const option = this.selectTag.querySelector(`option[value="${optionValue}"]`);
+        const option = getOptionByValue(this, optionValue);
 
         if(!option){
             console.warn(`Option with value "${optionValue}" is not found.`);
@@ -144,7 +144,7 @@ class EasySelect{
 
         if(this.selectTagData.length){
             // update current
-            this.current.innerHTML = getOptionHTML(this);
+            this.current.innerHTML = getCurrentInnerHTML(this);
 
             // if not native select
             if(!this.options.nativeSelect){
@@ -183,18 +183,52 @@ class EasySelect{
     select(value){
         if(this.isDisabled) return;
 
-        // skip duplicate value
-        if(value === val(this)) return;
+        // todo: create isSelectedOption()
+        const isSelected = val(this, 'array').includes(value);
 
-        // value exists in data object => update value
-        if(typeof findObjectInArray(this.selectTagData, 'value', value) !== 'undefined'){
-            this.selectTag.value = value;
-            fireOnChangeEvent(this);
+        // treat selected option
+        if(isSelected){
+            if(this.options.multiple) this.deselect(value);
             return;
         }
 
-        // warning
-        if(this.options.warning) console.warn(`Option[value="${value}"] is not found in this select!`);
+
+        // value not exists in data object => update value
+        if(typeof findObjectInArray(this.selectTagData, 'value', value) === 'undefined'){
+            // warning
+            if(this.options.warning) console.warn(`Option[value="${value}"] is not found in this select!`);
+            return;
+        }
+
+
+        // set selected value to select tag (single select only)
+        // with multi select, update select tag will lead to missing previous selected values
+        if(!this.options.multiple) this.selectTag.value = value;
+
+        // make the option selected
+        const option = getOptionByValue(this, value);
+        option.selected = true;
+
+        fireOnChangeEvent(this);
+    }
+
+
+    /**
+     * Deselect by value
+     * @param value
+     */
+    deselect(value){
+        // todo: bug multi deselect
+        if(this.isDisabled) return;
+
+        // get option
+        const option = getOptionByValue(this, value);
+        if(!option) return;
+
+        // deselect
+        option.selected = false;
+
+        fireOnChangeEvent(this);
     }
 
     /**
@@ -222,19 +256,31 @@ class EasySelect{
         if(this.isDisabled) return;
 
         // update current HTML
-        this.current.innerHTML = getOptionHTML(this);
+        this.current.innerHTML = getCurrentInnerHTML(this);
         const newValue = val(this);
+        const newValueArray = val(this, 'array');
 
         /** Dropdown **/
         if(!this.options.nativeSelect){
-            // active option
-            this.dropdown.querySelectorAll(`[${ATTRS.optionAttr}]`).forEach(item => {
-                item.classList.remove(CLASSES.active);
+            // todo: this.selectTagData not updated
+            //console.log(this.selectTagData)
+
+            // update active class
+            this.selectTagData.forEach(option => {
+                const isSelected = newValueArray.includes(option.value);
+                if(isSelected){
+                    // activate selected values
+                    // todo: save dropdown el to selectTagData
+                    this.dropdown.querySelector(`[${ATTRS.optionAttr}="${option.value}"]`).classList.add(CLASSES.active);
+                }else{
+                    this.dropdown.querySelector(`[${ATTRS.optionAttr}="${option.value}"]`).classList.remove(CLASSES.active);
+                }
             });
-            this.dropdown.querySelector(`[${ATTRS.optionAttr}="${newValue}"]`).classList.add(CLASSES.active);
 
             // close on change
-            if(this.options.closeOnChange) this.close();
+            let isCloseOnChange = this.options.closeOnChange;
+            if(this.options.multiple) isCloseOnChange = false; // not close in multi select
+            if(isCloseOnChange) this.close();
         }
 
         // update value attribute

src/_style.scss

@@ -274,3 +274,48 @@
   min-height: var(--es-height);
   padding: 5px 20px;
 }
+
+
+/****************************
+ * Checkbox
+****************************/
+.easy-select.es-multi-select {
+  .es-current-label {
+    max-width: var(--es-dropdown-width);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .es-dropdown {
+    .es-option {
+      position: relative;
+      padding-left: 45px;
+
+      &:not(.es-active) {
+        .es-checkbox:before {
+          opacity: 0;
+        }
+      }
+    }
+
+    .es-checkbox {
+      position: absolute;
+      top: .65em;
+      left: 20px;
+      width: 18px;
+      aspect-ratio: 1;
+      background-color: #e0e7ee;
+      border-radius: 3px;
+
+      &:before {
+        content: '✓';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        font-size: .7em;
+      }
+    }
+  }
+}

src/configs.js

@@ -18,6 +18,9 @@ export const CLASSES = {
     searchEnabled: 'es-search-enabled',
     searchWrapper: 'es-search-wrapper',
     searchEmpty: 'es-search-empty',
+
+    // multi select
+    multipleSelect: 'es-multi-select'
 }
 /**
  * Attributes
@@ -39,6 +42,9 @@ export const DEFAULTS = {
     closeOnChange: true,
     align: "left",
 
+    multiple: false,
+    multipleLabel: "Select multiple options",
+
     // show search input inside dropdown
     search: false,
     emptySearchText: "There are no options", // optional, text appear when search empty

src/data.js

@@ -1,15 +1,35 @@
-import {getIndex, getSelectedOption, stringToSlug} from "./utils";
+import {getIndex, getMultipleSelectedValues, getSelectedOption, stringToSlug} from "./utils";
 
 /****************************************************
  ********************** Data *********************
  ***************************************************/
 
 /**
  * Get value
+ * @param context
+ * @param type
  * @returns {*}
  */
-export function val(context){
-    context.value = context.selectTag.value;
+export function val(context, type = 'string'){
+    const valueArray = getMultipleSelectedValues(context.selectTag);
+    let value;
+
+    switch(type){
+        case "array":
+            value = valueArray;
+            break;
+        default:
+            // string
+            if(valueArray.length === 1){
+                value = valueArray[0]; // => "value"
+            }else if(valueArray.length > 1){
+                value = valueArray.join(','); // => "value1,value2"
+            }else{
+                value = ''; // => ""
+            }
+    }
+
+    context.value = value;
     return context.value;
 }
 
@@ -27,21 +47,23 @@ export function getSelectData(context){
 
 /**
  * Get option data
- * @returns {{isSelected: boolean, index: *, id: string, label: *, value: (*|string|number|string[])}}
+ * @param context
+ * @param option
+ * @returns {{el: *, isSelected: *, index: *, id: string, label: string, isDisabled: (*|(() => boolean)|((setting: string) => boolean)|string|boolean), value: *}}
  */
 export function getOptionData(context, option = undefined){
     if(typeof option === 'undefined'){
         // return selected option
         option = getSelectedOption(context.selectTag);
     }
 
-    const label = option.innerText;
-    const value = option.value;
+    const label = option?.innerText;
+    const value = option?.value;
     const index = getIndex(option);
     const id = stringToSlug(value) + '-' + index;
-    const isSelected = value === val(context);
+    const isSelected = val(context, 'array').includes(value); // tested with multi select
     const el = option;
-    const isDisabled = option.disabled;
+    const isDisabled = option?.disabled;
 
     return {id, label, value, isSelected, isDisabled, index, el};
 }