@ekzo-dev/bootstrap-addons 5.2.27 → 5.2.28

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ekzo-dev/bootstrap-addons",
   "description": "Aurelia Bootstrap additional component",
-  "version": "5.2.27",
+  "version": "5.2.28",
   "homepage": "https://github.com/ekzo-dev/aurelia-components/tree/main/packages/bootstrap-addons",
   "repository": {
     "type": "git",

package/src/forms/duration-input/duration-input.scss

@@ -1,7 +1,4 @@
-@import 'bootstrap/scss/functions';
-@import 'bootstrap/scss/variables';
-@import 'bootstrap/scss/maps';
-@import 'bootstrap/scss/mixins';
+@import '@ekzo-dev/bootstrap/src/utils';
 @import 'bootstrap/scss/forms/form-control';
 
 bs-duration-input {

package/src/forms/select/filter.ts

@@ -11,7 +11,7 @@ export class Filter {
     if (search === '' && emptyOption === undefined) return list;
 
     const cb = (option: ISelectOption) =>
-      option.value !== emptyOption?.value && option.text.toLowerCase().includes(search.toLowerCase());
+      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

@@ -1,55 +1,65 @@
-<template class="${floatingLabel ? 'form-floating' : ''} ${!multiple ? 'dropdown' : ''}">
+<template class="addon ${floatingLabel ? 'form-floating' : ''}" bs-dropdown>
   <label for="${id}" if.bind="label && !floatingLabel" class="form-label">${label}</label>
-  <fieldset
-    if.bind="multiple"
-    class="form-control ${bsSize ? `form-control-${bsSize}` : ''} ${valid ? 'is-valid' : valid === false ? 'is-invalid' : ''}"
-    title.bind="title & attr"
-    name.bind="name & attr"
-    form.bind="form & attr"
+  <input
+    id="${id}"
+    class="form-select ${bsSize ? `form-select-${bsSize}` : ''} ${valid ? 'is-valid' : valid === false ? 'is-invalid' : ''}"
+    bs-dropdown-toggle="arrow.bind: false"
+    value="${valueText}"
+    placeholder="${emptyOption?.text ?? ''}"
     disabled.bind="disabled"
+    required.bind="required"
+    form.bind="form & attr"
+    name.bind="name & attr"
+    title.bind="title & attr"
+    autocomplete="off"
+    keydown.trigger="$event.preventDefault()"
     ref="control"
-    id="${id}"
-  >
-    <select if.bind="required && !value?.length" multiple required></select>
-    <div class="form-check" repeat.for="option of ungroupedOptions">
-      <input
-        class="form-check-input"
-        type="checkbox"
-        checked.bind="value"
-        model.bind="option.value"
-        disabled.bind="option.disabled"
-        id="${id+$index}"
-      />
-      <label class="form-check-label" for="${id+$index}">${option.text}</label>
-    </div>
-  </fieldset>
-  <template else>
-    <input
-      id.bind="id"
-      class="form-select ${bsSize ? `form-select-${bsSize}` : ''} ${valid ? 'is-valid' : valid === false ? 'is-invalid' : ''}"
-      bs-dropdown-toggle="arrow.bind: false"
-      value="${valueText}"
-      placeholder="${emptyOption?.text ?? ''}"
-      disabled.bind="disabled"
-      required.bind="required"
-      form.bind="form & attr"
-      name.bind="name & attr"
-      title.bind="title & attr"
-      autocomplete="off"
-      keydown.trigger="$event.preventDefault()"
-      ref="control"
-    />
-    <button
-      if.bind="emptyOption && selectedOption?.value !== emptyOption?.value && !disabled"
-      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">
+  />
+  <button if.bind="showClear" bs-close-button type="button" click.trigger="clear()"></button>
+  <bs-dropdown-menu popper-config.bind="popperConfig" auto-close.bind="multiple ? 'outside' : true">
+    <template if.bind="optionsCount > 10">
+      <div bs-dropdown-item="text">
         <input class="form-control" placeholder="Filter options" type="search" value.bind="filter & debounce:250" />
       </div>
-      <hr bs-dropdown-item="divider" if.bind="optionsCount > 10" />
+      <hr bs-dropdown-item="divider" />
+    </template>
+    <template if.bind="multiple">
+      <div
+        repeat.for="option of ungroupedOptions | filter:filter"
+        class="dropdown-item ${option.disabled ? 'disabled' : ''}"
+      >
+        <div class="form-check">
+          <input
+            class="form-check-input"
+            type="checkbox"
+            checked.bind="value"
+            model.bind="option.value"
+            disabled.bind="option.disabled"
+            matcher.bind="matcher"
+            id="${optionId($index)}"
+          />
+          <label class="form-check-label" for="${optionId($index)}">${option.text || '&nbsp;'}</label>
+        </div>
+      </div>
+      <template repeat.for="[k, v] of groupedOptions | filter:filter">
+        <h6 bs-dropdown-item="header">${k}</h6>
+        <div repeat.for="option of v" class="dropdown-item ps-4 ${option.disabled ? 'disabled' : ''}">
+          <div class="form-check">
+            <input
+              class="form-check-input"
+              type="checkbox"
+              checked.bind="value"
+              model.bind="option.value"
+              disabled.bind="option.disabled"
+              matcher.bind="matcher"
+              id="${optionId($index, $parent.$index)}"
+            />
+            <label class="form-check-label" for="${optionId($index, $parent.$index)}">${option.text || '&nbsp;'}</label>
+          </div>
+        </div>
+      </template>
+    </template>
+    <template else>
       <button
         type="button"
         repeat.for="option of ungroupedOptions | filter:filter:emptyOption"
@@ -71,8 +81,8 @@
           ${option.text || '&nbsp;'}
         </button>
       </template>
-    </bs-dropdown-menu>
-  </template>
+    </template>
+  </bs-dropdown-menu>
   <label for="${id}" if.bind="label && floatingLabel"><span>${label}</span></label>
   <div class="invalid-feedback" if.bind="invalidFeedback">${invalidFeedback}</div>
   <div class="valid-feedback" if.bind="validFeedback">${validFeedback}</div>

package/src/forms/select/select.scss

@@ -1,10 +1,7 @@
-@import 'bootstrap/scss/functions';
-@import 'bootstrap/scss/variables';
-@import 'bootstrap/scss/maps';
-@import 'bootstrap/scss/mixins';
+@import '@ekzo-dev/bootstrap/src/utils';
 @import 'bootstrap/scss/forms/form-check';
 
-bs-select {
+bs-select.addon {
   .form-select {
     cursor: default;
   }
@@ -49,63 +46,20 @@ bs-select {
     white-space: normal;
   }
 
-  > .form-control {
-    overflow: auto;
-    position: relative;
-
-    .form-check:last-of-type {
-      margin-bottom: 0;
-    }
-
-    > select {
-      position: absolute;
-      height: 100%;
-      left: 0;
-      bottom: 0;
-      opacity: 0;
-      pointer-events: none;
-    }
-  }
-
-  &.form-floating:not(.dropdown) {
-    > label {
-      height: auto;
-      width: auto;
-      transform: none !important;
-      left: $input-border-width;
-      top: $input-border-width;
-      right: 20px;
-      font-size: 85%;
-      padding-top: 7px;
-      padding-bottom: 5px;
-      opacity: 1 !important;
-      background-color: $input-bg;
-
-      @include border-radius($input-border-radius, 0);
-
-      span {
-        opacity: 0.65;
-      }
-    }
-
-    > .form-control {
-      min-height: add($form-floating-height, 0.5rem);
-      height: auto;
-      padding-top: add($form-floating-input-padding-t, 0.5rem) !important;
-      padding-bottom: $input-padding-y !important;
+  .form-check {
+    margin-bottom: 0;
 
-      &:disabled + label {
-        background-color: $input-disabled-bg;
-      }
+    label {
+      display: block;
     }
   }
 }
 
 /* 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 {
+.was-validated bs-select.addon:has(.btn-close) .form-select:invalid,
+.was-validated bs-select.addon:has(.btn-close) .form-select:valid,
+bs-select.addon:has(.btn-close) .form-select.is-invalid,
+bs-select.addon:has(.btn-close) .form-select.is-valid {
   padding-right: 5.5rem !important;
 
   + .btn-close {

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

@@ -15,13 +15,6 @@ export default {
   },
   args: {
     label: 'Label',
-    options: [
-      { 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,
   },
@@ -37,6 +30,16 @@ const Overview: Story = (args) => ({
   props: args,
 });
 
+Overview.args = {
+  options: [
+    { value: undefined, text: 'Select option' },
+    { value: '1', text: 'One', disabled: true },
+    { value: '2', text: 'Two' },
+    { value: '3', text: 'Three', group: 'Group' },
+  ],
+  value: '2',
+};
+
 const Multiple: Story = (args) => ({
   props: args,
 });
@@ -44,6 +47,11 @@ const Multiple: Story = (args) => ({
 Multiple.args = {
   multiple: true,
   value: ['2', '3'],
+  options: [
+    { value: '1', text: 'One', disabled: true },
+    { value: '2', text: 'Two' },
+    { value: '3', text: 'Three', group: 'Group' },
+  ],
 };
 
 const LargeOptions: Story = (args) => ({

package/src/forms/select/select.ts

@@ -18,11 +18,6 @@ import { bindable, customElement, ICustomElementViewModel, resolve } from 'aurel
 
 import { Filter } from './filter';
 
-const BS_SIZE_MULTIPLIER = {
-  lg: 1.125,
-  sm: 0.875,
-};
-
 @customElement({
   name: 'bs-select',
   template,
@@ -49,6 +44,10 @@ export class BsSelect extends BaseBsSelect implements ICustomElementViewModel {
   binding() {
     super.binding();
     this.deactivating = false;
+
+    if (this.multiple && !Array.isArray(this.value)) {
+      this.value = [];
+    }
   }
 
   unbinding() {
@@ -56,30 +55,10 @@ export class BsSelect extends BaseBsSelect implements ICustomElementViewModel {
   }
 
   attached() {
-    if (this.multiple) {
-      this.#setHeight();
-      this.#scrollToSelected();
-    }
-
     this.setPopperConfig();
   }
 
-  propertyChanged(name: keyof this) {
-    switch (name) {
-      case 'size':
-
-      case 'bsSize':
-
-      case 'floatingLabel':
-        if (this.multiple) {
-          setTimeout(() => this.#setHeight());
-        }
-    }
-  }
-
   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');
@@ -95,12 +74,20 @@ export class BsSelect extends BaseBsSelect implements ICustomElementViewModel {
     }
   }
 
+  optionId(index: number, parentIndex?: number): string {
+    return `${this.id}${parentIndex != null ? '-g' + parentIndex.toString() : ''}-${index}`;
+  }
+
   selectOption(option: ISelectOption) {
     this.value = option.value;
     this.#dispatchEvents();
   }
 
   get valueText(): string {
+    // if (this.multiple) {
+    //
+    // }
+
     const { selectedOption, emptyOption } = this;
 
     return emptyOption && emptyOption.value === selectedOption?.value
@@ -108,6 +95,18 @@ export class BsSelect extends BaseBsSelect implements ICustomElementViewModel {
       : `${selectedOption?.group ? selectedOption.group + ' / ' : ''}${selectedOption?.text ?? ''}`;
   }
 
+  get showClear(): boolean {
+    return (
+      !this.disabled &&
+      ((this.emptyOption && this.selectedOption?.value !== this.emptyOption.value) ||
+        (this.multiple && (this.value as unknown[]).length > 0))
+    );
+  }
+
+  clear() {
+    this.selectOption(this.multiple ? { value: [], text: '' } : this.emptyOption);
+  }
+
   #dispatchEvents() {
     const change = new Event('change', { bubbles: true });
     const input = new Event('input', { bubbles: true });
@@ -116,34 +115,14 @@ export class BsSelect extends BaseBsSelect implements ICustomElementViewModel {
     this.control.dispatchEvent(change);
   }
 
-  #setHeight(): void {
-    const { style } = this.control;
-
-    if (this.size > 0) {
-      const { borderTopWidth, borderBottomWidth, paddingTop, paddingBottom } = getComputedStyle(this.control);
-
-      style.height = `calc(${
-        this.size * 1.625 * (this.bsSize ? BS_SIZE_MULTIPLIER[this.bsSize] : 1)
-      }rem + ${borderTopWidth} + ${borderBottomWidth} + ${paddingTop} + ${paddingBottom} - 2px)`;
-    } else if (style.height) {
-      style.height = undefined;
-    }
-  }
-
-  #scrollToSelected() {
-    const selected = this.control.querySelector<HTMLInputElement>('input:checked');
-
-    if (selected) {
-      const { paddingTop } = getComputedStyle(this.control);
-
-      this.control.scrollTo({ top: selected.parentElement.offsetTop - parseInt(paddingTop) });
-    }
-  }
-
   get selectedOption(): ISelectOption | undefined {
-    if (this['__raw__'].deactivating) return;
+    const thisRaw = this['__raw__'] as this;
+
+    if (thisRaw.deactivating || this.multiple) return;
 
-    const { matcher, value, emptyValue } = this;
+    const { value, emptyValue } = this;
+    // take matcher from unproxied object to avoid unnecessary getter call
+    const { matcher } = thisRaw;
     let { options } = this;
     let emptyOption: ISelectOption;