You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
124 lines
2.4 KiB
Vue
124 lines
2.4 KiB
Vue
<template>
|
|
<div class="add-shot">
|
|
<span class="tag" :style='{color: currentColor}'></span>
|
|
<FileLoader class="cover" @upload="getImg" @file="setFile" :key="key"></FileLoader>
|
|
<div class="meta" v-if="file">
|
|
<input v-model="title" placeholder="Title">
|
|
<textarea v-model="description" placeholder="Description"></textarea>
|
|
<div class="colors">
|
|
<span class="color" @click="setColor(color)" v-for='color in colors' :style="{color: color}"></span>
|
|
</div>
|
|
<button class="insert" @click="add">Add</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import FileLoader from '../components/FileLoader.vue'
|
|
import {ref} from 'vue'
|
|
import {palette} from '../composables/palette.js'
|
|
const {colors} = palette()
|
|
|
|
|
|
|
|
|
|
const file = ref(null)
|
|
const title = ref('')
|
|
const description = ref('')
|
|
const img = ref('')
|
|
const key = ref(0)
|
|
|
|
const currentColor = ref(colors[0])
|
|
|
|
const emits = defineEmits(['add'])
|
|
|
|
|
|
const getImg = (e) => img.value = e
|
|
|
|
|
|
|
|
const setColor = (color) => {
|
|
currentColor.value = color
|
|
}
|
|
|
|
|
|
const setFile = e => {
|
|
file.value = e
|
|
}
|
|
|
|
const add = () => {
|
|
emits('add', {
|
|
title: title.value,
|
|
description: description.value,
|
|
img: img.value,
|
|
color: currentColor.value,
|
|
file: file.value
|
|
}
|
|
)
|
|
reset()
|
|
}
|
|
|
|
const reset = () => {
|
|
title.value = ""
|
|
description.value = ""
|
|
img.value = ""
|
|
currentColor.value = colors[0]
|
|
key.value += 1
|
|
}
|
|
|
|
</script>
|
|
<style>
|
|
|
|
.add-shot{
|
|
position: relative;
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.add-shot .cover {
|
|
width: 320px;
|
|
height: 180px;
|
|
object-fit: cover;
|
|
padding: 8px;
|
|
}
|
|
|
|
.add-shot .tag {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: currentColor;
|
|
}
|
|
|
|
.meta {
|
|
position: relative;
|
|
max-width: 320px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
padding: 8px;
|
|
|
|
}
|
|
|
|
.meta input,
|
|
.meta textarea,
|
|
.meta button {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 8px;
|
|
font-family: sans-serif;
|
|
outline: none;
|
|
border: 1px solid rgba(125,125,125,0.5);
|
|
}
|
|
|
|
.description{
|
|
flex: 1;
|
|
}
|
|
|
|
.insert {
|
|
align-self: flex-start;
|
|
}
|
|
|
|
</style>
|