@empathyco/x-components 3.0.0-alpha.243 → 3.0.0-alpha.244

package/CHANGELOG.md

@@ -3,6 +3,19 @@
 All notable changes to this project will be documented in this file. See
 [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.0.0-alpha.244](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.243...@empathyco/x-components@3.0.0-alpha.244) (2022-12-08)
+
+### Features
+
+- **components:** Use `Highlight` component inside suggestion components.(#894)
+  ([ceb9c0c](https://github.com/empathyco/x/commit/ceb9c0c729d9a7a3b8a983e5b23912d561f2bd4d)),
+  closes [EX-7469](https://searchbroker.atlassian.net/browse/EX-7469)
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
 ## [3.0.0-alpha.243](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.242...@empathyco/x-components@3.0.0-alpha.243) (2022-12-08)
 
 ### Testing

package/core/index.js

@@ -115,6 +115,7 @@ export { default as BaseRating } from '../js/components/base-rating.vue.js';
 export { default as BaseSwitch } from '../js/components/base-switch.vue.js';
 export { default as BaseVariableColumnGrid } from '../js/components/base-variable-column-grid.vue.js';
 export { default as GlobalXBus } from '../js/components/global-x-bus.vue.js';
+export { default as Highlight } from '../js/components/highlight.vue.js';
 export { default as ItemsList } from '../js/components/items-list.vue.js';
 export { default as LocationProvider } from '../js/components/location-provider.vue.js';
 export { NoElement } from '../js/components/no-element.js';

package/core/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/design-system/default-theme.css

@@ -734,6 +734,15 @@
   stroke: none;
   fill: var(--x-color-stroke-icon-default);
 }
+:root {
+  --x-color-stroke-icon-default: currentColor;
+  --x-color-fill-icon-default: none;
+  --x-size-width-icon-default: var(--x-size-width-icon-m);
+  --x-size-height-icon-default: var(--x-size-height-icon-m);
+  --x-string-stroke-linecap-icon-default: butt;
+  --x-string-stroke-linejoin-icon-default: mitter;
+  --x-size-stroke-width-icon-default: 1px;
+}
 :root {
   --x-color-background-input-group-default: var(--x-color-background-input-default);
   --x-color-border-input-group-default: var(--x-color-border-input-default);
@@ -954,15 +963,6 @@
   );
   --x-number-font-weight-input-group-default-button: var(--x-number-font-weight-base-light);
 }
-:root {
-  --x-color-stroke-icon-default: currentColor;
-  --x-color-fill-icon-default: none;
-  --x-size-width-icon-default: var(--x-size-width-icon-m);
-  --x-size-height-icon-default: var(--x-size-height-icon-m);
-  --x-string-stroke-linecap-icon-default: butt;
-  --x-string-stroke-linejoin-icon-default: mitter;
-  --x-size-stroke-width-icon-default: 1px;
-}
 :root {
   --x-color-background-input-default: var(--x-color-base-neutral-100);
   --x-color-border-input-default: var(--x-color-base-neutral-70);

package/design-system/full-theme.css

@@ -425,30 +425,6 @@
     --x-size-border-width-left-dropdown-list-line
   );
 }
-:root {
-  --x-size-padding-block-dropdown-item-line: var(--x-size-base-03);
-  --x-size-padding-inline-dropdown-item-line: 0 var(--x-size-base-03);
-  --x-size-padding-top-dropdown-item-line: var(--x-size-base-03);
-  --x-size-padding-right-dropdown-item-line: 0;
-  --x-size-padding-bottom-dropdown-item-line: var(--x-size-base-03);
-  --x-size-padding-left-dropdown-item-line: 0;
-  --x-size-padding-top-dropdown-toggle-line: var(--x-size-base-03);
-  --x-size-padding-right-dropdown-toggle-line: 0;
-  --x-size-padding-bottom-dropdown-toggle-line: var(--x-size-base-03);
-  --x-size-padding-left-dropdown-toggle-line: 0;
-  --x-size-border-width-dropdown-toggle-line: var(--x-size-border-width-base);
-  --x-size-border-width-top-dropdown-toggle-line: 0;
-  --x-size-border-width-right-dropdown-toggle-line: 0;
-  --x-size-border-width-bottom-dropdown-toggle-line: var(
-    --x-size-border-width-dropdown-toggle-line
-  );
-  --x-size-border-width-left-dropdown-toggle-line: 0;
-  --x-size-border-width-dropdown-list-line: 0;
-  --x-size-border-width-top-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
-  --x-size-border-width-right-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
-  --x-size-border-width-bottom-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
-  --x-size-border-width-left-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
-}
 .x-dropdown.x-dropdown--m {
   --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-m);
 }
@@ -7236,3 +7212,28 @@
 .x-normal-case {
   text-transform: none;
 }
