isWaiting -> is

Author: f

CHANGELOG.md

@@ -1,5 +1,9 @@
 # vue-wait changelog
 
+## v1.2.0
+- Rename `isWaiting` to `is` to make the code less crowded.
+- Better array matching
+
 ## v1.1.0
 - Rename package to `vue-wait`
 - `anyLoading` to `any`

README.md

@@ -110,7 +110,7 @@ You can use this options for customize VueWait behavior.
 
 | Option Name | Type | Default | Description |
 | ----------- | ---- | ------- | ----------- |
-| `accessorName` | `String` | `"$wait"` | You can change this value to rename the accessor. E.g. if you rename this to `$w`, your `VueWait` methods will be accessible by `$w.isWaiting(..)` etc. |
+| `accessorName` | `String` | `"$wait"` | You can change this value to rename the accessor. E.g. if you rename this to `$w`, your `VueWait` methods will be accessible by `$w.waits(..)` etc. |
 | `useVuex` | `Boolean` | `false` | Use this value for enabling integration with `Vuex` store. When this value is true `VueWait` will store data in `Vuex` store and all changes to this data will be made by dispatching actions to store |
 | `vuexModuleName` | `String` | `"wait"` | Name for `Vuex` store if `useVuex` set to true, otherwise not used. |
 | `registerComponent` | `Boolean` | `true` | Registers `v-wait` component. |
@@ -133,13 +133,13 @@ Returns boolean value if any loader exists in page.
 </template>
 ```
 
-#### `.isWaiting(loader String | Matcher)`
+#### `.is(loader String | Matcher)`
 
 Returns boolean value if given loader exists in page.
 
 ```html
 <template>
-  <progress-bar v-if="$wait.isWaiting('creating user')">Creating User...</progress-bar>
+  <progress-bar v-if="$wait.is('creating user')">Creating User...</progress-bar>
 </template>
 ```
 
@@ -149,17 +149,17 @@ Please see [matcher](https://github.com/sindresorhus/matcher/) library to see ho
 
 ```html
 <template>
-  <progress-bar v-if="$wait.isWaiting('creating.*')">Creating something...</progress-bar>
+  <progress-bar v-if="$wait.is('creating.*')">Creating something...</progress-bar>
 </template>
 ```
 
-#### `.isWaiting(loaders Array<String>)`
+#### `.is(loaders Array<String>)`
 
 Returns boolean value if some of given loaders exists in page.
 
 ```html
 <template>
-  <progress-bar v-if="$wait.isWaiting(['creating user', 'page loading'])">Creating User...</progress-bar>
+  <progress-bar v-if="$wait.is(['creating user', 'page loading'])">Creating User...</progress-bar>
 </template>
 ```
 
@@ -362,7 +362,7 @@ In template, you should wrap your content with `v-wait` component to show loadin
 Better example for a `button` with loading state:
 
 ```html
-<button :disabled='$wait.isWaiting("creating user")'>
+<button :disabled='$wait.is("creating user")'>
   <v-wait for='creating user'>
     <template slot='waiting'>Creating User...</template>
     Create User

dist/vue-wait.js

@@ -8,23 +8,23 @@
         This will be shown after load.
       </v-wait>
     </div>
-    <button @click='writeCode()' :disable='$l.isWaiting("writing code")'>
+    <button @click='writeCode()' :disable='$l.is("writing code")'>
       <v-wait for='writing code' message='Writing Code...'>
         <template slot='waiting'>
           <span class="animated">️️♻️</span>
         </template>
         Write Code
       </v-wait>
     </button>
-    <button @click='end()' :disabled='!$l.isWaiting("writing code")'>
-      <span v-if='$l.isWaiting("writing code")'>Stop Coding</span>
+    <button @click='end()' :disabled='!$l.is("writing code")'>
+      <span v-if='$l.is("writing code")'>Stop Coding</span>
       <span v-else>Coding Stopped</span>
     </button>
     <br>
-    <button @click='$l.start("c")' :disabled='$l.isWaiting("c")'>
+    <button @click='$l.start("c")' :disabled='$l.is("c")'>
       Start <b>"c"</b> Loader
     </button>
-    <button @click='$l.end("c")' :disabled='!$l.isWaiting("c")'>
+    <button @click='$l.end("c")' :disabled='!$l.is("c")'>
       Stop <b>"c"</b> Loader
     </button>
     <p>
