├── .gitignore
├── .gitattributes
├── src
    ├── index.js
    └── vue-loading-button.vue
├── LICENSE
├── examples
    └── example.vue
├── package.json
└── README.md


/.gitignore:
--------------------------------------------------------------------------------
1 | /node_modules/
2 | /dist/


--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto
3 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import component from "./vue-loading-button.vue";
 2 | 
 3 | // install function executed by Vue.use()
 4 | export function install(Vue) {
 5 |   if (install.installed) return;
 6 |   install.installed = true;
 7 |   Vue.component("VueLoadingButton", component);
 8 | }
 9 | 
10 | // create module definition for Vue.use()
11 | const plugin = {
12 |   install
13 | };
14 | 
15 | // auto-install when vue is found
16 | let GlobalVue = null;
17 | if (typeof window !== "undefined") {
18 |   GlobalVue = window.Vue;
19 | } else if (typeof global !== "undefined") {
20 |   GlobalVue = global.Vue;
21 | }
22 | if (GlobalVue) {
23 |   GlobalVue.use(plugin);
24 | }
25 | 
26 | export default component;
27 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2019 William L
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.


--------------------------------------------------------------------------------
/examples/example.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="example">
 3 |     <p>
 4 |       Click button to trigger loading simulation,
 5 |       click
 6 |       <button type="button" @click="isStyled = !isStyled">here</button>
 7 |       to
 8 |       {{
 9 |       isStyled ?
10 |       'unstyle' :
11 |       'style'
12 |       }}
13 |     </p>
14 |     <VueLoadingButton
15 |       aria-label="Post message"
16 |       class="button"
17 |       @click.native="handleClick"
18 |       :loading="isLoading"
19 |       :styled="isStyled"
20 |     >Send</VueLoadingButton>
21 |   </div>
22 | </template>
23 | 
24 | <script>
25 | import VueLoadingButton from "../src/vue-loading-button.vue";
26 | export default {
27 |   name: "Example",
28 |   data() {
29 |     return {
30 |       isLoading: false,
31 |       isStyled: false
32 |     };
33 |   },
34 |   methods: {
35 |     handleClick() {
36 |       console.log("click"); /* eslint-disable-line */
37 |       this.isLoading = true;
38 |       setTimeout(() => (this.isLoading = false), 1300);
39 |     }
40 |   },
41 |   components: {
42 |     VueLoadingButton
43 |   }
44 | };
45 | </script>
46 | 
47 | <style scoped>
48 | .example {
49 |   font-family: sans-serif;
50 |   text-align: center;
51 | }
52 | /* .button {
53 |   background-color: coral;
54 |   border-radius: 3px;
55 | } */
56 | </style>
57 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-loading-button",
 3 |   "version": "0.2.0",
 4 |   "description": "A Vue button component with slideout loading indicator",
 5 |   "license": "MIT",
 6 |   "main": "dist/vue-loading-button.umd.js",
 7 |   "module": "dist/vue-loading-button.esm.js",
 8 |   "unpkg": "dist/vue-loading-button.min.js",
 9 |   "browser": {
10 |     "./sfc": "src/vue-loading-button.vue"
11 |   },
12 |   "scripts": {
13 |     "example": "vue serve ./examples/example.vue",
14 |     "build": "npm run build:unpkg & npm run build:es & npm run build:umd",
15 |     "build:umd": "rollup --config build/rollup.config.js --format umd --file dist/vue-loading-button.umd.js",
16 |     "build:es": "rollup --config build/rollup.config.js --format es --file dist/vue-loading-button.esm.js",
17 |     "build:unpkg": "rollup --config build/rollup.config.js --format iife --file dist/vue-loading-button.min.js"
18 |   },
19 |   "keywords": [
20 |     "vue",
21 |     "component",
22 |     "button",
23 |     "loading",
24 |     "load",
25 |     "indicator",
26 |     "spinner"
27 |   ],
28 |   "repository": {
29 |     "type": "git",
30 |     "url": "https://github.com/shwilliam/vue-loading-button.git"
31 |   },
32 |   "bugs": {
33 |     "url": "https://github.com/shwilliam/vue-loading-button/issues"
34 |   },
35 |   "homepage": "https://github.com/shwilliam/vue-loading-button#readme",
36 |   "dependencies": {},
37 |   "devDependencies": {
38 |     "minimist": "^1.2.0",
39 |     "rollup": "^0.57.1",
40 |     "rollup-plugin-buble": "^0.19.2",
41 |     "rollup-plugin-uglify-es": "0.0.1",
42 |     "rollup-plugin-vue": "^4.6.1",
43 |     "vue": "^2.5.16",
44 |     "vue-template-compiler": "^2.5.16"
45 |   }
46 | }
47 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-loading-button
 2 | 
 3 | > Straightforward Vue button with slideout loading indicator
 4 | 
 5 | <p align="left">
 6 |   <img width="200" src="https://user-images.githubusercontent.com/38357771/52435345-9fe26a00-2adf-11e9-832e-497ffa480d05.gif" alt="Component example use">
 7 | </p>
 8 | 
 9 | [![try it on codesandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/4zywwyjxw7)
10 | 
11 | ## Props
12 | 
13 | | Prop    | Type    | Required | Default | Description                          |
14 | | ------- | ------- | -------- | ------- | ------------------------------------ |
15 | | loading | boolean | false    | false   | Controls loading indicator animation |
16 | | styled  | boolean | false    | false   | Enables opinionated sample styles    |
17 | 
18 | ## Installation
19 | 
20 | Install the package from npm by running:
21 | 
22 | ```
23 | $ npm i vue-loading-button
24 | ```
25 | 
26 | or
27 | 
28 | ```
29 | $ yarn add vue-loading-button
30 | ```
31 | 
32 | ## Usage
33 | 
34 | Import, register and place the component in your Vue app.
35 | 
36 | ```html
37 | <template>
38 |   <VueLoadingButton />
39 | </template>
40 | ```
41 | 
42 | ```js
43 | import VueLoadingButton from 'vue-loading-button'
44 | 
45 | export default {
46 |   components: {
47 |     VueLoadingButton,
48 |   },
49 | }
50 | ```
51 | 
52 | > <p align="left"><img width="200" src="https://user-images.githubusercontent.com/38357771/63500819-712a5080-c47f-11e9-8655-7df011bbc557.gif" alt="Unstyled component example use"></p>
53 | > Note: By default, this button component will apply minimal styles to enable you to easily add your own implementation-specific CSS. To enable the more opinionated styles seen at the top of this file, pass a `styled` prop as `true` to the button.
54 | 
55 | ## Accessibility
56 | 
57 | Apply attributes, such as aria-label, directly on the element to apply them to the button.
58 | 
59 | ```html
60 | <template>
61 |   <VueLoadingButton aria-label='Send message' />
62 | </template>
63 | ```
64 | 
65 | ## Dev
66 | 
67 | Running example script requires @vue/cli and @vue/cli-service-global to be installed.
68 | Install globally by running `npm i --g @vue/cli @vue/cli-service-global` or `yarn add global vue/cli @vue/cli-service-global`.
69 | 
70 | ## Contributing
71 | 
72 | This project is open to and encourages contributions! Feel free to discuss any bug fixes/features in the [issues](https://github.com/shwilliam/vue-loading-button/issues). If you wish to work on this project:
73 | 
74 | 1.  [Fork the project](https://github.com/shwilliam/vue-loading-button/archive/master.zip)
75 | 2.  Create your feature branch (`git checkout -b new-feature-branch`)
76 | 3.  Commit your changes (`git commit -am 'add new feature'`)
77 | 4.  Push to the branch (`git push origin new-feature-branch`)
78 | 5.  [Submit a pull request!](https://github.com/shwilliam/vue-loading-button/pull/new/master)
79 | 


--------------------------------------------------------------------------------
/src/vue-loading-button.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <button
  3 |     :class="{
  4 |       'vue-loading-button': true,
  5 |       'default-styles': styled,
  6 |       'loading': loading,
  7 |     }"
  8 |     :disabled="loading"
  9 |     type="button"
 10 |   >
 11 |     <slot>Submit</slot>
 12 |     <span class="spinner">
 13 |       <span></span>
 14 |       <span></span>
 15 |       <span></span>
 16 |       <span></span>
 17 |     </span>
 18 |   </button>
 19 | </template>
 20 | 
 21 | <script>
 22 | export default {
 23 |   name: "VueLoadingButton",
 24 |   props: {
 25 |     loading: {
 26 |       type: Boolean,
 27 |       required: false,
 28 |       default: false
 29 |     },
 30 |     styled: {
 31 |       type: Boolean,
 32 |       required: false,
 33 |       default: false
 34 |     }
 35 |   }
 36 | };
 37 | </script>
 38 | 
 39 | <style scoped>
 40 | /* reset */
 41 | button {
 42 |   font-family: inherit;
 43 |   font-size: 100%;
 44 |   font-size: 1.4rem;
 45 |   line-height: 1.15;
 46 |   margin: 0;
 47 |   overflow: visible;
 48 |   text-transform: none;
 49 |   -webkit-appearance: button;
 50 | }
 51 | button::-moz-focus-inner {
 52 |   border-style: none;
 53 |   padding: 0;
 54 | }
 55 | button:-moz-focusring {
 56 |   outline: 1px dotted ButtonText;
 57 | }
 58 | 
 59 | /* loading styles */
 60 | button {
 61 |   position: relative;
 62 |   -webkit-transition: all 0.2s;
 63 |   transition: all 0.2s;
 64 |   transition-timing-function: ease-in;
 65 | }
 66 | .spinner {
 67 |   line-height: 1.15;
 68 |   position: absolute;
 69 |   top: 50%;
 70 |   left: auto;
 71 |   right: 1.7rem;
 72 |   margin: -0.5em;
 73 |   opacity: 0;
 74 |   transition-property: padding, opacity;
 75 |   transition-duration: 0.2s, 0.2s;
 76 |   transition-timing-function: ease-in, ease;
 77 |   transition-delay: 0s, 0.2s;
 78 | }
 79 | .spinner span {
 80 |   box-sizing: border-box;
 81 |   display: inline-block;
 82 |   position: absolute;
 83 |   right: 0;
 84 |   top: 0.15rem;
 85 |   width: 1rem;
 86 |   height: 1rem;
 87 |   opacity: 1;
 88 |   border: 3.4px solid #888;
 89 |   border-radius: 50%;
 90 |   animation: spinner 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
 91 |   border-color: #888 transparent transparent transparent;
 92 | }
 93 | .spinner span:nth-child(1) {
 94 |   animation-delay: 0.45s;
 95 | }
 96 | .spinner span:nth-child(2) {
 97 |   animation-delay: 0.3s;
 98 | }
 99 | .spinner span:nth-child(3) {
100 |   animation-delay: 0.15s;
101 | }
102 | .loading {
103 |   padding-right: 3rem !important;
104 | }
105 | .loading .spinner {
106 |   opacity: 1;
107 | }
108 | .loading .spinner span {
109 |   opacity: 1;
110 | }
111 | button:not(:disabled) {
112 |   transition-delay: 0.2s;
113 | }
114 | button:not(:disabled) .spinner span {
115 |   box-shadow: 0 0 0 0.2rem #888 inset;
116 |   border: 7.4px solid transparent;
117 |   -webkit-transition: all 0.4s;
118 |   transition: all 0.4s;
119 | }
120 | button:not(:disabled) .spinner span:nth-child(1) {
121 |   transform: rotate(0deg) !important;
122 | }
123 | button:not(:disabled) .spinner span:nth-child(2) {
124 |   transform: rotate(90deg) !important;
125 | }
126 | button:not(:disabled) .spinner span:nth-child(3) {
127 |   transform: rotate(180deg) !important;
128 | }
129 | button:not(:disabled) .spinner span:nth-child(4) {
130 |   transform: rotate(270deg) !important;
131 | }
132 | @keyframes spinner {
133 |   0% {
134 |     transform: rotate(0deg);
135 |   }
136 |   100% {
137 |     transform: rotate(360deg);
138 |   }
139 | }
140 | 
141 | /* optional styles */
142 | .default-styles {
143 |   color: white;
144 |   background-color: blue;
145 |   border: solid 1px transparent;
146 |   border-radius: 4px;
147 |   cursor: pointer;
148 |   padding: 8px 16.5px 8px 16px;
149 |   line-height: 1.9rem;
150 | }
151 | .default-styles:disabled {
152 |   pointer-events: stroke;
153 |   cursor: not-allowed;
154 | }
155 | .default-styles:focus {
156 |   outline: none;
157 |   box-shadow: 0 0 0 3px lightblue, 0 0 0 1.5px lightblue;
158 | }
159 | .default-styles .spinner span {
160 |   top: 0rem;
161 |   width: 1.2rem;
162 |   height: 1.2rem;
163 |   border: 3.4px solid #fff;
164 |   border-color: #fff transparent transparent transparent;
165 | }
166 | .default-styles:not(:disabled) .spinner span {
167 |   border: 8.4px solid transparent;
168 |   box-shadow: 0 0 0 0.1rem #fff inset;
169 | }
170 | </style>
171 | 


--------------------------------------------------------------------------------