Installation

npm i @tryg/vue-ui-library

Usage

Install the component library as a Vue plugin. This globally registers all Anchor components.

main.js

import { createApp } from 'vue';
import { ComponentLibrary } from '@tryg/vue-ui-library';
import App from './App.vue';

const app = createApp(App);
app.use(ComponentLibrary);
app.mount('#app');

YourComponent.vue

<template>
  <anchor-quantity :value="0" :min="0" :max="10"></anchor-quantity>
</template>

Import only the components you need for optimal bundle size.

YourComponent.vue

<script setup>
import { AnchorQuantity } from '@tryg/vue-ui-library';
</script>
<template>
  <anchor-quantity :value="0" :min="0" :max="10"></anchor-quantity>
</template>

Disabled

Vue component

<template>
  <anchor-quantity name="quantity-field" disabled>Write a number</anchor-quantity>
</template>

Reactive value

Use a reactive reference to control the quantity value.

Props

The AnchorQuantity component accepts the following properties:

value: The value of the quantity input.
min: The minimum value that the quantity input can have.
max: The maximum value that the quantity input can have.
disabled: A boolean that determines whether the quantity input is disabled.

In this example, the value property is set to 0, the min property is set to 0, and the max property is set to 10. This displays a quantity input with a value of 0 and incrementer and decrementer buttons that allow the user to increase or decrease the value.

Accessibility

Built on a native <input type="number"> element, providing standard keyboard navigation and form control behavior.
The increment and decrement buttons carry accessible labels, allowing screen reader users to identify their purpose.
Supports aria-valuemin and aria-valuemax attributes mapped from the min and max props to communicate the valid range.
The label prop provides an accessible label for the input field.
Screen readers announce the current value, minimum, maximum, and step size when the input receives focus.

API

anchor-radio

Properties

Property	Attribute	Description	Type	Default
`ariaActivedescendant`	`aria-activedescendant`	aria-activedescendant attribute for the input field	`string`	`''`
`ariaDescribedBy`	`aria-described-by`	aria-describedby attribute for the input field	`string`	`''`
`ariaLive`	`aria-live`	aria-live attribute for the input field	`string`	`undefined`
`disabled`	`disabled`	Disable the input field	`boolean`	`false`
`error`	`error`	Show an error state on input field	`boolean`	`false`
`errorText`	`error-text`	Show an error message	`string`	`undefined`
`helpText`	`help-text`	Show a help text	`string`	`undefined`
`inputId`	`input-id`	The id of the input field	`string`	`anchor-quantity-${generateGuid()}`
`label`	`label`	Show a label above the input field	`string`	`undefined`
`max`	`max`	The maximum value of the input field	`number`	`undefined`
`min`	`min`	The minimum value of the input field	`number`	`undefined`
`readonly`	`readonly`	Set the field to be read only	`boolean`	`false`
`required`	`required`	Mark the field as required	`boolean`	`false`
`step`	`step`	The step value of the input field	`number`	`1`
`validityMissingValueText`	`validity-missing-value-text`	Text to be displayed if when value is missing an native form validation is used	`string`	`undefined`
`value`	`value`	The value in the input field. Use this to set a value	`number`	`0`

Events

Event	Description	Type
`blurevent`	Event emitted when the user blurs the input field	`CustomEvent<any>`
`clearevent`	Event emitted when the user clears the input field	`CustomEvent<any>`
`focusevent`	Event emitted when the user is focusing the input field	`CustomEvent<any>`
`inputChange`	Event emitted when the input is changed. Only triggers when focus leaves the input	`CustomEvent<EventDetail>`
`inputevent`	Event emitted when the user is inputting something into the input field	`CustomEvent<EventDetail>`

CSS Custom Properties

Name	Description
`--quantity-input-max-width`	Sets the max width of the input field
`--quantity-input-width`	Sets the width of the input field

Dependencies

Depends on

Graph

graph TD;
  anchor-quantity --> anchor-label
  anchor-quantity --> anchor-icon
  anchor-quantity --> anchor-icon-button
  anchor-quantity --> anchor-input
  anchor-input --> anchor-form-field
  anchor-input --> anchor-icon
  anchor-input --> anchor-tooltip
  anchor-form-field --> anchor-icon
  style anchor-quantity fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS

Quantity3.0