paginar 0.3.0 → 0.3.2

package/src/components/BookContent.vue

@@ -1,23 +1,23 @@
-<script setup>
-import { defineProps, onMounted, ref } from 'vue'
-
-import useTextContent from '../composables/useTextContent'
-const { content, initContent } = useTextContent
-
-const props = defineProps({
-	bookContent: String
-})
-
-const contentWrapper = ref(null)
-
-onMounted(() => {
-	initContent(props.bookContent, contentWrapper)
-})
-</script>
-
-<template>
-	<div ref="contentWrapper">
-		<div v-if="content" v-html="content"></div>
-		<slot v-else name="content"></slot>
-	</div>
-</template>
+<script setup>
+import { defineProps, onMounted, ref } from 'vue'
+
+import useTextContent from '../composables/useTextContent'
+const { content, initContent } = useTextContent
+
+const props = defineProps({
+	bookContent: String
+})
+
+const contentWrapper = ref(null)
+
+onMounted(() => {
+	initContent(props.bookContent, contentWrapper)
+})
+</script>
+
+<template>
+	<div ref="contentWrapper">
+		<div v-if="content" v-html="content"></div>
+		<slot v-else name="content"></slot>
+	</div>
+</template>

package/src/components/FooterSlot.vue

@@ -1,32 +1,32 @@
-<script setup>
-import { ref } from 'vue'
-import Slider from '@vueform/slider'
-
-import usePagination from '../composables/usePagination';
-const { totalPages, currentPage, set } = usePagination
-
-function format() {
-	return `${currentPage.value} de ${totalPages.value}`
-}
-
-</script>
-
-<template>
-	<div class="py-2 px-10 text-gray-700 dark:text-white">
-		<slot name="footer">
-			<p>&nbsp;</p>
-		</slot>
-
-		<Slider
-			:modelValue="currentPage"
-			@update:modelValue="set(Math.round($event))"
-			:min="1"
-			:max="totalPages"
-			:step="-1"
-			showTooltip="drag"
-			:format="format"
-			:lazy="false"
-			class="w-full"
-		/>
-	</div>
-</template>
+<script setup>
+import { ref } from 'vue'
+import Slider from '@vueform/slider'
+
+import usePagination from '../composables/usePagination';
+const { totalPages, currentPage, set } = usePagination
+
+function format() {
+	return `${currentPage.value} de ${totalPages.value}`
+}
+
+</script>
+
+<template>
+	<div class="py-2 px-10 text-gray-700 dark:text-white">
+		<slot name="footer">
+			<p>&nbsp;</p>
+		</slot>
+
+		<Slider
+			:modelValue="currentPage"
+			@update:modelValue="set(Math.round($event))"
+			:min="1"
+			:max="totalPages"
+			:step="-1"
+			showTooltip="drag"
+			:format="format"
+			:lazy="false"
+			class="w-full"
+		/>
+	</div>
+</template>

package/src/components/FootnotesAside.vue

