Skip to content
Snippets Groups Projects
Commit bfc365bf authored by Konrad Mohrfeldt's avatar Konrad Mohrfeldt :koala:
Browse files

fix: rename Dialog component to ADialog

Using the same name as the native HTML dialog is a bad idea.
parent 7272ab6f
No related branches found
No related tags found
No related merge requests found
...@@ -4,11 +4,13 @@ ...@@ -4,11 +4,13 @@
ref="dialogEl" ref="dialogEl"
class="tw-shadow-xl tw-border tw-border-gray-200 tw-rounded tw-max-w-[95%] tw-p-0 tw-bg-white tw-z-30 tw-flex tw-flex-col" class="tw-shadow-xl tw-border tw-border-gray-200 tw-rounded tw-max-w-[95%] tw-p-0 tw-bg-white tw-z-30 tw-flex tw-flex-col"
@click="maybeClose" @click="maybeClose"
@keydown.esc="close" @close="close"
> >
<header class="tw-flex tw-justify-between tw-p-4 flex-none"> <header class="tw-flex tw-justify-between tw-p-4 flex-none">
<div> <div>
<slot name="header" /> <slot name="header" :title-class="titleClass">
<p :class="titleClass">{{ title }}</p>
</slot>
</div> </div>
<button <button
type="button" type="button"
...@@ -35,12 +37,16 @@ ...@@ -35,12 +37,16 @@
import { onClickOutside } from '@vueuse/core' import { onClickOutside } from '@vueuse/core'
import { nextTick, ref, useSlots, watch } from 'vue' import { nextTick, ref, useSlots, watch } from 'vue'
const titleClass = 'tw-text-lg tw-font-semibold tw-m-0'
const props = withDefaults( const props = withDefaults(
defineProps<{ defineProps<{
modelValue: boolean modelValue: boolean
isModal?: boolean isModal?: boolean
title?: string
}>(), }>(),
{ {
title: '',
isModal: false, isModal: false,
}, },
) )
...@@ -71,8 +77,6 @@ function maybeClose(event: MouseEvent) { ...@@ -71,8 +77,6 @@ function maybeClose(event: MouseEvent) {
} }
} }
onClickOutside(dialogEl, close)
watch( watch(
() => props.modelValue, () => props.modelValue,
async (isOpen) => { async (isOpen) => {
......
<template> <template>
<Dialog v-model="localIsOpen" class="tw-w-screen lg:tw-w-[60vw] tw-max-w-[800px]" is-modal> <ADialog v-model="localIsOpen" is-modal class="tw-w-screen lg:tw-w-[60vw] tw-max-w-[800px]">
<template #header> <template #header>
<p class="tw-text-lg tw-font-semibold tw-m-0">{{ t('imagePicker.title') }}</p> <p class="tw-text-lg tw-font-semibold tw-m-0">{{ t('imagePicker.title') }}</p>
</template> </template>
...@@ -60,7 +60,7 @@ ...@@ -60,7 +60,7 @@
</button> </button>
</div> </div>
</template> </template>
</Dialog> </ADialog>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
...@@ -68,7 +68,7 @@ import { computed, ref } from 'vue' ...@@ -68,7 +68,7 @@ import { computed, ref } from 'vue'
import { useI18n } from '@/i18n' import { useI18n } from '@/i18n'
import { Image, NewImage, useImage, useImageStore } from '@/stores/images' import { Image, NewImage, useImage, useImageStore } from '@/stores/images'
import { useAsyncFunction, useUpdatableState } from '@/util' import { useAsyncFunction, useUpdatableState } from '@/util'
import Dialog from '../generic/Dialog.vue' import ADialog from '../generic/ADialog.vue'
import ImageBrowser from './ImageBrowser.vue' import ImageBrowser from './ImageBrowser.vue'
import ImageEditor from './ImageEditor.vue' import ImageEditor from './ImageEditor.vue'
import ImageUploader from './ImageUploader.vue' import ImageUploader from './ImageUploader.vue'
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment