2236dd8ade
* fix: moderation locking fixes * fix: lint * wip: override always available * fix: newmodal base z * fix: cargo fmt
466 lines
12 KiB
Vue
466 lines
12 KiB
Vue
<template>
|
|
<Teleport to="body">
|
|
<div v-if="open" class="modal-root">
|
|
<div
|
|
:class="{ shown: visible }"
|
|
class="tauri-overlay"
|
|
data-tauri-drag-region
|
|
@click="() => (closeOnClickOutside && closable ? hide() : {})"
|
|
/>
|
|
<div
|
|
:class="[
|
|
'modal-overlay',
|
|
{
|
|
shown: visible,
|
|
noblur: effectiveNoblur,
|
|
},
|
|
computedFade,
|
|
]"
|
|
@click="() => (closeOnClickOutside && closable ? hide() : {})"
|
|
/>
|
|
<div class="modal-container experimental-styles-within" :class="{ shown: visible }">
|
|
<div
|
|
ref="modalBodyRef"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
:aria-labelledby="headerId"
|
|
class="modal-body flex flex-col bg-bg-raised rounded-2xl border border-solid border-surface-5"
|
|
@keydown="handleKeyDown"
|
|
>
|
|
<div
|
|
v-if="!hideHeader"
|
|
data-tauri-drag-region
|
|
class="grid grid-cols-[auto_min-content] items-center gap-4 p-6 border-solid border-0 border-b-[1px] border-surface-5 max-w-full"
|
|
>
|
|
<div class="flex text-wrap break-words items-center gap-3 min-w-0">
|
|
<slot name="title">
|
|
<span v-if="header" :id="headerId" class="text-2xl font-semibold text-contrast">
|
|
{{ header }}
|
|
</span>
|
|
</slot>
|
|
</div>
|
|
<ButtonStyled v-if="closable" circular>
|
|
<button
|
|
v-tooltip="closeLabel"
|
|
:aria-label="closeLabel"
|
|
:disabled="disableClose"
|
|
@click="hide"
|
|
>
|
|
<XIcon aria-hidden="true" />
|
|
</button>
|
|
</ButtonStyled>
|
|
</div>
|
|
|
|
<ButtonStyled
|
|
v-if="props.mergeHeader && closable"
|
|
class="absolute top-4 right-4 z-10"
|
|
circular
|
|
>
|
|
<button
|
|
v-tooltip="closeLabel"
|
|
:aria-label="closeLabel"
|
|
:disabled="disableClose"
|
|
@click="hide"
|
|
>
|
|
<XIcon aria-hidden="true" />
|
|
</button>
|
|
</ButtonStyled>
|
|
|
|
<div v-if="scrollable" class="relative flex-1 min-h-0 flex flex-col">
|
|
<Transition
|
|
enter-active-class="transition-all duration-200 ease-out"
|
|
enter-from-class="opacity-0 max-h-0"
|
|
enter-to-class="opacity-100 max-h-6"
|
|
leave-active-class="transition-all duration-200 ease-in"
|
|
leave-from-class="opacity-100 max-h-6"
|
|
leave-to-class="opacity-0 max-h-0"
|
|
>
|
|
<div
|
|
v-if="showTopFade"
|
|
class="pointer-events-none absolute left-0 right-0 top-0 z-10 h-6 bg-gradient-to-b from-bg-raised to-transparent"
|
|
/>
|
|
</Transition>
|
|
|
|
<div
|
|
ref="scrollContainer"
|
|
:class="[
|
|
'flex-1 min-h-0',
|
|
props.noPadding ? '' : 'overflow-y-auto p-6 !pb-1 sm:pb-6',
|
|
{ 'pt-12': props.mergeHeader && closable && !props.noPadding },
|
|
]"
|
|
:style="props.noPadding ? {} : { maxHeight: maxContentHeight }"
|
|
@scroll="checkScrollState"
|
|
>
|
|
<slot> You just lost the game.</slot>
|
|
</div>
|
|
|
|
<Transition
|
|
enter-active-class="transition-all duration-200 ease-out"
|
|
enter-from-class="opacity-0 max-h-0"
|
|
enter-to-class="opacity-100 max-h-6"
|
|
leave-active-class="transition-all duration-200 ease-in"
|
|
leave-from-class="opacity-100 max-h-6"
|
|
leave-to-class="opacity-0 max-h-0"
|
|
>
|
|
<div
|
|
v-if="showBottomFade"
|
|
class="pointer-events-none absolute bottom-0 left-0 right-0 z-10 h-6 bg-gradient-to-t from-bg-raised to-transparent"
|
|
/>
|
|
</Transition>
|
|
</div>
|
|
|
|
<div
|
|
v-else
|
|
:class="[
|
|
props.noPadding ? '' : 'overflow-y-auto p-6',
|
|
{ 'pt-12': props.mergeHeader && closable && !props.noPadding },
|
|
]"
|
|
>
|
|
<slot> You just lost the game.</slot>
|
|
</div>
|
|
|
|
<div v-if="$slots.actions" class="p-4 pt-0">
|
|
<slot name="actions" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Teleport>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { XIcon } from '@modrinth/assets'
|
|
import { computed, nextTick, onUnmounted, ref } from 'vue'
|
|
|
|
import { useVIntl } from '../../composables/i18n'
|
|
import { useModalStack } from '../../composables/modal-stack'
|
|
import { useScrollIndicator } from '../../composables/scroll-indicator'
|
|
import { injectModalBehavior } from '../../providers'
|
|
import { commonMessages } from '../../utils/common-messages'
|
|
import ButtonStyled from '../base/ButtonStyled.vue'
|
|
|
|
const { formatMessage } = useVIntl()
|
|
|
|
const modalBehavior = injectModalBehavior(null)
|
|
const {
|
|
push: pushModal,
|
|
pop: popModal,
|
|
isTopmost: isTopmostModal,
|
|
stackSize: modalStackSize,
|
|
} = useModalStack()
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
noblur?: boolean
|
|
closable?: boolean
|
|
/** @deprecated Use `fade="danger"` instead */
|
|
danger?: boolean
|
|
fade?: 'standard' | 'warning' | 'danger'
|
|
closeOnEsc?: boolean
|
|
closeOnClickOutside?: boolean
|
|
warnOnClose?: boolean
|
|
header?: string
|
|
hideHeader?: boolean
|
|
onHide?: () => void
|
|
onShow?: () => void
|
|
mergeHeader?: boolean
|
|
scrollable?: boolean
|
|
maxContentHeight?: string
|
|
/** Removes padding from the content area. Useful for edge-to-edge layouts. */
|
|
noPadding?: boolean
|
|
/** Max width for the modal (e.g., '460px', '600px'). Defaults to '60rem'. */
|
|
maxWidth?: string
|
|
/** Width for the modal body (e.g., '460px', '600px'). */
|
|
width?: string
|
|
/** Disables all close actions (close button, ESC key, click outside). */
|
|
disableClose?: boolean
|
|
}>(),
|
|
{
|
|
type: true,
|
|
noblur: undefined,
|
|
closable: true,
|
|
danger: false,
|
|
fade: undefined,
|
|
closeOnClickOutside: true,
|
|
closeOnEsc: true,
|
|
warnOnClose: false,
|
|
header: undefined,
|
|
hideHeader: false,
|
|
onHide: () => {},
|
|
onShow: () => {},
|
|
mergeHeader: false,
|
|
// TODO: migrate all modals to use scrollable and remove this prop
|
|
scrollable: false,
|
|
maxContentHeight: '70vh',
|
|
noPadding: false,
|
|
maxWidth: undefined,
|
|
width: undefined,
|
|
disableClose: false,
|
|
},
|
|
)
|
|
|
|
const effectiveNoblur = computed(() => props.noblur ?? modalBehavior?.noblur.value ?? false)
|
|
|
|
const computedFade = computed(() => {
|
|
if (props.fade) return props.fade
|
|
if (props.danger) return 'danger'
|
|
return 'standard'
|
|
})
|
|
|
|
const modalId = `modal-${Math.random().toString(36).slice(2, 9)}`
|
|
const headerId = `${modalId}-header`
|
|
const closeLabel = computed(() => formatMessage(commonMessages.closeButton))
|
|
|
|
const open = ref(false)
|
|
const visible = ref(false)
|
|
const stackDepth = ref(0)
|
|
const modalBodyRef = ref<HTMLElement | null>(null)
|
|
let previousFocusEl: Element | null = null
|
|
|
|
const scrollContainer = ref<HTMLElement | null>(null)
|
|
const { showTopFade, showBottomFade, checkScrollState } = useScrollIndicator(scrollContainer)
|
|
|
|
const FOCUSABLE_SELECTOR =
|
|
'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
|
|
|
|
function getFocusableElements(): HTMLElement[] {
|
|
if (!modalBodyRef.value) return []
|
|
return Array.from(modalBodyRef.value.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR))
|
|
}
|
|
|
|
function show(event?: MouseEvent) {
|
|
props.onShow?.()
|
|
const wasEmpty = modalStackSize() === 0
|
|
stackDepth.value = modalStackSize()
|
|
open.value = true
|
|
previousFocusEl = document.activeElement
|
|
pushModal()
|
|
if (wasEmpty) modalBehavior?.onShow?.()
|
|
|
|
document.body.style.overflow = 'hidden'
|
|
window.addEventListener('keydown', handleWindowKeyDown)
|
|
window.addEventListener('mousedown', updateMousePosition)
|
|
if (event) {
|
|
updateMousePosition(event)
|
|
} else {
|
|
mouseX.value = Math.round(window.innerWidth / 2)
|
|
mouseY.value = Math.round(window.innerHeight / 2)
|
|
}
|
|
setTimeout(() => {
|
|
visible.value = true
|
|
nextTick(() => {
|
|
const focusable = getFocusableElements()
|
|
if (focusable.length > 0) {
|
|
focusable[0].focus()
|
|
} else {
|
|
modalBodyRef.value?.focus()
|
|
}
|
|
})
|
|
}, 50)
|
|
}
|
|
|
|
function hide() {
|
|
if (props.disableClose) return
|
|
props.onHide?.()
|
|
visible.value = false
|
|
popModal()
|
|
if (modalStackSize() === 0) {
|
|
modalBehavior?.onHide?.()
|
|
document.body.style.overflow = ''
|
|
}
|
|
window.removeEventListener('keydown', handleWindowKeyDown)
|
|
window.removeEventListener('mousedown', updateMousePosition)
|
|
if (previousFocusEl instanceof HTMLElement) {
|
|
previousFocusEl.focus()
|
|
}
|
|
previousFocusEl = null
|
|
setTimeout(() => {
|
|
open.value = false
|
|
}, 300)
|
|
}
|
|
|
|
defineExpose({
|
|
show,
|
|
hide,
|
|
checkScrollState,
|
|
})
|
|
|
|
const mouseX = ref(0)
|
|
const mouseY = ref(0)
|
|
|
|
const MODAL_STACK_BASE_Z = 100
|
|
const stackZBase = computed(() => MODAL_STACK_BASE_Z + stackDepth.value * 10)
|
|
const stackOverlayZ = computed(() => stackZBase.value + 19)
|
|
const stackTauriZ = computed(() => stackZBase.value + 20)
|
|
const stackContainerZ = computed(() => stackZBase.value + 21)
|
|
const resolvedMaxWidth = computed(() => props.maxWidth ?? '60rem')
|
|
const resolvedWidth = computed(() => props.width ?? 'fit-content')
|
|
const mouseXOffset = computed(() => `calc((-50vw + ${mouseX.value}px) / 16)`)
|
|
const mouseYOffset = computed(() => `calc((-50vh + ${mouseY.value}px) / 16)`)
|
|
|
|
function updateMousePosition(event: { clientX: number; clientY: number }) {
|
|
mouseX.value = event.clientX
|
|
mouseY.value = event.clientY
|
|
}
|
|
|
|
onUnmounted(() => {
|
|
if (open.value) {
|
|
popModal()
|
|
window.removeEventListener('keydown', handleWindowKeyDown)
|
|
window.removeEventListener('mousedown', updateMousePosition)
|
|
if (modalStackSize() === 0) {
|
|
document.body.style.overflow = ''
|
|
modalBehavior?.onHide?.()
|
|
}
|
|
}
|
|
})
|
|
|
|
function handleWindowKeyDown(event: KeyboardEvent) {
|
|
if (props.closeOnEsc && event.key === 'Escape' && props.closable) {
|
|
if (!isTopmostModal()) return
|
|
hide()
|
|
mouseX.value = Math.round(window.innerWidth / 2)
|
|
mouseY.value = Math.round(window.innerHeight / 2)
|
|
}
|
|
}
|
|
|
|
function handleKeyDown(event: KeyboardEvent) {
|
|
if (event.key === 'Tab') {
|
|
const focusable = getFocusableElements()
|
|
if (focusable.length === 0) return
|
|
|
|
const first = focusable[0]
|
|
const last = focusable[focusable.length - 1]
|
|
|
|
if (event.shiftKey) {
|
|
if (document.activeElement === first) {
|
|
event.preventDefault()
|
|
last.focus()
|
|
}
|
|
} else {
|
|
if (document.activeElement === last) {
|
|
event.preventDefault()
|
|
first.focus()
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.tauri-overlay {
|
|
position: fixed;
|
|
visibility: hidden;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100px;
|
|
z-index: v-bind(stackTauriZ);
|
|
|
|
&.shown {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
}
|
|
|
|
.modal-overlay {
|
|
position: fixed;
|
|
inset: -5rem;
|
|
z-index: v-bind(stackOverlayZ);
|
|
opacity: 0;
|
|
transition: all 0.2s ease-out;
|
|
//transform: translate(
|
|
// calc((-50vw + var(--_mouse-x, 50vw) * 1px) / 2),
|
|
// calc((-50vh + var(--_mouse-y, 50vh) * 1px) / 2)
|
|
// )
|
|
// scaleX(0.8) scaleY(0.5);
|
|
border-radius: 180px;
|
|
//filter: blur(5px);
|
|
|
|
// Fade variants
|
|
&.standard {
|
|
background: linear-gradient(to bottom, rgba(29, 48, 43, 0.52) 0%, rgba(14, 21, 26, 0.95) 100%);
|
|
}
|
|
|
|
&.warning {
|
|
background: linear-gradient(to bottom, rgba(48, 38, 29, 0.52) 0%, rgba(26, 20, 14, 0.95) 100%);
|
|
}
|
|
|
|
&.danger {
|
|
background: linear-gradient(to bottom, rgba(43, 18, 26, 0.52) 0%, rgba(49, 10, 15, 0.95) 100%);
|
|
}
|
|
|
|
@media (prefers-reduced-motion) {
|
|
transition: none !important;
|
|
}
|
|
|
|
&.shown {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
backdrop-filter: blur(5px);
|
|
}
|
|
|
|
&.noblur {
|
|
backdrop-filter: none;
|
|
filter: none;
|
|
}
|
|
}
|
|
|
|
.modrinth-parent__no-modal-blurs {
|
|
.modal-overlay {
|
|
backdrop-filter: none;
|
|
}
|
|
}
|
|
|
|
.modal-container {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: v-bind(stackContainerZ);
|
|
visibility: hidden;
|
|
pointer-events: none;
|
|
transform: translate(v-bind(mouseXOffset), v-bind(mouseYOffset));
|
|
transition: all 0.2s ease-out;
|
|
|
|
&.shown {
|
|
visibility: visible;
|
|
transform: translate(0, 0);
|
|
|
|
> .modal-body {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
scale: 1;
|
|
}
|
|
}
|
|
|
|
> .modal-body {
|
|
position: fixed;
|
|
box-shadow: 4px 4px 26px 10px rgba(0, 0, 0, 0.08);
|
|
max-height: calc(100% - 2 * var(--gap-lg));
|
|
max-width: min(v-bind(resolvedMaxWidth), calc(100% - 2 * var(--gap-lg)));
|
|
overflow-y: hidden;
|
|
overflow-x: hidden;
|
|
width: v-bind(resolvedWidth);
|
|
pointer-events: auto;
|
|
scale: 0.97;
|
|
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
transition: all 0.2s ease-in-out;
|
|
|
|
@media (prefers-reduced-motion) {
|
|
transition: none !important;
|
|
}
|
|
|
|
@media screen and (max-width: 640px) {
|
|
width: calc(100% - 2 * var(--gap-lg));
|
|
}
|
|
}
|
|
}
|
|
</style>
|