@rotki/ui-library 2.24.0 → 2.25.0

package/dist/components/forms/auto-complete/RuiAutoComplete.vue_vue_type_script_setup_true_lang.js

@@ -5,9 +5,10 @@ import RuiButton_default from "../../buttons/button/RuiButton.js";
 import { useFormTextDetail } from "../../../utils/form-text-detail.js";
 import { Placement } from "../../../composables/floating.js";
 import RuiMenu_default from "../../overlays/menu/RuiMenu.js";
-import RuiChip_default from "../../chips/RuiChip.js";
-import { getNonRootAttrs, getRootAttrs, getTextToken } from "../../../utils/helpers.js";
+import { getNonRootAttrs, getRootAttrs } from "../../../utils/helpers.js";
 import { autoCompleteStyles } from "./auto-complete-styles.js";
+import RuiAutoCompleteOptionList_default from "./RuiAutoCompleteOptionList.js";
+import RuiAutoCompleteSelection_default from "./RuiAutoCompleteSelection.js";
 import { useDropdownMenu, useDropdownOptionProperty } from "../../../composables/dropdown-menu.js";
 import { useAutoCompleteFocus } from "../../../composables/forms/auto-complete/focus.js";
 import { useAutoCompleteKeyboardNavigation } from "../../../composables/forms/auto-complete/keyboard-navigation.js";
@@ -15,7 +16,7 @@ import { useAutoCompleteSearch } from "../../../composables/forms/auto-complete/
 import { useAutoCompleteValue } from "../../../composables/forms/auto-complete/value.js";
 import "../../../composables/forms/auto-complete/index.js";
 import { isEqual } from "../../../utils/is-equal.js";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, guardReactiveProps, isRef, mergeModels, mergeProps, nextTick, normalizeClass, normalizeProps, normalizeStyle, openBlock, ref, renderList, renderSlot, toDisplayString, unref, useModel, useSlots, useTemplateRef, watch, withCtx, withKeys, withModifiers } from "vue";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, guardReactiveProps, isRef, mergeModels, mergeProps, nextTick, normalizeClass, normalizeProps, normalizeStyle, openBlock, ref, renderSlot, shallowRef, toDisplayString, unref, useModel, useSlots, useTemplateRef, watch, withCtx, withKeys, withModifiers } from "vue";
 import { useFocus, useFocusWithin } from "@vueuse/core";
 import { get as get$1, set as set$1 } from "@vueuse/shared";
 //#region src/components/forms/auto-complete/RuiAutoComplete.vue?vue&type=script&setup=true&lang.ts
@@ -33,24 +34,18 @@ var _hoisted_2 = {
 	"data-id": "placeholder",
 	class: "flex-1 min-w-0 pointer-events-none"
 };
-var _hoisted_3 = { class: "flex" };
-var _hoisted_4 = [
+var _hoisted_3 = [
 	"disabled",
 	"value",
 	"placeholder",
 	"aria-invalid"
 ];
-var _hoisted_5 = {
-	class: "sticky top-0 z-10 bg-white dark:bg-rui-grey-900",
-	"data-id": "group-header"
-};
-var _hoisted_6 = { class: "px-3 py-1 text-xs uppercase tracking-wide text-rui-text-secondary" };
-var _hoisted_7 = {
+var _hoisted_4 = {
 	key: 0,
 	class: "p-4",
 	"data-id": "no-data"
 };
-var _hoisted_8 = {
+var _hoisted_5 = {
 	key: 2,
 	class: "bg-white dark:bg-rui-grey-900 border-t border-black/[0.12] dark:border-white/[0.12] pr-[var(--rui-scrollbar-gutter,15px)] -mb-2",
 	"data-id": "footer"
@@ -169,7 +164,10 @@ var RuiAutoComplete_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 		});
 		const textInput = useTemplateRef("textInput");
 		const activator = useTemplateRef("activator");
-		const menuRef = useTemplateRef("menuRef");
+		const menuRef = shallowRef(null);
+		function setMenuRef(element) {
+			set$1(menuRef, element instanceof HTMLElement ? element : null);
+		}
 		const menuWrapperRef = useTemplateRef("menuWrapperRef");
 		const { focused: activatorFocusedWithin } = useFocusWithin(activator);
 		const { focused: menuWrapperFocusedWithin } = useFocusWithin(menuWrapperRef);
@@ -204,7 +202,7 @@ var RuiAutoComplete_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 			updateInternalSearch
 		});
 		const resolvedItemHeight = __props.itemHeight ?? (__props.dense ? 30 : 48);
