fixes: post content tab release issues (#5566)

* fix: migrate old cache entries for CachedFileUpdate

* feat: toggle goofy fix + switch version reimpl in app and panel

* fix: multimc detection

* fix: add tie breaker for sorting

* feat: toggle hover state

* fix: lint
This commit is contained in:
Calum H.
2026-03-14 22:43:59 +00:00
committed by GitHub
parent 8a2125ef16
commit 989f282de3
12 changed files with 293 additions and 32 deletions

View File

@@ -46,7 +46,10 @@
}
"
>
<template v-if="!$slots[option.id]">{{ option.id }}</template>
<template v-if="!$slots[option.id]">
<component :is="option.icon" v-if="option.icon" class="size-5" />
{{ option.id }}
</template>
<slot :name="option.id"></slot>
</Button>
</template>
@@ -55,7 +58,7 @@
</template>
<script setup lang="ts">
import { type Ref, ref } from 'vue'
import { type Component, type Ref, ref } from 'vue'
import Button from './Button.vue'
import PopoutMenu from './PopoutMenu.vue'
@@ -70,6 +73,7 @@ interface Divider extends BaseOption {
interface Item extends BaseOption {
id: string
icon?: Component
action?: (event?: MouseEvent) => void
link?: string
external?: boolean

View File

@@ -5,23 +5,28 @@
role="switch"
:aria-checked="modelValue"
:disabled="disabled"
class="relative inline-flex shrink-0 rounded-full m-0 transition-all duration-200 cursor-pointer border-none"
class="group inline-flex shrink-0 items-center rounded-full m-0 p-1 transition-all duration-200 cursor-pointer border-none"
:class="[
small ? 'h-5 !w-[40px]' : 'h-8 !w-[60px]',
small ? 'h-5 !w-[40px]' : 'h-6 !w-[48px]',
modelValue ? 'bg-brand' : 'bg-button-bg',
disabled ? 'opacity-50 cursor-not-allowed' : 'btn-wrapper',
disabled ? 'opacity-50 cursor-not-allowed' : '',
]"
@click="toggle"
>
<span
class="absolute rounded-full transition-all duration-200"
class="rounded-full transition-all duration-200"
:class="[
small ? 'w-4 h-4 top-0.5 left-0.5' : 'w-[24px] h-[24px] top-1 left-1',
small ? 'w-3 h-3' : 'w-4 h-4',
modelValue
? small
? 'translate-x-5 bg-black/90'
: 'translate-x-7 bg-black/90'
? 'translate-x-[20px] bg-black/90'
: 'translate-x-[24px] bg-black/90'
: 'bg-gray',
disabled
? ''
: small
? 'group-hover:w-[14px] group-hover:h-[14px] group-hover:m-[-1px] group-active:w-[10px] group-active:h-[10px] group-active:m-[1px]'
: 'group-hover:w-[18px] group-hover:h-[18px] group-hover:m-[-1px] group-active:w-[14px] group-active:h-[14px] group-active:m-[1px]',
]"
/>
</button>

View File

@@ -55,7 +55,10 @@
@focus="selectedIndex = index"
@mouseover="handleMouseOver(index)"
>
<slot :name="option.id">{{ option.id }}</slot>
<slot :name="option.id">
<component :is="option.icon" v-if="option.icon" class="size-5" />
{{ option.id }}
</slot>
</button>
<AutoLink
v-else-if="typeof option.action === 'string'"
@@ -72,10 +75,16 @@
@focus="selectedIndex = index"
@mouseover="handleMouseOver(index)"
>
<slot :name="option.id">{{ option.id }}</slot>
<slot :name="option.id">
<component :is="option.icon" v-if="option.icon" class="size-5" />
{{ option.id }}
</slot>
</AutoLink>
<span v-else>
<slot :name="option.id">{{ option.id }}</slot>
<slot :name="option.id">
<component :is="option.icon" v-if="option.icon" class="size-5" />
{{ option.id }}
</slot>
</span>
</ButtonStyled>
</template>
@@ -88,10 +97,11 @@
<script setup lang="ts">
import { AutoLink, ButtonStyled } from '@modrinth/ui'
import { onClickOutside, useElementHover } from '@vueuse/core'
import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
import { type Component, computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
interface Option {
id: string
icon?: Component
action?: (() => void) | string
shown?: boolean
color?: 'standard' | 'brand' | 'red' | 'orange' | 'green' | 'blue' | 'purple'