@vuesimple/vs-loader 1.3.39 → 1.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/README.md +7 -6
  2. package/build/rollup.config.js +2 -5
  3. package/dist/vs-loader.esm.js +131 -35
  4. package/dist/vs-loader.min.js +1 -1
  5. package/dist/vs-loader.umd.js +131 -35
  6. package/package.json +4 -4
  7. package/src/vs-dots.vue +2 -2
  8. package/src/vs-inline.vue +64 -0
  9. package/src/vs-loader.vue +4 -2
  10. package/src/vs-pulse.vue +4 -4
  11. package/tests/vs-loader.spec.js +7 -7
package/README.md CHANGED
@@ -70,7 +70,7 @@ yarn add @vuesimple/vs-loader
70
70
  <br />
71
71
 
72
72
  <h3>
73
- <img src="https://nuxtjs.org/favicon.ico" width="20px"> Nuxt.js
73
+ <img src="https://i.imgur.com/MWynQNa.png" width="20px"> Nuxt.js
74
74
  </h3>
75
75
 
76
76
  Nuxt Code Snippet
@@ -115,8 +115,9 @@ After installation,
115
115
 
116
116
  ### ⚙ Props
117
117
 
118
- | Name | Type | Default | Description |
119
- | ------- | ------ | --------- | ------------------------- |
120
- | variant | String | `pulse` | Variants: `pulse`, `dots` |
121
- | color | String | `#1f73b7` | Loader color |
122
- | size | String | `10px` | Loader size |
118
+ | Name | Type | Default | Description |
119
+ | ------- | ------- | --------- | -------------------------------------------- |
120
+ | variant | String | `pulse` | Variants: `pulse`, `dots`, `inline`. |
121
+ | color | String | `#1f73b7` | Loader color. |
122
+ | size | Number | `10` | Loader size. |
123
+ | center | Boolean | - | Center aligns the loader wrt the parent div. |
package/build/rollup.config.js CHANGED
@@ -1,8 +1,6 @@
1
- // rollup.config.js
2
- import vue from 'rollup-plugin-vue';
3
- import buble from 'rollup-plugin-buble';
4
- import image from '@rollup/plugin-image';
5
1
  import { terser } from 'rollup-plugin-terser';
2
+ import buble from '@rollup/plugin-buble';
3
+ import vue from 'rollup-plugin-vue';
6
4
  import minimist from 'minimist';
7
5
 
8
6
  const argv = minimist(process.argv.slice(2));
@@ -20,7 +18,6 @@ const config = {
20
18
  needMap: false,
21
19
  }),
22
20
  buble(),
23
- image(),
24
21
  ],
25
22
  };
26
23
 
package/dist/vs-loader.esm.js CHANGED
@@ -16,8 +16,8 @@ var script = {
16
16
  default: '#1f73b7',
17
17
  },
18
18
  size: {
19
- type: String,
20
- default: '10px',
19
+ type: [Number, String],
20
+ default: 10,
21
21
  },
