Skip to content

Commit

Permalink
feat: add static property on smart-widget-grid
Browse files Browse the repository at this point in the history
xiaoluoboding committed Nov 25, 2019
1 parent 24edb1c commit 6e12f5d
Showing 4 changed files with 17 additions and 12 deletions.
5 changes: 4 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -124,12 +124,14 @@ new Vue({
| Name | Description | Parameters |
|:--------:|--------|:--------|
| on-refresh | Used when the widget need fetching data from ajax methods, usually used with `loading` attribute | - |
| move | Every time an item is being moved and changes position | `(i, newX, newY)` |
| moved | Every time an item is finished being moved and changes position | `(i, newX, newY)` |
| resize | Every time an item is being resized and changes size | `(i, newH, newW, newHPx, newWPx)` |
| resized | Every time an item is finished being moved and changes position | `(i, newH, newW, newHPx, newWPx)` |
| container-resized | Every time the grid item/layout container changes size (browser window or other) | `(i, newH, newW, newHPx, newWPx)` |
| on-refresh | Used when the widget need fetching data from ajax methods, usually used with `loading` attribute | - |
| before-fullscreen | Used when the widget before fullscreen, usually used with `fullscreen` attribute | `true` or `false` |
| on-fullscreen | Used when the widget is already fullscreen, usually used with `fullscreen` attribute | `true` or `false` |
## CSS Selector in SmartWidget
@@ -150,6 +152,7 @@ new Vue({
| margin | Says what are the margins of elements inside the grid. | Array | - | `[10, 10]` |
| isDraggable | Says if the grids items are draggable. | Boolean | `true` or `false` | `true` |
| isResizable | Says if the grids items are resizable. | Boolean | `true` or `false` | `true` |
| static | control all widgets won't be draggable, resizable or moved | Boolean | `true` or `false` | `false` |

## Slot scopes

3 changes: 3 additions & 0 deletions app/views/WidgetWithGrid.vue
Original file line number Diff line number Diff line change
@@ -3,6 +3,7 @@
:layout="layout"
:row-height="48"
:margin="[15, 15]"
:is-static="isStatic"
@layout-updated="onLayoutUpdated"
@move="onMove"
@container-resized="onContainerResized">
@@ -49,6 +50,7 @@
refresh
is-actived
:loading="loading"
@before-fullscreen="val => isStatic = val"
@on-refresh="handleRefresh">
<template v-slot="{contentH}">
<ve-bar-chart :data="barData" :height="contentH" />
@@ -114,6 +116,7 @@ export default {
data () {
return {
loading: false,
isStatic: false,
layout: [
{ x: 0, y: 0, w: 4, h: 3, i: '0' },
{ x: 4, y: 0, w: 4, h: 3, i: '1' },
5 changes: 2 additions & 3 deletions src/packages/SmartWidget.vue
Original file line number Diff line number Diff line change
@@ -191,16 +191,15 @@ export default {
}
this.isFullScreen = !this.isFullScreen
// grid-layout useCssTransforms
// widget before fullscreen, change the widget to static, so it won't be draggable, resizable or moved
if (this.isHasGroup) {
this.$parent.useCssTransforms = !this.$parent.useCssTransforms
this.$emit('before-fullscreen', this.isFullScreen)
}
// calculate widge-body height
if (this.isFullScreen) {
this.$nextTick(_ => {
this.widgetBodyOldHeight = this.widgetBodyOffsetHeight
console.log(document.body.offsetHeight)
const widgetBodyOffsetHeight = document.body.offsetHeight - this.rowHeight
this.widgetBodyOffsetHeight = widgetBodyOffsetHeight
})
16 changes: 8 additions & 8 deletions src/packages/SmartWidgetGrid.vue
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
<template>
<grid-layout
:layout.sync="layout"
:use-css-transforms="useCssTransforms"
v-bind="layoutAttribute"
v-bind="layoutAttrs"
v-on="gridLayoutEvents"
>
<grid-item
v-for="item in layout"
drag-ignore-from=".widget-body"
:key="item.i"
:static="isStatic"
v-bind="item"
@move="moveEvent"
@resize="resizeEvent"
@@ -62,16 +62,15 @@ export default {
resizable: {
type: Boolean,
default: true
},
isStatic: {
type: Boolean,
default: false
}
},
data () {
return {
useCssTransforms: false
}
},
computed: {
layoutAttribute () {
return {
layoutAttrs: {
// layout: this.layout,
colNum: this.colNum,
rowHeight: this.rowHeight,
@@ -82,6 +81,7 @@ export default {
isMirrored: false,
autoSize: true,
verticalCompact: true,
useCssTransforms: false,
responsive: false
}
}

0 comments on commit 6e12f5d

Please sign in to comment.