open-index/open-npm huggingface dataset:
npm package: @mathewparet/vue-common-filters
Description: A Vue.js set of common filters
Author: Mathew Paret
Latest version: 1.1.0

# @mathewparet/vue-common-filters

> A Vue.js set of filters that can commonly used

## Installation
``` bash
npm i @mathewparet/fvue-common-filters
```

## Usage

### Vue Initialization

``` js
import Vue from 'vue';
import filters from "@mathewparet/vue-common-filters";
Vue.use(filters);
```

### Vue Usage

``` html
<div> Trimmed name is {{name | trim(15)}}</div>
```

## Available Filters

### ```trim()```

| Parameter | Description | Requred? | Default |
| --- | --- | --- | --- |
max_length | Maximum length after which text should be trimmed | No | 15 |
lead | The indicator text that shows text was trimmed | No | ... |

### ```dateFormat()```

| Parameter | Description | Required? | Default |
| --- | --- | --- | --- |
| format | The date format to be converted to. More formats can be found in moment's API. (https://momentjs.com/docs/#/parsing/string-format) | No | llll |
| current_format | The format in which the current date is fed in | No | YYYY-MM-DDTHH:mm:ssZ
npm package: @mathewparet/vue-crop-tool
Description: A tool to easily crop input image. Works like a normal input.
Author: Mathew Paret
Latest version: 1.0.3

# @mathewparet/vue-crop-tool

> A tool to easily crop input image. Works like a normal input.

## Build Setup

``` bash
# install dependencies
npm install

# build for production with minification
npm run build
```

## Global Import
``` js
import CropperBox from '@mathewparet/vue-crop-tool';
Vue.use(CropperBox);
```

## Usage Example

``` html
<div class="form-group row">
    <label for="avatar" class="col-md-4 col-form-label text-md-right">Avatar</label>
    <div class="col-md-6">
        <crop-tool name="avatar" preview="avatar-preview" canvas="avatar-crop-space" v-model="form.avatar">
            <span class="form-text text-muted">
                Required only if you wish to change current profile picture.
            </span>
        </crop-tool>
        <img src="" id="avatar-crop-space" width="100" />
    </div>
</div>
<div>
    <div class="avatar-preview rounded-circle" id="profile-pic" style="overflow: hidden; width: 140px; height: 140px; background: url('//via.placeholder.com/140x140/ffffff/?text=Preview')"></div>
</div>
```

## Attributes

| Name | Description | Required? |
|---|---|---|
| preview | The class name of the ```<div>``` element within which the preview will be shown. | Yes |
| canvas | The DOM ID of the ```<img>``` element that use used as the crop space | Yes |

## Notes

1. To limit the crop size, set the width and height of the preview ```<div>```.
1. The cropped value will be returned in the ```v-model```.
1. ```v-model``` can't be used to set the initial value.
npm package: @mathewparet/vue-filter-box
Description: A Vue.Js filter box to initiate search based on filter.
Author: Mathew Paret
Latest version: 1.0.4

# @mathewparet/vue-filter-box

> A Vue.Js filter box to initiate search based on filter.

## Installation

``` bash
npm install @mathewparet/vue-filter-box
```

## Global Initialization

``` js
import Vue from 'vue';
import FilterBox from '@mathewparet/vue-filter-box';
Vue.use(FilterBox);
```

## Local Initialization

``` js
import FilterBox from '@mathewparet/vue-filter-box';
export default {
    components: {
        FilterBox,
    }
}
```

## Usage

``` html
<template>
    <div>
        <filter-box class="form-control form-control-sm" @filter="loadData" v-model="searchKey"></filter-box>
    </div>
</template>
<script>
    export default {
        data()
        {
            return {
                searchKey: '', 
                results: [],
            }
        }
        mounted()
        {
            this.loadData();
        }
        methods: {
            loadData(filterString=null)
            {
                // the function argument filterString will also have the filter string. You can use wither that or the v-model.
                
                let filter = this.filterString == null ? '' : this.filterString;

                axios.get(`/api/countries?filter=${filter}`)
                    .then(response => this.results = response.data);
            }
        }
    }
</script>
```
npm package: @mathewparet/vue-pin-input
Description: A Vue.JS PIN input
Author: Mathew Paret
Latest version: 1.0.3

# @mathewparet/vue-pin-input

> A Vue.JS PIN input. This data entered will be masked like a password.

## Installation

``` bash
# install
npm install @mathewparet/vue-pin-input
```

## Initialization
```js
import PinInput from '@mathewparet/vue-pin-input';
Vue.use(PinInput);
```

## Usage
```html
	<pin-input type="number" v-model="pin">
```

Attribute | Value | Default | Description |
--- | --- | --- | --- |
type | ```string``` or ```number``` | number | Type of data to accept |
npm package: @mathewparet/vue-print
Description: A way to quickly print portion of a website.
Author: Mathew Paret
Latest version: 1.0.0

# @mathewparet/vue-print

