vue3-grid-layout-next - npm Package Compare versions

Comparing version 1.0.2 to 1.0.3

dist/components/Grid/GridLayout.vue.d.ts

@@ -253,3 +253,3 @@ import { Emitter, EventType } from "mitt";
     resizeEvent: (eventName?: EventType, id?: string | number, x?: number, y?: number, h?: number, w?: number) => void;
-    responsiveGridLayout: (id?: string | number) => void;
+    responsiveGridLayout: () => void;
     initResponsiveFeatures: () => void;
@@ -256,0 +256,0 @@ findDifference: (layout: Layout, originalLayout: Layout) => LayoutItem[];

package.json

 {
   "name": "vue3-grid-layout-next",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "type": "module",
@@ -5,0 +5,0 @@ "description": "A draggable and resizable grid layout, as a Vue component.",

readme.md

@@ -17,3 +17,3 @@ # Support By
 
-<h2 align="center">
+<h2>
   <a href="https://jbaysolutions.github.io/vue-grid-layout/" target="_blank">Documentation Website</a>
@@ -32,2 +32,37 @@ </h2>
 
+## beware
+
+### Usage with v-model
+
+```html
+ <GridLayout v-model:layout="layout">
+  ...
+ </GridLayout>
+```
+
+### Use ref object
+
+If the responsive property is true, make sure layout is a ref object
+
+```html
+<script lang="ts" setup> 
+
+  const responsive = ref(true)
+  const layout = ref([])
+  // const layout = reactive([]) // will cause some bug
+
+  // it will work, when responsive is false
+  // const layout = reactive([])
+
+</script>
+
+<template>
+  <div class="layout">
+    <GridLayout v-model:layout="layout" :responsive="responsive" >
+      ...
+    </GridLayout>
+  </div>
+</template>
+```
+
 # example 
@@ -34,0 +69,0 @@

No alert changes

Improved metrics

Total package byte prevSize

369444

0.11%

Lines of code

7162

0.07%

Number of lines in readme file

71

97.22%

No dependency changes