Skip to content

Instantly share code, notes, and snippets.

@BrunoDSouza

BrunoDSouza/index.html

Last active September 17, 2017 19:47
Show Gist options
  • Save BrunoDSouza/4d5c7c1f6bf5614a2e343855a7521470 to your computer and use it in GitHub Desktop.
Save BrunoDSouza/4d5c7c1f6bf5614a2e343855a7521470 to your computer and use it in GitHub Desktop.
Download ZIP
List states, add and remove items link: http://output.jsbin.com/yuwati/6
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
<style id="jsbin-css">
img{
width: 90px;
height: 90px;
}
.blue{
color:blue;
}
.green{
color:green;
}
.yellow{
color:yellow;
}
.active{
color: blue;
}
.test{
color: green;
}
/*Grid para layout de 960px */
.linha{
width: 90%;
margin: 0 auto;
overflow: auto;
padding: 5px 0;
}
.linha:after{
content: "";
clear: both;
display: block;
}
@media only screen and (min-width: 768px){
/* For Desktops */
.col-1 {width: 7.5%;}
.col-2 {width: 15%;}
.col-3 {width: 22.5%;}
.col-4 {width: 30%;}
.col-5 {width: 37.5%;}
.col-6 {width: 45%;}
.col-7 {width: 52.5%;}
.col-8 {width: 60%;}
.col-9 {width: 67.5%;}
.col-10 {width: 75%;}
.col-11 {width: 82.5%;}
.col-12 {width: 90%;}
}
@media only screen and (min-width: 600px)
and (max-width: 768px){
/*For Tablets */
.col-m-1 {width: 7.5%;}
.col-m-2 {width: 15%;}
.col-m-3 {width: 22.5%;}
.col-m-4 {width: 30%;}
.col-m-5 {width: 37.5%;}
.col-m-6 {width: 45%;}
.col-m-7 {width: 52.5%;}
.col-m-8 {width: 60%;}
.col-m-9 {width: 67.5%;}
.col-m-10 {width: 75%;}
.col-m-11 {width: 82.5%;}
.col-m-12 {width: 90%;}
}
</style>
</head>
<body>
<div class="container-fluid">
<br>
<div class="row">
<div class="col-sm-3">
<div class="form-group" >
<label for="">Primeiro Nome</label>
<input id="" type="text" class="field form-control"
v-model="person.first_name"/>
</div>
</div>
<div class="col-sm-3">
<div class="form-group" >
<label for="">Ultimo Nome</label>
<input id="" type="text" class="field form-control"
v-model="person.last_name"/>
</div>
</div>
<div class="col-sm-3">
<div class="form-group" >
<label for="">Nome Completo</label>
<input id="" type="text" class="field form-control"
v-model="full_name"/>
</div>
</div>
<div class="col-sm-3">
<div class="form-group" >
<pre>{{ person | json}}</pre>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="panel panel-default">
<form class="panel-body"
@submit.prevent="addState()">
<div class="form-group" >
<label for="">Nome Estado</label>
<input id="" type="text" class="field form-control"
v-model="newState.nome"/>
</div>
<div class="form-group" >
<label for="">Uf Estado</label>
<input id="" type="text" class="field form-control"
v-model="newState.uf"/>
</div>
<div class="form-group">
<button class="btn btn-primary" type="button"
@click="addState()"
:disabled="!canAddState">
Adicionar</button>
</div>
</form>
</div>
</div>
<div class="col-sm-4">
<table class="table">
<thead>
<tr>
<th>Estado</th>
<th>UF</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr v-for="state in states" >
<td>{{state.nome}}</td>
<td>{{state.uf}}</td>
<td>
<button class="btn btn-danger"
@click="removeState($index)">
<i class="glyphicon glyphicon-remove"></i>
</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-sm-3">
<pre> {{newState | json}} </pre>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<table class="table">
<thead>
<tr>
<th colspan="2"> Estados </th>
</tr>
</thead>
<tbody>
<tr v-for="(i, state) in states" >
<td>{{i}} - {{state.nome}}</td>
<td>
<input type="checkbox" :value="state" v-model="state.selected">
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-sm-3">
<h4>Estados Ativos</h4>
<pre>{{actives | json}}</pre>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<h4>Estados brasileiros</h4>
<select v-model="selected" multiple>
<option v-for="(i, state) in states"
v-bind:value=state>
{{state.nome}}
</option>
</select>
</div>
<div class="col-sm-3">
<table class="table">
<thead>
<tr>
<th colspan="2"> Estados </th>
</tr>
</thead>
<tbody>
<tr v-for="(i, state) in states" >
<td>{{i}} - {{state.nome}}</td>
<td>
<input type="checkbox" :value="state" v-model="selected">
</td>
<td>
<input type="radio" v-bind:value="state" v-model="selected">
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-sm-3">
<h4>Estados Selecionados</h4>
<pre>{{selected | json}}</pre>
</div>
<div class="col-sm-3">
<h4>Table estados</h4>
<ul class="list-group">
<li class="list-group-item" v-for="(i, item) in selected">
{{i}} - {{item.nome}}
<span class="badge">{{item.uf}}</span>
</li>
<li class="list-group-item" v-if="selected.length == 0">
Nenhum estado selecionado
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<h4>Historico de log</h4>
<pre>{{ log | json}}</pre>
</div>
</div>
<hr>
<div class="row">
<div class="col-sm-6">
<span>With show </span>
<input type="checkbox" v-model="image.visible">
<hr>
<img v-show="image.visible" src="http://vuejs.org/images/logo.png" alt="">
<p v-else>Imagem oculta</p>
<hr>
</div>
<div class="col-sm-6">
<span>With if </span>
<input type="checkbox" v-model="image2.visible">
<hr>
<img v-if="image2.visible" src="http://vuejs.org/images/logo.png" alt="">
<p v-else>Imagem oculta</p>
</div>
</div>
<div class="row">
<div class="col-sm-1">
<p id="name-{{subname}}">{{subname | upper}} </p>
<p :class="{'active' : active, 'test': !active }">{{subname | upper}} </p>
</div>
<div class="col-sm-11">
<p class="{{color}}"> {{description | limit 80 "!!!"}} </p>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<input type="text" v-model="name" debounce="1000">
</div>
<div class="col-sm-4">
<input type="text" v-model="description" lazy>
</div>
<div class="col-sm-4">
<select id="cor" v-model="color">
<option value="blue">Azul</option>
<option value="green">Verde</option>
<option value="yellow">Amarelo</option>
</select>
<span>Selecione a cor</span>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<input type="checkbox" v-model="active"> Status
<input type="checkbox"
:false-value="'False'"
:true-value="'true'"
v-model="active"> Status with string
</div>
<div class="col-sm-4">
<input type="radio" :value="true" v-model="active">Ativo
<input type="radio" :value="false" v-model="active">Desativado
</div>
<div class="col-sm-4">
<input type="checkbox" value="blue" v-model="color"> Azul
<input type="checkbox" value="green" v-model="color"> Verde
<input type="checkbox" value="yellow" v-model="color"> Amarelo
</div>
</div>
<div class="row">
<div class="col-sm-12">
<h1 class="{{color}}">{{ active ? elogio + " " + name : name | upper | limit 35 }}</h1>
<hr>
<pre>{{ $data | json }}</pre>
<hr>
</div>
</div>
</div>
<script id="jsbin-javascript">
'use strict';
function _toArray(arr) { return Array.isArray(arr) ? arr : Array.from(arr); }
Vue.filter('upper', function (value) {
return value.toUpperCase();
});
Vue.filter('limit', function (value) {
var limit = arguments.length <= 1 || arguments[1] === undefined ? 15 : arguments[1];
var dot = arguments.length <= 2 || arguments[2] === undefined ? "..." : arguments[2];
if (value.length <= limit) return value;
return '' + value.substr(0, limit) + dot;
});
var clone = function clone(obj) {
return JSON.parse(JSON.stringify(obj));
};
new Vue({
el: 'body',
data: {
person: {
first_name: 'Bruno',
last_name: 'D. Souza'
},
name: 'Bruno D. Souza',
subname: 'Bruno',
elogio: 'Ele é demais!',
active: true,
color: [],
description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.',
image: {
visible: true
},
image2: {
visible: true
},
selected: [],
states: [{ "uf": "AC", "nome": "Acre", "selected": true }, { "uf": "AL", "nome": "Alagoas", "selected": true }, { "uf": "AM", "nome": "Amazonas" }, { "uf": "AP", "nome": "Amapá" }, { "uf": "BA", "nome": "Bahia", "selected": true }, { "uf": "CE", "nome": "Ceará" }, { "uf": "DF", "nome": "Distrito Federal" }],
newState: {},
log: [],
actives: []
},
ready: function ready() {
var _this = this;
this.loadSelecteds();
setTimeout(function () {
_this.active = false;
}, 3000);
},
watch: {
states: {
handler: function handler() {
this.loadSelecteds();
},
deep: true
},
selected: function selected(value, oldValue) {
this.log.push(value);
console.log({ value: value, oldValue: oldValue });
}
},
methods: {
loadSelecteds: function loadSelecteds() {
this.actives = this.states.filter(function (s) {
return s.selected === true;
});
},
addState: function addState() {
if (this.canAddState) {
var obj = clone(this.newState);
this.states.push(obj);
this.newState = {};
}
},
removeState: function removeState(index) {
if (index > -1) this.states.splice(index, 1);
}
},
computed: {
full_name: {
get: function get() {
return this.person.first_name + ' ' + this.person.last_name;
},
set: function set(value) {
var _value$split = value.split(' ');
var _value$split2 = _toArray(_value$split);
var first = _value$split2[0];
var last = _value$split2.slice(1);
this.person.first_name = first;
this.person.last_name = last.join(' ');
}
},
canAddState: function canAddState() {
return this.newState.nome.length > 0 && this.newState.uf.length > 0;
}
}
});
</script>
<script id="jsbin-source-css" type="text/css">img{
width: 90px;
height: 90px;
}
.blue{
color:blue;
}
.green{
color:green;
}
.yellow{
color:yellow;
}
.active{
color: blue;
}
.test{
color: green;
}
/*Grid para layout de 960px */
.linha{
width: 90%;
margin: 0 auto;
overflow: auto;
padding: 5px 0;
}
.linha:after{
content: "";
clear: both;
display: block;
}
@media only screen and (min-width: 768px){
/* For Desktops */
.col-1 {width: 7.5%;}
.col-2 {width: 15%;}
.col-3 {width: 22.5%;}
.col-4 {width: 30%;}
.col-5 {width: 37.5%;}
.col-6 {width: 45%;}
.col-7 {width: 52.5%;}
.col-8 {width: 60%;}
.col-9 {width: 67.5%;}
.col-10 {width: 75%;}
.col-11 {width: 82.5%;}
.col-12 {width: 90%;}
}
@media only screen and (min-width: 600px)
and (max-width: 768px){
/*For Tablets */
.col-m-1 {width: 7.5%;}
.col-m-2 {width: 15%;}
.col-m-3 {width: 22.5%;}
.col-m-4 {width: 30%;}
.col-m-5 {width: 37.5%;}
.col-m-6 {width: 45%;}
.col-m-7 {width: 52.5%;}
.col-m-8 {width: 60%;}
.col-m-9 {width: 67.5%;}
.col-m-10 {width: 75%;}
.col-m-11 {width: 82.5%;}
.col-m-12 {width: 90%;}
}</script>
<script id="jsbin-source-javascript" type="text/javascript">
Vue.filter('upper', (value) => value.toUpperCase())
Vue.filter('limit', (value, limit = 15, dot = "...") => {
if(value.length <= limit)
return value;
return `${value.substr(0,limit)}${dot}`
})
const clone = (obj) => {
return JSON.parse(JSON.stringify(obj))
}
new Vue({
el: 'body',
data: {
person: {
first_name: 'Bruno',
last_name: 'D. Souza'
},
name: 'Bruno D. Souza',
subname: 'Bruno',
elogio: 'Ele é demais!',
active: true,
color: [],
description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.',
image: {
visible: true
},
image2: {
visible: true
},
selected: [],
states: [{"uf":"AC","nome":"Acre","selected": true},{"uf":"AL","nome":"Alagoas", "selected": true},{"uf":"AM","nome":"Amazonas"},{"uf":"AP","nome":"Amapá"},{"uf":"BA","nome":"Bahia", "selected": true},{"uf":"CE","nome":"Ceará"},{"uf":"DF","nome":"Distrito Federal"}],
newState: {},
log: [],
actives: [],
},
ready() {
this.loadSelecteds();
setTimeout(() => {
this.active = false;
}, 3000);
},
watch: {
states: {
handler(){
this.loadSelecteds();
},
deep:true
},
selected(value, oldValue){
this.log.push(value);
console.log({value, oldValue})
}
},
methods: {
loadSelecteds(){
this.actives = this.states.filter(s => s.selected === true)
},
addState(){
if(this.canAddState){
const obj = clone(this.newState);
this.states.push(obj);
this.newState = {};
}
},
removeState(index){
if(index > -1)
this.states.splice(index,1);
}
},
computed:{
full_name: {
get(){
return `${this.person.first_name} ${this.person.last_name}`
},
set(value){
const [first, ...last] = value.split(' ');
this.person.first_name = first;
this.person.last_name = last.join(' ');
}
},
canAddState(){
return this.newState.nome.length > 0 && this.newState.uf.length > 0;
}
}
});</script></body>
</div>
</html>
Raw
jsbin.yuwati.css
img{
width: 90px;
height: 90px;
}
.blue{
color:blue;
}
.green{
color:green;
}
.yellow{
color:yellow;
}
.active{
color: blue;
}
.test{
color: green;
}
/*Grid para layout de 960px */
.linha{
width: 90%;
margin: 0 auto;
overflow: auto;
padding: 5px 0;
}
.linha:after{
content: "";
clear: both;
display: block;
}
@media only screen and (min-width: 768px){
/* For Desktops */
.col-1 {width: 7.5%;}
.col-2 {width: 15%;}
.col-3 {width: 22.5%;}
.col-4 {width: 30%;}
.col-5 {width: 37.5%;}
.col-6 {width: 45%;}
.col-7 {width: 52.5%;}
.col-8 {width: 60%;}
.col-9 {width: 67.5%;}
.col-10 {width: 75%;}
.col-11 {width: 82.5%;}
.col-12 {width: 90%;}
}
@media only screen and (min-width: 600px)
and (max-width: 768px){
/*For Tablets */
.col-m-1 {width: 7.5%;}
.col-m-2 {width: 15%;}
.col-m-3 {width: 22.5%;}
.col-m-4 {width: 30%;}
.col-m-5 {width: 37.5%;}
.col-m-6 {width: 45%;}
.col-m-7 {width: 52.5%;}
.col-m-8 {width: 60%;}
.col-m-9 {width: 67.5%;}
.col-m-10 {width: 75%;}
.col-m-11 {width: 82.5%;}
.col-m-12 {width: 90%;}
}
Raw
jsbin.yuwati.js
'use strict';
function _toArray(arr) { return Array.isArray(arr) ? arr : Array.from(arr); }
Vue.filter('upper', function (value) {
return value.toUpperCase();
});
Vue.filter('limit', function (value) {
var limit = arguments.length <= 1 || arguments[1] === undefined ? 15 : arguments[1];
var dot = arguments.length <= 2 || arguments[2] === undefined ? "..." : arguments[2];
if (value.length <= limit) return value;
return '' + value.substr(0, limit) + dot;
});
var clone = function clone(obj) {
return JSON.parse(JSON.stringify(obj));
};
new Vue({
el: 'body',
data: {
person: {
first_name: 'Bruno',
last_name: 'D. Souza'
},
name: 'Bruno D. Souza',
subname: 'Bruno',
elogio: 'Ele é demais!',
active: true,
color: [],
description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.',
image: {
visible: true
},
image2: {
visible: true
},
selected: [],
states: [{ "uf": "AC", "nome": "Acre", "selected": true }, { "uf": "AL", "nome": "Alagoas", "selected": true }, { "uf": "AM", "nome": "Amazonas" }, { "uf": "AP", "nome": "Amapá" }, { "uf": "BA", "nome": "Bahia", "selected": true }, { "uf": "CE", "nome": "Ceará" }, { "uf": "DF", "nome": "Distrito Federal" }],
newState: {},
log: [],
actives: []
},
ready: function ready() {
var _this = this;
this.loadSelecteds();
setTimeout(function () {
_this.active = false;
}, 3000);
},
watch: {
states: {
handler: function handler() {
this.loadSelecteds();
},
deep: true
},
selected: function selected(value, oldValue) {
this.log.push(value);
console.log({ value: value, oldValue: oldValue });
}
},
methods: {
loadSelecteds: function loadSelecteds() {
this.actives = this.states.filter(function (s) {
return s.selected === true;
});
},
addState: function addState() {
if (this.canAddState) {
var obj = clone(this.newState);
this.states.push(obj);
this.newState = {};
}
},
removeState: function removeState(index) {
if (index > -1) this.states.splice(index, 1);
}
},
computed: {
full_name: {
get: function get() {
return this.person.first_name + ' ' + this.person.last_name;
},
set: function set(value) {
var _value$split = value.split(' ');
var _value$split2 = _toArray(_value$split);
var first = _value$split2[0];
var last = _value$split2.slice(1);
this.person.first_name = first;
this.person.last_name = last.join(' ');
}
},
canAddState: function canAddState() {
return this.newState.nome.length > 0 && this.newState.uf.length > 0;
}
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment