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

package/js/composables/use-getter.js

@@ -1,4 +1,5 @@
 import { computed } from 'vue';
+import { useStore } from 'vuex';
 import '@vue/devtools-api';
 import '../plugins/devtools/timeline.devtools.js';
 import '@empathyco/x-utils';
@@ -8,24 +9,24 @@ import '../plugins/devtools/colors.utils.js';
 import '../plugins/x-bus.js';
 import '../plugins/x-plugin.js';
 import { getGetterPath } from '../plugins/x-plugin.utils.js';
-import { useStore } from './use-store.js';
 
 /**
- * Function which returns the requested getters as a dictionary of getters.
+ * Function which returns the requested getter's properties as a dictionary.
  *
  * @param module - The {@link XModuleName} of the getter.
- * @param getters - List of getters names.
  * @returns The requested getters from the module.
  * @public
  */
-function useGetter(module, getters) {
+const useGetter = function useGetter(module) {
     const store = useStore();
-    return getters.reduce((getterDictionary, getterName) => {
-        const getterPath = getGetterPath(module, getterName);
-        getterDictionary[getterName] = computed(() => store.getters[getterPath]);
-        return getterDictionary;
-    }, {});
-}
+    return new Proxy({}, {
+        get(_obj, getterName) {
+            const path = getGetterPath(module, getterName);
+            // eslint-disable-next-line ts/no-unsafe-member-access,ts/no-unsafe-return
+            return computed(() => store.getters[path]);
+        },
+    });
+};
 
 export { useGetter };
 //# sourceMappingURL=use-getter.js.map

package/js/composables/use-getter.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-getter.js","sources":["../../../src/composables/use-getter.ts"],"sourcesContent":["import { Dictionary } from '@empathyco/x-utils';\nimport { computed, ComputedRef } from 'vue';\nimport { ExtractGetters, XModuleName } from '../x-modules/x-modules.types';\nimport { getGetterPath } from '../plugins/index';\nimport { useStore } from './use-store';\n\n/**\n * Function which returns the requested getters as a dictionary of getters.\n *\n * @param module - The {@link XModuleName} of the getter.\n * @param getters - List of getters names.\n * @returns The requested getters from the module.\n * @public\n */\nexport function useGetter<\n  Module extends XModuleName,\n  GetterName extends keyof ExtractGetters<Module> & string\n>(module: Module, getters: GetterName[]): Dictionary<ComputedRef> {\n  const store = useStore();\n\n  return getters.reduce<Dictionary<ComputedRef>>((getterDictionary, getterName) => {\n    const getterPath = getGetterPath(module, getterName);\n    getterDictionary[getterName] = computed(() => store.getters[getterPath]);\n    return getterDictionary;\n  }, {});\n}\n"],"names":[],"mappings":";;;;;;;;;;;;AAMA;;;;;;;AAOG;AACa,SAAA,SAAS,CAGvB,MAAc,EAAE,OAAqB,EAAA;AACrC,IAAA,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,OAAO,OAAO,CAAC,MAAM,CAA0B,CAAC,gBAAgB,EAAE,UAAU,KAAI;QAC9E,MAAM,UAAU,GAAG,aAAa,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;AACrD,QAAA,gBAAgB,CAAC,UAAU,CAAC,GAAG,QAAQ,CAAC,MAAM,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC;AACzE,QAAA,OAAO,gBAAgB,CAAC;KACzB,EAAE,EAAE,CAAC,CAAC;AACT;;;;"}
+{"version":3,"file":"use-getter.js","sources":["../../../src/composables/use-getter.ts"],"sourcesContent":["import type { Dictionary } from '@empathyco/x-utils'\nimport type { ComputedRef } from 'vue'\nimport type { RootXStoreState } from '../store/index'\nimport type { ExtractGetters, XModuleName } from '../x-modules/x-modules.types'\nimport { computed } from 'vue'\nimport { useStore } from 'vuex'\nimport { getGetterPath } from '../plugins/index'\n\ninterface UseGetter {\n  /** @deprecated Use the single-argument overload instead. */\n  <Module extends XModuleName, Getters = keyof ExtractGetters<Module> & string[]>(\n    module: Module,\n    getters: Getters,\n  ): Dictionary<ComputedRef>\n\n  /**\n   * Preferred. Use this signature for better type inference and future compatibility.\n   */\n  <Module extends XModuleName, Getters = ExtractGetters<Module>>(\n    module: Module,\n  ): { [P in keyof Getters]: ComputedRef<Getters[P]> }\n}\n\n/**\n * Function which returns the requested getter's properties as a dictionary.\n *\n * @param module - The {@link XModuleName} of the getter.\n * @returns The requested getters from the module.\n * @public\n */\nexport const useGetter: UseGetter = function useGetter<\n  Module extends XModuleName,\n  Getters = ExtractGetters<Module>,\n>(module: Module): { [P in keyof Getters]: ComputedRef<Getters[P]> } {\n  const store = useStore<RootXStoreState>()\n  return new Proxy({} as { [P in keyof Getters]: ComputedRef<Getters[P]> }, {\n    get(_obj, getterName) {\n      const path = getGetterPath(module, getterName as keyof ExtractGetters<Module>)\n      // eslint-disable-next-line ts/no-unsafe-member-access,ts/no-unsafe-return\n      return computed(() => store.getters[path as typeof getterName])\n    },\n  })\n}\n"],"names":[],"mappings":";;;;;;;;;;;;AAuBA;;;;;;AAMG;AACU,MAAA,SAAS,GAAc,SAAS,SAAS,CAGpD,MAAc,EAAA;AACd,IAAA,MAAM,KAAK,GAAG,QAAQ,EAAmB,CAAA;AACzC,IAAA,OAAO,IAAI,KAAK,CAAC,EAAuD,EAAE;QACxE,GAAG,CAAC,IAAI,EAAE,UAAU,EAAA;YAClB,MAAM,IAAI,GAAG,aAAa,CAAC,MAAM,EAAE,UAA0C,CAAC,CAAA;;AAE9E,YAAA,OAAO,QAAQ,CAAC,MAAM,KAAK,CAAC,OAAO,CAAC,IAAyB,CAAC,CAAC,CAAA;SAChE;AACF,KAAA,CAAC,CAAA;AACJ;;;;"}

package/js/composables/use-on-display.js

@@ -1,5 +1,5 @@
-import { watch } from 'vue';
 import { useElementVisibility } from '@vueuse/core';
+import { watch } from 'vue';
 import { useXBus } from './use-x-bus.js';
 
 /**
@@ -9,12 +9,10 @@ import { useXBus } from './use-x-bus.js';
  * @param options - The options to customize the behavior of the composable. The element that
  * will be watched, the callback to trigger and if the callback should be triggered only once
  * or every time the element appears in the viewport, true by default.
- *
  * @returns If the element is currently visible in the viewport or not and the watcher stop handle.
- *
  * @public
  */
