-
Notifications
You must be signed in to change notification settings - Fork 71
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(mdc-select): Implement native select
- Loading branch information
Showing
15 changed files
with
293 additions
and
835 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,86 +1,72 @@ | ||
| ## Usage | ||
|
|
||
| ```html | ||
| <mdc-select v-model="selected" label=">Please select one"> | ||
| <mdc-option>A</mdc-option> | ||
| <mdc-option>B</mdc-option> | ||
| <mdc-option>C</mdc-option> | ||
| </mdc-select> | ||
| <span>Selected: {{ selected }}</span> | ||
| ``` | ||
|
|
||
| ```javascript | ||
| var vm = new Vue({ | ||
| data () { | ||
| return { | ||
| selected: '', | ||
| } | ||
| } | ||
| }) | ||
| ``` | ||
|
|
||
| > For better cross-device experiennce, `<mdc-select>` will switch from menu to | ||
| > native rendering based on the media query | ||
| > `(max-width: 600px) and (pointer: coarse)`. | ||
| ### mdc-select | ||
|
|
||
| | props | Type | Default | Description | | ||
| | ---------- | --------------- | ------- | -------------------------------------------- | | ||
| | `disabled` | Boolean | false | whether this select is disabled | | ||
| | `label` | String | | the selection label | | ||
| | `value` | [String, Array] | | bind with v-model (update on `change` event) | | ||
| | `multiple` | Boolean | | whether the select accept multiple values | | ||
| | `max-size` | Boolean | 4 | multi select max size | | ||
| | `native` | String | | force native select rendering | | ||
| | `name` | String | | native select name | | ||
|
|
||
| | event | Description | | ||
| | -------- | ----------------------- | | ||
| | `@focus` | emitted on focus gained | | ||
| | `@blur` | emitted on focus lost | | ||
|
|
||
| ### mdc-option | ||
|
|
||
| | props | Type | Default | Description | | ||
| | ---------- | ------- | ------- | ------------------------------- | | ||
| | `disabled` | Boolean | false | whether this option is disabled | | ||
| | `value` | String | | option value | | ||
|
|
||
| > If no option value is specified, the select component will take the option's textContent. | ||
| ```html | ||
| <mdc-select v-model="selected" label=">Please select one"> | ||
| <mdc-option value="a">A</mdc-option> | ||
| <mdc-option value="b">B</mdc-option> | ||
| <mdc-option value="c">C</mdc-option> | ||
| </mdc-select> | ||
| ``` | ||
|
|
||
| ### Multiple select | ||
|
|
||
| ```html | ||
| <mdc-select multiple v-model="selected" label="Please select one or more"> | ||
| <mdc-option>A</mdc-option> | ||
| <mdc-option>B</mdc-option> | ||
| <mdc-option>C</mdc-option> | ||
| </mdc-select> | ||
| <span>Selected: {{ selected }}</span> | ||
| ``` | ||
|
|
||
| ```javascript | ||
| var vm = new Vue({ | ||
| data () { | ||
| return { | ||
| selected: [], | ||
| } | ||
| } | ||
| }) | ||
| ``` | ||
|
|
||
| > multi-select are always rendered natively. the size is reactive and is caped | ||
| > by the max-size property | ||
| ### Reference | ||
|
|
||
| - <https://material.io/components/web/catalog/input-controls/select-menus> | ||
| ## Usage | ||
|
|
||
| ```html | ||
| <mdc-select v-model="selected" label=">Please select one"> | ||
| <mdc-option>A</mdc-option> | ||
| <mdc-option>B</mdc-option> | ||
| <mdc-option>C</mdc-option> | ||
| </mdc-select> | ||
| <span>Selected: {{ selected }}</span> | ||
| ``` | ||
|
|
||
| ```javascript | ||
| var vm = new Vue({ | ||
| data() { | ||
| return { | ||
| selected: '', | ||
| }; | ||
| }, | ||
| }); | ||
| ``` | ||
|
|
||
| > For better cross-device experiennce, `<mdc-select>` will switch from menu to | ||
| > native rendering based on the media query | ||
| > `(max-width: 600px) and (pointer: coarse)`. | ||
| ### mdc-select | ||
|
|
||
| | props | Type | Default | Description | | ||
| | ---------- | --------------- | ------- | -------------------------------------------- | | ||
| | `disabled` | Boolean | false | whether this select is disabled | | ||
| | `label` | String | | the selection label | | ||
| | `value` | [String, Array] | | bind with v-model (update on `change` event) | | ||
| | `max-size` | Boolean | 4 | multi select max size | | ||
| | `name` | String | | native select name | | ||
|
|
||
| | event | Description | | ||
| | -------- | ----------------------- | | ||
| | `@focus` | emitted on focus gained | | ||
| | `@blur` | emitted on focus lost | | ||
|
|
||
| ### mdc-option | ||
|
|
||
| | props | Type | Default | Description | | ||
| | ---------- | ------- | ------- | ------------------------------- | | ||
| | `disabled` | Boolean | false | whether this option is disabled | | ||
| | `value` | String | | option value | | ||
|
|
||
| > If no option value is specified, the select component will take the option's textContent. | ||
| ### mdc-optgroup | ||
|
|
||
| | props | Type | Default | Description | | ||
| | ---------- | ------- | ------- | ------------------------------- | | ||
| | `disabled` | Boolean | false | whether this option is disabled | | ||
| | `label` | String | | optgroup label | | ||
|
|
||
| ```html | ||
| <mdc-select v-model="selected" label=">Please select one"> | ||
| <mdc-optgroup label="Meats"> | ||
| <mdc-option value="steak">Steak</mdc-option> | ||
| <mdc-option value="hamburger">Hamburger</mdc-option> | ||
| </mdc-optgroup> | ||
| <mdc-optgroup label="Vegetables"> | ||
| <mdc-option value="beet">Beet</mdc-option> | ||
| <mdc-option value="carrot">Carrot</mdc-option> | ||
| </mdc-optgroup> | ||
| </mdc-select> | ||
| ``` | ||
|
|
||
| ### Reference | ||
|
|
||
| * <https://material.io/components/web/catalog/input-controls/select-menus> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,56 +1,42 @@ | ||
| <template> | ||
| <div class="mdc-demo mdc-demo--container"> | ||
| <div> | ||
| <mdc-select v-model="selectedType" label="Pick up a food type"> | ||
| <mdc-option v-for="type in types" :key="type" | ||
| >{{type}}</mdc-option> | ||
| </mdc-select> | ||
| <br><br><br> | ||
| <mdc-select box v-model="selectedValue" label="Pick up a food" | ||
| v-if="selectedType"> | ||
| <mdc-option v-for="option of options" :key="option" | ||
| :value="option.toLowerCase()" | ||
| >{{option}}</mdc-option> | ||
| </mdc-select> | ||
| <template> | ||
| <div class="mdc-demo mdc-demo--container"> | ||
| <div> | ||
| <mdc-select v-model="selectedType" label="Pick up a food type"> | ||
| <mdc-option v-for="type in types" :key="type">{{type}}</mdc-option> | ||
| </mdc-select> | ||
| <br><br><br> | ||
| <mdc-select box v-model="selectedValue" label="Pick up a food" v-if="selectedType"> | ||
| <mdc-option v-for="option of options" :key="option" :value="option.toLowerCase()">{{option}}</mdc-option> | ||
| </mdc-select> | ||
|
|
||
| <mdc-caption tag="p" v-if="selectedType" | ||
| >Selected Value: {{ selectedValue }}</mdc-caption> | ||
| <br> | ||
| <mdc-caption tag="p" v-if="selectedType">Selected Value: {{ selectedValue }}</mdc-caption> | ||
| <br> | ||
|
|
||
| <mdc-select multiple v-model="selectedValues" label="Pick one or more" | ||
| v-if="selectedType"> | ||
| <mdc-option v-for="option of options" :key="option" | ||
| :value="option.toLowerCase()"> | ||
| {{option}} | ||
| </mdc-option> | ||
| </mdc-select> | ||
| <mdc-caption tag="p" v-if="selectedType" | ||
| >Multi Select: {{ selectedValues }}</mdc-caption> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| export default { | ||
| data () { | ||
| return { | ||
| selectedType: undefined, | ||
| selectedValue: undefined, | ||
| selectedValues: [], | ||
| food: { | ||
| 'Vegetables' : ['Spinach', 'Carrots', 'Onions', 'Broccoli'], | ||
| 'Meat' : [ 'Eggs', 'Chicken', 'Fish', 'Turkey', 'Pork' , 'Beef'], | ||
| 'Fruits' : ['Apples', 'Oranges', 'Bananas', 'Berries', 'Lemons'], | ||
| } | ||
| } | ||
| }, | ||
| computed: { | ||
| types () { | ||
| return Object.keys(this.food) | ||
| }, | ||
| options () { | ||
| return this.selectedType ? this.food[this.selectedType] : [] | ||
| } | ||
| } | ||
| } | ||
| </script> | ||
| <script> | ||
| export default { | ||
| data() { | ||
| return { | ||
| selectedType: undefined, | ||
| selectedValue: undefined, | ||
| selectedValues: [], | ||
| food: { | ||
| Vegetables: ['Spinach', 'Carrots', 'Onions', 'Broccoli'], | ||
| Meat: ['Eggs', 'Chicken', 'Fish', 'Turkey', 'Pork', 'Beef'], | ||
| Fruits: ['Apples', 'Oranges', 'Bananas', 'Berries', 'Lemons'], | ||
| }, | ||
| }; | ||
| }, | ||
| computed: { | ||
| types() { | ||
| return Object.keys(this.food); | ||
| }, | ||
| options() { | ||
| return this.selectedType ? this.food[this.selectedType] : []; | ||
| }, | ||
| }, | ||
| }; | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,14 +1,12 @@ | ||
| import {BasePlugin} from '../base' | ||
| import mdcSelect from './mdc-select.vue' | ||
| import mdcOption from './mdc-option.vue' | ||
| import { BasePlugin } from '../base'; | ||
| import mdcSelect from './mdc-select.vue'; | ||
| import mdcOption from './mdc-option.vue'; | ||
| import mdcOptgroup from './mdc-optgroup.vue'; | ||
|
|
||
|
|
||
| export { | ||
| mdcSelect, | ||
| mdcOption, | ||
| } | ||
| export { mdcSelect, mdcOption, mdcOptgroup }; | ||
|
|
||
| export default BasePlugin({ | ||
| mdcSelect, | ||
| mdcOption, | ||
| }) | ||
| mdcOptgroup, | ||
| }); |
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.