@mongoosejs/studio 0.5.6 → 0.5.8

package/frontend/src/custom-date-picker/custom-date-picker.html

@@ -0,0 +1,183 @@
+<div
+  class="custom-date-picker"
+  :class="rootClasses"
+>
+  <div :class="horizontal ? 'flex gap-3 items-start' : ''">
+    <div :class="[horizontal ? 'shrink-0' : '', calendarSectionClass]">
+      <div class="flex items-center justify-between gap-1 mb-1" :class="mini ? 'mb-0.5' : 'mb-2'">
+        <button
+          type="button"
+          class="shrink-0 flex items-center justify-center rounded border border-edge-strong hover:bg-surface-hover text-content-secondary"
+          :class="mini ? 'w-5 h-5 text-[10px]' : 'w-7 h-7'"
+          aria-label="Previous month"
+          @click="prevMonth"
+        >‹</button>
+        <span
+          class="flex-1 min-w-0 text-center font-medium text-content-primary truncate"
+          :class="mini ? 'text-[10px]' : ''"
+        >{{ monthLabel }}</span>
+        <button
+          type="button"
+          class="shrink-0 flex items-center justify-center rounded border border-edge-strong hover:bg-surface-hover text-content-secondary"
+          :class="mini ? 'w-5 h-5 text-[10px]' : 'w-7 h-7'"
+          aria-label="Next month"
+          @click="nextMonth"
+        >›</button>
+      </div>
+
+      <div class="grid grid-cols-7 gap-px mb-0.5">
+        <div
+          v-for="label in weekdayLabels"
+          :key="label"
+          class="flex items-center justify-center text-center text-content-tertiary font-medium min-w-0"
+          :class="[
+            dayCellClass,
+            mini ? 'text-[9px]' : (compact ? 'text-[10px]' : 'text-xs')
+          ]"
+        >{{ mini ? label.charAt(0) : label }}</div>
+      </div>
+
+      <div class="grid grid-cols-7 gap-px">
+        <button
+          v-for="day in calendarDays"
+          :key="day.key"
+          type="button"
+          class="min-w-0 w-full flex items-center justify-center rounded transition-colors"
+          :class="[
+            dayCellClass,
+            mini ? 'text-[10px]' : (compact ? 'text-xs' : 'text-sm'),
+            dayClasses(day)
+          ]"
+          :aria-label="day.label"
+          :aria-pressed="isSelectedDay(day)"
+          @click="selectDay(day)"
+        >{{ day.label }}</button>
+      </div>
+    </div>
+
+    <div
+      v-if="showTime"
+      :class="timeSectionClasses"
+      @mousedown.stop
+    >
+      <div
+        class="text-content-secondary"
+        :class="[
+          horizontal ? 'mb-1 text-xs' : 'mb-2',
+          mini ? 'text-xs' : (horizontal ? '' : 'text-sm')
+        ]"
+      >Time</div>
+      <div class="relative flex items-center justify-center">
+        <div
+          class="pointer-events-none absolute inset-x-0 top-1/2 -translate-y-1/2 border-y border-edge-strong bg-surface-hover/40"
+          :class="wheelHighlightClass"
+          aria-hidden="true"
+        ></div>
+        <div class="relative flex items-center justify-center gap-1">
+          <div
+            ref="hourWheel"
+            class="wheel-column"
+            :class="[wheelListClass, wheelColumnClass]"
+            :style="wheelListStyle"
+            @scroll="onHourWheelScroll"
+          >
+            <div
+              v-for="n in wheelPadCount"
+              :key="'hour-pad-top-' + n"
+              :class="wheelItemClass"
+              aria-hidden="true"
+            ></div>
+            <button
+              v-for="h in hourOptions"
+              :key="'hour-' + h"
+              type="button"
+              :class="[wheelItemClass, wheelItemClasses(h, hour)]"
+              :aria-label="'Hour ' + h"
+              :aria-selected="hour === h"
+              @click="selectHour(h)"
+            >{{ formatWheelValue(h) }}</button>
+            <div
+              v-for="n in wheelPadCount"
+              :key="'hour-pad-bottom-' + n"
+              :class="wheelItemClass"
+              aria-hidden="true"
+            ></div>
+          </div>
+          <span class="text-content-secondary font-medium" :class="mini ? 'text-sm' : 'text-base'">:</span>
+          <div
+            ref="minuteWheel"
+            class="wheel-column"
+            :class="[wheelListClass, wheelColumnClass]"
+            :style="wheelListStyle"
+            @scroll="onMinuteWheelScroll"
+          >
+            <div
+              v-for="n in wheelPadCount"
+              :key="'minute-pad-top-' + n"
+              :class="wheelItemClass"
+              aria-hidden="true"
+            ></div>
+            <button
+              v-for="m in minuteOptions"
+              :key="'minute-' + m"
+              type="button"
+              :class="[wheelItemClass, wheelItemClasses(m, minute)]"
+              :aria-label="'Minute ' + m"
+              :aria-selected="minute === m"
+              @click="selectMinute(m)"
+            >{{ formatWheelValue(m) }}</button>
+            <div
+              v-for="n in wheelPadCount"
+              :key="'minute-pad-bottom-' + n"
+              :class="wheelItemClass"
+              aria-hidden="true"
+            ></div>
+          </div>
+          <span class="text-content-secondary font-medium" :class="mini ? 'text-sm' : 'text-base'">:</span>
+          <div
+            ref="secondWheel"
+            class="wheel-column"
+            :class="[wheelListClass, wheelColumnClass]"
+            :style="wheelListStyle"
+            @scroll="onSecondWheelScroll"
+          >
+            <div
+              v-for="n in wheelPadCount"
+              :key="'second-pad-top-' + n"
+              :class="wheelItemClass"
+              aria-hidden="true"
+            ></div>
+            <button
+              v-for="s in secondOptions"
+              :key="'second-' + s"
+              type="button"
+              :class="[wheelItemClass, wheelItemClasses(s, second)]"
+              :aria-label="'Second ' + s"
+              :aria-selected="second === s"
+              @click="selectSecond(s)"
+            >{{ formatWheelValue(s) }}</button>
+            <div
+              v-for="n in wheelPadCount"
+              :key="'second-pad-bottom-' + n"
+              :class="wheelItemClass"
+              aria-hidden="true"
+            ></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div
+    class="flex justify-end items-center gap-2"
+    :class="mini ? 'mt-1' : 'mt-2'"
+  >
+    <button
+      v-if="!immediate"
+      type="button"
+      class="text-xs font-medium text-white bg-merlot-700 hover:bg-merlot-800 px-2 py-1 rounded"
+      :class="mini ? 'py-0.5 px-1.5' : ''"
+      @click="commit"
+    >Apply</button>
+  </div>
+</div>

