@bildvitta/quasar-ui-asteroid 3.17.0-beta.0 → 3.17.0-beta.10

package/package.json

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

package/src/components/actions/QasActions.vue

@@ -72,7 +72,7 @@ const classes = computed(() => {
 const columnClasses = computed(() => {
   if (props.useEqualWidth) return 'col-12 col-sm-6'
 
-  return props.useFullWidth ? 'col-12' : 'col-12 col-sm-auto'
+  return props.useFullWidth ? 'full-width' : 'col-12 col-sm-auto'
 })
 
 const hasPrimarySlot = computed(() => !!slots.primary)

package/src/components/btn-dropdown/QasBtnDropdown.vue

@@ -19,7 +19,7 @@
     </div>
 
     <div v-if="props.useSplit">
-      <qas-btn color="grey-10" :disable="disable" :icon="props.dropdownIcon" variant="tertiary">
+      <qas-btn v-bind="splittedButtonProps">
         <q-menu v-if="hasDefaultSlot" anchor="bottom right" auto-close self="top right">
           <div :class="classes.menuContent">
             <slot />
@@ -103,6 +103,19 @@ const hasButtons = computed(() => !screen.isSmall || !props.useSplit)
 const hasDefaultSlot = computed(() => !!slots.default)
 const hasMenuOnLeftSide = computed(() => hasDefaultSlot.value && !props.useSplit && isSingleButton.value)
 
+const splittedButtonProps = computed(() => {
+  const iconKey = screen.isSmall ? 'icon' : 'iconRight'
+
+  return {
+    color: 'grey-10',
+    disable: props.disable,
+    [iconKey]: props.dropdownIcon,
+    variant: 'tertiary',
+    label: 'Opções',
+    useLabelOnSmallScreen: false
+  }
+})
+
 watch(() => props.menu, value => {
   isMenuOpened.value = value
 }, { immediate: true })

package/src/components/chart-view/QasChartView.vue

@@ -1,23 +1,25 @@
 <template>
-  <qas-header v-if="hasHeader" v-bind="headerProps">
-    <template #right>
-      <qas-filters v-bind="chartFiltersProps" />
-    </template>
-  </qas-header>
-
-  <div v-bind="parentComponentProps">
-    <component :is="chartComponent.is" v-if="showChart" v-bind="chartComponent.props" />
-
-    <div v-else-if="!isFetching">
-      <slot name="empty-results">
-        <qas-empty-result-text />
-      </slot>
+  <component :is="parentComponent.is" v-bind="parentComponent.props">
+    <qas-header v-if="hasHeader" v-bind="headerProps">
+      <template #right>
+        <qas-filters v-bind="chartFiltersProps" />
+      </template>
+    </qas-header>
+
+    <div v-bind="parentComponentProps">
+      <component :is="chartComponent.is" v-if="showChart" v-bind="chartComponent.props" />
+
+      <div v-else-if="!isFetching">
+        <slot name="empty-results">
+          <qas-empty-result-text />
+        </slot>
+      </div>
+
+      <q-inner-loading :showing="isFetching">
+        <q-spinner color="grey" size="3em" />
+      </q-inner-loading>
     </div>
-
-    <q-inner-loading :showing="isFetching">
-      <q-spinner color="grey" size="3em" />
-    </q-inner-loading>
-  </div>
+  </component>
 </template>
 
 <script>
@@ -69,6 +71,11 @@ export default {
       type: Function
     },
 
+    boxProps: {
+      default: () => ({}),
+      type: Object
+    },
+
     colorsList: {
       type: Array,
       default: () => []
@@ -124,6 +131,11 @@ export default {
       type: String
     },
 
+    useBox: {
+      type: Boolean,
+      default: true
+    },
+
     useFilterButton: {
       type: Boolean
     }
@@ -251,9 +263,11 @@ export default {
     },
 
     parentComponentProps () {
+      const hasMinHeight = this.isFetching || this.hasDataSets
+
       return {
         class: 'relative-position',
-        style: `min-height: ${this.height}`
+        style: `min-height: ${hasMinHeight ? this.height : 'auto'}`
       }
     },
 
@@ -308,6 +322,16 @@ export default {
           label: this.title
         }
       }
+    },
+
+    parentComponent () {
+      return {
+        is: this.useBox ? 'qas-box' : 'div',
+
+        props: {
+          ...(this.useBox && { ...this.boxProps })
+        }
+      }
     }
   },
 

