25 lines
1.2 KiB
Vue
25 lines
1.2 KiB
Vue
<template>
|
|
<div class="slot-block">
|
|
<span class="field-label">{{ label }}</span>
|
|
<button
|
|
type="button"
|
|
class="slot-thumb"
|
|
:class="asset ? (size==='hero' ? 'slot-thumb--hero' : 'slot-thumb--slot') : 'slot-thumb--empty'"
|
|
@click="$emit('pick')"
|
|
>
|
|
<span v-if="asset && hidden" class="p-2 text-center text-[var(--type-sm)] text-[var(--muted)]">Still loaded · preview hidden</span>
|
|
<img v-else-if="asset" :src="asset.kind==='clip' ? `/api/library/clips/${asset.id}/thumb` : `/api/library/stills/${asset.id}`" :alt="label">
|
|
<span v-else class="inline-flex items-center gap-1">Select <span aria-hidden="true">▾</span></span>
|
|
</button>
|
|
<p v-if="asset" class="slot-caption" :title="assetLabel(asset)">{{ assetLabel(asset) }}</p>
|
|
<label v-if="upload" class="slot-upload">Upload {{ label.toLowerCase() }}
|
|
<input type="file" accept="image/*" class="sr-only" :disabled="disabled" @change="$emit('upload',$event)">
|
|
</label>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import {assetLabel} from '~/shared/studio2/viewer.mjs'
|
|
withDefaults(defineProps<{label:string;asset?:any;hidden?:boolean;upload?:boolean;disabled?:boolean;size?:'hero'|'slot'}>(),{size:'slot'})
|
|
defineEmits(['pick','upload'])
|
|
</script>
|