@davidbirchall/core 1.0.6 → 1.0.8

package/src/components/Calendar/Calendar.vue

@@ -0,0 +1,528 @@
+<template>
+  <div class="calendar">
+    <div class="calendar-header">
+      <button @click.stop="previousMonth" class="calendar-nav" type="button">
+        ‹
+      </button>
+      <div class="calendar-title">
+        <button @click.stop="showMonthPicker" class="calendar-month-btn" type="button">
+          {{ monthName }}
+        </button>
+        <button @click.stop="showYearPicker" class="calendar-year-btn" type="button">
+          {{ currentYear }}
+        </button>
+      </div>
+      <button @click.stop="nextMonth" class="calendar-nav" type="button">
+        ›
+      </button>
+    </div>
+
+    <div v-if="!pickerMode" class="calendar-body">
+      <div class="calendar-weekdays">
+        <div
+          v-for="day in weekdays"
+          :key="day"
+          class="calendar-weekday"
+        >
+          {{ day }}
+        </div>
+      </div>
+
+      <div class="calendar-days">
+        <button
+          v-for="day in calendarDays"
+          :key="day.dateString"
+          @click="selectDate(day)"
+          type="button"
+          :disabled="day.isDisabled"
+          :class="[
+            'calendar-day',
+            {
+              'calendar-day--other-month': !day.isCurrentMonth,
+              'calendar-day--today': day.isToday,
+              'calendar-day--selected': day.isSelected,
+              'calendar-day--disabled': day.isDisabled,
+              'calendar-day--in-range': day.isInRange
+            }
+          ]"
+        >
+          {{ day.date.getDate() }}
+        </button>
+      </div>
+    </div>
+
+    <div v-else-if="pickerMode === 'month'" class="calendar-picker">
+      <div class="calendar-picker-grid">
+        <button
+          v-for="(month, index) in monthNames"
+          :key="month"
+          @click.stop="selectMonth(index)"
+          type="button"
+          :class="[
+            'calendar-picker-item',
+            { 'calendar-picker-item--selected': index === currentMonth }
+          ]"
+        >
+          {{ month }}
+        </button>
+      </div>
+    </div>
+
+    <div v-else-if="pickerMode === 'year'" class="calendar-picker">
+      <div class="calendar-picker-nav">
+        <button @click.stop="previousYearPage" class="calendar-nav" type="button">
+          ‹
+        </button>
+        <span class="calendar-picker-range">{{ yearRangeLabel }}</span>
+        <button @click.stop="nextYearPage" class="calendar-nav" type="button">
+          ›
+        </button>
+      </div>
+      <div class="calendar-picker-grid">
+        <button
+          v-for="year in yearRange"
+          :key="year"
+          @click.stop="selectYear(year)"
+          type="button"
+          :class="[
+            'calendar-picker-item',
+            { 'calendar-picker-item--selected': year === currentYear }
+          ]"
+        >
+          {{ year }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import type { CalendarProps, CalendarDay } from './types'
+
+const props = withDefaults(defineProps<CalendarProps>(), {
+  mode: 'single',
+  locale: 'en-US',
+  firstDayOfWeek: 0
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string | string[] | { start: string; end: string }]
+}>()
+
+const getInitialDate = (): Date => {
+  if (props.initialDate) {
+    const [year, month, day] = props.initialDate.split('-').map(Number)
+    return new Date(year, month - 1, day)
+  }
+  
+  if (props.modelValue) {
+    if (typeof props.modelValue === 'string') {
+      const [year, month, day] = props.modelValue.split('-').map(Number)
+      return new Date(year, month - 1, day)
+    }
+    if (typeof props.modelValue === 'object' && 'start' in props.modelValue && props.modelValue.start) {
+      const [year, month, day] = props.modelValue.start.split('-').map(Number)
+      return new Date(year, month - 1, day)
+    }
+    if (Array.isArray(props.modelValue) && props.modelValue.length > 0) {
+      const [year, month, day] = props.modelValue[0].split('-').map(Number)
+      return new Date(year, month - 1, day)
+    }
+  }
+  
+  return new Date()
+}
+
+const initialDate = getInitialDate()
+const currentMonth = ref(initialDate.getMonth())
+const currentYear = ref(initialDate.getFullYear())
+const pickerMode = ref<'month' | 'year' | null>(null)
+const rangeStart = ref<string | null>(null)
+const yearPageStart = ref(Math.floor(initialDate.getFullYear() / 12) * 12)
+
+const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+const fullMonthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
+const weekdayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
+
+const monthName = computed(() => fullMonthNames[currentMonth.value])
+
+const weekdays = computed(() => {
+  const days = [...weekdayNames]
+  if (props.firstDayOfWeek > 0) {
+    return [...days.slice(props.firstDayOfWeek), ...days.slice(0, props.firstDayOfWeek)]
+  }
+  return days
+})
+
+const yearRange = computed(() => {
+  return Array.from({ length: 12 }, (_, i) => yearPageStart.value + i)
+})
+
+const yearRangeLabel = computed(() => {
+  const start = yearPageStart.value
+  const end = start + 11
+  return `${start} - ${end}`
+})
+
+const calendarDays = computed<CalendarDay[]>(() => {
+  const days: CalendarDay[] = []
+  const firstDay = new Date(currentYear.value, currentMonth.value, 1)
+  const lastDay = new Date(currentYear.value, currentMonth.value + 1, 0)
+  
+  let startDay = firstDay.getDay() - props.firstDayOfWeek
+  if (startDay < 0) startDay += 7
+  
+  const prevMonthDays = new Date(currentYear.value, currentMonth.value, 0).getDate()
+  
+  // Previous month days
+  for (let i = startDay - 1; i >= 0; i--) {
+    const date = new Date(currentYear.value, currentMonth.value - 1, prevMonthDays - i)
+    days.push(createCalendarDay(date, false))
+  }
+  
+  // Current month days
+  for (let i = 1; i <= lastDay.getDate(); i++) {
+    const date = new Date(currentYear.value, currentMonth.value, i)
+    days.push(createCalendarDay(date, true))
+  }
+  
+  // Next month days
+  const remainingDays = 42 - days.length
+  for (let i = 1; i <= remainingDays; i++) {
+    const date = new Date(currentYear.value, currentMonth.value + 1, i)
+    days.push(createCalendarDay(date, false))
+  }
+  
+  return days
+})
+
+const createCalendarDay = (date: Date, isCurrentMonth: boolean): CalendarDay => {
+  const dateString = formatDate(date)
+  const today = formatDate(new Date())
+  
+  return {
+    date,
+    dateString,
+    isCurrentMonth,
+    isToday: dateString === today,
+    isSelected: isDateSelected(dateString),
+    isDisabled: isDateDisabled(dateString),
+    isInRange: isDateInRange(dateString)
+  }
+}
+
+const formatDate = (date: Date): string => {
+  const year = date.getFullYear()
+  const month = String(date.getMonth() + 1).padStart(2, '0')
+  const day = String(date.getDate()).padStart(2, '0')
+  return `${year}-${month}-${day}`
+}
+
+const isDateSelected = (dateString: string): boolean => {
+  if (!props.modelValue) return false
+  
+  if (props.mode === 'single') {
+    return props.modelValue === dateString
+  }
+  
+  if (props.mode === 'multiple' && Array.isArray(props.modelValue)) {
+    return props.modelValue.includes(dateString)
+  }
+  
+  if (props.mode === 'range' && typeof props.modelValue === 'object' && 'start' in props.modelValue) {
+    return dateString === props.modelValue.start || dateString === props.modelValue.end
+  }
+  
+  return false
+}
+
+const isDateDisabled = (dateString: string): boolean => {
+  if (props.minDate && dateString < props.minDate) return true
+  if (props.maxDate && dateString > props.maxDate) return true
+  if (props.disabledDates?.includes(dateString)) return true
+  return false
+}
+
+const isDateInRange = (dateString: string): boolean => {
+  if (props.mode !== 'range') return false
+  if (typeof props.modelValue !== 'object' || !('start' in props.modelValue)) return false
+  
+  const { start, end } = props.modelValue
+  if (!start || !end) return false
+  
+  return dateString > start && dateString < end
+}
+
+const selectDate = (day: CalendarDay) => {
+  if (day.isDisabled) return
+  
+  if (props.mode === 'single') {
+    emit('update:modelValue', day.dateString)
+  } else if (props.mode === 'multiple') {
+    const current = Array.isArray(props.modelValue) ? [...props.modelValue] : []
+    const index = current.indexOf(day.dateString)
+    
+    if (index > -1) {
+      current.splice(index, 1)
+    } else {
+      current.push(day.dateString)
+    }
+    
+    emit('update:modelValue', current)
+  } else if (props.mode === 'range') {
+    if (!rangeStart.value) {
+      rangeStart.value = day.dateString
+      emit('update:modelValue', { start: day.dateString, end: day.dateString })
+    } else {
+      const start = rangeStart.value < day.dateString ? rangeStart.value : day.dateString
+      const end = rangeStart.value < day.dateString ? day.dateString : rangeStart.value
+      emit('update:modelValue', { start, end })
+      rangeStart.value = null
+    }
+  }
+}
+
+const previousMonth = () => {
+  if (currentMonth.value === 0) {
+    currentMonth.value = 11
+    currentYear.value--
+  } else {
+    currentMonth.value--
+  }
+}
+
+const nextMonth = () => {
+  if (currentMonth.value === 11) {
+    currentMonth.value = 0
+    currentYear.value++
+  } else {
+    currentMonth.value++
+  }
+}
+
+const showMonthPicker = () => {
+  pickerMode.value = pickerMode.value === 'month' ? null : 'month'
+}
+
+const showYearPicker = () => {
+  if (pickerMode.value !== 'year') {
+    // Center the year page around the current year when opening
+    yearPageStart.value = Math.floor(currentYear.value / 12) * 12
+  }
+  pickerMode.value = pickerMode.value === 'year' ? null : 'year'
+}
+
+const selectMonth = (month: number) => {
+  currentMonth.value = month
+  pickerMode.value = null
+}
+
+const selectYear = (year: number) => {
+  currentYear.value = year
+  pickerMode.value = null
+}
+
+const previousYearPage = () => {
+  yearPageStart.value -= 12
+}
+
+const nextYearPage = () => {
+  yearPageStart.value += 12
+}
+</script>
+
+<style scoped>
+.calendar {
+  background: white;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.75rem;
+  padding: 1rem;
+  width: 100%;
+  max-width: 320px;
+  user-select: none;
+}
+
+.calendar-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+  padding-bottom: 0.75rem;
+  border-bottom: 1px solid #f3f4f6;
+}
+
+.calendar-title {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.calendar-month-btn,
+.calendar-year-btn {
+  background: none;
+  border: none;
+  font-size: 1rem;
+  font-weight: 600;
+  color: #1f2937;
+  cursor: pointer;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.375rem;
+  transition: all 0.2s;
+}
+
+.calendar-month-btn:hover,
+.calendar-year-btn:hover {
+  background: #f3f4f6;
+}
+
+.calendar-nav {
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  color: #6b7280;
+  cursor: pointer;
+  width: 2rem;
+  height: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.375rem;
+  transition: all 0.2s;
+}
+
+.calendar-nav:hover {
+  background: #f3f4f6;
+  color: #1f2937;
+}
+
+.calendar-body {
+  display: flex;
+  flex-direction: column;
+}
+
+.calendar-weekdays {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 0.25rem;
+  margin-bottom: 0.5rem;
+}
+
+.calendar-weekday {
+  text-align: center;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: #6b7280;
+  padding: 0.5rem 0;
+}
+
+.calendar-days {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 0.25rem;
+}
+
+.calendar-day {
+  aspect-ratio: 1;
+  border: none;
+  background: none;
+  font-size: 0.875rem;
+  color: #1f2937;
+  cursor: pointer;
+  border-radius: 0.375rem;
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.calendar-day:hover:not(:disabled) {
+  background: #f3f4f6;
+}
+
+.calendar-day--other-month {
+  color: #d1d5db;
+}
+
+.calendar-day--today {
+  font-weight: 700;
+  color: #667eea;
+}
+
+.calendar-day--selected {
+  background: #667eea;
+  color: white;
+  font-weight: 600;
+}
+
+.calendar-day--selected:hover {
+  background: #5568d3;
+}
+
+.calendar-day--in-range {
+  background: #eef2ff;
+  color: #667eea;
+}
+
+.calendar-day--disabled {
+  color: #d1d5db;
+  cursor: not-allowed;
+}
+
+.calendar-day--disabled:hover {
+  background: none;
+}
+
+.calendar-picker {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.calendar-picker-nav {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.5rem 0;
+  margin-bottom: 0.5rem;
+  border-bottom: 1px solid #f3f4f6;
+}
+
+.calendar-picker-range {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: #1f2937;
+}
+
+.calendar-picker-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0.5rem;
+}
+
+.calendar-picker-item {
+  background: none;
+  border: 1px solid #e5e7eb;
+  padding: 0.75rem;
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+  color: #1f2937;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.calendar-picker-item:hover {
+  background: #f3f4f6;
+  border-color: #667eea;
+}
+
+.calendar-picker-item--selected {
+  background: #667eea;
+  color: white;
+  border-color: #667eea;
+}
+
+.calendar-picker-item--selected:hover {
+  background: #5568d3;
+}
+</style>

package/src/components/Calendar/types.ts

@@ -0,0 +1,20 @@
+export interface CalendarProps {
+  modelValue?: string | string[] | { start: string; end: string }
+  mode?: 'single' | 'multiple' | 'range'
+  minDate?: string
+  maxDate?: string
+  disabledDates?: string[]
+  locale?: string
+  firstDayOfWeek?: 0 | 1 | 2 | 3 | 4 | 5 | 6
+  initialDate?: string
+}
+
+export interface CalendarDay {
+  date: Date
+  dateString: string
+  isCurrentMonth: boolean
+  isToday: boolean
+  isSelected: boolean
+  isDisabled: boolean
+  isInRange: boolean
+}

package/src/components/Card/Card.stories.ts

@@ -0,0 +1,88 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import Card from './Card.vue'
+
+const meta = {
+  title: 'Components/Card',
+  component: Card,
+  tags: ['autodocs'],
+  argTypes: {
+    hoverable: {
+      control: 'boolean',
+      description: 'Enable hover effect'
+    }
+  },
+  args: {
+    hoverable: false
+  }
+} satisfies Meta<typeof Card>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: (args: any) => ({
+    components: { Card },
+    setup() {
+      return { args }
+    },
+    template: `
+      <Card v-bind="args">
+        <p>This is the card body content. You can put any content here.</p>
+      </Card>
+    `
+  })
+}
+
+export const WithHeader: Story = {
+  render: (args: any) => ({
+    components: { Card },
+    setup() {
+      return { args }
+    },
+    template: `
+      <Card v-bind="args">
+        <template #header>Card Header</template>
+        <p>This is the card body content with a header.</p>
+      </Card>
+    `
+  })
+}
+
+export const WithHeaderAndFooter: Story = {
+  render: (args: any) => ({
+    components: { Card },
+    setup() {
+      return { args }
+    },
+    template: `
+      <Card v-bind="args">
+        <template #header>Card Title</template>
+        <p>This card has both a header and a footer section.</p>
+        <template #footer>
+          <div style="display: flex; gap: 0.5rem;">
+            <button>Cancel</button>
+            <button>Save</button>
+          </div>
+        </template>
+      </Card>
+    `
+  })
+}
+
+export const Hoverable: Story = {
+  args: {
+    hoverable: true
+  },
+  render: (args: any) => ({
+    components: { Card },
+    setup() {
+      return { args }
+    },
+    template: `
+      <Card v-bind="args">
+        <template #header>Hoverable Card</template>
+        <p>Hover over this card to see the effect!</p>
+      </Card>
+    `
+  })
+}