-function useOnDisplay({ element, callback, triggerOnce = true }) {
+function useOnDisplay({ element, callback, triggerOnce = true, }) {
     const isElementVisible = useElementVisibility(element);
     const unwatchDisplay = watch(isElementVisible, newValue => {
         if (newValue) {
@@ -26,7 +24,7 @@ function useOnDisplay({ element, callback, triggerOnce = true }) {
     });
     return {
         isElementVisible,
-        unwatchDisplay
+        unwatchDisplay,
     };
 }
 /**
@@ -35,22 +33,20 @@ function useOnDisplay({ element, callback, triggerOnce = true }) {
  *
  * @param options - The options to customize the behavior of the composable. The element that
  * will be watched and the tagging request to emit.
- *
  * @returns If the element is currently visible in the viewport or not and the watcher stop handle.
- *
  * @public
  */
-function useEmitDisplayEvent({ element, taggingRequest, eventMetadata = {} }) {
+function useEmitDisplayEvent({ element, taggingRequest, eventMetadata = {}, }) {
     const bus = useXBus();
     const { isElementVisible, unwatchDisplay } = useOnDisplay({
         element,
         callback: () => {
-            bus.emit('TrackableElementDisplayed', { tagging: { display: taggingRequest } }, eventMetadata);
-        }
+            void bus.emit('TrackableElementDisplayed', { tagging: { display: taggingRequest } }, eventMetadata);
+        },
     });
     return {
         isElementVisible,
-        unwatchDisplay
+        unwatchDisplay,
     };
 }
 

package/js/composables/use-on-display.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-on-display.js","sources":["../../../src/composables/use-on-display.ts"],"sourcesContent":["import { Ref, watch, WatchStopHandle } from 'vue';\nimport { useElementVisibility } from '@vueuse/core';\nimport { TaggingRequest } from '@empathyco/x-types';\nimport { WireMetadata } from '../wiring';\nimport { useXBus } from './use-x-bus';\n\n/**\n * Composable that triggers a callback whenever the provided element appears in the viewport.\n * It can trigger the first time only or every time the element appears in the viewport.\n *\n * @param options - The options to customize the behavior of the composable. The element that\n * will be watched, the callback to trigger and if the callback should be triggered only once\n * or every time the element appears in the viewport, true by default.\n *\n * @returns If the element is currently visible in the viewport or not and the watcher stop handle.\n *\n * @public\n */\nexport function useOnDisplay({\n  element,\n  callback,\n  triggerOnce = true\n}: UseOnDisplayOptions): UseOnDisplayReturn {\n  const isElementVisible = useElementVisibility(element);\n\n  const unwatchDisplay = watch(isElementVisible, newValue => {\n    if (newValue) {\n      callback();\n      if (triggerOnce) {\n        unwatchDisplay();\n      }\n    }\n  });\n\n  return {\n    isElementVisible,\n    unwatchDisplay\n  };\n}\n\n/**\n * Composable that emits a `TrackableElementDisplayed` event whenever the provided element\n * appears in the viewport for the first time.\n *\n * @param options - The options to customize the behavior of the composable. The element that\n * will be watched and the tagging request to emit.\n *\n * @returns If the element is currently visible in the viewport or not and the watcher stop handle.\n *\n * @public\n */\nexport function useEmitDisplayEvent({\n  element,\n  taggingRequest,\n  eventMetadata = {}\n}: UseEmitDisplayEventOptions): UseOnDisplayReturn {\n  const bus = useXBus();\n\n  const { isElementVisible, unwatchDisplay } = useOnDisplay({\n    element,\n    callback: () => {\n      bus.emit(\n        'TrackableElementDisplayed',\n        { tagging: { display: taggingRequest } },\n        eventMetadata\n      );\n    }\n  });\n\n  return {\n    isElementVisible,\n    unwatchDisplay\n  };\n}\n\n/**\n * Options for the {@link useOnDisplay} composable.\n */\ntype UseOnDisplayOptions = {\n  element: HTMLElement | Ref<HTMLElement | null>;\n  callback: () => void;\n  triggerOnce?: boolean;\n};\n\n/**\n * Return type of the {@link useOnDisplay} composable.\n */\ntype UseOnDisplayReturn = {\n  isElementVisible: Ref<boolean>;\n  unwatchDisplay: WatchStopHandle;\n};\n\n/**\n * Options for the {@link useEmitDisplayEvent} composable.\n */\ntype UseEmitDisplayEventOptions = {\n  element: UseOnDisplayOptions['element'];\n  taggingRequest: TaggingRequest;\n  eventMetadata?: Omit<WireMetadata, 'moduleName' | 'origin' | 'location'>;\n};\n"],"names":[],"mappings":";;;;AAMA;;;;;;;;;;;AAWG;AACG,SAAU,YAAY,CAAC,EAC3B,OAAO,EACP,QAAQ,EACR,WAAW,GAAG,IAAI,EACE,EAAA;AACpB,IAAA,MAAM,gBAAgB,GAAG,oBAAoB,CAAC,OAAO,CAAC,CAAC;IAEvD,MAAM,cAAc,GAAG,KAAK,CAAC,gBAAgB,EAAE,QAAQ,IAAG;AACxD,QAAA,IAAI,QAAQ,EAAE;AACZ,YAAA,QAAQ,EAAE,CAAC;AACX,YAAA,IAAI,WAAW,EAAE;AACf,gBAAA,cAAc,EAAE,CAAC;AAClB,aAAA;AACF,SAAA;AACH,KAAC,CAAC,CAAC;IAEH,OAAO;QACL,gBAAgB;QAChB,cAAc;KACf,CAAC;AACJ,CAAC;AAED;;;;;;;;;;AAUG;AACG,SAAU,mBAAmB,CAAC,EAClC,OAAO,EACP,cAAc,EACd,aAAa,GAAG,EAAE,EACS,EAAA;AAC3B,IAAA,MAAM,GAAG,GAAG,OAAO,EAAE,CAAC;AAEtB,IAAA,MAAM,EAAE,gBAAgB,EAAE,cAAc,EAAE,GAAG,YAAY,CAAC;QACxD,OAAO;QACP,QAAQ,EAAE,MAAK;AACb,YAAA,GAAG,CAAC,IAAI,CACN,2BAA2B,EAC3B,EAAE,OAAO,EAAE,EAAE,OAAO,EAAE,cAAc,EAAE,EAAE,EACxC,aAAa,CACd,CAAC;SACH;AACF,KAAA,CAAC,CAAC;IAEH,OAAO;QACL,gBAAgB;QAChB,cAAc;KACf,CAAC;AACJ;;;;"}
+{"version":3,"file":"use-on-display.js","sources":["../../../src/composables/use-on-display.ts"],"sourcesContent":["import type { TaggingRequest } from '@empathyco/x-types'\nimport type { Ref, WatchStopHandle } from 'vue'\nimport type { WireMetadata } from '../wiring'\nimport { useElementVisibility } from '@vueuse/core'\nimport { watch } from 'vue'\nimport { useXBus } from './use-x-bus'\n\n/**\n * Composable that triggers a callback whenever the provided element appears in the viewport.\n * It can trigger the first time only or every time the element appears in the viewport.\n *\n * @param options - The options to customize the behavior of the composable. The element that\n * will be watched, the callback to trigger and if the callback should be triggered only once\n * or every time the element appears in the viewport, true by default.\n * @returns If the element is currently visible in the viewport or not and the watcher stop handle.\n * @public\n */\nexport function useOnDisplay({\n  element,\n  callback,\n  triggerOnce = true,\n}: UseOnDisplayOptions): UseOnDisplayReturn {\n  const isElementVisible = useElementVisibility(element)\n\n  const unwatchDisplay = watch(isElementVisible, newValue => {\n    if (newValue) {\n      callback()\n      if (triggerOnce) {\n        unwatchDisplay()\n      }\n    }\n  })\n\n  return {\n    isElementVisible,\n    unwatchDisplay,\n  }\n}\n\n/**\n * Composable that emits a `TrackableElementDisplayed` event whenever the provided element\n * appears in the viewport for the first time.\n *\n * @param options - The options to customize the behavior of the composable. The element that\n * will be watched and the tagging request to emit.\n * @returns If the element is currently visible in the viewport or not and the watcher stop handle.\n * @public\n */\nexport function useEmitDisplayEvent({\n  element,\n  taggingRequest,\n  eventMetadata = {},\n}: UseEmitDisplayEventOptions): UseOnDisplayReturn {\n  const bus = useXBus()\n\n  const { isElementVisible, unwatchDisplay } = useOnDisplay({\n    element,\n    callback: () => {\n      void bus.emit(\n        'TrackableElementDisplayed',\n        { tagging: { display: taggingRequest } },\n        eventMetadata,\n      )\n    },\n  })\n\n  return {\n    isElementVisible,\n    unwatchDisplay,\n  }\n}\n\n/**\n * Options for the {@link useOnDisplay} composable.\n */\ninterface UseOnDisplayOptions {\n  element: HTMLElement | Ref<HTMLElement | null>\n  callback: () => void\n  triggerOnce?: boolean\n}\n\n/**\n * Return type of the {@link useOnDisplay} composable.\n */\ninterface UseOnDisplayReturn {\n  isElementVisible: Ref<boolean>\n  unwatchDisplay: WatchStopHandle\n}\n\n/**\n * Options for the {@link useEmitDisplayEvent} composable.\n */\ninterface UseEmitDisplayEventOptions {\n  element: UseOnDisplayOptions['element']\n  taggingRequest: TaggingRequest\n  eventMetadata?: Omit<WireMetadata, 'moduleName' | 'origin' | 'location'>\n}\n"],"names":[],"mappings":";;;;AAOA;;;;;;;;;AASG;AACG,SAAU,YAAY,CAAC,EAC3B,OAAO,EACP,QAAQ,EACR,WAAW,GAAG,IAAI,GACE,EAAA;AACpB,IAAA,MAAM,gBAAgB,GAAG,oBAAoB,CAAC,OAAO,CAAC,CAAA;IAEtD,MAAM,cAAc,GAAG,KAAK,CAAC,gBAAgB,EAAE,QAAQ,IAAG;AACxD,QAAA,IAAI,QAAQ,EAAE;AACZ,YAAA,QAAQ,EAAE,CAAA;AACV,YAAA,IAAI,WAAW,EAAE;AACf,gBAAA,cAAc,EAAE,CAAA;AACjB,aAAA;AACF,SAAA;AACH,KAAC,CAAC,CAAA;IAEF,OAAO;QACL,gBAAgB;QAChB,cAAc;KACf,CAAA;AACH,CAAC;AAED;;;;;;;;AAQG;AACG,SAAU,mBAAmB,CAAC,EAClC,OAAO,EACP,cAAc,EACd,aAAa,GAAG,EAAE,GACS,EAAA;AAC3B,IAAA,MAAM,GAAG,GAAG,OAAO,EAAE,CAAA;AAErB,IAAA,MAAM,EAAE,gBAAgB,EAAE,cAAc,EAAE,GAAG,YAAY,CAAC;QACxD,OAAO;QACP,QAAQ,EAAE,MAAK;AACb,YAAA,KAAK,GAAG,CAAC,IAAI,CACX,2BAA2B,EAC3B,EAAE,OAAO,EAAE,EAAE,OAAO,EAAE,cAAc,EAAE,EAAE,EACxC,aAAa,CACd,CAAA;SACF;AACF,KAAA,CAAC,CAAA;IAEF,OAAO;QACL,gBAAgB;QAChB,cAAc;KACf,CAAA;AACH;;;;"}

package/js/composables/use-state.js

@@ -1,21 +1,20 @@
 import { computed } from 'vue';
-import { useStore } from './use-store.js';
+import { useStore } from 'vuex';
 
 /**
  * Function which returns the requested state's properties as a dictionary.
- *
  * @param module - The {@link XModuleName} of the getter.
- * @param paths - List of state paths.
- * @returns The requested state properties of the module.
+ * @returns A dictionary of computed state properties of the module.
  *
  * @public
  */
-function useState(module, paths) {
+function useState(module) {
     const store = useStore();
-    return paths.reduce((stateDictionary, path) => {
-        stateDictionary[path] = computed(() => store?.state.x[module]?.[path]);
-        return stateDictionary;
-    }, {});
+    return new Proxy({}, {
+        get(_obj, path) {
+            return computed(() => store?.state.x[module]?.[path]);
+        },
+    });
 }
 
 export { useState };

package/js/composables/use-state.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-state.js","sources":["../../../src/composables/use-state.ts"],"sourcesContent":["import { computed, ComputedRef } from 'vue';\nimport { Dictionary } from '@empathyco/x-utils';\nimport { ExtractState, XModuleName } from '../x-modules/x-modules.types';\nimport { useStore } from './use-store';\n\n/**\n * Function which returns the requested state's properties as a dictionary.\n *\n * @param module - The {@link XModuleName} of the getter.\n * @param paths - List of state paths.\n * @returns The requested state properties of the module.\n *\n * @public\n */\nexport function useState<\n  Module extends XModuleName,\n  Path extends keyof ExtractState<Module> & string\n>(module: Module, paths: Path[]): Dictionary<ComputedRef> {\n  const store = useStore();\n\n  return paths.reduce<Dictionary<ComputedRef>>((stateDictionary, path) => {\n    stateDictionary[path] = computed(() => store?.state.x[module]?.[path]);\n    return stateDictionary;\n  }, {});\n}\n"],"names":[],"mappings":";;;AAKA;;;;;;;;AAQG;AACa,SAAA,QAAQ,CAGtB,MAAc,EAAE,KAAa,EAAA;AAC7B,IAAA,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,OAAO,KAAK,CAAC,MAAM,CAA0B,CAAC,eAAe,EAAE,IAAI,KAAI;QACrE,eAAe,CAAC,IAAI,CAAC,GAAG,QAAQ,CAAC,MAAM,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC;AACvE,QAAA,OAAO,eAAe,CAAC;KACxB,EAAE,EAAE,CAAC,CAAC;AACT;;;;"}
+{"version":3,"file":"use-state.js","sources":["../../../src/composables/use-state.ts"],"sourcesContent":["import type { ComputedRef } from 'vue'\nimport type { RootXStoreState } from '../store/store.types'\nimport type { ExtractState, XModuleName } from '../x-modules/x-modules.types'\nimport { computed } from 'vue'\nimport { useStore } from 'vuex'\n\n/**\n * Function which returns the requested state's properties as a dictionary.\n * @param module - The {@link XModuleName} of the getter.\n * @returns A dictionary of computed state properties of the module.\n *\n * @public\n */\nexport function useState<Module extends XModuleName, State = ExtractState<Module>>(\n  module: Module,\n): { [P in keyof State]: ComputedRef<State[P]> } {\n  const store = useStore<RootXStoreState>()\n  return new Proxy({} as { [P in keyof State]: ComputedRef<State[P]> }, {\n    get(_obj, path) {\n      return computed(() => store?.state.x[module]?.[path as keyof ExtractState<Module>])\n    },\n  })\n}\n"],"names":[],"mappings":";;;AAMA;;;;;;AAMG;AACG,SAAU,QAAQ,CACtB,MAAc,EAAA;AAEd,IAAA,MAAM,KAAK,GAAG,QAAQ,EAAmB,CAAA;AACzC,IAAA,OAAO,IAAI,KAAK,CAAC,EAAmD,EAAE;QACpE,GAAG,CAAC,IAAI,EAAE,IAAI,EAAA;AACZ,YAAA,OAAO,QAAQ,CAAC,MAAM,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,IAAkC,CAAC,CAAC,CAAA;SACpF;AACF,KAAA,CAAC,CAAA;AACJ;;;;"}

package/js/composables/use-x-bus.js

@@ -1,8 +1,8 @@
 import { Subscription } from 'rxjs';
 import { inject, getCurrentInstance, onBeforeUnmount, isRef } from 'vue';
 import { getRootXComponent, getXComponentXModuleName } from '../components/x-component.utils.js';
-import { XPlugin } from '../plugins/x-plugin.js';
 import { bus } from '../plugins/x-bus.js';
+import { XPlugin } from '../plugins/x-plugin.js';
 
 /**
  * Composable which injects the current location, returns the `on` and `emit` functions
@@ -25,8 +25,9 @@ function useXBus() {
     let bus$1;
     try {
         bus$1 = XPlugin.bus;
+        // eslint-disable-next-line unused-imports/no-unused-vars
     }
-    catch (error) {
+    catch (_error) {
         bus$1 = bus;
     }
     const subscription = new Subscription();
@@ -37,17 +38,14 @@ function useXBus() {
         on: (event, withMetadata) => {
             const observable = bus$1.on(event, withMetadata);
             return {
-                subscribe: (callback
-                // Cast to any because bus.on doesn't infer conditional type referencing `withMetadata`
-                // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-                ) => subscription.add(observable.subscribe(callback))
+                subscribe: (callback) => subscription.add(observable.subscribe(callback)),
             };
         },
-        emit: (event, payload, metadata = {}) => {
+        emit: async (event, payload, metadata = {}) => {
             const location = isRef(injectedLocation) ? injectedLocation.value : injectedLocation;
             xComponent?.$emit(event, payload); // TODO - Pending to deprecate
             return bus$1.emit(event, payload, createWireMetadata(metadata, component, location));
-        }
+        },
     };
 }
 /**
@@ -64,14 +62,14 @@ function createWireMetadata(metadata, component, location) {
         replaceable: true,
         moduleName: component ? getXComponentXModuleName(component.xComponent) : null,
         location,
-        ...metadata
+        ...metadata,
     }, {
         component: {
             value: component,
             /* TODO: defining component as a non-enumerable property to ease tests changes due to
              * cyclic dependencies in Vue component instances. */
-            enumerable: false
-        }
+            enumerable: false,
+        },
     });
 }
 

