feat: add new properties & events on smart-widget-grid

app/views/WidgetWithGrid.vue

@@ -4,7 +4,9 @@
     :row-height="48"
     :margin="[15, 15]"
     :is-static="isStatic"
-    @layout-updated="onLayoutUpdated">
+    @layout-updated="onLayoutUpdated"
+    @move="onMove"
+  >
     <smart-widget slot="0" simple>
       <div class="layout-center">
         <h3>Simple Widget Without Header</h3>

src/packages/SmartWidget.vue

@@ -172,13 +172,13 @@ export default {
     },
     widgetHeaderHeight () {
       return {
-        'height': `${this.rowHeight}px`,
+        height: `${this.rowHeight}px`,
         'line-height': `${this.rowHeight}px`
       }
     },
     widgetBodyStyle () {
       return {
-        'height': `calc(100% - ${this.rowHeight}px)`
+        height: `calc(100% - ${this.rowHeight}px)`
       }
     },
     widgetBodyContentStyle () {
@@ -284,14 +284,14 @@ export default {
       const smartWidgetStyle = this.smartWidgetStyle
       this.smartWidgetStyle = {
         ...smartWidgetStyle,
-        'transform': `translateY(${-this.translateY}px)`
+        transform: `translateY(${-this.translateY}px)`
       }
     },
     handleMouseout () {
       const smartWidgetStyle = this.smartWidgetStyle
       this.smartWidgetStyle = {
         ...smartWidgetStyle,
-        'transform': `translateY(0px)`
+        transform: 'translateY(0px)'
       }
     }
   }
@@ -300,6 +300,9 @@ export default {
 
 <style lang="less">
 // overwirte vue-grid-layout styles
+.vue-grid-item {
+  touch-action: none;
+}
 .vue-grid-item.vue-grid-placeholder {
   background: #7CBEFF;
   opacity: .2;

src/packages/SmartWidgetGrid.vue

@@ -10,11 +10,7 @@
       :key="item.i"
       :static="isStatic"
       v-bind="item"
-      @move="moveEvent"
-      @resize="resizeEvent"
-      @moved="movedEvent"
-      @resized="resizedEvent"
-      @container-resized="containerResizedEvent"
+      v-on="gridLayoutItemEvents"
     >
       <slot :name="item.i"></slot>
     </grid-item>
@@ -23,6 +19,7 @@
 
 <script>
 import { GridLayout, GridItem } from 'vue-grid-layout'
+import { pick } from '../utils/index'
 
 export default {
   name: 'SmartWidgetGrid',
@@ -78,57 +75,53 @@ export default {
         margin: this.margin,
         isDraggable: this.draggable,
         isResizable: this.resizable,
-        isMirrored: false,
-        autoSize: true,
-        verticalCompact: true,
         useCssTransforms: false,
-        responsive: false
+        // isMirrored: false,
+        // autoSize: true,
+        // verticalCompact: true,
+        // responsive: false,
+        // preventCollision: false,
+        // responsiveLayouts: {},
+        // breakpoints: { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 },
+        ...this.$attrs
       }
     }
   },
   created () {
     const listeners = this.$listeners
+    this.gridLayoutItemEvents = {}
 
     const layoutEventList = [
       'layout-created',
       'layout-before-mount',
       'layout-mounted',
       'layout-ready',
-      'layout-updated'
+      'layout-updated',
+      'breakpoint-changed'
     ]
 
-    this.gridLayoutEvents = this.pick(listeners, layoutEventList)
-  },
-  methods: {
-    // Picks the key-value pairs corresponding to the given keys from an object.
-    pick (obj, arr) {
-      return arr.reduce((acc, curr) => {
-        return (curr in obj && (acc[curr] = obj[curr]), acc)
-      }, {})
-    },
-    moveEvent (i, newX, newY) {
-      this.$emit('move', { i, newX, newY })
-    },
-    resizeEvent (i, newH, newW, newHPx, newWPx) {
-      this.$emit('resize', { i, newH, newW, newHPx, newWPx })
-    },
-    movedEvent (i, newX, newY) {
-      this.$emit('moved', { i, newX, newY })
-    },
-    resizedEvent (i, newH, newW, newHPx, newWPx) {
-      this.$emit('resized', { i, newH, newW, newHPx, newWPx })
-    },
-    containerResizedEvent (i, newH, newW, newHPx, newWPx) {
-      this.$emit('container-resized', { i, newH, newW, newHPx, newWPx })
-    }
+    const layoutItemEventList = [
+      'move',
+      'resize',
+      'moved',
+      'resized',
+      'container-resized'
+    ]
+
+    this.gridLayoutEvents = pick(listeners, layoutEventList)
+
+    layoutItemEventList.forEach(item => {
+      this.gridLayoutItemEvents = Object.assign(this.gridLayoutItemEvents, {
+        [item]: (...args) => this.$emit(item, { ...args })
+      })
+    })
   }
 }
 </script>
 
 <style lang="less">
 .vue-grid-layout {
   background: transparent;
-  // .vue-grid-item {}
   .smartwidget {
     height: inherit;
     width: inherit;

src/utils/index.js

@@ -0,0 +1,6 @@
+// Picks the key-value pairs corresponding to the given keys from an object.
+export const pick = (obj, arr) => {
+  return arr.reduce((acc, curr) => {
+    return (curr in obj && (acc[curr] = obj[curr]), acc)
+  }, {})
+}