style: add eslint rules (#6683)

.eslintrc.yml

@@ -4,6 +4,8 @@ env:
 extends:
   - eslint:recommended
   - plugin:vue/vue3-essential
+  - plugin:vue/vue3-strongly-recommended
+  - plugin:vue/vue3-recommended
   - prettier
 parserOptions:
   ecmaVersion: latest
@@ -47,3 +49,8 @@ rules:
       multiline: 6
   vue/singleline-html-element-content-newline: 0
   vue/no-deprecated-events-api: 0
+  vue/require-default-prop: 0
+  vue/attributes-order: 0
+  vue/next-tick-style: # https://eslint.vuejs.org/rules/next-tick-style.html
+    - error
+    - promise

app/Actions/Fortify/TwoFactorChallengeView.php

@@ -26,7 +26,7 @@ class TwoFactorChallengeView implements TwoFactorChallengeViewContract
         }
 
         return Inertia::render('Auth/TwoFactorChallenge', $data + [
-            'two_factor' => optional($user)->two_factor_secret && ! is_null(optional($user)->two_factor_confirmed_at),
+            'twoFactor' => optional($user)->two_factor_secret && ! is_null(optional($user)->two_factor_confirmed_at),
             'remember' => $request->session()->get('login.remember'),
         ])->toResponse($request);
     }

resources/js/Components/Jetstream/ActionSection.vue

