@ekzo-dev/bootstrap-addons 5.2.24 → 5.2.26

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ekzo-dev/bootstrap-addons",
   "description": "Aurelia Bootstrap additional component",
-  "version": "5.2.24",
+  "version": "5.2.26",
   "homepage": "https://github.com/ekzo-dev/aurelia-components/tree/main/packages/bootstrap-addons",
   "repository": {
     "type": "git",
@@ -9,7 +9,7 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@ekzo-dev/bootstrap": "^5.2.18",
+    "@ekzo-dev/bootstrap": "^5.2.20",
     "@ekzo-dev/vanilla-jsoneditor": "^0.23.7",
     "@ekzo-dev/toolkit": "^1.2.4",
     "@fortawesome/free-solid-svg-icons": "^6.5.2",
@@ -21,7 +21,9 @@
     "immutable-json-patch": "^5.1.3"
   },
   "peerDependencies": {
-    "bootstrap": "^5.2.3"
+    "aurelia": "^2.0.0-beta.8",
+    "bootstrap": "^5.2.3",
+    "@popperjs/core": "^2.11.8"
   },
   "main": "src/index.ts",
   "files": [

package/src/forms/select/filter.ts

@@ -5,11 +5,13 @@ import { valueConverter } from 'aurelia';
 export class Filter {
   toView(
     list: Map<string, ISelectOption[]> | ISelectOption[],
-    search: string
+    search: string,
+    emptyOption?: ISelectOption
   ): Map<string, ISelectOption[]> | ISelectOption[] {
-    if (search === '') return list;
+    if (search === '' && emptyOption === undefined) return list;
 
-    const cb = (option: { text: string }) => option.text.toLowerCase().includes(search.toLowerCase());
+    const cb = (option: ISelectOption) =>
+      option.value !== emptyOption?.value && option.text.toLowerCase().includes(search.toLowerCase());
 
     if (list instanceof Map) {
       const result = new Map<string, ISelectOption[]>();

package/src/forms/select/select.html

@@ -28,7 +28,8 @@
       id.bind="id"
       class="form-select ${bsSize ? `form-select-${bsSize}` : ''} ${valid ? 'is-valid' : valid === false ? 'is-invalid' : ''}"
       bs-dropdown-toggle="arrow.bind: false"
-      value="${selectedOption?.group ? selectedOption.group + ' / ' : ''}${selectedOption?.text ?? ''}"
+      value="${valueText}"
+      placeholder="${emptyOption?.text ?? ''}"
       disabled.bind="disabled"
       required.bind="required"
       form.bind="form & attr"
@@ -38,26 +39,33 @@
       keydown.trigger="$event.preventDefault()"
       ref="control"
     />
-    <bs-dropdown-menu>
+    <button
+      if.bind="emptyOption && selectedOption?.value !== emptyOption?.value"
+      bs-close-button
+      type="button"
+      click.trigger="selectOption(emptyOption)"
+    ></button>
+    <bs-dropdown-menu popper-config.bind="popperConfig">
       <div bs-dropdown-item="text" if.bind="optionsCount > 10">
         <input class="form-control" placeholder="Filter options" type="search" value.bind="filter & debounce:250" />
       </div>
       <hr bs-dropdown-item="divider" if.bind="optionsCount > 10" />
       <button
         type="button"
-        repeat.for="option of ungroupedOptions | filter:filter"
-        bs-dropdown-item="active.bind: option.value === selectedOption.value; disabled.bind: option.disabled"
+        repeat.for="option of ungroupedOptions | filter:filter:emptyOption"
+        class="dropdown-item ${option.value === selectedOption?.value ? 'active' : ''}"
+        disabled.bind="option.disabled"
         click.trigger="selectOption(option)"
       >
         ${option.text || '&nbsp;'}
       </button>
-      <template repeat.for="[k, v] of groupedOptions | filter:filter">
+      <template repeat.for="[k, v] of groupedOptions | filter:filter:emptyOption">
         <h6 bs-dropdown-item="header">${k}</h6>
         <button
-          class="ps-4"
           type="button"
           repeat.for="option of v"
-          bs-dropdown-item="active.bind: option.value === selectedOption.value; disabled.bind: option.disabled"
+          class="ps-4 dropdown-item ${option.value === selectedOption?.value ? 'active' : ''}"
+          disabled.bind="option.disabled"
           click.trigger="selectOption(option)"
         >
           ${option.text || '&nbsp;'}

package/src/forms/select/select.scss

@@ -1,17 +1,40 @@
-@import '~bootstrap/scss/functions';
-@import '~bootstrap/scss/variables';
-@import '~bootstrap/scss/maps';
-@import '~bootstrap/scss/mixins';
-@import '~bootstrap/scss/forms/form-select';
-@import '~bootstrap/scss/forms/form-check';
+@import 'bootstrap/scss/functions';
+@import 'bootstrap/scss/variables';
+@import 'bootstrap/scss/maps';
+@import 'bootstrap/scss/mixins';
+@import 'bootstrap/scss/forms/form-check';
 
 bs-select {
-  display: block;
-
-  > .form-select {
+  .form-select {
     cursor: default;
   }
 
+  &:has(.btn-close) .form-select {
+    padding-right: 4rem;
+  }
+
+  .btn-close {
+    display: block;
+    position: relative;
+    box-sizing: border-box;
+    width: 0.8rem;
+    height: 0.8rem;
+    top: calc(-1px - 1.5rem);
+    left: calc(100% - 3.25rem);
+  }
+
+  .form-select-lg + .btn-close {
+    top: calc(-1px - 1.8rem);
+  }
+
+  .form-select-sm + .btn-close {
+    top: calc(-1px - 1.3rem);
+  }
+
+  &.form-floating .btn-close {
+    top: calc(-1px - 2.15rem) !important;
+  }
+
   .dropdown-menu {
     width: max-content;
     min-width: 100%;
@@ -76,3 +99,16 @@ bs-select {
     }
   }
 }
+
+/* stylelint-disable */
+.was-validated bs-select:has(.btn-close) .form-select:invalid,
+.was-validated bs-select:has(.btn-close) .form-select:valid,
+bs-select:has(.btn-close) .form-select.is-invalid,
+bs-select:has(.btn-close) .form-select.is-valid {
+  padding-right: 5.5rem !important;
+
+  + .btn-close {
+    left: calc(100% - 4.75rem);
+  }
+}
+/* stylelint-enable */

package/src/forms/select/select.stories.ts

@@ -1,3 +1,4 @@
+import { BsButton, BsOffcanvas } from '@ekzo-dev/bootstrap';
 import { extractArgTypes, Meta, Story } from '@storybook/aurelia';
 
 import { selectControl } from '../../../../../.storybook/helpers';
@@ -15,12 +16,14 @@ export default {
   args: {
     label: 'Label',
     options: [
-      { value: undefined, text: '' },
+      { value: undefined, text: 'Select option' },
       { value: '1', text: 'One', disabled: true },
       { value: '2', text: 'Two' },
       { value: '3', text: 'Three', group: 'Group' },
     ],
     value: '2',
+    floatingLabel: false,
+    valid: null,
   },
   argTypes: {
     bsSize: {
@@ -55,5 +58,23 @@ LargeOptions.args = {
   })),
 };
 
+const InModal: Story = (args) => ({
+  props: args,
+  template: `
+<button bs-button click.trigger="offcanvas.toggle()">Open modal</button>
+<bs-offcanvas component.ref="offcanvas">
+  <bs-select value.bind="value" options.bind="options" label.bind="label" style="width: 100%"></bs-select>
+  <div style="height: 2000px"></div>
+</bs-offcanvas>`,
+  components: [BsOffcanvas, BsButton],
+});
+
+InModal.args = {
+  options: Array.from({ length: 1000 }).map((v, i) => ({
+    value: i.toString(),
+    text: `Option ${i} has long content which forces dropdown menu to scale larger that select box`,
+  })),
+};
+
 // eslint-disable-next-line
-export { Overview, Multiple, LargeOptions };
+export { Overview, Multiple, LargeOptions, InModal };

package/src/forms/select/select.ts

@@ -2,7 +2,11 @@ import template from './select.html';
 
 import './select.scss';
 
+import type { Options } from '@popperjs/core';
+import type { Tooltip } from 'bootstrap';
+
 import {
+  BsCloseButton,
   BsDropdown,
   BsDropdownItem,
   BsDropdownMenu,
@@ -10,7 +14,7 @@ import {
   BsSelect as BaseBsSelect,
   ISelectOption,
 } from '@ekzo-dev/bootstrap';
-import { customElement, ICustomElementViewModel } from 'aurelia';
+import { bindable, customElement, ICustomElementViewModel, resolve } from 'aurelia';
 
 import { Filter } from './filter';
 
@@ -22,9 +26,14 @@ const BS_SIZE_MULTIPLIER = {
 @customElement({
   name: 'bs-select',
   template,
-  dependencies: [BsDropdown, BsDropdownMenu, BsDropdownToggle, BsDropdownItem, Filter],
+  dependencies: [BsDropdown, BsDropdownMenu, BsDropdownToggle, BsDropdownItem, Filter, BsCloseButton],
 })
 export class BsSelect extends BaseBsSelect implements ICustomElementViewModel {
+  @bindable()
+  emptyValue?: unknown = null;
+
+  host = resolve(HTMLElement);
+
   control!: HTMLFieldSetElement;
 
   filter: string = '';
@@ -33,6 +42,10 @@ export class BsSelect extends BaseBsSelect implements ICustomElementViewModel {
 
   deactivating: boolean = false;
 
+  emptyOption?: ISelectOption;
+
+  popperConfig: Partial<Options> | Tooltip.PopperConfigFunction | null = null;
+
   binding() {
     super.binding();
     this.deactivating = false;
@@ -47,6 +60,8 @@ export class BsSelect extends BaseBsSelect implements ICustomElementViewModel {
       this.#setHeight();
       this.#scrollToSelected();
     }
+
+    this.setPopperConfig();
   }
 
   propertyChanged(name: keyof this) {
@@ -62,11 +77,37 @@ export class BsSelect extends BaseBsSelect implements ICustomElementViewModel {
     }
   }
 
+  setPopperConfig() {
+    if (this.multiple) return;
+
+    const { host } = this;
+    const parentModal = host.closest('.modal-body,.popover-body,.offcanvas-body');
+    const dropdownMenu: HTMLElement = host.querySelector('.dropdown-menu');
+
+    if (parentModal != null) {
+      this.popperConfig = {
+        strategy: 'fixed',
+      };
+      dropdownMenu.style.minWidth = `${host.offsetWidth}px`;
+    } else {
+      this.popperConfig = null;
+      dropdownMenu.style.minWidth = undefined;
+    }
+  }
+
   selectOption(option: ISelectOption) {
     this.value = option.value;
     this.#dispatchEvents();
   }
 
+  get valueText(): string {
+    const { selectedOption, emptyOption } = this;
+
+    return emptyOption && emptyOption.value === selectedOption?.value
+      ? ''
+      : `${selectedOption?.group ? selectedOption.group + ' / ' : ''}${selectedOption?.text ?? ''}`;
+  }
+
   #dispatchEvents() {
     const change = new Event('change', { bubbles: true });
     const input = new Event('input', { bubbles: true });
@@ -102,8 +143,9 @@ export class BsSelect extends BaseBsSelect implements ICustomElementViewModel {
   get selectedOption(): ISelectOption | undefined {
     if (this['__raw__'].deactivating) return;
 
-    const { matcher, value } = this;
+    const { matcher, value, emptyValue } = this;
     let { options } = this;
+    let emptyOption: ISelectOption;
 
     if (options instanceof Object && options.constructor === Object) {
       options = Object.entries(options);
@@ -115,12 +157,19 @@ export class BsSelect extends BaseBsSelect implements ICustomElementViewModel {
     let option = (options as Array<ISelectOption | readonly [unknown, string]>).find((option) => {
       const currentValue: unknown = isEntries ? option[0] : (option as ISelectOption).value;
 
+      if (currentValue == emptyValue) {
+        emptyOption = {
+          value: currentValue,
+          text: isEntries ? option[1] : (option as ISelectOption).text,
+        } as ISelectOption;
+      }
+
       return matcher ? matcher(value, currentValue) : value === currentValue;
     });
 
     option = isEntries && option !== undefined ? { value: option[0], text: option[1] } : (option as ISelectOption);
 
-    // update value next tick if it differs from current
+    // update value next tick
     const foundValue = option?.value;
 
     if (foundValue !== value) {
@@ -128,6 +177,9 @@ export class BsSelect extends BaseBsSelect implements ICustomElementViewModel {
       void Promise.resolve().then(() => (this.value = foundValue));
     }
 
+    // update empty option next tick
+    void Promise.resolve().then(() => (this.emptyOption = emptyOption));
+
     return option;
   }
 }