From a5c9f7e0cff5f6d34459cd6ea1160e26c3647ab3 Mon Sep 17 00:00:00 2001
From: yemai <node_github@163.com>
Date: Tue, 18 Jun 2019 12:10:13 +0800
Subject: [PATCH] chore: add option to highlight vue attr differently

---
 README.md           |  3 ++-
 syntax/vue-html.vim | 45 +++++++++++++++++++++++++++++++++++++--------
 2 files changed, 39 insertions(+), 9 deletions(-)

diff --git a/README.md b/README.md
index 7613732..12f8359 100644
--- a/README.md
+++ b/README.md
@@ -51,8 +51,9 @@ Ex:
 | `g:vim_vue_plugin_use_pug`\*          | Enable `vim-pug` pug syntax for `<template lang="pug">`.                                               | 0 |
 | `g:vim_vue_plugin_use_less`           | Enable less syntax for `<style lang="less">`.                                                          | 0 |
 | `g:vim_vue_plugin_use_sass`           | Enable sass/scss syntax for `<style lang="sass">`(or scss).                                            | 0 |
-| `g:vim_vue_plugin_debug`              | Echo debug message in `messages` list. Useful to debug if unexpendted indents occur.                   | 0 |
 | `g:vim_vue_plugin_has_init_indent`    | Initially indent one tab inside `style/script` tags.                                                   | 0 for `.vue`. 1 for `.wpy` |
+| `g:vim_vue_plugin_highlight_vue_attr` | Highlight vue attributes differently.                                                                   | 1 |
+| `g:vim_vue_plugin_debug`              | Echo debug message in `messages` list. Useful to debug if unexpendted indents occur.                   | 0 |
 
 \*: Vim may be slow if the feature is enabled. Find a balance between syntax highlight and speed. By the way, custom syntax could be added in `~/.vim/syntax` or `$VIM/vimfiles/syntax`.
 
diff --git a/syntax/vue-html.vim b/syntax/vue-html.vim
index 3da9572..2a12145 100644
--- a/syntax/vue-html.vim
+++ b/syntax/vue-html.vim
@@ -1,13 +1,29 @@
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+"
+" Config {{{
+"
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+let s:highlight_vue_attr = !exists("g:vim_vue_plugin_highlight_vue_attr")
+      \ || g:vim_vue_plugin_highlight_vue_attr == 1
+")}}}
+
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+"
+" Syntax highlight {{{
+"
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
 syntax match VueComponentName containedin=htmlTagN '\v\C<[a-z0-9]+(-[a-z0-9]+)+>'
 syntax match VueComponentName containedin=htmlTagN '\v\C<([A-Z][a-zA-Z0-9]+)+>'
 
 syntax match VueAttr '\v(\S)@<![v:\@][^\=]*(\=\"[^"]*\")?' 
       \ containedin=htmlTag 
-      \ contains=VueKey,VueValue
+      \ contains=VueKey,VueQuote
 
 syntax match VueKey contained '\v[v:\@][^\=]+'
+syntax region VueQuote contained 
+      \ start='"' end='"' contains=VueValue
 syntax match VueValue contained '\v\"\zs[^"]*\ze\"'
-      \ contains=VueInject,javaScriptStringS,javaScriptRepeat
+      \ contains=VueInject,javaScriptStringS,javaScriptRepeat,javaScriptOperator
 
 syntax match VueInject contained '\v\$\w*'
 
@@ -27,20 +43,33 @@ syntax region VueExpression
 " Wepy directive syntax
 syntax match VueAttr '\v(\S)@<!wx[^\=]+(\=\"[^"]*\")?'
       \ containedin=htmlTag  
-      \ contains=VueKey,VueValue,VueInject
+      \ contains=VueKey,VueQuote
 
 syntax match VueKey contained '\vwx[^\=]+'
 syntax match VueCustomTag containedin=htmlTagN '\v<(view|text|block|image)>'
 
-syn region  javaScriptStringS	start=+'+  skip=+\\\\\|\\'+  end=+'\|$+	contains=javaScriptSpecial,@htmlPreproc
-syn keyword javaScriptRepeat while for do in
+syn region  javaScriptStringS	
+      \ start=+'+  skip=+\\\\\|\\'+  end=+'\|$+	contained
+syn region  javaScriptStringD	
+      \ start=+"+  skip=+\\\\\|\\"+  end=+"\|$+	contained
+syn keyword javaScriptRepeat in contained
+syn match javaScriptOperator '[\!\|\&\+\-\<\>\=\%\/\*\~\^]\{1}' contained
 
-highlight default link VueAttr Comment
-highlight default link VueKey  Type
-highlight default link VueValue  Function
+highlight default link VueAttr htmlTag
+if s:highlight_vue_attr
+  highlight default link VueKey Type
+  highlight default link VueQuote VueAttr
+  highlight default link VueValue Function
+else
+  highlight default link VueKey htmlArg
+  highlight default link VueQuote String
+  highlight default link VueValue String
+endif
 highlight default link VueInject Constant
 highlight default link VueBrace Type
 highlight default link VueComponentName Statement
 highlight default link VueCustomTag Statement
 highlight default link javaScriptRepeat	Statement
 highlight default link javaScriptStringS String
+"}}}
+" vim: fdm=marker