chore(lint): switched to a better lint config

src/tools/user-agent-parser/user-agent-parser.types.ts

@@ -1,12 +1,12 @@
 import type { Component } from 'vue';
-import { UAParser } from 'ua-parser-js';
+import type { UAParser } from 'ua-parser-js';
 
-export type UserAgentResultSection = {
-  heading: string;
-  icon?: Component;
+export interface UserAgentResultSection {
+  heading: string
+  icon?: Component
   content: {
-    label: string;
-    getValue: (blocks?: UAParser.IResult) => string | undefined;
-    undefinedFallback?: string;
-  }[];
-};
+    label: string
+    getValue: (blocks?: UAParser.IResult) => string | undefined
+    undefinedFallback?: string
+  }[]
+}

src/tools/user-agent-parser/user-agent-parser.vue

@@ -1,3 +1,107 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { UAParser } from 'ua-parser-js';
+import { Adjustments, Browser, Cpu, Devices, Engine } from '@vicons/tabler';
+import UserAgentResultCards from './user-agent-result-cards.vue';
+import type { UserAgentResultSection } from './user-agent-parser.types';
+import { withDefaultOnError } from '@/utils/defaults';
+
+const ua = ref(navigator.userAgent as string);
+
+// If not input in the ua field is present return an empty object of type UAParser.IResult because otherwise
+// UAParser returns the values for the current Browser. This is confusing because results are shown for an empty
+// UA field value.
+function getUserAgentInfo(userAgent: string) {
+  return userAgent.trim().length > 0
+    ? UAParser(userAgent.trim())
+    : ({ ua: '', browser: {}, cpu: {}, device: {}, engine: {}, os: {} } as UAParser.IResult);
+}
+const userAgentInfo = computed(() => withDefaultOnError(() => getUserAgentInfo(ua.value), undefined));
+
+const sections: UserAgentResultSection[] = [
+  {
+    heading: 'Browser',
+    icon: Browser,
+    content: [
+      {
+        label: 'Name',
+        getValue: block => block?.browser.name,
+        undefinedFallback: 'No browser name available',
+      },
+      {
+        label: 'Version',
+        getValue: block => block?.browser.version,
+        undefinedFallback: 'No browser version available',
+      },
+    ],
+  },
+  {
+    heading: 'Engine',
+    icon: Engine,
+    content: [
+      {
+        label: 'Name',
+        getValue: block => block?.engine.name,
+        undefinedFallback: 'No engine name available',
+      },
+      {
+        label: 'Version',
+        getValue: block => block?.engine.version,
+        undefinedFallback: 'No engine version available',
+      },
+    ],
+  },
+  {
+    heading: 'OS',
+    icon: Adjustments,
+    content: [
+      {
+        label: 'Name',
+        getValue: block => block?.os.name,
+        undefinedFallback: 'No OS name available',
+      },
+      {
+        label: 'Version',
+        getValue: block => block?.os.version,
+        undefinedFallback: 'No OS version available',
+      },
+    ],
+  },
+  {
+    heading: 'Device',
+    icon: Devices,
+    content: [
+      {
+        label: 'Model',
+        getValue: block => block?.device.model,
+        undefinedFallback: 'No device model available',
+      },
+      {
+        label: 'Type',
+        getValue: block => block?.device.type,
+        undefinedFallback: 'No device type available',
+      },
+      {
+        label: 'Vendor',
+        getValue: block => block?.device.vendor,
+        undefinedFallback: 'No device vendor available',
+      },
+    ],
+  },
+  {
+    heading: 'CPU',
+    icon: Cpu,
+    content: [
+      {
+        label: 'Architecture',
+        getValue: block => block?.cpu.architecture,
+        undefinedFallback: 'No CPU architecture available',
+      },
+    ],
+  },
+];
+</script>
+
 <template>
   <div>
     <n-form-item label="User agent string">
@@ -10,111 +114,6 @@
       />
     </n-form-item>
 
-    <user-agent-result-cards :user-agent-info="userAgentInfo" :sections="sections" />
+    <UserAgentResultCards :user-agent-info="userAgentInfo" :sections="sections" />
   </div>
 </template>
