@vuesimple/vs-button 1.4.18 → 3.0.1

package/README.md

@@ -29,10 +29,6 @@ Code Sandbox: [Link](https://codesandbox.io/s/vs-button-w8x1m)
 npm i @vuesimple/vs-button
 ```
 
-```bash
-yarn add @vuesimple/vs-button
-```
-
 <br />
 
 ### 🚀 Usage
@@ -62,6 +58,11 @@ yarn add @vuesimple/vs-button
 <script src="https://unpkg.com/@vuesimple/vs-button@<version>/dist/vs-button.min.js"></script>
 ```
 
+```javascript
+// Main/Entry file
+app.use(VsButton);
+```
+
 ```html
 <template>
   <vs-button>Default</vs-button>

package/build/vite.config.js

@@ -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: 'VsButton',
+      fileName: format => {
+        if (format === 'es') {
+          return 'index.js';
+        }
+        if (format === 'umd') {
+          return 'index.umd.min.js';
+        }
+        return 'index.min.js';
+      },
+    },
+    rollupOptions: {
+      // Not to bundle vue core in this plugin
+      external: ['vue'],
+      output: {
+        globals: {
+          vue: 'Vue',
+        },
+      },
+    },
+  },
+};

package/dist/index.js

@@ -0,0 +1,163 @@
+(function(){ try {var elementStyle = document.createElement('style'); elementStyle.appendChild(document.createTextNode("@-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-button{border-radius:4px;font-weight:400;box-sizing:border-box;user-select:none;padding:0 1.07143em;display:inline-flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;transition:border-color .25s ease-in-out 0s,box-shadow .1s ease-in-out 0s,background-color .25s ease-in-out 0s,color .25s ease-in-out 0s;margin:0;cursor:pointer;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;position:relative}.vs-button .vs-loader{display:flex;align-items:center;justify-content:center}.vs-button.vs-button--small{height:32px;line-height:30px;font-size:12px}.vs-button.vs-button--medium{height:40px;line-height:38px;font-size:14px}.vs-button.vs-button--large{height:48px;line-height:46px;font-size:14px}.vs-button.vs-button--round{border-radius:50px}.vs-button.vs-button__primary,.vs-button.vs-button__primary:hover,.vs-button.vs-button__primary:focus{background:transparent;color:#1f73b7;border:solid 1px #1f73b7}.vs-button.vs-button__primary:hover,.vs-button.vs-button__primary:hover:hover,.vs-button.vs-button__primary:focus:hover{border-color:#18588b;background:#f2f8fd;color:#18588b}.vs-button.vs-button__primary:active,.vs-button.vs-button__primary:hover:active,.vs-button.vs-button__primary:focus:active{border-color:#103c60;background:#dcecf9;color:#103c60}.vs-button.vs-button__primary:focus-visible,.vs-button.vs-button__primary:hover:focus-visible,.vs-button.vs-button__primary:focus:focus-visible{border-color:#18588b;box-shadow:0 0 0 .2rem #85bdea;outline:0}.vs-button.vs-button__primary:disabled,.vs-button.vs-button__primary.vs-button--loading,.vs-button.vs-button__primary:hover:disabled,.vs-button.vs-button__primary:hover.vs-button--loading,.vs-button.vs-button__primary:focus:disabled,.vs-button.vs-button__primary:focus.vs-button--loading{background:#e9ebed;border-color:transparent;color:#c2c8cc;cursor:no-drop}.vs-button.vs-button__primary-fill,.vs-button.vs-button__primary-fill:focus{background:#1f73b7;color:#fff;border:solid 1px #1f73b7}.vs-button.vs-button__primary-fill:hover,.vs-button.vs-button__primary-fill:focus:hover{border-color:#18588b;background:#18588b}.vs-button.vs-button__primary-fill:active,.vs-button.vs-button__primary-fill:focus:active{border-color:#103c60;background:#144a76}.vs-button.vs-button__primary-fill:focus-visible,.vs-button.vs-button__primary-fill:focus:focus-visible{border-color:#18588b;box-shadow:0 0 0 .2rem #85bdea;outline:0}.vs-button.vs-button__primary-fill:disabled,.vs-button.vs-button__primary-fill.vs-button--loading,.vs-button.vs-button__primary-fill:focus:disabled,.vs-button.vs-button__primary-fill:focus.vs-button--loading{background:#e9ebed;border-color:transparent;color:#c2c8cc;cursor:no-drop}.vs-button.vs-button__success,.vs-button.vs-button__success:hover,.vs-button.vs-button__success:focus{background:transparent;color:#28a745;border:solid 1px #28a745}.vs-button.vs-button__success:hover,.vs-button.vs-button__success:hover:hover,.vs-button.vs-button__success:focus:hover{border-color:#1e7e34;background:#edfbf0;color:#1e7e34}.vs-button.vs-button__success:active,.vs-button.vs-button__success:hover:active,.vs-button.vs-button__success:focus:active{border-color:#145523;background:#d8f6df;color:#145523}.vs-button.vs-button__success:focus-visible,.vs-button.vs-button__success:hover:focus-visible,.vs-button.vs-button__success:focus:focus-visible{border-color:#1e7e34;box-shadow:0 0 0 .2rem #86e29b;outline:0}.vs-button.vs-button__success:disabled,.vs-button.vs-button__success.vs-button--loading,.vs-button.vs-button__success:hover:disabled,.vs-button.vs-button__success:hover.vs-button--loading,.vs-button.vs-button__success:focus:disabled,.vs-button.vs-button__success:focus.vs-button--loading{background:#e9ebed;border-color:transparent;color:#c2c8cc;cursor:no-drop}.vs-button.vs-button__success-fill,.vs-button.vs-button__success-fill:focus{background:#28a745;color:#fff;border:solid 1px #28a745}.vs-button.vs-button__success-fill:hover,.vs-button.vs-button__success-fill:focus:hover{border-color:#1e7e34;background:#1e7e34}.vs-button.vs-button__success-fill:active,.vs-button.vs-button__success-fill:focus:active{border-color:#145523;background:#19692c}.vs-button.vs-button__success-fill:focus-visible,.vs-button.vs-button__success-fill:focus:focus-visible{border-color:#1e7e34;box-shadow:0 0 0 .2rem #86e29b;outline:0}.vs-button.vs-button__success-fill:disabled,.vs-button.vs-button__success-fill.vs-button--loading,.vs-button.vs-button__success-fill:focus:disabled,.vs-button.vs-button__success-fill:focus.vs-button--loading{background:#e9ebed;border-color:transparent;color:#c2c8cc;cursor:no-drop}.vs-button.vs-button__danger,.vs-button.vs-button__danger:hover,.vs-button.vs-button__danger:focus{background:transparent;color:#cc3340;border:solid 1px #cc3340}.vs-button.vs-button__danger:hover,.vs-button.vs-button__danger:hover:hover,.vs-button.vs-button__danger:focus:hover{border-color:#a32933;background:#faebec;color:#a32933}.vs-button.vs-button__danger:active,.vs-button.vs-button__danger:hover:active,.vs-button.vs-button__danger:focus:active{border-color:#7a1f26;background:white;color:#7a1f26}.vs-button.vs-button__danger:focus-visible,.vs-button.vs-button__danger:hover:focus-visible,.vs-button.vs-button__danger:focus:focus-visible{border-color:#a32933;box-shadow:0 0 0 .2rem #ebadb3;outline:0}.vs-button.vs-button__danger:disabled,.vs-button.vs-button__danger.vs-button--loading,.vs-button.vs-button__danger:hover:disabled,.vs-button.vs-button__danger:hover.vs-button--loading,.vs-button.vs-button__danger:focus:disabled,.vs-button.vs-button__danger:focus.vs-button--loading{background:#e9ebed;border-color:transparent;color:#c2c8cc;cursor:no-drop}.vs-button.vs-button__danger-fill,.vs-button.vs-button__danger-fill:focus{background:#cc3340;color:#fff;border:solid 1px #cc3340}.vs-button.vs-button__danger-fill:hover,.vs-button.vs-button__danger-fill:focus:hover{border-color:#a32933;background:#a32933}.vs-button.vs-button__danger-fill:active,.vs-button.vs-button__danger-fill:focus:active{border-color:#7a1f26;background:#8f242d}.vs-button.vs-button__danger-fill:focus-visible,.vs-button.vs-button__danger-fill:focus:focus-visible{border-color:#a32933;box-shadow:0 0 0 .2rem #ebadb3;outline:0}.vs-button.vs-button__danger-fill:disabled,.vs-button.vs-button__danger-fill.vs-button--loading,.vs-button.vs-button__danger-fill:focus:disabled,.vs-button.vs-button__danger-fill:focus.vs-button--loading{background:#e9ebed;border-color:transparent;color:#c2c8cc;cursor:no-drop}.vs-button.vs-button__warning,.vs-button.vs-button__warning:hover,.vs-button.vs-button__warning:focus{background:transparent;color:#ffb057;border:solid 1px #ffb057}.vs-button.vs-button__warning:hover,.vs-button.vs-button__warning:hover:hover,.vs-button.vs-button__warning:focus:hover{border-color:#ff9824;background:#fff8f0;color:#ff9824}.vs-button.vs-button__warning:active,.vs-button.vs-button__warning:hover:active,.vs-button.vs-button__warning:focus:active{border-color:#f07f00;background:white;color:#f07f00}.vs-button.vs-button__warning:focus-visible,.vs-button.vs-button__warning:hover:focus-visible,.vs-button.vs-button__warning:focus:focus-visible{border-color:#ff9824;box-shadow:0 0 0 .2rem #fff8f0;outline:0}.vs-button.vs-button__warning:disabled,.vs-button.vs-button__warning.vs-button--loading,.vs-button.vs-button__warning:hover:disabled,.vs-button.vs-button__warning:hover.vs-button--loading,.vs-button.vs-button__warning:focus:disabled,.vs-button.vs-button__warning:focus.vs-button--loading{background:#e9ebed;border-color:transparent;color:#c2c8cc;cursor:no-drop}.vs-button.vs-button__warning-fill,.vs-button.vs-button__warning-fill:focus{background:#ffb057;color:#703815;border:solid 1px #ffb057}.vs-button.vs-button__warning-fill:hover,.vs-button.vs-button__warning-fill:focus:hover{border-color:#ff9824;background:#ff9824}.vs-button.vs-button__warning-fill:active,.vs-button.vs-button__warning-fill:focus:active{border-color:#f07f00;background:#ff8c0b}.vs-button.vs-button__warning-fill:focus-visible,.vs-button.vs-button__warning-fill:focus:focus-visible{border-color:#ff9824;box-shadow:0 0 0 .2rem #fff8f0;outline:0}.vs-button.vs-button__warning-fill:disabled,.vs-button.vs-button__warning-fill.vs-button--loading,.vs-button.vs-button__warning-fill:focus:disabled,.vs-button.vs-button__warning-fill:focus.vs-button--loading{background:#e9ebed;border-color:transparent;color:#c2c8cc;cursor:no-drop}.vs-button.vs-button__secondary,.vs-button.vs-button__secondary:hover,.vs-button.vs-button__secondary:focus{background:transparent;color:#6c757d;border:solid 1px #6c757d}.vs-button.vs-button__secondary:hover,.vs-button.vs-button__secondary:hover:hover,.vs-button.vs-button__secondary:focus:hover{border-color:#545b62;background:#f3f4f5;color:#545b62}.vs-button.vs-button__secondary:active,.vs-button.vs-button__secondary:hover:active,.vs-button.vs-button__secondary:focus:active{border-color:#3d4246;background:#f3f4f5;color:#3d4246}.vs-button.vs-button__secondary:focus-visible,.vs-button.vs-button__secondary:hover:focus-visible,.vs-button.vs-button__secondary:focus:focus-visible{border-color:#545b62;box-shadow:0 0 0 .2rem #bcc1c6;outline:0}.vs-button.vs-button__secondary:disabled,.vs-button.vs-button__secondary.vs-button--loading,.vs-button.vs-button__secondary:hover:disabled,.vs-button.vs-button__secondary:hover.vs-button--loading,.vs-button.vs-button__secondary:focus:disabled,.vs-button.vs-button__secondary:focus.vs-button--loading{background:#e9ebed;border-color:transparent;color:#c2c8cc;cursor:no-drop}.vs-button.vs-button__secondary-fill,.vs-button.vs-button__secondary-fill:focus{background:#6c757d;color:#fff;border:solid 1px #6c757d}.vs-button.vs-button__secondary-fill:hover,.vs-button.vs-button__secondary-fill:focus:hover{border-color:#545b62;background:#545b62}.vs-button.vs-button__secondary-fill:active,.vs-button.vs-button__secondary-fill:focus:active{border-color:#3d4246;background:#494f54}.vs-button.vs-button__secondary-fill:focus-visible,.vs-button.vs-button__secondary-fill:focus:focus-visible{border-color:#545b62;box-shadow:0 0 0 .2rem #bcc1c6;outline:0}.vs-button.vs-button__secondary-fill:disabled,.vs-button.vs-button__secondary-fill.vs-button--loading,.vs-button.vs-button__secondary-fill:focus:disabled,.vs-button.vs-button__secondary-fill:focus.vs-button--loading{background:#e9ebed;border-color:transparent;color:#c2c8cc;cursor:no-drop}.vs-button.vs-button__light,.vs-button.vs-button__light:hover,.vs-button.vs-button__light:focus{background:transparent;color:#f8f9fa;border:solid 1px #f8f9fa}.vs-button.vs-button__light:hover,.vs-button.vs-button__light:hover:hover,.vs-button.vs-button__light:focus:hover{border-color:#dae0e5;background:white;color:#dae0e5}.vs-button.vs-button__light:active,.vs-button.vs-button__light:hover:active,.vs-button.vs-button__light:focus:active{border-color:#bdc6d0;background:white;color:#bdc6d0}.vs-button.vs-button__light:focus-visible,.vs-button.vs-button__light:hover:focus-visible,.vs-button.vs-button__light:focus:focus-visible{border-color:#dae0e5;box-shadow:0 0 0 .2rem #fff;outline:0}.vs-button.vs-button__light:disabled,.vs-button.vs-button__light.vs-button--loading,.vs-button.vs-button__light:hover:disabled,.vs-button.vs-button__light:hover.vs-button--loading,.vs-button.vs-button__light:focus:disabled,.vs-button.vs-button__light:focus.vs-button--loading{background:#e9ebed;border-color:transparent;color:#c2c8cc;cursor:no-drop}.vs-button.vs-button__light-fill,.vs-button.vs-button__light-fill:focus{background:#f8f9fa;color:#212529;border:solid 1px #f8f9fa}.vs-button.vs-button__light-fill:hover,.vs-button.vs-button__light-fill:focus:hover{border-color:#dae0e5;background:#dae0e5}.vs-button.vs-button__light-fill:active,.vs-button.vs-button__light-fill:focus:active{border-color:#bdc6d0;background:#cbd3da}.vs-button.vs-button__light-fill:focus-visible,.vs-button.vs-button__light-fill:focus:focus-visible{border-color:#dae0e5;box-shadow:0 0 0 .2rem #fff;outline:0}.vs-button.vs-button__light-fill:disabled,.vs-button.vs-button__light-fill.vs-button--loading,.vs-button.vs-button__light-fill:focus:disabled,.vs-button.vs-button__light-fill:focus.vs-button--loading{background:#e9ebed;border-color:transparent;color:#c2c8cc;cursor:no-drop}.vs-button.vs-button__link{background:transparent;color:#1f73b7;border:none;padding:0}.vs-button.vs-button__link:hover{text-decoration:underline}")); document.head.appendChild(elementStyle);} catch(e) {console.error('vite-plugin-css-injected-by-js', e);} })();import { openBlock as r, createElementBlock as y, createElementVNode as a, normalizeStyle as o, resolveComponent as f, createBlock as d, resolveDynamicComponent as _, normalizeClass as p, withCtx as m, renderSlot as g } from "vue";
+const u = (n, s) => {
+  const e = n.__vccOpts || n;
+  for (const [l, t] of s)
+    e[l] = t;
+  return e;
+}, h = {
+  name: "VsLoader",
+  props: {
+    color: {
+      type: String,
+      default: "#1f73b7"
+    },
+    size: {
+      type: String,
+      default: "40px"
+    },
+    margin: {
+      type: String,
+      default: "3px"
+    },
+    radius: {
+      type: String,
+      default: "100%"
+    }
+  },
+  data() {
+    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"
+      }
+    };
+  }
+}, v = { class: "vs-loader" };
+function b(n, s, e, l, t, i) {
+  return r(), y("div", v, [
+    a("div", {
+      style: o([t.spinnerStyle, t.spinnerDelay1])
+    }, null, 4),
+    a("div", {
+      style: o([t.spinnerStyle, t.spinnerDelay2])
+    }, null, 4),
+    a("div", {
+      style: o([t.spinnerStyle, t.spinnerDelay3])
+    }, null, 4)
+  ]);
+}
+const S = /* @__PURE__ */ u(h, [["render", b]]);
+const k = {
+  name: "VsButton",
+  components: {
+    VsLoader: S
+  },
+  props: {
+    variant: {
+      type: String,
+      default: "primary"
+    },
+    size: {
+      type: String,
+      default: "medium"
+    },
+    fill: {
+      type: Boolean,
+      default: !1
+    },
+    isRound: {
+      type: Boolean,
+      default: !1
+    },
+    isLoading: {
+      type: Boolean,
+      default: !1
+    },
+    loaderSize: {
+      type: String,
+      default: "8px"
+    },
+    loaderColor: {
+      type: String,
+      default: "#1f73b7"
+    },
+    disabled: {
+      type: [Boolean, String],
+      default: !1
+    },
+    href: {
+      type: String
+    },
+    target: {
+      type: String
+    },
+    rel: {
+      type: String
+    }
+  },
+  computed: {
+    classList() {
+      return [
+        [this.variant === "link" ? "vs-button__link" : `vs-button__${this.variant}${this.fill ? "-fill" : ""}`],
+        `vs-button--${this.size}`,
+        { "vs-button--loading": this.isLoading },
+        { "vs-button--round": this.isRound }
+      ];
+    },
+    isLink() {
+      return this.variant === "link" || !!this.href ? "a" : "button";
+    }
+  },
+  methods: {
+    emitClick() {
+      (!this.isLoading || !this.disabled) && this.$emit("click");
+    }
+  }
+};
+function L(n, s, e, l, t, i) {
+  const c = f("vs-loader");
+  return r(), d(_(i.isLink), {
+    role: e.href ? "button" : !1,
+    href: e.href,
+    target: e.target,
+    rel: e.rel,
+    type: i.isLink ? "button" : !1,
+    disabled: e.disabled || e.isLoading,
+    class: p(["vs-button", i.classList])
+  }, {
+    default: m(() => [
+      e.isLoading ? (r(), d(c, {
+        key: 0,
+        size: e.loaderSize,
+        color: e.loaderColor
+      }, null, 8, ["size", "color"])) : g(n.$slots, "default", { key: 1 })
+    ]),
+    _: 3
+  }, 8, ["role", "href", "target", "rel", "type", "disabled", "class"]);
+}
+const z = /* @__PURE__ */ u(k, [["render", L]]), B = {
+  install(n) {
+    n.component("VsButton", z);
+  }
+};
+export {
+  B as default
+};

package/dist/index.min.js

@@ -0,0 +1 @@
+(function(){ try {var elementStyle = document.createElement('style'); elementStyle.appendChild(document.createTextNode("@-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-button{border-radius:4px;font-weight:400;box-sizing:border-box;user-select:none;padding:0 1.07143em;display:inline-flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;transition:border-color .25s ease-in-out 0s,box-shadow .1s ease-in-out 0s,background-color .25s ease-in-out 0s,color .25s ease-in-out 0s;margin:0;cursor:pointer;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;position:relative}.vs-button .vs-loader{display:flex;align-items:center;justify-content:center}.vs-button.vs-button--small{height:32px;line-height:30px;font-size:12px}.vs-button.vs-button--medium{height:40px;line-height:38px;font-size:14px}.vs-button.vs-button--large{height:48px;line-height:46px;font-size:14px}.vs-button.vs-button--round{border-radius:50px}.vs-button.vs-button__primary,.vs-button.vs-button__primary:hover,.vs-button.vs-button__primary:focus{background:transparent;color:#1f73b7;border:solid 1px #1f73b7}.vs-button.vs-button__primary:hover,.vs-button.vs-button__primary:hover:hover,.vs-button.vs-button__primary:focus:hover{border-color:#18588b;background:#f2f8fd;color:#18588b}.vs-button.vs-button__primary:active,.vs-button.vs-button__primary:hover:active,.vs-button.vs-button__primary:focus:active{border-color:#103c60;background:#dcecf9;color:#103c60}.vs-button.vs-button__primary:focus-visible,.vs-button.vs-button__primary:hover:focus-visible,.vs-button.vs-button__primary:focus:focus-visible{border-color:#18588b;box-shadow:0 0 0 .2rem #85bdea;outline:0}.vs-button.vs-button__primary:disabled,.vs-button.vs-button__primary.vs-button--loading,.vs-button.vs-button__primary:hover:disabled,.vs-button.vs-button__primary:hover.vs-button--loading,.vs-button.vs-button__primary:focus:disabled,.vs-button.vs-button__primary:focus.vs-button--loading{background:#e9ebed;border-color:transparent;color:#c2c8cc;cursor:no-drop}.vs-button.vs-button__primary-fill,.vs-button.vs-button__primary-fill:focus{background:#1f73b7;color:#fff;border:solid 1px #1f73b7}.vs-button.vs-button__primary-fill:hover,.vs-button.vs-button__primary-fill:focus:hover{border-color:#18588b;background:#18588b}.vs-button.vs-button__primary-fill:active,.vs-button.vs-button__primary-fill:focus:active{border-color:#103c60;background:#144a76}.vs-button.vs-button__primary-fill:focus-visible,.vs-button.vs-button__primary-fill:focus:focus-visible{border-color:#18588b;box-shadow:0 0 0 .2rem #85bdea;outline:0}.vs-button.vs-button__primary-fill:disabled,.vs-button.vs-button__primary-fill.vs-button--loading,.vs-button.vs-button__primary-fill:focus:disabled,.vs-button.vs-button__primary-fill:focus.vs-button--loading{background:#e9ebed;border-color:transparent;color:#c2c8cc;cursor:no-drop}.vs-button.vs-button__success,.vs-button.vs-button__success:hover,.vs-button.vs-button__success:focus{background:transparent;color:#28a745;border:solid 1px #28a745}.vs-button.vs-button__success:hover,.vs-button.vs-button__success:hover:hover,.vs-button.vs-button__success:focus:hover{border-color:#1e7e34;background:#edfbf0;color:#1e7e34}.vs-button.vs-button__success:active,.vs-button.vs-button__success:hover:active,.vs-button.vs-button__success:focus:active{border-color:#145523;background:#d8f6df;color:#145523}.vs-button.vs-button__success:focus-visible,.vs-button.vs-button__success:hover:focus-visible,.vs-button.vs-button__success:focus:focus-visible{border-color:#1e7e34;box-shadow:0 0 0 .2rem #86e29b;outline:0}.vs-button.vs-button__success:disabled,.vs-button.vs-button__success.vs-button--loading,.vs-button.vs-button__success:hover:disabled,.vs-button.vs-button__success:hover.vs-button--loading,.vs-button.vs-button__success:focus:disabled,.vs-button.vs-button__success:focus.vs-button--loading{background:#e9ebed;border-color:transparent;color:#c2c8cc;cursor:no-drop}.vs-button.vs-button__success-fill,.vs-button.vs-button__success-fill:focus{background:#28a745;color:#fff;border:solid 1px #28a745}.vs-button.vs-button__success-fill:hover,.vs-button.vs-button__success-fill:focus:hover{border-color:#1e7e34;background:#1e7e34}.vs-button.vs-button__success-fill:active,.vs-button.vs-button__success-fill:focus:active{border-color:#145523;background:#19692c}.vs-button.vs-button__success-fill:focus-visible,.vs-button.vs-button__success-fill:focus:focus-visible{border-color:#1e7e34;box-shadow:0 0 0 .2rem #86e29b;outline:0}.vs-button.vs-button__success-fill:disabled,.vs-button.vs-button__success-fill.vs-button--loading,.vs-button.vs-button__success-fill:focus:disabled,.vs-button.vs-button__success-fill:focus.vs-button--loading{background:#e9ebed;border-color:transparent;color:#c2c8cc;cursor:no-drop}.vs-button.vs-button__danger,.vs-button.vs-button__danger:hover,.vs-button.vs-button__danger:focus{background:transparent;color:#cc3340;border:solid 1px #cc3340}.vs-button.vs-button__danger:hover,.vs-button.vs-button__danger:hover:hover,.vs-button.vs-button__danger:focus:hover{border-color:#a32933;background:#faebec;color:#a32933}.vs-button.vs-button__danger:active,.vs-button.vs-button__danger:hover:active,.vs-button.vs-button__danger:focus:active{border-color:#7a1f26;background:white;color:#7a1f26}.vs-button.vs-button__danger:focus-visible,.vs-button.vs-button__danger:hover:focus-visible,.vs-button.vs-button__danger:focus:focus-visible{border-color:#a32933;box-shadow:0 0 0 .2rem #ebadb3;outline:0}.vs-button.vs-button__danger:disabled,.vs-button.vs-button__danger.vs-button--loading,.vs-button.vs-button__danger:hover:disabled,.vs-button.vs-button__danger:hover.vs-button--loading,.vs-button.vs-button__danger:focus:disabled,.vs-button.vs-button__danger:focus.vs-button--loading{background:#e9ebed;border-color:transparent;color:#c2c8cc;cursor:no-drop}.vs-button.vs-button__danger-fill,.vs-button.vs-button__danger-fill:focus{background:#cc3340;color:#fff;border:solid 1px #cc3340}.vs-button.vs-button__danger-fill:hover,.vs-button.vs-button__danger-fill:focus:hover{border-color:#a32933;background:#a32933}.vs-button.vs-button__danger-fill:active,.vs-button.vs-button__danger-fill:focus:active{border-color:#7a1f26;background:#8f242d}.vs-button.vs-button__danger-fill:focus-visible,.vs-button.vs-button__danger-fill:focus:focus-visible{border-color:#a32933;box-shadow:0 0 0 .2rem #ebadb3;outline:0}.vs-button.vs-button__danger-fill:disabled,.vs-button.vs-button__danger-fill.vs-button--loading,.vs-button.vs-button__danger-fill:focus:disabled,.vs-button.vs-button__danger-fill:focus.vs-button--loading{background:#e9ebed;border-color:transparent;color:#c2c8cc;cursor:no-drop}.vs-button.vs-button__warning,.vs-button.vs-button__warning:hover,.vs-button.vs-button__warning:focus{background:transparent;color:#ffb057;border:solid 1px #ffb057}.vs-button.vs-button__warning:hover,.vs-button.vs-button__warning:hover:hover,.vs-button.vs-button__warning:focus:hover{border-color:#ff9824;background:#fff8f0;color:#ff9824}.vs-button.vs-button__warning:active,.vs-button.vs-button__warning:hover:active,.vs-button.vs-button__warning:focus:active{border-color:#f07f00;background:white;color:#f07f00}.vs-button.vs-button__warning:focus-visible,.vs-button.vs-button__warning:hover:focus-visible,.vs-button.vs-button__warning:focus:focus-visible{border-color:#ff9824;box-shadow:0 0 0 .2rem #fff8f0;outline:0}.vs-button.vs-button__warning:disabled,.vs-button.vs-button__warning.vs-button--loading,.vs-button.vs-button__warning:hover:disabled,.vs-button.vs-button__warning:hover.vs-button--loading,.vs-button.vs-button__warning:focus:disabled,.vs-button.vs-button__warning:focus.vs-button--loading{background:#e9ebed;border-color:transparent;color:#c2c8cc;cursor:no-drop}.vs-button.vs-button__warning-fill,.vs-button.vs-button__warning-fill:focus{background:#ffb057;color:#703815;border:solid 1px #ffb057}.vs-button.vs-button__warning-fill:hover,.vs-button.vs-button__warning-fill:focus:hover{border-color:#ff9824;background:#ff9824}.vs-button.vs-button__warning-fill:active,.vs-button.vs-button__warning-fill:focus:active{border-color:#f07f00;background:#ff8c0b}.vs-button.vs-button__warning-fill:focus-visible,.vs-button.vs-button__warning-fill:focus:focus-visible{border-color:#ff9824;box-shadow:0 0 0 .2rem #fff8f0;outline:0}.vs-button.vs-button__warning-fill:disabled,.vs-button.vs-button__warning-fill.vs-button--loading,.vs-button.vs-button__warning-fill:focus:disabled,.vs-button.vs-button__warning-fill:focus.vs-button--loading{background:#e9ebed;border-color:transparent;color:#c2c8cc;cursor:no-drop}.vs-button.vs-button__secondary,.vs-button.vs-button__secondary:hover,.vs-button.vs-button__secondary:focus{background:transparent;color:#6c757d;border:solid 1px #6c757d}.vs-button.vs-button__secondary:hover,.vs-button.vs-button__secondary:hover:hover,.vs-button.vs-button__secondary:focus:hover{border-color:#545b62;background:#f3f4f5;color:#545b62}.vs-button.vs-button__secondary:active,.vs-button.vs-button__secondary:hover:active,.vs-button.vs-button__secondary:focus:active{border-color:#3d4246;background:#f3f4f5;color:#3d4246}.vs-button.vs-button__secondary:focus-visible,.vs-button.vs-button__secondary:hover:focus-visible,.vs-button.vs-button__secondary:focus:focus-visible{border-color:#545b62;box-shadow:0 0 0 .2rem #bcc1c6;outline:0}.vs-button.vs-button__secondary:disabled,.vs-button.vs-button__secondary.vs-button--loading,.vs-button.vs-button__secondary:hover:disabled,.vs-button.vs-button__secondary:hover.vs-button--loading,.vs-button.vs-button__secondary:focus:disabled,.vs-button.vs-button__secondary:focus.vs-button--loading{background:#e9ebed;border-color:transparent;color:#c2c8cc;cursor:no-drop}.vs-button.vs-button__secondary-fill,.vs-button.vs-button__secondary-fill:focus{background:#6c757d;color:#fff;border:solid 1px #6c757d}.vs-button.vs-button__secondary-fill:hover,.vs-button.vs-button__secondary-fill:focus:hover{border-color:#545b62;background:#545b62}.vs-button.vs-button__secondary-fill:active,.vs-button.vs-button__secondary-fill:focus:active{border-color:#3d4246;background:#494f54}.vs-button.vs-button__secondary-fill:focus-visible,.vs-button.vs-button__secondary-fill:focus:focus-visible{border-color:#545b62;box-shadow:0 0 0 .2rem #bcc1c6;outline:0}.vs-button.vs-button__secondary-fill:disabled,.vs-button.vs-button__secondary-fill.vs-button--loading,.vs-button.vs-button__secondary-fill:focus:disabled,.vs-button.vs-button__secondary-fill:focus.vs-button--loading{background:#e9ebed;border-color:transparent;color:#c2c8cc;cursor:no-drop}.vs-button.vs-button__light,.vs-button.vs-button__light:hover,.vs-button.vs-button__light:focus{background:transparent;color:#f8f9fa;border:solid 1px #f8f9fa}.vs-button.vs-button__light:hover,.vs-button.vs-button__light:hover:hover,.vs-button.vs-button__light:focus:hover{border-color:#dae0e5;background:white;color:#dae0e5}.vs-button.vs-button__light:active,.vs-button.vs-button__light:hover:active,.vs-button.vs-button__light:focus:active{border-color:#bdc6d0;background:white;color:#bdc6d0}.vs-button.vs-button__light:focus-visible,.vs-button.vs-button__light:hover:focus-visible,.vs-button.vs-button__light:focus:focus-visible{border-color:#dae0e5;box-shadow:0 0 0 .2rem #fff;outline:0}.vs-button.vs-button__light:disabled,.vs-button.vs-button__light.vs-button--loading,.vs-button.vs-button__light:hover:disabled,.vs-button.vs-button__light:hover.vs-button--loading,.vs-button.vs-button__light:focus:disabled,.vs-button.vs-button__light:focus.vs-button--loading{background:#e9ebed;border-color:transparent;color:#c2c8cc;cursor:no-drop}.vs-button.vs-button__light-fill,.vs-button.vs-button__light-fill:focus{background:#f8f9fa;color:#212529;border:solid 1px #f8f9fa}.vs-button.vs-button__light-fill:hover,.vs-button.vs-button__light-fill:focus:hover{border-color:#dae0e5;background:#dae0e5}.vs-button.vs-button__light-fill:active,.vs-button.vs-button__light-fill:focus:active{border-color:#bdc6d0;background:#cbd3da}.vs-button.vs-button__light-fill:focus-visible,.vs-button.vs-button__light-fill:focus:focus-visible{border-color:#dae0e5;box-shadow:0 0 0 .2rem #fff;outline:0}.vs-button.vs-button__light-fill:disabled,.vs-button.vs-button__light-fill.vs-button--loading,.vs-button.vs-button__light-fill:focus:disabled,.vs-button.vs-button__light-fill:focus.vs-button--loading{background:#e9ebed;border-color:transparent;color:#c2c8cc;cursor:no-drop}.vs-button.vs-button__link{background:transparent;color:#1f73b7;border:none;padding:0}.vs-button.vs-button__link:hover{text-decoration:underline}")); document.head.appendChild(elementStyle);} catch(e) {console.error('vite-plugin-css-injected-by-js', e);} })();var VsButton=function(e){"use strict";const m="",o=(i,s)=>{const t=i.__vccOpts||i;for(const[a,n]of s)t[a]=n;return t},r={name:"VsLoader",props:{color:{type:String,default:"#1f73b7"},size:{type:String,default:"40px"},margin:{type:String,default:"3px"},radius:{type:String,default:"100%"}},data(){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"}}}},d={class:"vs-loader"};function c(i,s,t,a,n,l){return e.openBlock(),e.createElementBlock("div",d,[e.createElementVNode("div",{style:e.normalizeStyle([n.spinnerStyle,n.spinnerDelay1])},null,4),e.createElementVNode("div",{style:e.normalizeStyle([n.spinnerStyle,n.spinnerDelay2])},null,4),e.createElementVNode("div",{style:e.normalizeStyle([n.spinnerStyle,n.spinnerDelay3])},null,4)])}const u=o(r,[["render",c]]),g="",y={name:"VsButton",components:{VsLoader:u},props:{variant:{type:String,default:"primary"},size:{type:String,default:"medium"},fill:{type:Boolean,default:!1},isRound:{type:Boolean,default:!1},isLoading:{type:Boolean,default:!1},loaderSize:{type:String,default:"8px"},loaderColor:{type:String,default:"#1f73b7"},disabled:{type:[Boolean,String],default:!1},href:{type:String},target:{type:String},rel:{type:String}},computed:{classList(){return[[this.variant==="link"?"vs-button__link":`vs-button__${this.variant}${this.fill?"-fill":""}`],`vs-button--${this.size}`,{"vs-button--loading":this.isLoading},{"vs-button--round":this.isRound}]},isLink(){return this.variant==="link"||!!this.href?"a":"button"}},methods:{emitClick(){(!this.isLoading||!this.disabled)&&this.$emit("click")}}};function f(i,s,t,a,n,l){const _=e.resolveComponent("vs-loader");return e.openBlock(),e.createBlock(e.resolveDynamicComponent(l.isLink),{role:t.href?"button":!1,href:t.href,target:t.target,rel:t.rel,type:l.isLink?"button":!1,disabled:t.disabled||t.isLoading,class:e.normalizeClass(["vs-button",l.classList])},{default:e.withCtx(()=>[t.isLoading?(e.openBlock(),e.createBlock(_,{key:0,size:t.loaderSize,color:t.loaderColor},null,8,["size","color"])):e.renderSlot(i.$slots,"default",{key:1})]),_:3},8,["role","href","target","rel","type","disabled","class"])}const p=o(y,[["render",f]]);return{install(i){i.component("VsButton",p)}}}(Vue);

package/dist/index.umd.min.js

@@ -0,0 +1 @@
+(function(){ try {var elementStyle = document.createElement('style'); elementStyle.appendChild(document.createTextNode("@-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-button{border-radius:4px;font-weight:400;box-sizing:border-box;user-select:none;padding:0 1.07143em;display:inline-flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;transition:border-color .25s ease-in-out 0s,box-shadow .1s ease-in-out 0s,background-color .25s ease-in-out 0s,color .25s ease-in-out 0s;margin:0;cursor:pointer;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;position:relative}.vs-button .vs-loader{display:flex;align-items:center;justify-content:center}.vs-button.vs-button--small{height:32px;line-height:30px;font-size:12px}.vs-button.vs-button--medium{height:40px;line-height:38px;font-size:14px}.vs-button.vs-button--large{height:48px;line-height:46px;font-size:14px}.vs-button.vs-button--round{border-radius:50px}.vs-button.vs-button__primary,.vs-button.vs-button__primary:hover,.vs-button.vs-button__primary:focus{background:transparent;color:#1f73b7;border:solid 1px #1f73b7}.vs-button.vs-button__primary:hover,.vs-button.vs-button__primary:hover:hover,.vs-button.vs-button__primary:focus:hover{border-color:#18588b;background:#f2f8fd;color:#18588b}.vs-button.vs-button__primary:active,.vs-button.vs-button__primary:hover:active,.vs-button.vs-button__primary:focus:active{border-color:#103c60;background:#dcecf9;color:#103c60}.vs-button.vs-button__primary:focus-visible,.vs-button.vs-button__primary:hover:focus-visible,.vs-button.vs-button__primary:focus:focus-visible{border-color:#18588b;box-shadow:0 0 0 .2rem #85bdea;outline:0}.vs-button.vs-button__primary:disabled,.vs-button.vs-button__primary.vs-button--loading,.vs-button.vs-button__primary:hover:disabled,.vs-button.vs-button__primary:hover.vs-button--loading,.vs-button.vs-button__primary:focus:disabled,.vs-button.vs-button__primary:focus.vs-button--loading{background:#e9ebed;border-color:transparent;color:#c2c8cc;cursor:no-drop}.vs-button.vs-button__primary-fill,.vs-button.vs-button__primary-fill:focus{background:#1f73b7;color:#fff;border:solid 1px #1f73b7}.vs-button.vs-button__primary-fill:hover,.vs-button.vs-button__primary-fill:focus:hover{border-color:#18588b;background:#18588b}.vs-button.vs-button__primary-fill:active,.vs-button.vs-button__primary-fill:focus:active{border-color:#103c60;background:#144a76}.vs-button.vs-button__primary-fill:focus-visible,.vs-button.vs-button__primary-fill:focus:focus-visible{border-color:#18588b;box-shadow:0 0 0 .2rem #85bdea;outline:0}.vs-button.vs-button__primary-fill:disabled,.vs-button.vs-button__primary-fill.vs-button--loading,.vs-button.vs-button__primary-fill:focus:disabled,.vs-button.vs-button__primary-fill:focus.vs-button--loading{background:#e9ebed;border-color:transparent;color:#c2c8cc;cursor:no-drop}.vs-button.vs-button__success,.vs-button.vs-button__success:hover,.vs-button.vs-button__success:focus{background:transparent;color:#28a745;border:solid 1px #28a745}.vs-button.vs-button__success:hover,.vs-button.vs-button__success:hover:hover,.vs-button.vs-button__success:focus:hover{border-color:#1e7e34;background:#edfbf0;color:#1e7e34}.vs-button.vs-button__success:active,.vs-button.vs-button__success:hover:active,.vs-button.vs-button__success:focus:active{border-color:#145523;background:#d8f6df;color:#145523}.vs-button.vs-button__success:focus-visible,.vs-button.vs-button__success:hover:focus-visible,.vs-button.vs-button__success:focus:focus-visible{border-color:#1e7e34;box-shadow:0 0 0 .2rem #86e29b;outline:0}.vs-button.vs-button__success:disabled,.vs-button.vs-button__success.vs-button--loading,.vs-button.vs-button__success:hover:disabled,.vs-button.vs-button__success:hover.vs-button--loading,.vs-button.vs-button__success:focus:disabled,.vs-button.vs-button__success:focus.vs-button--loading{background:#e9ebed;border-color:transparent;color:#c2c8cc;cursor:no-drop}.vs-button.vs-button__success-fill,.vs-button.vs-button__success-fill:focus{background:#28a745;color:#fff;border:solid 1px #28a745}.vs-button.vs-button__success-fill:hover,.vs-button.vs-button__success-fill:focus:hover{border-color:#1e7e34;background:#1e7e34}.vs-button.vs-button__success-fill:active,.vs-button.vs-button__success-fill:focus:active{border-color:#145523;background:#19692c}.vs-button.vs-button__success-fill:focus-visible,.vs-button.vs-button__success-fill:focus:focus-visible{border-color:#1e7e34;box-shadow:0 0 0 .2rem #86e29b;outline:0}.vs-button.vs-button__success-fill:disabled,.vs-button.vs-button__success-fill.vs-button--loading,.vs-button.vs-button__success-fill:focus:disabled,.vs-button.vs-button__success-fill:focus.vs-button--loading{background:#e9ebed;border-color:transparent;color:#c2c8cc;cursor:no-drop}.vs-button.vs-button__danger,.vs-button.vs-button__danger:hover,.vs-button.vs-button__danger:focus{background:transparent;color:#cc3340;border:solid 1px #cc3340}.vs-button.vs-button__danger:hover,.vs-button.vs-button__danger:hover:hover,.vs-button.vs-button__danger:focus:hover{border-color:#a32933;background:#faebec;color:#a32933}.vs-button.vs-button__danger:active,.vs-button.vs-button__danger:hover:active,.vs-button.vs-button__danger:focus:active{border-color:#7a1f26;background:white;color:#7a1f26}.vs-button.vs-button__danger:focus-visible,.vs-button.vs-button__danger:hover:focus-visible,.vs-button.vs-button__danger:focus:focus-visible{border-color:#a32933;box-shadow:0 0 0 .2rem #ebadb3;outline:0}.vs-button.vs-button__danger:disabled,.vs-button.vs-button__danger.vs-button--loading,.vs-button.vs-button__danger:hover:disabled,.vs-button.vs-button__danger:hover.vs-button--loading,.vs-button.vs-button__danger:focus:disabled,.vs-button.vs-button__danger:focus.vs-button--loading{background:#e9ebed;border-color:transparent;color:#c2c8cc;cursor:no-drop}.vs-button.vs-button__danger-fill,.vs-button.vs-button__danger-fill:focus{background:#cc3340;color:#fff;border:solid 1px #cc3340}.vs-button.vs-button__danger-fill:hover,.vs-button.vs-button__danger-fill:focus:hover{border-color:#a32933;background:#a32933}.vs-button.vs-button__danger-fill:active,.vs-button.vs-button__danger-fill:focus:active{border-color:#7a1f26;background:#8f242d}.vs-button.vs-button__danger-fill:focus-visible,.vs-button.vs-button__danger-fill:focus:focus-visible{border-color:#a32933;box-shadow:0 0 0 .2rem #ebadb3;outline:0}.vs-button.vs-button__danger-fill:disabled,.vs-button.vs-button__danger-fill.vs-button--loading,.vs-button.vs-button__danger-fill:focus:disabled,.vs-button.vs-button__danger-fill:focus.vs-button--loading{background:#e9ebed;border-color:transparent;color:#c2c8cc;cursor:no-drop}.vs-button.vs-button__warning,.vs-button.vs-button__warning:hover,.vs-button.vs-button__warning:focus{background:transparent;color:#ffb057;border:solid 1px #ffb057}.vs-button.vs-button__warning:hover,.vs-button.vs-button__warning:hover:hover,.vs-button.vs-button__warning:focus:hover{border-color:#ff9824;background:#fff8f0;color:#ff9824}.vs-button.vs-button__warning:active,.vs-button.vs-button__warning:hover:active,.vs-button.vs-button__warning:focus:active{border-color:#f07f00;background:white;color:#f07f00}.vs-button.vs-button__warning:focus-visible,.vs-button.vs-button__warning:hover:focus-visible,.vs-button.vs-button__warning:focus:focus-visible{border-color:#ff9824;box-shadow:0 0 0 .2rem #fff8f0;outline:0}.vs-button.vs-button__warning:disabled,.vs-button.vs-button__warning.vs-button--loading,.vs-button.vs-button__warning:hover:disabled,.vs-button.vs-button__warning:hover.vs-button--loading,.vs-button.vs-button__warning:focus:disabled,.vs-button.vs-button__warning:focus.vs-button--loading{background:#e9ebed;border-color:transparent;color:#c2c8cc;cursor:no-drop}.vs-button.vs-button__warning-fill,.vs-button.vs-button__warning-fill:focus{background:#ffb057;color:#703815;border:solid 1px #ffb057}.vs-button.vs-button__warning-fill:hover,.vs-button.vs-button__warning-fill:focus:hover{border-color:#ff9824;background:#ff9824}.vs-button.vs-button__warning-fill:active,.vs-button.vs-button__warning-fill:focus:active{border-color:#f07f00;background:#ff8c0b}.vs-button.vs-button__warning-fill:focus-visible,.vs-button.vs-button__warning-fill:focus:focus-visible{border-color:#ff9824;box-shadow:0 0 0 .2rem #fff8f0;outline:0}.vs-button.vs-button__warning-fill:disabled,.vs-button.vs-button__warning-fill.vs-button--loading,.vs-button.vs-button__warning-fill:focus:disabled,.vs-button.vs-button__warning-fill:focus.vs-button--loading{background:#e9ebed;border-color:transparent;color:#c2c8cc;cursor:no-drop}.vs-button.vs-button__secondary,.vs-button.vs-button__secondary:hover,.vs-button.vs-button__secondary:focus{background:transparent;color:#6c757d;border:solid 1px #6c757d}.vs-button.vs-button__secondary:hover,.vs-button.vs-button__secondary:hover:hover,.vs-button.vs-button__secondary:focus:hover{border-color:#545b62;background:#f3f4f5;color:#545b62}.vs-button.vs-button__secondary:active,.vs-button.vs-button__secondary:hover:active,.vs-button.vs-button__secondary:focus:active{border-color:#3d4246;background:#f3f4f5;color:#3d4246}.vs-button.vs-button__secondary:focus-visible,.vs-button.vs-button__secondary:hover:focus-visible,.vs-button.vs-button__secondary:focus:focus-visible{border-color:#545b62;box-shadow:0 0 0 .2rem #bcc1c6;outline:0}.vs-button.vs-button__secondary:disabled,.vs-button.vs-button__secondary.vs-button--loading,.vs-button.vs-button__secondary:hover:disabled,.vs-button.vs-button__secondary:hover.vs-button--loading,.vs-button.vs-button__secondary:focus:disabled,.vs-button.vs-button__secondary:focus.vs-button--loading{background:#e9ebed;border-color:transparent;color:#c2c8cc;cursor:no-drop}.vs-button.vs-button__secondary-fill,.vs-button.vs-button__secondary-fill:focus{background:#6c757d;color:#fff;border:solid 1px #6c757d}.vs-button.vs-button__secondary-fill:hover,.vs-button.vs-button__secondary-fill:focus:hover{border-color:#545b62;background:#545b62}.vs-button.vs-button__secondary-fill:active,.vs-button.vs-button__secondary-fill:focus:active{border-color:#3d4246;background:#494f54}.vs-button.vs-button__secondary-fill:focus-visible,.vs-button.vs-button__secondary-fill:focus:focus-visible{border-color:#545b62;box-shadow:0 0 0 .2rem #bcc1c6;outline:0}.vs-button.vs-button__secondary-fill:disabled,.vs-button.vs-button__secondary-fill.vs-button--loading,.vs-button.vs-button__secondary-fill:focus:disabled,.vs-button.vs-button__secondary-fill:focus.vs-button--loading{background:#e9ebed;border-color:transparent;color:#c2c8cc;cursor:no-drop}.vs-button.vs-button__light,.vs-button.vs-button__light:hover,.vs-button.vs-button__light:focus{background:transparent;color:#f8f9fa;border:solid 1px #f8f9fa}.vs-button.vs-button__light:hover,.vs-button.vs-button__light:hover:hover,.vs-button.vs-button__light:focus:hover{border-color:#dae0e5;background:white;color:#dae0e5}.vs-button.vs-button__light:active,.vs-button.vs-button__light:hover:active,.vs-button.vs-button__light:focus:active{border-color:#bdc6d0;background:white;color:#bdc6d0}.vs-button.vs-button__light:focus-visible,.vs-button.vs-button__light:hover:focus-visible,.vs-button.vs-button__light:focus:focus-visible{border-color:#dae0e5;box-shadow:0 0 0 .2rem #fff;outline:0}.vs-button.vs-button__light:disabled,.vs-button.vs-button__light.vs-button--loading,.vs-button.vs-button__light:hover:disabled,.vs-button.vs-button__light:hover.vs-button--loading,.vs-button.vs-button__light:focus:disabled,.vs-button.vs-button__light:focus.vs-button--loading{background:#e9ebed;border-color:transparent;color:#c2c8cc;cursor:no-drop}.vs-button.vs-button__light-fill,.vs-button.vs-button__light-fill:focus{background:#f8f9fa;color:#212529;border:solid 1px #f8f9fa}.vs-button.vs-button__light-fill:hover,.vs-button.vs-button__light-fill:focus:hover{border-color:#dae0e5;background:#dae0e5}.vs-button.vs-button__light-fill:active,.vs-button.vs-button__light-fill:focus:active{border-color:#bdc6d0;background:#cbd3da}.vs-button.vs-button__light-fill:focus-visible,.vs-button.vs-button__light-fill:focus:focus-visible{border-color:#dae0e5;box-shadow:0 0 0 .2rem #fff;outline:0}.vs-button.vs-button__light-fill:disabled,.vs-button.vs-button__light-fill.vs-button--loading,.vs-button.vs-button__light-fill:focus:disabled,.vs-button.vs-button__light-fill:focus.vs-button--loading{background:#e9ebed;border-color:transparent;color:#c2c8cc;cursor:no-drop}.vs-button.vs-button__link{background:transparent;color:#1f73b7;border:none;padding:0}.vs-button.vs-button__link:hover{text-decoration:underline}")); document.head.appendChild(elementStyle);} catch(e) {console.error('vite-plugin-css-injected-by-js', e);} })();(function(e,l){typeof exports=="object"&&typeof module<"u"?module.exports=l(require("vue")):typeof define=="function"&&define.amd?define(["vue"],l):(e=typeof globalThis<"u"?globalThis:e||self,e.VsButton=l(e.Vue))})(this,function(e){"use strict";const l="",r=(i,o)=>{const t=i.__vccOpts||i;for(const[a,n]of o)t[a]=n;return t},d={name:"VsLoader",props:{color:{type:String,default:"#1f73b7"},size:{type:String,default:"40px"},margin:{type:String,default:"3px"},radius:{type:String,default:"100%"}},data(){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"}}}},c={class:"vs-loader"};function u(i,o,t,a,n,s){return e.openBlock(),e.createElementBlock("div",c,[e.createElementVNode("div",{style:e.normalizeStyle([n.spinnerStyle,n.spinnerDelay1])},null,4),e.createElementVNode("div",{style:e.normalizeStyle([n.spinnerStyle,n.spinnerDelay2])},null,4),e.createElementVNode("div",{style:e.normalizeStyle([n.spinnerStyle,n.spinnerDelay3])},null,4)])}const f=r(d,[["render",u]]),h="",y={name:"VsButton",components:{VsLoader:f},props:{variant:{type:String,default:"primary"},size:{type:String,default:"medium"},fill:{type:Boolean,default:!1},isRound:{type:Boolean,default:!1},isLoading:{type:Boolean,default:!1},loaderSize:{type:String,default:"8px"},loaderColor:{type:String,default:"#1f73b7"},disabled:{type:[Boolean,String],default:!1},href:{type:String},target:{type:String},rel:{type:String}},computed:{classList(){return[[this.variant==="link"?"vs-button__link":`vs-button__${this.variant}${this.fill?"-fill":""}`],`vs-button--${this.size}`,{"vs-button--loading":this.isLoading},{"vs-button--round":this.isRound}]},isLink(){return this.variant==="link"||!!this.href?"a":"button"}},methods:{emitClick(){(!this.isLoading||!this.disabled)&&this.$emit("click")}}};function p(i,o,t,a,n,s){const _=e.resolveComponent("vs-loader");return e.openBlock(),e.createBlock(e.resolveDynamicComponent(s.isLink),{role:t.href?"button":!1,href:t.href,target:t.target,rel:t.rel,type:s.isLink?"button":!1,disabled:t.disabled||t.isLoading,class:e.normalizeClass(["vs-button",s.classList])},{default:e.withCtx(()=>[t.isLoading?(e.openBlock(),e.createBlock(_,{key:0,size:t.loaderSize,color:t.loaderColor},null,8,["size","color"])):e.renderSlot(i.$slots,"default",{key:1})]),_:3},8,["role","href","target","rel","type","disabled","class"])}const m=r(y,[["render",p]]);return{install(i){i.component("VsButton",m)}}});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vuesimple/vs-button",
-  "version": "1.4.18",
+  "version": "3.0.1",
   "description": "A simple vue button. Perfect for all your button scenarios.",
   "main": "dist/vs-button.umd.js",
   "module": "dist/vs-button.esm.js",
@@ -9,21 +9,14 @@
     "./sfc": "src/vs-button.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-button.umd.js",
-    "build:es": "rollup --config build/rollup.config.js --format es --file dist/vs-button.esm.js",
-    "build:unpkg": "rollup --config build/rollup.config.js --format iife --file dist/vs-button.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",
-    "@rollup/plugin-node-resolve": "13.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"
   },
   "repository": {
     "type": "git",
@@ -52,5 +45,5 @@
     "url": "https://github.com/ashwinkshenoy/vue-simple/issues"
   },
   "homepage": "https://github.com/ashwinkshenoy/vue-simple/tree/master/packages/vs-button",
-  "gitHead": "d861c686610167888eb6eeaa4f8001424026a1dd"
+  "gitHead": "97848d8e6d712ac6595ca1d9c9bd94a11b6b26ba"
 }

package/src/index.js

@@ -1,28 +1,9 @@
-// Import vue component
 import VsButton from './vs-button.vue';
 
-// Declare install function executed by Vue.use()
-export function install(Vue) {
-  if (install.installed) return;
-  install.installed = true;
-  Vue.component('VsButton', VsButton);
-}
-
-// Create module definition for Vue.use()
 const plugin = {
-  install,
+  install(Vue) {
+    Vue.component('VsButton', VsButton);
+  },
 };
 
-// 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 VsButton;
+export default plugin;

package/src/vs-button.vue

@@ -8,7 +8,6 @@
     :type="isLink ? 'button' : false"
     :disabled="disabled || isLoading"
     :class="['vs-button', classList]"
-    @click="emitClick"
   >
     <vs-loader :size="loaderSize" :color="loaderColor" v-if="isLoading"></vs-loader>
     <slot v-else></slot>

package/dist/vs-button.esm.js

@@ -1,406 +0,0 @@
-//
-//
-//
-//
-//
-//
-//
-//
-
-var script = {
-  name: 'VsLoader',
-  props: {
-    color: {
-      type: String,
-      default: '#1f73b7',
-    },
-    size: {
-      type: String,
-      default: '40px',
-    },
-    margin: {
-      type: String,
-      default: '3px',
-    },
-    radius: {
-      type: String,
-      default: '100%',
-    },
-  },
-  data: function data() {
-    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 normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
-    if (typeof shadowMode !== 'boolean') {
-        createInjectorSSR = createInjector;
-        createInjector = shadowMode;
-        shadowMode = false;
-    }
-    // Vue.extend constructor export interop.
-    var options = typeof script === 'function' ? script.options : script;
-    // render functions
-    if (template && template.render) {
-        options.render = template.render;
-        options.staticRenderFns = template.staticRenderFns;
-        options._compiled = true;
-        // functional template
-        if (isFunctionalTemplate) {
-            options.functional = true;
-        }
-    }
-    // scopedId
-    if (scopeId) {
-        options._scopeId = scopeId;
-    }
-    var hook;
-    if (moduleIdentifier) {
-        // server build
-        hook = function (context) {
-            // 2.3 injection
-            context =
-                context || // cached call
-                    (this.$vnode && this.$vnode.ssrContext) || // stateful
-                    (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext); // functional
-            // 2.2 with runInNewContext: true
-            if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
-                context = __VUE_SSR_CONTEXT__;
-            }
-            // inject component styles
-            if (style) {
-                style.call(this, createInjectorSSR(context));
-            }
-            // register component module identifier for async chunk inference
-            if (context && context._registeredComponents) {
-                context._registeredComponents.add(moduleIdentifier);
-            }
-        };
-        // used by ssr in case component is cached and beforeCreate
-        // never gets called
-        options._ssrRegister = hook;
-    }
-    else if (style) {
-        hook = shadowMode
-            ? function (context) {
-                style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
-            }
-            : function (context) {
-                style.call(this, createInjector(context));
-            };
-    }
-    if (hook) {
-        if (options.functional) {
-            // register for functional component in vue file
-            var originalRender = options.render;
-            options.render = function renderWithStyleInjection(h, context) {
-                hook.call(context);
-                return originalRender(h, context);
-            };
-        }
-        else {
-            // inject component registration as beforeCreate hook
-            var existing = options.beforeCreate;
-            options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
-        }
-    }
-    return script;
-}
-
-var isOldIE = typeof navigator !== 'undefined' &&
-    /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
-function createInjector(context) {
-    return function (id, style) { return addStyle(id, style); };
-}
-var HEAD;
-var styles = {};
-function addStyle(id, css) {
-    var group = isOldIE ? css.media || 'default' : id;
-    var style = styles[group] || (styles[group] = { ids: new Set(), styles: [] });
-    if (!style.ids.has(id)) {
-        style.ids.add(id);
-        var code = css.source;
-        if (css.map) {
-            // https://developer.chrome.com/devtools/docs/javascript-debugging
-            // this makes source maps inside style tags work properly in Chrome
-            code += '\n/*# sourceURL=' + css.map.sources[0] + ' */';
-            // http://stackoverflow.com/a/26603875
-            code +=
-                '\n/*# sourceMappingURL=data:application/json;base64,' +
-                    btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +
-                    ' */';
-        }
-        if (!style.element) {
-            style.element = document.createElement('style');
-            style.element.type = 'text/css';
-            if (css.media)
-                { style.element.setAttribute('media', css.media); }
-            if (HEAD === undefined) {
-                HEAD = document.head || document.getElementsByTagName('head')[0];
-            }
-            HEAD.appendChild(style.element);
-        }
-        if ('styleSheet' in style.element) {
-            style.styles.push(code);
-            style.element.styleSheet.cssText = style.styles
-                .filter(Boolean)
-                .join('\n');
-        }
-        else {
-            var index = style.ids.size - 1;
-            var textNode = document.createTextNode(code);
-            var nodes = style.element.childNodes;
-            if (nodes[index])
-                { style.element.removeChild(nodes[index]); }
-            if (nodes.length)
-                { style.element.insertBefore(textNode, nodes[index]); }
-            else
-                { style.element.appendChild(textNode); }
-        }
-    }
-}
-
-/* script */
-var __vue_script__ = script;
-
-/* template */
-var __vue_render__ = function() {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _c("div", { staticClass: "vs-loader" }, [
-    _c("div", { style: [_vm.spinnerStyle, _vm.spinnerDelay1] }),
-    _vm._v(" "),
-    _c("div", { style: [_vm.spinnerStyle, _vm.spinnerDelay2] }),
-    _vm._v(" "),
-    _c("div", { style: [_vm.spinnerStyle, _vm.spinnerDelay3] })
-  ])
-};
-var __vue_staticRenderFns__ = [];
-__vue_render__._withStripped = true;
-
-  /* style */
-  var __vue_inject_styles__ = function (inject) {
-    if (!inject) { return }
-    inject("data-v-815feb5a_0", { source: "@-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 });
-
-  };
-  /* scoped */
-  var __vue_scope_id__ = undefined;
-  /* module identifier */
-  var __vue_module_identifier__ = undefined;
-  /* functional template */
-  var __vue_is_functional_template__ = false;
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  var __vue_component__ = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    __vue_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    createInjector,
-    undefined,
-    undefined
-  );
-
-//
-
-var script$1 = {
-  name: 'VsButton',
-
-  components: {
-    VsLoader: __vue_component__,
-  },
-
-  props: {
-    variant: {
-      type: String,
-      default: 'primary',
-    },
-    // small. medium, large
-    size: {
-      type: String,
-      default: 'medium',
-    },
-    fill: {
-      type: Boolean,
-      default: false,
-    },
-    isRound: {
-      type: Boolean,
-      default: false,
-    },
-    isLoading: {
-      type: Boolean,
-      default: false,
-    },
-    loaderSize: {
-      type: String,
-      default: '8px',
-    },
-    loaderColor: {
-      type: String,
-      default: '#1f73b7',
-    },
-    disabled: {
-      type: [Boolean, String],
-      default: false,
-    },
-    href: {
-      type: String,
-    },
-    target: {
-      type: String,
-    },
-    rel: {
-      type: String,
-    },
-  },
-
-  computed: {
-    classList: function classList() {
-      return [
-        [this.variant === 'link' ? 'vs-button__link' : ("vs-button__" + (this.variant) + (this.fill ? '-fill' : ''))],
-        ("vs-button--" + (this.size)),
-        { 'vs-button--loading': this.isLoading },
-        { 'vs-button--round': this.isRound } ];
-    },
-
-    isLink: function isLink() {
-      return this.variant === 'link' || !!this.href ? 'a' : 'button';
-    },
-  },
-
-  methods: {
-    emitClick: function emitClick() {
-      if (!this.isLoading || !this.disabled) {
-        this.$emit('click');
-      }
-    },
-  },
-};
-
-/* script */
-var __vue_script__$1 = script$1;
-
-/* template */
-var __vue_render__$1 = function() {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _c(
-    _vm.isLink,
-    {
-      tag: "component",
-      class: ["vs-button", _vm.classList],
-      attrs: {
-        role: _vm.href ? "button" : false,
-        href: _vm.href,
-        target: _vm.target,
-        rel: _vm.rel,
-        type: _vm.isLink ? "button" : false,
-        disabled: _vm.disabled || _vm.isLoading
-      },
-      on: { click: _vm.emitClick }
-    },
-    [
-      _vm.isLoading
-        ? _c("vs-loader", {
-            attrs: { size: _vm.loaderSize, color: _vm.loaderColor }
-          })
-        : _vm._t("default")
-    ],
-    2
-  )
-};
-var __vue_staticRenderFns__$1 = [];
-__vue_render__$1._withStripped = true;
-
-  /* style */
-  var __vue_inject_styles__$1 = function (inject) {
-    if (!inject) { return }
-    inject("data-v-bc6d4844_0", { source: ".vs-button {\n  border-radius: 4px;\n  font-weight: 400;\n  box-sizing: border-box;\n  user-select: none;\n  padding: 0 1.07143em;\n  display: inline-flex;\n  -webkit-box-align: center;\n  align-items: center;\n  -webkit-box-pack: center;\n  justify-content: center;\n  transition: border-color 0.25s ease-in-out 0s, box-shadow 0.1s ease-in-out 0s, background-color 0.25s ease-in-out 0s, color 0.25s ease-in-out 0s;\n  margin: 0px;\n  cursor: pointer;\n  text-decoration: none;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  position: relative;\n}\n.vs-button .vs-loader {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.vs-button.vs-button--small {\n  height: 32px;\n  line-height: 30px;\n  font-size: 12px;\n}\n.vs-button.vs-button--medium {\n  height: 40px;\n  line-height: 38px;\n  font-size: 14px;\n}\n.vs-button.vs-button--large {\n  height: 48px;\n  line-height: 46px;\n  font-size: 14px;\n}\n.vs-button.vs-button--round {\n  border-radius: 50px;\n}\n.vs-button.vs-button__primary, .vs-button.vs-button__primary:hover, .vs-button.vs-button__primary:focus {\n  background: transparent;\n  color: #1f73b7;\n  border: solid 1px #1f73b7;\n}\n.vs-button.vs-button__primary:hover, .vs-button.vs-button__primary:hover:hover, .vs-button.vs-button__primary:focus:hover {\n  border-color: #18588b;\n  background: #f2f8fd;\n  color: #18588b;\n}\n.vs-button.vs-button__primary:active, .vs-button.vs-button__primary:hover:active, .vs-button.vs-button__primary:focus:active {\n  border-color: #103c60;\n  background: #dcecf9;\n  color: #103c60;\n}\n.vs-button.vs-button__primary:focus-visible, .vs-button.vs-button__primary:hover:focus-visible, .vs-button.vs-button__primary:focus:focus-visible {\n  border-color: #18588b;\n  box-shadow: 0 0 0 0.2rem #85bdea;\n  outline: 0;\n}\n.vs-button.vs-button__primary:disabled, .vs-button.vs-button__primary.vs-button--loading, .vs-button.vs-button__primary:hover:disabled, .vs-button.vs-button__primary:hover.vs-button--loading, .vs-button.vs-button__primary:focus:disabled, .vs-button.vs-button__primary:focus.vs-button--loading {\n  background: #e9ebed;\n  border-color: transparent;\n  color: #c2c8cc;\n  cursor: no-drop;\n}\n.vs-button.vs-button__primary-fill, .vs-button.vs-button__primary-fill:focus {\n  background: #1f73b7;\n  color: #ffffff;\n  border: solid 1px #1f73b7;\n}\n.vs-button.vs-button__primary-fill:hover, .vs-button.vs-button__primary-fill:focus:hover {\n  border-color: #18588b;\n  background: #18588b;\n}\n.vs-button.vs-button__primary-fill:active, .vs-button.vs-button__primary-fill:focus:active {\n  border-color: #103c60;\n  background: #144a76;\n}\n.vs-button.vs-button__primary-fill:focus-visible, .vs-button.vs-button__primary-fill:focus:focus-visible {\n  border-color: #18588b;\n  box-shadow: 0 0 0 0.2rem #85bdea;\n  outline: 0;\n}\n.vs-button.vs-button__primary-fill:disabled, .vs-button.vs-button__primary-fill.vs-button--loading, .vs-button.vs-button__primary-fill:focus:disabled, .vs-button.vs-button__primary-fill:focus.vs-button--loading {\n  background: #e9ebed;\n  border-color: transparent;\n  color: #c2c8cc;\n  cursor: no-drop;\n}\n.vs-button.vs-button__success, .vs-button.vs-button__success:hover, .vs-button.vs-button__success:focus {\n  background: transparent;\n  color: #28a745;\n  border: solid 1px #28a745;\n}\n.vs-button.vs-button__success:hover, .vs-button.vs-button__success:hover:hover, .vs-button.vs-button__success:focus:hover {\n  border-color: #1e7e34;\n  background: #edfbf0;\n  color: #1e7e34;\n}\n.vs-button.vs-button__success:active, .vs-button.vs-button__success:hover:active, .vs-button.vs-button__success:focus:active {\n  border-color: #145523;\n  background: #d8f6df;\n  color: #145523;\n}\n.vs-button.vs-button__success:focus-visible, .vs-button.vs-button__success:hover:focus-visible, .vs-button.vs-button__success:focus:focus-visible {\n  border-color: #1e7e34;\n  box-shadow: 0 0 0 0.2rem #86e29b;\n  outline: 0;\n}\n.vs-button.vs-button__success:disabled, .vs-button.vs-button__success.vs-button--loading, .vs-button.vs-button__success:hover:disabled, .vs-button.vs-button__success:hover.vs-button--loading, .vs-button.vs-button__success:focus:disabled, .vs-button.vs-button__success:focus.vs-button--loading {\n  background: #e9ebed;\n  border-color: transparent;\n  color: #c2c8cc;\n  cursor: no-drop;\n}\n.vs-button.vs-button__success-fill, .vs-button.vs-button__success-fill:focus {\n  background: #28a745;\n  color: #ffffff;\n  border: solid 1px #28a745;\n}\n.vs-button.vs-button__success-fill:hover, .vs-button.vs-button__success-fill:focus:hover {\n  border-color: #1e7e34;\n  background: #1e7e34;\n}\n.vs-button.vs-button__success-fill:active, .vs-button.vs-button__success-fill:focus:active {\n  border-color: #145523;\n  background: #19692c;\n}\n.vs-button.vs-button__success-fill:focus-visible, .vs-button.vs-button__success-fill:focus:focus-visible {\n  border-color: #1e7e34;\n  box-shadow: 0 0 0 0.2rem #86e29b;\n  outline: 0;\n}\n.vs-button.vs-button__success-fill:disabled, .vs-button.vs-button__success-fill.vs-button--loading, .vs-button.vs-button__success-fill:focus:disabled, .vs-button.vs-button__success-fill:focus.vs-button--loading {\n  background: #e9ebed;\n  border-color: transparent;\n  color: #c2c8cc;\n  cursor: no-drop;\n}\n.vs-button.vs-button__danger, .vs-button.vs-button__danger:hover, .vs-button.vs-button__danger:focus {\n  background: transparent;\n  color: #cc3340;\n  border: solid 1px #cc3340;\n}\n.vs-button.vs-button__danger:hover, .vs-button.vs-button__danger:hover:hover, .vs-button.vs-button__danger:focus:hover {\n  border-color: #a32933;\n  background: #faebec;\n  color: #a32933;\n}\n.vs-button.vs-button__danger:active, .vs-button.vs-button__danger:hover:active, .vs-button.vs-button__danger:focus:active {\n  border-color: #7a1f26;\n  background: white;\n  color: #7a1f26;\n}\n.vs-button.vs-button__danger:focus-visible, .vs-button.vs-button__danger:hover:focus-visible, .vs-button.vs-button__danger:focus:focus-visible {\n  border-color: #a32933;\n  box-shadow: 0 0 0 0.2rem #ebadb3;\n  outline: 0;\n}\n.vs-button.vs-button__danger:disabled, .vs-button.vs-button__danger.vs-button--loading, .vs-button.vs-button__danger:hover:disabled, .vs-button.vs-button__danger:hover.vs-button--loading, .vs-button.vs-button__danger:focus:disabled, .vs-button.vs-button__danger:focus.vs-button--loading {\n  background: #e9ebed;\n  border-color: transparent;\n  color: #c2c8cc;\n  cursor: no-drop;\n}\n.vs-button.vs-button__danger-fill, .vs-button.vs-button__danger-fill:focus {\n  background: #cc3340;\n  color: #ffffff;\n  border: solid 1px #cc3340;\n}\n.vs-button.vs-button__danger-fill:hover, .vs-button.vs-button__danger-fill:focus:hover {\n  border-color: #a32933;\n  background: #a32933;\n}\n.vs-button.vs-button__danger-fill:active, .vs-button.vs-button__danger-fill:focus:active {\n  border-color: #7a1f26;\n  background: #8f242d;\n}\n.vs-button.vs-button__danger-fill:focus-visible, .vs-button.vs-button__danger-fill:focus:focus-visible {\n  border-color: #a32933;\n  box-shadow: 0 0 0 0.2rem #ebadb3;\n  outline: 0;\n}\n.vs-button.vs-button__danger-fill:disabled, .vs-button.vs-button__danger-fill.vs-button--loading, .vs-button.vs-button__danger-fill:focus:disabled, .vs-button.vs-button__danger-fill:focus.vs-button--loading {\n  background: #e9ebed;\n  border-color: transparent;\n  color: #c2c8cc;\n  cursor: no-drop;\n}\n.vs-button.vs-button__warning, .vs-button.vs-button__warning:hover, .vs-button.vs-button__warning:focus {\n  background: transparent;\n  color: #ffb057;\n  border: solid 1px #ffb057;\n}\n.vs-button.vs-button__warning:hover, .vs-button.vs-button__warning:hover:hover, .vs-button.vs-button__warning:focus:hover {\n  border-color: #ff9824;\n  background: #fff8f0;\n  color: #ff9824;\n}\n.vs-button.vs-button__warning:active, .vs-button.vs-button__warning:hover:active, .vs-button.vs-button__warning:focus:active {\n  border-color: #f07f00;\n  background: white;\n  color: #f07f00;\n}\n.vs-button.vs-button__warning:focus-visible, .vs-button.vs-button__warning:hover:focus-visible, .vs-button.vs-button__warning:focus:focus-visible {\n  border-color: #ff9824;\n  box-shadow: 0 0 0 0.2rem #fff8f0;\n  outline: 0;\n}\n.vs-button.vs-button__warning:disabled, .vs-button.vs-button__warning.vs-button--loading, .vs-button.vs-button__warning:hover:disabled, .vs-button.vs-button__warning:hover.vs-button--loading, .vs-button.vs-button__warning:focus:disabled, .vs-button.vs-button__warning:focus.vs-button--loading {\n  background: #e9ebed;\n  border-color: transparent;\n  color: #c2c8cc;\n  cursor: no-drop;\n}\n.vs-button.vs-button__warning-fill, .vs-button.vs-button__warning-fill:focus {\n  background: #ffb057;\n  color: #703815;\n  border: solid 1px #ffb057;\n}\n.vs-button.vs-button__warning-fill:hover, .vs-button.vs-button__warning-fill:focus:hover {\n  border-color: #ff9824;\n  background: #ff9824;\n}\n.vs-button.vs-button__warning-fill:active, .vs-button.vs-button__warning-fill:focus:active {\n  border-color: #f07f00;\n  background: #ff8c0b;\n}\n.vs-button.vs-button__warning-fill:focus-visible, .vs-button.vs-button__warning-fill:focus:focus-visible {\n  border-color: #ff9824;\n  box-shadow: 0 0 0 0.2rem #fff8f0;\n  outline: 0;\n}\n.vs-button.vs-button__warning-fill:disabled, .vs-button.vs-button__warning-fill.vs-button--loading, .vs-button.vs-button__warning-fill:focus:disabled, .vs-button.vs-button__warning-fill:focus.vs-button--loading {\n  background: #e9ebed;\n  border-color: transparent;\n  color: #c2c8cc;\n  cursor: no-drop;\n}\n.vs-button.vs-button__secondary, .vs-button.vs-button__secondary:hover, .vs-button.vs-button__secondary:focus {\n  background: transparent;\n  color: #6c757d;\n  border: solid 1px #6c757d;\n}\n.vs-button.vs-button__secondary:hover, .vs-button.vs-button__secondary:hover:hover, .vs-button.vs-button__secondary:focus:hover {\n  border-color: #545b62;\n  background: #f3f4f5;\n  color: #545b62;\n}\n.vs-button.vs-button__secondary:active, .vs-button.vs-button__secondary:hover:active, .vs-button.vs-button__secondary:focus:active {\n  border-color: #3d4246;\n  background: #f3f4f5;\n  color: #3d4246;\n}\n.vs-button.vs-button__secondary:focus-visible, .vs-button.vs-button__secondary:hover:focus-visible, .vs-button.vs-button__secondary:focus:focus-visible {\n  border-color: #545b62;\n  box-shadow: 0 0 0 0.2rem #bcc1c6;\n  outline: 0;\n}\n.vs-button.vs-button__secondary:disabled, .vs-button.vs-button__secondary.vs-button--loading, .vs-button.vs-button__secondary:hover:disabled, .vs-button.vs-button__secondary:hover.vs-button--loading, .vs-button.vs-button__secondary:focus:disabled, .vs-button.vs-button__secondary:focus.vs-button--loading {\n  background: #e9ebed;\n  border-color: transparent;\n  color: #c2c8cc;\n  cursor: no-drop;\n}\n.vs-button.vs-button__secondary-fill, .vs-button.vs-button__secondary-fill:focus {\n  background: #6c757d;\n  color: #ffffff;\n  border: solid 1px #6c757d;\n}\n.vs-button.vs-button__secondary-fill:hover, .vs-button.vs-button__secondary-fill:focus:hover {\n  border-color: #545b62;\n  background: #545b62;\n}\n.vs-button.vs-button__secondary-fill:active, .vs-button.vs-button__secondary-fill:focus:active {\n  border-color: #3d4246;\n  background: #494f54;\n}\n.vs-button.vs-button__secondary-fill:focus-visible, .vs-button.vs-button__secondary-fill:focus:focus-visible {\n  border-color: #545b62;\n  box-shadow: 0 0 0 0.2rem #bcc1c6;\n  outline: 0;\n}\n.vs-button.vs-button__secondary-fill:disabled, .vs-button.vs-button__secondary-fill.vs-button--loading, .vs-button.vs-button__secondary-fill:focus:disabled, .vs-button.vs-button__secondary-fill:focus.vs-button--loading {\n  background: #e9ebed;\n  border-color: transparent;\n  color: #c2c8cc;\n  cursor: no-drop;\n}\n.vs-button.vs-button__light, .vs-button.vs-button__light:hover, .vs-button.vs-button__light:focus {\n  background: transparent;\n  color: #f8f9fa;\n  border: solid 1px #f8f9fa;\n}\n.vs-button.vs-button__light:hover, .vs-button.vs-button__light:hover:hover, .vs-button.vs-button__light:focus:hover {\n  border-color: #dae0e5;\n  background: white;\n  color: #dae0e5;\n}\n.vs-button.vs-button__light:active, .vs-button.vs-button__light:hover:active, .vs-button.vs-button__light:focus:active {\n  border-color: #bdc6d0;\n  background: white;\n  color: #bdc6d0;\n}\n.vs-button.vs-button__light:focus-visible, .vs-button.vs-button__light:hover:focus-visible, .vs-button.vs-button__light:focus:focus-visible {\n  border-color: #dae0e5;\n  box-shadow: 0 0 0 0.2rem white;\n  outline: 0;\n}\n.vs-button.vs-button__light:disabled, .vs-button.vs-button__light.vs-button--loading, .vs-button.vs-button__light:hover:disabled, .vs-button.vs-button__light:hover.vs-button--loading, .vs-button.vs-button__light:focus:disabled, .vs-button.vs-button__light:focus.vs-button--loading {\n  background: #e9ebed;\n  border-color: transparent;\n  color: #c2c8cc;\n  cursor: no-drop;\n}\n.vs-button.vs-button__light-fill, .vs-button.vs-button__light-fill:focus {\n  background: #f8f9fa;\n  color: #212529;\n  border: solid 1px #f8f9fa;\n}\n.vs-button.vs-button__light-fill:hover, .vs-button.vs-button__light-fill:focus:hover {\n  border-color: #dae0e5;\n  background: #dae0e5;\n}\n.vs-button.vs-button__light-fill:active, .vs-button.vs-button__light-fill:focus:active {\n  border-color: #bdc6d0;\n  background: #cbd3da;\n}\n.vs-button.vs-button__light-fill:focus-visible, .vs-button.vs-button__light-fill:focus:focus-visible {\n  border-color: #dae0e5;\n  box-shadow: 0 0 0 0.2rem white;\n  outline: 0;\n}\n.vs-button.vs-button__light-fill:disabled, .vs-button.vs-button__light-fill.vs-button--loading, .vs-button.vs-button__light-fill:focus:disabled, .vs-button.vs-button__light-fill:focus.vs-button--loading {\n  background: #e9ebed;\n  border-color: transparent;\n  color: #c2c8cc;\n  cursor: no-drop;\n}\n.vs-button.vs-button__link {\n  background: transparent;\n  color: #1f73b7;\n  border: none;\n  padding: 0;\n}\n.vs-button.vs-button__link:hover {\n  text-decoration: underline;\n}", map: undefined, media: undefined });
-
-  };
-  /* scoped */
-  var __vue_scope_id__$1 = undefined;
-  /* module identifier */
-  var __vue_module_identifier__$1 = undefined;
-  /* functional template */
-  var __vue_is_functional_template__$1 = false;
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  var __vue_component__$1 = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$1, staticRenderFns: __vue_staticRenderFns__$1 },
-    __vue_inject_styles__$1,
-    __vue_script__$1,
-    __vue_scope_id__$1,
-    __vue_is_functional_template__$1,
-    __vue_module_identifier__$1,
-    false,
-    createInjector,
-    undefined,
-    undefined
-  );
-
-// Import vue component
-
-// Declare install function executed by Vue.use()
-function install(Vue) {
-  if (install.installed) { return; }
-  install.installed = true;
-  Vue.component('VsButton', __vue_component__$1);
-}
-
-// Create module definition for Vue.use()
-var plugin = {
-  install: install,
-};
-
-// Auto-install when vue is found (eg. in browser via <script> tag)
-var GlobalVue = null;
-if (typeof window !== 'undefined') {
-  GlobalVue = window.Vue;
-} else if (typeof global !== 'undefined') {
-  GlobalVue = global.Vue;
-}
-if (GlobalVue) {
-  GlobalVue.use(plugin);
-}
-
-export default __vue_component__$1;
-export { install };

package/dist/vs-button.min.js

@@ -1 +0,0 @@
-var VsButton=function(n){"use strict";var t={name:"VsLoader",props:{color:{type:String,default:"#1f73b7"},size:{type:String,default:"40px"},margin:{type:String,default:"3px"},radius:{type:String,default:"100%"}},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 o(n,t,o,s,e,r,u,b,i,v){"boolean"!=typeof u&&(i=b,b=u,u=!1);var a,c="function"==typeof o?o.options:o;if(n&&n.render&&(c.render=n.render,c.staticRenderFns=n.staticRenderFns,c._compiled=!0,e&&(c.functional=!0)),s&&(c._scopeId=s),r?(a=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,i(n)),n&&n._registeredComponents&&n._registeredComponents.add(r)},c._ssrRegister=a):t&&(a=u?function(n){t.call(this,v(n,this.$root.$options.shadowRoot))}:function(n){t.call(this,b(n))}),a)if(c.functional){var l=c.render;c.render=function(n,t){return a.call(t),l(n,t)}}else{var d=c.beforeCreate;c.beforeCreate=d?[].concat(d,a):[a]}return o}var s,e="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function r(n){return function(n,t){return function(n,t){var o=e?t.media||"default":n,r=u[o]||(u[o]={ids:new Set,styles:[]});if(!r.ids.has(n)){r.ids.add(n);var b=t.source;if(t.map&&(b+="\n/*# sourceURL="+t.map.sources[0]+" */",b+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(t.map))))+" */"),r.element||(r.element=document.createElement("style"),r.element.type="text/css",t.media&&r.element.setAttribute("media",t.media),void 0===s&&(s=document.head||document.getElementsByTagName("head")[0]),s.appendChild(r.element)),"styleSheet"in r.element)r.styles.push(b),r.element.styleSheet.cssText=r.styles.filter(Boolean).join("\n");else{var i=r.ids.size-1,v=document.createTextNode(b),a=r.element.childNodes;a[i]&&r.element.removeChild(a[i]),a.length?r.element.insertBefore(v,a[i]):r.element.appendChild(v)}}}(n,t)}}var u={};var b=t,i=function(){var n=this,t=n.$createElement,o=n._self._c||t;return o("div",{staticClass:"vs-loader"},[o("div",{style:[n.spinnerStyle,n.spinnerDelay1]}),n._v(" "),o("div",{style:[n.spinnerStyle,n.spinnerDelay2]}),n._v(" "),o("div",{style:[n.spinnerStyle,n.spinnerDelay3]})])};i._withStripped=!0;var v={name:"VsButton",components:{VsLoader:o({render:i,staticRenderFns:[]},(function(n){n&&n("data-v-815feb5a_0",{source:"@-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})}),b,void 0,!1,void 0,!1,r,void 0,void 0)},props:{variant:{type:String,default:"primary"},size:{type:String,default:"medium"},fill:{type:Boolean,default:!1},isRound:{type:Boolean,default:!1},isLoading:{type:Boolean,default:!1},loaderSize:{type:String,default:"8px"},loaderColor:{type:String,default:"#1f73b7"},disabled:{type:[Boolean,String],default:!1},href:{type:String},target:{type:String},rel:{type:String}},computed:{classList:function(){return[["link"===this.variant?"vs-button__link":"vs-button__"+this.variant+(this.fill?"-fill":"")],"vs-button--"+this.size,{"vs-button--loading":this.isLoading},{"vs-button--round":this.isRound}]},isLink:function(){return"link"===this.variant||this.href?"a":"button"}},methods:{emitClick:function(){this.isLoading&&this.disabled||this.$emit("click")}}},a=function(){var n=this,t=n.$createElement,o=n._self._c||t;return o(n.isLink,{tag:"component",class:["vs-button",n.classList],attrs:{role:!!n.href&&"button",href:n.href,target:n.target,rel:n.rel,type:!!n.isLink&&"button",disabled:n.disabled||n.isLoading},on:{click:n.emitClick}},[n.isLoading?o("vs-loader",{attrs:{size:n.loaderSize,color:n.loaderColor}}):n._t("default")],2)};a._withStripped=!0;var c=o({render:a,staticRenderFns:[]},(function(n){n&&n("data-v-bc6d4844_0",{source:".vs-button {\n  border-radius: 4px;\n  font-weight: 400;\n  box-sizing: border-box;\n  user-select: none;\n  padding: 0 1.07143em;\n  display: inline-flex;\n  -webkit-box-align: center;\n  align-items: center;\n  -webkit-box-pack: center;\n  justify-content: center;\n  transition: border-color 0.25s ease-in-out 0s, box-shadow 0.1s ease-in-out 0s, background-color 0.25s ease-in-out 0s, color 0.25s ease-in-out 0s;\n  margin: 0px;\n  cursor: pointer;\n  text-decoration: none;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  position: relative;\n}\n.vs-button .vs-loader {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.vs-button.vs-button--small {\n  height: 32px;\n  line-height: 30px;\n  font-size: 12px;\n}\n.vs-button.vs-button--medium {\n  height: 40px;\n  line-height: 38px;\n  font-size: 14px;\n}\n.vs-button.vs-button--large {\n  height: 48px;\n  line-height: 46px;\n  font-size: 14px;\n}\n.vs-button.vs-button--round {\n  border-radius: 50px;\n}\n.vs-button.vs-button__primary, .vs-button.vs-button__primary:hover, .vs-button.vs-button__primary:focus {\n  background: transparent;\n  color: #1f73b7;\n  border: solid 1px #1f73b7;\n}\n.vs-button.vs-button__primary:hover, .vs-button.vs-button__primary:hover:hover, .vs-button.vs-button__primary:focus:hover {\n  border-color: #18588b;\n  background: #f2f8fd;\n  color: #18588b;\n}\n.vs-button.vs-button__primary:active, .vs-button.vs-button__primary:hover:active, .vs-button.vs-button__primary:focus:active {\n  border-color: #103c60;\n  background: #dcecf9;\n  color: #103c60;\n}\n.vs-button.vs-button__primary:focus-visible, .vs-button.vs-button__primary:hover:focus-visible, .vs-button.vs-button__primary:focus:focus-visible {\n  border-color: #18588b;\n  box-shadow: 0 0 0 0.2rem #85bdea;\n  outline: 0;\n}\n.vs-button.vs-button__primary:disabled, .vs-button.vs-button__primary.vs-button--loading, .vs-button.vs-button__primary:hover:disabled, .vs-button.vs-button__primary:hover.vs-button--loading, .vs-button.vs-button__primary:focus:disabled, .vs-button.vs-button__primary:focus.vs-button--loading {\n  background: #e9ebed;\n  border-color: transparent;\n  color: #c2c8cc;\n  cursor: no-drop;\n}\n.vs-button.vs-button__primary-fill, .vs-button.vs-button__primary-fill:focus {\n  background: #1f73b7;\n  color: #ffffff;\n  border: solid 1px #1f73b7;\n}\n.vs-button.vs-button__primary-fill:hover, .vs-button.vs-button__primary-fill:focus:hover {\n  border-color: #18588b;\n  background: #18588b;\n}\n.vs-button.vs-button__primary-fill:active, .vs-button.vs-button__primary-fill:focus:active {\n  border-color: #103c60;\n  background: #144a76;\n}\n.vs-button.vs-button__primary-fill:focus-visible, .vs-button.vs-button__primary-fill:focus:focus-visible {\n  border-color: #18588b;\n  box-shadow: 0 0 0 0.2rem #85bdea;\n  outline: 0;\n}\n.vs-button.vs-button__primary-fill:disabled, .vs-button.vs-button__primary-fill.vs-button--loading, .vs-button.vs-button__primary-fill:focus:disabled, .vs-button.vs-button__primary-fill:focus.vs-button--loading {\n  background: #e9ebed;\n  border-color: transparent;\n  color: #c2c8cc;\n  cursor: no-drop;\n}\n.vs-button.vs-button__success, .vs-button.vs-button__success:hover, .vs-button.vs-button__success:focus {\n  background: transparent;\n  color: #28a745;\n  border: solid 1px #28a745;\n}\n.vs-button.vs-button__success:hover, .vs-button.vs-button__success:hover:hover, .vs-button.vs-button__success:focus:hover {\n  border-color: #1e7e34;\n  background: #edfbf0;\n  color: #1e7e34;\n}\n.vs-button.vs-button__success:active, .vs-button.vs-button__success:hover:active, .vs-button.vs-button__success:focus:active {\n  border-color: #145523;\n  background: #d8f6df;\n  color: #145523;\n}\n.vs-button.vs-button__success:focus-visible, .vs-button.vs-button__success:hover:focus-visible, .vs-button.vs-button__success:focus:focus-visible {\n  border-color: #1e7e34;\n  box-shadow: 0 0 0 0.2rem #86e29b;\n  outline: 0;\n}\n.vs-button.vs-button__success:disabled, .vs-button.vs-button__success.vs-button--loading, .vs-button.vs-button__success:hover:disabled, .vs-button.vs-button__success:hover.vs-button--loading, .vs-button.vs-button__success:focus:disabled, .vs-button.vs-button__success:focus.vs-button--loading {\n  background: #e9ebed;\n  border-color: transparent;\n  color: #c2c8cc;\n  cursor: no-drop;\n}\n.vs-button.vs-button__success-fill, .vs-button.vs-button__success-fill:focus {\n  background: #28a745;\n  color: #ffffff;\n  border: solid 1px #28a745;\n}\n.vs-button.vs-button__success-fill:hover, .vs-button.vs-button__success-fill:focus:hover {\n  border-color: #1e7e34;\n  background: #1e7e34;\n}\n.vs-button.vs-button__success-fill:active, .vs-button.vs-button__success-fill:focus:active {\n  border-color: #145523;\n  background: #19692c;\n}\n.vs-button.vs-button__success-fill:focus-visible, .vs-button.vs-button__success-fill:focus:focus-visible {\n  border-color: #1e7e34;\n  box-shadow: 0 0 0 0.2rem #86e29b;\n  outline: 0;\n}\n.vs-button.vs-button__success-fill:disabled, .vs-button.vs-button__success-fill.vs-button--loading, .vs-button.vs-button__success-fill:focus:disabled, .vs-button.vs-button__success-fill:focus.vs-button--loading {\n  background: #e9ebed;\n  border-color: transparent;\n  color: #c2c8cc;\n  cursor: no-drop;\n}\n.vs-button.vs-button__danger, .vs-button.vs-button__danger:hover, .vs-button.vs-button__danger:focus {\n  background: transparent;\n  color: #cc3340;\n  border: solid 1px #cc3340;\n}\n.vs-button.vs-button__danger:hover, .vs-button.vs-button__danger:hover:hover, .vs-button.vs-button__danger:focus:hover {\n  border-color: #a32933;\n  background: #faebec;\n  color: #a32933;\n}\n.vs-button.vs-button__danger:active, .vs-button.vs-button__danger:hover:active, .vs-button.vs-button__danger:focus:active {\n  border-color: #7a1f26;\n  background: white;\n  color: #7a1f26;\n}\n.vs-button.vs-button__danger:focus-visible, .vs-button.vs-button__danger:hover:focus-visible, .vs-button.vs-button__danger:focus:focus-visible {\n  border-color: #a32933;\n  box-shadow: 0 0 0 0.2rem #ebadb3;\n  outline: 0;\n}\n.vs-button.vs-button__danger:disabled, .vs-button.vs-button__danger.vs-button--loading, .vs-button.vs-button__danger:hover:disabled, .vs-button.vs-button__danger:hover.vs-button--loading, .vs-button.vs-button__danger:focus:disabled, .vs-button.vs-button__danger:focus.vs-button--loading {\n  background: #e9ebed;\n  border-color: transparent;\n  color: #c2c8cc;\n  cursor: no-drop;\n}\n.vs-button.vs-button__danger-fill, .vs-button.vs-button__danger-fill:focus {\n  background: #cc3340;\n  color: #ffffff;\n  border: solid 1px #cc3340;\n}\n.vs-button.vs-button__danger-fill:hover, .vs-button.vs-button__danger-fill:focus:hover {\n  border-color: #a32933;\n  background: #a32933;\n}\n.vs-button.vs-button__danger-fill:active, .vs-button.vs-button__danger-fill:focus:active {\n  border-color: #7a1f26;\n  background: #8f242d;\n}\n.vs-button.vs-button__danger-fill:focus-visible, .vs-button.vs-button__danger-fill:focus:focus-visible {\n  border-color: #a32933;\n  box-shadow: 0 0 0 0.2rem #ebadb3;\n  outline: 0;\n}\n.vs-button.vs-button__danger-fill:disabled, .vs-button.vs-button__danger-fill.vs-button--loading, .vs-button.vs-button__danger-fill:focus:disabled, .vs-button.vs-button__danger-fill:focus.vs-button--loading {\n  background: #e9ebed;\n  border-color: transparent;\n  color: #c2c8cc;\n  cursor: no-drop;\n}\n.vs-button.vs-button__warning, .vs-button.vs-button__warning:hover, .vs-button.vs-button__warning:focus {\n  background: transparent;\n  color: #ffb057;\n  border: solid 1px #ffb057;\n}\n.vs-button.vs-button__warning:hover, .vs-button.vs-button__warning:hover:hover, .vs-button.vs-button__warning:focus:hover {\n  border-color: #ff9824;\n  background: #fff8f0;\n  color: #ff9824;\n}\n.vs-button.vs-button__warning:active, .vs-button.vs-button__warning:hover:active, .vs-button.vs-button__warning:focus:active {\n  border-color: #f07f00;\n  background: white;\n  color: #f07f00;\n}\n.vs-button.vs-button__warning:focus-visible, .vs-button.vs-button__warning:hover:focus-visible, .vs-button.vs-button__warning:focus:focus-visible {\n  border-color: #ff9824;\n  box-shadow: 0 0 0 0.2rem #fff8f0;\n  outline: 0;\n}\n.vs-button.vs-button__warning:disabled, .vs-button.vs-button__warning.vs-button--loading, .vs-button.vs-button__warning:hover:disabled, .vs-button.vs-button__warning:hover.vs-button--loading, .vs-button.vs-button__warning:focus:disabled, .vs-button.vs-button__warning:focus.vs-button--loading {\n  background: #e9ebed;\n  border-color: transparent;\n  color: #c2c8cc;\n  cursor: no-drop;\n}\n.vs-button.vs-button__warning-fill, .vs-button.vs-button__warning-fill:focus {\n  background: #ffb057;\n  color: #703815;\n  border: solid 1px #ffb057;\n}\n.vs-button.vs-button__warning-fill:hover, .vs-button.vs-button__warning-fill:focus:hover {\n  border-color: #ff9824;\n  background: #ff9824;\n}\n.vs-button.vs-button__warning-fill:active, .vs-button.vs-button__warning-fill:focus:active {\n  border-color: #f07f00;\n  background: #ff8c0b;\n}\n.vs-button.vs-button__warning-fill:focus-visible, .vs-button.vs-button__warning-fill:focus:focus-visible {\n  border-color: #ff9824;\n  box-shadow: 0 0 0 0.2rem #fff8f0;\n  outline: 0;\n}\n.vs-button.vs-button__warning-fill:disabled, .vs-button.vs-button__warning-fill.vs-button--loading, .vs-button.vs-button__warning-fill:focus:disabled, .vs-button.vs-button__warning-fill:focus.vs-button--loading {\n  background: #e9ebed;\n  border-color: transparent;\n  color: #c2c8cc;\n  cursor: no-drop;\n}\n.vs-button.vs-button__secondary, .vs-button.vs-button__secondary:hover, .vs-button.vs-button__secondary:focus {\n  background: transparent;\n  color: #6c757d;\n  border: solid 1px #6c757d;\n}\n.vs-button.vs-button__secondary:hover, .vs-button.vs-button__secondary:hover:hover, .vs-button.vs-button__secondary:focus:hover {\n  border-color: #545b62;\n  background: #f3f4f5;\n  color: #545b62;\n}\n.vs-button.vs-button__secondary:active, .vs-button.vs-button__secondary:hover:active, .vs-button.vs-button__secondary:focus:active {\n  border-color: #3d4246;\n  background: #f3f4f5;\n  color: #3d4246;\n}\n.vs-button.vs-button__secondary:focus-visible, .vs-button.vs-button__secondary:hover:focus-visible, .vs-button.vs-button__secondary:focus:focus-visible {\n  border-color: #545b62;\n  box-shadow: 0 0 0 0.2rem #bcc1c6;\n  outline: 0;\n}\n.vs-button.vs-button__secondary:disabled, .vs-button.vs-button__secondary.vs-button--loading, .vs-button.vs-button__secondary:hover:disabled, .vs-button.vs-button__secondary:hover.vs-button--loading, .vs-button.vs-button__secondary:focus:disabled, .vs-button.vs-button__secondary:focus.vs-button--loading {\n  background: #e9ebed;\n  border-color: transparent;\n  color: #c2c8cc;\n  cursor: no-drop;\n}\n.vs-button.vs-button__secondary-fill, .vs-button.vs-button__secondary-fill:focus {\n  background: #6c757d;\n  color: #ffffff;\n  border: solid 1px #6c757d;\n}\n.vs-button.vs-button__secondary-fill:hover, .vs-button.vs-button__secondary-fill:focus:hover {\n  border-color: #545b62;\n  background: #545b62;\n}\n.vs-button.vs-button__secondary-fill:active, .vs-button.vs-button__secondary-fill:focus:active {\n  border-color: #3d4246;\n  background: #494f54;\n}\n.vs-button.vs-button__secondary-fill:focus-visible, .vs-button.vs-button__secondary-fill:focus:focus-visible {\n  border-color: #545b62;\n  box-shadow: 0 0 0 0.2rem #bcc1c6;\n  outline: 0;\n}\n.vs-button.vs-button__secondary-fill:disabled, .vs-button.vs-button__secondary-fill.vs-button--loading, .vs-button.vs-button__secondary-fill:focus:disabled, .vs-button.vs-button__secondary-fill:focus.vs-button--loading {\n  background: #e9ebed;\n  border-color: transparent;\n  color: #c2c8cc;\n  cursor: no-drop;\n}\n.vs-button.vs-button__light, .vs-button.vs-button__light:hover, .vs-button.vs-button__light:focus {\n  background: transparent;\n  color: #f8f9fa;\n  border: solid 1px #f8f9fa;\n}\n.vs-button.vs-button__light:hover, .vs-button.vs-button__light:hover:hover, .vs-button.vs-button__light:focus:hover {\n  border-color: #dae0e5;\n  background: white;\n  color: #dae0e5;\n}\n.vs-button.vs-button__light:active, .vs-button.vs-button__light:hover:active, .vs-button.vs-button__light:focus:active {\n  border-color: #bdc6d0;\n  background: white;\n  color: #bdc6d0;\n}\n.vs-button.vs-button__light:focus-visible, .vs-button.vs-button__light:hover:focus-visible, .vs-button.vs-button__light:focus:focus-visible {\n  border-color: #dae0e5;\n  box-shadow: 0 0 0 0.2rem white;\n  outline: 0;\n}\n.vs-button.vs-button__light:disabled, .vs-button.vs-button__light.vs-button--loading, .vs-button.vs-button__light:hover:disabled, .vs-button.vs-button__light:hover.vs-button--loading, .vs-button.vs-button__light:focus:disabled, .vs-button.vs-button__light:focus.vs-button--loading {\n  background: #e9ebed;\n  border-color: transparent;\n  color: #c2c8cc;\n  cursor: no-drop;\n}\n.vs-button.vs-button__light-fill, .vs-button.vs-button__light-fill:focus {\n  background: #f8f9fa;\n  color: #212529;\n  border: solid 1px #f8f9fa;\n}\n.vs-button.vs-button__light-fill:hover, .vs-button.vs-button__light-fill:focus:hover {\n  border-color: #dae0e5;\n  background: #dae0e5;\n}\n.vs-button.vs-button__light-fill:active, .vs-button.vs-button__light-fill:focus:active {\n  border-color: #bdc6d0;\n  background: #cbd3da;\n}\n.vs-button.vs-button__light-fill:focus-visible, .vs-button.vs-button__light-fill:focus:focus-visible {\n  border-color: #dae0e5;\n  box-shadow: 0 0 0 0.2rem white;\n  outline: 0;\n}\n.vs-button.vs-button__light-fill:disabled, .vs-button.vs-button__light-fill.vs-button--loading, .vs-button.vs-button__light-fill:focus:disabled, .vs-button.vs-button__light-fill:focus.vs-button--loading {\n  background: #e9ebed;\n  border-color: transparent;\n  color: #c2c8cc;\n  cursor: no-drop;\n}\n.vs-button.vs-button__link {\n  background: transparent;\n  color: #1f73b7;\n  border: none;\n  padding: 0;\n}\n.vs-button.vs-button__link:hover {\n  text-decoration: underline;\n}",map:void 0,media:void 0})}),v,void 0,!1,void 0,!1,r,void 0,void 0);function l(n){l.installed||(l.installed=!0,n.component("VsButton",c))}var d={install:l},_=null;return"undefined"!=typeof window?_=window.Vue:"undefined"!=typeof global&&(_=global.Vue),_&&_.use(d),n.default=c,n.install=l,n}({});

package/dist/vs-button.umd.js

@@ -1,416 +0,0 @@
-(function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
-  typeof define === 'function' && define.amd ? define(['exports'], factory) :
-  (global = global || self, factory(global.VsButton = {}));
-}(this, (function (exports) { 'use strict';
-
-  //
-  //
-  //
-  //
-  //
-  //
-  //
-  //
-
-  var script = {
-    name: 'VsLoader',
-    props: {
-      color: {
-        type: String,
-        default: '#1f73b7',
-      },
-      size: {
-        type: String,
-        default: '40px',
-      },
-      margin: {
-        type: String,
-        default: '3px',
-      },
-      radius: {
-        type: String,
-        default: '100%',
-      },
-    },
-    data: function data() {
-      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 normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
-      if (typeof shadowMode !== 'boolean') {
-          createInjectorSSR = createInjector;
-          createInjector = shadowMode;
-          shadowMode = false;
-      }
-      // Vue.extend constructor export interop.
-      var options = typeof script === 'function' ? script.options : script;
-      // render functions
-      if (template && template.render) {
-          options.render = template.render;
-          options.staticRenderFns = template.staticRenderFns;
-          options._compiled = true;
-          // functional template
-          if (isFunctionalTemplate) {
-              options.functional = true;
-          }
-      }
-      // scopedId
-      if (scopeId) {
-          options._scopeId = scopeId;
-      }
-      var hook;
-      if (moduleIdentifier) {
-          // server build
-          hook = function (context) {
-              // 2.3 injection
-              context =
-                  context || // cached call
-                      (this.$vnode && this.$vnode.ssrContext) || // stateful
-                      (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext); // functional
-              // 2.2 with runInNewContext: true
-              if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
-                  context = __VUE_SSR_CONTEXT__;
-              }
-              // inject component styles
-              if (style) {
-                  style.call(this, createInjectorSSR(context));
-              }
-              // register component module identifier for async chunk inference
-              if (context && context._registeredComponents) {
-                  context._registeredComponents.add(moduleIdentifier);
-              }
-          };
-          // used by ssr in case component is cached and beforeCreate
-          // never gets called
-          options._ssrRegister = hook;
-      }
-      else if (style) {
-          hook = shadowMode
-              ? function (context) {
-                  style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
-              }
-              : function (context) {
-                  style.call(this, createInjector(context));
-              };
-      }
-      if (hook) {
-          if (options.functional) {
-              // register for functional component in vue file
-              var originalRender = options.render;
-              options.render = function renderWithStyleInjection(h, context) {
-                  hook.call(context);
-                  return originalRender(h, context);
-              };
-          }
-          else {
-              // inject component registration as beforeCreate hook
-              var existing = options.beforeCreate;
-              options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
-          }
-      }
-      return script;
-  }
-
-  var isOldIE = typeof navigator !== 'undefined' &&
-      /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
-  function createInjector(context) {
-      return function (id, style) { return addStyle(id, style); };
-  }
-  var HEAD;
-  var styles = {};
-  function addStyle(id, css) {
-      var group = isOldIE ? css.media || 'default' : id;
-      var style = styles[group] || (styles[group] = { ids: new Set(), styles: [] });
-      if (!style.ids.has(id)) {
-          style.ids.add(id);
-          var code = css.source;
-          if (css.map) {
-              // https://developer.chrome.com/devtools/docs/javascript-debugging
-              // this makes source maps inside style tags work properly in Chrome
-              code += '\n/*# sourceURL=' + css.map.sources[0] + ' */';
-              // http://stackoverflow.com/a/26603875
-              code +=
-                  '\n/*# sourceMappingURL=data:application/json;base64,' +
-                      btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +
-                      ' */';
-          }
-          if (!style.element) {
-              style.element = document.createElement('style');
-              style.element.type = 'text/css';
-              if (css.media)
-                  { style.element.setAttribute('media', css.media); }
-              if (HEAD === undefined) {
-                  HEAD = document.head || document.getElementsByTagName('head')[0];
-              }
-              HEAD.appendChild(style.element);
-          }
-          if ('styleSheet' in style.element) {
-              style.styles.push(code);
-              style.element.styleSheet.cssText = style.styles
-                  .filter(Boolean)
-                  .join('\n');
-          }
-          else {
-              var index = style.ids.size - 1;
-              var textNode = document.createTextNode(code);
-              var nodes = style.element.childNodes;
-              if (nodes[index])
-                  { style.element.removeChild(nodes[index]); }
-              if (nodes.length)
-                  { style.element.insertBefore(textNode, nodes[index]); }
-              else
-                  { style.element.appendChild(textNode); }
-          }
-      }
-  }
-
-  /* script */
-  var __vue_script__ = script;
-
-  /* template */
-  var __vue_render__ = function() {
-    var _vm = this;
-    var _h = _vm.$createElement;
-    var _c = _vm._self._c || _h;
-    return _c("div", { staticClass: "vs-loader" }, [
-      _c("div", { style: [_vm.spinnerStyle, _vm.spinnerDelay1] }),
-      _vm._v(" "),
-      _c("div", { style: [_vm.spinnerStyle, _vm.spinnerDelay2] }),
-      _vm._v(" "),
-      _c("div", { style: [_vm.spinnerStyle, _vm.spinnerDelay3] })
-    ])
-  };
-  var __vue_staticRenderFns__ = [];
-  __vue_render__._withStripped = true;
-
-    /* style */
-    var __vue_inject_styles__ = function (inject) {
-      if (!inject) { return }
-      inject("data-v-815feb5a_0", { source: "@-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 });
-
-    };
-    /* scoped */
-    var __vue_scope_id__ = undefined;
-    /* module identifier */
-    var __vue_module_identifier__ = undefined;
-    /* functional template */
-    var __vue_is_functional_template__ = false;
-    /* style inject SSR */
-    
-    /* style inject shadow dom */
-    
-
-    
-    var __vue_component__ = /*#__PURE__*/normalizeComponent(
-      { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-      __vue_inject_styles__,
-      __vue_script__,
-      __vue_scope_id__,
-      __vue_is_functional_template__,
-      __vue_module_identifier__,
-      false,
-      createInjector,
-      undefined,
-      undefined
-    );
-
-  //
-
-  var script$1 = {
-    name: 'VsButton',
-
-    components: {
-      VsLoader: __vue_component__,
-    },
-
-    props: {
-      variant: {
-        type: String,
-        default: 'primary',
-      },
-      // small. medium, large
-      size: {
-        type: String,
-        default: 'medium',
-      },
-      fill: {
-        type: Boolean,
-        default: false,
-      },
-      isRound: {
-        type: Boolean,
-        default: false,
-      },
-      isLoading: {
-        type: Boolean,
-        default: false,
-      },
-      loaderSize: {
-        type: String,
-        default: '8px',
-      },
-      loaderColor: {
-        type: String,
-        default: '#1f73b7',
-      },
-      disabled: {
-        type: [Boolean, String],
-        default: false,
-      },
-      href: {
-        type: String,
-      },
-      target: {
-        type: String,
-      },
-      rel: {
-        type: String,
-      },
-    },
-
-    computed: {
-      classList: function classList() {
-        return [
-          [this.variant === 'link' ? 'vs-button__link' : ("vs-button__" + (this.variant) + (this.fill ? '-fill' : ''))],
-          ("vs-button--" + (this.size)),
-          { 'vs-button--loading': this.isLoading },
-          { 'vs-button--round': this.isRound } ];
-      },
-
-      isLink: function isLink() {
-        return this.variant === 'link' || !!this.href ? 'a' : 'button';
-      },
-    },
-
-    methods: {
-      emitClick: function emitClick() {
-        if (!this.isLoading || !this.disabled) {
-          this.$emit('click');
-        }
-      },
-    },
-  };
-
-  /* script */
-  var __vue_script__$1 = script$1;
-
-  /* template */
-  var __vue_render__$1 = function() {
-    var _vm = this;
-    var _h = _vm.$createElement;
-    var _c = _vm._self._c || _h;
-    return _c(
-      _vm.isLink,
-      {
-        tag: "component",
-        class: ["vs-button", _vm.classList],
-        attrs: {
-          role: _vm.href ? "button" : false,
-          href: _vm.href,
-          target: _vm.target,
-          rel: _vm.rel,
-          type: _vm.isLink ? "button" : false,
-          disabled: _vm.disabled || _vm.isLoading
-        },
-        on: { click: _vm.emitClick }
-      },
-      [
-        _vm.isLoading
-          ? _c("vs-loader", {
-              attrs: { size: _vm.loaderSize, color: _vm.loaderColor }
-            })
-          : _vm._t("default")
-      ],
-      2
-    )
-  };
-  var __vue_staticRenderFns__$1 = [];
-  __vue_render__$1._withStripped = true;
-
-    /* style */
-    var __vue_inject_styles__$1 = function (inject) {
-      if (!inject) { return }
-      inject("data-v-bc6d4844_0", { source: ".vs-button {\n  border-radius: 4px;\n  font-weight: 400;\n  box-sizing: border-box;\n  user-select: none;\n  padding: 0 1.07143em;\n  display: inline-flex;\n  -webkit-box-align: center;\n  align-items: center;\n  -webkit-box-pack: center;\n  justify-content: center;\n  transition: border-color 0.25s ease-in-out 0s, box-shadow 0.1s ease-in-out 0s, background-color 0.25s ease-in-out 0s, color 0.25s ease-in-out 0s;\n  margin: 0px;\n  cursor: pointer;\n  text-decoration: none;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  position: relative;\n}\n.vs-button .vs-loader {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.vs-button.vs-button--small {\n  height: 32px;\n  line-height: 30px;\n  font-size: 12px;\n}\n.vs-button.vs-button--medium {\n  height: 40px;\n  line-height: 38px;\n  font-size: 14px;\n}\n.vs-button.vs-button--large {\n  height: 48px;\n  line-height: 46px;\n  font-size: 14px;\n}\n.vs-button.vs-button--round {\n  border-radius: 50px;\n}\n.vs-button.vs-button__primary, .vs-button.vs-button__primary:hover, .vs-button.vs-button__primary:focus {\n  background: transparent;\n  color: #1f73b7;\n  border: solid 1px #1f73b7;\n}\n.vs-button.vs-button__primary:hover, .vs-button.vs-button__primary:hover:hover, .vs-button.vs-button__primary:focus:hover {\n  border-color: #18588b;\n  background: #f2f8fd;\n  color: #18588b;\n}\n.vs-button.vs-button__primary:active, .vs-button.vs-button__primary:hover:active, .vs-button.vs-button__primary:focus:active {\n  border-color: #103c60;\n  background: #dcecf9;\n  color: #103c60;\n}\n.vs-button.vs-button__primary:focus-visible, .vs-button.vs-button__primary:hover:focus-visible, .vs-button.vs-button__primary:focus:focus-visible {\n  border-color: #18588b;\n  box-shadow: 0 0 0 0.2rem #85bdea;\n  outline: 0;\n}\n.vs-button.vs-button__primary:disabled, .vs-button.vs-button__primary.vs-button--loading, .vs-button.vs-button__primary:hover:disabled, .vs-button.vs-button__primary:hover.vs-button--loading, .vs-button.vs-button__primary:focus:disabled, .vs-button.vs-button__primary:focus.vs-button--loading {\n  background: #e9ebed;\n  border-color: transparent;\n  color: #c2c8cc;\n  cursor: no-drop;\n}\n.vs-button.vs-button__primary-fill, .vs-button.vs-button__primary-fill:focus {\n  background: #1f73b7;\n  color: #ffffff;\n  border: solid 1px #1f73b7;\n}\n.vs-button.vs-button__primary-fill:hover, .vs-button.vs-button__primary-fill:focus:hover {\n  border-color: #18588b;\n  background: #18588b;\n}\n.vs-button.vs-button__primary-fill:active, .vs-button.vs-button__primary-fill:focus:active {\n  border-color: #103c60;\n  background: #144a76;\n}\n.vs-button.vs-button__primary-fill:focus-visible, .vs-button.vs-button__primary-fill:focus:focus-visible {\n  border-color: #18588b;\n  box-shadow: 0 0 0 0.2rem #85bdea;\n  outline: 0;\n}\n.vs-button.vs-button__primary-fill:disabled, .vs-button.vs-button__primary-fill.vs-button--loading, .vs-button.vs-button__primary-fill:focus:disabled, .vs-button.vs-button__primary-fill:focus.vs-button--loading {\n  background: #e9ebed;\n  border-color: transparent;\n  color: #c2c8cc;\n  cursor: no-drop;\n}\n.vs-button.vs-button__success, .vs-button.vs-button__success:hover, .vs-button.vs-button__success:focus {\n  background: transparent;\n  color: #28a745;\n  border: solid 1px #28a745;\n}\n.vs-button.vs-button__success:hover, .vs-button.vs-button__success:hover:hover, .vs-button.vs-button__success:focus:hover {\n  border-color: #1e7e34;\n  background: #edfbf0;\n  color: #1e7e34;\n}\n.vs-button.vs-button__success:active, .vs-button.vs-button__success:hover:active, .vs-button.vs-button__success:focus:active {\n  border-color: #145523;\n  background: #d8f6df;\n  color: #145523;\n}\n.vs-button.vs-button__success:focus-visible, .vs-button.vs-button__success:hover:focus-visible, .vs-button.vs-button__success:focus:focus-visible {\n  border-color: #1e7e34;\n  box-shadow: 0 0 0 0.2rem #86e29b;\n  outline: 0;\n}\n.vs-button.vs-button__success:disabled, .vs-button.vs-button__success.vs-button--loading, .vs-button.vs-button__success:hover:disabled, .vs-button.vs-button__success:hover.vs-button--loading, .vs-button.vs-button__success:focus:disabled, .vs-button.vs-button__success:focus.vs-button--loading {\n  background: #e9ebed;\n  border-color: transparent;\n  color: #c2c8cc;\n  cursor: no-drop;\n}\n.vs-button.vs-button__success-fill, .vs-button.vs-button__success-fill:focus {\n  background: #28a745;\n  color: #ffffff;\n  border: solid 1px #28a745;\n}\n.vs-button.vs-button__success-fill:hover, .vs-button.vs-button__success-fill:focus:hover {\n  border-color: #1e7e34;\n  background: #1e7e34;\n}\n.vs-button.vs-button__success-fill:active, .vs-button.vs-button__success-fill:focus:active {\n  border-color: #145523;\n  background: #19692c;\n}\n.vs-button.vs-button__success-fill:focus-visible, .vs-button.vs-button__success-fill:focus:focus-visible {\n  border-color: #1e7e34;\n  box-shadow: 0 0 0 0.2rem #86e29b;\n  outline: 0;\n}\n.vs-button.vs-button__success-fill:disabled, .vs-button.vs-button__success-fill.vs-button--loading, .vs-button.vs-button__success-fill:focus:disabled, .vs-button.vs-button__success-fill:focus.vs-button--loading {\n  background: #e9ebed;\n  border-color: transparent;\n  color: #c2c8cc;\n  cursor: no-drop;\n}\n.vs-button.vs-button__danger, .vs-button.vs-button__danger:hover, .vs-button.vs-button__danger:focus {\n  background: transparent;\n  color: #cc3340;\n  border: solid 1px #cc3340;\n}\n.vs-button.vs-button__danger:hover, .vs-button.vs-button__danger:hover:hover, .vs-button.vs-button__danger:focus:hover {\n  border-color: #a32933;\n  background: #faebec;\n  color: #a32933;\n}\n.vs-button.vs-button__danger:active, .vs-button.vs-button__danger:hover:active, .vs-button.vs-button__danger:focus:active {\n  border-color: #7a1f26;\n  background: white;\n  color: #7a1f26;\n}\n.vs-button.vs-button__danger:focus-visible, .vs-button.vs-button__danger:hover:focus-visible, .vs-button.vs-button__danger:focus:focus-visible {\n  border-color: #a32933;\n  box-shadow: 0 0 0 0.2rem #ebadb3;\n  outline: 0;\n}\n.vs-button.vs-button__danger:disabled, .vs-button.vs-button__danger.vs-button--loading, .vs-button.vs-button__danger:hover:disabled, .vs-button.vs-button__danger:hover.vs-button--loading, .vs-button.vs-button__danger:focus:disabled, .vs-button.vs-button__danger:focus.vs-button--loading {\n  background: #e9ebed;\n  border-color: transparent;\n  color: #c2c8cc;\n  cursor: no-drop;\n}\n.vs-button.vs-button__danger-fill, .vs-button.vs-button__danger-fill:focus {\n  background: #cc3340;\n  color: #ffffff;\n  border: solid 1px #cc3340;\n}\n.vs-button.vs-button__danger-fill:hover, .vs-button.vs-button__danger-fill:focus:hover {\n  border-color: #a32933;\n  background: #a32933;\n}\n.vs-button.vs-button__danger-fill:active, .vs-button.vs-button__danger-fill:focus:active {\n  border-color: #7a1f26;\n  background: #8f242d;\n}\n.vs-button.vs-button__danger-fill:focus-visible, .vs-button.vs-button__danger-fill:focus:focus-visible {\n  border-color: #a32933;\n  box-shadow: 0 0 0 0.2rem #ebadb3;\n  outline: 0;\n}\n.vs-button.vs-button__danger-fill:disabled, .vs-button.vs-button__danger-fill.vs-button--loading, .vs-button.vs-button__danger-fill:focus:disabled, .vs-button.vs-button__danger-fill:focus.vs-button--loading {\n  background: #e9ebed;\n  border-color: transparent;\n  color: #c2c8cc;\n  cursor: no-drop;\n}\n.vs-button.vs-button__warning, .vs-button.vs-button__warning:hover, .vs-button.vs-button__warning:focus {\n  background: transparent;\n  color: #ffb057;\n  border: solid 1px #ffb057;\n}\n.vs-button.vs-button__warning:hover, .vs-button.vs-button__warning:hover:hover, .vs-button.vs-button__warning:focus:hover {\n  border-color: #ff9824;\n  background: #fff8f0;\n  color: #ff9824;\n}\n.vs-button.vs-button__warning:active, .vs-button.vs-button__warning:hover:active, .vs-button.vs-button__warning:focus:active {\n  border-color: #f07f00;\n  background: white;\n  color: #f07f00;\n}\n.vs-button.vs-button__warning:focus-visible, .vs-button.vs-button__warning:hover:focus-visible, .vs-button.vs-button__warning:focus:focus-visible {\n  border-color: #ff9824;\n  box-shadow: 0 0 0 0.2rem #fff8f0;\n  outline: 0;\n}\n.vs-button.vs-button__warning:disabled, .vs-button.vs-button__warning.vs-button--loading, .vs-button.vs-button__warning:hover:disabled, .vs-button.vs-button__warning:hover.vs-button--loading, .vs-button.vs-button__warning:focus:disabled, .vs-button.vs-button__warning:focus.vs-button--loading {\n  background: #e9ebed;\n  border-color: transparent;\n  color: #c2c8cc;\n  cursor: no-drop;\n}\n.vs-button.vs-button__warning-fill, .vs-button.vs-button__warning-fill:focus {\n  background: #ffb057;\n  color: #703815;\n  border: solid 1px #ffb057;\n}\n.vs-button.vs-button__warning-fill:hover, .vs-button.vs-button__warning-fill:focus:hover {\n  border-color: #ff9824;\n  background: #ff9824;\n}\n.vs-button.vs-button__warning-fill:active, .vs-button.vs-button__warning-fill:focus:active {\n  border-color: #f07f00;\n  background: #ff8c0b;\n}\n.vs-button.vs-button__warning-fill:focus-visible, .vs-button.vs-button__warning-fill:focus:focus-visible {\n  border-color: #ff9824;\n  box-shadow: 0 0 0 0.2rem #fff8f0;\n  outline: 0;\n}\n.vs-button.vs-button__warning-fill:disabled, .vs-button.vs-button__warning-fill.vs-button--loading, .vs-button.vs-button__warning-fill:focus:disabled, .vs-button.vs-button__warning-fill:focus.vs-button--loading {\n  background: #e9ebed;\n  border-color: transparent;\n  color: #c2c8cc;\n  cursor: no-drop;\n}\n.vs-button.vs-button__secondary, .vs-button.vs-button__secondary:hover, .vs-button.vs-button__secondary:focus {\n  background: transparent;\n  color: #6c757d;\n  border: solid 1px #6c757d;\n}\n.vs-button.vs-button__secondary:hover, .vs-button.vs-button__secondary:hover:hover, .vs-button.vs-button__secondary:focus:hover {\n  border-color: #545b62;\n  background: #f3f4f5;\n  color: #545b62;\n}\n.vs-button.vs-button__secondary:active, .vs-button.vs-button__secondary:hover:active, .vs-button.vs-button__secondary:focus:active {\n  border-color: #3d4246;\n  background: #f3f4f5;\n  color: #3d4246;\n}\n.vs-button.vs-button__secondary:focus-visible, .vs-button.vs-button__secondary:hover:focus-visible, .vs-button.vs-button__secondary:focus:focus-visible {\n  border-color: #545b62;\n  box-shadow: 0 0 0 0.2rem #bcc1c6;\n  outline: 0;\n}\n.vs-button.vs-button__secondary:disabled, .vs-button.vs-button__secondary.vs-button--loading, .vs-button.vs-button__secondary:hover:disabled, .vs-button.vs-button__secondary:hover.vs-button--loading, .vs-button.vs-button__secondary:focus:disabled, .vs-button.vs-button__secondary:focus.vs-button--loading {\n  background: #e9ebed;\n  border-color: transparent;\n  color: #c2c8cc;\n  cursor: no-drop;\n}\n.vs-button.vs-button__secondary-fill, .vs-button.vs-button__secondary-fill:focus {\n  background: #6c757d;\n  color: #ffffff;\n  border: solid 1px #6c757d;\n}\n.vs-button.vs-button__secondary-fill:hover, .vs-button.vs-button__secondary-fill:focus:hover {\n  border-color: #545b62;\n  background: #545b62;\n}\n.vs-button.vs-button__secondary-fill:active, .vs-button.vs-button__secondary-fill:focus:active {\n  border-color: #3d4246;\n  background: #494f54;\n}\n.vs-button.vs-button__secondary-fill:focus-visible, .vs-button.vs-button__secondary-fill:focus:focus-visible {\n  border-color: #545b62;\n  box-shadow: 0 0 0 0.2rem #bcc1c6;\n  outline: 0;\n}\n.vs-button.vs-button__secondary-fill:disabled, .vs-button.vs-button__secondary-fill.vs-button--loading, .vs-button.vs-button__secondary-fill:focus:disabled, .vs-button.vs-button__secondary-fill:focus.vs-button--loading {\n  background: #e9ebed;\n  border-color: transparent;\n  color: #c2c8cc;\n  cursor: no-drop;\n}\n.vs-button.vs-button__light, .vs-button.vs-button__light:hover, .vs-button.vs-button__light:focus {\n  background: transparent;\n  color: #f8f9fa;\n  border: solid 1px #f8f9fa;\n}\n.vs-button.vs-button__light:hover, .vs-button.vs-button__light:hover:hover, .vs-button.vs-button__light:focus:hover {\n  border-color: #dae0e5;\n  background: white;\n  color: #dae0e5;\n}\n.vs-button.vs-button__light:active, .vs-button.vs-button__light:hover:active, .vs-button.vs-button__light:focus:active {\n  border-color: #bdc6d0;\n  background: white;\n  color: #bdc6d0;\n}\n.vs-button.vs-button__light:focus-visible, .vs-button.vs-button__light:hover:focus-visible, .vs-button.vs-button__light:focus:focus-visible {\n  border-color: #dae0e5;\n  box-shadow: 0 0 0 0.2rem white;\n  outline: 0;\n}\n.vs-button.vs-button__light:disabled, .vs-button.vs-button__light.vs-button--loading, .vs-button.vs-button__light:hover:disabled, .vs-button.vs-button__light:hover.vs-button--loading, .vs-button.vs-button__light:focus:disabled, .vs-button.vs-button__light:focus.vs-button--loading {\n  background: #e9ebed;\n  border-color: transparent;\n  color: #c2c8cc;\n  cursor: no-drop;\n}\n.vs-button.vs-button__light-fill, .vs-button.vs-button__light-fill:focus {\n  background: #f8f9fa;\n  color: #212529;\n  border: solid 1px #f8f9fa;\n}\n.vs-button.vs-button__light-fill:hover, .vs-button.vs-button__light-fill:focus:hover {\n  border-color: #dae0e5;\n  background: #dae0e5;\n}\n.vs-button.vs-button__light-fill:active, .vs-button.vs-button__light-fill:focus:active {\n  border-color: #bdc6d0;\n  background: #cbd3da;\n}\n.vs-button.vs-button__light-fill:focus-visible, .vs-button.vs-button__light-fill:focus:focus-visible {\n  border-color: #dae0e5;\n  box-shadow: 0 0 0 0.2rem white;\n  outline: 0;\n}\n.vs-button.vs-button__light-fill:disabled, .vs-button.vs-button__light-fill.vs-button--loading, .vs-button.vs-button__light-fill:focus:disabled, .vs-button.vs-button__light-fill:focus.vs-button--loading {\n  background: #e9ebed;\n  border-color: transparent;\n  color: #c2c8cc;\n  cursor: no-drop;\n}\n.vs-button.vs-button__link {\n  background: transparent;\n  color: #1f73b7;\n  border: none;\n  padding: 0;\n}\n.vs-button.vs-button__link:hover {\n  text-decoration: underline;\n}", map: undefined, media: undefined });
-
-    };
-    /* scoped */
-    var __vue_scope_id__$1 = undefined;
-    /* module identifier */
-    var __vue_module_identifier__$1 = undefined;
-    /* functional template */
-    var __vue_is_functional_template__$1 = false;
-    /* style inject SSR */
-    
-    /* style inject shadow dom */
-    
-
-    
-    var __vue_component__$1 = /*#__PURE__*/normalizeComponent(
-      { render: __vue_render__$1, staticRenderFns: __vue_staticRenderFns__$1 },
-      __vue_inject_styles__$1,
-      __vue_script__$1,
-      __vue_scope_id__$1,
-      __vue_is_functional_template__$1,
-      __vue_module_identifier__$1,
-      false,
-      createInjector,
-      undefined,
-      undefined
-    );
-
-  // Import vue component
-
-  // Declare install function executed by Vue.use()
-  function install(Vue) {
-    if (install.installed) { return; }
-    install.installed = true;
-    Vue.component('VsButton', __vue_component__$1);
-  }
-
-  // Create module definition for Vue.use()
-  var plugin = {
-    install: install,
-  };
-
-  // Auto-install when vue is found (eg. in browser via <script> tag)
-  var GlobalVue = null;
-  if (typeof window !== 'undefined') {
-    GlobalVue = window.Vue;
-  } else if (typeof global !== 'undefined') {
-    GlobalVue = global.Vue;
-  }
-  if (GlobalVue) {
-    GlobalVue.use(plugin);
-  }
-
-  exports.default = __vue_component__$1;
-  exports.install = install;
-
-  Object.defineProperty(exports, '__esModule', { value: true });
-
-})));