vue-book-reader 1.0.9 → 1.1.1

package/README.md

@@ -1,8 +1,31 @@
-# vue-book-reader - an easy way to embed a reader into your webapp
+<div align="center">
+  <img width=250 src="https://raw.githubusercontent.com/jinhuan138/vue--book-reader/master/public/logo.png" />
+  <h1>VueReader</h1>
+</div>
+
+<p>
+  <a href="https://www.npmjs.com/package/vue-book-reader" target="_blank">
+    <img src="https://img.shields.io/npm/v/vue-book-reader?style=flat-square" />
+  </a>
+  <a href="https://www.npmjs.com/package/vue-book-reader" target="_blank" >
+    <img src="https://img.shields.io/npm/dw/vue-book-reader?style=flat-square" />
+  </a>
+  <a href="./LICENSE">
+    <img src="https://img.shields.io/npm/l/vue-book-reader?style=flat-square" />
+  </a>
+</p>
+
+<div align="center">
+  <h2><a href="https://jinhuan138.github.io/vue-book-reader/">📖Documentation</a></h2>
+</div>
+
+
+# Introduction
 
 vue-book-reader is a vue wrapper for [foliate-js](https://github.com/johnfactotum/foliate-js) - library for rendering e-books in the browser.
 Supports EPUB, MOBI, KF8 (AZW3), FB2, CBZ, PDF (experimental; requires PDF.js), or add support for other formats yourself by implementing the book interface
 
+
 ## Basic usage
 
 ```bash
@@ -36,198 +59,13 @@ import { VueReader } from 'vue-book-reader'
 | **Name** | **Description**                                                                     |
 | -------- | ----------------------------------------------------------------------------------- |
 | title    | You have access to title by [slot](https://v3.vuejs.org/guide/component-slots.html) |
+| loadingView | epub view loadingView                                                            |
 
-## Recipes and tips
-
-## custom css
-
-```vue
-<template>
-  <vue-reader url="/files/梵高手稿.epub" :getRendition="getRendition">
-  </vue-reader>
-</template>
-
-<script setup>
-import VueReader from 'vue-book-reader'
-import { ref } from 'vue'
-
-const getCSS = (style) => [
-  `
-    html {
-      background: #000;
-      color: #fff;
-    }`,
-]
-const getRendition = async (rendition) => {
-  const { book, renderer } = rendition
-  renderer.setStyles(getCSS())
-}
-</script>
-```
-
-## Display a scrolled epub-view
-
-```vue
-<template>
-  <div style="height: 100vh">
-    <VueReader url="/files/啼笑因缘.mobi":getRendition="getRendition"/>
-  </div>
-</template>
-
-<script setup>
-import VueReader from 'vue-book-reader'
-
-const getRendition =(view)=>{
-  //scrolled or paginated
-  view?.renderer.setAttribute('flow', 'scrolled')
-}
-</script>
-```
-
-## Import file
-
-```vue
-<template>
-  <div
-    style="height: 100vh; position: relative"
-    :style="{ height: url ? '100vh' : '50px' }"
-  >
-    <vue-reader v-if="url" :url="url" />
-    <input class="input" type="file" accept=".epub,.mobi,.azw3,.FB2,.CBZ,.PDF" @change="onchange" />
-  </div>
-</template>
-
-<script setup>
-import VueReader from 'vue-book-reader'
-import { ref } from 'vue'
-
-const url = ref('')
-const onchange = (e) => {
-  const file = e.target.files[0]
-  url.value = file
-}
-</script>
-```
-
-## Current progress
-
-```vue
-<template>
-  <div style="height: 100vh; position: relative">
-    <vue-reader
-      url="/files/啼笑因缘.azw3"
-      :getRendition="getRendition"
-      @update:location="locationChange"
-    >
-    </vue-reader>
-    <div class="progress">
-      <input
-        type="number"
-        :value="current"
-        :min="0"
-        :max="100"
-        step="1"
-        @change="change"
-      />%
-      <input
-        type="range"
-        :value="current"
-        :min="0"
-        :max="100"
-        :step="1"
-        @change="change"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup>
-import VueReader from 'vue-book-reader'
-import { ref } from 'vue'
-
-let view = null
-const current = ref(0)
-const change = (e) => {
-  const value = e.target.value
-  current.value = value
-  view.goToFraction(parseFloat(value / 100))
-}
-const getRendition = (val) => (view = val)
-
-const locationChange = (detail) => {
-  const { fraction } = detail
-  const percent = Math.floor(fraction * 100)
-  current.value = percent
-}
-</script>
-<style>
-.progress {
-  position: absolute;
-  bottom: 1rem;
-  right: 1rem;
-  left: 1rem;
-  z-index: 1;
-  color: #000;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-}
-
-.progress > input[type='number'] {
-  text-align: center;
-}
-
-.progress > input[type='range'] {
-  width: 100%;
-}
-</style>
-
-```
+## EpubView Exposes
 
-## Get book information
-
-```vue
-<template>
-  <vue-reader
-    url="/files/啼笑因缘.azw3"
-    :getRendition="getRendition"
-    v-show="false"
-  >
-  </vue-reader>
-  <div v-if="information" style="color: #000">
-    <img
-      :src="information.cover"
-      :alt="information.title"
-      style="width: 100px"
-    />
-    <p>标题:{{ information.title }}</p>
-    <p>作者:{{ information.author }}</p>
-    <p>出版社:{{ information.publisher }}</p>
-    <p>语言:{{ information.language }}</p>
-    <p>出版日期:{{ information.published }}</p>
-    <p>介绍:{{ information.description }}</p>
-  </div>
-</template>
-
-<script setup>
-import VueReader from 'vue-book-reader'
-import { ref } from 'vue'
-
-const information = ref(null)
-const getRendition = (rendition) => {
-  const { book } = rendition
-  const { author } = book.metadata
-  const bookAuthor =
-    typeof author === 'string'
-      ? author
-      : author
-          ?.map((author) => (typeof author === 'string' ? author : author.name))
-          ?.join(', ') ?? ''
-  information.value = { ...book.metadata, author: bookAuthor }
-  book.getCover?.().then((blob) => {
-    information.value.cover = URL.createObjectURL(blob)
-  })
-}
-</script>
-```
+| **Name**    | **Description**        | **Type**         |
+| ----------- | ---------------------- | ---------------- |
+| nextPage    | display  next page     | `function`       |
+| prevPage    | display  previous page | `function`       |
+| setLocation | Set the page           | `function(href)` |
 

package/lib/__vite-browser-external-DYxpcVy9.js

@@ -0,0 +1,4 @@
+const e = {};
+export {
+  e as default
+};

package/lib/{comic-book-D2H5riQt.js → comic-book-Ca6kYOxX.js}

@@ -1,23 +1,23 @@
-const h = ({ entries: l, loadBlob: i, getSize: a }, p) => {
-  const s = /* @__PURE__ */ new Map(), c = /* @__PURE__ */ new Map(), d = async (e) => {
+const u = ({ entries: i, loadBlob: a, getSize: l }, d) => {
+  const s = /* @__PURE__ */ new Map(), c = /* @__PURE__ */ new Map(), f = async (e) => {
     if (s.has(e))
       return s.get(e);
-    const t = URL.createObjectURL(await i(e)), r = URL.createObjectURL(
-      new Blob([`<img src="${t}">`], { type: "text/html" })
+    const t = URL.createObjectURL(await a(e)), r = URL.createObjectURL(
+      new Blob([`<!DOCTYPE html><html><head><meta charset="utf-8"></head><body style="margin: 0"><img src="${t}"></body></html>`], { type: "text/html" })
     );
     return c.set(e, [t, r]), s.set(e, r), r;
-  }, f = (e) => {
+  }, p = (e) => {
     var t, r;
-    (r = (t = c.get(e)) == null ? void 0 : t.forEach) == null || r.call(t, (u) => URL.revokeObjectURL(u)), c.delete(e), s.delete(e);
-  }, g = [".jpg", ".jpeg", ".png", ".gif", ".bmp", ".webp", ".svg", ".jxl", ".avif"], n = l.map((e) => e.filename).filter((e) => g.some((t) => e.endsWith(t))).sort();
+    (r = (t = c.get(e)) == null ? void 0 : t.forEach) == null || r.call(t, (h) => URL.revokeObjectURL(h)), c.delete(e), s.delete(e);
+  }, g = [".jpg", ".jpeg", ".png", ".gif", ".bmp", ".webp", ".svg", ".jxl", ".avif"], n = i.map((e) => e.filename).filter((e) => g.some((t) => e.endsWith(t))).sort();
   if (!n.length)
     throw new Error("No supported image files in archive");
   const o = {};
-  return o.getCover = () => i(n[0]), o.metadata = { title: p.name }, o.sections = n.map((e) => ({
+  return o.getCover = () => a(n[0]), o.metadata = { title: d.name }, o.sections = n.map((e) => ({
     id: e,
-    load: () => d(e),
-    unload: () => f(e),
-    size: a(e)
+    load: () => f(e),
+    unload: () => p(e),
+    size: l(e)
   })), o.toc = n.map((e) => ({ label: e, href: e })), o.rendition = { layout: "pre-paginated" }, o.resolveHref = (e) => ({ index: o.sections.findIndex((t) => t.id === e) }), o.splitTOCHref = (e) => [e, null], o.getTOCFragment = (e) => e.documentElement, o.destroy = () => {
     for (const e of c.values())
       for (const t of e)
@@ -25,5 +25,5 @@ const h = ({ entries: l, loadBlob: i, getSize: a }, p) => {
   }, o;
 };
 export {
-  h as makeComicBook
+  u as makeComicBook
 };