@bildvitta/quasar-ui-asteroid 3.17.0-beta.8 → 3.17.0

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

@@ -1,42 +1,40 @@
 <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" v-bind="boxProps">
-      <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">
+    <qas-box 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>
-        </template>
 
-        <q-separator v-if="hasHeaderSeparator" class="q-my-md" />
+            <qas-btn class="qas-expansion-item__dropdown" color="grey-10" :disable="isDisabled" icon="sym_r_keyboard_arrow_down" />
+          </div>
+        </template>
 
         <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>
-
-        <q-separator v-if="hasBottomSeparator" class="q-mt-md" />
       </q-expansion-item>
-    </component>
+    </qas-box>
 
     <div v-if="hasError" class="q-pt-sm qas-expansion-item__error-message text-caption text-negative">
       {{ props.errorMessage }}
@@ -47,7 +45,7 @@
 <script setup>
 import QasBox from '../box/QasBox.vue'
 
-import { computed, provide, inject, onMounted, ref, useAttrs } from 'vue'
+import { computed, provide, inject, ref, useAttrs } from 'vue'
 
 defineOptions({
   name: 'QasExpansionItem',
@@ -60,16 +58,19 @@ const props = defineProps({
     default: () => []
   },
 
-  error: {
+  disable: {
     type: Boolean
   },
 
-  errorMessage: {
-    type: String,
-    default: ''
+  disableButton: {
+    type: Boolean
   },
 
-  label: {
+  error: {
+    type: Boolean
+  },
+
+  errorMessage: {
     type: String,
     default: ''
   },
@@ -79,12 +80,24 @@ const props = defineProps({
     default: () => ({})
   },
 
-  useHeaderSeparator: {
-    type: Boolean,
+  group: {
+    type: String,
     default: undefined
+  },
+
+  label: {
+    type: String,
+    default: ''
+  },
+
+  maxContentHeight: {
+    type: String,
+    default: ''
   }
 })
 
+const modelValue = defineModel({ type: Boolean })
+
 const attrs = useAttrs()
 
 provide('isExpansionItem', true)
@@ -94,41 +107,30 @@ const slots = defineSlots()
 
 // refs
 const expansionItem = ref(null)
-const hasNextSibling = ref(false)
-
-onMounted(setHasNextSibling)
+const showContent = ref(false)
 
 // 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)
 const hasHeaderBottom = computed(() => !!slots['header-bottom'])
 
-/**
- * Verifica se o componente deve adicionar um separador no header.
- *
- * - Se a propriedade useHeaderSeparator for true, retorna separador.
- * - Se a propriedade useHeaderSeparator for undefined, retorna separador apenas se não for um componente aninhado.
- * - Se a propriedade useHeaderSeparator for false, não retorna separador.
- */
-const hasHeaderSeparator = computed(() => {
-  return typeof props.useHeaderSeparator === 'undefined' ? !isNestedExpansionItem : props.useHeaderSeparator
+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 errorClasses = computed(() => ({ 'qas-expansion-item--error': hasError.value }))
-
 const contentClasses = computed(() => {
   return {
-    'q-mt-sm': isNestedExpansionItem,
-    'q-mt-md': !isNestedExpansionItem && !props.useHeaderSeparator
+    'q-mt-md': true,
+    'qas-expansion-item__content overflow-auto': !!props.maxContentHeight
   }
 })
 
@@ -144,11 +146,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,
@@ -161,10 +167,10 @@ const expansionProps = computed(() => {
 
 const boxProps = computed(() => {
   /**
-   * Caso o QasExpansionItem estiver dentro de um QasBox e não for um QasExpansionItem
+   * Caso o QasExpansionItem estiver dentro de um QasBox ou for um QasExpansionItem
    * dentro de outro QasExpansionItem, o componente terá uma borda.
   */
-  const isBoxed = isNestedBox && !isNestedExpansionItem
+  const isBoxed = isNestedBox || isNestedExpansionItem
 
   if (!isBoxed) return {}
 
@@ -174,19 +180,11 @@ const boxProps = computed(() => {
   }
 })
 
-// functions
-
-/**
- * Caso o componente esteja dentro de um QasExpansionItem, verifica se existe um próximo irmão
- * para adicionar um separador.
- */
-function setHasNextSibling (value) {
-  if (!isNestedExpansionItem) return
-
-  const hasTextContentSibling = !!expansionItem.value.nextSibling?.textContent?.trim?.()
-  const hasElementSibling = !!expansionItem.value.nextElementSibling
+const isDisabled = computed(() => props.disable || props.disableButton)
 
-  hasNextSibling.value = hasElementSibling || hasTextContentSibling
+// functions
+function setShowContent () {
+  showContent.value = true
 }
 </script>
 
@@ -194,15 +192,21 @@ 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 {
     #{$root}__box {
-      border: 2px solid $negative;
+      border: 2px solid $negative !important;
     }
 
     #{$root}__error-message {
@@ -210,6 +214,34 @@ 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);
+      }
+    }
+
+    &--collapsed {
+      #{$root}__dropdown {
+        transform: none;
+      }
+    }
+  }
+
   .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,28 +26,46 @@ 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
 
-  use-header-separator:
-    desc: Propriedade para forçar o QSeparator no header.
-    type: Boolean
-    default: undefined
-
 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/field/QasField.vue

@@ -146,7 +146,7 @@ export default {
         time: { ...datetimeInput, useTimeOnly: true },
 
         boolean: { is: 'qas-toggle', label, ...error },
-        checkbox: { is: 'qas-checkbox', label, options, ...error },
+        checkbox: { is: 'qas-checkbox', label, options, ...error, required },
         radio: { is: 'qas-radio', label, options },
 
         upload: { is: 'qas-uploader', accept, autoUpload: true, entity, label, multiple, readonly, maxFiles, ...error },

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

@@ -2,8 +2,8 @@
   <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.__isFieldset" :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>
@@ -32,7 +32,7 @@
           </slot>
         </div>
 
-        <slot v-if="fieldsetItem.__isFieldset" :name="`legend-bottom-${fieldsetItemKey}`" />
+        <slot v-if="fieldsetItem.__hasFieldset" :name="`legend-bottom-${fieldsetItemKey}`" />
       </component>
     </div>
   </div>
@@ -169,16 +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 um fieldset para que o QasHeader possa ser renderizado
-      __isFieldset: true
+      // Indica que existe props para que o header seja renderizado.
+      __hasHeader: hasHeader
     }
 
     fieldsetItem.fields.forEach(fieldName => {

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

@@ -24,7 +24,7 @@ props:
     default: {}
     type: Object
 
-  error:
+  errors:
     desc: Objeto contendo propriedades contendo a mensagem de erro.
     default: {}
     type: Object
@@ -55,7 +55,7 @@ props:
 
   gutter:
     desc: Espaçamento entre colunas.
-    default: lg
+    default: md
     type: [String, Boolean]
     examples: [xs, sm, md, lg, xl, '2xl', '3xl', '4xl', '5xl', false]
 

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.

package/src/components/grid-generator/QasGridGenerator.vue

@@ -3,7 +3,7 @@
     <qas-header v-if="hasHeader" v-bind="props.headerProps" />
 
     <div :class="classes">
-      <div v-for="(field, key) in fieldsByResult" :key="key" :class="getContainerClassses({ key })">
+      <div v-for="(field, key) in fieldsByResult" :key="key" :class="getContainerClasses({ key })">
         <slot :field="field" :name="`field-${field.name}`">
           <qas-grid-item :use-ellipsis="hasEllipsis(field)" :use-inline="props.useInline">
             <template #header>
@@ -98,7 +98,7 @@ const props = defineProps({
 })
 
 // composables
-const { classes, getFieldClass } = useGenerator({ props })
+const { classes, getFieldClass } = useGenerator({ props, isGrid: true })
 
 // computed
 const hasResult = computed(() => Object.keys(props.result).length)
@@ -181,7 +181,7 @@ function setFieldsByResult () {
   fieldsByResult.value = getFieldsByResult()
 }
 
-function getContainerClassses ({ key }) {
+function getContainerClasses ({ key }) {
   if (props.useInline) return 'row justify-between col-12'
 
   return getFieldClass({ index: key, isGridGenerator: true })

package/src/components/grid-generator/QasGridGenerator.yml

@@ -36,8 +36,8 @@ props:
     examples: ["{ email: { name: 'email', type: 'email', label: 'E-mail' } }"]
 
   gutter:
-    desc: Espaçamento entre colunas.
-    default: lg
+    desc: Em caso de uso inline o default é "sm" senão é "md".
+    default: ''
     type: String
     examples: [xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl]
 

package/src/components/grid-item/QasGridItem.vue

@@ -65,8 +65,8 @@ const classes = computed(() => {
     },
 
     content: {
+      'text-grey-10': true,
       'text-body1': !isInline,
-      'text-grey-10': !isInline,
       'text-subtitle1': isInline,
       ellipsis: hasEllipsis.value
     }

package/src/components/header/QasHeader.vue

@@ -13,11 +13,11 @@
         </div>
       </div>
 
-      <slot name="actions">
-        <div class="q-mt-xs text-right">
-          <component :is="actionsComponent.is" v-if="hasActionsSection" v-bind="actionsComponent.props" />
-        </div>
-      </slot>
+      <div v-if="hasActionsSection" class="text-right">
+        <slot name="actions">
+          <component :is="actionsComponent.is" v-if="hasActionsComponent" v-bind="actionsComponent.props" />
+        </slot>
+      </div>
     </div>
 
     <div class="items-start no-wrap q-col-gutter-sm row" :class="descriptionSectionClasses">
@@ -27,9 +27,9 @@
         </slot>
       </div>
 
-      <div v-if="!hasLabelSection" class="justify-end row">
+      <div v-if="!hasLabelSection" class="justify-end row text-right">
         <slot name="actions">
-          <component :is="actionsComponent.is" v-if="hasActionsSection" v-bind="actionsComponent.props" />
+          <component :is="actionsComponent.is" v-if="hasActionsComponent" v-bind="actionsComponent.props" />
         </slot>
       </div>
     </div>
@@ -136,10 +136,12 @@ const actionsComponent = computed(() => {
   return component.true
 })
 
-const hasActionsSection = computed(() => {
-  return !!slots.actions || hasDefaultButton.value || hasDefaultActionsMenu.value || hasDefaultFilters.value
+const hasActionsComponent = computed(() => {
+  return hasDefaultButton.value || hasDefaultActionsMenu.value || hasDefaultFilters.value
 })
 
+const hasActionsSection = computed(() => !!slots.actions || hasActionsComponent.value)
+
 const hasBadges = computed(() => !!props.badges.length)
 const hasLabel = computed(() => !!Object.keys(props.labelProps).length)
 const hasDefaultButton = computed(() => !!Object.keys(props.buttonProps).length)