feat: spin button

src/lib/components/SpinButton/README.md

@@ -0,0 +1,6 @@
+---
+path: component/spin-button
+title: Spin Button
+---
+
+# Spin Button

src/lib/components/SpinButton/example/+page.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+  import Quantity from './Quantity.svelte'
+</script>
+
+<Quantity />

src/lib/components/SpinButton/example/Quantity.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import { createSpinButton } from '$lib'
+
+  const { inputAttrs, incrementButtonAttrs, decrementButtonAttrs } =
+    createSpinButton()
+</script>
+
+<div class="flex rounded shadow">
+  <input
+    type="text"
+    {...$inputAttrs}
+    class="w-full rounded-l px-2 py-1 dark:bg-neutral-700"
+  />
+  <div class="flex flex-shrink flex-col">
+    <button
+      {...$incrementButtonAttrs}
+      class="w-full rounded-tr bg-white px-4 pb-1 pt-2 leading-4 hover:bg-neutral-200 dark:bg-neutral-700 dark:hover:bg-neutral-600"
+    >
+      +
+    </button>
+    <button
+      {...$decrementButtonAttrs}
+      class="w-full rounded-br bg-white px-4 pb-2 pt-1 leading-4 hover:bg-neutral-200 dark:bg-neutral-700 dark:hover:bg-neutral-600"
+    >
+      -
+    </button>
+  </div>
+</div>

src/lib/components/SpinButton/index.ts

@@ -0,0 +1,2 @@
+export * from './spinButton.js'
+export * from './spinButton.types.js'

src/lib/components/SpinButton/spinButton.ts

@@ -0,0 +1,222 @@
+import { onBrowserMount } from '$lib/helpers/environment.js'
+import { generateId } from '$lib/helpers/uuid.js'
+import { derived, get, readonly, writable } from 'svelte/store'
+import type { SpinButton, SpinButtonConfig } from './spinButton.types.js'
+
+export const createSpinButton = (config?: SpinButtonConfig): SpinButton => {
+  const { disabled, min, max, step, value, strict } = { ...config }
+
+  const value$ = writable(value || 0)
+  const disabled$ = writable(disabled || false)
+  const invalid$ = writable(false)
+
+  const min$ = writable(min || 0)
+  const max$ = writable(max || 100)
+  const step$ = writable(step || 1)
+
+  const baseId = generateId()
+  const inputId = `${baseId}-input`
+  const incrementId = `${baseId}-increment`
+  const decrementId = `${baseId}-decrement`
+
+  const inputAttrs = derived(
+    [disabled$, value$, invalid$],
+    ([disabled, value, invalid]) => ({
+      role: 'spinbutton',
+      'aria-disabled': disabled,
+      'aria-valuemin': config?.min || 0,
+      'aria-valuemax': config?.max || 100,
+      'aria-valuenow': value,
+      'aria-invalid': invalid && !strict ? true : undefined,
+      'data-spinbutton-input': inputId,
+    })
+  )
+
+  // If the value is above or equal to the max, disable the increment button
+  const incrementButtonAttrs = derived(
+    [disabled$, value$, max$],
+    ([disabled, value, max]) => {
+      const isDisabled = value >= max || disabled
+      return {
+        role: 'button',
+        'aria-disabled': isDisabled,
+        tabIndex: isDisabled ? -1 : 0,
+        'data-spinbutton-more': incrementId,
+      }
+    }
+  )
+
+  const decrementButtonAttrs = derived(
+    [disabled$, value$, min$],
+    ([disabled, value, min]) => {
+      const isDisabled = value <= min || disabled
+      return {
+        role: 'button',
+        'aria-disabled': isDisabled,
+        tabIndex: isDisabled ? -1 : 0,
+        'data-spinbutton-less': decrementId,
+      }
+    }
+  )
+
+  const increase = () => {
+    const disabled = get(disabled$)
+
+    if (disabled) {
+      return
+    }
+
+    const value = get(value$)
+    const max = get(max$)
+    const step = get(step$)
+    const newValue = value + step
+
+    if (newValue > max) {
+      value$.set(max)
+    } else {
+      value$.set(value + step)
+    }
+  }
+
+  const decrease = () => {
+    const disabled = get(disabled$)
+
+    if (disabled) {
+      return
+    }
+
+    const value = get(value$)
+    const min = get(min$)
+    const step = get(step$)
+    const newValue = value - step
+
+    if (newValue < min) {
+      value$.set(min)
+    } else {
+      value$.set(value - step)
+    }
+  }
+
+  const onInputChange = (event: Event) => {
+    const disabled = get(disabled$)
+
+    if (disabled) {
+      return
+    }
+
+    const target = event.target as HTMLInputElement
+    const value = Number(target.value)
+
+    if (Number.isNaN(value)) {
+      invalid$.set(true)
+      return
+    }
+
+    const min = get(min$)
+    const max = get(max$)
+
+    if (value < min || value > max) {
+      invalid$.set(true)
+      return
+    }
+  }
+
+  const onIncrementClick = (event: MouseEvent) => {
+    event.preventDefault()
+    increase()
+  }
+
+  const onIncrementKeyDown = (event: KeyboardEvent) => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault()
+      increase()
+    }
+  }
+
+  const onDecrementClick = (event: MouseEvent) => {
+    event.preventDefault()
+    decrease()
+  }
+
+  const onDecrementKeyDown = (event: KeyboardEvent) => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault()
+      decrease()
+    }
+  }
+
+  onBrowserMount(() => {
+    const inputNode = document.querySelector<HTMLInputElement>(
+      `[data-spinbutton-input="${inputId}"]`
+    )
+
+    if (!inputNode) {
+      throw new Error('Could not find the input for the spin button')
+    }
+
+    const incrementNode = document.querySelector<HTMLButtonElement>(
+      `[data-spinbutton-more="${incrementId}"]`
+    )
+
+    if (!incrementNode) {
+      throw new Error('Could not find the increment button for the spin button')
+    }
+
+    const decrementNode = document.querySelector<HTMLButtonElement>(
+      `[data-spinbutton-less="${decrementId}"]`
+    )
+
+    if (!decrementNode) {
+      throw new Error('Could not find the decrement button for the spin button')
+    }
+
+    inputNode.addEventListener('change', onInputChange)
+    incrementNode.addEventListener('click', onIncrementClick)
+    incrementNode.addEventListener('keydown', onIncrementKeyDown)
+    decrementNode.addEventListener('click', onDecrementClick)
+    decrementNode.addEventListener('keydown', onDecrementKeyDown)
+
+    // Update the input value and invalid state when the value changes
+    const unsubscribe = value$.subscribe((value) => {
+      inputNode.value = value.toString()
+
+      const min = get(min$)
+      const max = get(max$)
+      let isInvalid = false
+
+      if (strict) {
+        if (value < min) {
+          value$.set(min)
+        } else if (value > max) {
+          value$.set(max)
+        }
+      } else {
+        if (value < min || value > max) {
+          isInvalid = true
+        }
+      }
+
+      invalid$.set(isInvalid)
+    })
+
+    return () => {
+      unsubscribe()
+      inputNode.removeEventListener('change', onInputChange)
+      incrementNode.removeEventListener('click', onIncrementClick)
+      incrementNode.removeEventListener('keydown', onIncrementKeyDown)
+      decrementNode.removeEventListener('click', onDecrementClick)
+      decrementNode.removeEventListener('keydown', onDecrementKeyDown)
+    }
+  })
+
+  return {
+    value: value$,
+    disabled: disabled$,
+    invalid: readonly(invalid$),
+    inputAttrs,
+    incrementButtonAttrs,
+    decrementButtonAttrs,
+    increase,
+    decrease,
+  }
+}

