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

package/src/components/app-menu/QasAppMenu.vue

@@ -4,37 +4,37 @@
       <div class="column full-height justify-between no-wrap">
         <div class="full-width">
           <!-- Brand -->
-          <div v-if="!isUntilLarge" class="q-mb-xl q-pt-xl qas-app-menu__label" :class="spacedItemClass">
-            <router-link class="flex relative-position text-no-decoration" :class="brandPositionClass" :to="rootRoute">
-              <q-img v-if="normalizedBrand" :alt="title" class="qas-app-menu__brand qas-app-menu__label" :class="brandClass" height="40px" no-spinner :src="normalizedBrand" />
+          <div v-if="!screen.untilLarge" class="q-mb-xl q-pt-xl qas-app-menu__label" :class="classes.spacedItem">
+            <router-link class="column flex items-center justify-center relative-position text-no-decoration" :to="rootRoute">
+              <q-img v-if="normalizedBrand" :alt="title" class="qas-app-menu__brand qas-app-menu__label" fit="contain" height="27px" img-class="qas-app-menu__brand-img" no-spinner :src="normalizedBrand" />
 
               <span v-else-if="!isMiniMode" class="ellipsis text-bold text-primary text-subtitle2">{{ title }}</span>
 
-              <q-badge v-if="hasDevelopmentBadge" color="red" floating :label="developmentBadgeLabel" />
+              <q-badge v-if="hasDevelopmentBadge" class="q-mt-sm" color="red" :label="developmentBadgeLabel" />
             </router-link>
           </div>
 
-          <div v-if="normalizedBrand" class="qas-app-menu__label" :class="spacedItemClass">
+          <div v-if="normalizedBrand" class="qas-app-menu__label" :class="classes.spacedItem">
             <q-separator />
           </div>
 
-          <div v-if="isUntilLarge" class="q-pr-xl q-pt-md text-right">
-            <qas-btn color="grey-9" icon="sym_r_close" variant="tertiary" @click="closeDrawer" />
+          <div v-if="screen.untilLarge" class="q-pr-xl q-pt-md text-right">
+            <qas-btn color="grey-10" icon="sym_r_close" variant="tertiary" @click="closeDrawer" />
           </div>
 
           <!-- Module -->
-          <div v-if="displayModuleSection" class="items-center justify-between no-wrap q-mt-xl qas-app-menu__label qas-app-menu__module row" :class="spacedItemClass">
+          <div v-if="showAppMenuDropdown" class="items-center justify-between no-wrap q-mt-xl qas-app-menu__label qas-app-menu__module row" :class="classes.spacedItem">
             <div class="full-width text-center">
               <pv-app-menu-dropdown v-bind="appMenuDropdownProps" />
             </div>
           </div>
 
           <!-- List -->
-          <q-list v-if="items.length" class="q-mt-xl qas-app-menu__menu text-grey-9">
+          <q-list v-if="items.length" class="q-mt-xl qas-app-menu__menu text-grey-10">
             <template v-for="(menuItem, index) in items">
-              <div v-if="hasChildren(menuItem)" :key="`children-${index}`" class="qas-app-menu__content" :class="contentClass">
+              <div v-if="hasChildren(menuItem)" :key="`children-${index}`" class="qas-app-menu__content" :class="classes.content">
                 <q-item class="ellipsis items-center q-py-none qas-app-menu__item qas-app-menu__item--label-mini text-weight-bold">
-                  <div class="ellipsis qas-app-menu__label text-grey-9 text-subtitle2" :class="spacedItemClass">
+                  <div class="ellipsis qas-app-menu__label text-grey-10 text-subtitle2" :class="classes.spacedItem">
                     {{ menuItem.label }}
                   </div>
                 </q-item>
@@ -53,7 +53,7 @@
                   </q-item-section>
                 </q-item>
 
-                <div v-if="hasSeparator(index)" class="qas-app-menu__label" :class="spacedItemClass">
+                <div v-if="hasSeparator(index)" class="qas-app-menu__label" :class="classes.spacedItem">
                   <q-separator spaced />
                 </div>
               </div>
@@ -84,289 +84,163 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import PvAppMenuDropdown from './private/PvAppMenuDropdown.vue'
-
 import QasAppUser from '../app-user/QasAppUser.vue'
 
-import { isLocalDevelopment } from '../../helpers'
+import useAppMenuDropdown from './composables/use-app-menu-dropdown'
+import useAppUser from './composables/use-app-user'
+import useDevelopmentBadge from './composables/use-development-badge'
+import { useScreen } from '../../composables'
 
