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

package/dist/components/MazRadioButtons.js

@@ -0,0 +1,128 @@
+import { defineComponent, ref, createElementBlock, openBlock, createElementVNode, createCommentVNode, normalizeClass, Fragment, renderList, normalizeStyle, renderSlot, createVNode, Transition, withCtx, withDirectives, unref, vShow, createTextVNode, toDisplayString } from "vue";
+import { MazCheck } from "@maz-ui/icons";
+import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper.B--vMWp3.js";
+import '../assets/MazRadioButtons.BA4rjgK9.css';const _hoisted_1 = { class: "m-radio-buttons m-reset-css" }, _hoisted_2 = ["for", "aria-checked", "onKeydown", "onBlur", "onFocus"], _hoisted_3 = ["id", "name", "value", "onChange"], _hoisted_4 = {
+  key: 0,
+  class: "m-radio-buttons__items__checkbox"
+}, _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "MazRadioButtons",
+  props: {
+    modelValue: { default: void 0 },
+    options: {},
+    name: { default: "MazButtonsRadio" },
+    color: { default: "primary" },
+    elevation: { type: Boolean, default: !1 },
+    orientation: { default: "row" },
+    wrap: { type: Boolean, default: !0 },
+    equalSize: { type: Boolean, default: !1 },
+    selector: { type: Boolean, default: !1 },
+    block: { type: Boolean, default: !1 },
+    error: { type: Boolean },
+    success: { type: Boolean },
+    warning: { type: Boolean },
+    hint: {}
+  },
+  emits: ["update:model-value", "change", "blur", "focus"],
+  setup(__props, { emit: __emit }) {
+    const props = __props, emits = __emit;
+    function selectOption(option) {
+      emits("update:model-value", option.value);
+    }
+    function isSelected(value) {
+      return props.modelValue === value;
+    }
+    function keyboardHandler(event, option) {
+      ["Space"].includes(event.code) && (event.preventDefault(), selectOption(option));
+    }
+    function getOptionId(option, i) {
+      return `option-${i}-${option.value.toString()}-${props.name}`;
+    }
+    const inputRef = ref();
+    function onBlur(index, event) {
+      inputRef.value?.[index]?.dispatchEvent(new Event("blur")), emits("blur", event);
+    }
+    function onFocus(index, event) {
+      inputRef.value?.[index]?.dispatchEvent(new Event("focus")), emits("focus", event);
+    }
+    return (_ctx, _cache) => (openBlock(), createElementBlock("div", _hoisted_1, [
+      createElementVNode("div", {
+        class: normalizeClass(["m-radio-buttons__wrapper", [`--${_ctx.orientation}`, { "--wrap": _ctx.wrap, "--block": _ctx.block }]])
+      }, [
+        (openBlock(!0), createElementBlock(Fragment, null, renderList(_ctx.options, (option, i) => (openBlock(), createElementBlock("label", {
+          key: getOptionId(option, i),
+          for: getOptionId(option, i),
+          class: normalizeClass(["m-radio-buttons__items maz-group", [
+            {
+              "--is-selected": isSelected(option.value),
+              "--elevation": _ctx.elevation,
+              "--equal-size": _ctx.equalSize
+            },
+            option.classes
+          ]]),
+          tabindex: "0",
+          style: normalizeStyle([
+            isSelected(option.value) ? {
+              color: `hsl(var(--maz-${_ctx.color}-foreground))`,
+              backgroundColor: `hsl(var(--maz-${_ctx.color}))`
+            } : {},
+            option.style
+          ]),
+          role: "radio",
+          "aria-checked": isSelected(option.value),
+          onKeydown: ($event) => keyboardHandler($event, option),
+          onBlur: ($event) => onBlur(i, $event),
+          onFocus: ($event) => onFocus(i, $event)
+        }, [
+          createElementVNode("input", {
+            id: getOptionId(option, i),
+            ref_for: !0,
+            ref_key: "inputRef",
+            ref: inputRef,
+            type: "radio",
+            tabindex: "-1",
+            name: _ctx.name,
+            value: option.value,
+            class: "maz-hidden",
+            onChange: ($event) => selectOption(option)
+          }, null, 40, _hoisted_3),
+          _ctx.selector ? (openBlock(), createElementBlock("div", _hoisted_4, [
+            createElementVNode("span", {
+              class: normalizeClass({
+                "--is-selected": isSelected(option.value)
+              }),
+              style: normalizeStyle([
+                isSelected(option.value) ? { backgroundColor: `hsl(var(--maz-${props.color}-600))` } : {}
+              ])
+            }, [
+              createVNode(Transition, { name: "maz-radio-buttons-scale" }, {
+                default: withCtx(() => [
+                  withDirectives(createVNode(unref(MazCheck), { class: "maz-size-full" }, null, 512), [
+                    [vShow, isSelected(option.value)]
+                  ])
+                ]),
+                _: 2
+              }, 1024)
+            ], 6)
+          ])) : createCommentVNode("", !0),
+          renderSlot(_ctx.$slots, "default", {
+            option,
+            selected: isSelected(option.value)
+          }, () => [
+            createTextVNode(toDisplayString(option.label), 1)
+          ], !0)
+        ], 46, _hoisted_2))), 128))
+      ], 2),
+      _ctx.hint ? (openBlock(), createElementBlock("span", {
+        key: 0,
+        class: normalizeClass(["m-radio-buttons__hint", {
+          "--error": _ctx.error,
+          "--success": _ctx.success,
+          "--warning": _ctx.warning
+        }])
+      }, toDisplayString(_ctx.hint), 3)) : createCommentVNode("", !0)
+    ]));
+  }
+}), MazRadioButtons = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-32102767"]]);
+export {
+  MazRadioButtons as default
+};