@@ -1,123 +1,123 @@
-<script setup>
-import { computed, onMounted, watch, ref } from 'vue'
-import { onKeyStroke } from '@vueuse/core'
-
-import useFootnotes from '../composables/useFootnotes'
-import useReaderSettings from '../composables/useReaderSettings'
-
-import IconClose from '../components/icons/Close.vue'
-import IconNotes from '../components/icons/Notes.vue'
-
-const show = computed(() => useFootnotes.footnote.value)
-const footnote = computed(() => useFootnotes.footnote.value)
-const showFootnotes = computed(() => useFootnotes.showFootnotes.value)
-const footnotes = computed(() => useFootnotes.footnotes.value)
-
-const oldBlockedValue = ref(null)
-const footnoteList = ref(null)
-
-function hideAside() {
-	useFootnotes.setHighlightedFootnote(null)
-	useFootnotes.setShowFootnotes(false)
-}
-
-onKeyStroke('Escape', () => {
-	if (footnote.value || showFootnotes.value) {
-		hideAside()
-	}
-})
-
-watch(
-	[footnote, showFootnotes],
-	() => {
-		if (footnote.value || showFootnotes.value) {
-			if (useReaderSettings.blocked.value === false) {
-				oldBlockedValue.value = useReaderSettings.blocked.value
-			}
-			useReaderSettings.setBlocked(true)
-
-		} else {
-			if (oldBlockedValue.value === false) {
-				useReaderSettings.setBlocked(oldBlockedValue.value)
-			}
-			oldBlockedValue.value = null
-		}
-
-		if (footnote.value) {
-			setTimeout(() => {
-				const element = footnoteList.value.querySelector(`#${footnote.value.id}`)
-				element.scrollIntoView()
-				element.focus()
-			}, 50)
-		}
-	}
-)
-
-</script>
-
-<template>
-	<transition name="width">
-		<div v-if="show || showFootnotes" id="asidebar"
-			class="absolute top-0 right-0 w-96 md:w-[40em] flex-shrink-0 h-screen overflow-auto overflow-x-hidden z-20 shadow-2xl"
-		>
-			<button @click.prevent="hideAside()" class="fixed top-4 right-8 z-20">
-				<IconClose class="w-6 h-6 text-white" />
-			</button>
-
-			<div class="w-full p-4">
-				<header class="text-areia py-4 pl-4">
-					<div class="flex items-center mb-6">
-						<IconNotes class="w-8 h-8" />
-						<span class="ml-4">
-
-							Notas de rodapé
-							<span class="ml-10">
-								{{ footnotes.length }}
-							</span>
-						</span>
-					</div>
-				</header>
-
-				<section>
-					<ul ref="footnoteList">
-						<li v-for="(footnoteItem, index) in footnotes"
-							:key="footnoteItem.id"
-							:id="footnoteItem.id"
-							v-html="`<span class='footnote-index'>${index + 1}.</span> ${footnoteItem.text}`"
-							class="text-left border-b border-b-white/25 last:border-transparent
-								p-10 relative
-							"
-							:class="footnote && footnote.id !== footnoteItem.id
-								? 'opacity-50'
-								: 'opacity-100'
-							"></li>
-					</ul>
-				</section>
-			</div>
-		</div>
-	</transition>
-</template>
-
-
-
-<style scoped>
-.width-enter-active,
-.width-leave-active {
-	transition: width .5s;
-}
-
-.width-enter-active>* {
-	transition-property: opacity;
-	transition-duration: .2s;
-	transition-delay: .3s;
-}
-
-.width-leave-active>* {
-	transition: opacity .25s;
-}
-
-.width-enter,
-.width-leave-to {
-	width: 0;
-}
-</style>
+<script setup>
+import { computed, onMounted, watch, ref } from 'vue'
+import { onKeyStroke } from '@vueuse/core'
+
+import useFootnotes from '../composables/useFootnotes'
+import useReaderSettings from '../composables/useReaderSettings'
+
+import IconClose from '../components/icons/Close.vue'
+import IconNotes from '../components/icons/Notes.vue'
+
+const show = computed(() => useFootnotes.footnote.value)
+const footnote = computed(() => useFootnotes.footnote.value)
+const showFootnotes = computed(() => useFootnotes.showFootnotes.value)
+const footnotes = computed(() => useFootnotes.footnotes.value)
+
+const oldBlockedValue = ref(null)
+const footnoteList = ref(null)
+
+function hideAside() {
+	useFootnotes.setHighlightedFootnote(null)
+	useFootnotes.setShowFootnotes(false)
+}
+
+onKeyStroke('Escape', () => {
+	if (footnote.value || showFootnotes.value) {
+		hideAside()
+	}
+})
+
+watch(
+	[footnote, showFootnotes],
+	() => {
+		if (footnote.value || showFootnotes.value) {
+			if (useReaderSettings.blocked.value === false) {
+				oldBlockedValue.value = useReaderSettings.blocked.value
+			}
+			useReaderSettings.setBlocked(true)
+
+		} else {
+			if (oldBlockedValue.value === false) {
+				useReaderSettings.setBlocked(oldBlockedValue.value)
+			}
+			oldBlockedValue.value = null
+		}
+
+		if (footnote.value) {
+			setTimeout(() => {
+				const element = footnoteList.value.querySelector(`#${footnote.value.id}`)
+				element.scrollIntoView()
+				element.focus()
+			}, 50)
+		}
+	}
+)
+
+</script>
+
+<template>
+	<transition name="width">
+		<div v-if="show || showFootnotes" id="asidebar"
+			class="absolute top-0 right-0 w-96 md:w-[40em] flex-shrink-0 h-screen overflow-auto overflow-x-hidden z-20 shadow-2xl"
+		>
+			<button @click.prevent="hideAside()" class="fixed top-4 right-8 z-20">
+				<IconClose class="w-6 h-6 text-white" />
+			</button>
+
+			<div class="w-full p-4">
+				<header class="text-areia py-4 pl-4">
+					<div class="flex items-center mb-6">
+						<IconNotes class="w-8 h-8" />
+						<span class="ml-4">
+
+							Notas de rodapé
+							<span class="ml-10">
+								{{ footnotes.length }}
+							</span>
+						</span>
+					</div>
+				</header>
+
+				<section>
+					<ul ref="footnoteList">
+						<li v-for="(footnoteItem, index) in footnotes"
+							:key="footnoteItem.id"
+							:id="footnoteItem.id"
+							v-html="`<span class='footnote-index'>${index + 1}.</span> ${footnoteItem.text}`"
+							class="text-left border-b border-b-white/25 last:border-transparent
+								p-10 relative
+							"
+							:class="footnote && footnote.id !== footnoteItem.id
+								? 'opacity-50'
+								: 'opacity-100'
+							"></li>
+					</ul>
+				</section>
+			</div>
+		</div>
+	</transition>
+</template>
+
+
+
+<style scoped>
+.width-enter-active,
+.width-leave-active {
+	transition: width .5s;
+}
+
+.width-enter-active>* {
+	transition-property: opacity;
+	transition-duration: .2s;
+	transition-delay: .3s;
+}
+
+.width-leave-active>* {
+	transition: opacity .25s;
+}
+
+.width-enter,
+.width-leave-to {
+	width: 0;
+}
+</style>

