generator-jhipster 8.6.0 → 8.7.0

package/dist/generators/vue/templates/src/main/webapp/app/admin/user-management/user-management-edit.vue.ejs

@@ -1,10 +1,8 @@
 <template>
   <div class="row justify-content-center">
     <div class="col-8">
-      <form name="editForm" novalidate v-on:submit.prevent="save()" v-if="userAccount">
-        <h2 id="myUserLabel" v-text="t$('userManagement.home.createOrEditLabel')">
-          Create or edit a User
-        </h2>
+      <form name="editForm" novalidate @submit.prevent="save()" v-if="userAccount">
+        <h2 id="myUserLabel" v-text="t$('userManagement.home.createOrEditLabel')">Create or edit a User</h2>
         <div>
           <div class="form-group" :hidden="!userAccount.id">
             <label v-text="t$('global.field.id')">ID</label>
@@ -13,82 +11,124 @@
 
           <div class="form-group">
             <label class="form-control-label" v-text="t$('userManagement.login')">Login</label>
-            <input type="text" class="form-control" name="login"
+            <input
+              type="text"
+              class="form-control"
+              name="login"
               :class="{ valid: !v$.userAccount.login.$invalid, invalid: v$.userAccount.login.$invalid }"
-              v-model="v$.userAccount.login.$model" />
+              v-model="v$.userAccount.login.$model"
+            />
 
             <div v-if="v$.userAccount.login.$anyDirty && v$.userAccount.login.$invalid">
-              <small class="form-text text-danger" v-if="!v$.userAccount.login.required"
-                v-text="t$('entity.validation.required')">
+              <small class="form-text text-danger" v-if="!v$.userAccount.login.required" v-text="t$('entity.validation.required')">
                 This field is required.
               </small>
 
-              <small class="form-text text-danger" v-if="!v$.userAccount.login.maxLength"
-                v-text="t$('entity.validation.maxlength', { max: 50 })">
+              <small
+                class="form-text text-danger"
+                v-if="!v$.userAccount.login.maxLength"
+                v-text="t$('entity.validation.maxlength', { max: 50 })"
+              >
                 This field cannot be longer than 50 characters.
               </small>
 
-              <small class="form-text text-danger" v-if="!v$.userAccount.login.pattern"
-                v-text="t$('entity.validation.patternLogin')">
+              <small class="form-text text-danger" v-if="!v$.userAccount.login.pattern" v-text="t$('entity.validation.patternLogin')">
                 This field can only contain letters, digits and e-mail addresses.
               </small>
             </div>
           </div>
           <div class="form-group">
             <label class="form-control-label" for="firstName" v-text="t$('userManagement.firstName')">First Name</label>
-            <input type="text" class="form-control" id="firstName" name="firstName"
-              v-bind:placeholder="t$('settings.form[\'firstname.placeholder\']')"
+            <input
+              type="text"
+              class="form-control"
+              id="firstName"
+              name="firstName"
+              :placeholder="t$('settings.form[\'firstname.placeholder\']')"
               :class="{ valid: !v$.userAccount.firstName.$invalid, invalid: v$.userAccount.firstName.$invalid }"
-              v-model="v$.userAccount.firstName.$model" />
+              v-model="v$.userAccount.firstName.$model"
+            />
             <div v-if="v$.userAccount.firstName.$anyDirty && v$.userAccount.firstName.$invalid">
-              <small class="form-text text-danger" v-if="!v$.userAccount.firstName.maxLength"
-                v-text="t$('entity.validation.maxlength', { max: 50 })">
+              <small
+                class="form-text text-danger"
+                v-if="!v$.userAccount.firstName.maxLength"
+                v-text="t$('entity.validation.maxlength', { max: 50 })"
+              >
                 This field cannot be longer than 50 characters.
               </small>
             </div>
           </div>
           <div class="form-group">
             <label class="form-control-label" for="lastName" v-text="t$('userManagement.lastName')">Last Name</label>
-            <input type="text" class="form-control" id="lastName" name="lastName"
-              v-bind:placeholder="t$('settings.form[\'lastname.placeholder\']')"
+            <input
+              type="text"
+              class="form-control"
+              id="lastName"
+              name="lastName"
+              :placeholder="t$('settings.form[\'lastname.placeholder\']')"
               :class="{ valid: !v$.userAccount.lastName.$invalid, invalid: v$.userAccount.lastName.$invalid }"
