"use client";

import { ScrubNumberInput } from "./index";

export interface DemoProps {
  label?: string;
  value?: number;
  min?: number;
  max?: number;
  accentColor?: string;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({ label = "Weight", value = 12, min = 0, max = 200, accentColor = "#FF6A1F" }: DemoProps) {
  return (
    <div className="flex items-center justify-center p-8">
      <ScrubNumberInput label={label} value={value} min={min} max={max} accentColor={accentColor} />
    </div>
  );
}

1d:T15cd, 1e:T11566,

<script setup lang="ts">
import { computed, ref, watch } from "vue";

const props = withDefaults(
  defineProps<{
    label?: string;
    value?: number;
    min?: number;
    max?: number;
    step?: number;
    accentColor?: string;
  }>(),
  { label: "Weight", value: 12, min: 0, max: 200, step: 1, accentColor: "#FF6A1F" },
);

const emit = defineEmits<{ change: [value: number] }>();

function clamp(n: number, min: number, max: number) {
  return Math.min(max, Math.max(min, n));
}

const PIXELS_PER_STEP = 6;

const current = ref(clamp(props.value, props.min, props.max));
const editing = ref(false);
const draft = ref(String(current.value));
const dragging = ref(false);
const dragStartX = ref(0);
const dragStartValue = ref(0);

const displayValue = computed(() => (editing.value ? draft.value : String(current.value)));

watch(current, (v) => {
  if (!editing.value) draft.value = String(v);
});

function commit(next: number) {
  const clamped = clamp(Math.round(next), props.min, props.max);
  if (clamped !== current.value) emit("change", clamped);
  current.value = clamped;
  return clamped;
}

function nudge(direction: 1 | -1) {
  commit(current.value + direction * props.step);
}

function onHandlePointerDown(event: PointerEvent) {
  if (event.button !== 0) return;
  (event.currentTarget as HTMLElement).setPointerCapture(event.pointerId);
  dragStartX.value = event.clientX;
  dragStartValue.value = current.value;
  dragging.value = true;
}

function onHandlePointerMove(event: PointerEvent) {
  if (!dragging.value) return;
  const deltaX = event.clientX - dragStartX.value;
  const delta = Math.round(deltaX / PIXELS_PER_STEP) * props.step;
  commit(dragStartValue.value + delta);
}

function endDrag(event: PointerEvent) {
  if (!dragging.value) return;
  dragging.value = false;
  const el = event.currentTarget as HTMLElement;
  if (el.hasPointerCapture(event.pointerId)) el.releasePointerCapture(event.pointerId);
}

function onFocus() {
  editing.value = true;
}

function onInput(event: Event) {
  draft.value = (event.target as HTMLInputElement).value.replace(/[^0-9-]/g, "");
}

function onKeydown(event: KeyboardEvent) {
  if (event.key === "ArrowUp") {
    event.preventDefault();
    nudge(1);
  } else if (event.key === "ArrowDown") {
    event.preventDefault();
    nudge(-1);
  } else if (event.key === "Enter") {
    event.preventDefault();
    const parsed = Number(draft.value);
    commit(Number.isFinite(parsed) ? parsed : current.value);
    editing.value = false;
    (event.target as HTMLInputElement).blur();
  }
}

function onBlur(event: FocusEvent) {
  editing.value = false;
  const parsed = Number((event.target as HTMLInputElement).value);
  commit(Number.isFinite(parsed) ? parsed : current.value);
}
</script>

<template>
  <div class="scrub-field" :style="{ '--scrub-accent': accentColor }">
    <div class="scrub-group">
      <button type="button" class="scrub-btn" :disabled="current <= min" aria-label="Decrease" @click="nudge(-1)">
        <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" aria-hidden="true">
          <path d="M5 12h14" />
        </svg>
      </button>
      <input
        type="text"
        inputmode="numeric"
        class="scrub-input"
        :value="displayValue"
        :aria-label="label"
        @focus="onFocus"
        @input="onInput"
        @keydown="onKeydown"
        @blur="onBlur"
      />
      <button type="button" class="scrub-btn" :disabled="current >= max" aria-label="Increase" @click="nudge(1)">
        <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" aria-hidden="true">
          <path d="M12 5v14M5 12h14" />
        </svg>
      </button>
    </div>
    <span
      class="scrub-handle"
      :class="{ 'scrub-handle--active': dragging }"
      title="Drag sideways to adjust"
      @pointerdown="onHandlePointerDown"
      @pointermove="onHandlePointerMove"
      @pointerup="endDrag"
      @pointercancel="endDrag"
    >
      {{ label }}
    </span>
  </div>
</template>

<style scoped>
.scrub-field {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: system-ui, sans-serif;
}
.scrub-group {
  display: inline-flex;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 0.15);
  border-radius: 0.5rem;
  background: rgb(255 255 255 / 0.04);
}
.scrub-btn {
  display: flex;
  height: 2.25rem;
  width: 2.25rem;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: rgb(255 255 255 / 0.7);
  cursor: pointer;
  transition: color 120ms ease;
}
.scrub-btn:hover:not(:disabled) {
  color: #fff;
}
.scrub-btn:disabled {
  color: rgb(255 255 255 / 0.25);
  cursor: not-allowed;
}
.scrub-btn:focus-visible,
.scrub-input:focus-visible {
  outline: 2px solid var(--scrub-accent);
  outline-offset: 1px;
}
.scrub-input {
  width: 3rem;
  border: none;
  border-left: 1px solid rgb(255 255 255 / 0.1);
  border-right: 1px solid rgb(255 255 255 / 0.1);
  background: transparent;
  color: #fff;
  font: 600 0.875rem/2.25rem system-ui, sans-serif;
  text-align: center;
  font-variant-numeric: tabular-nums;
  outline: none;
}
.scrub-handle {
  cursor: ew-resize;
  touch-action: none;
  user-select: none;
  white-space: nowrap;
  font-size: 0.75rem;
  font-weight: 500;
  color: rgb(255 255 255 / 0.4);
  transition: color 150ms ease;
}
.scrub-handle:hover,
.scrub-handle--active {
  color: var(--scrub-accent);
}
</style>

Nearby