@bildvitta/quasar-ui-asteroid 3.0.0-beta.9 → 3.0.0

package/src/components/date-time-input/QasDateTimeInput.vue

@@ -1,21 +1,19 @@
 <template>
-  <div>
-    <qas-input ref="input" v-bind="attributes" v-model="currentValue" :unmasked-value="false" @update:model-value="updateModelValue">
-      <template #append>
-        <q-icon v-if="!timeOnly" class="cursor-pointer" name="o_event">
-          <q-popup-proxy ref="dateProxy" transition-hide="scale" transition-show="scale">
-            <q-date v-model="currentValue" v-bind="dateProps" :mask="maskDate" @update:model-value="updateModelValue" />
-          </q-popup-proxy>
-        </q-icon>
-
-        <q-icon v-if="!dateOnly" class="cursor-pointer q-ml-md" name="o_access_time">
-          <q-popup-proxy ref="timeProxy" transition-hide="scale" transition-show="scale">
-            <q-time v-model="currentValue" v-bind="timeProps" format24h :mask="maskDate" @update:model-value="updateModelValue" />
-          </q-popup-proxy>
-        </q-icon>
-      </template>
-    </qas-input>
-  </div>
+  <qas-input ref="input" v-bind="attributes" v-model="currentValue" :unmasked-value="false" @update:model-value="updateModelValue">
+    <template #append>
+      <q-icon v-if="!useTimeOnly" class="cursor-pointer" name="o_event">
+        <q-popup-proxy ref="dateProxy" transition-hide="scale" transition-show="scale">
+          <q-date v-model="currentValue" v-bind="dateProps" :mask="maskDate" @update:model-value="updateModelValue" />
+        </q-popup-proxy>
+      </q-icon>
+
+      <q-icon v-if="!useDateOnly" class="cursor-pointer q-ml-md" name="o_access_time">
+        <q-popup-proxy ref="timeProxy" transition-hide="scale" transition-show="scale">
+          <q-time v-model="currentValue" v-bind="timeProps" format24h :mask="maskDate" @update:model-value="updateModelValue" />
+        </q-popup-proxy>
+      </q-icon>
+    </template>
+  </qas-input>
 </template>
 
 <script>
@@ -33,33 +31,33 @@ export default {
       type: String
     },
 
-    dateOnly: {
-      type: Boolean
-    },
-
     dateProps: {
       default: () => ({}),
       type: Object
     },
 
-    gmt: {
-      type: Boolean
-    },
-
     timeMask: {
       default: 'HH:mm',
       type: String
     },
 
-    timeOnly: {
-      type: Boolean
-    },
-
     timeProps: {
       default: () => ({}),
       type: Object
     },
 