-              v-model="v$.userAccount.lastName.$model" />
+              v-model="v$.userAccount.lastName.$model"
+            />
             <div v-if="v$.userAccount.lastName.$anyDirty && v$.userAccount.lastName.$invalid">
-              <small class="form-text text-danger" v-if="!v$.userAccount.lastName.maxLength"
-                v-text="t$('entity.validation.maxlength', { max: 50 })">
+              <small
+                class="form-text text-danger"
+                v-if="!v$.userAccount.lastName.maxLength"
+                v-text="t$('entity.validation.maxlength', { max: 50 })"
+              >
                 This field cannot be longer than 50 characters.
               </small>
             </div>
           </div>
           <div class="form-group">
             <label class="form-control-label" for="email" v-text="t$('userManagement.email')">Email</label>
-            <input type="email" class="form-control" id="email" name="email"
-              v-bind:placeholder="t$('global.form[\'email.placeholder\']')"
+            <input
+              type="email"
+              class="form-control"
+              id="email"
+              name="email"
+              :placeholder="t$('global.form[\'email.placeholder\']')"
               :class="{ valid: !v$.userAccount.email.$invalid, invalid: v$.userAccount.email.$invalid }"
-              v-model="v$.userAccount.email.$model" email required />
+              v-model="v$.userAccount.email.$model"
+              email
+              required
+            />
             <div v-if="v$.userAccount.email.$anyDirty && v$.userAccount.email.$invalid">
-              <small class="form-text text-danger" v-if="!v$.userAccount.email.required"
-                v-text="t$('global.messages.validate.email.required')">
+              <small
+                class="form-text text-danger"
+                v-if="!v$.userAccount.email.required"
+                v-text="t$('global.messages.validate.email.required')"
+              >
                 Your email is required.
               </small>
-              <small class="form-text text-danger" v-if="!v$.userAccount.email.email"
-                v-text="t$('global.messages.validate.email.invalid')">
+              <small class="form-text text-danger" v-if="!v$.userAccount.email.email" v-text="t$('global.messages.validate.email.invalid')">
                 Your email is invalid.
               </small>
-              <small class="form-text text-danger" v-if="!v$.userAccount.email.minLength"
-                v-text="t$('global.messages.validate.email.minlength')">
+              <small
+                class="form-text text-danger"
+                v-if="!v$.userAccount.email.minLength"
+                v-text="t$('global.messages.validate.email.minlength')"
+              >
                 Your email is required to be at least 5 characters.
               </small>
-              <small class="form-text text-danger" v-if="!v$.userAccount.email.maxLength"
-                v-text="t$('global.messages.validate.email.maxlength')">
+              <small
+                class="form-text text-danger"
+                v-if="!v$.userAccount.email.maxLength"
+                v-text="t$('global.messages.validate.email.maxlength')"
+              >
                 Your email cannot be longer than 50 characters.
               </small>
             </div>
           </div>
           <div class="form-check">
             <label class="form-check-label" for="activated">
-              <input class="form-check-input" :disabled="userAccount.id === null" type="checkbox" id="activated"
-                name="activated" v-model="userAccount.activated" />
+              <input
+                class="form-check-input"
+                :disabled="userAccount.id === null"
+                type="checkbox"
+                id="activated"
+                name="activated"
+                v-model="userAccount.activated"
+              />
               <span v-text="t$('userManagement.activated')">Activated</span>
             </label>
           </div>
@@ -109,9 +149,8 @@
           </div>
         </div>
         <div>
-          <button type="button" class="btn btn-secondary" v-on:click="previousState()">
-            <font-awesome-icon icon="ban"></font-awesome-icon>&nbsp;<span
-              v-text="t$('entity.action.cancel')">Cancel</span>
+          <button type="button" class="btn btn-secondary" @click="previousState()">
+            <font-awesome-icon icon="ban"></font-awesome-icon>&nbsp;<span v-text="t$('entity.action.cancel')">Cancel</span>
           </button>
           <button type="submit" :disabled="v$.userAccount.$invalid || isSaving" class="btn btn-primary">
             <font-awesome-icon icon="save"></font-awesome-icon>&nbsp;<span v-text="t$('entity.action.save')">Save</span>

