@davidbirchall/core 1.0.8 → 1.0.9

package/src/components/DatePicker/DatePicker.test.ts

@@ -1,87 +0,0 @@
-import { describe, it, expect } from 'vitest'
-import { mount } from '@vue/test-utils'
-import DatePicker from './DatePicker.vue'
-
-describe('DatePicker', () => {
-  it('renders correctly', () => {
-    const wrapper = mount(DatePicker)
-    expect(wrapper.find('.date-picker').exists()).toBe(true)
-    expect(wrapper.find('.date-input').exists()).toBe(true)
-  })
-
-  it('shows placeholder', () => {
-    const wrapper = mount(DatePicker, {
-      props: {
-        placeholder: 'Pick a date'
-      }
-    })
-    
-    const input = wrapper.find('.date-input')
-    expect(input.attributes('placeholder')).toBe('Pick a date')
-  })
-
-  it('displays selected date', () => {
-    const wrapper = mount(DatePicker, {
-      props: {
-        modelValue: '2026-03-15'
-      }
-    })
-    
-    const input = wrapper.find('.date-input')
-    const value = (input.element as HTMLInputElement).value
-    expect(value).toContain('Mar')
-    expect(value).toContain('15')
-    expect(value).toContain('2026')
-  })
-
-  it('opens calendar on click', async () => {
-    const wrapper = mount(DatePicker, {
-      attachTo: document.body
-    })
-    
-    await wrapper.find('.date-picker-input').trigger('click')
-    
-    // Calendar should open
-    expect(wrapper.vm.isOpen).toBe(true)
-  })
-
-  it('respects disabled state', async () => {
-    const wrapper = mount(DatePicker, {
-      props: {
-        disabled: true
-      }
-    })
-    
-    const input = wrapper.find('.date-input')
-    expect(input.attributes('disabled')).toBeDefined()
-    
-    await wrapper.find('.date-picker-input').trigger('click')
-    expect(wrapper.vm.isOpen).toBe(false)
-  })
-
-  it('formats date in long format', () => {
-    const wrapper = mount(DatePicker, {
-      props: {
-        modelValue: '2026-03-15',
-        format: 'long'
-      }
-    })
-    
-    const input = wrapper.find('.date-input')
-    const value = (input.element as HTMLInputElement).value
-    expect(value).toContain('March')
-  })
-
-  it('displays date range', () => {
-    const wrapper = mount(DatePicker, {
-      props: {
-        modelValue: { start: '2026-03-15', end: '2026-03-20' },
-        mode: 'range'
-      }
-    })
-    
-    const input = wrapper.find('.date-input')
-    const value = (input.element as HTMLInputElement).value
-    expect(value).toContain('-')
-  })
-})

package/src/components/DatePicker/DatePicker.vue

