@ekzo-dev/bootstrap-addons 5.2.7 → 5.2.8

package/package.json

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

package/src/forms/select/filter.ts

@@ -0,0 +1,29 @@
+import { ISelectOption } from '@ekzo-dev/bootstrap';
+import { valueConverter } from 'aurelia';
+
+@valueConverter('filter')
+export class Filter {
+  toView(
+    list: Map<string, ISelectOption[]> | ISelectOption[],
+    search: string
+  ): Map<string, ISelectOption[]> | ISelectOption[] {
+    const cb = (option: { text: string }) => option.text.toLowerCase().includes(search.toLowerCase());
+
+    if (list instanceof Map) {
+      const result = new Map<string, ISelectOption[]>();
+
+      list.forEach((v, k) => {
+        const matchedOptions = v.filter(cb);
+        // const matchedGroup = cb({ text: k });
+
+        if (matchedOptions.length /* || matchedGroup */) {
+          result.set(k, matchedOptions);
+        }
+      });
+
+      return result;
+    } else {
+      return list.filter(cb);
+    }
+  }
+}

package/src/forms/select/index.ts

@@ -0,0 +1 @@
+export * from './select';

package/src/forms/select/select.html

@@ -0,0 +1,65 @@
+<template class="${floatingLabel ? 'form-floating' : ''}">
+  <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"
+    disabled.bind="disabled"
+    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>
+  <div else bs-dropdown>
+    <button
+      class="form-select ${bsSize ? `form-select-${bsSize}` : ''} ${valid ? 'is-valid' : valid === false ? 'is-invalid' : ''}"
+      type="button"
+      bs-dropdown-toggle="arrow.bind: false"
+      disabled.bind="disabled"
+    >
+      ${selectedOption?.group ? selectedOption.group + ' / ' : ''}${selectedOption?.text ?? '&nbsp;'}
+    </button>
+    <bs-dropdown-menu>
+      <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" />
+      <button
+        type="button"
+        repeat.for="option of ungroupedOptions | filter:filter"
+        bs-dropdown-item="active.bind: option === selectedOption; disabled.bind: option.disabled"
+        click.trigger="selectOption(option)"
+      >
+        ${option.text}
+      </button>
+      <template repeat.for="[k, v] of groupedOptions | filter:filter">
+        <h6 bs-dropdown-item="header">${k}</h6>
+        <button
+          class="ps-4"
+          type="button"
+          repeat.for="option of v"
+          bs-dropdown-item="active.bind: option === selectedOption; disabled.bind: option.disabled"
+          click.trigger="selectOption(option)"
+        >
+          ${option.text}
+        </button>
+      </template>
+    </bs-dropdown-menu>
+  </div>
+  <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>
+</template>

package/src/forms/select/select.scss

@@ -0,0 +1,75 @@
+@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';
+
+bs-select {
+  display: block;
+
+  .form-select {
+    text-align: left;
+  }
+
+  bs-dropdown-menu {
+    width: 100%;
+    max-height: 100vh;
+    overflow-y: auto;
+  }
+
+  .search {
+    padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);
+  }
+
+  > .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 {
+    > 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;
+
+      &:disabled + label {
+        background-color: $input-disabled-bg;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,57 @@
+import { extractArgTypes, Meta, Story } from '@storybook/aurelia';
+
+import { selectControl } from '../../../../../.storybook/helpers';
+
+import { BsSelect } from '.';
+
+export default {
+  title: 'Ekzo / Bootstrap Addons / Forms / Select',
+  component: BsSelect,
+  parameters: {
+    actions: {
+      handles: ['change', 'input'],
+    },
+  },
+  args: {
+    label: 'Label',
+    options: [
+      { value: '1', text: 'One', disabled: true },
+      { value: '2', text: 'Two' },
+      { value: '3', text: 'Three', group: 'Group' },
+    ],
+    value: '2',
+  },
+  argTypes: {
+    bsSize: {
+      ...extractArgTypes(BsSelect).bsSize,
+      ...selectControl(['', 'sm', 'lg']),
+    },
+  },
+} as Meta;
+
+const Overview: Story = (args) => ({
+  props: args,
+});
+
+const Multiple: Story = (args) => ({
+  props: args,
+});
+
+Multiple.args = {
+  multiple: true,
+  value: ['2', '3'],
+};
+
+const LargeOptions: Story = (args) => ({
+  props: args,
+});
+
+LargeOptions.args = {
+  options: Array.from({ length: 1000 }).map((v, i) => ({
+    value: i,
+    text: `Option ${i}`,
+  })),
+};
+
+// eslint-disable-next-line
+export { Overview, Multiple, LargeOptions };

package/src/forms/select/select.ts

@@ -0,0 +1,105 @@
+import template from './select.html';
+
+import './select.scss';
+
+import {
+  BsDropdown,
+  BsDropdownItem,
+  BsDropdownMenu,
+  BsDropdownToggle,
+  BsSelect as BaseBsSelect,
+  ISelectOption,
+} from '@ekzo-dev/bootstrap';
+import { coerceBoolean } from '@ekzo-dev/toolkit';
+import { bindable, customElement, ICustomElementViewModel } from 'aurelia';
+
+import { Filter } from './filter';
+
+const BS_SIZE_MULTIPLIER = {
+  lg: 1.125,
+  sm: 0.875,
+};
+
+@customElement({
+  name: 'bs-select',
+  template,
+  dependencies: [BsDropdown, BsDropdownMenu, BsDropdownToggle, BsDropdownItem, Filter],
+})
+export class BsSelect extends BaseBsSelect implements ICustomElementViewModel {
+  @bindable(coerceBoolean)
+  resetUnknownValue: boolean = true;
+
+  control!: HTMLFieldSetElement;
+
+  filter: string = '';
+
+  attached() {
+    if (this.multiple) {
+      this.#setHeight();
+      this.#scrollToSelected();
+    }
+  }
+
+  propertyChanged(name: keyof this) {
+    switch (name) {
+      case 'size':
+
+      case 'bsSize':
+
+      case 'floatingLabel':
+        if (this.multiple) {
+          setTimeout(() => this.#setHeight());
+        }
+    }
+  }
+
+  selectOption(option: ISelectOption) {
+    this.value = option.value;
+  }
+
+  #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 {
+    const { matcher, value } = this;
+    let { options } = this;
+
+    if (options instanceof Object && options.constructor === Object) {
+      options = Object.entries(options);
+    }
+
+    const option = (options as Array<ISelectOption | readonly [unknown, string]>).find((option) => {
+      const val: unknown = Array.isArray(option) ? option[0] : (option as ISelectOption).value;
+
+      return matcher ? matcher(value, val) : value === val;
+    });
+
+    // reset value next tick if needed
+    if (option === undefined && value !== undefined && this.resetUnknownValue) {
+      Promise.resolve().then(() => (this.value = undefined));
+    }
+
+    return Array.isArray(option) ? { value: option[0], text: option[1] } : (option as ISelectOption);
+  }
+}

package/src/index.ts

@@ -1 +1,2 @@
 export * from './forms/json-input';
+export * from './forms/select';