@antdv/pro-field/es/components/Select/LightSelect/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 { createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
import { SearchOutlined } from "@ant-design/icons-vue";
import { useStyle } from "@antdv/pro-provider";
import { anyType, boolType, classNames, FieldLabel, funcType, isObject, numberType, stringType } from "@antdv/pro-utils";
import { Input, 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 } from "vue";
import { proFieldLightProps } from "../../props.mjs";
import { includes } from "../utils.mjs";
function getValueOrLabel(valueMap, v) {
  if (typeof v !== "object") {
    return valueMap[v] || v;
  }
  return valueMap[v == null ? void 0 : v.value] || v.label;
}
const lightSelectProps = __spreadValues(__spreadProps(__spreadValues({}, selectProps()), {
  label: stringType(),
  placeholder: anyType(),
  valueMaxLength: numberType(),
  /** 刷新数据 */
  fetchData: funcType().isRequired,
  /**
   * 当搜索关键词发生变化时是否请求远程数据
   *
   * @default true
   */
  fetchDataOnSearch: boolType().def(true)
}), proFieldLightProps);
var stdin_default = defineComponent({
  name: "LightSelect",
  inheritAttrs: false,
  props: lightSelectProps,
  emits: {
    "update:value": (val) => true
  },
  setup(props, {
    attrs,
    emit
  }) {
    const {
      getPrefixCls
    } = useConfigContextInject();
    const prefixCls = getPrefixCls("pro-field-select-light-select");
    const open = ref(false);
    const keyword = ref("");
    const {
      wrapSSR,
      hashId
    } = useStyle("LightSelect", (token) => {
      return {
        [`.${prefixCls}`]: {
          [`${token.antCls}-select`]: {
            "position": "absolute",
            "width": "153px",
            "height": "28px",
            "visibility": "hidden",
            "&-selector": {
              height: 28
            }
          },
          [`&.${prefixCls}-searchable`]: {
            [`${token.antCls}-select`]: {
              "width": "200px",
              "&-selector": {
                height: 28
              }
            }
          }
        }
      };
    });
    const lightLabelRef = ref();
    const lightLabel = computed(() => {
      var _a, _b;
      return {
        labelRef: props.labelRef || ((_a = lightLabelRef == null ? void 0 : lightLabelRef.value) == null ? void 0 : _a.labelRef),
        clearRef: props.clearRef || ((_b = lightLabelRef == null ? void 0 : lightLabelRef.value) == null ? void 0 : _b.clearRef)
      };
    });
    const valueMap = computed(() => {
      var _a, _b, _c;
      const values = {};
      const labelPropsName = ((_a = props.fieldNames) == null ? void 0 : _a.label) || "label";
      const valuePropsName = ((_b = props.fieldNames) == null ? void 0 : _b.value) || "value";
      (_c = props.options) == null ? void 0 : _c.forEach((item) => {
        const optionLabel = props.optionLabelProp ? item[props.optionLabelProp] || item[labelPropsName] : item[labelPropsName];
        const optionValue = item[valuePropsName];
        values[optionValue] = optionLabel || optionValue;
      });
      return values;
    });
    const mergeOpen = computed(() => {
      if (Reflect.has(props, "open")) {
        return props == null ? void 0 : props.open;
      }
      return open.value;
    });
    return () => {
      const _a = props, {
        label,
        prefixCls: customizePrefixCls,
        onChange,
        value,
        mode,
        defaultValue,
        size,
        showSearch,
        disabled,
        bordered,
        options,
        onSearch,
        allowClear,
        labelInValue,
        fieldNames,
        labelTrigger,
        optionFilterProp,
        optionLabelProp,
        valueMaxLength = 41,
        fetchDataOnSearch = false,
        fetchData,
        choiceTransitionName,
        labelRef: propsLabelRef,
        clearRef: propsClearRef
      } = _a, restProps = __objRest(_a, [
        "label",
        "prefixCls",
        "onChange",
        "value",
        "mode",
        "defaultValue",
        "size",
        "showSearch",
        "disabled",
        "bordered",
        "options",
        "onSearch",
        "allowClear",
        "labelInValue",
        "fieldNames",
        "labelTrigger",
        "optionFilterProp",
        "optionLabelProp",
        "valueMaxLength",
        "fetchDataOnSearch",
        "fetchData",
        "choiceTransitionName",
        "labelRef",
        "clearRef"
      ]);
      const {
        placeholder = label
      } = props;
      const {
        label: labelPropsName = "label",
        value: valuePropsName = "value"
      } = fieldNames || {};
      const filterValue = Array.isArray(value) ? value.map((v) => getValueOrLabel(valueMap.value, v)) : value && getValueOrLabel(valueMap.value, value);
      return wrapSSR(_createVNode("div", {
        "class": classNames(prefixCls, hashId.value, {
          [`${prefixCls}-searchable`]: showSearch
        }, `${prefixCls}-container-${restProps.placement || "bottomLeft"}`, attrs.class),
        "style": attrs.style,
        "onClick": (e) => {
          var _a2, _b;
          if (disabled) return;
          const isLabelClick = (_b = (_a2 = lightLabel.value) == null ? void 0 : _a2.labelRef) == null ? void 0 : _b.contains(e.target);
          if (isLabelClick) {
            open.value = !open.value;
          }
        }
      }, [_createVNode(Select, _mergeProps(restProps, {
        "allowClear": allowClear,
        "choiceTransitionName": choiceTransitionName,
        "value": value,
        "onUpdate:value": (val) => {
          emit("update:value", val);
        },
        "mode": mode,
        "labelInValue": labelInValue,
        "size": size,
        "disabled": disabled,
        "onChange": (v, option) => {
          onChange == null ? void 0 : onChange(v, option);
          if (mode !== "multiple") {
            open.value = false;
          }
        },
        "bordered": bordered,
        "showSearch": showSearch,
        "onSearch": showSearch ? (keyValue) => {
          if (fetchDataOnSearch && fetchData) {
            fetchData(keyValue);
          }
          onSearch == null ? void 0 : onSearch(keyValue);
        } : void 0,
        "style": attrs.style,
        "dropdownRender": (menuNode) => {
          return _createVNode("div", {
            "ref": ref
          }, [showSearch && _createVNode("div", {
            "style": {
              margin: "4px 8px"
            }
          }, [_createVNode(Input, {
            "value": keyword.value,
            "allowClear": !!allowClear,
            "onChange": (e) => {
              keyword.value = e.target.value || "";
              if (fetchDataOnSearch && fetchData) {
                fetchData(e.target.value);
              }
              onSearch == null ? void 0 : onSearch(e.target.value || "");
            },
            "onKeydown": (e) => {
              e.stopPropagation();
            },
            "style": {
              width: "100%"
            },
            "prefix": _createVNode(SearchOutlined, null, null)
          }, null)]), menuNode]);
        },
        "open": mergeOpen.value,
        "onDropdownVisibleChange": (isOpen) => {
          var _a2;
          if (!isOpen) {
            keyword.value = "";
          }
          if (!labelTrigger) {
            open.value = isOpen;
          }
          (_a2 = restProps == null ? void 0 : restProps.onDropdownVisibleChange) == null ? void 0 : _a2.call(restProps, isOpen);
        },
        "prefixCls": customizePrefixCls,
        "options": onSearch || !keyword.value ? options : options == null ? void 0 : options.filter((o) => {
          var _a2, _b, _c;
          if (optionFilterProp) {
            return includes(o[optionFilterProp], keyword.value);
          }
          return includes(String(o[labelPropsName]), (_a2 = keyword.value) == null ? void 0 : _a2.toLowerCase()) || includes((_b = o[valuePropsName]) == null ? void 0 : _b.toString(), (_c = keyword.value) == null ? void 0 : _c.toLowerCase());
        })
      }), null), _createVNode(FieldLabel, {
        "ellipsis": true,
        "label": label,
        "placeholder": placeholder,
        "disabled": disabled,
        "bordered": bordered,
        "allowClear": !!allowClear,
        "value": filterValue || isObject(value) && (value == null ? void 0 : value.label) || value,
        "onClear": () => {
          onChange == null ? void 0 : onChange(void 0, void 0);
        },
        "ref": lightLabelRef,
        "valueMaxLength": valueMaxLength
      }, null)]));
    };
  }
});
export {
  stdin_default as default,
  lightSelectProps
};