@empathyco/x-components 3.0.0-alpha.88 → 3.0.0-alpha.89

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -3,6 +3,19 @@
3
3
  All notable changes to this project will be documented in this file. See
4
4
  [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [3.0.0-alpha.89](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.88...@empathyco/x-components@3.0.0-alpha.89) (2022-04-29)
7
+
8
+ ### Build System
9
+
10
+ - **deps:** update eslint-plugin dependencies (#447)
11
+ ([51d60f0](https://github.com/empathyco/x/commit/51d60f0e11fa9667a784bbdb10ba1f39159b382f)),
12
+ closes [EX-5383](https://searchbroker.atlassian.net/browse/EX-5383)
13
+
14
+ # Change Log
15
+
16
+ All notable changes to this project will be documented in this file. See
17
+ [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
18
+
6
19
  ## [3.0.0-alpha.88](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.87...@empathyco/x-components@3.0.0-alpha.88) (2022-04-29)
7
20
 
8
21
  **Note:** Version bump only for package @empathyco/x-components
@@ -218,20 +218,6 @@
218
218
  --x-color-border-button-ghost: transparent;
219
219
  --x-color-text-button-ghost: var(--x-color-base-lead);
220
220
  }
221
- .x-button--pill.x-button,
222
- .x-button--pill .x-button {
223
- --x-size-border-radius-button-default: var(--x-size-border-radius-button-pill);
224
- --x-size-border-radius-top-left-button-default: var(--x-size-border-radius-top-left-button-pill);
225
- --x-size-border-radius-top-right-button-default: var(
226
- --x-size-border-radius-top-right-button-pill
227
- );
228
- --x-size-border-radius-bottom-right-button-default: var(
229
- --x-size-border-radius-bottom-right-button-pill
230
- );
231
- --x-size-border-radius-bottom-left-button-default: var(
232
- --x-size-border-radius-bottom-left-button-pill
233
- );
234
- }
235
221
  :root {
236
222
  --x-size-border-radius-button-pill: var(--x-size-border-radius-base-pill);
237
223
  --x-size-border-radius-top-left-button-pill: var(--x-size-border-radius-button-pill);
@@ -7566,3 +7552,18 @@
7566
7552
  .x-normal-case {
7567
7553
  text-transform: none;
7568
7554
  }
7555
+
7556
+ .x-button--pill.x-button,
7557
+ .x-button--pill .x-button {
7558
+ --x-size-border-radius-button-default: var(--x-size-border-radius-button-pill);
7559
+ --x-size-border-radius-top-left-button-default: var(--x-size-border-radius-top-left-button-pill);
7560
+ --x-size-border-radius-top-right-button-default: var(
7561
+ --x-size-border-radius-top-right-button-pill
7562
+ );
7563
+ --x-size-border-radius-bottom-right-button-default: var(
7564
+ --x-size-border-radius-bottom-right-button-pill
7565
+ );
7566
+ --x-size-border-radius-bottom-left-button-default: var(
7567
+ --x-size-border-radius-bottom-left-button-pill
7568
+ );
7569
+ }
@@ -1 +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,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;;;;"}
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\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;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"x-plugin.mixin.js","sources":["../../../src/plugins/x-plugin.mixin.ts"],"sourcesContent":["import Vue, { ComponentOptions } from 'vue';\nimport { Store } from 'vuex';\nimport { getXComponentXModuleName, isXComponent } from '../components/x-component.utils';\nimport { RootXStoreState } from '../store/store.types';\nimport { XEvent, XEventPayload } from '../wiring/events.types';\nimport { WireMetadata } from '../wiring/wiring.types';\nimport { FeatureLocation } from '../types/origin';\nimport { XModuleName } from '../x-modules/x-modules.types';\nimport { XBus } from './x-bus.types';\nimport { getAliasAPI } from './x-plugin.alias';\nimport { XComponentAPI, XComponentBusAPI } from './x-plugin.types';\n\ndeclare module 'vue/types/vue' {\n export interface Vue {\n $x: XComponentAPI;\n }\n}\n\ndeclare module 'vue/types/options' {\n export interface ComponentOptions<V, Data, Methods, Computed, PropsDef, Props> {\n xModule?: XModuleName;\n }\n}\n\ninterface PrivateExtendedVueComponent extends Vue {\n $location?: FeatureLocation;\n $store: Store<{ x: Partial<RootXStoreState['x']> }>;\n xComponent: Vue | undefined;\n}\n\n/**\n * Vue global mixin that adds a `$x` object to every component with the {@link XComponentAPI}.\n *\n * @remarks It adds an injection property `origin` which value is included in the metadata of each\n * event emitted with `$x.emit`.\n *\n * @param bus - The {@link XBus} to use inside the components for emitting events.\n * @returns Mixin options which registers the component as X-Component and the $x.\n * @internal\n */\nexport const createXComponentAPIMixin = (\n bus: XBus\n): ComponentOptions<Vue> & ThisType<PrivateExtendedVueComponent> => ({\n inject: {\n $location: {\n from: 'location',\n default: undefined\n }\n },\n beforeCreate(this: PrivateExtendedVueComponent) {\n this.xComponent = getRootXComponent(this);\n const aliasAPI = getAliasAPI(this);\n const busAPI = getBusAPI(bus, this);\n this.$x = Object.assign(aliasAPI, busAPI);\n }\n});\n\n/**\n * Creates an object containing the API related to the {@link XBus}.\n *\n * @param bus - The global {@link XBus}.\n * @param component - The component instance.\n *\n * @returns An object containing the {@link XComponentBusAPI}.\n * @internal\n */\nexport function getBusAPI(bus: XBus, component: PrivateExtendedVueComponent): XComponentBusAPI {\n return {\n emit: <Event extends XEvent>(\n event: Event,\n payload?: XEventPayload<Event>,\n metadata: Omit<WireMetadata, 'moduleName'> = {}\n ) => {\n bus.emit(event, payload as any, createWireMetadata(component, metadata));\n component.xComponent?.$emit(event, payload);\n },\n on: bus.on.bind(bus)\n };\n}\n\n/**\n * Creates a wire metadata object based on the component and the provided metadata.\n *\n * @param component - The component this metadata belongs to.\n * @param metadata - Additional metadata emitted by the component.\n * @returns A {@link WireMetadata} object.\n * @internal\n */\nfunction createWireMetadata(\n component: PrivateExtendedVueComponent,\n metadata: Partial<WireMetadata>\n): WireMetadata {\n return {\n moduleName: getXComponentXModuleName(component.xComponent),\n location: component.$location,\n ...metadata\n };\n}\n\n/**\n * Given a component, finds the root XComponent in the ancestors hierarchy.\n *\n * @param component - The component to find its root XComponent.\n * @returns The root XComponent or undefined if it has not.\n * @public\n */\nexport function getRootXComponent(component: Vue): Vue | undefined {\n let xComponent: Vue | undefined;\n while (component !== undefined && component !== null) {\n if (isXComponent(component)) {\n xComponent = component;\n }\n component = component.$parent;\n }\n return xComponent;\n}\n"],"names":[],"mappings":";;;AA8BA;;;;;;;;;;MAUa,wBAAwB,GAAG,CACtC,GAAS,MAC0D;IACnE,MAAM,EAAE;QACN,SAAS,EAAE;YACT,IAAI,EAAE,UAAU;YAChB,OAAO,EAAE,SAAS;SACnB;KACF;IACD,YAAY;QACV,IAAI,CAAC,UAAU,GAAG,iBAAiB,CAAC,IAAI,CAAC,CAAC;QAC1C,MAAM,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,CAAC;QACnC,MAAM,MAAM,GAAG,SAAS,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;QACpC,IAAI,CAAC,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;KAC3C;CACF,EAAE;AAEH;;;;;;;;;SASgB,SAAS,CAAC,GAAS,EAAE,SAAsC;IACzE,OAAO;QACL,IAAI,EAAE,CACJ,KAAY,EACZ,OAA8B,EAC9B,WAA6C,EAAE;YAE/C,GAAG,CAAC,IAAI,CAAC,KAAK,EAAE,OAAc,EAAE,kBAAkB,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC;YACzE,SAAS,CAAC,UAAU,EAAE,KAAK,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;SAC7C;QACD,EAAE,EAAE,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC;KACrB,CAAC;AACJ,CAAC;AAED;;;;;;;;AAQA,SAAS,kBAAkB,CACzB,SAAsC,EACtC,QAA+B;IAE/B,OAAO;QACL,UAAU,EAAE,wBAAwB,CAAC,SAAS,CAAC,UAAU,CAAC;QAC1D,QAAQ,EAAE,SAAS,CAAC,SAAS;QAC7B,GAAG,QAAQ;KACZ,CAAC;AACJ,CAAC;AAED;;;;;;;SAOgB,iBAAiB,CAAC,SAAc;IAC9C,IAAI,UAA2B,CAAC;IAChC,OAAO,SAAS,KAAK,SAAS,IAAI,SAAS,KAAK,IAAI,EAAE;QACpD,IAAI,YAAY,CAAC,SAAS,CAAC,EAAE;YAC3B,UAAU,GAAG,SAAS,CAAC;SACxB;QACD,SAAS,GAAG,SAAS,CAAC,OAAO,CAAC;KAC/B;IACD,OAAO,UAAU,CAAC;AACpB;;;;"}
1
+ {"version":3,"file":"x-plugin.mixin.js","sources":["../../../src/plugins/x-plugin.mixin.ts"],"sourcesContent":["import Vue, { ComponentOptions } from 'vue';\nimport { Store } from 'vuex';\nimport { getXComponentXModuleName, isXComponent } from '../components/x-component.utils';\nimport { RootXStoreState } from '../store/store.types';\nimport { XEvent, XEventPayload } from '../wiring/events.types';\nimport { WireMetadata } from '../wiring/wiring.types';\nimport { FeatureLocation } from '../types/origin';\nimport { XModuleName } from '../x-modules/x-modules.types';\nimport { XBus } from './x-bus.types';\nimport { getAliasAPI } from './x-plugin.alias';\nimport { XComponentAPI, XComponentBusAPI } from './x-plugin.types';\n\ndeclare module 'vue/types/vue' {\n export interface Vue {\n $x: XComponentAPI;\n }\n}\n\ndeclare module 'vue/types/options' {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n export interface ComponentOptions<V, Data, Methods, Computed, PropsDef, Props> {\n xModule?: XModuleName;\n }\n}\n\ninterface PrivateExtendedVueComponent extends Vue {\n $location?: FeatureLocation;\n $store: Store<{ x: Partial<RootXStoreState['x']> }>;\n xComponent: Vue | undefined;\n}\n\n/**\n * Vue global mixin that adds a `$x` object to every component with the {@link XComponentAPI}.\n *\n * @remarks It adds an injection property `origin` which value is included in the metadata of each\n * event emitted with `$x.emit`.\n *\n * @param bus - The {@link XBus} to use inside the components for emitting events.\n * @returns Mixin options which registers the component as X-Component and the $x.\n * @internal\n */\nexport const createXComponentAPIMixin = (\n bus: XBus\n): ComponentOptions<Vue> & ThisType<PrivateExtendedVueComponent> => ({\n inject: {\n $location: {\n from: 'location',\n default: undefined\n }\n },\n beforeCreate(this: PrivateExtendedVueComponent) {\n this.xComponent = getRootXComponent(this);\n const aliasAPI = getAliasAPI(this);\n const busAPI = getBusAPI(bus, this);\n this.$x = Object.assign(aliasAPI, busAPI);\n }\n});\n\n/**\n * Creates an object containing the API related to the {@link XBus}.\n *\n * @param bus - The global {@link XBus}.\n * @param component - The component instance.\n *\n * @returns An object containing the {@link XComponentBusAPI}.\n * @internal\n */\nexport function getBusAPI(bus: XBus, component: PrivateExtendedVueComponent): XComponentBusAPI {\n return {\n emit: <Event extends XEvent>(\n event: Event,\n payload?: XEventPayload<Event>,\n metadata: Omit<WireMetadata, 'moduleName'> = {}\n ) => {\n bus.emit(event, payload as any, createWireMetadata(component, metadata));\n component.xComponent?.$emit(event, payload);\n },\n on: bus.on.bind(bus)\n };\n}\n\n/**\n * Creates a wire metadata object based on the component and the provided metadata.\n *\n * @param component - The component this metadata belongs to.\n * @param metadata - Additional metadata emitted by the component.\n * @returns A {@link WireMetadata} object.\n * @internal\n */\nfunction createWireMetadata(\n component: PrivateExtendedVueComponent,\n metadata: Partial<WireMetadata>\n): WireMetadata {\n return {\n moduleName: getXComponentXModuleName(component.xComponent),\n location: component.$location,\n ...metadata\n };\n}\n\n/**\n * Given a component, finds the root XComponent in the ancestors hierarchy.\n *\n * @param component - The component to find its root XComponent.\n * @returns The root XComponent or undefined if it has not.\n * @public\n */\nexport function getRootXComponent(component: Vue): Vue | undefined {\n let xComponent: Vue | undefined;\n while (component !== undefined && component !== null) {\n if (isXComponent(component)) {\n xComponent = component;\n }\n component = component.$parent;\n }\n return xComponent;\n}\n"],"names":[],"mappings":";;;AA+BA;;;;;;;;;;MAUa,wBAAwB,GAAG,CACtC,GAAS,MAC0D;IACnE,MAAM,EAAE;QACN,SAAS,EAAE;YACT,IAAI,EAAE,UAAU;YAChB,OAAO,EAAE,SAAS;SACnB;KACF;IACD,YAAY;QACV,IAAI,CAAC,UAAU,GAAG,iBAAiB,CAAC,IAAI,CAAC,CAAC;QAC1C,MAAM,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,CAAC;QACnC,MAAM,MAAM,GAAG,SAAS,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;QACpC,IAAI,CAAC,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;KAC3C;CACF,EAAE;AAEH;;;;;;;;;SASgB,SAAS,CAAC,GAAS,EAAE,SAAsC;IACzE,OAAO;QACL,IAAI,EAAE,CACJ,KAAY,EACZ,OAA8B,EAC9B,WAA6C,EAAE;YAE/C,GAAG,CAAC,IAAI,CAAC,KAAK,EAAE,OAAc,EAAE,kBAAkB,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC;YACzE,SAAS,CAAC,UAAU,EAAE,KAAK,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;SAC7C;QACD,EAAE,EAAE,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC;KACrB,CAAC;AACJ,CAAC;AAED;;;;;;;;AAQA,SAAS,kBAAkB,CACzB,SAAsC,EACtC,QAA+B;IAE/B,OAAO;QACL,UAAU,EAAE,wBAAwB,CAAC,SAAS,CAAC,UAAU,CAAC;QAC1D,QAAQ,EAAE,SAAS,CAAC,SAAS;QAC7B,GAAG,QAAQ;KACZ,CAAC;AACJ,CAAC;AAED;;;;;;;SAOgB,iBAAiB,CAAC,SAAc;IAC9C,IAAI,UAA2B,CAAC;IAChC,OAAO,SAAS,KAAK,SAAS,IAAI,SAAS,KAAK,IAAI,EAAE;QACpD,IAAI,YAAY,CAAC,SAAS,CAAC,EAAE;YAC3B,UAAU,GAAG,SAAS,CAAC;SACxB;QACD,SAAS,GAAG,SAAS,CAAC,OAAO,CAAC;KAC/B;IACD,OAAO,UAAU,CAAC;AACpB;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"store-emitters.utils.js","sources":["../../../../src/store/utils/store-emitters.utils.ts"],"sourcesContent":["import { Dictionary } from '@empathyco/x-utils';\nimport { WatchOptions } from 'vue';\nimport { Returns } from '../../utils/types';\nimport { XEvent, XEventPayload } from '../../wiring/events.types';\nimport { AnyXStoreModule } from '../store.types';\n\n/**\n * Selects a part of the store state or getters (AKA \"getter\" inside\n * {@link https://vuex.vuejs.org/ | Vuex} watchers).\n *\n * @param ReturnType - The type of the state or getters property selected.\n * @param State - The type of the state of the {@link XModule} where this selector is used.\n * @param Getters - The type of the getters of the {@link XModule} where this selector is used.\n * @public\n */\nexport type SimpleStateSelector<\n ReturnType,\n State extends Dictionary,\n Getters extends Dictionary\n> = (state: State, getters: Getters) => ReturnType;\n\n/**\n * Composition type of {@link SimpleStateSelector} which allows to indicate if the state selector\n * should be executed in first instance (first assignment of values). Selector is the\n * {@link SimpleStateSelector} and immediate flags if the selector should be executed when it is\n * initialized for first time.\n *\n * @param ReturnType - The type of the state or getters property selected.\n * @param State - The type of the state of the {@link XModule} where this selector is used.\n * @param Getters - The type of the getters of the {@link XModule} where this selector is used.\n * @public\n */\nexport interface StateSelector<ReturnType, State extends Dictionary, Getters extends Dictionary>\n extends WatchOptions {\n selector: SimpleStateSelector<ReturnType, State, Getters>;\n /**\n * Checks if the value of the selector has changed.\n *\n * @remarks\n * This function exist because Vue will not stop reactivity propagation if the observed variable\n * is an `object`, an `Array`, or the `deep` mode has been enabled.\n *\n * @param newValue - The new value.\n * @param oldValue - The old value.\n * @returns True if the value has really changed.\n */\n filter?(newValue: ReturnType, oldValue: ReturnType): boolean;\n}\n\n/**\n * Dictionary where the key is a {@link XEvent}, and the value is {@link SimpleStateSelector} or\n * {@link StateSelector}. This {@link SimpleStateSelector} or {@link StateSelector} can only\n * access the state and getters from the {@link XStoreModule} passed as param type. This\n * dictionary is used to emits a {@link XEvent} when the part of the store selected by\n * {@link SimpleStateSelector} changes.\n *\n * @param StoreModule - The store module that these store emitters will be able to access.\n * @public\n */\nexport type StoreEmitters<StoreModule extends AnyXStoreModule> = {\n [Event in XEvent]?:\n | SimpleStateSelector<\n XEventPayload<Event>,\n ReturnType<StoreModule['state']>,\n Returns<StoreModule['getters']>\n >\n | StateSelector<\n XEventPayload<Event>,\n ReturnType<StoreModule['state']>,\n Returns<StoreModule['getters']>\n >;\n};\n/**\n * Alias for any simple state selector.\n *\n * @public\n */\nexport type AnySimpleStateSelector = SimpleStateSelector<any, any, any>;\n/**\n * Alias for any state selector.\n *\n * @public\n */\nexport type AnyStateSelector = StateSelector<any, any, any>;\n/**\n * Alias for any store emitters.\n *\n * @public\n */\nexport type AnyStoreEmitters = StoreEmitters<AnyXStoreModule>;\n\n/**\n * Helper function for creating type-safe {@link StoreEmitters}.\n *\n * @param storeModule - The store module that the emitters will be associated to.\n * @param emitters - The {@link StoreEmitters} to create.\n * @returns A type-safe function for storeEmitters.\n * @public\n */\nexport function createStoreEmitters<\n Module extends AnyXStoreModule,\n Emitters extends StoreEmitters<Module>\n // eslint-disable-next-line @typescript-eslint/no-unused-vars-experimental\n>(storeModule: Module, emitters: Emitters): Emitters {\n return emitters;\n}\n"],"names":[],"mappings":"AA2FA;;;;;;;;SAQgB,mBAAmB,CAIjC,WAAmB,EAAE,QAAkB;IACvC,OAAO,QAAQ,CAAC;AAClB;;;;"}
1
+ {"version":3,"file":"store-emitters.utils.js","sources":["../../../../src/store/utils/store-emitters.utils.ts"],"sourcesContent":["import { Dictionary } from '@empathyco/x-utils';\nimport { WatchOptions } from 'vue';\nimport { Returns } from '../../utils/types';\nimport { XEvent, XEventPayload } from '../../wiring/events.types';\nimport { AnyXStoreModule } from '../store.types';\n\n/**\n * Selects a part of the store state or getters (AKA \"getter\" inside\n * {@link https://vuex.vuejs.org/ | Vuex} watchers).\n *\n * @param ReturnType - The type of the state or getters property selected.\n * @param State - The type of the state of the {@link XModule} where this selector is used.\n * @param Getters - The type of the getters of the {@link XModule} where this selector is used.\n * @public\n */\nexport type SimpleStateSelector<\n ReturnType,\n State extends Dictionary,\n Getters extends Dictionary\n> = (state: State, getters: Getters) => ReturnType;\n\n/**\n * Composition type of {@link SimpleStateSelector} which allows to indicate if the state selector\n * should be executed in first instance (first assignment of values). Selector is the\n * {@link SimpleStateSelector} and immediate flags if the selector should be executed when it is\n * initialized for first time.\n *\n * @param ReturnType - The type of the state or getters property selected.\n * @param State - The type of the state of the {@link XModule} where this selector is used.\n * @param Getters - The type of the getters of the {@link XModule} where this selector is used.\n * @public\n */\nexport interface StateSelector<ReturnType, State extends Dictionary, Getters extends Dictionary>\n extends WatchOptions {\n selector: SimpleStateSelector<ReturnType, State, Getters>;\n /**\n * Checks if the value of the selector has changed.\n *\n * @remarks\n * This function exist because Vue will not stop reactivity propagation if the observed variable\n * is an `object`, an `Array`, or the `deep` mode has been enabled.\n *\n * @param newValue - The new value.\n * @param oldValue - The old value.\n * @returns True if the value has really changed.\n */\n filter?(newValue: ReturnType, oldValue: ReturnType): boolean;\n}\n\n/**\n * Dictionary where the key is a {@link XEvent}, and the value is {@link SimpleStateSelector} or\n * {@link StateSelector}. This {@link SimpleStateSelector} or {@link StateSelector} can only\n * access the state and getters from the {@link XStoreModule} passed as param type. This\n * dictionary is used to emits a {@link XEvent} when the part of the store selected by\n * {@link SimpleStateSelector} changes.\n *\n * @param StoreModule - The store module that these store emitters will be able to access.\n * @public\n */\nexport type StoreEmitters<StoreModule extends AnyXStoreModule> = {\n [Event in XEvent]?:\n | SimpleStateSelector<\n XEventPayload<Event>,\n ReturnType<StoreModule['state']>,\n Returns<StoreModule['getters']>\n >\n | StateSelector<\n XEventPayload<Event>,\n ReturnType<StoreModule['state']>,\n Returns<StoreModule['getters']>\n >;\n};\n/**\n * Alias for any simple state selector.\n *\n * @public\n */\nexport type AnySimpleStateSelector = SimpleStateSelector<any, any, any>;\n/**\n * Alias for any state selector.\n *\n * @public\n */\nexport type AnyStateSelector = StateSelector<any, any, any>;\n/**\n * Alias for any store emitters.\n *\n * @public\n */\nexport type AnyStoreEmitters = StoreEmitters<AnyXStoreModule>;\n\n/**\n * Helper function for creating type-safe {@link StoreEmitters}.\n *\n * @param storeModule - The store module that the emitters will be associated to.\n * @param emitters - The {@link StoreEmitters} to create.\n * @returns A type-safe function for storeEmitters.\n * @public\n */\nexport function createStoreEmitters<\n Module extends AnyXStoreModule,\n Emitters extends StoreEmitters<Module>\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n>(storeModule: Module, emitters: Emitters): Emitters {\n return emitters;\n}\n"],"names":[],"mappings":"AA2FA;;;;;;;;SAQgB,mBAAmB,CAIjC,WAAmB,EAAE,QAAkB;IACvC,OAAO,QAAQ,CAAC;AAClB;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"empathize.vue.js","sources":["../../../../../src/x-modules/empathize/components/empathize.vue"],"sourcesContent":["<template>\n <component :is=\"animation\">\n <div\n v-if=\"isOpen\"\n @mousedown.prevent\n @focusin=\"open\"\n @focusout=\"close\"\n class=\"x-empathize\"\n data-test=\"empathize\"\n >\n <!-- @slot (Required) Modal container content -->\n <slot />\n </div>\n </component>\n</template>\n\n<script lang=\"ts\">\n import Vue from 'vue';\n import Component from 'vue-class-component';\n import { Prop } from 'vue-property-decorator';\n import { XOn } from '../../../components/decorators/bus.decorators';\n import { Debounce } from '../../../components/decorators/debounce.decorators';\n import { NoElement } from '../../../components/no-element';\n import { xComponentMixin } from '../../../components/x-component.mixin';\n import { WireMetadata, XEvent } from '../../../wiring';\n import { empathizeXModule } from '../x-module';\n\n /**\n * Component containing the empathize. It has a required slot to define its content and two props\n * to define when to open and close it: eventsToOpenEmpathize and eventsToCloseEmpathize.\n *\n * @public\n */\n @Component({\n mixins: [xComponentMixin(empathizeXModule)]\n })\n export default class Empathize extends Vue {\n /**\n * Animation component that will be used to animate the empathize.\n *\n * @public\n */\n @Prop({ default: () => NoElement })\n protected animation!: Vue;\n\n /**\n * Array of {@link XEvent | xEvents} to open the empathize.\n *\n * @public\n */\n @Prop({ default: () => ['UserFocusedSearchBox', 'UserIsTypingAQuery', 'UserClickedSearchBox'] })\n protected eventsToOpenEmpathize!: XEvent[];\n\n /**\n * Array of {@link XEvent | xEvents} to close the empathize.\n *\n * @public\n */\n @Prop({\n default: () => [\n 'UserClosedEmpathize',\n 'UserSelectedASuggestion',\n 'UserPressedEnter',\n 'UserBlurredSearchBox'\n ]\n })\n protected eventsToCloseEmpathize!: XEvent[];\n\n /**\n * The modal container is open.\n *\n * @internal\n */\n protected isOpen = false;\n\n /**\n * Open empathize. This method will be executed on any event in\n * {@link Empathize.eventsToOpenEmpathize} and on DOM event `focusin` on Empathize root element.\n *\n * @param payload - The payload of the {@link XEvent}, that is unused in this case.\n * @param metadata - The {@link WireMetadata} of the event, used to emit the Empathize XEvents.\n *\n * @internal\n */\n @XOn(component => (component as Empathize).eventsToOpenEmpathize)\n // eslint-disable-next-line @typescript-eslint/no-unused-vars-experimental\n open(payload: unknown, metadata: WireMetadata): void {\n this.changeOpenState(true, metadata);\n }\n\n /**\n * Close empathize. This method will be executed on any event in\n * {@link Empathize.eventsToCloseEmpathize} and on DOM event `focusout` on Empathize root\n * element.\n *\n * @param payload - The payload of the {@link XEvent}, that is unused in this case.\n * @param metadata - The {@link WireMetadata} of the event, used to emit the Empathize XEvents.\n *\n * @internal\n */\n @XOn(component => (component as Empathize).eventsToCloseEmpathize)\n // eslint-disable-next-line @typescript-eslint/no-unused-vars-experimental\n close(payload: unknown, metadata: WireMetadata): void {\n this.changeOpenState(false, metadata);\n }\n\n /**\n * Changes the state of {@link Empathize.isOpen} assigning to it the value of `newOpenState`\n * parameter. Also emits the {@link XEvent | XEvents} `EmpathizeOpened` or `EmpathizeClosed` if\n * the state really changes.\n *\n * @param newOpenState - The new state to assign to {@link Empathize.isOpen}.\n * @param metadata - The {@link WireMetadata} to emit the {@link XEvent | XEvents}. If is\n * undefined, a this component is used as source of info for the metadata.\n *\n * @internal\n */\n @Debounce(0)\n changeOpenState(newOpenState: boolean, metadata: WireMetadata): void {\n if (this.isOpen !== newOpenState) {\n this.isOpen = newOpenState;\n this.$x.emit(\n this.isOpen ? 'EmpathizeOpened' : 'EmpathizeClosed',\n undefined,\n metadata ?? { moduleName: 'empathize', target: this.$el }\n );\n }\n }\n }\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis component will listen to the configured events in `eventsToOpenEmpathize` and\n`eventsToCloseEmpathize` props and open/close itself accordingly. By default, those props values\nare:\n\n- Open: `UserFocusedSearchBox`, `'`UserIsTypingAQuery`, `'`UserClickedSearchBox` and\n- Close: `UserClosedEmpathize`, `UserSelectedASuggestion`, `UserPressedEnter`,\n 'UserBlurredSearchBox`\n\n### Basic examples\n\nThe component rendering the query suggestions, popular searches and history queries with keyboard\nnavigation.\n\n```vue\n<Empathize>\n <template #default>\n <BaseKeyboardNavigation>\n <QuerySuggestions/>\n <PopularSearches/>\n <HistoryQueries/>\n </BaseKeyboardNavigation>\n </template>\n</Empathize>\n```\n\nDefining custom values for the events to open and close the Empathize. For example opening it when\nthe search box loses the focus and closing it when the search box receives the focus:\n\n```vue\n<Empathize\n :eventsToOpenEmpathize=\"['UserBlurredSearchBox']\"\n :eventsToCloseEmpathize=\"['UserFocusedSearchBox']\"\n>\n <template #default>\n Please, type a query in the Search Box.\n </template>\n</Empathize>\n```\n\nAn animation can be used for the opening and closing using the `animation` prop. The animation, must\nbe a Component with a `Transition` with a slot inside:\n\n```vue\n<Empathize :animation=\"collapseFromTop\">\n <template #default>\n <PopularSearches/>\n </template>\n</Empathize>\n```\n\n## Events\n\nA list of events that the component will emit:\n\n- `EmpathizeOpened`: the event is emitted after receiving an event to change the state `isOpen` to\n `true`. The event payload is undefined and can have a metadata with the module and the element\n that emitted it.\n- `EmpathizeClosed`: the event is emitted after receiving an event to change the state `isOpen` to\n `false`. The event payload is undefined and can have a metadata with the module and the element\n that emitted it.\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"empathize.vue.js","sources":["../../../../../src/x-modules/empathize/components/empathize.vue"],"sourcesContent":["<template>\n <component :is=\"animation\">\n <div\n v-if=\"isOpen\"\n @mousedown.prevent\n @focusin=\"open\"\n @focusout=\"close\"\n class=\"x-empathize\"\n data-test=\"empathize\"\n >\n <!-- @slot (Required) Modal container content -->\n <slot />\n </div>\n </component>\n</template>\n\n<script lang=\"ts\">\n import Vue from 'vue';\n import Component from 'vue-class-component';\n import { Prop } from 'vue-property-decorator';\n import { XOn } from '../../../components/decorators/bus.decorators';\n import { Debounce } from '../../../components/decorators/debounce.decorators';\n import { NoElement } from '../../../components/no-element';\n import { xComponentMixin } from '../../../components/x-component.mixin';\n import { WireMetadata, XEvent } from '../../../wiring';\n import { empathizeXModule } from '../x-module';\n\n /**\n * Component containing the empathize. It has a required slot to define its content and two props\n * to define when to open and close it: eventsToOpenEmpathize and eventsToCloseEmpathize.\n *\n * @public\n */\n @Component({\n mixins: [xComponentMixin(empathizeXModule)]\n })\n export default class Empathize extends Vue {\n /**\n * Animation component that will be used to animate the empathize.\n *\n * @public\n */\n @Prop({ default: () => NoElement })\n protected animation!: Vue;\n\n /**\n * Array of {@link XEvent | xEvents} to open the empathize.\n *\n * @public\n */\n @Prop({ default: () => ['UserFocusedSearchBox', 'UserIsTypingAQuery', 'UserClickedSearchBox'] })\n protected eventsToOpenEmpathize!: XEvent[];\n\n /**\n * Array of {@link XEvent | xEvents} to close the empathize.\n *\n * @public\n */\n @Prop({\n default: () => [\n 'UserClosedEmpathize',\n 'UserSelectedASuggestion',\n 'UserPressedEnter',\n 'UserBlurredSearchBox'\n ]\n })\n protected eventsToCloseEmpathize!: XEvent[];\n\n /**\n * The modal container is open.\n *\n * @internal\n */\n protected isOpen = false;\n\n /**\n * Open empathize. This method will be executed on any event in\n * {@link Empathize.eventsToOpenEmpathize} and on DOM event `focusin` on Empathize root element.\n *\n * @param payload - The payload of the {@link XEvent}, that is unused in this case.\n * @param metadata - The {@link WireMetadata} of the event, used to emit the Empathize XEvents.\n *\n * @internal\n */\n @XOn(component => (component as Empathize).eventsToOpenEmpathize)\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n open(payload: unknown, metadata: WireMetadata): void {\n this.changeOpenState(true, metadata);\n }\n\n /**\n * Close empathize. This method will be executed on any event in\n * {@link Empathize.eventsToCloseEmpathize} and on DOM event `focusout` on Empathize root\n * element.\n *\n * @param payload - The payload of the {@link XEvent}, that is unused in this case.\n * @param metadata - The {@link WireMetadata} of the event, used to emit the Empathize XEvents.\n *\n * @internal\n */\n @XOn(component => (component as Empathize).eventsToCloseEmpathize)\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n close(payload: unknown, metadata: WireMetadata): void {\n this.changeOpenState(false, metadata);\n }\n\n /**\n * Changes the state of {@link Empathize.isOpen} assigning to it the value of `newOpenState`\n * parameter. Also emits the {@link XEvent | XEvents} `EmpathizeOpened` or `EmpathizeClosed` if\n * the state really changes.\n *\n * @param newOpenState - The new state to assign to {@link Empathize.isOpen}.\n * @param metadata - The {@link WireMetadata} to emit the {@link XEvent | XEvents}. If is\n * undefined, a this component is used as source of info for the metadata.\n *\n * @internal\n */\n @Debounce(0)\n changeOpenState(newOpenState: boolean, metadata: WireMetadata): void {\n if (this.isOpen !== newOpenState) {\n this.isOpen = newOpenState;\n this.$x.emit(\n this.isOpen ? 'EmpathizeOpened' : 'EmpathizeClosed',\n undefined,\n metadata ?? { moduleName: 'empathize', target: this.$el }\n );\n }\n }\n }\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis component will listen to the configured events in `eventsToOpenEmpathize` and\n`eventsToCloseEmpathize` props and open/close itself accordingly. By default, those props values\nare:\n\n- Open: `UserFocusedSearchBox`, `'`UserIsTypingAQuery`, `'`UserClickedSearchBox` and\n- Close: `UserClosedEmpathize`, `UserSelectedASuggestion`, `UserPressedEnter`,\n 'UserBlurredSearchBox`\n\n### Basic examples\n\nThe component rendering the query suggestions, popular searches and history queries with keyboard\nnavigation.\n\n```vue\n<Empathize>\n <template #default>\n <BaseKeyboardNavigation>\n <QuerySuggestions/>\n <PopularSearches/>\n <HistoryQueries/>\n </BaseKeyboardNavigation>\n </template>\n</Empathize>\n```\n\nDefining custom values for the events to open and close the Empathize. For example opening it when\nthe search box loses the focus and closing it when the search box receives the focus:\n\n```vue\n<Empathize\n :eventsToOpenEmpathize=\"['UserBlurredSearchBox']\"\n :eventsToCloseEmpathize=\"['UserFocusedSearchBox']\"\n>\n <template #default>\n Please, type a query in the Search Box.\n </template>\n</Empathize>\n```\n\nAn animation can be used for the opening and closing using the `animation` prop. The animation, must\nbe a Component with a `Transition` with a slot inside:\n\n```vue\n<Empathize :animation=\"collapseFromTop\">\n <template #default>\n <PopularSearches/>\n </template>\n</Empathize>\n```\n\n## Events\n\nA list of events that the component will emit:\n\n- `EmpathizeOpened`: the event is emitted after receiving an event to change the state `isOpen` to\n `true`. The event payload is undefined and can have a metadata with the module and the element\n that emitted it.\n- `EmpathizeClosed`: the event is emitted after receiving an event to change the state `isOpen` to\n `false`. The event payload is undefined and can have a metadata with the module and the element\n that emitted it.\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -33,7 +33,7 @@ let Empathize = class Empathize extends Vue {
33
33
  *
34
34
  * @internal
35
35
  */
36
- // eslint-disable-next-line @typescript-eslint/no-unused-vars-experimental
36
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
37
37
  open(payload, metadata) {
38
38
  this.changeOpenState(true, metadata);
39
39
  }
@@ -47,7 +47,7 @@ let Empathize = class Empathize extends Vue {
47
47
  *
48
48
  * @internal
49
49
  */
50
- // eslint-disable-next-line @typescript-eslint/no-unused-vars-experimental
50
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
51
51
  close(payload, metadata) {
52
52
  this.changeOpenState(false, metadata);
53
53
  }
@@ -1 +1 @@
1
- {"version":3,"file":"empathize.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../src/x-modules/empathize/components/empathize.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport Vue from 'vue';\nimport Component from 'vue-class-component';\nimport { Prop } from 'vue-property-decorator';\nimport { XOn } from '../../../components/decorators/bus.decorators';\nimport { Debounce } from '../../../components/decorators/debounce.decorators';\nimport { NoElement } from '../../../components/no-element';\nimport { xComponentMixin } from '../../../components/x-component.mixin';\nimport { WireMetadata, XEvent } from '../../../wiring';\nimport { empathizeXModule } from '../x-module';\n\n/**\n * Component containing the empathize. It has a required slot to define its content and two props\n * to define when to open and close it: eventsToOpenEmpathize and eventsToCloseEmpathize.\n *\n * @public\n */\n@Component({\n mixins: [xComponentMixin(empathizeXModule)]\n})\nexport default class Empathize extends Vue {\n /**\n * Animation component that will be used to animate the empathize.\n *\n * @public\n */\n @Prop({ default: () => NoElement })\n protected animation!: Vue;\n\n /**\n * Array of {@link XEvent | xEvents} to open the empathize.\n *\n * @public\n */\n @Prop({ default: () => ['UserFocusedSearchBox', 'UserIsTypingAQuery', 'UserClickedSearchBox'] })\n protected eventsToOpenEmpathize!: XEvent[];\n\n /**\n * Array of {@link XEvent | xEvents} to close the empathize.\n *\n * @public\n */\n @Prop({\n default: () => [\n 'UserClosedEmpathize',\n 'UserSelectedASuggestion',\n 'UserPressedEnter',\n 'UserBlurredSearchBox'\n ]\n })\n protected eventsToCloseEmpathize!: XEvent[];\n\n /**\n * The modal container is open.\n *\n * @internal\n */\n protected isOpen = false;\n\n /**\n * Open empathize. This method will be executed on any event in\n * {@link Empathize.eventsToOpenEmpathize} and on DOM event `focusin` on Empathize root element.\n *\n * @param payload - The payload of the {@link XEvent}, that is unused in this case.\n * @param metadata - The {@link WireMetadata} of the event, used to emit the Empathize XEvents.\n *\n * @internal\n */\n @XOn(component => (component as Empathize).eventsToOpenEmpathize)\n // eslint-disable-next-line @typescript-eslint/no-unused-vars-experimental\n open(payload: unknown, metadata: WireMetadata): void {\n this.changeOpenState(true, metadata);\n }\n\n /**\n * Close empathize. This method will be executed on any event in\n * {@link Empathize.eventsToCloseEmpathize} and on DOM event `focusout` on Empathize root\n * element.\n *\n * @param payload - The payload of the {@link XEvent}, that is unused in this case.\n * @param metadata - The {@link WireMetadata} of the event, used to emit the Empathize XEvents.\n *\n * @internal\n */\n @XOn(component => (component as Empathize).eventsToCloseEmpathize)\n // eslint-disable-next-line @typescript-eslint/no-unused-vars-experimental\n close(payload: unknown, metadata: WireMetadata): void {\n this.changeOpenState(false, metadata);\n }\n\n /**\n * Changes the state of {@link Empathize.isOpen} assigning to it the value of `newOpenState`\n * parameter. Also emits the {@link XEvent | XEvents} `EmpathizeOpened` or `EmpathizeClosed` if\n * the state really changes.\n *\n * @param newOpenState - The new state to assign to {@link Empathize.isOpen}.\n * @param metadata - The {@link WireMetadata} to emit the {@link XEvent | XEvents}. If is\n * undefined, a this component is used as source of info for the metadata.\n *\n * @internal\n */\n @Debounce(0)\n changeOpenState(newOpenState: boolean, metadata: WireMetadata): void {\n if (this.isOpen !== newOpenState) {\n this.isOpen = newOpenState;\n this.$x.emit(\n this.isOpen ? 'EmpathizeOpened' : 'EmpathizeClosed',\n undefined,\n metadata ?? { moduleName: 'empathize', target: this.$el }\n );\n }\n }\n}\n"],"names":[],"mappings":";;;;;;;;;;AA2BA;;;;;;AASA,IAAqB,SAAS,GAA9B,MAAqB,SAAU,SAAQ,GAAG;IAA1C;;;;;;;QAqCY,WAAM,GAAG,KAAK,CAAC;KAuD1B;;;;;;;;;;;IA1CC,IAAI,CAAC,OAAgB,EAAE,QAAsB;QAC3C,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;KACtC;;;;;;;;;;;;IAcD,KAAK,CAAC,OAAgB,EAAE,QAAsB;QAC5C,IAAI,CAAC,eAAe,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;KACvC;;;;;;;;;;;;IAcD,eAAe,CAAC,YAAqB,EAAE,QAAsB;QAC3D,IAAI,IAAI,CAAC,MAAM,KAAK,YAAY,EAAE;YAChC,IAAI,CAAC,MAAM,GAAG,YAAY,CAAC;YAC3B,IAAI,CAAC,EAAE,CAAC,IAAI,CACV,IAAI,CAAC,MAAM,GAAG,iBAAiB,GAAG,iBAAiB,EACnD,SAAS,EACT,QAAQ,IAAI,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,EAAE,IAAI,CAAC,GAAG,EAAE,CAC1D,CAAC;SACH;KACF;CACF,CAAA;AArFC;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,MAAM,SAAS,EAAE,CAAC;4CACT;AAQ1B;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,MAAM,CAAC,sBAAsB,EAAE,oBAAoB,EAAE,sBAAsB,CAAC,EAAE,CAAC;wDACrD;AAe3C;IARC,IAAI,CAAC;QACJ,OAAO,EAAE,MAAM;YACb,qBAAqB;YACrB,yBAAyB;YACzB,kBAAkB;YAClB,sBAAsB;SACvB;KACF,CAAC;yDAC0C;AAoB5C;IAFC,GAAG,CAAC,SAAS,IAAK,SAAuB,CAAC,qBAAqB,CAAC;qCAIhE;AAcD;IAFC,GAAG,CAAC,SAAS,IAAK,SAAuB,CAAC,sBAAsB,CAAC;sCAIjE;AAcD;IADC,QAAQ,CAAC,CAAC,CAAC;gDAUX;AA3FkB,SAAS;IAH7B,SAAS,CAAC;QACT,MAAM,EAAE,CAAC,eAAe,CAAC,gBAAgB,CAAC,CAAC;KAC5C,CAAC;GACmB,SAAS,CA4F7B;aA5FoB,SAAS;;;;"}
1
+ {"version":3,"file":"empathize.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../src/x-modules/empathize/components/empathize.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport Vue from 'vue';\nimport Component from 'vue-class-component';\nimport { Prop } from 'vue-property-decorator';\nimport { XOn } from '../../../components/decorators/bus.decorators';\nimport { Debounce } from '../../../components/decorators/debounce.decorators';\nimport { NoElement } from '../../../components/no-element';\nimport { xComponentMixin } from '../../../components/x-component.mixin';\nimport { WireMetadata, XEvent } from '../../../wiring';\nimport { empathizeXModule } from '../x-module';\n\n/**\n * Component containing the empathize. It has a required slot to define its content and two props\n * to define when to open and close it: eventsToOpenEmpathize and eventsToCloseEmpathize.\n *\n * @public\n */\n@Component({\n mixins: [xComponentMixin(empathizeXModule)]\n})\nexport default class Empathize extends Vue {\n /**\n * Animation component that will be used to animate the empathize.\n *\n * @public\n */\n @Prop({ default: () => NoElement })\n protected animation!: Vue;\n\n /**\n * Array of {@link XEvent | xEvents} to open the empathize.\n *\n * @public\n */\n @Prop({ default: () => ['UserFocusedSearchBox', 'UserIsTypingAQuery', 'UserClickedSearchBox'] })\n protected eventsToOpenEmpathize!: XEvent[];\n\n /**\n * Array of {@link XEvent | xEvents} to close the empathize.\n *\n * @public\n */\n @Prop({\n default: () => [\n 'UserClosedEmpathize',\n 'UserSelectedASuggestion',\n 'UserPressedEnter',\n 'UserBlurredSearchBox'\n ]\n })\n protected eventsToCloseEmpathize!: XEvent[];\n\n /**\n * The modal container is open.\n *\n * @internal\n */\n protected isOpen = false;\n\n /**\n * Open empathize. This method will be executed on any event in\n * {@link Empathize.eventsToOpenEmpathize} and on DOM event `focusin` on Empathize root element.\n *\n * @param payload - The payload of the {@link XEvent}, that is unused in this case.\n * @param metadata - The {@link WireMetadata} of the event, used to emit the Empathize XEvents.\n *\n * @internal\n */\n @XOn(component => (component as Empathize).eventsToOpenEmpathize)\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n open(payload: unknown, metadata: WireMetadata): void {\n this.changeOpenState(true, metadata);\n }\n\n /**\n * Close empathize. This method will be executed on any event in\n * {@link Empathize.eventsToCloseEmpathize} and on DOM event `focusout` on Empathize root\n * element.\n *\n * @param payload - The payload of the {@link XEvent}, that is unused in this case.\n * @param metadata - The {@link WireMetadata} of the event, used to emit the Empathize XEvents.\n *\n * @internal\n */\n @XOn(component => (component as Empathize).eventsToCloseEmpathize)\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n close(payload: unknown, metadata: WireMetadata): void {\n this.changeOpenState(false, metadata);\n }\n\n /**\n * Changes the state of {@link Empathize.isOpen} assigning to it the value of `newOpenState`\n * parameter. Also emits the {@link XEvent | XEvents} `EmpathizeOpened` or `EmpathizeClosed` if\n * the state really changes.\n *\n * @param newOpenState - The new state to assign to {@link Empathize.isOpen}.\n * @param metadata - The {@link WireMetadata} to emit the {@link XEvent | XEvents}. If is\n * undefined, a this component is used as source of info for the metadata.\n *\n * @internal\n */\n @Debounce(0)\n changeOpenState(newOpenState: boolean, metadata: WireMetadata): void {\n if (this.isOpen !== newOpenState) {\n this.isOpen = newOpenState;\n this.$x.emit(\n this.isOpen ? 'EmpathizeOpened' : 'EmpathizeClosed',\n undefined,\n metadata ?? { moduleName: 'empathize', target: this.$el }\n );\n }\n }\n}\n"],"names":[],"mappings":";;;;;;;;;;AA2BA;;;;;;AASA,IAAqB,SAAS,GAA9B,MAAqB,SAAU,SAAQ,GAAG;IAA1C;;;;;;;QAqCY,WAAM,GAAG,KAAK,CAAC;KAuD1B;;;;;;;;;;;IA1CC,IAAI,CAAC,OAAgB,EAAE,QAAsB;QAC3C,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;KACtC;;;;;;;;;;;;IAcD,KAAK,CAAC,OAAgB,EAAE,QAAsB;QAC5C,IAAI,CAAC,eAAe,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;KACvC;;;;;;;;;;;;IAcD,eAAe,CAAC,YAAqB,EAAE,QAAsB;QAC3D,IAAI,IAAI,CAAC,MAAM,KAAK,YAAY,EAAE;YAChC,IAAI,CAAC,MAAM,GAAG,YAAY,CAAC;YAC3B,IAAI,CAAC,EAAE,CAAC,IAAI,CACV,IAAI,CAAC,MAAM,GAAG,iBAAiB,GAAG,iBAAiB,EACnD,SAAS,EACT,QAAQ,IAAI,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,EAAE,IAAI,CAAC,GAAG,EAAE,CAC1D,CAAC;SACH;KACF;CACF,CAAA;AArFC;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,MAAM,SAAS,EAAE,CAAC;4CACT;AAQ1B;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,MAAM,CAAC,sBAAsB,EAAE,oBAAoB,EAAE,sBAAsB,CAAC,EAAE,CAAC;wDACrD;AAe3C;IARC,IAAI,CAAC;QACJ,OAAO,EAAE,MAAM;YACb,qBAAqB;YACrB,yBAAyB;YACzB,kBAAkB;YAClB,sBAAsB;SACvB;KACF,CAAC;yDAC0C;AAoB5C;IAFC,GAAG,CAAC,SAAS,IAAK,SAAuB,CAAC,qBAAqB,CAAC;qCAIhE;AAcD;IAFC,GAAG,CAAC,SAAS,IAAK,SAAuB,CAAC,sBAAsB,CAAC;sCAIjE;AAcD;IADC,QAAQ,CAAC,CAAC,CAAC;gDAUX;AA3FkB,SAAS;IAH7B,SAAS,CAAC;QACT,MAAM,EAAE,CAAC,eAAe,CAAC,gBAAgB,CAAC,CAAC;KAC5C,CAAC;GACmB,SAAS,CA4F7B;aA5FoB,SAAS;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"next-queries-list.vue.js","sources":["../../../../../src/x-modules/next-queries/components/next-queries-list.vue"],"sourcesContent":["<template>\n <NoElement>\n <!--\n @slot Next queries list layout.\n @binding {SearchItem[]} items - Next queries groups plus the injected list items to\n render.\n @binding {Vue | string} animation - Animation to animate the elements.\n -->\n <slot v-bind=\"{ items, animation }\">\n <ItemsList :animation=\"animation\" :items=\"items\">\n <template v-for=\"(_, slotName) in $scopedSlots\" v-slot:[slotName]=\"{ item }\">\n <slot :name=\"slotName\" :item=\"item\" />\n </template>\n </ItemsList>\n </slot>\n </NoElement>\n</template>\n\n<script lang=\"ts\">\n import { NextQuery } from '@empathyco/x-types';\n import { mixins } from 'vue-class-component';\n import { Component, Prop } from 'vue-property-decorator';\n import { Getter } from '../../../components/decorators/store.decorators';\n import { NoElement } from '../../../components/no-element';\n import { ItemsListInjectionMixin } from '../../../components/items-list-injection.mixin';\n import ItemsList from '../../../components/items-list.vue';\n import { xComponentMixin } from '../../../components/x-component.mixin';\n import { groupItemsBy } from '../../../utils/array';\n import { ListItem } from '../../../utils/types';\n import ResultsList from '../../search/components/results-list.vue';\n import { NextQueriesGroup } from '../types';\n import { nextQueriesXModule } from '../x-module';\n\n /**\n * Component that inserts groups of next queries in different positions of the injected search\n * items list, based on the provided configuration.\n *\n * @public\n */\n @Component({\n components: {\n ResultsList,\n NoElement,\n ItemsList\n },\n mixins: [xComponentMixin(nextQueriesXModule)]\n })\n export default class NextQueriesList extends mixins(ItemsListInjectionMixin) {\n /**\n * Animation component that will be used to animate the next queries groups.\n *\n * @public\n */\n @Prop()\n protected animation?: Vue | string;\n\n /**\n * The first index to insert a group of next queries at.\n *\n * @public\n */\n @Prop({ default: 24 })\n public offset!: number;\n\n /**\n * The items cycle size to keep inserting next queries groups at.\n *\n * @public\n */\n @Prop({ default: 24 })\n public frequency!: number;\n\n /**\n * The maximum amount of next queries to add in a single group.\n *\n * @public\n */\n @Prop({ default: 4 })\n public maxNextQueriesPerGroup!: number;\n\n /**\n * The maximum number of groups to insert into the injected list items list.\n *\n * @public\n */\n @Prop()\n public maxGroups!: number;\n\n /**\n * The state next queries.\n *\n * @internal\n */\n @Getter('nextQueries', 'nextQueries')\n public nextQueries!: NextQuery[];\n\n /**\n * The grouped next queries based on the given config.\n *\n * @returns A list of next queries groups.\n * @internal\n */\n protected get nextQueriesGroups(): NextQueriesGroup[] {\n return Object.values(\n groupItemsBy(this.nextQueries, (_, index) =>\n Math.floor(index / this.maxNextQueriesPerGroup)\n )\n )\n .slice(0, this.maxGroups)\n .map(nextQueries => ({\n modelName: 'NextQueriesGroup' as const,\n id: nextQueries.map(nextQuery => nextQuery.query).join(','),\n nextQueries\n }));\n }\n\n /**\n * New list of {@link ListItem}s to render.\n *\n * @returns The new list of {@link ListItem}s with the next queries groups inserted.\n * @internal\n */\n public override get items(): ListItem[] {\n if (!this.injectedListItems) {\n return this.nextQueriesGroups;\n }\n\n return this.nextQueriesGroups.reduce(\n (items, nextQueriesGroup, index) => {\n const targetIndex = this.offset + this.frequency * index;\n if (targetIndex <= items.length) {\n items.splice(targetIndex, 0, nextQueriesGroup);\n }\n return items;\n },\n [...this.injectedListItems]\n );\n }\n }\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits no events.\n\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend microservice required\nTo use this component, the <b>QuerySignals</b> microservice must be\nimplemented.\n:::\n<!-- prettier-ignore-end -->\n\nUsually, this component is going to be used together with the `ResultsList` one. Next queries groups\nwill be inserted between the results, guiding users to discover new searches directly from the\nresults list.\n\n```vue live\n<template>\n <div>\n <SearchInput />\n <ResultsList>\n <NextQueriesList />\n </ResultsList>\n </div>\n</template>\n\n<script>\n import { NextQueriesList } from '@empathyco/x-components/next-queries';\n import { ResultsList } from '@empathyco/x-components/search';\n import { SearchInput } from '@empathyco/x-components/search-box';\n\n export default {\n name: 'NextQueriesListDemo',\n components: {\n NextQueriesList,\n ResultsList,\n SearchInput\n }\n };\n</script>\n```\n\n### Play with the index that next queries groups are inserted at\n\nThe component allows to customise where are the next queries groups inserted. In the following\nexample, the first group of next queries will be inserted at the index `48` (`offset`), and then a\nsecond group will be inserted at index `120` because of the `frequency` prop configured to `72`.\nFinally, a third group will be inserted at index `192`. Because `maxGroups` is configured to `3`, no\nmore groups will be inserted. Each one of this groups will have up to `6` next queries\n(`maxNextQueriesPerGroup`).\n\n```vue live\n<template>\n <div>\n <SearchInput />\n <ResultsList>\n <NextQueriesList :offset=\"48\" :frequency=\"72\" :maxNextQueriesPerGroup=\"6\" :maxGroups=\"3\" />\n </ResultsList>\n </div>\n</template>\n\n<script>\n import { NextQueriesList } from '@empathyco/x-components/next-queries';\n import { ResultsList } from '@empathyco/x-components/search';\n import { SearchInput } from '@empathyco/x-components/search-box';\n\n export default {\n name: 'NextQueriesListDemo',\n components: {\n NextQueriesList,\n ResultsList,\n SearchInput\n }\n };\n</script>\n```\n\n### Customise the layout of the component\n\nThis component will render by default the `id` of each search item, both the injected, and for the\ngroups of next queries generated, but the common case is to integrate it with another layout\ncomponent, for example the `BaseGrid`. To do so, you can use the `default` slot\n\n```vue\n<template>\n <div>\n <SearchInput />\n <ResultsList>\n <NextQueriesList\n :offset=\"48\"\n :frequency=\"72\"\n :maxNextQueriesPerGroup=\"6\"\n :maxGroups=\"3\"\n #default=\"{ items }\"\n >\n <BaseGrid :items=\"items\" :animation=\"animation\">\n <template #next-queries-group=\"{ item }\">\n <span>NextQueriesGroup: {{ item.queries.join(', ') }}</span>\n </template>\n <template #result=\"{ item }\">\n <span>Result: {{ item.name }}</span>\n </template>\n <template #default=\"{ item }\">\n <span>Default: {{ item }}</span>\n </template>\n </BaseGrid>\n </NextQueriesList>\n </ResultsList>\n </div>\n</template>\n\n<script>\n import { NextQueriesList } from '@empathyco/x-components/next-queries';\n import { ResultsList } from '@empathyco/x-components/search';\n import { SearchInput } from '@empathyco/x-components/search-box';\n import { BaseGrid } from '@empathyco/x-components';\n\n export default {\n name: 'NextQueriesListDemo',\n components: {\n NextQueriesList,\n ResultsList,\n BaseGrid,\n SearchInput\n }\n };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"next-queries-list.vue.js","sources":["../../../../../src/x-modules/next-queries/components/next-queries-list.vue"],"sourcesContent":["<template>\n <NoElement>\n <!--\n @slot Next queries list layout.\n @binding {SearchItem[]} items - Next queries groups plus the injected list items to\n render.\n @binding {Vue | string} animation - Animation to animate the elements.\n -->\n <slot v-bind=\"{ items, animation }\">\n <ItemsList :animation=\"animation\" :items=\"items\">\n <template v-for=\"(_, slotName) in $scopedSlots\" v-slot:[slotName]=\"{ item }\">\n <slot :name=\"slotName\" :item=\"item\" />\n </template>\n </ItemsList>\n </slot>\n </NoElement>\n</template>\n\n<script lang=\"ts\">\n import Vue from 'vue';\n import { NextQuery } from '@empathyco/x-types';\n import { mixins } from 'vue-class-component';\n import { Component, Prop } from 'vue-property-decorator';\n import { Getter } from '../../../components/decorators/store.decorators';\n import { NoElement } from '../../../components/no-element';\n import { ItemsListInjectionMixin } from '../../../components/items-list-injection.mixin';\n import ItemsList from '../../../components/items-list.vue';\n import { xComponentMixin } from '../../../components/x-component.mixin';\n import { groupItemsBy } from '../../../utils/array';\n import { ListItem } from '../../../utils/types';\n import ResultsList from '../../search/components/results-list.vue';\n import { NextQueriesGroup } from '../types';\n import { nextQueriesXModule } from '../x-module';\n\n /**\n * Component that inserts groups of next queries in different positions of the injected search\n * items list, based on the provided configuration.\n *\n * @public\n */\n @Component({\n components: {\n ResultsList,\n NoElement,\n ItemsList\n },\n mixins: [xComponentMixin(nextQueriesXModule)]\n })\n export default class NextQueriesList extends mixins(ItemsListInjectionMixin) {\n /**\n * Animation component that will be used to animate the next queries groups.\n *\n * @public\n */\n @Prop()\n protected animation?: Vue | string;\n\n /**\n * The first index to insert a group of next queries at.\n *\n * @public\n */\n @Prop({ default: 24 })\n public offset!: number;\n\n /**\n * The items cycle size to keep inserting next queries groups at.\n *\n * @public\n */\n @Prop({ default: 24 })\n public frequency!: number;\n\n /**\n * The maximum amount of next queries to add in a single group.\n *\n * @public\n */\n @Prop({ default: 4 })\n public maxNextQueriesPerGroup!: number;\n\n /**\n * The maximum number of groups to insert into the injected list items list.\n *\n * @public\n */\n @Prop()\n public maxGroups!: number;\n\n /**\n * The state next queries.\n *\n * @internal\n */\n @Getter('nextQueries', 'nextQueries')\n public nextQueries!: NextQuery[];\n\n /**\n * The grouped next queries based on the given config.\n *\n * @returns A list of next queries groups.\n * @internal\n */\n protected get nextQueriesGroups(): NextQueriesGroup[] {\n return Object.values(\n groupItemsBy(this.nextQueries, (_, index) =>\n Math.floor(index / this.maxNextQueriesPerGroup)\n )\n )\n .slice(0, this.maxGroups)\n .map(nextQueries => ({\n modelName: 'NextQueriesGroup' as const,\n id: nextQueries.map(nextQuery => nextQuery.query).join(','),\n nextQueries\n }));\n }\n\n /**\n * New list of {@link ListItem}s to render.\n *\n * @returns The new list of {@link ListItem}s with the next queries groups inserted.\n * @internal\n */\n public override get items(): ListItem[] {\n if (!this.injectedListItems) {\n return this.nextQueriesGroups;\n }\n\n return this.nextQueriesGroups.reduce(\n (items, nextQueriesGroup, index) => {\n const targetIndex = this.offset + this.frequency * index;\n if (targetIndex <= items.length) {\n items.splice(targetIndex, 0, nextQueriesGroup);\n }\n return items;\n },\n [...this.injectedListItems]\n );\n }\n }\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits no events.\n\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend microservice required\nTo use this component, the <b>QuerySignals</b> microservice must be\nimplemented.\n:::\n<!-- prettier-ignore-end -->\n\nUsually, this component is going to be used together with the `ResultsList` one. Next queries groups\nwill be inserted between the results, guiding users to discover new searches directly from the\nresults list.\n\n```vue live\n<template>\n <div>\n <SearchInput />\n <ResultsList>\n <NextQueriesList />\n </ResultsList>\n </div>\n</template>\n\n<script>\n import { NextQueriesList } from '@empathyco/x-components/next-queries';\n import { ResultsList } from '@empathyco/x-components/search';\n import { SearchInput } from '@empathyco/x-components/search-box';\n\n export default {\n name: 'NextQueriesListDemo',\n components: {\n NextQueriesList,\n ResultsList,\n SearchInput\n }\n };\n</script>\n```\n\n### Play with the index that next queries groups are inserted at\n\nThe component allows to customise where are the next queries groups inserted. In the following\nexample, the first group of next queries will be inserted at the index `48` (`offset`), and then a\nsecond group will be inserted at index `120` because of the `frequency` prop configured to `72`.\nFinally, a third group will be inserted at index `192`. Because `maxGroups` is configured to `3`, no\nmore groups will be inserted. Each one of this groups will have up to `6` next queries\n(`maxNextQueriesPerGroup`).\n\n```vue live\n<template>\n <div>\n <SearchInput />\n <ResultsList>\n <NextQueriesList :offset=\"48\" :frequency=\"72\" :maxNextQueriesPerGroup=\"6\" :maxGroups=\"3\" />\n </ResultsList>\n </div>\n</template>\n\n<script>\n import { NextQueriesList } from '@empathyco/x-components/next-queries';\n import { ResultsList } from '@empathyco/x-components/search';\n import { SearchInput } from '@empathyco/x-components/search-box';\n\n export default {\n name: 'NextQueriesListDemo',\n components: {\n NextQueriesList,\n ResultsList,\n SearchInput\n }\n };\n</script>\n```\n\n### Customise the layout of the component\n\nThis component will render by default the `id` of each search item, both the injected, and for the\ngroups of next queries generated, but the common case is to integrate it with another layout\ncomponent, for example the `BaseGrid`. To do so, you can use the `default` slot\n\n```vue\n<template>\n <div>\n <SearchInput />\n <ResultsList>\n <NextQueriesList\n :offset=\"48\"\n :frequency=\"72\"\n :maxNextQueriesPerGroup=\"6\"\n :maxGroups=\"3\"\n #default=\"{ items }\"\n >\n <BaseGrid :items=\"items\" :animation=\"animation\">\n <template #next-queries-group=\"{ item }\">\n <span>NextQueriesGroup: {{ item.queries.join(', ') }}</span>\n </template>\n <template #result=\"{ item }\">\n <span>Result: {{ item.name }}</span>\n </template>\n <template #default=\"{ item }\">\n <span>Default: {{ item }}</span>\n </template>\n </BaseGrid>\n </NextQueriesList>\n </ResultsList>\n </div>\n</template>\n\n<script>\n import { NextQueriesList } from '@empathyco/x-components/next-queries';\n import { ResultsList } from '@empathyco/x-components/search';\n import { SearchInput } from '@empathyco/x-components/search-box';\n import { BaseGrid } from '@empathyco/x-components';\n\n export default {\n name: 'NextQueriesListDemo',\n components: {\n NextQueriesList,\n ResultsList,\n BaseGrid,\n SearchInput\n }\n };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"next-queries-list.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../src/x-modules/next-queries/components/next-queries-list.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport { NextQuery } from '@empathyco/x-types';\nimport { mixins } from 'vue-class-component';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { Getter } from '../../../components/decorators/store.decorators';\nimport { NoElement } from '../../../components/no-element';\nimport { ItemsListInjectionMixin } from '../../../components/items-list-injection.mixin';\nimport ItemsList from '../../../components/items-list.vue';\nimport { xComponentMixin } from '../../../components/x-component.mixin';\nimport { groupItemsBy } from '../../../utils/array';\nimport { ListItem } from '../../../utils/types';\nimport ResultsList from '../../search/components/results-list.vue';\nimport { NextQueriesGroup } from '../types';\nimport { nextQueriesXModule } from '../x-module';\n\n/**\n * Component that inserts groups of next queries in different positions of the injected search\n * items list, based on the provided configuration.\n *\n * @public\n */\n@Component({\n components: {\n ResultsList,\n NoElement,\n ItemsList\n },\n mixins: [xComponentMixin(nextQueriesXModule)]\n})\nexport default class NextQueriesList extends mixins(ItemsListInjectionMixin) {\n /**\n * Animation component that will be used to animate the next queries groups.\n *\n * @public\n */\n @Prop()\n protected animation?: Vue | string;\n\n /**\n * The first index to insert a group of next queries at.\n *\n * @public\n */\n @Prop({ default: 24 })\n public offset!: number;\n\n /**\n * The items cycle size to keep inserting next queries groups at.\n *\n * @public\n */\n @Prop({ default: 24 })\n public frequency!: number;\n\n /**\n * The maximum amount of next queries to add in a single group.\n *\n * @public\n */\n @Prop({ default: 4 })\n public maxNextQueriesPerGroup!: number;\n\n /**\n * The maximum number of groups to insert into the injected list items list.\n *\n * @public\n */\n @Prop()\n public maxGroups!: number;\n\n /**\n * The state next queries.\n *\n * @internal\n */\n @Getter('nextQueries', 'nextQueries')\n public nextQueries!: NextQuery[];\n\n /**\n * The grouped next queries based on the given config.\n *\n * @returns A list of next queries groups.\n * @internal\n */\n protected get nextQueriesGroups(): NextQueriesGroup[] {\n return Object.values(\n groupItemsBy(this.nextQueries, (_, index) =>\n Math.floor(index / this.maxNextQueriesPerGroup)\n )\n )\n .slice(0, this.maxGroups)\n .map(nextQueries => ({\n modelName: 'NextQueriesGroup' as const,\n id: nextQueries.map(nextQuery => nextQuery.query).join(','),\n nextQueries\n }));\n }\n\n /**\n * New list of {@link ListItem}s to render.\n *\n * @returns The new list of {@link ListItem}s with the next queries groups inserted.\n * @internal\n */\n public override get items(): ListItem[] {\n if (!this.injectedListItems) {\n return this.nextQueriesGroups;\n }\n\n return this.nextQueriesGroups.reduce(\n (items, nextQueriesGroup, index) => {\n const targetIndex = this.offset + this.frequency * index;\n if (targetIndex <= items.length) {\n items.splice(targetIndex, 0, nextQueriesGroup);\n }\n return items;\n },\n [...this.injectedListItems]\n );\n }\n}\n"],"names":["ResultsList","ItemsList"],"mappings":";;;;;;;;;;;;AAiCA;;;;;;AAcA,IAAqB,eAAe,GAApC,MAAqB,eAAgB,SAAQ,MAAM,CAAC,uBAAuB,CAAC;;;;;;;IAuD1E,IAAc,iBAAiB;QAC7B,OAAO,MAAM,CAAC,MAAM,CAClB,YAAY,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC,EAAE,KAAK,KACtC,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,sBAAsB,CAAC,CAChD,CACF;aACE,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,SAAS,CAAC;aACxB,GAAG,CAAC,WAAW,KAAK;YACnB,SAAS,EAAE,kBAA2B;YACtC,EAAE,EAAE,WAAW,CAAC,GAAG,CAAC,SAAS,IAAI,SAAS,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;YAC3D,WAAW;SACZ,CAAC,CAAC,CAAC;KACP;;;;;;;IAQD,IAAoB,KAAK;QACvB,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE;YAC3B,OAAO,IAAI,CAAC,iBAAiB,CAAC;SAC/B;QAED,OAAO,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAClC,CAAC,KAAK,EAAE,gBAAgB,EAAE,KAAK;YAC7B,MAAM,WAAW,GAAG,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;YACzD,IAAI,WAAW,IAAI,KAAK,CAAC,MAAM,EAAE;gBAC/B,KAAK,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC,EAAE,gBAAgB,CAAC,CAAC;aAChD;YACD,OAAO,KAAK,CAAC;SACd,EACD,CAAC,GAAG,IAAI,CAAC,iBAAiB,CAAC,CAC5B,CAAC;KACH;CACF,CAAA;AApFC;IADC,IAAI,EAAE;kDAC4B;AAQnC;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC;+CACC;AAQvB;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC;kDACI;AAQ1B;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC;+DACkB;AAQvC;IADC,IAAI,EAAE;kDACmB;AAQ1B;IADC,MAAM,CAAC,aAAa,EAAE,aAAa,CAAC;oDACJ;AA/Cd,eAAe;IARnC,SAAS,CAAC;QACT,UAAU,EAAE;yBACVA,iBAAW;YACX,SAAS;uBACTC,mBAAS;SACV;QACD,MAAM,EAAE,CAAC,eAAe,CAAC,kBAAkB,CAAC,CAAC;KAC9C,CAAC;GACmB,eAAe,CA2FnC;aA3FoB,eAAe;;;;"}
1
+ {"version":3,"file":"next-queries-list.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../src/x-modules/next-queries/components/next-queries-list.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport Vue from 'vue';\nimport { NextQuery } from '@empathyco/x-types';\nimport { mixins } from 'vue-class-component';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { Getter } from '../../../components/decorators/store.decorators';\nimport { NoElement } from '../../../components/no-element';\nimport { ItemsListInjectionMixin } from '../../../components/items-list-injection.mixin';\nimport ItemsList from '../../../components/items-list.vue';\nimport { xComponentMixin } from '../../../components/x-component.mixin';\nimport { groupItemsBy } from '../../../utils/array';\nimport { ListItem } from '../../../utils/types';\nimport ResultsList from '../../search/components/results-list.vue';\nimport { NextQueriesGroup } from '../types';\nimport { nextQueriesXModule } from '../x-module';\n\n/**\n * Component that inserts groups of next queries in different positions of the injected search\n * items list, based on the provided configuration.\n *\n * @public\n */\n@Component({\n components: {\n ResultsList,\n NoElement,\n ItemsList\n },\n mixins: [xComponentMixin(nextQueriesXModule)]\n})\nexport default class NextQueriesList extends mixins(ItemsListInjectionMixin) {\n /**\n * Animation component that will be used to animate the next queries groups.\n *\n * @public\n */\n @Prop()\n protected animation?: Vue | string;\n\n /**\n * The first index to insert a group of next queries at.\n *\n * @public\n */\n @Prop({ default: 24 })\n public offset!: number;\n\n /**\n * The items cycle size to keep inserting next queries groups at.\n *\n * @public\n */\n @Prop({ default: 24 })\n public frequency!: number;\n\n /**\n * The maximum amount of next queries to add in a single group.\n *\n * @public\n */\n @Prop({ default: 4 })\n public maxNextQueriesPerGroup!: number;\n\n /**\n * The maximum number of groups to insert into the injected list items list.\n *\n * @public\n */\n @Prop()\n public maxGroups!: number;\n\n /**\n * The state next queries.\n *\n * @internal\n */\n @Getter('nextQueries', 'nextQueries')\n public nextQueries!: NextQuery[];\n\n /**\n * The grouped next queries based on the given config.\n *\n * @returns A list of next queries groups.\n * @internal\n */\n protected get nextQueriesGroups(): NextQueriesGroup[] {\n return Object.values(\n groupItemsBy(this.nextQueries, (_, index) =>\n Math.floor(index / this.maxNextQueriesPerGroup)\n )\n )\n .slice(0, this.maxGroups)\n .map(nextQueries => ({\n modelName: 'NextQueriesGroup' as const,\n id: nextQueries.map(nextQuery => nextQuery.query).join(','),\n nextQueries\n }));\n }\n\n /**\n * New list of {@link ListItem}s to render.\n *\n * @returns The new list of {@link ListItem}s with the next queries groups inserted.\n * @internal\n */\n public override get items(): ListItem[] {\n if (!this.injectedListItems) {\n return this.nextQueriesGroups;\n }\n\n return this.nextQueriesGroups.reduce(\n (items, nextQueriesGroup, index) => {\n const targetIndex = this.offset + this.frequency * index;\n if (targetIndex <= items.length) {\n items.splice(targetIndex, 0, nextQueriesGroup);\n }\n return items;\n },\n [...this.injectedListItems]\n );\n }\n}\n"],"names":["ResultsList","ItemsList"],"mappings":";;;;;;;;;;;;AAkCA;;;;;;AAcA,IAAqB,eAAe,GAApC,MAAqB,eAAgB,SAAQ,MAAM,CAAC,uBAAuB,CAAC;;;;;;;IAuD1E,IAAc,iBAAiB;QAC7B,OAAO,MAAM,CAAC,MAAM,CAClB,YAAY,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC,EAAE,KAAK,KACtC,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,sBAAsB,CAAC,CAChD,CACF;aACE,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,SAAS,CAAC;aACxB,GAAG,CAAC,WAAW,KAAK;YACnB,SAAS,EAAE,kBAA2B;YACtC,EAAE,EAAE,WAAW,CAAC,GAAG,CAAC,SAAS,IAAI,SAAS,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;YAC3D,WAAW;SACZ,CAAC,CAAC,CAAC;KACP;;;;;;;IAQD,IAAoB,KAAK;QACvB,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE;YAC3B,OAAO,IAAI,CAAC,iBAAiB,CAAC;SAC/B;QAED,OAAO,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAClC,CAAC,KAAK,EAAE,gBAAgB,EAAE,KAAK;YAC7B,MAAM,WAAW,GAAG,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;YACzD,IAAI,WAAW,IAAI,KAAK,CAAC,MAAM,EAAE;gBAC/B,KAAK,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC,EAAE,gBAAgB,CAAC,CAAC;aAChD;YACD,OAAO,KAAK,CAAC;SACd,EACD,CAAC,GAAG,IAAI,CAAC,iBAAiB,CAAC,CAC5B,CAAC;KACH;CACF,CAAA;AApFC;IADC,IAAI,EAAE;kDAC4B;AAQnC;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC;+CACC;AAQvB;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC;kDACI;AAQ1B;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC;+DACkB;AAQvC;IADC,IAAI,EAAE;kDACmB;AAQ1B;IADC,MAAM,CAAC,aAAa,EAAE,aAAa,CAAC;oDACJ;AA/Cd,eAAe;IARnC,SAAS,CAAC;QACT,UAAU,EAAE;yBACVA,iBAAW;YACX,SAAS;uBACTC,mBAAS;SACV;QACD,MAAM,EAAE,CAAC,eAAe,CAAC,kBAAkB,CAAC,CAAC;KAC9C,CAAC;GACmB,eAAe,CA2FnC;aA3FoB,eAAe;;;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@empathyco/x-components",
3
- "version": "3.0.0-alpha.88",
3
+ "version": "3.0.0-alpha.89",
4
4
  "description": "Empathy X Components",
5
5
  "author": "Empathy Systems Corporation S.L.",
6
6
  "license": "Apache-2.0",
@@ -59,11 +59,11 @@
59
59
  "cypress:open:component": "cypress open-ct"
60
60
  },
61
61
  "dependencies": {
62
- "@empathyco/x-adapter": "^7.0.0-alpha.26",
62
+ "@empathyco/x-adapter": "^7.0.0-alpha.27",
63
63
  "@empathyco/x-deep-merge": "^1.3.0-alpha.12",
64
64
  "@empathyco/x-logger": "^1.2.0-alpha.3",
65
65
  "@empathyco/x-storage-service": "^2.0.0-alpha.2",
66
- "@empathyco/x-types": "^10.0.0-alpha.20",
66
+ "@empathyco/x-types": "^10.0.0-alpha.21",
67
67
  "@empathyco/x-utils": "^0.1.0-alpha.11",
68
68
  "@types/resize-observer-browser": "~0.1.5",
69
69
  "reflect-metadata": "~0.1.13",
@@ -125,5 +125,5 @@
125
125
  "access": "public",
126
126
  "directory": "dist"
127
127
  },
128
- "gitHead": "83ade1faa1f1f6406395a934ca908f7ff2a42f58"
128
+ "gitHead": "018583333d6eb032b465f50ef5777f355b04226f"
129
129
  }
@@ -25734,7 +25734,7 @@
25734
25734
  {
25735
25735
  "kind": "Reference",
25736
25736
  "text": "Vue",
25737
- "canonicalReference": "vue!~Vue:class"
25737
+ "canonicalReference": "vue!Vue:interface"
25738
25738
  },
25739
25739
  {
25740
25740
  "kind": "Content",
@@ -2377,7 +2377,7 @@ export interface NextQueriesGetters {
2377
2377
  //
2378
2378
  // @public
2379
2379
  export class NextQueriesList extends NextQueriesList_base {
2380
- protected animation?: Vue | string;
2380
+ protected animation?: Vue_2 | string;
2381
2381
  frequency: number;
2382
2382
  // @internal
2383
2383
  get items(): ListItem[];
@@ -1 +1 @@
1
- {"version":3,"file":"x-plugin.mixin.d.ts","sourceRoot":"","sources":["../../../src/plugins/x-plugin.mixin.ts"],"names":[],"mappings":"AAAA,OAAO,GAAG,EAAE,EAAE,gBAAgB,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,MAAM,CAAC;AAE7B,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAGvD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAC3D,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAErC,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAEnE,OAAO,QAAQ,eAAe,CAAC;IAC7B,UAAiB,GAAG;QAClB,EAAE,EAAE,aAAa,CAAC;KACnB;CACF;AAED,OAAO,QAAQ,mBAAmB,CAAC;IACjC,UAAiB,gBAAgB,CAAC,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK;QAC3E,OAAO,CAAC,EAAE,WAAW,CAAC;KACvB;CACF;AAED,UAAU,2BAA4B,SAAQ,GAAG;IAC/C,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,MAAM,EAAE,KAAK,CAAC;QAAE,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC,CAAA;KAAE,CAAC,CAAC;IACpD,UAAU,EAAE,GAAG,GAAG,SAAS,CAAC;CAC7B;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,wBAAwB,QAC9B,IAAI,KACR,iBAAiB,GAAG,CAAC,GAAG,SAAS,2BAA2B,CAa7D,CAAC;AAEH;;;;;;;;GAQG;AACH,wBAAgB,SAAS,CAAC,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,2BAA2B,GAAG,gBAAgB,CAY7F;AAqBD;;;;;;GAMG;AACH,wBAAgB,iBAAiB,CAAC,SAAS,EAAE,GAAG,GAAG,GAAG,GAAG,SAAS,CASjE"}
1
+ {"version":3,"file":"x-plugin.mixin.d.ts","sourceRoot":"","sources":["../../../src/plugins/x-plugin.mixin.ts"],"names":[],"mappings":"AAAA,OAAO,GAAG,EAAE,EAAE,gBAAgB,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,MAAM,CAAC;AAE7B,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAGvD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAC3D,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAErC,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAEnE,OAAO,QAAQ,eAAe,CAAC;IAC7B,UAAiB,GAAG;QAClB,EAAE,EAAE,aAAa,CAAC;KACnB;CACF;AAED,OAAO,QAAQ,mBAAmB,CAAC;IAEjC,UAAiB,gBAAgB,CAAC,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK;QAC3E,OAAO,CAAC,EAAE,WAAW,CAAC;KACvB;CACF;AAED,UAAU,2BAA4B,SAAQ,GAAG;IAC/C,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,MAAM,EAAE,KAAK,CAAC;QAAE,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC,CAAA;KAAE,CAAC,CAAC;IACpD,UAAU,EAAE,GAAG,GAAG,SAAS,CAAC;CAC7B;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,wBAAwB,QAC9B,IAAI,KACR,iBAAiB,GAAG,CAAC,GAAG,SAAS,2BAA2B,CAa7D,CAAC;AAEH;;;;;;;;GAQG;AACH,wBAAgB,SAAS,CAAC,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,2BAA2B,GAAG,gBAAgB,CAY7F;AAqBD;;;;;;GAMG;AACH,wBAAgB,iBAAiB,CAAC,SAAS,EAAE,GAAG,GAAG,GAAG,GAAG,SAAS,CASjE"}
@@ -1,3 +1,4 @@
1
+ import Vue from 'vue';
1
2
  import { NextQuery } from '@empathyco/x-types';
2
3
  import { ItemsListInjectionMixin } from '../../../components/items-list-injection.mixin';
3
4
  import { ListItem } from '../../../utils/types';
@@ -1 +1 @@
1
- {"version":3,"file":"next-queries-list.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../../../src/x-modules/next-queries/components/next-queries-list.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"AAmBA,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAK/C,OAAO,EAAE,uBAAuB,EAAE,MAAM,gDAAgD,CAAC;AAIzF,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;;AAG5C;;;;;GAKG;AASH,MAAM,CAAC,OAAO,OAAO,eAAgB,SAAQ,oBAA+B;IAC1E;;;;OAIG;IAEH,SAAS,CAAC,SAAS,CAAC,EAAE,GAAG,GAAG,MAAM,CAAC;IAEnC;;;;OAIG;IAEI,MAAM,EAAG,MAAM,CAAC;IAEvB;;;;OAIG;IAEI,SAAS,EAAG,MAAM,CAAC;IAE1B;;;;OAIG;IAEI,sBAAsB,EAAG,MAAM,CAAC;IAEvC;;;;OAIG;IAEI,SAAS,EAAG,MAAM,CAAC;IAE1B;;;;OAIG;IAEI,WAAW,EAAG,SAAS,EAAE,CAAC;IAEjC;;;;;OAKG;IACH,SAAS,KAAK,iBAAiB,IAAI,gBAAgB,EAAE,CAYpD;IAED;;;;;OAKG;IACH,IAAoB,KAAK,IAAI,QAAQ,EAAE,CAetC;CACF"}
1
+ {"version":3,"file":"next-queries-list.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../../../src/x-modules/next-queries/components/next-queries-list.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"AAmBA,OAAO,GAAG,MAAM,KAAK,CAAC;AACtB,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAK/C,OAAO,EAAE,uBAAuB,EAAE,MAAM,gDAAgD,CAAC;AAIzF,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;;AAG5C;;;;;GAKG;AASH,MAAM,CAAC,OAAO,OAAO,eAAgB,SAAQ,oBAA+B;IAC1E;;;;OAIG;IAEH,SAAS,CAAC,SAAS,CAAC,EAAE,GAAG,GAAG,MAAM,CAAC;IAEnC;;;;OAIG;IAEI,MAAM,EAAG,MAAM,CAAC;IAEvB;;;;OAIG;IAEI,SAAS,EAAG,MAAM,CAAC;IAE1B;;;;OAIG;IAEI,sBAAsB,EAAG,MAAM,CAAC;IAEvC;;;;OAIG;IAEI,SAAS,EAAG,MAAM,CAAC;IAE1B;;;;OAIG;IAEI,WAAW,EAAG,SAAS,EAAE,CAAC;IAEjC;;;;;OAKG;IACH,SAAS,KAAK,iBAAiB,IAAI,gBAAgB,EAAE,CAYpD;IAED;;;;;OAKG;IACH,IAAoB,KAAK,IAAI,QAAQ,EAAE,CAetC;CACF"}