Refactor tabs into a data object.

Makes the markup shorter and the tabs object can now more easily be
mutated (if/when needed) for future conditions where they may not
all be available for a certain use case (or hidden optionally to
improve developer focus).

Author: BigBlueHat

playground/next/editor.bundle.js

@@ -39494,6 +39494,17 @@ ${O$2.repeat(r.depth)}}`:r.close="}";break}case f$4.TAG:e+=String(i),e+=a(f$4.PO
       rdfDirection: '',
       safe: ''
     },
+    tabs: {
+      expanded: {icon: 'expanded alternate', label: 'Expanded'},
+      compacted: {icon: 'compress alternate', label: 'Compacted'},
+      flattened: {icon: 'bars', label: 'Flattened'},
+      framed: {icon: 'crop alternate', label: 'Framed'},
+      nquads: {icon: 'rdf-icon-rdf', label: 'N-Quads'},
+      canonized: {icon: 'archive', label: 'Canonized'},
+      table: {icon: 'th', label: 'Table'},
+      yamlld: {icon: 'stream', label: 'YAML-LD'},
+      cborld: {icon: 'robot', label: 'CBOR-LD'}
+    },
     // computed
     get editorColumns() {
       if (['compacted', 'flattened', 'framed'].indexOf(this.outputTab) > -1) {

playground/next/editor.mjs

@@ -169,6 +169,17 @@ window.app = createApp({
     rdfDirection: '',
     safe: ''
   },
+  tabs: {
+    expanded: {icon: 'expanded alternate', label: 'Expanded'},
+    compacted: {icon: 'compress alternate', label: 'Compacted'},
+    flattened: {icon: 'bars', label: 'Flattened'},
+    framed: {icon: 'crop alternate', label: 'Framed'},
+    nquads: {icon: 'rdf-icon-rdf', label: 'N-Quads'},
+    canonized: {icon: 'archive', label: 'Canonized'},
+    table: {icon: 'th', label: 'Table'},
+    yamlld: {icon: 'stream', label: 'YAML-LD'},
+    cborld: {icon: 'robot', label: 'CBOR-LD'}
+  },
   // computed
   get editorColumns() {
     if (['compacted', 'flattened', 'framed'].indexOf(this.outputTab) > -1) {

playground/next/index.html

@@ -267,15 +267,7 @@ <h2 class="ui massive header">JSON-LD Playground</h2>
   <div class="ui error message" v-show="parseError" v-text="parseError"></div>
   <!-- outputs and renderings -->
   <div class="ui top attached tabular menu">
-    <div :class="{ active: outputTab == 'expanded' }" class="item" @click="setOutputTab('expanded')"><i class="expand alternate icon"></i> Expanded</div>
-    <div :class="{ active: outputTab == 'compacted' }" class="item" @click="setOutputTab('compacted')"><i class="compress alternate icon"></i> Compacted</div>
-    <div :class="{ active: outputTab == 'flattened' }" class="item" @click="setOutputTab('flattened')"><i class="bars icon"></i> Flattened</div>
-    <div :class="{ active: outputTab == 'framed' }" class="item" @click="setOutputTab('framed')"><i class="crop alternate icon"></i> Framed</div>
-    <div :class="{ active: outputTab == 'nquads' }" class="item" @click="setOutputTab('nquads')"><i class="rdf-icon-rdf icon"></i> N-Quads</div>
-    <div :class="{ active: outputTab == 'canonized' }" class="item" @click="setOutputTab('canonized')"><i class="archive icon"></i> Canonized</div>
-    <div :class="{ active: outputTab == 'table' }" class="item" @click="setOutputTab('table')"><i class="th icon"></i> Table</div>
-    <div :class="{ active: outputTab == 'yamlld' }" class="item" @click="setOutputTab('yamlld')"><i class="stream icon"></i> YAML-LD</div>
-    <div :class="{ active: outputTab == 'cborld' }" class="item" @click="setOutputTab('cborld')"><i class="robot icon"></i> CBOR-LD</div>
+    <div v-for="(tab, key) in tabs" :class="{ active: outputTab == key }" class="item" @click="setOutputTab(key)"><i class="icon" :class="tab.icon"></i> <span v-text="tab.label"></span></div>
   </div>
   <div class="ui fitted resizable scrolling active bottom attached tab segment">
     <div class="ui grid">