maz-ui 3.22.4 → 3.23.1

package/components/chunks/MazSelect-2e5cd411.mjs

@@ -1,850 +0,0 @@
-import "../assets/MazSelect.css";
-import { computed, defineComponent, defineAsyncComponent, ref, getCurrentInstance, onMounted, useSlots, openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, renderSlot, createVNode, unref, createCommentVNode, withDirectives, mergeProps, toHandlers, vModelDynamic, createTextVNode, toDisplayString, createBlock, withModifiers, withCtx, useCssVars, onBeforeMount, watch, Transition, Fragment, renderList, nextTick } from "vue";
-function debounce(fn, delay) {
-  let timeout2;
-  return function(...args) {
-    clearTimeout(timeout2);
-    timeout2 = setTimeout(() => {
-      fn.apply(this, args);
-    }, delay);
-  };
-}
-const useInstanceUniqId = ({
-  componentName,
-  instance,
-  providedId
-}) => {
-  return computed(() => providedId ?? `${componentName}-${instance == null ? void 0 : instance.uid}`);
-};
-const _hoisted_1$1 = {
-  key: 0,
-  class: "m-input-wrapper-left"
-};
-const _hoisted_2$1 = { class: "m-input-wrapper-input" };
-const _hoisted_3$1 = ["id", "type", "name", "placeholder", "aria-label", "disabled", "readonly", "required"];
-const _hoisted_4$1 = { key: 0 };
-const _hoisted_5$1 = {
-  key: 1,
-  class: "m-input-wrapper-right"
-};
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
-  ...{
-    inheritAttrs: false
-  },
-  __name: "MazInput",
-  props: {
-    style: { type: [String, Array, Object], default: void 0 },
-    class: { type: String, default: void 0 },
-    modelValue: {
-      type: [String, Number, Boolean],
-      default: void 0
-    },
-    placeholder: { type: String, default: void 0 },
-    color: {
-      type: String,
-      default: "primary"
-    },
-    label: { type: String, default: void 0 },
-    name: { type: String, default: "input" },
-    type: {
-      type: String,
-      default: "text",
-      validator: (value) => {
-        return [
-          "text",
-          "date",
-          "number",
-          "tel",
-          "search",
-          "url",
-          "password",
-          "month",
-          "time",
-          "week",
-          "email"
-        ].includes(value);
-      }
-    },
-    required: { type: Boolean, default: false },
-    disabled: { type: Boolean, default: false },
-    readonly: { type: Boolean, default: false },
-    id: { type: String, default: void 0 },
-    error: { type: Boolean, default: false },
-    success: { type: Boolean, default: false },
-    warning: { type: Boolean, default: false },
-    hint: { type: String, default: void 0 },
-    inputClasses: { type: String, default: void 0 },
-    noBorder: { type: Boolean, default: false },
-    noRadius: { type: Boolean, default: false },
-    size: {
-      type: String,
-      default: "md",
-      validator: (value) => {
-        return ["mini", "xs", "sm", "md", "lg", "xl"].includes(value);
-      }
-    },
-    debounce: { type: Boolean, default: false },
-    debounceDelay: { type: Number, default: 500 },
-    validButton: { type: Boolean, default: false },
-    validButtonLoading: { type: Boolean, default: false },
-    autoFocus: { type: Boolean, default: false },
-    borderActive: { type: Boolean, default: false },
-    leftIcon: { type: String, default: void 0 },
-    rightIcon: { type: String, default: void 0 }
-  },
-  emits: ["focus", "blur", "update:model-value", "click", "change", "update"],
-  setup(__props, { emit: __emit }) {
-    const MazBtn = defineAsyncComponent(() => import("./MazBtn-2f4fa942.mjs"));
-    const MazIcon = defineAsyncComponent(() => import("./MazIcon-bda198b4.mjs"));
-    const EyeOffIcon = defineAsyncComponent(() => import("./eye-slash-342420ff.mjs"));
-    const EyeIcon = defineAsyncComponent(() => import("./eye-fbb13657.mjs"));
-    const CheckIcon = defineAsyncComponent(() => import("./check-8da249b1.mjs"));
-    const props = __props;
-    const emits = __emit;
-    const hasPasswordVisible = ref(false);
-    const isFocused = ref(false);
-    const input = ref();
-    const instance = getCurrentInstance();
-    const instanceId = useInstanceUniqId({
-      componentName: "MazInput",
-      instance,
-      providedId: props.id
-    });
-    onMounted(() => {
-      var _a;
-      if (props.autoFocus) {
-        (_a = input.value) == null ? void 0 : _a.focus();
-      }
-    });
-    const inheritClasses = computed(() => props.class);
-    const isPasswordType = computed(() => props.type === "password");
-    const inputType = computed(() => hasPasswordVisible.value ? "text" : props.type);
-    const borderStyle = computed(() => {
-      if (props.noBorder)
-        return void 0;
-      if (props.error)
-        return "maz-border-danger";
-      if (props.success)
-        return "maz-border-success";
-      if (props.warning)
-        return "maz-border-warning";
-      if (isFocused.value || props.borderActive) {
-        if (props.color === "black")
-          return "maz-border-black";
-        if (props.color === "danger")
-          return "maz-border-danger";
-        if (props.color === "info")
-          return "maz-border-info";
-        if (props.color === "primary")
-          return "maz-border-primary";
-        if (props.color === "secondary")
-          return "maz-border-secondary";
-        if (props.color === "success")
-          return "maz-border-success";
-        if (props.color === "warning")
-          return "maz-border-warning";
-        if (props.color === "white")
-          return "maz-border-white";
-      }
-      return "--default-border";
-    });
-    const slots = useSlots();
-    const computedPlaceholder = computed(() => {
-      const { required, placeholder } = props;
-      if (!placeholder)
-        return void 0;
-      return required ? `${placeholder} *` : placeholder;
-    });
-    const hasValue = computed(() => props.modelValue !== void 0 && props.modelValue !== "");
-    const inputValue = computed({
-      get: () => props.modelValue,
-      set: (value) => emitValue(value)
-    });
-    const shouldUp = computed(() => {
-      return (!!props.label || !!props.hint) && (isFocused.value || !!hasValue.value || !!props.placeholder || ["date", "month", "week"].includes(props.type));
-    });
-    const hasLabel = computed(() => !!props.label || !!props.hint);
-    const hasRightPart = () => {
-      return !!slots["right-icon"] || isPasswordType.value || !!slots["valid-button"] || props.validButton || !!props.rightIcon;
-    };
-    const hasLeftPart = () => {
-      return !!slots["left-icon"] || !!props.leftIcon;
-    };
-    const focus = (event) => {
-      emits("focus", event);
-      isFocused.value = true;
-    };
-    const blur = (event) => {
-      emits("blur", event);
-      isFocused.value = false;
-    };
-    const change = (event) => emits("change", event);
-    const debounceEmitValue = debounce((value) => {
-      emits("update:model-value", value);
-    }, props.debounceDelay);
-    const emitValue = (value) => {
-      if (props.debounce)
-        return debounceEmitValue(value);
-      emits("update:model-value", value);
-    };
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(
-        "div",
-        {
-          class: normalizeClass(["m-input", [
-            {
-              "--is-focused": isFocused.value || __props.borderActive,
-              "--should-up": shouldUp.value,
-              "--has-label": hasLabel.value,
-              "--is-disabled": __props.disabled,
-              "--is-readonly": __props.readonly,
-              "--has-z-2": __props.error || __props.warning || __props.success,
-              "--has-state": __props.error || __props.warning || __props.success
-            },
-            inheritClasses.value,
-            `--${__props.color}`,
-            `--${__props.size}`
-          ]]),
-          style: normalizeStyle(__props.style)
-        },
-        [
-          createElementVNode(
-            "div",
-            {
-              class: normalizeClass(["m-input-wrapper", [__props.inputClasses, borderStyle.value, { "maz-rounded": !__props.noRadius }]])
-            },
-            [
-              hasLeftPart() ? (openBlock(), createElementBlock("div", _hoisted_1$1, [
-                _ctx.$slots["left-icon"] || __props.leftIcon ? renderSlot(_ctx.$slots, "left-icon", { key: 0 }, () => [
-                  createVNode(unref(MazIcon), {
-                    name: __props.leftIcon,
-                    class: "maz-text-xl maz-text-muted"
-                  }, null, 8, ["name"])
-                ], true) : createCommentVNode("v-if", true)
-              ])) : createCommentVNode("v-if", true),
-              createElementVNode("div", _hoisted_2$1, [
-                withDirectives(createElementVNode("input", mergeProps({
-                  id: unref(instanceId),
-                  ref_key: "input",
-                  ref: input,
-                  "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => inputValue.value = $event),
-                  type: inputType.value,
-                  name: __props.name
-                }, _ctx.$attrs, {
-                  placeholder: computedPlaceholder.value,
-                  "aria-label": __props.label || __props.placeholder,
-                  disabled: __props.disabled,
-                  readonly: __props.readonly,
-                  required: __props.required,
-                  class: "m-input-input"
-                }, toHandlers({
-                  blur,
-                  focus,
-                  change
-                }, true), {
-                  onClick: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("click", $event))
-                }), null, 16, _hoisted_3$1), [
-                  [vModelDynamic, inputValue.value]
-                ]),
-                __props.label || __props.hint ? (openBlock(), createElementBlock(
-                  "span",
-                  {
-                    key: 0,
-                    ref: "label",
-                    class: normalizeClass(["m-input-label", [
-                      {
-                        "maz-text-danger-600": __props.error,
-                        "maz-text-success-600": __props.success,
-                        "maz-text-warning-600": __props.warning
-                      }
-                    ]])
-                  },
-                  [
-                    createTextVNode(
-                      toDisplayString(__props.hint || __props.label) + " ",
-                      1
-                      /* TEXT */
-                    ),
-                    __props.required ? (openBlock(), createElementBlock("sup", _hoisted_4$1, "*")) : createCommentVNode("v-if", true)
-                  ],
-                  2
-                  /* CLASS */
-                )) : createCommentVNode("v-if", true)
-              ]),
-              hasRightPart() ? (openBlock(), createElementBlock("div", _hoisted_5$1, [
-                _ctx.$slots["right-icon"] || __props.rightIcon ? renderSlot(_ctx.$slots, "right-icon", { key: 0 }, () => [
-                  createVNode(unref(MazIcon), {
-                    name: __props.rightIcon,
-                    class: "maz-text-xl maz-text-muted"
-                  }, null, 8, ["name"])
-                ], true) : createCommentVNode("v-if", true),
-                isPasswordType.value ? (openBlock(), createBlock(unref(MazBtn), {
-                  key: 1,
-                  color: "transparent",
-                  tabindex: "-1",
-                  size: "mini",
-                  onClick: _cache[2] || (_cache[2] = withModifiers(($event) => hasPasswordVisible.value = !hasPasswordVisible.value, ["stop"]))
-                }, {
-                  default: withCtx(() => [
-                    hasPasswordVisible.value ? (openBlock(), createBlock(unref(EyeOffIcon), {
-                      key: 0,
-                      class: "maz-text-xl maz-text-muted"
-                    })) : (openBlock(), createBlock(unref(EyeIcon), {
-                      key: 1,
-                      class: "maz-text-xl maz-text-muted"
-                    }))
-                  ]),
-                  _: 1
-                  /* STABLE */
-                })) : createCommentVNode("v-if", true),
-                _ctx.$slots["valid-button"] || __props.validButton ? renderSlot(_ctx.$slots, "valid-button", { key: 2 }, () => [
-                  createVNode(unref(MazBtn), {
-                    color: "transparent",
-                    disabled: __props.disabled,
-                    tabindex: "-1",
-                    loading: __props.validButtonLoading,
-                    class: "m-input-valid-button",
-                    size: "mini",
-                    type: "submit"
-                  }, {
-                    default: withCtx(() => [
-                      createVNode(unref(CheckIcon), { class: "maz-text-2xl maz-text-normal" })
-                    ]),
-                    _: 1
-                    /* STABLE */
-                  }, 8, ["disabled", "loading"])
-                ], true) : createCommentVNode("v-if", true)
-              ])) : createCommentVNode("v-if", true)
-            ],
-            2
-            /* CLASS */
-          )
-        ],
-        6
-        /* CLASS, STYLE */
-      );
-    };
-  }
-});
-const MazInput_vue_vue_type_style_index_0_scoped_32fa5093_lang = "";
-const _export_sfc = (sfc, props) => {
-  const target = sfc.__vccOpts || sfc;
-  for (const [key, val] of props) {
-    target[key] = val;
-  }
-  return target;
-};
-const MazInput = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-32fa5093"]]);
-ref("system");
-ref("system");
-ref();
-ref([]);
-let timeout = null;
-function debounceCallback(callback, delay) {
-  if (timeout) {
-    clearTimeout(timeout);
-  }
-  timeout = setTimeout(callback, delay);
-}
-const _hoisted_1 = ["onClick"];
-const _hoisted_2 = {
-  key: 0,
-  tabindex: "-1",
-  class: "m-select-list__search-wrapper"
-};
-const _hoisted_3 = { class: "m-select-list__no-results" };
-const _hoisted_4 = {
-  key: 2,
-  class: "m-select-list__scroll-wrapper",
-  tabindex: "-1"
-};
-const _hoisted_5 = ["onClick"];
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  ...{
-    inheritAttrs: false
-  },
-  __name: "MazSelect",
-  props: {
-    style: { type: [String, Array, Object], default: void 0 },
-    class: { type: String, default: void 0 },
-    modelValue: {
-      type: [Number, String, Boolean, Array],
-      default: void 0
-    },
-    id: { type: String, default: void 0 },
-    options: { type: Array, default: void 0 },
-    optionValueKey: { type: String, default: "value" },
-    optionLabelKey: { type: String, default: "label" },
-    optionInputValueKey: { type: String, default: "label" },
-    listPosition: {
-      type: String,
-      default: "bottom left",
-      validator: (value) => {
-        return ["top", "top right", "top left", "bottom", "bottom right", "bottom left"].includes(
-          value
-        );
-      }
-    },
-    required: { type: Boolean, default: false },
-    disabled: { type: Boolean, default: false },
-    open: { type: Boolean, default: false },
-    /** Choose color of the input */
-    color: {
-      type: String,
-      default: "primary"
-    },
-    /** Choose the option list item height */
-    itemHeight: { type: Number, default: 40 },
-    maxListHeight: { type: Number, default: 240 },
-    /** Add max-width value to option list */
-    maxListWidth: { type: Number, default: void 0 },
-    /** Choose size of the input */
-    size: {
-      type: String,
-      default: "md",
-      validator: (value) => {
-        return ["mini", "xs", "sm", "md", "lg", "xl"].includes(value);
-      }
-    },
-    /** Display search input in option list */
-    search: { type: Boolean, default: false },
-    /** Search input placeholder */
-    searchPlaceholder: { type: String, default: "Search in options" },
-    /** Enable feature to select multiple values */
-    multiple: { type: Boolean, default: false }
-  },
-  emits: [
-    "close",
-    "open",
-    "blur",
-    "focus",
-    "change",
-    "update:model-value",
-    /** On selected value, returns the option object */
-    "selected-option"
-  ],
-  setup(__props, { emit: __emit }) {
-    useCssVars((_ctx) => ({
-      "0804a86d": keyboardSelectedBgColor.value,
-      "4502d2ec": selectedTextColor.value,
-      "381f7054": selectedBgColor.value
-    }));
-    const MazCheckbox = defineAsyncComponent(() => import("./MazCheckbox-e0bbe6ec.mjs"));
-    const SearchIcon = defineAsyncComponent(() => import("./magnifying-glass-5dffa35e.mjs"));
-    const ChevronDownIcon = defineAsyncComponent(() => import("./chevron-down-a78b9604.mjs"));
-    const NoSymbolIcon = defineAsyncComponent(() => import("./no-symbol-975ce547.mjs"));
-    const instance = getCurrentInstance();
-    const props = __props;
-    const emits = __emit;
-    const listOpened = ref(false);
-    const tmpModelValueIndex = ref();
-    const isBlackOrTransparentColor = computed(
-      () => ["black", "transparent", "white"].includes(props.color)
-    );
-    const selectedTextColor = computed(
-      () => isBlackOrTransparentColor.value ? `var(--maz-color-black)` : `var(--maz-color-${props.color}-800)`
-    );
-    const selectedBgColor = computed(
-      () => isBlackOrTransparentColor.value ? "var(--maz-color-muted)" : `var(--maz-color-${props.color}-100)`
-    );
-    const keyboardSelectedBgColor = computed(
-      () => isBlackOrTransparentColor.value ? "var(--maz-color-muted)" : `var(--maz-color-${props.color}-200)`
-    );
-    const hasListOpened = computed(() => listOpened.value || props.open);
-    const instanceId = useInstanceUniqId({
-      componentName: "MazSelect",
-      instance,
-      providedId: props.id
-    });
-    const selectedOptions = computed(
-      () => {
-        var _a;
-        return ((_a = props.options) == null ? void 0 : _a.filter((option) => {
-          return props.multiple ? Array.isArray(props.modelValue) ? props.modelValue.includes(option[props.optionValueKey]) && !isNullOrUndefined(option[props.optionValueKey]) : false : props.modelValue === option[props.optionValueKey] && !isNullOrUndefined(option[props.optionValueKey]);
-        })) ?? [];
-      }
-    );
-    onBeforeMount(() => {
-      var _a;
-      if (!((_a = props.options) == null ? void 0 : _a.length)) {
-        console.warn("[maz-ui](MazSelect) you must provide options");
-      }
-      updateTmpModelValueIndex();
-    });
-    const mazSelectElement = ref();
-    const mazInputComponent = ref();
-    const searchInputComponent = ref();
-    const optionsListElement = ref();
-    const isNullOrUndefined = (value) => {
-      return value === void 0 || value === null;
-    };
-    function isSelectedOption(option) {
-      var _a;
-      const hasOption = ((_a = selectedOptions.value) == null ? void 0 : _a.some(
-        (selectedOption) => selectedOption[props.optionValueKey] === option[props.optionValueKey]
-      )) ?? false;
-      return hasOption && !isNullOrUndefined(option[props.optionValueKey]);
-    }
-    const mazInputValue = computed(() => {
-      var _a, _b;
-      if (props.multiple && props.modelValue && Array.isArray(props.modelValue)) {
-        return props.modelValue.map(
-          (value) => {
-            var _a2, _b2;
-            return (_b2 = (_a2 = props.options) == null ? void 0 : _a2.find((option) => option[props.optionValueKey] === value)) == null ? void 0 : _b2[props.optionInputValueKey];
-          }
-        ).join(", ");
-      }
-      return (_b = (_a = props.options) == null ? void 0 : _a.find((option) => option[props.optionValueKey] === props.modelValue)) == null ? void 0 : _b[props.optionInputValueKey];
-    });
-    const listTransition = computed(
-      () => props.listPosition.includes("bottom") ? "maz-slide" : "maz-slideinvert"
-    );
-    const searchQuery = ref("");
-    const query = ref("");
-    function normalizeString(str) {
-      return str.normalize("NFD").replaceAll(/[\u0300-\u036F]/g, "").replaceAll(/[^\dA-Za-z]/g, "");
-    }
-    const searchInValue = (value, query2) => {
-      return query2 && value && normalizeString(value.toString().toLocaleLowerCase().trim()).includes(
-        normalizeString(query2.toLocaleLowerCase().trim())
-      );
-    };
-    watch(
-      () => props.modelValue,
-      (value, oldValue) => {
-      }
-    );
-    function getFilteredOptionWithQuery(query2) {
-      var _a;
-      return query2 ? (_a = props.options) == null ? void 0 : _a.filter((option) => {
-        const searchValue = option[props.optionLabelKey];
-        const searchValue3 = option[props.optionValueKey];
-        const searchValue2 = option[props.optionInputValueKey];
-        return searchInValue(searchValue, query2) || searchInValue(searchValue3, query2) || searchInValue(searchValue2, query2);
-      }) : props.options;
-    }
-    const optionsList = computed(() => getFilteredOptionWithQuery(searchQuery.value));
-    const closeList = async (event) => {
-      var _a;
-      if (event && ("relatedTarget" in event && ((_a = mazSelectElement.value) == null ? void 0 : _a.contains(event.relatedTarget)) || event.type === "keydown")) {
-        return event.preventDefault();
-      }
-      await nextTick();
-      listOpened.value = false;
-      tmpModelValueIndex.value = 0;
-      emits("close", event);
-    };
-    const openList = async (event) => {
-      if (props.disabled || hasListOpened.value)
-        return;
-      event == null ? void 0 : event.preventDefault();
-      listOpened.value = true;
-      await scrollToOptionIndex();
-      emits("focus", event);
-      emits("open", listOpened.value);
-    };
-    function focusMainInput() {
-      var _a, _b;
-      (_b = ((_a = mazInputComponent.value) == null ? void 0 : _a.$el).querySelector("input")) == null ? void 0 : _b.focus();
-    }
-    function toggleList(event) {
-      listOpened.value ? closeList(event) : focusMainInput();
-    }
-    function focusSearchInputAndSetQuery(q) {
-      var _a, _b;
-      searchQuery.value = q;
-      (_b = ((_a = searchInputComponent.value) == null ? void 0 : _a.$el).querySelector("input")) == null ? void 0 : _b.focus();
-    }
-    function searchOptionWithQuery(keyPressed) {
-      var _a;
-      if (keyPressed === "Backspace" && query.value.length > 0) {
-        query.value = query.value.slice(0, -1);
-      } else {
-        query.value += keyPressed;
-      }
-      const filteredOptions = getFilteredOptionWithQuery(query.value);
-      if (filteredOptions == null ? void 0 : filteredOptions.length) {
-        tmpModelValueIndex.value = (_a = optionsList.value) == null ? void 0 : _a.findIndex(
-          (option) => option[props.optionValueKey] === filteredOptions[0][props.optionValueKey]
-        );
-        if (typeof tmpModelValueIndex.value === "number" && tmpModelValueIndex.value >= 0) {
-          scrollToOptionIndex(tmpModelValueIndex.value);
-        }
-      }
-      debounceCallback(() => {
-        query.value = "";
-      }, 1e3);
-    }
-    const mainInputKeyboardHandler = (event) => {
-      const keyPressed = event.key;
-      if (/^[\dA-Za-z]$/.test(keyPressed)) {
-        event.preventDefault();
-        openList(event);
-        props.search ? focusSearchInputAndSetQuery(keyPressed) : searchOptionWithQuery(keyPressed);
-      } else {
-        keyboardHandler(event);
-      }
-    };
-    const keyboardHandler = (event) => {
-      const code = event.code;
-      const isArrow = ["ArrowUp", "ArrowDown"].includes(code);
-      const shouldSelect = ["Enter", "Space"].includes(code);
-      const shouldCloseList = "Escape" === code && hasListOpened.value;
-      if (isArrow) {
-        arrowHandler(event, tmpModelValueIndex.value);
-      } else if (shouldSelect) {
-        enterHandler(event, tmpModelValueIndex.value);
-      } else if (shouldCloseList) {
-        closeList();
-      }
-    };
-    const arrowHandler = (event, currentIndex) => {
-      var _a;
-      event.preventDefault();
-      const code = event.code;
-      if (!hasListOpened.value)
-        openList(event);
-      const optionsLength = (_a = optionsList.value) == null ? void 0 : _a.length;
-      if (!optionsLength) {
-        return;
-      }
-      if (typeof currentIndex === "number") {
-        if (currentIndex === optionsLength - 1 && code === "ArrowDown") {
-          tmpModelValueIndex.value = 0;
-        } else if (currentIndex === 0 && code === "ArrowUp") {
-          tmpModelValueIndex.value = optionsLength - 1;
-        } else {
-          tmpModelValueIndex.value = code === "ArrowDown" ? currentIndex + 1 : currentIndex - 1;
-        }
-      } else {
-        tmpModelValueIndex.value = code === "ArrowDown" ? 0 : optionsLength - 1;
-      }
-      scrollToOptionIndex(tmpModelValueIndex.value);
-    };
-    const enterHandler = (event, currentIndex) => {
-      var _a, _b, _c;
-      event.preventDefault();
-      if (!hasListOpened.value) {
-        return openList(event);
-      }
-      const newValue = currentIndex ? ((_a = optionsList.value) == null ? void 0 : _a[currentIndex]) ?? ((_b = optionsList.value) == null ? void 0 : _b[0]) : (_c = optionsList.value) == null ? void 0 : _c[0];
-      if (!isNullOrUndefined(newValue)) {
-        updateValue(newValue);
-      }
-    };
-    async function scrollToOptionIndex(index) {
-      var _a, _b;
-      await nextTick();
-      if (typeof index !== "number") {
-        updateTmpModelValueIndex();
-      }
-      const selectedIndex = index ?? tmpModelValueIndex.value;
-      if (typeof selectedIndex === "number" && selectedIndex >= 0) {
-        (_b = (_a = optionsListElement.value) == null ? void 0 : _a.querySelectorAll(".m-select-list-item")[selectedIndex]) == null ? void 0 : _b.scrollIntoView({
-          behavior: "auto",
-          block: "nearest",
-          inline: "start"
-        });
-      }
-    }
-    function updateTmpModelValueIndex(inputOption) {
-      var _a;
-      const index = (_a = optionsList.value) == null ? void 0 : _a.findIndex((option) => {
-        var _a2, _b;
-        if (props.multiple && Array.isArray(props.modelValue)) {
-          if (inputOption) {
-            return inputOption[props.optionValueKey] === option[props.optionValueKey];
-          }
-          const values = [...props.modelValue].reverse();
-          return values[0] === option[props.optionValueKey];
-        } else {
-          return ((_b = (_a2 = selectedOptions.value) == null ? void 0 : _a2[0]) == null ? void 0 : _b[props.optionValueKey]) === option[props.optionValueKey];
-        }
-      });
-      tmpModelValueIndex.value = index && index >= 0 ? index : 0;
-    }
-    const updateValue = (inputOption, mustCloseList = true) => {
-      var _a;
-      if (mustCloseList && !props.multiple) {
-        nextTick(() => closeList());
-      }
-      searchQuery.value = "";
-      const isAlreadySelected = (_a = selectedOptions.value) == null ? void 0 : _a.some(
-        (option) => option[props.optionValueKey] === inputOption[props.optionValueKey]
-      );
-      let newValue = selectedOptions.value;
-      if (isAlreadySelected && props.multiple) {
-        newValue = newValue == null ? void 0 : newValue.filter(
-          (option) => option[props.optionValueKey] !== inputOption[props.optionValueKey]
-        );
-      } else if (props.multiple) {
-        newValue.push(inputOption);
-      } else {
-        newValue = [inputOption];
-      }
-      const selectedValues = newValue.map((option) => option[props.optionValueKey]);
-      emits("update:model-value", props.multiple ? selectedValues : selectedValues[0]);
-      emits("selected-option", inputOption);
-      updateTmpModelValueIndex(inputOption);
-      focusMainInput();
-    };
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(
-        "div",
-        {
-          ref_key: "mazSelectElement",
-          ref: mazSelectElement,
-          class: normalizeClass(["m-select", [{ "--is-open": hasListOpened.value, "--disabled": __props.disabled }, props.class]]),
-          style: normalizeStyle(__props.style),
-          onBlurCapture: closeList
-        },
-        [
-          createVNode(MazInput, mergeProps({
-            id: unref(instanceId),
-            ref_key: "mazInputComponent",
-            ref: mazInputComponent,
-            class: "m-select-input"
-          }, _ctx.$attrs, {
-            required: __props.required,
-            "border-active": listOpened.value,
-            color: __props.color,
-            "model-value": mazInputValue.value,
-            autocomplete: "off",
-            size: __props.size,
-            disabled: __props.disabled,
-            onFocus: withModifiers(openList, ["prevent", "stop"]),
-            onClick: withModifiers(openList, ["prevent", "stop"]),
-            onChange: _cache[0] || (_cache[0] = ($event) => emits("change", $event)),
-            onKeydown: mainInputKeyboardHandler
-          }), {
-            "right-icon": withCtx(() => [
-              createElementVNode("button", {
-                tabindex: "-1",
-                type: "button",
-                class: "m-select-input__toggle-button maz-custom",
-                onClick: withModifiers(toggleList, ["stop"])
-              }, [
-                createVNode(unref(ChevronDownIcon), { class: "m-select-chevron maz-text-xl" })
-              ], 8, _hoisted_1)
-            ]),
-            _: 1
-            /* STABLE */
-          }, 16, ["id", "required", "border-active", "color", "model-value", "size", "disabled", "onFocus", "onClick"]),
-          createVNode(Transition, { name: listTransition.value }, {
-            default: withCtx(() => [
-              hasListOpened.value ? (openBlock(), createElementBlock(
-                "div",
-                {
-                  key: 0,
-                  ref_key: "optionsListElement",
-                  ref: optionsListElement,
-                  class: normalizeClass(["m-select-list", {
-                    "--top": __props.listPosition.includes("top"),
-                    "--left": __props.listPosition.includes("left"),
-                    "--right": __props.listPosition.includes("right"),
-                    "--bottom": __props.listPosition.includes("bottom")
-                  }]),
-                  style: normalizeStyle({
-                    maxHeight: `${__props.maxListHeight}px`,
-                    maxWidth: `${__props.maxListWidth}px`
-                  })
-                },
-                [
-                  __props.search ? (openBlock(), createElementBlock("div", _hoisted_2, [
-                    createVNode(MazInput, {
-                      ref_key: "searchInputComponent",
-                      ref: searchInputComponent,
-                      modelValue: searchQuery.value,
-                      "onUpdate:modelValue": [
-                        _cache[1] || (_cache[1] = ($event) => searchQuery.value = $event),
-                        _cache[2] || (_cache[2] = ($event) => tmpModelValueIndex.value = 0)
-                      ],
-                      size: "sm",
-                      color: __props.color,
-                      placeholder: __props.searchPlaceholder,
-                      name: "search",
-                      autocomplete: "off",
-                      tabindex: "-1",
-                      class: "m-select-list__search-input",
-                      onKeydown: keyboardHandler
-                    }, {
-                      "left-icon": withCtx(() => [
-                        createVNode(unref(SearchIcon), { class: "maz-h-[1.3rem] maz-w-[1.3rem]" })
-                      ]),
-                      _: 1
-                      /* STABLE */
-                    }, 8, ["modelValue", "color", "placeholder"])
-                  ])) : createCommentVNode("v-if", true),
-                  createCommentVNode("\n          @slot No results slot - Displayed when no results corresponding with seeach query\n        "),
-                  !optionsList.value || optionsList.value.length <= 0 ? renderSlot(_ctx.$slots, "no-results", { key: 1 }, () => [
-                    createElementVNode("span", _hoisted_3, [
-                      createVNode(unref(NoSymbolIcon), { class: "maz-h-6 maz-w-6 maz-text-normal" })
-                    ])
-                  ], true) : (openBlock(), createElementBlock("div", _hoisted_4, [
-                    (openBlock(true), createElementBlock(
-                      Fragment,
-                      null,
-                      renderList(optionsList.value, (option, i) => {
-                        return openBlock(), createElementBlock("button", {
-                          key: i,
-                          tabindex: "-1",
-                          type: "button",
-                          class: normalizeClass(["m-select-list-item maz-custom", [
-                            {
-                              "--is-keyboard-selected": tmpModelValueIndex.value === i,
-                              "--is-selected": isSelectedOption(option),
-                              "--is-none-value": isNullOrUndefined(option[__props.optionValueKey])
-                            }
-                          ]]),
-                          style: normalizeStyle({ minHeight: `${__props.itemHeight}px` }),
-                          onClick: withModifiers(($event) => updateValue(option), ["prevent", "stop"])
-                        }, [
-                          __props.multiple ? (openBlock(), createBlock(unref(MazCheckbox), {
-                            key: 0,
-                            tabindex: "-1",
-                            "model-value": isSelectedOption(option),
-                            size: "sm",
-                            color: __props.color
-                          }, null, 8, ["model-value", "color"])) : createCommentVNode("v-if", true),
-                          createCommentVNode("\n              @slot Custom option\n                @binding {Object} option\n                @binding {Boolean} is-selected\n            "),
-                          renderSlot(_ctx.$slots, "default", {
-                            option,
-                            isSelected: isSelectedOption(option)
-                          }, () => [
-                            createElementVNode(
-                              "span",
-                              null,
-                              toDisplayString(option[__props.optionLabelKey]),
-                              1
-                              /* TEXT */
-                            )
-                          ], true)
-                        ], 14, _hoisted_5);
-                      }),
-                      128
-                      /* KEYED_FRAGMENT */
-                    ))
-                  ]))
-                ],
-                6
-                /* CLASS, STYLE */
-              )) : createCommentVNode("v-if", true)
-            ]),
-            _: 3
-            /* FORWARDED */
-          }, 8, ["name"])
-        ],
-        38
-        /* CLASS, STYLE, HYDRATE_EVENTS */
-      );
-    };
-  }
-});
-const MazSelect_vue_vue_type_style_index_0_scoped_c313b4a6_lang = "";
-const MazSelect = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-c313b4a6"]]);
-export {
-  MazSelect as M,
-  _export_sfc as _,
-  useInstanceUniqId as u
-};