yunohost-admin/app/src/components/AdressInputSelect.vue

68 lines
1.6 KiB
Vue
Raw Normal View History

<template>
2020-10-28 16:49:43 +01:00
<b-input-group v-bind="$attrs">
<input-item
2023-03-24 21:35:31 +01:00
:id="id"
:value="value.localPart"
:placeholder="placeholder"
:state="state"
:aria-describedby="id + 'local-part-desc'"
@input="onInput('localPart', $event)"
@blur="$parent.$emit('touch')"
/>
<b-input-group-append>
2020-10-28 16:49:43 +01:00
<b-input-group-text>{{ value.separator }}</b-input-group-text>
</b-input-group-append>
<b-input-group-append>
2020-10-28 16:49:43 +01:00
<select-item
2023-03-24 21:35:31 +01:00
:value="value.domain"
2020-10-28 16:49:43 +01:00
:choices="choices"
:aria-describedby="id + 'domain-desc'"
2023-03-24 21:35:31 +01:00
@input="onInput('domain', $event)"
@blur="$parent.$emit('touch')"
/>
</b-input-group-append>
2020-10-28 16:49:43 +01:00
2020-10-30 13:58:44 +01:00
<span class="sr-only" :id="id + 'local-part-desc'" v-t="'address.local_part_description.' + type" />
<span class="sr-only" :id="id + 'domain-desc'" v-t="'address.domain_description.' + type" />
</b-input-group>
</template>
<script>
export default {
2020-08-03 19:32:53 +02:00
name: 'AdressInputSelect',
2020-10-28 16:49:43 +01:00
inheritAttrs: false,
props: {
// `value` is actually passed thru the `v-model` directive
2020-10-28 16:49:43 +01:00
value: { type: Object, required: true },
choices: { type: Array, required: true },
2020-08-03 19:32:53 +02:00
placeholder: { type: String, default: null },
id: { type: String, default: null },
state: { type: null, default: null },
2020-10-30 13:58:44 +01:00
type: { type: String, default: 'email' }
2020-10-28 16:49:43 +01:00
},
2023-03-24 21:35:31 +01:00
methods: {
onInput (key, value) {
this.$emit('input', {
...this.value,
[key]: value
})
2020-10-28 16:49:43 +01:00
}
}
}
</script>
2020-08-07 19:04:22 +02:00
<style lang="scss" scoped>
.input-group-append ~ .input-group-append {
2020-10-28 16:49:43 +01:00
flex-basis: 40%;
2020-08-07 19:04:22 +02:00
}
select {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
</style>