MT#64293 Migrate AppBadge components to Vue 3 Composition API

- Migrate simple badge components and parent component to use <script setup>
and composables pattern.

- Minor CSS adjustments
  - Update app badge bottom spacing in `CscLayoutMain`
  - Simplify app badge styling in `CscPageLogin`

Change-Id: I98a961ee6dc7a89e344d9387c25bdb1dc9f91f21

src/components/AppBadgeApple.vue

@@ -14,14 +14,11 @@
     </div>
 </template>
 
-<script>
-export default {
-    name: 'AppBadgeApple',
-    props: {
-        href: {
-            type: String,
-            required: true
-        }
+<script setup>
+defineProps({
+    href: {
+        type: String,
+        required: true
     }
-}
+})
 </script>

src/components/AppBadgeGoogle.vue

@@ -14,14 +14,11 @@
     </div>
 </template>
 
-<script>
-export default {
-    name: 'AppBadgeGoogle',
-    props: {
-        href: {
-            type: String,
-            required: true
-        }
+<script setup>
+defineProps({
+    href: {
+        type: String,
+        required: true
     }
-}
+})
 </script>

src/components/AuiMobileAppBadges.vue

@@ -51,32 +51,17 @@
     </q-list>
 </template>
 
-<script>
+<script setup>
 import AppBadgeApple from 'components/AppBadgeApple'
 import AppBadgeGoogle from 'components/AppBadgeGoogle'
-import { mapState } from 'vuex'
-export default {
-    name: 'AuiMobileAppBadges',
-    components: { AppBadgeApple, AppBadgeGoogle },
-    computed: {
-        ...mapState('user', [
-            'platformInfo'
-        ]),
-        appNameAndroid () {
-            return this.platformInfo?.app?.android?.name
-        },
-        appNameApple () {
-            return this.platformInfo?.app?.apple?.name
-        },
-        appUrlAndroid () {
-            return this.platformInfo?.app?.android?.url
-        },
-        appUrlApple () {
-            return this.platformInfo?.app?.apple?.url
-        },
-        appName () {
-            return this.appNameAndroid || this.appNameApple
-        }
-    }
-}
+import { useUser } from 'src/composables/useUser'
+import { computed } from 'vue'
+
+const { platformInfo } = useUser()
+
+const appNameAndroid = computed(() => platformInfo.value?.app?.android?.name)
+const appNameApple = computed(() => platformInfo.value?.app?.apple?.name)
+const appUrlAndroid = computed(() => platformInfo.value?.app?.android?.url)
+const appUrlApple = computed(() => platformInfo.value?.app?.apple?.url)
+const appName = computed(() => appNameAndroid.value || appNameApple.value)
 </script>

src/composables/useUser.js

@@ -6,6 +6,9 @@ export function useUser () {
 
     // State
     const subscriber = computed(() => store.state.user.subscriber)
+    const platformInfo = computed(() => store.state.user.platformInfo)
+
+    // Getters
     const isLogged = computed(() => store.getters['user/isLogged'])
     const username = computed(() => store.getters['user/getUsername'])
     const isAdmin = computed(() => store.getters['user/isAdmin'])
@@ -30,6 +33,9 @@ export function useUser () {
     return {
         // State
         subscriber,
+        platformInfo,
+
+        // Getters
         isLogged,
         username,
         isAdmin,
@@ -45,7 +51,7 @@ export function useUser () {
         changeSIPPassword,
         initUser,
 
-        // Getters
+        // Getters with parameters
         hasCapability,
         hasPlatformFeature,
         hasSubscriberProfileAttribute

src/layouts/CscLayoutMain.vue

@@ -464,7 +464,7 @@ export default {
             if (copyrightIsDisplayed) {
                 return '45px'
             }
-            return '0px'
+            return '15px'
         }
     },
     watch: {

src/pages/CscPageLogin.vue

@@ -374,6 +374,5 @@ export default {
     width: 200px
     height: 200px
 .app-badge
-    height: 50px
     object-fit: contain
 </style>