@bildvitta/quasar-ui-asteroid 3.15.0-beta.7 → 3.15.0-beta.9

package/package.json

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

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

@@ -1,9 +1,9 @@
 <template>
-  <div v-if="hasActions" class="qas-actions-menu" data-cy="actions-menu">
-    <component :is="component.is" v-bind="component.props" variant="tertiary" @click.stop.prevent>
-      <q-list v-if="isBtnDropdown" data-cy="actions-menu-list">
-        <slot v-for="(item, key) in actions" :item="item" :name="key">
-          <q-item v-bind="item.props" :key="key" clickable data-cy="actions-menu-list-item" @click="onClick(item)">
+  <div v-if="hasList" class="qas-actions-menu" data-cy="actions-menu">
+    <qas-btn-dropdown v-bind="btnDropdownProps">
+      <q-list data-cy="actions-menu-list">
+        <slot v-for="(item, key) in formattedList.dropdownList" :item="item" :name="key">
+          <q-item v-bind="getItemProps(item)" :key="key" clickable data-cy="actions-menu-list-item" @click="setClickHandler(item)">
             <q-item-section avatar>
               <q-icon :name="item.icon" />
             </q-item-section>
@@ -17,21 +17,35 @@
         </slot>
       </q-list>
 
-      <q-tooltip v-if="hasTooltip" class="text-caption">
-        {{ tooltipLabel }}
-      </q-tooltip>
-    </component>
+      <template v-for="(item, name) in tooltipLabels" :key="name" #[`bottom-${name}`]>
+        <q-tooltip v-if="showTooltip(item)">
+          {{ item.label }}
+        </q-tooltip>
+      </template>
+    </qas-btn-dropdown>
   </div>
 </template>
 
 <script setup>
-import QasBtn from '../btn/QasBtn.vue'
 import QasBtnDropdown from '../btn-dropdown/QasBtnDropdown.vue'
 
 import useScreen from '../../composables/use-screen'
 
+import useDelete from './composables/use-delete'
+import useTooltips from './composables/use-tooltips'
+import useOptionsActions from './composables/use-options-actions'
+import useSingleAction from './composables/use-single-action'
+import useDoubleSplitActions from './composables/use-double-split-actions'
+import useSingleSplitActions from './composables/use-single-split-actions'
+
+import getLabel from './utils/get-label'
+import setClickHandler from './utils/set-click-handler'
+
 import { computed, inject } from 'vue'
 
+const DEFAULT_COLOR = 'grey-10'
+const SPLIT_SIZE = 2
+
 defineOptions({ name: 'QasActionsMenu' })
 
 const qas = inject('qas')
