Numpad

Teclado numérico para entrada de cantidades en TPV: 1-9, 0, decimal y backspace. Display opcional con etiqueta y valor. Atomic — sin slot. La interactividad se enchufa con Datastar (data-on:click en cada botón si quieres editar el signal).

Cobro de efectivo · con display

A cobrar · €19,40

€20,00

<div class="numpad-display"><div class="label">A cobrar · €19,40</div>
  <div class="value">€20,00</div>
</div>
<div class="numpad">
  <button type="button" class="numpad-btn">1</button>
  <button type="button" class="numpad-btn">2</button>
  <button type="button" class="numpad-btn">3</button>
  <button type="button" class="numpad-btn">4</button>
  <button type="button" class="numpad-btn">5</button>
  <button type="button" class="numpad-btn">6</button>
  <button type="button" class="numpad-btn">7</button>
  <button type="button" class="numpad-btn">8</button>
  <button type="button" class="numpad-btn">9</button>
  <button type="button" class="numpad-btn ghost">,</button>
  <button type="button" class="numpad-btn">0</button>
  <button type="button" class="numpad-btn ghost" aria-label="Borrar">⌫</button>
</div>

{% from "numpad.jinja" import numpad %}
{{ numpad(label="A cobrar · €19,40", display="€20,00") }}

<Numpad label="A cobrar · €19,40" display="€20,00" />

Install the Jinja addon and import the component:

pip install outfitkit

Then in your template:

{% from "&lt;component&gt;.jinja" import &lt;component&gt; %}
{{ &lt;component&gt;(...) }}

Or with JinjaX:

<Component ... />

Importe libre · sin backspace

Importe

12,50

<div class="numpad-display"><div class="label">Importe</div>
  <div class="value">12,50</div>
</div>
<div class="numpad">
  <button type="button" class="numpad-btn">1</button>
  <button type="button" class="numpad-btn">2</button>
  <button type="button" class="numpad-btn">3</button>
  <button type="button" class="numpad-btn">4</button>
  <button type="button" class="numpad-btn">5</button>
  <button type="button" class="numpad-btn">6</button>
  <button type="button" class="numpad-btn">7</button>
  <button type="button" class="numpad-btn">8</button>
  <button type="button" class="numpad-btn">9</button>
  <button type="button" class="numpad-btn ghost">,</button>
  <button type="button" class="numpad-btn">0</button>
</div>

{% from "numpad.jinja" import numpad %}
{{ numpad(label="Importe", display="12,50", show_backspace=False) }}

<Numpad label="Importe" display="12,50" />

Install the Jinja addon and import the component:

pip install outfitkit

Then in your template:

{% from "&lt;component&gt;.jinja" import &lt;component&gt; %}
{{ &lt;component&gt;(...) }}

Or with JinjaX:

<Component ... />

Solo teclado · sin display

<div class="numpad">
  <button type="button" class="numpad-btn">1</button>
  <button type="button" class="numpad-btn">2</button>
  <button type="button" class="numpad-btn">3</button>
  <button type="button" class="numpad-btn">4</button>
  <button type="button" class="numpad-btn">5</button>
  <button type="button" class="numpad-btn">6</button>
  <button type="button" class="numpad-btn">7</button>
  <button type="button" class="numpad-btn">8</button>
  <button type="button" class="numpad-btn">9</button>
  <button type="button" class="numpad-btn ghost">,</button>
  <button type="button" class="numpad-btn">0</button>
  <button type="button" class="numpad-btn ghost" aria-label="Borrar">⌫</button>
</div>

{% from "numpad.jinja" import numpad %}
{{ numpad() }}

<Numpad />

Install the Jinja addon and import the component:

pip install outfitkit

Then in your template:

{% from "&lt;component&gt;.jinja" import &lt;component&gt; %}
{{ &lt;component&gt;(...) }}

Or with JinjaX:

<Component ... />

Datastar · entrada reactiva

Importe

<div data-signals="{ amount: '0' }" style="max-width:240px">
  <div class="numpad-display">
    <div class="numpad-display-label">Importe</div>
    <div class="numpad-display-value" data-text="$amount + ' €'"></div>
  </div>
  <div class="numpad">
    <button type="button" class="numpad-btn" data-on:click="$amount = $amount === '0' ? '1' : $amount + '1'">1</button>
    <button type="button" class="numpad-btn" data-on:click="$amount = $amount === '0' ? '2' : $amount + '2'">2</button>
    <button type="button" class="numpad-btn" data-on:click="$amount = $amount === '0' ? '3' : $amount + '3'">3</button>
    <button type="button" class="numpad-btn" data-on:click="$amount = $amount === '0' ? '4' : $amount + '4'">4</button>
    <button type="button" class="numpad-btn" data-on:click="$amount = $amount === '0' ? '5' : $amount + '5'">5</button>
    <button type="button" class="numpad-btn" data-on:click="$amount = $amount === '0' ? '6' : $amount + '6'">6</button>
    <button type="button" class="numpad-btn" data-on:click="$amount = $amount === '0' ? '7' : $amount + '7'">7</button>
    <button type="button" class="numpad-btn" data-on:click="$amount = $amount === '0' ? '8' : $amount + '8'">8</button>
    <button type="button" class="numpad-btn" data-on:click="$amount = $amount === '0' ? '9' : $amount + '9'">9</button>
    <button type="button" class="numpad-btn numpad-btn--ghost" data-on:click="if (!$amount.includes(',')) $amount = $amount + ','">,</button>
    <button type="button" class="numpad-btn" data-on:click="$amount = $amount === '0' ? '0' : $amount + '0'">0</button>
    <button type="button" class="numpad-btn numpad-btn--ghost" data-on:click="$amount = $amount.length > 1 ? $amount.slice(0, -1) : '0'">⌫</button>
  </div>
