Skip to content

Commit bdd8cd5

Browse files
tatyshevtatyshev
committed
allow vue-template-compiler transform template into render function
1 parent b2d497a commit bdd8cd5

File tree

17 files changed

+241
-226
lines changed

17 files changed

+241
-226
lines changed

‎docs/assets/js/app.js‎

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/assets/js/app.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/VueContentLoading.js‎

Lines changed: 0 additions & 90 deletions
This file was deleted.

‎src/components/VueContentLoading.vue‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
<template>
2+
<svg :viewBox="viewbox" preserveAspectRatio="xMidYMid meet">
3+
<rect
4+
:style="{ fill: 'url(#' + gradientId + ')' }"
5+
:clip-path="'url(#' + clipPathId + ')'"
6+
x="0"
7+
y="0"
8+
:width="width"
9+
:height="height"
10+
/>
11+
12+
<defs>
13+
<clipPath :id="clipPathId">
14+
<slot>
15+
<rect x="0" y="0" rx="5" ry="5" width="70" height="70" />
16+
<rect x="80" y="17" rx="4" ry="4" width="300" height="13" />
17+
<rect x="80" y="40" rx="3" ry="3" width="250" height="10" />
18+
<rect x="0" y="80" rx="3" ry="3" width="350" height="10" />
19+
<rect x="0" y="100" rx="3" ry="3" width="400" height="10" />
20+
<rect x="0" y="120" rx="3" ry="3" width="360" height="10" />
21+
</slot>
22+
</clipPath>
23+
24+
<linearGradient :id="gradientId">
25+
<stop offset="0%" :stop-color="primary">
26+
<animate attributeName="offset" values="-2; 1" :dur="formatedSpeed" repeatCount="indefinite" />
27+
</stop>
28+
29+
<stop offset="50%" :stop-color="secondary">
30+
<animate attributeName="offset" values="-1.5; 1.5" :dur="formatedSpeed" repeatCount="indefinite" />
31+
</stop>
32+
33+
<stop offset="100%" :stop-color="primary">
34+
<animate attributeName="offset" values="-1; 2" :dur="formatedSpeed" repeatCount="indefinite" />
35+
</stop>
36+
</linearGradient>
37+
</defs>
38+
</svg>
39+
</template>
40+
41+
<script>
42+
const validateColor = color => /^#([A-Fa-f0-9]{3}|[A-Fa-f0-9]{6})$/.test(color);
43+
44+
export default {
45+
name: 'VueContentLoading',
46+
props: {
47+
speed: {
48+
default: 2,
49+
type: Number,
50+
},
51+
52+
width: {
53+
default: 400,
54+
type: Number,
55+
},
56+
57+
height: {
58+
default: 130,
59+
type: Number,
60+
},
61+
62+
primary: {
63+
type: String,
64+
default: '#f0f0f0',
65+
validator: validateColor,
66+
},
67+
68+
secondary: {
69+
type: String,
70+
default: '#e0e0e0',
71+
validator: validateColor,
72+
},
73+
},
74+
75+
computed: {
76+
viewbox () {
77+
return `0 0 ${this.width} ${this.height}`;
78+
},
79+
80+
formatedSpeed () {
81+
return `${this.speed}s`;
82+
},
83+
84+
gradientId () {
85+
return `gradient-${this._uid}`;
86+
},
87+
88+
clipPathId () {
89+
return `clipPath-${this._uid}`;
90+
},
91+
},
92+
};
93+
</script>

‎src/components/presets/BulletList.js‎

Lines changed: 0 additions & 35 deletions
This file was deleted.

‎src/components/presets/BulletList.vue‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<template>
2+
<vue-content-loading v-bind="$attrs" :width="230" :height="height">
3+
<template v-for="i in rows">
4+
<circle :key="i" cx="8" :cy="getYPos(i, 8)" r="8" />
5+
<rect :key="i" x="22" :y="getYPos(i, 3)" rx="3" ry="3" width="200" height="9" />
6+
</template>
7+
</vue-content-loading>
8+
</template>
9+
10+
<script>
11+
import VueContentLoading from '../VueContentLoading.vue';
12+
13+
export default {
14+
components: {
15+
VueContentLoading,
16+
},
17+
18+
props: {
19+
rows: {
20+
default: 5,
21+
type: Number,
22+
},
23+
},
24+
25+
computed: {
26+
height () {
27+
return this.rows * 21;
28+
},
29+
},
30+
31+
methods: {
32+
getYPos (row, plus) {
33+
return plus + ((row - 1) * 22);
34+
},
35+
},
36+
};
37+
</script>

‎src/components/presets/Code.js‎

Lines changed: 0 additions & 21 deletions
This file was deleted.

‎src/components/presets/Code.vue‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<template>
2+
<vue-content-loading v-bind="$attrs" :width="300" :height="80">
3+
<rect x="0" y="0" rx="3" ry="3" width="70" height="10" />
4+
<rect x="80" y="0" rx="3" ry="3" width="100" height="10" />
5+
<rect x="190" y="0" rx="3" ry="3" width="10" height="10" />
6+
<rect x="15" y="20" rx="3" ry="3" width="130" height="10" />
7+
<rect x="155" y="20" rx="3" ry="3" width="130" height="10" />
8+
<rect x="15" y="40" rx="3" ry="3" width="90" height="10" />
9+
<rect x="115" y="40" rx="3" ry="3" width="60" height="10" />
10+
<rect x="185" y="40" rx="3" ry="3" width="60" height="10" />
11+
<rect x="0" y="60" rx="3" ry="3" width="30" height="10" />
12+
</vue-content-loading>
13+
</template>
14+
15+
<script>
16+
import VueContentLoading from '../VueContentLoading.vue';
17+
18+
export default {
19+
components: {
20+
VueContentLoading,
21+
},
22+
};
23+
</script>

‎src/components/presets/Facebook.js‎

Lines changed: 0 additions & 18 deletions
This file was deleted.

‎src/components/presets/Facebook.vue‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<template>
2+
<vue-content-loading v-bind="$attrs">
3+
<rect x="0" y="0" rx="5" ry="5" width="70" height="70" />
4+
<rect x="80" y="17" rx="4" ry="4" width="300" height="13" />
5+
<rect x="80" y="40" rx="3" ry="3" width="250" height="10" />
6+
<rect x="0" y="80" rx="3" ry="3" width="350" height="10" />
7+
<rect x="0" y="100" rx="3" ry="3" width="400" height="10" />
8+
<rect x="0" y="120" rx="3" ry="3" width="360" height="10" />
9+
</vue-content-loading>
10+
</template>
11+
12+
<script>
13+
import VueContentLoading from '../VueContentLoading.vue';
14+
15+
export default {
16+
components: {
17+
VueContentLoading,
18+
},
19+
};
20+
</script>

0 commit comments

Comments
 (0)