maz-ui 4.0.0-alpha.5 → 4.0.0-beta.0

package/dist/components/MazCard.js

@@ -0,0 +1,181 @@
+import { defineComponent, mergeModels, defineAsyncComponent, useSlots, useModel, computed, createElementBlock, openBlock, normalizeClass, createBlock, createCommentVNode, resolveDynamicComponent, withModifiers, withCtx, renderSlot, createTextVNode, toDisplayString, unref, createVNode, mergeProps, createElementVNode } from "vue";
+import { MazChevronDown } from "@maz-ui/icons";
+import { RouterLink } from "vue-router";
+import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper.B--vMWp3.js";
+import '../assets/MazCard.C6nDaeIC.css';const _hoisted_1 = {
+  key: 0,
+  class: "m-card__gallery__wrapper"
+}, _hoisted_2 = { class: "maz-min-w-0 maz-flex-1" }, _hoisted_3 = {
+  key: 0,
+  class: "m-card__title"
+}, _hoisted_4 = {
+  key: 1,
+  class: "m-card__subtitle"
+}, _hoisted_5 = {
+  key: 2,
+  class: "m-card__content"
+}, _hoisted_6 = {
+  key: 2,
+  class: "m-card__actions maz-flex maz-p-2"
+}, _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "MazCard",
+  props: /* @__PURE__ */ mergeModels({
+    orientation: { default: "column" },
+    href: { default: () => {
+    } },
+    to: { default: () => {
+    } },
+    hrefTarget: { default: "_self" },
+    footerAlign: { default: "right" },
+    gallery: { default: () => {
+    } },
+    scale: { type: Boolean, default: !0 },
+    elevation: { type: Boolean, default: !1 },
+    radius: { type: Boolean, default: !0 },
+    bordered: { type: Boolean, default: !0 },
+    wrapperClass: { default: () => {
+    } },
+    padding: { type: Boolean, default: !0 },
+    overflowHidden: { type: Boolean },
+    collapsible: { type: Boolean, default: !1 },
+    collapseOpen: { type: Boolean, default: !1 },
+    title: { default: () => {
+    } },
+    block: { type: Boolean }
+  }, {
+    collapseOpen: { type: Boolean, default: !1 },
+    collapseOpenModifiers: {}
+  }),
+  emits: /* @__PURE__ */ mergeModels(["update:collapseOpen"], ["update:collapseOpen"]),
+  setup(__props) {
+    const DEFAULT_GALLERY_OPTIONS = {
+      displayedCount: 3,
+      remaining: !1,
+      zoom: !__props.href && !__props.to,
+      width: 200,
+      height: 150
+    }, MazBtn = defineAsyncComponent(() => import("./MazBtn.js")), MazGallery = defineAsyncComponent(() => import("./MazGallery.js")), MazExpandAnimation = defineAsyncComponent(() => import("./MazExpandAnimation.js")), slots = useSlots(), collapseOpenModel = useModel(__props, "collapseOpen");
+    collapseOpenModel.value = __props.collapsible ? __props.collapseOpen : !0;
+    const isColumnVariant = computed(() => ["column", "column-reverse"].includes(__props.orientation)), haveSomeContent = computed(() => {
+      const supportedSlots = /* @__PURE__ */ new Set(["default", "content-title", "content-subtitle", "content-body"]);
+      return Object.keys(slots).some((val) => supportedSlots.has(val));
+    }), galleryHeightComputed = computed(() => haveSomeContent.value ? __props.gallery?.height ?? DEFAULT_GALLERY_OPTIONS.height : "100%"), galleryWidthComputed = computed(() => haveSomeContent.value ? __props.gallery?.width ?? DEFAULT_GALLERY_OPTIONS.width : "100%"), galleryOptions = computed(() => ({
+      ...DEFAULT_GALLERY_OPTIONS,
+      radius: __props.radius,
+      width: isColumnVariant.value ? !1 : galleryWidthComputed.value,
+      height: !isColumnVariant.value && haveSomeContent.value ? !1 : galleryHeightComputed.value,
+      ...__props.gallery
+    })), wrapperData = computed(() => {
+      let componentType = "div";
+      return __props.href ? componentType = "a" : __props.to && (componentType = RouterLink), {
+        is: componentType,
+        ...__props.href && { href: __props.href },
+        ...__props.to && { to: __props.to },
+        target: __props.hrefTarget
+      };
+    }), footerAlignClass = computed(
+      () => __props.footerAlign === "right" ? "maz-text-end" : "maz-text-start"
+    ), isLinked = computed(() => __props.href || __props.to);
+    function toggleCollapse() {
+      __props.collapsible && (collapseOpenModel.value = !collapseOpenModel.value);
+    }
+    return (_ctx, _cache) => (openBlock(), createElementBlock("div", {
+      class: normalizeClass(["m-card m-reset-css", [
+        {
+          "m-card--linked": isLinked.value,
+          "m-card--no-scale": !_ctx.scale,
+          "maz-shadow-elevation maz-drop-shadow-md": _ctx.elevation,
+          "--block": _ctx.block,
+          "maz-overflow-hidden": _ctx.overflowHidden || !collapseOpenModel.value,
+          "maz-rounded": _ctx.radius,
+          "maz-border maz-border-solid maz-border-divider": _ctx.bordered
+        }
+      ]])
+    }, [
+      _ctx.$slots.title || _ctx.title || _ctx.collapsible ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.collapsible ? "button" : "div"), {
+        key: 0,
+        class: normalizeClass(["m-card__header maz-border-b maz-border-solid", [
+          collapseOpenModel.value ? "maz-rounded-t maz-border-divider" : "maz-border-transparent",
+          { "--is-collapsible": _ctx.collapsible },
+          { "maz-justify-end": (!_ctx.$slots.title || !_ctx.title) && _ctx.collapsible },
+          { "maz-justify-between": _ctx.$slots.title || _ctx.title }
+        ]]),
+        tabindex: "-1",
+        onClick: _cache[0] || (_cache[0] = withModifiers(($event) => _ctx.collapsible ? toggleCollapse() : void 0, ["stop"]))
+      }, {
+        default: withCtx(() => [
+          _ctx.$slots.title || _ctx.title ? renderSlot(_ctx.$slots, "title", { key: 0 }, () => [
+            createTextVNode(toDisplayString(_ctx.title), 1)
+          ], !0) : createCommentVNode("", !0),
+          _ctx.collapsible ? (openBlock(), createBlock(unref(MazBtn), {
+            key: 1,
+            color: "transparent",
+            class: "maz-ml-2 maz-text-sm",
+            size: "xs",
+            onClick: withModifiers(toggleCollapse, ["stop"])
+          }, {
+            default: withCtx(() => [
+              createVNode(unref(MazChevronDown), {
+                class: normalizeClass([{ "--is-open": collapseOpenModel.value }, "m-card__collapse-icon maz-text-xl"])
+              }, null, 8, ["class"])
+            ]),
+            _: 1
+          })) : createCommentVNode("", !0)
+        ]),
+        _: 3
+      }, 8, ["class"])) : createCommentVNode("", !0),
+      (openBlock(), createBlock(resolveDynamicComponent(wrapperData.value.is), mergeProps(wrapperData.value, {
+        class: ["m-card__wrapper", [`m-card__wrapper--${_ctx.orientation}`, { "m-card__link": isLinked.value }]]
+      }), {
+        default: withCtx(() => [
+          galleryOptions.value.images ? (openBlock(), createElementBlock("div", _hoisted_1, [
+            createVNode(unref(MazGallery), mergeProps(galleryOptions.value, { class: "m-card__gallery maz-flex-1" }), null, 16)
+          ])) : createCommentVNode("", !0),
+          createElementVNode("div", _hoisted_2, [
+            (openBlock(), createBlock(resolveDynamicComponent(_ctx.collapsible ? unref(MazExpandAnimation) : "div"), {
+              modelValue: collapseOpenModel.value,
+              "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => collapseOpenModel.value = $event),
+              class: "maz-h-full"
+            }, {
+              default: withCtx(() => [
+                createElementVNode("div", {
+                  class: normalizeClass([[_ctx.wrapperClass, { "maz-p-4": _ctx.padding }], "m-card__content__wrapper"])
+                }, [
+                  _ctx.$slots["content-title"] ? (openBlock(), createElementBlock("div", _hoisted_3, [
+                    renderSlot(_ctx.$slots, "content-title", { collapseOpen: collapseOpenModel.value }, void 0, !0)
+                  ])) : createCommentVNode("", !0),
+                  _ctx.$slots["content-subtitle"] ? (openBlock(), createElementBlock("div", _hoisted_4, [
+                    renderSlot(_ctx.$slots, "content-subtitle", {}, void 0, !0)
+                  ])) : createCommentVNode("", !0),
+                  _ctx.$slots["content-body"] ? (openBlock(), createElementBlock("div", _hoisted_5, [
+                    renderSlot(_ctx.$slots, "content-body", {}, void 0, !0)
+                  ])) : createCommentVNode("", !0),
+                  renderSlot(_ctx.$slots, "default", { collapseOpen: collapseOpenModel.value }, void 0, !0)
+                ], 2)
+              ]),
+              _: 3
+            }, 8, ["modelValue"]))
+          ])
+        ]),
+        _: 3
+      }, 16, ["class"])),
+      _ctx.$slots.footer ? (openBlock(), createElementBlock("div", {
+        key: 1,
+        class: normalizeClass(["m-card__footer maz-overflow-x-auto maz-p-3", [
+          {
+            "maz-border-t maz-border-divider": isColumnVariant.value && haveSomeContent.value
+          },
+          footerAlignClass.value
+        ]])
+      }, [
+        renderSlot(_ctx.$slots, "footer", {}, void 0, !0)
+      ], 2)) : createCommentVNode("", !0),
+      _ctx.$slots.actions && galleryOptions.value.images ? (openBlock(), createElementBlock("div", _hoisted_6, [
+        renderSlot(_ctx.$slots, "actions", {}, void 0, !0)
+      ])) : createCommentVNode("", !0)
+    ], 2));
+  }
+}), MazCard = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-d1f9104d"]]);
+export {
+  MazCard as default
+};

