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

package/src/components/app-user/QasAppUser.vue

@@ -1,281 +1,281 @@
-<template>
-  <div class="cursor-pointer items-center no-wrap q-gutter-sm qas-app-user row" data-cy="app-user">
-    <div class="relative-position">
-      <qas-avatar :image="props.user.photo" :size="props.avatarSize" :title="userName" />
-
-      <qas-avatar v-if="hasNotificationInUserAvatar" v-bind="avatarNotificationCountProps" />
-    </div>
-
-    <div class="ellipsis qas-app-user__data">
-      <div class="ellipsis qas-app-user__name text-grey-10">
-        {{ userName }}
-      </div>
-
-      <div class="ellipsis qas-app-user__email text-grey-8">
-        {{ props.user.email }}
-      </div>
-    </div>
-
-    <q-menu class="shadow-2 text-grey-10" max-height="400px" v-bind="props.menuProps" @hide="onMenuHide">
-      <div class="q-pb-sm q-pt-md q-px-md qas-app-user__menu">
-        <qas-avatar class="q-mb-md" :image="props.user.photo" size="64px" :title="userName" />
-
-        <div class="ellipsis qas-app-user__menu-name">
-          {{ userName }}
-        </div>
-
-        <div class="ellipsis">
-          {{ props.user.email }}
-        </div>
-
-        <qas-select v-if="hasCompaniesSelect" v-bind="defaultCompanyProps" v-model="companiesModel" class="q-my-md" data-cy="app-user-companies-select" @update:model-value="setCompanies" />
-
-        <q-list class="q-mt-md">
-          <q-item v-close-popup :active="false" class="qas-app-user__menu-item" clickable :to="props.user.to">
-            <q-item-section avatar>
-              <q-icon name="sym_r_person" />
-            </q-item-section>
-
-            <q-item-section>
-              Perfil
-            </q-item-section>
-          </q-item>
-
-          <q-item v-if="isNotificationsEnabled" v-close-popup class="qas-app-user__menu-item" clickable @click="toggleNotificationsDrawer">
-            <q-item-section avatar class="relative-position">
-              <q-icon name="sym_r_notifications" />
-
-              <qas-avatar v-if="hasUnreadNotifications" class="qas-app-user__notification-avatar--icon" v-bind="avatarNotificationCountProps" />
-            </q-item-section>
-
-            <q-item-section>
-              Notificações
-            </q-item-section>
-          </q-item>
-
-          <q-item v-close-popup class="qas-app-user__menu-item" clickable @click="signOut">
-            <q-item-section avatar>
-              <q-icon name="sym_r_logout" />
-            </q-item-section>
-
-            <q-item-section>
-              Sair
-            </q-item-section>
-          </q-item>
-        </q-list>
-      </div>
-    </q-menu>
-  </div>
-</template>
-
-<script setup>
-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' })
-
-const props = defineProps({
-  avatarSize: {
-    default: '40px',
-    type: String
-  },
-
-  companyProps: {
-    default: () => ({}),
-    type: Object
-  },
-
-  menuProps: {
-    default: () => ({}),
-    type: Object
-  },
-
-  notifications: {
-    default: () => ({}),
-    type: Object
-  },
-
-  user: {
-    default: () => ({}),
-    required: true,
-    type: Object
-  }
-})
-
-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)
-
-const { avatarNotificationCountProps } = useAvatarNotifications()
-
-// computed
-const defaultCompanyProps = computed(() => {
-  return {
-    loading: loading.value,
-
-    ...props.companyProps,
-
-    // não é possível alterar o label.
-    label: 'Vínculo'
-  }
-})
-
-const hasCompaniesSelect = computed(() => !!props.companyProps.options?.length)
-const hasUnreadNotifications = computed(() => unreadNotificationsCount.value > 0)
-const hasNotificationInUserAvatar = computed(() => isNotificationsEnabled && hasUnreadNotifications.value)
-
-const unreadNotificationsToString = computed(() => String(unreadNotificationsCount.value))
-const userName = computed(() => props.user.name || props.user.givenName)
-
-// watch
-watch(() => props.companyProps.modelValue, value => {
-  companiesModel.value = value
-}, { immediate: true })
-
-// composable
-function useAvatarNotifications () {
-  const hasAnimated = ref(false)
-
-  watch(() => unreadNotificationsCount.value, () => {
-    hasAnimated.value = true
-
-    setTimeout(() => {
-      hasAnimated.value = false
-    }, 1000)
-  })
-
-  const avatarNotificationCountProps = computed(() => {
-    const classes = [
-      'qas-app-user__notification-avatar',
-      'animated',
-      {
-        rubberBand: hasAnimated.value
-      }
-    ]
-
-    return {
-      class: classes,
-      color: 'red-14',
-      size: 'xs',
-      title: unreadNotificationsToString.value,
-      useCropTitle: false
-    }
-  })
-
-  return {
-    avatarNotificationCountProps
-  }
-}
-
-// métodos
-function signOut () {
-  emit('sign-out')
-}
-
-async function setCompanies (value) {
-  if (!value) return
-
-  loading.value = true
-
-  try {
-    await axios.patch('users/me', { companies: value })
-    setTimeout(() => location.reload(), 1500)
-
-    NotifySuccess('Vínculo alterado com sucesso.')
-  } catch {
-    companiesModel.value = props.companyProps.modelValue
-
-    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
-  }
-}
-
-function toggleNotificationsDrawer () {
-  emit('toggle-notifications')
-}
-</script>
-
-<style lang="scss">
-.qas-app-user {
-  &__notification-avatar {
-    animation-duration: 1s;
-    position: absolute;
-    top: 0;
-
-    &:not(&--icon) {
-      right: -4px;
-    }
-
-    &--icon {
-      right: 4px;
-    }
-  }
-
-  &__data {
-    line-height: 1.1;
-  }
-
-  &__name,
-  &__menu-name {
-    font-weight: 600;
-  }
-
-  &__email {
-    font-size: 0.75rem;
-  }
-
-  &__menu {
-    width: 248px;
-  }
-
-  &__menu-name {
-    font-size: 1.125rem;
-  }
-
-  &__menu-item {
-    min-height: 36px;
-    padding: 0;
-
-    & + & {
-      margin-top: var(--qas-spacing-sm);
-    }
-  }
-
-  @media (max-width: $breakpoint-xs) {
-    &__data {
-      display: none;
-    }
-  }
-}
-</style>
+<template>
+  <div class="cursor-pointer items-center no-wrap q-gutter-sm qas-app-user row" data-cy="app-user">
+    <div class="relative-position">
+      <qas-avatar :image="props.user.photo" :size="props.avatarSize" :title="userName" />
+
+      <qas-avatar v-if="hasNotificationInUserAvatar" v-bind="avatarNotificationCountProps" />
+    </div>
+
+    <div class="ellipsis qas-app-user__data">
+      <div class="ellipsis qas-app-user__name text-grey-10">
+        {{ userName }}
+      </div>
+
+      <div class="ellipsis qas-app-user__email text-grey-8">
+        {{ props.user.email }}
+      </div>
+    </div>
+
+    <q-menu class="shadow-2 text-grey-10" max-height="400px" v-bind="props.menuProps" @hide="onMenuHide">
+      <div class="q-pb-sm q-pt-md q-px-md qas-app-user__menu">
+        <qas-avatar class="q-mb-md" :image="props.user.photo" size="64px" :title="userName" />
+
+        <div class="ellipsis qas-app-user__menu-name">
+          {{ userName }}
+        </div>
+
+        <div class="ellipsis">
+          {{ props.user.email }}
+        </div>
+
+        <qas-select v-if="hasCompaniesSelect" v-bind="defaultCompanyProps" v-model="companiesModel" class="q-my-md" data-cy="app-user-companies-select" @update:model-value="setCompanies" />
+
+        <q-list class="q-mt-md">
+          <q-item v-close-popup :active="false" class="qas-app-user__menu-item" clickable :to="props.user.to">
+            <q-item-section avatar>
+              <q-icon name="sym_r_person" />
+            </q-item-section>
+
+            <q-item-section>
+              Perfil
+            </q-item-section>
+          </q-item>
+
+          <q-item v-if="isNotificationsEnabled" v-close-popup class="qas-app-user__menu-item" clickable @click="toggleNotificationsDrawer">
+            <q-item-section avatar class="relative-position">
+              <q-icon name="sym_r_notifications" />
+
+              <qas-avatar v-if="hasUnreadNotifications" class="qas-app-user__notification-avatar--icon" v-bind="avatarNotificationCountProps" />
+            </q-item-section>
+
+            <q-item-section>
+              Notificações
+            </q-item-section>
+          </q-item>
+
+          <q-item v-close-popup class="qas-app-user__menu-item" clickable @click="signOut">
+            <q-item-section avatar>
+              <q-icon name="sym_r_logout" />
+            </q-item-section>
+
+            <q-item-section>
+              Sair
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </div>
+    </q-menu>
+  </div>
+</template>
+
+<script setup>
+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' })
+
+const props = defineProps({
+  avatarSize: {
+    default: '40px',
+    type: String
+  },
+
+  companyProps: {
+    default: () => ({}),
+    type: Object
+  },
+
+  menuProps: {
+    default: () => ({}),
+    type: Object
+  },
+
+  notifications: {
+    default: () => ({}),
+    type: Object
+  },
+
+  user: {
+    default: () => ({}),
+    required: true,
+    type: Object
+  }
+})
+
+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)
+
+const { avatarNotificationCountProps } = useAvatarNotifications()
+
+// computed
+const defaultCompanyProps = computed(() => {
+  return {
+    loading: loading.value,
+
+    ...props.companyProps,
+
+    // não é possível alterar o label.
+    label: 'Vínculo'
+  }
+})
+
+const hasCompaniesSelect = computed(() => !!props.companyProps.options?.length)
+const hasUnreadNotifications = computed(() => unreadNotificationsCount.value > 0)
+const hasNotificationInUserAvatar = computed(() => isNotificationsEnabled && hasUnreadNotifications.value)
+
+const unreadNotificationsToString = computed(() => String(unreadNotificationsCount.value))
+const userName = computed(() => props.user.name || props.user.givenName)
+
+// watch
+watch(() => props.companyProps.modelValue, value => {
+  companiesModel.value = value
+}, { immediate: true })
+
+// composable
+function useAvatarNotifications () {
+  const hasAnimated = ref(false)
+
+  watch(() => unreadNotificationsCount.value, () => {
+    hasAnimated.value = true
+
+    setTimeout(() => {
+      hasAnimated.value = false
+    }, 1000)
+  })
+
+  const avatarNotificationCountProps = computed(() => {
+    const classes = [
+      'qas-app-user__notification-avatar',
+      'animated',
+      {
+        rubberBand: hasAnimated.value
+      }
+    ]
+
+    return {
+      class: classes,
+      color: 'red-14',
+      size: 'xs',
+      title: unreadNotificationsToString.value,
+      useCropTitle: false
+    }
+  })
+
+  return {
+    avatarNotificationCountProps
+  }
+}
+
+// métodos
+function signOut () {
+  emit('sign-out')
+}
+
+async function setCompanies (value) {
+  if (!value) return
+
+  loading.value = true
+
+  try {
+    await axios.patch('users/me', { companies: value })
+    setTimeout(() => location.reload(), 1500)
+
+    NotifySuccess('Vínculo alterado com sucesso.')
+  } catch {
+    companiesModel.value = props.companyProps.modelValue
+
+    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
+  }
+}
+
+function toggleNotificationsDrawer () {
+  emit('toggle-notifications')
+}
+</script>
+
+<style lang="scss">
+.qas-app-user {
+  &__notification-avatar {
+    animation-duration: 1s;
+    position: absolute;
+    top: 0;
+
+    &:not(&--icon) {
+      right: -4px;
+    }
+
+    &--icon {
+      right: 4px;
+    }
+  }
+
+  &__data {
+    line-height: 1.1;
+  }
+
+  &__name,
+  &__menu-name {
+    font-weight: 600;
+  }
+
+  &__email {
+    font-size: 0.75rem;
+  }
+
+  &__menu {
+    width: 248px;
+  }
+
+  &__menu-name {
+    font-size: 1.125rem;
+  }
+
+  &__menu-item {
+    min-height: 36px;
+    padding: 0;
+
+    & + & {
+      margin-top: var(--qas-spacing-sm);
+    }
+  }
+
+  @media (max-width: $breakpoint-xs) {
+    &__data {
+      display: none;
+    }
+  }
+}
+</style>

