From e9a79dfaf8e6834178d476377b76613218a9c2d8 Mon Sep 17 00:00:00 2001
From: upsiflu <upsiflu@gmail.com>
Date: Thu, 2 Jan 2025 11:27:49 +0100
Subject: [PATCH] feat(ui): implement autofocus prop on input and link

---
 front/src/components/auth/LoginForm.vue |  6 ------
 front/src/components/ui/Input.vue       | 10 +++++++++-
 front/src/components/ui/Link.vue        | 11 ++++++++++-
 front/src/composables/alignment.ts      | 10 +++++-----
 front/src/ui/components/Sidebar.vue     |  2 +-
 front/src/views/auth/PasswordReset.vue  |  5 +----
 6 files changed, 26 insertions(+), 18 deletions(-)

diff --git a/front/src/components/auth/LoginForm.vue b/front/src/components/auth/LoginForm.vue
index 1fe3f2e7f..a6bf4d8a5 100644
--- a/front/src/components/auth/LoginForm.vue
+++ b/front/src/components/auth/LoginForm.vue
@@ -48,12 +48,6 @@ const labels = computed(() => ({
   usernamePlaceholder: t('components.auth.LoginForm.placeholder.username')
 }))
 
-const username = ref()
-onMounted(async () => {
-  await nextTick()
-  username.value?.focus()
-})
-
 const isLoading = ref(false)
 const errors = ref([] as string[])
 const submit = async () => {
diff --git a/front/src/components/ui/Input.vue b/front/src/components/ui/Input.vue
index 33944b975..3c791eb6f 100644
--- a/front/src/components/ui/Input.vue
+++ b/front/src/components/ui/Input.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n';
 import onKeyboardShortcut from '~/composables/onKeyboardShortcut';
 
@@ -13,6 +13,8 @@ const { icon, placeholder, ...restProps } = defineProps<{
   search?: true,
   numeric?: true,
   label?: string,
+
+  autofocus? : boolean
 }>()
 
 // TODO(A11y): Add `inputmode="numeric" pattern="[0-9]*"` to input if model type is number:
@@ -34,6 +36,12 @@ const attributes = computed(() => ({
 
 const { t } = useI18n()
 
+const input = ref()
+
+onMounted(() => {
+  if (restProps.autofocus) input.value.focus();
+})
+
 const model = defineModel<string|number>()
 </script>
 
diff --git a/front/src/components/ui/Link.vue b/front/src/components/ui/Link.vue
index 795641fb4..086954710 100644
--- a/front/src/components/ui/Link.vue
+++ b/front/src/components/ui/Link.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 
 import { type RouterLinkProps } from 'vue-router'
 import { type ColorProps, type DefaultProps, type VariantProps, color, isNoColors } from '~/composables/color';
@@ -13,6 +13,8 @@ const props = defineProps<{
 
   icon?: string;
   round?: true;
+
+  autofocus? : boolean
 } & RouterLinkProps
   & (ColorProps | DefaultProps)
   & VariantProps
@@ -26,6 +28,12 @@ const isExternalLink = computed(() =>
 const [fontWeight, activeFontWeight] = props.thickWhenActive ? [600, 900] : [400, 400]
 
 const isIconOnly = computed(() => !!props.icon)
+
+const button = ref()
+
+onMounted(() => {
+  if (props.autofocus) button.value.focus();
+})
 </script>
 
 <template>
@@ -34,6 +42,7 @@ const isIconOnly = computed(() => !!props.icon)
             width(props)(
             align(props)(
             )))"
+    ref="button"
     :class="[
       $style.link,
       round && $style['is-round'],
diff --git a/front/src/composables/alignment.ts b/front/src/composables/alignment.ts
index 91085f702..4c215953d 100644
--- a/front/src/composables/alignment.ts
+++ b/front/src/composables/alignment.ts
@@ -31,13 +31,13 @@ const styles = {
 } as const;
 
 const getStyle = (props : Partial<AlignmentProps>) => ([key, value]: Entry<AlignmentProps>) =>
-  (trace(`getStyle: key=${key}, value=${value}`),
+  (
   typeof styles[key] === 'function' ?
-    (trace(`getStyle: key=${key}, value=${value}`), styles[key](
+    (styles[key](
       // We know that props[key] is a value accepted by styles[key]. The ts compiler is not so smart.
       // @ts-ignore
       (key in props && props[key]) ?
-        props[(trace(props[key]), trace(key))]
+        props[((props[key]), (key))]
       : value
     ))
   : styles[key]
@@ -73,14 +73,14 @@ export const align = <TProps extends Partial<AlignmentProps>>(
   props: TProps,
   defaults: Partial<AlignmentProps> = {}
 ) => merge (
-  trace((Object.entries(props) as Entries<TProps>).reduce(
+  ((Object.entries(props) as Entries<TProps>).reduce(
     ((acc, [key, value]) =>
       value && key in styles ?
         acc.filter(([accKey, _]) => !conflicts.find(set => set.has(accKey) && set.has(key)))
           .concat([[key, value]])
         : acc
     ),
-    trace(Object.entries(defaults)) as Entries<Partial<AlignmentProps>>
+    (Object.entries(defaults)) as Entries<Partial<AlignmentProps>>
   )).map(getStyle(props))
 )
 
diff --git a/front/src/ui/components/Sidebar.vue b/front/src/ui/components/Sidebar.vue
index 7832bd43d..c6749891d 100644
--- a/front/src/ui/components/Sidebar.vue
+++ b/front/src/ui/components/Sidebar.vue
@@ -91,7 +91,7 @@ const logoUrl = computed(() => store.state.auth.authenticated ? 'library.index'
 
 <!-- Sign up, Log in -->
       <div style="display:contents;" v-if="!store.state.auth.authenticated">
-        <Layout flex grow no-gap>
+        <Layout flex grow style="--gap:16px;">
           <Link :to="{ name: 'login' }"
             solid
             icon="bi-box-arrow-in-right"
diff --git a/front/src/views/auth/PasswordReset.vue b/front/src/views/auth/PasswordReset.vue
index 948a1ba83..5b28393b9 100644
--- a/front/src/views/auth/PasswordReset.vue
+++ b/front/src/views/auth/PasswordReset.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { BackendError } from '~/types'
 
-import { computed, ref, onMounted } from 'vue'
+import { computed, ref, onMounted, nextTick } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 
@@ -44,9 +44,6 @@ const submit = async () => {
 
   isLoading.value = false
 }
-
-const emailInput = ref()
-onMounted(() => emailInput.value.focus())
 </script>
 
 <template>