From e518d253ee56304d1dd7959b37d723108c197395 Mon Sep 17 00:00:00 2001 From: afonja14755 Date: Tue, 9 Apr 2024 18:55:43 +0300 Subject: [PATCH] Fix. Display body on update method. --- dist/css/ux-select.css | 2 +- dist/js/ux-select.es.js | 225 +++++++++++++++++----------------- dist/js/ux-select.es.js.map | 2 +- dist/js/ux-select.iife.js | 2 +- dist/js/ux-select.iife.js.map | 2 +- src/scss/_styles.scss | 1 + src/ux-select.ts | 6 +- 7 files changed, 122 insertions(+), 118 deletions(-) diff --git a/dist/css/ux-select.css b/dist/css/ux-select.css index c8c4c58..eb2fc53 100644 --- a/dist/css/ux-select.css +++ b/dist/css/ux-select.css @@ -1 +1 @@ -:root{--uxs-padding-x: .75rem;--uxs-padding-y: .375rem;--uxs-border-width: 1px;--uxs-border-style: solid;--uxs-border-color: rgb(233, 233, 233);--uxs-border-radius: .375rem;--uxs-border-hover-color: rgb(189, 193, 198);--uxs-font-size: 1rem;--uxs-font-weight: 400;--uxs-line-height: 1.5;--uxs-background-color: rgb(255, 255, 255);--uxs-text-color: rgb(34, 34, 34);--uxs-dropdown-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 24 24' style='enable-background:new 0 0 24 24;' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4 l-6,6C12.5,15.9,12.3,16,12,16z'/%3E%3C/g%3E%3C/svg%3E%0A");--uxs-dropdown-disabled-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 24 24' style='enable-background:new 0 0 24 24;' xml:space='preserve'%3E%3Cg%3E%3Cpath fill='rgb(130 130 130)' d='M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4 l-6,6C12.5,15.9,12.3,16,12,16z'/%3E%3C/g%3E%3C/svg%3E%0A");--uxs-clear-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 24 24' style='enable-background:new 0 0 24 24;' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M6,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l12-12c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-12,12C6.5,18.9,6.3,19,6,19z' /%3E%3Cpath d='M18,19c-0.3,0-0.5-0.1-0.7-0.3l-12-12c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l12,12c0.4,0.4,0.4,1,0,1.4 C18.5,18.9,18.3,19,18,19z'/%3E%3C/g%3E%3C/svg%3E%0A");--uxs-clear-disabled-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 24 24' style='enable-background:new 0 0 24 24;' xml:space='preserve'%3E%3Cg%3E%3Cpath fill='rgb(130 130 130)' d='M6,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l12-12c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-12,12C6.5,18.9,6.3,19,6,19z' /%3E%3Cpath fill='rgb(130 130 130)' d='M18,19c-0.3,0-0.5-0.1-0.7-0.3l-12-12c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l12,12c0.4,0.4,0.4,1,0,1.4 C18.5,18.9,18.3,19,18,19z'/%3E%3C/g%3E%3C/svg%3E%0A");--uxs-option-hovered-bg-color: rgb(244, 244, 244);--uxs-option-selected-bg-color: rgb(244, 244, 244);--uxs-option-disabled-color: rgb(244, 244, 244);--uxs-option-styled-outline-width: 1px;--uxs-option-styled-checkbox-outline-radius: .25rem;--uxs-option-styled-border-width: .1875rem;--uxs-option-styled-background-color: rgb(0, 224, 255);--uxs-search-background-color: rgb(255, 255, 255);--uxs-search-text-color: rgb(34, 34, 34);--uxs-search-placeholder-color: rgb(169, 169, 169);--uxs-transition-duration: .2s;--uxs-transition-easing: ease-in-out;--uxs-scrollbar-track-color: rgb(189, 189, 189);--uxs-scrollbar-thumb-color: rgb(117, 117, 117);--uxs-scrollbar-thumb-hover-color: rgb(97, 97, 97)}.ux-select{cursor:pointer;position:relative;display:block;width:100%;margin:0;padding:var(--uxs-padding-y) var(--uxs-padding-x);border:var(--uxs-border-width) var(--uxs-border-style) var(--uxs-border-color);border-radius:var(--uxs-border-radius);background-color:var(--uxs-background-color);font-size:var(--uxs-font-size);font-weight:var(--uxs-font-weight);line-height:var(--uxs-line-height);color:var(--uxs-text-color);transition:border-color var(--uxs-transition-duration) var(--uxs-transition-easing)}.ux-select.-disabled{cursor:not-allowed;color:var(--uxs-option-disabled-color)}.ux-select.-filled .ux-select__clear{display:block}.ux-select:not(.-disabled).-focus{border-color:var(--uxs-border-hover-color)}.ux-select:not(.-disabled).-shown{border-color:var(--uxs-border-hover-color)}.ux-select:not(.-disabled).-shown .ux-select__head:after{transform:rotate(-180deg)}.ux-select:not(.-disabled).-shown .ux-select__body{pointer-events:auto;opacity:1;transform:scale(1) translateY(0)}.ux-select__head{position:relative;display:flex;align-items:center}.ux-select__head:after{content:"";display:flex;align-items:center;justify-content:center;min-width:1rem;width:1rem;height:1rem;margin-left:.5rem;background:transparent var(--uxs-dropdown-image) center no-repeat;transition:transform var(--uxs-transition-duration) var(--uxs-transition-easing)}.ux-select.-disabled .ux-select__head:after{background-image:var(--uxs-dropdown-disabled-image)}.ux-select__title{user-select:none;flex-grow:1;white-space:nowrap}.ux-select__clear{cursor:pointer;display:none;min-width:1rem;width:1rem;height:1rem;margin-left:.5rem;border:none;outline:none;background:transparent var(--uxs-clear-image) center no-repeat}.ux-select.-disabled .ux-select__clear{cursor:not-allowed;background-image:var(--uxs-clear-disabled-image)}.ux-select__body{pointer-events:none;position:absolute;z-index:5;top:calc(100% + .25rem);left:0;overflow:hidden;width:100%;border:var(--uxs-border-width) solid var(--uxs-border-color);border-radius:var(--uxs-border-radius);background-color:var(--uxs-background-color);opacity:0;transform:scale(.75) translateY(-.75rem);transition:opacity var(--uxs-transition-duration) var(--uxs-transition-easing),transform var(--uxs-transition-duration) var(--uxs-transition-easing)}.ux-select__search{padding:.25rem}.ux-select-search__input{width:100%;padding:var(--uxs-padding-y) calc(var(--uxs-padding-x) - .1875rem);border:var(--uxs-border-width) solid var(--uxs-border-color);border-radius:var(--uxs-border-radius);background-color:var(--uxs-search-background-color);color:var(--uxs-search-text-color);transition:border-color var(--uxs-transition-duration) var(--uxs-transition-easing)}.ux-select-search__input::placeholder{color:var(--uxs-search-placeholder-color)}.ux-select-search__input::-ms-clear,.ux-select-search__input::-ms-reveal{display:none;width:0;height:0}.ux-select-search__input::-webkit-search-decoration,.ux-select-search__input::-webkit-search-cancel-button,.ux-select-search__input::-webkit-search-results-button,.ux-select-search__input::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}.ux-select-search__input:focus-visible{outline:none}.ux-select-search__input:focus{border-color:var(--uxs-border-hover-color)}.ux-select__dropdown{scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:var(--uxs-scrollbar-track-color) var(--uxs-scrollbar-thumb-color);overflow-y:auto;-webkit-overflow-scrolling:touch;max-height:calc((var(--uxs-font-size) * var(--uxs-line-height) + var(--uxs-padding-y) * 2) * 5)}@supports selector(::-webkit-scrollbar){.ux-select__dropdown::-webkit-scrollbar{position:absolute;max-width:.6875rem;max-height:.6875rem}.ux-select__dropdown::-webkit-scrollbar-track{background-color:var(--uxs-scrollbar-track-color)}.ux-select__dropdown::-webkit-scrollbar-thumb{background-color:var(--uxs-scrollbar-thumb-color)}.ux-select__dropdown::-webkit-scrollbar-thumb:hover{background-color:var(--uxs-scrollbar-thumb-hover-color)}}.ux-select-group.-disabled .ux-select-group__title{color:var(--uxs-option-disabled-color)}.ux-select-group.-empty .ux-select-group__elem{padding:var(--uxs-padding-y) var(--uxs-padding-x)}.ux-select-group__title{cursor:default;padding:var(--uxs-padding-y) var(--uxs-padding-x);font-weight:700}.ux-select-group__list{margin:0;padding:0;list-style:none}.ux-select-group__elem{user-select:none;padding:var(--uxs-padding-y) var(--uxs-padding-x) var(--uxs-padding-y) calc(var(--uxs-padding-x) * 2);background-color:var(--uxs-background-color);transition:background-color var(--uxs-transition-duration) var(--uxs-transition-easing)}.ux-select.-radio .ux-select-group__elem,.ux-select.-checkbox .ux-select-group__elem{display:flex;align-items:center;justify-content:space-between}.ux-select.-radio .ux-select-group__elem:after,.ux-select.-checkbox .ux-select-group__elem:after{content:"";display:flex;align-items:center;justify-content:center;width:var(--uxs-font-size);height:var(--uxs-font-size);outline:var(--uxs-option-styled-outline-width) solid var(--uxs-option-styled-background-color);border:var(--uxs-option-styled-border-width) solid var(--uxs-background-color);transition:background-color var(--uxs-transition-duration) var(--uxs-transition-easing)}.ux-select.-radio .ux-select-group__elem:after{border-radius:50%}.ux-select.-checkbox .ux-select-group__elem:after{border-radius:var(--uxs-option-styled-checkbox-outline-radius)}.ux-select.-image .ux-select-group__elem{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:.5rem}.ux-select-group__elem.-disabled{cursor:not-allowed;color:var(--uxs-option-disabled-color)}.ux-select-group__elem:not(.-disabled):hover{background-color:var(--uxs-option-hovered-bg-color)}.ux-select.-radio .ux-select-group__elem:not(.-disabled):hover:after,.ux-select.-checkbox .ux-select-group__elem:not(.-disabled):hover:after{border:var(--uxs-option-styled-border-width) solid var(--uxs-option-hovered-bg-color)}.ux-select-group__elem:not(.-disabled).-selected{font-weight:700;background-color:var(--uxs-option-selected-bg-color)}.ux-select:not(.-multiple) .ux-select-group__elem:not(.-disabled).-selected{cursor:default}.ux-select.-radio .ux-select-group__elem.-selected:after,.ux-select.-checkbox .ux-select-group__elem.-selected:after{border:var(--uxs-option-styled-border-width) solid var(--uxs-option-hovered-bg-color);background-color:var(--uxs-option-styled-background-color)} +:root{--uxs-padding-x: .75rem;--uxs-padding-y: .375rem;--uxs-border-width: 1px;--uxs-border-style: solid;--uxs-border-color: rgb(233, 233, 233);--uxs-border-radius: .375rem;--uxs-border-hover-color: rgb(189, 193, 198);--uxs-font-size: 1rem;--uxs-font-weight: 400;--uxs-line-height: 1.5;--uxs-background-color: rgb(255, 255, 255);--uxs-text-color: rgb(34, 34, 34);--uxs-dropdown-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 24 24' style='enable-background:new 0 0 24 24;' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4 l-6,6C12.5,15.9,12.3,16,12,16z'/%3E%3C/g%3E%3C/svg%3E%0A");--uxs-dropdown-disabled-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 24 24' style='enable-background:new 0 0 24 24;' xml:space='preserve'%3E%3Cg%3E%3Cpath fill='rgb(130 130 130)' d='M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4 l-6,6C12.5,15.9,12.3,16,12,16z'/%3E%3C/g%3E%3C/svg%3E%0A");--uxs-clear-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 24 24' style='enable-background:new 0 0 24 24;' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M6,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l12-12c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-12,12C6.5,18.9,6.3,19,6,19z' /%3E%3Cpath d='M18,19c-0.3,0-0.5-0.1-0.7-0.3l-12-12c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l12,12c0.4,0.4,0.4,1,0,1.4 C18.5,18.9,18.3,19,18,19z'/%3E%3C/g%3E%3C/svg%3E%0A");--uxs-clear-disabled-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 24 24' style='enable-background:new 0 0 24 24;' xml:space='preserve'%3E%3Cg%3E%3Cpath fill='rgb(130 130 130)' d='M6,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l12-12c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-12,12C6.5,18.9,6.3,19,6,19z' /%3E%3Cpath fill='rgb(130 130 130)' d='M18,19c-0.3,0-0.5-0.1-0.7-0.3l-12-12c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l12,12c0.4,0.4,0.4,1,0,1.4 C18.5,18.9,18.3,19,18,19z'/%3E%3C/g%3E%3C/svg%3E%0A");--uxs-option-hovered-bg-color: rgb(244, 244, 244);--uxs-option-selected-bg-color: rgb(244, 244, 244);--uxs-option-disabled-color: rgb(244, 244, 244);--uxs-option-styled-outline-width: 1px;--uxs-option-styled-checkbox-outline-radius: .25rem;--uxs-option-styled-border-width: .1875rem;--uxs-option-styled-background-color: rgb(0, 224, 255);--uxs-search-background-color: rgb(255, 255, 255);--uxs-search-text-color: rgb(34, 34, 34);--uxs-search-placeholder-color: rgb(169, 169, 169);--uxs-transition-duration: .2s;--uxs-transition-easing: ease-in-out;--uxs-scrollbar-track-color: rgb(189, 189, 189);--uxs-scrollbar-thumb-color: rgb(117, 117, 117);--uxs-scrollbar-thumb-hover-color: rgb(97, 97, 97)}.ux-select{cursor:pointer;position:relative;display:block;width:100%;margin:0;padding:var(--uxs-padding-y) var(--uxs-padding-x);border:var(--uxs-border-width) var(--uxs-border-style) var(--uxs-border-color);border-radius:var(--uxs-border-radius);background-color:var(--uxs-background-color);font-size:var(--uxs-font-size);font-weight:var(--uxs-font-weight);line-height:var(--uxs-line-height);color:var(--uxs-text-color);transition:border-color var(--uxs-transition-duration) var(--uxs-transition-easing)}.ux-select.-disabled{cursor:not-allowed;color:var(--uxs-option-disabled-color)}.ux-select.-filled .ux-select__clear{display:block}.ux-select:not(.-disabled).-focus{border-color:var(--uxs-border-hover-color)}.ux-select:not(.-disabled).-shown{border-color:var(--uxs-border-hover-color)}.ux-select:not(.-disabled).-shown .ux-select__head:after{transform:rotate(-180deg)}.ux-select:not(.-disabled).-shown .ux-select__body{pointer-events:auto;opacity:1;transform:scale(1) translateY(0)}.ux-select__head{position:relative;display:flex;align-items:center}.ux-select__head:after{content:"";display:flex;align-items:center;justify-content:center;min-width:1rem;width:1rem;height:1rem;margin-left:.5rem;background:transparent var(--uxs-dropdown-image) center no-repeat;transition:transform var(--uxs-transition-duration) var(--uxs-transition-easing)}.ux-select.-disabled .ux-select__head:after{background-image:var(--uxs-dropdown-disabled-image)}.ux-select__title{user-select:none;flex-grow:1;white-space:nowrap}.ux-select__clear{cursor:pointer;display:none;min-width:1rem;width:1rem;height:1rem;margin-left:.5rem;border:none;outline:none;background:transparent var(--uxs-clear-image) center no-repeat}.ux-select.-disabled .ux-select__clear{cursor:not-allowed;background-image:var(--uxs-clear-disabled-image)}.ux-select__body{pointer-events:none;position:absolute;z-index:5;top:calc(100% + .25rem);left:0;overflow:hidden;width:100%;border:var(--uxs-border-width) solid var(--uxs-border-color);border-radius:var(--uxs-border-radius);background-color:var(--uxs-background-color);opacity:0;transform:scale(.75) translateY(-.75rem);transition:opacity var(--uxs-transition-duration) var(--uxs-transition-easing),transform var(--uxs-transition-duration) var(--uxs-transition-easing)}.ux-select__search{padding:.25rem}.ux-select-search__input{width:100%;padding:var(--uxs-padding-y) calc(var(--uxs-padding-x) - .1875rem);border:var(--uxs-border-width) solid var(--uxs-border-color);border-radius:var(--uxs-border-radius);background-color:var(--uxs-search-background-color);color:var(--uxs-search-text-color);transition:border-color var(--uxs-transition-duration) var(--uxs-transition-easing)}.ux-select-search__input::placeholder{color:var(--uxs-search-placeholder-color)}.ux-select-search__input::-ms-clear,.ux-select-search__input::-ms-reveal{display:none;width:0;height:0}.ux-select-search__input::-webkit-search-decoration,.ux-select-search__input::-webkit-search-cancel-button,.ux-select-search__input::-webkit-search-results-button,.ux-select-search__input::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}.ux-select-search__input:focus-visible{outline:none}.ux-select-search__input:focus{border-color:var(--uxs-border-hover-color)}.ux-select__dropdown{scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:var(--uxs-scrollbar-track-color) var(--uxs-scrollbar-thumb-color);overflow-y:auto;-webkit-overflow-scrolling:touch;max-height:calc((var(--uxs-font-size) * var(--uxs-line-height) + var(--uxs-padding-y) * 2) * 5)}@supports selector(::-webkit-scrollbar){.ux-select__dropdown::-webkit-scrollbar{position:absolute;max-width:.6875rem;max-height:.6875rem}.ux-select__dropdown::-webkit-scrollbar-track{background-color:var(--uxs-scrollbar-track-color)}.ux-select__dropdown::-webkit-scrollbar-thumb{background-color:var(--uxs-scrollbar-thumb-color)}.ux-select__dropdown::-webkit-scrollbar-thumb:hover{background-color:var(--uxs-scrollbar-thumb-hover-color)}}.ux-select-group.-disabled .ux-select-group__title{color:var(--uxs-option-disabled-color)}.ux-select-group.-empty .ux-select-group__elem{padding:var(--uxs-padding-y) var(--uxs-padding-x)}.ux-select-group__title{cursor:default;padding:var(--uxs-padding-y) var(--uxs-padding-x);font-weight:700}.ux-select-group__list{margin:0;padding:0;list-style:none}.ux-select-group__elem{user-select:none;padding:var(--uxs-padding-y) var(--uxs-padding-x) var(--uxs-padding-y) calc(var(--uxs-padding-x) * 2);background-color:var(--uxs-background-color);transition:background-color var(--uxs-transition-duration) var(--uxs-transition-easing)}.ux-select.-radio .ux-select-group__elem,.ux-select.-checkbox .ux-select-group__elem{display:flex;align-items:center;justify-content:space-between}.ux-select.-radio .ux-select-group__elem:after,.ux-select.-checkbox .ux-select-group__elem:after{content:"";display:flex;align-items:center;justify-content:center;width:var(--uxs-font-size);height:var(--uxs-font-size);outline:var(--uxs-option-styled-outline-width) solid var(--uxs-option-styled-background-color);border:var(--uxs-option-styled-border-width) solid var(--uxs-background-color);transition:background-color var(--uxs-transition-duration) var(--uxs-transition-easing)}.ux-select.-radio .ux-select-group__elem:after{border-radius:50%}.ux-select.-checkbox .ux-select-group__elem:after{border-radius:var(--uxs-option-styled-checkbox-outline-radius)}.ux-select.-image .ux-select-group__elem{display:flex;flex-direction:row-reverse;align-items:center;justify-content:flex-end;gap:.5rem}.ux-select-group__elem.-disabled{cursor:not-allowed;color:var(--uxs-option-disabled-color)}.ux-select-group__elem:not(.-disabled):hover{background-color:var(--uxs-option-hovered-bg-color)}.ux-select.-radio .ux-select-group__elem:not(.-disabled):hover:after,.ux-select.-checkbox .ux-select-group__elem:not(.-disabled):hover:after{border:var(--uxs-option-styled-border-width) solid var(--uxs-option-hovered-bg-color)}.ux-select-group__elem:not(.-disabled).-selected{font-weight:700;background-color:var(--uxs-option-selected-bg-color)}.ux-select:not(.-multiple) .ux-select-group__elem:not(.-disabled).-selected{cursor:default}.ux-select.-radio .ux-select-group__elem.-selected:after,.ux-select.-checkbox .ux-select-group__elem.-selected:after{border:var(--uxs-option-styled-border-width) solid var(--uxs-option-hovered-bg-color);background-color:var(--uxs-option-styled-background-color)} diff --git a/dist/js/ux-select.es.js b/dist/js/ux-select.es.js index b093afa..4fd812f 100644 --- a/dist/js/ux-select.es.js +++ b/dist/js/ux-select.es.js @@ -1,6 +1,6 @@ var d = Object.defineProperty; -var h = (c, t, e) => t in c ? d(c, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : c[t] = e; -var a = (c, t, e) => (h(c, typeof t != "symbol" ? t + "" : t, e), e); +var h = (c, t, s) => t in c ? d(c, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : c[t] = s; +var a = (c, t, s) => (h(c, typeof t != "symbol" ? t + "" : t, s), s); function u(c) { const t = new Event("change"); c.dispatchEvent(t); @@ -10,7 +10,7 @@ function p(c) { c.dispatchEvent(t); } class x { - constructor(t, e = {}) { + constructor(t, s = {}) { a(this, "el"); a(this, "config"); a(this, "localization"); @@ -22,136 +22,137 @@ class x { a(this, "uxSearchInput"); a(this, "uxClearButton"); this.el = t, this.config = { - isSearchable: e.isSearchable ?? !1, - isSearchFocus: e.isSearchFocus ?? !1, - isGroupOptions: e.isGroupOptions ?? !1, - hideOnClear: e.hideOnClear ?? !0, - hideOnSelect: e.hideOnSelect ?? !1, - optionStyle: e.optionStyle ?? "default", - closeButton: e.closeButton ?? !0 + isSearchable: s.isSearchable ?? !1, + isSearchFocus: s.isSearchFocus ?? !1, + isGroupOptions: s.isGroupOptions ?? !1, + hideOnClear: s.hideOnClear ?? !0, + hideOnSelect: s.hideOnSelect ?? !1, + optionStyle: s.optionStyle ?? "default", + closeButton: s.closeButton ?? !0 }, this.localization = { - placeholder: this.el.dataset.placeholder ?? e.placeholder ?? "Select an option", - searchText: this.el.dataset.searchText ?? e.searchText ?? "Search", - clearText: this.el.dataset.clearText ?? e.clearText ?? "Clear option(s)", - selectedText: this.el.dataset.selectedText ?? e.selectedText ?? "Selected:" + placeholder: this.el.dataset.placeholder ?? s.placeholder ?? "Select an option", + searchText: this.el.dataset.searchText ?? s.searchText ?? "Search", + clearText: this.el.dataset.clearText ?? s.clearText ?? "Clear option(s)", + selectedText: this.el.dataset.selectedText ?? s.selectedText ?? "Selected:" }, this.state = { multiple: this.el.multiple, disabled: this.el.disabled }, this.options = this.extractOptions(), this.groups = this.extractGroups(), this.uxEl = this.create(), this.setSelectState(), this.bindEvents(); } extractOptions(t = !1) { - const e = this.el.options, o = this.config.isGroupOptions, s = []; - for (const i of e) { - if (i.value === "") + const s = this.el.options, i = this.config.isGroupOptions, l = []; + for (const e of s) { + if (e.value === "") continue; - let l = "empty"; - o && i.dataset.uxSelectGroup && (l = i.dataset.uxSelectGroup); - let n; - t && (n = this.uxEl.querySelector(`.ux-select-group__elem[data-value='${i.value}']`)); + let n = "empty"; + i && e.dataset.uxSelectGroup && (n = e.dataset.uxSelectGroup); + let o; + t && (o = this.uxEl.querySelector(`.ux-select-group__elem[data-value='${e.value}']`)); let r; - this.config.optionStyle === "image" && i.dataset.imageSrc && (r = { - src: i.dataset.imageSrc, - srcset: i.dataset.imageSrcset ?? void 0, - alt: i.dataset.imageAlt ?? "", - width: i.dataset.imageWidth ? Number(i.dataset.imageWidth) : 24, - height: i.dataset.imageHeight ? Number(i.dataset.imageHeight) : 24 - }), s.push({ + this.config.optionStyle === "image" && e.dataset.imageSrc && (r = { + src: e.dataset.imageSrc, + srcset: e.dataset.imageSrcset ?? void 0, + alt: e.dataset.imageAlt ?? "", + width: e.dataset.imageWidth ? Number(e.dataset.imageWidth) : 24, + height: e.dataset.imageHeight ? Number(e.dataset.imageHeight) : 24 + }), l.push({ attributes: { - selected: i.selected, - disabled: i.disabled, - group: l + selected: e.selected, + disabled: e.disabled, + group: n }, data: { - text: i.textContent ? i.textContent.trim() : "", - value: i.value + text: e.textContent ? e.textContent.trim() : "", + value: e.value }, image: r, - element: i, - uxOption: n + element: e, + uxOption: o }); } - return s; + return l; } extractGroups() { - const t = this.el.options, e = this.config.isGroupOptions, o = /* @__PURE__ */ new Set(); - for (const s of t) { - if (s.value === "") + const t = this.el.options, s = this.config.isGroupOptions, i = /* @__PURE__ */ new Set(); + for (const l of t) { + if (l.value === "") continue; - let i = "empty"; - e && s.dataset.uxSelectGroup && (i = s.dataset.uxSelectGroup), o.add(i); + let e = "empty"; + s && l.dataset.uxSelectGroup && (e = l.dataset.uxSelectGroup), i.add(e); } - return Array.from(o); + return Array.from(i); } setSelectState() { - const t = this.uxEl.querySelector(".ux-select__title"), e = this.options.reduce((o, s) => (s.attributes.selected && o.push(s.data.text), o), []); - if (e.length > 0 ? (e.length === 1 ? t.textContent = e[0] : this.state.multiple && (t.textContent = `${this.localization.selectedText} ${e.length}`), this.uxEl.classList.add("-filled")) : (t.textContent = this.localization.placeholder, this.uxEl.classList.remove("-filled")), this.config.isGroupOptions) - for (const o of this.groups) { - const s = this.uxEl.querySelector(`[data-ux-group="${o}"]`); - if (!s) + const t = this.uxEl.querySelector(".ux-select__title"), s = this.options.reduce((i, l) => (l.attributes.selected && i.push(l.data.text), i), []); + if (s.length > 0 ? (s.length === 1 ? t.textContent = s[0] : this.state.multiple && (t.textContent = `${this.localization.selectedText} ${s.length}`), this.uxEl.classList.add("-filled")) : (t.textContent = this.localization.placeholder, this.uxEl.classList.remove("-filled")), this.config.isGroupOptions) + for (const i of this.groups) { + const l = this.uxEl.querySelector(`[data-ux-group="${i}"]`); + if (!l) continue; - const i = s.querySelector(".ux-select-group__list"); - if (!i) + const e = l.querySelector(".ux-select-group__list"); + if (!e) continue; - const n = Array.from(i.querySelectorAll(".ux-select-group__elem")).every((r) => { + const o = Array.from(e.querySelectorAll(".ux-select-group__elem")).every((r) => { r.classList.contains("-disabled"); }); - s.classList.toggle("-disabled", n); + l.classList.toggle("-disabled", o); } } createGroupElement(t) { - const e = document.createElement("div"); - if (e.classList.add("ux-select__group", "ux-select-group"), e.dataset.uxGroup = t, t === "empty") - e.classList.add("-empty"); + const s = document.createElement("div"); + if (s.classList.add("ux-select__group", "ux-select-group"), s.dataset.uxGroup = t, t === "empty") + s.classList.add("-empty"); else { - const s = document.createElement("div"); - s.classList.add("ux-select-group__title"), s.textContent = t, e.appendChild(s); + const l = document.createElement("div"); + l.classList.add("ux-select-group__title"), l.textContent = t, s.appendChild(l); } - const o = document.createElement("ul"); - return o.classList.add("ux-select-group__list"), e.appendChild(o), e; + const i = document.createElement("ul"); + return i.classList.add("ux-select-group__list"), s.appendChild(i), s; } createGroupAndOptions() { const t = document.createElement("div"); t.classList.add("ux-select__dropdown"); - const e = document.createDocumentFragment(), o = {}; - for (const s of this.groups) { - const i = this.createGroupElement(s); - e.appendChild(i), o[s] = document.createDocumentFragment(); + const s = document.createDocumentFragment(), i = {}; + for (const e of this.groups) { + const n = this.createGroupElement(e); + s.appendChild(n), i[e] = document.createDocumentFragment(); } - t.appendChild(e); - for (const s of this.options) { - const i = document.createElement("li"); - if (i.classList.add("ux-select-group__elem"), i.dataset.value = s.data.value, i.textContent = s.data.text, s.attributes.selected && i.classList.add("-selected"), s.attributes.disabled && i.classList.add("-disabled"), this.config.optionStyle === "image" && s.image) { - const l = document.createElement("img"); - l.classList.add("ux-select-group-elem__image"), l.src = s.image.src, l.width = s.image.width, l.height = s.image.height, l.alt = s.image.alt, s.image.srcset && (l.srcset = `${s.image.src} 1x, ${s.image.srcset} 2x`), i.appendChild(l); + t.appendChild(s); + for (const e of this.options) { + const n = document.createElement("li"); + if (n.classList.add("ux-select-group__elem"), n.dataset.value = e.data.value, n.textContent = e.data.text, e.attributes.selected && n.classList.add("-selected"), e.attributes.disabled && n.classList.add("-disabled"), this.config.optionStyle === "image" && e.image) { + const o = document.createElement("img"); + o.classList.add("ux-select-group-elem__image"), o.src = e.image.src, o.width = e.image.width, o.height = e.image.height, o.alt = e.image.alt, e.image.srcset && (o.srcset = `${e.image.src} 1x, ${e.image.srcset} 2x`), n.appendChild(o); } - i.addEventListener("click", this.onClickOption.bind(this)), o[s.attributes.group].appendChild(i), s.uxOption = i; + n.addEventListener("click", this.onClickOption.bind(this)), i[e.attributes.group].appendChild(n), e.uxOption = n; } - for (const s of this.groups) { - const i = o[s], l = t.querySelector(`[data-ux-group="${s}"] .ux-select-group__list`); - l && l.appendChild(i); + for (const e of this.groups) { + const n = i[e], o = t.querySelector(`[data-ux-group="${e}"] .ux-select-group__list`); + o && o.appendChild(n); } if (!this.uxBody) throw new Error("uxBody is undefined"); - this.uxBody.childNodes[1] ? this.uxBody.replaceChild(t, this.uxBody.childNodes[1]) : this.uxBody.appendChild(t); + const l = this.config.isSearchable ? 1 : 0; + this.uxBody.childNodes[l] ? this.uxBody.replaceChild(t, this.uxBody.childNodes[l]) : this.uxBody.appendChild(t); } create() { const t = document.createElement("div"); t.classList.add("ux-select__head"); - const e = document.createElement("div"); - if (e.classList.add("ux-select__title"), e.textContent = this.localization.placeholder, t.appendChild(e), this.config.closeButton) { - const l = document.createElement("button"); - l.type = "button", l.classList.add("ux-select__clear"), l.title = this.localization.clearText, this.uxClearButton = l, t.appendChild(l); + const s = document.createElement("div"); + if (s.classList.add("ux-select__title"), s.textContent = this.localization.placeholder, t.appendChild(s), this.config.closeButton) { + const n = document.createElement("button"); + n.type = "button", n.classList.add("ux-select__clear"), n.title = this.localization.clearText, this.uxClearButton = n, t.appendChild(n); } - const o = document.createElement("div"); - if (o.classList.add("ux-select__body"), this.uxBody = o, this.config.isSearchable) { - const l = document.createElement("div"); - l.classList.add("ux-select__search"); - const n = document.createElement("input"); - n.type = "search", n.classList.add("ux-select-search__input"), n.placeholder = this.localization.searchText, this.uxSearchInput = n, l.appendChild(n), o.appendChild(l); + const i = document.createElement("div"); + if (i.classList.add("ux-select__body"), this.uxBody = i, this.config.isSearchable) { + const n = document.createElement("div"); + n.classList.add("ux-select__search"); + const o = document.createElement("input"); + o.type = "search", o.classList.add("ux-select-search__input"), o.placeholder = this.localization.searchText, this.uxSearchInput = o, n.appendChild(o), i.appendChild(n); } this.createGroupAndOptions(); - const s = document.createElement("div"), i = ["ux-select", this.el.classList]; - return this.state.multiple && i.push("-multiple"), this.state.disabled && i.push("-disabled"), this.config.optionStyle !== "default" && i.push(`-${this.config.optionStyle}`), s.className = i.join(" "), s.append(t, o), this.el.style.display = "none", this.el.insertAdjacentElement("afterend", s), this.el.nextElementSibling; + const l = document.createElement("div"), e = ["ux-select", this.el.classList]; + return this.state.multiple && e.push("-multiple"), this.state.disabled && e.push("-disabled"), this.config.optionStyle !== "default" && e.push(`-${this.config.optionStyle}`), l.className = e.join(" "), l.append(t, i), this.el.style.display = "none", this.el.insertAdjacentElement("afterend", l), this.el.nextElementSibling; } enable() { this.state.disabled && (this.el.disabled = !1, this.uxEl.classList.remove("-disabled"), this.state.disabled = !1); @@ -164,8 +165,8 @@ class x { * @param {Boolean} [isTriggerChange] Skip triggering "change" event */ update(t = !0) { - const e = JSON.stringify(this.options); - this.options = this.extractOptions(!0), this.groups = this.extractGroups(), e !== JSON.stringify(this.options) && this.createGroupAndOptions(), this.setSelectState(), this.el.disabled ? this.disable() : this.enable(), t && u(this.el); + const s = JSON.stringify(this.options); + this.options = this.extractOptions(!0), this.groups = this.extractGroups(), s !== JSON.stringify(this.options) && this.createGroupAndOptions(), this.setSelectState(), this.el.disabled ? this.disable() : this.enable(), t && u(this.el); } clear() { for (const t of this.options) @@ -177,8 +178,8 @@ class x { } onToggleShown(t) { t.preventDefault(); - const e = t.target; - if (!this.state.disabled && !(this.uxClearButton && t.target === this.uxClearButton) && !(this.uxBody && this.uxBody.contains(e))) { + const s = t.target; + if (!this.state.disabled && !(this.uxClearButton && t.target === this.uxClearButton) && !(this.uxBody && this.uxBody.contains(s))) { if (this.uxEl.classList.contains("-shown")) { this.uxEl.classList.remove("-shown"); return; @@ -187,8 +188,8 @@ class x { } } onClickOutside(t) { - const e = t.target; - this.uxEl.contains(e) || this.uxEl.classList.remove("-shown"); + const s = t.target; + this.uxEl.contains(s) || this.uxEl.classList.remove("-shown"); } onClickClear(t) { if (t.preventDefault(), !this.state.disabled) @@ -196,16 +197,16 @@ class x { } onClickOption(t) { t.preventDefault(); - const e = t.target; - if (!e.classList.contains("-disabled") && !(!this.state.multiple && e.classList.contains("-selected"))) { + const s = t.target; + if (!s.classList.contains("-disabled") && !(!this.state.multiple && s.classList.contains("-selected"))) { if (this.state.multiple) { t.stopPropagation(); - const o = this.options.find((s) => s.uxOption === e); - o && o.uxOption && (o.attributes.selected = !o.attributes.selected, o.element.selected = o.attributes.selected, o.uxOption.classList.toggle("-selected")); + const i = this.options.find((l) => l.uxOption === s); + i && i.uxOption && (i.attributes.selected = !i.attributes.selected, i.element.selected = i.attributes.selected, i.uxOption.classList.toggle("-selected")); } else - for (const o of this.options) { - const s = o.uxOption === e; - o.attributes.selected = s, o.element.selected = s, o.uxOption && o.uxOption.classList.toggle("-selected", s); + for (const i of this.options) { + const l = i.uxOption === s; + i.attributes.selected = l, i.element.selected = l, i.uxOption && i.uxOption.classList.toggle("-selected", l); } return this.config.hideOnSelect && this.uxEl.classList.remove("-shown"), this.update(); } @@ -213,25 +214,25 @@ class x { onSearch(t) { if (t.target === null) return; - const o = t.target.value.toLowerCase(), s = o.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), i = this.uxEl.querySelectorAll(".ux-select-group"); - if (o === "") { - for (const n of this.options) - n.uxOption && (n.uxOption.style.display = ""); + const i = t.target.value.toLowerCase(), l = i.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), e = this.uxEl.querySelectorAll(".ux-select-group"); + if (i === "") { + for (const o of this.options) + o.uxOption && (o.uxOption.style.display = ""); if (this.config.isGroupOptions) - for (const n of i) - n.style.display = ""; + for (const o of e) + o.style.display = ""; return; } - const l = new RegExp(s); - for (const n of this.options) { - const r = l.test(n.data.text.toLowerCase()); - n.uxOption && (n.uxOption.style.display = r ? "" : "none"); + const n = new RegExp(l); + for (const o of this.options) { + const r = n.test(o.data.text.toLowerCase()); + o.uxOption && (o.uxOption.style.display = r ? "" : "none"); } if (this.config.isGroupOptions) - for (const n of i) { - n.style.display = ""; - const r = n.querySelector(".ux-select-group__list"); - r && (n.style.display = r.clientHeight !== 0 ? "" : "none"); + for (const o of e) { + o.style.display = ""; + const r = o.querySelector(".ux-select-group__list"); + r && (o.style.display = r.clientHeight !== 0 ? "" : "none"); } p(this.el); } diff --git a/dist/js/ux-select.es.js.map b/dist/js/ux-select.es.js.map index 11d417e..9d38bfb 100644 --- a/dist/js/ux-select.es.js.map +++ b/dist/js/ux-select.es.js.map @@ -1 +1 @@ -{"version":3,"file":"ux-select.es.js","sources":["../../src/utils/events/triggerChange.ts","../../src/utils/events/triggerInput.ts","../../src/ux-select.ts"],"sourcesContent":["export default function triggerChange(el: HTMLElement): void {\n const change: Event = new Event('change');\n el.dispatchEvent(change);\n}\n","export default function triggerInput(el: HTMLElement): void {\n const input: Event = new Event('input');\n el.dispatchEvent(input);\n}\n","import './scss/ux-select.scss';\n\nimport { UxSelectParams, UxSelectOptions, UxSelectConfig, UxSelectLocalization, UxSelectState } from './types';\n\nimport triggerChange from './utils/events/triggerChange.ts';\nimport triggerInput from './utils/events/triggerInput.ts';\n\n/**\n * @class\n * @classdesc Creating a custom select element with support for grouping, searching, and other features.\n * @param {HTMLSelectElement} element - The original HTML element to be transformed.\n * @param {Partial} [params={}] - Optional parameters for configuring the behavior and appearance of UxSelect.\n */\nexport default class UxSelect {\n el: HTMLSelectElement;\n\n config: UxSelectConfig;\n localization: UxSelectLocalization;\n state: UxSelectState;\n\n options: UxSelectOptions[];\n groups: string[];\n\n uxEl: Element;\n\n private uxBody: HTMLDivElement | undefined;\n private uxSearchInput: HTMLInputElement | undefined;\n private uxClearButton: HTMLButtonElement | undefined;\n\n constructor(element: HTMLSelectElement, params: UxSelectParams = {}) {\n this.el = element;\n\n this.config = {\n isSearchable: params.isSearchable ?? false,\n isSearchFocus: params.isSearchFocus ?? false,\n isGroupOptions: params.isGroupOptions ?? false,\n hideOnClear: params.hideOnClear ?? true,\n hideOnSelect: params.hideOnSelect ?? false,\n optionStyle: params.optionStyle ?? 'default',\n closeButton: params.closeButton ?? true,\n };\n this.localization = {\n placeholder: this.el.dataset.placeholder ?? params.placeholder ?? 'Select an option',\n searchText: this.el.dataset.searchText ?? params.searchText ?? 'Search',\n clearText: this.el.dataset.clearText ?? params.clearText ?? 'Clear option(s)',\n selectedText: this.el.dataset.selectedText ?? params.selectedText ?? 'Selected:',\n };\n this.state = {\n multiple: this.el.multiple,\n disabled: this.el.disabled,\n };\n\n this.options = this.extractOptions();\n this.groups = this.extractGroups();\n\n this.uxEl = this.create();\n\n this.setSelectState();\n this.bindEvents();\n }\n\n private extractOptions(isUpdate = false): UxSelectOptions[] {\n const options: HTMLOptionsCollection = this.el.options;\n const isGroupingEnabled = this.config.isGroupOptions;\n const optionsData: UxSelectOptions[] = [];\n\n for (const option of options) {\n if (option.value === '') continue;\n\n let group = 'empty';\n if (isGroupingEnabled && option.dataset.uxSelectGroup) {\n group = option.dataset.uxSelectGroup;\n }\n\n let uxOption = undefined;\n if (isUpdate) {\n uxOption = this.uxEl.querySelector(`.ux-select-group__elem[data-value='${option.value}']`);\n }\n\n let optionImage = undefined;\n if (this.config.optionStyle === 'image' && option.dataset.imageSrc) {\n optionImage = {\n src: option.dataset.imageSrc,\n srcset: option.dataset.imageSrcset ?? undefined,\n alt: option.dataset.imageAlt ?? '',\n width: option.dataset.imageWidth ? Number(option.dataset.imageWidth) : 24,\n height: option.dataset.imageHeight ? Number(option.dataset.imageHeight) : 24,\n };\n }\n\n optionsData.push({\n attributes: {\n selected: option.selected,\n disabled: option.disabled,\n group,\n },\n data: {\n text: option.textContent ? option.textContent.trim() : '',\n value: option.value,\n },\n image: optionImage,\n element: option,\n uxOption,\n });\n }\n\n return optionsData;\n }\n\n private extractGroups(): string[] {\n const options: HTMLOptionsCollection = this.el.options;\n const isGroupingEnabled = this.config.isGroupOptions;\n const uniqueGroups = new Set();\n\n for (const option of options) {\n if (option.value === '') continue;\n\n let group = 'empty';\n if (isGroupingEnabled && option.dataset.uxSelectGroup) {\n group = option.dataset.uxSelectGroup;\n }\n uniqueGroups.add(group);\n }\n\n return Array.from(uniqueGroups);\n }\n\n private setSelectState(): void {\n const selectTitle = this.uxEl.querySelector('.ux-select__title') as Element;\n\n const selectedTexts = this.options.reduce((acc, item) => {\n if (item.attributes.selected) acc.push(item.data.text);\n return acc;\n }, []);\n\n if (selectedTexts.length > 0) {\n if (selectedTexts.length === 1) {\n selectTitle.textContent = selectedTexts[0];\n } else if (this.state.multiple) {\n selectTitle.textContent = `${this.localization.selectedText} ${selectedTexts.length}`;\n }\n this.uxEl.classList.add('-filled');\n } else {\n selectTitle.textContent = this.localization.placeholder;\n this.uxEl.classList.remove('-filled');\n }\n\n if (this.config.isGroupOptions) {\n for (const group of this.groups) {\n const htmlGroup = this.uxEl.querySelector(`[data-ux-group=\"${group}\"]`);\n if (!htmlGroup) continue;\n\n const groupList = htmlGroup.querySelector('.ux-select-group__list');\n if (!groupList) continue;\n\n const groupElements = Array.from(groupList.querySelectorAll('.ux-select-group__elem'));\n const isAllDisabled = groupElements.every((elem) => {\n elem.classList.contains('-disabled');\n });\n htmlGroup.classList.toggle('-disabled', isAllDisabled);\n }\n }\n }\n\n private createGroupElement(group: string): HTMLElement {\n const selectGroup = document.createElement('div');\n selectGroup.classList.add('ux-select__group', 'ux-select-group');\n selectGroup.dataset.uxGroup = group;\n\n if (group === 'empty') {\n selectGroup.classList.add('-empty');\n } else {\n const selectGroupTitle = document.createElement('div');\n selectGroupTitle.classList.add('ux-select-group__title');\n selectGroupTitle.textContent = group;\n selectGroup.appendChild(selectGroupTitle);\n }\n\n const selectGroupList = document.createElement('ul');\n selectGroupList.classList.add('ux-select-group__list');\n selectGroup.appendChild(selectGroupList);\n\n return selectGroup;\n }\n\n private createGroupAndOptions() {\n const selectList = document.createElement('div');\n selectList.classList.add('ux-select__dropdown');\n\n const groupFragment = document.createDocumentFragment();\n const optionsFragmentsByGroup: { [key: string]: DocumentFragment } = {};\n\n for (const group of this.groups) {\n const selectGroup = this.createGroupElement(group);\n groupFragment.appendChild(selectGroup);\n\n optionsFragmentsByGroup[group] = document.createDocumentFragment();\n }\n\n selectList.appendChild(groupFragment);\n\n for (const option of this.options) {\n const selectListElem = document.createElement('li');\n selectListElem.classList.add('ux-select-group__elem');\n selectListElem.dataset.value = option.data.value;\n selectListElem.textContent = option.data.text;\n\n if (option.attributes.selected) {\n selectListElem.classList.add('-selected');\n }\n\n if (option.attributes.disabled) {\n selectListElem.classList.add('-disabled');\n }\n\n if (this.config.optionStyle === 'image' && option.image) {\n const optionImageElem = document.createElement('img');\n optionImageElem.classList.add('ux-select-group-elem__image');\n optionImageElem.src = option.image.src;\n optionImageElem.width = option.image.width;\n optionImageElem.height = option.image.height;\n optionImageElem.alt = option.image.alt;\n\n if (option.image.srcset) {\n optionImageElem.srcset = `${option.image.src} 1x, ${option.image.srcset} 2x`;\n }\n\n selectListElem.appendChild(optionImageElem);\n }\n\n selectListElem.addEventListener('click', this.onClickOption.bind(this));\n\n optionsFragmentsByGroup[option.attributes.group].appendChild(selectListElem);\n\n option.uxOption = selectListElem;\n }\n\n for (const group of this.groups) {\n const fragment = optionsFragmentsByGroup[group];\n const selectGroupList = selectList.querySelector(`[data-ux-group=\"${group}\"] .ux-select-group__list`);\n\n if (selectGroupList) selectGroupList.appendChild(fragment);\n }\n\n if (!this.uxBody) throw new Error('uxBody is undefined');\n\n const replacementChildIndex = this.config.isSearchable ? 1 : 0;\n if (this.uxBody.childNodes[replacementChildIndex]) {\n this.uxBody.replaceChild(selectList, this.uxBody.childNodes[replacementChildIndex]);\n } else {\n this.uxBody.appendChild(selectList);\n }\n }\n\n private create(): Element {\n /** Create select head */\n const selectHead = document.createElement('div');\n selectHead.classList.add('ux-select__head');\n\n const selectTitle = document.createElement('div');\n selectTitle.classList.add('ux-select__title');\n selectTitle.textContent = this.localization.placeholder;\n selectHead.appendChild(selectTitle);\n\n if (this.config.closeButton) {\n const selectClear = document.createElement('button');\n selectClear.type = 'button';\n selectClear.classList.add('ux-select__clear');\n selectClear.title = this.localization.clearText;\n this.uxClearButton = selectClear;\n selectHead.appendChild(selectClear);\n }\n\n /** Create body */\n const selectBody = document.createElement('div');\n selectBody.classList.add('ux-select__body');\n this.uxBody = selectBody;\n\n if (this.config.isSearchable) {\n const selectSearchWrap = document.createElement('div');\n selectSearchWrap.classList.add('ux-select__search');\n\n const selectSearch = document.createElement('input');\n selectSearch.type = 'search';\n selectSearch.classList.add('ux-select-search__input');\n selectSearch.placeholder = this.localization.searchText;\n this.uxSearchInput = selectSearch;\n\n selectSearchWrap.appendChild(selectSearch);\n selectBody.appendChild(selectSearchWrap);\n }\n\n this.createGroupAndOptions();\n\n /** Create select element */\n const select = document.createElement('div');\n\n /** Create class list for select element */\n const classes = ['ux-select', this.el.classList];\n if (this.state.multiple) classes.push('-multiple');\n if (this.state.disabled) classes.push('-disabled');\n if (this.config.optionStyle !== 'default') {\n classes.push(`-${this.config.optionStyle}`);\n }\n select.className = classes.join(' ');\n\n select.append(selectHead, selectBody);\n\n this.el.style.display = 'none';\n this.el.insertAdjacentElement('afterend', select);\n\n return this.el.nextElementSibling as Element;\n }\n\n enable(): void {\n if (this.state.disabled) {\n this.el.disabled = false;\n this.uxEl.classList.remove('-disabled');\n this.state.disabled = false;\n }\n }\n\n disable(): void {\n if (!this.state.disabled) {\n this.el.disabled = true;\n this.uxEl.classList.add('-disabled');\n this.state.disabled = true;\n }\n }\n\n /**\n *\n * @param {Boolean} [isTriggerChange] Skip triggering \"change\" event\n */\n update(isTriggerChange: boolean = true): void {\n const originalOptions = JSON.stringify(this.options);\n\n this.options = this.extractOptions(true);\n this.groups = this.extractGroups();\n\n if (originalOptions !== JSON.stringify(this.options)) {\n this.createGroupAndOptions();\n }\n\n this.setSelectState();\n\n this.el.disabled ? this.disable() : this.enable();\n\n if (isTriggerChange) triggerChange(this.el);\n }\n\n clear(): void {\n for (const option of this.options) {\n if (!option.attributes.selected) continue;\n\n option.attributes.selected = false;\n option.element.selected = false;\n if (option.uxOption) option.uxOption.classList.remove('-selected');\n }\n\n this.setSelectState();\n\n triggerChange(this.el);\n }\n\n destroy(): void {\n this.uxEl.remove();\n this.el.style.display = '';\n }\n\n private onToggleShown(e: Event): void {\n e.preventDefault();\n const targetEl = e.target as HTMLElement;\n\n if (this.state.disabled) return;\n if (this.uxClearButton && e.target === this.uxClearButton) return;\n if (this.uxBody && this.uxBody.contains(targetEl)) return;\n\n if (this.uxEl.classList.contains('-shown')) {\n this.uxEl.classList.remove('-shown');\n return;\n }\n\n this.uxEl.classList.add('-shown');\n if (this.config.isSearchable && this.uxSearchInput) {\n this.uxSearchInput.value = '';\n this.uxSearchInput.dispatchEvent(new Event('input'));\n if (this.config.isSearchFocus) this.uxSearchInput.focus();\n }\n }\n\n private onClickOutside(e: Event): void {\n const targetEl = e.target as HTMLElement;\n if (!this.uxEl.contains(targetEl)) {\n this.uxEl.classList.remove('-shown');\n }\n }\n\n private onClickClear(e: Event): void {\n e.preventDefault();\n\n if (this.state.disabled) return;\n\n if (this.config.hideOnClear) this.uxEl.classList.remove('-shown');\n\n return this.clear();\n }\n\n private onClickOption(e: Event): void {\n e.preventDefault();\n\n const uxOption = e.target as HTMLElement;\n if (uxOption.classList.contains('-disabled')) return;\n if (!this.state.multiple && uxOption.classList.contains('-selected')) {\n return;\n }\n\n if (this.state.multiple) {\n e.stopPropagation();\n\n const matchingOption = this.options.find((option) => {\n return option.uxOption === uxOption;\n });\n\n if (matchingOption && matchingOption.uxOption) {\n matchingOption.attributes.selected = !matchingOption.attributes.selected;\n matchingOption.element.selected = matchingOption.attributes.selected;\n\n matchingOption.uxOption.classList.toggle('-selected');\n }\n } else {\n for (const option of this.options) {\n const isSelected = option.uxOption === uxOption;\n option.attributes.selected = isSelected;\n option.element.selected = isSelected;\n\n if (option.uxOption) {\n option.uxOption.classList.toggle('-selected', isSelected);\n }\n }\n }\n\n if (this.config.hideOnSelect) this.uxEl.classList.remove('-shown');\n\n return this.update();\n }\n\n private onSearch(e: Event): void {\n if (e.target === null) return;\n\n const input = e.target as HTMLInputElement;\n const text = input.value.toLowerCase();\n const escapedText = text.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&');\n const groups: NodeListOf = this.uxEl.querySelectorAll('.ux-select-group');\n\n if (text === '') {\n for (const option of this.options) {\n if (option.uxOption) option.uxOption.style.display = '';\n }\n\n if (this.config.isGroupOptions) {\n for (const group of groups) {\n group.style.display = '';\n }\n }\n\n return;\n }\n\n const searchValue = new RegExp(escapedText);\n\n for (const option of this.options) {\n const match = searchValue.test(option.data.text.toLowerCase());\n if (option.uxOption) option.uxOption.style.display = match ? '' : 'none';\n }\n\n if (this.config.isGroupOptions) {\n for (const group of groups) {\n group.style.display = '';\n\n const groupList = group.querySelector('.ux-select-group__list');\n if (groupList) {\n group.style.display = groupList.clientHeight !== 0 ? '' : 'none';\n }\n }\n }\n\n triggerInput(this.el);\n }\n\n private bindEvents(): void {\n this.uxEl.addEventListener('click', this.onToggleShown.bind(this));\n\n if (this.uxClearButton) {\n this.uxClearButton.addEventListener('click', this.onClickClear.bind(this));\n }\n\n window.addEventListener('click', this.onClickOutside.bind(this));\n\n if (this.config.isSearchable && this.uxSearchInput) {\n this.uxSearchInput.addEventListener('input', this.onSearch.bind(this));\n }\n }\n}\n"],"names":["triggerChange","el","change","triggerInput","input","UxSelect","element","params","__publicField","isUpdate","options","isGroupingEnabled","optionsData","option","group","uxOption","optionImage","uniqueGroups","selectTitle","selectedTexts","acc","item","htmlGroup","groupList","isAllDisabled","elem","selectGroup","selectGroupTitle","selectGroupList","selectList","groupFragment","optionsFragmentsByGroup","selectListElem","optionImageElem","fragment","replacementChildIndex","selectHead","selectClear","selectBody","selectSearchWrap","selectSearch","select","classes","isTriggerChange","originalOptions","e","targetEl","matchingOption","isSelected","text","escapedText","groups","searchValue","match"],"mappings":"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"} \ No newline at end of file diff --git a/dist/js/ux-select.iife.js b/dist/js/ux-select.iife.js index dce4c04..7c3b9d3 100644 --- a/dist/js/ux-select.iife.js +++ b/dist/js/ux-select.iife.js @@ -1,2 +1,2 @@ -var f=Object.defineProperty;var x=(d,c,r)=>c in d?f(d,c,{enumerable:!0,configurable:!0,writable:!0,value:r}):d[c]=r;var a=(d,c,r)=>(x(d,typeof c!="symbol"?c+"":c,r),r);this["ux-select"]=function(){"use strict";const d="";function c(h){const t=new Event("change");h.dispatchEvent(t)}function r(h){const t=new Event("input");h.dispatchEvent(t)}class p{constructor(t,s={}){a(this,"el");a(this,"config");a(this,"localization");a(this,"state");a(this,"options");a(this,"groups");a(this,"uxEl");a(this,"uxBody");a(this,"uxSearchInput");a(this,"uxClearButton");this.el=t,this.config={isSearchable:s.isSearchable??!1,isSearchFocus:s.isSearchFocus??!1,isGroupOptions:s.isGroupOptions??!1,hideOnClear:s.hideOnClear??!0,hideOnSelect:s.hideOnSelect??!1,optionStyle:s.optionStyle??"default",closeButton:s.closeButton??!0},this.localization={placeholder:this.el.dataset.placeholder??s.placeholder??"Select an option",searchText:this.el.dataset.searchText??s.searchText??"Search",clearText:this.el.dataset.clearText??s.clearText??"Clear option(s)",selectedText:this.el.dataset.selectedText??s.selectedText??"Selected:"},this.state={multiple:this.el.multiple,disabled:this.el.disabled},this.options=this.extractOptions(),this.groups=this.extractGroups(),this.uxEl=this.create(),this.setSelectState(),this.bindEvents()}extractOptions(t=!1){const s=this.el.options,o=this.config.isGroupOptions,e=[];for(const i of s){if(i.value==="")continue;let l="empty";o&&i.dataset.uxSelectGroup&&(l=i.dataset.uxSelectGroup);let n;t&&(n=this.uxEl.querySelector(`.ux-select-group__elem[data-value='${i.value}']`));let u;this.config.optionStyle==="image"&&i.dataset.imageSrc&&(u={src:i.dataset.imageSrc,srcset:i.dataset.imageSrcset??void 0,alt:i.dataset.imageAlt??"",width:i.dataset.imageWidth?Number(i.dataset.imageWidth):24,height:i.dataset.imageHeight?Number(i.dataset.imageHeight):24}),e.push({attributes:{selected:i.selected,disabled:i.disabled,group:l},data:{text:i.textContent?i.textContent.trim():"",value:i.value},image:u,element:i,uxOption:n})}return e}extractGroups(){const t=this.el.options,s=this.config.isGroupOptions,o=new Set;for(const e of t){if(e.value==="")continue;let i="empty";s&&e.dataset.uxSelectGroup&&(i=e.dataset.uxSelectGroup),o.add(i)}return Array.from(o)}setSelectState(){const t=this.uxEl.querySelector(".ux-select__title"),s=this.options.reduce((o,e)=>(e.attributes.selected&&o.push(e.data.text),o),[]);if(s.length>0?(s.length===1?t.textContent=s[0]:this.state.multiple&&(t.textContent=`${this.localization.selectedText} ${s.length}`),this.uxEl.classList.add("-filled")):(t.textContent=this.localization.placeholder,this.uxEl.classList.remove("-filled")),this.config.isGroupOptions)for(const o of this.groups){const e=this.uxEl.querySelector(`[data-ux-group="${o}"]`);if(!e)continue;const i=e.querySelector(".ux-select-group__list");if(!i)continue;const n=Array.from(i.querySelectorAll(".ux-select-group__elem")).every(u=>{u.classList.contains("-disabled")});e.classList.toggle("-disabled",n)}}createGroupElement(t){const s=document.createElement("div");if(s.classList.add("ux-select__group","ux-select-group"),s.dataset.uxGroup=t,t==="empty")s.classList.add("-empty");else{const e=document.createElement("div");e.classList.add("ux-select-group__title"),e.textContent=t,s.appendChild(e)}const o=document.createElement("ul");return o.classList.add("ux-select-group__list"),s.appendChild(o),s}createGroupAndOptions(){const t=document.createElement("div");t.classList.add("ux-select__dropdown");const s=document.createDocumentFragment(),o={};for(const e of this.groups){const i=this.createGroupElement(e);s.appendChild(i),o[e]=document.createDocumentFragment()}t.appendChild(s);for(const e of this.options){const i=document.createElement("li");if(i.classList.add("ux-select-group__elem"),i.dataset.value=e.data.value,i.textContent=e.data.text,e.attributes.selected&&i.classList.add("-selected"),e.attributes.disabled&&i.classList.add("-disabled"),this.config.optionStyle==="image"&&e.image){const l=document.createElement("img");l.classList.add("ux-select-group-elem__image"),l.src=e.image.src,l.width=e.image.width,l.height=e.image.height,l.alt=e.image.alt,e.image.srcset&&(l.srcset=`${e.image.src} 1x, ${e.image.srcset} 2x`),i.appendChild(l)}i.addEventListener("click",this.onClickOption.bind(this)),o[e.attributes.group].appendChild(i),e.uxOption=i}for(const e of this.groups){const i=o[e],l=t.querySelector(`[data-ux-group="${e}"] .ux-select-group__list`);l&&l.appendChild(i)}if(!this.uxBody)throw new Error("uxBody is undefined");this.uxBody.childNodes[1]?this.uxBody.replaceChild(t,this.uxBody.childNodes[1]):this.uxBody.appendChild(t)}create(){const t=document.createElement("div");t.classList.add("ux-select__head");const s=document.createElement("div");if(s.classList.add("ux-select__title"),s.textContent=this.localization.placeholder,t.appendChild(s),this.config.closeButton){const l=document.createElement("button");l.type="button",l.classList.add("ux-select__clear"),l.title=this.localization.clearText,this.uxClearButton=l,t.appendChild(l)}const o=document.createElement("div");if(o.classList.add("ux-select__body"),this.uxBody=o,this.config.isSearchable){const l=document.createElement("div");l.classList.add("ux-select__search");const n=document.createElement("input");n.type="search",n.classList.add("ux-select-search__input"),n.placeholder=this.localization.searchText,this.uxSearchInput=n,l.appendChild(n),o.appendChild(l)}this.createGroupAndOptions();const e=document.createElement("div"),i=["ux-select",this.el.classList];return this.state.multiple&&i.push("-multiple"),this.state.disabled&&i.push("-disabled"),this.config.optionStyle!=="default"&&i.push(`-${this.config.optionStyle}`),e.className=i.join(" "),e.append(t,o),this.el.style.display="none",this.el.insertAdjacentElement("afterend",e),this.el.nextElementSibling}enable(){this.state.disabled&&(this.el.disabled=!1,this.uxEl.classList.remove("-disabled"),this.state.disabled=!1)}disable(){this.state.disabled||(this.el.disabled=!0,this.uxEl.classList.add("-disabled"),this.state.disabled=!0)}update(t=!0){const s=JSON.stringify(this.options);this.options=this.extractOptions(!0),this.groups=this.extractGroups(),s!==JSON.stringify(this.options)&&this.createGroupAndOptions(),this.setSelectState(),this.el.disabled?this.disable():this.enable(),t&&c(this.el)}clear(){for(const t of this.options)t.attributes.selected&&(t.attributes.selected=!1,t.element.selected=!1,t.uxOption&&t.uxOption.classList.remove("-selected"));this.setSelectState(),c(this.el)}destroy(){this.uxEl.remove(),this.el.style.display=""}onToggleShown(t){t.preventDefault();const s=t.target;if(!this.state.disabled&&!(this.uxClearButton&&t.target===this.uxClearButton)&&!(this.uxBody&&this.uxBody.contains(s))){if(this.uxEl.classList.contains("-shown")){this.uxEl.classList.remove("-shown");return}this.uxEl.classList.add("-shown"),this.config.isSearchable&&this.uxSearchInput&&(this.uxSearchInput.value="",this.uxSearchInput.dispatchEvent(new Event("input")),this.config.isSearchFocus&&this.uxSearchInput.focus())}}onClickOutside(t){const s=t.target;this.uxEl.contains(s)||this.uxEl.classList.remove("-shown")}onClickClear(t){if(t.preventDefault(),!this.state.disabled)return this.config.hideOnClear&&this.uxEl.classList.remove("-shown"),this.clear()}onClickOption(t){t.preventDefault();const s=t.target;if(!s.classList.contains("-disabled")&&!(!this.state.multiple&&s.classList.contains("-selected"))){if(this.state.multiple){t.stopPropagation();const o=this.options.find(e=>e.uxOption===s);o&&o.uxOption&&(o.attributes.selected=!o.attributes.selected,o.element.selected=o.attributes.selected,o.uxOption.classList.toggle("-selected"))}else for(const o of this.options){const e=o.uxOption===s;o.attributes.selected=e,o.element.selected=e,o.uxOption&&o.uxOption.classList.toggle("-selected",e)}return this.config.hideOnSelect&&this.uxEl.classList.remove("-shown"),this.update()}}onSearch(t){if(t.target===null)return;const o=t.target.value.toLowerCase(),e=o.replace(/[.*+?^${}()|[\]\\]/g,"\\$&"),i=this.uxEl.querySelectorAll(".ux-select-group");if(o===""){for(const n of this.options)n.uxOption&&(n.uxOption.style.display="");if(this.config.isGroupOptions)for(const n of i)n.style.display="";return}const l=new RegExp(e);for(const n of this.options){const u=l.test(n.data.text.toLowerCase());n.uxOption&&(n.uxOption.style.display=u?"":"none")}if(this.config.isGroupOptions)for(const n of i){n.style.display="";const u=n.querySelector(".ux-select-group__list");u&&(n.style.display=u.clientHeight!==0?"":"none")}r(this.el)}bindEvents(){this.uxEl.addEventListener("click",this.onToggleShown.bind(this)),this.uxClearButton&&this.uxClearButton.addEventListener("click",this.onClickClear.bind(this)),window.addEventListener("click",this.onClickOutside.bind(this)),this.config.isSearchable&&this.uxSearchInput&&this.uxSearchInput.addEventListener("input",this.onSearch.bind(this))}}return p}(); +var f=Object.defineProperty;var x=(d,c,u)=>c in d?f(d,c,{enumerable:!0,configurable:!0,writable:!0,value:u}):d[c]=u;var a=(d,c,u)=>(x(d,typeof c!="symbol"?c+"":c,u),u);this["ux-select"]=function(){"use strict";const d="";function c(h){const e=new Event("change");h.dispatchEvent(e)}function u(h){const e=new Event("input");h.dispatchEvent(e)}class p{constructor(e,s={}){a(this,"el");a(this,"config");a(this,"localization");a(this,"state");a(this,"options");a(this,"groups");a(this,"uxEl");a(this,"uxBody");a(this,"uxSearchInput");a(this,"uxClearButton");this.el=e,this.config={isSearchable:s.isSearchable??!1,isSearchFocus:s.isSearchFocus??!1,isGroupOptions:s.isGroupOptions??!1,hideOnClear:s.hideOnClear??!0,hideOnSelect:s.hideOnSelect??!1,optionStyle:s.optionStyle??"default",closeButton:s.closeButton??!0},this.localization={placeholder:this.el.dataset.placeholder??s.placeholder??"Select an option",searchText:this.el.dataset.searchText??s.searchText??"Search",clearText:this.el.dataset.clearText??s.clearText??"Clear option(s)",selectedText:this.el.dataset.selectedText??s.selectedText??"Selected:"},this.state={multiple:this.el.multiple,disabled:this.el.disabled},this.options=this.extractOptions(),this.groups=this.extractGroups(),this.uxEl=this.create(),this.setSelectState(),this.bindEvents()}extractOptions(e=!1){const s=this.el.options,i=this.config.isGroupOptions,l=[];for(const t of s){if(t.value==="")continue;let n="empty";i&&t.dataset.uxSelectGroup&&(n=t.dataset.uxSelectGroup);let o;e&&(o=this.uxEl.querySelector(`.ux-select-group__elem[data-value='${t.value}']`));let r;this.config.optionStyle==="image"&&t.dataset.imageSrc&&(r={src:t.dataset.imageSrc,srcset:t.dataset.imageSrcset??void 0,alt:t.dataset.imageAlt??"",width:t.dataset.imageWidth?Number(t.dataset.imageWidth):24,height:t.dataset.imageHeight?Number(t.dataset.imageHeight):24}),l.push({attributes:{selected:t.selected,disabled:t.disabled,group:n},data:{text:t.textContent?t.textContent.trim():"",value:t.value},image:r,element:t,uxOption:o})}return l}extractGroups(){const e=this.el.options,s=this.config.isGroupOptions,i=new Set;for(const l of e){if(l.value==="")continue;let t="empty";s&&l.dataset.uxSelectGroup&&(t=l.dataset.uxSelectGroup),i.add(t)}return Array.from(i)}setSelectState(){const e=this.uxEl.querySelector(".ux-select__title"),s=this.options.reduce((i,l)=>(l.attributes.selected&&i.push(l.data.text),i),[]);if(s.length>0?(s.length===1?e.textContent=s[0]:this.state.multiple&&(e.textContent=`${this.localization.selectedText} ${s.length}`),this.uxEl.classList.add("-filled")):(e.textContent=this.localization.placeholder,this.uxEl.classList.remove("-filled")),this.config.isGroupOptions)for(const i of this.groups){const l=this.uxEl.querySelector(`[data-ux-group="${i}"]`);if(!l)continue;const t=l.querySelector(".ux-select-group__list");if(!t)continue;const o=Array.from(t.querySelectorAll(".ux-select-group__elem")).every(r=>{r.classList.contains("-disabled")});l.classList.toggle("-disabled",o)}}createGroupElement(e){const s=document.createElement("div");if(s.classList.add("ux-select__group","ux-select-group"),s.dataset.uxGroup=e,e==="empty")s.classList.add("-empty");else{const l=document.createElement("div");l.classList.add("ux-select-group__title"),l.textContent=e,s.appendChild(l)}const i=document.createElement("ul");return i.classList.add("ux-select-group__list"),s.appendChild(i),s}createGroupAndOptions(){const e=document.createElement("div");e.classList.add("ux-select__dropdown");const s=document.createDocumentFragment(),i={};for(const t of this.groups){const n=this.createGroupElement(t);s.appendChild(n),i[t]=document.createDocumentFragment()}e.appendChild(s);for(const t of this.options){const n=document.createElement("li");if(n.classList.add("ux-select-group__elem"),n.dataset.value=t.data.value,n.textContent=t.data.text,t.attributes.selected&&n.classList.add("-selected"),t.attributes.disabled&&n.classList.add("-disabled"),this.config.optionStyle==="image"&&t.image){const o=document.createElement("img");o.classList.add("ux-select-group-elem__image"),o.src=t.image.src,o.width=t.image.width,o.height=t.image.height,o.alt=t.image.alt,t.image.srcset&&(o.srcset=`${t.image.src} 1x, ${t.image.srcset} 2x`),n.appendChild(o)}n.addEventListener("click",this.onClickOption.bind(this)),i[t.attributes.group].appendChild(n),t.uxOption=n}for(const t of this.groups){const n=i[t],o=e.querySelector(`[data-ux-group="${t}"] .ux-select-group__list`);o&&o.appendChild(n)}if(!this.uxBody)throw new Error("uxBody is undefined");const l=this.config.isSearchable?1:0;this.uxBody.childNodes[l]?this.uxBody.replaceChild(e,this.uxBody.childNodes[l]):this.uxBody.appendChild(e)}create(){const e=document.createElement("div");e.classList.add("ux-select__head");const s=document.createElement("div");if(s.classList.add("ux-select__title"),s.textContent=this.localization.placeholder,e.appendChild(s),this.config.closeButton){const n=document.createElement("button");n.type="button",n.classList.add("ux-select__clear"),n.title=this.localization.clearText,this.uxClearButton=n,e.appendChild(n)}const i=document.createElement("div");if(i.classList.add("ux-select__body"),this.uxBody=i,this.config.isSearchable){const n=document.createElement("div");n.classList.add("ux-select__search");const o=document.createElement("input");o.type="search",o.classList.add("ux-select-search__input"),o.placeholder=this.localization.searchText,this.uxSearchInput=o,n.appendChild(o),i.appendChild(n)}this.createGroupAndOptions();const l=document.createElement("div"),t=["ux-select",this.el.classList];return this.state.multiple&&t.push("-multiple"),this.state.disabled&&t.push("-disabled"),this.config.optionStyle!=="default"&&t.push(`-${this.config.optionStyle}`),l.className=t.join(" "),l.append(e,i),this.el.style.display="none",this.el.insertAdjacentElement("afterend",l),this.el.nextElementSibling}enable(){this.state.disabled&&(this.el.disabled=!1,this.uxEl.classList.remove("-disabled"),this.state.disabled=!1)}disable(){this.state.disabled||(this.el.disabled=!0,this.uxEl.classList.add("-disabled"),this.state.disabled=!0)}update(e=!0){const s=JSON.stringify(this.options);this.options=this.extractOptions(!0),this.groups=this.extractGroups(),s!==JSON.stringify(this.options)&&this.createGroupAndOptions(),this.setSelectState(),this.el.disabled?this.disable():this.enable(),e&&c(this.el)}clear(){for(const e of this.options)e.attributes.selected&&(e.attributes.selected=!1,e.element.selected=!1,e.uxOption&&e.uxOption.classList.remove("-selected"));this.setSelectState(),c(this.el)}destroy(){this.uxEl.remove(),this.el.style.display=""}onToggleShown(e){e.preventDefault();const s=e.target;if(!this.state.disabled&&!(this.uxClearButton&&e.target===this.uxClearButton)&&!(this.uxBody&&this.uxBody.contains(s))){if(this.uxEl.classList.contains("-shown")){this.uxEl.classList.remove("-shown");return}this.uxEl.classList.add("-shown"),this.config.isSearchable&&this.uxSearchInput&&(this.uxSearchInput.value="",this.uxSearchInput.dispatchEvent(new Event("input")),this.config.isSearchFocus&&this.uxSearchInput.focus())}}onClickOutside(e){const s=e.target;this.uxEl.contains(s)||this.uxEl.classList.remove("-shown")}onClickClear(e){if(e.preventDefault(),!this.state.disabled)return this.config.hideOnClear&&this.uxEl.classList.remove("-shown"),this.clear()}onClickOption(e){e.preventDefault();const s=e.target;if(!s.classList.contains("-disabled")&&!(!this.state.multiple&&s.classList.contains("-selected"))){if(this.state.multiple){e.stopPropagation();const i=this.options.find(l=>l.uxOption===s);i&&i.uxOption&&(i.attributes.selected=!i.attributes.selected,i.element.selected=i.attributes.selected,i.uxOption.classList.toggle("-selected"))}else for(const i of this.options){const l=i.uxOption===s;i.attributes.selected=l,i.element.selected=l,i.uxOption&&i.uxOption.classList.toggle("-selected",l)}return this.config.hideOnSelect&&this.uxEl.classList.remove("-shown"),this.update()}}onSearch(e){if(e.target===null)return;const i=e.target.value.toLowerCase(),l=i.replace(/[.*+?^${}()|[\]\\]/g,"\\$&"),t=this.uxEl.querySelectorAll(".ux-select-group");if(i===""){for(const o of this.options)o.uxOption&&(o.uxOption.style.display="");if(this.config.isGroupOptions)for(const o of t)o.style.display="";return}const n=new RegExp(l);for(const o of this.options){const r=n.test(o.data.text.toLowerCase());o.uxOption&&(o.uxOption.style.display=r?"":"none")}if(this.config.isGroupOptions)for(const o of t){o.style.display="";const r=o.querySelector(".ux-select-group__list");r&&(o.style.display=r.clientHeight!==0?"":"none")}u(this.el)}bindEvents(){this.uxEl.addEventListener("click",this.onToggleShown.bind(this)),this.uxClearButton&&this.uxClearButton.addEventListener("click",this.onClickClear.bind(this)),window.addEventListener("click",this.onClickOutside.bind(this)),this.config.isSearchable&&this.uxSearchInput&&this.uxSearchInput.addEventListener("input",this.onSearch.bind(this))}}return p}(); //# sourceMappingURL=ux-select.iife.js.map diff --git a/dist/js/ux-select.iife.js.map b/dist/js/ux-select.iife.js.map index e6159eb..40b23d2 100644 --- a/dist/js/ux-select.iife.js.map +++ b/dist/js/ux-select.iife.js.map @@ -1 +1 @@ -{"version":3,"file":"ux-select.iife.js","sources":["../../src/utils/events/triggerChange.ts","../../src/utils/events/triggerInput.ts","../../src/ux-select.ts"],"sourcesContent":["export default function triggerChange(el: HTMLElement): void {\n const change: Event = new Event('change');\n el.dispatchEvent(change);\n}\n","export default function triggerInput(el: HTMLElement): void {\n const input: Event = new Event('input');\n el.dispatchEvent(input);\n}\n","import './scss/ux-select.scss';\n\nimport { UxSelectParams, UxSelectOptions, UxSelectConfig, UxSelectLocalization, UxSelectState } from './types';\n\nimport triggerChange from './utils/events/triggerChange.ts';\nimport triggerInput from './utils/events/triggerInput.ts';\n\n/**\n * @class\n * @classdesc Creating a custom select element with support for grouping, searching, and other features.\n * @param {HTMLSelectElement} element - The original HTML element to be transformed.\n * @param {Partial} [params={}] - Optional parameters for configuring the behavior and appearance of UxSelect.\n */\nexport default class UxSelect {\n el: HTMLSelectElement;\n\n config: UxSelectConfig;\n localization: UxSelectLocalization;\n state: UxSelectState;\n\n options: UxSelectOptions[];\n groups: string[];\n\n uxEl: Element;\n\n private uxBody: HTMLDivElement | undefined;\n private uxSearchInput: HTMLInputElement | undefined;\n private uxClearButton: HTMLButtonElement | undefined;\n\n constructor(element: HTMLSelectElement, params: UxSelectParams = {}) {\n this.el = element;\n\n this.config = {\n isSearchable: params.isSearchable ?? false,\n isSearchFocus: params.isSearchFocus ?? false,\n isGroupOptions: params.isGroupOptions ?? false,\n hideOnClear: params.hideOnClear ?? true,\n hideOnSelect: params.hideOnSelect ?? false,\n optionStyle: params.optionStyle ?? 'default',\n closeButton: params.closeButton ?? true,\n };\n this.localization = {\n placeholder: this.el.dataset.placeholder ?? params.placeholder ?? 'Select an option',\n searchText: this.el.dataset.searchText ?? params.searchText ?? 'Search',\n clearText: this.el.dataset.clearText ?? params.clearText ?? 'Clear option(s)',\n selectedText: this.el.dataset.selectedText ?? params.selectedText ?? 'Selected:',\n };\n this.state = {\n multiple: this.el.multiple,\n disabled: this.el.disabled,\n };\n\n this.options = this.extractOptions();\n this.groups = this.extractGroups();\n\n this.uxEl = this.create();\n\n this.setSelectState();\n this.bindEvents();\n }\n\n private extractOptions(isUpdate = false): UxSelectOptions[] {\n const options: HTMLOptionsCollection = this.el.options;\n const isGroupingEnabled = this.config.isGroupOptions;\n const optionsData: UxSelectOptions[] = [];\n\n for (const option of options) {\n if (option.value === '') continue;\n\n let group = 'empty';\n if (isGroupingEnabled && option.dataset.uxSelectGroup) {\n group = option.dataset.uxSelectGroup;\n }\n\n let uxOption = undefined;\n if (isUpdate) {\n uxOption = this.uxEl.querySelector(`.ux-select-group__elem[data-value='${option.value}']`);\n }\n\n let optionImage = undefined;\n if (this.config.optionStyle === 'image' && option.dataset.imageSrc) {\n optionImage = {\n src: option.dataset.imageSrc,\n srcset: option.dataset.imageSrcset ?? undefined,\n alt: option.dataset.imageAlt ?? '',\n width: option.dataset.imageWidth ? Number(option.dataset.imageWidth) : 24,\n height: option.dataset.imageHeight ? Number(option.dataset.imageHeight) : 24,\n };\n }\n\n optionsData.push({\n attributes: {\n selected: option.selected,\n disabled: option.disabled,\n group,\n },\n data: {\n text: option.textContent ? option.textContent.trim() : '',\n value: option.value,\n },\n image: optionImage,\n element: option,\n uxOption,\n });\n }\n\n return optionsData;\n }\n\n private extractGroups(): string[] {\n const options: HTMLOptionsCollection = this.el.options;\n const isGroupingEnabled = this.config.isGroupOptions;\n const uniqueGroups = new Set();\n\n for (const option of options) {\n if (option.value === '') continue;\n\n let group = 'empty';\n if (isGroupingEnabled && option.dataset.uxSelectGroup) {\n group = option.dataset.uxSelectGroup;\n }\n uniqueGroups.add(group);\n }\n\n return Array.from(uniqueGroups);\n }\n\n private setSelectState(): void {\n const selectTitle = this.uxEl.querySelector('.ux-select__title') as Element;\n\n const selectedTexts = this.options.reduce((acc, item) => {\n if (item.attributes.selected) acc.push(item.data.text);\n return acc;\n }, []);\n\n if (selectedTexts.length > 0) {\n if (selectedTexts.length === 1) {\n selectTitle.textContent = selectedTexts[0];\n } else if (this.state.multiple) {\n selectTitle.textContent = `${this.localization.selectedText} ${selectedTexts.length}`;\n }\n this.uxEl.classList.add('-filled');\n } else {\n selectTitle.textContent = this.localization.placeholder;\n this.uxEl.classList.remove('-filled');\n }\n\n if (this.config.isGroupOptions) {\n for (const group of this.groups) {\n const htmlGroup = this.uxEl.querySelector(`[data-ux-group=\"${group}\"]`);\n if (!htmlGroup) continue;\n\n const groupList = htmlGroup.querySelector('.ux-select-group__list');\n if (!groupList) continue;\n\n const groupElements = Array.from(groupList.querySelectorAll('.ux-select-group__elem'));\n const isAllDisabled = groupElements.every((elem) => {\n elem.classList.contains('-disabled');\n });\n htmlGroup.classList.toggle('-disabled', isAllDisabled);\n }\n }\n }\n\n private createGroupElement(group: string): HTMLElement {\n const selectGroup = document.createElement('div');\n selectGroup.classList.add('ux-select__group', 'ux-select-group');\n selectGroup.dataset.uxGroup = group;\n\n if (group === 'empty') {\n selectGroup.classList.add('-empty');\n } else {\n const selectGroupTitle = document.createElement('div');\n selectGroupTitle.classList.add('ux-select-group__title');\n selectGroupTitle.textContent = group;\n selectGroup.appendChild(selectGroupTitle);\n }\n\n const selectGroupList = document.createElement('ul');\n selectGroupList.classList.add('ux-select-group__list');\n selectGroup.appendChild(selectGroupList);\n\n return selectGroup;\n }\n\n private createGroupAndOptions() {\n const selectList = document.createElement('div');\n selectList.classList.add('ux-select__dropdown');\n\n const groupFragment = document.createDocumentFragment();\n const optionsFragmentsByGroup: { [key: string]: DocumentFragment } = {};\n\n for (const group of this.groups) {\n const selectGroup = this.createGroupElement(group);\n groupFragment.appendChild(selectGroup);\n\n optionsFragmentsByGroup[group] = document.createDocumentFragment();\n }\n\n selectList.appendChild(groupFragment);\n\n for (const option of this.options) {\n const selectListElem = document.createElement('li');\n selectListElem.classList.add('ux-select-group__elem');\n selectListElem.dataset.value = option.data.value;\n selectListElem.textContent = option.data.text;\n\n if (option.attributes.selected) {\n selectListElem.classList.add('-selected');\n }\n\n if (option.attributes.disabled) {\n selectListElem.classList.add('-disabled');\n }\n\n if (this.config.optionStyle === 'image' && option.image) {\n const optionImageElem = document.createElement('img');\n optionImageElem.classList.add('ux-select-group-elem__image');\n optionImageElem.src = option.image.src;\n optionImageElem.width = option.image.width;\n optionImageElem.height = option.image.height;\n optionImageElem.alt = option.image.alt;\n\n if (option.image.srcset) {\n optionImageElem.srcset = `${option.image.src} 1x, ${option.image.srcset} 2x`;\n }\n\n selectListElem.appendChild(optionImageElem);\n }\n\n selectListElem.addEventListener('click', this.onClickOption.bind(this));\n\n optionsFragmentsByGroup[option.attributes.group].appendChild(selectListElem);\n\n option.uxOption = selectListElem;\n }\n\n for (const group of this.groups) {\n const fragment = optionsFragmentsByGroup[group];\n const selectGroupList = selectList.querySelector(`[data-ux-group=\"${group}\"] .ux-select-group__list`);\n\n if (selectGroupList) selectGroupList.appendChild(fragment);\n }\n\n if (!this.uxBody) throw new Error('uxBody is undefined');\n\n const replacementChildIndex = this.config.isSearchable ? 1 : 0;\n if (this.uxBody.childNodes[replacementChildIndex]) {\n this.uxBody.replaceChild(selectList, this.uxBody.childNodes[replacementChildIndex]);\n } else {\n this.uxBody.appendChild(selectList);\n }\n }\n\n private create(): Element {\n /** Create select head */\n const selectHead = document.createElement('div');\n selectHead.classList.add('ux-select__head');\n\n const selectTitle = document.createElement('div');\n selectTitle.classList.add('ux-select__title');\n selectTitle.textContent = this.localization.placeholder;\n selectHead.appendChild(selectTitle);\n\n if (this.config.closeButton) {\n const selectClear = document.createElement('button');\n selectClear.type = 'button';\n selectClear.classList.add('ux-select__clear');\n selectClear.title = this.localization.clearText;\n this.uxClearButton = selectClear;\n selectHead.appendChild(selectClear);\n }\n\n /** Create body */\n const selectBody = document.createElement('div');\n selectBody.classList.add('ux-select__body');\n this.uxBody = selectBody;\n\n if (this.config.isSearchable) {\n const selectSearchWrap = document.createElement('div');\n selectSearchWrap.classList.add('ux-select__search');\n\n const selectSearch = document.createElement('input');\n selectSearch.type = 'search';\n selectSearch.classList.add('ux-select-search__input');\n selectSearch.placeholder = this.localization.searchText;\n this.uxSearchInput = selectSearch;\n\n selectSearchWrap.appendChild(selectSearch);\n selectBody.appendChild(selectSearchWrap);\n }\n\n this.createGroupAndOptions();\n\n /** Create select element */\n const select = document.createElement('div');\n\n /** Create class list for select element */\n const classes = ['ux-select', this.el.classList];\n if (this.state.multiple) classes.push('-multiple');\n if (this.state.disabled) classes.push('-disabled');\n if (this.config.optionStyle !== 'default') {\n classes.push(`-${this.config.optionStyle}`);\n }\n select.className = classes.join(' ');\n\n select.append(selectHead, selectBody);\n\n this.el.style.display = 'none';\n this.el.insertAdjacentElement('afterend', select);\n\n return this.el.nextElementSibling as Element;\n }\n\n enable(): void {\n if (this.state.disabled) {\n this.el.disabled = false;\n this.uxEl.classList.remove('-disabled');\n this.state.disabled = false;\n }\n }\n\n disable(): void {\n if (!this.state.disabled) {\n this.el.disabled = true;\n this.uxEl.classList.add('-disabled');\n this.state.disabled = true;\n }\n }\n\n /**\n *\n * @param {Boolean} [isTriggerChange] Skip triggering \"change\" event\n */\n update(isTriggerChange: boolean = true): void {\n const originalOptions = JSON.stringify(this.options);\n\n this.options = this.extractOptions(true);\n this.groups = this.extractGroups();\n\n if (originalOptions !== JSON.stringify(this.options)) {\n this.createGroupAndOptions();\n }\n\n this.setSelectState();\n\n this.el.disabled ? this.disable() : this.enable();\n\n if (isTriggerChange) triggerChange(this.el);\n }\n\n clear(): void {\n for (const option of this.options) {\n if (!option.attributes.selected) continue;\n\n option.attributes.selected = false;\n option.element.selected = false;\n if (option.uxOption) option.uxOption.classList.remove('-selected');\n }\n\n this.setSelectState();\n\n triggerChange(this.el);\n }\n\n destroy(): void {\n this.uxEl.remove();\n this.el.style.display = '';\n }\n\n private onToggleShown(e: Event): void {\n e.preventDefault();\n const targetEl = e.target as HTMLElement;\n\n if (this.state.disabled) return;\n if (this.uxClearButton && e.target === this.uxClearButton) return;\n if (this.uxBody && this.uxBody.contains(targetEl)) return;\n\n if (this.uxEl.classList.contains('-shown')) {\n this.uxEl.classList.remove('-shown');\n return;\n }\n\n this.uxEl.classList.add('-shown');\n if (this.config.isSearchable && this.uxSearchInput) {\n this.uxSearchInput.value = '';\n this.uxSearchInput.dispatchEvent(new Event('input'));\n if (this.config.isSearchFocus) this.uxSearchInput.focus();\n }\n }\n\n private onClickOutside(e: Event): void {\n const targetEl = e.target as HTMLElement;\n if (!this.uxEl.contains(targetEl)) {\n this.uxEl.classList.remove('-shown');\n }\n }\n\n private onClickClear(e: Event): void {\n e.preventDefault();\n\n if (this.state.disabled) return;\n\n if (this.config.hideOnClear) this.uxEl.classList.remove('-shown');\n\n return this.clear();\n }\n\n private onClickOption(e: Event): void {\n e.preventDefault();\n\n const uxOption = e.target as HTMLElement;\n if (uxOption.classList.contains('-disabled')) return;\n if (!this.state.multiple && uxOption.classList.contains('-selected')) {\n return;\n }\n\n if (this.state.multiple) {\n e.stopPropagation();\n\n const matchingOption = this.options.find((option) => {\n return option.uxOption === uxOption;\n });\n\n if (matchingOption && matchingOption.uxOption) {\n matchingOption.attributes.selected = !matchingOption.attributes.selected;\n matchingOption.element.selected = matchingOption.attributes.selected;\n\n matchingOption.uxOption.classList.toggle('-selected');\n }\n } else {\n for (const option of this.options) {\n const isSelected = option.uxOption === uxOption;\n option.attributes.selected = isSelected;\n option.element.selected = isSelected;\n\n if (option.uxOption) {\n option.uxOption.classList.toggle('-selected', isSelected);\n }\n }\n }\n\n if (this.config.hideOnSelect) this.uxEl.classList.remove('-shown');\n\n return this.update();\n }\n\n private onSearch(e: Event): void {\n if (e.target === null) return;\n\n const input = e.target as HTMLInputElement;\n const text = input.value.toLowerCase();\n const escapedText = text.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&');\n const groups: NodeListOf = this.uxEl.querySelectorAll('.ux-select-group');\n\n if (text === '') {\n for (const option of this.options) {\n if (option.uxOption) option.uxOption.style.display = '';\n }\n\n if (this.config.isGroupOptions) {\n for (const group of groups) {\n group.style.display = '';\n }\n }\n\n return;\n }\n\n const searchValue = new RegExp(escapedText);\n\n for (const option of this.options) {\n const match = searchValue.test(option.data.text.toLowerCase());\n if (option.uxOption) option.uxOption.style.display = match ? '' : 'none';\n }\n\n if (this.config.isGroupOptions) {\n for (const group of groups) {\n group.style.display = '';\n\n const groupList = group.querySelector('.ux-select-group__list');\n if (groupList) {\n group.style.display = groupList.clientHeight !== 0 ? '' : 'none';\n }\n }\n }\n\n triggerInput(this.el);\n }\n\n private bindEvents(): void {\n this.uxEl.addEventListener('click', this.onToggleShown.bind(this));\n\n if (this.uxClearButton) {\n this.uxClearButton.addEventListener('click', this.onClickClear.bind(this));\n }\n\n window.addEventListener('click', this.onClickOutside.bind(this));\n\n if (this.config.isSearchable && this.uxSearchInput) {\n this.uxSearchInput.addEventListener('input', this.onSearch.bind(this));\n }\n }\n}\n"],"names":["triggerChange","el","change","triggerInput","input","UxSelect","element","params","__publicField","isUpdate","options","isGroupingEnabled","optionsData","option","group","uxOption","optionImage","uniqueGroups","selectTitle","selectedTexts","acc","item","htmlGroup","groupList","isAllDisabled","elem","selectGroup","selectGroupTitle","selectGroupList","selectList","groupFragment","optionsFragmentsByGroup","selectListElem","optionImageElem","fragment","replacementChildIndex","selectHead","selectClear","selectBody","selectSearchWrap","selectSearch","select","classes","isTriggerChange","originalOptions","targetEl","matchingOption","isSelected","text","escapedText","groups","searchValue","match"],"mappings":"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"} \ No newline at end of file diff --git a/src/scss/_styles.scss b/src/scss/_styles.scss index 706ed8d..d7278f5 100644 --- a/src/scss/_styles.scss +++ b/src/scss/_styles.scss @@ -282,6 +282,7 @@ #{$ux}.-image & { display: flex; flex-direction: row-reverse; + align-items: center; justify-content: flex-end; gap: 0.5rem; } diff --git a/src/ux-select.ts b/src/ux-select.ts index a9fcf54..6be296a 100644 --- a/src/ux-select.ts +++ b/src/ux-select.ts @@ -243,8 +243,10 @@ export default class UxSelect { } if (!this.uxBody) throw new Error('uxBody is undefined'); - if (this.uxBody.childNodes[1]) { - this.uxBody.replaceChild(selectList, this.uxBody.childNodes[1]); + + const replacementChildIndex = this.config.isSearchable ? 1 : 0; + if (this.uxBody.childNodes[replacementChildIndex]) { + this.uxBody.replaceChild(selectList, this.uxBody.childNodes[replacementChildIndex]); } else { this.uxBody.appendChild(selectList); }