@ekzo-dev/bootstrap-addons 5.3.18 → 5.3.20

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ekzo-dev/bootstrap-addons",
   "description": "Aurelia Bootstrap additional component",
-  "version": "5.3.18",
+  "version": "5.3.20",
   "homepage": "https://github.com/ekzo-dev/aurelia-components/tree/main/packages/bootstrap-addons",
   "repository": {
     "type": "git",
@@ -9,9 +9,9 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@ekzo-dev/bootstrap": "~5.3.4",
+    "@ekzo-dev/bootstrap": "~5.3.6",
     "@ekzo-dev/vanilla-jsoneditor": "~3.11.0",
-    "@ekzo-dev/toolkit": "^1.2.4",
+    "@ekzo-dev/toolkit": "^1.3.0",
     "@fortawesome/free-solid-svg-icons": "^7.0.1",
     "@types/json-schema": "^7.0.14",
     "@js-temporal/polyfill": "^0.5.1",

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

@@ -1,14 +1,8 @@
 <template class="${floatingLabel ? 'form-floating' : ''}">
   <label for.one-time="id" if.bind="label && !floatingLabel" class="form-label">${label}</label>
   <fieldset class="${classes}" disabled.bind="disabled">
-    <input
-      type="text"
-      id.one-time="id"
-      required.bind="required"
-      value.bind="value"
-      form.bind="form & attr"
-      focus.trigger="focus()"
-    />
+    <input type="text" id.one-time="id" value.bind="value" focus.trigger="focus()" ref="control" />
+
     <input type="number" min="0" value.bind="duration.years" placeholder="--" />
     <span>${labels.years}</span>
     <input type="number" min="0" value.bind="duration.months" placeholder="--" />

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

@@ -45,7 +45,7 @@ export class BsDurationInput extends BaseField implements EventListenerObject {
   bsSize?: Size;
 
   @bindable(coerceBoolean)
-  floatingLabel: boolean = false;
+  floatingLabel: boolean = this.config.floatingLabels;
 
   duration: Duration = {};
 
@@ -101,15 +101,12 @@ export class BsDurationInput extends BaseField implements EventListenerObject {
   private _parseDuration(value: string) {
     try {
       const duration = Temporal.Duration.from(value);
+      const result = {};
 
-      this.duration = {
-        years: duration.years,
-        months: duration.months,
-        days: duration.days,
-        hours: duration.hours,
-        minutes: duration.minutes,
-        seconds: duration.seconds,
-      };
+      durationKeys.forEach((key) => {
+        result[key] = duration[key] ? duration[key].toString() : '';
+      });
+      this.duration = result;
     } catch (error) {
       if (error instanceof RangeError) {
         console.warn(`[bs-duration-input] ${error.message}`);

package/src/forms/select-dropdown/index.ts

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

package/src/forms/{select/select.scss → select-dropdown/select-dropdown.scss}

@@ -1,7 +1,10 @@
 @import '@ekzo-dev/bootstrap/src/utils';
 @import 'bootstrap/scss/forms/form-check';
 
-bs-select.addon {
+bs-select-dropdown {
+  display: block;
+  width: 100%;
+
   .form-select {
     cursor: default;
   }
@@ -56,10 +59,10 @@ bs-select.addon {
 }
 
 /* stylelint-disable */
-.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 {
+.was-validated bs-select-dropdown:has(.btn-close) .form-select:invalid,
+.was-validated bs-select-dropdown:has(.btn-close) .form-select:valid,
+bs-select-dropdown:has(.btn-close) .form-select.is-invalid,
+bs-select-dropdown:has(.btn-close) .form-select.is-valid {
   padding-right: 5.5rem !important;
 
   + .btn-close {

package/src/forms/{select/select.ts → select-dropdown/select-dropdown.ts}

@@ -1,6 +1,6 @@
-import template from './select.html';
+import template from './select-dropdown.html';
 
-import './select.scss';
+import './select-dropdown.scss';
 
 import type { Options } from '@popperjs/core';
 import type { Tooltip } from 'bootstrap';
@@ -11,24 +11,22 @@ import {
   BsDropdownItem,
   BsDropdownMenu,
   BsDropdownToggle,
-  BsSelect as BaseBsSelect,
+  BsSelect,
   ISelectOption,
 } from '@ekzo-dev/bootstrap';
-import { bindable, customElement, ICustomElementViewModel, resolve } from 'aurelia';
+import { bindable, customElement, ICustomElementViewModel, queueTask } from 'aurelia';
 
 import { Filter } from './filter';
 
 @customElement({
-  name: 'bs-select',
+  name: 'bs-select-dropdown',
   template,
   dependencies: [BsDropdown, BsDropdownMenu, BsDropdownToggle, BsDropdownItem, Filter, BsCloseButton],
 })
-export class BsSelect extends BaseBsSelect implements ICustomElementViewModel {
+export class BsSelectDropdown extends BsSelect implements ICustomElementViewModel {
   @bindable()
   emptyValue?: unknown = null;
 
-  host = resolve(HTMLElement);
-
   filter: string = '';
 
   emptyOption?: ISelectOption;
@@ -36,8 +34,6 @@ export class BsSelect extends BaseBsSelect implements ICustomElementViewModel {
   popperConfig: Partial<Options> | Tooltip.PopperConfigFunction | null = null;
 
   binding() {
-    super.binding();
-
     if (this.multiple && !Array.isArray(this.value)) {
       this.value = [];
     }
@@ -47,7 +43,7 @@ export class BsSelect extends BaseBsSelect implements ICustomElementViewModel {
     this.setPopperConfig();
   }
 
-  valueChanged(value: unknown): void {
+  valueChanged(value: unknown) {
     if (this.multiple && !Array.isArray(value)) {
       this.value = [];
     }
@@ -159,12 +155,12 @@ export class BsSelect extends BaseBsSelect implements ICustomElementViewModel {
     const foundValue = option?.value;
 
     if (foundValue !== value) {
-      console.info(`[bootstrap-addons] updating <bs-select> [id=${this.id}] value to`, foundValue);
-      void Promise.resolve().then(() => (this.value = foundValue));
+      queueTask(() => (this.value = foundValue));
     }
 
     // update empty option next tick
-    void Promise.resolve().then(() => (this.emptyOption = emptyOption));
+    // TODO: investigate if next tick is still needed
+    queueTask(() => (this.emptyOption = emptyOption));
 
     return option;
   }

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

@@ -0,0 +1,89 @@
+// import { BsButton, BsOffcanvas } from '@ekzo-dev/bootstrap';
+// import { extractArgTypes, Meta, Story } from '@storybook/aurelia';
+//
+// import { selectControl } from '../../../../../.storybook/helpers';
+//
+// import { BsSelectDropdown } from '.';
+//
+// export default {
+//   title: 'Ekzo / Bootstrap Addons / Forms / Select',
+//   component: BsSelectDropdown,
+//   parameters: {
+//     actions: {
+//       handles: ['change', 'input'],
+//     },
+//   },
+//   args: {
+//     label: 'Label',
+//     floatingLabel: false,
+//     valid: null,
+//   },
+//   argTypes: {
+//     bsSize: {
+//       ...extractArgTypes(BsSelectDropdown).bsSize,
+//       ...selectControl(['', 'sm', 'lg']),
+//     },
+//   },
+// } as Meta;
+//
+// 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,
+// });
+//
+// 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) => ({
+//   props: args,
+//   template:
+//     '<bs-select value.bind="value" options.bind="options" label.bind="label" style="width: 400px; max-width: 100%"></bs-select>',
+// });
+//
+// LargeOptions.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`,
+//   })),
+// };
+//
+// 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, InModal };

package/src/index.ts

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

package/src/forms/select/index.ts

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

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

@@ -1,89 +0,0 @@
-import { BsButton, BsOffcanvas } from '@ekzo-dev/bootstrap';
-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',
-    floatingLabel: false,
-    valid: null,
-  },
-  argTypes: {
-    bsSize: {
-      ...extractArgTypes(BsSelect).bsSize,
-      ...selectControl(['', 'sm', 'lg']),
-    },
-  },
-} as Meta;
-
-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,
-});
-
-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) => ({
-  props: args,
-  template:
-    '<bs-select value.bind="value" options.bind="options" label.bind="label" style="width: 400px; max-width: 100%"></bs-select>',
-});
-
-LargeOptions.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`,
-  })),
-};
-
-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, InModal };