vue-loading-button - npm Package Compare versions

Comparing version 0.1.1 to 0.1.2

build/rollup.config.js

@@ -0,0 +0,0 @@ import vue from "rollup-plugin-vue";

dist/vue-loading-button.esm.js

@@ -0,1 +1,22 @@
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+
 var script = {
@@ -9,3 +30,8 @@ name: "VueLoadingButton",
     },
-  },
+    styled: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  }
 };
@@ -141,3 +167,3 @@
 // For security concerns, we use only base name in production mode. See https://github.com/vuejs/rollup-plugin-vue/issues/258
-script.__file = "C:\\Users\\William L\\GitHub\\vue-loading-button\\src\\vue-loading-button.vue";
+script.__file = "C:\\Users\\shwilliam\\GitHub\\vue-loading-button\\src\\vue-loading-button.vue";
 
@@ -154,5 +180,6 @@ /* template */
         "vue-loading-button": true,
+        "default-styles": _vm.styled,
         loading: _vm.loading
       },
-      attrs: { type: "button" }
+      attrs: { disabled: _vm.loading, type: "button" }
     },
@@ -184,7 +211,7 @@ [_vm._t("default", [_vm._v("Submit")]), _vm._v(" "), _vm._m(0)],
     if (!inject) { return }
-    inject("data-v-2a9079c4_0", { source: "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n/* reset */\n.vue-loading-button[data-v-2a9079c4] {\n  font-family: inherit;\n  font-size: 100%;\n  line-height: 1.15;\n  margin: 0;\n  overflow: visible;\n  text-transform: none;\n  -webkit-appearance: button;\n}\n.vue-loading-button[data-v-2a9079c4]::-moz-focus-inner {\n  border-style: none;\n  padding: 0;\n}\n.vue-loading-button[data-v-2a9079c4]:-moz-focusring {\n  outline: 1px dotted ButtonText;\n}\n/* styles */\n.vue-loading-button[data-v-2a9079c4] {\n  color: white;\n  background-color: blue;\n  border: solid 1px transparent;\n  border-radius: 4px;\n  cursor: pointer;\n  padding: 8px 14px;\n  line-height: 28px;\n  font-size: 20px;\n  position: relative;\n  -webkit-transition: all 0.2s;\n  transition: all 0.2s;\n  transition-timing-function: ease-in;\n  overflow: hidden;\n}\n.vue-loading-button[data-v-2a9079c4]:focus {\n  outline: none;\n  box-shadow: 0 0 0 3px lightblue,\n    0 0 0 1.5px lightblue;\n}\n.vue-loading-button[data-v-2a9079c4]:not(.loading) {\n  transition-delay: 0.3s;\n}\n.vue-loading-button > .spinner[data-v-2a9079c4] {\n  line-height: 1.15;\n  position: absolute;\n  top: 50%;\n  left: auto;\n  right: 1.2em;\n  margin: -0.5em;\n  -webkit-transition: all 0.2s;\n  transition: all 0.2s;\n  transition-timing-function: ease-in;\n}\n.spinner span[data-v-2a9079c4] {\n  box-sizing: border-box;\n  display: inline-block;\n  position: absolute;\n  right: 0;\n  width: 20px;\n  height: 20px;\n  opacity: 0;\n  border: 4px solid #fff;\n  border-radius: 50%;\n  animation: spinner-data-v-2a9079c4 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n  border-color: #fff transparent transparent transparent;\n  -webkit-transition: opacity 0.3s;\n  transition: opacity 0.3s;\n  transition-timing-function: ease;\n  transition-delay: 0.2s;\n}\n.vue-loading-button:not(.loading) .spinner span[data-v-2a9079c4] {\n  transition-delay: 0s;\n}\n.spinner span[data-v-2a9079c4]:nth-child(1) {\n  animation-delay: -0.45s;\n}\n.spinner span[data-v-2a9079c4]:nth-child(2) {\n  animation-delay: -0.3s;\n}\n.spinner span[data-v-2a9079c4]:nth-child(3) {\n  animation-delay: -0.15s;\n}\n@keyframes spinner-data-v-2a9079c4 {\n0% {\n    transform: rotate(0deg);\n}\n100% {\n    transform: rotate(360deg);\n}\n}\n.loading[data-v-2a9079c4] {\n  padding-right: 2.5em;\n}\n.loading .spinner span[data-v-2a9079c4] {\n  opacity: 1;\n}\n", map: {"version":3,"sources":["C:\\Users\\William L\\GitHub\\vue-loading-button/C:\\Users\\William L\\GitHub\\vue-loading-button\\src\\vue-loading-button.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgCA,UAAA;AACA;EACA,oBAAA;EACA,eAAA;EACA,iBAAA;EACA,SAAA;EACA,iBAAA;EACA,oBAAA;EACA,0BAAA;AACA;AACA;EACA,kBAAA;EACA,UAAA;AACA;AACA;EACA,8BAAA;AACA;AACA,WAAA;AACA;EACA,YAAA;EACA,sBAAA;EACA,6BAAA;EACA,kBAAA;EACA,eAAA;EACA,iBAAA;EACA,iBAAA;EACA,eAAA;EACA,kBAAA;EACA,4BAAA;EACA,oBAAA;EACA,mCAAA;EACA,gBAAA;AACA;AACA;EACA,aAAA;EACA;yBACA;AACA;AACA;EACA,sBAAA;AACA;AACA;EACA,iBAAA;EACA,kBAAA;EACA,QAAA;EACA,UAAA;EACA,YAAA;EACA,cAAA;EACA,4BAAA;EACA,oBAAA;EACA,mCAAA;AACA;AACA;EACA,sBAAA;EACA,qBAAA;EACA,kBAAA;EACA,QAAA;EACA,WAAA;EACA,YAAA;EACA,UAAA;EACA,sBAAA;EACA,kBAAA;EACA,6EAAA;EACA,sDAAA;EACA,gCAAA;EACA,wBAAA;EACA,gCAAA;EACA,sBAAA;AACA;AACA;EACA,oBAAA;AACA;AACA;EACA,uBAAA;AACA;AACA;EACA,sBAAA;AACA;AACA;EACA,uBAAA;AACA;AACA;AACA;IACA,uBAAA;AACA;AACA;IACA,yBAAA;AACA;AACA;AACA;EACA,oBAAA;AACA;AACA;EACA,UAAA;AACA","file":"vue-loading-button.vue","sourcesContent":["<script>\nexport default {\n  name: \"VueLoadingButton\",\n  props: {\n    loading: {\n      type: Boolean,\n      required: false,\n      default: false\n    },\n  },\n};\n</script>\n\n<template>\n  <button\n    :class=\"{\n      'vue-loading-button': true,\n      'loading': loading,\n    }\"\n    type=\"button\"\n  >\n    <slot>Submit</slot>\n    <span class=\"spinner\">\n      <span></span>\n      <span></span>\n      <span></span>\n      <span></span>\n    </span>\n  </button>\n</template>\n\n<style scoped>\n/* reset */\n.vue-loading-button {\n  font-family: inherit;\n  font-size: 100%;\n  line-height: 1.15;\n  margin: 0;\n  overflow: visible;\n  text-transform: none;\n  -webkit-appearance: button;\n}\n.vue-loading-button::-moz-focus-inner {\n  border-style: none;\n  padding: 0;\n}\n.vue-loading-button:-moz-focusring {\n  outline: 1px dotted ButtonText;\n}\n/* styles */\n.vue-loading-button {\n  color: white;\n  background-color: blue;\n  border: solid 1px transparent;\n  border-radius: 4px;\n  cursor: pointer;\n  padding: 8px 14px;\n  line-height: 28px;\n  font-size: 20px;\n  position: relative;\n  -webkit-transition: all 0.2s;\n  transition: all 0.2s;\n  transition-timing-function: ease-in;\n  overflow: hidden;\n}\n.vue-loading-button:focus {\n  outline: none;\n  box-shadow: 0 0 0 3px lightblue,\n    0 0 0 1.5px lightblue;\n}\n.vue-loading-button:not(.loading) {\n  transition-delay: 0.3s;\n}\n.vue-loading-button > .spinner {\n  line-height: 1.15;\n  position: absolute;\n  top: 50%;\n  left: auto;\n  right: 1.2em;\n  margin: -0.5em;\n  -webkit-transition: all 0.2s;\n  transition: all 0.2s;\n  transition-timing-function: ease-in;\n}\n.spinner span {\n  box-sizing: border-box;\n  display: inline-block;\n  position: absolute;\n  right: 0;\n  width: 20px;\n  height: 20px;\n  opacity: 0;\n  border: 4px solid #fff;\n  border-radius: 50%;\n  animation: spinner 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n  border-color: #fff transparent transparent transparent;\n  -webkit-transition: opacity 0.3s;\n  transition: opacity 0.3s;\n  transition-timing-function: ease;\n  transition-delay: 0.2s;\n}\n.vue-loading-button:not(.loading) .spinner span {\n  transition-delay: 0s;\n}\n.spinner span:nth-child(1) {\n  animation-delay: -0.45s;\n}\n.spinner span:nth-child(2) {\n  animation-delay: -0.3s;\n}\n.spinner span:nth-child(3) {\n  animation-delay: -0.15s;\n}\n@keyframes spinner {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n.loading {\n  padding-right: 2.5em;\n}\n.loading .spinner span {\n  opacity: 1;\n}\n</style>\n"]}, media: undefined });
+    inject("data-v-1d441d3c_0", { source: "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\r\n/* reset */\nbutton[data-v-1d441d3c] {\r\n  font-family: inherit;\r\n  font-size: 100%;\r\n  font-size: 1.4rem;\r\n  line-height: 1.15;\r\n  margin: 0;\r\n  overflow: visible;\r\n  text-transform: none;\r\n  -webkit-appearance: button;\n}\nbutton[data-v-1d441d3c]::-moz-focus-inner {\r\n  border-style: none;\r\n  padding: 0;\n}\nbutton[data-v-1d441d3c]:-moz-focusring {\r\n  outline: 1px dotted ButtonText;\n}\r\n\r\n/* loading styles */\nbutton[data-v-1d441d3c] {\r\n  position: relative;\r\n  -webkit-transition: all 0.2s;\r\n  transition: all 0.2s;\r\n  transition-timing-function: ease-in;\n}\n.spinner[data-v-1d441d3c] {\r\n  line-height: 1.15;\r\n  position: absolute;\r\n  top: 50%;\r\n  left: auto;\r\n  right: 1.7rem;\r\n  margin: -0.5em;\r\n  opacity: 0;\r\n  transition-property: padding, opacity;\r\n  transition-duration: 0.2s, 0.2s;\r\n  transition-timing-function: ease-in, ease;\r\n  transition-delay: 0s, 0.2s;\n}\n.spinner span[data-v-1d441d3c] {\r\n  box-sizing: border-box;\r\n  display: inline-block;\r\n  position: absolute;\r\n  right: 0;\r\n  top: 0.15rem;\r\n  width: 1rem;\r\n  height: 1rem;\r\n  opacity: 1;\r\n  border: 3.4px solid #888;\r\n  border-radius: 50%;\r\n  animation: spinner-data-v-1d441d3c 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;\r\n  border-color: #888 transparent transparent transparent;\n}\n.spinner span[data-v-1d441d3c]:nth-child(1) {\r\n  animation-delay: 0.45s;\n}\n.spinner span[data-v-1d441d3c]:nth-child(2) {\r\n  animation-delay: 0.3s;\n}\n.spinner span[data-v-1d441d3c]:nth-child(3) {\r\n  animation-delay: 0.15s;\n}\n.loading[data-v-1d441d3c] {\r\n  padding-right: 3rem !important;\n}\n.loading .spinner[data-v-1d441d3c] {\r\n  opacity: 1;\n}\n.loading .spinner span[data-v-1d441d3c] {\r\n  opacity: 1;\n}\nbutton[data-v-1d441d3c]:not(:disabled) {\r\n  transition-delay: 0.2s;\n}\nbutton:not(:disabled) .spinner span[data-v-1d441d3c] {\r\n  box-shadow: 0 0 0 0.2rem #888 inset;\r\n  border: 7.4px solid transparent;\r\n  -webkit-transition: all 0.4s;\r\n  transition: all 0.4s;\n}\nbutton:not(:disabled) .spinner span[data-v-1d441d3c]:nth-child(1) {\r\n  transform: rotate(0deg) !important;\n}\nbutton:not(:disabled) .spinner span[data-v-1d441d3c]:nth-child(2) {\r\n  transform: rotate(90deg) !important;\n}\nbutton:not(:disabled) .spinner span[data-v-1d441d3c]:nth-child(3) {\r\n  transform: rotate(180deg) !important;\n}\nbutton:not(:disabled) .spinner span[data-v-1d441d3c]:nth-child(4) {\r\n  transform: rotate(270deg) !important;\n}\n@keyframes spinner-data-v-1d441d3c {\n0% {\r\n    transform: rotate(0deg);\n}\n100% {\r\n    transform: rotate(360deg);\n}\n}\r\n\r\n/* default styles */\n.default-styles[data-v-1d441d3c] {\r\n  color: white;\r\n  background-color: blue;\r\n  border: solid 1px transparent;\r\n  border-radius: 4px;\r\n  cursor: pointer;\r\n  padding: 8px 16.5px 8px 16px;\r\n  line-height: 1.9rem;\n}\n.default-styles[data-v-1d441d3c]:disabled {\r\n  pointer-events: stroke;\r\n  cursor: not-allowed;\n}\n.default-styles[data-v-1d441d3c]:focus {\r\n  outline: none;\r\n  box-shadow: 0 0 0 3px lightblue, 0 0 0 1.5px lightblue;\n}\n.default-styles .spinner span[data-v-1d441d3c] {\r\n  top: 0rem;\r\n  width: 1.2rem;\r\n  height: 1.2rem;\r\n  border: 3.4px solid #fff;\r\n  border-color: #fff transparent transparent transparent;\n}\n.default-styles:not(:disabled) .spinner span[data-v-1d441d3c] {\r\n  border: 8.4px solid transparent;\r\n  box-shadow: 0 0 0 0.1rem #fff inset;\n}\r\n", map: {"version":3,"sources":["C:\\Users\\shwilliam\\GitHub\\vue-loading-button/C:\\Users\\shwilliam\\GitHub\\vue-loading-button\\src\\vue-loading-button.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuCA,UAAA;AACA;EACA,oBAAA;EACA,eAAA;EACA,iBAAA;EACA,iBAAA;EACA,SAAA;EACA,iBAAA;EACA,oBAAA;EACA,0BAAA;AACA;AACA;EACA,kBAAA;EACA,UAAA;AACA;AACA;EACA,8BAAA;AACA;;AAEA,mBAAA;AACA;EACA,kBAAA;EACA,4BAAA;EACA,oBAAA;EACA,mCAAA;AACA;AACA;EACA,iBAAA;EACA,kBAAA;EACA,QAAA;EACA,UAAA;EACA,aAAA;EACA,cAAA;EACA,UAAA;EACA,qCAAA;EACA,+BAAA;EACA,yCAAA;EACA,0BAAA;AACA;AACA;EACA,sBAAA;EACA,qBAAA;EACA,kBAAA;EACA,QAAA;EACA,YAAA;EACA,WAAA;EACA,YAAA;EACA,UAAA;EACA,wBAAA;EACA,kBAAA;EACA,6EAAA;EACA,sDAAA;AACA;AACA;EACA,sBAAA;AACA;AACA;EACA,qBAAA;AACA;AACA;EACA,sBAAA;AACA;AACA;EACA,8BAAA;AACA;AACA;EACA,UAAA;AACA;AACA;EACA,UAAA;AACA;AACA;EACA,sBAAA;AACA;AACA;EACA,mCAAA;EACA,+BAAA;EACA,4BAAA;EACA,oBAAA;AACA;AACA;EACA,kCAAA;AACA;AACA;EACA,mCAAA;AACA;AACA;EACA,oCAAA;AACA;AACA;EACA,oCAAA;AACA;AACA;AACA;IACA,uBAAA;AACA;AACA;IACA,yBAAA;AACA;AACA;;AAEA,mBAAA;AACA;EACA,YAAA;EACA,sBAAA;EACA,6BAAA;EACA,kBAAA;EACA,eAAA;EACA,4BAAA;EACA,mBAAA;AACA;AACA;EACA,sBAAA;EACA,mBAAA;AACA;AACA;EACA,aAAA;EACA,sDAAA;AACA;AACA;EACA,SAAA;EACA,aAAA;EACA,cAAA;EACA,wBAAA;EACA,sDAAA;AACA;AACA;EACA,+BAAA;EACA,mCAAA;AACA","file":"vue-loading-button.vue","sourcesContent":["<template>\r\n  <button\r\n    :class=\"{\r\n      'vue-loading-button': true,\r\n      'default-styles': styled,\r\n      'loading': loading,\r\n    }\"\r\n    :disabled=\"loading\"\r\n    type=\"button\"\r\n  >\r\n    <slot>Submit</slot>\r\n    <span class=\"spinner\">\r\n      <span></span>\r\n      <span></span>\r\n      <span></span>\r\n      <span></span>\r\n    </span>\r\n  </button>\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n  name: \"VueLoadingButton\",\r\n  props: {\r\n    loading: {\r\n      type: Boolean,\r\n      required: false,\r\n      default: false\r\n    },\r\n    styled: {\r\n      type: Boolean,\r\n      required: false,\r\n      default: true\r\n    }\r\n  }\r\n};\r\n</script>\r\n\r\n<style scoped>\r\n/* reset */\r\nbutton {\r\n  font-family: inherit;\r\n  font-size: 100%;\r\n  font-size: 1.4rem;\r\n  line-height: 1.15;\r\n  margin: 0;\r\n  overflow: visible;\r\n  text-transform: none;\r\n  -webkit-appearance: button;\r\n}\r\nbutton::-moz-focus-inner {\r\n  border-style: none;\r\n  padding: 0;\r\n}\r\nbutton:-moz-focusring {\r\n  outline: 1px dotted ButtonText;\r\n}\r\n\r\n/* loading styles */\r\nbutton {\r\n  position: relative;\r\n  -webkit-transition: all 0.2s;\r\n  transition: all 0.2s;\r\n  transition-timing-function: ease-in;\r\n}\r\n.spinner {\r\n  line-height: 1.15;\r\n  position: absolute;\r\n  top: 50%;\r\n  left: auto;\r\n  right: 1.7rem;\r\n  margin: -0.5em;\r\n  opacity: 0;\r\n  transition-property: padding, opacity;\r\n  transition-duration: 0.2s, 0.2s;\r\n  transition-timing-function: ease-in, ease;\r\n  transition-delay: 0s, 0.2s;\r\n}\r\n.spinner span {\r\n  box-sizing: border-box;\r\n  display: inline-block;\r\n  position: absolute;\r\n  right: 0;\r\n  top: 0.15rem;\r\n  width: 1rem;\r\n  height: 1rem;\r\n  opacity: 1;\r\n  border: 3.4px solid #888;\r\n  border-radius: 50%;\r\n  animation: spinner 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;\r\n  border-color: #888 transparent transparent transparent;\r\n}\r\n.spinner span:nth-child(1) {\r\n  animation-delay: 0.45s;\r\n}\r\n.spinner span:nth-child(2) {\r\n  animation-delay: 0.3s;\r\n}\r\n.spinner span:nth-child(3) {\r\n  animation-delay: 0.15s;\r\n}\r\n.loading {\r\n  padding-right: 3rem !important;\r\n}\r\n.loading .spinner {\r\n  opacity: 1;\r\n}\r\n.loading .spinner span {\r\n  opacity: 1;\r\n}\r\nbutton:not(:disabled) {\r\n  transition-delay: 0.2s;\r\n}\r\nbutton:not(:disabled) .spinner span {\r\n  box-shadow: 0 0 0 0.2rem #888 inset;\r\n  border: 7.4px solid transparent;\r\n  -webkit-transition: all 0.4s;\r\n  transition: all 0.4s;\r\n}\r\nbutton:not(:disabled) .spinner span:nth-child(1) {\r\n  transform: rotate(0deg) !important;\r\n}\r\nbutton:not(:disabled) .spinner span:nth-child(2) {\r\n  transform: rotate(90deg) !important;\r\n}\r\nbutton:not(:disabled) .spinner span:nth-child(3) {\r\n  transform: rotate(180deg) !important;\r\n}\r\nbutton:not(:disabled) .spinner span:nth-child(4) {\r\n  transform: rotate(270deg) !important;\r\n}\r\n@keyframes spinner {\r\n  0% {\r\n    transform: rotate(0deg);\r\n  }\r\n  100% {\r\n    transform: rotate(360deg);\r\n  }\r\n}\r\n\r\n/* default styles */\r\n.default-styles {\r\n  color: white;\r\n  background-color: blue;\r\n  border: solid 1px transparent;\r\n  border-radius: 4px;\r\n  cursor: pointer;\r\n  padding: 8px 16.5px 8px 16px;\r\n  line-height: 1.9rem;\r\n}\r\n.default-styles:disabled {\r\n  pointer-events: stroke;\r\n  cursor: not-allowed;\r\n}\r\n.default-styles:focus {\r\n  outline: none;\r\n  box-shadow: 0 0 0 3px lightblue, 0 0 0 1.5px lightblue;\r\n}\r\n.default-styles .spinner span {\r\n  top: 0rem;\r\n  width: 1.2rem;\r\n  height: 1.2rem;\r\n  border: 3.4px solid #fff;\r\n  border-color: #fff transparent transparent transparent;\r\n}\r\n.default-styles:not(:disabled) .spinner span {\r\n  border: 8.4px solid transparent;\r\n  box-shadow: 0 0 0 0.1rem #fff inset;\r\n}\r\n</style>\r\n"]}, media: undefined });
 
   };
   /* scoped */
-  var __vue_scope_id__ = "data-v-2a9079c4";
+  var __vue_scope_id__ = "data-v-1d441d3c";
   /* module identifier */
@@ -191,0 +218,0 @@ var __vue_module_identifier__ = undefined;

dist/vue-loading-button.min.js

@@ -1,1 +0,1 @@
-var VueLoadingButton=function(n){"use strict";function t(n){return function(n,t){return e(n,t)}}function e(n,t){var e=a?t.media||"default":n,A=s[e]||(s[e]={ids:new Set,styles:[]});if(!A.ids.has(n)){A.ids.add(n);var i=t.source;if(t.map&&(i+="\n/*# sourceURL="+t.map.sources[0]+" */",i+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(t.map))))+" */"),A.element||(A.element=document.createElement("style"),A.element.type="text/css",t.media&&A.element.setAttribute("media",t.media),o.appendChild(A.element)),"styleSheet"in A.element)A.styles.push(i),A.element.styleSheet.cssText=A.styles.filter(Boolean).join("\n");else{var r=A.ids.size-1,l=document.createTextNode(i),d=A.element.childNodes;d[r]&&A.element.removeChild(d[r]),d.length?A.element.insertBefore(l,d[r]):A.element.appendChild(l)}}}function A(n){A.installed||(A.installed=!0,n.component("VueLoadingButton",u))}var i={name:"VueLoadingButton",props:{loading:{type:Boolean,required:!1,default:!1}}},a="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase()),o=document.head||document.getElementsByTagName("head")[0],s={},r=i;i.__file="C:\\Users\\William L\\GitHub\\vue-loading-button\\src\\vue-loading-button.vue";var l=function(){var n=this,t=n.$createElement;return(n._self._c||t)("button",{class:{"vue-loading-button":!0,loading:n.loading},attrs:{type:"button"}},[n._t("default",[n._v("Submit")]),n._v(" "),n._m(0)],2)},d=[function(){var n=this,t=n.$createElement,e=n._self._c||t;return e("span",{staticClass:"spinner"},[e("span"),n._v(" "),e("span"),n._v(" "),e("span"),n._v(" "),e("span")])}];l._withStripped=!0;var u=function(n,t,e,A,i,a,o,s,r,l){"function"==typeof o&&(r=s,s=o,o=!1);var d="function"==typeof e?e.options:e;n&&n.render&&(d.render=n.render,d.staticRenderFns=n.staticRenderFns,d._compiled=!0,i&&(d.functional=!0)),A&&(d._scopeId=A);var u;if(a?(u=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,r(n)),n&&n._registeredComponents&&n._registeredComponents.add(a)},d._ssrRegister=u):t&&(u=o?function(){t.call(this,l(this.$root.$options.shadowRoot))}:function(n){t.call(this,s(n))}),u)if(d.functional){var p=d.render;d.render=function(n,t){return u.call(t),p(n,t)}}else{var c=d.beforeCreate;d.beforeCreate=c?[].concat(c,u):[u]}return e}({render:l,staticRenderFns:d},function(n){n&&n("data-v-2a9079c4_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n/* reset */\n.vue-loading-button[data-v-2a9079c4] {\n  font-family: inherit;\n  font-size: 100%;\n  line-height: 1.15;\n  margin: 0;\n  overflow: visible;\n  text-transform: none;\n  -webkit-appearance: button;\n}\n.vue-loading-button[data-v-2a9079c4]::-moz-focus-inner {\n  border-style: none;\n  padding: 0;\n}\n.vue-loading-button[data-v-2a9079c4]:-moz-focusring {\n  outline: 1px dotted ButtonText;\n}\n/* styles */\n.vue-loading-button[data-v-2a9079c4] {\n  color: white;\n  background-color: blue;\n  border: solid 1px transparent;\n  border-radius: 4px;\n  cursor: pointer;\n  padding: 8px 14px;\n  line-height: 28px;\n  font-size: 20px;\n  position: relative;\n  -webkit-transition: all 0.2s;\n  transition: all 0.2s;\n  transition-timing-function: ease-in;\n  overflow: hidden;\n}\n.vue-loading-button[data-v-2a9079c4]:focus {\n  outline: none;\n  box-shadow: 0 0 0 3px lightblue,\n    0 0 0 1.5px lightblue;\n}\n.vue-loading-button[data-v-2a9079c4]:not(.loading) {\n  transition-delay: 0.3s;\n}\n.vue-loading-button > .spinner[data-v-2a9079c4] {\n  line-height: 1.15;\n  position: absolute;\n  top: 50%;\n  left: auto;\n  right: 1.2em;\n  margin: -0.5em;\n  -webkit-transition: all 0.2s;\n  transition: all 0.2s;\n  transition-timing-function: ease-in;\n}\n.spinner span[data-v-2a9079c4] {\n  box-sizing: border-box;\n  display: inline-block;\n  position: absolute;\n  right: 0;\n  width: 20px;\n  height: 20px;\n  opacity: 0;\n  border: 4px solid #fff;\n  border-radius: 50%;\n  animation: spinner-data-v-2a9079c4 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n  border-color: #fff transparent transparent transparent;\n  -webkit-transition: opacity 0.3s;\n  transition: opacity 0.3s;\n  transition-timing-function: ease;\n  transition-delay: 0.2s;\n}\n.vue-loading-button:not(.loading) .spinner span[data-v-2a9079c4] {\n  transition-delay: 0s;\n}\n.spinner span[data-v-2a9079c4]:nth-child(1) {\n  animation-delay: -0.45s;\n}\n.spinner span[data-v-2a9079c4]:nth-child(2) {\n  animation-delay: -0.3s;\n}\n.spinner span[data-v-2a9079c4]:nth-child(3) {\n  animation-delay: -0.15s;\n}\n@keyframes spinner-data-v-2a9079c4 {\n0% {\n    transform: rotate(0deg);\n}\n100% {\n    transform: rotate(360deg);\n}\n}\n.loading[data-v-2a9079c4] {\n  padding-right: 2.5em;\n}\n.loading .spinner span[data-v-2a9079c4] {\n  opacity: 1;\n}\n",map:{version:3,sources:["C:\\Users\\William L\\GitHub\\vue-loading-button/C:\\Users\\William L\\GitHub\\vue-loading-button\\src\\vue-loading-button.vue"],names:[],mappings:";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgCA,UAAA;AACA;EACA,oBAAA;EACA,eAAA;EACA,iBAAA;EACA,SAAA;EACA,iBAAA;EACA,oBAAA;EACA,0BAAA;AACA;AACA;EACA,kBAAA;EACA,UAAA;AACA;AACA;EACA,8BAAA;AACA;AACA,WAAA;AACA;EACA,YAAA;EACA,sBAAA;EACA,6BAAA;EACA,kBAAA;EACA,eAAA;EACA,iBAAA;EACA,iBAAA;EACA,eAAA;EACA,kBAAA;EACA,4BAAA;EACA,oBAAA;EACA,mCAAA;EACA,gBAAA;AACA;AACA;EACA,aAAA;EACA;yBACA;AACA;AACA;EACA,sBAAA;AACA;AACA;EACA,iBAAA;EACA,kBAAA;EACA,QAAA;EACA,UAAA;EACA,YAAA;EACA,cAAA;EACA,4BAAA;EACA,oBAAA;EACA,mCAAA;AACA;AACA;EACA,sBAAA;EACA,qBAAA;EACA,kBAAA;EACA,QAAA;EACA,WAAA;EACA,YAAA;EACA,UAAA;EACA,sBAAA;EACA,kBAAA;EACA,6EAAA;EACA,sDAAA;EACA,gCAAA;EACA,wBAAA;EACA,gCAAA;EACA,sBAAA;AACA;AACA;EACA,oBAAA;AACA;AACA;EACA,uBAAA;AACA;AACA;EACA,sBAAA;AACA;AACA;EACA,uBAAA;AACA;AACA;AACA;IACA,uBAAA;AACA;AACA;IACA,yBAAA;AACA;AACA;AACA;EACA,oBAAA;AACA;AACA;EACA,UAAA;AACA",file:"vue-loading-button.vue",sourcesContent:['<script>\nexport default {\n  name: "VueLoadingButton",\n  props: {\n    loading: {\n      type: Boolean,\n      required: false,\n      default: false\n    },\n  },\n};\n<\/script>\n\n<template>\n  <button\n    :class="{\n      \'vue-loading-button\': true,\n      \'loading\': loading,\n    }"\n    type="button"\n  >\n    <slot>Submit</slot>\n    <span class="spinner">\n      <span></span>\n      <span></span>\n      <span></span>\n      <span></span>\n    </span>\n  </button>\n</template>\n\n<style scoped>\n/* reset */\n.vue-loading-button {\n  font-family: inherit;\n  font-size: 100%;\n  line-height: 1.15;\n  margin: 0;\n  overflow: visible;\n  text-transform: none;\n  -webkit-appearance: button;\n}\n.vue-loading-button::-moz-focus-inner {\n  border-style: none;\n  padding: 0;\n}\n.vue-loading-button:-moz-focusring {\n  outline: 1px dotted ButtonText;\n}\n/* styles */\n.vue-loading-button {\n  color: white;\n  background-color: blue;\n  border: solid 1px transparent;\n  border-radius: 4px;\n  cursor: pointer;\n  padding: 8px 14px;\n  line-height: 28px;\n  font-size: 20px;\n  position: relative;\n  -webkit-transition: all 0.2s;\n  transition: all 0.2s;\n  transition-timing-function: ease-in;\n  overflow: hidden;\n}\n.vue-loading-button:focus {\n  outline: none;\n  box-shadow: 0 0 0 3px lightblue,\n    0 0 0 1.5px lightblue;\n}\n.vue-loading-button:not(.loading) {\n  transition-delay: 0.3s;\n}\n.vue-loading-button > .spinner {\n  line-height: 1.15;\n  position: absolute;\n  top: 50%;\n  left: auto;\n  right: 1.2em;\n  margin: -0.5em;\n  -webkit-transition: all 0.2s;\n  transition: all 0.2s;\n  transition-timing-function: ease-in;\n}\n.spinner span {\n  box-sizing: border-box;\n  display: inline-block;\n  position: absolute;\n  right: 0;\n  width: 20px;\n  height: 20px;\n  opacity: 0;\n  border: 4px solid #fff;\n  border-radius: 50%;\n  animation: spinner 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n  border-color: #fff transparent transparent transparent;\n  -webkit-transition: opacity 0.3s;\n  transition: opacity 0.3s;\n  transition-timing-function: ease;\n  transition-delay: 0.2s;\n}\n.vue-loading-button:not(.loading) .spinner span {\n  transition-delay: 0s;\n}\n.spinner span:nth-child(1) {\n  animation-delay: -0.45s;\n}\n.spinner span:nth-child(2) {\n  animation-delay: -0.3s;\n}\n.spinner span:nth-child(3) {\n  animation-delay: -0.15s;\n}\n@keyframes spinner {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n.loading {\n  padding-right: 2.5em;\n}\n.loading .spinner span {\n  opacity: 1;\n}\n</style>\n']},media:void 0})},r,"data-v-2a9079c4",!1,void 0,t,void 0),p={install:A},c=null;return"undefined"!=typeof window?c=window.Vue:"undefined"!=typeof global&&(c=global.Vue),c&&c.use(p),n.install=A,n.default=u,n}({});
+var VueLoadingButton=function(n){"use strict";function r(n){return function(n,r){return t(n,r)}}function t(n,r){var t=a?r.media||"default":n,e=o[t]||(o[t]={ids:new Set,styles:[]});if(!e.ids.has(n)){e.ids.add(n);var A=r.source;if(r.map&&(A+="\n/*# sourceURL="+r.map.sources[0]+" */",A+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(r.map))))+" */"),e.element||(e.element=document.createElement("style"),e.element.type="text/css",r.media&&e.element.setAttribute("media",r.media),i.appendChild(e.element)),"styleSheet"in e.element)e.styles.push(A),e.element.styleSheet.cssText=e.styles.filter(Boolean).join("\n");else{var s=e.ids.size-1,d=document.createTextNode(A),l=e.element.childNodes;l[s]&&e.element.removeChild(l[s]),l.length?e.element.insertBefore(d,l[s]):e.element.appendChild(d)}}}function e(n){e.installed||(e.installed=!0,n.component("VueLoadingButton",p))}var A={name:"VueLoadingButton",props:{loading:{type:Boolean,required:!1,default:!1},styled:{type:Boolean,required:!1,default:!0}}},a="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase()),i=document.head||document.getElementsByTagName("head")[0],o={},s=A;A.__file="C:\\Users\\shwilliam\\GitHub\\vue-loading-button\\src\\vue-loading-button.vue";var d=function(){var n=this,r=n.$createElement;return(n._self._c||r)("button",{class:{"vue-loading-button":!0,"default-styles":n.styled,loading:n.loading},attrs:{disabled:n.loading,type:"button"}},[n._t("default",[n._v("Submit")]),n._v(" "),n._m(0)],2)},l=[function(){var n=this,r=n.$createElement,t=n._self._c||r;return t("span",{staticClass:"spinner"},[t("span"),n._v(" "),t("span"),n._v(" "),t("span"),n._v(" "),t("span")])}];d._withStripped=!0;var p=function(n,r,t,e,A,a,i,o,s,d){"function"==typeof i&&(s=o,o=i,i=!1);var l="function"==typeof t?t.options:t;n&&n.render&&(l.render=n.render,l.staticRenderFns=n.staticRenderFns,l._compiled=!0,A&&(l.functional=!0)),e&&(l._scopeId=e);var p;if(a?(p=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__),r&&r.call(this,s(n)),n&&n._registeredComponents&&n._registeredComponents.add(a)},l._ssrRegister=p):r&&(p=i?function(){r.call(this,d(this.$root.$options.shadowRoot))}:function(n){r.call(this,o(n))}),p)if(l.functional){var u=l.render;l.render=function(n,r){return p.call(r),u(n,r)}}else{var C=l.beforeCreate;l.beforeCreate=C?[].concat(C,p):[p]}return t}({render:d,staticRenderFns:l},function(n){n&&n("data-v-1d441d3c_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\r\n/* reset */\nbutton[data-v-1d441d3c] {\r\n  font-family: inherit;\r\n  font-size: 100%;\r\n  font-size: 1.4rem;\r\n  line-height: 1.15;\r\n  margin: 0;\r\n  overflow: visible;\r\n  text-transform: none;\r\n  -webkit-appearance: button;\n}\nbutton[data-v-1d441d3c]::-moz-focus-inner {\r\n  border-style: none;\r\n  padding: 0;\n}\nbutton[data-v-1d441d3c]:-moz-focusring {\r\n  outline: 1px dotted ButtonText;\n}\r\n\r\n/* loading styles */\nbutton[data-v-1d441d3c] {\r\n  position: relative;\r\n  -webkit-transition: all 0.2s;\r\n  transition: all 0.2s;\r\n  transition-timing-function: ease-in;\n}\n.spinner[data-v-1d441d3c] {\r\n  line-height: 1.15;\r\n  position: absolute;\r\n  top: 50%;\r\n  left: auto;\r\n  right: 1.7rem;\r\n  margin: -0.5em;\r\n  opacity: 0;\r\n  transition-property: padding, opacity;\r\n  transition-duration: 0.2s, 0.2s;\r\n  transition-timing-function: ease-in, ease;\r\n  transition-delay: 0s, 0.2s;\n}\n.spinner span[data-v-1d441d3c] {\r\n  box-sizing: border-box;\r\n  display: inline-block;\r\n  position: absolute;\r\n  right: 0;\r\n  top: 0.15rem;\r\n  width: 1rem;\r\n  height: 1rem;\r\n  opacity: 1;\r\n  border: 3.4px solid #888;\r\n  border-radius: 50%;\r\n  animation: spinner-data-v-1d441d3c 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;\r\n  border-color: #888 transparent transparent transparent;\n}\n.spinner span[data-v-1d441d3c]:nth-child(1) {\r\n  animation-delay: 0.45s;\n}\n.spinner span[data-v-1d441d3c]:nth-child(2) {\r\n  animation-delay: 0.3s;\n}\n.spinner span[data-v-1d441d3c]:nth-child(3) {\r\n  animation-delay: 0.15s;\n}\n.loading[data-v-1d441d3c] {\r\n  padding-right: 3rem !important;\n}\n.loading .spinner[data-v-1d441d3c] {\r\n  opacity: 1;\n}\n.loading .spinner span[data-v-1d441d3c] {\r\n  opacity: 1;\n}\nbutton[data-v-1d441d3c]:not(:disabled) {\r\n  transition-delay: 0.2s;\n}\nbutton:not(:disabled) .spinner span[data-v-1d441d3c] {\r\n  box-shadow: 0 0 0 0.2rem #888 inset;\r\n  border: 7.4px solid transparent;\r\n  -webkit-transition: all 0.4s;\r\n  transition: all 0.4s;\n}\nbutton:not(:disabled) .spinner span[data-v-1d441d3c]:nth-child(1) {\r\n  transform: rotate(0deg) !important;\n}\nbutton:not(:disabled) .spinner span[data-v-1d441d3c]:nth-child(2) {\r\n  transform: rotate(90deg) !important;\n}\nbutton:not(:disabled) .spinner span[data-v-1d441d3c]:nth-child(3) {\r\n  transform: rotate(180deg) !important;\n}\nbutton:not(:disabled) .spinner span[data-v-1d441d3c]:nth-child(4) {\r\n  transform: rotate(270deg) !important;\n}\n@keyframes spinner-data-v-1d441d3c {\n0% {\r\n    transform: rotate(0deg);\n}\n100% {\r\n    transform: rotate(360deg);\n}\n}\r\n\r\n/* default styles */\n.default-styles[data-v-1d441d3c] {\r\n  color: white;\r\n  background-color: blue;\r\n  border: solid 1px transparent;\r\n  border-radius: 4px;\r\n  cursor: pointer;\r\n  padding: 8px 16.5px 8px 16px;\r\n  line-height: 1.9rem;\n}\n.default-styles[data-v-1d441d3c]:disabled {\r\n  pointer-events: stroke;\r\n  cursor: not-allowed;\n}\n.default-styles[data-v-1d441d3c]:focus {\r\n  outline: none;\r\n  box-shadow: 0 0 0 3px lightblue, 0 0 0 1.5px lightblue;\n}\n.default-styles .spinner span[data-v-1d441d3c] {\r\n  top: 0rem;\r\n  width: 1.2rem;\r\n  height: 1.2rem;\r\n  border: 3.4px solid #fff;\r\n  border-color: #fff transparent transparent transparent;\n}\n.default-styles:not(:disabled) .spinner span[data-v-1d441d3c] {\r\n  border: 8.4px solid transparent;\r\n  box-shadow: 0 0 0 0.1rem #fff inset;\n}\r\n",map:{version:3,sources:["C:\\Users\\shwilliam\\GitHub\\vue-loading-button/C:\\Users\\shwilliam\\GitHub\\vue-loading-button\\src\\vue-loading-button.vue"],names:[],mappings:";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuCA,UAAA;AACA;EACA,oBAAA;EACA,eAAA;EACA,iBAAA;EACA,iBAAA;EACA,SAAA;EACA,iBAAA;EACA,oBAAA;EACA,0BAAA;AACA;AACA;EACA,kBAAA;EACA,UAAA;AACA;AACA;EACA,8BAAA;AACA;;AAEA,mBAAA;AACA;EACA,kBAAA;EACA,4BAAA;EACA,oBAAA;EACA,mCAAA;AACA;AACA;EACA,iBAAA;EACA,kBAAA;EACA,QAAA;EACA,UAAA;EACA,aAAA;EACA,cAAA;EACA,UAAA;EACA,qCAAA;EACA,+BAAA;EACA,yCAAA;EACA,0BAAA;AACA;AACA;EACA,sBAAA;EACA,qBAAA;EACA,kBAAA;EACA,QAAA;EACA,YAAA;EACA,WAAA;EACA,YAAA;EACA,UAAA;EACA,wBAAA;EACA,kBAAA;EACA,6EAAA;EACA,sDAAA;AACA;AACA;EACA,sBAAA;AACA;AACA;EACA,qBAAA;AACA;AACA;EACA,sBAAA;AACA;AACA;EACA,8BAAA;AACA;AACA;EACA,UAAA;AACA;AACA;EACA,UAAA;AACA;AACA;EACA,sBAAA;AACA;AACA;EACA,mCAAA;EACA,+BAAA;EACA,4BAAA;EACA,oBAAA;AACA;AACA;EACA,kCAAA;AACA;AACA;EACA,mCAAA;AACA;AACA;EACA,oCAAA;AACA;AACA;EACA,oCAAA;AACA;AACA;AACA;IACA,uBAAA;AACA;AACA;IACA,yBAAA;AACA;AACA;;AAEA,mBAAA;AACA;EACA,YAAA;EACA,sBAAA;EACA,6BAAA;EACA,kBAAA;EACA,eAAA;EACA,4BAAA;EACA,mBAAA;AACA;AACA;EACA,sBAAA;EACA,mBAAA;AACA;AACA;EACA,aAAA;EACA,sDAAA;AACA;AACA;EACA,SAAA;EACA,aAAA;EACA,cAAA;EACA,wBAAA;EACA,sDAAA;AACA;AACA;EACA,+BAAA;EACA,mCAAA;AACA",file:"vue-loading-button.vue",sourcesContent:['<template>\r\n  <button\r\n    :class="{\r\n      \'vue-loading-button\': true,\r\n      \'default-styles\': styled,\r\n      \'loading\': loading,\r\n    }"\r\n    :disabled="loading"\r\n    type="button"\r\n  >\r\n    <slot>Submit</slot>\r\n    <span class="spinner">\r\n      <span></span>\r\n      <span></span>\r\n      <span></span>\r\n      <span></span>\r\n    </span>\r\n  </button>\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n  name: "VueLoadingButton",\r\n  props: {\r\n    loading: {\r\n      type: Boolean,\r\n      required: false,\r\n      default: false\r\n    },\r\n    styled: {\r\n      type: Boolean,\r\n      required: false,\r\n      default: true\r\n    }\r\n  }\r\n};\r\n<\/script>\r\n\r\n<style scoped>\r\n/* reset */\r\nbutton {\r\n  font-family: inherit;\r\n  font-size: 100%;\r\n  font-size: 1.4rem;\r\n  line-height: 1.15;\r\n  margin: 0;\r\n  overflow: visible;\r\n  text-transform: none;\r\n  -webkit-appearance: button;\r\n}\r\nbutton::-moz-focus-inner {\r\n  border-style: none;\r\n  padding: 0;\r\n}\r\nbutton:-moz-focusring {\r\n  outline: 1px dotted ButtonText;\r\n}\r\n\r\n/* loading styles */\r\nbutton {\r\n  position: relative;\r\n  -webkit-transition: all 0.2s;\r\n  transition: all 0.2s;\r\n  transition-timing-function: ease-in;\r\n}\r\n.spinner {\r\n  line-height: 1.15;\r\n  position: absolute;\r\n  top: 50%;\r\n  left: auto;\r\n  right: 1.7rem;\r\n  margin: -0.5em;\r\n  opacity: 0;\r\n  transition-property: padding, opacity;\r\n  transition-duration: 0.2s, 0.2s;\r\n  transition-timing-function: ease-in, ease;\r\n  transition-delay: 0s, 0.2s;\r\n}\r\n.spinner span {\r\n  box-sizing: border-box;\r\n  display: inline-block;\r\n  position: absolute;\r\n  right: 0;\r\n  top: 0.15rem;\r\n  width: 1rem;\r\n  height: 1rem;\r\n  opacity: 1;\r\n  border: 3.4px solid #888;\r\n  border-radius: 50%;\r\n  animation: spinner 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;\r\n  border-color: #888 transparent transparent transparent;\r\n}\r\n.spinner span:nth-child(1) {\r\n  animation-delay: 0.45s;\r\n}\r\n.spinner span:nth-child(2) {\r\n  animation-delay: 0.3s;\r\n}\r\n.spinner span:nth-child(3) {\r\n  animation-delay: 0.15s;\r\n}\r\n.loading {\r\n  padding-right: 3rem !important;\r\n}\r\n.loading .spinner {\r\n  opacity: 1;\r\n}\r\n.loading .spinner span {\r\n  opacity: 1;\r\n}\r\nbutton:not(:disabled) {\r\n  transition-delay: 0.2s;\r\n}\r\nbutton:not(:disabled) .spinner span {\r\n  box-shadow: 0 0 0 0.2rem #888 inset;\r\n  border: 7.4px solid transparent;\r\n  -webkit-transition: all 0.4s;\r\n  transition: all 0.4s;\r\n}\r\nbutton:not(:disabled) .spinner span:nth-child(1) {\r\n  transform: rotate(0deg) !important;\r\n}\r\nbutton:not(:disabled) .spinner span:nth-child(2) {\r\n  transform: rotate(90deg) !important;\r\n}\r\nbutton:not(:disabled) .spinner span:nth-child(3) {\r\n  transform: rotate(180deg) !important;\r\n}\r\nbutton:not(:disabled) .spinner span:nth-child(4) {\r\n  transform: rotate(270deg) !important;\r\n}\r\n@keyframes spinner {\r\n  0% {\r\n    transform: rotate(0deg);\r\n  }\r\n  100% {\r\n    transform: rotate(360deg);\r\n  }\r\n}\r\n\r\n/* default styles */\r\n.default-styles {\r\n  color: white;\r\n  background-color: blue;\r\n  border: solid 1px transparent;\r\n  border-radius: 4px;\r\n  cursor: pointer;\r\n  padding: 8px 16.5px 8px 16px;\r\n  line-height: 1.9rem;\r\n}\r\n.default-styles:disabled {\r\n  pointer-events: stroke;\r\n  cursor: not-allowed;\r\n}\r\n.default-styles:focus {\r\n  outline: none;\r\n  box-shadow: 0 0 0 3px lightblue, 0 0 0 1.5px lightblue;\r\n}\r\n.default-styles .spinner span {\r\n  top: 0rem;\r\n  width: 1.2rem;\r\n  height: 1.2rem;\r\n  border: 3.4px solid #fff;\r\n  border-color: #fff transparent transparent transparent;\r\n}\r\n.default-styles:not(:disabled) .spinner span {\r\n  border: 8.4px solid transparent;\r\n  box-shadow: 0 0 0 0.1rem #fff inset;\r\n}\r\n</style>\r\n']},media:void 0})},s,"data-v-1d441d3c",!1,void 0,r,void 0),u={install:e},C=null;return"undefined"!=typeof window?C=window.Vue:"undefined"!=typeof global&&(C=global.Vue),C&&C.use(u),n.install=e,n.default=p,n}({});

dist/vue-loading-button.umd.js

@@ -7,2 +7,23 @@ (function (global, factory) {
 
+  //
+  //
+  //
+  //
+  //
+  //
+  //
+  //
+  //
+  //
+  //
+  //
+  //
+  //
+  //
+  //
+  //
+  //
+  //
+  //
+
   var script = {
@@ -16,3 +37,8 @@ name: "VueLoadingButton",
       },
-    },
+      styled: {
+        type: Boolean,
+        required: false,
+        default: true
+      }
+    }
   };
