@bildvitta/quasar-ui-asteroid 3.5.0-beta.4 → 3.5.0-beta.6

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bildvitta/quasar-ui-asteroid",
   "description": "Asteroid",
-  "version": "3.5.0-beta.4",
+  "version": "3.5.0-beta.6",
   "author": "Bild & Vitta <systemteam@bild.com.br>",
   "license": "MIT",
   "main": "dist/asteroid.cjs.min.js",

package/src/components/field/QasField.vue

@@ -149,28 +149,38 @@ export default {
         select: { is: 'qas-select', entity, name, multiple, options, useLazyLoading, ...input }
       }
 
-      return { ...(profiles[type] || profiles.default), ...this.$attrs }
+      return {
+        ...(profiles[type] || profiles.default),
+        ...this.$attrs,
+        label: this.formattedLabel
+      }
     },
 
     errorMessage () {
       return Array.isArray(this.error) ? this.error.join(' ') : this.error
     },
 
+    formattedLabel () {
+      const nonRequiredFieldsLabel = ['boolean', 'checkbox', 'radio']
+
+      const label = this.$attrs.label || this.formattedField.label
+      const { required, type } = this.formattedField
+
+      if (required && label && !nonRequiredFieldsLabel.includes(type)) {
+        return `${label}*`
+      }
+
+      return label
+    },
+
     // This computed will change the key name when the server sends different key.
     formattedField () {
       const field = {}
-      const nonRequiredFieldsLabel = ['boolean', 'checkbox', 'radio']
 
       for (const key in this.field) {
         field[attributesProfile[key] || key] = this.field[key]
       }
 
-      const { label, required, type } = field
-
-      if (required && label && !nonRequiredFieldsLabel.includes(type)) {
-        field.label = `${label}*`
-      }
-
       return field
     },
 

package/src/components/filters/QasFilters.vue

@@ -1,47 +1,59 @@
 <template>
-  <section class="q-mb-lg">
-    <div v-if="showFilters" class="q-gutter-x-md row">
-      <div v-if="showSearch" class="col">
+  <section class="q-mb-xl qas-filters">
+    <div v-if="showFilters" class="q-col-gutter-x-md row">
+      <div v-if="showSearch" class="col-12 col-md-6">
         <slot :filter="filter" name="search">
           <q-form v-if="useSearch" @submit.prevent="filter()">
-            <qas-input v-model="search" data-cy="filters-search-input" :debounce="debounce" dense hide-bottom-space :outlined="false" :placeholder="searchPlaceholder" type="search">
+            <qas-input v-model="search" class="bg-white q-px-sm qas-filters__input rounded-borders-sm shadow-2" data-cy="filters-search-input" :debounce="debounce" dense hide-bottom-space input-class="ellipsis text-grey-8" :outlined="false" :placeholder="searchPlaceholder" type="search">
+              <template #prepend>
+                <q-icon v-if="useSearchOnType" color="grey-8" name="o_search" />
+                <qas-btn v-else color="grey-9" flat icon="o_search" padding="0" @click="filter()" />
+              </template>
+
               <template #append>
-                <qas-btn v-if="hasSearch" color="grey-9" flat icon="o_clear" unelevated @click="clearSearch" />
-                <qas-btn v-if="!debounce" color="grey-9" flat icon="o_search" type="submit" unelevated @click="filter()" />
+                <qas-btn v-if="hasSearch" class="q-mr-sm" color="grey-9" flat icon="o_clear" padding="0" size="sm" @click="clearSearch" />
+
+                <qas-btn v-if="useFilterButton" :color="filterButtonColor" data-cy="filters-btn" flat icon="o_tune" padding="0">
+                  <q-menu anchor="center right" class="full-width" max-width="270px" self="top right">
+                    <div v-if="isFetching" class="q-pa-xl text-center">
+                      <q-spinner color="grey" size="2em" />
+                    </div>
+
+                    <div v-else-if="hasFetchError" class="q-pa-xl text-center">
+                      <q-icon color="negative" name="o_warning" size="2em" />
+                    </div>
+
+                    <q-form v-else class="q-gutter-y-md q-pa-md" @submit.prevent="filter()">
+                      <div v-for="(field, index) in fields" :key="index">
+                        <qas-field v-model="filters[field.name]" :data-cy="`filters-${field.name}-field`" :field="field" v-bind="fieldsProps[field.name]" />
+                      </div>
+
+                      <div class="q-col-gutter-x-md q-mt-xl row">
+                        <div class="col-6">
+                          <qas-btn class="full-width" data-cy="filters-clear-btn" label="Limpar" outline size="12px" @click="clearFilters" />
+                        </div>
+
+                        <div class="col-6">
+                          <qas-btn class="full-width" color="primary" data-cy="filters-submit-btn" label="Filtrar" size="12px" type="submit" />
+                        </div>
+                      </div>
+                    </q-form>
+                  </q-menu>
+                </qas-btn>
               </template>
             </qas-input>
           </q-form>
         </slot>
       </div>
 
