bootstrap-vue-next/dist/src/composables/useModal/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 { n as useSharedModalStack, t as BModal_default } from "../../../BModal-Br5xLT0-.mjs";
import "../../components/index.mjs";
import { computed, getCurrentInstance, inject, isReadonly, isRef, markRaw, onScopeDispose, shallowRef, toValue, watch } from "vue";
//#region src/composables/useModal/index.ts
var useModal = () => {
	const orchestratorRegistry = inject(orchestratorRegistryKey, null);
	if (!orchestratorRegistry) throw Error("useModal() must be called within setup(), and BApp, useRegistry or plugin must be installed/provided.");
	const { store, _isOrchestratorInstalled } = orchestratorRegistry;
	/**
	* @returns {PromiseWithComponent}  Returns a promise object with methods to control the modal (show, hide, toggle, get, set, destroy)
	*/
	const create = (obj = {}, options = {}) => {
		if (!_isOrchestratorInstalled.value) throw new Error("BApp component must be mounted to use the modal controller");
		const resolvedProps = isRef(obj) ? obj : shallowRef(obj);
		const _self = resolvedProps.value?.id || Symbol("Modals 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 v = {
				type: "modal",
				_self,
				position: "modal",
				...previousIndex === -1 ? { _component: markRaw(BModal_default) } : store.value[previousIndex],
				options,
				promise
			};
			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) => {
				const onUpdateModelValue = newValue["onUpdate:modelValue"];
				onUpdateModelValue?.(val);
				const { modelValue } = toValue(obj);
				if (isRef(obj) && !isRef(modelValue)) obj.value.modelValue = val;
				if (isRef(modelValue) && !isReadonly(modelValue)) modelValue.value = val;
				const modal = store.value.find((el) => el._self === _self);
				if (modal) modal.modelValue = val;
			};
			if (previousIndex === -1) store.value.push(v);
			else store.value.splice(previousIndex, 1, v);
		}, {
			immediate: true,
			deep: true
		});
		onScopeDispose(() => {
			const modal = store.value.find((el) => el._self === _self);
			if (modal) modal.promise.value.destroy?.();
		}, true);
		return promise.value;
	};
	const { lastStack, stack, registry } = useSharedModalStack();
	/**
	* Show a modal
	* @param id - The id of the modal to show
	*/
	const show = (id) => {
		if (id === void 0) {
			if (lastStack?.value) lastStack?.value.exposed?.show();
		} else {
			const stackModal = stack?.value.find((modal) => modal.exposed?.id === id);
			if (stackModal) {
				stackModal.exposed?.show();
				return;
			}
			const modal = store.value.find((el) => el._self === id);
			if (modal) {
				modal.modelValue = true;
				modal["onUpdate:modelValue"]?.(true);
			} else stack?.value.forEach((modal) => {
				if (modal.exposed?.id === id) modal.exposed?.show();
			});
		}
	};
	/**
	* Hide a modal
	* @param trigger - The trigger to hide the modal
	* @param id - The id of the modal to hide
	*/
	const hide = (trigger, id) => {
		if (id === void 0) {
			if (lastStack?.value) lastStack?.value.exposed?.hide(trigger);
		} else {
			const stackModal = stack?.value.find((modal) => modal.exposed?.id === id);
			if (stackModal) {
				stackModal.exposed?.hide(trigger);
				return;
			}
			const modal = store.value.find((el) => el._self === id);
			if (modal) {
				modal.modelValue = false;
				modal["onUpdate:modelValue"]?.(false);
			} else stack?.value.forEach((modal) => {
				if (modal.exposed?.id === id) modal.exposed?.hide(trigger, true);
			});
		}
	};
	/**
	* Hide all modals
	* @param trigger - The trigger to hide all modals
	*/
	const hideAll = (trigger) => {
		stack?.value.forEach((modal) => {
			modal.exposed?.hide(trigger, true);
		});
	};
	const get = (id) => {
		const modal = store.value.find((el) => el._self === id);
		if (modal) return {
			modal,
			show() {
				modal?.promise.value.show();
			},
			hide(trigger) {
				modal?.promise.value.hide(trigger);
			}
		};
		if (registry?.value) {
			for (const [, modal] of registry?.value.entries() ?? []) if (toValue(modal.exposed?.id) === id) return {
				modal,
				show() {
					modal.exposed?.show();
				},
				hide(trigger) {
					modal.exposed?.hide(trigger, true);
				}
			};
		}
		return null;
	};
	const instance = getCurrentInstance();
	const current = () => {
		const findBModal = (component) => {
			if (!component.parent) return null;
			if (component.parent.type === BModal_default) return component.parent;
			return findBModal(component.parent);
		};
		if (!instance) return null;
		const modalComponent = computed(() => findBModal(instance));
		return {
			show() {
				modalComponent.value?.exposed?.show();
			},
			hide(trigger) {
				modalComponent.value?.exposed?.hide(trigger, true);
			},
			modal: computed(() => modalComponent.value?.proxy)
		};
	};
	return {
		show,
		hide,
		hideAll,
		get,
		current,
		create,
		_isOrchestratorInstalled,
		store
	};
};
/**
* @deprecated use useModal() instead.
* @returns {ReturnType<typeof useModal>} The modal controller
*/
var useModalController = useModal;
//#endregion
export { useModal, useModalController };

//# sourceMappingURL=index.mjs.map