blob: 7f73921896a3e6c5b04f22d943e08c88a8329359 (
plain)
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
|
<script setup lang="ts">
import { apiCall, useWait } from '@vnuge/vnlib.browser';
import { useStore, type DownloadContentType } from '../../store';
import { ref } from 'vue';
import { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/vue'
const { bookmarks } = useStore();
const downloadAnchor = ref();
const { waiting } = useWait()
const downloadBookmarks = (contentType: DownloadContentType) => {
apiCall(async () => {
const htmlData = await bookmarks.api.downloadAll(contentType);
switch(contentType) {
case 'text/html':
case 'text/csv':
{
const blob = new Blob([htmlData], { type: contentType });
const url = URL.createObjectURL(blob);
downloadAnchor.value.href = url
}
break;
case 'application/json':
{
const json = JSON.stringify(htmlData);
const blob = new Blob([json], { type: contentType });
downloadAnchor.value.href = URL.createObjectURL(blob);
}
break;
}
downloadAnchor.value.download = `bookmarks.${contentType.split('/')[1]}`
downloadAnchor.value.click();
});
}
</script>
<template>
<div class="relative w-fit">
<Menu>
<MenuButton :disabled="waiting" class="flex items-center gap-3 btn light">
<div class="hidden lg:inline">Download</div>
<svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 13V4M7 14H5a1 1 0 0 0-1 1v4c0 .6.4 1 1 1h14c.6 0 1-.4 1-1v-4c0-.6-.4-1-1-1h-2m-1-5-4 5-4-5m9 8h0"/>
</svg>
</MenuButton>
<transition
enter-active-class="transition duration-100 ease-out"
enter-from-class="transform scale-95 opacity-0"
enter-to-class="transform scale-100 opacity-100"
leave-active-class="transition duration-75 ease-out"
leave-from-class="transform scale-100 opacity-100"
leave-to-class="transform scale-95 opacity-0"
>
<MenuItems class="absolute z-10 bg-white divide-y divide-gray-100 rounded-b shadow right-2 lg:left-0 min-w-32 lg:end-0 dark:bg-gray-700">
<ul class="py-2 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownDefaultButton">
<!-- Use the `active` state to conditionally style the active item. -->
<MenuItem as="template" v-slot="{ }">
<li>
<button @click="downloadBookmarks('text/html')" class="block w-full px-4 py-2 text-left hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
HTML
</button>
</li>
</MenuItem>
<MenuItem as="template" v-slot="{ }">
<li>
<button @click="downloadBookmarks('text/csv')" class="block w-full px-4 py-2 text-left hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
CSV
</button>
</li>
</MenuItem>
<MenuItem as="template" v-slot="{ }">
<li>
<button @click="downloadBookmarks('application/json')" class="block w-full px-4 py-2 text-left hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
JSON
</button>
</li>
</MenuItem>
</ul>
</MenuItems>
</transition>
</Menu>
</div>
<a ref="downloadAnchor" class="hidden"></a>
</template>
|
