Vue 3 with number of columns different from 12

eloparco commented 4 years ago

Subject of the issue

Using Vue 3 I'm not able to use a number of columns different from the default one (12).

Your environment

gridstack 2.0.2

Steps to reproduce

Attached the code to reproduce the behavior (with a couple of modifications wrt the one in this repo). Cannot use jsfiddle since it seems like it doesn't support Vue 3. The example works (using 6 columns) but I need to use grid-stack-6 in addition to column: 6.

eloparco commented 4 years ago

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Gridstack.js Vue integration example</title>
    <link rel="stylesheet" href="demo.css" />

    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/gridstack@2.0.2/dist/gridstack.min.css"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/gridstack@2.0.2/dist/gridstack-extra.min.css"
    />
    <script src="https://cdn.jsdelivr.net/npm/gridstack@2.0.2/dist/gridstack.all.js"></script>
  </head>
  <body>
    <main id="app">
      <h1>How to integrate GridStack.js with Vue.js</h1>
      <p>
        As with any virtualDOM-based framework, you need to check if Vue has
        rendered the DOM (or any updates to it) <strong>before</strong> you
        initialize GridStack or call its methods. As a basic example, check this
        component's <code>mounted</code> hook.
      </p>
      <p>
        If your app requires more complex render logic than the inline template
        in `addWidget`, consider
        <a
          href="https://github.com/gridstack/gridstack.js/tree/develop/doc#makewidgetel"
          >makeWidget</a
        >
        to let Vue deal with DOM rendering.
      </p>
      <button type="button" @click="addNewWidget()">Add Widget</button> {{ info
      }}
      <div class="grid-stack grid-stack-6"></div>
    </main>
    <script type="module">
      import { createApp } from "https://cdn.jsdelivr.net/npm/vue@3.0.0/dist/vue.esm-browser.js";

      createApp({
        data() {
          return {
            count: 0,
            info: "",
          };
        },
        items: [
          { x: 2, y: 1, width: 1, height: 2 },
          { x: 2, y: 4, width: 3, height: 1 },
          { x: 4, y: 2, width: 1, height: 1 },
          { x: 3, y: 1, width: 1, height: 2 },
          { x: 0, y: 6, width: 2, height: 2 },
        ],
        watch: {
          /**
           * Clear the info text after a two second timeout. Clears previous timeout first.
           */
          info: function (newVal, oldVal) {
            if (newVal.length === 0) return;

            window.clearTimeout(this.timerId);
            this.timerId = window.setTimeout(() => {
              this.info = "";
            }, 2000);
          },
        },
        mounted: function () {
          // Provides access to the GridStack instance across the Vue component.
          this.grid = GridStack.init({
            column: 6,
            float: true,
            cellHeight: "70px",
            minRow: 1,
          });

          // Use an arrow function so that `this` is bound to the Vue instance. Alternatively, use a custom Vue directive on the `.grid-stack` container element: https://vuejs.org/v2/guide/custom-directive.html
          this.grid.on("dragstop", (event, element) => {
            const node = element.gridstackNode;
            // `this` will only access your Vue instance if you used an arrow function, otherwise `this` binds to window scope. see https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/
            this.info = `you just dragged node #${node.id} to ${node.x},${node.y} – good job!`;
          });
        },
        methods: {
          addNewWidget: function () {
            const node = this.$options.items[this.count] || {
              x: Math.round(12 * Math.random()),
              y: Math.round(5 * Math.random()),
              width: Math.round(1 + 3 * Math.random()),
              height: Math.round(1 + 3 * Math.random()),
            };
            this.count++;
            this.grid.addWidget(
              `<div><div class="grid-stack-item-content">${this.count}</div></div>`,
              { id: this.count, ...node }
            );
          },
        },
      }).mount("#app");
    </script>
  </body>
</html>

adumesny commented 3 years ago

I modified my local copy of vue3.html to have those 3 changes (like you have above and as documented) and 6 columns works just fine in v3.1.0. So not sure I understand your issue

@import "../dist/gridstack-extra.css";
...
<section class="grid-stack grid-stack-6"></section>
...
this.grid = GridStack.init({ column: 6, float: true, cellHeight: '70px', minRow: 1 });

closing unless you can show still being an issue.

gridstack / gridstack.js