22
22
  margin: {
23
23
  type: String,
@@ -36,8 +36,8 @@ var script = {
36
36
  return {
37
37
  spinnerStyle: {
38
38
  backgroundColor: this.color,
39
- width: this.size,
40
- height: this.size,
39
+ width: this.size + 'px',
40
+ height: this.size + 'px',
41
41
  margin: this.margin,
42
42
  borderRadius: this.radius,
43
43
  display: 'inline-block',
@@ -214,7 +214,7 @@ __vue_render__._withStripped = true;
214
214
  /* style */
215
215
  var __vue_inject_styles__ = function (inject) {
216
216
  if (!inject) { return }
217
- inject("data-v-27cb6ac2_0", { source: ".vs-pulse {\n display: flex;\n}\n.vs-pulse.vs-loader--center {\n align-items: center;\n justify-content: center;\n}\n@-webkit-keyframes v-pulseStretchDelay {\n0%, 80% {\n -webkit-transform: scale(1);\n transform: scale(1);\n -webkit-opacity: 1;\n opacity: 1;\n}\n45% {\n -webkit-transform: scale(0.1);\n transform: scale(0.1);\n -webkit-opacity: 0.7;\n opacity: 0.7;\n}\n}\n@keyframes v-pulseStretchDelay {\n0%, 80% {\n -webkit-transform: scale(1);\n transform: scale(1);\n -webkit-opacity: 1;\n opacity: 1;\n}\n45% {\n -webkit-transform: scale(0.1);\n transform: scale(0.1);\n -webkit-opacity: 0.7;\n opacity: 0.7;\n}\n}", map: undefined, media: undefined });
217
+ inject("data-v-715abaa0_0", { source: ".vs-pulse {\n display: flex;\n}\n.vs-pulse.vs-loader--center {\n align-items: center;\n justify-content: center;\n}\n@-webkit-keyframes v-pulseStretchDelay {\n0%, 80% {\n -webkit-transform: scale(1);\n transform: scale(1);\n -webkit-opacity: 1;\n opacity: 1;\n}\n45% {\n -webkit-transform: scale(0.1);\n transform: scale(0.1);\n -webkit-opacity: 0.7;\n opacity: 0.7;\n}\n}\n@keyframes v-pulseStretchDelay {\n0%, 80% {\n -webkit-transform: scale(1);\n transform: scale(1);\n -webkit-opacity: 1;\n opacity: 1;\n}\n45% {\n -webkit-transform: scale(0.1);\n transform: scale(0.1);\n -webkit-opacity: 0.7;\n opacity: 0.7;\n}\n}", map: undefined, media: undefined });
218
218
 
219
219
  };
220
220
  /* scoped */
@@ -271,8 +271,8 @@ var script$1 = {
271
271
  default: '#1f73b7',
272
272
  },
273
273
  size: {
274
- type: String,
275
- default: '10px',
274
+ type: [Number, String],
275
+ default: 10,
276
276
  },
277
277
  center: {
278
278
  type: Boolean,
@@ -332,7 +332,7 @@ __vue_render__$1._withStripped = true;
332
332
  /* style */
333
333
  var __vue_inject_styles__$1 = function (inject) {
334
334
  if (!inject) { return }
335
- inject("data-v-5706d53e_0", { source: ".vs-dots.vs-loader--center {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.vs-dots svg {\n width: 4.5em;\n margin: 3px;\n}\n.vs-dots .circle-one {\n animation: 1250ms ease-in-out 0s infinite normal none running circleOneKeyframe;\n}\n.vs-dots .circle-two {\n animation: 1250ms ease-in-out 0s infinite normal none running circleTwoKeyframe;\n}\n.vs-dots .circle-three {\n animation: 1250ms ease-in-out 0s infinite normal none running circleThreeKeyframe;\n}\n@keyframes circleOneKeyframe {\n0% {\n transform: translate(0, 5px);\n}\n3% {\n transform: translate(1px, -5px);\n}\n6% {\n transform: translate(3px, -15px);\n}\n8% {\n transform: translate(5px, -18px);\n}\n9% {\n transform: translate(7px, -21px);\n}\n11% {\n transform: translate(8px, -22px);\n}\n13% {\n transform: translate(9px, -23px);\n}\n16% {\n transform: translate(12px, -25px);\n}\n18% {\n transform: translate(13px, -26px);\n}\n23% {\n transform: translate(18px, -26px);\n}\n24% {\n transform: translate(19px, -25px);\n}\n28% {\n transform: translate(22px, -23px);\n}\n31% {\n transform: translate(24px, -21px);\n}\n33% {\n transform: translate(26px, -18px);\n}\n34% {\n transform: translate(28px, -14px);\n}\n36% {\n transform: translate(29px, -12px);\n}\n38% {\n transform: translate(30px, -5px);\n}\n39% {\n transform: translate(31px, 5px);\n}\n54% {\n transform: translate(31px, 3px);\n}\n59% {\n transform: translate(33px);\n}\n61% {\n transform: translate(43px);\n}\n63% {\n transform: translate(48px);\n}\n64% {\n transform: translate(51px);\n}\n66% {\n transform: translate(53px);\n}\n68% {\n transform: translate(55px);\n}\n69% {\n transform: translate(57px);\n}\n76% {\n transform: translate(60px);\n}\n81% {\n transform: translate(61px);\n}\n83%, 100% {\n transform: translate(62px);\n}\n}\n@keyframes circleTwoKeyframe {\n4% {\n transform: translate(0);\n}\n6% {\n transform: translate(-1px);\n}\n8% {\n transform: translate(-2px);\n}\n9% {\n transform: translate(-5px);\n}\n11% {\n transform: translate(-7px);\n}\n13% {\n transform: translate(-12px);\n}\n14% {\n transform: translate(-17px);\n}\n16% {\n transform: translate(-19px);\n}\n18% {\n transform: translate(-22px);\n}\n19% {\n transform: translate(-25px);\n}\n21% {\n transform: translate(-26px);\n}\n23% {\n transform: translate(-27px);\n}\n24% {\n transform: translate(-28px);\n}\n26% {\n transform: translate(-29px);\n}\n29% {\n transform: translate(-30px);\n}\n33%, 89% {\n transform: translate(-31px);\n}\n91% {\n transform: translate(-31px, 1px);\n}\n94% {\n transform: translate(-31px, 2px);\n}\n98% {\n transform: translate(-31px, 3px);\n}\n99% {\n transform: translate(-31px, 4px);\n}\n100% {\n transform: translate(-31px, 5px);\n}\n}\n@keyframes circleThreeKeyframe {\n39% {\n transform: translate(0);\n}\n44% {\n transform: translate(0, 1px);\n}\n46% {\n transform: translate(0, 2px);\n}\n48% {\n transform: translate(0, 3px);\n}\n49% {\n transform: translate(0, 4px);\n}\n51% {\n transform: translate(0, 5px);\n}\n53% {\n transform: translate(-1px, -6px);\n}\n54% {\n transform: translate(-2px, -13px);\n}\n56% {\n transform: translate(-3px, -15px);\n}\n58% {\n transform: translate(-5px, -19px);\n}\n59% {\n transform: translate(-7px, -21px);\n}\n61% {\n transform: translate(-8px, -22px);\n}\n63% {\n transform: translate(-9px, -24px);\n}\n64% {\n transform: translate(-11px, -25px);\n}\n66% {\n transform: translate(-12px, -26px);\n}\n74% {\n transform: translate(-19px, -26px);\n}\n76% {\n transform: translate(-20px, -25px);\n}\n78% {\n transform: translate(-22px, -24px);\n}\n81% {\n transform: translate(-24px, -21px);\n}\n83% {\n transform: translate(-26px, -19px);\n}\n84% {\n transform: translate(-28px, -15px);\n}\n86% {\n transform: translate(-29px, -13px);\n}\n88% {\n transform: translate(-30px, -6px);\n}\n89% {\n transform: translate(-31px, 5px);\n}\n91% {\n transform: translate(-31px, 4px);\n}\n93% {\n transform: translate(-31px, 3px);\n}\n94% {\n transform: translate(-31px, 2px);\n}\n98% {\n transform: translate(-31px, 1px);\n}\n100% {\n transform: translate(-31px);\n}\n}", map: undefined, media: undefined });
335
+ inject("data-v-de7d5a7e_0", { source: ".vs-dots.vs-loader--center {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.vs-dots svg {\n width: 4.5em;\n margin: 3px;\n}\n.vs-dots .circle-one {\n animation: 1250ms ease-in-out 0s infinite normal none running circleOneKeyframe;\n}\n.vs-dots .circle-two {\n animation: 1250ms ease-in-out 0s infinite normal none running circleTwoKeyframe;\n}\n.vs-dots .circle-three {\n animation: 1250ms ease-in-out 0s infinite normal none running circleThreeKeyframe;\n}\n@keyframes circleOneKeyframe {\n0% {\n transform: translate(0, 5px);\n}\n3% {\n transform: translate(1px, -5px);\n}\n6% {\n transform: translate(3px, -15px);\n}\n8% {\n transform: translate(5px, -18px);\n}\n9% {\n transform: translate(7px, -21px);\n}\n11% {\n transform: translate(8px, -22px);\n}\n13% {\n transform: translate(9px, -23px);\n}\n16% {\n transform: translate(12px, -25px);\n}\n18% {\n transform: translate(13px, -26px);\n}\n23% {\n transform: translate(18px, -26px);\n}\n24% {\n transform: translate(19px, -25px);\n}\n28% {\n transform: translate(22px, -23px);\n}\n31% {\n transform: translate(24px, -21px);\n}\n33% {\n transform: translate(26px, -18px);\n}\n34% {\n transform: translate(28px, -14px);\n}\n36% {\n transform: translate(29px, -12px);\n}\n38% {\n transform: translate(30px, -5px);\n}\n39% {\n transform: translate(31px, 5px);\n}\n54% {\n transform: translate(31px, 3px);\n}\n59% {\n transform: translate(33px);\n}\n61% {\n transform: translate(43px);\n}\n63% {\n transform: translate(48px);\n}\n64% {\n transform: translate(51px);\n}\n66% {\n transform: translate(53px);\n}\n68% {\n transform: translate(55px);\n}\n69% {\n transform: translate(57px);\n}\n76% {\n transform: translate(60px);\n}\n81% {\n transform: translate(61px);\n}\n83%, 100% {\n transform: translate(62px);\n}\n}\n@keyframes circleTwoKeyframe {\n4% {\n transform: translate(0);\n}\n6% {\n transform: translate(-1px);\n}\n8% {\n transform: translate(-2px);\n}\n9% {\n transform: translate(-5px);\n}\n11% {\n transform: translate(-7px);\n}\n13% {\n transform: translate(-12px);\n}\n14% {\n transform: translate(-17px);\n}\n16% {\n transform: translate(-19px);\n}\n18% {\n transform: translate(-22px);\n}\n19% {\n transform: translate(-25px);\n}\n21% {\n transform: translate(-26px);\n}\n23% {\n transform: translate(-27px);\n}\n24% {\n transform: translate(-28px);\n}\n26% {\n transform: translate(-29px);\n}\n29% {\n transform: translate(-30px);\n}\n33%, 89% {\n transform: translate(-31px);\n}\n91% {\n transform: translate(-31px, 1px);\n}\n94% {\n transform: translate(-31px, 2px);\n}\n98% {\n transform: translate(-31px, 3px);\n}\n99% {\n transform: translate(-31px, 4px);\n}\n100% {\n transform: translate(-31px, 5px);\n}\n}\n@keyframes circleThreeKeyframe {\n39% {\n transform: translate(0);\n}\n44% {\n transform: translate(0, 1px);\n}\n46% {\n transform: translate(0, 2px);\n}\n48% {\n transform: translate(0, 3px);\n}\n49% {\n transform: translate(0, 4px);\n}\n51% {\n transform: translate(0, 5px);\n}\n53% {\n transform: translate(-1px, -6px);\n}\n54% {\n transform: translate(-2px, -13px);\n}\n56% {\n transform: translate(-3px, -15px);\n}\n58% {\n transform: translate(-5px, -19px);\n}\n59% {\n transform: translate(-7px, -21px);\n}\n61% {\n transform: translate(-8px, -22px);\n}\n63% {\n transform: translate(-9px, -24px);\n}\n64% {\n transform: translate(-11px, -25px);\n}\n66% {\n transform: translate(-12px, -26px);\n}\n74% {\n transform: translate(-19px, -26px);\n}\n76% {\n transform: translate(-20px, -25px);\n}\n78% {\n transform: translate(-22px, -24px);\n}\n81% {\n transform: translate(-24px, -21px);\n}\n83% {\n transform: translate(-26px, -19px);\n}\n84% {\n transform: translate(-28px, -15px);\n}\n86% {\n transform: translate(-29px, -13px);\n}\n88% {\n transform: translate(-30px, -6px);\n}\n89% {\n transform: translate(-31px, 5px);\n}\n91% {\n transform: translate(-31px, 4px);\n}\n93% {\n transform: translate(-31px, 3px);\n}\n94% {\n transform: translate(-31px, 2px);\n}\n98% {\n transform: translate(-31px, 1px);\n}\n100% {\n transform: translate(-31px);\n}\n}", map: undefined, media: undefined });
336
336
 
337
337
  };
338
338
  /* scoped */
@@ -361,13 +361,114 @@ __vue_render__$1._withStripped = true;
361
361
  );
362
362
 
363
363
  //
364
+ //
365
+ //
366
+ //
367
+ //
368
+ //
369
+ //
370
+ //
371
+ //
372
+ //
364
373
 
365
374
  var script$2 = {
375
+ name: 'VsInlineLoader',
376
+
377
+ props: {
378
+ color: {
379
+ type: String,
380
+ default: '#1f73b7',
381
+ },
382
+ size: {
383
+ type: [Number, String],
384
+ default: 10,
385
+ },
386
+ center: {
387
+ type: Boolean,
388
+ },
389
+ },
390
+ };
391
+
392
+ /* script */
393
+ var __vue_script__$2 = script$2;
394
+
395
+ /* template */
396
+ var __vue_render__$2 = function() {
397
+ var _vm = this;
398
+ var _h = _vm.$createElement;
399
+ var _c = _vm._self._c || _h;
400
+ return _c(
401
+ "div",
402
+ { class: ["vs-inline", { "vs-loader--center": _vm.center }] },
403
+ [
404
+ _c(
405
+ "svg",
406
+ {
407
+ attrs: { color: _vm.color, viewBox: "0 0 16 4", width: _vm.size * 4 }
408
+ },
409
+ [
410
+ _c("circle", {
411
+ staticClass: "vs-inline--circle",
412
+ attrs: { cx: "14", fill: "currentColor", cy: "2", r: "2" }
413
+ }),
414
+ _vm._v(" "),
415
+ _c("circle", {
416
+ staticClass: "vs-inline--circle",
417
+ attrs: { cx: "8", fill: "currentColor", cy: "2", r: "2" }
418
+ }),
419
+ _vm._v(" "),
420
+ _c("circle", {
421
+ staticClass: "vs-inline--circle",
422
+ attrs: { cx: "2", fill: "currentColor", cy: "2", r: "2" }
423
+ })
424
+ ]
425
+ )
426
+ ]
427
+ )
428
+ };
429
+ var __vue_staticRenderFns__$2 = [];
430
+ __vue_render__$2._withStripped = true;
431
+
432
+ /* style */
433
+ var __vue_inject_styles__$2 = function (inject) {
434
+ if (!inject) { return }
435
+ inject("data-v-04cfa009_0", { source: ".vs-inline.vs-loader--center {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.vs-inline .vs-inline--circle {\n opacity: 0.2;\n}\n.vs-inline .vs-inline--circle:nth-child(1) {\n animation: pulseAnimation 1s infinite;\n animation-delay: 0.4s;\n}\n.vs-inline .vs-inline--circle:nth-child(2) {\n animation: pulseAnimation 1s infinite;\n animation-delay: 0.2s;\n}\n.vs-inline .vs-inline--circle:nth-child(3) {\n animation: pulseAnimation 1s infinite;\n}\n@keyframes pulseAnimation {\n0%, 100% {\n opacity: 0.2;\n}\n50% {\n opacity: 0.8;\n}\n}", map: undefined, media: undefined });
436
+
437
+ };
438
+ /* scoped */
439
+ var __vue_scope_id__$2 = undefined;
440
+ /* module identifier */
441
+ var __vue_module_identifier__$2 = undefined;
442
+ /* functional template */
443
+ var __vue_is_functional_template__$2 = false;
444
+ /* style inject SSR */
445
+
446
+ /* style inject shadow dom */
447
+
448
+
449
+
450
+ var __vue_component__$2 = /*#__PURE__*/normalizeComponent(
451
+ { render: __vue_render__$2, staticRenderFns: __vue_staticRenderFns__$2 },
452
+ __vue_inject_styles__$2,
453
+ __vue_script__$2,
454
+ __vue_scope_id__$2,
455
+ __vue_is_functional_template__$2,
456
+ __vue_module_identifier__$2,
457
+ false,
458
+ createInjector,
459
+ undefined,
460
+ undefined
461
+ );
462
+
463
+ //
464
+
465
+ var script$3 = {
366
466
  name: 'VsLoader',
367
467
 
368
468
  components: {
369
469
  Pulse: __vue_component__,
370
470
  Dots: __vue_component__$1,
471
+ Inline: __vue_component__$2,
371
472
  },
372
473
 
373
474
  props: {
@@ -379,7 +480,7 @@ var script$2 = {
379
480
  type: String,
380
481
  },
381
482
  size: {
382
- type: String,
483
+ type: [Number, String],
383
484
  },
384
485
  margin: {
385
486
  type: String,
@@ -391,34 +492,29 @@ var script$2 = {
391
492
  };
392
493
 
393
494
  /* script */
394
- var __vue_script__$2 = script$2;
495
+ var __vue_script__$3 = script$3;
395
496
 
396
497
  /* template */
397
- var __vue_render__$2 = function() {
498
+ var __vue_render__$3 = function() {
398
499
  var _vm = this;
399
500
  var _h = _vm.$createElement;
400
501
  var _c = _vm._self._c || _h;
401
- return _c(_vm.variant, {
402
- tag: "component",
403
- attrs: {
404
- color: _vm.color,
405
- size: _vm.size,
406
- margin: _vm.margin,
407
- center: _vm.center
408
- }
409
- })
502
+ return _c(
503
+ _vm.variant,
504
+ _vm._b({ tag: "component" }, "component", _vm.$props, false)
505
+ )
410
506
  };
411
- var __vue_staticRenderFns__$2 = [];
412
- __vue_render__$2._withStripped = true;
507
+ var __vue_staticRenderFns__$3 = [];
508
+ __vue_render__$3._withStripped = true;
413
509
 
414
510
  /* style */
415
- var __vue_inject_styles__$2 = undefined;
511
+ var __vue_inject_styles__$3 = undefined;
416
512
  /* scoped */
417
- var __vue_scope_id__$2 = undefined;
513
+ var __vue_scope_id__$3 = undefined;
418
514
  /* module identifier */
419
- var __vue_module_identifier__$2 = undefined;
515
+ var __vue_module_identifier__$3 = undefined;
420
516
  /* functional template */
421
- var __vue_is_functional_template__$2 = false;
517
+ var __vue_is_functional_template__$3 = false;
422
518
  /* style inject */
423
519
 
424
520
  /* style inject SSR */
@@ -427,13 +523,13 @@ __vue_render__$2._withStripped = true;
427
523
 
428
524
 
429
525
 
430
- var __vue_component__$2 = /*#__PURE__*/normalizeComponent(
431
- { render: __vue_render__$2, staticRenderFns: __vue_staticRenderFns__$2 },
432
- __vue_inject_styles__$2,
433
- __vue_script__$2,
434
- __vue_scope_id__$2,
435
- __vue_is_functional_template__$2,
436
- __vue_module_identifier__$2,
526
+ var __vue_component__$3 = /*#__PURE__*/normalizeComponent(
527
+ { render: __vue_render__$3, staticRenderFns: __vue_staticRenderFns__$3 },
528
+ __vue_inject_styles__$3,
529
+ __vue_script__$3,
530
+ __vue_scope_id__$3,
531
+ __vue_is_functional_template__$3,
532
+ __vue_module_identifier__$3,
437
533
  false,
438
534
  undefined,
439
535
  undefined,
@@ -446,7 +542,7 @@ __vue_render__$2._withStripped = true;
446
542
  function install(Vue) {
447
543
  if (install.installed) { return; }
448
544
  install.installed = true;
449
- Vue.component('VsLoader', __vue_component__$2);
545
+ Vue.component('VsLoader', __vue_component__$3);
450
546
  }
451
547
 
452
548
  // Create module definition for Vue.use()
@@ -465,5 +561,5 @@ if (GlobalVue) {
465
561
  GlobalVue.use(plugin);
466
562
  }
467
563
 
468
- export default __vue_component__$2;
564
+ export default __vue_component__$3;
469
565
  export { install };
package/dist/vs-loader.min.js CHANGED
@@ -1 +1 @@
1
- var VsLoader=function(n){"use strict";var t={name:"VsLoader",props:{color:{type:String,default:"#1f73b7"},size:{type:String,default:"10px"},margin:{type:String,default:"3px"},radius:{type:String,default:"100%"},center:{type:Boolean}},data:function(){return{spinnerStyle:{backgroundColor:this.color,width:this.size,height:this.size,margin:this.margin,borderRadius:this.radius,display:"inline-block",animationName:"v-pulseStretchDelay",animationDuration:"0.75s",animationIterationCount:"infinite",animationTimingFunction:"cubic-bezier(.2,.68,.18,1.08)",animationFillMode:"both"},spinnerDelay1:{animationDelay:"0.12s"},spinnerDelay2:{animationDelay:"0.24s"},spinnerDelay3:{animationDelay:"0.36s"}}}};function e(n,t,e,r,a,s,o,i,l,p){"boolean"!=typeof o&&(l=i,i=o,o=!1);var m,f="function"==typeof e?e.options:e;if(n&&n.render&&(f.render=n.render,f.staticRenderFns=n.staticRenderFns,f._compiled=!0,a&&(f.functional=!0)),r&&(f._scopeId=r),s?(m=function(n){(n=n||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(n=__VUE_SSR_CONTEXT__),t&&t.call(this,l(n)),n&&n._registeredComponents&&n._registeredComponents.add(s)},f._ssrRegister=m):t&&(m=o?function(n){t.call(this,p(n,this.$root.$options.shadowRoot))}:function(n){t.call(this,i(n))}),m)if(f.functional){var c=f.render;f.render=function(n,t){return m.call(t),c(n,t)}}else{var x=f.beforeCreate;f.beforeCreate=x?[].concat(x,m):[m]}return e}var r,a="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function s(n){return function(n,t){return function(n,t){var e=a?t.media||"default":n,s=o[e]||(o[e]={ids:new Set,styles:[]});if(!s.ids.has(n)){s.ids.add(n);var i=t.source;if(t.map&&(i+="\n/*# sourceURL="+t.map.sources[0]+" */",i+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(t.map))))+" */"),s.element||(s.element=document.createElement("style"),s.element.type="text/css",t.media&&s.element.setAttribute("media",t.media),void 0===r&&(r=document.head||document.getElementsByTagName("head")[0]),r.appendChild(s.element)),"styleSheet"in s.element)s.styles.push(i),s.element.styleSheet.cssText=s.styles.filter(Boolean).join("\n");else{var l=s.ids.size-1,p=document.createTextNode(i),m=s.element.childNodes;m[l]&&s.element.removeChild(m[l]),m.length?s.element.insertBefore(p,m[l]):s.element.appendChild(p)}}}(n,t)}}var o={};var i=t,l=function(){var n=this,t=n.$createElement,e=n._self._c||t;return e("div",{class:["vs-pulse",{"vs-loader--center":n.center}]},[e("div",{style:[n.spinnerStyle,n.spinnerDelay1]}),n._v(" "),e("div",{style:[n.spinnerStyle,n.spinnerDelay2]}),n._v(" "),e("div",{style:[n.spinnerStyle,n.spinnerDelay3]})])};l._withStripped=!0;var p=e({render:l,staticRenderFns:[]},(function(n){n&&n("data-v-27cb6ac2_0",{source:".vs-pulse {\n display: flex;\n}\n.vs-pulse.vs-loader--center {\n align-items: center;\n justify-content: center;\n}\n@-webkit-keyframes v-pulseStretchDelay {\n0%, 80% {\n -webkit-transform: scale(1);\n transform: scale(1);\n -webkit-opacity: 1;\n opacity: 1;\n}\n45% {\n -webkit-transform: scale(0.1);\n transform: scale(0.1);\n -webkit-opacity: 0.7;\n opacity: 0.7;\n}\n}\n@keyframes v-pulseStretchDelay {\n0%, 80% {\n -webkit-transform: scale(1);\n transform: scale(1);\n -webkit-opacity: 1;\n opacity: 1;\n}\n45% {\n -webkit-transform: scale(0.1);\n transform: scale(0.1);\n -webkit-opacity: 0.7;\n opacity: 0.7;\n}\n}",map:void 0,media:void 0})}),i,void 0,!1,void 0,!1,s,void 0,void 0),m={name:"VsDotsLoader",props:{color:{type:String,default:"#1f73b7"},size:{type:String,default:"10px"},center:{type:Boolean}}},f=function(){var n=this.$createElement,t=this._self._c||n;return t("div",{class:["vs-dots",{"vs-loader--center":this.center}]},[t("svg",{attrs:{color:this.color,"font-size":this.size,xmlns:"http://www.w3.org/2000/svg",focusable:"false",viewBox:"0 0 80 72",role:"progressbar"}},[t("g",{attrs:{fill:"currentColor"}},[t("circle",{staticClass:"circle-one",attrs:{cy:"36",r:"9",cx:"9"}}),this._v(" "),t("circle",{staticClass:"circle-two",attrs:{cy:"36",r:"9",cx:"40"}}),this._v(" "),t("circle",{staticClass:"circle-three",attrs:{cy:"36",r:"9",cx:"71"}})])])])};f._withStripped=!0;var c={name:"VsLoader",components:{Pulse:p,Dots:e({render:f,staticRenderFns:[]},(function(n){n&&n("data-v-5706d53e_0",{source:".vs-dots.vs-loader--center {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.vs-dots svg {\n width: 4.5em;\n margin: 3px;\n}\n.vs-dots .circle-one {\n animation: 1250ms ease-in-out 0s infinite normal none running circleOneKeyframe;\n}\n.vs-dots .circle-two {\n animation: 1250ms ease-in-out 0s infinite normal none running circleTwoKeyframe;\n}\n.vs-dots .circle-three {\n animation: 1250ms ease-in-out 0s infinite normal none running circleThreeKeyframe;\n}\n@keyframes circleOneKeyframe {\n0% {\n transform: translate(0, 5px);\n}\n3% {\n transform: translate(1px, -5px);\n}\n6% {\n transform: translate(3px, -15px);\n}\n8% {\n transform: translate(5px, -18px);\n}\n9% {\n transform: translate(7px, -21px);\n}\n11% {\n transform: translate(8px, -22px);\n}\n13% {\n transform: translate(9px, -23px);\n}\n16% {\n transform: translate(12px, -25px);\n}\n18% {\n transform: translate(13px, -26px);\n}\n23% {\n transform: translate(18px, -26px);\n}\n24% {\n transform: translate(19px, -25px);\n}\n28% {\n transform: translate(22px, -23px);\n}\n31% {\n transform: translate(24px, -21px);\n}\n33% {\n transform: translate(26px, -18px);\n}\n34% {\n transform: translate(28px, -14px);\n}\n36% {\n transform: translate(29px, -12px);\n}\n38% {\n transform: translate(30px, -5px);\n}\n39% {\n transform: translate(31px, 5px);\n}\n54% {\n transform: translate(31px, 3px);\n}\n59% {\n transform: translate(33px);\n}\n61% {\n transform: translate(43px);\n}\n63% {\n transform: translate(48px);\n}\n64% {\n transform: translate(51px);\n}\n66% {\n transform: translate(53px);\n}\n68% {\n transform: translate(55px);\n}\n69% {\n transform: translate(57px);\n}\n76% {\n transform: translate(60px);\n}\n81% {\n transform: translate(61px);\n}\n83%, 100% {\n transform: translate(62px);\n}\n}\n@keyframes circleTwoKeyframe {\n4% {\n transform: translate(0);\n}\n6% {\n transform: translate(-1px);\n}\n8% {\n transform: translate(-2px);\n}\n9% {\n transform: translate(-5px);\n}\n11% {\n transform: translate(-7px);\n}\n13% {\n transform: translate(-12px);\n}\n14% {\n transform: translate(-17px);\n}\n16% {\n transform: translate(-19px);\n}\n18% {\n transform: translate(-22px);\n}\n19% {\n transform: translate(-25px);\n}\n21% {\n transform: translate(-26px);\n}\n23% {\n transform: translate(-27px);\n}\n24% {\n transform: translate(-28px);\n}\n26% {\n transform: translate(-29px);\n}\n29% {\n transform: translate(-30px);\n}\n33%, 89% {\n transform: translate(-31px);\n}\n91% {\n transform: translate(-31px, 1px);\n}\n94% {\n transform: translate(-31px, 2px);\n}\n98% {\n transform: translate(-31px, 3px);\n}\n99% {\n transform: translate(-31px, 4px);\n}\n100% {\n transform: translate(-31px, 5px);\n}\n}\n@keyframes circleThreeKeyframe {\n39% {\n transform: translate(0);\n}\n44% {\n transform: translate(0, 1px);\n}\n46% {\n transform: translate(0, 2px);\n}\n48% {\n transform: translate(0, 3px);\n}\n49% {\n transform: translate(0, 4px);\n}\n51% {\n transform: translate(0, 5px);\n}\n53% {\n transform: translate(-1px, -6px);\n}\n54% {\n transform: translate(-2px, -13px);\n}\n56% {\n transform: translate(-3px, -15px);\n}\n58% {\n transform: translate(-5px, -19px);\n}\n59% {\n transform: translate(-7px, -21px);\n}\n61% {\n transform: translate(-8px, -22px);\n}\n63% {\n transform: translate(-9px, -24px);\n}\n64% {\n transform: translate(-11px, -25px);\n}\n66% {\n transform: translate(-12px, -26px);\n}\n74% {\n transform: translate(-19px, -26px);\n}\n76% {\n transform: translate(-20px, -25px);\n}\n78% {\n transform: translate(-22px, -24px);\n}\n81% {\n transform: translate(-24px, -21px);\n}\n83% {\n transform: translate(-26px, -19px);\n}\n84% {\n transform: translate(-28px, -15px);\n}\n86% {\n transform: translate(-29px, -13px);\n}\n88% {\n transform: translate(-30px, -6px);\n}\n89% {\n transform: translate(-31px, 5px);\n}\n91% {\n transform: translate(-31px, 4px);\n}\n93% {\n transform: translate(-31px, 3px);\n}\n94% {\n transform: translate(-31px, 2px);\n}\n98% {\n transform: translate(-31px, 1px);\n}\n100% {\n transform: translate(-31px);\n}\n}",map:void 0,media:void 0})}),m,void 0,!1,void 0,!1,s,void 0,void 0)},props:{variant:{type:String,default:"Pulse"},color:{type:String},size:{type:String},margin:{type:String},center:{type:Boolean}}},x=function(){var n=this.$createElement;return(this._self._c||n)(this.variant,{tag:"component",attrs:{color:this.color,size:this.size,margin:this.margin,center:this.center}})};x._withStripped=!0;var d=e({render:x,staticRenderFns:[]},void 0,c,void 0,!1,void 0,!1,void 0,void 0,void 0);function u(n){u.installed||(u.installed=!0,n.component("VsLoader",d))}var v={install:u},y=null;return"undefined"!=typeof window?y=window.Vue:"undefined"!=typeof global&&(y=global.Vue),y&&y.use(v),n.default=d,n.install=u,n}({});
1
+ var VsLoader=function(n){"use strict";var t={name:"VsLoader",props:{color:{type:String,default:"#1f73b7"},size:{type:[Number,String],default:10},margin:{type:String,default:"3px"},radius:{type:String,default:"100%"},center:{type:Boolean}},data:function(){return{spinnerStyle:{backgroundColor:this.color,width:this.size+"px",height:this.size+"px",margin:this.margin,borderRadius:this.radius,display:"inline-block",animationName:"v-pulseStretchDelay",animationDuration:"0.75s",animationIterationCount:"infinite",animationTimingFunction:"cubic-bezier(.2,.68,.18,1.08)",animationFillMode:"both"},spinnerDelay1:{animationDelay:"0.12s"},spinnerDelay2:{animationDelay:"0.24s"},spinnerDelay3:{animationDelay:"0.36s"}}}};function e(n,t,e,r,a,s,i,o,l,p){"boolean"!=typeof i&&(l=o,o=i,i=!1);var c,m="function"==typeof e?e.options:e;if(n&&n.render&&(m.render=n.render,m.staticRenderFns=n.staticRenderFns,m._compiled=!0,a&&(m.functional=!0)),r&&(m._scopeId=r),s?(c=function(n){(n=n||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(n=__VUE_SSR_CONTEXT__),t&&t.call(this,l(n)),n&&n._registeredComponents&&n._registeredComponents.add(s)},m._ssrRegister=c):t&&(c=i?function(n){t.call(this,p(n,this.$root.$options.shadowRoot))}:function(n){t.call(this,o(n))}),c)if(m.functional){var f=m.render;m.render=function(n,t){return c.call(t),f(n,t)}}else{var d=m.beforeCreate;m.beforeCreate=d?[].concat(d,c):[c]}return e}var r,a="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function s(n){return function(n,t){return function(n,t){var e=a?t.media||"default":n,s=i[e]||(i[e]={ids:new Set,styles:[]});if(!s.ids.has(n)){s.ids.add(n);var o=t.source;if(t.map&&(o+="\n/*# sourceURL="+t.map.sources[0]+" */",o+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(t.map))))+" */"),s.element||(s.element=document.createElement("style"),s.element.type="text/css",t.media&&s.element.setAttribute("media",t.media),void 0===r&&(r=document.head||document.getElementsByTagName("head")[0]),r.appendChild(s.element)),"styleSheet"in s.element)s.styles.push(o),s.element.styleSheet.cssText=s.styles.filter(Boolean).join("\n");else{var l=s.ids.size-1,p=document.createTextNode(o),c=s.element.childNodes;c[l]&&s.element.removeChild(c[l]),c.length?s.element.insertBefore(p,c[l]):s.element.appendChild(p)}}}(n,t)}}var i={};var o=t,l=function(){var n=this,t=n.$createElement,e=n._self._c||t;return e("div",{class:["vs-pulse",{"vs-loader--center":n.center}]},[e("div",{style:[n.spinnerStyle,n.spinnerDelay1]}),n._v(" "),e("div",{style:[n.spinnerStyle,n.spinnerDelay2]}),n._v(" "),e("div",{style:[n.spinnerStyle,n.spinnerDelay3]})])};l._withStripped=!0;var p=e({render:l,staticRenderFns:[]},(function(n){n&&n("data-v-715abaa0_0",{source:".vs-pulse {\n display: flex;\n}\n.vs-pulse.vs-loader--center {\n align-items: center;\n justify-content: center;\n}\n@-webkit-keyframes v-pulseStretchDelay {\n0%, 80% {\n -webkit-transform: scale(1);\n transform: scale(1);\n -webkit-opacity: 1;\n opacity: 1;\n}\n45% {\n -webkit-transform: scale(0.1);\n transform: scale(0.1);\n -webkit-opacity: 0.7;\n opacity: 0.7;\n}\n}\n@keyframes v-pulseStretchDelay {\n0%, 80% {\n -webkit-transform: scale(1);\n transform: scale(1);\n -webkit-opacity: 1;\n opacity: 1;\n}\n45% {\n -webkit-transform: scale(0.1);\n transform: scale(0.1);\n -webkit-opacity: 0.7;\n opacity: 0.7;\n}\n}",map:void 0,media:void 0})}),o,void 0,!1,void 0,!1,s,void 0,void 0),c={name:"VsDotsLoader",props:{color:{type:String,default:"#1f73b7"},size:{type:[Number,String],default:10},center:{type:Boolean}}},m=function(){var n=this.$createElement,t=this._self._c||n;return t("div",{class:["vs-dots",{"vs-loader--center":this.center}]},[t("svg",{attrs:{color:this.color,"font-size":this.size,xmlns:"http://www.w3.org/2000/svg",focusable:"false",viewBox:"0 0 80 72",role:"progressbar"}},[t("g",{attrs:{fill:"currentColor"}},[t("circle",{staticClass:"circle-one",attrs:{cy:"36",r:"9",cx:"9"}}),this._v(" "),t("circle",{staticClass:"circle-two",attrs:{cy:"36",r:"9",cx:"40"}}),this._v(" "),t("circle",{staticClass:"circle-three",attrs:{cy:"36",r:"9",cx:"71"}})])])])};m._withStripped=!0;var f=e({render:m,staticRenderFns:[]},(function(n){n&&n("data-v-de7d5a7e_0",{source:".vs-dots.vs-loader--center {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.vs-dots svg {\n width: 4.5em;\n margin: 3px;\n}\n.vs-dots .circle-one {\n animation: 1250ms ease-in-out 0s infinite normal none running circleOneKeyframe;\n}\n.vs-dots .circle-two {\n animation: 1250ms ease-in-out 0s infinite normal none running circleTwoKeyframe;\n}\n.vs-dots .circle-three {\n animation: 1250ms ease-in-out 0s infinite normal none running circleThreeKeyframe;\n}\n@keyframes circleOneKeyframe {\n0% {\n transform: translate(0, 5px);\n}\n3% {\n transform: translate(1px, -5px);\n}\n6% {\n transform: translate(3px, -15px);\n}\n8% {\n transform: translate(5px, -18px);\n}\n9% {\n transform: translate(7px, -21px);\n}\n11% {\n transform: translate(8px, -22px);\n}\n13% {\n transform: translate(9px, -23px);\n}\n16% {\n transform: translate(12px, -25px);\n}\n18% {\n transform: translate(13px, -26px);\n}\n23% {\n transform: translate(18px, -26px);\n}\n24% {\n transform: translate(19px, -25px);\n}\n28% {\n transform: translate(22px, -23px);\n}\n31% {\n transform: translate(24px, -21px);\n}\n33% {\n transform: translate(26px, -18px);\n}\n34% {\n transform: translate(28px, -14px);\n}\n36% {\n transform: translate(29px, -12px);\n}\n38% {\n transform: translate(30px, -5px);\n}\n39% {\n transform: translate(31px, 5px);\n}\n54% {\n transform: translate(31px, 3px);\n}\n59% {\n transform: translate(33px);\n}\n61% {\n transform: translate(43px);\n}\n63% {\n transform: translate(48px);\n}\n64% {\n transform: translate(51px);\n}\n66% {\n transform: translate(53px);\n}\n68% {\n transform: translate(55px);\n}\n69% {\n transform: translate(57px);\n}\n76% {\n transform: translate(60px);\n}\n81% {\n transform: translate(61px);\n}\n83%, 100% {\n transform: translate(62px);\n}\n}\n@keyframes circleTwoKeyframe {\n4% {\n transform: translate(0);\n}\n6% {\n transform: translate(-1px);\n}\n8% {\n transform: translate(-2px);\n}\n9% {\n transform: translate(-5px);\n}\n11% {\n transform: translate(-7px);\n}\n13% {\n transform: translate(-12px);\n}\n14% {\n transform: translate(-17px);\n}\n16% {\n transform: translate(-19px);\n}\n18% {\n transform: translate(-22px);\n}\n19% {\n transform: translate(-25px);\n}\n21% {\n transform: translate(-26px);\n}\n23% {\n transform: translate(-27px);\n}\n24% {\n transform: translate(-28px);\n}\n26% {\n transform: translate(-29px);\n}\n29% {\n transform: translate(-30px);\n}\n33%, 89% {\n transform: translate(-31px);\n}\n91% {\n transform: translate(-31px, 1px);\n}\n94% {\n transform: translate(-31px, 2px);\n}\n98% {\n transform: translate(-31px, 3px);\n}\n99% {\n transform: translate(-31px, 4px);\n}\n100% {\n transform: translate(-31px, 5px);\n}\n}\n@keyframes circleThreeKeyframe {\n39% {\n transform: translate(0);\n}\n44% {\n transform: translate(0, 1px);\n}\n46% {\n transform: translate(0, 2px);\n}\n48% {\n transform: translate(0, 3px);\n}\n49% {\n transform: translate(0, 4px);\n}\n51% {\n transform: translate(0, 5px);\n}\n53% {\n transform: translate(-1px, -6px);\n}\n54% {\n transform: translate(-2px, -13px);\n}\n56% {\n transform: translate(-3px, -15px);\n}\n58% {\n transform: translate(-5px, -19px);\n}\n59% {\n transform: translate(-7px, -21px);\n}\n61% {\n transform: translate(-8px, -22px);\n}\n63% {\n transform: translate(-9px, -24px);\n}\n64% {\n transform: translate(-11px, -25px);\n}\n66% {\n transform: translate(-12px, -26px);\n}\n74% {\n transform: translate(-19px, -26px);\n}\n76% {\n transform: translate(-20px, -25px);\n}\n78% {\n transform: translate(-22px, -24px);\n}\n81% {\n transform: translate(-24px, -21px);\n}\n83% {\n transform: translate(-26px, -19px);\n}\n84% {\n transform: translate(-28px, -15px);\n}\n86% {\n transform: translate(-29px, -13px);\n}\n88% {\n transform: translate(-30px, -6px);\n}\n89% {\n transform: translate(-31px, 5px);\n}\n91% {\n transform: translate(-31px, 4px);\n}\n93% {\n transform: translate(-31px, 3px);\n}\n94% {\n transform: translate(-31px, 2px);\n}\n98% {\n transform: translate(-31px, 1px);\n}\n100% {\n transform: translate(-31px);\n}\n}",map:void 0,media:void 0})}),c,void 0,!1,void 0,!1,s,void 0,void 0),d={name:"VsInlineLoader",props:{color:{type:String,default:"#1f73b7"},size:{type:[Number,String],default:10},center:{type:Boolean}}},x=function(){var n=this.$createElement,t=this._self._c||n;return t("div",{class:["vs-inline",{"vs-loader--center":this.center}]},[t("svg",{attrs:{color:this.color,viewBox:"0 0 16 4",width:4*this.size}},[t("circle",{staticClass:"vs-inline--circle",attrs:{cx:"14",fill:"currentColor",cy:"2",r:"2"}}),this._v(" "),t("circle",{staticClass:"vs-inline--circle",attrs:{cx:"8",fill:"currentColor",cy:"2",r:"2"}}),this._v(" "),t("circle",{staticClass:"vs-inline--circle",attrs:{cx:"2",fill:"currentColor",cy:"2",r:"2"}})])])};x._withStripped=!0;var v={name:"VsLoader",components:{Pulse:p,Dots:f,Inline:e({render:x,staticRenderFns:[]},(function(n){n&&n("data-v-04cfa009_0",{source:".vs-inline.vs-loader--center {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.vs-inline .vs-inline--circle {\n opacity: 0.2;\n}\n.vs-inline .vs-inline--circle:nth-child(1) {\n animation: pulseAnimation 1s infinite;\n animation-delay: 0.4s;\n}\n.vs-inline .vs-inline--circle:nth-child(2) {\n animation: pulseAnimation 1s infinite;\n animation-delay: 0.2s;\n}\n.vs-inline .vs-inline--circle:nth-child(3) {\n animation: pulseAnimation 1s infinite;\n}\n@keyframes pulseAnimation {\n0%, 100% {\n opacity: 0.2;\n}\n50% {\n opacity: 0.8;\n}\n}",map:void 0,media:void 0})}),d,void 0,!1,void 0,!1,s,void 0,void 0)},props:{variant:{type:String,default:"Pulse"},color:{type:String},size:{type:[Number,String]},margin:{type:String},center:{type:Boolean}}},u=function(){var n=this.$createElement;return(this._self._c||n)(this.variant,this._b({tag:"component"},"component",this.$props,!1))};u._withStripped=!0;var y=e({render:u,staticRenderFns:[]},void 0,v,void 0,!1,void 0,!1,void 0,void 0,void 0);function h(n){h.installed||(h.installed=!0,n.component("VsLoader",y))}var g={install:h},_=null;return"undefined"!=typeof window?_=window.Vue:"undefined"!=typeof global&&(_=global.Vue),_&&_.use(g),n.default=y,n.install=h,n}({});
package/dist/vs-loader.umd.js CHANGED
@@ -22,8 +22,8 @@
22
22
  default: '#1f73b7',
23
23
  },
24
24
  size: {
25
- type: String,
26
- default: '10px',
25
+ type: [Number, String],
26
+ default: 10,
27
27
  },
28
28
  margin: {
29
29
  type: String,
@@ -42,8 +42,8 @@
42
42
  return {
43
43
  spinnerStyle: {
44
44
  backgroundColor: this.color,
45
- width: this.size,
46
- height: this.size,
45
+ width: this.size + 'px',
46
+ height: this.size + 'px',
47
47
  margin: this.margin,
48
48
  borderRadius: this.radius,
49
49
  display: 'inline-block',
@@ -220,7 +220,7 @@
220
220
  /* style */
221
221
  var __vue_inject_styles__ = function (inject) {
222
222
  if (!inject) { return }
223
- inject("data-v-27cb6ac2_0", { source: ".vs-pulse {\n display: flex;\n}\n.vs-pulse.vs-loader--center {\n align-items: center;\n justify-content: center;\n}\n@-webkit-keyframes v-pulseStretchDelay {\n0%, 80% {\n -webkit-transform: scale(1);\n transform: scale(1);\n -webkit-opacity: 1;\n opacity: 1;\n}\n45% {\n -webkit-transform: scale(0.1);\n transform: scale(0.1);\n -webkit-opacity: 0.7;\n opacity: 0.7;\n}\n}\n@keyframes v-pulseStretchDelay {\n0%, 80% {\n -webkit-transform: scale(1);\n transform: scale(1);\n -webkit-opacity: 1;\n opacity: 1;\n}\n45% {\n -webkit-transform: scale(0.1);\n transform: scale(0.1);\n -webkit-opacity: 0.7;\n opacity: 0.7;\n}\n}", map: undefined, media: undefined });
223
+ inject("data-v-715abaa0_0", { source: ".vs-pulse {\n display: flex;\n}\n.vs-pulse.vs-loader--center {\n align-items: center;\n justify-content: center;\n}\n@-webkit-keyframes v-pulseStretchDelay {\n0%, 80% {\n -webkit-transform: scale(1);\n transform: scale(1);\n -webkit-opacity: 1;\n opacity: 1;\n}\n45% {\n -webkit-transform: scale(0.1);\n transform: scale(0.1);\n -webkit-opacity: 0.7;\n opacity: 0.7;\n}\n}\n@keyframes v-pulseStretchDelay {\n0%, 80% {\n -webkit-transform: scale(1);\n transform: scale(1);\n -webkit-opacity: 1;\n opacity: 1;\n}\n45% {\n -webkit-transform: scale(0.1);\n transform: scale(0.1);\n -webkit-opacity: 0.7;\n opacity: 0.7;\n}\n}", map: undefined, media: undefined });
224
224
 
225
225
  };
226
226
  /* scoped */
@@ -277,8 +277,8 @@
277
277
  default: '#1f73b7',
278
278
  },
279
279
  size: {
280
- type: String,
281
- default: '10px',
280
+ type: [Number, String],
281
+ default: 10,
282
282
  },
283
283
  center: {
284
284
  type: Boolean,
@@ -338,7 +338,7 @@
338
338
  /* style */
339
339
  var __vue_inject_styles__$1 = function (inject) {
340
340
  if (!inject) { return }
341
- inject("data-v-5706d53e_0", { source: ".vs-dots.vs-loader--center {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.vs-dots svg {\n width: 4.5em;\n margin: 3px;\n}\n.vs-dots .circle-one {\n animation: 1250ms ease-in-out 0s infinite normal none running circleOneKeyframe;\n}\n.vs-dots .circle-two {\n animation: 1250ms ease-in-out 0s infinite normal none running circleTwoKeyframe;\n}\n.vs-dots .circle-three {\n animation: 1250ms ease-in-out 0s infinite normal none running circleThreeKeyframe;\n}\n@keyframes circleOneKeyframe {\n0% {\n transform: translate(0, 5px);\n}\n3% {\n transform: translate(1px, -5px);\n}\n6% {\n transform: translate(3px, -15px);\n}\n8% {\n transform: translate(5px, -18px);\n}\n9% {\n transform: translate(7px, -21px);\n}\n11% {\n transform: translate(8px, -22px);\n}\n13% {\n transform: translate(9px, -23px);\n}\n16% {\n transform: translate(12px, -25px);\n}\n18% {\n transform: translate(13px, -26px);\n}\n23% {\n transform: translate(18px, -26px);\n}\n24% {\n transform: translate(19px, -25px);\n}\n28% {\n transform: translate(22px, -23px);\n}\n31% {\n transform: translate(24px, -21px);\n}\n33% {\n transform: translate(26px, -18px);\n}\n34% {\n transform: translate(28px, -14px);\n}\n36% {\n transform: translate(29px, -12px);\n}\n38% {\n transform: translate(30px, -5px);\n}\n39% {\n transform: translate(31px, 5px);\n}\n54% {\n transform: translate(31px, 3px);\n}\n59% {\n transform: translate(33px);\n}\n61% {\n transform: translate(43px);\n}\n63% {\n transform: translate(48px);\n}\n64% {\n transform: translate(51px);\n}\n66% {\n transform: translate(53px);\n}\n68% {\n transform: translate(55px);\n}\n69% {\n transform: translate(57px);\n}\n76% {\n transform: translate(60px);\n}\n81% {\n transform: translate(61px);\n}\n83%, 100% {\n transform: translate(62px);\n}\n}\n@keyframes circleTwoKeyframe {\n4% {\n transform: translate(0);\n}\n6% {\n transform: translate(-1px);\n}\n8% {\n transform: translate(-2px);\n}\n9% {\n transform: translate(-5px);\n}\n11% {\n transform: translate(-7px);\n}\n13% {\n transform: translate(-12px);\n}\n14% {\n transform: translate(-17px);\n}\n16% {\n transform: translate(-19px);\n}\n18% {\n transform: translate(-22px);\n}\n19% {\n transform: translate(-25px);\n}\n21% {\n transform: translate(-26px);\n}\n23% {\n transform: translate(-27px);\n}\n24% {\n transform: translate(-28px);\n}\n26% {\n transform: translate(-29px);\n}\n29% {\n transform: translate(-30px);\n}\n33%, 89% {\n transform: translate(-31px);\n}\n91% {\n transform: translate(-31px, 1px);\n}\n94% {\n transform: translate(-31px, 2px);\n}\n98% {\n transform: translate(-31px, 3px);\n}\n99% {\n transform: translate(-31px, 4px);\n}\n100% {\n transform: translate(-31px, 5px);\n}\n}\n@keyframes circleThreeKeyframe {\n39% {\n transform: translate(0);\n}\n44% {\n transform: translate(0, 1px);\n}\n46% {\n transform: translate(0, 2px);\n}\n48% {\n transform: translate(0, 3px);\n}\n49% {\n transform: translate(0, 4px);\n}\n51% {\n transform: translate(0, 5px);\n}\n53% {\n transform: translate(-1px, -6px);\n}\n54% {\n transform: translate(-2px, -13px);\n}\n56% {\n transform: translate(-3px, -15px);\n}\n58% {\n transform: translate(-5px, -19px);\n}\n59% {\n transform: translate(-7px, -21px);\n}\n61% {\n transform: translate(-8px, -22px);\n}\n63% {\n transform: translate(-9px, -24px);\n}\n64% {\n transform: translate(-11px, -25px);\n}\n66% {\n transform: translate(-12px, -26px);\n}\n74% {\n transform: translate(-19px, -26px);\n}\n76% {\n transform: translate(-20px, -25px);\n}\n78% {\n transform: translate(-22px, -24px);\n}\n81% {\n transform: translate(-24px, -21px);\n}\n83% {\n transform: translate(-26px, -19px);\n}\n84% {\n transform: translate(-28px, -15px);\n}\n86% {\n transform: translate(-29px, -13px);\n}\n88% {\n transform: translate(-30px, -6px);\n}\n89% {\n transform: translate(-31px, 5px);\n}\n91% {\n transform: translate(-31px, 4px);\n}\n93% {\n transform: translate(-31px, 3px);\n}\n94% {\n transform: translate(-31px, 2px);\n}\n98% {\n transform: translate(-31px, 1px);\n}\n100% {\n transform: translate(-31px);\n}\n}", map: undefined, media: undefined });
341
+ inject("data-v-de7d5a7e_0", { source: ".vs-dots.vs-loader--center {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.vs-dots svg {\n width: 4.5em;\n margin: 3px;\n}\n.vs-dots .circle-one {\n animation: 1250ms ease-in-out 0s infinite normal none running circleOneKeyframe;\n}\n.vs-dots .circle-two {\n animation: 1250ms ease-in-out 0s infinite normal none running circleTwoKeyframe;\n}\n.vs-dots .circle-three {\n animation: 1250ms ease-in-out 0s infinite normal none running circleThreeKeyframe;\n}\n@keyframes circleOneKeyframe {\n0% {\n transform: translate(0, 5px);\n}\n3% {\n transform: translate(1px, -5px);\n}\n6% {\n transform: translate(3px, -15px);\n}\n8% {\n transform: translate(5px, -18px);\n}\n9% {\n transform: translate(7px, -21px);\n}\n11% {\n transform: translate(8px, -22px);\n}\n13% {\n transform: translate(9px, -23px);\n}\n16% {\n transform: translate(12px, -25px);\n}\n18% {\n transform: translate(13px, -26px);\n}\n23% {\n transform: translate(18px, -26px);\n}\n24% {\n transform: translate(19px, -25px);\n}\n28% {\n transform: translate(22px, -23px);\n}\n31% {\n transform: translate(24px, -21px);\n}\n33% {\n transform: translate(26px, -18px);\n}\n34% {\n transform: translate(28px, -14px);\n}\n36% {\n transform: translate(29px, -12px);\n}\n38% {\n transform: translate(30px, -5px);\n}\n39% {\n transform: translate(31px, 5px);\n}\n54% {\n transform: translate(31px, 3px);\n}\n59% {\n transform: translate(33px);\n}\n61% {\n transform: translate(43px);\n}\n63% {\n transform: translate(48px);\n}\n64% {\n transform: translate(51px);\n}\n66% {\n transform: translate(53px);\n}\n68% {\n transform: translate(55px);\n}\n69% {\n transform: translate(57px);\n}\n76% {\n transform: translate(60px);\n}\n81% {\n transform: translate(61px);\n}\n83%, 100% {\n transform: translate(62px);\n}\n}\n@keyframes circleTwoKeyframe {\n4% {\n transform: translate(0);\n}\n6% {\n transform: translate(-1px);\n}\n8% {\n transform: translate(-2px);\n}\n9% {\n transform: translate(-5px);\n}\n11% {\n transform: translate(-7px);\n}\n13% {\n transform: translate(-12px);\n}\n14% {\n transform: translate(-17px);\n}\n16% {\n transform: translate(-19px);\n}\n18% {\n transform: translate(-22px);\n}\n19% {\n transform: translate(-25px);\n}\n21% {\n transform: translate(-26px);\n}\n23% {\n transform: translate(-27px);\n}\n24% {\n transform: translate(-28px);\n}\n26% {\n transform: translate(-29px);\n}\n29% {\n transform: translate(-30px);\n}\n33%, 89% {\n transform: translate(-31px);\n}\n91% {\n transform: translate(-31px, 1px);\n}\n94% {\n transform: translate(-31px, 2px);\n}\n98% {\n transform: translate(-31px, 3px);\n}\n99% {\n transform: translate(-31px, 4px);\n}\n100% {\n transform: translate(-31px, 5px);\n}\n}\n@keyframes circleThreeKeyframe {\n39% {\n transform: translate(0);\n}\n44% {\n transform: translate(0, 1px);\n}\n46% {\n transform: translate(0, 2px);\n}\n48% {\n transform: translate(0, 3px);\n}\n49% {\n transform: translate(0, 4px);\n}\n51% {\n transform: translate(0, 5px);\n}\n53% {\n transform: translate(-1px, -6px);\n}\n54% {\n transform: translate(-2px, -13px);\n}\n56% {\n transform: translate(-3px, -15px);\n}\n58% {\n transform: translate(-5px, -19px);\n}\n59% {\n transform: translate(-7px, -21px);\n}\n61% {\n transform: translate(-8px, -22px);\n}\n63% {\n transform: translate(-9px, -24px);\n}\n64% {\n transform: translate(-11px, -25px);\n}\n66% {\n transform: translate(-12px, -26px);\n}\n74% {\n transform: translate(-19px, -26px);\n}\n76% {\n transform: translate(-20px, -25px);\n}\n78% {\n transform: translate(-22px, -24px);\n}\n81% {\n transform: translate(-24px, -21px);\n}\n83% {\n transform: translate(-26px, -19px);\n}\n84% {\n transform: translate(-28px, -15px);\n}\n86% {\n transform: translate(-29px, -13px);\n}\n88% {\n transform: translate(-30px, -6px);\n}\n89% {\n transform: translate(-31px, 5px);\n}\n91% {\n transform: translate(-31px, 4px);\n}\n93% {\n transform: translate(-31px, 3px);\n}\n94% {\n transform: translate(-31px, 2px);\n}\n98% {\n transform: translate(-31px, 1px);\n}\n100% {\n transform: translate(-31px);\n}\n}", map: undefined, media: undefined });
342
342
 
343
343
  };
344
344
  /* scoped */
@@ -367,13 +367,114 @@
367
367
  );
368
368
 
369
369
  //
370
+ //
371
+ //
372
+ //
373
+ //
374
+ //
375
+ //
376
+ //
377
+ //
378
+ //
370
379
 
371
380
  var script$2 = {
381
+ name: 'VsInlineLoader',
382
+
383
+ props: {
384
+ color: {
385
+ type: String,
386
+ default: '#1f73b7',
387
+ },
388
+ size: {
389
+ type: [Number, String],
390
+ default: 10,
391
+ },
392
+ center: {
393
+ type: Boolean,
394
+ },
395
+ },
396
+ };
397
+
398
+ /* script */
399
+ var __vue_script__$2 = script$2;
400
+
401
+ /* template */
402
+ var __vue_render__$2 = function() {
403
+ var _vm = this;
404
+ var _h = _vm.$createElement;
405
+ var _c = _vm._self._c || _h;
406
+ return _c(
407
+ "div",
408
+ { class: ["vs-inline", { "vs-loader--center": _vm.center }] },
409
+ [
410
+ _c(
411
+ "svg",
412
+ {
413
+ attrs: { color: _vm.color, viewBox: "0 0 16 4", width: _vm.size * 4 }
414
+ },
415
+ [
416
+ _c("circle", {
417
+ staticClass: "vs-inline--circle",
418
+ attrs: { cx: "14", fill: "currentColor", cy: "2", r: "2" }
419
+ }),
420
+ _vm._v(" "),
421
+ _c("circle", {
422
+ staticClass: "vs-inline--circle",
423
+ attrs: { cx: "8", fill: "currentColor", cy: "2", r: "2" }
424
+ }),
425
+ _vm._v(" "),
426
+ _c("circle", {
427
+ staticClass: "vs-inline--circle",
428
+ attrs: { cx: "2", fill: "currentColor", cy: "2", r: "2" }
429
+ })
430
+ ]
431
+ )
432
+ ]
433
+ )
434
+ };
435
+ var __vue_staticRenderFns__$2 = [];
436
+ __vue_render__$2._withStripped = true;
437
+
438
+ /* style */
439
+ var __vue_inject_styles__$2 = function (inject) {
440
+ if (!inject) { return }
441
+ inject("data-v-04cfa009_0", { source: ".vs-inline.vs-loader--center {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.vs-inline .vs-inline--circle {\n opacity: 0.2;\n}\n.vs-inline .vs-inline--circle:nth-child(1) {\n animation: pulseAnimation 1s infinite;\n animation-delay: 0.4s;\n}\n.vs-inline .vs-inline--circle:nth-child(2) {\n animation: pulseAnimation 1s infinite;\n animation-delay: 0.2s;\n}\n.vs-inline .vs-inline--circle:nth-child(3) {\n animation: pulseAnimation 1s infinite;\n}\n@keyframes pulseAnimation {\n0%, 100% {\n opacity: 0.2;\n}\n50% {\n opacity: 0.8;\n}\n}", map: undefined, media: undefined });
442
+
443
+ };
444
+ /* scoped */
445
+ var __vue_scope_id__$2 = undefined;
446
+ /* module identifier */
447
+ var __vue_module_identifier__$2 = undefined;
448
+ /* functional template */
449
+ var __vue_is_functional_template__$2 = false;
450
+ /* style inject SSR */
451
+
452
+ /* style inject shadow dom */
453
+
454
+
455
+
456
+ var __vue_component__$2 = /*#__PURE__*/normalizeComponent(
457
+ { render: __vue_render__$2, staticRenderFns: __vue_staticRenderFns__$2 },
458
+ __vue_inject_styles__$2,
459
+ __vue_script__$2,
460
+ __vue_scope_id__$2,
461
+ __vue_is_functional_template__$2,
462
+ __vue_module_identifier__$2,
463
+ false,
464
+ createInjector,
465
+ undefined,
466
+ undefined
467
+ );
468
+
469
+ //
470
+
471
+ var script$3 = {
372
472
  name: 'VsLoader',
373
473
 
374
474
  components: {
375
475
  Pulse: __vue_component__,
376
476
  Dots: __vue_component__$1,
477
+ Inline: __vue_component__$2,
377
478
  },
378
479
 
379
480
  props: {
@@ -385,7 +486,7 @@
385
486
  type: String,
386
487
  },
387
488
  size: {
388
- type: String,
489
+ type: [Number, String],
389
490
  },
390
491
  margin: {
391
492
  type: String,
@@ -397,34 +498,29 @@
397
498
  };
398
499
 
399
500
  /* script */
400
- var __vue_script__$2 = script$2;
501
+ var __vue_script__$3 = script$3;
401
502
 
402
503
  /* template */
403
- var __vue_render__$2 = function() {
504
+ var __vue_render__$3 = function() {
404
505
  var _vm = this;
405
506
  var _h = _vm.$createElement;
406
507
  var _c = _vm._self._c || _h;
407
- return _c(_vm.variant, {
408
- tag: "component",
409
- attrs: {
410
- color: _vm.color,
411
- size: _vm.size,
412
- margin: _vm.margin,
413
- center: _vm.center
414
- }
415
- })
508
+ return _c(
509
+ _vm.variant,
510
+ _vm._b({ tag: "component" }, "component", _vm.$props, false)
511
+ )
416
512
  };
417
- var __vue_staticRenderFns__$2 = [];
418
- __vue_render__$2._withStripped = true;
513
+ var __vue_staticRenderFns__$3 = [];
514
+ __vue_render__$3._withStripped = true;
419
515
 
420
516
  /* style */
421
- var __vue_inject_styles__$2 = undefined;
517
+ var __vue_inject_styles__$3 = undefined;
422
518
  /* scoped */
423
- var __vue_scope_id__$2 = undefined;
519
+ var __vue_scope_id__$3 = undefined;
424
520
  /* module identifier */
425
- var __vue_module_identifier__$2 = undefined;
521
+ var __vue_module_identifier__$3 = undefined;
426
522
  /* functional template */
427
- var __vue_is_functional_template__$2 = false;
523
+ var __vue_is_functional_template__$3 = false;
428
524
  /* style inject */
429
525
 
430
526
  /* style inject SSR */
@@ -433,13 +529,13 @@
433
529
 
434
530
 
435
531
 
436
- var __vue_component__$2 = /*#__PURE__*/normalizeComponent(
437
- { render: __vue_render__$2, staticRenderFns: __vue_staticRenderFns__$2 },
438
- __vue_inject_styles__$2,
439
- __vue_script__$2,
440
- __vue_scope_id__$2,
441
- __vue_is_functional_template__$2,
442
- __vue_module_identifier__$2,
532
+ var __vue_component__$3 = /*#__PURE__*/normalizeComponent(
533
+ { render: __vue_render__$3, staticRenderFns: __vue_staticRenderFns__$3 },
534
+ __vue_inject_styles__$3,
535
+ __vue_script__$3,
536
+ __vue_scope_id__$3,
537
+ __vue_is_functional_template__$3,
538
+ __vue_module_identifier__$3,
443
539
  false,
444
540
  undefined,
445
541
  undefined,
@@ -452,7 +548,7 @@
452
548
  function install(Vue) {
453
549
  if (install.installed) { return; }
454
550
  install.installed = true;
455
- Vue.component('VsLoader', __vue_component__$2);
551
+ Vue.component('VsLoader', __vue_component__$3);
456
552
  }
457
553
 
458
554
  // Create module definition for Vue.use()
@@ -471,7 +567,7 @@
471
567
  GlobalVue.use(plugin);
472
568
  }
473
569
 
474
- exports.default = __vue_component__$2;
570
+ exports.default = __vue_component__$3;
475
571
  exports.install = install;
476
572
 
477
573
  Object.defineProperty(exports, '__esModule', { value: true });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vuesimple/vs-loader",
3
- "version": "1.3.39",
3
+ "version": "1.4.1",
4
4
  "description": "A simple vue loader. Perfect for all your loader scenarios.",
5
5
  "main": "dist/vs-loader.umd.js",
6
6
  "module": "dist/vs-loader.esm.js",
@@ -15,10 +15,10 @@
15
15
  "build:unpkg": "rollup --config build/rollup.config.js --format iife --file dist/vs-loader.min.js"
16
16
  },
17
17
  "devDependencies": {
18
+ "@rollup/plugin-buble": "0.21.3",
18
19
  "@rollup/plugin-image": "2.0.5",
19
- "minimist": "1.2.0",
20
+ "minimist": "1.2.5",
20
21
  "rollup": "1.32.0",
21
- "rollup-plugin-buble": "0.19.8",
22
22
  "rollup-plugin-terser": "6.1.0",
23
23
  "rollup-plugin-vue": "5.1.9",
24
24
  "vue": "2.6.10",
@@ -52,5 +52,5 @@
52
52
  "url": "https://github.com/ashwinkshenoy/vue-simple/issues"
53
53
  },
54
54
  "homepage": "https://github.com/ashwinkshenoy/vue-simple/tree/master/packages/vs-loader",
55
- "gitHead": "9c5fdc68803a938a74d3987f658e02ded5eea18d"
55
+ "gitHead": "4a6fbd8716221364e5fc2710645a6c5882746929"
56
56
  }
package/src/vs-dots.vue CHANGED
@@ -27,8 +27,8 @@
27
27
  default: '#1f73b7',
28
28
  },
29
29
  size: {
30
- type: String,
31
- default: '10px',
30
+ type: [Number, String],
31
+ default: 10,
32
32
  },
33
33
  center: {
34
34
  type: Boolean,
package/src/vs-inline.vue ADDED
@@ -0,0 +1,64 @@
1
+ <template>
2
+ <div :class="['vs-inline', { 'vs-loader--center': center }]">
3
+ <svg :color="color" viewBox="0 0 16 4" :width="size * 4">
4
+ <circle cx="14" fill="currentColor" cy="2" r="2" class="vs-inline--circle"></circle>
5
+ <circle cx="8" fill="currentColor" cy="2" r="2" class="vs-inline--circle"></circle>
6
+ <circle cx="2" fill="currentColor" cy="2" r="2" class="vs-inline--circle"></circle>
7
+ </svg>
8
+ </div>
9
+ </template>
10
+
11
+ <script>
12
+ export default {
13
+ name: 'VsInlineLoader',
14
+
15
+ props: {
16
+ color: {
17
+ type: String,
18
+ default: '#1f73b7',
19
+ },
20
+ size: {
21
+ type: [Number, String],
22
+ default: 10,
23
+ },
24
+ center: {
25
+ type: Boolean,
26
+ },
27
+ },
28
+ };
29
+ </script>
30
+
31
+ <style lang="scss">
32
+ .vs-inline {
33
+ &.vs-loader--center {
34
+ display: flex;
35
+ align-items: center;
36
+ justify-content: center;
37
+ }
38
+
39
+ .vs-inline--circle {
40
+ opacity: 0.2;
41
+ &:nth-child(1) {
42
+ animation: pulseAnimation 1s infinite;
43
+ animation-delay: 0.4s;
44
+ }
45
+ &:nth-child(2) {
46
+ animation: pulseAnimation 1s infinite;
47
+ animation-delay: 0.2s;
48
+ }
49
+ &:nth-child(3) {
50
+ animation: pulseAnimation 1s infinite;
51
+ }
52
+ }
53
+
54
+ @keyframes pulseAnimation {
55
+ 0%,
56
+ 100% {
57
+ opacity: 0.2;
58
+ }
59
+ 50% {
60
+ opacity: 0.8;
61
+ }
62
+ }
63
+ }
64
+ </style>
package/src/vs-loader.vue CHANGED
@@ -1,10 +1,11 @@
1
1
  <template>
2
- <component :is="variant" :color="color" :size="size" :margin="margin" :center="center"></component>
2
+ <component :is="variant" v-bind="$props"></component>
3
3
  </template>
4
4
 
5
5
  <script>
6
6
  import Pulse from './vs-pulse.vue';
7
7
  import Dots from './vs-dots.vue';
8
+ import Inline from './vs-inline.vue';
8
9
 
9
10
  export default {
10
11
  name: 'VsLoader',
@@ -12,6 +13,7 @@
12
13
  components: {
13
14
  Pulse,
14
15
  Dots,
16
+ Inline,
15
17
  },
16
18
 
17
19
  props: {
@@ -23,7 +25,7 @@
23
25
  type: String,
24
26
  },
25
27
  size: {
26
- type: String,
28
+ type: [Number, String],
27
29
  },
28
30
  margin: {
29
31
  type: String,
package/src/vs-pulse.vue CHANGED
@@ -16,8 +16,8 @@
16
16
  default: '#1f73b7',
17
17
  },
18
18
  size: {
19
- type: String,
20
- default: '10px',
19
+ type: [Number, String],
20
+ default: 10,
21
21
  },
22
22
  margin: {
23
23
  type: String,
@@ -36,8 +36,8 @@
36
36
  return {
37
37
  spinnerStyle: {
38
38
  backgroundColor: this.color,
39
- width: this.size,
40
- height: this.size,
39
+ width: this.size + 'px',
40
+ height: this.size + 'px',
41
41
  margin: this.margin,
42
42
  borderRadius: this.radius,
43
43
  display: 'inline-block',
package/tests/vs-loader.spec.js CHANGED
@@ -7,13 +7,13 @@ describe('VsLoader', () => {
7
7
  propsData: {
8
8
  variant: 'Pulse',
9
9
  color: '#1f73b7',
10
- size: '10px',
10
+ size: 10,
11
11
  },
12
12
  });
13
13
  expect(wrapper.vm.$options.name).toMatch('VsLoader');
14
14
  expect(wrapper.classes()).toContain('vs-pulse');
15
15
  expect(wrapper.props().color).toBe('#1f73b7');
16
- expect(wrapper.vm.$props.size).toBe('10px');
16
+ expect(wrapper.vm.$props.size).toBe(10);
17
17
  });
18
18
 
19
19
  it('Check pulse loader has center aligned class', () => {
@@ -21,7 +21,7 @@ describe('VsLoader', () => {
21
21
  propsData: {
22
22
  variant: 'Pulse',
23
23
  color: '#1f73b7',
24
- size: '10px',
24
+ size: 10,
25
25
  center: true,
26
26
  },
27
27
  });
@@ -29,7 +29,7 @@ describe('VsLoader', () => {
29
29
  expect(wrapper.classes()).toContain('vs-pulse');
30
30
  expect(wrapper.classes()).toContain('vs-loader--center');
31
31
  expect(wrapper.props().color).toBe('#1f73b7');
32
- expect(wrapper.vm.$props.size).toBe('10px');
32
+ expect(wrapper.vm.$props.size).toBe(10);
33
33
  });
34
34
 
35
35
  it('Check dots loader', () => {
@@ -37,17 +37,17 @@ describe('VsLoader', () => {
37
37
  propsData: {
38
38
  variant: 'dots',
39
39
  color: 'brown',
40
- size: '30px',
40
+ size: 30,
41
41
  },
42
42
  });
43
43
  expect(wrapper.vm.$options.name).toMatch('VsLoader');
44
44
  expect(wrapper.classes()).toContain('vs-dots');
45
45
  expect(wrapper.props().color).toBe('brown');
46
- expect(wrapper.vm.$props.size).toBe('30px');
46
+ expect(wrapper.vm.$props.size).toBe(30);
47
47
  expect(wrapper.attributes('class')).toBe('vs-dots');
48
48
  const svg = wrapper.find('svg');
49
49
  expect(svg.exists()).toBe(true);
50
- expect(svg.attributes('font-size')).toBe('30px');
50
+ expect(svg.attributes('font-size')).toBe('30');
51
51
  expect(svg.attributes('color')).toBe('brown');
52
52
  });
53
53
  });