From ba3049026810181f5af79d54d528a6020a4e82cc Mon Sep 17 00:00:00 2001 From: Pau15122 <77733880+vandangnhathung@users.noreply.github.com> Date: Tue, 9 Apr 2024 17:39:25 +0700 Subject: [PATCH 01/15] chore(multiple-options): add multiple options (haven't done yet) --- dev/html/multiple-options.html | 22 ++++++++++++++++++++++ dev/js/test-multiple-options.js | 8 ++++++++ dev/script.js | 4 +++- src/configs.js | 3 +++ src/data.js | 17 +++++++++++++++++ src/layout.js | 28 +++++++++++++++++++++++++--- src/methods.js | 2 ++ 7 files changed, 80 insertions(+), 4 deletions(-) create mode 100644 dev/html/multiple-options.html create mode 100644 dev/js/test-multiple-options.js diff --git a/dev/html/multiple-options.html b/dev/html/multiple-options.html new file mode 100644 index 0000000..b72a261 --- /dev/null +++ b/dev/html/multiple-options.html @@ -0,0 +1,22 @@ +
+

Search

+ + +
\ No newline at end of file diff --git a/dev/js/test-multiple-options.js b/dev/js/test-multiple-options.js new file mode 100644 index 0000000..a0cd0cf --- /dev/null +++ b/dev/js/test-multiple-options.js @@ -0,0 +1,8 @@ +import html from "../html/multiple-options.html"; + +export function testMultipleOptions(root){ + root.insertAdjacentHTML('beforeend', html); + + // Init: default layout + EasySelect.init(); +} \ No newline at end of file diff --git a/dev/script.js b/dev/script.js index 5ca610c..c6b5ca6 100644 --- a/dev/script.js +++ b/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 {testMultipleOptions} from "./js/test-multiple-options"; // import package info const packageInfo = require('../package.json'); @@ -34,4 +35,5 @@ testMethods(root); testSearch(root); testLayout(root); testInit(root); -testDisabled(root); \ No newline at end of file +testDisabled(root); +testMultipleOptions(root); \ No newline at end of file diff --git a/src/configs.js b/src/configs.js index 97edb15..6bcdc98 100644 --- a/src/configs.js +++ b/src/configs.js @@ -39,6 +39,9 @@ export const DEFAULTS = { closeOnChange: true, align: "left", + multiple: false, + multipleLabel: "Select", + // show search input inside dropdown search: false, emptySearchText: "There are no options", // optional, text appear when search empty diff --git a/src/data.js b/src/data.js index a778ca5..d974b3a 100644 --- a/src/data.js +++ b/src/data.js @@ -10,6 +10,23 @@ import {getIndex, getSelectedOption, stringToSlug} from "./utils"; */ export function val(context){ context.value = context.selectTag.value; + + // todo: get multiple values + if(context.options.multiple){ + let result = []; + let options = context.selectTag && context.selectTag.options; + let opt; + + for(let i = 0, iLen = options.length; i < iLen; i++){ + opt = options[i]; + + if(opt.selected){ + result.push(opt.value || opt.text); + } + } + console.log("result: ", result); + return result; + } return context.value; } diff --git a/src/layout.js b/src/layout.js index 5649c9e..e92624f 100644 --- a/src/layout.js +++ b/src/layout.js @@ -74,6 +74,13 @@ export function getDropdownHTML(context){ * @returns {string} */ export function getOptionHTML(context, option = undefined){ + + + if(typeof option === 'undefined' && context.options.multiple){ + return "multiple"; + } + + console.log("option: ", option) // is active const isActive = typeof option !== 'undefined' && option['value'] === val(context); @@ -100,11 +107,26 @@ export function getOptionHTML(context, option = undefined){ * @returns {string} */ export function getOptionInnerHTML(context, option){ - let html = context.options.customDropDownOptionHTML(option); + let customHTML = context.options.customDropDownOptionHTML(option); - if(typeof html === 'undefined'){ - html = `${option['label']}`; + if(customHTML){ + return customHTML; } + let html = ''; + + // multiple options + if(context.options.multiple){ + + // todo: detect checkbox + html += `[]`; + html += `${option['label']}`; + + return html; + } + + // default HTML + html = `${option['label']}`; + return html; } \ No newline at end of file diff --git a/src/methods.js b/src/methods.js index c40d96b..43331d1 100644 --- a/src/methods.js +++ b/src/methods.js @@ -20,6 +20,8 @@ export function init(context){ // alignment checkAlignmentOption(context); + // todo: multiple true => closeOnChange false + // init search dropdown if(context.options.search && !context.options.nativeSelect){ initSearchDropdown(context); From cc85a2c421993fb04a4061aa471ae14944c53a7b Mon Sep 17 00:00:00 2001 From: phucbm Date: Thu, 11 Apr 2024 11:07:42 +0700 Subject: [PATCH 02/15] feat(multi-select): create test --- dev/html/{multiple-options.html => multiple-select.html} | 7 +++---- .../{test-multiple-options.js => test-multiple-select.js} | 4 ++-- dev/script.js | 4 ++-- 3 files changed, 7 insertions(+), 8 deletions(-) rename dev/html/{multiple-options.html => multiple-select.html} (74%) rename dev/js/{test-multiple-options.js => test-multiple-select.js} (52%) diff --git a/dev/html/multiple-options.html b/dev/html/multiple-select.html similarity index 74% rename from dev/html/multiple-options.html rename to dev/html/multiple-select.html index b72a261..3c8558e 100644 --- a/dev/html/multiple-options.html +++ b/dev/html/multiple-select.html @@ -1,10 +1,10 @@
-

Search

+

Multiple select

diff --git a/dev/js/test-multiple-options.js b/dev/js/test-multiple-select.js similarity index 52% rename from dev/js/test-multiple-options.js rename to dev/js/test-multiple-select.js index a0cd0cf..d9a428a 100644 --- a/dev/js/test-multiple-options.js +++ b/dev/js/test-multiple-select.js @@ -1,6 +1,6 @@ -import html from "../html/multiple-options.html"; +import html from "../html/multiple-select.html"; -export function testMultipleOptions(root){ +export function testMultipleSelect(root){ root.insertAdjacentHTML('beforeend', html); // Init: default layout diff --git a/dev/script.js b/dev/script.js index c6b5ca6..5bb21b8 100644 --- a/dev/script.js +++ b/dev/script.js @@ -12,7 +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 {testMultipleOptions} from "./js/test-multiple-options"; +import {testMultipleSelect} from "./js/test-multiple-select"; // import package info const packageInfo = require('../package.json'); @@ -36,4 +36,4 @@ testSearch(root); testLayout(root); testInit(root); testDisabled(root); -testMultipleOptions(root); \ No newline at end of file +testMultipleSelect(root); \ No newline at end of file From 40960982b8a12e905d9a7abd66fe08ca632b6e85 Mon Sep 17 00:00:00 2001 From: phucbm Date: Thu, 11 Apr 2024 11:08:10 +0700 Subject: [PATCH 03/15] feat(multi-select): update html --- src/configs.js | 2 +- src/layout.js | 37 ++++++++++++++++++------------------- 2 files changed, 19 insertions(+), 20 deletions(-) diff --git a/src/configs.js b/src/configs.js index 6bcdc98..b8e9d24 100644 --- a/src/configs.js +++ b/src/configs.js @@ -40,7 +40,7 @@ export const DEFAULTS = { align: "left", multiple: false, - multipleLabel: "Select", + multipleLabel: "Select multiple options", // show search input inside dropdown search: false, diff --git a/src/layout.js b/src/layout.js index e92624f..18d23a5 100644 --- a/src/layout.js +++ b/src/layout.js @@ -74,13 +74,9 @@ export function getDropdownHTML(context){ * @returns {string} */ export function getOptionHTML(context, option = undefined){ + // is current of multiple select + const isMultipleCurrent = typeof option === 'undefined' && context.options.multiple; - - if(typeof option === 'undefined' && context.options.multiple){ - return "multiple"; - } - - console.log("option: ", option) // is active const isActive = typeof option !== 'undefined' && option['value'] === val(context); @@ -95,7 +91,7 @@ export function getOptionHTML(context, option = undefined){ let html = ''; html += `
`; - html += getOptionInnerHTML(context, option); + html += getOptionInnerHTML(context, option, isMultipleCurrent); html += `
`; return html; } @@ -104,28 +100,31 @@ export function getOptionHTML(context, option = undefined){ * Option inner HTML * @param context * @param option + * @param isMultipleCurrent * @returns {string} */ -export function getOptionInnerHTML(context, option){ - let customHTML = context.options.customDropDownOptionHTML(option); +export function getOptionInnerHTML(context, option, isMultipleCurrent = false){ + // return custom HTML if any + let customHTML = context.options.customDropDownOptionHTML(option, isMultipleCurrent); + if(customHTML) return customHTML; - if(customHTML){ - return customHTML; - } let html = ''; - // multiple options + // multiple select if(context.options.multiple){ - - // todo: detect checkbox - html += `[]`; - html += `${option['label']}`; - + if(isMultipleCurrent){ + // current + html += context.options.multipleLabel; + }else{ + // option + html += `[ ]`; + html += `${option['label']}`; + } return html; } - // default HTML + // single select html = `${option['label']}`; return html; From 1f61761778098e2885a8f937419527ed477495cb Mon Sep 17 00:00:00 2001 From: phucbm Date: Thu, 11 Apr 2024 11:12:17 +0700 Subject: [PATCH 04/15] feat(multi-select): not close in multi select --- src/_index.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/_index.js b/src/_index.js index 21f855f..2633e7d 100644 --- a/src/_index.js +++ b/src/_index.js @@ -234,7 +234,9 @@ class EasySelect{ 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 From 97ecd702acf8f38dfbfbb536122c305e77b9d638 Mon Sep 17 00:00:00 2001 From: phucbm Date: Thu, 11 Apr 2024 11:23:39 +0700 Subject: [PATCH 05/15] feat(multi-select): init multi select --- src/configs.js | 3 +++ src/methods.js | 8 ++++++-- src/multi-select.js | 12 ++++++++++++ 3 files changed, 21 insertions(+), 2 deletions(-) create mode 100644 src/multi-select.js diff --git a/src/configs.js b/src/configs.js index b8e9d24..dadbdad 100644 --- a/src/configs.js +++ b/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 diff --git a/src/methods.js b/src/methods.js index 43331d1..cca73d3 100644 --- a/src/methods.js +++ b/src/methods.js @@ -1,3 +1,4 @@ +import {initMultiSelect} from "./multi-select"; import {createEl, insertAfter, wrapAll} from "./utils"; import {getCurrentHTML, updateDropdownHTML} from "./layout"; import {val} from "./data"; @@ -20,13 +21,16 @@ export function init(context){ // alignment checkAlignmentOption(context); - // todo: multiple true => closeOnChange false - // init search dropdown if(context.options.search && !context.options.nativeSelect){ initSearchDropdown(context); } + // init multi select + if(context.options.multiple && !context.options.nativeSelect){ + initMultiSelect(context); + } + // update value attribute context.selectTag.setAttribute(ATTRS.value, val(context)); diff --git a/src/multi-select.js b/src/multi-select.js new file mode 100644 index 0000000..138c60a --- /dev/null +++ b/src/multi-select.js @@ -0,0 +1,12 @@ +import {CLASSES} from "./configs"; + +export function initMultiSelect(context){ + // add wrapper class + context.wrapper.classList.add(CLASSES.multipleSelect); + + // set multiple attribute + context.selectTag.setAttribute('multiple', 'true'); + + // todo: remove before release + context.selectTag.style.display = ''; +} \ No newline at end of file From 89c3c15ac9574cd58c7fe25218112b572535e14f Mon Sep 17 00:00:00 2001 From: phucbm Date: Thu, 11 Apr 2024 11:33:58 +0700 Subject: [PATCH 06/15] feat(multi-select): add getMultipleSelectedValues --- src/data.js | 21 ++------------------- src/utils.js | 19 +++++++++++++++++++ 2 files changed, 21 insertions(+), 19 deletions(-) diff --git a/src/data.js b/src/data.js index d974b3a..3324de6 100644 --- a/src/data.js +++ b/src/data.js @@ -1,4 +1,4 @@ -import {getIndex, getSelectedOption, stringToSlug} from "./utils"; +import {getIndex, getMultipleSelectedValues, getSelectedOption, stringToSlug} from "./utils"; /**************************************************** ********************** Data ********************* @@ -9,24 +9,7 @@ import {getIndex, getSelectedOption, stringToSlug} from "./utils"; * @returns {*} */ export function val(context){ - context.value = context.selectTag.value; - - // todo: get multiple values - if(context.options.multiple){ - let result = []; - let options = context.selectTag && context.selectTag.options; - let opt; - - for(let i = 0, iLen = options.length; i < iLen; i++){ - opt = options[i]; - - if(opt.selected){ - result.push(opt.value || opt.text); - } - } - console.log("result: ", result); - return result; - } + context.value = getMultipleSelectedValues(context.selectTag); return context.value; } diff --git a/src/utils.js b/src/utils.js index 0a0a4aa..0a28ea5 100644 --- a/src/utils.js +++ b/src/utils.js @@ -149,4 +149,23 @@ export function removeAccents(str){ return str.normalize('NFD') .replace(/[\u0300-\u036f]/g, '') .replace(/đ/g, 'd').replace(/Đ/g, 'D'); +} + + +/** + * Get selected values from a select tag (support multiple select) + * @param selectTag + * @returns {*[]} + */ +export function getMultipleSelectedValues(selectTag){ + let result = []; + let options = selectTag && selectTag.options; + + for(const option of options){ + if(option.selected){ + result.push(option.value || option.text); + } + } + + return result; } \ No newline at end of file From 86a7ae6c6876cd31a889589b17052efe99290cbd Mon Sep 17 00:00:00 2001 From: phucbm Date: Thu, 11 Apr 2024 11:58:05 +0700 Subject: [PATCH 07/15] feat(multi-select): val() can return array --- src/data.js | 24 ++++++++++++++++++++++-- 1 file changed, 22 insertions(+), 2 deletions(-) diff --git a/src/data.js b/src/data.js index 3324de6..ac6475a 100644 --- a/src/data.js +++ b/src/data.js @@ -6,10 +6,30 @@ import {getIndex, getMultipleSelectedValues, getSelectedOption, stringToSlug} fr /** * Get value + * @param context + * @param type * @returns {*} */ -export function val(context){ - context.value = getMultipleSelectedValues(context.selectTag); +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; } From c58243ad5cbdcacfe7ff3d513f15aa068fa7b31e Mon Sep 17 00:00:00 2001 From: phucbm Date: Thu, 11 Apr 2024 11:58:29 +0700 Subject: [PATCH 08/15] feat(multi-select): allow activate multi selected values --- src/_index.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/_index.js b/src/_index.js index 2633e7d..a82deac 100644 --- a/src/_index.js +++ b/src/_index.js @@ -224,14 +224,17 @@ class EasySelect{ // update current HTML this.current.innerHTML = getOptionHTML(this); const newValue = val(this); + const newValueArray = val(this, 'array'); /** Dropdown **/ if(!this.options.nativeSelect){ - // active option + // update active class this.dropdown.querySelectorAll(`[${ATTRS.optionAttr}]`).forEach(item => { item.classList.remove(CLASSES.active); }); - this.dropdown.querySelector(`[${ATTRS.optionAttr}="${newValue}"]`).classList.add(CLASSES.active); + newValueArray.forEach(val => { + this.dropdown.querySelector(`[${ATTRS.optionAttr}="${val}"]`).classList.add(CLASSES.active); + }); // close on change let isCloseOnChange = this.options.closeOnChange; From d91a1aaa5c91865e74dd50c440d78ccabbfc8563 Mon Sep 17 00:00:00 2001 From: phucbm Date: Thu, 11 Apr 2024 12:03:35 +0700 Subject: [PATCH 09/15] feat(multi-select): val() => tested with multi select --- src/data.js | 2 +- src/layout.js | 3 ++- src/methods.js | 1 + 3 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/data.js b/src/data.js index ac6475a..d831258 100644 --- a/src/data.js +++ b/src/data.js @@ -59,7 +59,7 @@ export function getOptionData(context, option = undefined){ 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; diff --git a/src/layout.js b/src/layout.js index 18d23a5..bb2b538 100644 --- a/src/layout.js +++ b/src/layout.js @@ -78,7 +78,8 @@ export function getOptionHTML(context, option = undefined){ const isMultipleCurrent = typeof option === 'undefined' && context.options.multiple; // is active - const isActive = typeof option !== 'undefined' && option['value'] === val(context); + // tested with multi select + const isActive = typeof option !== 'undefined' && val(context, 'array').includes(option['value']); // return selected option if(typeof option === 'undefined'){ diff --git a/src/methods.js b/src/methods.js index cca73d3..237d9d0 100644 --- a/src/methods.js +++ b/src/methods.js @@ -32,6 +32,7 @@ export function init(context){ } // update value attribute + // tested with multi select context.selectTag.setAttribute(ATTRS.value, val(context)); // Event: onInit From 97b354512c0519fb2b81434c1176388dd5d62bcb Mon Sep 17 00:00:00 2001 From: phucbm Date: Thu, 11 Apr 2024 14:02:59 +0700 Subject: [PATCH 10/15] feat(multi-select): sync selected values between select tag and dropdown --- src/_index.js | 71 +++++++++++++++++++++++++++++++++++---------- src/methods.js | 2 +- src/multi-select.js | 3 -- src/utils.js | 11 +++++++ 4 files changed, 68 insertions(+), 19 deletions(-) diff --git a/src/_index.js b/src/_index.js index a82deac..e035ba5 100644 --- a/src/_index.js +++ b/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 {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.`); @@ -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); } /** @@ -228,12 +262,19 @@ class EasySelect{ /** Dropdown **/ if(!this.options.nativeSelect){ + // todo: this.selectTagData not updated + //console.log(this.selectTagData) + // update active class - this.dropdown.querySelectorAll(`[${ATTRS.optionAttr}]`).forEach(item => { - item.classList.remove(CLASSES.active); - }); - newValueArray.forEach(val => { - this.dropdown.querySelector(`[${ATTRS.optionAttr}="${val}"]`).classList.add(CLASSES.active); + 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); + } }); // close on change diff --git a/src/methods.js b/src/methods.js index 237d9d0..6aaba19 100644 --- a/src/methods.js +++ b/src/methods.js @@ -109,7 +109,7 @@ export function create(context){ // hide default select assignSelectOnChange(context); - context.selectTag.style.display = 'none'; + //context.selectTag.style.display = 'none'; // on current click context.current.addEventListener('click', () => context.toggle()); diff --git a/src/multi-select.js b/src/multi-select.js index 138c60a..59710d8 100644 --- a/src/multi-select.js +++ b/src/multi-select.js @@ -6,7 +6,4 @@ export function initMultiSelect(context){ // set multiple attribute context.selectTag.setAttribute('multiple', 'true'); - - // todo: remove before release - context.selectTag.style.display = ''; } \ No newline at end of file diff --git a/src/utils.js b/src/utils.js index 0a28ea5..926a68e 100644 --- a/src/utils.js +++ b/src/utils.js @@ -168,4 +168,15 @@ export function getMultipleSelectedValues(selectTag){ } return result; +} + + +/** + * Get option element by value + * @param context + * @param optionValue + * @returns {Element} + */ +export function getOptionByValue(context, optionValue){ + return context.selectTag.querySelector(`option[value="${optionValue}"]`); } \ No newline at end of file From dfd26359bd9917217ed9b671ffb1ba5b134e1bcc Mon Sep 17 00:00:00 2001 From: phucbm Date: Thu, 11 Apr 2024 16:33:51 +0700 Subject: [PATCH 11/15] feat(multi-select): style checkbox --- src/_style.scss | 38 ++++++++++++++++++++++++++++++++++++++ src/layout.js | 2 +- src/methods.js | 2 +- 3 files changed, 40 insertions(+), 2 deletions(-) diff --git a/src/_style.scss b/src/_style.scss index 175be85..45d57f6 100644 --- a/src/_style.scss +++ b/src/_style.scss @@ -274,3 +274,41 @@ min-height: var(--es-height); padding: 5px 20px; } + + +/**************************** + * Checkbox +****************************/ +.easy-select.es-multi-select { + .es-dropdown { + .es-option { + position: relative; + padding-left: 50px; + + &: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; + } + } + } +} \ No newline at end of file diff --git a/src/layout.js b/src/layout.js index bb2b538..30f0701 100644 --- a/src/layout.js +++ b/src/layout.js @@ -119,7 +119,7 @@ export function getOptionInnerHTML(context, option, isMultipleCurrent = false){ html += context.options.multipleLabel; }else{ // option - html += `[ ]`; + html += ``; html += `${option['label']}`; } return html; diff --git a/src/methods.js b/src/methods.js index 6aaba19..237d9d0 100644 --- a/src/methods.js +++ b/src/methods.js @@ -109,7 +109,7 @@ export function create(context){ // hide default select assignSelectOnChange(context); - //context.selectTag.style.display = 'none'; + context.selectTag.style.display = 'none'; // on current click context.current.addEventListener('click', () => context.toggle()); From d629bbce805838cfdc4d75dc5ad822cf30d8bdfd Mon Sep 17 00:00:00 2001 From: phucbm Date: Thu, 11 Apr 2024 16:34:27 +0700 Subject: [PATCH 12/15] feat(multi-select): style checkbox --- src/_style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/_style.scss b/src/_style.scss index 45d57f6..6b06731 100644 --- a/src/_style.scss +++ b/src/_style.scss @@ -283,7 +283,7 @@ .es-dropdown { .es-option { position: relative; - padding-left: 50px; + padding-left: 45px; &:not(.es-active) { .es-checkbox:before { From 903d6cdd9a76910e1a2cea1ba961ed17dbfed13f Mon Sep 17 00:00:00 2001 From: phucbm Date: Thu, 11 Apr 2024 16:50:59 +0700 Subject: [PATCH 13/15] feat(multi-select): style current label --- dev/html/multiple-select.html | 2 +- dev/style.scss | 3 ++- src/_style.scss | 7 +++++++ src/layout.js | 11 ++++++++++- 4 files changed, 20 insertions(+), 3 deletions(-) diff --git a/dev/html/multiple-select.html b/dev/html/multiple-select.html index 3c8558e..13b2e41 100644 --- a/dev/html/multiple-select.html +++ b/dev/html/multiple-select.html @@ -4,7 +4,7 @@

Multiple select