Stepper Vue Component

Stepper Components
Stepper Props
Stepper Events
Examples

Stepper Components

There are following components included:

Stepper

Stepper Props

Name	Type	Default	Description
buttonsOnly	boolean	false	Disables inner value container between stepper buttons
colors	object		Object with Tailwind CSS colors classes
colors.clearBgIos	string	'bg-transparent active:bg-primary/15'
colors.clearBgMaterial	string	'bg-transparent'
colors.fillBgIos	string	'bg-primary active:bg-ios-primary-shade''
colors.fillBgMaterial	string	'bg-md-light-primary dark:bg-md-dark-primary'
colors.fillTextIos	string	'text-white'
colors.fillTextMaterial	string	'text-md-light-on-primary dark:text-md-dark-on-primary'
colors.fillTouchRipple	string	'touch-ripple-white dark:touch-ripple-primary'
colors.outlineBgIos	string	'bg-transparent active:bg-primary/15'
colors.outlineBgMaterial	string	'bg-transparent'
colors.outlineBorderIos	string	'border-primary'
colors.outlineBorderMaterial	string	'border-md-light-outline dark:border-md-dark-outline'
colors.textIos	string	'text-primary'
colors.textMaterial	string	'text-md-light-primary dark:text-md-dark-primary'
colors.touchRipple	string	'touch-ripple-primary'
component	string	'div'	Component's HTML Element
input	boolean	false	Defines should it render element or not
inputDisabled	boolean	false	Defines whether the stepper input is disabled or not
inputPlaceholder	string		Input placeholder
inputReadOnly	boolean	false	Defines whether the stepper input is read only or not
inputType	string	'text'	Input type
large	boolean	undefined	Makes stepper large. Overwrites
largeIos	boolean	false	Makes stepper large in iOS theme
largeMaterial	boolean	false	Makes stepper large in Material theme
outline	boolean	undefined	Makes stepper outline. Overwrites
outlineIos	boolean	false	Makes stepper outline in iOS theme
outlineMaterial	boolean	false	Makes stepper outline in Material theme
raised	boolean	undefined	Makes stepper raised (with shadow). Overwrites
raisedIos	boolean	false	Makes stepper raised (with shadow) in iOS theme
raisedMaterial	boolean	false	Makes stepper raised (with shadow) in Material theme
rounded	boolean	undefined	Makes stepper round. Overwrites
roundedIos	boolean	false	Makes stepper round in iOS theme
roundedMaterial	boolean	false	Makes stepper round in Material theme
small	boolean	undefined	Makes stepper small. Overwrites
smallIos	boolean	false	Makes stepper small in iOS theme
smallMaterial	boolean	false	Makes stepper small in Material theme
value	number	0	Stepper value

Stepper Events

Name	Type	Description
blur	function(e)	Stepper input
change	function(e)	Stepper input
focus	function(e)	Stepper input
input	function(e)	Stepper input
minus	function(e)	Stepper "minus" button click handler
plus	function(e)	Stepper "plus" button click handler

Examples

Stepper.vue

