@bildvitta/quasar-ui-asteroid 3.17.0-beta.20 → 3.17.0-beta.21

package/src/composables/use-notifications.js

@@ -1,114 +1,128 @@
-import asteroidConfig from 'asteroid-config'
-import hasParentByClassName from '../helpers/private/has-parent-by-class-name'
-
-import { Notify } from 'quasar'
-import { ref } from 'vue'
-
-const callbackFunctions = {
-  onNotificationReceived: []
-}
-
-export function onNotificationReceived (callbackFn) {
-  callbackFunctions.onNotificationReceived.push(callbackFn)
-}
-
-const unreadNotificationsCount = ref(0)
-
-export default function () {
-  const isNotificationsEnabled = asteroidConfig.framework.featureToggle?.useNotifications
-
-  function triggerNotification (notification) {
-    callbackFunctions.onNotificationReceived.forEach(fn => fn((notification)))
-  }
-
-  function setUnreadNotificationsCount (value) {
-    unreadNotificationsCount.value = value
-  }
-
-  function incrementUnreadNotificationsCount () {
-    unreadNotificationsCount.value++
-  }
-
-  /**
-   * @param {{
-   *  message: string
-   *  title: string
-   *  link?: string
-   * }} config
-   */
-  function sendNotify (config = {}) {
-    const { link } = config
-
-    const classes = ['bg-white', 'boot-notification', 'q-py-sm', 'text-grey-8']
-
-    if (link) classes.push(...['boot-notification--has-link', 'cursor-pointer'])
-
-    const closeNotify = Notify.create({
-      actions: [{
-        icon: 'sym_r_close',
-        class: 'boot-notification__close-button qas-btn qas-btn--tertiary qas-btn--tertiary-grey-10'
-      }],
-
-      attrs: {
-        onClick: event => onNotifyClick({ event, link, closeNotify })
-      },
-
-      classes: classes.join(' '),
-      html: true,
-      icon: 'sym_r_info',
-      iconColor: 'primary',
-      message: getHTMLMessage(config),
-      multiLine: true,
-      position: 'bottom-right',
-      timeout: 30000
-    })
-
-    /**
-     * 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
-     * não tenha link, nada acontece.
-     */
-    function onNotifyClick ({ event, link, closeNotify }) {
-      if (!link) return
-
-      if (hasParentByClassName('boot-notification__close-button', event.srcElement)) return
-
-      window.open(link)
-
-      closeNotify()
-    }
-
-    /**
-     * Função que retorna um HTML para seguir estilos propostos pelo design.
-     */
-    function getHTMLMessage ({ message, title, icon = 'info' } = {}) {
-      return (`
-         <div>
-           <header class="row items-center">
-             <h5 class="text-grey-10 text-h5 boot-notification__title">
-               ${title}
-             </h5>
-           </header>
-
-           <div class="q-mt-sm text-grey-8 text-body1">
-             ${message}
-           </div>
-         </div>
-      `)
-    }
-  }
-
-  return {
-    // const
-    isNotificationsEnabled,
-
-    // computed
-    unreadNotificationsCount,
-
-    // functions
-    incrementUnreadNotificationsCount,
-    sendNotify,
-    setUnreadNotificationsCount,
-    triggerNotification
-  }
-}
+import asteroidConfig from 'asteroid-config'
+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: []
+}
+
+export function onNotificationReceived (callbackFn) {
+  callbackFunctions.onNotificationReceived.push(callbackFn)
+}
+
+const unreadNotificationsCount = ref(0)
+
+export default function () {
+  const isNotificationsEnabled = asteroidConfig.framework.featureToggle?.useNotifications
+
+  function triggerNotification (notification) {
+    callbackFunctions.onNotificationReceived.forEach(fn => fn((notification)))
+  }
+
+  function setUnreadNotificationsCount (value) {
+    unreadNotificationsCount.value = value
+  }
+
+  function incrementUnreadNotificationsCount () {
+    unreadNotificationsCount.value++
+  }
+
+  /**
+   * @param {{
+   *  message: string
+   *  title: string
+   *  link?: string
+   * }} config
+   */
+  function sendNotify (config = {}) {
+    const { link } = config
+
+    const classes = ['bg-white', 'boot-notification', 'q-py-sm', 'text-grey-8']
+
+    if (link) classes.push(...['boot-notification--has-link', 'cursor-pointer'])
+
+    const closeNotify = Notify.create({
+      actions: [{
+        icon: 'sym_r_close',
+        class: 'boot-notification__close-button qas-btn qas-btn--tertiary qas-btn--tertiary-grey-10'
+      }],
+
+      attrs: {
+        onClick: event => onNotifyClick({ event, link, closeNotify })
+      },
+
+      classes: classes.join(' '),
+      html: true,
+      icon: 'sym_r_info',
+      iconColor: 'primary',
+      message: getHTMLMessage(config),
+      multiLine: true,
+      position: 'bottom-right',
+      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
+     * não tenha link, nada acontece.
+     */
+    function onNotifyClick ({ event, link, closeNotify }) {
+      if (!link) return
+
+      if (hasParentByClassName('boot-notification__close-button', event.srcElement)) return
+
+      window.open(link)
+
+      closeNotify()
+    }
+
+    /**
+     * Função que retorna um HTML para seguir estilos propostos pelo design.
+     */
+    function getHTMLMessage ({ message, title, icon = 'info' } = {}) {
+      return (`
+         <div>
+           <header class="row items-center">
+             <h5 class="text-grey-10 text-h5 boot-notification__title">
+               ${title}
+             </h5>
+           </header>
+
+           <div class="q-mt-sm text-grey-8 text-body1">
+             ${message}
+           </div>
+         </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 {
+    // const
+    isNotificationsEnabled,
+
+    // computed
+    unreadNotificationsCount,
+
+    // functions
+    incrementUnreadNotificationsCount,
+    sendNotify,
+    setUnreadNotificationsCount,
+    triggerNotification
+  }
+}

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

@@ -1,60 +1,60 @@
-import { SessionStorage } from 'quasar'
-import { filterObject } from '../helpers'
-
-let cachedFilters = SessionStorage.getItem('cachedFilters') || {}
-
-function updateSessionStorage () {
-  SessionStorage.set('cachedFilters', cachedFilters)
-}
-
-export default function () {
-  function addOne (key, { label, value }) {
-    cachedFilters[key][label] = value
-    updateSessionStorage()
-  }
-
-  function addMany (key, filters) {
-    cachedFilters[key] = filters
-    updateSessionStorage()
-  }
-
-  function findOne (key, filter) {
-    return cachedFilters[key][filter]
-  }
-
-  function findAll (key) {
-    return cachedFilters[key]
-  }
-
-  function clearOne (key, filter) {
-    delete cachedFilters[key][filter]
-    updateSessionStorage()
-  }
-
-  function clearAll (key, { exclude = [] } = {}) {
-    if (exclude.length) {
-      cachedFilters[key] = filterObject(cachedFilters[key], exclude)
-    } else {
-      delete cachedFilters[key]
-    }
-
-    updateSessionStorage()
-  }
-
-  function reset () {
-    cachedFilters = {}
-
-    updateSessionStorage()
-  }
-
-  return {
-    addOne,
-    addMany,
-    findOne,
-    findAll,
-    clearOne,
-    clearAll,
-    cachedFilters,
-    reset
-  }
-}
+import { SessionStorage } from 'quasar'
+import { filterObject } from '../helpers'
+
+let cachedFilters = SessionStorage.getItem('cachedFilters') || {}
+
+function updateSessionStorage () {
+  SessionStorage.set('cachedFilters', cachedFilters)
+}
+
+export default function () {
+  function addOne (key, { label, value }) {
+    cachedFilters[key][label] = value
+    updateSessionStorage()
+  }
+
+  function addMany (key, filters) {
+    cachedFilters[key] = filters
+    updateSessionStorage()
+  }
+
+  function findOne (key, filter) {
+    return cachedFilters[key][filter]
+  }
+
+  function findAll (key) {
+    return cachedFilters[key]
+  }
+
+  function clearOne (key, filter) {
+    delete cachedFilters[key][filter]
+    updateSessionStorage()
+  }
+
+  function clearAll (key, { exclude = [] } = {}) {
+    if (exclude.length) {
+      cachedFilters[key] = filterObject(cachedFilters[key], exclude)
+    } else {
+      delete cachedFilters[key]
+    }
+
+    updateSessionStorage()
+  }
+
+  function reset () {
+    cachedFilters = {}
+
+    updateSessionStorage()
+  }
+
+  return {
+    addOne,
+    addMany,
+    findOne,
+    findAll,
+    clearOne,
+    clearAll,
+    cachedFilters,
+    reset
+  }
+}

package/src/composables/use-screen.js

@@ -1,42 +1,42 @@
-import { Screen, Platform } from 'quasar'
-import { computed, reactive } from 'vue'
-
-/**
- * @function
- * @returns {{
- *  isSmall: boolean,
- *  isMedium: boolean,
- *  isLarge: boolean,
- *  untilMedium: boolean,
- *  untilLarge: boolean,
- *  isMobile: boolean
- * }}
- *
- * @example
- * useScreen().isSmall
- *
- * const { isSmall } = useScreen()
- */
-export default function () {
-  const screens = reactive({
-    // até 599px
-    isSmall: computed(() => Screen.xs),
-
-    // de 600 até 1023px
-    isMedium: computed(() => Screen.sm),
-
-    // de 600 até 1023px
-    isLarge: computed(() => Screen.gt.sm),
-
-    // de 0 até 599px
-    untilMedium: computed(() => Screen.lt.sm),
-
-    // de 0 ate 1023px
-    untilLarge: computed(() => Screen.lt.md),
-
-    // Plataforma
-    isMobile: computed(() => Platform.is.mobile || false)
-  })
-
-  return screens
-}
+import { Screen, Platform } from 'quasar'
+import { computed, reactive } from 'vue'
+
+/**
+ * @function
+ * @returns {{
+ *  isSmall: boolean,
+ *  isMedium: boolean,
+ *  isLarge: boolean,
+ *  untilMedium: boolean,
+ *  untilLarge: boolean,
+ *  isMobile: boolean
+ * }}
+ *
+ * @example
+ * useScreen().isSmall
+ *
+ * const { isSmall } = useScreen()
+ */
+export default function () {
+  const screens = reactive({
+    // até 599px
+    isSmall: computed(() => Screen.xs),
+
+    // de 600 até 1023px
+    isMedium: computed(() => Screen.sm),
+
+    // de 600 até 1023px
+    isLarge: computed(() => Screen.gt.sm),
+
+    // de 0 até 599px
+    untilMedium: computed(() => Screen.lt.sm),
+
+    // de 0 ate 1023px
+    untilLarge: computed(() => Screen.lt.md),
+
+    // Plataforma
+    isMobile: computed(() => Platform.is.mobile || false)
+  })
+
+  return screens
+}

package/src/css/base/font-face.scss

@@ -1,28 +1,28 @@
-@keyframes rotation {
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(359deg);
-  }
-}
-
-.icons-is-loading {
-  .material-symbols-rounded {
-    position: relative;
-    color: transparent;
-
-    &::before {
-      content: '';
-      background-image: url('~@bildvitta/quasar-ui-asteroid/src/assets/icon-loading.svg');
-      background-size: contain;
-      background-repeat: no-repeat;
-      background-position: center center;
-      animation: rotation 1s infinite linear;
-      position: absolute;
-      top: 0;
-      left: 0;
-    }
-  }
-}
+@keyframes rotation {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(359deg);
+  }
+}
+
+.icons-is-loading {
+  .material-symbols-rounded {
+    position: relative;
+    color: transparent;
+
+    &::before {
+      content: '';
+      background-image: url('~@bildvitta/quasar-ui-asteroid/src/assets/icon-loading.svg');
+      background-size: contain;
+      background-repeat: no-repeat;
+      background-position: center center;
+      animation: rotation 1s infinite linear;
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+  }
+}

package/src/css/base/index.scss

@@ -1 +1 @@
-@import './font-face';
+@import './font-face';

package/src/css/components/base.scss

@@ -1,12 +1,12 @@
-body {
-  background-color: $background-color;
-  color: $grey-8;
-}
-
-.material-symbols-rounded {
-  font-variation-settings:
-    'FILL' 0,
-    'wght' 300,
-    'GRAD' 0,
-    'opsz' 24;
-}
+body {
+  background-color: $background-color;
+  color: $grey-8;
+}
+
+.material-symbols-rounded {
+  font-variation-settings:
+    'FILL' 0,
+    'wght' 300,
+    'GRAD' 0,
+    'opsz' 24;
+}