paginar 0.3.2 → 0.3.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.es.js +9639 -8894
- package/dist/index.es.js.map +1 -1
- package/dist/style.css +287 -284
- package/package.json +1 -1
- package/src/App.ce.vue +166 -148
- package/src/assets/main.css +392 -392
- package/src/components/HeaderSlot/SummaryButton/SummaryButton.vue +74 -70
- package/src/tailwind.css +285 -282
|
@@ -1,70 +1,74 @@
|
|
|
1
|
-
<script setup>
|
|
2
|
-
import { ref } from 'vue'
|
|
3
|
-
import { onClickOutside, onKeyStroke } from '@vueuse/core'
|
|
4
|
-
|
|
5
|
-
import useReaderSettings from '../../../composables/useReaderSettings'
|
|
6
|
-
|
|
7
|
-
import IconHome from '../../icons/Home.vue'
|
|
8
|
-
import IconClose from '../../icons/Close.vue'
|
|
9
|
-
import IconSummary from '../../icons/Summary.vue'
|
|
10
|
-
import SummaryDropdown from './SummaryDropdown.vue'
|
|
11
|
-
|
|
12
|
-
const show = ref(false)
|
|
13
|
-
const button = ref(null)
|
|
14
|
-
|
|
15
|
-
const { homeUrl } = useReaderSettings
|
|
16
|
-
|
|
17
|
-
const toggleSummary = () =>
|
|
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
|
-
<template #
|
|
63
|
-
<slot name="
|
|
64
|
-
</template>
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
</
|
|
1
|
+
<script setup>
|
|
2
|
+
import { ref } from 'vue'
|
|
3
|
+
import { onClickOutside, onKeyStroke } from '@vueuse/core'
|
|
4
|
+
|
|
5
|
+
import useReaderSettings from '../../../composables/useReaderSettings'
|
|
6
|
+
|
|
7
|
+
import IconHome from '../../icons/Home.vue'
|
|
8
|
+
import IconClose from '../../icons/Close.vue'
|
|
9
|
+
import IconSummary from '../../icons/Summary.vue'
|
|
10
|
+
import SummaryDropdown from './SummaryDropdown.vue'
|
|
11
|
+
|
|
12
|
+
const show = ref(false)
|
|
13
|
+
const button = ref(null)
|
|
14
|
+
|
|
15
|
+
const { homeUrl } = useReaderSettings
|
|
16
|
+
|
|
17
|
+
const toggleSummary = () => {
|
|
18
|
+
show.value = !show.value
|
|
19
|
+
useReaderSettings.setBlocked(show.value)
|
|
20
|
+
}
|
|
21
|
+
const hide = () => {
|
|
22
|
+
if (!useReaderSettings.blocked.value) {
|
|
23
|
+
show.value = false
|
|
24
|
+
useReaderSettings.setBlocked(false)
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
onClickOutside(button, () => hide())
|
|
29
|
+
onKeyStroke('Escape', () => hide())
|
|
30
|
+
</script>
|
|
31
|
+
|
|
32
|
+
<template>
|
|
33
|
+
<div id="summary-menu" ref="button" class="relative">
|
|
34
|
+
<div class="flex">
|
|
35
|
+
<a v-if="homeUrl"
|
|
36
|
+
:href="homeUrl" title="Homepage" id="home-button"
|
|
37
|
+
class="hidden md:flex items-center border p-3 shadow mr-3
|
|
38
|
+
border-white text-white"
|
|
39
|
+
>
|
|
40
|
+
<IconHome class="w-6 h-6"/>
|
|
41
|
+
</a>
|
|
42
|
+
|
|
43
|
+
<div class="position-relative">
|
|
44
|
+
<button
|
|
45
|
+
@click.prevent="toggleSummary()"
|
|
46
|
+
class="border p-3 shadow flex items-center border-white text-white"
|
|
47
|
+
id="summary-button" aria-haspopup="true" :aria-expanded="show"
|
|
48
|
+
>
|
|
49
|
+
<IconSummary v-if="!show" />
|
|
50
|
+
<IconClose v-else class="w-6 h-6" />
|
|
51
|
+
|
|
52
|
+
<span class="block ml-3">
|
|
53
|
+
Sumário
|
|
54
|
+
</span>
|
|
55
|
+
</button>
|
|
56
|
+
|
|
57
|
+
<transition enter-active-class="transition ease-out duration-100 transform" enter-class="opacity-0 scale-95"
|
|
58
|
+
enter-to-class="opacity-100 scale-100" leave-active-class="transition ease-in duration-75 transform"
|
|
59
|
+
leave-class="opacity-100 scale-100" leave-to-class="opacity-0 scale-95"
|
|
60
|
+
>
|
|
61
|
+
<SummaryDropdown v-if="show">
|
|
62
|
+
<template #summaryTop>
|
|
63
|
+
<slot name="summaryTop"/>
|
|
64
|
+
</template>
|
|
65
|
+
|
|
66
|
+
<template #summaryBottom>
|
|
67
|
+
<slot name="summaryBottom"/>
|
|
68
|
+
</template>
|
|
69
|
+
</SummaryDropdown>
|
|
70
|
+
</transition>
|
|
71
|
+
</div>
|
|
72
|
+
</div>
|
|
73
|
+
</div>
|
|
74
|
+
</template>
|