@datametria/vue-components 2.3.0 → 2.4.0

package/src/components/DatametriaDialog.vue

@@ -1,295 +1,299 @@
-<template>
-  <Teleport to="body">
-    <Transition name="dialog-fade">
-      <div
-        v-if="modelValue"
-        class="datametria-dialog-overlay"
-        :class="{ 'datametria-dialog-overlay--modal': modal }"
-        @click="handleOverlayClick"
-      >
-        <div
-          class="datametria-dialog"
-          :class="dialogClasses"
-          :style="dialogStyles"
-          role="dialog"
-          aria-modal="true"
-          :aria-labelledby="titleId"
-          @click.stop
-        >
-          <!-- Header -->
-          <div v-if="$slots.header || title" class="datametria-dialog__header">
-            <slot name="header">
-              <h3 :id="titleId" class="datametria-dialog__title">{{ title }}</h3>
-            </slot>
-            <button
-              v-if="showClose"
-              class="datametria-dialog__close"
-              aria-label="Fechar"
-              @click="handleClose"
-            >
-              ×
-            </button>
-          </div>
-
-          <!-- Body -->
-          <div class="datametria-dialog__body">
-            <slot />
-          </div>
-
-          <!-- Footer -->
-          <div v-if="$slots.footer" class="datametria-dialog__footer">
-            <slot name="footer" />
-          </div>
-        </div>
-      </div>
-    </Transition>
-  </Teleport>
-</template>
-
-<script setup lang="ts">
-import { computed, watch, onMounted, onUnmounted } from 'vue'
-
-/**
- * DatametriaDialog - Modal/Dialog reutilizável com slots customizáveis
- * 
- * @component
- * @example
- * <DatametriaDialog v-model="visible" title="Título">
- *   Conteúdo do dialog
- * </DatametriaDialog>
- */
-
-interface Props {
-  /** Controla visibilidade do dialog */
-  modelValue: boolean
-  /** Título do dialog */
-  title?: string
-  /** Largura do dialog (px, %, vw) */
-  width?: string | number
-  /** Dialog em tela cheia */
-  fullscreen?: boolean
-  /** Exibir overlay modal */
-  modal?: boolean
-  /** Fechar ao clicar no overlay */
-  closeOnClickModal?: boolean
-  /** Fechar ao pressionar ESC */
-  closeOnPressEscape?: boolean
-  /** Exibir botão de fechar */
-  showClose?: boolean
-  /** Centralizar conteúdo */
-  center?: boolean
-  /** Callback antes de fechar */
-  beforeClose?: (done: () => void) => void
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  title: '',
-  width: '50%',
-  fullscreen: false,
-  modal: true,
-  closeOnClickModal: true,
-  closeOnPressEscape: true,
-  showClose: true,
-  center: false
-})
-
-const emit = defineEmits<{
-  'update:modelValue': [value: boolean]
-  'open': []
-  'opened': []
-  'close': []
-  'closed': []
-}>()
-
-const titleId = `dialog-title-${Math.random().toString(36).substr(2, 9)}`
-
-const dialogClasses = computed(() => ({
-  'datametria-dialog--fullscreen': props.fullscreen,
-  'datametria-dialog--center': props.center
-}))
-
-const dialogStyles = computed(() => {
-  if (props.fullscreen) return {}
-  return {
-    width: typeof props.width === 'number' ? `${props.width}px` : props.width
+<template>
+  <Teleport to="body">
+    <Transition name="dialog-fade">
+      <div
+        v-if="modelValue"
+        class="datametria-dialog-overlay"
+        :class="{ 'datametria-dialog-overlay--modal': modal }"
+        @click="handleOverlayClick"
+      >
+        <div
+          class="datametria-dialog"
+          :class="dialogClasses"
+          :style="dialogStyles"
+          role="dialog"
+          aria-modal="true"
+          :aria-labelledby="titleId"
+          @click.stop
+        >
+          <!-- Header -->
+          <div v-if="$slots.header || title" class="datametria-dialog__header">
+            <slot name="header">
+              <h3 :id="titleId" class="datametria-dialog__title">{{ title }}</h3>
+            </slot>
+            <button
+              v-if="showClose"
+              class="datametria-dialog__close"
+              aria-label="Fechar"
+              @click="handleClose"
+            >
+              ×
+            </button>
+          </div>
+
+          <!-- Body -->
+          <div class="datametria-dialog__body">
+            <slot />
+          </div>
+
+          <!-- Footer -->
+          <div v-if="$slots.footer" class="datametria-dialog__footer">
+            <slot name="footer" />
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { computed, watch, onMounted, onUnmounted } from 'vue'
+
+/**
+ * DatametriaDialog - Modal/Dialog reutilizável com slots customizáveis
+ * 
+ * @component
+ * @example
+ * <DatametriaDialog v-model="visible" title="Título">
+ *   Conteúdo do dialog
+ * </DatametriaDialog>
+ */
+
+interface Props {
+  /** Controla visibilidade do dialog */
+  modelValue: boolean
+  /** Título do dialog */
+  title?: string
+  /** Largura do dialog (px, %, vw) */
+  width?: string | number
+  /** Dialog em tela cheia */
+  fullscreen?: boolean
+  /** Exibir overlay modal */
+  modal?: boolean
+  /** Fechar ao clicar no overlay */
+  closeOnClickModal?: boolean
+  /** Fechar ao pressionar ESC */
+  closeOnPressEscape?: boolean
+  /** Exibir botão de fechar */
+  showClose?: boolean
+  /** Centralizar conteúdo */
+  center?: boolean
+  /** Callback antes de fechar */
+  beforeClose?: (done: () => void) => void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: '',
+  width: '50%',
+  fullscreen: false,
+  modal: true,
+  closeOnClickModal: true,
+  closeOnPressEscape: true,
+  showClose: true,
+  center: false
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+  'open': []
+  'opened': []
+  'close': []
+  'closed': []
+}>()
+
+const titleId = `dialog-title-${Math.random().toString(36).substr(2, 9)}`
+
+const dialogClasses = computed(() => ({
+  'datametria-dialog--fullscreen': props.fullscreen,
+  'datametria-dialog--center': props.center
+}))
+
+const dialogStyles = computed(() => {
+  if (props.fullscreen) return {}
+  return {
+    width: typeof props.width === 'number' ? `${props.width}px` : props.width
+  }
+})
+
+const handleClose = () => {
+  if (props.beforeClose) {
+    props.beforeClose(() => {
+      emit('update:modelValue', false)
+      emit('close')
+    })
+  } else {
+    emit('update:modelValue', false)
+    emit('close')
+  }
+}
+
+const handleOverlayClick = () => {
+  if (props.closeOnClickModal) {
+    handleClose()
+  }
+}
+
+const handleEscape = (e: KeyboardEvent) => {
+  if (e.key === 'Escape' && props.closeOnPressEscape && props.modelValue) {
+    handleClose()
+  }
+}
+
+watch(() => props.modelValue, (newVal) => {
+  if (newVal) {
+    emit('open')
+    document.body.style.overflow = 'hidden'
+    setTimeout(() => emit('opened'), 300)
+  } else {
+    document.body.style.overflow = ''
+    setTimeout(() => emit('closed'), 300)
+  }
+})
+
+onMounted(() => {
+  document.addEventListener('keydown', handleEscape)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('keydown', handleEscape)
+  document.body.style.overflow = ''
+})
+</script>
+
+<style scoped>
+.datametria-dialog-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 2000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+}
+
+.datametria-dialog-overlay--modal {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.datametria-dialog {
+  position: relative;
+  background: var(--color-background, #ffffff);
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  max-width: 90vw;
+  max-height: 90vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.datametria-dialog--fullscreen {
+  width: 100vw !important;
+  height: 100vh !important;
+  max-width: 100vw;
+  max-height: 100vh;
+  border-radius: 0;
+}
+
+.datametria-dialog__header {
+  padding: 20px;
+  border-bottom: 1px solid var(--color-border, #e5e7eb);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.datametria-dialog__title {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--color-text-primary, #1f2937);
+}
+
+.datametria-dialog__close {
+  background: none;
+  border: none;
+  font-size: 28px;
+  line-height: 1;
+  color: var(--color-text-secondary, #6b7280);
+  cursor: pointer;
+  padding: 0;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  transition: all 0.2s;
+}
+
+.datametria-dialog__close:hover {
+  background-color: var(--color-background-hover, #f3f4f6);
+  color: var(--color-text-primary, #1f2937);
+}
+
+.datametria-dialog__body {
+  padding: 20px;
+  flex: 1;
+  overflow-y: auto;
+}
+
+.datametria-dialog--center .datametria-dialog__body {
+  text-align: center;
+}
+
+.datametria-dialog__footer {
+  padding: 20px;
+  border-top: 1px solid var(--color-border, #e5e7eb);
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+}
+
+/* Transitions */
+.dialog-fade-enter-active,
+.dialog-fade-leave-active {
+  transition: opacity 0.3s;
+}
+
+.dialog-fade-enter-from,
+.dialog-fade-leave-to {
+  opacity: 0;
+}
+
+.dialog-fade-enter-active .datametria-dialog,
+.dialog-fade-leave-active .datametria-dialog {
+  transition: transform 0.3s;
+}
+
+.dialog-fade-enter-from .datametria-dialog {
+  transform: scale(0.9);
+}
+
+.dialog-fade-leave-to .datametria-dialog {
+  transform: scale(0.9);
+}
+
+/* Dark mode support */
+@media (prefers-color-scheme: dark) {
+  .datametria-dialog {
+    background: var(--color-background, #1f2937);
   }
-})
-
-const handleClose = () => {
-  if (props.beforeClose) {
-    props.beforeClose(() => {
-      emit('update:modelValue', false)
-      emit('close')
-    })
-  } else {
-    emit('update:modelValue', false)
-    emit('close')
-  }
-}
-
-const handleOverlayClick = () => {
-  if (props.closeOnClickModal) {
-    handleClose()
-  }
-}
-
-const handleEscape = (e: KeyboardEvent) => {
-  if (e.key === 'Escape' && props.closeOnPressEscape && props.modelValue) {
-    handleClose()
-  }
-}
-
-watch(() => props.modelValue, (newVal) => {
-  if (newVal) {
-    emit('open')
-    document.body.style.overflow = 'hidden'
-    setTimeout(() => emit('opened'), 300)
-  } else {
-    document.body.style.overflow = ''
-    setTimeout(() => emit('closed'), 300)
-  }
-})
-
-onMounted(() => {
-  document.addEventListener('keydown', handleEscape)
-})
-
-onUnmounted(() => {
-  document.removeEventListener('keydown', handleEscape)
-  document.body.style.overflow = ''
-})
-</script>
-
-<style scoped>
-.datametria-dialog-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 2000;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 20px;
-}
 
-.datametria-dialog-overlay--modal {
-  background-color: rgba(0, 0, 0, 0.5);
-}
-
-.datametria-dialog {
-  position: relative;
-  background: var(--color-background, #ffffff);
-  border-radius: 8px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  max-width: 90vw;
-  max-height: 90vh;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-.datametria-dialog--fullscreen {
-  width: 100vw !important;
-  height: 100vh !important;
-  max-width: 100vw;
-  max-height: 100vh;
-  border-radius: 0;
-}
-
-.datametria-dialog__header {
-  padding: 20px;
-  border-bottom: 1px solid var(--color-border, #e5e7eb);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.datametria-dialog__title {
-  margin: 0;
-  font-size: 18px;
-  font-weight: 600;
-  color: var(--color-text-primary, #1f2937);
-}
-
-.datametria-dialog__close {
-  background: none;
-  border: none;
-  font-size: 28px;
-  line-height: 1;
-  color: var(--color-text-secondary, #6b7280);
-  cursor: pointer;
-  padding: 0;
-  width: 32px;
-  height: 32px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 4px;
-  transition: all 0.2s;
-}
-
-.datametria-dialog__close:hover {
-  background-color: var(--color-background-hover, #f3f4f6);
-  color: var(--color-text-primary, #1f2937);
-}
-
-.datametria-dialog__body {
-  padding: 20px;
-  flex: 1;
-  overflow-y: auto;
-}
-
-.datametria-dialog--center .datametria-dialog__body {
-  text-align: center;
-}
-
-.datametria-dialog__footer {
-  padding: 20px;
-  border-top: 1px solid var(--color-border, #e5e7eb);
-  display: flex;
-  justify-content: flex-end;
-  gap: 12px;
-}
-
-/* Transitions */
-.dialog-fade-enter-active,
-.dialog-fade-leave-active {
-  transition: opacity 0.3s;
-}
-
-.dialog-fade-enter-from,
-.dialog-fade-leave-to {
-  opacity: 0;
-}
-
-.dialog-fade-enter-active .datametria-dialog,
-.dialog-fade-leave-active .datametria-dialog {
-  transition: transform 0.3s;
-}
-
-.dialog-fade-enter-from .datametria-dialog {
-  transform: scale(0.9);
-}
-
-.dialog-fade-leave-to .datametria-dialog {
-  transform: scale(0.9);
-}
-
-/* Dark mode support */
-@media (prefers-color-scheme: dark) {
-  .datametria-dialog {
-    background: var(--color-background, #1f2937);
-  }
-
-  .datametria-dialog__title {
-    color: var(--color-text-primary, #f9fafb);
-  }
-
-  .datametria-dialog__header,
-  .datametria-dialog__footer {
-    border-color: var(--color-border, #374151);
-  }
-}
-</style>
+[data-theme="dark"] .datametria-dialog {
+background: var(--color-background, #1f2937);
+}
+
+  .datametria-dialog__title {
+    color: var(--color-text-primary, #f9fafb);
+  }
+
+  .datametria-dialog__header,
+  .datametria-dialog__footer {
+    border-color: var(--color-border, #374151);
+  }
+}
+</style>