@@ -1,302 +0,0 @@
-<template>
-  <div class="date-picker" ref="datePickerRef">
-    <div class="date-picker-input" @click="toggleCalendar">
-      <input
-        type="text"
-        :id="inputId"
-        :value="displayValue"
-        :placeholder="placeholder"
-        readonly
-        :disabled="disabled"
-        :class="['date-input', { 'date-input--error': error }]"
-      />
-      <span class="date-icon">📅</span>
-    </div>
-    <span v-if="error" class="date-error">{{ error }}</span>
-    
-    <Teleport to="body">
-      <div
-        v-if="isOpen"
-        ref="dropdownRef"
-        class="date-picker-dropdown"
-        :style="dropdownStyle"
-      >
-        <Calendar
-          v-model="internalValue"
-          :mode="mode"
-          :min-date="minDate"
-          :max-date="maxDate"
-          :disabled-dates="disabledDates"
-          :first-day-of-week="firstDayOfWeek"
-          :initial-date="typeof modelValue === 'string' ? modelValue : undefined"
-          @update:model-value="handleDateSelect"
-        />
-      </div>
-    </Teleport>
-    
-    <div
-      v-if="isOpen"
-      class="date-picker-overlay"
-      @click="closeCalendar"
-    ></div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, watch, onMounted, onBeforeUnmount } from 'vue'
-import Calendar from '../Calendar/Calendar.vue'
-import type { CalendarProps } from '../Calendar/types'
-
-interface DatePickerProps extends Omit<CalendarProps, 'modelValue'> {
-  modelValue?: string | string[] | { start: string; end: string }
-  id?: string
-  placeholder?: string
-  disabled?: boolean
-  format?: 'short' | 'long'
-  error?: string
-}
-
-const props = withDefaults(defineProps<DatePickerProps>(), {
-  placeholder: 'Select date',
-  format: 'short',
-  mode: 'single',
-  firstDayOfWeek: 0
-})
-
-const emit = defineEmits<{
-  'update:modelValue': [value: string | string[] | { start: string; end: string }]
-}>()
-
-const isOpen = ref(false)
-let componentIdCounter = 0
-const generatedId = `date-input-${++componentIdCounter}`
-const inputId = computed(() => props.id || generatedId)
-const datePickerRef = ref<HTMLElement | null>(null)
-const dropdownRef = ref<HTMLElement | null>(null)
-const dropdownStyle = ref<{ top: string; left: string; width: string }>({
-  top: '0px',
-  left: '0px',
-  width: '320px'
-})
-
-const internalValue = ref(props.modelValue)
-
-watch(() => props.modelValue, (newValue) => {
-  internalValue.value = newValue
-}, { immediate: true })
-
-const displayValue = computed(() => {
-  if (!props.modelValue) return ''
-  
-  if (props.mode === 'single' && typeof props.modelValue === 'string') {
-    return formatDate(props.modelValue)
-  }
-  
-  if (props.mode === 'multiple' && Array.isArray(props.modelValue)) {
-    return props.modelValue.map(d => formatDate(d)).join(', ')
-  }
-  
-  if (props.mode === 'range' && typeof props.modelValue === 'object' && 'start' in props.modelValue) {
-    const { start, end } = props.modelValue
-    if (start && end) {
-      return `${formatDate(start)} - ${formatDate(end)}`
-    }
-    if (start) return formatDate(start)
-  }
-  
-  return ''
-})
-
-const formatDate = (dateString: string): string => {
-  // Parse date string as local date to avoid timezone issues
-  const [year, month, day] = dateString.split('-').map(Number)
-  const date = new Date(year, month - 1, day)
-  
-  if (props.format === 'long') {
-    return date.toLocaleDateString('en-US', { 
-      year: 'numeric', 
-      month: 'long', 
-      day: 'numeric' 
-    })
-  }
-  
-  return date.toLocaleDateString('en-US', { 
-    year: 'numeric', 
-    month: 'short', 
-    day: 'numeric' 
-  })
-}
-
-const toggleCalendar = () => {
-  if (props.disabled) return
-  
-  if (isOpen.value) {
-    closeCalendar()
-  } else {
-    openCalendar()
-  }
-}
-
-const openCalendar = () => {
-  isOpen.value = true
-  
-  // Calculate position
-  setTimeout(() => {
-    if (datePickerRef.value) {
-      const rect = datePickerRef.value.getBoundingClientRect()
-      const viewportHeight = window.innerHeight
-      const spaceBelow = viewportHeight - rect.bottom
-      const calendarHeight = 400 // Approximate height
-      
-      if (spaceBelow < calendarHeight && rect.top > calendarHeight) {
-        // Show above
-        dropdownStyle.value = {
-          top: `${rect.top - calendarHeight + window.scrollY}px`,
-          left: `${rect.left + window.scrollX}px`,
-          width: '320px'
-        }
-      } else {
-        // Show below
-        dropdownStyle.value = {
-          top: `${rect.bottom + 4 + window.scrollY}px`,
-          left: `${rect.left + window.scrollX}px`,
-          width: '320px'
-        }
-      }
-    }
-  }, 0)
-}
-
-const closeCalendar = () => {
-  isOpen.value = false
-}
-
-const handleDateSelect = (value: string | string[] | { start: string; end: string }) => {
-  internalValue.value = value
-  emit('update:modelValue', value)
-  
-  // Auto-close for single mode
-  if (props.mode === 'single') {
-    setTimeout(() => {
-      closeCalendar()
-    }, 200)
-  }
-  
-  // Auto-close for range mode when both dates selected
-  if (props.mode === 'range' && typeof value === 'object' && 'start' in value && value.end) {
-    setTimeout(() => {
-      closeCalendar()
-    }, 200)
-  }
-}
-
-const handleClickOutside = (event: MouseEvent) => {
-  if (!isOpen.value) return
-  
-  const target = event.target as Node
-  
-  // Check if click is inside the date picker input or dropdown
-  if (datePickerRef.value?.contains(target)) return
-  if (dropdownRef.value?.contains(target)) return
-  
-  // Click is outside, close the calendar
-  closeCalendar()
-}
-
-onMounted(() => {
-  document.addEventListener('click', handleClickOutside)
-})
-
-onBeforeUnmount(() => {
-  document.removeEventListener('click', handleClickOutside)
-})
-</script>
-
-<style scoped>
-.date-picker {
-  position: relative;
-  width: 100%;
-}
-
-.date-picker-input {
-  position: relative;
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-}
-
-.date-input {
-  width: 100%;
-  padding: 0.75rem 0.875rem;
-  padding-right: 2.5rem;
-  border: 1px solid #d1d5db;
-  border-radius: 0.375rem;
-  font-size: 1rem;
-  line-height: 1.5;
-  height: 48px;
-  cursor: pointer;
-  background: white;
-  color: #1f2937;
-  transition: all 0.2s ease-in-out;
-  box-sizing: border-box;
-}
-
-.date-input:focus {
-  outline: none;
-  border-color: #3b82f6;
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
-}
-
-.date-input--error {
-  border-color: #fca5a5;
-  border-bottom: 2px solid #dc2626;
-  background: #fef2f2;
-}
-
-.date-input--error:focus {
-  border-color: #fca5a5;
-  border-bottom: 2px solid #dc2626;
-  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
-}
-
-.date-input:disabled {
-  background: #f3f4f6;
-  cursor: not-allowed;
-  color: #9ca3af;
-}
-
-.date-input::placeholder {
-  color: #9ca3af;
-}
-
-.date-error {
-  margin-top: 0.35rem;
-  color: #dc2626;
-  font-size: 0.8rem;
-}
-
-.date-icon {
-  position: absolute;
-  right: 0.75rem;
-  pointer-events: none;
-  font-size: 1rem;
-}
-
-.date-picker-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: transparent;
-  z-index: 9998;
-}
-
-.date-picker-dropdown {
-  position: absolute;
-  z-index: 9999;
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-  border-radius: 0.75rem;
-  background: white;
-}
-</style>

