Skip to content

goto10hq/vue-nani-kore

Repository files navigation

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)

Software License Latest Version on NPM npm

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