index.js 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181
  1. import _extends from "@babel/runtime/helpers/esm/extends";
  2. import _mergeJSXProps from "@vue/babel-helper-vue-jsx-merge-props";
  3. // Utils
  4. import { createNamespace } from '../utils';
  5. import { emit, inherit } from '../utils/functional';
  6. import { BORDER_SURROUND } from '../utils/constant';
  7. import { routeProps, functionalRoute } from '../utils/router'; // Components
  8. import Icon from '../icon';
  9. import Loading from '../loading'; // Types
  10. var _createNamespace = createNamespace('button'),
  11. createComponent = _createNamespace[0],
  12. bem = _createNamespace[1];
  13. function Button(h, props, slots, ctx) {
  14. var _ref;
  15. var tag = props.tag,
  16. icon = props.icon,
  17. type = props.type,
  18. color = props.color,
  19. plain = props.plain,
  20. disabled = props.disabled,
  21. loading = props.loading,
  22. hairline = props.hairline,
  23. loadingText = props.loadingText,
  24. iconPosition = props.iconPosition;
  25. var style = {};
  26. if (color) {
  27. style.color = plain ? color : 'white';
  28. if (!plain) {
  29. // Use background instead of backgroundColor to make linear-gradient work
  30. style.background = color;
  31. } // hide border when color is linear-gradient
  32. if (color.indexOf('gradient') !== -1) {
  33. style.border = 0;
  34. } else {
  35. style.borderColor = color;
  36. }
  37. }
  38. function onClick(event) {
  39. if (props.loading) {
  40. event.preventDefault();
  41. }
  42. if (!loading && !disabled) {
  43. emit(ctx, 'click', event);
  44. functionalRoute(ctx);
  45. }
  46. }
  47. function onTouchstart(event) {
  48. emit(ctx, 'touchstart', event);
  49. }
  50. var classes = [bem([type, props.size, {
  51. plain: plain,
  52. loading: loading,
  53. disabled: disabled,
  54. hairline: hairline,
  55. block: props.block,
  56. round: props.round,
  57. square: props.square
  58. }]), (_ref = {}, _ref[BORDER_SURROUND] = hairline, _ref)];
  59. function renderIcon() {
  60. if (loading) {
  61. return slots.loading ? slots.loading() : h(Loading, {
  62. "class": bem('loading'),
  63. "attrs": {
  64. "size": props.loadingSize,
  65. "type": props.loadingType,
  66. "color": "currentColor"
  67. }
  68. });
  69. }
  70. if (slots.icon) {
  71. return h("div", {
  72. "class": bem('icon')
  73. }, [slots.icon()]);
  74. }
  75. if (icon) {
  76. return h(Icon, {
  77. "attrs": {
  78. "name": icon,
  79. "classPrefix": props.iconPrefix
  80. },
  81. "class": bem('icon')
  82. });
  83. }
  84. }
  85. function renderContent() {
  86. var content = [];
  87. if (iconPosition === 'left') {
  88. content.push(renderIcon());
  89. }
  90. var text;
  91. if (loading) {
  92. text = loadingText;
  93. } else {
  94. text = slots.default ? slots.default() : props.text;
  95. }
  96. if (text) {
  97. content.push(h("span", {
  98. "class": bem('text')
  99. }, [text]));
  100. }
  101. if (iconPosition === 'right') {
  102. content.push(renderIcon());
  103. }
  104. return content;
  105. }
  106. return h(tag, _mergeJSXProps([{
  107. "style": style,
  108. "class": classes,
  109. "attrs": {
  110. "type": props.nativeType,
  111. "disabled": disabled
  112. },
  113. "on": {
  114. "click": onClick,
  115. "touchstart": onTouchstart
  116. }
  117. }, inherit(ctx)]), [h("div", {
  118. "class": bem('content')
  119. }, [renderContent()])]);
  120. }
  121. Button.props = _extends({}, routeProps, {
  122. text: String,
  123. icon: String,
  124. color: String,
  125. block: Boolean,
  126. plain: Boolean,
  127. round: Boolean,
  128. square: Boolean,
  129. loading: Boolean,
  130. hairline: Boolean,
  131. disabled: Boolean,
  132. iconPrefix: String,
  133. nativeType: String,
  134. loadingText: String,
  135. loadingType: String,
  136. tag: {
  137. type: String,
  138. default: 'button'
  139. },
  140. type: {
  141. type: String,
  142. default: 'default'
  143. },
  144. size: {
  145. type: String,
  146. default: 'normal'
  147. },
  148. loadingSize: {
  149. type: String,
  150. default: '20px'
  151. },
  152. iconPosition: {
  153. type: String,
  154. default: 'left'
  155. }
  156. });
  157. export default createComponent(Button);