@@ -148,3 +174,3 @@
   // For security concerns, we use only base name in production mode. See https://github.com/vuejs/rollup-plugin-vue/issues/258
-  script.__file = "C:\\Users\\William L\\GitHub\\vue-loading-button\\src\\vue-loading-button.vue";
+  script.__file = "C:\\Users\\shwilliam\\GitHub\\vue-loading-button\\src\\vue-loading-button.vue";
 
@@ -161,5 +187,6 @@ /* template */
           "vue-loading-button": true,
+          "default-styles": _vm.styled,
           loading: _vm.loading
         },
-        attrs: { type: "button" }
+        attrs: { disabled: _vm.loading, type: "button" }
       },
@@ -191,7 +218,7 @@ [_vm._t("default", [_vm._v("Submit")]), _vm._v(" "), _vm._m(0)],
       if (!inject) { return }
-      inject("data-v-2a9079c4_0", { source: "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n/* reset */\n.vue-loading-button[data-v-2a9079c4] {\n  font-family: inherit;\n  font-size: 100%;\n  line-height: 1.15;\n  margin: 0;\n  overflow: visible;\n  text-transform: none;\n  -webkit-appearance: button;\n}\n.vue-loading-button[data-v-2a9079c4]::-moz-focus-inner {\n  border-style: none;\n  padding: 0;\n}\n.vue-loading-button[data-v-2a9079c4]:-moz-focusring {\n  outline: 1px dotted ButtonText;\n}\n/* styles */\n.vue-loading-button[data-v-2a9079c4] {\n  color: white;\n  background-color: blue;\n  border: solid 1px transparent;\n  border-radius: 4px;\n  cursor: pointer;\n  padding: 8px 14px;\n  line-height: 28px;\n  font-size: 20px;\n  position: relative;\n  -webkit-transition: all 0.2s;\n  transition: all 0.2s;\n  transition-timing-function: ease-in;\n  overflow: hidden;\n}\n.vue-loading-button[data-v-2a9079c4]:focus {\n  outline: none;\n  box-shadow: 0 0 0 3px lightblue,\n    0 0 0 1.5px lightblue;\n}\n.vue-loading-button[data-v-2a9079c4]:not(.loading) {\n  transition-delay: 0.3s;\n}\n.vue-loading-button > .spinner[data-v-2a9079c4] {\n  line-height: 1.15;\n  position: absolute;\n  top: 50%;\n  left: auto;\n  right: 1.2em;\n  margin: -0.5em;\n  -webkit-transition: all 0.2s;\n  transition: all 0.2s;\n  transition-timing-function: ease-in;\n}\n.spinner span[data-v-2a9079c4] {\n  box-sizing: border-box;\n  display: inline-block;\n  position: absolute;\n  right: 0;\n  width: 20px;\n  height: 20px;\n  opacity: 0;\n  border: 4px solid #fff;\n  border-radius: 50%;\n  animation: spinner-data-v-2a9079c4 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n  border-color: #fff transparent transparent transparent;\n  -webkit-transition: opacity 0.3s;\n  transition: opacity 0.3s;\n  transition-timing-function: ease;\n  transition-delay: 0.2s;\n}\n.vue-loading-button:not(.loading) .spinner span[data-v-2a9079c4] {\n  transition-delay: 0s;\n}\n.spinner span[data-v-2a9079c4]:nth-child(1) {\n  animation-delay: -0.45s;\n}\n.spinner span[data-v-2a9079c4]:nth-child(2) {\n  animation-delay: -0.3s;\n}\n.spinner span[data-v-2a9079c4]:nth-child(3) {\n  animation-delay: -0.15s;\n}\n@keyframes spinner-data-v-2a9079c4 {\n0% {\n    transform: rotate(0deg);\n}\n100% {\n    transform: rotate(360deg);\n}\n}\n.loading[data-v-2a9079c4] {\n  padding-right: 2.5em;\n}\n.loading .spinner span[data-v-2a9079c4] {\n  opacity: 1;\n}\n", map: {"version":3,"sources":["C:\\Users\\William L\\GitHub\\vue-loading-button/C:\\Users\\William L\\GitHub\\vue-loading-button\\src\\vue-loading-button.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgCA,UAAA;AACA;EACA,oBAAA;EACA,eAAA;EACA,iBAAA;EACA,SAAA;EACA,iBAAA;EACA,oBAAA;EACA,0BAAA;AACA;AACA;EACA,kBAAA;EACA,UAAA;AACA;AACA;EACA,8BAAA;AACA;AACA,WAAA;AACA;EACA,YAAA;EACA,sBAAA;EACA,6BAAA;EACA,kBAAA;EACA,eAAA;EACA,iBAAA;EACA,iBAAA;EACA,eAAA;EACA,kBAAA;EACA,4BAAA;EACA,oBAAA;EACA,mCAAA;EACA,gBAAA;AACA;AACA;EACA,aAAA;EACA;yBACA;AACA;AACA;EACA,sBAAA;AACA;AACA;EACA,iBAAA;EACA,kBAAA;EACA,QAAA;EACA,UAAA;EACA,YAAA;EACA,cAAA;EACA,4BAAA;EACA,oBAAA;EACA,mCAAA;AACA;AACA;EACA,sBAAA;EACA,qBAAA;EACA,kBAAA;EACA,QAAA;EACA,WAAA;EACA,YAAA;EACA,UAAA;EACA,sBAAA;EACA,kBAAA;EACA,6EAAA;EACA,sDAAA;EACA,gCAAA;EACA,wBAAA;EACA,gCAAA;EACA,sBAAA;AACA;AACA;EACA,oBAAA;AACA;AACA;EACA,uBAAA;AACA;AACA;EACA,sBAAA;AACA;AACA;EACA,uBAAA;AACA;AACA;AACA;IACA,uBAAA;AACA;AACA;IACA,yBAAA;AACA;AACA;AACA;EACA,oBAAA;AACA;AACA;EACA,UAAA;AACA","file":"vue-loading-button.vue","sourcesContent":["<script>\nexport default {\n  name: \"VueLoadingButton\",\n  props: {\n    loading: {\n      type: Boolean,\n      required: false,\n      default: false\n    },\n  },\n};\n</script>\n\n<template>\n  <button\n    :class=\"{\n      'vue-loading-button': true,\n      'loading': loading,\n    }\"\n    type=\"button\"\n  >\n    <slot>Submit</slot>\n    <span class=\"spinner\">\n      <span></span>\n      <span></span>\n      <span></span>\n      <span></span>\n    </span>\n  </button>\n</template>\n\n<style scoped>\n/* reset */\n.vue-loading-button {\n  font-family: inherit;\n  font-size: 100%;\n  line-height: 1.15;\n  margin: 0;\n  overflow: visible;\n  text-transform: none;\n  -webkit-appearance: button;\n}\n.vue-loading-button::-moz-focus-inner {\n  border-style: none;\n  padding: 0;\n}\n.vue-loading-button:-moz-focusring {\n  outline: 1px dotted ButtonText;\n}\n/* styles */\n.vue-loading-button {\n  color: white;\n  background-color: blue;\n  border: solid 1px transparent;\n  border-radius: 4px;\n  cursor: pointer;\n  padding: 8px 14px;\n  line-height: 28px;\n  font-size: 20px;\n  position: relative;\n  -webkit-transition: all 0.2s;\n  transition: all 0.2s;\n  transition-timing-function: ease-in;\n  overflow: hidden;\n}\n.vue-loading-button:focus {\n  outline: none;\n  box-shadow: 0 0 0 3px lightblue,\n    0 0 0 1.5px lightblue;\n}\n.vue-loading-button:not(.loading) {\n  transition-delay: 0.3s;\n}\n.vue-loading-button > .spinner {\n  line-height: 1.15;\n  position: absolute;\n  top: 50%;\n  left: auto;\n  right: 1.2em;\n  margin: -0.5em;\n  -webkit-transition: all 0.2s;\n  transition: all 0.2s;\n  transition-timing-function: ease-in;\n}\n.spinner span {\n  box-sizing: border-box;\n  display: inline-block;\n  position: absolute;\n  right: 0;\n  width: 20px;\n  height: 20px;\n  opacity: 0;\n  border: 4px solid #fff;\n  border-radius: 50%;\n  animation: spinner 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n  border-color: #fff transparent transparent transparent;\n  -webkit-transition: opacity 0.3s;\n  transition: opacity 0.3s;\n  transition-timing-function: ease;\n  transition-delay: 0.2s;\n}\n.vue-loading-button:not(.loading) .spinner span {\n  transition-delay: 0s;\n}\n.spinner span:nth-child(1) {\n  animation-delay: -0.45s;\n}\n.spinner span:nth-child(2) {\n  animation-delay: -0.3s;\n}\n.spinner span:nth-child(3) {\n  animation-delay: -0.15s;\n}\n@keyframes spinner {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n.loading {\n  padding-right: 2.5em;\n}\n.loading .spinner span {\n  opacity: 1;\n}\n</style>\n"]}, media: undefined });
+      inject("data-v-1d441d3c_0", { source: "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\r\n/* reset */\nbutton[data-v-1d441d3c] {\r\n  font-family: inherit;\r\n  font-size: 100%;\r\n  font-size: 1.4rem;\r\n  line-height: 1.15;\r\n  margin: 0;\r\n  overflow: visible;\r\n  text-transform: none;\r\n  -webkit-appearance: button;\n}\nbutton[data-v-1d441d3c]::-moz-focus-inner {\r\n  border-style: none;\r\n  padding: 0;\n}\nbutton[data-v-1d441d3c]:-moz-focusring {\r\n  outline: 1px dotted ButtonText;\n}\r\n\r\n/* loading styles */\nbutton[data-v-1d441d3c] {\r\n  position: relative;\r\n  -webkit-transition: all 0.2s;\r\n  transition: all 0.2s;\r\n  transition-timing-function: ease-in;\n}\n.spinner[data-v-1d441d3c] {\r\n  line-height: 1.15;\r\n  position: absolute;\r\n  top: 50%;\r\n  left: auto;\r\n  right: 1.7rem;\r\n  margin: -0.5em;\r\n  opacity: 0;\r\n  transition-property: padding, opacity;\r\n  transition-duration: 0.2s, 0.2s;\r\n  transition-timing-function: ease-in, ease;\r\n  transition-delay: 0s, 0.2s;\n}\n.spinner span[data-v-1d441d3c] {\r\n  box-sizing: border-box;\r\n  display: inline-block;\r\n  position: absolute;\r\n  right: 0;\r\n  top: 0.15rem;\r\n  width: 1rem;\r\n  height: 1rem;\r\n  opacity: 1;\r\n  border: 3.4px solid #888;\r\n  border-radius: 50%;\r\n  animation: spinner-data-v-1d441d3c 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;\r\n  border-color: #888 transparent transparent transparent;\n}\n.spinner span[data-v-1d441d3c]:nth-child(1) {\r\n  animation-delay: 0.45s;\n}\n.spinner span[data-v-1d441d3c]:nth-child(2) {\r\n  animation-delay: 0.3s;\n}\n.spinner span[data-v-1d441d3c]:nth-child(3) {\r\n  animation-delay: 0.15s;\n}\n.loading[data-v-1d441d3c] {\r\n  padding-right: 3rem !important;\n}\n.loading .spinner[data-v-1d441d3c] {\r\n  opacity: 1;\n}\n.loading .spinner span[data-v-1d441d3c] {\r\n  opacity: 1;\n}\nbutton[data-v-1d441d3c]:not(:disabled) {\r\n  transition-delay: 0.2s;\n}\nbutton:not(:disabled) .spinner span[data-v-1d441d3c] {\r\n  box-shadow: 0 0 0 0.2rem #888 inset;\r\n  border: 7.4px solid transparent;\r\n  -webkit-transition: all 0.4s;\r\n  transition: all 0.4s;\n}\nbutton:not(:disabled) .spinner span[data-v-1d441d3c]:nth-child(1) {\r\n  transform: rotate(0deg) !important;\n}\nbutton:not(:disabled) .spinner span[data-v-1d441d3c]:nth-child(2) {\r\n  transform: rotate(90deg) !important;\n}\nbutton:not(:disabled) .spinner span[data-v-1d441d3c]:nth-child(3) {\r\n  transform: rotate(180deg) !important;\n}\nbutton:not(:disabled) .spinner span[data-v-1d441d3c]:nth-child(4) {\r\n  transform: rotate(270deg) !important;\n}\n@keyframes spinner-data-v-1d441d3c {\n0% {\r\n    transform: rotate(0deg);\n}\n100% {\r\n    transform: rotate(360deg);\n}\n}\r\n\r\n/* default styles */\n.default-styles[data-v-1d441d3c] {\r\n  color: white;\r\n  background-color: blue;\r\n  border: solid 1px transparent;\r\n  border-radius: 4px;\r\n  cursor: pointer;\r\n  padding: 8px 16.5px 8px 16px;\r\n  line-height: 1.9rem;\n}\n.default-styles[data-v-1d441d3c]:disabled {\r\n  pointer-events: stroke;\r\n  cursor: not-allowed;\n}\n.default-styles[data-v-1d441d3c]:focus {\r\n  outline: none;\r\n  box-shadow: 0 0 0 3px lightblue, 0 0 0 1.5px lightblue;\n}\n.default-styles .spinner span[data-v-1d441d3c] {\r\n  top: 0rem;\r\n  width: 1.2rem;\r\n  height: 1.2rem;\r\n  border: 3.4px solid #fff;\r\n  border-color: #fff transparent transparent transparent;\n}\n.default-styles:not(:disabled) .spinner span[data-v-1d441d3c] {\r\n  border: 8.4px solid transparent;\r\n  box-shadow: 0 0 0 0.1rem #fff inset;\n}\r\n", map: {"version":3,"sources":["C:\\Users\\shwilliam\\GitHub\\vue-loading-button/C:\\Users\\shwilliam\\GitHub\\vue-loading-button\\src\\vue-loading-button.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuCA,UAAA;AACA;EACA,oBAAA;EACA,eAAA;EACA,iBAAA;EACA,iBAAA;EACA,SAAA;EACA,iBAAA;EACA,oBAAA;EACA,0BAAA;AACA;AACA;EACA,kBAAA;EACA,UAAA;AACA;AACA;EACA,8BAAA;AACA;;AAEA,mBAAA;AACA;EACA,kBAAA;EACA,4BAAA;EACA,oBAAA;EACA,mCAAA;AACA;AACA;EACA,iBAAA;EACA,kBAAA;EACA,QAAA;EACA,UAAA;EACA,aAAA;EACA,cAAA;EACA,UAAA;EACA,qCAAA;EACA,+BAAA;EACA,yCAAA;EACA,0BAAA;AACA;AACA;EACA,sBAAA;EACA,qBAAA;EACA,kBAAA;EACA,QAAA;EACA,YAAA;EACA,WAAA;EACA,YAAA;EACA,UAAA;EACA,wBAAA;EACA,kBAAA;EACA,6EAAA;EACA,sDAAA;AACA;AACA;EACA,sBAAA;AACA;AACA;EACA,qBAAA;AACA;AACA;EACA,sBAAA;AACA;AACA;EACA,8BAAA;AACA;AACA;EACA,UAAA;AACA;AACA;EACA,UAAA;AACA;AACA;EACA,sBAAA;AACA;AACA;EACA,mCAAA;EACA,+BAAA;EACA,4BAAA;EACA,oBAAA;AACA;AACA;EACA,kCAAA;AACA;AACA;EACA,mCAAA;AACA;AACA;EACA,oCAAA;AACA;AACA;EACA,oCAAA;AACA;AACA;AACA;IACA,uBAAA;AACA;AACA;IACA,yBAAA;AACA;AACA;;AAEA,mBAAA;AACA;EACA,YAAA;EACA,sBAAA;EACA,6BAAA;EACA,kBAAA;EACA,eAAA;EACA,4BAAA;EACA,mBAAA;AACA;AACA;EACA,sBAAA;EACA,mBAAA;AACA;AACA;EACA,aAAA;EACA,sDAAA;AACA;AACA;EACA,SAAA;EACA,aAAA;EACA,cAAA;EACA,wBAAA;EACA,sDAAA;AACA;AACA;EACA,+BAAA;EACA,mCAAA;AACA","file":"vue-loading-button.vue","sourcesContent":["<template>\r\n  <button\r\n    :class=\"{\r\n      'vue-loading-button': true,\r\n      'default-styles': styled,\r\n      'loading': loading,\r\n    }\"\r\n    :disabled=\"loading\"\r\n    type=\"button\"\r\n  >\r\n    <slot>Submit</slot>\r\n    <span class=\"spinner\">\r\n      <span></span>\r\n      <span></span>\r\n      <span></span>\r\n      <span></span>\r\n    </span>\r\n  </button>\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n  name: \"VueLoadingButton\",\r\n  props: {\r\n    loading: {\r\n      type: Boolean,\r\n      required: false,\r\n      default: false\r\n    },\r\n    styled: {\r\n      type: Boolean,\r\n      required: false,\r\n      default: true\r\n    }\r\n  }\r\n};\r\n</script>\r\n\r\n<style scoped>\r\n/* reset */\r\nbutton {\r\n  font-family: inherit;\r\n  font-size: 100%;\r\n  font-size: 1.4rem;\r\n  line-height: 1.15;\r\n  margin: 0;\r\n  overflow: visible;\r\n  text-transform: none;\r\n  -webkit-appearance: button;\r\n}\r\nbutton::-moz-focus-inner {\r\n  border-style: none;\r\n  padding: 0;\r\n}\r\nbutton:-moz-focusring {\r\n  outline: 1px dotted ButtonText;\r\n}\r\n\r\n/* loading styles */\r\nbutton {\r\n  position: relative;\r\n  -webkit-transition: all 0.2s;\r\n  transition: all 0.2s;\r\n  transition-timing-function: ease-in;\r\n}\r\n.spinner {\r\n  line-height: 1.15;\r\n  position: absolute;\r\n  top: 50%;\r\n  left: auto;\r\n  right: 1.7rem;\r\n  margin: -0.5em;\r\n  opacity: 0;\r\n  transition-property: padding, opacity;\r\n  transition-duration: 0.2s, 0.2s;\r\n  transition-timing-function: ease-in, ease;\r\n  transition-delay: 0s, 0.2s;\r\n}\r\n.spinner span {\r\n  box-sizing: border-box;\r\n  display: inline-block;\r\n  position: absolute;\r\n  right: 0;\r\n  top: 0.15rem;\r\n  width: 1rem;\r\n  height: 1rem;\r\n  opacity: 1;\r\n  border: 3.4px solid #888;\r\n  border-radius: 50%;\r\n  animation: spinner 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;\r\n  border-color: #888 transparent transparent transparent;\r\n}\r\n.spinner span:nth-child(1) {\r\n  animation-delay: 0.45s;\r\n}\r\n.spinner span:nth-child(2) {\r\n  animation-delay: 0.3s;\r\n}\r\n.spinner span:nth-child(3) {\r\n  animation-delay: 0.15s;\r\n}\r\n.loading {\r\n  padding-right: 3rem !important;\r\n}\r\n.loading .spinner {\r\n  opacity: 1;\r\n}\r\n.loading .spinner span {\r\n  opacity: 1;\r\n}\r\nbutton:not(:disabled) {\r\n  transition-delay: 0.2s;\r\n}\r\nbutton:not(:disabled) .spinner span {\r\n  box-shadow: 0 0 0 0.2rem #888 inset;\r\n  border: 7.4px solid transparent;\r\n  -webkit-transition: all 0.4s;\r\n  transition: all 0.4s;\r\n}\r\nbutton:not(:disabled) .spinner span:nth-child(1) {\r\n  transform: rotate(0deg) !important;\r\n}\r\nbutton:not(:disabled) .spinner span:nth-child(2) {\r\n  transform: rotate(90deg) !important;\r\n}\r\nbutton:not(:disabled) .spinner span:nth-child(3) {\r\n  transform: rotate(180deg) !important;\r\n}\r\nbutton:not(:disabled) .spinner span:nth-child(4) {\r\n  transform: rotate(270deg) !important;\r\n}\r\n@keyframes spinner {\r\n  0% {\r\n    transform: rotate(0deg);\r\n  }\r\n  100% {\r\n    transform: rotate(360deg);\r\n  }\r\n}\r\n\r\n/* default styles */\r\n.default-styles {\r\n  color: white;\r\n  background-color: blue;\r\n  border: solid 1px transparent;\r\n  border-radius: 4px;\r\n  cursor: pointer;\r\n  padding: 8px 16.5px 8px 16px;\r\n  line-height: 1.9rem;\r\n}\r\n.default-styles:disabled {\r\n  pointer-events: stroke;\r\n  cursor: not-allowed;\r\n}\r\n.default-styles:focus {\r\n  outline: none;\r\n  box-shadow: 0 0 0 3px lightblue, 0 0 0 1.5px lightblue;\r\n}\r\n.default-styles .spinner span {\r\n  top: 0rem;\r\n  width: 1.2rem;\r\n  height: 1.2rem;\r\n  border: 3.4px solid #fff;\r\n  border-color: #fff transparent transparent transparent;\r\n}\r\n.default-styles:not(:disabled) .spinner span {\r\n  border: 8.4px solid transparent;\r\n  box-shadow: 0 0 0 0.1rem #fff inset;\r\n}\r\n</style>\r\n"]}, media: undefined });
 
     };
     /* scoped */
-    var __vue_scope_id__ = "data-v-2a9079c4";
+    var __vue_scope_id__ = "data-v-1d441d3c";
     /* module identifier */
@@ -198,0 +225,0 @@ var __vue_module_identifier__ = undefined;

package.json

 {
   "name": "vue-loading-button",
-  "version": "0.1.1",
-  "description": "",
+  "version": "0.1.2",
+  "description": "Vue button with slideout loading indicator",
   "license": "MIT",
@@ -13,3 +13,2 @@ "main": "dist/vue-loading-button.umd.js",
   "scripts": {
-    "dev": "vue serve ./src/vue-loading-button.vue",
     "example": "vue serve ./examples/example.vue",
@@ -21,2 +20,6 @@ "build": "npm run build:unpkg & npm run build:es & npm run build:umd",
   },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/shwilliam/vue-loading-button.git"
+  },
   "dependencies": {},
@@ -32,2 +35,2 @@ "devDependencies": {
   }
-}
+}

