updates...

Former-commit-id: 2d19655aac80ec7033829b0b3d708bf86986252c [formerly b8bb006bd1a5492960c1d4793e15e80775ddc5fd] [formerly 4641277c14953bdb2ddab89ba866cf63f3dac0f9 [formerly 95b91a64a3]]
Former-commit-id: 5a6e07758bbe67fd202effa5b2975c65227eaebd [formerly 9a161548d270750b8da949189ad6f3b641779bfc]
Former-commit-id: 84e0bbcbbead53c5e91987574d5c854a9792515f

_assets/src/components/ListingItem.vue

@@ -0,0 +1,50 @@
+<template>
+    <div class="item" 
+        draggable="true"
+        :id="base64()"
+        :data-dir="isDir" 
+        :data-url="url" >
+        <div>
+            <i class="material-icons">{{ icon() }}</i>
+        </div>
+
+        <div>
+            <p class="name">{{ name }}</p>
+
+            <p v-if="isDir" class="size" data-order="-1">&mdash;</p>
+            <p v-else class="size" :data-order="humanSize()">{{ humanSize() }}</p>
+
+            <p class="modified">
+                <time :datetime="modified">{{ humanTime() }}</time>
+            </p>
+        </div>
+    </div>
+</template>
+
+<script>
+import filesize from 'filesize'
+import moment from 'moment'
+
+export default {
+  name: 'item',
+  props: ['name', 'isDir', 'url', 'type', 'size', 'modified'],
+  methods: {
+    icon: function () {
+      if (this.isDir) return 'folder'
+      if (this.type === 'image') return 'insert_photo'
+      if (this.type === 'audio') return 'volume_up'
+      if (this.type === 'video') return 'movie'
+      return 'insert_drive_file'
+    },
+    humanSize: function () {
+      return filesize(this.size)
+    },
+    humanTime: function () {
+      return moment(this.modified).fromNow()
+    },
+    base64: function () {
+      return window.btoa(this.name)
+    }
+  }
+}
+</script>