Merge pull request 'feat: refs #7196 update vite and q-calendar' (!1264) from 7196-updateVite into dev

Reviewed-on: #1264
Reviewed-by: Javier Segarra <jsegarra@verdnatura.es>

.eslintrc.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
     // https://eslint.org/docs/user-guide/configuring#configuration-cascading-and-hierarchy
     // This option interrupts the configuration hierarchy at this file
     // Remove this if you have an higher level ESLint config file (it usually happens into a monorepos)
@@ -58,7 +58,7 @@ module.exports = {
     rules: {
         'prefer-promise-reject-errors': 'off',
         'no-unused-vars': 'warn',
-        "vue/no-multiple-template-root": "off" ,
+        'vue/no-multiple-template-root': 'off',
         // allow debugger during development only
         'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     },

.husky/addReferenceTag.js

@@ -1,23 +1,24 @@
-const fs = require('fs');
+import { existsSync, readFileSync, writeFileSync } from 'fs';
-const path = require('path');
+import { join, resolve } from 'path';
 
 function getCurrentBranchName(p = process.cwd()) {
-    if (!fs.existsSync(p)) return false;
+    if (!existsSync(p)) return false;
 
-    const gitHeadPath = path.join(p, '.git', 'HEAD');
+    const gitHeadPath = join(p, '.git', 'HEAD');
 
-    if (!fs.existsSync(gitHeadPath))
+    if (!existsSync(gitHeadPath)) {
-        return getCurrentBranchName(path.resolve(p, '..'));
+        return getCurrentBranchName(resolve(p, '..'));
+    }
 
-    const headContent = fs.readFileSync(gitHeadPath, 'utf-8');
+    const headContent = readFileSync(gitHeadPath, 'utf-8');
     return headContent.trim().split('/')[2];
 }
 
 const branchName = getCurrentBranchName();
 
 if (branchName) {
-    const msgPath = `.git/COMMIT_EDITMSG`;
+    const msgPath = '.git/COMMIT_EDITMSG';
-    const msg = fs.readFileSync(msgPath, 'utf-8');
+    const msg = readFileSync(msgPath, 'utf-8');
     const reference = branchName.match(/^\d+/);
 
     const referenceTag = `refs #${reference}`;
@@ -26,8 +27,7 @@ if (branchName) {
 
         if (splitedMsg.length > 1) {
             const finalMsg = splitedMsg[0] + ': ' + referenceTag + splitedMsg.slice(1).join(':');
-            fs.writeFileSync(msgPath, finalMsg);
+            writeFileSync(msgPath, finalMsg);
         }
     }
 }
-

.prettierrc.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
     singleQuote: true,
     printWidth: 90,
     tabWidth: 4,

commitlint.config.js

@@ -1 +1 @@
-module.exports = { extends: ['@commitlint/config-conventional'] };
+export default { extends: ['@commitlint/config-conventional'] };

cypress.config.js

@@ -1,9 +1,9 @@
-const { defineConfig } = require('cypress');
+import { defineConfig } from 'cypress';
 // https://docs.cypress.io/app/tooling/reporters
 // https://docs.cypress.io/app/references/configuration
 // https://www.npmjs.com/package/cypress-mochawesome-reporter
 
-module.exports = defineConfig({
+export default defineConfig({
     e2e: {
         baseUrl: 'http://localhost:9000/',
         experimentalStudio: true,
@@ -31,7 +31,7 @@ module.exports = defineConfig({
             supportFile: 'test/cypress/support/unit.js',
         },
         setupNodeEvents(on, config) {
-            require('cypress-mochawesome-reporter/plugin')(on);
+            import('cypress-mochawesome-reporter/plugin').then((plugin) => plugin.default(on));
             // implement node event listeners here
         },
         viewportWidth: 1280,

package.json

@@ -6,6 +6,7 @@
     "author": "Verdnatura",
     "private": true,
     "packageManager": "pnpm@8.15.1",
+    "type": "module",
     "scripts": {
         "resetDatabase": "cd ../salix && gulp docker",
         "lint": "eslint --ext .js,.vue ./",
@@ -20,14 +21,14 @@
         "addReferenceTag": "node .husky/addReferenceTag.js"
     },
     "dependencies": {
-        "@quasar/cli": "^2.3.0",
+        "@quasar/cli": "^2.4.1",
-        "@quasar/extras": "^1.16.14",
+        "@quasar/extras": "^1.16.16",
         "axios": "^1.4.0",
         "chromium": "^3.0.3",
         "croppie": "^2.6.5",
         "moment": "^2.30.1",
         "pinia": "^2.1.3",
-        "quasar": "^2.17.4",
+        "quasar": "^2.17.7",
         "validator": "^13.9.0",
         "vue": "^3.5.13",
         "vue-i18n": "^9.3.0",
@@ -36,22 +37,23 @@
     "devDependencies": {
         "@commitlint/cli": "^19.2.1",
         "@commitlint/config-conventional": "^19.1.0",
-        "@intlify/unplugin-vue-i18n": "^0.8.1",
+        "@intlify/unplugin-vue-i18n": "^0.8.2",
         "@pinia/testing": "^0.1.2",
-        "@quasar/app-vite": "^1.11.0",
+        "@quasar/app-vite": "^2.0.8",
-        "@quasar/quasar-app-extension-qcalendar": "4.0.0-beta.15",
+        "@quasar/quasar-app-extension-qcalendar": "^4.0.2",
         "@quasar/quasar-app-extension-testing-unit-vitest": "^0.4.0",
         "@vue/test-utils": "^2.4.4",
         "autoprefixer": "^10.4.14",
         "cypress": "^13.6.6",
         "cypress-mochawesome-reporter": "^3.8.2",
-        "eslint": "^8.41.0",
+        "eslint": "^9.18.0",
-        "eslint-config-prettier": "^8.8.0",
+        "eslint-config-prettier": "^10.0.1",
-        "eslint-plugin-cypress": "^2.13.3",
+        "eslint-plugin-cypress": "^4.1.0",
-        "eslint-plugin-vue": "^9.14.1",
+        "eslint-plugin-vue": "^9.32.0",
         "husky": "^8.0.0",
         "postcss": "^8.4.23",
-        "prettier": "^2.8.8",
+        "prettier": "^3.4.2",
+        "sass": "^1.83.4",
         "vitest": "^0.34.0"
     },
     "engines": {
@@ -61,8 +63,8 @@
         "bun": ">= 1.0.25"
     },
     "overrides": {
-        "@vitejs/plugin-vue": "^5.0.4",
+        "@vitejs/plugin-vue": "^5.2.1",
-        "vite": "^5.1.4",
+        "vite": "^6.0.11",
         "vitest": "^0.31.1"
     }
 }

postcss.config.js

@@ -1,10 +1,14 @@
 /* eslint-disable */
 // https://github.com/michael-ciniawsky/postcss-load-config
 
-module.exports = {
+import autoprefixer from 'autoprefixer';
+// Uncomment the following line if you want to support RTL CSS
+// import rtlcss from 'postcss-rtlcss';
+
+export default {
     plugins: [
         // https://github.com/postcss/autoprefixer
-        require('autoprefixer')({
+        autoprefixer({
             overrideBrowserslist: [
                 'last 4 Chrome versions',
                 'last 4 Firefox versions',
@@ -18,10 +22,7 @@ module.exports = {
         }),
 
         // https://github.com/elchininet/postcss-rtlcss
-        // If you want to support RTL css, then
+        // If you want to support RTL CSS, uncomment the following line:
-        // 1. yarn/npm install postcss-rtlcss
+        // rtlcss(),
-        // 2. optionally set quasar.config.js > framework > lang to an RTL language
-        // 3. uncomment the following line:
-        // require('postcss-rtlcss')
     ],
 };

quasar.config.js

@@ -8,11 +8,11 @@
 // Configuration for your app
 // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js
 
-const { configure } = require('quasar/wrappers');
+import { configure } from 'quasar/wrappers';
-const VueI18nPlugin = require('@intlify/unplugin-vue-i18n/vite');
+import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite';
-const path = require('path');
+import path from 'path';
 
-module.exports = configure(function (/* ctx */) {
+export default configure(function (/* ctx */) {
     return {
         eslint: {
             // fix: true,

quasar.extensions.json

@@ -1,6 +1,8 @@
 {
     "@quasar/testing-unit-vitest": {
-        "options": ["scripts"]
+        "options": [
+            "scripts"
+        ]
     },
     "@quasar/qcalendar": {}
 }

src/components/common/VnDmsList.vue

@@ -102,7 +102,7 @@ const columns = computed(() => [
                 storage: 'dms',
                 collection: null,
                 resolution: null,
-                id: prop.row.file.split('.')[0],
+                id: Number(prop.row.file.split('.')[0]),
                 token: token,
                 class: 'rounded',
                 ratio: 1,

src/components/ui/QCalendarMonthWrapper.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { computed } from 'vue';
 import { useQuasar } from 'quasar';
-import '@quasar/quasar-ui-qcalendar/src/QCalendarVariables.sass';
+import '@quasar/quasar-ui-qcalendar/src/QCalendarVariables.scss';
 
 const $props = defineProps({
     bordered: {

src/css/app.scss

@@ -1,6 +1,6 @@
 // app global css in SCSS form
 @import './icons.scss';
-@import '@quasar/quasar-ui-qcalendar/src/QCalendarMonth.sass';
+@import '@quasar/quasar-ui-qcalendar/src/QCalendarMonth.scss';
 
 body.body--light {
     --vn-header-color: #cecece;

src/pages/Worker/Card/WorkerCalendarItem.vue

@@ -6,7 +6,7 @@ import { useRoute } from 'vue-router';
 
 import QCalendarMonthWrapper from 'src/components/ui/QCalendarMonthWrapper.vue';
 import { QCalendarMonth } from '@quasar/quasar-ui-qcalendar/src/index.js';
-import '@quasar/quasar-ui-qcalendar/src/QCalendarVariables.sass';
+import '@quasar/quasar-ui-qcalendar/src/QCalendarVariables.scss';
 
 import { useWeekdayStore } from 'src/stores/useWeekdayStore';
 import useNotify from 'src/composables/useNotify.js';

src/pages/Zone/ZoneCalendar.vue

@@ -7,7 +7,7 @@ import { useRoute } from 'vue-router';
 import ZoneClosingTable from './ZoneClosingTable.vue';
 import QCalendarMonthWrapper from 'src/components/ui/QCalendarMonthWrapper.vue';
 import { QCalendarMonth } from '@quasar/quasar-ui-qcalendar/src/index.js';
-import '@quasar/quasar-ui-qcalendar/src/QCalendarVariables.sass';
+import '@quasar/quasar-ui-qcalendar/src/QCalendarVariables.scss';
 
 import { useWeekdayStore } from 'src/stores/useWeekdayStore';
 import axios from 'axios';