vue-nani-kore

Alert Checkbox Loading Notify Radio Typeahead Uploader

Alert

Hello. {{ i.id }} - this alert will auto dismiss after 3s.

<alert class-name="alert alert-success">Hello.</alert>

<!-- not shown -->
<alert type="danger" :errors="{}"></alert>        
<alert type="danger"></alert>        

<div v-if="!alert.closed">
    <alert type="danger" :closable="true" @close="alert.closed = true" :errors="alert.errors">Errors:<br/></alert>        
</div>

<div v-if="!alert.closed2">
    <alert type="danger" :closable="true" @close="alert.closed2 = true">Something bad happened.<span slot="close">die</close></alert>
</div>

<alert v-for="(i, idx) in alert.alerts" :closable="true" type="info" :duration="3000" :key="i.id" @close="alert.alerts.splice(idx, 1)">
    <span><strong>{{ i.id }}</strong> - this alert will auto dismiss after 3s.</span>            
</alert>

<div class="form-group">
    <button type="button" @click="addAlert" class="btn btn-primary">Add alert with duration</button>
</div>
    

addAlert () {        
    this.alert.alerts.push({ id: new Date().getTime() })        
}        
    

Checkbox

<checkbox v-model="checkbox.sure">Are you sure?</checkbox>
<checkbox v-model="checkbox.clever" border-color="#52395e" fill-color="#c17dd1">Are you clever?</checkbox> 
<checkbox checked disabled border-color="#52395e" fill-color="#c17dd1">Am I disabled? I am!</checkbox>
    

CheckboxSwitch

<checkbox-switch v-model="checkboxSwitch.disabler">
    Disable the last one!
</checkbox-switch>                
<checkbox-switch v-model="checkboxSwitch.food" value="banana">
    Banana?
</checkbox-switch>         
<checkbox-switch v-model="checkboxSwitch.food" value="orange">
    Orange?
</checkbox-switch>     
<checkbox-switch v-model="checkboxSwitch.food" value="none" class-name="inline-radio">
    No style? No food!
</checkbox-switch>     
<checkbox-switch :disabled="checkboxSwitch.disabler" v-model="checkboxSwitch.lastOne" checked>
    {{ checkboxSwitch.disabler ? 'I\'m disabled :(' : 'I\'m alive!' }}
</checkbox-switch>            
    

Loading

#1	Nenecchi
#2	Aoba
#3	Umiko
#4	Hifumi
#5	Rin

 <loading size="80px" :fullscreen="true" :active="loading.full"></loading> 

<loading :active="loading.overElement && !loading.globalDisable" :type="loading.loadingType">
    <table class="table">
        <tr><th>#1</th><td>Nenecchi</td></tr>
        <tr><th>#2</th><td>Aoba</td></tr>
        <tr><th>#3</th><td>Umiko</td></tr>
        <tr><th>#4</th><td>Hifumi</td></tr>
        <tr><th>#5</th><td>Rin</td></tr>            
    </table>
</loading>  

<div class="form-group row">    
    <div class="col-md-4">
        <select class="form-control" v-model="loading.loadingType">
            <option v-for="lt in loadingTypes" :value="lt">{{ lt }}</option>
        </select>
    </div>
</div>

<div class="form-group">
    <checkbox-switch v-model="loading.overElement">Loading</checkbox-switch>                
</div>

<div class="row">
    <div class="col-md-4" v-for="lt in loadingTypes">
        <div class="panel panel-default">
            <div class="panel-heading">{{ lt }}</div>
            <div class="panel-body">
                <loading fill-color="#C17DD1" :type="lt" :active="!loading.globalDisable" size="20px"></loading>                
            </div>
        </div>
    </div>
</div>
<div class="form-group">
    <button class="btn btn-primary" @click="fullscreenLoading">Show fullscreen loading for 5s</button>
</div>       
    

 fullscreenLoading() {
    let self = this;
    self.loading.full = true;
    self.loading.globalDisable = true;
    setTimeout(() => {
        self.loading.full = false;
        self.loading.globalDisable = false;
    }, 5000);
}
    

Notify

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

<div class="form-group">
    <radio v-model="notify.position" name="position" value="top-left">TOP LEFT</radio>
    <radio v-model="notify.position" name="position" value="top-center">TOP CENTER</radio>    
    <radio v-model="notify.position" name="position" value="top-right">TOP RIGHT</radio>    
    <radio v-model="notify.position" name="position" value="bottom-left">BOTTOM LEFT</radio>
    <radio v-model="notify.position" name="position" value="bottom-center">BOTTOM CENTER</radio>    
    <radio v-model="notify.position" name="position" value="bottom-right">BOTTOM RIGHT</radio>    
</div>

<div class="form-group">
    <radio v-model="notify.method" name="method" value="first">FIRST</radio>
    <radio v-model="notify.method" name="method" value="last">LAST</radio>
</div>

<button type="button" class="btn btn-primary" @click="notifyMe">What time is it</button>
<button type="button" class="btn btn-danger" @click="bus.$emit('hide-notifications')">Hide all</button>         
    

notifyMe() {            
    this.bus.$emit('show-notification', { closable: true, data: { title: 'Important message', text: 'Hello, people of Earth. My cosmic watch shows: ' + new Date().getTime() }})
}    
    

Radio

<radio v-model="radio.question" name="question" value="One">1</radio>
<radio v-model="radio.question" name="question" value="Two">2</radio>
<radio v-model="radio.question" name="question" value="Three" border-color="#52395e" fill-color="#c17dd1">3</radio>
<radio v-model="radio.question" name="question" value="Four" border-color="#52395e" fill-color="#c17dd1" disabled>4 (disabled)</radio>
    

Typeahead

It's work in progress atm.

Uploader

End point defined as Url parameter doesn't exist. All uploads will fail. I may deploy somewhere a working backend API in the future.

{{ i.message }}

<alert v-for="(i, idx) in uploader.alerts" :type="i.type" :duration="5000" @close="uploader.alerts.splice(idx, 1)" :closable="true" :key="i.id" :errors="i.errors">
    {{ i.message }}
</alert>

<uploader url='http://localhost:41097/api/upload-image' v-model="uploader.files" @error="uploaderError" @files-order-changed="uploaderFilesOrderChanged" @max-files-exceeded="uploaderErrorMaxFilesExceeded" :sortable="true" :max-files="5">   
    <template slot="file" slot-scope="{data}">                        
        <div class="col-md-3">
            <div class="thumbnail">
                <!-- glitches with sortable = true -->
                <!-- <img v-lazy="data.server + data.file" class="img-responsive img-rounded" :alt="data.size"> -->
                <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>        
    

deleteFile(id) {
    let idx = this.uploader.files.findIndex((x) => { return x.id == id; });            
    
    if (idx >= 0) {
        this.uploader.files.splice(idx, 1);
    }
},
uploaderError(errors) {
    try {
        JSON.parse(str);
        this.uploader.alerts.push({ id: new Date().getTime(), type: 'danger', errors: errors, message: null });
    } catch (e) {
        this.uploader.alerts.push({ id: new Date().getTime(), type: 'danger', errors: { "isValid": false, "errors": [ { "key": "_", "value": errors } ] }, message: null });
    }            
},
uploaderErrorMaxFilesExceeded(file) {
    this.uploader.alerts.push({ id: new Date().getTime(), type: 'danger', errors: null, message: 'Uploading of file ' + file.name + ' aborted. Max number of files would be exceeded.' });
},
uploaderFilesOrderChanged(files) {            
    this.uploader.alerts.push({ id: new Date().getTime(), type: 'success', errors: null, message: 'Order changed.' });            
}