Merge pull request #3 from vuejs/master

Sync

Author: mazipan

src/images/logo-vuemastery.svg

@@ -509,6 +509,15 @@ type: api
 
   A list/hash of attributes that are exposed to accept data from the parent component. It has an Array-based simple syntax and an alternative Object-based syntax that allows advanced configurations such as type checking, custom validation and default values.
 
+  With Object-based syntax, you can use following options:
+    - **type:** can be one of the following native constructors: `String`, `Number`, `Boolean`, `Array`, `Object`, `Date`, `Function`, `Symbol`, any custom constructor function or an array of those. Will check if a prop has a given type, and will throw a warning if it doesn't. [More information](../guide/components-props.html#Prop-Types) on prop types.
+    - **default:** `any`
+    Specifies a default value for the prop. If the prop is not passed, this value will be used instead. Object or array defaults must be returned from a factory function.
+    - **required:** `Boolean`
+    Defines if the prop is required. In a non-production environment, a console warning will be thrown if this value is truthy and the prop is not passed.
+    - **validator:** `Function`
+    Custom validator function that takes the prop value as the sole argument. In a non-production environment, a console warning will be thrown if this function returns a falsy value (i.e. the validation fails). You can read more about prop validation [here](../guide/components-props.html#Prop-Validation).
+
 - **Example:**
 
   ``` js
@@ -535,7 +544,7 @@ type: api
   })
   ```
 
-- **See also:** [Props](../guide/components.html#Props)
+- **See also:** [Props](../guide/components-props.html)
 
 ### propsData
 

src/v2/api/index.md

@@ -0,0 +1,116 @@
+---
+title: Themes
+type: examples
+is_new: true
+order: 13
+---
+> With the examples below built by our partners from [Creative Tim](https://creative-tim.com?affiliate_id=116187) you can see how a real world application is built, the technology stack behind it and how most of the concepts you've learned so far apply in a real world application. 
+
+{% raw %}
+<div id="themes-example" class="themes-grid">
+   <div v-for="product in products" :key="product.name" class="item-preview">
+     <a class="item-preview-img" :href="`https://www.creative-tim.com/product/${product.name}?affiliate_id=${affiliateId}`" rel="nofollow">
+     <img :src="`https://raw.githubusercontent.com/creativetimofficial/public-assets/master/${product.name}/${product.name}.jpg`" :alt="`${product.title} - ${product.description}`"></a>
+     <div class="item-preview-title-container">
+      <h3 :id="product.name" data-type="theme-product-title" class="item-preview-title" :class="{'free': product.free}">{{product.title}}</h3>
+      <b v-if="product.price" class="item-preview-price">{{product.price}}$</b>
+     </div>
+     <div class="item-preview-description">{{product.description}}</div>
+   </div>
+   <div class="see-more-container">
+    <a :href="`https://www.creative-tim.com/bootstrap-themes/vuejs-themes?affiliate_id=${affiliateId}`"
+       class="button white see-more-link">
+       See More Themes
+    </a>
+   </div>
+</div>
+<script>
+new Vue({
+  el: '#themes-example',
+  data: {
+    affiliateId: 116187,
+    products: [
+      {
+        name: 'vue-argon-design-system',
+        title: 'Vue Argon Design System',
+        free: true,
+        description: 'Free Vue.js Design System'
+      },
+      {
+        name: 'vue-black-dashboard-pro',
+        title: 'Vue Black Dashboard Pro',
+        free: false,
+        price: 59,
+        description: 'Premium Vue.js Admin Template'
+      },
+      {
+        name: 'vue-paper-dashboard-2-pro',
+        title: 'Vue Paper Dashboard 2 Pro',
+        free: false,
+        price: 59,
+        description: 'Premium Vue.js Admin Template'
+      },
+      {
+        name: 'vue-material-kit',
+        title: 'Vue Material Kit',
+        free: true,
+        description: 'Free Vue.js UI Kit'
+      },
+      {
+        name: 'vue-black-dashboard',
+        title: 'Vue Black Dashboard',
+        free: true,
+        description: 'Free Vue.js Admin Template'
+      },
+      {
+        name: 'vue-now-ui-kit-pro',
+        title: 'Vue Now UI Kit Pro',
+        free: false,
+        price: 79,
+        description: 'Premium Vue.js UI Kit'
+      },
+      {
+        name: 'vue-now-ui-dashboard-pro',
+        title: 'Vue Now UI Dashboard Pro',
+        free: false,
+        price: 59,
+        description: 'Premium Vue.js Admin Template'
+      },
+      {
+        name: 'vue-now-ui-kit',
+        title: 'Vue Now UI Kit',
+        free: true,
+        description: 'Free Vue.js UI Kit'
+      },
+      {
+        name: 'vue-light-bootstrap-dashboard-pro',
+        title: 'Vue Light Bootstrap Dashboard Pro',
+        free: false,
+        price: 49,
+        description: 'Premium Vue.js Admin Template'
+      },
+      {
+        name: 'vue-material-dashboard-pro',
+        title: 'Vue Material Dashboard Pro',
+        free: false,
+        price: 59,
+        description: 'Premium Vue.js Admin Template'
+      },
+      {
+        name: 'vue-material-kit-pro',
+        title: 'Vue Material Kit Pro',
+        free: false,
+        price: 89,
+        description: 'Premium Vue.js UI Kit'
+      },
+      {
+        name: 'vue-light-bootstrap-dashboard',
+        title: 'Vue Light Bootstrap Dashboard',
+        free: true,
+        description: 'Free Vue.js Admin Template'
+      }
+    ]
+  }
+})
+</script>
+{% endraw %}

src/v2/examples/themes.md

@@ -41,7 +41,9 @@ props: {
   likes: Number,
   isPublished: Boolean,
   commentIds: Array,
-  author: Object
+  author: Object,
+  callback: Function,
+  contactsPromise: Promise // or any other constructor
 }
 ```
 

src/v2/guide/components-props.md

@@ -207,11 +207,15 @@ requireComponent.keys().forEach(fileName => {
   // Get PascalCase name of component
   const componentName = upperFirst(
     camelCase(
-      // Strip the leading `./` and extension from the filename
-      fileName.replace(/^\.\/(.*)\.\w+$/, '$1')
+      // Gets the file name regardless of folder depth
+      fileName
+        .split('/')
+        .pop()
+        .replace(/\.\w+$/, '')
     )
   )
 
+
   // Register component globally
   Vue.component(
     componentName,

src/v2/guide/components-registration.md

@@ -332,15 +332,15 @@ That means the value of `v-slot` can actually accept any valid JavaScript expres
 This can make the template much cleaner, especially when the slot provides many props. It also opens other possibilities, such as renaming props, e.g. `user` to `person`:
 
 ``` html
-<current-user v-slot="{ user: person }">>
+<current-user v-slot="{ user: person }">
   {{ person.firstName }}
 </current-user>
 ```
 
 You can even define fallbacks, to be used in case a slot prop is undefined:
 
 ``` html
-<current-user v-slot="{ user = { firstName: 'Guest' } }">>
+<current-user v-slot="{ user = { firstName: 'Guest' } }">
   {{ user.firstName }}
 </current-user>
 ```

src/v2/guide/components-slots.md

@@ -441,6 +441,8 @@ Similar to template `v-if`, you can also use a `<template>` tag with `v-for` to
 
 ## `v-for` with `v-if`
 
+<p class="tip">Note that it's **not** recommended to use `v-if` and `v-for` together. Refer to [style guide](/v2/style-guide/#Avoid-v-if-with-v-for-essential) for details.</p>
+
 When they exist on the same node, `v-for` has a higher priority than `v-if`. That means the `v-if` will be run on each iteration of the loop separately. This can be useful when you want to render nodes for only _some_ items, like below:
 
 ``` html

src/v2/guide/list.md

@@ -154,7 +154,7 @@ Dynamic arguments are expected to evaluate to a string, with the exception of `n
 
 #### Dynamic Argument Expression Constraints
 
-<p class="tip">Dynamic argument expressions have some syntax constraints because certain characters are invalid inside HTML attribute names, such as spaces and quotes.</p>
+<p class="tip">Dynamic argument expressions have some syntax constraints because certain characters are invalid inside HTML attribute names, such as spaces and quotes. You also need to avoid uppercase keys when using in-DOM templates.</p>
 
 For example, the following is invalid:
 
@@ -165,6 +165,13 @@ For example, the following is invalid:
 
 The workaround is to either use expressions without spaces or quotes, or replace the complex expression with a computed property.
 
+In addition, if you are using in-DOM templates (templates directly written in an HTML file), you have to be aware that browsers will coerce attribute names into lowercase:
+
+``` html
+<!-- This will be converted to v-bind:[someattr] in in-DOM templates. -->
+<a v-bind:[someAttr]="value"> ... </a>
+```
+
 ### Modifiers
 
 Modifiers are special postfixes denoted by a dot, which indicate that a directive should be bound in some special way. For example, the `.prevent` modifier tells the `v-on` directive to call `event.preventDefault()` on the triggered event:

src/v2/guide/syntax.md

@@ -764,7 +764,7 @@ order: 803
     {
       name: 'James McGlasson',
       title: 'Head of Marketing Communications',
-      imageUrl: 'https://media.licdn.com/dms/image/C4E03AQHxi_fy33l5Mg/profile-displayphoto-shrink_800_800/0?e=1550707200&v=beta&t=6kPVnuYMxbxR_oAz3rdAeuDB-S8Om8e5W3zwbcH0dQI',
+      imageUrl: 'https://media.licdn.com/dms/image/C4E03AQHxi_fy33l5Mg/profile-displayphoto-shrink_800_800/0?e=1556150400&v=beta&t=KADJ_7nuWuYFPQaKtK7QuI96iC0gPKc198GZ-_dXr_0',
       city: 'Amsterdam, Netherlands',
       languages: ['en', 'nl', 'de'],
       work: {
@@ -797,9 +797,13 @@ order: 803
       title: 'Fox Tech Guru',
       city: 'Kyiv, Ukraine',
       languages: ['uk', 'ru', 'en'],
+      reposOfficial: [
+        'vuejs.org'
+      ],
       work: {
-        role: 'CTO',
-        org: 'Vue Vixens',
+        role: 'Senior Frontend Engineer',
+        org: 'GitLab',
+        orgUrl: 'https://gitlab.com/'
       },
       github: 'NataliaTepluhina',
       twitter: 'N_Tepluhina',

src/v2/guide/team.md

@@ -72,7 +72,8 @@ gold_sponsors:
   - url: 'https://webdock.io/en'
     img: webdock.png
     name: Webdock
-  - url: 'https://syncfusion.com/products/vue'
+  - url: >-
+      http://www.syncfusion.com/?utm_source=vuejs&utm_medium=list&utm_campaign=vuejsjslistcy19
     img: syncfusion.png
     name: SyncFusion
   - url: 'https://opteo.com/vue'

themes/vue/_config.yml

@@ -78,7 +78,6 @@
     <script type="text/javascript" defer="defer" src="https://extend.vimeocdn.com/ga/72160148.js"></script>
   </head>
   <body class="<%- isIndex ? '' : 'docs' -%>">
-    <%- partial('partials/vuemastery_banner.ejs') %>
     <div id="mobile-bar" <%- isIndex ? 'class="top"' : '' %>>
       <a class="menu-button"></a>
       <a class="logo" href="/"></a>