157 lines
4.0 KiB
Vue
157 lines
4.0 KiB
Vue
<template>
|
|
<div>
|
|
<div>
|
|
<v-list dense shaped subheader>
|
|
|
|
<v-list-item>
|
|
<v-list-item-content>
|
|
<v-autocomplete
|
|
class="vselect"
|
|
:items="lists.top"
|
|
v-model="selected"
|
|
label="Countries"
|
|
outlined
|
|
dense
|
|
hide-details
|
|
></v-autocomplete>
|
|
</v-list-item-content>
|
|
</v-list-item>
|
|
|
|
|
|
<v-list-item v-for="(cinfo,id) in configs.selected" :key="id" class="countryLine">
|
|
<v-list-item-action>
|
|
<v-btn fab dark x-small
|
|
@click="removeCountry(cinfo.name)">
|
|
<v-icon dark>mdi-close</v-icon>
|
|
</v-btn>
|
|
</v-list-item-action>
|
|
|
|
<v-list-item-content>
|
|
<v-list-item-title>
|
|
<v-chip :style="{background:cinfo.color}"><span> </span></v-chip>
|
|
{{cinfo.name}}
|
|
</v-list-item-title>
|
|
</v-list-item-content>
|
|
</v-list-item>
|
|
|
|
</v-list>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import Palette from './html/Palette'
|
|
import {getPalette} from '../libs/thpalette'
|
|
import SelectO from './html/SelectO'
|
|
|
|
Palette, SelectO
|
|
|
|
export default {
|
|
name: "CountriesConfig",
|
|
props: ['lists', 'configs'],
|
|
components: {},
|
|
data() {
|
|
return {
|
|
addCountry: false,
|
|
selected: '',
|
|
// TODO : change the base list used for countries
|
|
}
|
|
},
|
|
created() {
|
|
this.setColors();
|
|
},
|
|
watch: {
|
|
selected() {
|
|
if (this.selected === '') return // prevent the reset in this function
|
|
if (this.configs.selected.map(d => d.name).indexOf(this.selected) === -1) {
|
|
this.configs.selected.push({name: this.selected})
|
|
this.setColors()
|
|
}
|
|
this.addCountry = !this.addCountry
|
|
this.selected = ''
|
|
}
|
|
},
|
|
methods: {
|
|
setColors() {
|
|
let colors = getPalette(this.configs.basePalette, this.configs.selected.length)
|
|
this.configs.selected = this.configs.selected.map((d, i) => {
|
|
d.color = colors[i]
|
|
return d
|
|
})
|
|
},
|
|
addCountryClick() {
|
|
this.addCountry = !this.addCountry
|
|
},
|
|
removeCountry(country) {
|
|
this.configs.selected = this.configs.selected.filter(d => d.name !== country)
|
|
},
|
|
},
|
|
computed: {
|
|
getActiveCountries() {
|
|
// TODO filter out selected countries
|
|
return []
|
|
}
|
|
},
|
|
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
.countryLine {
|
|
display: flex;
|
|
}
|
|
|
|
.countryItem {
|
|
display: inline-block;
|
|
width: 70px;
|
|
padding-left: 3px;
|
|
}
|
|
|
|
.countryBtn {
|
|
line-height: 15px;
|
|
width: 20px;
|
|
text-align: center;
|
|
padding: 0px;
|
|
}
|
|
|
|
.countryColor {
|
|
display: inline-block;
|
|
border: 1px solid #2c3e50;
|
|
border-radius: 10px;
|
|
width: 15px;
|
|
height: 15px;
|
|
margin: 2px 7px 0px 2px;
|
|
}
|
|
|
|
.countryLine .v-list-item__action {
|
|
margin: 2px;
|
|
}
|
|
|
|
.countryLine .v-list-item__content {
|
|
padding: 2px;
|
|
}
|
|
|
|
.countryLine .v-btn {
|
|
width: 20px;
|
|
height: 20px;
|
|
font-size: 8px;
|
|
}
|
|
|
|
.countryLine .v-chip {
|
|
height: 20px;
|
|
font-size: 8px;
|
|
}
|
|
|
|
.countryLine.v-list-item {
|
|
min-height: 24px;
|
|
font-size: 8px;
|
|
}
|
|
|
|
|
|
</style>
|
|
|