picocrank 1.14.1 → 1.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "picocrank",
-  "version": "1.14.1",
+  "version": "1.15.0",
   "description": "A set of zero dependency Vue components built on the Femtocrank global CSS theme.",
   "main": "vite.config.js",
   "scripts": {
@@ -18,14 +18,14 @@
     "url": "https://github.com/jamesread/picocrank/issues"
   },
   "dependencies": {
-    "@hugeicons/core-free-icons": "^4.0.0",
+    "@hugeicons/core-free-icons": "^4.1.1",
     "@hugeicons/vue": "^1.0.5",
-    "@vitejs/plugin-vue": "^6.0.4",
+    "@vitejs/plugin-vue": "^6.0.6",
     "femtocrank": "^2.5.0",
-    "unplugin-vue-components": "^31.0.0",
-    "vite": "^7.3.1",
-    "vue": "^3.5.30",
-    "vue-router": "^5.0.3"
+    "unplugin-vue-components": "^32.0.0",
+    "vite": "^8.0.10",
+    "vue": "^3.5.33",
+    "vue-router": "^5.0.6"
   },
   "devDependencies": {
     "semantic-release": "^25.0.3"

package/vue/components/Calendar.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { ref, computed, watch, onUnmounted } from 'vue'
 
 export interface CalendarEvent {
   id: string | number
@@ -10,12 +10,31 @@ export interface CalendarEvent {
   [key: string]: any
 }
 
+/** Payload for `event-move-request`: call `respond(true)` after a successful commit, or `respond(false)` to decline (e.g. failed server update). */
+export interface CalendarEventMoveRequest {
+  event: CalendarEvent
+  /** Calendar cell where the drag started (for multi-day events, the visible segment day). */
+  sourceDate: Date
+  /** Calendar cell where the event was dropped. */
+  targetDate: Date
+  /** Invoke exactly once with the outcome. If omitted until timeout, the move is treated as rejected. */
+  respond: (accepted: boolean) => void
+}
+
 export interface CalendarProps {
   events: CalendarEvent[]
   monthNames?: string[]
   dayNames?: string[]
   loading?: boolean
   error?: string | null
+  /** When true, events can be dragged to another day. */
+  eventDragEnabled?: boolean
+  /**
+   * Max time (ms) to wait for `respond()` on `event-move-request`.
+   * If `respond` is not called in time, the move is rejected and a warning is logged.
+   * Set to `0` to disable the timeout (not recommended if listeners may omit `respond`).
+   */
+  eventMoveResponseTimeoutMs?: number
   // Formatter functions
   getEventDate?: (event: CalendarEvent) => Date | null
   getEventDateRange?: (event: CalendarEvent) => { start: Date | null; end: Date | null }
@@ -35,14 +54,20 @@ const props = withDefaults(defineProps<CalendarProps>(), {
   dayNames: () => ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
   loading: false,
   error: null,
+  eventDragEnabled: true,
+  eventMoveResponseTimeoutMs: 15000,
   showNavigation: true,
 })
 
 const emit = defineEmits<{
   'event-click': [event: CalendarEvent]
   'date-click': [date: Date]
+  'date-range-select': [start: Date, end: Date]
   'month-change': [month: number, year: number]
   'event-context-menu': [event: CalendarEvent, mouseEvent: MouseEvent]
+  'event-move-request': [payload: CalendarEventMoveRequest]
+  'event-moved': [payload: { event: CalendarEvent; sourceDate: Date; targetDate: Date }]
+  'event-move-rejected': [payload: { event: CalendarEvent; sourceDate: Date; targetDate: Date }]
 }>()
 
 // Internal calendar state
@@ -316,16 +341,239 @@ function handleEventClick(event: CalendarEvent) {
   emit('event-click', event)
 }
 
-function handleDateClick(date: Date) {
-  emit('date-click', date)
-}
-
 function handleContextMenu(event: CalendarEvent, mouseEvent: MouseEvent) {
   mouseEvent.preventDefault()
   mouseEvent.stopPropagation()
   emit('event-context-menu', event, mouseEvent)
 }
-import { watch } from 'vue'
+
+// --- Date range selection (click / drag) ---
+
+function startOfDay(d: Date): Date {
+  const x = new Date(d)
+  x.setHours(0, 0, 0, 0)
+  return x
+}
+
+function toDateKey(d: Date): string {
+  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
+}
+
+function dateFromKey(key: string): Date {
+  const [y, m, day] = key.split('-').map(Number)
+  return startOfDay(new Date(y, m - 1, day))
+}
+
+const isDraggingRange = ref(false)
+const rangeDragAnchor = ref<Date | null>(null)
+const rangeDragEnd = ref<Date | null>(null)
+const selectedRangeStart = ref<Date | null>(null)
+const selectedRangeEnd = ref<Date | null>(null)
+
+function isEventTarget(ev: Event): boolean {
+  const t = ev.target
+  if (!(t instanceof Node)) return false
+  return Boolean((t as HTMLElement).closest?.('.calendar-event'))
+}
+
+function getRangeBounds(): { lo: Date; hi: Date } | null {
+  const a = rangeDragAnchor.value
+  const b = rangeDragEnd.value
+  if (!a || !b) return null
+  const sa = startOfDay(a).getTime()
+  const sb = startOfDay(b).getTime()
+  if (sa <= sb) return { lo: startOfDay(a), hi: startOfDay(b) }
+  return { lo: startOfDay(b), hi: startOfDay(a) }
+}
+
+function rangeHighlightForDate(date: Date): 'none' | 'single' | 'start' | 'end' | 'middle' {
+  const bounds = isDraggingRange.value
+    ? getRangeBounds()
+    : selectedRangeStart.value && selectedRangeEnd.value
+      ? (() => {
+          const sa = startOfDay(selectedRangeStart.value!).getTime()
+          const sb = startOfDay(selectedRangeEnd.value!).getTime()
+          const lo = sa <= sb ? startOfDay(selectedRangeStart.value!) : startOfDay(selectedRangeEnd.value!)
+          const hi = sa <= sb ? startOfDay(selectedRangeEnd.value!) : startOfDay(selectedRangeStart.value!)
+          return { lo, hi }
+        })()
+      : null
+  if (!bounds) return 'none'
+  const t = startOfDay(date).getTime()
+  if (t < bounds.lo.getTime() || t > bounds.hi.getTime()) return 'none'
+  if (bounds.lo.getTime() === bounds.hi.getTime()) return 'single'
+  if (t === bounds.lo.getTime()) return 'start'
+  if (t === bounds.hi.getTime()) return 'end'
+  return 'middle'
+}
+
+function onWindowTouchMove(ev: TouchEvent): void {
+  if (!isDraggingRange.value || ev.touches.length === 0) return
+  const { clientX, clientY } = ev.touches[0]
+  const el = document.elementFromPoint(clientX, clientY)
+  if (!el) return
+  const cell = (el as HTMLElement).closest?.('[data-calendar-date]')
+  const key = cell?.dataset?.calendarDate
+  if (!key) return
+  rangeDragEnd.value = dateFromKey(key)
+}
+
+function detachRangePointerListeners(): void {
+  window.removeEventListener('mouseup', endRangeSelectionFromPointer)
+  window.removeEventListener('blur', endRangeSelectionFromPointer)
+  window.removeEventListener('touchmove', onWindowTouchMove)
+  window.removeEventListener('touchend', endRangeSelectionFromPointer)
+  window.removeEventListener('touchcancel', endRangeSelectionFromPointer)
+}
+
+function endRangeSelectionFromPointer(): void {
+  if (!isDraggingRange.value) return
+  const bounds = getRangeBounds()
+  isDraggingRange.value = false
+  rangeDragAnchor.value = null
+  rangeDragEnd.value = null
+  detachRangePointerListeners()
+
+  if (!bounds) return
+
+  selectedRangeStart.value = new Date(bounds.lo)
+  selectedRangeEnd.value = new Date(bounds.hi)
+  emit('date-range-select', new Date(bounds.lo), new Date(bounds.hi))
+
+  if (bounds.lo.getTime() === bounds.hi.getTime()) {
+    emit('date-click', new Date(bounds.lo))
+  }
+}
+
+function onDayPointerDown(date: Date, ev: MouseEvent | TouchEvent): void {
+  if (isEventTarget(ev)) return
+  if (ev instanceof MouseEvent && ev.button !== 0) return
+
+  const d = startOfDay(date)
+  isDraggingRange.value = true
+  rangeDragAnchor.value = new Date(d)
+  rangeDragEnd.value = new Date(d)
+  window.addEventListener('mouseup', endRangeSelectionFromPointer)
+  window.addEventListener('blur', endRangeSelectionFromPointer)
+  window.addEventListener('touchmove', onWindowTouchMove, { passive: true })
+  window.addEventListener('touchend', endRangeSelectionFromPointer)
+  window.addEventListener('touchcancel', endRangeSelectionFromPointer)
+  if (ev instanceof MouseEvent) {
+    ev.preventDefault()
+  }
+}
+
+function onDayPointerEnter(date: Date): void {
+  if (!isDraggingRange.value) return
+  rangeDragEnd.value = startOfDay(date)
+}
+
+onUnmounted(() => {
+  detachRangePointerListeners()
+})
+
+// --- Calendar event drag and drop (HTML5) ---
+
+const CALENDAR_EVENT_DRAG_MIME = 'application/x-picocrank-calendar-event-id'
+
+const draggingEventId = ref<string | number | null>(null)
+const draggingSourceDate = ref<Date | null>(null)
+const dragOverTargetDate = ref<Date | null>(null)
+const eventMoveLocked = ref(false)
+
+function sameCalendarDay(a: Date | null, b: Date | null): boolean {
+  if (!a || !b) return false
+  return startOfDay(a).getTime() === startOfDay(b).getTime()
+}
+
+function onEventDragStart(event: CalendarEvent, sourceCellDate: Date, dragEvent: DragEvent): void {
+  if (!props.eventDragEnabled) {
+    dragEvent.preventDefault()
+    return
+  }
+  draggingEventId.value = event.id
+  draggingSourceDate.value = startOfDay(sourceCellDate)
+  dragEvent.dataTransfer?.setData(CALENDAR_EVENT_DRAG_MIME, String(event.id))
+  dragEvent.dataTransfer?.setData('text/plain', event.title)
+  if (dragEvent.dataTransfer) {
+    dragEvent.dataTransfer.effectAllowed = 'move'
+  }
+}
+
+function onEventDragEnd(): void {
+  draggingEventId.value = null
+  draggingSourceDate.value = null
+  dragOverTargetDate.value = null
+}
+
+function onDayDragOver(dayDate: Date, ev: DragEvent): void {
+  if (!props.eventDragEnabled || draggingEventId.value === null) return
+  ev.preventDefault()
+  if (ev.dataTransfer) {
+    ev.dataTransfer.dropEffect = 'move'
+  }
+  dragOverTargetDate.value = startOfDay(dayDate)
+}
+
+function onDayDrop(dayDate: Date, ev: DragEvent): void {
+  ev.preventDefault()
+  dragOverTargetDate.value = null
+  if (!props.eventDragEnabled) return
+
+  const idStr = ev.dataTransfer?.getData(CALENDAR_EVENT_DRAG_MIME)
+  if (!idStr) return
+
+  const moved = props.events.find(e => String(e.id) === idStr)
+  if (!moved) return
+
+  const sourceRaw = draggingSourceDate.value
+  if (!sourceRaw) return
+
+  const targetDate = startOfDay(dayDate)
+  const sourceDate = startOfDay(sourceRaw)
+  if (targetDate.getTime() === sourceDate.getTime()) return
+  if (eventMoveLocked.value) return
+  eventMoveLocked.value = true
+
+  const sourceClone = new Date(sourceDate)
+  const targetClone = new Date(targetDate)
+
+  let settled = false
+  let watchdog: ReturnType<typeof setTimeout> | undefined
+
+  function respond(accepted: boolean): void {
+    if (settled) return
+    settled = true
+    if (watchdog !== undefined) {
+      clearTimeout(watchdog)
+    }
+    eventMoveLocked.value = false
+    if (accepted) {
+      emit('event-moved', { event: moved, sourceDate: sourceClone, targetDate: targetClone })
+    } else {
+      emit('event-move-rejected', { event: moved, sourceDate: sourceClone, targetDate: targetClone })
+    }
+  }
+
+  emit('event-move-request', {
+    event: moved,
+    sourceDate: sourceClone,
+    targetDate: targetClone,
+    respond,
+  })
+
+  const timeoutMs = props.eventMoveResponseTimeoutMs
+  if (timeoutMs > 0) {
+    watchdog = setTimeout(() => {
+      if (!settled) {
+        console.warn(
+          '[Calendar] event-move-request: respond() was not called before timeout; treating as rejected.'
+        )
+        respond(false)
+      }
+    }, timeoutMs)
+  }
+}
 
 // Sync grid start when controlled month/year props change (but not during scrolling)
 watch([currentMonth, currentYear], () => {
@@ -352,7 +600,14 @@ watch([currentMonth, currentYear], () => {
     <div class="calendar-container">
       <div v-if="error" class="calendar-error">{{ error }}</div>
       <div v-if="loading" class="calendar-loading-overlay">Loading…</div>
-      <div class="calendar-grid" @wheel.prevent="handleWheel">
+      <div
+        class="calendar-grid"
+        :class="{
+          'is-dragging-range': isDraggingRange,
+          'is-dragging-event': draggingEventId !== null
+        }"
+        @wheel.prevent="handleWheel"
+      >
         <!-- Day headers -->
         <div v-for="day in dayNames" :key="day" class="day-header">{{ day }}</div>
 
@@ -361,15 +616,26 @@ watch([currentMonth, currentYear], () => {
           v-for="(day, index) in calendarDays"
           :key="index"
           class="calendar-day"
+          :data-calendar-date="toDateKey(day.date)"
+          @mousedown="onDayPointerDown(day.date, $event)"
+          @touchstart.passive="onDayPointerDown(day.date, $event)"
+          @mouseenter="onDayPointerEnter(day.date)"
+          @dragover="onDayDragOver(day.date, $event)"
+          @drop="onDayDrop(day.date, $event)"
           :class="{
-            'today': day && day.date.toDateString() === new Date().toDateString(),
-            'weekend': day && (day.date.getDay() === 0 || day.date.getDay() === 6),
-            'prev-month': day && day.date.getMonth() !== currentMonth && day.date.getMonth() !== (currentMonth + 1) % 12,
-            'next-month': day && day.date.getMonth() !== currentMonth && day.date.getMonth() === (currentMonth + 1) % 12,
-            'past': day && isPastDay(day.date)
+            'today': day.date.toDateString() === new Date().toDateString(),
+            'weekend': day.date.getDay() === 0 || day.date.getDay() === 6,
+            'prev-month': day.date.getMonth() !== currentMonth && day.date.getMonth() !== (currentMonth + 1) % 12,
+            'next-month': day.date.getMonth() !== currentMonth && day.date.getMonth() === (currentMonth + 1) % 12,
+            'past': isPastDay(day.date),
+            'range-single': rangeHighlightForDate(day.date) === 'single',
+            'range-start': rangeHighlightForDate(day.date) === 'start',
+            'range-end': rangeHighlightForDate(day.date) === 'end',
+            'range-middle': rangeHighlightForDate(day.date) === 'middle',
+            'drag-over-target': eventDragEnabled && sameCalendarDay(dragOverTargetDate, day.date)
           }"
         >
-          <div v-if="day" class="day-content" @click="handleDateClick(day.date)">
+          <div class="day-content">
             <div class="day-number clickable">
               {{ day.date.getDate() }}<span class="day-month">{{ getOrdinalSuffix(day.date.getDate()) }} {{ monthNames[day.date.getMonth()].substring(0, 3) }}</span>
             </div>
@@ -388,8 +654,12 @@ watch([currentMonth, currentYear], () => {
                   'multi-day': isMultiDayEvent(event),
                   'multi-day-start': isMultiDayEvent(event) && getMultiDayPosition(event, day.date) === 'start',
                   'multi-day-middle': isMultiDayEvent(event) && getMultiDayPosition(event, day.date) === 'middle',
-                  'multi-day-end': isMultiDayEvent(event) && getMultiDayPosition(event, day.date) === 'end'
+                  'multi-day-end': isMultiDayEvent(event) && getMultiDayPosition(event, day.date) === 'end',
+                  'drag-source': draggingEventId === event.id
                 }"
+                :draggable="eventDragEnabled"
+                @dragstart.stop="onEventDragStart(event, day.date, $event)"
+                @dragend.stop="onEventDragEnd"
                 @click.stop="handleEventClick(event)"
                 @contextmenu.stop="handleContextMenu(event, $event)"
               >
@@ -482,6 +752,45 @@ watch([currentMonth, currentYear], () => {
   min-height: 400px;
 }
 
+.calendar-grid.is-dragging-range,
+.calendar-grid.is-dragging-event {
+  user-select: none;
+}
+
+.calendar-day.range-single {
+  background-color: rgba(0, 123, 255, 0.22) !important;
+  box-shadow: inset 0 0 0 2px #007bff;
+}
+
+.calendar-day.range-start {
+  background-color: rgba(0, 123, 255, 0.14) !important;
+  box-shadow:
+    inset 2px 0 0 0 #007bff,
+    inset 0 2px 0 0 #007bff,
+    inset 0 -2px 0 0 #007bff;
+}
+
+.calendar-day.range-end {
+  background-color: rgba(0, 123, 255, 0.14) !important;
+  box-shadow:
+    inset -2px 0 0 0 #007bff,
+    inset 0 2px 0 0 #007bff,
+    inset 0 -2px 0 0 #007bff;
+}
+
+.calendar-day.range-middle {
+  background-color: rgba(0, 123, 255, 0.14) !important;
+  box-shadow:
+    inset 0 2px 0 0 #007bff,
+    inset 0 -2px 0 0 #007bff;
+}
+
+.calendar-day.drag-over-target {
+  background-color: rgba(0, 123, 255, 0.1) !important;
+  outline: 2px dashed #007bff;
+  outline-offset: -3px;
+}
+
 .day-header {
   padding: 1rem;
   text-align: center;
@@ -604,6 +913,18 @@ watch([currentMonth, currentYear], () => {
   padding: 0.1rem 0.1rem;
 }
 
+.calendar-event[draggable='true'] {
+  cursor: grab;
+}
+
+.calendar-event.drag-source {
+  opacity: 0.55;
+}
+
+.calendar-event[draggable='true']:active {
+  cursor: grabbing;
+}
+
 .calendar-event:hover {
   background: #b3de6e;
   border-color: #c4db96;
@@ -777,6 +1098,40 @@ watch([currentMonth, currentYear], () => {
     background: #374151;
   }
 
+  .calendar-day.range-single {
+    background-color: rgba(96, 165, 250, 0.28) !important;
+    box-shadow: inset 0 0 0 2px #60a5fa;
+  }
+
+  .calendar-day.range-start {
+    background-color: rgba(96, 165, 250, 0.18) !important;
+    box-shadow:
+      inset 2px 0 0 0 #60a5fa,
+      inset 0 2px 0 0 #60a5fa,
+      inset 0 -2px 0 0 #60a5fa;
+  }
+
+  .calendar-day.range-end {
+    background-color: rgba(96, 165, 250, 0.18) !important;
+    box-shadow:
+      inset -2px 0 0 0 #60a5fa,
+      inset 0 2px 0 0 #60a5fa,
+      inset 0 -2px 0 0 #60a5fa;
+  }
+
+  .calendar-day.range-middle {
+    background-color: rgba(96, 165, 250, 0.18) !important;
+    box-shadow:
+      inset 0 2px 0 0 #60a5fa,
+      inset 0 -2px 0 0 #60a5fa;
+  }
+
+  .calendar-day.drag-over-target {
+    background-color: rgba(96, 165, 250, 0.12) !important;
+    outline: 2px dashed #60a5fa;
+    outline-offset: -3px;
+  }
+
   .calendar-day.past {
     opacity: 0.6;
   }

package/vue/views/CalendarExample.vue

@@ -27,6 +27,10 @@
 			:current-year="currentYear"
 			@event-click="handleEventClick"
 			@date-click="handleDateClick"
+			@date-range-select="handleDateRangeSelect"
+			@event-move-request="handleEventMoveRequest"
+			@event-moved="handleEventMoved"
+			@event-move-rejected="handleEventMoveRejected"
 			@month-change="handleMonthChange"
 		/>
 	</Section>
@@ -187,8 +191,51 @@ function handleEventClick(event) {
 }
 
 function handleDateClick(date) {
+	// Single-day picks also emit `date-range-select`; keep this for integrations that only listen for `date-click`.
 	console.log('Date clicked:', date)
-	alert(`Date selected: ${date.toLocaleDateString()}`)
+}
+
+function handleDateRangeSelect(start, end) {
+	const same = start.getTime() === end.getTime()
+	const label = same
+		? start.toLocaleDateString()
+		: `${start.toLocaleDateString()} – ${end.toLocaleDateString()}`
+	console.log('Date range:', start, end)
+	alert(`Range selected: ${label}`)
+}
+
+function handleEventMoveRequest({ respond, event, sourceDate, targetDate }) {
+	window.setTimeout(() => {
+		const ok = window.confirm(
+			`Move "${event.title}" to ${targetDate.toLocaleDateString()}? (Cancel = decline)`
+		)
+		respond(ok)
+	}, 50)
+}
+
+function applyEventDateShift(event, deltaMs) {
+	const i = events.value.findIndex(e => String(e.id) === String(event.id))
+	if (i === -1) return
+	const ev = events.value[i]
+	const next = { ...ev }
+	if (next.startDate != null && next.endDate != null) {
+		next.startDate = new Date(new Date(next.startDate).getTime() + deltaMs)
+		next.endDate = new Date(new Date(next.endDate).getTime() + deltaMs)
+	} else if (next.date != null) {
+		next.date = new Date(new Date(next.date).getTime() + deltaMs)
+	}
+	const copy = [...events.value]
+	copy[i] = next
+	events.value = copy
+}
+
+function handleEventMoved({ event, sourceDate, targetDate }) {
+	const deltaMs = targetDate.getTime() - sourceDate.getTime()
+	applyEventDateShift(event, deltaMs)
+}
+
+function handleEventMoveRejected(payload) {
+	console.log('event-move-rejected', payload)
 }
 
 // Helper function to update the date picker value