maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
133 lines (132 loc) • 6.92 kB
JavaScript
import { defineComponent, defineAsyncComponent, ref, watch, computed, createElementBlock, openBlock, createElementVNode, createVNode, unref, createCommentVNode, createBlock, renderSlot, createTextVNode, toDisplayString, mergeProps, withCtx, Fragment, renderList } from "vue";
import { MazMagnifyingGlass, MazNoSymbol } from "@maz-ui/icons";
import { useTranslations } from "@maz-ui/translations";
import { S, u as useStringMatching } from "../chunks/useStringMatching.DzSigyZ7.js";
import { useInstanceUniqId } from "../composables/useInstanceUniqId.js";
import MazCardSpotlight from "./MazCardSpotlight.js";
import MazCheckbox from "./MazCheckbox.js";
import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper.B--vMWp3.js";
import '../assets/MazChecklist.Bu8wERn6.css';const _hoisted_1 = { class: "m-checklist m-reset-css" }, _hoisted_2 = ["for"], _hoisted_3 = {
key: 0,
class: "title"
}, _hoisted_4 = {
key: 0,
class: "no-results"
}, _hoisted_5 = { class: "no-results-content" }, _hoisted_6 = { class: "no-results-text" }, _hoisted_7 = ["for"], _hoisted_8 = { class: "item-label" }, _sfc_main = /* @__PURE__ */ defineComponent({
__name: "MazChecklist",
props: {
modelValue: {},
query: {},
items: {},
title: {},
elevation: { type: Boolean, default: !1 },
search: { type: [Boolean, Object] },
searchOptions: {},
searchFunction: { type: Function },
color: { default: "primary" },
translations: {}
},
emits: ["update:query", "update:model-value"],
setup(__props, { emit: __emit }) {
const emits = __emit, id = useInstanceUniqId({
componentName: "MazChecklist"
}), MazInput = defineAsyncComponent(() => import("./MazInput.js")), internalQuery = ref(__props.query);
watch(
() => __props.query,
(value) => {
internalQuery.value = value;
}
);
const { t } = useTranslations(), messages = computed(() => ({
noResultsFound: __props.translations?.noResultsFound ?? t("checklist.noResultsFound"),
searchInput: {
placeholder: __props.translations?.searchInput?.placeholder ?? t("checklist.searchInput.placeholder")
}
})), filteredItems = computed(() => {
if (!internalQuery.value || !__props.search)
return __props.items;
const normalizedQuery = S(internalQuery.value, __props.searchOptions);
return __props.searchFunction ? __props.searchFunction(normalizedQuery, __props.items ?? []) : getFilteredOptionWithQuery(normalizedQuery);
});
function searchInValue(value, query) {
return query && value && S(value).includes(S(query));
}
function getFilteredOptionWithQuery(query) {
return __props.items?.filter(({ label, value }) => {
const threshold = __props.searchOptions?.threshold, normalizedQuery = S(query, __props.searchOptions), searchLabel = S(label, __props.searchOptions), searchValue = S(value, __props.searchOptions);
return searchInValue(searchLabel, normalizedQuery) || searchInValue(searchValue, normalizedQuery) || typeof searchLabel == "string" && useStringMatching(searchLabel, normalizedQuery, threshold).isMatching.value || typeof searchValue == "string" && useStringMatching(searchValue, normalizedQuery, threshold).isMatching.value;
});
}
function updateQuery(value) {
internalQuery.value = value, emits("update:query", value);
}
return (_ctx, _cache) => (openBlock(), createElementBlock("div", _hoisted_1, [
createElementVNode("label", {
for: _ctx.search ? `${unref(id)}-query` : void 0,
class: "search-label"
}, [
_ctx.$slots.title || _ctx.title ? (openBlock(), createElementBlock("span", _hoisted_3, [
renderSlot(_ctx.$slots, "title", {}, () => [
createTextVNode(toDisplayString(_ctx.title), 1)
], !0)
])) : createCommentVNode("", !0),
_ctx.search ? (openBlock(), createBlock(unref(MazInput), mergeProps({
key: 1,
id: `${unref(id)}-query`,
"model-value": internalQuery.value
}, typeof _ctx.search == "object" ? _ctx.search : {}, {
color: typeof _ctx.search == "object" && _ctx.search.color ? _ctx.search.color : _ctx.color,
"left-icon": typeof _ctx.search == "object" ? _ctx.search.leftIcon ?? unref(MazMagnifyingGlass) : void 0,
debounce: typeof _ctx.search == "object" ? _ctx.search.debounce ?? 300 : void 0,
name: typeof _ctx.search == "object" ? _ctx.search.name ?? "search" : void 0,
placeholder: typeof _ctx.search == "object" && _ctx.search.placeholder ? _ctx.search.placeholder : messages.value.searchInput.placeholder,
"onUpdate:modelValue": _cache[0] || (_cache[0] = (event) => updateQuery(event))
}), null, 16, ["id", "model-value", "color", "left-icon", "debounce", "name", "placeholder"])) : createCommentVNode("", !0)
], 8, _hoisted_2),
createVNode(MazCardSpotlight, {
color: _ctx.color,
elevation: _ctx.elevation,
padding: !1,
"content-class": "card-content"
}, {
default: withCtx(() => [
filteredItems.value?.length === 0 ? (openBlock(), createElementBlock("div", _hoisted_4, [
renderSlot(_ctx.$slots, "no-results", {}, () => [
createElementVNode("div", _hoisted_5, [
createVNode(unref(MazNoSymbol), { class: "no-results-icon" }),
createElementVNode("span", _hoisted_6, [
renderSlot(_ctx.$slots, "no-results-text", {}, () => [
createTextVNode(toDisplayString(messages.value.noResultsFound), 1)
], !0)
])
])
], !0)
])) : createCommentVNode("", !0),
(openBlock(!0), createElementBlock(Fragment, null, renderList(filteredItems.value, (item) => (openBlock(), createElementBlock("label", {
key: item.value,
for: `${unref(id)}-checklist-item-${item.value}`,
class: "m-checklist-item m-reset-css"
}, [
createVNode(MazCheckbox, {
id: `${unref(id)}-checklist-item-${item.value}`,
"model-value": _ctx.modelValue,
value: item.value,
color: _ctx.color,
"onUpdate:modelValue": _cache[1] || (_cache[1] = (event) => emits("update:model-value", event))
}, null, 8, ["id", "model-value", "value", "color"]),
renderSlot(_ctx.$slots, "item", {
selectedValues: _ctx.modelValue,
item
}, () => [
createElementVNode("span", _hoisted_8, toDisplayString(item.label), 1)
], !0)
], 8, _hoisted_7))), 128))
]),
_: 3
}, 8, ["color", "elevation"])
]));
}
}), MazChecklist = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-b457ca02"]]);
export {
MazChecklist as default
};