@mongoosejs/studio 0.0.21 → 0.0.22

package/frontend/public/images/json.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="#000000"><path fill-rule="evenodd" clip-rule="evenodd" d="M6 2.984V2h-.09c-.313 0-.616.062-.909.185a2.33 2.33 0 0 0-.775.53 2.23 2.23 0 0 0-.493.753v.001a3.542 3.542 0 0 0-.198.83v.002a6.08 6.08 0 0 0-.024.863c.012.29.018.58.018.869 0 .203-.04.393-.117.572v.001a1.504 1.504 0 0 1-.765.787 1.376 1.376 0 0 1-.558.115H2v.984h.09c.195 0 .38.04.556.121l.001.001c.178.078.329.184.455.318l.002.002c.13.13.233.285.307.465l.001.002c.078.18.117.368.117.566 0 .29-.006.58-.018.869-.012.296-.004.585.024.87v.001c.033.283.099.558.197.824v.001c.106.273.271.524.494.753.223.23.482.407.775.53.293.123.596.185.91.185H6v-.984h-.09c-.2 0-.387-.038-.563-.115a1.613 1.613 0 0 1-.457-.32 1.659 1.659 0 0 1-.309-.467c-.074-.18-.11-.37-.11-.573 0-.228.003-.453.011-.672.008-.228.008-.45 0-.665a4.639 4.639 0 0 0-.055-.64 2.682 2.682 0 0 0-.168-.609A2.284 2.284 0 0 0 3.522 8a2.284 2.284 0 0 0 .738-.955c.08-.192.135-.393.168-.602.033-.21.051-.423.055-.64.008-.22.008-.442 0-.666-.008-.224-.012-.45-.012-.678a1.47 1.47 0 0 1 .877-1.354 1.33 1.33 0 0 1 .563-.121H6zm4 10.032V14h.09c.313 0 .616-.062.909-.185.293-.123.552-.3.775-.53.223-.23.388-.48.493-.753v-.001c.1-.266.165-.543.198-.83v-.002c.028-.28.036-.567.024-.863-.012-.29-.018-.58-.018-.869 0-.203.04-.393.117-.572v-.001a1.502 1.502 0 0 1 .765-.787 1.38 1.38 0 0 1 .558-.115H14v-.984h-.09c-.196 0-.381-.04-.557-.121l-.001-.001a1.376 1.376 0 0 1-.455-.318l-.002-.002a1.415 1.415 0 0 1-.307-.465v-.002a1.405 1.405 0 0 1-.118-.566c0-.29.006-.58.018-.869a6.174 6.174 0 0 0-.024-.87v-.001a3.537 3.537 0 0 0-.197-.824v-.001a2.23 2.23 0 0 0-.494-.753 2.331 2.331 0 0 0-.775-.53 2.325 2.325 0 0 0-.91-.185H10v.984h.09c.2 0 .387.038.562.115.174.082.326.188.457.32.127.134.23.29.309.467.074.18.11.37.11.573 0 .228-.003.452-.011.672-.008.228-.008.45 0 .665.004.222.022.435.055.64.033.214.089.416.168.609a2.285 2.285 0 0 0 .738.955 2.285 2.285 0 0 0-.738.955 2.689 2.689 0 0 0-.168.602c-.033.21-.051.423-.055.64a9.15 9.15 0 0 0 0 .666c.008.224.012.45.012.678a1.471 1.471 0 0 1-.877 1.354 1.33 1.33 0 0 1-.563.121H10z"/></svg>

package/frontend/public/images/table.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5f6368"><path d="M120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200q-33 0-56.5-23.5T120-200Zm80-400h560v-160H200v160Zm213 200h134v-120H413v120Zm0 200h134v-120H413v120ZM200-400h133v-120H200v120Zm427 0h133v-120H627v120ZM200-200h133v-120H200v120Zm427 0h133v-120H627v120Z"/></svg>

package/frontend/public/tw.css

@@ -578,6 +578,22 @@ video {
   }
 }
 
+.relative {
+  position: relative;
+}
+
+.isolate {
+  isolation: isolate;
+}
+
+.m-0 {
+  margin: 0px;
+}
+
+.-ml-px {
+  margin-left: -1px;
+}
+
 .mb-1 {
   margin-bottom: 0.25rem;
 }
@@ -586,10 +602,6 @@ video {
   margin-bottom: 0.5rem;
 }
 
-.mr-2 {
-  margin-right: 0.5rem;
-}
-
 .mt-4 {
   margin-top: 1rem;
 }
