fix: eslint warnings

.eslintrc.js

@@ -22,8 +22,8 @@ module.exports = {
         // Uncomment any of the lines below to choose desired strictness,
         // but leave only one uncommented!
         // See https://eslint.vuejs.org/rules/#available-rules
-        'plugin:vue/vue3-essential', // Priority A: Essential (Error Prevention)
+        // 'plugin:vue/vue3-essential', // Priority A: Essential (Error Prevention)
-        // 'plugin:vue/vue3-strongly-recommended', // Priority B: Strongly Recommended (Improving Readability)
+        'plugin:vue/vue3-strongly-recommended', // Priority B: Strongly Recommended (Improving Readability)
         // 'plugin:vue/vue3-recommended', // Priority C: Recommended (Minimizing Arbitrary Choices and Cognitive Overhead)
 
         'standard'
@@ -66,7 +66,18 @@ module.exports = {
         'prefer-promise-reject-errors': 'off',
         semi: 'off',
         // allow debugger during development only
-        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
+        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+        'vue/html-indent': [
+            'error',
+            4,
+            {
+                attribute: 1,
+                baseIndent: 1,
+                closeBracket: 0,
+                alignAttributesVertically: true,
+                ignores: []
+            }
+        ]
     },
     overrides: [
         {

.vscode/settings.json

@@ -3,8 +3,11 @@
     "eslint.autoFixOnSave": true,
     "editor.bracketPairColorization.enabled": true,
     "editor.guides.bracketPairs": true,
-    "editor.formatOnSave": true,
+    "editor.formatOnSave": false,
-    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.defaultFormatter": null,
     "editor.codeActionsOnSave": ["source.fixAll.eslint"],
-    "eslint.validate": ["javascript", "javascriptreact", "typescript", "vue"]
+    "eslint.validate": ["javascript", "javascriptreact", "typescript", "vue"],
+    "[sql]": {
+        "editor.formatOnSave": true
+    }
 }

quasar.config.js

@@ -15,6 +15,12 @@ const { configure } = require('quasar/wrappers');
 
 module.exports = configure(function (ctx) {
   return {
+    // fix: true,
+    // include = [],
+    // exclude = [],
+    // rawOptions = {},
+    warnings: true,
+    errors: true,
     // https://v2.quasar.dev/quasar-cli-webpack/supporting-ts
     supportTS: false,
 
@@ -102,7 +108,7 @@ module.exports = configure(function (ctx) {
       proxy: {
         '/api': 'http://localhost:3000',
         '/': {
-          target: 'http://localhost:3002',
+          target: 'http://localhost:3001',
           bypass: req => (req.path !== '/' ? req.path : null)
         }
       }

src/components/common/VnForm.vue

@@ -179,7 +179,10 @@ defineExpose({
 </script>
 
 <template>
-    <QCard class="form-container" v-bind="$attrs">
+    <QCard
+        class="form-container"
+        v-bind="$attrs"
+    >
         <QForm
             v-if="!loading"
             ref="addressFormRef"
@@ -188,7 +191,10 @@ defineExpose({
             <span class="text-h6 text-bold">
                 {{ title }}
             </span>
-            <slot name="form" :data="formData" />
+            <slot
+                name="form"
+                :data="formData"
+            />
             <component
                 :is="showBottomActions ? 'div' : Teleport"
                 :to="$actions"
@@ -217,7 +223,12 @@ defineExpose({
                 <slot name="actions" />
             </component>
         </QForm>
-        <QSpinner v-else color="primary" size="3em" :thickness="2" />
+        <QSpinner
+            v-else
+            color="primary"
+            size="3em"
+            :thickness="2"
+        />
     </QCard>
 </template>
 

src/components/common/VnInput.vue

@@ -56,10 +56,14 @@ defineExpose({
 
 const inputRules = [
     val => {
-        const { min } = vnInputRef.value.$attrs;
+        console.log('asd');
+        const { min, max } = vnInputRef.value.$attrs;
         if (min >= 0) {
             if (Math.floor(val) < min) return t('inputMin', { value: min });
         }
+        if (max > 0) {
+            if (Math.floor(val) > max) return t('inputMax', { value: max });
+        }
     }
 ];
 </script>
@@ -82,11 +86,17 @@ const inputRules = [
             hide-bottom-space
             @keyup.enter="emit('keyup.enter')"
         >
-            <template v-if="$slots.prepend" #prepend>
+            <template
+                v-if="$slots.prepend"
+                #prepend
+            >
                 <slot name="prepend" />
             </template>
             <template #append>
-                <slot v-if="$slots.append && !$attrs.disabled" name="append" />
+                <slot
+                    v-if="$slots.append && !$attrs.disabled"
+                    name="append"
+                />
                 <QIcon
                     v-if="hover && value && !$attrs.disabled && props.clearable"
                     name="close"
@@ -98,7 +108,10 @@ const inputRules = [
                         }
                     "
                 />
-                <QIcon v-if="info" name="info">
+                <QIcon
+                    v-if="info"
+                    name="info"
+                >
                     <QTooltip max-width="350px">
                         {{ info }}
                     </QTooltip>
@@ -111,12 +124,17 @@ const inputRules = [
 <i18n lang="yaml">
 en-US:
     inputMin: Must be more than {value}
+    inputMax: Must be less than {value}
 es-ES:
-    inputMin: Must be more than {value}
+    inputMin: Debe ser mayor a {value}
+    inputMax: Debe ser menor a {value}
 ca-ES:
     inputMin: Ha de ser més gran que {value}
+    inputMax: Ha de ser menys que {value}
 fr-FR:
     inputMin: Doit être supérieur à {value}
+    inputMax: Doit être supérieur à {value}
 pt-PT:
     inputMin: Deve ser maior que {value}
+    inputMax: Deve ser maior que {value}
 </i18n>

src/components/common/VnSelect.vue

@@ -162,7 +162,10 @@ async function filterHandler(val, update) {
         :rules="$attrs.required ? [requiredFieldRule] : null"
         virtual-scroll-slice-size="options.length"
     >
-        <template v-if="isClearable" #append>
+        <template
+            v-if="isClearable"
+            #append
+        >
             <QIcon
                 v-show="value"
                 name="close"
@@ -176,7 +179,11 @@ async function filterHandler(val, update) {
             #[slotName]="slotData"
             :key="slotName"
         >
-            <slot :name="slotName" v-bind="slotData ?? {}" :key="slotName" />
+            <slot
+                :name="slotName"
+                v-bind="slotData ?? {}"
+                :key="slotName"
+            />
         </template>
     </QSelect>
 </template>

src/components/ui/CardList.vue

@@ -30,7 +30,10 @@ const handleClick = () => {
                 </div>
             </div>
         </QItemSection>
-        <QItemSection class="no-padding" side>
+        <QItemSection
+            class="no-padding"
+            side
+        >
             <slot name="actions" />
         </QItemSection>
     </QItem>

src/components/ui/ChangePasswordForm.vue

@@ -98,12 +98,12 @@ onMounted(async () => {
     <VnForm
         ref="vnFormRef"
         :title="t('changePassword')"
-        :formInitialData="formData"
+        :form-initial-data="formData"
-        :saveFn="changePassword"
+        :save-fn="changePassword"
-        showBottomActions
+        show-bottom-actions
-        :defaultActions="false"
+        :default-actions="false"
         style="max-width: 300px"
-        @onDataSaved="onPasswordChanged()"
+        @on-data-saved="onPasswordChanged()"
     >
         <template #form>
             <VnInput
@@ -112,38 +112,42 @@ onMounted(async () => {
                 v-model="formData.oldPassword"
                 :type="!showOldPwd ? 'password' : 'text'"
                 :label="t('oldPassword')"
-                 >
+            >
                 <template #append>
-                        <QIcon
+                    <QIcon
-                            :name="showOldPwd ? 'visibility_off' : 'visibility'"
+                        :name="showOldPwd ? 'visibility_off' : 'visibility'"
-                            class="cursor-pointer"
+                        class="cursor-pointer"
-                            @click="showOldPwd = !showOldPwd"
+                        @click="showOldPwd = !showOldPwd"
-                        />
+                    />
-                    </template>
+                </template>
-                  </VnInput>
+            </VnInput>
             <VnInput
                 ref="newPasswordRef"
                 v-model="formData.newPassword"
                 :type="!showNewPwd ? 'password' : 'text'"
                 :label="t('newPassword')"
-                 ><template #append>
+            >
-                        <QIcon
+                <template #append>
-                            :name="showNewPwd ? 'visibility_off' : 'visibility'"
+                    <QIcon
-                            class="cursor-pointer"
+                        :name="showNewPwd ? 'visibility_off' : 'visibility'"
-                            @click="showNewPwd = !showNewPwd"
+                        class="cursor-pointer"
-                        />
+                        @click="showNewPwd = !showNewPwd"
-                    </template></VnInput>
+                    />
+                </template>
+            </VnInput>
             <VnInput
                 v-model="repeatPassword"
                 :type="!showCopyPwd ? 'password' : 'text'"
                 :label="t('repeatPassword')"
-                 ><template #append>
+            >
-                        <QIcon
+                <template #append>
-                            :name="showCopyPwd ? 'visibility_off' : 'visibility'"
+                    <QIcon
-                            class="cursor-pointer"
+                        :name="showCopyPwd ? 'visibility_off' : 'visibility'"
-                            @click="showCopyPwd = !showCopyPwd"
+                        class="cursor-pointer"
-                        />
+                        @click="showCopyPwd = !showCopyPwd"
-                    </template></VnInput>
+                    />
+                </template>
+            </VnInput>
         </template>
         <template #actions>
             <QBtn
@@ -153,7 +157,13 @@ onMounted(async () => {
                 flat
                 @click="passwordRequirementsDialogRef.show()"
             />
-            <QBtn :label="t('modify')" type="submit" rounded no-caps flat />
+            <QBtn
+                :label="t('modify')"
+                type="submit"
+                rounded
+                no-caps
+                flat
+            />
         </template>
     </VnForm>
     <QDialog ref="passwordRequirementsDialogRef">
@@ -161,7 +171,10 @@ onMounted(async () => {
             <span class="text-h6 text-bold q-mb-md">
                 {{ t('passwordRequirements') }}
             </span>
-            <div class="column" style="max-width: max-content">
+            <div
+                class="column"
+                style="max-width: max-content"
+            >
                 <span>
                     {{
                         t('charactersLong', {

src/components/ui/VnConfirm.vue

@@ -73,8 +73,8 @@ async function confirm() {
                 />
             </QCardSection>
             <QCardSection class="row items-center">
-                <span v-html="message"></span>
+                <span v-html="message" />
-                <slot name="customHTML"></slot>
+                <slot name="customHTML" />
             </QCardSection>
             <QCardActions align="right">
                 <QBtn

src/components/ui/VnImg.vue

@@ -43,7 +43,10 @@ const url = computed(() => {
         @click="show = !show"
         spinner-color="primary"
     />
-    <QDialog v-model="show" v-if="props.zoomSize">
+    <QDialog
+        v-model="show"
+        v-if="props.zoomSize"
+    >
         <QImg
             :src="url"
             size="full"

src/components/ui/VnTable.vue

@@ -27,8 +27,14 @@ const props = defineProps({
         :rows-per-page-options="props.rowsPerPageOptions"
         table-header-class="vntable-header-default"
     >
-        <template v-for="(_, slotName) in $slots" v-slot:[slotName]="slotProps">
+        <template
-            <slot :name="slotName" v-bind="slotProps" />
+            v-for="(_, slotName) in $slots"
+            #[slotName]="slotProps"
+        >
+            <slot
+                :name="slotName"
+                v-bind="slotProps"
+            />
         </template>
     </QTable>
 </template>

src/layouts/MainLayout.vue

@@ -12,11 +12,17 @@
                 />
                 <QToolbarTitle>
                     {{ $app.title }}
-                    <div v-if="$app.subtitle" class="subtitle text-caption">
+                    <div
+                        v-if="$app.subtitle"
+                        class="subtitle text-caption"
+                    >
                         {{ $app.subtitle }}
                     </div>
                 </QToolbarTitle>
-                <div id="actions" ref="actions"></div>
+                <div
+                    id="actions"
+                    ref="actions"
+                />
                 <QBtn
                     v-if="$app.useRightDrawer"
                     @click="$app.rightDrawerOpen = !$app.rightDrawerOpen"
@@ -29,22 +35,44 @@
                 </QBtn>
             </QToolbar>
         </QHeader>
-        <QDrawer v-model="leftDrawerOpen" :width="250" show-if-above>
+        <QDrawer
+            v-model="leftDrawerOpen"
+            :width="250"
+            show-if-above
+        >
             <QToolbar class="logo">
-                <img src="statics/logo-dark.svg" />
+                <img src="statics/logo-dark.svg">
             </QToolbar>
             <div class="user-info">
                 <div>
                     <span id="user-name">{{ user.nickname }}</span>
-                    <QBtn flat icon="logout" alt="_Exit" @click="logout()" />
+                    <QBtn
+                        flat
+                        icon="logout"
+                        alt="_Exit"
+                        @click="logout()"
+                    />
                 </div>
-                <div id="supplant" class="supplant">
+                <div
+                    id="supplant"
+                    class="supplant"
+                >
                     <span id="supplanted">{{ supplantedUser }}</span>
-                    <QBtn flat icon="logout" alt="_Exit" />
+                    <QBtn
+                        flat
+                        icon="logout"
+                        alt="_Exit"
+                    />
                 </div>
             </div>
-            <QList v-for="item in essentialLinks" :key="item.id">
+            <QList
-                <QItem v-if="!item.childs" :to="`/${item.path}`">
+                v-for="item in essentialLinks"
+                :key="item.id"
+            >
+                <QItem
+                    v-if="!item.childs"
+                    :to="`/${item.path}`"
+                >
                     <QItemSection>
                         <QItemLabel>{{ item.description }}</QItemLabel>
                     </QItemSection>

src/pages/Account/AccountConfig.vue

@@ -63,11 +63,11 @@ onMounted(() => fetchLanguagesSql());
             <VnForm
                 ref="vnFormRef"
                 :title="t('personalInformation')"
-                :fetchFormDataSql="fetchConfigDataSql"
+                :fetch-form-data-sql="fetchConfigDataSql"
                 :pks="pks"
                 table="myUser"
                 schema="account"
-                :defaultActions="false"
+                :default-actions="false"
             >
                 <template #form="{ data }">
                     <VnInput
@@ -94,7 +94,7 @@ onMounted(() => fetchLanguagesSql());
                         option-label="name"
                         option-value="code"
                         :options="langOptions"
-                        @update:modelValue="vnFormRef.submit()"
+                        @update:model-value="vnFormRef.submit()"
                     />
                 </template>
             </VnForm>

src/pages/Account/AddressDetails.vue

@@ -67,29 +67,41 @@ onMounted(() => getCountries());
         </Teleport>
         <VnForm
             ref="vnFormRef"
-            :fetchFormDataSql="fetchAddressDataSql"
+            :fetch-form-data-sql="fetchAddressDataSql"
-            :columnsToIgnoreUpdate="['countryFk']"
+            :columns-to-ignore-update="['countryFk']"
-            :createModelDefault="{
+            :create-model-default="{
                 field: 'clientFk',
                 value: 'account.myUser_getId()'
             }"
             :pks="pks"
-            :isEditMode="isEditMode"
+            :is-edit-mode="isEditMode"
             :title="t(isEditMode ? 'editAddress' : 'addAddress')"
             table="myAddress"
             schema="hedera"
-            @onDataSaved="goBack()"
+            @on-data-saved="goBack()"
         >
             <template #form="{ data }">
-                <VnInput v-model="data.nickname" :label="t('name')" />
+                <VnInput
-                <VnInput v-model="data.street" :label="t('address')" />
+                    v-model="data.nickname"
-                <VnInput v-model="data.city" :label="t('city')" />
+                    :label="t('name')"
-                <VnInput v-model="data.postalCode" :label="t('postalCode')" />
+                />
+                <VnInput
+                    v-model="data.street"
+                    :label="t('address')"
+                />
+                <VnInput
+                    v-model="data.city"
+                    :label="t('city')"
+                />
+                <VnInput
+                    v-model="data.postalCode"
+                    :label="t('postalCode')"
+                />
                 <VnSelect
                     v-model="data.countryFk"
                     :label="t('country')"
                     :options="countriesOptions"
-                    @update:modelValue="data.provinceFk = null"
+                    @update:model-value="data.provinceFk = null"
                 />
                 <VnSelect
                     v-model="data.provinceFk"

src/pages/Account/AddressList.vue

@@ -96,7 +96,10 @@ onMounted(async () => {
         />
     </Teleport>
     <QPage class="vn-w-sm">
-        <QList class="rounded-borders shadow-1 shadow-transition" separator>
+        <QList
+            class="rounded-borders shadow-1 shadow-transition"
+            separator
+        >
             <CardList
                 v-for="(address, index) in addresses"
                 :key="index"

src/pages/Cms/HomeView.vue

@@ -20,15 +20,27 @@ onMounted(async () => await fetchData());
 <template>
     <div style="padding: 0">
         <div class="q-pa-sm row items-start">
-            <div class="new-card q-pa-sm" v-for="myNew in news" :key="myNew.id">
+            <div
+                class="new-card q-pa-sm"
+                v-for="myNew in news"
+                :key="myNew.id"
+            >
                 <QCard>
-                    <VnImg :id="myNew.image" storage="news" />
+                    <VnImg
+                        :id="myNew.image"
+                        storage="news"
+                    />
 
                     <QCardSection>
-                        <div class="text-h5">{{ myNew.title }}</div>
+                        <div class="text-h5">
+                            {{ myNew.title }}
+                        </div>
                     </QCardSection>
                     <QCardSection class="new-body">
-                        <div v-html="myNew.text" class="card-text" />
+                        <div
+                            v-html="myNew.text"
+                            class="card-text"
+                        />
                     </QCardSection>
                 </QCard>
             </div>
@@ -43,7 +55,10 @@ onMounted(async () => await fetchData());
             />
         </QPageSticky>
     </div>
-    <QDialog v-model="showPreview" @hide="selectedImageSrc = ''">
+    <QDialog
+        v-model="showPreview"
+        @hide="selectedImageSrc = ''"
+    >
         <QImg :src="selectedImageSrc" />
     </QDialog>
 </template>

src/pages/Ecomerce/Catalog.vue

@@ -10,8 +10,11 @@
             dense
             standout
         >
-            <template v-slot:prepend>
+            <template #prepend>
-                <QIcon v-if="search === ''" name="search" />
+                <QIcon
+                    v-if="search === ''"
+                    name="search"
+                />
                 <QIcon
                     v-else
                     name="clear"
@@ -29,7 +32,11 @@
         />
     </Teleport>
     <div style="padding-bottom: 5em">
-        <QDrawer v-model="$app.rightDrawerOpen" side="right" :width="250">
+        <QDrawer
+            v-model="$app.rightDrawerOpen"
+            side="right"
+            :width="250"
+        >
             <div class="q-pa-md">
                 <div class="basket-info">
                     <p>{{ date(new Date()) }}</p>
@@ -37,7 +44,11 @@
                         {{ $t('warehouse') }}
                         {{ 'Algemesi' }}
                     </p>
-                    <QBtn flat rounded no-caps>
+                    <QBtn
+                        flat
+                        rounded
+                        no-caps
+                    >
                         {{ $t('modify') }}
                     </QBtn>
                 </div>
@@ -66,11 +77,14 @@
                             :title="cat.name"
                             :to="{ params: { category: cat.id, type: null } }"
                         >
-                            <img :src="`statics/category/${cat.code}.svg`" />
+                            <img :src="`statics/category/${cat.code}.svg`">
                         </QBtn>
                     </div>
                 </div>
-                <div class="q-mt-md" v-if="category || search">
+                <div
+                    class="q-mt-md"
+                    v-if="category || search"
+                >
                     <div class="q-mb-xs text-grey-7">
                         {{ $t('filterBy') }}
                     </div>
@@ -95,8 +109,15 @@
                     />
                 </div>
             </div>
-            <div class="q-pa-md" v-if="typeId || search">
+            <div
-                <div class="q-mb-md" v-for="tag in tags" :key="tag.uid">
+                class="q-pa-md"
+                v-if="typeId || search"
+            >
+                <div
+                    class="q-mb-md"
+                    v-for="tag in tags"
+                    :key="tag.uid"
+                >
                     <div class="q-mb-xs text-caption text-grey-7">
                         {{ tag.name }}
                         <QIcon
@@ -166,8 +187,11 @@
             :disable="disableScroll"
         >
             <div class="q-pa-md row justify-center q-gutter-md">
-                <QSpinner v-if="isLoading" color="primary" size="50px">
+                <QSpinner
-                </QSpinner>
+                    v-if="isLoading"
+                    color="primary"
+                    size="50px"
+                />
                 <div
                     v-if="items && !items.length"
                     class="text-subtitle1 text-grey-7 q-pa-md"
@@ -180,19 +204,26 @@
                 >
                     {{ $t('pleaseSetFilter') }}
                 </div>
-                <QCard class="my-card" v-for="item in items" :key="item.id">
+                <QCard
-                    <img :src="`${$imageBase}/catalog/200x200/${item.image}`" />
+                    class="my-card"
+                    v-for="_item in items"
+                    :key="_item.id"
+                >
+                    <img :src="`${$imageBase}/catalog/200x200/${_item.image}`">
                     <QCardSection>
                         <div class="name text-subtitle1">
-                            {{ item.longName }}
+                            {{ _item.longName }}
                         </div>
                         <div
                             class="sub-name text-uppercase text-subtitle1 text-grey-7 ellipsize q-pt-xs"
                         >
-                            {{ item.subName }}
+                            {{ _item.subName }}
                         </div>
                         <div class="tags q-pt-xs">
-                            <div v-for="tag in item.tags" :key="tag.tagFk">
+                            <div
+                                v-for="tag in _item.tags"
+                                :key="tag.tagFk"
+                            >
                                 <span class="text-grey-7">{{
                                     tag.tag.name
                                 }}</span>
@@ -203,26 +234,29 @@
                     <QCardActions class="actions justify-between">
                         <div class="q-pl-sm">
                             <span class="available bg-green text-white">{{
-                                item.available
+                                _item.available
                             }}</span>
                             {{ $t('from') }}
                             <span class="price">{{
-                                currency(item.buy?.price3)
+                                currency(_item.buy?.price3)
                             }}</span>
                         </div>
                         <QBtn
                             icon="add_shopping_cart"
                             :title="$t('buy')"
-                            @click="showItem(item)"
+                            @click="showItem(_item)"
                             flat
-                        >
+                        />
-                        </QBtn>
                     </QCardActions>
                 </QCard>
             </div>
-            <template v-slot:loading>
+            <template #loading>
                 <div class="row justify-center q-my-md">
-                    <QSpinner color="primary" name="dots" size="40px" />
+                    <QSpinner
+                        color="primary"
+                        name="dots"
+                        size="40px"
+                    />
                 </div>
             </template>
         </QInfiniteScroll>
@@ -244,19 +278,30 @@
                     >
                         {{ item.subName }}
                     </div>
-                    <div class="text-grey-7">#{{ item.id }}</div>
+                    <div class="text-grey-7">
+                        #{{ item.id }}
+                    </div>
                 </QCardSection>
                 <QCardSection>
-                    <div v-for="tag in item.tags" :key="tag.tagFk">
+                    <div
+                        v-for="tag in item.tags"
+                        :key="tag.tagFk"
+                    >
                         <span class="text-grey-7">{{ tag.tag.name }}</span>
                         {{ tag.value }}
                     </div>
                 </QCardSection>
                 <QCardActions align="right">
-                    <QBtn @click="showItemDialog = false" flat>
+                    <QBtn
+                        @click="showItemDialog = false"
+                        flat
+                    >
                         {{ $t('cancel') }}
                     </QBtn>
-                    <QBtn @click="showItemDialog = false" flat>
+                    <QBtn
+                        @click="showItemDialog = false"
+                        flat
+                    >
                         {{ $t('accept') }}
                     </QBtn>
                 </QCardActions>

src/pages/Ecomerce/PendingOrders.vue

@@ -82,9 +82,11 @@ onMounted(async () => {
             :to="{ name: 'basket', params: { id: order.id } }"
         >
             <template #content>
-                <QItemLabel class="text-bold q-mb-sm">{{
+                <QItemLabel class="text-bold q-mb-sm">
-                    formatDateTitle(order.sent)
+                    {{
-                }}</QItemLabel>
+                        formatDateTitle(order.sent)
+                    }}
+                </QItemLabel>
                 <QItemLabel> #{{ order.id }} </QItemLabel>
                 <QItemLabel>{{ order.nickname }}</QItemLabel>
                 <QItemLabel>{{ order.agency }}</QItemLabel>

src/pages/Ecomerce/TicketDetails.vue

@@ -25,9 +25,14 @@ const lineSubtotal = line =>
 </script>
 
 <template>
-    <QCard class="vn-w-sm" style="padding: 32px">
+    <QCard
+        class="vn-w-sm"
+        style="padding: 32px"
+    >
         <QCardSection class="no-padding q-mb-md">
-            <div class="text-h6">#{{ ticket.id }}</div>
+            <div class="text-h6">
+                #{{ ticket.id }}
+            </div>
         </QCardSection>
         <QCardSection class="no-padding q-mb-md q-gutter-y-xs">
             <div class="text-subtitle1 text-bold">
@@ -69,7 +74,10 @@ const lineSubtotal = line =>
             </span>
         </QCardSection>
         <QSeparator inset />
-        <QList v-for="row in rows" :key="row.itemFk">
+        <QList
+            v-for="row in rows"
+            :key="row.itemFk"
+        >
             <QItem>
                 <QItemSection avatar>
                     <VnImg
@@ -83,16 +91,25 @@ const lineSubtotal = line =>
                     <QItemLabel lines="1">
                         {{ row.concept }}
                     </QItemLabel>
-                    <QItemLabel lines="1" caption>
+                    <QItemLabel
+                        lines="1"
+                        caption
+                    >
                         {{ row.value5 }} {{ row.value6 }} {{ row.value7 }}
                     </QItemLabel>
                     <QItemLabel lines="1">
                         {{ row.quantity }} x {{ currency(row.price) }}
                     </QItemLabel>
                 </QItemSection>
-                <QItemSection side class="total">
+                <QItemSection
+                    side
+                    class="total"
+                >
                     <QItemLabel>
-                        <span class="discount" v-if="row.discount">
+                        <span
+                            class="discount"
+                            v-if="row.discount"
+                        >
                             {{ currency(lineDiscountSubtotal(row)) }} -
                             {{ currency(row.discount) }} =
                         </span>

src/pages/Ecomerce/TicketView.vue

@@ -56,7 +56,10 @@ const onPrintClick = () => {
         />
     </Teleport>
     <QPage>
-        <TicketDetails :rows="rows" :ticket="ticket" />
+        <TicketDetails
+            :rows="rows"
+            :ticket="ticket"
+        />
     </QPage>
 </template>
 

src/pages/ErrorNotFound.vue

@@ -3,9 +3,14 @@
         class="fullscreen bg-accent text-white text-center q-pa-md flex flex-center"
     >
         <div>
-            <div style="font-size: 30vh">404</div>
+            <div style="font-size: 30vh">
+                404
+            </div>
 
-            <div class="text-h2" style="opacity: 0.4">
+            <div
+                class="text-h2"
+                style="opacity: 0.4"
+            >
                 Oops. Nothing here...
             </div>
 

src/pages/Login/LoginView.vue

@@ -37,19 +37,33 @@ async function onLogin() {
 <template>
     <div class="main">
         <div class="header">
-            <router-link to="/" class="block">
+            <router-link
-                <img src="statics/logo.svg" alt="Verdnatura" class="block" />
+                to="/"
+                class="block"
+            >
+                <img
+                    src="statics/logo.svg"
+                    alt="Verdnatura"
+                    class="block"
+                >
             </router-link>
         </div>
-        <QForm @submit="onLogin" class="q-gutter-y-md">
+        <QForm
+            @submit="onLogin"
+            class="q-gutter-y-md"
+        >
             <div class="q-gutter-y-sm">
-                <QInput v-model="email" :label="$t('user')" autofocus />
+                <QInput
+                    v-model="email"
+                    :label="$t('user')"
+                    autofocus
+                />
                 <QInput
                     v-model="password"
                     :label="$t('password')"
                     :type="!showPwd ? 'password' : 'text'"
                 >
-                    <template v-slot:append>
+                    <template #append>
                         <QIcon
                             :name="showPwd ? 'visibility_off' : 'visibility'"
                             class="cursor-pointer"
@@ -57,31 +71,38 @@ async function onLogin() {
                         />
                     </template>
                 </QInput>
-                <div class="  text-center"> <QCheckbox
+                <div class="text-center">
-                    v-model="remember"
+                    <QCheckbox
-                    :label="$t('remindMe')"
+                        v-model="remember"
-                    dense
+                        :label="$t('remindMe')"
-                /> <QBtn
+                        dense
-                    id="switchLanguage"
+                    />
-                    :label="$t('language')"
+                    <QBtn
-                    icon="translate"
+                        id="switchLanguage"
-                    color="primary"
+                        :label="$t('language')"
-                    size="sm"
+                        icon="translate"
-                    flat
+                        color="primary"
-                    rounded
+                        size="sm"
-                >
+                        flat
-                    <QMenu auto-close>
+                        rounded
-                        <QList dense v-for="lang in langs" :key="lang">
+                    >
-                            <QItem
+                        <QMenu auto-close>
-                            disabled
+                            <QList
-                                v-ripple
+                                dense
-                                clickable
+                                v-for="lang in langs"
+                                :key="lang"
                             >
-                                {{ $t(`langs.${lang}`) }}
+                                <QItem
-                            </QItem>
+                                    disabled
-                        </QList>
+                                    v-ripple
-                    </QMenu>
+                                    clickable
-                </QBtn></div>
+                                >
+                                    {{ $t(`langs.${lang}`) }}
+                                </QItem>
+                            </QList>
+                        </QMenu>
+                    </QBtn>
+                </div>
             </div>
             <div class="justify-center">
                 <QBtn
@@ -106,7 +127,10 @@ async function onLogin() {
                 />
             </div>
             <p class="password-forgotten text-center q-mt-lg">
-                <router-link to="/remember-password" class="link">
+                <router-link
+                    to="/remember-password"
+                    class="link"
+                >
                     {{ $t('haveForgottenPassword') }}
                 </router-link>
             </p>

src/pages/Login/RememberPassword.vue

@@ -8,7 +8,10 @@
             />
         </div>
         <div>
-            <QForm @submit="onSend" class="q-gutter-y-md text-grey-8">
+            <QForm
+                @submit="onSend"
+                class="q-gutter-y-md text-grey-8"
+            >
                 <div class="text-h5">
                     <div>
                         {{ $t('dontWorry') }}
@@ -37,7 +40,10 @@
                         unelevated
                     />
                     <div class="text-center q-mt-md">
-                        <router-link to="/login" class="link">
+                        <router-link
+                            to="/login"
+                            class="link"
+                        >
                             {{ $t('return') }}
                         </router-link>
                     </div>

src/pages/Login/ResetPassword.vue

@@ -8,7 +8,11 @@
             />
         </QCard-section>
         <QCard-section>
-            <QForm @submit="onRegister" ref="form" class="q-gutter-y-md">
+            <QForm
+                @submit="onRegister"
+                ref="form"
+                class="q-gutter-y-md"
+            >
                 <div class="text-grey-8 text-h5 text-center">
                     {{ $t('fillData') }}
                 </div>
@@ -21,7 +25,7 @@
                         hint=""
                         filled
                     >
-                        <template v-slot:append>
+                        <template #append>
                             <QIcon
                                 :name="
                                     showPwd ? 'visibility_off' : 'visibility'
@@ -42,7 +46,7 @@
                         hint=""
                         filled
                     >
-                        <template v-slot:append>
+                        <template #append>
                             <QIcon
                                 :name="
                                     showRpPwd ? 'visibility_off' : 'visibility'
@@ -61,7 +65,10 @@
                         color="primary"
                     />
                     <div class="text-center q-mt-xs">
-                        <router-link to="/login" class="link">
+                        <router-link
+                            to="/login"
+                            class="link"
+                        >
                             {{ $t('return') }}
                         </router-link>
                     </div>