@datametria/vue-components 2.2.0 → 2.3.0

package/src/components/DatametriaTimePicker.vue

@@ -1,286 +1,303 @@
 <template>
-  <div class="dm-time-picker" :class="{ 'dm-time-picker--disabled': disabled }">
-    <label v-if="label" :for="inputId" class="dm-time-picker__label">
-      {{ label }}
-      <span v-if="required" class="dm-time-picker__required" aria-label="obrigatório">*</span>
-    </label>
-    
-    <div class="dm-time-picker__wrapper">
-      <input
-        :id="inputId"
-        ref="inputRef"
-        v-model="displayValue"
-        type="time"
-        class="dm-time-picker__input"
-        :class="{ 
-          'dm-time-picker__input--error': hasError,
-          'dm-time-picker__input--success': hasSuccess 
-        }"
-        :disabled="disabled"
-        :required="required"
-        :min="min"
-        :max="max"
-        :step="step"
-        :aria-describedby="ariaDescribedBy"
-        :aria-invalid="hasError"
-        @input="handleInput"
-        @blur="handleBlur"
-        @focus="handleFocus"
-      />
-      
-      <div v-if="hasError || hasSuccess" class="dm-time-picker__icon">
-        <svg v-if="hasError" class="dm-time-picker__icon--error" viewBox="0 0 20 20" fill="currentColor">
-          <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
-        </svg>
-        <svg v-else-if="hasSuccess" class="dm-time-picker__icon--success" viewBox="0 0 20 20" fill="currentColor">
-          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
-        </svg>
+  <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>
-    </div>
-    
-    <div v-if="errorMessage || successMessage || helperText" class="dm-time-picker__messages">
-      <p v-if="errorMessage" :id="`${inputId}-error`" class="dm-time-picker__error" role="alert">
-        {{ errorMessage }}
-      </p>
-      <p v-else-if="successMessage" :id="`${inputId}-success`" class="dm-time-picker__success">
-        {{ successMessage }}
-      </p>
-      <p v-else-if="helperText" :id="`${inputId}-helper`" class="dm-time-picker__helper">
-        {{ helperText }}
-      </p>
-    </div>
+    </Teleport>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch, nextTick } from 'vue'
+import { ref, computed, watch } from 'vue'
 
 interface Props {
-  modelValue?: string
-  label?: string
+  modelValue?: string | null
+  format?: string
+  step?: number
   placeholder?: string
   disabled?: boolean
-  required?: boolean
-  errorMessage?: string
-  successMessage?: string
-  helperText?: string
-  min?: string
-  max?: string
-  step?: number
-  format24h?: boolean
-}
-
-interface Emits {
-  (e: 'update:modelValue', value: string): void
-  (e: 'blur', event: FocusEvent): void
-  (e: 'focus', event: FocusEvent): void
-  (e: 'change', value: string): void
+  readonly?: boolean
+  range?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  modelValue: '',
-  step: 60,
-  format24h: true
+  modelValue: null,
+  format: 'HH:mm:ss',
+  step: 1,
+  placeholder: 'Selecione um horário',
+  disabled: false,
+  readonly: false,
+  range: false
 })
 
-const emit = defineEmits<Emits>()
+const emit = defineEmits<{
+  'update:modelValue': [value: string | null]
+  change: [value: string | null]
+}>()
 
-// Refs
 const inputRef = ref<HTMLInputElement>()