> A way to quickly print portion of a website.

## Install

``` bash
npm install @mathewparet/vue-print
```

## Load Globally
```js
import Print from '@mathewparet/vue-print';
Vue.use(Print);
```

## Install in current scope
```js
import Print from '@mathewparet/vue-print';
export default {
    components: {
        Print
    }
}
```

## Usage
```html
<print ref="printData">
    <h1>Hello World</h1>
    <p class="print-hidden">I am hidden during print</p>
</print>
```

## Methods
### ```print()```

Call this method to initiate print.

```js
this.$refs.printData.print();
```

## Attributes

Name | Required | Type | Default | Description
--- | --- | --- | --- | ---
```auto-close``` | No | Boolean | ```true``` | If ```true``` the print popup window will close when the print dialogue closes
```use-manifest``` | No | Boolean | ```true``` | If ```true``` the ```/mix-manifest.json``` file is called to identify the latest ```print-css``` file. If no manifest is found, it falls back to use the ```print-css``` file without version
```print-css``` | No | String | ```'/css/print.css'``` | Defnes the default print.css file.

## Classes

### ```print-hidden```

Use this class for elements that shouldn't be printed.

## Events

### ```print-closed```

This event is fired when print window is closed.
npm package: @mathewparet/vue-qr-reader
Description: A VueJS compoenent (Modal) that integrates with @mathewparet/instascan to read qr code.
Author: Mathew Paret
Latest version: 1.0.2

# @mathewparet/vue-qr-reader

> A VueJS compoenent (Modal) that integrates with @mathewparet/instascan to read qr code.

## Installation

``` bash
npm install @mathewparet/vue-qr-reader
```

## Global Import
```js
import QrReader from '@mathewparet/vue-qr-reader';
Vue.use(QrReader);
```

## Import in local scope
```js
import QrReader from '@mathewparet/vue-qr-reader';
export default {
    components: {
        QrReader
    }
}
```

## Attributes

Name | Type | Required | Default | Description
--- | --- | --- | --- | ---
```scan-period``` | Number | No | 5 | The frame rate at which QR has to be captured
```title``` | String | No | ```'Read QR Code'``` | Title of the QR Reader Modal window

## Usage

```html
<template>
    <qr-reader title="Scan Code" ref="reader" @scan="scanned"/>
    <a class="btn btn-secondaru" @click="scan">Scan</a>
</template>
<script>
    export default {
        methods: {
            scanned(data)
            {
                console.log(data); // has the scanned raw data
                this.$refs.reader.hide(); // hide the reader so no more QRs are scanned
            },
            scan()
            {
                this.$refs.reader.show();
            }
        }
    }
</script>
```
## Events
```scan```

This event is called when a QR is read.

```cameraNotFound```

This event is called if no camera is detected.

```error```

This event is called for any error that occurs.
npm package: @mathewparet/vue-recaptcha-invisible
Description: A Vue.JS component for invisible recaptcha that falls back to native button if recaptcha is disabled in config, making it easy to have different settings for different environments.
Author: Mathew Paret
Latest version: 1.0.9

# @mathewparet/vue-recaptcha-invisible

> A Vue.JS component for invisible recaptcha that falls back to native button if recaptcha is disabled in config, making it easy to have different settings for different environments.

## Installation

``` bash
# instal the module
npm install @mathewparet/vue-recaptcha-invisible
```

## Registration

```js
import Recaptcha from '@mathewparet/vue-recaptcha-invisible';
Vue.use(Recaptcha, { 
    enabled: true, 
    siteKey: '<site key from Google>'
});
```

### Configuration - ```recaptcha.config.json```

If you do not wish to pass the configuration while initializing the component - i.e, if you wish to register the component as ```Vue.use(Recaptcha)``` then you can define a JSON file of the below format and save it directly under your ```public``` directory. It must have the exact filename ```recaptcha.config.json```.

```json
{
    "siteKey": "<sitekey received from Google>",
    "enabled: true
}
```

For your convinience, a sample ```recaptcha.config.json``` file is placed in your project root (_not the ```public``` directory_) directory when you run ```npm install @mathewparet/vue-recaptcha-invisible```. You can copy this file to the ```public``` directory and modify the configuration as needed.

**Note** - *You need to add your```<public_dir>/<recaptcha-config-file>.json```* to ```.gitignore``` since this configuration should be different for each environment.

If you wish to use a custom file name for the config file, then you will need to pass the same as an option when registering the compoenent, like:

```js
import Recaptcha from '@mathewparet/vue-recaptcha-invisible';
Vue.use(Recaptcha, {
    url: '/my-custom-recaptcha-conf-file.json'
})
```

## Usage
```html
<recaptcha class-name="btn btn-primary">Submit</recaptcha> 
```

### Note
Your ```<form>``` element __MUST__ have an ```ID``` defined

### Attributes
Name | Type | Required | Description
--- | --- | --- | ---
```class-name``` | String | No | CSS Class name to be applied.