@opensig/opendesign/es/anchor/OAnchorItem.vue.mjs

<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>

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