paginar 0.3.0 → 0.3.2

package/src/components/HeaderSlot/OptionsButton/OptionsColumns.vue

@@ -1,51 +1,51 @@
-<script setup>
-import { computed } from 'vue'
-import { useWindowSize } from '@vueuse/core'
-
-import SingleColumn from '../../icons/SingleColumn.vue'
-import DoubleColumn from '../../icons/DoubleColumn.vue'
-
-import useReaderSettings from '../../../composables/useReaderSettings'
-const { columns, setColumns } = useReaderSettings
-const { width } = useWindowSize()
-
-const isSafari = computed(() => {
-	const ua = navigator.userAgent.toLowerCase()
-	return ua.indexOf('safari') !== -1 && ua.indexOf('chrome') === -1
-})
-
-</script>
-
-<template>
-	<div id="columns-menu" class="w-full hidden md:grid grid-cols-3 gap-2 mt-3">
-		<button
-			id="single-column-button"
-			class="col-span-1 text-primary text-center cursor-pointer py-3 rounded-sm border"
-			:class="{
-				'border-gray-300': columns !== 'single',
-				'bg-primary-extralight border-2 border-primary': columns === 'single',
-				'opacity-30 cursor-default': isSafari
-			}"
-			@click.prevent="!isSafari ? setColumns('single') : null"
-			aria-label="Coluna única"
-			:title="isSafari ? 'O navegador Safari não aceita visualização de coluna única.' : 'Coluna única'"
-		>
-			<SingleColumn class="mx-auto h-10 opacity-75" />
-		</button>
-
-		<button
-			id="double-column-button"
-			class="col-span-2 text-primary text-center cursor-pointer py-3 rounded-sm border"
-			:class="{
-				'border-gray-300': columns !== 'double',
-				'bg-primary-extralight border-2 border-primary': columns === 'double',
-				'opacity-30': width < 1024
-			}"
-			@click.prevent="width >= 1024 && setColumns('double')"
-			aria-label="Coluna dupla"
-			title="Coluna dupla"
-		>
-			<DoubleColumn name="DoubleColumn" class="mx-auto h-10 divide-opacity-75" />
-		</button>
-	</div>
-</template>
+<script setup>
+import { computed } from 'vue'
+import { useWindowSize } from '@vueuse/core'
+
+import SingleColumn from '../../icons/SingleColumn.vue'
+import DoubleColumn from '../../icons/DoubleColumn.vue'
+
+import useReaderSettings from '../../../composables/useReaderSettings'
+const { columns, setColumns } = useReaderSettings
+const { width } = useWindowSize()
+
+const isSafari = computed(() => {
+	const ua = navigator.userAgent.toLowerCase()
+	return ua.indexOf('safari') !== -1 && ua.indexOf('chrome') === -1
+})
+
+</script>
+
+<template>
+	<div id="columns-menu" class="w-full hidden md:grid grid-cols-3 gap-2 mt-3">
+		<button
+			id="single-column-button"
+			class="col-span-1 text-primary text-center cursor-pointer py-3 rounded-sm border"
+			:class="{
+				'border-gray-300': columns !== 'single',
+				'bg-primary-extralight border-2 border-primary': columns === 'single',
+				'opacity-30 cursor-default': isSafari
+			}"
+			@click.prevent="!isSafari ? setColumns('single') : null"
+			aria-label="Coluna única"
+			:title="isSafari ? 'O navegador Safari não aceita visualização de coluna única.' : 'Coluna única'"
+		>
+			<SingleColumn class="mx-auto h-10 opacity-75" />
+		</button>
+
+		<button
+			id="double-column-button"
+			class="col-span-2 text-primary text-center cursor-pointer py-3 rounded-sm border"
+			:class="{
+				'border-gray-300': columns !== 'double',
+				'bg-primary-extralight border-2 border-primary': columns === 'double',
+				'opacity-30': width < 1024
+			}"
+			@click.prevent="width >= 1024 && setColumns('double')"
+			aria-label="Coluna dupla"
+			title="Coluna dupla"
+		>
+			<DoubleColumn name="DoubleColumn" class="mx-auto h-10 divide-opacity-75" />
+		</button>
+	</div>
+</template>

