wetrade-design
Version:
一款多语言支持Vue3的UI框架
215 lines (213 loc) • 8.3 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "CheckableTag", {
enumerable: true,
get: function get() {
return _CheckableTag.default;
}
});
exports.tagProps = exports.default = void 0;
var _vue = require("vue");
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _classNames3 = _interopRequireDefault(require("../_util/classNames"));
var _vueTypes = _interopRequireDefault(require("../_util/vue-types"));
var _CloseOutlined = _interopRequireDefault(require("@ant-design/icons-vue/CloseOutlined"));
var _wave = _interopRequireDefault(require("../_util/wave"));
var _CheckableTag = _interopRequireDefault(require("./CheckableTag"));
var _svg = _interopRequireDefault(require("./svg"));
var _useConfigInject2 = _interopRequireDefault(require("../_util/hooks/useConfigInject"));
var _enum = require("../_util/enum");
// const PresetColorRegex = new RegExp(`^(${PresetColorTypes.join('|')})(-inverse)?$`);
// const PresetStatusColorRegex = new RegExp(`^(${PresetStatusColorTypes.join('|')})$`);
var tagProps = function tagProps() {
return {
prefixCls: String,
color: {
type: String
},
closable: {
type: Boolean,
default: false
},
closeIcon: _vueTypes.default.any,
visible: {
type: Boolean,
default: undefined
},
onClose: {
type: Function
},
'onUpdate:visible': Function,
icon: _vueTypes.default.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'
}
};
};
exports.tagProps = tagProps;
var Tag = (0, _vue.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 = (0, _useConfigInject2.default)('tag', props),
prefixCls = _useConfigInject.prefixCls,
direction = _useConfigInject.direction;
var visible = (0, _vue.ref)(true);
(0, _vue.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 = (0, _vue.computed)(function () {
var _classNames;
return (0, _classNames3.default)(prefixCls.value, (_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(prefixCls.value, "-hidden"), !visible.value), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls.value, "-rtl"), direction.value === 'rtl'), (0, _defineProperty2.default)(_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 ? (0, _vue.createVNode)("span", {
"class": "".concat(prefixCls.value, "-close-icon"),
"onClick": handleCloseClick
}, [closeIcon]) : (0, _vue.createVNode)(_CloseOutlined.default, {
"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 === _enum.RegionTypeEnum.HK ? 'var(--wd-charts-violet-light)' : props.regionType === _enum.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 ? (0, _vue.createVNode)(_svg.default, {
"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 = (0, _vue.createVNode)(_vue.Fragment, null, [iconNode, (0, _vue.createVNode)(Component, null, {
default: function _default() {
return [children];
}
})]);
} else {
if (props.popover) {
kids = (0, _vue.createVNode)(Component, null, {
default: function _default() {
return [children];
}
});
} else {
kids = (0, _vue.createVNode)(_vue.Fragment, null, [(0, _vue.createVNode)(Component, null, {
default: function _default() {
return [children];
}
})]);
}
}
var isNeedWave = ('onClick' in attrs);
var tagNode = (0, _vue.createVNode)("span", {
"class": (0, _classNames3.default)(tagClassName.value, (_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, "".concat(tagClassName.value, "-region-type"), props.regionType !== undefined), (0, _defineProperty2.default)(_classNames2, "".concat(tagClassName.value, "-region-type-").concat(props.regionTypeSize), props.regionType !== undefined && props.regionTypeSize), (0, _defineProperty2.default)(_classNames2, "".concat(tagClassName.value, "-short"), props.type === 'short'), _classNames2)),
"style": (0, _objectSpread2.default)((0, _objectSpread2.default)({}, tagStyle), borderStyle())
}, [kids, renderCloseIcon()]);
return isNeedWave ? (0, _vue.createVNode)(_wave.default, null, {
default: function _default() {
return [tagNode];
}
}) : tagNode;
};
}
});
Tag.CheckableTag = _CheckableTag.default;
Tag.install = function (app) {
app.component(Tag.name, Tag);
app.component(_CheckableTag.default.name, _CheckableTag.default);
return app;
};
var _default2 = Tag;
exports.default = _default2;