-      <slot v-if="showFilterButton" :filter="filter" name="filter-button">
-        <qas-btn v-if="useFilterButton" :color="filterButtonColor" data-cy="filters-btn" flat icon="o_filter_list" :label="filterButtonLabel">
-          <q-menu class="full-width" max-width="240px">
-            <div v-if="isFetching" class="q-pa-xl text-center">
-              <q-spinner color="grey" size="2em" />
-            </div>
-
-            <div v-else-if="hasFetchError" class="q-pa-xl text-center">
-              <q-icon color="negative" name="o_warning" size="2em" />
-            </div>
-
-            <q-form v-else class="q-gutter-y-md q-pa-md" @submit.prevent="filter()">
-              <div v-for="(field, index) in fields" :key="index">
-                <qas-field v-model="filters[field.name]" :data-cy="`filters-${field.name}-field`" dense :field="field" v-bind="fieldsProps[field.name]" />
-              </div>
-
-              <div class="text-right">
-                <qas-btn class="q-mr-sm" data-cy="filters-clear-btn" flat label="Limpar" :no-caps="false" size="12px" unelevated @click="clearFilters" />
-                <qas-btn color="primary" data-cy="filters-submit-btn" label="Filtrar" :no-caps="false" size="12px" type="submit" unelevated />
-              </div>
-            </q-form>
-          </q-menu>
-        </qas-btn>
-      </slot>
+      <div class="col-12 col-md-6">
+        <slot name="right-side" />
+      </div>
     </div>
 
-    <div v-if="useChip && hasActiveFilters" class="q-mt-md">
-      <q-chip v-for="(filterItem, key) in activeFilters" :key="key" color="primary" :data-cy="`filters-${filterItem.value}-chip`" dense removable size="md" text-color="white" @remove="removeFilter(filterItem)">{{ filterItem.label }} = "{{ getChipValue(filterItem.value) }}"</q-chip>
+    <div v-if="hasChip" class="q-mt-md">
+      <!-- TODO rever com novo estilo -->
+      <q-chip v-for="(filterItem, key) in activeFilters" :key="key" color="white" :data-cy="`filters-${filterItem.value}-chip`" dense icon-remove="o_close" removable size="md" text-color="grey-8" @remove="removeFilter(filterItem)">{{ getChipValue(filterItem.value) }}</q-chip>
     </div>
 
     <slot :context="mx_context" :filter="filter" :filters="activeFilters" :remove-filter="removeFilter" />
@@ -150,7 +162,7 @@ export default {
     },
 
     debounce () {
-      return this.useSearchOnType ? '500' : ''
+      return this.useSearchOnType ? '800' : ''
     },
 
     fields () {
@@ -161,6 +173,7 @@ export default {
       return this.hasActiveFilters ? 'primary' : 'grey-9'
     },
 
+    // TODO: remover
     filterButtonLabel () {
       return this.$q.screen.gt.xs ? 'Filtrar' : undefined
     },
@@ -187,6 +200,10 @@ export default {
 
     showSearch () {
       return !!this.$slots.search || this.useSearch
+    },
+
+    hasChip () {
+      return this.useChip && this.hasActiveFilters
     }
   },
 
@@ -330,3 +347,46 @@ export default {
   }
 }
 </script>
