Catalog with photos and append-only print-file revisions, a stock ledger attributing every take/restock/adjust to a badge-resolved employee, a touch kiosk (scan bin, scan badge, keypad quantity) with a deliberately open decrement-only take endpoint, 1x0.5in CODE128 bin labels, low-stock email alerts to selected users, roles, or addresses, and stock/consumption/by-person reports with a cache-vs-ledger reconcile. Ships disabled; enable per site. Contract 0.13.0 adds the mailer and the User/Role models to the plugin surface.
55 lines
1.5 KiB
Vue
55 lines
1.5 KiB
Vue
<template>
|
|
<div class="touch-keypad">
|
|
<button v-for="digit in digits" :key="digit" type="button"
|
|
class="keypad-button" @click="$emit('digit', digit)">
|
|
{{ digit }}
|
|
</button>
|
|
<button type="button" class="keypad-button keypad-action"
|
|
@click="$emit('clear')">Clear</button>
|
|
<button type="button" class="keypad-button" @click="$emit('digit', '0')">0</button>
|
|
<button type="button" class="keypad-button keypad-action"
|
|
aria-label="Backspace" @click="$emit('backspace')">⌫</button>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const digits = ['1', '2', '3', '4', '5', '6', '7', '8', '9']
|
|
defineEmits(['digit', 'clear', 'backspace'])
|
|
</script>
|
|
|
|
<style scoped>
|
|
.touch-keypad {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 5.2rem);
|
|
gap: 0.65rem;
|
|
justify-content: center;
|
|
}
|
|
.keypad-button {
|
|
height: 4.4rem;
|
|
font-size: 1.9rem;
|
|
font-weight: 600;
|
|
font-variant-numeric: tabular-nums;
|
|
border-radius: 0.75rem;
|
|
border: 1px solid var(--border);
|
|
background: var(--bg-card-solid, var(--bg-card));
|
|
color: var(--text);
|
|
cursor: pointer;
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
|
|
transition: transform 0.05s ease, background 0.1s ease;
|
|
-webkit-tap-highlight-color: transparent;
|
|
user-select: none;
|
|
}
|
|
.keypad-button:hover { border-color: var(--primary); }
|
|
.keypad-button:active {
|
|
background: var(--primary);
|
|
color: #fff;
|
|
transform: scale(0.96);
|
|
}
|
|
.keypad-action {
|
|
font-size: 1.1rem;
|
|
font-weight: 500;
|
|
color: var(--text-light);
|
|
}
|
|
.keypad-action:active { color: #fff; }
|
|
</style>
|