Added extra folder aliases & dynamic language import

jsconfig.json

@@ -5,6 +5,7 @@
             "src/*": ["src/*"],
             "app/*": ["*"],
             "components/*": ["src/components/*"],
+            "composables/*": ["src/composables/*"],
             "layouts/*": ["src/layouts/*"],
             "pages/*": ["src/pages/*"],
             "assets/*": ["src/assets/*"],

package.json

@@ -11,24 +11,25 @@
         "test": "echo \"No test specified\" && exit 0"
     },
     "dependencies": {
-        "axios": "^0.21.1",
+        "@quasar/extras": "^1.15.8",
-        "vue-i18n": "^9.0.0",
+        "axios": "^1.2.1",
-        "pinia": "^2.0.11",
+        "pinia": "^2.0.28",
-        "@quasar/extras": "^1.0.0",
+        "quasar": "^2.11.1",
-        "quasar": "^2.6.0",
+        "validator": "^13.7.0",
-        "vue": "^3.0.0",
+        "vue": "^3.2.45",
-        "vue-router": "^4.0.0"
+        "vue-i18n": "^9.2.2",
+        "vue-router": "^4.1.6"
     },
     "devDependencies": {
-        "eslint": "^8.10.0",
-        "eslint-plugin-vue": "^9.0.0",
-        "eslint-config-prettier": "^8.1.0",
-        "prettier": "^2.5.1",
         "@intlify/vite-plugin-vue-i18n": "^3.3.1",
-        "@quasar/app-vite": "^1.0.0",
         "@pinia/testing": "^0.0.14",
+        "@quasar/app-vite": "^1.0.0",
         "autoprefixer": "^10.4.2",
-        "postcss": "^8.4.14"
+        "eslint": "^8.10.0",
+        "eslint-config-prettier": "^8.1.0",
+        "eslint-plugin-vue": "^9.0.0",
+        "postcss": "^8.4.14",
+        "prettier": "^2.5.1"
     },
     "engines": {
         "node": "^18 || ^16 || ^14.19",

quasar.config.js

@@ -74,6 +74,11 @@ module.exports = configure(function (/* ctx */) {
             // extendViteConf (viteConf) {},
             // viteVuePluginOptions: {},
 
+            alias: {
+                composables: path.join(__dirname, './src/composables'),
+                filters: path.join(__dirname, './src/filters'),
+            },
+
             vitePlugins: [
                 [
                     '@intlify/vite-plugin-vue-i18n',

src/components/UserPanel.vue

@@ -22,9 +22,16 @@ const userLocale = computed({
 
         if (value === 'en') value = 'en-GB';
 
-        import(`quasar/lang/${value}`).then((language) => {
+        // FIXME: Dynamic imports from absolute paths are not compatible with vite:
-            Quasar.lang.set(language.default);
+        // https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations
-        });
+        try {
+            const langList = import.meta.glob('../../node_modules/quasar/lang/*.mjs')
+            langList[`../../node_modules/quasar/lang/${value}.mjs`]().then(lang => {
+                Quasar.lang.set(lang.default)
+            })
+        } catch (error) {
+
+        }
     },
 });
 
@@ -81,33 +88,19 @@ function logout() {
         <div class="row no-wrap q-pa-md">
             <div class="column panel">
                 <div class="text-h6 q-mb-md">{{ t('components.userPanel.settings') }}</div>
-                <q-toggle
+                <q-toggle v-model="userLocale" @update:model-value="saveLanguage"
-                    v-model="userLocale"
+                    :label="t(`globals.lang['${userLocale}']`)" icon="public" color="orange" false-value="es"
-                    @update:model-value="saveLanguage"
+                    true-value="en" />
-                    :label="t(`globals.lang['${userLocale}']`)"
+                <q-toggle v-model="darkMode" @update:model-value="saveDarkMode" :label="t(`globals.darkMode`)"
-                    icon="public"
+                    checked-icon="dark_mode" color="orange" unchecked-icon="light_mode" />
-                    color="orange"
-                    false-value="es"
-                    true-value="en"
-                />
-                <q-toggle
-                    v-model="darkMode"
-                    @update:model-value="saveDarkMode"
-                    :label="t(`globals.darkMode`)"
-                    checked-icon="dark_mode"
-                    color="orange"
-                    unchecked-icon="light_mode"
-                />
             </div>
 
             <q-separator vertical inset class="q-mx-lg" />
 
             <div class="column items-center panel">
                 <q-avatar size="80px">
-                    <q-img
+                    <q-img :src="`/api/Images/user/160x160/${user.id}/download?access_token=${token}`"
-                        :src="`/api/Images/user/160x160/${user.id}/download?access_token=${token}`"
+                        spinner-color="white" />
-                        spinner-color="white"
-                    />
                 </q-avatar>
 
                 <div class="text-subtitle1 q-mt-md">
@@ -115,16 +108,8 @@ function logout() {
                 </div>
                 <div class="text-subtitle3 text-grey-7 q-mb-xs">@{{ user.name }}</div>
 
-                <q-btn
+                <q-btn id="logout" color="orange" flat :label="t('globals.logOut')" size="sm" icon="logout"
-                    id="logout"
+                    @click="logout()" v-close-popup />
-                    color="orange"
-                    flat
-                    :label="t('globals.logOut')"
-                    size="sm"
-                    icon="logout"
-                    @click="logout()"
-                    v-close-popup
-                />
             </div>
         </div>
     </q-menu>

src/css/app.scss

@@ -1,16 +1,6 @@
 // app global css in SCSS form
 @import './icons.scss';
 
-.body--dark {
-    .q-card--dark {
-        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2), 0 2px 2px rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12);
-    }
-
-    .q-layout__shadow::after {
-        box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0px 10px rgba(0, 0, 0, 0.24) !important;
-    }
-}
-
 .link {
     color: $primary;
     cursor: pointer;

src/css/quasar.variables.scss

@@ -23,8 +23,12 @@ $negative: #c10015;
 $info: #31ccec;
 $warning: #f2c037;
 
-$color-spacer-light: rgba(255, 255, 255, .12);
+$color-spacer-light: rgba(255, 255, 255, 0.12);
-$color-spacer:rgba(255, 255, 255, .3);
+$color-spacer: rgba(255, 255, 255, 0.3);
 $border-thin-light: 1px solid $color-spacer-light;
 
+$separator-dark-color: rgba(0, 0, 0, 0.12);
+$dark-shadow-color: #000;
+$layout-shadow-dark: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0px 10px rgba(0, 0, 0, 0.24);
+
 $spacing-md: 16px;

src/i18n/en/index.js

@@ -228,8 +228,8 @@ export default {
             requester: 'Requester',
             atender: 'Atender',
             request: 'Request',
-            goTo: 'Go to'
+            goTo: 'Go to',
-        }
+        },
     },
     claim: {
         pageTitles: {
@@ -296,11 +296,11 @@ export default {
     },
     invoiceOut: {
         pageTitles: {
-            invoiceOuts: 'InvoiceOuts',
+            invoiceOuts: 'Invoices Out',
             list: 'List',
             createInvoiceOut: 'Create invoice out',
             summary: 'Summary',
-            basicData: 'Basic Data'
+            basicData: 'Basic Data',
         },
         list: {
             ref: 'Reference',
@@ -309,7 +309,7 @@ export default {
             client: 'Client',
             created: 'Created',
             company: 'Company',
-            dued: 'Due date'
+            dued: 'Due date',
         },
         card: {
             issued: 'Issued',
@@ -317,7 +317,7 @@ export default {
             client: 'Client',
             company: 'Company',
             customerCard: 'Customer card',
-            ticketList: 'Ticket List'
+            ticketList: 'Ticket List',
         },
         summary: {
             issued: 'Issued',
@@ -335,8 +335,7 @@ export default {
             nickname: 'Alias',
             shipped: 'Shipped',
             totalWithVat: 'Amount',
-
+        },
-        }
     },
     components: {
         topbar: {},