@mongoosejs/studio 0.0.36 → 0.0.37

package/frontend/public/app.js

@@ -2582,7 +2582,7 @@ module.exports = "<div>\n  <div v-if=\"Array.isArray(result)\">\n    <div v-for=
 /***/ ((module) => {
 
 "use strict";
-module.exports = "<div class=\"dashboard px-1\">\n  <div v-if=\"dashboard\" class=\"max-w-5xl mx-auto\">\n    <div class=\"flex items-center w-full\">\n      <h2 class=\"mt-4 mb-4 text-gray-900 font-semibold text-xl grow shrink\">{{title}}</h2>\n      <div>\n        <button\n          v-if=\"!showEditor\"\n          @click=\"showEditor = true\"\n          type=\"button\"\n          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\">\n          <img src=\"images/edit.svg\" class=\"inline h-[1em]\" /> Edit\n        </button>\n      </div>\n    </div>\n    <div v-if=\"!showEditor\" class=\"mt-4 mb-4\">\n      <dashboard-result :result=\"result\"></dashboard-result>\n    </div>\n    <div v-if=\"showEditor\">\n      <edit-dashboard\n        :dashboardId=\"dashboard._id\"\n        :code=\"code\"\n        :currentDescription=\"description\"\n        :currentTitle=\"title\"\n        @close=\"showEditor=false;\"\n        @update=\"updateCode\"></edit-dashboard>\n    </div>\n    \n  </div>\n  <div v-if=\"!dashboard && status === 'loaded'\">\n    No dashboard with the given id could be found.\n  </div>\n</div>";
+module.exports = "<div class=\"dashboard px-1\">\n  <div v-if=\"status === 'loading'\" class=\"max-w-5xl mx-auto text-center\">\n    <img src=\"images/loader.gif\" class=\"inline\">\n  </div>\n  <div v-if=\"dashboard && status === 'loaded'\" class=\"max-w-5xl mx-auto\">\n    <div class=\"flex items-center w-full\">\n      <h2 class=\"mt-4 mb-4 text-gray-900 font-semibold text-xl grow shrink\">{{title}}</h2>\n      <div>\n        <button\n          v-if=\"!showEditor\"\n          @click=\"showEditor = true\"\n          type=\"button\"\n          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\">\n          <img src=\"images/edit.svg\" class=\"inline h-[1em]\" /> Edit\n        </button>\n      </div>\n    </div>\n    <div v-if=\"!showEditor\" class=\"mt-4 mb-4\">\n      <dashboard-result :result=\"result\"></dashboard-result>\n    </div>\n    <div v-if=\"showEditor\">\n      <edit-dashboard\n        :dashboardId=\"dashboard._id\"\n        :code=\"code\"\n        :currentDescription=\"description\"\n        :currentTitle=\"title\"\n        @close=\"showEditor=false;\"\n        @update=\"updateCode\"></edit-dashboard>\n    </div>\n    \n  </div>\n  <div v-if=\"!dashboard && status === 'loaded'\">\n    No dashboard with the given id could be found.\n  </div>\n</div>\n";
 
 /***/ }),
 

package/frontend/public/tw.css

@@ -1227,11 +1227,6 @@ video {
   color: rgb(153 27 27 / var(--tw-text-opacity));
 }
 
