@datametria/vue-components 1.2.0 → 2.1.0

package/src/components/DatametriaDatePicker.vue

@@ -1,81 +1,536 @@
 <template>
-  <div class="dm-datepicker">
+  <div class="dm-datepicker" ref="datepickerRef">
     <label v-if="label" :for="inputId" class="dm-datepicker__label">
       {{ label }}
       <span v-if="required" class="dm-datepicker__required">*</span>
     </label>
+    
     <div class="dm-datepicker__wrapper">
       <input
         :id="inputId"
-        type="date"
-        v-model="internalValue"
+        v-model="displayValue"
+        type="text"
         class="dm-datepicker__input"
-        :class="{ 'dm-datepicker__input--error': error }"
+        :class="{ 'dm-datepicker__input--error': errorMessage }"
+        :placeholder="placeholder"
         :disabled="disabled"
+        :readonly="readonly"
         :required="required"
-        :min="min"
-        :max="max"
-        :aria-label="ariaLabel"
-        :aria-describedby="error ? `${inputId}-error` : undefined"
-        :aria-invalid="!!error"
-        @change="handleChange"
+        :aria-label="label || 'Date picker'"
+        :aria-invalid="!!errorMessage"
+        :aria-describedby="errorMessage ? `${inputId}-error` : undefined"
+        @click="toggleCalendar"
+        @focus="handleFocus"
+        @keydown="handleKeydown"
       />
+      
+      <button
+        v-if="clearable && hasValue"
+        type="button"
+        class="dm-datepicker__clear"
+        @click="clearDate"
+        aria-label="Clear date"
+      >
+        ×
+      </button>
+    </div>
+
+    <div
+      v-if="isOpen"
+      class="dm-datepicker__calendar"
+      role="dialog"
+      aria-label="Calendar"
+      @click.stop
+    >
+      <div class="dm-datepicker__header">
+        <button
+          type="button"
+          class="dm-datepicker__nav dm-datepicker__nav-prev"
+          @click="previousMonth"
+          aria-label="Previous month"
+        >
+          ‹
+        </button>
+        
+        <button
+          type="button"
+          class="dm-datepicker__month-year"
+          @click="toggleYearPicker"
+          :aria-label="`${currentMonthYear}, click to select year`"
+        >
+          {{ currentMonthYear }}
+        </button>
+        
+        <button
+          type="button"
+          class="dm-datepicker__nav dm-datepicker__nav-next"
+          @click="nextMonth"
+          aria-label="Next month"
+        >
+          ›
+        </button>
+      </div>
+
+      <div v-if="showShortcuts && shortcuts.length > 0" class="dm-datepicker__shortcuts">
+        <button
+          v-for="shortcut in shortcuts"
+          :key="shortcut.label"
+          type="button"
+          class="dm-datepicker__shortcut"
+          @click="applyShortcut(shortcut)"
+        >
+          {{ shortcut.label }}
+        </button>
+      </div>
+
+      <div v-if="showYearPicker" class="dm-datepicker__year-picker">
+        <div
+          v-for="year in availableYears"
+          :key="year"
+          class="dm-datepicker__year-option"
+          :class="{ 'dm-datepicker__year-option--current': year === currentDate.getFullYear() }"
+          @click="selectYear(year)"
+        >
+          {{ year }}
+        </div>
+      </div>
+
+      <div v-else class="dm-datepicker__grid">
+        <div class="dm-datepicker__weekdays">
+          <div
+            v-for="day in weekdays"
+            :key="day"
+            class="dm-datepicker__weekday"
+          >
+            {{ day }}
+          </div>
+        </div>
+        
+        <div class="dm-datepicker__days">
+          <button
+            v-for="day in calendarDays"
+            :key="`${day.date}-${day.month}`"
+            type="button"
+            class="dm-datepicker__day"
+            :class="{
+              'dm-datepicker__day--other-month': day.otherMonth,
+              'dm-datepicker__day--disabled': day.disabled,
+              'dm-datepicker__day--selected': day.selected,
+              'dm-datepicker__day--today': day.today,
+              'dm-datepicker__day--in-range': day.inRange,
+              'dm-datepicker__day--range-start': day.rangeStart,
+              'dm-datepicker__day--range-end': day.rangeEnd
+            }"
+            :data-date="day.dateString"
+            :disabled="day.disabled"
+            :aria-label="getDateAriaLabel(day)"
+            :aria-current="day.today ? 'date' : undefined"
+            @click="selectDate(day)"
+          >
+            {{ day.date }}
+          </button>
+        </div>
+      </div>
+
+      <div v-if="showToday" class="dm-datepicker__footer">
+        <button
+          type="button"
+          class="dm-datepicker__today"
+          @click="selectToday"
+        >
+          Today
+        </button>
+      </div>
+    </div>
+
+    <div v-if="errorMessage" :id="`${inputId}-error`" class="dm-datepicker__error">
+      {{ errorMessage }}
     </div>
