OOKNET                             [ /  search the index  ]  
──────────────────────────────────────────────────────────────────────────────────────
[ KB ]    [ GIT ]    [ PROJECTS ]    [ ABOUT ]                                      EN
══════════════════════════════════════════════════════════════════════════════════════
OOKNET   [ /  search  ]  
────────────────────────────────────────────────
[ KB ] [ GIT ] [ PROJECTS ] [ ABOUT ]
════════════════════════════════════════════════
 
 
master @ 31 LINES
 
[ HISTORY ]  [ UP ]
 

---
// [ - ] 042 [ + ] - native number input between two step buttons.
import type { Props } from "./NumberStepper";
import "./NumberStepper.scss";

const { name, value = 0, min, max, step = 1, cells = 4 } = Astro.props as Props;
---
<span class="num-stepper"><button type="button" class="step-btn" data-step="down" 
aria-label={`Decrease ${name}`}>[ - ]</button>{" "}<input
  class="num-input"
  type="number"
  name={name}
  value={value}
  min={min}
  max={max}
  step={step}
  aria-label={name}
  style={`width: calc(var(--cell-w) * ${cells})`}
/>{" "}<button type="button" class="step-btn" data-step="up" aria-label={`Increase
 ${name}`}>[ + ]</button></span>

<script>
  document.addEventListener("click", (e) => {
    const btn = (e.target as HTMLElement).closest<HTMLButtonElement>(".step-btn");
    if (!btn) return;
    const input = btn.closest(".num-stepper")?.querySelector<HTMLInputElement>(".n
um-input");
    if (!input) return;
    if (btn.dataset.step === "up") input.stepUp();
    else input.stepDown();
    input.dispatchEvent(new Event("change", { bubbles: true }));
  });
</script>


---
// [ - ] 042 [ + ] - native number input bet
ween two step buttons.
import type { Props } from "./NumberStepper"
;
import "./NumberStepper.scss";

const { name, value = 0, min, max, step = 1,
 cells = 4 } = Astro.props as Props;
---
<span class="num-stepper"><button type="butt
on" class="step-btn" data-step="down" aria-l
abel={`Decrease ${name}`}>[ - ]</button>{" "
}<input
  class="num-input"
  type="number"
  name={name}
  value={value}
  min={min}
  max={max}
  step={step}
  aria-label={name}
  style={`width: calc(var(--cell-w) * ${cell
s})`}
/>{" "}<button type="button" class="step-btn
" data-step="up" aria-label={`Increase ${nam
e}`}>[ + ]</button></span>

<script>
  document.addEventListener("click", (e) => 
{
    const btn = (e.target as HTMLElement).cl
osest<HTMLButtonElement>(".step-btn");
    if (!btn) return;
    const input = btn.closest(".num-stepper"
)?.querySelector<HTMLInputElement>(".num-inp
ut");
    if (!input) return;
    if (btn.dataset.step === "up") input.ste
pUp();
    else input.stepDown();
    input.dispatchEvent(new Event("change", 
{ bubbles: true }));
  });
</script>

 
──────────────────────────────────────────────────────────────────────────────────────
OOKNET
────────────────────────────────────────────────
OOKNET