remove v-directives

This commit is contained in:
pa
2026-01-17 01:09:27 +09:00
committed by Natsumi
parent 043765dc8f
commit af12687264
34 changed files with 84 additions and 95 deletions

View File

@@ -32,7 +32,7 @@
@click="handleMenuItemClick(item)">
<i
:class="item.icon"
class="inline-flex size-6 items-center justify-center text-[19px]" />
class="inline-flex size-6 items-center justify-center text-lg" />
<span v-show="!isCollapsed">{{
item.titleIsCustom ? item.title : t(item.title || '')
}}</span>
@@ -53,7 +53,7 @@
:class="isNavItemNotified(item) ? 'notify' : undefined">
<i
:class="item.icon"
class="inline-flex size-6 items-center justify-center text-[19px]" />
class="inline-flex size-6 items-center justify-center text-lg" />
<span v-show="!isCollapsed">{{
item.titleIsCustom ? item.title : t(item.title || '')
}}</span>
@@ -72,7 +72,7 @@
<i
v-if="entry.icon"
:class="entry.icon"
class="inline-flex size-5 items-center justify-center text-[16px]" />
class="inline-flex size-5 items-center justify-center text-base" />
<span>{{ t(entry.label) }}</span>
</SidebarMenuSubButton>
</SidebarMenuSubItem>
@@ -93,8 +93,7 @@
<DropdownMenu>
<DropdownMenuTrigger as-child>
<SidebarMenuButton :tooltip="t('nav_tooltip.help_support')">
<i
class="ri-question-line inline-flex size-6 items-center justify-center text-[19px]" />
<i class="ri-question-line inline-flex size-6 items-center justify-center text-lg" />
<span v-show="!isCollapsed">{{ t('nav_tooltip.help_support') }}</span>
</SidebarMenuButton>
</DropdownMenuTrigger>
@@ -123,8 +122,7 @@
<DropdownMenu>
<DropdownMenuTrigger as-child>
<SidebarMenuButton :tooltip="t('nav_tooltip.manage')">
<i
class="ri-settings-3-line inline-flex size-6 items-center justify-center text-[19px]" />
<i class="ri-settings-3-line inline-flex size-6 items-center justify-center text-lg" />
<span v-show="!isCollapsed">{{ t('nav_tooltip.manage') }}</span>
</SidebarMenuButton>
</DropdownMenuTrigger>
@@ -209,7 +207,7 @@
<SidebarMenuItem>
<SidebarMenuButton :tooltip="t('nav_tooltip.toggle_theme')" @click="handleThemeToggle">
<i
:class="currentThemeIsDark ? 'ri-moon-line' : 'ri-sun-line'"
:class="isDarkMode ? 'ri-moon-line' : 'ri-sun-line'"
class="inline-flex size-6 items-center justify-center text-[19px]" />
<span v-show="!isCollapsed">{{ t('nav_tooltip.toggle_theme') }}</span>
</SidebarMenuButton>
@@ -416,7 +414,6 @@
const themes = computed(() => Object.keys(THEME_CONFIG));
const { themeColors, currentThemeColor, isApplyingThemeColor, applyThemeColor, initThemeColor } = useThemeColor();
const currentThemeIsDark = computed(() => isDarkMode.value);
watch(
() => locale.value,

View File

@@ -4,7 +4,7 @@
class="x-dialog x-avatar-dialog sm:max-w-235 translate-y-0"
style="top: 10vh"
:show-close-button="false">
<div v-loading="avatarDialog.loading">
<div>
<div style="display: flex">
<img
:src="avatarDialog.ref.thumbnailImageUrl"

View File

@@ -4,7 +4,7 @@
<DialogHeader>
<DialogTitle>{{ t('dialog.favorite.header') }}</DialogTitle>
</DialogHeader>
<div v-loading="loading">
<div>
<span style="display: block; text-align: center">{{ t('dialog.favorite.vrchat_favorites') }}</span>
<template v-if="favoriteDialog.currentGroup && favoriteDialog.currentGroup.key">
<Button

View File

@@ -10,7 +10,7 @@
{{ groupDialog.ref?.description || groupDialog.ref?.name || t('dialog.group.info.header') }}
</DialogDescription>
</DialogHeader>
<div v-loading="groupDialog.loading">
<div>
<div style="display: flex">
<img
:src="groupDialog.ref.iconUrl"
@@ -950,7 +950,6 @@
</div>
<div
v-if="groupDialog.memberSearch.length"
v-loading="isGroupMembersLoading"
class="x-friend-list"
style="margin-top: 10px; overflow: auto; max-height: 250px; min-width: 130px">
<div
@@ -1012,7 +1011,6 @@
</div>
<ul
v-else-if="groupDialog.members.length > 0"
v-infinite-scroll="loadMoreGroupMembers"
class="infinite-list x-friend-list"
style="margin-top: 10px; overflow: auto; max-height: 250px; min-width: 130px">
<li
@@ -1073,7 +1071,6 @@
</li>
<div
v-if="!isGroupMembersDone"
v-loading="isGroupMembersLoading"
class="x-friend-item"
style="width: 100%; height: 45px; text-align: center"
@click="loadMoreGroupMembers">
@@ -1098,7 +1095,6 @@
v-model="groupDialogGalleryCurrentName"
:items="groupGalleryTabs"
:unmount-on-hide="false"
v-loading="isGroupGalleryLoading"
class="mt-2.5">
<template
v-for="(gallery, index) in groupDialog.ref.galleries"

View File

@@ -11,7 +11,7 @@
<DialogTitle>{{ t('dialog.invite.header') }}</DialogTitle>
</DialogHeader>
<div v-if="inviteDialog.visible" v-loading="inviteDialog.loading">
<div v-if="inviteDialog.visible">
<Location :location="inviteDialog.worldId" :link="false" />
<br />
<Button size="sm" class="mr-2" variant="outline" style="margin-top: 10px" @click="addSelfToInvite">{{

View File

@@ -5,7 +5,7 @@
<DialogTitle>{{ t('dialog.invite_to_group.header') }}</DialogTitle>
</DialogHeader>
<div v-if="inviteGroupDialog.visible" v-loading="inviteGroupDialog.loading">
<div v-if="inviteGroupDialog.visible">
<span>{{ t('dialog.invite_to_group.description') }}</span>
<br />

View File

@@ -5,7 +5,7 @@
<DialogTitle>{{ t('dialog.bio.header') }}</DialogTitle>
</DialogHeader>
<div v-loading="bioDialog.loading">
<div>
<InputGroupTextareaField
v-model="bioDialog.bio"
:maxlength="512"

View File

@@ -5,7 +5,7 @@
<DialogTitle>{{ t('dialog.language.header') }}</DialogTitle>
</DialogHeader>
<div v-loading="languageDialog.loading">
<div>
<div v-for="item in currentUser.$languages" :key="item.key" style="margin: 6px 0">
<Badge variant="outline" style="margin-right: 5px">
<span

View File

@@ -5,7 +5,7 @@
<DialogTitle>{{ t('dialog.pronouns.header') }}</DialogTitle>
</DialogHeader>
<div v-loading="pronounsDialog.loading">
<div>
<InputGroupTextareaField
v-model="pronounsDialog.pronouns"
:maxlength="32"

View File

@@ -5,7 +5,7 @@
<DialogTitle>{{ t('dialog.social_status.header') }}</DialogTitle>
</DialogHeader>
<div v-loading="socialStatusDialog.loading">
<div>
<Select :model-value="socialStatusDialog.status" @update:modelValue="handleSocialStatusChange">
<SelectTrigger size="sm" style="margin-top: 10px; width: 100%">
<span class="flex items-center gap-2">

View File

@@ -4,7 +4,7 @@
class="x-dialog x-user-dialog sm:max-w-235 translate-y-0"
style="top: 10vh"
:show-close-button="false">
<div v-loading="userDialog.loading">
<div>
<DialogHeader class="sr-only">
<DialogTitle>{{
userDialog.ref?.displayName || userDialog.id || t('dialog.user.info.header')
@@ -194,7 +194,7 @@
"
class="extra">
<div
v-loading="userDialog.isRepresentedGroupLoading"
style="display: inline-block; flex: none; margin-right: 5px">
<Avatar
class="x-link size-15! rounded-lg!"
@@ -658,7 +658,7 @@
</Button>
</div>
</div>
<div v-loading="userDialog.isGroupsLoading" style="margin-top: 10px">
<div style="margin-top: 10px">
<template v-if="userDialogGroupEditMode">
<div
class="x-friend-list"
@@ -1056,7 +1056,7 @@
</div>
</div>
<div
v-loading="userDialog.isWorldsLoading"
class="x-friend-list"
style="margin-top: 10px; min-height: 60px">
<div
@@ -1092,7 +1092,7 @@
v-model="favoriteWorldsTab"
:items="favoriteWorldTabs"
:unmount-on-hide="false"
v-loading="userDialog.isFavoriteWorldsLoading"
class="zero-margin-tabs"
style="margin-top: 10px; height: 50vh">
<template

View File

@@ -4,7 +4,7 @@
<DialogHeader>
<DialogTitle>{{ t('dialog.vrcx_updater.header') }}</DialogTitle>
</DialogHeader>
<div v-loading="checkingForVRCXUpdate" style="margin-top: 15px">
<div style="margin-top: 15px">
<template v-if="updateInProgress">
<Progress :model-value="updateProgress" class="w-full" />
<div class="mt-2 text-xs" v-text="updateProgressText()"></div>

View File

@@ -10,7 +10,7 @@
{{ worldDialog.ref?.description || worldDialog.ref?.name || t('dialog.world.info.header') }}
</DialogDescription>
</DialogHeader>
<div v-loading="worldDialog.loading">
<div>
<div style="display: flex">
<img
:src="worldDialog.ref.thumbnailImageUrl"

View File

@@ -5,7 +5,7 @@
</div>
<div class="rounded-md border">
<div v-loading="loading" class="overflow-auto" :style="tableStyle">
<div class="overflow-auto" :style="tableStyle">
<Table :class="tableClassValue" :style="tableElementStyle">
<colgroup>
<col v-for="col in table.getVisibleLeafColumns()" :key="col.id" :style="getColStyle(col)" />

View File

@@ -1,5 +1,5 @@
<template>
<div class="favorites-page x-container" v-loading="isFavoriteLoading">
<div class="favorites-page x-container">
<div class="favorites-toolbar">
<div>
<Select :model-value="sortFavorites" @update:modelValue="handleSortFavoritesChange">

View File

@@ -1,5 +1,5 @@
<template>
<div class="favorites-page x-container" v-loading="isFavoriteLoading">
<div class="favorites-page x-container">
<div class="favorites-toolbar">
<div>
<Select :model-value="sortFavorites" @update:modelValue="handleSortFavoritesChange">

View File

@@ -1,5 +1,5 @@
<template>
<div class="favorites-page x-container" v-loading="isFavoriteLoading">
<div class="favorites-page x-container">
<div class="favorites-toolbar">
<div>
<Select :model-value="sortFavorites" @update:modelValue="handleSortFavoritesChange">

View File

@@ -181,7 +181,6 @@
const friendsListColumns = computed(() =>
createColumns({
randomUserColours,
bulkUnfriendMode: friendsListBulkUnfriendMode,
selectedFriends,
onToggleFriendSelection: toggleFriendSelection,
onConfirmDeleteFriend: confirmDeleteFriend
@@ -227,6 +226,18 @@
{ immediate: true }
);
watch(
friendsListBulkUnfriendMode,
(enabled) => {
const column = table?.getColumn?.('bulkSelect');
if (!column) {
return;
}
column.toggleVisibility(Boolean(enabled));
},
{ immediate: true }
);
watch(pageSize, (size) => {
if (pagination.value.pageSize === size) {
return;

View File

@@ -91,16 +91,26 @@ const sortByLanguages = (rowA, rowB) =>
export const createColumns = ({
randomUserColours,
bulkUnfriendMode,
selectedFriends,
onToggleFriendSelection,
onConfirmDeleteFriend
}) => {
/** @type {import('@tanstack/vue-table').ColumnDef<any, any>[]} */
const cols = [];
if (bulkUnfriendMode?.value) {
cols.push({
cols.push(
{
id: 'leftSpacer',
header: () => null,
size: 20,
enableSorting: false,
enableResizing: false,
meta: {
thClass: 'p-0',
tdClass: 'p-0'
},
cell: () => null
},
{
id: 'bulkSelect',
header: () => null,
size: 55,
@@ -127,21 +137,6 @@ export const createColumns = ({
</div>
);
}
});
}
cols.push(
{
id: 'leftSpacer',
header: () => null,
size: 20,
enableSorting: false,
enableResizing: false,
meta: {
thClass: 'p-0',
tdClass: 'p-0'
},
cell: () => null
},
{
id: 'friendNumber',

View File

@@ -31,7 +31,7 @@ export const createColumns = ({ onDelete, onDeletePrompt }) => {
},
{
accessorKey: 'created_at',
size: 90,
size: 100,
header: ({ column }) => (
<Button
variant="ghost"
@@ -65,7 +65,7 @@ export const createColumns = ({ onDelete, onDeletePrompt }) => {
{
accessorKey: 'type',
size: 110,
size: 120,
header: () => t('table.friendLog.type'),
cell: ({ row }) => {
const type = row.getValue('type');

View File

@@ -11,7 +11,7 @@
/></Button>
</TooltipWrapper>
</div>
<div v-loading="loginForm.loading" class="x-login-container">
<div class="x-login-container">
<div class="x-login">
<div class="x-login-form-container">
<div>

View File

@@ -32,7 +32,7 @@ export const createColumns = ({ onDelete, onDeletePrompt }) => {
},
{
accessorKey: 'created',
size: 90,
size: 100,
header: ({ column }) => (
<Button
variant="ghost"
@@ -65,7 +65,7 @@ export const createColumns = ({ onDelete, onDeletePrompt }) => {
},
{
accessorKey: 'type',
size: 90,
size: 100,
header: () => t('table.moderation.type'),
cell: ({ row }) => {
const type = row.getValue('type');

View File

@@ -4,7 +4,7 @@
<DialogHeader>
<DialogTitle>{{ t('dialog.chatbox_blacklist.header') }}</DialogTitle>
</DialogHeader>
<div v-if="chatboxBlacklistDialog.visible" v-loading="chatboxBlacklistDialog.loading">
<div v-if="chatboxBlacklistDialog.visible">
<h2>{{ t('dialog.chatbox_blacklist.keyword_blacklist') }}</h2>
<InputGroupAction
v-for="(item, index) in chatboxBlacklist"

View File

@@ -21,7 +21,7 @@
:unmount-on-hide="false"
style="margin-top: 15px">
<template #user>
<div v-loading="isSearchUserLoading" style="min-height: 60px">
<div style="min-height: 60px">
<label class="inline-flex items-center gap-2" style="margin-left: 10px">
<Checkbox v-model="searchUserByBio" />
<span>{{ t('view.search.user.search_by_bio') }}</span>
@@ -75,7 +75,7 @@
</div>
</template>
<template #world>
<div v-loading="isSearchWorldLoading" style="min-height: 60px">
<div style="min-height: 60px">
<div class="inline-flex justify-between mb-4 w-full">
<Select
:model-value="searchWorldCategoryIndex"
@@ -139,7 +139,7 @@
</div>
</template>
<template #avatar>
<div v-loading="isSearchAvatarLoading" style="min-height: 60px">
<div style="min-height: 60px">
<div style="display: flex; align-items: center; justify-content: space-between">
<div style="display: flex; align-items: center">
<Select
@@ -297,7 +297,7 @@
</div>
</template>
<template #group>
<div v-loading="isSearchGroupLoading" style="min-height: 60px">
<div style="min-height: 60px">
<div class="x-friend-list" style="min-height: 500px">
<div
v-for="group in searchGroupResults"

View File

@@ -4,7 +4,7 @@
<DialogHeader>
<DialogTitle>{{ t('dialog.change_log.header') }}</DialogTitle>
</DialogHeader>
<div v-loading="!changeLogDialog.changeLog" class="changelog-dialog">
<div class="changelog-dialog">
<h2 v-text="changeLogDialog.buildName"></h2>
<span v-show="changeLogDialog.buildName">
{{ t('dialog.change_log.description') }}

View File

@@ -4,7 +4,7 @@
<DialogHeader>
<DialogTitle>{{ t('dialog.config_json.header') }}</DialogTitle>
</DialogHeader>
<div v-loading="loading">
<div>
<div style="font-size: 12px; word-break: keep-all">
{{ t('dialog.config_json.description1') }} <br />
{{ t('dialog.config_json.description2') }}

View File

@@ -7,7 +7,7 @@
isFriendsGroupMe = !isFriendsGroupMe;
saveFriendsGroupStates();
">
<ChevronDown class="rotation-transition" :class="{ 'is-rotated': isFriendsGroupMe }" />
<ChevronDown class="rotation-transition" :class="{ 'is-rotated': !isFriendsGroupMe }" />
<span style="margin-left: 5px">{{ t('side_panel.me') }}</span>
</div>
<div v-show="isFriendsGroupMe">
@@ -43,7 +43,7 @@
isVIPFriends = !isVIPFriends;
saveFriendsGroupStates();
">
<ChevronDown class="rotation-transition" :class="{ 'is-rotated': isVIPFriends }" />
<ChevronDown class="rotation-transition" :class="{ 'is-rotated': !isVIPFriends }" />
<span style="margin-left: 5px">
{{ t('side_panel.favorite') }} &horbar;
{{ vipFriendsDisplayNumber }}
@@ -79,9 +79,7 @@
<template v-if="isSidebarGroupByInstance && friendsInSameInstance.length">
<div class="x-friend-group x-link flex items-center" @click="toggleSwitchGroupByInstanceCollapsed">
<ChevronDown
class="rotation-transition"
:class="{ 'is-rotated': !isSidebarGroupByInstanceCollapsed }" />
<ChevronDown class="rotation-transition" :class="{ 'is-rotated': isSidebarGroupByInstanceCollapsed }" />
<span style="margin-left: 5px"
>{{ t('side_panel.same_instance') }} &horbar; {{ friendsInSameInstance.length }}</span
>
@@ -116,7 +114,7 @@
isOnlineFriends = !isOnlineFriends;
saveFriendsGroupStates();
">
<ChevronDown class="rotation-transition" :class="{ 'is-rotated': isOnlineFriends }" />
<ChevronDown class="rotation-transition" :class="{ 'is-rotated': !isOnlineFriends }" />
<span style="margin-left: 5px"
>{{ t('side_panel.online') }} &horbar; {{ onlineFriendsByGroupStatus.length }}</span
>
@@ -135,7 +133,7 @@
isActiveFriends = !isActiveFriends;
saveFriendsGroupStates();
">
<ChevronDown class="rotation-transition" :class="{ 'is-rotated': isActiveFriends }" />
<ChevronDown class="rotation-transition" :class="{ 'is-rotated': !isActiveFriends }" />
<span style="margin-left: 5px">{{ t('side_panel.active') }} &horbar; {{ activeFriends.length }}</span>
</div>
<div v-if="isActiveFriends">
@@ -152,7 +150,7 @@
isOfflineFriends = !isOfflineFriends;
saveFriendsGroupStates();
">
<ChevronDown class="rotation-transition" :class="{ 'is-rotated': isOfflineFriends }" />
<ChevronDown class="rotation-transition" :class="{ 'is-rotated': !isOfflineFriends }" />
<span style="margin-left: 5px">{{ t('side_panel.offline') }} &horbar; {{ offlineFriends.length }}</span>
</div>
<div v-if="isOfflineFriends">
@@ -315,9 +313,6 @@
.x-link:hover {
text-decoration: none;
}
/* .x-link:hover span {
text-decoration: underline;
} */
.is-rotated {
transform: rotate(-90deg);
}

View File

@@ -50,7 +50,7 @@
</span>
</template>
<template #gallery>
<div v-loading="galleryDialogGalleryLoading">
<div>
<input
id="GalleryUploadButton"
type="file"
@@ -123,7 +123,7 @@
</template>
<template #icons>
<div v-loading="galleryDialogIconsLoading">
<div>
<input
id="VRCPlusIconUploadButton"
type="file"
@@ -195,7 +195,7 @@
</template>
<template #emojis>
<div v-loading="galleryDialogEmojisLoading">
<div>
<input
id="EmojiUploadButton"
type="file"
@@ -350,7 +350,7 @@
</template>
<template #stickers>
<div v-loading="galleryDialogStickersLoading">
<div>
<input
id="StickerUploadButton"
type="file"
@@ -413,7 +413,7 @@
</template>
<template #prints>
<div v-loading="galleryDialogPrintsLoading">
<div>
<input
id="PrintUploadButton"
type="file"
@@ -503,7 +503,7 @@
</template>
<template #inventory>
<div v-loading="galleryDialogInventoryLoading">
<div>
<br />
<br />
<div style="display: flex; align-items: center">

View File

@@ -6,7 +6,7 @@
</Button>
<span class="header">{{ t('dialog.screenshot_metadata.header') }}</span>
</div>
<div v-loading="screenshotMetadataDialog.loading" @dragover.prevent @dragenter.prevent @drop="handleDrop">
<div @dragover.prevent @dragenter.prevent @drop="handleDrop">
<span>{{
t('dialog.screenshot_metadata.drag')
}}</span>

View File

@@ -8,7 +8,7 @@
<div class="category-header" @click="toggleCategory('group')">
<ChevronDown
class="rotation-transition"
:class="{ 'is-rotated': !categoryCollapsed['group'] }" />
:class="{ 'is-rotated': categoryCollapsed['group'] }" />
<span class="category-title">{{ t('view.tools.group.header') }}</span>
</div>
<div class="tools-grid" v-show="!categoryCollapsed['group']">
@@ -30,7 +30,7 @@
<div class="category-header text-2xl" @click="toggleCategory('image')">
<ChevronDown
class="rotation-transition"
:class="{ 'is-rotated': !categoryCollapsed['image'] }" />
:class="{ 'is-rotated': categoryCollapsed['image'] }" />
<span class="category-title">{{ t('view.tools.pictures.header') }}</span>
</div>
<div class="tools-grid" v-show="!categoryCollapsed['image']">
@@ -93,9 +93,7 @@
<div class="tool-category">
<div class="category-header text-2xl" @click="toggleCategory('user')">
<ChevronDown
class="rotation-transition"
:class="{ 'is-rotated': !categoryCollapsed['user'] }" />
<ChevronDown class="rotation-transition" :class="{ 'is-rotated': categoryCollapsed['user'] }" />
<span class="category-title">{{ t('view.tools.export.header') }}</span>
</div>
@@ -160,7 +158,7 @@
<div class="category-header" @click="toggleCategory('other')">
<ChevronDown
class="rotation-transition"
:class="{ 'is-rotated': !categoryCollapsed['other'] }" />
:class="{ 'is-rotated': categoryCollapsed['other'] }" />
<span class="category-title">{{ t('view.tools.other.header') }}</span>
</div>
<div class="tools-grid" v-show="!categoryCollapsed['other']">

View File

@@ -314,9 +314,6 @@
cursor: pointer;
}
.event-card .badges .following-badge.is-following {
}
.event-card .badges .share-badge {
display: flex;
align-items: center;

View File

@@ -91,7 +91,7 @@
</script>
<template>
<div v-loading="props.isLoading" class="group-calendar-month">
<div class="group-calendar-month">
<CalendarRoot
v-slot="{ grid, weekDays }"
:model-value="internalValue"

View File

@@ -6,7 +6,7 @@
</DialogHeader>
<InputGroupTextareaField
v-model="exportAvatarsListCsv"
v-loading="loading"
:rows="15"
readonly
style="margin-top: 15px"

View File

@@ -58,7 +58,7 @@
class="search-input" />
</div>
<div class="groups-grid" v-loading="isLoading">
<div class="groups-grid">
<div v-if="filteredGroupEvents.length" class="groups-container">
<div v-for="group in filteredGroupEvents" :key="group.groupId" class="group-row">
<div class="group-header" @click="toggleGroup(group.groupId)">