package/src/components/HeaderSlot/OptionsButton/OptionsDropdown.vue

@@ -1,59 +1,59 @@
-<script setup>
-import IconEye from '../../icons/Eye.vue'
-import IconFootnote from '../../icons/Footnote.vue'
-
-import OptionsColumns from './OptionsColumns.vue';
-import OptionsFontFamily from './OptionsFontFamily.vue';
-import OptionsFontSize from './OptionsFontSize.vue';
-import OptionsColor from './OptionsColor.vue'
-
-import useFootnotes from '../../../composables/useFootnotes'
-
-</script>
-
-<template>
-	<div class="absolute top-14 py-4 px-3 shadow-lg w-60 md:w-104
-			text-areia -right-2 md:right-16 z-10 bg-white
-		"
-		role="Opções"
-		aria-orientation="vertical"
-		aria-labelledby="options-menu"
-	>
-		<div>
-
-			<slot name="optionsTop" />
-
-			<div id="footnotes-button">
-				<button @click.prevent="useFootnotes.setShowFootnotes(true)"
-					class="w-full flex justify-center items-center py-3 lowercase"
-				>
-					<IconFootnote class="w-6 h-6" />
-					<span class="ml-4">Notas de rodapé</span>
-				</button>
-
-				<div class="w-full border-b border-areia my-3"></div>
-			</div>
-
-
-			<div class="w-full flex justify-center items-center py-3 lowercase"
-				id="visualize-title"
-			>
-				<IconEye class="w-6 h-6" />
-				<span class="ml-4">Visualização</span>
-			</div>
-
-			<OptionsColumns />
-			<OptionsFontFamily />
-
-			<div class="w-full grid grid-cols-4 gap-2 my-3">
-
-				<OptionsFontSize />
-				<OptionsColor />
-			</div>
-
-			<div class="hidden w-full border-b border-areia my-8"></div>
-
-			<slot name="optionsBottom" />
-		</div>
-	</div>
-</template>
+<script setup>
+import IconEye from '../../icons/Eye.vue'
+import IconFootnote from '../../icons/Footnote.vue'
+
+import OptionsColumns from './OptionsColumns.vue';
+import OptionsFontFamily from './OptionsFontFamily.vue';
+import OptionsFontSize from './OptionsFontSize.vue';
+import OptionsColor from './OptionsColor.vue'
+
+import useFootnotes from '../../../composables/useFootnotes'
+
+</script>
+
+<template>
+	<div class="absolute top-14 py-4 px-3 shadow-lg w-60 md:w-104
+			text-areia -right-2 md:right-16 z-10 bg-white
+		"
+		role="Opções"
+		aria-orientation="vertical"
+		aria-labelledby="options-menu"
+	>
+		<div>
+
+			<slot name="optionsTop" />
+
+			<div id="footnotes-button">
+				<button @click.prevent="useFootnotes.setShowFootnotes(true)"
+					class="w-full flex justify-center items-center py-3 lowercase"
+				>
+					<IconFootnote class="w-6 h-6" />
+					<span class="ml-4">Notas de rodapé</span>
+				</button>
+
+				<div class="w-full border-b border-areia my-3"></div>
+			</div>
+
+
+			<div class="w-full flex justify-center items-center py-3 lowercase"
+				id="visualize-title"
+			>
+				<IconEye class="w-6 h-6" />
+				<span class="ml-4">Visualização</span>
+			</div>
+
+			<OptionsColumns />
+			<OptionsFontFamily />
+
+			<div class="w-full grid grid-cols-4 gap-2 my-3">
+
+				<OptionsFontSize />
+				<OptionsColor />
+			</div>
+
+			<div class="hidden w-full border-b border-areia my-8"></div>
+
+			<slot name="optionsBottom" />
+		</div>
+	</div>
+</template>

package/src/components/HeaderSlot/OptionsButton/OptionsFontFamily.vue

@@ -1,17 +1,17 @@
-<script setup>
-import useReaderSettings from '../../../composables/useReaderSettings'
-const { textFont, fontsOptions, setTextFont } = useReaderSettings
-
-</script>
-
-<template>
-	<div id="font-family-menu" class="w-full grid grid-cols-4 gap-2 my-3">
-		<button v-for="font in fontsOptions" :key="font.name" @click.prevent="setTextFont(font.name)"
-			class="font-light text-lg text-primary tracking-wide border border-urucum w-full h-10 flex justify-center items-center"
-			:class="{
-				'bg-primary-extralight border-2 border-primary': textFont === font.name
-			}" :style="`font-family: ${font.name}`" :title="font.label ?? font.name">
-			Ff
-		</button>
-	</div>
-</template>
+<script setup>
+import useReaderSettings from '../../../composables/useReaderSettings'
+const { textFont, fontsOptions, setTextFont } = useReaderSettings
+
+</script>
+
+<template>
+	<div id="font-family-menu" class="w-full grid grid-cols-4 gap-2 my-3">
+		<button v-for="font in fontsOptions" :key="font.name" @click.prevent="setTextFont(font.name)"
+			class="font-light text-lg text-primary tracking-wide border border-urucum w-full h-10 flex justify-center items-center"
+			:class="{
+				'bg-primary-extralight border-2 border-primary': textFont === font.name
+			}" :style="`font-family: ${font.name}`" :title="font.label ?? font.name">
+			Ff
+		</button>
+	</div>
+</template>

package/src/components/HeaderSlot/OptionsButton/OptionsFontSize.vue

@@ -1,17 +1,17 @@
-<script setup>
-import useReaderSettings from '../../../composables/useReaderSettings'
-const { fontSize, setFontSize } = useReaderSettings
-
-</script>
-
-<template>
-	<button id="fontsize-add-button" @click.prevent="setFontSize(fontSize + 1)"
-		class="font-light text-base border border-urucum w-full h-10 flex justify-center items-center">
-		+ A
-	</button>
-
-	<button id="fontsize-subtr-button" @click.prevent="setFontSize(fontSize - 1)"
-		class="font-light text-base border border-urucum w-full h-10 flex justify-center items-center">
-		- A
-	</button>
-</template>
+<script setup>
+import useReaderSettings from '../../../composables/useReaderSettings'
+const { fontSize, setFontSize } = useReaderSettings
+
+</script>
+
+<template>
+	<button id="fontsize-add-button" @click.prevent="setFontSize(fontSize + 1)"
+		class="font-light text-base border border-urucum w-full h-10 flex justify-center items-center">
+		+ A
+	</button>
+
+	<button id="fontsize-subtr-button" @click.prevent="setFontSize(fontSize - 1)"
+		class="font-light text-base border border-urucum w-full h-10 flex justify-center items-center">
+		- A
+	</button>
+</template>

package/src/components/HeaderSlot/SummaryButton/SummaryButton.vue

