@abraca/nuxt 0.3.0 → 1.6.0

package/dist/runtime/components/renderers/calendar/ACalendarMonthView.vue

@@ -0,0 +1,87 @@
+<script setup>
+import ACalendarDayCell from "./ACalendarDayCell.vue";
+defineProps({
+  weeks: { type: Array, required: true },
+  weekDayHeaders: { type: Array, required: true },
+  weekNumbers: { type: Array, required: false },
+  showWeekNumbers: { type: Boolean, required: false },
+  dragId: { type: [String, null], required: false },
+  dragOverContainer: { type: [String, null], required: false },
+  eventFocusers: { type: Function, required: true },
+  renameId: { type: [String, null], required: false },
+  renameValue: { type: String, required: false },
+  editable: { type: Boolean, required: false }
+});
+const emit = defineEmits(["create-event", "open-event", "drag-start", "focus-event", "unfocus-event", "rename-input", "rename-commit", "rename-cancel"]);
+</script>
+
+<template>
+  <div class="flex-1 min-h-0 flex flex-col p-2 gap-1">
+    <!-- Day headers -->
+    <div
+      class="shrink-0"
+      :class="showWeekNumbers ? 'grid grid-cols-[2rem_repeat(7,1fr)]' : 'grid grid-cols-7'"
+    >
+      <div
+        v-if="showWeekNumbers"
+        class="text-center text-[10px] text-(--ui-text-dimmed) py-1"
+      >
+        W#
+      </div>
+      <div
+        v-for="day in weekDayHeaders"
+        :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"
+        :class="showWeekNumbers ? 'grid grid-cols-[2rem_repeat(7,1fr)]' : 'grid grid-cols-7'"
+      >
+        <!-- Week number -->
+        <div
+          v-if="showWeekNumbers"
+          class="flex items-start justify-center pt-1.5 text-[10px] text-(--ui-text-dimmed) font-mono"
+        >
+          {{ weekNumbers?.[wi] ?? "" }}
+        </div>
+
+        <ACalendarDayCell
+          v-for="(cell, ci) in week.cells"
+          :key="ci"
+          :cell="cell"
+          :drag-over-container="dragOverContainer"
+          :drag-id="dragId"
+          :event-focusers="eventFocusers"
+          :is-current-month="cell.isCurrentMonth"
+          :rename-id="renameId"
+          :rename-value="renameValue"
+          :editable="editable"
+          :class="{
+  'border-l border-l-(--ui-border)/30': ci === 0,
+  'border-t border-t-(--ui-border)/30': 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
+}"
+          @create-event="emit('create-event', $event)"
+          @open-event="emit('open-event', $event)"
+          @drag-start="emit('drag-start', $event)"
+          @focus-event="emit('focus-event', $event)"
+          @unfocus-event="emit('unfocus-event')"
+          @rename-input="emit('rename-input', $event)"
+          @rename-commit="emit('rename-commit')"
+          @rename-cancel="emit('rename-cancel')"
+        />
+      </div>
+    </div>
+  </div>
+</template>

package/dist/runtime/components/renderers/calendar/ACalendarMonthView.vue.d.ts

@@ -0,0 +1,43 @@
+import type { WeekRow, CalendarEvent } from '../../../composables/useCalendarView.js';
+type __VLS_Props = {
+    weeks: WeekRow[];
+    weekDayHeaders: readonly string[];
+    weekNumbers?: (number | null)[];
+    showWeekNumbers?: boolean;
+    dragId?: string | null;
+    dragOverContainer?: string | null;
+    eventFocusers: (id: string) => Array<{
+        name: string;
+        color: string;
+    }>;
+    renameId?: string | null;
+    renameValue?: string;
+    editable?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "drag-start": (payload: {
+        event: PointerEvent;
+        id: string;
+    }) => any;
+    "rename-input": (value: string) => any;
+    "rename-commit": () => any;
+    "rename-cancel": () => any;
+    "create-event": (date: Date) => any;
+    "open-event": (event: CalendarEvent) => any;
+    "focus-event": (id: string) => any;
+    "unfocus-event": () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onDrag-start"?: ((payload: {
+        event: PointerEvent;
+        id: string;
+    }) => any) | undefined;
+    "onRename-input"?: ((value: string) => any) | undefined;
+    "onRename-commit"?: (() => any) | undefined;
+    "onRename-cancel"?: (() => any) | undefined;
+    "onCreate-event"?: ((date: Date) => any) | undefined;
+    "onOpen-event"?: ((event: CalendarEvent) => any) | undefined;
+    "onFocus-event"?: ((id: string) => any) | undefined;
+    "onUnfocus-event"?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/renderers/calendar/ACalendarToolbar.d.vue.ts

