@freteclick/quasar-financial-ui 1.0.114 → 1.0.115

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@freteclick/quasar-financial-ui",
-  "version": "1.0.114",
+  "version": "1.0.115",
   "author": "FreteClick",
   "description": "FreteClick financial Quasar UI Component",
   "license": "MIT",

package/src/components/common/Filters.vue

@@ -1,9 +1,9 @@
 <template>
   <q-card
     class="row q-pa-md invoice-filters"
-    :class="{ 'invoice-filters--drawer': variant === 'receivables-drawer' }"
+    :class="{ 'invoice-filters--inline': variant === 'filter-box' }"
   >
-    <div v-if="variant !== 'receivables-drawer'" class="col-xs-12 q-pb-md text-h6">
+    <div v-if="variant !== 'filter-box'" class="col-xs-12 q-pb-md text-h6">
       Faturas
     </div>
 
@@ -12,9 +12,11 @@
         v-model="filters.text"
         stack-label
         label="Buscar por"
-        debounce="1000"
-        :outlined="variant === 'receivables-drawer'"
-        :dense="variant === 'receivables-drawer'"
+        :debounce="variant === 'filter-box' ? 0 : 1000"
+        @blur="onTextBlur"
+        :outlined="variant === 'filter-box'"
+        :dense="variant === 'filter-box'"
+        clearable
         class="full-width"
       />
     </div>
@@ -24,8 +26,8 @@
         :options="statuses"
         stack-label
         label="Status da fatura"
-        :outlined="variant === 'receivables-drawer'"
-        :dense="variant === 'receivables-drawer'"
+        :outlined="variant === 'filter-box'"
+        :dense="variant === 'filter-box'"
         :loading="loadingStatuses"
         class="full-width"
       >
@@ -42,8 +44,8 @@
         :options="categories"
         stack-label
         label="Categoria"
-        :outlined="variant === 'receivables-drawer'"
-        :dense="variant === 'receivables-drawer'"
+        :outlined="variant === 'filter-box'"
+        :dense="variant === 'filter-box'"
         :loading="loadingCategories"
         class="full-width"
       >
@@ -60,8 +62,8 @@
         :options="orderType"
         stack-label
         label="Tipo de Fatura"
-        :outlined="variant === 'receivables-drawer'"
-        :dense="variant === 'receivables-drawer'"
+        :outlined="variant === 'filter-box'"
+        :dense="variant === 'filter-box'"
         :loading="loadingOrderType"
         class="full-width"
       >
@@ -74,6 +76,7 @@
     </div>
     <div class="col-6 q-pa-md invoice-filters__field invoice-filters__date">
       <DataFilter :fromDate="filters.date.from" :toDate="filters.date.to" :showButton="false"
+        :emitOnBlur="variant === 'filter-box'"
         @dateChanged="dateChanged" />
     </div>
   </q-card>
