Merge pull request #432 from liyasthomas/refactor/enhancements

chore: stick to Vue.js best practices

components/collections/collection.vue

@@ -44,11 +44,11 @@
       <ul>
         <li v-for="(folder, index) in collection.folders" :key="folder.name">
           <folder
-            v-bind:folder="folder"
-            v-bind:folderIndex="index"
-            v-bind:collection-index="collectionIndex"
-            v-on:edit-folder="editFolder(collectionIndex, folder, index)"
-            v-on:edit-request="$emit('edit-request', $event)"
+            :folder="folder"
+            :folderIndex="index"
+            :collection-index="collectionIndex"
+            @edit-folder="editFolder(collectionIndex, folder, index)"
+            @edit-request="$emit('edit-request', $event)"
           />
         </li>
         <li
@@ -62,11 +62,11 @@
       <ul>
         <li v-for="(request, index) in collection.requests" :key="index">
           <request
-            v-bind:request="request"
-            v-bind:collection-index="collectionIndex"
-            v-bind:folder-index="-1"
-            v-bind:request-index="index"
-            v-on:edit-request="
+            :request="request"
+            :collection-index="collectionIndex"
+            :folder-index="-1"
+            :request-index="index"
+            @edit-request="
               $emit('edit-request', {
                 request,
                 collectionIndex,
@@ -74,7 +74,7 @@
                 requestIndex: index
               })
             "
-          ></request>
+          />
         </li>
       </ul>
     </div>

components/collections/editCollection.vue

@@ -20,7 +20,7 @@
           <input
             type="text"
             v-model="name"
-            v-bind:placeholder="editingCollection.name"
+            :placeholder="editingCollection.name"
             @keyup.enter="saveCollection"
           />
         </li>

components/collections/editFolder.vue

@@ -20,7 +20,7 @@
           <input
             type="text"
             v-model="name"
-            v-bind:placeholder="folder.name"
+            :placeholder="folder.name"
             @keyup.enter="editFolder"
           />
         </li>

components/collections/folder.vue

@@ -34,11 +34,11 @@
       <ul>
         <li v-for="(request, index) in folder.requests" :key="index">
           <request
