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

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