98 lines
2.3 KiB
Vue
98 lines
2.3 KiB
Vue
<template>
|
|
<v-dialog v-model="show" max-width="500px">
|
|
<v-card>
|
|
<v-card-title class="headline">
|
|
Pilih Bahasa
|
|
</v-card-title>
|
|
|
|
<v-card-text>
|
|
<v-layout row wrap>
|
|
<v-flex xs12>
|
|
<v-radio-group v-model="selectedLangId">
|
|
<v-radio v-for="lang in langs" :key="lang.id" :label="lang.name" :value="lang.id"></v-radio>
|
|
</v-radio-group>
|
|
</v-flex>
|
|
</v-layout>
|
|
</v-card-text>
|
|
|
|
<v-card-actions>
|
|
<v-spacer></v-spacer>
|
|
<v-btn color="grey darken-1" flat @click="show = false">
|
|
Batal
|
|
</v-btn>
|
|
<v-btn color="primary" @click="handleSelect">
|
|
Pilih
|
|
</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
</template>
|
|
|
|
<script>
|
|
const _ = require('lodash')
|
|
|
|
module.exports = {
|
|
name: 'LangDialog',
|
|
|
|
props: {
|
|
value: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
langs: {
|
|
type: Array,
|
|
default: function () { return [] }
|
|
},
|
|
selectedLang: {
|
|
type: Object,
|
|
default: null
|
|
}
|
|
},
|
|
|
|
data: function () {
|
|
return {
|
|
selectedLangId: this.selectedLang ? this.selectedLang.id : null
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
show: {
|
|
get: function () {
|
|
return this.value
|
|
},
|
|
set: function (value) {
|
|
this.$emit('input', value)
|
|
}
|
|
}
|
|
},
|
|
|
|
watch: {
|
|
'value': function (newVal) {
|
|
if (newVal) {
|
|
// Set initial selection when dialog opens
|
|
this.selectedLangId = this.selectedLang ? this.selectedLang.id : null
|
|
}
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
handleSelect: function () {
|
|
var self = this
|
|
var selectedLang = this.langs.find(function (lang) {
|
|
return lang.id === self.selectedLangId
|
|
})
|
|
this.$emit('close', selectedLang)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.v-input--selection-controls {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.v-radio {
|
|
margin-bottom: 8px;
|
|
}
|
|
</style> |