@bildvitta/quasar-ui-asteroid 3.18.0-beta.3 → 3.18.0-beta.4

package/package.json

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

package/src/components/actions-menu/QasActionsMenu.vue

@@ -1,11 +1,12 @@
 <template>
   <div v-if="hasList" class="qas-actions-menu" data-cy="actions-menu">
-    <qas-btn-dropdown v-bind="btnDropdownProps">
-      <q-list data-cy="actions-menu-list">
+    <qas-btn-dropdown v-bind="btnDropdownProps" v-model:menu="menuModel">
+      <q-list v-if="hasDropdownLength" data-cy="actions-menu-list">
         <slot v-for="(item, key) in formattedList.dropdownList" :item="item" :name="key">
           <q-item v-bind="getItemProps(item)" :key="key" active-class="primary" clickable data-cy="actions-menu-list-item" @click="setClickHandler(item)">
             <q-item-section avatar>
-              <q-icon :name="item.icon" />
+              <q-spinner v-if="item.loading" size="sm" />
+              <q-icon v-else :name="item.icon" />
             </q-item-section>
 
             <q-item-section>
@@ -41,7 +42,7 @@ import useSingleSplitActions from './composables/use-single-split-actions'
 import getLabel from './utils/get-label'
 import setClickHandler from './utils/set-click-handler'
 
-import { computed, inject } from 'vue'
+import { computed, inject, ref, watch } from 'vue'
 
 const DEFAULT_COLOR = 'grey-10'
 const SPLIT_SIZE = 2
@@ -95,10 +96,15 @@ const props = defineProps({
   }
 })
 
+// refs
+const menuModel = ref(false)
+
+// composables
 const screen = useScreen()
 
 const { deleteBtnProps, hasDelete } = useDelete({ color: DEFAULT_COLOR, props, qas })
 
+// computeds
 const hasSplitName = computed(() => !!props.splitName)
 const hasList = computed(() => !!Object.keys(fullList.value).length)
 
@@ -157,11 +163,22 @@ const defaultButtonPropsList = computed(() => {
   return normalizedButtonPropsList
 })
 
+/**
+ * Procura se alguma ação está com "loading: true", para o dropdown não fechar
+ * automaticamente após clicar em alguma ação.
+ */
+const hasActiveLoading = computed(() => {
+  return Object.values(formattedList.value.dropdownList)?.some(action => action.loading)
+})
+
+const hasDropdownLength = computed(() => !!Object.keys(formattedList.value.dropdownList).length)
+
 const btnDropdownProps = computed(() => {
   return {
     buttonsPropsList: defaultButtonPropsList.value,
     disable: props.disable,
-    useSplit: hasSplit.value
+    useSplit: hasSplit.value,
+    useAutoClose: !hasActiveLoading.value
   }
 })
 
