@bildvitta/quasar-ui-asteroid 3.7.0-beta.0 → 3.7.0-beta.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bildvitta/quasar-ui-asteroid",
   "description": "Asteroid",
-  "version": "3.7.0-beta.0",
+  "version": "3.7.0-beta.2",
   "author": "Bild & Vitta <systemteam@bild.com.br>",
   "license": "MIT",
   "main": "dist/asteroid.cjs.min.js",

package/src/components/actions/QasActions.vue

@@ -41,7 +41,7 @@ export default {
       return [
         `justify-${this.align}`,
         `q-col-gutter-${this.defaultGutter}`,
-        this.$qas.screen.isSmall ? 'column reverse' : 'row'
+        (this.$qas.screen.isSmall || this.useFullWidth) ? 'column reverse' : 'row'
       ]
     },
 

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

@@ -1,21 +1,19 @@
 <template>
-  <div v-if="hasActions">
-    <component :is="component.is" v-bind="component.props" :use-label-on-small-screen="useLabelOnSmallScreen" variant="tertiary" @click="onClick()">
-      <q-menu v-if="hasMoreThanOneAction" auto-close class="q-py-xs">
-        <q-list>
-          <slot v-for="(item, key) in actions" :item="item" :name="key">
-            <component :is="getComponent(key)" v-bind="item.props" :key="key" clickable @click="onClick(item)">
-              <q-item-section avatar>
-                <q-icon :name="item.icon" />
-              </q-item-section>
-
-              <q-item-section>
-                <div>{{ item.label }}</div>
-              </q-item-section>
-            </component>
-          </slot>
-        </q-list>
-      </q-menu>
+  <div v-if="hasActions" class="qas-actions-menu">
+    <component :is="component.is" v-bind="component.props" variant="tertiary">
+      <q-list v-if="isBtnDropdown">
+        <slot v-for="(item, key) in actions" :item="item" :name="key">
+          <q-item v-bind="item.props" :key="key" clickable @click="onClick(item)">
+            <q-item-section avatar>
+              <q-icon :name="item.icon" />
+            </q-item-section>
+
+            <q-item-section>
+              <div>{{ item.label }}</div>
+            </q-item-section>
+          </q-item>
+        </slot>
+      </q-list>
 
       <q-tooltip v-if="hasTooltip" class="text-caption">
         {{ tooltipLabel }}
@@ -26,28 +24,18 @@
 
 <script>
 import QasBtn from '../btn/QasBtn.vue'