-
-<script setup lang="ts">
-import { computed, ref } from 'vue';
-import { UAParser } from 'ua-parser-js';
-import { withDefaultOnError } from '@/utils/defaults';
-import { Adjustments, Browser, Cpu, Devices, Engine } from '@vicons/tabler';
-import UserAgentResultCards from './user-agent-result-cards.vue';
-import type { UserAgentResultSection } from './user-agent-parser.types';
-
-const ua = ref(navigator.userAgent as string);
-
-// If not input in the ua field is present return an empty object of type UAParser.IResult because otherwise
-// UAParser returns the values for the current Browser. This is confusing because results are shown for an empty
-// UA field value.
-const getUserAgentInfo = (userAgent: string) =>
-  userAgent.trim().length > 0
-    ? UAParser(userAgent.trim())
-    : ({ ua: '', browser: {}, cpu: {}, device: {}, engine: {}, os: {} } as UAParser.IResult);
-const userAgentInfo = computed(() => withDefaultOnError(() => getUserAgentInfo(ua.value), undefined));
-
-const sections: UserAgentResultSection[] = [
-  {
-    heading: 'Browser',
-    icon: Browser,
-    content: [
-      {
-        label: 'Name',
-        getValue: (block) => block?.browser.name,
-        undefinedFallback: 'No browser name available',
-      },
-      {
-        label: 'Version',
-        getValue: (block) => block?.browser.version,
-        undefinedFallback: 'No browser version available',
-      },
-    ],
-  },
-  {
-    heading: 'Engine',
-    icon: Engine,
-    content: [
-      {
-        label: 'Name',
-        getValue: (block) => block?.engine.name,
-        undefinedFallback: 'No engine name available',
-      },
-      {
-        label: 'Version',
-        getValue: (block) => block?.engine.version,
-        undefinedFallback: 'No engine version available',
-      },
-    ],
-  },
-  {
-    heading: 'OS',
-    icon: Adjustments,
-    content: [
-      {
-        label: 'Name',
-        getValue: (block) => block?.os.name,
-        undefinedFallback: 'No OS name available',
-      },
-      {
-        label: 'Version',
-        getValue: (block) => block?.os.version,
-        undefinedFallback: 'No OS version available',
-      },
-    ],
-  },
-  {
-    heading: 'Device',
-    icon: Devices,
-    content: [
-      {
-        label: 'Model',
-        getValue: (block) => block?.device.model,
-        undefinedFallback: 'No device model available',
-      },
-      {
-        label: 'Type',
-        getValue: (block) => block?.device.type,
-        undefinedFallback: 'No device type available',
-      },
-      {
-        label: 'Vendor',
-        getValue: (block) => block?.device.vendor,
-        undefinedFallback: 'No device vendor available',
-      },
-    ],
-  },
-  {
-    heading: 'CPU',
-    icon: Cpu,
-    content: [
-      {
-        label: 'Architecture',
-        getValue: (block) => block?.cpu.architecture,
-        undefinedFallback: 'No CPU architecture available',
-      },
-    ],
-  },
-];
-</script>
-
-<style lang="less" scoped></style>

src/tools/user-agent-parser/user-agent-result-cards.vue

@@ -1,3 +1,15 @@
+<script setup lang="ts">
+import { toRefs } from 'vue';
+import type { UAParser } from 'ua-parser-js';
+import type { UserAgentResultSection } from './user-agent-parser.types';
+
+const props = defineProps<{
+  userAgentInfo?: UAParser.IResult
+  sections: UserAgentResultSection[]
+}>();
+const { userAgentInfo, sections } = toRefs(props);
+</script>
+
 <template>
   <div>
     <n-grid :x-gap="12" :y-gap="8" cols="1 s:2" responsive="screen">
@@ -34,15 +46,3 @@
     </n-grid>
   </div>
 </template>
-
-<script setup lang="ts">
-import { toRefs } from 'vue';
-import { UAParser } from 'ua-parser-js';
-import type { UserAgentResultSection } from './user-agent-parser.types';
-
-const props = defineProps<{
-  userAgentInfo?: UAParser.IResult;
-  sections: UserAgentResultSection[];
-}>();
-const { userAgentInfo, sections } = toRefs(props);
-</script>