package/src/components/chart-view/QasChartView.yml

@@ -10,6 +10,11 @@ props:
     type: Function
     examples: ['beforeFetch({ payload, resolve, done })']
 
+  box-props:
+    desc: Propriedades do "QasBox" que envolve o conteúdo.
+    default: {}
+    type: Object
+
   colors-list:
     desc: Lista de cores personalizadas para utilizar nos gráficos
     default: []
@@ -65,6 +70,11 @@ props:
     desc: Envia como parâmetro para a action "fetchList" do modulo correspondente a "entity".
     type: String
 
+  use-box:
+    desc: Controla se o componente vai ter o QasBox englobando ou não.
+    default: true
+    type: Boolean
+
   use-filter-button:
     desc: Controla se o componente vai usar ou não o componente "QasFilters".
     type: Boolean

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

@@ -1,7 +1,7 @@
 <template>
   <qas-input ref="input" v-bind="attributes" v-model="currentValue" inputmode="numeric" :unmasked-value="false" @blur="validateDateTimeOnBlur" @focus="resetError" @update:model-value="updateModelValue">
     <template #append>
-      <qas-btn v-if="!props.useTimeOnly" color="grey-10" :disable="attrs.readonly" icon="sym_r_event" variant="tertiary">
+      <qas-btn v-if="!props.useTimeOnly" color="grey-10" :disable="attrs.readonly" icon="sym_r_calendar_today" variant="tertiary">
         <q-popup-proxy ref="dateProxy" transition-hide="scale" transition-show="scale" v-bind="props.datePopupProxyProps">
           <qas-date v-model="currentValue" v-bind="defaultDateProps" :mask="maskDate" width="290px" @update:model-value="updateModelValue" />
         </q-popup-proxy>

package/src/components/dialog/QasDialog.vue

@@ -1,10 +1,10 @@
 <template>
   <q-dialog ref="dialogRef" class="qas-dialog" :class="classes" data-cy="dialog" v-bind="dialogProps" :persistent="props.persistent" @update:model-value="updateModelValue">
-    <div class="bg-white q-pa-lg" :style="style">
-      <header v-if="hasHeader" class="q-mb-lg">
+    <div class="bg-white q-pa-md" :style="style">
+      <header v-if="hasHeader" class="q-mb-md">
         <slot name="header">
           <div class="items-center justify-between row">
-            <h5 class="text-h5" data-cy="dialog-title">{{ props.card.title }}</h5>
+            <qas-label data-cy="dialog-title" :label="props.card.title" margin="none" />
 
             <qas-btn v-if="isInfoDialog" v-close-popup color="grey-10" data-cy="dialog-close-btn" icon="sym_r_close" variant="tertiary" />
           </div>
@@ -45,7 +45,7 @@ import useDynamicComponents from './composables/use-dynamic-components'
 import useOk from './composables/use-ok'
 import { useScreen } from '../../composables'
 
-import { computed, ref, useAttrs, useSlots } from 'vue'
+import { computed, ref, useAttrs, useSlots, provide } from 'vue'
 import { useDialogPluginComponent } from 'quasar'
 
 defineOptions({ name: 'QasDialog' })
@@ -120,6 +120,8 @@ const emit = defineEmits([
   ...useDialogPluginComponent.emits
 ])
 
+provide('isDialog', true)
+
 const attrs = useAttrs()
 const screen = useScreen()
 const slots = useSlots()

