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

package/src/components/layout/private/PvLayoutNotificationsDrawer.vue

@@ -1,140 +1,140 @@
-<template>
-  <qas-drawer v-bind="drawerProps" v-model="model">
-    <div class="fixed-position">
-      <div class="justify-end row">
-        <qas-btn class="q-mb-xl" :disable="isAllNotificationsRead" icon="sym_r_check_circle" label="Marcar todas como lida" @click="markAsRead" />
-      </div>
-
-      <qas-infinite-scroll v-model:list="notifications" v-bind="infiniteScrollProps">
-        <qas-list-items :list="notifications" :use-box="false" :use-clickable-item="false" :use-section-actions="false">
-          <template #item-section="{ item }">
-            <pv-layout-notification-card :notification="item" />
-          </template>
-        </qas-list-items>
-      </qas-infinite-scroll>
-    </div>
-  </qas-drawer>
-</template>
-
-<script setup>
-import PvLayoutNotificationCard from './PvLayoutNotificationCard.vue'
-import QasDrawer from '../../drawer/QasDrawer.vue'
-import QasInfiniteScroll from '../../infinite-scroll/QasInfiniteScroll.vue'
-
-import useNotifications, { onNotificationReceived } from '../../../composables/use-notifications'
-
-import { promiseHandler } from '../../../helpers'
-
-import { computed, ref, inject, onMounted } from 'vue'
-
-defineOptions({ name: 'PvLayoutNotificationsDrawer' })
-
-const props = defineProps({
-  model: {
-    type: Boolean
-  }
-})
-
-const emit = defineEmits(['update:modelValue'])
-
-const axios = inject('axios')
-
-const { setUnreadNotificationsCount } = useNotifications()
-
-const hasMadeFirstFetch = ref(false)
-const isMarkingNotificationsAsRead = ref(false)
-
-const notifications = ref([])
-
-onMounted(() => {
-  const notificationsUtilsChannel = new BroadcastChannel('notifications--utils')
-
-  notificationsUtilsChannel.onmessage = ({ data }) => {
-    if (data.type === 'markAllAsRead') onMarkAsReadSuccess()
-  }
-})
-
-/**
- * Quando o usuário ainda não abriu a central de notificações, a primeira vez que
- * ele abrir vai obter esses dados via API, mesmo que ele tenha recebido a notificação
- * em real time, após ele ter aberto as notificações pelo menos uma vez, todas
- * notificações recebidas em real time serão incrementadas na central de
- * notificação sem a necessidade de chamar a API e resetar a paginação (feita por scroll).
- */
-onNotificationReceived(notification => {
-  if (!hasMadeFirstFetch.value) return
-
-  notifications.value.unshift(notification)
-})
-
-const infiniteScrollProps = {
-  limitPerPage: 30,
-  // os "165px" são referentes ao cabeçalho.
-  maxHeight: 'calc(100vh - 165px)',
-  url: 'users/me/notifications',
-  onFetchSuccess
-}
-
-// computed
-const model = computed({
-  get () {
-    return props.model
-  },
-
-  set (value) {
-    emit('update:modelValue', value)
-  }
-})
-
-const drawerProps = computed(() => {
-  return {
-    loading: isMarkingNotificationsAsRead.value,
-    title: 'Notificações'
-  }
-})
-
-/**
- * Se todas notificações estiverem lidas, então desabilitar o botão de "Marcar todas como lida"
- */
-const isAllNotificationsRead = computed(() => !notifications.value.some(notification => !notification?.isRead))
-
-// functions
-async function markAsRead () {
-  const { data } = await promiseHandler(
-    axios.patch('/users/me/notifications', { markAllAsRead: true }),
-    {
-      useLoading: false,
-      errorMessage: 'Falha ao marcar todas notificações como lida. Por favor, tente novamente em alguns minutos.',
-      onLoading: isLoading => {
-        isMarkingNotificationsAsRead.value = isLoading
-      }
-    }
-  )
-
-  if (data) {
-    const notificationsUtilsChannel = new BroadcastChannel('notifications--utils')
-
-    notificationsUtilsChannel.postMessage({ type: 'markAllAsRead' })
-  }
-}
-
-/**
- * Ao marcar todas notificações como lida, é necessário percorrer todo o array
- * de "notifications" e setar a prop "isRead" como "true", para não precisar chamar
- * novamente a API para atualizar estes dados.
- */
-function onMarkAsReadSuccess () {
-  notifications.value.forEach(notification => {
-    notification.isRead = true
-  })
-
-  /**
-   * Zera o contador de notificações, responsável pelo ícone no QasAppUser.
-   */
-  setUnreadNotificationsCount(0)
-}
-
-function onFetchSuccess () {
-  hasMadeFirstFetch.value = true
-}
-</script>
+<template>
+  <qas-drawer v-bind="drawerProps" v-model="model">
+    <div class="fixed-position">
+      <div class="justify-end row">
+        <qas-btn class="q-mb-xl" :disable="isAllNotificationsRead" icon="sym_r_check_circle" label="Marcar todas como lida" @click="markAsRead" />
+      </div>
+
+      <qas-infinite-scroll v-model:list="notifications" v-bind="infiniteScrollProps">
+        <qas-list-items :list="notifications" :use-box="false" :use-clickable-item="false" :use-section-actions="false">
+          <template #item-section="{ item }">
+            <pv-layout-notification-card :notification="item" />
+          </template>
+        </qas-list-items>
+      </qas-infinite-scroll>
+    </div>
+  </qas-drawer>
+</template>
+
+<script setup>
+import PvLayoutNotificationCard from './PvLayoutNotificationCard.vue'
+import QasDrawer from '../../drawer/QasDrawer.vue'
+import QasInfiniteScroll from '../../infinite-scroll/QasInfiniteScroll.vue'
+
+import useNotifications, { onNotificationReceived } from '../../../composables/use-notifications'
+
+import { promiseHandler } from '../../../helpers'
+
+import { computed, ref, inject, onMounted } from 'vue'
+
+defineOptions({ name: 'PvLayoutNotificationsDrawer' })
+
+const props = defineProps({
+  model: {
+    type: Boolean
+  }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const axios = inject('axios')
+
+const { setUnreadNotificationsCount } = useNotifications()
+
+const hasMadeFirstFetch = ref(false)
+const isMarkingNotificationsAsRead = ref(false)
+
+const notifications = ref([])
+
+onMounted(() => {
+  const notificationsUtilsChannel = new BroadcastChannel('notifications--utils')
+
+  notificationsUtilsChannel.onmessage = ({ data }) => {
+    if (data.type === 'markAllAsRead') onMarkAsReadSuccess()
+  }
+})
+
+/**
+ * Quando o usuário ainda não abriu a central de notificações, a primeira vez que
+ * ele abrir vai obter esses dados via API, mesmo que ele tenha recebido a notificação
+ * em real time, após ele ter aberto as notificações pelo menos uma vez, todas
+ * notificações recebidas em real time serão incrementadas na central de
+ * notificação sem a necessidade de chamar a API e resetar a paginação (feita por scroll).
+ */
+onNotificationReceived(notification => {
+  if (!hasMadeFirstFetch.value) return
+
+  notifications.value.unshift(notification)
+})
+
+const infiniteScrollProps = {
+  limitPerPage: 30,
+  // os "165px" são referentes ao cabeçalho.
+  maxHeight: 'calc(100vh - 165px)',
+  url: 'users/me/notifications',
+  onFetchSuccess
+}
+
+// computed
+const model = computed({
+  get () {
+    return props.model
+  },
+
+  set (value) {
+    emit('update:modelValue', value)
+  }
+})
+
+const drawerProps = computed(() => {
+  return {
+    loading: isMarkingNotificationsAsRead.value,
+    title: 'Notificações'
+  }
+})
+
+/**
+ * Se todas notificações estiverem lidas, então desabilitar o botão de "Marcar todas como lida"
+ */
+const isAllNotificationsRead = computed(() => !notifications.value.some(notification => !notification?.isRead))
+
+// functions
+async function markAsRead () {
+  const { data } = await promiseHandler(
+    axios.patch('/users/me/notifications', { markAllAsRead: true }),
+    {
+      useLoading: false,
+      errorMessage: 'Falha ao marcar todas notificações como lida. Por favor, tente novamente em alguns minutos.',
+      onLoading: isLoading => {
+        isMarkingNotificationsAsRead.value = isLoading
+      }
+    }
+  )
+
+  if (data) {
+    const notificationsUtilsChannel = new BroadcastChannel('notifications--utils')
+
+    notificationsUtilsChannel.postMessage({ type: 'markAllAsRead' })
+  }
+}
+
+/**
+ * Ao marcar todas notificações como lida, é necessário percorrer todo o array
+ * de "notifications" e setar a prop "isRead" como "true", para não precisar chamar
+ * novamente a API para atualizar estes dados.
+ */
+function onMarkAsReadSuccess () {
+  notifications.value.forEach(notification => {
+    notification.isRead = true
+  })
+
+  /**
+   * Zera o contador de notificações, responsável pelo ícone no QasAppUser.
+   */
+  setUnreadNotificationsCount(0)
+}
+
+function onFetchSuccess () {
+  hasMadeFirstFetch.value = true
+}
+</script>

package/src/components/list-items/QasListItems.vue

@@ -1,125 +1,125 @@
-<template>
-  <component :is="component" class="qas-list-items" :class="classes">
-    <q-list separator>
-      <q-item v-for="(item, index) in props.list" :key="index" :clickable="props.useClickableItem" @click="onClick({ item, index }, true)">
-        <slot :index="index" :item="item" name="item">
-          <q-item-section>
-            <slot :index="index" :item="item" name="item-section">
-              <qas-label
-                v-if="item[props.labelKey]"
-                :label="item[props.labelKey]"
-                :margin="getLabelMargin(item)"
-                typography="h5"
-              />
-
-              <div v-if="item[props.descriptionKey]" class="text-body1">
-                {{ item[props.descriptionKey] }}
-              </div>
-            </slot>
-          </q-item-section>
-
-          <q-item-section v-if="props.useSectionActions" side>
-            <slot :index="index" :item="item" name="item-section-side">
-              <qas-btn color="grey-10" :icon="props.icon" variant="tertiary" @click="onClick({ item, index })" />
-            </slot>
-          </q-item-section>
-        </slot>
-      </q-item>
-    </q-list>
-  </component>
-</template>
-
-<script setup>
-import QasBtn from '../btn/QasBtn.vue'
-
-import { computed } from 'vue'
-
-defineOptions({ name: 'QasListItems' })
-
-const props = defineProps({
-  descriptionKey: {
-    type: String,
-    default: 'description'
-  },
-
-  icon: {
-    type: String,
-    default: 'sym_r_chevron_right'
-  },
-
-  labelKey: {
-    type: String,
-    default: 'label'
-  },
-
-  list: {
-    default: () => [],
-    type: Array
-  },
-
-  useBox: {
-    type: Boolean,
-    default: true
-  },
-
-  useClickableItem: {
-    type: Boolean
-  },
-
-  useSectionActions: {
-    default: true,
-    type: Boolean
-  }
-})
-
-const emit = defineEmits(['click-item'])
-
-const classes = computed(() => ({ 'qas-list-items--no-click': !props.useClickableItem }))
-
-const component = computed(() => props.useBox ? 'qas-box' : 'div')
-
-// functions
-function onClick ({ item, index }, fromItem) {
-  /**
-   * se o click veio do q-item e "useClickableItem" for "false", ou
-   * se o click não veio do q-item e "useClickableItem" for "true", então retorna sem emitir.
-   */
-  if ((fromItem && !props.useClickableItem) || (!fromItem && props.useClickableItem)) return
-
-  emit('click-item', { item, index })
-}
-
-function getLabelMargin (item) {
-  return item[props.descriptionKey] ? 'xs' : 'none'
-}
-</script>
-
-<style lang="scss">
-.qas-list-items {
-  &--no-click {
-    .q-item {
-      .q-ripple {
-        display: none;
-      }
-    }
-  }
-
-  .q-list {
-    .q-item {
-      min-height: auto;
-    }
-
-    & > .q-item {
-      padding: var(--qas-spacing-md) 0;
-    }
-
-    & > .q-item:last-child {
-      padding-bottom: 0;
-    }
-
-    & > .q-item:first-child {
-      padding-top: 0;
-    }
-  }
-}
-</style>
+<template>
+  <component :is="component" class="qas-list-items" :class="classes">
+    <q-list separator>
+      <q-item v-for="(item, index) in props.list" :key="index" :clickable="props.useClickableItem" @click="onClick({ item, index }, true)">
+        <slot :index="index" :item="item" name="item">
+          <q-item-section>
+            <slot :index="index" :item="item" name="item-section">
+              <qas-label
+                v-if="item[props.labelKey]"
+                :label="item[props.labelKey]"
+                :margin="getLabelMargin(item)"
+                typography="h5"
+              />
+
+              <div v-if="item[props.descriptionKey]" class="text-body1">
+                {{ item[props.descriptionKey] }}
+              </div>
+            </slot>
+          </q-item-section>
+
+          <q-item-section v-if="props.useSectionActions" side>
+            <slot :index="index" :item="item" name="item-section-side">
+              <qas-btn color="grey-10" :icon="props.icon" variant="tertiary" @click="onClick({ item, index })" />
+            </slot>
+          </q-item-section>
+        </slot>
+      </q-item>
+    </q-list>
+  </component>
+</template>
+
+<script setup>
+import QasBtn from '../btn/QasBtn.vue'
+
+import { computed } from 'vue'
+
+defineOptions({ name: 'QasListItems' })
+
+const props = defineProps({
+  descriptionKey: {
+    type: String,
+    default: 'description'
+  },
+
+  icon: {
+    type: String,
+    default: 'sym_r_chevron_right'
+  },
+
+  labelKey: {
+    type: String,
+    default: 'label'
+  },
+
+  list: {
+    default: () => [],
+    type: Array
+  },
+
+  useBox: {
+    type: Boolean,
+    default: true
+  },
+
+  useClickableItem: {
+    type: Boolean
+  },
+
+  useSectionActions: {
+    default: true,
+    type: Boolean
+  }
+})
+
+const emit = defineEmits(['click-item'])
+
+const classes = computed(() => ({ 'qas-list-items--no-click': !props.useClickableItem }))
+
+const component = computed(() => props.useBox ? 'qas-box' : 'div')
+
+// functions
+function onClick ({ item, index }, fromItem) {
+  /**
+   * se o click veio do q-item e "useClickableItem" for "false", ou
+   * se o click não veio do q-item e "useClickableItem" for "true", então retorna sem emitir.
+   */
+  if ((fromItem && !props.useClickableItem) || (!fromItem && props.useClickableItem)) return
+
+  emit('click-item', { item, index })
+}
+
+function getLabelMargin (item) {
+  return item[props.descriptionKey] ? 'xs' : 'none'
+}
+</script>
+
+<style lang="scss">
+.qas-list-items {
+  &--no-click {
+    .q-item {
+      .q-ripple {
+        display: none;
+      }
+    }
+  }
+
+  .q-list {
+    .q-item {
+      min-height: auto;
+    }
+
+    & > .q-item {
+      padding: var(--qas-spacing-md) 0;
+    }
+
+    & > .q-item:last-child {
+      padding-bottom: 0;
+    }
+
+    & > .q-item:first-child {
+      padding-top: 0;
+    }
+  }
+}
+</style>

package/src/components/list-items/QasListItems.yml

@@ -1,71 +1,71 @@
-type: component
-
-meta:
-  desc: Componente para listagem.
-
-props:
-  description-key:
-    desc: Chave para acessar a descrição do item.
-    default: description
-    type: String
-
-  icon:
-    desc: Nome do ícone
-    default: sym_r_chevron_right
-    type: String
-
-  label-key:
-    desc: Chave para acessar o label do item.
-    default: label
-    type: String
-
-  list:
-    desc: Lista para ser selecionada.
-    default: []
-    type: Array
-
-  use-box:
-    desc: Controla se o vai ser um QasBox ou div.
-    type: Boolean
-    default: true
-
-  use-clickable-item:
-    desc: Controla se o item inteiro é clicável ou somente o button dentro do item.
-    type: Boolean
-
-  use-section-actions:
-    desc: Controla se exibe ou não seção de actions, onde fica o Ícone de redirecionamento.
-    default: true
-    type: Boolean
-
-slots:
-  item-section:
-    desc: Slot para acessar seção da esquerda.
-    scope:
-      item:
-        desc: Item dentro da listagem, vai depender do que foi passado.
-        type: Object
-      index:
-        desc: Posição do item na lista.
-        type: Number
-
-  item-section-side:
-    desc: Slot para acessar seção da direita, onde fica o Ícone.
-    scope:
-      item:
-        desc: Item dentro da listagem, vai depender do que foi passado.
-        type: Object
-      index:
-        desc: Posição do item na lista.
-        type: Number
-
-events:
-  '@click-item -> function ({ item, index })':
-    desc: Dispara toda vez que o item ou button (dependendo da prop "use-section-actions") é clicado.
-    params:
-      item:
-        desc: Item clicado
-        type: Object
-      index:
-        desc: Posição do item
-        type: Number
+type: component
+
+meta:
+  desc: Componente para listagem.
+
+props:
+  description-key:
+    desc: Chave para acessar a descrição do item.
+    default: description
+    type: String
+
+  icon:
+    desc: Nome do ícone
+    default: sym_r_chevron_right
+    type: String
+
+  label-key:
+    desc: Chave para acessar o label do item.
+    default: label
+    type: String
+
+  list:
+    desc: Lista para ser selecionada.
+    default: []
+    type: Array
+
+  use-box:
+    desc: Controla se o vai ser um QasBox ou div.
+    type: Boolean
+    default: true
+
+  use-clickable-item:
+    desc: Controla se o item inteiro é clicável ou somente o button dentro do item.
+    type: Boolean
+
+  use-section-actions:
+    desc: Controla se exibe ou não seção de actions, onde fica o Ícone de redirecionamento.
+    default: true
+    type: Boolean
+
+slots:
+  item-section:
+    desc: Slot para acessar seção da esquerda.
+    scope:
+      item:
+        desc: Item dentro da listagem, vai depender do que foi passado.
+        type: Object
+      index:
+        desc: Posição do item na lista.
+        type: Number
+
+  item-section-side:
+    desc: Slot para acessar seção da direita, onde fica o Ícone.
+    scope:
+      item:
+        desc: Item dentro da listagem, vai depender do que foi passado.
+        type: Object
+      index:
+        desc: Posição do item na lista.
+        type: Number
+
+events:
+  '@click-item -> function ({ item, index })':
+    desc: Dispara toda vez que o item ou button (dependendo da prop "use-section-actions") é clicado.
+    params:
+      item:
+        desc: Item clicado
+        type: Object
+      index:
+        desc: Posição do item
+        type: Number