@bildvitta/quasar-ui-asteroid 3.17.0-beta.5 → 3.17.0-beta.7

package/package.json

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

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

@@ -265,7 +265,7 @@ export default {
     parentComponentProps () {
       return {
         class: 'relative-position',
-        style: `min-height: ${this.height}`
+        style: `min-height: ${this.hasDataSets ? this.height : 'auto'}`
       }
     },
 

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/expansion-item/QasExpansionItem.vue

@@ -1,6 +1,6 @@
 <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">
+    <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">
         <template #header>
           <slot name="header">
@@ -100,6 +100,8 @@ onMounted(setHasNextSibling)
 
 // constants
 const isNestedExpansionItem = inject('isExpansionItem', false)
+const isNestedBox = inject('isBox', false)
+
 const component = {
   is: isNestedExpansionItem ? 'div' : QasBox
 }
@@ -157,6 +159,21 @@ 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
+  }
+})
+
 // functions
 
 /**

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="fieldset.__isFieldset" :name="`legend-${fieldsetItemKey}`">
+        <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="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.__isFieldset" :name="`legend-bottom-${fieldsetItemKey}`" />
       </component>
     </div>
   </div>
@@ -200,7 +206,7 @@ const fieldContainerClasses = computed(() => {
   ]
 })
 
-// methods
+// functions
 function getFieldType ({ type }) {
   return type === 'hidden' ? 'hidden' : 'visible'
 }
@@ -233,10 +239,6 @@ function hasButtonProps ({ buttonProps = {} }) {
   return !!Object.keys(buttonProps).length
 }
 
-function getRowContainerClasses (item) {
-  return { row: hasButtonProps(item) }
-}
-
 // 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.

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

@@ -153,7 +153,7 @@ const formattedFields = computed(() => {
 // watch
 watch(() => formattedFields.value, setFieldsByResult, { immediate: true })
 
-// methods
+// functions
 function getFieldsByResult () {
   if (!hasResult.value || !hasFields.value) return {}
 
@@ -203,7 +203,7 @@ function getContentClasses (field) {
     props.contentClass,
 
     {
-      ellipsis: !screen.isSmall && this.hasEllipsis(field)
+      ellipsis: !screen.isSmall && hasEllipsis(field)
     }
   ]
 }

package/src/components/header/QasHeader.vue

@@ -15,9 +15,7 @@
 
       <slot name="actions">
         <div class="q-mt-xs text-right">
-          <qas-actions-menu v-if="hasDefaultActionsMenu" v-bind="props.actionsMenuProps" />
-
-          <qas-btn v-if="hasDefaultButton" :use-label-on-small-screen="false" v-bind="props.buttonProps" />
+          <component :is="actionsComponent.is" v-if="hasActionsSection" v-bind="actionsComponent.props" />
         </div>
       </slot>
     </div>
@@ -31,9 +29,7 @@
 
       <div v-if="!hasLabelSection" class="justify-end row">
         <slot name="actions">
-          <qas-actions-menu v-if="hasDefaultActionsMenu" v-bind="props.actionsMenuProps" />
-
-          <qas-btn v-if="hasDefaultButton" :use-label-on-small-screen="false" v-bind="props.buttonProps" />
+          <component :is="actionsComponent.is" v-if="hasActionsSection" v-bind="actionsComponent.props" />
         </slot>
       </div>
     </div>
@@ -69,6 +65,11 @@ const props = defineProps({
     default: ''
   },
 
+  filtersProps: {
+    default: () => ({}),
+    type: Object
+  },
+
   labelProps: {
     type: Object,
     default: () => ({})
@@ -106,10 +107,43 @@ const defaultLabelProps = computed(() => {
   }
 })
 
-const hasActionsSection = computed(() => !!slots.actions || hasDefaultButton.value || hasDefaultActionsMenu.value)
+const actionsComponent = computed(() => {
+  const component = {
+    [hasDefaultButton.value]: {
+      is: 'qas-btn',
+      props: {
+        ...props.buttonProps,
+        useLabelOnSmallScreen: false
+      }
+    },
+
+    [hasDefaultActionsMenu.value]: {
+      is: 'qas-actions-menu',
+      props: props.actionsMenuProps
+    },
+
+    [hasDefaultFilters.value]: {
+      is: 'qas-filters',
+      props: {
+        useSearch: false,
+        useChip: false,
+        useSpacing: false,
+        ...props.filtersProps
+      }
+    }
+  }
+
+  return component.true
+})
+
+const hasActionsSection = computed(() => {
+  return !!slots.actions || hasDefaultButton.value || hasDefaultActionsMenu.value || hasDefaultFilters.value
+})
+
 const hasBadges = computed(() => !!props.badges.length)
 const hasLabel = computed(() => !!Object.keys(props.labelProps).length)
 const hasDefaultButton = computed(() => !!Object.keys(props.buttonProps).length)
+const hasDefaultFilters = computed(() => !!Object.keys(props.filtersProps).length)
 const hasDefaultActionsMenu = computed(() => !!Object.keys(props.actionsMenuProps).length)
 const hasDescriptionSection = computed(() => props.description || slots.description)
 const hasLabelSection = computed(() => hasLabel.value || slots.label || hasBadges.value)

package/src/components/header/QasHeader.yml

@@ -23,6 +23,11 @@ props:
     desc: Descrição da seção a esquerda.
     type: String
 
+  filters-props:
+    desc: Propriedades do QasFilters.
+    default: {}
+    type: Object
+
   label-props:
     desc: Propriedades repassadas para o componente QasLabel.
     type: Object

package/src/components/list-items/QasListItems.vue

@@ -4,7 +4,18 @@
       <q-item v-for="(item, index) in props.list" :key="index" :clickable="props.useClickableItem" @click="onClick({ item, index }, true)">
         <slot :index="index" :item="item" name="item">
           <q-item-section>
-            <slot :index="index" :item="item" name="item-section" />
+            <slot :index="index" :item="item" name="item-section">
+              <qas-label
+                v-if="item[props.labelKey]"
+                :label="item[props.labelKey]"
+                :margin="getLabelMargin(item)"
+                typography="h5"
+              />
+
+              <div v-if="item[props.descriptionKey]" class="text-body1">
+                {{ item[props.descriptionKey] }}
+              </div>
+            </slot>
           </q-item-section>
 
           <q-item-section v-if="props.useSectionActions" side>
@@ -26,11 +37,21 @@ import { computed } from 'vue'
 defineOptions({ name: 'QasListItems' })
 
 const props = defineProps({
+  descriptionKey: {
+    type: String,
+    default: 'description'
+  },
+
   icon: {
     type: String,
     default: 'sym_r_chevron_right'
   },
 
+  labelKey: {
+    type: String,
+    default: 'label'
+  },
+
   list: {
     default: () => [],
     type: Array
@@ -57,17 +78,20 @@ const classes = computed(() => ({ 'qas-list-items--no-click': !props.useClickabl
 
 const component = computed(() => props.useBox ? 'qas-box' : 'div')
 
+// functions
 function onClick ({ item, index }, fromItem) {
   /**
    * se o click veio do q-item e "useClickableItem" for "false", ou
    * se o click não veio do q-item e "useClickableItem" for "true", então retorna sem emitir.
    */
