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