Skip to content

Commit 6ed3160

Browse files
marcosmouramarcosmoura
committed
Merge remote-tracking branch 'origin/develop' into components/mdDatepicker
* origin/develop: fix mdInput not able to press space key inside mdMenuContent vuematerial#478 (vuematerial#518) add mdChip editable (vuematerial#512) fix mdSpeedDial not closing after few mouse interactions vuematerial#484 (vuematerial#508) add themed chips (vuematerial#498) add watchable sort parameters in md-table (vuematerial#505) send switch state to change event vuematerial#503 (vuematerial#504)
2 parents acf95b5 + d66bc0a commit 6ed3160

File tree

11 files changed

+130
-15
lines changed

11 files changed

+130
-15
lines changed

‎docs/src/pages/components/Chips.vue

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,12 @@
2828
<md-table-cell><code>Boolean</code></md-table-cell>
2929
<md-table-cell>Enable delete button. Default: <code>false</code></md-table-cell>
3030
</md-table-row>
31+
32+
<md-table-row>
33+
<md-table-cell>md-editable</md-table-cell>
34+
<md-table-cell><code>Boolean</code></md-table-cell>
35+
<md-table-cell>Enable click on the chip's content. Default: <code>false</code></md-table-cell>
36+
</md-table-row>
3137
</md-table-body>
3238
</md-table>
3339

@@ -46,6 +52,11 @@
4652
<md-table-cell>None</md-table-cell>
4753
<md-table-cell>Triggered when delete button is clicked.</md-table-cell>
4854
</md-table-row>
55+
<md-table-row>
56+
<md-table-cell>edit</md-table-cell>
57+
<md-table-cell>None</md-table-cell>
58+
<md-table-cell>Triggered when the chip's content is clicked.</md-table-cell>
59+
</md-table-row>
4960
</md-table-body>
5061
</md-table>
5162
</api-table>
@@ -136,12 +147,14 @@
136147
<div slot="demo">
137148
<md-chip>Marcos Moura</md-chip>
138149
<md-chip md-deletable>Luiza Ivanenko</md-chip>
150+
<md-chip md-editable>Alban Mouton</md-chip>
139151
</div>
140152

141153
<div slot="code">
142154
<code-block lang="xml">
143155
&lt;md-chip&gt;Marcos Moura&lt;/md-chip&gt;
144156
&lt;md-chip md-deletable&gt;Luiza Ivanenko&lt;/md-chip&gt;
157+
&lt;md-chip md-editable&gt;Alban Mouton&lt;/md-chip&gt;
145158
</code-block>
146159
</div>
147160
</example-box>
@@ -223,6 +236,32 @@
223236
</code-block>
224237
</div>
225238
</example-box>
239+
240+
<example-box card-title="Themed Chips">
241+
<div slot="demo">
242+
<md-chip >Default</md-chip>
243+
<md-chip md-deletable>Default</md-chip>
244+
<md-chip class="md-primary">Primary</md-chip>
245+
<md-chip md-deletable class="md-primary">Primary</md-chip>
246+
<md-chip class="md-accent">Accent</md-chip>
247+
<md-chip md-deletable class="md-accent">Accent</md-chip>
248+
<md-chip class="md-warn">Warn</md-chip>
249+
<md-chip md-deletable class="md-warn">Warn</md-chip>
250+
</div>
251+
252+
<div slot="code">
253+
<code-block lang="xml">
254+
&lt;md-chip&gt;Default&lt;/md-chip&gt;
255+
&lt;md-chip md-deletable&gt;Default&lt;/md-chip&gt;
256+
&lt;md-chip class=&quot;md-primary&quot;&gt;Primary&lt;/md-chip&gt;
257+
&lt;md-chip md-deletable class=&quot;md-primary&quot;&gt;Primary&lt;/md-chip&gt;
258+
&lt;md-chip class=&quot;md-accent&quot;&gt;Accent&lt;/md-chip&gt;
259+
&lt;md-chip md-deletable class=&quot;md-accent&quot;&gt;Accent&lt;/md-chip&gt;
260+
&lt;md-chip class=&quot;md-warn&quot;&gt;Warn&lt;/md-chip&gt;
261+
&lt;md-chip md-deletable class=&quot;md-warn&quot;&gt;Warn&lt;/md-chip&gt;
262+
</code-block>
263+
</div>
264+
</example-box>
226265
</div>
227266
</docs-component>
228267
</page-content>

