Dados

Tarefas

Lista de etapas com contador, item em andamento girando e os concluídos riscados.

data-u="tasks"

Exemplo

2 etapas restantes

Ler a configuração do projeto
Gerar os tokens do tema claro
Gerar os tokens do tema escuro
Publicar o pacote de componentes
Rodar testes e build

<article class="u-card u-wall" data-wall="tasks">
  <div class="u-tasks" style="padding:var(--s2)" data-u="tasks" data-u-props='{"auto": true}'>
    <div class="u-tasks__head"><svg class="u-tasks__spin" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9" opacity=".18"/><path class="u-arc" d="M12 3a9 9 0 0 1 9 9"/></svg><span data-count aria-live="polite">2 etapas restantes</span></div>
    <ul class="u-tasks__list">
      <li class="u-task" data-state="done"><span class="u-task__mark"></span><span class="u-task__text">Ler a configuração do projeto</span></li>
      <li class="u-task" data-state="done"><span class="u-task__mark"></span><span class="u-task__text">Gerar os tokens do tema claro</span></li>
      <li class="u-task" data-state="done"><span class="u-task__mark"></span><span class="u-task__text">Gerar os tokens do tema escuro</span></li>
      <li class="u-task" data-state="doing"><span class="u-task__mark"></span><span class="u-task__text">Publicar o pacote de componentes</span></li>
      <li class="u-task" data-state="todo"><span class="u-task__mark"></span><span class="u-task__text">Rodar testes e build</span></li>
    </ul>
  </div>
</article>

Instalação

Tarefas vem no pacote completo, em unslop.css e unslop.js:

curl -fsSL unslop.leallabs.dev/i | sh

Um bloco pronto que usa tarefas:

curl -fsSL unslop.leallabs.dev/i | sh -s add wall-tasks

Sem build O add por nome serve pra gráficos e blocos. Componentes com JS moram em unslop.js, que monta sozinho todo data-u da página.

Props

Vão em data-u-props, como JSON.

Prop	Tipo	Padrão	O que faz
`auto`	boolean	false	Avança sozinho: a etapa em andamento conclui e a próxima começa. Desliga com movimento reduzido e fora da tela.
`every`	number	2600	Intervalo do avanço, em ms.

Classes e variantes

Classe	O que faz
`u-tasks`	O host.
`u-tasks__list > li.u-task`	Cada etapa, com `data-state` todo, doing ou done.
`u-task__mark`	O marcador. O JS desenha os três estados.
`[data-count]`	Recebe `"N etapas restantes"` ou `"Tudo concluído"`.

Acessibilidade e teclado

Estado e papéis

Onde	Atributo	O que diz
`[data-count]`	`aria-live="polite"`	Anuncia quantas faltam.
host	`data-complete`	Aparece quando tudo está concluído.

Clicar num item alterna entre concluído e pendente. Os itens são li e não recebem foco de teclado.