44 lines
1013 B
Vue
44 lines
1013 B
Vue
|
<template>
|
||
|
|
<div
|
||
|
|
class="grid grid-cols-6 grid-rows-2 gap-2 justify-center px-2 mx-auto max-w-sm">
|
||
|
|
<TransitionGroup name="slide_left">
|
||
|
|
<PlaquetteBox
|
||
|
|
v-for="(item, i) in plaquettes"
|
||
|
|
:key="i"
|
||
|
|
is="button"
|
||
|
|
@click="click(item)"
|
||
|
|
class="h-11 border"
|
||
|
|
:class="{
|
||
|
|
'text-stone-600 border-stone-600': !item.free,
|
||
|
|
'hover:border-white': item.free,
|
||
|
|
}"
|
||
|
|
:style="{ transitionDelay: `${initDelay * i}ms` }"
|
||
|
|
:dynamic-size="true">
|
||
|
|
{{ item.value }}
|
||
|
|
</PlaquetteBox>
|
||
|
|
</TransitionGroup>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { ref } from 'vue'
|
||
|
|
|
||
|
|
import PlaquetteBox from '@/components/common/PlaquetteBox.vue'
|
||
|
|
import { Plaquette } from '@/types'
|
||
|
|
|
||
|
|
defineProps<{
|
||
|
|
plaquettes: Plaquette[]
|
||
|
|
}>()
|
||
|
|
|
||
|
|
const emit = defineEmits<{
|
||
|
|
(e: 'clickNumber', item: Plaquette): void
|
||
|
|
}>()
|
||
|
|
|
||
|
|
const initDelay = ref(100)
|
||
|
|
|
||
|
|
function click(item: Plaquette): void {
|
||
|
|
initDelay.value = 0
|
||
|
|
emit('clickNumber', item)
|
||
|
|
}
|
||
|
|
</script>
|