add empty component and poilsh styles

This commit is contained in:
pa
2026-01-22 19:05:35 +09:00
parent 1514012c4c
commit 3c37071011
22 changed files with 296 additions and 65 deletions

View File

@@ -6,7 +6,7 @@
<span>{{ t('view.charts.instance_activity.header') }}</span>
<HoverCard>
<HoverCardTrigger as-child>
<Info style="margin-left: 5px; font-size: 12px; opacity: 0.7" />
<Info style="margin-left: 4px; font-size: 12px; opacity: 0.7" />
</HoverCardTrigger>
<HoverCardContent side="bottom" align="start" class="w-75">
<div class="tips-popover">
@@ -23,7 +23,7 @@
<Button
class="rounded-full"
size="icon"
variant="outline"
variant="ghost"
style="margin-right: 5px"
@click="reloadData">
<RefreshCcw />
@@ -34,7 +34,7 @@
<PopoverTrigger asChild>
<div>
<TooltipWrapper :content="t('view.charts.instance_activity.settings.header')" side="top">
<Button class="rounded-full" size="icon" variant="outline" style="margin-right: 5px">
<Button class="rounded-full" size="icon" variant="ghost" style="margin-right: 5px">
<Settings />
</Button>
</TooltipWrapper>
@@ -79,7 +79,7 @@
</div>
</PopoverContent>
</Popover>
<ButtonGroup style="margin-right: 5px">
<ButtonGroup class="mr-2">
<TooltipWrapper :content="t('view.charts.instance_activity.previous_day')" side="top">
<Button
variant="outline"
@@ -136,7 +136,7 @@
<div ref="activityChartRef" style="width: 100%"></div>
<div v-if="!isLoading && activityData.length === 0" class="nodata">
<span>No data here, try another day</span>
<DataTableEmpty type="nodata" />
</div>
<transition name="el-fade-in-linear">
@@ -165,6 +165,7 @@
import { HoverCard, HoverCardContent, HoverCardTrigger } from '@/components/ui/hover-card';
import { fromDate, getLocalTimeZone, today } from '@internationalized/date';
import { Button } from '@/components/ui/button';
import { DataTableEmpty } from '@/components/ui/data-table';
import { ButtonGroup } from '@/components/ui/button-group';
import { Calendar } from '@/components/ui/calendar';
import { Separator } from '@/components/ui/separator';

View File