@@ -1,70 +1,70 @@
-<script setup>
-import { ref } from 'vue'
-import { onClickOutside, onKeyStroke } from '@vueuse/core'
-
-import useReaderSettings from '../../../composables/useReaderSettings'
-
-import IconHome from '../../icons/Home.vue'
-import IconClose from '../../icons/Close.vue'
-import IconSummary from '../../icons/Summary.vue'
-import SummaryDropdown from './SummaryDropdown.vue'
-
-const show = ref(false)
-const button = ref(null)
-
-const { homeUrl } = useReaderSettings
-
-const toggleSummary = () => show.value = !show.value
-const hide = () => {
-	if (!useReaderSettings.blocked.value) {
-		show.value = false
-	}
-}
-
-onClickOutside(button, () => hide())
-onKeyStroke('Escape', () => hide())
-</script>
-
-<template>
-	<div id="summary-menu" ref="button" class="relative">
-		<div class="flex">
-			<a v-if="homeUrl"
-				:href="homeUrl" title="Homepage" id="home-button"
-				class="hidden md:flex items-center border p-3 shadow mr-3
-					border-white text-white"
-			>
-				<IconHome class="w-6 h-6"/>
-			</a>
-
-			<div class="position-relative">
-				<button
-					@click.prevent="toggleSummary()"
-					class="border p-3 shadow flex items-center border-white text-white"
-					id="summary-button" aria-haspopup="true" :aria-expanded="show"
-				>
-					<IconSummary v-if="!show" />
-					<IconClose v-else class="w-6 h-6" />
-
-					<span class="block ml-3">
-						Sumário
-					</span>
-				</button>
-
-				<transition enter-active-class="transition ease-out duration-100 transform" enter-class="opacity-0 scale-95"
-					enter-to-class="opacity-100 scale-100" leave-active-class="transition ease-in duration-75 transform"
-					leave-class="opacity-100 scale-100" leave-to-class="opacity-0 scale-95"
-				>
-					<SummaryDropdown v-if="show">
-						<template #summaryTop>
-							<slot name="summaryTop"/>
-						</template>
-
-						<template #summaryBottom>
-							<slot name="summaryBottom"/>
-						</template>
-					</SummaryDropdown>
-				</transition>
-			</div>
-		</div>
-	</div>
-</template>
+<script setup>
+import { ref } from 'vue'
+import { onClickOutside, onKeyStroke } from '@vueuse/core'
+
+import useReaderSettings from '../../../composables/useReaderSettings'
+
+import IconHome from '../../icons/Home.vue'
+import IconClose from '../../icons/Close.vue'
+import IconSummary from '../../icons/Summary.vue'
+import SummaryDropdown from './SummaryDropdown.vue'
+
+const show = ref(false)
+const button = ref(null)
+
+const { homeUrl } = useReaderSettings
+
+const toggleSummary = () => show.value = !show.value
+const hide = () => {
+	if (!useReaderSettings.blocked.value) {
+		show.value = false
+	}
+}
+
+onClickOutside(button, () => hide())
+onKeyStroke('Escape', () => hide())
+</script>
+
+<template>
+	<div id="summary-menu" ref="button" class="relative">
+		<div class="flex">
+			<a v-if="homeUrl"
+				:href="homeUrl" title="Homepage" id="home-button"
+				class="hidden md:flex items-center border p-3 shadow mr-3
+					border-white text-white"
+			>
+				<IconHome class="w-6 h-6"/>
+			</a>
+
+			<div class="position-relative">
+				<button
+					@click.prevent="toggleSummary()"
+					class="border p-3 shadow flex items-center border-white text-white"
+					id="summary-button" aria-haspopup="true" :aria-expanded="show"
+				>
+					<IconSummary v-if="!show" />
+					<IconClose v-else class="w-6 h-6" />
+
+					<span class="block ml-3">
+						Sumário
+					</span>
+				</button>
+
+				<transition enter-active-class="transition ease-out duration-100 transform" enter-class="opacity-0 scale-95"
+					enter-to-class="opacity-100 scale-100" leave-active-class="transition ease-in duration-75 transform"
+					leave-class="opacity-100 scale-100" leave-to-class="opacity-0 scale-95"
+				>
+					<SummaryDropdown v-if="show">
+						<template #summaryTop>
+							<slot name="summaryTop"/>
+						</template>
+
+						<template #summaryBottom>
+							<slot name="summaryBottom"/>
+						</template>
+					</SummaryDropdown>
+				</transition>
+			</div>
+		</div>
+	</div>
+</template>

package/src/components/HeaderSlot/SummaryButton/SummaryDropdown.vue

