@govbr-ds/webcomponents/dist/collection/pages/components/tab/index.js

Biblioteca de Web Components baseado no GovBR-DS

if (!window.elementsToListen && !window.eventsToListen) {
  const elementsToListen = document.querySelectorAll('br-tab')

  const eventsToListen = ['click']

  elementsToListen.forEach((domElement) => {
    eventsToListen.forEach((event) => {
      domElement.addEventListener(event, function (event) {
        console.log({
          Evento: event.type,
          Elemento: domElement.outerHTML,
          ...(event.detail && { Detail: event.detail }),
          ...(event.data && { Data: event.data }),
        })
      })
    })
  })
}

// Função para inicializar o teste de reatividade
function inicializarTesteReatividade() {
  const tab = document.getElementById('tab-reativo')
  const item1 = document.getElementById('item1')
  const item2 = document.getElementById('item2')
  const item3 = document.getElementById('item3')
  const log = document.getElementById('log')

  // Se os elementos não existirem, não faz nada (não é a página de reatividade)
  if (!tab || !item1 || !item2 || !item3 || !log) {
    return
  }

  let contador = 12
  let onlyIcon = false
  let tituloIndex = 0
  const titulos = ['Equipe', 'Time', 'Squad', 'Grupo', 'Colaboradores']
  const icones = ['fa-solid:folder', 'fa-solid:briefcase', 'fa-solid:rocket', 'fa-solid:star']
  let iconeIndex = 0

  function adicionarLog(mensagem) {
    const timestamp = new Date().toLocaleTimeString()
    log.textContent += `[${timestamp}] ${mensagem}\n`
    log.scrollTop = log.scrollHeight
  }

  // Escuta eventos do componente pai
  tab.addEventListener('brTabChange', (e) => {
    adicionarLog(`brTabChange: Tab ${e.detail.tabIndex} ativado (ID: ${e.detail.tabId})`)
  })

  // Escuta eventos dos filhos
  item1.addEventListener('brTabItemPropsChange', () => {
    adicionarLog('brTabItemPropsChange: Propriedades do item1 (Equipe) mudaram')
  })

  item2.addEventListener('brTabItemPropsChange', () => {
    adicionarLog('brTabItemPropsChange: Propriedades do item2 (Projetos) mudaram')
  })

  item3.addEventListener('brTabItemPropsChange', () => {
    adicionarLog('brTabItemPropsChange: Propriedades do item3 (Tarefas) mudaram')
  })

  // Torna as funções globais para serem acessadas pelos botões HTML
  window.mudarTitulo = function () {
    tituloIndex = (tituloIndex + 1) % titulos.length
    const novoTitulo = titulos[tituloIndex]
    item1.setAttribute('tab-item-title', novoTitulo)
    adicionarLog(`Ação: Título alterado para "${novoTitulo}"`)
  }

  window.mudarIcone = function () {
    iconeIndex = (iconeIndex + 1) % icones.length
    const novoIcone = icones[iconeIndex]
    item2.setAttribute('icon', novoIcone)
    adicionarLog(`Ação: Ícone alterado para "${novoIcone}"`)
  }

  window.mudarContador = function () {
    contador++
    item2.setAttribute('counter', contador.toString())
    adicionarLog(`Ação: Contador incrementado para ${contador}`)
  }

  window.alternarOnlyIcon = function () {
    onlyIcon = !onlyIcon
    if (onlyIcon) {
      item1.setAttribute('only-icon', '')
    } else {
      item1.removeAttribute('only-icon')
    }
    adicionarLog(`Ação: Only Icon ${onlyIcon ? 'ativado' : 'desativado'}`)
  }

  window.mudarTodas = function () {
    window.mudarTitulo()
    setTimeout(() => window.mudarIcone(), 100)
    setTimeout(() => window.mudarContador(), 200)
    setTimeout(() => window.alternarOnlyIcon(), 300)
  }

  // Log inicial
  adicionarLog('Página carregada. Teste a reatividade com os botões acima.')
}

// Executa quando o DOM estiver pronto
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', inicializarTesteReatividade)
} else {
  inicializarTesteReatividade()
}