95 lines
2.7 KiB
Vue
95 lines
2.7 KiB
Vue
<script setup lang="ts">
|
|
import Card from '@/components/card.vue'
|
|
import { type CardT, type Preset, presets, validPreset } from '@/colors.ts'
|
|
import { useCards } from '@/stores/cards.ts'
|
|
import { ref } from 'vue'
|
|
|
|
const cardStore = useCards()
|
|
function presetChange(card: CardT, preset: keyof typeof presets | 'none') {
|
|
if (!validPreset(preset)) {
|
|
return
|
|
}
|
|
|
|
const values = presets[preset]
|
|
console.log(values)
|
|
Object.keys(values).forEach((key) => (card[key as keyof Preset] = values[key as keyof Preset]))
|
|
}
|
|
const active = ref(-1)
|
|
</script>
|
|
|
|
<template>
|
|
<div class="grid grid-cols-3">
|
|
<div class="noPrint flex flex-col gap-3 border-r-4 bg-gray-100 mr-4 h-screen overflow-y-auto">
|
|
<div
|
|
v-for="(card, i) in cardStore.cards"
|
|
:key="i"
|
|
class="p-3 bg-gray-300 flex flex-col gap-1 m-2 mr-0 border-2 border-gray-200 hover:border-gray-800 transition-colors"
|
|
@mouseover="active = i"
|
|
@mouseleave="active = -1"
|
|
>
|
|
<input v-model="card.title" placeholder="Title" />
|
|
<div class="flex flex-row gap-2">
|
|
<input
|
|
v-model="card.bgColor"
|
|
placeholder="Title Background Color"
|
|
title="Title Background Color"
|
|
type="color"
|
|
class="h-16"
|
|
/>
|
|
<input
|
|
v-model="card.textColor"
|
|
placeholder="Title Text Color"
|
|
title="Title Text Color"
|
|
type="color"
|
|
class="h-16"
|
|
/>
|
|
<input
|
|
v-model="card.color"
|
|
placeholder="Background Color"
|
|
title="Background Color"
|
|
type="color"
|
|
class="h-16"
|
|
/>
|
|
<input
|
|
v-model="card.nameColor"
|
|
placeholder="Name Text Color"
|
|
title="Name Text Color"
|
|
type="color"
|
|
class="h-16"
|
|
/>
|
|
<input
|
|
v-model="card.textSize"
|
|
type="number"
|
|
min="1"
|
|
max="10"
|
|
placeholder="Name Text Size"
|
|
title="Name Text Size"
|
|
/>
|
|
<select @change="(e) => presetChange(card, (e.target as any)!.value)" title="Preset">
|
|
<option v-for="(preset, key) in presets" :key="key" :value="key">
|
|
{{ preset.title }}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
<input v-model="card.name" placeholder="Name" />
|
|
</div>
|
|
</div>
|
|
<div class="col-span-2 grid grid-cols-2 page gap-2 h-screen overflow-y-auto">
|
|
<card
|
|
v-for="(_, i) in cardStore.cards"
|
|
:key="i"
|
|
v-model="cardStore.cards[i]"
|
|
:active="active === i"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
input,
|
|
select {
|
|
@apply border-2;
|
|
padding: 0.25rem;
|
|
}
|
|
</style>
|