@aotearoan/neon
Version:
Neon is a lightweight design library of Vue 3 components with minimal dependencies.
124 lines (123 loc) • 4.21 kB
JavaScript
import { defineComponent as N, ref as m, computed as u } from "vue";
import v from "../button/NeonButton.vue.es.js";
import y from "../../presentation/dropdown/NeonDropdown.vue.es.js";
import C from "../field-group/NeonFieldGroup.vue.es.js";
import g from "../input/NeonInput.vue.es.js";
import V from "../../layout/stack/NeonStack.vue.es.js";
import { NeonNumberUtils as c } from "../../../utils/common/number/NeonNumberUtils.es.js";
import { NeonSize as w } from "../../../model/common/size/NeonSize.es.js";
import { NeonFunctionalColor as L } from "../../../model/common/color/NeonFunctionalColor.es.js";
const E = N({
name: "NeonSearchFilter",
components: {
NeonButton: v,
NeonDropdown: y,
NeonFieldGroup: C,
NeonInput: g,
NeonStack: V
},
props: {
/**
* The filter text
*/
modelValue: { type: String, required: !0 },
/**
* The count of results matching the current search string. NOTE: This is not the count for the search based on the
* model value but rather the count based on the current search string in the dropdown. This allows the component
* to display the matching count to the user BEFORE they trigger the CTA to update the search string & refresh the
* actual data.
*/
searchCount: { type: Number, required: !0 },
/**
* The button & dropdown label when nothing is selected.
*/
label: { type: String, default: "Search" },
/**
* The search input placeholder text.
*/
placeholder: { type: String, default: "Search" },
/**
* The color of the component.
*/
color: { type: String, default: () => L.HighContrast },
/**
* The size of the dropdown button.
*/
size: { type: String, default: () => w.Small },
/**
* The disabled state of the buttons.
*/
disabled: { type: Boolean, default: !1 },
/**
* Button title when items are selected.
*/
editTitle: { type: String, default: "Edit" },
/**
* Clear button title.
*/
clearTitle: { type: String, default: "Clear" },
/**
* The close CTA label.
*/
closeLabel: { type: String, default: "Close" },
/**
* The show 'n' items CTA label. This should adhere to the vue-i18n pluralization format
* e.g. 'Show {count} items | Show {count} item | Show {count} items'.
* There is one placeholder: {count} - the count of items matching this filter.
*/
showLabel: { type: String, default: "Show {count} items | Show {count} item | Show {count} items" }
},
emits: [
/**
* Emitted when the close CTA is clicked.
*/
"close",
/**
* Emits when the user changes the search field string. It is expected that the search count is refreshed based on
* the new search string when this is triggered. This count will be displayed in the 'Show {count} items' CTA which
* updates the model.
*
* @type {string} - The new search string.
*/
"onSearch",
/**
* Emits when the 'Show' CTA is triggered.
*
* @type {string} - The filter text.
*/
"update:modelValue"
],
setup(e, { emit: l }) {
const a = m(!1), t = m(e.modelValue), n = u(() => e.modelValue !== t.value), i = (o) => {
t.value = o, l("update:modelValue", t.value), r();
}, d = () => {
t.value = e.modelValue, a.value = !0;
}, r = () => {
t.value = e.modelValue, a.value = !1;
}, s = (o) => {
t.value = o, l("onSearch", t.value);
}, f = () => {
t.value !== "" && (t.value = "", l("update:modelValue", t.value));
}, S = u(() => e.modelValue !== "" ? e.modelValue : e.label), h = u(() => {
const p = e.showLabel.split("|").map((b) => b.trim())[e.searchCount > 1 ? 2 : e.searchCount];
return n.value ? p.replace("{count}", c.formatNumber(e.searchCount)) : e.closeLabel;
});
return {
open: a,
search: t,
computedLabel: S,
computedShowLabel: h,
isDirty: n,
onOpen: d,
onClose: r,
onSearchChange: s,
onSearchClear: f,
updateSearch: i,
formatNumber: c.formatNumber
};
}
});
export {
E as default
};
//# sourceMappingURL=NeonSearchFilter.es.js.map