@empathyco/x-components/js/x-modules/search-box/components/clear-search-input.vue2.js

Empathy X Components

import { defineComponent, ref, computed } from 'vue';
import BaseEventButton from '../../../components/base-event-button.vue.js';
import { useState } from '../../../composables/use-state.js';
import { searchBoxXModule } from '../x-module.js';

/**
 * This component renders a button to delete the current query.
 *
 * @remarks
 * A button that when pressed emits the {@link SearchBoxXEvents.UserPressedClearSearchBoxButton}
 * and {@link SearchBoxXEvents.UserClearedQuery} events, expressing the user intention to clear
 * the current query.
 * It also adds `x-clear-search-input--has-empty-query` as class when there is no query.
 *
 * @public
 */
var _sfc_main = defineComponent({
    name: 'ClearSearchInput',
    components: { BaseEventButton },
    xModule: searchBoxXModule.name,
    setup() {
        const { query } = useState('searchBox');
        /**
         * The events dictionary that are going to be emitted when the button is pressed.
         *
         * @internal
         */
        const clearSearchInputEvents = ref({
            UserPressedClearSearchBoxButton: undefined,
        });
        const isQueryEmpty = computed(() => query.value.length === 0);
        const dynamicClasses = computed(() => ({
            'x-clear-search-input--has-empty-query': isQueryEmpty.value,
        }));
        return {
            dynamicClasses,
            clearSearchInputEvents,
        };
    },
});

export { _sfc_main as default };
//# sourceMappingURL=clear-search-input.vue2.js.map