move QList element and classes inside VnFilterPanel

src/components/common/VnLogFilter.vue

@@ -38,7 +38,6 @@ const workers = ref();
                 minimal
             >
             </QDate>
-            <QList dense>
             <QSeparator />
             <QItem>
                 <QItemSection v-if="!workers">
@@ -59,7 +58,6 @@ const workers = ref();
                     />
                 </QItemSection>
             </QItem>
-            </QList>
         </template>
     </VnFilterPanel>
 </template>

src/components/common/VnSelectFilter.vue

@@ -116,3 +116,9 @@ watch(options, (newValue) => {
         </template>
     </QSelect>
 </template>
+
+<style scoped lang="scss">
+.q-field--outlined {
+    max-width: 100%;
+}
+</style>

src/components/ui/VnFilterPanel.vue

@@ -216,7 +216,9 @@ function formatValue(value) {
             </QItem>
             <QSeparator />
         </QList>
+        <QList dense class="list q-gutter-y-sm q-mt-sm">
             <slot name="body" :params="userParams" :search-fn="search"></slot>
+        </QList>
         <template v-if="props.searchButton">
             <QItem>
                 <QItemSection class="q-py-sm">
@@ -242,6 +244,12 @@ function formatValue(value) {
     />
 </template>
 
+<style scoped lang="scss">
+.list {
+    width: 256px;
+}
+</style>
+
 <i18n>
 es:
     No filters applied: No se han aplicado filtros

src/pages/Claim/ClaimFilter.vue

@@ -36,7 +36,6 @@ const states = ref();
             </div>
         </template>
         <template #body="{ params, searchFn }">
-            <QList dense class="list">
             <QItem class="q-my-sm">
                 <QItemSection>
                     <VnInput
@@ -178,20 +177,10 @@ const states = ref();
                     </QItemSection>
                 </QItem>
             </QExpansionItem>
-            </QList>
         </template>
     </VnFilterPanel>
 </template>
 
-<style scoped>
-.list {
-    width: 256px;
-}
-.list * {
-    max-width: 100%;
-}
-</style>
-
 <i18n>
 en:
     params:

src/pages/Customer/CustomerFilter.vue

@@ -37,7 +37,6 @@ const zones = ref();
             </div>
         </template>
         <template #body="{ params, searchFn }">
-            <QList dense class="list">
             <QItem class="q-my-sm">
                 <QItemSection>
                     <VnInput :label="t('FI')" v-model="params.fi" is-outlined>
@@ -115,11 +114,7 @@ const zones = ref();
             <QExpansionItem :label="t('More options')" expand-separator>
                 <QItem>
                     <QItemSection>
-                            <VnInput
+                        <VnInput :label="t('Phone')" v-model="params.phone" is-outlined>
-                                :label="t('Phone')"
-                                v-model="params.phone"
-                                is-outlined
-                            >
                             <template #prepend>
                                 <QIcon name="phone" size="xs" />
                             </template>
@@ -128,11 +123,7 @@ const zones = ref();
                 </QItem>
                 <QItem>
                     <QItemSection>
-                            <VnInput
+                        <VnInput :label="t('Email')" v-model="params.email" is-outlined>
-                                :label="t('Email')"
-                                v-model="params.email"
-                                is-outlined
-                            >
                             <template #prepend>
                                 <QIcon name="email" size="sm" />
                             </template>
@@ -170,20 +161,10 @@ const zones = ref();
                     </QItemSection>
                 </QItem>
             </QExpansionItem>
-            </QList>
         </template>
     </VnFilterPanel>
 </template>
 
-<style scoped>
-.list {
-    width: 256px;
-}
-.list * {
-    max-width: 100%;
-}
-</style>
-
 <i18n>
 en:
     params:

src/pages/Customer/Defaulter/CustomerDefaulterFilter.vue

@@ -46,7 +46,6 @@ const authors = ref();
         </template>
 
         <template #body="{ params }">
-            <QList dense class="list">
             <QItem class="q-mb-sm q-mt-sm">
                 <QItemSection v-if="clients">
                     <VnSelectFilter
@@ -161,11 +160,7 @@ const authors = ref();
 
             <QItem class="q-mb-sm">
                 <QItemSection>
-                        <VnInput
+                    <VnInput :label="t('L. O. Date')" is-outlined v-model="params.date" />
-                            :label="t('L. O. Date')"
-                            is-outlined
-                            v-model="params.date"
-                        />
                 </QItemSection>
             </QItem>
 
@@ -189,20 +184,10 @@ const authors = ref();
                 </QItemSection>
             </QItem>
             <QSeparator />
-            </QList>
         </template>
     </VnFilterPanel>
 </template>
 
-<style scoped>
-.list {
-    width: 256px;
-}
-.list * {
-    max-width: 100%;
-}
-</style>
-
 <i18n>
 en:
     params:

src/pages/Customer/ExtendedList/CustomerExtendedListFilter.vue

@@ -145,7 +145,6 @@ const shouldRenderColumn = (colName) => {
             </div>
         </template>
         <template #body="{ params, searchFn }">
-            <QList dense class="list q-gutter-y-sm q-mt-sm">
             <QItem v-if="shouldRenderColumn('id')">
                 <QItemSection>
                     <VnInput
@@ -204,9 +203,7 @@ const shouldRenderColumn = (colName) => {
                 <QItemSection v-if="workers">
                     <VnSelectFilter
                         :label="
-                                t(
+                            t('customer.extendedList.tableVisibleColumns.salesPersonFk')
-                                    'customer.extendedList.tableVisibleColumns.salesPersonFk'
-                                )
                         "
                         v-model="params.salesPersonFk"
                         @update:model-value="searchFn()"
@@ -237,9 +234,7 @@ const shouldRenderColumn = (colName) => {
                 <QItemSection>
                     <VnInput
                         :label="
-                                t(
+                            t('customer.extendedList.tableVisibleColumns.creditInsurance')
-                                    'customer.extendedList.tableVisibleColumns.creditInsurance'
-                                )
                         "
                         v-model="params.creditInsurance"
                         is-outlined
@@ -276,9 +271,7 @@ const shouldRenderColumn = (colName) => {
             <QItem v-if="shouldRenderColumn('countryFk')">
                 <QItemSection>
                     <VnSelectFilter
-                            :label="
+                        :label="t('customer.extendedList.tableVisibleColumns.countryFk')"
-                                t('customer.extendedList.tableVisibleColumns.countryFk')
-                            "
                         v-model="params.countryFk"
                         @update:model-value="searchFn()"
                         :options="countriesOptions"
@@ -295,9 +288,7 @@ const shouldRenderColumn = (colName) => {
             <QItem v-if="shouldRenderColumn('provinceFk')">
                 <QItemSection>
                     <VnSelectFilter
-                            :label="
+                        :label="t('customer.extendedList.tableVisibleColumns.provinceFk')"
-                                t('customer.extendedList.tableVisibleColumns.provinceFk')
-                            "
                         v-model="params.provinceFk"
                         @update:model-value="searchFn()"
                         :options="provincesOptions"
@@ -323,9 +314,7 @@ const shouldRenderColumn = (colName) => {
             <QItem v-if="shouldRenderColumn('postcode')">
                 <QItemSection>
                     <VnInput
-                            :label="
+                        :label="t('customer.extendedList.tableVisibleColumns.postcode')"
-                                t('customer.extendedList.tableVisibleColumns.postcode')
-                            "
                         v-model="params.postcode"
                         is-outlined
                     />
@@ -345,9 +334,7 @@ const shouldRenderColumn = (colName) => {
                 <QItemSection>
                     <VnInputDate
                         v-model="params.created"
-                            :label="
+                        :label="t('customer.extendedList.tableVisibleColumns.created')"
-                                t('customer.extendedList.tableVisibleColumns.created')
-                            "
                         @update:model-value="searchFn()"
                         is-outlined
                     />
@@ -357,9 +344,7 @@ const shouldRenderColumn = (colName) => {
                 <QItemSection>
                     <VnSelectFilter
                         :label="
-                                t(
+                            t('customer.extendedList.tableVisibleColumns.businessTypeFk')
-                                    'customer.extendedList.tableVisibleColumns.businessTypeFk'
-                                )
                         "
                         v-model="params.businessTypeFk"
                         :options="businessTypesOptions"
@@ -397,9 +382,7 @@ const shouldRenderColumn = (colName) => {
                 <QItemSection>
                     <VnSelectFilter
                         :label="
-                                t(
+                            t('customer.extendedList.tableVisibleColumns.sageTaxTypeFk')
-                                    'customer.extendedList.tableVisibleColumns.sageTaxTypeFk'
-                                )
                         "
                         v-model="params.sageTaxTypeFk"
                         @update:model-value="searchFn()"
@@ -435,16 +418,12 @@ const shouldRenderColumn = (colName) => {
                     />
                 </QItemSection>
             </QItem>
-                <QItem
+            <QItem v-if="shouldRenderColumn('isActive') || shouldRenderColumn('isVies')">
-                    v-if="shouldRenderColumn('isActive') || shouldRenderColumn('isVies')"
-                >
                 <QItemSection v-if="shouldRenderColumn('isActive')">
                     <QCheckbox
                         v-model="params.isActive"
                         @update:model-value="searchFn()"
-                            :label="
+                        :label="t('customer.extendedList.tableVisibleColumns.isActive')"
-                                t('customer.extendedList.tableVisibleColumns.isActive')
-                            "
                         toggle-indeterminate
                         :false-value="undefined"
                     />
@@ -483,9 +462,7 @@ const shouldRenderColumn = (colName) => {
                         v-model="params.isEqualizated"
                         @update:model-value="searchFn()"
                         :label="
-                                t(
+                            t('customer.extendedList.tableVisibleColumns.isEqualizated')
-                                    'customer.extendedList.tableVisibleColumns.isEqualizated'
-                                )
                         "
                         toggle-indeterminate
                         :false-value="undefined"
@@ -494,17 +471,14 @@ const shouldRenderColumn = (colName) => {
             </QItem>
             <QItem
                 v-if="
-                        shouldRenderColumn('hasToInvoice') ||
+                    shouldRenderColumn('hasToInvoice') || shouldRenderColumn('isFreezed')
-                        shouldRenderColumn('isFreezed')
                 "
             >
                 <QItemSection v-if="shouldRenderColumn('isFreezed')">
                     <QCheckbox
                         v-model="params.isFreezed"
                         @update:model-value="searchFn()"
-                            :label="
+                        :label="t('customer.extendedList.tableVisibleColumns.isFreezed')"
-                                t('customer.extendedList.tableVisibleColumns.isFreezed')
-                            "
                         toggle-indeterminate
                         :false-value="undefined"
                     />
@@ -514,9 +488,7 @@ const shouldRenderColumn = (colName) => {
                         v-model="params.hasToInvoice"
                         @update:model-value="searchFn()"
                         :label="
-                                t(
+                            t('customer.extendedList.tableVisibleColumns.hasToInvoice')
-                                    'customer.extendedList.tableVisibleColumns.hasToInvoice'
-                                )
                         "
                         toggle-indeterminate
                         :false-value="undefined"
@@ -547,9 +519,7 @@ const shouldRenderColumn = (colName) => {
                         v-model="params.isToBeMailed"
                         @update:model-value="searchFn()"
                         :label="
-                                t(
+                            t('customer.extendedList.tableVisibleColumns.isToBeMailed')
-                                    'customer.extendedList.tableVisibleColumns.isToBeMailed'
-                                )
                         "
                         toggle-indeterminate
                         :false-value="undefined"
@@ -557,9 +527,7 @@ const shouldRenderColumn = (colName) => {
                 </QItemSection>
             </QItem>
             <QItem
-                    v-if="
+                v-if="shouldRenderColumn('hasLcr') || shouldRenderColumn('hasCoreVnl')"
-                        shouldRenderColumn('hasLcr') || shouldRenderColumn('hasCoreVnl')
-                    "
             >
                 <QItemSection v-if="shouldRenderColumn('hasLcr')">
                     <QCheckbox
@@ -574,9 +542,7 @@ const shouldRenderColumn = (colName) => {
                     <QCheckbox
                         v-model="params.hasCoreVnl"
                         @update:model-value="searchFn()"
-                            :label="
+                        :label="t('customer.extendedList.tableVisibleColumns.hasCoreVnl')"
-                                t('customer.extendedList.tableVisibleColumns.hasCoreVnl')
-                            "
                         toggle-indeterminate
                         :false-value="undefined"
                     />
@@ -587,9 +553,7 @@ const shouldRenderColumn = (colName) => {
                     <QCheckbox
                         v-model="params.hasSepaVnl"
                         @update:model-value="searchFn()"
-                            :label="
+                        :label="t('customer.extendedList.tableVisibleColumns.hasSepaVnl')"
-                                t('customer.extendedList.tableVisibleColumns.hasSepaVnl')
-                            "
                         toggle-indeterminate
                         :false-value="undefined"
                     />
@@ -597,20 +561,10 @@ const shouldRenderColumn = (colName) => {
             </QItem>
 
             <QSeparator />
-            </QList>
         </template>
     </VnFilterPanel>
 </template>
 
-<style scoped>
-.list {
-    width: 256px;
-}
-.list * {
-    max-width: 100%;
-}
-</style>
-
 <i18n>
 es:
     Social name: Razón social

src/pages/Customer/Notifications/CustomerNotificationsFilter.vue

@@ -36,7 +36,6 @@ const clients = ref();
         </template>
 
         <template #body="{ params, searchFn }">
-            <QList dense class="list">
             <QItem class="q-mb-sm q-mt-sm">
                 <QItemSection>
                     <VnInput
@@ -107,20 +106,10 @@ const clients = ref();
                 </QItemSection>
             </QItem>
             <QSeparator />
-            </QList>
         </template>
     </VnFilterPanel>
 </template>
 
-<style scoped>
-.list {
-    width: 256px;
-}
-.list * {
-    max-width: 100%;
-}
-</style>
-
 <i18n>
 en:
     params:

src/pages/Customer/Payments/CustomerPaymentsFilter.vue

@@ -27,14 +27,9 @@ function isValidNumber(value) {
             </div>
         </template>
         <template #body="{ params }">
-            <QList dense class="q-gutter-y-sm q-mt-sm">
             <QItem>
                 <QItemSection>
-                        <VnInput
+                    <VnInput :label="t('Order ID')" v-model="params.orderFk" is-outlined>
-                            :label="t('Order ID')"
-                            v-model="params.orderFk"
-                            is-outlined
-                        >
                         <template #prepend>
                             <QIcon name="vn:basket" size="xs" />
                         </template>
@@ -67,8 +62,7 @@ function isValidNumber(value) {
                             }
                         "
                         :rules="[
-                                (val) =>
+                            (val) => isValidNumber(val) || !val || 'Please type a number',
-                                    isValidNumber(val) || !val || 'Please type a number',
                         ]"
                         lazy-rules
                     >
@@ -81,17 +75,12 @@ function isValidNumber(value) {
 
             <QItem>
                 <QItemSection>
-                        <VnInputDate
+                    <VnInputDate v-model="params.from" :label="t('From')" is-outlined />
-                            v-model="params.from"
-                            :label="t('From')"
-                            is-outlined
-                        />
                 </QItemSection>
                 <QItemSection>
                     <VnInputDate v-model="params.to" :label="t('To')" is-outlined />
                 </QItemSection>
             </QItem>
-            </QList>
         </template>
     </VnFilterPanel>
 </template>

src/pages/Entry/EntryFilter.vue

@@ -54,7 +54,6 @@ const suppliersOptions = ref([]);
             </div>
         </template>
         <template #body="{ params }">
-            <QList dense class="list q-gutter-y-sm q-mt-sm">
             <QItem>
                 <QItemSection>
                     <VnInput
@@ -198,7 +197,6 @@ const suppliersOptions = ref([]);
                     />
                 </QItemSection>
             </QItem>
-            </QList>
         </template>
     </VnFilterPanel>
 </template>

src/pages/InvoiceIn/InvoiceInFilter.vue

@@ -36,7 +36,6 @@ const suppliersRef = ref();
             </div>
         </template>
         <template #body="{ params, searchFn }">
-            <QList dense class="list q-gutter-y-sm q-mt-sm">
             <QItem>
                 <QItemSection>
                     <VnInput
@@ -186,11 +185,7 @@ const suppliersRef = ref();
                 </QItem>
                 <QItem>
                     <QItemSection>
-                            <VnInputDate
+                        <VnInputDate :label="t('To')" v-model="params.to" is-outlined />
-                                :label="t('To')"
-                                v-model="params.to"
-                                is-outlined
-                            />
                     </QItemSection>
                 </QItem>
                 <QItem>
@@ -203,20 +198,10 @@ const suppliersRef = ref();
                     </QItemSection>
                 </QItem>
             </QExpansionItem>
-            </QList>
         </template>
     </VnFilterPanel>
 </template>
 
-<style scoped>
-.list {
-    width: 256px;
-}
-.list * {
-    max-width: 100%;
-}
-</style>
-
 <i18n>
 en:
     params:

src/pages/InvoiceOut/InvoiceOutFilter.vue

@@ -41,7 +41,6 @@ function setWorkers(data) {
             </div>
         </template>
         <template #body="{ params, searchFn }">
-            <QList dense class="q-gutter-y-sm q-mt-sm">
             <QItem>
                 <QItemSection>
                     <VnInput
@@ -58,11 +57,7 @@ function setWorkers(data) {
             </QItem>
             <QItem>
                 <QItemSection>
-                        <VnInput
+                    <VnInput :label="t('Amount')" v-model="params.amount" is-outlined />
-                            :label="t('Amount')"
-                            v-model="params.amount"
-                            is-outlined
-                        />
                 </QItemSection>
             </QItem>
             <QItem>
@@ -129,7 +124,6 @@ function setWorkers(data) {
                     </QItemSection>
                 </QItem>
             </QExpansionItem>
-            </QList>
         </template>
     </VnFilterPanel>
 </template>

src/pages/InvoiceOut/InvoiceOutNegativeBasesFilter.vue

@@ -27,7 +27,6 @@ const props = defineProps({
             </div>
         </template>
         <template #body="{ params }">
-            <QList dense class="q-gutter-y-sm q-mt-sm">
             <QItem>
                 <QItemSection>
                     <VnInputDate
@@ -101,13 +100,10 @@ const props = defineProps({
                     />
                 </QItemSection>
             </QItem>
-            </QList>
         </template>
     </VnFilterPanel>
 </template>
 
-<style scoped></style>
-
 <i18n>
 en:
     params:

src/pages/Order/Card/OrderCatalogFilter.vue

@@ -219,7 +219,6 @@ const getCategoryClass = (category, params) => {
             </template>
         </template>
         <template #body="{ params, searchFn }">
-            <QList dense style="max-width: 256px">
             <QItem class="category-filter q-mt-md">
                 <div
                     v-for="category in categoryList"
@@ -395,7 +394,6 @@ const getCategoryClass = (category, params) => {
                 </QItemSection>
             </QItem>
             <QSeparator />
-            </QList>
         </template>
     </VnFilterPanel>
 </template>

src/pages/Order/Card/OrderFilter.vue

@@ -59,7 +59,6 @@ const sourceList = ref(null);
             </div>
         </template>
         <template #body="{ params }">
-            <QList id="orderFilter" dense>
             <QItem>
                 <QItemSection>
                     <VnInput
@@ -202,19 +201,10 @@ const sourceList = ref(null);
                     <QCheckbox v-model="params.showEmpty" :label="t('showEmpty')" />
                 </QItemSection>
             </QItem>
-            </QList>
         </template>
     </VnFilterPanel>
 </template>
 
-<style lang="scss">
-#orderFilter {
-    .q-item {
-        padding-top: 8px;
-    }
-}
-</style>
-
 <i18n>
 en:
     params:

src/pages/Route/Card/RouteFilter.vue

@@ -61,7 +61,6 @@ const warehouseList = ref([]);
             </div>
         </template>
         <template #body="{ params }">
-            <QList dense>
             <QItem class="q-my-sm">
                 <QItemSection v-if="workerList">
                     <VnSelectFilter
@@ -198,7 +197,6 @@ const warehouseList = ref([]);
                     />
                 </QItemSection>
             </QItem>
-            </QList>
         </template>
     </VnFilterPanel>
 </template>

src/pages/Route/Cmr/CmrFilter.vue

@@ -28,7 +28,6 @@ const countries = ref();
             </div>
         </template>
         <template #body="{ params }">
-            <QList dense class="q-gutter-y-sm q-mt-sm">
             <QItem>
                 <QItemSection>
                     <VnInput
@@ -124,7 +123,6 @@ const countries = ref();
                     />
                 </QItemSection>
             </QItem>
-            </QList>
         </template>
     </VnFilterPanel>
 </template>

src/pages/Shelving/Card/ShelvingFilter.vue

@@ -41,7 +41,11 @@ function setParkings(data) {
         @on-fetch="setWorkers"
         auto-load
     />
-    <VnFilterPanel :data-key="props.dataKey" :search-button="true" @search="emit('search')">
+    <VnFilterPanel
+        :data-key="props.dataKey"
+        :search-button="true"
+        @search="emit('search')"
+    >
         <template #tags="{ tag, formatFn }">
             <div class="q-gutter-x-xs">
                 <strong>{{ t(`params.${tag.label}`) }}: </strong>
@@ -49,7 +53,6 @@ function setParkings(data) {
             </div>
         </template>
         <template #body="{ params }">
-            <QList dense>
             <QItem class="q-my-sm">
                 <QItemSection v-if="!parkings">
                     <QSkeleton type="QInput" class="full-width" />
@@ -101,7 +104,6 @@ function setParkings(data) {
                     />
                 </QItemSection>
             </QItem>
-            </QList>
         </template>
     </VnFilterPanel>
 </template>

src/pages/Ticket/TicketFilter.vue

@@ -56,7 +56,6 @@ const warehouses = ref();
             </div>
         </template>
         <template #body="{ params, searchFn }">
-            <QList dense class="q-gutter-y-sm q-mt-sm">
             <QItem>
                 <QItemSection>
                     <VnInput
@@ -75,11 +74,7 @@ const warehouses = ref();
             </QItem>
             <QItem>
                 <QItemSection>
-                        <VnInputDate
+                    <VnInputDate v-model="params.from" :label="t('From')" is-outlined />
-                            v-model="params.from"
-                            :label="t('From')"
-                            is-outlined
-                        />
                 </QItemSection>
                 <QItemSection>
                     <VnInputDate v-model="params.to" :label="t('To')" is-outlined />
@@ -244,7 +239,6 @@ const warehouses = ref();
                     </QItemSection>
                 </QItem>
             </QExpansionItem>
-            </QList>
         </template>
     </VnFilterPanel>
 </template>

src/pages/Travel/ExtraCommunityFilter.vue

@@ -66,7 +66,6 @@ const decrement = (paramsObj, key) => {
             </div>
         </template>
         <template #body="{ params }">
-            <QList dense class="list q-gutter-y-sm q-mt-sm">
             <QItem>
                 <QItemSection>
                     <VnInput label="id" v-model="params.id" is-outlined />
@@ -205,19 +204,11 @@ const decrement = (paramsObj, key) => {
                     />
                 </QItemSection>
             </QItem>
-            </QList>
         </template>
     </VnFilterPanel>
 </template>
 
 <style scoped>
-.list {
-    width: 256px;
-}
-.list * {
-    max-width: 100%;
-}
-
 .input-number >>> input[type='number'] {
     -moz-appearance: textfield;
 }

src/pages/Travel/TravelFilter.vue

@@ -61,7 +61,6 @@ const decrement = (paramsObj, key) => {
             </div>
         </template>
         <template #body="{ params }">
-            <QList dense class="list q-gutter-y-sm q-mt-sm">
             <QItem>
                 <QItemSection>
                     <VnInput
@@ -258,19 +257,11 @@ const decrement = (paramsObj, key) => {
                     </QInput>
                 </QItemSection>
             </QItem>
-            </QList>
         </template>
     </VnFilterPanel>
 </template>
 
 <style scoped>
-.list {
-    width: 256px;
-}
-.list * {
-    max-width: 100%;
-}
-
 .input-number >>> input[type='number'] {
     -moz-appearance: textfield;
 }

src/pages/Worker/WorkerFilter.vue

@@ -27,7 +27,6 @@ const departments = ref();
             </div>
         </template>
         <template #body="{ params, searchFn }">
-            <QList dense class="q-gutter-y-sm q-mt-sm">
             <QItem>
                 <QItemSection>
                     <VnInput :label="t('FI')" v-model="params.fi" is-outlined
@@ -94,7 +93,6 @@ const departments = ref();
                     />
                 </QItemSection>
             </QItem>
-            </QList>
         </template>
     </VnFilterPanel>
 </template>