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

import { defineComponent, useSlots, inject, computed, watch, nextTick, provide, onMounted, onUnmounted, ref, createElementBlock, openBlock, normalizeClass, unref, createVNode, renderSlot, createCommentVNode, 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 _hoisted_2 = {
  key: 0,
  class: "o-anchor-item-lines"
};
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) => {
      var _a, _b;
      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 || ((_a = unref(anchorInjection)) == null ? void 0 : _a.layout.value) === "h",
            position: "right",
            "wrap-class": "o-anchor-link-popover-wrapper"
          }, {
            target: withCtx(() => {
              var _a2;
              return [
                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
                }, [
                  ((_a2 = unref(anchorInjection)) == null ? void 0 : _a2.layout.value) === "v" ? (openBlock(), createElementBlock("div", _hoisted_2, [..._cache[0] || (_cache[0] = [
                    createElementVNode(
                      "div",
                      { class: "o-anchor-item-top-line" },
                      null,
                      -1
                      /* CACHED */
                    ),
                    createElementVNode(
                      "div",
                      { class: "o-anchor-item-circle" },
                      null,
                      -1
                      /* CACHED */
                    ),
                    createElementVNode(
                      "div",
                      { class: "o-anchor-item-bottom-line" },
                      null,
                      -1
                      /* CACHED */
                    )
                  ])])) : createCommentVNode("v-if", true),
                  renderSlot(_ctx.$slots, "title", {}, () => [
                    createElementVNode(
                      "div",
                      {
                        class: "o-anchor-item-title",
                        onMouseenter: handleMouseenter,
                        onMouseleave: handleMouseleave
                      },
                      toDisplayString(props.title),
                      33
                      /* TEXT, NEED_HYDRATION */
                    )
                  ])
                ], 14, _hoisted_1)
              ];
            }),
            default: withCtx(() => [
              createTextVNode(
                toDisplayString(props.title) + " ",
                1
                /* TEXT */
              )
            ]),
            _: 3
            /* FORWARDED */
          }, 8, ["visible", "disabled"]),
          ((_b = unref(anchorInjection)) == null ? void 0 : _b.layout.value) === "v" ? renderSlot(_ctx.$slots, "default", { key: 0 }) : createCommentVNode("v-if", true)
        ],
        2
        /* CLASS */
      );
    };
  }
});
export {
  _sfc_main as default
};