@bigbot-community/bigbot-ui 1.0.1

package/src/components/molecules/BrModal/BrModal.test.ts

@@ -0,0 +1,212 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { mount } from '@vue/test-utils'
+import BrModal from './BrModal.vue'
+
+describe('BrModal', () => {
+  beforeEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  afterEach(() => {
+    document.body.style.overflow = ''
+  })
+
+  it('renders when open', () => {
+    const wrapper = mount(BrModal, {
+      props: { modelValue: true },
+      global: {
+        stubs: {
+          teleport: true,
+        },
+      },
+    })
+    expect(wrapper.find('.br-modal').exists()).toBe(true)
+  })
+
+  it('does not render when closed', () => {
+    const wrapper = mount(BrModal, {
+      props: { modelValue: false },
+      global: {
+        stubs: {
+          teleport: true,
+        },
+      },
+    })
+    expect(wrapper.find('.br-modal').exists()).toBe(false)
+  })
+
+  it('renders title', () => {
+    const wrapper = mount(BrModal, {
+      props: { modelValue: true, title: 'Test Modal' },
+      global: {
+        stubs: {
+          teleport: true,
+        },
+      },
+    })
+    expect(wrapper.find('.br-modal__title').text()).toBe('Test Modal')
+  })
+
+  it('renders slot content', () => {
+    const wrapper = mount(BrModal, {
+      props: { modelValue: true },
+      slots: {
+        default: '<p>Modal content</p>',
+      },
+      global: {
+        stubs: {
+          teleport: true,
+        },
+      },
+    })
+    expect(wrapper.find('.br-modal__body').html()).toContain('Modal content')
+  })
+
+  it('emits close when close button clicked', async () => {
+    const wrapper = mount(BrModal, {
+      props: {
+        modelValue: true,
+        'onUpdate:modelValue': (e: boolean) => wrapper.setProps({ modelValue: e }),
+      },
+      global: {
+        stubs: {
+          teleport: true,
+        },
+      },
+    })
+    await wrapper.find('.br-modal__close').trigger('click')
+    expect(wrapper.emitted('close')).toBeTruthy()
+  })
+
+  it('closes on backdrop click by default', async () => {
+    const wrapper = mount(BrModal, {
+      props: {
+        modelValue: true,
+        'onUpdate:modelValue': (e: boolean) => wrapper.setProps({ modelValue: e }),
+      },
+      global: {
+        stubs: {
+          teleport: true,
+        },
+      },
+    })
+    await wrapper.find('.br-modal__backdrop').trigger('click')
+    expect(wrapper.emitted('close')).toBeTruthy()
+  })
+
+  it('does not close on backdrop click when closeOnClickOutside is false', async () => {
+    const wrapper = mount(BrModal, {
+      props: {
+        modelValue: true,
+        closeOnClickOutside: false,
+        'onUpdate:modelValue': (e: boolean) => wrapper.setProps({ modelValue: e }),
+      },
+      global: {
+        stubs: {
+          teleport: true,
+        },
+      },
+    })
+    await wrapper.find('.br-modal__backdrop').trigger('click')
+    expect(wrapper.emitted('close')).toBeFalsy()
+  })
+
+  it('applies correct variant class', () => {
+    const wrapper = mount(BrModal, {
+      props: { modelValue: true, variant: 'aside' },
+      global: {
+        stubs: {
+          teleport: true,
+        },
+      },
+    })
+    expect(wrapper.find('.br-modal').classes()).toContain('br-modal--aside')
+  })
+
+  it('applies correct size class', () => {
+    const sizes = ['sm', 'md', 'lg', 'xl'] as const
+    sizes.forEach((size) => {
+      const wrapper = mount(BrModal, {
+        props: { modelValue: true, size },
+        global: {
+          stubs: {
+            teleport: true,
+          },
+        },
+      })
+      expect(wrapper.find('.br-modal').classes()).toContain(`br-modal--${size}`)
+    })
+  })
+
+  it('hides close button when closable is false', () => {
+    const wrapper = mount(BrModal, {
+      props: { modelValue: true, closable: false },
+      global: {
+        stubs: {
+          teleport: true,
+        },
+      },
+    })
+    expect(wrapper.find('.br-modal__close').exists()).toBe(false)
+  })
+
+  it('shows footer when showFooter is true', () => {
+    const wrapper = mount(BrModal, {
+      props: { modelValue: true, showFooter: true },
+      global: {
+        stubs: {
+          teleport: true,
+        },
+      },
+    })
+    expect(wrapper.find('.br-modal__footer').exists()).toBe(true)
+  })
+
+  it('emits confirm when confirm button clicked', async () => {
+    const wrapper = mount(BrModal, {
+      props: { modelValue: true, showFooter: true },
+      global: {
+        stubs: {
+          teleport: true,
+        },
+      },
+    })
+    await wrapper.find('.br-modal__btn--confirm').trigger('click')
+    expect(wrapper.emitted('confirm')).toBeTruthy()
+  })
+
+  it('emits cancel when cancel button clicked', async () => {
+    const wrapper = mount(BrModal, {
+      props: {
+        modelValue: true,
+        showFooter: true,
+        'onUpdate:modelValue': (e: boolean) => wrapper.setProps({ modelValue: e }),
+      },
+      global: {
+        stubs: {
+          teleport: true,
+        },
+      },
+    })
+    await wrapper.find('.br-modal__btn--cancel').trigger('click')
+    expect(wrapper.emitted('cancel')).toBeTruthy()
+  })
+
+  it('does not close when persistent is true', async () => {
+    const wrapper = mount(BrModal, {
+      props: {
+        modelValue: true,
+        persistent: true,
+        'onUpdate:modelValue': (e: boolean) => wrapper.setProps({ modelValue: e }),
+      },
+      global: {
+        stubs: {
+          teleport: true,
+        },
+      },
+    })
+    await wrapper.find('.br-modal__backdrop').trigger('click')
+    expect(wrapper.emitted('close')).toBeFalsy()
+    expect(wrapper.props('modelValue')).toBe(true)
+  })
+})