package/src/components/Dropdown/Dropdown.stories.ts

@@ -1,231 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import Dropdown from './Dropdown.vue'
-import type { DropdownItem } from './types'
-
-const meta = {
-  title: 'Components/Dropdown',
-  component: Dropdown,
-  tags: ['autodocs'],
-  argTypes: {
-    placement: {
-      control: 'select',
-      options: ['bottom-left', 'bottom-right', 'top-left', 'top-right'],
-      description: 'Dropdown menu placement'
-    },
-    closeOnClick: {
-      control: 'boolean',
-      description: 'Close dropdown when item is clicked'
-    },
-    disabled: {
-      control: 'boolean',
-      description: 'Disabled state'
-    },
-    onSelect: { action: 'selected' }
-  }
-} satisfies Meta<typeof Dropdown>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-const defaultItems: DropdownItem[] = [
-  { label: 'Profile', value: 'profile', icon: '👤' },
-  { label: 'Settings', value: 'settings', icon: '⚙️' },
-  { label: '', value: 'divider', divider: true },
-  { label: 'Logout', value: 'logout', icon: '🚪' }
-]
-
-export const Default: Story = {
-  args: {
-    items: defaultItems,
-    placement: 'bottom-right'
-  },
-  render: (args: any) => ({
-    components: { Dropdown },
-    setup() {
-      return { args }
-    },
-    template: `
-      render: (args: any) => ({
-        <Dropdown v-bind="args" @select="args.onSelect">
-          <template #trigger>
-            <button style="padding: 0.5rem 1rem; background: #667eea; color: white; border: none; border-radius: 0.375rem; cursor: pointer;">
-              Open Menu
-            </button>
-          </template>
-        </Dropdown>
-      </div>
-    `
-  })
-}
-
-export const WithHeader: Story = {
-  args: {
-    items: [
-      { label: 'Dashboard', value: 'dashboard' },
-      { label: 'Projects', value: 'projects' },
-      { label: 'Team', value: 'team' }
-    ],
-    placement: 'bottom-left'
-  },
-  render: (args: any) => ({
-    components: { Dropdown },
-    setup() {
-      return { args }
-    },
-    template: `
-      <div style="padding: 100px; display: flex; justify-content: center;">
-        <Dropdown v-bind="args" @select="args.onSelect">
-          <template #trigger>
-            <button style="padding: 0.5rem 1rem; background: #667eea; color: white; border: none; border-radius: 0.375rem; cursor: pointer;">
-              Navigation
-            </button>
-          </template>
-          <template #header>
-            <div style="padding: 0.75rem; border-bottom: 1px solid #e5e7eb; font-weight: 600;">
-              Quick Links
-            </div>
-          </template>
-        </Dropdown>
-      </div>
-    `
-  })
-}
-export const WithFooter: Story = {
-  args: {
-    items: [
-      { label: 'New Document', value: 'new' },
-      { label: 'Open', value: 'open' },
-      { label: 'Save', value: 'save' }
-    ]
-  },
-  render: (args: any) => ({
-    components: { Dropdown },
-    setup() {
-      return { args }
-    },
-    template: `
-      <div style="padding: 100px; display: flex; justify-content: center;">
-        <Dropdown v-bind="args" @select="args.onSelect">
-          <template #trigger>
-            <button style="padding: 0.5rem 1rem; background: #667eea; color: white; border: none; border-radius: 0.375rem; cursor: pointer;">
-              File Menu
-            </button>
-          </template>
-          <template #footer>
-            <div style="padding: 0.5rem; border-top: 1px solid #e5e7eb; text-align: center; font-size: 0.75rem; color: #6b7280;">
-              v1.0.0
-            </div>
-          </template>
-        </Dropdown>
-      </div>
-    `
-  })
-}
-
-export const UserMenu: Story = {
-          render: () => ({
-    components: { Dropdown },
-    setup() {
-      const items: DropdownItem[] = [
-        { label: 'View Profile', value: 'profile' },
-        { label: 'Account Settings', value: 'settings' },
-        { label: '', value: 'divider1', divider: true },
-        { label: 'Help & Support', value: 'help' },
-        { label: '', value: 'divider2', divider: true },
-        { label: 'Sign Out', value: 'signout' }
-      ]
-      return { items }
-    },
-    template: `
-      <div style="padding: 100px; display: flex; justify-content: center;">
-        <Dropdown :items="items" placement="bottom-right">
-          <template #trigger>
-            <div style="width: 2.5rem; height: 2.5rem; border-radius: 50%; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; display: flex; align-items: center; justify-content: center; font-weight: 600; cursor: pointer;">
-              JD
-            </div>
-          </template>
-          <template #header>
-            <div style="padding: 0.75rem; border-bottom: 1px solid #e5e7eb;">
-              <div style="font-weight: 600; font-size: 0.9375rem;">John Doe</div>
-              <div style="font-size: 0.875rem; color: #6b7280;">john@example.com</div>
-            </div>
-          </template>
-        </Dropdown>
-      </div>
-    `
-  })
-}
-
-export const Disabled: Story = {
-  args: {
-    items: defaultItems,
-    disabled: true
-  },
-    render: (args: any) => ({
-    components: { Dropdown },
-    setup() {
-      return { args }
-    },
-    template: `
-      <div style="padding: 100px; display: flex; justify-content: center;">
-        <Dropdown v-bind="args">
-          <template #trigger>
-            <button style="padding: 0.5rem 1rem; background: #9ca3af; color: white; border: none; border-radius: 0.375rem; cursor: not-allowed;">
-              Disabled Menu
-            </button>
-          </template>
-        </Dropdown>
-      </div>
-    `
-  })
-}
-
-export const Placements: Story = {
-  render: () => ({
-    components: { Dropdown },
-    setup() {
-      const items: DropdownItem[] = [
-        { label: 'Option 1', value: '1' },
-        { label: 'Option 2', value: '2' },
-        { label: 'Option 3', value: '3' }
-      ]
-      return { items }
-    },
-    template: `
-      <div style="padding: 150px; display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;">
-        <div style="display: flex; flex-direction: column; gap: 1rem;">
-          <Dropdown :items="items" placement="bottom-left">
-            <template #trigger>
-              <button style="padding: 0.5rem 1rem; background: #667eea; color: white; border: none; border-radius: 0.375rem; cursor: pointer; width: 150px;">
-                Bottom Left
-              </button>
-            </template>
-          </Dropdown>
-          <Dropdown :items="items" placement="top-left">
-            <template #trigger>
-              <button style="padding: 0.5rem 1rem; background: #667eea; color: white; border: none; border-radius: 0.375rem; cursor: pointer; width: 150px;">
-                Top Left
-              </button>
-            </template>
-          </Dropdown>
-        </div>
-        <div style="display: flex; flex-direction: column; gap: 1rem; align-items: flex-end;">
-          <Dropdown :items="items" placement="bottom-right">
-            <template #trigger>
-              <button style="padding: 0.5rem 1rem; background: #667eea; color: white; border: none; border-radius: 0.375rem; cursor: pointer; width: 150px;">
-                Bottom Right
-              </button>
-            </template>
-          </Dropdown>
-          <Dropdown :items="items" placement="top-right">
-            <template #trigger>
-              <button style="padding: 0.5rem 1rem; background: #667eea; color: white; border: none; border-radius: 0.375rem; cursor: pointer; width: 150px;">
-                Top Right
-              </button>
-            </template>
-          </Dropdown>
-        </div>
-      </div>
-    `
-  })
-}