@empathyco/x-components 6.0.0-alpha.9 → 6.0.0-alpha.90

package/docs/API-reference/components/scroll/x-components.main-scroll.md

@@ -6,10 +6,11 @@ title: MainScroll
 
 # MainScroll
 
-Extends the scroll making it able to sync the first visible element, and allowing the children
-position to be restored.
+Extends the scroll making it able to sync the first visible element, and allowing
+the children position to be restored.
 
-Each child element that wants to have this support must be wrapped in a MainScrollItem component.
+Each child element that wants to have this support must be wrapped in a MainScrollItem
+component.
 
 ## Props
 
@@ -42,27 +43,27 @@ it injects the needed utilities to determine the first visible item.
 </template>
 
 <script>
-  import { MainScroll, MainScrollItem } from '@empathyco/x-components/scroll';
-
-  export default {
-    name: 'MainScrollDemo',
-    components: {
-      MainScroll,
-      MainScrollItem
-    }
-  };
+import { MainScroll, MainScrollItem } from '@empathyco/x-components/scroll'
+
+export default {
+  name: 'MainScrollDemo',
+  components: {
+    MainScroll,
+    MainScrollItem,
+  },
+}
 </script>
 
 <style lang="css" scoped>
-  ul {
-    overflow: auto;
-    max-height: 200px;
-  }
-
-  li {
-    height: 50px;
-    line-height: 50px;
-  }
+ul {
+  overflow: auto;
+  max-height: 200px;
+}
+
+li {
+  height: 50px;
+  line-height: 50px;
+}
 </style>
 ```
 
@@ -83,15 +84,15 @@ default browser scroll, you can do so by using the `useWindow` prop:
 </template>
 
 <script>
-  import { MainScroll, MainScrollItem } from '@empathyco/x-components/scroll';
-
-  export default {
-    name: 'MainScrollDemo',
-    components: {
-      MainScroll,
-      MainScrollItem
-    }
-  };
+import { MainScroll, MainScrollItem } from '@empathyco/x-components/scroll'
+
+export default {
+  name: 'MainScrollDemo',
+  components: {
+    MainScroll,
+    MainScrollItem,
+  },
+}
 </script>
 ```
 
@@ -115,15 +116,15 @@ when combined with the URL X Module.
 </template>
 
 <script>
-  import { MainScroll, MainScrollItem } from '@empathyco/x-components/scroll';
-
-  export default {
-    name: 'MainScrollDemo',
-    components: {
-      MainScroll,
-      MainScrollItem
-    }
-  };
+import { MainScroll, MainScrollItem } from '@empathyco/x-components/scroll'
+
+export default {
+  name: 'MainScrollDemo',
+  components: {
+    MainScroll,
+    MainScrollItem,
+  },
+}
 </script>
 ```
 
@@ -146,14 +147,14 @@ and adjusting the element to be at least 75% intersecting.
 </template>
 
 <script>
-  import { MainScroll, MainScrollItem } from '@empathyco/x-components/scroll';
-
-  export default {
-    name: 'MainScrollDemo',
-    components: {
-      MainScroll,
-      MainScrollItem
-    }
-  };
+import { MainScroll, MainScrollItem } from '@empathyco/x-components/scroll'
+
+export default {
+  name: 'MainScrollDemo',
+  components: {
+    MainScroll,
+    MainScrollItem,
+  },
+}
 </script>
 ```

package/docs/API-reference/components/scroll/x-components.scroll-to-top.md

@@ -6,8 +6,8 @@ title: ScrollToTop
 
 # ScrollToTop
 
-The `ScrollToTop` component is a button that the user can click to make a container scroll up to its
-initial position.
+The `ScrollToTop` component is a button that the user can click to make a container scroll
+up to its initial position.
 
 ## Props
 
@@ -54,13 +54,13 @@ the scroll.
 </template>
 
 <script>
