@empathyco/x-components 6.0.0-alpha.202 → 6.0.0-alpha.203

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.
Files changed (36) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/js/components/animations/animate-clip-path/animate-clip-path.factory.js +1 -1
  3. package/js/components/animations/animate-clip-path/animate-clip-path.factory.js.map +1 -1
  4. package/js/components/animations/animate-clip-path/{animate-clip-path.style.scss.js → animate-clip-path.style.css.js} +1 -1
  5. package/js/components/animations/animate-clip-path/animate-clip-path.style.css.js.map +1 -0
  6. package/js/components/animations/animate-scale/animate-scale.factory.js +1 -1
  7. package/js/components/animations/animate-scale/animate-scale.factory.js.map +1 -1
  8. package/js/components/animations/animate-scale/{animate-scale.style.scss.js → animate-scale.style.css.js} +1 -1
  9. package/js/components/animations/animate-scale/animate-scale.style.css.js.map +1 -0
  10. package/js/components/animations/animate-translate/animate-translate.factory.js +1 -1
  11. package/js/components/animations/animate-translate/animate-translate.factory.js.map +1 -1
  12. package/js/components/animations/animate-translate/{animate-translate.style.scss.js → animate-translate.style.css.js} +1 -1
  13. package/js/components/animations/animate-translate/animate-translate.style.css.js.map +1 -0
  14. package/js/components/base-dropdown.vue2.js +3 -3
  15. package/js/components/modals/base-modal.vue2.js +3 -3
  16. package/js/components/panels/base-header-toggle-panel.vue2.js +3 -3
  17. package/js/components/panels/base-id-toggle-panel.vue2.js +3 -3
  18. package/js/components/panels/base-tabs-panel.vue2.js +3 -3
  19. package/js/components/result/base-result-image.vue2.js +3 -3
  20. package/js/x-modules/ai/components/ai-overview.vue2.js +3 -3
  21. package/js/x-modules/empathize/components/empathize.vue2.js +3 -3
  22. package/js/x-modules/queries-preview/components/query-preview-button.vue2.js +3 -3
  23. package/js/x-modules/queries-preview/components/query-preview-list.vue.js.map +1 -1
  24. package/js/x-modules/queries-preview/components/query-preview-list.vue2.js.map +1 -1
  25. package/js/x-modules/queries-preview/components/query-preview.vue2.js +3 -3
  26. package/js/x-modules/scroll/components/scroll-to-top.vue2.js +3 -3
  27. package/package.json +3 -7
  28. package/types/components/animations/animate-clip-path/animate-clip-path.factory.d.ts +1 -1
  29. package/types/components/animations/animate-clip-path/animate-clip-path.factory.d.ts.map +1 -1
  30. package/types/components/animations/animate-scale/animate-scale.factory.d.ts +1 -1
  31. package/types/components/animations/animate-scale/animate-scale.factory.d.ts.map +1 -1
  32. package/types/components/animations/animate-translate/animate-translate.factory.d.ts +1 -1
  33. package/types/components/animations/animate-translate/animate-translate.factory.d.ts.map +1 -1
  34. package/js/components/animations/animate-clip-path/animate-clip-path.style.scss.js.map +0 -1
  35. package/js/components/animations/animate-scale/animate-scale.style.scss.js.map +0 -1
  36. package/js/components/animations/animate-translate/animate-translate.style.scss.js.map +0 -1