@@ -12,7 +12,7 @@ defineProps({
 
 <template>
   <div>
-    <JetSectionTitle :editMode="true">
+    <JetSectionTitle :edit-mode="true">
       <template #title>
         <slot name="title" />
       </template>

resources/js/Components/Jetstream/FormSection.vue

@@ -20,7 +20,7 @@ const submit = () => {
 
 <template>
   <div>
-    <JetSectionTitle :editMode="editMode" @edit="editMode = true">
+    <JetSectionTitle :edit-mode="editMode" @edit="editMode = true">
       <template #title>
         <slot name="title" />
       </template>

resources/js/Components/Uploadcare.vue

@@ -86,6 +86,9 @@ export default {
       type: Array,
     },
   },
+
+  emits: ['success', 'error'],
+
   methods: {
     onClick() {
       const {

resources/js/Pages/Auth/TwoFactorChallenge.vue

@@ -38,7 +38,7 @@ const submit = () => {
 };
 
 defineProps({
-  two_factor: Boolean,
+  twoFactor: Boolean,
   remember: Boolean,
   publicKey: Object,
 });
@@ -57,10 +57,10 @@ defineProps({
         {{ $t('Please confirm access to your account by validating your security key.') }}
       </h1>
 
-      <WebauthnLogin :remember="remember" :publicKey="publicKey" />
+      <WebauthnLogin :remember="remember" :public-key="publicKey" />
     </div>
 
-    <div v-if="two_factor">
+    <div v-if="twoFactor">
       <div class="mb-4 text-sm text-gray-600 dark:text-gray-400">
         <template v-if="!recovery">
           {{

resources/js/Pages/Profile/Show.vue

@@ -25,7 +25,7 @@ const providersExists = computed(() => size(props.providers) > 0);
 </script>
 
 <template>
-  <Layout :layoutData="layoutData">
+  <Layout :layout-data="layoutData">
     <template #header>
       <Breadcrumb
         :items="[
@@ -50,7 +50,7 @@ const providersExists = computed(() => size(props.providers) > 0);
         </div>
 
         <div class="mb-16" v-if="providersExists">
-          <UpdateProviders :user="$page.props.user" :providers="providers" :userTokens="userTokens" />
+          <UpdateProviders :user="$page.props.user" :providers="providers" :user-tokens="userTokens" />
         </div>
 
         <div class="mb-16" v-if="$page.props.jetstream.canManageTwoFactorAuthentication">
@@ -58,7 +58,7 @@ const providersExists = computed(() => size(props.providers) > 0);
         </div>
 
         <div class="mb-16">
-          <WebauthnKeys :webauthnKeys="webauthnKeys" />
+          <WebauthnKeys :webauthn-keys="webauthnKeys" />
         </div>
 
         <div class="mb-16">

resources/js/Pages/Settings/Notifications/Partials/Emails.vue

@@ -227,12 +227,6 @@ export default {
     };
   },
 
-  mounted() {
-    this.localEmails = this.data.emails;
-    this.form.hours = '09';
-    this.form.minutes = '00';
-  },
-
   computed: {
     hours() {
       let result = [];
@@ -252,13 +246,19 @@ export default {
     },
   },
 
+  mounted() {
+    this.localEmails = this.data.emails;
+    this.form.hours = '09';
+    this.form.minutes = '00';
+  },
+
   methods: {
     showAddEmailModal() {
       this.form.label = '';
       this.form.content = '';
       this.addEmailModalShown = true;
 
-      this.$nextTick(() => {
+      this.$nextTick().then(() => {
         this.$refs.content.focus();
       });
     },

resources/js/Pages/Settings/Notifications/Partials/Telegram.vue

@@ -29,11 +29,11 @@
             {{ $t('At') }}
           </span>
 
-          <Dropdown v-model="form.hours" dropdownClass="me-1" :required="required" :data="hours" />
+          <Dropdown v-model="form.hours" dropdown-class="me-1" :required="required" :data="hours" />
 
           <span class="me-2">:</span>
 
-          <Dropdown v-model="form.minutes" dropdownClass="me-1" :required="required" :data="minutes" />
+          <Dropdown v-model="form.minutes" dropdown-class="me-1" :required="required" :data="minutes" />
         </div>
       </div>
 
@@ -195,13 +195,6 @@ export default {
     };
   },
 
-  mounted() {
-    this.localTelegram = this.data.telegram.data;
-    this.envVariableSet = this.data.telegram.telegram_env_variable_set;
-    this.form.hours = '09';
-    this.form.minutes = '00';
-  },
-
   computed: {
     hours() {
       let result = [];
@@ -221,6 +214,13 @@ export default {
     },
   },
 
+  mounted() {
+    this.localTelegram = this.data.telegram.data;
+    this.envVariableSet = this.data.telegram.telegram_env_variable_set;
+    this.form.hours = '09';
+    this.form.minutes = '00';
+  },
+
   methods: {
     showSetupTelegramModal() {
       this.form.label = '';

resources/js/Pages/Settings/Personalize/AddressTypes/Index.vue

@@ -203,7 +203,7 @@ export default {
       this.createAddressTypeModalShown = true;
       this.renameAddressTypeModalShownId = 0;
 
-      this.$nextTick(() => {
+      this.$nextTick().then(() => {
         this.$refs.newAddressType.focus();
       });
     },
@@ -213,7 +213,7 @@ export default {
       this.renameAddressTypeModalShownId = addressType.id;
       this.createAddressTypeModalShown = false;
 
-      this.$nextTick(() => {
+      this.$nextTick().then(() => {
         this.$refs.rename[0].focus();
       });
     },

resources/js/Pages/Settings/Personalize/CallReasons/Index.vue

@@ -320,7 +320,7 @@ export default {
       this.createCallReasonTypeModalShown = true;
       this.renameCallReasonTypeModalShownId = 0;
 
-      this.$nextTick(() => {
+      this.$nextTick().then(() => {
         this.$refs.newCallReasonType.focus();
       });
     },
@@ -330,7 +330,7 @@ export default {
       this.renameCallReasonTypeModalShownId = callReasonType.id;
       this.createCallReasonTypeModalShown = false;
 
-      this.$nextTick(() => {
+      this.$nextTick().then(() => {
         this.$refs.renameCallReasonType[0].focus();
       });
     },
@@ -339,7 +339,7 @@ export default {
       this.createReasonModalId = callReasonType.id;
       this.form.label = '';
 
-      this.$nextTick(() => {
+      this.$nextTick().then(() => {
         this.$refs.newReason[0].focus();
       });
     },
@@ -348,7 +348,7 @@ export default {
       this.form.label = reason.label;
       this.renameReasonModalId = reason.id;
 
-      this.$nextTick(() => {
+      this.$nextTick().then(() => {
         this.$refs.rename[0].focus();
       });
     },

resources/js/Pages/Settings/Personalize/ContactInformationTypes/Index.vue

@@ -258,7 +258,7 @@ export default {
       this.createContactInformationTypeModalShown = true;
       this.renameContactInformationTypeModalShownId = 0;
 
-      this.$nextTick(() => {
+      this.$nextTick().then(() => {
         this.$refs.newContactInformationType.focus();
       });
     },
@@ -269,7 +269,7 @@ export default {
       this.renameContactInformationTypeModalShownId = contactInformationType.id;
       this.createContactInformationTypeModalShown = false;
 
-      this.$nextTick(() => {
+      this.$nextTick().then(() => {
         this.$refs.rename[0].focus();
       });
     },

resources/js/Pages/Settings/Personalize/Genders/Index.vue

@@ -201,7 +201,7 @@ export default {
       this.createGenderModalShown = true;
       this.renameGenderModalShownId = 0;
 
-      this.$nextTick(() => {
+      this.$nextTick().then(() => {
         this.$refs.newGender.focus();
       });
     },
@@ -211,7 +211,7 @@ export default {
       this.renameGenderModalShownId = gender.id;
       this.createGenderModalShown = false;
 
-      this.$nextTick(() => {
+      this.$nextTick().then(() => {
         this.$refs.rename[0].focus();
       });
     },

resources/js/Pages/Settings/Personalize/GiftStates/Index.vue

@@ -231,7 +231,7 @@ export default {
       this.createGiftStateModalShown = true;
       this.editGiftStateId = 0;
 
-      this.$nextTick(() => {
+      this.$nextTick().then(() => {
         this.$refs.newGiftState.focus();
       });
     },

resources/js/Pages/Settings/Personalize/GroupTypes/Index.vue

@@ -169,8 +169,8 @@
                       :component-data="{ name: 'fade' }"
                       handle=".handle"
                       @change="updatePosition">
-                      <template #item="{ element, id }">
-                        <div v-if="editRoleId !== element.id" class="">
+                      <template #item="{ element2, id }">
+                        <div v-if="editRoleId !== element2.id" class="">
                           <div
                             class="item-list mb-2 rounded-lg border border-gray-200 bg-white py-2 pe-5 ps-4 hover:bg-slate-50 dark:border-gray-700 dark:bg-gray-900 hover:dark:bg-slate-800">
                             <div class="flex items-center justify-between">
@@ -194,17 +194,17 @@
                                   <path d="M17 15H15V17H17V15Z" fill="currentColor" />
                                 </svg>
 
-                                <span>{{ element.label }}</span>
+                                <span>{{ element2.label }}</span>
                               </div>
 
                               <!-- actions -->
                               <ul class="text-sm">
-                                <li class="inline cursor-pointer" @click="renameRoleModal(id, element)">
+                                <li class="inline cursor-pointer" @click="renameRoleModal(id, element2)">
                                   <span class="text-blue-500 hover:underline">{{ $t('Rename') }}</span>
                                 </li>
                                 <li
                                   class="ms-4 inline cursor-pointer text-red-500 hover:text-red-900"
-                                  @click="destroyRole(element)">
+                                  @click="destroyRole(element2)">
                                   {{ $t('Delete') }}
                                 </li>
                               </ul>
@@ -216,7 +216,7 @@
                         <form
                           v-else
                           class="mb-6 rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900"
-                          @submit.prevent="updateRole(element)">
+                          @submit.prevent="updateRole(element2)">
                           <div class="border-b border-gray-200 p-5 dark:border-gray-700">
                             <errors :errors="form.errors" />
 
@@ -417,7 +417,7 @@ export default {
       this.editGroupTypeId = 0;
       this.editRoleId = 0;
 
-      this.$nextTick(() => {
+      this.$nextTick().then(() => {
         this.$refs.newGroupType.focus();
       });
     },
@@ -431,7 +431,7 @@ export default {
       this.editRoleId = 0;
       this.createGroupTypeModalShown = false;
 
-      this.$nextTick(() => {
+      this.$nextTick().then(() => {
         this.$refs.newRole.focus();
       });
     },

resources/js/Pages/Settings/Personalize/PetCategories/Index.vue

@@ -205,7 +205,7 @@ export default {
       this.createPetCategoryModalShown = true;
       this.renamePetCategoryModalShownId = 0;
 
-      this.$nextTick(() => {
+      this.$nextTick().then(() => {
         this.$refs.newPetCategory.focus();
       });
     },
@@ -215,7 +215,7 @@ export default {
       this.renamePetCategoryModalShownId = petCategory.id;
       this.createPetCategoryModalShown = false;
 
-      this.$nextTick(() => {
+      this.$nextTick().then(() => {
         this.$refs.rename[0].focus();
       });
     },

resources/js/Pages/Settings/Personalize/PostTemplates/Index.vue

@@ -172,8 +172,8 @@
                       :component-data="{ name: 'fade' }"
                       handle=".handle"
                       @change="updatePosition">
-                      <template #item="{ element, id }">
-                        <div v-if="editSectionId !== element.id" class="">
+                      <template #item="{ element2, id }">
+                        <div v-if="editSectionId !== element2.id" class="">
                           <div
                             class="item-list mb-2 rounded-lg border border-gray-200 bg-white py-2 pe-5 ps-4 hover:bg-slate-50 dark:border-gray-700 dark:bg-gray-900 hover:dark:bg-slate-800">
                             <div class="flex items-center justify-between">
@@ -197,20 +197,20 @@
                                   <path d="M17 15H15V17H17V15Z" fill="currentColor" />
                                 </svg>
 
-                                <span>{{ element.label }}</span>
+                                <span>{{ element2.label }}</span>
                               </div>
 
                               <!-- actions -->
                               <ul class="text-sm">
                                 <li
                                   class="inline cursor-pointer text-blue-500 hover:underline"
-                                  @click="renameSectionModal(id, element)">
+                                  @click="renameSectionModal(id, element2)">
                                   <span class="text-blue-500 hover:underline">{{ $t('Rename') }}</span>
                                 </li>
                                 <li
-                                  v-if="element.can_be_deleted"
+                                  v-if="element2.can_be_deleted"
                                   class="ms-4 inline cursor-pointer text-red-500 hover:text-red-900"
-                                  @click="destroySection(element)">
+                                  @click="destroySection(element2)">
                                   {{ $t('Delete') }}
                                 </li>
                               </ul>
@@ -222,7 +222,7 @@
                         <form
                           v-else
                           class="mb-6 rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900"
-                          @submit.prevent="updateSection(element)">
+                          @submit.prevent="updateSection(element2)">
                           <div class="border-b border-gray-200 p-5 dark:border-gray-700">
                             <errors :errors="form.errors" />
 

resources/js/Pages/Settings/Personalize/Pronouns/Index.vue

@@ -54,7 +54,7 @@
           </h3>
           <pretty-button
             v-if="!createPronounModalShown"
-            :text="this.$t('Add a pronoun')"
+            :text="$t('Add a pronoun')"
             :icon="'plus'"
             @click="showPronounModal" />
         </div>
@@ -207,7 +207,7 @@ export default {
       this.createPronounModalShown = true;
       this.renamePronounModalShownId = 0;
 
-      this.$nextTick(() => {
+      this.$nextTick().then(() => {
         this.$refs.newPronoun.focus();
       });
     },
@@ -217,7 +217,7 @@ export default {
       this.renamePronounModalShownId = pronoun.id;
       this.createPronounModalShown = false;
 
-      this.$nextTick(() => {
+      this.$nextTick().then(() => {
         this.$refs.rename[0].focus();
       });
     },

resources/js/Pages/Settings/Personalize/Relationships/Index.vue

@@ -392,7 +392,7 @@ export default {
       this.createRelationshipTypeModalId = 0;
       this.renameRelationshipTypeModalId = 0;
 
-      this.$nextTick(() => {
+      this.$nextTick().then(() => {
         this.$refs.newGroupType.focus();
       });
     },
@@ -404,7 +404,7 @@ export default {
       this.createRelationshipTypeModalId = 0;
       this.renameRelationshipTypeModalId = 0;
 
-      this.$nextTick(() => {
+      this.$nextTick().then(() => {
         this.$refs.renameGroupType[0].focus();
       });
     },
@@ -417,7 +417,7 @@ export default {
       this.renameRelationshipGroupTypeModalShownId = 0;
       this.createRelationshipGroupTypeModalShown = false;
 
-      this.$nextTick(() => {
+      this.$nextTick().then(() => {
         this.$refs.newRelationshipType[0].focus();
       });
     },
@@ -430,7 +430,7 @@ export default {
       this.renameRelationshipGroupTypeModalShownId = 0;
       this.createRelationshipGroupTypeModalShown = false;
 
-      this.$nextTick(() => {
+      this.$nextTick().then(() => {
         this.$refs.rename[0].focus();
       });
     },

resources/js/Pages/Settings/Personalize/Templates/Index.vue

@@ -240,7 +240,7 @@ export default {
       this.createTemplateModalShown = true;
       this.renameTemplateModalShownId = 0;
 
-      this.$nextTick(() => {
+      this.$nextTick().then(() => {
         this.$refs.newTemplate.focus();
       });
     },
@@ -250,7 +250,7 @@ export default {
       this.renameTemplateModalShownId = template.id;
       this.createTemplateModalShown = false;
 
-      this.$nextTick(() => {
+      this.$nextTick().then(() => {
         this.$refs.rename[0].focus();
       });
     },

resources/js/Pages/Settings/Personalize/Templates/Partials/Pages.vue

@@ -170,6 +170,8 @@ export default {
     },
   },
 
+  emits: ['pageSelected'],
+
   data() {
     return {
       drag: false,
@@ -207,7 +209,7 @@ export default {
       this.form.name = '';
       this.createPageModalShown = true;
 
-      this.$nextTick(() => {
+      this.$nextTick().then(() => {
         this.$refs.newPage.focus();
       });
     },
@@ -216,7 +218,7 @@ export default {
       this.form.name = page.name;
       this.renamePageModalShownId = page.id;
 
-      this.$nextTick(() => {
+      this.$nextTick().then(() => {
         this.$refs.rename[0].focus();
       });
     },

resources/js/Pages/Settings/Preferences/Partials/NumberFormat.vue

@@ -87,11 +87,6 @@ export default {
     };
   },
 
-  mounted() {
-    this.localNumberFormat = this.data.number_format;
-    this.form.numberFormat = this.data.number_format;
-  },
-
   computed: {
     currentFormat() {
       let index = _.findIndex(this.data.numbers, (f) => f.value === this.localNumberFormat);
@@ -99,6 +94,11 @@ export default {
     },
   },
 
+  mounted() {
+    this.localNumberFormat = this.data.number_format;
+    this.form.numberFormat = this.data.number_format;
+  },
+
   methods: {
     enableEditMode() {
       this.editMode = true;

resources/js/Pages/Vault/Calendar/Index.vue

@@ -137,8 +137,8 @@ const get = (day) => {
                   <div v-for="date in day.important_dates" :key="date.id">
                     <contact-card
                       :contact="date.contact"
-                      :avatarClasses="'h-5 w-5 rounded-full me-2'"
-                      :displayName="false" />
+                      :avatar-classes="'h-5 w-5 rounded-full me-2'"
+                      :display-name="false" />
                   </div>
                 </div>
 
@@ -223,8 +223,8 @@ const get = (day) => {
                   <span
                     ><contact-card
                       :contact="importantDate.contact"
-                      :avatarClasses="'h-5 w-5 rounded-full me-2'"
-                      :displayName="false"
+                      :avatar-classes="'h-5 w-5 rounded-full me-2'"
+                      :display-name="false"
                   /></span>
                 </li>
               </ul>

resources/js/Pages/Vault/Contact/Goals/Show.vue

@@ -186,7 +186,7 @@ export default {
       this.editMode = true;
       this.form.name = this.localGoal.name;
 
-      this.$nextTick(() => {
+      this.$nextTick().then(() => {
         this.$refs.newName.focus();
       });
     },

resources/js/Pages/Vault/Contact/Relationships/Create.vue

@@ -64,7 +64,7 @@
               v-model="form.relationship_type_id"
               name="types"
               class="w-full rounded-md border-gray-300 bg-white px-3 py-2 shadow-sm focus:border-indigo-300 focus:outline-none focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-900 sm:text-sm"
-              @update:modelValue="load"
+              @update:model-value="load"
               :data="fromRelationshipOptions" />
           </div>
 
@@ -396,12 +396,6 @@ export default {
     };
   },
 
-  created() {
-    this.form.base_contact_id = this.data.contact.id;
-    this.fromRelationship = 'Father';
-    this.toRelationship = 'Child';
-  },
-
   computed: {
     fromRelationshipOptions() {
       return _.map(this.data.relationship_group_types, (group) => {
@@ -419,13 +413,19 @@ export default {
     },
   },
 
+  created() {
+    this.form.base_contact_id = this.data.contact.id;
+    this.fromRelationship = 'Father';
+    this.toRelationship = 'Child';
+  },
+
   methods: {
     displayContactNameField() {
       this.form.choice = 'name';
       this.showContactName = true;
       this.showMoreContactOptions = true;
 
-      this.$nextTick(() => {
+      this.$nextTick().then(() => {
         this.$refs.contactName.focus();
       });
     },

resources/js/Pages/Vault/Contact/Show.vue

@@ -132,22 +132,6 @@ const destroyAvatar = () => {
 };
 </script>
 
-<style lang="scss" scoped>
-.special-grid {
-  grid-template-columns: 300px 1fr;
-}
-
-@media (max-width: 480px) {
-  .special-grid {
-    grid-template-columns: 1fr;
-  }
-}
-
-.group-list-item:not(:last-child):after {
-  content: ',';
-}
-</style>
-
 <template>
   <Layout :layout-data="layoutData" :inside-vault="true">
     <!-- breadcrumb -->
@@ -404,3 +388,19 @@ const destroyAvatar = () => {
     </main>
   </Layout>
 </template>
+
+<style lang="scss" scoped>
+.special-grid {
+  grid-template-columns: 300px 1fr;
+}
+
+@media (max-width: 480px) {
+  .special-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.group-list-item:not(:last-child):after {
+  content: ',';
+}
+</style>

resources/js/Pages/Vault/Create.vue

@@ -121,7 +121,7 @@ export default {
   },
 
   mounted() {
-    this.$nextTick(() => {
+    this.$nextTick().then(() => {
       this.$refs.name.focus();
     });
   },

resources/js/Pages/Vault/Journal/Post/Edit.vue

@@ -379,7 +379,7 @@ const destroy = () => {
               :masks="masks"
               :locale="$page.props.user.locale"
               class="mb-6 inline-block">
-              <template v-slot="{ inputValue, inputEvents }">
+              <template #default="{ inputValue, inputEvents }">
                 <input
                   class="rounded border bg-white px-2 py-1 dark:border-gray-700 dark:bg-gray-900"
                   :value="inputValue"

resources/js/Pages/Vault/Journal/Post/Partials/Tags.vue

@@ -147,7 +147,7 @@ export default {
       this.form.name = '';
       this.editTagModalShown = true;
 
-      this.$nextTick(() => {
+      this.$nextTick().then(() => {
         this.$refs.tag.focus();
       });
     },

resources/js/Pages/Vault/Journal/Post/Show.vue

@@ -154,7 +154,7 @@ defineProps({
               <p class="mb-2 text-sm font-semibold">{{ $t('Contacts in this post') }}</p>
 
               <div v-for="contact in data.contacts" :key="contact.id" class="mb-2 block">
-                <contact-card :contact="contact" :avatarClasses="'h-5 w-5 rounded-full me-2'" :displayName="true" />
+                <contact-card :contact="contact" :avatar-classes="'h-5 w-5 rounded-full me-2'" :display-name="true" />
               </div>
             </div>
 

resources/js/Pages/Vault/Journal/Slices/Show.vue

@@ -218,7 +218,7 @@ const destroy = () => {
               <p class="mb-2 text-sm font-bold">{{ $t('Contacts in this slice') }}</p>
               <ul class="mb-6">
                 <li v-for="contact in data.contacts" :key="contact.id">
-                  <contact-card :contact="contact" :avatarClasses="'h-5 w-5 rounded-full me-2'" :displayName="true" />
+                  <contact-card :contact="contact" :avatar-classes="'h-5 w-5 rounded-full me-2'" :display-name="true" />
                 </li>
               </ul>
             </div>

resources/js/Pages/Vault/Reports/Address/Cities/Index.vue

@@ -85,7 +85,10 @@ defineProps({
                 <span class="mb-1 block">{{ address.address }}</span>
                 <ul class="list">
                   <li v-for="contact in address.contacts" :key="contact.id" class="me-3 inline">
-                    <contact-card :contact="contact" :avatarClasses="'h-5 w-5 rounded-full me-2'" :displayName="true" />
+                    <contact-card
+                      :contact="contact"
+                      :avatar-classes="'h-5 w-5 rounded-full me-2'"
+                      :display-name="true" />
                   </li>
                 </ul>
               </li>

resources/js/Pages/Vault/Reports/Address/Countries/Index.vue

@@ -85,7 +85,10 @@ defineProps({
                 <span class="mb-1 block">{{ address.address }}</span>
                 <ul class="list">
                   <li v-for="contact in address.contacts" :key="contact.id" class="me-3 inline">
-                    <contact-card :contact="contact" :avatarClasses="'h-5 w-5 rounded-full me-2'" :displayName="true" />
+                    <contact-card
+                      :contact="contact"
+                      :avatar-classes="'h-5 w-5 rounded-full me-2'"
+                      :display-name="true" />
                   </li>
                 </ul>
               </li>

resources/js/Pages/Vault/Reports/ImportantDate/Index.vue

@@ -82,8 +82,8 @@ defineProps({
               <div>
                 <contact-card
                   :contact="date.contact"
-                  :avatarClasses="'h-5 w-5 rounded-full me-2'"
-                  :displayName="true" />
+                  :avatar-classes="'h-5 w-5 rounded-full me-2'"
+                  :display-name="true" />
               </div>
             </li>
           </ul>

resources/js/Pages/Vault/Search/Index.vue

@@ -89,7 +89,7 @@ export default {
   },
 
   mounted() {
-    this.$nextTick(() => {
+    this.$nextTick().then(() => {
       this.$refs.searchField.focus();
     });
   },

resources/js/Pages/Vault/Settings/Partials/ContactImportantDateTypes.vue

@@ -160,7 +160,7 @@ export default {
       this.form.label = '';
       this.createTypeModalShown = true;
 
-      this.$nextTick(() => {
+      this.$nextTick().then(() => {
         this.$refs.newtype.focus();
       });
     },

resources/js/Pages/Vault/Settings/Partials/Labels.vue

@@ -203,7 +203,7 @@ export default {
       this.form.name = '';
       this.createlabelModalShown = true;
 
-      this.$nextTick(() => {
+      this.$nextTick().then(() => {
         this.$refs.newLabel.focus();
       });
     },

resources/js/Pages/Vault/Settings/Partials/LifeEventTypesAndCategories.vue

@@ -282,8 +282,8 @@ const destroyLifeEventType = (lifeEventType) => {
                   :component-data="{ name: 'fade' }"
                   handle=".handle"
                   @change="updatePosition">
-                  <template #item="{ element, id }">
-                    <div v-if="editLifeEventTypeId !== element.id" class="">
+                  <template #item="{ element2, id }">
+                    <div v-if="editLifeEventTypeId !== element2.id" class="">
                       <div
                         class="item-list mb-2 rounded-lg border border-gray-200 bg-white py-2 pe-5 ps-4 hover:bg-slate-50 dark:border-gray-700 dark:bg-gray-900 hover:dark:bg-slate-800">
                         <div class="flex items-center justify-between">
@@ -307,17 +307,17 @@ const destroyLifeEventType = (lifeEventType) => {
                               <path d="M17 15H15V17H17V15Z" fill="currentColor" />
                             </svg>
 
-                            <span>{{ element.label }}</span>
+                            <span>{{ element2.label }}</span>
                           </div>
 
                           <!-- actions -->
                           <ul class="text-sm">
-                            <li class="inline cursor-pointer" @click="renameLifeEventTypeModal(id, element)">
+                            <li class="inline cursor-pointer" @click="renameLifeEventTypeModal(id, element2)">
                               <span class="text-blue-500 hover:underline">{{ $t('Rename') }}</span>
                             </li>
                             <li
                               class="ms-4 inline cursor-pointer text-red-500 hover:text-red-900"
-                              @click="destroyLifeEventType(element)">
+                              @click="destroyLifeEventType(element2)">
                               {{ $t('Delete') }}
                             </li>
                           </ul>
@@ -329,7 +329,7 @@ const destroyLifeEventType = (lifeEventType) => {
                     <form
                       v-else
                       class="mb-6 rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900"
-                      @submit.prevent="updateLifeEventType(element)">
+                      @submit.prevent="updateLifeEventType(element2)">
                       <div class="border-b border-gray-200 p-5 dark:border-gray-700">
                         <errors :errors="form.errors" />
 

resources/js/Pages/Vault/Settings/Partials/Tags.vue

@@ -155,7 +155,7 @@ export default {
       this.form.name = '';
       this.createTagModalShown = true;
 
-      this.$nextTick(() => {
+      this.$nextTick().then(() => {
         this.$refs.newTag.focus();
       });
     },

resources/js/Pages/Webauthn/Partials/RegisterKey.vue

@@ -13,7 +13,7 @@ const props = defineProps({
   form: Object,
 });
 
-const emit = defineEmits(['start', 'register', 'update:name']);
+const emit = defineEmits(['start', 'stop', 'register', 'update:name']);
 
 const registering = ref(false);
 const error = ref(props.errorMessage);

resources/js/Pages/Webauthn/WebauthnKeys.vue

@@ -133,7 +133,7 @@ const webauthnRegisterCallback = (data) => {
 
       <div v-else-if="register">
         <RegisterKey
-          :errorMessage="errorMessage"
+          :error-message="errorMessage"
           :form="registerForm"
           :name="registerForm.name"
           @update:name="registerForm.name = $event"

resources/js/Shared/Modules/ContactInformation.vue

@@ -205,7 +205,7 @@ export default {
       this.form.data = '';
       this.form.contact_information_type_id = this.data.contact_information_types[0].id;
 
-      this.$nextTick(() => {
+      this.$nextTick().then(() => {
         this.$refs.newData.focus();
       });
     },

resources/js/Shared/Modules/Goals.vue

@@ -201,7 +201,7 @@ export default {
       this.form.name = '';
       this.createGoalModalShown = true;
 
-      this.$nextTick(() => {
+      this.$nextTick().then(() => {
         this.$refs.newName.focus();
       });
     },

resources/js/Shared/Modules/JobInformation.vue

@@ -174,7 +174,7 @@ export default {
       this.showCreateCompanyField = true;
       this.form.company_name = '';
 
-      this.$nextTick(() => {
+      this.$nextTick().then(() => {
         this.$refs.name.focus();
       });
     },

resources/js/Shared/Modules/Labels.vue

@@ -155,7 +155,7 @@ export default {
       this.form.name = '';
       this.editLabelModalShown = true;
 
-      this.$nextTick(() => {
+      this.$nextTick().then(() => {
         this.$refs.label.focus();
       });
     },

resources/js/Shared/Modules/LifeEvent.vue

@@ -322,7 +322,10 @@ const toggleLifeEventVisibility = (lifeEvent) => {
                 <!-- participants -->
                 <div v-if="!lifeEvent.collapsed" class="flex p-3 pb-1">
                   <div v-for="contact in lifeEvent.participants" :key="contact.id" class="me-4">
-                    <contact-card :contact="contact" :avatarClasses="'h-5 w-5 rounded-full me-2'" :displayName="true" />
+                    <contact-card
+                      :contact="contact"
+                      :avatar-classes="'h-5 w-5 rounded-full me-2'"
+                      :display-name="true" />
                   </div>
                 </div>
               </template>

resources/js/Shared/Modules/Loans.vue

@@ -329,7 +329,7 @@ const toggle = (loan) => {
         <div v-if="editedLoanId !== loan.id" class="me-3 flex items-center">
           <div class="flex -space-x-2 overflow-hidden">
             <div v-for="loaner in loan.loaners" :key="loaner.id">
-              <contact-card :contact="loaner" :avatarClasses="'h-7 w-7 rounded-full me-2'" :displayName="false" />
+              <contact-card :contact="loaner" :avatar-classes="'h-7 w-7 rounded-full me-2'" :display-name="false" />
             </div>
           </div>
 
@@ -344,7 +344,7 @@ const toggle = (loan) => {
           </svg>
 
           <div v-for="loanee in loan.loanees" :key="loanee.id">
-            <contact-card :contact="loanee" :avatarClasses="'h-7 w-7 rounded-full me-2'" :displayName="false" />
+            <contact-card :contact="loanee" :avatar-classes="'h-7 w-7 rounded-full me-2'" :display-name="false" />
           </div>
         </div>
 

resources/js/Shared/Modules/Notes.vue

@@ -330,7 +330,7 @@ export default {
       this.titleFieldShown = true;
       this.form.title = '';
 
-      this.$nextTick(() => {
+      this.$nextTick().then(() => {
         this.$refs.newTitle.focus();
       });
     },

resources/js/Shared/Modules/Pets.vue

@@ -193,7 +193,7 @@ export default {
       this.form.name = '';
       this.form.pet_category_id = 0;
 
-      this.$nextTick(() => {
+      this.$nextTick().then(() => {
         this.$refs.newName.focus();
       });
     },