diff --git a/docs/assets/script.js b/docs/assets/script.js index 3d7cc8f..a1984b9 100644 --- a/docs/assets/script.js +++ b/docs/assets/script.js @@ -352,4 +352,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 index 810d401..88adf8c 100644 --- 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 index c4644be..2fa5df3 100644 --- a/docs/assets/virtual-select.js +++ b/docs/assets/virtual-select.js @@ -636,7 +636,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 () { @@ -668,6 +668,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, "\"") : ''; @@ -677,6 +678,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) { @@ -709,7 +713,7 @@ var VirtualSelect = /*#__PURE__*/function () { } // eslint-disable-next-line no-trailing-spaces - var html = "
\n \n
\n
\n ").concat(this.placeholder, "\n
\n
\n
\n \n
\n
\n\n ").concat(this.renderDropbox({ + var html = "
\n \n
\n
\n ").concat(this.placeholder, "\n
\n
\n
\n \n
\n
\n\n ").concat(this.renderDropbox({ wrapperClasses: wrapperClasses }), "\n
"); this.$ele.innerHTML = html; @@ -744,9 +748,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 = "
\n
 
\n
\n
\n\n
\n
\n\n
\n
\n
\n
\n\n
\n
").concat(this.noOptionsText, "
\n
").concat(this.noSearchResultsText, "
\n\n \n
\n
 
\n
"); + var html = "
\n
 
\n
\n
\n\n
\n
\n\n
\n
\n
\n
\n\n
\n
").concat(this.noOptionsText, "
\n
").concat(this.noSearchResultsText, "
\n\n \n
\n
 
\n
"); if ($wrapper) { var $dropboxWrapper = document.createElement('div'); this.$dropboxWrapper = $dropboxWrapper; @@ -1393,6 +1405,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/examples.md b/docs/examples.md index a5281f5..57ceb1e 100644 --- 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 @@ -407,6 +408,21 @@ document.querySelector('#sample-form').addEventListener('submit', function() { } }); ``` +## Custom styling + +Use `additionalClasses`, `additionalDropboxClasses`, `additionalDropboxContainerClasses` and `additionalToggleButtonClasses` to customize the styling of your dropdown + +
+ +```js +VirtualSelect.init({ + ... + additionalClasses: 'custom-wrapper', + additionalDropboxClasses: 'custom-dropbox', + additionalDropboxContainerClasses: 'custom-dropbox-container', + additionalToggleButtonClasses: 'custom-toggle-button', +}); +```