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).
Copy
<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>
Copy
{% from "numpad.jinja" import numpad %}
{{ numpad(label="A cobrar · €19,40", display="€20,00") }}
Copy
<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 "<component>.jinja" import <component> %}
{{ <component>(...) }}
Or with JinjaX:
<Component ... />
Copy
<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>
Copy
{% from "numpad.jinja" import numpad %}
{{ numpad(label="Importe", display="12,50", show_backspace=False) }}
Copy
<Numpad label="Importe" display="12,50" />
Install the Jinja addon and import the component:
pip install outfitkit
Then in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}
Or with JinjaX:
<Component ... />
Copy
<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>
Copy
{% from "numpad.jinja" import numpad %}
{{ numpad() }}
Install the Jinja addon and import the component:
pip install outfitkit
Then in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}
Or with JinjaX:
<Component ... />
Copy
<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>
Copy
<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>
Copy
<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 "<component>.jinja" import <component> %}
{{ <component>(...) }}
Or with JinjaX:
<Component ... />
API
Prop Tipo Default Descripción
displaystr|None None Valor mostrado en el display. Si None y sin label, no se renderiza display.
labelstr|None None Etiqueta sobre el valor del display.
decimalstr "," Separador decimal (ES: ,; EN: .).
show_backspacebool True Renderiza la tecla de borrado.
attrsdict {} Atributos HTML extra en el numpad.