open-index/open-npm huggingface dataset:
npm package: @lassehaslev/vue-autocomplete
Description: Autocomplete input using Vue
Author: Lasse S. Haslev
Latest version: 0.0.3

# @lassehaslev/vue-autocomplete

> Autocomplete input using Vue

## Installation
Run ```npm install @lassehaslev/vue-autocomplete --save``` in your project folder

## Usage

``` js
import {Autocomplete} from '@lassehaslev/vue-autocomplete';
export default {
    template: `
        <autocomplete
            value=""
            placeholder="Type to start autocomplete"
            @selected="onSelected"
            :search="onSearch"
            :adaptor="adaptor"
            name=""></autocomplete>
    `,

    methods: {
        adaptor( data ) {
            return data.data;
        },
        onSearch( query ) {
            return axios.get( 'http://localhost:1337/api/states?q=' + query );
        },

        onSelected( selected ) {
            console.log( selected );
        }
    },

    components: {
        Autocomplete,
    }

}
```

## Build Setup

``` bash
# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

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

For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
npm package: @lassehaslev/vue-confirm
Description: Simple confirm dialog using vue
Author: Lasse S. Haslev
Latest version: 1.1.1

# @lassehaslev/vue-confirm

> Simple confirm dialog using vue

## Installation
Run ```npm install @lassehaslev/vue-confirm --save``` in your project folder

## Usage
Use this simple confirm with [Bulma](https://trello.com/b/BDC3zQvN).
This package is based on [@lassehaslev/vue-modal](https://github.com/LasseHaslev/vue-modal)
``` js
import { Confirm } from '@lassehaslev/vue-confirm';
export default {
    template: `
        <a @click="open" class="button is-primary is-large" href="#">Open a simple confirm</a>
        <confirm ref="confirm" message="You sure you want to do this?"></confirm>
    `,
    methods: {
        open() {
            this.$refs.confirm.open();
        }
    },
    components: {
        Confirm,
    }
}
```

## Extend / Build your own!
Just include the BaseConfirm class as a mixin, and you are good to call ```confirm``` and ```cancel``` and checking ```isShowingModal``` boolean.
```js
import BaseConfirm from '@lassehaslev/vue-confirm';

export default {
    template: `
        <div class="modal"
             :class="{ 'is-active': isShowingModal }">
            <div class="modal-background" @click="cancel"></div>
            <div class="modal-content">
            <div class="box">
                    <div class="content has-text-centered">
                        <h1 class="title">{{ message }}</h1>
                    </div>
                    <div class="columns">
                        <div class="column">
                            <button class="button is-large is-primary is-fullwidth"
                                    :class="{ 'is-loading': isConfirmLoading }"
                                    @click="confirm"
                                >Confirm</button>
                        </div>
                        <div class="column">
                            <button @click="cancel" class="button is-large is-is-default is-fullwidth">Cancel</button>
                        </div>
                    </div>
                </div>
            </div>
            <button class="modal-close" @click="cancel"></button>
        </div>
    `,

    mixins: [ BaseConfirm ],
}
```


## Development

``` bash
# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

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

For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
npm package: @lassehaslev/vue-coordinate-input
Description: Coordinate input using Vue
Author: Lasse S. Haslev
Latest version: 0.2.0

# @lassehaslev/vue-coordinate-input

> Coordinates input using Vue

## Installation
Run ```npm install @lassehaslev/vue-coordinate-input --save``` in your project folder

## Build Setup

