hongluan-ui/lib/components/dropdown/src/dropdown-item-impl.js

Hongluan Component Library for Vue 3

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
require('../../roving-focus-group/index.js');
require('../../collection/index.js');
require('../../../hooks/index.js');
require('../../../utils/index.js');
require('../../../constants/index.js');
var dropdown = require('./dropdown2.js');
var tokens = require('./tokens.js');
var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
var index = require('../../../hooks/use-namespace/index.js');
var rovingFocusGroup = require('../../roving-focus-group/src/roving-focus-group.js');
var tokens$1 = require('../../roving-focus-group/src/tokens.js');
var refs = require('../../../utils/vue/refs.js');
var event = require('../../../utils/dom/event.js');
var aria = require('../../../constants/aria.js');
var collection = require('../../collection/src/collection2.js');

const _sfc_main = vue.defineComponent({
  name: "DropdownItemImpl",
  props: dropdown.dropdownItemProps,
  emits: ["pointermove", "pointerleave", "click", "clickimpl"],
  setup(_, { emit }) {
    const { namespace } = index.useNamespace("dropdown-item");
    const { role: menuRole } = vue.inject(tokens.DROPDOWN_INJECTION_KEY, void 0);
    const { collectionItemRef: dropdownCollectionItemRef } = vue.inject(dropdown.DROPDOWN_COLLECTION_ITEM_INJECTION_KEY, void 0);
    const { collectionItemRef: rovingFocusCollectionItemRef } = vue.inject(rovingFocusGroup.ROVING_FOCUS_ITEM_COLLECTION_INJECTION_KEY, void 0);
    const {
      rovingFocusGroupItemRef,
      tabIndex,
      handleFocus,
      handleKeydown: handleItemKeydown,
      handleMousedown
    } = vue.inject(tokens$1.ROVING_FOCUS_GROUP_ITEM_INJECTION_KEY, void 0);
    const itemRef = refs.composeRefs(dropdownCollectionItemRef, rovingFocusCollectionItemRef, rovingFocusGroupItemRef);
    const role = vue.computed(() => {
      if (menuRole.value === "menu") {
        return "menuitem";
      } else if (menuRole.value === "navigation") {
        return "link";
      }
      return "button";
    });
    const handleKeydown = event.composeEventHandlers((e) => {
      const { code } = e;
      if (code === aria.EVENT_CODE.enter || code === aria.EVENT_CODE.space) {
        e.preventDefault();
        e.stopImmediatePropagation();
        emit("clickimpl", e);
        return true;
      }
    }, handleItemKeydown);
    return {
      namespace,
      itemRef,
      dataset: {
        [collection.COLLECTION_ITEM_SIGN]: ""
      },
      role,
      tabIndex,
      handleFocus,
      handleKeydown,
      handleMousedown
    };
  }
});
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  return _ctx.divider ? (vue.openBlock(), vue.createElementBlock("li", vue.mergeProps({
    key: 0,
    class: "menu-divider",
    role: "separator"
  }, _ctx.$attrs), null, 16)) : (vue.openBlock(), vue.createElementBlock("li", vue.mergeProps({
    key: 1,
    ref: _ctx.itemRef
  }, { ..._ctx.dataset, ..._ctx.$attrs }, {
    "aria-disabled": _ctx.disabled,
    class: {
      [_ctx.namespace]: true,
      "is-disabled": _ctx.disabled
    },
    tabindex: _ctx.tabIndex,
    role: _ctx.role,
    onClick: (e) => _ctx.$emit("clickimpl", e),
    onFocus: _ctx.handleFocus,
    onKeydown: vue.withModifiers(_ctx.handleKeydown, ["self"]),
    onMousedown: _ctx.handleMousedown,
    onPointermove: (e) => _ctx.$emit("pointermove", e),
    onPointerleave: (e) => _ctx.$emit("pointerleave", e)
  }), [
    vue.renderSlot(_ctx.$slots, "icon"),
    vue.renderSlot(_ctx.$slots, "default")
  ], 16, ["aria-disabled", "tabindex", "role", "onClick", "onFocus", "onKeydown", "onMousedown", "onPointermove", "onPointerleave"]));
}
var HlDropdownItemImpl = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render]]);

exports["default"] = HlDropdownItemImpl;
//# sourceMappingURL=dropdown-item-impl.js.map