From 815c58b29f0d28b3aea09cd19923a74883296d67 Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Thu, 1 Dec 2016 04:56:51 -0200 Subject: [PATCH] start the creation of button "edit on codepen" --- docs/index.html | 18 ++-- docs/src/assets/codepen.png | Bin 0 -> 2094 bytes docs/src/components/CodeBlock.vue | 10 +- docs/src/components/ExampleBox.vue | 142 +++++++++++++++++++++++--- docs/src/pages/components/Select.vue | 115 +++++++++++++++++++++ src/core/utils/getClosestVueParent.js | 2 +- 6 files changed, 263 insertions(+), 24 deletions(-) create mode 100644 docs/src/assets/codepen.png 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 0000000000000000000000000000000000000000..277c84e9439967cb1f86a950221fff78956ad5da GIT binary patch literal 2094 zcmV+}2+{Y6P)SZ_ck=@4cB*r1f8K34k$7W;jC_^}ng!z+!)FQRZf@Kh}{TCexc9{Kj{D&6f4vd44ppWDms3V^u&0@xDzYG7BDvWB)~8Br%}69yo5CqL7~^mbWh94tj4rm%@cWS5 z?jvTzhz4Fqa=q@%hXE~oh~$0)SeT4y;&Y@fHYi*9u6%&h&H6Ae8PT3sk-FM%Oh*Pd z+=JBJKAtF5zs*trW08c!?+I$9%Y0upm=-i^R;yP{d?CSPuYLkoV0# z-flobT;4Of(!PmCJY0@rywSV-3?$+Vv)&r3_D|ywo28g+-W&V&>`hFHd|IX6*6oKe zBe6KTioLDdKR^toXJnOo+qPeg$lOx>-lpw8qY(YWfNk#rGvhHWUCrC?OeF3%?ma*6 za1b7=@*8UzxBrnM6h|rwL4!j-gWhq~?c2|eVhMxZ z@zw3y?~mdTB=Y))_cl-uZy)D8@Xj=EY-N^<*IR8cE8;OL-yukf_R}&LiMXFpbVnlY z<5azcN0|XX9l3}psoLKVqx*FDXhI_I8T`P^yp2TKP*8b8 zRO(RRNXAAu2b+Pm>BJ?JDmK4{E@)0fBJXH?9FS5SU_Ran?Y#??S&1J*pXqA?q*T8J z9~Y!o4}H!*$xLX9f$c8~Y+vSjxQLZVuRTu(_MVBSkUz&4EQzKwSNzw$%ndX^X6lph@nd53%V=!#Bjzyn zAc$QV>ie&pK|3_7@k^T@my4Xh0twZHCOjCDSbYRNSs#tde$0YqMxH>_K4*!*_6O65 zW??=+SS+#nJa|w}p&sXiWoL#Wft$$b6se5M@r*}OsV~ESxJU|heH|Cf3_MoxfN1gP z=W!|2SLHvNQmX5#In9odK4(wl)Hd6@9Lsnl1NGIjQ}=cQ!K}dqB;pPyn0+ZDnW%3B zP#`--u`dS`%$qF3$5f^d8*w$k+{!w1Cksa7kwNtrn2m6XoLr&(?KBZi1J_f|^0^L^ zQ>l++KOCa4D4!sK`?Gg6)~0((^(FCOU<&n@m>tcu+{hY%?N8C?dfY)Xnt8d6g#+8) zKskl_9C+|uV)b1DdvDD^gc4WN8O>sR=Igx)ngWM27GXTc~c-&?i6g3g5Fa7gI6-#Ct; zkXrpZd@Pevy*1Jo27Y1{+GeguuQ=~Ae@gX(@X?7WDb#19Z{*|s%jp!@`(Q>#ewkVm zKX6(M^_B3$w=r(S(yYO+F@Aq#)%#T>;zqC+n!97%CEt+d4$1A&bm1Dxk=t*M$AXNC z@e(x)n#E$AyM2LT&lu_xIe}t|_UgNdUAP9hMOfk>i# z7`wezH|ec555aIfl5i7Zw%6(gz12RZO;$woOxkO8gWhU~62eyqV%}b>8}wEiM++ew ziXi6gwYouXwQhvcmEj0t++M32^j2Gn3S5XFhV4sQ-J-YJt5jqr#vzDd`(Kp0L2tEn ziNK`@V%q*{4)Cd4_4f7_k(i!Q2x8j4Jsus+dV5=wh@6HXmhCkLy}dm}WIEClLCo7@ z-y2~f^AUq>5X8Q{MQ^o>h{+QOV%*-Kx7sgsA||si9Ij>=-9dXy*^<#Y)Gl!f4(2Sx_c;?E%0^U)M()Xx_`A$SRoR&lInbWWnG~ryv+#J0 z#Xn_fYQ{G7tdaI`j;2UW>BK2jf6Xs(8#9s%rsp!oRZaUr79v;7#Dxqu)}BZ=7A2Q7 za2Q`1Y4_!9W+vyX#PtlyP= zy#L4E - - -

{{ cardTitle }}

- +
+ + +

{{ cardTitle }}

+ - - - - + + + + + - - - - - + + + + + + + + + +
+ +
+ + 
+Vue.use(VueMaterial)
+
+Vue.material.theme.register('default', {
+  primary: 'blue',
+  accent: 'pink'
+})
+
+var App = new Vue({
+  el: '#app'
+})
+
+ + 
+<div id="app" v-md-theme="'default'">
+  ### TEMPLATE ###
+</div>
+
+
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; }