Todos os componentes · Categoria: Calculadoras

Calculadora de orçamento

Escolha itens e quantidades e veja um orçamento que soma sozinho.

Uma lista de itens com os preços que você informa, quantidades, um desconto opcional e um total que muda conforme o visitante escolhe.

Experimente

<budget-calculator>

VisãoPréviaCódigoCSS

budget-calculator: Escolha itens e quantidades e veja um orçamento que soma sozinho. 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

<budget-calculator
  headline="Build your quote"
  discount-percent="10"
  currency="USD"
  locale="en"
  items="[{&quot;id&quot;:&quot;landing&quot;,&quot;label&quot;:&quot;Landing page&quot;,&quot;price&quot;:1500},{&quot;id&quot;:&quot;post&quot;,&quot;label&quot;:&quot;Blog post&quot;,&quot;price&quot;:300},{&quot;id&quot;:&quot;logo&quot;,&quot;label&quot;:&quot;Logo&quot;,&quot;price&quot;:900}]"
></budget-calculator>

<script>
  const element = document.querySelector("budget-calculator");
  element.addEventListener("budget-calculator:change", (event) => {
    console.log(event.detail);
  });
  element.addEventListener("budget-calculator:quote", (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("budget-calculator");
element.setAttribute("headline", "Build your quote");
element.setAttribute("discount-percent", "10");
element.setAttribute("currency", "USD");
element.setAttribute("locale", "en");
element.items = [
  {
    "id": "landing",
    "label": "Landing page",
    "price": 1500
  },
  {
    "id": "post",
    "label": "Blog post",
    "price": 300
  },
  {
    "id": "logo",
    "label": "Logo",
    "price": 900
  }
];
element.addEventListener("budget-calculator:change", (event) => {
  console.log(event.detail);
});
element.addEventListener("budget-calculator:quote", (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.

BudgetCalculator.tsx

import { useEffect, useRef } from "react";

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

  useEffect(() => {
    const element = ref.current;
    if (!element) return;
    Object.assign(element, {
      items: [
        {
          "id": "landing",
          "label": "Landing page",
          "price": 1500
        },
        {
          "id": "post",
          "label": "Blog post",
          "price": 300
        },
        {
          "id": "logo",
          "label": "Logo",
          "price": 900
        }
      ],
    });
    const onChange = (event: Event) => {
      console.log((event as CustomEvent).detail);
    };
    element.addEventListener("budget-calculator:change", onChange);
    const onQuote = (event: Event) => {
      console.log((event as CustomEvent).detail);
    };
    element.addEventListener("budget-calculator:quote", onQuote);
    return () => {
      element.removeEventListener("budget-calculator:change", onChange);
      element.removeEventListener("budget-calculator:quote", onQuote);
    };
  }, []);

  return <budget-calculator
      ref={ref}
      headline="Build your quote"
      discount-percent="10"
      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.

BudgetCalculator.tsx

import { useEffect, useRef } from "react";

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

  useEffect(() => {
    const element = ref.current;
    if (!element) return;
    Object.assign(element, {
      items: [
        {
          "id": "landing",
          "label": "Landing page",
          "price": 1500
        },
        {
          "id": "post",
          "label": "Blog post",
          "price": 300
        },
        {
          "id": "logo",
          "label": "Logo",
          "price": 900
        }
      ],
    });
    const onChange = (event: Event) => {
      console.log((event as CustomEvent).detail);
    };
    element.addEventListener("budget-calculator:change", onChange);
    const onQuote = (event: Event) => {
      console.log((event as CustomEvent).detail);
    };
    element.addEventListener("budget-calculator:quote", onQuote);
    return () => {
      element.removeEventListener("budget-calculator:change", onChange);
      element.removeEventListener("budget-calculator:quote", onQuote);
    };
  }, []);

  return <budget-calculator
      ref={ref}
      headline="Build your quote"
      discount-percent={10}
      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/BudgetCalculator.vue

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

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

<template>
  <budget-calculator
    headline="Build your quote"
    :discountPercent.prop="10"
    currency="USD"
    locale="en"
    :items.prop="[{&quot;id&quot;:&quot;landing&quot;,&quot;label&quot;:&quot;Landing page&quot;,&quot;price&quot;:1500},{&quot;id&quot;:&quot;post&quot;,&quot;label&quot;:&quot;Blog post&quot;,&quot;price&quot;:300},{&quot;id&quot;:&quot;logo&quot;,&quot;label&quot;:&quot;Logo&quot;,&quot;price&quot;:900}]"
    @budget-calculator:change="onChange"
    @budget-calculator:quote="onQuote"
  />
</template>

vite.config.ts

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

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

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/budget-calculator.component.ts

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

@Component({
  selector: "app-budget-calculator",
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <budget-calculator
      headline="Build your quote"
      [discountPercent]="10"
      currency="USD"
      locale="en"
      [items]="values.items"
    ></budget-calculator>
  `,
})
export class BudgetCalculatorComponent {
  readonly values = {
    items: [
      {
        "id": "landing",
        "label": "Landing page",
        "price": 1500
      },
      {
        "id": "post",
        "label": "Blog post",
        "price": 300
      },
      {
        "id": "logo",
        "label": "Logo",
        "price": 900
      }
    ],
  };

  constructor() {
    const host = inject<ElementRef<HTMLElement>>(ElementRef);
    const element = () => host.nativeElement.querySelector("budget-calculator");
    const onChange = (event: Event) => {
      console.log((event as CustomEvent).detail);
    };
    afterNextRender(() => element()?.addEventListener("budget-calculator:change", onChange));
    inject(DestroyRef).onDestroy(() => element()?.removeEventListener("budget-calculator:change", onChange));
    const onQuote = (event: Event) => {
      console.log((event as CustomEvent).detail);
    };
    afterNextRender(() => element()?.addEventListener("budget-calculator:quote", onQuote));
    inject(DestroyRef).onDestroy(() => element()?.removeEventListener("budget-calculator:quote", onQuote));
  }
}

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 onChange(event) {
    console.log(event.detail);
  }

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

<budget-calculator
  headline="Build your quote"
  discount-percent={10}
  currency="USD"
  locale="en"
  items={[
    {
      "id": "landing",
      "label": "Landing page",
      "price": 1500
    },
    {
      "id": "post",
      "label": "Blog post",
      "price": 300
    },
    {
      "id": "logo",
      "label": "Logo",
      "price": 900
    }
  ]}
  onbudget-calculator:change={onChange}
  onbudget-calculator:quote={onQuote}
></budget-calculator>

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

budget-calculator {
  --bc-accent: #1d4ed8;
  --bc-radius: 6px;
}

Props

Props do componente, lidas do manifesto dele
Prop	Tipo	Padrão	O que faz
headline	string	nenhum	Replaces the default heading.
items	list	[{"id":"landing-page","label":"Landing page","p…	The priced items, in the site's language.
discountPercent	number 0 to 100	0	–
currency	BRL \| USD \| EUR	BRL	–
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
change	The visitor changed a quantity.
quote	The visitor asked for the quote; the page can open its own form with it.

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 "Calculadora de orçamento" (budget-calculator): Escolha itens e quantidades e veja um orçamento que soma sozinho. 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

Orçamento em etapas<quote-wizard>
Configurador de planos<pricing-configurator>
Simulador de crédito<finance-simulator>