package/dist/components/MazReadingProgressBar.js

@@ -0,0 +1,67 @@
+import { defineComponent, computed, ref, watch, onMounted, onBeforeUnmount, createBlock, openBlock, Teleport, createElementVNode, mergeProps, normalizeStyle, normalizeClass, nextTick } from "vue";
+import { t as throttle } from "../chunks/throttle.DN8ARw0a.js";
+import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper.B--vMWp3.js";
+import '../assets/MazReadingProgressBar.n1Is8_Y3.css';const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "MazReadingProgressBar",
+  props: {
+    height: { default: "4px" },
+    color: { default: "primary" },
+    teleportSelector: { default: "body" },
+    contentSelector: { default: "body" },
+    offset: { default: 0 },
+    barClass: { default: void 0 },
+    distance: { default: void 0 }
+  },
+  emits: ["begin", "complete"],
+  setup(__props, { emit: __emit }) {
+    const props = __props, emits = __emit, barColor = computed(() => `hsl(var(--maz-${props.color}))`), progressBarWidth = ref(), elementHeight = ref(0);
+    watch(
+      () => props.distance,
+      (value) => {
+        value && (elementHeight.value = value);
+      },
+      {
+        immediate: !0
+      }
+    );
+    const handleScroll = throttle(() => {
+      const scrollPosition = window.scrollY;
+      if (scrollPosition >= 0 && scrollPosition <= elementHeight.value) {
+        const progress = scrollPosition / elementHeight.value * 100;
+        progressBarWidth.value = `${progress}%`;
+      } else scrollPosition <= 0 ? (progressBarWidth.value = "0%", emits("begin")) : scrollPosition > elementHeight.value ? (progressBarWidth.value = "100%", emits("complete")) : progressBarWidth.value = "0%";
+    }, 15);
+    async function setupScroll() {
+      if (elementHeight.value === 0) {
+        const element = document.querySelector(props.contentSelector);
+        if (!element) {
+          console.error(`HTML Element with selector "${props.contentSelector}" not found.`);
+          return;
+        }
+        await nextTick(), elementHeight.value = element.offsetHeight + element.offsetTop + props.offset - window.innerHeight;
+      }
+      window.addEventListener("scroll", handleScroll, {
+        passive: !0
+      });
+    }
+    return onMounted(() => {
+      setupScroll();
+    }), onBeforeUnmount(() => {
+      window.removeEventListener("scroll", handleScroll);
+    }), (_ctx, _cache) => (openBlock(), createBlock(Teleport, { to: _ctx.teleportSelector }, [
+      createElementVNode("div", mergeProps({ class: "m-reading-progress-bar m-reset-css" }, _ctx.$attrs), [
+        createElementVNode("div", {
+          class: normalizeClass(_ctx.barClass),
+          style: normalizeStyle({
+            width: progressBarWidth.value ?? "0px",
+            height: _ctx.height,
+            backgroundColor: barColor.value
+          })
+        }, null, 6)
+      ], 16)
+    ], 8, ["to"]));
+  }
+}), MazReadingProgressBar = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-9f473f71"]]);
+export {
+  MazReadingProgressBar as default
+};

