@empathyco/x-components/js/components/base-dropdown.vue.js

Empathy X Components

import _sfc_main from './base-dropdown.vue2.js';
import { openBlock, createElementBlock, normalizeClass, withKeys, withModifiers, createElementVNode, renderSlot, createTextVNode, toDisplayString, createBlock, resolveDynamicComponent, withCtx, withDirectives, Fragment, renderList, vShow } from 'vue';
import './base-dropdown.vue3.js';
import _export_sfc from '../_virtual/_plugin-vue_export-helper.js';

const _hoisted_1 = ["aria-expanded", "aria-controls", "aria-label"];
const _hoisted_2 = ["id"];
const _hoisted_3 = ["aria-selected", "onClick"];
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  return openBlock(), createElementBlock(
    "div",
    {
      ref: "rootRef",
      class: normalizeClass([_ctx.dropdownCSSClasses, "x-dropdown"]),
      onKeydown: [
        _cache[5] || (_cache[5] = (...args) => _ctx.updateSearchBuffer && _ctx.updateSearchBuffer(...args)),
        _cache[6] || (_cache[6] = withKeys(withModifiers((...args) => _ctx.highlightNextItem && _ctx.highlightNextItem(...args), ["prevent"]), ["down"])),
        _cache[7] || (_cache[7] = withKeys(withModifiers((...args) => _ctx.highlightPreviousItem && _ctx.highlightPreviousItem(...args), ["prevent"]), ["up"]))
      ]
    },
    [
      createElementVNode("button", {
        ref: "toggleButtonRef",
        class: "x-dropdown__toggle",
        "data-test": "dropdown-toggle",
        role: "combobox",
        "aria-haspopup": "listbox",
        "aria-expanded": _ctx.isOpen.toString(),
        "aria-controls": _ctx.listId,
        "aria-label": _ctx.ariaLabel,
        "aria-autocomplete": "none",
        onClick: _cache[0] || (_cache[0] = (...args) => _ctx.toggle && _ctx.toggle(...args)),
        onKeydown: _cache[1] || (_cache[1] = withKeys(withModifiers((...args) => _ctx.open && _ctx.open(...args), ["prevent", "stop"]), ["up", "down"]))
      }, [
        _ctx.hasToggleSlot ? renderSlot(_ctx.$slots, "toggle", {
          key: 0,
          isOpen: _ctx.isOpen,
          item: _ctx.modelValue
        }, () => [
          createTextVNode(
            toDisplayString(_ctx.modelValue),
            1
            /* TEXT */
          )
        ], true) : renderSlot(_ctx.$slots, "item", {
          key: 1,
          item: _ctx.modelValue
        }, () => [
          createTextVNode(
            toDisplayString(_ctx.modelValue),
            1
            /* TEXT */
          )
        ], true)
      ], 40, _hoisted_1),
      (openBlock(), createBlock(resolveDynamicComponent(_ctx.animation), null, {
        default: withCtx(() => [
          withDirectives(createElementVNode("ul", {
            id: _ctx.listId,
            class: "x-dropdown__items-list",
            "data-test": "dropdown-list",
            role: "listbox",
            tabindex: "-1",
            onKeydown: [
              _cache[2] || (_cache[2] = withKeys((...args) => _ctx.highlightLastItem && _ctx.highlightLastItem(...args), ["end"])),
              _cache[3] || (_cache[3] = withKeys((...args) => _ctx.closeAndFocusToggleButton && _ctx.closeAndFocusToggleButton(...args), ["esc"])),
              _cache[4] || (_cache[4] = withKeys((...args) => _ctx.highlightFirstItem && _ctx.highlightFirstItem(...args), ["home"]))
            ]
          }, [
            (openBlock(true), createElementBlock(
              Fragment,
              null,
              renderList(_ctx.items, (item, index) => {
                return openBlock(), createElementBlock("li", {
                  key: item.id || item,
                  class: "x-dropdown__list-item"
                }, [
                  createElementVNode("button", {
                    ref_for: true,
                    ref: (el) => _ctx.itemsButtonRefs[index] = el,
                    "aria-selected": (item === _ctx.modelValue).toString(),
                    class: normalizeClass([_ctx.itemsCSSClasses[index], "x-dropdown__item"]),
                    "data-test": "dropdown-item",
                    role: "option",
                    onClick: ($event) => _ctx.emitSelectedItemChanged(item)
                  }, [
                    renderSlot(_ctx.$slots, "item", {
                      isHighlighted: index === _ctx.highlightedItemIndex,
                      isSelected: item === _ctx.modelValue,
                      item
                    }, () => [
                      createTextVNode(
                        toDisplayString(item),
                        1
                        /* TEXT */
                      )
                    ], true)
                  ], 10, _hoisted_3)
                ]);
              }),
              128
              /* KEYED_FRAGMENT */
            ))
          ], 40, _hoisted_2), [
            [vShow, _ctx.isOpen]
          ])
        ]),
        _: 3
        /* FORWARDED */
      }))
    ],
    34
    /* CLASS, NEED_HYDRATION */
  );
}
var BaseDropdown = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-11f44d70"]]);

export { BaseDropdown as default };
//# sourceMappingURL=base-dropdown.vue.js.map