-.text-sky-600 {
-  --tw-text-opacity: 1;
-  color: rgb(2 132 199 / var(--tw-text-opacity));
-}
-
 .text-sky-800 {
   --tw-text-opacity: 1;
   color: rgb(7 89 133 / var(--tw-text-opacity));

package/frontend/src/dashboard/dashboard.html

@@ -1,5 +1,8 @@
 <div class="dashboard px-1">
-  <div v-if="dashboard" class="max-w-5xl mx-auto">
+  <div v-if="status === 'loading'" class="max-w-5xl mx-auto text-center">
+    <img src="images/loader.gif" class="inline mt-10">
+  </div>
+  <div v-if="dashboard && status === 'loaded'" class="max-w-5xl mx-auto">
     <div class="flex items-center w-full">
       <h2 class="mt-4 mb-4 text-gray-900 font-semibold text-xl grow shrink">{{title}}</h2>
       <div>
@@ -29,4 +32,4 @@
   <div v-if="!dashboard && status === 'loaded'">
     No dashboard with the given id could be found.
   </div>
-</div>
+</div>

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

@@ -1,10 +1,13 @@
 <div class="document-details">
-  <document-property
-    :document="document"
-    :schemaPaths="schemaPaths"
-    :editting="editting"
-    :changes="changes"
-    :invalid="invalid"></document-property>
+  <div v-for="path in schemaPaths" class="value">
+    <document-property
+      :path="path"
+      :document="document"
+      :schemaPaths="schemaPaths"
+      :editting="editting"
+      :changes="changes"
+      :invalid="invalid"></document-property>
+  </div>
   <div v-for="path in virtuals" class="mb-2">
     <div class="p-1 mb-1 bg-slate-100">
       {{path.name}}

package/frontend/src/document-details/document-property/document-property.html

@@ -1,47 +1,45 @@
 <div>
-  <div v-for="path in schemaPaths" class="value">
-    <div class="relative path-key p-1 flex">
-      <div class="grow">
-        {{path.path}}
-        <span class="path-type">
-          ({{(path.instance || 'unknown').toLowerCase()}})
-        </span>
-      </div>
-      <div v-if="editting && path.instance === 'Date'" class="flex gap-1.5">
+  <div class="relative path-key p-1 flex">
+    <div class="grow">
+      {{path.path}}
+      <span class="path-type">
+        ({{(path.instance || 'unknown').toLowerCase()}})
+      </span>
+    </div>
+    <div v-if="editting && path.instance === 'Date'" class="flex gap-1.5">
+      <div
+        @click="dateType = 'picker'"
+        :class="dateType === 'picker' ? 'bg-teal-600' : ''"
+        class="self-stretch px-2 py-1 rounded-sm justify-center items-center gap-1.5 flex cursor-pointer">
         <div
-          @click="dateType = 'picker'"
-          :class="dateType === 'picker' ? 'bg-white' : ''"
-          class="self-stretch px-2 py-1 rounded-sm justify-center items-center gap-1.5 flex cursor-pointer">
-          <div
-            :class="dateType === 'picker' ? 'text-sky-600' : 'text-black'"
-            class="text-xs font-medium font-['Lato'] capitalize leading-tight">
-            Date Picker
-          </div>
+          :class="dateType === 'picker' ? 'text-white' : ''"
+          class="text-xs font-medium font-['Lato'] capitalize leading-tight">
+          Date Picker
         </div>
+      </div>
+      <div
+        @click="dateType = 'iso'"
+        :class="dateType === 'iso' ? 'bg-teal-600' : ''"
+        class="self-stretch px-2 py-1 rounded-sm justify-center items-center gap-1.5 flex cursor-pointer">
         <div
-          @click="dateType = 'iso'"
-          :class="dateType === 'iso' ? 'bg-white' : ''"
-          class="self-stretch px-2 py-1 rounded-sm justify-center items-center gap-1.5 flex cursor-pointer">
-          <div
-            :class="dateType === 'iso' ? 'text-sky-600' : 'text-black'"
-            class="text-xs font-medium font-['Lato'] capitalize leading-tight">
-            ISO String
-          </div>
+          :class="dateType === 'iso' ? 'text-white' : ''"
+          class="text-xs font-medium font-['Lato'] capitalize leading-tight">
+          ISO String
         </div>
       </div>
     </div>
-    <div v-if="editting && path.path !== '_id'" class="pl-1">
-      <component
-        :is="getEditComponentForPath(path)"
-        :value="getEditValueForPath(path)"
-        :format="dateType"
-        @input="changes[path.path] = $event; delete invalid[path.path];"
-        @error="invalid[path.path] = $event;"
-        >
-      </component>
-    </div>
-    <div v-else class="pl-1">
-      <component :is="getComponentForPath(path)" :value="getValueForPath(path.path)"></component>
-    </div>
+  </div>
+  <div v-if="editting && path.path !== '_id'" class="pl-1">
+    <component
+      :is="getEditComponentForPath(path)"
+      :value="getEditValueForPath(path)"
+      :format="dateType"
+      @input="changes[path.path] = $event; delete invalid[path.path];"
+      @error="invalid[path.path] = $event;"
+      >
+    </component>
+  </div>
+  <div v-else class="pl-1">
+    <component :is="getComponentForPath(path)" :value="getValueForPath(path.path)"></component>
   </div>
 </div>

package/frontend/src/document-details/document-property/document-property.js

@@ -14,7 +14,7 @@ module.exports = app => app.component('document-property', {
       dateType: 'picker' // picker, iso
     }
   },
-  props: ['document', 'schemaPaths', 'editting', 'changes', 'invalid'],
+  props: ['path', 'document', 'schemaPaths', 'editting', 'changes', 'invalid'],
   methods: {
     getComponentForPath(schemaPath) {
       if (schemaPath.instance === 'Array') {

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@mongoosejs/studio",
-  "version": "0.0.36",
+  "version": "0.0.37",
   "dependencies": {
     "archetype": "0.13.0",
     "csv-stringify": "6.3.0",
     "ejson": "^2.2.3",
     "extrovert": "0.0.24",
     "node-inspect-extracted": "3.x",
-    "openai": "3.2.1",
+    "openai": "3.x",
     "vanillatoasts": "^1.6.0"
   },
   "peerDependencies": {