mirror of
https://github.com/sysadminsmedia/homebox.git
synced 2025-12-21 21:33:02 +01:00
run prettier on index.vue
This commit is contained in:
Jeff Rescignano
@@ -1,212 +1,237 @@
|
||||
<script setup lang="ts">
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { toast } from "@/components/ui/sonner";
|
||||
import MdiGithub from "~icons/mdi/github";
|
||||
import MdiDiscord from "~icons/mdi/discord";
|
||||
import MdiFolder from "~icons/mdi/folder";
|
||||
import MdiAccount from "~icons/mdi/account";
|
||||
import MdiAccountPlus from "~icons/mdi/account-plus";
|
||||
import MdiLogin from "~icons/mdi/login";
|
||||
import MdiArrowRight from "~icons/mdi/arrow-right";
|
||||
import MdiLock from "~icons/mdi/lock";
|
||||
import MdiMastodon from "~icons/mdi/mastodon";
|
||||
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import LanguageSelector from "~/components/App/LanguageSelector.vue";
|
||||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
|
||||
import AppLogo from "~/components/App/Logo.vue";
|
||||
import FormTextField from "~/components/Form/TextField.vue";
|
||||
import FormPassword from "~/components/Form/Password.vue";
|
||||
import FormCheckbox from "~/components/Form/Checkbox.vue";
|
||||
import PasswordScore from "~/components/global/PasswordScore.vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { toast } from "@/components/ui/sonner";
|
||||
import MdiGithub from "~icons/mdi/github";
|
||||
import MdiDiscord from "~icons/mdi/discord";
|
||||
import MdiFolder from "~icons/mdi/folder";
|
||||
import MdiAccount from "~icons/mdi/account";
|
||||
import MdiAccountPlus from "~icons/mdi/account-plus";
|
||||
import MdiLogin from "~icons/mdi/login";
|
||||
import MdiArrowRight from "~icons/mdi/arrow-right";
|
||||
import MdiLock from "~icons/mdi/lock";
|
||||
import MdiMastodon from "~icons/mdi/mastodon";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardFooter,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import LanguageSelector from "~/components/App/LanguageSelector.vue";
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipProvider,
|
||||
TooltipTrigger,
|
||||
} from "@/components/ui/tooltip";
|
||||
import AppLogo from "~/components/App/Logo.vue";
|
||||
import FormTextField from "~/components/Form/TextField.vue";
|
||||
import FormPassword from "~/components/Form/Password.vue";
|
||||
import FormCheckbox from "~/components/Form/Checkbox.vue";
|
||||
import PasswordScore from "~/components/global/PasswordScore.vue";
|
||||
|
||||
const { t } = useI18n();
|
||||
const { t } = useI18n();
|
||||
|
||||
useHead({
|
||||
title: "HomeBox | " + t("index.title"),
|
||||
});
|
||||
useHead({
|
||||
title: "HomeBox | " + t("index.title"),
|
||||
});
|
||||
|
||||
definePageMeta({
|
||||
layout: "empty",
|
||||
middleware: [
|
||||
() => {
|
||||
const ctx = useAuthContext();
|
||||
if (ctx.isAuthorized()) {
|
||||
return "/home";
|
||||
}
|
||||
definePageMeta({
|
||||
layout: "empty",
|
||||
middleware: [
|
||||
() => {
|
||||
const ctx = useAuthContext();
|
||||
if (ctx.isAuthorized()) {
|
||||
return "/home";
|
||||
}
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
const ctx = useAuthContext();
|
||||
|
||||
const api = usePublicApi();
|
||||
|
||||
// Use useState for OIDC error state management
|
||||
const oidcError = useState<string | null>("oidc_error", () => null);
|
||||
|
||||
const { data: status } = useAsyncData(async () => {
|
||||
const { data } = await api.status();
|
||||
|
||||
if (data.demo) {
|
||||
username.value = "demo@example.com";
|
||||
password.value = "demo";
|
||||
}
|
||||
return data;
|
||||
});
|
||||
|
||||
whenever(status, (status) => {
|
||||
if (status?.demo) {
|
||||
email.value = "demo@example.com";
|
||||
loginPassword.value = "demo";
|
||||
}
|
||||
|
||||
// Auto-redirect to OIDC if force is enabled, but not if there's an OIDC error
|
||||
if (status?.oidc?.enabled && status?.oidc?.force && !oidcError.value) {
|
||||
loginWithOIDC();
|
||||
}
|
||||
});
|
||||
|
||||
const isEvilAccentTheme = useIsThemeInList([
|
||||
"bumblebee",
|
||||
"corporate",
|
||||
"forest",
|
||||
"pastel",
|
||||
"wireframe",
|
||||
"black",
|
||||
"dracula",
|
||||
"autumn",
|
||||
"acid",
|
||||
]);
|
||||
const isEvilForegroundTheme = useIsThemeInList([
|
||||
"light",
|
||||
"aqua",
|
||||
"fantasy",
|
||||
"autumn",
|
||||
"night",
|
||||
]);
|
||||
const isLofiTheme = useIsThemeInList(["lofi"]);
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
const username = ref("");
|
||||
const email = ref("");
|
||||
const password = ref("");
|
||||
const canRegister = ref(false);
|
||||
const remember = ref(false);
|
||||
|
||||
const groupToken = computed<string>({
|
||||
get() {
|
||||
const params = route.query.token;
|
||||
|
||||
if (typeof params === "string") {
|
||||
return params;
|
||||
}
|
||||
|
||||
return "";
|
||||
},
|
||||
set(v) {
|
||||
router.push({
|
||||
query: {
|
||||
token: v,
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
const ctx = useAuthContext();
|
||||
|
||||
const api = usePublicApi();
|
||||
|
||||
// Use useState for OIDC error state management
|
||||
const oidcError = useState<string | null>("oidc_error", () => null);
|
||||
|
||||
const { data: status } = useAsyncData(async () => {
|
||||
const { data } = await api.status();
|
||||
|
||||
if (data.demo) {
|
||||
username.value = "demo@example.com";
|
||||
password.value = "demo";
|
||||
}
|
||||
return data;
|
||||
});
|
||||
|
||||
whenever(status, status => {
|
||||
if (status?.demo) {
|
||||
email.value = "demo@example.com";
|
||||
loginPassword.value = "demo";
|
||||
}
|
||||
|
||||
// Auto-redirect to OIDC if force is enabled, but not if there's an OIDC error
|
||||
if (status?.oidc?.enabled && status?.oidc?.force && !oidcError.value) {
|
||||
loginWithOIDC();
|
||||
}
|
||||
});
|
||||
|
||||
const isEvilAccentTheme = useIsThemeInList([
|
||||
"bumblebee",
|
||||
"corporate",
|
||||
"forest",
|
||||
"pastel",
|
||||
"wireframe",
|
||||
"black",
|
||||
"dracula",
|
||||
"autumn",
|
||||
"acid",
|
||||
]);
|
||||
const isEvilForegroundTheme = useIsThemeInList(["light", "aqua", "fantasy", "autumn", "night"]);
|
||||
const isLofiTheme = useIsThemeInList(["lofi"]);
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
const username = ref("");
|
||||
const email = ref("");
|
||||
const password = ref("");
|
||||
const canRegister = ref(false);
|
||||
const remember = ref(false);
|
||||
|
||||
const groupToken = computed<string>({
|
||||
get() {
|
||||
const params = route.query.token;
|
||||
|
||||
if (typeof params === "string") {
|
||||
return params;
|
||||
}
|
||||
|
||||
return "";
|
||||
},
|
||||
set(v) {
|
||||
router.push({
|
||||
query: {
|
||||
token: v,
|
||||
},
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
async function registerUser() {
|
||||
loading.value = true;
|
||||
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
|
||||
if (!emailRegex.test(email.value)) {
|
||||
toast.error(t("index.toast.invalid_email"));
|
||||
loading.value = false;
|
||||
return;
|
||||
}
|
||||
|
||||
const { error } = await api.register({
|
||||
name: username.value,
|
||||
email: email.value,
|
||||
password: password.value,
|
||||
token: groupToken.value,
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
if (error) {
|
||||
toast.error(t("index.toast.problem_registering"), {
|
||||
classes: {
|
||||
title: "login-error",
|
||||
},
|
||||
});
|
||||
return;
|
||||
}
|
||||
async function registerUser() {
|
||||
loading.value = true;
|
||||
|
||||
toast.success(t("index.toast.user_registered"));
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
|
||||
if (!emailRegex.test(email.value)) {
|
||||
toast.error(t("index.toast.invalid_email"));
|
||||
loading.value = false;
|
||||
registerForm.value = false;
|
||||
return;
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (groupToken.value !== "") {
|
||||
registerForm.value = true;
|
||||
}
|
||||
|
||||
// Handle OIDC error notifications from URL parameters
|
||||
const oidcErrorParam = route.query.oidc_error;
|
||||
if (typeof oidcErrorParam === "string" && oidcErrorParam.startsWith("oidc_")) {
|
||||
// Set the error state to prevent auto-redirect
|
||||
oidcError.value = oidcErrorParam;
|
||||
|
||||
const translationKey = `index.toast.${oidcErrorParam}`;
|
||||
let errorMessage = t(translationKey);
|
||||
|
||||
// If there are additional details, append them
|
||||
const details = route.query.details;
|
||||
if (typeof details === "string" && details.trim() !== "") {
|
||||
errorMessage += `: ${details}`;
|
||||
}
|
||||
|
||||
toast.error(errorMessage);
|
||||
|
||||
// Clean up the URL by removing the error parameters
|
||||
const newQuery = { ...route.query };
|
||||
delete newQuery.oidc_error;
|
||||
delete newQuery.details;
|
||||
router.replace({ query: newQuery });
|
||||
|
||||
// Clear the error state after showing the message (with a delay to ensure auto-redirect doesn't trigger)
|
||||
setTimeout(() => {
|
||||
oidcError.value = null;
|
||||
}, 1000);
|
||||
}
|
||||
const { error } = await api.register({
|
||||
name: username.value,
|
||||
email: email.value,
|
||||
password: password.value,
|
||||
token: groupToken.value,
|
||||
});
|
||||
|
||||
const loading = ref(false);
|
||||
const loginPassword = ref("");
|
||||
const redirectTo = useState("authRedirect");
|
||||
if (error) {
|
||||
toast.error(t("index.toast.problem_registering"), {
|
||||
classes: {
|
||||
title: "login-error",
|
||||
},
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
async function login() {
|
||||
loading.value = true;
|
||||
const { error } = await ctx.login(api, email.value, loginPassword.value, remember.value);
|
||||
toast.success(t("index.toast.user_registered"));
|
||||
|
||||
if (error) {
|
||||
toast.error(t("index.toast.invalid_email_password"), {
|
||||
classes: {
|
||||
title: "login-error",
|
||||
},
|
||||
});
|
||||
loading.value = false;
|
||||
return;
|
||||
loading.value = false;
|
||||
registerForm.value = false;
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (groupToken.value !== "") {
|
||||
registerForm.value = true;
|
||||
}
|
||||
|
||||
// Handle OIDC error notifications from URL parameters
|
||||
const oidcErrorParam = route.query.oidc_error;
|
||||
if (
|
||||
typeof oidcErrorParam === "string" &&
|
||||
oidcErrorParam.startsWith("oidc_")
|
||||
) {
|
||||
// Set the error state to prevent auto-redirect
|
||||
oidcError.value = oidcErrorParam;
|
||||
|
||||
const translationKey = `index.toast.${oidcErrorParam}`;
|
||||
let errorMessage = t(translationKey);
|
||||
|
||||
// If there are additional details, append them
|
||||
const details = route.query.details;
|
||||
if (typeof details === "string" && details.trim() !== "") {
|
||||
errorMessage += `: ${details}`;
|
||||
}
|
||||
|
||||
toast.success(t("index.toast.login_success"));
|
||||
toast.error(errorMessage);
|
||||
|
||||
navigateTo(redirectTo.value || "/home");
|
||||
redirectTo.value = null;
|
||||
// Clean up the URL by removing the error parameters
|
||||
const newQuery = { ...route.query };
|
||||
delete newQuery.oidc_error;
|
||||
delete newQuery.details;
|
||||
router.replace({ query: newQuery });
|
||||
|
||||
// Clear the error state after showing the message (with a delay to ensure auto-redirect doesn't trigger)
|
||||
setTimeout(() => {
|
||||
oidcError.value = null;
|
||||
}, 1000);
|
||||
}
|
||||
});
|
||||
|
||||
const loading = ref(false);
|
||||
const loginPassword = ref("");
|
||||
const redirectTo = useState("authRedirect");
|
||||
|
||||
async function login() {
|
||||
loading.value = true;
|
||||
const { error } = await ctx.login(
|
||||
api,
|
||||
email.value,
|
||||
loginPassword.value,
|
||||
remember.value,
|
||||
);
|
||||
|
||||
if (error) {
|
||||
toast.error(t("index.toast.invalid_email_password"), {
|
||||
classes: {
|
||||
title: "login-error",
|
||||
},
|
||||
});
|
||||
loading.value = false;
|
||||
return;
|
||||
}
|
||||
|
||||
function loginWithOIDC() {
|
||||
window.location.href = '/api/v1/users/login/oidc';
|
||||
}
|
||||
toast.success(t("index.toast.login_success"));
|
||||
|
||||
const [registerForm, toggleLogin] = useToggle();
|
||||
navigateTo(redirectTo.value || "/home");
|
||||
redirectTo.value = null;
|
||||
loading.value = false;
|
||||
}
|
||||
|
||||
function loginWithOIDC() {
|
||||
window.location.href = "/api/v1/users/login/oidc";
|
||||
}
|
||||
|
||||
const [registerForm, toggleLogin] = useToggle();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -228,15 +253,26 @@
|
||||
<div>
|
||||
<header
|
||||
class="mx-auto p-4 sm:flex sm:items-end sm:p-6 lg:p-14"
|
||||
:class="{ 'text-accent': !isEvilAccentTheme, 'text-white': isLofiTheme }"
|
||||
:class="{
|
||||
'text-accent': !isEvilAccentTheme,
|
||||
'text-white': isLofiTheme,
|
||||
}"
|
||||
>
|
||||
<div class="z-10">
|
||||
<h2 class="mt-1 flex text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl">
|
||||
<h2
|
||||
class="mt-1 flex text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl"
|
||||
>
|
||||
HomeB
|
||||
<AppLogo class="-mb-4 w-12" />
|
||||
x
|
||||
</h2>
|
||||
<p class="ml-1 text-lg" :class="{ 'text-foreground': !isEvilForegroundTheme, 'text-white': isLofiTheme }">
|
||||
<p
|
||||
class="ml-1 text-lg"
|
||||
:class="{
|
||||
'text-foreground': !isEvilForegroundTheme,
|
||||
'text-white': isLofiTheme,
|
||||
}"
|
||||
>
|
||||
{{ $t("index.tagline") }}
|
||||
</p>
|
||||
</div>
|
||||
@@ -244,7 +280,11 @@
|
||||
<div class="z-10 ml-auto mt-6 flex items-center gap-4 sm:mt-0">
|
||||
<Tooltip>
|
||||
<TooltipTrigger as-child>
|
||||
<a href="https://github.com/sysadminsmedia/homebox" target="_blank" rel="noopener noreferrer">
|
||||
<a
|
||||
href="https://github.com/sysadminsmedia/homebox"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<MdiGithub class="size-8" />
|
||||
</a>
|
||||
</TooltipTrigger>
|
||||
@@ -253,7 +293,11 @@
|
||||
|
||||
<Tooltip>
|
||||
<TooltipTrigger as-child>
|
||||
<a href="https://noc.social/@sysadminszone" target="_blank" rel="noopener noreferrer">
|
||||
<a
|
||||
href="https://noc.social/@sysadminszone"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<MdiMastodon class="size-8" />
|
||||
</a>
|
||||
</TooltipTrigger>
|
||||
@@ -262,7 +306,11 @@
|
||||
|
||||
<Tooltip>
|
||||
<TooltipTrigger as-child>
|
||||
<a href="https://discord.gg/aY4DCkpNA9" target="_blank" rel="noopener noreferrer">
|
||||
<a
|
||||
href="https://discord.gg/aY4DCkpNA9"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<MdiDiscord class="size-8" />
|
||||
</a>
|
||||
</TooltipTrigger>
|
||||
@@ -271,7 +319,11 @@
|
||||
|
||||
<Tooltip>
|
||||
<TooltipTrigger as-child>
|
||||
<a href="https://homebox.software/en/" target="_blank" rel="noopener noreferrer">
|
||||
<a
|
||||
href="https://homebox.software/en/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<MdiFolder class="size-8" />
|
||||
</a>
|
||||
</TooltipTrigger>
|
||||
@@ -294,16 +346,35 @@
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent class="flex flex-col gap-2">
|
||||
<FormTextField v-model="email" :label="$t('index.set_email')" data-testid="email-input" />
|
||||
<FormTextField v-model="username" :label="$t('index.set_name')" data-testid="name-input" />
|
||||
<FormTextField
|
||||
v-model="email"
|
||||
:label="$t('index.set_email')"
|
||||
data-testid="email-input"
|
||||
/>
|
||||
<FormTextField
|
||||
v-model="username"
|
||||
:label="$t('index.set_name')"
|
||||
data-testid="name-input"
|
||||
/>
|
||||
<div v-if="!(groupToken == '')" class="pb-1 pt-4 text-center">
|
||||
<p>{{ $t("index.joining_group") }}</p>
|
||||
<button type="button" class="text-xs underline" @click="groupToken = ''">
|
||||
<button
|
||||
type="button"
|
||||
class="text-xs underline"
|
||||
@click="groupToken = ''"
|
||||
>
|
||||
{{ $t("index.dont_join_group") }}
|
||||
</button>
|
||||
</div>
|
||||
<FormPassword v-model="password" :label="$t('index.set_password')" data-testid="password-input" />
|
||||
<PasswordScore v-model:valid="canRegister" :password="password" />
|
||||
<FormPassword
|
||||
v-model="password"
|
||||
:label="$t('index.set_password')"
|
||||
data-testid="password-input"
|
||||
/>
|
||||
<PasswordScore
|
||||
v-model:valid="canRegister"
|
||||
:password="password"
|
||||
/>
|
||||
</CardContent>
|
||||
<CardFooter>
|
||||
<Button
|
||||
@@ -326,9 +397,14 @@
|
||||
{{ $t("index.login") }}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent v-if="status?.oidc?.allowLocal !== false" class="flex flex-col gap-2">
|
||||
<CardContent
|
||||
v-if="status?.oidc?.allowLocal !== false"
|
||||
class="flex flex-col gap-2"
|
||||
>
|
||||
<template v-if="status && status.demo">
|
||||
<p class="text-center text-xs italic">{{ $t("global.demo_instance") }}</p>
|
||||
<p class="text-center text-xs italic">
|
||||
{{ $t("global.demo_instance") }}
|
||||
</p>
|
||||
<p class="text-center text-xs">
|
||||
<b>{{ $t("global.email") }}</b> demo@example.com
|
||||
</p>
|
||||
@@ -337,30 +413,50 @@
|
||||
</p>
|
||||
</template>
|
||||
<FormTextField v-model="email" :label="$t('global.email')" />
|
||||
<FormPassword v-model="loginPassword" :label="$t('global.password')" />
|
||||
<FormPassword
|
||||
v-model="loginPassword"
|
||||
:label="$t('global.password')"
|
||||
/>
|
||||
<div class="max-w-[140px]">
|
||||
<FormCheckbox v-model="remember" :label="$t('index.remember_me')" />
|
||||
<FormCheckbox
|
||||
v-model="remember"
|
||||
:label="$t('index.remember_me')"
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
<CardFooter class="flex flex-col gap-2">
|
||||
<Button v-if="status?.oidc?.allowLocal !== false" class="w-full" type="submit" :class="loading ? 'loading' : ''" :disabled="loading">
|
||||
<Button
|
||||
v-if="status?.oidc?.allowLocal !== false"
|
||||
class="w-full"
|
||||
type="submit"
|
||||
:class="loading ? 'loading' : ''"
|
||||
:disabled="loading"
|
||||
>
|
||||
{{ $t("index.login") }}
|
||||
</Button>
|
||||
|
||||
<div v-if="status?.oidc?.enabled && status?.oidc?.allowLocal !== false" class="flex w-full items-center gap-2">
|
||||
|
||||
<div
|
||||
v-if="
|
||||
status?.oidc?.enabled &&
|
||||
status?.oidc?.allowLocal !== false
|
||||
"
|
||||
class="flex w-full items-center gap-2"
|
||||
>
|
||||
<hr class="flex-1" />
|
||||
<span class="text-xs text-muted-foreground">{{ $t("index.or") }}</span>
|
||||
<span class="text-xs text-muted-foreground">{{
|
||||
$t("index.or")
|
||||
}}</span>
|
||||
<hr class="flex-1" />
|
||||
</div>
|
||||
|
||||
<Button
|
||||
|
||||
<Button
|
||||
v-if="status?.oidc?.enabled"
|
||||
type="button"
|
||||
variant="outline"
|
||||
class="w-full"
|
||||
@click="loginWithOIDC"
|
||||
>
|
||||
{{ status.oidc.buttonText || 'Sign in with OIDC' }}
|
||||
{{ status.oidc.buttonText || "Sign in with OIDC" }}
|
||||
</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
@@ -368,7 +464,11 @@
|
||||
</Transition>
|
||||
<div class="mt-6 text-center">
|
||||
<Button
|
||||
v-if="status && status.allowRegistration && status?.oidc?.allowLocal !== false"
|
||||
v-if="
|
||||
status &&
|
||||
status.allowRegistration &&
|
||||
status?.oidc?.allowLocal !== false
|
||||
"
|
||||
class="group"
|
||||
variant="link"
|
||||
data-testid="register-button"
|
||||
@@ -378,7 +478,10 @@
|
||||
<div
|
||||
class="absolute inset-0 flex items-center justify-center transition-transform duration-300 group-hover:rotate-[360deg]"
|
||||
>
|
||||
<MdiAccountPlus v-if="!registerForm" class="size-5 group-hover:hidden" />
|
||||
<MdiAccountPlus
|
||||
v-if="!registerForm"
|
||||
class="size-5 group-hover:hidden"
|
||||
/>
|
||||
<MdiLogin v-else class="size-5 group-hover:hidden" />
|
||||
<MdiArrowRight class="hidden size-5 group-hover:block" />
|
||||
</div>
|
||||
@@ -403,18 +506,18 @@
|
||||
</template>
|
||||
|
||||
<style lang="css" scoped>
|
||||
.slide-fade-enter-active {
|
||||
transition: all 0.2s ease-out;
|
||||
}
|
||||
.slide-fade-enter-active {
|
||||
transition: all 0.2s ease-out;
|
||||
}
|
||||
|
||||
.slide-fade-enter-from,
|
||||
.slide-fade-leave-to {
|
||||
position: absolute;
|
||||
transform: translateX(20px);
|
||||
opacity: 0;
|
||||
}
|
||||
.slide-fade-enter-from,
|
||||
.slide-fade-leave-to {
|
||||
position: absolute;
|
||||
transform: translateX(20px);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
progress[value]::-webkit-progress-value {
|
||||
transition: width 0.5s;
|
||||
}
|
||||
progress[value]::-webkit-progress-value {
|
||||
transition: width 0.5s;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user