@davidbirchall/core 1.0.6 → 1.0.8

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

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

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

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