Returnless UI

Stepper ​

Props
modelValue?:
number
Defaults to unknown
color?:
any
Defaults to null
The color of the stepper.
label:
string
Defaults to unknown
The label for the stepper.
max?:
number
Defaults to undefined
The maximum value of the stepper.
min?:
number
Defaults to undefined
The minimum value of the stepper.
labelHidden?:
boolean
Defaults to false
Whether the label is hidden.
Events
update:modelValue:
[value: number]

Usage ​

QTY Received
js
<script lang="ts" setup>
import { Stepper } from '@returnless/focus-ui';

const stepperNumber = ref(0);

const stepperColor = function(value: number): string | null {
  if (value < 2) {
    return null;
  } else if (value < 3) {
    return 'red';
  } else if (value < 4) {
    return 'yellow';
  } else {
    return 'green';
  }
}
</script>

<template>
  <Stepper
    v-model="stepperNumber"
    :min="0"
    :max="5"
    label="QTY Received"
    :color="stepperColor(stepperNumber)"
  />
</template>

Hidden label ​

js
<script lang="ts" setup>
import { Stepper } from '@returnless/focus-ui';

const stepperNumber = ref(0);

const stepperColor = function(value: number): string | null {
  if (value < 2) {
    return null;
  } else if (value < 3) {
    return 'red';
  } else if (value < 4) {
    return 'yellow';
  } else {
    return 'green';
  }
}
</script>

<template>
  <Stepper
    v-model="stepperNumber"
    :min="0"
    :max="5"
    label="QTY Received"
    label-hidden
    :color="stepperColor(stepperNumber)"
  />
</template>