Fix v-bind expression (#212)

closes #212

src/printer.ts

@@ -81,7 +81,13 @@ import {
 	unwrapLineFeeds
 } from './utils/common';
 import { isSvelteInterpolation } from './utils/svelte';
-import { isVueEventBinding, isVueExpression, isVueVForWithOf, isVueVOnExpression } from './utils/vue';
+import {
+	isVueEventBinding,
+	isVueExpression,
+	isVueVBindExpression,
+	isVueVForWithOf,
+	isVueVOnExpression
+} from './utils/vue';
 
 const logger: Logger = createLogger(console);
 if (process.env.NODE_ENV === 'test') {
@@ -862,6 +868,8 @@ export class PugPrinter {
 				val = this.formatVueExpression(val);
 			} else if (isVueEventBinding(token.name)) {
 				val = this.formatVueEventBinding(val);
+			} else if (isVueVBindExpression(token.name)) {
+				val = this.formatDelegatePrettier(val, '__js_expression');
 			} else if (isVueVOnExpression(token.name)) {
 				val = this.formatDelegatePrettier(val, '__js_expression');
 			} else if (isAngularBinding(token.name)) {

src/utils/vue.ts

@@ -79,6 +79,31 @@ export function isVueVForWithOf(name: string, val: string): boolean {
 	return 'v-for' === name && val.includes('of');
 }
 
+/**
+ * Indicates whether the attribute name is a Vue v-bind.
+ *
+ * ---
+ *
+ * Example expression:
+ * ```
+ * v-btn(v-bind="$attrs")
+ * ```
+ *
+ * In this case `name` is `v-bind`.
+ *
+ * ---
+ *
+ * Checks for: `v-bind`.
+ *
+ * ---
+ *
+ * @param name Name of tag attribute.
+ * @returns `true` if `name` passes the vue `v-bind` check, otherwise `false`.
+ */
+export function isVueVBindExpression(name: string): boolean {
+	return 'v-bind' === name;
+}
+
 /**
  * Indicates whether the attribute name is a Vue v-on.
  *

tests/frameworks/vue/v-bind/formatted.pug

@@ -1,3 +1,4 @@
+a(v-bind="{ ...$attrs }") ...
 a(v-bind:href="url") ...
 a(:href="url") ...
 a(:[key]="url") ...

tests/frameworks/vue/v-bind/unformatted.pug

@@ -1,3 +1,4 @@
+a(v-bind="{  ...$attrs  }") ...
 a(v-bind:href="  url ") ...
 a(:href="  url ") ...
 a(:[key]="  url ") ...