MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-04-26 18:23:47 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix icon alignment

Browse Source
This commit is contained in:
pa
2026-01-15 16:36:46 +09:00
committed by Natsumi
parent 3b47d3a0eb
commit 5ba081a9db
31 changed files with 102 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/InstanceInfo.vue
View File

@@ -1,5 +1,5 @@
<template>
<div style="display: inline-block; margin-left: 5px">
<div class="flex items-center ml-2">
<TooltipWrapper v-if="state.isValidInstance" side="bottom">
<template #content>
<div>
@@ -40,7 +40,7 @@
</template>
</div>
</template>
<ChevronDown />
<Info class="text-xs text-accent-foreground" />
</TooltipWrapper>
<span v-if="props.location === locationStore.lastLocation.location" style="margin-left: 5px"
>{{ locationStore.lastLocation.playerList.size }}/{{ props.instance.capacity }}</span
@@ -66,7 +66,7 @@
<script setup>
import { reactive, watch } from 'vue';
import { Button } from '@/components/ui/button';
import { ChevronDown } from 'lucide-vue-next';
import { Info } from 'lucide-vue-next';
import { toast } from 'vue-sonner';
import { useI18n } from 'vue-i18n';

4
src/components/InviteYourself.vue
View File

@@ -7,8 +7,8 @@
variant="outline"
v-show="isVisible"
@click="confirmInvite"
><Mail class="h-4 w-4" /> ></Button
>
><Mail class="h-4 w-4"
/></Button>
</TooltipWrapper>
<TooltipWrapper v-else side="top" :content="t('dialog.user.info.open_in_vrchat_tooltip')">
<Button

2
src/components/Location.vue
View File

@@ -31,7 +31,7 @@
</template>
<script setup>
import { Loader2, Lock, AlertTriangle } from 'lucide-vue-next';
import { AlertTriangle, Loader2, Lock } from 'lucide-vue-next';
import { onBeforeUnmount, ref, watch } from 'vue';
import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';

1
src/components/NavMenu.vue
View File

@@ -766,7 +766,6 @@
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
z-index: 600;
background-color: var(--el-bg-color-page);
box-shadow: none;
backdrop-filter: blur(14px) saturate(130%);

13
src/components/dialogs/AvatarDialog/AvatarDialog.vue
View File