-  import { ScrollToTop } from '@empathyco/x-components/scroll';
-
-  export default {
-    name: 'ScrollToTopTest',
-    components: {
-      ScrollToTop
-    }
-  };
+import { ScrollToTop } from '@empathyco/x-components/scroll'
+
+export default {
+  name: 'ScrollToTopTest',
+  components: {
+    ScrollToTop,
+  },
+}
 </script>
 ```

package/docs/API-reference/components/scroll/x-components.scroll.md

@@ -6,8 +6,8 @@ title: Scroll
 
 # Scroll
 
-Scrollable container that emits scroll related X Events. It exposes all the listeners and props from
-the BaseScroll component.
+Scrollable container that emits scroll related X Events. It exposes all the listeners
+and props from the BaseScroll component.
 
 ## Props
 
@@ -58,14 +58,14 @@ It renders an element with scroll, with the content passed in the `default slot`
 </template>
 
 <script>
-  import { Scroll } from '@empathyco/x-components/scroll';
-
-  export default {
-    name: 'ScrollIdTest',
-    components: {
-      Scroll
-    }
-  };
+import { Scroll } from '@empathyco/x-components/scroll'
+
+export default {
+  name: 'ScrollIdTest',
+  components: {
+    Scroll,
+  },
+}
 </script>
 ```
 
@@ -91,31 +91,31 @@ It renders an element with scroll, with the content passed in the `default slot`
 </template>
 
 <script>
