/**
 * ldesign v0.4.2
 * (c) 2023 ldesign
 * @license MIT
 */

import { _ as _toConsumableArray } from '../_chunks/dep-e091cfd9.mjs';
import { _ as _defineProperty } from '../_chunks/dep-eb20e23f.mjs';
import { defineComponent, ref, computed, watch, onBeforeUnmount, createVNode, h } from 'vue';
import { i as isFunction_1 } from '../_chunks/dep-6b22dd27.mjs';
import { i as isString_1 } from '../_chunks/dep-1cf2b129.mjs';
import '../_common/js/log/index.mjs';
import { usePrefixClass } from '../hooks/useConfig.mjs';
import { on, off } from '../utils/dom.mjs';
import _HighlightOption from './highlight-option.mjs';
import log from '../_common/js/log/log.mjs';
import '../_chunks/dep-cfcedf47.mjs';
import '../_chunks/dep-b4041200.mjs';
import '../_chunks/dep-a0b4a044.mjs';
import '../_chunks/dep-c959a6fb.mjs';
import '../_chunks/dep-0f0c89ff.mjs';
import '../_chunks/dep-e3b14d70.mjs';
import '../_chunks/dep-66d6733b.mjs';
import '../_chunks/dep-c31e1d9e.mjs';
import '../config-provider/useConfig.mjs';
import '../_chunks/dep-44417261.mjs';
import '../_chunks/dep-bf74f1c2.mjs';
import '../_chunks/dep-79821ff2.mjs';
import '../_chunks/dep-0bfbf721.mjs';
import '../_chunks/dep-39cc276d.mjs';
import '../_chunks/dep-8f777748.mjs';
import '../_chunks/dep-ae357f26.mjs';
import '../_chunks/dep-352691c2.mjs';
import '../_chunks/dep-2cfd5b3a.mjs';
import '../_chunks/dep-05fa17c9.mjs';
import '../_chunks/dep-a9c8a5d5.mjs';
import '../_chunks/dep-10085c61.mjs';
import '../_chunks/dep-1b058de3.mjs';
import '../_chunks/dep-c852a61a.mjs';
import '../_chunks/dep-92e7085e.mjs';
import '../_chunks/dep-44f056cd.mjs';
import '../_chunks/dep-23a0f453.mjs';
import '../_chunks/dep-99920870.mjs';
import '../_chunks/dep-c7e9ce16.mjs';
import '../_chunks/dep-3afa94cf.mjs';
import '../_chunks/dep-ba3c0b2e.mjs';
import '../_chunks/dep-ee57d235.mjs';
import '../_common/js/global-config/default-config.mjs';
import '../_common/js/global-config/locale/zh_CN.mjs';
import '../_chunks/dep-6b4aa943.mjs';
import '../_chunks/dep-d52291a9.mjs';
import '../config-provider/type.mjs';
import '../utils/easing.mjs';

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
var AutoCompleteOptionList = defineComponent({
  name: "AutoCompleteOptionList",
  props: {
    sizeClassNames: Object,
    value: String,
    size: String,
    options: Array,
    popupVisible: Boolean,
    highlightKeyword: Boolean,
    filterable: Boolean,
    filter: Function
  },
  emits: ["select"],
  setup: function setup(props, _ref) {
    var emit = _ref.emit,
      slots = _ref.slots,
      expose = _ref.expose;
    var active = ref("");
    var classPrefix = usePrefixClass();
    var classes = computed(function () {
      return "".concat(classPrefix.value, "-select__list");
    });
    var optionClasses = computed(function () {
      return ["".concat(classPrefix.value, "-select-option"), _defineProperty({}, props.sizeClassNames[props.size], props.size)];
    });
    var tOptions = computed(function () {
      var options = (props.options || []).map(function (item) {
        var option = {};
        if (isString_1(item)) {
          option = {
            text: item,
            label: item
          };
        } else {
          if (item.text && !isString_1(item.text)) log.warn("AutoComplete", "`text` must be a string.");
          if (!item.text) {
            if (isString_1(item.label)) option = _objectSpread(_objectSpread({}, 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(function (option) {
          return props.filter(props.value, option);
        });
      } else if (props.filterable) {
        var regExp = new RegExp(props.value, "i");
        options = options.filter(function (item) {
          return regExp.test(item.text);
        });
      }
      return options;
    });
    var onOptionClick = function onOptionClick(e) {
      var liNode = e.target;
      while (liNode && liNode.tagName !== "LI") liNode = liNode.parentNode;
      var keyword = liNode.getAttribute("title");
      active.value = keyword;
      emit("select", keyword, {
        e: e
      });
    };
    var onKeyInnerPress = function onKeyInnerPress(e) {
      if (e.code === "ArrowUp" || e.key === "ArrowUp") {
        var index = tOptions.value.findIndex(function (item) {
          return item.text === active.value;
        });
        var newIndex = index - 1 < 0 ? tOptions.value.length - 1 : index - 1;
        active.value = tOptions.value[newIndex].text;
      } else if (e.code === "ArrowDown" || e.key === "ArrowDown") {
        var _index = tOptions.value.findIndex(function (item) {
          return item.text === active.value;
        });
        var _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: e
        });
      }
    };
    var addKeyboardListener = function addKeyboardListener() {
      on(document, "keydown", onKeyInnerPress);
    };
    var removeKeyboardListener = function removeKeyboardListener() {
      off(document, "keydown", onKeyInnerPress);
    };
    expose({
      addKeyboardListener: addKeyboardListener,
      removeKeyboardListener: removeKeyboardListener
    });
    watch(function () {
      return props.popupVisible;
    }, function () {
      if (props.popupVisible) addKeyboardListener();else removeKeyboardListener();
    }, {
      immediate: true
    });
    watch(function () {
      return props.value;
    }, function () {
      if (!props.value) active.value = "";
    }, {
      immediate: true
    });
    onBeforeUnmount(function () {
      removeKeyboardListener();
    });
    return function () {
      if (!tOptions.value.length) return null;
      return createVNode("ul", {
        "class": classes.value
      }, [tOptions.value.map(function (item) {
        var _slots$option;
        var cls = _toConsumableArray(optionClasses.value);
        if (item.text === active.value) cls.push("".concat(classPrefix.value, "-select-option--hover"));
        var labelNode = item.label;
        if (isFunction_1(item.label)) labelNode = item.label(h);else if (slots.option) labelNode = (_slots$option = slots.option) === null || _slots$option === void 0 ? void 0 : _slots$option.call(slots, {
          option: item
        });
        var content = labelNode || item.text;
        return createVNode("li", {
          "key": item.text,
          "class": cls,
          "title": item.text,
          "onClick": onOptionClick
        }, [isString_1(content) && props.highlightKeyword ? createVNode(_HighlightOption, {
          "content": content,
          "keyword": props.value
        }, null) : content]);
      })]);
    };
  }
});

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