+
+:root {
+  --x-size-padding-block-dropdown-item-line: var(--x-size-base-03);
+  --x-size-padding-inline-dropdown-item-line: 0 var(--x-size-base-03);
+  --x-size-padding-top-dropdown-item-line: var(--x-size-base-03);
+  --x-size-padding-right-dropdown-item-line: 0;
+  --x-size-padding-bottom-dropdown-item-line: var(--x-size-base-03);
+  --x-size-padding-left-dropdown-item-line: 0;
+  --x-size-padding-top-dropdown-toggle-line: var(--x-size-base-03);
+  --x-size-padding-right-dropdown-toggle-line: 0;
+  --x-size-padding-bottom-dropdown-toggle-line: var(--x-size-base-03);
+  --x-size-padding-left-dropdown-toggle-line: 0;
+  --x-size-border-width-dropdown-toggle-line: var(--x-size-border-width-base);
+  --x-size-border-width-top-dropdown-toggle-line: 0;
+  --x-size-border-width-right-dropdown-toggle-line: 0;
+  --x-size-border-width-bottom-dropdown-toggle-line: var(
+    --x-size-border-width-dropdown-toggle-line
+  );
+  --x-size-border-width-left-dropdown-toggle-line: 0;
+  --x-size-border-width-dropdown-list-line: 0;
+  --x-size-border-width-top-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
+  --x-size-border-width-right-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
+  --x-size-border-width-bottom-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
+  --x-size-border-width-left-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
+}

package/docs/API-reference/api/x-components.basesuggestion.md

@@ -25,7 +25,6 @@ export default class BaseSuggestion extends Vue
 |  [filter](./x-components.basesuggestion.filter.md) |  | BooleanFilter \| undefined | Returns the suggestion filter object. It is a BooleanFilter because the label is needed. It returns only the first element because the facets and filters are being planned in the BaseSuggestions component. |
 |  [highlightCurated](./x-components.basesuggestion.highlightcurated.md) |  | boolean | Indicates if the curated suggestion should be highlighted. |
 |  [query](./x-components.basesuggestion.query.md) |  | string | The normalized query of the module using this component. |
-|  [queryHTML](./x-components.basesuggestion.queryhtml.md) |  | string | Highlights the matching part of the suggestion query with the query passed as prop of the component putting it inside a <code>&lt;span&gt;</code> tag. |
 |  [suggestion](./x-components.basesuggestion.suggestion.md) |  | Suggestion | The suggestion to render and use in the default slot. |
 |  [suggestionSelectedEvents](./x-components.basesuggestion.suggestionselectedevents.md) |  | Partial&lt;[XEventsTypes](./x-components.xeventstypes.md)<!-- -->&gt; | The [XEvents](./x-components.xevent.md) that will be emitted when selecting a suggestion. |
 

package/docs/API-reference/api/x-components.highlight.highlight.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [Highlight](./x-components.highlight.md) &gt; [highlight](./x-components.highlight.highlight.md)
+
+## Highlight.highlight property
+
+The part of the text to be highlighted.
+
+<b>Signature:</b>
+
+```typescript
+highlight: string;
+```

package/docs/API-reference/api/x-components.highlight.matchclass.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [Highlight](./x-components.highlight.md) &gt; [matchClass](./x-components.highlight.matchclass.md)
+
+## Highlight.matchClass property
+
+CSS Class to add when the `text` string contains the `highlight` string.
+
+<b>Signature:</b>
+
+```typescript
+matchClass: string;
+```

package/docs/API-reference/api/x-components.highlight.md

@@ -0,0 +1,23 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [Highlight](./x-components.highlight.md)
+
+## Highlight class
+
+Highlights the given part of the text. The component is smart enough to do matches between special characters like tilde, cedilla, eñe, capital letters...
+
+<b>Signature:</b>
+
+```typescript
+export default class Highlight extends Highlight_base 
+```
+<b>Extends:</b> Highlight\_base
+
+## Properties
+
+|  Property | Modifiers | Type | Description |
+|  --- | --- | --- | --- |
+|  [highlight](./x-components.highlight.highlight.md) |  | string | The part of the text to be highlighted. |
+|  [matchClass](./x-components.highlight.matchclass.md) |  | string | CSS Class to add when the <code>text</code> string contains the <code>highlight</code> string. |
+|  [text](./x-components.highlight.text.md) |  | string | The text to highlight some part of it. |
+

package/docs/API-reference/api/x-components.highlight.text.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [Highlight](./x-components.highlight.md) &gt; [text](./x-components.highlight.text.md)
+
+## Highlight.text property
+
+The text to highlight some part of it.
+
+<b>Signature:</b>
+
+```typescript
+text: string;
+```

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

@@ -79,6 +79,7 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [FixedHeaderAndAsidesLayout](./x-components.fixedheaderandasideslayout.md) | Component for use as Layout to be filled with the rest of the components. |
 |  [GlobalXBus](./x-components.globalxbus.md) | This component helps subscribing to any [XEvent](./x-components.xevent.md) with custom callbacks using Vue listeners API. |
 |  [HierarchicalFilter](./x-components.hierarchicalfilter.md) | Renders a hierarchical filter recursively, emitting the needed events when clicked. |
