Skip to content

Commit 8b35fb3

Browse files
author
pablohpsilva
committed
merge with master
2 parents 8cd18b8 + 1450ea7 commit 8b35fb3

File tree

11 files changed

+235
-44
lines changed

11 files changed

+235
-44
lines changed

‎README.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,10 @@
1515
<img src="https://img.shields.io/npm/v/vue-material.svg" alt="Version">
1616
</a>
1717

18+
<a href="https://cdnjs.com/libraries/vue-material">
19+
<img src="https://img.shields.io/cdnjs/v/vue-material.svg" alt="Version">
20+
</a>
21+
1822
<a href="https://www.npmjs.com/package/vue-material">
1923
<img src="https://img.shields.io/npm/l/vue-material.svg" alt="License">
2024
</a>

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

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,12 @@
7777
<md-table-cell>Sets the type. Default <code>text</code></md-table-cell>
7878
</md-table-row>
7979

80+
<md-table-row>
81+
<md-table-cell>debounce</md-table-cell>
82+
<md-table-cell><code>Number</code></md-table-cell>
83+
<md-table-cell>Debounce the <code>change</code> and <code>input</code> events emission. Default <code>300</code>ms</md-table-cell>
84+
</md-table-row>
85+
8086
<md-table-row>
8187
<md-table-cell>disabled</md-table-cell>
8288
<md-table-cell><code>Boolean</code></md-table-cell>
@@ -100,6 +106,12 @@
100106
<md-table-cell><code>Number</code></md-table-cell>
101107
<md-table-cell>Sets the maxlength and enable the text counter.</md-table-cell>
102108
</md-table-row>
109+
110+
<md-table-row>
111+
<md-table-cell>readonly</md-table-cell>
112+
<md-table-cell><code>Boolean</code></md-table-cell>
113+
<md-table-cell>Sets the component to read only mode.</md-table-cell>
114+
</md-table-row>
103115
</md-table-body>
104116
</md-table>
105117
</api-table>
@@ -121,6 +133,12 @@
121133
<md-table-cell>A required model object to bind the value.</md-table-cell>
122134
</md-table-row>
123135

136+
<md-table-row>
137+
<md-table-cell>debounce</md-table-cell>
138+
<md-table-cell><code>Number</code></md-table-cell>
139+
<md-table-cell>Debounce the <code>change</code> and <code>input</code> events emission. Default <code>300</code>ms</md-table-cell>
140+
</md-table-row>
141+
124142
<md-table-row>
125143
<md-table-cell>disabled</md-table-cell>
126144
<md-table-cell><code>Boolean</code></md-table-cell>
@@ -144,6 +162,12 @@
144162
<md-table-cell><code>Number</code></md-table-cell>
145163
<md-table-cell>Sets the maxlength and enable the text counter.</md-table-cell>
146164
</md-table-row>
165+
166+
<md-table-row>
167+
<md-table-cell>readonly</md-table-cell>
168+
<md-table-cell><code>Boolean</code></md-table-cell>
169+
<md-table-cell>Sets the component to read only mode.</md-table-cell>
170+
</md-table-row>
147171
</md-table-body>
148172
</md-table>
149173
</api-table>
@@ -157,6 +181,11 @@
157181
<label>Initial value</label>
158182
<md-input v-model="initialValue"></md-input>
159183
</md-input-container>
184+
185+
<md-input-container>
186+
<label>Initial value (read only)</label>
187+
<md-input v-model="initialValue" readonly></md-input>
188+
</md-input-container>
160189

161190
<md-input-container>
162191
<label>With label</label>

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

Lines changed: 107 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -848,7 +848,7 @@
848848
</div>
849849
</example-box>
850850

851-
<example-box card-title="Controls">
851+
<example-box card-title="Multiple Options">
852852
<div slot="demo">
853853
<div class="phone-viewport">
854854
<md-toolbar md-theme="white">
@@ -864,7 +864,30 @@
864864
</md-list-item>
865865
</md-list>
866866
</div>
867+
</div>
867868

