'use strict';

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

var vue = require('vue');
require('../../../hooks/index.js');
require('../../../utils/index.js');
var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
var index = require('../../../hooks/use-namespace/index.js');
var index$1 = require('../../../hooks/use-attrs/index.js');
var rand = require('../../../utils/rand.js');
var shared = require('@vue/shared');

const _hoisted_1 = ["aria-expanded", "aria-owns"];
const __default__ = {
  name: "PsAutocomplete",
  inheritAttrs: false
};
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  ...__default__,
  setup(__props, { expose }) {
    const COMPONENT_NAME = "PsAutocomplete";
    const ns = index.useNamespace("autocomplete");
    const attrs = index$1.useAttrs();
    const compAttrs = vue.useAttrs();
    const suggestions = vue.ref([]);
    const highlightedIndex = vue.ref(-1);
    const activated = vue.ref(false);
    const loading = vue.ref(false);
    const inputRef = vue.ref();
    const popperRef = vue.ref();
    const listboxRef = vue.ref();
    const id = vue.computed(() => {
      return ns.b(String(rand.generateId()));
    });
    const styles = vue.computed(() => compAttrs.style);
    const suggestionVisible = vue.computed(() => {
      const isValidData = shared.isArray(suggestions.value) && suggestions.value.length > 0;
      return (isValidData || loading.value) && activated.value;
    });
    vue.onMounted(() => {
      ;
      inputRef.value.ref.setAttribute("role", "textbox");
      inputRef.value.ref.setAttribute("aria-autocomplete", "list");
      inputRef.value.ref.setAttribute("aria-controls", "id");
      inputRef.value.ref.setAttribute("aria-activedescendant", `${id.value}-item-${highlightedIndex.value}`);
    });
    expose({
      highlightedIndex,
      activated,
      loading,
      inputRef,
      popperRef,
      suggestions
    });
    return (_ctx, _cache) => {
      const _component_ps_input = vue.resolveComponent("ps-input");
      return vue.openBlock(), vue.createElementBlock("div", {
        ref_key: "listboxRef",
        ref: listboxRef,
        class: vue.normalizeClass([vue.unref(ns).b(), _ctx.$attrs.class]),
        style: vue.normalizeStyle(vue.unref(styles)),
        role: "combobox",
        "aria-haspopup": "listbox",
        "aria-expanded": vue.unref(suggestionVisible),
        "aria-owns": vue.unref(id)
      }, [
        vue.createVNode(_component_ps_input, vue.mergeProps({
          ref_key: "inputRef",
          ref: inputRef
        }, vue.unref(attrs), { "model-value": _ctx.modelValue }), vue.createSlots({ _: 2 }, [
          _ctx.$slots.prepend ? {
            name: "prepend",
            fn: vue.withCtx(() => [
              vue.renderSlot(_ctx.$slots, "prepend")
            ])
          } : void 0,
          _ctx.$slots.append ? {
            name: "append",
            fn: vue.withCtx(() => [
              vue.renderSlot(_ctx.$slots, "append")
            ])
          } : void 0,
          _ctx.$slots.prefix ? {
            name: "prefix",
            fn: vue.withCtx(() => [
              vue.renderSlot(_ctx.$slots, "prefix")
            ])
          } : void 0,
          _ctx.$slots.suffix ? {
            name: "suffix",
            fn: vue.withCtx(() => [
              vue.renderSlot(_ctx.$slots, "suffix")
            ])
          } : void 0
        ]), 1040, ["model-value"])
      ], 14, _hoisted_1);
    };
  }
});
var Autocomplete = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "/Users/meng/workspace/element-ps/packages/components/autocomplete/src/autocomplete.vue"]]);

exports["default"] = Autocomplete;
//# sourceMappingURL=autocomplete2.js.map
