Skip to content

Commit a6d2f62

Browse files
xiaoluobodingxiaoluoboding
authored
Merge pull request #22 from xiaoluoboding/dev
Dev
2 parents 263968e + 8473571 commit a6d2f62

27 files changed

+21523
-14884
lines changed

‎.browserslistrc‎

Lines changed: 0 additions & 2 deletions
This file was deleted.

‎README.md‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -117,16 +117,28 @@ new Vue({
117117
| fixedHeight | determine whether widget body's height is fixed, only support `smart-widget` | Boolean | `true` or `false` | `false` |
118118
| shadow | when to show card shadows | String | `always`、`hover`、`never` | `always` |
119119
| translateY | the length of vertically transform | Number | - | 0 |
120+
| isActived | determine whether widget is actived | Boolean | `true` or `false` | `false` |
121+
| activedColor | the length of vertically transform | String | hex color | #0076db |
120122
121123
## SmartWidget Methods
122124
123125
| Name | Description | Parameters |
124126
|:--------:|--------|:--------|
125-
| on-refresh | Used when the widget need fetching data from ajax methods, usually used with `loading` attribute | - |
126127
| move | Every time an item is being moved and changes position | `(i, newX, newY)` |
127128
| moved | Every time an item is finished being moved and changes position | `(i, newX, newY)` |
128129
| resize | Every time an item is being resized and changes size | `(i, newH, newW, newHPx, newWPx)` |
129130
| resized | Every time an item is finished being moved and changes position | `(i, newH, newW, newHPx, newWPx)` |
131+
| container-resized | Every time the grid item/layout container changes size (browser window or other) | `(i, newH, newW, newHPx, newWPx)` |
132+
| on-refresh | Used when the widget need fetching data from ajax methods, usually used with `loading` attribute | - |
133+
| before-fullscreen | Used when the widget before fullscreen, usually used with `fullscreen` attribute | `true` or `false` |
134+
| on-fullscreen | Used when the widget is already fullscreen, usually used with `fullscreen` attribute | `true` or `false` |
135+
136+
## CSS Selector in SmartWidget
137+
138+
| Name | Description |
139+
|:--------:|--------|
140+
| `.smartwidget` | The main selector in SmartWidget |
141+
| `.is-actived` | The state of widget is actived |
130142
131143
## SmartWidgetGrid Props
132144
@@ -140,6 +152,7 @@ new Vue({
140152
| margin | Says what are the margins of elements inside the grid. | Array | - | `[10, 10]` |
141153
| isDraggable | Says if the grids items are draggable. | Boolean | `true` or `false` | `true` |
142154
| isResizable | Says if the grids items are resizable. | Boolean | `true` or `false` | `true` |
155+
| static | control all widgets won't be draggable, resizable or moved | Boolean | `true` or `false` | `false` |
143156

144157
## Slot scopes
145158

@@ -153,6 +166,10 @@ new Vue({
153166

154167
| Name | Description | Parameters |
155168
|:--------|:--------|:--------:|
169+
| layout-created | Emited on the component created lifecycle hook | `newLayout` |
170+
| layout-before-mount | Emited on the component beforeMount lifecycle hook | `newLayout` |
171+
| layout-mounted | Emited on the component mounted lifecycle hook | `newLayout` |
172+
| layout-ready | Emited when all the operations on the mount hook finish | `newLayout` |
156173
| layout-updated | Every time the layout has finished updating and positions of all grid-items are recalculated | `newLayout` |
157174

158175
## License

‎app/assets/img/codesandbox.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎app/constant/template.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ const defaultWidget = `<smart-widget title="Widget Title">
99
</smart-widget>
1010
`
1111

12-
const advanedWidget = `// 1. With additional fullscreen button
12+
const advanedWidget = `<!-- // 1. With additional fullscreen button -->
1313
<smart-widget title="With additional fullscreen button" fullscreen>
1414
<p>
1515
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
@@ -18,7 +18,7 @@ const advanedWidget = `// 1. With additional fullscreen button
1818
</p>
1919
</smart-widget>
2020
21-
// 2. Widget with Editbox & Footer
21+
<!-- 2. Widget with Editbox & Footer -->
2222
<smart-widget title="Widget with Editbox & Footer">
2323
<template slot="editbox">
2424
<div class="widget-alert">
@@ -37,7 +37,7 @@ const advanedWidget = `// 1. With additional fullscreen button
3737
</template>
3838
</smart-widget>
3939
40-
// 3. Widget with custom toolbar
40+
<!-- 3. Widget with custom toolbar -->
4141
<smart-widget title="Widget with custom toolbar">
4242
<template slot="toolbar">
4343
<div style="margin: 0 12px;">

‎app/views/WidgetOnly.vue‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,11 @@
1010
</smart-widget>
1111
</el-col>
1212
<el-col :span="8">
13-
<smart-widget title="Default Widget" shadow="hover" :translateY="10">
13+
<smart-widget
14+
title="Default Widget"
15+
shadow="hover"
16+
:translate-y="10"
17+
>
1418
<p>
1519
{{placeholder}}
1620
</p>
@@ -31,6 +35,8 @@
3135
fullscreen
3236
collapse
3337
refresh
38+
is-actived
39+
actived-color="#f4a"
3440
:loading="loading"
3541
@on-refresh="handleRefresh"
3642
@on-fullscreen="handleFullscreen">

‎app/views/WidgetWithGrid.vue‎

Lines changed: 97 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
11
<template>
2-
<smart-widget-grid :layout="layout" :row-height="48" :margin="[15, 15]" @layout-updated="handleLayoutUpdated">
2+
<smart-widget-grid
3+
:layout="layout"
4+
:row-height="48"
5+
:margin="[15, 15]"
6+
:is-static="isStatic"
7+
@layout-updated="onLayoutUpdated"
8+
@move="onMove"
9+
@container-resized="onContainerResized">
310
<smart-widget slot="0" simple>
411
<div class="layout-center">
512
<h3>Simple Widget Without Header</h3>
@@ -38,7 +45,27 @@
3845
</template>
3946
<p>Widget with Footer</p>
4047
</smart-widget>
41-
<smart-widget slot="6" title="Widget body content's height is fixed" fixed-height>
48+
<smart-widget slot="6" title="2017 Hotest Frontend Project"
49+
fullscreen
50+
refresh
51+
is-actived
52+
:loading="loading"
53+
@before-fullscreen="val => isStatic = val"
54+
@on-refresh="handleRefresh">
55+
<template v-slot="{contentH}">
56+
<ve-bar-chart :data="barData" :height="contentH" />
57+
</template>
58+
</smart-widget>
59+
<smart-widget slot="7" title="Diffrent Platforms PV" fullscreen collapse>
60+
<template v-slot="{contentH}">
61+
<ve-donut-chart
62+
:data="donutData"
63+
:settings="donutSetting"
64+
:height="contentH"
65+
/>
66+
</template>
67+
</smart-widget>
68+
<smart-widget slot="8" title="Widget body content's height is fixed" fixed-height>
4269
<el-table
4370
:data="tableData"
4471
style="width: 100%">
@@ -58,15 +85,13 @@
5885
</el-table-column>
5986
</el-table>
6087
</smart-widget>
61-
<smart-widget slot="7" title="Widget with custom toolbar">
88+
<smart-widget slot="9" title="Widget with custom toolbar">
6289
<template slot="toolbar">
6390
<div style="margin: 0 12px;">
6491
<el-button type="success" size="mini" @click="$router.push('/widget-only')">Index</el-button>
6592
</div>
6693
</template>
67-
<el-table
68-
:data="tableData"
69-
style="width: 100%">
94+
<el-table style="width: 100%" :data="tableData">
7095
<el-table-column
7196
prop="date"
7297
label="日期"
@@ -83,16 +108,6 @@
83108
</el-table-column>
84109
</el-table>
85110
</smart-widget>
86-
<smart-widget slot="8" title="2017 Hotest Frontend Project"
87-
fullscreen
88-
:loading="loading"
89-
refresh
90-
@on-refresh="handleRefresh">
91-
<ve-bar-chart :data="barData" :height="contentH" slot-scope="{contentH}" />
92-
</smart-widget>
93-
<smart-widget slot="9" title="Diffrent Platforms PV" fullscreen collapse>
94-
<ve-donut-chart :data="donutData" :settings="donutSetting" :height="contentH" slot-scope="{contentH}" />
95-
</smart-widget>
96111
</smart-widget-grid>
97112
</template>
98113

@@ -101,34 +116,21 @@ export default {
101116
data () {
102117
return {
103118
loading: false,
119+
isStatic: false,
104120
layout: [
105-
{ x: 0, y: 0, w: 2, h: 3, i: '0' },
106-
{ x: 2, y: 0, w: 2, h: 3, i: '1' },
107-
{ x: 4, y: 0, w: 2, h: 3, i: '2' },
108-
{ x: 6, y: 0, w: 2, h: 3, i: '3' },
109-
{ x: 8, y: 0, w: 2, h: 3, i: '4' },
110-
{ x: 10, y: 0, w: 2, h: 3, i: '5' },
111-
{ x: 0, y: 9, w: 6, h: 5, i: '6' },
112-
{ x: 6, y: 9, w: 6, h: 5, i: '7' },
113-
{ x: 0, y: 3, w: 8, h: 6, i: '8' },
114-
{ x: 8, y: 3, w: 4, h: 6, i: '9' }
121+
{ x: 0, y: 0, w: 4, h: 3, i: '0' },
122+
{ x: 4, y: 0, w: 4, h: 3, i: '1' },
123+
{ x: 8, y: 0, w: 4, h: 3, i: '2' },
124+
{ x: 0, y: 3, w: 4, h: 3, i: '3' },
125+
{ x: 4, y: 3, w: 4, h: 3, i: '4' },
126+
{ x: 8, y: 3, w: 4, h: 3, i: '5' },
127+
{ x: 0, y: 6, w: 8, h: 6, i: '6' },
128+
{ x: 8, y: 6, w: 4, h: 6, i: '7' },
129+
{ x: 0, y: 12, w: 6, h: 5, i: '8' },
130+
{ x: 6, y: 12, w: 6, h: 5, i: '9' }
115131
]
116132
}
117133
},
118-
methods: {
119-
handleRefresh () {
120-
this.loading = true
121-
setTimeout(() => {
122-
this.loading = false
123-
}, 2000)
124-
},
125-
handleLayoutUpdated (newLayout) {
126-
console.log(JSON.stringify(newLayout))
127-
},
128-
handleMove (params) {
129-
console.log(params)
130-
}
131-
},
132134
created () {
133135
this.barData = {
134136
dimensions: {
@@ -159,38 +161,60 @@ export default {
159161
data: [40000, 27800, 22000, 20200, 13600]
160162
}]
161163
}
162-
this.tableData = [{
163-
date: '2016-05-03',
164-
name: '王小虎',
165-
address: '上海市普陀区金沙江路 1518 弄'
166-
}, {
167-
date: '2016-05-02',
168-
name: '王小虎',
169-
address: '上海市普陀区金沙江路 1518 弄'
170-
}, {
171-
date: '2016-05-04',
172-
name: '王小虎',
173-
address: '上海市普陀区金沙江路 1518 弄'
174-
}, {
175-
date: '2016-05-01',
176-
name: '王小虎',
177-
address: '上海市普陀区金沙江路 1518 弄'
178-
}, {
179-
date: '2016-05-08',
180-
name: '王小虎',
181-
address: '上海市普陀区金沙江路 1518 弄'
182-
}, {
183-
date: '2016-05-06',
184-
name: '王小虎',
185-
address: '上海市普陀区金沙江路 1518 弄'
186-
}, {
187-
date: '2016-05-07',
188-
name: '王小虎',
189-
address: '上海市普陀区金沙江路 1518 弄'
190-
}]
164+
this.tableData = [
165+
{
166+
date: '2016-05-03',
167+
name: '王小虎',
168+
address: '上海市普陀区金沙江路 1518 弄'
169+
}, {
170+
date: '2016-05-02',
171+
name: '王小虎',
172+
address: '上海市普陀区金沙江路 1518 弄'
173+
}, {
174+
date: '2016-05-04',
175+
name: '王小虎',
176+
address: '上海市普陀区金沙江路 1518 弄'
177+
}, {
178+
date: '2016-05-01',
179+
name: '王小虎',
180+
address: '上海市普陀区金沙江路 1518 弄'
181+
}, {
182+
date: '2016-05-08',
183+
name: '王小虎',
184+
address: '上海市普陀区金沙江路 1518 弄'
185+
}, {
186+
date: '2016-05-06',
187+
name: '王小虎',
188+
address: '上海市普陀区金沙江路 1518 弄'
189+
}, {
190+
date: '2016-05-07',
191+
name: '王小虎',
192+
address: '上海市普陀区金沙江路 1518 弄'
193+
}
194+
]
191195
this.donutSetting = {
192196
offsetY: '60%'
193197
}
198+
},
199+
methods: {
200+
handleRefresh () {
201+
this.loading = true
202+
setTimeout(() => {
203+
this.loading = false
204+
}, 2000)
205+
},
206+
onLayoutUpdated (newLayout) {
207+
console.log(JSON.stringify(newLayout))
208+
},
209+
onMove (params) {
210+
console.log(params)
211+
},
212+
onResize (params) {
213+
console.log(params)
214+
},
215+
onContainerResized (params) {
216+
console.log(params)
217+
}
194218
}
195219
}
196220
</script>
@@ -202,6 +226,9 @@ export default {
202226
border-top: 1px solid #ebeef1;
203227
}
204228
.layout-center {
205-
text-align: center;
229+
display: flex;
230+
justify-content: center;
231+
align-items: center;
232+
height: 100%;
206233
}
207234
</style>

0 commit comments

Comments
 (0)