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

package/src/components/text-truncate/QasTextTruncate.vue

@@ -2,7 +2,17 @@
   <div ref="parent" :class="classes">
     <div class="no-wrap row text-no-wrap">
       <div ref="truncate" class="ellipsis">
-        <slot>{{ formattedText }}</slot>
+        <slot>
+          <div v-if="hasBadges" class="items-center q-col-gutter-sm row" :class="badgeParentClasses">
+            <div v-for="(item, index) in normalizedBadgesList" :key="index">
+              <qas-badge v-bind="getBadgeProps(item)" />
+            </div>
+          </div>
+
+          <div v-else class="ellipsis">
+            {{ formattedText }}
+          </div>
+        </slot>
       </div>
 
       <qas-btn v-if="hasButton" class="q-ml-sm" :label="buttonLabel" @click.stop.prevent="toggle" />
@@ -10,7 +20,7 @@
 
     <qas-dialog v-model="show" v-bind="defaultProps" aria-label="Diálogo de texto completo" role="dialog">
       <template v-if="isCounterMode" #description>
-        <div class="q-col-gutter-y-md row">
+        <div class="q-col-gutter-y-sm row">
           <div
             v-for="(item, index) in normalizedList"
             :key="index"
@@ -25,17 +35,19 @@
 </template>
 
 <script setup>
+import QasDialog from '../dialog/QasDialog.vue'
+
+import { baseProps } from '../../shared/badge-config'
+
 import {
   computed,
+  nextTick,
   onMounted,
   onUnmounted,
   ref,
   watch
 } from 'vue'
 
-import QasDialog from '../dialog/QasDialog.vue'
-
-// define component name
 defineOptions({ name: 'QasTextTruncate' })
 
 // props
