@datametria/vue-components 1.1.2 → 1.2.0

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/DatametriaToast.vue

@@ -1,163 +1,176 @@
-<template>
-  <Teleport to="body">
-    <Transition name="dm-toast">
-      <div
-        v-if="isVisible"
-        class="dm-toast"
-        :class="`dm-toast--${variant}`"
-        role="alert"
-        :aria-live="variant === 'error' ? 'assertive' : 'polite'"
-      >
-        <div class="dm-toast__content">
-          <span class="dm-toast__message">{{ message }}</span>
-          <button
-            v-if="closable"
-            class="dm-toast__close"
-            @click="close"
-            aria-label="Fechar"
-          >×</button>
-        </div>
-      </div>
-    </Transition>
-  </Teleport>
-</template>
-
-<script setup lang="ts">
-import { ref, watch, onMounted } from 'vue'
-
-interface Props {
-  message: string
-  variant?: 'success' | 'error' | 'warning' | 'info'
-  duration?: number
-  closable?: boolean
-  modelValue?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  variant: 'info',
-  duration: 3000,
-  closable: true,
-  modelValue: false
-})
-
-const emit = defineEmits<{
-  'update:modelValue': [value: boolean]
-  close: []
-}>()
-
-const isVisible = ref(props.modelValue)
-let timer: ReturnType<typeof setTimeout> | null = null
-
-watch(() => props.modelValue, (newValue) => {
-  isVisible.value = newValue
-  if (newValue && props.duration > 0) {
-    startTimer()
-  }
-})
-
-const startTimer = () => {
-  if (timer) clearTimeout(timer)
-  timer = setTimeout(() => {
-    close()
-  }, props.duration)
-}
-
-const close = () => {
-  isVisible.value = false
-  emit('update:modelValue', false)
-  emit('close')
-  if (timer) clearTimeout(timer)
-}
-
-onMounted(() => {
-  if (isVisible.value && props.duration > 0) {
-    startTimer()
-  }
-})
-</script>
-
-<style scoped>
-.dm-toast {
-  position: fixed;
-  top: var(--dm-space-4);
-  right: var(--dm-space-4);
-  min-width: 300px;
-  max-width: 500px;
-  padding: var(--dm-space-4);
-  border-radius: var(--dm-radius);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  z-index: 9999;
-}
-
-.dm-toast--success {
-  background: var(--dm-success);
-  color: var(--dm-white);
-}
-
-.dm-toast--error {
-  background: var(--dm-error);
-  color: var(--dm-white);
-}
-
-.dm-toast--warning {
-  background: var(--dm-warning);
-  color: var(--dm-gray-900);
-}
-
-.dm-toast--info {
-  background: var(--dm-primary);
-  color: var(--dm-white);
-}
-
-.dm-toast__content {
-  display: flex;
-  align-items: center;
-  gap: var(--dm-space-3);
-}
-
-.dm-toast__message {
-  flex: 1;
-  font-size: var(--dm-text-sm);
-  line-height: 1.5;
-}
-
-.dm-toast__close {
-  width: 24px;
-  height: 24px;
-  border: none;
-  background: transparent;
-  color: inherit;
-  font-size: 24px;
-  line-height: 1;
-  cursor: pointer;
-  opacity: 0.8;
-  transition: var(--dm-transition);
-}
-
-.dm-toast__close:hover {
-  opacity: 1;
-}
-
-.dm-toast-enter-active,
-.dm-toast-leave-active {
-  transition: all 0.3s ease;
-}
-
-.dm-toast-enter-from {
-  opacity: 0;
-  transform: translateX(100%);
-}
-
-.dm-toast-leave-to {
-  opacity: 0;
-  transform: translateY(-20px);
-}
-
-@media (max-width: 640px) {
-  .dm-toast {
-    left: var(--dm-space-4);
-    right: var(--dm-space-4);
-    min-width: auto;
-  }
-}
-</style>
+<template>
+  <Teleport to="body">
+    <Transition name="dm-toast">
+      <div
+        v-if="isVisible"
+        class="dm-toast"
+        :class="`dm-toast--${variant}`"
+        role="alert"
+        :aria-live="variant === 'error' ? 'assertive' : 'polite'"
+      >
+        <div class="dm-toast__content">
+          <span class="dm-toast__message">{{ message }}</span>
+          <button
+            v-if="closable"
+            class="dm-toast__close"
+            @click="close"
+            aria-label="Fechar"
+          >×</button>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, onMounted } from 'vue'
+
+interface Props {
+  message: string
+  variant?: 'success' | 'error' | 'warning' | 'info' | 'primary'
+  duration?: number
+  closable?: boolean
+  modelValue?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'info',
+  duration: 3000,
+  closable: true,
+  modelValue: false
+})
+
+// Validação em desenvolvimento
+if (process.env.NODE_ENV === 'development') {
+  const validVariants = ['success', 'error', 'warning', 'info', 'primary']
+  if (!validVariants.includes(props.variant)) {
+    console.warn(`[DatametriaToast] Invalid variant "${props.variant}". Valid options: ${validVariants.join(', ')}`)
+  }
+}
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+  close: []
+}>()
+
+const isVisible = ref(props.modelValue)
+let timer: ReturnType<typeof setTimeout> | null = null
+
+watch(() => props.modelValue, (newValue) => {
+  isVisible.value = newValue
+  if (newValue && props.duration > 0) {
+    startTimer()
+  }
+})
+
+const startTimer = () => {
+  if (timer) clearTimeout(timer)
+  timer = setTimeout(() => {
+    close()
+  }, props.duration)
+}
+
+const close = () => {
+  isVisible.value = false
+  emit('update:modelValue', false)
+  emit('close')
+  if (timer) clearTimeout(timer)
+}
+
+onMounted(() => {
+  if (isVisible.value && props.duration > 0) {
+    startTimer()
+  }
+})
+</script>
+
+<style scoped>
+.dm-toast {
+  position: fixed;
+  top: var(--dm-space-4);
+  right: var(--dm-space-4);
+  min-width: 300px;
+  max-width: 500px;
+  padding: var(--dm-space-4);
+  border-radius: var(--dm-radius);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  z-index: 9999;
+}
+
+.dm-toast--success {
+  background: var(--dm-success);
+  color: var(--dm-white);
+}
+
+.dm-toast--error {
+  background: var(--dm-error);
+  color: var(--dm-white);
+}
+
+.dm-toast--warning {
+  background: var(--dm-warning);
+  color: var(--dm-gray-900);
+}
+
+.dm-toast--primary {
+  background: var(--dm-primary);
+  color: var(--dm-white);
+}
+
+.dm-toast--info {
+  background: var(--dm-gray-600);
+  color: var(--dm-white);
+}
+
+.dm-toast__content {
+  display: flex;
+  align-items: center;
+  gap: var(--dm-space-3);
+}
+
+.dm-toast__message {
+  flex: 1;
+  font-size: var(--dm-text-sm);
+  line-height: 1.5;
+}
+
+.dm-toast__close {
+  width: 24px;
+  height: 24px;
+  border: none;
+  background: transparent;
+  color: inherit;
+  font-size: 24px;
+  line-height: 1;
+  cursor: pointer;
+  opacity: 0.8;
+  transition: var(--dm-transition);
+}
+
+.dm-toast__close:hover {
+  opacity: 1;
+}
+
+.dm-toast-enter-active,
+.dm-toast-leave-active {
+  transition: all 0.3s ease;
+}
+
+.dm-toast-enter-from {
+  opacity: 0;
+  transform: translateX(100%);
+}
+
+.dm-toast-leave-to {
+  opacity: 0;
+  transform: translateY(-20px);
+}
+
+@media (max-width: 640px) {
+  .dm-toast {
+    left: var(--dm-space-4);
+    right: var(--dm-space-4);
+    min-width: auto;
+  }
+}
+</style>