vue-nani-kore

A bucket of magnificent VUE components.

Components can be rendered as standalone one with no CSS dependencies. But most of them are (will be) based on Bootstrap 3.x (and 4.x in the future). By the way jQuery dependencies have been removed. But as Uploader is based on DropZone I use a modified (internal) version of DropZone who does not have a dependency on jQuery (that's why it's included in the dist package - it's a little bit bigger)

Working samples

https://goto10hq.github.io/vue-nani-kore/

Usage

Alert

<alert :closable="true" type="info" :duration="3000" @close="open = false">Hello world.</alert>

Parameter | Type | Default value | Note --------- | ---- | ------------- | ---- class-name | string | null | css class (overwriting autogenerated class by type) closable | boolean | false | render closing button duration | int (ms) | 0 | when set to number > 0 then alert is auto closed after a given time errors | object | null | special case for displaying errors (internal usage) id | string | alert-id-{uid} | id of element type | string | success | Bootstrap alert type, CSS class is auto generated as alert alert-{type}

Event | Note ----- | ---- close | when alert is closed (manually or by timer)

Slot | Note ---- | ---- close | close button

Checkbox

<checkbox v-model="result">Are you sure?</checkbox>

Parameter | Type | Default value | Note --------- | ---- | ------------- | ---- border-color | string | null | border color checked | boolean | false | checked flag class-name | string | nk-checkbox | css class disabled | boolean | false | disabled flag fill-color | string | null | fill color (checked state) id | string | checkbox-id-{uid} | id of element name | string | null | name attribute v-model | string or array | undefined | model value value | string | null | value

CheckboxSwitch

<checkbox-switch v-model="food" value="banana">Banana?</checkbox-switch>               

Parameter | Type | Default value | Note --------- | ---- | ------------- | ---- checked | boolean | false | checked flag class-name | string | nk-checkbox-switch | css class disabled | boolean | false | disabled flag id | string | checkbox-switch-id-{uid} | id of element name | string | null | name attribute v-model | string or array | undefined | model value value | string | null | value

Loading

<loading size="80px" :fullscreen="true" :active="true" type="rotating-box"></loading> 
<loading :active="true">
    <table>...</table>
</loading> 

Parameter | Type | Default value | Note --------- | ---- | ------------- | ---- active | boolean | true | show or hide loading fill-color | string | #000000 | fill color fullscreen | boolean | false | fullscreen mode id | string | loading-id-{uid} | id of element size | string | 40px | size of loading type | string | double-bounce | type of loading

Loading types:

• double-bounce
• jumping-square
• rotating-square

Notify

<notify type="info" :event-bus="bus">
    <template slot="content" slot-scope="{data}">
        <div>              
        <h4>{{ data.title }}</h4>
        <p>{{ data.text }}</p>                
        </div>
    </template>
</notify>

Parameter | Type | Default value | Note --------- | ---- | ------------- | ---- class-name | string | null | css class (overwriting autogenerated class by type) closable | boolean | false | render closing button duration | int (ms) | 0 | when set to number > 0 then alert is auto closed after a given time event-bus | object | null | instance of event bus event-hide | string | show-notification | name of event for showing one notification event-show | string | hide-notifications | name of event for hiding all notifications id | string | notify-id-{uid} | id of element (container) method | string | first | method of adding new notifications (first, last) position | string | top-center | position of notifications (top-left, top-center, top-right, bottom-left, bottom-center, bottom-right) type | string | success | Bootstrap alert type, CSS class is auto generated as alert alert-{type} width | int (px) | 350 | width of one notification

Slot | Note ---- | ---- content | content of one notification

Radio

<radio v-model="question" name="question" value="answer-1">1</radio>

Parameter | Type | Default value | Note --------- | ---- | ------------- | ---- border-color | string | null | border color checked | boolean | false | checked flag class-name | string | nk-radio | css class disabled | boolean | false | disabled flag fill-color | string | null | fill color (checked state) id | string | radio-id-{uid} | id of element name | string | null | name attribute v-model | string or array | undefined | model value value | string | null | value

Uploader

<uploader url='https://nani.kore/api/upload-image' v-model="[]" @error="uploaderError" @files-order-changed="uploaderFilesOrderChanged" :sortable="true">   
    <template slot="file" slot-scope="{data}">                        
        <div class="col-md-3">
            <div class="thumbnail">                
                <img :src="data.server + data.file" class="img-responsive img-rounded" :alt="data.size">                                    
            </div>
            <a href="#" class="btn btn-xs btn-danger" @click.prevent="deleteFile(data.id)">Delete</a>                
        </div>
    </template>                
</uploader>

Parameter | Type | Default value | Note --------- | ---- | ------------- | ---- class-name | string | nk-uploader | css class file-parameter | string | file | posted file parameter name for endpoint id | string | uploader-id-{uid} | id of element max-files | int | 0 | max files to upload (0 = unlimited) parallel-uploads | int | 1 | number of parallel uploads sortable | boolean | false | result can be sorted by drag'n'drop text | string | Drop files here or click to upload | default info text message url | url | null | upload endpoint

Event | Note ----- | ---- error | error uploading file file-uploaded | file uploaded files-order-changed | files order changed max-files-exceeded | max files exceeded upload-progress | upload progress

Slot | Note ---- | ---- file | content of one file

Install

npm

npm install vue-nani-kore --save

Setup

Register the plugin

import NaniKore from 'vue-nani-kore';
Vue.use(NaniKore);

Or register particular components manually

import {CheckboxSwitch} from 'vue-nani-kore';
Vue.component('checkbox-switch', CheckboxSwitch);

TODO

• Id prop is not rendered in alert
• Add a couple of loading types for fun
• Uploader glitches if we user lazy-loading and set a sortable flag to true (check it again - new lazy-loading is up)
• Notify with Vuex support
• Highlight options typeahead (tags: before + after)
• Better sample for typeahed
• Docs for typeahead

License

MIT © frohikey