-  import { Scroll } from '@empathyco/x-components/scroll';
-
-  export default {
-    name: 'ScrollIdTest',
-    components: {
-      Scroll
+import { Scroll } from '@empathyco/x-components/scroll'
+
+export default {
+  name: 'ScrollIdTest',
+  components: {
+    Scroll,
+  },
+  methods: {
+    scroll(position) {
+      console.log('scroll', position)
+    },
+    scrollDirectionChange(direction) {
+      console.log('scroll:direction-change', direction)
+    },
+    scrollAtStart(isAtStart) {
+      console.log('scroll:at-start', isAtStart)
+    },
+    scrollAlmostAtEnd(isAlmostAtEnd) {
+      console.log('scroll:almost-at-end', isAlmostAtEnd)
     },
-    methods: {
-      scroll(position) {
-        console.log('scroll', position);
-      },
-      scrollDirectionChange(direction) {
-        console.log('scroll:direction-change', direction);
-      },
-      scrollAtStart(isAtStart) {
-        console.log('scroll:at-start', isAtStart);
-      },
-      scrollAlmostAtEnd(isAlmostAtEnd) {
-        console.log('scroll:almost-at-end', isAlmostAtEnd);
-      },
-      scrollAtEnd(isAtEnd) {
-        console.log('scroll:at-end', isAtEnd);
-      }
-    }
-  };
+    scrollAtEnd(isAtEnd) {
+      console.log('scroll:at-end', isAtEnd)
+    },
+  },
+}
 </script>
 ```
 
@@ -134,30 +134,30 @@ You can use the XEvents subscribing to them.
 </template>
 
 <script>
-  import { Scroll } from '@empathyco/x-components/scroll';
-
-  export default {
-    name: 'ScrollIdTest',
-    components: {
-      Scroll
-    },
-    mounted() {
-      this.$x.on('UserScrolled').subscribe(distance => {
-        console.log(distance);
-      });
-      this.$x.on('UserChangedScrollDirection').subscribe(direction => {
-        console.log(direction);
-      });
-      this.$x.on('UserReachedScrollStart').subscribe(isAtStart => {
-        console.log(isAtStart);
-      });
-      this.$x.on('UserAlmostReachedScrollEnd').subscribe(isAlmostAtEnd => {
-        console.log(isAlmostAtEnd);
-      });
-      this.$x.on('UserReachedScrollEnd').subscribe(isAtEnd => {
-        console.log(isAtEnd);
-      });
-    }
-  };
+import { Scroll } from '@empathyco/x-components/scroll'
+
+export default {
+  name: 'ScrollIdTest',
+  components: {
+    Scroll,
+  },
+  mounted() {
+    this.$x.on('UserScrolled').subscribe(distance => {
+      console.log(distance)
+    })
+    this.$x.on('UserChangedScrollDirection').subscribe(direction => {
+      console.log(direction)
+    })
+    this.$x.on('UserReachedScrollStart').subscribe(isAtStart => {
+      console.log(isAtStart)
+    })
+    this.$x.on('UserAlmostReachedScrollEnd').subscribe(isAlmostAtEnd => {
+      console.log(isAlmostAtEnd)
+    })
+    this.$x.on('UserReachedScrollEnd').subscribe(isAtEnd => {
+      console.log(isAtEnd)
+    })
+  },
+}
 </script>
 ```

package/docs/API-reference/components/search/x-components.banner.md

@@ -29,25 +29,25 @@ _Here you can see how the `Banner` component is rendered._
 </template>
 
 <script>
-  import { Banner } from '@empathyco/x-components/search';
-  export default {
-    name: 'BannerDemo',
-    components: {
-      Banner
-    },
-    data() {
-      return {
-        banner: {
-          modelName: 'Banner',
-          id: 'banner-example',
-          url: 'https://my-website.com/summer-shirts',
-          image: 'https://my-website.com/images/summer-shirts.jpg',
-          title: 'Trendy summer shirts',
-          position: 1
-        }
-      };
+import { Banner } from '@empathyco/x-components/search'
+export default {
+  name: 'BannerDemo',
+  components: {
+    Banner,
+  },
+  data() {
+    return {
+      banner: {
+        modelName: 'Banner',
+        id: 'banner-example',
+        url: 'https://my-website.com/summer-shirts',
+        image: 'https://my-website.com/images/summer-shirts.jpg',
+        title: 'Trendy summer shirts',
+        position: 1,
+      },
     }
-  };
+  },
+}
 </script>
 ```
 
@@ -61,24 +61,24 @@ The `titleClass` prop can be used to add classes to the banner title.
 </template>
 
 <script>
-  import { Banner } from '@empathyco/x-components/search';
-  export default {
-    name: 'BannerDemo',
-    components: {
-      Banner
-    },
-    data() {
-      return {
-        banner: {
-          modelName: 'Banner',
-          id: 'banner-example',
-          url: 'https://my-website.com/summer-shirts',
-          image: 'https://my-website.com/images/summer-shirts.jpg',
-          title: 'Trendy summer shirts',
-          position: 1
-        }
-      };
+import { Banner } from '@empathyco/x-components/search'
+export default {
+  name: 'BannerDemo',
+  components: {
+    Banner,
+  },
+  data() {
+    return {
+      banner: {
+        modelName: 'Banner',
+        id: 'banner-example',
+        url: 'https://my-website.com/summer-shirts',
+        image: 'https://my-website.com/images/summer-shirts.jpg',
+        title: 'Trendy summer shirts',
+        position: 1,
+      },
     }
-  };
+  },
+}
 </script>
 ```

package/docs/API-reference/components/search/x-components.banners-list.md

@@ -8,8 +8,9 @@ title: BannersList
 
 It renders a ItemsList list of banners from SearchState.banners.
 
-The component provides a default slot which wraps the whole component with the `banners` plus the
-`injectedListItems` which also contains the injected list items from the ancestor.
+The component provides a default slot which wraps the whole component with the `banners`
+plus the `injectedListItems` which also contains the injected list items from
+the ancestor.
 
 It also provides the parent slots to customize the items.
 
@@ -44,16 +45,16 @@ _Type any term in the input field to try it out!_
 </template>
 
 <script>
-  import { BannersList } from '@empathyco/x-components/search';
-  import { SearchInput } from '@empathyco/x-components/search-box';
-
-  export default {
-    name: 'BannersListDemo',
-    components: {
-      SearchInput,
-      BannersList
-    }
-  };
+import { BannersList } from '@empathyco/x-components/search'
+import { SearchInput } from '@empathyco/x-components/search-box'
+
+export default {
+  name: 'BannersListDemo',
+  components: {
+    SearchInput,
+    BannersList,
+  },
+}
 </script>
 ```
 
@@ -68,22 +69,22 @@ _Type any term in the input field to try it out!_
 </template>
 
 <script>
-  import { BannersList } from '@empathyco/x-components/search';
-  import { SearchInput } from '@empathyco/x-components/search-box';
-  import { FadeAndSlide } from '@empathyco/x-components/animations';
-
-  export default {
-    name: 'BannersListDemo',
-    components: {
-      SearchInput,
-      BannersList
-    },
-    data() {
-      return {
-        fadeAndSlide: FadeAndSlide
-      };
+import { BannersList } from '@empathyco/x-components/search'
+import { SearchInput } from '@empathyco/x-components/search-box'
+import { FadeAndSlide } from '@empathyco/x-components/animations'
+
+export default {
+  name: 'BannersListDemo',
+  components: {
+    SearchInput,
+    BannersList,
+  },
+  data() {
+    return {
+      fadeAndSlide: FadeAndSlide,
     }
-  };
+  },
+}
 </script>
 ```
 
@@ -107,16 +108,16 @@ _Type any term in the input field to try it out!_
 </template>
 
 <script>
-  import { BannersList } from '@empathyco/x-components/search';
-  import { SearchInput } from '@empathyco/x-components/search-box';
-
-  export default {
-    name: 'BannersListDemo',
-    components: {
-      SearchInput,
-      BannersList
-    }
-  };
+import { BannersList } from '@empathyco/x-components/search'
+import { SearchInput } from '@empathyco/x-components/search-box'
+
+export default {
+  name: 'BannersListDemo',
+  components: {
+    SearchInput,
+    BannersList,
+  },
+}
 </script>
 ```
 
@@ -135,16 +136,16 @@ _Type any term in the input field to try it out!_
 </template>
 
 <script>
-  import { BannersList } from '@empathyco/x-components/search';
-  import { SearchInput } from '@empathyco/x-components/search-box';
-
-  export default {
-    name: 'BannersListDemo',
-    components: {
-      SearchInput,
-      BannersList
-    }
-  };
+import { BannersList } from '@empathyco/x-components/search'
+import { SearchInput } from '@empathyco/x-components/search-box'
+
+export default {
+  name: 'BannersListDemo',
+  components: {
+    SearchInput,
+    BannersList,
+  },
+}
 </script>
 ```
 
@@ -173,16 +174,16 @@ value.
 </template>
 
 <script>
-  import { ResultsList, BannersList } from '@empathyco/x-components/search';
-  import { SearchInput } from '@empathyco/x-components/search-box';
-
-  export default {
-    name: 'BannersListDemo',
-    components: {
-      SearchInput,
-      ResultsList,
-      BannersList
-    }
-  };
+import { ResultsList, BannersList } from '@empathyco/x-components/search'
+import { SearchInput } from '@empathyco/x-components/search-box'
+
+export default {
+  name: 'BannersListDemo',
+  components: {
+    SearchInput,
+    ResultsList,
+    BannersList,
+  },
+}
 </script>
 ```

package/docs/API-reference/components/search/x-components.fallback-disclaimer.md

@@ -6,8 +6,8 @@ title: FallbackDisclaimer
 
 # FallbackDisclaimer
 
-The `FallbackDisclaimer` component shows a message if the filters have been removed from the current
-search because there were no results.
+The `FallbackDisclaimer` component shows a message if the filters have been removed
+from the current search because there were no results.
 
 ## Slots
 
@@ -36,12 +36,12 @@ its default slot. This component will be rendered if there is a no results with
 </FallbackDisclaimer>
 
 <script>
-  import { FallbackDisclaimer } from '@empathyco/x-components/search';
+import { FallbackDisclaimer } from '@empathyco/x-components/search'
 
-  export default {
-    components: {
-      FallbackDisclaimer
-    }
-  };
+export default {
+  components: {
+    FallbackDisclaimer,
+  },
+}
 </script>
 ```

package/docs/API-reference/components/search/x-components.partial-query-button.md

@@ -6,9 +6,9 @@ title: PartialQueryButton
 
 # PartialQueryButton
 
-A button that when pressed emits the XEventsTypes.UserAcceptedAQuery and
-SearchXEvents.UserClickedPartialQuery events, expressing the user intention to set the partial
-query.
+A button that when pressed emits the XEventsTypes.UserAcceptedAQuery
+and SearchXEvents.UserClickedPartialQuery events, expressing the user
+intention to set the partial query.
 
 ## Props
 
@@ -64,12 +64,12 @@ The component sets the current query as the new query and emits the `UserAccepte
 </template>
 
 <script>
-  import { PartialQueryButton } from '@empathyco/x-components/search';
+import { PartialQueryButton } from '@empathyco/x-components/search'
 
-  export default {
-    components: {
-      PartialQueryButton
-    }
-  };
+export default {
+  components: {
+    PartialQueryButton,
+  },
+}
 </script>
 ```

package/docs/API-reference/components/search/x-components.partial-results-list.md

@@ -6,8 +6,8 @@ title: PartialResultsList
 
 # PartialResultsList
 
-It renders a list of partial results from SearchState.partialResults by default. It also provides
-the partial result slot to customize the item with the partial result bound.
+It renders a list of partial results from SearchState.partialResults by default.
+It also provides the partial result slot to customize the item with the partial result bound.
 
 ## Props
 
@@ -18,9 +18,9 @@ the partial result slot to customize the item with the partial result bound.
 
 ## Slots
 
-| Name                 | Description                             | Bindings<br />(name - type - description)                    |
-| -------------------- | --------------------------------------- | ------------------------------------------------------------ |
-| <code>default</code> | (Required) Partial results item content | **partialResult** <code>Partial</code> - Partial Result data |
+| Name                 | Description                             | Bindings<br />(name - type - description) |
+| -------------------- | --------------------------------------- | ----------------------------------------- |
+| <code>default</code> | (Required) Partial results item content |                                           |
 
 ## Examples