@davidbirchall/core 1.0.8 → 1.0.9

package/src/components/Calendar/Calendar.vue

@@ -1,528 +0,0 @@
-<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

@@ -1,20 +0,0 @@
-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

@@ -1,88 +0,0 @@
-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>
-    `
-  })
-}