label-print-design/lib/components/my/popover/my-popover.vue2.js

操作简单，组件丰富的一站式打印解决方案打印设计器

'use strict';

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

var vue = require('vue');
var vueDemi = require('vue-demi');
var core = require('@popperjs/core');
var core$1 = require('@vueuse/core');
var lodash = require('lodash');

var _sfc_main = /* @__PURE__ */ vue.defineComponent({
  __name: "my-popover",
  props: {
    disabled: { type: Boolean },
    placement: { default: "top" },
    trigger: { default: "hover" },
    class: {}
  },
  emits: ["show"],
  setup(__props, { expose: __expose, emit: __emit }) {
    __expose({ close });
    const emit = __emit;
    const props = __props;
    const data = vueDemi.reactive({
      visible: false
    });
    const referenceRef = vueDemi.ref();
    const contentRef = vueDemi.ref();
    let popperInstance = null;
    const styles = vueDemi.ref({});
    function deriveState(state) {
      const elements = Object.keys(state.elements);
      const styles2 = lodash.fromPairs(
        elements.map(
          (element) => [element, state.styles[element] || {}]
        )
      );
      const attributes = lodash.fromPairs(
        elements.map(
          (element) => [element, state.attributes[element]]
        )
      );
      return {
        styles: styles2,
        attributes
      };
    }
    const stateUpdater = {
      name: "updateState",
      enabled: true,
      phase: "write",
      fn: ({ state }) => {
        if (!data.visible) {
          return;
        }
        const sss = core.detectOverflow(state, {
          // elementContext: 'reference', // 'popper' by default
        });
        console.log(sss);
        const derivedState = deriveState(state);
        Object.assign(styles.value, derivedState.styles.popper);
      },
      requires: ["computeStyles"]
    };
    const createPopperInstance = () => {
      popperInstance = core.createPopper(referenceRef.value, contentRef.value, {
        modifiers: [
          {
            name: "preventOverflow",
            options: {
              altAxis: true,
              mainAxis: true,
              tether: false
              // boundary: document, // true by default
              // rootBoundary: document // true by default
            }
          },
          {
            name: "flip",
            enabled: false,
            options: {
              fallbackPlacements: ["top", "right"]
            }
          },
          {
            name: "offset",
            options: {
              // 偏移值 左右，上下
              offset: [0, 10]
            }
          },
          // stateUpdater,
          {
            name: "arrow",
            options: {
              element: ".popper-arrow"
            }
          }
          // { name: 'applyStyles', enabled: false }
        ],
        placement: props.placement
      });
      vueDemi.nextTick(() => {
        if (popperInstance != null) {
          popperInstance.update();
        }
      });
    };
    const destroyPopperInstance = () => {
      popperInstance?.destroy?.();
      popperInstance = null;
    };
    vueDemi.watch(() => data.visible, (visible, _o) => {
      if (visible) {
        createPopperInstance();
      } else {
      }
    });
    vueDemi.onMounted(() => {
      createPopperInstance();
    });
    vueDemi.onUnmounted(() => {
      destroyPopperInstance();
    });
    let stopHandle;
    function mouseenter() {
      if (props.trigger != "hover") {
        return;
      }
      show();
    }
    function mouseleave() {
      if (props.trigger != "hover") {
        return;
      }
      close();
    }
    const togglePopperShow = () => {
      if (props.trigger != "click") {
        return;
      }
      if (props.disabled) {
        return;
      }
      if (data.visible) {
        onClose();
      } else {
        if (stopHandle == null) {
          stopHandle = core$1.onClickOutside(contentRef, () => {
            close();
          }, {
            ignore: [referenceRef]
          });
        }
        show();
      }
    };
    function onClose() {
      stopHandle?.();
      stopHandle = null;
      data.visible = false;
    }
    function close() {
      onClose();
    }
    function show() {
      emit("show");
      data.visible = true;
    }
    vueDemi.watch(
      () => data.visible,
      (val) => {
        if (!val) {
          onClose();
        }
      },
      {
        flush: "post"
      }
    );
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createElementBlock(
        vue.Fragment,
        null,
        [
          vue.createElementVNode(
            "div",
            {
              class: vue.normalizeClass(["my-popover_reference", [props.class]]),
              ref_key: "referenceRef",
              ref: referenceRef,
              onMouseenter: mouseenter,
              onMouseleave: mouseleave,
              onClick: vue.withModifiers(togglePopperShow, ["stop", "prevent"])
            },
            [
              vue.renderSlot(_ctx.$slots, "reference")
            ],
            34
            /* CLASS, NEED_HYDRATION */
          ),
          (vue.openBlock(), vue.createBlock(vue.Teleport, { to: ".my-popover_container" }, [
            vue.withDirectives(vue.createElementVNode(
              "div",
              {
                class: "my-popover_content",
                ref_key: "contentRef",
                ref: contentRef,
                style: vue.normalizeStyle(vue.unref(styles))
              },
              [
                vue.renderSlot(_ctx.$slots, "default")
              ],
              4
              /* STYLE */
            ), [
              [vue.vShow, vue.unref(data).visible]
            ])
          ]))
        ],
        64
        /* STABLE_FRAGMENT */
      );
    };
  }
});

exports.default = _sfc_main;
//# sourceMappingURL=my-popover.vue2.js.map