@empathyco/x-components 6.0.0-alpha.60 → 6.0.0-alpha.62

package/js/components/display-click-provider.vue.js

@@ -12,33 +12,32 @@ import '../plugins/x-plugin.js';
 import 'vuex';
 import '@vueuse/core';
 
-// eslint-disable-next-line no-duplicate-imports
 var _sfc_main = defineComponent({
     name: 'DisplayClickProvider',
     props: {
         resultFeature: {
             type: String,
-            required: true
+            required: true,
         },
         ignoreResultClickEvent: {
             type: Boolean,
-            default: false
+            default: false,
         },
         toolingDisplayTagging: {
             type: Object,
             required: false,
-            default: undefined
+            default: undefined,
         },
         toolingAdd2CartTagging: {
             type: Object,
             required: false,
-            default: undefined
+            default: undefined,
         },
         queryTagging: {
             type: Object,
             required: false,
-            default: undefined
-        }
+            default: undefined,
+        },
     },
     setup(props, { slots }) {
         const x = use$x();
@@ -47,27 +46,27 @@ var _sfc_main = defineComponent({
             feature: props.resultFeature,
             queryTagging: props.queryTagging,
             toolingTagging: props.toolingDisplayTagging,
-            toolingAdd2CartTagging: props.toolingAdd2CartTagging
+            toolingAdd2CartTagging: props.toolingAdd2CartTagging,
         }));
         provide('resultAddToCartExtraEvents', ['UserClickedARelatedPromptAdd2Cart']);
         provide('resultAddToCartExtraEventsMetadata', {
-            toolingAdd2CartTagging: props.toolingAdd2CartTagging
+            toolingAdd2CartTagging: props.toolingAdd2CartTagging,
         });
         provide('resultClickExtraEvents', [
             'UserClickedARelatedPromptResult',
-            'UserClickedADisplayResult'
+            'UserClickedADisplayResult',
         ]);
         provide('resultLinkMetadataPerEvent', {
             UserClickedARelatedPromptResult: displayClickMetadata.value,
             UserClickedADisplayResult: displayClickMetadata.value,
             ...(props.ignoreResultClickEvent && {
                 UserClickedAResult: {
-                    ignoreInModules: ['tagging']
-                }
-            })
+                    ignoreInModules: ['tagging'],
+                },
+            }),
         });
         return () => slots.default?.()[0] ?? '';
-    }
+    },
 });
 
 export { _sfc_main as default };

