bootstrap-vue-next 0.45.0 → 0.45.1

package/dist/{BAutocomplete-B7yzKPIp.mjs → BAutocomplete-DQjfkhoO.mjs}

@@ -1,18 +1,19 @@
-import { C as useVModel, M as refAutoReset, T as createEventHook, s as unrefElement } from "./dist-B10a-gZ8.mjs";
+import { S as useVModel, j as refAutoReset, o as unrefElement, w as createEventHook } from "./dist-Dk9C_HFS.mjs";
 import { t as useDefaults } from "./useDefaults-BKgBaqOV.mjs";
 import { t as useId$1 } from "./useId-BKZFSYm8.mjs";
-import { t as BButton_default } from "./BButton-CDo9SRvU.mjs";
-import { a as useDirection, c as createContext, i as Slot, n as usePrimitiveElement, o as injectConfigProviderContext, r as Primitive } from "./VisuallyHidden-Bbwok8oL.mjs";
-import { n as getActiveElement, t as useForwardExpose } from "./useForwardExpose-4OUimdPL.mjs";
-import { a as FocusScope_default, c as useId$2, d as useForwardProps, f as useFocusGuards, i as Teleport_default, l as useHideOthers, m as handleAndDispatchCustomEvent, n as PopperAnchor_default, o as DismissableLayer_default, p as useBodyScrollLock, r as PopperRoot_default, s as Presence_default, t as PopperContent_default, u as useForwardPropsEmits } from "./PopperContent-BTUvv6Tu.mjs";
-import { t as useKbd } from "./useKbd-IZRktImL.mjs";
-import { t as VisuallyHiddenInput_default } from "./VisuallyHiddenInput-D1SjTCVH.mjs";
-import { t as useStateClass } from "./useStateClass-CdmlbrGn.mjs";
+import { t as BCloseButton_default } from "./BCloseButton-CCdRwLDo.mjs";
+import { t as BButton_default } from "./BButton-D_sCrjpg.mjs";
+import { a as useDirection, c as createContext, i as Slot, n as usePrimitiveElement, o as injectConfigProviderContext, r as Primitive } from "./VisuallyHidden-C4sXnc-k.mjs";
+import { n as getActiveElement, t as useForwardExpose } from "./useForwardExpose-Cob6LlGd.mjs";
+import { a as FocusScope_default, c as useId$2, d as useForwardProps, f as useFocusGuards, i as Teleport_default, l as useHideOthers, m as handleAndDispatchCustomEvent, n as PopperAnchor_default, o as DismissableLayer_default, p as useBodyScrollLock, r as PopperRoot_default, s as Presence_default, t as PopperContent_default, u as useForwardPropsEmits } from "./PopperContent-DmSgsjSC.mjs";
+import { t as useKbd } from "./useKbd-DfmgFov6.mjs";
+import { t as VisuallyHiddenInput_default } from "./VisuallyHiddenInput-DKIzxsQR.mjs";
+import { t as BInputGroup_default } from "./BInputGroup-3AVRA3U7.mjs";
 import { t as useAriaInvalid } from "./useAriaInvalid-apOwgexm.mjs";
