diff --git a/docs/index.html b/docs/index.html index 87a62f0..79aef73 100644 --- a/docs/index.html +++ b/docs/index.html @@ -12,16 +12,16 @@ - + - - - - - - - - + + + + + + + + Vue Material diff --git a/docs/src/assets/codepen.png b/docs/src/assets/codepen.png new file mode 100644 index 0000000..277c84e Binary files /dev/null and b/docs/src/assets/codepen.png differ diff --git a/docs/src/components/CodeBlock.vue b/docs/src/components/CodeBlock.vue index 7b1faf4..dfa45cd 100644 --- a/docs/src/components/CodeBlock.vue +++ b/docs/src/components/CodeBlock.vue @@ -16,7 +16,6 @@ @import '../../../src/core/stylesheets/variables.scss'; .code-block { - //margin: -16px; overflow: hidden; position: relative; border-radius: 2px; @@ -166,6 +165,7 @@ import highlightJavascript from 'highlight.js/lib/languages/javascript'; import highlightBash from 'highlight.js/lib/languages/bash'; import Clipboard from 'clipboard'; + import getClosestVueParent from '../../../src/core/utils/getClosestVueParent'; highlight.registerLanguage('scss', highlightSCSS); highlight.registerLanguage('xml', highlightXML); @@ -221,9 +221,17 @@ } }, mounted() { + this.exampleBoxParent = getClosestVueParent(this.$parent, 'example-box'); this.reindent(); this.enableCopy(); + if (this.exampleBoxParent) { + this.exampleBoxParent.codeBlocks.push({ + lang: this.lang, + code: this.$refs.block.innerHTML + }); + } + highlight.highlightBlock(this.$refs.block); } }; diff --git a/docs/src/components/ExampleBox.vue b/docs/src/components/ExampleBox.vue index 8209c05..203dd85 100644 --- a/docs/src/components/ExampleBox.vue +++ b/docs/src/components/ExampleBox.vue @@ -1,19 +1,51 @@ diff --git a/docs/src/pages/components/Select.vue b/docs/src/pages/components/Select.vue index 871059c..4048071 100644 --- a/docs/src/pages/components/Select.vue +++ b/docs/src/pages/components/Select.vue @@ -183,7 +183,68 @@
+ <div class="field-group"> + <md-input-container> + <label for="movie">Movie</label> + <md-select name="movie" id="movie" v-model="movie"> + <md-option value="fight_club">Fight Club</md-option> + <md-option value="godfather">Godfather</md-option> + <md-option value="godfather_ii">Godfather II</md-option> + <md-option value="godfather_iii">Godfather III</md-option> + <md-option value="godfellas">Godfellas</md-option> + <md-option value="pulp_fiction">Pulp Fiction</md-option> + <md-option value="scarface">Scarface</md-option> + </md-select> + </md-input-container> + <md-input-container> + <label for="country">Country</label> + <md-select name="country" id="country" v-model="country"> + <md-option value="australia">Australia</md-option> + <md-option value="brazil">Brazil</md-option> + <md-option value="japan">Japan</md-option> + <md-option value="united_states">United States</md-option> + </md-select> + </md-input-container> + + <md-input-container> + <label for="font">Font</label> + <md-select name="font" id="font" v-model="font"> + <md-option value="arial">Arial</md-option> + <md-option value="calibri">Calibri</md-option> + <md-option value="cambria">Cambria</md-option> + <md-option value="comic_sans">Comic Sans</md-option> + <md-option value="consolas">Consolas</md-option> + <md-option value="courier">Courier</md-option> + <md-option value="droid_sans">Droid Sans</md-option> + <md-option value="georgia">Georgia</md-option> + <md-option value="helvetica">Helvetica</md-option> + <md-option value="impact">Impact</md-option> + <md-option value="roboto">Roboto</md-option> + <md-option value="segoe_ui">Segoe UI</md-option> + <md-option value="times_new_roman">Times New Roman</md-option> + <md-option value="ubuntu">Ubuntu</md-option> + <md-option value="verdana">Verdana</md-option> + </md-select> + </md-input-container> + </div> + + <md-button class="md-raised md-primary" @click="setPulpFiction">Set Pulp Fiction</md-button> + + + + export default { + data: () => ({ + movie: 'godfather', + country: '', + font: '' + }), + methods: { + setPulpFiction() { + this.movie = 'pulp_fiction'; + } + } + };
@@ -237,7 +298,61 @@
+ <md-input-container> + <label for="food">Food</label> + <md-select name="food" id="food" v-model="food"> + <md-subheader>Fruits</md-subheader> + <md-option value="apples">Apples</md-option> + <md-option value="bananas">Bananas</md-option> + <md-option value="peaches">Peaches</md-option> + <md-option value="oranges">Oranges</md-option> + <md-subheader>Vegetables</md-subheader> + <md-option value="carrots">Carrots</md-option> + <md-option value="cucumbers">Cucumbers</md-option> + + <md-subheader>Baked Goods</md-subheader> + <md-option value="apple_pie">Apple Pie</md-option> + <md-option value="chocolate_cake">Chocolate Cake</md-option> + </md-select> + </md-input-container> + + <md-input-container> + <label for="users">Users</label> + <md-select name="users" id="users" multiple v-model="users"> + <md-subheader>Managers</md-subheader> + <md-option value="jim_halpert">Jim Halpert</md-option> + <md-option value="dwight_schrute">Dwight Schrute</md-option> + <md-option value="michael_scott">Michael Scott</md-option> + + <md-subheader>Employees</md-subheader> + <md-option value="pam_beesly">Pam Beesly</md-option> + <md-option value="angela_martin">Angela Martin</md-option> + <md-option value="kelly_kapoor">Kelly Kapoor</md-option> + <md-option value="ryan_howard">Ryan Howard</md-option> + <md-option value="kevin_malone">Kevin Malone</md-option> + <md-option value="creed_bratton">Creed Bratton</md-option> + <md-option value="oscar_nunez">Oscar Nunez</md-option> + <md-option value="toby_flenderson">Toby Flenderson</md-option> + <md-option value="stanley_hudson">Stanley Hudson</md-option> + <md-option value="meredith_palmer">Meredith Palmer</md-option> + <md-option value="phyllis_lapin_vance">Phyllis Lapin-Vance</md-option> + </md-select> + </md-input-container> + + <div>Selected users: {{ users }}</div> + + + + export default { + data: () => ({ + food: '', + users: [ + 'jim_halpert', + 'michael_scott' + ] + }) + };
diff --git a/src/core/utils/getClosestVueParent.js b/src/core/utils/getClosestVueParent.js index 2dcc3e8..d05e38a 100644 --- a/src/core/utils/getClosestVueParent.js +++ b/src/core/utils/getClosestVueParent.js @@ -1,5 +1,5 @@ let getClosestVueParent = ($parent, cssClass) => { - if (!$parent.$el) { + if (!$parent || !$parent.$el) { return false; }