@datametria/vue-components 1.2.0 → 2.0.1

package/src/components/DatametriaTimePicker.vue

@@ -1,286 +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;
-  }
-}
+<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>