869+
<div slot="code">
870+
<code-block lang="xml">
871+
&lt;div class=&quot;phone-viewport&quot;&gt;
872+
&lt;md-toolbar md-theme=&quot;white&quot;&gt;
873+
&lt;span class=&quot;md-title&quot;&gt;Multiple options&lt;/span&gt;
874+
&lt;/md-toolbar&gt;
875+
876+
&lt;md-list&gt;
877+
&lt;md-list-item&gt;Plain Text&lt;/md-list-item&gt;
878+
&lt;md-list-item target=&quot;_blank&quot; href=&quot;https://google.com&quot;&gt;Link&lt;/md-list-item&gt;
879+
&lt;md-list-item @click.native=&quot;openAlert&quot;&gt;Button&lt;/md-list-item&gt;
880+
&lt;md-list-item&gt;
881+
&lt;router-link to=&quot;/components/list&quot;&gt;Router View&lt;/router-link&gt;
882+
&lt;/md-list-item&gt;
883+
&lt;/md-list&gt;
884+
&lt;/div&gt;
885+
</code-block>
886+
</div>
887+
</example-box>
888+
889+
<example-box card-title="Expand List">
890+
<div slot="demo">
868891
<div class="phone-viewport">
869892
<md-toolbar md-theme="white">
870893
<span class="md-title">Single Expand</span>
@@ -986,52 +1009,109 @@
9861009
&lt;/div&gt;
9871010

9881011
&lt;div class=&quot;phone-viewport&quot;&gt;
989-
&lt;md-list&gt;
1012+
&lt;md-toolbar md-theme=&quot;white&quot;&gt;
1013+
&lt;span class=&quot;md-title&quot;&gt;Single Expand&lt;/span&gt;
1014+
&lt;/md-toolbar&gt;
1015+
1016+
&lt;md-list&gt;
9901017
&lt;md-list-item&gt;
991-
&lt;md-icon&gt;whatshot&lt;/md-icon&gt;
992-
&lt;span&gt;News&lt;/span&gt;
1018+
&lt;md-icon&gt;whatshot&lt;/md-icon&gt;
1019+
&lt;span&gt;News&lt;/span&gt;
9931020

994-
&lt;md-list-expand&gt;
1021+
&lt;md-list-expand&gt;
9951022
&lt;md-list&gt;
996-
&lt;md-list-item class=&quot;md-inset&quot;&gt;World&lt;/md-list-item&gt;
997-
&lt;md-list-item class=&quot;md-inset&quot;&gt;Americas&lt;/md-list-item&gt;
998-
&lt;md-list-item class=&quot;md-inset&quot;&gt;Europe&lt;/md-list-item&gt;
1023+
&lt;md-list-item class=&quot;md-inset&quot;&gt;World&lt;/md-list-item&gt;
1024+
&lt;md-list-item class=&quot;md-inset&quot;&gt;Americas&lt;/md-list-item&gt;
1025+
&lt;md-list-item class=&quot;md-inset&quot;&gt;Europe&lt;/md-list-item&gt;
9991026
&lt;/md-list&gt;
1000-
&lt;/md-list-expand&gt;
1027+
&lt;/md-list-expand&gt;
10011028
&lt;/md-list-item&gt;
10021029

10031030
&lt;md-list-item&gt;
1004-
&lt;md-icon&gt;videogame_asset&lt;/md-icon&gt;
1005-
&lt;span&gt;Games&lt;/span&gt;
1031+
&lt;md-icon&gt;videogame_asset&lt;/md-icon&gt;
1032+
&lt;span&gt;Games&lt;/span&gt;
10061033

1007-
&lt;md-list-expand&gt;
1034+
&lt;md-list-expand&gt;
10081035
&lt;md-list&gt;
1009-
&lt;md-list-item class=&quot;md-inset&quot;&gt;Console&lt;/md-list-item&gt;
1010-
&lt;md-list-item class=&quot;md-inset&quot;&gt;PC&lt;/md-list-item&gt;
1011-
&lt;md-list-item class=&quot;md-inset&quot;&gt;Phone&lt;/md-list-item&gt;
1036+
&lt;md-list-item class=&quot;md-inset&quot;&gt;Console&lt;/md-list-item&gt;
1037+
&lt;md-list-item class=&quot;md-inset&quot;&gt;PC&lt;/md-list-item&gt;
1038+
&lt;md-list-item class=&quot;md-inset&quot;&gt;Phone&lt;/md-list-item&gt;
10121039
&lt;/md-list&gt;
1013-
&lt;/md-list-expand&gt;
1040+
&lt;/md-list-expand&gt;
10141041
&lt;/md-list-item&gt;
10151042

10161043
&lt;md-list-item&gt;
1017-
&lt;md-icon&gt;video_library&lt;/md-icon&gt;
1018-
&lt;span&gt;Video&lt;/span&gt;
1044+
&lt;md-icon&gt;video_library&lt;/md-icon&gt;
1045+
&lt;span&gt;Video&lt;/span&gt;
10191046