<template>
  <k-page>
    <k-navbar title="Stepper" />

    <k-block-title>Shape and size</k-block-title>
    <k-block strong inset class="text-center space-y-4">
      <div class="grid grid-cols-2 gap-4">
        <div>
          <div class="block text-xs mb-1">Default</div>
          <k-stepper :value="value" @plus="increase" @minus="decrease" />
        </div>
        <div>
          <div class="block text-xs mb-1">Round</div>
          <k-stepper
            :value="value"
            rounded
            @plus="increase"
            @minus="decrease"
          />
        </div>
      </div>

      <div class="grid grid-cols-2 gap-4 margin-top">
        <div>
          <div class="block text-xs mb-1">Outline</div>
          <k-stepper
            :value="value"
            outline
            @plus="increase"
            @minus="decrease"
          />
        </div>
        <div>
          <div class="block text-xs mb-1">Rounded Outline</div>
          <k-stepper
            :value="value"
            outline
            rounded
            @plus="increase"
            @minus="decrease"
          />
        </div>
      </div>

      <div class="grid grid-cols-2 gap-4 margin-top">
        <div>
          <div class="block text-xs mb-1">Small</div>
          <k-stepper :value="value" small @plus="increase" @minus="decrease" />
        </div>
        <div>
          <div class="block text-xs mb-1">Small Round</div>
          <k-stepper
            :value="value"
            small
            rounded
            @plus="increase"
            @minus="decrease"
          />
        </div>
      </div>

      <div class="grid grid-cols-2 gap-4 margin-top">
        <div>
          <div class="block text-xs mb-1">Small Outline</div>
          <k-stepper
            :value="value"
            small
            outline
            @plus="increase"
            @minus="decrease"
          />
        </div>
        <div>
          <div class="block text-xs mb-1">Small Rounded Outline</div>
          <k-stepper
            :value="value"
            small
            rounded
            outline
            @plus="increase"
            @minus="decrease"
          />
        </div>
      </div>

      <div class="grid grid-cols-2 gap-4 margin-top">
        <div>
          <div class="block text-xs mb-1">Large</div>
          <k-stepper :value="value" large @plus="increase" @minus="decrease" />
        </div>
        <div>
          <div class="block text-xs mb-1">Large Round</div>
          <k-stepper
            :value="value"
            large
            rounded
            @plus="increase"
            @minus="decrease"
          />
        </div>
      </div>

      <div class="grid grid-cols-2 gap-4 margin-top">
        <div>
          <div class="block text-xs mb-1">Large Outline</div>
          <k-stepper
            :value="value"
            large
            outline
            @plus="increase"
            @minus="decrease"
          />
        </div>
        <div>
          <div class="block text-xs mb-1">Large Rounded Outline</div>
          <k-stepper
            :value="value"
            large
            rounded
            outline
            @plus="increase"
            @minus="decrease"
          />
        </div>
      </div>
    </k-block>

    <k-block-title>Raised</k-block-title>
    <k-block strong inset class="text-center space-y-4">
      <div class="grid grid-cols-2 gap-4">
        <div>
          <div class="block text-xs mb-1">Default</div>
          <k-stepper :value="value" raised @plus="increase" @minus="decrease" />
        </div>
        <div>
          <div class="block text-xs mb-1">Round</div>
          <k-stepper
            :value="value"
            raised
            rounded
            @plus="increase"
            @minus="decrease"
          />
        </div>
      </div>

      <div class="grid grid-cols-2 gap-4 margin-top">
        <div>
          <div class="block text-xs mb-1">Outline</div>
          <k-stepper
            :value="value"
            raised
            outline
            @plus="increase"
            @minus="decrease"
          />
        </div>
        <div>
          <div class="block text-xs mb-1">Round Outline</div>
          <k-stepper
            :value="value"
            raised
            outline
            rounded
            @plus="increase"
            @minus="decrease"
          />
        </div>
      </div>

      <div class="grid grid-cols-2 gap-4 margin-top">
        <div>
          <div class="block text-xs mb-1">Small</div>
          <k-stepper
            :value="value"
            raised
            small
            @plus="increase"
            @minus="decrease"
          />
        </div>
        <div>
          <div class="block text-xs mb-1">Small Round</div>
          <k-stepper
            :value="value"
            raised
            small
            rounded
            @plus="increase"
            @minus="decrease"
          />
        </div>
      </div>

      <div class="grid grid-cols-2 gap-4 margin-top">
        <div>
          <div class="block text-xs mb-1">Small Outline</div>
          <k-stepper
            :value="value"
            raised
            small
            outline
            @plus="increase"
            @minus="decrease"
          />
        </div>
        <div>
          <div class="block text-xs mb-1">Small Rounded Outline</div>
          <k-stepper
            :value="value"
            raised
            small
            rounded
            outline
            @plus="increase"
            @minus="decrease"
          />
        </div>
      </div>

      <div class="grid grid-cols-2 gap-4 margin-top">
        <div>
          <div class="block text-xs mb-1">Large</div>
          <k-stepper
            :value="value"
            raised
            large
            @plus="increase"
            @minus="decrease"
          />
        </div>
        <div>
          <div class="block text-xs mb-1">Large Round</div>
          <k-stepper
            :value="value"
            raised
            large
            rounded
            @plus="increase"
            @minus="decrease"
          />
        </div>
      </div>

      <div class="grid grid-cols-2 gap-4 margin-top">
        <div>
          <div class="block text-xs mb-1">Large Outline</div>
          <k-stepper
            :value="value"
            raised
            large
            outline
            @plus="increase"
            @minus="decrease"
          />
        </div>
        <div>
          <div class="block text-xs mb-1">Large Rounded Outline</div>
          <k-stepper
            :value="value"
            raised
            large
            rounded
            outline
            @plus="increase"
            @minus="decrease"
          />
        </div>
      </div>
    </k-block>
    <k-block-title>With Text Input</k-block-title>
    <k-block strong inset class="text-center space-y-4">
      <div>
        <k-stepper
          :value="inputValue"
          input
          @input="onInputInput"
          @blur="onInputBlur"
          @plus="increaseInput"
          @minus="decreaseInput"
        />
      </div>
      <div>
        <k-stepper
          :value="inputValue"
          outline
          input
          @input="onInputInput"
          @blur="onInputBlur"
          @plus="increaseInput"
          @minus="decreaseInput"
        />
      </div>
    </k-block>
    <k-block-title>Only Buttons</k-block-title>
    <k-list strong inset>
      <k-list-item :title=="`Value is ${value}`">
        <template #after>
          <k-stepper
            :value="value"
            buttons-only
            @plus="increase"
            @minus="decrease"
          />
        </template>
      </k-list-item>
      <k-list-item :title=="`Value is ${value}`">
        <template #after>
          <k-stepper
            :value="value"
            outline
            buttons-only
            @plus="increase"
            @minus="decrease"
          />
        </template>
      </k-list-item>
      <k-list-item :title=="`Value is ${value}`">
        <template #after>
          <k-stepper
            :value="value"
            raised
            outline
            buttons-only
            @plus="increase"
            @minus="decrease"
          />
        </template>
      </k-list-item>
    </k-list>

    <k-block-title>Colors</k-block-title>
    <k-block strong inset class="text-center space-y-4">
      <div class="grid grid-cols-2 gap-4">
        <div>
          <k-stepper
            :value="value"
            class="k-color-brand-red"
            @plus="increase"
            @minus="decrease"
          />
        </div>
        <div>
          <k-stepper
            :value="value"
            rounded
            class="k-color-brand-green"
            @plus="increase"
            @minus="decrease"
          />
        </div>
      </div>

      <div class="grid grid-cols-2 gap-4">
        <div>
          <k-stepper
            :value="value"
            class="k-color-brand-yellow"
            @plus="increase"
            @minus="decrease"
          />
        </div>
        <div>
          <k-stepper
            :value="value"
            rounded
            class="k-color-brand-purple"
            @plus="increase"
            @minus="decrease"
          />
        </div>
      </div>
    </k-block>
  </k-page>
