App.vue

<script setup>
import Example1Generic from "./Example1Generic.vue";
import Example2TicTacToe from "./Example2TicTacToe.vue";
import Example3Counters from "./Example3Counters.vue";
import Example4Lessons from "./Example4Lessons.vue";
import Example5Colors from "./Example5Colors.vue";
import Example6Disabled from "./Example6Disabled.vue";
import Example7DisabledItems from "./Example7DisabledItems.vue";
import Example8Responsive from "./Example8Responsive.vue";
</script>

<template>
  <div id="app">
    <h1><code>DragGrid</code> Examples</h1>
    <h2>Example 1</h2>
    <p>
      Grid with two programmatically blocked cells and one programmatically
      blocked item
    </p>
    <example1-generic></example1-generic>

    <h2>Example 2: "Tic-Tac-Toe"</h2>
    <p>
      A grid functioning as a playing field and another functioning as a
      container for playing pieces. You can drag as many pieces as you want from
      the container to the field.
    </p>

    <example2-tic-tac-toe></example2-tic-tac-toe>

    <h2>Example 3: Counters</h2>
    <p>
      Showcasing local and global state: The local state of the counter
      components doesn't change when moved inside one grid, but is cleared when
      moved to the other. The global state is in the <code>data</code> attribute
      of each item and gets transferred as well. Both grids have also custom
      highlights.
    </p>

    <example3-counters></example3-counters>

    <h2>Example 4: Dynamic lessons</h2>
    <p>
      These lessons are loaded from <code>computed</code> to simulate a
      non-editable source like an API. they are changed using the method
      <code>handleLessonMoved</code>. Try changing the sizes of Lesson1, the
      grid and the texts of the items! The lesson container on the side doesn't
      have a highlight and doesn't keep track of the item position. Try moving
      <code>item3</code> back and forth!
    </p>

    <example4-lessons></example4-lessons>

    <h2>Example 5: Dynamic colors</h2>
    <p>
      This example showcases the <code>rawItem</code> with the custom method
      <code>getColor</code>. Both grids on the outside call the method with
      <code>"red"</code> while the one in the middle uses <code>"green"</code>.
      We use arrays called <code>placedA</code>, <code>placedB</code> and
      <code>placedC</code> to save, which item is contained in which grid.
      Notice: the third grid doesn't save the item position, they are always
      positioned automatically.
    </p>
    <example5-colors></example5-colors>

    <div class="row">
      <div>
        <h2>Example 6: Disabled grid</h2>
        <p>
          This uses the same data as the tic tac toe but is completely disabled.
          Notice how the items still move if the data were changed. The grid can
          also be loading. Uncheck the checkbox to enable:
        </p>

        <example6-disabled></example6-disabled>
      </div>
      <div style="height: 100%">
        <h2>Example 7: Disabled fields and items with props</h2>
        <p>
          This is a grid with disabled fields and items. Red items are disabled
          and cannot be moved.
        </p>

        <example7-disabled-items></example7-disabled-items>
      </div>
    </div>

    <h2>Example 8:</h2>
    <p>The grid is responsive. Try resizing it below:</p>
    <example8-responsive></example8-responsive>
  </div>
</template>

<script>
export default {
  name: "App",
};
</script>

<style scoped>
.row {
  display: flex;
  justify-content: space-between;
}

h2 {
  padding-top: 1em;
}

h2 + p {
  padding-bottom: 0.5em;
}

code {
  background: lightgray;
  padding: 0.2em;
  border-radius: 3px;
}
</style>