reka-ui/dist/NavigationMenu/NavigationMenuTrigger.cjs

Vue port for Radix UI Primitives.

'use strict';

const vue = require('vue');
const core = require('@vueuse/core');
const NavigationMenu_utils = require('./utils.cjs');
const Collection_Collection = require('../Collection/Collection.cjs');
const shared_useForwardExpose = require('../shared/useForwardExpose.cjs');
const Primitive_Primitive = require('../Primitive/Primitive.cjs');
const VisuallyHidden_VisuallyHidden = require('../VisuallyHidden/VisuallyHidden.cjs');
const NavigationMenu_NavigationMenuRoot = require('./NavigationMenuRoot.cjs');
const NavigationMenu_NavigationMenuItem = require('./NavigationMenuItem.cjs');

const _hoisted_1 = ["aria-owns"];
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  ...{
    inheritAttrs: false
  },
  __name: "NavigationMenuTrigger",
  props: {
    disabled: { type: Boolean },
    asChild: { type: Boolean },
    as: { default: "button" }
  },
  setup(__props) {
    const props = __props;
    const menuContext = NavigationMenu_NavigationMenuRoot.injectNavigationMenuContext();
    const itemContext = NavigationMenu_NavigationMenuItem.injectNavigationMenuItemContext();
    const { CollectionItem } = Collection_Collection.useCollection({ key: "NavigationMenu" });
    const { forwardRef, currentElement: triggerElement } = shared_useForwardExpose.useForwardExpose();
    const triggerId = vue.ref("");
    const contentId = vue.ref("");
    const hasPointerMoveOpenedRef = core.refAutoReset(false, 300);
    const wasClickCloseRef = vue.ref(false);
    const open = vue.computed(() => itemContext.value === menuContext.modelValue.value);
    vue.onMounted(() => {
      itemContext.triggerRef = triggerElement;
      triggerId.value = NavigationMenu_utils.makeTriggerId(menuContext.baseId, itemContext.value);
      contentId.value = NavigationMenu_utils.makeContentId(menuContext.baseId, itemContext.value);
    });
    function handlePointerEnter() {
      if (menuContext.disableHoverTrigger.value)
        return;
      wasClickCloseRef.value = false;
      itemContext.wasEscapeCloseRef.value = false;
    }
    function handlePointerMove(ev) {
      if (menuContext.disableHoverTrigger.value)
        return;
      if (ev.pointerType === "mouse") {
        if (props.disabled || wasClickCloseRef.value || itemContext.wasEscapeCloseRef.value || hasPointerMoveOpenedRef.value) {
          return;
        }
        menuContext.onTriggerEnter(itemContext.value);
        hasPointerMoveOpenedRef.value = true;
      }
    }
    function handlePointerLeave(ev) {
      if (menuContext.disableHoverTrigger.value)
        return;
      if (ev.pointerType === "mouse") {
        if (props.disabled)
          return;
        menuContext.onTriggerLeave();
        hasPointerMoveOpenedRef.value = false;
      }
    }
    function handleClick(event) {
      if (event.pointerType === "mouse" && menuContext.disableClickTrigger.value)
        return;
      if (hasPointerMoveOpenedRef.value)
        return;
      if (open.value)
        menuContext.onItemSelect("");
      else menuContext.onItemSelect(itemContext.value);
      wasClickCloseRef.value = open.value;
    }
    function handleKeydown(ev) {
      const verticalEntryKey = menuContext.dir.value === "rtl" ? "ArrowLeft" : "ArrowRight";
      const entryKey = { horizontal: "ArrowDown", vertical: verticalEntryKey }[menuContext.orientation];
      if (open.value && ev.key === entryKey) {
        itemContext.onEntryKeyDown();
        ev.preventDefault();
        ev.stopPropagation();
      }
    }
    function setFocusProxyRef(node) {
      itemContext.focusProxyRef.value = core.unrefElement(node);
      return void 0;
    }
    function handleVisuallyHiddenFocus(ev) {
      const content = document.getElementById(itemContext.contentId);
      const prevFocusedElement = ev.relatedTarget;
      const wasTriggerFocused = prevFocusedElement === triggerElement.value;
      const wasFocusFromContent = content?.contains(prevFocusedElement);
      if (wasTriggerFocused || !wasFocusFromContent)
        itemContext.onFocusProxyEnter(wasTriggerFocused ? "start" : "end");
    }
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
        vue.createVNode(vue.unref(CollectionItem), null, {
          default: vue.withCtx(() => [
            vue.createVNode(vue.unref(Primitive_Primitive.Primitive), vue.mergeProps({
              id: triggerId.value,
              ref: vue.unref(forwardRef),
              disabled: _ctx.disabled,
              "data-disabled": _ctx.disabled ? "" : void 0,
              "data-state": vue.unref(NavigationMenu_utils.getOpenState)(open.value),
              "data-navigation-menu-trigger": "",
              "aria-expanded": open.value,
              "aria-controls": contentId.value,
              "as-child": props.asChild,
              as: _ctx.as
            }, _ctx.$attrs, {
              onPointerenter: handlePointerEnter,
              onPointermove: handlePointerMove,
              onPointerleave: handlePointerLeave,
              onClick: handleClick,
              onKeydown: handleKeydown
            }), {
              default: vue.withCtx(() => [
                vue.renderSlot(_ctx.$slots, "default")
              ]),
              _: 3
            }, 16, ["id", "disabled", "data-disabled", "data-state", "aria-expanded", "aria-controls", "as-child", "as"])
          ]),
          _: 3
        }),
        open.value ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
          vue.createVNode(vue.unref(VisuallyHidden_VisuallyHidden._sfc_main), {
            ref: setFocusProxyRef,
            "aria-hidden": "true",
            tabindex: 0,
            onFocus: handleVisuallyHiddenFocus
          }),
          vue.unref(menuContext).viewport ? (vue.openBlock(), vue.createElementBlock("span", {
            key: 0,
            "aria-owns": contentId.value
          }, null, 8, _hoisted_1)) : vue.createCommentVNode("", true)
        ], 64)) : vue.createCommentVNode("", true)
      ], 64);
    };
  }
});

exports._sfc_main = _sfc_main;
//# sourceMappingURL=NavigationMenuTrigger.cjs.map