open-index/open-npm huggingface dataset:
npm package: @gurinder/vue-confirm
Description: ### Installation & Usage
Author: Gurinder Chauhan
Latest version: 1.0.3

# @gurinder/vue-confirm

### Installation & Usage

```php
    <vue-confirm></vue-confirm>
```

```js
import Confirm from '@gurinder/vue-confirm';
Vue.component('vue-confirm', Confirm);

Vue.prototype.$confirm = (message, confirmText, cancelText) => {
    return new Promise((resolve, reject) => {
        window.Event.fire("confirm", {
            message: message,
            confirmText: confirmText,
            cancelText: cancelText,
            resolve: resolve,
            reject: reject
        })
    })
};
// Use in vue instance
this.$confirm("Are you ready to delete")


// Bind confirm to vue instance to use like confirm("Are you ready to delete")
const VueApp = new Vue({
    el: '#app'
})

window.confirm = message => VueApp.$confirm(message);

```
npm package: @gurinder/vue-filters
Description: General vue filters
Author: Gurinder Chauhan
Latest version: 1.0.5

# Vue Filters
General vue filters

### Avaiable filters
    capitalize
    append
    truncate
    substr
    strCount
    prettyBytes
    formatDate
    timeAgo
    moneyInDollars
    phone

## Licence
License under MIT
npm package: @gurinder/vue-flash
Description: ### Usage
Author: Gurinder Chauhan
Latest version: 1.0.5

# @gurinder/vue-flash

### Usage

```php
// If you using Laravel Blade
// Add Flash level to master
@php
	
	$flashLevel = session('error') ? 'error' : 'success';
	$flashLevel = session('warning') ? 'warning' : $flashLevel;
	$flashLevel = session('info') ? 'info' : $flashLevel;

	$flashMessage = session('error') ? session('error') : session('success');
	$flashMessage = session('warning') ? session('warning') : $flashMessage;
	$flashMessage = session('info') ? session('info') : $flashMessage;

@endphp
```

```js
// Dependancy
import Event from '@gurinder/vue-eventy';
window.Event = new Event();

// Register Flash
import flash from '@gurnder-vue-flash';
Vue.component('vue-flash', flash);
window.flash = (message, level = 'success', timeout = 3000) => window.Event.fire('flash', {message, level, timeout});

<vue-flash data-level="success" data-message="message"></vue-flash>

```
npm package: @gurinder/vue-google-recaptcha
Description: ### Usage
Author: Gurinder Chauhan
Latest version: 1.0.4

# @gurinder/vue-google-recaptcha

### Usage

```js

// Add script
<script src="https://www.google.com/recaptcha/api.js?render=explicit"></script>

import captcha from '@gurinder/vue-google-recaptcha';

<vue-recaptcha name="human_verification_id" :input="true" site-key="123ABC"></vue-recaptcha>

```
npm package: @gurinder/vue-image-selector
Description: ### Usage
Author: Gurinder Chauhan
Latest version: 1.0.4

# @gurinder/vue-image-selector

### Usage

HTML
``` html
<vue-image-selector src="/images/random.jpeg" valid-mime='image/jpeg,image/png,image/jpg' max-size-in-mb="2" ></vue-image-selector>
```

JS
```js
import VueImageSelector from '@gurinder/vue-image-selector';
Vue.component('vue-image-selector', VueImageSelector);
```
npm package: @gurinder/vue-loading-bars
Description: Javascript ```js import VueLoadingBars from '@gurinder/vue-loading-basr'; Vue.component('vue-loading-bars', VueLoadingBars); ```
Author: Gurinder Chauhan
Latest version: 1.0.4

# @gurinder/vue-loading-bars

Javascript
```js
import VueLoadingBars from '@gurinder/vue-loading-basr';
Vue.component('vue-loading-bars', VueLoadingBars);
```

HTML
```html
<vue-loading-bars :loading="true"></vue-loading-bars>
```

CSS
``` css
// Add animation
@-webkit-keyframes v-scaleStretchDelay
{
  0%,
  100%
  {
    transform: scaleY(1);
  }
  50%
  {
    transform: scaleY(0.4);
  }
}

@keyframes v-scaleStretchDelay
{
  0%,
  100%
  {
    transform: scaleY(1);
  }
  50%
  {
    transform: scaleY(0.4);
  }
}

```
npm package: @gurinder/vue-progress
Description: Vue progress bar component Inspired by https://codepen.io/Thibaut/pen/DcEzG
Author: Gurinder Chauhan
Latest version: 1.0.3