+|  [Highlight](./x-components.highlight.md) | Highlights the given part of the text. The component is smart enough to do matches between special characters like tilde, cedilla, eñe, capital letters... |
 |  [HistoryQueries](./x-components.historyqueries.md) | This component renders a list of suggestions coming from the user queries history. Allows the user to select one of them, emitting the needed events. A history query is just another type of suggestion that contains a query that the user has made in the past. |
 |  [HistoryQueriesGetter](./x-components.historyqueriesgetter.md) | Class implementation for the [HistoryQueriesGetters.historyQueries](./x-components.historyqueriesgetters.historyqueries.md) getter. |
 |  [HistoryQueriesSwitch](./x-components.historyqueriesswitch.md) | History Queries Switch is a component to enable or disable the history queries. This component emits events depending on the <code>isEnabled</code> value. |

package/docs/API-reference/components/common/suggestions/x-components.base-suggestion.md

@@ -24,56 +24,13 @@ The default slot receives the suggestion and the matched query has props.
 
 ## Slots
 
-| Name                 | Description    | Bindings<br />(name - type - description)                                                                                                                                                                                   |
-| -------------------- | -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| <code>default</code> | Button content | **suggestion** <code>Suggestion</code> - Suggestion data<br />**queryHTML** <code>string</code> - Suggestion's query with the matching part inside a `<span>` tag<br />**filter** <code>Filter</code> - Suggestion's filter |
-
-## Examples
-
-This default suggestion component expects a suggestion to render and pass to its default slot, a
-normalized query to compare with the suggestion's query and highlight its matching parts and events
-to emit when the suggestion is selected.
-
-If the suggestion contains a filter, it is displayed next to the suggestion.
-
-### Default usage
-
-```vue
-<BaseSuggestion v-bind="{ query, suggestion, suggestionSelectedEvents }" />
-```
-
-### Customized usage
-
-```vue
-<BaseSuggestion v-bind="{ query, suggestion, suggestionSelectedEvents }">
-  <template #default="{ suggestion, queryHTML }">
-    <span
-      class="my-suggestion"
-      v-html="queryHTML"
-      :aria-label="suggestion.query"
-    />
-  </template>
-</BaseSuggestion>
-```
-
-### Customized usage with filter
-
-```vue
-<BaseSuggestion v-bind="{ query, suggestion, suggestionSelectedEvents }">
-  <template #default="{ suggestion, queryHTML, filter }">
-    <span
-      class="my-suggestion"
-      v-html="queryHTML"
-      :aria-label="suggestion.query"
-    />
-    <span>{{ filter.label }}</span>
-  </template>
-</BaseSuggestion>
-```
+| Name                 | Description    | Bindings<br />(name - type - description)                                                                                                                                                        |
+| -------------------- | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| <code>default</code> | Button content | **suggestion** <code>Suggestion</code> - Suggestion data<br />**query** <code>String</code> - The query that the suggestion belongs to<br />**filter** <code>Filter</code> - Suggestion's filter |
 
 ## Events
 
-A list of events that the component will emit:
+This component emits the following events:
 
 - `UserAcceptedAQuery`: the event is emitted after the user clicks the button. The event payload is
   the suggestion query data.
@@ -82,3 +39,87 @@ A list of events that the component will emit:
 - `UserClickedAFilter`: the event is emitted after the user clicks the button if the suggestion
   includes a filter. The event payload is the suggestion filter.
 - The component can emit more events on click using the `suggestionSelectedEvents` prop.
+
+## See it in action
+
+This suggestion component expects a suggestion to render and pass to its default slot, a normalized
+query to compare with the suggestion's query and highlight its matching parts, and events to emit
+when the suggestion is selected.
+
+If the suggestion contains a filter, it is displayed next to the suggestion.
+
+```vue live
+<template>
+  <BaseSuggestion v-bind="{ query, suggestion }" />
+</template>
+<script>
+import { BaseSuggestion } from "@empathyco/x-components";
+
+export default {
+  name: "BaseSuggestionDemo",
+  components: {
+    BaseSuggestion
+  },
+  data() {
+    return {
+      query: "st",
+      suggestion: {
+        modelName: "QuerySuggestion",
+        query: "steak",
+        facet: {
+          namedModel: "SimpleFacet",
+          id: "category",
+          label: "Category",
+          filters: [
+            {
+              id: "category:groceries",
+              modelName: "SimpleFilter",
+              facetId: "category-facet",
+              label: "Groceries",
+              selected: false,
+              totalResults: 10
+            }
+          ]
+        }
+      }
+    };
+  }
+};
+</script>
+```
+
+### Customise the content
+
+You can make this component render any content you want by using the `default` slot.
+
+```vue live
+<template>
+  <BaseSuggestion
+    v-bind="{ query, suggestion }"
+    #default="{ suggestion, query, filter }"
+  >
+    <span>🔍</span>
+    <Highlight :text="suggestion.query" :highlight="query" />
+    <span v-if="filter">{{ filter.label }}</span>
+  </BaseSuggestion>
+</template>
+<script>
+import { BaseSuggestion } from "@empathyco/x-components";
+
+export default {
+  name: "BaseSuggestionDemo",
+  components: {
+    BaseSuggestion
+  },
+  data() {
+    return {
+      query: "st",
+      suggestion: {
+        modelName: "QuerySuggestion",
+        query: "steak"
+      }
+    };
+  }
+};
+</script>
+```

package/docs/API-reference/components/history-queries/x-components.history-query.md

@@ -18,10 +18,10 @@ history queries.
 
 ## Slots
 
