@mongoosejs/studio 0.0.136 → 0.0.138

package/frontend/public/app.js

@@ -126,7 +126,6 @@ var map = {
 	"./list-default/list-default.html": "./frontend/src/list-default/list-default.html",
 	"./list-default/list-default.js": "./frontend/src/list-default/list-default.js",
 	"./list-json/list-json": "./frontend/src/list-json/list-json.js",
-	"./list-json/list-json.css": "./frontend/src/list-json/list-json.css",
 	"./list-json/list-json.html": "./frontend/src/list-json/list-json.html",
 	"./list-json/list-json.js": "./frontend/src/list-json/list-json.js",
 	"./list-mixed/list-mixed": "./frontend/src/list-mixed/list-mixed.js",
@@ -3565,17 +3564,6 @@ module.exports = app => app.component('list-default', {
 
 /***/ }),
 
-/***/ "./frontend/src/list-json/list-json.css":
-/*!**********************************************!*\
-  !*** ./frontend/src/list-json/list-json.css ***!
-  \**********************************************/
-/***/ ((module) => {
-
-"use strict";
-module.exports = ".list-json {\n  width: 100%;\n}";
-
-/***/ }),
-
 /***/ "./frontend/src/list-json/list-json.html":
 /*!***********************************************!*\
   !*** ./frontend/src/list-json/list-json.html ***!
@@ -3583,7 +3571,7 @@ module.exports = ".list-json {\n  width: 100%;\n}";
 /***/ ((module) => {
 
 "use strict";
-module.exports = "<div class=\"list-json tooltip\">\n  <pre><code ref=\"JSONCode\" class=\"language-javascript\">{{shortenValue}}</code></pre>\n</div>\n  ";
+module.exports = "<div class=\"tooltip w-full font-mono text-sm py-3 text-slate-800\">\n  <div class=\"w-full\">\n    <json-node\n      :node-key=\"null\"\n      :value=\"value\"\n      :level=\"0\"\n      :is-last=\"true\"\n      path=\"root\"\n      :toggle-collapse=\"toggleCollapse\"\n      :is-collapsed=\"isPathCollapsed\"\n      :create-child-path=\"createChildPath\"\n      :indent-size=\"indentSize\"\n      :max-top-level-fields=\"maxTopLevelFields\"\n      :top-level-expanded=\"topLevelExpanded\"\n      :expand-top-level=\"expandTopLevel\"\n    ></json-node>\n  </div>\n</div>\n";
 
 /***/ }),
 
@@ -3596,42 +3584,367 @@ module.exports = "<div class=\"list-json tooltip\">\n  <pre><code ref=\"JSONCode
 "use strict";
 
 
-const api = __webpack_require__(/*! ../api */ "./frontend/src/api.js");
 const template = __webpack_require__(/*! ./list-json.html */ "./frontend/src/list-json/list-json.html");
 
-const vanillatoast = __webpack_require__(/*! vanillatoasts */ "./node_modules/vanillatoasts/vanillatoasts.js");
-
-__webpack_require__(/*! ../appendCSS */ "./frontend/src/appendCSS.js")(__webpack_require__(/*! ./list-json.css */ "./frontend/src/list-json/list-json.css"));
+const JsonNodeTemplate = `
+  <div>
+    <div class="flex items-baseline whitespace-pre" :style="indentStyle">
+      <button
+        v-if="showToggle"
+        type="button"
+        class="w-4 h-4 mr-1 inline-flex items-center justify-center leading-none text-gray-500 hover:text-gray-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-slate-400 cursor-pointer"
+        @click.stop="handleToggle"
+      >
+        {{ isCollapsedNode ? '+' : '-' }}
+      </button>
+      <span v-else class="w-4 h-4 mr-1 inline-flex items-center justify-center invisible flex-shrink-0"></span>
+      <template v-if="hasKey">
+        <span class="text-blue-600">"{{ nodeKey }}"</span><span>: </span>
+      </template>
+      <template v-if="isComplex">
+        <template v-if="hasChildren">
+          <span>{{ openingBracket }}</span>
+          <span v-if="isCollapsedNode" class="mx-1">…</span>
+          <span v-if="isCollapsedNode">{{ closingBracket }}{{ comma }}</span>
+        </template>
+        <template v-else>
+          <span>{{ openingBracket }}{{ closingBracket }}{{ comma }}</span>
+        </template>
+      </template>
+      <template v-else>
+        <!--
+          If value is a string and overflows its container (i.e. goes over one line), show an ellipsis.
+          This is done via CSS ellipsis strategy.
+        -->
+        <span
+          :class="valueClasses"
+          :style="typeof value === 'string'
+            ? {
+                display: 'inline-block',
+                maxWidth: '100%',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap',
+                verticalAlign: 'bottom'
+              }
+            : {}"
+          :title="typeof value === 'string' && $el && $el.scrollWidth > $el.clientWidth ? value : undefined"
+        >
+          {{ formattedValue }}{{ comma }}
+        </span>
+      </template>
+    </div>
+    <template v-if="isComplex && hasChildren && !isCollapsedNode">
+      <json-node
+        v-for="child in children"
+        :key="child.path"
+        :node-key="child.displayKey"
+        :value="child.value"
+        :level="level + 1"
+        :is-last="child.isLast"
+        :path="child.path"
+        :toggle-collapse="toggleCollapse"
+        :is-collapsed="isCollapsed"
+        :create-child-path="createChildPath"
+        :indent-size="indentSize"
+        :max-top-level-fields="maxTopLevelFields"
+        :top-level-expanded="topLevelExpanded"
+        :expand-top-level="expandTopLevel"
+      ></json-node>
+      <div
+        v-if="hasHiddenRootChildren"
+        class="flex items-baseline whitespace-pre"
+        :style="indentStyle"
+      >
+        <span class="w-4 h-4 mr-1 inline-flex items-center justify-center invisible"></span>
+        <button
+          type="button"
+          class="text-xs inline-flex items-center gap-1 ml-4 text-slate-500 hover:text-slate-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-slate-400"
+          :title="hiddenChildrenTooltip"
+          @click.stop="handleExpandTopLevel"
+        >
+          <span aria-hidden="true">{{hiddenChildrenLabel}}…</span>
+        </button>
+      </div>
+      <div class="flex items-baseline whitespace-pre" :style="indentStyle">
+        <span class="w-4 h-4 mr-1 inline-flex items-center justify-center invisible"></span>
+        <span>{{ closingBracket }}{{ comma }}</span>
+      </div>
+    </template>
+  </div>
+`;
 
 module.exports = app => app.component('list-json', {
   template: template,
   props: ['value'],
-  computed: {
-    shortenValue() {
-      return JSON.stringify(this.value, null, 4);
+  data() {
+    return {
+      collapsedMap: {},
+      indentSize: 16,
+      maxTopLevelFields: 15,
+      topLevelExpanded: false
+    };
+  },
+  watch: {
+    value: {
+      handler() {
+        this.resetCollapse();
+      }
     }
   },
+  created() {
+    this.resetCollapse();
+  },
   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'
-      });
+    resetCollapse() {
+      this.collapsedMap = {};
+      this.topLevelExpanded = false;
+    },
+    toggleCollapse(path) {
+      const current = this.isPathCollapsed(path);
+      this.collapsedMap = Object.assign({}, this.collapsedMap, { [path]: !current });
+    },
+    isPathCollapsed(path) {
+      if (path === 'root') {
+        return false;
+      }
+      if (Object.prototype.hasOwnProperty.call(this.collapsedMap, path)) {
+        return this.collapsedMap[path];
+      }
+      return true;
+    },
+    createChildPath(parentPath, childKey, isArray) {
+      if (parentPath == null || parentPath === '') {
+        return isArray ? `[${childKey}]` : `${childKey}`;
+      }
+      if (parentPath === 'root') {
+        return isArray ? `root[${childKey}]` : `root.${childKey}`;
+      }
+      if (isArray) {
+        return `${parentPath}[${childKey}]`;
+      }
+      return `${parentPath}.${childKey}`;
+    },
+    expandTopLevel() {
+      this.topLevelExpanded = true;
     }
   },
-  mounted: function() {
-    Prism.highlightElement(this.$refs.JSONCode);
+  components: {
+    JsonNode: {
+      name: 'JsonNode',
+      template: JsonNodeTemplate,
+      props: {
+        nodeKey: {
+          type: [String, Number],
+          default: null
+        },
+        value: {
+          required: true
+        },
+        level: {
+          type: Number,
+          required: true
+        },
+        isLast: {
+          type: Boolean,
+          default: false
+        },
+        path: {
+          type: String,
+          required: true
+        },
+        toggleCollapse: {
+          type: Function,
+          required: true
+        },
+        isCollapsed: {
+          type: Function,
+          required: true
+        },
+        createChildPath: {
+          type: Function,
+          required: true
+        },
+        indentSize: {
+          type: Number,
+          required: true
+        },
+        maxTopLevelFields: {
+          type: Number,
+          default: null
+        },
+        topLevelExpanded: {
+          type: Boolean,
+          default: false
+        },
+        expandTopLevel: {
+          type: Function,
+          default: null
+        }
+      },
+      computed: {
+        hasKey() {
+          return this.nodeKey !== null && this.nodeKey !== undefined;
+        },
+        isRoot() {
+          return this.path === 'root';
+        },
+        isArray() {
+          return Array.isArray(this.value);
+        },
+        isObject() {
+          if (this.value === null || this.isArray) {
+            return false;
+          }
+          return Object.prototype.toString.call(this.value) === '[object Object]';
+        },
+        isComplex() {
+          return this.isArray || this.isObject;
+        },
+        children() {
+          if (!this.isComplex) {
+            return [];
+          }
+          if (this.isArray) {
+            return this.value.map((childValue, index) => ({
+              displayKey: null,
+              value: childValue,
+              isLast: index === this.value.length - 1,
+              path: this.createChildPath(this.path, index, true)
+            }));
+          }
+          const keys = Object.keys(this.value);
+          const visibleKeys = this.visibleObjectKeys(keys);
+          const hasHidden = this.hasHiddenRootChildren;
+          return visibleKeys.map((key, index) => ({
+            displayKey: key,
+            value: this.value[key],
+            isLast: !hasHidden && index === visibleKeys.length - 1,
+            path: this.createChildPath(this.path, key, false)
+          }));
+        },
+        hasChildren() {
+          return this.children.length > 0;
+        },
+        totalObjectChildCount() {
+          if (!this.isObject) {
+            return 0;
+          }
+          return Object.keys(this.value).length;
+        },
+        hasHiddenRootChildren() {
+          if (!this.isRoot || !this.isObject) {
+            return false;
+          }
+          if (this.topLevelExpanded) {
+            return false;
+          }
+          if (typeof this.maxTopLevelFields !== 'number') {
+            return false;
+          }
+          return this.totalObjectChildCount > this.maxTopLevelFields;
+        },
+        hiddenRootChildrenCount() {
+          if (!this.hasHiddenRootChildren) {
+            return 0;
+          }
+          return this.totalObjectChildCount - this.maxTopLevelFields;
+        },
+        showToggle() {
+          return this.hasChildren && !this.isRoot;
+        },
+        openingBracket() {
+          return this.isArray ? '[' : '{';
+        },
+        closingBracket() {
+          return this.isArray ? ']' : '}';
+        },
+        isCollapsedNode() {
+          return this.isCollapsed(this.path);
+        },
+        formattedValue() {
+          if (typeof this.value === 'bigint') {
+            return `${this.value.toString()}n`;
+          }
+          const stringified = JSON.stringify(this.value);
+          if (stringified === undefined) {
+            if (typeof this.value === 'symbol') {
+              return this.value.toString();
+            }
+            return String(this.value);
+          }
+          return stringified;
+        },
+        valueClasses() {
+          const classes = ['text-slate-700'];
+          if (this.value === null) {
+            classes.push('text-gray-500', 'italic');
+            return classes;
+          }
+          const type = typeof this.value;
+          if (type === 'string') {
+            classes.push('text-emerald-600');
+            return classes;
+          }
+          if (type === 'number' || type === 'bigint') {
+            classes.push('text-amber-600');
+            return classes;
+          }
+          if (type === 'boolean') {
+            classes.push('text-violet-600');
+            return classes;
+          }
+          if (type === 'undefined') {
+            classes.push('text-gray-500');
+            return classes;
+          }
+          return classes;
+        },
+        comma() {
+          return this.isLast ? '' : ',';
+        },
+        indentStyle() {
+          return {
+            paddingLeft: `${this.level * this.indentSize}px`
+          };
+        },
+        hiddenChildrenLabel() {
+          if (!this.hasHiddenRootChildren) {
+            return '';
+          }
+          const count = this.hiddenRootChildrenCount;
+          const suffix = count === 1 ? 'field' : 'fields';
+          return `${count} more ${suffix}`;
+        },
+        hiddenChildrenTooltip() {
+          return this.hiddenChildrenLabel;
+        }
+      },
+      methods: {
+        visibleObjectKeys(keys) {
+          if (!this.isRoot || this.topLevelExpanded) {
+            return keys;
+          }
+          if (typeof this.maxTopLevelFields !== 'number') {
+            return keys;
+          }
+          if (keys.length <= this.maxTopLevelFields) {
+            return keys;
+          }
+          return keys.slice(0, this.maxTopLevelFields);
+        },
+        handleToggle() {
+          if (!this.isRoot) {
+            this.toggleCollapse(this.path);
+          }
+        },
+        handleExpandTopLevel() {
+          if (this.isRoot && typeof this.expandTopLevel === 'function') {
+            this.expandTopLevel();
+          }
+        }
+      }
+    }
   }
 });
 
@@ -3909,7 +4222,7 @@ module.exports = app => app.component('modal', {
 /***/ ((module) => {
 
 "use strict";
-module.exports = ".models {\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  min-height: calc(100% - 56px);\n}\n\n.models button.gray {\n  color: black;\n  background-color: #eee;\n}\n\n.models .model-selector {\n  background-color: #eee;\n  flex-grow: 0;\n  padding: 15px;\n  padding-top: 0px;\n}\n\n.models h1 {\n  margin-top: 0px;\n}\n\n.models .documents {\n  flex-grow: 1;\n  overflow: scroll;\n  max-height: calc(100vh - 56px);\n}\n\n.models .documents table {\n  /* max-width: -moz-fit-content;\n  max-width: fit-content; */\n  width: 100%;\n  table-layout: auto;\n  font-size: small;\n  padding: 0;\n  margin-right: 1em;\n  white-space: nowrap;\n  z-index: -1;\n  border-collapse: collapse;\n  line-height: 1.5em;\n}\n\n.models .documents table th {\n  position: sticky;\n  top: 42px;\n  background-color: white;\n  z-index: 1;\n}\n\n.models .documents table th:after {\n  content: \"\";\n  position: absolute;\n  left: 0;\n  width: 100%;\n  bottom: -1px;\n  border-bottom: thin solid rgba(0, 0, 0, 0.12);\n}\n\n.models .documents table tr {\n  color: black;\n  border-spacing: 0px 0px;\n  background-color: white;\n  cursor: pointer;\n}\n\n.models .documents table tr:nth-child(even) {\n  background-color: #f5f5f5;\n}\n\n.models .documents table tr:hover {\n  background-color: #a7b9ff;\n}\n\n.models .documents table th,\ntd {\n  border-bottom: thin solid rgba(0, 0, 0, 0.12);\n  text-align: left;\n  padding: 0 16px;\n  height: 48px;\n}\n\n.models textarea {\n  font-size: 1.2em;\n}\n\n.models .path-type {\n  color: rgba(0, 0, 0, 0.36);\n  font-size: 0.8em;\n}\n\n.models .documents-menu {\n  position: fixed;\n  background-color: white;\n  z-index: 1;\n  padding: 4px;\n  display: flex;\n  width: 100vw;\n}\n\n@media (min-width: 1024px) {\n  .models .documents-menu {\n    width: calc(100vw - 12rem);\n  }\n}\n\n.models .documents-menu .search-input {\n  flex-grow: 1;\n  align-items: center;\n}\n\n.models .search-input input {\n  padding: 0.25em 0.5em;\n  font-size: 1.1em;\n  border: 1px solid #ddd;\n  border-radius: 3px;\n  width: calc(100% - 1em);\n}\n\n.models .sort-arrow {\n  padding-left: 10px;\n  padding-right: 10px;\n}\n\n.models .loader {\n  width: 100%;\n  text-align: center;\n}\n\n.models .loader img {\n  height: 4em;\n}\n\n.models .documents .buttons {\n  display: inline-flex;\n  justify-content: space-around;\n  align-items: center;\n}\n";
+module.exports = ".models {\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  min-height: calc(100% - 56px);\n}\n\n.models button.gray {\n  color: black;\n  background-color: #eee;\n}\n\n.models .model-selector {\n  background-color: #eee;\n  flex-grow: 0;\n  padding: 15px;\n  padding-top: 0px;\n}\n\n.models h1 {\n  margin-top: 0px;\n}\n\n.models .documents {\n  flex-grow: 1;\n  overflow: scroll;\n  max-height: calc(100vh - 56px);\n}\n\n.models .documents table {\n  /* max-width: -moz-fit-content;\n  max-width: fit-content; */\n  width: 100%;\n  table-layout: auto;\n  font-size: small;\n  padding: 0;\n  margin-right: 1em;\n  white-space: nowrap;\n  z-index: -1;\n  border-collapse: collapse;\n  line-height: 1.5em;\n}\n\n.models .documents table th {\n  position: sticky;\n  top: 42px;\n  background-color: white;\n  z-index: 1;\n}\n\n.models .documents table th:after {\n  content: \"\";\n  position: absolute;\n  left: 0;\n  width: 100%;\n  bottom: -1px;\n  border-bottom: thin solid rgba(0, 0, 0, 0.12);\n}\n\n.models .documents table tr {\n  color: black;\n  border-spacing: 0px 0px;\n  background-color: white;\n  cursor: pointer;\n}\n\n.models .documents table tr:nth-child(even) {\n  background-color: #f5f5f5;\n}\n\n.models .documents table tr:hover {\n  background-color: #a7b9ff;\n}\n\n.models .documents table th,\ntd {\n  border-bottom: thin solid rgba(0, 0, 0, 0.12);\n  text-align: left;\n  padding: 0 16px;\n  height: 48px;\n}\n\n.models textarea {\n  font-size: 1.2em;\n}\n\n.models .path-type {\n  color: rgba(0, 0, 0, 0.36);\n  font-size: 0.8em;\n}\n\n.models .documents-menu {\n  position: fixed;\n  background-color: white;\n  z-index: 1;\n  padding: 4px;\n  display: flex;\n  width: 100vw;\n}\n\n@media (min-width: 1024px) {\n  .models .documents-menu {\n    width: calc(100vw - 12rem);\n  }\n}\n\n.models .documents-menu .search-input {\n  flex-grow: 1;\n  align-items: center;\n}\n\n.models .search-input input {\n  padding: 0.25em 0.5em;\n  font-size: 1.1em;\n  border: 1px solid #ddd;\n  border-radius: 3px;\n  width: calc(100% - 1em);\n}\n\n.models .sort-arrow {\n  padding-left: 10px;\n  padding-right: 10px;\n}\n\n.models .loader {\n  width: 100%;\n  text-align: center;\n}\n\n.models .loader img {\n  height: 4em;\n}\n\n.models .documents .buttons {\n  display: inline-flex;\n  justify-content: space-around;\n  align-items: center;\n}\n\n";
 
 /***/ }),
 
@@ -3920,7 +4233,7 @@ module.exports = ".models {\n  position: relative;\n  display: flex;\n  flex-dir
 /***/ ((module) => {
 
 "use strict";
-module.exports = "<div class=\"models flex\" style=\"height: calc(100vh - 55px); height: calc(100dvh - 55px)\">\n  <div class=\"fixed top-[65px] cursor-pointer bg-gray-100 rounded-r-md z-10\" @click=\"hideSidebar = false\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"h-5 w-5\" viewBox=\"0 -960 960 960\" class=\"w-5\" fill=\"#5f6368\"><path d=\"M360-120v-720h80v720h-80Zm160-160v-400l200 200-200 200Z\"/></svg>\n  </div>\n  <aside class=\"bg-white border-r overflow-y-auto overflow-x-hidden h-full transition-all duration-300 ease-in-out z-20 w-0 lg:w-48 fixed lg:relative shrink-0\" :class=\"hideSidebar === true ? '!w-0' : hideSidebar === false ? '!w-48' : ''\">\n    <div class=\"flex items-center border-b border-gray-100 w-48 overflow-x-hidden\">\n      <div class=\"p-4 font-bold text-lg\">Models</div>\n      <button\n        @click=\"hideSidebar = true\"\n        class=\"ml-auto mr-2 p-2 rounded hover:bg-gray-200 focus:outline-none\"\n        aria-label=\"Close sidebar\"\n      >\n        <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"h-5 w-5\" viewBox=\"0 -960 960 960\" class=\"w-5\" fill=\"currentColor\"><path d=\"M660-320v-320L500-480l160 160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z\"/></svg>\n      </button>\n    </div>\n    <nav class=\"flex flex-1 flex-col\">\n      <ul role=\"list\" class=\"flex flex-1 flex-col gap-y-7\">\n        <li>\n          <ul role=\"list\">\n            <li v-for=\"model in models\">\n              <router-link\n                :to=\"'/model/' + model\"\n                class=\"block truncate rounded-md py-2 pr-2 pl-2 text-sm font-semibold text-gray-700\"\n                :class=\"model === currentModel ? 'bg-ultramarine-100 font-bold' : 'hover:bg-ultramarine-100'\">\n                {{model}}\n              </router-link>\n            </li>\n          </ul>\n        </li>\n      </ul>\n    </nav>\n  </aside>\n  <div class=\"documents\" ref=\"documentsList\">\n    <div class=\"relative h-[42px] z-10\">\n      <div class=\"documents-menu\">\n        <div class=\"flex flex-row items-center w-full gap-2\">\n          <form @submit.prevent=\"search\" class=\"relative flex-grow m-0\">\n            <input ref=\"searchInput\" class=\"w-full font-mono rounded-md p-1 border border-gray-300 outline-gray-300 text-lg focus:ring-1 focus:ring-ultramarine-200 focus:ring-offset-0 focus:outline-none\" type=\"text\" placeholder=\"Filter\" v-model=\"searchText\" @click=\"initFilter\" @input=\"updateAutocomplete\" @keydown=\"handleKeyDown\" />\n            <ul v-if=\"autocompleteSuggestions.length\" class=\"absolute z-[9999] bg-white border border-gray-300 rounded mt-1 w-full max-h-40 overflow-y-auto shadow\">\n              <li v-for=\"(suggestion, index) in autocompleteSuggestions\" :key=\"suggestion\" class=\"px-2 py-1 cursor-pointer\" :class=\"{ 'bg-ultramarine-100': index === autocompleteIndex }\" @mousedown.prevent=\"applySuggestion(index)\">{{ suggestion }}</li>\n            </ul>\n          </form>\n          <div>\n            <span v-if=\"numDocuments == null\">Loading ...</span>\n            <span v-else-if=\"typeof numDocuments === 'number'\">{{numDocuments === 1 ? numDocuments+ ' document' : numDocuments + ' documents'}}</span>\n          </div>\n          <button\n            @click=\"shouldShowExportModal = true\"\n            type=\"button\"\n            v-show=\"!selectMultiple\"\n            class=\"rounded bg-ultramarine-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600\">\n            Export\n          </button>\n          <button\n            @click=\"stagingSelect\"\n            type=\"button\"\n            :class=\"{ 'bg-gray-500 ring-inset ring-2 ring-gray-300 hover:bg-gray-600': selectMultiple, 'bg-ultramarine-600 hover:bg-ultramarine-500' : !selectMultiple }\"\n            class=\"rounded px-2 py-2 text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600\"\n          >\n            {{ selectMultiple ? 'Cancel' : 'Select' }}\n          </button>\n          <button\n            v-show=\"selectMultiple\"\n            @click=\"shouldShowUpdateMultipleModal=true;\"\n            type=\"button\"\n            class=\"rounded bg-green-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600\"\n            >\n            Update\n          </button>\n          <button\n            @click=\"shouldShowDeleteMultipleModal=true;\"\n            type=\"button\"\n            v-show=\"selectMultiple\"\n            class=\"rounded bg-red-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-500\"\n            >\n            Delete\n          </button>\n          <button\n            @click=\"openIndexModal\"\n            type=\"button\"\n            v-show=\"!selectMultiple\"\n            class=\"rounded bg-ultramarine-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600\">\n            Indexes\n          </button>\n          <button\n            @click=\"shouldShowCreateModal = true;\"\n            type=\"button\"\n            v-show=\"!selectMultiple\"\n            class=\"rounded bg-ultramarine-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600\">\n            Create\n          </button>\n          <button\n            @click=\"openFieldSelection\"\n            type=\"button\"\n            v-show=\"!selectMultiple\"\n            class=\"rounded bg-ultramarine-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600\">\n            Fields\n          </button>\n          <span class=\"isolate inline-flex rounded-md shadow-sm\">\n            <button\n              @click=\"outputType = 'table'\"\n              type=\"button\"\n              class=\"relative inline-flex items-center rounded-none rounded-l-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10\"\n              :class=\"outputType === 'table' ? 'bg-gray-200' : 'bg-white'\">\n              <img class=\"h-5 w-5\" src=\"images/table.svg\">\n            </button>\n            <button\n              @click=\"outputType = 'json'\"\n              type=\"button\"\n              class=\"relative -ml-px inline-flex items-center rounded-none rounded-r-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10\"\n              :class=\"outputType === 'json' ? 'bg-gray-200' : 'bg-white'\">\n              <img class=\"h-5 w-5\" src=\"images/json.svg\">\n            </button>\n          </span>\n        </div>\n      </div>\n    </div>\n    <div class=\"documents-container relative\">\n      <table v-if=\"outputType === 'table'\">\n        <thead>\n          <th v-for=\"path in filteredPaths\" @click=\"clickFilter(path.path)\" class=\"cursor-pointer\">\n            {{path.path}}\n            <span class=\"path-type\">\n              ({{(path.instance || 'unknown')}})\n            </span>\n            <span class=\"sort-arrow\" @click=\"sortDocs(1, path.path)\">{{sortBy[path.path] == 1 ? 'X' : '↑'}}</span>\n            <span class=\"sort-arrow\" @click=\"sortDocs(-1, path.path)\">{{sortBy[path.path] == -1 ? 'X' : '↓'}}</span>\n          </th>\n        </thead>\n        <tbody>\n          <tr v-for=\"document in documents\" @click=\"handleDocumentClick(document, $event)\" :key=\"document._id\">\n            <td v-for=\"schemaPath in filteredPaths\" :class=\"{ 'bg-blue-200': selectedDocuments.some(x => x._id.toString() === document._id.toString()) }\">\n              <component\n                :is=\"getComponentForPath(schemaPath)\"\n                :value=\"getValueForPath(document, schemaPath.path)\"\n                :allude=\"getReferenceModel(schemaPath)\">\n              </component>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n      <div v-if=\"outputType === 'json'\">\n        <div v-for=\"document in documents\" @click=\"handleDocumentClick(document, $event)\" :key=\"document._id\" :class=\"{ 'bg-blue-200': selectedDocuments.some(x => x._id.toString() === document._id.toString()) }\">\n          <list-json :value=\"filterDocument(document)\">\n          </list-json>\n        </div>\n      </div>\n      <div v-if=\"status === 'loading'\" class=\"loader\">\n        <img src=\"images/loader.gif\">\n      </div>\n    </div>\n  </div>\n  <modal v-if=\"shouldShowExportModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowExportModal = false\">&times;</div>\n      <export-query-results\n        :schemaPaths=\"schemaPaths\"\n        :search-text=\"searchText\"\n        :currentModel=\"currentModel\"\n        @done=\"shouldShowExportModal = false\">\n      </export-query-results>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowIndexModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowIndexModal = false\">&times;</div>\n      <div class=\"text-xl font-bold mb-2\">Indexes</div>\n      <div v-for=\"index in mongoDBIndexes\" class=\"w-full flex items-center\">\n        <div class=\"grow shrink text-left flex justify-between items-center\" v-if=\"index.name != '_id_'\">\n          <div>\n            <div class=\"font-bold\">{{ index.name }}</div>\n            <div class=\"text-sm font-mono\">{{ JSON.stringify(index.key) }}</div>\n          </div>\n          <div>\n            <async-button\n              type=\"button\"\n              @click=\"dropIndex(index.name)\"\n              class=\"rounded-md bg-valencia-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-valencia-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600 disabled:bg-gray-400 disabled:cursor-not-allowed\">\n              Drop\n            </async-button>\n          </div>\n        </div>\n      </div>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowFieldModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowFieldModal = false; selectedPaths = [...filteredPaths];\">&times;</div>\n      <div v-for=\"(path, index) in schemaPaths\" :key=\"index\" class=\"w-5 flex items-center\">\n        <input  class=\"mt-0 h-4 w-4 rounded border-gray-300 text-sky-600 focus:ring-sky-600 accent-sky-600\" type=\"checkbox\" :id=\"'path.path'+index\" @change=\"addOrRemove(path)\" :value=\"path.path\" :checked=\"isSelected(path.path)\" />\n        <div class=\"ml-2 text-gray-700 grow shrink text-left\">\n          <label :for=\"'path.path' + index\">{{path.path}}</label>\n        </div>\n      </div>\n      <div class=\"mt-4 flex gap-2\">\n        <button type=\"button\" @click=\"filterDocuments()\" class=\"rounded-md bg-ultramarine-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600\">Filter Selection</button>\n        <button type=\"button\" @click=\"selectAll()\" class=\"rounded-md bg-forest-green-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600\">Select All</button>\n        <button type=\"button\" @click=\"deselectAll()\" class=\"rounded-md bg-valencia-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-valencia-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600\">Deselect All</button>\n        <button type=\"button\" @click=\"resetDocuments()\" class=\"rounded-md bg-gray-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-gray-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600\" >Cancel</button>\n      </div>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowCreateModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowCreateModal = false;\">&times;</div>\n      <create-document :currentModel=\"currentModel\" :paths=\"schemaPaths\" @close=\"closeCreationModal\"></create-document>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowUpdateMultipleModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowUpdateMultipleModal = false;\">&times;</div>\n      <update-document :currentModel=\"currentModel\" :document=\"selectedDocuments\" :multiple=\"true\" @update=\"updateDocuments\" @close=\"shouldShowUpdateMultipleModal=false;\"></update-document>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowDeleteMultipleModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowDeleteMultipleModal = false;\">&times;</div>\n      <h2>Are you sure you want to delete {{selectedDocuments.length}} documents?</h2>\n      <div>\n        <list-json :value=\"selectedDocuments\"></list-json>\n      </div>\n      <div class=\"flex gap-4\">\n        <async-button @click=\"deleteDocuments\" class=\"rounded bg-red-500 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600\">\n          Confirm\n        </async-button>\n        <button @click=\"shouldShowDeleteMultipleModal = false;\" class=\"rounded bg-gray-400 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-gray-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500\">\n          Cancel\n        </button>\n      </div>\n    </template>\n  </modal>\n</div>\n";
+module.exports = "<div class=\"models flex\" style=\"height: calc(100vh - 55px); height: calc(100dvh - 55px)\">\n  <div class=\"fixed top-[65px] cursor-pointer bg-gray-100 rounded-r-md z-10\" @click=\"hideSidebar = false\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"h-5 w-5\" viewBox=\"0 -960 960 960\" class=\"w-5\" fill=\"#5f6368\"><path d=\"M360-120v-720h80v720h-80Zm160-160v-400l200 200-200 200Z\"/></svg>\n  </div>\n  <aside class=\"bg-white border-r overflow-y-auto overflow-x-hidden h-full transition-all duration-300 ease-in-out z-20 w-0 lg:w-48 fixed lg:relative shrink-0\" :class=\"hideSidebar === true ? '!w-0' : hideSidebar === false ? '!w-48' : ''\">\n    <div class=\"flex items-center border-b border-gray-100 w-48 overflow-x-hidden\">\n      <div class=\"p-4 font-bold text-lg\">Models</div>\n      <button\n        @click=\"hideSidebar = true\"\n        class=\"ml-auto mr-2 p-2 rounded hover:bg-gray-200 focus:outline-none\"\n        aria-label=\"Close sidebar\"\n      >\n        <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"h-5 w-5\" viewBox=\"0 -960 960 960\" class=\"w-5\" fill=\"currentColor\"><path d=\"M660-320v-320L500-480l160 160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z\"/></svg>\n      </button>\n    </div>\n    <nav class=\"flex flex-1 flex-col\">\n      <ul role=\"list\" class=\"flex flex-1 flex-col gap-y-7\">\n        <li>\n          <ul role=\"list\">\n            <li v-for=\"model in models\">\n              <router-link\n                :to=\"'/model/' + model\"\n                class=\"block truncate rounded-md py-2 pr-2 pl-2 text-sm font-semibold text-gray-700\"\n                :class=\"model === currentModel ? 'bg-ultramarine-100 font-bold' : 'hover:bg-ultramarine-100'\">\n                {{model}}\n              </router-link>\n            </li>\n          </ul>\n        </li>\n      </ul>\n    </nav>\n  </aside>\n  <div class=\"documents\" ref=\"documentsList\">\n    <div class=\"relative h-[42px] z-10\">\n      <div class=\"documents-menu\">\n        <div class=\"flex flex-row items-center w-full gap-2\">\n          <form @submit.prevent=\"search\" class=\"relative flex-grow m-0\">\n            <input ref=\"searchInput\" class=\"w-full font-mono rounded-md p-1 border border-gray-300 outline-gray-300 text-lg focus:ring-1 focus:ring-ultramarine-200 focus:ring-offset-0 focus:outline-none\" type=\"text\" placeholder=\"Filter\" v-model=\"searchText\" @click=\"initFilter\" @input=\"updateAutocomplete\" @keydown=\"handleKeyDown\" />\n            <ul v-if=\"autocompleteSuggestions.length\" class=\"absolute z-[9999] bg-white border border-gray-300 rounded mt-1 w-full max-h-40 overflow-y-auto shadow\">\n              <li v-for=\"(suggestion, index) in autocompleteSuggestions\" :key=\"suggestion\" class=\"px-2 py-1 cursor-pointer\" :class=\"{ 'bg-ultramarine-100': index === autocompleteIndex }\" @mousedown.prevent=\"applySuggestion(index)\">{{ suggestion }}</li>\n            </ul>\n          </form>\n          <div>\n            <span v-if=\"numDocuments == null\">Loading ...</span>\n            <span v-else-if=\"typeof numDocuments === 'number'\">{{numDocuments === 1 ? numDocuments+ ' document' : numDocuments + ' documents'}}</span>\n          </div>\n          <button\n            @click=\"shouldShowExportModal = true\"\n            type=\"button\"\n            v-show=\"!selectMultiple\"\n            class=\"rounded bg-ultramarine-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600\">\n            Export\n          </button>\n          <button\n            @click=\"stagingSelect\"\n            type=\"button\"\n            :class=\"{ 'bg-gray-500 ring-inset ring-2 ring-gray-300 hover:bg-gray-600': selectMultiple, 'bg-ultramarine-600 hover:bg-ultramarine-500' : !selectMultiple }\"\n            class=\"rounded px-2 py-2 text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600\"\n          >\n            {{ selectMultiple ? 'Cancel' : 'Select' }}\n          </button>\n          <button\n            v-show=\"selectMultiple\"\n            @click=\"shouldShowUpdateMultipleModal=true;\"\n            type=\"button\"\n            class=\"rounded bg-green-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600\"\n            >\n            Update\n          </button>\n          <button\n            @click=\"shouldShowDeleteMultipleModal=true;\"\n            type=\"button\"\n            v-show=\"selectMultiple\"\n            class=\"rounded bg-red-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-500\"\n            >\n            Delete\n          </button>\n          <button\n            @click=\"openIndexModal\"\n            type=\"button\"\n            v-show=\"!selectMultiple\"\n            class=\"rounded bg-ultramarine-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600\">\n            Indexes\n          </button>\n          <button\n            @click=\"shouldShowCreateModal = true;\"\n            type=\"button\"\n            v-show=\"!selectMultiple\"\n            class=\"rounded bg-ultramarine-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600\">\n            Create\n          </button>\n          <button\n            @click=\"openFieldSelection\"\n            type=\"button\"\n            v-show=\"!selectMultiple\"\n            class=\"rounded bg-ultramarine-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600\">\n            Fields\n          </button>\n          <span class=\"isolate inline-flex rounded-md shadow-sm\">\n            <button\n              @click=\"setOutputType('table')\"\n              type=\"button\"\n              class=\"relative inline-flex items-center rounded-none rounded-l-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10\"\n              :class=\"outputType === 'table' ? 'bg-gray-200' : 'bg-white'\">\n              <img class=\"h-5 w-5\" src=\"images/table.svg\">\n            </button>\n            <button\n              @click=\"setOutputType('json')\"\n              type=\"button\"\n              class=\"relative -ml-px inline-flex items-center rounded-none rounded-r-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10\"\n              :class=\"outputType === 'json' ? 'bg-gray-200' : 'bg-white'\">\n              <img class=\"h-5 w-5\" src=\"images/json.svg\">\n            </button>\n          </span>\n        </div>\n      </div>\n    </div>\n    <div class=\"documents-container relative\">\n      <table v-if=\"outputType === 'table'\">\n        <thead>\n          <th v-for=\"path in filteredPaths\" @click=\"clickFilter(path.path)\" class=\"cursor-pointer\">\n            {{path.path}}\n            <span class=\"path-type\">\n              ({{(path.instance || 'unknown')}})\n            </span>\n            <span class=\"sort-arrow\" @click=\"sortDocs(1, path.path)\">{{sortBy[path.path] == 1 ? 'X' : '↑'}}</span>\n            <span class=\"sort-arrow\" @click=\"sortDocs(-1, path.path)\">{{sortBy[path.path] == -1 ? 'X' : '↓'}}</span>\n          </th>\n        </thead>\n        <tbody>\n          <tr v-for=\"document in documents\" @click=\"handleDocumentClick(document, $event)\" :key=\"document._id\">\n            <td v-for=\"schemaPath in filteredPaths\" :class=\"{ 'bg-blue-200': selectedDocuments.some(x => x._id.toString() === document._id.toString()) }\">\n              <component\n                :is=\"getComponentForPath(schemaPath)\"\n                :value=\"getValueForPath(document, schemaPath.path)\"\n                :allude=\"getReferenceModel(schemaPath)\">\n              </component>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n      <div v-if=\"outputType === 'json'\" class=\"flex flex-col space-y-6\">\n        <div\n          v-for=\"document in documents\"\n          :key=\"document._id\"\n          @click=\"handleDocumentContainerClick(document, $event)\"\n          :class=\"[\n            'group relative transition-colors',\n            selectedDocuments.some(x => x._id.toString() === document._id.toString()) ? 'bg-blue-200' : 'hover:bg-slate-100'\n          ]\"\n        >\n          <button\n            type=\"button\"\n            class=\"absolute top-2 right-2 z-10 inline-flex items-center rounded bg-ultramarine-600 px-2 py-1 text-xs font-semibold text-white shadow-sm transition-opacity duration-150 opacity-0 group-hover:opacity-100 focus-visible:opacity-100 hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600\"\n            @click.stop=\"openDocument(document)\"\n          >\n            Open this Document\n          </button>\n          <list-json :value=\"filterDocument(document)\">\n          </list-json>\n        </div>\n      </div>\n      <div v-if=\"status === 'loading'\" class=\"loader\">\n        <img src=\"images/loader.gif\">\n      </div>\n    </div>\n  </div>\n  <modal v-if=\"shouldShowExportModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowExportModal = false\">&times;</div>\n      <export-query-results\n        :schemaPaths=\"schemaPaths\"\n        :search-text=\"searchText\"\n        :currentModel=\"currentModel\"\n        @done=\"shouldShowExportModal = false\">\n      </export-query-results>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowIndexModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowIndexModal = false\">&times;</div>\n      <div class=\"text-xl font-bold mb-2\">Indexes</div>\n      <div v-for=\"index in mongoDBIndexes\" class=\"w-full flex items-center\">\n        <div class=\"grow shrink text-left flex justify-between items-center\" v-if=\"index.name != '_id_'\">\n          <div>\n            <div class=\"font-bold\">{{ index.name }}</div>\n            <div class=\"text-sm font-mono\">{{ JSON.stringify(index.key) }}</div>\n          </div>\n          <div>\n            <async-button\n              type=\"button\"\n              @click=\"dropIndex(index.name)\"\n              class=\"rounded-md bg-valencia-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-valencia-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600 disabled:bg-gray-400 disabled:cursor-not-allowed\">\n              Drop\n            </async-button>\n          </div>\n        </div>\n      </div>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowFieldModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowFieldModal = false; selectedPaths = [...filteredPaths];\">&times;</div>\n      <div v-for=\"(path, index) in schemaPaths\" :key=\"index\" class=\"w-5 flex items-center\">\n        <input  class=\"mt-0 h-4 w-4 rounded border-gray-300 text-sky-600 focus:ring-sky-600 accent-sky-600\" type=\"checkbox\" :id=\"'path.path'+index\" @change=\"addOrRemove(path)\" :value=\"path.path\" :checked=\"isSelected(path.path)\" />\n        <div class=\"ml-2 text-gray-700 grow shrink text-left\">\n          <label :for=\"'path.path' + index\">{{path.path}}</label>\n        </div>\n      </div>\n      <div class=\"mt-4 flex gap-2\">\n        <button type=\"button\" @click=\"filterDocuments()\" class=\"rounded-md bg-ultramarine-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600\">Filter Selection</button>\n        <button type=\"button\" @click=\"selectAll()\" class=\"rounded-md bg-forest-green-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600\">Select All</button>\n        <button type=\"button\" @click=\"deselectAll()\" class=\"rounded-md bg-valencia-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-valencia-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600\">Deselect All</button>\n        <button type=\"button\" @click=\"resetDocuments()\" class=\"rounded-md bg-gray-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-gray-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600\" >Cancel</button>\n      </div>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowCreateModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowCreateModal = false;\">&times;</div>\n      <create-document :currentModel=\"currentModel\" :paths=\"schemaPaths\" @close=\"closeCreationModal\"></create-document>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowUpdateMultipleModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowUpdateMultipleModal = false;\">&times;</div>\n      <update-document :currentModel=\"currentModel\" :document=\"selectedDocuments\" :multiple=\"true\" @update=\"updateDocuments\" @close=\"shouldShowUpdateMultipleModal=false;\"></update-document>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowDeleteMultipleModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowDeleteMultipleModal = false;\">&times;</div>\n      <h2>Are you sure you want to delete {{selectedDocuments.length}} documents?</h2>\n      <div>\n        <list-json :value=\"selectedDocuments\"></list-json>\n      </div>\n      <div class=\"flex gap-4\">\n        <async-button @click=\"deleteDocuments\" class=\"rounded bg-red-500 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600\">\n          Confirm\n        </async-button>\n        <button @click=\"shouldShowDeleteMultipleModal = false;\" class=\"rounded bg-gray-400 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-gray-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500\">\n          Cancel\n        </button>\n      </div>\n    </template>\n  </modal>\n</div>\n";
 
 /***/ }),
 
@@ -3971,6 +4284,7 @@ const QUERY_SELECTORS = [
 appendCSS(__webpack_require__(/*! ./models.css */ "./frontend/src/models/models.css"));
 
 const limit = 20;
+const OUTPUT_TYPE_STORAGE_KEY = 'studio:model-output-type';
 
 module.exports = app => app.component('models', {
   template: template,
@@ -4013,6 +4327,7 @@ module.exports = app => app.component('models', {
   created() {
     this.currentModel = this.model;
     this.buildAutocompleteTrie();
+    this.loadOutputPreference();
   },
   beforeDestroy() {
     document.removeEventListener('scroll', this.onScroll, true);
@@ -4041,6 +4356,24 @@ module.exports = app => app.component('models', {
         this.autocompleteTrie.bulkInsert(paths, 10);
       }
     },
+    loadOutputPreference() {
+      if (typeof window === 'undefined' || !window.localStorage) {
+        return;
+      }
+      const storedPreference = window.localStorage.getItem(OUTPUT_TYPE_STORAGE_KEY);
+      if (storedPreference === 'json' || storedPreference === 'table') {
+        this.outputType = storedPreference;
+      }
+    },
+    setOutputType(type) {
+      if (type !== 'json' && type !== 'table') {
+        return;
+      }
+      this.outputType = type;
+      if (typeof window !== 'undefined' && window.localStorage) {
+        window.localStorage.setItem(OUTPUT_TYPE_STORAGE_KEY, type);
+      }
+    },
     buildDocumentFetchParams(options = {}) {
       const params = {
         model: this.currentModel,
@@ -4480,41 +4813,52 @@ module.exports = app => app.component('models', {
     },
     handleDocumentClick(document, event) {
       if (this.selectMultiple) {
-        const documentIndex = this.documents.findIndex(doc => doc._id.toString() == document._id.toString());
-        if (event?.shiftKey && this.selectedDocuments.length > 0) {
-          const anchorIndex = this.lastSelectedIndex;
-          if (anchorIndex != null && anchorIndex !== -1 && documentIndex !== -1) {
-            const start = Math.min(anchorIndex, documentIndex);
-            const end = Math.max(anchorIndex, documentIndex);
-            const selectedDocumentIds = new Set(this.selectedDocuments.map(doc => doc._id.toString()));
-            for (let i = start; i <= end; i++) {
-              const docInRange = this.documents[i];
-              const existsInRange = selectedDocumentIds.has(docInRange._id.toString());
-              if (!existsInRange) {
-                this.selectedDocuments.push(docInRange);
-              }
+        this.handleDocumentSelection(document, event);
+      } else {
+        this.openDocument(document);
+      }
+    },
+    handleDocumentContainerClick(document, event) {
+      if (this.selectMultiple) {
+        this.handleDocumentSelection(document, event);
+      }
+    },
+    handleDocumentSelection(document, event) {
+      const documentIndex = this.documents.findIndex(doc => doc._id.toString() == document._id.toString());
+      if (event?.shiftKey && this.selectedDocuments.length > 0) {
+        const anchorIndex = this.lastSelectedIndex;
+        if (anchorIndex != null && anchorIndex !== -1 && documentIndex !== -1) {
+          const start = Math.min(anchorIndex, documentIndex);
+          const end = Math.max(anchorIndex, documentIndex);
+          const selectedDocumentIds = new Set(this.selectedDocuments.map(doc => doc._id.toString()));
+          for (let i = start; i <= end; i++) {
+            const docInRange = this.documents[i];
+            const existsInRange = selectedDocumentIds.has(docInRange._id.toString());
+            if (!existsInRange) {
+              this.selectedDocuments.push(docInRange);
             }
-            this.lastSelectedIndex = documentIndex;
-            return;
           }
+          this.lastSelectedIndex = documentIndex;
+          return;
         }
-        const index = this.selectedDocuments.findIndex(x => x._id.toString() == document._id.toString());
-        if (index !== -1) {
-          this.selectedDocuments.splice(index, 1);
-          if (this.selectedDocuments.length === 0) {
-            this.lastSelectedIndex = null;
-          } else {
-            const lastDoc = this.selectedDocuments[this.selectedDocuments.length - 1];
-            this.lastSelectedIndex = this.documents.findIndex(doc => doc._id.toString() == lastDoc._id.toString());
-          }
+      }
+      const index = this.selectedDocuments.findIndex(x => x._id.toString() == document._id.toString());
+      if (index !== -1) {
+        this.selectedDocuments.splice(index, 1);
+        if (this.selectedDocuments.length === 0) {
+          this.lastSelectedIndex = null;
         } else {
-          this.selectedDocuments.push(document);
-          this.lastSelectedIndex = documentIndex;
+          const lastDoc = this.selectedDocuments[this.selectedDocuments.length - 1];
+          this.lastSelectedIndex = this.documents.findIndex(doc => doc._id.toString() == lastDoc._id.toString());
         }
       } else {
-        this.$router.push('/model/' + this.currentModel + '/document/' + document._id);
+        this.selectedDocuments.push(document);
+        this.lastSelectedIndex = documentIndex;
       }
     },
+    openDocument(document) {
+      this.$router.push('/model/' + this.currentModel + '/document/' + document._id);
+    },
     async deleteDocuments() {
       const documentIds = this.selectedDocuments.map(x => x._id);
       await api.Model.deleteDocuments({
@@ -15932,7 +16276,7 @@ module.exports = function stringToParts(str) {
 /***/ ((module) => {
 
 "use strict";
-module.exports = /*#__PURE__*/JSON.parse('{"name":"@mongoosejs/studio","version":"0.0.136","description":"A sleek, powerful MongoDB UI with built-in dashboarding and auth, seamlessly integrated with your Express, Vercel, or Netlify app.","homepage":"https://studio.mongoosejs.io/","repository":{"type":"git","url":"https://github.com/mongoosejs/studio"},"license":"Apache-2.0","dependencies":{"archetype":"0.13.1","csv-stringify":"6.3.0","ejson":"^2.2.3","extrovert":"^0.1.0","marked":"15.0.12","node-inspect-extracted":"3.x","tailwindcss":"3.4.0","vanillatoasts":"^1.6.0","vue":"3.x","webpack":"5.x"},"peerDependencies":{"bson":"^5.5.1 || 6.x","express":"4.x","mongoose":"7.x || 8.x"},"devDependencies":{"@masteringjs/eslint-config":"0.1.1","axios":"1.2.2","dedent":"^1.6.0","eslint":"9.30.0","express":"4.x","mocha":"10.2.0","mongoose":"8.x"},"scripts":{"lint":"eslint .","tailwind":"tailwindcss -o ./frontend/public/tw.css","tailwind:watch":"tailwindcss -o ./frontend/public/tw.css --watch","test":"mocha test/*.test.js"}}');
+module.exports = /*#__PURE__*/JSON.parse('{"name":"@mongoosejs/studio","version":"0.0.138","description":"A sleek, powerful MongoDB UI with built-in dashboarding and auth, seamlessly integrated with your Express, Vercel, or Netlify app.","homepage":"https://studio.mongoosejs.io/","repository":{"type":"git","url":"https://github.com/mongoosejs/studio"},"license":"Apache-2.0","dependencies":{"archetype":"0.13.1","csv-stringify":"6.3.0","ejson":"^2.2.3","extrovert":"^0.1.0","marked":"15.0.12","node-inspect-extracted":"3.x","tailwindcss":"3.4.0","vanillatoasts":"^1.6.0","vue":"3.x","webpack":"5.x"},"peerDependencies":{"bson":"^5.5.1 || 6.x","express":"4.x","mongoose":"7.x || 8.x"},"devDependencies":{"@masteringjs/eslint-config":"0.1.1","axios":"1.2.2","dedent":"^1.6.0","eslint":"9.30.0","express":"4.x","mocha":"10.2.0","mongoose":"8.x"},"scripts":{"lint":"eslint .","tailwind":"tailwindcss -o ./frontend/public/tw.css","tailwind:watch":"tailwindcss -o ./frontend/public/tw.css --watch","test":"mocha test/*.test.js"}}');
 
 /***/ })