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

A Component Library for Vue 3

'use strict';

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

var vue = require('vue');
var core = require('@vueuse/core');
require('../../../hooks/index.js');
require('../../../tokens/index.js');
require('../../../utils/index.js');
var content = require('./content.js');
var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
var index = require('../../../hooks/use-namespace/index.js');
var popper = require('../../../tokens/popper.js');
var event = require('../../../utils/dom/event.js');

const _hoisted_1 = ["data-popper-placement"];
const _hoisted_2 = ["innerHTML"];
const __default__ = vue.defineComponent({
  name: "VsPopper"
});
const _sfc_main = vue.defineComponent({
  ...__default__,
  props: content.popperContentProps,
  emits: content.popperContentEmits,
  setup(__props) {
    const props = __props;
    const ns = index.useNamespace("popper");
    const {
      contentRef,
      controlled,
      open,
      trigger,
      updatePopper,
      onOpen,
      onClose,
      onShow,
      onHide,
      onBeforeShow,
      onBeforeHide
    } = vue.inject(popper.popperContextKey, void 0);
    const destroyed = vue.ref(false);
    const persistentRef = vue.computed(() => {
      if (process.env.NODE_ENV === "test") {
        return true;
      }
      return props.persistent;
    });
    const shouldRender = vue.computed(() => {
      return vue.unref(persistentRef) ? true : vue.unref(open);
    });
    const shouldShow = vue.computed(() => {
      return props.disabled ? false : vue.unref(open);
    });
    const popperKls = vue.computed(() => [
      ns.b(),
      ns.is("not-arrow", !props.showArrow),
      props.popperClass
    ]);
    const togglePopperAlive = () => {
      updatePopper(false);
    };
    const stopWhenControlled = () => {
      if (vue.unref(controlled))
        return true;
    };
    const onContentEnter = event.composeEventHandlers(stopWhenControlled, () => {
      if (props.interactivity && vue.unref(trigger) === "hover") {
        onOpen();
      }
    });
    const onContentLeave = event.composeEventHandlers(stopWhenControlled, () => {
      if (vue.unref(trigger) === "hover") {
        onClose();
      }
    });
    const onTransitionLeave = () => {
      onHide();
    };
    const onBeforeEnter = () => {
      updatePopper();
      onBeforeShow == null ? void 0 : onBeforeShow();
    };
    const onBeforeLeave = () => {
      onBeforeHide == null ? void 0 : onBeforeHide();
    };
    let stopHandle;
    const onAfterShow = () => {
      onShow();
      stopHandle = core.onClickOutside(
        vue.computed(() => {
          return core.unrefElement(contentRef);
        }),
        () => {
          if (vue.unref(controlled))
            return;
          const $trigger = vue.unref(trigger);
          if ($trigger !== "hover") {
            onClose();
          }
        }
      );
    };
    vue.onMounted(() => {
      vue.watch(() => props.visible, togglePopperAlive, { immediate: true });
    });
    vue.watch(
      () => vue.unref(open),
      (val) => {
        if (!val) {
          stopHandle == null ? void 0 : stopHandle();
        }
      },
      {
        flush: "post"
      }
    );
    vue.watch(
      () => props.content,
      () => {
        updatePopper();
      }
    );
    vue.onBeforeUnmount(() => {
      destroyed.value = true;
    });
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createBlock(vue.Teleport, {
        to: _ctx.appendTo,
        disabled: !_ctx.teleported
      }, [
        vue.createVNode(vue.Transition, {
          name: _ctx.animation,
          onAfterLeave: onTransitionLeave,
          onBeforeEnter,
          onAfterEnter: onAfterShow,
          onBeforeLeave
        }, {
          default: vue.withCtx(() => [
            shouldRender.value ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
              key: 0,
              ref_key: "contentRef",
              ref: contentRef,
              class: vue.normalizeClass(popperKls.value),
              style: vue.normalizeStyle(_ctx.popperStyle),
              "data-popper-placement": _ctx.placement,
              onMouseenter: _cache[0] || (_cache[0] = (...args) => vue.unref(onContentEnter) && vue.unref(onContentEnter)(...args)),
              onMouseleave: _cache[1] || (_cache[1] = (...args) => vue.unref(onContentLeave) && vue.unref(onContentLeave)(...args))
            }, [
              !destroyed.value ? (vue.openBlock(), vue.createElementBlock(
                vue.Fragment,
                { key: 0 },
                [
                  _ctx.content ? (vue.openBlock(), vue.createElementBlock(
                    vue.Fragment,
                    { key: 0 },
                    [
                      _ctx.rawContent ? (vue.openBlock(), vue.createElementBlock("div", {
                        key: 0,
                        innerHTML: _ctx.content
                      }, null, 8, _hoisted_2)) : (vue.openBlock(), vue.createElementBlock(
                        vue.Fragment,
                        { key: 1 },
                        [
                          vue.createTextVNode(
                            vue.toDisplayString(_ctx.content),
                            1
                          )
                        ],
                        64
                      ))
                    ],
                    64
                  )) : vue.renderSlot(_ctx.$slots, "default", { key: 1 })
                ],
                64
              )) : vue.createCommentVNode("v-if", true)
            ], 46, _hoisted_1)), [
              [vue.vShow, shouldShow.value]
            ]) : vue.createCommentVNode("v-if", true)
          ]),
          _: 3
        }, 8, ["name"])
      ], 8, ["to", "disabled"]);
    };
  }
});
var popperContent = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "/home/runner/work/vuesax-alpha/vuesax-alpha/packages/components/popper/src/content.vue"]]);

exports["default"] = popperContent;
//# sourceMappingURL=content2.js.map