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.
107 lines
2.2 KiB
107 lines
2.2 KiB
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('skeleton'),
|
|
createComponent = _createNamespace[0],
|
|
bem = _createNamespace[1];
|
|
|
|
var DEFAULT_ROW_WIDTH = '100%';
|
|
var DEFAULT_LAST_ROW_WIDTH = '60%';
|
|
|
|
function Skeleton(h, props, slots, ctx) {
|
|
if (!props.loading) {
|
|
return slots.default && slots.default();
|
|
}
|
|
|
|
function Title() {
|
|
if (props.title) {
|
|
return h("h3", {
|
|
"class": bem('title'),
|
|
"style": {
|
|
width: addUnit(props.titleWidth)
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
function Rows() {
|
|
var Rows = [];
|
|
var rowWidth = props.rowWidth;
|
|
|
|
function getRowWidth(index) {
|
|
if (rowWidth === DEFAULT_ROW_WIDTH && index === +props.row - 1) {
|
|
return DEFAULT_LAST_ROW_WIDTH;
|
|
}
|
|
|
|
if (Array.isArray(rowWidth)) {
|
|
return rowWidth[index];
|
|
}
|
|
|
|
return rowWidth;
|
|
}
|
|
|
|
for (var i = 0; i < props.row; i++) {
|
|
Rows.push(h("div", {
|
|
"class": bem('row'),
|
|
"style": {
|
|
width: addUnit(getRowWidth(i))
|
|
}
|
|
}));
|
|
}
|
|
|
|
return Rows;
|
|
}
|
|
|
|
function Avatar() {
|
|
if (props.avatar) {
|
|
var size = addUnit(props.avatarSize);
|
|
return h("div", {
|
|
"class": bem('avatar', props.avatarShape),
|
|
"style": {
|
|
width: size,
|
|
height: size
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
return h("div", _mergeJSXProps([{
|
|
"class": bem({
|
|
animate: props.animate,
|
|
round: props.round
|
|
})
|
|
}, inherit(ctx)]), [Avatar(), h("div", {
|
|
"class": bem('content')
|
|
}, [Title(), Rows()])]);
|
|
}
|
|
|
|
Skeleton.props = {
|
|
title: Boolean,
|
|
round: Boolean,
|
|
avatar: Boolean,
|
|
titleWidth: [Number, String],
|
|
avatarSize: [Number, String],
|
|
row: {
|
|
type: [Number, String],
|
|
default: 0
|
|
},
|
|
loading: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
animate: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
avatarShape: {
|
|
type: String,
|
|
default: 'round'
|
|
},
|
|
rowWidth: {
|
|
type: [Number, String, Array],
|
|
default: DEFAULT_ROW_WIDTH
|
|
}
|
|
};
|
|
export default createComponent(Skeleton); |