-            v-bind:request="request"
-            v-bind:collection-index="collectionIndex"
-            v-bind:folder-index="folderIndex"
-            v-bind:request-index="index"
-            v-on:edit-request="
+            :request="request"
+            :collection-index="collectionIndex"
+            :folder-index="folderIndex"
+            :request-index="index"
+            @edit-request="
               $emit('edit-request', {
                 request,
                 collectionIndex,

components/collections/index.vue

@@ -6,40 +6,40 @@ TODO:
 <template>
   <div class="collections-wrapper">
     <addCollection
-      v-bind:show="showModalAdd"
-      v-on:hide-modal="displayModalAdd(false)"
+      :show="showModalAdd"
+      @hide-modal="displayModalAdd(false)"
     />
     <editCollection
-      v-bind:show="showModalEdit"
-      v-bind:editingCollection="editingCollection"
-      v-bind:editingCollectionIndex="editingCollectionIndex"
-      v-on:hide-modal="displayModalEdit(false)"
+      :show="showModalEdit"
+      :editingCollection="editingCollection"
+      :editingCollectionIndex="editingCollectionIndex"
+      @hide-modal="displayModalEdit(false)"
     />
     <addFolder
-      v-bind:show="showModalAddFolder"
-      v-bind:collection="editingCollection"
-      v-bind:collectionIndex="editingCollectionIndex"
-      v-on:hide-modal="displayModalAddFolder(false)"
+      :show="showModalAddFolder"
+      :collection="editingCollection"
+      :collectionIndex="editingCollectionIndex"
+      @hide-modal="displayModalAddFolder(false)"
     />
     <editFolder
-      v-bind:show="showModalEditFolder"
-      v-bind:collection="editingCollection"
-      v-bind:collectionIndex="editingCollectionIndex"
-      v-bind:folder="editingFolder"
-      v-bind:folderIndex="editingFolderIndex"
-      v-on:hide-modal="displayModalEditFolder(false)"
+      :show="showModalEditFolder"
+      :collection="editingCollection"
+      :collectionIndex="editingCollectionIndex"
+      :folder="editingFolder"
+      :folderIndex="editingFolderIndex"
+      @hide-modal="displayModalEditFolder(false)"
     />
     <editRequest
-      v-bind:show="showModalEditRequest"
-      v-bind:collectionIndex="editingCollectionIndex"
-      v-bind:folderIndex="editingFolderIndex"
-      v-bind:request="editingRequest"
-      v-bind:requestIndex="editingRequestIndex"
-      v-on:hide-modal="displayModalEditRequest(false)"
+      :show="showModalEditRequest"
+      :collectionIndex="editingCollectionIndex"
+      :folderIndex="editingFolderIndex"
+      :request="editingRequest"
+      :requestIndex="editingRequestIndex"
+      @hide-modal="displayModalEditRequest(false)"
     />
     <importExportCollections
-      v-bind:show="showModalImportExport"
-      v-on:hide-modal="displayModalImportExport(false)"
+      :show="showModalImportExport"
+      @hide-modal="displayModalImportExport(false)"
     />
 
     <div class="flex-wrap">
@@ -78,13 +78,13 @@ TODO:
       <ul>
         <li v-for="(collection, index) in collections" :key="collection.name">
           <collection
-            v-bind:collection-index="index"
-            v-bind:collection="collection"
-            v-on:edit-collection="editCollection(collection, index)"
-            v-on:add-folder="addFolder(collection, index)"
-            v-on:edit-folder="editFolder($event)"
-            v-on:edit-request="editRequest($event)"
-          ></collection>
+            :collection-index="index"
+            :collection="collection"
+            @edit-collection="editCollection(collection, index)"
+            @add-folder="addFolder(collection, index)"
+            @edit-folder="editFolder($event)"
+            @edit-request="editRequest($event)"
+          />
         </li>
         <li v-if="collections.length === 0">
           <label>Collections are empty</label>

components/collections/saveRequestAs.vue

@@ -22,7 +22,7 @@
             type="text"
             id="selectLabel"
             v-model="requestData.name"
-            v-bind:placeholder="defaultRequestName"
+            :placeholder="defaultRequestName"
             @keyup.enter="saveRequestAs"
           />
           <label for="selectCollection">Collection</label>

layouts/default.vue

@@ -327,7 +327,7 @@
                   </button>
                 </a>
                 <a
-                  v-bind:href="
+                  :href="
                     'https://github.com/liyasthomas/postwoman/releases/tag/' +
                       version.name
                   "
@@ -340,7 +340,7 @@
                 <!-- <span v-if="version.hash">
                   -
                   <a
-                    v-bind:href="'https://github.com/liyasthomas/postwoman/commit/' + version.hash"
+                    :href="'https://github.com/liyasthomas/postwoman/commit/' + version.hash"
                     target="_blank"
                     rel="noopener"
                   >{{version.hash}}</a>

pages/index.vue

@@ -685,7 +685,7 @@
             <history
               @useHistory="handleUseHistory"
               ref="historyComponent"
-            ></history>
+            />
           </div>
           <input id="collection-tab" type="radio" name="side" />
           <label for="collection-tab">{{ $t("collections") }}</label>
@@ -698,10 +698,10 @@
       </aside>
 
       <save-request-as
-        v-bind:show="showRequestModal"
-        v-on:hide-model="hideRequestModal"
-        v-bind:editing-request="editRequest"
-      ></save-request-as>
+        :show="showRequestModal"
+        @hide-model="hideRequestModal"
+        :editing-request="editRequest"
+      />
 
       <pw-modal v-if="showModal" @close="showModal = false">
         <div slot="header">