0a65393527
Former-commit-id: 2d19655aac80ec7033829b0b3d708bf86986252c [formerly b8bb006bd1a5492960c1d4793e15e80775ddc5fd] [formerly 4641277c14953bdb2ddab89ba866cf63f3dac0f9 [formerly 95b91a64a3c648e1414c7feb4b597bf0da195664]] Former-commit-id: 5a6e07758bbe67fd202effa5b2975c65227eaebd [formerly 9a161548d270750b8da949189ad6f3b641779bfc] Former-commit-id: 84e0bbcbbead53c5e91987574d5c854a9792515f
51 lines
1.2 KiB
Vue
51 lines
1.2 KiB
Vue
<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">—</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>
|