</div>

<div data-signals="{ amount: '0' }" style="max-width:240px">
  <div class="numpad-display">
    <div class="numpad-display-label">Importe</div>
    <div class="numpad-display-value" data-text="$amount + ' €'"></div>
  </div>
  <div class="numpad">
    <button type="button" class="numpad-btn" data-on:click="$amount = $amount === '0' ? '1' : $amount + '1'">1</button>
    <button type="button" class="numpad-btn" data-on:click="$amount = $amount === '0' ? '2' : $amount + '2'">2</button>
    <button type="button" class="numpad-btn" data-on:click="$amount = $amount === '0' ? '3' : $amount + '3'">3</button>
    <button type="button" class="numpad-btn" data-on:click="$amount = $amount === '0' ? '4' : $amount + '4'">4</button>
    <button type="button" class="numpad-btn" data-on:click="$amount = $amount === '0' ? '5' : $amount + '5'">5</button>
    <button type="button" class="numpad-btn" data-on:click="$amount = $amount === '0' ? '6' : $amount + '6'">6</button>
    <button type="button" class="numpad-btn" data-on:click="$amount = $amount === '0' ? '7' : $amount + '7'">7</button>
    <button type="button" class="numpad-btn" data-on:click="$amount = $amount === '0' ? '8' : $amount + '8'">8</button>
    <button type="button" class="numpad-btn" data-on:click="$amount = $amount === '0' ? '9' : $amount + '9'">9</button>
    <button type="button" class="numpad-btn numpad-btn--ghost" data-on:click="if (!$amount.includes(',')) $amount = $amount + ','">,</button>
    <button type="button" class="numpad-btn" data-on:click="$amount = $amount === '0' ? '0' : $amount + '0'">0</button>
    <button type="button" class="numpad-btn numpad-btn--ghost" data-on:click="$amount = $amount.length > 1 ? $amount.slice(0, -1) : '0'">⌫</button>
  </div>
</div>

<div data-signals="{ amount: '0' }" style="max-width:240px">
  <div class="numpad-display">
    <div class="numpad-display-label">Importe</div>
    <div class="numpad-display-value" data-text="$amount + ' €'"></div>
  </div>
  <div class="numpad">
    <button type="button" class="numpad-btn" data-on:click="$amount = $amount === '0' ? '1' : $amount + '1'">1</button>
    <button type="button" class="numpad-btn" data-on:click="$amount = $amount === '0' ? '2' : $amount + '2'">2</button>
    <button type="button" class="numpad-btn" data-on:click="$amount = $amount === '0' ? '3' : $amount + '3'">3</button>
    <button type="button" class="numpad-btn" data-on:click="$amount = $amount === '0' ? '4' : $amount + '4'">4</button>
    <button type="button" class="numpad-btn" data-on:click="$amount = $amount === '0' ? '5' : $amount + '5'">5</button>
    <button type="button" class="numpad-btn" data-on:click="$amount = $amount === '0' ? '6' : $amount + '6'">6</button>
    <button type="button" class="numpad-btn" data-on:click="$amount = $amount === '0' ? '7' : $amount + '7'">7</button>
    <button type="button" class="numpad-btn" data-on:click="$amount = $amount === '0' ? '8' : $amount + '8'">8</button>
    <button type="button" class="numpad-btn" data-on:click="$amount = $amount === '0' ? '9' : $amount + '9'">9</button>
    <button type="button" class="numpad-btn numpad-btn--ghost" data-on:click="if (!$amount.includes(',')) $amount = $amount + ','">,</button>
    <button type="button" class="numpad-btn" data-on:click="$amount = $amount === '0' ? '0' : $amount + '0'">0</button>
    <button type="button" class="numpad-btn numpad-btn--ghost" data-on:click="$amount = $amount.length > 1 ? $amount.slice(0, -1) : '0'">⌫</button>
  </div>
</div>

Install the Jinja addon and import the component:

pip install outfitkit

Then in your template:

{% from "&lt;component&gt;.jinja" import &lt;component&gt; %}
{{ &lt;component&gt;(...) }}

Or with JinjaX:

<Component ... />

API

Prop	Tipo	Default	Descripción
`display`	str\|None	None	Valor mostrado en el display. Si `None` y sin `label`, no se renderiza display.
`label`	str\|None	None	Etiqueta sobre el valor del display.
`decimal`	str	","	Separador decimal (ES: `,`; EN: `.`).
`show_backspace`	bool	True	Renderiza la tecla de borrado.
`attrs`	dict	{}	Atributos HTML extra en el numpad.