1 | 'use strict';
|
2 |
|
3 | Object.defineProperty(exports, '__esModule', { value: true });
|
4 |
|
5 | var vue = require('vue');
|
6 |
|
7 | var uid = (function () {
|
8 | return Math.random().toString(36).substring(2);
|
9 | });
|
10 |
|
11 | var ContentLoader = function ContentLoader(props, _ref) {
|
12 | var attrs = _ref.attrs,
|
13 | slots = _ref.slots;
|
14 | var idClip = props.uniqueKey ? props.uniqueKey + "-idClip" : uid();
|
15 | var idGradient = props.uniqueKey ? props.uniqueKey + "-idGradient" : uid();
|
16 | return vue.createVNode("svg", vue.mergeProps(attrs, {
|
17 | "viewBox": "0 0 " + props.width + " " + props.height,
|
18 | "version": "1.1",
|
19 | "preserveAspectRatio": props.preserveAspectRatio
|
20 | }), [vue.createVNode("rect", {
|
21 | "style": {
|
22 | fill: "url(" + props.baseUrl + "#" + idGradient + ")"
|
23 | },
|
24 | "clip-path": "url(" + props.baseUrl + "#" + idClip + ")",
|
25 | "x": "0",
|
26 | "y": "0",
|
27 | "width": props.width,
|
28 | "height": props.height
|
29 | }, null), vue.createVNode("defs", null, [vue.createVNode("clipPath", {
|
30 | "id": idClip
|
31 | }, [slots["default"] ? slots["default"]() : vue.createVNode("rect", {
|
32 | "x": "0",
|
33 | "y": "0",
|
34 | "rx": "5",
|
35 | "ry": "5",
|
36 | "width": props.width,
|
37 | "height": props.height
|
38 | }, null)]), vue.createVNode("linearGradient", {
|
39 | "id": idGradient
|
40 | }, [vue.createVNode("stop", {
|
41 | "offset": "0%",
|
42 | "stop-color": props.primaryColor,
|
43 | "stop-opacity": props.primaryOpacity
|
44 | }, [props.animate ? vue.createVNode("animate", {
|
45 | "attributeName": "offset",
|
46 | "values": "-2; 1",
|
47 | "dur": props.speed + "s",
|
48 | "repeatCount": "indefinite"
|
49 | }, null) : null]), vue.createVNode("stop", {
|
50 | "offset": "50%",
|
51 | "stop-color": props.secondaryColor,
|
52 | "stop-opacity": props.secondaryOpacity
|
53 | }, [props.animate ? vue.createVNode("animate", {
|
54 | "attributeName": "offset",
|
55 | "values": "-1.5; 1.5",
|
56 | "dur": props.speed + "s",
|
57 | "repeatCount": "indefinite"
|
58 | }, null) : null]), vue.createVNode("stop", {
|
59 | "offset": "100%",
|
60 | "stop-color": props.primaryColor,
|
61 | "stop-opacity": props.primaryOpacity
|
62 | }, [props.animate ? vue.createVNode("animate", {
|
63 | "attributeName": "offset",
|
64 | "values": "-1; 2",
|
65 | "dur": props.speed + "s",
|
66 | "repeatCount": "indefinite"
|
67 | }, null) : null])])])]);
|
68 | };
|
69 |
|
70 | ContentLoader.props = {
|
71 | width: {
|
72 | type: [Number, String],
|
73 | "default": 400
|
74 | },
|
75 | height: {
|
76 | type: [Number, String],
|
77 | "default": 130
|
78 | },
|
79 | speed: {
|
80 | type: Number,
|
81 | "default": 2
|
82 | },
|
83 | preserveAspectRatio: {
|
84 | type: String,
|
85 | "default": 'xMidYMid meet'
|
86 | },
|
87 | baseUrl: {
|
88 | type: String,
|
89 | "default": ''
|
90 | },
|
91 | primaryColor: {
|
92 | type: String,
|
93 | "default": '#f9f9f9'
|
94 | },
|
95 | secondaryColor: {
|
96 | type: String,
|
97 | "default": '#ecebeb'
|
98 | },
|
99 | primaryOpacity: {
|
100 | type: Number,
|
101 | "default": 1
|
102 | },
|
103 | secondaryOpacity: {
|
104 | type: Number,
|
105 | "default": 1
|
106 | },
|
107 | uniqueKey: {
|
108 | type: String
|
109 | },
|
110 | animate: {
|
111 | type: Boolean,
|
112 | "default": true
|
113 | }
|
114 | };
|
115 |
|
116 | var BulletListLoader = function BulletListLoader(props, _ref) {
|
117 | var attrs = _ref.attrs;
|
118 | return vue.createVNode(ContentLoader, attrs, {
|
119 | "default": function _default() {
|
120 | return [vue.createVNode("circle", {
|
121 | "cx": "10",
|
122 | "cy": "20",
|
123 | "r": "8"
|
124 | }, null), vue.createVNode("rect", {
|
125 | "x": "25",
|
126 | "y": "15",
|
127 | "rx": "5",
|
128 | "ry": "5",
|
129 | "width": "220",
|
130 | "height": "10"
|
131 | }, null), vue.createVNode("circle", {
|
132 | "cx": "10",
|
133 | "cy": "50",
|
134 | "r": "8"
|
135 | }, null), vue.createVNode("rect", {
|
136 | "x": "25",
|
137 | "y": "45",
|
138 | "rx": "5",
|
139 | "ry": "5",
|
140 | "width": "220",
|
141 | "height": "10"
|
142 | }, null), vue.createVNode("circle", {
|
143 | "cx": "10",
|
144 | "cy": "80",
|
145 | "r": "8"
|
146 | }, null), vue.createVNode("rect", {
|
147 | "x": "25",
|
148 | "y": "75",
|
149 | "rx": "5",
|
150 | "ry": "5",
|
151 | "width": "220",
|
152 | "height": "10"
|
153 | }, null), vue.createVNode("circle", {
|
154 | "cx": "10",
|
155 | "cy": "110",
|
156 | "r": "8"
|
157 | }, null), vue.createVNode("rect", {
|
158 | "x": "25",
|
159 | "y": "105",
|
160 | "rx": "5",
|
161 | "ry": "5",
|
162 | "width": "220",
|
163 | "height": "10"
|
164 | }, null)];
|
165 | }
|
166 | });
|
167 | };
|
168 |
|
169 | var CodeLoader = function CodeLoader(props, _ref) {
|
170 | var attrs = _ref.attrs;
|
171 | return vue.createVNode(ContentLoader, attrs, {
|
172 | "default": function _default() {
|
173 | return [vue.createVNode("rect", {
|
174 | "x": "0",
|
175 | "y": "0",
|
176 | "rx": "3",
|
177 | "ry": "3",
|
178 | "width": "70",
|
179 | "height": "10"
|
180 | }, null), vue.createVNode("rect", {
|
181 | "x": "80",
|
182 | "y": "0",
|
183 | "rx": "3",
|
184 | "ry": "3",
|
185 | "width": "100",
|
186 | "height": "10"
|
187 | }, null), vue.createVNode("rect", {
|
188 | "x": "190",
|
189 | "y": "0",
|
190 | "rx": "3",
|
191 | "ry": "3",
|
192 | "width": "10",
|
193 | "height": "10"
|
194 | }, null), vue.createVNode("rect", {
|
195 | "x": "15",
|
196 | "y": "20",
|
197 | "rx": "3",
|
198 | "ry": "3",
|
199 | "width": "130",
|
200 | "height": "10"
|
201 | }, null), vue.createVNode("rect", {
|
202 | "x": "155",
|
203 | "y": "20",
|
204 | "rx": "3",
|
205 | "ry": "3",
|
206 | "width": "130",
|
207 | "height": "10"
|
208 | }, null), vue.createVNode("rect", {
|
209 | "x": "15",
|
210 | "y": "40",
|
211 | "rx": "3",
|
212 | "ry": "3",
|
213 | "width": "90",
|
214 | "height": "10"
|
215 | }, null), vue.createVNode("rect", {
|
216 | "x": "115",
|
217 | "y": "40",
|
218 | "rx": "3",
|
219 | "ry": "3",
|
220 | "width": "60",
|
221 | "height": "10"
|
222 | }, null), vue.createVNode("rect", {
|
223 | "x": "185",
|
224 | "y": "40",
|
225 | "rx": "3",
|
226 | "ry": "3",
|
227 | "width": "60",
|
228 | "height": "10"
|
229 | }, null), vue.createVNode("rect", {
|
230 | "x": "0",
|
231 | "y": "60",
|
232 | "rx": "3",
|
233 | "ry": "3",
|
234 | "width": "30",
|
235 | "height": "10"
|
236 | }, null)];
|
237 | }
|
238 | });
|
239 | };
|
240 |
|
241 | var FacebookLoader = function FacebookLoader(props, _ref) {
|
242 | var attrs = _ref.attrs;
|
243 | return vue.createVNode(ContentLoader, attrs, {
|
244 | "default": function _default() {
|
245 | return [vue.createVNode("rect", {
|
246 | "x": "70",
|
247 | "y": "15",
|
248 | "rx": "4",
|
249 | "ry": "4",
|
250 | "width": "117",
|
251 | "height": "6.4"
|
252 | }, null), vue.createVNode("rect", {
|
253 | "x": "70",
|
254 | "y": "35",
|
255 | "rx": "3",
|
256 | "ry": "3",
|
257 | "width": "85",
|
258 | "height": "6.4"
|
259 | }, null), vue.createVNode("rect", {
|
260 | "x": "0",
|
261 | "y": "80",
|
262 | "rx": "3",
|
263 | "ry": "3",
|
264 | "width": "350",
|
265 | "height": "6.4"
|
266 | }, null), vue.createVNode("rect", {
|
267 | "x": "0",
|
268 | "y": "100",
|
269 | "rx": "3",
|
270 | "ry": "3",
|
271 | "width": "380",
|
272 | "height": "6.4"
|
273 | }, null), vue.createVNode("rect", {
|
274 | "x": "0",
|
275 | "y": "120",
|
276 | "rx": "3",
|
277 | "ry": "3",
|
278 | "width": "201",
|
279 | "height": "6.4"
|
280 | }, null), vue.createVNode("circle", {
|
281 | "cx": "30",
|
282 | "cy": "30",
|
283 | "r": "30"
|
284 | }, null)];
|
285 | }
|
286 | });
|
287 | };
|
288 |
|
289 | var ListLoader = function ListLoader(props, _ref) {
|
290 | var attrs = _ref.attrs;
|
291 | return vue.createVNode(ContentLoader, attrs, {
|
292 | "default": function _default() {
|
293 | return [vue.createVNode("rect", {
|
294 | "x": "0",
|
295 | "y": "0",
|
296 | "rx": "3",
|
297 | "ry": "3",
|
298 | "width": "250",
|
299 | "height": "10"
|
300 | }, null), vue.createVNode("rect", {
|
301 | "x": "20",
|
302 | "y": "20",
|
303 | "rx": "3",
|
304 | "ry": "3",
|
305 | "width": "220",
|
306 | "height": "10"
|
307 | }, null), vue.createVNode("rect", {
|
308 | "x": "20",
|
309 | "y": "40",
|
310 | "rx": "3",
|
311 | "ry": "3",
|
312 | "width": "170",
|
313 | "height": "10"
|
314 | }, null), vue.createVNode("rect", {
|
315 | "x": "0",
|
316 | "y": "60",
|
317 | "rx": "3",
|
318 | "ry": "3",
|
319 | "width": "250",
|
320 | "height": "10"
|
321 | }, null), vue.createVNode("rect", {
|
322 | "x": "20",
|
323 | "y": "80",
|
324 | "rx": "3",
|
325 | "ry": "3",
|
326 | "width": "200",
|
327 | "height": "10"
|
328 | }, null), vue.createVNode("rect", {
|
329 | "x": "20",
|
330 | "y": "100",
|
331 | "rx": "3",
|
332 | "ry": "3",
|
333 | "width": "80",
|
334 | "height": "10"
|
335 | }, null)];
|
336 | }
|
337 | });
|
338 | };
|
339 |
|
340 | var InstagramLoader = function InstagramLoader(props, _ref) {
|
341 | var attrs = _ref.attrs;
|
342 | return vue.createVNode(ContentLoader, vue.mergeProps(attrs, {
|
343 | "height": 480
|
344 | }), {
|
345 | "default": function _default() {
|
346 | return [vue.createVNode("circle", {
|
347 | "cx": "30",
|
348 | "cy": "30",
|
349 | "r": "30"
|
350 | }, null), vue.createVNode("rect", {
|
351 | "x": "75",
|
352 | "y": "13",
|
353 | "rx": "4",
|
354 | "ry": "4",
|
355 | "width": "100",
|
356 | "height": "13"
|
357 | }, null), vue.createVNode("rect", {
|
358 | "x": "75",
|
359 | "y": "37",
|
360 | "rx": "4",
|
361 | "ry": "4",
|
362 | "width": "50",
|
363 | "height": "8"
|
364 | }, null), vue.createVNode("rect", {
|
365 | "x": "0",
|
366 | "y": "70",
|
367 | "rx": "5",
|
368 | "ry": "5",
|
369 | "width": "400",
|
370 | "height": "400"
|
371 | }, null)];
|
372 | }
|
373 | });
|
374 | };
|
375 |
|
376 | exports.BulletListLoader = BulletListLoader;
|
377 | exports.CodeLoader = CodeLoader;
|
378 | exports.ContentLoader = ContentLoader;
|
379 | exports.FacebookLoader = FacebookLoader;
|
380 | exports.InstagramLoader = InstagramLoader;
|
381 | exports.ListLoader = ListLoader;
|