Added the ability to add custom classes to the main elements (#334)

* Add new properties additionalDropboxClasses and additionalToggleButtonClasses * Added new option additionalDropboxContainerClasses * Update virtual-select.types.js
sa-si-dev · Jun 5, 2024 · 687d89f · 687d89f
1 parent db594ff
commit 687d89f
Show file tree

Hide file tree

Showing 8 changed files with 110 additions and 11 deletions.
diff --git a/docs/assets/script.js b/docs/assets/script.js
@@ -351,4 +351,13 @@ function initPageExamples() {
       alert('Form submitted');
     }
   });
+
+  initVirtualSelect({
+    ele: '#custom-styling-select',
+    multiple: true,
+    additionalClasses: 'custom-wrapper',
+    additionalDropboxClasses: 'custom-dropbox',
+    additionalDropboxContainerClasses: 'custom-dropbox-container',
+    additionalToggleButtonClasses: 'custom-toggle-button',
+  });
 }
diff --git a/docs/assets/styles.css b/docs/assets/styles.css
@@ -107,10 +107,10 @@ section.cover {
 
 .get-started-example {
   display: flex;
+  flex-wrap: wrap;
   justify-content: space-between;
-  max-width: 600px;
   margin: 30px auto 0;
-  flex-wrap: wrap;
+  max-width: 600px;
 }
 
 .get-started-example .vscomp-ele {
@@ -124,8 +124,8 @@ section.cover {
 }
 
 .vscomp-wrapper.text-direction-rtl .vscomp-option-text .flag {
-  margin-right: 0;
   margin-left: 12px;
+  margin-right: 0;
 }
 
 #show-value-as-tags-select,
@@ -136,3 +136,28 @@ section.cover {
 #validation-select {
   margin-bottom: 20px;
 }
+
+/* utility classes - start */
+
+.custom-wrapper {
+  padding: 0 0 10px;
+}
+
+.custom-dropbox {
+  border: 1px solid var(--theme-color, #42b983);
+  border-radius: 14px;
+  color: var(--theme-color, #42b983);
+  overflow-y: auto;
+}
+
+.custom-dropbox-container {
+  border-radius: 14px;
+}
+
+.custom-toggle-button {
+  border-color: var(--theme-color, #42b983);
+  border-radius: 14px;
+  color: var(--theme-color, #42b983);
+}
+
+/* utility classes - end */
diff --git a/docs/assets/virtual-select.js b/docs/assets/virtual-select.js
@@ -638,7 +638,7 @@ var keyDownMethodMapping = {
 var valueLessProps = ['autofocus', 'disabled', 'multiple', 'required'];
 var nativeProps = ['autofocus', 'class', 'disabled', 'id', 'multiple', 'name', 'placeholder', 'required'];
 var attrPropsMapping;
-var dataProps = ['additionalClasses', 'aliasKey', 'allOptionsSelectedText', 'allowNewOption', 'alwaysShowSelectedOptionsCount', 'alwaysShowSelectedOptionsLabel', 'ariaLabelledby', 'ariaLabelText', 'ariaLabelClearButtonText', 'autoSelectFirstOption', 'clearButtonText', 'descriptionKey', 'disableAllOptionsSelectedText', 'disableOptionGroupCheckbox', 'disableSelectAll', 'disableValidation', 'dropboxWidth', 'dropboxWrapper', 'emptyValue', 'enableSecureText', 'focusSelectedOptionOnOpen', 'hasOptionDescription', 'hideClearButton', 'hideValueTooltipOnSelectAll', 'keepAlwaysOpen', 'labelKey', 'markSearchResults', 'maxValues', 'maxWidth', 'minValues', 'moreText', 'noOfDisplayValues', 'noOptionsText', 'noSearchResultsText', 'optionHeight', 'optionSelectedText', 'optionsCount', 'optionsSelectedText', 'popupDropboxBreakpoint', 'popupPosition', 'position', 'search', 'searchByStartsWith', 'searchDelay', 'searchFormLabel', 'searchGroup', 'searchNormalize', 'searchPlaceholderText', 'selectAllOnlyVisible', 'selectAllText', 'setValueAsArray', 'showDropboxAsPopup', 'showOptionsOnlyOnSearch', 'showSelectedOptionsFirst', 'showValueAsTags', 'silentInitialValueSet', 'textDirection', 'tooltipAlignment', 'tooltipFontSize', 'tooltipMaxWidth', 'updatePositionThrottle', 'useGroupValue', 'valueKey', 'zIndex'];
+var dataProps = ['additionalClasses', 'additionalDropboxClasses', 'additionalDropboxContainerClasses', 'additionalToggleButtonClasses', 'aliasKey', 'allOptionsSelectedText', 'allowNewOption', 'alwaysShowSelectedOptionsCount', 'alwaysShowSelectedOptionsLabel', 'ariaLabelledby', 'ariaLabelText', 'ariaLabelClearButtonText', 'autoSelectFirstOption', 'clearButtonText', 'descriptionKey', 'disableAllOptionsSelectedText', 'disableOptionGroupCheckbox', 'disableSelectAll', 'disableValidation', 'dropboxWidth', 'dropboxWrapper', 'emptyValue', 'enableSecureText', 'focusSelectedOptionOnOpen', 'hasOptionDescription', 'hideClearButton', 'hideValueTooltipOnSelectAll', 'keepAlwaysOpen', 'labelKey', 'markSearchResults', 'maxValues', 'maxWidth', 'minValues', 'moreText', 'noOfDisplayValues', 'noOptionsText', 'noSearchResultsText', 'optionHeight', 'optionSelectedText', 'optionsCount', 'optionsSelectedText', 'popupDropboxBreakpoint', 'popupPosition', 'position', 'search', 'searchByStartsWith', 'searchDelay', 'searchFormLabel', 'searchGroup', 'searchNormalize', 'searchPlaceholderText', 'selectAllOnlyVisible', 'selectAllText', 'setValueAsArray', 'showDropboxAsPopup', 'showOptionsOnlyOnSearch', 'showSelectedOptionsFirst', 'showValueAsTags', 'silentInitialValueSet', 'textDirection', 'tooltipAlignment', 'tooltipFontSize', 'tooltipMaxWidth', 'updatePositionThrottle', 'useGroupValue', 'valueKey', 'zIndex'];
 
 /** Class representing VirtualSelect */
 var VirtualSelect = /*#__PURE__*/function () {
@@ -670,6 +670,7 @@ var VirtualSelect = /*#__PURE__*/function () {
       }
       var uniqueId = this.uniqueId;
       var wrapperClasses = 'vscomp-wrapper';
+      var toggleButtonClasses = 'vscomp-toggle-button';
       var valueTooltip = this.showValueAsTags ? '' : this.getTooltipAttrText(this.placeholder, true, true);
       var clearButtonTooltip = this.getTooltipAttrText(this.clearButtonText);
       var ariaLabelledbyText = this.ariaLabelledby ? "aria-labelledby=\"".concat(this.ariaLabelledby, "\"") : '';
@@ -679,6 +680,9 @@ var VirtualSelect = /*#__PURE__*/function () {
       if (this.additionalClasses) {
         wrapperClasses += " ".concat(this.additionalClasses);
       }
+      if (this.additionalToggleButtonClasses) {
+        toggleButtonClasses += " ".concat(this.additionalToggleButtonClasses);
+      }
       if (this.multiple) {
         wrapperClasses += ' multiple';
         if (!this.disableSelectAll) {
@@ -711,7 +715,7 @@ var VirtualSelect = /*#__PURE__*/function () {
       }
 
       // eslint-disable-next-line no-trailing-spaces
-      var html = "<div id=\"vscomp-ele-wrapper-".concat(uniqueId, "\" class=\"vscomp-ele-wrapper ").concat(wrapperClasses, "\" tabindex=\"0\"\n        role=\"combobox\" aria-haspopup=\"listbox\" aria-controls=\"vscomp-dropbox-container-").concat(uniqueId, "\"\n        aria-expanded=\"").concat(isExpanded, "\" ").concat(ariaLabelledbyText, " ").concat(ariaLabelText, ">\n        <input type=\"hidden\" name=\"").concat(this.name, "\" class=\"vscomp-hidden-input\">\n        <div class=\"vscomp-toggle-button\">\n          <div class=\"vscomp-value\" ").concat(valueTooltip, ">\n            ").concat(this.placeholder, "\n          </div>\n          <div class=\"vscomp-arrow\"></div>\n          <div class=\"vscomp-clear-button toggle-button-child\" ").concat(clearButtonTooltip, " \n          tabindex=\"0\" ").concat(ariaLabelClearBtnTxt, ">\n            <i class=\"vscomp-clear-icon\"></i>\n          </div>\n        </div>\n\n        ").concat(this.renderDropbox({
+      var html = "<div id=\"vscomp-ele-wrapper-".concat(uniqueId, "\" class=\"vscomp-ele-wrapper ").concat(wrapperClasses, "\" tabindex=\"0\"\n        role=\"combobox\" aria-haspopup=\"listbox\" aria-controls=\"vscomp-dropbox-container-").concat(uniqueId, "\"\n        aria-expanded=\"").concat(isExpanded, "\" ").concat(ariaLabelledbyText, " ").concat(ariaLabelText, ">\n        <input type=\"hidden\" name=\"").concat(this.name, "\" class=\"vscomp-hidden-input\">\n        <div class=\"").concat(toggleButtonClasses, "\">\n          <div class=\"vscomp-value\" ").concat(valueTooltip, ">\n            ").concat(this.placeholder, "\n          </div>\n          <div class=\"vscomp-arrow\"></div>\n          <div class=\"vscomp-clear-button toggle-button-child\" ").concat(clearButtonTooltip, " \n          tabindex=\"0\" ").concat(ariaLabelClearBtnTxt, ">\n            <i class=\"vscomp-clear-icon\"></i>\n          </div>\n        </div>\n\n        ").concat(this.renderDropbox({
         wrapperClasses: wrapperClasses
       }), "\n      </div>");
       this.$ele.innerHTML = html;
@@ -746,9 +750,17 @@ var VirtualSelect = /*#__PURE__*/function () {
     value: function renderDropbox(_ref) {
       var wrapperClasses = _ref.wrapperClasses;
       var $wrapper = this.dropboxWrapper !== 'self' ? document.querySelector(this.dropboxWrapper) : null;
+      var dropboxClasses = 'vscomp-dropbox';
+      if (this.additionalDropboxClasses) {
+        dropboxClasses += " ".concat(this.additionalDropboxClasses);
+      }
+      var dropboxContainerClasses = 'vscomp-dropbox-container';
+      if (this.additionalDropboxContainerClasses) {
+        dropboxContainerClasses += " ".concat(this.additionalDropboxContainerClasses);
+      }
 
       // eslint-disable-next-line no-trailing-spaces
-      var html = "<div id=\"vscomp-dropbox-container-".concat(this.uniqueId, "\" role=\"listbox\" class=\"vscomp-dropbox-container\">\n        <div class=\"vscomp-dropbox-container-top\" aria-hidden=\"true\" tabindex=\"0\">&nbsp;</div>\n        <div class=\"vscomp-dropbox\">\n          <div class=\"vscomp-search-wrapper\"></div>\n\n          <div class=\"vscomp-options-container\">\n            <div class=\"vscomp-options-loader\"></div>\n\n            <div class=\"vscomp-options-list\">\n              <div class=\"vscomp-options\"></div>\n            </div>\n          </div>\n\n          <div class=\"vscomp-options-bottom-freezer\"></div>\n          <div class=\"vscomp-no-options\">").concat(this.noOptionsText, "</div>\n          <div class=\"vscomp-no-search-results\">").concat(this.noSearchResultsText, "</div>\n\n          <span class=\"vscomp-dropbox-close-button\"><i class=\"vscomp-clear-icon\"></i></span>\n        </div>\n        <div class=\"vscomp-dropbox-container-bottom\" aria-hidden=\"true\" tabindex=\"0\">&nbsp;</div>\n      </div>");
+      var html = "<div id=\"vscomp-dropbox-container-".concat(this.uniqueId, "\" role=\"listbox\" class=\"").concat(dropboxContainerClasses, "\">\n        <div class=\"vscomp-dropbox-container-top\" aria-hidden=\"true\" tabindex=\"0\">&nbsp;</div>\n        <div class=\"").concat(dropboxClasses, "\">\n          <div class=\"vscomp-search-wrapper\"></div>\n\n          <div class=\"vscomp-options-container\">\n            <div class=\"vscomp-options-loader\"></div>\n\n            <div class=\"vscomp-options-list\">\n              <div class=\"vscomp-options\"></div>\n            </div>\n          </div>\n\n          <div class=\"vscomp-options-bottom-freezer\"></div>\n          <div class=\"vscomp-no-options\">").concat(this.noOptionsText, "</div>\n          <div class=\"vscomp-no-search-results\">").concat(this.noSearchResultsText, "</div>\n\n          <span class=\"vscomp-dropbox-close-button\"><i class=\"vscomp-clear-icon\"></i></span>\n        </div>\n        <div class=\"vscomp-dropbox-container-bottom\" aria-hidden=\"true\" tabindex=\"0\">&nbsp;</div>\n      </div>");
       if ($wrapper) {
         var $dropboxWrapper = document.createElement('div');
         this.$dropboxWrapper = $dropboxWrapper;
@@ -1394,6 +1406,9 @@ var VirtualSelect = /*#__PURE__*/function () {
       this.minValues = parseInt(options.minValues);
       this.name = this.secureText(options.name);
       this.additionalClasses = options.additionalClasses;
+      this.additionalDropboxClasses = options.additionalDropboxClasses;
+      this.additionalDropboxContainerClasses = options.additionalDropboxContainerClasses;
+      this.additionalToggleButtonClasses = options.additionalToggleButtonClasses;
       this.popupDropboxBreakpoint = options.popupDropboxBreakpoint;
       this.popupPosition = options.popupPosition;
       this.onServerSearch = options.onServerSearch;
@@ -1472,6 +1487,9 @@ var VirtualSelect = /*#__PURE__*/function () {
         updatePositionThrottle: 100,
         name: '',
         additionalClasses: '',
+        additionalDropboxClasses: '',
+        additionalDropboxContainerClasses: '',
+        additionalToggleButtonClasses: '',
         maxValues: 0,
         showDropboxAsPopup: true,
         popupDropboxBreakpoint: '576px',

diff --git a/docs/assets/virtual-select.min.js b/docs/assets/virtual-select.min.js
diff --git a/docs/examples.md b/docs/examples.md
@@ -25,6 +25,7 @@
 - [Right-to-Left text](#right-to-left-text)
 - [Disable/Enable](#disable-enable)
 - [Validation](#validation)
+- [Custom styling](#custom-styling)
 
 ## Default dropdown
 
@@ -405,6 +406,21 @@ document.querySelector('#sample-form').addEventListener('submit', function() {
   }
 });
 ```
+## Custom styling
+
+Use `additionalClasses`, `additionalDropboxClasses`, `additionalDropboxContainerClasses` and `additionalToggleButtonClasses` to customize the styling of your dropdown
+
+<div id="custom-styling-select"></div>
+
+```js
+VirtualSelect.init({
+  ...
+  additionalClasses: 'custom-wrapper',
+  additionalDropboxClasses: 'custom-dropbox',
+  additionalDropboxContainerClasses: 'custom-dropbox-container',
+  additionalToggleButtonClasses: 'custom-toggle-button',
+});
+```
 
 <script>
   setTimeout(function() {

diff --git a/docs/properties.md b/docs/properties.md
@@ -47,7 +47,10 @@
 | keepAlwaysOpen                 | Boolean           | false                                                  | Keep dropbox always open with fixed height                                                                                                                                                                    |
 | maxValues                      | Number            | 0                                                      | Maximum no.of options allowed to choose in multiple select<br>0 - for no limit                                                                                                                                |
 | minValues                      | Number            |                                                        | Minimum no.of options should be selected to succeed required validation                                                                                                                                       |
-| additionalClasses              | String            |                                                        | Additional classes for wrapper element                                                                                                                                                                        |
+| additionalClasses              | String            |                                                        | Additional CSS classes for the wrapper element    |
+| additionalDropboxClasses       | String            |                                                        | Additional CSS classes for the dropbox element    |
+| additionalDropboxContainerClasses  | String            |                                                    | Additional CSS classes for the dropbox container element    |
+| additionalToggleButtonClasses  | String            |                                                        | Additional CSS classes for the toggle button element, to allow customizing the select input    |
 | showDropboxAsPopup             | Boolean           | true                                                   | Show dropbox as popup on small screen like mobile                                                                                                                                                             |
 | popupDropboxBreakpoint         | String            | 576px                                                  | Maximum screen width that allowed to show dropbox as popup                                                                                                                                                    |
 | popupPosition                  | String            | center                                                 | Position of the popup (left, center, or right)                                                                                                                                                                |

diff --git a/src/virtual-select.js b/src/virtual-select.js
@@ -20,6 +20,9 @@ let attrPropsMapping;
 
 const dataProps = [
   'additionalClasses',
+  'additionalDropboxClasses',
+  'additionalDropboxContainerClasses',
+  'additionalToggleButtonClasses',
   'aliasKey',
   'allOptionsSelectedText',
   'allowNewOption',
@@ -113,6 +116,7 @@ export class VirtualSelect {
 
     const { uniqueId } = this;
     let wrapperClasses = 'vscomp-wrapper';
+    let toggleButtonClasses = 'vscomp-toggle-button';
     const valueTooltip = this.showValueAsTags ? '' : this.getTooltipAttrText(this.placeholder, true, true);
     const clearButtonTooltip = this.getTooltipAttrText(this.clearButtonText);
     const ariaLabelledbyText = this.ariaLabelledby ? `aria-labelledby="${this.ariaLabelledby}"` : '';
@@ -124,6 +128,10 @@ export class VirtualSelect {
       wrapperClasses += ` ${this.additionalClasses}`;
     }
 
+    if (this.additionalToggleButtonClasses) {
+      toggleButtonClasses += ` ${this.additionalToggleButtonClasses}`;
+    }
+
     if (this.multiple) {
       wrapperClasses += ' multiple';
 
@@ -169,7 +177,7 @@ export class VirtualSelect {
         role="combobox" aria-haspopup="listbox" aria-controls="vscomp-dropbox-container-${uniqueId}"
         aria-expanded="${isExpanded}" ${ariaLabelledbyText} ${ariaLabelText}>
         <input type="hidden" name="${this.name}" class="vscomp-hidden-input">
-        <div class="vscomp-toggle-button">
+        <div class="${toggleButtonClasses}">
           <div class="vscomp-value" ${valueTooltip}>
             ${this.placeholder}
           </div>
@@ -217,12 +225,23 @@ export class VirtualSelect {
 
   renderDropbox({ wrapperClasses }) {
     const $wrapper = this.dropboxWrapper !== 'self' ? document.querySelector(this.dropboxWrapper) : null;
+    let dropboxClasses = 'vscomp-dropbox';
+
+    if (this.additionalDropboxClasses) {
+      dropboxClasses += ` ${this.additionalDropboxClasses}`;
+    }
+
+    let dropboxContainerClasses = 'vscomp-dropbox-container';
+
+    if (this.additionalDropboxContainerClasses) {
+      dropboxContainerClasses += ` ${this.additionalDropboxContainerClasses}`;
+    }
 
     // eslint-disable-next-line no-trailing-spaces
     const html = 
-      `<div id="vscomp-dropbox-container-${this.uniqueId}" role="listbox" class="vscomp-dropbox-container">
+      `<div id="vscomp-dropbox-container-${this.uniqueId}" role="listbox" class="${dropboxContainerClasses}">
         <div class="vscomp-dropbox-container-top" aria-hidden="true" tabindex="0">&nbsp;</div>
-        <div class="vscomp-dropbox">
+        <div class="${dropboxClasses}">
           <div class="vscomp-search-wrapper"></div>
 
           <div class="vscomp-options-container">
@@ -913,6 +932,9 @@ export class VirtualSelect {
     this.minValues = parseInt(options.minValues);
     this.name = this.secureText(options.name);
     this.additionalClasses = options.additionalClasses;
+    this.additionalDropboxClasses = options.additionalDropboxClasses;
+    this.additionalDropboxContainerClasses = options.additionalDropboxContainerClasses;
+    this.additionalToggleButtonClasses = options.additionalToggleButtonClasses;
     this.popupDropboxBreakpoint = options.popupDropboxBreakpoint;
     this.popupPosition = options.popupPosition;
     this.onServerSearch = options.onServerSearch;
@@ -996,6 +1018,9 @@ export class VirtualSelect {
       updatePositionThrottle: 100,
       name: '',
       additionalClasses: '',
+      additionalDropboxClasses: '',
+      additionalDropboxContainerClasses: '',
+      additionalToggleButtonClasses: '',
       maxValues: 0,
       showDropboxAsPopup: true,
       popupDropboxBreakpoint: '576px',

diff --git a/src/virtual-select.types.js b/src/virtual-select.types.js
@@ -43,6 +43,9 @@
  * @property {number} [maxValues=0] Maximum no.of options allowed to choose in multiple select
  * @property {number} [minValues] Minimum no.of options should be selected to succeed required validation
  * @property {string} [additionalClasses] Additional classes for wrapper element
+ * @property {string} [additionalDropboxClasses] Additional classes for dropbox element
+ * @property {string} [additionalDropboxContainerClasses] Additional classes for dropbox container element
+ * @property {string} [additionalToggleButtonClasses] Additional classes for toggle button element
  * @property {boolean} [showDropboxAsPopup=true] Show dropbox as popup on small screen like mobile
  * @property {string} [popupDropboxBreakpoint='576px'] Maximum screen width that allowed to show dropbox as popup
  * @property {string} [popupPosition=center] Position of the popup (left, center, or right)