@bildvitta/quasar-ui-asteroid 3.18.0-beta.1 → 3.18.0-beta.2

package/package.json

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

package/src/components/badge/QasBadge.vue

@@ -1,5 +1,6 @@
 <template>
-  <component :is="component.is" v-bind="component.props" class="q-px-sm qas-badge text-body2">
+  <!-- "data-table-ignore-hover" é para não habilitar hover no texto no QasTableGenerator -->
+  <component :is="component.is" v-bind="component.props" class="q-px-sm qas-badge text-body2" data-table-ignore-hover>
     <slot />
   </component>
 </template>

package/src/components/btn/QasBtn.vue

@@ -1,5 +1,6 @@
 <template>
-  <q-btn ref="button" class="qas-btn" v-bind="attributes">
+  <!-- "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">

package/src/components/copy/QasCopy.vue

@@ -1,6 +1,11 @@
 <template>
   <span>
-    <slot v-if="props.useText">{{ props.text }}</slot>
+    <!-- "data-table-hover" é para habilitar hover no texto no QasTableGenerator -->
+    <span data-table-hover>
+      <slot v-if="props.useText">
+        {{ props.text }}
+      </slot>
+    </span>
 
     <qas-btn class="q-ml-xs" color="primary" :icon="props.icon" :loading="isLoading" variant="tertiary" @click.stop.prevent="copy">
       <q-tooltip>Copiar</q-tooltip>

package/src/components/search-box/QasSearchBox.vue

@@ -58,11 +58,16 @@ export default {
       type: Object
     },
 
