wetrade-design/es/tag/index.js

一款多语言支持Vue3的UI框架

import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import { Fragment as _Fragment, createVNode as _createVNode } from "vue";
import { ref, defineComponent, watchEffect, computed } from 'vue';
import classNames from '../_util/classNames';
import PropTypes from '../_util/vue-types';
import CloseOutlined from '@ant-design/icons-vue/CloseOutlined';
import Wave from '../_util/wave';
import CheckableTag from './CheckableTag';
import MarketIcon from './svg';
import useConfigInject from '../_util/hooks/useConfigInject';
import { RegionTypeEnum } from '../_util/enum';
// const PresetColorRegex = new RegExp(`^(${PresetColorTypes.join('|')})(-inverse)?$`);
// const PresetStatusColorRegex = new RegExp(`^(${PresetStatusColorTypes.join('|')})$`);
export var tagProps = function tagProps() {
  return {
    prefixCls: String,
    color: {
      type: String
    },
    closable: {
      type: Boolean,
      default: false
    },
    closeIcon: PropTypes.any,
    visible: {
      type: Boolean,
      default: undefined
    },
    onClose: {
      type: Function
    },
    'onUpdate:visible': Function,
    icon: PropTypes.any,
    regionType: {
      type: Number
    },
    regionTypeSize: {
      type: String
    },
    backgroundColor: String,
    bordered: {
      type: [String, Boolean],
      default: false
    },
    popover: {
      type: Boolean,
      default: false
    },
    underline: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: 'long'
    }
  };
};
var Tag = defineComponent({
  compatConfig: {
    MODE: 3
  },
  name: 'WdTag',
  props: tagProps(),
  // emits: ['update:visible', 'close'],
  slots: ['closeIcon', 'icon'],
  setup: function setup(props, _ref) {
    var slots = _ref.slots,
      emit = _ref.emit,
      attrs = _ref.attrs;
    var _useConfigInject = useConfigInject('tag', props),
      prefixCls = _useConfigInject.prefixCls,
      direction = _useConfigInject.direction;
    var visible = ref(true);
    watchEffect(function () {
      if (props.visible !== undefined) {
        visible.value = props.visible;
      }
    });
    var handleCloseClick = function handleCloseClick(e) {
      e.stopPropagation();
      emit('update:visible', false);
      emit('close', e);
      if (e.defaultPrevented) {
        return;
      }
      if (props.visible === undefined) {
        visible.value = false;
      }
    };
    // const isPresetColor = computed(() => {
    //   const { color } = props;
    //   if (!color) {
    //     return false;
    //   }
    //   return PresetColorRegex.test(color) || PresetStatusColorRegex.test(color);
    // });
    var tagClassName = computed(function () {
      var _classNames;
      return classNames(prefixCls.value, (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls.value, "-hidden"), !visible.value), _defineProperty(_classNames, "".concat(prefixCls.value, "-rtl"), direction.value === 'rtl'), _defineProperty(_classNames, "".concat(prefixCls.value, "-popover"), props.popover), _classNames));
    });
    return function () {
      var _slots$icon, _slots$closeIcon, _slots$default, _classNames2;
      var _props$icon = props.icon,
        icon = _props$icon === void 0 ? (_slots$icon = slots.icon) === null || _slots$icon === void 0 ? void 0 : _slots$icon.call(slots) : _props$icon,
        color = props.color,
        _props$closeIcon = props.closeIcon,
        closeIcon = _props$closeIcon === void 0 ? (_slots$closeIcon = slots.closeIcon) === null || _slots$closeIcon === void 0 ? void 0 : _slots$closeIcon.call(slots) : _props$closeIcon,
        _props$closable = props.closable,
        closable = _props$closable === void 0 ? false : _props$closable,
        regionType = props.regionType,
        backgroundColor = props.backgroundColor,
        bordered = props.bordered,
        regionTypeSize = props.regionTypeSize,
        underline = props.underline;
      var renderCloseIcon = function renderCloseIcon() {
        if (closable) {
          return closeIcon ? _createVNode("span", {
            "class": "".concat(prefixCls.value, "-close-icon"),
            "onClick": handleCloseClick
          }, [closeIcon]) : _createVNode(CloseOutlined, {
            "class": "".concat(prefixCls.value, "-close-icon"),
            "onClick": handleCloseClick
          }, null);
        }
        return null;
      };
      var borderStyle = function borderStyle() {
        if (typeof bordered === 'boolean') {
          if (bordered) {
            return {
              'border-radius': '4px',
              border: "1px solid"
            };
          }
        }
        if (typeof bordered === 'string') {
          return {
            'border-radius': '4px',
            border: "1px solid ".concat(bordered)
          };
        }
      };
      var tagStyle = {
        backgroundColor: props.regionType === RegionTypeEnum.HK ? 'var(--wd-charts-violet-light)' : props.regionType === RegionTypeEnum.US ? 'var(--wd-charts-dorger-light)' : backgroundColor,
        color: color
        // backgroundColor: color && !isPresetColor.value ? color : undefined,
      };

      var isMarketIcon = props.regionType !== undefined && props.regionType !== null;
      var marketIconNode = isMarketIcon ? _createVNode(MarketIcon, {
        "regionType": regionType,
        "size": regionTypeSize
      }, null) : null;
      var iconNode = isMarketIcon ? marketIconNode : icon || null;
      var children = (_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots);
      var Component = 'span'; // 大写时能够识别出为动态标签
      if (underline) Component = 'u';
      var kids;
      if (iconNode) {
        kids = _createVNode(_Fragment, null, [iconNode, _createVNode(Component, null, {
          default: function _default() {
            return [children];
          }
        })]);
      } else {
        if (props.popover) {
          kids = _createVNode(Component, null, {
            default: function _default() {
              return [children];
            }
          });
        } else {
          kids = _createVNode(_Fragment, null, [_createVNode(Component, null, {
            default: function _default() {
              return [children];
            }
          })]);
        }
      }
      var isNeedWave = ('onClick' in attrs);
      var tagNode = _createVNode("span", {
        "class": classNames(tagClassName.value, (_classNames2 = {}, _defineProperty(_classNames2, "".concat(tagClassName.value, "-region-type"), props.regionType !== undefined), _defineProperty(_classNames2, "".concat(tagClassName.value, "-region-type-").concat(props.regionTypeSize), props.regionType !== undefined && props.regionTypeSize), _defineProperty(_classNames2, "".concat(tagClassName.value, "-short"), props.type === 'short'), _classNames2)),
        "style": _objectSpread(_objectSpread({}, tagStyle), borderStyle())
      }, [kids, renderCloseIcon()]);
      return isNeedWave ? _createVNode(Wave, null, {
        default: function _default() {
          return [tagNode];
        }
      }) : tagNode;
    };
  }
});
Tag.CheckableTag = CheckableTag;
Tag.install = function (app) {
  app.component(Tag.name, Tag);
  app.component(CheckableTag.name, CheckableTag);
  return app;
};
export { CheckableTag };
export default Tag;