paginar 0.3.0 → 0.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (55) hide show
  1. package/.editorconfig +13 -13
  2. package/.env +1 -1
  3. package/.vscode/extensions.json +3 -3
  4. package/LICENSE.md +21 -21
  5. package/README.md +244 -244
  6. package/demo/slot/slot-chapter1.html +384 -384
  7. package/demo/slot/slot-chapter2.html +366 -366
  8. package/demo/slot/slot-chapter3.html +265 -265
  9. package/demo/summary/_content/1chapter.html +100 -100
  10. package/demo/summary/_content/2chapter.html +311 -311
  11. package/demo/summary/_content/3chapter.html +211 -211
  12. package/demo/summary/index.html +134 -134
  13. package/dist/index.es.js +849 -840
  14. package/dist/index.es.js.map +1 -1
  15. package/dist/style.css +9 -9
  16. package/index.html +18 -18
  17. package/package.json +1 -1
  18. package/src/App.ce.vue +148 -148
  19. package/src/assets/main.css +392 -392
  20. package/src/components/BookContent.vue +23 -23
  21. package/src/components/FooterSlot.vue +32 -32
  22. package/src/components/FootnotesAside.vue +123 -123
  23. package/src/components/HeaderSlot/HeaderSlot.vue +30 -30
  24. package/src/components/HeaderSlot/OptionsButton/OptionsButton.vue +67 -67
  25. package/src/components/HeaderSlot/OptionsButton/OptionsColor.vue +28 -28
  26. package/src/components/HeaderSlot/OptionsButton/OptionsColumns.vue +51 -51
  27. package/src/components/HeaderSlot/OptionsButton/OptionsDropdown.vue +59 -59
  28. package/src/components/HeaderSlot/OptionsButton/OptionsFontFamily.vue +17 -17
  29. package/src/components/HeaderSlot/OptionsButton/OptionsFontSize.vue +17 -17
  30. package/src/components/HeaderSlot/SummaryButton/SummaryButton.vue +70 -70
  31. package/src/components/HeaderSlot/SummaryButton/SummaryDropdown.vue +6 -6
  32. package/src/components/ReaderWrapper.vue +37 -37
  33. package/src/components/ReferencePopup.vue +36 -36
  34. package/src/components/icons/Close.vue +6 -6
  35. package/src/components/icons/DoubleColumn.vue +15 -15
  36. package/src/components/icons/Expand.vue +7 -7
  37. package/src/components/icons/Eye.vue +9 -9
  38. package/src/components/icons/Footnote.vue +5 -5
  39. package/src/components/icons/Home.vue +6 -6
  40. package/src/components/icons/Moon.vue +5 -5
  41. package/src/components/icons/Notes.vue +5 -5
  42. package/src/components/icons/SingleColumn.vue +3 -3
  43. package/src/components/icons/Summary.vue +10 -10
  44. package/src/components/icons/Sun.vue +5 -5
  45. package/src/components/icons/ThreeDots.vue +8 -8
  46. package/src/composables/useBrowser.js +16 -16
  47. package/src/composables/useFootnotes.js +50 -50
  48. package/src/composables/usePagination.js +125 -125
  49. package/src/composables/useReaderSettings.js +174 -174
  50. package/src/composables/useReferences.js +67 -67
  51. package/src/composables/useStyles.js +60 -60
  52. package/src/composables/useTextContent.js +113 -113
  53. package/src/main.js +19 -19
  54. package/tailwind.config.js +16 -16
  55. package/vite.config.js +36 -36
package/dist/style.css CHANGED
@@ -1,20 +1,20 @@
1
1
 
