picocrank 1.4.0 → 1.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "picocrank",
-  "version": "1.4.0",
+  "version": "1.6.0",
   "description": "A set of zero dependency Vue components built on the Femtocrank global CSS theme.",
   "main": "vite.config.js",
   "scripts": {

package/router.js

@@ -4,6 +4,7 @@ import { HomeIcon } from '@hugeicons/core-free-icons';
 import { TableIcon } from '@hugeicons/core-free-icons';
 import { ViewIcon } from '@hugeicons/core-free-icons';
 import { SecurityValidationIcon } from '@hugeicons/core-free-icons';
+import { CalendarIcon } from '@hugeicons/core-free-icons';
 
 const routes = [
   {
@@ -43,6 +44,16 @@ const routes = [
       title: 'Admin',
       icon: SecurityValidationIcon,
     }
+  },
+  {
+    name: 'CalendarExample',
+    path: '/calendar-example',
+    component: () => import('./vue/views/CalendarExample.vue'),
+    props: true,
+    meta: {
+      title: 'Calendar Example',
+      icon: CalendarIcon,
+    }
   }
 ];
 

package/vue/components/Calendar.vue

@@ -0,0 +1,696 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+
+export interface CalendarEvent {
+  id: string | number
+  title: string
+  startDate?: Date | string | null
+  endDate?: Date | string | null
+  date?: Date | string | null
+  [key: string]: any
+}
+
+export interface CalendarProps {
+  events: CalendarEvent[]
+  monthNames?: string[]
+  dayNames?: string[]
+  loading?: boolean
+  error?: string | null
+  // Formatter functions
+  getEventDate?: (event: CalendarEvent) => Date | null
+  getEventDateRange?: (event: CalendarEvent) => { start: Date | null; end: Date | null }
+  formatEventTime?: (event: CalendarEvent, date: Date) => string
+  // Customization
+  showNavigation?: boolean
+  currentMonth?: number
+  currentYear?: number
+}
+
+const props = withDefaults(defineProps<CalendarProps>(), {
+  section: false,
+  monthNames: () => [
+    'January', 'February', 'March', 'April', 'May', 'June',
+    'July', 'August', 'September', 'October', 'November', 'December'
+  ],
+  dayNames: () => ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+  loading: false,
+  error: null,
+  showNavigation: true,
+})
+
+const emit = defineEmits<{
+  'event-click': [event: CalendarEvent]
+  'date-click': [date: Date]
+  'month-change': [month: number, year: number]
+  'event-context-menu': [event: CalendarEvent, mouseEvent: MouseEvent]
+}>()
+
+// Internal calendar state
+const internalCurrentDate = ref(new Date())
+const currentDate = computed(() => {
+  if (props.currentMonth !== undefined && props.currentYear !== undefined) {
+    return new Date(props.currentYear, props.currentMonth, 1)
+  }
+  return internalCurrentDate.value
+})
+
+const currentMonth = computed(() => currentDate.value.getMonth())
+const currentYear = computed(() => currentDate.value.getFullYear())
+
+// Helper function to check if a time is midnight (00:00)
+function isMidnight(dateValue: any): boolean {
+  if (!dateValue) return false
+  const date = new Date(dateValue)
+  return date.getHours() === 0 && date.getMinutes() === 0
+}
+
+// Helper function to format time, returning "No time" if midnight
+function formatTimeOrNoTime(dateValue: any): string {
+  if (!dateValue) return 'No time'
+  if (isMidnight(dateValue)) return 'No time'
+  const date = new Date(dateValue)
+  return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+}
+
+// Get event date range
+function getEventDateRange(event: CalendarEvent): { start: Date | null; end: Date | null } {
+  if (props.getEventDateRange) {
+    return props.getEventDateRange(event)
+  }
+  
+  // Default implementation
+  let start: Date | null = null
+  let end: Date | null = null
+  
+  if (event.startDate) {
+    start = new Date(event.startDate)
+  } else if (event.date) {
+    start = new Date(event.date)
+  }
+  
+  if (event.endDate) {
+    end = new Date(event.endDate)
+  }
+  
+  return { start, end }
+}
+
+// Get events for a specific date
+function getEventsForDate(date: Date): CalendarEvent[] {
+  const targetDate = new Date(date)
+  targetDate.setHours(0, 0, 0, 0)
+
+  return props.events.filter(event => {
+    const { start, end } = getEventDateRange(event)
+    
+    if (!start) return false
+    
+    const startDateOnly = new Date(start)
+    startDateOnly.setHours(0, 0, 0, 0)
+    
+    if (end) {
+      const endDateOnly = new Date(end)
+      endDateOnly.setHours(0, 0, 0, 0)
+      return targetDate >= startDateOnly && targetDate <= endDateOnly
+    } else {
+      return targetDate.getTime() === startDateOnly.getTime()
+    }
+  })
+}
+
+// Check if an event is a multi-day event
+function isMultiDayEvent(event: CalendarEvent): boolean {
+  const { start, end } = getEventDateRange(event)
+  
+  if (!start || !end) return false
+
+  const startDate = new Date(start)
+  const endDate = new Date(end)
+
+  startDate.setHours(0, 0, 0, 0)
+  endDate.setHours(0, 0, 0, 0)
+
+  return startDate.getTime() !== endDate.getTime()
+}
+
+// Get the position of an event within a multi-day range for a specific date
+function getMultiDayPosition(event: CalendarEvent, date: Date): 'start' | 'middle' | 'end' | 'single' {
+  const { start, end } = getEventDateRange(event)
+  
+  if (!start || !end) return 'single'
+
+  const startDate = new Date(start)
+  const endDate = new Date(end)
+  const targetDate = new Date(date)
+
+  startDate.setHours(0, 0, 0, 0)
+  endDate.setHours(0, 0, 0, 0)
+  targetDate.setHours(0, 0, 0, 0)
+
+  if (startDate.getTime() === endDate.getTime()) return 'single'
+  if (targetDate.getTime() === startDate.getTime()) return 'start'
+  if (targetDate.getTime() === endDate.getTime()) return 'end'
+  if (targetDate > startDate && targetDate < endDate) return 'middle'
+
+  return 'single'
+}
+
+// Format event time based on position in multi-day event
+function formatEventTimeDefault(event: CalendarEvent, date: Date): string {
+  if (props.formatEventTime) {
+    return props.formatEventTime(event, date)
+  }
+  
+  const { start, end } = getEventDateRange(event)
+  const position = getMultiDayPosition(event, date)
+
+  if (!start || !end) return 'No time'
+
+  if (position === 'start') {
+    return formatTimeOrNoTime(start)
+  } else if (position === 'end') {
+    return formatTimeOrNoTime(end)
+  } else if (position === 'middle') {
+    return 'All day'
+  } else if (position === 'single') {
+    return formatTimeOrNoTime(start)
+  }
+
+  return 'All day'
+}
+
+// Calendar generation
+const calendarDays = computed(() => {
+  const year = currentYear.value
+  const month = currentMonth.value
+
+  const firstDay = new Date(year, month, 1)
+  const lastDay = new Date(year, month + 1, 0)
+  const daysInMonth = lastDay.getDate()
+
+  // Get starting day of week (Monday as first day)
+  const startDay = (firstDay.getDay() + 6) % 7
+
+  const days = []
+
+  // Add days from previous month to fill the first row
+  const prevMonth = month === 0 ? 11 : month - 1
+  const prevYear = month === 0 ? year - 1 : year
+  const prevMonthLastDay = new Date(prevYear, prevMonth + 1, 0).getDate()
+
+  for (let i = 0; i < startDay; i++) {
+    const day = prevMonthLastDay - startDay + i + 1
+    const date = new Date(prevYear, prevMonth, day)
+    days.push({
+      date,
+      events: getEventsForDate(date)
+    })
+  }
+
+  // Add days of the month
+  for (let day = 1; day <= daysInMonth; day++) {
+    const date = new Date(year, month, day)
+    days.push({
+      date,
+      events: getEventsForDate(date)
+    })
+  }
+
+  // Add days from next month to complete the last row
+  const totalCells = 42
+  const remainingCells = totalCells - days.length
+
+  for (let day = 1; day <= remainingCells; day++) {
+    const date = new Date(year, month + 1, day)
+    days.push({
+      date,
+      events: getEventsForDate(date)
+    })
+  }
+
+  return days
+})
+
+// Navigation functions
+function previousMonth() {
+  if (props.currentMonth !== undefined && props.currentYear !== undefined) {
+    const newMonth = currentMonth.value === 0 ? 11 : currentMonth.value - 1
+    const newYear = currentMonth.value === 0 ? currentYear.value - 1 : currentYear.value
+    emit('month-change', newMonth, newYear)
+  } else {
+    internalCurrentDate.value = new Date(currentYear.value, currentMonth.value - 1, 1)
+  }
+}
+
+function nextMonth() {
+  if (props.currentMonth !== undefined && props.currentYear !== undefined) {
+    const newMonth = currentMonth.value === 11 ? 0 : currentMonth.value + 1
+    const newYear = currentMonth.value === 11 ? currentYear.value + 1 : currentYear.value
+    emit('month-change', newMonth, newYear)
+  } else {
+    internalCurrentDate.value = new Date(currentYear.value, currentMonth.value + 1, 1)
+  }
+}
+
+function goToToday() {
+  if (props.currentMonth !== undefined && props.currentYear !== undefined) {
+    const today = new Date()
+    emit('month-change', today.getMonth(), today.getFullYear())
+  } else {
+    internalCurrentDate.value = new Date()
+  }
+}
+
+// Event handlers
+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)
+}
+</script>
+
+<template>
+  <div class="calendar-wrapper">
+    <div v-if="showNavigation" class="calendar-header-nav">
+      <h2 class="calendar-title">{{ monthNames[currentMonth] }} {{ currentYear }}</h2>
+      <div class="calendar-nav-buttons">
+        <slot name="nav-buttons">
+          <button @click="previousMonth" class="button neutral">‹</button>
+          <button @click="goToToday" class="button neutral">Today</button>
+          <button @click="nextMonth" class="button neutral">›</button>
+        </slot>
+      </div>
+    </div>
+
+    <div v-if="error" class="calendar-error">{{ error }}</div>
+    <div v-else-if="loading" class="calendar-loading">Loading…</div>
+    <div v-else class="calendar-container">
+      <div class="calendar-grid">
+        <!-- Day headers -->
+        <div v-for="day in dayNames" :key="day" class="day-header">{{ day }}</div>
+
+        <!-- Calendar days -->
+        <div
+          v-for="(day, index) in calendarDays"
+          :key="index"
+          class="calendar-day"
+          :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
+          }"
+        >
+          <div v-if="day" class="day-content" @click="handleDateClick(day.date)">
+            <div class="day-number clickable">
+              {{ day.date.getDate() }}
+            </div>
+            <div class="day-events">
+              <div
+                v-for="event in day.events.sort((a, b) => {
+                  const aMultiDay = isMultiDayEvent(a);
+                  const bMultiDay = isMultiDayEvent(b);
+                  if (aMultiDay && !bMultiDay) return -1;
+                  if (!aMultiDay && bMultiDay) return 1;
+                  return 0;
+                }).slice(0, 3)"
+                :key="event.id"
+                class="calendar-event"
+                :class="{
+                  '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'
+                }"
+                @click.stop="handleEventClick(event)"
+                @contextmenu.stop="handleContextMenu(event, $event)"
+              >
+                <slot name="event" :event="event" :date="day.date" :position="getMultiDayPosition(event, day.date)">
+                  <div class="event-content">
+                    <div class="event-title">
+                      {{ event.title }}
+                      <span v-if="isMultiDayEvent(event)" class="multi-day-indicator">
+                        {{ getMultiDayPosition(event, day.date) === 'start' ? '▶' :
+                           getMultiDayPosition(event, day.date) === 'end' ? '◀' :
+                           getMultiDayPosition(event, day.date) === 'middle' ? '▬' : '' }}
+                      </span>
+                    </div>
+                    <div class="event-time">
+                      {{ formatEventTimeDefault(event, day.date) }}
+                    </div>
+                  </div>
+                </slot>
+              </div>
+              <div v-if="day.events.length > 3" class="more-events">
+                +{{ day.events.length - 3 }} more
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.calendar-wrapper {
+  width: 100%;
+}
+
+.calendar-header-nav {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+  padding: 1rem;
+  background: #f8f9fa;
+  border-radius: 8px;
+}
+
+.calendar-title {
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: 600;
+}
+
+.calendar-nav-buttons {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.calendar-error {
+  color: #b00020;
+  padding: 1rem;
+}
+
+.calendar-loading {
+  padding: 1rem;
+  text-align: center;
+}
+
+.calendar-container {
+  background: white;
+  border: 1px solid #e0e0e0;
+  overflow: hidden;
+  border-radius: 8px;
+}
+
+.calendar-grid {
+  display: grid;
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+  min-height: 400px;
+}
+
+.day-header {
+  padding: 1rem;
+  text-align: center;
+  font-weight: 600;
+  color: #666;
+  border-right: 1px solid #e0e0e0;
+  border-bottom: 1px solid #e0e0e0;
+  background: #f8f9fa;
+}
+
+.day-header:last-child {
+  border-right: none;
+}
+
+.calendar-day {
+  border-right: 1px solid #e0e0e0;
+  border-bottom: 1px solid #e0e0e0;
+  min-height: 120px;
+  position: relative;
+  transition: background-color 0.2s ease;
+  cursor: pointer;
+}
+
+.calendar-day:hover {
+  background-color: #f0f8ff;
+}
+
+.calendar-day:nth-child(7n) {
+  border-right: none;
+}
+
+.calendar-day.weekend {
+  background: #f8f9fa;
+}
+
+.calendar-day.weekend:hover {
+  background: #e9ecef;
+}
+
+.calendar-day.next-month,
+.calendar-day.prev-month {
+  background: #f8f9fa;
+  opacity: 0.6;
+}
+
+.calendar-day.next-month:hover,
+.calendar-day.prev-month:hover {
+  background: #e9ecef;
+  opacity: 0.8;
+}
+
+.calendar-day.today {
+  background: #f7f8d7;
+  font-weight: bold;
+}
+
+.calendar-day.today:hover {
+  background: #bbdefb;
+}
+
+
+.day-content {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.day-number {
+  font-size: 0.9rem;
+  margin-bottom: 0.25rem;
+  color: #333;
+  text-decoration: none;
+  display: inline-block;
+  padding: 0.1rem;
+  border-radius: 4px;
+  transition: all 0.2s;
+  min-width: 1.5rem;
+  text-align: center;
+}
+
+.day-number.clickable {
+  cursor: pointer;
+  padding: 0.25rem;
+  border-radius: 4px;
+  transition: background-color 0.2s;
+}
+
+.day-content:hover .day-number.clickable {
+  color: #007bff;
+}
+
+.day-events {
+  flex: 1;
+  overflow: hidden;
+}
+
+.calendar-event {
+  background: #d6f1aa;
+  border: 1px solid #c4db96;
+  margin-bottom: 0.25rem;
+  cursor: pointer;
+  transition: all 0.2s;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  padding: 0.1rem 0.1rem;
+}
+
+.calendar-event:hover {
+  background: #b3de6e;
+  border-color: #c4db96;
+  transform: translateY(-1px);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
+}
+
+.calendar-event.multi-day-start {
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+}
+
+.calendar-event.multi-day-middle {
+  border-radius: 0;
+}
+
+.calendar-event.multi-day-end {
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+
+.event-content {
+  cursor: pointer;
+}
+
+.event-title {
+  font-weight: bold;
+  font-size: 0.85rem;
+  color: #333;
+  white-space: normal;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.multi-day-indicator {
+  font-size: 0.7rem;
+  color: #007bff;
+  font-weight: bold;
+}
+
+.event-time {
+  font-size: 0.75rem;
+  color: #666;
+  margin-top: 0.125rem;
+}
+
+.more-events {
+  font-size: 0.75rem;
+  color: #666;
+  text-align: center;
+  padding: 0.25rem;
+  background: #f8f9fa;
+  border-radius: 4px;
+  margin-top: 0.25rem;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+  .calendar-header-nav {
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+
+  .calendar-title {
+    font-size: 1.2rem;
+  }
+
+  .calendar-day {
+    min-height: 80px;
+  }
+
+  .day-number {
+    font-size: 1rem;
+  }
+
+  .event-title {
+    font-size: 0.8rem;
+  }
+
+  .event-time {
+    font-size: 0.7rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .calendar-grid {
+    min-height: 300px;
+  }
+
+  .calendar-day {
+    min-height: 60px;
+  }
+
+  .day-header {
+    padding: 0.5rem 0.25rem;
+    font-size: 0.8rem;
+  }
+}
+
+@media (min-width: 768px) {
+  .day-content {
+    padding: 0.45rem;
+  }
+
+  .calendar-event {
+    border-radius: 4px;
+    padding: 0.25rem 0.5rem;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .calendar-container {
+    background: #565656;
+    border-color: #374151;
+    border: 1px solid #565656;
+  }
+
+  .calendar-day.today {
+    background: #646c70;
+  }
+
+  .calendar-day.weekend {
+    background: #444;
+  }
+
+  .calendar-day.weekend:hover {
+    background: #1a1a1a;
+  }
+
+  .calendar-day.next-month,
+  .calendar-day.prev-month {
+    background: #1a1a1a !important;
+  }
+  
+  .calendar-day.next-month:hover,
+  .calendar-day.prev-month:hover {
+    background: #374151;
+  }
+
+  .calendar-day.today:hover {
+    background: #374151;
+  }
+
+  .calendar-day {
+    border: 1px solid #3b3b3b;
+  }
+
+  .day-number {
+    color: #f9fafb;
+  }
+
+  .day-header {
+    color: #f9fafb;
+    background: #444 !important;
+    border: 1px solid #374151;
+    border-color: #374151;
+  }
+
+  .day-content:hover .day-number.clickable {
+    color: #f9fafb;
+  }
+
+  .calendar-day:hover {
+    background-color: #374151;
+  }
+
+  .calendar-day.today:hover {
+    background: #374151;
+  }
+
+  .calendar-day.weekend:hover {
+    background: #374151;
+  }
+}
+</style>

package/vue/components/Pagination.vue

@@ -2,15 +2,28 @@
   <div class="pagination">
     <div class="pagination-info">
       <span class="pagination-text">
-        Showing {{ startItem + 1 }}-{{ endItem }} of {{ total }} {{ itemTitle }}
+      Page size:
+      <select 
+        id="page-size" 
+        v-model="localPageSize" 
+        @change="handlePageSizeChange"
+        class="page-size-select"
+      >
+        <option value="10">10</option>
+        <option value="25">25</option>
+        <option value="50">50</option>
+        <option value="100">100</option>
+      </select>
+
+      Showing {{ startItem + 1 }}-{{ endItem }} of {{ total }} {{ itemTitle }}
       </span>
     </div>
     
     <div class="pagination-controls">
       <button 
-        class="pagination-btn"
-        :disabled="currentPage === 1"
-        @click="goToPage(currentPage - 1)"
+        class="button"
+        :disabled="currentPageValue === 1"
+        @click="goToPage(currentPageValue - 1)"
         title="Previous page"
       >
         <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
@@ -19,11 +32,10 @@
       </button>
 
       
-      <div class="pagination-pages">
         <button 
           v-if="showFirstPage"
-          class="pagination-btn"
-          :class="{ active: currentPage === 1 }"
+          class="button"
+          :class="{ active: currentPageValue === 1 }"
           @click="goToPage(1)"
         >
           1
@@ -34,8 +46,8 @@
         <button 
           v-for="page in visiblePages" 
           :key="page"
-          class="pagination-btn"
-          :class="{ active: currentPage === page }"
+          class="button"
+          :class="{ active: currentPageValue === page }"
           @click="goToPage(page)"
         >
           {{ page }}
@@ -45,18 +57,17 @@
         
         <button 
           v-if="showLastPage"
-          class="pagination-btn"
-          :class="{ active: currentPage === totalPages }"
+          class="button"
+          :class="{ active: currentPageValue === totalPages }"
           @click="goToPage(totalPages)"
         >
-          {{ totalPages }}
-        </button>
-      </div>
+        {{ totalPages }}
+      </button>
       
       <button 
-        class="pagination-btn"
-        :disabled="currentPage === totalPages"
-        @click="goToPage(currentPage + 1)"
+        class="button"
+        :disabled="currentPageValue === totalPages"
+        @click="goToPage(currentPageValue + 1)"
         title="Next page"
       >
         <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
@@ -64,21 +75,6 @@
         </svg>
       </button>
     </div>
-    
-    <div class="pagination-size" v-if="canChangePageSize">
-      <label for="page-size">Items per page:</label>
-      <select 
-        id="page-size" 
-        v-model="localPageSize" 
-        @change="handlePageSizeChange"
-        class="page-size-select"
-      >
-        <option value="10">10</option>
-        <option value="25">25</option>
-        <option value="50">50</option>
-        <option value="100">100</option>
-      </select>
-    </div>
   </div>
 </template>
 
@@ -86,10 +82,6 @@
 import { ref, computed, watch } from 'vue'
 
 const props = defineProps({
-  pageSize: {
-    type: Number,
-    default: 25
-  },
   total: {
     type: Number,
     required: true
@@ -100,30 +92,46 @@ const props = defineProps({
   },
   canChangePageSize: {
     type: Boolean,
-    default: false
+    default: true,
   },
   itemTitle: {
     type: String,
     default: 'items'
+  },
+  // Support for v-model binding
+  page: {
+    type: Number,
+    default: 1
+  },
+  pageSize: {
+    type: Number,
+    default: 25
   }
 })
 
-const emit = defineEmits(['page-change', 'page-size-change'])
+const emit = defineEmits(['page-change', 'page-size-change', 'update:page', 'update:pageSize'])
 
 const localPageSize = ref(props.pageSize)
 const localCurrentPage = ref(props.currentPage)
 
+// Computed property to get the current page value (supports both v-model and regular props)
+const currentPageValue = computed(() => {
+  // When using v-model, the page prop will be reactive and change
+  // When using regular props, currentPage will be reactive
+  return props.page
+})
+
 const totalPages = computed(() => Math.ceil(props.total / localPageSize.value))
 
-const startItem = computed(() => (localCurrentPage.value - 1) * localPageSize.value)
-const endItem = computed(() => Math.min(localCurrentPage.value * localPageSize.value, props.total))
+const startItem = computed(() => (currentPageValue.value - 1) * localPageSize.value)
+const endItem = computed(() => Math.min(currentPageValue.value * localPageSize.value, props.total))
 
 const maxVisiblePages = 5
 const visiblePages = computed(() => {
   const pages = []
   const halfVisible = Math.floor(maxVisiblePages / 2)
   
-  let start = Math.max(1, localCurrentPage.value - halfVisible)
+  let start = Math.max(1, currentPageValue.value - halfVisible)
   let end = Math.min(totalPages.value, start + maxVisiblePages - 1)
   
   if (end - start < maxVisiblePages - 1) {
@@ -143,22 +151,29 @@ const showFirstEllipsis = computed(() => visiblePages.value[0] > 2)
 const showLastEllipsis = computed(() => visiblePages.value[visiblePages.value.length - 1] < totalPages.value - 1)
 
 function goToPage(page) {
-  if (page >= 1 && page <= totalPages.value && page !== localCurrentPage.value) {
+  if (page >= 1 && page <= totalPages.value && page !== currentPageValue.value) {
     localCurrentPage.value = page
     emit('page-change', page)
+    emit('update:page', page)
   }
 }
 
 function handlePageSizeChange() {
   localCurrentPage.value = 1
   emit('page-size-change', localPageSize.value)
+  emit('update:pageSize', localPageSize.value)
   emit('page-change', 1)
+  emit('update:page', 1)
 }
 
 watch(() => props.currentPage, (newPage) => {
   localCurrentPage.value = newPage
 })
 
+watch(() => props.page, (newPage) => {
+  localCurrentPage.value = newPage
+})
+
 watch(() => props.pageSize, (newSize) => {
   localPageSize.value = newSize
 })
@@ -187,71 +202,39 @@ watch(() => props.pageSize, (newSize) => {
   gap: 0.5rem;
 }
 
-.pagination-pages {
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-}
-
-.pagination-btn {
+.button {
   display: flex;
   align-items: center;
   justify-content: center;
   min-width: 2.5rem;
   height: 2.5rem;
-  padding: 0.5rem;
-  border: 1px solid #dee2e6;
-  background: #fff;
-  color: #495057;
-  text-decoration: none;
-  border-radius: 4px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  font-size: 0.875rem;
-}
-
-.pagination-btn:hover:not(:disabled) {
-  background: #e9ecef;
-  border-color: #adb5bd;
-  color: #495057;
-}
-
-.pagination-btn.active {
-  background: #c6d0d7;
-  color: #333;
 }
 
-.pagination-btn:disabled {
+.button:disabled {
   opacity: 0.5;
+  background: transparent;
   cursor: not-allowed;
 }
 
+.button.active {
+  background: #545f69;
+  color: #fff;
+}
+
 .pagination-ellipsis {
   padding: 0.5rem;
   color: #6c757d;
   font-size: 0.875rem;
 }
 
-.pagination-size {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  font-size: 0.875rem;
-  color: #6c757d;
-}
-
-.page-size-select {
-  padding: 0.25rem 0.5rem;
-  border: 1px solid #dee2e6;
-  border-radius: 4px;
-  background: #fff;
-  font-size: 0.875rem;
+#page-size {
+  background: transparent;
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
 }
 
-.page-size-select:focus {
-  outline: none;
-  border-color: #5681af;
-  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
+option {
+  background: #545f69;
 }
 
 /* Responsive design */

package/vue/views/App.vue

@@ -45,6 +45,7 @@
 	onMounted(() => {
 		sidebar.value.addRouterLink('Welcome')
 		sidebar.value.addRouterLink('TableExample')
+		sidebar.value.addRouterLink('CalendarExample')
 		sidebar.value.addSeparator('separator-1');
 		sidebar.value.addRouterLink('ViewItem', { id: 1 })
 		sidebar.value.addSeparator('separator-2');

package/vue/views/CalendarExample.vue

@@ -0,0 +1,328 @@
+<template>
+	<Section 
+		title="Example Calendar" 
+		padding
+	>
+        <template #toolbar>
+            <button @click="goToToday">Today</button>
+            <button @click="previousMonth">‹</button>
+            <div class="date-picker-container">
+                <input 
+                    id="goto-date"
+                    type="month" 
+                    v-model="selectedDate"
+                    @change="goToSelectedDate"
+                    class="date-picker-input"
+                />
+            </div>
+            <button @click="nextMonth">›</button>
+        </template>
+		<Calendar 
+            :section="true"
+			:events="events"
+			:loading="loading"
+			:error="error"
+			:show-navigation="false"
+			:current-month="currentMonthIndex"
+			:current-year="currentYear"
+			@event-click="handleEventClick"
+			@date-click="handleDateClick"
+			@month-change="handleMonthChange"
+		/>
+	</Section>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import Calendar from '../components/Calendar.vue'
+import Section from '../components/Section.vue'
+
+const events = ref([])
+const loading = ref(false)
+const error = ref(null)
+const currentMonth = ref('?')
+const currentMonthIndex = ref(new Date().getMonth())
+const currentYear = ref(new Date().getFullYear())
+
+// Date picker state - using native HTML5 month input
+const selectedDate = ref('')
+
+// Generate dummy events for the current month
+function generateDummyEvents() {
+	const now = new Date()
+	const currentMonth = now.getMonth()
+	const currentYear = now.getFullYear()
+	
+	// Get the number of days in the current month
+	const daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate()
+	
+	const dummyEvents = []
+	
+	// Add some recurring events
+	for (let day = 1; day <= daysInMonth; day++) {
+		const date = new Date(currentYear, currentMonth, day)
+		const dayOfWeek = date.getDay()
+		
+		// Add weekend events (Saturday and Sunday)
+		if (dayOfWeek === 0 || dayOfWeek === 6) {
+			dummyEvents.push({
+				id: `weekend-${day}`,
+				title: 'Weekend Activity',
+				date: new Date(currentYear, currentMonth, day, 10, 0),
+				description: 'Relaxing weekend activity'
+			})
+		}
+		
+		// Add some random events
+		if (Math.random() > 0.7) {
+			const eventTypes = [
+				{ title: 'Team Meeting', time: [9, 0], duration: 1 },
+				{ title: 'Client Call', time: [14, 30], duration: 0.5 },
+				{ title: 'Project Review', time: [16, 0], duration: 2 },
+				{ title: 'Lunch Break', time: [12, 0], duration: 1 },
+				{ title: 'Code Review', time: [10, 0], duration: 1.5 }
+			]
+			
+			const eventType = eventTypes[Math.floor(Math.random() * eventTypes.length)]
+			const [hours, minutes] = eventType.time
+			
+			dummyEvents.push({
+				id: `event-${day}-${Math.random().toString(36).substr(2, 9)}`,
+				title: eventType.title,
+				date: new Date(currentYear, currentMonth, day, hours, minutes),
+				description: `Scheduled ${eventType.title.toLowerCase()}`
+			})
+		}
+	}
+	
+	// Add some multi-day events
+	dummyEvents.push({
+		id: 'conference-1',
+		title: 'Tech Conference',
+		startDate: new Date(currentYear, currentMonth, 5, 9, 0),
+		endDate: new Date(currentYear, currentMonth, 7, 17, 0),
+		description: 'Annual technology conference'
+	})
+	
+	dummyEvents.push({
+		id: 'vacation-1',
+		title: 'Vacation',
+		startDate: new Date(currentYear, currentMonth, 15, 0, 0),
+		endDate: new Date(currentYear, currentMonth, 18, 23, 59),
+		description: 'Family vacation time'
+	})
+	
+	// Add some all-day events
+	dummyEvents.push({
+		id: 'holiday-1',
+		title: 'Public Holiday',
+		date: new Date(currentYear, currentMonth, 1, 0, 0),
+		description: 'National holiday - office closed'
+	})
+	
+	if (daysInMonth >= 25) {
+		dummyEvents.push({
+			id: 'deadline-1',
+			title: 'Project Deadline',
+			date: new Date(currentYear, currentMonth, 25, 0, 0),
+			description: 'Important project deadline'
+		})
+	}
+	
+	return dummyEvents
+}
+
+function handleEventClick(event) {
+	console.log('Event clicked:', event)
+	alert(`Event: ${event.title}\nDescription: ${event.description || 'No description'}`)
+}
+
+function handleDateClick(date) {
+	console.log('Date clicked:', date)
+	alert(`Date selected: ${date.toLocaleDateString()}`)
+}
+
+// Helper function to update the date picker value
+function updateDatePicker(monthIndex, year) {
+	const month = String(monthIndex + 1).padStart(2, '0')
+	selectedDate.value = `${year}-${month}`
+}
+
+// Navigation functions - using the same fast path as internal calendar navigation
+function previousMonth() {
+	const newMonth = currentMonthIndex.value === 0 ? 11 : currentMonthIndex.value - 1
+	const newYear = currentMonthIndex.value === 0 ? currentYear.value - 1 : currentYear.value
+	
+	// Update state directly (fast path)
+	currentMonthIndex.value = newMonth
+	currentYear.value = newYear
+	
+	// Update title
+	const date = new Date(newYear, newMonth, 1)
+	currentMonth.value = date.toLocaleDateString('en-US', { 
+		month: 'long', 
+		year: 'numeric' 
+	})
+	
+	// Update date picker
+	updateDatePicker(newMonth, newYear)
+}
+
+function nextMonth() {
+	const newMonth = currentMonthIndex.value === 11 ? 0 : currentMonthIndex.value + 1
+	const newYear = currentMonthIndex.value === 11 ? currentYear.value + 1 : currentYear.value
+	
+	// Update state directly (fast path)
+	currentMonthIndex.value = newMonth
+	currentYear.value = newYear
+	
+	// Update title
+	const date = new Date(newYear, newMonth, 1)
+	currentMonth.value = date.toLocaleDateString('en-US', { 
+		month: 'long', 
+		year: 'numeric' 
+	})
+	
+	// Update date picker
+	updateDatePicker(newMonth, newYear)
+}
+
+function goToToday() {
+	const now = new Date()
+	const newMonth = now.getMonth()
+	const newYear = now.getFullYear()
+	
+	// Update state directly (fast path)
+	currentMonthIndex.value = newMonth
+	currentYear.value = newYear
+	
+	// Update title
+	currentMonth.value = now.toLocaleDateString('en-US', { 
+		month: 'long', 
+		year: 'numeric' 
+	})
+	
+	// Update date picker
+	updateDatePicker(newMonth, newYear)
+}
+
+function goToSelectedDate() {
+	if (!selectedDate.value) return
+	
+	// Parse the YYYY-MM format from the native date picker
+	const [year, month] = selectedDate.value.split('-').map(Number)
+	const monthIndex = month - 1 // Convert to 0-based month index
+	
+	// Update state directly (fast path)
+	currentMonthIndex.value = monthIndex
+	currentYear.value = year
+	
+	// Update title
+	const date = new Date(year, monthIndex, 1)
+	currentMonth.value = date.toLocaleDateString('en-US', { 
+		month: 'long', 
+		year: 'numeric' 
+	})
+}
+
+function handleMonthChange(month, year) {
+	console.log('Month changed:', month, year)
+	// In a real app, you might fetch events for the new month
+	loading.value = true
+	
+	// Update current month and year state
+	currentMonthIndex.value = month
+	currentYear.value = year
+	
+	// Use native JavaScript to format month and year
+	const date = new Date(year, month, 1)
+	currentMonth.value = date.toLocaleDateString('en-US', { 
+		month: 'long', 
+		year: 'numeric' 
+	})
+	
+	// Update date picker to reflect the new month
+	updateDatePicker(month, year)
+	
+	setTimeout(() => {
+		// Simulate loading delay
+		events.value = generateDummyEvents()
+		loading.value = false
+	}, 500)
+}
+
+onMounted(() => {
+	// Generate initial events for current month
+	events.value = generateDummyEvents()
+	
+	// Set initial month title using native JavaScript
+	const now = new Date()
+	currentMonthIndex.value = now.getMonth()
+	currentYear.value = now.getFullYear()
+	currentMonth.value = now.toLocaleDateString('en-US', { 
+		month: 'long', 
+		year: 'numeric' 
+	})
+	
+	// Initialize the native date picker with current month/year
+	const year = now.getFullYear()
+	const month = String(now.getMonth() + 1).padStart(2, '0')
+	selectedDate.value = `${year}-${month}`
+})
+</script>
+
+<style scoped>
+.date-picker-container {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.date-picker-label {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #374151;
+}
+
+.date-picker-input {
+  padding: 0.5rem;
+  border: 1px solid #d1d5db;
+  border-radius: 4px;
+  font-size: 0.875rem;
+  background: white;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.date-picker-input:hover {
+  border-color: #9ca3af;
+}
+
+.date-picker-input:focus {
+  outline: none;
+  border-color: #3b82f6;
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+/* Dark theme support */
+@media (prefers-color-scheme: dark) {
+  .date-picker-label {
+    color: #d1d5db;
+  }
+  
+  .date-picker-input {
+    background: #374151;
+    border-color: #4b5563;
+    color: #f9fafb;
+  }
+  
+  .date-picker-input:hover {
+    border-color: #6b7280;
+  }
+  
+  .date-picker-input:focus {
+    border-color: #60a5fa;
+    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);
+  }
+}
+</style>

package/vue/views/TableExample.vue

@@ -11,6 +11,7 @@
 		<Table 
 			 :data = "data" 
 			 :headers = "headers" 
+			 :show-pagination = "true"
 			 >
 			 <template #cell-name="{ row, value }">
 				 <router-link :to="{ name: 'ViewItem', params: { id: row.name } }">
@@ -59,7 +60,61 @@
 			{ name: "Quinn", age: 23, city: "Indianapolis" },
 			{ name: "Rita", age: 37, city: "Seattle" },
 			{ name: "Sam", age: 39, city: "Denver" },
-			{ name: "Tina", age: 21, city: "Washington D.C." }
+			{ name: "Tina", age: 21, city: "Washington D.C." },
+			{ name: "Uma", age: 28, city: "Miami" },
+			{ name: "Victor", age: 30, city: "Portland" },
+			{ name: "Wendy", age: 29, city: "Nashville" },
+			{ name: "Xavier", age: 31, city: "Oklahoma City" },
+			{ name: "Yara", age: 27, city: "Tampa" },
+			{ name: "Zane", age: 32, city: "Albuquerque" },
+			{ name: "Ava", age: 26, city: "Las Vegas" },
+			{ name: "Ben", age: 33, city: "New Orleans" },
+			{ name: "Cara", age: 25, city: "San Francisco" },
+			{ name: "Drew", age: 34, city: "Seattle" },
+			{ name: "Ethan", age: 28, city: "Denver" },
+			{ name: "Fiona", age: 30, city: "Washington D.C." },
+			{ name: "George", age: 29, city: "Miami" },
+			{ name: "Hannah", age: 32, city: "San Diego" },
+			{ name: "Ian", age: 27, city: "Dallas" },
+			{ name: "Jack", age: 31, city: "San Jose" },
+			{ name: "Kathy", age: 26, city: "Austin" },
+			{ name: "Leo", age: 33, city: "Jacksonville" },
+			{ name: "Mia", age: 24, city: "Fort Worth" },
+			{ name: "Nina", age: 38, city: "Columbus" },
+			{ name: "Oscar", age: 36, city: "Charlotte" },
+			{ name: "Paul", age: 34, city: "San Francisco" },
+			{ name: "Quinn", age: 23, city: "Indianapolis" },
+			{ name: "Rita", age: 37, city: "Seattle" },
+			{ name: "Sam", age: 39, city: "Denver" },
+			{ name: "Tina", age: 21, city: "Washington D.C." },
+			{ name: "Uma", age: 28, city: "Miami" },
+			{ name: "Victor", age: 30, city: "Portland" },
+			{ name: "Wendy", age: 29, city: "Nashville" },
+			{ name: "Xavier", age: 31, city: "Oklahoma City" },
+			{ name: "Yara", age: 27, city: "Tampa" },
+			{ name: "Zane", age: 32, city: "Albuquerque" },
+			{ name: "Ava", age: 26, city: "Las Vegas" },
+			{ name: "Ben", age: 33, city: "New Orleans" },
+			{ name: "Cara", age: 25, city: "San Francisco" },
+			{ name: "Drew", age: 34, city: "Seattle" },
+			{ name: "Ethan", age: 28, city: "Denver" },
+			{ name: "Fiona", age: 30, city: "Washington D.C." },
+			{ name: "George", age: 29, city: "Miami" },
+			{ name: "Hannah", age: 32, city: "San Diego" },
+			{ name: "Ian", age: 27, city: "Dallas" },
+			{ name: "Jack", age: 31, city: "San Jose" },
+			{ name: "Kathy", age: 26, city: "Austin" },
+			{ name: "Leo", age: 33, city: "Jacksonville" },
+			{ name: "Mia", age: 24, city: "Fort Worth" },
+			{ name: "Nina", age: 38, city: "Columbus" },
+			{ name: "Oscar", age: 36, city: "Charlotte" },
+			{ name: "Paul", age: 34, city: "San Francisco" },
+			{ name: "Quinn", age: 23, city: "Indianapolis" },
+			{ name: "Rita", age: 37, city: "Seattle" },
+			{ name: "Sam", age: 39, city: "Denver" },
+			{ name: "Tina", age: 21, city: "Washington D.C." },
+			{ name: "Uma", age: 28, city: "Miami" },
+			{ name: "Victor", age: 30, city: "Portland" },
 		]
 	})
 </script>