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:
@@ -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
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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'
|
||||
|
||||
Reference in New Issue
Block a user