@empathyco/x-components 6.0.0-alpha.3 → 6.0.0-alpha.5
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 +37 -1
- package/design-system/deprecated-full-theme.css +1277 -1277
- package/docs/API-reference/api/x-components.snippetconfigextraparams.md +1 -1
- package/docs/API-reference/api/x-components.tagging.md +17 -4
- package/docs/API-reference/components/tagging/x-components.tagging.md +2 -2
- 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.vue2.js +1 -1
- package/js/x-modules/extra-params/components/snippet-config-extra-params.vue2.js.map +1 -1
- package/js/x-modules/tagging/components/tagging.vue.js +8 -2
- package/js/x-modules/tagging/components/tagging.vue.js.map +1 -1
- package/package.json +4 -4
- package/report/x-components.api.json +17 -8
- package/report/x-components.api.md +18 -5
- package/tools/inject-css.js +5 -3
- package/types/x-modules/extra-params/components/snippet-config-extra-params.vue.d.ts +1 -1
- package/types/x-modules/tagging/components/tagging.vue.d.ts +17 -4
- package/types/x-modules/tagging/components/tagging.vue.d.ts.map +1 -1
|
@@ -16,7 +16,7 @@ _default: import("vue").DefineComponent<{
|
|
|
16
16
|
default: () => Array<keyof SnippetConfig>;
|
|
17
17
|
};
|
|
18
18
|
}, {
|
|
19
|
-
extraParams: import("vue").Ref<
|
|
19
|
+
extraParams: import("vue").Ref<Record<string, any>>;
|
|
20
20
|
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
21
21
|
values: {
|
|
22
22
|
type: PropType<Dictionary<unknown>>;
|
|
@@ -19,8 +19,14 @@ _default: import("vue").DefineComponent<{
|
|
|
19
19
|
default: string;
|
|
20
20
|
};
|
|
21
21
|
sessionTTLMs: NumberConstructor;
|
|
22
|
-
queryTaggingDebounceMs:
|
|
23
|
-
|
|
22
|
+
queryTaggingDebounceMs: {
|
|
23
|
+
type: NumberConstructor;
|
|
24
|
+
default: number;
|
|
25
|
+
};
|
|
26
|
+
consent: {
|
|
27
|
+
type: BooleanConstructor;
|
|
28
|
+
default: null;
|
|
29
|
+
};
|
|
24
30
|
}, () => void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
25
31
|
clickedResultStorageTTLMs: {
|
|
26
32
|
type: NumberConstructor;
|
|
@@ -31,11 +37,18 @@ _default: import("vue").DefineComponent<{
|
|
|
31
37
|
default: string;
|
|
32
38
|
};
|
|
33
39
|
sessionTTLMs: NumberConstructor;
|
|
34
|
-
queryTaggingDebounceMs:
|
|
35
|
-
|
|
40
|
+
queryTaggingDebounceMs: {
|
|
41
|
+
type: NumberConstructor;
|
|
42
|
+
default: number;
|
|
43
|
+
};
|
|
44
|
+
consent: {
|
|
45
|
+
type: BooleanConstructor;
|
|
46
|
+
default: null;
|
|
47
|
+
};
|
|
36
48
|
}>>, {
|
|
37
49
|
clickedResultStorageTTLMs: number;
|
|
38
50
|
clickedResultStorageKey: string;
|
|
51
|
+
queryTaggingDebounceMs: number;
|
|
39
52
|
consent: boolean;
|
|
40
53
|
}, {}>
|
|
41
54
|
```
|
|
@@ -17,8 +17,8 @@ It allows you to activate or deactivate the session id management through the `c
|
|
|
17
17
|
| <code>clickedResultStorageTTLMs</code> | The TTL in milliseconds for storing the clicked result info. | <code>number</code> | <code>30000</code> |
|
|
18
18
|
| <code>clickedResultStorageKey</code> | The Object key of the @empathyco/x-types#Result clicked by the user<br />that will be used as id for the storage. By default, the Result url will be used. | <code>string</code> | <code>'url'</code> |
|
|
19
19
|
| <code>sessionTTLMs</code> | The session TTL in milliseconds. | <code>number</code> | <code></code> |
|
|
20
|
-
| <code>queryTaggingDebounceMs</code> | The debounce time in milliseconds to track the query. | <code>number</code> | <code
|
|
21
|
-
| <code>consent</code> | The consent to be emitted. | <code>boolean</code> | <code
|
|
20
|
+
| <code>queryTaggingDebounceMs</code> | The debounce time in milliseconds to track the query. | <code>number</code> | <code>2000</code> |
|
|
21
|
+
| <code>consent</code> | The consent to be emitted. | <code>boolean</code> | <code>null</code> |
|
|
22
22
|
|
|
23
23
|
## Events
|
|
24
24
|
|
|
@@ -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 { forEach, Dictionary } from '@empathyco/x-utils';\n import { defineComponent, inject, PropType, ref, watch } from 'vue';\n import { SnippetConfig } from '../../../x-installer/api/api.types';\n import { extraParamsXModule } from '../x-module';\n import ExtraParams from './extra-params.vue';\n\n export default defineComponent({\n name: 'SnippetConfigExtraParams',\n xModule: extraParamsXModule.name,\n components: {\n ExtraParams\n },\n props: {\n values: {\n type: Object as PropType<Dictionary<unknown>>\n },\n excludedExtraParams: {\n type: Array as PropType<Array<keyof SnippetConfig>>,\n default: (): Array<keyof SnippetConfig> => [\n 'callbacks',\n 'productId',\n 'uiLang',\n 'consent',\n 'documentDirection',\n 'filters',\n 'isSpa',\n 'queriesPreview'\n ]\n }\n },\n setup(props) {\n const snippetConfig = inject('snippetConfig') as SnippetConfig;\n const extraParams = ref({});\n\n watch(\n [() => snippetConfig, () => props.values],\n () => {\n forEach({ ...props.values, ...snippetConfig }, (name, value) => {\n if (!props.excludedExtraParams.includes(name)) {\n extraParams.value = { ...extraParams.value, [name]: value };\n }\n });\n },\n {\n deep: true,\n immediate: true\n }\n );\n\n return {\n extraParams\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":["_resolveComponent"],"mappings":";;;;;AACE,EAAA,MAAA,sBAAA,GAAAA,gBAAA,CAAqC,aAAvB,CAAA,CAAA;;;;;;;"}
|
|
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 { defineComponent, inject, PropType, ref, watch } from 'vue';\n import { SnippetConfig } from '../../../x-installer/api/api.types';\n import { extraParamsXModule } from '../x-module';\n import ExtraParams from './extra-params.vue';\n\n export default defineComponent({\n name: 'SnippetConfigExtraParams',\n xModule: extraParamsXModule.name,\n components: {\n ExtraParams\n },\n props: {\n values: {\n type: Object as PropType<Dictionary<unknown>>\n },\n excludedExtraParams: {\n type: Array as PropType<Array<keyof SnippetConfig>>,\n default: (): Array<keyof SnippetConfig> => [\n 'callbacks',\n 'productId',\n 'uiLang',\n 'consent',\n 'documentDirection',\n 'filters',\n 'isSpa',\n 'queriesPreview'\n ]\n }\n },\n setup(props) {\n const snippetConfig = inject('snippetConfig') as SnippetConfig;\n const extraParams = ref<Record<string, any>>({});\n\n watch(\n [() => snippetConfig, () => props.values],\n () => {\n forEach({ ...props.values, ...snippetConfig }, (name, value) => {\n if (!props.excludedExtraParams.includes(name) && extraParams.value[name] !== value) {\n extraParams.value = { ...extraParams.value, [name]: value };\n }\n });\n },\n {\n deep: true,\n immediate: true\n }\n );\n\n return {\n extraParams\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":["_resolveComponent"],"mappings":";;;;;AACE,EAAA,MAAA,sBAAA,GAAAA,gBAAA,CAAqC,aAAvB,CAAA,CAAA;;;;;;;"}
|
|
@@ -32,7 +32,7 @@ var _sfc_main = defineComponent({
|
|
|
32
32
|
const extraParams = ref({});
|
|
33
33
|
watch([() => snippetConfig, () => props.values], () => {
|
|
34
34
|
forEach({ ...props.values, ...snippetConfig }, (name, value) => {
|
|
35
|
-
if (!props.excludedExtraParams.includes(name)) {
|
|
35
|
+
if (!props.excludedExtraParams.includes(name) && extraParams.value[name] !== value) {
|
|
36
36
|
extraParams.value = { ...extraParams.value, [name]: value };
|
|
37
37
|
}
|
|
38
38
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"snippet-config-extra-params.vue2.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 { defineComponent, inject, PropType, ref, watch } from 'vue';\n import { SnippetConfig } from '../../../x-installer/api/api.types';\n import { extraParamsXModule } from '../x-module';\n import ExtraParams from './extra-params.vue';\n\n export default defineComponent({\n name: 'SnippetConfigExtraParams',\n xModule: extraParamsXModule.name,\n components: {\n ExtraParams\n },\n props: {\n values: {\n type: Object as PropType<Dictionary<unknown>>\n },\n excludedExtraParams: {\n type: Array as PropType<Array<keyof SnippetConfig>>,\n default: (): Array<keyof SnippetConfig> => [\n 'callbacks',\n 'productId',\n 'uiLang',\n 'consent',\n 'documentDirection',\n 'filters',\n 'isSpa',\n 'queriesPreview'\n ]\n }\n },\n setup(props) {\n const snippetConfig = inject('snippetConfig') as SnippetConfig;\n const extraParams = ref({});\n\n watch(\n [() => snippetConfig, () => props.values],\n () => {\n forEach({ ...props.values, ...snippetConfig }, (name, value) => {\n if (!props.excludedExtraParams.includes(name)) {\n extraParams.value = { ...extraParams.value, [name]: value };\n }\n });\n },\n {\n deep: true,\n immediate: true\n }\n );\n\n return {\n extraParams\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":["ExtraParams"],"mappings":";;;;;AAWE,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,0BAA0B;IAChC,OAAO,EAAE,kBAAkB,CAAC,IAAI;AAChC,IAAA,UAAU,EAAE;qBACVA,WAAU;AACX,KAAA;AACD,IAAA,KAAK,EAAE;AACL,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAAsC;AAC7C,SAAA;AACD,QAAA,mBAAmB,EAAE;AACnB,YAAA,IAAI,EAAE,KAA6C;YACnD,OAAO,EAAE,MAAkC;gBACzC,WAAW;gBACX,WAAW;gBACX,QAAQ;gBACR,SAAS;gBACT,mBAAmB;gBACnB,SAAS;gBACT,OAAO;gBACP,gBAAe;AACjB,aAAA;AACF,SAAA;AACD,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,aAAY,GAAI,MAAM,CAAC,eAAe,CAAkB,CAAA;AAC9D,QAAA,MAAM,
|
|
1
|
+
{"version":3,"file":"snippet-config-extra-params.vue2.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 { defineComponent, inject, PropType, ref, watch } from 'vue';\n import { SnippetConfig } from '../../../x-installer/api/api.types';\n import { extraParamsXModule } from '../x-module';\n import ExtraParams from './extra-params.vue';\n\n export default defineComponent({\n name: 'SnippetConfigExtraParams',\n xModule: extraParamsXModule.name,\n components: {\n ExtraParams\n },\n props: {\n values: {\n type: Object as PropType<Dictionary<unknown>>\n },\n excludedExtraParams: {\n type: Array as PropType<Array<keyof SnippetConfig>>,\n default: (): Array<keyof SnippetConfig> => [\n 'callbacks',\n 'productId',\n 'uiLang',\n 'consent',\n 'documentDirection',\n 'filters',\n 'isSpa',\n 'queriesPreview'\n ]\n }\n },\n setup(props) {\n const snippetConfig = inject('snippetConfig') as SnippetConfig;\n const extraParams = ref<Record<string, any>>({});\n\n watch(\n [() => snippetConfig, () => props.values],\n () => {\n forEach({ ...props.values, ...snippetConfig }, (name, value) => {\n if (!props.excludedExtraParams.includes(name) && extraParams.value[name] !== value) {\n extraParams.value = { ...extraParams.value, [name]: value };\n }\n });\n },\n {\n deep: true,\n immediate: true\n }\n );\n\n return {\n extraParams\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":["ExtraParams"],"mappings":";;;;;AAWE,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,0BAA0B;IAChC,OAAO,EAAE,kBAAkB,CAAC,IAAI;AAChC,IAAA,UAAU,EAAE;qBACVA,WAAU;AACX,KAAA;AACD,IAAA,KAAK,EAAE;AACL,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAAsC;AAC7C,SAAA;AACD,QAAA,mBAAmB,EAAE;AACnB,YAAA,IAAI,EAAE,KAA6C;YACnD,OAAO,EAAE,MAAkC;gBACzC,WAAW;gBACX,WAAW;gBACX,QAAQ;gBACR,SAAS;gBACT,mBAAmB;gBACnB,SAAS;gBACT,OAAO;gBACP,gBAAe;AACjB,aAAA;AACF,SAAA;AACD,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,aAAY,GAAI,MAAM,CAAC,eAAe,CAAkB,CAAA;AAC9D,QAAA,MAAM,WAAU,GAAI,GAAG,CAAsB,EAAE,CAAC,CAAA;AAEhD,QAAA,KAAK,CACH,CAAC,MAAM,aAAa,EAAE,MAAM,KAAK,CAAC,MAAM,CAAC,EACzC,MAAM;AACJ,YAAA,OAAO,CAAC,EAAE,GAAG,KAAK,CAAC,MAAM,EAAE,GAAG,aAAY,EAAG,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK;AAC9D,gBAAA,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,QAAQ,CAAC,IAAI,CAAA,IAAK,WAAW,CAAC,KAAK,CAAC,IAAI,CAAA,KAAM,KAAK,EAAE;AAClF,oBAAA,WAAW,CAAC,KAAI,GAAI,EAAE,GAAG,WAAW,CAAC,KAAK,EAAE,CAAC,IAAI,GAAG,KAAI,EAAG,CAAA;AAC7D,iBAAA;AACF,aAAC,CAAC,CAAA;AACJ,SAAC,EACD;AACE,YAAA,IAAI,EAAE,IAAI;AACV,YAAA,SAAS,EAAE,IAAG;AAChB,SAAA,CACD,CAAA;QAED,OAAO;YACL,WAAU;SACX,CAAA;KACH;AACD,CAAA,CAAC;;;;"}
|
|
@@ -35,11 +35,17 @@ var _sfc_main = defineComponent({
|
|
|
35
35
|
/**
|
|
36
36
|
* The debounce time in milliseconds to track the query.
|
|
37
37
|
*/
|
|
38
|
-
queryTaggingDebounceMs:
|
|
38
|
+
queryTaggingDebounceMs: {
|
|
39
|
+
type: Number,
|
|
40
|
+
default: 2000
|
|
41
|
+
},
|
|
39
42
|
/**
|
|
40
43
|
* The consent to be emitted.
|
|
41
44
|
*/
|
|
42
|
-
consent:
|
|
45
|
+
consent: {
|
|
46
|
+
type: Boolean,
|
|
47
|
+
default: null
|
|
48
|
+
}
|
|
43
49
|
},
|
|
44
50
|
setup(props) {
|
|
45
51
|
const xBus = useXBus();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tagging.vue.js","sources":["../../../../../src/x-modules/tagging/components/tagging.vue"],"sourcesContent":["<script lang=\"ts\">\n import { computed, defineComponent, inject, onMounted, watch } from 'vue';\n import { SnippetConfig } from '../../../x-installer/api/api.types';\n import { taggingXModule } from '../x-module';\n import { TaggingConfig } from '../config.types';\n import { useXBus } from '../../../composables/use-x-bus';\n /**\n * This component enables and manages the sending of information to the\n * [Empathy Tagging API](https://docs.empathy.co/develop-empathy-platform/api-reference/tagging-api.html).\n * It allows you to activate or deactivate the session id management through the `consent` prop.\n *\n * @public\n */\n export default defineComponent({\n name: 'Tagging',\n xModule: taggingXModule.name,\n props: {\n /**\n * The TTL in milliseconds for storing the clicked result info.\n */\n clickedResultStorageTTLMs: {\n type: Number,\n default: 30000\n },\n /**\n * The Object key of the {@link @empathyco/x-types#Result} clicked by the user\n * that will be used as id for the storage. By default, the Result url will be used.\n */\n clickedResultStorageKey: {\n type: String,\n default: 'url'\n },\n /**\n * The session TTL in milliseconds.\n */\n sessionTTLMs: Number,\n /**\n * The debounce time in milliseconds to track the query.\n */\n queryTaggingDebounceMs: Number,\n /**\n * The consent to be emitted.\n */\n consent: Boolean\n },\n setup(props) {\n const xBus = useXBus();\n\n /**\n * It injects {@link SnippetConfig} provided by an ancestor as snippetConfig.\n */\n const snippetConfig = inject<SnippetConfig | undefined>('snippetConfig');\n\n /**\n * The active consent, selected from the `consent` prop and the `snippetConfig.consent`\n * property. False by default.\n *\n * @remarks If the consent is undefined in the prop and in the snippetConfig, it will return\n * false.\n *\n * @returns A boolean that represents if the consent is accepted or not.\n */\n const activeConsent = computed(() => props.consent ?? snippetConfig?.consent ?? false);\n\n /**\n * The tagging config to be emitted.\n */\n const taggingConfig = computed<TaggingConfig>(() => {\n return {\n queryTaggingDebounceMs: props.queryTaggingDebounceMs
|
|
1
|
+
{"version":3,"file":"tagging.vue.js","sources":["../../../../../src/x-modules/tagging/components/tagging.vue"],"sourcesContent":["<script lang=\"ts\">\n import { computed, defineComponent, inject, onMounted, watch } from 'vue';\n import { SnippetConfig } from '../../../x-installer/api/api.types';\n import { taggingXModule } from '../x-module';\n import { TaggingConfig } from '../config.types';\n import { useXBus } from '../../../composables/use-x-bus';\n /**\n * This component enables and manages the sending of information to the\n * [Empathy Tagging API](https://docs.empathy.co/develop-empathy-platform/api-reference/tagging-api.html).\n * It allows you to activate or deactivate the session id management through the `consent` prop.\n *\n * @public\n */\n export default defineComponent({\n name: 'Tagging',\n xModule: taggingXModule.name,\n props: {\n /**\n * The TTL in milliseconds for storing the clicked result info.\n */\n clickedResultStorageTTLMs: {\n type: Number,\n default: 30000\n },\n /**\n * The Object key of the {@link @empathyco/x-types#Result} clicked by the user\n * that will be used as id for the storage. By default, the Result url will be used.\n */\n clickedResultStorageKey: {\n type: String,\n default: 'url'\n },\n /**\n * The session TTL in milliseconds.\n */\n sessionTTLMs: Number,\n /**\n * The debounce time in milliseconds to track the query.\n */\n queryTaggingDebounceMs: {\n type: Number,\n default: 2000\n },\n /**\n * The consent to be emitted.\n */\n consent: {\n type: Boolean,\n default: null\n }\n },\n setup(props) {\n const xBus = useXBus();\n\n /**\n * It injects {@link SnippetConfig} provided by an ancestor as snippetConfig.\n */\n const snippetConfig = inject<SnippetConfig | undefined>('snippetConfig');\n\n /**\n * The active consent, selected from the `consent` prop and the `snippetConfig.consent`\n * property. False by default.\n *\n * @remarks If the consent is undefined in the prop and in the snippetConfig, it will return\n * false.\n *\n * @returns A boolean that represents if the consent is accepted or not.\n */\n const activeConsent = computed(() => props.consent ?? snippetConfig?.consent ?? false);\n\n /**\n * The tagging config to be emitted.\n */\n const taggingConfig = computed<TaggingConfig>(() => {\n return {\n queryTaggingDebounceMs: props.queryTaggingDebounceMs,\n sessionTTLMs: props.sessionTTLMs as number,\n clickedResultStorageTTLMs: props.clickedResultStorageTTLMs,\n clickedResultStorageKey: props.clickedResultStorageKey\n };\n });\n\n /**\n * Emits the {@link TaggingXEvents.PDPIsLoaded} XEvent if the snippet config contains\n * a product id.\n */\n onMounted(() => {\n if (snippetConfig?.productId) {\n xBus.emit('PDPIsLoaded', snippetConfig.productId);\n }\n });\n\n /**\n * Emmits the consent when it changes.\n */\n watch(activeConsent, () => xBus.emit('ConsentProvided', activeConsent.value), {\n immediate: true\n });\n\n /**\n * Emmits the tagging config when it changes.\n */\n watch(taggingConfig, () => xBus.emit('TaggingConfigProvided', taggingConfig.value), {\n immediate: true\n });\n\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n return () => {};\n }\n });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`ConsentProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`TaggingConfigProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n\n## See it in action\n\nThis component manages the tagging of the API to track the different features. This component\ndoesn't render elements to the DOM.\n\n```vue\n<template>\n <Tagging />\n</template>\n\n<script>\n import { Tagging } from '@empathyco/x-components/tagging';\n\n export default {\n name: 'TaggingDemo',\n components: {\n Tagging\n }\n };\n</script>\n```\n\n### Play with props\n\nIn this example, the `Tagging` component will emit `ConsentProvided` with payload false by default\nif the consent is not provided, the `TaggingConfigProvided` event will be emitted only if the props\n`queryTaggingDebounceMs`, `sessionDurationMs`, `clickedResultStorageTTLMs` or\n`clickedResultStorageKey`are defined.\n\nEvery time the user clicks a result the information for the clicked product will be stored on the\nbrowser during 30 seconds which is the default value for the prop `clickedResultStorageTTLMs`. To\ndistinguish the storage information for the different results the product url will be used since\n`clickedResultStorageKey` default value is 'url'.\n\n```vue\n<template>\n <Tagging :consent=\"true\" :queryTaggingDebounceMs=\"300\" :sessionDurationMs=\"30000\" />\n</template>\n\n<script>\n import { Tagging } from '@empathyco/x-components/tagging';\n\n export default {\n name: 'TaggingDemo',\n components: {\n Tagging\n }\n };\n</script>\n```\n\nIn this example, the clicked result information will be stored on the browser during 60 seconds and\nthe product id will be used as storage key.\n\n```vue\n<template>\n <Tagging :clickedResultStorageTTLMs=\"60000\" :clickedResultStorageKey=\"'id'\" />\n</template>\n\n<script>\n import { Tagging } from '@empathyco/x-components/tagging';\n\n export default {\n name: 'TaggingDemo',\n components: {\n Tagging\n }\n };\n</script>\n```\n\n### Play with events\n\nThe `Tagging` will emit the `ConsentProvided` when the component is loaded and the consent is set by\nthe prop or getting the value from the snippet config.\n\nThe `Tagging` will emit the `TaggingConfigProvided` when the component is loaded with the new\n[`TaggingConfig`](./../../api/x-components.taggingconfig.md) using the prop values.\n</docs>\n"],"names":[],"mappings":";;;;AAME;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,SAAS;IACf,OAAO,EAAE,cAAc,CAAC,IAAI;AAC5B,IAAA,KAAK,EAAE;AACL;;AAEE;AACF,QAAA,yBAAyB,EAAE;AACzB,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,KAAI;AACd,SAAA;AACD;;;AAGE;AACF,QAAA,uBAAuB,EAAE;AACvB,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,KAAI;AACd,SAAA;AACD;;AAEE;AACF,QAAA,YAAY,EAAE,MAAM;AACpB;;AAEE;AACF,QAAA,sBAAsB,EAAE;AACtB,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,IAAG;AACb,SAAA;AACD;;AAEE;AACF,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,IAAG;AACd,SAAA;AACD,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,IAAG,GAAI,OAAO,EAAE,CAAA;AAEtB;;AAEE;AACF,QAAA,MAAM,aAAY,GAAI,MAAM,CAA4B,eAAe,CAAC,CAAA;AAExE;;;;;;;;AAQE;AACF,QAAA,MAAM,aAAY,GAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,OAAM,IAAK,aAAa,EAAE,OAAQ,IAAG,KAAK,CAAC,CAAA;AAEtF;;AAEE;AACF,QAAA,MAAM,gBAAgB,QAAQ,CAAgB,MAAM;YAClD,OAAO;gBACL,sBAAsB,EAAE,KAAK,CAAC,sBAAsB;gBACpD,YAAY,EAAE,KAAK,CAAC,YAAsB;gBAC1C,yBAAyB,EAAE,KAAK,CAAC,yBAAyB;gBAC1D,uBAAuB,EAAE,KAAK,CAAC,uBAAsB;aACtD,CAAA;AACH,SAAC,CAAC,CAAA;AAEF;;;AAGE;QACF,SAAS,CAAC,MAAM;YACd,IAAI,aAAa,EAAE,SAAS,EAAE;gBAC5B,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,aAAa,CAAC,SAAS,CAAC,CAAA;AACnD,aAAA;AACF,SAAC,CAAC,CAAA;AAEF;;AAEE;AACF,QAAA,KAAK,CAAC,aAAa,EAAE,MAAM,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE,aAAa,CAAC,KAAK,CAAC,EAAE;AAC5E,YAAA,SAAS,EAAE,IAAG;AACf,SAAA,CAAC,CAAA;AAEF;;AAEE;AACF,QAAA,KAAK,CAAC,aAAa,EAAE,MAAM,IAAI,CAAC,IAAI,CAAC,uBAAuB,EAAE,aAAa,CAAC,KAAK,CAAC,EAAE;AAClF,YAAA,SAAS,EAAE,IAAG;AACf,SAAA,CAAC,CAAA;;AAGF,QAAA,OAAO,MAAO,GAAC,CAAA;KACjB;AACD,CAAA,CAAC;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@empathyco/x-components",
|
|
3
|
-
"version": "6.0.0-alpha.
|
|
3
|
+
"version": "6.0.0-alpha.5",
|
|
4
4
|
"description": "Empathy X Components",
|
|
5
5
|
"author": "Empathy Systems Corporation S.L.",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -85,13 +85,13 @@
|
|
|
85
85
|
"vue-global-events": "~3.0.1"
|
|
86
86
|
},
|
|
87
87
|
"peerDependencies": {
|
|
88
|
-
"vue": "
|
|
88
|
+
"vue": "^3.5.12",
|
|
89
89
|
"vuex": "4.0.2"
|
|
90
90
|
},
|
|
91
91
|
"devDependencies": {
|
|
92
92
|
"@badeball/cypress-cucumber-preprocessor": "~20.0.0",
|
|
93
93
|
"@bahmutov/cypress-esbuild-preprocessor": "~2.2.0",
|
|
94
|
-
"@empathyco/x-tailwindcss": "^1.2.0-alpha.
|
|
94
|
+
"@empathyco/x-tailwindcss": "^1.2.0-alpha.7",
|
|
95
95
|
"@microsoft/api-documenter": "~7.23.0",
|
|
96
96
|
"@microsoft/api-extractor": "~7.39.0",
|
|
97
97
|
"@testing-library/jest-dom": "~5.17.0",
|
|
@@ -137,5 +137,5 @@
|
|
|
137
137
|
"access": "public",
|
|
138
138
|
"directory": "dist"
|
|
139
139
|
},
|
|
140
|
-
"gitHead": "
|
|
140
|
+
"gitHead": "7b902304aa824dcb79eeeaea29b884d0a36a01cb"
|
|
141
141
|
}
|
|
@@ -74440,7 +74440,16 @@
|
|
|
74440
74440
|
},
|
|
74441
74441
|
{
|
|
74442
74442
|
"kind": "Content",
|
|
74443
|
-
"text": "<
|
|
74443
|
+
"text": "<"
|
|
74444
|
+
},
|
|
74445
|
+
{
|
|
74446
|
+
"kind": "Reference",
|
|
74447
|
+
"text": "Record",
|
|
74448
|
+
"canonicalReference": "!Record:type"
|
|
74449
|
+
},
|
|
74450
|
+
{
|
|
74451
|
+
"kind": "Content",
|
|
74452
|
+
"text": "<string, any>>;\n}, unknown, {}, {}, import(\"vue\")."
|
|
74444
74453
|
},
|
|
74445
74454
|
{
|
|
74446
74455
|
"kind": "Reference",
|
|
@@ -74557,7 +74566,7 @@
|
|
|
74557
74566
|
"name": "SnippetConfigExtraParams",
|
|
74558
74567
|
"variableTypeTokenRange": {
|
|
74559
74568
|
"startIndex": 1,
|
|
74560
|
-
"endIndex":
|
|
74569
|
+
"endIndex": 44
|
|
74561
74570
|
}
|
|
74562
74571
|
},
|
|
74563
74572
|
{
|
|
@@ -76399,7 +76408,7 @@
|
|
|
76399
76408
|
},
|
|
76400
76409
|
{
|
|
76401
76410
|
"kind": "Content",
|
|
76402
|
-
"text": ";\n queryTaggingDebounceMs: "
|
|
76411
|
+
"text": ";\n queryTaggingDebounceMs: {\n type: "
|
|
76403
76412
|
},
|
|
76404
76413
|
{
|
|
76405
76414
|
"kind": "Reference",
|
|
@@ -76408,7 +76417,7 @@
|
|
|
76408
76417
|
},
|
|
76409
76418
|
{
|
|
76410
76419
|
"kind": "Content",
|
|
76411
|
-
"text": ";\n consent: "
|
|
76420
|
+
"text": ";\n default: number;\n };\n consent: {\n type: "
|
|
76412
76421
|
},
|
|
76413
76422
|
{
|
|
76414
76423
|
"kind": "Reference",
|
|
@@ -76417,7 +76426,7 @@
|
|
|
76417
76426
|
},
|
|
76418
76427
|
{
|
|
76419
76428
|
"kind": "Content",
|
|
76420
|
-
"text": ";\n}, () => void, unknown, {}, {}, import(\"vue\")."
|
|
76429
|
+
"text": ";\n default: null;\n };\n}, () => void, unknown, {}, {}, import(\"vue\")."
|
|
76421
76430
|
},
|
|
76422
76431
|
{
|
|
76423
76432
|
"kind": "Reference",
|
|
@@ -76489,7 +76498,7 @@
|
|
|
76489
76498
|
},
|
|
76490
76499
|
{
|
|
76491
76500
|
"kind": "Content",
|
|
76492
|
-
"text": ";\n queryTaggingDebounceMs: "
|
|
76501
|
+
"text": ";\n queryTaggingDebounceMs: {\n type: "
|
|
76493
76502
|
},
|
|
76494
76503
|
{
|
|
76495
76504
|
"kind": "Reference",
|
|
@@ -76498,7 +76507,7 @@
|
|
|
76498
76507
|
},
|
|
76499
76508
|
{
|
|
76500
76509
|
"kind": "Content",
|
|
76501
|
-
"text": ";\n consent: "
|
|
76510
|
+
"text": ";\n default: number;\n };\n consent: {\n type: "
|
|
76502
76511
|
},
|
|
76503
76512
|
{
|
|
76504
76513
|
"kind": "Reference",
|
|
@@ -76507,7 +76516,7 @@
|
|
|
76507
76516
|
},
|
|
76508
76517
|
{
|
|
76509
76518
|
"kind": "Content",
|
|
76510
|
-
"text": ";\n}>>, {\n clickedResultStorageTTLMs: number;\n clickedResultStorageKey: string;\n consent: boolean;\n}, {}>"
|
|
76519
|
+
"text": ";\n default: null;\n };\n}>>, {\n clickedResultStorageTTLMs: number;\n clickedResultStorageKey: string;\n queryTaggingDebounceMs: number;\n consent: boolean;\n}, {}>"
|
|
76511
76520
|
}
|
|
76512
76521
|
],
|
|
76513
76522
|
"fileUrlPath": "dist/types/x-modules/tagging/components/tagging.vue.d.ts",
|
|
@@ -7387,7 +7387,7 @@ type: PropType<(keyof SnippetConfig)[]>;
|
|
|
7387
7387
|
default: () => Array<keyof SnippetConfig>;
|
|
7388
7388
|
};
|
|
7389
7389
|
}, {
|
|
7390
|
-
extraParams: Ref<
|
|
7390
|
+
extraParams: Ref<Record<string, any>>;
|
|
7391
7391
|
}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes< {
|
|
7392
7392
|
values: {
|
|
7393
7393
|
type: PropType<Dictionary<unknown>>;
|
|
@@ -7624,8 +7624,14 @@ type: StringConstructor;
|
|
|
7624
7624
|
default: string;
|
|
7625
7625
|
};
|
|
7626
7626
|
sessionTTLMs: NumberConstructor;
|
|
7627
|
-
queryTaggingDebounceMs:
|
|
7628
|
-
|
|
7627
|
+
queryTaggingDebounceMs: {
|
|
7628
|
+
type: NumberConstructor;
|
|
7629
|
+
default: number;
|
|
7630
|
+
};
|
|
7631
|
+
consent: {
|
|
7632
|
+
type: BooleanConstructor;
|
|
7633
|
+
default: null;
|
|
7634
|
+
};
|
|
7629
7635
|
}, () => void, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes< {
|
|
7630
7636
|
clickedResultStorageTTLMs: {
|
|
7631
7637
|
type: NumberConstructor;
|
|
@@ -7636,11 +7642,18 @@ type: StringConstructor;
|
|
|
7636
7642
|
default: string;
|
|
7637
7643
|
};
|
|
7638
7644
|
sessionTTLMs: NumberConstructor;
|
|
7639
|
-
queryTaggingDebounceMs:
|
|
7640
|
-
|
|
7645
|
+
queryTaggingDebounceMs: {
|
|
7646
|
+
type: NumberConstructor;
|
|
7647
|
+
default: number;
|
|
7648
|
+
};
|
|
7649
|
+
consent: {
|
|
7650
|
+
type: BooleanConstructor;
|
|
7651
|
+
default: null;
|
|
7652
|
+
};
|
|
7641
7653
|
}>>, {
|
|
7642
7654
|
clickedResultStorageTTLMs: number;
|
|
7643
7655
|
clickedResultStorageKey: string;
|
|
7656
|
+
queryTaggingDebounceMs: number;
|
|
7644
7657
|
consent: boolean;
|
|
7645
7658
|
}, {}>;
|
|
7646
7659
|
|
package/tools/inject-css.js
CHANGED
|
@@ -5,9 +5,11 @@
|
|
|
5
5
|
* @params css - CSS code.
|
|
6
6
|
*/
|
|
7
7
|
function injectCss(css) {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
8
|
+
if (document) {
|
|
9
|
+
const el = document.createElement('style');
|
|
10
|
+
el.textContent = css;
|
|
11
|
+
document.head.appendChild(el);
|
|
12
|
+
}
|
|
11
13
|
}
|
|
12
14
|
|
|
13
15
|
export default injectCss;
|
|
@@ -10,7 +10,7 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
10
10
|
default: () => Array<keyof SnippetConfig>;
|
|
11
11
|
};
|
|
12
12
|
}, {
|
|
13
|
-
extraParams: import("vue").Ref<
|
|
13
|
+
extraParams: import("vue").Ref<Record<string, any>>;
|
|
14
14
|
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
15
15
|
values: {
|
|
16
16
|
type: PropType<Dictionary<unknown>>;
|
|
@@ -28,11 +28,17 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
28
28
|
/**
|
|
29
29
|
* The debounce time in milliseconds to track the query.
|
|
30
30
|
*/
|
|
31
|
-
queryTaggingDebounceMs:
|
|
31
|
+
queryTaggingDebounceMs: {
|
|
32
|
+
type: NumberConstructor;
|
|
33
|
+
default: number;
|
|
34
|
+
};
|
|
32
35
|
/**
|
|
33
36
|
* The consent to be emitted.
|
|
34
37
|
*/
|
|
35
|
-
consent:
|
|
38
|
+
consent: {
|
|
39
|
+
type: BooleanConstructor;
|
|
40
|
+
default: null;
|
|
41
|
+
};
|
|
36
42
|
}, () => void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
37
43
|
/**
|
|
38
44
|
* The TTL in milliseconds for storing the clicked result info.
|
|
@@ -56,14 +62,21 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
56
62
|
/**
|
|
57
63
|
* The debounce time in milliseconds to track the query.
|
|
58
64
|
*/
|
|
59
|
-
queryTaggingDebounceMs:
|
|
65
|
+
queryTaggingDebounceMs: {
|
|
66
|
+
type: NumberConstructor;
|
|
67
|
+
default: number;
|
|
68
|
+
};
|
|
60
69
|
/**
|
|
61
70
|
* The consent to be emitted.
|
|
62
71
|
*/
|
|
63
|
-
consent:
|
|
72
|
+
consent: {
|
|
73
|
+
type: BooleanConstructor;
|
|
74
|
+
default: null;
|
|
75
|
+
};
|
|
64
76
|
}>>, {
|
|
65
77
|
clickedResultStorageTTLMs: number;
|
|
66
78
|
clickedResultStorageKey: string;
|
|
79
|
+
queryTaggingDebounceMs: number;
|
|
67
80
|
consent: boolean;
|
|
68
81
|
}, {}>;
|
|
69
82
|
export default _default;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tagging.vue?vue&type=script&lang.d.ts","sourceRoot":"","sources":["../../../../../src/x-modules/tagging/components/tagging.vue?vue&type=script&lang.ts"],"names":[],"mappings":"AAME;;;;;;GAMG;;IAKC;;OAEG;;;;;IAKH;;;OAGG;;;;;IAKH;;OAEG;;IAEH;;OAEG;;
|
|
1
|
+
{"version":3,"file":"tagging.vue?vue&type=script&lang.d.ts","sourceRoot":"","sources":["../../../../../src/x-modules/tagging/components/tagging.vue?vue&type=script&lang.ts"],"names":[],"mappings":"AAME;;;;;;GAMG;;IAKC;;OAEG;;;;;IAKH;;;OAGG;;;;;IAKH;;OAEG;;IAEH;;OAEG;;;;;IAKH;;OAEG;;;;;;IA5BH;;OAEG;;;;;IAKH;;;OAGG;;;;;IAKH;;OAEG;;IAEH;;OAEG;;;;;IAKH;;OAEG;;;;;;;;;;;AAhCP,wBAgGG"}
|