bootstrap-vue-next
Version:
Seamless integration of Vue 3, Bootstrap 5, and TypeScript for modern, type-safe UI development
436 lines (435 loc) • 13.5 kB
JavaScript
require("./chunk-CoQrYLCe.js");
const require_keys = require("./keys-durSVUrO.js");
const require_dist = require("./dist-BJ15ThEs.js");
const require_classes = require("./classes-D5wrmmVs.js");
const require_functions = require("./functions-Bx1HDqMv.js");
let vue = require("vue");
//#region src/composables/useShowHide.ts
var fadeBaseTransitionProps = {
name: "fade",
enterActiveClass: "",
enterFromClass: "showing",
enterToClass: "",
leaveActiveClass: "",
leaveFromClass: "",
leaveToClass: "showing",
css: true
};
var useShowHide = (modelValue, props, emit, element, computedId, options = {
transitionProps: {},
showFn: () => {},
hideFn: () => {}
}) => {
let noAction = false;
const initialShow = !!modelValue.value && !props.initialAnimation || props.visible || false;
const showRef = (0, vue.ref)(initialShow);
const renderRef = (0, vue.ref)(initialShow);
const renderBackdropRef = (0, vue.ref)(initialShow);
let isCountdown = typeof modelValue.value !== "boolean";
(0, vue.watch)(modelValue, () => {
isCountdown = typeof modelValue.value !== "boolean";
if (noAction) {
noAction = false;
return;
}
if (modelValue.value) show();
else hide("modelValue", true);
});
const localNoAnimation = (0, vue.ref)(initialShow);
const localTemporaryHide = (0, vue.ref)(false);
const computedNoAnimation = (0, vue.computed)(() => props.noAnimation || props.noFade || localNoAnimation.value || false);
let isMounted = false;
(0, vue.onMounted)(() => {
isMounted = true;
if (!props.show && initialShow) {
const event = buildTriggerableEvent("show", { cancelable: true });
emit("show", event);
if (event.defaultPrevented) {
emit("show-prevented", buildTriggerableEvent("show-prevented"));
return;
}
localNoAnimation.value = true;
if (!modelValue.value) {
noAction = true;
modelValue.value = true;
}
renderRef.value = true;
renderBackdropRef.value = true;
isVisible.value = true;
backdropVisible.value = true;
backdropReady.value = true;
showRef.value = true;
options.showFn?.();
} else if (props.show || !!modelValue.value && props.initialAnimation) show();
});
(0, vue.watch)(() => props.visible, (newval) => {
localNoAnimation.value = true;
(0, vue.nextTick)(() => {
if (newval) isVisible.value = true;
if (newval) show();
else hide("visible-prop", true);
});
});
(0, vue.watch)(() => props.show, (newval) => {
if (newval) show();
else hide("show-prop", true);
});
require_dist.useEventListener(element, "bv-toggle", () => {
modelValue.value = !modelValue.value;
}, { passive: true });
const buildTriggerableEvent = (type, opts = {}) => new require_classes.BvTriggerableEvent(type, {
cancelable: false,
target: element?.value || null,
relatedTarget: null,
trigger: null,
...opts,
componentId: computedId?.value
});
let showTimeout;
let hideTimeout;
let _Resolve;
let _Promise;
let _resolveOnHide;
const show = (resolveOnHide = false) => {
if (showRef.value && !hideTimeout && !_Promise) return Promise.resolve(true);
_resolveOnHide = resolveOnHide;
if (showRef.value && !hideTimeout && _Promise) return _Promise;
_Promise = new Promise((resolve) => {
_Resolve = resolve;
});
const event = buildTriggerableEvent("show", { cancelable: true });
emit("show", event);
if (event.defaultPrevented) {
emit("show-prevented", buildTriggerableEvent("show-prevented"));
if (isVisible.value) isVisible.value = false;
if (modelValue.value && !isCountdown) {
noAction = true;
(0, vue.nextTick)(() => {
modelValue.value = false;
});
}
_Resolve?.("show-prevented");
return _Promise;
}
if (hideTimeout) {
clearTimeout(hideTimeout);
hideTimeout = void 0;
}
renderRef.value = true;
renderBackdropRef.value = true;
requestAnimationFrame(() => {
if (localNoAnimation.value || props.delay === void 0) {
if (!isMounted) return;
showTimeout = void 0;
showRef.value = true;
options.showFn?.();
if (!modelValue.value) {
noAction = true;
(0, vue.nextTick)(() => {
modelValue.value = true;
});
}
return;
}
showTimeout = setTimeout(() => {
if (!isMounted) return;
showTimeout = void 0;
showRef.value = true;
options.showFn?.();
if (!modelValue.value) {
noAction = true;
(0, vue.nextTick)(() => {
modelValue.value = true;
});
}
}, typeof props.delay === "number" ? props.delay : props.delay?.show || 0);
});
return _Promise;
};
let leaveTrigger;
const hide = (trigger, noTriggerEmit) => {
if (!showRef.value && !showTimeout && !renderRef.value) return Promise.resolve("");
if (!_Promise) _Promise = new Promise((resolve) => {
_Resolve = resolve;
});
if (typeof trigger !== "string") trigger = void 0;
leaveTrigger = trigger;
const event = buildTriggerableEvent("hide", {
cancelable: true,
trigger
});
const event2 = buildTriggerableEvent(trigger || "ignore", {
cancelable: true,
trigger
});
if (trigger === "backdrop" && props.noCloseOnBackdrop || trigger === "esc" && props.noCloseOnEsc) {
emit("hide-prevented", buildTriggerableEvent("hide-prevented", { trigger }));
_Resolve?.("hide-prevented");
return _Promise;
}
if (showTimeout) {
clearTimeout(showTimeout);
showTimeout = void 0;
}
if (trigger && !noTriggerEmit) emit(trigger, event2);
emit("hide", event);
if (event.defaultPrevented || event2.defaultPrevented) {
emit("hide-prevented", buildTriggerableEvent("hide-prevented", { trigger }));
if (!modelValue.value) (0, vue.nextTick)(() => {
noAction = true;
modelValue.value = true;
});
_Resolve?.("hide-prevented");
return _Promise;
}
trapActive.value = false;
if (showTimeout) {
clearTimeout(showTimeout);
showTimeout = void 0;
if (!localTemporaryHide.value) renderRef.value = false;
renderBackdropRef.value = false;
}
hideTimeout = setTimeout(() => {
if (!isMounted) return;
hideTimeout = void 0;
isLeaving.value = true;
showRef.value = false;
options.hideFn?.();
if (modelValue.value) {
noAction = true;
modelValue.value = isCountdown ? 0 : false;
}
}, localNoAnimation.value ? 0 : typeof props.delay === "number" ? props.delay : props.delay?.hide || 0);
return _Promise;
};
const throttleHide = require_dist.useThrottleFn((a) => hide(a), 500);
const throttleShow = require_dist.useThrottleFn(() => show(), 500);
const toggle = (resolveOnHide = false) => {
const e = buildTriggerableEvent("toggle", { cancelable: true });
emit("toggle", e);
if (e.defaultPrevented) {
emit("toggle-prevented", buildTriggerableEvent("toggle-prevented"));
return Promise.resolve("toggle-prevented");
}
if (showRef.value) return hide("toggle-function", true);
return show(resolveOnHide);
};
const triggerToggle = () => {
const e = buildTriggerableEvent("toggle", { cancelable: true });
emit("toggle", e);
if (e.defaultPrevented) {
emit("toggle-prevented", buildTriggerableEvent("toggle-prevented"));
return;
}
if (showRef.value) hide("toggle-trigger", true);
else show();
};
const triggerRegistry = [];
const registerTrigger = (trigger, el) => {
triggerRegistry.push({
trigger,
el
});
el.addEventListener(trigger, triggerToggle);
checkVisibility(el);
};
const unregisterTrigger = (trigger, el, clean = true) => {
const idx = triggerRegistry.findIndex((t) => t?.trigger === trigger && t.el === el);
if (idx > -1) {
triggerRegistry.splice(idx, 1);
el.removeEventListener(trigger, triggerToggle);
if (clean) {
el.removeAttribute("aria-expanded");
el.classList.remove("collapsed");
el.classList.remove("not-collapsed");
}
}
};
const appRegistry = (0, vue.inject)(require_keys.showHideRegistryKey, null)?.register({
id: computedId.value,
toggle,
show,
hide,
value: (0, vue.readonly)(showRef),
registerTrigger,
unregisterTrigger,
component: (0, vue.getCurrentInstance)()
});
const checkVisibility = (el) => {
el.setAttribute("aria-expanded", modelValue.value ? "true" : "false");
el.classList.toggle("collapsed", !modelValue.value);
el.classList.toggle("not-collapsed", !!modelValue.value);
};
(0, vue.watch)(modelValue, () => {
triggerRegistry.forEach((t) => {
checkVisibility(t.el);
});
});
(0, vue.watch)(computedId, (newId, oldId) => {
appRegistry?.updateId(newId, oldId);
});
(0, vue.onBeforeUnmount)(() => {
appRegistry?.unregister();
triggerRegistry.forEach((t) => {
t.el.removeEventListener(t.trigger, triggerToggle);
});
});
(0, vue.onUnmounted)(() => {
isMounted = false;
clearTimeout(showTimeout);
clearTimeout(hideTimeout);
showTimeout = void 0;
hideTimeout = void 0;
});
const lazyLoadCompleted = (0, vue.ref)(false);
const markLazyLoadCompleted = () => {
if (props.lazy === true) lazyLoadCompleted.value = true;
};
const isLeaving = (0, vue.ref)(false);
const isActive = (0, vue.ref)(initialShow);
const isVisible = (0, vue.ref)(initialShow);
const onBeforeEnter = [...[options.transitionProps?.onBeforeEnter ?? require_functions.noop, props.transitionProps?.onBeforeEnter ?? require_functions.noop].flat(), () => {
isActive.value = true;
}];
const onEnter = [() => {
requestAnimationFrame(() => {
requestAnimationFrame(() => {
isVisible.value = true;
});
});
}, ...[options.transitionProps?.onEnter ?? require_functions.noop, props.transitionProps?.onEnter ?? require_functions.noop].flat()];
const onAfterEnter = [
markLazyLoadCompleted,
...[options.transitionProps?.onAfterEnter ?? require_functions.noop, props.transitionProps?.onAfterEnter ?? require_functions.noop].flat(),
() => {
if (localNoAnimation.value) requestAnimationFrame(() => {
localNoAnimation.value = false;
});
if (localTemporaryHide.value) localTemporaryHide.value = false;
requestAnimationFrame(() => {
trapActive.value = true;
(0, vue.nextTick)(() => {
emit("shown", buildTriggerableEvent("shown", { cancelable: false }));
});
});
if (!_resolveOnHide) {
_Resolve?.(true);
_Promise = void 0;
_Resolve = void 0;
}
}
];
const onBeforeLeave = [
() => {
if (!isLeaving.value) isLeaving.value = true;
},
...[options.transitionProps?.onBeforeLeave ?? require_functions.noop, props.transitionProps?.onBeforeLeave ?? require_functions.noop].flat(),
() => {
trapActive.value = false;
}
];
const onLeave = [() => {
isVisible.value = false;
}, ...[options.transitionProps?.onLeave ?? require_functions.noop, props.transitionProps?.onLeave ?? require_functions.noop].flat()];
const onAfterLeave = [
() => {
emit("hidden", buildTriggerableEvent("hidden", {
trigger: leaveTrigger,
cancelable: false
}));
},
...[options.transitionProps?.onAfterLeave ?? require_functions.noop, props.transitionProps?.onAfterLeave ?? require_functions.noop].flat(),
() => {
isLeaving.value = false;
isActive.value = false;
if (localNoAnimation.value) requestAnimationFrame(() => {
localNoAnimation.value = false;
});
requestAnimationFrame(() => {
if (!localTemporaryHide.value) renderRef.value = false;
});
_Resolve?.(leaveTrigger || "");
_Promise = void 0;
_Resolve = void 0;
leaveTrigger = void 0;
}
];
const contentShowing = (0, vue.computed)(() => localTemporaryHide.value === true || isActive.value === true || props.lazy === false || props.lazy === true && lazyLoadCompleted.value === true && props.unmountLazy === false);
const trapActive = (0, vue.ref)(false);
const backdropVisible = (0, vue.ref)(false);
const backdropReady = (0, vue.ref)(false);
const transitionFunctions = {
...options.transitionProps,
onBeforeEnter,
onEnter,
onAfterEnter,
onBeforeLeave,
onLeave,
onAfterLeave
};
return {
showRef: (0, vue.readonly)(showRef),
renderRef: (0, vue.readonly)(renderRef),
renderBackdropRef: (0, vue.readonly)(renderBackdropRef),
isVisible: (0, vue.readonly)(isVisible),
isActive: (0, vue.readonly)(isActive),
trapActive: (0, vue.readonly)(trapActive),
show,
hide,
toggle,
throttleHide,
throttleShow,
buildTriggerableEvent,
computedNoAnimation,
localNoAnimation: (0, vue.readonly)(localNoAnimation),
setLocalNoAnimation: (value) => {
localNoAnimation.value = value;
},
localTemporaryHide: (0, vue.readonly)(localTemporaryHide),
setLocalTemporaryHide: (value) => {
localTemporaryHide.value = value;
},
isLeaving: (0, vue.readonly)(isLeaving),
transitionProps: {
...fadeBaseTransitionProps,
...props.transitionProps,
...transitionFunctions
},
lazyLoadCompleted: (0, vue.readonly)(lazyLoadCompleted),
markLazyLoadCompleted,
contentShowing,
backdropReady: (0, vue.readonly)(backdropReady),
backdropVisible: (0, vue.readonly)(backdropVisible),
backdropTransitionProps: {
...fadeBaseTransitionProps,
onBeforeEnter: () => {
requestAnimationFrame(() => {
requestAnimationFrame(() => {
backdropVisible.value = true;
});
});
backdropReady.value = false;
},
onAfterEnter: () => {
backdropReady.value = true;
},
onBeforeLeave: () => {
backdropVisible.value = false;
},
onAfterLeave: () => {
backdropReady.value = false;
requestAnimationFrame(() => {
renderBackdropRef.value = false;
});
}
}
};
};
//#endregion
Object.defineProperty(exports, "useShowHide", {
enumerable: true,
get: function() {
return useShowHide;
}
});
//# sourceMappingURL=useShowHide-BTCaeU5j.js.map