package/dist/components/MazCardSpotlight.js

@@ -0,0 +1,69 @@
+import { defineComponent, ref, computed, onMounted, onUnmounted, createElementBlock, openBlock, normalizeStyle, normalizeClass, createElementVNode, withDirectives, renderSlot, vShow } from "vue";
+import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper.B--vMWp3.js";
+import '../assets/MazCardSpotlight.Dy-wuLQq.css';const _hoisted_1 = { class: "inner" }, _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "MazCardSpotlight",
+  props: {
+    color: { default: "primary" },
+    elevation: { type: Boolean, default: !1 },
+    padding: { type: Boolean, default: !0 },
+    contentClass: { default: () => {
+    } },
+    contentStyle: { type: [Boolean, null, String, Object, Array], default: () => {
+    } },
+    innerOpacity: { default: 0.95 }
+  },
+  setup(__props) {
+    const blobElement = ref(), fakeblobElement = ref(), blobVisible = ref(!1);
+    function animateBlob({ clientX, clientY }) {
+      blobVisible.value = !0;
+      const rec = fakeblobElement.value?.getBoundingClientRect();
+      rec && blobElement.value?.animate?.(
+        [
+          {
+            transform: `translate(${clientX - rec.left - rec.width / 2}px,${clientY - rec.top - rec.height / 2}px)`
+          }
+        ],
+        {
+          duration: 300,
+          fill: "forwards"
+        }
+      );
+    }
+    const alphaColor = computed(() => `hsl(var(--maz-${__props.color}) / 60%)`), alphaColor20 = computed(() => `hsl(var(--maz-${__props.color}) / 20%)`);
+    return onMounted(() => {
+      window.addEventListener("mousemove", animateBlob);
+    }), onUnmounted(() => {
+      window.removeEventListener("mousemove", animateBlob);
+    }), (_ctx, _cache) => (openBlock(), createElementBlock("div", {
+      class: normalizeClass(["m-card-spotlight m-reset-css", { "maz-shadow-elevation maz-drop-shadow-md": _ctx.elevation }]),
+      style: normalizeStyle({ backgroundColor: alphaColor20.value, "--inner-opacity": _ctx.innerOpacity })
+    }, [
+      createElementVNode("div", _hoisted_1, [
+        createElementVNode("div", {
+          class: normalizeClass(["content", [{ "maz-p-4": _ctx.padding }, _ctx.contentClass]]),
+          style: normalizeStyle(_ctx.contentStyle)
+        }, [
+          renderSlot(_ctx.$slots, "default", {}, void 0, !0)
+        ], 6)
+      ]),
+      withDirectives(createElementVNode("div", {
+        ref_key: "blobElement",
+        ref: blobElement,
+        class: "blob",
+        style: normalizeStyle({ backgroundColor: alphaColor.value })
+      }, null, 4), [
+        [vShow, blobVisible.value]
+      ]),
+      withDirectives(createElementVNode("div", {
+        ref_key: "fakeblobElement",
+        ref: fakeblobElement,
+        class: "fakeblob"
+      }, null, 512), [
+        [vShow, blobVisible.value]
+      ])
+    ], 6));
+  }
+}), MazCardSpotlight = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-247aad92"]]);
+export {
+  MazCardSpotlight as default
+};