@@ -0,0 +1,38 @@
+import type { CalendarViewMode } from '../../../composables/useCalendarView.js';
+type __VLS_Props = {
+    viewMode: CalendarViewMode;
+    periodLabel: string;
+    currentYear: number;
+    currentMonth: number;
+    remoteViewers: Array<{
+        clientId: number;
+        name: string;
+        color: string;
+        viewing: string;
+    }>;
+    editable?: boolean;
+    labels?: {
+        newEvent?: string;
+        today?: string;
+        month?: string;
+        week?: string;
+        day?: string;
+    };
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:viewMode": (mode: CalendarViewMode) => any;
+    prev: () => any;
+    next: () => any;
+    today: () => any;
+    "add-event": () => any;
+    "navigate-to-month": (year: number, month: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:viewMode"?: ((mode: CalendarViewMode) => any) | undefined;
+    onPrev?: (() => any) | undefined;
+    onNext?: (() => any) | undefined;
+    onToday?: (() => any) | undefined;
+    "onAdd-event"?: (() => any) | undefined;
+    "onNavigate-to-month"?: ((year: number, month: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/renderers/calendar/ACalendarToolbar.vue

@@ -0,0 +1,206 @@
+<script setup>
+import { computed, ref, watch } from "vue";
+const props = defineProps({
+  viewMode: { type: String, required: true },
+  periodLabel: { type: String, required: true },
+  currentYear: { type: Number, required: true },
+  currentMonth: { type: Number, required: true },
+  remoteViewers: { type: Array, required: true },
+  editable: { type: Boolean, required: false },
+  labels: { type: Object, required: false }
+});
+const emit = defineEmits(["update:viewMode", "prev", "next", "today", "add-event", "navigate-to-month"]);
+const viewOptions = computed(() => [
+  { label: props.labels?.month ?? "Month", value: "month", icon: "i-lucide-grid-3x3" },
+  { label: props.labels?.week ?? "Week", value: "week", icon: "i-lucide-columns-3" },
+  { label: props.labels?.day ?? "Day", value: "day", icon: "i-lucide-square" }
+]);
+const pickerOpen = ref(false);
+const pickerYear = ref(props.currentYear);
+watch(() => props.currentYear, (y) => {
+  pickerYear.value = y;
+});
+watch(pickerOpen, (open) => {
+  if (open) pickerYear.value = props.currentYear;
+});
+const monthLabels = [
+  "Jan",
+  "Feb",
+  "Mar",
+  "Apr",
+  "May",
+  "Jun",
+  "Jul",
+  "Aug",
+  "Sep",
+  "Oct",
+  "Nov",
+  "Dec"
+];
+function isActiveMonth(idx) {
+  return pickerYear.value === props.currentYear && idx === props.currentMonth;
+}
+function selectMonth(idx) {
+  emit("navigate-to-month", pickerYear.value, idx);
+  pickerOpen.value = false;
+}
+</script>
+
+<template>
+  <div class="flex items-center justify-between px-4 py-2 border-b border-(--ui-border) shrink-0 bg-(--ui-bg-elevated)/40 gap-2">
+    <!-- Left: Navigation -->
+    <div class="flex items-center gap-1 shrink-0">
+      <UTooltip
+        text="Previous"
+        :kbds="['\u2190']"
+        :content="{ side: 'bottom' }"
+      >
+        <UButton
+          icon="i-lucide-chevron-left"
+          size="xs"
+          variant="ghost"
+          color="neutral"
+          @click="emit('prev')"
+        />
+      </UTooltip>
+
+      <UPopover
+        v-model:open="pickerOpen"
+        :content="{ align: 'start', side: 'bottom' }"
+      >
+        <button
+          class="text-sm font-medium min-w-36 text-center hover:text-(--ui-primary) transition-colors truncate px-1"
+        >
+          {{ periodLabel }}
+        </button>
+
+        <template #content>
+          <div class="p-3 w-56">
+            <!-- Year stepper -->
+            <div class="flex items-center justify-between mb-3">
+              <UButton
+                icon="i-lucide-chevron-left"
+                size="xs"
+                variant="ghost"
+                color="neutral"
+                @click="pickerYear--"
+              />
+              <span class="text-sm font-semibold tabular-nums">{{ pickerYear }}</span>
+              <UButton
+                icon="i-lucide-chevron-right"
+                size="xs"
+                variant="ghost"
+                color="neutral"
+                @click="pickerYear++"
+              />
+            </div>
+
+            <!-- Month grid (4x3) -->
+            <div class="grid grid-cols-4 gap-1">
+              <button
+                v-for="(label, idx) in monthLabels"
+                :key="idx"
+                class="text-xs py-1.5 rounded-md transition-colors"
+                :class="isActiveMonth(idx) ? 'bg-(--ui-primary) text-white font-medium' : 'hover:bg-(--ui-bg-elevated) text-(--ui-text-muted)'"
+                @click="selectMonth(idx)"
+              >
+                {{ label }}
+              </button>
+            </div>
+          </div>
+        </template>
+      </UPopover>
+
+      <UTooltip
+        text="Next"
+        :kbds="['\u2192']"
+        :content="{ side: 'bottom' }"
+      >
+        <UButton
+          icon="i-lucide-chevron-right"
+          size="xs"
+          variant="ghost"
+          color="neutral"
+          @click="emit('next')"
+        />
+      </UTooltip>
+
+      <UButton
+        size="xs"
+        variant="ghost"
+        color="neutral"
+        :label="labels?.today ?? 'Today'"
+        class="ml-1 hidden sm:flex"
+        @click="emit('today')"
+      />
+    </div>
+
+    <!-- Center: View switcher -->
+    <div class="hidden sm:flex items-center gap-0.5 bg-(--ui-bg-elevated) rounded-lg p-0.5">
+      <button
+        v-for="opt in viewOptions"
+        :key="opt.value"
+        class="text-xs px-2.5 py-1 rounded-md transition-colors"
+        :class="viewMode === opt.value ? 'bg-(--ui-bg) text-(--ui-text) shadow-sm font-medium' : 'text-(--ui-text-muted) hover:text-(--ui-text)'"
+        @click="emit('update:viewMode', opt.value)"
+      >
+        {{ opt.label }}
+      </button>
+    </div>
+
+    <!-- Right: Remote viewers + add event -->
+    <div class="flex items-center gap-1.5 shrink-0">
+      <!-- Remote viewer chips -->
+      <span
+        v-for="rv in remoteViewers.slice(0, 4)"
+        :key="rv.clientId"
+        class="text-[10px] px-1.5 py-0.5 rounded-full border hidden md:inline-flex"
+        :style="{ borderColor: rv.color, color: rv.color }"
+      >
+        <UTooltip :text="`${rv.name} is viewing ${rv.viewing}`">
+          <span>{{ rv.name?.split(" ")[0] || "?" }}</span>
+        </UTooltip>
+      </span>
+
+      <!-- Mobile view switcher -->
+      <UDropdownMenu
+        :items="[[
+  ...viewOptions.map((o) => ({
+    label: o.label,
+    icon: o.icon,
+    onSelect: () => emit('update:viewMode', o.value)
+  }))
+]]"
+        :content="{ align: 'end' }"
+        class="sm:hidden"
+      >
+        <UButton
+          icon="i-lucide-layout-grid"
+          size="xs"
+          variant="ghost"
+          color="neutral"
+        />
+      </UDropdownMenu>
+
+      <UButton
+        v-if="editable !== false"
+        icon="i-lucide-plus"
+        size="xs"
+        variant="ghost"
+        color="neutral"
+        :label="labels?.newEvent ?? 'New event'"
+        class="hidden sm:flex"
+        @click="emit('add-event')"
+      />
+      <UButton
+        v-if="editable !== false"
+        icon="i-lucide-plus"
+        size="xs"
+        variant="ghost"
+        color="neutral"
+        class="sm:hidden"
+        @click="emit('add-event')"
+      />
+    </div>
+  </div>
+</template>

package/dist/runtime/components/renderers/calendar/ACalendarToolbar.vue.d.ts

@@ -0,0 +1,38 @@
+import type { CalendarViewMode } from '../../../composables/useCalendarView.js';
+type __VLS_Props = {
+    viewMode: CalendarViewMode;
+    periodLabel: string;
+    currentYear: number;
+    currentMonth: number;
+    remoteViewers: Array<{
+        clientId: number;
+        name: string;
+        color: string;
+        viewing: string;
+    }>;
+    editable?: boolean;
+    labels?: {
+        newEvent?: string;
+        today?: string;
+        month?: string;
+        week?: string;
+        day?: string;
+    };
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:viewMode": (mode: CalendarViewMode) => any;
+    prev: () => any;
+    next: () => any;
+    today: () => any;
+    "add-event": () => any;
+    "navigate-to-month": (year: number, month: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:viewMode"?: ((mode: CalendarViewMode) => any) | undefined;
+    onPrev?: (() => any) | undefined;
+    onNext?: (() => any) | undefined;
+    onToday?: (() => any) | undefined;
+    "onAdd-event"?: (() => any) | undefined;
+    "onNavigate-to-month"?: ((year: number, month: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/renderers/calendar/ACalendarUnscheduled.d.vue.ts

@@ -0,0 +1,28 @@
+import type { TreeEntry } from '../../../composables/useChildTree.js';
+type __VLS_Props = {
+    entries: TreeEntry[];
+    dragId?: string | null;
+    editable?: boolean;
+    label?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "drag-start": (payload: {
+        event: PointerEvent;
+        id: string;
+    }) => any;
+    "open-entry": (payload: {
+        id: string;
+        label: string;
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onDrag-start"?: ((payload: {
+        event: PointerEvent;
+        id: string;
+    }) => any) | undefined;
+    "onOpen-entry"?: ((payload: {
+        id: string;
+        label: string;
+    }) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/renderers/calendar/ACalendarUnscheduled.vue

@@ -0,0 +1,33 @@
+<script setup>
+defineProps({
+  entries: { type: Array, required: true },
+  dragId: { type: [String, null], required: false },
+  editable: { type: Boolean, required: false },
+  label: { type: String, required: false }
+});
+const emit = defineEmits(["open-entry", "drag-start"]);
+</script>
+
+<template>
+  <div
+    v-if="entries.length > 0"
+    class="mt-4 shrink-0 px-4"
+  >
+    <p class="text-xs font-medium text-(--ui-text-muted) uppercase tracking-wide mb-2">
+      {{ label ?? "Unscheduled" }}
+    </p>
+    <div class="flex flex-wrap gap-1.5">
+      <button
+        v-for="evt in entries"
+        :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 }"
+        :data-drag-id="evt.id"
+        @pointerdown="editable !== false && emit('drag-start', { event: $event, id: evt.id })"
+        @click="emit('open-entry', { id: evt.id, label: evt.label })"
+      >
+        {{ evt.label }}
+      </button>
+    </div>
+  </div>
+</template>

package/dist/runtime/components/renderers/calendar/ACalendarUnscheduled.vue.d.ts

@@ -0,0 +1,28 @@
+import type { TreeEntry } from '../../../composables/useChildTree.js';
+type __VLS_Props = {
+    entries: TreeEntry[];
+    dragId?: string | null;
+    editable?: boolean;
+    label?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "drag-start": (payload: {
+        event: PointerEvent;
+        id: string;
+    }) => any;
+    "open-entry": (payload: {
+        id: string;
+        label: string;
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onDrag-start"?: ((payload: {
+        event: PointerEvent;
+        id: string;
+    }) => any) | undefined;
+    "onOpen-entry"?: ((payload: {
+        id: string;
+        label: string;
+    }) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/renderers/calendar/ACalendarWeekView.d.vue.ts

@@ -0,0 +1,50 @@
+import type { DayColumn, CalendarEvent } from '../../../composables/useCalendarView.js';
+type __VLS_Props = {
+    columns: DayColumn[];
+    eventFocusers: (id: string) => Array<{
+        name: string;
+        color: string;
+    }>;
+    dragId?: string | null;
+    dragOverContainer?: string | null;
+    dragPreviewTime?: {
+        hours: number;
+        minutes: number;
+    } | null;
+    renameId?: string | null;
+    renameValue?: string;
+    editable?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "drag-start": (payload: {
+        event: PointerEvent;
+        id: string;
+    }) => any;
+    "rename-input": (value: string) => any;
+    "rename-commit": () => any;
+    "rename-cancel": () => any;
+    "create-event": (payload: {
+        date: Date;
+        hour?: number;
+    }) => any;
+    "open-event": (event: CalendarEvent) => any;
+    "focus-event": (id: string) => any;
+    "unfocus-event": () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onDrag-start"?: ((payload: {
+        event: PointerEvent;
+        id: string;
+    }) => any) | undefined;
+    "onRename-input"?: ((value: string) => any) | undefined;
+    "onRename-commit"?: (() => any) | undefined;
+    "onRename-cancel"?: (() => any) | undefined;
+    "onCreate-event"?: ((payload: {
+        date: Date;
+        hour?: number;
+    }) => any) | undefined;
+    "onOpen-event"?: ((event: CalendarEvent) => any) | undefined;
+    "onFocus-event"?: ((id: string) => any) | undefined;
+    "onUnfocus-event"?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;