generator-jhipster 8.5.0 → 8.7.0

package/dist/generators/vue/resources/package.json

@@ -1,75 +1,74 @@
 {
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "6.5.2",
-    "@fortawesome/free-solid-svg-icons": "6.5.2",
+    "@fortawesome/fontawesome-svg-core": "6.6.0",
+    "@fortawesome/free-solid-svg-icons": "6.6.0",
     "@fortawesome/vue-fontawesome": "3.0.8",
     "@stomp/rx-stomp": "2.0.0",
     "@vuelidate/core": "2.0.3",
     "@vuelidate/validators": "2.0.4",
-    "@vueuse/core": "10.10.0",
-    "axios": "1.7.2",
+    "@vueuse/core": "11.0.3",
+    "axios": "1.7.5",
     "bootstrap": "4.6.2",
     "bootstrap-vue": "2.23.1",
     "bootswatch": "4.6.2",
     "deepmerge": "4.3.1",
     "js-cookie": "3.0.5",
-    "pinia": "2.1.7",
+    "pinia": "2.2.2",
     "rxjs": "7.8.1",
     "sockjs-client": "1.6.1",
-    "vue": "3.4.21",
-    "vue-i18n": "9.13.1",
-    "vue-router": "4.3.2"
+    "vue": "3.4.38",
+    "vue-i18n": "9.14.0",
+    "vue-router": "4.4.3"
   },
   "devDependencies": {
+    "@eslint/js": "9.9.1",
     "@module-federation/utilities": "3.0.3-0",
-    "@pinia/testing": "0.1.3",
-    "@rushstack/eslint-patch": "1.10.3",
+    "@pinia/testing": "0.1.5",
     "@tsconfig/node18": "18.2.4",
     "@types/node": "20.11.25",
     "@types/sinon": "17.0.3",
-    "@vitejs/plugin-vue": "5.0.4",
-    "@vue/eslint-config-prettier": "9.0.0",
-    "@vue/eslint-config-typescript": "10.0.0",
+    "@vitejs/plugin-vue": "5.1.2",
     "@vue/test-utils": "2.4.6",
     "@vue/tsconfig": "0.5.1",
-    "autoprefixer": "10.4.19",
-    "axios-mock-adapter": "1.22.0",
+    "autoprefixer": "10.4.20",
+    "axios-mock-adapter": "2.0.0",
     "browser-sync-webpack-plugin": "2.3.0",
     "copy-webpack-plugin": "12.0.2",
     "css-loader": "7.1.2",
     "css-minimizer-webpack-plugin": "7.0.0",
-    "eslint": "8.57.0",
-    "eslint-plugin-prettier": "5.1.3",
-    "eslint-plugin-vue": "8.7.1",
+    "eslint": "9.9.1",
+    "eslint-plugin-prettier": "5.2.1",
+    "eslint-plugin-vue": "9.27.0",
     "flush-promises": "1.0.2",
     "folder-hash": "4.0.4",
-    "happy-dom": "14.12.0",
+    "happy-dom": "14.12.3",
     "html-webpack-plugin": "5.6.0",
     "merge-jsons-webpack-plugin": "2.0.1",
-    "mini-css-extract-plugin": "2.9.0",
+    "mini-css-extract-plugin": "2.9.1",
     "numeral": "2.0.6",
     "postcss-import": "16.1.0",
     "postcss-loader": "8.1.1",
     "postcss-url": "10.1.3",
-    "rimraf": "5.0.7",
-    "sass": "1.77.3",
-    "sass-loader": "14.2.1",
+    "rimraf": "5.0.8",
+    "sass": "1.77.8",
+    "sass-loader": "16.0.1",
     "sinon": "18.0.0",
     "terser-webpack-plugin": "5.3.10",
     "ts-loader": "9.5.1",
-    "typescript": "5.4.5",
-    "vite": "5.2.12",
-    "vite-plugin-static-copy": "1.0.5",
-    "vitest": "1.6.0",
+    "typescript": "5.5.4",
+    "typescript-eslint": "8.2.0",
+    "vite": "5.4.2",
+    "vite-plugin-static-copy": "1.0.6",
+    "vitest": "2.0.5",
     "vitest-sonar-reporter": "2.0.0",
     "vue-loader": "17.4.2",
     "vue-style-loader": "4.1.3",
-    "vue-tsc": "2.0.19",
-    "webpack": "5.91.0",
+    "vue-tsc": "2.0.29",
+    "webpack": "5.94.0",
     "webpack-bundle-analyzer": "4.10.2",
     "webpack-cli": "5.1.4",
     "webpack-dev-server": "5.0.4",
-    "webpack-merge": "5.10.0",
+    "webpack-merge": "6.0.1",
     "workbox-webpack-plugin": "7.1.0"
   }
 }