@@ -238,14 +255,22 @@ const formattedList = computed(() => {
 
 const { showTooltip, tooltipLabels } = useTooltips({ formattedList, fullList, props })
 
+watch(() => hasActiveLoading.value, handleMenuModel)
 // functions
 function getItemProps (item) {
-  const { disable, props: itemProps, to } = item
+  const { disable, loading, props: itemProps, to } = item
 
   return {
-    disable,
+    disable: disable || loading, // ficará desabilitado se for passado a prop "disable" ou o "loading" seja true.
     to,
     ...itemProps
   }
 }
+
+function handleMenuModel (newValue, oldValue) {
+  // Fecha o menu após o estado de loading do item passar de true para false
+  if (oldValue && !newValue) {
+    menuModel.value = false
+  }
+}
 </script>

package/src/components/btn/QasBtn.vue

@@ -1,11 +1,25 @@
 <template>
   <!-- "data-table-ignore-tr-hover" é para desabilitar o hover do tr no QasTableGenerator -->
   <q-btn ref="button" class="qas-btn" data-table-ignore-tr-hover v-bind="attributes">
-    <slot />
-
     <template v-for="(_, name) in nonDefaultSlots" #[name]="context">
       <slot :name="name" v-bind="context || {}" />
     </template>
+
+    <div class="items-center justify-center no-wrap row text-center" :class="containerClasses">
+      <q-spinner v-if="hasLeftSpinner" :class="iconClasses" size="sm" />
+
+      <q-icon v-if="hasIcon" :class="iconClasses" :name="props.icon" />
+
+      <div v-if="showLabel" :class="labelClasses">
+        {{ props.label }}
+      </div>
+
+      <q-spinner v-if="hasRightSpinner" :class="iconRightClasses" size="sm" />
+
+      <q-icon v-if="hasIconRight" :class="iconRightClasses" :name="props.iconRight" />
+    </div>
+
+    <slot />
   </q-btn>
 </template>
 
@@ -46,6 +60,10 @@ const props = defineProps({
     type: String
   },
 
+  loading: {
+    type: Boolean
+  },
+
   variant: {
     default: 'tertiary',
     type: String,
@@ -84,6 +102,18 @@ const hasIconOnly = computed(() => {
   )
 })
 
+const hasLeftSpinner = computed(() => props.loading && !props.iconRight)
+const hasRightSpinner = computed(() => props.loading && props.iconRight)
+
+const hasIconRight = computed(() => props.iconRight && !props.loading)
+const hasIcon = computed(() => props.icon && !props.loading)
+
+const labelClasses = computed(() => ({ ellipsis: props.useEllipsis }))
+const containerClasses = computed(() => ({ 'full-width': props.useEllipsis }))
+
+const iconClasses = computed(() => ({ 'on-left': !hasIconOnly.value }))
+const iconRightClasses = computed(() => ({ 'on-right': !hasIconOnly.value }))
+
 const classes = computed(() => {
   return {
     'qas-btn--primary': isPrimary.value,
@@ -104,17 +134,20 @@ const classes = computed(() => {
     'qas-btn--no-hover-on-white': !props.useHoverOnWhiteColor,
 
     // ellipsis
-    'qas-btn--ellipsis': props.useEllipsis
+    'full-width': props.useEllipsis
   }
 })
 
 const attributes = computed(() => {
   const {
+    class: externalClass,
     dense,
+    disable,
     fab,
     fabMini,
     flat,
     glossy,
+    loading,
     noWrap,
     outline,
     padding,
@@ -127,16 +160,12 @@ const attributes = computed(() => {
     stretch,
     textColor,
     unelevated,
-    class: externalClass,
     ...attributesPayload
   } = attrs
 
   return {
-    ...(showLabel.value && { label: props.label }),
-
     ...attributesPayload,
-    icon: props.icon,
-    iconRight: props.iconRight,
+    disable: disable || props.loading,
     class: [classes.value, externalClass]
   }
 })

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

@@ -4,7 +4,7 @@
       <div v-for="(buttonProps, key, index) in props.buttonsPropsList" :key="key">
         <div class="flex no-wrap">
           <qas-btn :disable="props.disable" v-bind="buttonProps" no-wrap variant="tertiary" @click="onClick">
-            <q-menu v-if="hasMenuOnLeftSide" v-model="isMenuOpened" anchor="bottom right" auto-close class="qas-menu" self="top right" @update:model-value="onUpdateMenuValue">
+            <q-menu v-if="hasMenuOnLeftSide" v-model="isMenuOpened" anchor="bottom right" :auto-close="props.useAutoClose" class="qas-menu" self="top right" @update:model-value="onUpdateMenuValue">
               <div :class="classes.menuContent">
                 <slot />
               </div>
@@ -20,7 +20,7 @@
 
     <div v-if="props.useSplit">
       <qas-btn v-bind="splittedButtonProps">
-        <q-menu v-if="hasDefaultSlot" anchor="bottom right" auto-close class="qas-menu" self="top right">
+        <q-menu v-if="hasDefaultSlot" v-model="isMenuOpened" anchor="bottom right" :auto-close="props.useAutoClose" class="qas-menu" self="top right" @update:model-value="onUpdateMenuValue">
           <div :class="classes.menuContent">
             <slot />
           </div>
@@ -70,6 +70,11 @@ const props = defineProps({
   useTooltip: {
     type: Boolean,
     default: true
+  },
+
+  useAutoClose: {
+    type: Boolean,
+    default: true
   }
 })
 

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

@@ -36,6 +36,11 @@ props:
     default: false
     type: Boolean
 
+  use-auto-close:
+    desc: Controla se o comportamento de click deve fechar o menu.
+    default: true
+    type: Boolean
+
 slots:
   default:
     desc: Slot para passar o conteúdo do dropdown (menu).

package/src/components/header/QasHeader.vue

@@ -20,7 +20,7 @@
       </div>
     </div>
 
-    <div class="items-start no-wrap q-col-gutter-sm row" :class="descriptionSectionClasses">
+    <div v-if="hasDescriptionOrOnlyActionsSection" class="items-start no-wrap q-col-gutter-sm row" :class="descriptionSectionClasses">
       <div v-if="hasDescriptionSection" class="text-body1 text-grey-8">
         <slot name="description">
           {{ props.description }}
@@ -147,6 +147,15 @@ 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 hasDescriptionSection = computed(() => !!props.description || !!slots.description)
 const hasLabelSection = computed(() => hasLabel.value || slots.label || hasBadges.value)
+
+/**
+ * Só exibo a seção de descrição com a seção de ações ao lado quando:
+ * - Tenha descrição;
+ * - OU não tenha seção da label E tenha componente de ações.
+ */
+const hasDescriptionOrOnlyActionsSection = computed(() => {
+  return hasDescriptionSection.value || (!hasLabelSection.value && hasActionsComponent.value)
+})
 </script>

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

@@ -9,16 +9,6 @@
         <slot :name="name" v-bind="context" />
       </template>
 
-      <template #header-cell="context">
-        <q-th v-if="context.col.label" :class="[context.col.headerClasses, context.col.__thClass]">
-          <qas-btn v-if="context.col.sortable" color="grey-10" icon-right="sym_r_swap_vert" :label="context.col.label" @click="$refs.table.sort(context.col)" />
-
-          <span v-else>
-            {{ context.col.label }}
-          </span>
-        </q-th>
-      </template>
-
       <template v-for="(fieldName, index) in bodyCellNameSlots" :key="index" #[`body-cell-${fieldName}`]="context">
         <q-td :class="getTdClasses(context.row)">
           <component :is="tdChildComponent" class="qas-table-generator__td-item" v-bind="getTdChildComponentProps(context.row)">
@@ -193,8 +183,6 @@ export default {
     },
 
     columnsByFields () {
-      const hasMultipleResults = this.rowsPerPage > 1
-
       if (!this.hasFields) {
         return this.normalizedColumns.filter(column => column instanceof Object)
       }
@@ -202,17 +190,13 @@ export default {
       const columns = []
 
       function columnByField (field) {
-        const { label, name, sortable, sort, rawSort } = field
+        const { label, name } = field
 
         columns.push({
           align: 'left',
           field: name,
           label,
-          name,
-          headerClasses: 'text-grey-10',
-          sortable: sortable ?? hasMultipleResults,
-          sort,
-          rawSort
+          name
         })
       }
 
@@ -504,6 +488,8 @@ export default {
       padding-bottom: var(--qas-spacing-sm);
       padding-left: 0;
       padding-top: var(--qas-spacing-sm);
+      position: relative;
+      z-index: 0;
 
       &:not(:last-child) {
         padding-right: var(--qas-spacing-md);
@@ -514,40 +500,33 @@ export default {
       }
 
       &::before {
-        display: none;
+        position: absolute;
+        content: '';
+        top: 0;
+        left: 0;
+        z-index: -1;
+        background-color: transparent;
       }
-    }
-
-    &__middle {
-      padding-left: var(--qas-spacing-md);
-      padding-right: var(--qas-spacing-md);
-    }
-
-    tr {
-      position: relative;
 
-      &::before {
-        background-color: transparent;
-        bottom: 0;
-        content: '';
+      &:first-child::before {
         left: calc(var(--qas-spacing-md) * -1);
-        pointer-events: none;
-        position: absolute;
+      }
+
+      &:last-child::before {
         right: calc(var(--qas-spacing-md) * -1);
-        top: 0;
-        transition: background-color var(--qas-generic-transition);
       }
     }
 
-    tbody tr {
-      &::before {
-        display: block;
-      }
+    tr:hover td::before {
+      background-color: var(--qas-background-color);
+    }
 
-      &:hover::before {
-        background-color: var(--qas-background-color);
-      }
+    &__middle {
+      padding-left: var(--qas-spacing-md);
+      padding-right: var(--qas-spacing-md);
+    }
 
+    tbody tr {
       /*
         A regra só é aplicada se nenhum elemento filho com o atributo "data-table-ignore-tr-hover"
         estiver também em estado de hover, impedindo que estilos conflitantes sejam aplicados.

package/src/components/table-generator/_components/PvTableGeneratorTd.vue

@@ -83,11 +83,23 @@ const component = computed(() => {
     }
   }
 
+  // Os componentes abaixo precisam adicionar o stopPropagation e preventDefault no click para nao chamar o rowClick ou rowRouteFn
+  const hasPreventEvent = ['QasActionsMenu', 'QasBtn'].includes(props.componentData.component)
+
   return {
     is: defineAsyncComponent(componentPaths[props.componentData.component].component),
     props: {
       ...componentPaths[props.componentData.component].props,
-      ...props.componentData.props
+      ...props.componentData.props,
+
+      ...(hasPreventEvent && {
+        onClick: event => {
+          event.stopPropagation()
+          event.preventDefault()
+
+          props.componentData.props?.onClick?.(event)
+        }
+      })
     }
   }
 })

package/src/css/components/button.scss

@@ -101,11 +101,13 @@
     }
   }
 
-  .q-icon.on-left {
+  .q-icon.on-left,
+  .q-spinner.on-left {
     margin-right: var(--qas-spacing-xs);
   }
 
-  .q-icon.on-right {
+  .q-icon.on-right,
+  .q-spinner.on-right {
     margin-left: var(--qas-spacing-xs);
   }