‎docs/src/pages/components/Table.vue

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -337,7 +337,7 @@
337337
</md-button>
338338
</md-toolbar>
339339

340-
<md-table md-sort="dessert" md-sort-type="desc" @select="onSelect" @sort="onSort">
340+
<md-table :md-sort="sortInput.name" :md-sort-type="sortInput.type" @select="onSelect" @sort="onSort">
341341
<md-table-header>
342342
<md-table-row>
343343
<md-table-head md-sort-by="dessert">Dessert (100g serving)</md-table-head>
@@ -374,6 +374,27 @@
374374
<pre>{{ selectedData }}</pre>
375375
</div>
376376

377+
<div class="output">
378+
<h2 class="md-title">Sort input</h2>
379+
<md-input-container>
380+
<label for="sort-input-name">Name</label>
381+
<md-select name="sort-input-name" id="sort-input-name" v-model="sortInput.name">
382+
<md-option value="">None</md-option>
383+
<md-option value="dessert">Dessert</md-option>
384+
<md-option value="calories">Calories</md-option>
385+
<md-option value="fat">Fat</md-option>
386+
</md-select>
387+
</md-input-container>
388+
389+
<md-input-container>
390+
<label for="sort-input-type">Type</label>
391+
<md-select name="sort-input-type" id="sort-input-type" v-model="sortInput.type">
392+
<md-option value="asc">Ascending</md-option>
393+
<md-option value="desc">Descending</md-option>
394+
</md-select>
395+
</md-input-container>
396+
</div>
397+
377398
<div class="output">
378399
<h2 class="md-title">Current Sort</h2>
379400
<pre>{{ sort }}</pre>
@@ -716,6 +737,10 @@
716737
}
717738
],
718739
selectedData: [],
740+
sortInput: {
741+
name: 'dessert',
742+
type: 'asc'
743+
},
719744
sort: {},
720745
page: {}
721746
}),

‎src/components/mdChips/mdChip.vue

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
<template>
22
<div class="md-chip" :class="[themeClass, classes]" tabindex="0">
3-
<slot></slot>
3+
<div class="md-chip-container" @click="!disabled && mdEditable && $emit('edit')">
4+
<slot></slot>
5+
</div>
46

57
<md-button
68
class="md-icon-button md-dense md-delete md-input-action"
@@ -20,14 +22,16 @@
2022
name: 'md-chip',
2123
props: {
2224
disabled: Boolean,
23-
mdDeletable: Boolean
25+
mdDeletable: Boolean,
26+
mdEditable: Boolean
2427
},
2528
mixins: [theme],
2629
computed: {
2730
classes() {
2831
return {
2932
'md-deletable': this.mdDeletable,
30-
'md-disabled': this.disabled
33+
'md-disabled': this.disabled,
34+
'md-editable': this.mdEditable
3135
};
3236
}
3337
}

‎src/components/mdChips/mdChips.scss

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,12 @@ $chip-icon-font: $chip-icon-size - 4px;
1919
padding-right: 32px;
2020
}
2121

