/**
 * ldesign v0.2.22
 * (c) 2022/12/7 16:21 built by swimly
 * @license MIT
 */

import { defineComponent, ref, computed, watch, onBeforeMount } from '@vue/composition-api';
import isFunction from 'lodash/isFunction';
import { l as log } from '../../_chunks/dep-eaa95999.js';
import { usePrefixClass } from '../../hooks/useConfig.js';
import _HighlightOption from './highlight-option.js';
import '../../_chunks/dep-102361be.js';
import '../config-provider/useConfig.js';
import '../config-provider/context.js';
import 'lodash/merge';
import 'lodash/mergeWith';
import '../../_chunks/dep-b4fd1955.js';

var AutoCompleteOptionList = defineComponent({
  name: "AutoCompleteOptionList",
  props: {
    sizeClassNames: Object,
    value: String,
    size: String,
    options: Array,
    popupVisible: Boolean,
    highlightKeyword: Boolean,
    filterable: Boolean,
    filter: Function
  },
  setup(props, _ref) {
    let {
      emit
    } = _ref;
    const active = ref("");
    const classPrefix = usePrefixClass();
    const classes = computed(() => `${classPrefix.value}-select__list`);
    const optionClasses = computed(() => [`${classPrefix.value}-select-option`, {
      [props.sizeClassNames[props.size]]: props.size
    }]);
    const tOptions = computed(() => {
      let options = props.options.map(item => {
        let option = {};
        if (typeof item === "string") {
          option = {
            text: item,
            label: item
          };
        } else {
          if (item.text && typeof item.text !== "string") log.warn("AutoComplete", "`text` must be a string.");
          if (!item.text) {
            if (typeof item.label === "string") option = {
              ...item,
              text: item.label
            };else log.warn("AutoComplete", "one of `label` and `text` must be a existed string.");
          } else {
            option = item;
          }
        }
        return option;
      });
      if (props.filter) {
        options = options.filter(option => props.filter(props.value, option));
      } else if (props.filterable) {
        const regExp = new RegExp(props.value, "i");
        options = options.filter(item => regExp.test(item.text));
      }
      return options;
    });
    const onOptionClick = e => {
      let liNode = e.target;
      while (liNode && liNode.tagName !== "LI") liNode = liNode.parentNode;
      const keyword = liNode.getAttribute("title");
      active.value = keyword;
      emit("select", keyword, {
        e
      });
    };
    const onKeyInnerPress = e => {
      if (e.code === "ArrowUp" || e.key === "ArrowUp") {
        const index = tOptions.value.findIndex(item => item.text === active.value);
        const newIndex = index - 1 < 0 ? tOptions.value.length - 1 : index - 1;
        active.value = tOptions.value[newIndex].text;
      } else if (e.code === "ArrowDown" || e.key === "ArrowDown") {
        const index = tOptions.value.findIndex(item => item.text === active.value);
        const newIndex = index + 1 >= tOptions.value.length ? 0 : index + 1;
        active.value = tOptions.value[newIndex].text;
      } else if (e.code === "Enter" || e.key === "Enter") {
        emit("select", active.value, {
          e
        });
      }
    };
    watch(() => props.popupVisible, () => {
      if (props.popupVisible) document.addEventListener("keydown", onKeyInnerPress);else document.removeEventListener("keydown", onKeyInnerPress);
    }, {
      immediate: true
    });
    watch(() => props.value, () => {
      if (!props.value) active.value = "";
    }, {
      immediate: true
    });
    onBeforeMount(() => {
      document.removeEventListener("keydown", onKeyInnerPress);
    });
    return {
      classes,
      classPrefix,
      optionClasses,
      active,
      tOptions,
      onOptionClick
    };
  },
  render() {
    const h = arguments[0];
    if (!this.tOptions.length) return null;
    return h("ul", {
      "class": this.classes
    }, [this.tOptions.map(item => {
      const cls = [...this.optionClasses];
      if (item.text === this.active) cls.push(`${this.classPrefix}-select-option--hover`);
      let labelNode = item.label;
      if (isFunction(item.label)) labelNode = item.label(h);else if (this.$scopedSlots.option) labelNode = this.$scopedSlots.option?.({
        option: item
      });
      const content = labelNode || item.text;
      return h("li", {
        "key": item.text,
        "class": cls,
        "attrs": {
          "title": item.text
        },
        "on": {
          "click": this.onOptionClick
        }
      }, [typeof content === "string" && this.highlightKeyword ? h(_HighlightOption, {
        "attrs": {
          "content": content,
          "keyword": this.value
        }
      }) : content]);
    })]);
  }
});

export { AutoCompleteOptionList as default };
//# sourceMappingURL=option-list.js.map
