1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
| 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);
|
|
