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

package/src/components/app-menu/private/PvAppMenuDropdown.vue

@@ -16,53 +16,47 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'PvAppMenuDropdown',
+<script setup>
+import { computed } from 'vue'
 
-  props: {
-    buttonDropdownProps: {
-      type: Object,
-      default: () => ({})
-    },
+defineOptions({ name: 'PvAppMenuDropdown' })
 
-    currentModule: {
-      type: Object,
-      default: () => ({})
-    },
-
-    modules: {
-      type: Array,
-      default: () => []
-    }
+const props = defineProps({
+  buttonDropdownProps: {
+    type: Object,
+    default: () => ({})
   },
 
-  computed: {
-    defaultButtonDropdownProps () {
-      return {
-        ...this.buttonDropdownProps,
-
-        buttonProps: {
-          align: 'between',
-          class: 'text-subtitle2',
-          color: 'primary',
-          iconRight: 'sym_r_expand_more',
-          label: this.currentModule.label,
-          useEllipsis: true,
-          useLabelOnSmallScreen: true
-        }
-      }
-    }
+  currentModule: {
+    type: Object,
+    default: () => ({})
   },
 
-  methods: {
-    isActive ({ value }) {
-      const { host, protocol } = window.location
-      const url = `${protocol}//${host}`
+  modules: {
+    type: Array,
+    default: () => []
+  }
+})
+
+const defaultButtonDropdownProps = computed(() => ({
+  ...props.buttonDropdownProps,
 
-      return url.includes(value)
-    }
+  buttonProps: {
+    align: 'between',
+    class: 'text-subtitle2',
+    color: 'primary',
+    iconRight: 'sym_r_expand_more',
+    label: props.currentModule.label,
+    useEllipsis: true,
+    useLabelOnSmallScreen: true
   }
+}))
+
+function isActive ({ value }) {
+  const { host, protocol } = window.location
+  const url = `${protocol}//${host}`
+
+  return url.includes(value)
 }
 </script>
 

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

@@ -2,20 +2,33 @@
   <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="user.photo" :size="avatarSize" :title="userName" />
-      <q-badge v-if="hasNotifications" color="red" floating>{{ notifications.count }}</q-badge>
+
+      <q-badge v-if="hasNotifications" color="red" floating>
+        {{ notifications.count }}
+      </q-badge>
     </div>
 
     <div class="ellipsis qas-app-user__data">
-      <div class="ellipsis qas-app-user__name text-grey-9">{{ userName }}</div>
-      <div class="ellipsis qas-app-user__email text-grey-8">{{ user.email }}</div>
+      <div class="ellipsis qas-app-user__name text-grey-10">
+        {{ userName }}
+      </div>
+
+      <div class="ellipsis qas-app-user__email text-grey-8">
+        {{ user.email }}
+      </div>
     </div>
 
-    <q-menu class="shadow-2 text-grey-9" max-height="400px" v-bind="menuProps">
+    <q-menu class="shadow-2 text-grey-10" max-height="400px" v-bind="menuProps">
       <div class="q-pb-sm q-pt-md q-px-md qas-app-user__menu">
-        <qas-avatar class="q-mb-md" :image="user.photo" size="96px" :title="userName" />
+        <qas-avatar class="q-mb-md" :image="user.photo" size="64px" :title="userName" />
+
+        <div class="ellipsis qas-app-user__menu-name">
+          {{ userName }}
+        </div>
 
-        <div class="ellipsis qas-app-user__menu-name">{{ userName }}</div>
-        <div class="ellipsis">{{ user.email }}</div>
+        <div class="ellipsis">
+          {{ user.email }}
+        </div>
 
         <qas-select v-if="hasCompaniesSelect" v-model="companiesModel" class="q-my-md" v-bind="defaultCompanyProps" data-cy="app-user-companies-select" @update:model-value="setCompanies" />
 
@@ -25,7 +38,9 @@
               <q-icon name="sym_r_person" />
             </q-item-section>
 
-            <q-item-section>Editar</q-item-section>
+            <q-item-section>
+              Editar
+            </q-item-section>
           </q-item>
 
           <q-item v-if="hasNotifications" v-close-popup class="qas-app-user__menu-item" clickable>
@@ -33,10 +48,14 @@
               <q-icon name="sym_r_notifications" />
             </q-item-section>
 
-            <q-item-section>Notificações</q-item-section>
+            <q-item-section>
+              Notificações
+            </q-item-section>
 
             <q-item-section side>
-              <q-badge color="red">{{ notifications.count }}</q-badge>
+              <q-badge color="red">
+                {{ notifications.count }}
+              </q-badge>
             </q-item-section>
           </q-item>
 
@@ -45,7 +64,9 @@
               <q-icon name="sym_r_logout" />
             </q-item-section>
 
-            <q-item-section>Sair</q-item-section>
+            <q-item-section>
+              Sair
+            </q-item-section>
           </q-item>
         </q-list>
       </div>
@@ -53,110 +74,91 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import QasAvatar from '../avatar/QasAvatar.vue'
 
-export default {
-  name: 'QasAppUser',
+import { NotifySuccess, NotifyError } from '../../plugins'
+
+import { ref, computed, watch, inject } from 'vue'
 
-  components: {
-    QasAvatar
+defineOptions({ name: 'QasAppUser' })
+
+const props = defineProps({
+  avatarSize: {
+    default: '40px',
+    type: String
   },
 
-  props: {
-    avatarSize: {
-      default: '36px',
-      type: String
-    },
-
-    companyProps: {
-      default: () => ({}),
-      type: Object
-    },
-
-    menuProps: {
-      default: () => ({}),
-      type: Object
-    },
-
-    notifications: {
-      default: () => ({}),
-      type: Object
-    },
-
-    user: {
-      default: () => ({}),
-      required: true,
-      type: Object
-    }
+  companyProps: {
+    default: () => ({}),
+    type: Object
   },
 
-  emits: ['sign-out'],
+  menuProps: {
+    default: () => ({}),
+    type: Object
+  },
 
-  data () {
-    return {
-      companiesModel: '',
-      loading: false
-    }
+  notifications: {
+    default: () => ({}),
+    type: Object
   },
 
-  computed: {
-    defaultCompanyProps () {
-      return {
-        loading: this.loading,
+  user: {
+    default: () => ({}),
+    required: true,
+    type: Object
+  }
+})
 
-        ...this.companyProps,
+const emits = defineEmits(['sign-out'])
 
-        // não é possível alterar o label.
-        label: 'Vínculo'
-      }
-    },
+// vindo direto do boot api.js
+const axios = inject('axios')
 
-    hasNotifications () {
-      return !!Object.keys(this.notifications).length
-    },
+const companiesModel = ref('')
+const loading = ref(false)
 
-    userName () {
-      return this.user.name || this.user.givenName
-    },
+const defaultCompanyProps = computed(() => {
+  return {
+    loading: loading.value,
 
-    hasCompaniesSelect () {
-      return !!this.companyProps.options?.length
-    }
-  },
+    ...props.companyProps,
 
-  watch: {
-    'companyProps.modelValue': {
-      handler (value) {
-        this.companiesModel = value
-      },
+    // não é possível alterar o label.
+    label: 'Vínculo'
+  }
+})
 
-      immediate: true
-    }
-  },
+const hasCompaniesSelect = computed(() => !!props.companyProps.options?.length)
+const hasNotifications = computed(() => !!Object.keys(props.notifications).length)
 
-  methods: {
-    signOut () {
-      this.$emit('sign-out')
-    },
+const userName = computed(() => props.user.name || props.user.givenName)
 
-    async setCompanies (value) {
-      this.loading = true
+// watch
+watch(() => props.companyProps.modelValue, value => {
+  companiesModel.value = value
+}, { immediate: true })
 
-      try {
-        await this.$axios.patch('users/me', { companies: value })
+// métodos
+function signOut () {
+  emits('sign-out')
+}
 
-        this.$qas.success('Vínculo alterado com sucesso.')
+async function setCompanies (value) {
+  loading.value = true
 
-        setTimeout(() => location.reload(), 1500)
-      } catch {
-        this.companiesModel = this.companyProps.modelValue
+  try {
+    await axios.patch('users/me', { companies: value })
+    setTimeout(() => location.reload(), 1500)
 
-        this.$qas.error('Falha ao alterar vínculo.')
-      } finally {
-        this.loading = false
-      }
-    }
+    NotifySuccess('Vínculo alterado com sucesso.')
+  } catch {
+    companiesModel.value = props.companyProps.modelValue
+
+    NotifyError('Falha ao alterar vínculo.')
+  } finally {
+    loading.value = false
   }
 }
 </script>

package/src/components/avatar/QasAvatar.vue

@@ -6,103 +6,85 @@
   </q-avatar>
 </template>
 
-<script>
-const AvatarColors = {
-  Primary: 'primary',
-  SecondaryContrast: 'secondary-contrast',
-  Grey4: 'grey-4'
-}
+<script setup>
+import { AvatarColors } from './enums/AvatarColors'
+
+import { ref, computed, watch, useAttrs } from 'vue'
 
-export default {
+defineOptions({
   name: 'QasAvatar',
+  inheritAttrs: false
+})
+
+const props = defineProps({
+  color: {
+    type: String,
+    default: AvatarColors.Primary,
+    validator: value => {
+      const availableColors = Object.values(AvatarColors)
 
-  inheritAttrs: false,
-
-  props: {
-    color: {
-      type: String,
-      default: AvatarColors.Primary,
-      validator: value => {
-        const availableColors = Object.values(AvatarColors)
-
-        return availableColors.includes(value)
-      }
-    },
-
-    size: {
-      type: String,
-      default: ''
-    },
-
-    icon: {
-      default: 'sym_r_error',
-      type: String
-    },
-
-    image: {
-      default: '',
-      type: String
-    },
-
-    title: {
-      default: '',
-      type: String
+      return availableColors.includes(value)
     }
   },
 
-  data () {
-    return {
-      hasImageError: false
-    }
+  size: {
+    type: String,
+    default: ''
   },
 
-  computed: {
-    firstLetter () {
-      return this.title[0].toUpperCase()
-    },
-
-    hasImage () {
-      return !this.hasImageError && !!this.image
-    },
-
-    hasTitle () {
-      return !!this.title
-    },
-
-    attributes () {
-      const {
-        rounded,
-        square,
-        fontSize,
-        textColor,
-        ...attributes
-      } = this.$attrs
-
-      const colors = {
-        [AvatarColors.Primary]: 'white',
-        [AvatarColors.SecondaryContrast]: 'primary',
-        [AvatarColors.Grey4]: 'grey-8'
-      }
-
-      return {
-        size: this.size,
-        color: this.color,
-        textColor: colors[this.color],
-        ...attributes
-      }
-    }
+  icon: {
+    default: 'sym_r_error',
+    type: String
   },
 
-  watch: {
-    image () {
-      this.hasImageError = false
-    }
+  image: {
+    default: '',
+    type: String
   },
 
-  methods: {
-    onImageLoadedError () {
-      this.hasImageError = true
-    }
+  title: {
+    default: '',
+    type: String
+  }
+})
+
+const attrs = useAttrs()
+
+const hasImageError = ref(false)
+
+const attributes = computed(() => {
+  const {
+    rounded,
+    square,
+    fontSize,
+    textColor,
+    ...attributes
+  } = attrs
+
+  const colors = {
+    [AvatarColors.Primary]: 'white',
+    [AvatarColors.SecondaryContrast]: 'primary',
+    [AvatarColors.Grey4]: 'grey-8'
+  }
+
+  return {
+    size: props.size,
+    color: props.color,
+    textColor: colors[props.color],
+    ...attributes
   }
+})
+
+const firstLetter = computed(() => props.title[0].toUpperCase())
+
+const hasImage = computed(() => !hasImageError.value && !!props.image)
+const hasTitle = computed(() => !!props.title)
+
+watch(() => props.image, () => {
+  hasImageError.value = false
+})
+
+function onImageLoadedError () {
+  hasImageError.value = true
 }
 </script>

package/src/components/avatar/enums/AvatarColors.js

@@ -0,0 +1,9 @@
+/**
+ * Para utilizar este enum dentro do defineProps, é necessário externalizar e importar
+ * ou definir este enum em outro "<script>" fora do "<script setup>".
+ */
+export const AvatarColors = {
+  Primary: 'primary',
+  SecondaryContrast: 'secondary-contrast',
+  Grey4: 'grey-4'
+}

package/src/components/badge/QasBadge.vue

@@ -1,36 +1,35 @@
 <template>
-  <q-badge v-bind="$props" :aria-multiline="multiLine" class="q-px-sm q-py-xs qas-badge text-caption">
+  <q-badge v-bind="props" :aria-multiline="props.multiLine" class="q-px-sm q-py-xs qas-badge text-caption">
     <slot />
   </q-badge>
 </template>
 
-<script>
-export default {
+<script setup>
+defineOptions({
   name: 'QasBadge',
+  inheritAttrs: false
+})
 
-  inheritAttrs: false,
+const props = defineProps({
+  color: {
+    type: String,
+    default: 'light-blue-2'
+  },
 
-  props: {
-    color: {
-      type: String,
-      default: 'light-blue-2'
-    },
+  label: {
+    type: String,
+    default: ''
+  },
 
-    label: {
-      type: String,
-      default: ''
-    },
+  multiLine: {
+    type: Boolean
+  },
 
-    multiLine: {
-      type: Boolean
-    },
-
-    textColor: {
-      type: String,
-      default: 'grey-9'
-    }
+  textColor: {
+    type: String,
+    default: 'black'
   }
-}
+})
 </script>
 
 <style lang="scss">

package/src/components/badge/QasBadge.yml

@@ -20,7 +20,7 @@ props:
 
   text-color:
     desc: Cor do texto.
-    default: grey-9
+    default: black
     type: String
 
 slots:

package/src/components/box/QasBox.vue

@@ -1,30 +1,28 @@
 <template>
-  <div class="bg-white q-pa-md rounded-borders" :class="boxClass">
+  <div class="bg-white q-pa-md rounded-borders" :class="boxClasses">
     <slot />
   </div>
 </template>
 
-<script>
-export default {
-  name: 'QasBox',
+<script setup>
+import { computed } from 'vue'
 
-  props: {
-    outlined: {
-      type: Boolean
-    },
+defineOptions({ name: 'QasBox' })
 
-    unelevated: {
-      type: Boolean
-    }
+const props = defineProps({
+  outlined: {
+    type: Boolean
   },
 
-  computed: {
-    boxClass () {
-      return {
-        'border-grey': this.outlined,
-        'shadow-2': !this.unelevated
-      }
-    }
+  unelevated: {
+    type: Boolean
   }
-}
+})
+
+const boxClasses = computed(() => {
+  return {
+    'border-grey': props.outlined,
+    'shadow-2': !props.unelevated
+  }
+})
 </script>