chore: updates eslint-config

.eslintrc.cjs

@@ -2,14 +2,4 @@ process.env.ESLINT_TSCONFIG = '.nuxt/tsconfig.json';
 
 module.exports = {
   extends: ['plugin:nuxt/recommended', '@rotki'],
-  rules: {
-    'vue/component-name-in-template-casing': [
-      'error',
-      'PascalCase',
-      {
-        registeredComponentsOnly: false,
-        ignores: ['i18n-t'],
-      },
-    ],
-  },
 };

components/HeaderArea.vue

@@ -7,7 +7,7 @@ withDefaults(
   {
     noMargin: false,
     landing: false,
-  }
+  },
 );
 
 const css = useCssModule();

components/HeroArea.vue

@@ -8,9 +8,9 @@ const { t } = useI18n();
   <div :class="css.wrapper">
     <div :class="css.title">
       <div :class="css.column">
-        <i18n-t keypath="home.hero.title" scope="global">
+        <I18nT keypath="home.hero.title" scope="global">
           <br />
-        </i18n-t>
+        </I18nT>
       </div>
     </div>
     <div :class="css.subtitle">

components/account/CountrySelect.vue

@@ -20,7 +20,7 @@ const props = withDefaults(
     disabled: false,
     errorMessages: () => [],
     autocomplete: undefined,
-  }
+  },
 );
 
 const emit = defineEmits<{
@@ -121,7 +121,7 @@ debouncedWatch(
       setCountryUsingCode(value);
     }
   },
-  { debounce: 800 }
+  { debounce: 800 },
 );
 
 emit('selected', get(selected));

components/account/InputField.vue