@@ -606,26 +618,62 @@ video {
   display: flex;
 }
 
+.inline-flex {
+  display: inline-flex;
+}
+
 .table {
   display: table;
 }
 
+.h-5 {
+  height: 1.25rem;
+}
+
 .h-\[calc\(100vh-55px\)\] {
   height: calc(100vh - 55px);
 }
 
+.h-full {
+  height: 100%;
+}
+
+.w-5 {
+  width: 1.25rem;
+}
+
+.w-full {
+  width: 100%;
+}
+
 .flex-1 {
   flex: 1 1 0%;
 }
 
+.flex-grow {
+  flex-grow: 1;
+}
+
 .grow {
   flex-grow: 1;
 }
 
+.flex-row {
+  flex-direction: row;
+}
+
 .flex-col {
   flex-direction: column;
 }
 
+.items-center {
+  align-items: center;
+}
+
+.gap-2 {
+  gap: 0.5rem;
+}
+
 .gap-y-5 {
   row-gap: 1.25rem;
 }
@@ -646,6 +694,28 @@ video {
   border-radius: 0.375rem;
 }
 
+.rounded-none {
+  border-radius: 0px;
+}
+
+.rounded-l-md {
+  border-top-left-radius: 0.375rem;
+  border-bottom-left-radius: 0.375rem;
+}
+
+.rounded-r-md {
+  border-top-right-radius: 0.375rem;
+  border-bottom-right-radius: 0.375rem;
+}
+
+.border {
+  border-width: 1px;
+}
+
+.border-b-2 {
+  border-bottom-width: 2px;
+}
+
 .border-r {
   border-right-width: 1px;
 }
@@ -655,19 +725,23 @@ video {
   border-color: rgb(229 231 235 / var(--tw-border-opacity));
 }
 
-.bg-green-600 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(22 163 74 / var(--tw-bg-opacity));
+.border-teal-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(0 208 201 / var(--tw-border-opacity));
+}
+
+.border-transparent {
+  border-color: transparent;
 }
 
-.bg-puerto-rico-100 {
+.bg-gray-200 {
   --tw-bg-opacity: 1;
-  background-color: rgb(198 255 243 / var(--tw-bg-opacity));
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
 }
 
-.bg-puerto-rico-600 {
+.bg-green-600 {
   --tw-bg-opacity: 1;
-  background-color: rgb(0 164 145 / var(--tw-bg-opacity));
+  background-color: rgb(22 163 74 / var(--tw-bg-opacity));
 }
 
 .bg-red-600 {
@@ -685,6 +759,16 @@ video {
   background-color: rgb(71 85 105 / var(--tw-bg-opacity));
 }
 
+.bg-teal-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(197 255 250 / var(--tw-bg-opacity));
+}
+
+.bg-teal-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 168 165 / var(--tw-bg-opacity));
+}
+
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -694,6 +778,15 @@ video {
   padding: 0.25rem;
 }
 
+.p-2 {
+  padding: 0.5rem;
+}
+
+.px-1 {
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+}
+
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -727,6 +820,15 @@ video {
   padding-right: 0.5rem;
 }
 
+.pt-1 {
+  padding-top: 0.25rem;
+}
+
+.text-lg {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
+
 .text-sm {
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -736,15 +838,34 @@ video {
   font-weight: 700;
 }
 
+.font-medium {
+  font-weight: 500;
+}
+
 .font-semibold {
   font-weight: 600;
 }
 
+.text-gray-400 {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity));
+}
+
+.text-gray-500 {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity));
+}
+
 .text-gray-700 {
   --tw-text-opacity: 1;
   color: rgb(55 65 81 / var(--tw-text-opacity));
 }
 
