sb/src/components/ShotEntry.vue

<template>
    <div class="shot">
        <span class="tag" :style='{color: shotColor}'></span>
        <button class="remove" @click="emit('remove')">x</button>
        <img :src="img">
        <div class="meta" v-if="!edit" @dblclick="edit=true">
            <span class="order">{{order}}</span>
            <h3 class="title" >{{title}}</h3>
            <p class="description">{{description}}</p>
        </div>
        <form class="meta edit" v-else>
            <input class="title" v-model="shotTitle">
            <textarea class="description" v-model="shotDescription"></textarea>
            <div class="colors">
                <span class="color" @click="setColor(c)" v-for='c in colors' :style="{color: c}"></span>
            </div>
            <button @click.prevent="update">Confirm</button>
        </form>
    </div>


</template>
<script setup>

    import {ref, watch } from 'vue'
    import {palette} from '../composables/palette.js'
    const {colors} = palette()

    const props = defineProps(['title', 'description', 'img', 'order', 'color'])

    watch(props, ()=>{
        shotColor.value = props.color
    })

    const shotTitle = ref(props.title)
    const shotDescription = ref(props.description)
    const shotColor = ref(props.color || colors[0])
    const emit = defineEmits(['remove', 'update']) 

    const edit = ref(false)

    const setColor = (c) => {
        shotColor.value = c
    }

    const update = () => {
        emit('update', {title: shotTitle.value, description: shotDescription.value, order: props.order, color: shotColor.value})
        edit.value = false
    }


</script>
<style>

.shot {
    position: relative;
    display: inline-block;

}


.shot img {
    width: 320px; 
    height: 180px;
    object-fit: cover;
    position: relative;
    z-index: 10;
    padding: 8px;
}

.shot .meta {
    position: relative;
    max-width: 320px;
    gap: 0;
}

.shot .tag {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: currentColor;
}

.colors {
    display: flex;
    height: 16px;
    align-items: stretch;
}

.color {
    flex: 1;
    background-color: currentColor;
}

.colors .color {
    cursor: pointer;
}

.title, .description{
    margin-block: 0;
    margin-inline: 8px;
}

.title {
    word-wrap: break-word;
    padding-right: 1rem;
}


.meta.edit input,
.meta.edit textarea,
.meta.edit button {
width: auto;
margin: 0;
}

.meta.edit {
display: flex;
gap: 8px;
padding: 8px;

}

.description {
    font-size: 0.85rem;
    margin-bottom: 8px;
}

.order {
    position: absolute;
    top: 0;
    right: 4px ;
    display: inline-block;
    z-index: 100;
    padding: 4px;
    font-weight: bold;
    opacity: 0.4;
}

.remove {
    opacity: 0;
    dislay: inline-block;
    position: absolute;
    background: none;
    border: none;
    color: white;
    right: 4px;
    top: 0px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    z-index: 100;
}

.shot:hover .remove {
    opacity: 1;
}

</style>