@@ -146,7 +149,7 @@ export default {
 
   watch: {
     "filters.text"() {
-      this.$emit("onRequest");
+      if (this.variant !== "filter-box") this.$emit("onRequest");
     },
     "filters.orderType"() {
       this.$emit("onRequest");
@@ -168,6 +171,10 @@ export default {
       getCategories: "categories/getCategories",
     }),
 
+    onTextBlur() {
+      if (this.variant === "filter-box") this.$emit("onRequest");
+    },
+
     requestCategories(company) {
       if (!company || !company.id) {
         this.categories = [{ label: "Todas", value: null }];
@@ -238,53 +245,63 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.invoice-filters--drawer {
+.invoice-filters--inline {
   display: flex;
-  flex-flow: column nowrap;
-  align-items: stretch;
-  gap: 14px;
-  width: 100%;
-  padding: 0;
+  width: max-content;
+  min-width: 100%;
+  max-width: none;
+  flex-flow: row nowrap;
+  align-items: flex-end;
+  justify-content: flex-start;
+  gap: 12px;
+  padding: 0 !important;
   border: 0;
   border-radius: 0;
   background: transparent;
   box-shadow: none;
 }
 
-.invoice-filters--drawer > .invoice-filters__field {
-  flex: 0 0 auto;
-  width: 100%;
-  min-width: 0;
+.invoice-filters--inline > .invoice-filters__field {
+  flex: 1 0 190px;
+  width: 190px;
+  min-width: 190px;
   max-width: none;
   margin: 0;
   padding: 0 !important;
 }
 
-.invoice-filters--drawer :deep(.q-field) {
+.invoice-filters--inline > .invoice-filters__date {
+  flex: 2 0 360px;
+  width: 360px;
+  min-width: 360px;
+}
+
+.invoice-filters--inline :deep(.q-field) {
   width: 100%;
   min-width: 0;
 }
 
-.invoice-filters--drawer :deep(.q-field__control),
-.invoice-filters--drawer :deep(.q-field__control:before),
-.invoice-filters--drawer :deep(.q-field__control:after) {
+.invoice-filters--inline :deep(.q-field__control),
+.invoice-filters--inline :deep(.q-field__control:before),
+.invoice-filters--inline :deep(.q-field__control:after) {
   min-height: 42px;
   border-radius: 10px;
 }
 
-.invoice-filters--drawer :deep(.container-filter) {
-  flex-direction: column;
-  align-items: stretch;
+.invoice-filters--inline :deep(.container-filter) {
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
   justify-content: flex-start;
   gap: 10px;
   padding: 0;
 }
 
-.invoice-filters--drawer :deep(.date-filter__field) {
-  flex: 0 0 auto;
+.invoice-filters--inline :deep(.date-filter__field) {
+  flex: 1 1 0;
   width: 100%;
-  max-width: none;
-  min-width: 0;
+  max-width: none !important;
+  min-width: 150px;
   min-height: 0;
   margin: 0;
 }

package/src/components/invoice/pay/InvoiceSearching.vue

@@ -1,5 +1,14 @@
 <template>
   <div class="payable-invoices">
+    <FilterBox title="Filtros">
+      <Filters
+        :filters="filters"
+        variant="filter-box"
+        :show-category="true"
+        @onRequest="onFilterRequest"
+      />
+    </FilterBox>
+
     <section class="payable-invoices__panel">
       <header class="payable-invoices__heading">
         <div>
@@ -194,21 +203,6 @@
       </q-card>
     </q-dialog>
 
-    <FilterDrawer
-      v-model="filtersDrawerOpen"
-      eyebrow="CONTAS A PAGAR"
-      title="Refinar despesas"
-      description="Escolha os critérios para atualizar a listagem."
-      :show-apply="false"
-      @clear="clearFilters"
-    >
-      <Filters
-        :filters="filters"
-        variant="receivables-drawer"
-        :show-category="true"
-        @onRequest="onFilterRequest"
-      />
-    </FilterDrawer>
   </div>
 </template>
 
@@ -220,13 +214,13 @@ import {
 } from "@freteclick/quasar-common-ui/src/utils/formatter";
 import CreateExpense from "../expense/CreateExpense";
 import { date } from "quasar";
-import FilterDrawer from "@freteclick/quasar-common-ui/src/components/common/FilterDrawer.vue";
+import FilterBox from "@freteclick/quasar-common-ui/src/components/common/FilterBox.vue";
 import Filters from "../../common/Filters.vue";
 
 export default {
   components: {
     CreateExpense,
-    FilterDrawer,
+    FilterBox,
     Filters,
   },
 
@@ -336,8 +330,6 @@ export default {
           visible: false,
         },
       },
-      filtersDrawerOpen: false,
-      isClearingFilters: false,
       data: [],
       filters: {
         orderType: {
@@ -475,10 +467,6 @@ export default {
       return color ? { color } : {};
     },
 
-    openFiltersDrawer() {
-      this.filtersDrawerOpen = true;
-    },
-
     openExpenseDialog() {
       this.dialogs.expense.visible = true;
     },
@@ -489,24 +477,7 @@ export default {
       this.onRequest({ pagination: this.pagination });
     },
 
-    clearFilters() {
-      this.isClearingFilters = true;
-      this.filters.text = null;
-      this.filters.orderType = { label: "Todos", value: null };
-      this.filters.status = { label: "Todos", value: null };
-      this.filters.category = { label: "Todas", value: null };
-      this.filters.date = { from: "", to: "" };
-      this.pagination.page = 1;
-
-      this.$nextTick(() => {
-        this.isClearingFilters = false;
-        this.onRequest({ pagination: this.pagination });
-      });
-    },
-
     onFilterRequest() {
-      if (this.isClearingFilters) return;
-
       this.pagination.page = 1;
       this.onRequest({ pagination: this.pagination });
     },
@@ -569,8 +540,10 @@ export default {
 
 <style lang="scss" scoped>
 .payable-invoices {
+  display: grid;
   width: 100%;
   min-width: 0;
+  gap: 20px;
   color: #1b2d43;
 }
 

package/src/components/invoice/receive/InvoiceSearching.vue

@@ -4,19 +4,17 @@
       <PageHeader
         title="Contas a receber"
         description="Acompanhe faturas, vencimentos e valores da sua empresa."
+      />
+
+      <FilterBox
+        title="Filtros"
       >
-        <template #actions>
-          <q-btn
-            outline
-            no-caps
-            rounded
-            color="white"
-            icon="tune"
-            label="Filtros"
-            @click="filtersDrawerOpen = true"
-          />
-        </template>
-      </PageHeader>
+        <Filters
+          :filters="filters"
+          variant="filter-box"
+          @onRequest="onFilterRequest"
+        />
+      </FilterBox>
 
       <section class="receivables-table-panel">
         <div class="receivables-table-panel__heading">
@@ -206,20 +204,6 @@
       </q-card>
     </q-dialog>
 
-    <FilterDrawer
-      v-model="filtersDrawerOpen"
-      eyebrow="CONTAS A RECEBER"
-      title="Refinar recebíveis"
-      description="Escolha os critérios para atualizar a listagem."
-      :show-apply="false"
-      @clear="clearFilters"
-    >
-      <Filters
-        :filters="filters"
-        variant="receivables-drawer"
-        @onRequest="onFilterRequest"
-      />
-    </FilterDrawer>
   </div>
 </template>
 
@@ -232,7 +216,7 @@ import {
 
 import { date } from "quasar";
 import PageHeader from "@freteclick/quasar-common-ui/src/components/common/PageHeader.vue";
-import FilterDrawer from "@freteclick/quasar-common-ui/src/components/common/FilterDrawer.vue";
+import FilterBox from "@freteclick/quasar-common-ui/src/components/common/FilterBox.vue";
 import Filters from "../../common/Filters.vue";
 
 const SETTINGS = {
@@ -320,7 +304,7 @@ Object.freeze(SETTINGS);
 export default {
   components: {
     PageHeader,
-    FilterDrawer,
+    FilterBox,
     Filters,
   },
   props: {
@@ -379,7 +363,6 @@ export default {
           invoice: null,
         },
       },
-      filtersDrawerOpen: false,
       data: [],
       filters: {
         orderType: {
@@ -498,15 +481,6 @@ export default {
       return color ? { color } : {};
     },
 
-    clearFilters() {
-      this.filters.text = null;
-      this.filters.orderType = { label: "Todos", value: null };
-      this.filters.status = { label: "Todos", value: null };
-      this.filters.date = { from: "", to: "" };
-      this.pagination.page = 1;
-      this.onRequest({ pagination: this.pagination });
-    },
-
     onFilterRequest() {
       this.pagination.page = 1;
       this.onRequest({ pagination: this.pagination });

package/src/pages/Invoice/Pay/Index.vue

@@ -7,15 +7,6 @@
       >
         <template #actions>
           <template v-if="currentTab === 'expenses'">
-            <q-btn
-              outline
-              no-caps
-              rounded
-              color="white"
-              icon="tune"
-              label="Filtros"
-              @click="openInvoiceFilters"
-            />
             <q-btn
               unelevated
               no-caps
@@ -94,10 +85,6 @@ export default {
   },
 
   methods: {
-    openInvoiceFilters() {
-      this.$refs.invoiceSearch?.openFiltersDrawer();
-    },
-
     openExpenseDialog() {
       this.$refs.invoiceSearch?.openExpenseDialog();
     },