Fix capitalization in Feature component

src/components/Feature.vue

 <template>
 <ul style="list-style-type:none; padding:8px;">
   <template v-for="(child, name) in root">
-    <li><v-chip label outline small color="blue darken-4">{{underscore(capitalize(name))}}</v-chip>
+    <li><v-chip label outline small color="blue darken-4">{{header(name)}}</v-chip>
       <span v-if="isText(child)"> {{child._text}}</span>
       <ul v-if="isFeature(child)" style="list-style-type:none; padding:5px;">
         <li v-for="attr in child.feature">
           <span v-if="attr._attributes">
             <v-tooltip right>
-              <v-chip label small v-on:click.native="mark(attr.ref)" slot="activator">
+              <v-chip label small v-on:click.native="mark(attr.ref)" slot="activator" :color="background">
                 <span v-if="attr._attributes.category">Category: {{(attr._attributes.category)}}</span>
                 <span v-if="attr._attributes.type">, Type: {{(attr._attributes.type)}}</span>
                 <span v-if="attr._attributes.subtype">, Subtype: {{(attr._attributes.subtype)}}</span>
@@ -17,16 +17,16 @@
           </span>
           <span v-else-if="attr.category">
             <v-tooltip right>
-              <v-chip label small v-on:click.native="mark(attr.ref)" slot="activator">
+              <v-chip label small v-on:click.native="mark(attr.ref)" slot="activator" :color="background">
                 <span v-if="attr.category">Category: {{(attr.category)}}</span>
                 <span v-if="attr.type">, Type: {{(attr.type)}}</span>
                 <span v-if="attr.subtype">, Subtype: {{(attr.subtype)}}</span>
               </v-chip>
-              <span v-if="attr.ref">Lines: {{attr.ref}}</span>
+              <span>Lines: {{attr.ref}}</span>
             </v-tooltip>
           </span>
           <span v-else>
-            <v-chip label small>
+            <v-chip label small :color="background">
               {{cutoff(attr)}}
             </v-chip>
           </span>
@@ -43,16 +43,15 @@ export default {
   // Recursive Component for Features in a Letter
   data () {
     return {
-      data: null
+      data: null,
+      background: 'white'
     }
   },
   methods: {
-    mark (ref) {
-      // console.log(ref)
-    },
     capitalize (str) {
       str = String(str)
-      return str.replace(/\w\S*/g, function (txt) { return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase() })
+      str = str.replace(/\b\w/g, l => l.toUpperCase())
+      return str
     },
     underscore (str) {
       str = String(str)
@@ -62,6 +61,20 @@ export default {
       str = String(str)
       return str.substr(0, 100)
     },
+    umlaut (str) {
+      str = String(str)
+      str = str.replace(/ue/g, 'ü')
+      str = str.replace(/ae/g, 'ä')
+      str = str.replace(/Ae/g, 'Ä')
+      str = str.replace(/oe/g, 'ö')
+      return str
+    },
+    header (str) {
+      str = this.underscore(str)
+      str = this.capitalize(str)
+      str = this.umlaut(str)
+      return str
+    },
     isAttribute (obj) {
       return Object.keys(obj)[0] === '_attributes'
     },