22+
&.md-editable {
23+
.md-chip-container {
24+
cursor: pointer;
25+
}
26+
}
27+
2228
&:focus,
2329
&:active {
2430
outline: none;

‎src/components/mdChips/mdChips.theme

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
&.md-chip {
33
background-color: #{'BACKGROUND-CONTRAST-0.12'};
44

5-
&.md-deletable {
5+
&.md-deletable, &.md-editable {
66
&:hover,
77
&:focus {
88
background-color: #{'BACKGROUND-CONTRAST-0.54'};
@@ -21,5 +21,20 @@
2121
color: #{'BACKGROUND-COLOR'};
2222
}
2323
}
24+
25+
&.md-primary {
26+
color: #{'PRIMARY-CONTRAST'};
27+
background-color: #{'PRIMARY-COLOR'};
28+
}
29+
30+
&.md-accent {
31+
color: #{'ACCENT-CONTRAST'};
32+
background-color: #{'ACCENT-COLOR'};
33+
}
34+
35+
&.md-warn {
36+
color: #{'WARN-CONTRAST'};
37+
background-color: #{'WARN-COLOR'};
38+
}
2439
}
2540
}

‎src/components/mdChips/mdChips.vue

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,10 @@
44
<md-chip
55
v-for="chip in selectedChips"
66
:md-deletable="!mdStatic"
7+
:md-editable="!mdStatic"
78
:disabled="disabled"
8-
@delete="deleteChip(chip)">
9+
@delete="deleteChip(chip)"
10+
@edit="editChip(chip)">
911
<slot :value="chip"></slot>
1012
</md-chip>
1113

@@ -100,6 +102,17 @@
100102
this.$emit('change', this.selectedChips);
101103
this.applyInputFocus();
102104
},
105+
editChip(chip) {
106+
let index = this.selectedChips.indexOf(chip);
107+
108+
if (index >= 0) {
109+
this.selectedChips.splice(index, 1);
110+
}
111+
112+
this.currentChip = chip;
113+
this.$emit('change', this.selectedChips);
114+
this.applyInputFocus();
115+
},
103116
deleteLastChip() {
104117
if (!this.currentChip) {
105118
this.selectedChips.pop();

‎src/components/mdMenu/mdMenuContent.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55
@keydown.tab.prevent="close"
66
@keydown.up.prevent="highlightItem('up')"
77
@keydown.down.prevent="highlightItem('down')"
8-
@keydown.enter.prevent="fireClick"
9-
@keydown.space.prevent="fireClick"
8+
@keydown.enter="fireClick"
9+
@keydown.space="fireClick"
1010
tabindex="-1">
1111
<md-list>
1212
<slot></slot>

‎src/components/mdSpeedDial/mdSpeedDial.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@
6565
this.fabTrigger.addEventListener('click', this.toggleSpeedDial);
6666
} else {
6767
this.$el.addEventListener('mouseenter', this.toggleSpeedDial);
68-
this.$el.addEventListener('mouseleave', this.toggleSpeedDial);
68+
this.$el.addEventListener('mouseleave', this.closeSpeedDial);
6969
}
7070
});
7171
},

‎src/components/mdSwitch/mdSwitch.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@
6868
},
6969
changeState(checked, $event) {
7070
if (typeof $event !== 'undefined') {
71-
this.$emit('change', $event);
71+
this.$emit('change', checked, $event);
7272
7373
if (!$event.defaultPrevented) {
7474
this.checked = checked;

‎src/components/mdTable/mdTable.vue

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,14 @@
4848
},
4949
selectedRows() {
5050
this.numberOfSelected = Object.keys(this.selectedRows).length;
51+
},
52+
mdSort() {
53+
this.sortBy = this.mdSort;
54+
this.$emit('sortInput');
55+
},
56+
mdSortType() {
57+
this.sortType = this.mdSortType;
58+
this.$emit('sortInput');
5159
}
5260
},
5361
mounted() {

‎src/components/mdTable/mdTableHead.vue

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -64,15 +64,20 @@
6464
this.parentTable.sortType = this.sortType;
6565
this.parentTable.emitSort(this.mdSortBy);
6666
}
67+
},
68+
initSort() {
69+
if (this.hasMatchSort()) {
70+
this.sorted = true;
71+
this.sortType = this.parentTable.sortType;
72+
}
6773
}
6874
},
6975
mounted() {
7076
this.parentTable = getClosestVueParent(this.$parent, 'md-table');
71-
72-
if (this.hasMatchSort()) {
73-
this.sorted = true;
74-
this.sortType = this.parentTable.sortType;
75-
}
77+
this.initSort();
78+
this.parentTable.$on('sortInput', () => {
79+
this.initSort();
80+
});
7681
}
7782
};
7883
</script>

0 commit comments

Comments
 (0)