mirror of
https://github.com/versia-pub/frontend.git
synced 2026-03-13 03:29:16 +01:00
feat: ✨ Implement proper login and logout using UI
This commit is contained in:
parent
e0c41bb9b5
commit
3c8093a3d2
23 changed files with 273 additions and 193 deletions
|
|
@ -1,6 +1,9 @@
|
|||
<template>
|
||||
<button v-bind="$props" type="button"
|
||||
class="rounded-md duration-200 hover:shadow disabled:opacity-70 disabled:cursor-not-allowed px-3 py-2 text-sm font-semibold text-white shadow-sm">
|
||||
<button v-bind="$props" type="button" :disabled="loading"
|
||||
:class="['rounded-md duration-200 relative hover:shadow disabled:opacity-70 content-none disabled:cursor-not-allowed px-3 py-2 text-sm font-semibold text-white shadow-sm', loading && '[&>*]:invisible']">
|
||||
<div v-if="loading" class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 !visible">
|
||||
<Icon name="tabler:loader-2" class="animate-spin w-5 h-5" />
|
||||
</div>
|
||||
<slot />
|
||||
</button>
|
||||
</template>
|
||||
|
|
@ -10,7 +13,11 @@ import type { ButtonHTMLAttributes } from "vue";
|
|||
|
||||
interface Props extends /* @vue-ignore */ ButtonHTMLAttributes {}
|
||||
|
||||
defineProps<Props>();
|
||||
defineProps<
|
||||
Props & {
|
||||
loading?: boolean;
|
||||
}
|
||||
>();
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<ButtonsBase class="bg-white/10 hover:bg-white/20">
|
||||
<ButtonsBase class="bg-white/10 hover:bg-white/20" :loading="loading">
|
||||
<slot />
|
||||
</ButtonsBase>
|
||||
</template>
|
||||
|
|
@ -9,7 +9,11 @@ import type { ButtonHTMLAttributes } from "vue";
|
|||
|
||||
interface Props extends /* @vue-ignore */ ButtonHTMLAttributes {}
|
||||
|
||||
defineProps<Props>();
|
||||
defineProps<
|
||||
Props & {
|
||||
loading?: boolean;
|
||||
}
|
||||
>();
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue