95 lines
1.8 KiB
Vue
95 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
interface Props {
|
|
to: string[]
|
|
cc: string[]
|
|
bcc: string[]
|
|
subject: string
|
|
showCc: boolean
|
|
showBcc: boolean
|
|
}
|
|
|
|
defineProps<Props>()
|
|
|
|
defineEmits<{
|
|
'update:to': [value: string[]]
|
|
'update:cc': [value: string[]]
|
|
'update:bcc': [value: string[]]
|
|
'update:subject': [value: string]
|
|
'toggle:cc': []
|
|
'toggle:bcc': []
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<div class="composer-fields pa-4">
|
|
<v-combobox
|
|
:model-value="to"
|
|
label="To"
|
|
chips
|
|
multiple
|
|
closable-chips
|
|
variant="outlined"
|
|
density="compact"
|
|
class="mb-2"
|
|
@update:model-value="$emit('update:to', $event)"
|
|
>
|
|
<template #append-inner>
|
|
<v-btn
|
|
size="x-small"
|
|
variant="text"
|
|
class="mr-1"
|
|
@click="$emit('toggle:cc')"
|
|
>
|
|
Cc
|
|
</v-btn>
|
|
<v-btn
|
|
size="x-small"
|
|
variant="text"
|
|
@click="$emit('toggle:bcc')"
|
|
>
|
|
Bcc
|
|
</v-btn>
|
|
</template>
|
|
</v-combobox>
|
|
|
|
<v-combobox
|
|
v-if="showCc"
|
|
:model-value="cc"
|
|
label="Cc"
|
|
chips
|
|
multiple
|
|
closable-chips
|
|
variant="outlined"
|
|
density="compact"
|
|
class="mb-2"
|
|
@update:model-value="$emit('update:cc', $event)"
|
|
/>
|
|
|
|
<v-combobox
|
|
v-if="showBcc"
|
|
:model-value="bcc"
|
|
label="Bcc"
|
|
chips
|
|
multiple
|
|
closable-chips
|
|
variant="outlined"
|
|
density="compact"
|
|
class="mb-2"
|
|
@update:model-value="$emit('update:bcc', $event)"
|
|
/>
|
|
|
|
<v-text-field
|
|
:model-value="subject"
|
|
label="Subject"
|
|
variant="outlined"
|
|
density="compact"
|
|
@update:model-value="$emit('update:subject', $event)"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.composer-fields {
|
|
flex-shrink: 0;
|
|
}
|
|
</style> |