@vuesax-alpha/nightly/lib/components/popper/src/popper2.js

A Component Library for Vue 3

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
require('../../../utils/index.js');
require('../../../hooks/index.js');
require('../../../tokens/index.js');
require('../../../hooks/use-floating/vue/index.js');
var popper = require('./popper.js');
var content = require('./content2.js');
var trigger = require('./trigger2.js');
var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
var index = require('../../../hooks/use-popper-container/index.js');
var index$1 = require('../../../hooks/use-z-index/index.js');
var index$2 = require('../../../hooks/use-delayed-toggle/index.js');
var useFloating = require('../../../hooks/use-floating/vue/use-floating.js');
var types = require('../../../utils/types.js');
var offset = require('../../../hooks/use-floating/core/middleware/offset.js');
var middleware = require('../../../hooks/use-floating/dom/middleware.js');
var arrow = require('../../../hooks/use-floating/vue/arrow.js');
var popper$1 = require('../../../tokens/popper.js');

const __default__ = vue.defineComponent({
  name: "VsPopper",
  inheritAttrs: false
});
const _sfc_main = vue.defineComponent({
  ...__default__,
  props: popper.popperProps,
  emits: popper.popperEmits,
  setup(__props, { expose: __expose, emit }) {
    const props = __props;
    index.usePopperContainer();
    const { selector, id } = index.usePopperContainerId();
    const appendTo = vue.computed(() => props.appendTo || selector.value);
    const { currentZIndex, nextZIndex } = index$1.useZIndex();
    const zIndex = vue.computed(() => currentZIndex.value);
    const triggerRef = vue.ref();
    const contentRef = vue.ref();
    const arrowRef = vue.ref();
    const open = vue.ref(false);
    const toggleReason = vue.ref();
    const { show, hide, hasUpdateHandler } = popper.usePopperModelToggle({
      indicator: open,
      toggleReason,
      processBeforeClosing: props.processBeforeClose,
      shouldProceed: props.processBeforeOpen
    });
    const { onOpen, onClose } = index$2.useDelayedToggle({
      showAfter: vue.toRef(props, "showAfter"),
      hideAfter: vue.toRef(props, "hideAfter"),
      autoClose: vue.toRef(props, "autoClose"),
      open: show,
      close: hide
    });
    const {
      update,
      placement: popperPlacement,
      floatingStyles
    } = useFloating.useFloating(triggerRef, contentRef, {
      open,
      middleware: vue.ref([
        !types.isEmpty(props.offset) && offset.offset(props.offset),
        !types.isEmpty(props.flip) && middleware.flip(types.isBoolean(props.flip) ? void 0 : props.flip),
        !types.isEmpty(props.shift) && middleware.shift(types.isBoolean(props.shift) ? void 0 : props.shift),
        arrow.arrow({
          element: arrowRef
        })
      ]),
      placement: vue.computed(() => props.placement),
      strategy: vue.computed(() => props.strategy),
      transform: false,
      fit: vue.computed(() => props.fit)
    });
    const controlled = vue.computed(
      () => types.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));
    };
    vue.watch(
      () => props.disabled,
      (disabled) => {
        if (disabled && open.value) {
          open.value = false;
        }
      }
    );
    vue.onDeactivated(() => open.value && hide());
    vue.provide(popper$1.popperContextKey, {
      contentRef,
      triggerRef,
      arrowRef,
      referenceRef: triggerRef,
      controlled,
      id,
      open: vue.readonly(open),
      trigger: vue.toRef(props, "trigger"),
      onOpen,
      onClose,
      onToggle: (event) => {
        if (vue.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(
      vue.reactive({
        triggerRef,
        contentRef,
        isFocusInsideContent,
        updatePopper,
        onOpen,
        onClose,
        hide,
        popperPlacement
      })
    );
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createElementBlock(
        vue.Fragment,
        null,
        [
          vue.createVNode(trigger["default"], {
            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: vue.withCtx(() => [
              vue.renderSlot(_ctx.$slots, "default")
            ]),
            _: 3
          }, 8, ["disabled", "trigger", "virtual-ref", "virtual-triggering", "on-mouseenter", "on-mouseleave", "on-click", "on-keydown", "on-focus", "on-contextmenu"]),
          vue.createVNode(content["default"], {
            animation: _ctx.animation,
            "append-to": appendTo.value,
            teleported: _ctx.teleported,
            persistent: _ctx.persistent,
            placement: vue.unref(popperPlacement),
            content: _ctx.content,
            interactivity: _ctx.interactivity,
            "popper-class": _ctx.popperClass,
            "popper-style": [_ctx.popperStyle, vue.unref(floatingStyles), { zIndex: zIndex.value }],
            disabled: _ctx.disabled,
            visible: _ctx.visible,
            "show-arrow": _ctx.showArrow,
            onBlur,
            onClose: vue.unref(onClose)
          }, {
            default: vue.withCtx(() => [
              vue.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__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "/home/runner/work/vuesax-alpha/vuesax-alpha/packages/components/popper/src/popper.vue"]]);

exports["default"] = Popper;
//# sourceMappingURL=popper2.js.map