Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
vue-loading-button
Advanced tools
vue-loading-button - npm Package Compare versions
Comparing version 0.1.4 to 0.2.0
@@ -0,0 +0,0 @@ import vue from "rollup-plugin-vue"; |
@@ -33,3 +33,3 @@ // | ||
| required: false, | ||
| default: true | ||
| default: false | ||
| } | ||
@@ -167,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\\shwilliam\\GitHub\\vue-loading-button\\src\\vue-loading-button.vue"; | ||
| script.__file = "/mnt/c/Users/william/temp/vue-loading-button/src/vue-loading-button.vue"; | ||
@@ -210,7 +210,7 @@ /* template */ | ||
| if (!inject) { return } | ||
| 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 }); | ||
| inject("data-v-3a698022_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\n/* reset */\nbutton[data-v-3a698022] {\n font-family: inherit;\n font-size: 100%;\n font-size: 1.4rem;\n line-height: 1.15;\n margin: 0;\n overflow: visible;\n text-transform: none;\n -webkit-appearance: button;\n}\nbutton[data-v-3a698022]::-moz-focus-inner {\n border-style: none;\n padding: 0;\n}\nbutton[data-v-3a698022]:-moz-focusring {\n outline: 1px dotted ButtonText;\n}\n\n/* loading styles */\nbutton[data-v-3a698022] {\n position: relative;\n -webkit-transition: all 0.2s;\n transition: all 0.2s;\n transition-timing-function: ease-in;\n}\n.spinner[data-v-3a698022] {\n line-height: 1.15;\n position: absolute;\n top: 50%;\n left: auto;\n right: 1.7rem;\n margin: -0.5em;\n opacity: 0;\n transition-property: padding, opacity;\n transition-duration: 0.2s, 0.2s;\n transition-timing-function: ease-in, ease;\n transition-delay: 0s, 0.2s;\n}\n.spinner span[data-v-3a698022] {\n box-sizing: border-box;\n display: inline-block;\n position: absolute;\n right: 0;\n top: 0.15rem;\n width: 1rem;\n height: 1rem;\n opacity: 1;\n border: 3.4px solid #888;\n border-radius: 50%;\n animation: spinner-data-v-3a698022 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n border-color: #888 transparent transparent transparent;\n}\n.spinner span[data-v-3a698022]:nth-child(1) {\n animation-delay: 0.45s;\n}\n.spinner span[data-v-3a698022]:nth-child(2) {\n animation-delay: 0.3s;\n}\n.spinner span[data-v-3a698022]:nth-child(3) {\n animation-delay: 0.15s;\n}\n.loading[data-v-3a698022] {\n padding-right: 3rem !important;\n}\n.loading .spinner[data-v-3a698022] {\n opacity: 1;\n}\n.loading .spinner span[data-v-3a698022] {\n opacity: 1;\n}\nbutton[data-v-3a698022]:not(:disabled) {\n transition-delay: 0.2s;\n}\nbutton:not(:disabled) .spinner span[data-v-3a698022] {\n box-shadow: 0 0 0 0.2rem #888 inset;\n border: 7.4px solid transparent;\n -webkit-transition: all 0.4s;\n transition: all 0.4s;\n}\nbutton:not(:disabled) .spinner span[data-v-3a698022]:nth-child(1) {\n transform: rotate(0deg) !important;\n}\nbutton:not(:disabled) .spinner span[data-v-3a698022]:nth-child(2) {\n transform: rotate(90deg) !important;\n}\nbutton:not(:disabled) .spinner span[data-v-3a698022]:nth-child(3) {\n transform: rotate(180deg) !important;\n}\nbutton:not(:disabled) .spinner span[data-v-3a698022]:nth-child(4) {\n transform: rotate(270deg) !important;\n}\n@keyframes spinner-data-v-3a698022 {\n0% {\n transform: rotate(0deg);\n}\n100% {\n transform: rotate(360deg);\n}\n}\n\n/* optional styles */\n.default-styles[data-v-3a698022] {\n color: white;\n background-color: blue;\n border: solid 1px transparent;\n border-radius: 4px;\n cursor: pointer;\n padding: 8px 16.5px 8px 16px;\n line-height: 1.9rem;\n}\n.default-styles[data-v-3a698022]:disabled {\n pointer-events: stroke;\n cursor: not-allowed;\n}\n.default-styles[data-v-3a698022]:focus {\n outline: none;\n box-shadow: 0 0 0 3px lightblue, 0 0 0 1.5px lightblue;\n}\n.default-styles .spinner span[data-v-3a698022] {\n top: 0rem;\n width: 1.2rem;\n height: 1.2rem;\n border: 3.4px solid #fff;\n border-color: #fff transparent transparent transparent;\n}\n.default-styles:not(:disabled) .spinner span[data-v-3a698022] {\n border: 8.4px solid transparent;\n box-shadow: 0 0 0 0.1rem #fff inset;\n}\n", map: {"version":3,"sources":["/mnt/c/Users/william/temp/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,oBAAA;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>\n <button\n :class=\"{\n 'vue-loading-button': true,\n 'default-styles': styled,\n 'loading': loading,\n }\"\n :disabled=\"loading\"\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<script>\nexport default {\n name: \"VueLoadingButton\",\n props: {\n loading: {\n type: Boolean,\n required: false,\n default: false\n },\n styled: {\n type: Boolean,\n required: false,\n default: false\n }\n }\n};\n</script>\n\n<style scoped>\n/* reset */\nbutton {\n font-family: inherit;\n font-size: 100%;\n font-size: 1.4rem;\n line-height: 1.15;\n margin: 0;\n overflow: visible;\n text-transform: none;\n -webkit-appearance: button;\n}\nbutton::-moz-focus-inner {\n border-style: none;\n padding: 0;\n}\nbutton:-moz-focusring {\n outline: 1px dotted ButtonText;\n}\n\n/* loading styles */\nbutton {\n position: relative;\n -webkit-transition: all 0.2s;\n transition: all 0.2s;\n transition-timing-function: ease-in;\n}\n.spinner {\n line-height: 1.15;\n position: absolute;\n top: 50%;\n left: auto;\n right: 1.7rem;\n margin: -0.5em;\n opacity: 0;\n transition-property: padding, opacity;\n transition-duration: 0.2s, 0.2s;\n transition-timing-function: ease-in, ease;\n transition-delay: 0s, 0.2s;\n}\n.spinner span {\n box-sizing: border-box;\n display: inline-block;\n position: absolute;\n right: 0;\n top: 0.15rem;\n width: 1rem;\n height: 1rem;\n opacity: 1;\n border: 3.4px solid #888;\n border-radius: 50%;\n animation: spinner 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n border-color: #888 transparent transparent transparent;\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.loading {\n padding-right: 3rem !important;\n}\n.loading .spinner {\n opacity: 1;\n}\n.loading .spinner span {\n opacity: 1;\n}\nbutton:not(:disabled) {\n transition-delay: 0.2s;\n}\nbutton:not(:disabled) .spinner span {\n box-shadow: 0 0 0 0.2rem #888 inset;\n border: 7.4px solid transparent;\n -webkit-transition: all 0.4s;\n transition: all 0.4s;\n}\nbutton:not(:disabled) .spinner span:nth-child(1) {\n transform: rotate(0deg) !important;\n}\nbutton:not(:disabled) .spinner span:nth-child(2) {\n transform: rotate(90deg) !important;\n}\nbutton:not(:disabled) .spinner span:nth-child(3) {\n transform: rotate(180deg) !important;\n}\nbutton:not(:disabled) .spinner span:nth-child(4) {\n transform: rotate(270deg) !important;\n}\n@keyframes spinner {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n\n/* optional styles */\n.default-styles {\n color: white;\n background-color: blue;\n border: solid 1px transparent;\n border-radius: 4px;\n cursor: pointer;\n padding: 8px 16.5px 8px 16px;\n line-height: 1.9rem;\n}\n.default-styles:disabled {\n pointer-events: stroke;\n cursor: not-allowed;\n}\n.default-styles:focus {\n outline: none;\n box-shadow: 0 0 0 3px lightblue, 0 0 0 1.5px lightblue;\n}\n.default-styles .spinner span {\n top: 0rem;\n width: 1.2rem;\n height: 1.2rem;\n border: 3.4px solid #fff;\n border-color: #fff transparent transparent transparent;\n}\n.default-styles:not(:disabled) .spinner span {\n border: 8.4px solid transparent;\n box-shadow: 0 0 0 0.1rem #fff inset;\n}\n</style>\n"]}, media: undefined }); | ||
| }; | ||
| /* scoped */ | ||
| var __vue_scope_id__ = "data-v-1d441d3c"; | ||
| var __vue_scope_id__ = "data-v-3a698022"; | ||
| /* module identifier */ | ||
@@ -217,0 +217,0 @@ var __vue_module_identifier__ = undefined; |
@@ -1,1 +0,1 @@ | ||
| 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}({}); | ||
| var VueLoadingButton=function(n){"use strict";function t(n){return function(n,t){return e(n,t)}}function e(n,t){var e=i?t.media||"default":n,A=s[e]||(s[e]={ids:new Set,styles:[]});if(!A.ids.has(n)){A.ids.add(n);var a=t.source;if(t.map&&(a+="\n/*# sourceURL="+t.map.sources[0]+" */",a+="\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(a),A.element.styleSheet.cssText=A.styles.filter(Boolean).join("\n");else{var r=A.ids.size-1,d=document.createTextNode(a),l=A.element.childNodes;l[r]&&A.element.removeChild(l[r]),l.length?A.element.insertBefore(d,l[r]):A.element.appendChild(d)}}}function A(n){A.installed||(A.installed=!0,n.component("VueLoadingButton",p))}var a={name:"VueLoadingButton",props:{loading:{type:Boolean,required:!1,default:!1},styled:{type:Boolean,required:!1,default:!1}}},i="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase()),o=document.head||document.getElementsByTagName("head")[0],s={},r=a;a.__file="/mnt/c/Users/william/temp/vue-loading-button/src/vue-loading-button.vue";var d=function(){var n=this,t=n.$createElement;return(n._self._c||t)("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,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")])}];d._withStripped=!0;var p=function(n,t,e,A,a,i,o,s,r,d){"function"==typeof o&&(r=s,s=o,o=!1);var l="function"==typeof e?e.options:e;n&&n.render&&(l.render=n.render,l.staticRenderFns=n.staticRenderFns,l._compiled=!0,a&&(l.functional=!0)),A&&(l._scopeId=A);var p;if(i?(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__),t&&t.call(this,r(n)),n&&n._registeredComponents&&n._registeredComponents.add(i)},l._ssrRegister=p):t&&(p=o?function(){t.call(this,d(this.$root.$options.shadowRoot))}:function(n){t.call(this,s(n))}),p)if(l.functional){var u=l.render;l.render=function(n,t){return p.call(t),u(n,t)}}else{var C=l.beforeCreate;l.beforeCreate=C?[].concat(C,p):[p]}return e}({render:d,staticRenderFns:l},function(n){n&&n("data-v-3a698022_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\n/* reset */\nbutton[data-v-3a698022] {\n font-family: inherit;\n font-size: 100%;\n font-size: 1.4rem;\n line-height: 1.15;\n margin: 0;\n overflow: visible;\n text-transform: none;\n -webkit-appearance: button;\n}\nbutton[data-v-3a698022]::-moz-focus-inner {\n border-style: none;\n padding: 0;\n}\nbutton[data-v-3a698022]:-moz-focusring {\n outline: 1px dotted ButtonText;\n}\n\n/* loading styles */\nbutton[data-v-3a698022] {\n position: relative;\n -webkit-transition: all 0.2s;\n transition: all 0.2s;\n transition-timing-function: ease-in;\n}\n.spinner[data-v-3a698022] {\n line-height: 1.15;\n position: absolute;\n top: 50%;\n left: auto;\n right: 1.7rem;\n margin: -0.5em;\n opacity: 0;\n transition-property: padding, opacity;\n transition-duration: 0.2s, 0.2s;\n transition-timing-function: ease-in, ease;\n transition-delay: 0s, 0.2s;\n}\n.spinner span[data-v-3a698022] {\n box-sizing: border-box;\n display: inline-block;\n position: absolute;\n right: 0;\n top: 0.15rem;\n width: 1rem;\n height: 1rem;\n opacity: 1;\n border: 3.4px solid #888;\n border-radius: 50%;\n animation: spinner-data-v-3a698022 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n border-color: #888 transparent transparent transparent;\n}\n.spinner span[data-v-3a698022]:nth-child(1) {\n animation-delay: 0.45s;\n}\n.spinner span[data-v-3a698022]:nth-child(2) {\n animation-delay: 0.3s;\n}\n.spinner span[data-v-3a698022]:nth-child(3) {\n animation-delay: 0.15s;\n}\n.loading[data-v-3a698022] {\n padding-right: 3rem !important;\n}\n.loading .spinner[data-v-3a698022] {\n opacity: 1;\n}\n.loading .spinner span[data-v-3a698022] {\n opacity: 1;\n}\nbutton[data-v-3a698022]:not(:disabled) {\n transition-delay: 0.2s;\n}\nbutton:not(:disabled) .spinner span[data-v-3a698022] {\n box-shadow: 0 0 0 0.2rem #888 inset;\n border: 7.4px solid transparent;\n -webkit-transition: all 0.4s;\n transition: all 0.4s;\n}\nbutton:not(:disabled) .spinner span[data-v-3a698022]:nth-child(1) {\n transform: rotate(0deg) !important;\n}\nbutton:not(:disabled) .spinner span[data-v-3a698022]:nth-child(2) {\n transform: rotate(90deg) !important;\n}\nbutton:not(:disabled) .spinner span[data-v-3a698022]:nth-child(3) {\n transform: rotate(180deg) !important;\n}\nbutton:not(:disabled) .spinner span[data-v-3a698022]:nth-child(4) {\n transform: rotate(270deg) !important;\n}\n@keyframes spinner-data-v-3a698022 {\n0% {\n transform: rotate(0deg);\n}\n100% {\n transform: rotate(360deg);\n}\n}\n\n/* optional styles */\n.default-styles[data-v-3a698022] {\n color: white;\n background-color: blue;\n border: solid 1px transparent;\n border-radius: 4px;\n cursor: pointer;\n padding: 8px 16.5px 8px 16px;\n line-height: 1.9rem;\n}\n.default-styles[data-v-3a698022]:disabled {\n pointer-events: stroke;\n cursor: not-allowed;\n}\n.default-styles[data-v-3a698022]:focus {\n outline: none;\n box-shadow: 0 0 0 3px lightblue, 0 0 0 1.5px lightblue;\n}\n.default-styles .spinner span[data-v-3a698022] {\n top: 0rem;\n width: 1.2rem;\n height: 1.2rem;\n border: 3.4px solid #fff;\n border-color: #fff transparent transparent transparent;\n}\n.default-styles:not(:disabled) .spinner span[data-v-3a698022] {\n border: 8.4px solid transparent;\n box-shadow: 0 0 0 0.1rem #fff inset;\n}\n",map:{version:3,sources:["/mnt/c/Users/william/temp/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,oBAAA;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>\n <button\n :class="{\n \'vue-loading-button\': true,\n \'default-styles\': styled,\n \'loading\': loading,\n }"\n :disabled="loading"\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<script>\nexport default {\n name: "VueLoadingButton",\n props: {\n loading: {\n type: Boolean,\n required: false,\n default: false\n },\n styled: {\n type: Boolean,\n required: false,\n default: false\n }\n }\n};\n<\/script>\n\n<style scoped>\n/* reset */\nbutton {\n font-family: inherit;\n font-size: 100%;\n font-size: 1.4rem;\n line-height: 1.15;\n margin: 0;\n overflow: visible;\n text-transform: none;\n -webkit-appearance: button;\n}\nbutton::-moz-focus-inner {\n border-style: none;\n padding: 0;\n}\nbutton:-moz-focusring {\n outline: 1px dotted ButtonText;\n}\n\n/* loading styles */\nbutton {\n position: relative;\n -webkit-transition: all 0.2s;\n transition: all 0.2s;\n transition-timing-function: ease-in;\n}\n.spinner {\n line-height: 1.15;\n position: absolute;\n top: 50%;\n left: auto;\n right: 1.7rem;\n margin: -0.5em;\n opacity: 0;\n transition-property: padding, opacity;\n transition-duration: 0.2s, 0.2s;\n transition-timing-function: ease-in, ease;\n transition-delay: 0s, 0.2s;\n}\n.spinner span {\n box-sizing: border-box;\n display: inline-block;\n position: absolute;\n right: 0;\n top: 0.15rem;\n width: 1rem;\n height: 1rem;\n opacity: 1;\n border: 3.4px solid #888;\n border-radius: 50%;\n animation: spinner 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n border-color: #888 transparent transparent transparent;\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.loading {\n padding-right: 3rem !important;\n}\n.loading .spinner {\n opacity: 1;\n}\n.loading .spinner span {\n opacity: 1;\n}\nbutton:not(:disabled) {\n transition-delay: 0.2s;\n}\nbutton:not(:disabled) .spinner span {\n box-shadow: 0 0 0 0.2rem #888 inset;\n border: 7.4px solid transparent;\n -webkit-transition: all 0.4s;\n transition: all 0.4s;\n}\nbutton:not(:disabled) .spinner span:nth-child(1) {\n transform: rotate(0deg) !important;\n}\nbutton:not(:disabled) .spinner span:nth-child(2) {\n transform: rotate(90deg) !important;\n}\nbutton:not(:disabled) .spinner span:nth-child(3) {\n transform: rotate(180deg) !important;\n}\nbutton:not(:disabled) .spinner span:nth-child(4) {\n transform: rotate(270deg) !important;\n}\n@keyframes spinner {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n\n/* optional styles */\n.default-styles {\n color: white;\n background-color: blue;\n border: solid 1px transparent;\n border-radius: 4px;\n cursor: pointer;\n padding: 8px 16.5px 8px 16px;\n line-height: 1.9rem;\n}\n.default-styles:disabled {\n pointer-events: stroke;\n cursor: not-allowed;\n}\n.default-styles:focus {\n outline: none;\n box-shadow: 0 0 0 3px lightblue, 0 0 0 1.5px lightblue;\n}\n.default-styles .spinner span {\n top: 0rem;\n width: 1.2rem;\n height: 1.2rem;\n border: 3.4px solid #fff;\n border-color: #fff transparent transparent transparent;\n}\n.default-styles:not(:disabled) .spinner span {\n border: 8.4px solid transparent;\n box-shadow: 0 0 0 0.1rem #fff inset;\n}\n</style>\n']},media:void 0})},r,"data-v-3a698022",!1,void 0,t,void 0),u={install:A},C=null;return"undefined"!=typeof window?C=window.Vue:"undefined"!=typeof global&&(C=global.Vue),C&&C.use(u),n.install=A,n.default=p,n}({}); |
@@ -39,3 +39,3 @@ (function (global, factory) { | ||
| required: false, | ||
| default: true | ||
| default: false | ||
| } | ||
@@ -173,3 +173,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\\shwilliam\\GitHub\\vue-loading-button\\src\\vue-loading-button.vue"; | ||
| script.__file = "/mnt/c/Users/william/temp/vue-loading-button/src/vue-loading-button.vue"; | ||
@@ -216,7 +216,7 @@ /* template */ | ||
| if (!inject) { return } | ||
| 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 }); | ||
| inject("data-v-3a698022_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\n/* reset */\nbutton[data-v-3a698022] {\n font-family: inherit;\n font-size: 100%;\n font-size: 1.4rem;\n line-height: 1.15;\n margin: 0;\n overflow: visible;\n text-transform: none;\n -webkit-appearance: button;\n}\nbutton[data-v-3a698022]::-moz-focus-inner {\n border-style: none;\n padding: 0;\n}\nbutton[data-v-3a698022]:-moz-focusring {\n outline: 1px dotted ButtonText;\n}\n\n/* loading styles */\nbutton[data-v-3a698022] {\n position: relative;\n -webkit-transition: all 0.2s;\n transition: all 0.2s;\n transition-timing-function: ease-in;\n}\n.spinner[data-v-3a698022] {\n line-height: 1.15;\n position: absolute;\n top: 50%;\n left: auto;\n right: 1.7rem;\n margin: -0.5em;\n opacity: 0;\n transition-property: padding, opacity;\n transition-duration: 0.2s, 0.2s;\n transition-timing-function: ease-in, ease;\n transition-delay: 0s, 0.2s;\n}\n.spinner span[data-v-3a698022] {\n box-sizing: border-box;\n display: inline-block;\n position: absolute;\n right: 0;\n top: 0.15rem;\n width: 1rem;\n height: 1rem;\n opacity: 1;\n border: 3.4px solid #888;\n border-radius: 50%;\n animation: spinner-data-v-3a698022 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n border-color: #888 transparent transparent transparent;\n}\n.spinner span[data-v-3a698022]:nth-child(1) {\n animation-delay: 0.45s;\n}\n.spinner span[data-v-3a698022]:nth-child(2) {\n animation-delay: 0.3s;\n}\n.spinner span[data-v-3a698022]:nth-child(3) {\n animation-delay: 0.15s;\n}\n.loading[data-v-3a698022] {\n padding-right: 3rem !important;\n}\n.loading .spinner[data-v-3a698022] {\n opacity: 1;\n}\n.loading .spinner span[data-v-3a698022] {\n opacity: 1;\n}\nbutton[data-v-3a698022]:not(:disabled) {\n transition-delay: 0.2s;\n}\nbutton:not(:disabled) .spinner span[data-v-3a698022] {\n box-shadow: 0 0 0 0.2rem #888 inset;\n border: 7.4px solid transparent;\n -webkit-transition: all 0.4s;\n transition: all 0.4s;\n}\nbutton:not(:disabled) .spinner span[data-v-3a698022]:nth-child(1) {\n transform: rotate(0deg) !important;\n}\nbutton:not(:disabled) .spinner span[data-v-3a698022]:nth-child(2) {\n transform: rotate(90deg) !important;\n}\nbutton:not(:disabled) .spinner span[data-v-3a698022]:nth-child(3) {\n transform: rotate(180deg) !important;\n}\nbutton:not(:disabled) .spinner span[data-v-3a698022]:nth-child(4) {\n transform: rotate(270deg) !important;\n}\n@keyframes spinner-data-v-3a698022 {\n0% {\n transform: rotate(0deg);\n}\n100% {\n transform: rotate(360deg);\n}\n}\n\n/* optional styles */\n.default-styles[data-v-3a698022] {\n color: white;\n background-color: blue;\n border: solid 1px transparent;\n border-radius: 4px;\n cursor: pointer;\n padding: 8px 16.5px 8px 16px;\n line-height: 1.9rem;\n}\n.default-styles[data-v-3a698022]:disabled {\n pointer-events: stroke;\n cursor: not-allowed;\n}\n.default-styles[data-v-3a698022]:focus {\n outline: none;\n box-shadow: 0 0 0 3px lightblue, 0 0 0 1.5px lightblue;\n}\n.default-styles .spinner span[data-v-3a698022] {\n top: 0rem;\n width: 1.2rem;\n height: 1.2rem;\n border: 3.4px solid #fff;\n border-color: #fff transparent transparent transparent;\n}\n.default-styles:not(:disabled) .spinner span[data-v-3a698022] {\n border: 8.4px solid transparent;\n box-shadow: 0 0 0 0.1rem #fff inset;\n}\n", map: {"version":3,"sources":["/mnt/c/Users/william/temp/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,oBAAA;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>\n <button\n :class=\"{\n 'vue-loading-button': true,\n 'default-styles': styled,\n 'loading': loading,\n }\"\n :disabled=\"loading\"\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<script>\nexport default {\n name: \"VueLoadingButton\",\n props: {\n loading: {\n type: Boolean,\n required: false,\n default: false\n },\n styled: {\n type: Boolean,\n required: false,\n default: false\n }\n }\n};\n</script>\n\n<style scoped>\n/* reset */\nbutton {\n font-family: inherit;\n font-size: 100%;\n font-size: 1.4rem;\n line-height: 1.15;\n margin: 0;\n overflow: visible;\n text-transform: none;\n -webkit-appearance: button;\n}\nbutton::-moz-focus-inner {\n border-style: none;\n padding: 0;\n}\nbutton:-moz-focusring {\n outline: 1px dotted ButtonText;\n}\n\n/* loading styles */\nbutton {\n position: relative;\n -webkit-transition: all 0.2s;\n transition: all 0.2s;\n transition-timing-function: ease-in;\n}\n.spinner {\n line-height: 1.15;\n position: absolute;\n top: 50%;\n left: auto;\n right: 1.7rem;\n margin: -0.5em;\n opacity: 0;\n transition-property: padding, opacity;\n transition-duration: 0.2s, 0.2s;\n transition-timing-function: ease-in, ease;\n transition-delay: 0s, 0.2s;\n}\n.spinner span {\n box-sizing: border-box;\n display: inline-block;\n position: absolute;\n right: 0;\n top: 0.15rem;\n width: 1rem;\n height: 1rem;\n opacity: 1;\n border: 3.4px solid #888;\n border-radius: 50%;\n animation: spinner 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n border-color: #888 transparent transparent transparent;\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.loading {\n padding-right: 3rem !important;\n}\n.loading .spinner {\n opacity: 1;\n}\n.loading .spinner span {\n opacity: 1;\n}\nbutton:not(:disabled) {\n transition-delay: 0.2s;\n}\nbutton:not(:disabled) .spinner span {\n box-shadow: 0 0 0 0.2rem #888 inset;\n border: 7.4px solid transparent;\n -webkit-transition: all 0.4s;\n transition: all 0.4s;\n}\nbutton:not(:disabled) .spinner span:nth-child(1) {\n transform: rotate(0deg) !important;\n}\nbutton:not(:disabled) .spinner span:nth-child(2) {\n transform: rotate(90deg) !important;\n}\nbutton:not(:disabled) .spinner span:nth-child(3) {\n transform: rotate(180deg) !important;\n}\nbutton:not(:disabled) .spinner span:nth-child(4) {\n transform: rotate(270deg) !important;\n}\n@keyframes spinner {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n\n/* optional styles */\n.default-styles {\n color: white;\n background-color: blue;\n border: solid 1px transparent;\n border-radius: 4px;\n cursor: pointer;\n padding: 8px 16.5px 8px 16px;\n line-height: 1.9rem;\n}\n.default-styles:disabled {\n pointer-events: stroke;\n cursor: not-allowed;\n}\n.default-styles:focus {\n outline: none;\n box-shadow: 0 0 0 3px lightblue, 0 0 0 1.5px lightblue;\n}\n.default-styles .spinner span {\n top: 0rem;\n width: 1.2rem;\n height: 1.2rem;\n border: 3.4px solid #fff;\n border-color: #fff transparent transparent transparent;\n}\n.default-styles:not(:disabled) .spinner span {\n border: 8.4px solid transparent;\n box-shadow: 0 0 0 0.1rem #fff inset;\n}\n</style>\n"]}, media: undefined }); | ||
| }; | ||
| /* scoped */ | ||
| var __vue_scope_id__ = "data-v-1d441d3c"; | ||
| var __vue_scope_id__ = "data-v-3a698022"; | ||
| /* module identifier */ | ||
@@ -223,0 +223,0 @@ var __vue_module_identifier__ = undefined; |
| { | ||
| "name": "vue-loading-button", | ||
| "version": "0.1.4", | ||
| "version": "0.2.0", | ||
| "description": "A Vue button component with slideout loading indicator", | ||
@@ -46,2 +46,2 @@ "license": "MIT", | ||
| } | ||
| } | ||
| } |
@@ -5,5 +5,5 @@ # vue-loading-button | ||
| <div style="text-align:center"> | ||
| <img src="https://user-images.githubusercontent.com/38357771/52435345-9fe26a00-2adf-11e9-832e-497ffa480d05.gif" alt="example use" style="width:300px;"/> | ||
| </div> | ||
| <p align="left"> | ||
| <img width="200" src="https://user-images.githubusercontent.com/38357771/52435345-9fe26a00-2adf-11e9-832e-497ffa480d05.gif" alt="Example use"> | ||
| </p> | ||
@@ -14,6 +14,6 @@ [](https://codesandbox.io/s/4zywwyjxw7) | ||
| |Prop |Type |Required|Default|Description | | ||
| |-------|-------|--------|-------|------------------------------------| | ||
| |loading|boolean|false |false |Controls loading indicator animation| | ||
| |styled |boolean|false |true |Disables inessential default styles | | ||
| | Prop | Type | Required | Default | Description | | ||
| | ------- | ------- | -------- | ------- | ------------------------------------ | | ||
| | loading | boolean | false | false | Controls loading indicator animation | | ||
| | styled | boolean | false | false | Enables opinionated sample styles | | ||
@@ -45,3 +45,3 @@ ## Installation | ||
| ```js | ||
| import VueLoadingButton from 'vue-loading-button' | ||
| import VueLoadingButton from 'vue-loading-button'; | ||
@@ -51,4 +51,4 @@ export default { | ||
| VueLoadingButton, | ||
| } | ||
| } | ||
| }, | ||
| }; | ||
| ``` | ||
@@ -55,0 +55,0 @@ |
@@ -0,0 +0,0 @@ import component from "./vue-loading-button.vue"; |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis 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
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Worsened metrics
- Total package byte prevSize
- decreased by-3.82%
53835
- Lines of code
- decreased by-0.94%
635
No dependency changes