1020-
&lt;md-list-expand&gt;
1047+
&lt;md-list-expand&gt;
10211048
&lt;md-list&gt;
1022-
&lt;md-list-item class=&quot;md-inset&quot;&gt;Humor&lt;/md-list-item&gt;
1023-
&lt;md-list-item class=&quot;md-inset&quot;&gt;Music&lt;/md-list-item&gt;
1024-
&lt;md-list-item class=&quot;md-inset&quot;&gt;Movies&lt;/md-list-item&gt;
1025-
&lt;md-list-item class=&quot;md-inset&quot;&gt;TV Shows&lt;/md-list-item&gt;
1049+
&lt;md-list-item class=&quot;md-inset&quot;&gt;Humor&lt;/md-list-item&gt;
1050+
&lt;md-list-item class=&quot;md-inset&quot;&gt;Music&lt;/md-list-item&gt;
1051+
&lt;md-list-item class=&quot;md-inset&quot;&gt;Movies&lt;/md-list-item&gt;
1052+
&lt;md-list-item class=&quot;md-inset&quot;&gt;TV Shows&lt;/md-list-item&gt;
10261053
&lt;/md-list&gt;
1027-
&lt;/md-list-expand&gt;
1054+
&lt;/md-list-expand&gt;
10281055
&lt;/md-list-item&gt;
10291056

10301057
&lt;md-list-item&gt;
1031-
&lt;md-icon&gt;shopping_basket&lt;/md-icon&gt;
1032-
&lt;span&gt;Shop&lt;/span&gt;
1058+
&lt;md-icon&gt;shopping_basket&lt;/md-icon&gt;
1059+
&lt;span&gt;Shop&lt;/span&gt;
10331060
&lt;/md-list-item&gt;
1034-
&lt;/md-list&gt;
1061+
&lt;/md-list&gt;
1062+
&lt;/div&gt;
1063+
1064+
&lt;div class=&quot;phone-viewport&quot;&gt;
1065+
&lt;md-toolbar md-theme=&quot;white&quot;&gt;
1066+
&lt;span class=&quot;md-title&quot;&gt;Multiple Expand&lt;/span&gt;
1067+
&lt;/md-toolbar&gt;
1068+
1069+
&lt;md-list&gt;
1070+
&lt;md-list-item md-expand-multiple&gt;
1071+
&lt;md-icon&gt;whatshot&lt;/md-icon&gt;
1072+
&lt;span&gt;News&lt;/span&gt;
1073+
1074+
&lt;md-list-expand&gt;
1075+
&lt;md-list&gt;
1076+
&lt;md-list-item class=&quot;md-inset&quot;&gt;World&lt;/md-list-item&gt;
1077+
&lt;md-list-item class=&quot;md-inset&quot;&gt;Americas&lt;/md-list-item&gt;
1078+
&lt;md-list-item class=&quot;md-inset&quot;&gt;Europe&lt;/md-list-item&gt;
1079+
&lt;/md-list&gt;
1080+
&lt;/md-list-expand&gt;
1081+
&lt;/md-list-item&gt;
1082+
1083+
&lt;md-list-item md-expand-multiple&gt;
1084+
&lt;md-icon&gt;videogame_asset&lt;/md-icon&gt;
1085+
&lt;span&gt;Games&lt;/span&gt;
1086+
1087+
&lt;md-list-expand&gt;
1088+
&lt;md-list&gt;
1089+
&lt;md-list-item class=&quot;md-inset&quot;&gt;Console&lt;/md-list-item&gt;
1090+
&lt;md-list-item class=&quot;md-inset&quot;&gt;PC&lt;/md-list-item&gt;
1091+
&lt;md-list-item class=&quot;md-inset&quot;&gt;Phone&lt;/md-list-item&gt;
1092+
&lt;/md-list&gt;
1093+
&lt;/md-list-expand&gt;
1094+
&lt;/md-list-item&gt;
1095+
1096+
&lt;md-list-item md-expand-multiple&gt;
1097+
&lt;md-icon&gt;video_library&lt;/md-icon&gt;
1098+
&lt;span&gt;Video&lt;/span&gt;
1099+
1100+
&lt;md-list-expand&gt;
1101+
&lt;md-list&gt;
1102+
&lt;md-list-item class=&quot;md-inset&quot;&gt;Humor&lt;/md-list-item&gt;
1103+
&lt;md-list-item class=&quot;md-inset&quot;&gt;Music&lt;/md-list-item&gt;
1104+
&lt;md-list-item class=&quot;md-inset&quot;&gt;Movies&lt;/md-list-item&gt;
1105+
&lt;md-list-item class=&quot;md-inset&quot;&gt;TV Shows&lt;/md-list-item&gt;
1106+
&lt;/md-list&gt;
1107+
&lt;/md-list-expand&gt;
1108+
&lt;/md-list-item&gt;
1109+
1110+
&lt;md-list-item&gt;
1111+
&lt;md-icon&gt;shopping_basket&lt;/md-icon&gt;
1112+
&lt;span&gt;Shop&lt;/span&gt;
1113+
&lt;/md-list-item&gt;
1114+
&lt;/md-list&gt;
10351115
&lt;/div&gt;
10361116