@@ -55,6 +67,11 @@ const props = defineProps({
     default: ''
   },
 
+  emptyText: {
+    type: String,
+    default: '-'
+  },
+
   maxWidth: {
     type: Number,
     default: 0
@@ -85,13 +102,16 @@ const props = defineProps({
     default: () => []
   },
 
+  useBadge: {
+    type: Boolean
+  },
+
   useObjectList: {
     type: Boolean
   },
 
-  emptyText: {
-    type: String,
-    default: '-'
+  useWrapBadge: {
+    type: Boolean
   }
 })
 
@@ -100,11 +120,18 @@ const truncate = ref(null)
 const parent = ref(null)
 
 // composable
+const {
+  hasBadges,
+  badgeParentClasses,
+  normalizedBadgesList,
+  getBadgeProps
+} = useBadgeHandler()
+
 const {
   textContent,
   isTruncated,
   truncateText
-} = useTruncate({ parent, props })
+} = useTruncate({ parent, props, hasBadges })
 
 const {
   defaultProps,
@@ -122,6 +149,7 @@ const {
 
 useMutationObserver({ truncate, callbackFn: truncateText })
 
+// computeds
 const classes = computed(() => [`text-${props.color}`, `text-${props.typography}`])
 
 const formattedText = computed(() => props.list.length || props.text ? displayText.value : props.emptyText)
@@ -182,7 +210,7 @@ function useMutationObserver ({ truncate, callbackFn = () => {} }) {
   }
 }
 
-function useTruncate ({ parent, props }) {
+function useTruncate ({ parent, props, hasBadges }) {
   // reactive vars
   const maxPossibleWidth = ref('')
   const textContent = ref('')
@@ -191,14 +219,19 @@ function useTruncate ({ parent, props }) {
   // lifecycle
   onMounted(() => truncateText())
 
-  // watch
-  watch(() => props.maxWidth, truncateText)
-
   // computed
   const isTruncated = computed(() => textWidth.value > maxPossibleWidth.value)
 
+  // watch
+  watch(() => props.maxWidth, truncateText)
+
   // functions
-  function truncateText () {
+  async function truncateText () {
+    await nextTick()
+
+    // Se tiver badges, então não pode ser feito calculo de width.
+    if (hasBadges.value) return
+
     parent.value.style.maxWidth = '100%'
     textWidth.value = truncate.value.clientWidth
     textContent.value = truncate.value?.innerHTML
@@ -271,4 +304,34 @@ function useCounter () {
     counterLabel
   }
 }
+
+function useBadgeHandler () {
+  const hasBadges = computed(() => props.useBadge && props.useObjectList && props.list.length)
+
+  const normalizedBadgesList = computed(() => props.list.slice(0, props.maxVisibleItem))
+  const badgeParentClasses = computed(() => ({ 'no-wrap': !props.useWrapBadge }))
+
+  function getBadgeProps (item) {
+    const itemProps = {}
+
+    /**
+     * recupera somente keys que estão em baseProps do QasBadge
+     * pra evitar que passe propriedades desnecessárias
+     */
+    for (const key in item) {
+      if (baseProps[key]) {
+        itemProps[key] = item[key]
+      }
+    }
+
+    return itemProps
+  }
+
+  return {
+    hasBadges,
+    badgeParentClasses,
+    normalizedBadgesList,
+    getBadgeProps
+  }
+}
 </script>

package/src/components/text-truncate/QasTextTruncate.yml

@@ -18,6 +18,10 @@ props:
     desc: Seta o título do dialog.
     type: String
 
+  empty-text:
+    desc: Texto a ser exibido no caso de não houver itens no "list" ou o "text" for vazio.
+    type: String
+
   max-width:
     desc: Seta o tamanho máximo do texto.
     type: Number
@@ -47,13 +51,20 @@ props:
     default: []
     type: Array
 
+  use-badge:
+    desc: Habilita badges para cada item da lista.
+    default: false
+    type: Boolean
+
   use-object-list:
     desc: Utiliza a propriedade "list" como array de objeto contendo label (uso junto a prop list).
+    default: false
     type: Boolean
 
-  empty-text:
-    desc: Texto a ser exibido no caso de não houver itens no "list" ou o "text" for vazio.
-    type: String
+  use-wrap-badge:
+    desc: habilita a quebra de linha das badges quando o texto for muito grande.
+    default: false
+    type: Boolean
 
 slots:
   default:

package/src/components/uploader/QasUploader.vue

@@ -3,18 +3,20 @@
     <q-uploader ref="uploader" auto-upload class="bg-transparent" :class="uploaderClasses" v-bind="attributes" :factory="factory" flat :max-files="maxFiles" method="PUT" @factory-failed="factoryFailed" @uploaded="uploaded" @uploading="updateUploading(true)">
       <template #header="scope">
         <slot name="header" :scope="scope">
-          <div class="flex items-center justify-between">
-            <div>
-              <qas-label v-bind="labelProps" />
-
-              <div v-if="errorMessage" class="q-mt-xs text-caption text-negative">
-                {{ errorMessage }}
+          <qas-header class="q-mb-none" v-bind="getHeaderProps(scope)">
+            <template #description>
+              <div :class="headerDescriptionClasses">
+                {{ headerProps.description }}
               </div>
-            </div>
+            </template>
+
+            <template v-for="(_, name) in $slots" #[getHeaderSlotName(name)]="context">
+              <slot :name v-bind="context" />
+            </template>
+          </qas-header>
 
-            <div v-if="hasAddFile">
-              <qas-btn color="primary" icon="sym_r_add" :label="addButtonLabel" :use-label-on-small-screen="false" variant="tertiary" @click="onAddButtonClick(scope)" />
-            </div>
+          <div v-if="errorMessage" class="q-mt-xs text-caption text-negative">
+            {{ errorMessage }}
           </div>
 
           <!-- ------------------------------------ tags hidden -------------------------------------- -->
@@ -24,15 +26,13 @@
       </template>
 
       <template #list="scope">
-        <div v-if="hasGalleryCardSection(getFilesList(scope.files, scope))" class="q-col-gutter-lg q-mt-sm row">
+        <div v-if="hasGalleryCardSection(getFilesList(scope.files, scope))" class="q-col-gutter-lg row">
           <div v-for="(file, key, index) in getFilesList(scope.files, scope)" :key="index" :class="columnClasses">
             <pv-uploader-gallery-card v-bind="getUploaderGalleryCardProps({ key, scope, file, index })" />
           </div>
         </div>
 
-        <div v-else class="q-mt-lg">
-          <qas-empty-result-text />
-        </div>
+        <qas-empty-result-text v-else />
       </template>
     </q-uploader>
 
@@ -42,6 +42,7 @@
 
 <script>
 import PvUploaderGalleryCard from './private/PvUploaderGalleryCard.vue'
+import QasHeader from '../header/QasHeader.vue'
 
 import { uid, extend } from 'quasar'
 import { NotifyError } from '../../plugins'
@@ -53,7 +54,8 @@ export default {
   name: 'QasUploader',
 
   components: {
-    PvUploaderGalleryCard
+    PvUploaderGalleryCard,
+    QasHeader
   },
 
   inheritAttrs: false,
@@ -125,6 +127,11 @@ export default {
       type: Object
     },
 
+    headerProps: {
+      type: Object,
+      default: () => ({})
+    },
+
     label: {
       type: String,
       default: ''
@@ -199,6 +206,12 @@ export default {
       return this.$attrs
     },
 
+    headerDescriptionClasses () {
+      return {
+        'text-negative': this.error
+      }
+    },
+
     columnClasses () {
       const irregularClasses = ['col']
       const columns = this.defaultColumns
@@ -290,15 +303,6 @@ export default {
       return this.$attrs.multiple || this.$attrs.multiple === ''
     },
 
-    labelProps () {
-      return {
-        label: this.label,
-        margin: 'none',
-
-        ...(this.error && { color: 'negative' })
-      }
-    },
-
     self () {
       return this
     },
@@ -613,6 +617,48 @@ export default {
       const emptyModel = this.isMultiple ? [] : this.useObjectModel ? {} : ''
 
       this.$emit('update:modelValue', emptyModel)
+    },
+
+    getHeaderSlotName (name) {
+      return name.replace('header-', '')
+    },
+
+    getHeaderProps (scope) {
+      const { labelProps, actionsMenuProps, ...othersHeaderProps } = this.headerProps
+
+      const { list, ...othersActionsMenuProps } = actionsMenuProps || {}
+
+      return {
+        spacing: 'lg',
+
+        labelProps: {
+          label: this.label,
+
+          margin: 'none',
+
+          ...labelProps,
+
+          ...(this.error && { color: 'negative' })
+        },
+
+        ...(this.hasAddFile && {
+          actionsMenuProps: {
+            list: {
+              add: {
+                icon: 'sym_r_add',
+                label: this.addButtonLabel,
+                handler: () => this.onAddButtonClick(scope)
+              },
+
+              ...list
+            },
+
+            ...othersActionsMenuProps
+          }
+        }),
+
+        ...othersHeaderProps
+      }
     }
   }
 }

package/src/components/uploader/QasUploader.yml

@@ -83,8 +83,13 @@ props:
     default: {}
     type: Object
 
+  header-props:
+    desc: Propriedades repassadas para o componente "QasHeader".
+    default: {}
+    type: Object
+
   label:
-    desc: Label do componente, repassado para o componente "QasLabel".
+    desc: Label do componente.
     type: String
 
   max-files:
@@ -158,6 +163,15 @@ slots:
         default: {}
         type: Object
 
+  header-actions:
+    desc: Acessa o slot actions do "QasHeader".
+
+  header-description:
+    desc: Acessa o slot description do "QasHeader".
+
+  header-label:
+    desc: Acessa o slot label do "QasHeader".
+
   list:
     desc: Acesso ao conteúdo onde fica a listagem de arquivos.
     scope:

package/src/components/welcome/QasWelcome.vue

@@ -14,6 +14,10 @@
       </slot>
     </div>
 
+    <div v-if="hasAfterGreetingSlot" class="q-mt-lg">
+      <slot name="after-greeting" />
+    </div>
+
     <div v-if="hasShortcuts">
       <qas-label class="q-mt-lg" label="Atalhos" />
 
@@ -102,6 +106,10 @@ export default {
       if (time >= '12:00' && time < '18:59') return 'Boa tarde'
 
       return 'Boa noite'
+    },
+
+    hasAfterGreetingSlot () {
+      return !!this.$slots['after-greeting']
     }
   }
 }

package/src/components/welcome/QasWelcome.yml

@@ -21,3 +21,6 @@ props:
 slots:
   actions:
     desc: Slot para substituir o QasActionsMenu.
+
+  after-greeting:
+    desc: Slot para acessar o conteúdo depois da saudação.

package/src/composables/index.js

@@ -1,8 +1,10 @@
 export { default as useContext } from './use-context.js'
+export { default as useDefaultFilters } from './use-default-filters.js'
 export { default as useForm } from './use-form.js'
 export { default as useHistory } from './use-history.js'
+export { default as useNotifications } from './use-notifications.js'
 export { default as useQueryCache } from './use-query-cache.js'
 export { default as useScreen } from './use-screen.js'
-export { default as useNotifications } from './use-notifications.js'
 
 export * from './use-notifications.js'
+export * from './use-default-filters.js'

package/src/composables/private/index.js

@@ -1,3 +1,4 @@
 export { default as useView } from './use-view'
 export { default as useGenerator } from './use-generator'
 export { default as useToggleVisibility } from './use-toggle-visibility'
+export { default as useAuthUser } from './use-auth-user'

package/src/composables/private/use-auth-user.js

@@ -0,0 +1,20 @@
+import { LocalStorage } from 'quasar'
+
+import { computed, ref } from 'vue'
+
+const user = ref(LocalStorage.getItem('user'))
+
+export default function useAuthUser () {
+  window.addEventListener('message', ({ data }) => {
+    if (data.type !== 'updateUser') return
+
+    user.value = data.user
+  })
+
+  const hasUser = computed(() => !!user.value)
+
+  return {
+    user,
+    hasUser
+  }
+}

package/src/composables/private/use-generator.js

@@ -1,6 +1,8 @@
-import { computed } from 'vue'
 import { Spacing } from '../../enums/Spacing'
 import { gutterValidator } from '../../helpers/private/gutter-validator'
+import useScreen from '../use-screen'
+
+import { computed } from 'vue'
 
 const IRREGULAR_CLASSES = ['col', 'col-auto', 'fit']
 
@@ -21,7 +23,7 @@ export const baseProps = {
   },
 
   gutter: {
-    default: Spacing.Md,
+    default: undefined,
     type: [String, Boolean],
     validator: gutterValidator
   }
@@ -34,20 +36,33 @@ export const baseProps = {
  * @name useGenerator
  * @param {Object} options - Opções do componente.
  * @param {baseProps} options.props - Propriedades do componente.
+ * @param {boolean} options.isGrid - Propriedades do componente.
  * @returns {{
  *  classes: classes,
  *  getFieldClass: getFieldClass
  * }}
  */
-export default function ({ props = {} }) {
+export default function ({ props = {}, isGrid = false }) {
+  const screen = useScreen()
+
+  /**
+   * Se a propriedade gutter não for passada, será calculada automaticamente.
+   * se for usado no grid e for inline, o gutter será menor.
+   */
+  const defaultGutter = computed(() => {
+    if (props.gutter !== undefined) return props.gutter
+
+    return isGrid && (props.useInline && !screen.isSmall) ? Spacing.Sm : Spacing.Md
+  })
+
   /**
    * @type {{ value: string[] | string }}
    */
   const classes = computed(() => {
     const classesList = ['row']
 
-    if (props.gutter) {
-      classesList.push(`q-col-gutter-${props.gutter}`)
+    if (defaultGutter.value) {
+      classesList.push(`q-col-gutter-${defaultGutter.value}`)
     }
 
     return classesList

package/src/composables/use-default-filters.js

@@ -0,0 +1,106 @@
+import { computed, ref } from 'vue'
+import { LocalStorage, is } from 'quasar'
+
+const filterQuery = ref({})
+
+const defaultFiltersHooks = {
+  defaultFiltersChange: []
+}
+
+/**
+ * Define os filtros padrão antes de entrar na rota.
+ *
+ * Prioridade de aplicação dos filtros:
+ * 1 - Se o filtro estiver salvo no estado global, então utiliza ele.
+ * 2 - Se o filtro já estiver na query, então utiliza ele.
+ * 3 - Se o filtro já estiver salvo no LocalStorage, então utiliza ele.
+ *
+ * @param {Object} to - Rota de destino.
+ * @param {Object} _from - Rota de origem.
+ * @param {Function} next - Função de redirecionamento.
+ * @param {Array} queryList='company' - Lista de filtros a serem aplicados.
+ */
+export function setDefaultFiltersBeforeEnter (to, _from, next, queryList = ['company']) {
+  const { getDefaultFiltersFromStorage, setFilterQuery } = useDefaultFilters()
+
+  const { query } = to
+  const newQuery = { ...query }
+
+  // recupera os filtros padrão do LocalStorage
+  const defaultFiltersFromStorage = getDefaultFiltersFromStorage()
+
+  queryList.forEach(name => {
+    // 1. se o filtro já estiver salvo no estado, então utiliza ele
+    if (filterQuery.value[name]) {
+      newQuery[name] = filterQuery.value[name]
+      return
+    }
+
+    // 2. se o filtro já estiver na query, então utiliza ele
+    if (query[name]) {
+      setFilterQuery(query[name], name)
+
+      return
+    }
+
+    const storedFilter = defaultFiltersFromStorage[name]
+
+    // 3. se o filtro já estiver salvo no LocalStorage, então utiliza ele
+    if (storedFilter) {
+      setFilterQuery(storedFilter, name)
+      newQuery[name] = storedFilter
+    }
+  })
+
+  /**
+   * Verifica se houve mudanças na query antes de redirecionar, sem essa validação
+   * o redirecionamento ocorre mesmo que a query seja a mesma, gerando loop infinito.
+   */
+  if (!is.deepEqual(newQuery, query)) return next({ ...to, query: newQuery, replace: true })
+
+  next()
+}
+
+/**
+ * Este composable recupera os filtros default salvos no LocalStorage na chave 'defaultFilters'.
+ */
+export default function useDefaultFilters () {
+  const hasFilterQuery = computed(() => !!Object.keys(filterQuery.value).length)
+
+  function setFilterQuery (query, name = 'company') {
+    filterQuery.value[name] = query
+  }
+
+  function getDefaultFiltersFromStorage () {
+    const defaultFiltersFromStorage = LocalStorage.getItem('defaultFilters') || {}
+
+    return defaultFiltersFromStorage
+  }
+
+  function triggerDefaultFiltersChange (newFilters, oldFilters) {
+    // necessário verificar se houve mudanças antes de disparar o evento para não duplicar.
+    if (is.deepEqual(newFilters, oldFilters)) return
+
+    defaultFiltersHooks.defaultFiltersChange.forEach(hook => hook(newFilters, oldFilters))
+  }
+
+  function onDefaultFiltersChange (callback) {
+    defaultFiltersHooks.defaultFiltersChange.push(callback)
+  }
+
+  function removeOnDefaultFiltersChange (callback) {
+    const index = defaultFiltersHooks.defaultFiltersChange.indexOf(callback)
+
+    if (~index) defaultFiltersHooks.defaultFiltersChange.splice(index, 1)
+  }
+
+  return {
+    filterQuery,
+    hasFilterQuery,
+    getDefaultFiltersFromStorage,
+    onDefaultFiltersChange,
+    removeOnDefaultFiltersChange,
+    setFilterQuery,
+    triggerDefaultFiltersChange
+  }
+}

package/src/composables/use-notifications.js

@@ -4,6 +4,8 @@ import hasParentByClassName from '../helpers/private/has-parent-by-class-name'
 import { Notify } from 'quasar'
 import { ref } from 'vue'
 
+import naveNotificationSound from '../assets/sounds/nave-notification.mp3'
+
 const callbackFunctions = {
   onNotificationReceived: []
 }
@@ -63,6 +65,8 @@ export default function () {
       timeout: 30000
     })
 
+    sendNotificationSound()
+
     /**
      * Função que é chamada quando o usuário clica na notificação, se a notificação
      * tem link, então ele vai ser redirecionado para o link em uma nova aba, caso
@@ -96,6 +100,16 @@ export default function () {
          </div>
       `)
     }
+
+    /**
+     * Função que toca o som de notificação.
+     */
+    function sendNotificationSound () {
+      const audio = new Audio(naveNotificationSound)
+
+      // o áudio agora é reproduzível; reproduza-o se as permissões permitirem
+      audio.addEventListener('canplaythrough', audio.play)
+    }
   }
 
   return {

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

@@ -19,7 +19,7 @@ export default function () {
   }
 
   function findOne (key, filter) {
-    return cachedFilters[key][filter]
+    return cachedFilters[key]?.[filter]
   }
 
   function findAll (key) {