paginar 0.3.4 → 0.3.6

package/src/assets/main.css

@@ -1,392 +0,0 @@
-.border-primary { border-color: var(--theme-primary, #690000); }
-.text-primary { color: var(--theme-primary, #690000); }
-.bg-primary { background-color: var(--theme-primary, #690000); }
-
-.border-primary-extralight { border-color: var(--theme-primary-extralight, #f3f4f6); }
-.text-primary-extralight { color: var(--theme-primary-extralight, #f3f4f6); }
-.bg-primary-extralight { background-color: var(--theme-primary-extralight, #f3f4f6); }
-
-.border-secondary { border-color: var(--theme-secondary, #ffa03c); }
-.text-secondary { color: var(--theme-secondary, #ffa03c); }
-.bg-secondary { background-color: var(--theme-secondary, #ffa03c); }
-
-.rootWrapper {
-	max-height: 100%;
-    height: 100%;
-}
-
-main#rootComponent {
-	height: 100%;
-	max-height: 100%;
-
-	&.light {
-		background-color: var(--bg-light-mode, #fff7e0)
-	}
-
-	&.dark {
-		background-color: var(--bg-dark-mode, #2d2d2d);
-
-		#content-area {
-			color: #fff
-		}
-	}
-}
-
-header.wrapper {
-	width: 200px;
-	margin: 0 auto;
-}
-
-#engine {
-	height: calc(100% - 8.4rem);
-	position: relative;
-    right: 0;
-    left: 0;
-    bottom: 0;
-    width: 100%;
-}
-
-.rootWrapper.safari {
-	max-height: initial;
-	height: initial;
-}
-
-.rootWrapper.safari #engine {
-	height: auto !important;
-}
-
-#reader-component {
-	width: calc(100% - 5rem);
-}
-
-.typeArea {
-	width: 100%;
-}
-
-.engineWrapper {
-	height: 100%;
-    display: flex;
-    justify-content: space-between;
-	position: relative;
-    right: 0;
-    left: 0;
-    bottom: 0;
-    width: 100%;
-}
-
-.rootWrapper:not(.safari) .columns-double .columnsArea {
-	-moz-column-count: 2;
-    column-count: 2;
-    grid-column-gap: 0;
-    -moz-column-gap: 0;
-    column-gap: 0;
-    height: 100%;
-    padding: 0;
-    width: 100%;
-
-	@media only screen and (max-width: 1020px) {
-		-moz-column-count: 1;
-    	column-count: 1;
-	}
-}
-
-.rootWrapper:not(.safari) .columns-single .columnsArea {
-	column-count: 1;
-	column-gap: 0;
-	height: 100%;
-    padding: 0;
-    width: 100%;
-
-	#content-area {
-		max-width: 37em;
-		margin: 0 auto;
-	}
-}
-
-
-.nav-prev {
-	@apply left-0;
-}
-
-.nav-next {
-	@apply right-0;
-}
-
-.viewer-nav {
-	height: 100%;
-
-	@apply relative z-10 inset-y-0 transition duration-500 ease-in-out self-center w-10 cursor-pointer flex-shrink-0;
-
-
-	&:focus,
-	&:active {
-		border: none !important;
-		box-shadow: none !important;
-		outline-color: transparent !important;
-	}
-}
-
-#content-area *::selection {
-	color: var(--theme-primary-extralight, #690000);
-	background: var(--theme-secondary, #ffa03c);
-}
-
-.viewer-nav-icon {
-	@apply opacity-0 md:opacity-80;
-}
-
-.columnsArea {
-	@media only screen and (max-width: 600px) {
-		transition: margin 100ms;
-	}
-}
-
-#asidebar {
-	background: var(--sidebar-backgorund, #690000);
-	color: var(--sidebar-text, #f3f4f6);
-}
-
-/* slider */
-
-.rootWrapper.safari .slider-target,
-.rootWrapper.safari .slider-target *{
-	display: none !important;
-}
-
-.slider-target,.slider-target *{
-    -webkit-touch-callout:none;
-    -webkit-tap-highlight-color:rgba(0,0,0,0);
-    box-sizing:border-box;
-    touch-action:none;
-    -webkit-user-select:none;
-    -moz-user-select:none;
-    user-select:none
-}
-.slider-target{
-    position:relative
-}
-.slider-base,.slider-connects{
-    height:100%;
-    position:relative;
-    width:100%;
-    z-index:1
-}
-.slider-connects{
-    overflow:hidden;
-    z-index:0
-}
-.slider-connect,.slider-origin{
-    height:100%;
-    position:absolute;
-    right:0;
-    top:0;
-    -ms-transform-origin:0 0;
-    -webkit-transform-origin:0 0;
-    transform-origin:0 0;
-    -webkit-transform-style:preserve-3d;
-    transform-style:flat;
-    width:100%;
-    will-change:transform;
-    z-index:1
-}
-.slider-txt-dir-rtl.slider-horizontal .slider-origin{
-    left:0;
-    right:auto
-}
-.slider-vertical .slider-origin{
-    top:-100%;
-    width:0
-}
-.slider-horizontal .slider-origin{
-    height:0
-}
-.slider-handle{
-    -webkit-backface-visibility:hidden;
-    backface-visibility:hidden;
-    position:absolute
-}
-.slider-touch-area{
-    height:100%;
-    width:100%
-}
-.slider-state-tap .slider-connect,.slider-state-tap .slider-origin{
-    transition:transform .3s
-}
-.slider-state-drag *{
-    cursor:inherit!important
-}
-.slider-tooltip-drag .slider-tooltip,.slider-tooltip-focus .slider-tooltip{
-    display:none!important
-}
-.slider-tooltip-drag .slider-active .slider-tooltip,.slider-tooltip-drag.slider-state-drag .slider-tooltip:not(.slider-tooltip-hidden),.slider-tooltip-focus.slider-focused .slider-tooltip:not(.slider-tooltip-hidden){
-    display:block!important
-}
-.slider-horizontal{
-    height:var(--slider-height,6px)
-}
-.slider-horizontal .slider-handle{
-    height:var(--slider-handle-height,16px);
-    right:calc(var(--slider-handle-width, 16px)/2*-1);
-    top:calc((var(--slider-handle-height, 16px) - var(--slider-height, 6px))/2*-1 + -1px);
-    width:var(--slider-handle-width,16px)
-}
-.slider-vertical{
-    height:var(--slider-vertical-height,300px);
-    width:var(--slider-height,6px)
-}
-.slider-vertical .slider-handle{
-    bottom:calc(var(--slider-handle-width, 16px)/2*-1);
-    height:var(--slider-handle-width,16px);
-    right:calc((var(--slider-handle-height, 16px) - var(--slider-height, 6px))/2*-1 + -1px);
-    width:var(--slider-handle-height,16px)
-}
-.slider-txt-dir-rtl.slider-horizontal .slider-handle{
-    left:calc(var(--slider-handle-width, 16px)/2*-1);
-    right:auto
-}
-.slider-base{
-    background-color:var(--slider-bg,#d1d5db)
-}
-.slider-base,.slider-connects{
-    border-radius:var(--slider-radius,9999px)
-}
-.slider-connect{
-    background:var(--theme-secondary, #690000);
-    cursor:pointer
-}
-.slider-draggable{
-    cursor:ew-resize
-}
-.slider-vertical .slider-draggable{
-    cursor:ns-resize
-}
-.slider-handle{
-    background:var(--slider-handle-bg,#fff);
-    border:var(--slider-handle-border,0);
-    border-radius:var(--slider-handle-radius,9999px);
-    box-shadow:var(--slider-handle-shadow,.5px .5px 2px 1px rgba(0,0,0,.32));
-    cursor:-webkit-grab;
-    cursor:grab;
-    height:var(--slider-handle-height,16px);
-    width:var(--slider-handle-width,16px)
-}
-.slider-handle:focus{
-    box-shadow:0 0 0 var(--slider-handle-ring-width,3px) var(--slider-handle-ring-color,rgba(16,185,129,.188)),var(--slider-handle-shadow,.5px .5px 2px 1px rgba(0,0,0,.32));
-    outline:none
-}
-.slider-active{
-    box-shadow:var(--slider-handle-shadow-active,.5px .5px 2px 1px rgba(0,0,0,.42));
-    cursor:-webkit-grabbing;
-    cursor:grabbing
-}
-[disabled] .slider-connect{
-    background:var(--slider-connect-bg-disabled,#9ca3af)
-}
-[disabled] .slider-handle,[disabled].slider-handle,[disabled].slider-target{
-    cursor:not-allowed
-}
-[disabled] .slider-tooltip{
-    background:var(--theme-secondary, #690000);
-    border-color:var(--theme-secondary, #690000);
-	opacity: 0.5;
-}
-.slider-tooltip{
-    background:var(--theme-secondary, #690000);
-    border:1px solid var(--theme-secondary, #690000);
-    border-radius:var(--slider-tooltip-radius,5px);
-    color:var(--slider-tooltip-color,#fff);
-    display:block;
-    font-size:var(--slider-tooltip-font-size,.875rem);
-    font-weight:var(--slider-tooltip-font-weight,600);
-    line-height:var(--slider-tooltip-line-height,1.25rem);
-    min-width:var(--slider-tooltip-min-width,20px);
-    padding:var(--slider-tooltip-py,2px) var(--slider-tooltip-px,6px);
-    position:absolute;
-    text-align:center;
-    white-space:nowrap
-}
-.slider-horizontal .slider-tooltip-top{
-    bottom:calc(var(--slider-handle-height, 16px) + var(--slider-tooltip-arrow-size, 5px) + var(--slider-tooltip-distance, 3px));
-    left:50%;
-    transform:translate(-50%)
-}
-.slider-horizontal .slider-tooltip-top:before{
-    border:var(--slider-tooltip-arrow-size,5px) solid transparent;
-    border-top-color:inherit;
-    bottom:calc(var(--slider-tooltip-arrow-size, 5px)*-2);
-    content:"";
-    height:0;
-    left:50%;
-    position:absolute;
-    transform:translate(-50%);
-    width:0
-}
-.slider-horizontal .slider-tooltip-bottom{
-    left:50%;
-    top:calc(var(--slider-handle-height, 16px) + var(--slider-tooltip-arrow-size, 5px) + var(--slider-tooltip-distance, 3px));
-    transform:translate(-50%)
-}
-.slider-horizontal .slider-tooltip-bottom:before{
-    border:var(--slider-tooltip-arrow-size,5px) solid transparent;
-    border-bottom-color:inherit;
-    content:"";
-    height:0;
-    left:50%;
-    position:absolute;
-    top:calc(var(--slider-tooltip-arrow-size, 5px)*-2);
-    transform:translate(-50%);
-    width:0
-}
-.slider-vertical .slider-tooltip-left{
-    right:calc(var(--slider-handle-height, 16px) + var(--slider-tooltip-arrow-size, 5px) + var(--slider-tooltip-distance, 3px));
-    top:50%;
-    transform:translateY(-50%)
-}
-.slider-vertical .slider-tooltip-left:before{
-    border:var(--slider-tooltip-arrow-size,5px) solid transparent;
-    border-left-color:inherit;
-    content:"";
-    height:0;
-    position:absolute;
-    right:calc(var(--slider-tooltip-arrow-size, 5px)*-2);
-    top:50%;
-    transform:translateY(-50%);
-    width:0
-}
-.slider-vertical .slider-tooltip-right{
-    left:calc(var(--slider-handle-height, 16px) + var(--slider-tooltip-arrow-size, 5px) + var(--slider-tooltip-distance, 3px));
-    top:50%;
-    transform:translateY(-50%)
-}
-.slider-vertical .slider-tooltip-right:before{
-    border:var(--slider-tooltip-arrow-size,5px) solid transparent;
-    border-right-color:inherit;
-    content:"";
-    height:0;
-    left:calc(var(--slider-tooltip-arrow-size, 5px)*-2);
-    position:absolute;
-    top:50%;
-    transform:translateY(-50%);
-    width:0
-}
-.slider-horizontal .slider-origin>.slider-tooltip{
-    left:auto;
-    transform:translate(50%)
-}
-.slider-horizontal .slider-origin>.slider-tooltip-top{
-    bottom:calc(var(--slider-tooltip-arrow-size, 5px) + (var(--slider-handle-height, 16px) - var(--slider-height, 6px))/2 + var(--slider-tooltip-distance, 3px) + 1px)
-}
-.slider-horizontal .slider-origin>.slider-tooltip-bottom{
-    top:calc(var(--slider-tooltip-arrow-size, 5px) + (var(--slider-handle-height, 16px) - var(--slider-height, 6px))/2 + var(--slider-tooltip-distance, 3px) + var(--slider-height, 6px) - 1px)
-}
-.slider-vertical .slider-origin>.slider-tooltip{
-    top:auto;
-    transform:translateY(calc((var(--slider-tooltip-line-height, 1.25rem) - var(--slider-tooltip-py, 2px))*-1 + 1px))
-}
-.slider-vertical .slider-origin>.slider-tooltip-left{
-    right:calc(var(--slider-tooltip-arrow-size, 5px) + var(--slider-height, 6px) + (var(--slider-handle-height, 16px) - var(--slider-height, 6px))/2 + var(--slider-tooltip-distance, 3px) - 1px)
-}
-.slider-vertical .slider-origin>.slider-tooltip-right{
-    left:calc(var(--slider-tooltip-arrow-size, 5px) + var(--slider-height, 6px) + (var(--slider-handle-height, 16px) - var(--slider-height, 6px))/2 + var(--slider-tooltip-distance, 3px) - var(--slider-height, 6px) + 1px)
-}
-

package/src/components/BookContent.vue

@@ -1,23 +0,0 @@
-<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/EngineWrapper.vue

@@ -1,15 +0,0 @@
-<script setup>
-import NavigationButton from './NavigationButton.vue'
-import usePagination from '../composables/usePagination'
-const { next, prev } = usePagination
-</script>
-
-<template>
-	<div id="engine" class="pt-10 transition-colors">
-		<div class="engineWrapper overflow-hidden">
-			<NavigationButton target="prev" @clicked="prev()" />
-			<slot></slot>
-			<NavigationButton target="next" @clicked="next()" />
-		</div>
-	</div>
-</template>

package/src/components/FooterSlot.vue

@@ -1,32 +0,0 @@
-<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 +0,0 @@
-<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 +0,0 @@
-<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 +0,0 @@
-<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>