+97
-59
lines changedFilter options
+97
-59
lines changed Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
1 1
<template>
2 2
<div>
3 -
<md-table v-model="people" md-card>
3 +
<md-table v-model="people" md-card @md-selected="onSelect">
4 4
<md-table-toolbar>
5 5
<h1 class="md-title">Selection Colors</h1>
6 6
</md-table-toolbar>
7 7 8 -
<md-table-row slot="md-table-row" slot-scope="{ item }" :class="getClass(item)" md-selectable="single" @md-selected="onSelect">
8 +
<md-table-row slot="md-table-row" slot-scope="{ item }" :class="getClass(item)" md-selectable="single">
9 9
<md-table-cell md-label="ID" md-sort-by="id" md-numeric>{{ item.id }}</md-table-cell>
10 10
<md-table-cell md-label="Name" md-sort-by="name">{{ item.name }}</md-table-cell>
11 11
<md-table-cell md-label="Email" md-sort-by="email">{{ item.email }}</md-table-cell>
@@ -27,7 +27,8 @@
27 27
v-for="(item, index) in value"
28 28
:key="getRowId(item[mdModelId])"
29 29
:md-id="getRowId(item[mdModelId])"
30 -
:md-index="index">
30 +
:md-index="index"
31 +
:md-item="item">
31 32
<slot name="md-table-row" :item="item" />
32 33
</md-table-row-ghost>
33 34
</tbody>
@@ -69,7 +70,7 @@
69 70 70 71
return value
71 72
}
72 - 73 + 73 74
export default {
74 75
name: 'MdTable',
75 76
components: {
@@ -119,6 +120,9 @@
119 120
return aAttr.localeCompare(bAttr)
120 121
})
121 122
}
123 +
},
124 +
mdSelectedValue: {
125 +
type: [Array, Object]
122 126
}
123 127
},
124 128
data () {
@@ -130,8 +134,8 @@
130 134
sort: null,
131 135
sortOrder: null,
132 136
singleSelection: null,
133 -
selectedItems: {},
134 -
selectable: {},
137 +
selectedItems: [],
138 +
selectable: [],
135 139
fixedHeader: null,
136 140
contentPadding: null,
137 141
contentEl: null,
@@ -142,7 +146,8 @@
142 146
sortTable: this.sortTable,
143 147
manageItemSelection: this.manageItemSelection,
144 148
getModel: this.getModel,
145 -
getModelItem: this.getModelItem
149 +
getModelItem: this.getModelItem,
150 +
selectingMode: null
146 151
}
147 152
}
148 153
},
@@ -158,7 +163,7 @@
158 163
return Object.keys(this.MdTable.items).length
159 164
},
160 165
selectedCount () {
161 -
return Object.keys(this.MdTable.selectedItems).length
166 +
return this.MdTable.selectedItems.length
162 167
},
163 168
headerStyles () {
164 169
if (this.mdFixedHeader) {
@@ -213,6 +218,15 @@
213 218
handler () {
214 219
this.MdTable.hasValue = this.hasValue
215 220
}
221 +
},
222 +
'MdTable.selectedItems' (val) {
223 +
this.select(val)
224 +
},
225 +
'MdTable.singleSelection' (val) {
226 +
this.select(val)
227 +
},
228 +
mdSelectedValue () {
229 +
this.syncSelectedValue()
216 230
}
217 231
},
218 232
methods: {
@@ -251,24 +265,38 @@
251 265
getModelItem (index) {
252 266
return this.value[index]
253 267
},
254 -
manageItemSelection (index) {
255 -
if (this.MdTable.selectedItems[index]) {
256 -
this.$delete(this.MdTable.selectedItems, index)
268 +
manageItemSelection (item) {
269 +
if (this.MdTable.selectedItems.includes(item)) {
270 +
this.MdTable.selectedItems = this.MdTable.selectedItems.filter(target => target !== item)
257 271
} else {
258 -
this.$set(this.MdTable.selectedItems, index, this.value[index])
272 +
this.MdTable.selectedItems.push(item)
259 273
}
260 - 261 -
this.sendSelectionEvent()
262 -
},
263 -
sendSelectionEvent () {
264 -
this.$emit('md-selected', Object.values(this.MdTable.selectedItems))
265 274
},
266 275
sortTable () {
267 276
if (Array.isArray(this.value)) {
268 277
this.$emit('input', this.mdSortFn(this.value))
269 278
}
279 +
},
280 +
select (val) {
281 +
this.$emit('update:mdSelectedValue', val)
282 +
this.$emit('md-selected', val)
283 +
},
284 +
syncSelectedValue () {
285 +
switch (this.MdTable.selectingMode) {
286 +
case 'single':
287 +
this.MdTable.singleSelection = this.mdSelectedValue
288 +
break
289 +
case 'multiple':
290 +
this.MdTable.selectedItems = this.mdSelectedValue || []
291 +
break
292 +
}
270 293
}
271 294
},
295 +
async created () {
296 +
// wait for `selectingMode` from `TableRow`
297 +
await this.$nextTick()
298 +
this.syncSelectedValue()
299 +
},
272 300
mounted () {
273 301
this.setContentEl()
274 302
@@ -1,7 +1,7 @@
1 1
<template>
2 2
<md-table-head class="md-table-cell-selection" v-if="selectableCount">
3 3
<div class="md-table-cell-container">
4 -
<md-checkbox v-model="allSelected" :disabled="isDisabled" @change="onChange" />
4 +
<md-checkbox :model="allSelected" :disabled="isDisabled" @change="onChange" />
5 5
</div>
6 6
</md-table-head>
7 7
</template>
@@ -15,9 +15,6 @@
15 15
MdTableHead
16 16
},
17 17
inject: ['MdTable'],
18 -
data: () => ({
19 -
allSelected: false
20 -
}),
21 18
computed: {
22 19
selectableCount () {
23 20
return Object.keys(this.selectable).length
@@ -30,28 +27,22 @@
30 27
},
31 28
selectedItems () {
32 29
return this.MdTable.selectedItems
33 -
}
34 -
},
35 -
watch: {
36 -
selectedItems: {
37 -
immediate: true,
38 -
deep: true,
39 -
handler (items) {
40 -
window.setTimeout(() => {
41 -
const countSelected = Object.keys(items).length
42 - 43 -
if (this.selectableCount > 0 && countSelected > 0) {
44 -
this.allSelected = countSelected === this.selectableCount
45 -
}
46 -
}, 10)
30 +
},
31 +
allSelected () {
32 +
if (this.selectableCount === 0) {
33 +
return false
47 34
}
35 + 36 +
return this.selectable.every(item => this.selectedItems.includes(item))
48 37
}
49 38
},
50 39
methods: {
51 -
onChange () {
52 -
Object.values(this.MdTable.selectable).forEach(callback => {
53 -
callback(this.allSelected)
54 -
})
40 +
onChange (val) {
41 +
if (val) {
42 +
this.MdTable.selectedItems = this.selectedItems.concat(this.selectable.filter(item => !this.selectedItems.includes(item)))
43 +
} else {
44 +
this.MdTable.selectedItems = this.selectedItems.filter(item => !this.selectable.includes(item))
45 +
}
55 46
}
56 47
}
57 48
}
@@ -27,7 +27,8 @@
27 27
...MdPropValidator('md-selectable', ['multiple', 'single'])
28 28
},
29 29
mdDisabled: Boolean,
30 -
mdAutoSelect: Boolean
30 +
mdAutoSelect: Boolean,
31 +
mdItem: Object
31 32
},
32 33
inject: ['MdTable'],
33 34
data: () => ({
@@ -39,7 +40,7 @@
39 40
return Object.keys(this.MdTable.selectable).length
40 41
},
41 42
isSingleSelected () {
42 -
return this.MdTable.singleSelection === this.mdId
43 +
return this.MdTable.singleSelection === this.mdItem
43 44
},
44 45
hasMultipleSelection () {
45 46
return this.MdTable.hasValue && this.mdSelectable === 'multiple'
@@ -55,6 +56,9 @@
55 56
'md-selected-single': this.isSingleSelected
56 57
}
57 58
}
59 +
},
60 +
isInSelectedItems () {
61 +
return this.MdTable.selectedItems.includes(this.mdItem)
58 62
}
59 63
},
60 64
watch: {
@@ -65,12 +69,20 @@
65 69
this.addSelectableItem()
66 70
}
67 71
},
68 -
mdId (newId, oldId) {
69 -
this.removeSelectableItem(oldId)
70 -
this.addSelectableItem(newId)
72 +
isSelected (val) {
73 +
let noChange = (val && this.isInSelectedItems) || (!val && !this.isInSelectedItems)
74 + 75 +
if (noChange) {
76 +
return false
77 +
}
78 + 79 +
this.MdTable.manageItemSelection(this.mdItem)
80 +
},
81 +
isInSelectedItems (val) {
82 +
this.isSelected = val
71 83
},
72 -
isSelected () {
73 -
this.MdTable.manageItemSelection(this.mdIndex)
84 +
mdSelectable () {
85 +
this.MdTable.selectingMode = this.mdSelectable
74 86
}
75 87
},
76 88
methods: {
@@ -87,34 +99,39 @@
87 99
this.isSelected = !this.isSelected
88 100
},
89 101
selectRowIfSingle () {
90 -
if (this.MdTable.singleSelection === this.mdId) {
102 +
if (this.MdTable.singleSelection === this.mdItem) {
91 103
this.MdTable.singleSelection = null
92 -
this.$emit('md-selected', null)
93 104
} else {
94 -
this.MdTable.singleSelection = this.mdId
95 -
this.$emit('md-selected', this.MdTable.getModelItem(this.mdIndex))
105 +
this.MdTable.singleSelection = this.mdItem
96 106
}
97 107
},
98 108
selectRowIfMultiple () {
99 109
if (this.mdAutoSelect) {
100 110
this.toggleSelection()
101 111
}
102 112
},
103 -
addSelectableItem (id) {
104 -
if (this.hasMultipleSelection && !this.mdDisabled) {
105 -
this.$set(this.MdTable.selectable, id || this.mdId, isSelected => {
106 -
this.isSelected = isSelected
107 -
})
113 +
addSelectableItem () {
114 +
if (!this.hasMultipleSelection || this.mdDisabled) {
115 +
return
108 116
}
117 + 118 +
if (this.MdTable.selectable.includes(this.mdItem)) {
119 +
return
120 +
}
121 + 122 +
this.MdTable.selectable.push(this.mdItem)
109 123
},
110 -
removeSelectableItem (id) {
111 -
if (this.hasMultipleSelection) {
112 -
this.$delete(this.MdTable.selectable, id || this.mdId)
124 +
removeSelectableItem () {
125 +
if (!this.hasMultipleSelection) {
126 +
return
113 127
}
128 + 129 +
this.MdTable.selectable = this.MdTable.selectable.filter(item => item !== this.mdItem)
114 130
}
115 131
},
116 132
created () {
117 133
this.addSelectableItem()
134 +
this.MdTable.selectingMode = this.mdSelectable
118 135
},
119 136
beforeDestroy () {
120 137
this.removeSelectableItem()
@@ -4,11 +4,13 @@
4 4
abstract: true,
5 5
props: {
6 6
mdIndex: [String, Number],
7 -
mdId: [String, Number]
7 +
mdId: [String, Number],
8 +
mdItem: Object
8 9
},
9 10
render () {
10 11
this.$slots.default[0].componentOptions.propsData.mdIndex = this.mdIndex
11 12
this.$slots.default[0].componentOptions.propsData.mdId = this.mdId
13 +
this.$slots.default[0].componentOptions.propsData.mdItem = this.mdItem
12 14 13 15
return this.$slots.default[0]
14 16
}
You can’t perform that action at this time.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4