@antdv/pro-utils/es/components/FieldLabel/index.mjs

@antdv/pro-utils

import { createVNode as _createVNode } from "vue";
import { CloseCircleFilled, DownOutlined } from "@ant-design/icons-vue";
import { useIntl } from "@antdv/pro-provider";
import { useConfigContextInject } from "ant-design-vue/lib/config-provider/context";
import { computed, defineComponent, ref } from "vue";
import { classNames } from "../../classNames/index.mjs";
import { anyType, boolType, funcType, numberType, stringType, vNodeType } from "../../vueHelper/index.mjs";
import { useStyle } from "./style.mjs";
const fieldLabelProps = {
  label: vNodeType(),
  value: anyType(),
  disabled: boolType(),
  onClear: funcType(),
  size: stringType(),
  ellipsis: boolType(),
  placeholder: stringType(),
  formatter: funcType(),
  bordered: boolType(),
  allowClear: boolType(),
  downIcon: [Object, Boolean],
  onClick: funcType(),
  valueMaxLength: numberType(),
  /**
   * 点击标签的事件，用来唤醒 down menu 状态
   */
  onLabelClick: funcType()
};
const FieldLabelFunction = defineComponent({
  name: "FieldLabel",
  inheritAttrs: false,
  props: fieldLabelProps,
  slots: Object,
  setup(props, {
    attrs,
    expose,
    slots
  }) {
    const {
      getPrefixCls,
      componentSize
    } = useConfigContextInject();
    const prefixCls = computed(() => getPrefixCls("pro-core-field-label"));
    const {
      wrapSSR,
      hashId
    } = useStyle(prefixCls);
    const intl = useIntl();
    const clearRef = ref(null);
    const labelRef = 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 _createVNode("span", {
              "key": index
            }, [item, comma]);
          }
          return _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 ? _createVNode("span", {
            "onClick": () => {
              onLabelClick == null ? void 0 : onLabelClick();
            },
            "class": `${prefixCls.value}-text`
          }, [aLabel, ": "]) : "";
          const str = formatterText(aValue);
          if (!ellipsis) {
            return _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 _createVNode("span", {
            "title": typeof str === "string" ? str : void 0,
            "style": {
              display: "inline-flex",
              alignItems: "center"
            }
          }, [prefix, _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(_createVNode("span", {
        "class": 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 && _createVNode(CloseCircleFilled, {
        "role": "button",
        "title": intl.getMessage("form.lightFilter.clear", "\u6E05\u9664"),
        "class": classNames(`${prefixCls.value}-icon`, hashId.value, `${prefixCls.value}-close`),
        "onClick": (e) => {
          if (!disabled) onClear == null ? void 0 : onClear();
          e.stopPropagation();
        },
        "ref": clearRef
      }, null), downIcon || _createVNode(DownOutlined, {
        "class": classNames(`${prefixCls.value}-icon`, hashId.value, `${prefixCls.value}-arrow`)
      }, null)]));
    };
  }
});
const FieldLabel = FieldLabelFunction;
export {
  FieldLabel
};