paginar 0.1.0 → 0.1.2

package/src/assets/main.css

@@ -1,22 +1,30 @@
-header.wrapper {
-	width: 200px;
-	margin: 0 auto;
+.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%;
 }
 
-#engine {
-	height: calc(100vh - 7.6rem);
-	position: relative;
-    right: 0;
-    left: 0;
-    bottom: 0;
-    width: 100%;
+main#rootComponent {
+	height: 100%;
+	max-height: 100%;
 
 	&.light {
-		background-color: #fff7e0
+		background-color: var(--bg-light-mode, #fff7e0)
 	}
 
 	&.dark {
-		background-color: #2d2d2d;
+		background-color: var(--bg-dark-mode, #2d2d2d);
 
 		#content-area {
 			color: #fff
@@ -24,6 +32,20 @@ header.wrapper {
 	}
 }
 
+header.wrapper {
+	width: 200px;
+	margin: 0 auto;
+}
+
+#engine {
+	height: calc(100% - 8.4rem);
+	position: relative;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+}
+
 #reader-component {
 	width: 100%;
 }
@@ -33,7 +55,7 @@ header.wrapper {
 }
 
 .engineWrapper {
-	height: calc(100% - 2rem);
+	height: 100%;
     display: flex;
     justify-content: space-between;
 	position: relative;
@@ -95,6 +117,250 @@ header.wrapper {
 	}
 }
 
+#content-area *::selection {
+	color: var(--theme-primary-extralight, #690000);
+	background: var(--theme-secondary, #ffa03c);
+}
+
 .viewer-nav-icon {
 	@apply opacity-0 md:opacity-80;
 }
+/* slider */
+
+.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

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

package/src/components/EngineWrapper.vue

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

package/src/components/FooterSlot.vue

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

package/src/components/HeaderSlot/{HeaderSlot.ce.vue → HeaderSlot.vue}

@@ -1,37 +1,30 @@
-<script setup>
-import SummaryButton from './SummaryButton/SummaryButton.ce.vue';
-import OptionsButton from './OptionsButton/OptionsButton.ce.vue';
-</script>
-
-<template>
-	<div class="bg-gray-800 flex justify-between items-center p-4">
-		<summary-button>
-			<template #summaryTop>
-				<slot name="summaryTop" />
-			</template>
-			<template #summaryBottom>
-				<slot name="summaryBottom" />
-			</template>
-		</summary-button>
-
-		<div>
-			<slot name="header" />
-		</div>
-
-		<options-button>
-			<template #optionsTop>
-				<slot name="optionsTop" />
-			</template>
-			<template #optionsBottom>
-				<slot name="optionsBottom" />
-			</template>
-		</options-button>
-	</div>
-</template>
-
-<style>
-.headerSlot {
-	text-align: center;
-	border: 1px dashed #000;
-}
-</style>
+<script setup>
+import SummaryButton from './SummaryButton/SummaryButton.vue';
+import OptionsButton from './OptionsButton/OptionsButton.vue';
+</script>
+
+<template>
+	<div 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>
+			<slot name="header" />
+		</div>
+
+		<options-button>
+			<template #optionsTop>
+				<slot name="optionsTop" />
+			</template>
+			<template #optionsBottom>
+				<slot name="optionsBottom" />
+			</template>
+		</options-button>
+	</div>
+</template>

package/src/components/HeaderSlot/OptionsButton/{OptionsButton.ce.vue → OptionsButton.vue}

@@ -22,11 +22,10 @@ const { toggle: toggleFullScreen } = useFullscreen()
 <template>
 	<div ref="button" class="relative">
 		<div class="flex">
-			<button @click.prevent="toggleSummary()" class="border p-3 shadow flex items-center" :class="{
-				'border-white text-white': invertBackground || show,
-				'border-gray-800 text-gray-800 dark:border-white dark:text-white': !invertBackground && !show,
-				'bg-terra': show
-			}" id="summary-menu" aria-haspopup="true" :aria-expanded="show">
+			<button @click.prevent="toggleSummary()"
+				class="border p-3 shadow flex items-center border-white text-white"
+				id="summary-menu" aria-haspopup="true" :aria-expanded="show"
+			>
 				<span class="block mr-3">
 					Opções
 				</span>
@@ -35,10 +34,9 @@ const { toggle: toggleFullScreen } = useFullscreen()
 				<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" :class="{
-				'border-white text-white': invertBackground,
-				'border-gray-800 text-gray-800 dark:border-white dark:text-white': !invertBackground
-			}">
+			<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>

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

@@ -12,7 +12,7 @@ const { mode, setMode } = useReaderSettings
 		title="Leitura diurna"
 		class="font-light text-base border border-urucum w-full h-10 flex justify-center items-center"
 		:class="{
-			'bg-gray-100 text-gray-800 border-2 border-gray-500': mode === 'light'
+			'bg-primary-extralight text-gray-800 border-2 border-primary': mode === 'light'
 		}">
 		<IconSun class="w-5 h-5" />
 	</button>
@@ -21,7 +21,7 @@ const { mode, setMode } = useReaderSettings
 		title="Leitura noturna"
 		class="font-light text-base border border-urucum w-full h-10 flex justify-center items-center"
 		:class="{