@@ -25,7 +25,7 @@ const props = withDefaults(
     readonly: false,
     disabled: false,
     filled: false,
-  }
+  },
 );
 
 const emit = defineEmits<{

components/account/home/AccountInformation.vue

@@ -25,7 +25,7 @@ const done = ref(false);
 const { account } = storeToRefs(store);
 
 const movedOffline = computed(
-  () => get(account)?.address.movedOffline ?? false
+  () => get(account)?.address.movedOffline ?? false,
 );
 
 onMounted(() => {

components/account/home/DangerZone.vue

@@ -12,7 +12,7 @@ const { account } = storeToRefs(store);
 
 const username = computed(() => account.value?.username);
 const isSubscriber = computed(
-  () => account.value?.hasActiveSubscription ?? false
+  () => account.value?.hasActiveSubscription ?? false,
 );
 
 const deleteAccount = async () => {

components/account/home/PaymentsTable.vue

@@ -20,7 +20,7 @@ const payments = computed(() => {
     return [];
   }
   return userAccount.payments.sort(
-    (a, b) => new Date(a.paidAt).getTime() - new Date(b.paidAt).getTime()
+    (a, b) => new Date(a.paidAt).getTime() - new Date(b.paidAt).getTime(),
   );
 });
 

components/account/home/SubscriptionTable.vue

@@ -28,7 +28,7 @@ const subscriptions = computed(() => {
 const pending = computed(() => get(subscriptions).filter((sub) => sub.pending));
 
 const renewableSubscriptions = computed(() =>
-  get(subscriptions).filter(({ actions }) => actions.includes('renew'))
+  get(subscriptions).filter(({ actions }) => actions.includes('renew')),
 );
 
 const pendingPaymentCurrency = computedAsync(async () => {
@@ -70,12 +70,12 @@ const renewLink = computed<{ path: string; query: Record<string, string> }>(
     }
 
     return link;
-  }
+  },
 );
 
 const { pause, resume, isActive } = useIntervalFn(
   async () => await store.getAccount(),
-  60000
+  60000,
 );
 
 watch(pending, (pending) => {

components/account/password/PasswordForm.vue

@@ -23,7 +23,7 @@ const v$ = useVuelidate(
   {
     $autoDirty: true,
     $externalResults,
-  }
+  },
 );
 
 const setCaptchaId = (v: number) => {

components/account/password/PasswordReset.vue

@@ -38,7 +38,7 @@ function setupTokenValidation() {
 function setupFormValidation(
   password: Ref<string>,
   passwordConfirmation: Ref<string>,
-  $externalResults: Ref<{}>
+  $externalResults: Ref<NonNullable<unknown>>,
 ) {
   const rules = {
     password: { required, minLength: minLength(8) },
@@ -54,7 +54,7 @@ function setupFormValidation(
     {
       $autoDirty: true,
       $externalResults,
-    }
+    },
   );
 
   const valid = computed(() => !v$.value.$invalid);
@@ -100,7 +100,7 @@ const { validating, isValid } = setupTokenValidation();
 const { valid, v$ } = setupFormValidation(
   password,
   passwordConfirmation,
-  $externalResults
+  $externalResults,
 );
 
 const css = useCssModule();

components/account/signup/SignupForm.vue

@@ -53,7 +53,7 @@ const rules = {
     required,
     validateCode: helpers.withMessage(
       'Enter a valid postal code. Only alphabets, numbers, space and -',
-      helpers.regex(/^[\d\sA-Za-z-]+$/)
+      helpers.regex(/^[\d\sA-Za-z-]+$/),
     ),
   },
   country: { required },
@@ -77,7 +77,7 @@ const setCaptchaId = (v: number) => {
 
 const useSignup = (
   captcha: Ref<string>,
-  $externalResults: Ref<Record<string, string>>
+  $externalResults: Ref<Record<string, string>>,
 ) => {
   const signup = async (payload: SignupPayload) => {
     const isValid = await get(v$).$validate();

components/checkout/SelectionButton.vue

@@ -6,7 +6,7 @@ withDefaults(
   }>(),
   {
     disabled: false,
-  }
+  },
 );
 
 const emit = defineEmits<{ (e: 'click'): void }>();

components/checkout/pay/CardPayment.vue

@@ -21,9 +21,19 @@ type FieldStatus = {
 
 type EmptyState = { number: boolean; cvv: boolean; expirationDate: boolean };
 
+const props = defineProps<{
+  token: string;
+  plan: SelectedPlan;
+}>();
+
+const emit = defineEmits<{
+  (e: 'pay', payment: PayEvent): void;
+  (e: 'update:pending', pending: boolean): void;
+}>();
+
 const setupEmptyStateMonitoring = (
   hostedFields: HostedFields,
-  empty: Ref<EmptyState>
+  empty: Ref<EmptyState>,
 ) => {
   hostedFields.on('notEmpty', (event) => {
     const field = event.fields[event.emittedBy];
@@ -46,7 +56,7 @@ const setupValidityMonitoring = (
     numberStatus: Ref<FieldStatus>;
     expirationDateStatus: Ref<FieldStatus>;
     cvvStatus: Ref<FieldStatus>;
-  }
+  },
 ) => {
   hostedFields.on('validityChange', (event) => {
     const field = event.emittedBy;
@@ -72,7 +82,7 @@ const setupFocusManagement = (
     numberStatus: Ref<FieldStatus>;
     expirationDateStatus: Ref<FieldStatus>;
     cvvStatus: Ref<FieldStatus>;
-  }
+  },
 ) => {
   hostedFields.on('focus', (event) => {
     const field = event.emittedBy;
@@ -138,7 +148,7 @@ const setupHostedFields = () => {
       numberStatus: Ref<FieldStatus>;
       expirationDateStatus: Ref<FieldStatus>;
       cvvStatus: Ref<FieldStatus>;
-    }
+    },
   ) => {
     setupFocusManagement(get(), focused, status);
     setupEmptyStateMonitoring(get(), empty);
@@ -163,16 +173,6 @@ type ErrorMessage = {
   message: string;
 };
 
-const props = defineProps<{
-  token: string;
-  plan: SelectedPlan;
-}>();
-
-const emit = defineEmits<{
-  (e: 'pay', payment: PayEvent): void;
-  (e: 'update:pending', pending: boolean): void;
-}>();
-
 const { token, plan } = toRefs(props);
 const fields = setupHostedFields();
 const verify = ref(false);
@@ -240,7 +240,7 @@ const valid = computed(
     get(accepted) &&
     get(numberStatus).valid &&
     get(expirationDateStatus).valid &&
-    get(cvvStatus).valid
+    get(cvvStatus).valid,
 );
 const paying = ref(false);
 
@@ -290,7 +290,7 @@ const submit = async () => {
         title: '3D Secure authentication failed',
         message: `The 3D Secure authentication of your card failed (${status?.replaceAll(
           '_',
-          ' '
+          ' ',
         )}). Please try a different payment method.`,
       });
       logger.error(`liability did not shift, due to status: ${status}`);

components/checkout/pay/CryptoPage.vue

@@ -25,7 +25,7 @@ onMounted(async () => {
   if (selectedPlan > 0 && selectedCurrency) {
     provider = await detectEthereumProvider();
     logger.debug(
-      `provider: ${!!provider}, is metamask: ${provider?.isMetaMask}`
+      `provider: ${!!provider}, is metamask: ${provider?.isMetaMask}`,
     );
     set(metamaskSupport, !!provider);
     set(loading, true);
@@ -97,7 +97,7 @@ const {
     assert(provider);
     return provider;
   },
-  !!config.public.testing
+  !!config.public.testing,
 );
 
 watch(plan, async (plan) => {
@@ -106,7 +106,7 @@ watch(plan, async (plan) => {
   const response = await switchCryptoPlan(
     plan,
     selectedCurrency,
-    get(subscriptionId)
+    get(subscriptionId),
   );
   if (!response.isError) {
     set(data, response.result);

components/checkout/pay/CryptoPaymentForm.vue

@@ -5,11 +5,19 @@ import { get, set, useClipboard } from '@vueuse/core';
 import { type CryptoPayment } from '~/types';
 import { logger } from '~/utils/logger';
 
+const props = defineProps<{
+  data: CryptoPayment;
+  plan: number;
+  metamaskSupport: boolean;
+}>();
+
+const emit = defineEmits<{ (e: 'pay'): void }>();
+
 const config = useRuntimeConfig();
 
 const createPaymentQR = async (
   payment: CryptoPayment,
-  canvas: HTMLCanvasElement
+  canvas: HTMLCanvasElement,
 ) => {
   let qrText = '';
   const chainId = getChainId(!!config.public.testing);
@@ -30,14 +38,6 @@ const createPaymentQR = async (
   return qrText;
 };
 
-const props = defineProps<{
-  data: CryptoPayment;
-  plan: number;
-  metamaskSupport: boolean;
-}>();
-
-const emit = defineEmits<{ (e: 'pay'): void }>();
-
 const { data } = toRefs(props);
 const canvas = ref<HTMLCanvasElement>();
 const qrText = ref<string>('');

components/checkout/pay/HostedField.vue

@@ -14,7 +14,7 @@ withDefaults(
     valid: false,
     number: false,
     empty: false,
-  }
+  },
 );
 
 const emit = defineEmits<{ (e: 'click'): void }>();

components/checkout/pay/PaypalPayment.vue

@@ -7,12 +7,19 @@ import { type PayEvent } from '~/types/common';
 import { assert } from '~/utils/assert';
 import { logger } from '~/utils/logger';
 
+const props = defineProps<{
+  token: string;
+  plan: SelectedPlan;
+}>();
+
+const emit = defineEmits<{ (e: 'pay', plan: PayEvent): void }>();
+
 const initializeBraintree = async (
   token: Ref<string>,
   plan: Ref<SelectedPlan>,
   accepted: Ref<boolean>,
   mustAcceptRefund: Ref<boolean>,
-  pay: (plan: PayEvent) => void
+  pay: (plan: PayEvent) => void,
 ) => {
   let paypalActions: any = null;
   watch(accepted, (accepted) => {
@@ -85,13 +92,6 @@ const initializeBraintree = async (
   return btClient;
 };
 
-const props = defineProps<{
-  token: string;
-  plan: SelectedPlan;
-}>();
-
-const emit = defineEmits<{ (e: 'pay', plan: PayEvent): void }>();
-
 const { token, plan } = toRefs(props);
 const error = ref('');
 const accepted = ref(false);
@@ -106,7 +106,7 @@ onMounted(async () => {
       plan,
       accepted,
       mustAcceptRefund,
-      (p) => emit('pay', p)
+      (p) => emit('pay', p),
     );
   } catch (e: any) {
     error.value = e.message;