@@ -42,6 +56,10 @@ const props = defineProps({
     type: Object
   },
 
+  disable: {
+    type: Boolean
+  },
+
   deleteLabel: {
     default: 'Excluir',
     type: String
@@ -57,11 +75,6 @@ const props = defineProps({
     type: Object
   },
 
-  dropdownIcon: {
-    default: 'sym_r_more_vert',
-    type: String
-  },
-
   list: {
     default: () => ({}),
     type: Object
@@ -83,8 +96,33 @@ const props = defineProps({
 })
 
 const screen = useScreen()
-const { deleteBtnProps, hasDelete } = useDelete()
 
+const { deleteBtnProps, hasDelete } = useDelete({ color: DEFAULT_COLOR, props, qas })
+
+const hasSplitName = computed(() => !!props.splitName)
+const hasList = computed(() => !!Object.keys(fullList.value).length)
+
+/**
+ * Tamanho total da lista, considerando ação de deletar caso exista.
+ */
+const listSize = computed(() => Object.keys(fullList.value).length)
+
+/**
+ * Só existe split caso tenha a propriedade "splitName" e o tamanho da lista seja
+ * maior que o tamanho permitido no SPLIT_SIZE (no caso 2).
+ */
+const hasSplit = computed(() => hasSplitName.value && listSize.value > SPLIT_SIZE)
+
+/**
+ * Quando existe apenas i item na lista, neste caso é mostrado o botão direto,
+ * mesmo que não tenha a propriedade "splitName".
+ */
+const isSingle = computed(() => Object.keys(fullList.value).length === 1)
+
+/**
+ * Lista englobando as que vem por propriedade "list" mergeadas com a do
+ * delete, caso exista.
+ */
 const fullList = computed(() => {
   return {
     ...props.list,
@@ -92,123 +130,103 @@ const fullList = computed(() => {
   }
 })
 
-const hasSplit = computed(() => !!props.splitName)
-
-// --------------------------------- actions -----------------------------------
-const actions = computed(() => {
-  const list = { ...fullList.value }
+/**
+ * chave do primaria do objeto, é considerado sendo a splitName caso exista no
+ * objeto, porém pode acontecer deste item deixar de existir por algum motivo
+ * então consideramos a chave primaria sendo o primeiro item da computada fullList.
+ */
+const primaryKey = computed(() => {
+  return props.splitName in fullList.value ? props.splitName : Object.keys(fullList.value)?.[0]
+})
 
-  if (hasSplit.value && list[props.splitName] && isBtnDropdown.value) {
-    screen.isSmall
-      ? Object.assign(list, { [props.splitName]: list[props.splitName] })
-      : delete list[props.splitName]
+const btnDropdownProps = computed(() => {
+  return {
+    buttonsPropsList: formattedList.value.buttonsList,
+    disable: props.disable,
+    useSplit: hasSplit.value
   }
-
-  return list
 })
 
-const hasActions = computed(() => !!Object.keys(actions.value).length)
-const firstItemKey = computed(() => Object.keys(actions.value)?.[0])
+const primaryButtonProps = computed(() => {
+  const buttonProps = fullList.value[primaryKey.value] || {}
 
-// -------------------------------- tooltip ------------------------------------
-const tooltipLabel = computed(() => actions.value[firstItemKey.value]?.label)
-const hasTooltip = computed(() => {
-  return !isBtnDropdown.value && !props.useLabel && props.useTooltip
-})
+  return {
+    /**
+     * Caso seja "isSingle" e tenha a opção de deletar, significa que único botão
+     * que existe é o de deletar, então a cor precisa ser "DEFAULT_COLOR", em todos
+     * os outros cenários, é primary.
+     */
+    color: isSingle.value && hasDelete.value ? DEFAULT_COLOR : 'primary',
 
-// --------------------------------- button ------------------------------------
-const defaultButtonProps = computed(() => {
-  const { label, variant, ...buttonProps } = props.buttonProps
+    ...buttonProps,
 
-  return {
-    useHoverOnWhiteColor: true,
-    useLabelOnSmallScreen: false,
-    ...buttonProps
+    label: getLabel({ useLabel: props.useLabel, label: buttonProps.label }),
+    onClick: () => setClickHandler(buttonProps)
   }
 })
 
-const btnDropdownProps = computed(() => {
-  const { icon, label } = fullList.value[props.splitName] || {}
+const formattedList = computed(() => {
+  const buttonsPropsList = { ...fullList.value }
 
-  const {
-    icon: defaultIcon,
-    ...defaultBtnProps
-  } = defaultButtonProps.value
+  /**
+   * dropdownList: lista que ficará no menu dropdown.
+   * buttonsList: lista de botões que ficará **fora** do menu dropdown.
+   */
+  const payload = { dropdownList: {}, buttonsList: {} }
 
-  return {
-    buttonProps: {
-      ...(props.useLabel && { label: hasSplit.value ? label : 'Opções' }),
-      ...defaultBtnProps,
-      icon: icon || defaultIcon
-    },
+  if ((!hasSplitName.value || screen.isSmall) && !isSingle.value) {
+    const { buttonsList } = useOptionsActions({ color: DEFAULT_COLOR, props })
 
-    dropdownIcon: props.dropdownIcon,
-    useSplit: hasSplit.value,
+    payload.buttonsList = buttonsList.value
+    payload.dropdownList = buttonsPropsList
 
-    onClick: () => onClick(fullList.value[props.splitName])
+    return payload
   }
-})
 
-const btnProps = computed(() => {
-  const { color, icon } = actions.value[firstItemKey.value] || {}
-  const { color: defaultColor, ...defaultBtnProps } = defaultButtonProps.value
+  if (isSingle.value) {
+    const { buttonsList } = useSingleAction({ primaryButtonProps, primaryKey })
 
-  return {
-    color: color || defaultColor,
-    icon,
-    label: props.useLabel ? tooltipLabel.value : '',
-    onClick,
-    ...defaultBtnProps
-  }
-})
+    payload.buttonsList = buttonsList.value
 
-const isBtnDropdown = computed(() => Object.keys(fullList.value || {}).length > 1)
+    return payload
+  }
 
-// -------------------------------- component ----------------------------------
-const component = computed(() => {
-  const is = isBtnDropdown.value ? QasBtnDropdown : QasBtn
+  if (listSize.value === SPLIT_SIZE) {
+    const { buttonsList } = useDoubleSplitActions({
+      buttonsPropsList,
+      color: DEFAULT_COLOR,
+      primaryButtonProps,
+      primaryKey,
+      props
+    })
 
-  return {
-    is,
-    props: {
-      ...(isBtnDropdown.value ? btnDropdownProps.value : btnProps.value),
-      ...(hasDelete.value && props.deleteProps)
-    }
+    payload.buttonsList = buttonsList.value
   }
-})
 
-// --------------------------------- methods -----------------------------------
-function onClick (item = {}) {
-  if (!isBtnDropdown.value) {
-    item = actions.value[firstItemKey.value]
-  }
+  if (listSize.value > SPLIT_SIZE) {
+    const { list } = useSingleSplitActions({
+      buttonsPropsList,
+      primaryButtonProps,
+      primaryKey,
+      props
+    })
 
-  if (typeof item.handler === 'function') {
-    const { handler, ...filtered } = item
-    item.handler(filtered)
+    payload.buttonsList = list.value.buttonsList
+    payload.dropdownList = list.value.dropdownList
   }
-}
 
-// ------------------------------- composables ---------------------------------
-function useDelete () {
-  const hasDelete = computed(() => !!Object.keys(props.deleteProps).length)
-
-  const deleteBtnProps = computed(() => {
-    return {
-      ...(hasDelete.value && {
-        delete: {
-          color: 'grey-10',
-          icon: props.deleteIcon,
-          label: props.deleteLabel,
-          handler: () => qas.delete(props.deleteProps)
-        }
-      })
-    }
-  })
+  return payload
+})
+
+const { showTooltip, tooltipLabels } = useTooltips({ formattedList, fullList, props })
+
+// functions
+function getItemProps (item) {
+  const { disable, props: itemProps } = item
 
   return {
-    deleteBtnProps,
-    hasDelete
+    disable,
+    ...itemProps
   }
 }
 </script>

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

@@ -5,10 +5,14 @@ meta:
 
 props:
   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".
+    desc: Propriedades que são usadas no modo "Opções", que é quando não é usado a propriedade "splitName" ou esteja no mobile;
     default: {}
     type: Object
-    examples: ["{ color: 'white', icon: 'sym_r_person', useLabelOnSmallScreen: false }"]
+
+  disable:
+    desc: Desabilita o componente como um todo.
+    default: false
+    type: Boolean
 
   delete-icon:
     desc: Ícone do botão de deletar.

package/src/components/actions-menu/composables/use-delete.js

@@ -0,0 +1,30 @@
+import { computed } from 'vue'
+
+/**
+ * @param {{
+ *  color: string,
+ *  props: { deleteIcon: string, deleteLabel: string, deleteProps: object },
+ *  qas: { delete: function(object) }
+ * }}
+ */
+export default function useDelete ({ color, props, qas }) {
+  const hasDelete = computed(() => !!Object.keys(props.deleteProps).length)
+
+  const deleteBtnProps = computed(() => {
+    return {
+      ...(hasDelete.value && {
+        delete: {
+          color,
+          icon: props.deleteIcon,
+          label: props.deleteLabel,
+          handler: () => qas.delete(props.deleteProps)
+        }
+      })
+    }
+  })
+
+  return {
+    deleteBtnProps,
+    hasDelete
+  }
+}

package/src/components/actions-menu/composables/use-double-split-actions.js

@@ -0,0 +1,42 @@
+import setClickHandler from '../utils/set-click-handler'
+import getLabel from '../utils/get-label'
+
+import { computed } from 'vue'
+
+/**
+ * Cenário onde ficará um botão ao lado do outro "Ação primaria | Ação secundaria".
+ *
+ * @param {{
+ *  color: string,
+ *  props: { useLabel: boolean },
+ *  primaryKey: import('vue').ComputedRef<string>,
+ *  buttonsPropsList: import('vue').ComputedRef<object>
+ *  primaryButtonProps: import('vue').ComputedRef<primaryButtonProps>
+ * }} config
+ */
+export default function useDoubleSplitActions (config = {}) {
+  const { color, props, primaryKey, buttonsPropsList, primaryButtonProps } = config
+
+  const buttonsList = computed(() => {
+    const secondaryKey = Object.keys(buttonsPropsList).find(key => key !== primaryKey.value)
+    const secondaryButton = buttonsPropsList[secondaryKey]
+
+    return {
+      [primaryKey.value]: {
+        ...primaryButtonProps.value,
+        label: getLabel({ useLabel: props.useLabel, label: primaryButtonProps.value.label })
+      },
+
+      [secondaryKey]: {
+        ...secondaryButton,
+        color,
+        label: getLabel({ useLabel: props.useLabel, label: secondaryButton.label }),
+        onClick: () => setClickHandler(secondaryButton)
+      }
+    }
+  })
+
+  return {
+    buttonsList
+  }
+}

package/src/components/actions-menu/composables/use-options-actions.js

@@ -0,0 +1,28 @@
+import getLabel from '../utils/get-label'
+
+import { computed } from 'vue'
+
+/**
+ * Cenário onde não é utilizado com split e tenha mais de 1 item na lista,
+ * neste caso, ele se torna o botão de "opções" onde será usado em casos como
+ * dentro de cards, etc.
+ *
+ * @param {{ color: string, props: { buttonProps: object, useLabel: boolean } }}
+ */
+export default function useOptionsActions ({ props, color }) {
+  const buttonsList = computed(() => {
+    return {
+      options: {
+        color,
+        iconRight: 'sym_r_more_vert',
+        useLabelOnSmallScreen: false,
+        ...props.buttonProps,
+        label: getLabel({ useLabel: props.useLabel, label: 'Opções' }) // label não pode ser sobrescrita.
+      }
+    }
+  })
+
+  return {
+    buttonsList
+  }
+}

package/src/components/actions-menu/composables/use-single-action.js

@@ -0,0 +1,17 @@
+import { computed } from 'vue'
+
+/**
+ * Cenário para quando existir apenas 1 item na lista.
+ *
+ * @param {{
+ *  primaryKey: import('vue').ComputedRef<string>,
+ *  primaryButtonProps: import('vue').ComputedRef<primaryButtonProps>
+ * }}
+ */
+export default function useSingleAction ({ primaryKey, primaryButtonProps }) {
+  const buttonsList = computed(() => ({ [primaryKey.value]: { ...primaryButtonProps.value } }))
+
+  return {
+    buttonsList
+  }
+}

package/src/components/actions-menu/composables/use-single-split-actions.js

@@ -0,0 +1,35 @@
+import { computed } from 'vue'
+
+import getLabel from '../utils/get-label'
+
+/**
+ * Cenário onde vai ter mais de 2 itens na lista, então precisa ficar
+ * o botão primário fora do dropdown e o restante dentro do dropdown.
+ *
+ * @param {{
+ *  props: { useLabel: boolean },
+ *  primaryKey: import('vue').ComputedRef<string>,
+ *  buttonsPropsList: import('vue').ComputedRef<object>
+ *  primaryButtonProps: import('vue').ComputedRef<primaryButtonProps>
+ * }} config
+ */
+export default function useSingleSplitActions ({ buttonsPropsList, props, primaryKey, primaryButtonProps }) {
+  delete buttonsPropsList[primaryKey.value]
+
+  const list = computed(() => {
+    return {
+      buttonsList: {
+        [primaryKey.value]: {
+          ...primaryButtonProps.value,
+          label: getLabel({ useLabel: props.useLabel, label: primaryButtonProps.value.label })
+        }
+      },
+
+      dropdownList: buttonsPropsList
+    }
+  })
+
+  return {
+    list
+  }
+}

package/src/components/actions-menu/composables/use-tooltips.js

@@ -0,0 +1,43 @@
+import { computed } from 'vue'
+
+/**
+ * Composable responsável pelo tooltip
+ *
+ * @param {{
+ *  props: { useTooltip: boolean, useLabel: boolean },
+ *  formattedList: import('vue').ComputedRef<object>
+ *  fullList: import('vue').ComputedRef<object>
+ * }}
+ */
+export default function useTooltip ({ props, formattedList, fullList }) {
+  const hasTooltip = computed(() => !props.useLabel && props.useTooltip)
+
+  /**
+  * Precisa existir um tooltip para item de "formattedList.value.buttonsList",
+  * então é preciso fazer um tratamento, uma vez que dentro de "formattedList.value.buttonsList"
+  * não existe mais "labels", então recuperamos elas de "fullList".
+  */
+  const tooltipLabels = computed(() => {
+    if (!hasTooltip.value) return {}
+
+    const formattedProps = {}
+
+    for (const key in formattedList.value.buttonsList) {
+      formattedProps[key] = {
+        label: fullList.value[key]?.label
+      }
+    }
+
+    return formattedProps
+  })
+
+  function showTooltip ({ label }) {
+    return hasTooltip.value && label
+  }
+
+  return {
+    tooltipLabels,
+
+    showTooltip
+  }
+}

package/src/components/actions-menu/utils/get-label.js

@@ -0,0 +1,3 @@
+export default function getLabel ({ useLabel, label }) {
+  return useLabel ? label : ''
+}

package/src/components/actions-menu/utils/set-click-handler.js

@@ -0,0 +1,6 @@
+export default function setClickHandler (item = {}) {
+  if (typeof item.handler === 'function') {
+    const { handler, ...filtered } = item
+    item.handler(filtered)
+  }
+}

package/src/components/app-menu/QasAppMenu.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="qas-app-menu">
-    <q-drawer v-model="model" :behavior="behavior" class="shadow-2" :mini="isMiniMode" :mini-width="88" show-if-above :width="drawerWidth" @mouseenter="onMouseEvent" @mouseleave="onMouseEvent">
+    <q-drawer :key="reRenderCount" v-model="model" :behavior="behavior" class="shadow-2" :mini="isMiniMode" :mini-width="88" show-if-above :width="drawerWidth" @mouseenter="onMouseEvent" @mouseleave="onMouseEvent">
       <div class="column full-height justify-between no-wrap">
         <div class="full-width">
           <!-- Brand -->
@@ -93,7 +93,7 @@ import useAppUser from './composables/use-app-user'
 import useDevelopmentBadge from './composables/use-development-badge'
 import { useScreen } from '../../composables'
 
-import { ref, computed } from 'vue'
+import { ref, computed, watch } from 'vue'
 import { useRouter } from 'vue-router'
 
 defineOptions({
@@ -155,6 +155,7 @@ const rootRoute = router.hasRoute('Root') ? { name: 'Root' } : { path: '/' }
 
 const hasOpenedMenu = ref(false)
 const isMini = ref(screen.isLarge)
+const reRenderCount = ref(0)
 
 const composableParams = {
   props,
@@ -194,6 +195,24 @@ const classes = computed(() => {
   }
 })
 
+/**
+ * @desc Recurso tecnológico temporário (ou definitivo), este bug ocorre por conta
+ * da atualização do vue para a versão `v3.4+`, onde tiveram mudanças referentes a
+ * reatividade, existem issues abertas no Quasar, porém sem expectativas
+ * de que um dia será resolvido por parte deles.
+ *
+ * @see {@link https://github.com/quasarframework/quasar/issues/16651}
+ */
+watch(() => behavior.value, value => {
+  /**
+   * @desc quando o comportamento passa a ser desktop novamente é porque aconteceu um
+   * resize na pagina, então é necessário renderizar o componente QDrawer novamente.
+   */
+  if (value === 'desktop') {
+    reRenderCount.value += 1
+  }
+})
+
 // métodos
 function closeDrawer () {
   emit('update:modelValue', false)

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

@@ -72,9 +72,11 @@
 import QasAvatar from '../avatar/QasAvatar.vue'
 
 import useNotifications from '../../composables/use-notifications'
+import useQueryCache from '../../composables/use-query-cache'
 import { NotifySuccess, NotifyError } from '../../plugins'
 
 import { ref, computed, watch, inject } from 'vue'
+import { useRouter } from 'vue-router'
 
 defineOptions({ name: 'QasAppUser' })
 
@@ -111,8 +113,12 @@ const emit = defineEmits(['sign-out', 'toggle-notifications'])
 // vindo direto do boot api.js
 const axios = inject('axios')
 
+const router = useRouter()
+
 const { isNotificationsEnabled, unreadNotificationsCount } = useNotifications()
 
+const { reset } = useQueryCache()
+
 const companiesModel = ref('')
 const loading = ref(false)
 
@@ -198,9 +204,17 @@ async function setCompanies (value) {
     NotifyError('Falha ao alterar vínculo.')
   } finally {
     loading.value = false
+
+    clearCachedFilters()
   }
 }
 
+function clearCachedFilters () {
+  reset()
+
+  router.push({ query: {} })
+}
+
 function onMenuHide () {
   if (!companiesModel.value) {
     companiesModel.value = props.companyProps.modelValue

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

@@ -1,21 +1,25 @@
 <template>
   <div class="qas-btn-dropdown" :class="classes.parent">
-    <div v-if="hasLeftButton" :class="classes.leftSide">
-      <slot name="left-button">
-        <qas-btn variant="tertiary" v-bind="defaultButtonProps" @click="onClick">
-          <q-menu v-if="hasMenuOnLeftSide" v-model="isMenuOpened" anchor="bottom right" auto-close self="top right" @update:model-value="onUpdateMenuValue">
-            <div :class="classes.menuContent">
-              <slot />
-            </div>
-          </q-menu>
-        </qas-btn>
-      </slot>
+    <div v-if="hasButtons" class="flex">
+      <div v-for="(buttonProps, key, index) in props.buttonsPropsList" :key="key">
+        <div class="flex">
+          <qas-btn :disable="props.disable" v-bind="buttonProps" variant="tertiary" @click="onClick">
+            <q-menu v-if="hasMenuOnLeftSide" v-model="isMenuOpened" anchor="bottom right" auto-close self="top right" @update:model-value="onUpdateMenuValue">
+              <div :class="classes.menuContent">
+                <slot />
+              </div>
+            </q-menu>
+          </qas-btn>
+
+          <slot :name="`bottom-${key}`" />
+
+          <q-separator v-if="hasSeparator(index)" class="q-mx-sm qas-btn-dropdown__separator self-center" dark vertical />
+        </div>
+      </div>
     </div>
 
-    <q-separator v-if="hasSeparator" class="q-mr-sm qas-btn-dropdown__separator self-center" dark vertical />
-
     <div v-if="props.useSplit">
-      <qas-btn color="grey-10" :icon="props.dropdownIcon" variant="tertiary">
+      <qas-btn color="grey-10" :disable="disable" :icon="props.dropdownIcon" variant="tertiary">
         <q-menu v-if="hasDefaultSlot" anchor="bottom right" auto-close self="top right">
           <div :class="classes.menuContent">
             <slot />
@@ -37,7 +41,7 @@ defineOptions({
 })
 
 const props = defineProps({
-  buttonProps: {
+  buttonsPropsList: {
     default: () => ({}),
     type: Object
   },
@@ -47,7 +51,11 @@ const props = defineProps({
     type: String
   },
 
-  useSplit: {
+  disable: {
+    type: Boolean
+  },
+
+  menu: {
     type: Boolean
   },
 
@@ -55,8 +63,13 @@ const props = defineProps({
     type: Boolean
   },
 
-  menu: {
+  useSplit: {
     type: Boolean
+  },
+
+  useTooltip: {
+    type: Boolean,
+    default: true
   }
 })
 
@@ -67,47 +80,24 @@ const screen = useScreen()
 
 const isMenuOpened = ref(false)
 
-const defaultButtonProps = computed(() => {
-  const {
-    icon,
-    iconRight,
-    color,
-    ...defaultProps
-  } = props.buttonProps
-
-  const defaultIconRight = iconRight || props.dropdownIcon
-
-  return {
-    useLabelOnSmallScreen: false,
-
-    ...defaultProps,
-
-    color: color || (!props.useSplit ? 'grey-10' : 'primary'),
-    ...(!props.useSplit && { iconRight: defaultIconRight }),
-    ...(props.useSplit && { icon })
-  }
-})
-
 const classes = computed(() => {
   return {
     parent: {
       'flex inline items-center': props.useSplit
     },
 
-    leftSide: {
-      'q-mr-sm': props.useSplit
-    },
-
     menuContent: {
       'q-pa-md': props.useMenuPadding
     }
   }
 })
 
+const buttonsPropsListSize = computed(() => Object.keys(props.buttonsPropsList).length)
+const isSingleButton = computed(() => buttonsPropsListSize.value === 1)
+
+const hasButtons = computed(() => !screen.isSmall || !props.useSplit)
 const hasDefaultSlot = computed(() => !!slots.default)
-const hasLeftButton = computed(() => !screen.isSmall || !props.useSplit)
-const hasMenuOnLeftSide = computed(() => hasDefaultSlot.value && !props.useSplit)
-const hasSeparator = computed(() => !screen.isSmall && props.useSplit)
+const hasMenuOnLeftSide = computed(() => hasDefaultSlot.value && !props.useSplit && isSingleButton.value)
 
 watch(() => props.menu, value => {
   isMenuOpened.value = value
@@ -120,6 +110,14 @@ function onUpdateMenuValue (value) {
 function onClick (event) {
   emit('click', event)
 }
+
+function isLast (index) {
+  return index + 1 === buttonsPropsListSize.value
+}
+
+function hasSeparator (index) {
+  return props.useSplit || !isLast(index)
+}
 </script>
 
 <style lang="scss">

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

@@ -4,11 +4,16 @@ 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' }"]
+  buttons-props-list:
+    desc: Lista de propriedades repassadas para os botões.
+    default: []
+    type: Array
+    examples: ["[{ color: 'white', icon: 'sym_r_person' }]"]
+
+  disable:
+    desc: Desabilita o componente como um todo.
+    default: false
+    type: Boolean
 
   dropdown-icon:
     desc: Ícone a direita do dropdown.
@@ -33,10 +38,9 @@ props:
 
 slots:
   default:
-    desc: Slot para passar o conteúdo do dropdown (menu)
-
-  left-button:
-    desc: Slot para substituir o botão a esquerda.
+    desc: Slot para passar o conteúdo do dropdown (menu).
+  bottom-[buttons-props-list-key]:
+    desc: Slot unitário para acessar abaixo de cada botão (normalmente utilizado para tooltip).
 
 events:
   '@click -> function (event)':

package/src/components/uploader/QasUploader.vue

@@ -489,7 +489,7 @@ export default {
       if (file.isFailed) return
 
       if (!this.isMultiple) {
-        return this.$emit('update:modelValue')
+        return this.$emit('update:modelValue', this.useObjectModel ? {} : '')
       }
 
       const clonedValue = extend(true, [], this.modelValue)
@@ -605,6 +605,14 @@ export default {
       this.$emit('update:modelValue', this.isMultiple ? [...this.modelValue, model] : model || '')
 
       this.updateUploading(false)
+    },
+
+    reset () {
+      this.$refs.uploader.reset()
+
+      const emptyModel = this.isMultiple ? [] : this.useObjectModel ? {} : ''
+
+      this.$emit('update:modelValue', emptyModel)
     }
   }
 }

package/src/components/uploader/QasUploader.yml

@@ -186,3 +186,7 @@ events:
       value:
         desc: Retorna se está ou não fazendo um upload.
         type: Boolean
+
+methods:
+  'reset: () => void':
+    desc: Reseta o campo do uploader.

package/src/composables/use-query-cache.js

@@ -1,7 +1,7 @@
 import { SessionStorage } from 'quasar'
 import { filterObject } from '../helpers'
 
-const cachedFilters = SessionStorage.getItem('cachedFilters') || {}
+let cachedFilters = SessionStorage.getItem('cachedFilters') || {}
 
 function updateSessionStorage () {
   SessionStorage.set('cachedFilters', cachedFilters)
@@ -41,6 +41,12 @@ export default function () {
     updateSessionStorage()
   }
 
+  function reset () {
+    cachedFilters = {}
+
+    updateSessionStorage()
+  }
+
   return {
     addOne,
     addMany,
@@ -48,6 +54,7 @@ export default function () {
     findAll,
     clearOne,
     clearAll,
-    cachedFilters
+    cachedFilters,
+    reset
   }
 }