-import QasDelete from '../delete/QasDelete.vue'
+import QasBtnDropdown from '../btn-dropdown/QasBtnDropdown.vue'
 
 export default {
   name: 'QasActionsMenu',
 
   components: {
     QasBtn,
-    QasDelete
+    QasBtnDropdown
   },
 
   props: {
-    color: {
-      default: '',
-      type: String
-    },
-
-    icon: {
-      default: 'sym_r_more_vert',
-      type: String
-    },
-
-    list: {
+    buttonProps: {
       default: () => ({}),
       type: Object
     },
@@ -67,54 +55,63 @@ export default {
       type: Object
     },
 
-    useLabel: {
-      default: true,
-      type: Boolean
+    dropdownIcon: {
+      default: 'sym_r_more_vert',
+      type: String
     },
 
-    useLabelOnSmallScreen: {
+    list: {
+      default: () => ({}),
+      type: Object
+    },
+
+    splitName: {
+      type: String,
+      default: ''
+    },
+
+    useLabel: {
+      default: true,
       type: Boolean
     }
   },
 
   computed: {
     actions () {
+      const list = { ...this.fullList }
+
+      if (this.hasSplit && list[this.splitName] && this.isBtnDropdown) {
+        this.isSmall
+          ? Object.assign(list, { [this.splitName]: list[this.splitName] })
+          : delete list[this.splitName]
+      }
+
+      return list
+    },
+
+    fullList () {
       return {
         ...this.list,
         ...(this.hasDelete && {
           delete: {
+            color: 'grey-9',
             icon: this.deleteIcon,
             label: this.deleteLabel,
-            props: {
-              ...this.deleteProps,
-              tag: this.hasMoreThanOneAction ? 'q-item' : 'qas-btn'
-            }
+            handler: () => this.$qas.delete(this.deleteProps)
           }
         })
       }
     },
 
     component () {
-      const props = {}
-
-      // TODO: solução do color é temporária até ser definido o novo QasBtn.
-      if (this.hasMoreThanOneAction) {
-        props.color = this.color || 'grey-9'
-        props.iconRight = this.icon
-        props.label = this.useLabel ? 'Opções' : ''
-      } else {
-        const { color, icon } = this.actions[this.firstItemKey] || {}
-
-        props.color = color || this.color || 'primary'
-        props.icon = icon
-        props.label = this.useLabel ? this.tooltipLabel : ''
-      }
-
-      this.hasDelete && Object.assign(props, this.deleteProps)
+      const is = this.isBtnDropdown ? 'qas-btn-dropdown' : 'qas-btn'
 
       return {
-        is: this.hasMoreThanOneAction || !this.hasDelete ? 'qas-btn' : 'qas-delete',
-        props
+        is,
+        props: {
+          ...(this.isBtnDropdown ? this.btnDropdownProps : this.btnProps),
+          ...(this.hasDelete && this.deleteProps)
+        }
       }
     },
 
@@ -130,26 +127,76 @@ export default {
       return !!Object.keys(this.deleteProps).length
     },
 
-    hasMoreThanOneAction () {
-      return Object.keys(this.list || {}).length + Number(this.hasDelete) > 1
+    hasSplit () {
+      return !!this.splitName
+    },
+
+    isBtnDropdown () {
+      return Object.keys(this.fullList || {}).length > 1
     },
 
     hasTooltip () {
-      return !this.hasMoreThanOneAction && !this.useLabel
+      return !this.isBtnDropdown && !this.useLabel
     },
 
     tooltipLabel () {
       return this.actions[this.firstItemKey]?.label
+    },
+
+    defaultButtonProps () {
+      const { label, variant, ...buttonProps } = this.buttonProps
+
+      return {
+        useHoverOnWhiteColor: true,
+        useLabelOnSmallScreen: false,
+        ...buttonProps
+      }
+    },
+
+    btnDropdownProps () {
+      const { icon, label } = this.fullList[this.splitName] || {}
+
+      const {
+        icon: defaultIcon,
+        ...defaultButtonProps
+      } = this.defaultButtonProps
+
+      return {
+        buttonProps: {
+          ...(this.useLabel && { label: this.hasSplit ? label : 'Opções' }),
+          ...defaultButtonProps,
+          icon: icon || defaultIcon
+        },
+
+        dropdownIcon: this.dropdownIcon,
+        useSplit: this.hasSplit,
+
+        // evento
+        onClick: () => this.onClick(this.fullList[this.splitName])
+      }
+    },
+
+    btnProps () {
+      const { color, icon } = this.actions[this.firstItemKey] || {}
+      const { color: defaultColor, ...defaultButtonProps } = this.defaultButtonProps
+
+      return {
+        color: color || defaultColor,
+        icon,
+        label: this.useLabel ? this.tooltipLabel : '',
+        onClick: this.onClick,
+        ...defaultButtonProps
+      }
+    },
+
+    isSmall () {
+      return this.$qas.screen.isSmall
     }
   },
 
   methods: {
-    getComponent (key) {
-      return key === 'delete' ? 'qas-delete' : 'q-item'
-    },
-
     onClick (item = {}) {
-      if (!this.hasMoreThanOneAction) {
+      if (!this.isBtnDropdown) {
         item = this.actions[this.firstItemKey]
       }
 

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

@@ -4,9 +4,11 @@ meta:
   desc: Componente para abrir um menu de ação a partir de um botão, muito utilizado em tela de edição.
 
 props:
-  color:
-    desc: Cor do ícone.
-    type: String
+  button-props:
+    desc: Propriedades repassadas para o "QasBtn" caso esteja em modo de botão (apenas um item na prop "list"), caso esteja em modo de dropdown (mais de 1 item na prop "list") é enviado para a propriedade buttonProps do "QasBtnDropdown".
+    default: {}
+    type: Object
+    examples: ["{ color: 'white', icon: 'sym_r_person', useLabelOnSmallScreen: false }"]
 
   delete-icon:
     desc: Ícone do botão de deletar.
@@ -23,19 +25,13 @@ props:
     default: {}
     type: Object
 
-  icon:
-    desc: Ícone do botão.
-    default: sym_r_more_vert
-    type: String
-    examples: [start, end, between, around, center]
-
   list:
     desc: Lista de items que vão ser criados dentro do menu de ações.
     default: '{}'
     type: Object
     examples: [
       "{
-        delete: {
+        visibility: {
           icon: 'sym_r_visibility',
           label: 'Visualizar',
           handler: () => alert('handler ativado')
@@ -43,10 +39,11 @@ props:
       }"
     ]
 
-  use-label-on-small-screen:
-    desc: Esconde o rótulo (label) do botão quando o tamanho da tela for pequeno (esta propriedade só funciona se o "rotulo") for passado via propriedade "label".
-    default: true
-    type: Boolean
+  split-name:
+    desc: propriedade para definir o useSplit, habilita 2 ações diferentes no mesmo componente, separando o mesmo por uma barra, o valor deve ser alguma chave (key) existente na propriedade "list".
+    default: ''
+    type: String
+    examples: [visibility]
 
   use-label:
     desc: Habilita ou não o label no botão.

package/src/components/btn/QasBtn.vue

@@ -21,6 +21,16 @@ export default {
       validator: value => ['grey-9', 'primary', 'white'].includes(value)
     },
 
+    icon: {
+      type: String,
+      default: undefined
+    },
+
+    iconRight: {
+      type: String,
+      default: undefined
+    },
+
     useLabelOnSmallScreen: {
       default: true,
       type: Boolean
@@ -76,12 +86,17 @@ export default {
         ...(this.showLabel && { label: this.label }),
 
         ...attributes,
+        icon: this.icon,
+        iconRight: this.iconRight,
         class: [this.classes, externalClass]
       }
     },
 
     hasIconOnly () {
-      return (!this.label || !this.showLabel) && (this.$attrs.icon || this.$attrs.iconRight)
+      return (
+        (!this.label || !this.showLabel) &&
+        ((this.icon && !this.iconRight) || (this.iconRight && !this.icon))
+      )
     },
 
     classes () {

package/src/components/btn/QasBtn.yml

@@ -13,6 +13,14 @@ props:
     type: String
     examples: ['grey-9', 'primary', 'white']
 
+  icon:
+    desc: Ícone a esquerda.
+    type: String
+
+  icon-right:
+    desc: Ícone a direita.
+    type: String
+
   use-hover-on-white-color:
     desc: Quando usamos a cor branca para contrast, em alguns casos podemos não querer ter um hover de outra cor justamente por conta do contraste, esta propriedade só funciona com variante "tertiary" e cor "white", para remover o hover sete o valor para "false".
     default: true

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

@@ -0,0 +1,120 @@
+<template>
+  <div class="flex inline items-center qas-btn-dropdown">
+    <div v-if="hasLeftButton" :class="leftSideClasses">
+      <slot name="left-button">
+        <qas-btn variant="tertiary" v-bind="defaultButtonProps" @click="$emit('click', $event)">
+          <q-menu v-if="hasMenuOnLeftSide" anchor="bottom right" auto-close self="top right">
+            <div :class="menuContentClasses">
+              <slot />
+            </div>
+          </q-menu>
+        </qas-btn>
+      </slot>
+    </div>
+
+    <q-separator v-if="hasSeparator" class="q-mr-sm qas-btn-dropdown__separator self-center" dark vertical />
+
+    <div v-if="useSplit">
+      <qas-btn color="grey-9" :icon="dropdownIcon" variant="tertiary">
+        <q-menu v-if="hasDefaultSlot" anchor="bottom right" auto-close self="top right">
+          <div :class="menuContentClasses">
+            <slot />
+          </div>
+        </q-menu>
+      </qas-btn>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'QasBtnDropdown',
+
+  inheritAttrs: false,
+
+  props: {
+    buttonProps: {
+      default: () => ({}),
+      type: Object
+    },
+
+    dropdownIcon: {
+      default: 'sym_r_more_vert',
+      type: String
+    },
+
+    useSplit: {
+      type: Boolean
+    },
+
+    useMenuPadding: {
+      type: Boolean
+    }
+  },
+
+  emits: ['click'],
+
+  computed: {
+    leftSideClasses () {
+      return {
+        'q-mr-sm': this.useSplit
+      }
+    },
+
+    menuContentClasses () {
+      return {
+        'q-pa-md': this.useMenuPadding
+      }
+    },
+
+    hasDefaultSlot () {
+      return !!this.$slots.default
+    },
+
+    hasMenuOnLeftSide () {
+      return this.hasDefaultSlot && !this.useSplit
+    },
+
+    defaultButtonProps () {
+      const {
+        icon,
+        iconRight,
+        color,
+        ...defaultProps
+      } = this.buttonProps
+
+      const defaultIconRight = iconRight || this.dropdownIcon
+
+      return {
+        useLabelOnSmallScreen: false,
+
+        ...defaultProps,
+
+        color: color || (!this.useSplit ? 'grey-9' : 'primary'),
+        ...(!this.useSplit && { iconRight: defaultIconRight }),
+        ...(this.useSplit && { icon })
+      }
+    },
+
+    isSmall () {
+      return this.$qas.screen.isSmall
+    },
+
+    hasLeftButton () {
+      return !this.isSmall || !this.useSplit
+    },
+
+    hasSeparator () {
+      return !this.isSmall && this.useSplit
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.qas-btn-dropdown {
+  &__separator {
+    height: 18px;
+  }
+}
+</style>

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

@@ -0,0 +1,42 @@
+type: component
+
+meta:
+  desc: Componente semelhante ao QBtnDropdown porém utilizando o QasBtn e QSeparator para aplicar estilos padrões do Design System.
+
+props:
+  button-props:
+    desc: Propriedades repassadas para o QasBtn.
+    default: {}
+    type: Object
+    examples: ["{ color: 'white', icon: 'sym_r_person' }"]
+
+  dropdown-icon:
+    desc: Ícone a direita do dropdown.
+    default: sym_r_more_vert
+    type: String
+
+  use-split:
+    desc: Divide o componente em 2 ações, o primeiro (direita) é um botão padrão, o segundo (esquerda) é um botão com ícone que abre o dropdown, criando uma separação com o QSeparator.
+    default: false
+    type: Boolean
+
+  use-menu-padding:
+    desc: Habilita o espaçamento dentro do menu de 16px (q-pa-md).
+    default: false
+    type: Boolean
+
+slots:
+  default:
+    desc: Slot para passar o conteúdo do dropdown (menu)
+
+  left-button:
+    desc: Slot para substituir o botão a esquerda.
+
+events:
+  'click':
+    desc: Caso não tenha "useSplit", o evento é disparado ao clicar no componente como um todo, caso tenha "useSplit", o evento é disparado ao clicar no botão a esquerda.
+    params:
+      event:
+        desc: Evento nativo de click.
+        type: Object
+

package/src/components/delete/QasDelete.vue

@@ -1,28 +1,19 @@
 <template>
-  <component v-bind="attributes" :is="tag" @click.stop="openConfirmDialog">
+  <component v-bind="attributes" :is="tag" @click.stop="onDelete">
     <template v-for="(_, name) in $slots" #[name]="context">
       <slot :name="name" v-bind="context || {}" />
     </template>
   </component>
-
-  <qas-dialog v-model="showDialog" v-bind="defaultDialogProps" />
 </template>
 
 <script>
-import { Loading } from 'quasar'
-import { getAction } from '@bildvitta/store-adapter'
-import { NotifyError, NotifySuccess } from '../../plugins'
-import { useHistory } from '../../composables'
-
 import QasBtn from '../btn/QasBtn.vue'
-import QasDialog from '../dialog/QasDialog.vue'
 
 export default {
   name: 'QasDelete',
 
   components: {
-    QasBtn,
-    QasDialog
+    QasBtn
   },
 
   inheritAttrs: false,
@@ -69,12 +60,6 @@ export default {
     'update:deleting'
   ],
 
-  data () {
-    return {
-      showDialog: false
-    }
-  },
-
   computed: {
     attributes () {
       return {
@@ -83,106 +68,35 @@ export default {
       }
     },
 
-    defaultDialogProps () {
-      return {
-        card: {
-          description: 'Tem certeza que deseja excluir este item?'
-        },
-
-        ok: {
-          label: 'Excluir',
-          onClick: this.destroy
-        },
-
-        ...this.dialogProps
-      }
-    },
-
     id () {
       return this.customId || this.$route.params.id
     },
 
-    defaultNotifyMessages () {
-      return {
-        error: 'Não conseguimos excluir as informações. Por favor, tente novamente em alguns minutos.',
-        success: 'Informações excluídas com sucesso.'
-      }
-    },
-
     isButton () {
       return this.tag === 'qas-btn'
     }
   },
 
   methods: {
-    openConfirmDialog () {
-      this.showDialog = true
-    },
+    onDelete () {
+      this.$qas.delete({
+        deleteActionParams: {
+          entity: this.entity,
+          id: this.id,
+          url: this.url
+        },
 
-    async destroy () {
-      Loading.show()
-      this.$emit('update:deleting', true)
+        dialogProps: this.dialogProps,
 
-      try {
-        const payload = { id: this.id, url: this.url }
+        useAutoDeleteRoute: this.useAutoDeleteRoute,
 
-        this.$qas.logger.group(
-          `QasDelete - destroy -> Payload do parâmetro do ${this.entity}/destroy`, [payload]
-        )
+        // callbacks
+        onDelete: isDeleting => this.$emit('update:deleting', isDeleting),
 
-        await getAction.call(this, {
-          entity: this.entity,
-          key: 'destroy',
-          payload
-        })
-
-        NotifySuccess(this.defaultNotifyMessages.success)
-
-        if (this.useAutoDeleteRoute) {
-          const { destroyRoutes, history } = useHistory()
-
-          // remove todas rotas que possuem o id do item excluído.
-          const routesToBeDeleted = this.getRoutesToBeDeletedById(history.list)
-          destroyRoutes(routesToBeDeleted)
-        }
-
-        // cria um evento para notificar que o item foi excluído no "window".
-        this.createDeleteSuccessEvent()
-
-        this.$emit('success')
-
-        this.$qas.logger.info('QasDelete - destroy -> item deletado com sucesso!')
-      } catch (error) {
-        NotifyError(this.defaultNotifyMessages.error)
-        this.$emit('error', error)
-
-        this.$qas.logger.group(
-          `QasDelete - destroy -> exceção da action ${this.entity}/destroy`,
-          [error],
-          { error: true }
-        )
-      } finally {
-        Loading.hide()
-        this.$emit('update:deleting', false)
-      }
-    },
-
-    getRoutesToBeDeletedById (routes = []) {
-      return routes.filter(({ params }) => params.id === this.id)
-    },
+        onDeleteError: error => this.$emit('error', error),
 
-    createDeleteSuccessEvent () {
-      const event = new CustomEvent('delete-success', {
-        bubbles: false,
-        cancelable: false,
-        detail: {
-          entity: this.entity,
-          url: this.url,
-          id: this.id
-        }
+        onDeleteSuccess: response => this.$emit('success', response)
       })
-
-      window.dispatchEvent(event)
     }
   }
 }

package/src/components/dialog/QasDialog.vue

@@ -21,7 +21,7 @@
 
       <footer v-if="!isInfoDialog">
         <slot name="actions">
-          <qas-actions v-bind="actionsProps" :use-equal-width="hasAllActions" :use-full-width="hasSingleAction">
+          <qas-actions v-bind="formattedActionsProps">
             <template v-if="hasOk" #primary>
               <qas-btn v-close-popup="!useForm" class="full-width" variant="primary" v-bind="defaultOk" @click="submitHandler" />
             </template>
@@ -172,6 +172,20 @@ export default {
 
     isInfoDialog () {
       return !this.hasOk && !this.hasCancel
+    },
+
+    formattedActionsProps () {
+      const { useFullWidth, useEqualWidth } = this.actionsProps
+
+      if (useFullWidth || useEqualWidth) {
+        return this.actionsProps
+      }
+
+      return {
+        useFullWidth: this.hasSingleAction,
+        useEqualWidth: this.hasAllActions,
+        ...this.actionsProps
+      }
     }
   },
 

package/src/components/nested-fields/QasNestedFields.vue

@@ -11,7 +11,7 @@
             <div>
               <div class="flex items-center justify-between q-py-md">
                 <qas-label v-if="!useSingleLabel" :label="getRowLabel(index)" />
-                <qas-actions-menu v-if="hasBlockActions(row)" :list="getActionsList(index, row)" :use-label-on-small-screen="false" />
+                <qas-actions-menu v-if="hasBlockActions(row)" v-bind="actionsMenuProps" :list="getActionsList(index, row)" />
               </div>
 
               <div ref="formGenerator" class="col-12 justify-between q-col-gutter-x-md row">
@@ -24,7 +24,7 @@
                 </slot>
 
                 <div v-if="hasInlineActions(row)" class="flex items-center qas-nested-fields__actions">
-                  <qas-actions-menu :list="getActionsList(index, row)" :use-label-on-small-screen="false" />
+                  <qas-actions-menu v-bind="actionsMenuProps" :list="getActionsList(index, row)" />
                 </div>
               </div>
 

package/src/components/numeric-input/QasNumericInput.vue

@@ -55,7 +55,6 @@ export default {
     },
 
     useNegative: {
-      default: true,
       type: Boolean
     },
 

package/src/components/numeric-input/QasNumericInput.yml

@@ -35,7 +35,7 @@ props:
 
   use-negative:
     desc: Controla se pode ou não números negativos.
-    default: true
+    default: false
     type: Boolean
 
   use-positive:

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

@@ -1,11 +1,17 @@
 <template>
   <qas-box class="q-px-lg q-py-md">
     <q-table ref="table" class="bg-white qas-table-generator text-grey-8" :class="tableClass" v-bind="attributes">
-      <template v-for="(_, name) in $slots" #[name]="context">
-        <slot v-if="hasBodySlot" name="body" :props="context" />
+      <template v-for="(_, name) in slots" #[name]="context">
+        <slot :name="name" v-bind="context" />
+      </template>
 
-        <q-td v-else :key="name">
-          <slot :name="name" v-bind="context || {}" />
+      <template v-for="(fieldName, index) in bodyCellNameSlots" :key="index" #[`body-cell-${fieldName}`]="context">
+        <q-td>
+          <component :is="tdChildComponent" v-bind="getTdChildComponentProps(context.row)">
+            <slot :name="`body-cell-${fieldName}`" v-bind="context || {}">
+              {{ context.row?.[fieldName] }}
+            </slot>
+          </component>
         </q-td>
       </template>
     </q-table>
@@ -26,6 +32,11 @@ export default {
       type: Array
     },
 
+    rowRouteFn: {
+      type: Function,
+      default: undefined
+    },
+
     fields: {
       default: () => ({}),
       type: [Array, Object]
@@ -50,6 +61,10 @@ export default {
     useScrollOnGrab: {
       type: Boolean,
       default: true
+    },
+
+    useExternalLink: {
+      type: Boolean
     }
   },
 
@@ -63,6 +78,36 @@ export default {
   },
 
   computed: {
+    tdChildComponent () {
+      if (this.useExternalLink) return 'a'
+
+      return this.rowRouteFn ? 'router-link' : 'span'
+    },
+
+    bodyCellNameSlots () {
+      if (this.hasBodyCellSlot) return []
+
+      return this.columns.length
+        ? this.columns.map(column => typeof column === 'object' ? column.name : column)
+        : Object.keys(this.fields)
+    },
+
+    slots () {
+      const slots = {}
+
+      for (const slotKey in this.$slots) {
+        if (slotKey.includes('body-cell-')) continue
+
+        slots[slotKey] = this.$slots[slotKey]
+      }
+
+      return slots
+    },
+
+    hasBodyCellSlot () {
+      return !!this.$slots['body-cell']
+    },
+
     attributes () {
       const attributes = {
         columns: this.columnsByFields,
@@ -123,14 +168,6 @@ export default {
       return columns
     },
 
-    hasBodySlot () {
-      return !!this.$slots.body
-    },
-
-    hasTbodySlot () {
-      return !!this.$slots.tbody
-    },
-
     hasFields () {
       return Object.keys(this.fields).length
     },
@@ -164,6 +201,10 @@ export default {
 
     hasScrollOnGrab () {
       return !!Object.keys(this.scrollOnGrab).length
+    },
+
+    isScrolling () {
+      return this.hasScrollOnGrab && this.scrollOnGrab.haveMoved()
     }
   },
 
@@ -223,11 +264,6 @@ export default {
       }
     },
 
-    onRowClick () {
-      if (this.hasScrollOnGrab && this.scrollOnGrab.haveMoved()) return
-      this.$attrs.onRowClick(...arguments)
-    },
-
     setObserver () {
       this.elementToObserve = this.getTableElement()
       this.resizeObserver = new ResizeObserver(entries => {
@@ -239,6 +275,27 @@ export default {
 
     destroyObserver () {
       this.resizeObserver.unobserve(this.elementToObserve)
+    },
+
+    getTdChildComponentProps (row) {
+      if (!this.rowRouteFn) return
+
+      return {
+        class: 'text-no-decoration text-grey-8 flex full-width items-center full-height',
+        [this.useExternalLink ? 'href' : 'to']: this.rowRouteFn(row),
+        onClick: this.onRowClickHandler,
+        ...(this.useExternalLink && { target: '_blank' })
+      }
+    },
+
+    onRowClickHandler (event) {
+      if (this.isScrolling) return event.preventDefault()
+    },
+
+    onRowClick () {
+      if (this.isScrolling) return
+
+      this.$attrs.onRowClick(...arguments)
     }
   }
 }

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

@@ -36,6 +36,16 @@ props:
     default: true
     type: Boolean
 
+  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: ["() => ({ name: 'UsersList' })"]
+
+  use-external-link:
+    desc: Usado em conjunto com a prop "row-route-fn" quando há a necessidade da rota ser um link externo.
+    default: false
+    type: Boolean
+
 slots:
   body:
     desc: Acesso direto dentro do `tbody`.

package/src/css/components/button.scss

@@ -1,6 +1,7 @@
 .qas-btn {
   $root: &;
 
+  box-shadow: none;
   min-height: 48px !important;
   padding: var(--qas-spacing-xs) var(--qas-spacing-lg) !important;
   text-transform: initial !important;

package/src/css/plugins/loading.scss

@@ -1,5 +1,5 @@
-.q-loading {
-  &__backdrop {
+.q-loading.qas-loading {
+  .q-loading__backdrop {
     opacity: 0.9;
   }
 }

package/src/css/variables/index.scss

@@ -1,4 +1,5 @@
 @import './button';
+@import './separator';
 @import './shadow';
 @import './spacing';
 @import './typography';

package/src/css/variables/separator.scss

@@ -0,0 +1,2 @@
+$separator-color         : $grey-4;
+$separator-dark-color    : $grey-6;

package/src/plugins/delete/Delete.js

@@ -0,0 +1,89 @@
+import { Dialog, NotifySuccess, NotifyError } from 'asteroid'
+import { Loading } from 'quasar'
+import { getAction } from '@bildvitta/store-adapter'
+import { useHistory } from '../../composables'
+
+export default function (config = {}) {
+  const {
+    dialogProps = {},
+    deleteActionParams = {},
+    useAutoDeleteRoute,
+
+    // callbacks
+    onDelete = () => {},
+    onDeleteError = () => {},
+    onDeleteSuccess = () => {},
+    deleteAction
+  } = config
+
+  const { entity, id, url } = deleteActionParams
+
+  const defaultDialogProps = {
+    card: { description: 'Tem certeza que deseja excluir este item?' },
+
+    ok: { label: 'Excluir', onClick: () => destroy.call(this) },
+
+    ...dialogProps
+  }
+
+  const defaultNotifyMessages = {
+    error: 'Não conseguimos excluir as informações. Por favor, tente novamente em alguns minutos.',
+    success: 'Informações excluídas com sucesso.'
+  }
+
+  async function destroy () {
+    Loading.show()
+
+    try {
+      onDelete(true)
+
+      const hasDeleteAction = typeof deleteAction === 'function'
+
+      const payload = { id, url }
+      const destroyActionParams = { entity, key: 'destroy', payload }
+
+      const response = hasDeleteAction
+        ? await deleteAction(payload)
+        : await getAction.call(this, destroyActionParams)
+
+      NotifySuccess(defaultNotifyMessages.success)
+
+      if (useAutoDeleteRoute) {
+        const { destroyRoutes, history } = useHistory()
+
+        // remove todas rotas que possuem o id do item excluído.
+        const routesToBeDeleted = getRoutesToBeDeletedById(history.list)
+        destroyRoutes(routesToBeDeleted)
+      }
+
+      // cria um evento para notificar que o item foi excluído no "window".
+      createDeleteSuccessEvent()
+
+      onDeleteSuccess(response)
+    } catch (error) {
+      onDeleteError(error)
+
+      NotifyError(defaultNotifyMessages.error)
+    } finally {
+      onDelete(false)
+
+      Loading.hide()
+    }
+  }
+
+  function getRoutesToBeDeletedById (routes = []) {
+    return routes.filter(({ params }) => params.id === id)
+  }
+
+  function createDeleteSuccessEvent () {
+    const event = new CustomEvent('delete-success', {
+      bubbles: false,
+      cancelable: false,
+      detail: deleteActionParams
+    })
+
+    window.dispatchEvent(event)
+  }
+
+  Dialog(defaultDialogProps)
+}

package/src/plugins/delete/Delete.yml

@@ -0,0 +1,71 @@
+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:
+  'this.$qas.delete(config)':
+    params:
+      config:
+        type: Object
+        desc: Objeto de configuração do plugin.
+        params:
+          dialogProps:
+            type: Object
+            desc: Propriedades repassadas para o "QasDialog".
+
+          deleteActionParams:
+            type: Object
+            desc: Propriedades de configuração da action destroy.
+            params:
+              entity:
+                type: String
+                desc: entidade da store.
+                default: ''
+
+              id:
+                type: String
+                desc: Identificador (id, uuid, slug) do item a ser deletado.
+                default: ''
+
+              url:
+                type: String
+                desc: URL do endpoint do item a ser deletado.
+                default: ''
+
+          'onDelete -> function (isDeleting)':
+            type: Function
+            desc: Este callback é chamado quando inicializa a ação de deleção e quando finaliza, independente se der erro ou sucesso.
+            params:
+              isDeleting:
+                type: Boolean
+                desc: Retorna "true" caso esteja ocorrendo a ação de deleção e "false" quando finalizada.
+                default: false
+
+          'onDeleteError -> function (error)':
+            type: Function
+            desc: Este callback é chamado quando a ação de deleção é finalizada com erro.
+            params:
+              error:
+                type: Object
+                desc: Objeto de retorno de erro
+                default: {}
+
+          'onDeleteSuccess -> function (response)':
+            type: Function
+            desc: Este callback é chamado quando a ação de deleção é finalizada com sucesso.
+            params:
+              error:
+                type: Object
+                desc: Objeto de resposta da API
+                default: {}
+
+          'deleteAction -> function (deleteActionParams) || undefined':
+            type: [Function, undefined]
+            desc: Quando utilizado este plugin fora de componentes vue, não temos acesso ao contexto "this", neste caso é necessário passar a action "destroy" que deseja executar, é neste momento que o callback é chamado / utilizado, caso esteja dentro do componente vue, não repasse esse callback.
+            params:
+              error:
+                type: Object
+                desc: Objeto deleteActionParams enviado anteriormente como configuração do plugin Delete.
+                default: {}
+                examples: ["{ ..., deleteAction: params => useUsers.destroy(params) }"]

package/src/plugins/dialog/Dialog.yml

@@ -1,7 +1,7 @@
 type: component
 
 meta:
-  desc: Plugin que implementa o "QNotify" do quasar para notificações de sucesso.
+  desc: Plugin que implementa o `QasDialog`.
 
 inject:
   'this.$qas.dialog(config)':

package/src/plugins/index.js

@@ -1,3 +1,4 @@
+import Delete from './delete/Delete.js'
 import Dialog from './dialog/Dialog.js'
 import Logger from './logger/Logger.js'
 import NotifyError from './notify-error/NotifyError.js'
@@ -5,6 +6,7 @@ import NotifySuccess from './notify-success/NotifySuccess.js'
 import Screen from './screen/Screen.js'
 
 export {
+  Delete,
   Dialog,
   Logger,
   NotifyError,

package/src/vue-plugin.js

@@ -9,6 +9,7 @@ import QasBadge from './components/badge/QasBadge.vue'
 import QasBox from './components/box/QasBox.vue'
 import QasBreakline from './components/breakline/QasBreakline.vue'
 import QasBtn from './components/btn/QasBtn.vue'
+import QasBtnDropdown from './components/btn-dropdown/QasBtnDropdown.vue'
 import QasCard from './components/card/QasCard.vue'
 import QasCheckboxGroup from './components/checkbox-group/QasCheckboxGroup.vue'
 import QasCopy from './components/copy/QasCopy.vue'
@@ -60,6 +61,7 @@ import { Notify, Loading, Quasar, Dialog as QuasarDialog } from 'quasar'
 
 // Plugins
 import {
+  Delete,
   Dialog,
   NotifyError,
   NotifySuccess,
@@ -86,6 +88,7 @@ function install (app) {
   app.component('QasBox', QasBox)
   app.component('QasBreakline', QasBreakline)
   app.component('QasBtn', QasBtn)
+  app.component('QasBtnDropdown', QasBtnDropdown)
   app.component('QasCard', QasCard)
   app.component('QasCheckboxGroup', QasCheckboxGroup)
   app.component('QasCopy', QasCopy)
@@ -139,6 +142,7 @@ function install (app) {
   }
 
   app.config.globalProperties.$qas = {
+    delete: params => Delete.call(app.config.globalProperties, params),
     dialog: Dialog,
     error: NotifyError,
     logger: Logger(),
@@ -164,6 +168,7 @@ export {
   QasBox,
   QasBreakline,
   QasBtn,
+  QasBtnDropdown,
   QasCard,
   QasCheckboxGroup,
   QasCopy,