open-index/open-npm huggingface dataset:
npm package: @mtcmedia/vue-number-input
Description: Vue JS number input component
Author: Paul McAvoy
Latest version: 2.0.0

# @mtcmedia/vue-number-input

## Install to production site
```bash
npm install @mtcmedia/vue-number-input
```

### Usage
```js
import MNumberInput from '@mtcmedia/vue-number-input'
import '@mtcmedia/vue-number-input/dist/MtcNumberInput.css'

Vue.component('MNumberInput', MNumberInput)
```
```html
<MNumberInput
    :min="18"
>
    <template v-slot:add><i class="fa fa-angle-up"></i></template>
    <template v-slot:subtract><i class="fa fa-angle-down"></i></template>
</MNumberInput>
```
### Props
The component accepts these props:

| Attribute    | Type     | Default   | Description      |
| :---         | :---     | :---      | :---             |
| input-class  | String  | ''  | Used to add class to the input field |
| id  | String  | ''  | Add id to input field |
| name  | String  | ''  | Add name to input field |
| value  | Number, String  | 0  | Add initial value to input field on load with v-model on component |
| min  | Number  | 0  | Set min value for input field |
| max  | Number  | Infinity  | Set max value for input field |
| autocomplete  | String  | ''  | Add autocomplete |
| readonly  | String  | ''  | Add readonly |
| disabled  | String  | ''  | Add disabled |
| maxlength  | Number  | ''  | Add maxlength |

### Slots
The component accepts these slots:

* `add` : Slot to add a custom icon/content for the add button
* `subtract` : Slot to add a custom icon/content for the subtract button

### Events
The component fires the following events:

| Attribute     | Description      |
| :---          | :---             |
| input  | Emits value of input to parent component |

#### To emit event to DOM
```js
// add this line before for legacy js e.g. jQuery
window.vueEventBus = new Vue()

// this as a method on the parent component
emitEvent (value, oldValue) {
    // legacy jquery event - sends event to the DOM
    window.vueEventBus.$emit('numberInput', {
        value: value,
        oldValue: oldValue,
        $el: this.$el
    })
}
```

## Development Setup
```bash
npm install
```

### Compiles and hot-reloads for development
```bash
npm run serve
```

### Compiles and minifies for production
```bash
npm run build
```

### Run your unit tests
```bash
npm run test:unit
```

### Lints and fixes files
```bash
npm run lint
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
npm package: @mtcmedia/vue-overlay
Description: Vue JS overlay component
Author: Paul McAvoy
Latest version: 1.0.1

# @mtcmedia/vue-overlay

## Install to production site
```bash
npm install @mtcmedia/vue-overlay
```

### Usage
```js
import MtcOverlay from '@mtcmedia/vue-overlay'

Vue.component('MtcOverlay', MtcOverlay)
```
```html
<button @click.prevent="showOverlay = true">Open Overaly</button>
<MtcOverlay
    :is-visible="showOverlay"
    @closeOverlay="showOverlay = false"
>
    <!-- this is the main slot -->
    <h2>Add overlay content here!</h2>
    <p>This can be anything</p>
</MtcOverlay>
```
### Props
The component accepts these props:

| Attribute    | Type     | Default   | Description      |
| :---         | :---     | :---      | :---             |
| is-visible   | Boolean  | `false`   | Show the overlay by passing data that can be toggled |
| title        | String   | empty   | Define a title for your overlay - populates aria-label on the overlay |
| site-wrapper | String   | .siteWrapper   | Define a selector for your site container. Needed to keep scroll position on open of overlay |

### Slots
The component accepts these slots:

* `default` : the content of the overlay
* `icon` : change the icon used for the close button, this can be anything

### Events
The component fires the following events:

| Attribute     | Description      |
| :---          | :---             |
| closeOverlay  | Fires when user clicks on close button, overlay shadow or presses escape key. Use this to set is-visible back to false to hide the overlay |
| beforeOpen    | Fires before the overlay transitions into view |
| afterOpen     | Fires after the overlay transitions into view |
| afterClose    | Fires after the overlay transitions out of view |

## Development Setup
```bash
npm install
```

### Compiles and hot-reloads for development
```bash
npm run serve
```

### Compiles and minifies for production
```bash
npm run build
```

### Run your unit tests
```bash
npm run test:unit
```

### Lints and fixes files
```bash
npm run lint
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
npm package: @mtcmedia/vue-tabs-accordion
Description: [![npm version](https://badge.fury.io/js/@mtcmedia%2Fvue-tabs-accordion.svg)](https://badge.fury.io/js/@mtcmedia%2Fvue-tabs-accordion) # @mtcmedia/vue-tabs-accordion
Latest version: 4.0.1

[![npm version](https://badge.fury.io/js/@mtcmedia%2Fvue-tabs-accordion.svg)](https://badge.fury.io/js/@mtcmedia%2Fvue-tabs-accordion)
# @mtcmedia/vue-tabs-accordion

This component is wrapper for MtcCollapsible. It groups MtcCollapsible into an accordion component. There is also a tabs mode. The modes can be flipped between using the responsive prop.

## Install to production site
```bash
npm install @mtcmedia/vue-tabs-accordion
```

### Usage
```js
import MtcTabsAccordion from '@mtcmedia/vue-tabs-accordion'
import MtcCollapsible from '@mtcmedia/vue-collapsible'
import '@mtcmedia/vue-vue-tabs-accordion/dist/MtcTabsAccordion.css'
import '@mtcmedia/vue-collapsible/dist/MtcCollapsible.css'

Vue.component('MtcTabsAccordion', MtcTabsAccordion)
Vue.component('MtcCollapsible', MtcCollapsible)
```
```html
<MtcTabsAccordion>
  <!-- you can loop over data to add multiple collapsible components -->
  <MtcCollapsible v-for="(tab, index) in data" :key="index" :active="tab.active">
    <template #title-text>{{ tab.title }}</template>
      <template #default>
        <div v-html="tab.content"></div>
      </template>
  </MtcCollapsible>

  <!-- or you can add them individually or a combination of both -->
  <MtcCollapsible :active="false">
    <template #title-text>This is a fourth Tab</template>
    <template #default>
      <h1>Here is some silly content.</h1>
    </template>
  </MtcCollapsible>
</MtcTabsAccordion>
```
### Props
The component accepts these props:

| Attribute    | Type     | Default     | Description      |
| :---         | :---     | :---        | :---             |
| mode         | String   | accordion   | Can be set as tabs |
| responsive   | Object   | `{}`        | Define mode for certain window widths |

This component is mobile first.
```js
{
    640: {
        mode: 'tabs'
    },
    1200: {
        mode: 'accordion'
    }
}
```

### Slots
The component accepts these slots:

* `default` : Must use MtcCollapsible component within the slot.

## Development Setup
```bash
npm install
```

### Compiles and hot-reloads for development
```bash
npm run serve
```

### Compiles and minifies for production
```bash
npm run build
```

### Run your unit tests
```bash
npm run test:unit
```

### Lints and fixes files
```bash
npm run lint
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).