@opensig/opendesign/lib/anchor/OAnchorItem.vue.js

<p align="center"><img src="../docs/public/opendesign-logo-light.png"/></p> <h1 align="center">opendesign</h1> <p align="center">一个 Vue 3 组件库</p> <p align="center"><b>皮肤可定制，使用 TypeScript</b></p>

"use strict";
const vue = require("vue");
const index = require("../popover/index.js");
const is = require("../_utils/is.js");
const vueUtils = require("../_utils/vue-utils.js");
const dom = require("../_utils/dom.js");
const types = require("./types.js");
const provide = require("./provide.js");
const _hoisted_1 = ["href", "target", "data-depth"];
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  __name: "OAnchorItem",
  props: types.anchorItemProps,
  emits: ["item-click"],
  setup(__props, { emit: __emit }) {
    const props = __props;
    const slots = vue.useSlots();
    const emits = __emit;
    const anchorInjection = vue.inject(provide.anchorInjectKey, null);
    const anchorItemInjection = vue.inject(provide.anchorItemInjectKey, null);
    const _observeHref = vue.computed(() => props.observeHref || props.href);
    const isActive = vue.computed(() => {
      return _observeHref.value === (anchorInjection == null ? void 0 : anchorInjection.activeLink.value);
    });
    const addItem = () => {
      if (!_observeHref.value) {
        return;
      }
      anchorInjection == null ? void 0 : anchorInjection.addLink(_observeHref.value);
    };
    const removeItem = () => {
      if (!_observeHref.value) {
        return;
      }
      anchorInjection == null ? void 0 : anchorInjection.removeLink(_observeHref.value);
    };
    const onClick = (event) => {
      emits("item-click", event);
      if (props.disabled) {
        event.preventDefault();
        return;
      }
      if (props.href && !is.isCurrentPageLink(props.href) || props.target && props.target !== "_self") {
        return;
      }
      if (!(anchorInjection == null ? void 0 : anchorInjection.getChangeHash())) {
        event.preventDefault();
      }
      anchorInjection == null ? void 0 : anchorInjection.onItemClick({
        event,
        link: _observeHref.value
      });
      if (_observeHref.value) {
        anchorInjection == null ? void 0 : anchorInjection.scrollIntoView(_observeHref.value);
      }
    };
    vue.watch(
      () => _observeHref.value,
      (newVal, oldVal) => {
        vue.nextTick(() => {
          if (oldVal) {
            anchorInjection == null ? void 0 : anchorInjection.removeLink(oldVal);
          }
          if (newVal) {
            anchorInjection == null ? void 0 : anchorInjection.addLink(newVal);
          }
        });
      }
    );
    const depth = anchorItemInjection ? anchorItemInjection.depth + 1 : 1;
    vue.provide(provide.anchorItemInjectKey, { depth });
    vue.onMounted(() => {
      addItem();
    });
    vue.onUnmounted(() => {
      removeItem();
    });
    const popoverVisible = vue.ref(false);
    const handleMouseenter = (e) => {
      if (!e.target || !dom.isOverflown(e.target)) {
        popoverVisible.value = false;
        return;
      }
      popoverVisible.value = true;
    };
    const handleMouseleave = () => {
      popoverVisible.value = false;
    };
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createElementBlock(
        "div",
        {
          class: vue.normalizeClass({ "o-anchor-item": true, "with-children": !vue.unref(vueUtils.isEmptySlot)(slots.default) })
        },
        [
          vue.createVNode(vue.unref(index.OPopover), {
            visible: popoverVisible.value,
            disabled: !popoverVisible.value,
            position: "right",
            "wrap-class": "o-anchor-link-popover-wrapper"
          }, {
            target: vue.withCtx(() => [
              vue.createElementVNode("a", {
                href: props.href,
                target: props.target,
                class: vue.normalizeClass({ "o-anchor-item-link": true, "is-active": isActive.value, "disabled": props.disabled, "o-anchor-item-sub-link": vue.unref(depth) > 1 }),
                style: vue.normalizeStyle({ "--anchor-item-depth": vue.unref(depth) - 1 }),
                "data-depth": vue.unref(depth) - 1,
                onClick
              }, [
                _cache[0] || (_cache[0] = vue.createElementVNode(
                  "div",
                  { class: "o-anchor-item-lines" },
                  [
                    vue.createElementVNode("div", { class: "o-anchor-item-top-line" }),
                    vue.createElementVNode("div", { class: "o-anchor-item-circle" }),
                    vue.createElementVNode("div", { class: "o-anchor-item-bottom-line" })
                  ],
                  -1
                  /* HOISTED */
                )),
                vue.renderSlot(_ctx.$slots, "title", {}, () => [
                  vue.createElementVNode(
                    "div",
                    {
                      ref: "anchorItemTitleRef",
                      class: "o-anchor-item-title",
                      onMouseenter: handleMouseenter,
                      onMouseleave: handleMouseleave
                    },
                    vue.toDisplayString(props.title),
                    545
                    /* TEXT, NEED_HYDRATION, NEED_PATCH */
                  )
                ])
              ], 14, _hoisted_1)
            ]),
            default: vue.withCtx(() => [
              vue.createTextVNode(
                vue.toDisplayString(props.title) + " ",
                1
                /* TEXT */
              )
            ]),
            _: 3
            /* FORWARDED */
          }, 8, ["visible", "disabled"]),
          vue.renderSlot(_ctx.$slots, "default")
        ],
        2
        /* CLASS */
      );
    };
  }
});
module.exports = _sfc_main;