@datametria/vue-components 1.1.1 → 1.1.3

package/src/components/DatametriaTimePicker.vue

@@ -0,0 +1,286 @@
+<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>
+    </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>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, nextTick } from 'vue'
+
+interface Props {
+  modelValue?: string
+  label?: string
+  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
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: '',
+  step: 60,
+  format24h: true
+})
+
+const emit = defineEmits<Emits>()
+
+// 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 displayValue = computed({
+  get: () => props.modelValue,
+  set: (value: string) => {
+    emit('update:modelValue', value)
+    emit('change', value)
+  }
+})
+
+// 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
+  }
+})
+
+// Expose methods
+defineExpose({
+  focus,
+  blur,
+  inputRef
+})
+</script>
+
+<style scoped>
+.dm-time-picker {
+  @apply w-full;
+}
+
+.dm-time-picker--disabled {
+  @apply opacity-60 cursor-not-allowed;
+}
+
+.dm-time-picker__label {
+  @apply block text-sm font-medium text-gray-700 mb-1;
+  color: var(--dm-gray-700);
+}
+
+[data-theme="dark"] .dm-time-picker__label {
+  color: var(--dm-text-secondary);
+}
+
+.dm-time-picker__required {
+  @apply text-red-500 ml-1;
+  color: var(--dm-error);
+}
+
+.dm-time-picker__wrapper {
+  @apply relative;
+}
+
+.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);
+}
+
+.dm-time-picker__input:focus {
+  box-shadow: var(--dm-focus-ring);
+  border-color: var(--dm-primary);
+}
+
+.dm-time-picker__input--error {
+  @apply border-red-500 focus:ring-red-500 focus:border-red-500;
+  border-color: var(--dm-error);
+}
+
+.dm-time-picker__input--error:focus {
+  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
+}
+
+.dm-time-picker__input--success {
+  @apply border-green-500 focus:ring-green-500 focus:border-green-500;
+  border-color: var(--dm-success);
+}
+
+.dm-time-picker__input--success:focus {
+  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
+}
+
+[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);
+}
+
+[data-theme="dark"] .dm-time-picker__input:disabled {
+  background-color: var(--dm-gray-700, #374151);
+}
+
+.dm-time-picker__icon {
+  @apply absolute right-3 top-1/2 transform -translate-y-1/2 pointer-events-none;
+}
+
+.dm-time-picker__icon--error {
+  @apply w-5 h-5 text-red-500;
+  color: var(--dm-error);
+}
+
+.dm-time-picker__icon--success {
+  @apply w-5 h-5 text-green-500;
+  color: var(--dm-success);
+}
+
+.dm-time-picker__messages {
+  @apply mt-1;
+}
+
+.dm-time-picker__error {
+  @apply text-sm text-red-600;
+  color: var(--dm-error);
+}
+
+.dm-time-picker__success {
+  @apply text-sm text-green-600;
+  color: var(--dm-success);
+}
+
+.dm-time-picker__helper {
+  @apply text-sm text-gray-500;
+  color: var(--dm-gray-500, #6b7280);
+}
+
+[data-theme="dark"] .dm-time-picker__helper {
+  color: var(--dm-text-secondary);
+}
+
+/* Responsive adjustments */
+@media (max-width: 640px) {
+  .dm-time-picker__input {
+    @apply text-base; /* Prevent zoom on iOS */
+  }
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: high) {
+  .dm-time-picker__input {
+    @apply border-2;
+  }
+  
+  .dm-time-picker__input:focus {
+    @apply border-4;
+  }
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+  .dm-time-picker__input {
+    @apply transition-none;
+  }
+}
+</style>

package/src/components/DatametriaTooltip.vue

@@ -0,0 +1,409 @@
+<template>
+  <div 
+    ref="triggerRef"
+    class="dm-tooltip-trigger"
+    @mouseenter="handleMouseEnter"
+    @mouseleave="handleMouseLeave"
+    @focus="handleFocus"
+    @blur="handleBlur"
+    @click="handleClick"
+  >
+    <slot />
+    
+    <Teleport to="body">
+      <Transition
+        name="tooltip"
+        @enter="onEnter"
+        @leave="onLeave"
+      >
+        <div
+          v-if="isVisible"
+          ref="tooltipRef"
+          :id="tooltipId"
+          class="dm-tooltip"
+          :class="[
+            `dm-tooltip--${placement}`,
+            `dm-tooltip--${variant}`,
+            { 'dm-tooltip--arrow': showArrow }
+          ]"
+          :style="tooltipStyle"
+          role="tooltip"
+          :aria-hidden="!isVisible"
+        >
+          <div class="dm-tooltip__content">
+            <slot name="content">
+              {{ content }}
+            </slot>
+          </div>
+          <div v-if="showArrow" class="dm-tooltip__arrow"></div>
+        </div>
+      </Transition>
+    </Teleport>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, nextTick, onMounted, onUnmounted } from 'vue'
+
+type Placement = 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end'
+type Variant = 'dark' | 'light' | 'primary' | 'error' | 'warning' | 'success'
+type Trigger = 'hover' | 'click' | 'focus' | 'manual'
+
+interface Props {
+  content?: string
+  placement?: Placement
+  variant?: Variant
+  trigger?: Trigger
+  disabled?: boolean
+  showArrow?: boolean
+  delay?: number
+  hideDelay?: number
+  offset?: number
+  maxWidth?: string
+}
+
+interface Emits {
+  (e: 'show'): void
+  (e: 'hide'): void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  placement: 'top',
+  variant: 'dark',
+  trigger: 'hover',
+  showArrow: true,
+  delay: 100,
+  hideDelay: 100,
+  offset: 8,
+  maxWidth: '200px'
+})
+
+const emit = defineEmits<Emits>()
+
+// Refs
+const triggerRef = ref<HTMLElement>()
+const tooltipRef = ref<HTMLElement>()
+const isVisible = ref(false)
+const showTimeout = ref<number>()
+const hideTimeout = ref<number>()
+
+// Computed
+const tooltipId = computed(() => `dm-tooltip-${Math.random().toString(36).substr(2, 9)}`)
+
+const tooltipStyle = ref<Record<string, string>>({})
+
+// Methods
+const calculatePosition = async () => {
+  if (!triggerRef.value || !tooltipRef.value) return
+
+  await nextTick()
+
+  const trigger = triggerRef.value.getBoundingClientRect()
+  const tooltip = tooltipRef.value.getBoundingClientRect()
+  const viewport = {
+    width: window.innerWidth,
+    height: window.innerHeight
+  }
+
+  let top = 0
+  let left = 0
+
+  // Calculate base position
+  switch (props.placement) {
+    case 'top':
+    case 'top-start':
+    case 'top-end':
+      top = trigger.top - tooltip.height - props.offset
+      break
+    case 'bottom':
+    case 'bottom-start':
+    case 'bottom-end':
+      top = trigger.bottom + props.offset
+      break
+    case 'left':
+      top = trigger.top + (trigger.height - tooltip.height) / 2
+      left = trigger.left - tooltip.width - props.offset
+      break
+    case 'right':
+      top = trigger.top + (trigger.height - tooltip.height) / 2
+      left = trigger.right + props.offset
+      break
+  }
+
+  // Calculate horizontal position for top/bottom placements
+  if (props.placement.startsWith('top') || props.placement.startsWith('bottom')) {
+    switch (props.placement) {
+      case 'top':
+      case 'bottom':
+        left = trigger.left + (trigger.width - tooltip.width) / 2
+        break
+      case 'top-start':
+      case 'bottom-start':
+        left = trigger.left
+        break
+      case 'top-end':
+      case 'bottom-end':
+        left = trigger.right - tooltip.width
+        break
+    }
+  }
+
+  // Viewport boundary checks
+  if (left < 0) {
+    left = 8
+  } else if (left + tooltip.width > viewport.width) {
+    left = viewport.width - tooltip.width - 8
+  }
+
+  if (top < 0) {
+    top = 8
+  } else if (top + tooltip.height > viewport.height) {
+    top = viewport.height - tooltip.height - 8
+  }
+
+  tooltipStyle.value = {
+    position: 'fixed',
+    top: `${top}px`,
+    left: `${left}px`,
+    maxWidth: props.maxWidth,
+    zIndex: '9999'
+  }
+}
+
+const show = () => {
+  if (props.disabled || isVisible.value) return
+
+  clearTimeout(hideTimeout.value)
+  
+  showTimeout.value = window.setTimeout(async () => {
+    isVisible.value = true
+    emit('show')
+    await calculatePosition()
+  }, props.delay)
+}
+
+const hide = () => {
+  clearTimeout(showTimeout.value)
+  
+  hideTimeout.value = window.setTimeout(() => {
+    isVisible.value = false
+    emit('hide')
+  }, props.hideDelay)
+}
+
+const handleMouseEnter = () => {
+  if (props.trigger === 'hover') {
+    show()
+  }
+}
+
+const handleMouseLeave = () => {
+  if (props.trigger === 'hover') {
+    hide()
+  }
+}
+
+const handleFocus = () => {
+  if (props.trigger === 'focus') {
+    show()
+  }
+}
+
+const handleBlur = () => {
+  if (props.trigger === 'focus') {
+    hide()
+  }
+}
+
+const handleClick = () => {
+  if (props.trigger === 'click') {
+    if (isVisible.value) {
+      hide()
+    } else {
+      show()
+    }
+  }
+}
+
+const onEnter = () => {
+  calculatePosition()
+}
+
+const onLeave = () => {
+  tooltipStyle.value = {}
+}
+
+// Handle window resize
+const handleResize = () => {
+  if (isVisible.value) {
+    calculatePosition()
+  }
+}
+
+// Handle scroll
+const handleScroll = () => {
+  if (isVisible.value) {
+    calculatePosition()
+  }
+}
+
+// Lifecycle
+onMounted(() => {
+  window.addEventListener('resize', handleResize)
+  window.addEventListener('scroll', handleScroll, true)
+})
+
+onUnmounted(() => {
+  clearTimeout(showTimeout.value)
+  clearTimeout(hideTimeout.value)
+  window.removeEventListener('resize', handleResize)
+  window.removeEventListener('scroll', handleScroll, true)
+})
+
+// Expose methods
+defineExpose({
+  show,
+  hide,
+  isVisible: computed(() => isVisible.value)
+})
+</script>
+
+<style scoped>
+.dm-tooltip-trigger {
+  @apply inline-block;
+}
+
+.dm-tooltip {
+  @apply absolute z-50 px-2 py-1 text-sm rounded shadow-lg pointer-events-none;
+  border-radius: var(--dm-radius);
+  font-size: var(--dm-text-sm);
+}
+
+/* Variants */
+.dm-tooltip--dark {
+  @apply bg-gray-900 text-white;
+  background-color: var(--dm-gray-900);
+  color: var(--dm-bg-primary, #ffffff);
+}
+
+.dm-tooltip--light {
+  @apply bg-white text-gray-900 border border-gray-200;
+  background-color: var(--dm-bg-primary, #ffffff);
+  color: var(--dm-text-primary);
+  border-color: var(--dm-gray-200, #e5e7eb);
+}
+
+.dm-tooltip--primary {
+  @apply text-white;
+  background: var(--gradient-primary);
+  color: var(--dm-bg-primary, #ffffff);
+}
+
+.dm-tooltip--error {
+  @apply text-white;
+  background-color: var(--dm-error);
+  color: var(--dm-bg-primary, #ffffff);
+}
+
+.dm-tooltip--warning {
+  @apply text-white;
+  background-color: var(--dm-warning);
+  color: var(--dm-bg-primary, #ffffff);
+}
+
+.dm-tooltip--success {
+  @apply text-white;
+  background-color: var(--dm-success);
+  color: var(--dm-bg-primary, #ffffff);
+}
+
+/* Dark mode adjustments */
+[data-theme="dark"] .dm-tooltip--dark {
+  background-color: var(--dm-gray-800, #1f2937);
+  color: var(--dm-text-primary);
+}
+
+[data-theme="dark"] .dm-tooltip--light {
+  background-color: var(--dm-bg-secondary);
+  color: var(--dm-text-primary);
+  border-color: var(--dm-gray-600, #4b5563);
+}
+
+.dm-tooltip__content {
+  @apply relative z-10;
+}
+
+/* Arrow styles */
+.dm-tooltip--arrow .dm-tooltip__arrow {
+  @apply absolute w-2 h-2 transform rotate-45;
+}
+
+.dm-tooltip--top .dm-tooltip__arrow {
+  @apply bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2;
+}
+
+.dm-tooltip--bottom .dm-tooltip__arrow {
+  @apply top-0 left-1/2 -translate-x-1/2 -translate-y-1/2;
+}
+
+.dm-tooltip--left .dm-tooltip__arrow {
+  @apply right-0 top-1/2 translate-x-1/2 -translate-y-1/2;
+}
+
+.dm-tooltip--right .dm-tooltip__arrow {
+  @apply left-0 top-1/2 -translate-x-1/2 -translate-y-1/2;
+}
+
+/* Arrow colors */
+.dm-tooltip--dark .dm-tooltip__arrow {
+  background-color: var(--dm-gray-900);
+}
+
+.dm-tooltip--light .dm-tooltip__arrow {
+  background-color: var(--dm-bg-primary, #ffffff);
+  border: 1px solid var(--dm-gray-200, #e5e7eb);
+}
+
+.dm-tooltip--primary .dm-tooltip__arrow {
+  background-color: var(--dm-primary);
+}
+
+.dm-tooltip--error .dm-tooltip__arrow {
+  background-color: var(--dm-error);
+}
+
+.dm-tooltip--warning .dm-tooltip__arrow {
+  background-color: var(--dm-warning);
+}
+
+.dm-tooltip--success .dm-tooltip__arrow {
+  background-color: var(--dm-success);
+}
+
+/* Transitions */
+.tooltip-enter-active,
+.tooltip-leave-active {
+  transition: opacity var(--transition-fast), transform var(--transition-fast);
+}
+
+.tooltip-enter-from,
+.tooltip-leave-to {
+  opacity: 0;
+  transform: scale(0.95);
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+  .tooltip-enter-active,
+  .tooltip-leave-active {
+    transition: none;
+  }
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: high) {
+  .dm-tooltip {
+    @apply border-2 border-current;
+  }
+}
+</style>