You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
188 lines
4.0 KiB
188 lines
4.0 KiB
"use strict";
|
|
|
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
|
|
exports.__esModule = true;
|
|
exports.default = void 0;
|
|
|
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
|
|
var _babelHelperVueJsxMergeProps = _interopRequireDefault(require("@vue/babel-helper-vue-jsx-merge-props"));
|
|
|
|
var _utils = require("../utils");
|
|
|
|
var _functional = require("../utils/functional");
|
|
|
|
var _constant = require("../utils/constant");
|
|
|
|
var _router = require("../utils/router");
|
|
|
|
var _icon = _interopRequireDefault(require("../icon"));
|
|
|
|
var _loading = _interopRequireDefault(require("../loading"));
|
|
|
|
// Utils
|
|
// Components
|
|
var _createNamespace = (0, _utils.createNamespace)('button'),
|
|
createComponent = _createNamespace[0],
|
|
bem = _createNamespace[1];
|
|
|
|
function Button(h, props, slots, ctx) {
|
|
var _ref;
|
|
|
|
var tag = props.tag,
|
|
icon = props.icon,
|
|
type = props.type,
|
|
color = props.color,
|
|
plain = props.plain,
|
|
disabled = props.disabled,
|
|
loading = props.loading,
|
|
hairline = props.hairline,
|
|
loadingText = props.loadingText,
|
|
iconPosition = props.iconPosition;
|
|
var style = {};
|
|
|
|
if (color) {
|
|
style.color = plain ? color : 'white';
|
|
|
|
if (!plain) {
|
|
// Use background instead of backgroundColor to make linear-gradient work
|
|
style.background = color;
|
|
} // hide border when color is linear-gradient
|
|
|
|
|
|
if (color.indexOf('gradient') !== -1) {
|
|
style.border = 0;
|
|
} else {
|
|
style.borderColor = color;
|
|
}
|
|
}
|
|
|
|
function onClick(event) {
|
|
if (!loading && !disabled) {
|
|
(0, _functional.emit)(ctx, 'click', event);
|
|
(0, _router.functionalRoute)(ctx);
|
|
}
|
|
}
|
|
|
|
function onTouchstart(event) {
|
|
(0, _functional.emit)(ctx, 'touchstart', event);
|
|
}
|
|
|
|
var classes = [bem([type, props.size, {
|
|
plain: plain,
|
|
loading: loading,
|
|
disabled: disabled,
|
|
hairline: hairline,
|
|
block: props.block,
|
|
round: props.round,
|
|
square: props.square
|
|
}]), (_ref = {}, _ref[_constant.BORDER_SURROUND] = hairline, _ref)];
|
|
|
|
function renderIcon() {
|
|
if (loading) {
|
|
return slots.loading ? slots.loading() : h(_loading.default, {
|
|
"class": bem('loading'),
|
|
"attrs": {
|
|
"size": props.loadingSize,
|
|
"type": props.loadingType,
|
|
"color": "currentColor"
|
|
}
|
|
});
|
|
}
|
|
|
|
if (icon) {
|
|
return h(_icon.default, {
|
|
"attrs": {
|
|
"name": icon,
|
|
"classPrefix": props.iconPrefix
|
|
},
|
|
"class": bem('icon')
|
|
});
|
|
}
|
|
}
|
|
|
|
function renderContent() {
|
|
var content = [];
|
|
|
|
if (iconPosition === 'left') {
|
|
content.push(renderIcon());
|
|
}
|
|
|
|
var text;
|
|
|
|
if (loading) {
|
|
text = loadingText;
|
|
} else {
|
|
text = slots.default ? slots.default() : props.text;
|
|
}
|
|
|
|
if (text) {
|
|
content.push(h("span", {
|
|
"class": bem('text')
|
|
}, [text]));
|
|
}
|
|
|
|
if (iconPosition === 'right') {
|
|
content.push(renderIcon());
|
|
}
|
|
|
|
return content;
|
|
}
|
|
|
|
return h(tag, (0, _babelHelperVueJsxMergeProps.default)([{
|
|
"style": style,
|
|
"class": classes,
|
|
"attrs": {
|
|
"type": props.nativeType,
|
|
"disabled": disabled
|
|
},
|
|
"on": {
|
|
"click": onClick,
|
|
"touchstart": onTouchstart
|
|
}
|
|
}, (0, _functional.inherit)(ctx)]), [h("div", {
|
|
"class": bem('content')
|
|
}, [renderContent()])]);
|
|
}
|
|
|
|
Button.props = (0, _extends2.default)({}, _router.routeProps, {
|
|
text: String,
|
|
icon: String,
|
|
color: String,
|
|
block: Boolean,
|
|
plain: Boolean,
|
|
round: Boolean,
|
|
square: Boolean,
|
|
loading: Boolean,
|
|
hairline: Boolean,
|
|
disabled: Boolean,
|
|
iconPrefix: String,
|
|
nativeType: String,
|
|
loadingText: String,
|
|
loadingType: String,
|
|
tag: {
|
|
type: String,
|
|
default: 'button'
|
|
},
|
|
type: {
|
|
type: String,
|
|
default: 'default'
|
|
},
|
|
size: {
|
|
type: String,
|
|
default: 'normal'
|
|
},
|
|
loadingSize: {
|
|
type: String,
|
|
default: '20px'
|
|
},
|
|
iconPosition: {
|
|
type: String,
|
|
default: 'left'
|
|
}
|
|
});
|
|
|
|
var _default = createComponent(Button);
|
|
|
|
exports.default = _default; |