@antdv/pro-field/es/components/Select/SearchSelect/index.mjs

原子信息组件，统一 ProForm、ProTable、ProList、Filter 等组件里面的字段定义。

var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
  for (var prop in b || (b = {}))
    if (__hasOwnProp.call(b, prop))
      __defNormalProp(a, prop, b[prop]);
  if (__getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(b)) {
      if (__propIsEnum.call(b, prop))
        __defNormalProp(a, prop, b[prop]);
    }
  return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
var __objRest = (source, exclude) => {
  var target = {};
  for (var prop in source)
    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
      target[prop] = source[prop];
  if (source != null && __getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(source)) {
      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
        target[prop] = source[prop];
    }
  return target;
};
import { mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
import { arrayType, boolType, classNames, funcType, isObject, nanoid, numberType, omit, oneOfType, stringType } from "@antdv/pro-utils";
import { Select } from "ant-design-vue";
import { useConfigContextInject } from "ant-design-vue/lib/config-provider/context";
import { selectProps } from "ant-design-vue/lib/select";
import { computed, defineComponent, ref, watchEffect } from "vue";
import { includes } from "../utils.mjs";
const searchSelectProps = __spreadProps(__spreadValues({}, omit(selectProps(), ["options"])), {
  /** 防抖动时间 默认10 单位ms */
  debounceTime: numberType().def(10),
  /** 自定义搜索方法, 返回搜索结果的 Promise */
  request: funcType(),
  /** 自定义选项渲染 */
  optionItemRender: funcType(),
  /** 指定组件中的值 */
  value: oneOfType([Object, Array]),
  /** 指定默认选中的条目 */
  defaultValue: oneOfType([Object, Array]),
  options: arrayType(),
  /**
   * Placeholder 输入提示
   *
   * @default 请输入关键字搜索
   */
  placeholder: stringType(),
  /**
   * 是否在输入框聚焦时触发搜索
   *
   * @default false
   */
  searchOnFocus: boolType(),
  /**
   * 选择完一个之后是否清空搜索项重新搜索
   *
   * @default false
   */
  resetAfterSelect: boolType(),
  /**
   * 自定义前缀
   *
   * @ignore
   */
  prefixCls: stringType(),
  /** 刷新数据 */
  fetchData: funcType().isRequired,
  /** 清空数据 */
  resetData: funcType().isRequired,
  /**
   * 当搜索关键词发生变化时是否请求远程数据
   *
   * @default true
   */
  fetchDataOnSearch: boolType().def(true),
  /** 默认搜索关键词 */
  defaultSearchValue: stringType(),
  /**
   * 在选择时保留选项的原始标签文本
   * 当设置为 true 时，选中后回填的内容将使用选项的原始 label，而不是经过 optionItemRender 处理后的内容
   * @default false
   */
  preserveOriginalLabel: boolType().def(false)
});
var stdin_default = defineComponent({
  name: "SearchSelect",
  inheritAttrs: false,
  props: searchSelectProps,
  emits: {
    "update:value": (val) => true
  },
  setup(props, {
    attrs,
    expose,
    emit
  }) {
    var _a;
    const selectRef = ref();
    const {
      getPrefixCls
    } = useConfigContextInject();
    const prefixCls = computed(() => getPrefixCls("pro-filed-search-select", props.prefixCls));
    expose(selectRef.value);
    const searchValue = ref((_a = props.searchValue) != null ? _a : props.defaultSearchValue);
    watchEffect(() => {
      var _a2;
      if (props.autofocus) {
        (_a2 = selectRef == null ? void 0 : selectRef.value) == null ? void 0 : _a2.focus();
      }
    });
    watchEffect(() => {
      searchValue.value = props.searchValue;
    });
    return () => {
      const _a2 = props, {
        optionItemRender,
        mode,
        onSearch,
        onFocus,
        onChange,
        autoClearSearchValue = true,
        searchOnFocus = false,
        resetAfterSelect = false,
        fetchDataOnSearch = true,
        optionFilterProp = "label",
        optionLabelProp = "label",
        disabled,
        options,
        fetchData,
        resetData,
        prefixCls: customizePrefixCls,
        onClear,
        searchValue: propsSearchValue,
        choiceTransitionName,
        showSearch,
        fieldNames,
        defaultSearchValue,
        preserveOriginalLabel = false,
        allowClear,
        "onUpdate:value": _
      } = _a2, restProps = __objRest(_a2, [
        "optionItemRender",
        "mode",
        "onSearch",
        "onFocus",
        "onChange",
        "autoClearSearchValue",
        "searchOnFocus",
        "resetAfterSelect",
        "fetchDataOnSearch",
        "optionFilterProp",
        "optionLabelProp",
        "disabled",
        "options",
        "fetchData",
        "resetData",
        "prefixCls",
        "onClear",
        "searchValue",
        "choiceTransitionName",
        "showSearch",
        "fieldNames",
        "defaultSearchValue",
        "preserveOriginalLabel",
        "allowClear",
        "onUpdate:value"
      ]);
      const {
        label: labelPropsName = "label",
        value: valuePropsName = "value",
        options: optionsPropsName = "options"
      } = fieldNames || {};
      const classString = classNames(prefixCls.value, attrs.class || "", {
        [`${prefixCls.value}-disabled`]: disabled
      });
      const getMergeValue = (value, option) => {
        if (Array.isArray(value) && Array.isArray(option) && value.length > 0) {
          return value.map((item, index) => {
            const optionItem = option == null ? void 0 : option[index];
            const dataItem = (optionItem == null ? void 0 : optionItem["data-item"]) || {};
            const selectOption = isObject(item) ? item : {
              [valuePropsName]: item
            };
            return __spreadProps(__spreadValues(__spreadValues({}, dataItem), selectOption), {
              label: preserveOriginalLabel ? dataItem.label : isObject(item) ? item.label : dataItem.label
            });
          });
        }
        return [];
      };
      const genOptions = (mapOptions) => {
        return mapOptions.map((item, index) => {
          var _b;
          const _a3 = item, {
            className: itemClassName,
            optionType
          } = _a3, resetItem = __objRest(_a3, [
            "className",
            "optionType"
          ]);
          const label = item[labelPropsName];
          const value = item[valuePropsName];
          const itemOptions = (_b = item[optionsPropsName]) != null ? _b : [];
          if (optionType === "optGroup" || item.options) {
            return __spreadProps(__spreadValues({
              label
            }, resetItem), {
              data_title: label,
              title: label,
              key: value != null ? value : `${label == null ? void 0 : label.toString()}-${index}-${nanoid()}`,
              // 防止因key相同导致虚拟滚动出问题
              children: genOptions(itemOptions)
            });
          }
          return __spreadProps(__spreadValues({
            "title": label
          }, resetItem), {
            "data_title": label,
            "value": value != null ? value : index,
            "key": value != null ? value : `${label == null ? void 0 : label.toString()}-${index}-${nanoid()}`,
            "data-item": item,
            "className": `${prefixCls.value}-option ${itemClassName || ""}`.trim(),
            "label": (optionItemRender == null ? void 0 : optionItemRender(item)) || label
          });
        });
      };
      return _createVNode(Select, _mergeProps({
        "ref": selectRef,
        "class": classString,
        "allowClear": true,
        "autoClearSearchValue": autoClearSearchValue,
        "choiceTransitionName": choiceTransitionName,
        "disabled": disabled,
        "mode": mode,
        "showSearch": showSearch,
        "style": attrs.style,
        "searchValue": searchValue.value,
        "optionFilterProp": optionFilterProp,
        "optionLabelProp": optionLabelProp,
        "onClear": () => {
          onClear == null ? void 0 : onClear();
          fetchData(void 0);
          if (showSearch) {
            searchValue.value = void 0;
          }
        }
      }, restProps, {
        "onUpdate:value": (val) => {
          emit("update:value", val);
        },
        "filterOption": restProps.filterOption === false ? false : (inputValue, option) => {
          var _a3, _b, _c;
          if (restProps.filterOption && typeof restProps.filterOption === "function") {
            return restProps.filterOption(inputValue, __spreadProps(__spreadValues({}, option), {
              label: option == null ? void 0 : option.data_title
            }));
          }
          return !!(includes((_a3 = option == null ? void 0 : option.data_title) == null ? void 0 : _a3.toString(), inputValue.toLowerCase()) || includes((_b = option == null ? void 0 : option.label) == null ? void 0 : _b.toString(), inputValue.toLowerCase()) || includes((_c = option == null ? void 0 : option.value) == null ? void 0 : _c.toString(), inputValue.toLowerCase()));
        },
        "onSearch": showSearch ? (value) => {
          if (fetchDataOnSearch) fetchData(value);
          onSearch == null ? void 0 : onSearch(value);
          searchValue.value = value;
        } : void 0,
        "onChange": (value, optionList, ...rest) => {
          if (showSearch && autoClearSearchValue) {
            fetchData == null ? void 0 : fetchData(void 0);
            onSearch == null ? void 0 : onSearch("");
            searchValue.value = void 0;
          }
          if (!props.labelInValue) {
            onChange == null ? void 0 : onChange(value, optionList, ...rest);
            return;
          }
          if (mode !== "multiple" && !Array.isArray(optionList)) {
            const dataItem = optionList && optionList["data-item"];
            if (!value || !dataItem) {
              const changedValue = isObject(value) ? __spreadProps(__spreadValues({}, value), {
                // 这里有一种情况，如果用户使用了 request和labelInValue，保存之后，刷新页面，正常回显，但是再次添加会出现 label 丢失的情况。所以需要兼容
                label: preserveOriginalLabel ? (dataItem == null ? void 0 : dataItem.label) || value.label : value.label
              }) : value;
              onChange == null ? void 0 : onChange(changedValue, optionList, ...rest);
            } else {
              const selectOption = isObject(value) ? value : {
                [valuePropsName]: value
              };
              onChange == null ? void 0 : onChange(__spreadProps(__spreadValues(__spreadValues({}, selectOption), dataItem), {
                label: preserveOriginalLabel ? dataItem.label : isObject(value) ? value.label : dataItem.label
              }), optionList, ...rest);
            }
            return;
          }
          const mergeValue = getMergeValue(value, optionList);
          onChange == null ? void 0 : onChange(mergeValue, optionList, ...rest);
          if (resetAfterSelect) resetData();
        },
        "onFocus": (e) => {
          if (searchOnFocus) {
            fetchData(searchValue.value);
          }
          onFocus == null ? void 0 : onFocus(e);
        },
        "options": genOptions(options || [])
      }), null);
    };
  }
});
export {
  stdin_default as default
};