Caramel-CRM/resources/js/components/ui/send-mail-dialog/SendMailDialog.vue

<script setup lang="ts">
import { ref, watch } from "vue"
import { type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'reka-ui'
import { Button } from "@/components/ui/button"
import { Dialog, DialogContent, DialogClose, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

const props = defineProps<DialogRootProps & {
    title: string,
    description?: string,
    recipient?: string
}>()
const recipient = ref<string | undefined>(props.recipient)
const emits = defineEmits<DialogRootEmits & {
    send: [recipient: string | undefined]
}>()
const forwarded = useForwardPropsEmits(props, emits)

watch(() => props.open,
    (newValue, oldValue) => {
        recipient.value = props.recipient
    }
)
</script>

<template>
    <Dialog v-bind="forwarded" :open="open" data-slot="send-mail-dialog">
        <DialogContent class="sm:max-w-[425px]">
            <DialogHeader>
                <DialogTitle>{{ props.title }}</DialogTitle>
                <DialogDescription v-if="props.description" v-html="props.description" />
            </DialogHeader>
            <div class="grid grid-cols-[min-content_1fr] gap-4 py-4">
                <Label for="email" class="text-right text-muted-foreground">
                    An
                </Label>
                <Input id="email" required v-model="recipient" type="email" placeholder="E-Mail" />

                <Label for="email" class="text-right text-muted-foreground">
                    Kopie
                </Label>
                <Input id="email" required :value="'buchhaltung@tooloop.de'" type="email" placeholder="E-Mail" />
            </div>
            <DialogFooter>
                <DialogClose as-child>
                    <Button>
                        Abbrechen
                    </Button>
                </DialogClose>
                <Button variant="destructive" @click="$emit('send', recipient)">
                    E-Mail senden
                </Button>
            </DialogFooter>
        </DialogContent>
    </Dialog>
</template>

<style scoped>
/* Remove close X */
[data-slot=send-mail-dialog] [data-slot=dialog-content] button.ring-offset-background {
    display: none;
}
</style>