@empathyco/x-components
Version:
Empathy X Components
62 lines (59 loc) • 2.06 kB
JavaScript
import { defineComponent, computed } from 'vue';
import { useGetter } from '../../../composables/use-getter.js';
import { useState } from '../../../composables/use-state.js';
import { identifierResultsXModule } from '../x-module.js';
/**
* This component renders an identifier result value and highlights its matching part with the
* query from the state. Receives as prop the {@link @empathyco/x-types#Result} data.
*
* @public
*/
var _sfc_main = defineComponent({
name: 'IdentifierResult',
xModule: identifierResultsXModule.name,
props: {
/**
* (Required) The {@link @empathyco/x-types#Result} information.
*
* @public
*/
result: {
type: Object,
required: true,
},
},
setup(props) {
/**
* Query from the module state.
*
* @public
*/
const { query } = useState('identifierResults');
/**
* The RegExp with the current query from the state adding the separatorChars after each
* matching character.
*
* @public
*/
const identifierHighlightRegexp = useGetter('identifierResults').identifierHighlightRegexp;
/**
* Highlights the matching part of the identifier result with the query from the state.
*
* @returns String - The identifier result s query with the matching part inside a `<span>` tag.
* @public
*/
const highlightedQueryHTML = computed(() => {
const identifierValue = props.result.identifier?.value ?? '';
if (identifierValue && identifierHighlightRegexp.value) {
return identifierValue.replace(identifierHighlightRegexp.value, '<span class="x-identifier-result__matching-part">$1</span>');
}
return identifierValue;
});
return {
query,
highlightedQueryHTML,
};
},
});
export { _sfc_main as default };
//# sourceMappingURL=identifier-result.vue2.js.map