+    useIso: {
+      type: Boolean
+    },
+
+    useTimeOnly: {
+      type: Boolean
+    },
+
+    useDateOnly: {
+      type: Boolean
+    },
+
     modelValue: {
       default: '',
       type: String
@@ -96,16 +94,16 @@ export default {
     maskDate () {
       const mask = []
 
-      if (!this.timeOnly) { mask.push(this.dateMask) }
-      if (!this.dateOnly) { mask.push(this.timeMask) }
+      if (!this.useTimeOnly) { mask.push(this.dateMask) }
+      if (!this.useDateOnly) { mask.push(this.timeMask) }
 
       return mask.join(' ')
     }
   },
 
   watch: {
-    value (current, original) {
-      if (!current || this.timeOnly) {
+    modelValue (current, original) {
+      if (!current || this.useTimeOnly) {
         this.currentValue = current
         return
       }
@@ -131,18 +129,18 @@ export default {
 
     updateModelValue (value) {
       this.currentValue = value
-      const valueLength = value.replace(/_/g, '').length
+      const valueLength = value?.replace?.(/_/g, '')?.length
 
       if (value === '' || valueLength === this.mask.length) {
-        this.lastValue = this.timeOnly ? value : this.toISOString(value)
+        this.lastValue = this.useTimeOnly ? value : this.toISOString(value)
         this.$emit('update:modelValue', this.lastValue)
       }
 
-      if (this.dateOnly) {
+      if (this.useDateOnly) {
         this.$refs.dateProxy.hide()
       }
 
-      if (this.timeOnly) {
+      if (this.useTimeOnly) {
         this.$refs.timeProxy.hide()
       }
     },
@@ -152,11 +150,11 @@ export default {
         return ''
       }
 
-      if (this.dateOnly && !this.gmt) {
+      if (this.useDateOnly && !this.useIso) {
         return dateFn(date.extractDate(value, this.maskDate), 'yyyy-MM-dd')
       }
 
-      if (this.timeOnly && !this.gmt) {
+      if (this.useTimeOnly && !this.useIso) {
         return date.extractDate(value, 'HH:MM')
       }
 
@@ -164,14 +162,14 @@ export default {
     },
 
     toMask (value) {
-      if (!value || this.timeOnly) {
+      if (!value || this.useTimeOnly) {
         return value || ''
       }
 
       const newDate = new Date(value).toISOString()
 
       return date.formatDate(
-        this.dateOnly ? newDate.slice(0, 23) : newDate,
+        this.useDateOnly ? newDate.slice(0, 23) : newDate,
         this.maskDate
       )
     }

package/src/components/date-time-input/QasDateTimeInput.yml

@@ -12,19 +12,11 @@ props:
     default: DD/MM/YYYY
     type: String
 
-  date-only:
-    desc: Habilita o componente para usar somente data.
-    type: Boolean
-
   date-props:
     desc: Propriedades do QDate (https://quasar.dev/vue-components/date#introduction).
     default: {}
     type: Object
 
-  gmt:
-    desc: Utilizado para se usar junto da prop "date-only" ou "time-only", caso "gmt" for "true", o model sempre vai ser retornado no padrão ISO 8601, independente ser apenas um campo somente de data ou hora.
-    type: Boolean
-
   model-value:
     desc: Model do componente, usado para v-model.
     default: ''
@@ -36,15 +28,22 @@ props:
     default: HH:mm
     type: String
 
-  time-only:
-    desc: Habilita o componente para usar somente hora.
-    type: Boolean
-
   time-props:
     desc: Propriedades do QTime (https://quasar.dev/vue-components/time#introduction).
     default: {}
     type: Object
 
+  use-time-only:
+    desc: Habilita o componente para usar somente hora.
+    type: Boolean
+
+  use-date-only:
+    desc: Habilita o componente para usar somente data.
+    type: Boolean
+
+  use-iso:
+    desc: Utilizado para se usar junto da prop "date-only" ou "time-only", caso "useIso" for "true", o model sempre vai ser retornado no padrão ISO 8601, independente ser apenas um campo somente de data ou hora.
+    type: Boolean
 
 events:
   '@update:model-value -> function (value)':

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/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>
@@ -100,7 +100,11 @@ export default {
       type: Boolean
     },
 
-    useCloseIcon: {
+    useCloseButton: {
+      type: Boolean
+    },
+
+    useValidationAllAtOnce: {
       type: Boolean
     }
   },
@@ -148,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

@@ -50,9 +50,9 @@ 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-close-icon:
+  use-close-button:
     desc: Define se vai ter ou não Ícone de fechar o dialog.
     type: Boolean
 
@@ -60,8 +60,11 @@ props:
     desc: Define se a tag onde fica a descrição no dialog vai ser um "<q-form />" ou "<div />".
     type: Boolean
 
-slots:
+  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:
   actions:
     desc: Slot para ações (botões por exemplo).
 

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,18 +4,18 @@
       <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">
+        <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" />
@@ -31,12 +31,12 @@
               </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>
 
@@ -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
     }
   },
@@ -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,10 +9,6 @@ props:
     required: true
     type: String
 
-  force-refetch:
-    desc: Força refazer o "fetch" mesmo caso já exista dados na store de filters.
-    type: Boolean
-
   search-placeholder:
     desc: Placeholder do campo de busca.
     default: Pesquisar...
@@ -32,6 +28,10 @@ props:
     default: true
     type: Boolean
 
+  use-force-refetch:
+    desc: Força refazer o "fetch" mesmo caso já exista dados na store de filters.
+    type: Boolean
+
   use-search-on-type:
     desc: Habilita ou não o filtro de busca sempre que o usuário digita.
     default: true

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
     }
   },
 

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

@@ -27,11 +27,23 @@ props:
     type: Object
     examples: ["{ email: { name: 'email', type: 'email', label: 'E-mail' } }"]
 
+  fieldset:
+    desc: Lista para agrupar elementos por rótulo (label).
+    default: {}
+    type: Object
+    examples: ["{ personalInformation: { label: 'Informações pessoais', fields: [name, email] } }"]
+
+  fieldset-gutter:
+    desc: Espaçamento entre rótulos (label).
+    default: lg
+    type: [String, Boolean]
+    examples: [xs, sm, md, lg, xl, false]
+
   gutter:
     desc: Espaçamento entre colunas.
     default: md
-    type: String
-    examples: [xs, sm, md, lg, xl]
+    type: [String, Boolean]
+    examples: [xs, sm, md, lg, xl, false]
 
   model-value:
     desc: Model do componente, usado para o v-model.
@@ -54,6 +66,8 @@ slots:
         desc: Payload do campo atual.
         default: {}
         type: Object
+'legend-[nome-da-chave]':
+    desc: Acessa o slot de um rótulo (label).
 
 events:
   '@update:model-value -> function(value)':