@opensig/opendesign/es/search/OSearch.vue.mjs

import { defineComponent, inject, ref, computed, watch, createElementBlock, openBlock, normalizeClass, createCommentVNode, createBlock, withDirectives, unref, withCtx, Fragment, renderList, renderSlot, createVNode, withModifiers, createElementVNode, toDisplayString, nextTick } from "vue";
import { OSelect } from "../select/index.mjs";
import { OOption } from "../option/index.mjs";
import { OInput } from "../input/index.mjs";
import { isArray } from "../_utils/is.mjs";
import { splitByMatch } from "../_utils/string.mjs";
import { debounce } from "../_utils/helper.mjs";
import "../icon-components/OIconZoomOut/OIconZoomOut.vue2.mjs";
import "../icon-components/OIconZoomIn/OIconZoomIn.vue2.mjs";
import "../icon-components/OIconVideoPlay/OIconVideoPlay.vue2.mjs";
import "../icon-components/OIconTime/OIconTime.vue2.mjs";
import "../icon-components/OIconStar/OIconStar.vue2.mjs";
import OIconSearch from "../icon-components/OIconSearch/OIconSearch.vue.mjs";
import "../icon-components/OIconRefresh/OIconRefresh.vue2.mjs";
import "../icon-components/OIconOneToOne/OIconOneToOne.vue2.mjs";
import "../icon-components/OIconMinus/OIconMinus.vue2.mjs";
import "../icon-components/OIconLoading/OIconLoading.vue2.mjs";
import "../icon-components/OIconLoadingSmall/OIconLoadingSmall.vue2.mjs";
import "../icon-components/OIconLink/OIconLink.vue2.mjs";
import "../icon-components/OIconInfoTip/OIconInfoTip.vue2.mjs";
import "../icon-components/OIconImgError/OIconImgError.vue2.mjs";
import "../icon-components/OIconImageError/OIconImageError.vue2.mjs";
import "../icon-components/OIconFilter/OIconFilter.vue2.mjs";
import "../icon-components/OIconFile/OIconFile.vue2.mjs";
import "../icon-components/OIconEye/OIconEye.vue2.mjs";
import "../icon-components/OIconEyeOff/OIconEyeOff.vue2.mjs";
import "../icon-components/OIconEllipsis/OIconEllipsis.vue2.mjs";
import "../icon-components/OIconEdit/OIconEdit.vue2.mjs";
import "../icon-components/OIconDownload/OIconDownload.vue2.mjs";
import "../icon-components/OIconDoubleArrowUp/OIconDoubleArrowUp.vue2.mjs";
import "../icon-components/OIconDoubleArrowRight/OIconDoubleArrowRight.vue2.mjs";
import "../icon-components/OIconDoubleArrowLeft/OIconDoubleArrowLeft.vue2.mjs";
import "../icon-components/OIconDoubleArrowDown/OIconDoubleArrowDown.vue2.mjs";
import "../icon-components/OIconDone/OIconDone.vue2.mjs";
import "../icon-components/OIconDelete/OIconDelete.vue2.mjs";
import "../icon-components/OIconClose/OIconClose.vue2.mjs";
import "../icon-components/OIconChevronUp/OIconChevronUp.vue2.mjs";
import "../icon-components/OIconChevronRight/OIconChevronRight.vue2.mjs";
import "../icon-components/OIconChevronRightSmall/OIconChevronRightSmall.vue2.mjs";
import "../icon-components/OIconChevronLeft/OIconChevronLeft.vue2.mjs";
import "../icon-components/OIconChevronDown/OIconChevronDown.vue2.mjs";
import "../icon-components/OIconChevronDownBold/OIconChevronDownBold.vue2.mjs";
import "../icon-components/OIconChecked/OIconChecked.vue2.mjs";
import "../icon-components/OIconCaretUp/OIconCaretUp.vue2.mjs";
import "../icon-components/OIconCaretRight/OIconCaretRight.vue2.mjs";
import "../icon-components/OIconCaretLeft/OIconCaretLeft.vue2.mjs";
import "../icon-components/OIconCaretDown/OIconCaretDown.vue2.mjs";
import "../icon-components/OIconCalendar/OIconCalendar.vue2.mjs";
import "../icon-components/OIconAvatar/OIconAvatar.vue2.mjs";
import "../icon-components/OIconArrowUp/OIconArrowUp.vue2.mjs";
import "../icon-components/OIconArrowRight/OIconArrowRight.vue2.mjs";
import "../icon-components/OIconArrowLeft/OIconArrowLeft.vue2.mjs";
import "../icon-components/OIconArrowDown/OIconArrowDown.vue2.mjs";
import "../icon-components/OIconAdd/OIconAdd.vue2.mjs";
import "../icon-components/OIconWarning/OIconWarning.vue2.mjs";
import "../icon-components/OIconSun/OIconSun.vue2.mjs";
import "../icon-components/OIconSuccess/OIconSuccess.vue2.mjs";
import "../icon-components/OIconSort/OIconSort.vue2.mjs";
import "../icon-components/OIconSkill/OIconSkill.vue2.mjs";
import "../icon-components/OIconNoData/OIconNoData.vue2.mjs";
import "../icon-components/OIconMoon/OIconMoon.vue2.mjs";
import "../icon-components/OIconKunpeng/OIconKunpeng.vue2.mjs";
import "../icon-components/OIconInfo/OIconInfo.vue2.mjs";
import "../icon-components/OIconExclamationMark/OIconExclamationMark.vue2.mjs";
import "../icon-components/OIconDanger/OIconDanger.vue2.mjs";
import "../icon-components/OIconCheckMark/OIconCheckMark.vue2.mjs";
import "../icon-components/OIconAscend/OIconAscend.vue2.mjs";
import { formItemInjectKey } from "../form/provide.mjs";
import { vOutClick } from "../directives/click-outside.mjs";
import "../hooks/use-theme.mjs";
import "../_utils/global.mjs";
import "@vueuse/core";
import { searchProps } from "./types.mjs";
const _hoisted_1 = { class: "o-search-option" };
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "OSearch",
  props: searchProps,
  emits: ["update:modelValue", "change", "input", "blur", "focus", "clear", "prefix-selected", "suffix-selected", "suggesstion-selected", "pressEnter", "options-visible-change"],
  setup(__props, { emit: __emit }) {
    const props = __props;
    const emits = __emit;
    const formItemInjection = inject(formItemInjectKey, null);
    const searchInputRef = ref();
    const searchSelectRef = ref();
    const selectedValOfPrefix = ref(props.prefixSelectedVal);
    const selectedValOfSuffix = ref(props.suffixSelectedVal);
    const inputValue = ref(props.modelValue ?? (props.defaultValue || ""));
    let previousValue = inputValue.value;
    const isOutClick = ref(false);
    const color = computed(() => {
      var _a;
      if (formItemInjection == null ? void 0 : formItemInjection.fieldResult.value) {
        return ((_a = formItemInjection == null ? void 0 : formItemInjection.fieldResult.value) == null ? void 0 : _a.type) || void 0;
      } else {
        return props.color;
      }
    });
    const size = computed(() => {
      if (props.size === "medium") {
        return props.size;
      }
      return "large";
    });
    const optionsOfPrefixSelect = computed(() => {
      return isArray(props.optionsOfPrefixSelect) ? props.optionsOfPrefixSelect : [];
    });
    const optionsOfSuffixSelect = computed(() => {
      return isArray(props.optionsOfSuffixSelect) ? props.optionsOfSuffixSelect : [];
    });
    const showPrefixSelect = computed(() => {
      return props.showPrefixSelect && optionsOfPrefixSelect.value.length;
    });
    const showSuffixSelect = computed(() => {
      return props.showSuffixSelect && optionsOfSuffixSelect.value.length;
    });
    const suggesstions = computed(() => {
      return isArray(props.suggesstions) ? props.suggesstions : [];
    });
    const formatOptions = (options, keyword) => {
      return options.map((item) => {
        return {
          ...item,
          labelSegments: splitByMatch(item.label, keyword)
        };
      }).filter((v) => v.labelSegments.length > 1);
    };
    const realSuggesstions = ref(formatOptions(suggesstions.value, inputValue.value));
    const isShowingSuggesstiongs = computed(() => {
      var _a, _b;
      return ((_a = realSuggesstions.value) == null ? void 0 : _a.length) && ((_b = searchSelectRef.value) == null ? void 0 : _b.isSelecting);
    });
    const updateSuggesstions = async (keyword) => {
      var _a, _b;
      realSuggesstions.value = formatOptions(suggesstions.value, keyword);
      if (realSuggesstions.value.length) {
        await nextTick();
        (_b = (_a = searchSelectRef.value) == null ? void 0 : _a.selectRef) == null ? void 0 : _b.click();
      }
    };
    const formatSuggesstions = debounce(updateSuggesstions, 200, false);
    const emitUpdateValue = () => {
      emits("update:modelValue", inputValue.value);
    };
    const onInput = (evt, value) => {
      var _a, _b;
      emits("input", evt, value);
      formatSuggesstions(value);
      (_b = formItemInjection == null ? void 0 : (_a = formItemInjection.fieldHandlers).onInput) == null ? void 0 : _b.call(_a);
    };
    const onFocus = (evt) => {
      var _a, _b;
      emits("focus", evt);
      (_b = formItemInjection == null ? void 0 : (_a = formItemInjection.fieldHandlers).onFocus) == null ? void 0 : _b.call(_a);
    };
    const onBlur = (evt) => {
      var _a, _b;
      emits("blur", evt);
      (_b = formItemInjection == null ? void 0 : (_a = formItemInjection.fieldHandlers).onBlur) == null ? void 0 : _b.call(_a);
    };
    const onPressEnter = (evt) => {
      emits("pressEnter", evt);
    };
    const onClear = (evt) => {
      emits("clear", evt);
      updateSuggesstions(inputValue.value);
    };
    const emitChange = () => {
      var _a, _b;
      if (inputValue.value !== previousValue) {
        emits("change", inputValue.value);
        previousValue = inputValue.value;
        (_b = formItemInjection == null ? void 0 : (_a = formItemInjection.fieldHandlers).onChange) == null ? void 0 : _b.call(_a);
      }
    };
    const onChange = (value) => {
      inputValue.value = value;
      emitChange();
    };
    const onUpdateModelValue = (value) => {
      inputValue.value = value;
      emitUpdateValue();
    };
    const onSuggesstionSelected = (val) => {
      onUpdateModelValue(val);
      emits("suggesstion-selected", val);
    };
    const handleClick = () => {
      if (props.disabled) {
        return;
      }
      isOutClick.value = false;
      updateSuggesstions(inputValue.value);
    };
    const shouldHideOptions = () => {
      return isOutClick.value || !isShowingSuggesstiongs.value;
    };
    const onOutClick = () => {
      isOutClick.value = true;
    };
    watch(
      () => props.modelValue,
      (val) => {
        if (inputValue.value !== val) {
          inputValue.value = val || "";
        }
      }
    );
    watch(selectedValOfPrefix, (val) => {
      emits("prefix-selected", val);
    });
    watch(selectedValOfSuffix, (val) => {
      emits("suffix-selected", val);
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock(
        "div",
        {
          class: normalizeClass(["o-search", [{ "o-search-with-prefix": showPrefixSelect.value, "o-search-with-suffix": showSuffixSelect.value }, `o-search-${props.size}`]])
        },
        [
          createCommentVNode(" 头部筛选框 "),
          props.showPrefixSelect ? (openBlock(), createBlock(unref(OSelect), {
            key: 0,
            modelValue: selectedValOfPrefix.value,
            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => selectedValOfPrefix.value = $event),
            class: "o-search-prefix o-search-select",
            placeholder: props.placeholderOfPrefixSelect,
            size: size.value,
            round: props.round,
            color: color.value,
            variant: props.variant,
            disabled: props.disabled,
            readonly: props.readonly
          }, {
            prefix: withCtx(() => [
              renderSlot(_ctx.$slots, "prefix-of-search-prefix")
            ]),
            default: withCtx(() => [
              (openBlock(true), createElementBlock(
                Fragment,
                null,
                renderList(optionsOfPrefixSelect.value, (item) => {
                  return openBlock(), createBlock(unref(OOption), {
                    key: item.value,
                    label: item.label,
                    value: item.value
                  }, null, 8, ["label", "value"]);
                }),
                128
                /* KEYED_FRAGMENT */
              ))
            ]),
            _: 3
            /* FORWARDED */
          }, 8, ["modelValue", "placeholder", "size", "round", "color", "variant", "disabled", "readonly"])) : createCommentVNode("v-if", true),
          withDirectives((openBlock(), createElementBlock("div", {
            class: "o-search-input-wrap",
            onClick: handleClick
          }, [
            createVNode(unref(OInput), {
              ref_key: "searchInputRef",
              ref: searchInputRef,
              class: "o-search-input",
              "model-value": inputValue.value,
              placeholder: props.placeholder,
              size: size.value,
              round: props.round,
              color: color.value,
              variant: props.variant,
              disabled: props.disabled,
              readonly: props.readonly,
              clearable: props.clearable,
              onInput,
              onBlur,
              onFocus,
              onChange,
              onClear,
              onPressEnter,
              "onUpdate:modelValue": onUpdateModelValue,
              onClick: _cache[1] || (_cache[1] = withModifiers(() => {
              }, ["prevent"]))
            }, {
              prefix: withCtx(() => [
                createVNode(unref(OIconSearch), { class: "o-search-icon" })
              ]),
              _: 1
              /* STABLE */
            }, 8, ["model-value", "placeholder", "size", "round", "color", "variant", "disabled", "readonly", "clearable"]),
            createCommentVNode(" 联想建议筛选框 "),
            realSuggesstions.value.length ? (openBlock(), createBlock(unref(OSelect), {
              key: 0,
              ref_key: "searchSelectRef",
              ref: searchSelectRef,
              class: "o-search-select-placeholder",
              "option-width-mode": "width",
              trigger: "click-outclick",
              "model-value": inputValue.value,
              size: size.value,
              round: props.round,
              color: color.value,
              variant: props.variant,
              disabled: props.disabled,
              readonly: props.readonly,
              "before-options-hide": shouldHideOptions,
              "no-responsive": true,
              "onUpdate:modelValue": onSuggesstionSelected,
              onClick: _cache[2] || (_cache[2] = withModifiers(() => {
              }, ["stop"]))
            }, {
              default: withCtx(() => [
                (openBlock(true), createElementBlock(
                  Fragment,
                  null,
                  renderList(realSuggesstions.value, (item) => {
                    return openBlock(), createBlock(unref(OOption), {
                      key: item.value,
                      label: item.label,
                      value: item.value
                    }, {
                      default: withCtx(() => [
                        createElementVNode("div", _hoisted_1, [
                          (openBlock(true), createElementBlock(
                            Fragment,
                            null,
                            renderList(item.labelSegments, (segment, idx) => {
                              return openBlock(), createElementBlock(
                                "span",
                                {
                                  key: idx,
                                  class: normalizeClass(["o-search-label", { "o-search-keyword-highlight": idx % 2 !== 0 }])
                                },
                                toDisplayString(segment),
                                3
                                /* TEXT, CLASS */
                              );
                            }),
                            128
                            /* KEYED_FRAGMENT */
                          ))
                        ])
                      ]),
                      _: 2
                      /* DYNAMIC */
                    }, 1032, ["label", "value"]);
                  }),
                  128
                  /* KEYED_FRAGMENT */
                ))
              ]),
              _: 1
              /* STABLE */
            }, 8, ["model-value", "size", "round", "color", "variant", "disabled", "readonly"])) : createCommentVNode("v-if", true)
          ])), [
            [unref(vOutClick), onOutClick]
          ]),
          createCommentVNode(" 尾部筛选框 "),
          props.showSuffixSelect ? (openBlock(), createBlock(unref(OSelect), {
            key: 1,
            modelValue: selectedValOfSuffix.value,
            "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => selectedValOfSuffix.value = $event),
            class: "o-search-suffix o-search-select",
            placeholder: props.placeholderOfSuffixSelect,
            size: size.value,
            round: props.round,
            color: color.value,
            variant: props.variant,
            disabled: props.disabled,
            readonly: props.readonly
          }, {
            prefix: withCtx(() => [
              renderSlot(_ctx.$slots, "prefix-of-search-suffix")
            ]),
            default: withCtx(() => [
              (openBlock(true), createElementBlock(
                Fragment,
                null,
                renderList(optionsOfSuffixSelect.value, (item) => {
                  return openBlock(), createBlock(unref(OOption), {
                    key: item.value,
                    label: item.label,
                    value: item.value
                  }, null, 8, ["label", "value"]);
                }),
                128
                /* KEYED_FRAGMENT */
              ))
            ]),
            _: 3
            /* FORWARDED */
          }, 8, ["modelValue", "placeholder", "size", "round", "color", "variant", "disabled", "readonly"])) : createCommentVNode("v-if", true)
        ],
        2
        /* CLASS */
      );
    };
  }
});
export {
  _sfc_main as default
};