vue-pdfiy 0.0.2 → 0.0.4
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.
- package/.vitepress/config.ts +39 -28
- package/docs/assets/logo.webp +0 -0
- package/package.json +1 -1
- package/src/App.vue +1 -120
- package/.prettierrc.json +0 -6
- package/api-examples.md +0 -49
- package/docs/assets/logo.svg +0 -9
- package/plan.md +0 -279
- package/src/assets/base.css +0 -0
- package/src/components/TheWelcome.vue +0 -95
- package/src/components/WelcomeItem.vue +0 -87
- package/src/components/__tests__/HelloWorld.spec.ts +0 -7
- package/src/examples/tableBuilderExample.ts +0 -405
package/.vitepress/config.ts
CHANGED
|
@@ -1,63 +1,74 @@
|
|
|
1
|
-
import { fileURLToPath, URL } from
|
|
2
|
-
import { defineConfig } from
|
|
1
|
+
import { fileURLToPath, URL } from "node:url";
|
|
2
|
+
import { defineConfig } from "vitepress";
|
|
3
3
|
|
|
4
4
|
// https://vitepress.dev/reference/site-config
|
|
5
5
|
export default defineConfig({
|
|
6
|
-
srcDir:
|
|
7
|
-
title:
|
|
8
|
-
description:
|
|
9
|
-
base:
|
|
6
|
+
srcDir: "docs",
|
|
7
|
+
title: "vue-pdfiy",
|
|
8
|
+
description: "vue-pdf-render-maker",
|
|
9
|
+
base: "/vue-pdfiy/",
|
|
10
10
|
vite: {
|
|
11
11
|
resolve: {
|
|
12
12
|
alias: {
|
|
13
|
-
|
|
14
|
-
|
|
13
|
+
"@": fileURLToPath(new URL("../src", import.meta.url)),
|
|
14
|
+
"~": fileURLToPath(new URL("../public", import.meta.url)),
|
|
15
15
|
},
|
|
16
16
|
},
|
|
17
17
|
},
|
|
18
|
-
head: [[
|
|
18
|
+
head: [["link", { rel: "icon", href: "/favicon.ico" }]],
|
|
19
19
|
themeConfig: {
|
|
20
|
-
logo:
|
|
20
|
+
logo: "/assets/logo.webp",
|
|
21
21
|
search: {
|
|
22
|
-
provider:
|
|
22
|
+
provider: "local",
|
|
23
23
|
},
|
|
24
24
|
|
|
25
25
|
// https://vitepress.dev/reference/default-theme-config
|
|
26
26
|
nav: [
|
|
27
|
-
{ text:
|
|
28
|
-
{ text:
|
|
27
|
+
{ text: "Home", link: "/" },
|
|
28
|
+
{ text: "Examples", link: "/examples" },
|
|
29
29
|
],
|
|
30
30
|
|
|
31
31
|
sidebar: [
|
|
32
32
|
{
|
|
33
|
-
text:
|
|
33
|
+
text: "Guide",
|
|
34
34
|
items: [
|
|
35
|
-
{ text:
|
|
36
|
-
{ text:
|
|
35
|
+
{ text: "Introduction", link: "/guide/introduction" },
|
|
36
|
+
{ text: "Quick Start", link: "/guide/quick-start" },
|
|
37
37
|
// { text: 'Markdown Examples', link: '/markdown-examples' },
|
|
38
38
|
],
|
|
39
39
|
},
|
|
40
40
|
{
|
|
41
|
-
text:
|
|
41
|
+
text: "Plugins",
|
|
42
42
|
items: [
|
|
43
43
|
// { text: 'AutoTable', link: '/plugins/auto-table' },
|
|
44
|
-
{ text:
|
|
45
|
-
{
|
|
46
|
-
|
|
47
|
-
|
|
44
|
+
{ text: "Table Builder", link: "/plugins/table-builder" },
|
|
45
|
+
{
|
|
46
|
+
text: "Table Builder API Reference",
|
|
47
|
+
link: "/plugins/table-builder-api-refrences",
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
text: "Table Builder Events",
|
|
51
|
+
link: "/plugins/table-builder-hooks",
|
|
52
|
+
},
|
|
53
|
+
{ text: "VFS", link: "/plugins/vfs" },
|
|
48
54
|
],
|
|
49
55
|
},
|
|
50
56
|
{
|
|
51
|
-
text:
|
|
57
|
+
text: "Utils",
|
|
52
58
|
items: [
|
|
53
|
-
{ text:
|
|
54
|
-
{ text:
|
|
55
|
-
{
|
|
56
|
-
|
|
59
|
+
{ text: "containsArabic", link: "/utils/is-arabic-text" },
|
|
60
|
+
{ text: "textSplitter", link: "/utils/text-splitter" },
|
|
61
|
+
{
|
|
62
|
+
text: "arrayBufferToBase64",
|
|
63
|
+
link: "/utils/array-buffer-to-base64",
|
|
64
|
+
},
|
|
65
|
+
{ text: "LoadCustomFont", link: "/utils/load-custom-font" },
|
|
57
66
|
],
|
|
58
67
|
},
|
|
59
68
|
],
|
|
60
69
|
|
|
61
|
-
socialLinks: [
|
|
70
|
+
socialLinks: [
|
|
71
|
+
{ icon: "github", link: "https://github.com/zetaxalhaffar/vue-pdfiy" },
|
|
72
|
+
],
|
|
62
73
|
},
|
|
63
|
-
})
|
|
74
|
+
});
|
|
Binary file
|
package/package.json
CHANGED
package/src/App.vue
CHANGED
|
@@ -1,122 +1,3 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div
|
|
3
|
-
<svg
|
|
4
|
-
id="svg-example"
|
|
5
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
6
|
-
width="24"
|
|
7
|
-
height="24"
|
|
8
|
-
viewBox="0 0 24 24"
|
|
9
|
-
fill="#B00FFF"
|
|
10
|
-
stroke="#FF00FF"
|
|
11
|
-
stroke-width="2"
|
|
12
|
-
stroke-linecap="round"
|
|
13
|
-
stroke-linejoin="round"
|
|
14
|
-
>
|
|
15
|
-
<path d="M12 2L2 22h20z"></path>
|
|
16
|
-
</svg>
|
|
17
|
-
<div class="flex gap-4 mb-4">
|
|
18
|
-
<button class="button-style" @click="saveAutoTable">Save Auto Table</button>
|
|
19
|
-
<button class="button-style" @click="renderAutoTable">Render Auto Table</button>
|
|
20
|
-
</div>
|
|
21
|
-
<div v-if="pdfUrl" class="pdf-style">
|
|
22
|
-
<VuePDF :pdf="pdf" v-if="pdfUrl" :page="page" />
|
|
23
|
-
</div>
|
|
24
|
-
</div>
|
|
25
|
-
|
|
26
|
-
<div class="flex gap-4" style="flex-wrap: wrap">
|
|
27
|
-
<button class="button-style" @click="testExample1">Test Ex 1</button>
|
|
28
|
-
<button class="button-style" @click="testExample2">Test Ex 2</button>
|
|
29
|
-
<button class="button-style" @click="testExample3">Test Ex 3</button>
|
|
30
|
-
<button class="button-style" @click="testExample4">Test Ex 4</button>
|
|
31
|
-
<button class="button-style" @click="testExample5">Test Ex 5</button>
|
|
32
|
-
<button class="button-style" @click="testExample6">Test Ex 6</button>
|
|
33
|
-
<button class="button-style" @click="testExample7">Test Ex 7</button>
|
|
34
|
-
<button class="button-style" @click="testExample8">Test Ex 8</button>
|
|
35
|
-
<button class="button-style" @click="testExample9">Test Ex 9</button>
|
|
36
|
-
<button class="button-style" @click="testExample10">Test Ex 10</button>
|
|
37
|
-
<button class="button-style" @click="testExample10">Run All Examples</button>
|
|
38
|
-
<button class="button-style" @click="testExample11">Run All Examples</button>
|
|
39
|
-
</div>
|
|
2
|
+
<div></div>
|
|
40
3
|
</template>
|
|
41
|
-
|
|
42
|
-
<script lang="ts" setup>
|
|
43
|
-
import { useJsPdf } from '@/composables'
|
|
44
|
-
import { VuePDF, usePDF, type PDFSrc } from '@tato30/vue-pdf'
|
|
45
|
-
import { ref } from 'vue'
|
|
46
|
-
import {
|
|
47
|
-
example10_ResetAndRebuild,
|
|
48
|
-
example1_SimpleTable,
|
|
49
|
-
example2_StyledTable,
|
|
50
|
-
example3_DynamicTable,
|
|
51
|
-
example4_TableFromObjects,
|
|
52
|
-
example5_MultiPageReport,
|
|
53
|
-
example6_ColumnStyling,
|
|
54
|
-
example7_ReusingBuilder,
|
|
55
|
-
example8_Invoice,
|
|
56
|
-
example9_GetContent,
|
|
57
|
-
runAllExamples,
|
|
58
|
-
} from './examples/tableBuilderExample'
|
|
59
|
-
const { pdf: pdfJsPdf, outputAsArrayBuffer, createTable } = useJsPdf({})
|
|
60
|
-
|
|
61
|
-
const pdfUrl = ref<PDFSrc | ArrayBuffer | null>(null)
|
|
62
|
-
const page = ref(1)
|
|
63
|
-
const { pdf } = usePDF(pdfUrl as PDFSrc)
|
|
64
|
-
|
|
65
|
-
const saveAutoTable = () => {
|
|
66
|
-
pdfJsPdf.save('auto-table.pdf')
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
const renderAutoTable = () => {
|
|
70
|
-
createTable({
|
|
71
|
-
body: [[{ content: 'Hello' }, { content: 'World' }]],
|
|
72
|
-
})
|
|
73
|
-
const arrayBuffer = outputAsArrayBuffer()
|
|
74
|
-
pdfUrl.value = arrayBuffer
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
const testExample1 = () => {
|
|
78
|
-
example1_SimpleTable()
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
const testExample2 = () => {
|
|
82
|
-
example2_StyledTable()
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
const testExample3 = () => {
|
|
86
|
-
example3_DynamicTable()
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
const testExample4 = () => {
|
|
90
|
-
example4_TableFromObjects()
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
const testExample5 = () => {
|
|
94
|
-
example5_MultiPageReport()
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
const testExample6 = () => {
|
|
98
|
-
example6_ColumnStyling()
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
const testExample7 = () => {
|
|
102
|
-
example7_ReusingBuilder()
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
const testExample8 = () => {
|
|
106
|
-
example8_Invoice()
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
const testExample9 = () => {
|
|
110
|
-
example9_GetContent()
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
const testExample10 = () => {
|
|
114
|
-
example10_ResetAndRebuild()
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
const testExample11 = () => {
|
|
118
|
-
runAllExamples()
|
|
119
|
-
}
|
|
120
|
-
</script>
|
|
121
|
-
|
|
122
|
-
<style></style>
|
package/.prettierrc.json
DELETED
package/api-examples.md
DELETED
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
outline: deep
|
|
3
|
-
---
|
|
4
|
-
|
|
5
|
-
# Runtime API Examples
|
|
6
|
-
|
|
7
|
-
This page demonstrates usage of some of the runtime APIs provided by VitePress.
|
|
8
|
-
|
|
9
|
-
The main `useData()` API can be used to access site, theme, and page data for the current page. It works in both `.md` and `.vue` files:
|
|
10
|
-
|
|
11
|
-
```md
|
|
12
|
-
<script setup>
|
|
13
|
-
import { useData } from 'vitepress'
|
|
14
|
-
|
|
15
|
-
const { theme, page, frontmatter } = useData()
|
|
16
|
-
</script>
|
|
17
|
-
|
|
18
|
-
## Results
|
|
19
|
-
|
|
20
|
-
### Theme Data
|
|
21
|
-
<pre>{{ theme }}</pre>
|
|
22
|
-
|
|
23
|
-
### Page Data
|
|
24
|
-
<pre>{{ page }}</pre>
|
|
25
|
-
|
|
26
|
-
### Page Frontmatter
|
|
27
|
-
<pre>{{ frontmatter }}</pre>
|
|
28
|
-
```
|
|
29
|
-
|
|
30
|
-
<script setup>
|
|
31
|
-
import { useData } from 'vitepress'
|
|
32
|
-
|
|
33
|
-
const { site, theme, page, frontmatter } = useData()
|
|
34
|
-
</script>
|
|
35
|
-
|
|
36
|
-
## Results
|
|
37
|
-
|
|
38
|
-
### Theme Data
|
|
39
|
-
<pre>{{ theme }}</pre>
|
|
40
|
-
|
|
41
|
-
### Page Data
|
|
42
|
-
<pre>{{ page }}</pre>
|
|
43
|
-
|
|
44
|
-
### Page Frontmatter
|
|
45
|
-
<pre>{{ frontmatter }}</pre>
|
|
46
|
-
|
|
47
|
-
## More
|
|
48
|
-
|
|
49
|
-
Check out the documentation for the [full list of runtime APIs](https://vitepress.dev/reference/runtime-api#usedata).
|