@antdv/pro-field/es/components/Select/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;
};
var __async = (__this, __arguments, generator) => {
  return new Promise((resolve, reject) => {
    var fulfilled = (value) => {
      try {
        step(generator.next(value));
      } catch (e) {
        reject(e);
      }
    };
    var rejected = (value) => {
      try {
        step(generator.throw(value));
      } catch (e) {
        reject(e);
      }
    };
    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
    step((generator = generator.apply(__this, __arguments)).next());
  });
};
import { Fragment as _Fragment, createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
import { useIntl, useStyle } from "@antdv/pro-provider";
import { anyType, arrayType, funcType, objectToMap, objectType, oneOfType, proFieldParsingText, stringType, useDeepCompareEffect, useMemo, useMountMergeState, useRequest } from "@antdv/pro-utils";
import { ConfigProvider, Spin } from "ant-design-vue";
import { useConfigContextInject } from "ant-design-vue/lib/config-provider/context";
import { computed, defineComponent, h, ref, watchEffect } from "vue";
import { buildProFieldProp, proFieldLightProps } from "../props.mjs";
import LightSelect from "./LightSelect/index.mjs";
import SearchSelect from "./SearchSelect/index.mjs";
const fieldSelectProps = buildProFieldProp(__spreadValues({
  value: oneOfType([String, Number, Array]),
  /** 值的枚举，如果存在枚举，Search 中会生成 select */
  valueEnum: objectType(),
  /** 防抖动时间 默认10 单位ms */
  debounceTime: Number,
  /** 从服务器读取选项 */
  request: funcType(),
  /** 重新触发的时机 */
  params: anyType(),
  /** 组件的全局设置 */
  fieldProps: anyType(),
  bordered: Boolean,
  id: String,
  /** 默认搜素条件 */
  defaultKeyWords: String,
  fieldNames: objectType()
}, proFieldLightProps));
const Highlight = defineComponent({
  name: "Highlight",
  props: {
    label: stringType().isRequired,
    words: arrayType().isRequired
  },
  setup(props) {
    const {
      getPrefixCls
    } = useConfigContextInject();
    const lightCls = getPrefixCls("pro-select-item-option-content-light");
    const optionCls = getPrefixCls("pro-select-item-option-content");
    const {
      wrapSSR
    } = useStyle("Highlight", (token) => {
      return {
        [`.${lightCls}`]: {
          color: token.colorPrimary
        },
        [`.${optionCls}`]: {
          flex: "auto",
          overflow: "hidden",
          whiteSpace: "nowrap",
          textOverflow: "ellipsis"
        }
      };
    });
    return () => {
      const {
        label,
        words
      } = props;
      const matchKeywordsRE = new RegExp(words.map((word) => word.replace(/[-[\]/{}()*+?.\\^$|]/g, "\\$&")).join("|"), "gi");
      let matchText = label;
      const elements = [];
      while (matchText.length) {
        const match = matchKeywordsRE.exec(matchText);
        if (!match) {
          elements.push(matchText);
          break;
        }
        const start = match.index;
        const matchLength = match[0].length + start;
        elements.push(matchText.slice(0, start), h("span", {
          class: lightCls
        }, matchText.slice(start, matchLength)));
        matchText = matchText.slice(matchLength);
      }
      return wrapSSR(h("div", {
        title: label,
        class: optionCls
      }, elements));
    };
  }
});
function filerByItem(item, keyWords) {
  var _a, _b;
  if (!keyWords) return true;
  if (((_a = item == null ? void 0 : item.label) == null ? void 0 : _a.toString().toLowerCase().includes(keyWords.toLowerCase())) || ((_b = item == null ? void 0 : item.value) == null ? void 0 : _b.toString().toLowerCase().includes(keyWords.toLowerCase()))) {
    return true;
  }
  if (item.children || item.options) {
    const findItem = [...item.children || [], item.options || []].find((mapItem) => {
      return filerByItem(mapItem, keyWords);
    });
    if (findItem) return true;
  }
  return false;
}
function proFieldParsingValueEnumToArray(valueEnumParams) {
  const enumArray = [];
  const valueEnum = objectToMap(valueEnumParams);
  valueEnum.forEach((_, key) => {
    const value = valueEnum.get(key) || valueEnum.get(`${key}`);
    if (!value) {
      return;
    }
    if (typeof value === "object" && (value == null ? void 0 : value.text)) {
      enumArray.push({
        text: value == null ? void 0 : value.text,
        value: key,
        label: value == null ? void 0 : value.text,
        disabled: value.disabled
      });
      return;
    }
    enumArray.push({
      text: value,
      value: key
    });
  });
  return enumArray;
}
function useFieldFetchData(props) {
  const keyWords = ref(props.defaultKeyWords);
  const getOptionsFormValueEnum = (coverValueEnum) => {
    return proFieldParsingValueEnumToArray(objectToMap(coverValueEnum)).map((_a) => {
      var _b = _a, {
        value,
        text
      } = _b, rest = __objRest(_b, [
        "value",
        "text"
      ]);
      return __spreadValues({
        label: text,
        value,
        key: value
      }, rest);
    });
  };
  const defaultOptions = useMemo(() => {
    var _a, _b;
    if (!props.fieldProps) return void 0;
    const data = ((_a = props.fieldProps) == null ? void 0 : _a.options) || ((_b = props.fieldProps) == null ? void 0 : _b.treeData);
    if (!data) return void 0;
    const {
      children,
      label,
      value
    } = props.fieldProps.fieldNames || {};
    const traverseFieldKey = (_options, type) => {
      var _a2;
      if (!((_a2 = _options.value) == null ? void 0 : _a2.length)) return;
      const length = _options.value.length;
      let i = 0;
      while (i < length) {
        const cur = _options.value[i++];
        if (cur[children] || cur[label] || cur[value]) {
          cur[type] = cur[type === "children" ? children : type === "label" ? label : value];
          traverseFieldKey(cur[children], type);
        }
      }
    };
    if (children) traverseFieldKey(data, "children");
    if (label) traverseFieldKey(data, "label");
    if (value) traverseFieldKey(data, "value");
    return data;
  }, computed(() => [props.fieldProps]), {
    deep: true
  });
  const [options, setOptions] = useMountMergeState(() => {
    if (props.valueEnum) {
      return getOptionsFormValueEnum(props.valueEnum);
    }
    return [];
  }, {
    value: defaultOptions
  });
  useDeepCompareEffect(() => {
    var _a, _b;
    if (!props.valueEnum || ((_a = props.fieldProps) == null ? void 0 : _a.options) || ((_b = props.fieldProps) == null ? void 0 : _b.treeData)) {
      return;
    }
    setOptions(getOptionsFormValueEnum(props.valueEnum));
  }, [props.valueEnum]);
  const {
    state,
    isLoading
  } = useRequest(() => __async(this, null, function* () {
    var _a;
    const res = yield (_a = props.request) == null ? void 0 : _a.call(props, __spreadProps(__spreadValues({}, props.params), {
      keyWords: keyWords.value
    }), props);
    return res;
  }));
  const resOptions = computed(() => {
    var _a, _b, _c;
    const opt = (_a = options.value) == null ? void 0 : _a.map((item) => {
      if (typeof item === "string") {
        return {
          label: item,
          value: item
        };
      }
      if (item.children || item.options) {
        const childrenOptions = [...item.children || [], ...item.options || []].filter((mapItem) => {
          return filerByItem(mapItem, keyWords.value);
        });
        return __spreadProps(__spreadValues({}, item), {
          children: childrenOptions,
          options: childrenOptions
        });
      }
      return item;
    });
    if (((_b = props.fieldProps) == null ? void 0 : _b.filterOption) === true || ((_c = props.fieldProps) == null ? void 0 : _c.filterOption) === void 0) {
      return opt == null ? void 0 : opt.filter((item) => {
        if (!item) return false;
        if (!keyWords.value) return true;
        return filerByItem(item, keyWords.value);
      });
    }
    return opt;
  });
  return [isLoading, props.request ? state : resOptions, (fetchKeyWords) => {
    keyWords.value = fetchKeyWords;
  }, () => {
    keyWords.value = void 0;
  }];
}
var stdin_default = defineComponent({
  name: "FieldSelect",
  inheritAttrs: false,
  props: fieldSelectProps,
  emits: {
    "update:value": (val) => true
  },
  setup(props, {
    expose,
    attrs,
    emit
  }) {
    var _a, _b;
    const inputRef = ref();
    const intl = useIntl();
    const keyWordsRef = ref("");
    const [loading, options, fetchData, resetData] = useFieldFetchData(props);
    const {
      componentSize
    } = ((_b = (_a = ConfigProvider) == null ? void 0 : _a.useConfig) == null ? void 0 : _b.call(_a)) || {
      componentSize: "middle"
    };
    expose(__spreadProps(__spreadValues({}, inputRef.value || {}), {
      fetchData: (keyWord) => fetchData(keyWord)
    }));
    watchEffect(() => {
      var _a2;
      keyWordsRef.value = (_a2 = props.fieldProps) == null ? void 0 : _a2.searchValue;
    });
    const optionsValueEnum = computed(() => {
      if (props.mode !== "read") return;
      const {
        label: labelPropsName = "label",
        value: valuePropsName = "value",
        options: optionsPropsName = "options"
      } = props.fieldProps.fieldNames || {};
      const valuesMap = /* @__PURE__ */ new Map();
      const traverseOptions = (_options) => {
        if (!(_options == null ? void 0 : _options.length)) {
          return valuesMap;
        }
        const length = _options.length;
        let i = 0;
        while (i < length) {
          const cur = _options[i++];
          valuesMap.set(cur[valuePropsName], cur[labelPropsName]);
          traverseOptions(cur[optionsPropsName]);
        }
        return valuesMap;
      };
      return traverseOptions(options.value);
    });
    return () => {
      var _a2, _b2;
      const {
        text,
        value,
        mode,
        valueEnum,
        render,
        renderFormItem,
        fieldProps,
        light,
        label,
        bordered,
        id,
        labelTrigger
      } = props;
      const textValue = text != null ? text : value;
      if (mode === "read") {
        const dom = _createVNode(_Fragment, null, [proFieldParsingText(textValue, objectToMap(valueEnum || optionsValueEnum.value))]);
        if (render) {
          return (_a2 = render(dom, __spreadValues({
            mode,
            value
          }, fieldProps), dom)) != null ? _a2 : null;
        }
        return dom;
      }
      if (mode === "edit" || mode === "update") {
        const renderDom = () => {
          if (light) {
            return _createVNode(LightSelect, _mergeProps({
              "bordered": bordered,
              "id": id,
              "loading": loading.value,
              "ref": inputRef,
              "allowClear": true,
              "size": componentSize,
              "options": options.value,
              "label": label,
              "placeholder": intl.getMessage("tableForm.selectPlaceholder", "\u8BF7\u9009\u62E9"),
              "labelTrigger": labelTrigger,
              "fetchData": fetchData,
              "value": value,
              "onUpdate:value": (val) => {
                emit("update:value", val);
              }
            }, fieldProps), null);
          }
          return _createVNode(SearchSelect, _mergeProps({
            "key": "SearchSelect",
            "className": attrs.class,
            "style": __spreadValues({
              minWidth: `100px`
            }, attrs.style || {}),
            "bordered": bordered,
            "id": id,
            "loading": loading.value,
            "ref": inputRef,
            "allowClear": true,
            "defaultSearchValue": props.defaultKeyWords,
            "notFoundContent": loading.value ? _createVNode(Spin, {
              "size": "small"
            }, null) : fieldProps == null ? void 0 : fieldProps.notFoundContent,
            "fetchData": (keyWord) => {
              keyWordsRef.value = keyWord != null ? keyWord : "";
              fetchData(keyWord);
            },
            "resetData": resetData,
            "preserveOriginalLabel": true,
            "optionItemRender": (item) => {
              if (typeof item.label === "string" && keyWordsRef.value) {
                return _createVNode(Highlight, {
                  "label": item.label,
                  "words": [keyWordsRef.value]
                }, null);
              }
              return item.label;
            },
            "placeholder": intl.getMessage("tableForm.selectPlaceholder", "\u8BF7\u9009\u62E9"),
            "label": label
          }, fieldProps, {
            "value": value,
            "onUpdate:value": (val) => {
              emit("update:value", val);
            },
            "options": options.value
          }), null);
        };
        const dom = renderDom();
        if (renderFormItem) {
          return (_b2 = renderFormItem(textValue, computed(() => __spreadProps(__spreadValues({
            mode,
            value
          }, fieldProps), {
            options: options.value,
            loading: loading.value
          })), dom)) != null ? _b2 : null;
        }
        return dom;
      }
      return null;
    };
  }
});
;
export {
  stdin_default as default,
  fieldSelectProps,
  proFieldParsingValueEnumToArray,
  useFieldFetchData
};