ant-design-vue
Version:
An enterprise-class UI design language and Vue-based implementation
144 lines (122 loc) • 5 kB
JavaScript
import { Fragment as _Fragment, createVNode as _createVNode, isVNode as _isVNode } from "vue";
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
import { inject, ref, defineComponent, watchEffect } 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 { PresetColorTypes, PresetStatusColorTypes } from '../_util/colors';
import { defaultConfigProvider } from '../config-provider';
import CheckableTag from './CheckableTag';
function _isSlot(s) {
return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !_isVNode(s);
}
var PresetColorRegex = new RegExp("^(".concat(PresetColorTypes.join('|'), ")(-inverse)?$"));
var PresetStatusColorRegex = new RegExp("^(".concat(PresetStatusColorTypes.join('|'), ")$"));
var tagProps = {
prefixCls: PropTypes.string,
color: {
type: String
},
closable: PropTypes.looseBool.def(false),
closeIcon: PropTypes.VNodeChild,
visible: PropTypes.looseBool,
onClose: {
type: Function
},
icon: PropTypes.VNodeChild
};
var Tag = defineComponent({
name: 'ATag',
emits: ['update:visible', 'close'],
setup: function setup(props, _ref) {
var slots = _ref.slots,
emit = _ref.emit,
attrs = _ref.attrs;
var _inject = inject('configProvider', defaultConfigProvider),
getPrefixCls = _inject.getPrefixCls;
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;
}
};
var isPresetColor = function isPresetColor() {
var color = props.color;
if (!color) {
return false;
}
return PresetColorRegex.test(color) || PresetStatusColorRegex.test(color);
};
return function () {
var _classNames;
var _a, _b, _c;
var customizePrefixCls = props.prefixCls,
_props$icon = props.icon,
icon = _props$icon === void 0 ? (_a = slots.icon) === null || _a === void 0 ? void 0 : _a.call(slots) : _props$icon,
color = props.color,
_props$closeIcon = props.closeIcon,
closeIcon = _props$closeIcon === void 0 ? (_b = slots.closeIcon) === null || _b === void 0 ? void 0 : _b.call(slots) : _props$closeIcon,
_props$closable = props.closable,
closable = _props$closable === void 0 ? false : _props$closable;
var presetColor = isPresetColor();
var prefixCls = getPrefixCls('tag', customizePrefixCls);
var renderCloseIcon = function renderCloseIcon() {
if (closable) {
return closeIcon ? _createVNode("div", {
"class": "".concat(prefixCls, "-close-icon"),
"onClick": handleCloseClick
}, _isSlot(closeIcon) ? closeIcon : {
default: function _default() {
return [closeIcon];
}
}) : _createVNode(CloseOutlined, {
"class": "".concat(prefixCls, "-close-icon"),
"onClick": handleCloseClick
}, null);
}
return null;
};
var tagStyle = {
backgroundColor: color && !isPresetColor() ? color : undefined
};
var tagClassName = classNames(prefixCls, (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-").concat(color), presetColor), _defineProperty(_classNames, "".concat(prefixCls, "-has-color"), color && !presetColor), _defineProperty(_classNames, "".concat(prefixCls, "-hidden"), !visible.value), _classNames));
var iconNode = icon || null;
var children = (_c = slots.default) === null || _c === void 0 ? void 0 : _c.call(slots);
var kids = iconNode ? _createVNode(_Fragment, null, [iconNode, _createVNode("span", null, _isSlot(children) ? children : {
default: function _default() {
return [children];
}
})]) : children;
var isNeedWave = ('onClick' in attrs);
var tagNode = _createVNode("span", {
"class": tagClassName,
"style": tagStyle
}, [kids, renderCloseIcon()]);
return isNeedWave ? _createVNode(Wave, null, _isSlot(tagNode) ? tagNode : {
default: function _default() {
return [tagNode];
}
}) : tagNode;
};
}
});
Tag.props = tagProps;
Tag.CheckableTag = CheckableTag;
Tag.install = function (app) {
app.component(Tag.name, Tag);
app.component(CheckableTag.name, CheckableTag);
return app;
};
export default Tag;