package/js/composables/use-x-bus.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-x-bus.js","sources":["../../../src/composables/use-x-bus.ts"],"sourcesContent":["import { Subscription } from 'rxjs';\nimport {\n  ComponentPublicInstance,\n  getCurrentInstance,\n  inject,\n  isRef,\n  onBeforeUnmount,\n  Ref\n} from 'vue';\nimport { EventPayload, SubjectPayload, XBus } from '@empathyco/x-bus';\nimport { XEvent, XEventPayload, XEventsTypes } from '../wiring/events.types';\nimport { WireMetadata } from '../wiring/wiring.types';\nimport { getRootXComponent, getXComponentXModuleName } from '../components/x-component.utils';\nimport { FeatureLocation } from '../types/origin';\nimport { XPlugin } from '../plugins/x-plugin';\nimport { bus as xBus } from '../plugins/x-bus';\n\ninterface PrivateExtendedVueComponent extends ComponentPublicInstance {\n  xComponent?: ComponentPublicInstance;\n}\n\n/**\n * Composable which injects the current location, returns the `on` and `emit` functions\n * using the bus and applying component metadata. Also unsubscribe from events when components is\n * unmounted.\n *\n * @remarks This composable tries to use the `XPlugin` bus and catches the exception thrown\n * by the `XPlugin` if it was not instantiated and uses the default `xBus` as fallback.\n *\n * @returns An object with the `on` and `emit` functions.\n * @public\n */\nexport function useXBus() {\n  const injectedLocation = inject<Ref<FeatureLocation> | FeatureLocation>('location', 'none');\n\n  const component = getCurrentInstance()?.proxy as PrivateExtendedVueComponent;\n  const xComponent = getRootXComponent(component ?? null);\n  if (component && xComponent) {\n    component.xComponent = xComponent;\n  }\n\n  let bus: XBus<XEventsTypes, WireMetadata>;\n  try {\n    bus = XPlugin.bus;\n  } catch (error) {\n    bus = xBus;\n  }\n\n  const subscription = new Subscription();\n  onBeforeUnmount(() => {\n    subscription.unsubscribe();\n  });\n\n  return {\n    on: <Event extends XEvent, Metadata extends boolean>(event: Event, withMetadata: Metadata) => {\n      type Payload = EventPayload<XEventsTypes, Event>;\n      const observable = bus.on(event, withMetadata);\n\n      return {\n        subscribe: (\n          callback: (\n            payload: Metadata extends true ? SubjectPayload<Payload, WireMetadata> : Payload\n          ) => void\n          // Cast to any because bus.on doesn't infer conditional type referencing `withMetadata`\n          // eslint-disable-next-line @typescript-eslint/no-unsafe-argument\n        ) => subscription.add(observable.subscribe(callback as any))\n      };\n    },\n    emit: <Event extends XEvent>(\n      event: Event,\n      payload?: XEventPayload<Event>,\n      metadata: Omit<WireMetadata, 'moduleName'> = {}\n    ) => {\n      const location = isRef(injectedLocation) ? injectedLocation.value : injectedLocation;\n\n      xComponent?.$emit(event, payload); // TODO - Pending to deprecate\n      return bus.emit(event, payload!, createWireMetadata(metadata, component, location));\n    }\n  };\n}\n\n/**\n * Creates a wire metadata object based on the component and the provided metadata.\n *\n * @param metadata - Additional metadata emitted by the component.\n * @param component - The component this metadata belongs to.\n * @param location - The location of the component.\n *\n * @returns A {@link WireMetadata} object.\n */\nfunction createWireMetadata(\n  metadata: Partial<WireMetadata>,\n  component?: PrivateExtendedVueComponent,\n  location?: FeatureLocation\n): WireMetadata {\n  return Object.defineProperties(\n    {\n      replaceable: true,\n      moduleName: component ? getXComponentXModuleName(component.xComponent) : null,\n      location,\n      ...metadata\n    },\n    {\n      component: {\n        value: component,\n        /* TODO: defining component as a non-enumerable property to ease tests changes due to\n         * cyclic dependencies in Vue component instances. */\n        enumerable: false\n      }\n    }\n  );\n}\n"],"names":["bus","xBus"],"mappings":";;;;;;AAqBA;;;;;;;;;;AAUG;SACa,OAAO,GAAA;IACrB,MAAM,gBAAgB,GAAG,MAAM,CAAyC,UAAU,EAAE,MAAM,CAAC,CAAC;AAE5F,IAAA,MAAM,SAAS,GAAG,kBAAkB,EAAE,EAAE,KAAoC,CAAC;IAC7E,MAAM,UAAU,GAAG,iBAAiB,CAAC,SAAS,IAAI,IAAI,CAAC,CAAC;IACxD,IAAI,SAAS,IAAI,UAAU,EAAE;AAC3B,QAAA,SAAS,CAAC,UAAU,GAAG,UAAU,CAAC;AACnC,KAAA;AAED,IAAA,IAAIA,KAAqC,CAAC;IAC1C,IAAI;AACF,QAAAA,KAAG,GAAG,OAAO,CAAC,GAAG,CAAC;AACnB,KAAA;AAAC,IAAA,OAAO,KAAK,EAAE;QACdA,KAAG,GAAGC,GAAI,CAAC;AACZ,KAAA;AAED,IAAA,MAAM,YAAY,GAAG,IAAI,YAAY,EAAE,CAAC;IACxC,eAAe,CAAC,MAAK;QACnB,YAAY,CAAC,WAAW,EAAE,CAAC;AAC7B,KAAC,CAAC,CAAC;IAEH,OAAO;AACL,QAAA,EAAE,EAAE,CAAiD,KAAY,EAAE,YAAsB,KAAI;YAE3F,MAAM,UAAU,GAAGD,KAAG,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,CAAC,CAAC;YAE/C,OAAO;gBACL,SAAS,EAAE,CACT,QAES;;;qBAGN,YAAY,CAAC,GAAG,CAAC,UAAU,CAAC,SAAS,CAAC,QAAe,CAAC,CAAC;aAC7D,CAAC;SACH;QACD,IAAI,EAAE,CACJ,KAAY,EACZ,OAA8B,EAC9B,QAAA,GAA6C,EAAE,KAC7C;AACF,YAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,gBAAgB,CAAC,GAAG,gBAAgB,CAAC,KAAK,GAAG,gBAAgB,CAAC;YAErF,UAAU,EAAE,KAAK,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;AAClC,YAAA,OAAOA,KAAG,CAAC,IAAI,CAAC,KAAK,EAAE,OAAQ,EAAE,kBAAkB,CAAC,QAAQ,EAAE,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC;SACrF;KACF,CAAC;AACJ,CAAC;AAED;;;;;;;;AAQG;AACH,SAAS,kBAAkB,CACzB,QAA+B,EAC/B,SAAuC,EACvC,QAA0B,EAAA;IAE1B,OAAO,MAAM,CAAC,gBAAgB,CAC5B;AACE,QAAA,WAAW,EAAE,IAAI;AACjB,QAAA,UAAU,EAAE,SAAS,GAAG,wBAAwB,CAAC,SAAS,CAAC,UAAU,CAAC,GAAG,IAAI;QAC7E,QAAQ;AACR,QAAA,GAAG,QAAQ;KACZ,EACD;AACE,QAAA,SAAS,EAAE;AACT,YAAA,KAAK,EAAE,SAAS;AAChB;AACqD;AACrD,YAAA,UAAU,EAAE,KAAK;AAClB,SAAA;AACF,KAAA,CACF,CAAC;AACJ;;;;"}
+{"version":3,"file":"use-x-bus.js","sources":["../../../src/composables/use-x-bus.ts"],"sourcesContent":["import type { EventPayload, SubjectPayload, XBus } from '@empathyco/x-bus'\nimport type { ComponentPublicInstance, Ref } from 'vue'\nimport type { FeatureLocation } from '../types/origin'\nimport type { XEvent, XEventPayload, XEventsTypes } from '../wiring/events.types'\nimport type { WireMetadata } from '../wiring/wiring.types'\nimport { Subscription } from 'rxjs'\nimport { getCurrentInstance, inject, isRef, onBeforeUnmount } from 'vue'\nimport { getRootXComponent, getXComponentXModuleName } from '../components/x-component.utils'\nimport { bus as xBus } from '../plugins/x-bus'\nimport { XPlugin } from '../plugins/x-plugin'\n\ninterface PrivateExtendedVueComponent extends ComponentPublicInstance {\n  xComponent?: ComponentPublicInstance\n}\n\n/**\n * Composable which injects the current location, returns the `on` and `emit` functions\n * using the bus and applying component metadata. Also unsubscribe from events when components is\n * unmounted.\n *\n * @remarks This composable tries to use the `XPlugin` bus and catches the exception thrown\n * by the `XPlugin` if it was not instantiated and uses the default `xBus` as fallback.\n *\n * @returns An object with the `on` and `emit` functions.\n * @public\n */\nexport function useXBus() {\n  const injectedLocation = inject<Ref<FeatureLocation> | FeatureLocation>('location', 'none')\n\n  const component = getCurrentInstance()?.proxy as PrivateExtendedVueComponent\n  const xComponent = getRootXComponent(component ?? null)\n  if (component && xComponent) {\n    component.xComponent = xComponent\n  }\n\n  let bus: XBus<XEventsTypes, WireMetadata>\n  try {\n    bus = XPlugin.bus\n    // eslint-disable-next-line unused-imports/no-unused-vars\n  } catch (_error) {\n    bus = xBus\n  }\n\n  const subscription = new Subscription()\n  onBeforeUnmount(() => {\n    subscription.unsubscribe()\n  })\n\n  return {\n    on: <Event extends XEvent, Metadata extends boolean>(event: Event, withMetadata: Metadata) => {\n      type Payload = EventPayload<XEventsTypes, Event>\n      const observable = bus.on(event, withMetadata)\n\n      return {\n        subscribe: (\n          callback: (\n            payload: Metadata extends true ? SubjectPayload<Payload, WireMetadata> : Payload,\n          ) => void,\n          // Cast to any because bus.on doesn't infer conditional type referencing `withMetadata`\n          // eslint-disable-next-line ts/no-unsafe-argument\n        ) => subscription.add(observable.subscribe(callback as any)),\n      }\n    },\n    emit: async <Event extends XEvent>(\n      event: Event,\n      payload?: XEventPayload<Event>,\n      metadata: Omit<WireMetadata, 'moduleName'> = {},\n    ) => {\n      const location = isRef(injectedLocation) ? injectedLocation.value : injectedLocation\n\n      xComponent?.$emit(event, payload) // TODO - Pending to deprecate\n      return bus.emit(event, payload!, createWireMetadata(metadata, component, location))\n    },\n  }\n}\n\n/**\n * Creates a wire metadata object based on the component and the provided metadata.\n *\n * @param metadata - Additional metadata emitted by the component.\n * @param component - The component this metadata belongs to.\n * @param location - The location of the component.\n *\n * @returns A {@link WireMetadata} object.\n */\nfunction createWireMetadata(\n  metadata: Partial<WireMetadata>,\n  component?: PrivateExtendedVueComponent,\n  location?: FeatureLocation,\n): WireMetadata {\n  return Object.defineProperties(\n    {\n      replaceable: true,\n      moduleName: component ? getXComponentXModuleName(component.xComponent) : null,\n      location,\n      ...metadata,\n    },\n    {\n      component: {\n        value: component,\n        /* TODO: defining component as a non-enumerable property to ease tests changes due to\n         * cyclic dependencies in Vue component instances. */\n        enumerable: false,\n      },\n    },\n  )\n}\n"],"names":["bus","xBus"],"mappings":";;;;;;AAeA;;;;;;;;;;AAUG;SACa,OAAO,GAAA;IACrB,MAAM,gBAAgB,GAAG,MAAM,CAAyC,UAAU,EAAE,MAAM,CAAC,CAAA;AAE3F,IAAA,MAAM,SAAS,GAAG,kBAAkB,EAAE,EAAE,KAAoC,CAAA;IAC5E,MAAM,UAAU,GAAG,iBAAiB,CAAC,SAAS,IAAI,IAAI,CAAC,CAAA;IACvD,IAAI,SAAS,IAAI,UAAU,EAAE;AAC3B,QAAA,SAAS,CAAC,UAAU,GAAG,UAAU,CAAA;AAClC,KAAA;AAED,IAAA,IAAIA,KAAqC,CAAA;IACzC,IAAI;AACF,QAAAA,KAAG,GAAG,OAAO,CAAC,GAAG,CAAA;;AAElB,KAAA;AAAC,IAAA,OAAO,MAAM,EAAE;QACfA,KAAG,GAAGC,GAAI,CAAA;AACX,KAAA;AAED,IAAA,MAAM,YAAY,GAAG,IAAI,YAAY,EAAE,CAAA;IACvC,eAAe,CAAC,MAAK;QACnB,YAAY,CAAC,WAAW,EAAE,CAAA;AAC5B,KAAC,CAAC,CAAA;IAEF,OAAO;AACL,QAAA,EAAE,EAAE,CAAiD,KAAY,EAAE,YAAsB,KAAI;YAE3F,MAAM,UAAU,GAAGD,KAAG,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,CAAC,CAAA;YAE9C,OAAO;AACL,gBAAA,SAAS,EAAE,CACT,QAES,KAGN,YAAY,CAAC,GAAG,CAAC,UAAU,CAAC,SAAS,CAAC,QAAe,CAAC,CAAC;aAC7D,CAAA;SACF;QACD,IAAI,EAAE,OACJ,KAAY,EACZ,OAA8B,EAC9B,QAAA,GAA6C,EAAE,KAC7C;AACF,YAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,gBAAgB,CAAC,GAAG,gBAAgB,CAAC,KAAK,GAAG,gBAAgB,CAAA;YAEpF,UAAU,EAAE,KAAK,CAAC,KAAK,EAAE,OAAO,CAAC,CAAA;AACjC,YAAA,OAAOA,KAAG,CAAC,IAAI,CAAC,KAAK,EAAE,OAAQ,EAAE,kBAAkB,CAAC,QAAQ,EAAE,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAA;SACpF;KACF,CAAA;AACH,CAAC;AAED;;;;;;;;AAQG;AACH,SAAS,kBAAkB,CACzB,QAA+B,EAC/B,SAAuC,EACvC,QAA0B,EAAA;IAE1B,OAAO,MAAM,CAAC,gBAAgB,CAC5B;AACE,QAAA,WAAW,EAAE,IAAI;AACjB,QAAA,UAAU,EAAE,SAAS,GAAG,wBAAwB,CAAC,SAAS,CAAC,UAAU,CAAC,GAAG,IAAI;QAC7E,QAAQ;AACR,QAAA,GAAG,QAAQ;KACZ,EACD;AACE,QAAA,SAAS,EAAE;AACT,YAAA,KAAK,EAAE,SAAS;AAChB;AACqD;AACrD,YAAA,UAAU,EAAE,KAAK;AAClB,SAAA;AACF,KAAA,CACF,CAAA;AACH;;;;"}

package/js/directives/infinite-scroll.js

@@ -88,12 +88,12 @@ const infiniteScroll = {
         const xBus = XPlugin.bus;
         state[id] = new IntersectionObserver(([entry]) => {
             if (entry.isIntersecting) {
-                xBus.emit('UserReachedResultsListEnd');
+                void xBus.emit('UserReachedResultsListEnd', undefined);
             }
         }, {
             threshold: 0.99,
             rootMargin,
-            root
+            root,
         });
         state[id].observe(element);
     },
@@ -102,7 +102,7 @@ const infiniteScroll = {
             state[id].disconnect();
             delete state[id];
         }
-    }
+    },
 };
 
 export { infiniteScroll };

package/js/directives/infinite-scroll.js.map

@@ -1 +1 @@
-{"version":3,"file":"infinite-scroll.js","sources":["../../../src/directives/infinite-scroll.ts"],"sourcesContent":["import { Directive } from 'vue';\nimport { XPlugin } from '../plugins';\n\nconst VIEWPORT_ID = 'viewport';\n\n/**\n * A record which contains {@link IntersectionObserver} objects indexed by the ID of the scrollable\n * container.\n */\nconst state: Record<string, IntersectionObserver> = {};\n\n/**\n * Retrieves the root element for the provided ID.\n *\n * @param element - Target element where directive is set.\n * @param id - String identifier.\n * @returns HTMLElement or null.\n */\nfunction getRoot(element: HTMLElement, id: string): HTMLElement | null {\n  switch (id) {\n    case 'html':\n      return null;\n    case 'body':\n      return document.body;\n    case VIEWPORT_ID:\n      return null;\n    default:\n      return element.closest(`#${id}`)!;\n  }\n}\n\n/**\n * Custom Vue directive for infinite scroll.\n *\n * This directive uses the IntersectionObserver API to handle the intersection between the\n * children and the scrollable container. The content of the children moves up on scroll and when it\n * reaches the end, the IntersectionObserver triggers that both elements are intersecting.\n *\n * How it works.\n *\n * As a summary, if the scroll reaches the end, `UserReachedResultsListEnd` event is emitted to the\n * xBus. If you provide a margin in the directive options, this function is triggered when the\n * scroll reaches the end minus that amount of pixels. A default margin of 200px is set.\n *\n * Usage.\n *\n * The directive has to be set in the target element. It can receive an argument which will be used\n * to determine the scrollable container. Possible values:\n * `html`: will set the <html> as the scrollable container.\n * `body`: will set the <body> as the scrollable container.\n * ID: will set the DOM element with the provided id as the scrollable container.\n *\n * If no argument is provided the scrollable container fallbacks to the viewport.\n *\n * @example How to use it.\n *\n * ```html\n *  <ResultsList v-infinite-scroll:html>\n * ```\n *\n * ```html\n *  <ResultsList v-infinite-scroll:body>\n * ```\n *\n * ```html\n *  <BaseScroll id='scroll-test'>\n *    <ResultsList v-infinite-scroll:scroll-test>\n *  </BaseScroll>\n * ```\n *\n * ```html\n *  <ResultsList v-infinite-scroll=\"{ margin: 40 }\">\n * ```\n *\n * @public\n */\nexport const infiniteScroll: Directive<HTMLElement, { margin: number }> = {\n  mounted(element, { arg: id = VIEWPORT_ID, value: { margin = 200 } = {} }) {\n    /*\n     * This hack allows the root element to always contain the observed element.\n     * Not overpass the top margin more than 1700000 because it doesn't work in Android chrome\n     */\n    const rootMargin = `1000000% 0px ${margin}px 0px`;\n    const root = getRoot(element, id);\n    const xBus = XPlugin.bus;\n\n    state[id] = new IntersectionObserver(\n      ([entry]) => {\n        if (entry.isIntersecting) {\n          xBus.emit('UserReachedResultsListEnd');\n        }\n      },\n      {\n        threshold: 0.99,\n        rootMargin,\n        root\n      }\n    );\n\n    state[id].observe(element);\n  },\n  unmounted(_, { arg: id = VIEWPORT_ID }) {\n    if (state[id]) {\n      state[id].disconnect();\n      delete state[id];\n    }\n  }\n};\n"],"names":[],"mappings":";;;;;;;;;AAGA,MAAM,WAAW,GAAG,UAAU,CAAC;AAE/B;;;AAGG;AACH,MAAM,KAAK,GAAyC,EAAE,CAAC;AAEvD;;;;;;AAMG;AACH,SAAS,OAAO,CAAC,OAAoB,EAAE,EAAU,EAAA;AAC/C,IAAA,QAAQ,EAAE;AACR,QAAA,KAAK,MAAM;AACT,YAAA,OAAO,IAAI,CAAC;AACd,QAAA,KAAK,MAAM;YACT,OAAO,QAAQ,CAAC,IAAI,CAAC;AACvB,QAAA,KAAK,WAAW;AACd,YAAA,OAAO,IAAI,CAAC;AACd,QAAA;YACE,OAAO,OAAO,CAAC,OAAO,CAAC,IAAI,EAAE,CAAA,CAAE,CAAE,CAAC;AACrC,KAAA;AACH,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CG;AACU,MAAA,cAAc,GAA+C;AACxE,IAAA,OAAO,CAAC,OAAO,EAAE,EAAE,GAAG,EAAE,EAAE,GAAG,WAAW,EAAE,KAAK,EAAE,EAAE,MAAM,GAAG,GAAG,EAAE,GAAG,EAAE,EAAE,EAAA;AACtE;;;AAGG;AACH,QAAA,MAAM,UAAU,GAAG,CAAgB,aAAA,EAAA,MAAM,QAAQ,CAAC;QAClD,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;AAClC,QAAA,MAAM,IAAI,GAAG,OAAO,CAAC,GAAG,CAAC;AAEzB,QAAA,KAAK,CAAC,EAAE,CAAC,GAAG,IAAI,oBAAoB,CAClC,CAAC,CAAC,KAAK,CAAC,KAAI;YACV,IAAI,KAAK,CAAC,cAAc,EAAE;AACxB,gBAAA,IAAI,CAAC,IAAI,CAAC,2BAA2B,CAAC,CAAC;AACxC,aAAA;AACH,SAAC,EACD;AACE,YAAA,SAAS,EAAE,IAAI;YACf,UAAU;YACV,IAAI;AACL,SAAA,CACF,CAAC;QAEF,KAAK,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;KAC5B;IACD,SAAS,CAAC,CAAC,EAAE,EAAE,GAAG,EAAE,EAAE,GAAG,WAAW,EAAE,EAAA;AACpC,QAAA,IAAI,KAAK,CAAC,EAAE,CAAC,EAAE;AACb,YAAA,KAAK,CAAC,EAAE,CAAC,CAAC,UAAU,EAAE,CAAC;AACvB,YAAA,OAAO,KAAK,CAAC,EAAE,CAAC,CAAC;AAClB,SAAA;KACF;;;;;"}
+{"version":3,"file":"infinite-scroll.js","sources":["../../../src/directives/infinite-scroll.ts"],"sourcesContent":["import type { Directive } from 'vue'\nimport { XPlugin } from '../plugins'\n\nconst VIEWPORT_ID = 'viewport'\n\n/**\n * A record which contains {@link IntersectionObserver} objects indexed by the ID of the scrollable\n * container.\n */\nconst state: Record<string, IntersectionObserver> = {}\n\n/**\n * Retrieves the root element for the provided ID.\n *\n * @param element - Target element where directive is set.\n * @param id - String identifier.\n * @returns HTMLElement or null.\n */\nfunction getRoot(element: HTMLElement, id: string): HTMLElement | null {\n  switch (id) {\n    case 'html':\n      return null\n    case 'body':\n      return document.body\n    case VIEWPORT_ID:\n      return null\n    default:\n      return element.closest(`#${id}`)!\n  }\n}\n\n/**\n * Custom Vue directive for infinite scroll.\n *\n * This directive uses the IntersectionObserver API to handle the intersection between the\n * children and the scrollable container. The content of the children moves up on scroll and when it\n * reaches the end, the IntersectionObserver triggers that both elements are intersecting.\n *\n * How it works.\n *\n * As a summary, if the scroll reaches the end, `UserReachedResultsListEnd` event is emitted to the\n * xBus. If you provide a margin in the directive options, this function is triggered when the\n * scroll reaches the end minus that amount of pixels. A default margin of 200px is set.\n *\n * Usage.\n *\n * The directive has to be set in the target element. It can receive an argument which will be used\n * to determine the scrollable container. Possible values:\n * `html`: will set the <html> as the scrollable container.\n * `body`: will set the <body> as the scrollable container.\n * ID: will set the DOM element with the provided id as the scrollable container.\n *\n * If no argument is provided the scrollable container fallbacks to the viewport.\n *\n * @example How to use it.\n *\n * ```html\n *  <ResultsList v-infinite-scroll:html>\n * ```\n *\n * ```html\n *  <ResultsList v-infinite-scroll:body>\n * ```\n *\n * ```html\n *  <BaseScroll id='scroll-test'>\n *    <ResultsList v-infinite-scroll:scroll-test>\n *  </BaseScroll>\n * ```\n *\n * ```html\n *  <ResultsList v-infinite-scroll=\"{ margin: 40 }\">\n * ```\n *\n * @public\n */\nexport const infiniteScroll: Directive<HTMLElement, { margin: number }> = {\n  mounted(element, { arg: id = VIEWPORT_ID, value: { margin = 200 } = {} }) {\n    /*\n     * This hack allows the root element to always contain the observed element.\n     * Not overpass the top margin more than 1700000 because it doesn't work in Android chrome\n     */\n    const rootMargin = `1000000% 0px ${margin}px 0px`\n    const root = getRoot(element, id)\n    const xBus = XPlugin.bus\n\n    state[id] = new IntersectionObserver(\n      ([entry]) => {\n        if (entry.isIntersecting) {\n          void xBus.emit('UserReachedResultsListEnd', undefined)\n        }\n      },\n      {\n        threshold: 0.99,\n        rootMargin,\n        root,\n      },\n    )\n\n    state[id].observe(element)\n  },\n  unmounted(_, { arg: id = VIEWPORT_ID }) {\n    if (state[id]) {\n      state[id].disconnect()\n      delete state[id]\n    }\n  },\n}\n"],"names":[],"mappings":";;;;;;;;;AAGA,MAAM,WAAW,GAAG,UAAU,CAAA;AAE9B;;;AAGG;AACH,MAAM,KAAK,GAAyC,EAAE,CAAA;AAEtD;;;;;;AAMG;AACH,SAAS,OAAO,CAAC,OAAoB,EAAE,EAAU,EAAA;AAC/C,IAAA,QAAQ,EAAE;AACR,QAAA,KAAK,MAAM;AACT,YAAA,OAAO,IAAI,CAAA;AACb,QAAA,KAAK,MAAM;YACT,OAAO,QAAQ,CAAC,IAAI,CAAA;AACtB,QAAA,KAAK,WAAW;AACd,YAAA,OAAO,IAAI,CAAA;AACb,QAAA;YACE,OAAO,OAAO,CAAC,OAAO,CAAC,IAAI,EAAE,CAAA,CAAE,CAAE,CAAA;AACpC,KAAA;AACH,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CG;AACU,MAAA,cAAc,GAA+C;AACxE,IAAA,OAAO,CAAC,OAAO,EAAE,EAAE,GAAG,EAAE,EAAE,GAAG,WAAW,EAAE,KAAK,EAAE,EAAE,MAAM,GAAG,GAAG,EAAE,GAAG,EAAE,EAAE,EAAA;AACtE;;;AAGG;AACH,QAAA,MAAM,UAAU,GAAG,CAAgB,aAAA,EAAA,MAAM,QAAQ,CAAA;QACjD,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC,CAAA;AACjC,QAAA,MAAM,IAAI,GAAG,OAAO,CAAC,GAAG,CAAA;AAExB,QAAA,KAAK,CAAC,EAAE,CAAC,GAAG,IAAI,oBAAoB,CAClC,CAAC,CAAC,KAAK,CAAC,KAAI;YACV,IAAI,KAAK,CAAC,cAAc,EAAE;gBACxB,KAAK,IAAI,CAAC,IAAI,CAAC,2BAA2B,EAAE,SAAS,CAAC,CAAA;AACvD,aAAA;AACH,SAAC,EACD;AACE,YAAA,SAAS,EAAE,IAAI;YACf,UAAU;YACV,IAAI;AACL,SAAA,CACF,CAAA;QAED,KAAK,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAA;KAC3B;IACD,SAAS,CAAC,CAAC,EAAE,EAAE,GAAG,EAAE,EAAE,GAAG,WAAW,EAAE,EAAA;AACpC,QAAA,IAAI,KAAK,CAAC,EAAE,CAAC,EAAE;AACb,YAAA,KAAK,CAAC,EAAE,CAAC,CAAC,UAAU,EAAE,CAAA;AACtB,YAAA,OAAO,KAAK,CAAC,EAAE,CAAC,CAAA;AACjB,SAAA;KACF;;;;;"}

package/js/directives/typing.js

@@ -0,0 +1,57 @@
+/**
+ * Typing directive.
+ *
+ * @public
+ */
+const typing = {
+    mounted(el, binding) {
+        execute(el, binding.value);
+    },
+    updated(el, binding) {
+        if (binding.value.text !== binding.oldValue?.text) {
+            clearTimeout(el.__timeoutId);
+            execute(el, binding.value);
+        }
+    },
+    unmounted(el) {
+        clearTimeout(el.__timeoutId);
+    },
+};
+/**
+ * Execute a typing animation in an HTML element.
+ *
+ * @param el - The HTML element where the typing animation will be displayed.
+ * @param options - Options for the behavior of the animation.
+ */
+function execute(el, options) {
+    const { text, speed = 1, targetAttr = '' } = options;
+    if (!text) {
+        console.error('v-typing: "text" is required.');
+        return;
+    }
+    let index = 0;
+    const updateContent = (value) => {
+        if (targetAttr) {
+            el.setAttribute(targetAttr, value);
+        }
+        else {
+            el.innerHTML = value;
+        }
+    };
+    const type = () => {
+        if (index < text.length) {
+            updateContent(text.slice(0, index + 1));
+            index++;
+            el.__timeoutId = setTimeout(type, speed);
+        }
+        else {
+            updateContent(text);
+            clearTimeout(el.__timeoutId);
+            el.__timeoutId = undefined;
+        }
+    };
+    type();
+}
+
+export { typing };
+//# sourceMappingURL=typing.js.map

package/js/directives/typing.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"typing.js","sources":["../../../src/directives/typing.ts"],"sourcesContent":["import type { Directive } from 'vue'\n\n/**\n * TypingOptions interface.\n *\n * @public\n */\nexport interface TypingOptions {\n  /**\n   * The text (plain or html) that will be typed into the target element.\n   */\n  text: string\n  /**\n   * The typing speed in milliseconds per character.\n   *\n   */\n  speed?: number\n  /**\n   * The attribute of the HTML element where the typed text will be placed.\n   * If not specified, the text will be set as content (innerHTML).\n   *\n   * @example 'placeholder'\n   */\n  targetAttr?: string\n}\n\ninterface TypingHTMLElement extends HTMLElement {\n  __timeoutId?: number\n}\n\n/**\n * Typing directive.\n *\n * @public\n */\nexport const typing: Directive<TypingHTMLElement, TypingOptions> = {\n  mounted(el, binding) {\n    execute(el, binding.value)\n  },\n\n  updated(el, binding) {\n    if (binding.value.text !== binding.oldValue?.text) {\n      clearTimeout(el.__timeoutId)\n      execute(el, binding.value)\n    }\n  },\n\n  unmounted(el) {\n    clearTimeout(el.__timeoutId)\n  },\n}\n\n/**\n * Execute a typing animation in an HTML element.\n *\n * @param el - The HTML element where the typing animation will be displayed.\n * @param options - Options for the behavior of the animation.\n */\nfunction execute(el: TypingHTMLElement, options: TypingOptions) {\n  const { text, speed = 1, targetAttr = '' } = options\n\n  if (!text) {\n    console.error('v-typing: \"text\" is required.')\n    return\n  }\n\n  let index = 0\n\n  const updateContent = (value: string) => {\n    if (targetAttr) {\n      el.setAttribute(targetAttr, value)\n    } else {\n      el.innerHTML = value\n    }\n  }\n\n  const type = () => {\n    if (index < text.length) {\n      updateContent(text.slice(0, index + 1))\n      index++\n      el.__timeoutId = setTimeout(type, speed) as unknown as number\n    } else {\n      updateContent(text)\n      clearTimeout(el.__timeoutId)\n      el.__timeoutId = undefined\n    }\n  }\n\n  type()\n}\n"],"names":[],"mappings":"AA8BA;;;;AAIG;AACU,MAAA,MAAM,GAAgD;IACjE,OAAO,CAAC,EAAE,EAAE,OAAO,EAAA;AACjB,QAAA,OAAO,CAAC,EAAE,EAAE,OAAO,CAAC,KAAK,CAAC,CAAA;KAC3B;IAED,OAAO,CAAC,EAAE,EAAE,OAAO,EAAA;QACjB,IAAI,OAAO,CAAC,KAAK,CAAC,IAAI,KAAK,OAAO,CAAC,QAAQ,EAAE,IAAI,EAAE;AACjD,YAAA,YAAY,CAAC,EAAE,CAAC,WAAW,CAAC,CAAA;AAC5B,YAAA,OAAO,CAAC,EAAE,EAAE,OAAO,CAAC,KAAK,CAAC,CAAA;AAC3B,SAAA;KACF;AAED,IAAA,SAAS,CAAC,EAAE,EAAA;AACV,QAAA,YAAY,CAAC,EAAE,CAAC,WAAW,CAAC,CAAA;KAC7B;EACF;AAED;;;;;AAKG;AACH,SAAS,OAAO,CAAC,EAAqB,EAAE,OAAsB,EAAA;AAC5D,IAAA,MAAM,EAAE,IAAI,EAAE,KAAK,GAAG,CAAC,EAAE,UAAU,GAAG,EAAE,EAAE,GAAG,OAAO,CAAA;IAEpD,IAAI,CAAC,IAAI,EAAE;AACT,QAAA,OAAO,CAAC,KAAK,CAAC,+BAA+B,CAAC,CAAA;QAC9C,OAAM;AACP,KAAA;IAED,IAAI,KAAK,GAAG,CAAC,CAAA;AAEb,IAAA,MAAM,aAAa,GAAG,CAAC,KAAa,KAAI;AACtC,QAAA,IAAI,UAAU,EAAE;AACd,YAAA,EAAE,CAAC,YAAY,CAAC,UAAU,EAAE,KAAK,CAAC,CAAA;AACnC,SAAA;AAAM,aAAA;AACL,YAAA,EAAE,CAAC,SAAS,GAAG,KAAK,CAAA;AACrB,SAAA;AACH,KAAC,CAAA;IAED,MAAM,IAAI,GAAG,MAAK;AAChB,QAAA,IAAI,KAAK,GAAG,IAAI,CAAC,MAAM,EAAE;AACvB,YAAA,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC,CAAA;AACvC,YAAA,KAAK,EAAE,CAAA;YACP,EAAE,CAAC,WAAW,GAAG,UAAU,CAAC,IAAI,EAAE,KAAK,CAAsB,CAAA;AAC9D,SAAA;AAAM,aAAA;YACL,aAAa,CAAC,IAAI,CAAC,CAAA;AACnB,YAAA,YAAY,CAAC,EAAE,CAAC,WAAW,CAAC,CAAA;AAC5B,YAAA,EAAE,CAAC,WAAW,GAAG,SAAS,CAAA;AAC3B,SAAA;AACH,KAAC,CAAA;AAED,IAAA,IAAI,EAAE,CAAA;AACR;;;;"}