bootstrap-vue-next
Version:
Seamless integration of Vue 3, Bootstrap 5, and TypeScript for modern, type-safe UI development
2,490 lines • 81.8 kB
JavaScript
import { t as createEventHook } from "./dist-DKc2ivHS.js";
import { S as useVModel, o as unrefElement } from "./dist-9-XTMhb-.js";
import { t as useDefaults } from "./useDefaults-BzP4qZBu.js";
import { t as useId$1 } from "./useId-Fh-Arhb7.js";
import { t as BCloseButton_default } from "./BCloseButton-B3-IdpNp.js";
import { t as BButton_default } from "./BButton-KZu5jczf.js";
import { a as useDirection, c as getActiveElement, i as Slot, l as createContext, n as usePrimitiveElement, o as injectConfigProviderContext, r as Primitive } from "./VisuallyHidden-BYzyjJiY.js";
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-C9eeL6LH.js";
import { t as useKbd } from "./useKbd-DRsaFU_f.js";
import { a as refAutoReset, t as isClient } from "./dist-B-regXAP.js";
import { n as useComposing, t as VisuallyHiddenInput_default } from "./VisuallyHiddenInput-CUrc8XXa.js";
import { t as useForwardExpose } from "./useForwardExpose-DDvk7mir.js";
import { t as BInputGroup_default } from "./BInputGroup-DdoeSICR.js";
import { t as useAriaInvalid } from "./useAriaInvalid-CRUhkD2V.js";
import { t as BFormInput_default } from "./BFormInput-_AkAy6Wk.js";
import { t as BFormTag_default } from "./BFormTag-DGSUfz7A.js";
import { t as useFormSelect } from "./useFormSelect-CwS8YuiQ.js";
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);
}
var c = /*@__PURE__*/ function() {
class o {
#t = /* @__PURE__ */ new Map();
compare(t, r) {
const e = typeof t, n = typeof r;
return e === "string" && n === "string" ? t.localeCompare(r) : e === "number" && n === "number" ? t - r : String.prototype.localeCompare.call(this.serialize(t, true), this.serialize(r, true));
}
serialize(t, r) {
if (t === null) return "null";
switch (typeof t) {
case "string": return r ? t : `'${t}'`;
case "bigint": return `${t}n`;
case "object": return this.$object(t);
case "function": return this.$function(t);
}
return String(t);
}
serializeObject(t) {
const r = Object.prototype.toString.call(t);
if (r !== "[object Object]") return this.serializeBuiltInType(r.length < 10 ? `unknown:${r}` : r.slice(8, -1), t);
const e = t.constructor, n = e === Object || e === void 0 ? "" : e.name;
if (n !== "" && globalThis[n] === e) return this.serializeBuiltInType(n, t);
if (typeof t.toJSON == "function") {
const i = t.toJSON();
return n + (i !== null && typeof i == "object" ? this.$object(i) : `(${this.serialize(i)})`);
}
return this.serializeObjectEntries(n, Object.entries(t));
}
serializeBuiltInType(t, r) {
const e = this["$" + t];
if (e) return e.call(this, r);
if (typeof r?.entries == "function") return this.serializeObjectEntries(t, r.entries());
throw new Error(`Cannot serialize ${t}`);
}
serializeObjectEntries(t, r) {
const e = Array.from(r).sort((i, a) => this.compare(i[0], a[0]));
let n = `${t}{`;
for (let i = 0; i < e.length; i++) {
const [a, l] = e[i];
n += `${this.serialize(a, true)}:${this.serialize(l)}`, i < e.length - 1 && (n += ",");
}
return n + "}";
}
$object(t) {
let r = this.#t.get(t);
return r === void 0 && (this.#t.set(t, `#${this.#t.size}`), r = this.serializeObject(t), this.#t.set(t, r)), r;
}
$function(t) {
const r = Function.prototype.toString.call(t);
return r.slice(-15) === "[native code] }" ? `${t.name || ""}()[native]` : `${t.name}(${t.length})${r.replace(/\s*\n\s*/g, "")}`;
}
$Array(t) {
let r = "[";
for (let e = 0; e < t.length; e++) r += this.serialize(t[e]), e < t.length - 1 && (r += ",");
return r + "]";
}
$Date(t) {
try {
return `Date(${t.toISOString()})`;
} catch {
return "Date(null)";
}
}
$ArrayBuffer(t) {
return `ArrayBuffer[${new Uint8Array(t).join(",")}]`;
}
$Set(t) {
return `Set${this.$Array(Array.from(t).sort((r, e) => this.compare(r, e)))}`;
}
$Map(t) {
return this.serializeObjectEntries("Map", t.entries());
}
}
for (const s of [
"Error",
"RegExp",
"URL"
]) o.prototype["$" + s] = function(t) {
return `${s}(${t})`;
};
for (const s of [
"Int8Array",
"Uint8Array",
"Uint8ClampedArray",
"Int16Array",
"Uint16Array",
"Int32Array",
"Uint32Array",
"Float32Array",
"Float64Array"
]) o.prototype["$" + s] = function(t) {
return `${s}[${t.join(",")}]`;
};
for (const s of ["BigInt64Array", "BigUint64Array"]) o.prototype["$" + s] = function(t) {
return `${s}[${t.join("n,")}${t.length > 0 ? "n" : ""}]`;
};
return o;
}();
function isEqual(object1, object2) {
if (object1 === object2) return true;
if (serialize(object1) === serialize(object2)) return true;
return false;
}
//#endregion
//#region ../../node_modules/.pnpm/reka-ui@2.10.3_vue@3.5.41_typescript@5.9.3_/node_modules/reka-ui/dist/shared/arrays.js
/**
* The function `findValuesBetween` takes an array and two values, then returns a subarray containing
* elements between the first occurrence of the start value and the first occurrence of the end value
* in the array.
* @param {T[]} array - The `array` parameter is an array of values of type `T`.
* @param {T} start - The `start` parameter is the value that marks the beginning of the range you want
* to find in the array.
* @param {T} end - The `end` parameter in the `findValuesBetween` function represents the end value
* that you want to find in the array. This function will return a subarray of values that are between
* the `start` and `end` values in the original array.
* @returns The `findValuesBetween` function returns an array of values from the input array that are
* between the `start` and `end` values (inclusive). If either the `start` or `end` values are not
* found in the input array, an empty array is returned.
*/
function findValuesBetween(array, start, end) {
const startIndex = array.findIndex((i) => isEqual(i, start));
const endIndex = array.findIndex((i) => isEqual(i, end));
if (startIndex === -1 || endIndex === -1) return [];
const [minIndex, maxIndex] = [startIndex, endIndex].sort((a, b) => a - b);
return array.slice(minIndex, maxIndex + 1);
}
//#endregion
//#region ../../node_modules/.pnpm/reka-ui@2.10.3_vue@3.5.41_typescript@5.9.3_/node_modules/reka-ui/dist/shared/useFilter.js
/**
* Provides locale-aware string filtering functions.
* Uses `Intl.Collator` for comparison to ensure proper Unicode handling.
*
* @param options - Optional collator options to customize comparison behavior.
* See [Intl.CollatorOptions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator/Collator#options) for details.
* @returns An object with methods to check if a string starts with, ends with, or contains a substring.
*
* @example
* const { startsWith, endsWith, contains } = useFilter();
*
* startsWith('hello', 'he'); // true
* endsWith('hello', 'lo'); // true
* contains('hello', 'ell'); // true
*/
function useFilter(options) {
const computedOptions = computed(() => unref(options));
const collator = computed(() => new Intl.Collator("en", {
usage: "search",
...computedOptions.value
}));
const startsWith = (string, substring) => {
if (substring.length === 0) return true;
string = string.normalize("NFC");
substring = substring.normalize("NFC");
return collator.value.compare(string.slice(0, substring.length), substring) === 0;
};
const endsWith = (string, substring) => {
if (substring.length === 0) return true;
string = string.normalize("NFC");
substring = substring.normalize("NFC");
return collator.value.compare(string.slice(-substring.length), substring) === 0;
};
const contains = (string, substring) => {
if (substring.length === 0) return true;
string = string.normalize("NFC");
substring = substring.normalize("NFC");
let scan = 0;
const sliceLen = substring.length;
for (; scan + sliceLen <= string.length; scan++) {
const slice = string.slice(scan, scan + sliceLen);
if (collator.value.compare(substring, slice) === 0) return true;
}
return false;
};
return {
startsWith,
endsWith,
contains
};
}
//#endregion
//#region ../../node_modules/.pnpm/reka-ui@2.10.3_vue@3.5.41_typescript@5.9.3_/node_modules/reka-ui/dist/shared/useFormControl.js
function useFormControl(el) {
return computed(() => toValue(el) ? Boolean(unrefElement(el)?.closest("form")) : true);
}
//#endregion
//#region ../../node_modules/.pnpm/reka-ui@2.10.3_vue@3.5.41_typescript@5.9.3_/node_modules/reka-ui/dist/shared/useTypeahead.js
function useTypeahead(callback) {
const search = refAutoReset("", 1e3);
const handleTypeaheadSearch = (key, items) => {
search.value = search.value + key;
if (callback) callback(key);
else {
const currentItem = getActiveElement();
const itemsWithTextValue = items.map((item) => ({
...item,
textValue: item.value?.textValue ?? item.ref.textContent?.trim() ?? ""
}));
const currentMatch = itemsWithTextValue.find((item) => item.ref === currentItem);
const nextMatch = getNextMatch(itemsWithTextValue.map((item) => item.textValue), search.value, currentMatch?.textValue);
const newItem = itemsWithTextValue.find((item) => item.textValue === nextMatch);
if (newItem) newItem.ref.focus();
return newItem?.ref;
}
};
const resetTypeahead = () => {
search.value = "";
};
return {
search,
handleTypeaheadSearch,
resetTypeahead
};
}
/**
* Wraps an array around itself at a given start index
* Example: `wrapArray(['a', 'b', 'c', 'd'], 2) === ['c', 'd', 'a', 'b']`
*/
function wrapArray(array, startIndex) {
return array.map((_, index) => array[(startIndex + index) % array.length]);
}
/**
* This is the "meat" of the typeahead matching logic. It takes in all the values,
* the search and the current match, and returns the next match (or `undefined`).
*
* We normalize the search because if a user has repeatedly pressed a character,
* we want the exact same behavior as if we only had that one character
* (ie. cycle through options starting with that character)
*
* We also reorder the values by wrapping the array around the current match.
* This is so we always look forward from the current match, and picking the first
* match will always be the correct one.
*
* Finally, if the normalized search is exactly one character, we exclude the
* current match from the values because otherwise it would be the first to match always
* and focus would never move. This is as opposed to the regular case, where we
* don't want focus to move if the current match still matches.
*/
function getNextMatch(values, search, currentMatch) {
const normalizedSearch = search.length > 1 && Array.from(search).every((char) => char === search[0]) ? search[0] : search;
const currentMatchIndex = currentMatch ? values.indexOf(currentMatch) : -1;
let wrappedValues = wrapArray(values, Math.max(currentMatchIndex, 0));
if (normalizedSearch.length === 1) wrappedValues = wrappedValues.filter((v) => v !== currentMatch);
const nextMatch = wrappedValues.find((value) => value.toLowerCase().startsWith(normalizedSearch.toLowerCase()));
return nextMatch !== currentMatch ? nextMatch : void 0;
}
//#endregion
//#region ../../node_modules/.pnpm/reka-ui@2.10.3_vue@3.5.41_typescript@5.9.3_/node_modules/reka-ui/dist/Collection/Collection.js
var ITEM_DATA_ATTR = "data-reka-collection-item";
function useCollection(options = {}) {
const { key = "", isProvider = false } = options;
const injectionKey = `${key}CollectionProvider`;
let context;
if (isProvider) {
const itemMap = ref(/* @__PURE__ */ new Map());
context = {
collectionRef: ref(),
itemMap
};
provide(injectionKey, context);
} else context = inject(injectionKey);
const getItems = (includeDisabledItem = false) => {
const collectionNode = context.collectionRef.value;
if (!collectionNode) return [];
const orderedNodes = Array.from(collectionNode.querySelectorAll(`[${ITEM_DATA_ATTR}]`));
const orderMap = new Map(orderedNodes.map((node, index) => [node, index]));
const orderedItems = Array.from(context.itemMap.value.values()).sort((a, b) => (orderMap.get(a.ref) ?? -1) - (orderMap.get(b.ref) ?? -1));
if (includeDisabledItem) return orderedItems;
else return orderedItems.filter((i) => i.ref.dataset.disabled !== "");
};
const CollectionSlot = /*#__PURE__*/ defineComponent({
name: "CollectionSlot",
inheritAttrs: false,
setup(_, { slots, attrs }) {
const { primitiveElement, currentElement } = usePrimitiveElement();
watch(currentElement, () => {
context.collectionRef.value = currentElement.value;
});
return () => h(Slot, {
ref: primitiveElement,
...attrs
}, slots);
}
});
const CollectionItem = /*#__PURE__*/ defineComponent({
name: "CollectionItem",
inheritAttrs: false,
props: { value: { validator: () => true } },
setup(props, { slots, attrs }) {
const { primitiveElement, currentElement } = usePrimitiveElement();
watchEffect((cleanupFn) => {
if (currentElement.value) {
const key$1 = markRaw(currentElement.value);
context.itemMap.value.set(key$1, {
ref: currentElement.value,
value: props.value
});
cleanupFn(() => context.itemMap.value.delete(key$1));
}
});
return () => h(Slot, {
...attrs,
[ITEM_DATA_ATTR]: "",
ref: primitiveElement
}, slots);
}
});
return {
getItems,
reactiveItems: computed(() => Array.from(context.itemMap.value.values())),
itemMapSize: computed(() => context.itemMap.value.size),
CollectionSlot,
CollectionItem
};
}
//#endregion
//#region ../../node_modules/.pnpm/reka-ui@2.10.3_vue@3.5.41_typescript@5.9.3_/node_modules/reka-ui/dist/Listbox/utils.js
function valueComparator(value, currentValue, comparator) {
if (value === void 0) return false;
else if (Array.isArray(value)) return value.some((val) => compare(val, currentValue, comparator));
else return compare(value, currentValue, comparator);
}
function compare(value, currentValue, comparator) {
if (value === void 0 || currentValue === void 0) return false;
if (typeof value === "string") return value === currentValue;
if (typeof comparator === "function") return comparator(value, currentValue);
if (typeof comparator === "string") return value?.[comparator] === currentValue?.[comparator];
return isEqual(value, currentValue);
}
//#endregion
//#region ../../node_modules/.pnpm/reka-ui@2.10.3_vue@3.5.41_typescript@5.9.3_/node_modules/reka-ui/dist/RovingFocus/utils.js
var MAP_KEY_TO_FOCUS_INTENT = {
ArrowLeft: "prev",
ArrowUp: "prev",
ArrowRight: "next",
ArrowDown: "next",
PageUp: "first",
Home: "first",
PageDown: "last",
End: "last"
};
function getDirectionAwareKey(key, dir) {
if (dir !== "rtl") return key;
return key === "ArrowLeft" ? "ArrowRight" : key === "ArrowRight" ? "ArrowLeft" : key;
}
function getFocusIntent(event, orientation, dir) {
const key = getDirectionAwareKey(event.key, dir);
if (orientation === "vertical" && ["ArrowLeft", "ArrowRight"].includes(key)) return void 0;
if (orientation === "horizontal" && ["ArrowUp", "ArrowDown"].includes(key)) return void 0;
return MAP_KEY_TO_FOCUS_INTENT[key];
}
//#endregion
//#region ../../node_modules/.pnpm/reka-ui@2.10.3_vue@3.5.41_typescript@5.9.3_/node_modules/reka-ui/dist/Listbox/ListboxRoot.js
var [injectListboxRootContext, provideListboxRootContext] = /*#__PURE__*/ createContext("ListboxRoot");
var ListboxRoot_default = /* @__PURE__ */ defineComponent({
__name: "ListboxRoot",
props: {
modelValue: {
type: null,
required: false
},
defaultValue: {
type: null,
required: false
},
multiple: {
type: Boolean,
required: false
},
orientation: {
type: String,
required: false,
default: "vertical"
},
dir: {
type: String,
required: false
},
disabled: {
type: Boolean,
required: false
},
selectionBehavior: {
type: String,
required: false,
default: "toggle"
},
highlightOnHover: {
type: Boolean,
required: false
},
by: {
type: [String, Function],
required: false
},
asChild: {
type: Boolean,
required: false
},
as: {
type: null,
required: false
},
name: {
type: String,
required: false
},
required: {
type: Boolean,
required: false
}
},
emits: [
"update:modelValue",
"highlight",
"entryFocus",
"leave"
],
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emits = __emit;
const { multiple, highlightOnHover, orientation, disabled, selectionBehavior, dir: propDir } = toRefs(props);
const { getItems } = useCollection({ isProvider: true });
const { handleTypeaheadSearch } = useTypeahead();
const { primitiveElement, currentElement } = usePrimitiveElement();
const kbd = useKbd();
const dir = useDirection(propDir);
const isFormControl = useFormControl(currentElement);
const firstValue = ref();
const isUserAction = ref(false);
const focusable = ref(true);
const modelValue = useVModel(props, "modelValue", emits, {
defaultValue: props.defaultValue ?? (multiple.value ? [] : void 0),
passive: props.modelValue === void 0,
deep: true
});
function onValueChange(val) {
isUserAction.value = true;
if (props.multiple) {
const modelArray = Array.isArray(modelValue.value) ? [...modelValue.value] : [];
const index = modelArray.findIndex((i) => compare(i, val, props.by));
if (props.selectionBehavior === "toggle") {
index === -1 ? modelArray.push(val) : modelArray.splice(index, 1);
modelValue.value = modelArray;
} else {
modelValue.value = [val];
firstValue.value = val;
}
} else if (props.selectionBehavior === "toggle") if (compare(modelValue.value, val, props.by)) modelValue.value = void 0;
else modelValue.value = val;
else modelValue.value = val;
setTimeout(() => {
isUserAction.value = false;
}, 1);
}
const highlightedElement = ref(null);
const previousElement = ref(null);
const isVirtual = ref(false);
const isComposing = ref(false);
const virtualFocusHook = createEventHook();
const virtualKeydownHook = createEventHook();
const virtualHighlightHook = createEventHook();
function getCollectionItem() {
return getItems().map((i) => i.ref).filter((i) => i.dataset.disabled !== "");
}
function changeHighlight(el, scrollIntoView = true, focus) {
if (!el) return;
highlightedElement.value = el;
if (focus ?? focusable.value) highlightedElement.value.focus();
if (scrollIntoView) highlightedElement.value.scrollIntoView({ block: "nearest" });
const highlightedItem = getItems().find((i) => i.ref === el);
emits("highlight", highlightedItem);
}
function highlightItem(value) {
if (isVirtual.value) virtualHighlightHook.trigger(value);
else {
const item = getItems().find((i) => compare(i.value, value, props.by));
if (item) {
highlightedElement.value = item.ref;
changeHighlight(item.ref);
}
}
}
function onKeydownEnter(event) {
if (highlightedElement.value && highlightedElement.value.isConnected) {
if (event.ctrlKey || event.metaKey || event.altKey) return;
event.preventDefault();
event.stopPropagation();
if (!isComposing.value) highlightedElement.value.click();
}
}
function onKeydownTypeAhead(event) {
if (!focusable.value) return;
isUserAction.value = true;
if (isVirtual.value) virtualKeydownHook.trigger(event);
else {
const isMetaKey = event.altKey || event.ctrlKey || event.metaKey;
if (isMetaKey && event.key === "a" && multiple.value) {
const collection = getItems();
const values = collection.map((i) => i.value);
modelValue.value = [...values];
event.preventDefault();
const lastItem = collection.at(-1);
if (lastItem) changeHighlight(lastItem.ref);
} else if (!isMetaKey) {
const el = handleTypeaheadSearch(event.key, getItems());
if (el) changeHighlight(el);
}
}
setTimeout(() => {
isUserAction.value = false;
}, 1);
}
function onCompositionStart() {
isComposing.value = true;
}
function onCompositionEnd() {
nextTick(() => {
isComposing.value = false;
});
}
function highlightFirstItem() {
nextTick(() => {
onKeydownNavigation(new KeyboardEvent("keydown", { key: "PageUp" }));
});
}
function onLeave(event) {
const el = highlightedElement.value;
if (el?.isConnected) previousElement.value = el;
highlightedElement.value = null;
emits("leave", event);
}
function onEnter(event) {
const entryFocusEvent = new CustomEvent("listbox.entryFocus", {
bubbles: false,
cancelable: true
});
event.currentTarget?.dispatchEvent(entryFocusEvent);
emits("entryFocus", entryFocusEvent);
if (entryFocusEvent.defaultPrevented) return;
if (previousElement.value) changeHighlight(previousElement.value);
else {
const el = getCollectionItem()?.[0];
changeHighlight(el);
}
}
function onKeydownNavigation(event) {
const intent = getFocusIntent(event, orientation.value, dir.value);
if (!intent) return;
let collection = getCollectionItem();
if (highlightedElement.value) {
if (intent === "last") collection.reverse();
else if (intent === "prev" || intent === "next") {
if (intent === "prev") collection.reverse();
const currentIndex = collection.indexOf(highlightedElement.value);
collection = collection.slice(currentIndex + 1);
}
handleMultipleReplace(event, collection[0]);
}
if (collection.length) {
const index = !highlightedElement.value && intent === "prev" ? collection.length - 1 : 0;
changeHighlight(collection[index]);
}
if (isVirtual.value) return virtualKeydownHook.trigger(event);
}
function handleMultipleReplace(event, targetEl) {
if (isVirtual.value || props.selectionBehavior !== "replace" || !multiple.value || !Array.isArray(modelValue.value)) return;
if ((event.altKey || event.ctrlKey || event.metaKey) && !event.shiftKey) return;
if (event.shiftKey) {
const collection = getItems().filter((i) => i.ref.dataset.disabled !== "");
let lastValue = collection.find((i) => i.ref === targetEl)?.value;
if (event.key === kbd.END) lastValue = collection.at(-1)?.value;
else if (event.key === kbd.HOME) lastValue = collection[0]?.value;
if (!lastValue || !firstValue.value) return;
const values = findValuesBetween(collection.map((i) => i.value), firstValue.value, lastValue);
modelValue.value = values;
}
}
async function highlightSelected(event, scroll = true) {
if (!isClient) return;
await nextTick();
if (isVirtual.value) virtualFocusHook.trigger({
event,
scroll
});
else {
const collection = getCollectionItem();
const item = collection.find((i) => i.dataset.state === "checked");
const focus = scroll ? void 0 : false;
if (item) changeHighlight(item, scroll, focus);
else if (collection.length) changeHighlight(collection[0], scroll, focus);
}
}
let hasHighlightedOnMount = false;
watch(modelValue, () => {
if (!isUserAction.value) {
const scroll = hasHighlightedOnMount;
hasHighlightedOnMount = true;
nextTick(() => {
highlightSelected(void 0, scroll);
});
}
}, {
immediate: true,
deep: true
});
__expose({
highlightedElement,
highlightItem,
highlightFirstItem,
highlightSelected,
getItems
});
provideListboxRootContext({
modelValue,
onValueChange,
multiple,
orientation,
dir,
disabled,
highlightOnHover,
highlightedElement,
isVirtual,
virtualFocusHook,
virtualKeydownHook,
virtualHighlightHook,
by: props.by,
firstValue,
selectionBehavior,
focusable,
onLeave,
onEnter,
changeHighlight,
onKeydownEnter,
onKeydownNavigation,
onKeydownTypeAhead,
onCompositionStart,
onCompositionEnd,
highlightFirstItem
});
return (_ctx, _cache) => {
return openBlock(), createBlock(unref(Primitive), {
ref_key: "primitiveElement",
ref: primitiveElement,
as: _ctx.as,
"as-child": _ctx.asChild,
dir: unref(dir),
"data-disabled": unref(disabled) ? "" : void 0,
onPointerleave: onLeave,
onFocusout: _cache[0] || (_cache[0] = async (event) => {
const target = event.relatedTarget || event.target;
await nextTick();
if (highlightedElement.value && unref(currentElement) && !unref(currentElement).contains(target)) onLeave(event);
})
}, {
default: withCtx(() => [renderSlot(_ctx.$slots, "default", { modelValue: unref(modelValue) }), unref(isFormControl) && _ctx.name ? (openBlock(), createBlock(unref(VisuallyHiddenInput_default), {
key: 0,
name: _ctx.name,
value: unref(modelValue),
disabled: unref(disabled),
required: _ctx.required
}, null, 8, [
"name",
"value",
"disabled",
"required"
])) : createCommentVNode("v-if", true)]),
_: 3
}, 8, [
"as",
"as-child",
"dir",
"data-disabled"
]);
};
}
});
//#endregion
//#region ../../node_modules/.pnpm/reka-ui@2.10.3_vue@3.5.41_typescript@5.9.3_/node_modules/reka-ui/dist/Listbox/ListboxContent.js
var ListboxContent_default = /* @__PURE__ */ defineComponent({
__name: "ListboxContent",
props: {
asChild: {
type: Boolean,
required: false
},
as: {
type: null,
required: false
}
},
setup(__props) {
const { CollectionSlot } = useCollection();
const rootContext = injectListboxRootContext();
const isClickFocus = refAutoReset(false, 10);
return (_ctx, _cache) => {
return openBlock(), createBlock(unref(CollectionSlot), null, {
default: withCtx(() => [createVNode(unref(Primitive), {
role: "listbox",
as: _ctx.as,
"as-child": _ctx.asChild,
tabindex: unref(rootContext).focusable.value ? unref(rootContext).highlightedElement.value ? "-1" : "0" : "-1",
"aria-orientation": unref(rootContext).orientation.value,
"aria-multiselectable": !!unref(rootContext).multiple.value,
"data-orientation": unref(rootContext).orientation.value,
onMousedown: _cache[0] || (_cache[0] = withModifiers(($event) => isClickFocus.value = true, ["left"])),
onFocus: _cache[1] || (_cache[1] = (ev) => {
if (unref(isClickFocus)) return;
unref(rootContext).onEnter(ev);
}),
onKeydown: [
_cache[2] || (_cache[2] = withKeys((event) => {
if (unref(rootContext).orientation.value === "vertical" && (event.key === "ArrowLeft" || event.key === "ArrowRight") || unref(rootContext).orientation.value === "horizontal" && (event.key === "ArrowUp" || event.key === "ArrowDown")) return;
event.preventDefault();
unref(rootContext).focusable.value && unref(rootContext).onKeydownNavigation(event);
}, [
"down",
"up",
"left",
"right",
"home",
"end"
])),
withKeys(unref(rootContext).onKeydownEnter, ["enter"]),
unref(rootContext).onKeydownTypeAhead
]
}, {
default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
_: 3
}, 8, [
"as",
"as-child",
"tabindex",
"aria-orientation",
"aria-multiselectable",
"data-orientation",
"onKeydown"
])]),
_: 3
});
};
}
});
//#endregion
//#region ../../node_modules/.pnpm/reka-ui@2.10.3_vue@3.5.41_typescript@5.9.3_/node_modules/reka-ui/dist/Listbox/ListboxFilter.js
var ListboxFilter_default = /* @__PURE__ */ defineComponent({
__name: "ListboxFilter",
props: {
modelValue: {
type: String,
required: false
},
autoFocus: {
type: Boolean,
required: false
},
disabled: {
type: Boolean,
required: false
},
asChild: {
type: Boolean,
required: false
},
as: {
type: null,
required: false,
default: "input"
}
},
emits: ["update:modelValue"],
setup(__props, { emit: __emit }) {
const props = __props;
const modelValue = useVModel(props, "modelValue", __emit, {
defaultValue: "",
passive: props.modelValue === void 0
});
const rootContext = injectListboxRootContext();
const { primitiveElement, currentElement } = usePrimitiveElement();
const disabled = computed(() => props.disabled || rootContext.disabled.value || false);
const activedescendant = ref();
watchSyncEffect(() => activedescendant.value = rootContext.highlightedElement.value?.id);
onMounted(() => {
rootContext.focusable.value = false;
setTimeout(() => {
if (props.autoFocus) currentElement.value?.focus();
}, 1);
});
onUnmounted(() => {
rootContext.focusable.value = true;
});
const { isComposing, shouldDeferInput, handleCompositionStart, handleCompositionUpdate, handleCompositionEnd } = useComposing((event) => {
modelValue.value = event.target.value;
rootContext.onCompositionEnd();
rootContext.highlightFirstItem();
});
function onCompositionStart() {
rootContext.onCompositionStart();
handleCompositionStart();
}
function handleInput(event) {
if (shouldDeferInput.value) return;
modelValue.value = event.target.value;
rootContext.highlightFirstItem();
}
function handleKeydownNavigation(event) {
if (isComposing.value) return;
event.preventDefault();
rootContext.onKeydownNavigation(event);
}
function handleKeydownEnter(event) {
if (isComposing.value) return;
rootContext.onKeydownEnter(event);
}
return (_ctx, _cache) => {
return openBlock(), createBlock(unref(Primitive), {
ref_key: "primitiveElement",
ref: primitiveElement,
as: _ctx.as,
"as-child": _ctx.asChild,
value: unref(modelValue),
disabled: disabled.value ? "" : void 0,
"data-disabled": disabled.value ? "" : void 0,
"aria-disabled": disabled.value ?? void 0,
"aria-activedescendant": activedescendant.value,
type: "text",
onKeydown: [withKeys(handleKeydownNavigation, [
"down",
"up",
"home",
"end"
]), withKeys(handleKeydownEnter, ["enter"])],
onInput: handleInput,
onCompositionstart: onCompositionStart,
onCompositionupdate: unref(handleCompositionUpdate),
onCompositionend: unref(handleCompositionEnd)
}, {
default: withCtx(() => [renderSlot(_ctx.$slots, "default", { modelValue: unref(modelValue) })]),
_: 3
}, 8, [
"as",
"as-child",
"value",
"disabled",
"data-disabled",
"aria-disabled",
"aria-activedescendant",
"onCompositionupdate",
"onCompositionend"
]);
};
}
});
//#endregion
//#region ../../node_modules/.pnpm/reka-ui@2.10.3_vue@3.5.41_typescript@5.9.3_/node_modules/reka-ui/dist/Listbox/ListboxItem.js
var LISTBOX_SELECT = "listbox.select";
var [injectListboxItemContext, provideListboxItemContext] = /*#__PURE__*/ createContext("ListboxItem");
var ListboxItem_default = /* @__PURE__ */ defineComponent({
__name: "ListboxItem",
props: {
value: {
type: null,
required: true
},
disabled: {
type: Boolean,
required: false
},
asChild: {
type: Boolean,
required: false
},
as: {
type: null,
required: false,
default: "div"
}
},
emits: ["select"],
setup(__props, { emit: __emit }) {
const props = __props;
const emits = __emit;
const id = useId$2(void 0, "reka-listbox-item");
const { CollectionItem } = useCollection();
const { forwardRef, currentElement } = useForwardExpose();
const rootContext = injectListboxRootContext();
const isHighlighted = computed(() => currentElement.value != null && currentElement.value === rootContext.highlightedElement.value);
const isSelected = computed(() => valueComparator(rootContext.modelValue.value, props.value, rootContext.by));
const disabled = computed(() => rootContext.disabled.value || props.disabled);
async function handleSelect(ev) {
emits("select", ev);
if (ev?.defaultPrevented) return;
if (!disabled.value && ev) {
rootContext.onValueChange(props.value);
rootContext.changeHighlight(currentElement.value);
}
}
function handleSelectCustomEvent(ev) {
const eventDetail = {
originalEvent: ev,
value: props.value
};
handleAndDispatchCustomEvent(LISTBOX_SELECT, handleSelect, eventDetail);
}
provideListboxItemContext({ isSelected });
return (_ctx, _cache) => {
return openBlock(), createBlock(unref(CollectionItem), { value: _ctx.value }, {
default: withCtx(() => [withMemo([
isHighlighted.value,
isSelected.value,
disabled.value,
unref(rootContext).focusable.value
], () => createVNode(unref(Primitive), mergeProps({ id: unref(id) }, _ctx.$attrs, {
ref: unref(forwardRef),
role: "option",
tabindex: unref(rootContext).focusable.value ? isHighlighted.value ? "0" : "-1" : -1,
"aria-selected": isSelected.value,
as: _ctx.as,
"as-child": _ctx.asChild,
disabled: disabled.value ? "" : void 0,
"data-disabled": disabled.value ? "" : void 0,
"data-highlighted": isHighlighted.value ? "" : void 0,
"data-state": isSelected.value ? "checked" : "unchecked",
onClick: handleSelectCustomEvent,
onKeydown: withKeys(withModifiers(handleSelectCustomEvent, ["prevent"]), ["space"]),
onPointermove: _cache[0] || (_cache[0] = () => {
if (unref(rootContext).highlightedElement.value === unref(currentElement)) return;
if (unref(rootContext).highlightOnHover.value) unref(rootContext).changeHighlight(unref(currentElement), false, false);
})
}), {
default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
_: 3
}, 16, [
"id",
"tabindex",
"aria-selected",
"as",
"as-child",
"disabled",
"data-disabled",
"data-highlighted",
"data-state",
"onKeydown"
]), _cache, 1)]),
_: 3
}, 8, ["value"]);
};
}
});
//#endregion
//#region ../../node_modules/.pnpm/reka-ui@2.10.3_vue@3.5.41_typescript@5.9.3_/node_modules/reka-ui/dist/Listbox/ListboxItemIndicator.js
var ListboxItemIndicator_default = /* @__PURE__ */ defineComponent({
__name: "ListboxItemIndicator",
props: {
asChild: {
type: Boolean,
required: false
},
as: {
type: null,
required: false,
default: "span"
}
},
setup(__props) {
const props = __props;
useForwardExpose();
const itemContext = injectListboxItemContext();
return (_ctx, _cache) => {
return unref(itemContext).isSelected.value ? (openBlock(), createBlock(unref(Primitive), mergeProps({
key: 0,
"aria-hidden": "true"
}, props), {
default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
_: 3
}, 16)) : createCommentVNode("v-if", true);
};
}
});
//#endregion
//#region ../../node_modules/.pnpm/reka-ui@2.10.3_vue@3.5.41_typescript@5.9.3_/node_modules/reka-ui/dist/Combobox/ComboboxRoot.js
var [injectComboboxRootContext, provideComboboxRootContext] = /*#__PURE__*/ createContext("ComboboxRoot");
var ComboboxRoot_default = /* @__PURE__ */ defineComponent({
__name: "ComboboxRoot",
props: {
open: {
type: Boolean,
required: false,
default: void 0
},
defaultOpen: {
type: Boolean,
required: false
},
resetSearchTermOnBlur: {
type: Boolean,
required: false,
default: true
},
resetSearchTermOnSelect: {
type: Boolean,
required: false,
default: true
},
openOnFocus: {
type: Boolean,
required: false,
default: false
},
openOnClick: {
type: Boolean,
required: false,
default: false
},
ignoreFilter: {
type: Boolean,
required: false
},
resetModelValueOnClear: {
type: Boolean,
required: false,
default: false
},
modelValue: {
type: null,
required: false
},
defaultValue: {
type: null,
required: false
},
multiple: {
type: Boolean,
required: false
},
dir: {
type: String,
required: false
},
disabled: {
type: Boolean,
required: false
},
highlightOnHover: {
type: Boolean,
required: false,
default: true
},
by: {
type: [String, Function],
required: false
},
asChild: {
type: Boolean,
required: false
},
as: {
type: null,
required: false
},
name: {
type: String,
required: false
},
required: {
type: Boolean,
required: false
}
},
emits: [
"update:modelValue",
"highlight",
"update:open"
],
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emits = __emit;
const { primitiveElement, currentElement: parentElement } = usePrimitiveElement();
const { multiple, disabled, ignoreFilter, resetSearchTermOnSelect, openOnFocus, openOnClick, dir: propDir, resetModelValueOnClear, highlightOnHover } = toRefs(props);
const dir = useDirection(propDir);
const modelValue = useVModel(props, "modelValue", emits, {
defaultValue: props.defaultValue ?? (multiple.value ? [] : void 0),
passive: props.modelValue === void 0,
deep: true
});
const open = useVModel(props, "open", emits, {
defaultValue: props.defaultOpen,
passive: props.open === void 0
});
async function onOpenChange(val) {
open.value = val;
filterSearch.value = "";
if (val) {
await nextTick();
primitiveElement.value?.highlightSelected();
isUserInputted.value = true;
inputElement.value?.focus();
} else {
isUserInputted.value = false;
setTimeout(() => {
if (!val && props.resetSearchTermOnBlur) resetSearchTerm.trigger();
}, 1);
}
}
const resetSearchTerm = createEventHook();
const isUserInputted = ref(false);
const isVirtual = ref(false);
const inputElement = ref();
const triggerElement = ref();
const highlightedElement = computed(() => primitiveElement.value?.highlightedElement ?? void 0);
const allItems = ref(/* @__PURE__ */ new Map());
const allGroups = ref(/* @__PURE__ */ new Map());
const { contains } = useFilter({ sensitivity: "base" });
const filterSearch = ref("");
const filterState = computed((oldValue) => {
if (!filterSearch.value || props.ignoreFilter || isVirtual.value) return {
count: allItems.value.size,
items: oldValue?.items ?? /* @__PURE__ */ new Map(),
groups: oldValue?.groups ?? new Set(allGroups.value.keys())
};
let itemCount = 0;
const filteredItems = /* @__PURE__ */ new Map();
const filteredGroups = /* @__PURE__ */ new Set();
for (const [id, value] of allItems.value) {
const score = contains(value, filterSearch.value);
filteredItems.set(id, score ? 1 : 0);
if (score) itemCount++;
}
for (const [groupId, group] of allGroups.value) for (const itemId of group) if (filteredItems.get(itemId) > 0) {
filteredGroups.add(groupId);
break;
}
return {
count: itemCount,
items: filteredItems,
groups: filteredGroups
};
});
const inst = getCurrentInstance();
onMounted(() => {
if (inst?.exposed) {
inst.exposed.highlightItem = primitiveElement.value?.highlightItem;
inst.exposed.highlightFirstItem = primitiveElement.value?.highlightFirstItem;
inst.exposed.highlightSelected = primitiveElement.value?.highlightSelected;
}
});
__expose({
filtered: filterState,
highlightedElement,
highlightItem: primitiveElement.value?.highlightItem,
highlightFirstItem: primitiveElement.value?.highlightFirstItem,
highlightSelected: primitiveElement.value?.highlightSelected
});
provideComboboxRootContext({
modelValue,
multiple,
disabled,
open,
onOpenChange,
contentId: "",
isUserInputted,
isVirtual,
inputElement,
highlightedElement,
onInputElementChange: (val) => inputElement.value = val,
triggerElement,
onTriggerElementChange: (val) => triggerElement.value = val,
parentElement,
resetSearchTermOnSelect,
onResetSearchTerm: resetSearchTerm.on,
allItems,
allGroups,
filterSearch,
filterState,
ignoreFilter,
openOnFocus,
openOnClick,
resetModelValueOnClear
});
return (_ctx, _cache) => {
return openBlock(), createBlock(unref(PopperRoot_default), null, {
default: withCtx(() => [createVNode(unref(ListboxRoot_default), mergeProps({
ref_key: "primitiveElement",
ref: primitiveElement
}, _ctx.$attrs, {
modelValue: unref(modelValue),
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(modelValue) ? modelValue.value = $event : null),
style: { pointerEvents: unref(open) ? "auto" : void 0 },
as: _ctx.as,
"as-child": _ctx.asChild,
dir: unref(dir),
multiple: unref(multiple),
name: _ctx.name,
required: _ctx.required,
disabled: unref(disabled),
"highlight-on-hover": unref(highlightOnHover),
by: props.by,
onHighlight: _cache[1] || (_cache[1] = ($event) => emits("highlight", $event))
}), {
default: withCtx(() => [renderSlot(_ctx.$slots, "default", {
open: unref(open),
modelValue: unref(modelValue)
})]),
_: 3
}, 16, [
"modelValue",
"style",
"as",
"as-child",
"dir",
"multiple",
"name",
"required",
"disabled",
"highlight-on-hover",
"by"
])]),
_: 3
});
};
}
});
//#endregion
//#region ../../node_modules/.pnpm/reka-ui@2.10.3_vue@3.5.41_typescript@5.9.3_/node_modules/reka-ui/dist/Combobox/ComboboxAnchor.js
var ComboboxAnchor_default = /* @__PURE__ */ defineComponent({
__name: "ComboboxAnchor",
props: {
reference: {
type: null,
required: false
},
asChild: {
type: Boolean,
required: false
},
as: {
type: null,
required: false
}
},
setup(__props) {
const { forwardRef } = useForwardExpose();
return (_ctx, _cache) => {
return openBlock(), createBlock(unref(PopperAnchor_default), {
"as-child": "",
reference: _ctx.reference
}, {
default: withCtx(() => [createVNode(unref(Primitive), mergeProps({
ref: unref(forwardRef),
"as-child": _ctx.asChild,
as: _ctx.as
}, _ctx.$attrs), {
default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
_: 3
}, 16, ["as-child", "as"])]),
_: 3
}, 8, ["reference"]);
};
}
});
//#endregion
//#region ../../node_modules/.pnpm/reka-ui@2.10.3_vue@3.5.41_typescript@5.9.3_/node_modules/reka-ui/dist/Combobox/ComboboxContentImpl.js
var [injectComboboxContentContext, provideComboboxContentContext] = /*#__PURE__*/ createContext("ComboboxContent");
var ComboboxContentImpl_default = /* @__PURE__ */ defineComponent({
__name: "ComboboxContentImpl",
props: {
position: {
type: String,
required: false,
default: "inline"
},
bodyLock: {
type: Boolean,
required: false
},
hideWhenEmpty: {
type: Boolean,
required: false
},
memoDependencies: {
type: Array,
required: false
},
side: {
type: null,
required: false
},
sideOffset: {
type: Number,
required: false
},
sideFlip: {
type: Boolean,
required: false
},
align: {
type: null,
required: false
},
alignOffset: {
type: Number,
required: false
},
alignFlip: {
type: Boolean,
required: false
},
avoidCollisions: {
type: Boolean,
required: false
},
collisionBoundary: {
type: null,
required: false
},
collisionPadding: {
type: [Number, Object],
required: false
},
arrowPadding: {
type: Number,
required: false
},
hideShiftedArrow: {
type: Boolean,
required: false
},
sticky: {
type: String,
required: false
},
hideWhenDetached: {
type: Boolean,
required: false
},
positionStrategy: {
type: String,
required: false
},
updatePositionStrategy: {
type: String,
required: false
},
disableUpdateOnLayoutShift: {
type: Boolean,
required: false
},
prioritizePosition: {
type: Boolean,
required: false
},
reference: {
type: null,
required: false
},
dir: {
type: String,
required: false
},
asChild: {
type: Boolean,
required: false
},
as: {
type: null,
required: false
},
disableOutsidePointerEvents: {
type: Boolean,
required: false
}
},
emits: [
"escapeKeyDown",
"pointerDownOutside",
"focusOutside",
"interactOutside"
],
setup(__props, { emit: __emit }) {
const props = __props;
const emits = __emit;
const { position } = toRefs(props);
const rootContext = injectComboboxRootContext();
const isEmpty = computed(() => rootContext.ignoreFilter.value ? rootContext.allItems.value.size === 0 : rootContext.filterState.value.count === 0);
const { forwardRef, currentElement } = useForwardExpose();
useBodyScrollLock(props.bodyLock);
useFocusGuards();
useHideOthers(rootContext.parentElement);
const pickedProps = computed(() => {
if (props.position === "popper") return props;
else return {};
});
const forwardedProps = useForwardProps(pickedProps.value);
const popperStyle = {
"boxSizing": "border-box",
"--reka-combobox-content-transform-origin": "var(--reka-popper-transform-origin)",
"--reka-combobox-content-available-width": "var(--reka-popper-available-width)",
"--reka-combobox-content-available-height": "var(--reka-popper-available-height)",
"--reka-combobox-trigger-width": "var(--reka-popper-anchor-width)",
"--reka-combobox-trigger-height": "var(--reka-popper-anchor-height)"
};
provideComboboxContentContext({ position });
const isInputWithinContent = ref(false);
onMounted(() => {
if (rootContext.inputElement.value) {
isInputWithinContent.value = currentElement.value.contains(rootContext.inputElement.value);
if (isInputWithinContent.value) rootContext.inputElement.value.focus();
}
});
onUnmounted(() => {
const activeElement = getActiveElement();
if (isInputWithinContent.value && (!activeElement || activeElement === document.body)) rootContext.triggerElement.value?.focus();
});
function isEventTargetWithinCombobox(target) {
if (rootContext.parentElement.value?.contains(target)) return true;
const control = (target instanceof Element ? target.closest("label") : null)?.control;
return !!control && !!rootContext.parentElement.value?.contains(control);
}
return (_ctx, _cache) => {
return openBlock(), createBlock(unref(ListboxContent_default), { "as-child": "" }, {
default: withCtx(() => [createVNode(unref(FocusScope_default), {
"as-child": "",
onMountAutoFocus: _cache[5] || (_cache[5] = withModifiers(() => {}, ["prevent"])),
onUnmountAutoFocus: _cache[6] || (_cache[6] = withModifiers(() => {}, ["prevent"]))
}, {
default: withCtx(() => [createVNode(unref(DismissableLayer_default), {
"as-child": "",
"disable-outside-pointer-events": _ctx.disableOutsidePointerEvents,
onDismiss: _cache[0] || (_cache[0] = ($event) => unref(rootContext).onOpenChange(false)),
onFocusOutside: _cache[1] || (_cache[1] = (ev) => {
if (isEventTargetWithinCombobox(ev.target)) ev.preventDefault();
emits("focusOutside", ev);
}),
onInteractOutside: _cache[2] || (_cache[2] = ($event) => emits("interactOutside", $event)),
onEscapeKeyDown: _cache[3] || (_cache[3] = ($event) => emits("escapeKeyDown", $event)),
onPointerDownOutside: _cache[4] || (_cache[4] = (ev) => {
if (isEventTargetWithinCombobox(ev.target)) ev.preventDefault();
emits("pointerDownOutside", ev);
})
}, {
default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(unref(position) === "popper" ? unref(PopperContent_default) : unref(Primitive)), mergeProps({
..._ctx.$attrs,
...unref(forwardedProps)
}, {
id: unref(rootContext).contentId,
ref: unref(forwardRef),
"memo-dependencies": unref(position) === "popper" ? [unref(rootContext).filterSearch.value, unref(rootContext).filterState.value] : void 0,
"data-state": unref(rootContext).open.value ? "open" : "closed",
"data-empty": isEmpty.value ? "" : void 0,
style: {
display: props.hideWhenEmpty && isEmpty.value ? "none" : "flex",
flexDirection: "column",
outline: "none",
...unref(position) === "popper" ? popperStyle : {}
}
}), {
default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
_: 3
}, 16, [
"id",
"memo-dependencies",
"data-state",
"data-empty",
"style"
]))]),
_: 3
}, 8, ["disable-outside-pointer-events"])]),
_: 3
})]),
_: 3
});
};
}
});
//#endregion
//#region ../../node_modules/.pnpm/reka-ui@2.10.3_vue@3.5.41_typescript@5.9.3_/node_modules/reka-ui/dist/Combobox/ComboboxContent.js
var ComboboxContent_default = /* @__PURE__ */ defineComponent({
__name: "ComboboxContent",
props: {
forceMount: {
type: Boolean,
required: false
},
position: {
type: String,
required: false
},
bodyLock: {
type: Boolean,
required: false
},
hideWhenEmpty: {
type: Boolean,
required: false
},
memoDependencies: {
type: Array,
required: false
},
side: {
type: null,
required: false
},
sideOffset: {
type: Number,
required: false
},
sideFlip: {
type: Boolean,
required: false
},
align: {
type: null,
required: false
},
alignOffset: {
type: Number,
required: false
},
alignFlip: {
type: Boolean,
required: false
},
avoidCollisions: {
type: Boolean,
required: false
},
collisionBoundary: {
type: null,
required: false
},
collisionPadding: {
type: [Number, Object],
required: false
},
arrowPadding: {
type: Number,
required: false
},
hideShiftedArrow: {
type: Boolean,
required: false
},
sticky: {
type: String,
required: false
},
hideWhenDetached: {
type: Boolean,
required: false
},
positionStrategy: {
type: String,
required: false
},
updatePositionStrategy: {
type: String,
required: false
},
disableUpdateOnLayoutShift: {
type: Boolean,
required: false
},
prioritizePosition: {
type: Boolean,
required: false
},
reference: {
type: null,
required: false
},
dir: {
type: String,
required: false
},
asChild: {
type: Boolean,
required: false
},
as: {
type: null,
required: false
},
disableOutsidePointerEvents: {
type: Boolean,
required: false
}
},
emits: [
"escapeKeyDown",
"pointerDownOutside",
"focusOutside",
"interactOutside"
],
setup(__props, { emit: __emit }) {
const forwarded = useForwardPropsEmits(__props, __emit);
const { forwardRef } = useForwardExpose();
const rootContext = injectComboboxRootContext();
rootContext.contentId ||= useId$2(void 0, "reka-combobox-content");
return (_ctx, _cache) => {
return openBlock(), createBlock(unref(Presence_default), { present: _ctx.forceMount || unref(rootContext).open.value }, {
default: withCtx(() => [createVNode(ComboboxContentImpl_default, mergeProps({
...unref(forwarded),
..._ctx.$attrs
}, { ref: unref(forwardRef) }), {
default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
_: 3
}, 16)]),
_: 3
}, 8, ["present"]);
};
}
});
//#endregion
//#region ../../node_modules/.pnpm/reka-ui@2.10.3_vue@3.5.41_typescript@5.9.3_/node_modules/reka-ui/dist/Combobox/ComboboxEmpty.js
var ComboboxEmpty_default = /* @__PURE__ */ defineComponent({
__name: "ComboboxEmpty",
props: {
asChild: {
type: Boolean,
required: false
},
as: {
type: null,
required: false
}
},
setup(__props) {
const props = __props;
const rootContext = injectComboboxRootContext();
const isRender = computed(() => rootContext.ignoreFilter.value ? rootContext.allItems.value.size === 0 : rootContext.filterState.value.count === 0);
return (_ctx, _cache) => {
return isRender.value ? (openBlock(), createBlock(unref(Primitive), normalizeProps(mergeProps({ key: 0 }, props)), {
default: withCtx(() => [renderSlot(_ctx.$slots, "default", {}, () => [_cache[0] || (_cache[0] = createTextVNode("No options"))])]),
_: 3
}, 16)) : createCommentVNode("v-if", true);
};
}
});
//#endregion
//#region ../../node_modules/.pnpm/reka-ui@2.10.3_vue@3.5.41_typescript@5.9.3_/node_modules/reka-ui/dist/Combobox/ComboboxGroup.js
var [injectComboboxGroupContext, provideComboboxGroupContext] = /*#__PURE__*/ createContext("ComboboxGroup");
//#endregion
//#region ../../node_modules/.pnpm/reka-ui@2.10.3_vue@3.5.41_typescript@5.9.3_/node_modules/reka-ui/dist/Combobox/ComboboxInput.js
var ComboboxInput_default = /* @__PURE__ */ defineComponent({
__name: "ComboboxInput",
props: {
displayValue: {
type: Function,
required: false
},
modelValue: {
type: String,
required: false
},
autoFocus: {
type: Boolean,
required: false
},
disabled: {
type: Boolean,
required: false
},
asChild: {
type: Boolean,
required: false
},
as: {
type: null,
required: false,
default: "input"
}
},
emits: ["update:modelValue"],
setup(__props, { emit: __emit }) {
const props = __props;
const emits = __emit;
const rootContext = injectComboboxRootContext();
const listboxContext = injectListboxRootContext();
const { primitiveElement, currentElement } = usePrimitiveElement();
const modelValue = useVModel(props, "modelValue", emits, { passive: props.modelValue === void 0 });
onMounted(() => {
if (currentElement.value) rootContext.onInputElementChange(currentElement.value);
});
const { isComposing, shouldDeferInput, handleCompositionStart, handleCompositionUpdate, handleCompositionEnd } = useComposing((event) => {
const el = event.target;
if (el) processInputValue(el.value);
});
function handleKeyDown(ev) {
if (isComposing.value) return;
ev.preventDefault();
if (!rootContext.open.value) rootContext.onOpenChange(true);
}
function processInputValue(value) {
if (!rootContext.open.value) {
rootContext.onOpenChange(true);
nextTick(() => {
if (value) {
rootContext.filterSearch.value = value;
listboxContext.highlightFirstItem();
}
});
} else rootContext.filterSearch.value = value;
}
function handleInput(event) {
if (shouldDeferInput.value) return;
processInputValue(event.target.value);
}
function handleFocus() {
if (rootContext.openOnFocus.value && !rootContext.open.value) rootContext.onOpenChange(true);
}
function handleBlur(ev) {
if (!rootContext.open.value) return;
const nextFocus = ev.relatedTarget;
if (!nextFocus) return;
const isInsideRoot = rootContext.parentElement.value?.contains(nextFocus);
const isInsideContent = document.getElementById(rootContext.contentId)?.contains(nextFocus);
if (!isInsideRoot && !isInsideContent) requestAnimationFrame(() => {
if (!rootContext.open.value) return;
const active = document.activeElement;
if (!rootContext.parentElement.value?.contains(active) && !document.getElementById(rootContext.contentId)?.contains(active)) rootContext.onOpenChange(false);
});
}
function handleClick() {
if (rootContext.openOnClick.value && !rootContext.open.value) rootContext.onOpenChange(true);
}
function resetSearchTerm() {
const rootModelValue = rootContext.modelValue.value;
if (props.displayValue) modelValue.value = props.displayValue(rootModelValue);
else if (!rootContext.multiple.value && rootModelValue && !Array.isArray(rootModelValue)) if (typeof rootModelValue !== "object") modelValue.value = rootModelValue.toString();
else modelValue.value = "";
else modelValue.value = "";
nextTick(() => {
modelValue.value = modelValue.value;
});
}
rootContext.onResetSearchTerm(() => {
resetSearchTerm();
});
watch(rootContext.modelValue, async () => {
if (!rootContext.isUserInputted.value && rootContext.resetSearchTermOnSelect.value) resetSearchTerm();
}, {
immediate: true,
deep: true
});
watch(rootContext.filterState, (_newValue, oldValue) => {
if (!rootContext.isVirtual.value && oldValue.count === 0) listboxContext.highlightFirstItem();
});
return (_ctx, _cache) => {
return openBlock(), createBlock(unref(ListboxFilter_default), {
ref_key: "primitiveElement",
ref: primitiveElement,
modelValue: unref(modelValue),
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(modelValue) ? modelValue.value = $event : null),
as: _ctx.as,
"as-child": _ctx.asChild,
"auto-focus": _ctx.autoFocus,
disabled: _ctx.disabled,
"aria-expanded": unref(rootContext).open.value,
"aria-controls": unref(rootContext).contentId,
"aria-autocomplete": "list",
role: "combobox",
autocomplete: "off",
onClick: handleClick,
onInput: handleInput,
onKeydown: withKeys(handleKeyDown, ["down", "up"]),
onFocus: handleFocus,
onBlur: handleBlur,
onCompositionstart: unref(handleCompositionStart),
onCompositionupdate: unref(handleCompositionUpdate),
onCompositionend: unref(handleCompositionEnd)
}, {
default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
_: 3
}, 8, [
"modelValue",
"as",
"as-child",
"auto-focus",
"disabled",
"aria-expanded",
"aria-controls",
"onCompositionstart",
"onCompositionupdate",
"onCompositionend"
]);
};
}
});
//#endregion
//#region ../../node_modules/.pnpm/reka-ui@2.10.3_vue@3.5.41_typescript@5.9.3_/node_modules/reka-ui/dist/Combobox/ComboboxItem.js
var ComboboxItem_default = /* @__PURE__ */ defineComponent({
__name: "ComboboxItem",
props: {
textValue: {
type: String,
required: false
},
value: {
type: null,
required: true
},
disabled: {
type: Boolean,
required: false
},
asChild: {
type: Boolean,
required: false
},
as: {
type: null,
required: false
}
},
emits: ["select"],
setup(__props, { emit: __emit }) {
const props = __props;
const emits = __emit;
const id = useId$2(void 0, "reka-combobox-item");
const rootContext = injectComboboxRootContext();
const groupContext = injectComboboxGroupContext(null);
const { primitiveElement, currentElement } = usePrimitiveElement();
if (props.value === "") throw new Error("A <ComboboxItem /> must have a value prop that is not an empty string. This is because the Combobox value can be set to an empty string to clear the selection and show the placeholder.");
const isRender = computed(() => {
if (rootContext.isVirtual.value || rootContext.ignoreFilter.value || !rootContext.filterSearch.value) return true;
else {
const filteredCurrentItem = rootContext.filterState.value.items.get(id);
if (filteredCurrentItem === void 0) return true;
return filteredCurrentItem > 0;
}
});
onMounted(() => {
rootContext.allItems.value.set(id, props.textValue || currentElement.value.textContent || currentElement.value.innerText);
const groupId = groupContext?.id;
if (groupId) if (!rootContext.allGroups.value.has(groupId)) rootContext.allGroups.value.set(groupId, /* @__PURE__ */ new Set([id]));
else rootContext.allGroups.value.get(groupId)?.add(id);
});
onUnmounted(() => {
rootContext.allItems.value.delete(id);
});
return (_ctx, _cache) => {
return isRender.value ? withMemo([
isRender.value,
unref(rootContext).filterSearch.value,
unref(rootContext).disabled.value,
_ctx.disabled,
props.value,
props.as,
props.asChild,
...Object.values(_ctx.$attrs)
], () => (openBlock(), createBlock(unref(ListboxItem_default), mergeProps({ key: 0 }, props, {
id: unref(id),
ref_key: "primitiveElement",
ref: primitiveElement,
disabled: unref(rootContext).disabled.value || _ctx.disabled,
onSelect: _cache[0] || (_cache[0] = (event) => {
emits("select", event);
if (event.defaultPrevented) return;
if (!unref(rootContext).multiple.value && !_ctx.disabled && !unref(rootContext).disabled.value) {
event.preventDefault();
unref(rootContext).onOpenChange(false);
unref(rootContext).modelValue.value = props.value;
} else if (unref(rootContext).multiple.value) unref(rootContext).inputElement.value?.focus();
})
}), {
default: withCtx(() => [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(_ctx.value), 1)])]),
_: 3
}, 16, ["id", "disabled"])), _cache, 1) : createCommentVNode("v-if", true);
};
}
});
//#endregion
//#region ../../node_modules/.pnpm/reka-ui@2.10.3_vue@3.5.41_typescript@5.9.3_/node_modules/reka-ui/dist/Combobox/ComboboxItemIndicator.js
var ComboboxItemIndicator_default = /* @__PURE__ */ defineComponent({
__name: "ComboboxItemIndicator",
props: {
asChild: {
type: Boolean,
required: false
},
as: {
type: null,
required: false,
default: "span"
}
},
setup(__props) {
const props = __props;
return (_ctx, _cache) => {
return openBlock(), createBlock(unref(ListboxItemIndicator_default), normalizeProps(guardReactiveProps(props)), {
default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
_: 3
}, 16);
};
}
});
//#endregion
//#region ../../node_modules/.pnpm/reka-ui@2.10.3_vue@3.5.41_typescript@5.9.3_/node_modules/reka-ui/dist/Combobox/ComboboxPortal.js
var ComboboxPortal_default = /* @__PURE__ */ defineComponent({
__name: "ComboboxPortal",
props: {
to: {
type: null,
required: false
},
disabled: {
type: Boolean,
required: false
},
defer: {
type: Boolean,
required: false
},
forceMount: {
type: Boolean,
required: false
}
},
setup(__props) {
const props = __props;
return (_ctx, _cache) => {
return openBlock(), createBlock(unref(Teleport_default), normalizeProps(guardReactiveProps(props)), {
default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
_: 3
}, 16);
};
}
});
//#endregion
//#region ../../node_modules/.pnpm/reka-ui@2.10.3_vue@3.5.41_typescript@5.9.3_/node_modules/reka-ui/dist/Combobox/ComboboxTrigger.js
var ComboboxTrigger_default = /* @__PURE__ */ defineComponent({
__name: "ComboboxTrigger",
props: {
disabled: {
type: Boolean,
required: false
},
asChild: {
type: Boolean,
required: false
},
as: {
type: null,
required: false,
default: "button"
}
},
setup(__props) {
const props = __props;
const { forwardRef, currentElement } = useForwardExpose();
const rootContext = injectComboboxRootContext();
const disabled = computed(() => props.disabled || rootContext.disabled.value || false);
onMounted(() => {
if (currentElement.value) rootContext.onTriggerElementChange(currentElement.value);
});
return (_ctx, _cache) => {
return openBlock(), createBlock(unref(Primitive), mergeProps(props, {
ref: unref(forwardRef),
type: _ctx.as === "button" ? "button" : void 0,
tabindex: "-1",
"aria-label": "Show popup",
"aria-haspopup": "listbox",
"aria-expanded": unref(rootContext).open.value,
"aria-controls": unref(rootContext).contentId,
"data-state": unref(rootContext).open.value ? "open" : "closed",
disabled: disabled.value,
"data-disabled": disabled.value ? "" : void 0,
"aria-disabled": disabled.value ?? void 0,
onClick: _cache[0] || (_cache[0] = ($event) => unref(rootContext).onOpenChange(!unref(rootContext).open.value))
}), {
default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
_: 3
}, 16, [
"type",
"aria-expanded",
"aria-controls",
"data-state",
"disabled",
"data-disabled",
"aria-disabled"
]);
};
}
});
//#endregion
//#region ../../node_modules/.pnpm/reka-ui@2.10.3_vue@3.5.41_typescript@5.9.3_/node_modules/reka-ui/dist/shared/useNonce.js
function useNonce(nonce) {
const context = injectConfigProviderContext({ nonce: ref() });
return computed(() => nonce?.value || context.nonce?.value);
}
//#endregion
//#region ../../node_modules/.pnpm/reka-ui@2.10.3_vue@3.5.41_typescript@5.9.3_/node_modules/reka-ui/dist/Combobox/ComboboxViewport.js
var ComboboxViewport_default = /* @__PURE__ */ defineComponent({
__name: "ComboboxViewport",
props: {
nonce: {
type: String,
required: false
},
asChild: {
type: Boolean,
required: false
},
as: {
type: null,
required: false
}
},
setup(__props) {
const props = __props;
const { forwardRef } = useForwardExpose();
const { nonce: propNonce } = toRefs(props);
const nonce = useNonce(propNonce);
const rootContext = injectComboboxRootContext();
return (_ctx, _cache) => {
return openBlock(), createElementBlock(Fragment, null, [createVNode(unref(Primitive), mergeProps({
..._ctx.$attrs,
...props
}, {
ref: unref(forwardRef),
"data-reka-combobox-viewport": "",
role: "presentation",
style: {
position: "relative",
flex: unref(rootContext).isVirtual.value ? void 0 : 1,
overflow: "auto"
}
}), {
default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
_: 3
}, 16, ["style"]), createVNode(unref(Primitive), {
as: "style",
nonce: unref(nonce)
}, {
default: withCtx(() => _cache[0] || (_cache[0] = [createTextVNode(" /* Hide scrollbars cross-browser and enable momentum scroll for touch devices */ [data-reka-combobox-viewport] { scrollbar-width:none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } [data-reka-combobox-viewport]::-webkit-scrollbar { display: none; } ")])),
_: 1,
__: [0]
}, 8, ["nonce"])], 64);
};
}
});
//#endregion
//#region src/components/BAutocomplete/BAutocomplete.vue?vue&type=script&setup=true&lang.ts
var _hoisted_1 = { key: 0 };
var _hoisted_2 = { class: "b-autocomplete-input-wrapper" };
//#endregion
//#region src/components/BAutocomplete/BAutocomplete.vue
var BAutocomplete_default = /* @__PURE__ */ defineComponent({
__name: "BAutocomplete",
props: /*@__PURE__*/ mergeModels({
ariaInvalid: {
type: [Boolean, String],
default: void 0
},
autocomplete: { default: void 0 },
autofocus: {
type: Boolean,
default: false
},
by: {
type: [String, Function],
default: void 0
},
dir: { default: void 0 },
disabled: {
type: Boolean,
default: false
},
disabledField: { default: "disabled" },
filterFunction: {
type: Function,
default: void 0
},
form: { default: void 0 },
formatter: {
type: Function,
default: void 0
},
id: { default: void 0 },
lazyFormatter: {
type: Boolean,
default: false
},
multiple: {
type: Boolean,
default: false
},
name: { default: void 0 },
noClearButton: {
type: Boolean,
default: false
},
noToggle: {
type: Boolean,
default: false
},
open: { type: Boolean },
openOnFocus: {
type: Boolean,
default: false
},
options: { default: () => [] },
placeholder: { default: void 0 },
plaintext: {
type: Boolean,
default: false
},
readonly: {
type: Boolean,
default: false
},
required: {
type: Boolean,
default: false
},
resetSearchTermOnBlur: {
type: Boolean,
default: true
},
resetSearchTermOnSelect: {
type: Boolean,
default: true
},
size: { default: void 0 },
state: {
type: [Boolean, null],
default: void 0
},
tags: {
type: Boolean,
default: false
},
teleportTo: { default: void 0 },
textField: { default: "text" },
valueField: { default: "value" }
}, {
"modelValue": { default: void 0 },
"modelModifiers": {},
"open": {
type: Boolean,
default: false
},
"openModifiers": {},
"search": { default: "" },
"searchModifiers": {}
}),
emits: /*@__PURE__*/ mergeModels([
"blur",
"change",
"clear",
"focus"
], [
"update:modelValue",
"update:open",
"update:search"
]),
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, "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;
});
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;
if (props.filterFunction) return props.filterFunction(normalizedOptions.value, filterText);
if (!filterText) return normalizedOptions.value;
const term = filterText.toLowerCase();
return normalizedOptions.value.filter((opt) => String(opt.text).toLowerCase().includes(term));
});
const displayValueFn = (val) => {
if (val === null || val === void 0) return "";
if (props.multiple) return "";
return findOptionText(val);
};
const hasSelection = computed(() => {
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) => {
if (props.by && typeof props.by === "string") return opt.value?.[props.by] === val?.[props.by];
return opt.value === val;
})).filter((opt) => !!opt);
});
const removeSelected = (option) => {
if (!Array.isArray(modelValue.value)) return;
modelValue.value = modelValue.value.filter((val) => {
if (props.by && typeof props.by === "string") return val?.[props.by] !== option.value?.[props.by];
return val !== option.value;
});
emit("change", modelValue.value);
};
const optionKey = (option, index) => {
const val = option.value;
if (val !== null && val !== void 0 && typeof val !== "object") return String(val);
return index;
};
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;
emit("clear");
emit("change", modelValue.value);
_input.value?.focus();
};
const onOptionSelect = (option) => {
cacheSingleSelectedLabel(option.value, String(option.text));
nextTick(() => {
emit("change", modelValue.value);
});
_input.value?.focus();
};
const resetPendingDelete = () => {
pendingDelete.value = false;
};
const onInputKeydown = (event) => {
if (!props.multiple || !hasSelection.value) {
resetPendingDelete();
return;
}
if (event.key === "Backspace" && searchTerm.value === "") {
if (pendingDelete.value) {
const lastOpt = selectedOptions.value[selectedOptions.value.length - 1];
if (lastOpt) removeSelected(lastOpt);
pendingDelete.value = false;
} else pendingDelete.value = true;
return;
}
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[1] || (_cache[1] = ($event) => modelValue.value = $event),
open: isOpen.value,
"onUpdate:open": _cache[2] || (_cache[2] = ($event) => isOpen.value = $event),
multiple: unref(props).multiple,
disabled: unref(props).disabled,
name: unref(props).name,
required: unref(props).required,
"ignore-filter": unref(props).multiple || !!unref(props).filterFunction,
"reset-search-term-on-select": unref(props).resetSearchTermOnSelect,
"reset-search-term-on-blur": unref(props).resetSearchTermOnBlur,
by: unref(props).by,
dir: unref(props).dir,
"open-on-focus": unref(props).openOnFocus,
class: "b-autocomplete"
}, {
default: withCtx(() => [createVNode(unref(ComboboxAnchor_default), { "as-child": "" }, {
default: withCtx(() => [createVNode(BInputGroup_default, { size: unref(props).size }, {
append: withCtx(() => [!unref(props).noToggle ? (openBlock(), createBlock(unref(ComboboxTrigger_default), {
key: 0,
"as-child": "",
disabled: unref(props).disabled
}, {
default: withCtx(() => [renderSlot(_ctx.$slots, "toggle", {
isOpen: isOpen.value,
disabled: unref(props).disabled
}, () => [createVNode(BButton_default, {
class: "b-autocomplete-trigger",
disabled: unref(props).disabled
}, {
default: withCtx(() => [renderSlot(_ctx.$slots, "toggle-icon", { isOpen: isOpen.value }, () => [(openBlock(), createElementBlock("svg", {
xmlns: "http://www.w3.org/2000/svg",
width: "16",
height: "16",
fill: "currentColor",
viewBox: "0 0 16 16",
class: normalizeClass(["b-autocomplete-chevron", { "b-autocomplete-chevron-open": isOpen.value }])
}, [..._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"])])]),
_: 3
}, 8, ["disabled"])) : createCommentVNode("", true)]),
default: withCtx(() => [unref(props).multiple && hasSelection.value ? (openBlock(), createElementBlock("div", {
key: 0,
class: normalizeClass(["b-autocomplete-selection", {
"b-autocomplete-selection-tags": unref(props).tags,
"b-autocomplete-selection-pending-delete": pendingDelete.value
}])
}, [unref(props).tags ? renderSlot(_ctx.$slots, "tags", {
pendingDelete: pendingDelete.value,
selected: selectedOptions.value,
remove: removeSelected
}, () => [(openBlock(true), createElementBlock(Fragment, null, renderList(selectedOptions.value, (opt, i) => {
return openBlock(), createBlock(BFormTag_default, {
key: optionKey(opt, i),
title: String(opt.text),
disabled: unref(props).disabled,
variant: "secondary",
class: normalizeClass({
"b-autocomplete-tag-muted": pendingDelete.value && !isLastSelectedOption(opt, i),
"b-autocomplete-tag-pending-delete": pendingDelete.value && isLastSelectedOption(opt, i)
}),
onRemove: ($event) => removeSelected(opt)
}, {
default: withCtx(() => [createTextVNode(toDisplayString(opt.text), 1)]),
_: 2
}, 1032, [
"title",
"disabled",
"class",
"onRemove"
]);
}), 128))], void 0, 0) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(selectedOptions.value, (opt, i) => {
return openBlock(), createElementBlock("span", {
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), createElementVNode("div", _hoisted_2, [createVNode(unref(ComboboxInput_default), {
modelValue: searchTerm.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => searchTerm.value = $event),
"as-child": "",
"display-value": displayValueFn
}, {
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
}), createVNode(unref(ComboboxPortal_default), {
disabled: !unref(props).teleportTo,
to: unref(props).teleportTo
}, {
default: withCtx(() => [createVNode(unref(ComboboxContent_default), {
position: "popper",
"side-offset": 4,
align: "start",
class: normalizeClass([
"b-autocomplete-content",
"dropdown-menu",
"show"
]),
"body-lock": false,
style: { width: "var(--reka-combobox-trigger-width)" }
}, {
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[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"]),
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[5] || (_cache[5] = createElementVNode("svg", {
xmlns: "http://www.w3.org/2000/svg",
width: "16",
height: "16",
fill: "currentColor",
viewBox: "0 0 16 16"
}, [createElementVNode("path", { d: "M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z" })], -1))])]),
_: 3
})]),
_: 2
}, 1032, [
"value",
"disabled",
"onSelect"
]);
}), 128))]),
_: 3
})]),
_: 3
})]),
_: 3
}, 8, ["disabled", "to"])]),
_: 3
}, 8, [
"modelValue",
"open",
"multiple",
"disabled",
"name",
"required",
"ignore-filter",
"reset-search-term-on-select",
"reset-search-term-on-blur",
"by",
"dir",
"open-on-focus"
]);
};
}
});
//#endregion
export { BAutocomplete_default as t };
//# sourceMappingURL=BAutocomplete-BFbbKtpz.js.map