</template>
<script>
  import {
    kPage,
    kNavbar,
    kNavbarBackLink,
    kStepper,
    kBlock,
    kBlockTitle,
    kList,
    kListItem,
  } from 'konsta/vue';
  import { ref } from 'vue';

  export default {
    components: {
      kPage,
      kNavbar,
      kNavbarBackLink,
      kStepper,
      kBlock,
      kBlockTitle,
      kList,
      kListItem,
    },
    setup() {
      const value = ref(1);
      const increase = () => {
        value.value += 1;
      };
      const decrease = () => {
        value.value = value.value - 1 < 0 ? 0 : value.value - 1;
      };
      const inputValue = ref(1);
      const increaseInput = () => {
        const v = parseInt(inputValue.value, 10);
        if (isNaN(v)) inputValue.value = 0;
        else inputValue.value = v + 1;
      };
      const decreaseInput = () => {
        const v = parseInt(inputValue, 10);
        if (isNaN(v)) inputValue.value = 0;
        inputValue.value = v - 1 < 0 ? 0 : v - 1;
      };
      const onInputInput = (e) => {
        inputValue.value = parseInt(e.target.value, 10);
      };
      const onInputBlur = () => {
        if (isNaN(parseInt(inputValue.value, 10))) inputValue.value = 0;
      };

      return {
        value,
        increase,
        decrease,
        inputValue,
        increaseInput,
        decreaseInput,
        onInputInput,
        onInputBlur,
      };
    },
  };
</script>

Stepper Vue Component

Contents

Stepper Components

Stepper Props

Stepper Events

Examples