30 lines
798 B
Vue
30 lines
798 B
Vue
<script setup lang="ts">
|
|
import type { SpecialCar } from '@/data/specials.ts';
|
|
import { useTramStore } from '@/stores/tram.ts';
|
|
import { VaCheckbox } from 'vuestic-ui';
|
|
|
|
defineProps<{
|
|
car: SpecialCar;
|
|
}>();
|
|
|
|
const tramStore = useTramStore();
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="grid grid-cols-2 justify-between rounded-2xl px-4 py-2 text-center transition-colors sm:grid-cols-4"
|
|
:class="
|
|
tramStore.specials.bsag.includes(car[0])
|
|
? 'bg-green-100 hover:bg-green-200'
|
|
: 'bg-gray-100 hover:bg-gray-200'
|
|
"
|
|
>
|
|
<p class="text-left">{{ car.length > 3 ? car[3] : car[0] }}</p>
|
|
<p>{{ car[1] }}</p>
|
|
<p>{{ car[2] }}</p>
|
|
<VaCheckbox class="ms-auto mr-2" :array-value="car[0]" v-model="tramStore.specials.bsag" />
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|