Documentation on Styles needed

[abulka]

TLDR; You need to add extra styles to make this grid component work properly.

Following the @noction/vue-draggable-grid official installation instructions at https://www.npmjs.com/package/@noction/vue-draggable-grid leads to a working app but the styling is not as expected.

Notice there are no boxes around the grid items etc.

The built in styles were incorporated via

...
import App from './App.vue'
import '@noction/vue-draggable-grid/styles'
...

Interestingly, it seems that the "built in" styles from the original jbaysolutions/vue-grid-layout project are similarly minimal.

The need for additional styles

Additional styles are needed to make the app usable. Perhaps this is by design to allow the user to style the app as they see fit. This should be mentioned in some documentation as I thought the app was broken at first.

Here are some styles that might be added to add borders around the grid items etc. which could added to the README.md or other documentation.

.vue-grid-container {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
  }
  
  .vue-grid-layout {
    background: #f0f2f5;
    padding: 20px;
    border-radius: 8px;
  }
  
  .vue-grid-item {
    width: 100%;
    height: 100%;
    background: #ffffff;
    border: 1px solid #e4e9f0;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #1a1a1a;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
  }
  
  .vue-grid-item:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  }
  
  /* Typography */
  .vue-grid-title {
    color: #2c3e50;
    margin-bottom: 1rem;
  }
  
  .vue-grid-description {
    color: #666;
    margin-bottom: 2rem;
  }
  
  .vue-grid-link {
    color: #42b883;
    text-decoration: none;
  }
  
  .vue-grid-link:hover {
    text-decoration: underline;
  }

How to use these extra styles

<script setup lang="ts">
import { ref } from 'vue'
import '@/assets/styles-extra.css' // <--- Add this line

const layout = ref([
  { h: 2, id: 0, w: 2, x: 0, y: 0 },
  { h: 2, id: 1, w: 2, x: 2, y: 0 },
  { h: 2, id: 2, w: 2, x: 4, y: 0 },
  { h: 2, id: 3, w: 2, x: 0, y: 2 },
  { h: 2, id: 4, w: 2, x: 2, y: 2 },
  { h: 2, id: 5, w: 2, x: 4, y: 2 },
  { h: 2, id: 6, w: 2, x: 0, y: 4 },
  { h: 2, id: 7, w: 2, x: 2, y: 4 },
  { h: 2, id: 8, w: 2, x: 4, y: 4 },
  { h: 2, id: 9, w: 2, x: 0, y: 6 },
  { h: 2, id: 10, w: 2, x: 2, y: 6 },
  { h: 2, id: 11, w: 2, x: 4, y: 6 }
])
</script>
...