@antdv/pro-utils/lib/components/FieldLabel/index.js

@antdv/pro-utils

var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var stdin_exports = {};
__export(stdin_exports, {
  FieldLabel: () => FieldLabel
});
module.exports = __toCommonJS(stdin_exports);
var import_vue = require("vue");
var import_icons_vue = require("@ant-design/icons-vue");
var import_pro_provider = require("@antdv/pro-provider");
var import_context = require("ant-design-vue/lib/config-provider/context");
var import_vue2 = require("vue");
var import_classNames = require("../../classNames");
var import_vueHelper = require("../../vueHelper");
var import_style = require("./style");
const fieldLabelProps = {
  label: (0, import_vueHelper.vNodeType)(),
  value: (0, import_vueHelper.anyType)(),
  disabled: (0, import_vueHelper.boolType)(),
  onClear: (0, import_vueHelper.funcType)(),
  size: (0, import_vueHelper.stringType)(),
  ellipsis: (0, import_vueHelper.boolType)(),
  placeholder: (0, import_vueHelper.stringType)(),
  formatter: (0, import_vueHelper.funcType)(),
  bordered: (0, import_vueHelper.boolType)(),
  allowClear: (0, import_vueHelper.boolType)(),
  downIcon: [Object, Boolean],
  onClick: (0, import_vueHelper.funcType)(),
  valueMaxLength: (0, import_vueHelper.numberType)(),
  /**
   * 点击标签的事件，用来唤醒 down menu 状态
   */
  onLabelClick: (0, import_vueHelper.funcType)()
};
const FieldLabelFunction = (0, import_vue2.defineComponent)({
  name: "FieldLabel",
  inheritAttrs: false,
  props: fieldLabelProps,
  slots: Object,
  setup(props, {
    attrs,
    expose,
    slots
  }) {
    const {
      getPrefixCls,
      componentSize
    } = (0, import_context.useConfigContextInject)();
    const prefixCls = (0, import_vue2.computed)(() => getPrefixCls("pro-core-field-label"));
    const {
      wrapSSR,
      hashId
    } = (0, import_style.useStyle)(prefixCls);
    const intl = (0, import_pro_provider.useIntl)();
    const clearRef = (0, import_vue2.ref)(null);
    const labelRef = (0, import_vue2.ref)(null);
    expose({
      labelRef,
      clearRef
    });
    return () => {
      var _a, _b;
      const {
        label,
        onClear,
        value,
        disabled,
        onLabelClick,
        ellipsis,
        placeholder,
        formatter,
        bordered,
        downIcon = slots == null ? void 0 : slots.downIcon(),
        allowClear = true,
        valueMaxLength = 41
      } = props;
      const wrapElements = (array) => {
        if (array.every((item) => typeof item === "string")) return array.join(",");
        return array.map((item, index) => {
          const comma = index === array.length - 1 ? "" : ",";
          if (typeof item === "string") {
            return (0, import_vue.createVNode)("span", {
              "key": index
            }, [item, comma]);
          }
          return (0, import_vue.createVNode)("span", {
            "key": index,
            "style": {
              display: "flex"
            }
          }, [item, comma]);
        });
      };
      const formatterText = (aValue) => {
        if (formatter) {
          return formatter(aValue);
        }
        return Array.isArray(aValue) ? wrapElements(aValue) : aValue;
      };
      const getTextByValue = (aLabel, aValue) => {
        var _a2, _b2;
        if (aValue !== void 0 && aValue !== null && aValue !== "" && (!Array.isArray(aValue) || aValue.length)) {
          const prefix = aLabel ? (0, import_vue.createVNode)("span", {
            "onClick": () => {
              onLabelClick == null ? void 0 : onLabelClick();
            },
            "class": `${prefixCls.value}-text`
          }, [aLabel, ": "]) : "";
          const str = formatterText(aValue);
          if (!ellipsis) {
            return (0, import_vue.createVNode)("span", {
              "style": {
                display: "inline-flex",
                alignItems: "center"
              }
            }, [prefix, formatterText(aValue)]);
          }
          const getText = () => {
            const isArrayValue = Array.isArray(aValue) && aValue.length > 1;
            const unitText = intl.getMessage("form.lightFilter.itemUnit", "\u9879");
            if (typeof str === "string" && str.length > valueMaxLength && isArrayValue) {
              return `...${aValue.length}${unitText}`;
            }
            return "";
          };
          const tail = getText();
          return (0, import_vue.createVNode)("span", {
            "title": typeof str === "string" ? str : void 0,
            "style": {
              display: "inline-flex",
              alignItems: "center"
            }
          }, [prefix, (0, import_vue.createVNode)("span", {
            "style": {
              paddingInlineStart: `4px`,
              display: "flex"
            }
          }, [typeof str === "string" ? (_b2 = (_a2 = str == null ? void 0 : str.toString()) == null ? void 0 : _a2.slice) == null ? void 0 : _b2.call(_a2, 0, valueMaxLength) : str]), tail]);
        }
        return aLabel || placeholder || "";
      };
      return wrapSSR((0, import_vue.createVNode)("span", {
        "class": (0, import_classNames.classNames)(prefixCls.value, hashId.value, `${prefixCls.value}-${(_b = (_a = props.size) != null ? _a : componentSize == null ? void 0 : componentSize.value) != null ? _b : "middle"}`, {
          [`${prefixCls.value}-active`]: (Array.isArray(value) ? value.length > 0 : !!value) || value === 0,
          [`${prefixCls.value}-disabled`]: disabled,
          [`${prefixCls.value}-bordered`]: bordered,
          [`${prefixCls.value}-allow-clear`]: allowClear
        }, attrs.class || ""),
        "style": attrs.style,
        "ref": labelRef,
        "onClick": () => {
          var _a2;
          (_a2 = props == null ? void 0 : props.onClick) == null ? void 0 : _a2.call(props);
        }
      }, [getTextByValue(label, value), (value || value === 0) && allowClear && (0, import_vue.createVNode)(import_icons_vue.CloseCircleFilled, {
        "role": "button",
        "title": intl.getMessage("form.lightFilter.clear", "\u6E05\u9664"),
        "class": (0, import_classNames.classNames)(`${prefixCls.value}-icon`, hashId.value, `${prefixCls.value}-close`),
        "onClick": (e) => {
          if (!disabled) onClear == null ? void 0 : onClear();
          e.stopPropagation();
        },
        "ref": clearRef
      }, null), downIcon || (0, import_vue.createVNode)(import_icons_vue.DownOutlined, {
        "class": (0, import_classNames.classNames)(`${prefixCls.value}-icon`, hashId.value, `${prefixCls.value}-arrow`)
      }, null)]));
    };
  }
});
const FieldLabel = FieldLabelFunction;