import { defineComponent, useAttrs as useAttrs$1, ref, computed, onMounted, resolveComponent, openBlock, createElementBlock, normalizeClass, unref, normalizeStyle, createVNode, mergeProps, createSlots, withCtx, renderSlot } from 'vue';
import '../../../hooks/index.mjs';
import '../../../utils/index.mjs';
import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
import { useAttrs } from '../../../hooks/use-attrs/index.mjs';
import { generateId } from '../../../utils/rand.mjs';
import { isArray } from '@vue/shared';

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

export { Autocomplete as default };
//# sourceMappingURL=autocomplete2.mjs.map