@@ -11,17 +11,17 @@ async function getChapter(item) {
 </script>
 
 <template>
-	<div class="absolute top-14 py-4 px-3 shadow-lg w-60 md:w-104
-			text-areia z-10 bg-white" :role="Sumário" aria-orientation="vertical"
-		aria-labelledby="summary-menu">
+	<div id="summary-menu-dropdown" class="absolute top-14 py-4 px-3 shadow-lg w-60 md:w-104
+			text-areia z-10 bg-white" :role="Sumário" aria-orientation="vertical" aria-labelledby="summary-menu">
 		<nav>
 			<slot name="summaryTop" />
 
-			<component v-for="item in summary" :is="item.link ? 'a' : 'button'" :key="item.link"
-				:href="item.link" :title="`Navegar para capítulo ${item.title}`"
+			<component v-for="item in summary" :is="item.link ? 'a' : 'button'" :key="item.link" :href="item.link"
+				:title="`Navegar para capítulo ${item.title}`"
 				class="w-full text-left block text-black py-2 px-3 hover:bg-gray-100 rounded mb-2"
 				@click="item.file ? getChapter(item) : null">
-				{{ item.title }}
+				<span class="summary-menu-dropdown-item-title">{{ item.title }}</span>
+				<span v-if="item.author" class="summary-menu-dropdown-item-author">{{ item.author }}</span>
 			</component>
 
 			<slot name="summaryBottom" />

package/src/components/ReaderWrapper.vue

@@ -1,37 +1,37 @@
-<script setup>
-import { ref } from 'vue'
-import { usePointerSwipe, useWindowSize } from '@vueuse/core'
-
-import usePagination from '../composables/usePagination'
-import useReaderSettings from '../composables/useReaderSettings'
-
-const { columns } = useReaderSettings
-const { currentPage } = usePagination
-
-const el = ref(null)
-
-const { width } = useWindowSize()
-const { distanceX } = usePointerSwipe(el, {
-	onSwipeEnd() {
-		if (width.value < 600) {
-			if (distanceX.value > 100) {
-				usePagination.next()
-			}
-			if (distanceX.value < -100) {
-				usePagination.prev()
-			}
-		}
-	}
-})
-
-</script>
-
-<template>
-	<div  ref="el" class="columnsArea" :style="`margin-left: -${100 * (currentPage - 1)}%`">
-		<div class="[ typeArea ] h-full relative
-			transition-opacity duration-100 opacity-100 px-2 md:px-24
-		">
-			<slot></slot>
-		</div>
-	</div>
-</template>
+<script setup>
+import { ref } from 'vue'
+import { usePointerSwipe, useWindowSize } from '@vueuse/core'
+
+import usePagination from '../composables/usePagination'
+import useReaderSettings from '../composables/useReaderSettings'
+
+const { columns } = useReaderSettings
+const { currentPage } = usePagination
+
+const el = ref(null)
+
+const { width } = useWindowSize()
+const { distanceX } = usePointerSwipe(el, {
+	onSwipeEnd() {
+		if (width.value < 600) {
+			if (distanceX.value > 100) {
+				usePagination.next()
+			}
+			if (distanceX.value < -100) {
+				usePagination.prev()
+			}
+		}
+	}
+})
+
+</script>
+
+<template>
+	<div  ref="el" class="columnsArea" :style="`margin-left: -${100 * (currentPage - 1)}%`">
+		<div class="[ typeArea ] h-full relative
+			transition-opacity duration-100 opacity-100 px-2 md:px-24
+		">
+			<slot></slot>
+		</div>
+	</div>
+</template>

package/src/components/ReferencePopup.vue

@@ -1,36 +1,36 @@
-<script setup>
-import { onKeyStroke } from '@vueuse/core'
-
-import useReaderSettings from '../composables/useReaderSettings'
-import useReferences from '../composables/useReferences'
-
-const { reference, setHighlightedReference } = useReferences
-
-function closeRef() {
-	setHighlightedReference(null)
-}
-
-onKeyStroke('Escape', () => {
-	if (!useReaderSettings.blocked.value) {
-		setHighlightedReference(null)
-	}
-})
-
-</script>
-
-<template>
-	<transition enter-active-class="transition ease-out duration-200" enter-from-class="transform opacity-0 scale-95"
-		enter-to-class="transform opacity-100 scale-100" leave-active-class="transition ease-in duration-200"
-		leave-from-class="transform opacity-100 scale-100" leave-to-class="transform opacity-0 scale-95">
-		<div v-if="reference" tabindex="0" class="[ reference-popup ] bg-gray-800 text-white fixed z-40 bottom-0 md:bottom-14 right-0 md:right-3
-				rounded flex justify-between
-				p-4 shadow w-full md:w-2/5
-			">
-			<p class="w-4/5" v-html="reference.ref"></p>
-
-			<div class="mt-3 flex self-end">
-				<button @click.prevent="closeRef()" class="button button-negative">OK</button>
-			</div>
-		</div>
-	</transition>
-</template>
+<script setup>
+import { onKeyStroke } from '@vueuse/core'
+
+import useReaderSettings from '../composables/useReaderSettings'
+import useReferences from '../composables/useReferences'
+
+const { reference, setHighlightedReference } = useReferences
+
+function closeRef() {
+	setHighlightedReference(null)
+}
+
+onKeyStroke('Escape', () => {
+	if (!useReaderSettings.blocked.value) {
+		setHighlightedReference(null)
+	}
+})
+
+</script>
+
+<template>
+	<transition enter-active-class="transition ease-out duration-200" enter-from-class="transform opacity-0 scale-95"
+		enter-to-class="transform opacity-100 scale-100" leave-active-class="transition ease-in duration-200"
+		leave-from-class="transform opacity-100 scale-100" leave-to-class="transform opacity-0 scale-95">
+		<div v-if="reference" tabindex="0" class="[ reference-popup ] bg-gray-800 text-white fixed z-40 bottom-0 md:bottom-14 right-0 md:right-3
+				rounded flex justify-between
+				p-4 shadow w-full md:w-2/5
+			">
+			<p class="w-4/5" v-html="reference.ref"></p>
+
+			<div class="mt-3 flex self-end">
+				<button @click.prevent="closeRef()" class="button button-negative">OK</button>
+			</div>
+		</div>
+	</transition>
+</template>

package/src/components/icons/Close.vue

@@ -1,6 +1,6 @@
-<script setup></script>
-<template>
-  	<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
-	</svg>
-</template>
+<script setup></script>
+<template>
+  	<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+	</svg>
+</template>

package/src/components/icons/DoubleColumn.vue

@@ -1,15 +1,15 @@
-<template>
-	<svg viewBox="0 0 653 441.2" fill="currentColor">
-		<rect x="73.2" y="143.7" width="195.2" height="20"></rect>
-		<rect x="73.2" y="82.7" width="195.2" height="20"></rect>
-		<rect x="73.2" y="203.7" width="195.2" height="20"></rect>
-		<rect x="73.2" y="263.7" width="195.2" height="20"></rect>
-		<rect x="73.2" y="319" width="195.2" height="20"></rect>
-		<rect x="384.7" y="143.7" width="195.2" height="20"></rect>
-		<rect x="384.7" y="82.7" width="195.2" height="20"></rect>
-		<rect x="384.7" y="203.7" width="195.2" height="20"></rect>
-		<rect x="384.7" y="263.7" width="195.2" height="20"></rect>
-		<rect x="384.7" y="319" width="195.2" height="20"></rect>
-		<path d="M0-0.6v7.5v7.5v411.8v14.4v0.6h653v-5v-10V14.4V2.5v-3.1H0z M638,426.2H15V14.4h623V426.2z"></path>
-	</svg>
-</template>
+<template>
+	<svg viewBox="0 0 653 441.2" fill="currentColor">
+		<rect x="73.2" y="143.7" width="195.2" height="20"></rect>
+		<rect x="73.2" y="82.7" width="195.2" height="20"></rect>
+		<rect x="73.2" y="203.7" width="195.2" height="20"></rect>
+		<rect x="73.2" y="263.7" width="195.2" height="20"></rect>
+		<rect x="73.2" y="319" width="195.2" height="20"></rect>
+		<rect x="384.7" y="143.7" width="195.2" height="20"></rect>
+		<rect x="384.7" y="82.7" width="195.2" height="20"></rect>
+		<rect x="384.7" y="203.7" width="195.2" height="20"></rect>
+		<rect x="384.7" y="263.7" width="195.2" height="20"></rect>
+		<rect x="384.7" y="319" width="195.2" height="20"></rect>
+		<path d="M0-0.6v7.5v7.5v411.8v14.4v0.6h653v-5v-10V14.4V2.5v-3.1H0z M638,426.2H15V14.4h623V426.2z"></path>
+	</svg>
+</template>