@empathyco/x-components
Version:
Empathy X Components
60 lines (57 loc) • 1.94 kB
JavaScript
import { defineComponent, ref, computed } from 'vue';
import { use$x } from '../../../composables/use-_x.js';
import { useState } from '../../../composables/use-state.js';
import { searchBoxXModule } from '../x-module.js';
/**
* This component renders a button to submit the query.
*
* @remarks
* If query is not empty, it emits {@link XEventsTypes.UserAcceptedAQuery} and
* {@link SearchBoxXEvents.UserPressedSearchButton} events with the query as payload.
* It also adds `x-search-button--has-empty-query` as class when there is no query.
*
* @public
*/
var _sfc_main = defineComponent({
name: 'SearchButton',
xModule: searchBoxXModule.name,
setup() {
const $x = use$x();
const buttonRef = ref(null);
const { query } = useState('searchBox');
const isQueryEmpty = computed(() => query.value.length === 0);
const dynamicClasses = computed(() => ({
'x-search-button--has-empty-query': isQueryEmpty.value,
}));
/**
* Generates the {@link WireMetadata} object omitting the moduleName.
*
* @returns The {@link WireMetadata} object omitting the moduleName.
* @internal
*/
function createEventMetadata() {
return {
target: buttonRef.value,
feature: 'search_box',
};
}
/**
* Emits events when the button is clicked.
*
* @public
*/
function emitEvents() {
if (!isQueryEmpty.value) {
$x.emit('UserAcceptedAQuery', query.value, createEventMetadata());
$x.emit('UserPressedSearchButton', query.value, createEventMetadata());
}
}
return {
dynamicClasses,
buttonRef,
emitEvents,
};
},
});
export { _sfc_main as default };
//# sourceMappingURL=search-button.vue2.js.map