@datametria/vue-components 1.2.0 → 2.1.0

package/src/components/DatametriaToast.vue

@@ -1,176 +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' | '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>
+<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-spacing-4, 1rem);
+  right: var(--dm-spacing-4, 1rem);
+  min-width: 300px;
+  max-width: 500px;
+  padding: var(--dm-spacing-4, 1rem);
+  border-radius: var(--dm-radius-md, 0.375rem);
+  box-shadow: var(--dm-shadow-lg, 0 4px 12px rgba(0, 0, 0, 0.15));
+  z-index: 9999;
+}
+
+.dm-toast--success {
+  background: var(--dm-success, #10b981);
+  color: white;
+}
+
+.dm-toast--error {
+  background: var(--dm-error, #ef4444);
+  color: white;
+}
+
+.dm-toast--warning {
+  background: var(--dm-warning, #f59e0b);
+  color: var(--dm-neutral-900, #111827);
+}
+
+.dm-toast--primary {
+  background: var(--dm-primary, #0072CE);
+  color: white;
+}
+
+.dm-toast--info {
+  background: var(--dm-neutral-600, #4b5563);
+  color: white;
+}
+
+.dm-toast__content {
+  display: flex;
+  align-items: center;
+  gap: var(--dm-spacing-3, 0.75rem);
+}
+
+.dm-toast__message {
+  flex: 1;
+  font-size: var(--dm-font-size-sm, 0.875rem);
+  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: all 0.2s;
+}
+
+.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-spacing-4, 1rem);
+    right: var(--dm-spacing-4, 1rem);
+    min-width: auto;
+  }
+}
+</style>