@bildvitta/quasar-ui-asteroid 3.17.0-beta.2 → 3.17.0-beta.21

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

@@ -1,35 +1,37 @@
 <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" @show="setShowContent">
         <template #header>
-          <slot name="header">
+          <div class="full-width justify-between no-wrap row">
             <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="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" />
+              <slot name="header">
+                <div class="items-center q-col-gutter-sm row">
+                  <slot name="header-label">
+                    <qas-label class="col-auto qas-expansion-item__label" :label="props.label" margin="none" typography="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>
 
-              <div v-if="hasHeaderBottom" class="q-mt-sm">
-                <slot name="header-bottom" />
-              </div>
+                <div v-if="hasHeaderBottom" class="q-mt-sm">
+                  <slot name="header-bottom" />
+                </div>
+              </slot>
             </div>
-          </slot>
+
+            <qas-btn class="qas-expansion-item__dropdown" color="grey-10" :disable="isDisabled" icon="sym_r_keyboard_arrow_down" />
+          </div>
         </template>
 
         <q-separator v-if="hasHeaderSeparator" class="q-my-md" />
 
         <div :class="contentClasses">
-          <slot name="content">
+          <slot v-if="showContent" name="content">
             <qas-grid-generator v-if="hasGridGenerator" use-inline v-bind="gridGeneratorProps" />
           </slot>
         </div>
