1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
|
<script setup lang="ts">
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">
<n-input
v-model:value="ua"
type="textarea"
placeholder="Put your user-agent here..."
clearable
:autosize="{ minRows: 2 }"
/>
</n-form-item>
<UserAgentResultCards :user-agent-info="userAgentInfo" :sections="sections" />
</div>
</template>
|
