Fix linting in Vue3

- Updated the code by aligning the code.

Signed-off-by: Nikhil Ashoka <[email protected]>

Author: Nikhil-Ashoka

.eslintrc.cjs

@@ -17,10 +17,10 @@ module.exports = {
         trailingComma: 'all',
       },
     ],
-    'vue/component-name-in-template-casing': [
-      'error',
-      'PascalCase' | 'kebab-case',
-    ],
+    // 'vue/component-name-in-template-casing': [
+    //   'error',
+    //   'PascalCase' | 'kebab-case',
+    // ],
   },
   ignorePatterns: ['*.timestamp-*.mjs'],
   overrides: [

src/components/AppHeader/AppHeader.vue

@@ -157,7 +157,7 @@ getEvents();
 
 const assetTag = computed(() => globalStore.assetTag);
 const isNavTagPresent = computed(
-  () => assetTag.value || globalStore.modelType || globalStore.serialNumber
+  () => assetTag.value || globalStore.modelType || globalStore.serialNumber,
 );
 const modelType = computed(() => globalStore.modelType);
 const serialNumber = computed(() => globalStore.serialNumber);

src/components/Composables/useTableSelectableComposable.js

@@ -167,4 +167,4 @@ const useTableSelectableComposable = () => {
   };
 };
 
-export default useTableSelectableComposable;
+export default useTableSelectableComposable;

src/components/Composables/useToastComposable.js

@@ -8,7 +8,7 @@ const useToastComposable = () => {
     show?.({
       props: () => ({
         //Success toast autoHideDelay - 10 seconds, Error/Info toast autohidedelay - 30 minutes
-        interval: statusPassed==="success" ? 10000 : 1800000, 
+        interval: statusPassed === 'success' ? 10000 : 1800000,
       }),
       component: h(Toast, {
         title: title,

src/components/Global/FormFile.vue

@@ -8,8 +8,8 @@
         :disabled="disabled"
         :state="state"
         plain
-        @update:model-value="$emit('input', file)"
         class="form-control-file"
+        @update:model-value="$emit('input', file)"
       >
       </BFormFile>
       <span

src/components/Global/InfoTooltipPassword.vue

@@ -36,11 +36,11 @@ import { defineProps } from 'vue';
 import IconTooltip from '@carbon/icons-vue/es/information/16';
 
 defineProps({
-    title: {
-      type: String,
-      default: '',
-    },
-  })
+  title: {
+    type: String,
+    default: '',
+  },
+});
 </script>
 
 <style lang="scss" scoped>
@@ -51,7 +51,7 @@ defineProps({
     vertical-align: baseline;
   }
 }
-#tooltip{
+#tooltip {
   text-align: left !important;
 }
 </style>

src/components/Global/InputPasswordToggle.vue

@@ -14,7 +14,6 @@
   </div>
 </template>
 
-
 <script setup>
 import IconView from '@carbon/icons-vue/es/view/20';
 import IconViewOff from '@carbon/icons-vue/es/view--off/20';
@@ -25,13 +24,11 @@ const togglePasswordLabel = ref(i18n.global.t('global.ariaLabel.showPassword'));
 const emit = defineEmits(['updatePassView']);
 const toggleVisibility = () => {
   isVisible.value = !isVisible.value;
-  emit('updatePassView',
-    isVisible.value ? 'text' : 'password'
-  )
+  emit('updatePassView', isVisible.value ? 'text' : 'password');
   togglePasswordLabel.value = isVisible.value
     ? i18n.global.t('global.ariaLabel.hidePassword')
-    : i18n.global.t('global.ariaLabel.showPassword')
-}
+    : i18n.global.t('global.ariaLabel.showPassword');
+};
 </script>
 
 <style lang="scss" scoped>

src/components/Global/TableRowAction.vue

@@ -59,51 +59,51 @@ import { defineProps, computed } from 'vue';
 import { omit } from 'lodash';
 
 const props = defineProps({
-    value: {
-      type: String,
-      required: true,
-    },
-    enabled: {
-      type: Boolean,
-      default: true,
-    },
-    title: {
-      type: String,
-      default: null,
-    },
-    rowData: {
-      type: Object,
-      default: () => {},
-    },
-    exportName: {
-      type: String,
-      default: 'export',
-    },
-    downloadLocation: {
-      type: String,
-      default: '',
-    },
-    btnIconOnly: {
-      type: Boolean,
-      default: true,
-    },
-    downloadInNewTab: {
-      type: Boolean,
-      default: false,
-    },
-    showButton: {
-      type: Boolean,
-      default: true,
-    },
-  });
+  value: {
+    type: String,
+    required: true,
+  },
+  enabled: {
+    type: Boolean,
+    default: true,
+  },
+  title: {
+    type: String,
+    default: null,
+  },
+  rowData: {
+    type: Object,
+    default: () => {},
+  },
+  exportName: {
+    type: String,
+    default: 'export',
+  },
+  downloadLocation: {
+    type: String,
+    default: '',
+  },
+  btnIconOnly: {
+    type: Boolean,
+    default: true,
+  },
+  downloadInNewTab: {
+    type: Boolean,
+    default: false,
+  },
+  showButton: {
+    type: Boolean,
+    default: true,
+  },
+});
 
 const dataForExport = computed(() => {
-      return JSON.stringify(omit(props.rowData, 'actions'));
-    });
+  return JSON.stringify(omit(props.rowData, 'actions'));
+});
 const download = computed(() => {
-      return `${props.exportName}.json`;
-    });
+  return `${props.exportName}.json`;
+});
 const href = computed(() => {
-      return `data:text/json;charset=utf-8,${dataForExport.value}`;
+  return `data:text/json;charset=utf-8,${dataForExport.value}`;
 });
-</script>
+</script>

src/layouts/AppLayout.vue

@@ -35,7 +35,7 @@ onMounted(() => {
 });
 
 watch(
-  () => route
+  () => route,
   // () => {
   //   nextTick(() => {
   //     setFocus(focusTarget.value);

src/layouts/LoginLayout.vue

@@ -5,7 +5,11 @@
       <div class="login-main">
         <div>
           <div class="login-brand mb-5">
-            <img width="90px" src="@/assets/images/login-company-logo.svg" :alt="altLogo" />
+            <img
+              width="90px"
+              src="@/assets/images/login-company-logo.svg"
+              :alt="altLogo"
+            />
           </div>
           <h1 v-if="customizableGuiName" class="h3 mb-5">
             {{ customizableGuiName }}
@@ -27,7 +31,7 @@ import { ref } from 'vue';
 // Need to uncomment the below when env based configuration is implemented
 // const  altLogo = ref(process.env.VUE_APP_COMPANY_NAME || 'OpenBMC');
 // const customizableGuiName = ref(process.env.VUE_APP_GUI_NAME || '');
-const  altLogo = ref('OpenBMC');
+const altLogo = ref('OpenBMC');
 const customizableGuiName = ref('Advanced System Management Interface (ASMI)');
 </script>