-
-// Computed
-const inputId = computed(() => `dm-time-picker-${Math.random().toString(36).substr(2, 9)}`)
-
-const hasError = computed(() => !!props.errorMessage)
-const hasSuccess = computed(() => !!props.successMessage && !hasError.value)
-
-const ariaDescribedBy = computed(() => {
-  const ids = []
-  if (props.errorMessage) ids.push(`${inputId.value}-error`)
-  else if (props.successMessage) ids.push(`${inputId.value}-success`)
-  else if (props.helperText) ids.push(`${inputId.value}-helper`)
-  return ids.length > 0 ? ids.join(' ') : undefined
+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 displayValue = computed({
-  get: () => props.modelValue,
-  set: (value: string) => {
-    emit('update:modelValue', value)
-    emit('change', value)
+const minutes = computed(() => {
+  const result: number[] = []
+  for (let i = 0; i < 60; i += props.step) {
+    result.push(i)
   }
+  return result
 })
 
-// Methods
-const handleInput = (event: Event) => {
-  const target = event.target as HTMLInputElement
-  displayValue.value = target.value
-}
-
-const handleBlur = (event: FocusEvent) => {
-  emit('blur', event)
-}
-
-const handleFocus = (event: FocusEvent) => {
-  emit('focus', event)
-}
-
-const focus = () => {
-  nextTick(() => {
-    inputRef.value?.focus()
-  })
-}
-
-const blur = () => {
-  inputRef.value?.blur()
-}
-
-// Watch for external changes
-watch(() => props.modelValue, (newValue) => {
-  if (inputRef.value && inputRef.value.value !== newValue) {
-    inputRef.value.value = newValue
+const seconds = computed(() => {
+  const result: number[] = []
+  for (let i = 0; i < 60; i += props.step) {
+    result.push(i)
   }
+  return result
 })
 
-// Expose methods
-defineExpose({
-  focus,
-  blur,
-  inputRef
+const displayValue = computed(() => {
+  if (!props.modelValue) return ''
+  return props.modelValue
 })
-</script>
-
-<style scoped>
-.dm-time-picker {
-  @apply w-full;
-}
 
-.dm-time-picker--disabled {
-  @apply opacity-60 cursor-not-allowed;
-}
+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
+  }
+})
 
-.dm-time-picker__label {
-  @apply block text-sm font-medium text-gray-700 mb-1;
-  color: var(--dm-gray-700);
+const formatNumber = (num: number): string => {
+  return String(num).padStart(2, '0')
 }
 
-[data-theme="dark"] .dm-time-picker__label {
-  color: var(--dm-text-secondary);
+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}`
 }
 
-.dm-time-picker__required {
-  @apply text-red-500 ml-1;
-  color: var(--dm-error);
+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
+    }
+  }
 }
 
-.dm-time-picker__wrapper {
-  @apply relative;
+const selectHour = (hour: number) => {
+  selectedHour.value = hour
+  updateValue()
 }
 
-.dm-time-picker__input {
-  @apply w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm;
-  @apply focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500;
-  @apply disabled:bg-gray-50 disabled:cursor-not-allowed;
-  @apply transition-colors duration-200;
-  
-  border-color: var(--dm-gray-300, #d1d5db);
-  background-color: var(--dm-bg-primary, #ffffff);
-  color: var(--dm-text-primary);
-  border-radius: var(--dm-radius);
-  transition: var(--dm-transition);
+const selectMinute = (minute: number) => {
+  selectedMinute.value = minute
+  updateValue()
 }
 
-.dm-time-picker__input:focus {
-  box-shadow: var(--dm-focus-ring);
-  border-color: var(--dm-primary);
+const selectSecond = (second: number) => {
+  selectedSecond.value = second
+  updateValue()
 }
 
-.dm-time-picker__input--error {
-  @apply border-red-500 focus:ring-red-500 focus:border-red-500;
-  border-color: var(--dm-error);
+const updateValue = () => {
+  const time = formatTime()
+  emit('update:modelValue', time)
+  emit('change', time)
 }
 
-.dm-time-picker__input--error:focus {
-  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
+const handleFocus = () => {
+  if (!props.disabled && !props.readonly) {
+    isOpen.value = true
+  }
 }
 
-.dm-time-picker__input--success {
-  @apply border-green-500 focus:ring-green-500 focus:border-green-500;
-  border-color: var(--dm-success);
+const handleBlur = (event: FocusEvent) => {
+  setTimeout(() => {
+    if (!dropdownRef.value?.contains(event.relatedTarget as Node)) {
+      isOpen.value = false
+    }
+  }, 200)
 }
 
-.dm-time-picker__input--success:focus {
-  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
-}
+watch(() => props.modelValue, (newValue) => {
+  if (newValue) {
+    parseTime(newValue)
+  }
+}, { immediate: true })
+</script>
 
-[data-theme="dark"] .dm-time-picker__input {
-  background-color: var(--dm-bg-secondary);
-  border-color: var(--dm-gray-600, #4b5563);
-  color: var(--dm-text-primary);
+<style scoped>
+.datametria-timepicker {
+  position: relative;
+  display: inline-block;
+  width: 100%;
 }
 
-[data-theme="dark"] .dm-time-picker__input:disabled {
-  background-color: var(--dm-gray-700, #374151);
+.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;
 }
 
-.dm-time-picker__icon {
-  @apply absolute right-3 top-1/2 transform -translate-y-1/2 pointer-events-none;
+.datametria-timepicker__input:hover {
+  border-color: var(--datametria-border-color-hover, #c0c4cc);
 }
 
-.dm-time-picker__icon--error {
-  @apply w-5 h-5 text-red-500;
-  color: var(--dm-error);
+.datametria-timepicker__input:focus {
+  outline: none;
+  border-color: var(--datametria-primary-color, #0072ce);
 }
 
-.dm-time-picker__icon--success {
-  @apply w-5 h-5 text-green-500;
-  color: var(--dm-success);
+.datametria-timepicker--disabled .datametria-timepicker__input {
+  background-color: var(--datametria-disabled-bg-color, #f5f7fa);
+  cursor: not-allowed;
 }
 
-.dm-time-picker__messages {
-  @apply mt-1;
+.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;
 }
 
-.dm-time-picker__error {
-  @apply text-sm text-red-600;
-  color: var(--dm-error);
+.datametria-timepicker__spinners {
+  display: flex;
+  gap: 12px;
 }
 
-.dm-time-picker__success {
-  @apply text-sm text-green-600;
-  color: var(--dm-success);
+.datametria-timepicker__spinner {
+  display: flex;
+  flex-direction: column;
 }
 
-.dm-time-picker__helper {
-  @apply text-sm text-gray-500;
-  color: var(--dm-gray-500, #6b7280);
+.datametria-timepicker__spinner-title {
+  font-size: 12px;
+  color: var(--datametria-info-color, #909399);
+  text-align: center;
+  margin-bottom: 8px;
 }
 
-[data-theme="dark"] .dm-time-picker__helper {
-  color: var(--dm-text-secondary);
+.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;
 }
 
-/* Responsive adjustments */
-@media (max-width: 640px) {
-  .dm-time-picker__input {
-    @apply text-base; /* Prevent zoom on iOS */
-  }
+.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;
 }
 
-/* High contrast mode support */
-@media (prefers-contrast: high) {
-  .dm-time-picker__input {
-    @apply border-2;
-  }
-  
-  .dm-time-picker__input:focus {
-    @apply border-4;
-  }
+.datametria-timepicker__spinner-item:hover {
+  background-color: var(--datametria-hover-bg-color, #f5f7fa);
 }
 
-/* Reduced motion support */
-@media (prefers-reduced-motion: reduce) {
-  .dm-time-picker__input {
-    @apply transition-none;
-  }
+.datametria-timepicker__spinner-item--active {
+  background-color: var(--datametria-primary-color, #0072ce);
+  color: white;
 }
-</style>
+</style>

package/src/components/DatametriaTree.vue

@@ -0,0 +1,124 @@
+<template>
+  <div class="datametria-tree" role="tree">
+    <DatametriaTreeNode
+      v-for="node in data"
+      :key="getNodeKey(node)"
+      :node="node"
+      :node-key="nodeKey"
+      :checkable="checkable"
+      :default-expand-all="defaultExpandAll"
+      :expanded-keys="expandedKeysSet"
+      :checked-keys="checkedKeysSet"
+      @toggle="handleToggle"
+      @check="handleCheck"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import DatametriaTreeNode from './DatametriaTreeNode.vue'
+
+export interface TreeNode {
+  [key: string]: any
+  children?: TreeNode[]
+}
+
+interface Props {
+  data: TreeNode[]
+  nodeKey?: string
+  defaultExpandAll?: boolean
+  checkable?: boolean
+  defaultExpandedKeys?: (string | number)[]
+  defaultCheckedKeys?: (string | number)[]
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  nodeKey: 'id',
+  defaultExpandAll: false,
+  checkable: false,
+  defaultExpandedKeys: () => [],
+  defaultCheckedKeys: () => []
+})
+
+const emit = defineEmits<{
+  nodeExpand: [node: TreeNode]
+  nodeCollapse: [node: TreeNode]
+  check: [checkedKeys: (string | number)[], node: TreeNode]
+}>()
+
+const getAllKeys = (nodes: TreeNode[]): (string | number)[] => {
+  const keys: (string | number)[] = []
+  nodes.forEach(node => {
+    keys.push(node[props.nodeKey])
+    if (node.children) {
+      keys.push(...getAllKeys(node.children))
+    }
+  })
+  return keys
+}
+
+const initialKeys = props.defaultExpandAll
+  ? getAllKeys(props.data)
+  : props.defaultExpandedKeys
+
+const expandedKeys = ref<Set<string | number>>(new Set(initialKeys))
+const checkedKeys = ref<Set<string | number>>(new Set(props.defaultCheckedKeys))
+
+const expandedKeysSet = computed(() => expandedKeys.value)
+const checkedKeysSet = computed(() => checkedKeys.value)
+
+const getNodeKey = (node: TreeNode): string | number => {
+  return node[props.nodeKey]
+}
+
+const handleToggle = (node: TreeNode) => {
+  const key = getNodeKey(node)
+  
+  if (expandedKeys.value.has(key)) {
+    expandedKeys.value.delete(key)
+    emit('nodeCollapse', node)
+  } else {
+    expandedKeys.value.add(key)
+    emit('nodeExpand', node)
+  }
+}
+
+const handleCheck = (node: TreeNode, checked: boolean) => {
+  const key = getNodeKey(node)
+  
+  if (checked) {
+    checkedKeys.value.add(key)
+  } else {
+    checkedKeys.value.delete(key)
+  }
+  
+  emit('check', Array.from(checkedKeys.value), node)
+}
+
+const expandAll = () => {
+  expandedKeys.value = new Set(getAllKeys(props.data))
+}
+
+const collapseAll = () => {
+  expandedKeys.value.clear()
+}
+
+defineExpose({
+  expandAll,
+  collapseAll
+})
+</script>
+
+<style scoped>
+.datametria-tree {
+  font-size: var(--dm-font-size-base, 14px);
+  color: var(--dm-color-text, #333);
+}
+
+@media (prefers-color-scheme: dark) {
+  .datametria-tree {
+    color: var(--dm-color-text-dark, #e0e0e0);
+  }
+}
+</style>