-export default {
-  name: 'QasAppMenu',
+import { ref, computed } from 'vue'
+import { useRouter } from 'vue-router'
 
-  components: {
-    PvAppMenuDropdown,
-    QasAppUser
+defineOptions({
+  name: 'QasAppMenu',
+  inheritAttrs: false
+})
+
+const props = defineProps({
+  appUserProps: {
+    type: Object,
+    required: true,
+    default: () => ({})
   },
 
-  inheritAttrs: false,
-
-  props: {
-    appUserProps: {
-      type: Object,
-      required: true,
-      default: () => ({})
-    },
-
-    brand: {
-      default: '',
-      required: true,
-      type: String
-    },
-
-    items: {
-      default: () => [],
-      type: Array
-    },
-
-    miniBrand: {
-      type: String,
-      required: true,
-      default: ''
-    },
-
-    modelValue: {
-      default: true,
-      type: Boolean
-    },
-
-    modules: {
-      default: () => [],
-      type: Array
-    },
-
-    notifications: {
-      default: () => ({}),
-      type: Object
-    },
-
-    title: {
-      default: '',
-      type: String
-    }
+  brand: {
+    default: '',
+    required: true,
+    type: String
   },
 
-  emits: ['sign-out', 'update:modelValue'],
-
-  data () {
-    return {
-      hasOpenedMenu: false,
-      isMini: this.$qas.screen.isLarge,
-      module: ''
-    }
+  items: {
+    default: () => [],
+    type: Array
   },
 
-  computed: {
-    appMenuDropdownProps () {
-      return {
-        buttonDropdownProps: {
-          'onUpdate:menu': this.setHasOpenedMenu
-        },
-
-        currentModule: this.currentModelOption,
-        modules: this.defaultModules
-      }
-    },
-
-    behavior () {
-      return this.isUntilLarge ? 'mobile' : 'desktop'
-    },
-
-    brandClass () {
-      return {
-        'qas-app-menu__brand--spaced': !this.isMiniMode
-      }
-    },
-
-    brandPositionClass () {
-      return {
-        'justify-center': this.isMiniMode
-      }
-    },
-
-    contentClass () {
-      return {
-        'qas-app-menu__content--spaced': !this.isMiniMode
-      }
-    },
-
-    currentModelOption () {
-      return this.defaultModules.find(module => module?.value === this.module)
-    },
-
-    currentModule () {
-      const hostname = window.location.hostname
-      return this.defaultModules.find(module => module?.value.includes(hostname))?.value
-    },
-
-    defaultAppUserProps () {
-      return {
-        avatarSize: '40px',
-
-        menuProps: {
-          'onUpdate:modelValue': this.setHasOpenedMenu
-        },
-
-        // eventos
-        onSignOut: this.signOut,
-        ...this.appUserProps
-      }
-    },
-
-    defaultModules () {
-      if (!isLocalDevelopment()) return this.modules
-
-      const defaultModules = [...this.modules]
-      const { host, protocol } = window.location
-      const value = `${protocol}//${host}`
-
-      // Add a default module called "Localhost" when app is running in local development.
-      defaultModules.unshift({
-        label: `Localhost ${this.title ? `(${this.title})` : ''}`,
-        icon: 'sym_r_home',
-        value
-      })
-
-      return defaultModules
-    },
-
-    developmentBadgeLabel () {
-      const hosts = {
-        localhost: 'Local',
-        '.dev.': 'Develop'
-      }
+  miniBrand: {
+    type: String,
+    required: true,
+    default: ''
+  },
 
-      if (process.env.DEV) {
-        return hosts.localhost
-      }
+  modelValue: {
+    default: true,
+    type: Boolean
+  },
 
-      const current = Object.keys(hosts).find(
-        host => location.hostname.includes(host)
-      )
+  modules: {
+    default: () => [],
+    type: Array
+  },
 
-      return current ? hosts[current] : ''
-    },
+  notifications: {
+    default: () => ({}),
+    type: Object
+  },
 
-    displayModuleSection () {
-      return this.defaultModules.length
-    },
+  title: {
+    default: '',
+    type: String
+  }
+})
 
-    drawerWidth () {
-      return this.isUntilLarge ? 320 : 280
-    },
+const emits = defineEmits(['sign-out', 'update:modelValue'])
 
-    hasDevelopmentBadge () {
-      return !!this.developmentBadgeLabel
-    },
+const screen = useScreen()
+const router = useRouter()
 
-    isLargeScreen () {
-      return this.$qas.screen.isLarge
-    },
+const rootRoute = router.hasRoute('Root') ? { name: 'Root' } : { path: '/' }
 
-    isMiniMode () {
-      return this.isLargeScreen && this.isMini && !this.hasOpenedMenu
-    },
+const hasOpenedMenu = ref(false)
+const isMini = ref(screen.isLarge)
 
-    isUntilLarge () {
-      return this.$qas.screen.untilLarge
-    },
+const composableParams = {
+  props,
+  onMenuUpdate: setHasOpenedMenu,
+  onSignOut: () => emits('sign-out')
+}
 
-    model: {
-      get () {
-        return this.modelValue
-      },
+const { defaultAppUserProps, showAppUser } = useAppUser(composableParams)
+const { appMenuDropdownProps, showAppMenuDropdown } = useAppMenuDropdown(composableParams)
+const { developmentBadgeLabel, hasDevelopmentBadge } = useDevelopmentBadge()
 
-      set (value) {
-        return this.$emit('update:modelValue', value)
-      }
-    },
+const model = computed({
+  get () {
+    return props.modelValue
+  },
 
-    normalizedBrand () {
-      return this.isMiniMode ? this.miniBrand : this.brand
-    },
+  set (value) {
+    emits('update:modelValue', value)
+  }
+})
 
-    rootRoute () {
-      return this.$router.hasRoute('Root') ? { name: 'Root' } : { path: '/' }
-    },
+const behavior = computed(() => screen.untilLarge ? 'mobile' : 'desktop')
+const drawerWidth = computed(() => screen.untilLarge ? 320 : 280)
+const isMiniMode = computed(() => screen.isLarge && isMini.value && !hasOpenedMenu.value)
+const normalizedBrand = computed(() => isMini.value ? props.miniBrand : props.brand)
 
-    showAppUser () {
-      return this.hasUser && !this.isUntilLarge
+const classes = computed(() => {
+  return {
+    content: {
+      'qas-app-menu__content--spaced': !isMiniMode.value
     },
 
-    spacedItemClass () {
-      return {
-        'qas-app-menu__label--spaced': !this.isMiniMode
-      }
-    }
-  },
-
-  watch: {
-    currentModule: {
-      handler (value) {
-        this.module = value
-      },
-
-      immediate: true
+    spacedItem: {
+      'qas-app-menu__label--spaced': !isMiniMode.value
     }
-  },
+  }
+})
 
-  methods: {
-    closeDrawer () {
-      this.$emit('update:modelValue', false)
-    },
+// métodos
+function closeDrawer () {
+  emits('update:modelValue', false)
+}
 
-    getNormalizedPath (path) {
-      return path.split('/').filter(Boolean)?.[0]
-    },
+function getNormalizedPath (path) {
+  return path.split('/').filter(Boolean)?.[0]
+}
 
-    getPathFromObject ({ path, name }) {
-      if (path) return this.getNormalizedPath(path)
+function getPathFromObject ({ path, name }) {
+  if (path) return getNormalizedPath(path)
 
-      const resolvedRoute = this.$router.resolve({ name })
-      return this.getNormalizedPath(resolvedRoute.path)
-    },
+  const resolvedRoute = router.resolve({ name })
 
-    getRouterRedirect ({ to }) {
-      return to || ''
-    },
-
-    hasChildren ({ children }) {
-      return !!(children || []).length
-    },
+  return getNormalizedPath(resolvedRoute.path)
+}
 
-    hasSeparator (index) {
-      return !!this.items[index + 1]
-    },
+function getRouterRedirect ({ to }) {
+  return to || ''
+}
 
-    hasUser () {
-      return !!Object.keys(this.defaultAppUserProps.user || {}).length
-    },
+function hasChildren ({ children }) {
+  return !!(children || []).length
+}
 
-    isActive ({ to }) {
-      const currentPath = this.getNormalizedPath(this.$route.path)
-      const itemPath = typeof to === 'string' ? this.getNormalizedPath(to) : this.getPathFromObject(to)
+function hasSeparator (index) {
+  return !!props.items[index + 1]
+}
 
-      return currentPath === itemPath
-    },
+function isActive ({ to }) {
+  const currentPath = getNormalizedPath(router.currentRoute.value.path)
+  const itemPath = typeof to === 'string' ? getNormalizedPath(to) : getPathFromObject(to)
 
-    onMouseEvent ({ type }) {
-      if (!this.isLargeScreen) return
+  return currentPath === itemPath
+}
 
-      const isMouseLeave = type === 'mouseleave'
+function onMouseEvent ({ type }) {
+  if (!screen.isLarge) return
 
-      this.isMini = isMouseLeave
+  const isMouseLeave = type === 'mouseleave'
 
-      this.model = false
-    },
+  isMini.value = isMouseLeave
 
-    signOut () {
-      this.$emit('sign-out')
-    },
+  model.value = false
+}
 
-    setHasOpenedMenu (value) {
-      this.hasOpenedMenu = value
-    }
-  }
+function setHasOpenedMenu (value) {
+  hasOpenedMenu.value = value
 }
 </script>
 
@@ -412,10 +286,8 @@ export default {
   }
 
   &__brand {
-    width: 40px;
-
-    &--spaced {
-      width: 208px;
+    :deep(.qas-app-menu__brand-img) {
+      transition: opacity 120ms ease-in; // 120ms é o mesmo tempo utilizado na abertura do QDrawer.
     }
   }
 

package/src/components/app-menu/composables/use-app-menu-dropdown.js

@@ -0,0 +1,71 @@
+import { isLocalDevelopment } from '../../../helpers'
+
+import { computed, watch, ref } from 'vue'
+
+/**
+ * @param {{
+ *  props: { modules: [], title: string },
+ *  onMenuUpdate: () => void
+ * }} config
+ */
+export default function useAppMenuDropdown (config = {}) {
+  const {
+    props,
+    onMenuUpdate
+  } = config
+
+  const { hostname } = window.location
+
+  const module = ref('')
+
+  const defaultModules = computed(() => {
+    if (!isLocalDevelopment()) return props.modules
+
+    const normalizedModules = [...props.modules]
+
+    const { host, protocol } = location
+    const value = `${protocol}//${host}`
+
+    /**
+     * Adiciona um módulo padrão chamado "Localhost" quando o aplicativo está sendo
+     * executado em desenvolvimento local.
+     */
+    normalizedModules.unshift({
+      label: `Localhost ${props.title ? `(${props.title})` : ''}`,
+      icon: 'sym_r_home',
+      value
+    })
+
+    return normalizedModules
+  })
+
+  const currentModelOption = computed(() => {
+    return defaultModules.value.find(moduleOption => moduleOption?.value === module.value)
+  })
+
+  const appMenuDropdownProps = computed(() => {
+    return {
+      buttonDropdownProps: {
+        'onUpdate:menu': onMenuUpdate
+      },
+
+      currentModule: currentModelOption.value,
+      modules: defaultModules.value
+    }
+  })
+
+  const currentModule = computed(() => {
+    return defaultModules.value.find(module => module?.value.includes(hostname))?.value
+  })
+
+  const showAppMenuDropdown = computed(() => !!currentModule.value)
+
+  watch(() => currentModule.value, value => {
+    module.value = value
+  }, { immediate: true })
+
+  return {
+    appMenuDropdownProps,
+    showAppMenuDropdown
+  }
+}

package/src/components/app-menu/composables/use-app-user.js

@@ -0,0 +1,46 @@
+import { useScreen } from '../../../composables'
+
+import { computed } from 'vue'
+
+/**
+ * @param {{
+ *  props: { appUserProps: {} }
+ *  onSignOut: () => void
+ *  onMenuUpdate: () => void
+ * }} config
+ */
+export default function useAppUser (config = {}) {
+  const {
+    props,
+
+    onSignOut,
+    onMenuUpdate
+  } = config
+
+  const screen = useScreen()
+
+  const defaultAppUserProps = computed(() => {
+    return {
+      avatarSize: '40px',
+
+      menuProps: {
+        'onUpdate:modelValue': onMenuUpdate()
+      },
+
+      // eventos
+      onSignOut,
+      ...props.appUserProps
+    }
+  })
+
+  const showAppUser = computed(() => {
+    const hasAppUser = !!Object.keys(defaultAppUserProps.value.user || {}).length
+
+    return hasAppUser && !screen.isUntilLarge
+  })
+
+  return {
+    defaultAppUserProps,
+    showAppUser
+  }
+}

package/src/components/app-menu/composables/use-development-badge.js

@@ -0,0 +1,23 @@
+import { computed } from 'vue'
+
+export default function useDevelopmentBadge () {
+  const developmentBadgeLabel = computed(() => {
+    const hosts = {
+      localhost: 'Local',
+      '.dev.': 'Develop'
+    }
+
+    if (process.env.DEV) return hosts.localhost
+
+    const current = Object.keys(hosts).find(host => window.location.hostname.includes(host))
+
+    return current ? hosts[current] : ''
+  })
+
+  const hasDevelopmentBadge = computed(() => !!developmentBadgeLabel.value)
+
+  return {
+    developmentBadgeLabel,
+    hasDevelopmentBadge
+  }
+}