-		const { containerProps, wrapperProps, renderedData, menuWidth, isActiveItem, itemIndexInValue, highlightedIndex, moveHighlight, applyHighlighted, optionsWithSelectedHidden, userNavigated, groupedOptions, isGrouped, isItemDisabled } = useDropdownMenu({
+		const { containerProps, wrapperProps, renderedData, menuWidth, isActiveItem, itemIndexInValue, modelHighlightedIndex, moveHighlight, applyHighlighted, optionsWithSelectedHidden, modelUserNavigated, groupedOptions, isGrouped, isItemDisabled } = useDropdownMenu({
 			itemHeight: resolvedItemHeight,
 			keyAttr: __props.keyAttr,
 			textAttr: __props.textAttr,
@@ -219,7 +217,9 @@ var RuiAutoComplete_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 			getText,
 			getIdentifier,
 			groupBy: () => __props.groupBy,
-			itemDisabled: () => __props.itemDisabled
+			itemDisabled: () => __props.itemDisabled,
+			prependWidth: __props.prependWidth,
+			appendWidth: __props.appendWidth
 		});
 		const { focusedValueIndex, moveSelectedValueHighlight, onEnter, onInputDeletePressed, onTab, setValueFocus } = useAutoCompleteKeyboardNavigation({
 			chips: () => __props.chips,
@@ -231,7 +231,7 @@ var RuiAutoComplete_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 			clear,
 			filteredOptions,
 			getText,
-			highlightedIndex,
+			highlightedIndex: modelHighlightedIndex,
 			internalSearch,
 			isOpen,
 			removeValue: (item) => {
@@ -239,7 +239,7 @@ var RuiAutoComplete_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 			},
 			searchInputFocused,
 			setSearchAsValue,
-			userNavigated,
+			userNavigated: modelUserNavigated,
 			value
 		});
 		const { anyFocused: focusAnyFocused, inputClass: focusInputClass, onActivatorFocused: focusOnActivatorFocused, onInputFocused: focusOnInputFocused, setInputFocus: focusSetInputFocus } = useAutoCompleteFocus({
@@ -262,6 +262,10 @@ var RuiAutoComplete_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 		const menuMinHeight = computed(() => Math.min(5, get$1(optionsWithSelectedHidden).length) * resolvedItemHeight);
 		const { hasError, hasSuccess } = useFormTextDetail(() => __props.errorMessages, () => __props.successMessages);
 		const valueSet = computed(() => get$1(value).length > 0);
+		/**
+		* True while the consumer's `#placeholder` slot holds the resting content
+		* area, where the resting label would overlap it and so hides instead.
+		*/
 		const placeholderSlotActive = computed(() => Boolean(slots.placeholder) && !get$1(valueSet) && !get$1(searchInputFocused));
 		const usedPlaceholder = computed(() => {
 			if (get$1(searchInputFocused)) return __props.placeholder;
@@ -309,14 +313,15 @@ var RuiAutoComplete_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 				else updateInternalSearch();
 				set$1(value, [val]);
 			}
-			if (!isMultiple) if (!skipRefocused) {
-				set$1(activatorFocused, true);
-				get$1(activator)?.focus();
-				await nextTick(() => {
-					set$1(isOpen, false);
-				});
-			} else set$1(isOpen, false);
-			else if (!skipRefocused) set$1(searchInputFocused, true);
+			if (!isMultiple) {
+				if (!skipRefocused) {
+					set$1(activatorFocused, true);
+					get$1(activator)?.focus();
+					await nextTick(() => {
+						set$1(isOpen, false);
+					});
+				} else set$1(isOpen, false);
+			} else if (!skipRefocused) set$1(searchInputFocused, true);
 		}
 		function setSearchAsValue() {
 			const searchToBeValue = get$1(internalSearch);
@@ -368,12 +373,21 @@ var RuiAutoComplete_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 		function closeMenu() {
 			set$1(isOpen, false);
 		}
-		watch(() => __props.options, (curr, old) => {
-			if (curr === old || __props.customValue) return;
-			if (isEqual(curr, old)) return;
+		/**
+		* Reconciles the selection against a new set of options, comparing by
+		* reference before by value so an unchanged list costs nothing.
+		*
+		* Only a selection the previous options could resolve is reconciled: a value
+		* that was already unresolvable is one the consumer set before its options
+		* arrived, since an async list starts empty, and clearing it here would
+		* discard a legitimate value.
+		*/
+		function onOptionsChanged(curr, old) {
+			if (curr === old || __props.customValue || isEqual(curr, old)) return;
 			if (!get$1(multiple) && resolveIn(old).length === 0) return;
 			setSelected(get$1(value));
-		});
+		}
+		watch(() => __props.options, onOptionsChanged);
 		const menuFloatingOptions = computed(() => ({
 			placement: Placement.bottomStart,
 			...__props.menuOptions?.options
@@ -387,7 +401,7 @@ var RuiAutoComplete_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(RuiMenu_default, mergeProps({
 				modelValue: unref(isOpen),
-				"onUpdate:modelValue": _cache[20] || (_cache[20] = ($event) => isRef(isOpen) ? isOpen.value = $event : null)
+				"onUpdate:modelValue": _cache[19] || (_cache[19] = ($event) => isRef(isOpen) ? isOpen.value = $event : null)
 			}, {
 				...unref(getRootAttrs)(_ctx.$attrs, []),
 				...__props.menuOptions
@@ -395,8 +409,8 @@ var RuiAutoComplete_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 				class: unref(ui).wrapper({ class: unref(cn)(_ctx.$attrs.class) }),
 				options: unref(menuFloatingOptions),
 				"close-on-content-click": false,
-				"full-width": true,
-				"persist-on-activator-click": true,
+				"full-width": "",
+				"persist-on-activator-click": "",
 				"menu-class": [{ hidden: unref(optionsWithSelectedHidden).length === 0 && __props.customValue && !slots["no-data"] }, __props.menuOptions?.menuClass],
 				"error-messages": __props.errorMessages,
 				"success-messages": __props.successMessages,
@@ -443,8 +457,8 @@ var RuiAutoComplete_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 						_cache[12] || (_cache[12] = withKeys(($event) => unref(moveSelectedValueHighlight)($event, true), ["right"])),
 						_cache[13] || (_cache[13] = withKeys(withModifiers(($event) => unref(moveHighlight)(true), ["prevent"]), ["up"])),
 						_cache[14] || (_cache[14] = withKeys(withModifiers(($event) => unref(moveHighlight)(false), ["prevent"]), ["down"])),
-						_cache[15] || (_cache[15] = withKeys(withModifiers(($event) => highlightedIndex.value = 0, ["prevent"]), ["home"])),
-						_cache[16] || (_cache[16] = withKeys(withModifiers(($event) => highlightedIndex.value = unref(optionsWithSelectedHidden).length - 1, ["prevent"]), ["end"]))
+						_cache[15] || (_cache[15] = withKeys(withModifiers(($event) => modelHighlightedIndex.value = 0, ["prevent"]), ["home"])),
+						_cache[16] || (_cache[16] = withKeys(withModifiers(($event) => modelHighlightedIndex.value = unref(optionsWithSelectedHidden).length - 1, ["prevent"]), ["end"]))
 					]
 				}), [
 					(unref(outlined) || !unref(valueSet) && !unref(searchInputFocused)) && !unref(placeholderSlotActive) ? (openBlock(), createElementBlock("span", {
@@ -462,28 +476,34 @@ var RuiAutoComplete_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 							disabled: __props.disabled,
 							readOnly: __props.readOnly
 						})))])) : createCommentVNode("", true),
-						(openBlock(true), createElementBlock(Fragment, null, renderList(unref(value), (item, i) => {
-							return openBlock(), createElementBlock(Fragment, { key: unref(getIdentifier)(item) }, [__props.chips ? (openBlock(), createBlock(RuiChip_default, mergeProps({
-								key: unref(getTextToken)(unref(getIdentifier)(item)),
-								tabindex: "-1",
-								size: __props.dense ? "sm" : "md",
-								closeable: "",
-								class: { "leading-3": __props.dense },
-								clickable: ""
-							}, { ref_for: true }, chipAttrs(item, i)), {
-								default: withCtx(() => [createElementVNode("div", _hoisted_3, [renderSlot(_ctx.$slots, "selection.prepend", mergeProps({ index: i }, { ref_for: true }, { item })), renderSlot(_ctx.$slots, "selection", mergeProps({ index: i }, { ref_for: true }, {
-									item,
-									chipAttrs: chipAttrs(item, i)
-								}), () => [createTextVNode(toDisplayString(unref(getText)(item)), 1)])])]),
-								_: 2
-							}, 1040, ["size", "class"])) : unref(multiple) || !unref(searchInputFocused) && (slots["selection.prepend"] || slots.selection) ? (openBlock(), createElementBlock("div", {
-								key: 1,
-								class: normalizeClass(__props.hideSelectionWrapper ? "contents" : "flex")
-							}, [renderSlot(_ctx.$slots, "selection.prepend", mergeProps({ index: i }, { ref_for: true }, { item })), unref(multiple) || slots.selection ? renderSlot(_ctx.$slots, "selection", mergeProps({ index: i }, { ref_for: true }, {
-								item,
-								chipAttrs: chipAttrs(item, i)
-							}), () => [createTextVNode(toDisplayString(unref(getText)(item)), 1)], void 0, 0) : createCommentVNode("", true)], 2)) : createCommentVNode("", true)], 64);
-						}), 128)),
+						createVNode(RuiAutoCompleteSelection_default, {
+							items: unref(value),
+							chips: __props.chips,
+							dense: __props.dense,
+							multiple: unref(multiple),
+							"search-input-focused": unref(searchInputFocused),
+							"hide-selection-wrapper": __props.hideSelectionWrapper,
+							"get-identifier": unref(getIdentifier),
+							"get-text": unref(getText),
+							"chip-attrs": chipAttrs
+						}, createSlots({ _: 2 }, [slots["selection.prepend"] ? {
+							name: "prepend",
+							fn: withCtx((slotProps) => [renderSlot(_ctx.$slots, "selection.prepend", normalizeProps(guardReactiveProps(slotProps)))]),
+							key: "0"
+						} : void 0, slots.selection ? {
+							name: "default",
+							fn: withCtx((slotProps) => [renderSlot(_ctx.$slots, "selection", normalizeProps(guardReactiveProps(slotProps)))]),
+							key: "1"
+						} : void 0]), 1032, [
+							"items",
+							"chips",
+							"dense",
+							"multiple",
+							"search-input-focused",
+							"hide-selection-wrapper",
+							"get-identifier",
+							"get-text"
+						]),
 						createElementVNode("input", {
 							ref_key: "textInput",
 							ref: textInput,
@@ -497,7 +517,7 @@ var RuiAutoComplete_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 							onKeydown: _cache[0] || (_cache[0] = withKeys(($event) => unref(onInputDeletePressed)(), ["delete"])),
 							onInput: _cache[1] || (_cache[1] = withModifiers(($event) => updateSearchInput($event), ["stop"])),
 							onFocus: _cache[2] || (_cache[2] = ($event) => unref(focusOnInputFocused)())
-						}, null, 42, _hoisted_4)
+						}, null, 42, _hoisted_3)
 					], 2),
 					__props.clearable && unref(valueSet) && !__props.disabled ? (openBlock(), createBlock(RuiButton_default, {
 						key: 1,
@@ -542,117 +562,75 @@ var RuiAutoComplete_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 				default: withCtx(({ width }) => [createElementVNode("div", {
 					ref_key: "menuWrapperRef",
 					ref: menuWrapperRef
-				}, [unref(optionsWithSelectedHidden).length > 0 ? (openBlock(), createElementBlock("div", {
+				}, [unref(optionsWithSelectedHidden).length > 0 ? (openBlock(), createBlock(RuiAutoCompleteOptionList_default, {
 					key: 0,
-					ref: unref(containerProps).ref,
-					class: normalizeClass(unref(ui).menu({ class: unref(cn)(__props.classNames?.menu) ?? __props.menuClass })),
-					style: normalizeStyle([unref(containerProps).style, {
+					"container-props": unref(containerProps),
+					"wrapper-props": unref(wrapperProps),
+					"set-menu-ref": setMenuRef,
+					"is-grouped": unref(isGrouped),
+					"grouped-options": unref(groupedOptions),
+					"rendered-data": unref(renderedData),
+					options: unref(optionsWithSelectedHidden),
+					"highlighted-index": unref(modelHighlightedIndex),
+					"highlighted-class": unref(highlightedClass),
+					dense: __props.dense,
+					"menu-class": unref(ui).menu({ class: unref(cn)(__props.classNames?.menu) ?? __props.menuClass }),
+					"menu-style": {
 						width: `${width}px`,
 						minWidth: unref(menuWidth),
 						minHeight: `${unref(menuMinHeight)}px`
-					}]),
-					onScroll: _cache[17] || (_cache[17] = (...args) => unref(containerProps).onScroll && unref(containerProps).onScroll(...args)),
-					onKeydown: [_cache[18] || (_cache[18] = withKeys(withModifiers(($event) => unref(moveHighlight)(true), ["prevent"]), ["up"])), _cache[19] || (_cache[19] = withKeys(withModifiers(($event) => unref(moveHighlight)(false), ["prevent"]), ["down"]))]
-				}, [unref(isGrouped) ? (openBlock(), createElementBlock("div", {
-					key: 0,
-					ref_key: "menuRef",
-					ref: menuRef
-				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(groupedOptions), (bucket, bucketIndex) => {
-					return openBlock(), createElementBlock(Fragment, { key: bucket.group || `group-${bucketIndex}` }, [createElementVNode("div", _hoisted_5, [renderSlot(_ctx.$slots, "group-header", mergeProps({ ref_for: true }, {
-						group: bucket.group,
-						items: bucket.items
-					}), () => [createElementVNode("div", _hoisted_6, toDisplayString(bucket.group), 1)])]), (openBlock(true), createElementBlock(Fragment, null, renderList(bucket.items, (item) => {
-						return openBlock(), createBlock(RuiButton_default, {
-							key: unref(getIdentifier)(item)?.toString(),
-							active: unref(isActiveItem)(item),
-							"aria-selected": unref(isActiveItem)(item),
-							size: __props.dense ? "sm" : void 0,
-							disabled: unref(isItemDisabled)(item),
-							tabindex: "0",
-							variant: "list",
-							"data-highlighted": unref(optionsWithSelectedHidden).indexOf(item) === unref(highlightedIndex),
-							"data-disabled": unref(isItemDisabled)(item) || void 0,
-							class: normalizeClass({ [unref(highlightedClass)]: !unref(isActiveItem)(item) && unref(optionsWithSelectedHidden).indexOf(item) === unref(highlightedIndex) }),
-							onClick: ($event) => !unref(isItemDisabled)(item) && setValue(item)
-						}, {
-							prepend: withCtx(() => [renderSlot(_ctx.$slots, "item.prepend", mergeProps({ ref_for: true }, {
-								disabled: unref(isItemDisabled)(item),
-								item,
-								active: unref(isActiveItem)(item)
-							}))]),
-							append: withCtx(() => [renderSlot(_ctx.$slots, "item.append", mergeProps({ ref_for: true }, {
-								disabled: unref(isItemDisabled)(item),
-								item,
-								active: unref(isActiveItem)(item)
-							}))]),
-							default: withCtx(() => [renderSlot(_ctx.$slots, "item", mergeProps({ ref_for: true }, {
-								disabled: unref(isItemDisabled)(item),
-								item,
-								active: unref(isActiveItem)(item)
-							}), () => [createTextVNode(toDisplayString(unref(getText)(item)), 1)])]),
-							_: 2
-						}, 1032, [
-							"active",
-							"aria-selected",
-							"size",
-							"disabled",
-							"data-highlighted",
-							"data-disabled",
-							"class",
-							"onClick"
-						]);
-					}), 128))], 64);
-				}), 128))], 512)) : (openBlock(), createElementBlock("div", mergeProps({ key: 1 }, unref(wrapperProps), {
-					ref_key: "menuRef",
-					ref: menuRef
-				}), [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(renderedData), ({ item, _index }) => {
-					return openBlock(), createBlock(RuiButton_default, {
-						key: unref(getIdentifier)(item)?.toString(),
-						active: unref(isActiveItem)(item),
-						"aria-selected": unref(isActiveItem)(item),
-						size: __props.dense ? "sm" : void 0,
-						disabled: unref(isItemDisabled)(item),
-						tabindex: "0",
-						variant: "list",
-						"data-highlighted": unref(highlightedIndex) === _index,
-						"data-disabled": unref(isItemDisabled)(item) || void 0,
-						class: normalizeClass({ [unref(highlightedClass)]: !unref(isActiveItem)(item) && unref(highlightedIndex) === _index }),
-						onClick: ($event) => !unref(isItemDisabled)(item) && setValue(item)
-					}, {
-						prepend: withCtx(() => [renderSlot(_ctx.$slots, "item.prepend", mergeProps({ ref_for: true }, {
-							disabled: unref(isItemDisabled)(item),
-							item,
-							active: unref(isActiveItem)(item)
-						}))]),
-						append: withCtx(() => [renderSlot(_ctx.$slots, "item.append", mergeProps({ ref_for: true }, {
-							disabled: unref(isItemDisabled)(item),
-							item,
-							active: unref(isActiveItem)(item)
-						}))]),
-						default: withCtx(() => [renderSlot(_ctx.$slots, "item", mergeProps({ ref_for: true }, {
-							disabled: unref(isItemDisabled)(item),
-							item,
-							active: unref(isActiveItem)(item)
-						}), () => [createTextVNode(toDisplayString(unref(getText)(item)), 1)])]),
-						_: 2
-					}, 1032, [
-						"active",
-						"aria-selected",
-						"size",
-						"disabled",
-						"data-highlighted",
-						"data-disabled",
-						"class",
-						"onClick"
-					]);
-				}), 128))], 16))], 38)) : !__props.hideNoData ? (openBlock(), createElementBlock("div", {
+					},
+					"get-identifier": unref(getIdentifier),
+					"get-text": unref(getText),
+					"is-active-item": unref(isActiveItem),
+					"is-item-disabled": unref(isItemDisabled),
+					onSelect: _cache[17] || (_cache[17] = ($event) => setValue($event)),
+					onMoveHighlight: _cache[18] || (_cache[18] = ($event) => unref(moveHighlight)($event))
+				}, createSlots({ _: 2 }, [
+					slots["group-header"] ? {
+						name: "group-header",
+						fn: withCtx((slotProps) => [renderSlot(_ctx.$slots, "group-header", normalizeProps(guardReactiveProps(slotProps)))]),
+						key: "0"
+					} : void 0,
+					slots["item.prepend"] ? {
+						name: "item.prepend",
+						fn: withCtx((slotProps) => [renderSlot(_ctx.$slots, "item.prepend", normalizeProps(guardReactiveProps(slotProps)))]),
+						key: "1"
+					} : void 0,
+					slots.item ? {
+						name: "item",
+						fn: withCtx((slotProps) => [renderSlot(_ctx.$slots, "item", normalizeProps(guardReactiveProps(slotProps)))]),
+						key: "2"
+					} : void 0,
+					slots["item.append"] ? {
+						name: "item.append",
+						fn: withCtx((slotProps) => [renderSlot(_ctx.$slots, "item.append", normalizeProps(guardReactiveProps(slotProps)))]),
+						key: "3"
+					} : void 0
+				]), 1032, [
+					"container-props",
+					"wrapper-props",
+					"is-grouped",
+					"grouped-options",
+					"rendered-data",
+					"options",
+					"highlighted-index",
+					"highlighted-class",
+					"dense",
+					"menu-class",
+					"menu-style",
+					"get-identifier",
+					"get-text",
+					"is-active-item",
+					"is-item-disabled"
+				])) : !__props.hideNoData ? (openBlock(), createElementBlock("div", {
 					key: 1,
 					style: normalizeStyle({
 						width: `${width}px`,
 						minWidth: unref(menuWidth)
 					}),
 					class: normalizeClass(__props.classNames?.menu ?? __props.menuClass)
-				}, [renderSlot(_ctx.$slots, "no-data", {}, () => [!__props.customValue ? (openBlock(), createElementBlock("div", _hoisted_7, toDisplayString(__props.noDataText), 1)) : createCommentVNode("", true)])], 6)) : createCommentVNode("", true), slots.footer ? (openBlock(), createElementBlock("div", _hoisted_8, [renderSlot(_ctx.$slots, "footer")])) : createCommentVNode("", true)], 512)]),
+				}, [renderSlot(_ctx.$slots, "no-data", {}, () => [!__props.customValue ? (openBlock(), createElementBlock("div", _hoisted_4, toDisplayString(__props.noDataText), 1)) : createCommentVNode("", true)])], 6)) : createCommentVNode("", true), slots.footer ? (openBlock(), createElementBlock("div", _hoisted_5, [renderSlot(_ctx.$slots, "footer")])) : createCommentVNode("", true)], 512)]),
 				_: 3
 			}, 16, [
 				"modelValue",