@bildvitta/quasar-ui-asteroid 3.15.0-beta.8 → 3.15.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bildvitta/quasar-ui-asteroid",
   "description": "Asteroid",
-  "version": "3.15.0-beta.8",
+  "version": "3.15.0",
   "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,121 @@ 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 defaultButtonPropsList = computed(() => {
+  const defaultButtonPropsList = {
+    useHoverOnWhiteColor: true,
+    useLabelOnSmallScreen: false
   }
 
-  return list
-})
+  const normalizedButtonPropsList = {}
 
-const hasActions = computed(() => !!Object.keys(actions.value).length)
-const firstItemKey = computed(() => Object.keys(actions.value)?.[0])
+  for (const key in formattedList.value.buttonsList) {
+    normalizedButtonPropsList[key] = {
+      ...defaultButtonPropsList,
+      ...formattedList.value.buttonsList[key]
+    }
+  }
 
-// -------------------------------- tooltip ------------------------------------
-const tooltipLabel = computed(() => actions.value[firstItemKey.value]?.label)
-const hasTooltip = computed(() => {
-  return !isBtnDropdown.value && !props.useLabel && props.useTooltip
+  return normalizedButtonPropsList
 })
 
-// --------------------------------- button ------------------------------------
-const defaultButtonProps = computed(() => {
-  const { label, variant, ...buttonProps } = props.buttonProps
-
+const btnDropdownProps = computed(() => {
   return {
-    useHoverOnWhiteColor: true,
-    useLabelOnSmallScreen: false,
-    ...buttonProps
+    buttonsPropsList: defaultButtonPropsList.value,
+    disable: props.disable,
+    useSplit: hasSplit.value
   }
 })
 
-const btnDropdownProps = computed(() => {
-  const { icon, label } = fullList.value[props.splitName] || {}
-
-  const {
-    icon: defaultIcon,
-    ...defaultBtnProps
-  } = defaultButtonProps.value
+const primaryButtonProps = computed(() => {
+  const buttonProps = fullList.value[primaryKey.value] || {}
 
   return {
-    buttonProps: {
-      ...(props.useLabel && { label: hasSplit.value ? label : 'Opções' }),
-      ...defaultBtnProps,
-      icon: icon || defaultIcon
-    },
+    /**
+     * 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',
 
-    dropdownIcon: props.dropdownIcon,
-    useSplit: hasSplit.value,
+    ...buttonProps,
 
-    onClick: () => onClick(fullList.value[props.splitName])
+    label: getLabel({ useLabel: props.useLabel, label: buttonProps.label }),
+    onClick: () => setClickHandler(buttonProps)
   }
 })
 
-const btnProps = computed(() => {
-  const { color, icon } = actions.value[firstItemKey.value] || {}
-  const { color: defaultColor, ...defaultBtnProps } = defaultButtonProps.value
+const formattedList = computed(() => {
+  const buttonsPropsList = { ...fullList.value }
 
-  return {
-    color: color || defaultColor,
-    icon,
-    label: props.useLabel ? tooltipLabel.value : '',
-    onClick,
-    ...defaultBtnProps
+  /**
+   * dropdownList: lista que ficará no menu dropdown.
+   * buttonsList: lista de botões que ficará **fora** do menu dropdown.
+   */
+  const payload = { dropdownList: {}, buttonsList: {} }
+
+  if ((!hasSplitName.value || screen.isSmall) && !isSingle.value) {
+    const { buttonsList } = useOptionsActions({ color: DEFAULT_COLOR, props })
+
+    payload.buttonsList = buttonsList.value
+    payload.dropdownList = buttonsPropsList
+
+    return payload
   }
-})
 
-const isBtnDropdown = computed(() => Object.keys(fullList.value || {}).length > 1)
+  if (isSingle.value) {
+    const { buttonsList } = useSingleAction({ primaryButtonProps, primaryKey })
 
-// -------------------------------- component ----------------------------------
-const component = computed(() => {
-  const is = isBtnDropdown.value ? QasBtnDropdown : QasBtn
+    payload.buttonsList = buttonsList.value
 
-  return {
-    is,
-    props: {
-      ...(isBtnDropdown.value ? btnDropdownProps.value : btnProps.value),
-      ...(hasDelete.value && props.deleteProps)
-    }
+    return payload
   }
-})
 
-// --------------------------------- methods -----------------------------------
-function onClick (item = {}) {
-  if (!isBtnDropdown.value) {
-    item = actions.value[firstItemKey.value]
+  if (listSize.value === SPLIT_SIZE) {
+    const { buttonsList } = useDoubleSplitActions({
+      buttonsPropsList,
+      color: DEFAULT_COLOR,
+      primaryButtonProps,
+      primaryKey,
+      props
+    })
+
+    payload.buttonsList = buttonsList.value
   }
 
-  if (typeof item.handler === 'function') {
-    const { handler, ...filtered } = item
-    item.handler(filtered)
+  if (listSize.value > SPLIT_SIZE) {
+    const { list } = useSingleSplitActions({
+      buttonsPropsList,
+      primaryButtonProps,
+      primaryKey,
+      props
+    })
+
+    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,27 @@
+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',
+        ...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/private/PvAppMenuDropdown.vue

@@ -41,14 +41,16 @@ const props = defineProps({
 const defaultButtonDropdownProps = computed(() => ({
   ...props.buttonDropdownProps,
 
-  buttonProps: {
-    align: 'between',
-    class: 'text-subtitle2',
-    color: 'primary',
-    iconRight: 'sym_r_expand_more',
-    label: props.currentModule.label,
-    useEllipsis: true,
-    useLabelOnSmallScreen: true
+  buttonsPropsList: {
+    modules: {
+      align: 'between',
+      class: 'text-subtitle2',
+      color: 'primary',
+      iconRight: 'sym_r_expand_more',
+      label: props.currentModule.label,
+      useEllipsis: true,
+      useLabelOnSmallScreen: true
+    }
   }
 }))
 

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