bootstrap-vue-next
Version:
BootstrapVueNext is an early and lovely component library for Vue 3 & Nuxt 3 based on Bootstrap 5 and Typescript.
364 lines (363 loc) • 11.1 kB
JavaScript
import { ref, watch, computed, onMounted, nextTick, inject, readonly, onBeforeUnmount } from "vue";
import { g as globalShowHideStorageInjectionKey } from "./keys-41Cw9q6f.mjs";
import { a as BvTriggerableEvent } from "./classes-IC0yVJlq.mjs";
import { e as useEventListener } from "./index-Cr5Qd2ql.mjs";
import { l as useThrottleFn } from "./index-D3jGjWWk.mjs";
const fadeBaseTransitionProps = {
name: "fade",
enterActiveClass: "",
enterFromClass: "showing",
enterToClass: "",
leaveActiveClass: "",
leaveFromClass: "",
leaveToClass: "showing",
css: true
};
const useShowHide = (modelValue, props, emit, element, computedId, options = {
transitionProps: {},
showFn: () => {
},
hideFn: () => {
}
}) => {
var _a;
let noAction = false;
const initialShow = !!modelValue.value && !props.initialAnimation || props.visible || false;
const showRef = ref(false);
const renderRef = ref(initialShow);
const renderBackdropRef = ref(initialShow);
let isCountdown = typeof modelValue.value !== "boolean";
watch(modelValue, () => {
isCountdown = typeof modelValue.value !== "boolean";
if (noAction) {
noAction = false;
return;
}
if (modelValue.value) {
show();
} else {
hide();
}
});
const localNoAnimation = ref(initialShow);
const localTemporaryHide = ref(false);
const computedNoAnimation = computed(
() => props.noAnimation || props.noFade || localNoAnimation.value || false
);
onMounted(() => {
var _a2;
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;
(_a2 = options.showFn) == null ? void 0 : _a2.call(options);
} else if (props.show || !!modelValue.value && props.initialAnimation) {
show();
}
});
watch(
() => props.visible,
(newval) => {
localNoAnimation.value = true;
nextTick(() => {
if (newval) isVisible.value = true;
if (newval) {
show();
} else {
hide();
}
});
}
);
watch(
() => props.show,
(newval) => {
if (newval) {
show();
} else {
hide();
}
}
);
useEventListener(element, "bv-toggle", () => {
modelValue.value = !modelValue.value;
});
const buildTriggerableEvent = (type, opts = {}) => new BvTriggerableEvent(type, {
cancelable: false,
target: (element == null ? void 0 : element.value) || null,
relatedTarget: null,
trigger: null,
...opts,
componentId: computedId == null ? void 0 : computedId.value
});
let showTimeout;
const show = () => {
if (showRef.value) return;
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;
nextTick(() => {
modelValue.value = false;
});
}
return;
}
renderRef.value = true;
renderBackdropRef.value = true;
requestAnimationFrame(() => {
var _a2;
showTimeout = setTimeout(
() => {
var _a3;
showRef.value = true;
(_a3 = options.showFn) == null ? void 0 : _a3.call(options);
if (!modelValue.value) {
noAction = true;
nextTick(() => {
modelValue.value = true;
});
}
},
localNoAnimation.value ? 0 : typeof props.delay === "number" ? props.delay : ((_a2 = props.delay) == null ? void 0 : _a2.show) || 0
);
});
};
const hide = (trigger) => {
var _a2;
if (!showRef.value) return;
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"));
return;
}
if (showTimeout) {
clearTimeout(showTimeout);
showTimeout = void 0;
}
if (trigger) {
emit(trigger, event2);
}
emit("hide", event);
if (event.defaultPrevented || event2.defaultPrevented) {
emit("hide-prevented", buildTriggerableEvent("hide-prevented"));
if (!modelValue.value) {
nextTick(() => {
noAction = true;
modelValue.value = true;
});
}
return;
}
setTimeout(
() => {
var _a3;
isLeaving.value = true;
showRef.value = false;
(_a3 = options.hideFn) == null ? void 0 : _a3.call(options);
if (modelValue.value) {
noAction = true;
modelValue.value = isCountdown ? 0 : false;
}
},
localNoAnimation.value ? 0 : typeof props.delay === "number" ? props.delay : ((_a2 = props.delay) == null ? void 0 : _a2.hide) || 0
);
};
const throttleHide = useThrottleFn((a) => hide(a), 500);
const throttleShow = useThrottleFn(() => show(), 500);
const toggle = () => {
const e = buildTriggerableEvent("toggle", { cancelable: true });
emit("toggle", e);
if (e.defaultPrevented) {
emit("toggle-prevented", buildTriggerableEvent("toggle-prevented"));
return;
}
if (showRef.value) {
hide();
} else {
show();
}
};
const appRegistry = (_a = inject(
globalShowHideStorageInjectionKey,
void 0
)) == null ? void 0 : _a({
id: computedId.value,
toggle,
show,
hide,
value: readonly(showRef)
});
onBeforeUnmount(() => {
appRegistry == null ? void 0 : appRegistry.unregister();
});
const lazyLoadCompleted = ref(false);
const markLazyLoadCompleted = () => {
if (props.lazy === true) lazyLoadCompleted.value = true;
};
const isLeaving = ref(false);
const isActive = ref(false);
const isVisible = ref(false);
const onBeforeEnter = (el) => {
var _a2, _b, _c, _d;
(_b = (_a2 = options.transitionProps) == null ? void 0 : _a2.onBeforeEnter) == null ? void 0 : _b.call(_a2, el);
(_d = (_c = props.transitionProps) == null ? void 0 : _c.onBeforeEnter) == null ? void 0 : _d.call(_c, el);
isActive.value = true;
};
const onEnter = (el) => {
var _a2, _b, _c, _d;
requestAnimationFrame(() => {
requestAnimationFrame(() => {
isVisible.value = true;
});
});
(_b = (_a2 = options.transitionProps) == null ? void 0 : _a2.onEnter) == null ? void 0 : _b.call(_a2, el);
(_d = (_c = props.transitionProps) == null ? void 0 : _c.onEnter) == null ? void 0 : _d.call(_c, el);
};
const onAfterEnter = (el) => {
var _a2, _b, _c, _d;
emit("shown", buildTriggerableEvent("shown"));
markLazyLoadCompleted();
(_b = (_a2 = options.transitionProps) == null ? void 0 : _a2.onAfterEnter) == null ? void 0 : _b.call(_a2, el);
(_d = (_c = props.transitionProps) == null ? void 0 : _c.onAfterEnter) == null ? void 0 : _d.call(_c, el);
if (localNoAnimation.value) {
requestAnimationFrame(() => {
localNoAnimation.value = false;
});
}
if (localTemporaryHide.value) {
localTemporaryHide.value = false;
}
};
const onBeforeLeave = (el) => {
var _a2, _b, _c, _d;
if (!isLeaving.value) isLeaving.value = true;
(_b = (_a2 = options.transitionProps) == null ? void 0 : _a2.onBeforeLeave) == null ? void 0 : _b.call(_a2, el);
(_d = (_c = props.transitionProps) == null ? void 0 : _c.onBeforeLeave) == null ? void 0 : _d.call(_c, el);
};
const onLeave = (el) => {
var _a2, _b, _c, _d;
isVisible.value = false;
(_b = (_a2 = options.transitionProps) == null ? void 0 : _a2.onLeave) == null ? void 0 : _b.call(_a2, el);
(_d = (_c = props.transitionProps) == null ? void 0 : _c.onLeave) == null ? void 0 : _d.call(_c, el);
};
const onAfterLeave = (el) => {
var _a2, _b, _c, _d;
emit("hidden", buildTriggerableEvent("hidden"));
(_b = (_a2 = options.transitionProps) == null ? void 0 : _a2.onAfterLeave) == null ? void 0 : _b.call(_a2, el);
(_d = (_c = props.transitionProps) == null ? void 0 : _c.onAfterLeave) == null ? void 0 : _d.call(_c, el);
isLeaving.value = false;
isActive.value = false;
if (localNoAnimation.value) {
requestAnimationFrame(() => {
localNoAnimation.value = false;
});
}
requestAnimationFrame(() => {
if (!localTemporaryHide.value) renderRef.value = false;
});
};
const contentShowing = computed(
() => localTemporaryHide.value === true || isActive.value === true || props.lazy === false || props.lazy === true && lazyLoadCompleted.value === true && props.unmountLazy === false
);
const trapActive = ref(false);
watch(isVisible, (val) => {
requestAnimationFrame(() => {
requestAnimationFrame(() => {
requestAnimationFrame(() => {
requestAnimationFrame(() => {
setTimeout(() => {
trapActive.value = val;
}, 32);
});
});
});
});
});
const backdropVisible = ref(false);
const backdropReady = ref(false);
const transitionFunctions = {
...options.transitionProps,
onBeforeEnter,
onEnter,
onAfterEnter,
onBeforeLeave,
onLeave,
onAfterLeave
};
return {
showRef,
renderRef,
renderBackdropRef,
isVisible,
isActive,
trapActive,
show,
hide,
toggle,
throttleHide,
throttleShow,
buildTriggerableEvent,
computedNoAnimation,
localNoAnimation,
localTemporaryHide,
isLeaving,
transitionProps: {
...fadeBaseTransitionProps,
...props.transitionProps,
...transitionFunctions
},
lazyLoadCompleted,
markLazyLoadCompleted,
contentShowing,
backdropReady,
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;
});
}
}
};
};
export {
useShowHide as u
};
//# sourceMappingURL=useShowHide-BJTVhfuo.mjs.map