Tarefa criando componente dos botões no vue 3

Salve, Marcos!

Aqui na atividade você tem a opcão de "Ver opinião do instrutor", que é uma das formas de se resolver o desafio (lembrando que normalmente temos várias formas de alcançar o mesmo objetivo).

O componente Botao.vue poderia ser assim:

<template>
  <button class="button" @click="clicado" :disabled="desabilitado">
    <span class="icon">
      <i :class="icone"></i>
    </span>
    <span>{{texto}}</span>
  </button>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "Botao",
  emits: ['clicado'],
  props: {
    desabilitado: {
      type: Boolean
    },
    icone: {
      type: String,
      required: true
    },
    texto: {
      type: String,
      required: true
    },
  },
  methods: {
    clicado () : void {
      this.$emit('clicado')
    }
  }
});
</script>

E o temporizador ficaria assim:

<template>
  <section class="is-flex is-align-items-center is-justify-content-space-between">
    <Cronometro :tempoEmSegundos="tempoEmSegundos"/>
    <Botao @clicado="iniciar" icone="fas fa-play" texto="play" :desabilitado="cronometroRodando" />
    <Botao @clicado="finalizar" icone="fas fa-stop" texto="stop" :desabilitado="!cronometroRodando" />
  </section>
</template>

oi Vinicios, acredita que não vi essa opção na tarefa? Agora que procurei e vi a resposta, foi mals...

Só me tire uma duvida por favor?

Na minha implementação, o Botao, ficou assim:

Claro, Marcos!

Fala pra gente, qual sua dúvida?

<template>
    <button @click="clicou" class="button">
        <span class="icon">
            <i :class="['fas', 'fa-' + nomeBotao]"></i>
        </span>
        <span>{{ nomeBotao }}</span>
    </button>
</template>

<script lang="ts">

import { defineComponent } from 'vue';


export default defineComponent({
    name: "Botao",
    emit: ['clicou'],
    data() {
        return {
            nomeClass: ''
        }
    },
    props: {
        nomeBotao: {
            type: String,
            default: ''
        },
    },
    methods: {
        clicou() {
            this.$emit('clicou', { nome: this.nomeBotao })
        }
    }
})

</script>

O Temporizador ficou assim:

<template>
    <div class="is-flex is-align-items-center is-justify-content-space-between">
        <Cronometro :tempoEmSegundos="tempoEmSegundos" />
        <Botao :nomeBotao="play" @clicou="testeClicou" :disabled="cronometroRodando"/>
        <Botao :nomeBotao="stop" @clicou="testeClicou" :disabled="!cronometroRodando" />
    </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import Botao from "./Botao.vue";
import Cronometro from './Cronometro.vue'
export default defineComponent({
    name: "Temporizador",
    emits: ['aoTemporizadorFinalizado'],
    components: {
        Cronometro,
        Botao
    },
    data() {
        return {
            tempoEmSegundos: 0,
            cronometro: 0,
            cronometroRodando: false,
            play: 'play',
            stop: 'stop'
        }
    },
    methods: {

        testeClicou(data: any): void {
            if (data.nome === 'play') {

                // começar a contagem
                // 1 seg = 1000 ms
                this.cronometroRodando = true
                this.cronometro = setInterval(() => {
                    this.tempoEmSegundos += 1
                }, 1000)
            }

            if (data.nome === 'stop') {
                this.cronometroRodando = false
                clearInterval(this.cronometro)
                this.$emit('aoTemporizadorFinalizado', this.tempoEmSegundos)
                this.tempoEmSegundos = 0
            }
        }
    }
});
</script>

o que achou da implementação ou o que poderia ter melhorado?

Eu entendi sua implementação, mas eu faria um bocadinho diferente.

A nivel de gosto mesmo, é uma preferência minha, eu implementaria dois métodos (um pra play, outro pra stop).

Isso porque eu gosto de evitar IFs sempre que possível (porque essa estratégia acaba me ajudando na hora de criar testes!).

Outro ponto de atenção também é que ficou um pouco acoplado (você passa o "name" pra baixo pro botão e recebe ele de volta no evento pra tomar uma decisão sobre o que fazer).

O mais importante aqui é experimentar e ver o que melhor funciona pro nosso cenário!