@datametria/vue-components 2.2.0 → 2.3.0

package/src/components/DatametriaDialog.vue

@@ -0,0 +1,295 @@
+<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);
+  }
+
+  .datametria-dialog__title {
+    color: var(--color-text-primary, #f9fafb);
+  }
+
+  .datametria-dialog__header,
+  .datametria-dialog__footer {
+    border-color: var(--color-border, #374151);
+  }
+}
+</style>

package/src/components/DatametriaDropdown.vue

@@ -0,0 +1,352 @@
+<template>
+  <div class="datametria-dropdown" ref="dropdownRef">
+    <div
+      class="datametria-dropdown__trigger"
+      @click="handleTriggerClick"
+      @mouseenter="handleMouseEnter"
+      @mouseleave="handleMouseLeave"
+      @contextmenu.prevent="handleContextMenu"
+    >
+      <slot name="trigger">
+        <button class="datametria-dropdown__button">
+          {{ triggerText }}
+          <span class="datametria-dropdown__arrow" :class="{ 'is-open': visible }">▼</span>
+        </button>
+      </slot>
+    </div>
+
+    <Transition name="datametria-dropdown-fade">
+      <div
+        v-if="visible"
+        class="datametria-dropdown__menu"
+        :style="menuStyle"
+        @click="handleMenuClick"
+      >
+          <div
+            v-for="(item, index) in items"
+            :key="index"
+            class="datametria-dropdown__item"
+            :class="{
+              'is-disabled': item.disabled,
+              'is-divided': item.divided,
+              'has-children': item.children
+            }"
+            @click="handleItemClick(item, $event)"
+            @mouseenter="handleItemMouseEnter(item, index)"
+          >
+            <span class="datametria-dropdown__item-content">
+              <span v-if="item.icon" class="datametria-dropdown__item-icon">{{ item.icon }}</span>
+              {{ item.label }}
+            </span>
+            <span v-if="item.children" class="datametria-dropdown__item-arrow">▶</span>
+
+            <div
+              v-if="item.children && activeSubmenu === index"
+              class="datametria-dropdown__submenu"
+              :style="submenuStyle"
+            >
+              <div
+                v-for="(child, childIndex) in item.children"
+                :key="childIndex"
+                class="datametria-dropdown__item"
+                :class="{ 'is-disabled': child.disabled }"
+                @click.stop="handleItemClick(child, $event)"
+              >
+                <span class="datametria-dropdown__item-content">
+                  <span v-if="child.icon" class="datametria-dropdown__item-icon">{{ child.icon }}</span>
+                  {{ child.label }}
+                </span>
+              </div>
+            </div>
+          </div>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+
+export interface DropdownItem {
+  label: string
+  value?: string | number
+  icon?: string
+  disabled?: boolean
+  divided?: boolean
+  children?: DropdownItem[]
+  command?: () => void
+}
+
+interface Props {
+  items: DropdownItem[]
+  trigger?: 'hover' | 'click' | 'contextmenu'
+  placement?: 'bottom' | 'top' | 'left' | 'right'
+  triggerText?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  trigger: 'click',
+  placement: 'bottom',
+  triggerText: 'Dropdown'
+})
+
+const emit = defineEmits<{
+  command: [item: DropdownItem]
+  visibleChange: [visible: boolean]
+}>()
+
+const dropdownRef = ref<HTMLElement | null>(null)
+const visible = ref(false)
+const activeSubmenu = ref<number | null>(null)
+const menuPosition = ref({ top: 0, left: 0 })
+
+const menuStyle = computed(() => ({
+  top: `${menuPosition.value.top}px`,
+  left: `${menuPosition.value.left}px`
+}))
+
+const submenuStyle = computed(() => {
+  const offset = props.placement === 'right' ? '100%' : '-100%'
+  return {
+    left: offset,
+    top: '0'
+  }
+})
+
+const updateMenuPosition = () => {
+  if (!dropdownRef.value) return
+
+  const rect = dropdownRef.value.getBoundingClientRect()
+  const menuWidth = 200
+  const menuHeight = props.items.length * 40
+
+  let top = rect.bottom + window.scrollY
+  let left = rect.left + window.scrollX
+
+  if (props.placement === 'top') {
+    top = rect.top + window.scrollY - menuHeight
+  } else if (props.placement === 'left') {
+    top = rect.top + window.scrollY
+    left = rect.left + window.scrollX - menuWidth
+  } else if (props.placement === 'right') {
+    top = rect.top + window.scrollY
+    left = rect.right + window.scrollX
+  }
+
+  menuPosition.value = { top, left }
+}
+
+const show = () => {
+  visible.value = true
+  updateMenuPosition()
+  emit('visibleChange', true)
+}
+
+const hide = () => {
+  visible.value = false
+  activeSubmenu.value = null
+  emit('visibleChange', false)
+}
+
+const handleTriggerClick = () => {
+  if (props.trigger === 'click') {
+    visible.value ? hide() : show()
+  }
+}
+
+const handleMouseEnter = () => {
+  if (props.trigger === 'hover') {
+    show()
+  }
+}
+
+const handleMouseLeave = () => {
+  if (props.trigger === 'hover') {
+    setTimeout(() => {
+      if (!dropdownRef.value?.matches(':hover')) {
+        hide()
+      }
+    }, 200)
+  }
+}
+
+const handleContextMenu = () => {
+  if (props.trigger === 'contextmenu') {
+    show()
+  }
+}
+
+const handleItemClick = (item: DropdownItem, event: Event) => {
+  if (item.disabled) {
+    event.stopPropagation()
+    return
+  }
+
+  if (item.children) {
+    event.stopPropagation()
+    return
+  }
+
+  emit('command', item)
+  if (item.command) {
+    item.command()
+  }
+  hide()
+}
+
+const handleItemMouseEnter = (item: DropdownItem, index: number) => {
+  if (item.children) {
+    activeSubmenu.value = index
+  } else {
+    activeSubmenu.value = null
+  }
+}
+
+const handleMenuClick = (event: Event) => {
+  event.stopPropagation()
+}
+
+const handleClickOutside = (event: Event) => {
+  if (!dropdownRef.value?.contains(event.target as Node)) {
+    hide()
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside)
+})
+</script>
+
+<style scoped>
+.datametria-dropdown {
+  display: inline-block;
+  position: relative;
+}
+
+.datametria-dropdown__trigger {
+  cursor: pointer;
+}
+
+.datametria-dropdown__button {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  background: var(--dm-color-primary, #0072ce);
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  transition: background-color 0.2s;
+}
+
+.datametria-dropdown__button:hover {
+  background: var(--dm-color-primary-dark, #005a9e);
+}
+
+.datametria-dropdown__arrow {
+  font-size: 10px;
+  transition: transform 0.2s;
+}
+
+.datametria-dropdown__arrow.is-open {
+  transform: rotate(180deg);
+}
+
+.datametria-dropdown__menu {
+  position: absolute;
+  z-index: 1000;
+  min-width: 160px;
+  background: white;
+  border: 1px solid var(--dm-color-border, #e0e0e0);
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  padding: 4px 0;
+}
+
+.datametria-dropdown__item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 16px;
+  cursor: pointer;
+  font-size: 14px;
+  color: var(--dm-color-text, #333);
+  transition: background-color 0.2s;
+}
+
+.datametria-dropdown__item:hover:not(.is-disabled) {
+  background: var(--dm-color-background-hover, #f5f5f5);
+}
+
+.datametria-dropdown__item.is-disabled {
+  color: var(--dm-color-text-disabled, #999);
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.datametria-dropdown__item.is-divided {
+  border-top: 1px solid var(--dm-color-border, #e0e0e0);
+  margin-top: 4px;
+  padding-top: 12px;
+}
+
+.datametria-dropdown__item-content {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.datametria-dropdown__item-icon {
+  font-size: 16px;
+}
+
+.datametria-dropdown__item-arrow {
+  font-size: 10px;
+  color: var(--dm-color-text-secondary, #666);
+}
+
+.datametria-dropdown__submenu {
+  position: absolute;
+  top: 0;
+  min-width: 160px;
+  background: white;
+  border: 1px solid var(--dm-color-border, #e0e0e0);
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  padding: 4px 0;
+}
+
+.datametria-dropdown-fade-enter-active,
+.datametria-dropdown-fade-leave-active {
+  transition: opacity 0.2s, transform 0.2s;
+}
+
+.datametria-dropdown-fade-enter-from,
+.datametria-dropdown-fade-leave-to {
+  opacity: 0;
+  transform: translateY(-8px);
+}
+
+@media (prefers-color-scheme: dark) {
+  .datametria-dropdown__menu,
+  .datametria-dropdown__submenu {
+    background: var(--dm-color-background-dark, #1e1e1e);
+    border-color: var(--dm-color-border-dark, #333);
+  }
+
+  .datametria-dropdown__item {
+    color: var(--dm-color-text-dark, #e0e0e0);
+  }
+
+  .datametria-dropdown__item:hover:not(.is-disabled) {
+    background: var(--dm-color-background-hover-dark, #2a2a2a);
+  }
+}
+</style>