UNPKG

ant-design-vue

Version:

An enterprise-class UI design language and Vue-based implementation

144 lines (122 loc) 5 kB
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;