@vuesax-alpha/nightly
Version:
A Component Library for Vue 3
195 lines (192 loc) • 6.8 kB
JavaScript
import { defineComponent, computed, ref, toRef, watch, onDeactivated, provide, readonly, unref, reactive, openBlock, createElementBlock, Fragment, createVNode, withCtx, renderSlot } from 'vue';
import '../../../utils/index.mjs';
import '../../../hooks/index.mjs';
import '../../../tokens/index.mjs';
import '../../../hooks/use-floating/vue/index.mjs';
import { popperProps, popperEmits, usePopperModelToggle } from './popper.mjs';
import popperContent from './content2.mjs';
import popperTrigger from './trigger2.mjs';
import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
import { usePopperContainer, usePopperContainerId } from '../../../hooks/use-popper-container/index.mjs';
import { useZIndex } from '../../../hooks/use-z-index/index.mjs';
import { useDelayedToggle } from '../../../hooks/use-delayed-toggle/index.mjs';
import { useFloating } from '../../../hooks/use-floating/vue/use-floating.mjs';
import { isEmpty, isBoolean } from '../../../utils/types.mjs';
import { offset } from '../../../hooks/use-floating/core/middleware/offset.mjs';
import { flip, shift } from '../../../hooks/use-floating/dom/middleware.mjs';
import { arrow } from '../../../hooks/use-floating/vue/arrow.mjs';
import { popperContextKey } from '../../../tokens/popper.mjs';
const __default__ = defineComponent({
name: "VsPopper",
inheritAttrs: false
});
const _sfc_main = defineComponent({
...__default__,
props: popperProps,
emits: popperEmits,
setup(__props, { expose: __expose, emit }) {
const props = __props;
usePopperContainer();
const { selector, id } = usePopperContainerId();
const appendTo = computed(() => props.appendTo || selector.value);
const { currentZIndex, nextZIndex } = useZIndex();
const zIndex = computed(() => currentZIndex.value);
const triggerRef = ref();
const contentRef = ref();
const arrowRef = ref();
const open = ref(false);
const toggleReason = ref();
const { show, hide, hasUpdateHandler } = usePopperModelToggle({
indicator: open,
toggleReason,
processBeforeClosing: props.processBeforeClose,
shouldProceed: props.processBeforeOpen
});
const { onOpen, onClose } = useDelayedToggle({
showAfter: toRef(props, "showAfter"),
hideAfter: toRef(props, "hideAfter"),
autoClose: toRef(props, "autoClose"),
open: show,
close: hide
});
const {
update,
placement: popperPlacement,
floatingStyles
} = useFloating(triggerRef, contentRef, {
open,
middleware: ref([
!isEmpty(props.offset) && offset(props.offset),
!isEmpty(props.flip) && flip(isBoolean(props.flip) ? void 0 : props.flip),
!isEmpty(props.shift) && shift(isBoolean(props.shift) ? void 0 : props.shift),
arrow({
element: arrowRef
})
]),
placement: computed(() => props.placement),
strategy: computed(() => props.strategy),
transform: false,
fit: computed(() => props.fit)
});
const controlled = computed(
() => isBoolean(props.visible) && !hasUpdateHandler.value
);
const updatePopper = (shouldUpdateZIndex = true) => {
update();
shouldUpdateZIndex && nextZIndex();
};
const onBlur = () => {
if (!props.virtualTriggering) {
onClose();
}
};
const isFocusInsideContent = () => {
var _a;
return !!((_a = contentRef.value) == null ? void 0 : _a.contains(document.activeElement));
};
watch(
() => props.disabled,
(disabled) => {
if (disabled && open.value) {
open.value = false;
}
}
);
onDeactivated(() => open.value && hide());
provide(popperContextKey, {
contentRef,
triggerRef,
arrowRef,
referenceRef: triggerRef,
controlled,
id,
open: readonly(open),
trigger: toRef(props, "trigger"),
onOpen,
onClose,
onToggle: (event) => {
if (unref(open)) {
onClose(event);
} else {
onOpen(event);
}
},
onShow: () => {
emit("show", toggleReason.value);
},
onHide: () => {
emit("hide", toggleReason.value);
},
onBeforeShow: () => {
emit("before-show", toggleReason.value);
},
onBeforeHide: () => {
emit("before-hide", toggleReason.value);
},
updatePopper
});
__expose(
reactive({
triggerRef,
contentRef,
isFocusInsideContent,
updatePopper,
onOpen,
onClose,
hide,
popperPlacement
})
);
return (_ctx, _cache) => {
return openBlock(), createElementBlock(
Fragment,
null,
[
createVNode(popperTrigger, {
disabled: _ctx.disabled,
trigger: _ctx.trigger,
"virtual-ref": _ctx.virtualRef,
"virtual-triggering": _ctx.virtualTriggering,
"on-mouseenter": _ctx.onMouseenter,
"on-mouseleave": _ctx.onMouseleave,
"on-click": _ctx.onClick,
"on-keydown": _ctx.onKeydown,
"on-focus": _ctx.onFocus,
"on-blur": onBlur,
"on-contextmenu": _ctx.onContextmenu
}, {
default: withCtx(() => [
renderSlot(_ctx.$slots, "default")
]),
_: 3
}, 8, ["disabled", "trigger", "virtual-ref", "virtual-triggering", "on-mouseenter", "on-mouseleave", "on-click", "on-keydown", "on-focus", "on-contextmenu"]),
createVNode(popperContent, {
animation: _ctx.animation,
"append-to": appendTo.value,
teleported: _ctx.teleported,
persistent: _ctx.persistent,
placement: unref(popperPlacement),
content: _ctx.content,
interactivity: _ctx.interactivity,
"popper-class": _ctx.popperClass,
"popper-style": [_ctx.popperStyle, unref(floatingStyles), { zIndex: zIndex.value }],
disabled: _ctx.disabled,
visible: _ctx.visible,
"show-arrow": _ctx.showArrow,
onBlur,
onClose: unref(onClose)
}, {
default: withCtx(() => [
renderSlot(_ctx.$slots, "content")
]),
_: 3
}, 8, ["animation", "append-to", "teleported", "persistent", "placement", "content", "interactivity", "popper-class", "popper-style", "disabled", "visible", "show-arrow", "onClose"])
],
64
);
};
}
});
var Popper = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "/home/runner/work/vuesax-alpha/vuesax-alpha/packages/components/popper/src/popper.vue"]]);
export { Popper as default };
//# sourceMappingURL=popper2.mjs.map