# @chipcastle.com/vue-select-quantity

> This Vue 2 component was created for easily specifying a quantity, as is the case in a shopping cart.

Latest version **1.0.9** (published 2024-01-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install @chipcastle.com/vue-select-quantity
pnpm add @chipcastle.com/vue-select-quantity
yarn add @chipcastle.com/vue-select-quantity
bun add @chipcastle.com/vue-select-quantity
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.9 |
| Published | 2024-01-06 |
| First published | 2024-01-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 37.6 KB |
| Known vulnerabilities | 0 (+2 in 2 direct dependencies) |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Chip Castle |
| Maintainers | chipcastle |
| Keywords | javascript, vuejs, select, shopping-cart, component, vue, vuejs2, menu, vue2, shopping, component-library, cart, quantity, shoppingcart, cart, quantity-picker |

## Links

- npm: https://www.npmjs.com/package/@chipcastle.com/vue-select-quantity
- Repository: https://github.com/chip/vue-select-quantity
- Homepage: https://github.com/chip/vue-select-quantity#readme
- Issues: https://github.com/chip/vue-select-quantity/issues
- npm.io page: https://npm.io/package/@chipcastle.com/vue-select-quantity

## Dependencies (3)

- [vue](https://npm.io/package/vue.md) 2.6.12
- [v-click-outside](https://npm.io/package/v-click-outside.md) ^3.2.0
- [vue-template-compiler](https://npm.io/package/vue-template-compiler.md) 2.6.12

## Recent versions

- 1.0.9 (latest) — 2024-01-06
- 1.0.8 — 2024-01-06
- 1.0.6 — 2024-01-05
- 1.0.3 — 2024-01-05

## README

# VueSelectQuantity component

This Vue 2 component was created for easily specifying a quantity, as is the case in a shopping cart.

![VueSelectQuantity Demo](https://github.com/chip/vue-select-quantity/blob/master/Demo.gif)

## How to install


### NPM
```bash
npm install @chipcastle.com/vue-select-quantity
```

### PNPM
```bash
pnpm install @chipcastle.com/vue-select-quantity
```

## Basic Usage

### src/App.vue

```html
<template>
  <VueSelectQuantity
    :value="quantity"
    data-id="vsq-1"
    @update:quantity="update($event)"
    @remove:quantity="remove($event)"
  />
</template>
<script>
import { VueSelectQuantity } from '@chipcastle.com/vue-select-quantity'
import '../node_modules/@chipcastle.com/vue-select-quantity/dist/style.css'

export default {
  name: 'App',
  components: {
    VueSelectQuantity
  },
  data () {
    return {
      quantity: 1
    }
  },
  methods: {
    update (evt) {
      const { id, qty } = evt
      if (qty) {
        this.quantity = qty
      }
      console.log(`update event received for id ${id} with quantity ${this.quantity}`)
    },
    remove (id) {
      console.log(`remove event received for id ${id}`)
    }
  }
}
</script>
```

## Props

| Property name | Type | Default | Description |
| ------------- | ---- | ------- | ----------- |
| v-model | Number | null | A required property which represents the quantity to be updated |
| data-id | String | null | A data property to identify the component instance |

## Events

| Event name | Trigger |
| ------------- | ---- |
| update:quantity | Called when the quantity is changed (e.g., 1-9 is selected from the menu, Update button is clicked). Event object sent includes `id` and `qty` properties.|
| remove:quantity | Called when the 0 is selected from the menu) |

## Developers

Fork the project and enter the following commands:

    git clone https://github.com/YOUR_GITHUB_USERNAME/vue-select-quantity.git
    cd vue-select-quantity
    npm install (for dependencies)
    npm run dev

---
_Source: https://npm.io/package/@chipcastle.com/vue-select-quantity · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._