Dev

README.md

@@ -117,16 +117,28 @@ new Vue({
 | fixedHeight | determine whether widget body's height is fixed, only support `smart-widget` | Boolean | `true` or `false` | `false` |
 | shadow | when to show card shadows | String | `always`、`hover`、`never` | `always` |
 | translateY | the length of vertically transform | Number | - | 0 |
+| isActived | determine whether widget is actived | Boolean | `true` or `false` | `false` |
+| activedColor | the length of vertically transform | String | hex color | #0076db |
 
 ## SmartWidget Methods
 
 | 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
+
+| Name | Description |
+|:--------:|--------|
+| `.smartwidget` | The main selector in SmartWidget |
+| `.is-actived` | The state of widget is actived |
 
 ## SmartWidgetGrid Props
 
@@ -140,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
 
@@ -153,6 +166,10 @@ new Vue({
 
 | Name | Description | Parameters |
 |:--------|:--------|:--------:|
+| layout-created | Emited on the component created lifecycle hook | `newLayout` |
+| layout-before-mount | Emited on the component beforeMount lifecycle hook | `newLayout` |
+| layout-mounted | Emited on the component mounted lifecycle hook | `newLayout` |
+| layout-ready | Emited when all the operations on the mount hook finish | `newLayout` |
 | layout-updated | Every time the layout has finished updating and positions of all grid-items are recalculated | `newLayout` |
 
 ## License

app/constant/template.js

@@ -9,7 +9,7 @@ const defaultWidget = `<smart-widget title="Widget Title">
 </smart-widget>
 `
 
-const advanedWidget = `// 1. With additional fullscreen button
+const advanedWidget = `<!-- // 1. With additional fullscreen button -->
 <smart-widget title="With additional fullscreen button" fullscreen>
   <p>
     Lorem ipsum dolor sit amet, consectetur adipisicing elit.
@@ -18,7 +18,7 @@ const advanedWidget = `// 1. With additional fullscreen button
   </p>
 </smart-widget>
 
-// 2. Widget with Editbox & Footer
+<!-- 2. Widget with Editbox & Footer -->
 <smart-widget title="Widget with Editbox & Footer">
   <template slot="editbox">
     <div class="widget-alert">
@@ -37,7 +37,7 @@ const advanedWidget = `// 1. With additional fullscreen button
   </template>
 </smart-widget>
 
-// 3. Widget with custom toolbar
+<!-- 3. Widget with custom toolbar -->
 <smart-widget title="Widget with custom toolbar">
   <template slot="toolbar">
     <div style="margin: 0 12px;">

app/views/WidgetOnly.vue

@@ -10,7 +10,11 @@
         </smart-widget>
       </el-col>
       <el-col :span="8">
-        <smart-widget title="Default Widget" shadow="hover" :translateY="10">
+        <smart-widget
+          title="Default Widget"
+          shadow="hover"
+          :translate-y="10"
+        >
           <p>
             {{placeholder}}
           </p>
@@ -31,6 +35,8 @@
           fullscreen
           collapse
           refresh
+          is-actived
+          actived-color="#f4a"
           :loading="loading"
           @on-refresh="handleRefresh"
           @on-fullscreen="handleFullscreen">

app/views/WidgetWithGrid.vue

@@ -1,5 +1,12 @@
 <template>
-  <smart-widget-grid :layout="layout" :row-height="48" :margin="[15, 15]" @layout-updated="handleLayoutUpdated">
+  <smart-widget-grid
+    :layout="layout"
+    :row-height="48"
+    :margin="[15, 15]"
+    :is-static="isStatic"
+    @layout-updated="onLayoutUpdated"
+    @move="onMove"
+    @container-resized="onContainerResized">
     <smart-widget slot="0" simple>
       <div class="layout-center">
         <h3>Simple Widget Without Header</h3>
@@ -38,7 +45,27 @@
       </template>
       <p>Widget with Footer</p>
     </smart-widget>
-    <smart-widget slot="6" title="Widget body content's height is fixed" fixed-height>
+    <smart-widget slot="6" title="2017 Hotest Frontend Project"
+      fullscreen
+      refresh
+      is-actived
+      :loading="loading"
+      @before-fullscreen="val => isStatic = val"
+      @on-refresh="handleRefresh">
+      <template v-slot="{contentH}">
+        <ve-bar-chart :data="barData" :height="contentH" />
+      </template>
+    </smart-widget>
+    <smart-widget slot="7" title="Diffrent Platforms PV" fullscreen collapse>
+      <template v-slot="{contentH}">
+        <ve-donut-chart
+          :data="donutData"
+          :settings="donutSetting"
+          :height="contentH"
+        />
+      </template>
+    </smart-widget>
+    <smart-widget slot="8" title="Widget body content's height is fixed" fixed-height>
       <el-table
         :data="tableData"
         style="width: 100%">
@@ -58,15 +85,13 @@
         </el-table-column>
       </el-table>
     </smart-widget>
-    <smart-widget slot="7" title="Widget with custom toolbar">
+    <smart-widget slot="9" title="Widget with custom toolbar">
       <template slot="toolbar">
         <div style="margin: 0 12px;">
           <el-button type="success" size="mini" @click="$router.push('/widget-only')">Index</el-button>
         </div>
       </template>
-      <el-table
-        :data="tableData"
-        style="width: 100%">
+      <el-table style="width: 100%" :data="tableData">
         <el-table-column
           prop="date"
           label="日期"
@@ -83,16 +108,6 @@
         </el-table-column>
       </el-table>
     </smart-widget>
-    <smart-widget slot="8" title="2017 Hotest Frontend Project"
-      fullscreen
-      :loading="loading"
-      refresh
-      @on-refresh="handleRefresh">
-      <ve-bar-chart :data="barData" :height="contentH" slot-scope="{contentH}" />
-    </smart-widget>
-    <smart-widget slot="9" title="Diffrent Platforms PV" fullscreen collapse>
-      <ve-donut-chart :data="donutData" :settings="donutSetting" :height="contentH" slot-scope="{contentH}" />
-    </smart-widget>
   </smart-widget-grid>
 </template>
 
@@ -101,34 +116,21 @@ export default {
   data () {
     return {
       loading: false,
+      isStatic: false,
       layout: [
-        { x: 0, y: 0, w: 2, h: 3, i: '0' },
-        { x: 2, y: 0, w: 2, h: 3, i: '1' },
-        { x: 4, y: 0, w: 2, h: 3, i: '2' },
-        { x: 6, y: 0, w: 2, h: 3, i: '3' },
-        { x: 8, y: 0, w: 2, h: 3, i: '4' },
-        { x: 10, y: 0, w: 2, h: 3, i: '5' },
-        { x: 0, y: 9, w: 6, h: 5, i: '6' },
-        { x: 6, y: 9, w: 6, h: 5, i: '7' },
-        { x: 0, y: 3, w: 8, h: 6, i: '8' },
-        { x: 8, y: 3, w: 4, h: 6, i: '9' }
+        { x: 0, y: 0, w: 4, h: 3, i: '0' },
+        { x: 4, y: 0, w: 4, h: 3, i: '1' },
+        { x: 8, y: 0, w: 4, h: 3, i: '2' },
+        { x: 0, y: 3, w: 4, h: 3, i: '3' },
+        { x: 4, y: 3, w: 4, h: 3, i: '4' },
+        { x: 8, y: 3, w: 4, h: 3, i: '5' },
+        { x: 0, y: 6, w: 8, h: 6, i: '6' },
+        { x: 8, y: 6, w: 4, h: 6, i: '7' },
+        { x: 0, y: 12, w: 6, h: 5, i: '8' },
+        { x: 6, y: 12, w: 6, h: 5, i: '9' }
       ]
     }
   },
-  methods: {
-    handleRefresh () {
-      this.loading = true
-      setTimeout(() => {
-        this.loading = false
-      }, 2000)
-    },
-    handleLayoutUpdated (newLayout) {
-      console.log(JSON.stringify(newLayout))
-    },
-    handleMove (params) {
-      console.log(params)
-    }
-  },
   created () {
     this.barData = {
       dimensions: {
@@ -159,38 +161,60 @@ export default {
         data: [40000, 27800, 22000, 20200, 13600]
       }]
     }
-    this.tableData = [{
-      date: '2016-05-03',
-      name: '王小虎',
-      address: '上海市普陀区金沙江路 1518 弄'
-    }, {
-      date: '2016-05-02',
-      name: '王小虎',
-      address: '上海市普陀区金沙江路 1518 弄'
-    }, {
-      date: '2016-05-04',
-      name: '王小虎',
-      address: '上海市普陀区金沙江路 1518 弄'
-    }, {
-      date: '2016-05-01',
-      name: '王小虎',
-      address: '上海市普陀区金沙江路 1518 弄'
-    }, {
-      date: '2016-05-08',
-      name: '王小虎',
-      address: '上海市普陀区金沙江路 1518 弄'
-    }, {
-      date: '2016-05-06',
-      name: '王小虎',
-      address: '上海市普陀区金沙江路 1518 弄'
-    }, {
-      date: '2016-05-07',
-      name: '王小虎',
-      address: '上海市普陀区金沙江路 1518 弄'
-    }]
+    this.tableData = [
+      {
+        date: '2016-05-03',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-02',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-04',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-01',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-08',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-06',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-07',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }
+    ]
     this.donutSetting = {
       offsetY: '60%'
     }
+  },
+  methods: {
+    handleRefresh () {
+      this.loading = true
+      setTimeout(() => {
+        this.loading = false
+      }, 2000)
+    },
+    onLayoutUpdated (newLayout) {
+      console.log(JSON.stringify(newLayout))
+    },
+    onMove (params) {
+      console.log(params)
+    },
+    onResize (params) {
+      console.log(params)
+    },
+    onContainerResized (params) {
+      console.log(params)
+    }
   }
 }
 </script>
@@ -202,6 +226,9 @@ export default {
   border-top: 1px solid #ebeef1;
 }
 .layout-center {
-  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
 }
 </style>