@datametria/vue-components 1.2.0 → 2.0.1

package/src/components/DatametriaAlert.vue

@@ -1,137 +1,137 @@
-<template>
-  <div v-if="modelValue" :class="alertClasses">
-    <div class="datametria-alert__icon">
-      <span v-if="variant === 'success'">✓</span>
-      <span v-else-if="variant === 'error'">✕</span>
-      <span v-else-if="variant === 'warning'">⚠</span>
-      <span v-else>ℹ</span>
-    </div>
-    
-    <div class="datametria-alert__content">
-      <h4 v-if="title" class="datametria-alert__title">{{ title }}</h4>
-      <p class="datametria-alert__message">
-        <slot>{{ message }}</slot>
-      </p>
-    </div>
-    
-    <button
-      v-if="closable"
-      class="datametria-alert__close"
-      @click="$emit('update:modelValue', false)"
-    >
-      ×
-    </button>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-
-type AlertVariant = 'success' | 'error' | 'warning' | 'info' | 'primary'
-
-interface Props {
-  modelValue?: boolean
-  variant?: AlertVariant
-  title?: string
-  message?: string
-  closable?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  modelValue: true,
-  variant: 'info',
-  closable: true
-})
-
-// Validação em desenvolvimento
-if (process.env.NODE_ENV === 'development') {
-  const validVariants: AlertVariant[] = ['success', 'error', 'warning', 'info', 'primary']
-  if (!validVariants.includes(props.variant)) {
-    console.warn(`[DatametriaAlert] Invalid variant "${props.variant}". Valid options: ${validVariants.join(', ')}`)
-  }
-}
-
-defineEmits<{
-  'update:modelValue': [value: boolean]
-}>()
-
-const alertClasses = computed(() => [
-  'datametria-alert',
-  `datametria-alert--${props.variant}`
-])
-</script>
-
-<style scoped>
-.datametria-alert {
-  display: flex;
-  gap: 0.75rem;
-  padding: 1rem;
-  border-radius: 0.5rem;
-  border-left: 4px solid;
-}
-
-.datametria-alert--success {
-  background: #f0fdf4;
-  border-color: #10b981;
-  color: #065f46;
-}
-
-.datametria-alert--error {
-  background: #fef2f2;
-  border-color: #ef4444;
-  color: #991b1b;
-}
-
-.datametria-alert--warning {
-  background: #fffbeb;
-  border-color: #f59e0b;
-  color: #92400e;
-}
-
-.datametria-alert--primary {
-  background: #eff6ff;
-  border-color: #0072CE;
-  color: #1e3a8a;
-}
-
-.datametria-alert--info {
-  background: #f9fafb;
-  border-color: #6b7280;
-  color: #374151;
-}
-
-.datametria-alert__icon {
-  font-size: 1.25rem;
-  font-weight: bold;
-}
-
-.datametria-alert__content {
-  flex: 1;
-}
-
-.datametria-alert__title {
-  margin: 0 0 0.25rem 0;
-  font-size: 0.875rem;
-  font-weight: 600;
-}
-
-.datametria-alert__message {
-  margin: 0;
-  font-size: 0.875rem;
-}
-
-.datametria-alert__close {
-  background: none;
-  border: none;
-  font-size: 1.5rem;
-  line-height: 1;
-  cursor: pointer;
-  padding: 0;
-  opacity: 0.5;
-  transition: opacity 0.2s;
-}
-
-.datametria-alert__close:hover {
-  opacity: 1;
-}
-</style>
+<template>
+  <div v-if="modelValue" :class="alertClasses">
+    <div class="datametria-alert__icon">
+      <span v-if="variant === 'success'">✓</span>
+      <span v-else-if="variant === 'error'">✕</span>
+      <span v-else-if="variant === 'warning'">⚠</span>
+      <span v-else>ℹ</span>
+    </div>
+    
+    <div class="datametria-alert__content">
+      <h4 v-if="title" class="datametria-alert__title">{{ title }}</h4>
+      <p class="datametria-alert__message">
+        <slot>{{ message }}</slot>
+      </p>
+    </div>
+    
+    <button
+      v-if="closable"
+      class="datametria-alert__close"
+      @click="$emit('update:modelValue', false)"
+    >
+      ×
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+type AlertVariant = 'success' | 'error' | 'warning' | 'info' | 'primary'
+
+interface Props {
+  modelValue?: boolean
+  variant?: AlertVariant
+  title?: string
+  message?: string
+  closable?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: true,
+  variant: 'info',
+  closable: true
+})
+
+// Validação em desenvolvimento
+if (process.env.NODE_ENV === 'development') {
+  const validVariants: AlertVariant[] = ['success', 'error', 'warning', 'info', 'primary']
+  if (!validVariants.includes(props.variant)) {
+    console.warn(`[DatametriaAlert] Invalid variant "${props.variant}". Valid options: ${validVariants.join(', ')}`)
+  }
+}
+
+defineEmits<{
+  'update:modelValue': [value: boolean]
+}>()
+
+const alertClasses = computed(() => [
+  'datametria-alert',
+  `datametria-alert--${props.variant}`
+])
+</script>
+
+<style scoped>
+.datametria-alert {
+  display: flex;
+  gap: var(--dm-spacing-3, 0.75rem);
+  padding: var(--dm-spacing-4, 1rem);
+  border-radius: var(--dm-radius-lg, 0.5rem);
+  border-left: 4px solid;
+}
+
+.datametria-alert--success {
+  background: color-mix(in srgb, var(--dm-success, #10b981) 10%, transparent);
+  border-color: var(--dm-success, #10b981);
+  color: color-mix(in srgb, var(--dm-success, #10b981) 80%, black);
+}
+
+.datametria-alert--error {
+  background: color-mix(in srgb, var(--dm-error, #ef4444) 10%, transparent);
+  border-color: var(--dm-error, #ef4444);
+  color: color-mix(in srgb, var(--dm-error, #ef4444) 80%, black);
+}
+
+.datametria-alert--warning {
+  background: color-mix(in srgb, var(--dm-warning, #f59e0b) 10%, transparent);
+  border-color: var(--dm-warning, #f59e0b);
+  color: color-mix(in srgb, var(--dm-warning, #f59e0b) 80%, black);
+}
+
+.datametria-alert--primary {
+  background: color-mix(in srgb, var(--dm-primary, #0072CE) 10%, transparent);
+  border-color: var(--dm-primary, #0072CE);
+  color: color-mix(in srgb, var(--dm-primary, #0072CE) 80%, black);
+}
+
+.datametria-alert--info {
+  background: var(--dm-neutral-50, #f9fafb);
+  border-color: var(--dm-neutral-500, #6b7280);
+  color: var(--dm-neutral-700, #374151);
+}
+
+.datametria-alert__icon {
+  font-size: var(--dm-font-size-xl, 1.25rem);
+  font-weight: var(--dm-font-weight-bold, 700);
+}
+
+.datametria-alert__content {
+  flex: 1;
+}
+
+.datametria-alert__title {
+  margin: 0 0 var(--dm-spacing-1, 0.25rem) 0;
+  font-size: var(--dm-font-size-sm, 0.875rem);
+  font-weight: var(--dm-font-weight-semibold, 600);
+}
+
+.datametria-alert__message {
+  margin: 0;
+  font-size: var(--dm-font-size-sm, 0.875rem);
+}
+
+.datametria-alert__close {
+  background: none;
+  border: none;
+  font-size: var(--dm-font-size-2xl, 1.5rem);
+  line-height: 1;
+  cursor: pointer;
+  padding: 0;
+  opacity: 0.5;
+  transition: opacity var(--dm-transition-base, 0.2s);
+}
+
+.datametria-alert__close:hover {
+  opacity: 1;
+}
+</style>