@empathyco/x-components
Version:
Empathy X Components
88 lines (85 loc) • 2.63 kB
JavaScript
import { defineComponent, computed, h } from 'vue';
import BaseCurrency from '../../currency/base-currency.vue.js';
/**
* Renders a label for a price filter, allowing to select different messages depending on the
* value of the filter.
*
* @public
*/
var _sfc_main = defineComponent({
components: { BaseCurrency },
props: {
/** The filter data for get min and max value. */
filter: {
type: Object,
required: true,
},
/** Configuration for show the label. */
format: {
type: String,
},
/**
* Message shown when the filter hasn't got the min value defined.
*
* @public
*/
lessThan: {
type: String,
required: true,
},
/**
* Message shown when the filter has both the min and max values defined.
*
* @public
*/
fromTo: {
type: String,
required: true,
},
/**
* Message shown when the filter hasn't got max value defined.
*
* @public
*/
from: {
type: String,
required: true,
},
},
setup(props) {
/**
* The active label, retrieved from the provided props.
* It depends on the min and max values of the filter.
*
* @returns The active label to be formatted with the min and max values of the filter.
*/
const label = computed(() => {
return props.filter.range.min === null
? props.lessThan
: props.filter.range.max === null
? props.from
: props.fromTo;
});
return () => {
const labelParts = label.value.split(/(\{min\}|\{max\})/);
const children = labelParts.map(partMessage => {
if (partMessage === '{min}') {
return h(BaseCurrency, {
value: props.filter.range.min,
format: props.format,
});
}
else if (partMessage === '{max}') {
return h(BaseCurrency, {
value: props.filter.range.max,
format: props.format,
});
}
return partMessage;
});
return h('span', { class: 'x-price-filter-label' }, children);
};
},
});
export { _sfc_main as default };
//# sourceMappingURL=base-price-filter-label.vue.js.map