-			'bg-gray-100 text-gray-800 border-2 border-gray-500':  mode === 'dark'
+			'bg-primary-extralight text-gray-800 border-2 border-primary':  mode === 'dark'
 		}">
 		<IconMoon class="w-5 h-5" />
 	</button>

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

@@ -12,10 +12,10 @@ const { width } = useWindowSize()
 <template>
 	<div class="w-full hidden md:grid grid-cols-3 gap-2 mt-3">
 		<button
-			class="col-span-1 text-center cursor-pointer py-3 rounded-sm border"
+			class="col-span-1 text-primary text-center cursor-pointer py-3 rounded-sm border"
 			:class="{
 				'border-gray-300': columns !== 'singleColumns',
-				'bg-gray-100 text-gray-800 border-2 border-gray-500': columns === 'singleColumns'
+				'bg-primary-extralight border-2 border-primary': columns === 'singleColumns'
 			}"
 			@click.prevent="setColumns('singleColumns')"
 			aria-label="Coluna única"
@@ -25,11 +25,11 @@ const { width } = useWindowSize()
 		</button>
 
 		<button
-			class="col-span-2 text-center cursor-pointer py-3 rounded-sm border"
+			class="col-span-2 text-primary text-center cursor-pointer py-3 rounded-sm border"
 			:class="{
 				'border-gray-300': columns !== 'doubleColumns',
-				'bg-gray-100 text-gray-800 border-2 border-gray-500': columns === 'doubleColumns',
-				'opacity-30 bg-gray-300': width < 1024
+				'bg-primary-extralight border-2 border-primary': columns === 'doubleColumns',
+				'opacity-30': width < 1024
 			}"
 			@click.prevent="width >= 1024 && setColumns('doubleColumns')"
 			aria-label="Coluna dupla"

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

@@ -7,9 +7,9 @@ const { textFont, fontsOptions, setTextFont } = useReaderSettings
 <template>
 	<div 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 tracking-wide border border-urucum w-full h-10 flex justify-center items-center"
+			class="font-light text-lg text-primary tracking-wide border border-urucum w-full h-10 flex justify-center items-center"
 			:class="{
-				'bg-gray-100 text-gray-800 border-2 border-gray-500': textFont === font.name
+				'bg-primary-extralight border-2 border-primary': textFont === font.name
 			}" :style="`font-family: ${font.name}`" :title="font.label ?? font.name">
 			Ff
 		</button>

package/src/components/HeaderSlot/SummaryButton/{SummaryButton.ce.vue → SummaryButton.vue}

@@ -22,19 +22,14 @@ onKeyStroke('Escape', () => hide())
 		<div class="flex">
 			<a href="/" title="Homepage"
 				class="hidden md:flex items-center border p-3 shadow mr-3
-					border-gray-800 text-gray-800 dark:border-white dark:text-white"
+					border-white text-white"
 			>
 				<IconHome class="w-6 h-6"/>
 			</a>
 
 			<button
 				@click.prevent="toggleSummary()"
-				class="border p-3 shadow flex items-center"
-				:class="{
-					'border-white text-white': invertBackground || show,
-					'border-gray-800 text-gray-800 dark:border-white dark:text-white': !invertBackground && !show,
-					'bg-terra': show
-				}"
+				class="border p-3 shadow flex items-center border-white text-white"
 				id="summary-menu" aria-haspopup="true" :aria-expanded="show"
 			>
 				<IconSummary v-if="!show" />

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

@@ -1,29 +1,30 @@
-<script setup>
-import useTextContent from '../../../composables/useTextContent'
-import usePagination from '../../../composables/usePagination'
-const { summary } = useTextContent
-
-function getChapter(item) {
-	useTextContent.getContent(item.file)
-	usePagination.set(1)
-}
-</script>
-
-<template>
-	<div class="absolute top-14 py-4 px-3 shadow-lg w-60 md:w-104
-			text-areia -left-2 md:left-16 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}`"
-				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 }}
-			</component>
-
-			<slot name="summaryBottom" />
-		</nav>
-	</div>
-</template>
+<script setup>
+import useTextContent from '../../../composables/useTextContent'
+import usePagination from '../../../composables/usePagination'
+const { summary } = useTextContent
+
+async function getChapter(item) {
+	const text = await useTextContent.getContent(item.file)
+	useTextContent.applyContent(text)
+	usePagination.set(1)
+}
+</script>
+
+<template>
+	<div class="absolute top-14 py-4 px-3 shadow-lg w-60 md:w-104
+			text-areia -left-2 md:left-16 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}`"
+				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 }}
+			</component>
+
+			<slot name="summaryBottom" />
+		</nav>
+	</div>
+</template>

package/src/components/ReferencePopup.vue

@@ -0,0 +1,31 @@
+<script setup>
+import { onKeyStroke } from '@vueuse/core'
+import useReferences from '../composables/useReferences'
+const { reference, setHighlightedReference } = useReferences
+
+function closeRef() {
+	setHighlightedReference(null)
+}
+
+onKeyStroke('Escape', () => {
+	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>