@bildvitta/quasar-ui-asteroid 3.0.0-beta.2 → 3.0.0-beta.20

package/src/components/delete/QasDelete.vue

@@ -106,7 +106,13 @@ export default {
       try {
         const { destroyRoutes, history } = useHistory()
 
-        await this.$store.dispatch(`${this.entity}/destroy`, { id: this.id, url: this.url })
+        const payload = { id: this.id, url: this.url }
+
+        this.$qas.logger.group(
+          `QasDelete - destroy -> Payload do parâmetro do ${this.entity}/destroy`, [payload]
+        )
+
+        await this.$store.dispatch(`${this.entity}/destroy`, payload)
 
         NotifySuccess('Item deletado com sucesso!')
 
@@ -120,9 +126,17 @@ export default {
         this.createDeleteSuccessEvent()
 
         this.$emit('success')
+
+        this.$qas.logger.info('QasDelete - destroy -> item deletado com sucesso!')
       } catch (error) {
         NotifyError('Ops! Não foi possível deletar o item.')
         this.$emit('error', error)
+
+        this.$qas.logger.group(
+          `QasDelete - destroy -> exceção da action ${this.entity}/destroy`,
+          [error],
+          { error: true }
+        )
       } finally {
         Loading.hide()
         this.$emit('update:deleting', false)

package/src/components/delete/QasDelete.yml

@@ -4,23 +4,25 @@ meta:
   desc: Componente para C.R.U.D. responsável por deletar (Delete).
 
 props:
-  entity:
-    desc: Entidade da store, por exemplo se tiver que trabalhar com modulo de usuários, teremos o model "users" na store, que vai ser nossa "entity".
-    required: true
-    type: String
-
   custom-id:
     desc: Por padrão, o componente vai pegar o "id" que vem como parâmetro na url, caso queira que o id seja diferente da url, use esta prop.
     type: String
     examples: ['my-custom-id']
 
+  deleting:
+    desc: Model para saber se está deletando.
+    type: Boolean
+    examples: [v-model:deleting="isDeleting"]
+    model: true
+
   dialog-props:
     desc: Props para ser repassada para o componente "QasDialog"
     default: {}
     type: Object
 
-  url:
-    desc: Envia como parâmetro para a action "fetchSingle" do modulo correspondente a "entity".
+  entity:
+    desc: Entidade da store, por exemplo se tiver que trabalhar com modulo de usuários, teremos o model "users" na store, que vai ser nossa "entity".
+    required: true
     type: String
 
   tag:
@@ -29,11 +31,9 @@ props:
     type: String
     examples: [q-item]
 
-  deleting:
-    desc: Model para saber se está deletando.
-    type: Boolean
-    examples: [v-model:deleting="isDeleting"]
-    model: true
+  url:
+    desc: Envia como parâmetro para a action "fetchSingle" do modulo correspondente a "entity".
+    type: String
 
   use-auto-delete-route:
     desc: Controla se sempre que deletar com sucesso um item, remove todas as rotas do histórico de rotas que contenha id do item deletado.
@@ -45,12 +45,12 @@ slots:
     desc: 'Slot para acessar dentro do componente.'
 
 events:
-  '@success -> function()':
-    desc: Dispara quando o componente deleta com sucesso.
-
   '@error -> function(value)':
     desc: Dispara quando acontece algum erro na hora de deletar.
     params:
       value:
         desc: Erro retornado.
         type: Object
+
+  '@success -> function()':
+    desc: Dispara quando o componente deleta com sucesso.

package/src/components/dialog/QasDialog.vue

@@ -5,7 +5,7 @@
         <slot name="header">
           <div class="justify-between row">
             <div class="text-bold text-h6">{{ card.title }}</div>
-            <qas-btn v-if="useCloseIcon" v-close-popup dense flat icon="o_close" rounded />
+            <qas-btn v-if="useCloseButton" v-close-popup dense flat icon="o_close" rounded />
           </div>
         </slot>
       </q-card-section>
@@ -39,8 +39,6 @@
 import QasBtn from '../btn/QasBtn.vue'
 import QasActions from '../actions/QasActions.vue'
 
-import screenMixin from '../../mixins/screen'
-
 export default {
   name: 'QasDialog',
 
@@ -49,8 +47,6 @@ export default {
     QasActions
   },
 
-  mixins: [screenMixin],
-
   props: {
     actionsProps: {
       default: () => ({}),
@@ -104,7 +100,11 @@ export default {
       type: Boolean
     },
 
-    useCloseIcon: {
+    useCloseButton: {
+      type: Boolean
+    },
+
+    useValidationAllAtOnce: {
       type: Boolean
     }
   },
@@ -133,8 +133,8 @@ export default {
 
     style () {
       return {
-        maxWidth: this.maxWidth || (this.mx_isSmall ? '' : '600px'),
-        minWidth: this.minWidth || (this.mx_isSmall ? '' : '400px')
+        maxWidth: this.maxWidth || (this.$qas.screen.isSmall ? '' : '600px'),
+        minWidth: this.minWidth || (this.$qas.screen.isSmall ? '' : '400px')
       }
     },
 
@@ -152,7 +152,26 @@ export default {
 
   methods: {
     async submitHandler () {
-      this.useForm && this.$emit('validate', await this.$refs.form.validate())
+      if (!this.useForm) return
+
+      if (this.useValidationAllAtOnce) {
+        let isAllComponentValid = true
+        const components = this.$refs.form.getValidationComponents() || []
+
+        for (const component of components) {
+          const isValid = component?.validate?.()
+
+          if (!isValid) {
+            isAllComponentValid = false
+          }
+        }
+
+        this.$emit('validate', isAllComponentValid)
+
+        return
+      }
+
+      this.$emit('validate', await this.$refs.form.validate())
     },
 
     // método para funcionar como plugin

package/src/components/dialog/QasDialog.yml

@@ -15,16 +15,16 @@ props:
     type: [Object, Boolean]
     examples: ["{ label: 'Meu botão de cancelar', onClick: () => alert('fui clicado!') }"]
 
-  card:
-    desc: Objeto contendo as informações para serem exibidas dentro do dialog como "title" e "description".
+  card-props:
+    desc: Props repassadas para o componente "<q-card />".
     default: {}
     type: Object
-    examples: ["{ title: 'Meu título', description: 'Minha descrição' }"]
 
-  card-props:
-    desc: Props repassadas para o componente "<q-card />".
+  card:
+    desc: Objeto contendo as informações para serem exibidas dentro do dialog como "title" e "description".
     default: {}
     type: Object
+    examples: ["{ title: 'Meu título', description: 'Minha descrição' }"]
 
   max-width:
     desc: Tamanho máximo do dialog.
@@ -34,6 +34,12 @@ props:
     desc: Tamanho mínimo do dialog.
     type: String
 
+  model-value:
+    desc: Model do componente, abre ou fecha o dialog.
+    type: Boolean
+    examples: [v-model="value"]
+    model: true
+
   ok:
     desc: Props para o botão de confirmar (ok), pode ser objeto com as propriedades ou um boolean, caso for "false", remove o botão de confirmar.
     default: "{ label: 'Ok', outline: type: this.ok?.type || this.useForm ? 'submit' : 'button' }"
@@ -44,31 +50,29 @@ props:
   persistent:
     desc: Define se o dialog vai fechar ou não após clicar fora do dialog.
     default: true
-    type: Object
+    type: Boolean
 
-  use-form:
-    desc: Define se a tag onde fica a descrição no dialog vai ser um "<q-form />" ou "<div />".
+  use-close-button:
+    desc: Define se vai ter ou não Ícone de fechar o dialog.
     type: Boolean
 
-  model-value:
-    desc: Model do componente, abre ou fecha o dialog.
+  use-form:
+    desc: Define se a tag onde fica a descrição no dialog vai ser um "<q-form />" ou "<div />".
     type: Boolean
-    examples: [v-model="value"]
-    model: true
 
-  use-close-icon:
-    desc: Define se vai ter ou não Ícone de fechar o dialog.
+  use-validation-at-once:
+    desc: Valida todos os campos de uma única vez, ao invés de ser um por vez (que é o padrão).
     type: Boolean
 
 slots:
-  header:
-    desc: Slot para o título.
+  actions:
+    desc: Slot para ações (botões por exemplo).
 
   description:
     desc: Slot para descrição.
 
-  actions:
-    desc: Slot para ações (botões por exemplo).
+  header:
+    desc: Slot para o título.
 
 events:
   '@update:model-value -> function (value)':

package/src/components/dialog-router/QasDialogRouter.vue

@@ -2,7 +2,7 @@
   <q-dialog ref="dialog" persistent @hide="onDialogHide">
     <q-card class="full-width" style="max-width: 80vw;">
       <q-card-section>
-        <component :is="component" v-if="component" dialog :route="route" @hide="hide" />
+        <component :is="component" v-if="component" :route="route" :use-boundary="false" @hide="hide" />
       </q-card-section>
     </q-card>
   </q-dialog>

package/src/components/field/QasField.vue

@@ -1,11 +1,9 @@
 <template>
-  <div>
-    <component :is="component.is" v-bind="component" :data-cy="field.name" :model-value="formattedValue" @update:model-value="updateModel">
-      <template v-for="(_, name) in $slots" #[name]="context">
-        <slot :name="name" v-bind="context || {}" />
-      </template>
-    </component>
-  </div>
+  <component :is="component.is" v-bind="component" :data-cy="field.name" :model-value="formattedValue" @update:model-value="updateModel">
+    <template v-for="(_, name) in $slots" #[name]="context">
+      <slot :name="name" v-bind="context || {}" />
+    </template>
+  </component>
 </template>
 
 <script>
@@ -36,6 +34,8 @@ export default {
     QasSignatureUploader
   },
 
+  inheritAttrs: false,
+
   props: {
     error: {
       default: '',
@@ -75,8 +75,9 @@ export default {
         type,
         mask,
         maxFiles,
-        searchable,
-        gmt
+        useIso,
+        useSearch,
+        useLazyLoading
       } = this.formattedField
 
       // Default error attributes for Quasar.
@@ -98,11 +99,11 @@ export default {
         minlength,
         suffix,
         prefix,
-        gmt
+        useIso
       }
 
       const numericInput = { is: 'qas-numeric-input', ...input }
-      const datetimeInput = { is: 'qas-date-time-input', gmt, ...input }
+      const datetimeInput = { is: 'qas-date-time-input', useIso, ...input }
 
       // It'll generate a list of acceptable files extensions.
       const accept = extensions && extensions.length ? extensions.map(extension => `.${extension}`).join(',') : ''
@@ -130,9 +131,9 @@ export default {
         money: { ...numericInput, mode: 'money' },
         percent: { ...numericInput, mode: 'percent' },
 
-        date: { ...datetimeInput, dateOnly: true },
+        date: { ...datetimeInput, useDateOnly: true },
         datetime: { ...datetimeInput },
-        time: { ...datetimeInput, timeOnly: true },
+        time: { ...datetimeInput, useTimeOnly: true },
 
         boolean: { is: 'q-toggle', label, ...error },
         checkbox: { is: 'qas-checkbox-group', label, options, ...error },
@@ -143,7 +144,7 @@ export default {
 
         'signature-uploader': { is: 'qas-signature-uploader', entity, uploadLabel: label, ...error },
 
-        select: { is: 'qas-select', multiple, options, searchable, ...input }
+        select: { is: 'qas-select', entity, name, multiple, options, useSearch, useLazyLoading, ...input }
       }
 
       return { ...(profiles[type] || profiles.default), ...this.$attrs }

package/src/components/filters/QasFilters.vue

@@ -4,19 +4,19 @@
       <div v-if="showSearch" class="col">
         <slot :filter="filter" name="search">
           <q-form v-if="useSearch" @submit.prevent="filter()">
-            <q-input v-model="search" :debounce="debounce" dense :placeholder="searchPlaceholder" type="search">
+            <qas-input v-model="search" :debounce="debounce" dense hide-bottom-space :outlined="false" :placeholder="searchPlaceholder" type="search">
               <template #append>
-                <q-btn v-if="hasSearch" icon="o_clear" unelevated @click="clearSearch" />
-                <q-btn v-if="!debounce" icon="o_search" type="submit" unelevated @click="filter()" />
+                <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()" />
               </template>
-            </q-input>
+            </qas-input>
           </q-form>
         </slot>
       </div>
 
       <slot v-if="showFilterButton" :filter="filter" name="filter-button">
-        <q-btn v-if="useFilterButton" :color="filterButtonColor" flat icon="o_filter_list" :label="filterButtonLabel">
-          <q-menu>
+        <qas-btn v-if="useFilterButton" :color="filterButtonColor" 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>
@@ -31,17 +31,17 @@
               </div>
 
               <div class="text-right">
-                <q-btn class="q-mr-sm" label="Limpar" size="12px" unelevated @click="clearFilters" />
-                <q-btn color="primary" label="Filtrar" size="12px" type="submit" unelevated />
+                <qas-btn class="q-mr-sm" flat label="Limpar" :no-caps="false" size="12px" unelevated @click="clearFilters" />
+                <qas-btn color="primary" label="Filtrar" :no-caps="false" size="12px" type="submit" unelevated />
               </div>
             </q-form>
           </q-menu>
-        </q-btn>
+        </qas-btn>
       </slot>
     </div>
 
     <div v-if="useChip && hasActiveFilters" class="q-mt-md">
-      <q-chip v-for="(filterItem, key) in activeFilters" :key="key" color="grey-4" dense removable size="md" text-color="grey-8" @remove="removeFilter(filterItem)">{{ filterItem.label }} = "{{ getChipValue(filterItem.value) }}"</q-chip>
+      <q-chip v-for="(filterItem, key) in activeFilters" :key="key" color="primary" dense removable size="md" text-color="white" @remove="removeFilter(filterItem)">{{ filterItem.label }} = "{{ getChipValue(filterItem.value) }}"</q-chip>
     </div>
 
     <slot :context="mx_context" :filter="filter" :filters="activeFilters" :remove-filter="removeFilter" />
@@ -50,6 +50,7 @@
 
 <script>
 import QasField from '../field/QasField.vue'
+import QasBtn from '../btn/QasBtn.vue'
 
 import { camelize, camelizeKeys } from 'humps'
 import { humanize, parseValue } from '../../helpers/filters.js'
@@ -59,6 +60,7 @@ export default {
   name: 'QasFilters',
 
   components: {
+    QasBtn,
     QasField
   },
 
@@ -100,7 +102,7 @@ export default {
       type: String
     },
 
-    forceRefetch: {
+    useForceRefetch: {
       type: Boolean
     }
   },
@@ -150,7 +152,7 @@ export default {
     },
 
     filterButtonColor () {
-      return this.hasActiveFilters ? 'primary' : 'grey-8'
+      return this.hasActiveFilters ? 'primary' : 'grey-9'
     },
 
     filterButtonLabel () {
@@ -231,7 +233,7 @@ export default {
     },
 
     async fetchFilters () {
-      if (!this.forceRefetch && (this.hasFields || !this.useFilterButton)) {
+      if (!this.useForceRefetch && (this.hasFields || !this.useFilterButton)) {
         return null
       }
 
@@ -239,11 +241,26 @@ export default {
       this.isFetching = true
 
       try {
+        this.$qas.logger.group(
+          `QasFilters - fetchFilters -> Payload do parâmetro do ${this.entity}/fetchFilters`,
+          [{ url: this.url }]
+        )
+
         const response = await this.$store.dispatch(`${this.entity}/fetchFilters`, { url: this.url })
         this.$emit('fetch-success', response)
+
+        this.$qas.logger.group(
+          `QasFilters - fetchFilters -> resposta da action ${this.entity}/fetchFilters`, [response]
+        )
       } catch (error) {
         this.hasFetchError = true
         this.$emit('fetch-error', error)
+
+        this.$qas.logger.group(
+          `QasFilters - fetchFilters -> exceção da action ${this.entity}/fetchFilters`,
+          [error],
+          { error: true }
+        )
       } finally {
         this.isFetching = false
       }

package/src/components/filters/QasFilters.yml

@@ -9,6 +9,15 @@ props:
     required: true
     type: String
 
+  search-placeholder:
+    desc: Placeholder do campo de busca.
+    default: Pesquisar...
+    type: String
+
+  url:
+    desc: Envia como parâmetro para a action "fetchFilters" do modulo correspondente a "entity".
+    type: String
+
   use-badges:
     desc: Habilita ou não os "chips" mostrando os filtros ativos.
     default: true
@@ -19,9 +28,8 @@ props:
     default: true
     type: Boolean
 
-  use-search:
-    desc: Habilita ou não o campo text de busca.
-    default: true
+  use-force-refetch:
+    desc: Força refazer o "fetch" mesmo caso já exista dados na store de filters.
     type: Boolean
 
   use-search-on-type:
@@ -29,17 +37,9 @@ props:
     default: true
     type: Boolean
 
-  search-placeholder:
-    desc: Placeholder do campo de busca.
-    default: Pesquisar...
-    type: String
-
-  url:
-    desc: Envia como parâmetro para a action "fetchFilters" do modulo correspondente a "entity".
-    type: String
-
-  force-refetch:
-    desc: Força refazer o "fetch" mesmo caso já exista dados na store de filters.
+  use-search:
+    desc: Habilita ou não o campo text de busca.
+    default: true
     type: Boolean
 
 slots:

package/src/components/form-generator/QasFormGenerator.vue

@@ -1,17 +1,25 @@
 <template>
-  <div>
-    <div :class="mx_classes">
-      <div v-for="(field, key) in groupedFields.visible" :key="key" :class="mx_getFieldClass(key)">
-        <slot :field="field" :name="`field-${field.name}`">
-          <qas-field v-bind="fieldsProps[field.name]" :error="errors[key]" :field="field" :model-value="modelValue[field.name]" @update:model-value="updateModelValue(field.name, $event)" />
-        </slot>
-      </div>
-    </div>
-
-    <div v-for="(field, key) in groupedFields.hidden" :key="key">
-      <slot :field="field" :name="`field-${field.name}`">
-        <qas-field v-bind="fieldsProps[field.name]" :field="field" :model-value="modelValue[field.name]" @update:model-value="updateModelValue(field.name, $event)" />
+  <div :class="fieldsetClasses">
+    <div v-for="(fieldsetItem, fieldsetItemKey) in normalizedFields" :key="fieldsetItemKey" class="full-width">
+      <slot v-if="fieldsetItem.label" :name="`legend-${fieldsetItemKey}`">
+        <qas-label :label="fieldsetItem.label" />
       </slot>
+
+      <div>
+        <div :class="mx_classes">
+          <div v-for="(field, key) in fieldsetItem.fields.visible" :key="key" :class="mx_getFieldClass(key)">
+            <slot :field="field" :name="`field-${field.name}`">
+              <qas-field v-bind="fieldsProps[field.name]" :error="errors[key]" :field="field" :model-value="modelValue[field.name]" @update:model-value="updateModelValue(field.name, $event)" />
+            </slot>
+          </div>
+        </div>
+
+        <div v-for="(field, key) in fieldsetItem.fields.hidden" :key="key">
+          <slot :field="field" :name="`field-${field.name}`">
+            <qas-field v-bind="fieldsProps[field.name]" :field="field" :model-value="modelValue[field.name]" @update:model-value="updateModelValue(field.name, $event)" />
+          </slot>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -49,6 +57,19 @@ export default {
       default: () => ({}),
       required: true,
       type: Object
+    },
+
+    fieldset: {
+      default: () => ({}),
+      type: Object
+    },
+
+    fieldsetGutter: {
+      default: 'lg',
+      type: [String, Boolean],
+      validator: value => {
+        return typeof value === 'boolean' || ['xs', 'sm', 'md', 'lg', 'xl'].includes(value)
+      }
     }
   },
 
@@ -58,6 +79,8 @@ export default {
     groupedFields () {
       const fields = { hidden: {}, visible: {} }
 
+      if (this.hasFieldset) return fields
+
       for (const key in this.fields) {
         const field = this.fields[key]
         fields[field.type === 'hidden' ? 'hidden' : 'visible'][key] = field
@@ -74,6 +97,58 @@ export default {
       }
 
       return fields
+    },
+
+    normalizedFields () {
+      if (!this.hasFieldset) {
+        return {
+          default: {
+            fields: this.groupedFields
+          }
+        }
+      }
+
+      const fields = {}
+
+      for (const fieldsetKey in this.fieldset) {
+        const fieldsetItem = this.fieldset[fieldsetKey]
+
+        fields[fieldsetKey] = {
+          label: fieldsetItem.label,
+          fields: { hidden: {}, visible: {} }
+        }
+
+        for (const fieldName of fieldsetItem.fields) {
+          const field = this.fields[fieldName]
+
+          if (!field) continue
+
+          Object.assign(
+            fields[fieldsetKey].fields[
+              field.type === 'hidden' ? 'hidden' : 'visible'
+            ],
+            {
+              [fieldName]: field
+            }
+          )
+        }
+      }
+
+      return fields
+    },
+
+    hasFieldset () {
+      return !!Object.keys(this.fieldset).length
+    },
+
+    fieldsetClasses () {
+      const classes = ['row']
+
+      if (this.fieldsetGutter) {
+        classes.push(`q-col-gutter-y-${this.fieldsetGutter}`)
+      }
+
+      return classes
     }
   },