@mongoosejs/studio 0.3.11 → 0.4.1

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

@@ -20,7 +20,7 @@
       <span class="ml-2 text-sm text-content-tertiary">({{(path.instance || 'unknown').toLowerCase()}})</span>
       <div v-if="isGeoJsonGeometry" class="ml-3 inline-flex items-center gap-2">
         <div class="inline-flex items-center rounded-full bg-gray-200 p-0.5 text-xs font-semibold">
-          <button
+      <button
             type="button"
             class="rounded-full px-2.5 py-0.5 transition"
             :class="detailViewMode === 'text' ? 'bg-blue-600 text-white shadow' : 'text-content-secondary hover:text-content'"
@@ -76,6 +76,11 @@
         :path="path"
         @update:viewMode="dateViewMode = $event"
       ></date-view-mode-picker>
+      <objectid-view-mode-picker
+        v-if="isObjectIdPath"
+        :viewMode="objectIdViewMode"
+        @update:viewMode="objectIdViewMode = $event"
+      ></objectid-view-mode-picker>
       <button
         type="button"
         class="flex items-center gap-1 text-sm text-gray-600 hover:text-gray-800 px-2 py-1 rounded-md border border-transparent hover:border-edge-strong bg-surface"
@@ -202,7 +207,7 @@
         <component
           :is="getComponentForPath(path)"
           :value="rawValue"
-          :viewMode="isDatePath ? dateViewMode : detailViewMode"
+          :viewMode="isDatePath ? dateViewMode : (isObjectIdPath ? objectIdViewMode : detailViewMode)"
           @updated="renderedValue = $event"></component>
         <button
           @click="toggleValueExpansion"
@@ -219,7 +224,7 @@
         <component
           :is="getComponentForPath(path)"
           :value="rawValue"
-          :viewMode="isDatePath ? dateViewMode : detailViewMode"
+          :viewMode="isDatePath ? dateViewMode : (isObjectIdPath ? objectIdViewMode : detailViewMode)"
           @updated="renderedValue = $event"></component>
       </div>
     </div>

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