package/src/components/HeaderSlot/HeaderSlot.vue

@@ -1,30 +1,30 @@
-<script setup>
-import SummaryButton from './SummaryButton/SummaryButton.vue';
-import OptionsButton from './OptionsButton/OptionsButton.vue';
-</script>
-
-<template>
-	<header id="component-header" class="bg-primary flex justify-between items-center p-4">
-		<summary-button>
-			<template #summaryTop>
-				<slot name="summaryTop" />
-			</template>
-			<template #summaryBottom>
-				<slot name="summaryBottom" />
-			</template>
-		</summary-button>
-
-		<div id="header-titles">
-			<slot name="header" />
-		</div>
-
-		<options-button>
-			<template #optionsTop>
-				<slot name="optionsTop" />
-			</template>
-			<template #optionsBottom>
-				<slot name="optionsBottom" />
-			</template>
-		</options-button>
-	</header>
-</template>
+<script setup>
+import SummaryButton from './SummaryButton/SummaryButton.vue';
+import OptionsButton from './OptionsButton/OptionsButton.vue';
+</script>
+
+<template>
+	<header id="component-header" class="bg-primary flex justify-between items-center p-4">
+		<summary-button>
+			<template #summaryTop>
+				<slot name="summaryTop" />
+			</template>
+			<template #summaryBottom>
+				<slot name="summaryBottom" />
+			</template>
+		</summary-button>
+
+		<div id="header-titles">
+			<slot name="header" />
+		</div>
+
+		<options-button>
+			<template #optionsTop>
+				<slot name="optionsTop" />
+			</template>
+			<template #optionsBottom>
+				<slot name="optionsBottom" />
+			</template>
+		</options-button>
+	</header>
+</template>

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

@@ -1,67 +1,67 @@
-<script setup>
-import { ref } from 'vue'
-import { onClickOutside, onKeyStroke, useFullscreen } from '@vueuse/core'
-
-import useReaderSettings from '../../../composables/useReaderSettings'
-
-import IconThreeDots from '../../icons/ThreeDots.vue'
-import IconClose from '../../icons/Close.vue'
-import IconExpand from '../../icons/Expand.vue'
-import OptionsDropdown from './OptionsDropdown.vue'
-
-const show = ref(false)
-const button = ref(null)
-
-const toggleSummary = () => show.value = !show.value
-const hide = () => {
-	if (!useReaderSettings.blocked.value) {
-		show.value = false
-	}
-}
-
-onClickOutside(button, () => hide())
-onKeyStroke('Escape', () => hide())
-
-const { toggle: toggleFullScreen } = useFullscreen()
-</script>
-
-<template>
-	<div id="options-menu" ref="button" class="relative">
-		<div class="flex">
-			<button @click.prevent="toggleSummary()"
-				class="border p-3 shadow flex items-center border-white text-white"
-				id="options-button" aria-haspopup="true" :aria-expanded="show"
-			>
-				<span class="block mr-3">
-					Opções
-				</span>
-
-				<IconClose v-if="show" class="w-6 h-6" />
-				<IconThreeDots v-else class="w-6 h-6" />
-			</button>
-
-			<button @click.prevent="toggleFullScreen()"
-				class="hidden md:flex items-center border p-3 shadow ml-3 border-white text-white"
-			>
-				<IconExpand class="w-6 h-6" />
-			</button>
-		</div>
-
-		<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"
-		>
-			<OptionsDropdown v-show="show">
-				<template #optionsTop>
-					<slot name="optionsTop"/>
-				</template>
-				<template #optionsBottom>
-					<slot name="optionsBottom"/>
-				</template>
-			</OptionsDropdown>
-		</transition>
-	</div>
-</template>
-
-<style>
-</style>
+<script setup>
+import { ref } from 'vue'
+import { onClickOutside, onKeyStroke, useFullscreen } from '@vueuse/core'
+
+import useReaderSettings from '../../../composables/useReaderSettings'
+
+import IconThreeDots from '../../icons/ThreeDots.vue'
+import IconClose from '../../icons/Close.vue'
+import IconExpand from '../../icons/Expand.vue'
+import OptionsDropdown from './OptionsDropdown.vue'
+
+const show = ref(false)
+const button = ref(null)
+
+const toggleSummary = () => show.value = !show.value
+const hide = () => {
+	if (!useReaderSettings.blocked.value) {
+		show.value = false
+	}
+}
+
+onClickOutside(button, () => hide())
+onKeyStroke('Escape', () => hide())
+
+const { toggle: toggleFullScreen } = useFullscreen()
+</script>
+
+<template>
+	<div id="options-menu" ref="button" class="relative">
+		<div class="flex">
+			<button @click.prevent="toggleSummary()"
+				class="border p-3 shadow flex items-center border-white text-white"
+				id="options-button" aria-haspopup="true" :aria-expanded="show"
+			>
+				<span class="block mr-3">
+					Opções
+				</span>
+
+				<IconClose v-if="show" class="w-6 h-6" />
+				<IconThreeDots v-else class="w-6 h-6" />
+			</button>
+
+			<button @click.prevent="toggleFullScreen()"
+				class="hidden md:flex items-center border p-3 shadow ml-3 border-white text-white"
+			>
+				<IconExpand class="w-6 h-6" />
+			</button>
+		</div>
+
+		<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"
+		>
+			<OptionsDropdown v-show="show">
+				<template #optionsTop>
+					<slot name="optionsTop"/>
+				</template>
+				<template #optionsBottom>
+					<slot name="optionsBottom"/>
+				</template>
+			</OptionsDropdown>
+		</transition>
+	</div>
+</template>
+
+<style>
+</style>

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

@@ -1,28 +1,28 @@
-<script setup>
-import IconSun from '../../icons/Sun.vue'
-import IconMoon from '../../icons/Moon.vue'
-
-import useReaderSettings from '../../../composables/useReaderSettings'
-const { mode, setMode } = useReaderSettings
-
-</script>
-
-<template>
-	<button id="lightmode-button" @click.prevent="setMode('light')"
-		title="Leitura diurna"
-		class="font-light text-base border w-full h-10 flex justify-center items-center"
-		:class="{
-			'bg-primary-extralight text-primary border-2 border-primary': mode === 'light'
-		}">
-		<IconSun class="w-5 h-5" />
-	</button>
-
-	<button id="darkmode-button" @click.prevent="setMode('dark')"
-		title="Leitura noturna"
-		class="font-light text-base border w-full h-10 flex justify-center items-center"
-		:class="{
-			'bg-primary-extralight text-primary border-2 border-primary':  mode === 'dark'
-		}">
-		<IconMoon class="w-5 h-5" />
-	</button>
-</template>
+<script setup>
+import IconSun from '../../icons/Sun.vue'
+import IconMoon from '../../icons/Moon.vue'
+
+import useReaderSettings from '../../../composables/useReaderSettings'
+const { mode, setMode } = useReaderSettings
+
+</script>
+
+<template>
+	<button id="lightmode-button" @click.prevent="setMode('light')"
+		title="Leitura diurna"
+		class="font-light text-base border w-full h-10 flex justify-center items-center"
+		:class="{
+			'bg-primary-extralight text-primary border-2 border-primary': mode === 'light'
+		}">
+		<IconSun class="w-5 h-5" />
+	</button>
+
+	<button id="darkmode-button" @click.prevent="setMode('dark')"
+		title="Leitura noturna"
+		class="font-light text-base border w-full h-10 flex justify-center items-center"
+		:class="{
+			'bg-primary-extralight text-primary border-2 border-primary':  mode === 'dark'
+		}">
+		<IconMoon class="w-5 h-5" />
+	</button>
+</template>