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.
119 lines
2.4 KiB
119 lines
2.4 KiB
"use strict";
|
|
|
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
|
|
exports.__esModule = true;
|
|
exports.default = void 0;
|
|
|
|
var _babelHelperVueJsxMergeProps = _interopRequireDefault(require("@vue/babel-helper-vue-jsx-merge-props"));
|
|
|
|
var _utils = require("../utils");
|
|
|
|
var _functional = require("../utils/functional");
|
|
|
|
// Utils
|
|
var _createNamespace = (0, _utils.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: (0, _utils.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: (0, _utils.addUnit)(getRowWidth(i))
|
|
}
|
|
}));
|
|
}
|
|
|
|
return Rows;
|
|
}
|
|
|
|
function Avatar() {
|
|
if (props.avatar) {
|
|
var size = (0, _utils.addUnit)(props.avatarSize);
|
|
return h("div", {
|
|
"class": bem('avatar', props.avatarShape),
|
|
"style": {
|
|
width: size,
|
|
height: size
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
return h("div", (0, _babelHelperVueJsxMergeProps.default)([{
|
|
"class": bem({
|
|
animate: props.animate,
|
|
round: props.round
|
|
})
|
|
}, (0, _functional.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
|
|
}
|
|
};
|
|
|
|
var _default = createComponent(Skeleton);
|
|
|
|
exports.default = _default; |