Merge branch 'pulls/33'

Author: karol-f

demo/components/DemoLazyLoading-docs.vue

@@ -23,7 +23,7 @@
 
         <p>Instead of component object we will use function with returned Promise. You can use Webpack's <code>require.ensure()</code> or any other async method to load component.</p>
 
-        <p>One note - Custom Elements v1 spec require defining observed props during registration. That's why if you omit them, attributes won't be reactive, and changing them from outside (HTML attributes or JavaScript) won't work.</p>
+        <p>One note - Custom Elements v1 spec require defining observed props during registration. That's why if you omit them, attributes won't be reactive, and changing them from outside (HTML attributes or JavaScript) won't work. This also concerns props added by <code>mixins</code> and <code>extends</code></p>
       </el-collapse-item>
       <el-collapse-item title="Custom Element HTML" name="2">
         <pre><code class="language-html">

src/utils/props.js

@@ -21,6 +21,20 @@ export function convertAttributeValue(value) {
   return propsValue;
 }
 
+function extractProps(collection, props) {
+  if (collection && collection.length) {
+    collection.forEach((prop) => {
+      const camelCaseProp = camelize(prop);
+      props.camelCase.indexOf(camelCaseProp) === -1 && props.camelCase.push(camelCaseProp);
+    });
+  } else if (collection && typeof collection === 'object') {
+    for (const prop in collection) { // eslint-disable-line no-restricted-syntax, guard-for-in
+      const camelCaseProp = camelize(prop);
+      props.camelCase.indexOf(camelCaseProp) === -1 && props.camelCase.push(camelCaseProp);
+    }
+  }
+}
+
 /**
  * Extract props from component definition, no matter if it's array or object
  * @param componentDefinition
@@ -32,16 +46,21 @@ export function getProps(componentDefinition = {}) {
     hyphenate: []
   };
 
-  if (componentDefinition.props && componentDefinition.props.length) {
-    componentDefinition.props.forEach((prop) => {
-      props.camelCase.push(camelize(prop));
+
+  if (componentDefinition.mixins) {
+    componentDefinition.mixins.forEach((mixin) => {
+      extractProps(mixin.props, props);
     });
-  } else if (componentDefinition.props && typeof componentDefinition.props === 'object') {
-    for (const prop in componentDefinition.props) { // eslint-disable-line no-restricted-syntax, guard-for-in
-      props.camelCase.push(camelize(prop));
-    }
   }
 
+  if (componentDefinition.extends && componentDefinition.extends.props) {
+    const { props: parentProps } = componentDefinition.extends;
+
+    extractProps(parentProps, props);
+  }
+
+  extractProps(componentDefinition.props, props);
+
   props.camelCase.forEach((prop) => {
     props.hyphenate.push(hyphenate(prop));
   });