+
+<style lang="scss">
+// TODO rever
+.qas-filters {
+  .q-field::before {
+    border: 2px solid transparent;
+    border-radius: 4px;
+    bottom: 0;
+    content: '';
+    left: 0;
+    pointer-events: none;
+    position: absolute;
+    right: 0;
+    top: 0;
+    transition: border-color var(--qas-generic-transition);
+  }
+
+  .q-field--focused::before {
+    border-color: var(--q-primary);
+    color: var(--q-primary);
+  }
+
+  .q-field--dense .q-field__prepend {
+    padding-right: var(--qas-spacing-xs);
+  }
+
+  .q-field--dense .q-field__append {
+    padding-left: var(--qas-spacing-sm);
+  }
+
+  &__input {
+    .q-field__control::before,
+    .q-field__control::after {
+      display: none;
+    }
+
+    .q-field__native {
+      padding-bottom: var(--qas-spacing-sm);
+      padding-top: var(--qas-spacing-sm);
+    }
+  }
+}
+</style>

package/src/components/filters/QasFilters.yml

@@ -56,13 +56,6 @@ slots:
         desc: função usada para fazer o filtro
         type: Function
 
-  filter-button:
-    desc: Slot para seção do botão do menu lateral.
-    scope:
-      filter:
-        desc: função usada para fazer o filtro
-        type: Function
-
   default:
     desc: Slot para acessar o final do componente.
     scope:

package/src/components/form-view/QasFormView.vue

@@ -10,7 +10,7 @@
       <slot v-if="useActions" name="actions">
         <div class="justify-end q-col-gutter-md q-my-lg row">
           <div v-if="hasCancelButton" class="col-12 col-sm-2" :class="cancelButtonClass">
-            <qas-btn v-close-popup class="full-width" :data-cy="`btnCancel-${entity}`" :disable="isCancelButtonDisabled" :label="cancelButtonLabel" outline type="button" @click="cancel" />
+            <qas-btn v-close-popup class="full-width" :data-cy="`btnCancel-${entity}`" :disable="isSubmitting" :label="cancelButtonLabel" outline type="button" @click="cancel" />
           </div>
 
           <div v-if="useSubmitButton" class="col-12 col-sm-2" :class="submitButtonClass">
@@ -194,10 +194,6 @@ export default {
       return this.$qas.screen.isSmall && 'order-first'
     },
 
-    isCancelButtonDisabled () {
-      return this.disable || this.isSubmitting
-    },
-
     defaultNotifyMessages () {
       return {
         validationError: 'Existem campos no formulário que ainda não foram preenchidos. Complete todas as informações para avançar.',
@@ -428,6 +424,8 @@ export default {
         }
 
         this.mx_setErrors()
+        this.$emit('update:errors', this.mx_errors)
+
         NotifySuccess(response.data.status.text || this.defaultNotifyMessages.success)
         this.$emit('submit-success', response, this.modelValue)
 

package/src/components/page-header/QasPageHeader.vue

@@ -1,5 +1,5 @@
 <template>
-  <q-toolbar class="justify-between q-mb-lg q-px-none">
+  <q-toolbar class="justify-between q-mb-xl q-px-none">
     <div class="ellipsis">
       <q-toolbar-title v-if="title" class="text-bold text-h5">
         {{ title }}

package/src/components/select/QasSelect.yml

@@ -71,6 +71,11 @@ props:
     type: String
     examples: [value-key="uuid"]
 
+  use-search:
+    desc: Controla se vai ou não ter campo de busca no select.
+    default: undefined
+    type: Boolean
+
   use-lazy-loading:
     desc: Controla a busca pela store "fetchFieldOptions".
     default: false

package/src/index.scss

@@ -11,6 +11,7 @@ $accent: var(--q-accent);
 :root {
   --qas-background-color: #fbfbfb;
   --qas-generic-border-radius: 8px;
+  --qas-generic-transition: 300ms;
 }
 
 $background-color: var(--qas-background-color);