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

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) {

package/src/helpers/set-scroll-on-grab.js

@@ -7,10 +7,11 @@
 *  onMoveFn: function({ element: HTMLElement, event: MouseEvent | TouchEvent }),
 *  onScrollFn: function({ element: HTMLElement, event: Event })
 * }} options
+* @param {String} cancelMouseDownTarget
 *
 * @returns {{ element: HTMLElement, destroyEvents: function }}
 */
-export default function (element, options = {}) {
+export default function (element, options = {}, cancelMouseDownTarget) {
   let isDown = false
   let startX
   let scrollLeft
@@ -46,6 +47,13 @@ export default function (element, options = {}) {
   }
 
   function onMouseEnter (event) {
+    /**
+     * closest busca ancestral mais próximo de um elemento, ou seja, verifica se no event que recebo, tenho a classe no qual nao se deve aplicar o grab.
+     */
+    const targetElement = cancelMouseDownTarget ? event.target.closest(`.${cancelMouseDownTarget}`) : null
+
+    if (!!cancelMouseDownTarget && !!targetElement) return null
+
     onEnter()
 
     startX = event.pageX - element.offsetLeft

package/src/shared/badge-config.js

@@ -0,0 +1,29 @@
+export const baseProps = {
+  color: {
+    type: String,
+    default: 'light-blue-2'
+  },
+
+  label: {
+    type: String,
+    default: ''
+  },
+
+  multiLine: {
+    type: Boolean
+  },
+
+  textColor: {
+    type: String,
+    default: 'black'
+  },
+
+  removable: {
+    type: Boolean
+  },
+
+  tabindex: {
+    type: [String, Number],
+    default: undefined
+  }
+}

package/src/vue-plugin.js

@@ -14,6 +14,7 @@ import QasBtnDropdown from './components/btn-dropdown/QasBtnDropdown.vue'
 import QasCard from './components/card/QasCard.vue'
 import QasCardImage from './components/card-image/QasCardImage.vue'
 import QasCheckbox from './components/checkbox/QasCheckbox.vue'
+import QasSelectFilter from './components/select-filter/QasSelectFilter.vue'
 import QasCopy from './components/copy/QasCopy.vue'
 import QasDate from './components/date/QasDate.vue'
 import QasDateTimeInput from './components/date-time-input/QasDateTimeInput.vue'
@@ -112,6 +113,7 @@ async function install (app) {
   app.component('QasCard', QasCard)
   app.component('QasCardImage', QasCardImage)
   app.component('QasCheckbox', QasCheckbox)
+  app.component('QasSelectFilter', QasSelectFilter)
   app.component('QasCopy', QasCopy)
   app.component('QasDate', QasDate)
   app.component('QasDateTimeInput', QasDateTimeInput)
@@ -213,6 +215,7 @@ export {
   QasCard,
   QasCheckbox,
   QasCopy,
+  QasSelectFilter,
   QasDate,
   QasDateTimeInput,
   QasDebugger,