mirrors/it-tools
1
0
Fork 0
mirror of https://github.com/CorentinTh/it-tools.git synced 2025-05-08 15:15:02 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

chore(user-agent-parser): some more changes requested by code review

Browse source
This commit is contained in:
Carsten Götzinger 2023-04-06 10:10:45 +02:00
parent ed6017ee81
commit 3ee7e5d653
4 changed files with 21 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/tools/user-agent-parser/index.ts
View file

@ -8,4 +8,5 @@ export const tool = defineTool({
keywords: ['user', 'agent', 'parser', 'browser', 'engine', 'os', 'cpu', 'device', 'user-agent', 'client'],
component: () => import('./user-agent-parser.vue'),
icon: Browser,
createdAt: new Date('2023-04-06'),
});

12
src/tools/user-agent-parser/user-agent-parser.types.ts Normal file
View file

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

13
src/tools/user-agent-parser/user-agent-parser.vue
View file

@ -15,11 +15,12 @@
</template>
<script setup lang="ts">
import { computed, PropType, ref } from 'vue';
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);
@ -32,15 +33,7 @@ const getUserAgentInfo = (userAgent: string) =>
: ({ ua: '', browser: {}, cpu: {}, device: {}, engine: {}, os: {} } as UAParser.IResult);
const userAgentInfo = computed(() => withDefaultOnError(() => getUserAgentInfo(ua.value), undefined));
const sections: {
heading: string;
icon?: PropType<any>;
content: {
label: string;
getValue: (blocks: UAParser.IResult) => string | undefined;
undefinedFallback?: string;
}[];
}[] = [
const sections: UserAgentResultSection[] = [
{
heading: 'Browser',
icon: Browser,

18
src/tools/user-agent-parser/user-agent-result-cards.vue
View file

@ -16,12 +16,11 @@
<n-space>
<span v-for="{ label, getValue } in content" :key="label">
<n-tooltip trigger="hover">
<n-tooltip v-if="getValue(userAgentInfo)" trigger="hover">
<template #trigger>
<n-tag v-if="getValue(userAgentInfo)" type="success" size="large" round :bordered="false">
<n-tag type="success" size="large" round :bordered="false">
{{ getValue(userAgentInfo) }}
</n-tag>
<span v-else />
</template>
{{ label }}
</n-tooltip>
@ -39,20 +38,13 @@
</template>
<script setup lang="ts">
import { PropType, toRefs } from 'vue';
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: {
heading: string;
icon?: PropType<any>;
content: {
label: string;
getValue: (blocks: UAParser.IResult) => string | undefined;
undefinedFallback?: string;
}[];
}[];
sections: UserAgentResultSection[];
}>();
const { userAgentInfo, sections } = toRefs(props);
</script>