Todos os componentes · Categoria: Calculadoras

Simulador de crédito

Uma calculadora com faixa de valor, lista de prazos e dois idiomas.

O visitante move um valor, escolhe um prazo e vê a parcela na hora. Limites, taxa, moeda e o link da proposta são props, então cada site define os seus.

Experimente

<finance-simulator>

VisãoPréviaCódigoCSS

finance-simulator: uma calculadora com números, uma lista de prazos e dois idiomas. Uma imagem do componente real, desenhada a partir do próprio código. Os controles mudam a imagem e o código ao lado; nada aqui é enviado nem guardado.

Gerado a partir do manifesto do componente e dos valores acima.

index.html

<finance-simulator
  rate="1.2"
  min-amount="5000"
  max-amount="60000"
  amount="24000"
  currency="USD"
  locale="en"
  terms="[12,24,36,48]"
></finance-simulator>

<script>
  const element = document.querySelector("finance-simulator");
  element.addEventListener("finance-simulator:simulate", (event) => {
    console.log(event.detail);
  });
  element.addEventListener("finance-simulator:proposal", (event) => {
    console.log(event.detail);
  });
</script>

Adicione o script do Taggor do site uma vez; o componente aparece quando ele carrega.

taggor-component.js

const element = document.createElement("finance-simulator");
element.setAttribute("rate", "1.2");
element.setAttribute("min-amount", "5000");
element.setAttribute("max-amount", "60000");
element.setAttribute("amount", "24000");
element.setAttribute("currency", "USD");
element.setAttribute("locale", "en");
element.terms = [
  12,
  24,
  36,
  48
];
element.addEventListener("finance-simulator:simulate", (event) => {
  console.log(event.detail);
});
element.addEventListener("finance-simulator:proposal", (event) => {
  console.log(event.detail);
});
document.body.append(element);

Adicione o script do Taggor do site uma vez; o componente aparece quando ele carrega.
Listas e objetos entram como propriedade do elemento, não como atributo.

FinanceSimulator.tsx

import { useEffect, useRef } from "react";

export function FinanceSimulator() {
  const ref = useRef<HTMLElement>(null);

  useEffect(() => {
    const element = ref.current;
    if (!element) return;
    Object.assign(element, {
      terms: [
        12,
        24,
        36,
        48
      ],
    });
    const onSimulate = (event: Event) => {
      console.log((event as CustomEvent).detail);
    };
    element.addEventListener("finance-simulator:simulate", onSimulate);
    const onProposal = (event: Event) => {
      console.log((event as CustomEvent).detail);
    };
    element.addEventListener("finance-simulator:proposal", onProposal);
    return () => {
      element.removeEventListener("finance-simulator:simulate", onSimulate);
      element.removeEventListener("finance-simulator:proposal", onProposal);
    };
  }, []);

  return <finance-simulator
      ref={ref}
      rate="1.2"
      min-amount="5000"
      max-amount="60000"
      amount="24000"
      currency="USD"
      locale="en"
    />;
}

Adicione o script do Taggor do site uma vez; o componente aparece quando ele carrega.
O React 18 manda toda prop de um custom element como atributo de texto.
Listas e objetos entram como propriedade do elemento, não como atributo.
O evento é ouvido com addEventListener, dentro de um efeito.

FinanceSimulator.tsx

import { useEffect, useRef } from "react";

export function FinanceSimulator() {
  const ref = useRef<HTMLElement>(null);

  useEffect(() => {
    const element = ref.current;
    if (!element) return;
    Object.assign(element, {
      terms: [
        12,
        24,
        36,
        48
      ],
    });
    const onSimulate = (event: Event) => {
      console.log((event as CustomEvent).detail);
    };
    element.addEventListener("finance-simulator:simulate", onSimulate);
    const onProposal = (event: Event) => {
      console.log((event as CustomEvent).detail);
    };
    element.addEventListener("finance-simulator:proposal", onProposal);
    return () => {
      element.removeEventListener("finance-simulator:simulate", onSimulate);
      element.removeEventListener("finance-simulator:proposal", onProposal);
    };
  }, []);

  return <finance-simulator
      ref={ref}
      rate={1.2}
      min-amount={5000}
      max-amount={60000}
      amount={24000}
      currency="USD"
      locale="en"
    />;
}

Adicione o script do Taggor do site uma vez; o componente aparece quando ele carrega.
O React 19 define uma propriedade quando o elemento já a tem e um atributo no resto.
Listas e objetos entram como propriedade do elemento, não como atributo.
O evento é ouvido com addEventListener, dentro de um efeito.

src/FinanceSimulator.vue

<script setup lang="ts">
function onSimulate(event: Event) {
  console.log((event as CustomEvent).detail);
}

function onProposal(event: Event) {
  console.log((event as CustomEvent).detail);
}
</script>

<template>
  <finance-simulator
    :rate.prop="1.2"
    :minAmount.prop="5000"
    :maxAmount.prop="60000"
    :amount.prop="24000"
    currency="USD"
    locale="en"
    :terms.prop="[12,24,36,48]"
    @finance-simulator:simulate="onSimulate"
    @finance-simulator:proposal="onProposal"
  />
