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/demo/summary/index.html CHANGED
@@ -1,134 +1,134 @@
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>Sumário - Paginar</title>
9
- </head>
10
-
11
- <body>
12
- <style>
13
- #app {
14
- height: 100vh;
15
- }
16
-
17
- .page-break {
18
- break-before: column;
19
- }
20
-
21
- .page-break span {
22
- background-color: #eee;
23
- padding: 5px;
24
- font-family: monospace;
25
- display: block;
26
- }
27
- </style>
28
-
29
- <div id="app">
30
- <!-- <paginate-content
31
- id="pagination-el"
32
- book-title="A Tale of Two Cities"
33
- css-file="https://paginar-css.surge.sh/style.css"
34
- > -->
35
- <paginate-content
36
- id="pagination-el"
37
- book-title="A Tale of Two Cities"
38
- >
39
- <div slot="summaryTop">
40
- <a href="/" title="Catálogo" class="w-full text-left block text-black py-2 px-3 hover:bg-gray-100 rounded mb-2">
41
- Catálogo
42
- </a>
43
- <div class="my-3 border-b border-gray-100"></div>
44
- </div>
45
-
46
- <div slot="summaryBottom">
47
- <div class="my-3 border-b border-gray-100"></div>
48
- <a href="/" title="Catálogo" class="w-full text-left block text-black py-2 px-3 hover:bg-gray-100 rounded">
49
- Referências
50
- </a>
51
- </div>
52
-
53
- <div slot="header">
54
- <img src="https://sabia.pub/images/logo-mobile-dark.svg" style="height: 40px">
55
- </div>
56
-
57
- <div slot="optionsTop">
58
- <a href="/" title="Catálogo" class="w-full block text-black text-center py-2 px-3 hover:bg-gray-100 rounded mb-2">
59
- Minha conta
60
- </a>
61
- <div class="my-3 border-b border-gray-100"></div>
62
- </div>
63
-
64
- <div slot="optionsBottom">
65
- <div class="my-3 border-b border-gray-100"></div>
66
- <a href="https://sabia.pub" target="_blank" title="Sobre a Editora" class="w-full block text-black text-center text-xs py-2 px-3 hover:bg-gray-100 rounded">
67
- <img src="https://sabia.pub/images/logo.svg" style="height: 48px; margin: 0 auto; display: block;">
68
- </a>
69
- </div>
70
- </paginate-content>
71
- </div>
72
-
73
- <script>
74
- const settings = {
75
- fontSize: 19, // number
76
- fontsOptions: [
77
- {
78
- label: 'Times New Roman',
79
- name: 'TimesNewRoman, Times New Roman, Times, Baskerville, Georgia,serif',
80
- defaultTextFont: true
81
- },
82
- {
83
- label: 'Inter',
84
- name: '"Inter", sans-serif',
85
- link: 'https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700&display=swap',
86
- defaultBaseFont: true
87
- },
88
- {
89
- label: 'Open Dyslexic',
90
- name: '"Open-Dyslexic", sans-serif',
91
- link: 'http://fonts.cdnfonts.com/css/open-dyslexic'
92
- },
93
- {
94
- label: 'Atkinson Hyperlegible',
95
- name: 'Atkinson Hyperlegible',
96
- link: 'https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap'
97
- }
98
- ]
99
- }
100
-
101
- const content = {
102
- summary: [
103
- { title: 'Chapter 1', file: './_content/1chapter.html' },
104
- { title: 'Chapter 2', file: './_content/2chapter.html' },
105
- { title: 'Chapter 3', file: './_content/3chapter.html' }
106
- ],
107
- references: [
108
- {
109
- "cit": "GAMA, 2019",
110
- "ref": "GAMA, Mara. <strong>As três rotas que trouxeram a centenária Bauhaus ao Brasil</strong>. Folha de São Paulo, São Paulo, 1 abr. 2019. Disponível em: https://www1.folha.uol.com.br/ilustrissima/2019/03/as-tres-rotas-que-trouxeram-a-centenaria-bauhaus-ao-brasil.shtml. Acesso em: 4 abr. 2019"
111
- },
112
- {
113
- "cit": "LEON, 2006",
114
- "ref": "LEON, Ethel. <strong>O Instituto de Arte Contemporânea do Museu de Arte Moderna (MAM) de São Paulo dos anos 1950</strong>. São Paulo, 2006."
115
- },
116
- {
117
- "cit": "LUGONES, 1978",
118
- "ref": "LUGONES, Maria. <strong>Colonialidad y género</strong>. Tábula Rasa, Bogotá, Colômbia, n. 9, p. 73-101, julho-dezembro de 1978."
119
- }
120
- ]
121
- }
122
-
123
- const paginationEl = document.getElementById('pagination-el')
124
- if (paginationEl) {
125
- paginationEl.setAttribute("reader-settings", JSON.stringify(settings))
126
- paginationEl.setAttribute("book-content", JSON.stringify(content))
127
- }
128
- </script>
129
- <!-- <script type="module" src="./js/index.es.js"></script> -->
130
- <script type="module" src="/src/main.js"></script>
131
-
132
- </body>
133
-
134
- </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>Sumário - Paginar</title>
9
+ </head>
10
+
11
+ <body>
12
+ <style>
13
+ #app {
14
+ height: 100vh;
15
+ }
16
+
17
+ .page-break {
18
+ break-before: column;
19
+ }
20
+
21
+ .page-break span {
22
+ background-color: #eee;
23
+ padding: 5px;
24
+ font-family: monospace;
25
+ display: block;
26
+ }
27
+ </style>
28
+
29
+ <div id="app">
30
+ <!-- <paginate-content
31
+ id="pagination-el"
32
+ book-title="A Tale of Two Cities"
33
+ css-file="https://paginar-css.surge.sh/style.css"
34
+ > -->
35
+ <paginate-content
36
+ id="pagination-el"
37
+ book-title="A Tale of Two Cities"
38
+ >
39
+ <div slot="summaryTop">
40
+ <a href="/" title="Catálogo" class="w-full text-left block text-black py-2 px-3 hover:bg-gray-100 rounded mb-2">
41
+ Catálogo
42
+ </a>
43
+ <div class="my-3 border-b border-gray-100"></div>
44
+ </div>
45
+
46
+ <div slot="summaryBottom">
47
+ <div class="my-3 border-b border-gray-100"></div>
48
+ <a href="/" title="Catálogo" class="w-full text-left block text-black py-2 px-3 hover:bg-gray-100 rounded">
49
+ Referências
50
+ </a>
51
+ </div>
52
+
53
+ <div slot="header">
54
+ <img src="https://sabia.pub/images/logo-mobile-dark.svg" style="height: 40px">
55
+ </div>
56
+
57
+ <div slot="optionsTop">
58
+ <a href="/" title="Catálogo" class="w-full block text-black text-center py-2 px-3 hover:bg-gray-100 rounded mb-2">
59
+ Minha conta
60
+ </a>
61
+ <div class="my-3 border-b border-gray-100"></div>
62
+ </div>
63
+
64
+ <div slot="optionsBottom">
65
+ <div class="my-3 border-b border-gray-100"></div>
66
+ <a href="https://sabia.pub" target="_blank" title="Sobre a Editora" class="w-full block text-black text-center text-xs py-2 px-3 hover:bg-gray-100 rounded">
67
+ <img src="https://sabia.pub/images/logo.svg" style="height: 48px; margin: 0 auto; display: block;">
68
+ </a>
69
+ </div>
70
+ </paginate-content>
71
+ </div>
72
+
73
+ <script>
74
+ const settings = {
75
+ fontSize: 19, // number
76
+ fontsOptions: [
77
+ {
78
+ label: 'Times New Roman',
79
+ name: 'TimesNewRoman, Times New Roman, Times, Baskerville, Georgia,serif',
80
+ defaultTextFont: true
81
+ },
82
+ {
83
+ label: 'Inter',
84
+ name: '"Inter", sans-serif',
85
+ link: 'https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700&display=swap',
86
+ defaultBaseFont: true
87
+ },
88
+ {
89
+ label: 'Open Dyslexic',
90
+ name: '"Open-Dyslexic", sans-serif',
91
+ link: 'http://fonts.cdnfonts.com/css/open-dyslexic'
92
+ },
93
+ {
94
+ label: 'Atkinson Hyperlegible',
95
+ name: 'Atkinson Hyperlegible',
96
+ link: 'https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap'
97
+ }
98
+ ]
99
+ }
100
+
101
+ const content = {
102
+ summary: [
103
+ { title: 'Chapter 1', file: './_content/1chapter.html' },
104
+ { title: 'Chapter 2', file: './_content/2chapter.html' },
105
+ { title: 'Chapter 3', file: './_content/3chapter.html' }
106
+ ],
107
+ references: [
108
+ {
109
+ "cit": "GAMA, 2019",
110
+ "ref": "GAMA, Mara. <strong>As três rotas que trouxeram a centenária Bauhaus ao Brasil</strong>. Folha de São Paulo, São Paulo, 1 abr. 2019. Disponível em: https://www1.folha.uol.com.br/ilustrissima/2019/03/as-tres-rotas-que-trouxeram-a-centenaria-bauhaus-ao-brasil.shtml. Acesso em: 4 abr. 2019"
111
+ },
112
+ {
113
+ "cit": "LEON, 2006",
114
+ "ref": "LEON, Ethel. <strong>O Instituto de Arte Contemporânea do Museu de Arte Moderna (MAM) de São Paulo dos anos 1950</strong>. São Paulo, 2006."
115
+ },
116
+ {
117
+ "cit": "LUGONES, 1978",
118
+ "ref": "LUGONES, Maria. <strong>Colonialidad y género</strong>. Tábula Rasa, Bogotá, Colômbia, n. 9, p. 73-101, julho-dezembro de 1978."
119
+ }
120
+ ]
121
+ }
122
+
123
+ const paginationEl = document.getElementById('pagination-el')
124
+ if (paginationEl) {
125
+ paginationEl.setAttribute("reader-settings", JSON.stringify(settings))
126
+ paginationEl.setAttribute("book-content", JSON.stringify(content))
127
+ }
128
+ </script>
129
+ <!-- <script type="module" src="./js/index.es.js"></script> -->
130
+ <script type="module" src="/src/main.js"></script>
131
+
132
+ </body>
133
+
134
+ </html>