@abraca/nuxt 0.1.1 → 0.3.0

package/dist/runtime/components/renderers/ACalendarRenderer.vue

@@ -1,13 +1,16 @@
 <script setup>
-import { ref, computed } from "vue";
+import { ref, computed, watch, onBeforeUnmount } from "vue";
 import { useRendererBase } from "../../composables/useRendererBase";
+import { useTouchDrag } from "../../composables/useTouchDrag";
+import { useNodePanel } from "../../composables/useNodePanel";
 import { DEFAULT_LOCALE } from "../../locale";
 const props = defineProps({
   docId: { type: String, required: true },
   childProvider: { type: null, required: true },
   docLabel: { type: String, required: true },
   pageTypes: { type: Array, required: false },
-  labels: { type: Object, required: false }
+  labels: { type: Object, required: false },
+  editable: { type: Boolean, required: false, default: true }
 });
 const config = useRuntimeConfig();
 const locale = computed(() => ({
@@ -15,140 +18,411 @@ const locale = computed(() => ({
   ...config.public?.abracadabra?.locale?.renderers?.calendar ?? {},
   ...props.labels ?? {}
 }));
-const { tree } = useRendererBase(props);
-const today = /* @__PURE__ */ new Date();
-const viewYear = ref(today.getFullYear());
-const viewMonth = ref(today.getMonth());
-const monthName = computed(
-  () => new Date(viewYear.value, viewMonth.value, 1).toLocaleString("default", { month: "long", year: "numeric" })
+const { tree, childProviderRef, childDoc, states, setLocalState, connectedUsers } = useRendererBase(props);
+const {
+  openNodeId,
+  openNodeLabel,
+  openNodeProvider,
+  openNode,
+  closePanel
+} = useNodePanel(childProviderRef);
+const myClientId = computed(() => props.childProvider?.awareness?.clientID ?? 0);
+const currentDate = ref(/* @__PURE__ */ new Date());
+const year = computed(() => currentDate.value.getFullYear());
+const month = computed(() => currentDate.value.getMonth());
+const monthLabel = computed(
+  () => currentDate.value.toLocaleDateString("en-US", { month: "long", year: "numeric" })
 );
+const WEEK_DAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
 function prevMonth() {
-  if (viewMonth.value === 0) {
-    viewMonth.value = 11;
-    viewYear.value--;
-  } else viewMonth.value--;
+  currentDate.value = new Date(year.value, month.value - 1, 1);
 }
 function nextMonth() {
-  if (viewMonth.value === 11) {
-    viewMonth.value = 0;
-    viewYear.value++;
-  } else viewMonth.value++;
+  currentDate.value = new Date(year.value, month.value + 1, 1);
 }
-const events = computed(() => tree.childrenOf(null));
-function eventsOnDay(year, month, day) {
-  const dayStr = `${year}-${String(month + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
-  return events.value.filter((e) => {
-    const start = e.meta?.datetimeStart ?? e.meta?.dateStart;
-    if (!start) return false;
-    return start.startsWith(dayStr);
-  });
+function goToday() {
+  currentDate.value = /* @__PURE__ */ new Date();
 }
-const calendarDays = computed(
-  () => {
-    const firstDay = new Date(viewYear.value, viewMonth.value, 1).getDay();
-    const daysInMonth = new Date(viewYear.value, viewMonth.value + 1, 0).getDate();
-    const days = [];
-    for (let i = 0; i < firstDay; i++) days.push({ day: null });
-    for (let d = 1; d <= daysInMonth; d++) days.push({ day: d });
-    return days;
+const todayStr = (/* @__PURE__ */ new Date()).toISOString().slice(0, 10);
+const weeks = computed(() => {
+  const y = year.value;
+  const m = month.value;
+  const firstDay = new Date(y, m, 1).getDay();
+  const daysInMonth = new Date(y, m + 1, 0).getDate();
+  const raw = [];
+  for (let i = 0; i < firstDay; i++) raw.push({ date: null, dateStr: null, isToday: false });
+  for (let d = 1; d <= daysInMonth; d++) {
+    const date = new Date(y, m, d);
+    const dateStr = date.toISOString().slice(0, 10);
+    raw.push({ date, dateStr, isToday: dateStr === todayStr });
+  }
+  while (raw.length % 7 !== 0) raw.push({ date: null, dateStr: null, isToday: false });
+  const entries = tree.childrenOf(null);
+  const result = [];
+  for (let wi = 0; wi < raw.length; wi += 7) {
+    const weekRaw = raw.slice(wi, wi + 7);
+    const weekDates = weekRaw.map((c) => c.dateStr);
+    const seenIds = /* @__PURE__ */ new Set();
+    const multiDay = [];
+    const singleDay = [];
+    for (const entry of entries) {
+      const start = entry.meta?.datetimeStart?.slice(0, 10);
+      if (!start) continue;
+      const end = entry.meta?.datetimeEnd?.slice(0, 10) ?? start;
+      const isMulti = start !== end;
+      let startCol = -1;
+      let endCol = -1;
+      for (let col = 0; col < 7; col++) {
+        const d = weekDates[col];
+        if (!d) continue;
+        if (d >= start && d <= end) {
+          if (startCol === -1) startCol = col;
+          endCol = col;
+        }
+      }
+      if (startCol === -1 || seenIds.has(entry.id)) continue;
+      seenIds.add(entry.id);
+      const info = {
+        id: entry.id,
+        label: entry.label,
+        color: entry.meta?.color ?? "#6366f1"
+      };
+      if (isMulti) {
+        multiDay.push({ ...info, startCol, endCol, globalStart: start });
+      } else {
+        singleDay.push({ ...info, col: startCol });
+      }
+    }
+    multiDay.sort(
+      (a, b) => a.startCol - b.startCol || b.endCol - b.startCol - (a.endCol - a.startCol) || a.globalStart.localeCompare(b.globalStart)
+    );
+    const lanes = [];
+    const assigned = [];
+    for (const evt of multiDay) {
+      let lane = lanes.findIndex((lastEnd) => lastEnd < evt.startCol);
+      if (lane === -1) {
+        lane = lanes.length;
+        lanes.push(-1);
+      }
+      lanes[lane] = evt.endCol;
+      assigned.push({ ...evt, lane });
+    }
+    const laneCount = lanes.length;
+    const cells = weekRaw.map((r, col) => {
+      const laneSlots = [];
+      for (let l = 0; l < laneCount; l++) {
+        const span = assigned.find((s) => s.lane === l && col >= s.startCol && col <= s.endCol);
+        if (span) {
+          laneSlots.push({
+            type: "span",
+            id: span.id,
+            label: span.label,
+            color: span.color,
+            isStart: col === span.startCol,
+            isEnd: col === span.endCol
+          });
+        } else {
+          laneSlots.push({ type: "empty" });
+        }
+      }
+      const events = singleDay.filter((e) => e.col === col).map((e) => ({ id: e.id, label: e.label, color: e.color }));
+      return { ...r, laneSlots, events };
+    });
+    result.push({ cells, laneCount });
   }
+  return result;
+});
+const unscheduledEvents = computed(
+  () => tree.childrenOf(null).filter((e) => !e.meta?.datetimeStart)
 );
-function isToday(day) {
-  return day === today.getDate() && viewMonth.value === today.getMonth() && viewYear.value === today.getFullYear();
-}
-function addEvent(day) {
-  const dateStr = `${viewYear.value}-${String(viewMonth.value + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}T09:00`;
+function createEvent(date) {
+  if (!props.editable) return;
+  const d = date ?? /* @__PURE__ */ new Date();
+  const dateStr = d.toISOString().slice(0, 10);
   const id = tree.createChild(null, locale.value.newEvent);
-  const entry = tree.treeMap.get(id);
-  if (entry) {
-    tree.treeMap.set(id, {
-      ...entry,
-      meta: { datetimeStart: dateStr, datetimeEnd: dateStr },
-      updatedAt: Date.now()
+  tree.updateMeta(id, {
+    datetimeStart: `${dateStr}T00:00:00.000Z`,
+    datetimeEnd: `${dateStr}T01:00:00.000Z`,
+    allDay: true,
+    color: "#6366f1"
+  });
+  openNode(id, locale.value.newEvent);
+}
+const { dragId, dragOverContainer, handlePointerDown } = useTouchDrag({
+  onMoveToContainer: (eventId, dateStr) => {
+    if (!props.editable) return;
+    const entry = tree.entries.value.find((e) => e.id === eventId);
+    let newEnd = `${dateStr}T01:00:00.000Z`;
+    if (entry?.meta?.datetimeStart && entry?.meta?.datetimeEnd) {
+      const duration = new Date(entry.meta.datetimeEnd).getTime() - new Date(entry.meta.datetimeStart).getTime();
+      newEnd = new Date((/* @__PURE__ */ new Date(`${dateStr}T00:00:00.000Z`)).getTime() + duration).toISOString();
+    }
+    tree.updateMeta(eventId, {
+      datetimeStart: `${dateStr}T00:00:00.000Z`,
+      datetimeEnd: newEnd,
+      allDay: entry?.meta?.allDay ?? true,
+      color: entry?.meta?.color ?? "#6366f1"
     });
-  }
+  },
+  containerAttr: "data-drop-container"
+});
+function focusEvent(eventId) {
+  setLocalState({ "calendar:focused": eventId });
+}
+function unfocusEvent() {
+  setLocalState({ "calendar:focused": null });
 }
-const dayNames = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+watch(currentDate, () => {
+  setLocalState({ "calendar:viewing": monthLabel.value });
+}, { immediate: true });
+function eventFocusers(eventId) {
+  return states.value.filter(
+    (s) => s.clientId !== myClientId.value && s["calendar:focused"] === eventId
+  );
+}
+const remoteViewers = computed(
+  () => states.value.filter((s) => s.clientId !== myClientId.value && s["calendar:viewing"]).map((s) => ({
+    clientId: s.clientId,
+    name: s.user?.name ?? "",
+    color: s.user?.color ?? "#888",
+    viewing: s["calendar:viewing"]
+  }))
+);
+watch(childDoc, (doc) => {
+  if (!doc) return;
+  const legacyMap = doc.getMap("event-dates");
+  if (legacyMap.size === 0) return;
+  legacyMap.forEach((val, id) => {
+    if (!tree.treeMap.get(id)?.meta?.datetimeStart) {
+      tree.updateMeta(id, {
+        datetimeStart: val.start,
+        datetimeEnd: val.end,
+        allDay: val.allDay,
+        color: val.color
+      });
+    }
+  });
+  doc.transact(() => {
+    for (const key of [...legacyMap.keys()]) legacyMap.delete(key);
+  });
+}, { immediate: true });
+defineShortcuts({
+  arrowleft: prevMonth,
+  arrowright: nextMonth,
+  t: goToday
+});
+onBeforeUnmount(() => {
+  setLocalState({ "calendar:focused": null, "calendar:viewing": null });
+});
+defineExpose({ connectedUsers });
 </script>
 
 <template>
-  <div class="p-4 max-w-3xl">
-    <!-- Navigation -->
-    <div class="flex items-center gap-4 mb-4">
-      <UButton
-        icon="i-lucide-chevron-left"
-        variant="ghost"
-        color="neutral"
-        @click="prevMonth"
-      />
-      <h2 class="text-lg font-semibold flex-1 text-center">{{ monthName }}</h2>
-      <UButton
-        icon="i-lucide-chevron-right"
-        variant="ghost"
-        color="neutral"
-        @click="nextMonth"
-      />
-      <UButton
-        icon="i-lucide-today"
-        variant="soft"
-        color="neutral"
-        size="sm"
-        :label="locale.today"
-        @click="() => {
-  viewYear = today.getFullYear();
-  viewMonth = today.getMonth();
-}"
-      />
-    </div>
+  <div class="flex-1 min-h-0 flex flex-col relative">
+    <!-- Header -->
+    <div class="flex items-center justify-between px-4 py-2 border-b border-(--ui-border) shrink-0">
+      <div class="flex items-center gap-1">
+        <UTooltip
+          text="Previous month"
+          :kbds="['\u2190']"
+          :content="{ side: 'bottom' }"
+        >
+          <UButton
+            icon="i-lucide-chevron-left"
+            size="xs"
+            variant="ghost"
+            color="neutral"
+            @click="prevMonth"
+          />
+        </UTooltip>
+        <button
+          class="text-sm font-medium w-44 text-center hover:text-(--ui-primary) transition-colors"
+          @click="goToday"
+        >
+          {{ monthLabel }}
+        </button>
+        <UTooltip
+          text="Next month"
+          :kbds="['\u2192']"
+          :content="{ side: 'bottom' }"
+        >
+          <UButton
+            icon="i-lucide-chevron-right"
+            size="xs"
+            variant="ghost"
+            color="neutral"
+            @click="nextMonth"
+          />
+        </UTooltip>
+      </div>
 
-    <!-- Day headers -->
-    <div class="grid grid-cols-7 gap-px mb-1">
-      <div
-        v-for="name in dayNames"
-        :key="name"
-        class="text-center text-xs font-medium text-muted py-1"
-      >
-        {{ name }}
+      <!-- Remote viewers + new event -->
+      <div class="flex items-center gap-1.5">
+        <span
+          v-for="rv in remoteViewers"
+          :key="rv.clientId"
+          class="text-[10px] px-1.5 py-0.5 rounded-full border"
+          :style="{ borderColor: rv.color, color: rv.color }"
+          :title="`${rv.name} is viewing ${rv.viewing}`"
+        >
+          {{ rv.name?.split(" ")[0] || "?" }} &middot; {{ rv.viewing }}
+        </span>
+        <UButton
+          v-if="editable"
+          icon="i-lucide-plus"
+          size="xs"
+          variant="ghost"
+          color="neutral"
+          :label="locale.newEvent"
+          @click="createEvent()"
+        />
       </div>
     </div>
 
-    <!-- Calendar grid -->
-    <div class="grid grid-cols-7 gap-px bg-muted rounded-lg overflow-hidden">
-      <div
-        v-for="(cell, idx) in calendarDays"
-        :key="idx"
-        class="bg-elevated min-h-[80px] p-1 text-sm"
-        :class="cell.day && isToday(cell.day) ? 'bg-primary/5' : ''"
-      >
-        <template v-if="cell.day !== null">
+    <!-- Calendar body -->
+    <div class="flex-1 min-h-0 flex flex-col p-4">
+      <!-- Day headers -->
+      <div class="grid grid-cols-7 shrink-0">
+        <div
+          v-for="day in WEEK_DAYS"
+          :key="day"
+          class="text-center text-xs font-medium text-(--ui-text-muted) py-1"
+        >
+          {{ day }}
+        </div>
+      </div>
+
+      <!-- Week rows -->
+      <div class="flex-1 min-h-0 flex flex-col">
+        <div
+          v-for="(week, wi) in weeks"
+          :key="wi"
+          class="flex-1 min-h-0 grid grid-cols-7"
+        >
           <div
-            class="flex items-center justify-between"
+            v-for="(cell, ci) in week.cells"
+            :key="ci"
+            class="min-h-0 overflow-hidden bg-(--ui-bg-elevated) border-b border-r border-(--ui-border)/30 p-1 transition-colors"
+            :class="{
+  'invisible pointer-events-none': !cell.date,
+  'ring-2 ring-(--ui-primary)/40 bg-(--ui-primary)/5': cell.dateStr && dragOverContainer === cell.dateStr,
+  'border-l': ci === 0,
+  'border-t': wi === 0,
+  'rounded-tl-md': wi === 0 && ci === 0,
+  'rounded-tr-md': wi === 0 && ci === 6,
+  'rounded-bl-md': wi === weeks.length - 1 && ci === 0,
+  'rounded-br-md': wi === weeks.length - 1 && ci === 6
+}"
+            :data-drop-container="cell.dateStr ?? void 0"
           >
-            <span
-              class="text-xs font-medium"
-              :class="isToday(cell.day) ? 'text-primary font-bold' : 'text-muted'"
-            >{{ cell.day }}</span>
-            <UButton
-              icon="i-lucide-plus"
-              variant="ghost"
-              color="neutral"
-              size="xs"
-              class="opacity-0 hover:opacity-100 h-4 w-4"
-              @click="addEvent(cell.day)"
-            />
-          </div>
-          <div class="space-y-0.5 mt-0.5">
-            <div
-              v-for="ev in eventsOnDay(viewYear, viewMonth, cell.day)"
-              :key="ev.id"
-              class="text-xs px-1 py-0.5 rounded truncate"
-              :style="ev.meta?.color ? { backgroundColor: ev.meta.color + '33', color: ev.meta.color } : { backgroundColor: 'var(--color-primary-100)', color: 'var(--color-primary-700)' }"
-            >
-              {{ ev.label }}
-            </div>
+            <template v-if="cell.date">
+              <!-- Date number -->
+              <button
+                class="text-xs font-medium w-6 h-6 rounded-full flex items-center justify-center mb-0.5 transition-colors"
+                :class="cell.isToday ? 'bg-(--ui-primary) text-white' : editable ? 'text-(--ui-text) hover:bg-(--ui-bg)' : 'text-(--ui-text) cursor-default'"
+                @click="editable ? createEvent(cell.date) : void 0"
+              >
+                {{ cell.date.getDate() }}
+              </button>
+
+              <!-- Multi-day span bar slots -->
+              <div
+                v-for="(slot, li) in cell.laneSlots"
+                :key="'lane-' + li"
+                class="h-[22px] flex items-center -mx-1"
+              >
+                <button
+                  v-if="slot.type === 'span'"
+                  class="w-full h-[18px] text-[10px] text-white truncate flex items-center leading-none cursor-pointer hover:brightness-110 transition-[filter]"
+                  :class="[
+  slot.isStart ? 'rounded-l-sm ml-1 pl-1.5' : 'pl-0.5',
+  slot.isEnd ? 'rounded-r-sm mr-1' : '',
+  { 'opacity-40': dragId === slot.id }
+]"
+                  :style="{
+  background: slot.color,
+  ...eventFocusers(slot.id).length > 0 ? { outline: `2px solid ${eventFocusers(slot.id)[0].user?.color ?? '#888'}`, outlineOffset: '1px' } : {},
+  ...editable ? { touchAction: 'none' } : {}
+}"
+                  :data-drag-id="editable ? slot.id : void 0"
+                  @pointerdown="editable ? handlePointerDown($event, slot.id) : void 0"
+                  @pointerenter="focusEvent(slot.id)"
+                  @pointerleave="unfocusEvent"
+                  @click.stop="openNode(slot.id, slot.label)"
+                >
+                  <span
+                    v-if="slot.isStart"
+                    class="truncate"
+                  >{{ slot.label }}</span>
+                </button>
+              </div>
+
+              <!-- Single-day events -->
+              <div
+                class="space-y-0.5"
+                :class="{ 'mt-0.5': cell.laneSlots.length > 0 }"
+              >
+                <button
+                  v-for="evt in cell.events.slice(0, 3)"
+                  :key="evt.id"
+                  class="w-full text-left text-[10px] px-1.5 py-0.5 rounded truncate text-white leading-tight"
+                  :class="{ 'opacity-40': dragId === evt.id }"
+                  :style="{
+  background: evt.color,
+  ...eventFocusers(evt.id).length > 0 ? { outline: `2px solid ${eventFocusers(evt.id)[0].user?.color ?? '#888'}`, outlineOffset: '1px' } : {},
+  ...editable ? { touchAction: 'none' } : {}
+}"
+                  :data-drag-id="editable ? evt.id : void 0"
+                  @pointerdown="editable ? handlePointerDown($event, evt.id) : void 0"
+                  @pointerenter="focusEvent(evt.id)"
+                  @pointerleave="unfocusEvent"
+                  @click.stop="openNode(evt.id, evt.label)"
+                >
+                  {{ evt.label }}
+                </button>
+                <span
+                  v-if="cell.events.length > 3"
+                  class="block text-[10px] text-(--ui-text-dimmed) px-1"
+                >
+                  +{{ cell.events.length - 3 }} more
+                </span>
+              </div>
+            </template>
           </div>
-        </template>
+        </div>
+      </div>
+
+      <!-- Unscheduled events -->
+      <div
+        v-if="unscheduledEvents.length > 0"
+        class="mt-4 shrink-0"
+      >
+        <p class="text-xs font-medium text-(--ui-text-muted) uppercase tracking-wide mb-2">
+          Unscheduled
+        </p>
+        <div class="flex flex-wrap gap-1.5">
+          <button
+            v-for="evt in unscheduledEvents"
+            :key="evt.id"
+            class="text-xs px-2 py-1 rounded border border-(--ui-border) hover:border-(--ui-primary) transition-colors"
+            :class="{ 'opacity-40': dragId === evt.id }"
+            :style="editable ? { touchAction: 'none' } : {}"
+            :data-drag-id="editable ? evt.id : void 0"
+            @pointerdown="editable ? handlePointerDown($event, evt.id) : void 0"
+            @click="openNode(evt.id, evt.label)"
+          >
+            {{ evt.label }}
+          </button>
+        </div>
       </div>
     </div>
+
+    <!-- Node panel -->
+    <ANodePanel
+      :node-id="openNodeId"
+      :node-label="openNodeLabel"
+      :child-provider="openNodeProvider"
+      @close="closePanel"
+    />
   </div>
 </template>

package/dist/runtime/components/renderers/ACalendarRenderer.vue.d.ts

@@ -2,7 +2,18 @@ import { type RendererBaseProps } from '../../composables/useRendererBase.js';
 import type { AbracadabraLocale } from '../../locale.js';
 type __VLS_Props = RendererBaseProps & {
     labels?: Partial<AbracadabraLocale['renderers']['calendar']>;
+    editable?: boolean;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    connectedUsers: import("vue").ComputedRef<{
+        clientId: number;
+        name: string;
+        color: string;
+        avatar: string | undefined;
+        publicKey: any;
+    }[]>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    editable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/renderers/ACallRenderer.d.vue.ts

@@ -0,0 +1,13 @@
+import type { AbracadabraLocale } from '../../locale.js';
+type __VLS_Props = {
+    docId: string;
+    childProvider?: any;
+    docLabel: string;
+    labels?: Partial<AbracadabraLocale['renderers']['call']>;
+    editable?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    editable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;