-    height: {
+    maxHeight: {
       default: '300px',
       type: String
     },
 
+    height: {
+      default: '',
+      type: String
+    },
+
     list: {
       default: () => [],
       type: Array
@@ -120,7 +125,11 @@ export default {
     },
 
     containerStyle () {
-      return { maxHeight: this.containerHeight }
+      return {
+        // Caso tenha height, deverá ter um tamanho fixo com base no height, portanto não terá max-height.
+        maxHeight: this.height ? 'auto' : this.containerHeight,
+        ...(this.height && { height: this.height })
+      }
     },
 
     hasNoOptionsOnFirstFetch () {
@@ -130,7 +139,7 @@ export default {
     containerHeight () {
       const hasEmptyList = (!this.list.length && !this.useLazyLoading) || this.hasNoOptionsOnFirstFetch
 
-      return hasEmptyList ? this.emptyListHeight : this.height
+      return hasEmptyList ? this.emptyListHeight : this.maxHeight
     },
 
     component () {

package/src/components/search-box/QasSearchBox.yml

@@ -33,7 +33,12 @@ props:
 
   height:
     desc: Define altura do box quando a lista não está vazia.
-    default: 300px
+    default: auto
+    type: String
+
+  maxHeight:
+    desc: Define altura máxima do box quando a lista não está vazia.
+    default: auto
     type: String
 
   lazy-loading-props:

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

@@ -1,19 +1,33 @@
 <template>
-  <component :is="parentComponent.is">
+  <component :is="parentComponent.is" class="qas-table-generator" :class="tableClasses">
     <slot name="parent-header">
       <qas-header v-if="hasHeaderProps" v-bind="headerProps" />
     </slot>
 
-    <q-table v-show="hasResults" ref="table" class="bg-white qas-table-generator text-grey-8" v-bind="attributes">
+    <q-table v-show="hasResults" ref="table" class="bg-white text-grey-8" v-bind="attributes">
       <template v-for="(_, name) in slots" #[name]="context">
         <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>
-          <component :is="tdChildComponent" v-bind="getTdChildComponentProps(context.row)">
+        <q-td :class="getTdClasses(context.row)">
+          <component :is="tdChildComponent" class="qas-table-generator__td-item" v-bind="getTdChildComponentProps(context.row)">
             <slot :name="`body-cell-${fieldName}`" v-bind="context || {}">
-              {{ context.row?.[fieldName] }}
+              <pv-table-generator-td v-if="getFieldsProps(context.row, context.rowIndex)[fieldName]" :component-data="getFieldsProps(context.row, context.rowIndex)[fieldName]" :label="fields[fieldName]?.label" :name="fieldName" :row="context.row" />
+
+              <template v-else>
+                {{ context.row?.[fieldName] }}
+              </template>
             </slot>
           </component>
         </q-td>
@@ -25,13 +39,24 @@
 </template>
 
 <script>
+import PvTableGeneratorTd from './_components/PvTableGeneratorTd.vue'
+
 import { extend } from 'quasar'
-import { isEmpty, humanize, setScrollOnGrab } from '../../helpers'
+import { isEmpty, humanize, setScrollOnGrab, setScrollGradient } from '../../helpers'
 
 export default {
   name: 'QasTableGenerator',
 
+  components: {
+    PvTableGeneratorTd
+  },
+
   props: {
+    actionsMenuProps: {
+      default: undefined,
+      type: Function
+    },
+
     columns: {
       default: () => [],
       type: Array
@@ -47,6 +72,11 @@ export default {
       type: [Array, Object]
     },
 
+    fieldsProps: {
+      default: () => ({}),
+      type: [Object, Function]
+    },
+
     headerProps: {
       default: () => ({}),
       type: Object
@@ -101,7 +131,8 @@ export default {
       scrollableElement: null,
       scrollOnGrab: {},
       elementToObserve: null,
-      resizeObserver: null
+      resizeObserver: null,
+      scrollGradientX: setScrollGradient({ orientation: 'x' })
     }
   },
 
@@ -115,8 +146,8 @@ export default {
     bodyCellNameSlots () {
       if (this.hasBodyCellSlot) return []
 
-      return this.columns.length
-        ? this.columns.map(column => typeof column === 'object' ? column.name : column)
+      return this.normalizedColumns.length
+        ? this.normalizedColumns.map(column => typeof column === 'object' ? column.name : column)
         : Object.keys(this.fields)
     },
 
@@ -145,7 +176,6 @@ export default {
         tableClass: {
           'overflow-hidden-y': !this.useStickyHeader && !this.useVirtualScroll
         },
-        class: this.tableClass,
         columns: this.columnsByFields,
         flat: true,
         hideBottom: true,
@@ -164,25 +194,28 @@ export default {
 
     columnsByFields () {
       if (!this.hasFields) {
-        return this.columns.filter(column => column instanceof Object)
+        return this.normalizedColumns.filter(column => column instanceof Object)
       }
 
       const columns = []
 
       function columnByField (field) {
-        const { align, label, name } = field
+        const { label, name, sortable, sort, rawSort } = field
 
         columns.push({
-          align: align || 'left',
+          align: 'left',
           field: name,
           label,
           name,
-          headerClasses: 'text-grey-10'
+          headerClasses: 'text-grey-10',
+          sortable: sortable ?? true,
+          sort,
+          rawSort
         })
       }
 
       // Automatic columns.
-      if (!this.columns.length) {
+      if (!this.normalizedColumns.length) {
         for (const index in this.fields) {
           columnByField(this.fields[index])
         }
@@ -191,9 +224,10 @@ export default {
       }
 
       // Sorting from the column list.
-      this.columns.forEach(column => {
+      this.normalizedColumns.forEach(column => {
         if (column instanceof Object) {
-          columnByField(column)
+          // repassa as props e mergeia com as do field
+          columnByField({ ...column, ...this.fields[column.name] })
         } else if (this.fields[column]) {
           columnByField(this.fields[column])
         }
@@ -202,6 +236,17 @@ export default {
       return columns
     },
 
+    hasActionsMenu () {
+      return typeof this.actionsMenuProps === 'function'
+    },
+
+    /**
+     * caso tenha a prop "actionsMenuProps" é adicionado automaticamente a coluna "actions" como ultimo item
+     */
+    normalizedColumns () {
+      return this.hasActionsMenu ? [...this.columns, { name: 'actions' }] : this.columns
+    },
+
     hasFields () {
       return Object.keys(this.fields).length
     },
@@ -230,10 +275,11 @@ export default {
       return this.results.length
     },
 
-    tableClass () {
+    tableClasses () {
       return {
         'qas-table-generator--mobile': this.$qas.screen.isSmall,
-        'qas-table-generator--sticky-header': this.useStickyHeader
+        'qas-table-generator--sticky-header': this.useStickyHeader,
+        'qas-table-generator--has-actions': this.hasActionsMenu
       }
     },
 
@@ -255,10 +301,24 @@ export default {
 
     hasHeaderProps () {
       return !!Object.keys(this.headerProps).length
+    },
+
+    hasAutoScrollY () {
+      return this.useStickyHeader || this.useVirtualScroll
+    },
+
+    hasRowClick () {
+      return typeof this.$attrs.onRowClick === 'function'
     }
   },
 
   mounted () {
+    if (!this.hasAutoScrollY) {
+      const scrollElement = this.getScrollElement()
+
+      this.scrollGradientX.initializeScrollGradient(scrollElement)
+    }
+
     if (!this.useScrollOnGrab) return
 
     this.setObserver()
@@ -266,6 +326,12 @@ export default {
   },
 
   onUnmounted () {
+    if (!this.hasAutoScrollY) {
+      const scrollElement = this.getScrollElement()
+
+      this.scrollGradientX.removeScrollGradient(scrollElement)
+    }
+
     if (!this.hasScrollOnGrab) return
 
     this.destroyObserver()
@@ -277,7 +343,7 @@ export default {
     initializeScrollOnGrab () {
       if (this.hasScrollOnGrab) return
 
-      const element = this.getTableElementComponent().querySelector('.q-table__middle.scroll')
+      const element = this.getScrollElement()
 
       this.scrollOnGrab = setScrollOnGrab(element)
     },
@@ -286,6 +352,10 @@ export default {
       return this.$refs?.table?.$el
     },
 
+    getScrollElement () {
+      return this.getTableElementComponent().querySelector('.q-table__middle.scroll')
+    },
+
     getTableElement () {
       return this.getTableElementComponent()?.querySelector('table')
     },
@@ -327,11 +397,29 @@ export default {
       this.resizeObserver.unobserve(this.elementToObserve)
     },
 
+    getTdClasses (row) {
+      const routePayload = this.rowRouteFn?.(row)
+      const isRoutePayloadObject = typeof routePayload === 'object'
+      const hasRoutePayload = isRoutePayloadObject ? !!Object.keys(routePayload).length : !!routePayload
+
+      return {
+        'qas-table-generator__td--has-action': this.hasRowClick || hasRoutePayload
+      }
+    },
+
     getTdChildComponentProps (row) {
       if (!this.rowRouteFn) return
 
       return {
-        class: 'text-no-decoration text-grey-8 flex full-width items-center full-height',
+        class: [
+          'text-no-decoration',
+          'text-grey-8',
+          'flex',
+          'full-width',
+          'items-center',
+          'full-height'
+        ],
+
         [this.useExternalLink ? 'href' : 'to']: this.rowRouteFn(row),
         ...(this.useExternalLink && { target: '_blank' })
       }
@@ -339,6 +427,25 @@ export default {
 
     onRowClick () {
       this.$attrs.onRowClick(...arguments)
+    },
+
+    getFieldsProps (row, index) {
+      const isFieldsPropsFunction = typeof this.fieldsProps === 'function'
+
+      return {
+        ...(isFieldsPropsFunction ? this.fieldsProps(row, index) : this.fieldsProps),
+
+        /**
+         * caso tenha a prop "actionsMenuProps" é adicionado automaticamente a prop "actionsMenuProps"
+         * dentro de "fieldsProps".
+         */
+        ...(this.hasActionsMenu && {
+          actions: {
+            component: 'QasActionsMenu',
+            props: this.actionsMenuProps?.(row, index)
+          }
+        })
+      }
     }
   }
 }
@@ -346,6 +453,8 @@ export default {
 
 <style lang="scss">
 .qas-table-generator {
+  $root: &;
+
   .q-table {
     thead tr {
       height: 24px;
@@ -354,8 +463,29 @@ export default {
     th {
       @include set-typography($subtitle1);
 
+      // altera o tamanho do ícone força o botão não quebrar.
+      .qas-btn {
+        .q-icon {
+          font-size: 18px !important;
+        }
+
+        .q-btn__content {
+          flex-wrap: nowrap;
+        }
+      }
+
       border: 0 !important;
-      padding: 0 calc(var(--qas-spacing-lg) / 2);
+      padding-bottom: 0;
+      padding-left: 0;
+      padding-top: 0;
+
+      &:not(:last-child) {
+        padding-right: var(--qas-spacing-md);
+      }
+
+      &:last-child {
+        padding-right: 0;
+      }
     }
 
     td,
@@ -369,28 +499,84 @@ export default {
       @include set-typography($body1);
 
       height: 40px;
-      padding-left: calc(var(--qas-spacing-lg) / 2);
-      padding-right: calc(var(--qas-spacing-lg) / 2);
+      padding-bottom: var(--qas-spacing-sm);
+      padding-left: 0;
+      padding-top: var(--qas-spacing-sm);
 
-      &:before {
-        transition: background-color var(--qas-generic-transition);
+      &:not(:last-child) {
+        padding-right: var(--qas-spacing-md);
+      }
+
+      &:last-child {
+        padding-right: 0;
+      }
+
+      &::before {
+        display: none;
       }
     }
 
+    &__middle {
+      padding-left: var(--qas-spacing-md);
+      padding-right: var(--qas-spacing-md);
+    }
+
     tr {
-      &:hover {
-        td:before {
-          background-color: var(--qas-background-color);
-        }
+      position: relative;
+
+      &::before {
+        background-color: transparent;
+        bottom: 0;
+        content: '';
+        left: calc(var(--qas-spacing-md) * -1);
+        pointer-events: none;
+        position: absolute;
+        right: calc(var(--qas-spacing-md) * -1);
+        top: 0;
+        transition: background-color var(--qas-generic-transition);
+      }
+    }
+
+    tbody tr {
+      &::before {
+        display: block;
       }
 
-      &:last-child td {
-        padding-bottom: 0;
+      &:hover::before {
+        background-color: var(--qas-background-color);
+      }
+
+      /*
+        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.
+        Especificamente, dentro da célula:
+        - Elementos que não possuem filhos com "data-table-ignore-tr-hover" ou "data-table-ignore-hover"
+          receberão a cor definida pela variável CSS "--q-primary-contrast".
+        - Elementos dentro de células marcadas como tendo ações ("qas-table-generator__td--has-action")
+          e também com o atributo "data-table-hover" serão estilizados da mesma maneira.
+      */
+      &:hover:not(:has(td *[data-table-ignore-tr-hover]:hover)) {
+        td:not(:has(*[data-table-ignore-tr-hover])):not(:has(*[data-table-ignore-hover])).qas-table-generator__td--has-action *,
+        td.qas-table-generator__td--has-action *[data-table-hover] {
+          color: var(--q-primary-contrast) !important;
+        }
       }
     }
 
     thead tr:hover {
-      background-color: white;
+      background-color: white !important;
+    }
+  }
+
+  .q-table__container {
+    margin-left: calc(var(--qas-spacing-md) * -1);
+    margin-right: calc(var(--qas-spacing-md) * -1);
+  }
+
+  &--has-actions {
+    td:last-child #{$root}__td-item {
+      display: flex;
+      justify-content: flex-end;
     }
   }
 

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

@@ -4,6 +4,18 @@ meta:
   desc: Componente para criação de tabela dinâmica usando o `QTable` do quasar.
 
 props:
+  actions-menu-props:
+    desc: Propriedades repassadas para o "QasActionsMenu" que adiciona uma coluna "actions" de forma automática.
+    default: undefined
+    type: Function
+    params:
+      row:
+        desc: Payload da linha da tabela.
+        type: Object
+      index:
+        desc: Índice da linha da tabela.
+        type: Number
+
   columns:
     desc: Colunas que vão ter na tabela.
     default: []
@@ -20,6 +32,19 @@ props:
     type: Object
     examples: ["{ email: { name: 'email', type: 'email', label: 'E-mail' } }"]
 
+  fields-props:
+    desc: Propriedade para controlar o uso de componentes dentro das row sem necessidade de abrir slot.
+    default: {}
+    type: [Object, Function]
+    examples: ["{ email: { component: 'QasCopy' } }"]
+    params:
+      row:
+        desc: Payload da linha da tabela.
+        type: Object
+      index:
+        desc: Índice da linha da tabela.
+        type: Number
+
   header-props:
     desc: Propriedades repassadas para o componente `QasHeader`.
     default: {}

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

@@ -0,0 +1,94 @@
+<template>
+  <component :is="component.is" v-bind="component.props" />
+</template>
+
+<script setup>
+import { computed, defineAsyncComponent } from 'vue'
+
+defineOptions({ name: 'PvTableGeneratorProps' })
+
+const props = defineProps({
+  componentData: {
+    type: Object,
+    default: () => ({})
+  },
+
+  label: {
+    type: String,
+    default: ''
+  },
+
+  row: {
+    type: Object,
+    default: () => ({})
+  },
+
+  name: {
+    type: String,
+    default: ''
+  }
+})
+
+const component = computed(() => {
+  const defaultValue = props.row?.[props.name]
+
+  const componentPaths = {
+    QasActionsMenu: {
+      component: () => import('../../actions-menu/QasActionsMenu.vue'),
+      props: {}
+    },
+
+    QasBadge: {
+      component: () => import('../../badge/QasBadge.vue'),
+      props: {
+        label: defaultValue
+      }
+    },
+
+    QasBtn: {
+      component: () => import('../../btn/QasBtn.vue'),
+      props: {
+        label: defaultValue
+      }
+    },
+
+    QasCopy: {
+      component: () => import('../../copy/QasCopy.vue'),
+      props: {
+        text: defaultValue
+      }
+    },
+
+    QasStatus: {
+      component: () => import('../../status/QasStatus.vue'),
+      props: {}
+    },
+
+    QasTextTruncate: {
+      component: () => import('../../text-truncate/QasTextTruncate.vue'),
+      props: {
+        dialogTitle: props.label,
+        maxWidth: 260,
+
+        // caso personalize o componente passando "list", não pode enviar "text" senão vai ter erro de tipo
+        text: props.componentData.props?.list?.length ? '' : defaultValue
+      }
+    },
+
+    QasToggleVisibility: {
+      component: () => import('../../toggle-visibility/QasToggleVisibility.vue'),
+      props: {
+        text: defaultValue
+      }
+    }
+  }
+
+  return {
+    is: defineAsyncComponent(componentPaths[props.componentData.component].component),
+    props: {
+      ...componentPaths[props.componentData.component].props,
+      ...props.componentData.props
+    }
+  }
+})
+</script>

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

@@ -1,7 +1,8 @@
 <template>
   <div ref="parent" :class="classes">
     <div class="no-wrap row text-no-wrap">
-      <div ref="truncate" class="ellipsis">
+      <!-- "data-table-hover" habilita o hover no texto dentro do QasTableGenerator -->
+      <div ref="truncate" class="ellipsis" data-table-hover>
         <slot>
           <div v-if="hasBadges" class="items-center q-col-gutter-sm row" :class="badgeParentClasses">
             <div v-for="(item, index) in normalizedBadgesList" :key="index">
@@ -15,20 +16,22 @@
         </slot>
       </div>
 
-      <qas-btn v-if="hasButton" class="q-ml-sm" :label="buttonLabel" @click.stop.prevent="toggle" />
+      <qas-btn v-if="hasButton" class="q-ml-xs" :label="buttonLabel" @click.stop.prevent="toggle" />
     </div>
 
-    <qas-dialog v-model="show" v-bind="defaultProps" aria-label="Diálogo de texto completo" role="dialog">
+    <qas-dialog v-model="show" v-bind="defaultProps" aria-label="Diálogo de texto completo" max-width="500px" role="dialog" use-full-max-width>
       <template v-if="isCounterMode" #description>
-        <div class="q-col-gutter-y-sm row">
-          <div
-            v-for="(item, index) in normalizedList"
-            :key="index"
-            class="col-12"
-          >
-            {{ item }}
-          </div>
-        </div>
+        <component :is="dialogComponent.is" v-bind="dialogComponent.props" v-model:results="searchModel">
+          <q-list separator>
+            <q-item v-for="(item, index) in dialogComponent.list" :key="index" class="q-px-none">
+              <q-item-section>
+                <div class="text-body1">
+                  {{ item }}
+                </div>
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </component>
       </template>
     </qas-dialog>
   </div>
@@ -135,7 +138,9 @@ const {
 
 const {
   defaultProps,
+  dialogComponent,
   show,
+  searchModel,
   toggle
 } = useDialog({ props, textContent })
 
@@ -158,6 +163,7 @@ const formattedText = computed(() => props.list.length || props.text ? displayTe
 function useDialog ({ props, textContent }) {
   // reactive vars
   const show = ref(false)
+  const searchModel = ref([])
 
   // computed
   const description = computed(() => props.text || textContent.value)
@@ -176,6 +182,31 @@ function useDialog ({ props, textContent }) {
     }
   })
 
+  const normalizedSearchModel = computed(() => {
+    return props.useObjectList ? searchModel.value.map(({ label }) => label) : searchModel.value
+  })
+
+  const dialogComponent = computed(() => {
+    const hasSearchBox = normalizedList.value.length > 12
+
+    if (hasSearchBox) {
+      return {
+        is: 'qas-search-box',
+        list: normalizedSearchModel.value,
+        props: {
+          height: '510px',
+          list: props.list,
+          ...(props.useObjectList && { fuseOptions: { keys: ['label'] } })
+        }
+      }
+    }
+
+    return {
+      is: 'div',
+      list: normalizedList.value
+    }
+  })
+
   // functions
   function toggle () {
     show.value = !show.value
@@ -183,8 +214,10 @@ function useDialog ({ props, textContent }) {
 
   return {
     defaultProps,
+    dialogComponent,
 
     show,
+    searchModel,
 
     toggle
   }

package/src/components/toggle-visibility/QasToggleVisibility.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="qas-toggle-visibility">
-    <div :aria-expanded="isVisible" aria-label="Alternar visibilidade do conteúdo" class="cursor-pointer items-center no-wrap qas-toggle-visibility__container row" role="button" :style @click.prevent.stop="toggleVisibility">
+    <!-- "data-table-ignore-tr-hover" é para desabilitar o hover do tr no QasTableGenerator -->
+    <div :aria-expanded="isVisible" aria-label="Alternar visibilidade do conteúdo" class="cursor-pointer items-center no-wrap qas-toggle-visibility__container row" data-table-ignore-tr-hover role="button" :style @click.prevent.stop="toggleVisibility">
       <div class="ellipsis qas-toggle-visibility__content">
         <div
           v-if="isVisible"