@datametria/vue-components 2.3.1 → 2.4.0

package/src/components/DatametriaTimePicker.vue

@@ -1,303 +1,321 @@
-<template>
-  <div class="datametria-timepicker" :class="{ 'datametria-timepicker--disabled': disabled }">
-    <input
-      ref="inputRef"
-      v-model="displayValue"
-      type="text"
-      class="datametria-timepicker__input"
-      :placeholder="placeholder"
-      :disabled="disabled"
-      :readonly="readonly"
-      @focus="handleFocus"
-      @blur="handleBlur"
-    />
-    <Teleport to="body">
-      <div
-        v-if="isOpen"
-        ref="dropdownRef"
-        class="datametria-timepicker__dropdown"
-        :style="dropdownStyle"
-      >
-        <div class="datametria-timepicker__spinners">
-          <div class="datametria-timepicker__spinner">
-            <div class="datametria-timepicker__spinner-title">Hora</div>
-            <div class="datametria-timepicker__spinner-list">
-              <button
-                v-for="hour in hours"
-                :key="hour"
-                class="datametria-timepicker__spinner-item"
-                :class="{ 'datametria-timepicker__spinner-item--active': hour === selectedHour }"
-                @click="selectHour(hour)"
-              >
-                {{ formatNumber(hour) }}
-              </button>
-            </div>
-          </div>
-          <div class="datametria-timepicker__spinner">
-            <div class="datametria-timepicker__spinner-title">Minuto</div>
-            <div class="datametria-timepicker__spinner-list">
-              <button
-                v-for="minute in minutes"
-                :key="minute"
-                class="datametria-timepicker__spinner-item"
-                :class="{ 'datametria-timepicker__spinner-item--active': minute === selectedMinute }"
-                @click="selectMinute(minute)"
-              >
-                {{ formatNumber(minute) }}
-              </button>
-            </div>
-          </div>
-          <div v-if="showSeconds" class="datametria-timepicker__spinner">
-            <div class="datametria-timepicker__spinner-title">Segundo</div>
-            <div class="datametria-timepicker__spinner-list">
-              <button
-                v-for="second in seconds"
-                :key="second"
-                class="datametria-timepicker__spinner-item"
-                :class="{ 'datametria-timepicker__spinner-item--active': second === selectedSecond }"
-                @click="selectSecond(second)"
-              >
-                {{ formatNumber(second) }}
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </Teleport>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, watch } from 'vue'
-
-interface Props {
-  modelValue?: string | null
-  format?: string
-  step?: number
-  placeholder?: string
-  disabled?: boolean
-  readonly?: boolean
-  range?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  modelValue: null,
-  format: 'HH:mm:ss',
-  step: 1,
-  placeholder: 'Selecione um horário',
-  disabled: false,
-  readonly: false,
-  range: false
-})
-
-const emit = defineEmits<{
-  'update:modelValue': [value: string | null]
-  change: [value: string | null]
-}>()
-
-const inputRef = ref<HTMLInputElement>()
-const dropdownRef = ref<HTMLDivElement>()
-const isOpen = ref(false)
-const selectedHour = ref(0)
-const selectedMinute = ref(0)
-const selectedSecond = ref(0)
-
-const showSeconds = computed(() => props.format.includes('ss'))
-
-const hours = computed(() => {
-  const result: number[] = []
-  for (let i = 0; i < 24; i += props.step) {
-    result.push(i)
+<template>
+  <div class="datametria-timepicker" :class="{ 'datametria-timepicker--disabled': disabled }">
+    <input
+      ref="inputRef"
+      v-model="displayValue"
+      type="text"
+      class="datametria-timepicker__input"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :readonly="readonly"
+      @focus="handleFocus"
+      @blur="handleBlur"
+    />
+    <Teleport to="body">
+      <div
+        v-if="isOpen"
+        ref="dropdownRef"
+        class="datametria-timepicker__dropdown"
+        :style="dropdownStyle"
+      >
+        <div class="datametria-timepicker__spinners">
+          <div class="datametria-timepicker__spinner">
+            <div class="datametria-timepicker__spinner-title">Hora</div>
+            <div class="datametria-timepicker__spinner-list">
+              <button
+                v-for="hour in hours"
+                :key="hour"
+                class="datametria-timepicker__spinner-item"
+                :class="{ 'datametria-timepicker__spinner-item--active': hour === selectedHour }"
+                @click="selectHour(hour)"
+              >
+                {{ formatNumber(hour) }}
+              </button>
+            </div>
+          </div>
+          <div class="datametria-timepicker__spinner">
+            <div class="datametria-timepicker__spinner-title">Minuto</div>
+            <div class="datametria-timepicker__spinner-list">
+              <button
+                v-for="minute in minutes"
+                :key="minute"
+                class="datametria-timepicker__spinner-item"
+                :class="{ 'datametria-timepicker__spinner-item--active': minute === selectedMinute }"
+                @click="selectMinute(minute)"
+              >
+                {{ formatNumber(minute) }}
+              </button>
+            </div>
+          </div>
+          <div v-if="showSeconds" class="datametria-timepicker__spinner">
+            <div class="datametria-timepicker__spinner-title">Segundo</div>
+            <div class="datametria-timepicker__spinner-list">
+              <button
+                v-for="second in seconds"
+                :key="second"
+                class="datametria-timepicker__spinner-item"
+                :class="{ 'datametria-timepicker__spinner-item--active': second === selectedSecond }"
+                @click="selectSecond(second)"
+              >
+                {{ formatNumber(second) }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+
+interface Props {
+  modelValue?: string | null
+  format?: string
+  step?: number
+  placeholder?: string
+  disabled?: boolean
+  readonly?: boolean
+  range?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: null,
+  format: 'HH:mm:ss',
+  step: 1,
+  placeholder: 'Selecione um horário',
+  disabled: false,
+  readonly: false,
+  range: false
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string | null]
+  change: [value: string | null]
+}>()
+
+const inputRef = ref<HTMLInputElement>()
+const dropdownRef = ref<HTMLDivElement>()
+const isOpen = ref(false)
+const selectedHour = ref(0)
+const selectedMinute = ref(0)
+const selectedSecond = ref(0)
+
+const showSeconds = computed(() => props.format.includes('ss'))
+
+const hours = computed(() => {
+  const result: number[] = []
+  for (let i = 0; i < 24; i += props.step) {
+    result.push(i)
+  }
+  return result
+})
+
+const minutes = computed(() => {
+  const result: number[] = []
+  for (let i = 0; i < 60; i += props.step) {
+    result.push(i)
+  }
+  return result
+})
+
+const seconds = computed(() => {
+  const result: number[] = []
+  for (let i = 0; i < 60; i += props.step) {
+    result.push(i)
+  }
+  return result
+})
+
+const displayValue = computed(() => {
+  if (!props.modelValue) return ''
+  return props.modelValue
+})
+
+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 formatNumber = (num: number): string => {
+  return String(num).padStart(2, '0')
+}
+
+const formatTime = (): string => {
+  const h = formatNumber(selectedHour.value)
+  const m = formatNumber(selectedMinute.value)
+  const s = formatNumber(selectedSecond.value)
+  
+  if (showSeconds.value) {
+    return `${h}:${m}:${s}`
+  }
+  return `${h}:${m}`
+}
+
+const parseTime = (time: string) => {
+  if (!time) return
+  
+  const parts = time.split(':')
+  if (parts.length >= 2) {
+    selectedHour.value = parseInt(parts[0]) || 0
+    selectedMinute.value = parseInt(parts[1]) || 0
+    if (parts.length >= 3) {
+      selectedSecond.value = parseInt(parts[2]) || 0
+    }
+  }
+}
+
+const selectHour = (hour: number) => {
+  selectedHour.value = hour
+  updateValue()
+}
+
+const selectMinute = (minute: number) => {
+  selectedMinute.value = minute
+  updateValue()
+}
+
+const selectSecond = (second: number) => {
+  selectedSecond.value = second
+  updateValue()
+}
+
+const updateValue = () => {
+  const time = formatTime()
+  emit('update:modelValue', time)
+  emit('change', time)
+}
+
+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)
+}
+
+watch(() => props.modelValue, (newValue) => {
+  if (newValue) {
+    parseTime(newValue)
+  }
+}, { immediate: true })
+</script>
+
+<style scoped>
+.datametria-timepicker {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+}
+
+.datametria-timepicker__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-timepicker__input:hover {
+  border-color: var(--datametria-border-color-hover, #c0c4cc);
+}
+
+.datametria-timepicker__input:focus {
+  outline: none;
+  border-color: var(--datametria-primary-color, #0072ce);
+}
+
+.datametria-timepicker--disabled .datametria-timepicker__input {
+  background-color: var(--datametria-disabled-bg-color, #f5f7fa);
+  cursor: not-allowed;
+}
+
+.datametria-timepicker__dropdown {
+  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-timepicker__spinners {
+  display: flex;
+  gap: 12px;
+}
+
+.datametria-timepicker__spinner {
+  display: flex;
+  flex-direction: column;
+}
+
+.datametria-timepicker__spinner-title {
+  font-size: 12px;
+  color: var(--datametria-info-color, #909399);
+  text-align: center;
+  margin-bottom: 8px;
+}
+
+.datametria-timepicker__spinner-list {
+  display: flex;
+  flex-direction: column;
+  max-height: 200px;
+  overflow-y: auto;
+  border: 1px solid var(--datametria-border-color, #dcdfe6);
+  border-radius: 4px;
+}
+
+.datametria-timepicker__spinner-item {
+  padding: 8px 16px;
+  border: none;
+  background: none;
+  cursor: pointer;
+  text-align: center;
+  font-size: 14px;
+  color: var(--datametria-text-color, #303133);
+  transition: background-color 0.2s;
+}
+
+.datametria-timepicker__spinner-item:hover {
+  background-color: var(--datametria-hover-bg-color, #f5f7fa);
+}
+
+.datametria-timepicker__spinner-item--active {
+  background-color: var(--datametria-primary-color, #0072ce);
+  color: white;
+}
+
+/* Dark Mode Support - Hybrid Approach */
+
+/* Fallback automático (sem JS) */
+@media (prefers-color-scheme: dark) {
+  .datametria-timepicker {
+    background: var(--dm-bg-color-dark, #1e1e1e);
+    color: var(--dm-text-primary-dark, #e0e0e0);
+    border-color: var(--dm-border-color-dark, #404040);
   }
-  return result
-})
-
-const minutes = computed(() => {
-  const result: number[] = []
-  for (let i = 0; i < 60; i += props.step) {
-    result.push(i)
-  }
-  return result
-})
-
-const seconds = computed(() => {
-  const result: number[] = []
-  for (let i = 0; i < 60; i += props.step) {
-    result.push(i)
-  }
-  return result
-})
-
-const displayValue = computed(() => {
-  if (!props.modelValue) return ''
-  return props.modelValue
-})
-
-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 formatNumber = (num: number): string => {
-  return String(num).padStart(2, '0')
-}
-
-const formatTime = (): string => {
-  const h = formatNumber(selectedHour.value)
-  const m = formatNumber(selectedMinute.value)
-  const s = formatNumber(selectedSecond.value)
-  
-  if (showSeconds.value) {
-    return `${h}:${m}:${s}`
-  }
-  return `${h}:${m}`
-}
-
-const parseTime = (time: string) => {
-  if (!time) return
-  
-  const parts = time.split(':')
-  if (parts.length >= 2) {
-    selectedHour.value = parseInt(parts[0]) || 0
-    selectedMinute.value = parseInt(parts[1]) || 0
-    if (parts.length >= 3) {
-      selectedSecond.value = parseInt(parts[2]) || 0
-    }
-  }
-}
-
-const selectHour = (hour: number) => {
-  selectedHour.value = hour
-  updateValue()
-}
-
-const selectMinute = (minute: number) => {
-  selectedMinute.value = minute
-  updateValue()
-}
-
-const selectSecond = (second: number) => {
-  selectedSecond.value = second
-  updateValue()
-}
-
-const updateValue = () => {
-  const time = formatTime()
-  emit('update:modelValue', time)
-  emit('change', time)
-}
-
-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)
-}
-
-watch(() => props.modelValue, (newValue) => {
-  if (newValue) {
-    parseTime(newValue)
-  }
-}, { immediate: true })
-</script>
-
-<style scoped>
-.datametria-timepicker {
-  position: relative;
-  display: inline-block;
-  width: 100%;
-}
-
-.datametria-timepicker__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-timepicker__input:hover {
-  border-color: var(--datametria-border-color-hover, #c0c4cc);
-}
-
-.datametria-timepicker__input:focus {
-  outline: none;
-  border-color: var(--datametria-primary-color, #0072ce);
-}
-
-.datametria-timepicker--disabled .datametria-timepicker__input {
-  background-color: var(--datametria-disabled-bg-color, #f5f7fa);
-  cursor: not-allowed;
-}
-
-.datametria-timepicker__dropdown {
-  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-timepicker__spinners {
-  display: flex;
-  gap: 12px;
-}
-
-.datametria-timepicker__spinner {
-  display: flex;
-  flex-direction: column;
-}
-
-.datametria-timepicker__spinner-title {
-  font-size: 12px;
-  color: var(--datametria-info-color, #909399);
-  text-align: center;
-  margin-bottom: 8px;
-}
-
-.datametria-timepicker__spinner-list {
-  display: flex;
-  flex-direction: column;
-  max-height: 200px;
-  overflow-y: auto;
-  border: 1px solid var(--datametria-border-color, #dcdfe6);
-  border-radius: 4px;
-}
-
-.datametria-timepicker__spinner-item {
-  padding: 8px 16px;
-  border: none;
-  background: none;
-  cursor: pointer;
-  text-align: center;
-  font-size: 14px;
-  color: var(--datametria-text-color, #303133);
-  transition: background-color 0.2s;
-}
-
-.datametria-timepicker__spinner-item:hover {
-  background-color: var(--datametria-hover-bg-color, #f5f7fa);
 }
 
-.datametria-timepicker__spinner-item--active {
-  background-color: var(--datametria-primary-color, #0072ce);
-  color: white;
+/* Controle manual via useTheme() */
+[data-theme="dark"] .datametria-timepicker {
+  background: var(--dm-bg-color-dark, #1e1e1e);
+  color: var(--dm-text-primary-dark, #e0e0e0);
+  border-color: var(--dm-border-color-dark, #404040);
 }
-</style>
+</style>