61 lines
1.9 KiB
Vue
61 lines
1.9 KiB
Vue
<template>
|
|
<div class="photo-card">
|
|
<button
|
|
type="button"
|
|
class="slot-thumb"
|
|
:class="asset ? 'slot-thumb--slot' : 'slot-thumb--empty'"
|
|
:aria-label="asset ? 'Replace photo' : 'Choose a photo'"
|
|
@click="$emit('pick')"
|
|
>
|
|
<span v-if="asset && hidden" class="p-2 text-center text-[var(--type-sm)] text-[var(--muted)]">Photo loaded</span>
|
|
<img v-else-if="asset" :src="thumbSrc" alt="">
|
|
<span v-else class="inline-flex flex-col items-center gap-1 px-2 text-center">
|
|
<span>Choose a photo</span>
|
|
</span>
|
|
</button>
|
|
<div class="photo-card-body">
|
|
<label class="photo-role-label">
|
|
<span class="field-label">This photo is:</span>
|
|
<select
|
|
class="field-control photo-role-select"
|
|
:value="role"
|
|
:disabled="readonly"
|
|
@change="$emit('update:role', ($event.target as HTMLSelectElement).value)"
|
|
>
|
|
<option v-for="opt in roleOptions" :key="opt.id" :value="opt.id">{{ opt.label }}</option>
|
|
</select>
|
|
</label>
|
|
<div class="slot-actions">
|
|
<button
|
|
v-if="!readonly && asset"
|
|
type="button"
|
|
class="slot-token-btn"
|
|
title="Mention this photo in the prompt"
|
|
@click.stop="$emit('mention')"
|
|
>Mention in prompt</button>
|
|
<button
|
|
v-if="!readonly && asset"
|
|
type="button"
|
|
@click.stop="$emit('pick')"
|
|
>Replace</button>
|
|
<button v-if="!readonly" type="button" @click.stop="$emit('remove')">Remove</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
const props = withDefaults(defineProps<{
|
|
asset?: any
|
|
hidden?: boolean
|
|
role: string
|
|
roleOptions: { id: string; label: string }[]
|
|
readonly?: boolean
|
|
}>(), { readonly: false, hidden: false })
|
|
defineEmits(['pick', 'remove', 'mention', 'update:role'])
|
|
const thumbSrc = computed(() => {
|
|
if (!props.asset) return ''
|
|
if (props.asset.kind === 'clip') return `/api/library/clips/${props.asset.id}/thumb`
|
|
return `/api/library/stills/${props.asset.id}`
|
|
})
|
|
</script>
|