84 lines
1.8 KiB
Vue
84 lines
1.8 KiB
Vue
<template>
|
|
<v-dialog
|
|
v-model="internalDialog"
|
|
:max-width="mobile ? undefined : maxWidth"
|
|
:fullscreen="mobile"
|
|
:persistent="persistent"
|
|
scrollable
|
|
>
|
|
<HeaderActionsCard>
|
|
<template #header>
|
|
<div
|
|
class="d-flex align-start ga-2 w-100"
|
|
:class="{ 'pl-4': mobile, 'pt-2': mobile }"
|
|
style="white-space: normal"
|
|
>
|
|
<slot name="title">
|
|
<h3
|
|
class="text-h5 py-2 flex-grow-1 text-break"
|
|
style="min-width: 0; overflow-wrap: anywhere; white-space: normal"
|
|
>
|
|
<v-icon
|
|
v-if="titleIcon"
|
|
class="mr-2"
|
|
>{{ titleIcon }}</v-icon
|
|
>
|
|
{{ title }}
|
|
</h3>
|
|
</slot>
|
|
<v-btn
|
|
v-if="!hideClose"
|
|
icon="mdi-close"
|
|
:variant="mobile ? 'tonal' : 'text'"
|
|
density="comfortable"
|
|
class="flex-shrink-0"
|
|
@click="close"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<slot />
|
|
</HeaderActionsCard>
|
|
</v-dialog>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from "vue"
|
|
import { useDisplay } from "vuetify"
|
|
|
|
import HeaderActionsCard from "@/components/shared/cards/HeaderActionsCard.vue"
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
modelValue: boolean
|
|
title?: string
|
|
titleIcon?: string
|
|
maxWidth?: number | string
|
|
persistent?: boolean
|
|
hideClose?: boolean
|
|
}>(),
|
|
{
|
|
title: "",
|
|
titleIcon: "",
|
|
maxWidth: 700,
|
|
persistent: false,
|
|
hideClose: false,
|
|
}
|
|
)
|
|
|
|
const emit = defineEmits<{
|
|
"update:modelValue": [value: boolean]
|
|
}>()
|
|
|
|
const { mobile } = useDisplay()
|
|
|
|
const internalDialog = computed({
|
|
get: () => props.modelValue,
|
|
set: (value) => emit("update:modelValue", value),
|
|
})
|
|
|
|
function close() {
|
|
internalDialog.value = false
|
|
}
|
|
</script>
|