package/dist/generators/vue/support/translate-vue.js

@@ -19,7 +19,7 @@
 import { passthrough } from '@yeoman/transform';
 import { Minimatch } from 'minimatch';
 function replaceTranslationAttributes({ content, 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 = args.pop();
         if (groups.translate.includes('+')) {
             return '';

package/dist/generators/vue/templates/.postcssrc.js.ejs

@@ -5,6 +5,6 @@ module.exports = {
     'postcss-import': {},
     'postcss-url': {},
     // to edit target browsers: use "browserslist" field in package.json
-    autoprefixer: {}
-  }
+    autoprefixer: {},
+  },
 };

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

@@ -0,0 +1,74 @@
+<%#
+ Copyright 2013-2024 the original author or authors from the JHipster project.
+
+ This file is part of the JHipster project, see https://www.jhipster.tech/
+ for more information.
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+-%>
+<&_ if (fragment.importsSection) { -&>
+import js from '@eslint/js';
+import vue from 'eslint-plugin-vue';
+
+<&_ } -&>
+<&_ if (fragment.configSection) { -&>
+  { ignores: ['<%- this.relativeDir(clientRootDir, clientDistDir) %>', '<%- temporaryDir %>'] },
+  js.configs.recommended,
+  ...tseslint.configs.recommended.map(config =>
+    config.name === 'typescript-eslint/base' ? config : { ...config, files: [ '**/*.ts', '**/*.tsx', '**/*.mts', '**/*.cts' ] },
+  ),
+  {
+    files: ['**/*.{js,cjs,mjs}'],
+    rules: {
+      'no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
+    },
+  },
+  ...vue.configs['flat/recommended'],
+  {
+    files: ['**/*.vue'],
+    languageOptions: {
+      parserOptions: { parser: '@typescript-eslint/parser' },
+      globals: { ...globals.browser },
+    },
+  },
+  {
+    files: ['<%- this.relativeDir(clientRootDir, clientSrcDir) %>**/*.vue', '<%- this.relativeDir(clientRootDir, clientSrcDir) %>**/*.ts'],
+    languageOptions: {
+      globals: { ...globals.browser },
+    },
+    rules: {
+      'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+      'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+      'vue/multi-word-component-names': 'off',
+      '@typescript-eslint/no-explicit-any': 'off',
+      '@typescript-eslint/no-unused-vars': 'off',
+      '@typescript-eslint/explicit-module-boundary-types': 'off',
+      '@typescript-eslint/no-empty-function': 'off',
+      '@typescript-eslint/ban-ts-comment': 'off',
+      '@typescript-eslint/no-var-requires': 'off',
+      '@typescript-eslint/consistent-type-imports': 'error',
+      'vue/no-v-text-v-html-on-component': [
+        'error',
+        { 'allow': ['router-link', 'b-alert', 'b-badge', 'b-button', 'b-link'] },
+      ],
+      'vue/no-reserved-component-names': 'off',
+      'vue/attributes-order': 'off',
+    },
+  },
+  {
+    files: ['<%- this.relativeDir(clientRootDir, clientSrcDir) %>**/*.spec.ts'],
+    rules: {
+      '@typescript-eslint/no-empty-function': 'off',
+    },
+  },
+<&_ } -&>

package/dist/generators/vue/templates/package.json.ejs

@@ -83,15 +83,13 @@
     "webpack-merge": "<%= nodeDependencies['webpack-merge'] %>",
     "workbox-webpack-plugin": "<%= nodeDependencies['workbox-webpack-plugin'] %>",
 <%_ } _%>
+    "@eslint/js": null,
     "@pinia/testing": "<%= nodeDependencies['@pinia/testing'] %>",
-    "@rushstack/eslint-patch": "<%= nodeDependencies['@rushstack/eslint-patch'] %>",
     "@types/node": "<%= nodeDependencies['@types/node'] %>",
     "@types/sinon": "<%= nodeDependencies['@types/sinon'] %>",
     "@tsconfig/node18": null,
     "@vitejs/plugin-vue": "<%= nodeDependencies['@vitejs/plugin-vue'] %>",
     "@vitest/coverage-v8": "<%= nodeDependencies.vitest %>",