-    <p v-if="error" :id="`${inputId}-error`" class="dm-datepicker__error">{{ error }}</p>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+
+type DateValue = string | { start: string; end: string } | string[]
+
+interface Shortcut {
+  label: string
+  value: string | { start: string; end: string } | string[]
+}
 
 interface Props {
-  modelValue?: string
+  modelValue?: DateValue
+  mode?: 'single' | 'range' | 'multiple'
+  format?: string
+  placeholder?: string
   label?: string
+  errorMessage?: string
   disabled?: boolean
+  readonly?: boolean
   required?: boolean
-  error?: string
   min?: string
   max?: string
-  ariaLabel?: string
+  disabledDates?: string[]
+  disabledWeekdays?: number[]
+  enabledDates?: string[]
+  showToday?: boolean
+  clearable?: boolean
+  closeOnSelect?: boolean
+  showShortcuts?: boolean
+  shortcuts?: Shortcut[]
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  modelValue: '',
-  disabled: false,
-  required: false
+  mode: 'single',
+  format: 'DD/MM/YYYY',
+  placeholder: 'Select date...',
+  showToday: false,
+  clearable: false,
+  closeOnSelect: true,
+  showShortcuts: false,
+  shortcuts: () => [
+    { label: 'Today', value: new Date().toISOString().split('T')[0] },
+    { label: 'Tomorrow', value: new Date(Date.now() + 86400000).toISOString().split('T')[0] },
+    { label: 'Next Week', value: new Date(Date.now() + 7 * 86400000).toISOString().split('T')[0] }
+  ]
 })
 
 const emit = defineEmits<{
-  'update:modelValue': [value: string]
+  'update:modelValue': [value: DateValue]
+  open: []
+  close: []
+  clear: []
 }>()
 
-const inputId = `dm-datepicker-${Math.random().toString(36).substr(2, 9)}`
-const internalValue = ref(props.modelValue)
+const datepickerRef = ref<HTMLElement>()
+const isOpen = ref(false)
+const showYearPicker = ref(false)
+const currentDate = ref(new Date())
+const isMobile = ref(false)
+
+const inputId = computed(() => `datepicker-${Math.random().toString(36).substr(2, 9)}`)
+const weekdays = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+
+const hasValue = computed(() => {
+  if (props.mode === 'single') return !!props.modelValue
+  if (props.mode === 'range') return !!(props.modelValue as any)?.start && !!(props.modelValue as any)?.end
+  if (props.mode === 'multiple') return Array.isArray(props.modelValue) && props.modelValue.length > 0
+  return false
+})
+
+const displayValue = computed(() => {
+  if (!props.modelValue) return ''
+  
+  if (props.mode === 'single') {
+    const date = new Date(props.modelValue as string)
+    return formatDate(date, props.format)
+  }
+  
+  if (props.mode === 'range') {
+    const range = props.modelValue as { start: string; end: string }
+    if (!range.start || !range.end) return ''
+    const startDate = formatDate(new Date(range.start), props.format)
+    const endDate = formatDate(new Date(range.end), props.format)
+    return `${startDate} - ${endDate}`
+  }
+  
+  if (props.mode === 'multiple') {
+    const dates = props.modelValue as string[]
+    if (dates.length === 0) return ''
+    if (dates.length === 1) return formatDate(new Date(dates[0]), props.format)
+    return `${dates.length} dates selected`
+  }
+  
+  return ''
+})
+
+const currentMonthYear = computed(() => {
+  const month = currentDate.value.toLocaleString('default', { month: 'long' })
+  const year = currentDate.value.getFullYear()
+  return `${month} ${year}`
+})
 
