feat: refs #7220 ok FormModel

.eslintrc.cjs

@@ -25,7 +25,7 @@ module.exports = {
         // 'plugin:vue/vue3-essential', // Priority A: Essential (Error Prevention)
         'plugin:vue/vue3-strongly-recommended', // Priority B: Strongly Recommended (Improving Readability)
         // 'plugin:vue/vue3-recommended', // Priority C: Recommended (Minimizing Arbitrary Choices and Cognitive Overhead)
-
+        'plugin:cypress/recommended',
         // https://github.com/prettier/eslint-config-prettier#installation
         // usage with Prettier, provided by 'eslint-config-prettier'.
         'prettier',
@@ -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',
     },

.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "msedge",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:5000",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}

cypress.config.js

@@ -1,6 +1,12 @@
 const { defineConfig } = require('cypress');
+const {
+    injectQuasarDevServerConfig,
+} = require('@quasar/quasar-app-extension-testing-e2e-cypress/cct-dev-server');
 
 module.exports = defineConfig({
+    env: {
+        baseUrl: 'http://localhost:9000/',
+    },
     e2e: {
         baseUrl: 'http://localhost:9000/',
         experimentalStudio: true,
@@ -18,6 +24,29 @@ module.exports = defineConfig({
         },
         setupNodeEvents(on, config) {
             // implement node event listeners here
+            on('after:spec', (results) => {
+                // `results` is the tests results
+                console.error('results: ', results);
+                cy.exec('cd ../salix && gulp docker');
+            });
+        },
+    },
+
+    component: {
+        indexHtmlFile: 'test/cypress/support/component-index.html',
+        supportFile: 'test/cypress/support/component.js',
+        specPattern: 'test/cypress/components/**/*.spec.js',
+        devServer: {
+            framework: 'quasar',
+            bundler: 'vite',
+        },
+        setupNodeEvents(on, config) {
+            // implement node event listeners here
+            on('after:spec', (results) => {
+                // `results` is the tests results
+                console.error('results: ', results);
+                cy.exec('cd ../salix && gulp docker');
+            });
         },
     },
 });

generate-tests.js

@@ -0,0 +1,45 @@
+const fs = require('fs');
+const path = require('path');
+// Ruta de la carpeta de componentes
+
+// Ruta de la carpeta de pruebas
+// ['common', 'ui'].forEach((folder) => {
+generateTest('folder');
+// });
+function generateTest(type) {
+    const componentsDir = path.join(__dirname, `src/components`);
+    const testDir = path.join(__dirname, `test/cypress/components`);
+    // Leer todos los archivos en la carpeta de componentes
+    fs.readdir(componentsDir, (err, files) => {
+        if (err) return console.error('Error leyendo la carpeta de componentes:', err);
+
+        // Filtrar solo archivos .vue
+        const vueFiles = files.filter((file) => file.endsWith('.vue'));
+
+        vueFiles.forEach((file) => {
+            const componentName = path.basename(file, '.vue');
+            const testFileName = `${componentName}.spec.js`;
+            const testFilePath = path.join(testDir, testFileName);
+
+            // Contenido del archivo de prueba
+            const testFileContent = `
+import ${componentName} from 'src/components/${file}';
+
+describe.skip('<${componentName} />', () => {
+    it('TODO: boilerplate', () => {
+        // see: https://on.cypress.io/mounting-vue
+        cy.createWrapper(${componentName});
+    });
+});
+`;
+
+            // Escribir el archivo de prueba
+            fs.writeFile(testFilePath, testFileContent, (err) => {
+                if (err)
+                    return console.error('Error escribiendo el archivo de prueba:', err);
+
+                console.log(`Archivo de prueba generado: ${testFileName}`);
+            });
+        });
+    });
+}

package.json

@@ -10,15 +10,19 @@
         "lint": "eslint --ext .js,.vue ./",
         "format": "prettier --write \"**/*.{js,vue,scss,html,md,json}\" --ignore-path .gitignore",
         "test:e2e": "cypress open",
+        "test:e2e:unit": "cypress run  --component",
+        "test:e2e:unit:ci": "cypress run -p 9000 --component",
         "test:e2e:ci": "cd ../salix && gulp docker && cd ../salix-front && cypress run",
         "test": "echo \"See package.json => scripts for available tests.\" && exit 0",
         "test:unit": "vitest",
         "test:unit:ci": "vitest run",
+        "cypr": "cross-env CYPRESS_REMOTE_DEBUGGING_PORT=9222 cypress open",
         "commitlint": "commitlint --edit",
         "prepare": "npx husky install",
         "addReferenceTag": "node .husky/addReferenceTag.js"
     },
     "dependencies": {
+        "@modyfi/vite-plugin-yaml": "1.0.4",
         "@quasar/cli": "^2.3.0",
         "@quasar/extras": "^1.16.9",
         "axios": "^1.4.0",
@@ -38,7 +42,9 @@
         "@pinia/testing": "^0.1.2",
         "@quasar/app-vite": "^1.7.3",
         "@quasar/quasar-app-extension-qcalendar": "4.0.0-beta.15",
+        "@quasar/quasar-app-extension-testing-e2e-cypress": "^6.1.0",
         "@quasar/quasar-app-extension-testing-unit-vitest": "^0.4.0",
+        "@vitest/ui": "^1.6.0",
         "@vue/test-utils": "^2.4.4",
         "autoprefixer": "^10.4.14",
         "cypress": "^13.6.6",

quasar.config.js

@@ -87,6 +87,7 @@ module.exports = configure(function (/* ctx */) {
             alias: {
                 composables: path.join(__dirname, './src/composables'),
                 filters: path.join(__dirname, './src/filters'),
+                components: path.join(__dirname, './src/components'),
             },
 
             vitePlugins: [

src/components/CreateBankEntityForm.vue

@@ -2,10 +2,9 @@
 import { reactive, ref, onMounted, nextTick, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import VnInput from 'src/components/common/VnInput.vue';
-
 import VnSelect from 'src/components/common/VnSelect.vue';
-import FetchData from 'components/FetchData.vue';
-import VnRow from 'components/ui/VnRow.vue';
+import FetchData from 'src/components/FetchData.vue';
+import VnRow from 'src/components/ui/VnRow.vue';
 import FormModelPopup from './FormModelPopup.vue';
 import { useState } from 'src/composables/useState';
 
@@ -37,7 +36,7 @@ const onDataSaved = (...args) => {
 
 onMounted(async () => {
     await nextTick();
-    bicInputRef.value.focus();
+    bicInputRef?.value?.focus();
 });
 </script>
 
@@ -98,7 +97,7 @@ onMounted(async () => {
     </FormModelPopup>
 </template>
 
-<i18n>
+<i18n lang="yml">
 en:
     title: New bank entity
     subtitle: Please, ensure you put the correct data!

src/components/CreateManualInvoiceForm.vue

@@ -3,8 +3,8 @@ import { reactive, ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 
-import FetchData from 'components/FetchData.vue';
-import VnRow from 'components/ui/VnRow.vue';
+import FetchData from 'src/components/FetchData.vue';
+import VnRow from 'src/components/ui/VnRow.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import FormModelPopup from './FormModelPopup.vue';
@@ -141,7 +141,7 @@ const onDataSaved = async (formData, requestResponse) => {
 }
 </style>
 
-<i18n>
+<i18n lang="yml">
 es:
     Create manual invoice: Crear factura manual
     Ticket: Ticket

src/components/CreateNewCityForm.vue

@@ -2,9 +2,10 @@
 import { onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-import VnRow from 'components/ui/VnRow.vue';
-import VnSelectProvince from 'components/VnSelectProvince.vue';
-import VnInput from 'components/common/VnInput.vue';
+import FetchData from 'src/components/FetchData.vue';
+import VnRow from 'src/components/ui/VnRow.vue';
+import VnSelectProvince from 'src/components/VnSelectProvince.vue';
+import VnInput from 'src/components/common/VnInput.vue';
 import FormModelPopup from './FormModelPopup.vue';
 
 const emit = defineEmits(['onDataSaved']);
@@ -63,7 +64,7 @@ const onDataSaved = (...args) => {
     </FormModelPopup>
 </template>
 
-<i18n>
+<i18n lang="yml">
 es:
     New city: Nueva ciudad
     Please, ensure you put the correct data!: ¡Por favor, asegúrese de poner los datos correctos!

src/components/CreateNewExpenseForm.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
-import VnRow from 'components/ui/VnRow.vue';
+import VnRow from 'src/components/ui/VnRow.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import FormModelPopup from './FormModelPopup.vue';
 
@@ -43,7 +43,7 @@ const { t } = useI18n();
     </FormModelPopup>
 </template>
 
-<i18n>
+<i18n lang="yml">
 es:
     New expense: Nuevo gasto
     It's a withholding: Es una retención

src/components/CreateNewProvinceForm.vue

@@ -2,8 +2,8 @@
 import { reactive, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-import FetchData from 'components/FetchData.vue';
-import VnRow from 'components/ui/VnRow.vue';
+import FetchData from 'src/components/FetchData.vue';
+import VnRow from 'src/components/ui/VnRow.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import FormModelPopup from './FormModelPopup.vue';
@@ -85,7 +85,7 @@ const onDataSaved = (dataSaved, requestResponse) => {
     </FormModelPopup>
 </template>
 
-<i18n>
+<i18n lang="yml">
 es:
     New province: Nueva provincia
     Please, ensure you put the correct data!: ¡Por favor, asegúrese de poner los datos correctos!

src/components/CreateThermographForm.vue

@@ -2,8 +2,8 @@
 import { reactive, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-import FetchData from 'components/FetchData.vue';
-import VnRow from 'components/ui/VnRow.vue';
+import FetchData from 'src/components/FetchData.vue';
+import VnRow from 'src/components/ui/VnRow.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import FormModelPopup from './FormModelPopup.vue';
@@ -95,7 +95,7 @@ const onDataSaved = (dataSaved) => {
     </FormModelPopup>
 </template>
 
-<i18n>
+<i18n lang="yml">
 es:
     Identifier: Identificador
     Model: Modelo

src/components/CrudModel.vue

@@ -5,10 +5,10 @@ import { useRouter, onBeforeRouteLeave } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
 import { useValidator } from 'src/composables/useValidator';
-import { useStateStore } from 'stores/useStateStore';
-import VnPaginate from 'components/ui/VnPaginate.vue';
-import VnConfirm from 'components/ui/VnConfirm.vue';
-import SkeletonTable from 'components/ui/SkeletonTable.vue';
+import { useStateStore } from 'src/stores/useStateStore';
+import VnPaginate from 'src/components/ui/VnPaginate.vue';
+import VnConfirm from 'src/components/ui/VnConfirm.vue';
+import SkeletonTable from 'src/components/ui/SkeletonTable.vue';
 import { tMobile } from 'src/composables/tMobile';
 
 const { push } = useRouter();

src/components/EditPictureForm.vue

@@ -3,8 +3,8 @@ import { reactive, computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import VnSelect from 'src/components/common/VnSelect.vue';
-import FetchData from 'components/FetchData.vue';
-import VnRow from 'components/ui/VnRow.vue';
+import FetchData from 'src/components/FetchData.vue';
+import VnRow from 'src/components/ui/VnRow.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 
 import Croppie from 'croppie/croppie';
@@ -336,7 +336,7 @@ const makeRequest = async () => {
 }
 </style>
 
-<i18n>
+<i18n lang="yml">
 es:
     Edit photo: Editar foto
     Select from computer: Seleccionar desde ordenador

src/components/EditTableCellValueForm.vue

@@ -5,7 +5,7 @@ import { useI18n } from 'vue-i18n';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnInputDate from 'src/components/common/VnInputDate.vue';
-import VnRow from 'components/ui/VnRow.vue';
+import VnRow from 'src/components/ui/VnRow.vue';
 import { QCheckbox } from 'quasar';
 
 import axios from 'axios';
@@ -142,7 +142,7 @@ const closeForm = () => {
 }
 </style>
 
-<i18n>
+<i18n lang="yml">
 es:
     Edit: Editar
     buy(s): compra(s)

src/components/FilterItemForm.vue

@@ -2,10 +2,10 @@
 import { ref, reactive, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-import VnRow from 'components/ui/VnRow.vue';
-import FetchData from 'components/FetchData.vue';
+import VnRow from 'src/components/ui/VnRow.vue';
+import FetchData from 'src/components/FetchData.vue';
 import VnInput from 'src/components/common/VnInput.vue';
-import VnSelect from 'components/common/VnSelect.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
 
 import axios from 'axios';
@@ -208,7 +208,7 @@ const selectItem = ({ id }) => {
     </QForm>
 </template>
 
-<i18n>
+<i18n lang="yml">
 es:
     Filter item: Filtrar artículo
     Enter a new search: Introduce una nueva búsqueda

src/components/FilterTravelForm.vue

@@ -2,10 +2,10 @@
 import { ref, reactive, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-import VnRow from 'components/ui/VnRow.vue';
-import FetchData from 'components/FetchData.vue';
+import VnRow from 'src/components/ui/VnRow.vue';
+import FetchData from 'src/components/FetchData.vue';
 import VnInputDate from 'src/components/common/VnInputDate.vue';
-import VnSelect from 'components/common/VnSelect.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 import TravelDescriptorProxy from 'src/pages/Travel/Card/TravelDescriptorProxy.vue';
 
 import axios from 'axios';
@@ -207,7 +207,7 @@ const selectTravel = ({ id }) => {
     </QForm>
 </template>
 
-<i18n>
+<i18n lang="yml">
 es:
     Filter travels: Filtro envíos
     Enter a new search: Introduce una nueva búsqueda

src/components/FormModel.vue

@@ -5,10 +5,10 @@ import { onBeforeRouteLeave, useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
 import { useState } from 'src/composables/useState';
-import { useStateStore } from 'stores/useStateStore';
+import { useStateStore } from 'src/stores/useStateStore';
 import { useValidator } from 'src/composables/useValidator';
 import useNotify from 'src/composables/useNotify.js';
-import SkeletonForm from 'components/ui/SkeletonForm.vue';
+import SkeletonForm from 'src/components/ui/SkeletonForm.vue';
 import VnConfirm from './ui/VnConfirm.vue';
 import { tMobile } from 'src/composables/tMobile';
 import { useArrayData } from 'src/composables/useArrayData';
@@ -302,7 +302,7 @@ defineExpose({
     <Teleport
         to="#st-actions"
         v-if="
-            $props.defaultActions &&
+            $props?.defaultActions &&
             stateStore?.isSubToolbarShown() &&
             componentIsRendered
         "
@@ -363,7 +363,7 @@ defineExpose({
 
     <QInnerLoading
         :showing="isLoading"
-        :label="t('globals.pleaseWait')"
+        :label="$t('globals.pleaseWait')"
         color="primary"
         style="min-width: 100%"
     />

src/components/FormModelPopup.vue

@@ -2,7 +2,7 @@
 import { ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-import FormModel from 'components/FormModel.vue';
+import FormModel from 'src/components/FormModel.vue';
 
 const emit = defineEmits(['onDataSaved', 'onDataCanceled']);
 

src/components/ItemsFilterPanel.vue

@@ -2,11 +2,11 @@
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-import VnInput from 'components/common/VnInput.vue';
-import FetchData from 'components/FetchData.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import FetchData from 'src/components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
-import VnSelect from 'components/common/VnSelect.vue';
-import VnFilterPanelChip from 'components/ui/VnFilterPanelChip.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
+import VnFilterPanelChip from 'src/components/ui/VnFilterPanelChip.vue';
 
 import axios from 'axios';
 
@@ -336,7 +336,7 @@ const removeTag = (index, params, search) => {
 }
 </style>
 
-<i18n>
+<i18n lang="yml">
 en:
     params:
         supplier: Supplier

src/components/NavBar.vue

@@ -2,10 +2,10 @@
 import { onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useState } from 'src/composables/useState';
-import { useStateStore } from 'stores/useStateStore';
+import { useStateStore } from 'src/stores/useStateStore';
 import { useQuasar } from 'quasar';
 import PinnedModules from './PinnedModules.vue';
-import UserPanel from 'components/UserPanel.vue';
+import UserPanel from 'src/components/UserPanel.vue';
 import VnBreadcrumbs from './common/VnBreadcrumbs.vue';
 import VnAvatar from './ui/VnAvatar.vue';
 
@@ -98,6 +98,8 @@ const pinnedModulesRef = ref();
 </template>
 
 <style lang="scss" scoped>
+@import '/src/css/quasar.variables.scss';
+
 .searchbar {
     width: max-content;
 }
@@ -105,7 +107,7 @@ const pinnedModulesRef = ref();
     background-color: var(--vn-section-color);
 }
 </style>
-<i18n>
+<i18n lang="yml">
 en:
     Go to Salix: Go to Salix
 es:

src/components/PinnedModules.vue

@@ -78,7 +78,7 @@ async function redirect() {
 }
 </style>
 
-<i18n>
+<i18n lang="yml">
 en:
     Home: Home
 es:

src/components/RefundInvoiceForm.vue

@@ -3,9 +3,9 @@ import { ref, reactive } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import { useDialogPluginComponent } from 'quasar';
-import VnRow from 'components/ui/VnRow.vue';
-import FetchData from 'components/FetchData.vue';
-import VnSelect from 'components/common/VnSelect.vue';
+import VnRow from 'src/components/ui/VnRow.vue';
+import FetchData from 'src/components/FetchData.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 import FormPopup from './FormPopup.vue';
 import axios from 'axios';
 import useNotify from 'src/composables/useNotify.js';
@@ -150,7 +150,7 @@ const refund = async () => {
     </QDialog>
 </template>
 
-<i18n>
+<i18n lang="yml">
 en:
     Refund invoice: Refund invoice
     Rectificative type: Rectificative type

src/components/RegularizeStockForm.vue

@@ -3,8 +3,8 @@ import { reactive, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import VnSelect from 'src/components/common/VnSelect.vue';
-import FetchData from 'components/FetchData.vue';
-import VnRow from 'components/ui/VnRow.vue';
+import FetchData from 'src/components/FetchData.vue';
+import VnRow from 'src/components/ui/VnRow.vue';
 import FormModelPopup from './FormModelPopup.vue';
 
 const emit = defineEmits(['onDataSaved']);
@@ -73,7 +73,7 @@ const onDataSaved = (data) => {
     </FormModelPopup>
 </template>
 
-<i18n>
+<i18n lang="yml">
 es:
     Warehouse: Almacén
     Type the visible quantity: Introduce la cantidad visible

src/components/TransferInvoiceForm.vue

@@ -3,10 +3,10 @@ import { ref, reactive } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import { useQuasar, useDialogPluginComponent } from 'quasar';
-import VnConfirm from 'components/ui/VnConfirm.vue';
-import VnRow from 'components/ui/VnRow.vue';
-import FetchData from 'components/FetchData.vue';
-import VnSelect from 'components/common/VnSelect.vue';
+import VnConfirm from 'src/components/ui/VnConfirm.vue';
+import VnRow from 'src/components/ui/VnRow.vue';
+import FetchData from 'src/components/FetchData.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 import FormPopup from './FormPopup.vue';
 import axios from 'axios';
 import useNotify from 'src/composables/useNotify.js';
@@ -205,7 +205,7 @@ const makeInvoice = async () => {
     </QDialog>
 </template>
 
-<i18n>
+<i18n lang="yml">
 en:
     checkInfo: New tickets from the destination customer will be generated in the consignee by default.
     transferInvoiceInfo: Destination customer is marked to bill in the consignee

src/components/UserPanel.vue

@@ -8,8 +8,8 @@ import { useState } from 'src/composables/useState';
 import { useSession } from 'src/composables/useSession';
 import { localeEquivalence } from 'src/i18n/index';
 import VnSelect from 'src/components/common/VnSelect.vue';
-import VnRow from 'components/ui/VnRow.vue';
-import FetchData from 'components/FetchData.vue';
+import VnRow from 'src/components/ui/VnRow.vue';
+import FetchData from 'src/components/FetchData.vue';
 import { useClipboard } from 'src/composables/useClipboard';
 import { useRole } from 'src/composables/useRole';
 import VnAvatar from './ui/VnAvatar.vue';

src/components/VnSelectProvince.vue

@@ -1,10 +1,10 @@
 <script setup>
-import { ref, watch } from 'vue';
+import { ref } from 'vue';
 import { useValidator } from 'src/composables/useValidator';
 import { useI18n } from 'vue-i18n';
 
-import VnSelectDialog from 'components/common/VnSelectDialog.vue';
-import FetchData from 'components/FetchData.vue';
+import VnSelectDialog from 'src/components/common/VnSelectDialog.vue';
+import FetchData from 'src/components/FetchData.vue';
 import CreateNewProvinceForm from './CreateNewProvinceForm.vue';
 
 const emit = defineEmits(['onProvinceCreated']);
@@ -78,8 +78,8 @@ async function handleProvinces(data) {
         </template>
     </VnSelectDialog>
 </template>
-<i18n>
-    es:
-        Province: Provincia
+<i18n lang="yml">
+es:
+    Province: Provincia
         Create province: Crear provincia
 </i18n>

src/components/VnTable/VnColumn.vue

@@ -4,14 +4,14 @@ import { QIcon, QCheckbox } from 'quasar';
 import { dashIfEmpty } from 'src/filters';
 
 /* basic input */
-import VnSelect from 'components/common/VnSelect.vue';
-import VnSelectCache from 'components/common/VnSelectCache.vue';
-import VnInput from 'components/common/VnInput.vue';
-import VnInputNumber from 'components/common/VnInputNumber.vue';
-import VnInputDate from 'components/common/VnInputDate.vue';
-import VnInputTime from 'components/common/VnInputTime.vue';
-import VnComponent from 'components/common/VnComponent.vue';
-import VnUserLink from 'components/ui/VnUserLink.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
+import VnSelectCache from 'src/components/common/VnSelectCache.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnInputNumber from 'src/components/common/VnInputNumber.vue';
+import VnInputDate from 'src/components/common/VnInputDate.vue';
+import VnInputTime from 'src/components/common/VnInputTime.vue';
+import VnComponent from 'src/components/common/VnComponent.vue';
+import VnUserLink from 'src/components/ui/VnUserLink.vue';
 
 const model = defineModel(undefined, { required: true });
 const $props = defineProps({

src/components/VnTable/VnFilter.vue

@@ -1,14 +1,14 @@
 <script setup>
 import { markRaw, computed, defineModel } from 'vue';
 import { QCheckbox } from 'quasar';
-import { useArrayData } from 'composables/useArrayData';
+import { useArrayData } from 'src/composables/useArrayData';
 
 /* basic input */
-import VnSelect from 'components/common/VnSelect.vue';
-import VnInput from 'components/common/VnInput.vue';
-import VnInputDate from 'components/common/VnInputDate.vue';
-import VnInputTime from 'components/common/VnInputTime.vue';
-import VnTableColumn from 'components/VnTable/VnColumn.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnInputDate from 'src/components/common/VnInputDate.vue';
+import VnInputTime from 'src/components/common/VnInputTime.vue';
+import VnTableColumn from 'src/components/VnTable/VnColumn.vue';
 
 const $props = defineProps({
     column: {

src/components/VnTable/VnOrder.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { ref } from 'vue';
-import { useArrayData } from 'composables/useArrayData';
+import { useArrayData } from 'src/composables/useArrayData';
 const model = defineModel({ type: Object });
 const $props = defineProps({
     name: {

src/components/VnTable/VnTable.vue

@@ -6,14 +6,14 @@ import { useQuasar } from 'quasar';
 import { useStateStore } from 'stores/useStateStore';
 
 import CrudModel from 'src/components/CrudModel.vue';
-import FormModelPopup from 'components/FormModelPopup.vue';
+import FormModelPopup from 'src/components/FormModelPopup.vue';
 
-import VnFilterPanel from 'components/ui/VnFilterPanel.vue';
-import VnTableColumn from 'components/VnTable/VnColumn.vue';
-import VnFilter from 'components/VnTable/VnFilter.vue';
-import VnTableChip from 'components/VnTable/VnChip.vue';
+import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
+import VnTableColumn from 'src/components/VnTable/VnColumn.vue';
+import VnFilter from 'src/components/VnTable/VnFilter.vue';
+import VnTableChip from 'src/components/VnTable/VnChip.vue';
 import VnVisibleColumn from 'src/components/VnTable/VnVisibleColumn.vue';
-import VnLv from 'components/ui/VnLv.vue';
+import VnLv from 'src/components/ui/VnLv.vue';
 import VnTableOrder from 'src/components/VnTable/VnOrder.vue';
 
 const $props = defineProps({
@@ -751,7 +751,7 @@ function handleScroll() {
         </FormModelPopup>
     </QDialog>
 </template>
-<i18n>
+<i18n lang="yml">
 en:
     status: Status
     table view: Table view

src/components/VnTable/VnVisibleColumn.vue

@@ -181,9 +181,9 @@ onMounted(async () => {
 }
 </style>
 
-<i18n>
-    es:
-        Check the columns you want to see: Marca las columnas que quieres ver
-        Visible columns: Columnas visibles
-        Tick all: Marcar todas
+<i18n lang="yml">
+es:
+    Check the columns you want to see: Marca las columnas que quieres ver
+    Visible columns: Columnas visibles
+    Tick all: Marcar todas
 </i18n>

src/components/common/RightMenu.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { ref, onMounted, useSlots } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useStateStore } from 'stores/useStateStore';
+import { useStateStore } from 'src/stores/useStateStore';
 
 const slots = useSlots();
 const hasContent = ref(false);

src/components/common/SendEmailDialog.vue

@@ -78,8 +78,8 @@ async function confirm() {
 }
 </style>
 
-<i18n>
-    es:
-        Send email notification: Enviar notificación por correo
-        The notification will be sent to the following address: La notificación se enviará a la siguiente dirección
+<i18n lang="yml">
+es:
+    Send email notification: Enviar notificación por correo
+    The notification will be sent to the following address: La notificación se enviará a la siguiente dirección
 </i18n>

src/components/common/SendSmsDialog.vue

@@ -1,15 +1,15 @@
 <script setup>
-import {useDialogPluginComponent} from 'quasar';
-import {useI18n} from 'vue-i18n';
-import {computed, ref} from 'vue';
-import VnInput from 'components/common/VnInput.vue';
+import { useDialogPluginComponent } from 'quasar';
+import { useI18n } from 'vue-i18n';
+import { computed, ref } from 'vue';
+import VnInput from 'src/components/common/VnInput.vue';
 import axios from 'axios';
-import useNotify from "composables/useNotify";
+import useNotify from 'src/composables/useNotify';
 
 const MESSAGE_MAX_LENGTH = 160;
 
-const {t} = useI18n();
-const {notify} = useNotify();
+const { t } = useI18n();
+const { notify } = useNotify();
 const props = defineProps({
     title: {
         type: String,
@@ -34,7 +34,7 @@ const props = defineProps({
 });
 
 const emit = defineEmits([...useDialogPluginComponent.emits, 'sent']);
-const {dialogRef, onDialogHide} = useDialogPluginComponent();
+const { dialogRef, onDialogHide } = useDialogPluginComponent();
 
 const smsRules = [
     (val) => (val && val.length > 0) || t("The message can't be empty"),
@@ -144,7 +144,7 @@ const onSubmit = async () => {
     max-width: 450px;
 }
 </style>
-<i18n>
+<i18n lang="yml">
 es:
     Message: Mensaje
     Send: Enviar

src/components/common/TableVisibleColumns.vue

@@ -191,8 +191,8 @@ onMounted(async () => {
 }
 </style>
 
-<i18n>
-    es:
-        Check the columns you want to see: Marca las columnas que quieres ver
-        Visible columns: Columnas visibles
+<i18n lang="yml">
+es:
+    Check the columns you want to see: Marca las columnas que quieres ver
+    Visible columns: Columnas visibles
 </i18n>

src/components/common/VnBreadcrumbs.vue

@@ -67,7 +67,10 @@ function getBreadcrumb(param) {
         />
     </QBreadcrumbs>
 </template>
-<style lang="scss">
+<style lang="scss" scoped>
+@import '/src/css/quasar.variables.scss';
+@import '/node_modules/quasar/src/css/variables.sass';
+
 .q-breadcrumbs {
     &__el,
     > div {

src/components/common/VnCard.vue

@@ -5,9 +5,9 @@ import { useArrayData } from 'src/composables/useArrayData';
 import { useStateStore } from 'stores/useStateStore';
 import useCardSize from 'src/composables/useCardSize';
 import VnSubToolbar from '../ui/VnSubToolbar.vue';
-import VnSearchbar from 'components/ui/VnSearchbar.vue';
-import LeftMenu from 'components/LeftMenu.vue';
-import RightMenu from 'components/common/RightMenu.vue';
+import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
+import LeftMenu from 'src/components/LeftMenu.vue';
+import RightMenu from 'src/components/common/RightMenu.vue';
 const props = defineProps({
     dataKey: { type: String, required: true },
     baseUrl: { type: String, default: undefined },

src/components/common/VnDms.vue

@@ -4,11 +4,11 @@ import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import axios from 'axios';
 
-import FetchData from 'components/FetchData.vue';
-import VnRow from 'components/ui/VnRow.vue';
+import FetchData from 'src/components/FetchData.vue';
+import VnRow from 'src/components/ui/VnRow.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import VnInput from 'src/components/common/VnInput.vue';
-import FormModelPopup from 'components/FormModelPopup.vue';
+import FormModelPopup from 'src/components/FormModelPopup.vue';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -195,7 +195,7 @@ function addDefaultData(data) {
     row-gap: 20px;
 }
 </style>
-<i18n>
+<i18n lang="yml">
 en:
     contentTypesInfo: Allowed file types {allowedContentTypes}
     EntryDmsDescription: Reference {reference}
@@ -207,5 +207,4 @@ es:
     EntryDmsDescription: Referencia {reference}
     WorkersDescription: Laboral del empleado {reference}
     SupplierDmsDescription: Referencia {reference}
-
 </i18n>

src/components/common/VnDmsList.vue

@@ -7,11 +7,11 @@ import axios from 'axios';
 
 import VnUserLink from '../ui/VnUserLink.vue';
 import { downloadFile } from 'src/composables/downloadFile';
-import VnImg from 'components/ui/VnImg.vue';
-import VnPaginate from 'components/ui/VnPaginate.vue';
+import VnImg from 'src/components/ui/VnImg.vue';
+import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import VnDms from 'src/components/common/VnDms.vue';
-import VnConfirm from 'components/ui/VnConfirm.vue';
-import VnInputDate from 'components/common/VnInputDate.vue';
+import VnConfirm from 'src/components/ui/VnConfirm.vue';
+import VnInputDate from 'src/components/common/VnInputDate.vue';
 import { useSession } from 'src/composables/useSession';
 
 const route = useRoute();
@@ -419,7 +419,7 @@ defineExpose({
     color: var(--vn-label-color);
 }
 </style>
-<i18n>
+<i18n lang="yml">
 en:
     contentTypesInfo: Allowed file types {allowedContentTypes}
     The documentation is available in paper form: The documentation is available in paper form

src/components/common/VnInput.vue

@@ -118,13 +118,13 @@ const mixinRules = [
         </QInput>
     </div>
 </template>
-<i18n>
-    en:
-        inputMin: Must be more than {value}
-        inputMax: Must be less than {value}
-    es:
-        inputMin: Debe ser mayor a {value}
-        inputMax: Debe ser menor a {value}
+<i18n lang="yml">
+en:
+    inputMin: Must be more than {value}
+    inputMax: Must be less than {value}
+es:
+    inputMin: Debe ser mayor a {value}
+    inputMax: Debe ser menor a {value}
 </i18n>
 <style lang="scss">
 .q-field__append {

src/components/common/VnInputDate.vue

@@ -161,7 +161,7 @@ const manageDate = (date) => {
     border-style: solid;
 }
 </style>
-<i18n>
-    es:
-        Open date: Abrir fecha
+<i18n lang="yml">
+es:
+    Open date: Abrir fecha
 </i18n>

src/components/common/VnInputTime.vue

@@ -140,7 +140,7 @@ function dateToTime(newDate) {
     display: none;
 }
 </style>
-<i18n>
-    es:
-        Open time: Abrir tiempo
+<i18n lang="yml">
+es:
+    Open time: Abrir tiempo
 </i18n>

src/components/common/VnLocation.vue

@@ -1,6 +1,6 @@
 <script setup>
 import CreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue';
-import VnSelectDialog from 'components/common/VnSelectDialog.vue';
+import VnSelectDialog from 'src/components/common/VnSelectDialog.vue';
 import { useI18n } from 'vue-i18n';
 import { ref } from 'vue';
 const { t } = useI18n();
@@ -96,6 +96,8 @@ const handleModelValue = (data) => {
     </VnSelectDialog>
 </template>
 <style lang="scss" scoped>
+@import 'src/css/quasar.variables.scss';
+
 .add-icon {
     cursor: pointer;
     background-color: $primary;
@@ -103,7 +105,7 @@ const handleModelValue = (data) => {
 }
 </style>
 
-<i18n>
+<i18n lang="yml">
 en:
     search_by_postalcode: Search by postalcode, town, province or country
     Create new location: Create new location

src/components/common/VnLog.vue

@@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
 import axios from 'axios';
 import { date } from 'quasar';
-import { useStateStore } from 'stores/useStateStore';
+import { useStateStore } from 'src/stores/useStateStore';
 import { toRelativeDate } from 'src/filters';
 import { useColor } from 'src/composables/useColor';
 import { useCapitalize } from 'src/composables/useCapitalize';
@@ -852,6 +852,8 @@ watch(
     </QPageSticky>
 </template>
 <style lang="scss" scoped>
+@import 'src/css/quasar.variables.scss';
+
 .q-card {
     background-color: var(--vn-section-color);
 }
@@ -1038,7 +1040,7 @@ watch(
     }
 }
 </style>
-<i18n>
+<i18n lang="yml">
 en:
     to: To
     pointRecord: View record at this point in time

src/components/common/VnLogFilter.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import FetchData from 'components/FetchData.vue';
+import FetchData from 'src/components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 
 const { t } = useI18n();
@@ -62,7 +62,7 @@ const workers = ref();
     </VnFilterPanel>
 </template>
 
-<i18n>
+<i18n lang="yml">
 en:
     params:
         search: Contains

src/components/common/VnProgressModal.vue

@@ -89,7 +89,7 @@ const cancel = () => {
     </QDialog>
 </template>
 
-<i18n>
+<i18n lang="yml">
 es:
     Progress: Progreso
     Total progress: Progreso total

src/components/common/VnSectionMain.vue

@@ -1,6 +1,6 @@
 <script setup>
-import { useStateStore } from 'stores/useStateStore';
-import LeftMenu from 'components/LeftMenu.vue';
+import { useStateStore } from 'src/stores/useStateStore';
+import LeftMenu from 'src/components/LeftMenu.vue';
 import { onMounted } from 'vue';
 import { useQuasar } from 'quasar';
 

src/components/common/VnSelect.vue

@@ -86,6 +86,10 @@ const $props = defineProps({
         type: Boolean,
         default: false,
     },
+    sortByWeight: {
+        type: Boolean,
+        default: false,
+    },
 });
 const { validations } = useValidator();
 const requiredFieldRule = (val) => validations().required($attrs.required, val);

src/components/common/VnSelectDialog.vue

@@ -64,6 +64,8 @@ const isAllowedToCreate = computed(() => {
 </template>
 
 <style lang="scss" scoped>
+@import 'src/css/quasar.variables.scss';
+
 .default-icon {
     cursor: pointer;
     color: $primary;

src/components/common/VnSelectEnum.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { onBeforeMount, ref, useAttrs } from 'vue';
 import axios from 'axios';
-import VnSelect from 'components/common/VnSelect.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 
 const { schema, table, column, translation, defaultOptions } = defineProps({
     schema: {

src/components/common/VnSmsDialog.vue

@@ -176,7 +176,7 @@ async function send() {
 }
 </style>
 
-<i18n>
+<i18n lang="yml">
 en:
     templates:
         pendingPayment: 'Your order is pending of payment.
@@ -218,7 +218,8 @@ fr:
     Message: Message
     messageTooltip: Les caractères spéciaux comme les accents comptent comme plusieurs
     templates:
-        pendingPayment: 'Verdnatura : Commande en attente de règlement. Veuillez régler votre commande avant 9h.
+        pendingPayment:
+            'Verdnatura : Commande en attente de règlement. Veuillez régler votre commande avant 9h.
             Sinon elle sera décalée en fonction de vos jours de livraison . Merci'
         minAmount: 'Verdnatura vous rappelle :
             Montant minimum nécessaire de 50 euros pour recevoir la commande { orderId } livraison { landing }.

src/components/common/vnDiscount.vue

@@ -127,7 +127,7 @@ function cancel({ cancel }) {
     </QPopupEdit>
 </template>
 
-<i18n>
+<i18n lang="yml">
 es:
     New amount: Nuevo importe
     Update discount: Actualizar descuento

src/components/test_FetchData.vue

@@ -0,0 +1,16 @@
+import { mount } from '@cypress/vue'; import FetchData from
+'../../src/components/FetchData.vue'; import axios from 'axios'; import { ref } from
+'vue'; // Mock axios jest.mock('axios'); describe('FetchData Component', () => {
+it('fetches data on mount when autoLoad is true', () => { const mockData = { data: [{ id:
+1, name: 'Test' }] }; axios.get.mockResolvedValue(mockData); const onFetch =
+cy.spy().as('onFetch'); mount(FetchData, { props: { autoLoad: true, url:
+'https://api.example.com/data', }, attrs: { onFetch, }, });
+cy.get('@onFetch').should('have.been.calledWith', mockData.data); }); it('does not fetch
+data on mount when autoLoad is false', () => { const onFetch = cy.spy().as('onFetch');
+mount(FetchData, { props: { autoLoad: false, url: 'https://api.example.com/data', },
+attrs: { onFetch, }, }); cy.get('@onFetch').should('not.have.been.called'); });
+it('fetches data when fetch method is called', () => { const mockData = { data: [{ id: 1,
+name: 'Test' }] }; axios.get.mockResolvedValue(mockData); const onFetch =
+cy.spy().as('onFetch'); const wrapper = mount(FetchData, { props: { autoLoad: false, url:
+'https://api.example.com/data', }, attrs: { onFetch, }, }); wrapper.vm.fetch();
+cy.get('@onFetch').should('have.been.calledWith', mockData.data); }); });

src/components/ui/CardDescriptor.vue

@@ -1,8 +1,8 @@
 <script setup>
 import { onBeforeMount, watch, computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import SkeletonDescriptor from 'components/ui/SkeletonDescriptor.vue';
-import { useArrayData } from 'composables/useArrayData';
+import SkeletonDescriptor from 'src/components/ui/SkeletonDescriptor.vue';
+import { useArrayData } from 'src/composables/useArrayData';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 import { useState } from 'src/composables/useState';
 import { useRoute } from 'vue-router';

src/components/ui/CardList.vue

@@ -124,7 +124,7 @@ const toggleCardCheck = (item) => {
 }
 </style>
 
-<i18n>
-    es:
-        ID: ID
+<i18n lang="yml">
+es:
+    ID: ID
 </i18n>

src/components/ui/CardSummary.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { ref, computed, watch, onBeforeMount } from 'vue';
 import { useRoute } from 'vue-router';
-import SkeletonSummary from 'components/ui/SkeletonSummary.vue';
+import SkeletonSummary from 'src/components/ui/SkeletonSummary.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import { useArrayData } from 'src/composables/useArrayData';
 
@@ -111,6 +111,8 @@ function existSummary(routes) {
 </template>
 
 <style lang="scss">
+@import 'src/css/quasar.variables.scss';
+
 .summary.container {
     display: flex;
     justify-content: center;
@@ -205,6 +207,8 @@ function existSummary(routes) {
 }
 </style>
 <style lang="scss" scoped>
+@import 'src/css/quasar.variables.scss';
+
 .summaryHeader .vn-label-value {
     display: flex;
     flex-direction: row;

src/components/ui/CatalogItem.vue

@@ -2,7 +2,7 @@
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-import VnLv from 'components/ui/VnLv.vue';
+import VnLv from 'src/components/ui/VnLv.vue';
 import VnImg from 'src/components/ui/VnImg.vue';
 import OrderCatalogItemDialog from 'pages/Order/Card/OrderCatalogItemDialog.vue';
 import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
@@ -101,6 +101,8 @@ const dialog = ref(null);
 }
 </style>
 <style lang="scss" scoped>
+@import 'src/css/quasar.variables.scss';
+
 .container {
     max-width: 448px;
     width: 100%;
@@ -179,7 +181,7 @@ const dialog = ref(null);
     }
 }
 </style>
-<i18n>
+<i18n lang="yml">
 es:
     to: to
     price-kg: Precio por Kg

src/components/ui/FetchedTags.vue

@@ -46,6 +46,8 @@ const tags = computed(() => {
 </template>
 
 <style lang="scss" scoped>
+@import 'src/css/quasar.variables.scss';
+
 .fetchedTags {
     align-items: center;
     .wrap {

src/components/ui/VnConfirm.vue

@@ -102,7 +102,7 @@ async function confirm() {
 }
 </style>
 
-<i18n>
+<i18n lang="yml">
 es:
     Confirm: Confirmar
     Are you sure you want to continue?: ¿Seguro que quieres continuar?

src/components/ui/VnFilterPanel.vue

@@ -1,10 +1,10 @@
 <script setup>
 import { onMounted, ref, computed, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useArrayData } from 'composables/useArrayData';
+import { useArrayData } from 'src/composables/useArrayData';
 import { useRoute } from 'vue-router';
 import toDate from 'filters/toDate';
-import VnFilterPanelChip from 'components/ui/VnFilterPanelChip.vue';
+import VnFilterPanelChip from 'src/components/ui/VnFilterPanelChip.vue';
 
 const { t } = useI18n();
 const $props = defineProps({
@@ -283,7 +283,7 @@ function sanitizer(params) {
 }
 </style>
 
-<i18n>
+<i18n lang="yml">
 es:
     No filters applied: No se han aplicado filtros
     Applied filters: Filtros aplicados

src/components/ui/VnNotes.vue

@@ -8,14 +8,14 @@ import { useQuasar } from 'quasar';
 import { toDateHourMin } from 'src/filters';
 import { useState } from 'src/composables/useState';
 
-import VnPaginate from 'components/ui/VnPaginate.vue';
-import VnUserLink from 'components/ui/VnUserLink.vue';
-import VnConfirm from 'components/ui/VnConfirm.vue';
-import VnAvatar from 'components/ui/VnAvatar.vue';
-import VnRow from 'components/ui/VnRow.vue';
-import VnSelect from 'components/common/VnSelect.vue';
-import FetchData from 'components/FetchData.vue';
-import VnInput from 'components/common/VnInput.vue';
+import VnPaginate from 'src/components/ui/VnPaginate.vue';
+import VnUserLink from 'src/components/ui/VnUserLink.vue';
+import VnConfirm from 'src/components/ui/VnConfirm.vue';
+import VnAvatar from 'src/components/ui/VnAvatar.vue';
+import VnRow from 'src/components/ui/VnRow.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
+import FetchData from 'src/components/FetchData.vue';
+import VnInput from 'src/components/common/VnInput.vue';
 
 const $props = defineProps({
     url: { type: String, default: null },
@@ -205,10 +205,10 @@ onBeforeRouteLeave((to, from, next) => {
     }
 }
 </style>
-<i18n>
-    es:
-        Add note here...: Añadir nota aquí...
-        New note: Nueva nota
-        Save (Enter): Guardar (Intro)
-        Observation type: Tipo de observación
+<i18n lang="yml">
+es:
+    Add note here...: Añadir nota aquí...
+    New note: Nueva nota
+    Save (Enter): Guardar (Intro)
+    Observation type: Tipo de observación
 </i18n>

src/components/ui/VnPaginate.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useArrayData } from 'composables/useArrayData';
+import { useArrayData } from 'src/composables/useArrayData';
 
 const { t } = useI18n();
 
@@ -245,7 +245,7 @@ defineExpose({ fetch, addFilter, paginate });
 }
 </style>
 
-<i18n>
+<i18n lang="yml">
 es:
     No data to display: Sin datos que mostrar
     No results found: No se han encontrado resultados

src/components/ui/VnSearchbar.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { onMounted, ref, watch } from 'vue';
 import { useQuasar } from 'quasar';
-import { useArrayData } from 'composables/useArrayData';
+import { useArrayData } from 'src/composables/useArrayData';
 import VnInput from 'src/components/common/VnInput.vue';
 import { useI18n } from 'vue-i18n';
 import { useStateStore } from 'src/stores/useStateStore';

src/composables/useArrayData.js

@@ -1,10 +1,8 @@
 import { onMounted, computed } from 'vue';
 import { useRouter, useRoute } from 'vue-router';
 import axios from 'axios';
-import { useArrayDataStore } from 'stores/useArrayDataStore';
-import { buildFilter } from 'filters/filterPanel';
-
-const arrayDataStore = useArrayDataStore();
+import { useArrayDataStore } from 'src/stores/useArrayDataStore';
+import { buildFilter } from 'src/filters/filterPanel';
 
 export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
     if (!key) throw new Error('ArrayData: A key is required to use this composable');
@@ -298,3 +296,5 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
         reset,
     };
 }
+
+const arrayDataStore = useArrayDataStore();

src/composables/useVnConfirm.js

@@ -1,4 +1,4 @@
-import VnConfirm from 'components/ui/VnConfirm.vue';
+import VnConfirm from 'src/components/ui/VnConfirm.vue';
 import { useQuasar } from 'quasar';
 
 export function useVnConfirm() {

src/filters/toHour.js

@@ -1,4 +1,4 @@
-import isValidDate from 'filters/isValidDate';
+import isValidDate from 'src/filters/isValidDate';
 
 export default function toHour(date) {
     if (!isValidDate(date)) {

src/pages/Account/AccountAccounts.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
-import FormModel from 'components/FormModel.vue';
-import VnRow from 'components/ui/VnRow.vue';
+import FormModel from 'src/components/FormModel.vue';
+import VnRow from 'src/components/ui/VnRow.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import axios from 'axios';
@@ -95,7 +95,7 @@ const onSynchronizeRoles = async () => {
     </QPage>
 </template>
 
-<i18n>
+<i18n lang="yml">
 es:
     Roles synchronized!: ¡Roles sincronizados!
     Synchronizing in the background: Sincronizando en segundo plano

src/pages/Account/AccountAcls.vue

@@ -6,9 +6,9 @@ import axios from 'axios';
 import useNotify from 'src/composables/useNotify.js';
 import { useQuasar } from 'quasar';
 
-import VnTable from 'components/VnTable/VnTable.vue';
-import VnSearchbar from 'components/ui/VnSearchbar.vue';
-import VnConfirm from 'components/ui/VnConfirm.vue';
+import VnTable from 'src/components/VnTable/VnTable.vue';
+import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
+import VnConfirm from 'src/components/ui/VnConfirm.vue';
 
 defineProps({
     id: {
@@ -150,7 +150,7 @@ const deleteAcl = async ({ id }) => {
     />
 </template>
 
-<i18n>
+<i18n lang="yml">
 es:
     New ACL: Nuevo ACL
     ACL removed: ACL eliminado

src/pages/Account/AccountAliasList.vue

@@ -1,8 +1,8 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
 import { ref, computed } from 'vue';
-import VnTable from 'components/VnTable/VnTable.vue';
-import VnSearchbar from 'components/ui/VnSearchbar.vue';
+import VnTable from 'src/components/VnTable/VnTable.vue';
+import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import { useStateStore } from 'stores/useStateStore';
 
 const tableRef = ref();
@@ -74,9 +74,9 @@ const columns = computed(() => [
     />
 </template>
 
-<i18n>
-    es:
-        Id: Id
-        Alias: Alias
-        Description: Descripción
+<i18n lang="yml">
+es:
+    Id: Id
+    Alias: Alias
+    Description: Descripción
 </i18n>

src/pages/Account/AccountConnections.vue

@@ -2,13 +2,13 @@
 import { ref } from 'vue';
 import { useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
-import VnPaginate from 'components/ui/VnPaginate.vue';
+import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import CardList from 'src/components/ui/CardList.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import { toDateTimeFormat } from 'src/filters/date.js';
 import axios from 'axios';
 import useNotify from 'src/composables/useNotify.js';
-import { useVnConfirm } from 'composables/useVnConfirm';
+import { useVnConfirm } from 'src/composables/useVnConfirm';
 
 const { t } = useI18n();
 const router = useRouter();
@@ -102,7 +102,7 @@ const killSession = async ({ userId, created }) => {
     </QPage>
 </template>
 
-<i18n>
+<i18n lang="yml">
 es:
     Session killed: Sesión matada
     Session will be killed: Se va a matar la sesión

src/pages/Account/AccountCreate.vue

@@ -2,9 +2,9 @@
 import { reactive, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
-import FormModelPopup from 'components/FormModelPopup.vue';
+import FormModelPopup from 'src/components/FormModelPopup.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
-import FetchData from 'components/FetchData.vue';
+import FetchData from 'src/components/FetchData.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 
 const { t } = useI18n();

src/pages/Account/AccountFilter.vue

@@ -1,9 +1,9 @@
 <script setup>
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import FetchData from 'components/FetchData.vue';
+import FetchData from 'src/components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
-import VnSelect from 'components/common/VnSelect.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 
 const { t } = useI18n();

src/pages/Account/AccountLdap.vue

@@ -1,8 +1,8 @@
 <script setup>
 import { ref, onMounted, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import FormModel from 'components/FormModel.vue';
-import VnRow from 'components/ui/VnRow.vue';
+import FormModel from 'src/components/FormModel.vue';
+import VnRow from 'src/components/ui/VnRow.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 import { useArrayData } from 'src/composables/useArrayData';
@@ -156,7 +156,7 @@ onMounted(async () => await getInitialLdapConfig());
     </QPage>
 </template>
 
-<i18n>
+<i18n lang="yml">
 es:
     LDAP connection established!: ¡Conexión con LDAP establecida!
 </i18n>

src/pages/Account/AccountList.vue

@@ -1,8 +1,8 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
 import { ref, computed } from 'vue';
-import VnTable from 'components/VnTable/VnTable.vue';
-import VnSearchbar from 'components/ui/VnSearchbar.vue';
+import VnTable from 'src/components/VnTable/VnTable.vue';
+import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import AccountSummary from './Card/AccountSummary.vue';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 import AccountFilter from './AccountFilter.vue';
@@ -130,9 +130,9 @@ const exprBuilder = (param, value) => {
     />
 </template>
 
-<i18n>
-    es:
-        Id: Id
-        Nickname: Nickname
-        Name: Nombre
+<i18n lang="yml">
+es:
+    Id: Id
+    Nickname: Nickname
+    Name: Nombre
 </i18n>

src/pages/Account/AccountSamba.vue

@@ -1,8 +1,8 @@
 <script setup>
 import { ref, onMounted, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import FormModel from 'components/FormModel.vue';
-import VnRow from 'components/ui/VnRow.vue';
+import FormModel from 'src/components/FormModel.vue';
+import VnRow from 'src/components/ui/VnRow.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 import { useArrayData } from 'src/composables/useArrayData';
@@ -176,7 +176,7 @@ onMounted(async () => await getInitialSambaConfig());
     </QPage>
 </template>
 
-<i18n>
+<i18n lang="yml">
 es:
     Samba connection established!: ¡Conexión con LDAP establecida!
 </i18n>

src/pages/Account/Acls/AclFilter.vue

@@ -2,9 +2,9 @@
 import { ref, onBeforeMount } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-import FetchData from 'components/FetchData.vue';
+import FetchData from 'src/components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
-import VnSelect from 'components/common/VnSelect.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 
 import { useValidator } from 'src/composables/useValidator';

src/pages/Account/Acls/AclFormView.vue

@@ -4,7 +4,7 @@ import { ref, onBeforeMount, onMounted } from 'vue';
 
 import VnSelect from 'src/components/common/VnSelect.vue';
 import VnInput from 'src/components/common/VnInput.vue';
-import FormModelPopup from 'components/FormModelPopup.vue';
+import FormModelPopup from 'src/components/FormModelPopup.vue';
 
 import { useValidator } from 'src/composables/useValidator';
 import { useArrayData } from 'src/composables/useArrayData';

src/pages/Account/Alias/AliasCreateForm.vue

@@ -2,8 +2,8 @@
 import { useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 
-import FormModelPopup from 'components/FormModelPopup.vue';
-import VnRow from 'components/ui/VnRow.vue';
+import FormModelPopup from 'src/components/FormModelPopup.vue';
+import VnRow from 'src/components/ui/VnRow.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 
 import { useArrayData } from 'src/composables/useArrayData';
@@ -51,7 +51,7 @@ const onDataSaved = ({ id }) => {
     </FormModelPopup>
 </template>
 
-<i18n>
-    es:
-        Create alias: Crear alias
+<i18n lang="yml">
+es:
+    Create alias: Crear alias
 </i18n>

src/pages/Account/Alias/Card/AliasBasicData.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
 
-import FormModel from 'components/FormModel.vue';
+import FormModel from 'src/components/FormModel.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 
 const { t } = useI18n();

src/pages/Account/Alias/Card/AliasCard.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
-import VnCard from 'components/common/VnCard.vue';
+import VnCard from 'src/components/common/VnCard.vue';
 import AliasDescriptor from './AliasDescriptor.vue';
 const { t } = useI18n();
 </script>

src/pages/Account/Alias/Card/AliasDescriptor.vue

@@ -4,7 +4,7 @@ import { useRoute, useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
 
-import CardDescriptor from 'components/ui/CardDescriptor.vue';
+import CardDescriptor from 'src/components/ui/CardDescriptor.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 
 import useCardDescription from 'src/composables/useCardDescription';
@@ -76,13 +76,13 @@ const removeAlias = () => {
     </CardDescriptor>
 </template>
 
-<i18n>
-    en:
-        accountRate: Claming rate
-    es:
-        accountRate: Ratio de reclamación
-        Delete: Eliminar
-        Alias will be removed: El alias será eliminado
-        Are you sure you want to continue?: ¿Seguro que quieres continuar?
-        Alias removed: Alias eliminado
+<i18n lang="yml">
+en:
+    accountRate: Claming rate
+es:
+    accountRate: Ratio de reclamación
+    Delete: Eliminar
+    Alias will be removed: El alias será eliminado
+    Are you sure you want to continue?: ¿Seguro que quieres continuar?
+    Alias removed: Alias eliminado
 </i18n>

src/pages/Account/Alias/Card/AliasSummary.vue

@@ -3,7 +3,7 @@ import { ref, computed } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 
-import CardSummary from 'components/ui/CardSummary.vue';
+import CardSummary from 'src/components/ui/CardSummary.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 
 import { useArrayData } from 'src/composables/useArrayData';

src/pages/Account/Alias/Card/AliasUsers.vue

@@ -3,10 +3,10 @@ import { useRoute } from 'vue-router';
 import { computed, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-import VnPaginate from 'components/ui/VnPaginate.vue';
+import VnPaginate from 'src/components/ui/VnPaginate.vue';
 
-import { useVnConfirm } from 'composables/useVnConfirm';
-import { useArrayData } from 'composables/useArrayData';
+import { useVnConfirm } from 'src/composables/useVnConfirm';
+import { useArrayData } from 'src/composables/useArrayData';
 import useNotify from 'src/composables/useNotify.js';
 import axios from 'axios';
 
@@ -113,7 +113,7 @@ const fetchAliases = () => paginateRef.value.fetch();
     </QPage>
 </template>
 
-<i18n>
+<i18n lang="yml">
 es:
     User will be removed from alias: El usuario será borrado del alias
     Are you sure you want to continue?: ¿Seguro que quieres continuar?

src/pages/Account/Card/AccountBasicData.vue

@@ -3,7 +3,7 @@ import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import VnSelectEnum from 'src/components/common/VnSelectEnum.vue';
-import FormModel from 'components/FormModel.vue';
+import FormModel from 'src/components/FormModel.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import { ref, watch } from 'vue';
 

src/pages/Account/Card/AccountCard.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
-import VnCard from 'components/common/VnCard.vue';
+import VnCard from 'src/components/common/VnCard.vue';
 import AccountDescriptor from './AccountDescriptor.vue';
 
 const { t } = useI18n();

src/pages/Account/Card/AccountDescriptor.vue

@@ -2,7 +2,7 @@
 import { ref, computed } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
-import CardDescriptor from 'components/ui/CardDescriptor.vue';
+import CardDescriptor from 'src/components/ui/CardDescriptor.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import useCardDescription from 'src/composables/useCardDescription';
 import AccountDescriptorMenu from './AccountDescriptorMenu.vue';
@@ -108,9 +108,9 @@ const hasAccount = ref(false);
     margin-top: 0;
 }
 </style>
-<i18n>
-    en:
-        accountRate: Claming rate
-    es:
-        accountRate: Ratio de reclamación
+<i18n lang="yml">
+en:
+    accountRate: Claming rate
+es:
+    accountRate: Ratio de reclamación
 </i18n>

src/pages/Account/Card/AccountDescriptorMenu.vue

@@ -2,7 +2,7 @@
 import axios from 'axios';
 import { computed, ref, toRefs } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useVnConfirm } from 'composables/useVnConfirm';
+import { useVnConfirm } from 'src/composables/useVnConfirm';
 import { useRoute } from 'vue-router';
 import { useAcl } from 'src/composables/useAcl';
 import { useArrayData } from 'src/composables/useArrayData';

src/pages/Account/Card/AccountMailAlias.vue

@@ -3,11 +3,11 @@ import { computed, ref, watch, onMounted, nextTick } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 
-import VnPaginate from 'components/ui/VnPaginate.vue';
+import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import AccountMailAliasCreateForm from './AccountMailAliasCreateForm.vue';
 
-import { useVnConfirm } from 'composables/useVnConfirm';
-import { useArrayData } from 'composables/useArrayData';
+import { useVnConfirm } from 'src/composables/useVnConfirm';
+import { useArrayData } from 'src/composables/useArrayData';
 import useNotify from 'src/composables/useNotify.js';
 import axios from 'axios';
 
@@ -182,7 +182,7 @@ onMounted(async () => await getAccountData(false));
     </QPage>
 </template>
 
-<i18n>
+<i18n lang="yml">
 es:
     Unsubscribed from alias!: ¡Desuscrito del alias!
     Subscribed to alias!: ¡Suscrito al alias!

src/pages/Account/Card/AccountMailAliasCreateForm.vue

@@ -4,9 +4,9 @@ import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 
 import VnSelect from 'src/components/common/VnSelect.vue';
-import FetchData from 'components/FetchData.vue';
-import VnRow from 'components/ui/VnRow.vue';
-import FormPopup from 'components/FormPopup.vue';
+import FetchData from 'src/components/FetchData.vue';
+import VnRow from 'src/components/ui/VnRow.vue';
+import FormPopup from 'src/components/FormPopup.vue';
 
 const emit = defineEmits(['onSubmitCreateAlias']);
 

src/pages/Account/Card/AccountMailForwarding.vue

@@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 
 import VnInput from 'src/components/common/VnInput.vue';
-import VnRow from 'components/ui/VnRow.vue';
+import VnRow from 'src/components/ui/VnRow.vue';
 
 import axios from 'axios';
 import { useStateStore } from 'stores/useStateStore';

src/pages/Account/Card/AccountPrivileges.vue

@@ -3,8 +3,8 @@ import { ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 
-import FetchData from 'components/FetchData.vue';
-import FormModel from 'components/FormModel.vue';
+import FetchData from 'src/components/FetchData.vue';
+import FormModel from 'src/components/FormModel.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
 
 const { t } = useI18n();

src/pages/Account/Card/AccountSummary.vue

@@ -3,7 +3,7 @@ import { ref, computed } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 
-import CardSummary from 'components/ui/CardSummary.vue';
+import CardSummary from 'src/components/ui/CardSummary.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 
 import { useArrayData } from 'src/composables/useArrayData';

src/pages/Account/InheritedRoles.vue

@@ -1,8 +1,8 @@
 <script setup>
 import { useRoute, useRouter } from 'vue-router';
 import { computed, ref, watch } from 'vue';
-import VnPaginate from 'components/ui/VnPaginate.vue';
-import { useArrayData } from 'composables/useArrayData';
+import VnPaginate from 'src/components/ui/VnPaginate.vue';
+import { useArrayData } from 'src/composables/useArrayData';
 
 const props = defineProps({
     dataKey: { type: String, required: true },
@@ -88,7 +88,7 @@ const redirectToRoleSummary = (id) =>
     </QPage>
 </template>
 
-<i18n>
+<i18n lang="yml">
 es:
     Role removed. Changes will take a while to fully propagate.: Rol eliminado. Los cambios tardaran un tiempo en propagarse completamente.
     Role added! Changes will take a while to fully propagate.: ¡Rol añadido! Los cambios tardaran un tiempo en propagarse completamente.

src/pages/Account/Role/AccountRoles.vue

@@ -1,9 +1,9 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
 import { computed, ref } from 'vue';
-import VnTable from 'components/VnTable/VnTable.vue';
+import VnTable from 'src/components/VnTable/VnTable.vue';
 import { useRoute } from 'vue-router';
-import VnSearchbar from 'components/ui/VnSearchbar.vue';
+import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 import RoleSummary from './Card/RoleSummary.vue';
 const route = useRoute();
@@ -107,9 +107,9 @@ const exprBuilder = (param, value) => {
     />
 </template>
 
-<i18n>
-    es:
-        Id: Id
-        Description: Descripción
-        Name: Nombre
+<i18n lang="yml">
+es:
+    Id: Id
+    Description: Descripción
+    Name: Nombre
 </i18n>

src/pages/Account/Role/Card/InheritedRoles.vue

@@ -2,9 +2,9 @@
 import { useRoute, useRouter } from 'vue-router';
 import { computed, ref, watch } from 'vue';
 
-import VnPaginate from 'components/ui/VnPaginate.vue';
+import VnPaginate from 'src/components/ui/VnPaginate.vue';
 
-import { useArrayData } from 'composables/useArrayData';
+import { useArrayData } from 'src/composables/useArrayData';
 
 const route = useRoute();
 const router = useRouter();
@@ -87,7 +87,7 @@ const redirectToRoleSummary = (id) =>
     </QPage>
 </template>
 
-<i18n>
+<i18n lang="yml">
 es:
     Role removed. Changes will take a while to fully propagate.: Rol eliminado. Los cambios tardaran un tiempo en propagarse completamente.
     Role added! Changes will take a while to fully propagate.: ¡Rol añadido! Los cambios tardaran un tiempo en propagarse completamente.

src/pages/Account/Role/Card/RoleBasicData.vue

@@ -1,8 +1,8 @@
 <script setup>
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
-import FormModel from 'components/FormModel.vue';
-import VnRow from 'components/ui/VnRow.vue';
+import FormModel from 'src/components/FormModel.vue';
+import VnRow from 'src/components/ui/VnRow.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 const route = useRoute();
 const { t } = useI18n();

src/pages/Account/Role/Card/RoleCard.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
-import VnCard from 'components/common/VnCard.vue';
+import VnCard from 'src/components/common/VnCard.vue';
 import RoleDescriptor from './RoleDescriptor.vue';
 
 const { t } = useI18n();

src/pages/Account/Role/Card/RoleDescriptor.vue

@@ -2,7 +2,7 @@
 import { ref, computed } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
-import CardDescriptor from 'components/ui/CardDescriptor.vue';
+import CardDescriptor from 'src/components/ui/CardDescriptor.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import useCardDescription from 'src/composables/useCardDescription';
 import axios from 'axios';
@@ -67,9 +67,9 @@ const removeRole = async () => {
     margin-top: 0;
 }
 </style>
-<i18n>
-    en:
-        accountRate: Claming rate
-    es:
-        accountRate: Ratio de reclamación
+<i18n lang="yml">
+en:
+    accountRate: Claming rate
+es:
+    accountRate: Ratio de reclamación
 </i18n>