package/src/components/expansion-item/QasExpansionItem.vue

@@ -1,27 +1,33 @@
 <template>
-  <div ref="expansionItem" class="full-width qas-expansion-item" :class="errorClasses" v-bind="expansionProps.parent">
-    <component :is="component.is" class="qas-expansion-item__box">
-      <q-expansion-item header-class="text-bold q-mt-sm q-pa-none qas-expansion-item__header" :label="props.label" v-bind="expansionProps.item">
+  <div ref="expansionItem" class="full-width qas-expansion-item" :class="classes" v-bind="expansionProps.parent">
+    <component :is="component.is" class="qas-expansion-item__box" v-bind="boxProps">
+      <q-expansion-item v-model="modelValue" v-bind="expansionProps.item" header-class="text-bold q-mt-sm q-pa-none qas-expansion-item__header">
         <template #header>
           <slot name="header">
-            <div class="full-width">
-              <div class="items-center q-col-gutter-sm row">
-                <slot name="label">
-                  <h5 class="col-auto text-h5">
-                    {{ props.label }}
-                  </h5>
-                </slot>
+            <div class="full-width justify-between no-wrap row">
+              <div>
+                <slot name="header-left">
+                  <div class="items-center q-col-gutter-sm row">
+                    <slot name="label">
+                      <h5 class="col-auto qas-expansion-item__label text-h5">
+                        {{ props.label }}
+                      </h5>
+                    </slot>
+
+                    <div v-if="hasBadges" class="col-auto items-center q-col-gutter-sm row">
+                      <div v-for="(badge, badgeIndex) in props.badges" :key="badgeIndex" class="col-auto">
+                        <qas-badge v-bind="badge" />
+                      </div>
+                    </div>
+                  </div>
 
-                <div class="col-auto items-center q-col-gutter-sm row">
-                  <div v-for="(badge, badgeIndex) in props.badges" :key="badgeIndex" class="col-auto">
-                    <qas-badge v-bind="badge" />
+                  <div v-if="hasHeaderBottom" class="q-mt-sm">
+                    <slot name="header-bottom" />
                   </div>
-                </div>
+                </slot>
               </div>
 
-              <div v-if="hasHeaderBottom" class="q-mt-sm">
-                <slot name="header-bottom" />
-              </div>
+              <qas-btn class="qas-expansion-item__dropdown" color="grey-10" :disable="isDisabled" icon="sym_r_keyboard_arrow_up" />
             </div>
           </slot>
         </template>