``` bash
# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

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

For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
npm package: @lassehaslev/vue-crud
Description: Create read update delete logic for Vue
Author: Lasse S. Haslev
Latest version: 0.3.4

# @lassehaslev/vue-crud

> Create read update delete logic for Vue

# Installation
Run ```npm install @lassehaslev/vue-crud --save``` in your project folder

## Usage
```js
import Crud from '@lassehaslev/vue-crud';
export default {

    mixins: [ Crud ],

    template: `
        <table class="table">
            <thead>
                <tr>
                    <th>Name</th>
                    <th><div class="has-text-right">Action</div></th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="( item, index ) in items">
                    <td>{{ item }}</td>
                    <td class="has-text-right">
                        <button class="button is-warning" @click="update( null, index )">Empty</button>
                        <button class="button is-danger" @click="removeItem( item )">Remove</button>
                    </td>
                </tr>
            </tbody>
        </table>
        <button @click="append(null)" class="button is-primary">Append empry</button>
        <button @click="prepend(null)" class="button is-primary">Prepend empry</button>
        <button @click="removeAll" class="button is-danger">Delete all</button>
    </section>
    `,

    data() {
        return {
            items: [
                'Html',
                'Css',
                'Javascript',
            ],
        }
    },
```

## Development

``` bash
# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

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

For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
npm package: @lassehaslev/vue-downloader
Description: Download elements with vuejs
Author: Lasse S. Haslev
Latest version: 0.1.0

# @lassehaslev/vue-downloader

## Installation
Run ```npm install @lassehaslev/vue-downloader --save``` in your project folder

## Usage
This package uses [vue-resource](https://github.com/vuejs/vue-resource), so just make sure you include it.
#### Javscript
```js
// Import vue
import Vue from 'vue';
// Make sure you add vue Resource
import VueResource from 'vue-resource';
Vue.use( VueResource );

import ImagePicker from '@lassehaslev/vue-downloader';
Vue.use( 'downloader', ImagePicker );
```

#### Html
```html
<downloader url="https://jsonplaceholder.typicode.com/photos?limit=10"
:items-adaptor="imagesAdaptor"
:item-adaptor="imageAdaptor"
:selected="selectedImage"
@confirm="selectImage"
ref="imagePicker"></downloader>
```



## Development

``` bash
# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

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

For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
npm package: @lassehaslev/vue-dropzone
Description: Upload files with ease!
Author: Lasse S. Haslev
Latest version: 1.0.2

# @lassehaslev/vue-dropzone
> Drop upload with Vue2

## Install
Run ```npm install @lassehaslev/vue-dropzone --save``` in your project folder

## Usage
```js
import {Dropzone} from '@lassehaslev/vue-dropzone';
export default {
    template: `
        <section class="section">
            <div class="container">
                <h1 class="title">Normal dropzone</h1>
                <dropzone @state-change="onStateChanged" @upload="onUpload" @error="onError" url="http://localhost:1337/api/images" ref="dropzone">
                    <div style="width: 300px; height:300px;" :style="{ 'background-color': color }">&nbsp;</div>
                </dropzone>
            </div>

            <div v-for="file in files">
                {{ file.name }}
            </div>
        </section>
    `,

    data() {
        return {
            color: '#FF0000',
            files: [],
        }
    },

    methods: {
        onStateChanged( enter ) {
            this.color = enter ? '#0000FF' : '#FF0000';
        },
        onUpload( file ) {
            this.files.push( file );
        },
        onError( response ) {
            console.log('Error');
            console.log(response);
        },
    },

    components: {
        Dropzone,
    },
}
```

#### Build your own
```js
import BaseDropzone from './BaseDropzone';
export default {
    template: `
        <div>
            <form 
                @dragover.stop.prevent="addDragOver"
                @dragenter.stop.prevent="addDragOver"

                @dragleave.stop.prevent="removeDragOver"
                @dragend.stop.prevent="removeDragOver"
                @drop.stop.prevent="drop"

                @submit.prevent="submit"

                @click="onClick"

                method="post" action="" enctype="multipart/form-data">

                <slot></slot>
            </form>
            <input v-if="multiple" @change="inputChanged" style="visibility:hidden; position:aboslute;top: -99999; left:-9999999;" type="file" :name="name" multiple />
            <input v-else @change="inputChanged" style="visibility:hidden; position:aboslute;top: -99999; left:-9999999;" type="file" :name="name" />
        </div>
    `,
    mixins: [ BaseDropzone ],
}
```

## Development

``` bash
# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

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

For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
npm package: @lassehaslev/vue-file-field
Description: File field Vue style
Author: Lasse S. Haslev
Latest version: 0.0.4

# vue-file-field

> File field Vue style

## Install
``` bash
npm install @lassehaslev/vue-file-field --save-dev
```

## Use
Javascript

``` js
    Vue.component( 'file-field', require( '@lassehaslev/vue-file-field' ) );
```

HTML
``` html
    <file-field :multiple="true" accept="image/*" name="file"></file-field>
```

Styles can be found under src/styles/VueFileField.styl

## Build Setup

``` bash
# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

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

For detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
npm package: @lassehaslev/vue-geocoder
Description: Coordinates input using Vue
Author: Lasse S. Haslev
Latest version: 1.1.0

# @lassehaslev/vue-geocoder
> Coordinates input using Vue

## Install

```bash
# Install dependencies
npm install @lassehaslev/vue-geocoder
```

## Usage

Register component in javascript

```js
const Geocoder = require( '@lassehaslev/vue-geocoder' );
Vue.component( 'geocoder', Geocoder );
```

Now your component is ready for usage
```html
<geocoder @selected="" api-key="" limit-to-country=""></geocoder>
```


## Development

``` bash
# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

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

For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
npm package: @lassehaslev/vue-google-map
Description: Google map for use with vue
Author: Lasse S. Haslev
Latest version: 0.1.2

# @lassehaslev/vue-google-map

> Google map for use with vue

## Install

Run ```npm install @lassehaslev/vue-google-map --save``` in your project folder.

## Usage

```js
<template>
    <div style="height 300px">
        <google-map @ready="mapReady" :lat="59.9139" :lng="10.7522"></google-map>
    </div>
</template>
<script>
import GoogleMap from '@lassehaslev/vue-google-map';
export default {
    name: 'app',

    methods: {
        mapReady( map, google ) {
            new google.maps.Map(...);
        }
    },

    components: {
        GoogleMap,
    }
}
</script>
```


## Build Setup

``` bash
# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

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

For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
npm package: @lassehaslev/vue-image-input
Description: Image input using @lassehaslev/vue-item-picker
Author: Lasse S. Haslev
Latest version: 0.1.1

# @lassehaslev/vue-image-input
> Image input using [ @lassehaslev/vue-image-picker ](https://github.com/LasseHaslev/vue-image-picker)

#### Under development
> This package is under development and is not yet safe to use..

## Installation
Run ```npm install @lassehaslev/vue-image-input --save``` in your project folder

## Usage
This package uses [vue-resource](https://github.com/vuejs/vue-resource), so just make sure you include it.
#### Javscript
```js
// Import vue
import Vue from 'vue';
import ImageInput from '@lassehaslev/vue-image-input';
Vue.use( 'image-input', ImagePicker );
```

#### Html
```html
<image-input url="'/your/images/url/here'"
    :images-adaptor="function( images ) {
        return images;
    }"
    :value="{url:'/your/url/here'}"
    name="image"
    :multiple="false"
    :value-adaptor="function( item ) {
        return item.id;
    }"
