Ermine UI

Quantity stepper

A compact minus, count and plus for how many of something; at one, the minus can become a bin that removes the item.

See it liveSource on GitHub

Install

If this is the first component in the project, set up once. This writes ermine.json and copies the theme stylesheet. The installation guide covers Vue, Nuxt and Astro.

npx ermineui init
pnpm dlx ermineui init
yarn dlx ermineui init
bunx ermineui init

Then add the component:

npx ermineui add quantity-stepper
pnpm dlx ermineui add quantity-stepper
yarn dlx ermineui add quantity-stepper
bunx ermineui add quantity-stepper

That copies 2 files into src/components/ui/quantity-stepper/. Files you already have are kept.

Use

import { QuantityStepper } from '@/components/ui/quantity-stepper'
<QuantityStepper v-model="quantity" :max="stock" removable label="Quantity of Wool throw" @remove="remove(item)" />
<WishlistButton v-model="saved" label="Save Wool throw for later" />

<SegmentedControl v-model="view" label="View">
  <SegmentedControlItem value="grid">Grid</SegmentedControlItem>
  <SegmentedControlItem value="list">List</SegmentedControlItem>
</SegmentedControl>

In Nuxt, with the auto-import setting, the tags work in templates without the import. In Astro, use it inside a Vue island.

What gets copied

FileWhere it goes
QuantityStepper.vuesrc/components/ui/quantity-stepper/QuantityStepper.vue
index.tssrc/components/ui/quantity-stepper/index.ts

The folders are the suggested ones. ermine.json says where yours are.

Source

This is exactly what the command copies. To install by hand, create each file below and the helpers listed above.

QuantityStepper.vue 124 lines
<script setup lang="ts">
import { computed } from 'vue'

const props = withDefaults(
  defineProps<{
    min?: number
    /** The most that can be chosen, e.g. what is left in stock. */
    max?: number
    /** Accessible name of the group: what is being counted, e.g. "Quantity of Wool throw". */
    label?: string
    /** At the lowest quantity, turn the minus into a bin that emits `remove`. */
    removable?: boolean
    disabled?: boolean
    size?: 'sm' | 'md'
    decreaseLabel?: string
    increaseLabel?: string
    removeLabel?: string
  }>(),
  { min: 1, label: 'Quantity', size: 'md', decreaseLabel: 'Decrease quantity', increaseLabel: 'Increase quantity', removeLabel: 'Remove' },
)

const emit = defineEmits<{
  /** The bin was pressed. Take the item out of your cart. */
  remove: []
}>()

/** How many. Always a whole number between min and max. */
const quantity = defineModel<number>({ default: 1 })

const atMin = computed(() => quantity.value <= props.min)
const atMax = computed(() => props.max !== undefined && quantity.value >= props.max)
const removes = computed(() => props.removable && atMin.value)

function nudge(direction: 1 | -1) {
  if (direction === -1 && removes.value) return emit('remove')
  quantity.value = Math.min(props.max ?? Infinity, Math.max(props.min, Math.round(quantity.value) + direction))
}
</script>

<template>
  <div class="er-quantity-stepper" role="group" :aria-label="label" :data-size="size" :data-disabled="disabled ? '' : undefined">
    <button type="button" :aria-label="removes ? removeLabel : decreaseLabel" :disabled="disabled || (atMin && !removable)" @click="nudge(-1)">
      <svg v-if="removes" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
        <path d="M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13M10 11v5M14 11v5" />
      </svg>
      <svg v-else viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M5 12h14" /></svg>
    </button>
    <!-- Announced when it changes, since the buttons themselves say nothing new. -->
    <output class="er-quantity-stepper-value" aria-live="polite">{{ quantity }}</output>
    <button type="button" :aria-label="increaseLabel" :disabled="disabled || atMax" @click="nudge(1)">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M12 5v14M5 12h14" /></svg>
    </button>
  </div>
</template>

<style>
@layer components {
  .er-quantity-stepper {
    display: inline-flex;
    align-items: center;
    height: var(--er-control-md);
    border: 1px solid var(--er-input);
    border-radius: var(--er-radius-pill);
    background: var(--er-input-background);
  }

  .er-quantity-stepper[data-size='sm'] {
    height: 1.875rem;
  }

  .er-quantity-stepper[data-disabled] {
    opacity: 0.5;
  }

  .er-quantity-stepper button {
    display: grid;
    place-items: center;
    width: var(--er-control-md);
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: var(--er-radius-pill);
    background: transparent;
    color: var(--er-muted-foreground);
    cursor: pointer;
    transition:
      background-color var(--er-duration),
      color var(--er-duration);
  }

  .er-quantity-stepper[data-size='sm'] button {
    width: 1.875rem;
  }

  .er-quantity-stepper button:hover {
    background: var(--er-accent);
    color: var(--er-accent-foreground);
  }

  .er-quantity-stepper button:focus-visible {
    outline: 2px solid var(--er-ring);
    outline-offset: 1px;
  }

  .er-quantity-stepper button:disabled {
    opacity: 0.4;
    pointer-events: none;
  }

  .er-quantity-stepper svg {
    width: 0.875rem;
    height: 0.875rem;
  }

  .er-quantity-stepper-value {
    min-width: 1.75rem;
    font-size: 0.875rem;
    font-weight: var(--er-weight-medium);
    font-variant-numeric: tabular-nums;
    text-align: center;
  }
}
</style>
index.ts 3 lines
/** Quantity stepper — a compact minus, count and plus for how many of something; at one, the minus can become a bin that removes the item. */
export { default as QuantityStepper } from './QuantityStepper.vue'