package/CHANGELOG.md CHANGED
@@ -3,6 +3,14 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## 6.0.0-alpha.203 (2026-02-24)
7
+
8
+ * refactor: remove sass ([1557098](https://github.com/empathyco/x/commit/1557098))
9
+
10
+
11
+
12
+
13
+
6
14
  ## 6.0.0-alpha.202 (2026-02-18)
7
15
 
8
16
  * feat(x-design-system): add `x-design-system` package with initial skeleton for tailwind 4 (#1988) ([e30f630](https://github.com/empathyco/x/commit/e30f630)), closes [#1988](https://github.com/empathyco/x/issues/1988)
package/js/components/animations/animate-clip-path/animate-clip-path.factory.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { createDirectionalAnimationFactory } from '../create-directional-animation-factory.js';
2
- import './animate-clip-path.style.scss.js';
2
+ import './animate-clip-path.style.css.js';
3
3
 
4
4
  /**
5
5
  * Returns a transition component to wrap an element passed in the default slot and animating its
package/js/components/animations/animate-clip-path/animate-clip-path.factory.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"animate-clip-path.factory.js","sources":["../../../../../src/components/animations/animate-clip-path/animate-clip-path.factory.ts"],"sourcesContent":["import { createDirectionalAnimationFactory } from '../create-directional-animation-factory'\nimport './animate-clip-path.style.scss'\n\n/**\n * Returns a transition component to wrap an element passed in the default slot and animating its\n * clip-path using inset and with the origin passed as parameter.\n *\n * @param animationOrigin - The origin of the animation. This means where the animation starts and\n * ends. For example 'left' makes the element animate from the left and back; 'left-to-right' makes\n * it animate from left to right. If not provided the default value is 'top'.\n * @returns A Transition Component.\n *\n * @public\n */\nexport const animateClipPath = createDirectionalAnimationFactory('animate-clip-path')\n"],"names":[],"mappings":";;;AAGA;;;;;;;;;;AAUG;MACU,eAAe,GAAG,iCAAiC,CAAC,mBAAmB;;;;"}
1
+ {"version":3,"file":"animate-clip-path.factory.js","sources":["../../../../../src/components/animations/animate-clip-path/animate-clip-path.factory.ts"],"sourcesContent":["import { createDirectionalAnimationFactory } from '../create-directional-animation-factory'\nimport './animate-clip-path.style.css'\n\n/**\n * Returns a transition component to wrap an element passed in the default slot and animating its\n * clip-path using inset and with the origin passed as parameter.\n *\n * @param animationOrigin - The origin of the animation. This means where the animation starts and\n * ends. For example 'left' makes the element animate from the left and back; 'left-to-right' makes\n * it animate from left to right. If not provided the default value is 'top'.\n * @returns A Transition Component.\n *\n * @public\n */\nexport const animateClipPath = createDirectionalAnimationFactory('animate-clip-path')\n"],"names":[],"mappings":";;;AAGA;;;;;;;;;;AAUG;MACU,eAAe,GAAG,iCAAiC,CAAC,mBAAmB;;;;"}
package/js/components/animations/animate-clip-path/{animate-clip-path.style.scss.js → animate-clip-path.style.css.js} RENAMED
@@ -4,4 +4,4 @@ var css = ".x-animate-clip-path--enter-active,.x-animate-clip-path--leave-active
4
4
  injectCss(css);
5
5
 
6
6
  export { css };
7
- //# sourceMappingURL=animate-clip-path.style.scss.js.map
7
+ //# sourceMappingURL=animate-clip-path.style.css.js.map
package/js/components/animations/animate-clip-path/animate-clip-path.style.css.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"animate-clip-path.style.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}
package/js/components/animations/animate-scale/animate-scale.factory.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { createDirectionalAnimationFactory } from '../create-directional-animation-factory.js';
2
- import './animate-scale.style.scss.js';
2
+ import './animate-scale.style.css.js';
3
3
 
4
4
  /**
5
5
  * Returns a transition component to wrap an element passed in the default slot and animating its
package/js/components/animations/animate-scale/animate-scale.factory.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"animate-scale.factory.js","sources":["../../../../../src/components/animations/animate-scale/animate-scale.factory.ts"],"sourcesContent":["import { createDirectionalAnimationFactory } from '../create-directional-animation-factory'\nimport './animate-scale.style.scss'\n\n/**\n * Returns a transition component to wrap an element passed in the default slot and animating its\n * scale using transform and with the transform origin passed as parameter.\n *\n * @param animationOrigin - The origin of the transform animation. This means where the animation\n * starts and ends. For example 'left' makes the element animate from the left and back;\n * 'left-to-right' makes it animate from left to right. If not provided the default value is 'top'.\n * @returns A Transition Component.\n *\n * @public\n */\nexport const animateScale = createDirectionalAnimationFactory('animate-scale')\n"],"names":[],"mappings":";;;AAGA;;;;;;;;;;AAUG;MACU,YAAY,GAAG,iCAAiC,CAAC,eAAe;;;;"}
1
+ {"version":3,"file":"animate-scale.factory.js","sources":["../../../../../src/components/animations/animate-scale/animate-scale.factory.ts"],"sourcesContent":["import { createDirectionalAnimationFactory } from '../create-directional-animation-factory'\nimport './animate-scale.style.css'\n\n/**\n * Returns a transition component to wrap an element passed in the default slot and animating its\n * scale using transform and with the transform origin passed as parameter.\n *\n * @param animationOrigin - The origin of the transform animation. This means where the animation\n * starts and ends. For example 'left' makes the element animate from the left and back;\n * 'left-to-right' makes it animate from left to right. If not provided the default value is 'top'.\n * @returns A Transition Component.\n *\n * @public\n */\nexport const animateScale = createDirectionalAnimationFactory('animate-scale')\n"],"names":[],"mappings":";;;AAGA;;;;;;;;;;AAUG;MACU,YAAY,GAAG,iCAAiC,CAAC,eAAe;;;;"}
package/js/components/animations/animate-scale/{animate-scale.style.scss.js → animate-scale.style.css.js} RENAMED
@@ -4,4 +4,4 @@ var css = ".x-animate-scale--enter-active,.x-animate-scale--enter-active *,.x-an
4
4
  injectCss(css);
5
5
 
6
6
  export { css };
7
- //# sourceMappingURL=animate-scale.style.scss.js.map
7
+ //# sourceMappingURL=animate-scale.style.css.js.map
package/js/components/animations/animate-scale/animate-scale.style.css.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"animate-scale.style.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}
package/js/components/animations/animate-translate/animate-translate.factory.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { createDirectionalAnimationFactory } from '../create-directional-animation-factory.js';
2
- import './animate-translate.style.scss.js';
2
+ import './animate-translate.style.css.js';
3
3
 
4
4
  /**
5
5
  * Returns a transition component to wrap an element passed in the default slot and animating its
package/js/components/animations/animate-translate/animate-translate.factory.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"animate-translate.factory.js","sources":["../../../../../src/components/animations/animate-translate/animate-translate.factory.ts"],"sourcesContent":["import { createDirectionalAnimationFactory } from '../create-directional-animation-factory'\nimport './animate-translate.style.scss'\n\n/**\n * Returns a transition component to wrap an element passed in the default slot and animating its\n * translate using transform and with the transform origin passed as parameter.\n *\n * @param animationOrigin - The origin of the transform animation. This means where the animation\n * starts and ends. For example 'left' makes the element animate from the left and back;\n * 'left-to-right' makes it animate from left to right. If not provided the default value is 'top'.\n * @returns A Transition Component.\n *\n * @public\n */\nexport const animateTranslate = createDirectionalAnimationFactory('animate-translate')\n"],"names":[],"mappings":";;;AAGA;;;;;;;;;;AAUG;MACU,gBAAgB,GAAG,iCAAiC,CAAC,mBAAmB;;;;"}
1
+ {"version":3,"file":"animate-translate.factory.js","sources":["../../../../../src/components/animations/animate-translate/animate-translate.factory.ts"],"sourcesContent":["import { createDirectionalAnimationFactory } from '../create-directional-animation-factory'\nimport './animate-translate.style.css'\n\n/**\n * Returns a transition component to wrap an element passed in the default slot and animating its\n * translate using transform and with the transform origin passed as parameter.\n *\n * @param animationOrigin - The origin of the transform animation. This means where the animation\n * starts and ends. For example 'left' makes the element animate from the left and back;\n * 'left-to-right' makes it animate from left to right. If not provided the default value is 'top'.\n * @returns A Transition Component.\n *\n * @public\n */\nexport const animateTranslate = createDirectionalAnimationFactory('animate-translate')\n"],"names":[],"mappings":";;;AAGA;;;;;;;;;;AAUG;MACU,gBAAgB,GAAG,iCAAiC,CAAC,mBAAmB;;;;"}
package/js/components/animations/animate-translate/{animate-translate.style.scss.js → animate-translate.style.css.js} RENAMED
@@ -4,4 +4,4 @@ var css = ".x-animate-translate--enter-active,.x-animate-translate--leave-active
4
4
  injectCss(css);
5
5
 
6
6
  export { css };
7
- //# sourceMappingURL=animate-translate.style.scss.js.map
7
+ //# sourceMappingURL=animate-translate.style.css.js.map
package/js/components/animations/animate-translate/animate-translate.style.css.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"animate-translate.style.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}
package/js/components/base-dropdown.vue2.js CHANGED
@@ -4,9 +4,9 @@ import { debounce } from '../utils/debounce.js';
4
4
  import { getTargetElement } from '../utils/html.js';
5
5
  import { normalizeString } from '../utils/normalize.js';
6
6
  import '../utils/storage.js';
7
- import './animations/animate-clip-path/animate-clip-path.style.scss.js';
8
- import './animations/animate-scale/animate-scale.style.scss.js';
9
- import './animations/animate-translate/animate-translate.style.scss.js';
7
+ import './animations/animate-clip-path/animate-clip-path.style.css.js';
8
+ import './animations/animate-scale/animate-scale.style.css.js';
9
+ import './animations/animate-translate/animate-translate.style.css.js';
10
10
  import './animations/animate-width.vue2.js';
11
11
  import './animations/animate-width.vue3.js';
12
12
  import './animations/change-height.vue2.js';
package/js/components/modals/base-modal.vue2.js CHANGED
@@ -15,9 +15,9 @@ import { AnimationProp } from '../../types/animation-prop.js';
15
15
  import { FOCUSABLE_SELECTORS } from '../../utils/focus.js';
16
16
  import { getTargetElement } from '../../utils/html.js';
17
17
  import '../../utils/storage.js';
18
- import '../animations/animate-clip-path/animate-clip-path.style.scss.js';
19
- import '../animations/animate-scale/animate-scale.style.scss.js';
20
- import '../animations/animate-translate/animate-translate.style.scss.js';
18
+ import '../animations/animate-clip-path/animate-clip-path.style.css.js';
19
+ import '../animations/animate-scale/animate-scale.style.css.js';
20
+ import '../animations/animate-translate/animate-translate.style.css.js';
21
21
  import '../animations/animate-width.vue2.js';
22
22
  import '../animations/animate-width.vue3.js';
23
23
  import '../animations/change-height.vue2.js';
package/js/components/panels/base-header-toggle-panel.vue2.js CHANGED
@@ -1,8 +1,8 @@
1
1
  import { defineComponent, ref } from 'vue';
2
2
  import { AnimationProp } from '../../types/animation-prop.js';
3
- import '../animations/animate-clip-path/animate-clip-path.style.scss.js';
4
- import '../animations/animate-scale/animate-scale.style.scss.js';
5
- import '../animations/animate-translate/animate-translate.style.scss.js';
3
+ import '../animations/animate-clip-path/animate-clip-path.style.css.js';
4
+ import '../animations/animate-scale/animate-scale.style.css.js';
5
+ import '../animations/animate-translate/animate-translate.style.css.js';
6
6
  import '../animations/animate-width.vue2.js';
7
7
  import '../animations/animate-width.vue3.js';
8
8
  import '../animations/change-height.vue2.js';
package/js/components/panels/base-id-toggle-panel.vue2.js CHANGED
@@ -12,9 +12,9 @@ import '../../plugins/x-bus.js';
12
12
  import '../../plugins/x-plugin.js';
13
13
  import '@vueuse/core';
14
14
  import { AnimationProp } from '../../types/animation-prop.js';
15
- import '../animations/animate-clip-path/animate-clip-path.style.scss.js';
16
- import '../animations/animate-scale/animate-scale.style.scss.js';
17
- import '../animations/animate-translate/animate-translate.style.scss.js';
15
+ import '../animations/animate-clip-path/animate-clip-path.style.css.js';
16
+ import '../animations/animate-scale/animate-scale.style.css.js';
17
+ import '../animations/animate-translate/animate-translate.style.css.js';
18
18
  import '../animations/animate-width.vue2.js';
19
19
  import '../animations/animate-width.vue3.js';
20
20
  import '../animations/change-height.vue2.js';
package/js/components/panels/base-tabs-panel.vue2.js CHANGED
@@ -1,8 +1,8 @@
1
1
  import { defineComponent, ref } from 'vue';
2
2
  import { AnimationProp } from '../../types/animation-prop.js';
3
- import '../animations/animate-clip-path/animate-clip-path.style.scss.js';
4
- import '../animations/animate-scale/animate-scale.style.scss.js';
5
- import '../animations/animate-translate/animate-translate.style.scss.js';
3
+ import '../animations/animate-clip-path/animate-clip-path.style.css.js';
4
+ import '../animations/animate-scale/animate-scale.style.css.js';
5
+ import '../animations/animate-translate/animate-translate.style.css.js';
6
6
  import '../animations/animate-width.vue2.js';
7
7
  import '../animations/animate-width.vue3.js';
8
8
  import '../animations/change-height.vue2.js';
package/js/components/result/base-result-image.vue2.js CHANGED
@@ -1,8 +1,8 @@
1
1
  import { defineComponent, ref, watch, computed } from 'vue';
2
2
  import { AnimationProp } from '../../types/animation-prop.js';
3
- import '../animations/animate-clip-path/animate-clip-path.style.scss.js';
4
- import '../animations/animate-scale/animate-scale.style.scss.js';
5
- import '../animations/animate-translate/animate-translate.style.scss.js';
3
+ import '../animations/animate-clip-path/animate-clip-path.style.css.js';
4
+ import '../animations/animate-scale/animate-scale.style.css.js';
5
+ import '../animations/animate-translate/animate-translate.style.css.js';
6
6
  import '../animations/animate-width.vue2.js';
7
7
  import '../animations/animate-width.vue3.js';
8
8
  import '../animations/change-height.vue2.js';
package/js/x-modules/ai/components/ai-overview.vue2.js CHANGED
@@ -1,8 +1,8 @@
1
1
  import { marked } from 'marked';
2
2
  import { defineComponent, ref, computed, watch, onMounted } from 'vue';
3
- import '../../../components/animations/animate-clip-path/animate-clip-path.style.scss.js';
4
- import '../../../components/animations/animate-scale/animate-scale.style.scss.js';
5
- import '../../../components/animations/animate-translate/animate-translate.style.scss.js';
3
+ import '../../../components/animations/animate-clip-path/animate-clip-path.style.css.js';
4
+ import '../../../components/animations/animate-scale/animate-scale.style.css.js';
5
+ import '../../../components/animations/animate-translate/animate-translate.style.css.js';
6
6
  import '../../../components/animations/animate-width.vue2.js';
7
7
  import '../../../components/animations/animate-width.vue3.js';
8
8
  import ChangeHeight from '../../../components/animations/change-height.vue.js';
package/js/x-modules/empathize/components/empathize.vue2.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { defineComponent, ref, computed, watch } from 'vue';
2
- import '../../../components/animations/animate-clip-path/animate-clip-path.style.scss.js';
3
- import '../../../components/animations/animate-scale/animate-scale.style.scss.js';
4
- import '../../../components/animations/animate-translate/animate-translate.style.scss.js';
2
+ import '../../../components/animations/animate-clip-path/animate-clip-path.style.css.js';
3
+ import '../../../components/animations/animate-scale/animate-scale.style.css.js';
4
+ import '../../../components/animations/animate-translate/animate-translate.style.css.js';
5
5
  import '../../../components/animations/animate-width.vue2.js';
6
6
  import '../../../components/animations/animate-width.vue3.js';
7
7
  import '../../../components/animations/change-height.vue2.js';
package/js/x-modules/queries-preview/components/query-preview-button.vue2.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { defineComponent, computed } from 'vue';
2
- import '../../../components/animations/animate-clip-path/animate-clip-path.style.scss.js';
3
- import '../../../components/animations/animate-scale/animate-scale.style.scss.js';
4
- import '../../../components/animations/animate-translate/animate-translate.style.scss.js';
2
+ import '../../../components/animations/animate-clip-path/animate-clip-path.style.css.js';
3
+ import '../../../components/animations/animate-scale/animate-scale.style.css.js';
4
+ import '../../../components/animations/animate-translate/animate-translate.style.css.js';
5
5
  import '../../../components/animations/animate-width.vue2.js';
6
6
  import '../../../components/animations/animate-width.vue3.js';
7
7
  import '../../../components/animations/change-height.vue2.js';
package/js/x-modules/queries-preview/components/query-preview-list.vue.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"query-preview-list.vue.js","sources":["../../../../../src/x-modules/queries-preview/components/query-preview-list.vue"],"sourcesContent":["<template>\n <component :is=\"animation\" class=\"x-query-preview-list\" tag=\"ul\">\n <li\n v-for=\"(queryPreview, index) in renderedQueryPreviews\"\n :key=\"index\"\n :class=\"{ 'padding-block-1': loadWhenVisible }\"\n data-test=\"query-preview-item\"\n >\n <QueryPreview\n :debounce-time-ms=\"debounceTimeMs\"\n :load-when-visible=\"loadWhenVisible\"\n :max-items-to-render=\"maxItemsToRender\"\n :persist-in-cache=\"persistInCache\"\n :query-feature=\"queryFeature\"\n :query-preview-info=\"queryPreview\"\n @load=\"flagAsLoaded\"\n @error=\"flagAsFailed\"\n >\n <template v-for=\"(_, slotName) in $slots\" #[slotName]=\"scope\">\n <slot :name=\"slotName\" v-bind=\"scope\" />\n </template>\n </QueryPreview>\n </li>\n </component>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport type { RequestStatus } from '../../../store'\nimport type { QueryFeature } from '../../../types'\nimport type { QueryPreviewInfo } from '../store/types'\nimport { computed, defineComponent, ref, watch } from 'vue'\nimport { useState } from '../../../composables/index'\nimport { AnimationProp } from '../../../types'\nimport { getHashFromQueryPreviewInfo } from '../utils/get-hash-from-query-preview'\nimport { queriesPreviewXModule } from '../x-module'\nimport QueryPreview from './query-preview.vue'\n\ninterface QueryPreviewStatusRecord {\n [query: string]: RequestStatus\n}\n\n/**\n * Renders the results previews of a list of objects with the information about the query preview,\n * and exposes the {@link QueryPreview} slots to modify the content.\n * The requests are made in sequential order.\n *\n * @public\n */\nexport default defineComponent({\n name: 'QueryPreviewList',\n xModule: queriesPreviewXModule.name,\n components: { QueryPreview },\n props: {\n /**\n * The list of queries preview to render.\n *\n * @public\n */\n queriesPreviewInfo: {\n type: Array as PropType<QueryPreviewInfo[]>,\n required: true,\n },\n /**\n * The origin property for the request on each query preview.\n *\n * @public\n */\n queryFeature: {\n type: String as PropType<QueryFeature>,\n },\n /**\n * Number of query preview results to be rendered on each query preview.\n *\n * @public\n */\n maxItemsToRender: {\n type: Number,\n },\n /**\n * Controls whether the query preview requests should be triggered when the component is visible in the viewport.\n *\n * @public\n */\n loadWhenVisible: {\n type: Boolean,\n default: false,\n },\n /**\n * Debounce time in milliseconds for triggering the search requests\n * on each query preview.\n *\n * It will default to 0 to fit the most common use case (pre-search),\n * and it would work properly with a 250 value inside empathize.\n */\n debounceTimeMs: {\n type: Number,\n default: 0,\n },\n /**\n * Controls whether all the QueryPreview should be removed from the state\n * when the component is destroyed.\n *\n * @public\n */\n persistInCache: Boolean,\n /**\n * Animation component that will be used to animate the elements.\n *\n * @public\n */\n animation: {\n type: AnimationProp,\n default: 'ul',\n },\n },\n setup(props) {\n const { params } = useState('queriesPreview')\n\n /**\n * Contains the status of the preview requests, indexed by query.\n */\n const queriesStatus = ref<QueryPreviewStatusRecord>({})\n\n /**\n * The list of queries to preview.\n *\n * @returns The list of queries in the queriesPreviewInfo list.\n * @internal\n */\n const queries = computed((): string[] =>\n props.queriesPreviewInfo.map(item =>\n getHashFromQueryPreviewInfo(item, { ...params.value, ...item.extraParams }),\n ),\n )\n\n /**\n * Gets all the queries to render, that are those that don't have an `error` status.\n *\n * @returns A list of queries.\n * @internal\n */\n const renderedQueryPreviews = computed((): QueryPreviewInfo[] => {\n return props.queriesPreviewInfo.filter(item => {\n const queryPreviewHash = getHashFromQueryPreviewInfo(item, {\n ...params.value,\n ...item.extraParams,\n })\n return (\n queriesStatus.value[queryPreviewHash] === 'success' ||\n queriesStatus.value[queryPreviewHash] === 'loading'\n )\n })\n })\n\n /**\n * Tries to load the next query.\n *\n * @internal\n */\n const loadNext = (): void => {\n const queryToLoad = queries.value.find(query => !(query in queriesStatus.value))\n if (queryToLoad) {\n queriesStatus.value[queryToLoad] = 'loading'\n }\n }\n\n /**\n * Resets the status of all queries if they change.\n *\n * @param newQueries - The new queries.\n * @param oldQueries - The old queries.\n * @internal\n */\n watch(\n queries,\n (newQueries: string[], oldQueries: string[] | undefined) => {\n if (newQueries.toString() !== oldQueries?.toString()) {\n for (const key of Object.keys(queriesStatus.value)) {\n if (!newQueries.includes(key)) {\n delete queriesStatus.value[key]\n }\n }\n loadNext()\n }\n },\n { immediate: true, deep: true },\n )\n\n /**\n * Sets the status of a given query to `success`.\n *\n * @param loadedQuery - The query to flag as loaded.\n * @internal\n */\n const flagAsLoaded = (loadedQuery: string): void => {\n queriesStatus.value[loadedQuery] = 'success'\n loadNext()\n }\n\n /**\n * Sets the status of a given query to `error`.\n *\n * @param failedQuery - The query to flag as failed.\n * @internal\n */\n const flagAsFailed = (failedQuery: string): void => {\n queriesStatus.value[failedQuery] = 'error'\n loadNext()\n }\n\n return {\n renderedQueryPreviews,\n flagAsFailed,\n flagAsLoaded,\n }\n },\n})\n</script>\n\n<style lang=\"scss\" scoped>\n.padding-block-1 {\n padding-block: 1px;\n}\n</style>\n\n<docs lang=\"mdx\">\n## See it in action\n\nHere you have a basic example of how the QueryPreviewList is rendered. Keep in mind that this\ncomponent is intended to be used overriding its default slot. By default it will only render the\nnames of the results.\n\n```vue live\n<template>\n <QueryPreviewList :queriesPreviewInfo=\"queriesPreviewInfo\" />\n</template>\n\n<script setup>\nimport { QueryPreviewList } from '@empathyco/x-components/queries-preview'\nimport { reactive } from 'vue'\nconst queriesPreviewInfo = reactive([\n { query: 'sandals' },\n { query: 'tshirt' },\n { query: 'jacket' },\n])\n</script>\n```\n\n### Play with the default slot\n\nIn this example, the results will be rendered inside a sliding panel.\n\n```vue live\n<template>\n <QueryPreviewList\n :queriesPreviewInfo=\"queriesPreviewInfo\"\n #default=\"{ queryPreviewInfo, totalResults, results }\"\n >\n <div class=\"x-flex x-flex-col x-gap-8 x-mb-16\">\n <h1 class=\"x-title2\">{{ queryPreviewInfo.query }} ({{ totalResults }})</h1>\n <SlidingPanel :resetOnContentChange=\"false\">\n <div class=\"x-flex x-gap-8\">\n <Result\n v-for=\"result in results\"\n :key=\"result.id\"\n :result=\"result\"\n style=\"max-width: 180px\"\n />\n </div>\n </SlidingPanel>\n </div>\n </QueryPreviewList>\n</template>\n\n<script setup>\nimport { QueryPreviewList } from '@empathyco/x-components/queries-preview'\nimport SlidingPanel from '@empathyco/x-components/sliding-panel.vue'\nimport Result from '@empathyco/x-components/result.vue'\nimport { reactive } from 'vue'\nconst queriesPreviewInfo = reactive([\n { query: 'sandals' },\n { query: 'tshirt' },\n { query: 'jacket' },\n])\n</script>\n```\n\n### Play with the result slot\n\nThe component exposes a slot to override the result content, without modifying the list.\n\nIn this example, the ID of the results will be rendered along with the name.\n\n```vue\n<template>\n <QueryPreviewList\n class=\"x-flex x-gap-8\"\n :queriesPreviewInfo=\"queriesPreviewInfo\"\n #result=\"{ result }\"\n >\n <span class=\"x-font-bold\">{{ result.id }}:</span>\n <span>{{ result.name }}</span>\n </QueryPreviewList>\n</template>\n\n<script setup>\nimport { QueryPreviewList } from '@empathyco/x-components/queries-preview'\nimport { reactive } from 'vue'\nconst queriesPreviewInfo = reactive([\n { query: 'sandals' },\n { query: 'tshirt' },\n { query: 'jacket' },\n])\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createBlock","_resolveDynamicComponent","_createElementBlock","_Fragment","_renderList","_normalizeClass","_createVNode","_createSlots","_withCtx","_renderSlot","_mergeProps"],"mappings":";;;;;;;AACE,EAAA,OAAAA,SAAA,EAAA,EAAAC,WAAA,CAsBYC,wBAtBI,IAAA,CAAA,SAAS,CAAA,EAAA;AAAA,IAAE,KAAA,EAAM,sBAAA;AAAA,IAAuB,GAAA,EAAI;AAAA,GAAA,EAAA;qBAExD,MAAsD;AAAA,OAAAF,SAAA,CAAA,IAAA,CAAA,EADxDG,kBAAA;AAAA,QAoBKC,QAAA;AAAA,QAAA,IAAA;AAAA,QAAAC,UAAA,CAnB6B,IAAA,CAAA,qBAAA,EAAqB,CAA7C,YAAA,EAAc,KAAA,KAAK;AAD7B,UAAA,OAAAL,SAAA,EAAA,EAAAG,kBAAA;AAAA,YAoBK,IAAA;AAAA,YAAA;AAAA,cAlBF,GAAA,EAAK,KAAA;AAAA,cACL,KAAA,EAAKG,oCAAuB,IAAA,CAAA,eAAA,EAAe,CAAA;AAAA,cAC5C,WAAA,EAAU;AAAA,aAAA;;cAEVC,WAAA,CAae,uBAAA,EAAA;AAAA,gBAZZ,kBAAA,EAAkB,IAAA,CAAA,cAAA;AAAA,gBAClB,mBAAA,EAAmB,IAAA,CAAA,eAAA;AAAA,gBACnB,qBAAA,EAAqB,IAAA,CAAA,gBAAA;AAAA,gBACrB,kBAAA,EAAkB,IAAA,CAAA,cAAA;AAAA,gBAClB,eAAA,EAAe,IAAA,CAAA,YAAA;AAAA,gBACf,oBAAA,EAAoB,YAAA;AAAA,gBACpB,MAAA,EAAM,IAAA,CAAA,YAAA;AAAA,gBACN,OAAA,EAAO,IAAA,CAAA;AAAA,eAAA,EAAAC,WAAA,CAAA;;;;2BAE0B,IAAA,CAAA,MAAA,EAAM,CAAtB,GAAG,QAAA,KAAQ;;AAAc,oBAAA,IAAA,EAAA,QAAA;AAAA,oBAAA,EAAA,EAAAC,OAAA,CACzC,CAAwC,KAAA,KADkB;AAAA,sBAC1DC,UAAA,CAAwC,IAAA,CAAA,MAAA,EAA3B,QAAA,EAAbC,UAAA,CAAwC,mBAAT,KAAK,CAAA,EAAA,MAAA,EAAA,IAAA;AAAA,qBAAA;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"query-preview-list.vue.js","sources":["../../../../../src/x-modules/queries-preview/components/query-preview-list.vue"],"sourcesContent":["<template>\n <component :is=\"animation\" class=\"x-query-preview-list\" tag=\"ul\">\n <li\n v-for=\"(queryPreview, index) in renderedQueryPreviews\"\n :key=\"index\"\n :class=\"{ 'padding-block-1': loadWhenVisible }\"\n data-test=\"query-preview-item\"\n >\n <QueryPreview\n :debounce-time-ms=\"debounceTimeMs\"\n :load-when-visible=\"loadWhenVisible\"\n :max-items-to-render=\"maxItemsToRender\"\n :persist-in-cache=\"persistInCache\"\n :query-feature=\"queryFeature\"\n :query-preview-info=\"queryPreview\"\n @load=\"flagAsLoaded\"\n @error=\"flagAsFailed\"\n >\n <template v-for=\"(_, slotName) in $slots\" #[slotName]=\"scope\">\n <slot :name=\"slotName\" v-bind=\"scope\" />\n </template>\n </QueryPreview>\n </li>\n </component>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport type { RequestStatus } from '../../../store'\nimport type { QueryFeature } from '../../../types'\nimport type { QueryPreviewInfo } from '../store/types'\nimport { computed, defineComponent, ref, watch } from 'vue'\nimport { useState } from '../../../composables/index'\nimport { AnimationProp } from '../../../types'\nimport { getHashFromQueryPreviewInfo } from '../utils/get-hash-from-query-preview'\nimport { queriesPreviewXModule } from '../x-module'\nimport QueryPreview from './query-preview.vue'\n\ninterface QueryPreviewStatusRecord {\n [query: string]: RequestStatus\n}\n\n/**\n * Renders the results previews of a list of objects with the information about the query preview,\n * and exposes the {@link QueryPreview} slots to modify the content.\n * The requests are made in sequential order.\n *\n * @public\n */\nexport default defineComponent({\n name: 'QueryPreviewList',\n xModule: queriesPreviewXModule.name,\n components: { QueryPreview },\n props: {\n /**\n * The list of queries preview to render.\n *\n * @public\n */\n queriesPreviewInfo: {\n type: Array as PropType<QueryPreviewInfo[]>,\n required: true,\n },\n /**\n * The origin property for the request on each query preview.\n *\n * @public\n */\n queryFeature: {\n type: String as PropType<QueryFeature>,\n },\n /**\n * Number of query preview results to be rendered on each query preview.\n *\n * @public\n */\n maxItemsToRender: {\n type: Number,\n },\n /**\n * Controls whether the query preview requests should be triggered when the component is visible in the viewport.\n *\n * @public\n */\n loadWhenVisible: {\n type: Boolean,\n default: false,\n },\n /**\n * Debounce time in milliseconds for triggering the search requests\n * on each query preview.\n *\n * It will default to 0 to fit the most common use case (pre-search),\n * and it would work properly with a 250 value inside empathize.\n */\n debounceTimeMs: {\n type: Number,\n default: 0,\n },\n /**\n * Controls whether all the QueryPreview should be removed from the state\n * when the component is destroyed.\n *\n * @public\n */\n persistInCache: Boolean,\n /**\n * Animation component that will be used to animate the elements.\n *\n * @public\n */\n animation: {\n type: AnimationProp,\n default: 'ul',\n },\n },\n setup(props) {\n const { params } = useState('queriesPreview')\n\n /**\n * Contains the status of the preview requests, indexed by query.\n */\n const queriesStatus = ref<QueryPreviewStatusRecord>({})\n\n /**\n * The list of queries to preview.\n *\n * @returns The list of queries in the queriesPreviewInfo list.\n * @internal\n */\n const queries = computed((): string[] =>\n props.queriesPreviewInfo.map(item =>\n getHashFromQueryPreviewInfo(item, { ...params.value, ...item.extraParams }),\n ),\n )\n\n /**\n * Gets all the queries to render, that are those that don't have an `error` status.\n *\n * @returns A list of queries.\n * @internal\n */\n const renderedQueryPreviews = computed((): QueryPreviewInfo[] => {\n return props.queriesPreviewInfo.filter(item => {\n const queryPreviewHash = getHashFromQueryPreviewInfo(item, {\n ...params.value,\n ...item.extraParams,\n })\n return (\n queriesStatus.value[queryPreviewHash] === 'success' ||\n queriesStatus.value[queryPreviewHash] === 'loading'\n )\n })\n })\n\n /**\n * Tries to load the next query.\n *\n * @internal\n */\n const loadNext = (): void => {\n const queryToLoad = queries.value.find(query => !(query in queriesStatus.value))\n if (queryToLoad) {\n queriesStatus.value[queryToLoad] = 'loading'\n }\n }\n\n /**\n * Resets the status of all queries if they change.\n *\n * @param newQueries - The new queries.\n * @param oldQueries - The old queries.\n * @internal\n */\n watch(\n queries,\n (newQueries: string[], oldQueries: string[] | undefined) => {\n if (newQueries.toString() !== oldQueries?.toString()) {\n for (const key of Object.keys(queriesStatus.value)) {\n if (!newQueries.includes(key)) {\n delete queriesStatus.value[key]\n }\n }\n loadNext()\n }\n },\n { immediate: true, deep: true },\n )\n\n /**\n * Sets the status of a given query to `success`.\n *\n * @param loadedQuery - The query to flag as loaded.\n * @internal\n */\n const flagAsLoaded = (loadedQuery: string): void => {\n queriesStatus.value[loadedQuery] = 'success'\n loadNext()\n }\n\n /**\n * Sets the status of a given query to `error`.\n *\n * @param failedQuery - The query to flag as failed.\n * @internal\n */\n const flagAsFailed = (failedQuery: string): void => {\n queriesStatus.value[failedQuery] = 'error'\n loadNext()\n }\n\n return {\n renderedQueryPreviews,\n flagAsFailed,\n flagAsLoaded,\n }\n },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.padding-block-1 {\n padding-block: 1px;\n}\n</style>\n\n<docs lang=\"mdx\">\n## See it in action\n\nHere you have a basic example of how the QueryPreviewList is rendered. Keep in mind that this\ncomponent is intended to be used overriding its default slot. By default it will only render the\nnames of the results.\n\n```vue live\n<template>\n <QueryPreviewList :queriesPreviewInfo=\"queriesPreviewInfo\" />\n</template>\n\n<script setup>\nimport { QueryPreviewList } from '@empathyco/x-components/queries-preview'\nimport { reactive } from 'vue'\nconst queriesPreviewInfo = reactive([\n { query: 'sandals' },\n { query: 'tshirt' },\n { query: 'jacket' },\n])\n</script>\n```\n\n### Play with the default slot\n\nIn this example, the results will be rendered inside a sliding panel.\n\n```vue live\n<template>\n <QueryPreviewList\n :queriesPreviewInfo=\"queriesPreviewInfo\"\n #default=\"{ queryPreviewInfo, totalResults, results }\"\n >\n <div class=\"x-flex x-flex-col x-gap-8 x-mb-16\">\n <h1 class=\"x-title2\">{{ queryPreviewInfo.query }} ({{ totalResults }})</h1>\n <SlidingPanel :resetOnContentChange=\"false\">\n <div class=\"x-flex x-gap-8\">\n <Result\n v-for=\"result in results\"\n :key=\"result.id\"\n :result=\"result\"\n style=\"max-width: 180px\"\n />\n </div>\n </SlidingPanel>\n </div>\n </QueryPreviewList>\n</template>\n\n<script setup>\nimport { QueryPreviewList } from '@empathyco/x-components/queries-preview'\nimport SlidingPanel from '@empathyco/x-components/sliding-panel.vue'\nimport Result from '@empathyco/x-components/result.vue'\nimport { reactive } from 'vue'\nconst queriesPreviewInfo = reactive([\n { query: 'sandals' },\n { query: 'tshirt' },\n { query: 'jacket' },\n])\n</script>\n```\n\n### Play with the result slot\n\nThe component exposes a slot to override the result content, without modifying the list.\n\nIn this example, the ID of the results will be rendered along with the name.\n\n```vue\n<template>\n <QueryPreviewList\n class=\"x-flex x-gap-8\"\n :queriesPreviewInfo=\"queriesPreviewInfo\"\n #result=\"{ result }\"\n >\n <span class=\"x-font-bold\">{{ result.id }}:</span>\n <span>{{ result.name }}</span>\n </QueryPreviewList>\n</template>\n\n<script setup>\nimport { QueryPreviewList } from '@empathyco/x-components/queries-preview'\nimport { reactive } from 'vue'\nconst queriesPreviewInfo = reactive([\n { query: 'sandals' },\n { query: 'tshirt' },\n { query: 'jacket' },\n])\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createBlock","_resolveDynamicComponent","_createElementBlock","_Fragment","_renderList","_normalizeClass","_createVNode","_createSlots","_withCtx","_renderSlot","_mergeProps"],"mappings":";;;;;;;AACE,EAAA,OAAAA,SAAA,EAAA,EAAAC,WAAA,CAsBYC,wBAtBI,IAAA,CAAA,SAAS,CAAA,EAAA;AAAA,IAAE,KAAA,EAAM,sBAAA;AAAA,IAAuB,GAAA,EAAI;AAAA,GAAA,EAAA;qBAExD,MAAsD;AAAA,OAAAF,SAAA,CAAA,IAAA,CAAA,EADxDG,kBAAA;AAAA,QAoBKC,QAAA;AAAA,QAAA,IAAA;AAAA,QAAAC,UAAA,CAnB6B,IAAA,CAAA,qBAAA,EAAqB,CAA7C,YAAA,EAAc,KAAA,KAAK;AAD7B,UAAA,OAAAL,SAAA,EAAA,EAAAG,kBAAA;AAAA,YAoBK,IAAA;AAAA,YAAA;AAAA,cAlBF,GAAA,EAAK,KAAA;AAAA,cACL,KAAA,EAAKG,oCAAuB,IAAA,CAAA,eAAA,EAAe,CAAA;AAAA,cAC5C,WAAA,EAAU;AAAA,aAAA;;cAEVC,WAAA,CAae,uBAAA,EAAA;AAAA,gBAZZ,kBAAA,EAAkB,IAAA,CAAA,cAAA;AAAA,gBAClB,mBAAA,EAAmB,IAAA,CAAA,eAAA;AAAA,gBACnB,qBAAA,EAAqB,IAAA,CAAA,gBAAA;AAAA,gBACrB,kBAAA,EAAkB,IAAA,CAAA,cAAA;AAAA,gBAClB,eAAA,EAAe,IAAA,CAAA,YAAA;AAAA,gBACf,oBAAA,EAAoB,YAAA;AAAA,gBACpB,MAAA,EAAM,IAAA,CAAA,YAAA;AAAA,gBACN,OAAA,EAAO,IAAA,CAAA;AAAA,eAAA,EAAAC,WAAA,CAAA;;;;2BAE0B,IAAA,CAAA,MAAA,EAAM,CAAtB,GAAG,QAAA,KAAQ;;AAAc,oBAAA,IAAA,EAAA,QAAA;AAAA,oBAAA,EAAA,EAAAC,OAAA,CACzC,CAAwC,KAAA,KADkB;AAAA,sBAC1DC,UAAA,CAAwC,IAAA,CAAA,MAAA,EAA3B,QAAA,EAAbC,UAAA,CAAwC,mBAAT,KAAK,CAAA,EAAA,MAAA,EAAA,IAAA;AAAA,qBAAA;;;;;;;;;;;;;;;;;;;;;"}
package/js/x-modules/queries-preview/components/query-preview-list.vue2.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"query-preview-list.vue2.js","sources":["../../../../../src/x-modules/queries-preview/components/query-preview-list.vue"],"sourcesContent":["<template>\n <component :is=\"animation\" class=\"x-query-preview-list\" tag=\"ul\">\n <li\n v-for=\"(queryPreview, index) in renderedQueryPreviews\"\n :key=\"index\"\n :class=\"{ 'padding-block-1': loadWhenVisible }\"\n data-test=\"query-preview-item\"\n >\n <QueryPreview\n :debounce-time-ms=\"debounceTimeMs\"\n :load-when-visible=\"loadWhenVisible\"\n :max-items-to-render=\"maxItemsToRender\"\n :persist-in-cache=\"persistInCache\"\n :query-feature=\"queryFeature\"\n :query-preview-info=\"queryPreview\"\n @load=\"flagAsLoaded\"\n @error=\"flagAsFailed\"\n >\n <template v-for=\"(_, slotName) in $slots\" #[slotName]=\"scope\">\n <slot :name=\"slotName\" v-bind=\"scope\" />\n </template>\n </QueryPreview>\n </li>\n </component>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport type { RequestStatus } from '../../../store'\nimport type { QueryFeature } from '../../../types'\nimport type { QueryPreviewInfo } from '../store/types'\nimport { computed, defineComponent, ref, watch } from 'vue'\nimport { useState } from '../../../composables/index'\nimport { AnimationProp } from '../../../types'\nimport { getHashFromQueryPreviewInfo } from '../utils/get-hash-from-query-preview'\nimport { queriesPreviewXModule } from '../x-module'\nimport QueryPreview from './query-preview.vue'\n\ninterface QueryPreviewStatusRecord {\n [query: string]: RequestStatus\n}\n\n/**\n * Renders the results previews of a list of objects with the information about the query preview,\n * and exposes the {@link QueryPreview} slots to modify the content.\n * The requests are made in sequential order.\n *\n * @public\n */\nexport default defineComponent({\n name: 'QueryPreviewList',\n xModule: queriesPreviewXModule.name,\n components: { QueryPreview },\n props: {\n /**\n * The list of queries preview to render.\n *\n * @public\n */\n queriesPreviewInfo: {\n type: Array as PropType<QueryPreviewInfo[]>,\n required: true,\n },\n /**\n * The origin property for the request on each query preview.\n *\n * @public\n */\n queryFeature: {\n type: String as PropType<QueryFeature>,\n },\n /**\n * Number of query preview results to be rendered on each query preview.\n *\n * @public\n */\n maxItemsToRender: {\n type: Number,\n },\n /**\n * Controls whether the query preview requests should be triggered when the component is visible in the viewport.\n *\n * @public\n */\n loadWhenVisible: {\n type: Boolean,\n default: false,\n },\n /**\n * Debounce time in milliseconds for triggering the search requests\n * on each query preview.\n *\n * It will default to 0 to fit the most common use case (pre-search),\n * and it would work properly with a 250 value inside empathize.\n */\n debounceTimeMs: {\n type: Number,\n default: 0,\n },\n /**\n * Controls whether all the QueryPreview should be removed from the state\n * when the component is destroyed.\n *\n * @public\n */\n persistInCache: Boolean,\n /**\n * Animation component that will be used to animate the elements.\n *\n * @public\n */\n animation: {\n type: AnimationProp,\n default: 'ul',\n },\n },\n setup(props) {\n const { params } = useState('queriesPreview')\n\n /**\n * Contains the status of the preview requests, indexed by query.\n */\n const queriesStatus = ref<QueryPreviewStatusRecord>({})\n\n /**\n * The list of queries to preview.\n *\n * @returns The list of queries in the queriesPreviewInfo list.\n * @internal\n */\n const queries = computed((): string[] =>\n props.queriesPreviewInfo.map(item =>\n getHashFromQueryPreviewInfo(item, { ...params.value, ...item.extraParams }),\n ),\n )\n\n /**\n * Gets all the queries to render, that are those that don't have an `error` status.\n *\n * @returns A list of queries.\n * @internal\n */\n const renderedQueryPreviews = computed((): QueryPreviewInfo[] => {\n return props.queriesPreviewInfo.filter(item => {\n const queryPreviewHash = getHashFromQueryPreviewInfo(item, {\n ...params.value,\n ...item.extraParams,\n })\n return (\n queriesStatus.value[queryPreviewHash] === 'success' ||\n queriesStatus.value[queryPreviewHash] === 'loading'\n )\n })\n })\n\n /**\n * Tries to load the next query.\n *\n * @internal\n */\n const loadNext = (): void => {\n const queryToLoad = queries.value.find(query => !(query in queriesStatus.value))\n if (queryToLoad) {\n queriesStatus.value[queryToLoad] = 'loading'\n }\n }\n\n /**\n * Resets the status of all queries if they change.\n *\n * @param newQueries - The new queries.\n * @param oldQueries - The old queries.\n * @internal\n */\n watch(\n queries,\n (newQueries: string[], oldQueries: string[] | undefined) => {\n if (newQueries.toString() !== oldQueries?.toString()) {\n for (const key of Object.keys(queriesStatus.value)) {\n if (!newQueries.includes(key)) {\n delete queriesStatus.value[key]\n }\n }\n loadNext()\n }\n },\n { immediate: true, deep: true },\n )\n\n /**\n * Sets the status of a given query to `success`.\n *\n * @param loadedQuery - The query to flag as loaded.\n * @internal\n */\n const flagAsLoaded = (loadedQuery: string): void => {\n queriesStatus.value[loadedQuery] = 'success'\n loadNext()\n }\n\n /**\n * Sets the status of a given query to `error`.\n *\n * @param failedQuery - The query to flag as failed.\n * @internal\n */\n const flagAsFailed = (failedQuery: string): void => {\n queriesStatus.value[failedQuery] = 'error'\n loadNext()\n }\n\n return {\n renderedQueryPreviews,\n flagAsFailed,\n flagAsLoaded,\n }\n },\n})\n</script>\n\n<style lang=\"scss\" scoped>\n.padding-block-1 {\n padding-block: 1px;\n}\n</style>\n\n<docs lang=\"mdx\">\n## See it in action\n\nHere you have a basic example of how the QueryPreviewList is rendered. Keep in mind that this\ncomponent is intended to be used overriding its default slot. By default it will only render the\nnames of the results.\n\n```vue live\n<template>\n <QueryPreviewList :queriesPreviewInfo=\"queriesPreviewInfo\" />\n</template>\n\n<script setup>\nimport { QueryPreviewList } from '@empathyco/x-components/queries-preview'\nimport { reactive } from 'vue'\nconst queriesPreviewInfo = reactive([\n { query: 'sandals' },\n { query: 'tshirt' },\n { query: 'jacket' },\n])\n</script>\n```\n\n### Play with the default slot\n\nIn this example, the results will be rendered inside a sliding panel.\n\n```vue live\n<template>\n <QueryPreviewList\n :queriesPreviewInfo=\"queriesPreviewInfo\"\n #default=\"{ queryPreviewInfo, totalResults, results }\"\n >\n <div class=\"x-flex x-flex-col x-gap-8 x-mb-16\">\n <h1 class=\"x-title2\">{{ queryPreviewInfo.query }} ({{ totalResults }})</h1>\n <SlidingPanel :resetOnContentChange=\"false\">\n <div class=\"x-flex x-gap-8\">\n <Result\n v-for=\"result in results\"\n :key=\"result.id\"\n :result=\"result\"\n style=\"max-width: 180px\"\n />\n </div>\n </SlidingPanel>\n </div>\n </QueryPreviewList>\n</template>\n\n<script setup>\nimport { QueryPreviewList } from '@empathyco/x-components/queries-preview'\nimport SlidingPanel from '@empathyco/x-components/sliding-panel.vue'\nimport Result from '@empathyco/x-components/result.vue'\nimport { reactive } from 'vue'\nconst queriesPreviewInfo = reactive([\n { query: 'sandals' },\n { query: 'tshirt' },\n { query: 'jacket' },\n])\n</script>\n```\n\n### Play with the result slot\n\nThe component exposes a slot to override the result content, without modifying the list.\n\nIn this example, the ID of the results will be rendered along with the name.\n\n```vue\n<template>\n <QueryPreviewList\n class=\"x-flex x-gap-8\"\n :queriesPreviewInfo=\"queriesPreviewInfo\"\n #result=\"{ result }\"\n >\n <span class=\"x-font-bold\">{{ result.id }}:</span>\n <span>{{ result.name }}</span>\n </QueryPreviewList>\n</template>\n\n<script setup>\nimport { QueryPreviewList } from '@empathyco/x-components/queries-preview'\nimport { reactive } from 'vue'\nconst queriesPreviewInfo = reactive([\n { query: 'sandals' },\n { query: 'tshirt' },\n { query: 'jacket' },\n])\n</script>\n```\n</docs>\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"query-preview-list.vue2.js","sources":["../../../../../src/x-modules/queries-preview/components/query-preview-list.vue"],"sourcesContent":["<template>\n <component :is=\"animation\" class=\"x-query-preview-list\" tag=\"ul\">\n <li\n v-for=\"(queryPreview, index) in renderedQueryPreviews\"\n :key=\"index\"\n :class=\"{ 'padding-block-1': loadWhenVisible }\"\n data-test=\"query-preview-item\"\n >\n <QueryPreview\n :debounce-time-ms=\"debounceTimeMs\"\n :load-when-visible=\"loadWhenVisible\"\n :max-items-to-render=\"maxItemsToRender\"\n :persist-in-cache=\"persistInCache\"\n :query-feature=\"queryFeature\"\n :query-preview-info=\"queryPreview\"\n @load=\"flagAsLoaded\"\n @error=\"flagAsFailed\"\n >\n <template v-for=\"(_, slotName) in $slots\" #[slotName]=\"scope\">\n <slot :name=\"slotName\" v-bind=\"scope\" />\n </template>\n </QueryPreview>\n </li>\n </component>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport type { RequestStatus } from '../../../store'\nimport type { QueryFeature } from '../../../types'\nimport type { QueryPreviewInfo } from '../store/types'\nimport { computed, defineComponent, ref, watch } from 'vue'\nimport { useState } from '../../../composables/index'\nimport { AnimationProp } from '../../../types'\nimport { getHashFromQueryPreviewInfo } from '../utils/get-hash-from-query-preview'\nimport { queriesPreviewXModule } from '../x-module'\nimport QueryPreview from './query-preview.vue'\n\ninterface QueryPreviewStatusRecord {\n [query: string]: RequestStatus\n}\n\n/**\n * Renders the results previews of a list of objects with the information about the query preview,\n * and exposes the {@link QueryPreview} slots to modify the content.\n * The requests are made in sequential order.\n *\n * @public\n */\nexport default defineComponent({\n name: 'QueryPreviewList',\n xModule: queriesPreviewXModule.name,\n components: { QueryPreview },\n props: {\n /**\n * The list of queries preview to render.\n *\n * @public\n */\n queriesPreviewInfo: {\n type: Array as PropType<QueryPreviewInfo[]>,\n required: true,\n },\n /**\n * The origin property for the request on each query preview.\n *\n * @public\n */\n queryFeature: {\n type: String as PropType<QueryFeature>,\n },\n /**\n * Number of query preview results to be rendered on each query preview.\n *\n * @public\n */\n maxItemsToRender: {\n type: Number,\n },\n /**\n * Controls whether the query preview requests should be triggered when the component is visible in the viewport.\n *\n * @public\n */\n loadWhenVisible: {\n type: Boolean,\n default: false,\n },\n /**\n * Debounce time in milliseconds for triggering the search requests\n * on each query preview.\n *\n * It will default to 0 to fit the most common use case (pre-search),\n * and it would work properly with a 250 value inside empathize.\n */\n debounceTimeMs: {\n type: Number,\n default: 0,\n },\n /**\n * Controls whether all the QueryPreview should be removed from the state\n * when the component is destroyed.\n *\n * @public\n */\n persistInCache: Boolean,\n /**\n * Animation component that will be used to animate the elements.\n *\n * @public\n */\n animation: {\n type: AnimationProp,\n default: 'ul',\n },\n },\n setup(props) {\n const { params } = useState('queriesPreview')\n\n /**\n * Contains the status of the preview requests, indexed by query.\n */\n const queriesStatus = ref<QueryPreviewStatusRecord>({})\n\n /**\n * The list of queries to preview.\n *\n * @returns The list of queries in the queriesPreviewInfo list.\n * @internal\n */\n const queries = computed((): string[] =>\n props.queriesPreviewInfo.map(item =>\n getHashFromQueryPreviewInfo(item, { ...params.value, ...item.extraParams }),\n ),\n )\n\n /**\n * Gets all the queries to render, that are those that don't have an `error` status.\n *\n * @returns A list of queries.\n * @internal\n */\n const renderedQueryPreviews = computed((): QueryPreviewInfo[] => {\n return props.queriesPreviewInfo.filter(item => {\n const queryPreviewHash = getHashFromQueryPreviewInfo(item, {\n ...params.value,\n ...item.extraParams,\n })\n return (\n queriesStatus.value[queryPreviewHash] === 'success' ||\n queriesStatus.value[queryPreviewHash] === 'loading'\n )\n })\n })\n\n /**\n * Tries to load the next query.\n *\n * @internal\n */\n const loadNext = (): void => {\n const queryToLoad = queries.value.find(query => !(query in queriesStatus.value))\n if (queryToLoad) {\n queriesStatus.value[queryToLoad] = 'loading'\n }\n }\n\n /**\n * Resets the status of all queries if they change.\n *\n * @param newQueries - The new queries.\n * @param oldQueries - The old queries.\n * @internal\n */\n watch(\n queries,\n (newQueries: string[], oldQueries: string[] | undefined) => {\n if (newQueries.toString() !== oldQueries?.toString()) {\n for (const key of Object.keys(queriesStatus.value)) {\n if (!newQueries.includes(key)) {\n delete queriesStatus.value[key]\n }\n }\n loadNext()\n }\n },\n { immediate: true, deep: true },\n )\n\n /**\n * Sets the status of a given query to `success`.\n *\n * @param loadedQuery - The query to flag as loaded.\n * @internal\n */\n const flagAsLoaded = (loadedQuery: string): void => {\n queriesStatus.value[loadedQuery] = 'success'\n loadNext()\n }\n\n /**\n * Sets the status of a given query to `error`.\n *\n * @param failedQuery - The query to flag as failed.\n * @internal\n */\n const flagAsFailed = (failedQuery: string): void => {\n queriesStatus.value[failedQuery] = 'error'\n loadNext()\n }\n\n return {\n renderedQueryPreviews,\n flagAsFailed,\n flagAsLoaded,\n }\n },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.padding-block-1 {\n padding-block: 1px;\n}\n</style>\n\n<docs lang=\"mdx\">\n## See it in action\n\nHere you have a basic example of how the QueryPreviewList is rendered. Keep in mind that this\ncomponent is intended to be used overriding its default slot. By default it will only render the\nnames of the results.\n\n```vue live\n<template>\n <QueryPreviewList :queriesPreviewInfo=\"queriesPreviewInfo\" />\n</template>\n\n<script setup>\nimport { QueryPreviewList } from '@empathyco/x-components/queries-preview'\nimport { reactive } from 'vue'\nconst queriesPreviewInfo = reactive([\n { query: 'sandals' },\n { query: 'tshirt' },\n { query: 'jacket' },\n])\n</script>\n```\n\n### Play with the default slot\n\nIn this example, the results will be rendered inside a sliding panel.\n\n```vue live\n<template>\n <QueryPreviewList\n :queriesPreviewInfo=\"queriesPreviewInfo\"\n #default=\"{ queryPreviewInfo, totalResults, results }\"\n >\n <div class=\"x-flex x-flex-col x-gap-8 x-mb-16\">\n <h1 class=\"x-title2\">{{ queryPreviewInfo.query }} ({{ totalResults }})</h1>\n <SlidingPanel :resetOnContentChange=\"false\">\n <div class=\"x-flex x-gap-8\">\n <Result\n v-for=\"result in results\"\n :key=\"result.id\"\n :result=\"result\"\n style=\"max-width: 180px\"\n />\n </div>\n </SlidingPanel>\n </div>\n </QueryPreviewList>\n</template>\n\n<script setup>\nimport { QueryPreviewList } from '@empathyco/x-components/queries-preview'\nimport SlidingPanel from '@empathyco/x-components/sliding-panel.vue'\nimport Result from '@empathyco/x-components/result.vue'\nimport { reactive } from 'vue'\nconst queriesPreviewInfo = reactive([\n { query: 'sandals' },\n { query: 'tshirt' },\n { query: 'jacket' },\n])\n</script>\n```\n\n### Play with the result slot\n\nThe component exposes a slot to override the result content, without modifying the list.\n\nIn this example, the ID of the results will be rendered along with the name.\n\n```vue\n<template>\n <QueryPreviewList\n class=\"x-flex x-gap-8\"\n :queriesPreviewInfo=\"queriesPreviewInfo\"\n #result=\"{ result }\"\n >\n <span class=\"x-font-bold\">{{ result.id }}:</span>\n <span>{{ result.name }}</span>\n </QueryPreviewList>\n</template>\n\n<script setup>\nimport { QueryPreviewList } from '@empathyco/x-components/queries-preview'\nimport { reactive } from 'vue'\nconst queriesPreviewInfo = reactive([\n { query: 'sandals' },\n { query: 'tshirt' },\n { query: 'jacket' },\n])\n</script>\n```\n</docs>\n"],"names":[],"mappings":"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"}
package/js/x-modules/queries-preview/components/query-preview.vue2.js CHANGED
@@ -1,8 +1,8 @@
1
1
  import { deepEqual } from '@empathyco/x-utils';
