bootstrap-vue-next/dist/src/composables/usePopover/index.mjs

Seamless integration of Vue 3, Bootstrap 5, and TypeScript for modern, type-safe UI development

import { _ as orchestratorRegistryKey } from "../../../keys-CQKrwmvN.mjs";
import { buildPromise } from "../orchestratorShared/index.mjs";
import { l as BPopover_default } from "../../../floatingUi-DHMrP__c.mjs";
import { t as BTooltip_default } from "../../../BTooltip-DtpjIEBu.mjs";
import "../../components/index.mjs";
import { inject, isReadonly, isRef, markRaw, onScopeDispose, shallowRef, toValue, watch } from "vue";
//#region src/composables/usePopover/index.ts
var usePopover = () => {
	const orchestratorRegistry = inject(orchestratorRegistryKey, null);
	if (!orchestratorRegistry) throw new Error("usePopover() must be called within setup(), and BApp, useRegistry or plugin must be installed/provided.");
	const { store, _isOrchestratorInstalled } = orchestratorRegistry;
	/**
	* Create a popover or tooltip
	* @param obj The popover or tooltip props
	* @param tooltip If true, create a tooltip, otherwise create a popover
	* @returns {PromiseWithComponent<typeof BPopover | typeof BTooltip, PopoverOrchestratorParam>} A promise object with methods to control the popover (show, hide, toggle, get, set, destroy)
	*/
	const create = (obj, tooltip, options = { keep: true }) => {
		if (!_isOrchestratorInstalled.value) throw new Error("The BApp component must be mounted to use the popover controller");
		const resolvedProps = isRef(obj) ? obj : shallowRef(obj);
		const _self = resolvedProps.value?.id || Symbol("Popover controller");
		const promise = buildPromise(_self, store);
		promise.stop = watch(resolvedProps, (_newValue) => {
			const newValue = { ...toValue(_newValue) };
			const previousIndex = store.value.findIndex((el) => el._self === _self);
			const previous = previousIndex === -1 ? { _component: tooltip ? markRaw(BTooltip_default) : markRaw(BPopover_default) } : store.value[previousIndex];
			const v = tooltip ? {
				...previous,
				type: "tooltip",
				_self,
				position: "popover",
				promise,
				options
			} : {
				...previous,
				type: "popover",
				_self,
				position: "popover",
				promise,
				options
			};
			for (const key in newValue) if (key.startsWith("on")) v[key] = newValue[key];
			else if (key === "component" && newValue.component) v._component = markRaw(newValue.component);
			else if (key === "slots" && newValue.slots) v.slots = markRaw(newValue.slots);
			else v[key] = toValue(newValue[key]);
			v.modelValue = v.modelValue ?? false;
			v["onUpdate:modelValue"] = (val) => {
				newValue["onUpdate:modelValue"]?.(val);
				const { modelValue } = toValue(obj);
				if (isRef(obj) && !isRef(modelValue)) obj.value.modelValue = val;
				if (isRef(modelValue) && !isReadonly(modelValue)) modelValue.value = val;
				if (v.modelValue !== val) {
					const popover = store.value.find((el) => el._self === _self);
					if (popover) popover.modelValue = val;
				}
			};
			if (previousIndex === -1) store.value.push(v);
			else store.value.splice(previousIndex, 1, v);
		}, {
			immediate: true,
			deep: true
		});
		onScopeDispose(() => {
			const popover = store.value.find((el) => el._self === _self);
			if (popover) popover.promise.value.destroy?.();
		}, true);
		return promise.value;
	};
	const tooltip = (obj, options = { keep: true }) => create(obj, true, options);
	const popover = (obj, options = { keep: true }) => create(obj, false, options);
	return {
		_isOrchestratorInstalled,
		create,
		popover,
		tooltip,
		store
	};
};
/**
* @deprecated use usePopover() instead.
* @returns {ReturnType<typeof usePopover>} The popover controller
*/
var usePopoverController = usePopover;
//#endregion
export { usePopover, usePopoverController };

//# sourceMappingURL=index.mjs.map