@datametria/vue-components 2.3.0 → 2.4.0

package/src/components/DatametriaModal.vue

@@ -1,135 +1,153 @@
-<template>
-  <Teleport to="body">
-    <Transition name="modal">
-      <div v-if="modelValue" class="datametria-modal" @click.self="handleClose">
-        <div class="datametria-modal__content" :style="{ maxWidth: size }">
-          <div v-if="title || $slots.header" class="datametria-modal__header">
-            <slot name="header">
-              <h3 class="datametria-modal__title">{{ title }}</h3>
-            </slot>
-            <button
-              v-if="closable"
-              class="datametria-modal__close"
-              @click="handleClose"
-            >
-              ×
-            </button>
-          </div>
-          
-          <div class="datametria-modal__body">
-            <slot />
-          </div>
-          
-          <div v-if="$slots.footer" class="datametria-modal__footer">
-            <slot name="footer" />
-          </div>
-        </div>
-      </div>
-    </Transition>
-  </Teleport>
-</template>
+<template>
+  <Teleport to="body">
+    <Transition name="modal">
+      <div v-if="modelValue" class="datametria-modal" @click.self="handleClose">
+        <div class="datametria-modal__content" :style="{ maxWidth: size }">
+          <div v-if="title || $slots.header" class="datametria-modal__header">
+            <slot name="header">
+              <h3 class="datametria-modal__title">{{ title }}</h3>
+            </slot>
+            <button
+              v-if="closable"
+              class="datametria-modal__close"
+              @click="handleClose"
+            >
+              ×
+            </button>
+          </div>
+          
+          <div class="datametria-modal__body">
+            <slot />
+          </div>
+          
+          <div v-if="$slots.footer" class="datametria-modal__footer">
+            <slot name="footer" />
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  modelValue: boolean
+  title?: string
+  size?: string
+  closable?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: '32rem',
+  closable: true
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+  close: []
+}>()
+
+const handleClose = () => {
+  if (props.closable) {
+    emit('update:modelValue', false)
+    emit('close')
+  }
+}
+</script>
+
+<style scoped>
+.datametria-modal {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  padding: var(--dm-spacing-4, 1rem);
+}
+
+.datametria-modal__content {
+  background: white;
+  border-radius: var(--dm-radius-lg, 0.5rem);
+  box-shadow: var(--dm-shadow-xl, 0 20px 25px -5px rgba(0, 0, 0, 0.1));
+  width: 100%;
+  max-height: 90vh;
+  overflow: auto;
+}
+
+.datametria-modal__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--dm-spacing-6, 1.5rem);
+  border-bottom: 1px solid var(--dm-neutral-200, #e5e7eb);
+}
+
+.datametria-modal__title {
+  margin: 0;
+  font-size: var(--dm-font-size-xl, 1.25rem);
+  font-weight: var(--dm-font-weight-semibold, 600);
+  color: var(--dm-neutral-900, #111827);
+}
+
+.datametria-modal__close {
+  background: none;
+  border: none;
+  font-size: 2rem;
+  line-height: 1;
+  cursor: pointer;
+  color: var(--dm-neutral-500, #6b7280);
+  padding: 0;
+  width: 2rem;
+  height: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--dm-radius-sm, 0.25rem);
+  transition: all 0.2s;
+}
+
+.datametria-modal__close:hover {
+  background: var(--dm-neutral-100, #f3f4f6);
+  color: var(--dm-neutral-900, #111827);
+}
+
+.datametria-modal__body {
+  padding: var(--dm-spacing-6, 1.5rem);
+}
+
+.datametria-modal__footer {
+  padding: var(--dm-spacing-6, 1.5rem);
+  border-top: 1px solid var(--dm-neutral-200, #e5e7eb);
+  background: var(--dm-neutral-50, #f9fafb);
+}
+
+.modal-enter-active,
+.modal-leave-active {
+  transition: opacity 0.3s;
+}
+
+.modal-enter-from,
+.modal-leave-to {
+  opacity: 0;
+}
 
-<script setup lang="ts">
-interface Props {
-  modelValue: boolean
-  title?: string
-  size?: string
-  closable?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  size: '32rem',
-  closable: true
-})
-
-const emit = defineEmits<{
-  'update:modelValue': [value: boolean]
-  close: []
-}>()
+/* Dark Mode Support - Hybrid Approach */
 
-const handleClose = () => {
-  if (props.closable) {
-    emit('update:modelValue', false)
-    emit('close')
+/* Fallback automático (sem JS) */
+@media (prefers-color-scheme: dark) {
+  .datametria-modal {
+    background: var(--dm-bg-color-dark, #1e1e1e);
+    color: var(--dm-text-primary-dark, #e0e0e0);
+    border-color: var(--dm-border-color-dark, #404040);
   }
 }
-</script>
-
-<style scoped>
-.datametria-modal {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.5);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-  padding: var(--dm-spacing-4, 1rem);
-}
-
-.datametria-modal__content {
-  background: white;
-  border-radius: var(--dm-radius-lg, 0.5rem);
-  box-shadow: var(--dm-shadow-xl, 0 20px 25px -5px rgba(0, 0, 0, 0.1));
-  width: 100%;
-  max-height: 90vh;
-  overflow: auto;
-}
-
-.datametria-modal__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--dm-spacing-6, 1.5rem);
-  border-bottom: 1px solid var(--dm-neutral-200, #e5e7eb);
-}
-
-.datametria-modal__title {
-  margin: 0;
-  font-size: var(--dm-font-size-xl, 1.25rem);
-  font-weight: var(--dm-font-weight-semibold, 600);
-  color: var(--dm-neutral-900, #111827);
-}
-
-.datametria-modal__close {
-  background: none;
-  border: none;
-  font-size: 2rem;
-  line-height: 1;
-  cursor: pointer;
-  color: var(--dm-neutral-500, #6b7280);
-  padding: 0;
-  width: 2rem;
-  height: 2rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--dm-radius-sm, 0.25rem);
-  transition: all 0.2s;
-}
-
-.datametria-modal__close:hover {
-  background: var(--dm-neutral-100, #f3f4f6);
-  color: var(--dm-neutral-900, #111827);
-}
-
-.datametria-modal__body {
-  padding: var(--dm-spacing-6, 1.5rem);
-}
-
-.datametria-modal__footer {
-  padding: var(--dm-spacing-6, 1.5rem);
-  border-top: 1px solid var(--dm-neutral-200, #e5e7eb);
-  background: var(--dm-neutral-50, #f9fafb);
-}
-
-.modal-enter-active,
-.modal-leave-active {
-  transition: opacity 0.3s;
-}
 
-.modal-enter-from,
-.modal-leave-to {
-  opacity: 0;
+/* Controle manual via useTheme() */
+[data-theme="dark"] .datametria-modal {
+  background: var(--dm-bg-color-dark, #1e1e1e);
+  color: var(--dm-text-primary-dark, #e0e0e0);
+  border-color: var(--dm-border-color-dark, #404040);
 }
-</style>
+</style>