Epicmax - We are the core team behind Vuestic UI and Vuestic Admin and frontend development company specializing in Vue.js since our founding in 2017.
🔥🔥🔥 Hire us

Counter
#

counternumber input

The va-counter component is intended to be used as a simple counter.

Examples
#

Basic usage
#

Open in GitHub

Manual input
#

With manual-input the user can manually enter a value.

Open in GitHub

Style
#

There are tree styles for component: outlined (default), solid and bordered. You can change component looks with presets props

Open in GitHub

Buttons
#

By default, va-counter uses internal icons. The component with prop buttons will use external buttons.

Open in GitHub

Width
#

You can set the width of the entire component with width, as well as the indentation of external buttons with margins.

Open in GitHub

Buttons style
#

You can select different button styles using properties flat (by default flat = true), rounded (by default rounded = false) and margins.

Open in GitHub

Custom icons and colors
#

You can select different icons using the increaseIcon and decreaseIcon properties, and you can also select colors using color and text-color.

Open in GitHub

State
#

Component can be disabled or readonly.

Open in GitHub

Max, min, step
#

You can define min, max and step values.

Open in GitHub

Slots
#

You can use slots for pass custom elements: content (you can access to value) instead of input element, decreaseAction (you can access to decrease function) instead of decrease icon or button and increaseAction (you can access to increase function) instead of increase icon or button.

10 copies
Open in GitHub

API
#

Props #

NameDescriptionTypesDefault
ariaDecreaseLabel

The aria-label of decrease button

String

"$t:decreaseCounter"

ariaIncreaseLabel

The aria-label of increase button

String

"$t:increaseCounter"

ariaLabel

The aria-label of content of counter

String

"$t:counterValue"

background

The color name of the background color

String

-

buttons

Enables display of the component with external buttons

Boolean

false

clearable

Boolean

false

clearableIcon

Sets the cleaning button icon.

String

"va-clear"

clearValue

Component value that will be used as new value when component is cleared

String

""

color

Sets component color

String

"primary"

counter

Boolean

-

decreaseIcon

Sets a decrease icon

String

"va-minus"

dirty

Sets the dirty state of the component

Boolean

false

disabled

Disable the component

Boolean

false

error

Show component in error state.

Boolean

-

errorCount

Number of error messages displayed.

String | Number

1

errorMessages

Error messages for the component.

Array | String

-

flat

Applies flat styling of outside buttons

Boolean

true

immediateValidation

Sets the validation to be performed when the component is mounted

Boolean

false

increaseIcon

Sets an increase icon

String

"va-plus"

innerLabel

Boolean

false

inputAriaDescribedby

String

-

inputAriaLabel

String

"$t:inputField"

inputAriaLabelledby

String

-

label

Sets component label

String

""

loading

Indicates that something is loading (spinner icon).

Boolean

false

longPressDelay

The number of milliseconds after which another event will be sent when you are long pressing the button

Number | String

500

manualInput

Allows user to manually input value

Boolean

false

margins

Sets the margin of the outside buttons

String | Number

"4px"

max

The maximum value to accept for this input

Number | String

-

maxLength

Number | String

-

messages

Displays a list of hint messages (or message if using a string)

Array | String

[]

min

The minimum value to accept for this input

Number | String

-

modelValue

The value of the v-model bindings.

String | Number

0

name

Applies name to internal input component. Useful for native forms.

String

-

placeholder

String

""

preset

Named preset combination of component props.

String | Array

-

readonly

Puts component in readonly state

Boolean

false

requiredMark

Adds required mark to the label

Boolean

false

rounded

Adds rounded corners to outside buttons

Boolean

false

rules

Validation rules .

Array

[]

stateful

Add possibility to work with component without setting v-model.

Boolean

false

step

Step of changing input field values

Number | String

1

success

Show component in success state.

Boolean

false

Events #

NameDescription

blur

On blur.

change

The change input event is fired when input is submitted (when manual-input prop enabled)

click:decreaseButton

The event is triggered when clicked decrease outside button

click:decreaseIcon

The event is triggered when clicked decrease inner icon

click:increaseButton

The event is triggered when clicked increase outside button

click:increaseIcon

The event is triggered when clicked increase inner icon

focus

On focus.

update:dirty

Fires when the dirty state changes

update:error

Fires when the error state changes

update:errorMessages

Fires when the error messages change

update:modelValue

The event is triggered when the component needs to change the model. Is also used by v-model and must be listed after the v-model

Slots #

NameDescription

content

Adds an item instead the input

decreaseAction

Adds an item instead of decrease icon or button

increaseAction

Adds an item instead of increase icon or button

Css Variables #

NameDefault Value
--va-counter-button-inner-padding 6px
--va-counter-button-outer-padding 8px

Change log #

v1.9.0

  • Added icon aliases for add and remove icons

  • Correct null values for min/max props.

v1.8.0

  • Removed width props, use style="width: *" instead

  • Changed default size to --va-form-element-default-width-small (120px) outline, bordered props are removed. Component is always outlined. solid and bordered props are moved to preset prop (preset="solid", preset="bordered")