mirror of
https://github.com/modrinth/code.git
synced 2026-08-25 09:04:55 +00:00
improve popout animations (#7040)
This commit is contained in:
Prospector
@@ -97,12 +97,7 @@
|
||||
</ButtonFrame>
|
||||
|
||||
<Teleport to="#teleports">
|
||||
<Transition
|
||||
enter-active-class="transition-opacity duration-150"
|
||||
leave-active-class="transition-opacity duration-150"
|
||||
enter-from-class="opacity-0"
|
||||
leave-to-class="opacity-0"
|
||||
>
|
||||
<Transition name="floating-expand">
|
||||
<div
|
||||
v-if="shouldRenderDropdown"
|
||||
ref="dropdownRef"
|
||||
@@ -110,7 +105,6 @@
|
||||
:class="[
|
||||
props.dropdownClass,
|
||||
openDirection === 'up' ? 'shadow-[0_-25px_50px_-12px_rgb(0,0,0,0.25)]' : 'shadow-2xl',
|
||||
props.dropdownClass,
|
||||
]"
|
||||
:style="dropdownStyle"
|
||||
:role="listbox ? 'listbox' : 'menu'"
|
||||
|
||||
@@ -128,12 +128,7 @@
|
||||
</div>
|
||||
|
||||
<Teleport to="#teleports">
|
||||
<Transition
|
||||
:enter-active-class="addMenuTransitionEnterActiveClass"
|
||||
leave-active-class="transition-none duration-0"
|
||||
:enter-from-class="addMenuTransitionEnterFromClass"
|
||||
leave-to-class="opacity-0"
|
||||
>
|
||||
<Transition name="floating-expand" :css="!isMobileAddMenuLayout">
|
||||
<div
|
||||
v-if="isAddMenuOpen && !isMobileActiveSubmenu"
|
||||
ref="menuContainer"
|
||||
@@ -166,207 +161,214 @@
|
||||
</Teleport>
|
||||
|
||||
<Teleport to="#teleports">
|
||||
<div
|
||||
v-if="isAddMenuOpen && activeCategory && (isMobileAddMenuLayout || hasSubmenuPosition)"
|
||||
ref="submenu"
|
||||
class="fixed z-[10000] flex max-h-[min(70vh,32rem)] max-w-[calc(100vw-1rem)] flex-col overflow-hidden rounded-[14px] border border-solid border-surface-5 bg-surface-4 shadow-2xl"
|
||||
:class="activeCategory.submenuClass ?? DEFAULT_SUBMENU_CLASS"
|
||||
:style="submenuStyle"
|
||||
@mouseenter="handleSubmenuMouseEnter"
|
||||
@mouseleave="handleSubmenuMouseLeave"
|
||||
@keydown="handleAddMenuKeydown"
|
||||
@mousemove="(event) => handleMenuMouseMove(event, 'submenu')"
|
||||
>
|
||||
<Transition name="floating-expand" :css="!isMobileAddMenuLayout">
|
||||
<div
|
||||
v-if="isMobileAddMenuLayout"
|
||||
class="flex items-center border-0 border-b border-solid border-b-surface-5 bg-surface-4"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="flex h-12 w-full items-center gap-2 border-0 bg-transparent px-4 text-left text-base font-semibold text-primary shadow-none transition-all hover:brightness-110 focus-visible:brightness-110"
|
||||
@click="returnToCategoryMenu"
|
||||
>
|
||||
<ChevronLeftIcon class="size-5 shrink-0 text-secondary" />
|
||||
<span class="min-w-0 truncate">{{ activeCategory.label }}</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
v-if="activeCategory.searchable"
|
||||
class="flex justify-between border-0 border-b border-solid border-b-surface-5 py-1.5 w-full"
|
||||
>
|
||||
<StyledInput
|
||||
v-model="categorySearchQuery"
|
||||
:icon="SearchIcon"
|
||||
type="text"
|
||||
:placeholder="activeCategory.searchPlaceholder ?? 'Search...'"
|
||||
wrapper-class="grow bg-surface-4 mx-1"
|
||||
input-class="ps-9 mx-1.5"
|
||||
/>
|
||||
<slot
|
||||
name="search-actions"
|
||||
:category="activeCategory"
|
||||
:selected-values="activeCategorySelectedValues"
|
||||
:set-selected-values="setActiveCategorySelectedValues"
|
||||
:close-menu="closeAddMenu"
|
||||
></slot>
|
||||
</div>
|
||||
|
||||
<div v-if="$slots['category-top']" class="border-0 border-b border-solid border-b-surface-5">
|
||||
<slot
|
||||
name="category-top"
|
||||
:category="activeCategory"
|
||||
:selected-values="activeCategorySelectedValues"
|
||||
:set-selected-values="setActiveCategorySelectedValues"
|
||||
:close-menu="closeAddMenu"
|
||||
></slot>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex items-center justify-between gap-3 border-0 border-b border-solid border-b-surface-5 px-4 py-2.5 text-sm"
|
||||
>
|
||||
<span class="font-semibold text-secondary">{{ activeCategorySelectionLabel }}</span>
|
||||
<button
|
||||
type="button"
|
||||
class="border-0 bg-transparent p-0 text-sm font-semibold text-secondary shadow-none transition-colors"
|
||||
:class="
|
||||
hasActiveCategorySelection
|
||||
? 'hover:bg-transparent hover:text-contrast'
|
||||
: 'cursor-not-allowed opacity-50'
|
||||
"
|
||||
:disabled="!hasActiveCategorySelection"
|
||||
@click="clearActiveCategorySelection"
|
||||
@keydown.enter.stop
|
||||
@keydown.space.stop
|
||||
>
|
||||
Clear
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
ref="activeCategoryOptionsScrollbar"
|
||||
class="dropdown-filter-bar-options-scrollbar min-h-0 flex-1 bg-surface-4"
|
||||
data-overlayscrollbars-initialize
|
||||
v-if="isAddMenuOpen && activeCategory && (isMobileAddMenuLayout || hasSubmenuPosition)"
|
||||
ref="submenu"
|
||||
class="fixed z-[10000] flex max-h-[min(70vh,32rem)] max-w-[calc(100vw-1rem)] flex-col overflow-hidden rounded-[14px] border border-solid border-surface-5 bg-surface-4 shadow-2xl"
|
||||
:class="activeCategory.submenuClass ?? DEFAULT_SUBMENU_CLASS"
|
||||
:style="submenuStyle"
|
||||
@mouseenter="handleSubmenuMouseEnter"
|
||||
@mouseleave="handleSubmenuMouseLeave"
|
||||
@keydown="handleAddMenuKeydown"
|
||||
@mousemove="(event) => handleMenuMouseMove(event, 'submenu')"
|
||||
>
|
||||
<div
|
||||
ref="activeCategoryOptionsContainer"
|
||||
class="h-full min-h-0 overflow-y-auto"
|
||||
data-overlayscrollbars-viewport
|
||||
v-if="isMobileAddMenuLayout"
|
||||
class="flex items-center border-0 border-b border-solid border-b-surface-5 bg-surface-4"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="flex h-12 w-full items-center gap-2 border-0 bg-transparent px-4 text-left text-base font-semibold text-primary shadow-none transition-all hover:brightness-110 focus-visible:brightness-110"
|
||||
@click="returnToCategoryMenu"
|
||||
>
|
||||
<ChevronLeftIcon class="size-5 shrink-0 text-secondary" />
|
||||
<span class="min-w-0 truncate">{{ activeCategory.label }}</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
v-if="activeCategory.searchable"
|
||||
class="flex justify-between border-0 border-b border-solid border-b-surface-5 py-1.5 w-full"
|
||||
>
|
||||
<StyledInput
|
||||
v-model="categorySearchQuery"
|
||||
:icon="SearchIcon"
|
||||
type="text"
|
||||
:placeholder="activeCategory.searchPlaceholder ?? 'Search...'"
|
||||
wrapper-class="grow bg-surface-4 mx-1"
|
||||
input-class="ps-9 mx-1.5"
|
||||
/>
|
||||
<slot
|
||||
name="search-actions"
|
||||
:category="activeCategory"
|
||||
:selected-values="activeCategorySelectedValues"
|
||||
:set-selected-values="setActiveCategorySelectedValues"
|
||||
:close-menu="closeAddMenu"
|
||||
></slot>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="$slots['category-top']"
|
||||
class="border-0 border-b border-solid border-b-surface-5"
|
||||
>
|
||||
<slot
|
||||
name="category-top"
|
||||
:category="activeCategory"
|
||||
:selected-values="activeCategorySelectedValues"
|
||||
:set-selected-values="setActiveCategorySelectedValues"
|
||||
:close-menu="closeAddMenu"
|
||||
></slot>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex items-center justify-between gap-3 border-0 border-b border-solid border-b-surface-5 px-4 py-2.5 text-sm"
|
||||
>
|
||||
<span class="font-semibold text-secondary">{{ activeCategorySelectionLabel }}</span>
|
||||
<button
|
||||
type="button"
|
||||
class="border-0 bg-transparent p-0 text-sm font-semibold text-secondary shadow-none transition-colors"
|
||||
:class="
|
||||
hasActiveCategorySelection
|
||||
? 'hover:bg-transparent hover:text-contrast'
|
||||
: 'cursor-not-allowed opacity-50'
|
||||
"
|
||||
:disabled="!hasActiveCategorySelection"
|
||||
@click="clearActiveCategorySelection"
|
||||
@keydown.enter.stop
|
||||
@keydown.space.stop
|
||||
>
|
||||
Clear
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
ref="activeCategoryOptionsScrollbar"
|
||||
class="dropdown-filter-bar-options-scrollbar min-h-0 flex-1 bg-surface-4"
|
||||
data-overlayscrollbars-initialize
|
||||
>
|
||||
<div
|
||||
v-if="filteredActiveCategoryOptions.length === 0"
|
||||
class="px-4 py-3.5 text-base font-medium text-secondary"
|
||||
>
|
||||
{{ activeCategoryEmptyStateLabel }}
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
ref="activeCategoryOptionsListContainer"
|
||||
:class="shouldVirtualizeActiveCategoryOptions ? 'relative' : 'flex flex-col'"
|
||||
:style="activeCategoryOptionsListStyle"
|
||||
ref="activeCategoryOptionsContainer"
|
||||
class="h-full min-h-0 overflow-y-auto"
|
||||
data-overlayscrollbars-viewport
|
||||
>
|
||||
<div
|
||||
v-for="{ item, index } in renderedVisibleActiveCategoryOptions"
|
||||
:key="getActiveCategoryItemKey(item, index)"
|
||||
:class="shouldVirtualizeActiveCategoryOptions ? 'absolute left-0 right-0' : undefined"
|
||||
:style="getActiveCategoryOptionWrapperStyle(index)"
|
||||
v-if="filteredActiveCategoryOptions.length === 0"
|
||||
class="px-4 py-3.5 text-base font-medium text-secondary"
|
||||
>
|
||||
{{ activeCategoryEmptyStateLabel }}
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
ref="activeCategoryOptionsListContainer"
|
||||
:class="shouldVirtualizeActiveCategoryOptions ? 'relative' : 'flex flex-col'"
|
||||
:style="activeCategoryOptionsListStyle"
|
||||
>
|
||||
<div
|
||||
v-if="isDropdownFilterSectionHeader(item)"
|
||||
class="flex items-center justify-between gap-3 border-0 px-4 py-2.5 text-sm font-semibold text-secondary"
|
||||
:class="[
|
||||
item.class,
|
||||
item.dividerBefore && index > 0
|
||||
? 'border-t border-solid border-surface-5'
|
||||
: undefined,
|
||||
]"
|
||||
v-for="{ item, index } in renderedVisibleActiveCategoryOptions"
|
||||
:key="getActiveCategoryItemKey(item, index)"
|
||||
:class="
|
||||
shouldVirtualizeActiveCategoryOptions ? 'absolute left-0 right-0' : undefined
|
||||
"
|
||||
:style="getActiveCategoryOptionWrapperStyle(index)"
|
||||
>
|
||||
<span class="flex min-w-0 items-center gap-2">
|
||||
<component
|
||||
:is="item.icon"
|
||||
v-if="item.icon"
|
||||
class="size-4 shrink-0"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span class="min-w-0 truncate">{{ item.label }}</span>
|
||||
</span>
|
||||
<div
|
||||
v-if="isDropdownFilterSectionHeader(item)"
|
||||
class="flex items-center justify-between gap-3 border-0 px-4 py-2.5 text-sm font-semibold text-secondary"
|
||||
:class="[
|
||||
item.class,
|
||||
item.dividerBefore && index > 0
|
||||
? 'border-t border-solid border-surface-5'
|
||||
: undefined,
|
||||
]"
|
||||
>
|
||||
<span class="flex min-w-0 items-center gap-2">
|
||||
<component
|
||||
:is="item.icon"
|
||||
v-if="item.icon"
|
||||
class="size-4 shrink-0"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span class="min-w-0 truncate">{{ item.label }}</span>
|
||||
</span>
|
||||
<button
|
||||
v-if="hasSelectableSectionHeaderOptions(item)"
|
||||
type="button"
|
||||
class="border-0 bg-transparent p-0 text-sm font-semibold text-secondary shadow-none transition-colors hover:text-contrast"
|
||||
@click="toggleSectionHeaderOptions(item)"
|
||||
>
|
||||
{{ areSectionHeaderOptionsSelected(item) ? 'Clear' : 'Select all' }}
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
v-if="hasSelectableSectionHeaderOptions(item)"
|
||||
v-else
|
||||
type="button"
|
||||
class="border-0 bg-transparent p-0 text-sm font-semibold text-secondary shadow-none transition-colors hover:text-contrast"
|
||||
@click="toggleSectionHeaderOptions(item)"
|
||||
class="flex w-full cursor-pointer items-center gap-2.5 border-0 px-4 py-3.5 text-left text-contrast shadow-none transition-all duration-150 bg-surface-4 hover:brightness-[115%] focus-visible:brightness-[115%] focus-visible:outline-none"
|
||||
:class="[
|
||||
shouldVirtualizeActiveCategoryOptions ? 'h-12' : undefined,
|
||||
{
|
||||
'brightness-[115%]': item.selected,
|
||||
'pointer-events-none cursor-not-allowed opacity-50': item.disabled,
|
||||
},
|
||||
]"
|
||||
:aria-disabled="item.disabled || undefined"
|
||||
:aria-checked="item.selected"
|
||||
role="checkbox"
|
||||
@click="toggleFilterOption(activeCategory.key, item)"
|
||||
>
|
||||
{{ areSectionHeaderOptionsSelected(item) ? 'Clear' : 'Select all' }}
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
v-else
|
||||
type="button"
|
||||
class="flex w-full cursor-pointer items-center gap-2.5 border-0 px-4 py-3.5 text-left text-contrast shadow-none transition-all duration-150 bg-surface-4 hover:brightness-[115%] focus-visible:brightness-[115%] focus-visible:outline-none"
|
||||
:class="[
|
||||
shouldVirtualizeActiveCategoryOptions ? 'h-12' : undefined,
|
||||
{
|
||||
'brightness-[115%]': item.selected,
|
||||
'pointer-events-none cursor-not-allowed opacity-50': item.disabled,
|
||||
},
|
||||
]"
|
||||
:aria-disabled="item.disabled || undefined"
|
||||
:aria-checked="item.selected"
|
||||
role="checkbox"
|
||||
@click="toggleFilterOption(activeCategory.key, item)"
|
||||
>
|
||||
<span
|
||||
v-if="checkboxPosition === 'left'"
|
||||
class="checkbox-shadow flex h-5 w-5 shrink-0 items-center justify-center rounded-md border-[1px] border-solid"
|
||||
:class="
|
||||
item.selected
|
||||
? 'border-button-border bg-brand text-brand-inverted'
|
||||
: 'border-surface-5 bg-surface-2'
|
||||
"
|
||||
>
|
||||
<CheckIcon v-if="item.selected" aria-hidden="true" stroke-width="3" />
|
||||
</span>
|
||||
<div class="flex min-w-0 flex-1 items-center justify-between gap-3">
|
||||
<slot
|
||||
v-if="$slots.option"
|
||||
name="option"
|
||||
:category="activeCategory"
|
||||
:option="item"
|
||||
:selected="item.selected"
|
||||
:index="index"
|
||||
></slot>
|
||||
<template v-else>
|
||||
<span
|
||||
class="min-w-0 truncate font-semibold leading-tight"
|
||||
:class="item.selected ? 'text-contrast' : 'text-primary'"
|
||||
>
|
||||
{{ item.label }}
|
||||
</span>
|
||||
<span
|
||||
v-if="checkboxPosition === 'left'"
|
||||
class="checkbox-shadow flex h-5 w-5 shrink-0 items-center justify-center rounded-md border-[1px] border-solid"
|
||||
:class="
|
||||
item.selected
|
||||
? 'border-button-border bg-brand text-brand-inverted'
|
||||
: 'border-surface-5 bg-surface-2'
|
||||
"
|
||||
>
|
||||
<CheckIcon v-if="item.selected" aria-hidden="true" stroke-width="3" />
|
||||
</span>
|
||||
<div class="flex min-w-0 flex-1 items-center justify-between gap-3">
|
||||
<slot
|
||||
name="option-right"
|
||||
v-if="$slots.option"
|
||||
name="option"
|
||||
:category="activeCategory"
|
||||
:option="item"
|
||||
:selected="item.selected"
|
||||
:index="index"
|
||||
></slot>
|
||||
</template>
|
||||
</div>
|
||||
<span
|
||||
v-if="checkboxPosition === 'right'"
|
||||
class="flex shrink-0 items-center justify-center text-brand"
|
||||
>
|
||||
<CheckIcon v-if="item.selected" aria-hidden="true" class="size-5" />
|
||||
</span>
|
||||
</button>
|
||||
<template v-else>
|
||||
<span
|
||||
class="min-w-0 truncate font-semibold leading-tight"
|
||||
:class="item.selected ? 'text-contrast' : 'text-primary'"
|
||||
>
|
||||
{{ item.label }}
|
||||
</span>
|
||||
<slot
|
||||
name="option-right"
|
||||
:category="activeCategory"
|
||||
:option="item"
|
||||
:selected="item.selected"
|
||||
></slot>
|
||||
</template>
|
||||
</div>
|
||||
<span
|
||||
v-if="checkboxPosition === 'right'"
|
||||
class="flex shrink-0 items-center justify-center text-brand"
|
||||
>
|
||||
<CheckIcon v-if="item.selected" aria-hidden="true" class="size-5" />
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<slot
|
||||
name="category-footer"
|
||||
:category="activeCategory"
|
||||
:selected-values="activeCategorySelectedValues"
|
||||
:set-selected-values="setActiveCategorySelectedValues"
|
||||
:close-menu="closeAddMenu"
|
||||
></slot>
|
||||
</div>
|
||||
<slot
|
||||
name="category-footer"
|
||||
:category="activeCategory"
|
||||
:selected-values="activeCategorySelectedValues"
|
||||
:set-selected-values="setActiveCategorySelectedValues"
|
||||
:close-menu="closeAddMenu"
|
||||
></slot>
|
||||
</div>
|
||||
</Transition>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
@@ -726,12 +728,6 @@ const isMobileActiveSubmenu = computed(
|
||||
() =>
|
||||
isMobileAddMenuLayout.value && activeCategory.value !== undefined && hasSubmenuPosition.value,
|
||||
)
|
||||
const addMenuTransitionEnterActiveClass = computed(() =>
|
||||
isMobileAddMenuLayout.value ? 'transition-none duration-0' : 'transition-opacity duration-150',
|
||||
)
|
||||
const addMenuTransitionEnterFromClass = computed(() =>
|
||||
isMobileAddMenuLayout.value ? 'opacity-100' : 'opacity-0',
|
||||
)
|
||||
const addMenuTriggerElement = computed(() => addMenuTrigger.value?.element ?? null)
|
||||
const addMenuOutsideClickTarget = computed(() => menuContainer.value ?? submenu.value)
|
||||
const addMenuOutsideClickIgnore = computed(() => [addMenuTriggerElement, menuContainer, submenu])
|
||||
|
||||
@@ -108,12 +108,7 @@
|
||||
</component>
|
||||
|
||||
<Teleport to="#teleports">
|
||||
<Transition
|
||||
enter-active-class="transition-opacity duration-150"
|
||||
leave-active-class="transition-opacity duration-150"
|
||||
enter-from-class="opacity-0"
|
||||
leave-to-class="opacity-0"
|
||||
>
|
||||
<Transition name="floating-expand">
|
||||
<div
|
||||
v-if="isOpen"
|
||||
ref="dropdownRef"
|
||||
|
||||
@@ -80,6 +80,19 @@ const { isOpen, panelStyle, anchorStyle, resolvedSide, open, close } = useAnchor
|
||||
resolvedDistance,
|
||||
)
|
||||
|
||||
const menuTransformOrigin = computed(() => {
|
||||
switch (resolvedSide.value) {
|
||||
case 'top':
|
||||
return 'bottom center'
|
||||
case 'left':
|
||||
return 'right center'
|
||||
case 'right':
|
||||
return 'left center'
|
||||
default:
|
||||
return 'top center'
|
||||
}
|
||||
})
|
||||
|
||||
const menuItemClasses =
|
||||
'overflow-menu-item flex min-h-10 w-full items-center gap-2 rounded-[10px] border-0 bg-transparent px-3 py-2 text-left text-base font-semibold leading-5 text-contrast no-underline ' +
|
||||
'cursor-pointer whitespace-nowrap hover:bg-surface-4 focus-visible:bg-surface-4 focus-visible:outline-none ' +
|
||||
@@ -294,20 +307,13 @@ defineExpose({ open: openMenu, close: closeMenu })
|
||||
</component>
|
||||
|
||||
<Teleport to="body">
|
||||
<Transition
|
||||
enter-active-class="transition duration-125 ease-out"
|
||||
enter-from-class="scale-95 opacity-0"
|
||||
enter-to-class="scale-100 opacity-100"
|
||||
leave-active-class="transition duration-100 ease-in"
|
||||
leave-from-class="scale-100 opacity-100"
|
||||
leave-to-class="scale-95 opacity-0"
|
||||
>
|
||||
<Transition name="floating-expand">
|
||||
<div
|
||||
v-if="isOpen"
|
||||
:id="menuId"
|
||||
ref="panelElement"
|
||||
class="fixed isolate z-[9999] flex min-w-48 flex-col gap-1 rounded-[14px] bg-surface-3 p-2 shadow-lg ring-1 ring-surface-5"
|
||||
:style="panelStyle"
|
||||
:style="[panelStyle, { transformOrigin: menuTransformOrigin }]"
|
||||
role="menu"
|
||||
:aria-label="props.label"
|
||||
@keydown="handleMenuKeydown"
|
||||
|
||||
@@ -123,14 +123,7 @@ defineExpose({ open: openMenu, close: closeMenu })
|
||||
</component>
|
||||
|
||||
<Teleport to="body">
|
||||
<Transition
|
||||
enter-active-class="transition duration-125 ease-out"
|
||||
enter-from-class="scale-95 opacity-0"
|
||||
enter-to-class="scale-100 opacity-100"
|
||||
leave-active-class="transition duration-100 ease-in"
|
||||
leave-from-class="scale-100 opacity-100"
|
||||
leave-to-class="scale-95 opacity-0"
|
||||
>
|
||||
<Transition name="floating-expand">
|
||||
<div
|
||||
v-if="isOpen"
|
||||
:id="panelId"
|
||||
|
||||
@@ -1,18 +1,11 @@
|
||||
<template>
|
||||
<Teleport to="#teleports">
|
||||
<Transition
|
||||
enter-active-class="transition duration-125 ease-out"
|
||||
enter-from-class="transform scale-75 opacity-0"
|
||||
enter-to-class="transform scale-100 opacity-100"
|
||||
leave-active-class="transition duration-125 ease-in"
|
||||
leave-from-class="transform scale-100 opacity-100"
|
||||
leave-to-class="transform scale-75 opacity-0"
|
||||
>
|
||||
<Transition name="floating-expand">
|
||||
<div
|
||||
v-if="visible"
|
||||
ref="menuRef"
|
||||
class="fixed isolate z-[9999] flex w-fit min-w-[180px] flex-col gap-2 overflow-hidden rounded-2xl border border-solid border-surface-5 bg-bg-raised p-2 shadow-lg"
|
||||
:style="{ left: `${position.x}px`, top: `${position.y}px` }"
|
||||
:style="{ left: `${position.x}px`, top: `${position.y}px`, transformOrigin: 'top left' }"
|
||||
role="menu"
|
||||
tabindex="-1"
|
||||
@mousedown.stop
|
||||
|
||||
@@ -1,3 +1,26 @@
|
||||
:root {
|
||||
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
.floating-expand-enter-from,
|
||||
.floating-expand-leave-to {
|
||||
opacity: 0;
|
||||
scale: 0.9 0.3;
|
||||
}
|
||||
|
||||
.floating-expand-enter-to,
|
||||
.floating-expand-leave-from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.floating-expand-enter-active,
|
||||
.floating-expand-leave-active {
|
||||
transition:
|
||||
opacity 0.125s var(--ease-out-expo),
|
||||
scale 0.125s var(--ease-out-expo);
|
||||
transform-origin: top;
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
.heading-xl {
|
||||
@apply m-0 text-xl font-semibold leading-none text-contrast;
|
||||
|
||||
Reference in New Issue
Block a user