feat: :sparkles: Estilizacao default table

quasar.config.js

@@ -14,7 +14,7 @@ export default configure((ctx) => {
     // app boot file (/src/boot)
     // --> boot files are part of "main.js"
     // https://v2.quasar.dev/quasar-cli-vite/boot-files
-    boot: [ "axios", "setPermissions"],
+    boot: [ "axios", "setPermissions", "defaultPropsComponents"],
 
     // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#css
     css: ["app.scss"],

src/boot/defaultPropsComponents.js

@@ -0,0 +1,22 @@
+import { QBtn } from "quasar";
+import { boot } from "quasar/wrappers";
+
+/**
+ * Set some default properties on a component
+ */
+const SetComponentDefaults = (component, defaults) => {
+  Object.keys(defaults).forEach((prop) => {
+    component.props[prop] =
+      Array.isArray(component.props[prop]) === true ||
+      typeof component.props[prop] === "function"
+        ? { type: component.props[prop], default: defaults[prop] }
+        : { ...component.props[prop], default: defaults[prop] };
+  });
+};
+
+export default boot(() => {
+  SetComponentDefaults(QBtn, {
+    color: "primary",
+    padding: "8px 16px",
+  });
+});

src/components/geral/DefaultHeaderPage.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="q-ml-md">
-    <q-breadcrumbs class="q-mb-md text-primary">
+    <q-breadcrumbs class="q-mb-md">
       <q-breadcrumbs-el
         v-for="breadcrumb in $route.meta?.breadcrumbs"
         :key="breadcrumb?.name"

src/components/geral/DefaultTable.vue

@@ -18,12 +18,14 @@
         v-if="mostrarCampoPesquisa"
         v-model="filter"
         outlined
-        dense
         debounce="500"
-        placeholder="Pesquisar"
+        placeholder="Buscar"
         style="min-width: 400px"
         clearable
+        dense
         autofocus
+        class="q-input-border"
+        bg-color="white"
       >
         <template #append>
           <q-icon name="mdi-magnify" />
@@ -65,6 +67,15 @@
         <q-icon name="mdi-fullscreen" />
       </q-btn>
 
+      <q-btn
+        outline
+        class="default-button-padding q-ml-md bg-white"
+        icon="mdi-filter-outline"
+        style="height: 40px; width: 40px"
+        @click="showFilters = !showFilters"
+      >
+      </q-btn>
+
       <q-space />
 
       <q-btn-dropdown
@@ -76,14 +87,14 @@
 
       <q-btn
         v-if="props.addItem"
-        class="button-secondary"
-        color="primary"
-        padding="12px 16px"
         :outline="props.outlineAdd"
+        class="default-button-padding"
         label="Adicionar"
         @click="onAddItem"
       >
       </q-btn>
+
+
     </template>
 
     <template #body-cell-status="{ value, row }">
@@ -111,9 +122,7 @@
             <div v-if="row.ativo && !value" class="ativo body2 text-positive">
               Ativo
             </div>
-            <div v-if="!row.ativo" class="inativo body2 text-accent">
-              Ativo
-            </div>
+            <div v-if="!row.ativo" class="inativo body2 text-accent">Ativo</div>
           </span>
         </q-item-section>
       </q-td>
@@ -122,9 +131,7 @@
     <template v-if="!props.hideNoDataLabel" #no-data>
       <div class="q-my-md row justify-center full-width">
         <q-spinner v-if="loading" color="primary" size="30px" />
-        <div v-else class="q-pa-md body2">
-          Nenhum registro encontrado
-        </div>
+        <div v-else class="q-pa-md body2">Nenhum registro encontrado</div>
       </div>
     </template>
 

src/css/app.scss

@@ -154,7 +154,6 @@ body,
 }
 
 .default-button-padding {
-  padding: 12px 16px 12px 16px !important;
   border-radius: 4px;
 }
 

src/css/table.scss

@@ -46,7 +46,7 @@
   }
 
   .q-table__top {
-    padding-top: 16px;
+    padding-top: 8px;
     padding-left: 0px;
     padding-right: 0px;
     padding-bottom: 16px;