npm - @vuesimple/vs-loader - Versions diffs - 1.4.18 → 3.0.0 - Mend

@vuesimple/vs-loader 1.4.18 → 3.0.0

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 (10) hide show

package/README.md CHANGED Viewed

@@ -29,10 +29,6 @@ Code Sandbox: [Link](https://codesandbox.io/s/vs-loader-1ue35)
 npm i @vuesimple/vs-loader
 ```
-```bash
-yarn add @vuesimple/vs-loader
-```
 <br />
 ### 🚀 Usage
@@ -61,6 +57,11 @@ yarn add @vuesimple/vs-loader
 <script src="https://unpkg.com/@vuesimple/vs-loader/dist/vs-loader.min.js"></script>
 ```
+```javascript
+// Main/Entry file
+app.use(VsLoader);
+```
 ```html
 <template>
   <vs-loader variant="pulse"></vs-loader>

package/build/vite.config.js ADDED Viewed

@@ -0,0 +1,33 @@
+import vue from '@vitejs/plugin-vue';
+import VitePluginStyleInject from 'vite-plugin-style-inject';
+export default {
+  plugins: [vue(), VitePluginStyleInject()],
+  build: {
+    // separate css file or not
+    cssCodeSplit: false,
+    lib: {
+      entry: './src/index.js',
+      formats: ['es', 'umd', 'iife'],
+      name: 'VsLoader',
+      fileName: format => {
+        if (format === 'es') {
+          return 'index.js';
+        }
+        if (format === 'umd') {
+          return 'index.umd.js';
+        }
+        return 'index.min.js';
+      },
+    },
+    rollupOptions: {
+      // Not to bundle vue core in this plugin
+      external: ['vue'],
+      output: {
+        globals: {
+          vue: 'Vue',
+        },
+      },
+    },
+  },
+};

package/dist/index.js ADDED Viewed

@@ -0,0 +1,210 @@
+(function(){ try {var elementStyle = document.createElement('style'); elementStyle.appendChild(document.createTextNode(".vs-pulse{display:flex}.vs-pulse.vs-loader--center{align-items:center;justify-content:center}@-webkit-keyframes v-pulseStretchDelay{0%,80%{-webkit-transform:scale(1);transform:scale(1);-webkit-opacity:1;opacity:1}45%{-webkit-transform:scale(.1);transform:scale(.1);-webkit-opacity:.7;opacity:.7}}@keyframes v-pulseStretchDelay{0%,80%{-webkit-transform:scale(1);transform:scale(1);-webkit-opacity:1;opacity:1}45%{-webkit-transform:scale(.1);transform:scale(.1);-webkit-opacity:.7;opacity:.7}}.vs-dots.vs-loader--center{display:flex;align-items:center;justify-content:center}.vs-dots svg{width:4.5em;margin:3px}.vs-dots .circle-one{animation:1.25s ease-in-out 0s infinite normal none running circleOneKeyframe}.vs-dots .circle-two{animation:1.25s ease-in-out 0s infinite normal none running circleTwoKeyframe}.vs-dots .circle-three{animation:1.25s ease-in-out 0s infinite normal none running circleThreeKeyframe}@keyframes circleOneKeyframe{0%{transform:translateY(5px)}3%{transform:translate(1px,-5px)}6%{transform:translate(3px,-15px)}8%{transform:translate(5px,-18px)}9%{transform:translate(7px,-21px)}11%{transform:translate(8px,-22px)}13%{transform:translate(9px,-23px)}16%{transform:translate(12px,-25px)}18%{transform:translate(13px,-26px)}23%{transform:translate(18px,-26px)}24%{transform:translate(19px,-25px)}28%{transform:translate(22px,-23px)}31%{transform:translate(24px,-21px)}33%{transform:translate(26px,-18px)}34%{transform:translate(28px,-14px)}36%{transform:translate(29px,-12px)}38%{transform:translate(30px,-5px)}39%{transform:translate(31px,5px)}54%{transform:translate(31px,3px)}59%{transform:translate(33px)}61%{transform:translate(43px)}63%{transform:translate(48px)}64%{transform:translate(51px)}66%{transform:translate(53px)}68%{transform:translate(55px)}69%{transform:translate(57px)}76%{transform:translate(60px)}81%{transform:translate(61px)}83%,to{transform:translate(62px)}}@keyframes circleTwoKeyframe{4%{transform:translate(0)}6%{transform:translate(-1px)}8%{transform:translate(-2px)}9%{transform:translate(-5px)}11%{transform:translate(-7px)}13%{transform:translate(-12px)}14%{transform:translate(-17px)}16%{transform:translate(-19px)}18%{transform:translate(-22px)}19%{transform:translate(-25px)}21%{transform:translate(-26px)}23%{transform:translate(-27px)}24%{transform:translate(-28px)}26%{transform:translate(-29px)}29%{transform:translate(-30px)}33%,89%{transform:translate(-31px)}91%{transform:translate(-31px,1px)}94%{transform:translate(-31px,2px)}98%{transform:translate(-31px,3px)}99%{transform:translate(-31px,4px)}to{transform:translate(-31px,5px)}}@keyframes circleThreeKeyframe{39%{transform:translate(0)}44%{transform:translateY(1px)}46%{transform:translateY(2px)}48%{transform:translateY(3px)}49%{transform:translateY(4px)}51%{transform:translateY(5px)}53%{transform:translate(-1px,-6px)}54%{transform:translate(-2px,-13px)}56%{transform:translate(-3px,-15px)}58%{transform:translate(-5px,-19px)}59%{transform:translate(-7px,-21px)}61%{transform:translate(-8px,-22px)}63%{transform:translate(-9px,-24px)}64%{transform:translate(-11px,-25px)}66%{transform:translate(-12px,-26px)}74%{transform:translate(-19px,-26px)}76%{transform:translate(-20px,-25px)}78%{transform:translate(-22px,-24px)}81%{transform:translate(-24px,-21px)}83%{transform:translate(-26px,-19px)}84%{transform:translate(-28px,-15px)}86%{transform:translate(-29px,-13px)}88%{transform:translate(-30px,-6px)}89%{transform:translate(-31px,5px)}91%{transform:translate(-31px,4px)}93%{transform:translate(-31px,3px)}94%{transform:translate(-31px,2px)}98%{transform:translate(-31px,1px)}to{transform:translate(-31px)}}.vs-inline.vs-loader--center{display:flex;align-items:center;justify-content:center}.vs-inline .vs-inline--circle{opacity:.2}.vs-inline .vs-inline--circle:nth-child(1){animation:pulseAnimation 1s infinite;animation-delay:.4s}.vs-inline .vs-inline--circle:nth-child(2){animation:pulseAnimation 1s infinite;animation-delay:.2s}.vs-inline .vs-inline--circle:nth-child(3){animation:pulseAnimation 1s infinite}@keyframes pulseAnimation{0%,to{opacity:.2}50%{opacity:.8}}")); document.head.appendChild(elementStyle);} catch(e) {console.error('vite-plugin-css-injected-by-js', e);} })();import { openBlock as s, createElementBlock as c, normalizeClass as u, createElementVNode as t, normalizeStyle as _, createBlock as p, resolveDynamicComponent as d, normalizeProps as y, guardReactiveProps as m } from "vue";
+const l = (r, o) => {
+  const e = r.__vccOpts || r;
+  for (const [i, n] of o)
+    e[i] = n;
+  return e;
+}, f = {
+  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() {
+    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 v(r, o, e, i, n, a) {
+  return s(), c("div", {
+    class: u(["vs-pulse", { "vs-loader--center": e.center }])
+  }, [
+    t("div", {
+      style: _([n.spinnerStyle, n.spinnerDelay1])
+    }, null, 4),
+    t("div", {
+      style: _([n.spinnerStyle, n.spinnerDelay2])
+    }, null, 4),
+    t("div", {
+      style: _([n.spinnerStyle, n.spinnerDelay3])
+    }, null, 4)
+  ], 2);
+}
+const g = /* @__PURE__ */ l(f, [["render", v]]);
+const h = {
+  name: "VsDotsLoader",
+  props: {
+    color: {
+      type: String,
+      default: "#1f73b7"
+    },
+    size: {
+      type: [Number, String],
+      default: 10
+    },
+    center: {
+      type: Boolean
+    }
+  }
+}, x = ["color", "font-size"], S = /* @__PURE__ */ t("g", { fill: "currentColor" }, [
+  /* @__PURE__ */ t("circle", {
+    cy: "36",
+    r: "9",
+    cx: "9",
+    class: "circle-one"
+  }),
+  /* @__PURE__ */ t("circle", {
+    cy: "36",
+    r: "9",
+    cx: "40",
+    class: "circle-two"
+  }),
+  /* @__PURE__ */ t("circle", {
+    cy: "36",
+    r: "9",
+    cx: "71",
+    class: "circle-three"
+  })
+], -1), b = [
+  S
+];
+function D(r, o, e, i, n, a) {
+  return s(), c("div", {
+    class: u(["vs-dots", { "vs-loader--center": e.center }])
+  }, [
+    (s(), c("svg", {
+      color: e.color,
+      "font-size": e.size,
+      xmlns: "http://www.w3.org/2000/svg",
+      focusable: "false",
+      viewBox: "0 0 80 72",
+      role: "progressbar"
+    }, b, 8, x))
+  ], 2);
+}
+const z = /* @__PURE__ */ l(h, [["render", D]]);
+const $ = {
+  name: "VsInlineLoader",
+  props: {
+    color: {
+      type: String,
+      default: "#1f73b7"
+    },
+    size: {
+      type: [Number, String],
+      default: 10
+    },
+    center: {
+      type: Boolean
+    }
+  }
+}, w = ["color", "width"], B = /* @__PURE__ */ t("circle", {
+  cx: "14",
+  fill: "currentColor",
+  cy: "2",
+  r: "2",
+  class: "vs-inline--circle"
+}, null, -1), C = /* @__PURE__ */ t("circle", {
+  cx: "8",
+  fill: "currentColor",
+  cy: "2",
+  r: "2",
+  class: "vs-inline--circle"
+}, null, -1), V = /* @__PURE__ */ t("circle", {
+  cx: "2",
+  fill: "currentColor",
+  cy: "2",
+  r: "2",
+  class: "vs-inline--circle"
+}, null, -1), k = [
+  B,
+  C,
+  V
+];
+function L(r, o, e, i, n, a) {
+  return s(), c("div", {
+    class: u(["vs-inline", { "vs-loader--center": e.center }])
+  }, [
+    (s(), c("svg", {
+      color: e.color,
+      viewBox: "0 0 16 4",
+      width: e.size * 4
+    }, k, 8, w))
+  ], 2);
+}
+const N = /* @__PURE__ */ l($, [["render", L]]), P = {
+  name: "VsLoader",
+  components: {
+    Pulse: g,
+    Dots: z,
+    Inline: N
+  },
+  props: {
+    variant: {
+      type: String,
+      default: "Pulse"
+    },
+    color: {
+      type: String
+    },
+    size: {
+      type: [Number, String]
+    },
+    margin: {
+      type: String
+    },
+    center: {
+      type: Boolean
+    }
+  }
+};
+function I(r, o, e, i, n, a) {
+  return s(), p(d(e.variant), y(m(r.$props)), null, 16);
+}
+const E = /* @__PURE__ */ l(P, [["render", I]]), R = {
+  install(r) {
+    r.component("VsLoader", E);
+  }
+};
+export {
+  R as default
+};

package/dist/index.min.js ADDED Viewed

@@ -0,0 +1 @@

package/dist/index.umd.js ADDED Viewed

@@ -0,0 +1 @@

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@vuesimple/vs-loader",
-  "version": "1.4.18",
+  "version": "3.0.0",
   "description": "A simple vue loader. Perfect for all your loader scenarios.",
   "main": "dist/vs-loader.umd.js",
   "module": "dist/vs-loader.esm.js",
@@ -9,20 +9,14 @@
     "./sfc": "src/vs-loader.vue"
   },
   "scripts": {
-    "build": "rm -rfv dist && npm run build:umd & npm run build:es & npm run build:unpkg",
-    "build:umd": "rollup --config build/rollup.config.js --format umd --file dist/vs-loader.umd.js",
-    "build:es": "rollup --config build/rollup.config.js --format es --file dist/vs-loader.esm.js",
-    "build:unpkg": "rollup --config build/rollup.config.js --format iife --file dist/vs-loader.min.js"
+    "build": "rm -rfv dist && vite build --config build/vite.config.js"
   },
   "devDependencies": {
-    "@rollup/plugin-buble": "0.21.3",
-    "@rollup/plugin-image": "2.0.5",
-    "minimist": "1.2.5",
-    "rollup": "1.32.0",
-    "rollup-plugin-terser": "6.1.0",
-    "rollup-plugin-vue": "5.1.9",
-    "vue": "2.6.10",
-    "vue-template-compiler": "2.6.10"
+    "@vitejs/plugin-vue": "^3.0.1",
+    "sass": "^1.54.4",
+    "vite": "^3.0.5",
+    "vite-plugin-style-inject": "0.0.1",
+    "vue": "^3.2.37"
   },
   "private": false,
   "repository": {
@@ -52,5 +46,5 @@
     "url": "https://github.com/ashwinkshenoy/vue-simple/issues"
   },
   "homepage": "https://github.com/ashwinkshenoy/vue-simple/tree/master/packages/vs-loader",
-  "gitHead": "d861c686610167888eb6eeaa4f8001424026a1dd"
+  "gitHead": "c666ac905df7e5b10f9198cd056cdd3fa88e212e"
 }

package/src/index.js CHANGED Viewed

@@ -1,28 +1,9 @@
-// Import vue component
 import VsLoader from './vs-loader.vue';
-// Declare install function executed by Vue.use()
-export function install(Vue) {
-  if (install.installed) return;
-  install.installed = true;
-  Vue.component('VsLoader', VsLoader);
-}
-// Create module definition for Vue.use()
 const plugin = {
-  install,
+  install(Vue) {
+    Vue.component('VsLoader', VsLoader);
+  },
 };
-// Auto-install when vue is found (eg. in browser via <script> tag)
-let GlobalVue = null;
-if (typeof window !== 'undefined') {
-  GlobalVue = window.Vue;
-} else if (typeof global !== 'undefined') {
-  GlobalVue = global.Vue;
-}
-if (GlobalVue) {
-  GlobalVue.use(plugin);
-}
-// To allow use as module (npm/webpack/etc.) export component
-export default VsLoader;
+export default plugin;