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

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

@@ -5,29 +5,49 @@
     </slot>
 
     <q-table v-show="hasResults" ref="table" v-bind="attributes" v-model:selected="selectedModel" class="bg-white text-grey-8">
-      <template v-for="(_, name) in slots" #[name]="context">
-        <slot :name="name" v-bind="context" />
+      <template v-if="skeleton" #header-cell="props">
+        <q-th :props="props">
+          <qas-skeleton v-bind="getThSkeletonProps()" />
+        </q-th>
+      </template>
+
+      <template v-for="(column, index) in columnsWithTooltip" :key="index" #[`header-cell-${column.name}`]="context">
+        <q-th :props="context">
+          {{ context.col.label }}
+
+          <qas-tip class="q-pl-xs" :text="column.tooltip" />
+        </q-th>
       </template>
 
       <!-- Necessário para sobrescrever o QCheckbox e usar o QasCheckbox. -->
       <template #header-selection="props">
-        <div class="qas-table-generator__cancel-mouse-target" data-table-ignore-tr-hover>
+        <qas-skeleton v-if="skeleton" type="QasCheckbox" />
+
+        <div v-else class="qas-table-generator__cancel-mouse-target" data-table-ignore-tr-hover>
           <qas-checkbox v-model="props.selected" />
         </div>
       </template>
 
       <!-- Necessário para sobrescrever o QCheckbox e usar o QasCheckbox. -->
       <template #body-selection="props">
-        <div class="qas-table-generator__cancel-mouse-target" data-table-ignore-tr-hover>
+        <qas-skeleton v-if="skeleton" type="QasCheckbox" />
+
+        <div v-else class="qas-table-generator__cancel-mouse-target" data-table-ignore-tr-hover>
           <qas-checkbox v-model="props.selected" />
         </div>
       </template>
 
+      <template v-for="(_, name) in slots" #[name]="context">
+        <slot :name="name" v-bind="context" />
+      </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)">
+          <qas-skeleton v-if="skeleton" v-bind="getTgSkeletonProps(fieldName, context.row)" />
+
+          <component :is="tdChildComponent(context.row)" v-else class="qas-table-generator__td-item" v-bind="getTdChildComponentProps(context.row)">
             <slot :name="`body-cell-${fieldName}`" v-bind="context || {}">
-              <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" />
+              <pv-table-generator-td v-if="getFieldsProps(context.row, context.rowIndex)[fieldName]" :component-data="getFieldsProps(context.row, context.rowIndex)[fieldName]" :label="normalizedFields[fieldName]?.label" :name="fieldName" :row="context.row" />
 
               <template v-else>
                 {{ context.row?.[fieldName] }}
@@ -36,14 +56,6 @@
           </component>
         </q-td>
       </template>
-
-      <template v-for="(column, index) in columnsWithTooltip" :key="index" #[`header-cell-${column.name}`]="context">
-        <q-th :props="context">
-          {{ context.col.label }}
-
-          <qas-tip class="q-pl-xs" :text="column.tooltip" />
-        </q-th>
-      </template>
     </q-table>
 
     <qas-empty-result-text v-if="!hasResults" />
@@ -57,6 +69,7 @@ import QasCheckbox from '../checkbox/QasCheckbox.vue'
 import QasEmptyResultText from '../empty-result-text/QasEmptyResultText.vue'
 import QasHeader from '../header/QasHeader.vue'
 import QasTip from '../tip/QasTip.vue'
+import QasSkeleton from '../skeleton/QasSkeleton.vue'
 
 import { isEmpty, humanize, setScrollOnGrab, setScrollGradient } from '../../helpers'
 
@@ -71,16 +84,26 @@ export default {
     QasEmptyResultText,
     QasHeader,
     QasCheckbox,
-    QasTip
+    QasTip,
+    QasSkeleton
   },
 
   provide () {
     return {
+      isTableGenerator: true,
+
       /**
        * @see QasBtn.vue - Injetando os valores padrões para o QasBtn.
        */
       btnPropsDefaults: {
         size: 'sm'
+      },
+
+      /**
+       * @see QasTextTruncate.vue - Injetando os valores padrões para o QasTextTruncate.
+       */
+      textTruncatePropsDefaults: {
+        typography: 'body2'
       }
     }
   },
@@ -142,6 +165,10 @@ export default {
       type: Array
     },
 
