65 lines
2.3 KiB
Vue
65 lines
2.3 KiB
Vue
<script setup lang="ts">
|
|
import { ref, watch } from "vue"
|
|
import type { PrimitiveProps } from "reka-ui"
|
|
import { type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'reka-ui'
|
|
import { Button } from "@/components/ui/button"
|
|
import { Dialog, DialogContent, DialogClose, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } 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> |