package/dist/components/MazSelect.js

@@ -0,0 +1,374 @@
+import { defineComponent, mergeModels, defineAsyncComponent, useTemplateRef, computed, useModel, ref, watch, createBlock, openBlock, normalizeStyle, normalizeClass, withCtx, createElementVNode, unref, createCommentVNode, renderSlot, createElementBlock, createVNode, Fragment, renderList, toDisplayString, withModifiers, mergeProps, nextTick } from "vue";
+import { MazMagnifyingGlass, MazNoSymbol, MazChevronDown } from "@maz-ui/icons";
+import { u as useTranslations } from "../chunks/useTranslations.BXuww4ux.js";
+import { d as debounceCallback } from "../chunks/debounceCallback.B69vn57Q.js";
+import { i as isClient } from "../chunks/isClient.WI4oSt66.js";
+import { n as normalizeString } from "../chunks/normalizeString.CFe2M8S_.js";
+import { useInstanceUniqId } from "../composables/useInstanceUniqId.js";
+import { useStringMatching } from "../composables/useStringMatching.js";
+import MazInput from "./MazInput.js";
+import MazPopover from "./MazPopover.js";
+import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper.B--vMWp3.js";
+import '../assets/MazSelect.DZZpDg8z.css';const _hoisted_1 = ["aria-label"], _hoisted_2 = ["id"], _hoisted_3 = { class: "m-select-list__no-results" }, _hoisted_4 = { class: "m-select-list-optgroup" }, _hoisted_5 = ["tabindex", "onClick"], _sfc_main = /* @__PURE__ */ defineComponent({
+  inheritAttrs: !1,
+  __name: "MazSelect",
+  props: /* @__PURE__ */ mergeModels({
+    style: { default: void 0 },
+    class: { default: void 0 },
+    id: { default: void 0 },
+    label: {},
+    placeholder: {},
+    modelValue: { default: void 0 },
+    options: {},
+    optionValueKey: { default: "value" },
+    optionLabelKey: { default: "label" },
+    optionInputValueKey: { default: "label" },
+    listPosition: { default: "bottom-start" },
+    itemHeight: { default: void 0 },
+    maxListHeight: { default: 240 },
+    maxListWidth: { default: void 0 },
+    minListHeight: { default: void 0 },
+    minListWidth: { default: void 0 },
+    size: { default: "md" },
+    color: { default: "primary" },
+    search: { type: Boolean },
+    searchFunction: {},
+    searchThreshold: { default: 0.75 },
+    multiple: { default: void 0 },
+    required: { type: Boolean },
+    disabled: { type: Boolean },
+    block: { type: Boolean },
+    autocomplete: { default: "off" },
+    translations: {},
+    formatInputValue: {}
+  }, {
+    open: { type: Boolean, required: !1, default: !1 },
+    openModifiers: {}
+  }),
+  emits: /* @__PURE__ */ mergeModels(["close", "open", "blur", "focus", "change", "input", "update:model-value", "selected-option"], ["update:open"]),
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props, emits = __emit, MazCheckbox = defineAsyncComponent(() => import("./MazCheckbox.js")), popoverComponent = useTemplateRef("popoverComponent"), selectedTextColor = computed(() => `hsl(var(--maz-${props.color}))`), selectedBgColor = computed(() => `hsl(var(--maz-${props.color}-500) / 0.1)`), { t } = useTranslations(), messages = computed(() => ({
+      searchPlaceholder: props.translations?.searchPlaceholder || t("select.searchPlaceholder")
+    })), isOpen = useModel(__props, "open"), instanceId = useInstanceUniqId({
+      componentName: "MazSelect",
+      providedId: props.id
+    });
+    function getOptionPayload(option) {
+      return {
+        [props.optionValueKey]: option,
+        [props.optionLabelKey]: option,
+        [props.optionInputValueKey]: option
+      };
+    }
+    function getNormalizedOptionPayload(option) {
+      return {
+        ...option,
+        [props.optionValueKey]: option[props.optionValueKey],
+        [props.optionLabelKey]: option[props.optionLabelKey],
+        [props.optionInputValueKey]: option[props.optionInputValueKey]
+      };
+    }
+    function getNormalizedOptions(options) {
+      const normalizedOptions = [];
+      if (!options?.length)
+        return [];
+      for (const option of options)
+        typeof option == "string" || typeof option == "number" || typeof option == "boolean" ? normalizedOptions.push(getOptionPayload(option)) : typeof option == "object" && "options" in option && Array.isArray(option.options) ? normalizedOptions.push(
+          { label: option.label, isOptGroup: !0 },
+          ...option.options.map(
+            (opt) => typeof opt == "string" || typeof opt == "number" || typeof opt == "boolean" ? getOptionPayload(opt) : getNormalizedOptionPayload(opt)
+          )
+        ) : normalizedOptions.push(getNormalizedOptionPayload(option));
+      return normalizedOptions;
+    }
+    const optionsNormalized = computed(() => getNormalizedOptions(props.options ?? []));
+    function isOptionInSelection(option) {
+      return isNullOrUndefined(option[props.optionValueKey]) ? !1 : props.multiple ? Array.isArray(props.modelValue) && props.modelValue.includes(option[props.optionValueKey]) : props.modelValue === option[props.optionValueKey];
+    }
+    const selectedOptions = computed(
+      () => optionsNormalized.value?.filter(isOptionInSelection) ?? []
+    ), mazInputComponent = useTemplateRef("mazInputComponent"), searchInputComponent = useTemplateRef("searchInputComponent"), optionListElement = ref(), optionListScrollWrapper = ref();
+    function isNullOrUndefined(value) {
+      return value == null;
+    }
+    function isSelectedOption(option) {
+      return (selectedOptions.value?.some(
+        (selectedOption) => selectedOption[props.optionValueKey] === option[props.optionValueKey]
+      ) ?? !1) && !isNullOrUndefined(option[props.optionValueKey]);
+    }
+    const inputValue = computed(() => {
+      if (props.multiple && props.modelValue && Array.isArray(props.modelValue)) {
+        const values = props.modelValue.map(
+          (value2) => optionsNormalized.value?.find((option) => option[props.optionValueKey] === value2)?.[props.optionInputValueKey]
+        );
+        return props.formatInputValue ? props.formatInputValue(values) : values.join(", ");
+      }
+      const selectedOption = optionsNormalized.value?.find(
+        (option) => option[props.optionValueKey] === props.modelValue
+      ), value = isNullOrUndefined(props.modelValue) ? void 0 : selectedOption?.[props.optionInputValueKey];
+      return props.formatInputValue ? props.formatInputValue(value) : value;
+    }), searchQuery = ref(), query = ref("");
+    function searchInValue(value, query2) {
+      return query2 && value && normalizeString(value).includes(normalizeString(query2));
+    }
+    function getFilteredOptionWithQuery(query2) {
+      return query2 ? optionsNormalized.value?.filter((option) => {
+        const searchValue = option[props.optionLabelKey], searchValue3 = option[props.optionValueKey], searchValue2 = option[props.optionInputValueKey], threshold = props.searchThreshold;
+        return searchInValue(searchValue, query2) || searchInValue(searchValue2, query2) || searchInValue(searchValue3, query2) || typeof searchValue == "string" && useStringMatching(searchValue, query2, threshold).isMatching.value || typeof searchValue2 == "string" && useStringMatching(searchValue2, query2, threshold).isMatching.value || typeof searchValue3 == "string" && useStringMatching(searchValue3, query2, threshold).isMatching.value;
+      }) : optionsNormalized.value;
+    }
+    const optionList = computed(() => props.searchFunction && props.search && searchQuery.value ? getNormalizedOptions(props.searchFunction(searchQuery.value, props.options ?? []) ?? []) : getFilteredOptionWithQuery(searchQuery.value));
+    function onCloseList() {
+      emits("close");
+    }
+    async function onOpenList() {
+      const selectedIndex = optionList.value?.findIndex(
+        (option) => isSelectedOption(option)
+      );
+      await scrollToOptionIndex(selectedIndex), emits("open");
+    }
+    function focusMainInput() {
+      mazInputComponent.value?.$el?.querySelector("input")?.focus();
+    }
+    function emitInputMainInput() {
+      mazInputComponent.value?.$el?.querySelector("input")?.dispatchEvent(new Event("input"));
+    }
+    function focusSearchInputAndSetQuery(q) {
+      searchQuery.value = q, searchInputComponent.value?.$el?.querySelector("input")?.focus();
+    }
+    function searchOptionWithQuery(keyPressed) {
+      keyPressed === "Backspace" && query.value && query.value.length > 0 ? query.value = query.value.slice(0, -1) : query.value += keyPressed;
+      const filteredOptions = getFilteredOptionWithQuery(query.value);
+      if (!filteredOptions?.length)
+        return;
+      const optionIndex = optionList.value?.findIndex(
+        (option) => option[props.optionValueKey] === filteredOptions[0][props.optionValueKey]
+      );
+      typeof optionIndex != "number" || optionIndex === -1 || (scrollToOptionIndex(optionIndex), debounceCallback(() => {
+        query.value = "";
+      }, 1e3));
+    }
+    function mainInputKeyboardHandler(event) {
+      const keyPressed = event.key;
+      (keyPressed === "ArrowDown" || keyPressed === "ArrowUp" || /^[\dA-Za-z\u0400-\u04FF]$/.test(keyPressed)) && !isOpen.value && (event.preventDefault(), popoverComponent.value?.open()), /^[\dA-Za-z\u0400-\u04FF]$/.test(keyPressed) && props.search && focusSearchInputAndSetQuery(keyPressed);
+    }
+    async function scrollToOptionIndex(index) {
+      if (await nextTick(), typeof index != "number" || index < 0)
+        return;
+      const item = optionListElement.value?.querySelector(`.m-select-list-item:nth-child(${index + 1})`);
+      if (item && optionListScrollWrapper.value) {
+        const wrapperRect = optionListScrollWrapper.value.getBoundingClientRect(), itemRect = item.getBoundingClientRect(), scrollTop = item.offsetTop - wrapperRect.height / 2 + itemRect.height / 2;
+        optionListScrollWrapper.value.scrollTo({
+          top: scrollTop,
+          behavior: "auto"
+        }), nextTick(() => {
+          item.focus({ preventScroll: !0 });
+        });
+      }
+    }
+    function updateValue(inputOption, mustCloseList = !0) {
+      mustCloseList && !props.multiple && nextTick(() => {
+        popoverComponent.value?.close();
+      }), searchQuery.value = "";
+      const isAlreadySelected = selectedOptions.value?.some(
+        (option) => option[props.optionValueKey] === inputOption[props.optionValueKey]
+      );
+      let newValue = selectedOptions.value;
+      isAlreadySelected && props.multiple ? newValue = newValue?.filter(
+        (option) => option[props.optionValueKey] !== inputOption[props.optionValueKey]
+      ) : props.multiple ? newValue.push(inputOption) : newValue = [inputOption];
+      const selectedValues = newValue.map((option) => option[props.optionValueKey]);
+      emits("update:model-value", props.multiple ? selectedValues : selectedValues[0]), emits("selected-option", inputOption), emitInputMainInput(), focusMainInput();
+    }
+    function keydownHandler(event) {
+      const keyPressed = event.key;
+      if (keyPressed === "ArrowDown" || keyPressed === "ArrowUp") {
+        event.preventDefault();
+        const itemLength = optionList.value?.length;
+        if (!itemLength)
+          return;
+        const currentElement = document.activeElement, itemsElements = document.querySelectorAll(`#${instanceId.value}-option-list .m-select-list-item`), currentIndex = Array.from(itemsElements).indexOf(currentElement);
+        if (currentIndex === -1) {
+          itemsElements[0]?.focus({ preventScroll: !0 });
+          return;
+        }
+        const nextIndex = keyPressed === "ArrowDown" ? (currentIndex + 1) % itemLength : (currentIndex - 1 + itemLength) % itemLength;
+        itemsElements[nextIndex]?.focus();
+      } else !props.search && /^[\dA-Za-z\u0400-\u04FF]$/.test(keyPressed) && searchOptionWithQuery(keyPressed);
+    }
+    function updateListPosition() {
+      nextTick(() => {
+        popoverComponent.value?.updatePosition();
+      });
+    }
+    return watch(
+      isOpen,
+      (value) => {
+        isClient() && (value ? document.addEventListener("keydown", keydownHandler) : document.removeEventListener("keydown", keydownHandler));
+      },
+      { immediate: !0 }
+    ), __expose({
+      /**
+       * Open the select
+       * @description This is used to open the list options
+       */
+      open: () => {
+        popoverComponent.value?.open();
+      },
+      /**
+       * Close the select
+       * @description This is used to close the list options
+       */
+      close: () => {
+        popoverComponent.value?.close();
+      }
+    }), (_ctx, _cache) => (openBlock(), createBlock(MazPopover, {
+      ref_key: "popoverComponent",
+      ref: popoverComponent,
+      modelValue: isOpen.value,
+      "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => isOpen.value = $event),
+      class: normalizeClass(["m-select m-reset-css", [
+        { "--is-open": isOpen.value, "--disabled": _ctx.disabled },
+        props.class,
+        `--${_ctx.size}`
+      ]]),
+      style: normalizeStyle(_ctx.style),
+      trigger: "click",
+      block: _ctx.block,
+      offset: 0,
+      "prefer-position": _ctx.listPosition,
+      "fallback-position": "top-start",
+      onClose: onCloseList,
+      onOpen: onOpenList
+    }, {
+      trigger: withCtx(() => [
+        createVNode(MazInput, mergeProps({
+          id: unref(instanceId),
+          ref_key: "mazInputComponent",
+          ref: mazInputComponent,
+          class: "m-select-input"
+        }, _ctx.$attrs, {
+          required: _ctx.required,
+          "border-active": isOpen.value,
+          color: _ctx.color,
+          "model-value": inputValue.value,
+          size: _ctx.size,
+          block: _ctx.block,
+          placeholder: _ctx.placeholder,
+          label: _ctx.label,
+          autocomplete: _ctx.autocomplete,
+          disabled: _ctx.disabled,
+          readonly: "",
+          onChange: _cache[0] || (_cache[0] = ($event) => emits("change", $event)),
+          onInput: _cache[1] || (_cache[1] = ($event) => emits("input", $event)),
+          onFocus: _cache[2] || (_cache[2] = ($event) => emits("focus", $event)),
+          onBlur: _cache[3] || (_cache[3] = ($event) => emits("blur", $event)),
+          onKeydown: mainInputKeyboardHandler
+        }), {
+          "left-icon": withCtx(() => [
+            renderSlot(_ctx.$slots, "left-icon", {}, void 0, !0)
+          ]),
+          "right-icon": withCtx(() => [
+            renderSlot(_ctx.$slots, "right-icon", {}, () => [
+              createElementVNode("button", {
+                tabindex: "-1",
+                type: "button",
+                class: "m-select-input__toggle-button maz-custom",
+                "aria-label": `${isOpen.value ? "collapse" : "expand"} list of options`
+              }, [
+                createVNode(unref(MazChevronDown), { class: "m-select-chevron" })
+              ], 8, _hoisted_1)
+            ], !0)
+          ]),
+          _: 3
+        }, 16, ["id", "required", "border-active", "color", "model-value", "size", "block", "placeholder", "label", "autocomplete", "disabled"])
+      ]),
+      default: withCtx(() => [
+        createElementVNode("div", {
+          id: `${unref(instanceId)}-option-list`,
+          ref_key: "optionListElement",
+          ref: optionListElement,
+          class: normalizeClass(["m-select-list", `--${_ctx.size}`]),
+          style: normalizeStyle([{
+            maxHeight: `${_ctx.maxListHeight}px`,
+            maxWidth: `${_ctx.maxListWidth}px`,
+            minHeight: `${_ctx.minListHeight}px`,
+            minWidth: `${_ctx.minListWidth}px`,
+            "--selected-bg-color": selectedBgColor.value,
+            "--selected-text-color": selectedTextColor.value
+          }])
+        }, [
+          _ctx.search ? (openBlock(), createBlock(MazInput, {
+            key: 0,
+            ref_key: "searchInputComponent",
+            ref: searchInputComponent,
+            modelValue: searchQuery.value,
+            "onUpdate:modelValue": [
+              _cache[4] || (_cache[4] = ($event) => searchQuery.value = $event),
+              updateListPosition
+            ],
+            size: "sm",
+            disabled: _ctx.disabled,
+            color: _ctx.color,
+            placeholder: messages.value.searchPlaceholder,
+            name: "search",
+            inputmode: "search",
+            autocomplete: "off",
+            block: "",
+            class: "m-select-list__search-input maz-flex-none",
+            "left-icon": unref(MazMagnifyingGlass)
+          }, null, 8, ["modelValue", "disabled", "color", "placeholder", "left-icon"])) : createCommentVNode("", !0),
+          !optionList.value || optionList.value.length <= 0 ? renderSlot(_ctx.$slots, "no-results", { key: 1 }, () => [
+            createElementVNode("span", _hoisted_3, [
+              createVNode(unref(MazNoSymbol), { class: "maz-size-6 maz-text-foreground" })
+            ])
+          ], !0) : (openBlock(), createElementBlock("div", {
+            key: 2,
+            ref_key: "optionListScrollWrapper",
+            ref: optionListScrollWrapper,
+            class: "m-select-list__scroll-wrapper",
+            tabindex: "-1"
+          }, [
+            (openBlock(!0), createElementBlock(Fragment, null, renderList(optionList.value, (option, i) => (openBlock(), createElementBlock(Fragment, { key: i }, [
+              option.label && option.isOptGroup ? renderSlot(_ctx.$slots, "optgroup", {
+                key: 0,
+                label: option.label
+              }, () => [
+                createElementVNode("span", _hoisted_4, toDisplayString(option.label), 1)
+              ], !0) : (openBlock(), createElementBlock("button", {
+                key: 1,
+                type: "button",
+                tabindex: _ctx.multiple ? -1 : 0,
+                class: normalizeClass(["m-select-list-item maz-custom maz-flex-none", [
+                  {
+                    "--is-selected": isSelectedOption(option),
+                    "--is-none-value": isNullOrUndefined(option[_ctx.optionValueKey])
+                  }
+                ]]),
+                style: normalizeStyle(_ctx.itemHeight ? { height: `${_ctx.itemHeight}px` } : void 0),
+                onClick: withModifiers(($event) => updateValue(option, !0), ["prevent", "stop"])
+              }, [
+                _ctx.multiple ? (openBlock(), createBlock(unref(MazCheckbox), {
+                  key: 0,
+                  "model-value": isSelectedOption(option),
+                  size: "sm",
+                  color: _ctx.color
+                }, null, 8, ["model-value", "color"])) : createCommentVNode("", !0),
+                renderSlot(_ctx.$slots, "default", {
+                  option,
+                  isSelected: isSelectedOption(option)
+                }, () => [
+                  createElementVNode("span", null, toDisplayString(option[_ctx.optionLabelKey]), 1)
+                ], !0)
+              ], 14, _hoisted_5))
+            ], 64))), 128))
+          ], 512))
+        ], 14, _hoisted_2)
+      ]),
+      _: 3
+    }, 8, ["modelValue", "class", "style", "block", "prefer-position"]));
+  }
+}), MazSelect = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-b7f9209f"]]);
+export {
+  MazSelect as default
+};