index.js 4.2 KB

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