package/dist/generators/vue/templates/src/main/webapp/app/admin/user-management/user-management-view.vue.ejs

@@ -8,7 +8,7 @@
         <dl class="row jh-entity-details">
           <dt><span v-text="t$('userManagement.login')">Login</span></dt>
           <dd>
-            <span>{{user.login}}</span>
+            <span>{{ user.login }}</span>
             <b-badge variant="success" v-if="user.activated" v-text="t$('userManagement.activated')">Activated</b-badge>
             <b-badge variant="danger" v-if="!user.activated" v-text="t$('userManagement.deactivated')">Deactivated</b-badge>
           </dd>
@@ -58,5 +58,4 @@
   </div>
 </template>
 
-<script lang="ts" src="./user-management-view.component.ts">
-</script>
+<script lang="ts" src="./user-management-view.component.ts"></script>

package/dist/generators/vue/templates/src/main/webapp/app/admin/user-management/user-management.component.ts.ejs

@@ -106,7 +106,7 @@ export default defineComponent({
     },
 <%_ if (!databaseTypeCassandra) { _%>
     sort(): any {
-      const result = [this.propOrder + ',' + (this.reverse ? 'desc' : 'asc')];
+      const result = [`${this.propOrder},${this.reverse ? 'desc' : 'asc'}`];
       if (this.propOrder !== 'id') {
         result.push('id');
       }

package/dist/generators/vue/templates/src/main/webapp/app/admin/user-management/user-management.vue.ejs

@@ -4,7 +4,7 @@
       <span id="user-management-page-heading" v-text="t$('userManagement.home.title')" data-cy="userManagementPageHeading">Users</span>
 
       <div class="d-flex justify-content-end">
-        <button class="btn btn-info mr-2" v-on:click="handleSyncList" :disabled="isLoading">
+        <button class="btn btn-info mr-2" @click="handleSyncList" :disabled="isLoading">
           <font-awesome-icon icon="sync" :spin="isLoading"></font-awesome-icon> <span v-text="t$('userManagement.home.refreshListLabel')">Refresh List</span>
         </button>
         <router-link custom v-slot="{ navigate }" :to="{name: '<%= jhiPrefixCapitalized %>UserCreate'}">
@@ -18,18 +18,18 @@
       <table class="table table-striped" aria-describedby="Users">
         <thead>
         <tr>
-          <th scope="col"<% if (!databaseTypeCassandra) { %> v-on:click="changeOrder('id')"<% } %>><span v-text="t$('global.field.id')">ID</span><% if (!databaseTypeCassandra) { %> <jhi-sort-indicator :current-order="propOrder" :reverse="reverse" :field-name="'id'"></jhi-sort-indicator><% } %></th>
-          <th scope="col"<% if (!databaseTypeCassandra) { %> v-on:click="changeOrder('login')"<% } %>><span v-text="t$('userManagement.login')">Login</span><% if (!databaseTypeCassandra) { %> <jhi-sort-indicator :current-order="propOrder" :reverse="reverse" :field-name="'login'"></jhi-sort-indicator><% } %></th>
-          <th scope="col"<% if (!databaseTypeCassandra) { %> v-on:click="changeOrder('email')"<% } %>><span v-text="t$('userManagement.email')">Email</span><% if (!databaseTypeCassandra) { %> <jhi-sort-indicator :current-order="propOrder" :reverse="reverse" :field-name="'email'"></jhi-sort-indicator><% } %></th>
+          <th scope="col"<% if (!databaseTypeCassandra) { %> @click="changeOrder('id')"<% } %>><span v-text="t$('global.field.id')">ID</span><% if (!databaseTypeCassandra) { %> <jhi-sort-indicator :current-order="propOrder" :reverse="reverse" :field-name="'id'"></jhi-sort-indicator><% } %></th>
+          <th scope="col"<% if (!databaseTypeCassandra) { %> @click="changeOrder('login')"<% } %>><span v-text="t$('userManagement.login')">Login</span><% if (!databaseTypeCassandra) { %> <jhi-sort-indicator :current-order="propOrder" :reverse="reverse" :field-name="'login'"></jhi-sort-indicator><% } %></th>
+          <th scope="col"<% if (!databaseTypeCassandra) { %> @click="changeOrder('email')"<% } %>><span v-text="t$('userManagement.email')">Email</span><% if (!databaseTypeCassandra) { %> <jhi-sort-indicator :current-order="propOrder" :reverse="reverse" :field-name="'email'"></jhi-sort-indicator><% } %></th>
           <th scope="col"></th>
 <%_ if (enableTranslation) { _%>
-          <th scope="col"<% if (!databaseTypeCassandra) { %> v-on:click="changeOrder('langKey')"<% } %>> <span v-text="t$('userManagement.langKey')">Lang Key</span><% if (!databaseTypeCassandra) { %> <jhi-sort-indicator :current-order="propOrder" :reverse="reverse" :field-name="'langKey'"></jhi-sort-indicator><% } %></th>
+          <th scope="col"<% if (!databaseTypeCassandra) { %> @click="changeOrder('langKey')"<% } %>> <span v-text="t$('userManagement.langKey')">Lang Key</span><% if (!databaseTypeCassandra) { %> <jhi-sort-indicator :current-order="propOrder" :reverse="reverse" :field-name="'langKey'"></jhi-sort-indicator><% } %></th>
 <%_ } _%>
           <th scope="col"><span v-text="t$('userManagement.profiles')">Profiles</span></th>
 <%_ if (!databaseTypeCassandra) { _%>
-          <th scope="col" v-on:click="changeOrder('createdDate')"><span v-text="t$('userManagement.createdDate')">Created Date</span> <jhi-sort-indicator :current-order="propOrder" :reverse="reverse" :field-name="'createdDate'"></jhi-sort-indicator></th>
-          <th scope="col" v-on:click="changeOrder('lastModifiedBy')"><span v-text="t$('userManagement.lastModifiedBy')">Last Modified By</span> <jhi-sort-indicator :current-order="propOrder" :reverse="reverse" :field-name="'lastModifiedBy'"></jhi-sort-indicator></th>
-          <th scope="col" id="modified-date-sort" v-on:click="changeOrder('lastModifiedDate')"><span v-text="t$('userManagement.lastModifiedDate')">Last Modified Date</span> <jhi-sort-indicator :current-order="propOrder" :reverse="reverse" :field-name="'lastModifiedDate'"></jhi-sort-indicator></th>
+          <th scope="col" @click="changeOrder('createdDate')"><span v-text="t$('userManagement.createdDate')">Created Date</span> <jhi-sort-indicator :current-order="propOrder" :reverse="reverse" :field-name="'createdDate'"></jhi-sort-indicator></th>
+          <th scope="col" @click="changeOrder('lastModifiedBy')"><span v-text="t$('userManagement.lastModifiedBy')">Last Modified By</span> <jhi-sort-indicator :current-order="propOrder" :reverse="reverse" :field-name="'lastModifiedBy'"></jhi-sort-indicator></th>
+          <th scope="col" id="modified-date-sort" @click="changeOrder('lastModifiedDate')"><span v-text="t$('userManagement.lastModifiedDate')">Last Modified Date</span> <jhi-sort-indicator :current-order="propOrder" :reverse="reverse" :field-name="'lastModifiedDate'"></jhi-sort-indicator></th>
 <%_ } _%>
           <th scope="col"></th>
         </tr>
@@ -41,9 +41,9 @@
             <td>{{user.login}}</td>
             <td class="jhi-user-email">{{user.email}}</td>
             <td>
-              <button class="btn btn-danger btn-sm deactivated" v-on:click="setActive(user, true)" v-if="!user.activated"
+              <button class="btn btn-danger btn-sm deactivated" @click="setActive(user, true)" v-if="!user.activated"
                       v-text="t$('userManagement.deactivated')">Deactivated</button>
-              <button class="btn btn-success btn-sm" v-on:click="setActive(user, false)" v-if="user.activated"
+              <button class="btn btn-success btn-sm" @click="setActive(user, false)" v-if="user.activated"
                       :disabled="username === user.login" v-text="t$('userManagement.activated')">Activated</button>
             </td>
             <% if (enableTranslation) { %><td>{{user.langKey}}</td><% } %>
@@ -71,10 +71,7 @@
                     <span class="d-none d-md-inline" v-text="t$('entity.action.edit')">Edit</span>
                   </button>
                 </router-link>
-                <b-button v-on:click="prepareRemove(user)"
-                        variant="danger"
-                        class="btn btn-sm delete"
-                        :disabled="username === user.login">
+                <b-button @click="prepareRemove(user)" variant="danger" class="btn btn-sm delete" :disabled="username === user.login">
                   <font-awesome-icon icon="times"></font-awesome-icon>
                   <span class="d-none d-md-inline" v-text="t$('entity.action.delete')">Delete</span>
                 </b-button>
@@ -83,26 +80,26 @@
           </tr>
         </tbody>
       </table>
-      <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="<%= jhiPrefixDashed %>-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>
     </div>
 <%_ if (!databaseTypeCassandra) { _%>
     <div v-show="users && users.length > 0">
-        <div class="row justify-content-center">
-            <jhi-item-count :page="page" :total="queryCount" :itemsPerPage="itemsPerPage"></jhi-item-count>
-        </div>
-        <div class="row justify-content-center">
-            <b-pagination size="md" :total-rows="totalItems" v-model="page" :per-page="itemsPerPage" :change="loadPage(page)"></b-pagination>
-        </div>
+      <div class="row justify-content-center">
+        <jhi-item-count :page="page" :total="queryCount" :itemsPerPage="itemsPerPage"></jhi-item-count>
+      </div>
+      <div class="row justify-content-center">
+        <b-pagination size="md" :total-rows="totalItems" v-model="page" :per-page="itemsPerPage" :change="loadPage(page)"></b-pagination>
+      </div>
     </div>
 <%_ } _%>
   </div>

package/dist/generators/vue/templates/src/main/webapp/app/core/error/error.vue.ejs

@@ -10,13 +10,11 @@
         <div v-if="errorMessage">
           <div class="alert alert-danger">{{ errorMessage }}</div>
         </div>
-        <div v-if="error403" class="alert alert-danger" v-text="t$('error.http.403')">You are not authorized to access
-          this page.</div>
-        <div v-if="error404" class="alert alert-warning" v-text="t$('error.http.404')">The page you requested does not
-          exist.</div>
+        <div v-if="error403" class="alert alert-danger" v-text="t$('error.http.403')">You are not authorized to access this page.</div>
+        <div v-if="error404" class="alert alert-warning" v-text="t$('error.http.404')">The page you requested does not exist.</div>
       </div>
     </div>
   </div>
 </template>
 
-<script lang="ts" src="./error.component.ts"></script>
+<script lang="ts" src="./error.component.ts"></script>

package/dist/generators/vue/templates/src/main/webapp/app/core/home/home.component.spec.ts.ejs

@@ -24,7 +24,7 @@ describe('Home', () => {
       global: {
         stubs: {
           'router-link': true,
-        },  
+        },
         provide: {
           loginService,
           authenticated,

package/dist/generators/vue/templates/src/main/webapp/app/core/home/home.vue.ejs

@@ -14,16 +14,18 @@
 
         <div class="alert alert-warning" v-if="!authenticated">
           <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><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>
+          <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
+          >
         </div>
 <%_ if (generateUserManagement) { _%>
         <div class="alert alert-warning" v-if="!authenticated">
           <span v-text="t$('global.messages.info.register.noaccount')">You don't have an account yet?</span>&nbsp;
-          <router-link class="alert-link" to="/register" v-text="t$('global.messages.info.register.link')">Register a
-            new account</router-link>
+          <router-link class="alert-link" to="/register" v-text="t$('global.messages.info.register.link')"
+            >Register a new account</router-link
+          >
         </div>
 <%_ } _%>
       </div>

package/dist/generators/vue/templates/src/main/webapp/app/core/jhi-footer/jhi-footer.vue.ejs

@@ -4,4 +4,4 @@
   </div>
 </template>
 
-<script lang="ts" src="./jhi-footer.component.ts"></script>
+<script lang="ts" src="./jhi-footer.component.ts"></script>

package/dist/generators/vue/templates/src/main/webapp/app/core/jhi-navbar/jhi-navbar.component.spec.ts.ejs

@@ -48,7 +48,7 @@ describe('JhiNavbar', () => {
           'b-nav-item-dropdown': true,
           'b-navbar-toggle': true,
           'b-navbar-brand': true,
-        },  
+        },
         provide: {
           loginService,
           currentLanguage: computed(() => 'foo'),

package/dist/generators/vue/templates/src/main/webapp/app/core/jhi-navbar/jhi-navbar.component.ts.ejs

@@ -47,7 +47,7 @@ export default defineComponent({
     const router = useRouter();
     const store = useStore();
 
-    const version = 'v' + APP_VERSION;
+    const version = `v${APP_VERSION}`;
     const hasAnyAuthorityValues: Ref<any> = ref({});
 
     const openAPIEnabled = computed(() => store.activeProfiles.indexOf('api-docs') > -1);
@@ -117,13 +117,11 @@ export default defineComponent({
   },
   methods: {
     hasAnyAuthority(authorities: any): boolean {
-      this.accountService
-        .hasAnyAuthorityAndCheckAuth(authorities)
-        .then(value => {
-          if (this.hasAnyAuthorityValues[authorities] !== value) {
-            this.hasAnyAuthorityValues = { ...this.hasAnyAuthorityValues, [authorities]: value };
-          }
-        });
+      this.accountService.hasAnyAuthorityAndCheckAuth(authorities).then(value => {
+        if (this.hasAnyAuthorityValues[authorities] !== value) {
+          this.hasAnyAuthorityValues = { ...this.hasAnyAuthorityValues, [authorities]: value };
+        }
+      });
       return this.hasAnyAuthorityValues[authorities] ?? false;
     },
   },

package/dist/generators/vue/templates/src/main/webapp/app/core/jhi-navbar/jhi-navbar.vue.ejs

@@ -11,8 +11,9 @@
       data-toggle="collapse"
       target="header-tabs"
       aria-expanded="false"
-      aria-label="Toggle navigation">
-        <font-awesome-icon icon="bars" />
+      aria-label="Toggle navigation"
+    >
+      <font-awesome-icon icon="bars" />
     </b-navbar-toggle>
 
     <b-collapse is-nav id="header-tabs">
@@ -23,12 +24,7 @@
             <span v-text="t$('global.menu.home')">Home</span>
           </span>
         </b-nav-item>
-        <b-nav-item-dropdown
-          right
-          id="entity-menu"
-          v-if="authenticated"
-          active-class="active" class="pointer"
-          data-cy="entity">
+        <b-nav-item-dropdown right id="entity-menu" v-if="authenticated" active-class="active" class="pointer" data-cy="entity">
           <template #button-content>
             <span class="navbar-dropdown-menu">
               <font-awesome-icon icon="th-list" />
@@ -47,17 +43,18 @@
           right
           id="admin-menu"
           v-if="hasAnyAuthority('ROLE_ADMIN') && authenticated"
-          :class="{'router-link-active': subIsActive('/admin')}"
+          :class="{ 'router-link-active': subIsActive('/admin') }"
           active-class="active"
           class="pointer"
-          data-cy="adminMenu">
+          data-cy="adminMenu"
+        >
           <template #button-content>
             <span class="navbar-dropdown-menu">
               <font-awesome-icon icon="users-cog" />
               <span class="no-bold" v-text="t$('global.menu.admin.main')">Administration</span>
             </span>
           </template>
-<%_ if (applicationTypeGateway && serviceDiscoveryAny) { _%>
+<%_ if (applicationTypeGateway && gatewayServicesApiAvailable) { _%>
           <b-dropdown-item to="/admin/gateway" active-class="active">
             <font-awesome-icon icon="road" />
             <span v-text="t$('global.menu.admin.gateway')">Gateway</span>
@@ -110,9 +107,13 @@
             <font-awesome-icon icon="flag" />
             <span class="no-bold" v-text="t$('global.menu.language')">Language</span>
           </template>
-          <b-dropdown-item v-for="(value, key) in languages" :key="`lang-${key}`" v-on:click="changeLanguage(key);"
-              :class="{ active: isActiveLanguage(key)}">
-            {{value.name}}
+          <b-dropdown-item
+            v-for="(value, key) in languages"
+            :key="`lang-${key}`"
+            @click="changeLanguage(key)"
+            :class="{ active: isActiveLanguage(key) }"
+          >
+            {{ value.name }}
           </b-dropdown-item>
         </b-nav-item-dropdown>
 <%_ } _%>
@@ -120,16 +121,15 @@
           right
           href="javascript:void(0);"
           id="account-menu"
-          :class="{'router-link-active': subIsActive('/account')}"
+          :class="{ 'router-link-active': subIsActive('/account') }"
           active-class="active"
           class="pointer"
-          data-cy="accountMenu">
+          data-cy="accountMenu"
+        >
           <template #button-content>
             <span class="navbar-dropdown-menu">
               <font-awesome-icon icon="user" />
-              <span class="no-bold" v-text="t$('global.menu.account.main')">
-                Account
-              </span>
+              <span class="no-bold" v-text="t$('global.menu.account.main')"> Account </span>
             </span>
           </template>
 <%_ if (generateUserManagement) { _%>
@@ -148,11 +148,11 @@
             <span v-text="t$('global.menu.account.sessions')">Sessions</span>
           </b-dropdown-item>
 <%_ } _%>
-          <b-dropdown-item data-cy="logout" v-if="authenticated"  v-on:click="logout()" id="logout" active-class="active">
+          <b-dropdown-item data-cy="logout" v-if="authenticated"  @click="logout()" id="logout" active-class="active">
             <font-awesome-icon icon="sign-out-alt" />
             <span v-text="t$('global.menu.account.logout')">Sign out</span>
           </b-dropdown-item>
-          <b-dropdown-item data-cy="login" v-if="!authenticated"  v-on:click="openLogin()" id="login" active-class="active">
+          <b-dropdown-item data-cy="login" v-if="!authenticated" @click="openLogin()" id="login" active-class="active">
             <font-awesome-icon icon="sign-in-alt" />
             <span v-text="t$('global.menu.account.login')">Sign in</span>
           </b-dropdown-item>
@@ -168,8 +168,7 @@
   </b-navbar>
 </template>
 
-<script lang="ts" src="./jhi-navbar.component.ts">
-</script>
+<script lang="ts" src="./jhi-navbar.component.ts"></script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>

package/dist/generators/vue/templates/src/main/webapp/app/core/ribbon/ribbon.component.ts.ejs

@@ -10,9 +10,7 @@ export default defineComponent({
   setup(prop) {
     const store = useStore();
     const ribbonEnv = computed(() => store.ribbonOnProfiles);
-    const ribbonEnabled = computed(
-      () => store.ribbonOnProfiles && store.activeProfiles.indexOf(store.ribbonOnProfiles) > -1
-    );
+    const ribbonEnabled = computed(() => store.ribbonOnProfiles && store.activeProfiles.indexOf(store.ribbonOnProfiles) > -1);
 
     return {
       ribbonEnv,

package/dist/generators/vue/templates/src/main/webapp/app/core/ribbon/ribbon.vue.ejs

@@ -8,36 +8,36 @@
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-  /* ==========================================================================
+/* ==========================================================================
 Development Ribbon
 ========================================================================== */
-  .ribbon {
-    background-color: rgba(170, 0, 0, 0.5);
-    left: -3.5em;
-    -moz-transform: rotate(-45deg);
-    -ms-transform: rotate(-45deg);
-    -o-transform: rotate(-45deg);
-    -webkit-transform: rotate(-45deg);
-    transform: rotate(-45deg);
-    overflow: hidden;
-    position: absolute;
-    top: 40px;
-    white-space: nowrap;
-    width: 15em;
-    z-index: 9999;
-    pointer-events: none;
-    opacity: 0.75;
-  }
+.ribbon {
+  background-color: rgba(170, 0, 0, 0.5);
+  left: -3.5em;
+  -moz-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  -o-transform: rotate(-45deg);
+  -webkit-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+  overflow: hidden;
+  position: absolute;
+  top: 40px;
+  white-space: nowrap;
+  width: 15em;
+  z-index: 9999;
+  pointer-events: none;
+  opacity: 0.75;
+}
 
-  .ribbon a {
-    color: #fff;
-    display: block;
-    font-weight: 400;
-    margin: 1px 0;
-    padding: 10px 50px;
-    text-align: center;
-    text-decoration: none;
-    text-shadow: 0 0 5px #444;
-    pointer-events: none;
-  }
-</style>
+.ribbon a {
+  color: #fff;
+  display: block;
+  font-weight: 400;
+  margin: 1px 0;
+  padding: 10px 50px;
+  text-align: center;
+  text-decoration: none;
+  text-shadow: 0 0 5px #444;
+  pointer-events: none;
+}
+</style>