@empathyco/x-components 3.0.0-alpha.75 → 3.0.0-alpha.78
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 +40 -0
- package/README.md +27 -8
- package/core/index.js +0 -1
- package/core/index.js.map +1 -1
- package/design-system/default-theme.css +73 -73
- package/design-system/full-theme.css +54 -55
- package/docs/API-reference/api/x-components.actionstree.md +1 -1
- package/docs/API-reference/api/x-components.anyactionstree.md +1 -1
- package/docs/API-reference/api/x-components.anygetterstree.md +1 -1
- package/docs/API-reference/api/x-components.anymutationstree.md +1 -1
- package/docs/API-reference/api/x-components.compilemessage.md +1 -1
- package/docs/API-reference/api/x-components.debounce.md +1 -1
- package/docs/API-reference/api/x-components.deeppartial.md +1 -1
- package/docs/API-reference/api/x-components.extraparams.md +2 -2
- package/docs/API-reference/api/x-components.extraparamsmutations.setparams.md +1 -1
- package/docs/API-reference/api/x-components.extraparamsstate.md +1 -1
- package/docs/API-reference/api/x-components.extraparamsxevents.md +4 -4
- package/docs/API-reference/api/x-components.firstparameter.md +0 -2
- package/docs/API-reference/api/x-components.getterstree.md +1 -1
- package/docs/API-reference/api/x-components.identifierresultsmutations.setparams.md +1 -1
- package/docs/API-reference/api/x-components.identifierresultsstate.md +1 -1
- package/docs/API-reference/api/x-components.md +0 -11
- package/docs/API-reference/api/x-components.mutationstree.md +1 -1
- package/docs/API-reference/api/x-components.nextqueriesmutations.setparams.md +1 -1
- package/docs/API-reference/api/x-components.nextqueriesstate.md +1 -1
- package/docs/API-reference/api/x-components.popularsearchesmutations.setparams.md +1 -1
- package/docs/API-reference/api/x-components.popularsearchesstate.md +1 -1
- package/docs/API-reference/api/x-components.querysuggestionsmutations.setparams.md +1 -1
- package/docs/API-reference/api/x-components.querysuggestionsstate.md +1 -1
- package/docs/API-reference/api/x-components.recommendationsmutations.setparams.md +1 -1
- package/docs/API-reference/api/x-components.recommendationsstate.md +1 -1
- package/docs/API-reference/api/x-components.relatedtagsmutations.setparams.md +1 -1
- package/docs/API-reference/api/x-components.relatedtagsstate.md +1 -1
- package/docs/API-reference/api/x-components.renderlessextraparams.md +1 -1
- package/docs/API-reference/api/x-components.returns.md +0 -2
- package/docs/API-reference/api/x-components.scrollstate.md +1 -1
- package/docs/API-reference/api/x-components.searchmutations.setparams.md +1 -1
- package/docs/API-reference/api/x-components.searchstate.md +2 -2
- package/docs/API-reference/api/x-components.setextraparams.md +1 -1
- package/docs/API-reference/api/x-components.setidentifierresultsextraparams.md +1 -1
- package/docs/API-reference/api/x-components.setinitialextraparams.md +1 -1
- package/docs/API-reference/api/x-components.setnextqueriesextraparams.md +1 -1
- package/docs/API-reference/api/x-components.setpopularsearchesextraparams.md +1 -1
- package/docs/API-reference/api/x-components.setquerysuggestionsextraparams.md +1 -1
- package/docs/API-reference/api/x-components.setrecommendationsextraparams.md +1 -1
- package/docs/API-reference/api/x-components.setrelatedtagsextraparams.md +1 -1
- package/docs/API-reference/api/x-components.setsearchextraparams.md +1 -1
- package/docs/API-reference/api/x-components.simplestateselector.md +0 -2
- package/docs/API-reference/api/x-components.snippetconfigextraparams.md +1 -1
- package/docs/API-reference/api/x-components.urlhandler.md +1 -1
- package/docs/API-reference/api/x-components.urlmutations.setinitialextraparams.md +1 -1
- package/docs/API-reference/api/x-components.urlstate.md +1 -1
- package/docs/API-reference/api/x-components.urlxevents.extraparamsloadedfromurl.md +1 -1
- package/docs/API-reference/api/x-components.urlxevents.md +1 -1
- package/docs/API-reference/api/x-components.vuecssclasses.md +0 -2
- package/docs/API-reference/api/x-components.wiring.md +1 -1
- package/js/components/decorators/bus.decorators.js.map +1 -1
- package/js/components/decorators/debounce.decorators.js.map +1 -1
- package/js/components/global-x-bus.vue.js.map +1 -1
- package/js/components/global-x-bus.vue_rollup-plugin-vue_script.vue.js +1 -1
- package/js/components/global-x-bus.vue_rollup-plugin-vue_script.vue.js.map +1 -1
- package/js/components/snippet-callbacks.vue.js.map +1 -1
- package/js/components/snippet-callbacks.vue_rollup-plugin-vue_script.vue.js +1 -1
- package/js/components/snippet-callbacks.vue_rollup-plugin-vue_script.vue.js.map +1 -1
- package/js/components/suggestions/base-suggestion.vue.js.map +1 -1
- package/js/components/suggestions/base-suggestion.vue_rollup-plugin-vue_script.vue.js +1 -1
- package/js/components/suggestions/base-suggestion.vue_rollup-plugin-vue_script.vue.js.map +1 -1
- package/js/filters/compile-message.filter.js.map +1 -1
- package/js/index.js +0 -1
- package/js/index.js.map +1 -1
- package/js/plugins/x-emitters.js +1 -1
- package/js/plugins/x-emitters.js.map +1 -1
- package/js/plugins/x-plugin.js +1 -2
- package/js/plugins/x-plugin.js.map +1 -1
- package/js/store/utils/getters-proxy.utils.js +1 -1
- package/js/store/utils/getters-proxy.utils.js.map +1 -1
- package/js/store/utils/store-emitters.utils.js.map +1 -1
- package/js/x-installer/x-installer/x-installer.js +1 -1
- package/js/x-installer/x-installer/x-installer.js.map +1 -1
- package/js/x-modules/extra-params/components/extra-params.vue.js.map +1 -1
- package/js/x-modules/extra-params/components/extra-params.vue_rollup-plugin-vue_script.vue.js.map +1 -1
- package/js/x-modules/extra-params/components/renderless-extra-param.vue.js.map +1 -1
- package/js/x-modules/extra-params/components/renderless-extra-param.vue_rollup-plugin-vue_script.vue.js.map +1 -1
- package/js/x-modules/extra-params/components/snippet-config-extra-params.vue.js.map +1 -1
- package/js/x-modules/extra-params/components/snippet-config-extra-params.vue_rollup-plugin-vue_script.vue.js +1 -2
- package/js/x-modules/extra-params/components/snippet-config-extra-params.vue_rollup-plugin-vue_script.vue.js.map +1 -1
- package/js/x-modules/facets/components/facets/facets.vue.js +2 -2
- package/js/x-modules/facets/components/facets/facets.vue.js.map +1 -1
- package/js/x-modules/facets/components/facets/facets.vue_rollup-plugin-vue_script.vue.js +1 -1
- package/js/x-modules/facets/components/facets/facets.vue_rollup-plugin-vue_script.vue.js.map +1 -1
- package/js/x-modules/facets/store/getters/facets.getter.js +1 -1
- package/js/x-modules/facets/store/getters/facets.getter.js.map +1 -1
- package/js/x-modules/facets/store/getters/selected-filters-by-facet.getter.js +1 -1
- package/js/x-modules/facets/store/getters/selected-filters-by-facet.getter.js.map +1 -1
- package/js/x-modules/scroll/components/scroll-to-top.vue.js.map +1 -1
- package/js/x-modules/scroll/components/scroll-to-top.vue_rollup-plugin-vue_script.vue.js.map +1 -1
- package/js/x-modules/search/store/actions/reset-state.action.js +1 -1
- package/js/x-modules/search/store/actions/reset-state.action.js.map +1 -1
- package/js/x-modules/url/components/url-handler.vue.js.map +1 -1
- package/js/x-modules/url/components/url-handler.vue_rollup-plugin-vue_script.vue.js +1 -1
- package/js/x-modules/url/components/url-handler.vue_rollup-plugin-vue_script.vue.js.map +1 -1
- package/js/x-modules/url/store/getters/url-params.getter.js +1 -1
- package/js/x-modules/url/store/getters/url-params.getter.js.map +1 -1
- package/js/x-modules/url/store/mutations/set-params.mutation.js +1 -1
- package/js/x-modules/url/store/mutations/set-params.mutation.js.map +1 -1
- package/package.json +5 -4
- package/report/x-components.api.json +75 -843
- package/report/x-components.api.md +3 -33
- package/types/components/decorators/bus.decorators.d.ts.map +1 -1
- package/types/components/decorators/debounce.decorators.d.ts +2 -1
- package/types/components/decorators/debounce.decorators.d.ts.map +1 -1
- package/types/components/snippet-callbacks.vue.d.ts.map +1 -1
- package/types/components/suggestions/base-suggestion.vue.d.ts.map +1 -1
- package/types/filters/compile-message.filter.d.ts +1 -1
- package/types/filters/compile-message.filter.d.ts.map +1 -1
- package/types/plugins/x-emitters.d.ts.map +1 -1
- package/types/plugins/x-plugin.d.ts.map +1 -1
- package/types/store/actions.types.d.ts +2 -1
- package/types/store/actions.types.d.ts.map +1 -1
- package/types/store/getters.types.d.ts +1 -1
- package/types/store/getters.types.d.ts.map +1 -1
- package/types/store/mutations.types.d.ts +1 -1
- package/types/store/mutations.types.d.ts.map +1 -1
- package/types/store/utils/getters-proxy.utils.d.ts.map +1 -1
- package/types/store/utils/store-emitters.utils.d.ts +2 -1
- package/types/store/utils/store-emitters.utils.d.ts.map +1 -1
- package/types/utils/index.d.ts +0 -1
- package/types/utils/index.d.ts.map +1 -1
- package/types/utils/types.d.ts +1 -26
- package/types/utils/types.d.ts.map +1 -1
- package/types/wiring/wiring.types.d.ts +2 -1
- package/types/wiring/wiring.types.d.ts.map +1 -1
- package/types/x-installer/x-installer/x-installer.d.ts.map +1 -1
- package/types/x-modules/extra-params/components/extra-params.vue.d.ts +1 -1
- package/types/x-modules/extra-params/components/extra-params.vue.d.ts.map +1 -1
- package/types/x-modules/extra-params/components/renderless-extra-param.vue.d.ts +1 -1
- package/types/x-modules/extra-params/components/renderless-extra-param.vue.d.ts.map +1 -1
- package/types/x-modules/extra-params/components/snippet-config-extra-params.vue.d.ts +1 -1
- package/types/x-modules/extra-params/components/snippet-config-extra-params.vue.d.ts.map +1 -1
- package/types/x-modules/extra-params/events.types.d.ts +1 -1
- package/types/x-modules/extra-params/events.types.d.ts.map +1 -1
- package/types/x-modules/extra-params/store/emitters.d.ts +1 -1
- package/types/x-modules/extra-params/store/types.d.ts +1 -1
- package/types/x-modules/extra-params/store/types.d.ts.map +1 -1
- package/types/x-modules/extra-params/wiring.d.ts +4 -4
- package/types/x-modules/extra-params/wiring.d.ts.map +1 -1
- package/types/x-modules/facets/components/facets/facets.vue.d.ts +1 -1
- package/types/x-modules/facets/components/facets/facets.vue.d.ts.map +1 -1
- package/types/x-modules/identifier-results/store/types.d.ts +1 -1
- package/types/x-modules/identifier-results/store/types.d.ts.map +1 -1
- package/types/x-modules/identifier-results/wiring.d.ts +2 -2
- package/types/x-modules/identifier-results/wiring.d.ts.map +1 -1
- package/types/x-modules/next-queries/store/types.d.ts +1 -1
- package/types/x-modules/next-queries/store/types.d.ts.map +1 -1
- package/types/x-modules/next-queries/wiring.d.ts +2 -2
- package/types/x-modules/next-queries/wiring.d.ts.map +1 -1
- package/types/x-modules/popular-searches/store/types.d.ts +1 -1
- package/types/x-modules/popular-searches/store/types.d.ts.map +1 -1
- package/types/x-modules/popular-searches/wiring.d.ts +2 -2
- package/types/x-modules/popular-searches/wiring.d.ts.map +1 -1
- package/types/x-modules/query-suggestions/store/types.d.ts +1 -1
- package/types/x-modules/query-suggestions/store/types.d.ts.map +1 -1
- package/types/x-modules/query-suggestions/wiring.d.ts +2 -2
- package/types/x-modules/query-suggestions/wiring.d.ts.map +1 -1
- package/types/x-modules/recommendations/store/types.d.ts +1 -1
- package/types/x-modules/recommendations/store/types.d.ts.map +1 -1
- package/types/x-modules/recommendations/wiring.d.ts +2 -2
- package/types/x-modules/recommendations/wiring.d.ts.map +1 -1
- package/types/x-modules/related-tags/store/types.d.ts +1 -1
- package/types/x-modules/related-tags/store/types.d.ts.map +1 -1
- package/types/x-modules/related-tags/wiring.d.ts +2 -2
- package/types/x-modules/related-tags/wiring.d.ts.map +1 -1
- package/types/x-modules/scroll/components/scroll-to-top.vue.d.ts +1 -1
- package/types/x-modules/scroll/components/scroll-to-top.vue.d.ts.map +1 -1
- package/types/x-modules/scroll/store/types.d.ts +1 -1
- package/types/x-modules/scroll/store/types.d.ts.map +1 -1
- package/types/x-modules/search/store/types.d.ts +1 -1
- package/types/x-modules/search/store/types.d.ts.map +1 -1
- package/types/x-modules/search/wiring.d.ts +2 -2
- package/types/x-modules/search/wiring.d.ts.map +1 -1
- package/types/x-modules/url/components/url-handler.vue.d.ts +1 -1
- package/types/x-modules/url/components/url-handler.vue.d.ts.map +1 -1
- package/types/x-modules/url/events.types.d.ts +3 -2
- package/types/x-modules/url/events.types.d.ts.map +1 -1
- package/types/x-modules/url/store/types.d.ts +1 -1
- package/types/x-modules/url/store/types.d.ts.map +1 -1
- package/types/x-modules/url/wiring.d.ts +2 -2
- package/types/x-modules/url/wiring.d.ts.map +1 -1
- package/docs/API-reference/api/x-components.anyfunction.md +0 -13
- package/docs/API-reference/api/x-components.cleanundefined.md +0 -26
- package/docs/API-reference/api/x-components.dictionary.md +0 -13
- package/docs/API-reference/api/x-components.every.md +0 -27
- package/docs/API-reference/api/x-components.foreach.md +0 -25
- package/docs/API-reference/api/x-components.getnewandupdatedkeys.md +0 -27
- package/docs/API-reference/api/x-components.map.md +0 -27
- package/docs/API-reference/api/x-components.nonprimitive.md +0 -13
- package/docs/API-reference/api/x-components.objectfilter.md +0 -27
- package/docs/API-reference/api/x-components.primitive.md +0 -15
- package/docs/API-reference/api/x-components.reduce.md +0 -28
- package/js/utils/object.js +0 -115
- package/js/utils/object.js.map +0 -1
- package/types/utils/object.d.ts +0 -70
- package/types/utils/object.d.ts.map +0 -1
package/js/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/js/plugins/x-emitters.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
+
import { forEach } from '@empathyco/x-utils';
|
|
1
2
|
import { getGettersProxyFromModule } from '../store/utils/getters-proxy.utils.js';
|
|
2
3
|
import { debounce } from '../utils/debounce.js';
|
|
3
|
-
import { forEach } from '../utils/object.js';
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
6
|
* Registers the store emitters, making them emit the event when the part of the state selected
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"x-emitters.js","sources":["../../../src/plugins/x-emitters.ts"],"sourcesContent":["import { Store } from 'vuex';\nimport { getGettersProxyFromModule } from '../store/utils/getters-proxy.utils';\nimport { AnySimpleStateSelector, AnyStateSelector } from '../store/utils/store-emitters.utils';\nimport { debounce } from '../utils/debounce';\nimport {
|
|
1
|
+
{"version":3,"file":"x-emitters.js","sources":["../../../src/plugins/x-emitters.ts"],"sourcesContent":["import { forEach, Dictionary } from '@empathyco/x-utils';\nimport { Store } from 'vuex';\nimport { getGettersProxyFromModule } from '../store/utils/getters-proxy.utils';\nimport { AnySimpleStateSelector, AnyStateSelector } from '../store/utils/store-emitters.utils';\nimport { debounce } from '../utils/debounce';\nimport { DebouncedFunction } from '../utils/types';\nimport { XEvent } from '../wiring/events.types';\nimport { AnyXModule } from '../x-modules/x-modules.types';\nimport { XBus } from './x-bus.types';\n\n/**\n * Registers the store emitters, making them emit the event when the part of the state selected\n * changes.\n *\n * @param xModule - The {@link XModule} to register its Store Emitters.\n * @param bus - The {@Link XBus} to emit the events by the Emitters.\n * @param store - The Vuex store to access to state and getters to watch them.\n *\n * @internal\n */\nexport function registerStoreEmitters(\n { name, storeEmitters, storeModule }: AnyXModule,\n bus: XBus,\n store: Store<any>\n): void {\n const safeGettersProxy = getGettersProxyFromModule(store.getters, name, storeModule);\n forEach(storeEmitters, (event, stateSelector: AnySimpleStateSelector | AnyStateSelector) => {\n const { selector, immediate, filter, ...options } = normalizeStateSelector(\n stateSelector,\n event\n );\n\n const emit = (value: unknown, oldValue?: unknown): void => {\n bus.emit(event, value, { moduleName: name, oldValue });\n };\n const watcherSelector = (): unknown => selector(store.state.x[name], safeGettersProxy);\n const debouncedEffect = debounceWatcherEffect(event, (newValue, oldValue) => {\n if (filter(newValue, oldValue)) {\n emit(newValue, oldValue);\n }\n });\n\n store.watch(watcherSelector, debouncedEffect, options);\n\n if (immediate) {\n Promise.resolve().then(() => {\n emit(watcherSelector());\n });\n }\n });\n}\n\n/**\n * This function \"wraps\" the watcher effect (the callback of the watcher) with debounce to avoid\n * repeating events and request. Right now this function wraps every effect in a debounce and adds\n * an extra debounce to the \"SecondLevelEvent\" events, to try to delay this events after the state\n * change events.\n *\n * @param event - The {@link XEvent} to emit.\n * @param watcherEffect - The callback to execute.\n * @returns A new function with the `watcherEffect` callback wrapped in debounce.\n */\nfunction debounceWatcherEffect(\n event: XEvent,\n watcherEffect: (newValue: unknown, oldValue: unknown) => void\n): (newValue: unknown, oldValue: unknown) => void {\n /*\n * Due the debounce added to the watch callback, the `oldValue` would be the one from the last\n * watcher execution instead of the last callback execution. This would cause problems receiving\n * unstable oldValues, used in the Emitter filter.\n * To solve this, we store the `oldValue` of the watcher in the `previousValue` variable, and we\n * keep there until the watcher callback is finally executed (after the debounce). Then this\n * `previousValue` is cleared to store the next `oldValue`.\n */\n let previousValue: unknown = undefined;\n\n let watcherCallback = debounce((newValue: unknown, oldValue: unknown): void => {\n watcherEffect(newValue, oldValue);\n previousValue = undefined;\n }, 0);\n /* Only applying the extra debounce to the \"SecondLevelEvent\" events to avoid repeating outer\n * effects (requests, URL changes). If we only apply the debounce to all the events we still have\n * the problem of outer effects. */\n if (isSecondLevelEventEmitter(event)) {\n const previousCallback = watcherCallback;\n const debouncedPreviousCallback = debounce(previousCallback, 0);\n watcherCallback = ((n, o) => {\n previousCallback.cancel();\n debouncedPreviousCallback(n, o);\n }) as DebouncedFunction<any>;\n }\n\n return (newValue, oldValue) => {\n previousValue = previousValue !== undefined ? previousValue : oldValue;\n watcherCallback(newValue, previousValue);\n };\n}\n\n/**\n * Transforms a {@link AnySimpleStateSelector} into a {@link AnyStateSelector}, and sets\n * default values for its properties.\n *\n * @param stateSelector - The state selector to normalize.\n * @param event - The event name of the emitter.\n * @returns A {@link AnyStateSelector} with all the properties set.\n *\n * @internal\n */\nfunction normalizeStateSelector(\n stateSelector: AnySimpleStateSelector | AnyStateSelector,\n event: XEvent\n): Required<AnyStateSelector> {\n const normalizedSelector = isSimpleSelector(stateSelector)\n ? { selector: stateSelector }\n : stateSelector;\n return {\n deep: false,\n immediate: false,\n filter: isSecondLevelEventEmitter(event)\n ? (newValue, oldValue) => !hasPayloadChanged(newValue, oldValue)\n : () => true,\n ...normalizedSelector\n };\n}\n\n/**\n * Checks if a the type of the store emitter selector is simple or complex. This selector can be\n * a function if it is simple or an object with the selector and other options if it is complex.\n *\n * @param stateSelector - The store emitter selector.\n * @returns A boolean which flags if the stateSelector is simple (function) or complex (object).\n *\n * @internal\n */\nexport function isSimpleSelector(\n stateSelector: AnySimpleStateSelector | AnyStateSelector\n): stateSelector is AnySimpleStateSelector {\n return typeof stateSelector === 'function';\n}\n\n// TODO: Generalize the Naming of the Events to take this into account\nconst secondLevelEvents: RegExp[] = [/RequestChanged$/, /UrlStateChanged$/];\n\n/**\n * Function to detect if an {@link XEvent} is a \"SecondLevelEvent\", to treat it differently.\n *\n * @param event - The name of the {@link XEvent} to check.\n * @returns True if is an `SecondLevelEvent`, False otherwise.\n *\n * @internal\n */\nfunction isSecondLevelEventEmitter(event: XEvent): boolean {\n return secondLevelEvents.some(regex => regex.test(event));\n}\n/**\n * Function to filter if a payload of an {@link XEvent} has really changed or not. It only\n * compares the first level of fields and not deeply, to avoid CPU consuming task here.\n *\n * @param request1 - First request to compare.\n * @param request2 - Second request to compare.\n * @returns True if the two objects are different, false otherwise.\n *\n * @internal\n */\nfunction hasPayloadChanged<T extends Dictionary>(request1?: T, request2?: T): boolean {\n if (request1 === request2) {\n return true;\n }\n if (!request1 || !request2) {\n return false;\n }\n const keys1 = Object.keys(request1);\n const keys2 = Object.keys(request2);\n if (keys1.length !== keys2.length) {\n return false;\n }\n return !keys1.some(key => request1[key] !== request2[key]);\n}\n"],"names":[],"mappings":"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"}
|
package/js/plugins/x-plugin.js
CHANGED
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
import { deepMerge } from '@empathyco/x-deep-merge';
|
|
2
|
+
import { forEach } from '@empathyco/x-utils';
|
|
2
3
|
import Vuex, { Store } from 'vuex';
|
|
3
4
|
import { FILTERS_REGISTRY } from '../filters/filters.registry.js';
|
|
4
5
|
import { cleanGettersProxyCache } from '../store/utils/getters-proxy.utils.js';
|
|
5
6
|
import { RootXStoreModule } from '../store/x.module.js';
|
|
6
|
-
import { forEach } from '../utils/object.js';
|
|
7
|
-
import '../utils/storage.js';
|
|
8
7
|
import { bus } from './x-bus.js';
|
|
9
8
|
import { registerStoreEmitters } from './x-emitters.js';
|
|
10
9
|
import { createXComponentAPIMixin } from './x-plugin.mixin.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"x-plugin.js","sources":["../../../src/plugins/x-plugin.ts"],"sourcesContent":["import { SearchAdapter } from '@empathyco/x-adapter';\nimport { deepMerge } from '@empathyco/x-deep-merge';\nimport { PluginObject, VueConstructor } from 'vue';\nimport Vuex, { Module, Store } from 'vuex';\nimport { FILTERS_REGISTRY } from '../filters/filters.registry';\nimport { AnyXStoreModule, RootXStoreState } from '../store/store.types';\nimport { cleanGettersProxyCache } from '../store/utils/getters-proxy.utils';\nimport { RootXStoreModule } from '../store/x.module';\nimport { Dictionary, forEach } from '../utils';\nimport { AnyWire } from '../wiring/wiring.types';\nimport { AnyXModule, XModuleName } from '../x-modules/x-modules.types';\nimport { bus } from './x-bus';\nimport { XBus } from './x-bus.types';\nimport { registerStoreEmitters } from './x-emitters';\nimport { createXComponentAPIMixin } from './x-plugin.mixin';\nimport { AnyXStoreModuleOption, XModuleOptions, XPluginOptions } from './x-plugin.types';\nimport { assertXPluginOptionsAreValid } from './x-plugin.utils';\n\n/**\n * Vue plugin that initializes the properties needed by the x-components, and exposes the events bus\n * and the adapter after it has been installed.\n *\n * @public\n */\nexport class XPlugin implements PluginObject<XPluginOptions> {\n /**\n * {@link @empathyco/x-adapter#SearchAdapter | SearchAdapter} Is the middleware between\n * the components and our API where data can be mapped to client needs.\n * This property is only available after installing the plugin.\n *\n * @returns The installed adapter.\n * @throws If this property is accessed before calling `Vue.use(xPlugin)`.\n * @public\n */\n public static get adapter(): SearchAdapter {\n return this.getInstance().adapter;\n }\n\n /**\n * Exposed {@link XBus}, so any kind of application can subscribe to {@link XEventsTypes}\n * without having to pass through a component.\n * This property is only available after installing the plugin.\n *\n * @returns The installed bus.\n * @throws If this property is accessed before calling `Vue.use(xPlugin)`.\n * @public\n */\n public static get bus(): XBus {\n return this.getInstance().bus;\n }\n\n /**\n * {@link https://vuex.vuejs.org | Vuex Store} Is the place where all shared data\n * is saved.\n *\n * @returns The installed store.\n * @throws If this property is accessed before calling `Vue.use(xPlugin)`.\n * @public\n */\n public static get store(): Store<RootXStoreState> {\n return this.getInstance().store;\n }\n\n /**\n * Safely retrieves the installed instance of the XPlugin.\n *\n * @returns The installed instance of the XPlugin.\n * @throws If this method is called before calling `Vue.use(xPlugin)`.\n * @internal\n */\n protected static getInstance(): XPlugin {\n if (!this.instance) {\n throw Error(\"XPlugin must be installed before accessing it's API.\");\n }\n return this.instance;\n }\n\n /**\n * Record of modules that have been tried to be installed before the installation of the plugin.\n *\n * @internal\n */\n protected static pendingXModules: Partial<Record<XModuleName, AnyXModule>> = {};\n\n /**\n * Instance of the installed plugin. Used to expose the bus and the adapter.\n *\n * @internal\n */\n protected static instance?: XPlugin;\n\n /**\n * Bus for retrieving the observables when registering the wiring.\n *\n * @internal\n */\n protected bus: XBus;\n\n /**\n * Adapter for the API, responsible for transforming requests and responses.\n *\n * @internal\n */\n protected adapter!: SearchAdapter;\n\n /**\n * Set of the already installed {@link XModule | XModules} to avoid re-registering them.\n *\n * @internal\n */\n protected installedXModules = new Set<string>();\n\n /**\n * True if the plugin has been installed in a Vue instance, in this case\n * {@link XModule |Xmodules} will be installed immediately. False otherwise, in this case\n * {@link XModule | XModules} will be installed lazily when the {@link XPlugin#install} method\n * is called.\n *\n * @internal\n */\n protected isInstalled = false;\n\n /**\n * The install options of the plugin, where all the customization of\n * {@link XModule | XModules} is done.\n *\n * @internal\n */\n protected options!: XPluginOptions;\n\n /**\n * The Vuex store, to pass to the wires for its registration, and to register the store\n * modules on it.\n *\n * @internal\n */\n protected store!: Store<any>;\n /**\n * The global Vue, passed by the install method. Used to apply the global mixin\n * {@link createXComponentAPIMixin}, and install the {@link https://vuex.vuejs.org/ | Vuex}\n * plugin.\n *\n * @internal\n */\n protected vue!: VueConstructor;\n\n /**\n * Creates a new instance of the XPlugin with the given bus passed as parameter.\n *\n * @param bus - The {@link XBus} implementation to use for the plugin.\n *\n * @public\n */\n public constructor(bus: XBus) {\n this.bus = bus;\n }\n\n /**\n * If the plugin has already been installed, it immediately registers a {@link XModule}. If it\n * has not been installed yet, it stores the module in a list until the plugin is installed.\n *\n * @param xModule - The module to register.\n *\n * @public\n */\n static registerXModule(xModule: AnyXModule): void {\n if (this.instance) {\n this.instance.registerXModule(xModule);\n } else {\n this.lazyRegisterXModule(xModule);\n }\n }\n\n /**\n * Utility method for resetting the installed instance of the plugin.\n *\n * @remarks Use only for testing.\n *\n * @internal\n */\n static resetInstance(): void {\n cleanGettersProxyCache();\n this.instance = undefined;\n }\n\n /**\n * Stores the {@link XModule} in a dictionary, so it can be registered later in the install\n * process.\n *\n * @param xModule - The module to register.\n *\n * @internal\n */\n protected static lazyRegisterXModule(xModule: AnyXModule): void {\n this.pendingXModules[xModule.name] = xModule;\n }\n\n /**\n * Installs the plugin into the Vue instance.\n *\n * @param vue - The GlobalVue object.\n * @param options - The options to install this plugin with.\n * @throws If the XPlugin has already been installed, or the options are not valid.\n *\n * @internal\n */\n install(vue: VueConstructor, options?: XPluginOptions): void {\n if (this.isInstalled) {\n throw new Error('XPlugin has already been installed');\n }\n assertXPluginOptionsAreValid(options);\n XPlugin.instance = this;\n this.vue = vue;\n this.options = options;\n this.adapter = options.adapter;\n this.createAdapterConfigChangedListener();\n this.registerStore();\n this.applyMixins();\n this.registerFilters();\n this.registerInitialModules();\n this.registerPendingXModules();\n this.isInstalled = true;\n }\n\n /**\n * Performs the registration of a {@link XModule}.\n *\n * @param xModule - The module to register.\n *\n * @internal\n */\n protected registerXModule(xModule: AnyXModule): void {\n if (!this.installedXModules.has(xModule.name)) {\n const customizedXModule = this.customizeXModule(xModule);\n this.registerStoreModule(customizedXModule);\n this.registerStoreEmitters(customizedXModule);\n // The wiring must be registered after the store emitters\n // to allow lazy loaded modules work properly.\n this.registerWiring(customizedXModule);\n this.installedXModules.add(xModule.name);\n }\n }\n\n /**\n * Performs a customization of a {@link XModule} using the XPlugin public and private options.\n *\n * @param xModule - The module to customize.\n * @returns The customized xModule.\n *\n * @internal\n */\n protected customizeXModule({\n name,\n wiring,\n storeModule,\n storeEmitters,\n ...restXModule\n }: AnyXModule): AnyXModule {\n const { wiring: wiringOptions, config }: XModuleOptions<XModuleName> =\n this.options.xModules?.[name] ?? {};\n\n const { storeModule: storeModuleOptions, storeEmitters: emittersOptions } =\n this.options.__PRIVATE__xModules?.[name] ?? {};\n\n return {\n name,\n wiring: wiringOptions ? deepMerge({}, wiring, wiringOptions) : wiring,\n storeModule: this.customizeStoreModule(storeModule, storeModuleOptions ?? {}, config),\n storeEmitters: emittersOptions\n ? deepMerge({}, storeEmitters, emittersOptions)\n : storeEmitters,\n ...restXModule\n };\n }\n\n /**\n * Performs the registration of the wiring, retrieving the observable for each event, and\n * executing each wire.\n *\n * @param xModule - The {@link XModule} to register its wiring.\n *\n * @internal\n */\n protected registerWiring({ wiring }: AnyXModule): void {\n forEach(wiring, (event, wires: Dictionary<AnyWire>) => {\n // Obtain the observable\n const observable = this.bus.on(event, true);\n // Register event wires\n forEach(wires, (_, wire) => {\n wire(observable, this.store, this.bus.on.bind(this.bus));\n });\n });\n }\n\n /**\n * Registers a {@link https://vuex.vuejs.org/ | Vuex} store module under the 'x' module.\n *\n * @param xModule - The {@link XModule} to register its Store Module.\n *\n * @internal\n */\n protected registerStoreModule({ name, storeModule }: AnyXModule): void {\n (storeModule as Module<any, any>).namespaced = true;\n this.store.registerModule(['x', name], storeModule);\n }\n\n /**\n * Overrides a {@link https://vuex.vuejs.org/ | Vuex} store module definition.\n *\n * Priority of configuration merging.\n * 1st {@link XPluginOptions.xModules | xModules XPlugin option}.\n * 2nd {@link XPluginOptions.__PRIVATE__xModules | Private xModules XPlugin option}.\n * 3rd {@link XStoreModule.state | Default state of the xModule}.\n *\n * @param defaultModule - The default store module to override.\n * @param moduleOptions - The state, actions, mutations and getters to override the defaultModule.\n * @param configOptions - The state config to override the moduleOptions.\n * @returns The {@link XStoreModule} customized.\n *\n * @internal\n */\n protected customizeStoreModule(\n { state: defaultState, ...actionsGettersMutations }: AnyXStoreModule,\n { state: xModuleState, ...newActionsGettersMutations }: AnyXStoreModuleOption,\n configOptions: unknown\n ): AnyXStoreModule {\n const configOptionsObject = configOptions ? { config: configOptions } : {};\n const customizedModule = deepMerge({}, actionsGettersMutations, newActionsGettersMutations);\n customizedModule.state = deepMerge(defaultState(), xModuleState, configOptionsObject);\n return customizedModule;\n }\n\n /**\n * Registers the store emitters, making them emit the event when the part of the state selected\n * changes.\n *\n * @param xModule - The {@link XModule} to register its Store Emitters.\n *\n * @internal\n */\n protected registerStoreEmitters(xModule: AnyXModule): void {\n registerStoreEmitters(xModule, this.bus, this.store);\n }\n\n /**\n * Registers the {@link https://vuex.vuejs.org/ | Vuex} store. If the store has not been passed\n * through the {@link XPluginOptions} object, it creates one, and injects it in the Vue\n * prototype. Then it register an x module in the store, to safe scope all the\n * {@link XModule | XModules} dynamically installed.\n *\n * @internal\n */\n protected registerStore(): void {\n this.vue.use(Vuex); // We can safely install Vuex because if it is already installed Vue\n // will simply ignore it\n this.store =\n this.options.store ??\n new Store({\n strict: process.env.NODE_ENV !== 'production'\n });\n if (!this.options.store) {\n this.vue.prototype.$store = this.store;\n }\n this.store.registerModule('x', RootXStoreModule);\n }\n\n /**\n * Applies the {@link createXComponentAPIMixin} mixin in the global Vue.\n *\n * @internal\n */\n protected applyMixins(): void {\n this.vue.mixin(createXComponentAPIMixin(this.bus));\n }\n\n /**\n * Registers the initial {@link XModule | XModules} during the {@link XPlugin} installation.\n *\n * @internal\n */\n protected registerInitialModules(): void {\n this.options.initialXModules?.forEach(xModule => {\n this.registerXModule(xModule);\n });\n }\n\n /**\n * Registers the pending {@link XModule | XModules}, that requested to be registered before the\n * installation of the plugin.\n *\n * @internal\n */\n protected registerPendingXModules(): void {\n forEach(XPlugin.pendingXModules, (_, xModule) => {\n this.registerXModule(xModule);\n });\n XPlugin.pendingXModules = {};\n }\n\n /**\n * If the received adapter supports it, it registers a listener to emit the\n * {@link XEventsTypes.AdapterConfigChanged} event whenever the config of it changes.\n *\n * @internal\n */\n protected createAdapterConfigChangedListener(): void {\n this.options.adapter.addConfigChangedListener?.(newAdapterConfig => {\n this.bus.emit('AdapterConfigChanged', newAdapterConfig);\n });\n }\n\n /**\n * Registers filters globally.\n *\n * @internal\n */\n protected registerFilters(): void {\n forEach(FILTERS_REGISTRY, (filterName, filterFunction) =>\n this.vue.filter(filterName, filterFunction)\n );\n }\n}\n\n/**\n * Vue plugin that modifies each component instance, extending them with the\n * {@link XComponentAPI | X Component API }.\n *\n * @example\n * Minimal installation example. A search adapter is needed for the plugin to work, and connect to\n * the API.\n * ```typescript\n * const adapter = new EmpathyAdapterBuilder()\n * .withConfiguration({instance: 'my-instance-id'})\n * .build();\n * Vue.use(xPlugin, { adapter });\n * ```\n *\n * @example\n * If you are using {@link https://vuex.vuejs.org/ | Vuex} in your project you must install its\n * plugin, and instantiate an store before installing the XPlugin:\n * ```typescript\n * Vue.use(Vuex);\n * const store = new Store({ ... });\n * Vue.use(xPlugin, { adapter, store });\n * ```\n * @public\n */\nexport const xPlugin = new XPlugin(bus);\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"x-plugin.js","sources":["../../../src/plugins/x-plugin.ts"],"sourcesContent":["import { SearchAdapter } from '@empathyco/x-adapter';\nimport { deepMerge } from '@empathyco/x-deep-merge';\nimport { forEach, Dictionary } from '@empathyco/x-utils';\nimport { PluginObject, VueConstructor } from 'vue';\nimport Vuex, { Module, Store } from 'vuex';\nimport { FILTERS_REGISTRY } from '../filters/filters.registry';\nimport { AnyXStoreModule, RootXStoreState } from '../store/store.types';\nimport { cleanGettersProxyCache } from '../store/utils/getters-proxy.utils';\nimport { RootXStoreModule } from '../store/x.module';\nimport { AnyWire } from '../wiring/wiring.types';\nimport { AnyXModule, XModuleName } from '../x-modules/x-modules.types';\nimport { bus } from './x-bus';\nimport { XBus } from './x-bus.types';\nimport { registerStoreEmitters } from './x-emitters';\nimport { createXComponentAPIMixin } from './x-plugin.mixin';\nimport { AnyXStoreModuleOption, XModuleOptions, XPluginOptions } from './x-plugin.types';\nimport { assertXPluginOptionsAreValid } from './x-plugin.utils';\n\n/**\n * Vue plugin that initializes the properties needed by the x-components, and exposes the events bus\n * and the adapter after it has been installed.\n *\n * @public\n */\nexport class XPlugin implements PluginObject<XPluginOptions> {\n /**\n * {@link @empathyco/x-adapter#SearchAdapter | SearchAdapter} Is the middleware between\n * the components and our API where data can be mapped to client needs.\n * This property is only available after installing the plugin.\n *\n * @returns The installed adapter.\n * @throws If this property is accessed before calling `Vue.use(xPlugin)`.\n * @public\n */\n public static get adapter(): SearchAdapter {\n return this.getInstance().adapter;\n }\n\n /**\n * Exposed {@link XBus}, so any kind of application can subscribe to {@link XEventsTypes}\n * without having to pass through a component.\n * This property is only available after installing the plugin.\n *\n * @returns The installed bus.\n * @throws If this property is accessed before calling `Vue.use(xPlugin)`.\n * @public\n */\n public static get bus(): XBus {\n return this.getInstance().bus;\n }\n\n /**\n * {@link https://vuex.vuejs.org | Vuex Store} Is the place where all shared data\n * is saved.\n *\n * @returns The installed store.\n * @throws If this property is accessed before calling `Vue.use(xPlugin)`.\n * @public\n */\n public static get store(): Store<RootXStoreState> {\n return this.getInstance().store;\n }\n\n /**\n * Safely retrieves the installed instance of the XPlugin.\n *\n * @returns The installed instance of the XPlugin.\n * @throws If this method is called before calling `Vue.use(xPlugin)`.\n * @internal\n */\n protected static getInstance(): XPlugin {\n if (!this.instance) {\n throw Error(\"XPlugin must be installed before accessing it's API.\");\n }\n return this.instance;\n }\n\n /**\n * Record of modules that have been tried to be installed before the installation of the plugin.\n *\n * @internal\n */\n protected static pendingXModules: Partial<Record<XModuleName, AnyXModule>> = {};\n\n /**\n * Instance of the installed plugin. Used to expose the bus and the adapter.\n *\n * @internal\n */\n protected static instance?: XPlugin;\n\n /**\n * Bus for retrieving the observables when registering the wiring.\n *\n * @internal\n */\n protected bus: XBus;\n\n /**\n * Adapter for the API, responsible for transforming requests and responses.\n *\n * @internal\n */\n protected adapter!: SearchAdapter;\n\n /**\n * Set of the already installed {@link XModule | XModules} to avoid re-registering them.\n *\n * @internal\n */\n protected installedXModules = new Set<string>();\n\n /**\n * True if the plugin has been installed in a Vue instance, in this case\n * {@link XModule |Xmodules} will be installed immediately. False otherwise, in this case\n * {@link XModule | XModules} will be installed lazily when the {@link XPlugin#install} method\n * is called.\n *\n * @internal\n */\n protected isInstalled = false;\n\n /**\n * The install options of the plugin, where all the customization of\n * {@link XModule | XModules} is done.\n *\n * @internal\n */\n protected options!: XPluginOptions;\n\n /**\n * The Vuex store, to pass to the wires for its registration, and to register the store\n * modules on it.\n *\n * @internal\n */\n protected store!: Store<any>;\n /**\n * The global Vue, passed by the install method. Used to apply the global mixin\n * {@link createXComponentAPIMixin}, and install the {@link https://vuex.vuejs.org/ | Vuex}\n * plugin.\n *\n * @internal\n */\n protected vue!: VueConstructor;\n\n /**\n * Creates a new instance of the XPlugin with the given bus passed as parameter.\n *\n * @param bus - The {@link XBus} implementation to use for the plugin.\n *\n * @public\n */\n public constructor(bus: XBus) {\n this.bus = bus;\n }\n\n /**\n * If the plugin has already been installed, it immediately registers a {@link XModule}. If it\n * has not been installed yet, it stores the module in a list until the plugin is installed.\n *\n * @param xModule - The module to register.\n *\n * @public\n */\n static registerXModule(xModule: AnyXModule): void {\n if (this.instance) {\n this.instance.registerXModule(xModule);\n } else {\n this.lazyRegisterXModule(xModule);\n }\n }\n\n /**\n * Utility method for resetting the installed instance of the plugin.\n *\n * @remarks Use only for testing.\n *\n * @internal\n */\n static resetInstance(): void {\n cleanGettersProxyCache();\n this.instance = undefined;\n }\n\n /**\n * Stores the {@link XModule} in a dictionary, so it can be registered later in the install\n * process.\n *\n * @param xModule - The module to register.\n *\n * @internal\n */\n protected static lazyRegisterXModule(xModule: AnyXModule): void {\n this.pendingXModules[xModule.name] = xModule;\n }\n\n /**\n * Installs the plugin into the Vue instance.\n *\n * @param vue - The GlobalVue object.\n * @param options - The options to install this plugin with.\n * @throws If the XPlugin has already been installed, or the options are not valid.\n *\n * @internal\n */\n install(vue: VueConstructor, options?: XPluginOptions): void {\n if (this.isInstalled) {\n throw new Error('XPlugin has already been installed');\n }\n assertXPluginOptionsAreValid(options);\n XPlugin.instance = this;\n this.vue = vue;\n this.options = options;\n this.adapter = options.adapter;\n this.createAdapterConfigChangedListener();\n this.registerStore();\n this.applyMixins();\n this.registerFilters();\n this.registerInitialModules();\n this.registerPendingXModules();\n this.isInstalled = true;\n }\n\n /**\n * Performs the registration of a {@link XModule}.\n *\n * @param xModule - The module to register.\n *\n * @internal\n */\n protected registerXModule(xModule: AnyXModule): void {\n if (!this.installedXModules.has(xModule.name)) {\n const customizedXModule = this.customizeXModule(xModule);\n this.registerStoreModule(customizedXModule);\n this.registerStoreEmitters(customizedXModule);\n // The wiring must be registered after the store emitters\n // to allow lazy loaded modules work properly.\n this.registerWiring(customizedXModule);\n this.installedXModules.add(xModule.name);\n }\n }\n\n /**\n * Performs a customization of a {@link XModule} using the XPlugin public and private options.\n *\n * @param xModule - The module to customize.\n * @returns The customized xModule.\n *\n * @internal\n */\n protected customizeXModule({\n name,\n wiring,\n storeModule,\n storeEmitters,\n ...restXModule\n }: AnyXModule): AnyXModule {\n const { wiring: wiringOptions, config }: XModuleOptions<XModuleName> =\n this.options.xModules?.[name] ?? {};\n\n const { storeModule: storeModuleOptions, storeEmitters: emittersOptions } =\n this.options.__PRIVATE__xModules?.[name] ?? {};\n\n return {\n name,\n wiring: wiringOptions ? deepMerge({}, wiring, wiringOptions) : wiring,\n storeModule: this.customizeStoreModule(storeModule, storeModuleOptions ?? {}, config),\n storeEmitters: emittersOptions\n ? deepMerge({}, storeEmitters, emittersOptions)\n : storeEmitters,\n ...restXModule\n };\n }\n\n /**\n * Performs the registration of the wiring, retrieving the observable for each event, and\n * executing each wire.\n *\n * @param xModule - The {@link XModule} to register its wiring.\n *\n * @internal\n */\n protected registerWiring({ wiring }: AnyXModule): void {\n forEach(wiring, (event, wires: Dictionary<AnyWire>) => {\n // Obtain the observable\n const observable = this.bus.on(event, true);\n // Register event wires\n forEach(wires, (_, wire) => {\n wire(observable, this.store, this.bus.on.bind(this.bus));\n });\n });\n }\n\n /**\n * Registers a {@link https://vuex.vuejs.org/ | Vuex} store module under the 'x' module.\n *\n * @param xModule - The {@link XModule} to register its Store Module.\n *\n * @internal\n */\n protected registerStoreModule({ name, storeModule }: AnyXModule): void {\n (storeModule as Module<any, any>).namespaced = true;\n this.store.registerModule(['x', name], storeModule);\n }\n\n /**\n * Overrides a {@link https://vuex.vuejs.org/ | Vuex} store module definition.\n *\n * Priority of configuration merging.\n * 1st {@link XPluginOptions.xModules | xModules XPlugin option}.\n * 2nd {@link XPluginOptions.__PRIVATE__xModules | Private xModules XPlugin option}.\n * 3rd {@link XStoreModule.state | Default state of the xModule}.\n *\n * @param defaultModule - The default store module to override.\n * @param moduleOptions - The state, actions, mutations and getters to override the defaultModule.\n * @param configOptions - The state config to override the moduleOptions.\n * @returns The {@link XStoreModule} customized.\n *\n * @internal\n */\n protected customizeStoreModule(\n { state: defaultState, ...actionsGettersMutations }: AnyXStoreModule,\n { state: xModuleState, ...newActionsGettersMutations }: AnyXStoreModuleOption,\n configOptions: unknown\n ): AnyXStoreModule {\n const configOptionsObject = configOptions ? { config: configOptions } : {};\n const customizedModule = deepMerge({}, actionsGettersMutations, newActionsGettersMutations);\n customizedModule.state = deepMerge(defaultState(), xModuleState, configOptionsObject);\n return customizedModule;\n }\n\n /**\n * Registers the store emitters, making them emit the event when the part of the state selected\n * changes.\n *\n * @param xModule - The {@link XModule} to register its Store Emitters.\n *\n * @internal\n */\n protected registerStoreEmitters(xModule: AnyXModule): void {\n registerStoreEmitters(xModule, this.bus, this.store);\n }\n\n /**\n * Registers the {@link https://vuex.vuejs.org/ | Vuex} store. If the store has not been passed\n * through the {@link XPluginOptions} object, it creates one, and injects it in the Vue\n * prototype. Then it register an x module in the store, to safe scope all the\n * {@link XModule | XModules} dynamically installed.\n *\n * @internal\n */\n protected registerStore(): void {\n this.vue.use(Vuex); // We can safely install Vuex because if it is already installed Vue\n // will simply ignore it\n this.store =\n this.options.store ??\n new Store({\n strict: process.env.NODE_ENV !== 'production'\n });\n if (!this.options.store) {\n this.vue.prototype.$store = this.store;\n }\n this.store.registerModule('x', RootXStoreModule);\n }\n\n /**\n * Applies the {@link createXComponentAPIMixin} mixin in the global Vue.\n *\n * @internal\n */\n protected applyMixins(): void {\n this.vue.mixin(createXComponentAPIMixin(this.bus));\n }\n\n /**\n * Registers the initial {@link XModule | XModules} during the {@link XPlugin} installation.\n *\n * @internal\n */\n protected registerInitialModules(): void {\n this.options.initialXModules?.forEach(xModule => {\n this.registerXModule(xModule);\n });\n }\n\n /**\n * Registers the pending {@link XModule | XModules}, that requested to be registered before the\n * installation of the plugin.\n *\n * @internal\n */\n protected registerPendingXModules(): void {\n forEach(XPlugin.pendingXModules, (_, xModule) => {\n this.registerXModule(xModule);\n });\n XPlugin.pendingXModules = {};\n }\n\n /**\n * If the received adapter supports it, it registers a listener to emit the\n * {@link XEventsTypes.AdapterConfigChanged} event whenever the config of it changes.\n *\n * @internal\n */\n protected createAdapterConfigChangedListener(): void {\n this.options.adapter.addConfigChangedListener?.(newAdapterConfig => {\n this.bus.emit('AdapterConfigChanged', newAdapterConfig);\n });\n }\n\n /**\n * Registers filters globally.\n *\n * @internal\n */\n protected registerFilters(): void {\n forEach(FILTERS_REGISTRY, (filterName, filterFunction) =>\n this.vue.filter(filterName, filterFunction)\n );\n }\n}\n\n/**\n * Vue plugin that modifies each component instance, extending them with the\n * {@link XComponentAPI | X Component API }.\n *\n * @example\n * Minimal installation example. A search adapter is needed for the plugin to work, and connect to\n * the API.\n * ```typescript\n * const adapter = new EmpathyAdapterBuilder()\n * .withConfiguration({instance: 'my-instance-id'})\n * .build();\n * Vue.use(xPlugin, { adapter });\n * ```\n *\n * @example\n * If you are using {@link https://vuex.vuejs.org/ | Vuex} in your project you must install its\n * plugin, and instantiate an store before installing the XPlugin:\n * ```typescript\n * Vue.use(Vuex);\n * const store = new Store({ ... });\n * Vue.use(xPlugin, { adapter, store });\n * ```\n * @public\n */\nexport const xPlugin = new XPlugin(bus);\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"getters-proxy.utils.js","sources":["../../../../src/store/utils/getters-proxy.utils.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"getters-proxy.utils.js","sources":["../../../../src/store/utils/getters-proxy.utils.ts"],"sourcesContent":["import { reduce, Dictionary } from '@empathyco/x-utils';\nimport { Store } from 'vuex';\nimport { ExtractGetters, XModuleName } from '../../x-modules/x-modules.types';\nimport { AnyXStoreModule } from '../store.types';\n\ntype Getters = { [ModuleName in XModuleName]?: ExtractGetters<ModuleName> };\nlet cache: Getters = {};\n/**\n * Creates or return a proxy object of the getters of the storeModule passed.\n *\n * @param getters - The Vuex Store Getters.\n * @param moduleName - The name of the module.\n * @param storeModule - The store module.\n * @returns A {@link GettersTree} object with only the getters of the {@link XModule}.\n *\n * @internal\n *\n * @remarks This proxy will be used by the stateSelector, of the module. This is done to ensure that\n * a Vuex stateSelector can only access the getters of the {@link XModule} where it is registered.\n * This function task can be done with {@link getGettersProxy}, just without passing the\n * storeModule. But in that case every time we register emitters in a module, it will loop over all\n * the getters of all the store. This way, passing the moduleNeeded, it only loops over the getters\n * of that module. It is a performance question to have this two different implementations.\n *\n */\nexport function getGettersProxyFromModule<ModuleName extends XModuleName>(\n getters: Pick<Store<any>, 'getters'>,\n moduleName: ModuleName,\n storeModule: AnyXStoreModule\n): ExtractGetters<ModuleName> {\n /* TODO: Review why TS is not able to exclude undefined types from the Getters cache */\n const cachedGetter = cache[moduleName];\n if (isCacheGetterDefined<ModuleName>(cachedGetter)) {\n return cachedGetter;\n }\n const modulePath = `x/${moduleName}/`;\n const safeGetters = reduce(\n storeModule.getters as Dictionary,\n (safeGettersProxy, getterName) =>\n defineGetterProxy(safeGettersProxy, getterName, `${modulePath}${getterName}`, getters),\n {} as ExtractGetters<ModuleName>\n );\n cache[moduleName] = safeGetters as unknown as Getters[ModuleName];\n return safeGetters;\n}\n\n/**\n * Creates or return a proxy object of the getters of the module with the moduleName passed.\n *\n * @param getters - The Vuex Store Getters.\n * @param moduleName - The name of the module.\n * @returns A {@link GettersTree} object with only the getters of the {@link XModule}.\n *\n * @internal\n *\n * @remarks This proxy will be used wireCommit to pass the module state and getters, to a function\n * that will return the payload to commit the mutation.\n */\nexport function getGettersProxy<ModuleName extends XModuleName>(\n getters: Pick<Store<any>, 'getters'>,\n moduleName: ModuleName\n): ExtractGetters<ModuleName> {\n /* TODO: Review why TS is not able to exclude undefined types from the Getters cache */\n const cachedGetter = cache[moduleName];\n if (isCacheGetterDefined<ModuleName>(cachedGetter)) {\n return cachedGetter;\n }\n const modulePath = `x/${moduleName}/`;\n const getterKeys: string[] = Object.keys(getters).filter(getterKey =>\n getterKey.startsWith(modulePath)\n );\n const safeGetters = getterKeys.reduce((safeGettersProxy, fullPathGetterName) => {\n const getterName = fullPathGetterName.replace(modulePath, '');\n return defineGetterProxy(safeGettersProxy, getterName, fullPathGetterName, getters);\n }, {} as ExtractGetters<ModuleName>);\n cache[moduleName] = safeGetters as unknown as Getters[ModuleName];\n return safeGetters;\n}\n\n/**\n * Defines a JS getter in safeGettersProxy object that returns the Vuex getter value.\n *\n * @param safeGettersProxy - The object where the proxy will be defined.\n * @param getterName - The name of the Getter without path. For example: 'trimQuery'.\n * @param fullPathGetterName - The name of the getter to be accessed with the full path.\n * For example: 'x/searchBox/trimmedQuery'.\n * @param getters - The Vuex Store Getters.\n * @returns The same safeGetterProxy with new get defined.\n *\n * @internal\n */\nfunction defineGetterProxy<ModuleName extends XModuleName>(\n safeGettersProxy: ExtractGetters<ModuleName>,\n getterName: string,\n fullPathGetterName: string,\n getters: Dictionary\n): ExtractGetters<ModuleName> {\n return Object.defineProperty(safeGettersProxy, getterName, {\n get() {\n return getters[fullPathGetterName];\n },\n enumerable: true\n });\n}\n\n/** Clean the cache (This is for testing purpose).\n *\n * @internal\n * */\nexport function cleanGettersProxyCache(): void {\n cache = {};\n}\n\n/**\n * Checks if the getter cached is defined.\n *\n * @param cachedGetter - The getter cached.\n * @returns If the getters is defined or not.\n *\n * @internal\n */\nfunction isCacheGetterDefined<ModuleName extends XModuleName>(\n cachedGetter: ExtractGetters<ModuleName> | undefined | unknown\n): cachedGetter is ExtractGetters<ModuleName> {\n return cachedGetter !== undefined;\n}\n"],"names":[],"mappings":";;AAMA,IAAI,KAAK,GAAY,EAAE,CAAC;AACxB;;;;;;;;;;;;;;;;;;SAkBgB,yBAAyB,CACvC,OAAoC,EACpC,UAAsB,EACtB,WAA4B;;IAG5B,MAAM,YAAY,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC;IACvC,IAAI,oBAAoB,CAAa,YAAY,CAAC,EAAE;QAClD,OAAO,YAAY,CAAC;KACrB;IACD,MAAM,UAAU,GAAG,KAAK,UAAU,GAAG,CAAC;IACtC,MAAM,WAAW,GAAG,MAAM,CACxB,WAAW,CAAC,OAAqB,EACjC,CAAC,gBAAgB,EAAE,UAAU,KAC3B,iBAAiB,CAAC,gBAAgB,EAAE,UAAU,EAAE,GAAG,UAAU,GAAG,UAAU,EAAE,EAAE,OAAO,CAAC,EACxF,EAAgC,CACjC,CAAC;IACF,KAAK,CAAC,UAAU,CAAC,GAAG,WAA6C,CAAC;IAClE,OAAO,WAAW,CAAC;AACrB,CAAC;AAED;;;;;;;;;;;;SAYgB,eAAe,CAC7B,OAAoC,EACpC,UAAsB;;IAGtB,MAAM,YAAY,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC;IACvC,IAAI,oBAAoB,CAAa,YAAY,CAAC,EAAE;QAClD,OAAO,YAAY,CAAC;KACrB;IACD,MAAM,UAAU,GAAG,KAAK,UAAU,GAAG,CAAC;IACtC,MAAM,UAAU,GAAa,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,SAAS,IAChE,SAAS,CAAC,UAAU,CAAC,UAAU,CAAC,CACjC,CAAC;IACF,MAAM,WAAW,GAAG,UAAU,CAAC,MAAM,CAAC,CAAC,gBAAgB,EAAE,kBAAkB;QACzE,MAAM,UAAU,GAAG,kBAAkB,CAAC,OAAO,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;QAC9D,OAAO,iBAAiB,CAAC,gBAAgB,EAAE,UAAU,EAAE,kBAAkB,EAAE,OAAO,CAAC,CAAC;KACrF,EAAE,EAAgC,CAAC,CAAC;IACrC,KAAK,CAAC,UAAU,CAAC,GAAG,WAA6C,CAAC;IAClE,OAAO,WAAW,CAAC;AACrB,CAAC;AAED;;;;;;;;;;;;AAYA,SAAS,iBAAiB,CACxB,gBAA4C,EAC5C,UAAkB,EAClB,kBAA0B,EAC1B,OAAmB;IAEnB,OAAO,MAAM,CAAC,cAAc,CAAC,gBAAgB,EAAE,UAAU,EAAE;QACzD,GAAG;YACD,OAAO,OAAO,CAAC,kBAAkB,CAAC,CAAC;SACpC;QACD,UAAU,EAAE,IAAI;KACjB,CAAC,CAAC;AACL,CAAC;AAED;;;;SAIgB,sBAAsB;IACpC,KAAK,GAAG,EAAE,CAAC;AACb,CAAC;AAED;;;;;;;;AAQA,SAAS,oBAAoB,CAC3B,YAA8D;IAE9D,OAAO,YAAY,KAAK,SAAS,CAAC;AACpC;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"store-emitters.utils.js","sources":["../../../../src/store/utils/store-emitters.utils.ts"],"sourcesContent":["import { WatchOptions } from 'vue';\nimport {
|
|
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,8 +1,8 @@
|
|
|
1
1
|
import { deepMerge } from '@empathyco/x-deep-merge';
|
|
2
|
+
import { cleanUndefined, forEach } from '@empathyco/x-utils';
|
|
2
3
|
import Vue from 'vue';
|
|
3
4
|
import { BaseXBus } from '../../plugins/x-bus.js';
|
|
4
5
|
import { XPlugin } from '../../plugins/x-plugin.js';
|
|
5
|
-
import { cleanUndefined, forEach } from '../../utils/object.js';
|
|
6
6
|
import { BaseXAPI } from '../api/base-api.js';
|
|
7
7
|
|
|
8
8
|
const defaultAdapterConfig = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"x-installer.js","sources":["../../../../src/x-installer/x-installer/x-installer.ts"],"sourcesContent":["import { EmpathyAdapterConfig } from '@empathyco/x-adapter';\nimport { deepMerge } from '@empathyco/x-deep-merge';\nimport Vue, { PluginObject, VueConstructor } from 'vue';\nimport { BaseXBus } from '../../plugins/x-bus';\nimport { XBus } from '../../plugins/x-bus.types';\nimport { XPlugin } from '../../plugins/x-plugin';\nimport { XPluginOptions } from '../../plugins/x-plugin.types';\nimport { cleanUndefined, forEach } from '../../utils/object';\nimport { DeepPartial } from '../../utils/types';\nimport { SnippetConfig, XAPI } from '../api/api.types';\nimport { BaseXAPI } from '../api/base-api';\nimport { InitWrapper, InstallXOptions, VueConstructorPartialArgument } from './types';\n\ndeclare global {\n interface Window {\n X?: XAPI;\n initX?: (() => SnippetConfig) | SnippetConfig;\n }\n}\n\nconst defaultAdapterConfig: DeepPartial<EmpathyAdapterConfig> = {\n env: 'live',\n requestParams: {\n lang: 'es',\n scope: 'default'\n }\n};\n\n/**\n * The purpose of this class is to offer a quick way to initialize the XComponents in a setup\n * project. It allows to receive all the options in {@link InstallXOptions} which is an extension\n * of {@link XPluginOptions} with all the options for the plugin and some options more.\n *\n * This class does multiple things:\n * 1. Install the {@link XPlugin} with the {@link XPluginOptions}.\n * 2. Creates the public {@link XAPI} and add it to global window.\n * 3. Creates the Vue Application for the customer project.\n *\n * The steps 2 & 3 are optional and depends on the options passed in {@link InstallXOptions}.\n *\n * @example The way to use this class is the next:\n * 1. Create the installer passing in the {@link InstallXOptions}. This only save the options:\n *\n * ```\n * const installer = new XInstaller(installXOptions)\n * ```\n *\n * 2. Initialize passing the {@link SnippetConfig}. This installs the plugin and creates the App.\n * There are 3 different ways to do this:\n *\n * 2.1 Using the created installer:\n *\n * ```\n * installer.init(snippetConfig)\n * ```\n *\n * 2.2 If the API option is enabled (`createAPI` is `true` in {@link InstallXOptions}, or\n * is not present as the default value is `true`) then this init step can be done with\n * the Public API:\n *\n * ```\n * window.X.init(snippetConfig)\n * ```\n *\n * 2.3 When the script of the project build is loaded it searches for a global `initX`\n * variable that the customer must have in their web site. This variable can be a\n * function that returns the {@link SnippetConfig} or an object that contains the\n * {@link SnippetConfig} itself:\n *\n * ```\n * window.initX = function() {\n * return {\n * instance,\n * env,\n * scope,\n * lang,\n * searchLang,\n * currency,\n * consent,\n * documentDirection\n * };\n * };\n * ```\n *\n * ```\n * window.initX = {\n * instance,\n * env,\n * scope,\n * lang,\n * searchLang,\n * currency,\n * consent,\n * documentDirection\n * };\n * ```\n *\n * @public\n */\nexport class XInstaller {\n private api?: XAPI;\n\n /**\n * The configuration coming from the snippet {@link SnippetConfig}.\n *\n * @internal\n */\n protected snippetConfig!: SnippetConfig;\n\n /**\n * Receives the {@link InstallXOptions} and merges it with the default fallback options. Also\n * creates the public {@link XAPI}.\n *\n * @remarks Auto initializes the Vue application if window.initX is defined as a function or\n * object specifying the {@link SnippetConfig | snippet config}.\n *\n *\n * @param options - The {@link InstallXOptions}.\n *\n * @public\n */\n public constructor(protected readonly options: InstallXOptions) {\n this.createAPI();\n }\n\n /**\n * Creates the public {@link XAPI} using the `api` option from {@link InstallXOptions}. If this\n * `api` option is not passed, then a default {@link BaseXAPI} is created. To disable the API\n * creation the value `false` must be passed in the `api` option.\n *\n * @internal\n */\n protected createAPI(): void {\n const { api } = this.options;\n if (api !== false) {\n this.api = api ?? new BaseXAPI();\n this.api.setInitCallback(this.init.bind(this));\n this.api.setSnippetConfigCallback(this.updateSnippetConfig.bind(this));\n window.X = this.api;\n }\n }\n\n /**\n * Retrieves the {@link SnippetConfig | snippet config} it is defined in the window.initX.\n *\n * @returns The snippet config if it is defined or undefined otherwise.\n *\n * @internal\n */\n private retrieveSnippetConfig(): SnippetConfig | undefined {\n if (typeof window.initX === 'function') {\n return window.initX();\n } else if (typeof window.initX === 'object') {\n return window.initX;\n }\n }\n\n /**\n * Receives the {@link SnippetConfig | snippet config} or retrieves it from window.initX and\n * installs the plugin and initializes the Vue application.\n *\n * @param snippetConfig - The {@link SnippetConfig} that receives from snippet integration.\n *\n * @returns If {@link SnippetConfig | snippet config} is passed or configured in window.initX,\n * returns an object with the {@link XAPI}, the {@link XBus}, the {@link XPlugin} and the Vue App\n * used in the application. Else, a rejected promise is returned.\n *\n * @public\n */\n init(snippetConfig: SnippetConfig): Promise<InitWrapper>;\n init(): Promise<InitWrapper | void>;\n async init(snippetConfig = this.retrieveSnippetConfig()): Promise<InitWrapper | void> {\n if (snippetConfig) {\n const adapterConfig = this.getAdapterConfig(snippetConfig);\n this.applyConfigToAdapter(adapterConfig);\n const bus = this.createBus();\n const pluginOptions = this.getPluginOptions();\n const plugin = this.installPlugin(pluginOptions, bus);\n const extraPlugins = await this.installExtraPlugins(snippetConfig, bus);\n const app = this.createApp(extraPlugins, snippetConfig);\n this.api?.setBus(bus);\n\n return {\n api: this.api,\n app,\n bus,\n plugin\n };\n }\n\n return Promise.resolve();\n }\n\n /**\n * Creates the Adapter Config object using the {@link SnippetConfig} to do it. It also\n * merges the default configuration.\n *\n * @param options - The {@link SnippetConfig}.\n *\n * @returns The Adapter Config object.\n *\n * @internal\n */\n protected getAdapterConfig({ instance, env, lang, searchLang, scope }: SnippetConfig): unknown {\n return deepMerge(\n defaultAdapterConfig,\n cleanUndefined<DeepPartial<EmpathyAdapterConfig>>({\n instance,\n env,\n requestParams: {\n lang: searchLang ?? lang,\n scope\n }\n })\n );\n }\n\n /**\n * Creates the {@link XPluginOptions} object.\n *\n * @returns The {@link XPluginOptions} object.\n *\n * @internal\n */\n protected getPluginOptions(): XPluginOptions {\n const { adapter, store, initialXModules, xModules, __PRIVATE__xModules } = this.options;\n return {\n adapter,\n store,\n xModules,\n initialXModules,\n __PRIVATE__xModules\n };\n }\n\n /**\n * It applies the snippet configuration to the Adapter. Not all the parameters are for the Adapter\n * but they appear destructured to not include them in the `extraParams` parameter.\n *\n * @param adapterConfig - The Adapter config object.\n *\n * @internal\n */\n protected applyConfigToAdapter(adapterConfig: any): void {\n this.options.adapter.setConfig?.(adapterConfig);\n }\n\n /**\n * This method returns the bus instance to be used in the {@link XPlugin} and in the {@link XAPI}.\n * It returns the `bus` parameter in the {@link InstallXOptions} or if not provided, then\n * creates a new instance of {@link BaseXBus}.\n *\n * @returns XBus - The bus instance.\n *\n * @internal\n */\n protected createBus(): XBus {\n return this.options.bus ?? new BaseXBus();\n }\n\n /**\n * This method returns the VueConstructor to use to create the App instance.\n * It returns the `vue` parameter in the {@link InstallXOptions} or if not provided, then\n * returns the default Vue.\n *\n * @remarks The purpose of this option is mainly the testing. In a test we can use this option\n * to pass the local vue instance created by `createLocalVue` method.\n *\n * @returns VueConstructor - The vue constructor to create the App instance.\n *\n * @internal\n */\n protected getVue(): VueConstructor {\n return this.options.vue ?? Vue;\n }\n\n /**\n * Creates and install the Vue Plugin. If `plugin` parameter is passed in the\n * {@link InstallXOptions}, then it is used. If not, then a new instance of {@link XPlugin} is\n * created and installed.\n *\n * @param pluginOptions - The {@link XPluginOptions} to passed as parameter to the install method\n * of the plugin.\n * @param bus - The {@link XBus} to be used to create the XPlugin.\n *\n * @returns PluginObject<XPluginOption> - The plugin instance.\n * @internal\n */\n protected installPlugin(pluginOptions: XPluginOptions, bus: XBus): PluginObject<XPluginOptions> {\n const plugin = this.options.plugin ?? new XPlugin(bus);\n const vue = this.getVue();\n vue.use(plugin, pluginOptions);\n return plugin;\n }\n\n /**\n * Install more plugins to Vue defined by the user.\n *\n * @param snippet - The snippet configuration.\n * @param bus - The events bus used in the application.\n * @returns The arguments from the plugins installation to be used in Vue's constructor.\n * @internal\n */\n protected installExtraPlugins(\n snippet: SnippetConfig,\n bus: XBus\n ): Promise<VueConstructorPartialArgument> {\n const vue = this.getVue();\n return Promise.resolve(this.options.installExtraPlugins?.({ vue, snippet, bus }));\n }\n\n /**\n * In the case that the `app` parameter is present in the {@link InstallXOptions}, then a new Vue\n * application is created using that app.\n *\n * @param extraPlugins - Vue plugins initialisation data.\n * @param snippetConfig - Configuration from the client snippet.\n * @returns The Created Vue application or undefined if not created.\n *\n * @internal\n */\n protected createApp(\n extraPlugins: VueConstructorPartialArgument,\n snippetConfig: SnippetConfig\n ): Vue | undefined {\n if (this.options.app !== undefined) {\n const vue = this.getVue();\n this.snippetConfig = vue.observable(snippetConfig);\n return new vue({\n ...extraPlugins,\n ...this.options.vueOptions,\n provide() {\n return {\n snippetConfig\n };\n },\n store: this.options.store,\n el: this.getMountingTarget(this.options.domElement),\n render: h => h(this.options.app)\n });\n }\n }\n\n /**\n * It returns the HTML element to mount the Vue Application. If the `domElement` parameter in the\n * {@link InstallXOptions} is an Element or a string, then it is used. If it is\n * not present then a new <div> Element is created and append to the body to be used.\n *\n * @param elementOrSelector - String or Element used to mount the Vue App.\n *\n * @returns The Element to use as mounting point for the Vue App.\n * @internal\n */\n protected getMountingTarget(elementOrSelector?: string | Element): Element {\n if (typeof elementOrSelector === 'string') {\n const target = document.querySelector(elementOrSelector);\n if (!target) {\n throw Error(\n `XComponents app couldn't be mounted: Element \"${elementOrSelector}\" couldn't be found`\n );\n }\n return target;\n } else if (elementOrSelector !== undefined) {\n return elementOrSelector;\n } else {\n return document.body.appendChild(document.createElement('div'));\n }\n }\n\n /**\n * It updates all the provided properties from the current snippet config.\n *\n * @param snippetConfig - All the properties to be updated in the {@link SnippetConfig}.\n *\n * @internal\n */\n protected updateSnippetConfig(snippetConfig: Partial<SnippetConfig>): void {\n forEach(snippetConfig, (name, value) => {\n this.getVue().set(this.snippetConfig, name, value);\n });\n }\n}\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"x-installer.js","sources":["../../../../src/x-installer/x-installer/x-installer.ts"],"sourcesContent":["import { EmpathyAdapterConfig } from '@empathyco/x-adapter';\nimport { deepMerge } from '@empathyco/x-deep-merge';\nimport { cleanUndefined, forEach } from '@empathyco/x-utils';\nimport Vue, { PluginObject, VueConstructor } from 'vue';\nimport { BaseXBus } from '../../plugins/x-bus';\nimport { XBus } from '../../plugins/x-bus.types';\nimport { XPlugin } from '../../plugins/x-plugin';\nimport { XPluginOptions } from '../../plugins/x-plugin.types';\nimport { DeepPartial } from '../../utils/types';\nimport { SnippetConfig, XAPI } from '../api/api.types';\nimport { BaseXAPI } from '../api/base-api';\nimport { InitWrapper, InstallXOptions, VueConstructorPartialArgument } from './types';\n\ndeclare global {\n interface Window {\n X?: XAPI;\n initX?: (() => SnippetConfig) | SnippetConfig;\n }\n}\n\nconst defaultAdapterConfig: DeepPartial<EmpathyAdapterConfig> = {\n env: 'live',\n requestParams: {\n lang: 'es',\n scope: 'default'\n }\n};\n\n/**\n * The purpose of this class is to offer a quick way to initialize the XComponents in a setup\n * project. It allows to receive all the options in {@link InstallXOptions} which is an extension\n * of {@link XPluginOptions} with all the options for the plugin and some options more.\n *\n * This class does multiple things:\n * 1. Install the {@link XPlugin} with the {@link XPluginOptions}.\n * 2. Creates the public {@link XAPI} and add it to global window.\n * 3. Creates the Vue Application for the customer project.\n *\n * The steps 2 & 3 are optional and depends on the options passed in {@link InstallXOptions}.\n *\n * @example The way to use this class is the next:\n * 1. Create the installer passing in the {@link InstallXOptions}. This only save the options:\n *\n * ```\n * const installer = new XInstaller(installXOptions)\n * ```\n *\n * 2. Initialize passing the {@link SnippetConfig}. This installs the plugin and creates the App.\n * There are 3 different ways to do this:\n *\n * 2.1 Using the created installer:\n *\n * ```\n * installer.init(snippetConfig)\n * ```\n *\n * 2.2 If the API option is enabled (`createAPI` is `true` in {@link InstallXOptions}, or\n * is not present as the default value is `true`) then this init step can be done with\n * the Public API:\n *\n * ```\n * window.X.init(snippetConfig)\n * ```\n *\n * 2.3 When the script of the project build is loaded it searches for a global `initX`\n * variable that the customer must have in their web site. This variable can be a\n * function that returns the {@link SnippetConfig} or an object that contains the\n * {@link SnippetConfig} itself:\n *\n * ```\n * window.initX = function() {\n * return {\n * instance,\n * env,\n * scope,\n * lang,\n * searchLang,\n * currency,\n * consent,\n * documentDirection\n * };\n * };\n * ```\n *\n * ```\n * window.initX = {\n * instance,\n * env,\n * scope,\n * lang,\n * searchLang,\n * currency,\n * consent,\n * documentDirection\n * };\n * ```\n *\n * @public\n */\nexport class XInstaller {\n private api?: XAPI;\n\n /**\n * The configuration coming from the snippet {@link SnippetConfig}.\n *\n * @internal\n */\n protected snippetConfig!: SnippetConfig;\n\n /**\n * Receives the {@link InstallXOptions} and merges it with the default fallback options. Also\n * creates the public {@link XAPI}.\n *\n * @remarks Auto initializes the Vue application if window.initX is defined as a function or\n * object specifying the {@link SnippetConfig | snippet config}.\n *\n *\n * @param options - The {@link InstallXOptions}.\n *\n * @public\n */\n public constructor(protected readonly options: InstallXOptions) {\n this.createAPI();\n }\n\n /**\n * Creates the public {@link XAPI} using the `api` option from {@link InstallXOptions}. If this\n * `api` option is not passed, then a default {@link BaseXAPI} is created. To disable the API\n * creation the value `false` must be passed in the `api` option.\n *\n * @internal\n */\n protected createAPI(): void {\n const { api } = this.options;\n if (api !== false) {\n this.api = api ?? new BaseXAPI();\n this.api.setInitCallback(this.init.bind(this));\n this.api.setSnippetConfigCallback(this.updateSnippetConfig.bind(this));\n window.X = this.api;\n }\n }\n\n /**\n * Retrieves the {@link SnippetConfig | snippet config} it is defined in the window.initX.\n *\n * @returns The snippet config if it is defined or undefined otherwise.\n *\n * @internal\n */\n private retrieveSnippetConfig(): SnippetConfig | undefined {\n if (typeof window.initX === 'function') {\n return window.initX();\n } else if (typeof window.initX === 'object') {\n return window.initX;\n }\n }\n\n /**\n * Receives the {@link SnippetConfig | snippet config} or retrieves it from window.initX and\n * installs the plugin and initializes the Vue application.\n *\n * @param snippetConfig - The {@link SnippetConfig} that receives from snippet integration.\n *\n * @returns If {@link SnippetConfig | snippet config} is passed or configured in window.initX,\n * returns an object with the {@link XAPI}, the {@link XBus}, the {@link XPlugin} and the Vue App\n * used in the application. Else, a rejected promise is returned.\n *\n * @public\n */\n init(snippetConfig: SnippetConfig): Promise<InitWrapper>;\n init(): Promise<InitWrapper | void>;\n async init(snippetConfig = this.retrieveSnippetConfig()): Promise<InitWrapper | void> {\n if (snippetConfig) {\n const adapterConfig = this.getAdapterConfig(snippetConfig);\n this.applyConfigToAdapter(adapterConfig);\n const bus = this.createBus();\n const pluginOptions = this.getPluginOptions();\n const plugin = this.installPlugin(pluginOptions, bus);\n const extraPlugins = await this.installExtraPlugins(snippetConfig, bus);\n const app = this.createApp(extraPlugins, snippetConfig);\n this.api?.setBus(bus);\n\n return {\n api: this.api,\n app,\n bus,\n plugin\n };\n }\n\n return Promise.resolve();\n }\n\n /**\n * Creates the Adapter Config object using the {@link SnippetConfig} to do it. It also\n * merges the default configuration.\n *\n * @param options - The {@link SnippetConfig}.\n *\n * @returns The Adapter Config object.\n *\n * @internal\n */\n protected getAdapterConfig({ instance, env, lang, searchLang, scope }: SnippetConfig): unknown {\n return deepMerge(\n defaultAdapterConfig,\n cleanUndefined<DeepPartial<EmpathyAdapterConfig>>({\n instance,\n env,\n requestParams: {\n lang: searchLang ?? lang,\n scope\n }\n })\n );\n }\n\n /**\n * Creates the {@link XPluginOptions} object.\n *\n * @returns The {@link XPluginOptions} object.\n *\n * @internal\n */\n protected getPluginOptions(): XPluginOptions {\n const { adapter, store, initialXModules, xModules, __PRIVATE__xModules } = this.options;\n return {\n adapter,\n store,\n xModules,\n initialXModules,\n __PRIVATE__xModules\n };\n }\n\n /**\n * It applies the snippet configuration to the Adapter. Not all the parameters are for the Adapter\n * but they appear destructured to not include them in the `extraParams` parameter.\n *\n * @param adapterConfig - The Adapter config object.\n *\n * @internal\n */\n protected applyConfigToAdapter(adapterConfig: any): void {\n this.options.adapter.setConfig?.(adapterConfig);\n }\n\n /**\n * This method returns the bus instance to be used in the {@link XPlugin} and in the {@link XAPI}.\n * It returns the `bus` parameter in the {@link InstallXOptions} or if not provided, then\n * creates a new instance of {@link BaseXBus}.\n *\n * @returns XBus - The bus instance.\n *\n * @internal\n */\n protected createBus(): XBus {\n return this.options.bus ?? new BaseXBus();\n }\n\n /**\n * This method returns the VueConstructor to use to create the App instance.\n * It returns the `vue` parameter in the {@link InstallXOptions} or if not provided, then\n * returns the default Vue.\n *\n * @remarks The purpose of this option is mainly the testing. In a test we can use this option\n * to pass the local vue instance created by `createLocalVue` method.\n *\n * @returns VueConstructor - The vue constructor to create the App instance.\n *\n * @internal\n */\n protected getVue(): VueConstructor {\n return this.options.vue ?? Vue;\n }\n\n /**\n * Creates and install the Vue Plugin. If `plugin` parameter is passed in the\n * {@link InstallXOptions}, then it is used. If not, then a new instance of {@link XPlugin} is\n * created and installed.\n *\n * @param pluginOptions - The {@link XPluginOptions} to passed as parameter to the install method\n * of the plugin.\n * @param bus - The {@link XBus} to be used to create the XPlugin.\n *\n * @returns PluginObject<XPluginOption> - The plugin instance.\n * @internal\n */\n protected installPlugin(pluginOptions: XPluginOptions, bus: XBus): PluginObject<XPluginOptions> {\n const plugin = this.options.plugin ?? new XPlugin(bus);\n const vue = this.getVue();\n vue.use(plugin, pluginOptions);\n return plugin;\n }\n\n /**\n * Install more plugins to Vue defined by the user.\n *\n * @param snippet - The snippet configuration.\n * @param bus - The events bus used in the application.\n * @returns The arguments from the plugins installation to be used in Vue's constructor.\n * @internal\n */\n protected installExtraPlugins(\n snippet: SnippetConfig,\n bus: XBus\n ): Promise<VueConstructorPartialArgument> {\n const vue = this.getVue();\n return Promise.resolve(this.options.installExtraPlugins?.({ vue, snippet, bus }));\n }\n\n /**\n * In the case that the `app` parameter is present in the {@link InstallXOptions}, then a new Vue\n * application is created using that app.\n *\n * @param extraPlugins - Vue plugins initialisation data.\n * @param snippetConfig - Configuration from the client snippet.\n * @returns The Created Vue application or undefined if not created.\n *\n * @internal\n */\n protected createApp(\n extraPlugins: VueConstructorPartialArgument,\n snippetConfig: SnippetConfig\n ): Vue | undefined {\n if (this.options.app !== undefined) {\n const vue = this.getVue();\n this.snippetConfig = vue.observable(snippetConfig);\n return new vue({\n ...extraPlugins,\n ...this.options.vueOptions,\n provide() {\n return {\n snippetConfig\n };\n },\n store: this.options.store,\n el: this.getMountingTarget(this.options.domElement),\n render: h => h(this.options.app)\n });\n }\n }\n\n /**\n * It returns the HTML element to mount the Vue Application. If the `domElement` parameter in the\n * {@link InstallXOptions} is an Element or a string, then it is used. If it is\n * not present then a new <div> Element is created and append to the body to be used.\n *\n * @param elementOrSelector - String or Element used to mount the Vue App.\n *\n * @returns The Element to use as mounting point for the Vue App.\n * @internal\n */\n protected getMountingTarget(elementOrSelector?: string | Element): Element {\n if (typeof elementOrSelector === 'string') {\n const target = document.querySelector(elementOrSelector);\n if (!target) {\n throw Error(\n `XComponents app couldn't be mounted: Element \"${elementOrSelector}\" couldn't be found`\n );\n }\n return target;\n } else if (elementOrSelector !== undefined) {\n return elementOrSelector;\n } else {\n return document.body.appendChild(document.createElement('div'));\n }\n }\n\n /**\n * It updates all the provided properties from the current snippet config.\n *\n * @param snippetConfig - All the properties to be updated in the {@link SnippetConfig}.\n *\n * @internal\n */\n protected updateSnippetConfig(snippetConfig: Partial<SnippetConfig>): void {\n forEach(snippetConfig, (name, value) => {\n this.getVue().set(this.snippetConfig, name, value);\n });\n }\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"extra-params.vue.js","sources":["../../../../../src/x-modules/extra-params/components/extra-params.vue"],"sourcesContent":["<script lang=\"ts\">\n import Vue from 'vue';\n import { Component, Prop } from 'vue-property-decorator';\n import { State, xComponentMixin, XEmit } from '../../../components';\n import {
|
|
1
|
+
{"version":3,"file":"extra-params.vue.js","sources":["../../../../../src/x-modules/extra-params/components/extra-params.vue"],"sourcesContent":["<script lang=\"ts\">\n import { Dictionary } from '@empathyco/x-utils';\n import Vue from 'vue';\n import { Component, Prop } from 'vue-property-decorator';\n import { State, xComponentMixin, XEmit } from '../../../components';\n import { extraParamsXModule } from '../x-module';\n\n /**\n * It emits a {@link ExtraParamsXEvents.ExtraParamsProvided} with the values\n * received as a prop.\n *\n * @public\n */\n @Component({\n mixins: [xComponentMixin(extraParamsXModule)]\n })\n export default class ExtraParams extends Vue {\n /**\n * Emits the initial extra params, overriding with the state extra params, just in case, those\n * values were already set by XComponents initialization (url, plugin config, etc.).\n */\n mounted(): void {\n this.$x.emit('ExtraParamsInitialized', { ...this.values });\n this.$x.emit('ExtraParamsProvided', { ...this.values, ...this.storeExtraParams });\n }\n\n /**\n * (Required) A Dictionary where the keys are the extra param names and its values.\n *\n * @remarks Emits the {@link ExtraParamsXEvents.ExtraParamsProvided} when the\n * component is rendered or the values changed.\n *\n * @public\n */\n @XEmit('ExtraParamsProvided', { deep: true })\n @Prop({ required: true })\n public values!: Dictionary<unknown>;\n\n /**\n * State extra params. Used to override the initial extra params.\n */\n @State('extraParams', 'params')\n public storeExtraParams!: Dictionary<unknown>;\n\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n render(): void {}\n }\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\n- [`ExtraParamsProvided`][1]\n\n[1](./../../api/x-components.extraparamsxevents.extraparamsprovided.md)\n\n## See it in action\n\n_See how the event is triggered when the component is rendered._\n\n```vue\n<template>\n <ExtraParams :values=\"values\" />\n</template>\n\n<script>\n import { ExtraParams } from '@empathyco/x-components/extra-params';\n\n export default {\n name: 'ExtraParamsDemo',\n components: {\n ExtraParams\n },\n data() {\n return {\n values: {\n warehouse: 1234\n }\n };\n }\n };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/js/x-modules/extra-params/components/extra-params.vue_rollup-plugin-vue_script.vue.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"extra-params.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../src/x-modules/extra-params/components/extra-params.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { State, xComponentMixin, XEmit } from '../../../components';\nimport {
|
|
1
|
+
{"version":3,"file":"extra-params.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../src/x-modules/extra-params/components/extra-params.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\nimport { Dictionary } from '@empathyco/x-utils';\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { State, xComponentMixin, XEmit } from '../../../components';\nimport { extraParamsXModule } from '../x-module';\n\n/**\n * It emits a {@link ExtraParamsXEvents.ExtraParamsProvided} with the values\n * received as a prop.\n *\n * @public\n */\n@Component({\n mixins: [xComponentMixin(extraParamsXModule)]\n})\nexport default class ExtraParams extends Vue {\n /**\n * Emits the initial extra params, overriding with the state extra params, just in case, those\n * values were already set by XComponents initialization (url, plugin config, etc.).\n */\n mounted(): void {\n this.$x.emit('ExtraParamsInitialized', { ...this.values });\n this.$x.emit('ExtraParamsProvided', { ...this.values, ...this.storeExtraParams });\n }\n\n /**\n * (Required) A Dictionary where the keys are the extra param names and its values.\n *\n * @remarks Emits the {@link ExtraParamsXEvents.ExtraParamsProvided} when the\n * component is rendered or the values changed.\n *\n * @public\n */\n @XEmit('ExtraParamsProvided', { deep: true })\n @Prop({ required: true })\n public values!: Dictionary<unknown>;\n\n /**\n * State extra params. Used to override the initial extra params.\n */\n @State('extraParams', 'params')\n public storeExtraParams!: Dictionary<unknown>;\n\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n render(): void {}\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA;;;;;;AASA,IAAqB,WAAW,GAAhC,MAAqB,WAAY,SAAQ,GAAG;;;;;IAK1C,OAAO;QACL,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,wBAAwB,EAAE,EAAE,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;QAC3D,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,qBAAqB,EAAE,EAAE,GAAG,IAAI,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC;KACnF;;IAqBD,MAAM,MAAW;CAClB,CAAA;AAVC;IAFC,KAAK,CAAC,qBAAqB,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;IAC5C,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;2CACW;AAMpC;IADC,KAAK,CAAC,aAAa,EAAE,QAAQ,CAAC;qDACe;AA1B3B,WAAW;IAH/B,SAAS,CAAC;QACT,MAAM,EAAE,CAAC,eAAe,CAAC,kBAAkB,CAAC,CAAC;KAC9C,CAAC;GACmB,WAAW,CA8B/B;aA9BoB,WAAW;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"renderless-extra-param.vue.js","sources":["../../../../../src/x-modules/extra-params/components/renderless-extra-param.vue"],"sourcesContent":["<template>\n <NoElement>\n <slot v-bind=\"{ value, updateValue }\"></slot>\n </NoElement>\n</template>\n\n<script lang=\"ts\">\n import Vue from 'vue';\n import { Component, Prop } from 'vue-property-decorator';\n import { NoElement, State, xComponentMixin } from '../../../components';\n import {
|
|
1
|
+
{"version":3,"file":"renderless-extra-param.vue.js","sources":["../../../../../src/x-modules/extra-params/components/renderless-extra-param.vue"],"sourcesContent":["<template>\n <NoElement>\n <slot v-bind=\"{ value, updateValue }\"></slot>\n </NoElement>\n</template>\n\n<script lang=\"ts\">\n import { Dictionary } from '@empathyco/x-utils';\n import Vue from 'vue';\n import { Component, Prop } from 'vue-property-decorator';\n import { NoElement, State, xComponentMixin } from '../../../components';\n import { extraParamsXModule } from '../x-module';\n\n /**\n * It emits a {@link ExtraParamsXEvents.UserChangedExtraParams} when the `updateValue`\n * is called.\n *\n * @public\n */\n @Component({\n mixins: [xComponentMixin(extraParamsXModule)],\n components: {\n NoElement\n }\n })\n export default class RenderlessExtraParam extends Vue {\n /**\n * The extra param's name.\n *\n * @public\n */\n @Prop({ required: true })\n public name!: string;\n\n /**\n * A dictionary with the extra params in the store state.\n *\n * @public\n */\n @State('extraParams', 'params')\n public stateParams!: Dictionary<unknown>;\n\n /**\n * It returns the value of the extra param from the store.\n *\n * @returns - The value from the store.\n *\n * @internal\n */\n protected get value(): unknown {\n return this.stateParams[this.name];\n }\n\n /**\n * It sets the new value to the store.\n *\n * @param newValue - The new value of the extra param.\n *\n * @internal\n */\n protected updateValue(newValue: unknown): void {\n this.$x.emit('UserChangedExtraParams', { [this.name]: newValue });\n }\n }\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nRenders default slot content. It binds to the default slot the name of the extra parameter and the\ndefault value of it.\n\n### Basic usage\n\n```vue\n<template>\n <RenderlessExtraParam #default=\"{ value, updateValue }\" name=\"store\">\n <BaseDropdown @change=\"updateValue\" :value=\"value\" :items=\"items\" />\n </RenderlessExtraParam>\n</template>\n\n<script>\n import { RenderlessExtraParams } from '@empathyco/x-components/extra-params';\n import { BaseDropdown } from '@empathyco/x-components';\n\n export default {\n name: 'RenderlessExtraParamsDemo',\n components: {\n RenderlessExtraParams,\n BaseDropdown\n },\n props: ['name'],\n data() {\n return {\n items: ['spain', 'portugal']\n };\n }\n };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"renderless-extra-param.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../src/x-modules/extra-params/components/renderless-extra-param.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { NoElement, State, xComponentMixin } from '../../../components';\nimport {
|
|
1
|
+
{"version":3,"file":"renderless-extra-param.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../src/x-modules/extra-params/components/renderless-extra-param.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\nimport { Dictionary } from '@empathyco/x-utils';\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { NoElement, State, xComponentMixin } from '../../../components';\nimport { extraParamsXModule } from '../x-module';\n\n/**\n * It emits a {@link ExtraParamsXEvents.UserChangedExtraParams} when the `updateValue`\n * is called.\n *\n * @public\n */\n@Component({\n mixins: [xComponentMixin(extraParamsXModule)],\n components: {\n NoElement\n }\n})\nexport default class RenderlessExtraParam extends Vue {\n /**\n * The extra param's name.\n *\n * @public\n */\n @Prop({ required: true })\n public name!: string;\n\n /**\n * A dictionary with the extra params in the store state.\n *\n * @public\n */\n @State('extraParams', 'params')\n public stateParams!: Dictionary<unknown>;\n\n /**\n * It returns the value of the extra param from the store.\n *\n * @returns - The value from the store.\n *\n * @internal\n */\n protected get value(): unknown {\n return this.stateParams[this.name];\n }\n\n /**\n * It sets the new value to the store.\n *\n * @param newValue - The new value of the extra param.\n *\n * @internal\n */\n protected updateValue(newValue: unknown): void {\n this.$x.emit('UserChangedExtraParams', { [this.name]: newValue });\n }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaA;;;;;;AAYA,IAAqB,oBAAoB,GAAzC,MAAqB,oBAAqB,SAAQ,GAAG;;;;;;;;IAwBnD,IAAc,KAAK;QACjB,OAAO,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KACpC;;;;;;;;IASS,WAAW,CAAC,QAAiB;QACrC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,wBAAwB,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,GAAG,QAAQ,EAAE,CAAC,CAAC;KACnE;CACF,CAAA;AA/BC;IADC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;kDACJ;AAQrB;IADC,KAAK,CAAC,aAAa,EAAE,QAAQ,CAAC;yDACU;AAftB,oBAAoB;IANxC,SAAS,CAAC;QACT,MAAM,EAAE,CAAC,eAAe,CAAC,kBAAkB,CAAC,CAAC;QAC7C,UAAU,EAAE;YACV,SAAS;SACV;KACF,CAAC;GACmB,oBAAoB,CAsCxC;aAtCoB,oBAAoB;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"snippet-config-extra-params.vue.js","sources":["../../../../../src/x-modules/extra-params/components/snippet-config-extra-params.vue"],"sourcesContent":["<template>\n <ExtraParams :values=\"extraParams\" />\n</template>\n\n<script lang=\"ts\">\n import Vue from 'vue';\n import { Component, Watch, Inject, Prop } from 'vue-property-decorator';\n import { xComponentMixin } from '../../../components';\n import {
|
|
1
|
+
{"version":3,"file":"snippet-config-extra-params.vue.js","sources":["../../../../../src/x-modules/extra-params/components/snippet-config-extra-params.vue"],"sourcesContent":["<template>\n <ExtraParams :values=\"extraParams\" />\n</template>\n\n<script lang=\"ts\">\n import { forEach, Dictionary } from '@empathyco/x-utils';\n import Vue from 'vue';\n import { Component, Watch, Inject, Prop } from 'vue-property-decorator';\n import { xComponentMixin } from '../../../components';\n import { SnippetConfig } from '../../../x-installer';\n import { extraParamsXModule } from '../x-module';\n import ExtraParams from './extra-params.vue';\n\n /**\n * Extracts the extra parameters from the {@link SnippetConfig} and syncs it with the request\n * objects of every x-module.\n *\n * @public\n */\n @Component({\n components: { ExtraParams },\n mixins: [xComponentMixin(extraParamsXModule)]\n })\n export default class SnippetConfigExtraParams extends Vue {\n /**\n * It injects {@link SnippetConfig} provided by an ancestor as snippetConfig.\n *\n * @internal\n */\n @Inject('snippetConfig')\n public snippetConfig!: SnippetConfig;\n\n /**\n * A Dictionary where the keys are the extra param names and its values.\n *\n * @public\n */\n @Prop()\n protected values?: Dictionary<unknown>;\n\n /**\n * Custom object containing the extra params from the snippet config.\n *\n * @remarks This object keeps manually the desired snippet config properties to avoid\n * unnecessary re-renders.\n *\n * @internal\n */\n protected extraParams: Dictionary<unknown> = {};\n\n /**\n * Collection of properties from the snippet config not allowed to be sent as extra params.\n *\n * @internal\n */\n protected notAllowedExtraParams: Array<keyof SnippetConfig> = [\n 'callbacks',\n 'productId',\n 'instance',\n 'lang',\n 'searchLang',\n 'consent',\n 'documentDirection',\n 'currency'\n ];\n\n /**\n * Updates the extraParams object when the snippet config changes.\n *\n * @param snippetConfig - The new snippet config.\n *\n * @internal\n */\n @Watch('snippetConfig', { deep: true, immediate: true })\n syncExtraParams(snippetConfig: SnippetConfig): void {\n forEach({ ...this.values, ...snippetConfig }, (name, value) => {\n if (this.notAllowedExtraParams.includes(name)) {\n return;\n }\n this.$set(this.extraParams, name, value);\n });\n }\n }\n</script>\n\n<docs lang=\"mdx\">\n## See it in action\n\n_See how the snippet config is injected and passed to the SnippetConfigExtraParams component._\n\n```vue\n<template>\n <Provider>\n <SnippetConfigExtraParams />\n </Provider>\n</template>\n\n<script>\n import { SnippetConfigExtraParams } from '@empathyco/x-components/extra-params';\n\n const Provider = {\n provide: {\n snippetConfig: {\n instance: 'demo',\n lang: 'es',\n warehouse: 1234\n }\n }\n };\n\n export default {\n name: 'SnippetConfigExtraParamsDemo',\n components: {\n Provider,\n SnippetConfigExtraParams\n }\n };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { __decorate } from 'tslib';
|
|
2
|
+
import { forEach } from '@empathyco/x-utils';
|
|
2
3
|
import Vue from 'vue';
|
|
3
4
|
import { Inject, Prop, Watch, Component } from 'vue-property-decorator';
|
|
4
5
|
import '../../../components/animations/animate-width.vue.js';
|
|
@@ -115,8 +116,6 @@ import 'rxjs/operators';
|
|
|
115
116
|
import 'vue-class-component';
|
|
116
117
|
import '../../../components/items-list-injection.mixin.js';
|
|
117
118
|
import { xComponentMixin } from '../../../components/x-component.mixin.js';
|
|
118
|
-
import { forEach } from '../../../utils/object.js';
|
|
119
|
-
import '../../../utils/storage.js';
|
|
120
119
|
import { extraParamsXModule } from '../x-module.js';
|
|
121
120
|
import __vue_component__ from './extra-params.vue.js';
|
|
122
121
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"snippet-config-extra-params.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../src/x-modules/extra-params/components/snippet-config-extra-params.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\nimport Vue from 'vue';\nimport { Component, Watch, Inject, Prop } from 'vue-property-decorator';\nimport { xComponentMixin } from '../../../components';\nimport {
|
|
1
|
+
{"version":3,"file":"snippet-config-extra-params.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../src/x-modules/extra-params/components/snippet-config-extra-params.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\nimport { forEach, Dictionary } from '@empathyco/x-utils';\nimport Vue from 'vue';\nimport { Component, Watch, Inject, Prop } from 'vue-property-decorator';\nimport { xComponentMixin } from '../../../components';\nimport { SnippetConfig } from '../../../x-installer';\nimport { extraParamsXModule } from '../x-module';\nimport ExtraParams from './extra-params.vue';\n\n/**\n * Extracts the extra parameters from the {@link SnippetConfig} and syncs it with the request\n * objects of every x-module.\n *\n * @public\n */\n@Component({\n components: { ExtraParams },\n mixins: [xComponentMixin(extraParamsXModule)]\n})\nexport default class SnippetConfigExtraParams extends Vue {\n /**\n * It injects {@link SnippetConfig} provided by an ancestor as snippetConfig.\n *\n * @internal\n */\n @Inject('snippetConfig')\n public snippetConfig!: SnippetConfig;\n\n /**\n * A Dictionary where the keys are the extra param names and its values.\n *\n * @public\n */\n @Prop()\n protected values?: Dictionary<unknown>;\n\n /**\n * Custom object containing the extra params from the snippet config.\n *\n * @remarks This object keeps manually the desired snippet config properties to avoid\n * unnecessary re-renders.\n *\n * @internal\n */\n protected extraParams: Dictionary<unknown> = {};\n\n /**\n * Collection of properties from the snippet config not allowed to be sent as extra params.\n *\n * @internal\n */\n protected notAllowedExtraParams: Array<keyof SnippetConfig> = [\n 'callbacks',\n 'productId',\n 'instance',\n 'lang',\n 'searchLang',\n 'consent',\n 'documentDirection',\n 'currency'\n ];\n\n /**\n * Updates the extraParams object when the snippet config changes.\n *\n * @param snippetConfig - The new snippet config.\n *\n * @internal\n */\n @Watch('snippetConfig', { deep: true, immediate: true })\n syncExtraParams(snippetConfig: SnippetConfig): void {\n forEach({ ...this.values, ...snippetConfig }, (name, value) => {\n if (this.notAllowedExtraParams.includes(name)) {\n return;\n }\n this.$set(this.extraParams, name, value);\n });\n }\n}\n"],"names":["ExtraParams"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaA;;;;;;AAUA,IAAqB,wBAAwB,GAA7C,MAAqB,wBAAyB,SAAQ,GAAG;IAAzD;;;;;;;;;;QAyBY,gBAAW,GAAwB,EAAE,CAAC;;;;;;QAOtC,0BAAqB,GAA+B;YAC5D,WAAW;YACX,WAAW;YACX,UAAU;YACV,MAAM;YACN,YAAY;YACZ,SAAS;YACT,mBAAmB;YACnB,UAAU;SACX,CAAC;KAkBH;;;;;;;;IARC,eAAe,CAAC,aAA4B;QAC1C,OAAO,CAAC,EAAE,GAAG,IAAI,CAAC,MAAM,EAAE,GAAG,aAAa,EAAE,EAAE,CAAC,IAAI,EAAE,KAAK;YACxD,IAAI,IAAI,CAAC,qBAAqB,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE;gBAC7C,OAAO;aACR;YACD,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;SAC1C,CAAC,CAAC;KACJ;CACF,CAAA;AApDC;IADC,MAAM,CAAC,eAAe,CAAC;+DACa;AAQrC;IADC,IAAI,EAAE;wDACgC;AAoCvC;IADC,KAAK,CAAC,eAAe,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;+DAQvD;AA1DkB,wBAAwB;IAJ5C,SAAS,CAAC;QACT,UAAU,EAAE,eAAEA,iBAAW,EAAE;QAC3B,MAAM,EAAE,CAAC,eAAe,CAAC,kBAAkB,CAAC,CAAC;KAC9C,CAAC;GACmB,wBAAwB,CA2D5C;aA3DoB,wBAAwB;;;;"}
|
|
@@ -66,11 +66,11 @@ __vue_render__._withStripped = true;
|
|
|
66
66
|
/* style */
|
|
67
67
|
const __vue_inject_styles__ = function (inject) {
|
|
68
68
|
if (!inject) return
|
|
69
|
-
inject("data-v-
|
|
69
|
+
inject("data-v-71111ef5_0", { source: ".x-facets-list[data-v-71111ef5] {\n list-style-type: none;\n}", map: undefined, media: undefined });
|
|
70
70
|
|
|
71
71
|
};
|
|
72
72
|
/* scoped */
|
|
73
|
-
const __vue_scope_id__ = "data-v-
|
|
73
|
+
const __vue_scope_id__ = "data-v-71111ef5";
|
|
74
74
|
/* module identifier */
|
|
75
75
|
const __vue_module_identifier__ = undefined;
|
|
76
76
|
/* functional template */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"facets.vue.js","sources":["../../../../../../src/x-modules/facets/components/facets/facets.vue"],"sourcesContent":["<template>\n <component\n :is=\"animation\"\n v-if=\"hasFacets\"\n class=\"x-list x-facets-list\"\n data-test=\"facets\"\n tag=\"ul\"\n >\n <li\n v-for=\"({ facet, slotName }, facetId) in mappedFacets\"\n :key=\"facetId\"\n class=\"x-facets-list__item\"\n data-test=\"facets-facet\"\n >\n <!--\n @slot Customized Facet rendering. Specifying a slot with the facet's name will result in the\n facet using that slot composition to render.\n @binding {Facet} facet - Facet to render\n -->\n <slot\n v-if=\"$scopedSlots[slotName]\"\n v-bind=\"{\n facet,\n selectedFilters: selectedFiltersByFacet[facetId] || []\n }\"\n :name=\"slotName\"\n />\n <!--\n @slot (required) Default Facet rendering. This slot will be used by default for rendering\n the facets without an specific slot implementation.\n @binding {Facet} facet - Facet to render\n -->\n <slot\n v-else\n v-bind=\"{\n facet,\n selectedFilters: selectedFiltersByFacet[facetId] || []\n }\"\n >\n This is the {{ facet.label }} facet. Pass something into its slot to display content.\n </slot>\n </li>\n </component>\n</template>\n\n<script lang=\"ts\">\n import { Facet } from '@empathyco/x-types';\n import { Component, Prop, Vue } from 'vue-property-decorator';\n import { Getter } from '../../../../components/decorators/store.decorators';\n import { xComponentMixin } from '../../../../components/x-component.mixin';\n import { toKebabCase } from '../../../../utils/string';\n import { map, objectFilter } from '../../../../utils/object';\n import { Dictionary } from '../../../../utils/types';\n import FacetsMixin from '../facets.mixin';\n import { facetsXModule } from '../../x-module';\n\n /**\n * Custom interface to provide a slot name to a Facet.\n *\n * @internal\n */\n interface RenderFacet {\n slotName: string;\n facet: Facet;\n }\n\n /**\n * This component renders the list of facets stored in the Facets module. Facets can be rendered\n * differently based on their purpose and this can be achieved using the exposed slots:\n * - A default and required slot.\n * - A custom slot for each facet with the facetId as its name. This allows each facet to be\n * rendered differently based on its needs.\n *\n * @remarks It extends {@link FacetsMixin}.\n *\n * @public\n */\n @Component({\n mixins: [xComponentMixin(facetsXModule)]\n })\n export default class Facets extends FacetsMixin {\n /**\n * Animation component that will be used to animate the facets.\n *\n * @public\n */\n @Prop({ default: 'ul' })\n public animation!: Vue | string;\n\n /**\n * Discriminates the facets rendered by this component. It expects a string containing facets\n * ids, comma separated. This property will include or exclude facets based on its value.\n * The default value is an empty string and the component will render all existing facets.\n *\n * @remarks\n * To behave as a `include`, simply set the facets ids, comma separated:\n * `existingFacets=[{ brand: ... }, category: { ... }, color: { ... }, price: { ... }]`\n * `renderableFacets=\"brand, category\"`\n *\n * The component will render brand and category facets.\n *\n * On the other hand, to simulate an `exclude` behaviour and exclude a facet from being\n * rendered, append a '!' before its id:\n * `existingFacets=[{ brand: ... }, category: { ... }, color: { ... }, price: { ... }]`\n * `renderableFacets=\"!brand,!price\"`\n *\n * The component will render category and color facets.\n *\n * @public\n */\n @Prop()\n public renderableFacets!: string | undefined;\n\n /**\n * Dictionary of facets in the state.\n *\n * @internal\n */\n @Getter('facets', 'facets')\n public facets!: Record<Facet['id'], Facet>;\n\n /**\n * Transforms a dictionary of Facets including the slot name.\n *\n * @returns A dictionary of facets with the slot name.\n *\n * @internal\n */\n protected get mappedFacets(): Dictionary<RenderFacet> {\n return map(this.facetsToRender, (facetId, facet) => ({\n slotName: toKebabCase(facetId),\n facet\n }));\n }\n\n /**\n * The facets to be rendered after filtering {@link Facets.facets} by\n * {@link Facets.renderableFacets} content.\n *\n * @returns The list of facets to be rendered.\n *\n * @internal\n */\n protected get facetsToRender(): Dictionary<Facet> {\n if (!this.renderableFacets) {\n return this.facets;\n } else {\n const excludedRegExp = /^!/;\n const facetIds: string[] = this.renderableFacets.split(',').map(facetId => facetId.trim());\n const included: string[] = [];\n const excluded: string[] = [];\n facetIds.forEach(facetId => {\n if (excludedRegExp.test(facetId)) {\n excluded.push(facetId.replace(excludedRegExp, ''));\n } else {\n included.push(facetId);\n }\n });\n\n return this.filterFacetsToRender(included, excluded);\n }\n }\n\n /**\n * Indicates if there are facets available to show.\n *\n * @returns True if there are facets available and false otherwise.\n * @internal\n */\n protected get hasFacets(): boolean {\n return !!Object.keys(this.facetsToRender).length;\n }\n\n /**\n * Filter facets dictionary retrieving those included and/or removing excluded.\n *\n * @param included - List of facets to render.\n * @param excluded - List of not renderable facets.\n *\n * @returns The filtered list of facets to render.\n *\n * @internal\n */\n private filterFacetsToRender(included: string[], excluded: string[]): Dictionary<Facet> {\n const hasAnyFacetIncluded = included.length > 0;\n return objectFilter(this.facets, facetKey => {\n const isIncluded = included.includes(String(facetKey));\n const isExcluded = excluded.includes(String(facetKey));\n\n return hasAnyFacetIncluded ? isIncluded && !isExcluded : !isExcluded;\n });\n }\n }\n</script>\n\n<style lang=\"scss\" scoped>\n .x-facets-list {\n list-style-type: none;\n }\n</style>\n\n<docs lang=\"mdx\">\n## Example\n\nThis component renders the list of facets stored in the Facets module. Facets can be rendered\ndifferently based on their purpose and this can be achieved using the exposed slots:\n\n- A default and required slot.\n- A custom slot for each facet with the facetId as its name. This allows each facet to be rendered\n differently based on its needs.\n\nBelow, there are some examples showing how to use the component with its different configurations.\n\n### Default usage\n\nThe default slot of this component is mandatory. If no other slot is defined, every Facet will be\nrendered as specified in the default slot.\n\n```vue\n<template>\n <Facets>\n <template #default=\"{ facet, selectedFilters }\">\n <h1>{{ ${facet.label} }}</h1>\n <span v-if=\"selectedFilters.length > 0\">{{ `${selectedFilters.length} selected` }}</span>\n\n <ul>\n <li v-for=\"filter in facet.filters\" :key=\"filter.id\">\n {{ filter.label }}\n </li>\n </ul>\n </template>\n </Facets>\n</template>\n\n<script>\n import { Facets } from '@empathyco/x-components/facets';\n\n export default {\n components: {\n Facets\n }\n };\n</script>\n```\n\n### Customized usage\n\nCustomized compositions for a specific Facet can be achieved by using a slot with the same id as the\nfacet to customize. For example, the Facet with the id \"color\" requires a composition that differs\nfrom the rest of the Facets. Doing it in a slot with the name \"color\" will apply this customization\njust to the \"color\" Facet. The other facets will fallback to the composition of the default slot.\n\n```vue\n<template>\n <Facets>\n <template #color=\"{ facet, selectedFilters }\">\n <span v-if=\"selectedFilters.length > 0\">{{ `${selectedFilters.length} colors chosen` }}</span>\n\n <ul v-for=\"filter in facet.filters\" :key=\"filter.id\">\n <li v-if=\"!filter.selected\">\n {{ filter.label }}\n </li>\n </ul>\n </template>\n\n <template #default=\"{ facet }\">\n <h1>{{ facet.label }}</h1>\n\n <ul>\n <li v-for=\"filter in facet.filters\" :key=\"filter.id\">\n {{ filter.label }}\n </li>\n </ul>\n </template>\n </Facets>\n</template>\n\n<script>\n import { Facets } from '@empathyco/x-components/facets';\n\n export default {\n components: {\n Facets\n }\n };\n</script>\n```\n\n### Render specific facets I\n\nBy default, this component will render all existing facets. However, it has the renderableFacets\nprop to filter which facets will be rendered. Its value is a string containing the different facets\nids. This value is treated as an include or exclude list (to exclude a facet from being rendered,\njust prefix its id with a `!`). The component will only render included facets and discard excluded\nones. In the following example, the component will only render color and category facets.\n\n```vue\n<template>\n <Facets renderableFacets=\"color, category\">\n <template #default=\"{ facet }\">\n <h1>{{ facet.label }}</h1>\n\n <ul>\n <li v-for=\"filter in facet.filters\" :key=\"filter.id\">\n {{ filter.label }}\n </li>\n </ul>\n </template>\n </Facets>\n</template>\n\n<script>\n import { Facets } from '@empathyco/x-components/facets';\n\n export default {\n components: {\n Facets\n }\n };\n</script>\n```\n\n### Render specific facets II\n\nExclude facets so the component does not render them. In the following example, the component will\nrender every facet except color and price.\n\n```vue\n<template>\n <Facets renderableFacets=\"!color, !price\">\n <template #default=\"{ facet }\">\n <h1>{{ facet.label }}</h1>\n\n <ul>\n <li v-for=\"filter in facet.filters\" :key=\"filter.id\">\n {{ filter.label }}\n </li>\n </ul>\n </template>\n </Facets>\n</template>\n\n<script>\n import { Facets } from '@empathyco/x-components/facets';\n\n export default {\n components: {\n Facets\n }\n };\n</script>\n```\n\n### Integrating with the filters components\n\nThere are many components that will help you build your own awesome filters list. `Facets` just\nrenders the list, but what to render for each facet is up to you. Below you can see an example. of\nthe `Facets` component using the `FiltersSearch` `MultiSelectFilters`, `SimpleFilter`, `Filters`,\n`HierarchicalFilter`, `NumberRangeFilter` and `BasePriceFilterLabel`.\n\n```vue\n<template>\n <Facets>\n <template #default=\"{ facet, selectedFilters }\">\n <h1>{{ facet.label }}</h1>\n <FiltersSearch :filters=\"facet.filters\">\n <MultiSelectFilters v-slot=\"{ filter }\">\n <SimpleFilter :filter=\"filter\" />\n </MultiSelectFilters>\n </FiltersSearch>\n </template>\n\n <template #category=\"{ facet }\">\n <h1>{{ facet.label }}</h1>\n <Filters v-slot=\"{ filter }\" :filters=\"facet.filters\">\n <HierarchicalFilter :filter=\"filter\" />\n </Filters>\n </template>\n\n <template #price=\"{ facet }\">\n <h1>{{ facet.label }}</h1>\n <Filters v-slot=\"{ filter }\" :filters=\"facet.filters\">\n <NumberRangeFilter :filter=\"filter\">\n <BasePriceFilterLabel :filter=\"filter\" />\n </NumberRangeFilter>\n </Filters>\n </template>\n </Facets>\n</template>\n\n<script>\n import {\n Facets,\n Filters,\n FiltersSearch,\n HierarchicalFilter,\n MultiSelectFilters,\n NumberRangeFilter,\n SimpleFilter\n } from '@empathyco/x-components/facets';\n\n import { BasePriceFilterLabel } from '@empathyco/x-components';\n\n export default {\n components: {\n Facets,\n MultiSelectFilters,\n FiltersSearch,\n SimpleFilter,\n Filters,\n HierarchicalFilter,\n NumberRangeFilter,\n BasePriceFilterLabel\n }\n };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
1
|
+
{"version":3,"file":"facets.vue.js","sources":["../../../../../../src/x-modules/facets/components/facets/facets.vue"],"sourcesContent":["<template>\n <component\n :is=\"animation\"\n v-if=\"hasFacets\"\n class=\"x-list x-facets-list\"\n data-test=\"facets\"\n tag=\"ul\"\n >\n <li\n v-for=\"({ facet, slotName }, facetId) in mappedFacets\"\n :key=\"facetId\"\n class=\"x-facets-list__item\"\n data-test=\"facets-facet\"\n >\n <!--\n @slot Customized Facet rendering. Specifying a slot with the facet's name will result in the\n facet using that slot composition to render.\n @binding {Facet} facet - Facet to render\n -->\n <slot\n v-if=\"$scopedSlots[slotName]\"\n v-bind=\"{\n facet,\n selectedFilters: selectedFiltersByFacet[facetId] || []\n }\"\n :name=\"slotName\"\n />\n <!--\n @slot (required) Default Facet rendering. This slot will be used by default for rendering\n the facets without an specific slot implementation.\n @binding {Facet} facet - Facet to render\n -->\n <slot\n v-else\n v-bind=\"{\n facet,\n selectedFilters: selectedFiltersByFacet[facetId] || []\n }\"\n >\n This is the {{ facet.label }} facet. Pass something into its slot to display content.\n </slot>\n </li>\n </component>\n</template>\n\n<script lang=\"ts\">\n import { Facet } from '@empathyco/x-types';\n import { Dictionary, map, objectFilter } from '@empathyco/x-utils';\n import { Component, Prop, Vue } from 'vue-property-decorator';\n import { Getter } from '../../../../components/decorators/store.decorators';\n import { xComponentMixin } from '../../../../components/x-component.mixin';\n import { toKebabCase } from '../../../../utils/string';\n import FacetsMixin from '../facets.mixin';\n import { facetsXModule } from '../../x-module';\n\n /**\n * Custom interface to provide a slot name to a Facet.\n *\n * @internal\n */\n interface RenderFacet {\n slotName: string;\n facet: Facet;\n }\n\n /**\n * This component renders the list of facets stored in the Facets module. Facets can be rendered\n * differently based on their purpose and this can be achieved using the exposed slots:\n * - A default and required slot.\n * - A custom slot for each facet with the facetId as its name. This allows each facet to be\n * rendered differently based on its needs.\n *\n * @remarks It extends {@link FacetsMixin}.\n *\n * @public\n */\n @Component({\n mixins: [xComponentMixin(facetsXModule)]\n })\n export default class Facets extends FacetsMixin {\n /**\n * Animation component that will be used to animate the facets.\n *\n * @public\n */\n @Prop({ default: 'ul' })\n public animation!: Vue | string;\n\n /**\n * Discriminates the facets rendered by this component. It expects a string containing facets\n * ids, comma separated. This property will include or exclude facets based on its value.\n * The default value is an empty string and the component will render all existing facets.\n *\n * @remarks\n * To behave as a `include`, simply set the facets ids, comma separated:\n * `existingFacets=[{ brand: ... }, category: { ... }, color: { ... }, price: { ... }]`\n * `renderableFacets=\"brand, category\"`\n *\n * The component will render brand and category facets.\n *\n * On the other hand, to simulate an `exclude` behaviour and exclude a facet from being\n * rendered, append a '!' before its id:\n * `existingFacets=[{ brand: ... }, category: { ... }, color: { ... }, price: { ... }]`\n * `renderableFacets=\"!brand,!price\"`\n *\n * The component will render category and color facets.\n *\n * @public\n */\n @Prop()\n public renderableFacets!: string | undefined;\n\n /**\n * Dictionary of facets in the state.\n *\n * @internal\n */\n @Getter('facets', 'facets')\n public facets!: Record<Facet['id'], Facet>;\n\n /**\n * Transforms a dictionary of Facets including the slot name.\n *\n * @returns A dictionary of facets with the slot name.\n *\n * @internal\n */\n protected get mappedFacets(): Dictionary<RenderFacet> {\n return map(this.facetsToRender, (facetId, facet) => ({\n slotName: toKebabCase(facetId),\n facet\n }));\n }\n\n /**\n * The facets to be rendered after filtering {@link Facets.facets} by\n * {@link Facets.renderableFacets} content.\n *\n * @returns The list of facets to be rendered.\n *\n * @internal\n */\n protected get facetsToRender(): Dictionary<Facet> {\n if (!this.renderableFacets) {\n return this.facets;\n } else {\n const excludedRegExp = /^!/;\n const facetIds: string[] = this.renderableFacets.split(',').map(facetId => facetId.trim());\n const included: string[] = [];\n const excluded: string[] = [];\n facetIds.forEach(facetId => {\n if (excludedRegExp.test(facetId)) {\n excluded.push(facetId.replace(excludedRegExp, ''));\n } else {\n included.push(facetId);\n }\n });\n\n return this.filterFacetsToRender(included, excluded);\n }\n }\n\n /**\n * Indicates if there are facets available to show.\n *\n * @returns True if there are facets available and false otherwise.\n * @internal\n */\n protected get hasFacets(): boolean {\n return !!Object.keys(this.facetsToRender).length;\n }\n\n /**\n * Filter facets dictionary retrieving those included and/or removing excluded.\n *\n * @param included - List of facets to render.\n * @param excluded - List of not renderable facets.\n *\n * @returns The filtered list of facets to render.\n *\n * @internal\n */\n private filterFacetsToRender(included: string[], excluded: string[]): Dictionary<Facet> {\n const hasAnyFacetIncluded = included.length > 0;\n return objectFilter(this.facets, facetKey => {\n const isIncluded = included.includes(String(facetKey));\n const isExcluded = excluded.includes(String(facetKey));\n\n return hasAnyFacetIncluded ? isIncluded && !isExcluded : !isExcluded;\n });\n }\n }\n</script>\n\n<style lang=\"scss\" scoped>\n .x-facets-list {\n list-style-type: none;\n }\n</style>\n\n<docs lang=\"mdx\">\n## Example\n\nThis component renders the list of facets stored in the Facets module. Facets can be rendered\ndifferently based on their purpose and this can be achieved using the exposed slots:\n\n- A default and required slot.\n- A custom slot for each facet with the facetId as its name. This allows each facet to be rendered\n differently based on its needs.\n\nBelow, there are some examples showing how to use the component with its different configurations.\n\n### Default usage\n\nThe default slot of this component is mandatory. If no other slot is defined, every Facet will be\nrendered as specified in the default slot.\n\n```vue\n<template>\n <Facets>\n <template #default=\"{ facet, selectedFilters }\">\n <h1>{{ ${facet.label} }}</h1>\n <span v-if=\"selectedFilters.length > 0\">{{ `${selectedFilters.length} selected` }}</span>\n\n <ul>\n <li v-for=\"filter in facet.filters\" :key=\"filter.id\">\n {{ filter.label }}\n </li>\n </ul>\n </template>\n </Facets>\n</template>\n\n<script>\n import { Facets } from '@empathyco/x-components/facets';\n\n export default {\n components: {\n Facets\n }\n };\n</script>\n```\n\n### Customized usage\n\nCustomized compositions for a specific Facet can be achieved by using a slot with the same id as the\nfacet to customize. For example, the Facet with the id \"color\" requires a composition that differs\nfrom the rest of the Facets. Doing it in a slot with the name \"color\" will apply this customization\njust to the \"color\" Facet. The other facets will fallback to the composition of the default slot.\n\n```vue\n<template>\n <Facets>\n <template #color=\"{ facet, selectedFilters }\">\n <span v-if=\"selectedFilters.length > 0\">{{ `${selectedFilters.length} colors chosen` }}</span>\n\n <ul v-for=\"filter in facet.filters\" :key=\"filter.id\">\n <li v-if=\"!filter.selected\">\n {{ filter.label }}\n </li>\n </ul>\n </template>\n\n <template #default=\"{ facet }\">\n <h1>{{ facet.label }}</h1>\n\n <ul>\n <li v-for=\"filter in facet.filters\" :key=\"filter.id\">\n {{ filter.label }}\n </li>\n </ul>\n </template>\n </Facets>\n</template>\n\n<script>\n import { Facets } from '@empathyco/x-components/facets';\n\n export default {\n components: {\n Facets\n }\n };\n</script>\n```\n\n### Render specific facets I\n\nBy default, this component will render all existing facets. However, it has the renderableFacets\nprop to filter which facets will be rendered. Its value is a string containing the different facets\nids. This value is treated as an include or exclude list (to exclude a facet from being rendered,\njust prefix its id with a `!`). The component will only render included facets and discard excluded\nones. In the following example, the component will only render color and category facets.\n\n```vue\n<template>\n <Facets renderableFacets=\"color, category\">\n <template #default=\"{ facet }\">\n <h1>{{ facet.label }}</h1>\n\n <ul>\n <li v-for=\"filter in facet.filters\" :key=\"filter.id\">\n {{ filter.label }}\n </li>\n </ul>\n </template>\n </Facets>\n</template>\n\n<script>\n import { Facets } from '@empathyco/x-components/facets';\n\n export default {\n components: {\n Facets\n }\n };\n</script>\n```\n\n### Render specific facets II\n\nExclude facets so the component does not render them. In the following example, the component will\nrender every facet except color and price.\n\n```vue\n<template>\n <Facets renderableFacets=\"!color, !price\">\n <template #default=\"{ facet }\">\n <h1>{{ facet.label }}</h1>\n\n <ul>\n <li v-for=\"filter in facet.filters\" :key=\"filter.id\">\n {{ filter.label }}\n </li>\n </ul>\n </template>\n </Facets>\n</template>\n\n<script>\n import { Facets } from '@empathyco/x-components/facets';\n\n export default {\n components: {\n Facets\n }\n };\n</script>\n```\n\n### Integrating with the filters components\n\nThere are many components that will help you build your own awesome filters list. `Facets` just\nrenders the list, but what to render for each facet is up to you. Below you can see an example. of\nthe `Facets` component using the `FiltersSearch` `MultiSelectFilters`, `SimpleFilter`, `Filters`,\n`HierarchicalFilter`, `NumberRangeFilter` and `BasePriceFilterLabel`.\n\n```vue\n<template>\n <Facets>\n <template #default=\"{ facet, selectedFilters }\">\n <h1>{{ facet.label }}</h1>\n <FiltersSearch :filters=\"facet.filters\">\n <MultiSelectFilters v-slot=\"{ filter }\">\n <SimpleFilter :filter=\"filter\" />\n </MultiSelectFilters>\n </FiltersSearch>\n </template>\n\n <template #category=\"{ facet }\">\n <h1>{{ facet.label }}</h1>\n <Filters v-slot=\"{ filter }\" :filters=\"facet.filters\">\n <HierarchicalFilter :filter=\"filter\" />\n </Filters>\n </template>\n\n <template #price=\"{ facet }\">\n <h1>{{ facet.label }}</h1>\n <Filters v-slot=\"{ filter }\" :filters=\"facet.filters\">\n <NumberRangeFilter :filter=\"filter\">\n <BasePriceFilterLabel :filter=\"filter\" />\n </NumberRangeFilter>\n </Filters>\n </template>\n </Facets>\n</template>\n\n<script>\n import {\n Facets,\n Filters,\n FiltersSearch,\n HierarchicalFilter,\n MultiSelectFilters,\n NumberRangeFilter,\n SimpleFilter\n } from '@empathyco/x-components/facets';\n\n import { BasePriceFilterLabel } from '@empathyco/x-components';\n\n export default {\n components: {\n Facets,\n MultiSelectFilters,\n FiltersSearch,\n SimpleFilter,\n Filters,\n HierarchicalFilter,\n NumberRangeFilter,\n BasePriceFilterLabel\n }\n };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { __decorate } from 'tslib';
|
|
2
|
+
import { map, objectFilter } from '@empathyco/x-utils';
|
|
2
3
|
import { Prop, Component } from 'vue-property-decorator';
|
|
3
4
|
import { Getter } from '../../../../components/decorators/store.decorators.js';
|
|
4
5
|
import { xComponentMixin } from '../../../../components/x-component.mixin.js';
|
|
5
6
|
import { toKebabCase } from '../../../../utils/string.js';
|
|
6
|
-
import { map, objectFilter } from '../../../../utils/object.js';
|
|
7
7
|
import FacetsMixin from '../facets.mixin.js';
|
|
8
8
|
import { facetsXModule } from '../../x-module.js';
|
|
9
9
|
|