@@ -60,6 +62,14 @@ const props = defineProps({
     default: () => []
   },
 
+  disable: {
+    type: Boolean
+  },
+
+  disableButton: {
+    type: Boolean
+  },
+
   error: {
     type: Boolean
   },
@@ -69,14 +79,24 @@ const props = defineProps({
     default: ''
   },
 
+  gridGeneratorProps: {
+    type: Object,
+    default: () => ({})
+  },
+
+  group: {
+    type: String,
+    default: undefined
+  },
+
   label: {
     type: String,
     default: ''
   },
 
-  gridGeneratorProps: {
-    type: Object,
-    default: () => ({})
+  maxContentHeight: {
+    type: String,
+    default: ''
   },
 
   useHeaderSeparator: {
@@ -85,6 +105,8 @@ const props = defineProps({
   }
 })
 
+const modelValue = defineModel({ type: Boolean })
+
 const attrs = useAttrs()
 
 provide('isExpansionItem', true)
@@ -95,16 +117,20 @@ const slots = defineSlots()
 // refs
 const expansionItem = ref(null)
 const hasNextSibling = ref(false)
+const showContent = ref(false)
 
 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,12 +147,19 @@ 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 {
     'q-mt-sm': isNestedExpansionItem,
-    'q-mt-md': !isNestedExpansionItem && !props.useHeaderSeparator
+    'q-mt-md': !isNestedExpansionItem && !props.useHeaderSeparator,
+    'qas-expansion-item__content overflow-auto': !!props.maxContentHeight
   }
 })
 
@@ -142,11 +175,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,13 +194,30 @@ 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
 
 /**
  * Caso o componente esteja dentro de um QasExpansionItem, verifica se existe um próximo irmão
  * para adicionar um separador.
  */
-function setHasNextSibling (value) {
+function setHasNextSibling () {
   if (!isNestedExpansionItem) return
 
   const hasTextContentSibling = !!expansionItem.value.nextSibling?.textContent?.trim?.()
@@ -171,21 +225,31 @@ function setHasNextSibling (value) {
 
   hasNextSibling.value = hasElementSibling || hasTextContentSibling
 }
+
+function setShowContent () {
+  showContent.value = true
+}
 </script>
 
 <style lang="scss">
 .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 {
     #{$root}__box {
-      border: 2px solid $negative;
+      border: 2px solid $negative !important;
     }
 
     #{$root}__error-message {
@@ -193,6 +257,28 @@ function setHasNextSibling (value) {
     }
   }
 
+  &__content {
+    max-height: v-bind("props.maxContentHeight");
+  }
+
+  // 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,25 @@ 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
+
+  max-content-height:
+    desc: Define um tamanho máximo de altura do conteúdo.
+    default: ''
+    type: String
+
   grid-generator-props:
     desc: Propriedades que serão repassadas para o QasGridGenerator.
     type: Object
@@ -31,13 +56,21 @@ props:
 
 slots:
   header:
-    desc: 'Slot para substituir o conteúdo do header'
+    desc: Slot para substituir o conteúdo do header (não inclui 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.
 
-  label:
-    desc: 'Slot para substituir o conteúdo da label do header.'
+  header-label:
+    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,22 +2,26 @@
   <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="hasFieldsetItem(fieldsetItem)" :name="`legend-${fieldsetItemKey}`">
-          <qas-header v-bind="getHeaderProps(fieldsetItem)" />
+        <slot v-if="fieldsetItem.__hasFieldset" :name="`legend-${fieldsetItemKey}`">
+          <qas-header v-if="fieldsetItem.__hasHeader" v-bind="getHeaderProps(fieldsetItem)" />
         </slot>
 
         <div>
           <slot :fields="fieldsetItem.fields?.visible" :name="`legend-section-${fieldsetItemKey}`">
-            <div class="items-end justify-end" :class="getRowContainerClasses(fieldsetItem)">
-              <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 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>
 
-              <qas-btn v-if="hasButtonProps(fieldsetItem)" class="md:q-mt-none q-ml-md q-mt-md" v-bind="fieldsetItem.buttonProps" />
+              <div v-if="hasButtonProps(fieldsetItem)" class="col-12 col-sm-auto items-end justify-end row">
+                <qas-btn v-bind="fieldsetItem.buttonProps" />
+              </div>
             </div>
 
             <div v-for="(field, key) in fieldsetItem.fields.hidden" :key="key">
@@ -27,6 +31,8 @@
             </div>
           </slot>
         </div>
+
+        <slot v-if="fieldsetItem.__hasFieldset" :name="`legend-bottom-${fieldsetItemKey}`" />
       </component>
     </div>
   </div>
@@ -97,7 +103,7 @@ provide('isFormGenerator', true)
 // composables
 const { classes, getFieldClass, getFieldSetColumnClass } = useGenerator({ props })
 
-const { fieldsetClasses, hasFieldset, hasFieldsetItem } = useFieldset({ props })
+const { fieldsetClasses, hasFieldset } = useFieldset({ props })
 
 const screen = useScreen()
 
@@ -163,13 +169,29 @@ const normalizedFields = computed(() => {
   for (const fieldsetKey in props.fieldset) {
     const fieldsetItem = props.fieldset[fieldsetKey]
 
+    const {
+      label,
+      description,
+      column,
+      buttonProps,
+      headerProps
+    } = fieldsetItem
+
+    const hasHeader = !!(label || description || Object.keys(headerProps || {}).length)
+
     fields[fieldsetKey] = {
-      label: fieldsetItem.label,
-      description: fieldsetItem.description,
-      column: fieldsetItem.column,
-      buttonProps: fieldsetItem.buttonProps,
+      label,
+      description,
+      column,
+      buttonProps,
       fields: { hidden: {}, visible: {} },
-      headerProps: fieldsetItem.headerProps
+      headerProps,
+
+      // Indica que existe um fieldset para que o legend-bottom possa ser renderizado.
+      __hasFieldset: true,
+
+      // Indica que existe props para que o header seja renderizado.
+      __hasHeader: hasHeader
     }
 
     fieldsetItem.fields.forEach(fieldName => {
@@ -197,7 +219,7 @@ const fieldContainerClasses = computed(() => {
   ]
 })
 
-// methods
+// functions
 function getFieldType ({ type }) {
   return type === 'hidden' ? 'hidden' : 'visible'
 }
@@ -230,10 +252,6 @@ function hasButtonProps ({ buttonProps = {} }) {
   return !!Object.keys(buttonProps).length
 }
 
-function getRowContainerClasses (item) {
-  return { row: hasButtonProps(item) }
-}
-
 // composables
 function useFieldset ({ props }) {
   const fieldsetClasses = computed(() => {
@@ -248,15 +266,9 @@ function useFieldset ({ props }) {
 
   const hasFieldset = computed(() => !!Object.keys(props.fieldset).length)
 
-  function hasFieldsetItem (fieldset = {}) {
-    return !!Object.keys(fieldset).length
-  }
-
   return {
     fieldsetClasses,
-    hasFieldset,
-
-    hasFieldsetItem
+    hasFieldset
   }
 }
 </script>

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.

package/src/components/grabbable/QasGrabbable.vue

@@ -19,6 +19,11 @@ defineOptions({ name: 'QasGrabbable' })
 const props = defineProps({
   useScrollBar: {
     type: Boolean
+  },
+
+  cancelMouseDownTarget: {
+    type: String,
+    default: ''
   }
 })
 
@@ -61,17 +66,20 @@ function handleEnableScrollOnGrab () {
 function initScrollOnGrab () {
   if (hasScrollOnGrab.value) return
 
-  scrollOnGrab.value = setScrollOnGrab(grabContainer.value, {
-    onGrabFn: onGrab,
-    onMoveFn: setGrabPosition,
-    onScrollFn: setGrabPosition
-  })
+  scrollOnGrab.value = setScrollOnGrab(
+    grabContainer.value,
+    {
+      onGrabFn: onGrab,
+      onMoveFn: setGrabPosition,
+      onScrollFn: setGrabPosition
+    },
+    props.cancelMouseDownTarget
+  )
 }
 
 function destroyScrollOnGrab () {
   if (!hasScrollOnGrab.value) return
 
-  scrollOnGrab.value.destroyEvents()
   scrollOnGrab.value.element.style.cursor = 'auto'
   scrollOnGrab.value = {}
 

package/src/components/grabbable/QasGrabbable.yml

@@ -9,6 +9,10 @@ props:
     default: false
     type: Boolean
 
+  cancel-mouse-down-target:
+    desc: Classe do elemento no qual será ignorado para não realizar o grab.
+    type: String
+
 slots:
   default:
     desc: Slot para ter o conteúdo que terá o scroll na horizontal.