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

<template>
  <drag-grid
    v-model="someDisabledItems"
    :cols="4"
    :rows="4"
    class="size"
    :disabled-fields="disabledFields"
  >
    <template #item="{ rawItem }">
      <div
        class="container"
        :style="{ background: rawItem.disabled ? 'red' : 'green' }"
      ></div>
    </template>
    <template #disabledField
      ><div class="container">This field is disabled!</div></template
    >
  </drag-grid>
</template>

<script>
export default {
  name: "Example7DisabledItems",
  data() {
    return {
      someDisabledItems: [
        { key: "key1", x: 1, y: 3, w: 1, h: 1, data: {} },
        { key: "key2", x: 2, y: 2, w: 1, h: 1, data: {} },
        { key: "key3", x: 3, y: 4, w: 1, h: 1, data: {} },
        { key: "key4", x: 3, y: 1, w: 1, h: 1, data: {}, disabled: true },
        { key: "key5", x: 1, y: 2, w: 1, h: 1, data: {}, disabled: true },
        { key: "key6", x: 4, y: 3, w: 1, h: 1, data: {}, disabled: true },
      ],
      disabledFields: [
        { x: 1, y: 1 },
        { x: 2, y: 3 },
        { x: 4, y: 2 },
      ],
    };
  },
};
</script>

<style scoped>
.container {
  background: lightcoral;
  width: 100%;
  height: 100%;
  user-select: none;
  text-align: center;
}
.size {
  aspect-ratio: 1;
}
</style>