README.md

 # vue-loading-button
+
+> Straightforward Vue button component with slideout loading indicator
+
+## Props
+
+|Prop   |Type   |Default|Description                         |
+|-------|-------|-------|------------------------------------|
+|loading|boolean|false  |Controls loading indicator animation|
+|styled |boolean|false  |Disables inessential default styles |
+
+## Installation
+
+Install the package from npm by running
+
+```
+$ npm i vue-loading-button
+```
+
+or
+
+```
+$ yarn add vue-loading-button
+```
+
+## Usage
+
+Import, register and place the component in your Vue app.
+
+```
+<template>
+  [...]
+    <VueLoadingButton />
+  [...]
+</template>
+
+<script>
+import VueLoadingButton from 'vue-loading-button'
+
+[...]
+  components: {
+    VueLoadingButton,
+[...]
+</script>
+```
+
+## Dev
+
+Running example script requires @vue/cli and @vue/cli-service-global to be installed.
+Install globally by running `npm i --g @vue/cli @vue/cli-service-global` or `yarn add global vue/cli @vue/cli-service-global`
+
+## Accessibility
+
+Apply attributes, such as aria-label, directly on the element to apply them to the button.
+
+```
+<template>
+  [...]
+    <VueLoadingButton aria-label='Send message' />
+  [...]
+</template>
+```

src/index.js

@@ -0,0 +0,0 @@ import component from "./vue-loading-button.vue";

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

54736

increased by27.81%

Lines of code

641

increased by14.67%

Number of lines in readme file

63

increased by3050%

Number of low supply chain risk alerts

0

decreased by-100%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes