@bildvitta/quasar-ui-asteroid 3.19.0-beta.8-alpha.11 → 3.19.0-beta.9

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bildvitta/quasar-ui-asteroid",
   "description": "Asteroid",
-  "version": "3.19.0-beta.8-alpha.11",
+  "version": "3.19.0-beta.9",
   "author": "Bild & Vitta <systemteam@bild.com.br>",
   "license": "MIT",
   "main": "./src/asteroid.js",
@@ -47,6 +47,7 @@
     "autonumeric": "^4.9.0",
     "axios": "^1.4.0",
     "date-fns": "^2.30.0",
+    "pdfjs-dist": "4.3.136",
     "debug": "^4.3.4",
     "fuse.js": "^6.6.2",
     "gleap": "^14.2.7",

package/src/asteroid.js

@@ -1,91 +1,92 @@
-import { defineAsyncComponent } from 'vue'
-
-export * from './helpers'
-export * from './mixins'
-export * from './vue-plugin'
-export * from './composables'
-export * from './plugins'
-
-// components
-export const QasActions = defineAsyncComponent(() => import('./components/actions/QasActions.vue'))
-export const QasActionsMenu = defineAsyncComponent(() => import('./components/actions-menu/QasActionsMenu.vue'))
-export const QasAlert = defineAsyncComponent(() => import('./components/alert/QasAlert.vue'))
-export const QasAppBar = defineAsyncComponent(() => import('./components/app-bar/QasAppBar.vue'))
-export const QasAppMenu = defineAsyncComponent(() => import('./components/app-menu/QasAppMenu.vue'))
-export const QasAppUser = defineAsyncComponent(() => import('./components/app-user/QasAppUser.vue'))
-export const QasAvatar = defineAsyncComponent(() => import('./components/avatar/QasAvatar.vue'))
-export const QasBadge = defineAsyncComponent(() => import('./components/badge/QasBadge.vue'))
-export const QasBoardGenerator = defineAsyncComponent(() => import('./components/board-generator/QasBoardGenerator.vue'))
-export const QasBox = defineAsyncComponent(() => import('./components/box/QasBox.vue'))
-export const QasBreakline = defineAsyncComponent(() => import('./components/breakline/QasBreakline.vue'))
-export const QasBtn = defineAsyncComponent(() => import('./components/btn/QasBtn.vue'))
-export const QasBtnDropdown = defineAsyncComponent(() => import('./components/btn-dropdown/QasBtnDropdown.vue'))
-export const QasCard = defineAsyncComponent(() => import('./components/card/QasCard.vue'))
-export const QasCardImage = defineAsyncComponent(() => import('./components/card-image/QasCardImage.vue'))
-export const QasCheckbox = defineAsyncComponent(() => import('./components/checkbox/QasCheckbox.vue'))
-export const QasSelectFilter = defineAsyncComponent(() => import('./components/select-filter/QasSelectFilter.vue'))
-export const QasCopy = defineAsyncComponent(() => import('./components/copy/QasCopy.vue'))
-export const QasDate = defineAsyncComponent(() => import('./components/date/QasDate.vue'))
-export const QasDateTimeInput = defineAsyncComponent(() => import('./components/date-time-input/QasDateTimeInput.vue'))
-export const QasDebugger = defineAsyncComponent(() => import('./components/debugger/QasDebugger.vue'))
-export const QasDelete = defineAsyncComponent(() => import('./components/delete/QasDelete.vue'))
-export const QasDialog = defineAsyncComponent(() => import('./components/dialog/QasDialog.vue'))
-export const QasDialogRouter = defineAsyncComponent(() => import('./components/dialog-router/QasDialogRouter.vue'))
-export const QasDrawer = defineAsyncComponent(() => import('./components/drawer/QasDrawer.vue'))
-export const QasEmptyResultText = defineAsyncComponent(() => import('./components/empty-result-text/QasEmptyResultText.vue'))
-export const QasErrorMessage = defineAsyncComponent(() => import('./components/error-message/QasErrorMessage.vue'))
-export const QasExpansionItem = defineAsyncComponent(() => import('./components/expansion-item/QasExpansionItem.vue'))
-export const QasField = defineAsyncComponent(() => import('./components/field/QasField.vue'))
-export const QasFilters = defineAsyncComponent(() => import('./components/filters/QasFilters.vue'))
-export const QasFormGenerator = defineAsyncComponent(() => import('./components/form-generator/QasFormGenerator.vue'))
-export const QasFormView = defineAsyncComponent(() => import('./components/form-view/QasFormView.vue'))
-export const QasGallery = defineAsyncComponent(() => import('./components/gallery/QasGallery.vue'))
-export const QasGalleryCard = defineAsyncComponent(() => import('./components/gallery-card/QasGalleryCard.vue'))
-export const QasGrabbable = defineAsyncComponent(() => import('./components/grabbable/QasGrabbable.vue'))
-export const QasGridGenerator = defineAsyncComponent(() => import('./components/grid-generator/QasGridGenerator.vue'))
-export const QasGridItem = defineAsyncComponent(() => import('./components/grid-item/QasGridItem.vue'))
-export const QasHeader = defineAsyncComponent(() => import('./components/header/QasHeader.vue'))
-export const QasInfiniteScroll = defineAsyncComponent(() => import('./components/infinite-scroll/QasInfiniteScroll.vue'))
-export const QasInput = defineAsyncComponent(() => import('./components/input/QasInput.vue'))
-export const QasLabel = defineAsyncComponent(() => import('./components/label/QasLabel.vue'))
-export const QasLayout = defineAsyncComponent(() => import('./components/layout/QasLayout.vue'))
-export const QasListItems = defineAsyncComponent(() => import('./components/list-items/QasListItems.vue'))
-export const QasListView = defineAsyncComponent(() => import('./components/list-view/QasListView.vue'))
-export const QasNestedFields = defineAsyncComponent(() => import('./components/nested-fields/QasNestedFields.vue'))
-export const QasNumericInput = defineAsyncComponent(() => import('./components/numeric-input/QasNumericInput.vue'))
-export const QasOptionGroup = defineAsyncComponent(() => import('./components/option-group/QasOptionGroup.vue'))
-export const QasPageHeader = defineAsyncComponent(() => import('./components/page-header/QasPageHeader.vue'))
-export const QasPagination = defineAsyncComponent(() => import('./components/pagination/QasPagination.vue'))
-export const QasPasswordInput = defineAsyncComponent(() => import('./components/password-input/QasPasswordInput.vue'))
-export const QasPasswordStrengthChecker = defineAsyncComponent(() => import('./components/password-strength-checker/QasPasswordStrengthChecker.vue'))
-export const QasProfile = defineAsyncComponent(() => import('./components/profile/QasProfile.vue'))
-export const QasResizer = defineAsyncComponent(() => import('./components/resizer/QasResizer.vue'))
-export const QasRadio = defineAsyncComponent(() => import('./components/radio/QasRadio.vue'))
-export const QasSearchBox = defineAsyncComponent(() => import('./components/search-box/QasSearchBox.vue'))
-export const QasSearchInput = defineAsyncComponent(() => import('./components/search-input/QasSearchInput.vue'))
-export const QasSelect = defineAsyncComponent(() => import('./components/select/QasSelect.vue'))
-export const QasSelectList = defineAsyncComponent(() => import('./components/select-list/QasSelectList.vue'))
-export const QasSelectListDialog = defineAsyncComponent(() => import('./components/select-list-dialog/QasSelectListDialog.vue'))
-export const QasSignaturePad = defineAsyncComponent(() => import('./components/signature-pad/QasSignaturePad.vue'))
-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 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'))
-export const QasTableGenerator = defineAsyncComponent(() => import('./components/table-generator/QasTableGenerator.vue'))
-export const QasTabsGenerator = defineAsyncComponent(() => import('./components/tabs-generator/QasTabsGenerator.vue'))
-export const QasTextTruncate = defineAsyncComponent(() => import('./components/text-truncate/QasTextTruncate.vue'))
-export const QasTimeline = defineAsyncComponent(() => import('./components/timeline/QasTimeline.vue'))
-export const QasTip = defineAsyncComponent(() => import('./components/tip/QasTip.vue'))
-export const QasToggle = defineAsyncComponent(() => import('./components/toggle/QasToggle.vue'))
-export const QasToggleVisibility = defineAsyncComponent(() => import('./components/toggle-visibility/QasToggleVisibility.vue'))
-export const QasTooltip = defineAsyncComponent(() => import('./components/tooltip/QasTooltip.vue'))
-export const QasTransfer = defineAsyncComponent(() => import('./components/transfer/QasTransfer.vue'))
-export const QasTreeGenerator = defineAsyncComponent(() => import('./components/tree-generator/QasTreeGenerator.vue'))
-export const QasUploader = defineAsyncComponent(() => import('./components/uploader/QasUploader.vue'))
-export const QasWelcome = defineAsyncComponent(() => import('./components/welcome/QasWelcome.vue'))
-export const QasWhatsappLink = defineAsyncComponent(() => import('./components/whatsapp-link/QasWhatsappLink.vue'))
-export const QasReportsFilters = defineAsyncComponent(() => import('./components/reports-filters/QasReportsFilters.vue'))
-export const QasMap = defineAsyncComponent(() => import('./components/map/QasMap.vue'))
-export const QasChartView = defineAsyncComponent(() => import('./components/chart-view/QasChartView.vue'))
+import { defineAsyncComponent } from 'vue'
+
+export * from './helpers'
+export * from './mixins'
+export * from './vue-plugin'
+export * from './composables'
+export * from './plugins'
+
+// components
+export const QasActions = defineAsyncComponent(() => import('./components/actions/QasActions.vue'))
+export const QasActionsMenu = defineAsyncComponent(() => import('./components/actions-menu/QasActionsMenu.vue'))
+export const QasAlert = defineAsyncComponent(() => import('./components/alert/QasAlert.vue'))
+export const QasAppBar = defineAsyncComponent(() => import('./components/app-bar/QasAppBar.vue'))
+export const QasAppMenu = defineAsyncComponent(() => import('./components/app-menu/QasAppMenu.vue'))
+export const QasAppUser = defineAsyncComponent(() => import('./components/app-user/QasAppUser.vue'))
+export const QasAvatar = defineAsyncComponent(() => import('./components/avatar/QasAvatar.vue'))
+export const QasBadge = defineAsyncComponent(() => import('./components/badge/QasBadge.vue'))
+export const QasBoardGenerator = defineAsyncComponent(() => import('./components/board-generator/QasBoardGenerator.vue'))
+export const QasBox = defineAsyncComponent(() => import('./components/box/QasBox.vue'))
+export const QasBreakline = defineAsyncComponent(() => import('./components/breakline/QasBreakline.vue'))
+export const QasBtn = defineAsyncComponent(() => import('./components/btn/QasBtn.vue'))
+export const QasBtnDropdown = defineAsyncComponent(() => import('./components/btn-dropdown/QasBtnDropdown.vue'))
+export const QasCard = defineAsyncComponent(() => import('./components/card/QasCard.vue'))
+export const QasCardImage = defineAsyncComponent(() => import('./components/card-image/QasCardImage.vue'))
+export const QasCheckbox = defineAsyncComponent(() => import('./components/checkbox/QasCheckbox.vue'))
+export const QasSelectFilter = defineAsyncComponent(() => import('./components/select-filter/QasSelectFilter.vue'))
+export const QasCopy = defineAsyncComponent(() => import('./components/copy/QasCopy.vue'))
+export const QasDate = defineAsyncComponent(() => import('./components/date/QasDate.vue'))
+export const QasDateTimeInput = defineAsyncComponent(() => import('./components/date-time-input/QasDateTimeInput.vue'))
+export const QasDebugger = defineAsyncComponent(() => import('./components/debugger/QasDebugger.vue'))
+export const QasDelete = defineAsyncComponent(() => import('./components/delete/QasDelete.vue'))
+export const QasDialog = defineAsyncComponent(() => import('./components/dialog/QasDialog.vue'))
+export const QasDialogRouter = defineAsyncComponent(() => import('./components/dialog-router/QasDialogRouter.vue'))
+export const QasDrawer = defineAsyncComponent(() => import('./components/drawer/QasDrawer.vue'))
+export const QasEmptyResultText = defineAsyncComponent(() => import('./components/empty-result-text/QasEmptyResultText.vue'))
+export const QasErrorMessage = defineAsyncComponent(() => import('./components/error-message/QasErrorMessage.vue'))
+export const QasExpansionItem = defineAsyncComponent(() => import('./components/expansion-item/QasExpansionItem.vue'))
+export const QasField = defineAsyncComponent(() => import('./components/field/QasField.vue'))
+export const QasFilters = defineAsyncComponent(() => import('./components/filters/QasFilters.vue'))
+export const QasFormGenerator = defineAsyncComponent(() => import('./components/form-generator/QasFormGenerator.vue'))
+export const QasFormView = defineAsyncComponent(() => import('./components/form-view/QasFormView.vue'))
+export const QasGallery = defineAsyncComponent(() => import('./components/gallery/QasGallery.vue'))
+export const QasGalleryCard = defineAsyncComponent(() => import('./components/gallery-card/QasGalleryCard.vue'))
+export const QasGrabbable = defineAsyncComponent(() => import('./components/grabbable/QasGrabbable.vue'))
+export const QasGridGenerator = defineAsyncComponent(() => import('./components/grid-generator/QasGridGenerator.vue'))
+export const QasGridItem = defineAsyncComponent(() => import('./components/grid-item/QasGridItem.vue'))
+export const QasHeader = defineAsyncComponent(() => import('./components/header/QasHeader.vue'))
+export const QasInfiniteScroll = defineAsyncComponent(() => import('./components/infinite-scroll/QasInfiniteScroll.vue'))
+export const QasInput = defineAsyncComponent(() => import('./components/input/QasInput.vue'))
+export const QasLabel = defineAsyncComponent(() => import('./components/label/QasLabel.vue'))
+export const QasLayout = defineAsyncComponent(() => import('./components/layout/QasLayout.vue'))
+export const QasListItems = defineAsyncComponent(() => import('./components/list-items/QasListItems.vue'))
+export const QasListView = defineAsyncComponent(() => import('./components/list-view/QasListView.vue'))
+export const QasNestedFields = defineAsyncComponent(() => import('./components/nested-fields/QasNestedFields.vue'))
+export const QasNumericInput = defineAsyncComponent(() => import('./components/numeric-input/QasNumericInput.vue'))
+export const QasOptionGroup = defineAsyncComponent(() => import('./components/option-group/QasOptionGroup.vue'))
+export const QasPageHeader = defineAsyncComponent(() => import('./components/page-header/QasPageHeader.vue'))
+export const QasPagination = defineAsyncComponent(() => import('./components/pagination/QasPagination.vue'))
+export const QasPasswordInput = defineAsyncComponent(() => import('./components/password-input/QasPasswordInput.vue'))
+export const QasPasswordStrengthChecker = defineAsyncComponent(() => import('./components/password-strength-checker/QasPasswordStrengthChecker.vue'))
+export const QasPdfViewer = defineAsyncComponent(() => import('./components/pdf-viewer/QasPdfViewer.vue'))
+export const QasProfile = defineAsyncComponent(() => import('./components/profile/QasProfile.vue'))
+export const QasResizer = defineAsyncComponent(() => import('./components/resizer/QasResizer.vue'))
+export const QasRadio = defineAsyncComponent(() => import('./components/radio/QasRadio.vue'))
+export const QasSearchBox = defineAsyncComponent(() => import('./components/search-box/QasSearchBox.vue'))
+export const QasSearchInput = defineAsyncComponent(() => import('./components/search-input/QasSearchInput.vue'))
+export const QasSelect = defineAsyncComponent(() => import('./components/select/QasSelect.vue'))
+export const QasSelectList = defineAsyncComponent(() => import('./components/select-list/QasSelectList.vue'))
+export const QasSelectListDialog = defineAsyncComponent(() => import('./components/select-list-dialog/QasSelectListDialog.vue'))
+export const QasSignaturePad = defineAsyncComponent(() => import('./components/signature-pad/QasSignaturePad.vue'))
+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 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'))
+export const QasTableGenerator = defineAsyncComponent(() => import('./components/table-generator/QasTableGenerator.vue'))
+export const QasTabsGenerator = defineAsyncComponent(() => import('./components/tabs-generator/QasTabsGenerator.vue'))
+export const QasTextTruncate = defineAsyncComponent(() => import('./components/text-truncate/QasTextTruncate.vue'))
+export const QasTimeline = defineAsyncComponent(() => import('./components/timeline/QasTimeline.vue'))
+export const QasTip = defineAsyncComponent(() => import('./components/tip/QasTip.vue'))
+export const QasToggle = defineAsyncComponent(() => import('./components/toggle/QasToggle.vue'))
+export const QasToggleVisibility = defineAsyncComponent(() => import('./components/toggle-visibility/QasToggleVisibility.vue'))
+export const QasTooltip = defineAsyncComponent(() => import('./components/tooltip/QasTooltip.vue'))
+export const QasTransfer = defineAsyncComponent(() => import('./components/transfer/QasTransfer.vue'))
+export const QasTreeGenerator = defineAsyncComponent(() => import('./components/tree-generator/QasTreeGenerator.vue'))
+export const QasUploader = defineAsyncComponent(() => import('./components/uploader/QasUploader.vue'))
+export const QasWelcome = defineAsyncComponent(() => import('./components/welcome/QasWelcome.vue'))
+export const QasWhatsappLink = defineAsyncComponent(() => import('./components/whatsapp-link/QasWhatsappLink.vue'))
+export const QasReportsFilters = defineAsyncComponent(() => import('./components/reports-filters/QasReportsFilters.vue'))
+export const QasMap = defineAsyncComponent(() => import('./components/map/QasMap.vue'))
+export const QasChartView = defineAsyncComponent(() => import('./components/chart-view/QasChartView.vue'))

package/src/components/actions/QasActions.vue

@@ -1,116 +1,116 @@
-<template>
-  <div class="q-mt-sm" :class="classes">
-    <div v-if="hasTertiaryButton" :class="columnClasses">
-      <slot name="tertiary">
-        <qas-btn v-bind="formattedButtonsProps.tertiary" />
-      </slot>
-    </div>
-
-    <div v-if="hasSecondaryButton" :class="columnClasses">
-      <slot name="secondary">
-        <qas-btn v-bind="formattedButtonsProps.secondary" />
-      </slot>
-    </div>
-
-    <div v-if="hasPrimaryButton" :class="columnClasses">
-      <slot name="primary">
-        <qas-btn v-bind="formattedButtonsProps.primary" />
-      </slot>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import useScreen from '../../composables/use-screen'
-import { FlexAlign } from '../../enums/Align'
-import { Spacing } from '../../enums/Spacing'
-
-import QasBtn from '../btn/QasBtn.vue'
-
-import { computed, useSlots } from 'vue'
-
-defineOptions({ name: 'QasActions' })
-
-const props = defineProps({
-  align: {
-    default: FlexAlign.End,
-    type: String,
-    validator: value => Object.values(FlexAlign).includes(value)
-  },
-
-  gutter: {
-    default: '',
-    type: String,
-    validator: value => !value || Object.values(Spacing).includes(value)
-  },
-
-  primaryButtonProps: {
-    type: Object,
-    default: () => ({})
-  },
-
-  secondaryButtonProps: {
-    type: Object,
-    default: () => ({})
-  },
-
-  tertiaryButtonProps: {
-    type: Object,
-    default: () => ({})
-  },
-
-  useFullWidth: {
-    type: Boolean
-  },
-
-  useEqualWidth: {
-    type: Boolean
-  }
-})
-
-const slots = useSlots()
-const screen = useScreen()
-
-const defaultGutter = computed(() => {
-  return props.gutter || (screen.isSmall ? 'md' : 'lg')
-})
-
-const classes = computed(() => {
-  const isSmallOrFullWidth = screen.isSmall || props.useFullWidth
-
-  return [
-    !screen.isSmall && 'items-center',
-
-    // alinhamento
-    `justify-${props.align}`,
-
-    // espaçamento
-    `q-col-gutter-${defaultGutter.value}`,
-
-    // disposição
-    isSmallOrFullWidth ? 'column reverse' : 'row'
-  ]
-})
-
-const columnClasses = computed(() => {
-  if (props.useEqualWidth) return 'col-12 col-sm-6'
-
-  return props.useFullWidth ? 'full-width' : 'col-12 col-sm-auto'
-})
-
-const hasPrimarySlot = computed(() => !!slots.primary)
-const hasSecondarySlot = computed(() => !!slots.secondary)
-const hasTertiarySlot = computed(() => !!slots.tertiary)
-
-const hasPrimaryButton = computed(() => hasPrimarySlot.value || Object.keys(props.primaryButtonProps).length)
-const hasSecondaryButton = computed(() => hasSecondarySlot.value || Object.keys(props.secondaryButtonProps).length)
-const hasTertiaryButton = computed(() => hasTertiarySlot.value || Object.keys(props.tertiaryButtonProps).length)
-
-const formattedButtonsProps = computed(() => {
-  return {
-    primary: { ...props.primaryButtonProps, variant: 'primary' },
-    secondary: { ...props.secondaryButtonProps, variant: 'secondary' },
-    tertiary: { ...props.tertiaryButtonProps, variant: 'tertiary' }
-  }
-})
-</script>
+<template>
+  <div class="q-mt-sm" :class="classes">
+    <div v-if="hasTertiaryButton" :class="columnClasses">
+      <slot name="tertiary">
+        <qas-btn v-bind="formattedButtonsProps.tertiary" />
+      </slot>
+    </div>
+
+    <div v-if="hasSecondaryButton" :class="columnClasses">
+      <slot name="secondary">
+        <qas-btn v-bind="formattedButtonsProps.secondary" />
+      </slot>
+    </div>
+
+    <div v-if="hasPrimaryButton" :class="columnClasses">
+      <slot name="primary">
+        <qas-btn v-bind="formattedButtonsProps.primary" />
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import useScreen from '../../composables/use-screen'
+import { FlexAlign } from '../../enums/Align'
+import { Spacing } from '../../enums/Spacing'
+
+import QasBtn from '../btn/QasBtn.vue'
+
+import { computed, useSlots } from 'vue'
+
+defineOptions({ name: 'QasActions' })
+
+const props = defineProps({
+  align: {
+    default: FlexAlign.End,
+    type: String,
+    validator: value => Object.values(FlexAlign).includes(value)
+  },
+
+  gutter: {
+    default: '',
+    type: String,
+    validator: value => !value || Object.values(Spacing).includes(value)
+  },
+
+  primaryButtonProps: {
+    type: Object,
+    default: () => ({})
+  },
+
+  secondaryButtonProps: {
+    type: Object,
+    default: () => ({})
+  },
+
+  tertiaryButtonProps: {
+    type: Object,
+    default: () => ({})
+  },
+
+  useFullWidth: {
+    type: Boolean
+  },
+
+  useEqualWidth: {
+    type: Boolean
+  }
+})
+
+const slots = useSlots()
+const screen = useScreen()
+
+const defaultGutter = computed(() => {
+  return props.gutter || (screen.isSmall ? 'md' : 'lg')
+})
+
+const classes = computed(() => {
+  const isSmallOrFullWidth = screen.isSmall || props.useFullWidth
+
+  return [
+    !screen.isSmall && 'items-center',
+
+    // alinhamento
+    `justify-${props.align}`,
+
+    // espaçamento
+    `q-col-gutter-${defaultGutter.value}`,
+
+    // disposição
+    isSmallOrFullWidth ? 'column reverse' : 'row'
+  ]
+})
+
+const columnClasses = computed(() => {
+  if (props.useEqualWidth) return 'col-12 col-sm-6'
+
+  return props.useFullWidth ? 'full-width' : 'col-12 col-sm-auto'
+})
+
+const hasPrimarySlot = computed(() => !!slots.primary)
+const hasSecondarySlot = computed(() => !!slots.secondary)
+const hasTertiarySlot = computed(() => !!slots.tertiary)
+
+const hasPrimaryButton = computed(() => hasPrimarySlot.value || Object.keys(props.primaryButtonProps).length)
+const hasSecondaryButton = computed(() => hasSecondarySlot.value || Object.keys(props.secondaryButtonProps).length)
+const hasTertiaryButton = computed(() => hasTertiarySlot.value || Object.keys(props.tertiaryButtonProps).length)
+
+const formattedButtonsProps = computed(() => {
+  return {
+    primary: { ...props.primaryButtonProps, variant: 'primary' },
+    secondary: { ...props.secondaryButtonProps, variant: 'secondary' },
+    tertiary: { ...props.tertiaryButtonProps, variant: 'tertiary' }
+  }
+})
+</script>