10371117
&lt;div class="phone-viewport"&gt;

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

Lines changed: 52 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -303,7 +303,24 @@
303303
<div class="multiple" slot="demo">
304304
<div class="field-group">
305305
<md-input-container>
306-
<label for="users">Users</label>
306+
<label for="users">Simple multiselect</label>
307+
<md-select name="option" id="option" multiple v-model="items">
308+
<md-option v-for="option in options"
309+
:key="option"
310+
:value="option">
311+
{{ option.name }}
312+
</md-option>
313+
</md-select>
314+
</md-input-container>
315+
</div>
316+
317+
<div>Selected letters: {{ items }}</div>
318+
<br/>
319+
<br/>
320+
321+
<div class="field-group">
322+
<md-input-container>
323+
<label for="users">Multiselect with subheaders</label>
307324
<md-select name="users" id="users" multiple v-model="users">
308325
<md-subheader>Managers</md-subheader>
309326
<md-option value="jim_halpert">Jim Halpert</md-option>
@@ -325,12 +342,27 @@
325342
</md-select>
326343
</md-input-container>
327344
</div>
328-
345+
329346
<div>Selected users: {{ users }}</div>
347+
330348
</div>
331349

332350
<div slot="code">
333351
<code-block lang="xml">
352+
&lt;md-input-container&gt;
353+
&lt;label for=&quot;users=&quot;&gt;Simple multiselect&lt;/label&gt;
354+
&lt;md-select name=&quot;option=&quot; id=&quot;option=&quot; multiple v-model=&quot;items=&quot;&gt;
355+
&lt;md-option v-for=&quot;option in options=&quot;
356+
:key=&quot;option=&quot;
357+
:value=&quot;option=&quot;&gt;
358+
{ { option.name } }
359+
&lt;/md-option&gt;
360+
&lt;md-select&gt;
361+
&lt;/md-input-container&gt;
362+
363+
&lt;div&gt;Selected letters: {{ items }}&lt;/div&gt;
364+
365+
334366
&lt;md-input-container&gt;
335367
&lt;label for=&quot;users&quot;&gt;Users&lt;/label&gt;
336368
&lt;md-select name=&quot;users&quot; id=&quot;users&quot; multiple v-model=&quot;users&quot;&gt;
@@ -361,10 +393,15 @@
361393
export default {
362394
data: () => ({
363395
food: '',
364-
users: [
365-
'jim_halpert',
366-
'michael_scott'
367-
]
396+
users: [],
397+
options: [
398+
{ id: 1, name: 'a' },
399+
{ id: 2, name: 'b' },
400+
{ id: 3, name: 'c' },
401+
{ id: 4, name: 'd' },
402+
{ id: 5, name: 'e' }
403+
],
404+
items: []
368405
})
369406
};
370407
</code-block>
@@ -400,10 +437,15 @@
400437
country: '',
401438
font: '',
402439
food: '',
403-
users: [
404-
'jim_halpert',
405-
'michael_scott'
406-
]
440+
users: [],
441+
options: [
442+
{ id: 1, name: 'a' },
443+
{ id: 2, name: 'b' },
444+
{ id: 3, name: 'c' },
445+
{ id: 4, name: 'd' },
446+
{ id: 5, name: 'e' }
447+
],
448+
items: []
407449
}),
408450
methods: {
409451
setPulpFiction() {

‎package.json

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -71,8 +71,9 @@
7171
"eslint-plugin-html": "^2.0.1",
7272
"eventsource-polyfill": "^0.9.6",
7373
"express": "^4.14.1",
74-
"extract-text-webpack-plugin": "beta",
75-
"friendly-errors-webpack-plugin": "^1.3.1",
74+
"extract-text-webpack-plugin": "^2.1.0",
75+
"file-loader": "^0.10.0",
76+
"friendly-errors-webpack-plugin": "^1.1.3",
7677
"highlight.js": "^9.9.0",
7778
"html-webpack-plugin": "^2.28.0",
7879
"node-sass": "^4.5.0",

‎src/components/mdCheckbox/mdCheckbox.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ $checkbox-touch-size: 48px;
1212

1313
.md-checkbox-container {
1414
width: $checkbox-size;
15+
min-width: $checkbox-size;
1516
height: $checkbox-size;
1617
position: relative;
1718
border-radius: 2px;

0 commit comments

Comments
 (0)