feat: add customizeable class names for dragging

README.md

@@ -5,6 +5,7 @@
 [![GitHub issues](https://img.shields.io/github/issues/alexsasharegan/vue-transmit.svg?style=flat)](https://github.com/alexsasharegan/vue-transmit/issues)
 [![GitHub stars](https://img.shields.io/github/stars/alexsasharegan/vue-transmit.svg)](https://github.com/alexsasharegan/vue-transmit/stargazers)
 [![GitHub forks](https://img.shields.io/github/forks/alexsasharegan/vue-transmit.svg)](https://github.com/alexsasharegan/vue-transmit/network)
+[![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg)](https://conventionalcommits.org)
 [![Twitter](https://img.shields.io/twitter/url/https/github.com/alexsasharegan/vue-transmit.svg?style=social)](https://twitter.com/intent/tweet?text=Wow:&url=https%3A%2F%2Fgithub.com%2Falexsasharegan%2Fvue-transmit)
 
 A Vue.js drag & drop uploader based on Dropzone.js (`~26kB`, `~9kB` gzipped). Many thanks to [Matias Meno](https://gitlab.com/meno/dropzone/tree/master) for paving the way with the original Dropzone.js! [Check it out](https://gitlab.com/meno/dropzone/tree/master) for any of your non-vue projects. 🙌
@@ -29,7 +30,7 @@ Also, a special File class has been written (`VTransmitFile`) to add useful info
 |Property|Type|Default|
 |---|---|---|
 |tag|String|"div"|
-|dropZoneClasses|Array, Object, String|null|
+|uploadAreaClasses|Array, Object, String|null|
 |url|String|undefined|
 |method|String|"post"|
 |withCredentials|Boolean|false|
@@ -113,7 +114,8 @@ This slot receives a number of props:
   addedFiles: VTransmitFile[],
   queuedFiles: VTransmitFile[],
   uploadingFiles: VTransmitFile[],
-  activeFiles: VTransmitFile[]
+  activeFiles: VTransmitFile[],
+  isUploading: Boolean
 }
 ```
 
@@ -148,7 +150,6 @@ This slot receives a number of props:
   "height": 700,
   "xhr": {},
   "dataUrl": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAYAAAA5ZDbSAAAgAElEQVR4XlS9B7RmZ3UluG/...=",
-  "VERSION": "1.0.5"
 }
 ```
 
@@ -177,7 +178,14 @@ This slot receives a number of props:
             <div v-for="(file, i) in props.files" :key="file.id" :class="{'mt-5': i === 0}">
               <div class="media">
                 <img :src="file.dataUrl" class="img-fluid d-flex mr-3">
-                <pre class="media-body">{{ file | json }}</pre>
+                <div class="media-body">
+                  <h3>{{ file.name }}</h3>
+                  <div class="progress" style="width: 50vw;">
+                    <div class="progress-bar bg-success"
+                        :style="{width: file.upload.progress + '%'}"></div>
+                  </div>
+                  <pre>{{ file | json }} </pre>
+                </div>
               </div>
             </div>
           </template>

package.json

@@ -5,12 +5,7 @@
   "module": "index.js",
   "jsnext:main": "index.js",
   "main": "dist/vue-transmit.min.js",
-  "keywords": [
-    "dragndrop",
-    "drag and drop",
-    "file upload",
-    "upload"
-  ],
+  "keywords": ["dragndrop", "drag and drop", "file upload", "upload"],
   "directories": {
     "test": "test"
   },
@@ -19,7 +14,8 @@
     "dev": "cross-env NODE_ENV=development webpack --progress --hide-modules -w",
     "test": "php -S localhost:3000 -t ./test/",
     "lib-size": "gzip -c dist/vue-transmit.min.js | wc -c",
-    "release": "standard-version"
+    "release": "standard-version",
+    "release:publish": "git push --follow-tags origin master; npm publish"
   },
   "dependencies": {
     "lodash-es": "^4.17.4",

src/classes/VTransmitFile.js

@@ -105,8 +105,7 @@ export default class VTransmitFile {
       height: undefined,
       xhr: undefined,
       dataUrl: undefined,
-      errorMessage: undefined,
-      VERSION: VERSION
+      errorMessage: undefined
     }
   }
 

src/components/VueTransmit.vue

@@ -1,8 +1,8 @@
 <template>
   <component :is="tag">
-    <div class="v-transmit__drop-zone"
+    <div class="v-transmit__upload-area"
+         :class="[dragClass, uploadAreaClasses]"
          draggable="true"
-         :class="[{'v-transmit__drop-zone--is-dragging': dragging}, dropZoneClasses]"
          @click="handleClickUploaderAction"
          @dragstart="$emit('drag-start', $event)"
          @dragend="handleDragEnd"
@@ -13,13 +13,7 @@
       <slot></slot>
     </div>
     <slot name="files"
-          :files="files"
-          :accepted-files="acceptedFiles"
-          :rejected-files="rejectedFiles"
-          :added-files="addedFiles"
-          :queued-files="queuedFiles"
-          :uploading-files="uploadingFiles"
-          :active-files="activeFiles"></slot>
+          v-bind="fileSlotBindings"></slot>
     <input type="file"
            ref="hiddenFileInput"
            :multiple="multiple"
@@ -45,7 +39,7 @@
     width: 0px !important;
   }
 
-  .v-transmit__drop-zone {
+  .v-transmit__upload-area {
     width: 100%;
     border-radius: 1rem;
     border: 2px dashed $border-color;
@@ -56,7 +50,7 @@
     }
   }
 
-  .v-transmit__drop-zone--is-dragging {
+  .v-transmit__upload-area--is-dragging {
     background: $drop-color linear-gradient(-45deg, $drop-color-alt 25%, transparent 25%, transparent 50%, $drop-color-alt 50%, $drop-color-alt 75%, transparent 75%, transparent);
     background-size: 40px 40px;
   }
@@ -103,6 +97,12 @@ export default {
     inputEl() {
       return this.$refs.hiddenFileInput
     },
+    dragClass() {
+      return {
+        "v-transmit__drop-zone--is-dragging": this.dragging,
+        [this.dragClass]: this.dragging,
+      }
+    },
     filesToAccept() {
       return this.acceptedFileTypes.join(",")
     },
@@ -136,6 +136,18 @@ export default {
     isUploading() {
       return this.uploadingFiles.length > 0
     },
+    fileSlotBindings() {
+      return {
+        files: this.files,
+        acceptedFiles: this.acceptedFiles,
+        rejectedFiles: this.rejectedFiles,
+        addedFiles: this.addedFiles,
+        queuedFiles: this.queuedFiles,
+        uploadingFiles: this.uploadingFiles,
+        activeFiles: this.activeFiles,
+        isUploading: this.isUploading,
+      }
+    },
   },
   watch: {
     acceptedFiles(value) {

src/core/props.js

@@ -6,10 +6,14 @@ export default {
     type: String,
     default: "div"
   },
-  dropZoneClasses: {
+  uploadAreaClasses: {
     type: [Array, Object, String],
     default: null
   },
+  dragClass: {
+    type: String,
+    default: null
+  },
   url: {
     type: String,
     required: true

test/index.php

@@ -52,7 +52,10 @@
                 <img :src="file.dataUrl" class="img-fluid d-flex mr-3">
                 <div class="media-body">
                   <h3>{{ file.name }}</h3>
-                  <p v-if="file.status === 'uploading'">{{ file.upload.progress }}%</p>
+                  <div class="progress" style="width: 50vw;">
+                    <div class="progress-bar bg-success"
+                        :style="{width: file.upload.progress + '%'}"></div>
+                  </div>
                   <pre>{{ file | json }} </pre>
                 </div>
               </div>