From e52c922315bead113ab665ff3edc87269a526ed1 Mon Sep 17 00:00:00 2001
From: ManjaroOne666 <git@gabbaell.co.uk>
Date: Wed, 28 Mar 2018 00:12:03 +0100
Subject: [PATCH] vue class directive objects

---
 vim/after/syntax/vue.vim | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/vim/after/syntax/vue.vim b/vim/after/syntax/vue.vim
index d3c9603..a77fe4a 100644
--- a/vim/after/syntax/vue.vim
+++ b/vim/after/syntax/vue.vim
@@ -2,17 +2,22 @@ runtime! after/syntax/html.vim
 
 syn keyword vueComponentTag     contained template containedin=htmlSpecialTagName
 
-syn match   vueDirective "\(^\|\s\)\zs[v:][-:.0-9_a-z]*"   containedin=htmlTag,htmlTagN contains=vueDirectiveClassValue nextgroup=vueDirectiveValue
+syn match   vueDirective "\(^\|\s\)\zs[v:][-:.0-9_a-z]*"   containedin=htmlTag,htmlTagN contains=vueDirectiveClass nextgroup=vueDirectiveValue
 syn match   vueEvent        "\(^\|\s\)\zs[@][-:.0-9_a-z]*" containedin=htmlTag,htmlTagN nextgroup=vueEventValue
 syn match   vueConditional  "\<v-else"                     containedin=htmlTag,htmlTagN
 syn match   vueConditional  "\<v-if\|\<v-show"             containedin=htmlTag,htmlTagN nextgroup=vueConditionalValue
 syn match   vueFor          "\<v-for"                      containedin=htmlTag,htmlTagN nextgroup=vueForValue
 syn match   vueRef          "\(^\|\s\)\zs:\?ref"           containedin=htmlTag,htmlTagN nextgroup=vueRefValue
 
-syn region vueDirectiveClassValue contained start=+class="+hs=s+7 end=+"+he=e-1
-syn region vueDirectiveClassValue contained start=+class='+hs=s+7 end=+'+he=e-1
-syn region vueDirectiveValue      contained start=+="+hs=s+2 end=+"+he=e-1
-syn region vueDirectiveValue      contained start=+='+hs=s+2 end=+'+he=e-1
+syn region vueDirectiveClass      contained start=+class="+hs=s+7 end=+"+he=e-1 contains=vueObjectKey
+" syn region vueDirectiveValue      contained start=+="+hs=s+2 end=+"+he=e-1
+" syn region vueDirectiveValue      contained start=+='+hs=s+2 end=+'+he=e-1
+
+syntax match   vueObjectKey         contained /\<\k*\ze\s*:/ contains=jsFunctionKey skipwhite skipempty nextgroup=vueObjectValue
+syntax region  vueObjectKey   contained start=+\z([']\)+hs=s+1  skip=+\\\%(\z1\|$\)+  end=+\z1\|$+he=e-1  contains=jsSpecial,@Spell skipwhite skipempty nextgroup=vueObjectValue
+syntax region  vueObjectValue       contained matchgroup=jsNoise start=/:/ end=/[,}]\@=/ contains=@jsExpression extend
+" TODO match vueObjectValue with a javascript expression
+
 syn region vueEventValue          contained start=+="+hs=s+2 end=+"+he=e-1
 syn region vueEventValue          contained start=+='+hs=s+2 end=+'+he=e-1
 syn region vueConditionalValue    contained start=+="+hs=s+2 end=+"+he=e-1
@@ -41,3 +46,6 @@ syn region vueClassesName contained start=+"+hs=s+1 end=+"+he=e-1
 
 hi def link cssClassesAttr cssClassAttr
 hi def link vueClassesname cssClassName
+hi def link vueObjectKey   cssClassName
+hi def link vueDirectiveClass Noise
+hi def link vueDirectiveClassName vueClassesName