-import { t as BInputGroup_default } from "./BInputGroup-C5sxenhE.mjs";
-import { t as BFormTag_default } from "./BFormTag-BUWEugEC.mjs";
-import { t as useFormSelect } from "./useFormSelect-D3gVO4jJ.mjs";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, getCurrentInstance, guardReactiveProps, h, inject, isRef, markRaw, mergeModels, mergeProps, nextTick, normalizeClass, normalizeProps, onMounted, onUnmounted, openBlock, provide, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, toRefs, toValue, unref, useModel, watch, watchEffect, watchSyncEffect, withCtx, withKeys, withMemo, withModifiers } from "vue";
+import { t as BFormInput_default } from "./BFormInput-NKko58M2.mjs";
+import { t as BFormTag_default } from "./BFormTag-Cjg1R-Lj.mjs";
+import { t as useFormSelect } from "./useFormSelect-C0nvno12.mjs";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, getCurrentInstance, guardReactiveProps, h, inject, isRef, markRaw, mergeModels, mergeProps, nextTick, normalizeClass, normalizeProps, onMounted, onUnmounted, openBlock, provide, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, toRefs, toValue, unref, useModel, useTemplateRef, watch, watchEffect, watchSyncEffect, withCtx, withKeys, withMemo, withModifiers } from "vue";
 //#region ../../node_modules/.pnpm/ohash@2.0.11/node_modules/ohash/dist/shared/ohash.D__AXeF1.mjs
 function serialize(o) {
 	return typeof o == "string" ? `'${o}'` : new c().serialize(o);
@@ -1968,17 +1969,7 @@ var ComboboxViewport_default = /* @__PURE__ */ defineComponent({
 //#endregion
 //#region src/components/BAutocomplete/BAutocomplete.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { key: 0 };
-var _hoisted_2 = [
-	"id",
-	"disabled",
-	"form",
-	"placeholder",
-	"readonly",
-	"required",
-	"autocomplete",
-	"aria-invalid",
-	"aria-required"
-];
+var _hoisted_2 = { class: "b-autocomplete-input-wrapper" };
 //#endregion
 //#region src/components/BAutocomplete/BAutocomplete.vue
 var BAutocomplete_default = /* @__PURE__ */ defineComponent({
@@ -2022,6 +2013,10 @@ var BAutocomplete_default = /* @__PURE__ */ defineComponent({
 			default: false
 		},
 		name: { default: void 0 },
+		noClearButton: {
+			type: Boolean,
+			default: false
+		},
 		noToggle: {
 			type: Boolean,
 			default: false
@@ -2081,28 +2076,46 @@ var BAutocomplete_default = /* @__PURE__ */ defineComponent({
 		"update:open",
 		"update:search"
 	]),
-	setup(__props, { emit: __emit }) {
+	setup(__props, { expose: __expose, emit: __emit }) {
 		const props = useDefaults(__props, "BAutocomplete");
 		const emit = __emit;
+		const _input = useTemplateRef("_input");
 		const modelValue = useModel(__props, "modelValue");
 		const isOpen = useModel(__props, "open");
 		const searchTerm = useModel(__props, "search");
 		const pendingDelete = ref(false);
-		const computedId = useId$1(() => props.id);
-		const stateClass = useStateClass(() => props.state ?? null);
-		const computedAriaInvalid = useAriaInvalid(() => props.ariaInvalid, () => props.state ?? null);
-		const inputClasses = computed(() => [stateClass.value, {
-			"form-control": !props.plaintext,
-			"form-control-plaintext": props.plaintext,
-			[`form-control-${props.size}`]: !!props.size
-		}]);
+		const computedId = useId$1(() => props.id, "autocomplete");
 		const { normalizedOptions } = useFormSelect(() => props.options, props);
+		const singleSelectedLabelCache = ref(null);
+		const getLookupKey = (val) => {
+			if (props.by && typeof props.by === "string" && val !== null && typeof val === "object") {
+				const byVal = val?.[props.by];
+				return byVal === void 0 ? void 0 : `by:${String(byVal)}`;
+			}
+			if (val !== null && val !== void 0 && typeof val !== "object") return `value:${String(val)}`;
+		};
+		const cacheSingleSelectedLabel = (val, text) => {
+			const key = getLookupKey(val);
+			if (!key) return;
+			singleSelectedLabelCache.value = {
+				key,
+				text: String(text ?? "")
+			};
+		};
+		if (!props.multiple && modelValue.value !== null && modelValue.value !== void 0 && searchTerm.value !== "") cacheSingleSelectedLabel(modelValue.value, searchTerm.value);
 		const findOptionText = (val) => {
 			const match = normalizedOptions.value.find((opt) => {
 				if (props.by && typeof props.by === "string") return opt.value?.[props.by] === val?.[props.by];
 				return opt.value === val;
 			});
-			return match ? String(match.text) : String(val);
+			if (match) {
+				const resolvedText = String(match.text);
+				cacheSingleSelectedLabel(val, resolvedText);
+				return resolvedText;
+			}
+			const lookupKey = getLookupKey(val);
+			if (lookupKey && singleSelectedLabelCache.value?.key === lookupKey) return singleSelectedLabelCache.value.text;
+			return String(val);
 		};
 		const filteredOptions = computed(() => {
 			const filterText = searchTerm.value;
@@ -2117,9 +2130,11 @@ var BAutocomplete_default = /* @__PURE__ */ defineComponent({
 			return findOptionText(val);
 		};
 		const hasSelection = computed(() => {
-			if (!modelValue.value) return false;
-			return Array.isArray(modelValue.value) ? modelValue.value.length > 0 : true;
+			const currentValue = modelValue.value;
+			if (Array.isArray(currentValue)) return currentValue.length > 0;
+			return currentValue !== null && currentValue !== void 0;
 		});
+		const computedAriaInvalid = useAriaInvalid(() => props.ariaInvalid, () => props.state);
 		const selectedOptions = computed(() => {
 			if (!props.multiple || !modelValue.value) return [];
 			return (Array.isArray(modelValue.value) ? modelValue.value : [modelValue.value]).map((val) => normalizedOptions.value.find((opt) => {
@@ -2139,8 +2154,17 @@ var BAutocomplete_default = /* @__PURE__ */ defineComponent({
 			if (val !== null && val !== void 0 && typeof val !== "object") return String(val);
 			return index;
 		};
-		const isLastSelectedOption = (_opt, index) => {
-			return index === selectedOptions.value.length - 1;
+		const isLastSelectedOption = (_opt, index) => index === selectedOptions.value.length - 1;
+		const showClearButton = computed(() => !props.required && !props.noClearButton && !props.disabled && !props.readonly && hasSelection.value);
+		const clearSelection = () => {
+			modelValue.value = props.multiple ? [] : void 0;
+			searchTerm.value = "";
+			singleSelectedLabelCache.value = null;
+			_input.value?.focus();
+		};
+		const onOptionSelect = (option) => {
+			cacheSingleSelectedLabel(option.value, String(option.text));
+			_input.value?.focus();
 		};
 		const resetPendingDelete = () => {
 			pendingDelete.value = false;
@@ -2160,12 +2184,34 @@ var BAutocomplete_default = /* @__PURE__ */ defineComponent({
 			}
 			if (pendingDelete.value) resetPendingDelete();
 		};
+		const comboboxInputProps = computed(() => ({
+			"id": computedId.value,
+			"disabled": props.disabled,
+			"form": props.form || void 0,
+			"placeholder": props.placeholder,
+			"readonly": props.readonly || props.plaintext,
+			"required": props.required || void 0,
+			"autocomplete": props.autocomplete || void 0,
+			"plaintext": props.plaintext,
+			"size": props.size,
+			"state": props.state,
+			"aria-invalid": computedAriaInvalid.value,
+			"aria-required": props.required || void 0,
+			"onBlur": (event) => emit("blur", event),
+			"onFocus": (event) => emit("focus", event),
+			"onKeydown": (event) => onInputKeydown(event)
+		}));
+		__expose({
+			blur: () => _input.value?.blur(),
+			element: computed(() => _input.value?.element?.value ?? null),
+			focus: () => _input.value?.focus()
+		});
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(ComboboxRoot_default), {
 				modelValue: modelValue.value,
-				"onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => modelValue.value = $event),
+				"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => modelValue.value = $event),
 				open: isOpen.value,
-				"onUpdate:open": _cache[4] || (_cache[4] = ($event) => isOpen.value = $event),
+				"onUpdate:open": _cache[2] || (_cache[2] = ($event) => isOpen.value = $event),
 				multiple: unref(props).multiple,
 				disabled: unref(props).disabled,
 				name: unref(props).name,
@@ -2185,7 +2231,10 @@ var BAutocomplete_default = /* @__PURE__ */ defineComponent({
 							"as-child": "",
 							disabled: unref(props).disabled
 						}, {
-							default: withCtx(() => [createVNode(BButton_default, {
+							default: withCtx(() => [renderSlot(_ctx.$slots, "toggle", {
+								isOpen: isOpen.value,
+								disabled: unref(props).disabled
+							}, () => [createVNode(BButton_default, {
 								class: "b-autocomplete-trigger",
 								disabled: unref(props).disabled
 							}, {
@@ -2196,12 +2245,12 @@ var BAutocomplete_default = /* @__PURE__ */ defineComponent({
 									fill: "currentColor",
 									viewBox: "0 0 16 16",
 									class: normalizeClass(["b-autocomplete-chevron", { "b-autocomplete-chevron-open": isOpen.value }])
-								}, [..._cache[5] || (_cache[5] = [createElementVNode("path", {
+								}, [..._cache[3] || (_cache[3] = [createElementVNode("path", {
 									"fill-rule": "evenodd",
 									d: "M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"
 								}, null, -1)])], 2))])]),
 								_: 3
-							}, 8, ["disabled"])]),
+							}, 8, ["disabled"])])]),
 							_: 3
 						}, 8, ["disabled"])) : createCommentVNode("", true)]),
 						default: withCtx(() => [unref(props).multiple && hasSelection.value ? (openBlock(), createElementBlock("div", {
@@ -2240,29 +2289,24 @@ var BAutocomplete_default = /* @__PURE__ */ defineComponent({
 								key: optionKey(opt, i),
 								class: normalizeClass({ "text-body-tertiary": pendingDelete.value && !isLastSelectedOption(opt, i) })
 							}, [createTextVNode(toDisplayString(opt.text), 1), i < selectedOptions.value.length - 1 ? (openBlock(), createElementBlock("span", _hoisted_1, ",\xA0")) : createCommentVNode("", true)], 2);
-						}), 128))], 2)) : createCommentVNode("", true), createVNode(unref(ComboboxInput_default), {
+						}), 128))], 2)) : createCommentVNode("", true), createElementVNode("div", _hoisted_2, [createVNode(unref(ComboboxInput_default), {
 							modelValue: searchTerm.value,
-							"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => searchTerm.value = $event),
+							"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => searchTerm.value = $event),
 							"as-child": "",
 							"display-value": displayValueFn
 						}, {
-							default: withCtx(() => [createElementVNode("input", {
-								id: unref(computedId),
-								class: normalizeClass(inputClasses.value),
-								disabled: unref(props).disabled,
-								form: unref(props).form || void 0,
-								placeholder: unref(props).placeholder,
-								readonly: unref(props).readonly || unref(props).plaintext,
-								required: unref(props).required || void 0,
-								autocomplete: unref(props).autocomplete || void 0,
-								"aria-invalid": unref(computedAriaInvalid),
-								"aria-required": unref(props).required || void 0,
-								onBlur: _cache[0] || (_cache[0] = ($event) => emit("blur", $event)),
-								onFocus: _cache[1] || (_cache[1] = ($event) => emit("focus", $event)),
-								onKeydownPassive: onInputKeydown
-							}, null, 42, _hoisted_2)]),
-							_: 1
-						}, 8, ["modelValue"])]),
+							default: withCtx(() => [renderSlot(_ctx.$slots, "input", mergeProps(comboboxInputProps.value, { searchTerm: searchTerm.value }), () => [createVNode(BFormInput_default, mergeProps({
+								ref_key: "_input",
+								ref: _input,
+								"model-value": searchTerm.value
+							}, comboboxInputProps.value, { class: { "b-autocomplete-input-clearable": showClearButton.value } }), null, 16, ["model-value", "class"])])]),
+							_: 3
+						}, 8, ["modelValue"]), showClearButton.value ? (openBlock(), createBlock(BCloseButton_default, {
+							key: 0,
+							class: "b-autocomplete-clear",
+							"aria-label": "Clear selected value",
+							onClick: withModifiers(clearSelection, ["stop"])
+						})) : createCommentVNode("", true)])]),
 						_: 3
 					}, 8, ["size"])]),
 					_: 3