+    skeleton: {
+      type: Boolean
+    },
+
     useBox: {
       type: Boolean,
       default: true
@@ -190,10 +217,49 @@ export default {
   },
 
   computed: {
-    tdChildComponent () {
-      if (this.useExternalLink) return 'a'
+    normalizedFields () {
+      if (this.skeleton) {
+        const fields = {}
+
+        this.normalizedColumns.forEach(column => {
+          const columnName = column?.name || column
+
+          fields[columnName] = {
+            name: columnName,
+            label: columnName.charAt(0).toUpperCase() + columnName.slice(1),
+            type: 'text'
+          }
+        })
+
+        return fields
+      }
+
+      return this.fields
+    },
+
+    /**
+     * Caso esteja em skeleton, retorna uma lista de resultados vazios com a mesma estrutura das colunas.
+     * Isso é necessário para que o QasTableGenerator renderize as linhas de skeleton corretamente.
+     * Cada resultado terá chaves correspondentes aos nomes das colunas, todas com valores vazios.
+     */
+    normalizedResults () {
+      if (this.skeleton) {
+        return Array.from({ length: 24 }).map(() => {
+          const result = {}
+
+          this.normalizedColumns.forEach(column => {
+            const columnName = column?.name || column
 
-      return this.rowRouteFn ? 'router-link' : 'span'
+            result[columnName] = ''
+          })
+
+          result.default = result
+
+          return result
+        })
+      }
+
+      return this.results
     },
 
     bodyCellNameSlots () {
@@ -201,7 +267,7 @@ export default {
 
       return this.normalizedColumns.length
         ? this.normalizedColumns.map(column => typeof column === 'object' ? column.name : column)
-        : Object.keys(this.fields)
+        : Object.keys(this.normalizedFields)
     },
 
     slots () {
@@ -273,8 +339,8 @@ export default {
 
       // Automatic columns.
       if (!this.normalizedColumns.length) {
-        for (const index in this.fields) {
-          columnByField(this.fields[index])
+        for (const index in this.normalizedFields) {
+          columnByField(this.normalizedFields[index])
         }
 
         return columns
@@ -284,9 +350,9 @@ export default {
       this.normalizedColumns.forEach(column => {
         if (column instanceof Object) {
           // repassa as props e mergeia com as do field
-          columnByField({ ...column, ...this.fields[column.name] })
-        } else if (this.fields[column]) {
-          columnByField(this.fields[column])
+          columnByField({ ...column, ...this.normalizedFields[column.name] })
+        } else if (this.normalizedFields[column]) {
+          columnByField(this.normalizedFields[column])
         }
       })
 
@@ -305,17 +371,23 @@ export default {
     },
 
     columnsWithTooltip () {
+      // quando estiver em skeleton, não precisa processar as colunas com tooltip
+      if (this.skeleton) return []
+
       return this.normalizedColumns.filter(column => column.tooltip)
     },
 
     hasFields () {
-      return Object.keys(this.fields).length
+      return Object.keys(this.normalizedFields).length
     },
 
     resultsByFields () {
-      if (!Object.keys(this.fields).length) return []
+      if (!Object.keys(this.normalizedFields).length) return []
 
-      const results = extend(true, [], this.results)
+      // Validação necessária para evitar processamento sem necessidade quando estiver em skeleton.
+      if (this.skeleton) return this.normalizedResults
+
+      const results = extend(true, [], this.normalizedResults)
 
       const mappedResults = results.map((result, index) => {
         for (const key in result) {
@@ -323,10 +395,10 @@ export default {
             continue
           }
 
-          const humanizedResult = humanize(this.fields[key], result[key])
+          const humanizedResult = humanize(this.normalizedFields[key], result[key])
           const formattedResult = isEmpty({ value: humanizedResult }) ? this.emptyResultText : humanizedResult
 
-          result.default = this.results[index]
+          result.default = this.normalizedResults[index]
           result[key] = formattedResult
         }
 
@@ -337,7 +409,7 @@ export default {
     },
 
     rowsPerPage () {
-      return this.results.length
+      return this.normalizedResults.length
     },
 
     tableClasses () {
@@ -498,18 +570,28 @@ export default {
       this.resizeObserver.unobserve(this.elementToObserve)
     },
 
-    getTdClasses (row) {
+    /**
+     * Valida se o valor retornado para a row é um route.
+     *
+     * @param {Object} row - Objeto referente ao row da tabela.
+     *
+     * @returns {boolean}
+     */
+    hasRowRoute (row) {
       const routePayload = this.rowRouteFn?.(row)
       const isRoutePayloadObject = typeof routePayload === 'object'
-      const hasRoutePayload = isRoutePayloadObject ? !!Object.keys(routePayload).length : !!routePayload
 
+      return isRoutePayloadObject ? !!Object.keys(routePayload).length : !!routePayload
+    },
+
+    getTdClasses (row) {
       return {
-        'qas-table-generator__td--has-action': this.hasRowClick || hasRoutePayload
+        'qas-table-generator__td--has-action': this.hasRowRoute(row)
       }
     },
 
     getTdChildComponentProps (row) {
-      if (!this.rowRouteFn) return
+      if (!this.hasRowRoute(row) || this.skeleton) return
 
       return {
         class: [
@@ -527,9 +609,17 @@ export default {
     },
 
     onRowClick () {
+      if (this.skeleton) return
+
       this.$attrs.onRowClick(...arguments)
     },
 
+    tdChildComponent (row) {
+      if (this.useExternalLink) return 'a'
+
+      return this.hasRowRoute(row) ? 'router-link' : 'span'
+    },
+
     getFieldsProps (row, index) {
       const isFieldsPropsFunction = typeof this.fieldsProps === 'function'
 
@@ -547,6 +637,62 @@ export default {
           }
         })
       }
+    },
+
+    /**
+     * Retorna propriedades para o componente QasSkeleton usado nas células do QasTableGenerator
+     *
+     * @param {string} column - nome da coluna
+     * @param {Object} row - dados da linha
+     */
+    getTgSkeletonProps (column, row) {
+      const normalizedFieldsProps = typeof this.fieldsProps === 'function'
+        ? this.fieldsProps(row)
+        : this.fieldsProps || {}
+
+      const columnFieldProps = normalizedFieldsProps[column]
+
+      const min = 100
+      const max = 160
+
+      // Gera uma largura aleatória entre min e max entre 100 e 160 pixels
+      const width = Math.floor(Math.random() * (max - min + 1)) + min
+
+      const isActions = column === 'actions'
+
+      // Define o tipo do skeleton baseado na configuração da coluna
+      const type = (
+        (isActions ? 'QasActionsMenu' : undefined) ||
+        columnFieldProps?.component ||
+        (this.useMultiline ? undefined : 'text')
+      )
+
+      return {
+        type,
+
+        // se for multiline e não for actions, define a altura do skeleton
+        height: this.useMultiline && !isActions ? '68px' : undefined,
+
+        // Define a largura do skeleton
+        width: columnFieldProps?.component || isActions ? undefined : `${width + 20}px`
+      }
+    },
+
+    /**
+     * Retorna propriedades para o componente QasSkeleton usado nos cabeçalhos do QasTableGenerator
+     */
+    getThSkeletonProps () {
+      const min = 60
+      const max = 120
+
+      // Gera uma largura aleatória entre min e max entre 60 e 120 pixels
+      const width = Math.floor(Math.random() * (max - min + 1)) + min
+
+      return {
+        type: 'text',
+        useContrast: true,
+        width: `${width}px`
+      }
     }
   }
 }
@@ -577,10 +723,11 @@ export default {
         }
       }
 
+      line-height: 100% !important;
       padding-bottom: var(--qas-spacing-sm);;
       padding-left: 0;
-      padding-top: 0;
       padding-right: var(--qas-spacing-md);
+      padding-top: 0;
     }
 
     td,
@@ -601,6 +748,10 @@ export default {
       z-index: 0;
       padding-right: var(--qas-spacing-md);
 
+      * {
+        line-height: 100% !important;
+      }
+
       &::before {
         position: absolute;
         content: '';

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

@@ -70,7 +70,7 @@ props:
   row-route-fn:
     desc: Usado quando há a necessidade de alteração de rota ao clicar em um item da tabela(a linha passa ser um <a> habilitando a opção de abrir em uma nova aba).
     type: Function
-    examples: ["(row) => ({ path: 'table-generator', params: { id: row.uuid } })"]
+    examples: ["row => ({ path: 'table-generator', params: { id: row.uuid } })", "row => undefined", "row => {}"]
 
   selected:
     desc: Usado como model das linhas selecionadas.
@@ -79,6 +79,11 @@ props:
     model: true
     examples: ["['uuid1', 'uuid2']"]
 
+  skeleton:
+    desc: Exibe um esqueleto de carregamento no lugar do conteúdo.
+    default: false
+    type: Boolean
+
   use-box:
     desc: Controla se o componente vai usar QasBox ou div.
     default: true

package/src/components/tabs-generator/QasTabsGenerator.vue

@@ -6,10 +6,16 @@
           <slot :item="tab" :name="`tab-after-${tab.value}`">
             <q-icon v-if="tab.icon" :name="tab.icon" size="sm" />
 
-            <qas-status v-if="tab.status" :color="tab.status" />
+            <div v-if="tab.status">
+              <qas-status :color="tab.status" />
+            </div>
+
+            <div class="flex items-center no-wrap q-ml-xs">
+              <span>
+                {{ getFormattedLabel(tab) }}
+              </span>
 
-            <div class="q-ml-xs">
-              {{ getFormattedLabel(tab) }}
+              <qas-skeleton v-if="props.skeleton && !tab.counter" class="q-ml-sm" height="22px" type="text" width="25px" />
             </div>
           </slot>
         </component>
@@ -20,6 +26,7 @@
 
 <script setup>
 import QasStatus from '../status/QasStatus.vue'
+import QasSkeleton from '../skeleton/QasSkeleton.vue'
 
 import { decimal } from '../../helpers'
 
@@ -35,6 +42,10 @@ const props = defineProps({
     type: Object
   },
 
+  skeleton: {
+    type: Boolean
+  },
+
   modelValue: {
     default: '',
     type: [String, Number]

package/src/components/tabs-generator/QasTabsGenerator.yml

@@ -13,7 +13,6 @@ props:
     type: Object
     examples: ["{ all: 24 }"]
 
-
   querySlug:
     desc: Nome da query string para alterar o model via URL, toda vez que a tab for alterada a query será atualizada e vice-versa.
     type: String
@@ -25,6 +24,11 @@ props:
     type: [String, Number]
     model: true
 
+  skeleton:
+    desc: Exibe um esqueleto de carregamento no lugar do conteúdo.
+    default: false
+    type: Boolean
+
   tabs:
     desc: Objeto ou Array contendo todas as tabs a serem geradas.
     default: {}

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

@@ -1,6 +1,6 @@
 <template>
   <div ref="parent" :class="classes">
-    <div class="no-wrap row text-no-wrap">
+    <div class="items-center no-wrap row text-no-wrap">
       <!-- "data-table-hover" habilita o hover no texto dentro do QasTableGenerator -->
       <div ref="truncate" class="ellipsis" data-table-hover>
         <slot>
@@ -19,8 +19,8 @@
       <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" max-width="500px" role="dialog" use-full-max-width>
-      <template v-if="isCounterMode" #description>
+    <qas-dialog v-model="show" v-bind="defaultProps" aria-label="Diálogo de texto completo" role="dialog" size="md">
+      <template v-if="showDescriptionSlot" #description>
         <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">
@@ -51,6 +51,8 @@ import {
   onMounted,
   onUnmounted,
   ref,
+  inject,
+  isRef,
   watch
 } from 'vue'
 
@@ -100,7 +102,7 @@ const props = defineProps({
 
   typography: {
     type: String,
-    default: 'body1'
+    default: undefined
   },
 
   list: {
@@ -108,6 +110,10 @@ const props = defineProps({
     default: () => []
   },
 
+  useAlwaysSeeMore: {
+    type: Boolean
+  },
+
   useBadge: {
     type: Boolean
   },
@@ -121,6 +127,9 @@ const props = defineProps({
   }
 })
 
+// globals
+const injectedDefaults = inject('textTruncatePropsDefaults', {}) // Inject reativo ou não reativo com fallback vazio
+
 // template refs
 const truncate = ref(null)
 const parent = ref(null)
@@ -142,6 +151,7 @@ const {
 const {
   defaultProps,
   dialogComponent,
+  hasDialogDescription,
   show,
   searchModel,
   toggle
@@ -158,30 +168,65 @@ const {
 useMutationObserver({ truncate, callbackFn: truncateText })
 
 // computeds
-const classes = computed(() => [`text-${props.color}`, `text-${props.typography}`])
+/**
+ * Seta os valores padrões, dando prioridade:
+ *  1. Props
+ *  2. Injetado (pode ser reativo ou não reativo)
+ *  3. Caso esteja dentro do QasBox, seta o size para 'sm' se for primary ou secondary.
+ *  4. Hardcoded (tertiary, md, primary)
+ */
+const textTruncatePropsDefaults = computed(() => {
+  const defaultProps = isRef(injectedDefaults) ? injectedDefaults.value : injectedDefaults
+
+  return {
+    typography: 'body1',
+    ...defaultProps
+  }
+})
+
+const defaultTypography = computed(() => props.typography || textTruncatePropsDefaults.value.typography)
+
+const classes = computed(() => [`text-${props.color}`, `text-${defaultTypography.value}`])
 
 const formattedText = computed(() => props.list.length || props.text ? displayText.value : props.emptyText)
 
+/**
+ * Se estiver em modo contador (list prop preenchida) e não houver descrição
+ * personalizada no diálogo, então mostra o slot de descrição.
+ */
+const showDescriptionSlot = computed(() => isCounterMode.value && !hasDialogDescription?.value)
+
 // composable functions
 function useDialog ({ props, textContent }) {
   // reactive vars
   const show = ref(false)
   const searchModel = ref([])
 
-  // computed
-  const description = computed(() => props.text || textContent.value)
+  // computeds
+  const hasDialogDescription = computed(() => !!props.dialogProps?.description)
+
+  const description = computed(() => {
+    // Se dialogProps.description estiver setado, usa ele
+    if (hasDialogDescription.value) {
+      return props.dialogProps.description
+    }
+
+    // Senão, usa o comportamento padrão
+    return props.text || textContent.value
+  })
 
   const defaultProps = computed(() => {
     return {
       cancel: false,
       ok: false,
 
+      useFullMaxWidth: true,
+      maxWidth: '500px',
+
       ...props.dialogProps,
 
-      card: {
-        title: props.dialogTitle,
-        description: description.value
-      }
+      title: props.dialogTitle,
+      description: description.value
     }
   })
 
@@ -218,6 +263,7 @@ function useDialog ({ props, textContent }) {
   return {
     defaultProps,
     dialogComponent,
+    hasDialogDescription,
 
     show,
     searchModel,
@@ -298,6 +344,9 @@ function useTemplate () {
   const isCounterMode = computed(() => !!props.list.length)
 
   const hasButton = computed(() => {
+    // Caso a propriedade useAlwaysSeeMore esteja ativa, sempre exibe o botão
+    if (props.useAlwaysSeeMore) return true
+
     return isCounterMode.value ? normalizedList.value.length > props.maxVisibleItem : isTruncated.value
   })
 
@@ -306,7 +355,7 @@ function useTemplate () {
   })
 
   const buttonLabel = computed(() => {
-    return isCounterMode.value ? counterLabel.value : props.seeMoreLabel
+    return isCounterMode.value && !props.useAlwaysSeeMore ? counterLabel.value : props.seeMoreLabel
   })
 
   return {

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

@@ -51,6 +51,11 @@ props:
     default: []
     type: Array
 
+  useAlwaysSeeMore:
+    desc: Sempre exibe o botão "ver mais", mesmo que o texto não esteja truncado.
+    default: false
+    type: Boolean
+
   use-badge:
     desc: Habilita badges para cada item da lista.
     default: false

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

@@ -1,5 +1,6 @@
 <template>
-  <div class="qas-toggle-visibility">
+  <!-- "data-no-grab" para prevenir o click drag  -->
+  <div class="qas-toggle-visibility" data-no-grab>
     <!-- "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">

package/src/components/tooltip/QasTooltip.vue

@@ -1,5 +1,5 @@
 <template>
-  <q-tooltip v-bind="tooltipProps" class="bg-grey-10 text-caption">
+  <q-tooltip v-if="!isDragging" v-bind="tooltipProps" class="bg-grey-10 text-caption">
     <qas-breakline :text="props.text" />
   </q-tooltip>
 </template>
@@ -7,6 +7,8 @@
 <script setup>
 import QasBreakline from '../breakline/QasBreakline.vue'
 
+import { inject, ref } from 'vue'
+
 defineOptions({ name: 'QasTooltip' })
 
 const props = defineProps({
@@ -16,6 +18,9 @@ const props = defineProps({
   }
 })
 
+// injects
+const isDragging = inject('isDragging', ref(false))
+
 // consts
 const tooltipProps = {
   anchor: 'center right',