index.js 7.6 KB

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