-    "@vue/eslint-config-prettier": "<%= nodeDependencies['@vue/eslint-config-prettier'] %>",
-    "@vue/eslint-config-typescript": "<%= nodeDependencies['@vue/eslint-config-typescript'] %>",
     "@vue/test-utils": "<%= nodeDependencies['@vue/test-utils'] %>",
     "@vue/tsconfig": null,
     "axios-mock-adapter": "<%= nodeDependencies['axios-mock-adapter'] %>",
@@ -109,9 +107,11 @@
     "sinon": "<%= nodeDependencies['sinon'] %>",
     "swagger-ui-dist": "<%= nodeDependencies['swagger-ui-dist'] %>",
     "eslint": "<%= nodeDependencies['eslint'] %>",
+    "eslint-config-prettier": null,
     "eslint-plugin-prettier": "<%= nodeDependencies['eslint-plugin-prettier'] %>",
     "eslint-plugin-vue": "<%= nodeDependencies['eslint-plugin-vue'] %>",
     "typescript": "<%= nodeDependencies['typescript'] %>",
+    "typescript-eslint": null,
     "vite": null,
     "vitest": "<%= nodeDependencies.vitest %>",
     "vite-plugin-static-copy": null,
@@ -132,8 +132,8 @@
     "prettier:check": "prettier --check \"{,src/**/,.blueprint/**/}*.{<%= prettierExtensions %>}\"",
     "prettier:format": "prettier --write \"{,src/**/,.blueprint/**/}*.{<%= prettierExtensions %>}\"",
 <%_ } %>
-    "lint": "eslint . --ext .ts,.vue ",
-    "lint:fix": "eslint . --ext .ts,.vue --fix",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
     "cleanup": "rimraf <%= this.relativeDir(clientRootDir, temporaryDir) %>",
     "clean-www": "rimraf <%= this.relativeDir(clientRootDir, clientDistDir) %>",
     "start": "<%= clientPackageManager %> run webapp:dev --",

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

