@empathyco/x-components 5.0.0-alpha.9 → 6.0.0-alpha.2

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":[],"mappings":";;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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","_withCtx","_createCommentVNode","_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;AAIyB,IAAA,aAAA,EAAAC,OAAA,CAAA,MAAA;AAAA,MAAAC,kBAAA,CAAA,2CAAA,CAAA;AAEzB,MAAAC,UAAA,CAAU,IAGjB,CAAA,MAAA,EAAA,oBAAA,CAAA;AAAA,KAAA,CAAA;AAC+B,IAAA,YAAA,EAAAF,OAAA,CAAA,MAAA;AAAA,MAAAC,kBAAA,CAAA,0CAAA,CAAA;AAZvC,MAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,mBAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}

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

@@ -1,5 +1,5 @@
 import { defineComponent, computed } from 'vue';
-import __vue_component__ from '../../base-rating.vue.js';
+import BaseRating from '../../base-rating.vue.js';
 
 /**
  * Renders a label for a rating filter, allowing to override the elements used to paint
@@ -7,9 +7,9 @@ import __vue_component__ from '../../base-rating.vue.js';
  *
  * @public
  */
-var script = defineComponent({
+var _sfc_main = defineComponent({
     components: {
-        BaseRating: __vue_component__
+        BaseRating
     },
     props: {
         /**
@@ -49,5 +49,5 @@ var script = defineComponent({
     }
 });
 
-export { script as default };
+export { _sfc_main as default };
 //# sourceMappingURL=base-rating-filter-label.vue2.js.map

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?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\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"],"names":["BaseRating"],"mappings":";;;AAsBE;;;;;AAKG;AACH,aAAe,eAAe,CAAC;AAC7B,IAAA,UAAU,EAAE;oBACVA,iBAAU;AACX,KAAA;AACD,IAAA,KAAK,EAAE;AACL;;;;AAIG;AACH,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAAiC;AACvC,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACD;;;;AAIG;AACH,QAAA,GAAG,EAAE;AACH,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,CAAC;AACX,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT;;;;;;AAMG;AACH,QAAA,MAAM,KAAK,GAAG,QAAQ,CAAS,MAAK;AAClC,YAAA,MAAM,CAAC,GAAG,UAAU,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;AAC9C,YAAA,OAAO,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AACjC,SAAC,CAAC,CAAC;QAEH,OAAO;YACL,KAAK;SACN,CAAC;KACH;AACF,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\">\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;;;;"}

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

@@ -1,39 +1,34 @@
-import script from './global-x-bus.vue2.js';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs';
+import { defineComponent } from 'vue';
+import { useXBus } from '../composables/use-x-bus.js';
 
-/* script */
-const __vue_script__ = script;
+/**
+ * This component helps to subscribe to any {@link XEvent} with custom callbacks using Vue
+ * listeners API.
+ *
+ * @public
+ */
+var _sfc_main = defineComponent({
+    name: 'GlobalXBus',
+    props: {
+        listeners: {
+            type: Object,
+            required: true
+        }
+    },
+    setup(props) {
+        const xBus = useXBus();
+        /**
+         * Handles a subscription to all the events provided in the listeners with the function that
+         * will execute the callback.
+         */
+        Object.entries(props.listeners).forEach(([eventName, callback]) => {
+            xBus.on(eventName, true).subscribe(({ eventPayload, metadata }) => {
+                callback(eventPayload, metadata);
+            });
+        });
+        return () => '';
+    }
+});
 
-/* template */
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = undefined;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
-    {},
-    __vue_inject_styles__,
-    __vue_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export { __vue_component__ as default };
+export { _sfc_main as default };
 //# sourceMappingURL=global-x-bus.vue.js.map

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 { reduce } from '@empathyco/x-utils';\n  import { Observable, Subscription } from 'rxjs';\n  import { EventPayload, SubjectPayload } from '@empathyco/x-bus';\n  import { defineComponent, onBeforeUnmount } from 'vue';\n  import { XEventListeners } from '../x-installer/api/api.types';\n  import { WireMetadata } from '../wiring/wiring.types';\n  import { XEventsTypes } from '../wiring/events.types';\n  import { useNoElementRender } from '../composables/use-no-element-render';\n  import { useXBus } from '../composables/use-x-bus';\n\n  /**\n   * This component helps subscribing to any {@link XEvent} with custom callbacks using Vue\n   * listeners API.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'GlobalXBus',\n    setup(_, { listeners }) {\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. Also unsubscribes on beforeDestroy.\n       *\n       * @internal\n       */\n      const subscription = reduce(\n        listeners as XEventListeners,\n        (subscription, eventName, callback) => {\n          subscription.add(\n            (\n              xBus.on(eventName, true) as unknown as Observable<\n                SubjectPayload<EventPayload<XEventsTypes, typeof eventName>, WireMetadata>\n              >\n            ).subscribe(({ eventPayload, metadata }) => {\n              callback(eventPayload as never, metadata);\n            })\n          );\n          return subscription;\n        },\n        new Subscription()\n      );\n\n      onBeforeUnmount(() => {\n        subscription.unsubscribe();\n      });\n    },\n    render() {\n      return useNoElementRender(this.$slots);\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 Vue component listeners.\n\n```vue\n<template>\n  <GlobalXBus @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":";;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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;;;;"}

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

@@ -1,39 +1,6 @@
-import { reduce } from '@empathyco/x-utils';
-import { Subscription } from 'rxjs';
-import { defineComponent, onBeforeUnmount } from 'vue';
-import { useNoElementRender } from '../composables/use-no-element-render.js';
-import { useXBus } from '../composables/use-x-bus.js';
+import _sfc_main from './global-x-bus.vue.js';
 
-/**
- * This component helps subscribing to any {@link XEvent} with custom callbacks using Vue
- * listeners API.
- *
- * @public
- */
-var script = defineComponent({
-    name: 'GlobalXBus',
-    setup(_, { listeners }) {
-        const xBus = useXBus();
-        /**
-         * Handles a subscription to all the events provided in the listeners with the function that
-         * will execute the callback. Also unsubscribes on beforeDestroy.
-         *
-         * @internal
-         */
-        const subscription = reduce(listeners, (subscription, eventName, callback) => {
-            subscription.add(xBus.on(eventName, true).subscribe(({ eventPayload, metadata }) => {
-                callback(eventPayload, metadata);
-            }));
-            return subscription;
-        }, new Subscription());
-        onBeforeUnmount(() => {
-            subscription.unsubscribe();
-        });
-    },
-    render() {
-        return useNoElementRender(this.$slots);
-    }
-});
 
-export { script as default };
+
+export { _sfc_main as default };
 //# sourceMappingURL=global-x-bus.vue2.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"global-x-bus.vue2.js","sources":["../../../src/components/global-x-bus.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n  import { reduce } from '@empathyco/x-utils';\n  import { Observable, Subscription } from 'rxjs';\n  import { EventPayload, SubjectPayload } from '@empathyco/x-bus';\n  import { defineComponent, onBeforeUnmount } from 'vue';\n  import { XEventListeners } from '../x-installer/api/api.types';\n  import { WireMetadata } from '../wiring/wiring.types';\n  import { XEventsTypes } from '../wiring/events.types';\n  import { useNoElementRender } from '../composables/use-no-element-render';\n  import { useXBus } from '../composables/use-x-bus';\n\n  /**\n   * This component helps subscribing to any {@link XEvent} with custom callbacks using Vue\n   * listeners API.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'GlobalXBus',\n    setup(_, { listeners }) {\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. Also unsubscribes on beforeDestroy.\n       *\n       * @internal\n       */\n      const subscription = reduce(\n        listeners as XEventListeners,\n        (subscription, eventName, callback) => {\n          subscription.add(\n            (\n              xBus.on(eventName, true) as unknown as Observable<\n                SubjectPayload<EventPayload<XEventsTypes, typeof eventName>, WireMetadata>\n              >\n            ).subscribe(({ eventPayload, metadata }) => {\n              callback(eventPayload as never, metadata);\n            })\n          );\n          return subscription;\n        },\n        new Subscription()\n      );\n\n      onBeforeUnmount(() => {\n        subscription.unsubscribe();\n      });\n    },\n    render() {\n      return useNoElementRender(this.$slots);\n    }\n  });\n"],"names":[],"mappings":";;;;;;AAWE;;;;;AAKG;AACH,aAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,YAAY;AAClB,IAAA,KAAK,CAAC,CAAC,EAAE,EAAE,SAAS,EAAE,EAAA;AACpB,QAAA,MAAM,IAAI,GAAG,OAAO,EAAE,CAAC;AAEvB;;;;;AAKG;AACH,QAAA,MAAM,YAAY,GAAG,MAAM,CACzB,SAA4B,EAC5B,CAAC,YAAY,EAAE,SAAS,EAAE,QAAQ,KAAI;YACpC,YAAY,CAAC,GAAG,CAEZ,IAAI,CAAC,EAAE,CAAC,SAAS,EAAE,IAAI,CAGxB,CAAC,SAAS,CAAC,CAAC,EAAE,YAAY,EAAE,QAAQ,EAAE,KAAI;AACzC,gBAAA,QAAQ,CAAC,YAAqB,EAAE,QAAQ,CAAC,CAAC;aAC3C,CAAC,CACH,CAAC;AACF,YAAA,OAAO,YAAY,CAAC;AACtB,SAAC,EACD,IAAI,YAAY,EAAE,CACnB,CAAC;QAEF,eAAe,CAAC,MAAK;YACnB,YAAY,CAAC,WAAW,EAAE,CAAC;AAC7B,SAAC,CAAC,CAAC;KACJ;IACD,MAAM,GAAA;AACJ,QAAA,OAAO,kBAAkB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KACxC;AACF,CAAA,CAAC;;;;"}
+{"version":3,"file":"global-x-bus.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/js/components/highlight.vue.js

@@ -1,93 +1,41 @@
-import script from './highlight.vue2.js';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs';
+import _sfc_main from './highlight.vue2.js';
+import { openBlock, createElementBlock, normalizeClass, toDisplayString, createCommentVNode } from 'vue';
+import _export_sfc from '../_virtual/_plugin-vue_export-helper.js';
 
-/* script */
-const __vue_script__ = script;
-
-/* template */
-var __vue_render__ = function () {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _c(
-    "NoElement",
+const _hoisted_1 = ["textContent"];
+const _hoisted_2 = ["textContent"];
+const _hoisted_3 = ["textContent"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock(
+    "span",
+    {
+      class: normalizeClass(["x-highlight", _ctx.dynamicCSSClasses])
+    },
     [
-      _vm._t(
-        "default",
-        function () {
-          return [
-            _c(
-              "span",
-              { staticClass: "x-highlight", class: _vm.dynamicCSSClasses },
-              [
-                _vm.matchParts.start
-                  ? _c("span", {
-                      staticClass: "x-highlight__text",
-                      attrs: { "data-test": "highlight-start" },
-                      domProps: { textContent: _vm._s(_vm.matchParts.start) },
-                    })
-                  : _vm._e(),
-                _vm.hasMatch
-                  ? _c("span", {
-                      staticClass: "x-highlight__text x-highlight-text-match",
-                      class: _vm.matchingPartClass,
-                      attrs: { "data-test": "matching-part" },
-                      domProps: { textContent: _vm._s(_vm.matchParts.match) },
-                    })
-                  : _vm._e(),
-                _vm.matchParts.end
-                  ? _c("span", {
-                      staticClass: "x-highlight__text",
-                      attrs: { "data-test": "highlight-end" },
-                      domProps: { textContent: _vm._s(_vm.matchParts.end) },
-                    })
-                  : _vm._e(),
-              ]
-            ),
-          ]
-        },
-        null,
-        Object.assign(
-          {},
-          { text: _vm.text, hasMatch: _vm.hasMatch },
-          _vm.matchParts
-        )
-      ),
+      _ctx.matchParts.start ? (openBlock(), createElementBlock("span", {
+        key: 0,
+        textContent: toDisplayString(_ctx.matchParts.start),
+        class: "x-highlight__text",
+        "data-test": "highlight-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"
+      }, 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"
+      }, null, 8, _hoisted_3)) : createCommentVNode("v-if", true)
     ],
     2
-  )
-};
-var __vue_staticRenderFns__ = [];
-__vue_render__._withStripped = true;
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    __vue_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
+    /* CLASS */
   );
+}
+var Highlight = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 
-export { __vue_component__ as default };
+export { Highlight as default };
 //# sourceMappingURL=highlight.vue.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"highlight.vue.js","sources":["../../../src/components/highlight.vue"],"sourcesContent":["<template>\n  <NoElement>\n    <slot v-bind=\"{ text, hasMatch, ...matchParts }\">\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    </slot>\n  </NoElement>\n</template>\n\n<script lang=\"ts\">\n  import { Component, Mixins, Prop } from 'vue-property-decorator';\n  import { normalizeString } from '../utils/normalize';\n  import { VueCSSClasses } from '../utils/types';\n  import { NoElement } from './no-element';\n  import { dynamicPropsMixin } from './dynamic-props.mixin';\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  @Component({\n    components: { NoElement }\n  })\n  export default class Highlight extends Mixins(\n    dynamicPropsMixin(['noMatchClass', 'matchingPartClass'])\n  ) {\n    /**\n     * The text to highlight some part of it.\n     *\n     * @public\n     */\n    @Prop({ default: '' })\n    public text!: string;\n\n    /**\n     * The part of the text to be highlighted.\n     *\n     * @public\n     */\n    @Prop({ default: '' })\n    public highlight!: string;\n\n    /**\n     * CSS Class to add when the `text` string contains the `highlight` string.\n     */\n    @Prop({ default: '' })\n    public matchClass!: string;\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     * @internal\n     */\n    protected get hasMatch(): boolean {\n      return !!this.matchParts.match;\n    }\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 {@link VueCSSClasses} classes.\n     * @internal\n     */\n    protected get dynamicCSSClasses(): VueCSSClasses {\n      const classes: VueCSSClasses = {\n        'x-highlight--has-match': this.hasMatch,\n        'x-highlight-text': this.hasMatch,\n        [this.matchClass]: this.hasMatch\n      };\n      if (this.noMatchClass) {\n        classes[this.noMatchClass] = !this.hasMatch;\n      }\n      return classes;\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     * @internal\n     */\n    protected get matchParts(): HighlightMatch {\n      const matcherIndex = normalizeString(this.text).indexOf(normalizeString(this.highlight));\n      return matcherIndex !== -1 && this.highlight\n        ? this.splitAt(this.text.trim(), matcherIndex, matcherIndex + this.highlight.trim().length)\n        : { start: this.text, match: '', end: '' };\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 end - 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, end: number): HighlightMatch {\n      return {\n        start: label.substring(0, start),\n        match: label.substring(start, end),\n        end: label.substring(end)\n      };\n    }\n  }\n\n  /**\n   * Contains the different parts of a string match.\n   */\n  interface HighlightMatch {\n    /**\n     * When the match does not happen from the beginning of the string, the initial unmatched\n     * part.\n     */\n    start: string;\n    /**\n     * The part of the text that is matching.\n     */\n    match: string;\n    /**\n     * When the match does not extend until the end, the remaining unmatched string.\n     */\n    end: string;\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":";;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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;;;;;;;;;;"}

package/js/components/highlight.vue2.js

@@ -1,8 +1,6 @@
-import { __decorate } from 'tslib';
-import { Mixins, Prop, Component } from 'vue-property-decorator';
+import { defineComponent, computed } from 'vue';
 import { normalizeString } from '../utils/normalize.js';
-import { NoElement } from './no-element.js';
-import { dynamicPropsMixin } from './dynamic-props.mixin.js';
+import '../utils/storage.js';
 
 /**
  * Highlights the given part of the text. The component is smart enough to do matches
@@ -10,86 +8,116 @@ import { dynamicPropsMixin } from './dynamic-props.mixin.js';
  *
  * @public
  */
-let Highlight = class Highlight extends Mixins(dynamicPropsMixin(['noMatchClass', 'matchingPartClass'])) {
-    /**
-     * Checks if the normalized suggestion query matches with the module's query, so it has a
-     * matching part.
-     *
-     * @returns True if there is a match between the text and the highlight strings.
-     * @internal
-     */
-    get hasMatch() {
-        return !!this.matchParts.match;
-    }
-    /**
-     * CSS classes to add depending on the component state.
-     *
-     * @remarks
-     * `x-highlight--has-match`: When there is a match between the text and the part to highlight.
-     * `[matchClass]`: When there is a match between the text and
-     * the part to highlight.
-     * `[noMatchClass]`: when there is no match between the text to highlight.
-     * @returns The {@link VueCSSClasses} classes.
-     * @internal
-     */
-    get dynamicCSSClasses() {
-        const classes = {
-            'x-highlight--has-match': this.hasMatch,
-            'x-highlight-text': this.hasMatch,
-            [this.matchClass]: this.hasMatch
-        };
-        if (this.noMatchClass) {
-            classes[this.noMatchClass] = !this.hasMatch;
+var _sfc_main = defineComponent({
+    name: 'Highlight',
+    props: {
+        /** The text to highlight some part of it. */
+        text: {
+            type: String,
+            default: ''
+        },
+        /** The part of the text to be highlighted. */
+        highlight: {
+            type: String,
+            default: ''
+        },
+        /** CSS Class to add when the `text` string contains the `highlight` string. */
+        matchClass: {
+            type: String,
+            default: ''
+        },
+        /** CSS Class to add when the given `text` doesn't contain the `highlight` string. */
+        noMatchClass: {
+            type: String,
+            default: ''
+        },
+        /** CSS Class to add to the matching text. */
+        matchingPartClass: {
+            type: String,
+            default: ''
         }
-        return classes;
-    }
-    /**
-     * Splits the text to highlight into 3 parts: a starting part, the matching part
-     * and the ending part. If there is no match between the text and the highlight, the `start`
-     * property will contain the whole text.
-     *
-     * @returns An object containing the different parts of the text.
-     * @internal
-     */
-    get matchParts() {
-        const matcherIndex = normalizeString(this.text).indexOf(normalizeString(this.highlight));
-        return matcherIndex !== -1 && this.highlight
-            ? this.splitAt(this.text.trim(), matcherIndex, matcherIndex + this.highlight.trim().length)
-            : { start: this.text, match: '', end: '' };
-    }
-    /**
-     * 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 end - The second index that the label will be divided by.
-     *
-     * @returns The three parts of the divided label.
-     * @internal
-     */
-    splitAt(label, start, end) {
-        return {
-            start: label.substring(0, start),
-            match: label.substring(start, end),
-            end: label.substring(end)
-        };
+    },
+    setup(props, { slots }) {
+        /**
+         * 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 end - The second index that the label will be divided by.
+         *
+         * @returns The three parts of the divided label.
+         */
+        function splitAt(label, start, end) {
+            return {
+                start: label.substring(0, start),
+                match: label.substring(start, end),
+                end: label.substring(end)
+            };
+        }
+        /**
+         * Splits the text to highlight into 3 parts: a starting part, the matching part
+         * and the ending part. If there is no match between the text and the highlight, the `start`
+         * property will contain the whole text.
+         *
+         * @returns An object containing the different parts of the text.
+         */
+        const matchParts = computed(() => {
+            const matcherIndex = normalizeString(props.text).indexOf(normalizeString(props.highlight));
+            return matcherIndex !== -1 && props.highlight
+                ? splitAt(props.text.trim(), matcherIndex, matcherIndex + props.highlight.trim().length)
+                : { start: props.text, match: '', end: '' };
+        });
+        /**
+         * Checks if the normalized suggestion query matches with the module's query, so it has a
+         * matching part.
+         *
+         * @returns True if there is a match between the text and the highlight strings.
+         */
+        const hasMatch = computed(() => !!matchParts.value.match);
+        /**
+         * CSS classes to add depending on the component state.
+         *
+         * @remarks
+         * `x-highlight--has-match`: When there is a match between the text and the part to highlight.
+         * `[matchClass]`: When there is a match between the text and
+         * the part to highlight.
+         * `[noMatchClass]`: when there is no match between the text to highlight.
+         * @returns The CSS classes.
+         */
+        const dynamicCSSClasses = computed(() => {
+            const classes = {
+                'x-highlight--has-match': hasMatch.value,
+                'x-highlight-text': hasMatch.value,
+                [props.matchClass]: hasMatch.value
+            };
+            if (props.noMatchClass) {
+                classes[props.noMatchClass] = !hasMatch.value;
+            }
+            return classes;
+        });
+        /**
+         * Render function to execute the `default` slot, binding `slotsProps` and getting only the
+         * first `vNode` to avoid Fragments and Text root nodes.
+         *
+         * @remarks `slotProps` must be values without Vue reactivity and located inside the
+         * render-function to update the binding data properly.
+         *
+         * @returns The root `vNode` of the `default` slot.
+         */
+        function renderDefaultSlot() {
+            const slotProps = {
+                text: props.text,
+                hasMatch: hasMatch.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. */
+        const componentProps = { hasMatch, matchParts, dynamicCSSClasses };
+        return (slots.default ? renderDefaultSlot : componentProps);
     }
-};
-__decorate([
-    Prop({ default: '' })
-], Highlight.prototype, "text", void 0);
-__decorate([
-    Prop({ default: '' })
-], Highlight.prototype, "highlight", void 0);
-__decorate([
-    Prop({ default: '' })
-], Highlight.prototype, "matchClass", void 0);
-Highlight = __decorate([
-    Component({
-        components: { NoElement }
-    })
-], Highlight);
-var script = Highlight;
+});
 
-export { script as default };
+export { _sfc_main as default };
 //# sourceMappingURL=highlight.vue2.js.map