package/src/components/app-user/QasAppUser.yml

@@ -1,56 +1,56 @@
-type: component
-
-meta:
-  desc: Exibe o avatar e o nome do usuário, ao clicar abre um menu com as opções.
-
-props:
-  avatar-size:
-    desc: Define o tamanho do avatar.
-    default: 36px
-    type: String
-
-  company-props:
-    desc: Repassa props pro QasSelect de vínculo de empresas (não é possível alterar o label).
-    default: {}
-    type: Object
-
-  menu-props:
-    desc: Repassa props pro QMenu.
-    default: {}
-    type: Object
-
-  notifications:
-    desc: Lista com as notificações do usuário.
-    type: Object
-    default: {}
-
-  user:
-    desc: Informações do usuário.
-    required: true
-    type: Object
-    default: {}
-    examples: [
-      "
-      {
-        photo: 'minha-img',
-        name: 'Eduardo Lima',
-        email: 'eduardolima@gmail.com'
-      }
-      "
-    ]
-
-events:
-  '@sign-out -> function()':
-    desc: Dispara quando o botão de "sair" é clicado.
-
-  '@toggle-notifications -> function()':
-    desc: Dispara quando o botão de "Notificações" é clicado.
-
-selectors:
-  app-user:
-    desc: Seletor do componente.
-    examples: ['data-cy="app-user"']
-
-  app-user-companies-select:
-    desc: Seletor do select de vínculos de empresas.
-    examples: ['data-cy="app-user-companies-select"']
+type: component
+
+meta:
+  desc: Exibe o avatar e o nome do usuário, ao clicar abre um menu com as opções.
+
+props:
+  avatar-size:
+    desc: Define o tamanho do avatar.
+    default: 36px
+    type: String
+
+  company-props:
+    desc: Repassa props pro QasSelect de vínculo de empresas (não é possível alterar o label).
+    default: {}
+    type: Object
+
+  menu-props:
+    desc: Repassa props pro QMenu.
+    default: {}
+    type: Object
+
+  notifications:
+    desc: Lista com as notificações do usuário.
+    type: Object
+    default: {}
+
+  user:
+    desc: Informações do usuário.
+    required: true
+    type: Object
+    default: {}
+    examples: [
+      "
+      {
+        photo: 'minha-img',
+        name: 'Eduardo Lima',
+        email: 'eduardolima@gmail.com'
+      }
+      "
+    ]
+
+events:
+  '@sign-out -> function()':
+    desc: Dispara quando o botão de "sair" é clicado.
+
+  '@toggle-notifications -> function()':
+    desc: Dispara quando o botão de "Notificações" é clicado.
+
+selectors:
+  app-user:
+    desc: Seletor do componente.
+    examples: ['data-cy="app-user"']
+
+  app-user-companies-select:
+    desc: Seletor do select de vínculos de empresas.
+    examples: ['data-cy="app-user-companies-select"']