@roadtrip/components 2.24.1 → 2.27.0

package/dist/collection/components/range/range.js

@@ -1,4 +1,4 @@
-import { Component, Host, h, Element, Prop, Event, Watch } from '@stencil/core';
+import { Component, h, Element, Prop, Event, Watch } from '@stencil/core';
 export class Range {
   constructor() {
     /**
@@ -27,6 +27,7 @@ export class Range {
    * Update the native input element when the value changes
    */
   valueChanged() {
+    this.roadchange.emit({ value: this.value == null ? this.value : this.value.toString() });
     this.roadChange.emit({ value: this.value == null ? this.value : this.value.toString() });
   }
   getValue() {
@@ -36,11 +37,10 @@ export class Range {
   }
   render() {
     const value = this.getValue();
-    return (h(Host, null,
-      h("div", { class: "form-range", style: { '--min:': this.min, '--max': this.max, '--value': value } },
-        this.showValue && h("output", null),
-        h("input", { type: "range", class: "form-range-input", id: this.rangeId, min: this.min, max: this.max, value: value, onInput: this.onInput }),
-        h("div", { class: "form-range-progress" }))));
+    return (h("div", { class: "form-range", style: { '--min:': this.min, '--max': this.max, '--value': value } },
+      this.showValue && h("output", null),
+      h("input", { type: "range", class: "form-range-input", id: this.rangeId, min: this.min, max: this.max, value: value, onInput: this.onInput }),
+      h("div", { class: "form-range-progress" })));
   }
   static get is() { return "road-range"; }
   static get encapsulation() { return "scoped"; }
@@ -158,8 +158,8 @@ export class Range {
     }
   }; }
   static get events() { return [{
-      "method": "roadChange",
-      "name": "roadChange",
+      "method": "roadchange",
+      "name": "roadchange",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -172,6 +172,24 @@ export class Range {
         "resolved": "{ value: string | null | undefined; }",
         "references": {}
       }
+    }, {
+      "method": "roadChange",
+      "name": "roadChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "internal",
+            "text": undefined
+          }],
+        "text": ""
+      },
+      "complexType": {
+        "original": "{\n    value: string | undefined | null;\n  }",
+        "resolved": "{ value: string | null | undefined; }",
+        "references": {}
+      }
     }]; }
   static get elementRef() { return "el"; }
   static get watchers() { return [{

package/dist/collection/components/range/range.stories.js

@@ -1,44 +1,51 @@
 import { html } from 'lit-html';
+import { ifDefined } from 'lit-html/directives/if-defined';
 
 export default {
   title: 'Forms/Range',
   component: 'road-range',
+  argTypes: {
+    min: {
+      control: 'number',
+    },
+    max: {
+      control: 'number',
+    },
+    step: {
+      control: 'number',
+    },
+    value: {
+      control: 'number',
+    },
+    'show-value': {
+      control: 'boolean',
+    },
+    'range-id': {
+      control: 'text',
+    },
+    roadchange: {
+      action: 'roadchange',
+      control: {
+        type: null,
+      },
+    },
+  },
+  args: {
+    min: 0,
+    max: 10,
+    step: null,
+    value: 8,
+    'show-value': null,
+  },
 };
 
 export const Playground = (args) => html`
   <road-range
-    min="${args.min}" 
-    max="${args.max}"
-    step="${args.step}" 
-    value="${args.value}"
-    show-value="${args['show-value']}"
-    @roadChange=${event => args.roadChange(event.detail.value)}
+    min="${ifDefined(args.min)}" 
+    max="${ifDefined(args.max)}"
+    step="${ifDefined(args.step)}" 
+    value="${ifDefined(args.value)}"
+    show-value="${ifDefined(args['show-value'])}"
+    @roadchange=${event => args.roadchange(event.detail.value)}
   ></road-range>
 `;
-Playground.args = {
-  min: '0',
-  max: '10',
-  step: '1',
-  value: '8',
-  'show-value': false,
-};
-Playground.argTypes = {
-  min: {
-    control: 'number',
-  },
-  max: {
-    control: 'number',
-  },
-  step: {
-    control: 'number',
-  },
-  value: {
-    control: 'number',
-  },
-  'show-value': {
-    control: 'boolean',
-  },
-  roadChange: {
-    action: 'roadChange',
-  },
-};

package/dist/collection/components/rating/rating.stories.js

@@ -1,45 +1,54 @@
 import { html } from 'lit-html';
+import { ifDefined } from 'lit-html/directives/if-defined';
 
 export default {
   title: 'Listing/Rating',
   component: 'road-rating',
+  argTypes: {
+    rate: {
+      control: {
+        type: 'number',
+        min: '0',
+        max: '5',
+      },
+    },
+    reviews: {
+      control: {
+        type: 'number',
+        min: '0',
+      },
+    },
+    'reviews-text': {
+      control: 'text',
+    },
+  },
 };
 
-export const Playground = (args) => html`
-  <road-rating rate="${args.rate}" reviews="${args.reviews}" reviews-text="${args['reviews-text']}"></road-rating>
+const Template = (args) => html`
+<road-rating 
+  rate="${ifDefined(args.rate)}" 
+  reviews="${ifDefined(args.reviews)}" 
+  reviews-text="${ifDefined(args['reviews-text'])}" 
+></road-rating>
 `;
+
+export const Playground = Template.bind({});
 Playground.args = {
-  rate: '3',
-  reviews: '5',
+  rate: 3,
+  reviews: 5,
   'reviews-text': 'reviews',
 };
-Playground.argTypes = {
-  rate: {
-    control: {
-      type: 'number',
-      min: '0',
-      max: '5',
-    },
-  },
-  reviews: {
-    control: {
-      type: 'number',
-      min: '0',
-    },
-  },
-  'reviews-text': {
-    control: 'text',
-  },
-};
 
-export const MinRating = () => html`
-  <road-rating></road-rating>
-`;
+export const MinRating = Template.bind({});
 
-export const Rating = () => html`
-  <road-rating rate="3.5" reviews="4"></road-rating>
-`;
+export const Rating = Template.bind({});
+Rating.args = {
+  rate: 3.5,
+  reviews: 4,
+};
 
-export const MaxRating = () => html`
-  <road-rating rate="5" reviews="50"></road-rating>
-`;
+export const MaxRating = Template.bind({});
+MaxRating.args = {
+  rate: 5,
+  reviews: 50,
+};

package/dist/collection/components/select/select.js

@@ -41,13 +41,18 @@ export class Select {
       }
     };
     this.onBlur = () => {
+      this.roadblur.emit();
       this.roadBlur.emit();
     };
     this.onFocus = () => {
+      this.roadfocus.emit();
       this.roadFocus.emit();
     };
   }
   valueChanged() {
+    this.roadchange.emit({
+      value: this.value,
+    });
     this.roadChange.emit({
       value: this.value,
     });
@@ -254,8 +259,8 @@ export class Select {
     }
   }; }
   static get events() { return [{
-      "method": "roadChange",
-      "name": "roadChange",
+      "method": "roadchange",
+      "name": "roadchange",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -268,15 +273,66 @@ export class Select {
         "resolved": "{ value: string | null | undefined; }",
         "references": {}
       }
+    }, {
+      "method": "roadChange",
+      "name": "roadChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "internal",
+            "text": undefined
+          }],
+        "text": ""
+      },
+      "complexType": {
+        "original": "{\n    value: string | undefined | null\n  }",
+        "resolved": "{ value: string | null | undefined; }",
+        "references": {}
+      }
+    }, {
+      "method": "roadfocus",
+      "name": "roadfocus",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the select has focus."
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
     }, {
       "method": "roadFocus",
       "name": "roadFocus",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "internal",
+            "text": undefined
+          }],
+        "text": ""
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }, {
+      "method": "roadblur",
+      "name": "roadblur",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
       "docs": {
         "tags": [],
-        "text": "Emitted when the select has focus."
+        "text": "Emitted when the select loses focus."
       },
       "complexType": {
         "original": "void",
@@ -290,8 +346,11 @@ export class Select {
       "cancelable": true,
       "composed": true,
       "docs": {
-        "tags": [],
-        "text": "Emitted when the select loses focus."
+        "tags": [{
+            "name": "internal",
+            "text": undefined
+          }],
+        "text": ""
       },
       "complexType": {
         "original": "void",

package/dist/collection/components/select/select.stories.js

@@ -6,108 +6,100 @@ export default {
   component: 'road-select',
   parameters: {
     actions: {
-      handles: ['roadBlur', 'roadFocus'],
+      handles: ['roadblur', 'roadfocus'],
     },
   },
-};
-
-export const Playground = (args) => {
-  const options = [
-    { value: 'link1', label: 'link1' },
-    { value: 'link2', label: 'link2' },
-    { value: 'link3', label: 'link3' }
-  ];
-
-  return html`
-    <road-select 
-      .options=${options} 
-      label="${args.label}"
-      disabled="${args.disabled}"
-      required="${args.required}"
-      autofocus="${args.autofocus}"
-      error="${ifDefined(args.error)}"
-      size="${ifDefined(args.size)}"
-      @roadChange=${event => args.roadChange(event.detail.value)}
-    ></road-select>
-  `;
-};
-Playground.args = {
-  disabled: false,
-  required: false,
-  label: 'Label',
-  autofocus: false,
-};
-Playground.argTypes = {
-  disabled: {
-    control: 'boolean',
-  },
-  required: {
-    control: 'boolean',
-  },
-  autofocus: {
-    control: 'boolean',
-  },
-  error: {
-    control: 'text',
-  },
-  label: {
-    control: 'text',
-  },
-  name: {
-    control: 'text',
-  },
-  size: {
-    control: 'number',
+  argTypes: {
+    disabled: {
+      control: 'boolean',
+    },
+    required: {
+      control: 'boolean',
+    },
+    autofocus: {
+      control: 'boolean',
+    },
+    error: {
+      control: 'text',
+    },
+    label: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+    size: {
+      control: 'number',
+    },
+    'select-id': {
+      control: 'text',
+    },
+    value: {
+      control: 'text',
+    },
+    roadblur: {
+      control: {
+        type: null,
+      },
+    },
+    roadfocus: {
+      control: {
+        type: null,
+      },
+    },
+    roadchange: {
+      action: 'roadchange',
+      control: {
+        type: null,
+      },
+    },
   },
-  roadChange: {
-    action: 'roadChange',
+  args: {
+    options: [
+      { value: 'link1', label: 'link1' },
+      { value: 'link2', label: 'link2' },
+      { value: 'link3', label: 'link3' }
+    ],
+    disabled: null,
+    required: null,
+    label: 'Label',
+    autofocus: null,
   },
 };
 
-export const Default = () => {
-  const options = [
-    { value: 'link1', label: 'link1' },
-    { value: 'link2', label: 'link2' },
-    { value: 'link3', label: 'link3' }
-  ];
+const Template = (args) => html`
+  <road-select 
+    .options=${args.options}
+    label="${ifDefined(args.label)}"
+    disabled="${ifDefined(args.disabled)}"
+    required="${ifDefined(args.required)}"
+    autofocus="${ifDefined(args.autofocus)}"
+    error="${ifDefined(args.error)}"
+    size="${ifDefined(args.size)}"
+    select-id="${ifDefined(args['select-id'])}"
+    value="${ifDefined(args.value)}"
+    @roadchange=${event => args.roadchange(event.detail.value)}
+  ></road-select>
+`;
 
-  return html`
-    <road-select .options=${options} label="Label" required></road-select>
-  `;
-};
+export const Playground = Template.bind({});
 
-export const WithValue = () => {
-  const options = [
+export const WithValue = Template.bind({});
+WithValue.args = {
+  options: [
     { value: 'link1', label: 'link1', selected: true },
     { value: 'link2', label: 'link2' },
     { value: 'link3', label: 'link3' }
-  ];
-
-  return html`
-    <road-select .options=${options} label="Label" required></road-select>
-  `;
+  ],
+  value: 'link1',
 };
 
-export const Disabled = () => {
-  const options = [
-    { value: 'link1', label: 'link1' },
-    { value: 'link2', label: 'link2' },
-    { value: 'link3', label: 'link3' }
-  ];
-
-  return html`
-    <road-select .options=${options} label="Label" disabled></road-select>
-  `;
+export const Disabled = Template.bind({});
+Disabled.args = {
+  disabled: true,
 };
 
-export const Error = () => {
-  const options = [
-    { value: 'link1', label: 'link1' },
-    { value: 'link2', label: 'link2' },
-    { value: 'link3', label: 'link3' }
-  ];
-
-  return html`
-    <road-select .options=${options} label="Label" required error="Select an item"></road-select>
-  `;
-};
+export const Error = Template.bind({});
+Error.args = {
+  error: 'Select an item',
+};

package/dist/collection/components/select-filter/select-filter.js

@@ -1,4 +1,5 @@
 import { Component, Element, Host, Listen, Prop, State, h, Event } from '@stencil/core';
+import Fuse from 'fuse.js';
 /**
  * @slot  - Input element for the widget, it should be a road-input element.
  */
@@ -10,6 +11,15 @@ export class SelectFilter {
      * List of options of the select
      */
     this.options = [];
+    /**
+     * Options to pass to the fuse.js instance.
+     * See https://fusejs.io/api/options.html for valid options
+     */
+    this.parameters = {
+      keys: ["value", "label"],
+      threshold: 0.3,
+      ignoreLocation: true,
+    };
     /**
      * If `false`, the user can submit custom value
      */
@@ -17,6 +27,10 @@ export class SelectFilter {
     this.onClick = (value, label) => {
       this.el.querySelector('road-input').value = label;
       this.isOpen = false;
+      this.roadselected.emit({
+        value: value.toString(),
+        label: label,
+      });
       this.roadSelected.emit({
         value: value.toString(),
         label: label,
@@ -32,16 +46,19 @@ export class SelectFilter {
   onClickOutside(event) {
     if (this.isOpen && !this.el.contains(event.target)) {
       this.isOpen = false;
-      if (this.onlySelect) {
+      const value = this.el.querySelector('road-input').value;
+      if (this.onlySelect && !this.options.some(option => option['label'] === value)) {
         this.el.querySelector('road-input').value = '';
       }
     }
   }
   render() {
+    const fuseSearch = new Fuse(this.options, this.parameters);
+    const options = this.currentValue === '' ? this.options.map((doc, idx) => ({ item: doc, score: 1, refIndex: idx })) : fuseSearch.search(this.currentValue);
     return (h(Host, null,
       h("slot", null),
       this.isOpen &&
-        h("ul", { class: "select-filter-list", role: "listbox" }, this.options && this.options.filter(element => element.label.replace(/(<([^>]+)>)/gi, "").toLowerCase().indexOf(this.currentValue) > -1).map(option => (h("li", { class: "select-filter-item", role: "option", onClick: () => this.onClick(option.value, option.label.replace(/(<([^>]+)>)/gi, "")), innerHTML: option.label }))))));
+        h("ul", { class: "select-filter-list", role: "listbox" }, options.map(option => (h("li", { class: "select-filter-item", role: "option", onClick: () => this.onClick(option.item.value, option.item.label.replace(/(<([^>]+)>)/gi, "")), innerHTML: option.item.label }))))));
   }
   static get is() { return "road-select-filter"; }
   static get encapsulation() { return "scoped"; }
@@ -72,6 +89,24 @@ export class SelectFilter {
       },
       "defaultValue": "[]"
     },
+    "parameters": {
+      "type": "any",
+      "mutable": false,
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Options to pass to the fuse.js instance.\nSee https://fusejs.io/api/options.html for valid options"
+      },
+      "attribute": "parameters",
+      "reflect": false,
+      "defaultValue": "{\n    keys: [\"value\", \"label\"],\n    threshold: 0.3,\n    ignoreLocation: true,\n  }"
+    },
     "onlySelect": {
       "type": "boolean",
       "mutable": false,
@@ -96,8 +131,8 @@ export class SelectFilter {
     "currentValue": {}
   }; }
   static get events() { return [{
-      "method": "roadSelected",
-      "name": "roadSelected",
+      "method": "roadselected",
+      "name": "roadselected",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -110,6 +145,24 @@ export class SelectFilter {
         "resolved": "{ value: string | null | undefined; label: string; }",
         "references": {}
       }
+    }, {
+      "method": "roadSelected",
+      "name": "roadSelected",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "internal",
+            "text": undefined
+          }],
+        "text": ""
+      },
+      "complexType": {
+        "original": "{\n    value: string | undefined | null,\n    label: string\n  }",
+        "resolved": "{ value: string | null | undefined; label: string; }",
+        "references": {}
+      }
     }]; }
   static get elementRef() { return "el"; }
   static get listeners() { return [{
@@ -118,12 +171,24 @@ export class SelectFilter {
       "target": undefined,
       "capture": false,
       "passive": false
+    }, {
+      "name": "roadfocus",
+      "method": "handleFocus",
+      "target": undefined,
+      "capture": false,
+      "passive": false
     }, {
       "name": "roadChange",
       "method": "handleChange",
       "target": undefined,
       "capture": false,
       "passive": false
+    }, {
+      "name": "roadchange",
+      "method": "handleChange",
+      "target": undefined,
+      "capture": false,
+      "passive": false
     }, {
       "name": "click",
       "method": "onClickOutside",