Skip to content

Commit

Permalink
feat: use global focusin/focusout listener instead of per element
Browse files Browse the repository at this point in the history 
Signed-off-by: Alexander Trost <[email protected]>
  • Loading branch information
@galexrt
galexrt committed Sep 4, 2024
1 parent d2f6b0a commit 38e4b2c
Show file tree
Hide file tree
Showing 84 changed files with 143 additions and 647 deletions.
22 changes: 19 additions & 3 deletions app/app.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,16 +66,32 @@ const onBeforeEnter = async () => {
await finalizePendingLocaleChange();
};

// NUI message handling
onMounted(async () => {
if (import.meta.client && isNUIAvailable.value) {
if (!import.meta.client) {
return;
}

if (isNUIAvailable.value) {
// NUI message handling
window.addEventListener('message', onNUIMessage);
}

window.addEventListener('focusin', onFocusHandler, true);
window.addEventListener('focusout', onFocusHandler, true);
});

onBeforeUnmount(async () => {
if (import.meta.client && isNUIAvailable.value) {
if (!import.meta.client) {
return;
}

if (isNUIAvailable.value) {
// NUI message handling
window.removeEventListener('message', onNUIMessage);
}

window.removeEventListener('focusin', onFocusHandler);
window.removeEventListener('focusout', onFocusHandler);
});

watch(updateAvailable, async () => {
Expand Down
11 changes: 1 addition & 10 deletions app/components/auth/ForgotPasswordForm.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,20 +75,11 @@ const onSubmitThrottle = useThrottleFn(async (event: FormSubmitEvent<Schema>) =>
pattern="[0-9]*"
autocomplete="registrationToken"
:placeholder="$t('components.auth.ForgotPassword.registration_token')"
@focusin="focusTablet(true)"
@focusout="focusTablet(false)"
/>
</UFormGroup>

<UFormGroup name="password" :label="$t('common.password')">
<UInput
v-model="state.password"
type="password"
autocomplete="new-password"
:placeholder="$t('common.password')"
@focusin="focusTablet(true)"
@focusout="focusTablet(false)"
/>
<UInput v-model="state.password" type="password" autocomplete="new-password" :placeholder="$t('common.password')" />
<PasswordStrengthMeter :input="state.password" class="mt-2" />
</UFormGroup>

Expand Down
11 changes: 1 addition & 10 deletions app/components/auth/LoginForm.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,14 +47,7 @@ watch(hasCookiesAccepted, () => (socialLoginEnabled.value = hasCookiesAccepted.v
<template>
<UForm :schema="schema" :state="state" class="space-y-4" @submit="onSubmitThrottle">
<UFormGroup name="username" :label="$t('common.username')">
<UInput
v-model="state.username"
type="text"
autocomplete="username"
:placeholder="$t('common.username')"
@focusin="focusTablet(true)"
@focusout="focusTablet(false)"
/>
<UInput v-model="state.username" type="text" autocomplete="username" :placeholder="$t('common.username')" />
</UFormGroup>

<UFormGroup name="password" :label="$t('common.password')">
Expand All @@ -63,8 +56,6 @@ watch(hasCookiesAccepted, () => (socialLoginEnabled.value = hasCookiesAccepted.v
type="password"
autocomplete="current-password"
:placeholder="$t('common.password')"
@focusin="focusTablet(true)"
@focusout="focusTablet(false)"
/>
</UFormGroup>

Expand Down
13 changes: 1 addition & 12 deletions app/components/auth/RegistrationForm.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,20 +82,11 @@ const onSubmitThrottle = useThrottleFn(async (event: FormSubmitEvent<Schema>) =>
pattern="[0-9]*"
autocomplete="registrationToken"
:placeholder="$t('components.auth.ForgotPassword.registration_token')"
@focusin="focusTablet(true)"
@focusout="focusTablet(false)"
/>
</UFormGroup>

<UFormGroup name="username" :label="$t('common.username')">
<UInput
v-model="state.username"
type="text"
autocomplete="username"
:placeholder="$t('common.username')"
@focusin="focusTablet(true)"
@focusout="focusTablet(false)"
/>
<UInput v-model="state.username" type="text" autocomplete="username" :placeholder="$t('common.username')" />
</UFormGroup>

<UFormGroup name="password" :label="$t('common.password')">
Expand All @@ -104,8 +95,6 @@ const onSubmitThrottle = useThrottleFn(async (event: FormSubmitEvent<Schema>) =>
type="password"
autocomplete="new-password"
:placeholder="$t('common.password')"
@focusin="focusTablet(true)"
@focusout="focusTablet(false)"
/>
<PasswordStrengthMeter :input="state.password" class="mt-2" />
</UFormGroup>
Expand Down
4 changes: 0 additions & 4 deletions app/components/auth/account/ChangePasswordModal.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,8 +76,6 @@ const onSubmitThrottle = useThrottleFn(async (event: FormSubmitEvent<Schema>) =>
type="password"
autocomplete="current-password"
:placeholder="$t('components.auth.ChangePasswordModal.current_password')"
@focusin="focusTablet(true)"
@focusout="focusTablet(false)"
/>
</UFormGroup>

Expand All @@ -88,8 +86,6 @@ const onSubmitThrottle = useThrottleFn(async (event: FormSubmitEvent<Schema>) =>
type="password"
autocomplete="new-password"
:placeholder="$t('components.auth.ChangePasswordModal.new_password')"
@focusin="focusTablet(true)"
@focusout="focusTablet(false)"
/>
<PasswordStrengthMeter :input="state.newPassword" class="mt-2" />
</UFormGroup>
Expand Down
4 changes: 0 additions & 4 deletions app/components/auth/account/ChangeUsernameModal.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,8 +81,6 @@ const onSubmitThrottle = useThrottleFn(async (event: FormSubmitEvent<Schema>) =>
type="text"
autocomplete="current-username"
:placeholder="$t('components.auth.ChangeUsernameModal.current_username')"
@focusin="focusTablet(true)"
@focusout="focusTablet(false)"
/>
</UFormGroup>

Expand All @@ -92,8 +90,6 @@ const onSubmitThrottle = useThrottleFn(async (event: FormSubmitEvent<Schema>) =>
type="text"
autocomplete="new-username"
:placeholder="$t('components.auth.ChangeUsernameModal.new_username')"
@focusin="focusTablet(true)"
@focusout="focusTablet(false)"
/>
</UFormGroup>
</UForm>
Expand Down
15 changes: 1 addition & 14 deletions app/components/auth/account/UserSettingsPanel.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,8 +78,6 @@ watch(design.value, () => {
option-attribute="label"
value-attribute="chip"
:searchable-placeholder="$t('common.search_field')"
@focusin="focusTablet(true)"
@focusout="focusTablet(false)"
>
<template #label>
<span
Expand Down Expand Up @@ -108,8 +106,6 @@ watch(design.value, () => {
option-attribute="label"
value-attribute="chip"
:searchable-placeholder="$t('common.search_field')"
@focusin="focusTablet(true)"
@focusout="focusTablet(false)"
>
<template #label>
<span class="size-2 rounded-full" :class="`bg-${design.ui.gray}-500 dark:bg-${design.ui.gray}-400`" />
Expand Down Expand Up @@ -169,8 +165,6 @@ watch(design.value, () => {
:options="homepages.filter((h) => h.permission === undefined || can(h.permission).value)"
option-attribute="name"
:searchable-placeholder="$t('common.search_field')"
@focusin="focusTablet(true)"
@focusout="focusTablet(false)"
/>
<p v-else class="text-sm">
{{ $t('components.auth.UserSettingsPanel.set_startpage.no_char_selected') }}
Expand All @@ -189,14 +183,7 @@ watch(design.value, () => {
:label="$t('components.auth.UserSettingsPanel.volumes.notifications_volume')"
class="grid grid-cols-2 items-center gap-2"
>
<URange
v-model="audio.notificationsVolume"
:step="0.01"
:min="0"
:max="1"
@focusin="focusTablet(true)"
@focusout="focusTablet(false)"
/>
<URange v-model="audio.notificationsVolume" :step="0.01" :min="0" :max="1" />
{{ audio.notificationsVolume <= 0 ? 0 : (audio.notificationsVolume * 100).toFixed(0) }}%
</UFormGroup>
</UDashboardSection>
Expand Down
19 changes: 1 addition & 18 deletions app/components/calendar/CalendarAccessEntry.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -168,23 +168,14 @@ watch(selectedAccessRole, () => {
<template>
<div class="my-2 flex flex-row items-center gap-1">
<UFormGroup class="w-60 flex-initial">
<UInput
v-if="accessTypes.length === 1"
type="text"
disabled
:value="accessTypes[0]?.name"
@focusin="focusTablet(true)"
@focusout="focusTablet(false)"
/>
<UInput v-if="accessTypes.length === 1" type="text" disabled :value="accessTypes[0]?.name" />
<USelectMenu
v-else
v-model="selectedAccessType"
:disabled="readOnly"
:options="accessTypes"
:placeholder="$t('common.type')"
:searchable-placeholder="$t('common.search_field')"
@focusin="focusTablet(true)"
@focusout="focusTablet(false)"
>
<template #label>
<span v-if="selectedAccessType" class="truncate">{{ selectedAccessType.name }}</span>
Expand Down Expand Up @@ -213,8 +204,6 @@ watch(selectedAccessRole, () => {
:options="jobs ?? []"
:placeholder="$t('common.job')"
:searchable-placeholder="$t('common.search_field')"
@focusin="focusTablet(true)"
@focusout="focusTablet(false)"
>
<template #option-empty="{ query: search }">
<q>{{ search }}</q> {{ $t('common.query_not_found') }}
Expand All @@ -234,8 +223,6 @@ watch(selectedAccessRole, () => {
:options="selectedJob?.grades"
:placeholder="$t('common.rank')"
:searchable-placeholder="$t('common.search_field')"
@focusin="focusTablet(true)"
@focusout="focusTablet(false)"
>
<template #option-empty="{ query: search }">
<q>{{ search }}</q> {{ $t('common.query_not_found') }}
Expand Down Expand Up @@ -266,8 +253,6 @@ watch(selectedAccessRole, () => {
:placeholder="$t('common.citizen', 1)"
trailing
by="userId"
@focusin="focusTablet(true)"
@focusout="focusTablet(false)"
>
<template #label>
<template v-if="selectedUser">
Expand Down Expand Up @@ -296,8 +281,6 @@ watch(selectedAccessRole, () => {
:options="entriesAccessRoles"
:placeholder="$t('common.na')"
:searchable-placeholder="$t('common.search_field')"
@focusin="focusTablet(true)"
@focusout="focusTablet(false)"
>
<template #option-empty="{ query: search }">
<q>{{ search }}</q> {{ $t('common.query_not_found') }}
Expand Down
19 changes: 2 additions & 17 deletions app/components/calendar/CalendarCreateOrUpdateModal.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -309,14 +309,7 @@ const onSubmitThrottle = useThrottleFn(async (event: FormSubmitEvent<Schema>) =>

<template v-else>
<UFormGroup name="title" :label="$t('common.name')" class="flex-1" required>
<UInput
v-model="state.name"
name="name"
type="text"
:placeholder="$t('common.name')"
@focusin="focusTablet(true)"
@focusout="focusTablet(false)"
/>
<UInput v-model="state.name" name="name" type="text" :placeholder="$t('common.name')" />
</UFormGroup>

<UFormGroup name="color" :label="$t('common.color')" class="flex-1">
Expand All @@ -327,8 +320,6 @@ const onSubmitThrottle = useThrottleFn(async (event: FormSubmitEvent<Schema>) =>
option-attribute="label"
value-attribute="chip"
:searchable-placeholder="$t('common.search_field')"
@focusin="focusTablet(true)"
@focusout="focusTablet(false)"
>
<template #label>
<span
Expand All @@ -349,13 +340,7 @@ const onSubmitThrottle = useThrottleFn(async (event: FormSubmitEvent<Schema>) =>
</UFormGroup>

<UFormGroup name="description" :label="$t('common.description')" class="flex-1">
<UTextarea
v-model="state.description"
name="description"
:placeholder="$t('common.description')"
@focusin="focusTablet(true)"
@focusout="focusTablet(false)"
/>
<UTextarea v-model="state.description" name="description" :placeholder="$t('common.description')" />
</UFormGroup>

<UFormGroup
Expand Down
7 changes: 2 additions & 5 deletions app/components/calendar/entry/EntryCreateOrUpdateModal.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -196,7 +196,6 @@ const onSubmitThrottle = useThrottleFn(async (event: FormSubmitEvent<Schema>) =>
option-attribute="name"
by="id"
:placeholder="$t('common.calendar')"
@focusin="focusTablet(true)"
@focusout="focusTablet(false)"
>
<template #label>
Expand Down Expand Up @@ -232,10 +231,9 @@ const onSubmitThrottle = useThrottleFn(async (event: FormSubmitEvent<Schema>) =>
name="title"
type="text"
:placeholder="$t('common.title')"
@focusin="focusTablet(true)"
@focusout="focusTablet(false)"
/>
</UFormGroup>
</UFormG

<UFormGroup name="startTime" :label="$t('common.begins_at')" class="flex-1" required>
<DatePickerPopoverClient
Expand Down Expand Up @@ -288,11 +286,10 @@ const onSubmitThrottle = useThrottleFn(async (event: FormSubmitEvent<Schema>) =>
:placeholder="$t('common.citizen', 2)"
trailing
by="userId"
@focusin="focusTablet(true)"
@focusout="focusTablet(false)"
>
<template #option="{ option: user }">
{{ `${user?.firstname} ${user?.lastname} (${user?.dateofbirth})` }}
ser?.lastname} (${user?.dateofbirth})` }}
</template>
<template #option-empty="{ query: search }">
<q>{{ search }}</q> {{ $t('common.query_not_found') }}
Expand Down
2 changes: 0 additions & 2 deletions app/components/calendar/entry/EntryShareForm.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,8 +105,6 @@ const onSubmitThrottle = useThrottleFn(async (event: FormSubmitEvent<Schema>) =>
:placeholder="$t('common.citizen', 2)"
trailing
by="userId"
@focusin="focusTablet(true)"
@focusout="focusTablet(false)"
>
<template #option="{ option: user }">
{{ `${user?.firstname} ${user?.lastname} (${user?.dateofbirth})` }}
Expand Down
8 changes: 4 additions & 4 deletions app/components/centrum/dispatches/DispatchCreateOrUpdateSlideover.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,8 +114,8 @@ const onSubmitThrottle = useThrottleFn(async (event: FormSubmitEvent<Schema>) =>
type="text"
name="message"
:placeholder="$t('common.message')"
@focusin="focusTablet(true)"
@focusout="focusTablet(false)"


/>
</UFormGroup>
</dd>
Expand All @@ -133,8 +133,8 @@ const onSubmitThrottle = useThrottleFn(async (event: FormSubmitEvent<Schema>) =>
type="text"
name="description"
:placeholder="$t('common.description')"
@focusin="focusTablet(true)"
@focusout="focusTablet(false)"


/>
</UFormGroup>
</dd>
Expand Down
12 changes: 6 additions & 6 deletions app/components/centrum/dispatches/DispatchStatusUpdateModal.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -151,8 +151,8 @@ function updateReasonField(value: string): void {
type="text"
name="code"
:placeholder="$t('common.code')"
@focusin="focusTablet(true)"
@focusout="focusTablet(false)"


/>
</UFormGroup>
</dd>
Expand All @@ -170,8 +170,8 @@ function updateReasonField(value: string): void {
type="text"
name="reason"
:placeholder="$t('common.reason')"
@focusin="focusTablet(true)"
@focusout="focusTablet(false)"


/>
</UFormGroup>
</dd>
Expand All @@ -192,8 +192,8 @@ function updateReasonField(value: string): void {
name="dispatchStatus"
:options="['&nbsp;', ...settings?.predefinedStatus.dispatchStatus]"
:searchable-placeholder="$t('common.search_field')"
@focusin="focusTablet(true)"
@focusout="focusTablet(false)"


@change="updateReasonField($event)"
>
<template #option="{ option }">
Expand Down
Loading

0 comments on commit 38e4b2c

Please sign in to comment.