package/dist/components/MazCarousel.js

@@ -0,0 +1,101 @@
+import { defineComponent, defineAsyncComponent, useSlots, ref, computed, createElementBlock, openBlock, normalizeClass, createCommentVNode, createElementVNode, renderSlot, createVNode, unref, withCtx } from "vue";
+import { MazChevronLeft, MazChevronRight } from "@maz-ui/icons";
+import { u as useTranslations } from "../chunks/useTranslations.BXuww4ux.js";
+import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper.B--vMWp3.js";
+import '../assets/MazCarousel.BaqN4hLP.css';const _hoisted_1 = { key: 0 }, _hoisted_2 = {
+  key: 1,
+  class: "m-carousel__header__actions"
+}, _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "MazCarousel",
+  props: {
+    hideScrollButtons: { type: Boolean, default: !1 },
+    translations: {},
+    hideScrollbar: { type: Boolean, default: !1 }
+  },
+  setup(__props) {
+    const MazBtn = defineAsyncComponent(() => import("./MazBtn.js")), slots = useSlots(), isScrolled = ref(!1), isScrolledMax = ref(!1), MazCarouselItems = ref(), { t } = useTranslations(), messages = computed(() => ({
+      ariaLabel: {
+        previousButton: __props.translations?.ariaLabel?.previousButton ?? t("carousel.ariaLabel.previousButton"),
+        nextButton: __props.translations?.ariaLabel?.nextButton ?? t("carousel.ariaLabel.nextButton")
+      }
+    }));
+    function hasHeader() {
+      return !__props.hideScrollButtons || slots.title;
+    }
+    function hasTitle() {
+      return !!slots.title;
+    }
+    function next() {
+      const items = MazCarouselItems.value;
+      items?.scrollTo(items.scrollLeft + items.clientWidth, 0);
+    }
+    function previous() {
+      const items = MazCarouselItems.value;
+      items?.scrollTo(items.scrollLeft - items.clientWidth, 0);
+    }
+    function setScrollState(event) {
+      const target = event.target;
+      if (!target)
+        return;
+      isScrolled.value = target.scrollLeft >= 20;
+      const itemsScrollWidth = target.scrollWidth - target.clientWidth;
+      isScrolledMax.value = target.scrollLeft >= itemsScrollWidth - 20;
+    }
+    return (_ctx, _cache) => (openBlock(), createElementBlock("div", {
+      class: normalizeClass(["m-carousel m-reset-css", {
+        "--hide-scrollbar": _ctx.hideScrollbar
+      }])
+    }, [
+      hasHeader() ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        class: normalizeClass(["m-carousel__header", { "--has-title": hasTitle() }])
+      }, [
+        hasTitle() ? (openBlock(), createElementBlock("div", _hoisted_1, [
+          renderSlot(_ctx.$slots, "title", {}, void 0, !0)
+        ])) : createCommentVNode("", !0),
+        _ctx.hideScrollButtons ? createCommentVNode("", !0) : (openBlock(), createElementBlock("div", _hoisted_2, [
+          createVNode(unref(MazBtn), {
+            color: "transparent",
+            class: normalizeClass(["m-carousel__btn", { "--muted": !isScrolled.value }]),
+            fab: "",
+            "aria-label": messages.value.ariaLabel.previousButton,
+            onClick: previous
+          }, {
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "previous-icon", {}, () => [
+                createVNode(unref(MazChevronLeft), { class: "maz-text-lg" })
+              ], !0)
+            ]),
+            _: 3
+          }, 8, ["class", "aria-label"]),
+          createVNode(unref(MazBtn), {
+            color: "transparent",
+            class: normalizeClass(["m-carousel__btn", { "--muted": isScrolledMax.value }]),
+            fab: "",
+            "aria-label": messages.value.ariaLabel.nextButton,
+            onClick: next
+          }, {
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "next-icon", {}, () => [
+                createVNode(unref(MazChevronRight), { class: "maz-text-lg" })
+              ], !0)
+            ]),
+            _: 3
+          }, 8, ["class", "aria-label"])
+        ]))
+      ], 2)) : createCommentVNode("", !0),
+      createElementVNode("div", {
+        ref_key: "MazCarouselItems",
+        ref: MazCarouselItems,
+        class: "m-carousel__items",
+        onScroll: setScrollState
+      }, [
+        renderSlot(_ctx.$slots, "default", {}, void 0, !0),
+        _cache[0] || (_cache[0] = createElementVNode("div", { class: "m-carousel__items__spacer" }, null, -1))
+      ], 544)
+    ], 2));
+  }
+}), MazCarousel = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-4959d7b6"]]);
+export {
+  MazCarousel as default
+};

