@evance/evance-ui 1.0.20 → 1.0.22

package/dist/cjs/EvSelect.vue_vue_type_script_setup_true_lang-BTZpX1Hs.cjs

@@ -0,0 +1,829 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+/*! Evance UI v1.0.21 | MIT License */
+const vue = require("vue");
+const EvList_vue_vue_type_script_setup_true_lang = require("./EvList.vue_vue_type_script_setup_true_lang-Djd4-eRK.cjs");
+const EvTextfield_vue_vue_type_script_setup_true_lang = require("./EvTextfield.vue_vue_type_script_setup_true_lang-mnxxPJnD.cjs");
+const ChevronDownIcon = require("./ChevronDownIcon-CXGbtf9r.cjs");
+const props = require("./props-B-0qGG2x.cjs");
+const helpers = require("./helpers-PhIb_S7C.cjs");
+const EvMenu_vue_vue_type_script_setup_true_lang = require("./EvMenu.vue_vue_type_script_setup_true_lang-BF1KnhSR.cjs");
+const EvListItem_vue_vue_type_script_setup_true_lang = require("./EvListItem.vue_vue_type_script_setup_true_lang-BLUhLRsh.cjs");
+const EvVirtualScroll_vue_vue_type_script_setup_true_lang = require("./EvVirtualScroll.vue_vue_type_script_setup_true_lang-0audxStD.cjs");
+const EvSurface_vue_vue_type_script_setup_true_lang = require("./EvSurface.vue_vue_type_script_setup_true_lang-Deh4OQ_i.cjs");
+const EvTag_vue_vue_type_script_setup_true_lang = require("./EvTag.vue_vue_type_script_setup_true_lang-CGUucC7H.cjs");
+const modelProxy = require("./modelProxy-DVRroBt5.cjs");
+const locale = require("./locale-DnxNlaVB.cjs");
+const form = require("./form-uH-hFcoU.cjs");
+class KeyLogger {
+  constructor() {
+    __publicField(this, "lastTime", 0);
+    __publicField(this, "timeToKeep", 1e3);
+    __publicField(this, "value", "");
+  }
+  /**
+   * ## Log
+   * @param e
+   */
+  log(e) {
+    if (!isKeyEventLoggable(e)) {
+      return false;
+    }
+    const now = performance.now();
+    if (now - this.lastTime > this.timeToKeep) {
+      this.value = "";
+    }
+    this.value += e.key.toLowerCase();
+    this.lastTime = now;
+    return true;
+  }
+}
+function isKeyEventLoggable(e) {
+  const isPrintableChar = e.key.length === 1;
+  const noModifier = !e.ctrlKey && !e.metaKey && !e.altKey;
+  return isPrintableChar && noModifier;
+}
+const compositionIgnoreKeys = [
+  "ArrowUp",
+  "ArrowDown",
+  "ArrowRight",
+  "ArrowLeft",
+  "Enter",
+  "Escape",
+  "Tab",
+  " "
+];
+function isComposingIgnoreKey(e) {
+  return e.isComposing && compositionIgnoreKeys.includes(e.key);
+}
+const defaultFilter = (value, query, item) => {
+  if (value == null || query == null) {
+    return -1;
+  }
+  return value.toString().toLocaleLowerCase().indexOf(query.toString().toLocaleLowerCase());
+};
+const makeFilterProps = props.propsFactory(
+  {
+    filterFunction: Function,
+    filterKeyFunctions: Object,
+    filterKeys: [Array, String],
+    filterMode: {
+      type: String,
+      default: "intersection"
+    },
+    noFilter: Boolean
+  },
+  "filter"
+);
+function filterItems(items, query, options) {
+  var _a;
+  const array = [];
+  const filter = (options == null ? void 0 : options.default) ?? defaultFilter;
+  const keys = (options == null ? void 0 : options.filterKeys) ? helpers.wrapInArray(options.filterKeys) : false;
+  const customFiltersLength = Object.keys(
+    (options == null ? void 0 : options.filterKeyFunctions) ?? {}
+  ).length;
+  if (!(items == null ? void 0 : items.length)) {
+    return array;
+  }
+  loop: for (let i = 0; i < items.length; i++) {
+    const [item, transformed = item] = helpers.wrapInArray(items[i]);
+    const customMatches = {};
+    const defaultMatches = {};
+    let match = -1;
+    if (query && !(options == null ? void 0 : options.noFilter)) {
+      if (typeof item === "object") {
+        const filterKeys = keys || Object.keys(transformed);
+        for (const key of filterKeys) {
+          const value = helpers.getPropertyValue(
+            transformed,
+            key,
+            transformed
+          );
+          const keyFilter = (_a = options == null ? void 0 : options.filterKeyFunctions) == null ? void 0 : _a[key];
+          match = keyFilter ? keyFilter(value, query, item) : filter(value, query, item);
+          if (match !== -1 && match !== false) {
+            if (keyFilter) {
+              customMatches[key] = match;
+            } else {
+              defaultMatches[key] = match;
+            }
+          } else if ((options == null ? void 0 : options.filterMode) === "every") {
+            continue loop;
+          }
+        }
+      } else {
+        match = filter(item, query, item);
+        if (match !== -1 && match !== false) {
+          defaultMatches.title = match;
+        }
+      }
+      const defaultMatchesLength = Object.keys(defaultMatches).length;
+      const customMatchesLength = Object.keys(customMatches).length;
+      if (!defaultMatchesLength && !customMatchesLength) {
+        continue;
+      }
+      if ((options == null ? void 0 : options.filterMode) === "union" && customMatchesLength !== customFiltersLength && !defaultMatchesLength) {
+        continue;
+      }
+      if ((options == null ? void 0 : options.filterMode) === "intersection" && (customMatchesLength !== customFiltersLength || !defaultMatchesLength)) {
+        continue;
+      }
+    }
+    array.push({
+      index: i,
+      matches: { ...defaultMatches, ...customMatches }
+    });
+  }
+  return array;
+}
+function useFilter(props2, items, query, options) {
+  const filteredItems = vue.ref([]);
+  const filteredMatches = vue.ref(
+    /* @__PURE__ */ new Map()
+  );
+  const transformedItems = vue.computed(
+    () => vue.unref(items)
+  );
+  vue.watchEffect(() => {
+    const _query = typeof query === "function" ? query() : vue.unref(query);
+    const strQuery = typeof _query !== "string" ? "" : String(_query);
+    const results = filterItems(transformedItems.value, strQuery, {
+      filterKeyFunctions: {
+        ...props2.filterKeyFunctions,
+        ...vue.unref(options == null ? void 0 : options.filterKeyFunctions)
+      },
+      default: props2.filterFunction,
+      filterKeys: props2.filterKeys,
+      filterMode: props2.filterMode,
+      noFilter: props2.noFilter
+    });
+    const originalItems = vue.unref(items);
+    const _filteredItems = [];
+    const _filteredMatches = /* @__PURE__ */ new Map();
+    results.forEach(({ index, matches }) => {
+      const item = originalItems[index];
+      _filteredItems.push(item);
+      _filteredMatches.set(item.value, matches);
+    });
+    filteredItems.value = _filteredItems;
+    filteredMatches.value = _filteredMatches;
+  });
+  function getMatches(item) {
+    return filteredMatches.value.get(item.value);
+  }
+  return { filteredItems, filteredMatches, getMatches };
+}
+const makeEvSelectProps = props.propsFactory(
+  {
+    autoSelectFirst: {
+      type: [Boolean, String]
+    },
+    behavior: {
+      type: String,
+      default: "select"
+    },
+    delimiters: {
+      type: Array,
+      default: [","]
+    },
+    hideItemsEmpty: Boolean,
+    hideSelected: Boolean,
+    itemsEmptyText: {
+      type: String,
+      default: "select.noItemsText"
+    },
+    menuOpen: Boolean,
+    multiple: Boolean,
+    openOnClear: Boolean,
+    search: String,
+    tags: Boolean,
+    ...makeFilterProps({ filterKeys: ["title"] }),
+    ...EvList_vue_vue_type_script_setup_true_lang.makeListItemsProps({
+      itemChildren: false
+    }),
+    ...helpers.omit(
+      EvTextfield_vue_vue_type_script_setup_true_lang.makeEvTextfieldProps({
+        modelValue: null,
+        iconEnd: ChevronDownIcon.ChevronDownIcon,
+        role: "select"
+      }),
+      ["align", "monospace", "type"]
+    )
+  },
+  "EvSelect"
+);
+function useScrolling(listRef, textFieldRef) {
+  const isScrolling = vue.shallowRef(false);
+  let scrollTimeout;
+  function onListScroll(e) {
+    cancelAnimationFrame(scrollTimeout);
+    isScrolling.value = true;
+    scrollTimeout = requestAnimationFrame(() => {
+      scrollTimeout = requestAnimationFrame(() => {
+        isScrolling.value = false;
+      });
+    });
+  }
+  async function finishScrolling() {
+    await new Promise((resolve) => requestAnimationFrame(resolve));
+    await new Promise((resolve) => requestAnimationFrame(resolve));
+    await new Promise((resolve) => requestAnimationFrame(resolve));
+    await new Promise((resolve) => {
+      if (isScrolling.value) {
+        const stop = vue.watch(isScrolling, () => {
+          stop();
+          resolve();
+        });
+      } else {
+        resolve();
+      }
+    });
+  }
+  async function onListKeydown(e) {
+    var _a, _b;
+    if (e.key === "Tab") {
+      (_a = textFieldRef.value) == null ? void 0 : _a.focus();
+      return;
+    }
+    if (!["PageDown", "PageUp", "Home", "End"].includes(e.key)) {
+      return;
+    }
+    const el = (_b = listRef.value) == null ? void 0 : _b.$el;
+    if (!el) {
+      return;
+    }
+    if (e.key === "Home" || e.key === "End") {
+      el.scrollTo({
+        top: e.key === "Home" ? 0 : el.scrollHeight,
+        behavior: "smooth"
+      });
+    }
+    await finishScrolling();
+    const children = el.querySelectorAll(
+      ":scope > :not(.ev-virtual-scroll--spacer)"
+    );
+    if (e.key === "PageDown" || e.key === "Home") {
+      const top = el.getBoundingClientRect().top;
+      for (const child of children) {
+        if (child.getBoundingClientRect().top >= top) {
+          child.focus();
+          break;
+        }
+      }
+    } else {
+      const bottom = el.getBoundingClientRect().bottom;
+      for (const child of [...children].reverse()) {
+        if (child.getBoundingClientRect().bottom <= bottom) {
+          child.focus();
+          break;
+        }
+      }
+    }
+  }
+  return {
+    onListScroll,
+    onListKeydown
+  };
+}
+const _hoisted_1 = {
+  key: 1,
+  class: "ev-select--selected-text"
+};
+const _hoisted_2 = {
+  key: 0,
+  class: "ev-select--selected-comma"
+};
+const _hoisted_3 = {
+  key: 0,
+  class: "ev-select--placeholder"
+};
+const _hoisted_4 = {
+  key: 0,
+  class: "ev-select--list-prefix"
+};
+const _hoisted_5 = {
+  key: 1,
+  class: "ev-select--list-suffix"
+};
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "EvSelect",
+  props: {
+    ...makeEvSelectProps()
+  },
+  emits: [
+    "update:focused",
+    "update:menuOpen",
+    "update:modelValue",
+    "update:search"
+  ],
+  setup(__props, { emit }) {
+    const props2 = __props;
+    const slots = vue.useSlots();
+    const evTextfieldRef = vue.ref();
+    const evTextfieldProps = vue.computed(() => {
+      return helpers.filterComponentProps(EvTextfield_vue_vue_type_script_setup_true_lang._sfc_main, props2);
+    });
+    const isFocused = vue.shallowRef(false);
+    const isPristine = vue.shallowRef(true);
+    const isSearchable = vue.computed(() => props2.behavior !== "select");
+    const listHasFocus = vue.shallowRef(false);
+    const isSelecting = vue.shallowRef(false);
+    const evMenuRef = vue.ref();
+    const menuOpenProxy = modelProxy.useModelProxy(props2, "menuOpen");
+    const isMenuOpen = vue.computed({
+      get: () => menuOpenProxy.value,
+      set: (value) => {
+        var _a;
+        if (menuOpenProxy.value && !value && ((_a = evMenuRef.value) == null ? void 0 : _a.openChildren)) {
+          return;
+        }
+        menuOpenProxy.value = value;
+      }
+    });
+    const isMenuDisabled = vue.computed(() => {
+      return props2.hideItemsEmpty && !items.value.length || !!props2.readonly;
+    });
+    const evListRef = vue.ref();
+    const evVirtualScrollRef = vue.ref();
+    const { items, transformIn, transformOut } = EvList_vue_vue_type_script_setup_true_lang.useItems(props2);
+    const search = modelProxy.useModelProxy(props2, "search", "");
+    const { filteredItems } = useFilter(
+      props2,
+      items,
+      () => isPristine.value || !isSearchable.value ? "" : search.value
+    );
+    const displayItems = vue.computed(() => {
+      if (props2.hideSelected) {
+        return filteredItems.value.filter(
+          (filteredItem) => !model.value.some(
+            (s) => s.value === filteredItem.value
+          )
+        );
+      }
+      return filteredItems.value;
+    });
+    const model = modelProxy.useModelProxy(
+      props2,
+      "modelValue",
+      [],
+      (value) => transformIn(value === null ? [null] : helpers.wrapInArray(value)),
+      (value) => {
+        const transformed = transformOut(value);
+        return props2.multiple ? transformed : transformed[0] ?? null;
+      }
+    );
+    const selections = vue.computed(() => {
+      return model.value.map((value) => {
+        return items.value.find((item) => {
+          return props2.valueComparator(item.value, value.value);
+        }) || value;
+      });
+    });
+    const selectionIndex = vue.shallowRef(-1);
+    const selected = vue.computed(() => {
+      return selections.value.map((selection) => selection.props.value);
+    });
+    const keyLogger = new KeyLogger();
+    const highlightFirst = vue.computed(() => {
+      var _a;
+      const selectFirst = props2.autoSelectFirst === true || props2.autoSelectFirst === "exact" && search.value === ((_a = displayItems.value[0]) == null ? void 0 : _a.title);
+      return selectFirst && displayItems.value.length > 0 && !isPristine.value && !listHasFocus.value;
+    });
+    const form$1 = form.useForm();
+    const { t } = locale.useLocaleFunctions();
+    function onMenuAfterLeave() {
+      var _a;
+      if (isFocused.value) {
+        isPristine.value = true;
+        (_a = evTextfieldRef.value) == null ? void 0 : _a.focus();
+      }
+    }
+    function onListFocusIn(e) {
+      setTimeout(() => {
+        isFocused.value = true;
+        listHasFocus.value = true;
+      });
+    }
+    function onListFocusOut(e) {
+      listHasFocus.value = false;
+    }
+    function onListMouseDown(e) {
+      e.preventDefault();
+    }
+    const { onListScroll, onListKeydown } = useScrolling(evListRef, evTextfieldRef);
+    function onFieldBlur(e) {
+      var _a;
+      if (!((_a = evListRef.value) == null ? void 0 : _a.$el.contains(e.relatedTarget))) {
+        isMenuOpen.value = false;
+      }
+      selectionIndex.value = -1;
+    }
+    function onFieldChange(e) {
+      if (helpers.matchesSelector(evTextfieldRef.value, ":autofill") || helpers.matchesSelector(evTextfieldRef.value, ":-webkit-autofill")) {
+        const item = items.value.find(
+          (item2) => item2.title === e.target.value
+        );
+        if (item) {
+          select(item);
+        }
+      }
+    }
+    function onFieldClear(e) {
+      if (props2.openOnClear) {
+        isMenuOpen.value = true;
+      }
+      search.value = "";
+    }
+    function onFieldInput(e) {
+      search.value = e.target.value;
+    }
+    function onFieldKeydown(e) {
+      var _a, _b, _c, _d, _e;
+      if (!e.key || isComposingIgnoreKey(e) || props2.readonly || (form$1 == null ? void 0 : form$1.isReadonly.value)) {
+        return;
+      }
+      const preventKeys = ["Enter", "ArrowDown", "ArrowUp"];
+      const openerKeys = ["Enter", "ArrowDown"];
+      const escapeKeys = ["Escape"];
+      if (!isSearchable.value) {
+        preventKeys.push(" ", "Home", "End");
+        openerKeys.push(" ");
+        escapeKeys.push("Tab");
+      }
+      if (selectionIndex.value > -1 || preventKeys.includes(e.key)) {
+        e.preventDefault();
+      }
+      if (openerKeys.includes(e.key)) {
+        isMenuOpen.value = true;
+      }
+      if (escapeKeys.includes(e.key)) {
+        isMenuOpen.value = false;
+      }
+      if (!isSearchable.value) {
+        keydownBehaviorSelect(e);
+        return;
+      }
+      if (["Enter", "Tab"].includes(e.key)) {
+        if (highlightFirst.value) {
+          select(displayItems.value[0]);
+        } else if (!props2.multiple && props2.behavior === "combobox") {
+          select(EvList_vue_vue_type_script_setup_true_lang.transformItem(props2, search.value));
+        }
+      }
+      if (e.key === "ArrowDown" && highlightFirst.value) {
+        (_a = evListRef.value) == null ? void 0 : _a.focus("next");
+      }
+      if (!props2.multiple) {
+        return;
+      }
+      const selectionStart = evTextfieldRef.value.selectionStart;
+      const length = model.value.length;
+      if (["Backspace", "Delete"].includes(e.key)) {
+        if (selectionIndex.value < 0) {
+          if (e.key === "Backspace" && !search.value) {
+            selectionIndex.value = length - 1;
+          }
+          return;
+        }
+        const originalSelectionIndex = selectionIndex.value;
+        const selectedItem = model.value[selectionIndex.value];
+        if (selectedItem && !selectedItem.props.disabled) {
+          select(selectedItem, false);
+        }
+        selectionIndex.value = originalSelectionIndex >= length - 1 ? length - 2 : originalSelectionIndex;
+      }
+      if (e.key === "ArrowLeft") {
+        if (selectionIndex.value < 0 && selectionStart > 0) {
+          return;
+        }
+        const previous = selectionIndex.value > -1 ? selectionIndex.value - 1 : length - 1;
+        if (model.value[previous]) {
+          selectionIndex.value = previous;
+        } else {
+          selectionIndex.value = -1;
+          (_d = evTextfieldRef.value) == null ? void 0 : _d.input.setSelectionRange(
+            (_b = search.value) == null ? void 0 : _b.length,
+            (_c = search.value) == null ? void 0 : _c.length
+          );
+        }
+      }
+      if (e.key === "ArrowRight") {
+        if (selectionIndex.value < 0) {
+          return;
+        }
+        const next = selectionIndex.value + 1;
+        if (model.value[next]) {
+          selectionIndex.value = next;
+        } else {
+          selectionIndex.value = -1;
+          (_e = evTextfieldRef.value) == null ? void 0 : _e.input.setSelectionRange(0, 0);
+        }
+      }
+      if (props2.behavior !== "combobox") {
+        return;
+      }
+      if ((props2.delimiters.includes(e.key) || e.key === "Enter") && search.value) {
+        e.preventDefault();
+        select(EvList_vue_vue_type_script_setup_true_lang.transformItem(props2, search.value));
+        search.value = "";
+      }
+    }
+    function keydownBehaviorSelect(e) {
+      var _a, _b, _c;
+      if (e.key === "Home") {
+        (_a = evListRef.value) == null ? void 0 : _a.focus("first");
+      } else if (e.key === "End") {
+        (_b = evListRef.value) == null ? void 0 : _b.focus("last");
+      }
+      if (props2.multiple || !keyLogger.log(e)) {
+        return;
+      }
+      const itemIndex = items.value.findIndex(
+        (item) => item.title.toLowerCase().startsWith(keyLogger.value)
+      );
+      if (itemIndex >= 0) {
+        model.value = [items.value[itemIndex]];
+        if (isMenuOpen.value) {
+          const scrollIndex = itemIndex > 0 ? itemIndex - 1 : 0;
+          (_c = evVirtualScrollRef.value) == null ? void 0 : _c.scrollToIndex(scrollIndex);
+        }
+      }
+    }
+    function onFieldMousedown() {
+      if (isMenuDisabled.value) {
+        return;
+      }
+      isMenuOpen.value = !isMenuOpen.value;
+    }
+    function select(item, set = true) {
+      if (item.props.disabled) {
+        return;
+      }
+      if (props2.multiple) {
+        const index = model.value.findIndex((selection) => {
+          return props2.valueComparator(selection.value, item.value);
+        });
+        const add = set == null ? !~index : set;
+        if (~index) {
+          const value = add ? [...model.value, item] : [...model.value];
+          value.splice(index, 1);
+          model.value = value;
+        } else if (add) {
+          model.value = [...model.value, item];
+        }
+        search.value = "";
+      } else {
+        const add = set !== false;
+        model.value = add ? [item] : [];
+        search.value = item.title;
+        vue.nextTick(() => {
+          isMenuOpen.value = false;
+          isPristine.value = true;
+          isSelecting.value = false;
+          evTextfieldRef.value.input.blur();
+          isFocused.value = false;
+        });
+      }
+      selectionIndex.value = -1;
+    }
+    const fieldValue = vue.computed(() => {
+      if (isSearchable.value) {
+        return search.value;
+      }
+      return model.value.map((value) => value.props.value).join(", ");
+    });
+    function onModelValueUpdate(value) {
+      if (value === null || value === "" && !props2.multiple) {
+        model.value = [];
+      }
+    }
+    function itemProps(item, index, itemRef) {
+      return vue.mergeProps(item.props, {
+        ref: itemRef,
+        key: index,
+        onClick: () => select(item)
+      });
+    }
+    function createTagProps(item) {
+      return {
+        "onClick:close"(e) {
+          e.stopPropagation();
+          e.preventDefault();
+          select(item, false);
+        },
+        onKeydown(e) {
+          if (e.key !== "Enter" && e.key !== " ") {
+            return;
+          }
+          e.preventDefault();
+          e.stopPropagation();
+          select(item, false);
+        },
+        onMousedown(e) {
+          e.preventDefault();
+          e.stopPropagation();
+        }
+      };
+    }
+    vue.watch(search, (value, oldValue) => {
+      if (!isFocused.value || isSelecting.value) {
+        return;
+      }
+      if (value) {
+        isMenuOpen.value = true;
+      }
+      isPristine.value = !value;
+    });
+    vue.watch(isFocused, (value, oldValue) => {
+      if (value === oldValue) {
+        return;
+      }
+      emit("update:focused", value);
+    });
+    vue.watch(isMenuOpen, () => {
+      if (props2.hideSelected || !isMenuOpen.value || !model.value.length || !helpers.Browser.hasWindow) {
+        return;
+      }
+      const lastSelectedItem = model.value[model.value.length - 1];
+      const index = displayItems.value.findIndex(
+        (item) => item.value === lastSelectedItem.value
+      );
+      window.requestAnimationFrame(() => {
+        var _a;
+        index >= 0 && ((_a = evVirtualScrollRef.value) == null ? void 0 : _a.scrollToIndex(index));
+      });
+    });
+    const validationValue = vue.computed(() => model.externalValue);
+    const isPlaceholder = vue.computed(
+      () => !selections.value.length && !!slots.placeholder
+    );
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(vue.unref(EvTextfield_vue_vue_type_script_setup_true_lang._sfc_main), vue.mergeProps({
+        ref_key: "evTextfieldRef",
+        ref: evTextfieldRef
+      }, evTextfieldProps.value, {
+        focused: isFocused.value,
+        "onUpdate:focused": _cache[1] || (_cache[1] = ($event) => isFocused.value = $event),
+        class: [
+          "ev-select",
+          {
+            "is-single": !props2.multiple,
+            "is-multiple": props2.multiple,
+            "is-searchable": isSearchable.value,
+            "is-selecting": selectionIndex.value > -1,
+            "is-placeholder": isPlaceholder.value
+          }
+        ],
+        "model-value": fieldValue.value,
+        readonly: !isSearchable.value || props2.readonly,
+        placeholder: vue.unref(model).length ? void 0 : props2.placeholder,
+        "validation-value": validationValue.value,
+        onBlur: onFieldBlur,
+        onChange: onFieldChange,
+        "onClick:clear": onFieldClear,
+        onInput: onFieldInput,
+        onKeydown: onFieldKeydown,
+        "onMousedown:control": onFieldMousedown,
+        "onUpdate:modelValue": onModelValueUpdate
+      }), vue.createSlots({
+        default: vue.withCtx(() => [
+          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(selections.value, (item, index) => {
+            return vue.openBlock(), vue.createElementBlock("div", {
+              key: item.key,
+              class: vue.normalizeClass([
+                "ev-select--selected",
+                {
+                  "is-selected": index === selectionIndex.value
+                }
+              ])
+            }, [
+              vue.renderSlot(_ctx.$slots, "selection", vue.normalizeProps(vue.guardReactiveProps({ item, index })), () => [
+                props2.tags ? (vue.openBlock(), vue.createBlock(vue.unref(EvTag_vue_vue_type_script_setup_true_lang._sfc_main), vue.mergeProps({
+                  key: 0,
+                  closable: props2.multiple
+                }, createTagProps(item), {
+                  text: item.title
+                }), null, 16, ["closable", "text"])) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_1, [
+                  vue.createTextVNode(vue.toDisplayString(item.title) + " ", 1),
+                  props2.multiple && index < selections.value.length - 1 ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2, ",")) : vue.createCommentVNode("", true)
+                ]))
+              ])
+            ], 2);
+          }), 128)),
+          isPlaceholder.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
+            vue.renderSlot(_ctx.$slots, "placeholder")
+          ])) : vue.createCommentVNode("", true),
+          vue.createVNode(vue.unref(EvMenu_vue_vue_type_script_setup_true_lang._sfc_main), {
+            ref_key: "evMenuRef",
+            ref: evMenuRef,
+            modelValue: isMenuOpen.value,
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isMenuOpen.value = $event),
+            class: "ev-select--menu",
+            "max-height": "310",
+            disabled: isMenuDisabled.value,
+            activator: "parent",
+            "close-on-content-click": false,
+            "open-on-click": false,
+            onAfterLeave: onMenuAfterLeave
+          }, {
+            default: vue.withCtx(() => [
+              vue.createVNode(vue.unref(EvSurface_vue_vue_type_script_setup_true_lang._sfc_main), {
+                elevation: "overlay",
+                scrollable: ""
+              }, {
+                default: vue.withCtx(() => [
+                  vue.unref(slots)["list-prefix"] ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
+                    vue.renderSlot(_ctx.$slots, "list-prefix")
+                  ])) : vue.createCommentVNode("", true),
+                  vue.createVNode(vue.unref(EvList_vue_vue_type_script_setup_true_lang._sfc_main), {
+                    ref_key: "evListRef",
+                    ref: evListRef,
+                    class: "ev-select--list",
+                    selected: selected.value,
+                    "select-strategy": props2.multiple ? "multi-any" : "single-any",
+                    tabindex: "-1",
+                    onFocusin: onListFocusIn,
+                    onFocusout: onListFocusOut,
+                    onKeydown: vue.unref(onListKeydown),
+                    onMousedown: onListMouseDown,
+                    onScrollPassive: vue.unref(onListScroll)
+                  }, {
+                    default: vue.withCtx(() => [
+                      vue.renderSlot(_ctx.$slots, "items-prefix"),
+                      !displayItems.value.length && !props2.hideItemsEmpty ? vue.renderSlot(_ctx.$slots, "items-empty", { key: 0 }, () => [
+                        vue.createVNode(vue.unref(EvListItem_vue_vue_type_script_setup_true_lang._sfc_main), {
+                          title: vue.unref(t)(props2.itemsEmptyText)
+                        }, null, 8, ["title"])
+                      ]) : vue.createCommentVNode("", true),
+                      vue.createVNode(vue.unref(EvVirtualScroll_vue_vue_type_script_setup_true_lang._sfc_main), {
+                        ref_key: "evVirtualScrollRef",
+                        ref: evVirtualScrollRef,
+                        renderless: "",
+                        items: displayItems.value
+                      }, {
+                        default: vue.withCtx(({ item, index, itemRef }) => [
+                          vue.renderSlot(_ctx.$slots, "item", vue.normalizeProps(vue.guardReactiveProps({
+                            item,
+                            index,
+                            props: itemProps(item, index, itemRef)
+                          })), () => [
+                            (vue.openBlock(), vue.createBlock(vue.unref(EvListItem_vue_vue_type_script_setup_true_lang._sfc_main), vue.mergeProps({ ref: itemRef }, item.props, {
+                              key: index,
+                              onClick: ($event) => select(item, null)
+                            }), null, 16, ["onClick"]))
+                          ])
+                        ]),
+                        _: 3
+                      }, 8, ["items"]),
+                      vue.renderSlot(_ctx.$slots, "items-suffix")
+                    ]),
+                    _: 3
+                  }, 8, ["selected", "select-strategy", "onKeydown", "onScrollPassive"]),
+                  vue.unref(slots)["list-suffix"] ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, [
+                    vue.renderSlot(_ctx.$slots, "list-suffix")
+                  ])) : vue.createCommentVNode("", true)
+                ]),
+                _: 3
+              })
+            ]),
+            _: 3
+          }, 8, ["modelValue", "disabled"])
+        ]),
+        _: 2
+      }, [
+        props2.label || vue.unref(slots).label ? {
+          name: "label",
+          fn: vue.withCtx(() => [
+            vue.renderSlot(_ctx.$slots, "label", {}, () => [
+              vue.createTextVNode(vue.toDisplayString(props2.label), 1)
+            ])
+          ]),
+          key: "0"
+        } : void 0,
+        vue.unref(slots).prefix ? {
+          name: "prefix",
+          fn: vue.withCtx(() => [
+            vue.renderSlot(_ctx.$slots, "prefix")
+          ]),
+          key: "1"
+        } : void 0,
+        vue.unref(slots).suffix ? {
+          name: "suffix",
+          fn: vue.withCtx(() => [
+            vue.renderSlot(_ctx.$slots, "suffix")
+          ]),
+          key: "2"
+        } : void 0
+      ]), 1040, ["focused", "class", "model-value", "readonly", "placeholder", "validation-value"]);
+    };
+  }
+});
+exports.KeyLogger = KeyLogger;
+exports._sfc_main = _sfc_main;
+exports.isComposingIgnoreKey = isComposingIgnoreKey;
+exports.isKeyEventLoggable = isKeyEventLoggable;
+exports.makeEvSelectProps = makeEvSelectProps;
+//# sourceMappingURL=EvSelect.vue_vue_type_script_setup_true_lang-BTZpX1Hs.cjs.map