Div Grid

<template>
  <div class="p-4 bg-elevated rounded-lg">
    <h3 class="text-lg font-bold mb-4 text-highlighted">
      Div Grid
    </h3>
    <MDivGrid
      :rows="5"
      :cols="10"
      :cell-size="40"
      border-color="border"
      fill-color="primary"
      class="mx-auto"
      @cell-click="handleCellClick"
    />
  </div>
</template>

<script setup lang="ts">
const handleCellClick = (row: number, col: number) => {
  console.log(`Cell clicked: row ${row}, col ${col}`)
}
</script>

<template>
  <div class="flex w-full flex-col items-center gap-4 py-2">
    <MDivGrid
      :key="clicks"
      :rows="8"
      :cols="12"
      :cell-size="20"
      :clicked-cell="clicked"
      border-color="border"
      fill-color="primary"
      class="overflow-hidden rounded-lg border border-default"
      @cell-click="onCellClick"
    />

    <p class="text-sm text-muted">
      <template v-if="clicked">
        Ripple from row <span class="font-medium text-highlighted">{{ clicked.row }}</span>, column <span class="font-medium text-highlighted">{{ clicked.col }}</span>
      </template>
      <template v-else>
        Click any cell to trigger the ripple.
      </template>
    </p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const clicked = ref<{ row: number, col: number } | null>(null)
const clicks = ref(0)

const onCellClick = (row: number, col: number) => {
  clicked.value = { row, col }
  clicks.value++
}
</script>