maz-ui 3.19.2 → 3.19.3

package/components/chunks/MazSelect-c5c3f874.mjs

@@ -1,444 +0,0 @@
-import "../assets/MazSelect.css";
-import { ref, defineComponent, defineAsyncComponent, getCurrentInstance, computed, onBeforeMount, watch, nextTick, openBlock, createElementBlock, normalizeClass, createVNode, mergeProps, unref, withModifiers, withCtx, createElementVNode, Transition, normalizeStyle, createCommentVNode, renderSlot, Fragment, renderList, toDisplayString } from "vue";
-import MazInput from "./MazInput-15f3e149.mjs";
-import { u as useInstanceUniqId, _ as _export_sfc } from "./MazPhoneNumberInput-901c4fa6.mjs";
-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({
-  __name: "MazSelect",
-  props: {
-    modelValue: {
-      type: [Number, String, Boolean],
-      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 },
-    color: {
-      type: String,
-      default: "primary"
-    },
-    itemHeight: { type: Number, default: 40 },
-    maxListHeight: { type: Number, default: 240 },
-    maxListWidth: { type: Number, default: void 0 },
-    size: {
-      type: String,
-      default: "md",
-      validator: (value) => {
-        return ["mini", "xs", "sm", "md", "lg", "xl"].includes(value);
-      }
-    },
-    search: { type: Boolean, default: false },
-    searchPlaceholder: { type: String, default: "Search in options" }
-  },
-  emits: [
-    "close",
-    "open",
-    "blur",
-    "focus",
-    "change",
-    "update:model-value",
-    /** On selected value, returns the option object */
-    "selected-option"
-  ],
-  setup(__props, { emit: __emit }) {
-    const SearchIcon = defineAsyncComponent(() => import("./magnifying-glass-6a0dd1a2.mjs"));
-    const ChevronDownIcon = defineAsyncComponent(() => import("./chevron-down-7a070b10.mjs"));
-    const NoSymbolIcon = defineAsyncComponent(() => import("./no-symbol-6173a20b.mjs"));
-    const instance = getCurrentInstance();
-    const props = __props;
-    const emits = __emit;
-    const listOpened = ref(false);
-    const tmpModelValueIndex = ref();
-    const hasListOpened = computed(() => listOpened.value || props.open);
-    const instanceId = useInstanceUniqId({
-      componentName: "MazSelect",
-      instance,
-      providedId: props.id
-    });
-    onBeforeMount(() => {
-      var _a, _b;
-      if (!((_a = props.options) == null ? void 0 : _a.length)) {
-        console.warn("[maz-ui](MazSelect) you must provide options");
-      }
-      if (selectedOption.value) {
-        tmpModelValueIndex.value = (_b = props.options) == null ? void 0 : _b.findIndex(
-          (option) => {
-            var _a2;
-            return option[props.optionValueKey] === ((_a2 = selectedOption.value) == null ? void 0 : _a2[props.optionValueKey]);
-          }
-        );
-      }
-    });
-    const mazSelectElement = ref();
-    const mazInputComponent = ref();
-    const searchInputComponent = ref();
-    const optionsListElement = ref();
-    const selectedOption = computed(
-      () => {
-        var _a;
-        return (_a = props.options) == null ? void 0 : _a.find((option) => props.modelValue === option[props.optionValueKey]);
-      }
-    );
-    const isNullOrUndefined = (value) => {
-      return value === void 0 || value === null;
-    };
-    const mazInputValue = computed(() => {
-      var _a, _b, _c;
-      return isNullOrUndefined((_a = selectedOption.value) == null ? void 0 : _a[props.optionValueKey]) ? void 0 : ((_b = selectedOption.value) == null ? void 0 : _b[props.optionInputValueKey]) ?? ((_c = selectedOption.value) == null ? void 0 : _c[props.optionLabelKey]);
-    });
-    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) => {
-        if (value && value !== oldValue) {
-          scrollToSelected();
-          updateTmpModelValueIndex();
-        }
-      }
-    );
-    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) => {
-      event == null ? void 0 : event.preventDefault();
-      if (props.disabled)
-        return;
-      listOpened.value = true;
-      await scrollToSelected();
-      emits("focus", event);
-      emits("open", listOpened.value);
-    };
-    function toggleList(event) {
-      var _a, _b;
-      return listOpened.value ? closeList(event) : ((_b = (_a = mazInputComponent.value) == null ? void 0 : _a.$el.querySelector("input")) == null ? void 0 : _b.focus()) ?? openList();
-    }
-    function focusSearchInputAndSetQuery(q) {
-      var _a;
-      searchQuery.value = q;
-      (_a = searchInputComponent.value) == null ? void 0 : _a.input.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]
-        );
-        scrollToSelected(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 isEnter = "Enter" === code;
-      const isEscape = "Escape" === code && hasListOpened.value;
-      if (isArrow) {
-        arrowHandler(event, tmpModelValueIndex.value);
-      } else if (isEnter) {
-        enterHandler(event, tmpModelValueIndex.value);
-      } else if (isEscape) {
-        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;
-      }
-      scrollToSelected(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 scrollToSelected(index) {
-      var _a, _b, _c;
-      await nextTick();
-      const selectedIndex = index ?? ((_a = optionsList.value) == null ? void 0 : _a.findIndex(
-        (option) => {
-          var _a2;
-          return ((_a2 = selectedOption.value) == null ? void 0 : _a2[props.optionValueKey]) === option[props.optionValueKey];
-        }
-      ));
-      if (typeof selectedIndex === "number") {
-        if (!tmpModelValueIndex.value)
-          tmpModelValueIndex.value = selectedIndex;
-        (_c = (_b = optionsListElement.value) == null ? void 0 : _b.querySelectorAll(".m-select-list-item")[selectedIndex]) == null ? void 0 : _c.scrollIntoView({
-          behavior: "auto",
-          block: "nearest",
-          inline: "start"
-        });
-      }
-    }
-    function updateTmpModelValueIndex() {
-      var _a;
-      const index = (_a = optionsList.value) == null ? void 0 : _a.findIndex(
-        (option) => selectedOption[props.optionValueKey] === option[props.optionValueKey]
-      );
-      tmpModelValueIndex.value = index && index >= 0 ? index : void 0;
-    }
-    const updateValue = (selectedOption2, mustCloseList = true) => {
-      if (mustCloseList) {
-        nextTick(() => closeList());
-      }
-      searchQuery.value = "";
-      emits("update:model-value", selectedOption2[props.optionValueKey]);
-      emits("selected-option", selectedOption2);
-      updateTmpModelValueIndex();
-    };
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(
-        "div",
-        {
-          ref_key: "mazSelectElement",
-          ref: mazSelectElement,
-          class: normalizeClass(["m-select", { "--is-open": hasListOpened.value, "--disabled": __props.disabled }]),
-          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"]),
-            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"]),
-          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(" No results slot - Displayed when no results corresponding with seeach query "),
-                  !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) => {
-                        var _a, _b, _c;
-                        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": ((_a = selectedOption.value) == null ? void 0 : _a[__props.optionValueKey]) === option[__props.optionValueKey] && !isNullOrUndefined(option[__props.optionValueKey]),
-                              "--is-none-value": isNullOrUndefined(option[__props.optionValueKey])
-                            },
-                            `--${__props.color}`
-                          ]]),
-                          style: normalizeStyle({ minHeight: `${__props.itemHeight}px` }),
-                          onClick: withModifiers(($event) => updateValue(option), ["prevent", "stop"])
-                        }, [
-                          renderSlot(_ctx.$slots, "default", {
-                            option,
-                            isSelected: ((_b = selectedOption.value) == null ? void 0 : _b[__props.optionValueKey]) === option[__props.optionValueKey],
-                            selectedOption: (_c = selectedOption.value) == null ? void 0 : _c[__props.optionValueKey]
-                          }, () => [
-                            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"])
-        ],
-        34
-        /* CLASS, HYDRATE_EVENTS */
-      );
-    };
-  }
-});
-const MazSelect_vue_vue_type_style_index_0_scoped_2589528b_lang = "";
-const MazSelect = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-2589528b"]]);
-export {
-  MazSelect as default
-};