-| Name                               | Description                         | Bindings<br />(name - type - description)                                                                                                                                   |
-| ---------------------------------- | ----------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| <code>default</code>               | History Query content               | **suggestion** <code>Suggestion</code> - History Query suggestion data<br />**queryHTML** <code>string</code> - Suggestion's query with the matching part inside a span tag |
-| <code>remove-button-content</code> | History Query remove button content | **suggestion** <code>Suggestion</code> - History Query suggestion data                                                                                                      |
+| Name                               | Description                         | Bindings<br />(name - type - description)                                                                                                                                                                                                      |
+| ---------------------------------- | ----------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| <code>default</code>               | History Query content               | **v-bind** <code>Object</code> - `BaseSuggestion` default slot scope: **suggestion** <code>Suggestion</code> - Suggestion data<br /> **query** <code>string</code> - The query that the suggestion belongs to<br /> **filter** <code>Filter \\ | undefined</code> - Suggestion's filter |
+| <code>remove-button-content</code> | History Query remove button content | **suggestion** <code>Suggestion</code> - History Query suggestion data                                                                                                                                                                         |
 
 ## Examples
 
@@ -67,9 +67,9 @@ that serves to remove this query from the history. This slot only has one proper
 ```vue live
 <template>
   <HistoryQuery :suggestion="suggestion">
-    <template #default="{ suggestion, queryHTML }">
+    <template #default="{ suggestion }">
       <HistoryIcon />
-      <span class="x-history-query__matching-part" v-html="queryHTML" />
+      <Highlight highlight="tro" :text="suggestion.query" />
     </template>
 
     <template #remove-button-content="{ suggestion }">
@@ -80,14 +80,15 @@ that serves to remove this query from the history. This slot only has one proper
 
 <script>
 import { HistoryQuery } from "@empathyco/x-components/history-queries";
-import { HistoryIcon, CrossIcon } from "@empathyco/x-components";
+import { HistoryIcon, CrossIcon, Highlight } from "@empathyco/x-components";
 
 export default {
   name: "HistoryQueryDemo",
   components: {
     HistoryQuery,
     HistoryIcon,
-    CrossIcon
+    CrossIcon,
+    Highlight
   },
   data() {
     return {

package/docs/API-reference/components/next-queries/x-components.next-query.md

@@ -19,9 +19,9 @@ it will render the suggestion query by default.
 
 ## Slots
 
-| Name                 | Description        | Bindings<br />(name - type - description)                                                                                                                               |
-| -------------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| <code>default</code> | Next Query content | **suggestion** <code>Suggestion</code> - Next Query suggestion data<br />**shouldHighlightCurated** <code>boolean</code> - True if the curated NQ should be highlighted |
+| Name                 | Description        | Bindings<br />(name - type - description)                                                                                                                                                                                                                                                                                                          |
+| -------------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| <code>default</code> | Next Query content | **shouldHighlightCurated** <code>boolean</code> - True if the curated NQ should be highlighted<br />**v-bind** <code>Object</code> - `BaseSuggestion` default slot scope: **suggestion** <code>Suggestion</code> - Suggestion data<br /> **query** <code>string</code> - The query that the suggestion belongs to<br /> **filter** <code>Filter \\ | undefined</code> - Suggestion's filter |
 
 ## Examples
 

package/docs/API-reference/components/popular-searches/x-components.popular-search.md

@@ -18,9 +18,9 @@ it will render the suggestion query by default.
 
 ## Slots
 
-| Name                 | Description              | Bindings<br />(name - type - description)                               |
-| -------------------- | ------------------------ | ----------------------------------------------------------------------- |
-| <code>default</code> | Popular Search's content | **suggestion** <code>Suggestion</code> - Popular Search suggestion data |
+| Name                 | Description            | Bindings<br />(name - type - description)                                                                                                                                                                                                      |
+| -------------------- | ---------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| <code>default</code> | Popular Search content | **v-bind** <code>Object</code> - `BaseSuggestion` default slot scope: **suggestion** <code>Suggestion</code> - Suggestion data<br /> **query** <code>string</code> - The query that the suggestion belongs to<br /> **filter** <code>Filter \\ | undefined</code> - Suggestion's filter |
 
 ## Examples
 

package/docs/API-reference/components/query-suggestions/x-components.query-suggestion.md

@@ -18,9 +18,9 @@ For example, if you're searching for _shirt_, a query suggestion could be _long
 
 ## Slots
 
-| Name                 | Description                                                        | Bindings<br />(name - type - description)                                                                                                                                    |
-| -------------------- | ------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| <code>default</code> | Custom content that replaces the `QuerySuggestion` default content | **suggestion** <code>Suggestion</code> - Query Suggestion data<br />**queryHTML** <code>string</code> - Suggestion’s query with the matching part wrapped in a HTML span tag |
+| Name                 | Description              | Bindings<br />(name - type - description)                                                                                                                                                                                                      |
+| -------------------- | ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| <code>default</code> | Query Suggestion content | **v-bind** <code>Object</code> - `BaseSuggestion` default slot scope: **suggestion** <code>Suggestion</code> - Suggestion data<br /> **query** <code>string</code> - The query that the suggestion belongs to<br /> **filter** <code>Filter \\ | undefined</code> - Suggestion's filter |
 
 ## Events
 
@@ -66,13 +66,13 @@ export default {
 
 ### Play with default slot
 
-In this example, the query suggestion is painted in blue by passing a color style in the HTML span
-element.
+In this example, we are adding an emoji next to the suggestion.
 
 ```vue live
 <template>
