67 lines
2.4 KiB
Vue
67 lines
2.4 KiB
Vue
<template>
|
|
<v-chip-group variant="flat" v-if="!hideFilter" class="pa-4" multiple column v-model="selectedTypes">
|
|
<v-chip v-for="(f,i) in $p.objectTypes" :key="i" :text="l[f.value]" :value="f.value" :color="f.color" filter></v-chip>
|
|
</v-chip-group>
|
|
<v-container class="asset-browser">
|
|
<v-row>
|
|
<v-col v-for="(v, i) in items" :key="i" cols="12" xs="6" sm="4" md="3" xl="2" class="position-relative img-preview">
|
|
<div class="img-wrapper">
|
|
<img :src="`/asset/thumb/${v.asset?.thumb}`" class="cursor-pointer" @click="$emit('select', v)"></img>
|
|
</div>
|
|
<div class="d-flex">
|
|
<span class="flex-grow-1">{{ v.name }}</span>
|
|
<v-icon variant="tonal" density="comfortable" :icon="`mdi-${ $p.objectTypes.find(t=>t.value == v.type).icon }`"
|
|
:color="$p.objectTypes.find(t=>t.value == v.type).color" class="position-absolute top-0 left-0 ma-5">
|
|
</v-icon>
|
|
<v-btn variant="tonal" density="comfortable" size="small" icon="mdi-play" @click="preview(v)"
|
|
color="light-blue-darken-4" class="position-absolute top-0 right-0 ma-6"></v-btn>
|
|
<slot name="action-buttons" v-bind:object="v"></slot>
|
|
</div>
|
|
</v-col>
|
|
</v-row>
|
|
</v-container>
|
|
<v-dialog v-model="previewDialog" width="auto" max-width="1200">
|
|
<AssetPreview :object="previewObject" autoplay></AssetPreview>
|
|
</v-dialog>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
export default {
|
|
props:[
|
|
'modelValue', 'query', 'hideFilter'
|
|
],
|
|
emits:['select', 'preview'],
|
|
data(){
|
|
return {
|
|
items: [],
|
|
q: {},
|
|
selectedTypes: this.$p.objectTypes.map(f=>f.value),
|
|
previewObject: null,
|
|
previewDialog: false,
|
|
}
|
|
},
|
|
|
|
async created(){
|
|
await this.load();
|
|
},
|
|
|
|
watch:{
|
|
async selectedTypes(n){
|
|
this.q.type = { $in: n };
|
|
await this.load();
|
|
}
|
|
},
|
|
|
|
methods:{
|
|
async load(){
|
|
Object.assign(this.q, this.query || {});
|
|
this.items = (await this.$api.gameObject.search(this.q)).data.data;
|
|
},
|
|
preview(v){
|
|
this.previewObject = v;
|
|
this.previewDialog = true;
|
|
}
|
|
}
|
|
}
|
|
</script> |