@@ -60,6 +66,14 @@ const props = defineProps({
     default: () => []
   },
 
+  disable: {
+    type: Boolean
+  },
+
+  disableButton: {
+    type: Boolean
+  },
+
   error: {
     type: Boolean
   },
@@ -69,6 +83,11 @@ const props = defineProps({
     default: ''
   },
 
+  group: {
+    type: String,
+    default: ''
+  },
+
   label: {
     type: String,
     default: ''
@@ -85,6 +104,8 @@ const props = defineProps({
   }
 })
 
+const modelValue = defineModel({ type: Boolean })
+
 const attrs = useAttrs()
 
 provide('isExpansionItem', true)
@@ -100,11 +121,14 @@ onMounted(setHasNextSibling)
 
 // constants
 const isNestedExpansionItem = inject('isExpansionItem', false)
+const isNestedBox = inject('isBox', false)
+
 const component = {
   is: isNestedExpansionItem ? 'div' : QasBox
 }
 
 // computed
+const hasBadges = computed(() => !!props.badges.length)
 const hasError = computed(() => props.error || !!props.errorMessage)
 const hasGridGenerator = computed(() => !!Object.keys(props.gridGeneratorProps).length)
 const hasBottomSeparator = computed(() => isNestedExpansionItem && hasNextSibling.value)
@@ -121,7 +145,13 @@ const hasHeaderSeparator = computed(() => {
   return typeof props.useHeaderSeparator === 'undefined' ? !isNestedExpansionItem : props.useHeaderSeparator
 })
 
-const errorClasses = computed(() => ({ 'qas-expansion-item--error': hasError.value }))
+const classes = computed(() => {
+  return {
+    'qas-expansion-item--error': hasError.value,
+    'qas-expansion-item--disabled': props.disable || props.disableButton,
+    'qas-expansion-item--disabled-full': props.disable
+  }
+})
 
 const contentClasses = computed(() => {
   return {
@@ -142,11 +172,15 @@ const expansionProps = computed(() => {
   } = attrs
 
   return {
-    parent: {
-      ...propsPayload
-    },
+    parent: propsPayload,
 
     item: {
+      disable: isDisabled.value,
+      hideExpandIcon: true,
+      label: props.label,
+      group: props.group,
+
+      // events
       onUpdateModelValue,
       onShow,
       onBeforeShow,
@@ -157,6 +191,23 @@ const expansionProps = computed(() => {
   }
 })
 
+const boxProps = computed(() => {
+  /**
+   * Caso o QasExpansionItem estiver dentro de um QasBox e não for um QasExpansionItem
+   * dentro de outro QasExpansionItem, o componente terá uma borda.
+  */
+  const isBoxed = isNestedBox && !isNestedExpansionItem
+
+  if (!isBoxed) return {}
+
+  return {
+    unelevated: isBoxed,
+    outlined: isBoxed
+  }
+})
+
+const isDisabled = computed(() => props.disable || props.disableButton)
+
 // functions
 
 /**
@@ -177,10 +228,16 @@ function setHasNextSibling (value) {
 .qas-expansion-item {
   $root: &;
 
-  // em alguns casos quando usado com grid, o espaçamento afetava o header, com z-index o problema é resolvido
-  &__header {
-    position: relative;
-    z-index: 1;
+  &--disabled {
+    .q-item.disabled {
+      opacity: 1 !important;
+    }
+  }
+
+  &--disabled-full {
+    #{$root}__label {
+      color: $grey-6 !important;
+    }
   }
 
   &--error {
@@ -193,6 +250,24 @@ function setHasNextSibling (value) {
     }
   }
 
+  // em alguns casos quando usado com grid, o espaçamento afetava o header, com z-index o problema é resolvido
+  &__header {
+    position: relative;
+    z-index: 1;
+  }
+
+  .q-expansion-item {
+    #{$root}__dropdown {
+      transition: transform var(--qas-generic-transition);;
+    }
+
+    &--expanded {
+      #{$root}__dropdown {
+        transform: rotate(180deg);
+      }
+    }
+  }
+
   .q-item {
     margin-top: 0;
     min-height: auto;

package/src/components/expansion-item/QasExpansionItem.yml

@@ -8,6 +8,16 @@ props:
     desc: Lista de badges que serão exibidas na parte superior do card.
     type: Array
 
+  disable:
+    desc: Desabilita o componente e aplica estilo de desabilitado no label e no button.
+    default: false
+    type: Boolean
+
+  disable-button:
+    desc: Desabilita o componente sem aplicar o estilo de desabilitado no label (usar em casos onde não tem conteúdo no slot content).
+    default: false
+    type: Boolean
+
   error:
     desc: Booleano que caso seja true o card passa a ter uma borda vermelha.
     type: Boolean
@@ -16,10 +26,20 @@ props:
     desc: Mensagem de erro onde será exibida na parte inferior do card.
     type: String
 
+  group:
+    desc: Agrupamento para estado aberto|fechado.
+    default: ''
+    type: String
+
   label:
     desc: Titulo exibido na parte superior do card.
     type: String
 
+  model-value:
+    desc: Model que controla o estado aberto|fechado.
+    default: false
+    type: Boolean
+
   grid-generator-props:
     desc: Propriedades que serão repassadas para o QasGridGenerator.
     type: Object
@@ -31,13 +51,24 @@ props:
 
 slots:
   header:
-    desc: 'Slot para substituir o conteúdo do header'
+    desc: Slot para substituir o conteúdo do header (incluindo o botão dropdown).
 
   header-bottom:
-    desc: 'Slot para acessar o conteúdo que fica abaixo do header.'
+    desc: Slot para acessar o conteúdo que fica abaixo do header.
+
+  header-left:
+    desc: Slot para substituir o conteúdo do header á esquerda (não inclui o botão dropdown).
 
   label:
-    desc: 'Slot para substituir o conteúdo da label do header.'
+    desc: Slot para substituir o conteúdo da label do header.
 
   content:
-    desc: 'Slot para substituir o conteúdo principal do card.'
+    desc: Slot para substituir o conteúdo principal do card.
+
+events:
+  '@update:model-value -> function(value)':
+    desc: Dispara quando o model-value altera, também usado para v-model.
+    params:
+      value:
+        desc: Novo valor do model.
+        type: Boolean

package/src/components/filters/QasFilters.vue

@@ -160,7 +160,7 @@ export default {
           const field = { ...this.fields[key], ...this.formattedFieldsProps?.[decamelize(key)] }
           const value = humanize(field, this.normalizeValues(filters[key], field?.multiple))
 
-          if (!value) continue
+          if (!value || (Array.isArray(value) && !value.length)) continue
 
           const { label, name } = field
 

package/src/components/filters/private/PvFiltersButton.vue

@@ -1,6 +1,6 @@
 <template>
   <qas-btn data-cy="filters-btn" icon="sym_r_filter_alt" label="Filtrar" :use-label-on-small-screen="false" variant="tertiary">
-    <q-menu ref="menu" anchor="center right" class="full-width" max-width="270px" self="top right" v-bind="menuProps">
+    <q-menu ref="menu" anchor="center right" class="full-width" max-width="270px" v-bind="menuProps" no-refocus self="top right">
       <div v-if="loading" class="q-pa-xl text-center">
         <q-spinner color="grey" size="2em" />
       </div>

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

@@ -2,19 +2,25 @@
   <div :class="fieldsetClasses">
     <div v-for="(fieldsetItem, fieldsetItemKey) in normalizedFields" :key="fieldsetItemKey" :class="getFieldSetColumnClass(fieldsetItem.column)">
       <component :is="containerComponent.is" v-bind="containerComponent.props">
-        <slot v-if="fieldsetItem.label" :name="`legend-${fieldsetItemKey}`">
-          <qas-label :label="fieldsetItem.label" :margin="getLabelMargin(fieldsetItem)" />
-
-          <div v-if="fieldsetItem.description" class="q-mb-md text-body1 text-grey-8">{{ fieldsetItem.description }}</div>
+        <slot v-if="fieldsetItem.__isFieldset" :name="`legend-${fieldsetItemKey}`">
+          <qas-header v-bind="getHeaderProps(fieldsetItem)" />
         </slot>
 
         <div>
           <slot :fields="fieldsetItem.fields?.visible" :name="`legend-section-${fieldsetItemKey}`">
-            <div :class="classes">
-              <div v-for="(field, key) in fieldsetItem.fields.visible" :key="key" :class="getFieldClass({ index: key, fields: normalizedFields })">
-                <slot :field="field" :name="`field-${field.name}`">
-                  <qas-field :disable="isFieldDisabled(field)" v-bind="props.fieldsProps[field.name]" :error="props.errors[key]" :field="field" :model-value="props.modelValue[field.name]" @update:model-value="updateModelValue({ key: field.name, value: $event })" />
-                </slot>
+            <div class="q-col-gutter-md row">
+              <div class="col">
+                <div :class="fieldContainerClasses">
+                  <div v-for="(field, key) in fieldsetItem.fields.visible" :key="key" :class="getFieldClass({ index: key, fields: normalizedFields })">
+                    <slot :field="field" :name="`field-${field.name}`">
+                      <qas-field :disable="isFieldDisabled(field)" v-bind="props.fieldsProps[field.name]" :error="props.errors[key]" :field="field" :model-value="props.modelValue[field.name]" @update:model-value="updateModelValue({ key: field.name, value: $event })" />
+                    </slot>
+                  </div>
+                </div>
+              </div>
+
+              <div v-if="hasButtonProps(fieldsetItem)" class="col-12 col-sm-auto items-end justify-end row">
+                <qas-btn v-bind="fieldsetItem.buttonProps" />
               </div>
             </div>
 
@@ -25,6 +31,8 @@
             </div>
           </slot>
         </div>
+
+        <slot v-if="fieldsetItem.__isFieldset" :name="`legend-bottom-${fieldsetItemKey}`" />
       </component>
     </div>
   </div>
@@ -34,6 +42,7 @@
 import { gutterValidator } from '../../helpers/private/gutter-validator'
 import useGenerator, { baseProps } from '../../composables/private/use-generator'
 import { Spacing } from '../../enums/Spacing'
+import { useScreen } from '../../composables'
 import { computed, provide, inject } from 'vue'
 
 defineOptions({ name: 'QasFormGenerator' })
@@ -96,6 +105,8 @@ const { classes, getFieldClass, getFieldSetColumnClass } = useGenerator({ props
 
 const { fieldsetClasses, hasFieldset } = useFieldset({ props })
 
+const screen = useScreen()
+
 // constants
 const hasNestedFormGenerator = inject('isFormGenerator', false)
 
@@ -162,7 +173,12 @@ const normalizedFields = computed(() => {
       label: fieldsetItem.label,
       description: fieldsetItem.description,
       column: fieldsetItem.column,
-      fields: { hidden: {}, visible: {} }
+      buttonProps: fieldsetItem.buttonProps,
+      fields: { hidden: {}, visible: {} },
+      headerProps: fieldsetItem.headerProps,
+
+      // Indica que existe um fieldset para que o QasHeader possa ser renderizado
+      __isFieldset: true
     }
 
     fieldsetItem.fields.forEach(fieldName => {
@@ -181,13 +197,31 @@ const normalizedFields = computed(() => {
   return fields
 })
 
-// methods
+const fieldContainerClasses = computed(() => {
+  return [
+    ...classes.value,
+    {
+      col: !screen.isSmall
+    }
+  ]
+})
+
+// functions
 function getFieldType ({ type }) {
   return type === 'hidden' ? 'hidden' : 'visible'
 }
 
-function getLabelMargin (fieldsetItem) {
-  return fieldsetItem.description ? 'sm' : 'md'
+function getHeaderProps (fieldsetItem) {
+  return {
+    description: fieldsetItem.description,
+
+    labelProps: {
+      ...fieldsetItem.headerProps?.labelProps,
+      ...(fieldsetItem.label && { label: fieldsetItem.label })
+    },
+
+    ...fieldsetItem.headerProps
+  }
 }
 
 function isFieldDisabled ({ disable }) {
@@ -201,6 +235,10 @@ function updateModelValue ({ key, value }) {
   emit('update:modelValue', models)
 }
 
+function hasButtonProps ({ buttonProps = {} }) {
+  return !!Object.keys(buttonProps).length
+}
+
 // composables
 function useFieldset ({ props }) {
   const fieldsetClasses = computed(() => {

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

@@ -97,6 +97,9 @@ slots:
         default: {}
         type: Object
 
+  'legend-bottom-[nome-da-chave]':
+    desc: Acessa o slot da seção abaixo do conteúdo do form de um fieldset específico.
+
 events:
   '@update:model-value -> function(value)':
     desc: Dispara quando o model-value altera, também usado para v-model.