-  <QuerySuggestion :suggestion="suggestion" #default="{ queryHTML }">
-    <span v-html="queryHTML" style="color: blue;" />
+  <QuerySuggestion :suggestion="suggestion" #default="{ suggestion }">
+    <span>🔍</span>
+    <span>{{ suggestion.query }}</span>
   </QuerySuggestion>
 </template>
 

package/js/components/suggestions/base-suggestion.vue.js

@@ -21,10 +21,9 @@ var __vue_render__ = function () {
         "default",
         function () {
           return [
-            _c("span", {
+            _c("Highlight", {
               staticClass: "x-suggestion__query",
-              attrs: { "aria-label": _vm.suggestion.query },
-              domProps: { innerHTML: _vm._s(_vm.queryHTML) },
+              attrs: { text: _vm.suggestion.query, highlight: _vm.query },
             }),
             _vm._v(" "),
             _vm.filter
@@ -35,11 +34,7 @@ var __vue_render__ = function () {
           ]
         },
         null,
-        {
-          suggestion: _vm.suggestion,
-          queryHTML: _vm.queryHTML,
-          filter: _vm.filter,
-        }
+        { suggestion: _vm.suggestion, query: _vm.query, filter: _vm.filter }
       ),
     ],
     2

package/js/components/suggestions/base-suggestion.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-suggestion.vue.js","sources":["../../../../src/components/suggestions/base-suggestion.vue"],"sourcesContent":["<template>\n  <button @click=\"emitEvents\" :class=\"dynamicCSSClasses\" class=\"x-suggestion\">\n    <!-- eslint-disable max-len -->\n    <!--\n      @slot Button content\n          @binding {Suggestion} suggestion - Suggestion data\n          @binding {string} queryHTML - Suggestion's query with the matching part inside a `<span>` tag\n          @binding {Filter} filter - Suggestion's filter\n    -->\n    <!-- eslint-enable max-len -->\n    <slot v-bind=\"{ suggestion, queryHTML, filter }\">\n      <span v-html=\"queryHTML\" :aria-label=\"suggestion.query\" class=\"x-suggestion__query\" />\n      <span v-if=\"filter\" class=\"x-suggestion__filter\">{{ filter.label }}</span>\n    </slot>\n  </button>\n</template>\n\n<script lang=\"ts\">\n  import { BooleanFilter, Suggestion } from '@empathyco/x-types';\n  import { forEach } from '@empathyco/x-utils';\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { QueryFeature } from '../../types';\n  import { normalizeString } from '../../utils/normalize';\n  import { sanitize } from '../../utils/sanitize';\n  import { VueCSSClasses } from '../../utils/types';\n  import { XEventsTypes } from '../../wiring/events.types';\n\n  /**\n   * Renders a button with a default slot. It receives a query, which should be the query of the\n   * module using this component, a suggestion, the {@link XEvent | XEvents} that will be emitted\n   * on click with a given feature.\n   *\n   * The default slot receives the suggestion and the matched query has props.\n   *\n   * @public\n   */\n  @Component\n  export default class BaseSuggestion extends Vue {\n    /**\n     * The normalized query of the module using this component.\n     *\n     * @public\n     */\n    @Prop({ default: '' })\n    protected query!: string;\n\n    /**\n     * The suggestion to render and use in the default slot.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    protected suggestion!: Suggestion;\n\n    /**\n     * The feature from which the events will be emitted.\n     *\n     * @public\n     */\n    @Prop() //TODO: set to true when the suggestions components pass it.\n    protected feature?: QueryFeature;\n\n    /**\n     * The {@link XEvent | XEvents} that will be emitted when selecting a suggestion.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    protected suggestionSelectedEvents!: Partial<XEventsTypes>;\n\n    /**\n     * Indicates if the curated suggestion should be highlighted.\n     *\n     * @public\n     */\n    @Prop({ default: false, type: Boolean })\n    protected highlightCurated!: boolean;\n\n    /**\n     * The event handler that will be triggered when clicking on a suggestion.\n     *\n     * @remarks\n     * UserAcceptedAQuery: suggestion.query\n     * UserSelectedASuggestion: suggestion\n     * UserClickedAFilter: suggestion.facets[0].filters[0]\n     * Merges the events defined in the suggestionSelectedEvents prop and also emits them\n     *\n     * @returns The {@link XEvent | XEvents} to emit.\n     * @public\n     */\n    protected get events(): Partial<XEventsTypes> {\n      const filterEvent: Partial<XEventsTypes> = this.filter\n        ? { UserClickedAFilter: this.filter }\n        : {};\n      return {\n        UserAcceptedAQuery: this.suggestion.query,\n        UserSelectedASuggestion: this.suggestion,\n        ...this.suggestionSelectedEvents,\n        ...filterEvent\n      };\n    }\n\n    /**\n     * Emits the events when the button is clicked.\n     *\n     * @public\n     */\n    protected emitEvents(): void {\n      forEach(this.events, (event, payload) => {\n        this.$x.emit(event, payload, {\n          target: this.$el as HTMLElement,\n          feature: this.feature\n        });\n      });\n    }\n\n    /**\n     * Returns the suggestion filter object.\n     * It is a BooleanFilter because the label is needed.\n     * It returns only the first element because the facets and filters are being planned\n     * in the BaseSuggestions component.\n     *\n     * @returns The filter.\n     * @public\n     */\n    protected get filter(): BooleanFilter | undefined {\n      return this.suggestion.facets?.[0]?.filters[0] as BooleanFilter;\n    }\n\n    /**\n     * Checks if the normalized suggestion query matches with the module's query, so it has a\n     * matching part.\n     *\n     * @returns If the query has a matching part or not.\n     * @internal\n     */\n    protected get hasMatchingQuery(): boolean {\n      return !!this.query && normalizeString(this.suggestion.query).includes(this.query);\n    }\n\n    /**\n     * Checks if the suggestion is curated and if it should be highlighted.\n     *\n     * @returns True if the suggestion is curated and should be highlighted.\n     *\n     * @internal\n     */\n    protected get shouldHighlightCurated(): boolean {\n      return this.highlightCurated && !!this.suggestion.isCurated;\n    }\n\n    /**\n     * Generates css classes dynamically.\n     *\n     * @remarks\n     * 'x-suggestion--matching added when the query should be matched.\n     *\n     * @returns The {@link VueCSSClasses} classes.\n     * @public\n     */\n    protected get dynamicCSSClasses(): VueCSSClasses {\n      return {\n        'x-suggestion--matching': this.hasMatchingQuery,\n        'x-suggestion--is-curated': this.shouldHighlightCurated\n      };\n    }\n\n    /**\n     * Highlights the matching part of the suggestion query with the query passed as prop of the\n     * component putting it inside a `<span>` tag.\n     *\n     * @remarks\n     * The query prop should be normalized.\n     *\n     * @returns The suggestion's query with the matching part inside a `<span>` tag.\n     * @public\n     */\n    protected get queryHTML(): string {\n      if (this.hasMatchingQuery) {\n        const matcherIndex = normalizeString(this.suggestion.query).indexOf(this.query);\n\n        const [beginning, matching, end] = this.splitAt(\n          this.suggestion.query,\n          matcherIndex,\n          this.query.length\n        );\n\n        const attrsMatching = 'data-test=\"matching-part\" class=\"x-suggestion__matching-part\"';\n        return `${beginning}<span ${attrsMatching}>${matching}</span>${end}`;\n      }\n\n      return sanitize(this.suggestion.query);\n    }\n\n    /**\n     * Splits the label in three parts based on two indexes.\n     *\n     * @param label - The string that will be divided in three parts.\n     * @param start - The first index that the label will be divided by.\n     * @param skip - The second index that the label will be divided by.\n     *\n     * @returns The three parts of the divided label.\n     * @internal\n     */\n    protected splitAt(label: string, start: number, skip: number): [string, string, string] {\n      const startPart = label.substring(0, start);\n      const matchingPart = label.substring(start, start + skip);\n      const endPart = label.substring(start + skip);\n\n      return [sanitize(startPart), sanitize(matchingPart), sanitize(endPart)];\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis default suggestion component expects a suggestion to render and pass to its default slot, a\nnormalized query to compare with the suggestion's query and highlight its matching parts and events\nto emit when the suggestion is selected.\n\nIf the suggestion contains a filter, it is displayed next to the suggestion.\n\n### Default usage\n\n```vue\n<BaseSuggestion v-bind=\"{ query, suggestion, suggestionSelectedEvents }\" />\n```\n\n### Customized usage\n\n```vue\n<BaseSuggestion v-bind=\"{ query, suggestion, suggestionSelectedEvents }\">\n  <template #default=\"{ suggestion, queryHTML }\">\n    <span\n      class=\"my-suggestion\"\n      v-html=\"queryHTML\"\n      :aria-label=\"suggestion.query\"\n    />\n  </template>\n</BaseSuggestion>\n```\n\n### Customized usage with filter\n\n```vue\n<BaseSuggestion v-bind=\"{ query, suggestion, suggestionSelectedEvents }\">\n  <template #default=\"{ suggestion, queryHTML, filter }\">\n    <span\n      class=\"my-suggestion\"\n      v-html=\"queryHTML\"\n      :aria-label=\"suggestion.query\"\n    />\n    <span>{{ filter.label }}</span>\n  </template>\n</BaseSuggestion>\n```\n\n## Events\n\nA list of events that the component will emit:\n\n- `UserAcceptedAQuery`: the event is emitted after the user clicks the button. The event payload is\n  the suggestion query data.\n- `UserSelectedASuggestion`: the event is emitted after the user clicks the button. The event\n  payload is the suggestion data.\n- `UserClickedAFilter`: the event is emitted after the user clicks the button if the suggestion\n  includes a filter. The event payload is the suggestion filter.\n- The component can emit more events on click using the `suggestionSelectedEvents` prop.\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"base-suggestion.vue.js","sources":["../../../../src/components/suggestions/base-suggestion.vue"],"sourcesContent":["<template>\n  <button @click=\"emitEvents\" :class=\"dynamicCSSClasses\" class=\"x-suggestion\">\n    <!--\n      @slot Button content\n          @binding {Suggestion} suggestion - Suggestion data\n          @binding {String} query - The query that the suggestion belongs to\n          @binding {Filter} filter - Suggestion's filter\n      -->\n    <slot v-bind=\"{ suggestion, query, filter }\">\n      <Highlight class=\"x-suggestion__query\" :text=\"suggestion.query\" :highlight=\"query\" />\n      <span v-if=\"filter\" class=\"x-suggestion__filter\">{{ filter.label }}</span>\n    </slot>\n  </button>\n</template>\n\n<script lang=\"ts\">\n  import { BooleanFilter, Suggestion } from '@empathyco/x-types';\n  import { forEach } from '@empathyco/x-utils';\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { QueryFeature } from '../../types';\n  import { VueCSSClasses } from '../../utils/types';\n  import { XEventsTypes } from '../../wiring/events.types';\n  import Highlight from '../highlight.vue';\n\n  /**\n   * Renders a button with a default slot. It receives a query, which should be the query of the\n   * module using this component, a suggestion, the {@link XEvent | XEvents} that will be emitted\n   * on click with a given feature.\n   *\n   * The default slot receives the suggestion and the matched query has props.\n   *\n   * @public\n   */\n  @Component({\n    components: { Highlight }\n  })\n  export default class BaseSuggestion extends Vue {\n    /**\n     * The normalized query of the module using this component.\n     *\n     * @public\n     */\n    @Prop({ default: '' })\n    protected query!: string;\n\n    /**\n     * The suggestion to render and use in the default slot.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    protected suggestion!: Suggestion;\n\n    /**\n     * The feature from which the events will be emitted.\n     *\n     * @public\n     */\n    @Prop() //TODO: set to true when the suggestions components pass it.\n    protected feature?: QueryFeature;\n\n    /**\n     * The {@link XEvent | XEvents} that will be emitted when selecting a suggestion.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    protected suggestionSelectedEvents!: Partial<XEventsTypes>;\n\n    /**\n     * Indicates if the curated suggestion should be highlighted.\n     *\n     * @public\n     */\n    @Prop({ default: false, type: Boolean })\n    protected highlightCurated!: boolean;\n\n    /**\n     * The event handler that will be triggered when clicking on a suggestion.\n     *\n     * @remarks\n     * UserAcceptedAQuery: suggestion.query\n     * UserSelectedASuggestion: suggestion\n     * UserClickedAFilter: suggestion.facets[0].filters[0]\n     * Merges the events defined in the suggestionSelectedEvents prop and also emits them\n     *\n     * @returns The {@link XEvent | XEvents} to emit.\n     * @public\n     */\n    protected get events(): Partial<XEventsTypes> {\n      const filterEvent: Partial<XEventsTypes> = this.filter\n        ? { UserClickedAFilter: this.filter }\n        : {};\n      return {\n        UserAcceptedAQuery: this.suggestion.query,\n        UserSelectedASuggestion: this.suggestion,\n        ...this.suggestionSelectedEvents,\n        ...filterEvent\n      };\n    }\n\n    /**\n     * Emits the events when the button is clicked.\n     *\n     * @public\n     */\n    protected emitEvents(): void {\n      forEach(this.events, (event, payload) => {\n        this.$x.emit(event, payload, {\n          target: this.$el as HTMLElement,\n          feature: this.feature\n        });\n      });\n    }\n\n    /**\n     * Returns the suggestion filter object.\n     * It is a BooleanFilter because the label is needed.\n     * It returns only the first element because the facets and filters are being planned\n     * in the BaseSuggestions component.\n     *\n     * @returns The filter.\n     * @public\n     */\n    protected get filter(): BooleanFilter | undefined {\n      return this.suggestion.facets?.[0]?.filters[0] as BooleanFilter;\n    }\n\n    /**\n     * Checks if the suggestion is curated and if it should be highlighted.\n     *\n     * @returns True if the suggestion is curated and should be highlighted.\n     *\n     * @internal\n     */\n    protected get shouldHighlightCurated(): boolean {\n      return this.highlightCurated && !!this.suggestion.isCurated;\n    }\n\n    /**\n     * Generates css classes dynamically.\n     *\n     * @remarks\n     * 'x-suggestion--matching added when the query should be matched.\n     *\n     * @returns The {@link VueCSSClasses} classes.\n     * @public\n     */\n    protected get dynamicCSSClasses(): VueCSSClasses {\n      return {\n        'x-suggestion--is-curated': this.shouldHighlightCurated\n      };\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- `UserAcceptedAQuery`: the event is emitted after the user clicks the button. The event payload is\n  the suggestion query data.\n- `UserSelectedASuggestion`: the event is emitted after the user clicks the button. The event\n  payload is the suggestion data.\n- `UserClickedAFilter`: the event is emitted after the user clicks the button if the suggestion\n  includes a filter. The event payload is the suggestion filter.\n- The component can emit more events on click using the `suggestionSelectedEvents` prop.\n\n## See it in action\n\nThis suggestion component expects a suggestion to render and pass to its default slot, a normalized\nquery to compare with the suggestion's query and highlight its matching parts, and events to emit\nwhen the suggestion is selected.\n\nIf the suggestion contains a filter, it is displayed next to the suggestion.\n\n```vue live\n<template>\n  <BaseSuggestion v-bind=\"{ query, suggestion }\" />\n</template>\n<script>\n  import { BaseSuggestion } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseSuggestionDemo',\n    components: {\n      BaseSuggestion\n    },\n    data() {\n      return {\n        query: 'st',\n        suggestion: {\n          modelName: 'QuerySuggestion',\n          query: 'steak',\n          facet: {\n            namedModel: 'SimpleFacet',\n            id: 'category',\n            label: 'Category',\n            filters: [\n              {\n                id: 'category:groceries',\n                modelName: 'SimpleFilter',\n                facetId: 'category-facet',\n                label: 'Groceries',\n                selected: false,\n                totalResults: 10\n              }\n            ]\n          }\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Customise the content\n\nYou can make this component render any content you want by using the `default` slot.\n\n```vue live\n<template>\n  <BaseSuggestion v-bind=\"{ query, suggestion }\" #default=\"{ suggestion, query, filter }\">\n    <span>🔍</span>\n    <Highlight :text=\"suggestion.query\" :highlight=\"query\" />\n    <span v-if=\"filter\">{{ filter.label }}</span>\n  </BaseSuggestion>\n</template>\n<script>\n  import { BaseSuggestion } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseSuggestionDemo',\n    components: {\n      BaseSuggestion\n    },\n    data() {\n      return {\n        query: 'st',\n        suggestion: {\n          modelName: 'QuerySuggestion',\n          query: 'steak'\n        }\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/components/suggestions/base-suggestion.vue_rollup-plugin-vue_script.vue.js

@@ -2,8 +2,7 @@ import { __decorate } from 'tslib';
 import { forEach } from '@empathyco/x-utils';
 import Vue from 'vue';
 import { Prop, Component } from 'vue-property-decorator';
-import { normalizeString } from '../../utils/normalize.js';
-import { sanitize } from '../../utils/sanitize.js';
+import __vue_component__ from '../highlight.vue.js';
 
 /**
  * Renders a button with a default slot. It receives a query, which should be the query of the
@@ -63,16 +62,6 @@ let BaseSuggestion = class BaseSuggestion extends Vue {
     get filter() {
         return this.suggestion.facets?.[0]?.filters[0];
     }
-    /**
-     * Checks if the normalized suggestion query matches with the module's query, so it has a
-     * matching part.
-     *
-     * @returns If the query has a matching part or not.
-     * @internal
-     */
-    get hasMatchingQuery() {
-        return !!this.query && normalizeString(this.suggestion.query).includes(this.query);
-    }
     /**
      * Checks if the suggestion is curated and if it should be highlighted.
      *
@@ -94,45 +83,9 @@ let BaseSuggestion = class BaseSuggestion extends Vue {
      */
     get dynamicCSSClasses() {
         return {
-            'x-suggestion--matching': this.hasMatchingQuery,
             'x-suggestion--is-curated': this.shouldHighlightCurated
         };
     }
-    /**
-     * Highlights the matching part of the suggestion query with the query passed as prop of the
-     * component putting it inside a `<span>` tag.
-     *
-     * @remarks
-     * The query prop should be normalized.
-     *
-     * @returns The suggestion's query with the matching part inside a `<span>` tag.
-     * @public
-     */
-    get queryHTML() {
-        if (this.hasMatchingQuery) {
-            const matcherIndex = normalizeString(this.suggestion.query).indexOf(this.query);
-            const [beginning, matching, end] = this.splitAt(this.suggestion.query, matcherIndex, this.query.length);
-            const attrsMatching = 'data-test="matching-part" class="x-suggestion__matching-part"';
-            return `${beginning}<span ${attrsMatching}>${matching}</span>${end}`;
-        }
-        return sanitize(this.suggestion.query);
-    }
-    /**
-     * Splits the label in three parts based on two indexes.
-     *
-     * @param label - The string that will be divided in three parts.
-     * @param start - The first index that the label will be divided by.
-     * @param skip - The second index that the label will be divided by.
-     *
-     * @returns The three parts of the divided label.
-     * @internal
-     */
-    splitAt(label, start, skip) {
-        const startPart = label.substring(0, start);
-        const matchingPart = label.substring(start, start + skip);
-        const endPart = label.substring(start + skip);
-        return [sanitize(startPart), sanitize(matchingPart), sanitize(endPart)];
-    }
 };
 __decorate([
     Prop({ default: '' })
@@ -150,7 +103,9 @@ __decorate([
     Prop({ default: false, type: Boolean })
 ], BaseSuggestion.prototype, "highlightCurated", void 0);
 BaseSuggestion = __decorate([
-    Component
+    Component({
+        components: { Highlight: __vue_component__ }
+    })
 ], BaseSuggestion);
 var script = BaseSuggestion;