Example6Disabled.vue

<script setup>
import CircularCard from "./components/CircularCard.vue";
import DragGrid from "../../src/DragGrid.vue";
import SpinningLoader from "./components/SpinningLoader.vue";
</script>

<template>
  <div>
    <label>
      <input type="checkbox" v-model="gridDisabled" />
      Grid disabled?
    </label>
    <label>
      <input type="checkbox" v-model="gridLoading" />
      Grid is loading?
    </label>

    <drag-grid
      v-model="ticTacToe"
      :cols="3"
      :rows="3"
      :disabled="gridDisabled"
      :loading="gridLoading"
      class="tic-tac-toe"
      context="ticTacToe"
    >
      <template #item="item">
        <CircularCard>
          {{ item.key.startsWith("a") ? "X" : "O" }}
        </CircularCard>
      </template>
      <template #loader>
        <CircularCard>
          <SpinningLoader></SpinningLoader>
        </CircularCard>
      </template>
    </drag-grid>
  </div>
</template>

<script>
export default {
  name: "Example6Disabled",
  data() {
    return {
      ticTacToe: [
        { x: 1, y: 1, w: 1, h: 1, key: "a1", data: { text: "X" } },
        { x: 3, y: 3, w: 1, h: 1, key: "b1", data: { text: "O" } },
      ],
      gridDisabled: true,
      gridLoading: false,
    };
  },
};
</script>

<style scoped>
.tic-tac-toe {
  max-width: 400px;
}
</style>