Joururi/leim-tools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed some inconsistencies

Browse Source
This commit is contained in:
Alexis
2025-04-25 16:56:09 +02:00
parent ee29169f4f
commit e634cc8127
7 changed files with 84 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
components/calendar/PreviewCard.vue
View File

@@ -1,37 +1,51 @@
<script lang="ts" setup>
import { cn } from "~/lib/utils";
import { PhArchive, PhCalendarDots, PhFile, PhFileDashed, PhFilePlus, PhPencil, PhPencilSimpleLine, PhTrash } from "@phosphor-icons/vue";
import { DateTime } from "luxon";
import type { Calendar } from "~/models/CalendarConfig";
import { cn } from "~/lib/utils"
import { PhArchive, PhCalendarDots, PhFile, PhFileDashed, PhFilePlus, PhPencil, PhPencilSimpleLine, PhTrash } from "@phosphor-icons/vue"
import { DateTime } from "luxon"
import type { Calendar } from "~/models/CalendarConfig"
const props = defineProps<{
calendar: Calendar,
gmId?: string,
showActions?: boolean,
calendar: Calendar
gmId?: string
showActions?: boolean
}>()
const emit = defineEmits(["on-edit", "on-delete"])
const { locale } = useI18n();
const cardRef = ref(null)
const isCardHovered = useElementHover(cardRef)
const { focused: isCardFocused } = useFocusWithin(cardRef)
const createdAt = DateTime.fromISO(props.calendar.createdAt!).toLocaleString(DateTime.DATETIME_MED, { locale: locale.value });
const updatedAt = computed<string>(() => props.calendar.updatedAt ? DateTime.fromISO(props.calendar.updatedAt).toLocaleString(DateTime.DATETIME_MED, { locale: locale.value }) : "");
const { locale } = useI18n()
const user = useSupabaseUser();
const isOwner = computed(() => user.value && props.gmId && user.value.id === props.gmId);
const calendarLink = computed(() => isOwner.value ? `/my/calendars/${props.calendar.id}` : `/calendars/${props.calendar.shortId}`);
const createdAt = DateTime.fromISO(props.calendar.createdAt!).toLocaleString(DateTime.DATETIME_MED, { locale: locale.value })
const updatedAt = computed<string>(() => props.calendar.updatedAt ? DateTime.fromISO(props.calendar.updatedAt).toLocaleString(DateTime.DATETIME_MED, { locale: locale.value }) : "")
const user = useSupabaseUser()
const isOwner = computed(() => user.value && props.gmId && user.value.id === props.gmId)
const calendarLink = computed(() => isOwner.value ? `/my/calendars/${props.calendar.id}` : `/calendars/${props.calendar.shortId}`)
const hasActions = computed(() => isOwner.value && props.showActions)
</script>
<template>
<UiCard
class="w-full h-full flex flex-col transition-all"
ref="cardRef"
class="w-full h-full flex flex-col"
:link="calendarLink"
:class="cn(
calendar.color ? `card-color element-${calendar.color}` : '',
calendar.color ? `group card-color element-${calendar.color}` : '',
)"
>
<UiCardHeader class="gap-4">
<UiCardTitle class="text-xl pr-12">{{ calendar.name }}</UiCardTitle>
<UiCardTitle
class="text-xl"
:class="cn({
'pr-18': hasActions
})"
>
{{ calendar.name }}
</UiCardTitle>
<div v-if="calendar.state === 'published'" class="flex items-center gap-1 text-sm">
<PhFile size="20" weight="fill" />
@@ -55,16 +69,19 @@ const calendarLink = computed(() => isOwner.value ? `/my/calendars/${props.calen
</p>
<div
v-if="isOwner && showActions"
class="flex gap-1 absolute top-4 right-4 z-20"
v-if="hasActions && (isCardHovered || isCardFocused)"
class="flex gap-2 absolute top-4 right-4 z-20"
>
<UiButton size="icon" variant="ghost" class=" hover:text-white hover:bg-indigo-400 dark:hover:bg-indigo-700" @click="emit('on-edit')">
<PhPencil size="16" />
</UiButton>
<UiButton size="icon" variant="ghost" class=" hover:text-white hover:bg-rose-400 dark:hover:bg-rose-700" @click="emit('on-delete')">
<PhTrash size="16" />
</UiButton>
<Transition name="fade" appear>
<UiButton size="icon" variant="outline" class="size-8 border-foreground/20 group-hover:border-foreground/30 hover:text-background hover:border-foreground hover:bg-foreground" @click="emit('on-edit')">
<PhPencil size="15" weight="fill" />
</UiButton>
</Transition>
<Transition name="fade" appear>
<UiButton size="icon" variant="outline" class="size-8 border-foreground/25 group-hover:border-foreground/40 hover:text-background hover:border-rose-500 hover:bg-rose-500" @click="emit('on-delete')">
<PhTrash size="15" weight="fill" />
</UiButton>
</Transition>
</div>
</UiCardContent>

13
components/ui/card/Card.vue
View File

@@ -15,21 +15,22 @@ const emit = defineEmits(["on-click"])
<div
:class="
cn('rounded-lg border bg-card text-card-foreground shadow-xs transition-all isolate', props.class, {
'relative outline outline-2 outline-offset-4 outline-transparent hover:-translate-y-[.2rem]':
'relative hover:-translate-y-[.2rem]':
props.link || props.hasClick
})
"
>
<slot />
<NuxtLink
v-if="props.link"
:to="props.link"
class="absolute inset-0 z-10 focus-visible:outline-hidden cursor-pointer"
class="rounded-lg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 absolute inset-0 z-10 cursor-pointer"
/>
<button
v-if="props.hasClick"
class="absolute inset-0 z-10 focus-visible:outline-hidden cursor-pointer"
@click="emit('on-click')" />
class="rounded-lg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 absolute inset-0 z-10 cursor-pointer"
@click="emit('on-click')"
/>
<slot />
</div>
</template>

47
components/world/PreviewCard.vue
View File

@@ -1,23 +1,28 @@
<script lang="ts" setup>
import { PhArchive, PhFile, PhFileDashed, PhFilePlus, PhPencil, PhPencilSimpleLine, PhTrash } from "@phosphor-icons/vue";
import type { World } from "~/models/World";
import { DateTime } from "luxon";
import { cn } from "~/lib/utils";
import { PhArchive, PhFile, PhFileDashed, PhFilePlus, PhPencil, PhPencilSimpleLine, PhTrash } from "@phosphor-icons/vue"
import type { World } from "~/models/World"
import { DateTime } from "luxon"
import { cn } from "~/lib/utils"
const props = defineProps<{
world: World
}>();
}>()
const emit = defineEmits(["on-edit", "on-delete"]);
const emit = defineEmits(["on-edit", "on-delete"])
const { locale } = useI18n();
const createdAt = DateTime.fromISO(props.world.createdAt!).toLocaleString(DateTime.DATETIME_MED, { locale: locale.value });
const updatedAt = computed<string>(() => props.world.updatedAt ? DateTime.fromISO(props.world.updatedAt).toLocaleString(DateTime.DATETIME_MED, { locale: locale.value }) : "");
const cardRef = ref(null)
const isCardHovered = useElementHover(cardRef)
const { focused: isCardFocused } = useFocusWithin(cardRef)
const { locale } = useI18n()
const createdAt = DateTime.fromISO(props.world.createdAt!).toLocaleString(DateTime.DATETIME_MED, { locale: locale.value })
const updatedAt = computed<string>(() => props.world.updatedAt ? DateTime.fromISO(props.world.updatedAt).toLocaleString(DateTime.DATETIME_MED, { locale: locale.value }) : "")
</script>
<template>
<UiCard
class="w-full h-full flex flex-col transition-all"
ref="cardRef"
class="w-full h-full flex flex-col"
:link="`/my/worlds/${world.id}`"
:class="cn(
world.color ? `card-color element-${world.color}` : '',
@@ -44,14 +49,20 @@ const updatedAt = computed<string>(() => props.world.updatedAt ? DateTime.fromIS
<UiCardContent class="grow">
<p class="italic">{{ world.description }}</p>
<div class="flex gap-1 absolute top-4 right-4 z-20">
<UiButton size="icon" variant="ghost" class=" hover:text-white hover:bg-indigo-400 dark:hover:bg-indigo-700" @click="emit('on-edit')">
<PhPencil size="16" />
</UiButton>
<UiButton size="icon" variant="ghost" class=" hover:text-white hover:bg-rose-400 dark:hover:bg-rose-700" @click="emit('on-delete')">
<PhTrash size="16" />
</UiButton>
<div
v-if="isCardHovered || isCardFocused"
class="flex gap-2 absolute top-4 right-4 z-20"
>
<Transition name="fade" appear>
<UiButton size="icon" variant="outline" class="size-8 border-foreground/20 group-hover:border-foreground/30 hover:text-background hover:border-foreground hover:bg-foreground" @click="emit('on-edit')">
<PhPencil size="15" weight="fill" />
</UiButton>
</Transition>
<Transition name="fade" appear>
<UiButton size="icon" variant="outline" class="size-8 border-foreground/25 group-hover:border-foreground/40 hover:text-background hover:border-rose-500 hover:bg-rose-500" @click="emit('on-delete')">
<PhTrash size="15" weight="fill" />
</UiButton>
</Transition>
</div>
</UiCardContent>

6
pages/explore.vue
View File

@@ -11,7 +11,7 @@ const isLoading = computed(() => calendarStatus.value === "pending")
</script>
<template>
<main class="p-8">
<main class="py-8 px-5 md:px-8">
<Head>
<Title>{{ $t("pages.explore.title") }}</Title>
</Head>
@@ -26,10 +26,10 @@ const isLoading = computed(() => calendarStatus.value === "pending")
{{ $t("entity.calendar.namePublicPlural") }}
</Heading>
<div v-if="isLoading" class="grid md:grid-cols-3 gap-2">
<div v-if="isLoading" class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-2">
<LoadingCard />
</div>
<ul v-else-if="availableCalendars?.data" class="grid md:grid-cols-3 gap-2">
<ul v-else-if="availableCalendars?.data" class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-2">
<li v-for="calendar in availableCalendars.data" :key="calendar.shortId">
<CalendarPreviewCard :calendar="calendar" :gm-id="calendar.world?.gmId" />
</li>

2
pages/index.vue
View File

@@ -9,7 +9,7 @@ definePageMeta({
</script>
<template>
<main class="p-8">
<main class="py-8 px-5 md:px-8">
<Head>
<Title>
TTTools — {{ $t('head.title') }}

2
pages/my/index.vue
View File

@@ -110,7 +110,7 @@ function hideEditModal() {
</script>
<template>
<main class="p-8">
<main class="py-8 px-5 md:px-8">
<Head>
<Title>{{ $t("pages.profile.metaTitle") }}</Title>
</Head>

2
pages/my/worlds/[id].vue
View File

@@ -163,7 +163,7 @@ function hideEditModal() {
</script>
<template>
<main class="p-8">
<main class="py-8 px-5 md:px-8">
<template v-if="status === 'pending'">
<Head>
<Title>{{ $t("entity.world.namePlural") }}</Title>