apply prettier/eslint to vue templates

generators/vue/support/translate-vue.spec.ts

@@ -24,26 +24,26 @@ const FULL_BODY = `
 <span v-html="t$('activate.messages.success')"><strong>Your user account has been activated.</strong> Please </span>
 <b-link :to="'/account/reset/request'" class="alert-link" v-text="t$('login.password.forgot')"
  data-cy="forgetYourPasswordSelector" >Did you forget your password?</b-link>
-<b-form-group v-bind:label="t$('login.form.password')" label-for="password">
+<b-form-group :label="t$('login.form.password')" label-for="password">
   <b-form-input
     id="password"
     type="password"
     name="password"
-    v-bind:placeholder="t$('login.form[\\'password.placeholder\\']')"
+    :placeholder="t$('login.form[\\'password.placeholder\\']')"
     v-model="password"
     data-cy="password"
   >
   </b-form-input>
 </b-form-group>
 
-<b-modal ref="removeUser" id="removeUser" v-bind:title="t$('entity.delete.title')" @ok="deleteUser()">
+<b-modal ref="removeUser" id="removeUser" :title="t$('entity.delete.title')" @ok="deleteUser()">
   <div class="modal-body">
     <p id="jhi-delete-user-heading" v-text="t$('userManagement.delete.question', { 'login': removeId})">Are you sure you want to delete this user?</p>
   </div>
   <template #modal-footer>
     <div>
-      <button type="button" class="btn btn-secondary" v-text="t$('entity.action.cancel')" v-on:click="closeDialog()">Cancel</button>
-      <button type="button" class="btn btn-primary" id="confirm-delete-user" v-text="t$('entity.action.delete')" v-on:click="deleteUser()">Delete</button>
+      <button type="button" class="btn btn-secondary" v-text="t$('entity.action.cancel')" @click="closeDialog()">Cancel</button>
+      <button type="button" class="btn btn-primary" id="confirm-delete-user" v-text="t$('entity.action.delete')" @click="deleteUser()">Delete</button>
     </div>
   </template>
 </b-modal>
@@ -162,8 +162,8 @@ getWebappTranslation('msg', { exp: '{{ foo }}', num: 1, str: 'a' })
   </div>
   <template #modal-footer>
     <div>
-      <button type="button" class="btn btn-secondary" v-on:click="closeDialog()">getWebappTranslation('entity.action.cancel')</button>
-      <button type="button" class="btn btn-primary" id="confirm-delete-user" v-on:click="deleteUser()">getWebappTranslation('entity.action.delete')</button>
+      <button type="button" class="btn btn-secondary" @click="closeDialog()">getWebappTranslation('entity.action.cancel')</button>
+      <button type="button" class="btn btn-primary" id="confirm-delete-user" @click="deleteUser()">getWebappTranslation('entity.action.delete')</button>
     </div>
   </template>
 </b-modal>
@@ -183,26 +183,26 @@ getWebappTranslation('msg', { exp: '{{ foo }}', num: 1, str: 'a' })
 <span v-html="t$('activate.messages.success')"></span>
 <b-link :to="'/account/reset/request'" class="alert-link" v-text="t$('login.password.forgot')"
  data-cy="forgetYourPasswordSelector" ></b-link>
-<b-form-group v-bind:label="t$('login.form.password')" label-for="password">
+<b-form-group :label="t$('login.form.password')" label-for="password">
   <b-form-input
     id="password"
     type="password"
     name="password"
-    v-bind:placeholder="t$('login.form[\\'password.placeholder\\']')"
+    :placeholder="t$('login.form[\\'password.placeholder\\']')"
     v-model="password"
     data-cy="password"
   >
   </b-form-input>
 </b-form-group>
 
-<b-modal ref="removeUser" id="removeUser" v-bind:title="t$('entity.delete.title')" @ok="deleteUser()">
+<b-modal ref="removeUser" id="removeUser" :title="t$('entity.delete.title')" @ok="deleteUser()">
   <div class="modal-body">
     <p id="jhi-delete-user-heading" v-text="t$('userManagement.delete.question', { 'login': removeId})"></p>
   </div>
   <template #modal-footer>
     <div>
-      <button type="button" class="btn btn-secondary" v-text="t$('entity.action.cancel')" v-on:click="closeDialog()"></button>
-      <button type="button" class="btn btn-primary" id="confirm-delete-user" v-text="t$('entity.action.delete')" v-on:click="deleteUser()"></button>
+      <button type="button" class="btn btn-secondary" v-text="t$('entity.action.cancel')" @click="closeDialog()"></button>
+      <button type="button" class="btn btn-primary" id="confirm-delete-user" v-text="t$('entity.action.delete')" @click="deleteUser()"></button>
     </div>
   </template>
 </b-modal>

generators/vue/support/translate-vue.ts

@@ -23,7 +23,7 @@ import CoreGenerator from '../../base-core/index.js';
 type GetWebappTranslation = (s: string, data?: Record<string, any>) => string;
 
 function replaceTranslationAttributes({ content, getWebappTranslation }: { content: string; getWebappTranslation: GetWebappTranslation }) {
-  return content.replaceAll(/v-bind:(?<tag>(?:placeholder|title|label))="(?<translate>t\$\([^"]+\))"/g, (_complete, ...args) => {
+  return content.replaceAll(/:(?<tag>(?:placeholder|title|label))="(?<translate>t\$\([^"]+\))"/g, (_complete, ...args) => {
     const groups: Record<string, string> = args.pop();
     if (groups.translate.includes('+')) {
       return '';

generators/vue/templates/eslint.config.js.jhi.vue.ejs

@@ -62,6 +62,7 @@ import vue from 'eslint-plugin-vue';
         { 'allow': ['router-link', 'b-alert', 'b-badge', 'b-button', 'b-link'] },
       ],
       'vue/no-reserved-component-names': 'off',
+      'vue/attributes-order': 'off',
     },
   },
   {

generators/vue/templates/src/main/webapp/app/account/activate/activate.vue.ejs

@@ -5,7 +5,7 @@
         <h1 v-text="t$('activate.title')">Activation</h1>
         <div class="alert alert-success" v-if="success">
           <span v-html="t$('activate.messages.success')"><strong>Your user account has been activated.</strong> Please </span>
-          <a class="alert-link" v-on:click="openLogin" v-text="t$('global.messages.info.authenticated.link')">sign in</a>.
+          <a class="alert-link" @click="openLogin" v-text="t$('global.messages.info.authenticated.link')">sign in</a>.
         </div>
         <div class="alert alert-danger" v-if="error" v-html="t$('activate.messages.error')">
           <strong>Your user could not be activated.</strong> Please use the registration form to sign up.

generators/vue/templates/src/main/webapp/app/account/change-password/change-password.vue.ejs

@@ -20,7 +20,7 @@
           The password and its confirmation do not match!
         </div>
 
-        <form name="form" id="password-form" v-on:submit.prevent="changePassword()">
+        <form name="form" id="password-form" @submit.prevent="changePassword()">
           <div class="form-group">
             <label class="form-control-label" for="currentPassword" v-text="t$('global.form[\'currentpassword.label\']')"
               >Current password</label
@@ -31,7 +31,7 @@
               id="currentPassword"
               name="currentPassword"
               :class="{ valid: !v$.resetPassword.currentPassword.$invalid, invalid: v$.resetPassword.currentPassword.$invalid }"
-              v-bind:placeholder="t$('global.form[\'currentpassword.placeholder\']')"
+              :placeholder="t$('global.form[\'currentpassword.placeholder\']')"
               v-model="v$.resetPassword.currentPassword.$model"
               required
               data-cy="currentPassword"
@@ -53,7 +53,7 @@
               class="form-control"
               id="newPassword"
               name="newPassword"
-              v-bind:placeholder="t$('global.form[\'newpassword.placeholder\']')"
+              :placeholder="t$('global.form[\'newpassword.placeholder\']')"
               :class="{ valid: !v$.resetPassword.newPassword.$invalid, invalid: v$.resetPassword.newPassword.$invalid }"
               v-model="v$.resetPassword.newPassword.$model"
               minlength="4"
@@ -95,7 +95,7 @@
               id="confirmPassword"
               name="confirmPassword"
               :class="{ valid: !v$.resetPassword.confirmPassword.$invalid, invalid: v$.resetPassword.confirmPassword.$invalid }"
-              v-bind:placeholder="t$('global.form[\'confirmpassword.placeholder\']')"
+              :placeholder="t$('global.form[\'confirmpassword.placeholder\']')"
               v-model="v$.resetPassword.confirmPassword.$model"
               minlength="4"
               maxlength="50"

generators/vue/templates/src/main/webapp/app/account/login-form/login-form.component.spec.ts.ejs

@@ -90,7 +90,7 @@ describe('LoginForm Component', () => {
     loginForm.password = 'pwd';
     loginForm.rememberMe = true;
     const jwtSecret = 'jwt-secret';
-    axiosStub.post.resolves({ headers: { authorization: 'Bearer ' + jwtSecret } });
+    axiosStub.post.resolves({ headers: { authorization: `Bearer ${jwtSecret}` } });
 
     // WHEN
     loginForm.doLogin();
@@ -115,18 +115,20 @@ describe('LoginForm Component', () => {
     loginForm.password = 'pwd';
     loginForm.rememberMe = false;
     const jwtSecret = 'jwt-secret';
-    axiosStub.post.resolves({ headers: { authorization: 'Bearer ' + jwtSecret } });
+    axiosStub.post.resolves({ headers: { authorization: `Bearer ${jwtSecret}` } });
 
     // WHEN
     loginForm.doLogin();
     await loginForm.$nextTick();
 
     // THEN
-    expect(axiosStub.post.calledWith('api/authenticate', {
-      username: 'login',
-      password: 'pwd',
-      rememberMe: false
-    })).toBeTruthy();
+    expect(
+      axiosStub.post.calledWith('api/authenticate', {
+        username: 'login',
+        password: 'pwd',
+        rememberMe: false,
+      }),
+    ).toBeTruthy();
 
     expect(loginForm.authenticationError).toBeFalsy();
     expect(sessionStorage.getItem('<%=jhiPrefixDashed %>-authenticationToken')).toEqual(jwtSecret);
@@ -165,9 +167,11 @@ describe('LoginForm Component', () => {
     await loginForm.$nextTick();
 
     // THEN
-    expect(axiosStub.post.calledWith('api/authentication',
-      'username=login&password=pwd&remember-me=true&submit=Login',
-      { "headers": { "Content-Type": "application/x-www-form-urlencoded" } })).toBeTruthy();
+    expect(
+      axiosStub.post.calledWith('api/authentication', 'username=login&password=pwd&remember-me=true&submit=Login', {
+        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+      }),
+    ).toBeTruthy();
 
     expect(loginForm.authenticationError).toBeFalsy();
   });

generators/vue/templates/src/main/webapp/app/account/login-form/login-form.component.ts.ejs

@@ -43,8 +43,8 @@ export default defineComponent({
       try {
         await axios.post('api/authentication', data, {
           headers: {
-            'Content-Type': 'application/x-www-form-urlencoded'
-          }
+            'Content-Type': 'application/x-www-form-urlencoded',
+          },
         });
 <%_ } _%>
 

generators/vue/templates/src/main/webapp/app/account/login-form/login-form.vue.ejs

@@ -7,25 +7,25 @@
         </b-alert>
       </div>
       <div class="col-md-8">
-        <b-form v-on:submit.prevent="doLogin()">
-          <b-form-group v-bind:label="t$('global.form[\'username.label\']')" label-for="username">
+        <b-form @submit.prevent="doLogin()">
+          <b-form-group :label="t$('global.form[\'username.label\']')" label-for="username">
             <b-form-input
               id="username"
               type="text"
               name="username"
               autofocus
-              v-bind:placeholder="t$('global.form[\'username.placeholder\']')"
+              :placeholder="t$('global.form[\'username.placeholder\']')"
               v-model="login"
               data-cy="username"
             >
             </b-form-input>
           </b-form-group>
-          <b-form-group v-bind:label="t$('login.form.password')" label-for="password">
+          <b-form-group :label="t$('login.form.password')" label-for="password">
             <b-form-input
               id="password"
               type="password"
               name="password"
-              v-bind:placeholder="t$('login.form[\'password.placeholder\']')"
+              :placeholder="t$('login.form[\'password.placeholder\']')"
               v-model="password"
               data-cy="password"
             >

generators/vue/templates/src/main/webapp/app/account/login.service.spec.ts.ejs

@@ -18,7 +18,7 @@ describe('Login Service test suite', () => {
 
 <%_ if (authenticationTypeOauth2) { _%>
   it('should build url for login', () => {
-    const loc = {href: '', hostname: 'localhost', pathname: '/'};
+    const loc = { href: '', hostname: 'localhost', pathname: '/' };
 
     loginService.login(loc);
 

generators/vue/templates/src/main/webapp/app/account/login.service.ts.ejs

@@ -32,7 +32,7 @@ export default class LoginService {
       contextPath = contextPath.substring(0, contextPath.indexOf('forbidden'));
     }
     if (!contextPath.endsWith('/')) {
-      contextPath = contextPath + '/';
+      contextPath = `${contextPath}/`;
     }
     // If you have configured multiple OIDC providers, then, you can update this URL to /login.
     // It will show a Spring Security generated login page with links to configured OIDC providers.
@@ -41,7 +41,7 @@ export default class LoginService {
 <%_ } _%>
 <%_ if (!authenticationTypeJwt) { _%>
 
-  public logout() : AxiosPromise<any> {
+  public logout(): AxiosPromise<any> {
     return axios.post('api/logout');
   }
 <%_ } _%>

generators/vue/templates/src/main/webapp/app/account/register/register.vue.ejs

@@ -23,7 +23,7 @@
     </div>
     <div class="row justify-content-center">
       <div class="col-md-8">
-        <form id="register-form" name="registerForm" v-on:submit.prevent="register()" v-if="!success" no-validate>
+        <form id="register-form" name="registerForm" @submit.prevent="register()" v-if="!success" no-validate>
           <div class="form-group">
             <label class="form-control-label" for="username" v-text="t$('global.form[\'username.label\']')">Username</label>
             <input
@@ -37,7 +37,7 @@
               minlength="1"
               maxlength="50"
               pattern="^[a-zA-Z0-9!#$&'*+=?^_`{|}~.-]+@?[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$"
-              v-bind:placeholder="t$('global.form[\'username.placeholder\']')"
+              :placeholder="t$('global.form[\'username.placeholder\']')"
               data-cy="username"
             />
             <div v-if="v$.registerAccount.login.$anyDirty && v$.registerAccount.login.$invalid">
@@ -84,7 +84,7 @@
               maxlength="254"
               email
               required
-              v-bind:placeholder="t$('global.form[\'email.placeholder\']')"
+              :placeholder="t$('global.form[\'email.placeholder\']')"
               data-cy="email"
             />
             <div v-if="v$.registerAccount.email.$anyDirty && v$.registerAccount.email.$invalid">
@@ -130,7 +130,7 @@
               minlength="4"
               maxlength="50"
               required
-              v-bind:placeholder="t$('global.form[\'newpassword.placeholder\']')"
+              :placeholder="t$('global.form[\'newpassword.placeholder\']')"
               data-cy="firstPassword"
             />
             <div v-if="v$.registerAccount.password.$anyDirty && v$.registerAccount.password.$invalid">
@@ -171,7 +171,7 @@
               minlength="4"
               maxlength="50"
               required
-              v-bind:placeholder="t$('global.form[\'confirmpassword.placeholder\']')"
+              :placeholder="t$('global.form[\'confirmpassword.placeholder\']')"
               data-cy="secondPassword"
             />
             <div v-if="v$.confirmPassword.$dirty && v$.confirmPassword.$invalid">
@@ -209,7 +209,7 @@
         <p></p>
         <div class="alert alert-warning">
           <span v-text="t$('global.messages.info.authenticated.prefix')">If you want to </span>
-          <a class="alert-link" v-on:click="openLogin()" v-text="t$('global.messages.info.authenticated.link')">sign in</a
+          <a class="alert-link" @click="openLogin()" v-text="t$('global.messages.info.authenticated.link')">sign in</a
           ><span v-html="t$('global.messages.info.authenticated.suffix')"
             >, you can try the default accounts:<br />- Administrator (login="admin" and password="admin") <br />- User (login="user" and
             password="user").</span

generators/vue/templates/src/main/webapp/app/account/reset-password/finish/reset-password-finish.vue.ejs

@@ -16,7 +16,7 @@
 
         <div class="alert alert-success" v-if="success">
           <span v-html="t$('reset.finish.messages.success')"><strong>Your password had been reset.</strong> Please </span>
-          <a class="alert-link" v-on:click="openLogin" v-text="t$('global.messages.info.authenticated.link')">sign in</a>
+          <a class="alert-link" @click="openLogin" v-text="t$('global.messages.info.authenticated.link')">sign in</a>
         </div>
         <div class="alert alert-danger" v-if="doNotMatch">
           <p v-text="t$('global.messages.error.dontmatch')">The password and its confirmation do not match!</p>
@@ -27,15 +27,15 @@
         </div>
 
         <div v-if="!keyMissing">
-          <form v-if="!success" name="form" v-on:submit.prevent="finishReset()">
+          <form v-if="!success" name="form" @submit.prevent="finishReset()">
             <div class="form-group">
               <label class="form-control-label" for="newPassword" v-text="t$('global.form[\'newpassword.label\']')">New password</label>
               <input
                 type="password"
                 class="form-control"
                 id="newPassword"
                 name="newPassword"
-                v-bind:placeholder="t$('global.form[\'newpassword.placeholder\']')"
+                :placeholder="t$('global.form[\'newpassword.placeholder\']')"
                 :class="{ valid: !v$.resetAccount.newPassword.$invalid, invalid: v$.resetAccount.newPassword.$invalid }"
                 v-model="v$.resetAccount.newPassword.$model"
                 minlength="4"
@@ -77,7 +77,7 @@
                 id="confirmPassword"
                 name="confirmPassword"
                 :class="{ valid: !v$.resetAccount.confirmPassword.$invalid, invalid: v$.resetAccount.confirmPassword.$invalid }"
-                v-bind:placeholder="t$('global.form[\'confirmpassword.placeholder\']')"
+                :placeholder="t$('global.form[\'confirmpassword.placeholder\']')"
                 v-model="v$.resetAccount.confirmPassword.$model"
                 minlength="4"
                 maxlength="50"

generators/vue/templates/src/main/webapp/app/account/reset-password/init/reset-password-init.vue.ejs

@@ -12,15 +12,15 @@
           <p v-text="t$('reset.request.messages.success')">Check your email for details on how to reset your password.</p>
         </div>
 
-        <form v-if="!success" name="form" v-on:submit.prevent="requestReset()">
+        <form v-if="!success" name="form" @submit.prevent="requestReset()">
           <div class="form-group">
             <label class="form-control-label" for="email" v-text="t$('global.form[\'email.label\']')">Email</label>
             <input
               type="email"
               class="form-control"
               id="email"
               name="email"
-              v-bind:placeholder="t$('global.form[\'email.placeholder\']')"
+              :placeholder="t$('global.form[\'email.placeholder\']')"
               :class="{ valid: !v$.resetAccount.email.$invalid, invalid: v$.resetAccount.email.$invalid }"
               v-model="v$.resetAccount.email.$model"
               minlength="5"

generators/vue/templates/src/main/webapp/app/account/sessions/sessions.component.ts.ejs

@@ -42,7 +42,7 @@ export default defineComponent({
     },
     invalidate(session) {
       return axios
-        .delete('api/account/sessions/' + session)
+        .delete(`api/account/sessions/${session}`)
         .then(() => {
           this.error = null;
           this.success = 'OK';

generators/vue/templates/src/main/webapp/app/account/sessions/sessions.vue.ejs

@@ -30,7 +30,7 @@
             <td>{{ session.userAgent }}</td>
             <td>{{ session.tokenDate }}</td>
             <td>
-              <button type="submit" class="btn btn-primary" v-on:click="invalidate(session.series)" v-text="t$('sessions.table.button')">
+              <button type="submit" class="btn btn-primary" @click="invalidate(session.series)" v-text="t$('sessions.table.button')">
                 Invalidate
               </button>
             </td>