Vue 3 Composition-api example

[Fanna1119]

Seeing that the vue 3 branch is getting some love, though I could not find an example in the docs using the composition-api

<template>
  <div>
    <div class="layoutJSON">
      Displayed as
      <code>[x, y, w, h]</code>:
      <div class="columns">
        <div class="layoutItem" v-for="item in layout" :key="item.i">
          <b>{{ item.i }}</b>
          : [{{ item.x }}, {{ item.y }}, {{ item.w }}, {{ item.h }}]
        </div>
      </div>
    </div>
    <button @click="addItem">Add an item dynamically</button>
    <input type="checkbox" v-model="draggable" /> Draggable
    <input type="checkbox" v-model="resizable" /> Resizable
    <grid-layout
      :layout="layout"
      :col-num="colNum"
      :row-height="30"
      :is-draggable="draggable"
      :is-resizable="resizable"
      :vertical-compact="true"
      :use-css-transforms="true"
    >
      <grid-item
        :key="item"
        v-for="item in layout"
        :static="item.static"
        :x="item.x"
        :y="item.y"
        :w="item.w"
        :h="item.h"
        :i="item.i"
      >
        <span class="text">{{ item.i }}</span>
        <span class="remove" @click="removeItem(item.i)">x</span>
      </grid-item>
    </grid-layout>
  </div>
</template>

<script>
import { onMounted, reactive, toRefs } from 'vue'
import { useStorage } from '@vueuse/core'
export default {

  setup() {

    onMounted(() => {
      dragAttrs.index = dragAttrs.layout.length;
    });

   //use local storage via vueuse

    // const dragAttrs = reactive({
    //   layout: useStorage('layout', []),
    //   draggable: useStorage('draggable', true),
    //   resizable: useStorage('resizable', true),
    //   colNum: useStorage('colNum', 12),
    //   index: useStorage('index', 0),
    //   responsive: useStorage('responsive', true)
    // });

    const dragAttrs = reactive({
      layout: [],
      draggable: true,
      resizable: true,
      colNum: 12,
      index: 0,
      responsive: true
    });


    function addItem() {
      dragAttrs.layout.push({
        x: (dragAttrs.layout.length * 2) % (dragAttrs.colNum || 12),
        y: dragAttrs.layout.length + (dragAttrs.colNum || 12),
        w: 2,
        h: 2,
        i: dragAttrs.index,
      });
      dragAttrs.index++;
      window.dispatchEvent(new Event("resize"));
    }

    function removeItem(val) {
      const index = dragAttrs.layout.map(item => item.i).indexOf(val);
      dragAttrs.layout.splice(index, 1);
    }

    return {
      addItem, removeItem,
      ...toRefs(dragAttrs)
    }

  },

}
</script>