</template>

vite.config.ts

import vue from "@vitejs/plugin-vue";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => tag === "finance-simulator",
        },
      },
    }),
  ],
});

Adicione o script do Taggor do site uma vez; o componente aparece quando ele carrega.
O vite.config.ts avisa o Vue de que esta tag não é um componente Vue.
Listas e objetos entram como propriedade do elemento, não como atributo.

src/app/finance-simulator.component.ts

import { afterNextRender, Component, CUSTOM_ELEMENTS_SCHEMA, DestroyRef, ElementRef, inject } from "@angular/core";

@Component({
  selector: "app-finance-simulator",
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <finance-simulator
      [rate]="1.2"
      [minAmount]="5000"
      [maxAmount]="60000"
      [amount]="24000"
      currency="USD"
      locale="en"
      [terms]="values.terms"
    ></finance-simulator>
  `,
})
export class FinanceSimulatorComponent {
  readonly values = {
    terms: [
      12,
      24,
      36,
      48
    ],
  };

  constructor() {
    const host = inject<ElementRef<HTMLElement>>(ElementRef);
    const element = () => host.nativeElement.querySelector("finance-simulator");
    const onSimulate = (event: Event) => {
      console.log((event as CustomEvent).detail);
    };
    afterNextRender(() => element()?.addEventListener("finance-simulator:simulate", onSimulate));
    inject(DestroyRef).onDestroy(() => element()?.removeEventListener("finance-simulator:simulate", onSimulate));
    const onProposal = (event: Event) => {
      console.log((event as CustomEvent).detail);
    };
    afterNextRender(() => element()?.addEventListener("finance-simulator:proposal", onProposal));
    inject(DestroyRef).onDestroy(() => element()?.removeEventListener("finance-simulator:proposal", onProposal));
  }
}

Adicione o script do Taggor do site uma vez; o componente aparece quando ele carrega.
O componente declara CUSTOM_ELEMENTS_SCHEMA.
Listas e objetos entram como propriedade do elemento, não como atributo.
O evento é ouvido com addEventListener, dentro de um efeito.

src/TaggorComponent.svelte

<script>
  function onSimulate(event) {
    console.log(event.detail);
  }

  function onProposal(event) {
    console.log(event.detail);
  }
</script>

<finance-simulator
  rate={1.2}
  min-amount={5000}
  max-amount={60000}
  amount={24000}
  currency="USD"
  locale="en"
  terms={[
    12,
    24,
    36,
    48
  ]}
  onfinance-simulator:simulate={onSimulate}
  onfinance-simulator:proposal={onProposal}
></finance-simulator>

Adicione o script do Taggor do site uma vez; o componente aparece quando ele carrega.

Como um agente leva um componente assim a um site:

taggor checktaggor publish

As variáveis CSS que o componente expõe, definidas como a página de um cliente faria.

styles.css

finance-simulator {
  --fs-accent: #0a7d5a;
  --fs-radius: 8px;
}

Props

Props do componente, lidas do manifesto dele
Prop	Tipo	Padrão	O que faz
headline	string	nenhum	Replaces the default heading.
rate	number 0 to 20	1.2	Monthly interest rate, in percent.
minAmount	number 100 to 10000000	5000	–
maxAmount	number 100 to 10000000	200000	–
amount	number 100 to 10000000	50000	Starting amount, kept between minAmount and maxAmount.
terms	list	[12,24,36,48,60]	Terms offered, in months.
currency	BRL \| USD \| EUR	BRL	–
proposalUrl	url	nenhum	Where the proposal button leads; hidden when absent.
locale	pt-BR \| en	pt-BR	–

Os nomes e as descrições das props são os do próprio componente, em inglês, como o autor escreveu.

Eventos

Eventos do componente, lidos do manifesto dele
Evento	Quando dispara
simulate	The visitor changed the amount or the term.
proposal	The visitor clicked the proposal button.

Construa um com o seu agente

Cole no seu agente. Ele pergunta a você antes de entrar na conta, pagar ou ir além de verificar e publicar.

Construa para mim um componente do Taggor como "Simulador de crédito" (finance-simulator): Uma calculadora com faixa de valor, lista de prazos e dois idiomas. Busque https://taggor.dev/agent-setup/prompt.md e siga as instruções de lá para me configurar para o Taggor. Pergunte-me antes de entrar na conta, criar uma conta, aceitar termos, pagar qualquer coisa ou digitar um segredo. Verifique com `taggor check` e publique com `taggor publish`, e pare por aí. Não promova para produção, não anexe a um site, não faça rollback nem use --yes, --force ou --force-drop-invalid, a menos que eu peça exatamente isso nesta conversa.

Componentes relacionados

Calculadora de orçamento<budget-calculator>
Calculadora de retorno<roi-calculator>
Configurador de planos<pricing-configurator>