@@ -18,6 +18,7 @@ module.exports = app => app.component('document-property', {
     return {
       dateType: 'picker', // picker, iso
       dateViewMode: 'utc_iso',
+      objectIdViewMode: 'hex',
       renderedValue: UNSET,
       isCollapsed: false, // Start uncollapsed by default
       isValueExpanded: false, // Track if the value is expanded
@@ -38,6 +39,9 @@ module.exports = app => app.component('document-property', {
     isDatePath() {
       return this.path?.instance === 'Date';
     },
+    isObjectIdPath() {
+      return this.path?.instance === 'ObjectID' || this.path?.instance === 'ObjectId';
+    },
     rawValue() {
       return this.getValueForPath(this.path.path);
     },
@@ -177,6 +181,9 @@ module.exports = app => app.component('document-property', {
       if (schemaPath.instance === 'Date') {
         return 'detail-date';
       }
+      if (schemaPath.instance === 'ObjectID' || schemaPath.instance === 'ObjectId') {
+        return 'detail-objectid';
+      }
       return 'detail-default';
     },
     getEditComponentForPath(path) {

package/frontend/src/document-details/objectid-view-mode-picker/objectid-view-mode-picker.html

@@ -0,0 +1,12 @@
+<div class="flex items-center gap-2" @click.stop>
+  <select
+    :value="format"
+    @input="onFormatChange($event.target.value)"
+    class="text-xs border border-edge rounded-md bg-surface px-2 py-1"
+  >
+    <option value="hex">Hex string</option>
+    <option value="object_call">ObjectId('...')</option>
+    <option value="unix_seconds">Unix timestamp</option>
+    <option value="date">Date</option>
+  </select>
+</div>

package/frontend/src/document-details/objectid-view-mode-picker/objectid-view-mode-picker.js

@@ -0,0 +1,19 @@
+'use strict';
+
+const template = require('./objectid-view-mode-picker.html');
+
+module.exports = app => app.component('objectid-view-mode-picker', {
+  template,
+  props: ['viewMode'],
+  emits: ['update:viewMode'],
+  computed: {
+    format() {
+      return this.viewMode || 'hex';
+    }
+  },
+  methods: {
+    onFormatChange(newFormat) {
+      this.$emit('update:viewMode', newFormat);
+    }
+  }
+});

package/frontend/src/models/document-search/document-search.js

@@ -45,6 +45,12 @@ module.exports = app => app.component('document-search', {
     this.$refs.searchInput.focus();
   },
   methods: {
+    focusInput() {
+      const input = this.$refs.searchInput;
+      if (input && typeof input.focus === 'function') {
+        input.focus();
+      }
+    },
     emitSearch() {
       this.$emit('input', this.searchText);
       this.$emit('search', this.searchText);

package/frontend/src/models/models.html

@@ -263,14 +263,12 @@
           </span>
         </div>
         <div v-if="isProjectionMenuSelected && (outputType === 'table' || outputType === 'json')" class="flex items-center gap-2 w-full mt-2 flex-shrink-0">
-          <input
-            ref="projectionInput"
-            v-model="projectionText"
-            type="text"
-            placeholder="Projection: name email, or -password"
-            class="flex-1 min-w-0 rounded border border-edge bg-surface px-2 py-1.5 text-sm font-mono placeholder:text-content-tertiary focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
-            @focus="initProjection($event)"
-            @keydown.enter="applyProjectionFromInput()"
+          <projection-search
+            ref="projectionSearch"
+            :value="projectionText"
+            :schema-paths="schemaPaths"
+            @projection-input="projectionText = $event"
+            @apply="applyProjectionFromInput"
           />
         </div>
       </div>

package/frontend/src/models/models.js

@@ -16,58 +16,126 @@ const OUTPUT_TYPE_STORAGE_KEY = 'studio:model-output-type';
 const SELECTED_GEO_FIELD_STORAGE_KEY = 'studio:model-selected-geo-field';
 const SHOW_ROW_NUMBERS_STORAGE_KEY = 'studio:model-show-row-numbers';
 const PROJECTION_MODE_QUERY_KEY = 'projectionMode';
+const PROJECTION_INPUT_QUERY_KEY = 'projectionInput';
 const RECENTLY_VIEWED_MODELS_KEY = 'studio:recently-viewed-models';
 const MAX_RECENT_MODELS = 4;
+const FOCUS_AFTER_MODELS_REMOUNT_KEY = '__studioModelsFocusAfterRemount';
 
-/** Parse `fields` from the route (JSON array or inclusion projection object only). */
-function parseFieldsQueryParam(fields) {
-  if (fields == null || fields === '') {
-    return [];
-  }
-  const s = typeof fields === 'string' ? fields : String(fields);
-  const trimmed = s.trim();
-  if (!trimmed) {
-    return [];
+function setModelsRemountFocusIntent(target) {
+  if (typeof window === 'undefined') {
+    return;
   }
-  let parsed;
-  try {
-    parsed = JSON.parse(trimmed);
-  } catch (e) {
-    return [];
-  }
-  if (Array.isArray(parsed)) {
-    return parsed.map(x => String(x).trim()).filter(Boolean);
+  window[FOCUS_AFTER_MODELS_REMOUNT_KEY] = target;
+}
+
+function takeModelsRemountFocusIntent() {
+  if (typeof window === 'undefined') {
+    return null;
   }
-  if (parsed != null && typeof parsed === 'object') {
-    return Object.keys(parsed).filter(k =>
-      Object.prototype.hasOwnProperty.call(parsed, k) && parsed[k]
-    );
+  const v = window[FOCUS_AFTER_MODELS_REMOUNT_KEY] || null;
+  delete window[FOCUS_AFTER_MODELS_REMOUNT_KEY];
+  return v;
+}
+
+/**
+ * Split projection list tokens on commas/whitespace, merging a lone `-` or `+` with the next
+ * chunk so `- password` and `-password` both exclude `password`.
+ * @returns {string[]|null} null when a dangling `+`/`-` has no following field name.
+ */
+function normalizeProjectionTokens(trimmed) {
+  const rawTokens = trimmed.split(/[,\s]+/).filter(Boolean);
+  const tokens = [];
+  for (let i = 0; i < rawTokens.length; i++) {
+    const t = rawTokens[i];
+    if (t === '-' || t === '+') {
+      if (i + 1 >= rawTokens.length) {
+        return null;
+      }
+      tokens.push(t + rawTokens[++i]);
+    } else {
+      tokens.push(t);
+    }
   }
-  return [];
+  return tokens;
 }
 
-/** Pass through a valid JSON `fields` string for Model.getDocuments / getDocumentsStream. */
-function normalizeFieldsParamForApi(fieldsStr) {
-  if (fieldsStr == null || fieldsStr === '') {
+/**
+ * Parse projection object syntax like:
+ *   { deletedAt: 1 }
+ *   { "deletedAt": true, email: 1 }
+ *   { password: 0 }
+ *
+ * Supported values are 1/0/true/false (quoted or unquoted).
+ * Returns include paths, exclude-derived include paths, or null when invalid.
+ */
+function parseProjectionObjectNotation(trimmed, schemaPaths) {
+  if (!trimmed.startsWith('{') || !trimmed.endsWith('}')) {
     return null;
   }
-  const s = typeof fieldsStr === 'string' ? fieldsStr : String(fieldsStr);
-  const trimmed = s.trim();
-  if (!trimmed) {
-    return null;
+  const body = trimmed.slice(1, -1).trim();
+  if (!body) {
+    return [];
   }
-  try {
-    const parsed = JSON.parse(trimmed);
-    if (Array.isArray(parsed)) {
-      return trimmed;
+
+  const pairRe = /(?:^|,)\s*(?:"([^"]+)"|'([^']+)'|([a-zA-Z_$][\w.$]*))\s*:\s*("[^"]*"|'[^']*'|[^,]+?)\s*(?=,|$)/g;
+  const includeKeys = [];
+  const excludeKeys = [];
+  let matchedChars = '';
+  let match;
+
+  while ((match = pairRe.exec(body)) !== null) {
+    matchedChars += match[0];
+    const key = (match[1] || match[2] || match[3] || '').trim();
+    const rawValue = (match[4] || '').trim();
+    if (!key || !rawValue) {
+      return null;
     }
-    if (parsed != null && typeof parsed === 'object' && !Array.isArray(parsed)) {
-      return trimmed;
+
+    const valueLower = rawValue.replace(/^['"]|['"]$/g, '').trim().toLowerCase();
+    const isInclude = valueLower === '1' || valueLower === 'true';
+    const isExclude = valueLower === '0' || valueLower === 'false';
+    if (!isInclude && !isExclude) {
+      return null;
     }
-  } catch (e) {
+    if (isInclude) {
+      includeKeys.push(key);
+    } else {
+      excludeKeys.push(key);
+    }
+  }
+
+  // Reject malformed object strings where regex skipped segments.
+  const normalizedBody = body.replace(/\s+/g, '');
+  const normalizedMatched = matchedChars.replace(/\s+/g, '').replace(/^,/, '');
+  if (!normalizedMatched || normalizedMatched !== normalizedBody) {
     return null;
   }
-  return null;
+
+  const normalizeKey = (key) => String(key).trim();
+  if (includeKeys.length > 0 && excludeKeys.length > 0) {
+    const includeSet = new Set(includeKeys.map(normalizeKey));
+    for (const path of excludeKeys) {
+      const ex = normalizeKey(path);
+      for (const k of Array.from(includeSet)) {
+        if (k.toLowerCase() === ex.toLowerCase()) {
+          includeSet.delete(k);
+        }
+      }
+    }
+    if (includeSet.size === 0) {
+      return null;
+    }
+    return Array.from(includeSet);
+  }
+
+  if (excludeKeys.length > 0) {
+    const excludeNorm = excludeKeys.map(normalizeKey);
+    return schemaPaths
+      .map(p => p.path)
+      .filter(p => !excludeNorm.some(ex => ex === p || p.toLowerCase() === ex.toLowerCase()));
+  }
+
+  return includeKeys.map(normalizeKey);
 }
 
 module.exports = app => app.component('models', {
@@ -212,10 +280,19 @@ module.exports = app => app.component('models', {
       this.setOutputType('json');
     }
     this.$nextTick(() => {
-      if (!this.isProjectionMenuSelected) return;
-      const input = this.$refs.projectionInput;
-      if (input && typeof input.focus === 'function') {
-        input.focus();
+      const focusIntent = takeModelsRemountFocusIntent();
+      if (focusIntent === 'documentSearch') {
+        const ds = this.$refs.documentSearch;
+        if (ds && typeof ds.focusInput === 'function') {
+          ds.focusInput();
+        }
+        return;
+      }
+      if (focusIntent === 'projection' && this.isProjectionMenuSelected) {
+        const projectionSearch = this.$refs.projectionSearch;
+        if (projectionSearch && typeof projectionSearch.focusInput === 'function') {
+          projectionSearch.focusInput();
+        }
       }
     });
   },
@@ -622,21 +699,21 @@ module.exports = app => app.component('models', {
         params.searchText = this.searchText;
       }
 
-      // Prefer explicit URL projection (`query.fields`) so the first fetch after
-      // mount/remount respects deep-linked projections before `filteredPaths`
-      // is rehydrated from schema paths.
-      let fieldsParam = normalizeFieldsParamForApi(this.query?.fields);
-      if (!fieldsParam && this.isProjectionMenuSelected === true) {
+      const projectionInput = typeof this.query?.[PROJECTION_INPUT_QUERY_KEY] === 'string' ?
+        this.query[PROJECTION_INPUT_QUERY_KEY].trim() :
+        '';
+      if (projectionInput) {
+        params.projectionInput = projectionInput;
+      }
+
+      if (!projectionInput && this.isProjectionMenuSelected === true) {
         const fieldPaths = this.filteredPaths && this.filteredPaths.length > 0
           ? this.filteredPaths.map(p => p.path).filter(Boolean)
           : null;
         if (fieldPaths && fieldPaths.length > 0) {
-          fieldsParam = JSON.stringify(fieldPaths);
+          params.projectionInput = fieldPaths.join(' ');
         }
       }
-      if (fieldsParam) {
-        params.fields = fieldsParam;
-      }
 
       return params;
     },
@@ -671,13 +748,16 @@ module.exports = app => app.component('models', {
       if (this.currentModel != null) {
         await this.getDocuments();
       }
-      if (this.$route.query?.fields) {
-        const urlPaths = parseFieldsQueryParam(this.$route.query.fields);
-        if (urlPaths.length > 0) {
-          this.filteredPaths = urlPaths.map(path => this.schemaPaths.find(p => p.path === path)).filter(Boolean);
-          if (this.filteredPaths.length > 0) {
-            this.syncProjectionFromPaths();
-          }
+      const routeProjectionInput = this.$route.query?.[PROJECTION_INPUT_QUERY_KEY];
+      if (typeof routeProjectionInput === 'string' && routeProjectionInput.trim().length > 0) {
+        const urlPaths = this.normalizeProjectionPathsForDisplay(routeProjectionInput);
+        if (urlPaths !== null) {
+          const nextFiltered = urlPaths
+            .map(path => this.schemaPaths.find(p => p.path === path))
+            .filter(Boolean);
+          this.filteredPaths = nextFiltered;
+          this.selectedPaths = [...this.filteredPaths];
+          this.syncProjectionInputFromQueryOrPaths();
         }
       }
       this.status = 'loaded';
@@ -786,6 +866,7 @@ module.exports = app => app.component('models', {
       } else {
         delete this.query.search;
       }
+      setModelsRemountFocusIntent('documentSearch');
       const query = this.query;
       this.$router.push({ query });
       this.documents = [];
@@ -820,11 +901,13 @@ module.exports = app => app.component('models', {
       // Persist projection UI state in the URL so Reset/Suggest don't turn the mode off.
       if (next) {
         this.query[PROJECTION_MODE_QUERY_KEY] = '1';
+        setModelsRemountFocusIntent('projection');
         if (this.outputType === 'map') {
           this.setOutputType('json');
         }
       } else {
         delete this.query[PROJECTION_MODE_QUERY_KEY];
+        delete this.query[PROJECTION_INPUT_QUERY_KEY];
         delete this.query.fields;
         this.filteredPaths = [];
         this.selectedPaths = [];
@@ -970,14 +1053,25 @@ module.exports = app => app.component('models', {
             }
             const isProjectionModeOn = this.isProjectionMenuSelected === true;
             if (isProjectionModeOn) {
-              this.applyDefaultProjection(event.suggestedFields);
+              const routeProjectionInput = this.$route.query?.[PROJECTION_INPUT_QUERY_KEY];
+              if (typeof routeProjectionInput === 'string' && routeProjectionInput.trim().length > 0) {
+                const projectionPaths = this.normalizeProjectionPathsForDisplay(routeProjectionInput);
+                const fromProjectionInput = Array.isArray(projectionPaths) ?
+                  projectionPaths
+                  .map(path => this.schemaPaths.find(p => p.path === path))
+                  .filter(Boolean) :
+                  [];
+                this.filteredPaths = fromProjectionInput;
+              } else {
+                this.filteredPaths = [];
+              }
             } else {
               this.filteredPaths = [];
               this.selectedPaths = [];
               this.projectionText = '';
             }
             this.selectedPaths = [...this.filteredPaths];
-            this.syncProjectionFromPaths();
+            this.syncProjectionInputFromQueryOrPaths();
             schemaPathsReceived = true;
           }
           if (event.numDocs !== undefined) {
@@ -1058,6 +1152,10 @@ module.exports = app => app.component('models', {
       // Keep current filter input in sync with the URL so projection reset
       // does not unintentionally wipe the filter on remount.
       this.syncFilterToQuery();
+      if (this.$route.query?.fields) {
+        delete this.query.fields;
+      }
+      delete this.query[PROJECTION_INPUT_QUERY_KEY];
       this.filteredPaths = [];
       this.selectedPaths = [];
       this.projectionText = '';
@@ -1080,18 +1178,9 @@ module.exports = app => app.component('models', {
       this.applyDefaultProjection(pathNames.slice(0, DEFAULT_FIRST_N_FIELDS));
       this.selectedPaths = [...this.filteredPaths];
       this.syncProjectionFromPaths();
+      setModelsRemountFocusIntent('projection');
       this.updateProjectionQuery();
     },
-    initProjection(ev) {
-      if (!this.projectionText || !this.projectionText.trim()) {
-        this.projectionText = '';
-        this.$nextTick(() => {
-          if (ev && ev.target) {
-            ev.target.setSelectionRange(0, 0);
-          }
-        });
-      }
-    },
     syncProjectionFromPaths() {
       if (this.filteredPaths.length === 0) {
         this.projectionText = '';
@@ -1101,6 +1190,29 @@ module.exports = app => app.component('models', {
       // Since `filteredPaths` represents the final include set, we serialize as space-separated fields.
       this.projectionText = this.filteredPaths.map(p => p.path).join(' ');
     },
+    syncProjectionInputFromQueryOrPaths() {
+      const fromQuery = this.$route.query?.[PROJECTION_INPUT_QUERY_KEY];
+      if (typeof fromQuery === 'string' && fromQuery.trim().length > 0) {
+        this.projectionText = fromQuery;
+        return;
+      }
+      this.syncProjectionFromPaths();
+    },
+    normalizeProjectionPathsForDisplay(text) {
+      const paths = this.parseProjectionInput(text);
+      if (paths == null) {
+        return null;
+      }
+      const excludesId = this.projectionExplicitlyExcludesId(text);
+      const hasIdSchemaPath = this.schemaPaths.some(p => p.path === '_id');
+      if (hasIdSchemaPath && !excludesId) {
+        const hasIdAlready = paths.some(p => String(p).toLowerCase() === '_id');
+        if (!hasIdAlready) {
+          paths.unshift('_id');
+        }
+      }
+      return paths;
+    },
     parseProjectionInput(text) {
       if (!text || typeof text !== 'string') {
         return [];
@@ -1111,17 +1223,21 @@ module.exports = app => app.component('models', {
       }
       const normalizeKey = (key) => String(key).trim();
 
-      // String-only projection syntax:
+      // String projection syntax:
       //   name email
       //   -password   (exclusion-only)
       //   +email      (inclusion-only)
+      //   { deletedAt: 1 } (object notation)
       //
-      // Brace/object syntax is intentionally NOT supported.
-      if (trimmed.startsWith('{') || trimmed.endsWith('}')) {
-        return null;
+      // For object notation, return include paths based on 1/0/true/false values.
+      if (trimmed.startsWith('{') && trimmed.endsWith('}')) {
+        return parseProjectionObjectNotation(trimmed, this.schemaPaths);
       }
 
-      const tokens = trimmed.split(/[,\s]+/).filter(Boolean);
+      const tokens = normalizeProjectionTokens(trimmed);
+      if (tokens === null) {
+        return null;
+      }
       if (tokens.length === 0) return [];
 
       const includeKeys = [];
@@ -1150,22 +1266,78 @@ module.exports = app => app.component('models', {
         // `name email createdAt -email` -> `name createdAt`.
         const includeSet = new Set(includeKeys.map(normalizeKey));
         for (const path of excludeKeys) {
-          includeSet.delete(normalizeKey(path));
+          const ex = normalizeKey(path);
+          for (const k of Array.from(includeSet)) {
+            if (k.toLowerCase() === ex.toLowerCase()) {
+              includeSet.delete(k);
+            }
+          }
+        }
+        if (includeSet.size === 0) {
+          return null;
         }
         return Array.from(includeSet);
       }
 
       if (excludeKeys.length > 0) {
-        const excludeSet = new Set(excludeKeys.map(normalizeKey));
-        return this.schemaPaths.map(p => p.path).filter(p => !excludeSet.has(p));
+        const excludeNorm = excludeKeys.map(normalizeKey);
+        return this.schemaPaths
+          .map(p => p.path)
+          .filter(p => !excludeNorm.some(ex => ex === p || p.toLowerCase() === ex.toLowerCase()));
       }
 
       return includeKeys.map(normalizeKey);
     },
+    projectionExplicitlyExcludesId(text) {
+      if (!text || typeof text !== 'string') {
+        return false;
+      }
+      const trimmed = text.trim();
+      if (!trimmed) {
+        return false;
+      }
+
+      if (trimmed.startsWith('{') && trimmed.endsWith('}')) {
+        const body = trimmed.slice(1, -1).trim();
+        if (!body) {
+          return false;
+        }
+        const pairRe = /(?:^|,)\s*(?:"([^"]+)"|'([^']+)'|([a-zA-Z_$][\w.$]*))\s*:\s*("[^"]*"|'[^']*'|[^,]+?)\s*(?=,|$)/g;
+        let match;
+        while ((match = pairRe.exec(body)) !== null) {
+          const key = (match[1] || match[2] || match[3] || '').trim();
+          if (!key || key.toLowerCase() !== '_id') {
+            continue;
+          }
+          const rawValue = (match[4] || '').trim();
+          const valueLower = rawValue.replace(/^['"]|['"]$/g, '').trim().toLowerCase();
+          if (valueLower === '0' || valueLower === 'false') {
+            return true;
+          }
+        }
+        return false;
+      }
+
+      const tokens = normalizeProjectionTokens(trimmed);
+      if (!tokens) {
+        return false;
+      }
+      return tokens.some((rawToken) => {
+        const token = rawToken.trim();
+        return token.toLowerCase() === '-_id';
+      });
+    },
     applyProjectionFromInput() {
-      const paths = this.parseProjectionInput(this.projectionText);
-      if (paths === null) {
-        this.syncProjectionFromPaths();
+      if (typeof this.projectionText === 'string' && this.projectionText.trim().length === 0) {
+        this.filteredPaths = [];
+        this.selectedPaths = [];
+        setModelsRemountFocusIntent('projection');
+        this.updateProjectionQuery();
+        return;
+      }
+
+      const paths = this.normalizeProjectionPathsForDisplay(this.projectionText);
+      if (paths == null) {
         return;
       }
       if (paths.length === 0) {
@@ -1187,16 +1359,16 @@ module.exports = app => app.component('models', {
         }
       }
       this.selectedPaths = [...this.filteredPaths];
-      this.syncProjectionFromPaths();
+      setModelsRemountFocusIntent('projection');
       this.updateProjectionQuery();
     },
     updateProjectionQuery() {
-      const paths = this.filteredPaths.map(x => x.path).filter(Boolean);
-      if (paths.length > 0) {
-        this.query.fields = JSON.stringify(paths);
+      if (typeof this.projectionText === 'string' && this.projectionText.trim().length > 0) {
+        this.query[PROJECTION_INPUT_QUERY_KEY] = this.projectionText;
       } else {
-        delete this.query.fields;
+        delete this.query[PROJECTION_INPUT_QUERY_KEY];
       }
+      delete this.query.fields;
       this.$router.push({ query: this.query });
     },
     removeField(schemaPath) {

package/frontend/src/models/projection-search/projection-search.html

@@ -0,0 +1,27 @@
+<div class="relative flex-grow m-0">
+  <input
+    ref="projectionInput"
+    class="w-full min-w-0 rounded border border-edge bg-surface px-2 py-1.5 text-sm font-mono placeholder:text-content-tertiary focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
+    type="text"
+    placeholder="Projection: name email, or -password"
+    v-model="projectionText"
+    @focus="initProjection"
+    @input="handleInput"
+    @keydown="handleKeyDown"
+    @blur="hideAutocomplete"
+  />
+  <ul
+    v-if="autocompleteSuggestions.length"
+    class="absolute left-0 right-0 top-full z-[9999] mt-1 max-h-40 overflow-y-auto rounded border border-edge bg-surface shadow"
+  >
+    <li
+      v-for="(suggestion, index) in autocompleteSuggestions"
+      :key="suggestion"
+      class="cursor-pointer px-2 py-1 text-sm font-mono"
+      :class="{ 'bg-primary-subtle': index === autocompleteIndex }"
+      @mousedown.prevent="applySuggestion(index)"
+    >
+      {{ suggestion }}
+    </li>
+  </ul>
+</div>