package/dist/components/MazChart.js

@@ -0,0 +1,4 @@
+import { _ as _sfc_main } from "../chunks/MazChart.vue_vue_type_script_setup_true_lang.JSYXGyfn.js";
+export {
+  _sfc_main as default
+};

package/dist/components/MazCheckbox.js

@@ -0,0 +1,130 @@
+import { defineComponent, computed, ref, createElementBlock, openBlock, normalizeStyle, normalizeClass, unref, createElementVNode, createCommentVNode, mergeProps, createVNode, renderSlot, createTextVNode, toDisplayString } from "vue";
+import { MazCheck } from "@maz-ui/icons";
+import { useInstanceUniqId } from "../composables/useInstanceUniqId.js";
+import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper.B--vMWp3.js";
+import '../assets/MazCheckbox.C_qIngLy.css';const _hoisted_1 = ["for", "tabindex", "aria-checked"], _hoisted_2 = ["id", "checked", "disabled", "name"], _hoisted_3 = {
+  key: 0,
+  class: "m-checkbox__text"
+}, _sfc_main = /* @__PURE__ */ defineComponent({
+  inheritAttrs: !1,
+  __name: "MazCheckbox",
+  props: {
+    style: { default: void 0 },
+    class: { default: void 0 },
+    modelValue: { default: void 0 },
+    id: { default: void 0 },
+    color: { default: "primary" },
+    value: { type: [String, Number, Boolean], default: void 0 },
+    name: { default: "m-checkbox" },
+    size: { default: "md" },
+    label: { default: void 0 },
+    disabled: { type: Boolean, default: !1 },
+    error: { type: Boolean },
+    success: { type: Boolean },
+    warning: { type: Boolean },
+    hint: {},
+    tabindex: { default: 0 }
+  },
+  emits: ["update:model-value", "change", "blur", "focus"],
+  setup(__props, { emit: __emit }) {
+    const props = __props, emits = __emit, instanceId = useInstanceUniqId({
+      componentName: "MazCheckbox",
+      providedId: props.id
+    }), isChecked = computed(() => typeof props.value != "boolean" && Array.isArray(props.modelValue) ? props.modelValue.includes(props.value) : typeof props.modelValue == "boolean" ? props.modelValue : !1), checkboxSize = computed(() => {
+      switch (props.size) {
+        case "xl":
+          return "2rem";
+        case "lg":
+          return "1.75rem";
+        case "sm":
+          return "1.25rem";
+        case "xs":
+          return "1rem";
+        case "mini":
+          return "0.75rem";
+        default:
+          return "1.5rem";
+      }
+    }), checkIconSize = computed(() => {
+      switch (props.size) {
+        case "xl":
+          return "maz-text-2xl";
+        case "lg":
+          return "maz-text-xl";
+        case "sm":
+          return "maz-text-base";
+        case "xs":
+          return "maz-text-sm";
+        case "mini":
+          return "maz-text-xs";
+        default:
+          return "maz-text-lg";
+      }
+    }), checkIconColor = computed(() => props.color === "contrast" ? "hsl(var(--maz-background))" : `hsl(var(--maz-${props.color}-foreground))`), checkboxSelectedColor = computed(() => props.color === "contrast" ? "hsl(var(--maz-contrast))" : `hsl(var(--maz-${props.color}))`), checkboxBoxShadow = computed(() => props.error ? "hsl(var(--maz-destructive))" : props.warning ? "hsl(var(--maz-warning))" : props.success ? "hsl(var(--maz-success))" : ["transparent", "contrast"].includes(props.color) ? "hsl(var(--maz-muted))" : `hsl(var(--maz-${props.color}) / 60%)`);
+    function keyboardHandler(event) {
+      ["Space"].includes(event.code) && (event.preventDefault(), emitValue(props.value ?? !props.modelValue));
+    }
+    function getNewValue(value) {
+      return typeof value == "boolean" && (typeof props.modelValue == "boolean" || props.modelValue === void 0 || props.modelValue === null) ? !props.modelValue : Array.isArray(props.modelValue) && typeof value != "boolean" ? props.modelValue.includes(value) ? props.modelValue.filter((v) => v !== value) : [...props.modelValue, value] : [value];
+    }
+    function emitValue(value) {
+      const newValue = getNewValue(value);
+      emits("update:model-value", newValue), emits("change", newValue);
+    }
+    const inputRef = ref();
+    function onBlur(event) {
+      inputRef.value?.dispatchEvent(new Event("blur")), emits("blur", event);
+    }
+    function onFocus(event) {
+      inputRef.value?.dispatchEvent(new Event("focus")), emits("focus", event);
+    }
+    return (_ctx, _cache) => (openBlock(), createElementBlock("label", {
+      for: unref(instanceId),
+      class: normalizeClass(["m-checkbox m-reset-css", [{ "--disabled": _ctx.disabled, "--error": _ctx.error, "--warning": _ctx.warning, "--success": _ctx.success }, props.class]]),
+      tabindex: _ctx.tabindex,
+      style: normalizeStyle([_ctx.style, { "--checkbox-selected-color": checkboxSelectedColor.value, "--checkbox-box-shadow-color": checkboxBoxShadow.value }]),
+      role: "checkbox",
+      "aria-checked": isChecked.value,
+      onKeydown: keyboardHandler,
+      onBlur,
+      onFocus
+    }, [
+      createElementVNode("input", mergeProps({
+        id: unref(instanceId),
+        ref_key: "inputRef",
+        ref: inputRef,
+        checked: isChecked.value
+      }, _ctx.$attrs, {
+        tabindex: "-1",
+        disabled: _ctx.disabled,
+        name: _ctx.name,
+        type: "checkbox",
+        onChange: _cache[0] || (_cache[0] = ($event) => emitValue(_ctx.value ?? $event?.target?.checked))
+      }), null, 16, _hoisted_2),
+      createElementVNode("span", {
+        style: normalizeStyle({ width: checkboxSize.value, height: checkboxSize.value })
+      }, [
+        createVNode(unref(MazCheck), {
+          class: normalizeClass(["check-icon", checkIconSize.value]),
+          style: normalizeStyle({ color: checkIconColor.value })
+        }, null, 8, ["class", "style"])
+      ], 4),
+      _ctx.label || _ctx.$slots.default || _ctx.hint ? (openBlock(), createElementBlock("div", _hoisted_3, [
+        renderSlot(_ctx.$slots, "default", { value: _ctx.value }, () => [
+          createTextVNode(toDisplayString(_ctx.label), 1)
+        ], !0),
+        _ctx.hint ? (openBlock(), createElementBlock("span", {
+          key: 0,
+          class: normalizeClass(["m-checkbox__hint", {
+            "--error": _ctx.error,
+            "--success": _ctx.success,
+            "--warning": _ctx.warning
+          }])
+        }, toDisplayString(_ctx.hint), 3)) : createCommentVNode("", !0)
+      ])) : createCommentVNode("", !0)
+    ], 46, _hoisted_1));
+  }
+}), MazCheckbox = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-cd527f18"]]);
+export {
+  MazCheckbox as default
+};

package/dist/components/MazChecklist.js

@@ -0,0 +1,133 @@
+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 { u as useTranslations } from "../chunks/useTranslations.BXuww4ux.js";
+import { n as normalizeString } from "../chunks/normalizeString.CFe2M8S_.js";
+import { useInstanceUniqId } from "../composables/useInstanceUniqId.js";
+import { useStringMatching } from "../composables/useStringMatching.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.CWK_Gl-t.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 = normalizeString(internalQuery.value, __props.searchOptions);
+      return __props.searchFunction ? __props.searchFunction(normalizedQuery, __props.items ?? []) : getFilteredOptionWithQuery(normalizedQuery);
+    });
+    function searchInValue(value, query) {
+      return query && value && normalizeString(value).includes(normalizeString(query));
+    }
+    function getFilteredOptionWithQuery(query) {
+      return __props.items?.filter(({ label, value }) => {
+        const threshold = __props.searchOptions?.threshold, normalizedQuery = normalizeString(query, __props.searchOptions), searchLabel = normalizeString(label, __props.searchOptions), searchValue = normalizeString(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-e3215167"]]);
+export {
+  MazChecklist as default
+};