package/src/components/molecules/BrModal/BrModal.vue

@@ -0,0 +1,404 @@
+<script setup lang="ts">
+/**
+ * BrModal - Modal dialog component
+ *
+ * @example
+ * <BrModal v-model="isOpen" title="Meu Modal">
+ *   <p>Conteúdo do modal</p>
+ * </BrModal>
+ *
+ * <BrModal v-model="isOpen" variant="aside" title="Painel Lateral">
+ *   <p>Conteúdo do painel</p>
+ * </BrModal>
+ */
+
+import { computed, watch, onMounted, onUnmounted, ref } from 'vue'
+import type { ModalProps } from './types'
+
+// ---------------------------------------------------------------------------
+// PROPS
+// ---------------------------------------------------------------------------
+
+const props = withDefaults(defineProps<ModalProps>(), {
+  title: '',
+  variant: 'center',
+  size: 'md',
+  closable: true,
+  closeOnClickOutside: true,
+  closeOnEscape: true,
+  showHeader: true,
+  showFooter: false,
+  persistent: false,
+})
+
+// ---------------------------------------------------------------------------
+// MODEL
+// ---------------------------------------------------------------------------
+
+const isOpen = defineModel<boolean>({ default: false })
+
+// ---------------------------------------------------------------------------
+// EMITS
+// ---------------------------------------------------------------------------
+
+const emit = defineEmits<{
+  (e: 'close'): void
+  (e: 'confirm'): void
+  (e: 'cancel'): void
+}>()
+
+// ---------------------------------------------------------------------------
+// COMPUTED
+// ---------------------------------------------------------------------------
+
+const classes = computed(() => [
+  'br-modal',
+  `br-modal--${props.variant}`,
+  `br-modal--${props.size}`,
+  {
+    'br-modal--open': isOpen.value,
+  },
+])
+
+// ---------------------------------------------------------------------------
+// METHODS
+// ---------------------------------------------------------------------------
+
+function close() {
+  if (!props.persistent) {
+    isOpen.value = false
+    emit('close')
+  }
+}
+
+function handleBackdropClick() {
+  if (props.closeOnClickOutside) {
+    close()
+  }
+}
+
+function handleEscape(event: KeyboardEvent) {
+  if (event.key === 'Escape' && props.closeOnEscape && isOpen.value) {
+    close()
+  }
+}
+
+function handleConfirm() {
+  emit('confirm')
+}
+
+function handleCancel() {
+  emit('cancel')
+  close()
+}
+
+// ---------------------------------------------------------------------------
+// WATCHERS
+// ---------------------------------------------------------------------------
+
+watch(isOpen, (value) => {
+  // SSR guard: document is undefined on server
+  if (typeof document === 'undefined') return
+  document.body.style.overflow = value ? 'hidden' : ''
+})
+
+// ---------------------------------------------------------------------------
+// SSR-SAFE TELEPORT
+// ---------------------------------------------------------------------------
+
+// Teleport is disabled during SSR and enabled after client hydration
+const isMounted = ref(false)
+
+// ---------------------------------------------------------------------------
+// LIFECYCLE
+// ---------------------------------------------------------------------------
+
+onMounted(() => {
+  isMounted.value = true
+  document.addEventListener('keydown', handleEscape)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('keydown', handleEscape)
+  document.body.style.overflow = ''
+})
+</script>
+
+<template>
+  <!-- Teleport disabled during SSR to prevent hydration issues -->
+  <Teleport to="body" :disabled="!isMounted">
+    <Transition name="br-modal-fade">
+      <div v-if="isOpen" :class="classes">
+        <!-- Backdrop -->
+        <div class="br-modal__backdrop" @click="handleBackdropClick" />
+
+        <!-- Modal Content -->
+        <Transition :name="variant === 'aside' ? 'br-modal-slide' : 'br-modal-scale'">
+          <div v-if="isOpen" class="br-modal__container">
+            <!-- Header -->
+            <header v-if="showHeader" class="br-modal__header">
+              <slot name="header">
+                <h2 class="br-modal__title">{{ title }}</h2>
+              </slot>
+              <button
+                v-if="closable"
+                type="button"
+                class="br-modal__close"
+                aria-label="Fechar"
+                @click="close"
+              >
+                <svg viewBox="0 0 24 24" fill="currentColor">
+                  <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
+                </svg>
+              </button>
+            </header>
+
+            <!-- Body -->
+            <div class="br-modal__body">
+              <slot />
+            </div>
+
+            <!-- Footer -->
+            <footer v-if="showFooter || $slots.footer" class="br-modal__footer">
+              <slot name="footer">
+                <button type="button" class="br-modal__btn br-modal__btn--cancel" @click="handleCancel">
+                  Cancelar
+                </button>
+                <button type="button" class="br-modal__btn br-modal__btn--confirm" @click="handleConfirm">
+                  Confirmar
+                </button>
+              </slot>
+            </footer>
+          </div>
+        </Transition>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style lang="scss" scoped>
+.br-modal {
+  position: fixed;
+  inset: 0;
+  z-index: var(--br-z-modal);
+  display: flex;
+
+  // ---------------------------------------------------------------------------
+  // VARIANTS
+  // ---------------------------------------------------------------------------
+
+  &--center {
+    align-items: center;
+    justify-content: center;
+    padding: var(--br-space-4);
+  }
+
+  &--aside {
+    justify-content: flex-end;
+  }
+
+  // ---------------------------------------------------------------------------
+  // SIZES
+  // ---------------------------------------------------------------------------
+
+  &--sm .br-modal__container {
+    max-width: 400px;
+  }
+
+  &--md .br-modal__container {
+    max-width: 560px;
+  }
+
+  &--lg .br-modal__container {
+    max-width: 800px;
+  }
+
+  &--xl .br-modal__container {
+    max-width: 1140px;
+  }
+
+  &--aside {
+    &.br-modal--sm .br-modal__container {
+      width: 320px;
+    }
+
+    &.br-modal--md .br-modal__container {
+      width: 480px;
+    }
+
+    &.br-modal--lg .br-modal__container {
+      width: 640px;
+    }
+
+    &.br-modal--xl .br-modal__container {
+      width: 800px;
+    }
+  }
+
+  // ---------------------------------------------------------------------------
+  // BACKDROP
+  // ---------------------------------------------------------------------------
+
+  &__backdrop {
+    position: absolute;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.5);
+  }
+
+  // ---------------------------------------------------------------------------
+  // CONTAINER
+  // ---------------------------------------------------------------------------
+
+  &__container {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    max-height: 90vh;
+    background: var(--br-light-0);
+    border-radius: var(--br-radius-lg);
+    box-shadow: var(--br-shadow-xl);
+    overflow: hidden;
+  }
+
+  &--aside &__container {
+    height: 100%;
+    max-height: 100%;
+    border-radius: var(--br-radius-lg) 0 0 var(--br-radius-lg);
+  }
+
+  // ---------------------------------------------------------------------------
+  // HEADER
+  // ---------------------------------------------------------------------------
+
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--br-space-4);
+    padding: var(--br-space-6);
+    border-bottom: 1px solid var(--br-light-300);
+  }
+
+  &__title {
+    flex: 1;
+    margin: 0;
+    font-family: var(--br-font-primary);
+    font-size: var(--br-text-lg);
+    font-weight: var(--br-font-semibold);
+    color: var(--br-dark-0);
+  }
+
+  &__close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    border: none;
+    border-radius: var(--br-radius-sm);
+    background: transparent;
+    color: var(--br-dark-900);
+    cursor: pointer;
+    transition: all var(--br-transition-fast);
+
+    svg {
+      width: 20px;
+      height: 20px;
+    }
+
+    &:hover {
+      background: var(--br-light-200);
+      color: var(--br-dark-700);
+    }
+  }
+
+  // ---------------------------------------------------------------------------
+  // BODY
+  // ---------------------------------------------------------------------------
+
+  &__body {
+    flex: 1;
+    padding: var(--br-space-6);
+    overflow-y: auto;
+  }
+
+  // ---------------------------------------------------------------------------
+  // FOOTER
+  // ---------------------------------------------------------------------------
+
+  &__footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--br-space-3);
+    padding: var(--br-space-6);
+    border-top: 1px solid var(--br-light-300);
+  }
+
+  &__btn {
+    padding: var(--br-space-3) var(--br-space-6);
+    font-family: var(--br-font-primary);
+    font-size: var(--br-text-sm);
+    font-weight: var(--br-font-semibold);
+    border: none;
+    border-radius: var(--br-radius-md);
+    cursor: pointer;
+    transition: all var(--br-transition-fast);
+
+    &--cancel {
+      background: var(--br-primary-100);
+      color: var(--br-primary-600);
+
+      &:hover {
+        background: var(--br-primary-200);
+      }
+    }
+
+    &--confirm {
+      background: var(--br-primary-600);
+      color: var(--br-light-0);
+
+      &:hover {
+        background: var(--br-primary-700);
+      }
+    }
+  }
+}
+
+// ---------------------------------------------------------------------------
+// TRANSITIONS
+// ---------------------------------------------------------------------------
+
+.br-modal-fade-enter-active,
+.br-modal-fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.br-modal-fade-enter-from,
+.br-modal-fade-leave-to {
+  opacity: 0;
+}
+
+.br-modal-scale-enter-active,
+.br-modal-scale-leave-active {
+  transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+.br-modal-scale-enter-from,
+.br-modal-scale-leave-to {
+  opacity: 0;
+  transform: scale(0.95);
+}
+
+.br-modal-slide-enter-active,
+.br-modal-slide-leave-active {
+  transition: transform 0.3s ease;
+}
+
+.br-modal-slide-enter-from,
+.br-modal-slide-leave-to {
+  transform: translateX(100%);
+}
+</style>

package/src/components/molecules/BrModal/index.ts

@@ -0,0 +1,2 @@
+export { default as BrModal } from './BrModal.vue'
+export * from './types'

package/src/components/molecules/BrModal/types.ts

@@ -0,0 +1,57 @@
+export type ModalVariant = 'center' | 'aside'
+export type ModalSize = 'sm' | 'md' | 'lg' | 'xl'
+
+export interface ModalProps {
+  /**
+   * Modal title
+   */
+  title?: string
+
+  /**
+   * Modal variant
+   * @default 'center'
+   */
+  variant?: ModalVariant
+
+  /**
+   * Modal size
+   * @default 'md'
+   */
+  size?: ModalSize
+
+  /**
+   * Show close button
+   * @default true
+   */
+  closable?: boolean
+
+  /**
+   * Close on click outside
+   * @default true
+   */
+  closeOnClickOutside?: boolean
+
+  /**
+   * Close on escape key
+   * @default true
+   */
+  closeOnEscape?: boolean
+
+  /**
+   * Show header
+   * @default true
+   */
+  showHeader?: boolean
+
+  /**
+   * Show footer with default buttons
+   * @default false
+   */
+  showFooter?: boolean
+
+  /**
+   * Prevent closing (for confirmations)
+   * @default false
+   */
+  persistent?: boolean
+}