></image-input>
```



## Development

``` bash
# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

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

For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
npm package: @lassehaslev/vue-image-picker
Description: Image picker using @lassehaslev/vue-item-picker
Author: Lasse S. Haslev
Latest version: 0.4.1

# @lassehaslev/vue-image-picker

> Image picker using [ @lassehaslev/vue-item-picker ](https://github.com/LasseHaslev/vue-item-picker) and [Bulma](http://bulma.io/) styling.

## Installation
Run ```npm install @lassehaslev/vue-image-picker --save``` in your project folder

## Usage
This package uses [vue-resource](https://github.com/vuejs/vue-resource), so just make sure you include it.
#### Javscript
```js
// Import vue
import Vue from 'vue';
// Make sure you add vue Resource
import VueResource from 'vue-resource';
Vue.use( VueResource );

import ImagePicker from '@lassehaslev/vue-image-picker';
Vue.use( 'image-picker', ImagePicker );
```

#### Html
```html
<image-picker url="https://jsonplaceholder.typicode.com/photos?limit=10"
:items-adaptor="imagesAdaptor"
:item-adaptor="imageAdaptor"
:selected="selectedImage"
@confirm="selectImage"
ref="imagePicker"></image-picker>
```



## Development

``` bash
# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

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

For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
npm package: @lassehaslev/vue-item-picker
Description: Item picker logic for Vue.js v2
Author: Lasse S. Haslev
Latest version: 0.1.4

# @lassehaslev/vue-item-picker

> Item picker for Vue.js v2

## Installation
Run ```npm install @lassehaslev/vue-item-picker --save``` in your project folder

## Usage
This package is divided into two main modules. ```BaseItemPicker``` and ```BaseItemPickerItem```

#### Base item picker
```js
import { BaseItemPicker } from '@lassehaslev/vue-item-picker';
import ImagePickerItem from './ImagePickerItem';
export default {
    template: `
        <div class="modal"
             :class="{ 'is-active': isShowingModal }">
            <div class="modal-background" @click="close"></div>
            <div class="modal-content">
                <div class="box">
                    <slot>
                        <h4 class="title">Please select an image</h4>
                    </slot>
                    <div class="columns is-mobile is-multiline">
                        <image-picker-item v-for="item in pickerItems" :selected="selectedItems" @confirm="confirm" @select="onItemSelect" :picker-item="item" :itemAdaptor="itemAdaptor"></image-picker-item>
                    </div>
                    <button class="button is-primary" @click="confirm">Confirm</button>
                    <button class="button is-default" @click="cancel">Cancel</button>
                </div>
            </div>
            <button class="modal-close" @click="close"></button>
        </div>
    `,

    mixins: [ BaseItemPicker ],

    components: {
        ImagePickerItem,
    }
}
```

#### Base item picker item
```js
import { BaseItemPickerItem } from '@lassehaslev/vue-item-picker';
export default {
    template: `
        <div class="column is-3">
            <div v-if="item.url"
                style="padding-bottom: 100%"
                @dblclick.prevent="confirm"
                @click="select"
                :style="{
                    'background-image': 'url(' + item.url + ')',
                    'background-size':'contain',
                    'background-position':'center',
                    'background-repeat': 'no-repeat',
                    'background-color': '#ccc',
                    'cursor':'pointer',
                    'outline': isSelected ? '5px solid #0762D9' : '',
            }">
            </div>
        </div>
    `,
    mixins: [ BaseItemPickerItem ],
}
```


## Development

``` bash
# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

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

For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
npm package: @lassehaslev/vue-modal
Description: Simple Modal logic with vue
Author: Lasse S. Haslev
Latest version: 3.1.1

# @lassehaslev/vue-modal

> Simple Modal logic with Vue2

## Installation
Run ```npm install @lassehaslev/vue-modal --save``` in your project folder

## Usage
Use this simple modal with [Bulma](https://trello.com/b/BDC3zQvN).
``` js
import { Modal } from '@lassehaslev/vue-modal';
export default {
    template: `
        <a @click="open" class="button is-primary is-large" href="#">Open a simple modal</a>
        <modal ref="modal">
            <!-- Modal content Start -->
            <div class="box has-text-centered">
                <h1 class="title">
                    First modal
                </h1>
            </div>
            <!-- Modal content END -->
        </modal>
    `,
    methods: {
        open() {
            this.$refs.modal.open();
        }
    },
    components: {
        Modal,
    }
}
```

## Extend / Build your own!
Just include the BaseModal class as a mixin, and you are good to call ```open``` and ```close``` and checking ```isShowingModal``` boolean.
```js
import BaseModal from '@lassehaslev/vue-modal';

export default {
    template: `
    <div v-show="isShowingModal" class="modal is-active">
        <div class="modal-background" @click="close"></div>
        <div class="modal-content">
            <slot></slot>
        </div>
        <button class="modal-close" @click="close"></button>
    </div>
    `,

    mixins: [ BaseModal ],
}
```


## Development

``` bash
# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

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

For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
npm package: @lassehaslev/vue-notifier
Description: Notification plugin for vue
Author: Lasse S. Haslev
Latest version: 0.1.0

# @lassehaslev/vue-notifier
> Notification plugin for vue

## Installation
Run ```npm install @lassehaslev/vue-notifier --save``` in your project folder

## Usage
The notify container watches for all ```notify``` events from children and shows a notification bar at top.
The container can also call ```notify``` on it self.
``` html
<template>

    <!-- Notify element -->
    <notifier></notifier>

    <button @click="notify">Notify me!</button>
    <button @click="notify( 'Custom message' )">Notify with custom message!</button>

    <!-- Notify with different types -->
    <h3>Notification types</h3>
    <button @click="notifyPrimary">Primary</button>
    <button @click="notifyInfo">Info</button>
    <button @click="notifySuccess">Success</button>
    <button @click="notifyWarning">Warning</button>
    <button @click="notifyDanger">Danger</button>

</template>

<script>
// The notifier object
import Notifier from '@lassehaslev/vue-notifier';

// This mixin watches for notification events and pass it on to the notifier element
import { NotifierContainerMixin } from '@lassehaslev/vue-notifier';

// This mixin adds notify functions to the element 
// { notify, notifyPrimary, notifySuccess, notifyInfo, notifyWarning, notifyDanger }
import { NotifierMixin } from '@lassehaslev/vue-notifier';

export default {

    mixins: [ NotifierContainerMixin, NotifierMixin ],

    components: {
        Notifier,
    }

}
</script>
```

## Build Setup

``` bash
# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

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

For more information see the [docs for vueify](https://github.com/vuejs/vueify).
npm package: @lassehaslev/vue-table
Description: Simple table logic in Vue2
Author: Lasse S. Haslev
Latest version: 0.1.1

# @lassehaslev/vue-table

> Simple table and logic in Vue2

# Installation
Run ```npm install @lassehaslev/vue-table --save``` in your project folder

## Usage
Use this simple component with [Bulma](https://trello.com/b/BDC3zQvN).
```js
import { Table } from '@lassehaslev/vue-table';
export default {
    template: `
        <vue-table :heads="[ 'Name', { name: 'Actions', style: { 'text-align':'right' } } ]">
        <tr v-for="( item, index ) in items">
            <td>{{ item }}</td>
            <td>
                <button class="button is-danger" @click="remove( index )">Remove</button>
            </td>
        </tr>
        </vue-table>
    `,

    data() {
        return {
            items: [
                'Javascript.',
                'Html.',
                'Css.',
            ],
        }
    },

    methods: {
        remove( index ) {
            this.items.splice( index, 1 );
        }
    },

    components: {
        'vue-table': Table
    },
}
```

## Extend / Build your own!
You can create you own table with the logic of [BaseTable](https://github.com/LasseHaslev/vue-table/blob/master/src/components/BaseTable.js)
``` js
import BaseTable from '@lassehaslev/vue-table';
export default {
    template: `
    <table class="table">
        <thead>
            <tr>
                <th v-for="head in heads" :style="head.style" :class="head.class">{{ head.name }}</th>
            </tr>
        </thead>
        <tbody>
            <slot></slot>
        </tbody>
    </table>
    `,

    mixins: [ BaseTable ],
}
```

## Development

``` bash
# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

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

For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
npm package: @lasserver/ui
Description: コンポーネントとか。別のウェブサイトでもデザインを統一させたいときとかに使える。
Latest version: 0.1.0

# LaSserver Palette
コンポーネントとか。別のウェブサイトでもデザインを統一させたいときとかに使える。

## Using in
- accounts.lasserver.net
npm package: @lassi-js/au-suivant
Description: ## Contributions
Author: Julien Jean Malard-Adam
Latest version: 0.0.1

# Au suivant

## Contributions

1. **Ne supposez pas que les personnes sont bilingues.** La librairie devrait, pour la langue X, donner la langue Y qu'un locuteur unilingue de X aurait le plus de chances de comprendre.
2. **N'oubliez pas la différence entre l'orale et l'écrit.** Par exemple, une locutrice de mandarin pourrait tirer un certain bénéfice de voir une page écrite en japonais si aucune autre langue chinoise n'est disposible. À l'orale, par contre, ces deux langues sont complètement non intelligibles. Pour le hindi et l'ourdou, c'est l'inverse - on peut parfois se comprendre à l'orale, mais les écritures sont complètement différentes.