@bildvitta/quasar-ui-asteroid 3.7.0-beta.1 → 3.7.0-beta.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bildvitta/quasar-ui-asteroid",
   "description": "Asteroid",
-  "version": "3.7.0-beta.1",
+  "version": "3.7.0-beta.3",
   "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)
     }
   }
 }