1
1
<script lang="ts" setup>
2
2
3
+ import type { IconProvider } from ' ./Base.vue' ;
4
+
5
+ function iconProvider(e : { _id: string , flag: string , count: number }): ReturnType <IconProvider > {
6
+ let name = e ._id .toLowerCase ().replace (/ / g , ' -' );
7
+
8
+ if (name === ' mobile-safari' ) name = ' safari' ;
9
+ if (name === ' chrome-headless' ) name = ' chrome'
10
+ if (name === ' chrome-webview' ) name = ' chrome'
11
+
12
+ if (name === ' duckduckgo' ) return [' icon' , ' far fa-duck' ]
13
+ if (name === ' avast-secure-browser' ) return [' icon' , ' far fa-bug' ]
14
+ if (name === ' avg-secure-browser' ) return [' icon' , ' far fa-bug' ]
15
+
16
+ if (name === ' no_browser' ) return [' icon' , ' far fa-question' ]
17
+ if (name === ' gsa' ) return [' icon' , ' far fa-question' ]
18
+ if (name === ' miui-browser' ) return [' icon' , ' far fa-question' ]
19
+
20
+ if (name === ' vivo-browser' ) return [' icon' , ' far fa-question' ]
21
+ if (name === ' whale' ) return [' icon' , ' far fa-question' ]
22
+
23
+ if (name === ' twitter' ) return [' icon' , ' fab fa-twitter' ]
24
+ if (name === ' linkedin' ) return [' icon' , ' fab fa-linkedin' ]
25
+ if (name === ' facebook' ) return [' icon' , ' fab fa-facebook' ]
26
+
27
+ return [
28
+ ' img' ,
29
+ ` https://github.com/alrra/browser-logos/blob/main/src/${name }/${name }_256x256.png?raw=true `
30
+ ]
31
+ }
3
32
4
33
const browsersData = useFetch (' /api/data/browsers' , {
5
34
headers: useComputedHeaders ({ limit: 10 , }), lazy: true
@@ -8,15 +37,17 @@ const browsersData = useFetch('/api/data/browsers', {
8
37
const { showDialog, dialogBarData, isDataLoading } = useBarCardDialog ();
9
38
10
39
async function showMore() {
11
- dialogBarData .value = [];
40
+ dialogBarData .value = [];
12
41
showDialog .value = true ;
13
42
isDataLoading .value = true ;
14
43
15
44
const res = await $fetch (' /api/data/browsers' , {
16
45
headers: useComputedHeaders ({ limit: 1000 }).value
17
46
});
18
47
19
- dialogBarData .value = res || [];
48
+ dialogBarData .value = res ?.map (e => {
49
+ return { ... e , icon: iconProvider (e as any ) }
50
+ }) || [];
20
51
21
52
isDataLoading .value = false ;
22
53
@@ -28,8 +59,8 @@ async function showMore() {
28
59
<template >
29
60
<div class =" flex flex-col gap-2" >
30
61
<BarCardBase @showMore =" showMore()" @dataReload =" browsersData.refresh()" :data =" browsersData.data.value || []"
31
- desc =" The browsers most used to search your website." :dataIcons =" false "
32
- :loading =" browsersData.pending.value" label =" Top Browsers" sub-label =" Browsers" >
62
+ desc =" The browsers most used to search your website." :dataIcons =" true " :iconProvider = " iconProvider "
63
+ :loading =" browsersData.pending.value" label =" Browsers" sub-label =" Browsers" >
33
64
</BarCardBase >
34
65
</div >
35
66
</template >
0 commit comments