123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107 |
- 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);
|