@@ -10,12 +10,16 @@
</transition>
</div>
<div ref="activityDetailChartRef"></div>
<div v-if="hasChartData" ref="activityDetailChartRef"></div>
<div v-else style="display: flex; justify-content: center; align-items: center; min-height: 160px; width: 100%">
<DataTableEmpty type="nodata" />
</div>
</div>
</template>
<script setup>
import { computed, nextTick, onBeforeUnmount, onDeactivated, onMounted, ref, watch } from 'vue';
import { DataTableEmpty } from '@/components/ui/data-table';
import { storeToRefs } from 'pinia';
import dayjs from 'dayjs';
@@ -47,6 +51,7 @@
let echartsInstance = null;
const usersFirstActivity = ref(null);
const resizeObserver = ref(null);
const hasChartData = computed(() => (props.activityDetailData || []).length > 0);
const startTimeStamp = computed(() => {
return props.activityDetailData.find((item) => item.user_id === currentUser.value.id)?.joinTime.valueOf();
@@ -189,7 +194,7 @@
if (!props.activityDetailData || props.activityDetailData.length === 0) {
return {
title: {
text: 'No data available',
text: 'No data',
left: 'center',
top: 'middle'
}

View File

@@ -6,7 +6,7 @@
<Button
class="rounded-full"
size="icon"
variant="outline"
variant="ghost"
:disabled="!graphReady"
@click="openForceDialog">
<Settings />

View File

@@ -244,7 +244,9 @@
</div>
</div>
</template>
<div v-else class="group-empty">No Data</div>
<div v-else class="group-empty">
<DataTableEmpty type="nodata" />
</div>
<TooltipWrapper
v-if="!isCreatingLocalGroup"
:disabled="isLocalUserVrcPlusSupporter"
@@ -401,7 +403,9 @@
</div>
</div>
</div>
<div v-else class="favorites-empty">No Data</div>
<div v-else class="favorites-empty">
<DataTableEmpty type="nomatch" />
</div>
</div>
</template>
<template v-else-if="activeRemoteGroup">
@@ -421,7 +425,9 @@
@click="showAvatarDialog(favorite.id)" />
</div>
</template>
<div v-else class="favorites-empty">No Data</div>
<div v-else class="favorites-empty">
<DataTableEmpty type="nodata" />
</div>
</div>
</template>
<template v-else-if="!remoteAvatarGroupsResolved">
@@ -452,7 +458,9 @@
@click="showAvatarDialog(favorite.id)" />
</div>
</template>
<div v-else class="favorites-empty">No Data</div>
<div v-else class="favorites-empty">
<DataTableEmpty type="nodata" />
</div>
</ScrollArea>
</template>
<template v-else-if="isHistorySelected">
@@ -468,7 +476,9 @@
@click="showAvatarDialog(favorite.id)" />
</div>
</template>
<div v-else class="favorites-empty">No Data</div>
<div v-else class="favorites-empty">
<DataTableEmpty type="nodata" />
</div>
</div>
</template>
<template v-else>
@@ -484,9 +494,10 @@
<script setup>
import { computed, markRaw, nextTick, onBeforeMount, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue';
import { ArrowUpDown, Check, Ellipsis, Loader, MoreHorizontal, Plus, RefreshCcw, RefreshCw } from 'lucide-vue-next';
import { ArrowUpDown, Ellipsis, Loader, MoreHorizontal, Plus, RefreshCcw, RefreshCw } from 'lucide-vue-next';
import { InputGroupField, InputGroupSearch } from '@/components/ui/input-group';
import { Button } from '@/components/ui/button';
import { DataTableEmpty } from '@/components/ui/data-table';
import { ScrollArea } from '@/components/ui/scroll-area';
import { Spinner } from '@/components/ui/spinner';
import { storeToRefs } from 'pinia';

View File

@@ -163,7 +163,9 @@
</div>
</div>
</template>
<div v-else class="group-empty">No Data</div>
<div v-else class="group-empty">
<DataTableEmpty type="nodata" />
</div>
</div>
</div>
</div>
@@ -237,7 +239,9 @@
@click="showUserDialog(favorite.id)" />
</div>
</template>
<div v-else class="favorites-empty">No Data</div>
<div v-else class="favorites-empty">
<DataTableEmpty type="nodata" />
</div>
</div>
</template>
<template v-else-if="!isSearchActive">
@@ -275,7 +279,9 @@
</div>
</div>
</div>
<div v-else class="favorites-empty">No Data</div>
<div v-else class="favorites-empty">
<DataTableEmpty type="nomatch" />
</div>
</div>
</template>
</div>
@@ -290,6 +296,7 @@
import { computed, nextTick, onBeforeMount, onMounted, onUnmounted, ref, watch } from 'vue';
import { ArrowUpDown, Check, Ellipsis, MoreHorizontal, RefreshCw } from 'lucide-vue-next';
import { Button } from '@/components/ui/button';
import { DataTableEmpty } from '@/components/ui/data-table';
import { InputGroupSearch } from '@/components/ui/input-group';
import { Spinner } from '@/components/ui/spinner';
import { storeToRefs } from 'pinia';

View File

@@ -34,7 +34,7 @@
@input="searchWorldFavorites" />
<DropdownMenu v-model:open="worldToolbarMenuOpen">
<DropdownMenuTrigger as-child>
<Button class="rounded-full" size="icon" variant="outline"><Ellipsis /></Button>
<Button class="rounded-full" size="icon" variant="ghost"><Ellipsis /></Button>
</DropdownMenuTrigger>
<DropdownMenuContent class="favorites-dropdown">
<li class="favorites-dropdown__control" @click.stop>
@@ -244,7 +244,9 @@
</div>
</div>
</template>
<div v-else class="group-empty">No Data</div>
<div v-else class="group-empty">
<DataTableEmpty type="nodata" />
</div>
<div
v-if="!isCreatingLocalGroup"
class="group-item group-item--new"
@@ -355,7 +357,9 @@
</div>
</div>
</div>
<div v-else class="favorites-empty">No Data</div>
<div v-else class="favorites-empty">
<DataTableEmpty type="nomatch" />
</div>
</div>
</template>
<template v-else>
@@ -377,7 +381,9 @@
@click="showWorldDialog(favorite.id)" />
</div>
</template>
<div v-else class="favorites-empty">No Data</div>
<div v-else class="favorites-empty">
<DataTableEmpty type="nodata" />
</div>
</div>
<div
v-else-if="activeLocalGroupName && isLocalGroupSelected"
@@ -410,9 +416,13 @@
</template>
</div>
</template>
<div v-else class="favorites-empty">No Data</div>
<div v-else class="favorites-empty">
<DataTableEmpty type="nodata" />
</div>
</div>
<div v-else class="favorites-empty">
<DataTableEmpty type="nodata" />
</div>
<div v-else class="favorites-empty">No Data</div>
</template>
</div>
</div>
@@ -427,6 +437,7 @@
import { ArrowUpDown, Ellipsis, MoreHorizontal, Plus, RefreshCcw, RefreshCw } from 'lucide-vue-next';
import { InputGroupField, InputGroupSearch } from '@/components/ui/input-group';
import { Button } from '@/components/ui/button';
import { DataTableEmpty } from '@/components/ui/data-table';
import { Spinner } from '@/components/ui/spinner';
import { storeToRefs } from 'pinia';
import { toast } from 'vue-sonner';

View File

@@ -14,7 +14,7 @@
<div>
<Popover>
<PopoverTrigger asChild>
<Button class="rounded-full mr-2" size="icon" variant="outline">
<Button class="rounded-full mr-2" size="icon" variant="ghost">
<Settings />
</Button>
</PopoverTrigger>
@@ -112,7 +112,9 @@
</div>
</template>
</div>
<div v-else class="friend-view__empty">{{ t('view.friends_locations.no_matching_friends') }}</div>
<div v-else class="friend-view__empty">
<DataTableEmpty type="nomatch" />
</div>
</div>
<div v-else class="friend-view__initial-loading">
<Loader2 class="friend-view__loading-icon" :size="22" />
@@ -126,6 +128,7 @@
import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Loader2, Settings } from 'lucide-vue-next';
import { Button } from '@/components/ui/button';
import { DataTableEmpty } from '@/components/ui/data-table';
import { InputGroupSearch } from '@/components/ui/input-group';
import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';

View File

@@ -27,7 +27,7 @@
<TooltipWrapper side="bottom" :content="t('view.moderation.refresh_tooltip')">
<Button
class="rounded-full"
variant="outline"
variant="ghost"
size="icon-sm"
:disabled="playerModerationTable.loading"
@click="refreshPlayerModerations()">

View File

@@ -60,7 +60,7 @@
<TooltipWrapper side="bottom" :content="t('view.notification.refresh_tooltip')">
<Button
class="rounded-full"
variant="outline"
variant="ghost"
size="icon-sm"
:disabled="isNotificationsLoading"
style="flex: none"

View File

@@ -56,7 +56,7 @@
</div>
</button>
<div v-if="quickSearchItems.length === 0" class="px-2 py-2 text-xs opacity-70">
No results
<DataTableEmpty type="nomatch" />
</div>
</div>
</PopoverContent>
@@ -66,7 +66,7 @@
<TooltipWrapper side="bottom" :content="t('side_panel.refresh_tooltip')">
<Button
class="rounded-full"
variant="outline"
variant="ghost"
size="icon-sm"
:disabled="isRefreshFriendsLoading"
style="margin-right: 10px"
@@ -117,6 +117,7 @@
import { computed, nextTick, onMounted, ref, watch } from 'vue';
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
import { Button } from '@/components/ui/button';
import { DataTableEmpty } from '@/components/ui/data-table';
import { Input } from '@/components/ui/input';
import { RefreshCw } from 'lucide-vue-next';
import { ScrollArea } from '@/components/ui/scroll-area';