vue-book-reader 1.2.2 → 1.2.3

package/README.md

@@ -1,6 +1,6 @@
 <div align="center">
   <img width=250 src="https://raw.githubusercontent.com/jinhuan138/vue--book-reader/master/public/logo.png" />
-  <h1>VueReader</h1>
+  <h1>VueBookReader</h1>
 </div>
 
 <p>
@@ -37,7 +37,7 @@ And in your vue-component...
 ```vue
 <template>
   <div style="height: 100vh">
-    <vue-reader url="/files/啼笑因缘.epub" />
+    <vue-reader url="/vue-book-reader/files/啼笑因缘.epub" />
   </div>
 </template>
 <script setup>
@@ -45,23 +45,46 @@ import { VueReader } from 'vue-book-reader'
 </script>
 ```
 
-## VueReader Attributes
+## VueReader API
 
-| **Name** | **Description**                   | **Type**               | **Default** |
-| -------- | --------------------------------- | ---------------------- | ----------- |
-| url      | book url or File                  | `string`/`File`        | —           |
-| location | set / update location of the book | `string`/`number`      | —           |
-| title    | the title of the book             | `string`               | —           |
-| showToc  | whether to show the toc           | `boolean`              | true        |
+### VueReader Attributes
 
-## VueReader Slots
+| **Name** | **Description**                   | **Type**                              | **Default** |
+| -------- | --------------------------------- | ------------------------------------- | ----------- |
+| url      | book url or File                  | `string`/`File`                       | —           |
+| location | set / update location of the book | `string`/`number`                     | —           |
+| title    | the title of the book             | `string`                              | —           |
+| showToc  | whether to show the toc           | `boolean`                             | true        |
+| [BookView Attributes](#bookview-attributes)  |  BookView attributes all can be used. | -           |
 
-| **Name** | **Description**                                                                     |
-| -------- | ----------------------------------------------------------------------------------- |
-| title    | You have access to title by [slot](https://v3.vuejs.org/guide/component-slots.html) |
-| loadingView | epub view loadingView                                                            |
+### VueReader Slots
 
-## EpubView Exposes
+| **Name**                          | **Description**                   |
+| --------------------------------- | --------------------------------- |
+| title                             |  book title                       |
+| [BookView slots](#bookview-slots) |  BookView slots all can be used.  |
+
+### VueReader Exposes
+| **Name**                              | **Description**                     |
+| ------------------------------------- | ----------------------------------- | 
+| [BookView Exposes](#bookview-exposes) |  BookView exposes all can be used.  |
+## BookView API
+
+### BookView Attributes
+
+| **Name**   | **Description**                   | **Type**                | **Default**      |
+| ---------- | --------------------------------- | ----------------------- | ---------------- |
+| url        | book url or File                                            | `string`/`File`  |
+| tocChanged | get an array representing the table of contents of the book | `function(href)` | 
+
+### BookView Slots
+
+| **Name**    | **Description**          |
+| ----------- | ------------------------ |
+| loadingView | BookView loadingView     |
+| errorView   | BookView errorView       |
+
+### BookView Exposes
 
 | **Name**    | **Description**        | **Type**         |
 | ----------- | ---------------------- | ---------------- |
@@ -69,3 +92,8 @@ import { VueReader } from 'vue-book-reader'
 | prevPage    | display  previous page | `function`       |
 | setLocation | Set the page           | `function(href)` |
 
+<style>
+html:focus-within {
+  scroll-behavior: smooth;
+}
+</style>

package/lib/index.css

@@ -1,33 +1,33 @@
 
-.reader[data-v-1350176b] {
+.reader[data-v-cbfdb46e] {
   position: absolute;
   inset: 50px 50px 20px;
 }
-.viewHolder[data-v-1350176b] {
+.viewHolder[data-v-cbfdb46e] {
   height: 100%;
   width: 100%;
   position: relative;
 }
-#viewer[data-v-1350176b] {
+#viewer[data-v-cbfdb46e] {
   height: 100%;
 }
 
 /* ↓ */
-.tocAreaButton .expansion[data-v-faba9f3e]::before {
+.tocAreaButton .expansion[data-v-9d18782d]::before {
   transform: rotate(-45deg) translateX(2.5px);
 }
-.tocAreaButton .expansion[data-v-faba9f3e]::after {
+.tocAreaButton .expansion[data-v-9d18782d]::after {
   transform: rotate(45deg) translateX(-2.5px);
 }
 
 /* ↑ */
-.tocAreaButton .open[data-v-faba9f3e]::before {
+.tocAreaButton .open[data-v-9d18782d]::before {
   transform: rotate(45deg) translateX(2.5px);
 }
-.tocAreaButton .open[data-v-faba9f3e]::after {
+.tocAreaButton .open[data-v-9d18782d]::after {
   transform: rotate(-45deg) translateX(-2.5px);
 }
-.tocAreaButton[data-v-faba9f3e] {
+.tocAreaButton[data-v-9d18782d] {
   user-select: none;
   appearance: none;
   background: none;
@@ -45,19 +45,19 @@
   cursor: pointer;
   position: relative;
 }
-.tocAreaButton[data-v-faba9f3e]:hover {
+.tocAreaButton[data-v-9d18782d]:hover {
   background: rgba(0, 0, 0, 0.05);
 }
-.tocAreaButton[data-v-faba9f3e]:active {
+.tocAreaButton[data-v-9d18782d]:active {
   background: rgba(0, 0, 0, 0.1);
 }
-.active[data-v-faba9f3e] {
+.active[data-v-9d18782d] {
   color: #1565c0;
   border-bottom: 2px solid #1565c0;
 }
 
 /* 二级目录 */
-.tocAreaButton .expansion[data-v-faba9f3e] {
+.tocAreaButton .expansion[data-v-9d18782d] {
   cursor: pointer;
   transform: translateY(-50%);
   top: 50%;
@@ -69,8 +69,8 @@
     transform 0.3s ease-in-out,
     top 0.3s ease-in-out;
 }
-.tocAreaButton .expansion[data-v-faba9f3e]::after,
-.tocAreaButton .expansion[data-v-faba9f3e]::before {
+.tocAreaButton .expansion[data-v-9d18782d]::after,
+.tocAreaButton .expansion[data-v-9d18782d]::before {
   content: '';
   position: absolute;
   width: 6px;
@@ -83,15 +83,15 @@
 }
 
 /* container */
-.container[data-v-e3dfdabb] {
+.container[data-v-94907056] {
   overflow: hidden;
   position: relative;
   height: 100%;
 }
-.containerExpanded[data-v-e3dfdabb] {
+.containerExpanded[data-v-94907056] {
   transform: translateX(256px);
 }
-.readerArea[data-v-e3dfdabb] {
+.readerArea[data-v-94907056] {
   position: relative;
   z-index: 1;
   height: 100%;
@@ -99,7 +99,7 @@
   background-color: #fff;
   transition: all 0.3s ease;
 }
-.container .titleArea[data-v-e3dfdabb] {
+.container .titleArea[data-v-94907056] {
   position: absolute;
   top: 20px;
   left: 50px;
@@ -112,7 +112,7 @@
 }
 
 /* toc */
-.tocBackground[data-v-e3dfdabb] {
+.tocBackground[data-v-94907056] {
   position: absolute;
   left: 256px;
   top: 0;
@@ -120,7 +120,7 @@
   right: 0;
   z-index: 1;
 }
-.tocArea[data-v-e3dfdabb] {
+.tocArea[data-v-94907056] {
   position: absolute;
   left: 0;
   top: 0;
@@ -134,18 +134,18 @@
 }
 
 /* 滚动条 */
-.tocArea[data-v-e3dfdabb]::-webkit-scrollbar {
+.tocArea[data-v-94907056]::-webkit-scrollbar {
   width: 5px;
   height: 5px;
 }
-.tocArea[data-v-e3dfdabb]::-webkit-scrollbar-thumb:vertical {
+.tocArea[data-v-94907056]::-webkit-scrollbar-thumb:vertical {
   height: 5px;
   background-color: rgba(0, 0, 0, 0.1);
   border-radius: 0.5rem;
 }
 
 /* tocButton */
-.tocButton[data-v-e3dfdabb] {
+.tocButton[data-v-94907056] {
   background: none;
   border: none;
   width: 32px;
@@ -157,7 +157,7 @@
   outline: none;
   cursor: pointer;
 }
-.tocButtonBar[data-v-e3dfdabb] {
+.tocButtonBar[data-v-94907056] {
   position: absolute;
   width: 60%;
   background: #ccc;
@@ -167,12 +167,12 @@
   top: 50%;
   transition: all 0.5s ease;
 }
-.tocButtonExpanded[data-v-e3dfdabb] {
+.tocButtonExpanded[data-v-94907056] {
   background: #f2f2f2;
 }
 
 /* 翻页 */
-.arrow[data-v-e3dfdabb] {
+.arrow[data-v-94907056] {
   outline: none;
   border: none;
   background: none;
@@ -188,22 +188,22 @@
   appearance: none;
   font-weight: normal;
 }
-.arrow[data-v-e3dfdabb]:hover {
+.arrow[data-v-94907056]:hover {
   color: #777;
 }
-.arrow[data-v-e3dfdabb]:disabled {
+.arrow[data-v-94907056]:disabled {
   cursor: not-allowed;
   color: #e2e2e2;
 }
-.prev[data-v-e3dfdabb] {
+.prev[data-v-94907056] {
   left: 1px;
 }
-.next[data-v-e3dfdabb] {
+.next[data-v-94907056] {
   right: 1px;
 }
 
 /* loading */
-.loadingView[data-v-e3dfdabb] {
+.loadingView[data-v-94907056] {
   position: absolute;
   top: 50%;
   left: 10%;
@@ -214,7 +214,7 @@
 }
 
 /* errorView */
-.errorView[data-v-e3dfdabb] {
+.errorView[data-v-94907056] {
   position: absolute;
   top: 50%;
   left: 10%;