@empathyco/x-components
Version:
Empathy X Components
193 lines (190 loc) • 9.04 kB
JavaScript
import { useResizeObserver } from '@vueuse/core';
import { defineComponent, ref, computed, watch, onMounted } from 'vue';
import '../../../components/animations/animate-clip-path.vue2.js';
import '../../../components/animations/animate-scale.vue2.js';
import '../../../components/animations/animate-translate.vue2.js';
import '../../../components/animations/animate-width.vue2.js';
import '../../../components/animations/animate-width.vue3.js';
import ChangeHeight from '../../../components/animations/change-height.vue.js';
import CollapseHeight from '../../../components/animations/collapse-height.vue.js';
import '../../../components/animations/collapse-width.vue2.js';
import '../../../components/animations/collapse-width.vue3.js';
import '../../../components/animations/cross-fade.vue2.js';
import '../../../components/animations/cross-fade.vue3.js';
import '../../../components/animations/fade-and-slide.vue2.js';
import '../../../components/animations/fade-and-slide.vue3.js';
import '../../../components/animations/fade.vue2.js';
import '../../../components/animations/fade.vue3.js';
import '../../../components/animations/no-animation.vue.js';
import '../../../components/animations/staggered-fade-and-slide.vue2.js';
import '../../../components/animations/staggered-fade-and-slide.vue3.js';
import '../../../components/auto-progress-bar.vue2.js';
import '../../../components/auto-progress-bar.vue3.js';
import '../../../components/base-dropdown.vue2.js';
import '../../../components/base-dropdown.vue3.js';
import BaseEventButton from '../../../components/base-event-button.vue.js';
import '../../../components/base-grid.vue2.js';
import '../../../components/base-grid.vue3.js';
import '../../../components/base-keyboard-navigation.vue2.js';
import '../../../components/base-rating.vue2.js';
import '../../../components/base-rating.vue3.js';
import '../../../components/base-slider.vue2.js';
import '../../../components/base-slider.vue3.js';
import '../../../components/base-switch.vue2.js';
import '../../../components/base-switch.vue3.js';
import '../../../components/base-teleport.vue2.js';
import '../../../components/base-variable-column-grid.vue2.js';
import '../../../components/column-picker/base-column-picker-dropdown.vue2.js';
import '../../../components/column-picker/base-column-picker-list.vue2.js';
import '../../../components/currency/base-currency.vue2.js';
import _sfc_main$2 from '../../../components/display-click-provider.vue.js';
import _sfc_main$1 from '../../../components/display-emitter.vue.js';
import '../../../components/filters/labels/base-price-filter-label.vue.js';
import '../../../components/filters/labels/base-rating-filter-label.vue2.js';
import '../../../components/global-x-bus.vue.js';
import '../../../components/highlight.vue2.js';
import AIStarIcon from '../../../components/icons/ai-star.vue.js';
import ArrowRightIcon from '../../../components/icons/arrow-right.vue.js';
import ChevronDownIcon from '../../../components/icons/chevron-down.vue.js';
import '../../../components/items-list.vue2.js';
import '../../../components/location-provider.vue.js';
import '../../../components/modals/base-events-modal-close.vue2.js';
import '../../../components/modals/base-events-modal-open.vue2.js';
import '../../../components/modals/base-events-modal.vue2.js';
import '../../../components/modals/base-id-modal-close.vue2.js';
import '../../../components/modals/base-id-modal-open.vue2.js';
import '../../../components/modals/base-id-modal.vue2.js';
import '../../../components/modals/base-modal.vue2.js';
import '../../../components/modals/base-modal.vue3.js';
import '../../../components/modals/close-main-modal.vue2.js';
import '../../../components/modals/main-modal.vue2.js';
import '../../../components/modals/open-main-modal.vue2.js';
import '../../../components/page-loader-button.vue2.js';
import '../../../components/page-loader-button.vue3.js';
import '../../../components/page-selector.vue2.js';
import '../../../components/page-selector.vue3.js';
import '../../../components/panels/base-header-toggle-panel.vue2.js';
import '../../../components/panels/base-header-toggle-panel.vue3.js';
import '../../../components/panels/base-id-toggle-panel-button.vue2.js';
import '../../../components/panels/base-id-toggle-panel.vue2.js';
import '../../../components/panels/base-tabs-panel.vue2.js';
import '../../../components/panels/base-tabs-panel.vue3.js';
import '../../../components/panels/base-toggle-panel.vue2.js';
import '../../../components/result/base-result-add-to-cart.vue2.js';
import '../../../components/result/base-result-current-price.vue2.js';
import '../../../components/result/base-result-image.vue2.js';
import '../../../components/result/base-result-image.vue3.js';
import '../../../components/result/base-result-link.vue2.js';
import '../../../components/result/base-result-link.vue3.js';
import '../../../components/result/base-result-previous-price.vue2.js';
import '../../../components/result/base-result-rating.vue2.js';
import '../../../components/result/base-result-rating.vue3.js';
import '../../../components/result/result-variant-selector.vue2.js';
import '../../../components/result/result-variant-selector.vue3.js';
import '../../../components/result/result-variants-provider.vue.js';
import '../../../components/scroll/base-scroll.vue2.js';
import '@empathyco/x-utils';
import { use$x } from '../../../composables/use-_x.js';
import SlidingPanel from '../../../components/sliding-panel.vue.js';
import '../../../components/snippet-callbacks.vue2.js';
import '../../../components/suggestions/base-suggestion.vue2.js';
import '../../../components/suggestions/base-suggestions.vue2.js';
import '../../../components/suggestions/base-suggestions.vue3.js';
import '../../../composables/create-use-device.js';
import 'vuex';
import '../../../plugins/x-bus.js';
import '../../../plugins/x-plugin.js';
import 'rxjs';
import { useState } from '../../../composables/use-state.js';
import { aiXModule } from '../x-module.js';
import AiGroupedCarousel from './ai-grouped-carousel.vue.js';
var _sfc_main = defineComponent({
xModule: aiXModule.name,
components: {
AIStarIcon,
AiGroupedCarousel,
ArrowRightIcon,
BaseEventButton,
ChangeHeight,
ChevronDownIcon,
CollapseHeight,
DisplayClickProvider: _sfc_main$2,
DisplayEmitter: _sfc_main$1,
SlidingPanel,
},
props: {
/* The title text displayed */
title: String,
/* The classes added to the sliding panel. */
slidingPanelClasses: String,
/* The classes added to the sliding panel container. */
slidingPanelContainerClasses: String,
/* The classes added to the sliding panel buttons. */
slidingPanelButtonsClasses: String,
/* Controls whether the carousel should group results or display N carousels per N queries. */
group: {
type: Boolean,
default: true,
},
},
setup(props) {
const $x = use$x();
const { query, suggestionsSearch, queries, tagging } = useState('ai');
const emptyTaggingRequest = { url: '', params: {} };
const titleRef = ref(null);
const titleExpanded = ref(false);
const isTitleOverflowing = ref(false);
/**
* Checks if the title is overflowing and updates the state.
*/
function updateTitleOverflow() {
if (titleExpanded.value) {
return;
}
if (titleRef.value) {
isTitleOverflowing.value = titleRef.value.scrollWidth > titleRef.value.clientWidth;
}
}
/**
* Toggles the title expanded state if it is overflowing.
*/
function toggleTitleExpansion() {
if (isTitleOverflowing.value) {
titleExpanded.value = !titleExpanded.value;
}
}
const title = computed(() => {
if (!props.title) {
const queriesList = new Intl.ListFormat('en', {
style: 'long',
type: 'conjunction',
}).format(queries.value.map(({ query }) => query));
return `Searching for ${queriesList}`;
}
return props.title;
});
watch(queries, () => {
if (queries.value.length > 0) {
$x.emit('AiSuggestionsSearchRequestUpdated');
}
});
onMounted(() => {
$x.emit('AiComponentMounted', undefined, { feature: 'ai_carousel' });
});
useResizeObserver(titleRef, updateTitleOverflow);
return {
emptyTaggingRequest,
isTitleOverflowing,
queries,
query,
suggestionsSearch,
tagging,
title,
titleExpanded,
titleRef,
toggleTitleExpansion,
};
},
});
export { _sfc_main as default };
//# sourceMappingURL=ai-carousel.vue2.js.map