src/lib/components/SpinButton/spinButton.types.ts

@@ -0,0 +1,39 @@
+import type { HTMLAttributes } from '$lib/helpers/types.js'
+import type { Readable, Writable } from 'svelte/store'
+
+export type SpinButtonConfig = {
+  /** If true, the input will be disabled. */
+  disabled?: boolean
+
+  /** If true, the input will be readonly. */
+  readonly?: boolean
+
+  /** The initial value of the input. Defaults to 0. */
+  value?: number
+
+  /** The minimum value of the input. Defaults to 0. */
+  min?: number
+
+  /** The maximum value of the input. Defaults to 100. */
+  max?: number
+
+  /** The amount to increment or decrement the value by. Defaults to 1. */
+  step?: number
+
+  /**
+   * If true, the value will be clamped to the min and max values. And the input
+   * will never be marked as invalid.
+   */
+  strict?: boolean
+}
+
+export type SpinButton = {
+  value: Writable<number>
+  disabled: Writable<boolean>
+  invalid: Readable<boolean>
+  inputAttrs: Readable<HTMLAttributes>
+  incrementButtonAttrs: Readable<HTMLAttributes>
+  decrementButtonAttrs: Readable<HTMLAttributes>
+  increase: () => void
+  decrease: () => void
+}

src/lib/index.ts

@@ -13,6 +13,7 @@ export * from './components/Menu/index.js'
 export * from './components/Popover/index.js'
 export * from './components/RadioGroup/index.js'
 export * from './components/Select/index.js'
+export * from './components/SpinButton/index.js'
 export * from './components/Switch/index.js'
 export * from './components/Tabs/index.js'
 export * from './components/TagGroup/index.js'