+.text-gray-900 {
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity));
+}
+
 .text-sky-800 {
   --tw-text-opacity: 1;
   color: rgb(7 89 133 / var(--tw-text-opacity));
@@ -761,6 +882,25 @@ video {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.outline-gray-300 {
+  outline-color: #d1d5db;
+}
+
+.ring-1 {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.ring-inset {
+  --tw-ring-inset: inset;
+}
+
+.ring-gray-300 {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
+}
+
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
@@ -773,19 +913,19 @@ video {
   transition-duration: 150ms;
 }
 
-.hover\:bg-green-500:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(34 197 94 / var(--tw-bg-opacity));
+.hover\:border-gray-300:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(209 213 219 / var(--tw-border-opacity));
 }
 
-.hover\:bg-puerto-rico-100:hover {
+.hover\:bg-gray-50:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(198 255 243 / var(--tw-bg-opacity));
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-puerto-rico-500:hover {
+.hover\:bg-green-500:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(0 204 176 / var(--tw-bg-opacity));
+  background-color: rgb(34 197 94 / var(--tw-bg-opacity));
 }
 
 .hover\:bg-red-500:hover {
@@ -798,6 +938,25 @@ video {
   background-color: rgb(100 116 139 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-teal-100:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(197 255 250 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-teal-500:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 208 201 / var(--tw-bg-opacity));
+}
+
+.hover\:text-gray-700:hover {
+  --tw-text-opacity: 1;
+  color: rgb(55 65 81 / var(--tw-text-opacity));
+}
+
+.focus\:z-10:focus {
+  z-index: 10;
+}
+
 .focus-visible\:outline:focus-visible {
   outline-style: solid;
 }
@@ -814,14 +973,30 @@ video {
   outline-color: #16a34a;
 }
 
-.focus-visible\:outline-puerto-rico-600:focus-visible {
-  outline-color: #00a491;
-}
-
 .focus-visible\:outline-red-600:focus-visible {
   outline-color: #dc2626;
 }
 
 .focus-visible\:outline-slate-600:focus-visible {
   outline-color: #475569;
+}
+
+.focus-visible\:outline-teal-600:focus-visible {
+  outline-color: #00a8a5;
+}
+
+@media (min-width: 640px) {
+  .sm\:ml-6 {
+    margin-left: 1.5rem;
+  }
+
+  .sm\:flex {
+    display: flex;
+  }
+
+  .sm\:space-x-8 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-x-reverse: 0;
+    margin-right: calc(2rem * var(--tw-space-x-reverse));
+    margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
+  }
 }

package/frontend/src/api.js

@@ -19,10 +19,18 @@ if (typeof config__setAuthorizationHeaderFrom === 'string' && config__setAuthori
 }
 
 if (config__isLambda) {
+  exports.Dashboard = {
+    getDashboards(params) {
+      return client.post('', { action: 'Dashboard.getDashboards', ...params }).then(res => res.data);
+    }
+  }
   exports.Model = {
     createChart(params) {
       return client.post('', { action: 'Model.createChart', ...params}).then(res => res.data);
     },
+    createDocument(params) {
+      return client.post('', { action: 'Model.createDocument', ...params}).then(res => res.data);
+    },
     deleteDocument(params) {
       return client.post('', { action: 'Model.deleteDocument', ...params}).then(res => res.data);
     },
@@ -43,10 +51,18 @@ if (config__isLambda) {
     }
   };
 } else {
+  exports.Dashboard = {
+    getDashboards: function getDashboards(params) {
+      return client.get('/Dashboard/getDashboards', params).then(res => res.data);
+    },
+  }
   exports.Model = {
     createChart: function (params) {
       return client.post('/Model/createChart', params).then(res => res.data);
     },
+    createDocument: function(params) {
+      return client.post('/Model/createDocument', params).then(res => res.data);
+    },
     deleteDocument: function (params) {
       return client.post('/Model/deleteDocument', params).then(res => res.data);
     },

package/frontend/src/create-document/create-document.html

@@ -0,0 +1,6 @@
+<div>
+  <div class="mb-2">
+    <textarea class="border border-gray-200 p-2" ref="codeEditor" v-model="documentData"></textarea>
+  </div>
+  <button @click="createDocument()" class="rounded-md bg-teal-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-teal-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600">Submit</button>
+</div>

package/frontend/src/create-document/create-document.js

@@ -0,0 +1,75 @@
+'use strict';
+
+const api = require('../api');
+const { EditorState } = require('@codemirror/state');
+const { lineNumbers } = require('@codemirror/view')
+const { EditorView, basicSetup } = require('codemirror');
+const { javascript } = require('@codemirror/lang-javascript');
+
+const { BSON, EJSON } = require('bson');
+
+const ObjectId = new Proxy(BSON.ObjectId, {
+  apply (target, thisArg, argumentsList) {
+    return new target(...argumentsList);
+  }
+});
+
+const appendCSS = require('../appendCSS');
+
+appendCSS(require('./create-document.css'));
+
+const template = require('./create-document.html')
+
+module.exports = app => app.component('create-document', {
+  props: ['currentModel', 'paths'],
+  template,
+  data: function() {
+    return {
+      documentData: '',
+      editor: null
+    }
+  },
+  methods: {
+    async createDocument() {
+      const data = EJSON.serialize(eval(`(${this.documentData})`));
+      const { doc } = await api.Model.createDocument({ model: this.currentModel, data }).catch(err => {
+        if (err.response?.data?.message) {
+          throw new Error(err.response?.data?.message);
+        }
+        throw err;
+      });
+      this.$emit('close', doc);
+    },
+  },
+  mounted: function() {
+    console.log(this.currentModel, this.paths);
+    const requiredPaths = this.paths.filter(x => x.required);
+    this.documentData = `{\n`;
+    for (let i = 0; i < requiredPaths.length; i++) {
+      const isLast = i + 1 >= requiredPaths.length;
+      this.documentData += `  ${requiredPaths[i].path}: ${isLast ? '': ','}\n`
+    }
+    this.documentData += '}';
+    
+    this.editor = new EditorView({
+      state: EditorState.create({
+        doc: this.documentData,
+        extensions: [
+          basicSetup,
+          javascript(),
+          // history(),
+          EditorView.updateListener.of((v) => {
+            // Your update logic here
+          }),
+          // keymap.of(historyKeymap)
+        ]
+      }),
+      parent: this.$refs.codeEditor
+    });
+  },
+  beforeDestroy() {
+    if (this.editor) {
+      this.editor.toTextArea();
+    }
+  }
+})

package/frontend/src/dashboard/dashboard.html

@@ -0,0 +1,8 @@
+<div class="dashboard">
+  <div v-if="!dashboard">
+    <div v-for="dashboard in dashboards" :key="dashboard._id">
+      {{dashboard.name}}, ID: {{ dashboard._id }}
+    </div>
+  </div>
+  <dashboard-details v-if="dashboard" :dashboard="dashboard"></dashboard-details>
+</div>

package/frontend/src/dashboard/dashboard.js

@@ -0,0 +1,22 @@
+'use strict';
+
+const api = require('../api');
+const template = require('./dashboard.html');
+
+
+module.exports = app => app.component('dashboard', {
+  template: template,
+  data: () => ({
+    dashboards: [],
+    dashboard: null
+  }),
+  async mounted() {
+    const { dashboards } = await api.Dashboard.getDashboards();
+    this.dashboards = dashboards;
+    if (!this.$route.query.dashboardId) {
+      return;
+    }
+    this.dashboard = dashboards.find(x => x._id.toString() == this.$route.query.dashboardId);
+    this.status = 'loaded';
+  },
+});

package/frontend/src/dashboard-details/dashboard-details.html

@@ -0,0 +1,8 @@
+<div class="dashboard-details">
+  <div v-if="dashboard">
+    {{dashboard.name}}
+  </div>
+  <div v-if="!dashboard">
+    No dashboard with the given id could be found.
+  </div>
+</div>

package/frontend/src/dashboard-details/dashboard-details.js

@@ -0,0 +1,10 @@
+'use strict';
+
+const api = require('../api');
+const template = require('./dashboard-details.html');
+
+
+module.exports = app => app.component('dashboard-details', {
+  template: template,
+  props: ['dashboard']
+});

package/frontend/src/document/document.html

@@ -11,7 +11,7 @@
         v-if="!editting"
         @click="editting = true"
         type="button"
-        class="rounded-md bg-puerto-rico-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-puerto-rico-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-puerto-rico-600">
+        class="rounded-md bg-teal-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-teal-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600">
         <img src="images/edit.svg" class="inline" /> Edit
       </button>
       <button
@@ -43,6 +43,7 @@
         <span class="path-type">
           ({{(path.instance || 'unknown').toLowerCase()}})
         </span>
+        
       </div>
       <div v-if="editting && path.path !== '_id'">
         <component

package/frontend/src/document/document.js

@@ -18,10 +18,12 @@ module.exports = app => app.component('document', {
     document: null,
     changes: {},
     editting: false,
-    virtuals: []
+    virtuals: [],
   }),
   async mounted() {
+    window.pageState = this;
     const { doc, schemaPaths } = await api.Model.getDocument({ model: this.model, documentId: this.documentId });
+    window.doc = doc;
     this.document = doc;
     this.schemaPaths = await Object.keys(schemaPaths).sort((k1, k2) => {
       if (k1 === '_id' && k2 !== '_id') {

package/frontend/src/edit-date/edit-date.html

@@ -1,3 +1,20 @@
 <div>
-  <input type="datetime-local" :value="valueAsLocalString" @input="$emit('input', $event.target.value)">
+  <div class="flex mb-[-1px] w-64 justify-end">
+    <button
+      @click="inputType = 'picker'"
+      type="button"
+      class="relative inline-flex items-center rounded-none p-1 rounded-tl-md text-sm text-gray-800 ring-1 ring-inset ring-gray-300 hover:bg-gray-200 focus:z-10"
+      :class="inputType === 'picker' ? 'bg-gray-200' : 'bg-white'">
+      Date Picker
+    </button>
+    <button
+      @click="inputType = 'iso'"
+      type="button"
+      class="relative -ml-px inline-flex items-center p-1 rounded-none rounded-tr-md text-sm text-gray-800 ring-1 ring-inset ring-gray-300 hover:bg-gray-200 focus:z-10"
+      :class="inputType === 'iso' ? 'bg-gray-200' : 'bg-white'">
+      ISO String Input
+    </button>
+  </div>
+  <input v-if="inputType == 'picker'" class="w-64 h-8 border border-gray-300 outline-0" type="datetime-local" :value="valueAsLocalString" @input="$emit('input', $event.target.value)">
+  <input v-if="inputType == 'iso'" type="text" class="w-64 h-8 border border-gray-300 outline-0" :value="valueAsISOString" @input="$emit('input', $event.target.value)">
 </div>

package/frontend/src/edit-date/edit-date.js

@@ -6,6 +6,11 @@ module.exports = app => app.component('edit-date', {
   template: template,
   props: ['value'],
   emits: ['input'],
+  data: function() {
+    return {
+      inputType: 'picker' // picker, iso
+    }
+  },
   computed: {
     valueAsLocalString() {
       if (this.value == null) {
@@ -23,6 +28,13 @@ module.exports = app => app.component('edit-date', {
         ':',
         date.getMinutes().toString().padStart(2, '0')
       ].join('');
+    },
+    valueAsISOString() {
+      if (this.value == null) {
+        return this.value;
+      }
+      const date = new Date(this.value);
+      return date.toISOString();
     }
   }
 });

package/frontend/src/index.js

@@ -8,6 +8,9 @@ const app = Vue.createApp({
 
 require('./async-button/async-button')(app);
 require('./charts/charts')(app);
+require('./create-document/create-document')(app);
+require('./dashboard/dashboard')(app);
+require('./dashboard-details/dashboard-details')(app);
 require('./detail-array/detail-array')(app);
 require('./detail-default/detail-default')(app);
 require('./document/document')(app);
@@ -18,6 +21,7 @@ require('./edit-date/edit-date')(app);
 require('./export-query-results/export-query-results')(app);
 require('./list-array/list-array')(app);
 require('./list-default/list-default')(app);
+require('./list-json/list-json')(app)
 require('./list-mixed/list-mixed')(app);
 require('./list-string/list-string')(app);
 require('./list-subdocument/list-subdocument')(app);

package/frontend/src/list-json/list-json.css

@@ -0,0 +1,3 @@
+.list-json {
+  width: 100%;
+}

package/frontend/src/list-json/list-json.html

@@ -0,0 +1,4 @@
+<div class="list-json tooltip">
+  <pre><code ref="JSONCode" class="language-javascript">{{shortenValue}}</code></pre>
+</div>
+  

package/frontend/src/list-json/list-json.js

@@ -0,0 +1,40 @@
+'use strict';
+
+const api = require('../api');
+const template = require('./list-json.html');
+
+const vanillatoast = require('vanillatoasts');
+
+require('../appendCSS')(require('./list-json.css'));
+
+module.exports = app => app.component('list-json', {
+  template: template,
+  props: ['value'],
+  computed: {
+    shortenValue() {
+      return JSON.stringify(this.value, null, 4);
+    }
+  },
+  methods: {
+    copyText(value) {
+      const storage = document.createElement('textarea');
+      storage.value = JSON.stringify(value);
+      const elem = this.$refs.JSONCode;
+      elem.appendChild(storage);
+      storage.select();
+      storage.setSelectionRange(0, 99999);
+      document.execCommand('copy');
+      elem.removeChild(storage);
+      vanillatoast.create({
+        title: 'Text copied!',
+        type: 'success',
+        timeout: 3000,
+        icon: 'images/success.png',
+        positionClass: 'bottomRight'
+      });
+    }
+  },
+  mounted: function() {
+    Prism.highlightElement(this.$refs.JSONCode);
+  }
+});