2
- .width-enter-active[data-v-4f3c3c73],
3
- .width-leave-active[data-v-4f3c3c73] {
2
+ .width-enter-active[data-v-5391e486],
3
+ .width-leave-active[data-v-5391e486] {
4
4
  transition: width .5s;
5
5
  }
6
- .width-enter-active>*[data-v-4f3c3c73] {
7
- transition-property: opacity;
8
- transition-duration: .2s;
6
+ .width-enter-active>*[data-v-5391e486] {
7
+ transition-property: opacity;
8
+ transition-duration: .2s;
9
9
  transition-delay: .3s;
10
10
  }
11
- .width-leave-active>*[data-v-4f3c3c73] {
11
+ .width-leave-active>*[data-v-5391e486] {
12
12
  transition: opacity .25s;
13
13
  }
14
- .width-enter[data-v-4f3c3c73],
15
- .width-leave-to[data-v-4f3c3c73] {
14
+ .width-enter[data-v-5391e486],
15
+ .width-leave-to[data-v-5391e486] {
16
16
  width: 0;
17
- }
17
+ }
18
18
  /*
19
19
  ! tailwindcss v3.1.8 | MIT License | https://tailwindcss.com
20
20
  */
package/index.html CHANGED
@@ -1,18 +1,18 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
-
4
- <head>
5
- <meta charset="UTF-8" />
6
- <link rel="icon" href="/favicon.ico" />
7
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
8
- <title>Paginar</title>
9
- </head>
10
-
11
- <body>
12
- <div>
13
- <p><a href="/demo/summary/index.html">Sumário (arquivos externos)</a></p>
14
- <p><a href="/demo/slot/slot-chapter1.html">Slot (conteúdo direto na pagina)</a></p>
15
- </div>
16
- </body>
17
-
18
- </html>
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8" />
6
+ <link rel="icon" href="/favicon.ico" />
7
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
8
+ <title>Paginar</title>
9
+ </head>
10
+
11
+ <body>
12
+ <div>
13
+ <p><a href="/demo/summary/index.html">Sumário (arquivos externos)</a></p>
14
+ <p><a href="/demo/slot/slot-chapter1.html">Slot (conteúdo direto na pagina)</a></p>
15
+ </div>
16
+ </body>
17
+
18
+ </html>
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "description": "A flipping page web component for reading long texts on the brower",
5
5
  "main": "dist/index.es.js",
6
6
  "module": "dist/index.es.js",
7
- "version": "0.3.0",
7
+ "version": "0.3.2",
8
8
  "repository": {
9
9
  "type": "git",
10
10
  "url": "git+https://github.com/educkf/paginar.git"
package/src/App.ce.vue CHANGED
@@ -1,148 +1,148 @@
1
- <script setup>
2
- import { ref, onMounted, defineProps, watch } from 'vue'
3
- import { useWindowSize, watchDebounced } from '@vueuse/core'
4
-
5
- import HeaderSlot from './components/HeaderSlot/HeaderSlot.vue'
6
- import BookContent from './components/BookContent.vue'
7
- import EngineWrapper from './components/EngineWrapper.vue'
8
- import ReaderWrapper from './components/ReaderWrapper.vue'
9
- import ReferencePopup from './components/ReferencePopup.vue'
10
- import FooterSlot from './components/FooterSlot.vue'
11
- import FootnotesAside from './components/FootnotesAside.vue'
12
-
13
- import usePagination from './composables/usePagination'
14
- import useEstimatePages from './composables/useEstimatePages'
15
- import useTextContent from './composables/useTextContent'
16
- import useReaderSettings from './composables/useReaderSettings'
17
- import useStyles from './composables/useStyles'
18
- import useBrowser from './composables/useBrowser'
19
-
20
- const props = defineProps({
21
- bookTitle: String,
22
- bookContent: String,
23
- readerSettings: String,
24
- readerBlocked: Boolean,
25
- rootClass: {
26
- type: String,
27
- default: ''
28
- },
29
- cssFile: String,
30
- cssString: String
31
- })
32
-
33
- const { baseFont, bookTitle, chapterTitle, textFont, fontSize, columns, setColumns, mode } = useReaderSettings
34
- const { currentPage, totalPages } = usePagination
35
- const { content, listenToClicks } = useTextContent
36
- const { width, height } = useWindowSize()
37
-
38
- const readerComponent = ref(null)
39
- const contentArea = ref(null)
40
- const rootComponent = ref(null)
41
-
42
- onMounted(async () => {
43
- usePagination.init(readerComponent, contentArea)
44
- useReaderSettings.initSettings(props.readerSettings)
45
- useStyles.initStyles(props, rootComponent)
46
-
47
- if (['string', 'boolean'].includes(typeof props.readerBlocked)) {
48
- useReaderSettings.setBlocked(props.readerBlocked)
49
- }
50
-
51
- })
52
-
53
- watch(
54
- props,
55
- () => {
56
- if (props.hasOwnProperty('readerBlocked')) {
57
- const readerBlocked = typeof props.readerBlocked === 'boolean'
58
- ? props.readerBlocked
59
- : props.readerBlocked === 'true'
60
- useReaderSettings.setBlocked(readerBlocked)
61
- }
62
- }
63
- )
64
-
65
- watchDebounced(
66
- [width, height, content, columns, fontSize, textFont],
67
- () => {
68
- if (width.value < 1024 && columns.value === 'double')
69
- setColumns('single')
70
- else
71
- useEstimatePages.estimate(readerComponent, contentArea)
72
- },
73
- { debounce: 125, maxWait: 250 }
74
- )
75
-
76
- watchDebounced(content,
77
- () => listenToClicks(contentArea),
78
- { debounce: 125, maxWait: 250 }
79
- )
80
-
81
- </script>
82
-
83
- <template>
84
- <div class="rootWrapper" :class="useBrowser.isSafari ? 'safari' : ''">
85
- <main id="rootComponent"
86
- ref="rootComponent"
87
- :class="mode
88
- .concat(` ${props.rootClass}`)
89
- .concat(` currentPage-${currentPage}`)
90
- .concat(` totalPages-${totalPages}`)
91
- .concat(` columns-${columns}`)
92
- "
93
- :style="`font-family: ${baseFont}`"
94
- >
95
- <HeaderSlot>
96
- <template #header>
97
- <slot name="header">
98
- <p class="text-white text-center text-sm">
99
- {{ props.bookTitle || bookTitle }}
100
- </p>
101
- <p class="text-white text-center text-xs">
102
- {{ props.chapterTitle || chapterTitle }}
103
- </p>
104
- </slot>
105
- </template>
106
-
107
- <template #summaryTop>
108
- <slot name="summaryTop"></slot>
109
- </template>
110
-
111
- <template #summaryBottom>
112
- <slot name="summaryBottom"></slot>
113
- </template>
114
-
115
- <template #optionsTop>
116
- <slot name="optionsTop"></slot>
117
- </template>
118
-
119
- <template #optionsBottom>
120
- <slot name="optionsBottom"></slot>
121
- </template>
122
- </HeaderSlot>
123
-
124
- <EngineWrapper>
125
- <div id="reader-component" ref="readerComponent" >
126
- <ReaderWrapper>
127
- <section id="content-area" ref="contentArea"
128
- :style="`font-family: ${textFont}; font-size: ${fontSize}px`">
129
- <BookContent :bookContent="bookContent">
130
- <template #content>
131
- <slot name="content"></slot>
132
- </template>
133
- </BookContent>
134
- </section>
135
- </ReaderWrapper>
136
- </div>
137
- </EngineWrapper>
138
-
139
- <FooterSlot :currPage="currentPage" :totalPages="totalPages" />
140
-
141
- <ReferencePopup />
142
- </main>
143
-
144
- <FootnotesAside />
145
- </div>
146
- </template>
147
-
148
- <style lang="scss" src="./assets/main.css"></style>
1
+ <script setup>
2
+ import { ref, onMounted, defineProps, watch } from 'vue'
3
+ import { useWindowSize, watchDebounced } from '@vueuse/core'
4
+
5
+ import HeaderSlot from './components/HeaderSlot/HeaderSlot.vue'
6
+ import BookContent from './components/BookContent.vue'
7
+ import EngineWrapper from './components/EngineWrapper.vue'
8
+ import ReaderWrapper from './components/ReaderWrapper.vue'
9
+ import ReferencePopup from './components/ReferencePopup.vue'
10
+ import FooterSlot from './components/FooterSlot.vue'
11
+ import FootnotesAside from './components/FootnotesAside.vue'
12
+
13
+ import usePagination from './composables/usePagination'
14
+ import useEstimatePages from './composables/useEstimatePages'
15
+ import useTextContent from './composables/useTextContent'
16
+ import useReaderSettings from './composables/useReaderSettings'
17
+ import useStyles from './composables/useStyles'
18
+ import useBrowser from './composables/useBrowser'
19
+
20
+ const props = defineProps({
21
+ bookTitle: String,
22
+ bookContent: String,
23
+ readerSettings: String,
24
+ readerBlocked: Boolean,
25
+ rootClass: {
26
+ type: String,
27
+ default: ''
28
+ },
29
+ cssFile: String,
30
+ cssString: String
31
+ })
32
+
33
+ const { baseFont, bookTitle, chapterTitle, textFont, fontSize, columns, setColumns, mode } = useReaderSettings
34
+ const { currentPage, totalPages } = usePagination
35
+ const { content, listenToClicks } = useTextContent
36
+ const { width, height } = useWindowSize()
37
+
38
+ const readerComponent = ref(null)
39
+ const contentArea = ref(null)
40
+ const rootComponent = ref(null)
41
+
42
+ onMounted(async () => {
43
+ usePagination.init(readerComponent, contentArea)
44
+ useReaderSettings.initSettings(props.readerSettings)
45
+ useStyles.initStyles(props, rootComponent)
46
+
47
+ if (['string', 'boolean'].includes(typeof props.readerBlocked)) {
48
+ useReaderSettings.setBlocked(props.readerBlocked)
49
+ }
50
+
51
+ })
52
+
53
+ watch(
54
+ props,
55
+ () => {
56
+ if (props.hasOwnProperty('readerBlocked')) {
57
+ const readerBlocked = typeof props.readerBlocked === 'boolean'
58
+ ? props.readerBlocked
59
+ : props.readerBlocked === 'true'
60
+ useReaderSettings.setBlocked(readerBlocked)
61
+ }
62
+ }
63
+ )
64
+
65
+ watchDebounced(
66
+ [width, height, content, columns, fontSize, textFont],
67
+ () => {
68
+ if (width.value < 1024 && columns.value === 'double')
69
+ setColumns('single')
70
+ else
71
+ useEstimatePages.estimate(readerComponent, contentArea)
72
+ },
73
+ { debounce: 125, maxWait: 250 }
74
+ )
75
+
76
+ watchDebounced(content,
77
+ () => listenToClicks(contentArea),
78
+ { debounce: 125, maxWait: 250 }
79
+ )
80
+
81
+ </script>
82
+
83
+ <template>
84
+ <div class="rootWrapper" :class="useBrowser.isSafari ? 'safari' : ''">
85
+ <main id="rootComponent"
86
+ ref="rootComponent"
87
+ :class="mode
88
+ .concat(` ${props.rootClass}`)
89
+ .concat(` currentPage-${currentPage}`)
90
+ .concat(` totalPages-${totalPages}`)
91
+ .concat(` columns-${columns}`)
92
+ "
93
+ :style="`font-family: ${baseFont}`"
94
+ >
95
+ <HeaderSlot>
96
+ <template #header>
97
+ <slot name="header">
98
+ <p class="text-white text-center text-sm">
99
+ {{ props.bookTitle || bookTitle }}
100
+ </p>
101
+ <p class="text-white text-center text-xs">
102
+ {{ props.chapterTitle || chapterTitle }}
103
+ </p>
104
+ </slot>
105
+ </template>
106
+
107
+ <template #summaryTop>
108
+ <slot name="summaryTop"></slot>
109
+ </template>
110
+
111
+ <template #summaryBottom>
112
+ <slot name="summaryBottom"></slot>
113
+ </template>
114
+
115
+ <template #optionsTop>
116
+ <slot name="optionsTop"></slot>
117
+ </template>
118
+
119
+ <template #optionsBottom>
120
+ <slot name="optionsBottom"></slot>
121
+ </template>
122
+ </HeaderSlot>
123
+
124
+ <EngineWrapper>
125
+ <div id="reader-component" ref="readerComponent" >
126
+ <ReaderWrapper>
127
+ <section id="content-area" ref="contentArea"
128
+ :style="`font-family: ${textFont}; font-size: ${fontSize}px`">
129
+ <BookContent :bookContent="bookContent">
130
+ <template #content>
131
+ <slot name="content"></slot>
132
+ </template>
133
+ </BookContent>
134
+ </section>
135
+ </ReaderWrapper>
136
+ </div>
137
+ </EngineWrapper>
138
+
139
+ <FooterSlot :currPage="currentPage" :totalPages="totalPages" />
140
+
141
+ <ReferencePopup />
142
+ </main>
143
+
144
+ <FootnotesAside />
145
+ </div>
146
+ </template>
147
+
148
+ <style lang="scss" src="./assets/main.css"></style>