@@ -84,7 +84,7 @@
         this.$l.end('writing code');
       },
       toggleLoader(loader) {
-        if (this.$l.isWaiting(loader)) {
+        if (this.$l.is(loader)) {
           this.$l.end(loader);
         } else {
           this.$l.start(loader);

examples/vuex-example/main.vue

@@ -8,7 +8,7 @@
         This will be shown after load.
       </my-waiter>
     </div>
-    <button @click='fetchDataFromApi' :disable='$wait.isWaiting("fetch data")'>
+    <button @click='fetchDataFromApi' :disable='$wait.is("fetch data")'>
       <my-waiter for='fetch data' message='Fetching data...'>
         <template slot='waiting'>
           <span class="animated">👾</span>
@@ -17,7 +17,7 @@
       </my-waiter>
     </button>
 
-    <button @click='syncCalculator' :disable='$wait.isWaiting("sync work")'>
+    <button @click='syncCalculator' :disable='$wait.is("sync work")'>
       <my-waiter for='sync work' message='Calculating data...'>
         <template slot='waiting'>
           <span class="animated">❤️</span>

examples/wrap-example/main.vue

@@ -1,10 +1,10 @@
 <template lang="html">
   <div>
-    <span v-if='isWaiting'>
+    <span v-if='waitsFor'>
       <slot name='waiting'></slot>
       <span v-if='message'>{{ message }}</span>
     </span>
-    <slot v-if='!isWaiting'></slot>
+    <slot v-else></slot>
   </div>
 </template>
 <script>
@@ -15,12 +15,12 @@
       message: String,
     },
     computed: {
-      isWaiting() {
+      waitsFor() {
         if (this.visible) {
           return this.visible;
         }
         if (this.for) {
-          return this.__$waitInstance.isWaiting(this.for);
+          return this.__$waitInstance.is(this.for);
         }
         return this.__$waitInstance.any;
       }

src/components/v-wait.vue

@@ -16,7 +16,7 @@ function bind(el, binding, vNode, oldVNode) {
       el.addEventListener(
         'click',
         () => {
-          const isWaiting = instance.isWaiting(value);
+          const isWaiting = instance.is(value);
           if (!isWaiting) {
             instance.start(value);
           } else {
@@ -35,7 +35,7 @@ function update(el, binding, vNode, oldVNode) {
   const { arg, modifiers, value } = binding;
   const instance = vNode.context.__$waitInstance;
 
-  let isWaiting = instance.isWaiting(value);
+  let isWaiting = instance.is(value);
   if (modifiers.not || ['hidden', 'enabled'].includes(arg)) {
     isWaiting = !isWaiting;
   }

src/directives/wait.js

@@ -26,7 +26,7 @@ export function mapWaitingGetters(getters) {
   Object.keys(getters).forEach(getter => {
     const waiter = getters[getter];
     mappings[getter] = function() {
-      return this.__$waitInstance.isWaiting(waiter);
+      return this.__$waitInstance.is(waiter);
     };
   });
   return mappings;

src/helpers.js

@@ -1,28 +1,28 @@
 import { isMatch } from 'matcher';
 
-export function isWaiting(waiters, waiter) {
+function uniqArray(array) {
+  return array.filter((el, index, arr) => index == arr.indexOf(el));
+}
+
+export function is(waitingFor, waiter) {
   if (typeof waiter === 'string' && waiter.match(/[\*\!]/)) {
-    return waiters.filter(l => isMatch(l, waiter)).length > 0;
+    return waitingFor.filter(w => isMatch(w, waiter)).length > 0;
   }
   return Array.isArray(waiter)
-    ? waiters.some(v => waiter.includes(v))
-    : waiters.indexOf(waiter) > -1;
+    ? waitingFor.some(w => is(waiter, w))
+    : waitingFor.includes(waiter);
 }
 
-export function any(waiters) {
-  return waiters.length > 0;
+export function any(waitingFor) {
+  return waitingFor.length > 0;
 }
 
-export function start(waiters, waiter) {
-  return uniqArray([...waiters, waiter]);
+export function start(waitingFor, waiter) {
+  return uniqArray([...waitingFor, waiter]);
 }
 
-export function end(waiters, waiter) {
-  return uniqArray(waiters).filter(l => l !== waiter);
-}
-
-export function uniqArray(array) {
-  return array.filter((el, index, arr) => index == arr.indexOf(el));
+export function end(waitingFor, waiter) {
+  return uniqArray(waitingFor).filter(l => l !== waiter);
 }
 
 export function nodeIsDebug() {

src/utils.js

@@ -1,5 +1,6 @@
-import { isWaiting, any, start, end, nodeIsDebug } from './utils';
+import { is, any, start, end, nodeIsDebug } from './utils';
 
+// Import to export
 import { mapWaitingActions, mapWaitingGetters, waitFor } from './helpers';
 
 import vuexStore from './vuex/store';
@@ -59,32 +60,31 @@ export default class VueWait {
 
       this.stateHandler = new Vue({
         computed: {
-          isWaiting: () => loader =>
-            store.getters[`${vuexModuleName}/isWaiting`](loader),
+          is: () => waiter => store.getters[`${vuexModuleName}/is`](waiter),
           any: () => store.getters[`${vuexModuleName}/any`]
         }
       });
     } else {
       this.stateHandler = new Vue({
         data() {
           return {
-            activeLoaders: []
+            waitingFor: []
           };
         },
         computed: {
-          isWaiting() {
-            return loader => isWaiting(this.activeLoaders, loader);
+          is() {
+            return waiter => is(this.waitingFor, waiter);
           },
           any() {
-            return any(this.activeLoaders);
+            return any(this.waitingFor);
           }
         },
         methods: {
-          start(loader) {
-            this.activeLoaders = start(this.activeLoaders, loader);
+          start(waiter) {
+            this.waitingFor = start(this.waitingFor, waiter);
           },
-          end(loader) {
-            this.activeLoaders = end(this.activeLoaders, loader);
+          end(waiter) {
+            this.waitingFor = end(this.waitingFor, waiter);
           }
         }
       });
@@ -97,39 +97,39 @@ export default class VueWait {
     return this.stateHandler.any;
   }
 
-  isWaiting(loader) {
-    return this.stateHandler.isWaiting(loader);
+  is(waiter) {
+    return this.stateHandler.is(waiter);
   }
 
-  dispatchLoaderAction(action, loader) {
+  dispatchWaitingAction(action, waiter) {
     const { vuexModuleName } = this.options;
-    this.store.dispatch(`${vuexModuleName}/${action}`, loader, {
+    this.store.dispatch(`${vuexModuleName}/${action}`, waiter, {
       root: true
     });
   }
 
-  start(loader) {
+  start(waiter) {
     if (this.options.useVuex) {
-      this.dispatchLoaderAction('start', loader);
+      this.dispatchWaitingAction('start', waiter);
       return;
     }
-    this.stateHandler.start(loader);
+    this.stateHandler.start(waiter);
   }
 
-  end(loader) {
+  end(waiter) {
     if (this.options.useVuex) {
-      this.dispatchLoaderAction('end', loader);
+      this.dispatchWaitingAction('end', waiter);
       return;
     }
-    this.stateHandler.end(loader);
+    this.stateHandler.end(waiter);
   }
 }
 
 export function install(Vue) {
   if (install.installed && Vue) {
     if (nodeIsDebug()) {
       console.warn(
-        '[vue-wait] already installed. Vue.use(VuexLoading) should be called only once.'
+        '[vue-wait] already installed. Vue.use(VueWait) should be called only once.'
       );
     }
     return;
@@ -163,7 +163,7 @@ export function install(Vue) {
   install.installed = true;
 }
 
-// Bypass helpers
+// Export which are imported to export
 export { mapWaitingActions, mapWaitingGetters, waitFor };
 
 VueWait.install = install;

src/vue-wait.js

@@ -1,29 +1,29 @@
-import { isWaiting, any, start, end } from '../utils';
+import { is, any, start, end } from '../utils';
 
 const mutations = {
-  START_WAITING: 'START_WAITING',
-  END_WAITING: 'END_WAITING'
+  START: 'START',
+  END: 'END'
 };
 
 export default {
   namespaced: true,
   state: {
-    activeLoaders: []
+    waitingFor: []
   },
   getters: {
-    isWaiting: state => loader => isWaiting(state.activeLoaders, loader),
-    any: state => any(state.activeLoaders)
+    is: state => waiter => is(state.waitingFor, waiter),
+    any: state => any(state.waitingFor)
   },
   actions: {
-    start: ({ commit }, loader) => commit(mutations.START_WAITING, loader),
-    end: ({ commit }, loader) => commit(mutations.END_WAITING, loader)
+    start: ({ commit }, waiter) => commit(mutations.START, waiter),
+    end: ({ commit }, waiter) => commit(mutations.END, waiter)
   },
   mutations: {
-    [mutations.START_WAITING](state, loader) {
-      state.activeLoaders = start(state.activeLoaders, loader);
+    [mutations.START](state, waiter) {
+      state.waitingFor = start(state.waitingFor, waiter);
     },
-    [mutations.END_WAITING](state, loader) {
-      state.activeLoaders = end(state.activeLoaders, loader);
+    [mutations.END](state, waiter) {
+      state.waitingFor = end(state.waitingFor, waiter);
     }
   }
 };