@@ -34,7 +34,9 @@ describe('Account Service test suite', () => {
 
   it('should init service and do not retrieve account', async () => {
     axiosStub.get.resolves({});
-    axiosStub.get.withArgs('management/info').resolves({ status: 200, data: { 'display-ribbon-on-profiles': 'dev', activeProfiles: ['dev', 'test'] } });
+    axiosStub.get
+      .withArgs('management/info')
+      .resolves({ status: 200, data: { 'display-ribbon-on-profiles': 'dev', activeProfiles: ['dev', 'test'] } });
 
     accountService = new AccountService(store);
     await accountService.update();

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

@@ -18,7 +18,7 @@ export default class AccountService {
       const res = await axios.get<any>('management/info');
       if (res.data && res.data.activeProfiles) {
         this.store.setRibbonOnProfiles(res.data['display-ribbon-on-profiles']);
-        this.store.setActiveProfiles(res.data['activeProfiles']);
+        this.store.setActiveProfiles(res.data.activeProfiles);
       }
       return true;
     } catch (error) {

package/dist/generators/vue/templates/src/main/webapp/app/account/activate/activate.component.ts.ejs

@@ -24,7 +24,7 @@ export default defineComponent({
         error.value = true;
         success.value = false;
       }
-    })
+    });
 
     const openLogin = () => {
       loginService.openLogin();

package/dist/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.

package/dist/generators/vue/templates/src/main/webapp/app/account/change-password/change-password.component.spec.ts.ejs

@@ -23,15 +23,14 @@ describe('ChangePassword Component', () => {
     axiosStub.get.resolves({});
     axiosStub.post.reset();
 
-    const wrapper = shallowMount(ChangePassword,
-      {
-        global: {
-          plugins: [pinia],
-          provide: {
-            currentUsername: computed(() => 'username'),
-          },
+    const wrapper = shallowMount(ChangePassword, {
+      global: {
+        plugins: [pinia],
+        provide: {
+          currentUsername: computed(() => 'username'),
         },
-      });
+      },
+    });
     changePassword = wrapper.vm;
   });
 
@@ -56,10 +55,12 @@ describe('ChangePassword Component', () => {
     await changePassword.$nextTick();
 
     // THEN
-    expect(axiosStub.post.calledWith('api/account/change-password', {
-      currentPassword: 'password1',
-      newPassword: 'password1'
-    })).toBeTruthy();
+    expect(
+      axiosStub.post.calledWith('api/account/change-password', {
+        currentPassword: 'password1',
+        newPassword: 'password1',
+      }),
+    ).toBeTruthy();
 
     expect(changePassword.doNotMatch).toBeNull();
     expect(changePassword.error).toBeNull();

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

@@ -1,86 +1,131 @@
 <template>
-    <div>
-        <div class="row justify-content-center">
-            <div class="col-md-8 toastify-container">
-                <h2 v-if="username" id="password-title">
-                    <span v-html="t$('password.title', { username: username })">
-                      Password for [<strong>{{ username }}</strong>]</span>
-                </h2>
+  <div>
+    <div class="row justify-content-center">
+      <div class="col-md-8 toastify-container">
+        <h2 v-if="username" id="password-title">
+          <span v-html="t$('password.title', { username: username })">
+            Password for [<strong>{{ username }}</strong
+            >]</span
+          >
+        </h2>
 
-                <div class="alert alert-success" role="alert" v-if="success" v-html="t$('password.messages.success')">
-                    <strong>Password changed!</strong>
-                </div>
-                <div class="alert alert-danger" role="alert" v-if="error" v-html="t$('password.messages.error')">
-                    <strong>An error has occurred!</strong> The password could not be changed.
-                </div>
-
-                <div class="alert alert-danger" role="alert" v-if="doNotMatch"
-                    v-text="t$('global.messages.error.dontmatch')">
-                    The password and its confirmation do not match!
-                </div>
+        <div class="alert alert-success" role="alert" v-if="success" v-html="t$('password.messages.success')">
+          <strong>Password changed!</strong>
+        </div>
+        <div class="alert alert-danger" role="alert" v-if="error" v-html="t$('password.messages.error')">
+          <strong>An error has occurred!</strong> The password could not be changed.
+        </div>
 
-                <form name="form" id="password-form" v-on:submit.prevent="changePassword()">
-                    <div class="form-group">
-                        <label class="form-control-label" for="currentPassword"
-                            v-text="t$('global.form[\'currentpassword.label\']')">Current password</label>
-                        <input type="password" class="form-control" id="currentPassword" name="currentPassword"
-                            :class="{ valid: !v$.resetPassword.currentPassword.$invalid, invalid: v$.resetPassword.currentPassword.$invalid }"
-                            v-bind:placeholder="t$('global.form[\'currentpassword.placeholder\']')"
-                            v-model="v$.resetPassword.currentPassword.$model" required data-cy="currentPassword" />
-                        <div
-                            v-if="v$.resetPassword.currentPassword.$anyDirty && v$.resetPassword.currentPassword.$invalid">
-                            <small class="form-text text-danger" v-if="!v$.resetPassword.currentPassword.required"
-                                v-text="t$('global.messages.validate.newpassword.required')">
-                                Your password is required.
-                            </small>
-                        </div>
-                    </div>
-                    <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\']')"
-                            :class="{ valid: !v$.resetPassword.newPassword.$invalid, invalid: v$.resetPassword.newPassword.$invalid }"
-                            v-model="v$.resetPassword.newPassword.$model" minlength="4" maxlength="50" required data-cy="newPassword" />
-                        <div v-if="v$.resetPassword.newPassword.$anyDirty && v$.resetPassword.newPassword.$invalid">
-                            <small class="form-text text-danger" v-if="!v$.resetPassword.newPassword.required"
-                                v-text="t$('global.messages.validate.newpassword.required')">
-                                Your password is required.
-                            </small>
-                            <small class="form-text text-danger" v-if="!v$.resetPassword.newPassword.minLength"
-                                v-text="t$('global.messages.validate.newpassword.minlength')">
-                                Your password is required to be at least 4 characters.
-                            </small>
-                            <small class="form-text text-danger" v-if="!v$.resetPassword.newPassword.maxLength"
-                                v-text="t$('global.messages.validate.newpassword.maxlength')">
-                                Your password cannot be longer than 50 characters.
-                            </small>
-                        </div>
-                    </div>
-                    <div class="form-group">
-                        <label class="form-control-label" for="confirmPassword"
-                            v-text="t$('global.form[\'confirmpassword.label\']')">New password confirmation</label>
-                        <input type="password" class="form-control" id="confirmPassword" name="confirmPassword"
-                            :class="{ valid: !v$.resetPassword.confirmPassword.$invalid, invalid: v$.resetPassword.confirmPassword.$invalid }"
-                            v-bind:placeholder="t$('global.form[\'confirmpassword.placeholder\']')"
-                            v-model="v$.resetPassword.confirmPassword.$model" minlength="4" maxlength="50" required data-cy="confirmPassword" />
-                        <div
-                            v-if="v$.resetPassword.confirmPassword.$anyDirty && v$.resetPassword.confirmPassword.$invalid">
-                            <small class="form-text text-danger" v-if="!v$.resetPassword.confirmPassword.sameAsPassword"
-                                v-text="t$('global.messages.error.dontmatch')">
-                                The password and its confirmation do not match!
-                            </small>
-                        </div>
-                    </div>
+        <div class="alert alert-danger" role="alert" v-if="doNotMatch" v-text="t$('global.messages.error.dontmatch')">
+          The password and its confirmation do not match!
+        </div>
 
-                    <button type="submit" :disabled="v$.resetPassword.$invalid" class="btn btn-primary"
-                        v-text="t$('password.form.button')" data-cy="submit">
-                        Save
-                    </button>
-                </form>
+        <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
+            >
+            <input
+              type="password"
+              class="form-control"
+              id="currentPassword"
+              name="currentPassword"
+              :class="{ valid: !v$.resetPassword.currentPassword.$invalid, invalid: v$.resetPassword.currentPassword.$invalid }"
+              :placeholder="t$('global.form[\'currentpassword.placeholder\']')"
+              v-model="v$.resetPassword.currentPassword.$model"
+              required
+              data-cy="currentPassword"
+            />
+            <div v-if="v$.resetPassword.currentPassword.$anyDirty && v$.resetPassword.currentPassword.$invalid">
+              <small
+                class="form-text text-danger"
+                v-if="!v$.resetPassword.currentPassword.required"
+                v-text="t$('global.messages.validate.newpassword.required')"
+              >
+                Your password is required.
+              </small>
             </div>
-        </div>
+          </div>
+          <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"
+              :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"
+              maxlength="50"
+              required
+              data-cy="newPassword"
+            />
+            <div v-if="v$.resetPassword.newPassword.$anyDirty && v$.resetPassword.newPassword.$invalid">
+              <small
+                class="form-text text-danger"
+                v-if="!v$.resetPassword.newPassword.required"
+                v-text="t$('global.messages.validate.newpassword.required')"
+              >
+                Your password is required.
+              </small>
+              <small
+                class="form-text text-danger"
+                v-if="!v$.resetPassword.newPassword.minLength"
+                v-text="t$('global.messages.validate.newpassword.minlength')"
+              >
+                Your password is required to be at least 4 characters.
+              </small>
+              <small
+                class="form-text text-danger"
+                v-if="!v$.resetPassword.newPassword.maxLength"
+                v-text="t$('global.messages.validate.newpassword.maxlength')"
+              >
+                Your password cannot be longer than 50 characters.
+              </small>
+            </div>
+          </div>
+          <div class="form-group">
+            <label class="form-control-label" for="confirmPassword" v-text="t$('global.form[\'confirmpassword.label\']')"
+              >New password confirmation</label
+            >
+            <input
+              type="password"
+              class="form-control"
+              id="confirmPassword"
+              name="confirmPassword"
+              :class="{ valid: !v$.resetPassword.confirmPassword.$invalid, invalid: v$.resetPassword.confirmPassword.$invalid }"
+              :placeholder="t$('global.form[\'confirmpassword.placeholder\']')"
+              v-model="v$.resetPassword.confirmPassword.$model"
+              minlength="4"
+              maxlength="50"
+              required
+              data-cy="confirmPassword"
+            />
+            <div v-if="v$.resetPassword.confirmPassword.$anyDirty && v$.resetPassword.confirmPassword.$invalid">
+              <small
+                class="form-text text-danger"
+                v-if="!v$.resetPassword.confirmPassword.sameAsPassword"
+                v-text="t$('global.messages.error.dontmatch')"
+              >
+                The password and its confirmation do not match!
+              </small>
+            </div>
+          </div>
+
+          <button
+            type="submit"
+            :disabled="v$.resetPassword.$invalid"
+            class="btn btn-primary"
+            v-text="t$('password.form.button')"
+            data-cy="submit"
+          >
+            Save
+          </button>
+        </form>
+      </div>
     </div>
+  </div>
 </template>
 
 <script lang="ts" src="./change-password.component.ts"></script>