index.js 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171
  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 (!loading && !disabled) {
  40. emit(ctx, 'click', event);
  41. functionalRoute(ctx);
  42. }
  43. }
  44. function onTouchstart(event) {
  45. emit(ctx, 'touchstart', event);
  46. }
  47. var classes = [bem([type, props.size, {
  48. plain: plain,
  49. loading: loading,
  50. disabled: disabled,
  51. hairline: hairline,
  52. block: props.block,
  53. round: props.round,
  54. square: props.square
  55. }]), (_ref = {}, _ref[BORDER_SURROUND] = hairline, _ref)];
  56. function renderIcon() {
  57. if (loading) {
  58. return slots.loading ? slots.loading() : h(Loading, {
  59. "class": bem('loading'),
  60. "attrs": {
  61. "size": props.loadingSize,
  62. "type": props.loadingType,
  63. "color": "currentColor"
  64. }
  65. });
  66. }
  67. if (icon) {
  68. return h(Icon, {
  69. "attrs": {
  70. "name": icon,
  71. "classPrefix": props.iconPrefix
  72. },
  73. "class": bem('icon')
  74. });
  75. }
  76. }
  77. function renderContent() {
  78. var content = [];
  79. if (iconPosition === 'left') {
  80. content.push(renderIcon());
  81. }
  82. var text;
  83. if (loading) {
  84. text = loadingText;
  85. } else {
  86. text = slots.default ? slots.default() : props.text;
  87. }
  88. if (text) {
  89. content.push(h("span", {
  90. "class": bem('text')
  91. }, [text]));
  92. }
  93. if (iconPosition === 'right') {
  94. content.push(renderIcon());
  95. }
  96. return content;
  97. }
  98. return h(tag, _mergeJSXProps([{
  99. "style": style,
  100. "class": classes,
  101. "attrs": {
  102. "type": props.nativeType,
  103. "disabled": disabled
  104. },
  105. "on": {
  106. "click": onClick,
  107. "touchstart": onTouchstart
  108. }
  109. }, inherit(ctx)]), [h("div", {
  110. "class": bem('content')
  111. }, [renderContent()])]);
  112. }
  113. Button.props = _extends({}, routeProps, {
  114. text: String,
  115. icon: String,
  116. color: String,
  117. block: Boolean,
  118. plain: Boolean,
  119. round: Boolean,
  120. square: Boolean,
  121. loading: Boolean,
  122. hairline: Boolean,
  123. disabled: Boolean,
  124. iconPrefix: String,
  125. nativeType: String,
  126. loadingText: String,
  127. loadingType: String,
  128. tag: {
  129. type: String,
  130. default: 'button'
  131. },
  132. type: {
  133. type: String,
  134. default: 'default'
  135. },
  136. size: {
  137. type: String,
  138. default: 'normal'
  139. },
  140. loadingSize: {
  141. type: String,
  142. default: '20px'
  143. },
  144. iconPosition: {
  145. type: String,
  146. default: 'left'
  147. }
  148. });
  149. export default createComponent(Button);