Stock indicator. Ermine UI

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 stock-indicator

pnpm dlx ermineui add stock-indicator

yarn dlx ermineui add stock-indicator

bunx ermineui add stock-indicator

That copies 2 files into src/components/ui/stock-indicator/, and the 1 component it is built from. Files you already have are kept.

Use

import { StockIndicator } from '@/components/ui/stock-indicator'

<script setup lang="ts">
import { StockIndicator } from '@/components/ui/stock-indicator'
</script>

<template>
  <StockIndicator />
</template>

In Nuxt, with the auto-import setting, the tags work in templates without the import. In Astro, use it inside a Vue island. The props are documented in the source below, on each one.

What gets copied

File	Where it goes
`StockIndicator.vue`	`src/components/ui/stock-indicator/StockIndicator.vue`
`index.ts`	`src/components/ui/stock-indicator/index.ts`

It is built from: Status. These are added with it.

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.

StockIndicator.vue 35 lines

<script setup lang="ts">
import { computed } from 'vue'
import { Status } from '../status'

const props = withDefaults(
  defineProps<{
    /** How many are left. Zero or less is out of stock. */
    quantity: number
    /** At or below this many, the count is shown as a nudge: "Only 3 left". */
    lowAt?: number
    inLabel?: string
    outLabel?: string
    /** What to say when few are left. */
    lowLabel?: (quantity: number) => string
  }>(),
  { lowAt: 5, inLabel: 'In stock', outLabel: 'Out of stock', lowLabel: (quantity: number) => `Only ${quantity} left` },
)

const level = computed(() => (props.quantity <= 0 ? 'out' : props.quantity <= props.lowAt ? 'low' : 'in'))
</script>

<template>
  <Status class="er-stock-indicator" :tone="level === 'in' ? 'success' : level === 'low' ? 'warning' : 'neutral'" :data-level="level">
    {{ level === 'in' ? inLabel : level === 'low' ? lowLabel(quantity) : outLabel }}
  </Status>
</template>

<style>
@layer components {
  .er-stock-indicator[data-level='out'] {
    color: var(--er-muted-foreground);
  }
}
</style>

index.ts 3 lines

/** Stock indicator — "In stock", "Only 3 left" or "Out of stock", from how many are left. */
export { default as StockIndicator } from './StockIndicator.vue'