2
2
  import { defineComponent, ref, computed, provide, inject, watch, onBeforeUnmount, h } from 'vue';
3
- import '../../../components/animations/animate-clip-path/animate-clip-path.style.scss.js';
4
- import '../../../components/animations/animate-scale/animate-scale.style.scss.js';
5
- import '../../../components/animations/animate-translate/animate-translate.style.scss.js';
3
+ import '../../../components/animations/animate-clip-path/animate-clip-path.style.css.js';
4
+ import '../../../components/animations/animate-scale/animate-scale.style.css.js';
5
+ import '../../../components/animations/animate-translate/animate-translate.style.css.js';
6
6
  import '../../../components/animations/animate-width.vue2.js';
7
7
  import '../../../components/animations/animate-width.vue3.js';
8
8
  import '../../../components/animations/change-height.vue2.js';
package/js/x-modules/scroll/components/scroll-to-top.vue2.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { defineComponent, computed } from 'vue';
2
- import '../../../components/animations/animate-clip-path/animate-clip-path.style.scss.js';
3
- import '../../../components/animations/animate-scale/animate-scale.style.scss.js';
4
- import '../../../components/animations/animate-translate/animate-translate.style.scss.js';
2
+ import '../../../components/animations/animate-clip-path/animate-clip-path.style.css.js';
3
+ import '../../../components/animations/animate-scale/animate-scale.style.css.js';
4
+ import '../../../components/animations/animate-translate/animate-translate.style.css.js';
5
5
  import '../../../components/animations/animate-width.vue2.js';
