feat: detect model property

closes #654

Author: elevatebart

packages/vue-docgen-api/src/script-handlers/__tests__/propHandler.ts

@@ -377,6 +377,30 @@ describe('propHandler', () => {
 			expect(documentation.getPropDescriptor).not.toHaveBeenCalledWith('value')
 			expect(documentation.getPropDescriptor).toHaveBeenCalledWith('v-model')
 		})
+
+		it('should set the v-model instead of value', () => {
+			const src = `
+        export default {
+		  model:{
+			prop: 'value'
+		  },
+          props: {
+            /**
+             * Value of the field
+             */
+            value: {
+				required: true,
+				type: undefined
+			}
+          }
+        }
+        `
+			tester(src, {
+				description: 'Value of the field'
+			})
+			expect(documentation.getPropDescriptor).not.toHaveBeenCalledWith('value')
+			expect(documentation.getPropDescriptor).toHaveBeenCalledWith('v-model')
+		})
 	})
 
 	describe('@values tag parsing', () => {

packages/vue-docgen-api/src/script-handlers/propHandler.ts

@@ -20,6 +20,8 @@ export default async function propHandler(documentation: Documentation, path: No
 			return
 		}
 
+		const modelPropertyName = getModelPropName(path)
+
 		const propsValuePath = propsPath[0].get('value')
 
 		if (bt.isObjectExpression(propsValuePath.node)) {
@@ -38,9 +40,10 @@ export default async function propHandler(documentation: Documentation, path: No
 				const jsDocTags: BlockTag[] = jsDoc.tags ? jsDoc.tags : []
 
 				// if it's the v-model describe it only as such
-				const propName = jsDocTags.some(t => t.title === 'model')
-					? 'v-model'
-					: propNode.key.name || propNode.key.value
+				const propertyName = propNode.key.name || propNode.key.value
+				const isPropertyModel =
+					jsDocTags.some(t => t.title === 'model') || propertyName === modelPropertyName
+				const propName = isPropertyModel ? 'v-model' : propertyName
 
 				const propDescriptor = documentation.getPropDescriptor(propName)
 
@@ -226,3 +229,33 @@ export function extractValuesFromTags(propDescriptor: PropDescriptor) {
 		delete propDescriptor.tags['values']
 	}
 }
+
+/**
+ * extract the property model.prop from the component object
+ * @param path component NodePath
+ * @returns name of the model prop, null if none
+ */
+function getModelPropName(path: NodePath): string | null {
+	const modelPath = path
+		.get('properties')
+		.filter((p: NodePath) => bt.isObjectProperty(p.node) && getMemberFilter('model')(p))
+
+	if (!modelPath.length) {
+		return null
+	}
+
+	const modelPropertyNamePath =
+		modelPath.length &&
+		modelPath[0]
+			.get('value')
+			.get('properties')
+			.filter((p: NodePath) => bt.isObjectProperty(p.node) && getMemberFilter('prop')(p))
+
+	if (!modelPropertyNamePath.length) {
+		return null
+	}
+
+	const valuePath = modelPropertyNamePath[0].get('value')
+
+	return bt.isStringLiteral(valuePath.node) ? valuePath.node.value : null
+}