@empathyco/x-components
Version:
Empathy X Components
226 lines (223 loc) • 11.4 kB
JavaScript
import { defineComponent, ref, computed, watch } from 'vue';
import '../../../components/animations/animate-clip-path/animate-clip-path.style.scss.js';
import '../../../components/animations/animate-scale/animate-scale.style.scss.js';
import '../../../components/animations/animate-translate/animate-translate.style.scss.js';
import '../../../components/animations/animate-width.vue2.js';
import '../../../components/animations/animate-width.vue3.js';
import '../../../components/animations/change-height.vue2.js';
import '../../../components/animations/collapse-height.vue2.js';
import '../../../components/animations/collapse-height.vue3.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 _sfc_main$1 from '../../../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 '../../../components/base-event-button.vue2.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 '../../../components/display-click-provider.vue.js';
import '../../../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 '../../../components/items-list.vue2.js';
import '../../../components/layouts/fixed-header-and-asides-layout.vue2.js';
import '../../../components/layouts/fixed-header-and-asides-layout.vue3.js';
import '../../../components/layouts/multi-column-max-width-layout.vue2.js';
import '../../../components/layouts/multi-column-max-width-layout.vue3.js';
import '../../../components/layouts/multi-column-max-width-layout.vue4.js';
import '../../../components/layouts/single-column-layout.vue2.js';
import '../../../components/layouts/single-column-layout.vue3.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 '../../../components/sliding-panel.vue2.js';
import '../../../components/sliding-panel.vue3.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 '@vue/devtools-api';
import '../../../plugins/devtools/timeline.devtools.js';
import 'rxjs/operators';
import 'rxjs';
import '../../../plugins/devtools/colors.utils.js';
import '../../../plugins/x-bus.js';
import '../../../plugins/x-plugin.js';
import { useDebounce } from '../../../composables/use-debounce.js';
import '@vueuse/core';
import { AnimationProp } from '../../../types/animation-prop.js';
import { getActiveElement } from '../../../utils/html.js';
import '../../../utils/storage.js';
import { empathizeXModule } from '../x-module.js';
/**
* Component containing the empathize. It has a required slot to define its content.
*
* @public
*/
var _sfc_main = defineComponent({
name: 'Empathize',
xModule: empathizeXModule.name,
props: {
/** Array of {@link XEvent} to open the empathize. */
eventsToOpenEmpathize: {
type: Array,
default: () => ['UserFocusedSearchBox', 'UserIsTypingAQuery', 'UserClickedSearchBox'],
},
/** Array of {@link XEvent} to close the empathize. */
eventsToCloseEmpathize: {
type: Array,
default: () => [
'UserClosedEmpathize',
'UserSelectedASuggestion',
'UserPressedEnterKey',
'UserBlurredSearchBox',
],
},
/** Animation component that will be used to animate the empathize. */
animation: {
type: AnimationProp,
default: () => _sfc_main$1,
},
/** Whether the empathize has content or not. As it is only known in the client, it is a prop. */
hasContent: {
type: Boolean,
default: true,
},
/** Fallback flag to trigger a search and close the empathize when has no-content. */
searchAndCloseOnNoContent: {
type: Boolean,
default: false,
},
/** Debounce time in milliseconds to search and close the empathize when has no-content. */
searchAndCloseDebounceInMs: {
type: Number,
default: 1000,
},
},
setup(props) {
const $x = use$x();
const empathizeRef = ref(null);
const isOpen = ref(false);
const isOpenAndHasContent = computed(() => isOpen.value && props.hasContent);
/** Emit 'EmpathizeOpened' or 'EmpathizeClosed' event when computed changes. */
watch(isOpenAndHasContent, () => {
const empathizeEvent = isOpenAndHasContent.value ? 'EmpathizeOpened' : 'EmpathizeClosed';
$x.emit(empathizeEvent, undefined, { target: empathizeRef.value });
});
/** Debounce function to change the state `isOpen` to the new value. */
const changeOpenDebounced = useDebounce((newOpen) => (isOpen.value = newOpen), 0);
/**
* Open empathize. This function will be executed on any event in
* {@link Empathize.eventsToOpenEmpathize} and on DOM event `focusin` on the Empathize root
* element.
*/
function open() {
changeOpenDebounced(true);
}
/**
* Close empathize. This function will be executed on any event in
* {@link Empathize.eventsToCloseEmpathize} and on DOM event `focusout` on the Empathize root
* element.
*/
function close() {
const activeElement = getActiveElement();
if (!empathizeRef.value?.contains(activeElement)) {
changeOpenDebounced(false);
}
}
/** Events subscriptions to open and close empathize. */
props.eventsToOpenEmpathize.forEach(event => $x.on(event, false).subscribe(open));
props.eventsToCloseEmpathize.forEach(event => $x.on(event, false).subscribe(close));
let unwatchSearchBoxQuery = () => { };
/** Debounced function to unwatch the search-box query and also search and close empathize. */
const searchAndCloseDebounced = useDebounce(async () => {
unwatchSearchBoxQuery();
await $x.emit('UserAcceptedAQuery', $x.query.searchBox);
close();
}, props.searchAndCloseDebounceInMs);
/**
* Watcher triggered when `hasContent` change and the `searchAndCloseOnNoContent` flag is active
* with the following casuistics:
* 1. Empathize has content: unwatch the search-box query and cancel debounced search&close.
* 2. Empathize has NO content: create a watcher for the search-box query. It is to debounce the
* search fallback when the user types in the search-box during debounced time.
*/
watch(() => props.hasContent, () => {
if (props.searchAndCloseOnNoContent) {
if (props.hasContent) {
unwatchSearchBoxQuery();
searchAndCloseDebounced.cancel();
}
else {
unwatchSearchBoxQuery = watch(() => $x.query.searchBox, searchAndCloseDebounced, {
immediate: true,
});
}
}
});
return { empathizeRef, isOpenAndHasContent, open, close };
},
});
export { _sfc_main as default };
//# sourceMappingURL=empathize.vue2.js.map