@roadtrip/components 2.23.0 → 2.25.1

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.css

@@ -3,9 +3,8 @@
  *
  * Index
  * - Select
- * - Select label
- * - Select error
- *
+ * - Label
+ * - Error
  */
 
 
@@ -84,7 +83,7 @@
   opacity: 1;
 }
 
-/* SELECT LABEL
+/* LABEL
  -------------------- */
 
 .form-select-label {
@@ -100,7 +99,7 @@
   transform-origin: 0 0;
 }
 
-/* SELECT ERROR
+/* ERROR
  -------------------- */
 
 .invalid-feedback {

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

@@ -9,105 +9,97 @@ export default {
       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.css

@@ -6,7 +6,6 @@
  * Index
  * - List
  * - Item
- *
  */
 
 :host {

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
      */
@@ -19,7 +29,7 @@ export class SelectFilter {
       this.isOpen = false;
       this.roadSelected.emit({
         value: value.toString(),
-        label: label
+        label: label,
       });
     };
   }
@@ -32,16 +42,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.toLowerCase().indexOf(this.currentValue) > -1).map(option => (h("li", { class: "select-filter-item", role: "option", onClick: () => this.onClick(option.value, option.label) }, 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 +85,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,

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

@@ -1,104 +1,114 @@
 import { html } from 'lit-html';
+import { ifDefined } from 'lit-html/directives/if-defined';
+import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
 
 export default {
   title: 'Forms/Select Filter',
   component: 'road-select-filter',
   parameters: {
     actions: {
-      handles: [, 'roadBlur', 'roadFocus'],
+      handles: ['roadBlur', 'roadFocus'],
     },
   },
-};
-
-export const Playground = (args) => {
-  const options = [
-    { value: 'audi', label: 'Audi' },
-    { value: 'bmw', label: 'BMW' },
-    { value: 'citroen', label: 'Citroën' },
-    { value: 'mercedes-benz', label: 'Mercedes-benz' },
-    { value: 'peugeot', label: 'Peugeot' },
-    { value: 'renault', label: 'Renault' }
-  ];
-
-  return html`
-  <road-select-filter .options=${options} @roadSelected=${event => args.roadSelected(event.detail)}>
-    <road-input-group>
-      <road-input input-id="brand" label="Brand" class="mb-0"></road-input>
-      <label slot="append" for="brand">
-        <road-icon name="arrow-drop" focusable="false"></road-icon>
-      </label>
-    </road-input-group>
-  </road-select-filter>
-  `;
-};
-Playground.argTypes = {
-  roadSelected: {
-    action: 'roadSelected',
+  argTypes: {
+    ' ': {
+      control: 'text',
+    },
+    'only-select': {
+      control: 'boolean',
+    },
+    parameters: {
+      control: 'object',
+    },
+    roadSelected: {
+      action: 'roadSelected',
+      control: {
+        type: null,
+      },
+    },
+  },
+  args: {
+    options: [
+      { value: 'audi', label: 'Audi' },
+      { value: 'bmw', label: 'BMW' },
+      { value: 'citroen', label: 'Citroën' },
+      { value: 'mercedes-benz', label: 'Mercedes-benz' },
+      { value: 'peugeot', label: 'Peugeot' },
+      { value: 'renault', label: 'Renault' }
+    ],
+    'only-select': undefined,
+    parameters: {
+      keys: ["value", "label"],
+      threshold: 0.3,
+      ignoreLocation: true,
+    },
+    ' ': `<road-input-group>
+    <road-input input-id="brand" label="Brand" class="mb-0"></road-input>
+    <label slot="append" for="brand">
+      <road-icon name="arrow-drop" focusable="false"></road-icon>
+    </label>
+  </road-input-group>`,
   },
 };
 
-export const WithValue = () => {
-  const options = [
-    { value: 'audi', label: 'Audi' },
-    { value: 'bmw', label: 'BMW' },
-    { value: 'citroen', label: 'Citroën' },
-    { value: 'mercedes-benz', label: 'Mercedes-benz' },
-    { value: 'peugeot', label: 'Peugeot' },
-    { value: 'renault', label: 'Renault' }
-  ];
+const Template = (args) => html`
+<road-select-filter .options=${args.options} only-select="${ifDefined(args['only-select'])}" @roadSelected=${event => args.roadSelected(event.detail)}>
+  ${unsafeHTML(args[' '])}
+</road-select-filter>
+`;
 
-  return html`
-  <road-select-filter .options=${options}>
-    <road-input-group>
-      <road-input input-id="brand2" label="Brand" value="Audi" class="mb-0"></road-input>
-      <label slot="append" for="brand2">
-        <road-icon name="arrow-drop" focusable="false"></road-icon>
-      </label>
-    </road-input-group>
-  </road-select-filter>
-  `;
-};
+export const Playground = Template.bind({});
 
-export const Disabled = () => {
-  const options = [
-    { value: 'audi', label: 'Audi' },
-    { value: 'bmw', label: 'BMW' },
-    { value: 'citroen', label: 'Citroën' },
-    { value: 'mercedes-benz', label: 'Mercedes-benz' },
-    { value: 'peugeot', label: 'Peugeot' },
-    { value: 'renault', label: 'Renault' }
-  ];
+export const WithValue = Template.bind({});
+WithValue.args = {
+  ' ': `<road-input-group>
+    <road-input input-id="brand2" label="Brand" value="Audi" class="mb-0"></road-input>
+    <label slot="append" for="brand2">
+      <road-icon name="arrow-drop" focusable="false"></road-icon>
+    </label>
+  </road-input-group>`,
+};
 
-  return html`
-  <road-select-filter .options=${options}>
-    <road-input-group>
-      <road-input input-id="brand3" label="Brand" disabled class="mb-0"></road-input>
-      <label slot="append" for="brand3">
-        <road-icon name="arrow-drop" focusable="false"></road-icon>
-      </label>
-    </road-input-group>
-  </road-select-filter>
-  `;
+export const Disabled = Template.bind({});
+Disabled.args = {
+  ' ': `<road-input-group>
+    <road-input input-id="brand3" label="Brand" disabled class="mb-0"></road-input>
+    <label slot="append" for="brand3">
+      <road-icon name="arrow-drop" focusable="false"></road-icon>
+    </label>
+  </road-input-group>`,
 };
 
-export const Error = () => {
-  const options = [
-    { value: 'audi', label: 'Audi' },
-    { value: 'bmw', label: 'BMW' },
-    { value: 'citroen', label: 'Citroën' },
-    { value: 'mercedes-benz', label: 'Mercedes-benz' },
-    { value: 'peugeot', label: 'Peugeot' },
-    { value: 'renault', label: 'Renault' }
-  ];
+export const Error = Template.bind({});
+Error.args = {
+  ' ': `<road-input-group>
+    <road-input input-id="brand4" label="Brand" error="Select a Brand" class="mb-0"></road-input>
+    <label slot="append" for="brand4">
+      <road-icon name="arrow-drop" focusable="false"></road-icon>
+    </label>
+  </road-input-group>`,
+};
 
-  return html`
-  <road-select-filter .options=${options}>
-    <road-input-group>
-      <road-input input-id="brand4" label="Brand" error="Select a Brand" class="mb-0"></road-input>
-      <label slot="append" for="brand4">
-        <road-icon name="arrow-drop" focusable="false"></road-icon>
-      </label>
-    </road-input-group>
-  </road-select-filter>
-  `;
+export const withHTML = Template.bind({});
+withHTML.args = {
+  options: [
+    {
+      "value": 31,
+      "label": "<b>Original equipment electronics</b> > Cleaning Injection",
+    },
+    {
+      "value": 4,
+      "label": "<b>Exhaust / Pollution</b> > Replacement EGR",
+    },
+    {
+      "value": 14,
+      "label": "<b>Drain and filter</b> > Oil filter + fuel filter",
+    }
+  ],
+  ' ': `<road-input-group>
+    <road-input input-id="controls" label="Controls" class="mb-0"></road-input>
+    <label slot="append" for="brand">
+      <road-icon name="arrow-drop" focusable="false"></road-icon>
+    </label>
+  </road-input-group>`,
 };

package/dist/collection/components/skeleton/skeleton.css

@@ -3,8 +3,7 @@
  *
  * Index
  * - Skeleton
- * - Skeleton animation
- *
+ * - Animation
  */
 
 
@@ -21,7 +20,7 @@
   animation: road-skeleton-animation 1s linear infinite;
 }
 
-/* SKELETON ANIMATION
+/* ANIMATION
 -------------------- */
 
 @keyframes road-skeleton-animation {

package/dist/collection/components/skeleton/skeleton.js

@@ -1,8 +1,7 @@
-import { Component, Host, h } from '@stencil/core';
+import { Component, h } from '@stencil/core';
 export class Skeleton {
   render() {
-    return (h(Host, null,
-      h("span", null, "\u00A0")));
+    return (h("span", null, "\u00A0"));
   }
   static get is() { return "road-skeleton"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/spinner/spinner.css

@@ -3,9 +3,8 @@
  *
  * Index
  * - Spinner
- * - Spinner circle
- * - Spinner animation
- *
+ * - Circle
+ * - Animation
  */
 
 :host {
@@ -22,7 +21,7 @@
   animation: road-rotate 2s linear infinite;
 }
 
-/* SPINNER CIRCLE
+/* CIRCLE
  -------------------- */
 
 .spinner-circle {
@@ -35,7 +34,7 @@
   stroke-linecap: round;
 }
 
-/* SPINNER ANIMATION
+/* ANIMATION
  -------------------- */
 
 @keyframes road-rotate {

package/dist/collection/components/spinner/spinner.js

@@ -1,9 +1,8 @@
-import { Component, Host, h } from '@stencil/core';
+import { Component, h } from '@stencil/core';
 export class Spinner {
   render() {
-    return (h(Host, null,
-      h("svg", { class: "spinner", viewBox: "25 25 50 50" },
-        h("circle", { class: "spinner-circle", cx: "50", cy: "50", r: "20" }))));
+    return (h("svg", { class: "spinner", viewBox: "25 25 50 50" },
+      h("circle", { class: "spinner-circle", cx: "50", cy: "50", r: "20" })));
   }
   static get is() { return "road-spinner"; }
   static get encapsulation() { return "shadow"; }