@@ -471,11 +471,7 @@
</div>
<div class="x-friend-item" style="cursor: default">
<div class="detail">
<span class="name"
>{{ t('dialog.avatar.info.time_spent')
}}<TooltipWrapper side="top" :content="t('dialog.world.info.accuracy_notice')">
<AlertTriangle style="margin-left: 3px" /> </TooltipWrapper
></span>
<span class="name">{{ t('dialog.avatar.info.time_spent') }}</span>
<span v-if="timeSpent === 0" class="extra">-</span>
<span v-else class="extra">{{ timeToText(timeSpent) }}</span>
@@ -499,7 +495,7 @@
size="icon-sm"
variant="outline"
@click="refreshAvatarDialogTreeData()">
<RefreshCcw />
<RefreshCw />
</Button>
<Button
class="rounded-full h-6 w-6"
@@ -532,7 +528,6 @@
<script setup>
import {
AlertTriangle,
Apple,
Check,
CheckCircle,
@@ -542,7 +537,6 @@
Image,
Monitor,
Pencil,
RefreshCcw,
RefreshCw,
Share2,
Smartphone,
@@ -703,6 +697,9 @@
function avatarDialogTabClick(tabName) {
if (tabName === avatarDialogLastActiveTab.value) {
if (tabName === 'JSON') {
refreshAvatarDialogTreeData();
}
return;
}
handleAvatarDialogTab(tabName);

17
src/components/dialogs/GroupDialog/GroupDialog.vue
View File

@@ -4,6 +4,12 @@
class="x-dialog x-group-dialog group-body translate-y-0 sm:max-w-235"
:show-close-button="false"
style="top: 10vh">
<DialogHeader class="sr-only">
<DialogTitle>{{ groupDialog.ref?.name || t('dialog.group.info.header') }}</DialogTitle>
<DialogDescription>
{{ groupDialog.ref?.description || groupDialog.ref?.name || t('dialog.group.info.header') }}
</DialogDescription>
</DialogHeader>
<div v-loading="groupDialog.loading">
<div style="display: flex">
<img
@@ -605,9 +611,6 @@
<div class="detail">
<span class="name">
{{ t('dialog.group.info.last_visited') }}
<TooltipWrapper side="top" :content="t('dialog.user.info.accuracy_notice')">
<AlertTriangle style="margin-left: 3px" />
</TooltipWrapper>
</span>
<span class="extra">{{ formatDateFilter(groupDialog.lastVisit, 'long') }}</span>
</div>
@@ -1144,7 +1147,7 @@
size="icon-sm"
variant="outline"
@click="refreshGroupDialogTreeData()">
<RefreshCcw />
<RefreshCw />
</Button>
<Button
class="rounded-full h-6 w-6"
@@ -1171,7 +1174,6 @@
<script setup>
import {
AlertTriangle,
Bell,
BellOff,
Check,
@@ -1193,9 +1195,9 @@
X,
XCircle
} from 'lucide-vue-next';
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { computed, nextTick, reactive, ref, watch } from 'vue';
import { Dialog, DialogContent } from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Card } from '@/components/ui/card';
import { InputGroupField } from '@/components/ui/input-group';
@@ -1706,6 +1708,9 @@
function groupDialogTabClick(tabName) {
if (tabName === groupDialogTabCurrentName.value) {
if (tabName === 'JSON') {
refreshGroupDialogTreeData();
}
return;
}
handleGroupDialogTab(tabName);

3
src/components/dialogs/LaunchDialog.vue
View File

@@ -3,6 +3,7 @@
<DialogContent>
<DialogHeader>
<DialogTitle>{{ t('dialog.launch.header') }}</DialogTitle>
<DialogDescription class="sr-only">{{ t('dialog.launch.header') }}</DialogDescription>
</DialogHeader>
<FieldGroup class="gap-4">
<Field>
@@ -129,7 +130,7 @@
<script setup>
import { computed, onBeforeUnmount, ref, watch } from 'vue';
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import {
DropdownMenu,
DropdownMenuContent,

3
src/components/dialogs/NewInstanceDialog.vue
View File

@@ -3,6 +3,7 @@
<DialogContent>
<DialogHeader>
<DialogTitle>{{ t('dialog.new_instance.header') }}</DialogTitle>
<DialogDescription class="sr-only">{{ t('dialog.new_instance.header') }}</DialogDescription>
</DialogHeader>
<TabsUnderline
v-model="newInstanceDialog.selectedTab"
@@ -514,7 +515,7 @@
<script setup>
import { Field, FieldContent, FieldGroup, FieldLabel } from '@/components/ui/field';
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { computed, ref, watch } from 'vue';
import { Button } from '@/components/ui/button';
import { Check as CheckIcon } from 'lucide-vue-next';

37
src/components/dialogs/UserDialog/UserDialog.vue
View File

@@ -178,7 +178,7 @@
"
side="top"
:content="t('dialog.user.info.vrcplus_hides_avatar')">
<AlertTriangle />
<Info />
</TooltipWrapper>
</div>
</div>
@@ -293,9 +293,6 @@
<div class="detail">
<span class="name">
{{ t('dialog.user.info.last_seen') }}
<TooltipWrapper side="top" :content="t('dialog.user.info.accuracy_notice')">
<AlertTriangle style="margin-left: 3px" />
</TooltipWrapper>
</span>
<span class="extra">{{ formatDateFilter(userDialog.lastSeen, 'long') }}</span>
</div>
@@ -308,11 +305,6 @@
style="display: flex; justify-content: space-between; align-items: center">
<div>
{{ t('dialog.user.info.join_count') }}
<TooltipWrapper
side="top"
:content="t('dialog.user.info.accuracy_notice')">
<AlertTriangle style="margin-left: 3px" />
</TooltipWrapper>
</div>
<TooltipWrapper
@@ -330,9 +322,6 @@
<div class="detail">
<span class="name">
{{ t('dialog.user.info.time_together') }}
<TooltipWrapper side="top" :content="t('dialog.user.info.accuracy_notice')">
<AlertTriangle style="margin-left: 3px" />
</TooltipWrapper>
</span>
<span v-if="userDialog.timeSpent === 0" class="extra">-</span>
<span v-else class="extra">{{ timeToText(userDialog.timeSpent) }}</span>
@@ -348,11 +337,6 @@
<div class="detail">
<span class="name">
{{ t('dialog.user.info.play_time') }}
<TooltipWrapper
side="top"
:content="t('dialog.user.info.accuracy_notice')">
<AlertTriangle style="margin-left: 3px" />
</TooltipWrapper>
</span>
<span v-if="userDialog.timeSpent === 0" class="extra">-</span>
<span v-else class="extra">{{ timeToText(userDialog.timeSpent) }}</span>
@@ -370,15 +354,9 @@
v-if="userDialog.ref.state === 'online' && userDialog.ref.$online_for"
class="name">
{{ t('dialog.user.info.online_for') }}
<TooltipWrapper side="top" :content="t('dialog.user.info.accuracy_notice')">
<AlertTriangle style="margin-left: 3px" />
</TooltipWrapper>
</span>
<span v-else class="name">
{{ t('dialog.user.info.offline_for') }}
<TooltipWrapper side="top" :content="t('dialog.user.info.accuracy_notice')">
<AlertTriangle style="margin-left: 3px" />
</TooltipWrapper>
</span>
<span class="extra">{{ userOnlineFor(userDialog.ref) }}</span>
</div>
@@ -423,15 +401,9 @@
<div class="detail">
<span v-if="userDialog.unFriended" class="name">
{{ t('dialog.user.info.unfriended') }}
<TooltipWrapper side="top" :content="t('dialog.user.info.accuracy_notice')">
<AlertTriangle style="margin-left: 3px" />
</TooltipWrapper>
</span>
<span v-else class="name">
{{ t('dialog.user.info.friended') }}
<TooltipWrapper side="top" :content="t('dialog.user.info.accuracy_notice')">
<AlertTriangle style="margin-left: 3px" />
</TooltipWrapper>
</span>
<span class="extra">{{
formatDateFilter(userDialog.dateFriended, 'long')
@@ -1320,7 +1292,7 @@
size="icon-sm"
variant="outline"
@click="refreshUserDialogTreeData()">
<RefreshCcw />
<RefreshCw />
</Button>
<Button
class="rounded-full h-6 w-6"
@@ -1367,12 +1339,12 @@
Download,
DownloadIcon,
Eye,
Info,
Languages,
Loader2,
LogOut,
MoreHorizontal,
Pencil,
RefreshCcw,
RefreshCw,
Tag,
Trash2
@@ -1719,6 +1691,9 @@
function userDialogTabClick(tabName) {
if (tabName === userDialogLastActiveTab.value) {
if (tabName === 'JSON') {
refreshUserDialogTreeData();
}
return;
}
handleUserDialogTab(tabName);

4
src/components/dialogs/UserDialog/previousInstancesUserColumns.jsx
View File

@@ -1,4 +1,4 @@
import { ArrowUpDown, DoorOpen, Info, Trash2 } from 'lucide-vue-next';
import { ArrowUpDown, Info, LogIn, Trash2 } from 'lucide-vue-next';
import DisplayName from '../../DisplayName.vue';
import Location from '../../Location.vue';
@@ -115,7 +115,7 @@ export const createColumns = ({
onLaunch?.(original?.location);
}}
>
<DoorOpen class="h-4 w-4" />
<LogIn class="h-4 w-4" />
</Button>
<Button

20
src/components/dialogs/WorldDialog/WorldDialog.vue
View File

@@ -4,6 +4,12 @@
class="x-dialog x-world-dialog translate-y-0 sm:max-w-235"
:show-close-button="false"
style="top: 10vh">
<DialogHeader class="sr-only">
<DialogTitle>{{ worldDialog.ref?.name || t('dialog.world.info.header') }}</DialogTitle>
<DialogDescription>
{{ worldDialog.ref?.description || worldDialog.ref?.name || t('dialog.world.info.header') }}
</DialogDescription>
</DialogHeader>
<div v-loading="worldDialog.loading">
<div style="display: flex">
<img
@@ -316,7 +322,7 @@
:unmount-on-hide="false"
@update:modelValue="worldDialogTabClick">
<template #Instances>
<div>
<div class="flex items-center">
<User />
{{ t('dialog.world.instances.public_count', { count: worldDialog.ref.publicOccupants }) }}
<User style="margin-left: 10px" />
@@ -664,9 +670,6 @@
<div class="detail">
<span class="name">
{{ t('dialog.world.info.last_visited') }}
<TooltipWrapper side="top" :content="t('dialog.world.info.accuracy_notice')"
><AlertTriangle style="margin-left: 3px" />
</TooltipWrapper>
</span>
<span class="extra">
{{ worldDialog.timeSpent === 0 ? ' - ' : timeSpent }}
@@ -681,7 +684,7 @@
size="icon-sm"
variant="outline"
@click="refreshWorldDialogTreeData()">
<RefreshCcw />
<RefreshCw />
</Button>
<Button
class="rounded-full h-6 w-6"
@@ -723,7 +726,6 @@
<script setup>
import {
AlertTriangle,
Apple,
ArrowDown,
Check,
@@ -740,7 +742,6 @@
MessageSquare,
Monitor,
Pencil,
RefreshCcw,
RefreshCw,
Share2,
Smartphone,
@@ -750,8 +751,8 @@
User,
Wand2
} from 'lucide-vue-next';
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { computed, defineAsyncComponent, nextTick, ref, watch } from 'vue';
import { Dialog, DialogContent } from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { InputGroupTextareaField } from '@/components/ui/input-group';
import { TabsUnderline } from '@/components/ui/tabs';
@@ -944,6 +945,9 @@
function worldDialogTabClick(tabName) {
if (tabName === worldDialogLastActiveTab.value) {
if (tabName === 'JSON') {
refreshWorldDialogTreeData();
}
return;
}
handleWorldDialogTab(tabName);

4
src/components/ui/alert-dialog/AlertDialogContent.vue
View File

@@ -32,13 +32,13 @@
<AlertDialogPortal>
<AlertDialogOverlay
data-slot="alert-dialog-overlay"
class="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-10000 bg-black/80" />
class="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80" />
<AlertDialogContent
data-slot="alert-dialog-content"
v-bind="{ ...$attrs, ...forwarded }"
:class="
cn(
'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-10000 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
props.class
)
">

2
src/components/ui/button/index.js
View File

@@ -3,7 +3,7 @@ import { cva } from 'class-variance-authority';
export { default as Button } from './Button.vue';
export const buttonVariants = cva(
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:bg-muted disabled:text-muted-foreground disabled:shadow-none disabled:opacity-100 aria-disabled:pointer-events-none aria-disabled:bg-muted aria-disabled:text-muted-foreground aria-disabled:shadow-none aria-disabled:opacity-100 data-[disabled]:pointer-events-none data-[disabled]:bg-muted data-[disabled]:text-muted-foreground data-[disabled]:shadow-none data-[disabled]:opacity-100 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all cursor-pointer disabled:pointer-events-none disabled:bg-muted disabled:text-muted-foreground disabled:shadow-none disabled:opacity-100 aria-disabled:pointer-events-none aria-disabled:bg-muted aria-disabled:text-muted-foreground aria-disabled:shadow-none aria-disabled:opacity-100 data-[disabled]:pointer-events-none data-[disabled]:bg-muted data-[disabled]:text-muted-foreground data-[disabled]:shadow-none data-[disabled]:opacity-100 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
{
variants: {
variant: {

2
src/components/ui/dialog/DialogContent.vue
View File

@@ -40,7 +40,7 @@
v-bind="{ ...$attrs, ...forwarded }"
:class="
cn(
'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-10000 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
props.class
)
">

2
src/components/ui/dialog/DialogOverlay.vue
View File

@@ -19,7 +19,7 @@
v-bind="delegatedProps"
:class="
cn(
'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-10000 bg-black/80',
'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80',
props.class
)
">

4
src/components/ui/dialog/DialogScrollContent.vue
View File

@@ -32,11 +32,11 @@
<template>
<DialogPortal>
<DialogOverlay
class="fixed inset-0 z-10000 grid place-items-center overflow-y-auto bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0">
class="fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0">
<DialogContent
:class="
cn(
'relative z-10000 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
props.class
)
"

2
src/components/ui/dropdown-menu/DropdownMenuContent.vue
View File

@@ -51,7 +51,7 @@
v-bind="{ ...$attrs, ...forwarded }"
:class="
cn(
'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-10000 max-h-(--reka-dropdown-menu-content-available-height) min-w-[8rem] origin-(--reka-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--reka-dropdown-menu-content-available-height) min-w-[8rem] origin-(--reka-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
props.class
)
">

2
src/components/ui/dropdown-menu/DropdownMenuSubContent.vue
View File

@@ -46,7 +46,7 @@
v-bind="forwarded"
:class="
cn(
'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-10000 min-w-32 origin-(--reka-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 origin-(--reka-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
props.class
)
">

2
src/components/ui/hover-card/HoverCardContent.vue
View File

@@ -43,7 +43,7 @@
v-bind="{ ...$attrs, ...forwardedProps }"
:class="
cn(
'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-10000 w-64 rounded-md border p-4 shadow-md outline-hidden',
'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 rounded-md border p-4 shadow-md outline-hidden',
props.class
)
">

2
src/components/ui/popover/PopoverContent.vue
View File

@@ -52,7 +52,7 @@
v-bind="{ ...$attrs, ...forwarded }"
:class="
cn(
'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-10000 w-72 rounded-md border p-4 shadow-md origin-(--reka-popover-content-transform-origin) outline-hidden',
'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border p-4 shadow-md origin-(--reka-popover-content-transform-origin) outline-hidden',
props.class
)
">

2
src/components/ui/select/SelectContent.vue
View File

@@ -49,7 +49,7 @@
v-bind="{ ...$attrs, ...forwarded }"
:class="
cn(
'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-10000 max-h-(--reka-select-content-available-height) min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-md border shadow-md',
'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--reka-select-content-available-height) min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-md border shadow-md',
position === 'popper' &&
'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
props.class

4
src/components/ui/tooltip/TooltipContent.vue
View File

@@ -40,14 +40,14 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
v-bind="{ ...forwarded, ...$attrs }"
:class="
cn(
'bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-10000 w-fit rounded-md px-3 py-1.5 text-xs text-balance',
'bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit rounded-md px-3 py-1.5 text-xs text-balance',
props.class
)
">
<slot />
<TooltipArrow
class="bg-foreground fill-foreground z-10000 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px]" />
class="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px]" />
</TooltipContent>
</TooltipPortal>
</template>