-watch(() => props.modelValue, (newValue) => {
-  internalValue.value = newValue
+const availableYears = computed(() => {
+  const currentYear = new Date().getFullYear()
+  const years = []
+  for (let i = currentYear - 50; i <= currentYear + 10; i++) {
+    years.push(i)
+  }
+  return years
 })
 
-const handleChange = () => {
-  emit('update:modelValue', internalValue.value)
+const calendarDays = computed(() => {
+  const year = currentDate.value.getFullYear()
+  const month = currentDate.value.getMonth()
+  
+  const firstDay = new Date(year, month, 1)
+  const startDate = new Date(firstDay)
+  startDate.setDate(startDate.getDate() - firstDay.getDay())
+  
+  const days = []
+  const today = new Date()
+  
+  for (let i = 0; i < 42; i++) {
+    const date = new Date(startDate)
+    date.setDate(startDate.getDate() + i)
+    
+    const dateString = date.toISOString().split('T')[0]
+    const isOtherMonth = date.getMonth() !== month
+    const isDisabled = isDateDisabled(date)
+    const isSelected = isDateSelected(dateString)
+    const isToday = isSameDate(date, today)
+    
+    days.push({
+      date: date.getDate(),
+      month: date.getMonth(),
+      year: date.getFullYear(),
+      dateString,
+      otherMonth: isOtherMonth,
+      disabled: isDisabled,
+      selected: isSelected,
+      today: isToday,
+      inRange: false,
+      rangeStart: false,
+      rangeEnd: false
+    })
+  }
+  
+  return days
+})
+
+const formatDate = (date: Date, format: string): string => {
+  const day = date.getDate().toString().padStart(2, '0')
+  const month = (date.getMonth() + 1).toString().padStart(2, '0')
+  const year = date.getFullYear().toString()
+  
+  return format
+    .replace('DD', day)
+    .replace('MM', month)
+    .replace('YYYY', year)
+}
+
+const isSameDate = (date1: Date, date2: Date): boolean => {
+  return date1.getFullYear() === date2.getFullYear() &&
+         date1.getMonth() === date2.getMonth() &&
+         date1.getDate() === date2.getDate()
+}
+
+const isDateDisabled = (date: Date): boolean => {
+  const dateString = date.toISOString().split('T')[0]
+  
+  if (props.min && date < new Date(props.min)) return true
+  if (props.max && date > new Date(props.max)) return true
+  if (props.disabledDates?.includes(dateString)) return true
+  if (props.disabledWeekdays?.includes(date.getDay())) return true
+  if (props.enabledDates && !props.enabledDates.includes(dateString)) return true
+  
+  return false
+}
+
+const isDateSelected = (dateString: string): boolean => {
+  if (props.mode === 'single') {
+    return props.modelValue === dateString
+  }
+  
+  if (props.mode === 'range') {
+    const range = props.modelValue as { start: string; end: string }
+    return range?.start === dateString || range?.end === dateString
+  }
+  
+  if (props.mode === 'multiple') {
+    const dates = props.modelValue as string[]
+    return dates?.includes(dateString) || false
+  }
+  
+  return false
+}
+
+const getDateAriaLabel = (day: any): string => {
+  const date = new Date(day.year, day.month, day.date)
+  const dateString = date.toLocaleDateString('en-US', { 
+    weekday: 'long', 
+    year: 'numeric', 
+    month: 'long', 
+    day: 'numeric' 
+  })
+  
+  let label = dateString
+  if (day.today) label += ', today'
+  if (day.selected) label += ', selected'
+  if (day.disabled) label += ', disabled'
+  
+  return label
+}
+
+const toggleCalendar = () => {
+  if (!props.disabled && !props.readonly) {
+    isOpen.value = !isOpen.value
+    if (isOpen.value) {
+      emit('open')
+    } else {
+      emit('close')
+    }
+  }
+}
+
+const handleFocus = () => {
+  if (!props.disabled && !props.readonly) {
+    isOpen.value = true
+    emit('open')
+  }
+}
+
+const handleKeydown = (event: KeyboardEvent) => {
+  if (event.key === 'Enter' || event.key === ' ') {
+    event.preventDefault()
+    toggleCalendar()
+  } else if (event.key === 'Escape') {
+    isOpen.value = false
+    emit('close')
+  }
+}
+
+const previousMonth = () => {
+  currentDate.value = new Date(currentDate.value.getFullYear(), currentDate.value.getMonth() - 1, 1)
+}
+
+const nextMonth = () => {
+  currentDate.value = new Date(currentDate.value.getFullYear(), currentDate.value.getMonth() + 1, 1)
+}
+
+const toggleYearPicker = () => {
+  showYearPicker.value = !showYearPicker.value
+}
+
+const selectYear = (year: number) => {
+  currentDate.value = new Date(year, currentDate.value.getMonth(), 1)
+  showYearPicker.value = false
+}
+
+const selectDate = (day: any) => {
+  if (day.disabled) return
+  
+  const dateString = day.dateString
+  
+  if (props.mode === 'single') {
+    emit('update:modelValue', dateString)
+    if (props.closeOnSelect) {
+      isOpen.value = false
+      emit('close')
+    }
+  }
+  
+  if (props.mode === 'range') {
+    const currentRange = (props.modelValue as { start: string; end: string }) || { start: '', end: '' }
+    
+    if (!currentRange.start || (currentRange.start && currentRange.end)) {
+      emit('update:modelValue', { start: dateString, end: '' })
+    } else {
+      const start = new Date(currentRange.start)
+      const selected = new Date(dateString)
+      
+      if (selected < start) {
+        emit('update:modelValue', { start: dateString, end: currentRange.start })
+      } else {
+        emit('update:modelValue', { start: currentRange.start, end: dateString })
+      }
+      
+      if (props.closeOnSelect) {
+        isOpen.value = false
+        emit('close')
+      }
+    }
+  }
+  
+  if (props.mode === 'multiple') {
+    const currentDates = (props.modelValue as string[]) || []
+    const index = currentDates.indexOf(dateString)
+    
+    if (index >= 0) {
+      const newDates = [...currentDates]
+      newDates.splice(index, 1)
+      emit('update:modelValue', newDates)
+    } else {
+      emit('update:modelValue', [...currentDates, dateString])
+    }
+  }
+}
+
+const selectToday = () => {
+  const today = new Date().toISOString().split('T')[0]
+  
+  if (props.mode === 'single') {
+    emit('update:modelValue', today)
+  } else if (props.mode === 'range') {
+    emit('update:modelValue', { start: today, end: today })
+  } else if (props.mode === 'multiple') {
+    const currentDates = (props.modelValue as string[]) || []
+    if (!currentDates.includes(today)) {
+      emit('update:modelValue', [...currentDates, today])
+    }
+  }
+  
+  isOpen.value = false
+  emit('close')
+}
+
+const applyShortcut = (shortcut: Shortcut) => {
+  emit('update:modelValue', shortcut.value as DateValue)
+  isOpen.value = false
+  emit('close')
+}
+
+const clearDate = () => {
+  if (props.mode === 'single') {
+    emit('update:modelValue', '')
+  } else if (props.mode === 'range') {
+    emit('update:modelValue', { start: '', end: '' })
+  } else if (props.mode === 'multiple') {
+    emit('update:modelValue', [])
+  }
+  emit('clear')
+}
+
+const handleClickOutside = (event: Event) => {
+  if (datepickerRef.value && !datepickerRef.value.contains(event.target as Node)) {
+    isOpen.value = false
+    showYearPicker.value = false
+    emit('close')
+  }
 }
+
+const checkMobile = () => {
+  isMobile.value = window.innerWidth <= 640
+}
+
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside)
+  window.addEventListener('resize', checkMobile)
+  checkMobile()
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside)
+  window.removeEventListener('resize', checkMobile)
+})
 </script>
 
 <style scoped>
 .dm-datepicker {
-  display: flex;
-  flex-direction: column;
-  gap: var(--dm-space-2);
+  position: relative;
+  width: 100%;
 }
 
 .dm-datepicker__label {
-  color: var(--dm-text-primary);
-  font-size: var(--dm-text-sm);
+  display: block;
+  margin-bottom: 0.5rem;
   font-weight: 500;
+  color: var(--dm-neutral-700, #374151);
 }
 
 .dm-datepicker__required {
-  color: var(--dm-error);
+  color: var(--dm-error, #ef4444);
 }
 
 .dm-datepicker__wrapper {
@@ -84,57 +539,220 @@ const handleChange = () => {
 
 .dm-datepicker__input {
   width: 100%;
-  min-height: 44px;
-  padding: var(--dm-space-3);
-  border: 1px solid var(--dm-gray-300);
-  border-radius: var(--dm-radius);
-  font-size: var(--dm-text-base);
-  color: var(--dm-text-primary);
-  background: var(--dm-white);
-  transition: var(--dm-transition);
-  font-family: inherit;
+  padding: 0.75rem;
+  border: 1px solid var(--dm-neutral-300, #d1d5db);
+  border-radius: var(--dm-radius-md, 0.375rem);
+  font-size: 1rem;
+  cursor: pointer;
+  transition: border-color 0.2s;
 }
 
-.dm-datepicker__input:hover:not(:disabled) {
-  border-color: var(--dm-gray-400);
+.dm-datepicker__input:focus {
+  outline: none;
+  border-color: var(--dm-primary, #0072ce);
+  box-shadow: 0 0 0 3px rgba(0, 114, 206, 0.1);
 }
 
-.dm-datepicker__input:focus {
-  outline: var(--dm-focus-ring);
-  outline-offset: 0;
-  border-color: var(--dm-primary);
+.dm-datepicker__input--error {
+  border-color: var(--dm-error, #ef4444);
+}
+
+.dm-datepicker__clear {
+  position: absolute;
+  right: 0.75rem;
+  top: 50%;
+  transform: translateY(-50%);
+  background: none;
+  border: none;
+  font-size: 1.25rem;
+  cursor: pointer;
+  color: var(--dm-neutral-500, #6b7280);
+}
+
+.dm-datepicker__calendar {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 1000;
+  background: white;
+  border: 1px solid var(--dm-neutral-300, #d1d5db);
+  border-radius: var(--dm-radius-md, 0.375rem);
+  box-shadow: var(--dm-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
+  padding: 1rem;
+  min-width: 280px;
+}
+
+@media (max-width: 640px) {
+  .dm-datepicker__calendar {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 90vw;
+    max-width: 320px;
+  }
+}
+
+.dm-datepicker__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 1rem;
+}
+
+.dm-datepicker__nav {
+  background: none;
+  border: none;
+  font-size: 1.25rem;
+  cursor: pointer;
+  padding: 0.25rem;
+  border-radius: var(--dm-radius-sm, 0.25rem);
+  transition: background-color 0.2s;
 }
 
-.dm-datepicker__input:disabled {
-  background: var(--dm-gray-100);
+.dm-datepicker__nav:hover {
+  background-color: var(--dm-neutral-100, #f3f4f6);
+}
+
+.dm-datepicker__month-year {
+  background: none;
+  border: none;
+  font-weight: 600;
+  cursor: pointer;
+  padding: 0.5rem;
+  border-radius: var(--dm-radius-sm, 0.25rem);
+  transition: background-color 0.2s;
+}
+
+.dm-datepicker__month-year:hover {
+  background-color: var(--dm-neutral-100, #f3f4f6);
+}
+
+.dm-datepicker__shortcuts {
+  display: flex;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+  flex-wrap: wrap;
+}
+
+.dm-datepicker__shortcut {
+  background: none;
+  border: 1px solid var(--dm-neutral-300, #d1d5db);
+  padding: 0.25rem 0.5rem;
+  border-radius: var(--dm-radius-sm, 0.25rem);
+  cursor: pointer;
+  font-size: 0.875rem;
+  transition: all 0.2s;
+}
+
+.dm-datepicker__shortcut:hover {
+  background-color: var(--dm-neutral-100, #f3f4f6);
+}
+
+.dm-datepicker__year-picker {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 0.5rem;
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.dm-datepicker__year-option {
+  padding: 0.5rem;
+  text-align: center;
+  cursor: pointer;
+  border-radius: var(--dm-radius-sm, 0.25rem);
+  transition: background-color 0.2s;
+}
+
+.dm-datepicker__year-option:hover {
+  background-color: var(--dm-neutral-100, #f3f4f6);
+}
+
+.dm-datepicker__year-option--current {
+  background-color: var(--dm-primary, #0072ce);
+  color: white;
+}
+
+.dm-datepicker__weekdays {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 0.25rem;
+  margin-bottom: 0.5rem;
+}
+
+.dm-datepicker__weekday {
+  padding: 0.5rem;
+  text-align: center;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--dm-neutral-600, #4b5563);
+}
+
+.dm-datepicker__days {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 0.25rem;
+}
+
+.dm-datepicker__day {
+  padding: 0.5rem;
+  text-align: center;
+  cursor: pointer;
+  border: none;
+  background: none;
+  border-radius: var(--dm-radius-sm, 0.25rem);
+  transition: background-color 0.2s;
+}
+
+.dm-datepicker__day:hover:not(.dm-datepicker__day--disabled) {
+  background-color: var(--dm-neutral-100, #f3f4f6);
+}
+
+.dm-datepicker__day--other-month {
+  color: var(--dm-neutral-400, #9ca3af);
+}
+
+.dm-datepicker__day--disabled {
+  color: var(--dm-neutral-300, #d1d5db);
   cursor: not-allowed;
-  opacity: 0.6;
 }
 
-.dm-datepicker__input--error {
-  border-color: var(--dm-error);
+.dm-datepicker__day--selected {
+  background-color: var(--dm-primary, #0072ce);
+  color: white;
 }
 
-.dm-datepicker__input--error:focus {
-  outline-color: var(--dm-error);
+.dm-datepicker__day--today {
+  font-weight: 600;
+  color: var(--dm-primary, #0072ce);
 }
 
-.dm-datepicker__error {
-  color: var(--dm-error);
-  font-size: var(--dm-text-sm);
-  margin: 0;
+.dm-datepicker__footer {
+  margin-top: 1rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--dm-neutral-200, #e5e7eb);
+  text-align: center;
 }
 
-@media (prefers-color-scheme: dark) {
-  .dm-datepicker__input {
-    background: var(--dm-gray-800);
-    border-color: var(--dm-gray-600);
-    color: var(--dm-white);
-    color-scheme: dark;
-  }
+.dm-datepicker__today {
+  background: none;
+  border: 1px solid var(--dm-primary, #0072ce);
+  color: var(--dm-primary, #0072ce);
+  padding: 0.5rem 1rem;
+  border-radius: var(--dm-radius-sm, 0.25rem);
+  cursor: pointer;
+  transition: all 0.2s;
+}
 
-  .dm-datepicker__input:disabled {
-    background: var(--dm-gray-900);
-  }
+.dm-datepicker__today:hover {
+  background-color: var(--dm-primary, #0072ce);
+  color: white;
+}
+
+.dm-datepicker__error {
+  margin-top: 0.25rem;
+  color: var(--dm-error, #ef4444);
+  font-size: 0.875rem;
 }
-</style>
+</style>