@vuesax-alpha/nightly/es/components/popper/src/content2.mjs

A Component Library for Vue 3

import { defineComponent, inject, ref, computed, unref, onMounted, watch, onBeforeUnmount, openBlock, createBlock, Teleport, createVNode, Transition, withCtx, withDirectives, createElementBlock, normalizeClass, normalizeStyle, Fragment, createTextVNode, toDisplayString, renderSlot, createCommentVNode, vShow } from 'vue';
import { onClickOutside, unrefElement } from '@vueuse/core';
import '../../../hooks/index.mjs';
import '../../../tokens/index.mjs';
import '../../../utils/index.mjs';
import { popperContentProps, popperContentEmits } from './content.mjs';
import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
import { popperContextKey } from '../../../tokens/popper.mjs';
import { composeEventHandlers } from '../../../utils/dom/event.mjs';

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

export { popperContent as default };
//# sourceMappingURL=content2.mjs.map