@@ -2284,17 +2328,18 @@ var BAutocomplete_default = /* @__PURE__ */ defineComponent({
 					}, {
 						default: withCtx(() => [createVNode(unref(ComboboxViewport_default), { class: "b-autocomplete-viewport" }, {
 							default: withCtx(() => [createVNode(unref(ComboboxEmpty_default), { class: "b-autocomplete-empty" }, {
-								default: withCtx(() => [renderSlot(_ctx.$slots, "empty", {}, () => [_cache[6] || (_cache[6] = createTextVNode(" No results found ", -1))])]),
+								default: withCtx(() => [renderSlot(_ctx.$slots, "empty", {}, () => [_cache[4] || (_cache[4] = createTextVNode(" No results found ", -1))])]),
 								_: 3
 							}), (openBlock(true), createElementBlock(Fragment, null, renderList(filteredOptions.value, (option, index) => {
 								return openBlock(), createBlock(unref(ComboboxItem_default), {
 									key: optionKey(option, index),
 									value: option.value,
 									disabled: option.disabled,
-									class: normalizeClass(["b-autocomplete-item", "dropdown-item"])
+									class: normalizeClass(["b-autocomplete-item", "dropdown-item"]),
+									onSelect: ($event) => onOptionSelect(option)
 								}, {
 									default: withCtx(() => [renderSlot(_ctx.$slots, "option", mergeProps({ ref_for: true }, option), () => [createTextVNode(toDisplayString(option.text), 1)]), createVNode(unref(ComboboxItemIndicator_default), { class: "b-autocomplete-item-indicator" }, {
-										default: withCtx(() => [renderSlot(_ctx.$slots, "option-indicator", {}, () => [_cache[7] || (_cache[7] = createElementVNode("svg", {
+										default: withCtx(() => [renderSlot(_ctx.$slots, "option-indicator", {}, () => [_cache[5] || (_cache[5] = createElementVNode("svg", {
 											xmlns: "http://www.w3.org/2000/svg",
 											width: "16",
 											height: "16",
@@ -2304,7 +2349,11 @@ var BAutocomplete_default = /* @__PURE__ */ defineComponent({
 										_: 3
 									})]),
 									_: 2
-								}, 1032, ["value", "disabled"]);
+								}, 1032, [
+									"value",
+									"disabled",
+									"onSelect"
+								]);
 							}), 128))]),
 							_: 3
 						})]),
@@ -2333,4 +2382,4 @@ var BAutocomplete_default = /* @__PURE__ */ defineComponent({
 //#endregion
 export { BAutocomplete_default as t };
 
-//# sourceMappingURL=BAutocomplete-B7yzKPIp.mjs.map
+//# sourceMappingURL=BAutocomplete-DQjfkhoO.mjs.map