element-plus/es/hooks/use-model-toggle/index.mjs

A Component Library for Vue 3

import { isClient } from "../../utils/browser.mjs";
import { isBoolean, isFunction } from "../../utils/types.mjs";
import { buildProp, definePropType } from "../../utils/vue/props/runtime.mjs";
import { computed, getCurrentInstance, onMounted, watch } from "vue";

//#region ../../packages/hooks/use-model-toggle/index.ts
const _prop = buildProp({
	type: definePropType(Boolean),
	default: null
});
const _event = buildProp({ type: definePropType(Function) });
const createModelToggleComposable = (name) => {
	const updateEventKey = `update:${name}`;
	const updateEventKeyRaw = `onUpdate:${name}`;
	const useModelToggleEmits = [updateEventKey];
	const useModelToggleProps = {
		[name]: _prop,
		[updateEventKeyRaw]: _event
	};
	const useModelToggle = ({ indicator, toggleReason, shouldHideWhenRouteChanges, shouldProceed, onShow, onHide }) => {
		const instance = getCurrentInstance();
		const { emit } = instance;
		const props = instance.props;
		const hasUpdateHandler = computed(() => isFunction(props[updateEventKeyRaw]));
		const isModelBindingAbsent = computed(() => props[name] === null);
		const doShow = (event) => {
			if (indicator.value === true) return;
			indicator.value = true;
			if (toggleReason) toggleReason.value = event;
			if (isFunction(onShow)) onShow(event);
		};
		const doHide = (event) => {
			if (indicator.value === false) return;
			indicator.value = false;
			if (toggleReason) toggleReason.value = event;
			if (isFunction(onHide)) onHide(event);
		};
		const show = (event) => {
			if (props.disabled === true || isFunction(shouldProceed) && !shouldProceed()) return;
			const shouldEmit = hasUpdateHandler.value && isClient;
			if (shouldEmit) emit(updateEventKey, true);
			if (isModelBindingAbsent.value || !shouldEmit) doShow(event);
		};
		const hide = (event) => {
			if (props.disabled === true || !isClient) return;
			const shouldEmit = hasUpdateHandler.value && isClient;
			if (shouldEmit) emit(updateEventKey, false);
			if (isModelBindingAbsent.value || !shouldEmit) doHide(event);
		};
		const onChange = (val) => {
			if (!isBoolean(val)) return;
			if (props.disabled && val) {
				if (hasUpdateHandler.value) emit(updateEventKey, false);
			} else if (indicator.value !== val) if (val) doShow();
			else doHide();
		};
		const toggle = () => {
			if (indicator.value) hide();
			else show();
		};
		watch(() => props[name], onChange);
		if (shouldHideWhenRouteChanges && instance.appContext.config.globalProperties.$route !== void 0) watch(() => ({ ...instance.proxy.$route }), () => {
			if (shouldHideWhenRouteChanges.value && indicator.value) hide();
		});
		onMounted(() => {
			onChange(props[name]);
		});
		return {
			hide,
			show,
			toggle,
			hasUpdateHandler
		};
	};
	return {
		useModelToggle,
		useModelToggleProps,
		useModelToggleEmits
	};
};
const { useModelToggle, useModelToggleProps, useModelToggleEmits } = createModelToggleComposable("modelValue");

//#endregion
export { createModelToggleComposable, useModelToggle, useModelToggleEmits, useModelToggleProps };
//# sourceMappingURL=index.mjs.map