package/js/components/display-click-provider.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"display-click-provider.vue.js","sources":["../../../src/components/display-click-provider.vue"],"sourcesContent":["<script lang=\"ts\">\n  import type { TaggingRequest } from '@empathyco/x-types';\n  import type { PropType } from 'vue';\n  // eslint-disable-next-line no-duplicate-imports\n  import { computed, defineComponent, provide } from 'vue';\n  import { use$x } from '../composables/index';\n  import { DisplayWireMetadata } from '../wiring/index';\n  import type { ResultFeature } from '../types/index';\n\n  export default defineComponent({\n    name: 'DisplayClickProvider',\n    props: {\n      resultFeature: {\n        type: String as PropType<ResultFeature>,\n        required: true\n      },\n      ignoreResultClickEvent: {\n        type: Boolean,\n        default: false\n      },\n      toolingDisplayTagging: {\n        type: Object as PropType<TaggingRequest>,\n        required: false,\n        default: undefined\n      },\n      toolingAdd2CartTagging: {\n        type: Object as PropType<TaggingRequest>,\n        required: false,\n        default: undefined\n      },\n      queryTagging: {\n        type: Object as PropType<TaggingRequest>,\n        required: false,\n        default: undefined\n      }\n    },\n    setup(props, { slots }) {\n      const x = use$x();\n\n      const displayClickMetadata = computed<Partial<DisplayWireMetadata>>(() => ({\n        displayOriginalQuery: x.query.search,\n        feature: props.resultFeature,\n        queryTagging: props.queryTagging,\n        toolingTagging: props.toolingDisplayTagging,\n        toolingAdd2CartTagging: props.toolingAdd2CartTagging\n      }));\n\n      provide('resultAddToCartExtraEvents', ['UserClickedARelatedPromptAdd2Cart']);\n      provide('resultAddToCartExtraEventsMetadata', {\n        toolingAdd2CartTagging: props.toolingAdd2CartTagging\n      });\n\n      provide('resultClickExtraEvents', [\n        'UserClickedARelatedPromptResult',\n        'UserClickedADisplayResult'\n      ]);\n      provide('resultLinkMetadataPerEvent', {\n        UserClickedARelatedPromptResult: displayClickMetadata.value,\n        UserClickedADisplayResult: displayClickMetadata.value,\n        ...(props.ignoreResultClickEvent && {\n          UserClickedAResult: {\n            ignoreInModules: ['tagging']\n          }\n        })\n      });\n\n      return () => slots.default?.()[0] ?? '';\n    }\n  });\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAGE;AAMA,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,sBAAsB;AAC5B,IAAA,KAAK,EAAE;AACL,QAAA,aAAa,EAAE;AACb,YAAA,IAAI,EAAE,MAAiC;AACvC,YAAA,QAAQ,EAAE,IAAG;AACd,SAAA;AACD,QAAA,sBAAsB,EAAE;AACtB,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,KAAI;AACd,SAAA;AACD,QAAA,qBAAqB,EAAE;AACrB,YAAA,IAAI,EAAE,MAAkC;AACxC,YAAA,QAAQ,EAAE,KAAK;AACf,YAAA,OAAO,EAAE,SAAQ;AAClB,SAAA;AACD,QAAA,sBAAsB,EAAE;AACtB,YAAA,IAAI,EAAE,MAAkC;AACxC,YAAA,QAAQ,EAAE,KAAK;AACf,YAAA,OAAO,EAAE,SAAQ;AAClB,SAAA;AACD,QAAA,YAAY,EAAE;AACZ,YAAA,IAAI,EAAE,MAAkC;AACxC,YAAA,QAAQ,EAAE,KAAK;AACf,YAAA,OAAO,EAAE,SAAQ;AACnB,SAAA;AACD,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,KAAI,EAAG,EAAA;AACpB,QAAA,MAAM,CAAE,GAAE,KAAK,EAAE,CAAA;AAEjB,QAAA,MAAM,oBAAqB,GAAE,QAAQ,CAA+B,OAAO;AACzE,YAAA,oBAAoB,EAAE,CAAC,CAAC,KAAK,CAAC,MAAM;YACpC,OAAO,EAAE,KAAK,CAAC,aAAa;YAC5B,YAAY,EAAE,KAAK,CAAC,YAAY;YAChC,cAAc,EAAE,KAAK,CAAC,qBAAqB;YAC3C,sBAAsB,EAAE,KAAK,CAAC,sBAAqB;AACpD,SAAA,CAAC,CAAC,CAAA;AAEH,QAAA,OAAO,CAAC,4BAA4B,EAAE,CAAC,mCAAmC,CAAC,CAAC,CAAA;QAC5E,OAAO,CAAC,oCAAoC,EAAE;YAC5C,sBAAsB,EAAE,KAAK,CAAC,sBAAqB;AACpD,SAAA,CAAC,CAAA;QAEF,OAAO,CAAC,wBAAwB,EAAE;YAChC,iCAAiC;YACjC,2BAA0B;AAC3B,SAAA,CAAC,CAAA;QACF,OAAO,CAAC,4BAA4B,EAAE;YACpC,+BAA+B,EAAE,oBAAoB,CAAC,KAAK;YAC3D,yBAAyB,EAAE,oBAAoB,CAAC,KAAK;AACrD,YAAA,IAAI,KAAK,CAAC,sBAAqB,IAAK;AAClC,gBAAA,kBAAkB,EAAE;oBAClB,eAAe,EAAE,CAAC,SAAS,CAAA;AAC7B,iBAAA;aACD;AACF,SAAA,CAAC,CAAA;AAEF,QAAA,OAAO,MAAM,KAAK,CAAC,OAAO,IAAI,CAAC,CAAC,CAAA,IAAK,EAAE,CAAA;KACzC;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"display-click-provider.vue.js","sources":["../../../src/components/display-click-provider.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { TaggingRequest } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\n\nimport type { ResultFeature } from '../types/index'\nimport type { DisplayWireMetadata } from '../wiring/index'\nimport { computed, defineComponent, provide } from 'vue'\nimport { use$x } from '../composables/index'\n\nexport default defineComponent({\n  name: 'DisplayClickProvider',\n  props: {\n    resultFeature: {\n      type: String as PropType<ResultFeature>,\n      required: true,\n    },\n    ignoreResultClickEvent: {\n      type: Boolean,\n      default: false,\n    },\n    toolingDisplayTagging: {\n      type: Object as PropType<TaggingRequest>,\n      required: false,\n      default: undefined,\n    },\n    toolingAdd2CartTagging: {\n      type: Object as PropType<TaggingRequest>,\n      required: false,\n      default: undefined,\n    },\n    queryTagging: {\n      type: Object as PropType<TaggingRequest>,\n      required: false,\n      default: undefined,\n    },\n  },\n  setup(props, { slots }) {\n    const x = use$x()\n\n    const displayClickMetadata = computed<Partial<DisplayWireMetadata>>(() => ({\n      displayOriginalQuery: x.query.search,\n      feature: props.resultFeature,\n      queryTagging: props.queryTagging,\n      toolingTagging: props.toolingDisplayTagging,\n      toolingAdd2CartTagging: props.toolingAdd2CartTagging,\n    }))\n\n    provide('resultAddToCartExtraEvents', ['UserClickedARelatedPromptAdd2Cart'])\n    provide('resultAddToCartExtraEventsMetadata', {\n      toolingAdd2CartTagging: props.toolingAdd2CartTagging,\n    })\n\n    provide('resultClickExtraEvents', [\n      'UserClickedARelatedPromptResult',\n      'UserClickedADisplayResult',\n    ])\n    provide('resultLinkMetadataPerEvent', {\n      UserClickedARelatedPromptResult: displayClickMetadata.value,\n      UserClickedADisplayResult: displayClickMetadata.value,\n      ...(props.ignoreResultClickEvent && {\n        UserClickedAResult: {\n          ignoreInModules: ['tagging'],\n        },\n      }),\n    })\n\n    return () => slots.default?.()[0] ?? ''\n  },\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;;;AASA,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,sBAAsB;AAC5B,IAAA,KAAK,EAAE;AACL,QAAA,aAAa,EAAE;AACb,YAAA,IAAI,EAAE,MAAiC;AACvC,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACD,QAAA,sBAAsB,EAAE;AACtB,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,KAAK;AACf,SAAA;AACD,QAAA,qBAAqB,EAAE;AACrB,YAAA,IAAI,EAAE,MAAkC;AACxC,YAAA,QAAQ,EAAE,KAAK;AACf,YAAA,OAAO,EAAE,SAAS;AACnB,SAAA;AACD,QAAA,sBAAsB,EAAE;AACtB,YAAA,IAAI,EAAE,MAAkC;AACxC,YAAA,QAAQ,EAAE,KAAK;AACf,YAAA,OAAO,EAAE,SAAS;AACnB,SAAA;AACD,QAAA,YAAY,EAAE;AACZ,YAAA,IAAI,EAAE,MAAkC;AACxC,YAAA,QAAQ,EAAE,KAAK;AACf,YAAA,OAAO,EAAE,SAAS;AACnB,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,KAAI,EAAG,EAAA;AACpB,QAAA,MAAM,CAAA,GAAI,KAAK,EAAC,CAAA;AAEhB,QAAA,MAAM,oBAAqB,GAAE,QAAQ,CAA+B,OAAO;AACzE,YAAA,oBAAoB,EAAE,CAAC,CAAC,KAAK,CAAC,MAAM;YACpC,OAAO,EAAE,KAAK,CAAC,aAAa;YAC5B,YAAY,EAAE,KAAK,CAAC,YAAY;YAChC,cAAc,EAAE,KAAK,CAAC,qBAAqB;YAC3C,sBAAsB,EAAE,KAAK,CAAC,sBAAsB;AACrD,SAAA,CAAC,CAAA,CAAA;AAEF,QAAA,OAAO,CAAC,4BAA4B,EAAE,CAAC,mCAAmC,CAAC,CAAA,CAAA;QAC3E,OAAO,CAAC,oCAAoC,EAAE;YAC5C,sBAAsB,EAAE,KAAK,CAAC,sBAAsB;AACrD,SAAA,CAAA,CAAA;QAED,OAAO,CAAC,wBAAwB,EAAE;YAChC,iCAAiC;YACjC,2BAA2B;AAC5B,SAAA,CAAA,CAAA;QACD,OAAO,CAAC,4BAA4B,EAAE;YACpC,+BAA+B,EAAE,oBAAoB,CAAC,KAAK;YAC3D,yBAAyB,EAAE,oBAAoB,CAAC,KAAK;AACrD,YAAA,IAAI,KAAK,CAAC,sBAAqB,IAAK;AAClC,gBAAA,kBAAkB,EAAE;oBAClB,eAAe,EAAE,CAAC,SAAS,CAAC;AAC7B,iBAAA;aACF;AACF,SAAA,CAAA,CAAA;AAED,QAAA,OAAO,MAAM,KAAK,CAAC,OAAO,IAAI,CAAC,CAAC,CAAE,IAAG,EAAC,CAAA;KACvC;AACF,CAAA,CAAA;;;;"}

package/js/components/display-emitter.vue.js

@@ -8,12 +8,12 @@ var _sfc_main = defineComponent({
         /** The payload for the display event emit. */
         payload: {
             type: Object,
-            required: true
+            required: true,
         },
         /** Optional event metadata. */
         eventMetadata: {
-            type: Object
-        }
+            type: Object,
+        },
     },
     setup(props, { slots }) {
         let unwatchDisplay;
@@ -23,7 +23,7 @@ var _sfc_main = defineComponent({
                 unwatchDisplay = useEmitDisplayEvent({
                     element,
                     taggingRequest: props.payload,
-                    ...(props.eventMetadata && { eventMetadata: props.eventMetadata })
+                    ...(props.eventMetadata && { eventMetadata: props.eventMetadata }),
                 }).unwatchDisplay;
             }
         });
@@ -37,7 +37,7 @@ var _sfc_main = defineComponent({
          * retrieve the HTML element in both versions.
          */
         return () => slots.default?.()[0] ?? '';
-    }
+    },
 });
 
 export { _sfc_main as default };

package/js/components/display-emitter.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"display-emitter.vue.js","sources":["../../../src/components/display-emitter.vue"],"sourcesContent":["<script lang=\"ts\">\n  import {\n    defineComponent,\n    getCurrentInstance,\n    onMounted,\n    onUnmounted,\n    PropType,\n    WatchStopHandle\n  } from 'vue';\n  import { TaggingRequest } from '@empathyco/x-types';\n  import { useEmitDisplayEvent } from '../composables/use-on-display';\n  import { WireMetadata } from '../wiring';\n\n  /** A component that emits a display event when it first appears in the viewport. */\n  export default defineComponent({\n    name: 'DisplayEmitter',\n    props: {\n      /** The payload for the display event emit. */\n      payload: {\n        type: Object as PropType<TaggingRequest>,\n        required: true\n      },\n      /** Optional event metadata. */\n      eventMetadata: {\n        type: Object as PropType<Omit<WireMetadata, 'moduleName' | 'origin' | 'location'>>\n      }\n    },\n    setup(props, { slots }) {\n      let unwatchDisplay: WatchStopHandle | undefined;\n\n      onMounted(() => {\n        const element = getCurrentInstance()?.proxy?.$el as HTMLElement | undefined;\n        if (element) {\n          unwatchDisplay = useEmitDisplayEvent({\n            element,\n            taggingRequest: props.payload,\n            ...(props.eventMetadata && { eventMetadata: props.eventMetadata })\n          }).unwatchDisplay;\n        }\n      });\n\n      onUnmounted(() => {\n        unwatchDisplay?.();\n      });\n\n      /*\n       * Obtains the vNodes array of the default slot and renders only the first one.\n       * It avoids to render a `Fragment` with the vNodes in Vue3 and the same behaviour in Vue2\n       * because Vue2 only allows a single root node. Then, `getCurrentInstance()?.proxy?.$el` to\n       * retrieve the HTML element in both versions.\n       */\n      return () => slots.default?.()[0] ?? '';\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`TrackableElementDisplayed`](https://github.com/empathyco/x/blob/main/packages/x-components/src/x-modules/tagging/events.types.ts)\n\n## See it in action\n\nIn this example, the `DisplayEmitter` component will emit the `TrackableElementDisplayed` event when\nthe div inside first appears in the viewport.\n\n```vue\n<template>\n  <DisplayEmitter :payload=\"{ url: 'tagging/url', params: {} }\">\n    <div>I'm displaying</div>\n  </DisplayEmitter>\n</template>\n<script>\n  import { DisplayEmitter } from '@empathyco/x-components';\n  export default {\n    name: 'DisplayEmitterDemo',\n    components: {\n      DisplayEmitter\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;AAaE;AACA,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,gBAAgB;AACtB,IAAA,KAAK,EAAE;;AAEL,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,MAAkC;AACxC,YAAA,QAAQ,EAAE,IAAG;AACd,SAAA;;AAED,QAAA,aAAa,EAAE;AACb,YAAA,IAAI,EAAE,MAA2E;AACnF,SAAA;AACD,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,KAAI,EAAG,EAAA;AACpB,QAAA,IAAI,cAA2C,CAAA;QAE/C,SAAS,CAAC,MAAM;YACd,MAAM,OAAQ,GAAE,kBAAkB,EAAE,EAAE,KAAK,EAAE,GAA8B,CAAA;AAC3E,YAAA,IAAI,OAAO,EAAE;gBACX,cAAa,GAAI,mBAAmB,CAAC;oBACnC,OAAO;oBACP,cAAc,EAAE,KAAK,CAAC,OAAO;AAC7B,oBAAA,IAAI,KAAK,CAAC,aAAc,IAAG,EAAE,aAAa,EAAE,KAAK,CAAC,aAAY,EAAG;iBAClE,CAAC,CAAC,cAAc,CAAA;AACnB,aAAA;AACF,SAAC,CAAC,CAAA;QAEF,WAAW,CAAC,MAAM;YAChB,cAAc,IAAI,CAAA;AACpB,SAAC,CAAC,CAAA;AAEF;;;;;AAKE;AACF,QAAA,OAAO,MAAM,KAAK,CAAC,OAAO,IAAI,CAAC,CAAC,CAAA,IAAK,EAAE,CAAA;KACzC;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"display-emitter.vue.js","sources":["../../../src/components/display-emitter.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { TaggingRequest } from '@empathyco/x-types'\nimport type { PropType, WatchStopHandle } from 'vue'\nimport type { WireMetadata } from '../wiring'\nimport { defineComponent, getCurrentInstance, onMounted, onUnmounted } from 'vue'\nimport { useEmitDisplayEvent } from '../composables/use-on-display'\n\n/** A component that emits a display event when it first appears in the viewport. */\nexport default defineComponent({\n  name: 'DisplayEmitter',\n  props: {\n    /** The payload for the display event emit. */\n    payload: {\n      type: Object as PropType<TaggingRequest>,\n      required: true,\n    },\n    /** Optional event metadata. */\n    eventMetadata: {\n      type: Object as PropType<Omit<WireMetadata, 'moduleName' | 'origin' | 'location'>>,\n    },\n  },\n  setup(props, { slots }) {\n    let unwatchDisplay: WatchStopHandle | undefined\n\n    onMounted(() => {\n      const element = getCurrentInstance()?.proxy?.$el as HTMLElement | undefined\n      if (element) {\n        unwatchDisplay = useEmitDisplayEvent({\n          element,\n          taggingRequest: props.payload,\n          ...(props.eventMetadata && { eventMetadata: props.eventMetadata }),\n        }).unwatchDisplay\n      }\n    })\n\n    onUnmounted(() => {\n      unwatchDisplay?.()\n    })\n\n    /*\n     * Obtains the vNodes array of the default slot and renders only the first one.\n     * It avoids to render a `Fragment` with the vNodes in Vue3 and the same behaviour in Vue2\n     * because Vue2 only allows a single root node. Then, `getCurrentInstance()?.proxy?.$el` to\n     * retrieve the HTML element in both versions.\n     */\n    return () => slots.default?.()[0] ?? ''\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`TrackableElementDisplayed`](https://github.com/empathyco/x/blob/main/packages/x-components/src/x-modules/tagging/events.types.ts)\n\n## See it in action\n\nIn this example, the `DisplayEmitter` component will emit the `TrackableElementDisplayed` event when\nthe div inside first appears in the viewport.\n\n```vue\n<template>\n  <DisplayEmitter :payload=\"{ url: 'tagging/url', params: {} }\">\n    <div>I'm displaying</div>\n  </DisplayEmitter>\n</template>\n<script>\nimport { DisplayEmitter } from '@empathyco/x-components'\nexport default {\n  name: 'DisplayEmitterDemo',\n  components: {\n    DisplayEmitter,\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;AAOA;AACA,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,gBAAgB;AACtB,IAAA,KAAK,EAAE;;AAEL,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,MAAkC;AACxC,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;;AAED,QAAA,aAAa,EAAE;AACb,YAAA,IAAI,EAAE,MAA4E;AACnF,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,KAAI,EAAG,EAAA;AACpB,QAAA,IAAI,cAA0C,CAAA;QAE9C,SAAS,CAAC,MAAM;YACd,MAAM,OAAQ,GAAE,kBAAkB,EAAE,EAAE,KAAK,EAAE,GAA6B,CAAA;AAC1E,YAAA,IAAI,OAAO,EAAE;gBACX,cAAa,GAAI,mBAAmB,CAAC;oBACnC,OAAO;oBACP,cAAc,EAAE,KAAK,CAAC,OAAO;AAC7B,oBAAA,IAAI,KAAK,CAAC,aAAc,IAAG,EAAE,aAAa,EAAE,KAAK,CAAC,aAAc,EAAC;iBAClE,CAAC,CAAC,cAAa,CAAA;AAClB,aAAA;AACF,SAAC,CAAA,CAAA;QAED,WAAW,CAAC,MAAM;YAChB,cAAc,IAAG,CAAA;AACnB,SAAC,CAAA,CAAA;AAED;;;;;AAKE;AACF,QAAA,OAAO,MAAM,KAAK,CAAC,OAAO,IAAI,CAAC,CAAC,CAAE,IAAG,EAAC,CAAA;KACvC;AACF,CAAA,CAAA;;;;"}

package/js/components/filters/labels/base-price-filter-label.vue.js

@@ -13,11 +13,11 @@ var _sfc_main = defineComponent({
         /** The filter data for get min and max value. */
         filter: {
             type: Object,
-            required: true
+            required: true,
         },
         /** Configuration for show the label. */
         format: {
-            type: String
+            type: String,
         },
         /**
          * Message shown when the filter hasn't got the min value defined.
@@ -26,7 +26,7 @@ var _sfc_main = defineComponent({
          */
         lessThan: {
             type: String,
-            required: true
+            required: true,
         },
         /**
          * Message shown when the filter has both the min and max values defined.
@@ -35,7 +35,7 @@ var _sfc_main = defineComponent({
          */
         fromTo: {
             type: String,
-            required: true
+            required: true,
         },
         /**
          * Message shown when the filter hasn't got max value defined.
@@ -44,8 +44,8 @@ var _sfc_main = defineComponent({
          */
         from: {
             type: String,
-            required: true
-        }
+            required: true,
+        },
     },
     setup(props) {
         /**
@@ -62,25 +62,25 @@ var _sfc_main = defineComponent({
                     : props.fromTo;
         });
         return () => {
-            const labelParts = label.value.split(/({min}|{max})/);
+            const labelParts = label.value.split(/(\{min\}|\{max\})/);
             const children = labelParts.map(partMessage => {
                 if (partMessage === '{min}') {
                     return h(BaseCurrency, {
                         value: props.filter.range.min,
-                        format: props.format
+                        format: props.format,
                     });
                 }
                 else if (partMessage === '{max}') {
                     return h(BaseCurrency, {
                         value: props.filter.range.max,
-                        format: props.format
+                        format: props.format,
                     });
                 }
                 return partMessage;
             });
             return h('span', { class: 'x-price-filter-label' }, children);
         };
-    }
+    },
 });
 
 export { _sfc_main as default };

package/js/components/filters/labels/base-price-filter-label.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-price-filter-label.vue.js","sources":["../../../../../src/components/filters/labels/base-price-filter-label.vue"],"sourcesContent":["<script lang=\"ts\">\n  import { computed, defineComponent, h, PropType } from 'vue';\n  import { RangeValue } from '@empathyco/x-types';\n  import BaseCurrency from '../../currency/base-currency.vue';\n\n  /**\n   * Renders a label for a price filter, allowing to select different messages depending on the\n   * value of the filter.\n   *\n   * @public\n   */\n  export default defineComponent({\n    components: { BaseCurrency },\n    props: {\n      /** The filter data for get min and max value. */\n      filter: {\n        type: Object as PropType<{ range: RangeValue }>,\n        required: true\n      },\n      /** Configuration for show the label. */\n      format: {\n        type: String\n      },\n      /**\n       * Message shown when the filter hasn't got the min value defined.\n       *\n       * @public\n       */\n      lessThan: {\n        type: String,\n        required: true\n      },\n      /**\n       * Message shown when the filter has both the min and max values defined.\n       *\n       * @public\n       */\n      fromTo: {\n        type: String,\n        required: true\n      },\n      /**\n       * Message shown when the filter hasn't got max value defined.\n       *\n       * @public\n       */\n      from: {\n        type: String,\n        required: true\n      }\n    },\n    setup(props) {\n      /**\n       * The active label, retrieved from the provided props.\n       * It depends on the min and max values of the filter.\n       *\n       * @returns The active label to be formatted with the min and max values of the filter.\n       */\n      const label = computed<string>(() => {\n        return props.filter.range.min === null\n          ? props.lessThan\n          : props.filter.range.max === null\n          ? props.from\n          : props.fromTo;\n      });\n\n      return () => {\n        const labelParts = label.value.split(/({min}|{max})/);\n\n        const children = labelParts.map(partMessage => {\n          if (partMessage === '{min}') {\n            return h(BaseCurrency, {\n              value: props.filter.range.min as number,\n              format: props.format\n            });\n          } else if (partMessage === '{max}') {\n            return h(BaseCurrency, {\n              value: props.filter.range.max as number,\n              format: props.format\n            });\n          }\n          return partMessage;\n        });\n\n        return h('span', { class: 'x-price-filter-label' }, children);\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Example\n\nRenders a label for a price filter, allowing to select different messages depending on the value of\nthe filter.\n\n- When the `min` value property isn't defined in the filter, you can show a message like\n  `Less than $10` by using the `lessThan` prop, combined with the `{max}` placeholder.\n- When the `max` value property isn't defined in the filter, you can show a message like\n  `More than $300` by using the `from` prop, combined with the `{min}` placeholder.\n- If both the `min` and `max` values of the filter are defined, you can show a message like\n  `$10 - $300` by using the `fromTo` prop.\n\nThis component uses internally the `BaseCurrency` one, so you can pass the same props to configure\nhow the price should look like.\n\n### Basic usage\n\n```vue\n<template>\n  <Facets>\n    <template #price=\"{ facet }\">\n      <Filters v-slot=\"{ filter }\" :filters=\"facet.filters\">\n        <NumberRangeFilter :filter=\"filter\" v-slot=\"{ filter }\">\n          <BasePriceFilterLabel\n            :filter=\"filter\"\n            format=\"$i\"\n            lessThan=\"Less than {max}\"\n            fromTo=\"From {min} to {max}\"\n            from=\"More than {min}\"\n          />\n        </NumberRangeFilter>\n      </Filters>\n    </template>\n  </Facets>\n</template>\n\n<script>\n  import { BasePriceFilterLabel } from '@empathyco/x-components';\n  import { Filters, Facets, NumberRangeFilter } from '@empathyco/x-components/facets';\n\n  export default {\n    name: 'MyFacets',\n    components: {\n      Facets,\n      Filters,\n      NumberRangeFilter,\n      BasePriceFilterLabel\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;AAKE;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;IAC7B,UAAU,EAAE,EAAE,YAAW,EAAG;AAC5B,IAAA,KAAK,EAAE;;AAEL,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAAyC;AAC/C,YAAA,QAAQ,EAAE,IAAG;AACd,SAAA;;AAED,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAAK;AACZ,SAAA;AACD;;;;AAIE;AACF,QAAA,QAAQ,EAAE;AACR,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,QAAQ,EAAE,IAAG;AACd,SAAA;AACD;;;;AAIE;AACF,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,QAAQ,EAAE,IAAG;AACd,SAAA;AACD;;;;AAIE;AACF,QAAA,IAAI,EAAE;AACJ,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,QAAQ,EAAE,IAAG;AACf,SAAA;AACD,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT;;;;;AAKE;AACF,QAAA,MAAM,KAAM,GAAE,QAAQ,CAAS,MAAM;YACnC,OAAO,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,GAAE,KAAM,IAAG;kBACjC,KAAK,CAAC,QAAO;kBACb,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,GAAI,KAAI,IAAG;sBAC9B,KAAK,CAAC,IAAG;AACX,sBAAE,KAAK,CAAC,MAAM,CAAA;AAClB,SAAC,CAAC,CAAA;AAEF,QAAA,OAAO,MAAM;YACX,MAAM,UAAS,GAAI,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,eAAe,CAAC,CAAA;YAErD,MAAM,WAAW,UAAU,CAAC,GAAG,CAAC,WAAU,IAAK;gBAC7C,IAAI,WAAY,KAAI,OAAO,EAAE;oBAC3B,OAAO,CAAC,CAAC,YAAY,EAAE;AACrB,wBAAA,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,GAAa;wBACvC,MAAM,EAAE,KAAK,CAAC,MAAK;AACpB,qBAAA,CAAC,CAAA;AACJ,iBAAA;qBAAO,IAAI,WAAU,KAAM,OAAO,EAAE;oBAClC,OAAO,CAAC,CAAC,YAAY,EAAE;AACrB,wBAAA,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,GAAa;wBACvC,MAAM,EAAE,KAAK,CAAC,MAAK;AACpB,qBAAA,CAAC,CAAA;AACJ,iBAAA;AACA,gBAAA,OAAO,WAAW,CAAA;AACpB,aAAC,CAAC,CAAA;AAEF,YAAA,OAAO,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,sBAAqB,EAAG,EAAE,QAAQ,CAAC,CAAA;AAC/D,SAAC,CAAA;KACH;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"base-price-filter-label.vue.js","sources":["../../../../../src/components/filters/labels/base-price-filter-label.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { RangeValue } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport { computed, defineComponent, h } from 'vue'\nimport BaseCurrency from '../../currency/base-currency.vue'\n\n/**\n * Renders a label for a price filter, allowing to select different messages depending on the\n * value of the filter.\n *\n * @public\n */\nexport default defineComponent({\n  components: { BaseCurrency },\n  props: {\n    /** The filter data for get min and max value. */\n    filter: {\n      type: Object as PropType<{ range: RangeValue }>,\n      required: true,\n    },\n    /** Configuration for show the label. */\n    format: {\n      type: String,\n    },\n    /**\n     * Message shown when the filter hasn't got the min value defined.\n     *\n     * @public\n     */\n    lessThan: {\n      type: String,\n      required: true,\n    },\n    /**\n     * Message shown when the filter has both the min and max values defined.\n     *\n     * @public\n     */\n    fromTo: {\n      type: String,\n      required: true,\n    },\n    /**\n     * Message shown when the filter hasn't got max value defined.\n     *\n     * @public\n     */\n    from: {\n      type: String,\n      required: true,\n    },\n  },\n  setup(props) {\n    /**\n     * The active label, retrieved from the provided props.\n     * It depends on the min and max values of the filter.\n     *\n     * @returns The active label to be formatted with the min and max values of the filter.\n     */\n    const label = computed<string>(() => {\n      return props.filter.range.min === null\n        ? props.lessThan\n        : props.filter.range.max === null\n          ? props.from\n          : props.fromTo\n    })\n\n    return () => {\n      const labelParts = label.value.split(/(\\{min\\}|\\{max\\})/)\n\n      const children = labelParts.map(partMessage => {\n        if (partMessage === '{min}') {\n          return h(BaseCurrency, {\n            value: props.filter.range.min as number,\n            format: props.format,\n          })\n        } else if (partMessage === '{max}') {\n          return h(BaseCurrency, {\n            value: props.filter.range.max as number,\n            format: props.format,\n          })\n        }\n        return partMessage\n      })\n\n      return h('span', { class: 'x-price-filter-label' }, children)\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Example\n\nRenders a label for a price filter, allowing to select different messages depending on the value of\nthe filter.\n\n- When the `min` value property isn't defined in the filter, you can show a message like\n  `Less than $10` by using the `lessThan` prop, combined with the `{max}` placeholder.\n- When the `max` value property isn't defined in the filter, you can show a message like\n  `More than $300` by using the `from` prop, combined with the `{min}` placeholder.\n- If both the `min` and `max` values of the filter are defined, you can show a message like\n  `$10 - $300` by using the `fromTo` prop.\n\nThis component uses internally the `BaseCurrency` one, so you can pass the same props to configure\nhow the price should look like.\n\n### Basic usage\n\n```vue\n<template>\n  <Facets>\n    <template #price=\"{ facet }\">\n      <Filters v-slot=\"{ filter }\" :filters=\"facet.filters\">\n        <NumberRangeFilter :filter=\"filter\" v-slot=\"{ filter }\">\n          <BasePriceFilterLabel\n            :filter=\"filter\"\n            format=\"$i\"\n            lessThan=\"Less than {max}\"\n            fromTo=\"From {min} to {max}\"\n            from=\"More than {min}\"\n          />\n        </NumberRangeFilter>\n      </Filters>\n    </template>\n  </Facets>\n</template>\n\n<script>\nimport { BasePriceFilterLabel } from '@empathyco/x-components'\nimport { Filters, Facets, NumberRangeFilter } from '@empathyco/x-components/facets'\n\nexport default {\n  name: 'MyFacets',\n  components: {\n    Facets,\n    Filters,\n    NumberRangeFilter,\n    BasePriceFilterLabel,\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;AAMA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;IAC7B,UAAU,EAAE,EAAE,YAAW,EAAG;AAC5B,IAAA,KAAK,EAAE;;AAEL,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAAyC;AAC/C,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;;AAED,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAAM;AACb,SAAA;AACD;;;;AAIE;AACF,QAAA,QAAQ,EAAE;AACR,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACD;;;;AAIE;AACF,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACD;;;;AAIE;AACF,QAAA,IAAI,EAAE;AACJ,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT;;;;;AAKE;AACF,QAAA,MAAM,KAAM,GAAE,QAAQ,CAAS,MAAM;YACnC,OAAO,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,GAAE,KAAM,IAAG;kBACjC,KAAK,CAAC,QAAO;kBACb,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,GAAI,KAAI,IAAG;sBAC5B,KAAK,CAAC,IAAG;AACX,sBAAE,KAAK,CAAC,MAAK,CAAA;AACnB,SAAC,CAAA,CAAA;AAED,QAAA,OAAO,MAAM;YACX,MAAM,UAAS,GAAI,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,mBAAmB,CAAA,CAAA;YAExD,MAAM,WAAW,UAAU,CAAC,GAAG,CAAC,WAAU,IAAK;gBAC7C,IAAI,WAAY,KAAI,OAAO,EAAE;oBAC3B,OAAO,CAAC,CAAC,YAAY,EAAE;AACrB,wBAAA,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,GAAa;wBACvC,MAAM,EAAE,KAAK,CAAC,MAAM;AACrB,qBAAA,CAAA,CAAA;AACH,iBAAA;qBAAO,IAAI,WAAU,KAAM,OAAO,EAAE;oBAClC,OAAO,CAAC,CAAC,YAAY,EAAE;AACrB,wBAAA,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,GAAa;wBACvC,MAAM,EAAE,KAAK,CAAC,MAAM;AACrB,qBAAA,CAAA,CAAA;AACH,iBAAA;AACA,gBAAA,OAAO,WAAU,CAAA;AACnB,aAAC,CAAA,CAAA;AAED,YAAA,OAAO,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,sBAAqB,EAAG,EAAE,QAAQ,CAAA,CAAA;AAC9D,SAAA,CAAA;KACD;AACF,CAAA,CAAA;;;;"}

package/js/components/filters/labels/base-rating-filter-label.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-rating-filter-label.vue.js","sources":["../../../../../src/components/filters/labels/base-rating-filter-label.vue"],"sourcesContent":["<template>\n  <BaseRating class=\"x-rating-filter-label\" data-test=\"rating-label\" :value=\"value\" :max=\"max\">\n    <template #filled-icon>\n      <!--\n       @slot Filled icon content\n     -->\n      <slot name=\"rating-icon-filled\" />\n    </template>\n    <template #empty-icon>\n      <!--\n       @slot Empty icon content\n     -->\n      <slot name=\"rating-icon-empty\" />\n    </template>\n  </BaseRating>\n</template>\n\n<script lang=\"ts\">\n  import { BooleanFilter } from '@empathyco/x-types';\n  import { computed, defineComponent, PropType } from 'vue';\n  import BaseRating from '../../base-rating.vue';\n\n  /**\n   * Renders a label for a rating filter, allowing to override the elements used to paint\n   * the rating.\n   *\n   * @public\n   */\n  export default defineComponent({\n    components: {\n      BaseRating\n    },\n    props: {\n      /**\n       * The filter data to render.\n       *\n       * @public\n       */\n      filter: {\n        type: Object as PropType<BooleanFilter>,\n        required: true\n      },\n      /**\n       * Maximum number of elements to paint.\n       *\n       * @public\n       */\n      max: {\n        type: Number,\n        default: 5\n      }\n    },\n    setup(props) {\n      /**\n       * Converts the label string into a number.\n       *\n       * @returns The label as number or 0 if it is not a valid number.\n       *\n       * @internal\n       */\n      const value = computed<number>(() => {\n        const x = parseFloat(props.filter.label) ?? 0;\n        return Number.isNaN(x) ? 0 : x;\n      });\n\n      return {\n        value\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Example\n\nRenders a label for a rating filter, allowing to override the elements used to paint the rating. The\nfilter label must be a valid number string. For example: '3', '2.5', '0.25'\n\n### Basic usage\n\n```vue\n<BaseRatingFilterLabel :filter=\"filter\" />\n```\n\n### Customizing color\n\nIts possible to change the default color directly with color CSS attribute. For more elaborated\nstyles it's possible to style the inner svg icons.\n\n```vue\n<BaseRatingFilterLabel :filter=\"filter\" style=\"color: gold\" />\n```\n\n### Customizing its contents\n\nThe `max` prop can be used to set the max rating number. It will render as many icons as the this\n`max` value.\n\n```vue\n<BaseRatingFilterLabel :filter=\"filter\" :max=\"max\" />\n```\n\nThe default icons can be changed using the `rating-icon-filled` and `rating-icon-empty` icons, to\nrepresent the filled empty and empty icon in the rating component.\n\n```vue\n<BaseRatingFilterLabel :filter=\"filter\" :max=\"max\">\n  <template #rating-icon-filled>♥</template>\n  <template #rating-icon-empty>♡</template>\n</BaseRatingFilterLabel>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","value","_renderSlot"],"mappings":";;;;;gCACEA,gBAaa,CAAA,YAAA,CAAA,CAAA;AAb6B,EAAA,OAAAC,SAAA,EAAwB,EAAAC,WAAA,CAAA,qBAAA,EAAA;AAAA,IAAE,KAAOC,EAAAA,uBAAAA;AAAAA,IAAQ,WAAQ,EAAA,cAAA;AAAA,IAAA,KAAA,EAAA,IAAA,CAAA,KAAA;AAC9E,IAAA,GAAA,EAAA,IAAA,CAAA,GAAA;AAAA,GAAA,EAAA;;AAMA,MAAAC,UAAA,CAAU,IAIc,CAAA,MAAA,EAAA,oBAAA,CAAA;AAAA,KAAA,CAAA;;AAZvC,MAAAA,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,mBAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}
+{"version":3,"file":"base-rating-filter-label.vue.js","sources":["../../../../../src/components/filters/labels/base-rating-filter-label.vue"],"sourcesContent":["<template>\n  <BaseRating class=\"x-rating-filter-label\" data-test=\"rating-label\" :value=\"value\" :max=\"max\">\n    <template #filled-icon>\n      <!--\n       @slot Filled icon content\n     -->\n      <slot name=\"rating-icon-filled\" />\n    </template>\n    <template #empty-icon>\n      <!--\n       @slot Empty icon content\n     -->\n      <slot name=\"rating-icon-empty\" />\n    </template>\n  </BaseRating>\n</template>\n\n<script lang=\"ts\">\nimport type { BooleanFilter } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport { computed, defineComponent } from 'vue'\nimport BaseRating from '../../base-rating.vue'\n\n/**\n * Renders a label for a rating filter, allowing to override the elements used to paint\n * the rating.\n *\n * @public\n */\nexport default defineComponent({\n  components: {\n    BaseRating,\n  },\n  props: {\n    /**\n     * The filter data to render.\n     *\n     * @public\n     */\n    filter: {\n      type: Object as PropType<BooleanFilter>,\n      required: true,\n    },\n    /**\n     * Maximum number of elements to paint.\n     *\n     * @public\n     */\n    max: {\n      type: Number,\n      default: 5,\n    },\n  },\n  setup(props) {\n    /**\n     * Converts the label string into a number.\n     *\n     * @returns The label as number or 0 if it is not a valid number.\n     *\n     * @internal\n     */\n    const value = computed<number>(() => {\n      const x = Number.parseFloat(props.filter.label) ?? 0\n      return Number.isNaN(x) ? 0 : x\n    })\n\n    return {\n      value,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Example\n\nRenders a label for a rating filter, allowing to override the elements used to paint the rating. The\nfilter label must be a valid number string. For example: '3', '2.5', '0.25'\n\n### Basic usage\n\n```vue\n<BaseRatingFilterLabel :filter=\"filter\" />\n```\n\n### Customizing color\n\nIts possible to change the default color directly with color CSS attribute. For more elaborated\nstyles it's possible to style the inner svg icons.\n\n```vue\n<BaseRatingFilterLabel :filter=\"filter\" style=\"color: gold\" />\n```\n\n### Customizing its contents\n\nThe `max` prop can be used to set the max rating number. It will render as many icons as the this\n`max` value.\n\n```vue\n<BaseRatingFilterLabel :filter=\"filter\" :max=\"max\" />\n```\n\nThe default icons can be changed using the `rating-icon-filled` and `rating-icon-empty` icons, to\nrepresent the filled empty and empty icon in the rating component.\n\n```vue\n<BaseRatingFilterLabel :filter=\"filter\" :max=\"max\">\n  <template #rating-icon-filled>♥</template>\n  <template #rating-icon-empty>♡</template>\n</BaseRatingFilterLabel>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","value","_renderSlot"],"mappings":";;;;;gCACEA,gBAaa,CAAA,YAAA,CAAA,CAAA;AAb6B,EAAA,OAAAC,SAAA,EAAwB,EAAAC,WAAA,CAAA,qBAAA,EAAA;AAAA,IAAE,KAAOC,EAAAA,uBAAAA;AAAAA,IAAQ,WAAQ,EAAA,cAAA;AAAA,IAAA,KAAA,EAAA,IAAA,CAAA,KAAA;AAC9E,IAAA,GAAA,EAAA,IAAA,CAAA,GAAA;AAAA,GAAA,EAAA;;AAMA,MAAAC,UAAA,CAAU,IAIc,CAAA,MAAA,EAAA,oBAAA,CAAA;AAAA,KAAA,CAAA;;AAZvC,MAAAA,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,mBAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}

package/js/components/filters/labels/base-rating-filter-label.vue2.js

@@ -9,7 +9,7 @@ import BaseRating from '../../base-rating.vue.js';
  */
 var _sfc_main = defineComponent({
     components: {
-        BaseRating
+        BaseRating,
     },
     props: {
         /**
@@ -19,7 +19,7 @@ var _sfc_main = defineComponent({
          */
         filter: {
             type: Object,
-            required: true
+            required: true,
         },
         /**
          * Maximum number of elements to paint.
@@ -28,8 +28,8 @@ var _sfc_main = defineComponent({
          */
         max: {
             type: Number,
-            default: 5
-        }
+            default: 5,
+        },
     },
     setup(props) {
         /**
@@ -40,13 +40,13 @@ var _sfc_main = defineComponent({
          * @internal
          */
         const value = computed(() => {
-            const x = parseFloat(props.filter.label) ?? 0;
+            const x = Number.parseFloat(props.filter.label) ?? 0;
             return Number.isNaN(x) ? 0 : x;
         });
         return {
-            value
+            value,
         };
-    }
+    },
 });
 
 export { _sfc_main as default };

package/js/components/filters/labels/base-rating-filter-label.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-rating-filter-label.vue2.js","sources":["../../../../../src/components/filters/labels/base-rating-filter-label.vue"],"sourcesContent":["<template>\n  <BaseRating class=\"x-rating-filter-label\" data-test=\"rating-label\" :value=\"value\" :max=\"max\">\n    <template #filled-icon>\n      <!--\n       @slot Filled icon content\n     -->\n      <slot name=\"rating-icon-filled\" />\n    </template>\n    <template #empty-icon>\n      <!--\n       @slot Empty icon content\n     -->\n      <slot name=\"rating-icon-empty\" />\n    </template>\n  </BaseRating>\n</template>\n\n<script lang=\"ts\">\n  import { BooleanFilter } from '@empathyco/x-types';\n  import { computed, defineComponent, PropType } from 'vue';\n  import BaseRating from '../../base-rating.vue';\n\n  /**\n   * Renders a label for a rating filter, allowing to override the elements used to paint\n   * the rating.\n   *\n   * @public\n   */\n  export default defineComponent({\n    components: {\n      BaseRating\n    },\n    props: {\n      /**\n       * The filter data to render.\n       *\n       * @public\n       */\n      filter: {\n        type: Object as PropType<BooleanFilter>,\n        required: true\n      },\n      /**\n       * Maximum number of elements to paint.\n       *\n       * @public\n       */\n      max: {\n        type: Number,\n        default: 5\n      }\n    },\n    setup(props) {\n      /**\n       * Converts the label string into a number.\n       *\n       * @returns The label as number or 0 if it is not a valid number.\n       *\n       * @internal\n       */\n      const value = computed<number>(() => {\n        const x = parseFloat(props.filter.label) ?? 0;\n        return Number.isNaN(x) ? 0 : x;\n      });\n\n      return {\n        value\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Example\n\nRenders a label for a rating filter, allowing to override the elements used to paint the rating. The\nfilter label must be a valid number string. For example: '3', '2.5', '0.25'\n\n### Basic usage\n\n```vue\n<BaseRatingFilterLabel :filter=\"filter\" />\n```\n\n### Customizing color\n\nIts possible to change the default color directly with color CSS attribute. For more elaborated\nstyles it's possible to style the inner svg icons.\n\n```vue\n<BaseRatingFilterLabel :filter=\"filter\" style=\"color: gold\" />\n```\n\n### Customizing its contents\n\nThe `max` prop can be used to set the max rating number. It will render as many icons as the this\n`max` value.\n\n```vue\n<BaseRatingFilterLabel :filter=\"filter\" :max=\"max\" />\n```\n\nThe default icons can be changed using the `rating-icon-filled` and `rating-icon-empty` icons, to\nrepresent the filled empty and empty icon in the rating component.\n\n```vue\n<BaseRatingFilterLabel :filter=\"filter\" :max=\"max\">\n  <template #rating-icon-filled>♥</template>\n  <template #rating-icon-empty>♡</template>\n</BaseRatingFilterLabel>\n```\n</docs>\n"],"names":[],"mappings":";;;AAsBE;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,UAAU,EAAE;QACV,UAAS;AACV,KAAA;AACD,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAAiC;AACvC,YAAA,QAAQ,EAAE,IAAG;AACd,SAAA;AACD;;;;AAIE;AACF,QAAA,GAAG,EAAE;AACH,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,CAAA;AACX,SAAA;AACD,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT;;;;;;AAME;AACF,QAAA,MAAM,KAAM,GAAE,QAAQ,CAAS,MAAM;AACnC,YAAA,MAAM,CAAA,GAAI,UAAU,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAE,IAAG,CAAC,CAAA;AAC7C,YAAA,OAAO,MAAM,CAAC,KAAK,CAAC,CAAC,CAAE,GAAE,CAAE,GAAE,CAAC,CAAA;AAChC,SAAC,CAAC,CAAA;QAEF,OAAO;YACL,KAAI;SACL,CAAA;KACH;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"base-rating-filter-label.vue2.js","sources":["../../../../../src/components/filters/labels/base-rating-filter-label.vue"],"sourcesContent":["<template>\n  <BaseRating class=\"x-rating-filter-label\" data-test=\"rating-label\" :value=\"value\" :max=\"max\">\n    <template #filled-icon>\n      <!--\n       @slot Filled icon content\n     -->\n      <slot name=\"rating-icon-filled\" />\n    </template>\n    <template #empty-icon>\n      <!--\n       @slot Empty icon content\n     -->\n      <slot name=\"rating-icon-empty\" />\n    </template>\n  </BaseRating>\n</template>\n\n<script lang=\"ts\">\nimport type { BooleanFilter } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport { computed, defineComponent } from 'vue'\nimport BaseRating from '../../base-rating.vue'\n\n/**\n * Renders a label for a rating filter, allowing to override the elements used to paint\n * the rating.\n *\n * @public\n */\nexport default defineComponent({\n  components: {\n    BaseRating,\n  },\n  props: {\n    /**\n     * The filter data to render.\n     *\n     * @public\n     */\n    filter: {\n      type: Object as PropType<BooleanFilter>,\n      required: true,\n    },\n    /**\n     * Maximum number of elements to paint.\n     *\n     * @public\n     */\n    max: {\n      type: Number,\n      default: 5,\n    },\n  },\n  setup(props) {\n    /**\n     * Converts the label string into a number.\n     *\n     * @returns The label as number or 0 if it is not a valid number.\n     *\n     * @internal\n     */\n    const value = computed<number>(() => {\n      const x = Number.parseFloat(props.filter.label) ?? 0\n      return Number.isNaN(x) ? 0 : x\n    })\n\n    return {\n      value,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Example\n\nRenders a label for a rating filter, allowing to override the elements used to paint the rating. The\nfilter label must be a valid number string. For example: '3', '2.5', '0.25'\n\n### Basic usage\n\n```vue\n<BaseRatingFilterLabel :filter=\"filter\" />\n```\n\n### Customizing color\n\nIts possible to change the default color directly with color CSS attribute. For more elaborated\nstyles it's possible to style the inner svg icons.\n\n```vue\n<BaseRatingFilterLabel :filter=\"filter\" style=\"color: gold\" />\n```\n\n### Customizing its contents\n\nThe `max` prop can be used to set the max rating number. It will render as many icons as the this\n`max` value.\n\n```vue\n<BaseRatingFilterLabel :filter=\"filter\" :max=\"max\" />\n```\n\nThe default icons can be changed using the `rating-icon-filled` and `rating-icon-empty` icons, to\nrepresent the filled empty and empty icon in the rating component.\n\n```vue\n<BaseRatingFilterLabel :filter=\"filter\" :max=\"max\">\n  <template #rating-icon-filled>♥</template>\n  <template #rating-icon-empty>♡</template>\n</BaseRatingFilterLabel>\n```\n</docs>\n"],"names":[],"mappings":";;;AAuBA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,UAAU,EAAE;QACV,UAAU;AACX,KAAA;AACD,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAAiC;AACvC,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACD;;;;AAIE;AACF,QAAA,GAAG,EAAE;AACH,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,CAAC;AACX,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT;;;;;;AAME;AACF,QAAA,MAAM,KAAM,GAAE,QAAQ,CAAS,MAAM;AACnC,YAAA,MAAM,IAAI,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAA,IAAK,CAAA,CAAA;AACnD,YAAA,OAAO,MAAM,CAAC,KAAK,CAAC,CAAC,CAAA,GAAI,CAAA,GAAI,CAAA,CAAA;AAC/B,SAAC,CAAA,CAAA;QAED,OAAO;YACL,KAAK;SACP,CAAA;KACD;AACF,CAAA,CAAA;;;;"}

package/js/components/global-x-bus.vue.js

@@ -12,8 +12,8 @@ var _sfc_main = defineComponent({
     props: {
         listeners: {
             type: Object,
-            required: true
-        }
+            required: true,
+        },
     },
     setup(props) {
         const xBus = useXBus();
@@ -27,7 +27,7 @@ var _sfc_main = defineComponent({
             });
         });
         return () => '';
-    }
+    },
 });
 
 export { _sfc_main as default };

package/js/components/global-x-bus.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"global-x-bus.vue.js","sources":["../../../src/components/global-x-bus.vue"],"sourcesContent":["<script lang=\"ts\">\n  import { defineComponent, PropType } from 'vue';\n  import { XEventListeners } from '../x-installer/api/api.types';\n  import { XEvent } from '../wiring/events.types';\n  import { useXBus } from '../composables/use-x-bus';\n\n  /**\n   * This component helps to subscribe to any {@link XEvent} with custom callbacks using Vue\n   * listeners API.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'GlobalXBus',\n    props: {\n      listeners: {\n        type: Object as PropType<XEventListeners>,\n        required: true\n      }\n    },\n    setup(props) {\n      const xBus = useXBus();\n\n      /**\n       * Handles a subscription to all the events provided in the listeners with the function that\n       * will execute the callback.\n       */\n      Object.entries(props.listeners as XEventListeners).forEach(([eventName, callback]) => {\n        xBus.on(eventName as XEvent, true).subscribe(({ eventPayload, metadata }) => {\n          callback(eventPayload as never, metadata);\n        });\n      });\n\n      return () => '';\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits no own events, but you can subscribe to any X Event using Vue listeners\n\n## See it in action\n\nThis component does not render anything. Its only responsibility is to facilitate listening to any X\nEvent by using the prop `listeners`\n\n```vue\n<template>\n  <GlobalXBus :listeners=\"{ UserAcceptedAQuery: printQuery }\" />\n</template>\n\n<script>\n  import { GlobalXBus } from '@empathyco/x-components';\n  export default {\n    name: 'GlobalXBusTest',\n    components: {\n      GlobalXBus\n    },\n    methods: {\n      printQuery(query, metadata) {\n        console.log('My new query is:', query);\n        console.log('And has been triggered by this DOM element:', metadata.target);\n      }\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;AAME;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,YAAY;AAClB,IAAA,KAAK,EAAE;AACL,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,MAAmC;AACzC,YAAA,QAAQ,EAAE,IAAG;AACf,SAAA;AACD,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,IAAG,GAAI,OAAO,EAAE,CAAA;AAEtB;;;AAGE;AACF,QAAA,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,SAA4B,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EAAE,QAAQ,CAAC,KAAK;AACpF,YAAA,IAAI,CAAC,EAAE,CAAC,SAAmB,EAAE,IAAI,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,YAAY,EAAE,QAAO,EAAG,KAAK;AAC3E,gBAAA,QAAQ,CAAC,YAAqB,EAAE,QAAQ,CAAC,CAAA;AAC3C,aAAC,CAAC,CAAA;AACJ,SAAC,CAAC,CAAA;AAEF,QAAA,OAAO,MAAM,EAAE,CAAA;KACjB;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"global-x-bus.vue.js","sources":["../../../src/components/global-x-bus.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport type { XEvent } from '../wiring/events.types'\nimport type { XEventListeners } from '../x-installer/api/api.types'\nimport { defineComponent } from 'vue'\nimport { useXBus } from '../composables/use-x-bus'\n\n/**\n * This component helps to subscribe to any {@link XEvent} with custom callbacks using Vue\n * listeners API.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'GlobalXBus',\n  props: {\n    listeners: {\n      type: Object as PropType<XEventListeners>,\n      required: true,\n    },\n  },\n  setup(props) {\n    const xBus = useXBus()\n\n    /**\n     * Handles a subscription to all the events provided in the listeners with the function that\n     * will execute the callback.\n     */\n    Object.entries(props.listeners as XEventListeners).forEach(([eventName, callback]) => {\n      xBus.on(eventName as XEvent, true).subscribe(({ eventPayload, metadata }) => {\n        callback(eventPayload as never, metadata)\n      })\n    })\n\n    return () => ''\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits no own events, but you can subscribe to any X Event using Vue listeners\n\n## See it in action\n\nThis component does not render anything. Its only responsibility is to facilitate listening to any X\nEvent by using the prop `listeners`\n\n```vue\n<template>\n  <GlobalXBus :listeners=\"{ UserAcceptedAQuery: printQuery }\" />\n</template>\n\n<script>\nimport { GlobalXBus } from '@empathyco/x-components'\nexport default {\n  name: 'GlobalXBusTest',\n  components: {\n    GlobalXBus,\n  },\n  methods: {\n    printQuery(query, metadata) {\n      console.log('My new query is:', query)\n      console.log('And has been triggered by this DOM element:', metadata.target)\n    },\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;AAOA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,YAAY;AAClB,IAAA,KAAK,EAAE;AACL,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,MAAmC;AACzC,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,IAAG,GAAI,OAAO,EAAC,CAAA;AAErB;;;AAGE;AACF,QAAA,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,SAA4B,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EAAE,QAAQ,CAAC,KAAK;AACpF,YAAA,IAAI,CAAC,EAAE,CAAC,SAAmB,EAAE,IAAI,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,YAAY,EAAE,QAAO,EAAG,KAAK;AAC3E,gBAAA,QAAQ,CAAC,YAAqB,EAAE,QAAQ,CAAA,CAAA;AAC1C,aAAC,CAAA,CAAA;AACH,SAAC,CAAA,CAAA;AAED,QAAA,OAAO,MAAM,EAAC,CAAA;KACf;AACF,CAAA,CAAA;;;;"}

package/js/components/highlight.vue.js

@@ -14,21 +14,21 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     [
       _ctx.matchParts.start ? (openBlock(), createElementBlock("span", {
         key: 0,
-        textContent: toDisplayString(_ctx.matchParts.start),
         class: "x-highlight__text",
-        "data-test": "highlight-start"
+        "data-test": "highlight-start",
+        textContent: toDisplayString(_ctx.matchParts.start)
       }, null, 8, _hoisted_1)) : createCommentVNode("v-if", true),
       _ctx.hasMatch ? (openBlock(), createElementBlock("span", {
         key: 1,
-        textContent: toDisplayString(_ctx.matchParts.match),
         class: normalizeClass(["x-highlight__text x-highlight-text-match", _ctx.matchingPartClass]),
-        "data-test": "matching-part"
+        "data-test": "matching-part",
+        textContent: toDisplayString(_ctx.matchParts.match)
       }, null, 10, _hoisted_2)) : createCommentVNode("v-if", true),
       _ctx.matchParts.end ? (openBlock(), createElementBlock("span", {
         key: 2,
-        textContent: toDisplayString(_ctx.matchParts.end),
         class: "x-highlight__text",
-        "data-test": "highlight-end"
+        "data-test": "highlight-end",
+        textContent: toDisplayString(_ctx.matchParts.end)
       }, null, 8, _hoisted_3)) : createCommentVNode("v-if", true)
     ],
     2

package/js/components/highlight.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"highlight.vue.js","sources":["../../../src/components/highlight.vue"],"sourcesContent":["<template>\n  <span class=\"x-highlight\" :class=\"dynamicCSSClasses\">\n    <span\n      v-if=\"matchParts.start\"\n      v-text=\"matchParts.start\"\n      class=\"x-highlight__text\"\n      data-test=\"highlight-start\"\n    />\n    <span\n      v-if=\"hasMatch\"\n      v-text=\"matchParts.match\"\n      class=\"x-highlight__text x-highlight-text-match\"\n      :class=\"matchingPartClass\"\n      data-test=\"matching-part\"\n    />\n    <span\n      v-if=\"matchParts.end\"\n      v-text=\"matchParts.end\"\n      class=\"x-highlight__text\"\n      data-test=\"highlight-end\"\n    />\n  </span>\n</template>\n\n<script lang=\"ts\">\n  import { computed, defineComponent } from 'vue';\n  import { normalizeString } from '../utils';\n\n  /**\n   * Highlights the given part of the text. The component is smart enough to do matches\n   * between special characters like tilde, cedilla, eñe, capital letters...\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'Highlight',\n    props: {\n      /** The text to highlight some part of it. */\n      text: {\n        type: String,\n        default: ''\n      },\n      /** The part of the text to be highlighted. */\n      highlight: {\n        type: String,\n        default: ''\n      },\n      /** CSS Class to add when the `text` string contains the `highlight` string. */\n      matchClass: {\n        type: String,\n        default: ''\n      },\n      /** CSS Class to add when the given `text` doesn't contain the `highlight` string. */\n      noMatchClass: {\n        type: String,\n        default: ''\n      },\n      /** CSS Class to add to the matching text. */\n      matchingPartClass: {\n        type: String,\n        default: ''\n      }\n    },\n    setup(props, { slots }) {\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 end - The second index that the label will be divided by.\n       *\n       * @returns The three parts of the divided label.\n       */\n      function splitAt(label: string, start: number, end: number) {\n        return {\n          start: label.substring(0, start),\n          match: label.substring(start, end),\n          end: label.substring(end)\n        };\n      }\n\n      /**\n       * Splits the text to highlight into 3 parts: a starting part, the matching part\n       * and the ending part. If there is no match between the text and the highlight, the `start`\n       * property will contain the whole text.\n       *\n       * @returns An object containing the different parts of the text.\n       */\n      const matchParts = computed(() => {\n        const matcherIndex = normalizeString(props.text).indexOf(normalizeString(props.highlight));\n        return matcherIndex !== -1 && props.highlight\n          ? splitAt(props.text.trim(), matcherIndex, matcherIndex + props.highlight.trim().length)\n          : { start: props.text, match: '', end: '' };\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 True if there is a match between the text and the highlight strings.\n       */\n      const hasMatch = computed(() => !!matchParts.value.match);\n\n      /**\n       * CSS classes to add depending on the component state.\n       *\n       * @remarks\n       * `x-highlight--has-match`: When there is a match between the text and the part to highlight.\n       * `[matchClass]`: When there is a match between the text and\n       * the part to highlight.\n       * `[noMatchClass]`: when there is no match between the text to highlight.\n       * @returns The CSS classes.\n       */\n      const dynamicCSSClasses = computed(() => {\n        const classes = {\n          'x-highlight--has-match': hasMatch.value,\n          'x-highlight-text': hasMatch.value,\n          [props.matchClass]: hasMatch.value\n        };\n        if (props.noMatchClass) {\n          classes[props.noMatchClass] = !hasMatch.value;\n        }\n        return classes;\n      });\n\n      /**\n       * Render function to execute the `default` slot, binding `slotsProps` and getting only the\n       * first `vNode` to avoid Fragments and Text root nodes.\n       *\n       * @remarks `slotProps` must be values without Vue reactivity and located inside the\n       * render-function to update the binding data properly.\n       *\n       * @returns The root `vNode` of the `default` slot.\n       */\n      function renderDefaultSlot() {\n        const slotProps = {\n          text: props.text,\n          hasMatch: hasMatch.value,\n          ...matchParts.value\n        };\n        return slots.default?.(slotProps)[0];\n      }\n\n      /* Hack to render through a render-function, the `default` slot or, in its absence,\n       the component itself. It is the alternative for the NoElement antipattern. */\n      const componentProps = { hasMatch, matchParts, dynamicCSSClasses };\n      return (slots.default ? renderDefaultSlot : componentProps) as typeof componentProps;\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits no events.\n\n## See it in action\n\nHere you have a basic example of how the highlight component is rendered.\n\n_Type any term in the input field to try it out!_\n\n```vue live\n<template>\n  <div>\n    <input v-model=\"highlight\" />\n    <Highlight :highlight=\"highlight\" text=\"milanesa\" />\n  </div>\n</template>\n\n<script>\n  import { Highlight } from '@empathyco/x-components';\n\n  export default {\n    name: 'HighlightDemo',\n    components: {\n      Highlight\n    },\n    data() {\n      return {\n        highlight: ''\n      };\n    }\n  };\n</script>\n```\n\n### Customise the layout\n\nThis component allows to customise the whole layout. Be careful as due to Vue 2 limitations you can\nonly render a single root element.\n\n```vue live\n<template>\n  <div>\n    <input v-model=\"highlight\" />\n    <Highlight\n      :highlight=\"highlight\"\n      text=\"Entraña\"\n      #default=\"{ hasMatch, start, match, end, text }\"\n    >\n      <span class=\"custom-layout\" v-if=\"hasMatch\">\n        <strong>{{ start }}</strong>\n        {{ match }}\n        <strong>{{ end }}</strong>\n      </span>\n      <span v-else>{{ text }}</span>\n    </Highlight>\n  </div>\n</template>\n\n<script>\n  import { Highlight } from '@empathyco/x-components';\n\n  export default {\n    name: 'HighlightDemo',\n    components: {\n      Highlight\n    },\n    data() {\n      return {\n        highlight: 'entran'\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["dynamicCSSClasses","matchParts","_openBlock","_createElementBlock","_toDisplayString","_createCommentVNode","_normalizeClass"],"mappings":";;;;AAAA,MAAA,UAAA,GAAA,CAAA,aAAA,CAAA,CAAA;;;SACa,WADb,CAAA,IAAA,EAAA,MAAA,EACc,QAAsBA,MAAiB,EAAA,KAAA,EAAA,QAAA,EAAA;;;;aAEzCC,cAAgB,CAAA,CAAA,aAAA,EAAA,IAAA,CAAA,iBAAA,CAAA,CAAA;AAAA,KAAA;;AAH5B,MAAA,IAAA,CAAA,UAAA,CAAA,KAAA,IAAAC,SAAA,EAAA,EAIMC,kBAAQF,CAAAA,MAAAA,EAAAA;AAAAA,QACR,GAAK,EAAA,CAAA;AAAA,QACL,aAAUG,eAAiB,CAAA,IAAA,CAAA,UAAA,CAAA,KAAA,CAAA;AAAA,QAAA,KAAA,EAAA,mBAAA;AANjC,QAAA,WAAA,EAAA,iBAAA;AAAA,kBASoB,UADhB,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA;AAAA,MAAA,IAAA,CARJ,yBAUMF,kBAAQF,CAAAA,MAAAA,EAAAA;AAAAA,QACR,GAAK,EAAA,CAAA;AAAA,QAEL,aAAUG,eAAe,CAAA,IAAA,CAAA,UAAA,CAAA,KAAA,CAAA;AAAA,QAb/B,KAAA,EAAAE,cAAA,CAAA,CAAA,0CAAA,EAAA,IAAA,CAAA,iBAAA,CAAA,CAAA;AAAA,QAAA,WAAA,EAAA,eAAA;AAAA,mBAgB0B,UADtB,CAAA,IAAAD,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA;AAAA,MAAA,IAAA,CAfJ,+BAiBMF,kBAAQF,CAAAA,MAAAA,EAAAA;AAAAA,QACR,GAAK,EAAA,CAAA;AAAA,QACL,aAAUG,eAAe,CAAA,IAAA,CAAA,UAAA,CAAA,GAAA,CAAA;AAAA,QAAA,KAAA,EAAA,mBAAA;AAnB/B,QAAA,WAAA,EAAA,eAAA;AAAA,OAAA,EAAA,IAAA,EAAA,CAAA,EAAA,UAAA,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA;;;;;;;;;;"}
+{"version":3,"file":"highlight.vue.js","sources":["../../../src/components/highlight.vue"],"sourcesContent":["<template>\n  <span class=\"x-highlight\" :class=\"dynamicCSSClasses\">\n    <span\n      v-if=\"matchParts.start\"\n      class=\"x-highlight__text\"\n      data-test=\"highlight-start\"\n      v-text=\"matchParts.start\"\n    />\n    <span\n      v-if=\"hasMatch\"\n      class=\"x-highlight__text x-highlight-text-match\"\n      :class=\"matchingPartClass\"\n      data-test=\"matching-part\"\n      v-text=\"matchParts.match\"\n    />\n    <span\n      v-if=\"matchParts.end\"\n      class=\"x-highlight__text\"\n      data-test=\"highlight-end\"\n      v-text=\"matchParts.end\"\n    />\n  </span>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent } from 'vue'\nimport { normalizeString } from '../utils'\n\n/**\n * Highlights the given part of the text. The component is smart enough to do matches\n * between special characters like tilde, cedilla, eñe, capital letters...\n *\n * @public\n */\nexport default defineComponent({\n  name: 'Highlight',\n  props: {\n    /** The text to highlight some part of it. */\n    text: {\n      type: String,\n      default: '',\n    },\n    /** The part of the text to be highlighted. */\n    highlight: {\n      type: String,\n      default: '',\n    },\n    /** CSS Class to add when the `text` string contains the `highlight` string. */\n    matchClass: {\n      type: String,\n      default: '',\n    },\n    /** CSS Class to add when the given `text` doesn't contain the `highlight` string. */\n    noMatchClass: {\n      type: String,\n      default: '',\n    },\n    /** CSS Class to add to the matching text. */\n    matchingPartClass: {\n      type: String,\n      default: '',\n    },\n  },\n  setup(props, { slots }) {\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 end - The second index that the label will be divided by.\n     *\n     * @returns The three parts of the divided label.\n     */\n    function splitAt(label: string, start: number, end: number) {\n      return {\n        start: label.substring(0, start),\n        match: label.substring(start, end),\n        end: label.substring(end),\n      }\n    }\n\n    /**\n     * Splits the text to highlight into 3 parts: a starting part, the matching part\n     * and the ending part. If there is no match between the text and the highlight, the `start`\n     * property will contain the whole text.\n     *\n     * @returns An object containing the different parts of the text.\n     */\n    const matchParts = computed(() => {\n      const matcherIndex = normalizeString(props.text).indexOf(normalizeString(props.highlight))\n      return matcherIndex !== -1 && props.highlight\n        ? splitAt(props.text.trim(), matcherIndex, matcherIndex + props.highlight.trim().length)\n        : { start: props.text, match: '', end: '' }\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 True if there is a match between the text and the highlight strings.\n     */\n    const hasMatch = computed(() => !!matchParts.value.match)\n\n    /**\n     * CSS classes to add depending on the component state.\n     *\n     * @remarks\n     * `x-highlight--has-match`: When there is a match between the text and the part to highlight.\n     * `[matchClass]`: When there is a match between the text and\n     * the part to highlight.\n     * `[noMatchClass]`: when there is no match between the text to highlight.\n     * @returns The CSS classes.\n     */\n    const dynamicCSSClasses = computed(() => {\n      const classes = {\n        'x-highlight--has-match': hasMatch.value,\n        'x-highlight-text': hasMatch.value,\n        [props.matchClass]: hasMatch.value,\n      }\n      if (props.noMatchClass) {\n        classes[props.noMatchClass] = !hasMatch.value\n      }\n      return classes\n    })\n\n    /**\n     * Render function to execute the `default` slot, binding `slotsProps` and getting only the\n     * first `vNode` to avoid Fragments and Text root nodes.\n     *\n     * @remarks `slotProps` must be values without Vue reactivity and located inside the\n     * render-function to update the binding data properly.\n     *\n     * @returns The root `vNode` of the `default` slot.\n     */\n    function renderDefaultSlot() {\n      const slotProps = {\n        text: props.text,\n        hasMatch: hasMatch.value,\n        ...matchParts.value,\n      }\n      return slots.default?.(slotProps)[0]\n    }\n\n    /* Hack to render through a render-function, the `default` slot or, in its absence,\n       the component itself. It is the alternative for the NoElement antipattern. */\n    const componentProps = { hasMatch, matchParts, dynamicCSSClasses }\n    return (slots.default ? renderDefaultSlot : componentProps) as typeof componentProps\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits no events.\n\n## See it in action\n\nHere you have a basic example of how the highlight component is rendered.\n\n_Type any term in the input field to try it out!_\n\n```vue live\n<template>\n  <div>\n    <input v-model=\"highlight\" />\n    <Highlight :highlight=\"highlight\" text=\"milanesa\" />\n  </div>\n</template>\n\n<script>\nimport { Highlight } from '@empathyco/x-components'\n\nexport default {\n  name: 'HighlightDemo',\n  components: {\n    Highlight,\n  },\n  data() {\n    return {\n      highlight: '',\n    }\n  },\n}\n</script>\n```\n\n### Customise the layout\n\nThis component allows to customise the whole layout. Be careful as due to Vue 2 limitations you can\nonly render a single root element.\n\n```vue live\n<template>\n  <div>\n    <input v-model=\"highlight\" />\n    <Highlight\n      :highlight=\"highlight\"\n      text=\"Entraña\"\n      #default=\"{ hasMatch, start, match, end, text }\"\n    >\n      <span class=\"custom-layout\" v-if=\"hasMatch\">\n        <strong>{{ start }}</strong>\n        {{ match }}\n        <strong>{{ end }}</strong>\n      </span>\n      <span v-else>{{ text }}</span>\n    </Highlight>\n  </div>\n</template>\n\n<script>\nimport { Highlight } from '@empathyco/x-components'\n\nexport default {\n  name: 'HighlightDemo',\n  components: {\n    Highlight,\n  },\n  data() {\n    return {\n      highlight: 'entran',\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":["dynamicCSSClasses","matchParts","_openBlock","_createElementBlock","_toDisplayString","_createCommentVNode"],"mappings":";;;;AAAA,MAAA,UAAA,GAAA,CAAA,aAAA,CAAA,CAAA;;;SACa,WADb,CAAA,IAAA,EAAA,MAAA,EACc,QAAsBA,MAAiB,EAAA,KAAA,EAAA,QAAA,EAAA;;;;aAEzCC,cAAgB,CAAA,CAAA,aAAA,EAAA,IAAA,CAAA,iBAAA,CAAA,CAAA;AAAA,KAAA;;AAH5B,MAAA,IAAA,CAAA,UAAA,CAAA,KAAA,IAAAC,SAAA,EAI+B,EAAAC,kBAAA,CAAA,MAAA,EAAA;AAAA,QACzB,GAAA,EAAA,CAAA;AAAA,QALN,KAAA,EAAA,mBAAA;AAAA,QAAA,WAAA,EAAA,iBAAA;AAAA,QAAA,WAAA,EAAAC,eAAA,CAAA,IAAA,CAAA,UAAA,CAAA,KAAA,CAAA;AAAA,kBASoB,UADhB,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA;AAAA,MAAA,IAAA,CARJ,QAUY,IAAAH,SAAA,EAAA,EAAAC,kBAAA,CAAA,MAAA,EAAA;AAAA,QAEN,GAAA,EAAA,CAAA;AAAA,QAZN,sBAaM,CAAwB,0CAAA,EAAA,IAAA,CAAA,iBAAA,CAAA,CAAA;AAAA,QAAA,WAAA,EAAA,eAAA;AAb9B,QAAA,WAAA,EAAAC,eAAA,CAAA,IAAA,CAAA,UAAA,CAAA,KAAA,CAAA;AAAA,mBAgB0B,UADtB,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA;AAAA,MAAA,IAAA,CAfJ,6BAiB+B,EAAAF,kBAAA,CAAA,MAAA,EAAA;AAAA,QACzB,GAAA,EAAA,CAAA;AAAA,QAlBN,KAAA,EAAA,mBAAA;AAAA,QAAA,WAAA,EAAA,eAAA;AAAA,QAAA,WAAA,EAAAC,eAAA,CAAA,IAAA,CAAA,UAAA,CAAA,GAAA,CAAA;AAAA,OAAA,EAAA,IAAA,EAAA,CAAA,EAAA,UAAA,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA;;;;;;;;;;"}

package/js/components/highlight.vue2.js

@@ -14,28 +14,28 @@ var _sfc_main = defineComponent({
         /** The text to highlight some part of it. */
         text: {
             type: String,
-            default: ''
+            default: '',
         },
         /** The part of the text to be highlighted. */
         highlight: {
             type: String,
-            default: ''
+            default: '',
         },
         /** CSS Class to add when the `text` string contains the `highlight` string. */
         matchClass: {
             type: String,
-            default: ''
+            default: '',
         },
         /** CSS Class to add when the given `text` doesn't contain the `highlight` string. */
         noMatchClass: {
             type: String,
-            default: ''
+            default: '',
         },
         /** CSS Class to add to the matching text. */
         matchingPartClass: {
             type: String,
-            default: ''
-        }
+            default: '',
+        },
     },
     setup(props, { slots }) {
         /**
@@ -51,7 +51,7 @@ var _sfc_main = defineComponent({
             return {
                 start: label.substring(0, start),
                 match: label.substring(start, end),
-                end: label.substring(end)
+                end: label.substring(end),
             };
         }
         /**
@@ -88,7 +88,7 @@ var _sfc_main = defineComponent({
             const classes = {
                 'x-highlight--has-match': hasMatch.value,
                 'x-highlight-text': hasMatch.value,
-                [props.matchClass]: hasMatch.value
+                [props.matchClass]: hasMatch.value,
             };
             if (props.noMatchClass) {
                 classes[props.noMatchClass] = !hasMatch.value;
@@ -108,15 +108,15 @@ var _sfc_main = defineComponent({
             const slotProps = {
                 text: props.text,
                 hasMatch: hasMatch.value,
-                ...matchParts.value
+                ...matchParts.value,
             };
             return slots.default?.(slotProps)[0];
         }
         /* Hack to render through a render-function, the `default` slot or, in its absence,
-         the component itself. It is the alternative for the NoElement antipattern. */
+           the component itself. It is the alternative for the NoElement antipattern. */
         const componentProps = { hasMatch, matchParts, dynamicCSSClasses };
         return (slots.default ? renderDefaultSlot : componentProps);
-    }
+    },
 });
 
 export { _sfc_main as default };

package/js/components/highlight.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"highlight.vue2.js","sources":["../../../src/components/highlight.vue"],"sourcesContent":["<template>\n  <span class=\"x-highlight\" :class=\"dynamicCSSClasses\">\n    <span\n      v-if=\"matchParts.start\"\n      v-text=\"matchParts.start\"\n      class=\"x-highlight__text\"\n      data-test=\"highlight-start\"\n    />\n    <span\n      v-if=\"hasMatch\"\n      v-text=\"matchParts.match\"\n      class=\"x-highlight__text x-highlight-text-match\"\n      :class=\"matchingPartClass\"\n      data-test=\"matching-part\"\n    />\n    <span\n      v-if=\"matchParts.end\"\n      v-text=\"matchParts.end\"\n      class=\"x-highlight__text\"\n      data-test=\"highlight-end\"\n    />\n  </span>\n</template>\n\n<script lang=\"ts\">\n  import { computed, defineComponent } from 'vue';\n  import { normalizeString } from '../utils';\n\n  /**\n   * Highlights the given part of the text. The component is smart enough to do matches\n   * between special characters like tilde, cedilla, eñe, capital letters...\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'Highlight',\n    props: {\n      /** The text to highlight some part of it. */\n      text: {\n        type: String,\n        default: ''\n      },\n      /** The part of the text to be highlighted. */\n      highlight: {\n        type: String,\n        default: ''\n      },\n      /** CSS Class to add when the `text` string contains the `highlight` string. */\n      matchClass: {\n        type: String,\n        default: ''\n      },\n      /** CSS Class to add when the given `text` doesn't contain the `highlight` string. */\n      noMatchClass: {\n        type: String,\n        default: ''\n      },\n      /** CSS Class to add to the matching text. */\n      matchingPartClass: {\n        type: String,\n        default: ''\n      }\n    },\n    setup(props, { slots }) {\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 end - The second index that the label will be divided by.\n       *\n       * @returns The three parts of the divided label.\n       */\n      function splitAt(label: string, start: number, end: number) {\n        return {\n          start: label.substring(0, start),\n          match: label.substring(start, end),\n          end: label.substring(end)\n        };\n      }\n\n      /**\n       * Splits the text to highlight into 3 parts: a starting part, the matching part\n       * and the ending part. If there is no match between the text and the highlight, the `start`\n       * property will contain the whole text.\n       *\n       * @returns An object containing the different parts of the text.\n       */\n      const matchParts = computed(() => {\n        const matcherIndex = normalizeString(props.text).indexOf(normalizeString(props.highlight));\n        return matcherIndex !== -1 && props.highlight\n          ? splitAt(props.text.trim(), matcherIndex, matcherIndex + props.highlight.trim().length)\n          : { start: props.text, match: '', end: '' };\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 True if there is a match between the text and the highlight strings.\n       */\n      const hasMatch = computed(() => !!matchParts.value.match);\n\n      /**\n       * CSS classes to add depending on the component state.\n       *\n       * @remarks\n       * `x-highlight--has-match`: When there is a match between the text and the part to highlight.\n       * `[matchClass]`: When there is a match between the text and\n       * the part to highlight.\n       * `[noMatchClass]`: when there is no match between the text to highlight.\n       * @returns The CSS classes.\n       */\n      const dynamicCSSClasses = computed(() => {\n        const classes = {\n          'x-highlight--has-match': hasMatch.value,\n          'x-highlight-text': hasMatch.value,\n          [props.matchClass]: hasMatch.value\n        };\n        if (props.noMatchClass) {\n          classes[props.noMatchClass] = !hasMatch.value;\n        }\n        return classes;\n      });\n\n      /**\n       * Render function to execute the `default` slot, binding `slotsProps` and getting only the\n       * first `vNode` to avoid Fragments and Text root nodes.\n       *\n       * @remarks `slotProps` must be values without Vue reactivity and located inside the\n       * render-function to update the binding data properly.\n       *\n       * @returns The root `vNode` of the `default` slot.\n       */\n      function renderDefaultSlot() {\n        const slotProps = {\n          text: props.text,\n          hasMatch: hasMatch.value,\n          ...matchParts.value\n        };\n        return slots.default?.(slotProps)[0];\n      }\n\n      /* Hack to render through a render-function, the `default` slot or, in its absence,\n       the component itself. It is the alternative for the NoElement antipattern. */\n      const componentProps = { hasMatch, matchParts, dynamicCSSClasses };\n      return (slots.default ? renderDefaultSlot : componentProps) as typeof componentProps;\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits no events.\n\n## See it in action\n\nHere you have a basic example of how the highlight component is rendered.\n\n_Type any term in the input field to try it out!_\n\n```vue live\n<template>\n  <div>\n    <input v-model=\"highlight\" />\n    <Highlight :highlight=\"highlight\" text=\"milanesa\" />\n  </div>\n</template>\n\n<script>\n  import { Highlight } from '@empathyco/x-components';\n\n  export default {\n    name: 'HighlightDemo',\n    components: {\n      Highlight\n    },\n    data() {\n      return {\n        highlight: ''\n      };\n    }\n  };\n</script>\n```\n\n### Customise the layout\n\nThis component allows to customise the whole layout. Be careful as due to Vue 2 limitations you can\nonly render a single root element.\n\n```vue live\n<template>\n  <div>\n    <input v-model=\"highlight\" />\n    <Highlight\n      :highlight=\"highlight\"\n      text=\"Entraña\"\n      #default=\"{ hasMatch, start, match, end, text }\"\n    >\n      <span class=\"custom-layout\" v-if=\"hasMatch\">\n        <strong>{{ start }}</strong>\n        {{ match }}\n        <strong>{{ end }}</strong>\n      </span>\n      <span v-else>{{ text }}</span>\n    </Highlight>\n  </div>\n</template>\n\n<script>\n  import { Highlight } from '@empathyco/x-components';\n\n  export default {\n    name: 'HighlightDemo',\n    components: {\n      Highlight\n    },\n    data() {\n      return {\n        highlight: 'entran'\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"highlight.vue2.js","sources":["../../../src/components/highlight.vue"],"sourcesContent":["<template>\n  <span class=\"x-highlight\" :class=\"dynamicCSSClasses\">\n    <span\n      v-if=\"matchParts.start\"\n      class=\"x-highlight__text\"\n      data-test=\"highlight-start\"\n      v-text=\"matchParts.start\"\n    />\n    <span\n      v-if=\"hasMatch\"\n      class=\"x-highlight__text x-highlight-text-match\"\n      :class=\"matchingPartClass\"\n      data-test=\"matching-part\"\n      v-text=\"matchParts.match\"\n    />\n    <span\n      v-if=\"matchParts.end\"\n      class=\"x-highlight__text\"\n      data-test=\"highlight-end\"\n      v-text=\"matchParts.end\"\n    />\n  </span>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent } from 'vue'\nimport { normalizeString } from '../utils'\n\n/**\n * Highlights the given part of the text. The component is smart enough to do matches\n * between special characters like tilde, cedilla, eñe, capital letters...\n *\n * @public\n */\nexport default defineComponent({\n  name: 'Highlight',\n  props: {\n    /** The text to highlight some part of it. */\n    text: {\n      type: String,\n      default: '',\n    },\n    /** The part of the text to be highlighted. */\n    highlight: {\n      type: String,\n      default: '',\n    },\n    /** CSS Class to add when the `text` string contains the `highlight` string. */\n    matchClass: {\n      type: String,\n      default: '',\n    },\n    /** CSS Class to add when the given `text` doesn't contain the `highlight` string. */\n    noMatchClass: {\n      type: String,\n      default: '',\n    },\n    /** CSS Class to add to the matching text. */\n    matchingPartClass: {\n      type: String,\n      default: '',\n    },\n  },\n  setup(props, { slots }) {\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 end - The second index that the label will be divided by.\n     *\n     * @returns The three parts of the divided label.\n     */\n    function splitAt(label: string, start: number, end: number) {\n      return {\n        start: label.substring(0, start),\n        match: label.substring(start, end),\n        end: label.substring(end),\n      }\n    }\n\n    /**\n     * Splits the text to highlight into 3 parts: a starting part, the matching part\n     * and the ending part. If there is no match between the text and the highlight, the `start`\n     * property will contain the whole text.\n     *\n     * @returns An object containing the different parts of the text.\n     */\n    const matchParts = computed(() => {\n      const matcherIndex = normalizeString(props.text).indexOf(normalizeString(props.highlight))\n      return matcherIndex !== -1 && props.highlight\n        ? splitAt(props.text.trim(), matcherIndex, matcherIndex + props.highlight.trim().length)\n        : { start: props.text, match: '', end: '' }\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 True if there is a match between the text and the highlight strings.\n     */\n    const hasMatch = computed(() => !!matchParts.value.match)\n\n    /**\n     * CSS classes to add depending on the component state.\n     *\n     * @remarks\n     * `x-highlight--has-match`: When there is a match between the text and the part to highlight.\n     * `[matchClass]`: When there is a match between the text and\n     * the part to highlight.\n     * `[noMatchClass]`: when there is no match between the text to highlight.\n     * @returns The CSS classes.\n     */\n    const dynamicCSSClasses = computed(() => {\n      const classes = {\n        'x-highlight--has-match': hasMatch.value,\n        'x-highlight-text': hasMatch.value,\n        [props.matchClass]: hasMatch.value,\n      }\n      if (props.noMatchClass) {\n        classes[props.noMatchClass] = !hasMatch.value\n      }\n      return classes\n    })\n\n    /**\n     * Render function to execute the `default` slot, binding `slotsProps` and getting only the\n     * first `vNode` to avoid Fragments and Text root nodes.\n     *\n     * @remarks `slotProps` must be values without Vue reactivity and located inside the\n     * render-function to update the binding data properly.\n     *\n     * @returns The root `vNode` of the `default` slot.\n     */\n    function renderDefaultSlot() {\n      const slotProps = {\n        text: props.text,\n        hasMatch: hasMatch.value,\n        ...matchParts.value,\n      }\n      return slots.default?.(slotProps)[0]\n    }\n\n    /* Hack to render through a render-function, the `default` slot or, in its absence,\n       the component itself. It is the alternative for the NoElement antipattern. */\n    const componentProps = { hasMatch, matchParts, dynamicCSSClasses }\n    return (slots.default ? renderDefaultSlot : componentProps) as typeof componentProps\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits no events.\n\n## See it in action\n\nHere you have a basic example of how the highlight component is rendered.\n\n_Type any term in the input field to try it out!_\n\n```vue live\n<template>\n  <div>\n    <input v-model=\"highlight\" />\n    <Highlight :highlight=\"highlight\" text=\"milanesa\" />\n  </div>\n</template>\n\n<script>\nimport { Highlight } from '@empathyco/x-components'\n\nexport default {\n  name: 'HighlightDemo',\n  components: {\n    Highlight,\n  },\n  data() {\n    return {\n      highlight: '',\n    }\n  },\n}\n</script>\n```\n\n### Customise the layout\n\nThis component allows to customise the whole layout. Be careful as due to Vue 2 limitations you can\nonly render a single root element.\n\n```vue live\n<template>\n  <div>\n    <input v-model=\"highlight\" />\n    <Highlight\n      :highlight=\"highlight\"\n      text=\"Entraña\"\n      #default=\"{ hasMatch, start, match, end, text }\"\n    >\n      <span class=\"custom-layout\" v-if=\"hasMatch\">\n        <strong>{{ start }}</strong>\n        {{ match }}\n        <strong>{{ end }}</strong>\n      </span>\n      <span v-else>{{ text }}</span>\n    </Highlight>\n  </div>\n</template>\n\n<script>\nimport { Highlight } from '@empathyco/x-components'\n\nexport default {\n  name: 'HighlightDemo',\n  components: {\n    Highlight,\n  },\n  data() {\n    return {\n      highlight: 'entran',\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":"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"}