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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bildvitta/quasar-ui-asteroid",
   "description": "Asteroid",
-  "version": "3.20.0-beta.2",
+  "version": "3.20.0-beta.20",
   "author": "Bild & Vitta <systemteam@bild.com.br>",
   "license": "MIT",
   "main": "./src/asteroid.js",
@@ -45,7 +45,7 @@
     "@bildvitta/composables": "^1.0.0-beta.7",
     "@bildvitta/store-adapter": "^1.0.0",
     "autonumeric": "4.10.9",
-    "axios": "^1.4.0",
+    "axios": "1.4.0",
     "date-fns": "^2.30.0",
     "pdfjs-dist": "4.3.136",
     "debug": "^4.3.4",
@@ -55,7 +55,7 @@
     "lodash-es": "^4.17.21",
     "pica": "^9.0.1",
     "signature_pad": "^4.1.5",
-    "sortablejs": "^1.15.3"
+    "sortablejs": "1.15.7"
   },
   "peerDependencies": {
     "@quasar/extras": "^1.16.0",

package/src/asteroid.js

@@ -4,7 +4,13 @@ export * from './helpers'
 export * from './mixins'
 export * from './vue-plugin'
 export * from './composables'
-export * from './plugins'
+
+// plugins
+export { default as Delete } from './plugins/delete/Delete.js'
+export { default as Dialog } from './plugins/dialog/Dialog.js'
+export { default as NotifyError } from './plugins/notify-error/NotifyError.js'
+export { default as NotifySuccess } from './plugins/notify-success/NotifySuccess.js'
+export { default as Screen } from './plugins/screen/Screen.js'
 
 // components
 export const QasActions = defineAsyncComponent(() => import('./components/actions/QasActions.vue'))
@@ -72,6 +78,7 @@ export const QasSignaturePad = defineAsyncComponent(() => import('./components/s
 export const QasSignatureUploader = defineAsyncComponent(() => import('./components/signature-uploader/QasSignatureUploader.vue'))
 export const QasSingleView = defineAsyncComponent(() => import('./components/single-view/QasSingleView.vue'))
 export const QasSortable = defineAsyncComponent(() => import('./components/sortable/QasSortable.vue'))
+export const QasSkeleton = defineAsyncComponent(() => import('./components/skeleton/QasSkeleton.vue'))
 export const QasStatus = defineAsyncComponent(() => import('./components/status/QasStatus.vue'))
 export const QasStepper = defineAsyncComponent(() => import('./components/stepper/QasStepper.vue'))
 export const QasStepperFormView = defineAsyncComponent(() => import('./components/stepper-form-view/QasStepperFormView.vue'))

package/src/components/actions/QasActions.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="q-mt-sm" :class="classes">
+  <div :class="classes">
     <div v-if="hasTertiaryButton" :class="columnClasses">
       <slot name="tertiary">
         <qas-btn v-bind="formattedButtonsProps.tertiary" class="full-width" />
@@ -24,6 +24,7 @@
 import useScreen from '../../composables/use-screen'
 import { FlexAlign } from '../../enums/Align'
 import { Spacing } from '../../enums/Spacing'
+import { gutterValidator } from '../../helpers/private/gutter-validator'
 
 import QasBtn from '../btn/QasBtn.vue'
 
@@ -41,7 +42,7 @@ const props = defineProps({
   gutter: {
     default: '',
     type: String,
-    validator: value => !value || Object.values(Spacing).includes(value)
+    validator: value => !value || gutterValidator(value)
   },
 
   primaryButtonProps: {
@@ -54,6 +55,12 @@ const props = defineProps({
     default: () => ({})
   },
 
+  spacingTop: {
+    type: String,
+    default: Spacing.Sm,
+    validator: value => Object.values(Spacing).includes(value)
+  },
+
   tertiaryButtonProps: {
     type: Object,
     default: () => ({})
@@ -81,6 +88,9 @@ const classes = computed(() => {
   return [
     !screen.isSmall && 'items-center',
 
+    // espaçamento superior
+    `q-mt-${props.spacingTop}`,
+
     // alinhamento
     `justify-${props.align}`,
 

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

@@ -6,11 +6,11 @@
           <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-spinner v-if="item.loading" size="sm" />
-              <q-icon v-else :name="item.icon" />
+              <q-icon v-else :class="getMagicAiClasses(item)" :name="item.icon" />
             </q-item-section>
 
             <q-item-section>
-              <q-item-label>
+              <q-item-label :class="getMagicAiClasses(item)">
                 {{ item.label }}
               </q-item-label>
             </q-item-section>
@@ -49,8 +49,6 @@ const SPLIT_SIZE = 2
 
 defineOptions({ name: 'QasActionsMenu' })
 
-const qas = inject('qas')
-
 const props = defineProps({
   buttonProps: {
     default: () => ({}),
@@ -81,6 +79,10 @@ const props = defineProps({
     type: Object
   },
 
+  skeleton: {
+    type: Boolean
+  },
+
   splitName: {
     default: '',
     type: String
@@ -100,6 +102,10 @@ const props = defineProps({
   }
 })
 
+// globals
+const qas = inject('qas')
+const isInsideTableGenerator = inject('isTableGenerator', false)
+
 // refs
 const menuModel = ref(false)
 
@@ -152,7 +158,9 @@ const primaryKey = computed(() => {
 const defaultButtonPropsList = computed(() => {
   const defaultButtonPropsList = {
     useHoverOnWhiteColor: true,
-    useLabelOnSmallScreen: false
+
+    // se estiver dentro do QasTableGenerator, sempre mostra o label.
+    useLabelOnSmallScreen: isInsideTableGenerator
   }
 
   const normalizedButtonPropsList = {}
@@ -181,6 +189,7 @@ const btnDropdownProps = computed(() => {
   return {
     buttonsPropsList: defaultButtonPropsList.value,
     disable: props.disable,
+    skeleton: props.skeleton,
     useSplit: hasSplit.value,
     useAutoClose: !hasActiveLoading.value
   }
@@ -277,6 +286,10 @@ function getItemProps (item) {
   }
 }
 
+function getMagicAiClasses ({ useMagicAiColor }) {
+  return { 'text-magic-ai': useMagicAiColor }
+}
+
 function handleMenuModel (newValue, oldValue) {
   // Fecha o menu após o estado de loading do item passar de true para false
   if (oldValue && !newValue) {

package/src/components/alert/QasAlert.vue

@@ -133,83 +133,108 @@ const component = computed(() => {
 })
 
 const textComponent = computed(() => {
-  // Regex para encontrar caracteres que estiverem dentro de [].
-  const regex = /\[.*?\]/g
-
-  const matches = props.text.match(regex) || []
+  // Configuração dos tokens suportados
+  const tokens = [
+    {
+      type: 'LINK',
+      regex: /\[(.*?)\]/g,
+      extractContent: match => match.replace(/\[(.*?)\]/, '$1'),
+      render: (content, index) => {
+        const isButtonPropsArray = Array.isArray(props.buttonProps)
+        const isRouterPropsArray = Array.isArray(props.routerLinkProps)
+
+        const buttonPropsForIndex = isButtonPropsArray
+          ? props.buttonProps[index]
+          : props.buttonProps
+
+        const routerLinkPropsForIndex = isRouterPropsArray
+          ? props.routerLinkProps[index]
+          : props.routerLinkProps
+
+        const hasButtonProps = buttonPropsForIndex && !!Object.keys(buttonPropsForIndex).length
+
+        if (hasButtonProps) {
+          return h(QasBtn, {
+            variant: 'tertiary',
+            label: content,
+            ...buttonPropsForIndex
+          })
+        }
+
+        return h(RouterLink, {
+          ...routerLinkPropsForIndex,
+          class: 'text-primary text-subtitle1 qas-alert__link'
+        }, {
+          default: () => content
+        })
+      }
+    },
+    {
+      type: 'BOLD',
+      regex: /\*\*(.*?)\*\*/g,
+      extractContent: match => match.replace(/\*\*(.*?)\*\*/, '$1'),
+      render: content => h('strong', { class: 'text-weight-bold' }, content)
+    }
+  ]
+
+  // Encontra todos os matches de todos os tipos de token
+  const allMatches = []
+
+  tokens.forEach(token => {
+    const matches = props.text.match(token.regex) || []
+
+    matches.forEach(match => {
+      allMatches.push({
+        type: token.type,
+        match,
+        content: token.extractContent(match),
+        render: token.render
+      })
+    })
+  })
 
-  if (!matches.length) return h('span', props.text)
+  // Se não há matches, retorna texto simples
+  if (!allMatches.length) {
+    return h('span', props.text)
+  }
 
   let processedText = props.text
 
-  /**
-   * Substitui cada match por um placeholder único na ordem correta
-   * Exemplo: "Clique [aqui] para [ver mais]" vira "Clique $0 para $1"
-   */
-  matches.forEach((match, index) => {
-    processedText = processedText.replace(match, `$${index}`)
+  // Substitui cada match por um placeholder único
+  allMatches.forEach((matchData, index) => {
+    processedText = processedText.replace(matchData.match, `$${matchData.type}_${index}`)
   })
 
-  // Divide o texto pelos placeholders
-  const parts = processedText.split(/\$\d+/)
-
-  const placeholders = processedText.match(/\$\d+/g) || []
-
+  // Separa o texto em partes
+  const parts = processedText.split(/(\$\w+_\d+)/)
   const result = []
 
-  parts.forEach((part, index) => {
-    if (part) result.push(part)
-
-    if (index < placeholders.length) {
-      // Pega o índice do placeholder para encontrar o match correto
-      const placeholderIndex = parseInt(placeholders[index].replace('$', ''))
-
-      // Pega o texto original do match. Ex: '[Clique aqui]'
-      const match = matches[placeholderIndex]
-
-      // Remove os colchetes do match. Ex: [Clique aqui] para Clique aqui
-      const routerLabel = match.replaceAll(/[[\]]/g, '')
-
-      // Determina as props do botão/link baseado no índice
-      const isButtonPropsArray = Array.isArray(props.buttonProps)
-      const isRouterPropsArray = Array.isArray(props.routerLinkProps)
-
-      const buttonPropsForIndex = isButtonPropsArray
-        ? props.buttonProps[placeholderIndex]
-        : props.buttonProps
+  parts.forEach(part => {
+    // Se a parte é texto normal, adiciona como string
+    if (!part.startsWith('$')) {
+      if (part) result.push(part)
+      return
+    }
 
-      const routerLinkPropsForIndex = isRouterPropsArray
-        ? props.routerLinkProps[placeholderIndex]
-        : props.routerLinkProps
+    // Se é um placeholder, encontra o match correspondente
+    const placeholderMatch = part.match(/\$(\w+)_(\d+)/)
+    if (!placeholderMatch) return
 
-      const hasButtonProps = buttonPropsForIndex && !!Object.keys(buttonPropsForIndex).length
+    const [, type, indexStr] = placeholderMatch
+    const index = parseInt(indexStr)
 
-      const getRouterLinkRender = () => {
-        return h(
-          RouterLink,
-          {
-            ...routerLinkPropsForIndex,
-            class: 'text-primary text-subtitle1 qas-alert__link'
-          },
-          {
-            default: () => routerLabel
-          }
-        )
-      }
+    // Encontra o match data correspondente
+    const matchData = allMatches[index]
+    if (!matchData || matchData.type !== type) return
 
-      const getQasBtnRender = () => {
-        return h(
-          QasBtn,
-          {
-            variant: 'tertiary',
-            label: routerLabel,
-            ...buttonPropsForIndex
-          }
-        )
-      }
+    // Conta quantos matches do mesmo tipo vieram antes (para o índice das props)
+    const typeIndex = allMatches
+      .slice(0, index)
+      .filter(m => m.type === type)
+      .length
 
-      result.push(hasButtonProps ? getQasBtnRender() : getRouterLinkRender())
-    }
+    // Renderiza o componente
+    result.push(matchData.render(matchData.content, typeIndex))
   })
 
   return h('span', result)

package/src/components/app-user/QasAppUser.vue

@@ -76,7 +76,8 @@ import useNotifications from '../../composables/use-notifications'
 import useQueryCache from '../../composables/use-query-cache'
 import useScreen from '../../composables/use-screen'
 
-import { NotifySuccess, NotifyError } from '../../plugins'
+import NotifySuccess from '../../plugins/notify-success/NotifySuccess.js'
+import NotifyError from '../../plugins/notify-error/NotifyError.js'
 
 import { ref, computed, watch, inject } from 'vue'
 import { useRouter } from 'vue-router'