6
6
  import '../../../components/animations/animate-width.vue3.js';
7
7
  import '../../../components/animations/change-height.vue2.js';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@empathyco/x-components",
3
- "version": "6.0.0-alpha.202",
3
+ "version": "6.0.0-alpha.203",
4
4
  "description": "Empathy X Components",
5
5
  "author": "Empathy Systems Corporation S.L.",
6
6
  "license": "Apache-2.0",
@@ -30,8 +30,6 @@
30
30
  ],
31
31
  "sideEffects": [
32
32
  "./tests/**/*",
33
- "**/*.scss",
34
- "**/*.scss.js",
35
33
  "**/*.css",
36
34
  "**/*vue[0-9].js",
37
35
  "**/*.vue"
@@ -99,7 +97,7 @@
99
97
  "@badeball/cypress-cucumber-preprocessor": "24.0.0",
100
98
  "@bahmutov/cypress-esbuild-preprocessor": "2.2.8",
101
99
  "@cucumber/messages": "32.0.1",
102
- "@empathyco/x-tailwindcss": "2.0.0-alpha.22",
100
+ "@empathyco/x-tailwindcss": "2.0.0-alpha.23",
103
101
  "@microsoft/api-documenter": "7.28.2",
104
102
  "@microsoft/api-extractor": "7.55.2",
105
103
  "@testing-library/jest-dom": "6.9.1",
@@ -115,7 +113,6 @@
115
113
  "esbuild": "0.27.2",
116
114
  "jest": "29.7.0",
117
115
  "jest-environment-jsdom": "29.7.0",
118
- "jest-scss-transform": "1.0.4",
119
116
  "postcss": "8.5.6",
120
117
  "postcss-dir-pseudo-class": "7.0.2",
121
118
  "postcss-logical": "4.0.2",
@@ -126,7 +123,6 @@
126
123
  "rollup-plugin-styles": "4.0.0",
127
124
  "rollup-plugin-typescript2": "0.36.0",
128
125
  "rollup-plugin-vue": "6.0.0",
129
- "sass": "1.97.3",
130
126
  "start-server-and-test": "2.1.3",
131
127
  "tailwindcss": "3.4.19",
132
128
  "ts-jest": "29.4.6",
@@ -143,5 +139,5 @@
143
139
  "access": "public",
144
140
  "directory": "dist"
145
141
  },