package/src/components/actions/QasActions.yml

@@ -1,49 +1,49 @@
-type: component
-
-meta:
-  desc: Área de ações para páginas que lidam com botões primários e secundários, como um formulário ou caixa de diálogo.
-
-props:
-  align:
-    desc: Alinhamento dos elementos.
-    default: end
-    type: String
-    examples: [start, end, between, around, center]
-
-  gutter:
-    desc: Espaçamento entre os elementos.
-    default: lg
-    type: String
-    examples: ['xs', 'sm', 'md', 'lg', 'xl']
-
-  use-full-width:
-    desc: Deixa as colunas 100%, com col-12.
-    default: false
-    type: Boolean
-
-  use-equal-width:
-    desc: Deixa as colunas 50% no desktop e 100% no mobile, col-12 col-sm-6.
-    default: false
-    type: Boolean
-
-  primary-button-props:
-    desc: Propriedades do botão primário.
-    default: {}
-    type: Object
-
-  secondary-button-props:
-    desc: Propriedades do botão secundário.
-    default: {}
-    type: Object
-
-  tertiary-button-props:
-    desc: Propriedades do botão terciário.
-    default: {}
-    type: Object
-
-slots:
-  primary:
-    desc: 'Slot para ação primaria (ex: botão de salvar), em telas menores que sm, se torna o primeiro elemento.'
-
-  secondary:
-    desc: 'Slot para ação secundaria (ex: botão de cancelar), em telas menores que sm, se torna o segundo elemento.'
+type: component
+
+meta:
+  desc: Área de ações para páginas que lidam com botões primários e secundários, como um formulário ou caixa de diálogo.
+
+props:
+  align:
+    desc: Alinhamento dos elementos.
+    default: end
+    type: String
+    examples: [start, end, between, around, center]
+
+  gutter:
+    desc: Espaçamento entre os elementos.
+    default: lg
+    type: String
+    examples: ['xs', 'sm', 'md', 'lg', 'xl']
+
+  use-full-width:
+    desc: Deixa as colunas 100%, com col-12.
+    default: false
+    type: Boolean
+
+  use-equal-width:
+    desc: Deixa as colunas 50% no desktop e 100% no mobile, col-12 col-sm-6.
+    default: false
+    type: Boolean
+
+  primary-button-props:
+    desc: Propriedades do botão primário.
+    default: {}
+    type: Object
+
+  secondary-button-props:
+    desc: Propriedades do botão secundário.
+    default: {}
+    type: Object
+
+  tertiary-button-props:
+    desc: Propriedades do botão terciário.
+    default: {}
+    type: Object
+
+slots:
+  primary:
+    desc: 'Slot para ação primaria (ex: botão de salvar), em telas menores que sm, se torna o primeiro elemento.'
+
+  secondary:
+    desc: 'Slot para ação secundaria (ex: botão de cancelar), em telas menores que sm, se torna o segundo elemento.'