-  if (
-    (fromItem && !props.useClickableItem) || (!fromItem && props.useClickableItem)
-  ) return
+  if ((fromItem && !props.useClickableItem) || (!fromItem && props.useClickableItem)) return
 
   emit('click-item', { item, index })
 }
+
+function getLabelMargin (item) {
+  return item[props.descriptionKey] ? 'xs' : 'none'
+}
 </script>
 
 <style lang="scss">

package/src/components/list-items/QasListItems.yml

@@ -4,11 +4,21 @@ meta:
   desc: Componente para listagem.
 
 props:
+  description-key:
+    desc: Chave para acessar a descrição do item.
+    default: description
+    type: String
+
   icon:
     desc: Nome do ícone
     default: sym_r_chevron_right
     type: String
 
+  label-key:
+    desc: Chave para acessar o label do item.
+    default: label
+    type: String
+
   list:
     desc: Lista para ser selecionada.
     default: []

package/src/components/list-view/QasListView.vue

@@ -12,6 +12,10 @@
       <main class="relative-position">
         <div v-if="showResults">
           <slot />
+
+          <q-inner-loading :showing="mx_isFetching">
+            <q-spinner color="grey" size="3em" />
+          </q-inner-loading>
         </div>
 
         <div v-else-if="!mx_isFetching">
@@ -29,10 +33,6 @@
         <div v-if="hasPages" class="flex items-center q-mt-md" :class="paginationClasses">
           <qas-pagination v-model="page" :max="totalPages" @click="changePage" />
         </div>
-
-        <q-inner-loading :showing="hasResults && mx_isFetching">
-          <q-spinner color="grey" size="3em" />
-        </q-inner-loading>
       </main>
     </q-pull-to-refresh>
 

package/src/components/table-generator/QasTableGenerator.vue

@@ -4,7 +4,7 @@
       <qas-header v-if="hasHeaderProps" v-bind="headerProps" />
     </slot>
 
-    <q-table ref="table" class="bg-white qas-table-generator text-grey-8" v-bind="attributes">
+    <q-table v-show="hasResults" ref="table" class="bg-white qas-table-generator text-grey-8" v-bind="attributes">
       <template v-for="(_, name) in slots" #[name]="context">
         <slot :name="name" v-bind="context" />
       </template>
@@ -19,6 +19,8 @@
         </q-td>
       </template>
     </q-table>
+
+    <qas-empty-result-text v-if="!hasResults" />
   </component>
 </template>
 
@@ -130,6 +132,10 @@ export default {
       return !!this.$slots['body-cell']
     },
 
+    hasResults () {
+      return !!this.resultsByFields.length
+    },
+
     attributes () {
       const attributes = {
         class: this.tableClass,

package/src/components/text-truncate/QasTextTruncate.vue

@@ -148,7 +148,7 @@ function useDialog ({ props, textContent }) {
     }
   })
 
-  // methods
+  // functions
   function toggle () {
     show.value = !show.value
   }
@@ -170,7 +170,7 @@ function useMutationObserver ({ truncate, callbackFn = () => {} }) {
   onMounted(() => observeContentChange())
   onUnmounted(() => observer.value.disconnect())
 
-  // methods
+  // functions
   function observeContentChange () {
     const config = { childList: true, subtree: true, characterData: true }
 
@@ -197,7 +197,7 @@ function useTruncate ({ parent, props }) {
   // computed
   const isTruncated = computed(() => textWidth.value > maxPossibleWidth.value)
 
-  // methods
+  // functions
   function truncateText () {
     parent.value.style.maxWidth = '100%'
     textWidth.value = truncate.value.clientWidth