package/frontend/src/custom-date-picker/custom-date-picker.js

@@ -0,0 +1,407 @@
+'use strict';
+
+const template = require('./custom-date-picker.html');
+const {
+  dateToDatetimeLocal,
+  dateToDateOnly,
+  parseValueToDate,
+  buildCalendarDays,
+  clampInt,
+  isSameDay,
+  pad2,
+  WEEKDAY_LABELS,
+  MONTH_LABELS
+} = require('../_util/calendar');
+
+const WHEEL_PAD = 2;
+const HOUR_OPTIONS = Array.from({ length: 24 }, (_, i) => i);
+const MINUTE_OPTIONS = Array.from({ length: 60 }, (_, i) => i);
+const SECOND_OPTIONS = Array.from({ length: 60 }, (_, i) => i);
+
+function timePartsFromDate(date) {
+  if (!date) {
+    return { hour: 0, minute: 0, second: 0, millisecond: 0 };
+  }
+  return {
+    hour: date.getHours(),
+    minute: date.getMinutes(),
+    second: date.getSeconds(),
+    millisecond: date.getMilliseconds()
+  };
+}
+
+module.exports = app => app.component('custom-date-picker', {
+  template,
+  props: {
+    value: {
+      default: null
+    },
+    mode: {
+      type: String,
+      default: 'datetime' // 'date' | 'datetime'
+    },
+    compact: {
+      type: Boolean,
+      default: false
+    },
+    mini: {
+      type: Boolean,
+      default: false
+    },
+    immediate: {
+      type: Boolean,
+      default: true
+    },
+    horizontal: {
+      type: Boolean,
+      default: false
+    },
+    embedded: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['input', 'commit'],
+  data() {
+    const selected = parseValueToDate(this.value);
+    const anchor = selected || new Date();
+    const time = timePartsFromDate(anchor);
+    return {
+      viewYear: anchor.getFullYear(),
+      viewMonth: anchor.getMonth(),
+      selectedDate: anchor,
+      hour: time.hour,
+      minute: time.minute,
+      second: time.second,
+      millisecond: time.millisecond,
+      pendingValue: null,
+      wheelScrollLock: false,
+      timeApplyTimer: null,
+      hourOptions: HOUR_OPTIONS,
+      minuteOptions: MINUTE_OPTIONS,
+      secondOptions: SECOND_OPTIONS
+    };
+  },
+  watch: {
+    value() {
+      this.syncFromValue();
+    },
+    horizontal() {
+      this.$nextTick(() => this.scrollWheelsToValues());
+    }
+  },
+  computed: {
+    rootClasses() {
+      const sizeClass = this.mini
+        ? 'p-0.5 text-[10px]'
+        : (this.compact ? 'p-2 text-xs' : 'p-3 text-sm');
+      const chromeClass = this.embedded
+        ? ''
+        : (this.mini ? '' : 'bg-surface border border-edge-strong rounded-md shadow-sm');
+      return [sizeClass, chromeClass];
+    },
+    timeSectionClasses() {
+      if (this.horizontal) {
+        return 'flex-1 min-w-0 border-l border-edge-strong pl-2';
+      }
+      return [
+        'border-t border-edge-strong',
+        this.mini ? 'mt-1 pt-1' : 'mt-3 pt-3'
+      ];
+    },
+    wheelPadCount() {
+      return 2;
+    },
+    wheelVisibleRows() {
+      return 5;
+    },
+    weekdayLabels() {
+      return WEEKDAY_LABELS;
+    },
+    monthLabel() {
+      return `${MONTH_LABELS[this.viewMonth]} ${this.viewYear}`;
+    },
+    calendarDays() {
+      return buildCalendarDays(this.viewYear, this.viewMonth);
+    },
+    today() {
+      const now = new Date();
+      return new Date(now.getFullYear(), now.getMonth(), now.getDate());
+    },
+    showTime() {
+      return this.mode === 'datetime';
+    },
+    dayCellClass() {
+      if (this.mini) {
+        return 'h-6';
+      }
+      if (this.compact) {
+        return 'h-7';
+      }
+      return 'aspect-square';
+    },
+    calendarSectionClass() {
+      if (this.mini) return 'w-36';
+      if (this.compact) return 'w-44';
+      return 'w-48';
+    },
+    wheelItemPx() {
+      if (this.mini) {
+        return 32;
+      }
+      if (this.compact) {
+        return 36;
+      }
+      return 40;
+    },
+    wheelListClass() {
+      return [
+        'overflow-y-auto overscroll-y-contain snap-y snap-mandatory',
+        '[-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden'
+      ];
+    },
+    wheelListStyle() {
+      return {
+        height: `${this.wheelItemPx * this.wheelVisibleRows}px`
+      };
+    },
+    wheelItemClass() {
+      return [
+        'snap-center shrink-0 w-full flex items-center justify-center font-mono transition-colors',
+        this.mini ? 'h-8 text-sm' : (this.compact ? 'h-9 text-sm' : 'h-10 text-base')
+      ];
+    },
+    wheelHighlightClass() {
+      return this.mini ? 'h-8' : (this.compact ? 'h-9' : 'h-10');
+    },
+    wheelColumnClass() {
+      return this.mini ? 'w-11' : (this.compact ? 'w-12' : 'w-14');
+    }
+  },
+  mounted() {
+    this.$nextTick(() => this.scrollWheelsToValues());
+  },
+  beforeUnmount() {
+    if (this.timeApplyTimer) {
+      clearTimeout(this.timeApplyTimer);
+    }
+  },
+  methods: {
+    syncFromValue() {
+      const selected = parseValueToDate(this.value);
+      const anchor = selected || new Date();
+      this.selectedDate = anchor;
+      this.viewYear = anchor.getFullYear();
+      this.viewMonth = anchor.getMonth();
+      const time = timePartsFromDate(anchor);
+      this.hour = time.hour;
+      this.minute = time.minute;
+      this.second = time.second;
+      this.millisecond = time.millisecond;
+      this.$nextTick(() => this.scrollWheelsToValues());
+    },
+    clampedTimeParts() {
+      return {
+        hour: clampInt(this.hour, 0, 23),
+        minute: clampInt(this.minute, 0, 59),
+        second: clampInt(this.second, 0, 59),
+        millisecond: clampInt(this.millisecond, 0, 999)
+      };
+    },
+    formatWheelValue(value) {
+      return pad2(value);
+    },
+    wheelItemClasses(value, selectedValue) {
+      return value === selectedValue
+        ? 'text-content-primary font-semibold'
+        : 'text-content-tertiary hover:text-content-secondary';
+    },
+    wheelIndexFromScroll(el, max) {
+      return clampInt(Math.round(el.scrollTop / this.wheelItemPx), 0, max);
+    },
+    scrollWheelTo(el, index) {
+      if (!el) {
+        return;
+      }
+      el.scrollTop = index * this.wheelItemPx;
+    },
+    scrollWheelsToValues() {
+      this.wheelScrollLock = true;
+      this.scrollWheelTo(this.$refs.hourWheel, this.hour);
+      this.scrollWheelTo(this.$refs.minuteWheel, this.minute);
+      this.scrollWheelTo(this.$refs.secondWheel, this.second);
+      requestAnimationFrame(() => {
+        this.wheelScrollLock = false;
+      });
+    },
+    scheduleTimeApply() {
+      if (this.timeApplyTimer) {
+        clearTimeout(this.timeApplyTimer);
+      }
+      this.timeApplyTimer = setTimeout(() => {
+        this.timeApplyTimer = null;
+        this.applyTimeToSelection();
+      }, 120);
+    },
+    onHourWheelScroll(event) {
+      if (this.wheelScrollLock) {
+        return;
+      }
+      const hour = this.wheelIndexFromScroll(event.target, 23);
+      if (hour === this.hour) {
+        return;
+      }
+      this.hour = hour;
+      this.scheduleTimeApply();
+    },
+    onMinuteWheelScroll(event) {
+      if (this.wheelScrollLock) {
+        return;
+      }
+      const minute = this.wheelIndexFromScroll(event.target, 59);
+      if (minute === this.minute) {
+        return;
+      }
+      this.minute = minute;
+      this.scheduleTimeApply();
+    },
+    onSecondWheelScroll(event) {
+      if (this.wheelScrollLock) {
+        return;
+      }
+      const second = this.wheelIndexFromScroll(event.target, 59);
+      if (second === this.second) {
+        return;
+      }
+      this.second = second;
+      this.scheduleTimeApply();
+    },
+    selectHour(hour) {
+      this.hour = hour;
+      this.scrollWheelTo(this.$refs.hourWheel, hour);
+      this.applyTimeToSelection();
+    },
+    selectMinute(minute) {
+      this.minute = minute;
+      this.scrollWheelTo(this.$refs.minuteWheel, minute);
+      this.applyTimeToSelection();
+    },
+    selectSecond(second) {
+      this.second = second;
+      this.scrollWheelTo(this.$refs.secondWheel, second);
+      this.applyTimeToSelection();
+    },
+    dayClasses(day) {
+      const selected = this.selectedDate;
+      const isSelected = selected && isSameDay(day.date, selected);
+      const isToday = isSameDay(day.date, this.today);
+      return {
+        'text-content-tertiary': !day.inMonth,
+        'bg-merlot-700 text-white hover:bg-merlot-800': isSelected,
+        'hover:bg-surface-hover': day.inMonth && !isSelected,
+        'ring-1 ring-merlot-700 ring-inset': isToday && !isSelected && day.inMonth,
+        'font-medium': day.inMonth
+      };
+    },
+    prevMonth() {
+      if (this.viewMonth === 0) {
+        this.viewMonth = 11;
+        this.viewYear -= 1;
+      } else {
+        this.viewMonth -= 1;
+      }
+    },
+    nextMonth() {
+      if (this.viewMonth === 11) {
+        this.viewMonth = 0;
+        this.viewYear += 1;
+      } else {
+        this.viewMonth += 1;
+      }
+    },
+    goToToday() {
+      const now = new Date();
+      this.viewYear = now.getFullYear();
+      this.viewMonth = now.getMonth();
+      this.selectDay({
+        date: new Date(now.getFullYear(), now.getMonth(), now.getDate()),
+        inMonth: true
+      });
+    },
+    selectDay(day) {
+      const { hour, minute, second, millisecond } = this.clampedTimeParts();
+      const next = new Date(day.date);
+      if (this.showTime) {
+        next.setHours(hour, minute, second, millisecond);
+      } else {
+        next.setHours(0, 0, 0, 0);
+      }
+      this.selectedDate = next;
+      if (!day.inMonth) {
+        this.viewYear = next.getFullYear();
+        this.viewMonth = next.getMonth();
+      }
+      this.emitValue(next);
+    },
+    applyTimeToSelection() {
+      const { hour, minute, second, millisecond } = this.clampedTimeParts();
+      this.hour = hour;
+      this.minute = minute;
+      this.second = second;
+      this.millisecond = millisecond;
+
+      if (!this.selectedDate) {
+        const now = new Date();
+        this.selectedDate = new Date(
+          now.getFullYear(),
+          now.getMonth(),
+          now.getDate(),
+          hour,
+          minute,
+          second,
+          millisecond
+        );
+        this.viewYear = this.selectedDate.getFullYear();
+        this.viewMonth = this.selectedDate.getMonth();
+      } else {
+        this.selectedDate = new Date(
+          this.selectedDate.getFullYear(),
+          this.selectedDate.getMonth(),
+          this.selectedDate.getDate(),
+          hour,
+          minute,
+          second,
+          millisecond
+        );
+      }
+      this.emitValue(this.selectedDate);
+    },
+    valuePayload(date) {
+      if (this.mode === 'date') {
+        return dateToDateOnly(date);
+      }
+      return dateToDatetimeLocal(date);
+    },
+    emitValue(date) {
+      const payload = this.valuePayload(date);
+      if (!this.immediate) {
+        this.pendingValue = payload;
+        return;
+      }
+      this.$emit('input', payload);
+    },
+    commit() {
+      const payload = this.pendingValue != null
+        ? this.pendingValue
+        : (this.selectedDate ? this.valuePayload(this.selectedDate) : null);
+      if (payload == null) {
+        return;
+      }
+      this.$emit('commit', payload);
+      this.pendingValue = null;
+    },
+    isSelectedDay(day) {
+      return this.selectedDate && isSameDay(day.date, this.selectedDate);
+    }
+  }
+});

package/frontend/src/document/document.css

@@ -26,3 +26,65 @@
 .document button img {
   height: 1em;
 }
+
+/* Add Field Modal Styles */
+.add-field-modal {
+  max-width: 500px;
+  width: 100%;
+}
+
+.add-field-modal .modal-exit {
+  position: absolute;
+  top: 15px;
+  right: 20px;
+  font-size: 24px;
+  cursor: pointer;
+  color: #6b7280;
+  z-index: 10;
+}
+
+.add-field-modal .modal-exit:hover {
+  color: #374151;
+}
+
+.add-field-modal form {
+  max-height: 70vh;
+  overflow-y: auto;
+}
+
+.add-field-modal input[type="text"],
+.add-field-modal input[type="email"],
+.add-field-modal input[type="password"],
+.add-field-modal select,
+.add-field-modal textarea {
+  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+
+.add-field-modal input:focus,
+.add-field-modal select:focus,
+.add-field-modal textarea:focus {
+  border-color: #3b82f6;
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+.add-field-modal .border-red-500 {
+  border-color: #ef4444 !important;
+}
+
+.add-field-modal .border-red-500:focus {
+  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
+}
+
+/* Ace editor styling in modal */
+.add-field-modal .add-field-ace-editor.ace_editor {
+  border: 1px solid #d1d5db;
+  border-radius: 0.375rem;
+  font-size: 14px;
+  min-height: 100px;
+}
+
+.add-field-modal .add-field-ace-editor:focus-within.ace_editor,
+.add-field-modal .add-field-ace-editor.ace_focus {
+  border-color: #3b82f6;
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}