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

package/src/components/tree-generator/QasTreeGenerator.vue

@@ -186,9 +186,9 @@ export default {
 
     destroyDialogConfig () {
       return {
-        card: {
-          description: 'Todas as informações serão perdidas. Deseja realmente continuar?'
-        },
+        title: 'Excluir',
+        description: 'Todas as informações serão perdidas. Deseja realmente continuar?',
+        size: 'md',
         ok: {
           label: 'Excluir',
           onClick: this.destroy
@@ -201,9 +201,7 @@ export default {
 
     formDialogConfig () {
       return {
-        card: {
-          title: this.isAdd ? 'Adicionar ramo' : 'Editar ramo'
-        },
+        title: this.isAdd ? 'Adicionar ramo' : 'Editar ramo',
         ok: {
           label: 'Salvar',
           loading: this.isSubmitting

package/src/components/uploader/QasUploader.vue

@@ -52,7 +52,7 @@ import { getImageSize, getResizeDimensions } from '../../helpers/images.js'
 import { constructObject } from '../../helpers'
 
 import { uid, extend } from 'quasar'
-import { NotifyError } from '../../plugins'
+import NotifyError from '../../plugins/notify-error/NotifyError.js'
 
 import Pica from 'pica'
 
@@ -317,7 +317,17 @@ export default {
       } = this.$props
 
       return {
-        dialogProps,
+        dialogProps: {
+          title: 'Editar arquivo',
+
+          ok: {
+            label: 'Salvar',
+            ...dialogProps.ok
+          },
+
+          ...dialogProps
+        },
+
         fields,
         formGeneratorProps,
         galleryCardProps,

package/src/composables/private/use-view.js

@@ -1,4 +1,4 @@
-import { NotifyError } from '../../plugins'
+import NotifyError from '../../plugins/notify-error/NotifyError.js'
 import { camelizeFieldsName } from '../../helpers'
 
 import { useView as useViewComposable } from '@bildvitta/composables'

package/src/composables/use-overlay-navigation.js

@@ -17,22 +17,62 @@ const historyRoute = ref({
 const canLeaveOverlay = ref(true)
 
 /**
- * Definição de callbacks locais para esta instância.
- * Obs: são arrays para permitir múltiplos callbacks, ex se você usa "onCloseOverlay" em 2 componentes diferentes,
- * ambos serão executados.
+ * Cria o estado de callbacks para uma entidade (ou para o modo padrão sem entidade).
+ *
+ * Definição de callbacks para a entidade.
+ * Obs: são arrays para permitir múltiplos callbacks, ex se você usa "onCloseOverlay" em 2 componentes
+ * diferentes da mesma entidade, ambos serão executados.
+ * @private
  */
-const callbackFunctions = {
-  onCloseOverlay: [],
-  onExpandOverlay: [],
-  onHideOverlay: [],
-  onBackgroundChange: [],
-  onOverlayChange: []
+function createCallbackFunctionsByEntity () {
+  return {
+    onCloseOverlay: [],
+    onExpandOverlay: [],
+    onHideOverlay: [],
+    onBackgroundChange: [],
+    onOverlayChange: []
+  }
+}
+
+/**
+ * Registro de callbacks por entidade.
+ * A chave 'default' representa o modo padrão (sem entidade).
+ * @type {Map<string, ReturnType<typeof createCallbackFunctionsByEntity>>}
+ */
+const callbackFunctionsByEntity = new Map()
+
+/**
+ * Retorna (ou cria) o estado compartilhado para a entidade informada.
+ * @private
+ * @param {string|undefined} entity
+ */
+function getCallbackFunctionsByEntity (entity) {
+  const entityKey = entity ?? 'default'
+
+  if (!callbackFunctionsByEntity.has(entityKey)) {
+    callbackFunctionsByEntity.set(entityKey, createCallbackFunctionsByEntity())
+  }
+
+  return callbackFunctionsByEntity.get(entityKey)
 }
 
 /**
  * Composable para gerenciar navegação em overlays, sempre que for lidar com overlays utilize esse composable.
+ *
+ * @example
+ * Modo padrão — comportamento legado, estado global compartilhado
+ * const nav = useOverlayNavigation()
+ *
+ * Modo com entidade — página A e componente B compartilham 'activities', isolado de 'funnels'
+ * const nav = useOverlayNavigation('activities')
+ *
+ * @param {string} [entity] - Nome da entidade para isolar os callbacks.
+ * Quando informado, instâncias com a mesma entidade compartilham os callbacks entre si, mas são isoladas de
+ * instâncias com entidades diferentes.
  */
-export default function useOverlayNavigation () {
+export default function useOverlayNavigation (entity) {
+  const callbackFunctions = getCallbackFunctionsByEntity(entity)
+
   // composables
   const route = useRoute()
   const router = useRouter()
@@ -255,6 +295,71 @@ export default function useOverlayNavigation () {
     callbackFunctions[callbackName].forEach(fn => fn(payload))
   }
 
+  /**
+   * Remove listeners registrados no composable.
+   *
+   * @param {Function|Function[]|string} [target] - Função, array de funções, nome da entidade ou vazio para limpar
+   * a entidade `default`.
+   *
+   * @example
+   * ```js
+   * const { onCloseOverlay, removeListeners } = useOverlayNavigation('activities')
+   *
+   * function handleClose () { ... }
+   * onCloseOverlay(handleClose)
+   *
+   * removeListeners(handleClose) - Remove apenas handleClose da entidade atual
+   *
+   * removeListeners([handleClose, handleExpand]) - Remove handleClose e handleExpand da entidade atual
+   *
+   * removeListeners('activities') - Remove todas as funções registradas na entidade 'activities'
+   *
+   * removeListeners() - Remove todas as funções das instâncias sem entidade (entity 'default')
+   * ```
+   */
+  function removeListeners (target) {
+    // remove todos os callbacks da entidade 'default' (modo padrão sem entidade)
+    if (!target) {
+      const defaultCallbackFunctions = callbackFunctionsByEntity.get('default')
+
+      if (!defaultCallbackFunctions) return
+
+      for (const functionKey of Object.keys(defaultCallbackFunctions)) {
+        defaultCallbackFunctions[functionKey] = []
+      }
+
+      return
+    }
+
+    // Remove todos os callbacks de uma entidade pelo nome
+    if (typeof target === 'string') {
+      // Pego o estado da entidade informada.
+      const callbackFunctions = callbackFunctionsByEntity.get(target)
+
+      if (!callbackFunctions) return
+
+      // Reseto as funções de callback para a entidade, mantendo a estrutura mas limpando os arrays.
+      for (const functionKey of Object.keys(callbackFunctions)) {
+        callbackFunctions[functionKey] = []
+      }
+
+      return
+    }
+
+    // Normaliza para array e remove as funções da entidade atual
+    const functionsToRemove = Array.isArray(target) ? target : [target]
+
+    const callbackFunctionsKeys = Object.keys(callbackFunctions)
+
+    /**
+     * Percorro cada função de callback registrada na entidade atual e filtro as funções que devem ser removidas,
+     * mantendo as que não devem ser removidas.
+     */
+    for (const key of callbackFunctionsKeys) {
+      callbackFunctions[key] = callbackFunctions[key].filter(fn => !functionsToRemove.includes(fn))
+    }
+  }
+
   /**
    * Função para disparar mudanças no background componente.
    *
@@ -404,6 +509,7 @@ export default function useOverlayNavigation () {
     triggerOverlayChange,
     getNormalizedRoute,
     toggleCanLeaveOverlay,
+    removeListeners,
 
     // callbacks functions
     onBackgroundChange,

package/src/composables/use-screen.js

@@ -7,8 +7,12 @@ import { computed, reactive } from 'vue'
  *  isSmall: boolean,
  *  isMedium: boolean,
  *  isLarge: boolean,
+ *  isXLarge: boolean,
+ *  is2XLarge: boolean,
  *  untilMedium: boolean,
  *  untilLarge: boolean,
+ *  untilXLarge: boolean,
+ *  until2XLarge: boolean,
  *  isMobile: boolean
  * }}
  *
@@ -25,15 +29,27 @@ export default function () {
     // de 600 até 1023px
     isMedium: computed(() => Screen.sm),
 
-    // de 600 até 1023px
+    // Maior que 1023px
     isLarge: computed(() => Screen.gt.sm),
 
+    // Maior que 1439px
+    isXLarge: computed(() => Screen.gt.md),
+
+    // Maior que 1919px
+    is2XLarge: computed(() => Screen.gt.lg),
+
     // de 0 até 599px
     untilMedium: computed(() => Screen.lt.sm),
 
     // de 0 ate 1023px
     untilLarge: computed(() => Screen.lt.md),
 
+    // de 0 até 1439px
+    untilXLarge: computed(() => Screen.lt.lg),
+
+    // de 0 até 1919px
+    until2XLarge: computed(() => Screen.lt.xl),
+
     // Plataforma
     isMobile: computed(() => Platform.is.mobile || false)
   })

package/src/css/components/button.scss

@@ -14,7 +14,7 @@
     padding: var(--qas-spacing-xs) var(--qas-spacing-md) !important;
 
     .q-icon {
-      font-size: 18fpx !important;
+      font-size: 18px !important;
     }
 
     &.qas-btn--icon-only.qas-btn--primary,
@@ -24,8 +24,8 @@
     }
 
     &.qas-btn--icon-only.qas-btn--tertiary {
-      height: 16px !important;
-      width: 16px !important;
+      height: 18px !important;
+      width: 18px !important;
     }
   }
 
@@ -226,4 +226,83 @@
   .q-focus-helper {
     display: none;
   }
+
+  // Magic AI
+  &--magic-ai {
+    // CSS não suporta transição direta de gradient → cor sólida em background/background-clip.
+    // Para secondary/tertiary: transitamos -webkit-text-fill-color de transparent → cor sólida,
+    // deixando o gradient visível por baixo e criando um efeito de cross-fade.
+    &#{$root}--primary:not(:disabled) {
+      background: var(--qas-magic-ai-gradient);
+      background-size: 100%;
+      transition: background-size var(--qas-generic-transition);
+
+      &:hover {
+        background-size: 200%;
+      }
+
+    }
+
+    &#{$root}--secondary:not(:disabled) {
+      transition: color var(--qas-generic-transition);
+
+      .q-icon,
+      .qas-btn__label {
+        background: var(--qas-magic-ai-gradient) !important;
+        background-clip: text !important;
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        border: none !important;
+        transition: -webkit-text-fill-color var(--qas-generic-transition);
+      }
+
+      &::after {
+        background: var(--qas-magic-ai-gradient);
+        border-radius: inherit;
+        content: '';
+        inset: 0;
+        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+        mask-composite: exclude;
+        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+        -webkit-mask-composite: xor;
+        padding: 0;
+        pointer-events: none;
+        position: absolute;
+        transition: opacity var(--qas-generic-transition);
+      }
+
+      &:hover {
+        color: $deep-purple-6 !important;
+
+        .q-icon,
+        .qas-btn__label {
+          color: $deep-purple-6 !important;
+          -webkit-text-fill-color: $deep-purple-6 !important;
+        }
+
+        &::after {
+          opacity: 0;
+        }
+      }
+    }
+
+    &#{$root}--tertiary:not(:disabled) {
+      .q-icon,
+      .qas-btn__label {
+        background: var(--qas-magic-ai-gradient);
+        background-clip: text;
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        transition: -webkit-text-fill-color var(--qas-generic-transition);
+      }
+
+      &:hover {
+        .q-icon,
+        .qas-btn__label {
+          color: $deep-purple-6 !important;
+          -webkit-text-fill-color: $deep-purple-6 !important;
+        }
+      }
+    }
+  }
 }

package/src/css/components/item.scss

@@ -54,6 +54,12 @@
     display: none;
   }
 
+  &:not(.disabled):hover .text-magic-ai {
+    background: none !important;
+    color: $deep-purple-6 !important;
+    -webkit-text-fill-color: $deep-purple-6 !important;
+  }
+
   &__section--side {
     padding-right: var(--qas-spacing-sm);
   }

package/src/css/utils/background.scss

@@ -32,3 +32,8 @@
 .bg-position-top {
   background-position: top !important;
 }
+
+// Colors
+.bg-magic-ai {
+  background: var(--qas-magic-ai-gradient) !important;
+}

package/src/css/utils/border.scss

@@ -19,6 +19,12 @@
 @include set-border-color(secondary-contrast, $secondary-contrast);
 @include set-border-color('grey', $border-grey);
 
+.border-magic-ai {
+  border-style: solid !important;
+  border-width: 1px !important;
+  border-image: var(--qas-magic-ai-gradient) 1 !important;
+}
+
 // Direction
 .border-top {
   border-top-width: 1px !important;

package/src/css/utils/container.scss

@@ -36,9 +36,10 @@
 }
 
 /**
- * Adiciona padding no container para evitar que o botão do Gleap fique sobreposto ao conteúdo da página.
- * O Gleap é exibido em todas as páginas, então aplicamos o padding sempre que ele estiver presente.
+ * - Adiciona padding no ultimo container da pagina e no ultimo elemento do overlay para evitar que o botão do Gleap
+ * fique sobreposto ao conteúdo da página.
  */
-body:has(.bb-feedback-button) .container {
+body:has(.bb-feedback-button) .q-page > .container:last-child,
+body:has(.bb-feedback-button) .pv-layout-overlay-drawer__content > :last-child {
   padding-bottom: 80px;
 }

package/src/css/utils/text.scss

@@ -13,3 +13,12 @@
 .text-no-decoration {
   text-decoration: none !important;
 }
+
+// Colors
+.text-magic-ai {
+  background: var(--qas-magic-ai-gradient);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  color: transparent;
+}

package/src/helpers/copy-to-clipboard.js

@@ -1,5 +1,6 @@
 import { copyToClipboard } from 'quasar'
-import { NotifySuccess, NotifyError } from '../plugins'
+import NotifySuccess from '../plugins/notify-success/NotifySuccess.js'
+import NotifyError from '../plugins/notify-error/NotifyError.js'
 
 export default async (text, onLoading = () => {}) => {
   onLoading(true)

package/src/helpers/filters.js

@@ -160,7 +160,7 @@ function parseValue (value) {
   try { return JSON.parse(value) } catch { return value }
 }
 
-function booleanLabel (value, trueLabel = 'sim', falseLabel = 'não') {
+function booleanLabel (value, trueLabel = 'Sim', falseLabel = 'Não') {
   try { return JSON.parse(value) ? trueLabel : falseLabel } catch { return value }
 }
 

package/src/helpers/promise-handler.js

@@ -1,5 +1,6 @@
 import { Loading } from 'quasar'
-import { NotifySuccess, NotifyError } from '../plugins'
+import NotifySuccess from '../plugins/notify-success/NotifySuccess.js'
+import NotifyError from '../plugins/notify-error/NotifyError.js'
 
 /** Função para lidar com promises, por exemplo requests.
  *

package/src/helpers/set-scroll-gradient.js

@@ -5,6 +5,18 @@ import { convertToRgb } from './colors'
  * @typedef {'start'|'end'} Direction
  */
 
+/**
+ * Níveis de opacidade do gradiente.
+ * Nível 1: mais suave
+ * Nível 2: médio
+ * Nível 3: mais forte (padrão)
+ */
+const GRADIENT_LEVELS = {
+  1: { mid: 0.3, end: 0.5 },
+  2: { mid: 0.6, end: 0.8 },
+  3: { mid: 0.9, end: 1 }
+}
+
 /**
  * Helper para adicionar um gradiente de scroll em um elemento.
  *
@@ -12,17 +24,21 @@ import { convertToRgb } from './colors'
  * @param {object} config.styles
  * @param {string} config.styles.color - precisa ser uma cor RGB|HEX|RGBA
  * @param {string} config.styles.size - tamanho do gradient (mudar somente quando for necessário)
+ * @param {1|2|3} config.styles.gradientLevel - nível de intensidade do gradiente (1: suave, 2: médio, 3: forte). Default: 3
  * @param {'y'|'x'} config.orientation - direção do scroll (vertical ou horizontal)
  */
 export default function setScrollGradient (config = {}) {
   const { styles, orientation = 'y' } = config
-  const { color = '#FFFFFF', size = '40px' } = styles || {}
+  const { color = '#FFFFFF', size = '40px', gradientLevel = 3 } = styles || {}
 
   const { r, g, b } = convertToRgb(color) || {}
   const rgbParam = `${r}, ${g}, ${b}`
 
   const isVertical = orientation === 'y'
 
+  // obtém os valores de opacidade baseado no nível
+  const level = GRADIENT_LEVELS[gradientLevel] || GRADIENT_LEVELS[3]
+
   let uuid = ''
   let resizeObserver = null
 
@@ -77,7 +93,7 @@ export default function setScrollGradient (config = {}) {
   }
 
   /**
-   * mostra ou esconde o span do gradient.
+   * mostra ou esconde o span do gradient com animação.
    *
    * @param {Direction} direction
    * @param {boolean} show
@@ -87,7 +103,8 @@ export default function setScrollGradient (config = {}) {
 
     if (!span) return
 
-    span.style.display = show ? 'block' : 'none'
+    span.style.opacity = show ? '1' : '0'
+    span.style.visibility = show ? 'visible' : 'hidden'
   }
 
   /**
@@ -112,16 +129,19 @@ export default function setScrollGradient (config = {}) {
     Object.assign(span.style, {
       pointerEvents: 'none',
       height: isVertical ? size : '100%',
-      display: 'none',
+      display: 'block',
       position: 'absolute',
       width: isVertical ? '100%' : size,
       zIndex: 1,
+      opacity: '0',
+      visibility: 'hidden',
+      transition: 'opacity 0.3s ease-in-out, visibility 0.3s ease-in-out',
       backgroundImage: (
         `linear-gradient(
           to ${getDirection(direction)},
           rgba(${rgbParam}, 0) 0%,
-          rgba(${rgbParam}, 0.9) 51%,
-          rgb(${rgbParam}) 75%)`
+          rgba(${rgbParam}, ${level.mid}) 51%,
+          rgba(${rgbParam}, ${level.end}) 75%)`
       )
     })
 
@@ -154,13 +174,16 @@ export default function setScrollGradient (config = {}) {
     const elementRect = element.getBoundingClientRect()
     const parentRect = element.parentElement.getBoundingClientRect()
 
+    // pequena margem para garantir que o gradiente fique grudado ao elemento.
+    const safeArea = 1
+
     /**
      * diferença entre o bottom do pai e o bottom do filho, valor positivo significa
      * que há espaço livre abaixo do filho.
      */
     const distance = {
-      end: isVertical ? (parentRect.bottom - elementRect.bottom) : (parentRect.right - elementRect.right),
-      start: isVertical ? (elementRect.top - parentRect.top) : (elementRect.left - parentRect.left)
+      end: isVertical ? (parentRect.bottom - elementRect.bottom - safeArea) : (parentRect.right - elementRect.right - safeArea),
+      start: isVertical ? (elementRect.top - parentRect.top) - safeArea : (elementRect.left - parentRect.left) - safeArea
     }
 
     span.style[getDirection(direction)] = `${distance[direction]}px`

package/src/helpers/set-scroll-on-grab.js

@@ -49,10 +49,17 @@ export default function (element, options = {}, cancelMouseDownTarget) {
   function onMouseEnter (event) {
     /**
      * closest busca ancestral mais próximo de um elemento, ou seja, verifica se no event que recebo, tenho a classe no qual nao se deve aplicar o grab.
-     */
-    const targetElement = cancelMouseDownTarget ? event.target.closest(`.${cancelMouseDownTarget}`) : null
+    */
 
-    if (!!cancelMouseDownTarget && !!targetElement) return null
+    const elementListToCancel = ['button', '[data-no-grab]']
+
+    if (cancelMouseDownTarget) {
+      elementListToCancel.push(`.${cancelMouseDownTarget}`)
+    }
+
+    const canCancelMouseDownTarget = elementListToCancel.some(tag => event.target.closest(tag))
+
+    if (canCancelMouseDownTarget) return
 
     onEnter()
 

package/src/index.scss

@@ -13,6 +13,7 @@ $accent: var(--q-accent);
   --qas-border-grey: #{$grey-4};
   --qas-generic-border-radius: 4px;
   --qas-generic-transition: 300ms;
+  --qas-magic-ai-gradient: linear-gradient(90deg, #0F54AE 0%, #C51162 100%);
 }
 
 $background-color: var(--qas-background-color);

package/src/mixins/search-filter.js

@@ -86,6 +86,12 @@ export default {
       return !!this.mx_filteredOptions.length
     },
 
+    mx_hasNextPage () {
+      const { lastPage, page, hasCount, hasNextPage } = this.mx_pagination
+
+      return hasCount ? !!(lastPage && page <= lastPage) : hasNextPage
+    },
+
     mx_hasOptionsToExclude () {
       return !!this.optionsToExclude.length
     }
@@ -98,7 +104,7 @@ export default {
 
         this.mx_cachedOptions = []
 
-        this.mx_filterOptionsByStore('')
+        if (!this.disable) this.mx_filterOptionsByStore('')
 
         setTimeout(() => this.$emit('update:modelValue', undefined))
       }

package/src/plugins/delete/Delete.js

@@ -1,4 +1,6 @@
-import { Dialog, NotifySuccess, NotifyError } from 'asteroid'
+import Dialog from '../dialog/Dialog.js'
+import NotifySuccess from '../notify-success/NotifySuccess.js'
+import NotifyError from '../notify-error/NotifyError.js'
 import { getAction } from '@bildvitta/store-adapter'
 import { useHistory } from '../../composables'
 
@@ -19,16 +21,12 @@ export default function (config = {}) {
   const { entity, id, url } = deleteActionParams
 
   const defaultDialogProps = {
-    useForm: true,
+    useAutoCloseOnOk: false,
 
-    ...dialogProps,
-
-    card: {
-      title: 'Excluir',
-      description: 'Tem certeza que deseja excluir este item?',
+    title: 'Excluir',
+    description: 'Tem certeza que deseja excluir este item?',
 
-      ...dialogProps.card
-    },
+    ...dialogProps,
 
     ok: {
       label: 'Excluir',

package/src/plugins/delete/Delete.yml

@@ -3,7 +3,7 @@ type: component
 meta:
   desc: Plugin que implementa a action `destroy` do `StoreModule` adicionando comportamento de confirmação antes de excluir, este mesmo plugin é utilizado no componente `QasDelete`.
 
-inject:
+provide:
   'this.$qas.delete(config)':
     params:
       config:

package/src/plugins/dialog/Dialog.yml

@@ -3,7 +3,7 @@ type: component
 meta:
   desc: Plugin que implementa o `QasDialog`.
 
-inject:
+provide:
   'this.$qas.dialog(config)':
     params:
       config:

package/src/plugins/notify-error/NotifyError.yml

@@ -3,7 +3,7 @@ type: component
 meta:
   desc: Plugin que implementa o "QNotify" do quasar.
 
-inject:
+provide:
   'this.$qas.error(msg)':
     params:
       msg:

package/src/plugins/notify-success/NotifySuccess.yml

@@ -3,7 +3,7 @@ type: component
 meta:
   desc: Plugin que implementa o "QNotify" do quasar para notificações de sucesso.
 
-inject:
+provide:
   'this.$qas.success(msg)':
     params:
       msg: