86 lines
1.8 KiB
JavaScript
86 lines
1.8 KiB
JavaScript
import _mergeJSXProps from "@vue/babel-helper-vue-jsx-merge-props";
|
|
// Utils
|
|
import { createNamespace, addUnit } from '../utils';
|
|
import { inherit } from '../utils/functional'; // Types
|
|
|
|
var _createNamespace = createNamespace('loading'),
|
|
createComponent = _createNamespace[0],
|
|
bem = _createNamespace[1];
|
|
|
|
function LoadingIcon(h, props) {
|
|
if (props.type === 'spinner') {
|
|
var Spin = [];
|
|
|
|
for (var i = 0; i < 12; i++) {
|
|
Spin.push(h("i"));
|
|
}
|
|
|
|
return Spin;
|
|
}
|
|
|
|
return h("svg", {
|
|
"class": bem('circular'),
|
|
"attrs": {
|
|
"viewBox": "25 25 50 50"
|
|
}
|
|
}, [h("circle", {
|
|
"attrs": {
|
|
"cx": "50",
|
|
"cy": "50",
|
|
"r": "20",
|
|
"fill": "none"
|
|
}
|
|
})]);
|
|
}
|
|
|
|
function LoadingText(h, props, slots) {
|
|
if (slots.default) {
|
|
var _props$textColor;
|
|
|
|
var style = {
|
|
fontSize: addUnit(props.textSize),
|
|
color: (_props$textColor = props.textColor) != null ? _props$textColor : props.color
|
|
};
|
|
return h("span", {
|
|
"class": bem('text'),
|
|
"style": style
|
|
}, [slots.default()]);
|
|
}
|
|
}
|
|
|
|
function Loading(h, props, slots, ctx) {
|
|
var color = props.color,
|
|
size = props.size,
|
|
type = props.type;
|
|
var style = {
|
|
color: color
|
|
};
|
|
|
|
if (size) {
|
|
var iconSize = addUnit(size);
|
|
style.width = iconSize;
|
|
style.height = iconSize;
|
|
}
|
|
|
|
return h("div", _mergeJSXProps([{
|
|
"class": bem([type, {
|
|
vertical: props.vertical
|
|
}])
|
|
}, inherit(ctx, true)]), [h("span", {
|
|
"class": bem('spinner', type),
|
|
"style": style
|
|
}, [LoadingIcon(h, props)]), LoadingText(h, props, slots)]);
|
|
}
|
|
|
|
Loading.props = {
|
|
color: String,
|
|
size: [Number, String],
|
|
vertical: Boolean,
|
|
textSize: [Number, String],
|
|
textColor: String,
|
|
type: {
|
|
type: String,
|
|
default: 'circular'
|
|
}
|
|
};
|
|
export default createComponent(Loading); |