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

package/src/components/board-generator/QasBoardGenerator.yml

@@ -97,8 +97,8 @@ props:
     type: Number
     default: 12
 
-  use-mark-raw:
-    desc: Define se os valores dos itens das colunas irão ser atribuídos utilizando o "markRaw", onde somente a primeira camada do model será reativa. (https://vuejs.org/api/reactivity-advanced.html#markraw)
+  skeleton:
+    desc: Exibe o estado de esqueleto de carregamento das colunas. Enquanto `true`, cada coluna renderiza cards fictícios no lugar dos itens reais.
     type: Boolean
     default: true
 
@@ -115,6 +115,10 @@ props:
     default: "{ animation: 500, swapThreshold: 1, delay: 50, delayOnTouchOnly: true, emptyInsertThreshold: 0 }"
     debugger: true
 
+  use-confirm-dialog:
+    desc: Controla se o dialog de confirmação para o drag and drop será utilizado. Caso seja "true", o dialog é aberto utilizando as props passadas em "confirm-dialog-props" e as ações de confirmar e cancelar são feitas por padrão no componente. Caso seja "false", o drag and drop é realizado sem confirmação.
+    type: Boolean
+
   use-drag-and-drop-x:
     desc: Controla se irá ter drag and drop no eixo X (entre colunas).
     type: Boolean
@@ -150,11 +154,26 @@ slots:
   column-item:
     desc: Slot para acessar o item da coluna.
     scope:
+      column-index:
+        desc: Índice da coluna atual.
+        type: Number
+        default: 0
+
       fields:
         desc: Fields referente à coluna atual do template.
         type: Object
         default: {}
 
+      header:
+        desc: Informações do header da coluna atual.
+        type: Object
+        default: {}
+
+      is-updating-position:
+        desc: Indica se o item está sendo atualizado via drag-and-drop (aguardando retorno da API de update).
+        type: Boolean
+        default: false
+
       item:
         desc: Informações de cada item da coluna que foi buscado através da API.
         type: Object
@@ -219,3 +238,65 @@ methods:
 
   'fetchColumn: (header) => void':
     desc: Busca uma coluna específica com base no header fornecido.
+
+  'refreshColumn: (header) => void':
+    desc: Reinicia a paginação da coluna e refaz a busca, substituindo completamente os itens existentes.
+    params:
+      header:
+        desc: Header da coluna a ser recarregada (mesmo formato da prop `headers`).
+        type: Object
+        required: true
+
+  'removeItemFromList: ({ headerKey, itemId }) => void':
+    desc: Remove um item da lista de uma coluna localmente, sem realizar nenhuma requisição. Também decrementa o contador de paginação.
+    params:
+      headerKey:
+        desc: Chave identificadora da coluna de origem (valor correspondente à prop `column-id-key`).
+        type: String | Number
+        required: true
+      itemId:
+        desc: ID do item a ser removido (valor correspondente à prop `item-id-key`).
+        type: String | Number
+        required: true
+
+  'updateItemInList: ({ headerKey, itemId, updatedItem }) => void':
+    desc: Substitui os dados de um item existente em uma coluna localmente, sem realizar nenhuma requisição.
+    params:
+      headerKey:
+        desc: Chave identificadora da coluna (valor correspondente à prop `column-id-key`).
+        type: String | Number
+        required: true
+      itemId:
+        desc: ID do item a ser atualizado (valor correspondente à prop `item-id-key`).
+        type: String | Number
+        required: true
+      updatedItem:
+        desc: Dados atualizados que substituirão o item original.
+        type: Object
+        required: true
+
+  'refetchColumns: () => void':
+    desc: Alias de `fetchColumns`. Busca novamente todas as colunas com base nos headers fornecidos.
+
+  'transferItemToColumn: ({ itemId, fromColumnId, toColumnId, updatedItem? }) => void':
+    desc: |
+      Transfere um item de uma coluna para outra localmente, sem realizar nenhuma requisição.
+      O item é sempre inserido como primeiro elemento na coluna de destino.
+      Após a transferência, o SortableJS continua funcionando normalmente sobre os elementos do DOM atualizados pelo Vue.
+    params:
+      itemId:
+        desc: ID do item a ser movido (valor correspondente à prop `item-id-key`).
+        type: String | Number
+        required: true
+      fromColumnId:
+        desc: ID da coluna de origem (valor correspondente à prop `column-id-key`).
+        type: String | Number
+        required: true
+      toColumnId:
+        desc: ID da coluna de destino (valor correspondente à prop `column-id-key`).
+        type: String | Number
+        required: true
+      updatedItem:
+        desc: Dados atualizados do item. Quando informado, sobrescreve o item original na coluna de destino.
+        type: Object
+        required: false

package/src/components/board-generator/private/PvBoardGeneratorCardsContainer.vue

@@ -0,0 +1,25 @@
+<template>
+  <div ref="columnContainer">
+    <slot />
+  </div>
+</template>
+
+<script setup>
+import setScrollGradient from '../../../helpers/set-scroll-gradient'
+
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+
+defineOptions({ name: 'PvBoardGeneratorCardsContainer' })
+
+// refs
+const columnContainer = ref(null)
+
+// consts
+const { initializeScrollGradient, removeScrollGradient } = setScrollGradient({
+  styles: { gradientLevel: 2 }
+})
+
+// hooks
+onMounted(() => initializeScrollGradient(columnContainer.value))
+onBeforeUnmount(() => removeScrollGradient(columnContainer.value))
+</script>

package/src/components/box/QasBox.vue

@@ -1,14 +1,20 @@
 <template>
-  <div class="bg-white rounded-borders" :class="boxClasses">
-    <slot />
+  <div class="bg-white qas-box rounded-borders" :class="boxClasses">
+    <div ref="content" class="relative-position">
+      <slot />
+
+      <qas-skeleton v-if="props.skeleton" use-overlay />
+    </div>
   </div>
 </template>
 
 <script setup>
+import QasSkeleton from '../skeleton/QasSkeleton.vue'
+
 import { Spacing } from '../../enums/Spacing'
 import { useOverlayNavigation } from '../../composables'
 
-import { computed, provide } from 'vue'
+import { computed, provide, ref } from 'vue'
 
 defineOptions({ name: 'QasBox' })
 
@@ -23,6 +29,10 @@ const props = defineProps({
     default: undefined
   },
 
+  skeleton: {
+    type: Boolean
+  },
+
   spacingX: {
     default: Spacing.Md,
     type: String,
@@ -47,6 +57,9 @@ provide('isBox', true)
 // composables
 const { isOverlay } = useOverlayNavigation()
 
+// template refs
+const content = ref(null)
+
 // computed
 const defaultOutlined = computed(() => props.outlined ?? isOverlay)
 const defaultUnelevated = computed(() => props.unelevated ?? isOverlay)

package/src/components/box/QasBox.yml

@@ -12,6 +12,11 @@ props:
     desc: Remove a sombra do componente.
     type: Boolean
 
+  skeleton:
+    desc: Exibe um esqueleto de carregamento no lugar do conteúdo.
+    default: false
+    type: Boolean
+
   spacing-x:
     desc: Espaçamento horizontal do componente.
     type: String
@@ -27,3 +32,8 @@ props:
   use-spacing:
     desc: Controla espaçamento do componente.
     type: Boolean
+
+provide:
+  is-box:
+    desc: Identificador booleano que indica quando um componente está dentro do contexto de um QasBox.
+    type: Boolean

package/src/components/btn/QasBtn.vue

@@ -10,7 +10,7 @@
 
       <q-icon v-if="hasIcon" :class="iconClasses" :name="props.icon" />
 
-      <div v-if="showLabel" :class="labelClasses">
+      <div v-if="showLabel" class="qas-btn__label" :class="labelClasses">
         {{ props.label }}
       </div>
 
@@ -22,10 +22,13 @@
     <slot />
 
     <qas-tooltip v-if="hasTooltip" :text="tooltipText" />
+
+    <qas-skeleton v-if="props.skeleton" use-contrast use-overlay />
   </q-btn>
 </template>
 
 <script setup>
+import QasSkeleton from '../skeleton/QasSkeleton.vue'
 import QasTooltip from '../tooltip/QasTooltip.vue'
 
 import { useScreen } from '../../composables'
@@ -83,6 +86,10 @@ const props = defineProps({
     type: Boolean
   },
 
+  skeleton: {
+    type: Boolean
+  },
+
   variant: {
     default: undefined,
     type: String,
@@ -105,12 +112,17 @@ const props = defineProps({
   useHoverOnWhiteColor: {
     default: true,
     type: Boolean
+  },
+
+  useMagicAiColor: {
+    type: Boolean
   }
 })
 
 // globals
 const injectedDefaults = inject('btnPropsDefaults', {}) // Inject reativo ou não reativo com fallback vazio
 const isInsideBox = inject('isBox', false)
+const isInsideHeader = inject('isHeader', false)
 
 // composables
 const attrs = useAttrs()
@@ -121,9 +133,10 @@ const screen = useScreen()
 /**
  * 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)
+ *  2. Caso esteja dentro do QasHeader, seta o size para 'lg'.
+ *  3. Injetado (pode ser reativo ou não reativo)
+ *  4. Caso esteja dentro do QasBox, seta o size para 'sm' se for primary ou secondary.
+ *  5. Hardcoded (tertiary, lg, primary)
  */
 const btnPropsDefaults = computed(() => {
   const defaultProps = isRef(injectedDefaults) ? injectedDefaults.value : injectedDefaults
@@ -134,7 +147,10 @@ const btnPropsDefaults = computed(() => {
     size: isInsideBox && isSmallVariant ? 'sm' : 'lg',
     variant: 'tertiary',
     color: 'primary',
-    ...defaultProps
+    ...defaultProps,
+
+    // Header tem prioridade sobre o injetado
+    ...(isInsideHeader && { size: 'lg' })
   }
 })
 
@@ -177,6 +193,9 @@ const classes = computed(() => {
       'qas-btn--secondary': isSecondary.value,
       'qas-btn--tertiary': isTertiary.value,
 
+      // skeleton
+      'overflow-hidden': props.skeleton,
+
       // color
       [`qas-btn--tertiary-${defaultColor.value}`]: isTertiary.value,
       [`qas-btn--primary-${defaultColor.value}`]: isPrimary.value,
@@ -194,6 +213,9 @@ const classes = computed(() => {
       // loading
       'qas-btn--loading': props.loading,
 
+      // magic ai
+      'qas-btn--magic-ai': props.useMagicAiColor,
+
       // ellipsis
       'full-width': props.useEllipsis
     }

package/src/components/btn/QasBtn.yml

@@ -30,6 +30,11 @@ props:
     desc: Ícone a direita.
     type: String
 
+  skeleton:
+    desc: Exibe um esqueleto de carregamento no lugar do conteúdo.
+    default: false
+    type: Boolean
+
   size:
     desc: Tamanho do botão, podendo ser "sm", "md" ou "lg".
     default: lg
@@ -51,7 +56,6 @@ props:
     default: true
     type: Boolean
 
-
   label:
     desc: Rótulo do botão.
     type: String
@@ -60,6 +64,11 @@ props:
     desc: Texto do tooltip que aparecerá ao passar o mouse sobre o botão.
     type: String
 
+  use-magic-ai-color:
+    desc: Aplica o estilo de cores de inteligência artificial (magic AI) ao botão, usando um gradiente como cor principal. O comportamento varia conforme a variante do botão. Na variante "primary", o gradiente substitui a cor de fundo. Na "secondary", o gradiente é aplicado na cor do texto e na borda. Na "tertiary", o gradiente é aplicado apenas na cor do texto. O hover em todas as variantes utiliza a cor "$secondary-contrast".
+    default: false
+    type: Boolean
+
   variant:
     desc: Variantes do botão, que define para qual comportamento o botão será usado, podendo ser "primary", "secondary" ou "tertiary".
     default: tertiary

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

@@ -3,7 +3,7 @@
     <div v-if="hasButtons" :class="classes.list">
       <div v-for="(buttonProps, key, index) in props.buttonsPropsList" :key="key">
         <div class="flex no-wrap">
-          <qas-btn v-bind="buttonProps" :data-btn-dropdown="key" :disable="props.disable" no-wrap variant="tertiary" @click="onClick">
+          <qas-btn :data-btn-dropdown="key" :disable="props.disable" v-bind="getButtonProps(buttonProps)" no-wrap variant="tertiary" @click="onClick">
             <slot v-if="hasBtnContentSlot(key)" :name="`btn-content-${key}`" />
 
             <q-menu v-else-if="hasMenuOnLeftSide" v-model="isMenuOpened" anchor="bottom right" :auto-close="props.useAutoClose" class="qas-menu" self="top right" @update:model-value="onUpdateMenuValue">
@@ -63,6 +63,10 @@ const props = defineProps({
     type: Boolean
   },
 
+  skeleton: {
+    type: Boolean
+  },
+
   useMenuPadding: {
     type: Boolean
   },
@@ -117,6 +121,7 @@ const splittedButtonProps = computed(() => {
 
   return {
     color: 'grey-10',
+    skeleton: props.skeleton,
     disable: props.disable,
     [iconKey]: props.dropdownIcon,
     variant: 'tertiary',
@@ -148,6 +153,13 @@ function hasSeparator (index) {
 function hasBtnContentSlot (name) {
   return !!slots[`btn-content-${name}`]
 }
+
+function getButtonProps (buttonProps) {
+  return {
+    ...buttonProps,
+    skeleton: buttonProps.skeleton || props.skeleton
+  }
+}
 </script>
 
 <style lang="scss">

package/src/components/card/QasCard.vue

@@ -4,38 +4,62 @@
       <q-card class="column full-height overflow-hidden shadow-0">
         <header v-if="hasHeader" class="full-width items-center justify-between no-wrap q-mb-sm row">
           <slot name="header">
-            <div class="ellipsis flex no-wrap">
+            <div class="ellipsis flex full-width no-wrap">
               <slot v-if="props.useSelection" name="header-left">
-                <qas-checkbox v-model="selected" :false-value="props.falseValue" :true-value="props.trueValue" />
+                <qas-skeleton v-if="props.skeleton" class="q-mr-sm" type="QasCheckbox" />
+
+                <qas-checkbox v-else v-model="selected" :false-value="props.falseValue" :true-value="props.trueValue" />
               </slot>
 
-              <component :is="titleComponent.is" class="ellipsis text-h5 text-no-decoration" v-bind="titleComponent.props">
-                <slot name="title">
-                  {{ props.title }}
-                </slot>
+              <component :is="titleComponent.is" class="ellipsis full-width text-h5 text-no-decoration" v-bind="titleComponent.props">
+                <qas-skeleton v-if="props.skeleton" type="text" use-contrast />
+
+                <span v-else>
+                  <slot name="title">
+                    {{ props.title }}
+                  </slot>
 
-                <qas-tooltip v-if="props.tooltip" :text="props.tooltip" />
+                  <qas-tooltip v-if="props.tooltip" :text="props.tooltip" />
+                </span>
               </component>
             </div>
 
-            <qas-actions-menu v-if="hasActions" v-bind="formattedActionsMenuProps" />
+            <div v-if="hasActions">
+              <qas-skeleton v-if="props.skeleton" class="q-ml-sm" type="QasBtn" width="24px" />
+
+              <qas-actions-menu v-else v-bind="formattedActionsMenuProps" />
+            </div>
           </slot>
         </header>
 
-        <div class="qas-card__content" :class="contentClasses">
-          <slot name="default" />
+        <div class="qas-card__content relative-position" :class="contentClasses">
+          <qas-skeleton v-if="props.skeleton" height="100px" />
+
+          <slot v-else name="default" />
         </div>
 
-        <div class="q-mt-auto">
-          <q-separator v-if="hasFooter" class="q-mb-sm" />
+        <div class="full-width q-mt-auto">
+          <q-separator v-if="hasFooter" />
 
-          <slot name="footer">
-            <q-expansion-item v-if="hasExpansion" class="full-width" dense expand-icon-class="text-primary" header-class="q-pa-none text-primary" :label="props.expansionProps.label">
-              <slot name="expansion-content">
-                {{ props.expansionProps.content }}
-              </slot>
-            </q-expansion-item>
-          </slot>
+          <div v-if="hasExpansion">
+            <div v-if="props.skeleton" class="flex justify-between q-mt-sm">
+              <qas-skeleton type="text" use-contrast width="150px" />
+
+              <qas-skeleton size="24px" type="QasBtn" />
+            </div>
+
+            <slot v-else name="footer">
+              <q-expansion-item v-if="hasExpansion" class="full-width" dense expand-icon-class="text-grey-10" header-class="qas-card__expansion-header q-mt-sm q-pa-none" :label="props.expansionProps.label">
+                <div class="q-mt-xs">
+                  <q-separator vertical />
+
+                  <slot name="expansion-content">
+                    {{ props.expansionProps.content }}
+                  </slot>
+                </div>
+              </q-expansion-item>
+            </slot>
+          </div>
         </div>
       </q-card>
     </qas-box>
@@ -43,10 +67,12 @@
 </template>
 
 <script setup>
+import QasRouterLink from '../router-link/QasRouterLink.vue'
 import QasTooltip from '../tooltip/QasTooltip.vue'
 import QasActionsMenu from '../actions-menu/QasActionsMenu.vue'
 import QasCheckbox from '../checkbox/QasCheckbox.vue'
 import QasBox from '../box/QasBox.vue'
+import QasSkeleton from '../skeleton/QasSkeleton.vue'
 
 import { computed, useSlots, inject } from 'vue'
 import { colors } from 'quasar'
@@ -69,6 +95,15 @@ const props = defineProps({
     default: false
   },
 
+  gradientStatusColor: {
+    type: String,
+    default: ''
+  },
+
+  skeleton: {
+    type: Boolean
+  },
+
   route: {
     type: Object,
     default: () => ({})
@@ -94,6 +129,10 @@ const props = defineProps({
     default: true
   },
 
+  useOverlayRoute: {
+    type: Boolean
+  },
+
   useSelection: {
     type: Boolean
   }
@@ -135,14 +174,16 @@ const contentClasses = computed(() => hasFooter.value && 'q-mb-sm')
 const boxClasses = computed(() => props.statusColor ? 'rounded-borders-right' : 'rounded-borders')
 
 const titleComponent = computed(() => {
-  const hasRoute = !!Object.keys(props.route).length
+  const hasRoute = !!Object.keys(props.route).length && !props.skeleton
 
   return {
-    is: hasRoute ? 'router-link' : 'h5',
+    is: hasRoute ? QasRouterLink : 'h5',
+
     props: {
       ...(hasRoute && {
-        to: props.route,
-        class: 'qas-card__router'
+        route: props.route,
+        useOverlayRoute: props.useOverlayRoute,
+        title: props.title
       })
     }
   }
@@ -153,8 +194,14 @@ const style = computed(() => {
 
   const { getPaletteColor } = colors
 
+  const palletColor = getPaletteColor(props.statusColor)
+
   return {
-    borderLeft: `4px solid ${getPaletteColor(props.statusColor)} !important`
+    backgroundImage: props.gradientStatusColor
+      ? `linear-gradient(270deg, ${props.gradientStatusColor} 0%, #FFFFFF 60%) !important`
+      : undefined,
+
+    borderLeft: `4px solid ${palletColor} !important`
   }
 })
 
@@ -179,13 +226,38 @@ const formattedActionsMenuProps = computed(() => {
 
 <style lang="scss">
 .qas-card {
+  // $
+
   &__content {
     max-width: 100%;
   }
 
-  &__router {
+  .q-card {
+    background-color: transparent;
+  }
+
+  &__expansion-header {
+    transition: color var(--qas-generic-transition);
+
+    &.q-item {
+      min-height: auto !important;
+    }
+
+    // pega apenas o primeiro .q-item__label
+    .q-item__label:first-of-type {
+      @include set-typography($h6);
+    }
+
+    .q-expansion-item__toggle-icon {
+      font-size: 20px;
+    }
+
     &:hover {
       color: $primary;
+
+      .q-expansion-item__toggle-icon {
+        color: $primary;
+      }
     }
   }
 }

package/src/components/card/QasCard.yml

@@ -19,11 +19,21 @@ props:
     default: false
     type: [Boolean, String, Number, Array, Object]
 
+  skeleton:
+    desc: Exibe um esqueleto de carregamento no lugar do conteúdo.
+    default: false
+    type: Boolean
+
   route:
     desc: Rota que será utilizada ao clicar no título.
     default: {}
     type: Object
 
+  use-overlay-route:
+    desc: Quando verdadeiro, o clique no título abre a rota no overlay em vez de navegar normalmente. Ao abrir em uma nova guia, o comportamento padrão do `router-link` é mantido.
+    default: false
+    type: Boolean
+
   status-color:
     desc: Insere uma borda na esquerda para indicar o status do card.
     default: ''

package/src/components/card-image/QasCardImage.vue

@@ -15,11 +15,15 @@
             <slot name="carousel-header" />
           </div>
         </slot>
+
+        <qas-skeleton v-if="props.skeleton" use-overlay />
       </header>
 
       <q-card-section class="col-grow column full-width justify-between">
-        <div class="full-width" :class="gutterClass">
+        <div class="full-width relative-position" :class="gutterClass">
           <slot />
+
+          <qas-skeleton v-if="props.skeleton" use-overlay />
         </div>
       </q-card-section>
 
@@ -31,6 +35,7 @@
 </template>
 
 <script setup>
+import QasSkeleton from '../skeleton/QasSkeleton.vue'
 import QasBtn from '../btn/QasBtn.vue'
 
 import { Spacing } from '../../enums/Spacing'
@@ -64,6 +69,10 @@ const props = defineProps({
     type: Boolean
   },
 
+  skeleton: {
+    type: Boolean
+  },
+
   useHeader: {
     type: Boolean
   }

package/src/components/card-image/QasCardImage.yml

@@ -24,6 +24,11 @@ props:
     desc: Insere uma borda sólida em volta do componente.
     type: Boolean
 
+  skeleton:
+    desc: Exibe um esqueleto de carregamento no lugar do conteúdo.
+    default: false
+    type: Boolean
+
   unelevated:
     desc: Remove a sombra do componente.
     type: Boolean

package/src/components/chart-view/QasChartView.vue

@@ -15,14 +15,13 @@
         </slot>
       </div>
 
-      <q-inner-loading :showing="isFetching">
-        <q-spinner color="grey" size="3em" />
-      </q-inner-loading>
+      <qas-skeleton v-if="isFetching" use-overlay />
     </div>
   </component>
 </template>
 
 <script>
+import QasSkeleton from '../skeleton/QasSkeleton.vue'
 import QasBox from '../box/QasBox.vue'
 import QasEmptyResultText from '../empty-result-text/QasEmptyResultText.vue'
 import QasFilters from '../filters/QasFilters.vue'
@@ -74,6 +73,7 @@ export default {
     QasBox,
     QasEmptyResultText,
     QasFilters,
+    QasSkeleton,
     QasHeader
   },
 
@@ -339,6 +339,7 @@ export default {
       return {
         alignColumns: 'end',
         description: this.subtitle,
+        skeleton: this.isFetching,
         labelProps: {
           label: this.title
         }