146
- "gitHead": "24227b2e9617df5be735f870d67b43d1854f031d"
142
+ "gitHead": "e1cfcd1633d2d404d9c5816064f9a5eb9541b758"
147
143
  }
package/types/components/animations/animate-clip-path/animate-clip-path.factory.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import './animate-clip-path.style.scss';
1
+ import './animate-clip-path.style.css';
2
2
  /**
3
3
  * Returns a transition component to wrap an element passed in the default slot and animating its
4
4
  * clip-path using inset and with the origin passed as parameter.
package/types/components/animations/animate-clip-path/animate-clip-path.factory.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"animate-clip-path.factory.d.ts","sourceRoot":"","sources":["../../../../../src/components/animations/animate-clip-path/animate-clip-path.factory.ts"],"names":[],"mappings":"AACA,OAAO,gCAAgC,CAAA;AAEvC;;;;;;;;;;GAUG;AACH,eAAO,MAAM,eAAe,wHAAyD,CAAA"}
1
+ {"version":3,"file":"animate-clip-path.factory.d.ts","sourceRoot":"","sources":["../../../../../src/components/animations/animate-clip-path/animate-clip-path.factory.ts"],"names":[],"mappings":"AACA,OAAO,+BAA+B,CAAA;AAEtC;;;;;;;;;;GAUG;AACH,eAAO,MAAM,eAAe,wHAAyD,CAAA"}
package/types/components/animations/animate-scale/animate-scale.factory.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import './animate-scale.style.scss';
1
+ import './animate-scale.style.css';
2
2
  /**
3
3
  * Returns a transition component to wrap an element passed in the default slot and animating its
4
4
  * scale using transform and with the transform origin passed as parameter.
package/types/components/animations/animate-scale/animate-scale.factory.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"animate-scale.factory.d.ts","sourceRoot":"","sources":["../../../../../src/components/animations/animate-scale/animate-scale.factory.ts"],"names":[],"mappings":"AACA,OAAO,4BAA4B,CAAA;AAEnC;;;;;;;;;;GAUG;AACH,eAAO,MAAM,YAAY,wHAAqD,CAAA"}
1
+ {"version":3,"file":"animate-scale.factory.d.ts","sourceRoot":"","sources":["../../../../../src/components/animations/animate-scale/animate-scale.factory.ts"],"names":[],"mappings":"AACA,OAAO,2BAA2B,CAAA;AAElC;;;;;;;;;;GAUG;AACH,eAAO,MAAM,YAAY,wHAAqD,CAAA"}
package/types/components/animations/animate-translate/animate-translate.factory.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import './animate-translate.style.scss';
1
+ import './animate-translate.style.css';
2
2
  /**
3
3
  * Returns a transition component to wrap an element passed in the default slot and animating its
4
4
  * translate using transform and with the transform origin passed as parameter.
package/types/components/animations/animate-translate/animate-translate.factory.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"animate-translate.factory.d.ts","sourceRoot":"","sources":["../../../../../src/components/animations/animate-translate/animate-translate.factory.ts"],"names":[],"mappings":"AACA,OAAO,gCAAgC,CAAA;AAEvC;;;;;;;;;;GAUG;AACH,eAAO,MAAM,gBAAgB,wHAAyD,CAAA"}
1
+ {"version":3,"file":"animate-translate.factory.d.ts","sourceRoot":"","sources":["../../../../../src/components/animations/animate-translate/animate-translate.factory.ts"],"names":[],"mappings":"AACA,OAAO,+BAA+B,CAAA;AAEtC;;;;;;;;;;GAUG;AACH,eAAO,MAAM,gBAAgB,wHAAyD,CAAA"}
package/js/components/animations/animate-clip-path/animate-clip-path.style.scss.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"animate-clip-path.style.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}
package/js/components/animations/animate-scale/animate-scale.style.scss.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"animate-scale.style.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}
package/js/components/animations/animate-translate/animate-translate.style.scss.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"animate-translate.style.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}