@datametria/vue-components 2.3.1 → 2.4.0

package/src/components/DatametriaDatePicker.vue

@@ -1,382 +1,400 @@
-<template>
-  <div class="datametria-datepicker" :class="{ 'datametria-datepicker--disabled': disabled }">
-    <input
-      ref="inputRef"
-      v-model="displayValue"
-      type="text"
-      class="datametria-datepicker__input"
-      :placeholder="placeholder"
-      :disabled="disabled"
-      :readonly="readonly"
-      @focus="handleFocus"
-      @blur="handleBlur"
-    />
-    <Teleport to="body">
-      <div
-        v-if="isOpen"
-        ref="dropdownRef"
-        class="datametria-datepicker__dropdown"
-        :style="dropdownStyle"
-      >
-        <div v-if="shortcuts.length" class="datametria-datepicker__shortcuts">
-          <button
-            v-for="shortcut in shortcuts"
-            :key="shortcut.text"
-            class="datametria-datepicker__shortcut"
-            @click="handleShortcut(shortcut)"
-          >
-            {{ shortcut.text }}
-          </button>
-        </div>
-        <div class="datametria-datepicker__calendar">
-          <div class="datametria-datepicker__header">
-            <button @click="prevMonth">&lt;</button>
-            <span>{{ monthYear }}</span>
-            <button @click="nextMonth">&gt;</button>
-          </div>
-          <div class="datametria-datepicker__weekdays">
-            <span v-for="day in weekdays" :key="day">{{ day }}</span>
-          </div>
-          <div class="datametria-datepicker__days">
-            <button
-              v-for="day in calendarDays"
-              :key="day.date.getTime()"
-              class="datametria-datepicker__day"
-              :class="{
-                'datametria-datepicker__day--disabled': day.disabled || isDateDisabled(day.date),
-                'datametria-datepicker__day--selected': isSelected(day.date),
-                'datametria-datepicker__day--in-range': isInRange(day.date),
-                'datametria-datepicker__day--other-month': day.otherMonth
-              }"
-              :disabled="day.disabled || isDateDisabled(day.date)"
-              @click="selectDate(day.date)"
-            >
-              {{ day.date.getDate() }}
-            </button>
-          </div>
-        </div>
-      </div>
-    </Teleport>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, watch } from 'vue'
-
-interface Shortcut {
-  text: string
-  value: Date | [Date, Date]
-}
-
-interface Props {
-  modelValue?: Date | [Date, Date] | null
-  type?: 'date' | 'datetime' | 'range'
-  format?: string
-  placeholder?: string
-  disabled?: boolean
-  readonly?: boolean
-  disabledDate?: (date: Date) => boolean
-  shortcuts?: Shortcut[]
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  modelValue: null,
-  type: 'date',
-  format: 'DD/MM/YYYY',
-  placeholder: 'Selecione uma data',
-  disabled: false,
-  readonly: false,
-  shortcuts: () => []
-})
-
-const emit = defineEmits<{
-  'update:modelValue': [value: Date | [Date, Date] | null]
-  change: [value: Date | [Date, Date] | null]
-}>()
-
-const inputRef = ref<HTMLInputElement>()
-const dropdownRef = ref<HTMLDivElement>()
-const isOpen = ref(false)
-const currentMonth = ref(new Date())
-const rangeStart = ref<Date | null>(null)
-
-const weekdays = ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb']
-
-const monthYear = computed(() => {
-  const months = ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho',
-    'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro']
-  return `${months[currentMonth.value.getMonth()]} ${currentMonth.value.getFullYear()}`
-})
-
-const displayValue = computed(() => {
-  if (!props.modelValue) return ''
-  if (props.type === 'range' && Array.isArray(props.modelValue)) {
-    return `${formatDate(props.modelValue[0])} - ${formatDate(props.modelValue[1])}`
+<template>
+  <div class="datametria-datepicker" :class="{ 'datametria-datepicker--disabled': disabled }">
+    <input
+      ref="inputRef"
+      v-model="displayValue"
+      type="text"
+      class="datametria-datepicker__input"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :readonly="readonly"
+      @focus="handleFocus"
+      @blur="handleBlur"
+    />
+    <Teleport to="body">
+      <div
+        v-if="isOpen"
+        ref="dropdownRef"
+        class="datametria-datepicker__dropdown"
+        :style="dropdownStyle"
+      >
+        <div v-if="shortcuts.length" class="datametria-datepicker__shortcuts">
+          <button
+            v-for="shortcut in shortcuts"
+            :key="shortcut.text"
+            class="datametria-datepicker__shortcut"
+            @click="handleShortcut(shortcut)"
+          >
+            {{ shortcut.text }}
+          </button>
+        </div>
+        <div class="datametria-datepicker__calendar">
+          <div class="datametria-datepicker__header">
+            <button @click="prevMonth">&lt;</button>
+            <span>{{ monthYear }}</span>
+            <button @click="nextMonth">&gt;</button>
+          </div>
+          <div class="datametria-datepicker__weekdays">
+            <span v-for="day in weekdays" :key="day">{{ day }}</span>
+          </div>
+          <div class="datametria-datepicker__days">
+            <button
+              v-for="day in calendarDays"
+              :key="day.date.getTime()"
+              class="datametria-datepicker__day"
+              :class="{
+                'datametria-datepicker__day--disabled': day.disabled || isDateDisabled(day.date),
+                'datametria-datepicker__day--selected': isSelected(day.date),
+                'datametria-datepicker__day--in-range': isInRange(day.date),
+                'datametria-datepicker__day--other-month': day.otherMonth
+              }"
+              :disabled="day.disabled || isDateDisabled(day.date)"
+              @click="selectDate(day.date)"
+            >
+              {{ day.date.getDate() }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+
+interface Shortcut {
+  text: string
+  value: Date | [Date, Date]
+}
+
+interface Props {
+  modelValue?: Date | [Date, Date] | null
+  type?: 'date' | 'datetime' | 'range'
+  format?: string
+  placeholder?: string
+  disabled?: boolean
+  readonly?: boolean
+  disabledDate?: (date: Date) => boolean
+  shortcuts?: Shortcut[]
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: null,
+  type: 'date',
+  format: 'DD/MM/YYYY',
+  placeholder: 'Selecione uma data',
+  disabled: false,
+  readonly: false,
+  shortcuts: () => []
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: Date | [Date, Date] | null]
+  change: [value: Date | [Date, Date] | null]
+}>()
+
+const inputRef = ref<HTMLInputElement>()
+const dropdownRef = ref<HTMLDivElement>()
+const isOpen = ref(false)
+const currentMonth = ref(new Date())
+const rangeStart = ref<Date | null>(null)
+
+const weekdays = ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb']
+
+const monthYear = computed(() => {
+  const months = ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho',
+    'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro']
+  return `${months[currentMonth.value.getMonth()]} ${currentMonth.value.getFullYear()}`
+})
+
+const displayValue = computed(() => {
+  if (!props.modelValue) return ''
+  if (props.type === 'range' && Array.isArray(props.modelValue)) {
+    return `${formatDate(props.modelValue[0])} - ${formatDate(props.modelValue[1])}`
+  }
+  return formatDate(props.modelValue as Date)
+})
+
+const calendarDays = computed(() => {
+  const year = currentMonth.value.getFullYear()
+  const month = currentMonth.value.getMonth()
+  const firstDay = new Date(year, month, 1)
+  const lastDay = new Date(year, month + 1, 0)
+  const prevLastDay = new Date(year, month, 0)
+  
+  const days: Array<{ date: Date; disabled: boolean; otherMonth: boolean }> = []
+  
+  // Previous month days
+  const firstDayOfWeek = firstDay.getDay()
+  for (let i = firstDayOfWeek - 1; i >= 0; i--) {
+    const date = new Date(year, month, -i)
+    days.push({ date, disabled: false, otherMonth: true })
+  }
+  
+  // Current month days
+  for (let i = 1; i <= lastDay.getDate(); i++) {
+    const date = new Date(year, month, i)
+    days.push({ date, disabled: false, otherMonth: false })
+  }
+  
+  // Next month days
+  const remainingDays = 42 - days.length
+  for (let i = 1; i <= remainingDays; i++) {
+    const date = new Date(year, month + 1, i)
+    days.push({ date, disabled: false, otherMonth: true })
+  }
+  
+  return days
+})
+
+const dropdownStyle = computed(() => {
+  if (!inputRef.value) return {}
+  const rect = inputRef.value.getBoundingClientRect()
+  return {
+    position: 'fixed',
+    top: `${rect.bottom + 4}px`,
+    left: `${rect.left}px`,
+    zIndex: 9999
+  }
+})
+
+const formatDate = (date: Date): string => {
+  const day = String(date.getDate()).padStart(2, '0')
+  const month = String(date.getMonth() + 1).padStart(2, '0')
+  const year = date.getFullYear()
+  return `${day}/${month}/${year}`
+}
+
+const isDateDisabled = (date: Date): boolean => {
+  return props.disabledDate ? props.disabledDate(date) : false
+}
+
+const isSelected = (date: Date): boolean => {
+  if (!props.modelValue) return false
+  if (props.type === 'range' && Array.isArray(props.modelValue)) {
+    return isSameDay(date, props.modelValue[0]) || isSameDay(date, props.modelValue[1])
+  }
+  return isSameDay(date, props.modelValue as Date)
+}
+
+const isInRange = (date: Date): boolean => {
+  if (props.type !== 'range' || !Array.isArray(props.modelValue)) return false
+  const [start, end] = props.modelValue
+  return date > start && date < end
+}
+
+const isSameDay = (date1: Date, date2: Date): boolean => {
+  return date1.getDate() === date2.getDate() &&
+    date1.getMonth() === date2.getMonth() &&
+    date1.getFullYear() === date2.getFullYear()
+}
+
+const selectDate = (date: Date) => {
+  if (props.type === 'range') {
+    if (!rangeStart.value) {
+      rangeStart.value = date
+    } else {
+      const start = rangeStart.value < date ? rangeStart.value : date
+      const end = rangeStart.value < date ? date : rangeStart.value
+      emit('update:modelValue', [start, end])
+      emit('change', [start, end])
+      rangeStart.value = null
+      isOpen.value = false
+    }
+  } else {
+    emit('update:modelValue', date)
+    emit('change', date)
+    isOpen.value = false
+  }
+}
+
+const handleFocus = () => {
+  if (!props.disabled && !props.readonly) {
+    isOpen.value = true
+  }
+}
+
+const handleBlur = (event: FocusEvent) => {
+  setTimeout(() => {
+    if (!dropdownRef.value?.contains(event.relatedTarget as Node)) {
+      isOpen.value = false
+    }
+  }, 200)
+}
+
+const handleShortcut = (shortcut: Shortcut) => {
+  emit('update:modelValue', shortcut.value)
+  emit('change', shortcut.value)
+  isOpen.value = false
+}
+
+const prevMonth = () => {
+  currentMonth.value = new Date(currentMonth.value.getFullYear(), currentMonth.value.getMonth() - 1)
+}
+
+const nextMonth = () => {
+  currentMonth.value = new Date(currentMonth.value.getFullYear(), currentMonth.value.getMonth() + 1)
+}
+
+watch(() => props.modelValue, (newValue) => {
+  if (newValue && !Array.isArray(newValue)) {
+    currentMonth.value = new Date(newValue)
+  }
+})
+</script>
+
+<style scoped>
+.datametria-datepicker {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+}
+
+.datametria-datepicker__input {
+  width: 100%;
+  padding: 8px 12px;
+  border: 1px solid var(--datametria-border-color, #dcdfe6);
+  border-radius: 4px;
+  font-size: 14px;
+  color: var(--datametria-text-color, #303133);
+  background-color: var(--datametria-bg-color, #ffffff);
+  cursor: pointer;
+  transition: border-color 0.2s;
+}
+
+.datametria-datepicker__input:hover {
+  border-color: var(--datametria-border-color-hover, #c0c4cc);
+}
+
+.datametria-datepicker__input:focus {
+  outline: none;
+  border-color: var(--datametria-primary-color, #0072ce);
+}
+
+.datametria-datepicker--disabled .datametria-datepicker__input {
+  background-color: var(--datametria-disabled-bg-color, #f5f7fa);
+  cursor: not-allowed;
+}
+
+.datametria-datepicker__dropdown {
+  display: flex;
+  background: var(--datametria-bg-color, #ffffff);
+  border: 1px solid var(--datametria-border-color, #dcdfe6);
+  border-radius: 4px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+  padding: 12px;
+}
+
+.datametria-datepicker__shortcuts {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding-right: 12px;
+  border-right: 1px solid var(--datametria-border-color, #dcdfe6);
+  margin-right: 12px;
+}
+
+.datametria-datepicker__shortcut {
+  padding: 8px 12px;
+  border: none;
+  background: none;
+  cursor: pointer;
+  text-align: left;
+  white-space: nowrap;
+  color: var(--datametria-text-color, #303133);
+  border-radius: 4px;
+  transition: background-color 0.2s;
+}
+
+.datametria-datepicker__shortcut:hover {
+  background-color: var(--datametria-hover-bg-color, #f5f7fa);
+}
+
+.datametria-datepicker__calendar {
+  min-width: 280px;
+}
+
+.datametria-datepicker__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.datametria-datepicker__header button {
+  padding: 4px 8px;
+  border: none;
+  background: none;
+  cursor: pointer;
+  font-size: 16px;
+  color: var(--datametria-text-color, #303133);
+}
+
+.datametria-datepicker__weekdays {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 4px;
+  margin-bottom: 8px;
+  text-align: center;
+  font-size: 12px;
+  color: var(--datametria-info-color, #909399);
+}
+
+.datametria-datepicker__days {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 4px;
+}
+
+.datametria-datepicker__day {
+  padding: 8px;
+  border: none;
+  background: none;
+  cursor: pointer;
+  border-radius: 4px;
+  font-size: 14px;
+  color: var(--datametria-text-color, #303133);
+  transition: all 0.2s;
+}
+
+.datametria-datepicker__day:hover:not(:disabled) {
+  background-color: var(--datametria-hover-bg-color, #f5f7fa);
+}
+
+.datametria-datepicker__day--selected {
+  background-color: var(--datametria-primary-color, #0072ce);
+  color: white;
+}
+
+.datametria-datepicker__day--in-range {
+  background-color: var(--datametria-primary-light-color, #ecf5ff);
+}
+
+.datametria-datepicker__day--other-month {
+  color: var(--datametria-disabled-text-color, #c0c4cc);
+}
+
+.datametria-datepicker__day--disabled {
+  color: var(--datametria-disabled-text-color, #c0c4cc);
+  cursor: not-allowed;
+}
+
+/* Dark Mode Support - Hybrid Approach */
+
+/* Fallback automático (sem JS) */
+@media (prefers-color-scheme: dark) {
+  .datametria-datepicker {
+    background: var(--dm-bg-color-dark, #1e1e1e);
+    color: var(--dm-text-primary-dark, #e0e0e0);
+    border-color: var(--dm-border-color-dark, #404040);
   }
-  return formatDate(props.modelValue as Date)
-})
-
-const calendarDays = computed(() => {
-  const year = currentMonth.value.getFullYear()
-  const month = currentMonth.value.getMonth()
-  const firstDay = new Date(year, month, 1)
-  const lastDay = new Date(year, month + 1, 0)
-  const prevLastDay = new Date(year, month, 0)
-  
-  const days: Array<{ date: Date; disabled: boolean; otherMonth: boolean }> = []
-  
-  // Previous month days
-  const firstDayOfWeek = firstDay.getDay()
-  for (let i = firstDayOfWeek - 1; i >= 0; i--) {
-    const date = new Date(year, month, -i)
-    days.push({ date, disabled: false, otherMonth: true })
-  }
-  
-  // Current month days
-  for (let i = 1; i <= lastDay.getDate(); i++) {
-    const date = new Date(year, month, i)
-    days.push({ date, disabled: false, otherMonth: false })
-  }
-  
-  // Next month days
-  const remainingDays = 42 - days.length
-  for (let i = 1; i <= remainingDays; i++) {
-    const date = new Date(year, month + 1, i)
-    days.push({ date, disabled: false, otherMonth: true })
-  }
-  
-  return days
-})
-
-const dropdownStyle = computed(() => {
-  if (!inputRef.value) return {}
-  const rect = inputRef.value.getBoundingClientRect()
-  return {
-    position: 'fixed',
-    top: `${rect.bottom + 4}px`,
-    left: `${rect.left}px`,
-    zIndex: 9999
-  }
-})
-
-const formatDate = (date: Date): string => {
-  const day = String(date.getDate()).padStart(2, '0')
-  const month = String(date.getMonth() + 1).padStart(2, '0')
-  const year = date.getFullYear()
-  return `${day}/${month}/${year}`
-}
-
-const isDateDisabled = (date: Date): boolean => {
-  return props.disabledDate ? props.disabledDate(date) : false
-}
-
-const isSelected = (date: Date): boolean => {
-  if (!props.modelValue) return false
-  if (props.type === 'range' && Array.isArray(props.modelValue)) {
-    return isSameDay(date, props.modelValue[0]) || isSameDay(date, props.modelValue[1])
-  }
-  return isSameDay(date, props.modelValue as Date)
-}
-
-const isInRange = (date: Date): boolean => {
-  if (props.type !== 'range' || !Array.isArray(props.modelValue)) return false
-  const [start, end] = props.modelValue
-  return date > start && date < end
-}
-
-const isSameDay = (date1: Date, date2: Date): boolean => {
-  return date1.getDate() === date2.getDate() &&
-    date1.getMonth() === date2.getMonth() &&
-    date1.getFullYear() === date2.getFullYear()
-}
-
-const selectDate = (date: Date) => {
-  if (props.type === 'range') {
-    if (!rangeStart.value) {
-      rangeStart.value = date
-    } else {
-      const start = rangeStart.value < date ? rangeStart.value : date
-      const end = rangeStart.value < date ? date : rangeStart.value
-      emit('update:modelValue', [start, end])
-      emit('change', [start, end])
-      rangeStart.value = null
-      isOpen.value = false
-    }
-  } else {
-    emit('update:modelValue', date)
-    emit('change', date)
-    isOpen.value = false
-  }
-}
-
-const handleFocus = () => {
-  if (!props.disabled && !props.readonly) {
-    isOpen.value = true
-  }
-}
-
-const handleBlur = (event: FocusEvent) => {
-  setTimeout(() => {
-    if (!dropdownRef.value?.contains(event.relatedTarget as Node)) {
-      isOpen.value = false
-    }
-  }, 200)
-}
-
-const handleShortcut = (shortcut: Shortcut) => {
-  emit('update:modelValue', shortcut.value)
-  emit('change', shortcut.value)
-  isOpen.value = false
-}
-
-const prevMonth = () => {
-  currentMonth.value = new Date(currentMonth.value.getFullYear(), currentMonth.value.getMonth() - 1)
-}
-
-const nextMonth = () => {
-  currentMonth.value = new Date(currentMonth.value.getFullYear(), currentMonth.value.getMonth() + 1)
-}
-
-watch(() => props.modelValue, (newValue) => {
-  if (newValue && !Array.isArray(newValue)) {
-    currentMonth.value = new Date(newValue)
-  }
-})
-</script>
-
-<style scoped>
-.datametria-datepicker {
-  position: relative;
-  display: inline-block;
-  width: 100%;
-}
-
-.datametria-datepicker__input {
-  width: 100%;
-  padding: 8px 12px;
-  border: 1px solid var(--datametria-border-color, #dcdfe6);
-  border-radius: 4px;
-  font-size: 14px;
-  color: var(--datametria-text-color, #303133);
-  background-color: var(--datametria-bg-color, #ffffff);
-  cursor: pointer;
-  transition: border-color 0.2s;
-}
-
-.datametria-datepicker__input:hover {
-  border-color: var(--datametria-border-color-hover, #c0c4cc);
-}
-
-.datametria-datepicker__input:focus {
-  outline: none;
-  border-color: var(--datametria-primary-color, #0072ce);
-}
-
-.datametria-datepicker--disabled .datametria-datepicker__input {
-  background-color: var(--datametria-disabled-bg-color, #f5f7fa);
-  cursor: not-allowed;
-}
-
-.datametria-datepicker__dropdown {
-  display: flex;
-  background: var(--datametria-bg-color, #ffffff);
-  border: 1px solid var(--datametria-border-color, #dcdfe6);
-  border-radius: 4px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
-  padding: 12px;
-}
-
-.datametria-datepicker__shortcuts {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  padding-right: 12px;
-  border-right: 1px solid var(--datametria-border-color, #dcdfe6);
-  margin-right: 12px;
-}
-
-.datametria-datepicker__shortcut {
-  padding: 8px 12px;
-  border: none;
-  background: none;
-  cursor: pointer;
-  text-align: left;
-  white-space: nowrap;
-  color: var(--datametria-text-color, #303133);
-  border-radius: 4px;
-  transition: background-color 0.2s;
-}
-
-.datametria-datepicker__shortcut:hover {
-  background-color: var(--datametria-hover-bg-color, #f5f7fa);
-}
-
-.datametria-datepicker__calendar {
-  min-width: 280px;
-}
-
-.datametria-datepicker__header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 12px;
-}
-
-.datametria-datepicker__header button {
-  padding: 4px 8px;
-  border: none;
-  background: none;
-  cursor: pointer;
-  font-size: 16px;
-  color: var(--datametria-text-color, #303133);
-}
-
-.datametria-datepicker__weekdays {
-  display: grid;
-  grid-template-columns: repeat(7, 1fr);
-  gap: 4px;
-  margin-bottom: 8px;
-  text-align: center;
-  font-size: 12px;
-  color: var(--datametria-info-color, #909399);
-}
-
-.datametria-datepicker__days {
-  display: grid;
-  grid-template-columns: repeat(7, 1fr);
-  gap: 4px;
-}
-
-.datametria-datepicker__day {
-  padding: 8px;
-  border: none;
-  background: none;
-  cursor: pointer;
-  border-radius: 4px;
-  font-size: 14px;
-  color: var(--datametria-text-color, #303133);
-  transition: all 0.2s;
-}
-
-.datametria-datepicker__day:hover:not(:disabled) {
-  background-color: var(--datametria-hover-bg-color, #f5f7fa);
-}
-
-.datametria-datepicker__day--selected {
-  background-color: var(--datametria-primary-color, #0072ce);
-  color: white;
-}
-
-.datametria-datepicker__day--in-range {
-  background-color: var(--datametria-primary-light-color, #ecf5ff);
-}
-
-.datametria-datepicker__day--other-month {
-  color: var(--datametria-disabled-text-color, #c0c4cc);
 }
 
-.datametria-datepicker__day--disabled {
-  color: var(--datametria-disabled-text-color, #c0c4cc);
-  cursor: not-allowed;
+/* Controle manual via useTheme() */
+[data-theme="dark"] .datametria-datepicker {
+  background: var(--dm-bg-color-dark, #1e1e1e);
+  color: var(--dm-text-primary-dark, #e0e0e0);
+  border-color: var(--dm-border-color-dark, #404040);
 }
-</style>
+</style>