# @gurinder/vue-progress

Vue progress bar component
Inspired by https://codepen.io/Thibaut/pen/DcEzG

### Usage
```js
import ProgressBar from '@gurinder/vue-progress';
Vue.component('progress-bar', ProgressBar);
```

```html
<progress-bar :progress="progress"></progress-bar>
```

```css
// https://codepen.io/Thibaut/pen/DcEzG
.progress {
  overflow: hidden;
  margin: 0 auto;
  width: 100%
}

.progress-val {
  float: right;
  margin-left: 15px;
  font: bold 15px/34px Helvetica, Arial, sans-serif;
  color: #333;
  text-shadow: 0 1px rgba(255, 255, 255, 0.6);
}

.progress-bar {
  display: block;
  overflow: hidden;
  height: 8px;
  //margin: 13px 0;
  background: #b8b8b8;
  border-radius: 4px;
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.2), transparent 60%);
  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.2), transparent 60%);
  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.2), transparent 60%);
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), transparent 60%);
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px rgba(255, 255, 255, 0.6);
}

.progress-in {
  display: block;
  min-width: 8px;
  height: 8px;
  background: #1997e6;
  background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 60%, rgba(0, 0, 0, 0) 61%, rgba(0, 0, 0, 0.2)), -webkit-linear-gradient(left, #147cd6, #24c1fc);
  background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 60%, rgba(0, 0, 0, 0) 61%, rgba(0, 0, 0, 0.2)), -moz-linear-gradient(left, #147cd6, #24c1fc);
  background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 60%, rgba(0, 0, 0, 0) 61%, rgba(0, 0, 0, 0.2)), -o-linear-gradient(left, #147cd6, #24c1fc);
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 60%, rgba(0, 0, 0, 0) 61%, rgba(0, 0, 0, 0.2)), linear-gradient(to right, #147cd6, #24c1fc);
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 1px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.2);
}
```
npm package: @gurinder/vue-tabs
Description: Inspired by https://github.com/spatie/vue-tabs-component
Author: Gurinder Chauhan
Latest version: 1.0.3

# @gurinder/vue-tabs

Inspired by https://github.com/spatie/vue-tabs-component

### Usage

HTML
```html
<vue-tabs>
    <vue-tab title="Title 1" :active="true">
        content of tab one
    </vue-tab>
    <vue-tab title="Title 2">
        content of tab 2
    </vue-tab>
    <vue-tab title="Title 3">
        content of tab 3
    </vue-tab>
</vue-tabs>
```

JS
```JS
import {Tabs, Tab} from '@gurinder/vue-tabs';
Vue.components('vueTabs', Tabs);
Vue.components('vueTab', Tab);
```

SCSS
```scss
.tab-links {

  > li {
    padding: 10px;
    border: 1px solid transparent;

    &.active {
      background: white;
      color: $primary;
      margin-bottom: -3px;
      @extend .bd;
      border-bottom-color: transparent;
      border-top-right-radius: $border-radius;
      border-top-left-radius: $border-radius;
    }

  }

}
```
npm package: @gurinder/vue-tag-input
Description: ### Usage
Author: Gurinder Chauhan
Latest version: 1.0.2

# @gurinder/vue-tag-input

### Usage

```html
<vue-tag-input tag-rest-url="http://example.com/tags" :data-selected-tags="selectedTags"></vue-tag-input>
```

JS
```js
import VueTagInput from '@gurinder/vue-tag-input';
Vue.component('vue-tag-input', VueTagInput);
```

SCSS
```scss
.tag-wrap {
  position: relative;
}

.tag-box {
  display: flex;
  flex-wrap: wrap;

  > .tag {
    background: $primary; // Color
    margin: 0 5px 5px 0;
    border-radius: 5px;
    color: white;
    display: flex;
    align-content: center;
    overflow: hidden;

    .tag-label {
      padding: 0 0 0 10px;
    }

    .delete {
      display: flex;
      align-content: center;
      background: darken($primary, 5%);
      padding: 5px;
      margin: 0 0 0 10px;
    }

  }

  > input {
    border: none;
    height: 26px;
    flex-grow: 1;

    &:focus {
      box-shadow: none !important;
      border: none !important;
      outline: none;
    }
  }

}

.tag-suggections {
  position: absolute;
  width: 100%;
  background: white;
  z-index: $zindex-popover;
  left: 0;

  li.active {
    background: #efefef;
  }

}
```