index.js 8.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. Object.defineProperty(exports, "__esModule", {
  4. value: true
  5. });
  6. exports.default = exports.alertProps = void 0;
  7. var _vue = require("vue");
  8. var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
  9. var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
  10. var _CloseOutlined = _interopRequireDefault(require("@ant-design/icons-vue/lib/icons/CloseOutlined"));
  11. var _CheckCircleOutlined = _interopRequireDefault(require("@ant-design/icons-vue/lib/icons/CheckCircleOutlined"));
  12. var _ExclamationCircleOutlined = _interopRequireDefault(require("@ant-design/icons-vue/lib/icons/ExclamationCircleOutlined"));
  13. var _InfoCircleOutlined = _interopRequireDefault(require("@ant-design/icons-vue/lib/icons/InfoCircleOutlined"));
  14. var _CloseCircleOutlined = _interopRequireDefault(require("@ant-design/icons-vue/lib/icons/CloseCircleOutlined"));
  15. var _CheckCircleFilled = _interopRequireDefault(require("@ant-design/icons-vue/lib/icons/CheckCircleFilled"));
  16. var _ExclamationCircleFilled = _interopRequireDefault(require("@ant-design/icons-vue/lib/icons/ExclamationCircleFilled"));
  17. var _InfoCircleFilled = _interopRequireDefault(require("@ant-design/icons-vue/lib/icons/InfoCircleFilled"));
  18. var _CloseCircleFilled = _interopRequireDefault(require("@ant-design/icons-vue/lib/icons/CloseCircleFilled"));
  19. var _classNames2 = _interopRequireDefault(require("../_util/classNames"));
  20. var _vueTypes = _interopRequireDefault(require("../_util/vue-types"));
  21. var _transition = require("../_util/transition");
  22. var _propsUtil = require("../_util/props-util");
  23. var _type = require("../_util/type");
  24. var _vnode = require("../_util/vnode");
  25. var _useConfigInject2 = _interopRequireDefault(require("../_util/hooks/useConfigInject"));
  26. var iconMapFilled = {
  27. success: _CheckCircleFilled.default,
  28. info: _InfoCircleFilled.default,
  29. error: _CloseCircleFilled.default,
  30. warning: _ExclamationCircleFilled.default
  31. };
  32. var iconMapOutlined = {
  33. success: _CheckCircleOutlined.default,
  34. info: _InfoCircleOutlined.default,
  35. error: _CloseCircleOutlined.default,
  36. warning: _ExclamationCircleOutlined.default
  37. };
  38. var AlertTypes = (0, _type.tuple)('success', 'info', 'warning', 'error');
  39. var alertProps = function alertProps() {
  40. return {
  41. /**
  42. * Type of Alert styles, options: `success`, `info`, `warning`, `error`
  43. */
  44. type: _vueTypes.default.oneOf(AlertTypes),
  45. /** Whether Alert can be closed */
  46. closable: {
  47. type: Boolean,
  48. default: undefined
  49. },
  50. /** Close text to show */
  51. closeText: _vueTypes.default.any,
  52. /** Content of Alert */
  53. message: _vueTypes.default.any,
  54. /** Additional content of Alert */
  55. description: _vueTypes.default.any,
  56. /** Trigger when animation ending of Alert */
  57. afterClose: Function,
  58. /** Whether to show icon */
  59. showIcon: {
  60. type: Boolean,
  61. default: undefined
  62. },
  63. prefixCls: String,
  64. banner: {
  65. type: Boolean,
  66. default: undefined
  67. },
  68. icon: _vueTypes.default.any,
  69. closeIcon: _vueTypes.default.any,
  70. onClose: Function
  71. };
  72. };
  73. exports.alertProps = alertProps;
  74. var Alert = (0, _vue.defineComponent)({
  75. compatConfig: {
  76. MODE: 3
  77. },
  78. name: 'AAlert',
  79. inheritAttrs: false,
  80. props: alertProps(),
  81. setup: function setup(props, _ref) {
  82. var slots = _ref.slots,
  83. emit = _ref.emit,
  84. attrs = _ref.attrs,
  85. expose = _ref.expose;
  86. var _useConfigInject = (0, _useConfigInject2.default)('alert', props),
  87. prefixCls = _useConfigInject.prefixCls,
  88. direction = _useConfigInject.direction;
  89. var closing = (0, _vue.ref)(false);
  90. var closed = (0, _vue.ref)(false);
  91. var alertNode = (0, _vue.ref)();
  92. var handleClose = function handleClose(e) {
  93. e.preventDefault();
  94. var dom = alertNode.value;
  95. dom.style.height = "".concat(dom.offsetHeight, "px");
  96. // Magic code
  97. // 重复一次后才能正确设置 height
  98. dom.style.height = "".concat(dom.offsetHeight, "px");
  99. closing.value = true;
  100. emit('close', e);
  101. };
  102. var animationEnd = function animationEnd() {
  103. var _props$afterClose;
  104. closing.value = false;
  105. closed.value = true;
  106. (_props$afterClose = props.afterClose) === null || _props$afterClose === void 0 ? void 0 : _props$afterClose.call(props);
  107. };
  108. expose({
  109. animationEnd: animationEnd
  110. });
  111. var motionStyle = (0, _vue.ref)({});
  112. return function () {
  113. var _slots$closeIcon, _classNames;
  114. var banner = props.banner,
  115. _props$closeIcon = props.closeIcon,
  116. customCloseIcon = _props$closeIcon === void 0 ? (_slots$closeIcon = slots.closeIcon) === null || _slots$closeIcon === void 0 ? void 0 : _slots$closeIcon.call(slots) : _props$closeIcon;
  117. var closable = props.closable,
  118. type = props.type,
  119. showIcon = props.showIcon;
  120. var closeText = (0, _propsUtil.getPropsSlot)(slots, props, 'closeText');
  121. var description = (0, _propsUtil.getPropsSlot)(slots, props, 'description');
  122. var message = (0, _propsUtil.getPropsSlot)(slots, props, 'message');
  123. var icon = (0, _propsUtil.getPropsSlot)(slots, props, 'icon');
  124. // banner模式默认有 Icon
  125. showIcon = banner && showIcon === undefined ? true : showIcon;
  126. // banner模式默认为警告
  127. type = banner && type === undefined ? 'warning' : type || 'info';
  128. var IconType = (description ? iconMapOutlined : iconMapFilled)[type] || null;
  129. // closeable when closeText is assigned
  130. if (closeText) {
  131. closable = true;
  132. }
  133. var prefixClsValue = prefixCls.value;
  134. var alertCls = (0, _classNames2.default)(prefixClsValue, (_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(prefixClsValue, "-").concat(type), true), (0, _defineProperty2.default)(_classNames, "".concat(prefixClsValue, "-closing"), closing.value), (0, _defineProperty2.default)(_classNames, "".concat(prefixClsValue, "-with-description"), !!description), (0, _defineProperty2.default)(_classNames, "".concat(prefixClsValue, "-no-icon"), !showIcon), (0, _defineProperty2.default)(_classNames, "".concat(prefixClsValue, "-banner"), !!banner), (0, _defineProperty2.default)(_classNames, "".concat(prefixClsValue, "-closable"), closable), (0, _defineProperty2.default)(_classNames, "".concat(prefixClsValue, "-rtl"), direction.value === 'rtl'), _classNames));
  135. var closeIcon = closable ? (0, _vue.createVNode)("button", {
  136. "type": "button",
  137. "onClick": handleClose,
  138. "class": "".concat(prefixClsValue, "-close-icon"),
  139. "tabindex": 0
  140. }, [closeText ? (0, _vue.createVNode)("span", {
  141. "class": "".concat(prefixClsValue, "-close-text")
  142. }, [closeText]) : customCloseIcon === undefined ? (0, _vue.createVNode)(_CloseOutlined.default, null, null) : customCloseIcon]) : null;
  143. var iconNode = icon && ((0, _propsUtil.isValidElement)(icon) ? (0, _vnode.cloneElement)(icon, {
  144. class: "".concat(prefixClsValue, "-icon")
  145. }) : (0, _vue.createVNode)("span", {
  146. "class": "".concat(prefixClsValue, "-icon")
  147. }, [icon])) || (0, _vue.createVNode)(IconType, {
  148. "class": "".concat(prefixClsValue, "-icon")
  149. }, null);
  150. var transitionProps = (0, _transition.getTransitionProps)("".concat(prefixClsValue, "-motion"), {
  151. appear: false,
  152. css: true,
  153. onAfterLeave: animationEnd,
  154. onBeforeLeave: function onBeforeLeave(node) {
  155. node.style.maxHeight = "".concat(node.offsetHeight, "px");
  156. },
  157. onLeave: function onLeave(node) {
  158. node.style.maxHeight = '0px';
  159. }
  160. });
  161. return closed.value ? null : (0, _vue.createVNode)(_transition.Transition, transitionProps, {
  162. default: function _default() {
  163. return [(0, _vue.withDirectives)((0, _vue.createVNode)("div", (0, _objectSpread2.default)((0, _objectSpread2.default)({
  164. "role": "alert"
  165. }, attrs), {}, {
  166. "style": [attrs.style, motionStyle.value],
  167. "class": [attrs.class, alertCls],
  168. "data-show": !closing.value,
  169. "ref": alertNode
  170. }), [showIcon ? iconNode : null, (0, _vue.createVNode)("div", {
  171. "class": "".concat(prefixClsValue, "-content")
  172. }, [message ? (0, _vue.createVNode)("div", {
  173. "class": "".concat(prefixClsValue, "-message")
  174. }, [message]) : null, description ? (0, _vue.createVNode)("div", {
  175. "class": "".concat(prefixClsValue, "-description")
  176. }, [description]) : null]), closeIcon]), [[_vue.vShow, !closing.value]])];
  177. }
  178. });
  179. };
  180. }
  181. });
  182. var _default2 = (0, _type.withInstall)(Alert);
  183. exports.default = _default2;