@empathyco/x-components 3.0.0-alpha.8 → 3.0.0-alpha.82

package/js/components/decorators/bus.decorators.js

@@ -1,7 +1,7 @@
-import { clone } from '../../utils/clone.js';
-import { createDecorator } from 'vue-class-component';
 import { Subscription } from 'rxjs';
 import { filter } from 'rxjs/operators';
+import { createDecorator } from 'vue-class-component';
+import { clone } from '../../utils/clone.js';
 
 /**
  * Creates a subscription to an {@link XEvent}, an array of {@link XEvent} or a component property (
@@ -18,25 +18,23 @@ import { filter } from 'rxjs/operators';
  * beforeDestroy hook.
  * @public
  */
-function XOn(xEvent, metadataFilteringOptions) {
-    if (metadataFilteringOptions === void 0) { metadataFilteringOptions = {}; }
-    return createDecorator(function (options, key) {
+function XOn(xEvent, metadataFilteringOptions = {}) {
+    return createDecorator((options, key) => {
         // eslint-disable-next-line @typescript-eslint/unbound-method
-        var originalCreated = options.created;
+        const originalCreated = options.created;
         Object.assign(options, {
-            created: function () {
-                var _this = this;
-                originalCreated === null || originalCreated === void 0 ? void 0 : originalCreated.apply(this);
-                var componentCreateSubscription = createSubscription.bind(this);
-                var subscriptionMetadata = {
+            created() {
+                originalCreated?.apply(this);
+                const componentCreateSubscription = createSubscription.bind(this);
+                const subscriptionMetadata = {
                     event: [],
                     callback: this[key],
-                    metadataFilteringOptions: metadataFilteringOptions
+                    metadataFilteringOptions
                 };
-                var subscription;
+                let subscription;
                 if (typeof xEvent === 'function') {
-                    this.$watch(function () { return xEvent(_this); }, function (newEvents) {
-                        subscription === null || subscription === void 0 ? void 0 : subscription.unsubscribe();
+                    this.$watch(() => xEvent(this), newEvents => {
+                        subscription?.unsubscribe();
                         subscriptionMetadata.event = newEvents;
                         subscription = componentCreateSubscription(subscriptionMetadata);
                     }, { immediate: true });
@@ -45,7 +43,7 @@ function XOn(xEvent, metadataFilteringOptions) {
                     subscriptionMetadata.event = xEvent;
                     subscription = componentCreateSubscription(subscriptionMetadata);
                 }
-                this.$on('hook:beforeDestroy', function () { return subscription.unsubscribe(); }); // Using Vue
+                this.$on('hook:beforeDestroy', () => subscription.unsubscribe()); // Using Vue
                 // bus to subscribe to the lifecycle hook 'beforeDestroy' instead of 'capturing' the
                 // original component's 'beforeDestroy' method to override it plus calling
                 // originalBeforeDestroy.apply(this) to preserve the existing original hook functionality
@@ -64,21 +62,14 @@ function XOn(xEvent, metadataFilteringOptions) {
  * @internal
  */
 function createSubscription(subscriptionMetadata) {
-    var _this = this;
-    var event = subscriptionMetadata.event, callback = subscriptionMetadata.callback, metadataFilteringOptions = subscriptionMetadata.metadataFilteringOptions;
-    var eventArray = Array.isArray(event) ? event : [event];
-    var subscription = new Subscription();
-    eventArray.forEach(function (xEvent) {
-        subscription.add(_this.$x
+    const { event, callback, metadataFilteringOptions } = subscriptionMetadata;
+    const eventArray = Array.isArray(event) ? event : [event];
+    const subscription = new Subscription();
+    eventArray.forEach(xEvent => {
+        subscription.add(this.$x
             .on(xEvent, true)
-            .pipe(filter(function (_a) {
-            var metadata = _a.metadata;
-            return filterMetadataOptions(metadataFilteringOptions, metadata);
-        }))
-            .subscribe(function (_a) {
-            var eventPayload = _a.eventPayload, metadata = _a.metadata;
-            return callback(eventPayload, metadata);
-        }));
+            .pipe(filter(({ metadata }) => filterMetadataOptions(metadataFilteringOptions, metadata)))
+            .subscribe(({ eventPayload, metadata }) => callback(eventPayload, metadata)));
     });
     return subscription;
 }
@@ -92,8 +83,8 @@ function createSubscription(subscriptionMetadata) {
  */
 function filterMetadataOptions(filteringOptions, eventOptions) {
     return Object.keys(filteringOptions)
-        .filter(function (key) { return filteringOptions[key] !== undefined; })
-        .every(function (key) { return filteringOptions[key] === eventOptions[key]; });
+        .filter(key => filteringOptions[key] !== undefined)
+        .every(key => filteringOptions[key] === eventOptions[key]);
 }
 /**
  * Emits the provided event whenever the decorated property changes.
@@ -103,18 +94,16 @@ function filterMetadataOptions(filteringOptions, eventOptions) {
  * @returns Decorator that makes the component emit an event when the decorated property changes.
  * @public
  */
-function XEmit(xEvent, _a) {
-    var _b = _a === void 0 ? {} : _a, _c = _b.immediate, immediate = _c === void 0 ? true : _c, _d = _b.deep, deep = _d === void 0 ? false : _d;
-    return createDecorator(function (options, key) {
+function XEmit(xEvent, { immediate = true, deep = false } = {}) {
+    return createDecorator((options, key) => {
         // eslint-disable-next-line @typescript-eslint/unbound-method
-        var originalCreated = options.created;
+        const originalCreated = options.created;
         options.created = function () {
-            var _this = this;
-            originalCreated === null || originalCreated === void 0 ? void 0 : originalCreated.apply(this);
+            originalCreated?.apply(this);
             if (this[key] !== undefined) {
-                this.$watch(key, function (newValue) {
-                    _this.$x.emit(xEvent, typeof newValue === 'object' && newValue !== null ? clone(newValue) : newValue);
-                }, { immediate: immediate, deep: deep });
+                this.$watch(key, newValue => {
+                    this.$x.emit(xEvent, typeof newValue === 'object' && newValue !== null ? clone(newValue) : newValue);
+                }, { immediate, deep });
             }
         };
     });

package/js/components/decorators/bus.decorators.js.map

@@ -1 +1 @@
-{"version":3,"file":"bus.decorators.js","sources":["../../../../src/components/decorators/bus.decorators.ts"],"sourcesContent":["import { Subscription } from 'rxjs';\nimport { filter } from 'rxjs/operators';\nimport Vue, { WatchOptions } from 'vue';\nimport { createDecorator } from 'vue-class-component';\nimport { clone } from '../../utils/clone';\nimport { AnyFunction, DecoratorFor } from '../../utils/types';\nimport { XEvent, XEventPayload } from '../../wiring/events.types';\nimport { WireMetadata } from '../../wiring/wiring.types';\n\n/**\n * Creates a subscription to an {@link XEvent}, an array of {@link XEvent} or a component property (\n * reacting to its changes via a watcher) filtering out the passed metadata, if any, and\n * un-subscribes on the beforeDestroy hook.\n *\n * @remarks\n * The decorated property needs to be public for type inference to work.\n *\n * @param xEvent - The {@link XEvent}, an array of {@link XEvent} or a component property.\n * @param metadataFilteringOptions - The {@link WireMetadata} options to filter out a callback\n * execution.\n * @returns Decorator that creates a subscription to an {@link XEvent} and un-subscribes on the\n * beforeDestroy hook.\n * @public\n */\nexport function XOn<Event extends XEvent>(\n  xEvent: Event | Event[] | ((component: Vue) => Event | Event[]),\n  metadataFilteringOptions: Partial<WireMetadata> = {}\n): DecoratorFor<(payload: XEventPayload<Event>, metadata: WireMetadata) => void> {\n  return createDecorator((options, key) => {\n    // eslint-disable-next-line @typescript-eslint/unbound-method\n    const originalCreated = options.created;\n    Object.assign(options, {\n      created(this: Vue) {\n        originalCreated?.apply(this);\n        const componentCreateSubscription = createSubscription.bind(this);\n        const subscriptionMetadata: SubscriptionMetadata<Event> = {\n          event: [],\n          callback: (this as any)[key], // `this` isn't correctly typed here\n          metadataFilteringOptions\n        };\n\n        let subscription: Subscription;\n        if (typeof xEvent === 'function') {\n          this.$watch(\n            () => xEvent(this),\n            newEvents => {\n              subscription?.unsubscribe();\n              subscriptionMetadata.event = newEvents;\n              subscription = componentCreateSubscription(subscriptionMetadata);\n            },\n            { immediate: true }\n          );\n        } else {\n          subscriptionMetadata.event = xEvent;\n          subscription = componentCreateSubscription(subscriptionMetadata);\n        }\n\n        this.$on('hook:beforeDestroy', () => subscription.unsubscribe()); // Using Vue\n        // bus to subscribe to the lifecycle hook 'beforeDestroy' instead of 'capturing' the\n        // original component's 'beforeDestroy' method to override it plus calling\n        // originalBeforeDestroy.apply(this) to preserve the existing original hook functionality\n      }\n    });\n  });\n}\n\n/**\n * Create a subscription for the given events executing the passed callback and filtering out based\n * on the passed metadata options.\n *\n * @param this - The vue component.\n * @param subscriptionMetadata - The {@link SubscriptionMetadata}.\n * @returns A\n * {@link https://www.learnrxjs.io/learn-rxjs/concepts/rxjs-primer#subscription | subscription}.\n * @internal\n */\nfunction createSubscription<Event extends XEvent>(\n  this: Vue,\n  subscriptionMetadata: SubscriptionMetadata<Event>\n): Subscription {\n  const { event, callback, metadataFilteringOptions } = subscriptionMetadata;\n  const eventArray = Array.isArray(event) ? event : [event];\n  const subscription = new Subscription();\n  eventArray.forEach(xEvent => {\n    subscription.add(\n      this.$x\n        .on(xEvent, true)\n        .pipe(filter(({ metadata }) => filterMetadataOptions(metadataFilteringOptions, metadata)))\n        .subscribe(({ eventPayload, metadata }) => callback(eventPayload, metadata))\n    );\n  });\n  return subscription;\n}\n\n/**\n * Checks if the metadata options passed to the decorator match the metadata of the emitted event.\n *\n * @param filteringOptions - The decorator options.\n * @param eventOptions - The emitted event metadata.\n * @returns True if options are empty or match the metadata.\n * @internal\n */\nfunction filterMetadataOptions<WireMetadataKey extends keyof WireMetadata>(\n  filteringOptions: Partial<WireMetadata>,\n  eventOptions: WireMetadata\n): boolean {\n  return (Object.keys(filteringOptions) as WireMetadataKey[])\n    .filter(key => filteringOptions[key] !== undefined)\n    .every(key => filteringOptions[key] === eventOptions[key]);\n}\n\n/**\n * The subscription metadata containing an/a list of {@link XEvent}, the callback function to\n * execute and the metadataOptions to filter out the execution of the callback.\n *\n * @internal\n */\ninterface SubscriptionMetadata<Event extends XEvent> {\n  /**\n   * An {@link XEvent} or a list of them.\n   */\n  event: Event | Event[];\n  /**\n   * A callback function to execute in the subscription.\n   */\n  callback: AnyFunction;\n  /**\n   * The metadataFilteringOptions to filter out the execution of the callback.\n   */\n  metadataFilteringOptions: Partial<WireMetadata>;\n}\n\n/**\n * Emits the provided event whenever the decorated property changes.\n *\n * @param xEvent - The event to emit.\n * @param watcherOptions - Options for Vue's watcher.\n * @returns Decorator that makes the component emit an event when the decorated property changes.\n * @public\n */\nexport function XEmit<Event extends XEvent>(\n  xEvent: Event,\n  { immediate = true, deep = false }: WatchOptions = {}\n): DecoratorFor<XEventPayload<Event> | undefined> {\n  return createDecorator((options, key) => {\n    // eslint-disable-next-line @typescript-eslint/unbound-method\n    const originalCreated = options.created;\n    options.created = function (this: Vue) {\n      originalCreated?.apply(this);\n      if ((this as any)[key] !== undefined) {\n        this.$watch(\n          key,\n          newValue => {\n            this.$x.emit(\n              xEvent,\n              typeof newValue === 'object' && newValue !== null ? clone(newValue) : newValue\n            );\n          },\n          { immediate, deep }\n        );\n      }\n    };\n  });\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"bus.decorators.js","sources":["../../../../src/components/decorators/bus.decorators.ts"],"sourcesContent":["import { AnyFunction } from '@empathyco/x-utils';\nimport { Subscription } from 'rxjs';\nimport { filter } from 'rxjs/operators';\nimport Vue, { WatchOptions } from 'vue';\nimport { createDecorator } from 'vue-class-component';\nimport { clone } from '../../utils/clone';\nimport { DecoratorFor } from '../../utils/types';\nimport { XEvent, XEventPayload } from '../../wiring/events.types';\nimport { WireMetadata } from '../../wiring/wiring.types';\n\n/**\n * Creates a subscription to an {@link XEvent}, an array of {@link XEvent} or a component property (\n * reacting to its changes via a watcher) filtering out the passed metadata, if any, and\n * un-subscribes on the beforeDestroy hook.\n *\n * @remarks\n * The decorated property needs to be public for type inference to work.\n *\n * @param xEvent - The {@link XEvent}, an array of {@link XEvent} or a component property.\n * @param metadataFilteringOptions - The {@link WireMetadata} options to filter out a callback\n * execution.\n * @returns Decorator that creates a subscription to an {@link XEvent} and un-subscribes on the\n * beforeDestroy hook.\n * @public\n */\nexport function XOn<Event extends XEvent>(\n  xEvent: Event | Event[] | ((component: Vue) => Event | Event[]),\n  metadataFilteringOptions: Partial<WireMetadata> = {}\n): DecoratorFor<(payload: XEventPayload<Event>, metadata: WireMetadata) => void> {\n  return createDecorator((options, key) => {\n    // eslint-disable-next-line @typescript-eslint/unbound-method\n    const originalCreated = options.created;\n    Object.assign(options, {\n      created(this: Vue) {\n        originalCreated?.apply(this);\n        const componentCreateSubscription = createSubscription.bind(this);\n        const subscriptionMetadata: SubscriptionMetadata<Event> = {\n          event: [],\n          callback: (this as any)[key], // `this` isn't correctly typed here\n          metadataFilteringOptions\n        };\n\n        let subscription: Subscription;\n        if (typeof xEvent === 'function') {\n          this.$watch(\n            () => xEvent(this),\n            newEvents => {\n              subscription?.unsubscribe();\n              subscriptionMetadata.event = newEvents;\n              subscription = componentCreateSubscription(subscriptionMetadata);\n            },\n            { immediate: true }\n          );\n        } else {\n          subscriptionMetadata.event = xEvent;\n          subscription = componentCreateSubscription(subscriptionMetadata);\n        }\n\n        this.$on('hook:beforeDestroy', () => subscription.unsubscribe()); // Using Vue\n        // bus to subscribe to the lifecycle hook 'beforeDestroy' instead of 'capturing' the\n        // original component's 'beforeDestroy' method to override it plus calling\n        // originalBeforeDestroy.apply(this) to preserve the existing original hook functionality\n      }\n    });\n  });\n}\n\n/**\n * Create a subscription for the given events executing the passed callback and filtering out based\n * on the passed metadata options.\n *\n * @param this - The vue component.\n * @param subscriptionMetadata - The {@link SubscriptionMetadata}.\n * @returns A\n * {@link https://www.learnrxjs.io/learn-rxjs/concepts/rxjs-primer#subscription | subscription}.\n * @internal\n */\nfunction createSubscription<Event extends XEvent>(\n  this: Vue,\n  subscriptionMetadata: SubscriptionMetadata<Event>\n): Subscription {\n  const { event, callback, metadataFilteringOptions } = subscriptionMetadata;\n  const eventArray = Array.isArray(event) ? event : [event];\n  const subscription = new Subscription();\n  eventArray.forEach(xEvent => {\n    subscription.add(\n      this.$x\n        .on(xEvent, true)\n        .pipe(filter(({ metadata }) => filterMetadataOptions(metadataFilteringOptions, metadata)))\n        .subscribe(({ eventPayload, metadata }) => callback(eventPayload, metadata))\n    );\n  });\n  return subscription;\n}\n\n/**\n * Checks if the metadata options passed to the decorator match the metadata of the emitted event.\n *\n * @param filteringOptions - The decorator options.\n * @param eventOptions - The emitted event metadata.\n * @returns True if options are empty or match the metadata.\n * @internal\n */\nfunction filterMetadataOptions<WireMetadataKey extends keyof WireMetadata>(\n  filteringOptions: Partial<WireMetadata>,\n  eventOptions: WireMetadata\n): boolean {\n  return (Object.keys(filteringOptions) as WireMetadataKey[])\n    .filter(key => filteringOptions[key] !== undefined)\n    .every(key => filteringOptions[key] === eventOptions[key]);\n}\n\n/**\n * The subscription metadata containing an/a list of {@link XEvent}, the callback function to\n * execute and the metadataOptions to filter out the execution of the callback.\n *\n * @internal\n */\ninterface SubscriptionMetadata<Event extends XEvent> {\n  /**\n   * An {@link XEvent} or a list of them.\n   */\n  event: Event | Event[];\n  /**\n   * A callback function to execute in the subscription.\n   */\n  callback: AnyFunction;\n  /**\n   * The metadataFilteringOptions to filter out the execution of the callback.\n   */\n  metadataFilteringOptions: Partial<WireMetadata>;\n}\n\n/**\n * Emits the provided event whenever the decorated property changes.\n *\n * @param xEvent - The event to emit.\n * @param watcherOptions - Options for Vue's watcher.\n * @returns Decorator that makes the component emit an event when the decorated property changes.\n * @public\n */\nexport function XEmit<Event extends XEvent>(\n  xEvent: Event,\n  { immediate = true, deep = false }: WatchOptions = {}\n): DecoratorFor<XEventPayload<Event> | undefined> {\n  return createDecorator((options, key) => {\n    // eslint-disable-next-line @typescript-eslint/unbound-method\n    const originalCreated = options.created;\n    options.created = function (this: Vue) {\n      originalCreated?.apply(this);\n      if ((this as any)[key] !== undefined) {\n        this.$watch(\n          key,\n          newValue => {\n            this.$x.emit(\n              xEvent,\n              typeof newValue === 'object' && newValue !== null ? clone(newValue) : newValue\n            );\n          },\n          { immediate, deep }\n        );\n      }\n    };\n  });\n}\n"],"names":[],"mappings":"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"}

package/js/components/decorators/debounce.decorators.js

@@ -1,10 +1,11 @@
-import { __spreadArrays } from 'tslib';
-import { debounce } from '../../utils/debounce.js';
 import { createDecorator } from 'vue-class-component';
+import { debounce } from '../../utils/debounce.js';
 
 /**
  * Adds debounce to the method that the decorator is applied to.
  *
+ * @remarks Pending debounced execution is cancelled when the component is destroyed.
+ *
  * @param debounceTimeInMs - The time of debounce in ms.
  * @param debounceOptions - The options for the debounce strategy.
  *
@@ -12,18 +13,21 @@ import { createDecorator } from 'vue-class-component';
  *
  * @public
  */
-function Debounce(debounceTimeInMs, debounceOptions) {
-    if (debounceOptions === void 0) { debounceOptions = {}; }
-    return createDecorator(function (options, key) {
-        var originalMethod = options.methods[key];
-        var debouncedMethod = debounce(function (context, args) { return originalMethod.call.apply(originalMethod, __spreadArrays([context], args)); }, debounceTimeInMs, debounceOptions);
-        options.methods[key] = function debouncedWrapper() {
-            var args = [];
-            for (var _i = 0; _i < arguments.length; _i++) {
-                args[_i] = arguments[_i];
-            }
+function Debounce(debounceTimeInMs, debounceOptions = {}) {
+    return createDecorator((options, key) => {
+        const originalMethod = options.methods[key];
+        const debouncedMethod = debounce((context, args) => originalMethod.call(context, ...args), debounceTimeInMs, debounceOptions);
+        options.methods[key] = function debouncedWrapper(...args) {
             debouncedMethod(this, args);
         };
+        // eslint-disable-next-line @typescript-eslint/unbound-method
+        const originalBeforeDestroy = options.beforeDestroy;
+        Object.assign(options, {
+            beforeDestroy() {
+                originalBeforeDestroy?.apply(this);
+                debouncedMethod.cancel();
+            }
+        });
     });
 }
 

package/js/components/decorators/debounce.decorators.js.map

@@ -1 +1 @@
-{"version":3,"file":"debounce.decorators.js","sources":["../../../../src/components/decorators/debounce.decorators.ts"],"sourcesContent":["import { createDecorator } from 'vue-class-component';\nimport { debounce } from '../../utils/debounce';\nimport { AnyFunction, DebounceOptions, DecoratorFor } from '../../utils/types';\n\n/**\n * Adds debounce to the method that the decorator is applied to.\n *\n * @param debounceTimeInMs - The time of debounce in ms.\n * @param debounceOptions - The options for the debounce strategy.\n *\n * @returns Decorator that applies debounce.\n *\n * @public\n */\nexport function Debounce(\n  debounceTimeInMs: number,\n  debounceOptions: DebounceOptions = {}\n): DecoratorFor<AnyFunction> {\n  return createDecorator((options, key) => {\n    const originalMethod = options.methods![key];\n    const debouncedMethod = debounce(\n      (context: Vue, args: unknown[]) => originalMethod.call(context, ...args),\n      debounceTimeInMs,\n      debounceOptions\n    );\n\n    options.methods![key] = function debouncedWrapper(...args: unknown[]) {\n      debouncedMethod(this, args);\n    };\n  });\n}\n"],"names":[],"mappings":";;;;AAIA;;;;;;;;;;SAUgB,QAAQ,CACtB,gBAAwB,EACxB,eAAqC;IAArC,gCAAA,EAAA,oBAAqC;IAErC,OAAO,eAAe,CAAC,UAAC,OAAO,EAAE,GAAG;QAClC,IAAM,cAAc,GAAG,OAAO,CAAC,OAAQ,CAAC,GAAG,CAAC,CAAC;QAC7C,IAAM,eAAe,GAAG,QAAQ,CAC9B,UAAC,OAAY,EAAE,IAAe,IAAK,OAAA,cAAc,CAAC,IAAI,OAAnB,cAAc,kBAAM,OAAO,GAAK,IAAI,KAAC,EACxE,gBAAgB,EAChB,eAAe,CAChB,CAAC;QAEF,OAAO,CAAC,OAAQ,CAAC,GAAG,CAAC,GAAG,SAAS,gBAAgB;YAAC,cAAkB;iBAAlB,UAAkB,EAAlB,qBAAkB,EAAlB,IAAkB;gBAAlB,yBAAkB;;YAClE,eAAe,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;SAC7B,CAAC;KACH,CAAC,CAAC;AACL;;;;"}
+{"version":3,"file":"debounce.decorators.js","sources":["../../../../src/components/decorators/debounce.decorators.ts"],"sourcesContent":["import { AnyFunction } from '@empathyco/x-utils';\nimport { createDecorator } from 'vue-class-component';\nimport { debounce } from '../../utils/debounce';\nimport { DebounceOptions, DecoratorFor } from '../../utils/types';\n\n/**\n * Adds debounce to the method that the decorator is applied to.\n *\n * @remarks Pending debounced execution is cancelled when the component is destroyed.\n *\n * @param debounceTimeInMs - The time of debounce in ms.\n * @param debounceOptions - The options for the debounce strategy.\n *\n * @returns Decorator that applies debounce.\n *\n * @public\n */\nexport function Debounce(\n  debounceTimeInMs: number,\n  debounceOptions: DebounceOptions = {}\n): DecoratorFor<AnyFunction> {\n  return createDecorator((options, key) => {\n    const originalMethod = options.methods![key];\n    const debouncedMethod = debounce(\n      (context: Vue, args: unknown[]) => originalMethod.call(context, ...args),\n      debounceTimeInMs,\n      debounceOptions\n    );\n\n    options.methods![key] = function debouncedWrapper(...args: unknown[]) {\n      debouncedMethod(this, args);\n    };\n\n    // eslint-disable-next-line @typescript-eslint/unbound-method\n    const originalBeforeDestroy = options.beforeDestroy;\n    Object.assign(options, {\n      beforeDestroy(this: Vue) {\n        originalBeforeDestroy?.apply(this);\n        debouncedMethod.cancel();\n      }\n    });\n  });\n}\n"],"names":[],"mappings":";;;AAKA;;;;;;;;;;;;SAYgB,QAAQ,CACtB,gBAAwB,EACxB,kBAAmC,EAAE;IAErC,OAAO,eAAe,CAAC,CAAC,OAAO,EAAE,GAAG;QAClC,MAAM,cAAc,GAAG,OAAO,CAAC,OAAQ,CAAC,GAAG,CAAC,CAAC;QAC7C,MAAM,eAAe,GAAG,QAAQ,CAC9B,CAAC,OAAY,EAAE,IAAe,KAAK,cAAc,CAAC,IAAI,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,EACxE,gBAAgB,EAChB,eAAe,CAChB,CAAC;QAEF,OAAO,CAAC,OAAQ,CAAC,GAAG,CAAC,GAAG,SAAS,gBAAgB,CAAC,GAAG,IAAe;YAClE,eAAe,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;SAC7B,CAAC;;QAGF,MAAM,qBAAqB,GAAG,OAAO,CAAC,aAAa,CAAC;QACpD,MAAM,CAAC,MAAM,CAAC,OAAO,EAAE;YACrB,aAAa;gBACX,qBAAqB,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;gBACnC,eAAe,CAAC,MAAM,EAAE,CAAC;aAC1B;SACF,CAAC,CAAC;KACJ,CAAC,CAAC;AACL;;;;"}

package/js/components/decorators/injection.consts.js

@@ -1,9 +1,9 @@
 /**
- * It's used to identify the provided and injected `searchItems`.
+ * It's used to identify the provided and injected `items`.
  *
  * @internal
  */
-var SEARCH_ITEMS_KEY = 'searchItems';
+const LIST_ITEMS_KEY = 'listItems';
 
-export { SEARCH_ITEMS_KEY };
+export { LIST_ITEMS_KEY };
 //# sourceMappingURL=injection.consts.js.map

package/js/components/decorators/injection.consts.js.map

@@ -1 +1 @@
-{"version":3,"file":"injection.consts.js","sources":["../../../../src/components/decorators/injection.consts.ts"],"sourcesContent":["import { SearchItem } from '../../utils/types';\nimport { XInjectKey } from './injection.decorators';\n\n/**\n * It's used to identify the provided and injected `searchItems`.\n *\n * @internal\n */\nexport const SEARCH_ITEMS_KEY: XInjectKey<SearchItem[] | undefined> = 'searchItems';\n"],"names":[],"mappings":"AAGA;;;;;IAKa,gBAAgB,GAAyC;;;;"}
+{"version":3,"file":"injection.consts.js","sources":["../../../../src/components/decorators/injection.consts.ts"],"sourcesContent":["import { ListItem } from '../../utils/types';\nimport { XInjectKey } from './injection.decorators';\n\n/**\n * It's used to identify the provided and injected `items`.\n *\n * @internal\n */\nexport const LIST_ITEMS_KEY: XInjectKey<ListItem[] | undefined> = 'listItems';\n"],"names":[],"mappings":"AAGA;;;;;MAKa,cAAc,GAAuC;;;;"}

package/js/components/decorators/injection.decorators.js

@@ -1,5 +1,5 @@
-import { arrayToObject } from '../../utils/array.js';
 import { createDecorator } from 'vue-class-component';
+import { arrayToObject } from '../../utils/array.js';
 
 /**
  * Generates a provide function that returns an object with the injectable value returned in a
@@ -28,11 +28,11 @@ import { createDecorator } from 'vue-class-component';
  * @public
  */
 function XProvide(provideKey) {
-    return createDecorator(function (options, componentKey) {
-        var previousProvide = options.provide;
+    return createDecorator((options, componentKey) => {
+        const previousProvide = options.provide;
         options.provide = function () {
-            var previousProvideObject = getPreviousProvideObject(previousProvide, this);
-            var newProvideObject = getNewProvideObject(provideKey, componentKey, this);
+            const previousProvideObject = getPreviousProvideObject(previousProvide, this);
+            const newProvideObject = getNewProvideObject(provideKey, componentKey, this);
             return Object.assign(previousProvideObject, newProvideObject);
         };
     });
@@ -72,14 +72,13 @@ function XProvide(provideKey) {
  * @public
  */
 function XInject(injectKey, defaultValue) {
-    return createDecorator(function (options, componentKey) {
-        var _a;
-        var privateComponentKey = "_x-inject_" + componentKey;
-        var previousInjectObject = getPreviousInjectObject(options.inject);
-        var newInjectObject = getNewInjectObject(injectKey, privateComponentKey, defaultValue);
+    return createDecorator((options, componentKey) => {
+        const privateComponentKey = `_x-inject_${componentKey}`;
+        const previousInjectObject = getPreviousInjectObject(options.inject);
+        const newInjectObject = getNewInjectObject(injectKey, privateComponentKey, defaultValue);
         options.inject = Object.assign(previousInjectObject, newInjectObject);
-        var computedToPrivateProperty = getComputedProperty(componentKey, privateComponentKey);
-        options.computed = Object.assign((_a = options.computed) !== null && _a !== void 0 ? _a : {}, computedToPrivateProperty);
+        const computedToPrivateProperty = getComputedProperty(componentKey, privateComponentKey);
+        options.computed = Object.assign(options.computed ?? {}, computedToPrivateProperty);
     });
 }
 /**
@@ -100,7 +99,7 @@ function getPreviousProvideObject(previousProvide, componentInstance) {
         return previousProvide.call(componentInstance);
     }
     else {
-        return previousProvide !== null && previousProvide !== void 0 ? previousProvide : {};
+        return previousProvide ?? {};
     }
 }
 /**
@@ -116,14 +115,13 @@ function getPreviousProvideObject(previousProvide, componentInstance) {
  * getter.
  */
 function getNewProvideObject(provideKey, componentKey, componentInstance) {
-    var _a;
-    return _a = {},
-        _a[provideKey] = {
+    return {
+        [provideKey]: {
             get value() {
                 return componentInstance[componentKey];
             }
-        },
-        _a;
+        }
+    };
 }
 /**
  * This function returns the previous inject config as an object. This will be used to merge it with
@@ -144,7 +142,7 @@ function getPreviousInjectObject(previousInject) {
         return arrayToObject(previousInject);
     }
     else {
-        return previousInject !== null && previousInject !== void 0 ? previousInject : {};
+        return previousInject ?? {};
     }
 }
 /**
@@ -160,8 +158,7 @@ function getPreviousInjectObject(previousInject) {
  * @returns The object with the inject configuration.
  */
 function getNewInjectObject(injectKey, componentKey, defaultValue) {
-    var _a;
-    return _a = {}, _a[componentKey] = { from: injectKey, default: { value: defaultValue } }, _a;
+    return { [componentKey]: { from: injectKey, default: { value: defaultValue } } };
 }
 /**
  * This function returns the computed configuration for bypass the `value` of the provide
@@ -175,12 +172,11 @@ function getNewInjectObject(injectKey, componentKey, defaultValue) {
  * @returns The computed config to assign/merge with the component options.
  */
 function getComputedProperty(computedKey, privateComponentKey) {
-    var _a;
-    return _a = {},
-        _a[computedKey] = function () {
+    return {
+        [computedKey]: function () {
             return this[privateComponentKey].value;
-        },
-        _a;
+        }
+    };
 }
 /**
  * Type guard to check if a provide configuration is a function.

package/js/components/decorators/injection.decorators.js.map

@@ -1 +1 @@
-{"version":3,"file":"injection.decorators.js","sources":["../../../../src/components/decorators/injection.decorators.ts"],"sourcesContent":["import Vue, { ComponentOptions } from 'vue';\nimport { createDecorator } from 'vue-class-component';\nimport { arrayToObject } from '../../utils/array';\nimport { DecoratorFor } from '../../utils/types';\n\n/**\n * The type of the Vue Component provide configuration, narrowed to the object type.\n *\n * @internal\n */\n// eslint-disable-next-line @typescript-eslint/ban-types\ntype ProvideObjectConfig = Exclude<ComponentOptions<Vue>['provide'], (() => object) | undefined>;\n\n/**\n * The type of the Vue Component inject configuration, narrowed to the object type.\n *\n * @internal\n */\ntype InjectObjectConfig = Exclude<ComponentOptions<Vue>['inject'], string[] | undefined>;\n\n/**\n * Type of the key passed to {@link XProvide} and {@link XInject} to be type-safe. With this type\n * you can declare the type of the injected value directly in the injection key.\n *\n * @example\n * `const myKey: XInjectKey<Filter> = 'myFilter';`\n * `@XInject(myKey)`\n *\n * @public\n */\n// eslint-disable-next-line @typescript-eslint/no-unused-vars-experimental\nexport interface XInjectKey<Type> extends String {}\n\n/**\n * The union type for the different functions in this module.\n *\n * @internal\n */\ntype AnyInjectKey<Type> = XInjectKey<Type> | string;\n\n/**\n * Generates a provide function that returns an object with the injectable value returned in a\n * getter to keep its reactivity, using the default\n * {@link https://vuejs.org/v2/api/#provide-inject | Vue inject}. It overrides the provide key if\n * the parent provides the same key.\n *\n * @remarks The decorated property needs to be public for type inference to work.\n *\n * @param provideKey - The key used to provide. This key can be a 'string' or a 'XInject<Type>'.\n * This last type is to support type-safe injection. When this decorator is used, it is possible\n * to specify the type of the injected value. Take a look to the example below.\n * @returns Decorator with the provide configuration.\n *\n * @example\n * Type unsafe injection (but allowed):\n *     \\@XProvide('myKey')\n *\n * Type safe injection (recommended):\n *     const myKey: XInjectKey<Date> = 'myKey';\n *     \\@XProvide(myKey)\n *\n * This last one, you are specifying that the injected value with the key 'myKey' has the Date\n * type.\n *\n * @public\n */\nexport function XProvide<Type>(provideKey: AnyInjectKey<Type>): DecoratorFor<Type> {\n  return createDecorator((options, componentKey) => {\n    const previousProvide = options.provide;\n    options.provide = function <ComponentInstance extends Vue>(this: ComponentInstance) {\n      const previousProvideObject = getPreviousProvideObject(previousProvide, this);\n      const newProvideObject = getNewProvideObject(provideKey, componentKey, this);\n      return Object.assign(previousProvideObject, newProvideObject);\n    };\n  });\n}\n\n/**\n * Generates an inject configuration object to inject a value provided by {@link XProvide}.\n * This function injects the value into a private property of the component instance using the\n * default {@link https://vuejs.org/v2/api/#provide-inject | Vue inject}. This private property\n * is named as the decorated property but prefixed with `_x-inject_`.\n *\n * Why is this private property necessary? Well, the {@link XProvide} decorator, provides an object\n * with the shape \\{ value: any \\} being that value a getter to keep reactivity of the injected\n * value. This private property is to \"shortcut\" that object and directly inject the value itself.\n * Otherwise, you should access to the actual value using `.value`.\n *\n * The final step is done by a computed property. This has the same name as the decorated property.\n * This computed returns the inner value getter of the injected object. This way the decorated\n * property has finally the initial injected value.\n *\n * @remarks The decorated property needs to be public for type inference to work.\n *\n * @param injectKey - The key used to inject. This key can be a 'string' or a 'XInject<Type>'.\n * This last type is to support type-safe injection. When this decorator is used, it is possible\n * to specify the type of the injected value. Take a look to the example below.\n * @returns Decorator with the provide configuration.\n *\n * @param defaultValue - The default value to use if there is not value provided.\n *\n * @example\n * Type unsafe injection (but allowed):\n *     \\@XInject('myKey')\n *\n * Type safe injection (recommended):\n *     const myKey: XInjectKey<Date> = 'myKey';\n *     \\@XInject(myKey)\n *\n * @public\n */\nexport function XInject<Type>(\n  injectKey: AnyInjectKey<Type>,\n  defaultValue?: Type\n): DecoratorFor<Type> {\n  return createDecorator((options, componentKey) => {\n    const privateComponentKey = `_x-inject_${componentKey}`;\n    const previousInjectObject = getPreviousInjectObject(options.inject);\n    const newInjectObject = getNewInjectObject(injectKey, privateComponentKey, defaultValue);\n    options.inject = Object.assign(previousInjectObject, newInjectObject);\n    const computedToPrivateProperty = getComputedProperty(componentKey, privateComponentKey);\n    options.computed = Object.assign(options.computed ?? {}, computedToPrivateProperty);\n  });\n}\n\n/**\n * This function receives the previous provide of the component instance.\n * If the provide is a function, then returns it as an object invoking it with the component\n * instance.\n * If the provide is an object then it is returned directly.\n * If the provide is undefined, then an empty object returned.\n *\n * @param previousProvide - The {@link ComponentOptions.provide } configuration that exist before\n * applying this decorator.\n * @param componentInstance - A Vue Component instance to invoke the provide function.\n *\n * @returns {@link ProvideObjectConfig} With the provide configuration as an object.\n */\nfunction getPreviousProvideObject<ComponentInstance extends Vue>(\n  previousProvide: ComponentOptions<Vue>['provide'],\n  componentInstance: ComponentInstance\n): ProvideObjectConfig {\n  if (isProvideFunction(previousProvide)) {\n    return previousProvide.call(componentInstance);\n  } else {\n    return previousProvide ?? {};\n  }\n}\n\n/**\n * This function creates a new provide configuration, wrapping the value to provide inside a getter\n * called `value`. This is done to keep the reactivity of the injected value.\n *\n * @param provideKey - The key of the provide value.\n * @param componentKey - The name of the property decorated with {@link XProvide}.\n * @param componentInstance - The {@link Vue} instance of the component to invoke the provide\n * function.\n *\n * @returns {@link ProvideObjectConfig} The object with the key of the provideKey and the `value`\n * getter.\n */\nfunction getNewProvideObject<ComponentInstance extends Vue>(\n  provideKey: AnyInjectKey<unknown>,\n  componentKey: string,\n  componentInstance: ComponentInstance\n): ProvideObjectConfig {\n  return {\n    [provideKey as string]: {\n      get value() {\n        return componentInstance[componentKey as keyof ComponentInstance];\n      }\n    }\n  };\n}\n\n/**\n * This function returns the previous inject config as an object. This will be used to merge it with\n * the new inject configuration.\n * If the previous inject config of the component instance is an Array, then it converts it into an\n * object.\n * If the previous inject config of the component instance is an object, then it returns it\n * directly.\n * If the previous inject config of the component instance is undefined, then an empty object is\n * returned.\n *\n * @param previousInject - The previous inject configuration of the component instance.\n *\n * @returns {@link InjectObjectConfig} The object with the previous inject config in form of object.\n */\nfunction getPreviousInjectObject(\n  previousInject: ComponentOptions<Vue>['inject']\n): InjectObjectConfig {\n  if (Array.isArray(previousInject)) {\n    return arrayToObject(previousInject);\n  } else {\n    return previousInject ?? {};\n  }\n}\n\n/**\n * This function returns the new inject configuration. This will be merged with the previous inject\n * configuration.\n * It returns an object with the key and a string if no `defaultValue` is passed. Otherwise it\n * returns an object with `from` and `default` keys.\n *\n * @param injectKey - The key of the injected value.\n * @param componentKey - The name of the component key where the value will be injected.\n * @param defaultValue - The default value of the injection if the `injectKey` has no provide.\n *\n * @returns The object with the inject configuration.\n */\nfunction getNewInjectObject<DefaultValue>(\n  injectKey: AnyInjectKey<unknown>,\n  componentKey: string,\n  defaultValue?: DefaultValue\n): InjectObjectConfig {\n  return { [componentKey]: { from: injectKey as string, default: { value: defaultValue } } };\n}\n\n/**\n * This function returns the computed configuration for bypass the `value` of the provide\n * of {@link XProvide}. This will be used to override the property decorated with {@link XInject}\n * with the computed.\n *\n * @param computedKey - The key used for the computed.\n * @param privateComponentKey - The \"private\" component property where the value is actually\n * injected.\n *\n * @returns The computed config to assign/merge with the component options.\n */\nfunction getComputedProperty(\n  computedKey: string,\n  privateComponentKey: string\n): ComponentOptions<Vue>['computed'] {\n  return {\n    [computedKey]: function (): unknown {\n      return (this as unknown as Record<string, { value: unknown }>)[privateComponentKey].value;\n    }\n  };\n}\n\n/**\n * Type guard to check if a provide configuration is a function.\n *\n * @param provide - The provide configuration.\n * @returns A boolean indicating if the passed provide is a function.\n */\nfunction isProvideFunction(\n  provide: ComponentOptions<Vue>['provide']\n): provide is (this: Vue) => ProvideObjectConfig {\n  return typeof provide === 'function';\n}\n"],"names":[],"mappings":";;;AAwCA;;;;;;;;;;;;;;;;;;;;;;;;;;SA0BgB,QAAQ,CAAO,UAA8B;IAC3D,OAAO,eAAe,CAAC,UAAC,OAAO,EAAE,YAAY;QAC3C,IAAM,eAAe,GAAG,OAAO,CAAC,OAAO,CAAC;QACxC,OAAO,CAAC,OAAO,GAAG;YAChB,IAAM,qBAAqB,GAAG,wBAAwB,CAAC,eAAe,EAAE,IAAI,CAAC,CAAC;YAC9E,IAAM,gBAAgB,GAAG,mBAAmB,CAAC,UAAU,EAAE,YAAY,EAAE,IAAI,CAAC,CAAC;YAC7E,OAAO,MAAM,CAAC,MAAM,CAAC,qBAAqB,EAAE,gBAAgB,CAAC,CAAC;SAC/D,CAAC;KACH,CAAC,CAAC;AACL,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAkCgB,OAAO,CACrB,SAA6B,EAC7B,YAAmB;IAEnB,OAAO,eAAe,CAAC,UAAC,OAAO,EAAE,YAAY;;QAC3C,IAAM,mBAAmB,GAAG,eAAa,YAAc,CAAC;QACxD,IAAM,oBAAoB,GAAG,uBAAuB,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;QACrE,IAAM,eAAe,GAAG,kBAAkB,CAAC,SAAS,EAAE,mBAAmB,EAAE,YAAY,CAAC,CAAC;QACzF,OAAO,CAAC,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,oBAAoB,EAAE,eAAe,CAAC,CAAC;QACtE,IAAM,yBAAyB,GAAG,mBAAmB,CAAC,YAAY,EAAE,mBAAmB,CAAC,CAAC;QACzF,OAAO,CAAC,QAAQ,GAAG,MAAM,CAAC,MAAM,OAAC,OAAO,CAAC,QAAQ,mCAAI,EAAE,EAAE,yBAAyB,CAAC,CAAC;KACrF,CAAC,CAAC;AACL,CAAC;AAED;;;;;;;;;;;;;AAaA,SAAS,wBAAwB,CAC/B,eAAiD,EACjD,iBAAoC;IAEpC,IAAI,iBAAiB,CAAC,eAAe,CAAC,EAAE;QACtC,OAAO,eAAe,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;KAChD;SAAM;QACL,OAAO,eAAe,aAAf,eAAe,cAAf,eAAe,GAAI,EAAE,CAAC;KAC9B;AACH,CAAC;AAED;;;;;;;;;;;;AAYA,SAAS,mBAAmB,CAC1B,UAAiC,EACjC,YAAoB,EACpB,iBAAoC;;IAEpC;QACE,GAAC,UAAoB,IAAG;YACtB,IAAI,KAAK;gBACP,OAAO,iBAAiB,CAAC,YAAuC,CAAC,CAAC;aACnE;SACF;WACD;AACJ,CAAC;AAED;;;;;;;;;;;;;;AAcA,SAAS,uBAAuB,CAC9B,cAA+C;IAE/C,IAAI,KAAK,CAAC,OAAO,CAAC,cAAc,CAAC,EAAE;QACjC,OAAO,aAAa,CAAC,cAAc,CAAC,CAAC;KACtC;SAAM;QACL,OAAO,cAAc,aAAd,cAAc,cAAd,cAAc,GAAI,EAAE,CAAC;KAC7B;AACH,CAAC;AAED;;;;;;;;;;;;AAYA,SAAS,kBAAkB,CACzB,SAAgC,EAChC,YAAoB,EACpB,YAA2B;;IAE3B,gBAAS,GAAC,YAAY,IAAG,EAAE,IAAI,EAAE,SAAmB,EAAE,OAAO,EAAE,EAAE,KAAK,EAAE,YAAY,EAAE,EAAE,KAAG;AAC7F,CAAC;AAED;;;;;;;;;;;AAWA,SAAS,mBAAmB,CAC1B,WAAmB,EACnB,mBAA2B;;IAE3B;QACE,GAAC,WAAW,IAAG;YACb,OAAQ,IAAsD,CAAC,mBAAmB,CAAC,CAAC,KAAK,CAAC;SAC3F;WACD;AACJ,CAAC;AAED;;;;;;AAMA,SAAS,iBAAiB,CACxB,OAAyC;IAEzC,OAAO,OAAO,OAAO,KAAK,UAAU,CAAC;AACvC;;;;"}
+{"version":3,"file":"injection.decorators.js","sources":["../../../../src/components/decorators/injection.decorators.ts"],"sourcesContent":["import Vue, { ComponentOptions } from 'vue';\nimport { createDecorator } from 'vue-class-component';\nimport { arrayToObject } from '../../utils/array';\nimport { DecoratorFor } from '../../utils/types';\n\n/**\n * The type of the Vue Component provide configuration, narrowed to the object type.\n *\n * @internal\n */\n// eslint-disable-next-line @typescript-eslint/ban-types\ntype ProvideObjectConfig = Exclude<ComponentOptions<Vue>['provide'], (() => object) | undefined>;\n\n/**\n * The type of the Vue Component inject configuration, narrowed to the object type.\n *\n * @internal\n */\ntype InjectObjectConfig = Exclude<ComponentOptions<Vue>['inject'], string[] | undefined>;\n\n/**\n * Type of the key passed to {@link XProvide} and {@link XInject} to be type-safe. With this type\n * you can declare the type of the injected value directly in the injection key.\n *\n * @example\n * `const myKey: XInjectKey<Filter> = 'myFilter';`\n * `@XInject(myKey)`\n *\n * @public\n */\n// eslint-disable-next-line @typescript-eslint/no-unused-vars-experimental\nexport interface XInjectKey<Type> extends String {}\n\n/**\n * The union type for the different functions in this module.\n *\n * @internal\n */\ntype AnyInjectKey<Type> = XInjectKey<Type> | string;\n\n/**\n * Generates a provide function that returns an object with the injectable value returned in a\n * getter to keep its reactivity, using the default\n * {@link https://vuejs.org/v2/api/#provide-inject | Vue inject}. It overrides the provide key if\n * the parent provides the same key.\n *\n * @remarks The decorated property needs to be public for type inference to work.\n *\n * @param provideKey - The key used to provide. This key can be a 'string' or a 'XInject<Type>'.\n * This last type is to support type-safe injection. When this decorator is used, it is possible\n * to specify the type of the injected value. Take a look to the example below.\n * @returns Decorator with the provide configuration.\n *\n * @example\n * Type unsafe injection (but allowed):\n *     \\@XProvide('myKey')\n *\n * Type safe injection (recommended):\n *     const myKey: XInjectKey<Date> = 'myKey';\n *     \\@XProvide(myKey)\n *\n * This last one, you are specifying that the injected value with the key 'myKey' has the Date\n * type.\n *\n * @public\n */\nexport function XProvide<Type>(provideKey: AnyInjectKey<Type>): DecoratorFor<Type> {\n  return createDecorator((options, componentKey) => {\n    const previousProvide = options.provide;\n    options.provide = function <ComponentInstance extends Vue>(this: ComponentInstance) {\n      const previousProvideObject = getPreviousProvideObject(previousProvide, this);\n      const newProvideObject = getNewProvideObject(provideKey, componentKey, this);\n      return Object.assign(previousProvideObject, newProvideObject);\n    };\n  });\n}\n\n/**\n * Generates an inject configuration object to inject a value provided by {@link XProvide}.\n * This function injects the value into a private property of the component instance using the\n * default {@link https://vuejs.org/v2/api/#provide-inject | Vue inject}. This private property\n * is named as the decorated property but prefixed with `_x-inject_`.\n *\n * Why is this private property necessary? Well, the {@link XProvide} decorator, provides an object\n * with the shape \\{ value: any \\} being that value a getter to keep reactivity of the injected\n * value. This private property is to \"shortcut\" that object and directly inject the value itself.\n * Otherwise, you should access to the actual value using `.value`.\n *\n * The final step is done by a computed property. This has the same name as the decorated property.\n * This computed returns the inner value getter of the injected object. This way the decorated\n * property has finally the initial injected value.\n *\n * @remarks The decorated property needs to be public for type inference to work.\n *\n * @param injectKey - The key used to inject. This key can be a 'string' or a 'XInject<Type>'.\n * This last type is to support type-safe injection. When this decorator is used, it is possible\n * to specify the type of the injected value. Take a look to the example below.\n * @returns Decorator with the provide configuration.\n *\n * @param defaultValue - The default value to use if there is not value provided.\n *\n * @example\n * Type unsafe injection (but allowed):\n *     \\@XInject('myKey')\n *\n * Type safe injection (recommended):\n *     const myKey: XInjectKey<Date> = 'myKey';\n *     \\@XInject(myKey)\n *\n * @public\n */\nexport function XInject<Type>(\n  injectKey: AnyInjectKey<Type>,\n  defaultValue?: Type\n): DecoratorFor<Type> {\n  return createDecorator((options, componentKey) => {\n    const privateComponentKey = `_x-inject_${componentKey}`;\n    const previousInjectObject = getPreviousInjectObject(options.inject);\n    const newInjectObject = getNewInjectObject(injectKey, privateComponentKey, defaultValue);\n    options.inject = Object.assign(previousInjectObject, newInjectObject);\n    const computedToPrivateProperty = getComputedProperty(componentKey, privateComponentKey);\n    options.computed = Object.assign(options.computed ?? {}, computedToPrivateProperty);\n  });\n}\n\n/**\n * This function receives the previous provide of the component instance.\n * If the provide is a function, then returns it as an object invoking it with the component\n * instance.\n * If the provide is an object then it is returned directly.\n * If the provide is undefined, then an empty object returned.\n *\n * @param previousProvide - The {@link ComponentOptions.provide } configuration that exist before\n * applying this decorator.\n * @param componentInstance - A Vue Component instance to invoke the provide function.\n *\n * @returns {@link ProvideObjectConfig} With the provide configuration as an object.\n */\nfunction getPreviousProvideObject<ComponentInstance extends Vue>(\n  previousProvide: ComponentOptions<Vue>['provide'],\n  componentInstance: ComponentInstance\n): ProvideObjectConfig {\n  if (isProvideFunction(previousProvide)) {\n    return previousProvide.call(componentInstance);\n  } else {\n    return previousProvide ?? {};\n  }\n}\n\n/**\n * This function creates a new provide configuration, wrapping the value to provide inside a getter\n * called `value`. This is done to keep the reactivity of the injected value.\n *\n * @param provideKey - The key of the provide value.\n * @param componentKey - The name of the property decorated with {@link XProvide}.\n * @param componentInstance - The {@link Vue} instance of the component to invoke the provide\n * function.\n *\n * @returns {@link ProvideObjectConfig} The object with the key of the provideKey and the `value`\n * getter.\n */\nfunction getNewProvideObject<ComponentInstance extends Vue>(\n  provideKey: AnyInjectKey<unknown>,\n  componentKey: string,\n  componentInstance: ComponentInstance\n): ProvideObjectConfig {\n  return {\n    [provideKey as string]: {\n      get value() {\n        return componentInstance[componentKey as keyof ComponentInstance];\n      }\n    }\n  };\n}\n\n/**\n * This function returns the previous inject config as an object. This will be used to merge it with\n * the new inject configuration.\n * If the previous inject config of the component instance is an Array, then it converts it into an\n * object.\n * If the previous inject config of the component instance is an object, then it returns it\n * directly.\n * If the previous inject config of the component instance is undefined, then an empty object is\n * returned.\n *\n * @param previousInject - The previous inject configuration of the component instance.\n *\n * @returns {@link InjectObjectConfig} The object with the previous inject config in form of object.\n */\nfunction getPreviousInjectObject(\n  previousInject: ComponentOptions<Vue>['inject']\n): InjectObjectConfig {\n  if (Array.isArray(previousInject)) {\n    return arrayToObject(previousInject);\n  } else {\n    return previousInject ?? {};\n  }\n}\n\n/**\n * This function returns the new inject configuration. This will be merged with the previous inject\n * configuration.\n * It returns an object with the key and a string if no `defaultValue` is passed. Otherwise it\n * returns an object with `from` and `default` keys.\n *\n * @param injectKey - The key of the injected value.\n * @param componentKey - The name of the component key where the value will be injected.\n * @param defaultValue - The default value of the injection if the `injectKey` has no provide.\n *\n * @returns The object with the inject configuration.\n */\nfunction getNewInjectObject<DefaultValue>(\n  injectKey: AnyInjectKey<unknown>,\n  componentKey: string,\n  defaultValue?: DefaultValue\n): InjectObjectConfig {\n  return { [componentKey]: { from: injectKey as string, default: { value: defaultValue } } };\n}\n\n/**\n * This function returns the computed configuration for bypass the `value` of the provide\n * of {@link XProvide}. This will be used to override the property decorated with {@link XInject}\n * with the computed.\n *\n * @param computedKey - The key used for the computed.\n * @param privateComponentKey - The \"private\" component property where the value is actually\n * injected.\n *\n * @returns The computed config to assign/merge with the component options.\n */\nfunction getComputedProperty(\n  computedKey: string,\n  privateComponentKey: string\n): ComponentOptions<Vue>['computed'] {\n  return {\n    [computedKey]: function (): unknown {\n      return (this as unknown as Record<string, { value: unknown }>)[privateComponentKey].value;\n    }\n  };\n}\n\n/**\n * Type guard to check if a provide configuration is a function.\n *\n * @param provide - The provide configuration.\n * @returns A boolean indicating if the passed provide is a function.\n */\nfunction isProvideFunction(\n  provide: ComponentOptions<Vue>['provide']\n): provide is (this: Vue) => ProvideObjectConfig {\n  return typeof provide === 'function';\n}\n"],"names":[],"mappings":";;;AAwCA;;;;;;;;;;;;;;;;;;;;;;;;;;SA0BgB,QAAQ,CAAO,UAA8B;IAC3D,OAAO,eAAe,CAAC,CAAC,OAAO,EAAE,YAAY;QAC3C,MAAM,eAAe,GAAG,OAAO,CAAC,OAAO,CAAC;QACxC,OAAO,CAAC,OAAO,GAAG;YAChB,MAAM,qBAAqB,GAAG,wBAAwB,CAAC,eAAe,EAAE,IAAI,CAAC,CAAC;YAC9E,MAAM,gBAAgB,GAAG,mBAAmB,CAAC,UAAU,EAAE,YAAY,EAAE,IAAI,CAAC,CAAC;YAC7E,OAAO,MAAM,CAAC,MAAM,CAAC,qBAAqB,EAAE,gBAAgB,CAAC,CAAC;SAC/D,CAAC;KACH,CAAC,CAAC;AACL,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAkCgB,OAAO,CACrB,SAA6B,EAC7B,YAAmB;IAEnB,OAAO,eAAe,CAAC,CAAC,OAAO,EAAE,YAAY;QAC3C,MAAM,mBAAmB,GAAG,aAAa,YAAY,EAAE,CAAC;QACxD,MAAM,oBAAoB,GAAG,uBAAuB,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;QACrE,MAAM,eAAe,GAAG,kBAAkB,CAAC,SAAS,EAAE,mBAAmB,EAAE,YAAY,CAAC,CAAC;QACzF,OAAO,CAAC,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,oBAAoB,EAAE,eAAe,CAAC,CAAC;QACtE,MAAM,yBAAyB,GAAG,mBAAmB,CAAC,YAAY,EAAE,mBAAmB,CAAC,CAAC;QACzF,OAAO,CAAC,QAAQ,GAAG,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,QAAQ,IAAI,EAAE,EAAE,yBAAyB,CAAC,CAAC;KACrF,CAAC,CAAC;AACL,CAAC;AAED;;;;;;;;;;;;;AAaA,SAAS,wBAAwB,CAC/B,eAAiD,EACjD,iBAAoC;IAEpC,IAAI,iBAAiB,CAAC,eAAe,CAAC,EAAE;QACtC,OAAO,eAAe,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;KAChD;SAAM;QACL,OAAO,eAAe,IAAI,EAAE,CAAC;KAC9B;AACH,CAAC;AAED;;;;;;;;;;;;AAYA,SAAS,mBAAmB,CAC1B,UAAiC,EACjC,YAAoB,EACpB,iBAAoC;IAEpC,OAAO;QACL,CAAC,UAAoB,GAAG;YACtB,IAAI,KAAK;gBACP,OAAO,iBAAiB,CAAC,YAAuC,CAAC,CAAC;aACnE;SACF;KACF,CAAC;AACJ,CAAC;AAED;;;;;;;;;;;;;;AAcA,SAAS,uBAAuB,CAC9B,cAA+C;IAE/C,IAAI,KAAK,CAAC,OAAO,CAAC,cAAc,CAAC,EAAE;QACjC,OAAO,aAAa,CAAC,cAAc,CAAC,CAAC;KACtC;SAAM;QACL,OAAO,cAAc,IAAI,EAAE,CAAC;KAC7B;AACH,CAAC;AAED;;;;;;;;;;;;AAYA,SAAS,kBAAkB,CACzB,SAAgC,EAChC,YAAoB,EACpB,YAA2B;IAE3B,OAAO,EAAE,CAAC,YAAY,GAAG,EAAE,IAAI,EAAE,SAAmB,EAAE,OAAO,EAAE,EAAE,KAAK,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC;AAC7F,CAAC;AAED;;;;;;;;;;;AAWA,SAAS,mBAAmB,CAC1B,WAAmB,EACnB,mBAA2B;IAE3B,OAAO;QACL,CAAC,WAAW,GAAG;YACb,OAAQ,IAAsD,CAAC,mBAAmB,CAAC,CAAC,KAAK,CAAC;SAC3F;KACF,CAAC;AACJ,CAAC;AAED;;;;;;AAMA,SAAS,iBAAiB,CACxB,OAAyC;IAEzC,OAAO,OAAO,OAAO,KAAK,UAAU,CAAC;AACvC;;;;"}

package/js/components/decorators/store.decorators.js

@@ -12,16 +12,15 @@ import { getGetterPath } from '../../plugins/x-plugin.utils.js';
  * @public
  */
 function State(module, path) {
-    return createDecorator(function (options, key) {
-        var _a;
+    return createDecorator((options, key) => {
         if (!options.computed) {
             options.computed = {};
         }
-        Object.assign(options.computed, (_a = {},
-            _a[key] = function () {
+        Object.assign(options.computed, {
+            [key]() {
                 return this.$store.state.x[module][path];
-            },
-            _a));
+            }
+        });
     });
 }
 /**
@@ -35,17 +34,16 @@ function State(module, path) {
  * @public
  */
 function Getter(module, getter) {
-    return createDecorator(function (options, key) {
-        var _a;
+    return createDecorator((options, key) => {
         if (!options.computed) {
             options.computed = {};
         }
-        var getterPath = getGetterPath(module, getter);
-        Object.assign(options.computed, (_a = {},
-            _a[key] = function () {
+        const getterPath = getGetterPath(module, getter);
+        Object.assign(options.computed, {
+            [key]() {
                 return this.$store.getters[getterPath];
-            },
-            _a));
+            }
+        });
     });
 }
 

package/js/components/decorators/store.decorators.js.map

@@ -1 +1 @@
-{"version":3,"file":"store.decorators.js","sources":["../../../../src/components/decorators/store.decorators.ts"],"sourcesContent":["import Vue, { ComponentOptions } from 'vue';\nimport { createDecorator } from 'vue-class-component';\nimport { getGetterPath } from '../../plugins/x-plugin.utils';\nimport { DecoratorFor } from '../../utils/index';\nimport { ExtractGetters, ExtractState, XModuleName } from '../../x-modules/x-modules.types';\n\n/**\n * Generates a computed property which returns the selected state.\n *\n * The decorated property needs to be public for type inference to work.\n *\n * @param module - The {@link XModuleName} of the getter.\n * @param path - The state path.\n * @returns Decorator with the state properties of the module.\n * @public\n */\nexport function State<Module extends XModuleName, Path extends keyof ExtractState<Module>>(\n  module: Module,\n  path: Path\n): DecoratorFor<ExtractState<Module>[Path]> {\n  return createDecorator((options, key) => {\n    if (!options.computed) {\n      options.computed = {};\n    }\n    Object.assign(options.computed, {\n      [key]() {\n        return this.$store.state.x[module][path];\n      }\n    } as ThisType<Vue>);\n  });\n}\n\n/**\n * Generates a computed property which returns the selected getter value.\n *\n * The decorated property needs to be public for type inference to work.\n *\n * @param module - The {@link XModuleName} of the getter.\n * @param getter - The getter name.\n * @returns Decorator with the getters of the module.\n * @public\n */\nexport function Getter<Module extends XModuleName, GetterName extends keyof ExtractGetters<Module>>(\n  module: Module,\n  getter: GetterName\n): DecoratorFor<ExtractGetters<Module>[GetterName]> {\n  return createDecorator((options: ComponentOptions<Vue>, key: string) => {\n    if (!options.computed) {\n      options.computed = {};\n    }\n    const getterPath = getGetterPath(module, getter);\n    Object.assign(options.computed, {\n      [key]() {\n        return this.$store.getters[getterPath];\n      }\n    } as ThisType<Vue>);\n  });\n}\n"],"names":[],"mappings":";;;AAMA;;;;;;;;;;SAUgB,KAAK,CACnB,MAAc,EACd,IAAU;IAEV,OAAO,eAAe,CAAC,UAAC,OAAO,EAAE,GAAG;;QAClC,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE;YACrB,OAAO,CAAC,QAAQ,GAAG,EAAE,CAAC;SACvB;QACD,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,QAAQ,GAAE;YAC9B,GAAC,GAAG,IAAJ;gBACE,OAAO,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC;aAC1C;cACe,EAAC,CAAC;KACrB,CAAC,CAAC;AACL,CAAC;AAED;;;;;;;;;;SAUgB,MAAM,CACpB,MAAc,EACd,MAAkB;IAElB,OAAO,eAAe,CAAC,UAAC,OAA8B,EAAE,GAAW;;QACjE,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE;YACrB,OAAO,CAAC,QAAQ,GAAG,EAAE,CAAC;SACvB;QACD,IAAM,UAAU,GAAG,aAAa,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;QACjD,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,QAAQ,GAAE;YAC9B,GAAC,GAAG,IAAJ;gBACE,OAAO,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;aACxC;cACe,EAAC,CAAC;KACrB,CAAC,CAAC;AACL;;;;"}
+{"version":3,"file":"store.decorators.js","sources":["../../../../src/components/decorators/store.decorators.ts"],"sourcesContent":["import Vue, { ComponentOptions } from 'vue';\nimport { createDecorator } from 'vue-class-component';\nimport { getGetterPath } from '../../plugins/x-plugin.utils';\nimport { DecoratorFor } from '../../utils/index';\nimport { ExtractGetters, ExtractState, XModuleName } from '../../x-modules/x-modules.types';\n\n/**\n * Generates a computed property which returns the selected state.\n *\n * The decorated property needs to be public for type inference to work.\n *\n * @param module - The {@link XModuleName} of the getter.\n * @param path - The state path.\n * @returns Decorator with the state properties of the module.\n * @public\n */\nexport function State<Module extends XModuleName, Path extends keyof ExtractState<Module>>(\n  module: Module,\n  path: Path\n): DecoratorFor<ExtractState<Module>[Path]> {\n  return createDecorator((options, key) => {\n    if (!options.computed) {\n      options.computed = {};\n    }\n    Object.assign(options.computed, {\n      [key]() {\n        return this.$store.state.x[module][path];\n      }\n    } as ThisType<Vue>);\n  });\n}\n\n/**\n * Generates a computed property which returns the selected getter value.\n *\n * The decorated property needs to be public for type inference to work.\n *\n * @param module - The {@link XModuleName} of the getter.\n * @param getter - The getter name.\n * @returns Decorator with the getters of the module.\n * @public\n */\nexport function Getter<Module extends XModuleName, GetterName extends keyof ExtractGetters<Module>>(\n  module: Module,\n  getter: GetterName\n): DecoratorFor<ExtractGetters<Module>[GetterName]> {\n  return createDecorator((options: ComponentOptions<Vue>, key: string) => {\n    if (!options.computed) {\n      options.computed = {};\n    }\n    const getterPath = getGetterPath(module, getter);\n    Object.assign(options.computed, {\n      [key]() {\n        return this.$store.getters[getterPath];\n      }\n    } as ThisType<Vue>);\n  });\n}\n"],"names":[],"mappings":";;;AAMA;;;;;;;;;;SAUgB,KAAK,CACnB,MAAc,EACd,IAAU;IAEV,OAAO,eAAe,CAAC,CAAC,OAAO,EAAE,GAAG;QAClC,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE;YACrB,OAAO,CAAC,QAAQ,GAAG,EAAE,CAAC;SACvB;QACD,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,QAAQ,EAAE;YAC9B,CAAC,GAAG,CAAC;gBACH,OAAO,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC;aAC1C;SACe,CAAC,CAAC;KACrB,CAAC,CAAC;AACL,CAAC;AAED;;;;;;;;;;SAUgB,MAAM,CACpB,MAAc,EACd,MAAkB;IAElB,OAAO,eAAe,CAAC,CAAC,OAA8B,EAAE,GAAW;QACjE,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE;YACrB,OAAO,CAAC,QAAQ,GAAG,EAAE,CAAC;SACvB;QACD,MAAM,UAAU,GAAG,aAAa,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;QACjD,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,QAAQ,EAAE;YAC9B,CAAC,GAAG,CAAC;gBACH,OAAO,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;aACxC;SACe,CAAC,CAAC;KACrB,CAAC,CAAC;AACL;;;;"}

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

@@ -1,19 +1,19 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-import script from './base-price-filter-label.vue_rollup-plugin-vue=script.js';
+import script from './base-price-filter-label.vue_rollup-plugin-vue_script.vue.js';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs';
 
 /* script */
-var __vue_script__ = script;
+const __vue_script__ = script;
 
 /* template */
 
   /* style */
-  var __vue_inject_styles__ = undefined;
+  const __vue_inject_styles__ = undefined;
   /* scoped */
-  var __vue_scope_id__ = undefined;
+  const __vue_scope_id__ = undefined;
   /* module identifier */
-  var __vue_module_identifier__ = undefined;
+  const __vue_module_identifier__ = undefined;
   /* functional template */
-  var __vue_is_functional_template__ = undefined;
+  const __vue_is_functional_template__ = undefined;
   /* style inject */
   
   /* style inject SSR */
@@ -22,7 +22,7 @@ var __vue_script__ = script;
   
 
   
-  var __vue_component__ = /*#__PURE__*/__vue_normalize__(
+  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
     {},
     __vue_inject_styles__,
     __vue_script__,
@@ -35,5 +35,5 @@ var __vue_script__ = script;
     undefined
   );
 
-export default __vue_component__;
+export { __vue_component__ as default };
 //# sourceMappingURL=base-price-filter-label.vue.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"base-price-filter-label.vue.js","sources":["../../../../../src/components/filters/labels/base-price-filter-label.vue"],"sourcesContent":["<script lang=\"ts\">\n  import Vue, { CreateElement, VNode, VNodeChildren } from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { RangeValue } from '@empathyco/x-types';\n  import BaseCurrency from '../../currency/base-currency.vue';\n\n  /**\n   * Renders a label for a price filter, allowing to select different messages depending on the\n   * value of the filter.\n   *\n   * @public\n   */\n  @Component({\n    components: { BaseCurrency }\n  })\n  export default class BasePriceFilterLabel extends Vue {\n    /** The filter data for get min and max value. */\n    @Prop({ required: true })\n    public filter!: { range: RangeValue };\n\n    /** Configuration for show the label. */\n    @Prop()\n    public format?: string;\n\n    @Prop()\n    public hideIntegerDecimals?: boolean;\n\n    /**\n     * Message shown when the filter hasn't got the min value defined.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    public lessThan!: string;\n\n    /**\n     * Message shown when the filter has both the min and max values defined.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    public fromTo!: string;\n\n    /**\n     * Message shown when the filter hasn't got max value defined.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    public from!: string;\n\n    /**\n     * The active label, retrieved from the provided props.\n     * It depends on the min and max values of the filter.\n     *\n     * @returns The active label to be formatted with the min and max values of the filter.\n     */\n    protected get label(): string {\n      return this.filter.range.min === null\n        ? this.lessThan\n        : this.filter.range.max === null\n        ? this.from\n        : this.fromTo;\n    }\n\n    render(createElement: CreateElement): VNode {\n      const labelParts = this.label.split(/({min}|{max})/);\n\n      const children: VNodeChildren = labelParts.map(partMessage => {\n        if (partMessage === '{min}') {\n          return createElement('BaseCurrency', {\n            props: {\n              value: this.filter.range.min,\n              format: this.format,\n              hideIntegerDecimals: this.hideIntegerDecimals\n            }\n          });\n        } else if (partMessage === '{max}') {\n          return createElement('BaseCurrency', {\n            props: {\n              value: this.filter.range.max,\n              format: this.format,\n              hideIntegerDecimals: this.hideIntegerDecimals\n            }\n          });\n        }\n        return partMessage;\n      });\n\n      return createElement('span', { class: 'x-price-filter-label' }, children);\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n# Example\n\nRenders a label for a price filter, allowing to select different messages depending on the value of\nthe filter.\n\n- When the `min` value property isn't defined in the filter, you can show a message like\n  `Less than $10` by using the `lessThan` prop, combined with the `{max}` placeholder.\n- When the `max` value property isn't defined in the filter, you can show a message like\n  `More than $300` by using the `from` prop, combined with the `{min}` placeholder.\n- If both the `min` and `max` values of the filter are defined, you can show a message like\n  `$10 - $300` by using the `fromTo` prop.\n\nThis component uses internally the `BaseCurrency` one, so you can pass the same props to configure\nhow the price should look like.\n\n## Basic usage\n\n```vue\n<template>\n  <Facets>\n    <template #price=\"{ facet }\">\n      <Filters v-slot=\"{ filter }\" :filters=\"facet.filters\">\n        <NumberRangeFilter :filter=\"filter\" v-slot=\"{ filter }\">\n          <BasePriceFilterLabel\n            :filter=\"filter\"\n            format=\"$i\"\n            lessThan=\"Less than {max}\"\n            fromTo=\"From {min} to {max}\"\n            from=\"More than {min}\"\n          />\n        </NumberRangeFilter>\n      </Filters>\n    </template>\n  </Facets>\n</template>\n\n<script>\n  import { BasePriceFilterLabel } from '@empathyco/x-components';\n  import { Filters, Facets, NumberRangeFilter } from '@empathyco/x-components/facets';\n\n  export default {\n    name: 'MyFacets',\n    components: {\n      Facets,\n      Filters,\n      NumberRangeFilter,\n      BasePriceFilterLabel\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"base-price-filter-label.vue.js","sources":["../../../../../src/components/filters/labels/base-price-filter-label.vue"],"sourcesContent":["<script lang=\"ts\">\n  import Vue, { CreateElement, VNode, VNodeChildren } from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { RangeValue } from '@empathyco/x-types';\n  import BaseCurrency from '../../currency/base-currency.vue';\n\n  /**\n   * Renders a label for a price filter, allowing to select different messages depending on the\n   * value of the filter.\n   *\n   * @public\n   */\n  @Component({\n    components: { BaseCurrency }\n  })\n  export default class BasePriceFilterLabel extends Vue {\n    /** The filter data for get min and max value. */\n    @Prop({ required: true })\n    public filter!: { range: RangeValue };\n\n    /** Configuration for show the label. */\n    @Prop()\n    public format?: string;\n\n    /**\n     * Message shown when the filter hasn't got the min value defined.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    public lessThan!: string;\n\n    /**\n     * Message shown when the filter has both the min and max values defined.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    public fromTo!: string;\n\n    /**\n     * Message shown when the filter hasn't got max value defined.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    public from!: string;\n\n    /**\n     * The active label, retrieved from the provided props.\n     * It depends on the min and max values of the filter.\n     *\n     * @returns The active label to be formatted with the min and max values of the filter.\n     */\n    protected get label(): string {\n      return this.filter.range.min === null\n        ? this.lessThan\n        : this.filter.range.max === null\n        ? this.from\n        : this.fromTo;\n    }\n\n    render(createElement: CreateElement): VNode {\n      const labelParts = this.label.split(/({min}|{max})/);\n\n      const children: VNodeChildren = labelParts.map(partMessage => {\n        if (partMessage === '{min}') {\n          return createElement('BaseCurrency', {\n            props: {\n              value: this.filter.range.min,\n              format: this.format\n            }\n          });\n        } else if (partMessage === '{max}') {\n          return createElement('BaseCurrency', {\n            props: {\n              value: this.filter.range.max,\n              format: this.format\n            }\n          });\n        }\n        return partMessage;\n      });\n\n      return createElement('span', { class: 'x-price-filter-label' }, children);\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Example\n\nRenders a label for a price filter, allowing to select different messages depending on the value of\nthe filter.\n\n- When the `min` value property isn't defined in the filter, you can show a message like\n  `Less than $10` by using the `lessThan` prop, combined with the `{max}` placeholder.\n- When the `max` value property isn't defined in the filter, you can show a message like\n  `More than $300` by using the `from` prop, combined with the `{min}` placeholder.\n- If both the `min` and `max` values of the filter are defined, you can show a message like\n  `$10 - $300` by using the `fromTo` prop.\n\nThis component uses internally the `BaseCurrency` one, so you can pass the same props to configure\nhow the price should look like.\n\n### Basic usage\n\n```vue\n<template>\n  <Facets>\n    <template #price=\"{ facet }\">\n      <Filters v-slot=\"{ filter }\" :filters=\"facet.filters\">\n        <NumberRangeFilter :filter=\"filter\" v-slot=\"{ filter }\">\n          <BasePriceFilterLabel\n            :filter=\"filter\"\n            format=\"$i\"\n            lessThan=\"Less than {max}\"\n            fromTo=\"From {min} to {max}\"\n            from=\"More than {min}\"\n          />\n        </NumberRangeFilter>\n      </Filters>\n    </template>\n  </Facets>\n</template>\n\n<script>\n  import { BasePriceFilterLabel } from '@empathyco/x-components';\n  import { Filters, Facets, NumberRangeFilter } from '@empathyco/x-components/facets';\n\n  export default {\n    name: 'MyFacets',\n    components: {\n      Facets,\n      Filters,\n      NumberRangeFilter,\n      BasePriceFilterLabel\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -0,0 +1,73 @@
+import { __decorate } from 'tslib';
+import Vue from 'vue';
+import { Prop, Component } from 'vue-property-decorator';
+import __vue_component__ from '../../currency/base-currency.vue.js';
+
+/**
+ * Renders a label for a price filter, allowing to select different messages depending on the
+ * value of the filter.
+ *
+ * @public
+ */
+let BasePriceFilterLabel = class BasePriceFilterLabel extends Vue {
+    /**
+     * The active label, retrieved from the provided props.
+     * It depends on the min and max values of the filter.
+     *
+     * @returns The active label to be formatted with the min and max values of the filter.
+     */
+    get label() {
+        return this.filter.range.min === null
+            ? this.lessThan
+            : this.filter.range.max === null
+                ? this.from
+                : this.fromTo;
+    }
+    render(createElement) {
+        const labelParts = this.label.split(/({min}|{max})/);
+        const children = labelParts.map(partMessage => {
+            if (partMessage === '{min}') {
+                return createElement('BaseCurrency', {
+                    props: {
+                        value: this.filter.range.min,
+                        format: this.format
+                    }
+                });
+            }
+            else if (partMessage === '{max}') {
+                return createElement('BaseCurrency', {
+                    props: {
+                        value: this.filter.range.max,
+                        format: this.format
+                    }
+                });
+            }
+            return partMessage;
+        });
+        return createElement('span', { class: 'x-price-filter-label' }, children);
+    }
+};
+__decorate([
+    Prop({ required: true })
+], BasePriceFilterLabel.prototype, "filter", void 0);
+__decorate([
+    Prop()
+], BasePriceFilterLabel.prototype, "format", void 0);
+__decorate([
+    Prop({ required: true })
+], BasePriceFilterLabel.prototype, "lessThan", void 0);
+__decorate([
+    Prop({ required: true })
+], BasePriceFilterLabel.prototype, "fromTo", void 0);
+__decorate([
+    Prop({ required: true })
+], BasePriceFilterLabel.prototype, "from", void 0);
+BasePriceFilterLabel = __decorate([
+    Component({
+        components: { BaseCurrency: __vue_component__ }
+    })
+], BasePriceFilterLabel);
+var script = BasePriceFilterLabel;
+
+export { script as default };
+//# sourceMappingURL=base-price-filter-label.vue_rollup-plugin-vue_script.vue.js.map