@quasar/quasar-app-extension-qpdfviewer
Advanced tools
Comparing version 1.0.0-beta.8 to 2.0.0-alpha.1
| { | ||
| "name": "@quasar/quasar-app-extension-qpdfviewer", | ||
| "version": "1.0.0-beta.8", | ||
| "version": "2.0.0-alpha.1", | ||
| "description": "QPdfviewer is an app extension for viewing PDF files", | ||
@@ -35,11 +35,3 @@ "author": "Jeff Galbraith <jeff@quasar.dev>", | ||
| "viewer" | ||
| ], | ||
| "devDependencies": { | ||
| "@vue/eslint-config-standard": "^5.1.2", | ||
| "babel-eslint": "^10.1.0", | ||
| "eslint": "^7.2.0", | ||
| "eslint-loader": "^4.0.2", | ||
| "eslint-plugin-vue": "^6.2.2" | ||
| }, | ||
| "dependencies": {} | ||
| ] | ||
| } |
| QPdfViewer (@quasar/qpdfviewer) | ||
| === | ||
|  | ||
|  | ||
|  | ||
| []() | ||
@@ -20,3 +19,3 @@ []() | ||
| ``` | ||
| quasar ext add @quasar/qpdfviewer | ||
| quasar ext add @quasar/qpdfviewer@next | ||
| ``` | ||
@@ -27,3 +26,3 @@ | ||
| ``` | ||
| quasar ext remove @quasar/qpdfviewer | ||
| quasar ext remove @quasar/qpdfviewer@next | ||
| ``` | ||
@@ -37,10 +36,10 @@ | ||
| # Demo | ||
| Can be found [here](https://quasarframework.github.io/app-extension-qpdfviewer) | ||
| # Docs and Demo | ||
| Can be found [here](https://qpdfviewer.netlify.app/) | ||
| # Example Code | ||
| Be sure to check out the Test Project for more examples. | ||
| ```html | ||
| <q-pdfviewer | ||
| v-model="show" | ||
| src="'https://www.ets.org/Media/Tests/GRE/pdf/gre_research_validity_data.pdf'" | ||
@@ -56,3 +55,2 @@ type="pdfjs" | ||
| <q-pdfviewer | ||
| v-model="show" | ||
| :src="src" | ||
@@ -71,8 +69,2 @@ type="html5" | ||
| src: String | ||
| }, | ||
| data () { | ||
| return { | ||
| show: true | ||
| } | ||
| } | ||
@@ -96,20 +88,23 @@ } | ||
| Using blob data (for `type="html5"` only): | ||
| ```js | ||
| fetchPDF (payload) { | ||
| this.$axios.post('/my/url/to/pdf', payload, { responseType: 'blob' }).then(res => { | ||
| // create the blob | ||
| const blob = new Blob([res.data], { type: res.data.type }) | ||
| // set reactive variable | ||
| pdfSrc = window.URL.createObjectURL(blob) | ||
| }).catch(err => { | ||
| this.$q.notify({ | ||
| message: 'Error downloading PDF', | ||
| type: 'negative', | ||
| textColor: 'white', | ||
| color: 'negative', | ||
| icon: 'error', | ||
| closeBtn: 'close', | ||
| position: 'top' | ||
| axios.post('/my/url/to/pdf', payload, { responseType: 'blob' }) | ||
| .then(res => { | ||
| // create the blob | ||
| const blob = new Blob([res.data], { type: res.data.type }) | ||
| // set reactive variable | ||
| pdfSrc = window.URL.createObjectURL(blob) | ||
| }) | ||
| }) | ||
| .catch(err => { | ||
| $q.notify({ | ||
| message: 'Error downloading PDF', | ||
| type: 'negative', | ||
| textColor: 'white', | ||
| color: 'negative', | ||
| icon: 'error', | ||
| closeBtn: 'close', | ||
| position: 'top' | ||
| }) | ||
| }) | ||
| } | ||
@@ -120,3 +115,3 @@ ``` | ||
| NOTE: | ||
| QPdfviewer now has support for native HTML5 PDF viewer and for PDFJS. Use `type="html5"` or `type="pdfjs"`. If you previously has this app extension, and want to use the pdfjs, you will need to re-install it. An update will not get the PDFJS for you. If you update, you can run `quasar ext invoke @quasar/qpdfviewer` instead of re-installing. | ||
| QPdfviewer now has support for native HTML5 PDF viewer and for PDFJS. Use `type="html5"` or `type="pdfjs"`. If you previously had this app extension, and want to use the pdfjs, you will need to re-install it. An update will not get the PDFJS for you. If you update, you can run `quasar ext invoke @quasar/qpdfviewer` instead of re-installing. | ||
@@ -138,3 +133,2 @@ --- | ||
| |---|---|---| | ||
| | value | Boolean | Use v-model to toggle visiblity | | ||
| | src | String | Path to the PDF source | | ||
@@ -141,0 +135,0 @@ | type | String | PDF engine to use (values: `html5` or `pdfjs`) | |
@@ -1,5 +0,5 @@ | ||
| import QPdfviewer from '@quasar/quasar-app-extension-qpdfviewer/src/component/QPdfviewer' | ||
| import QPdfviewer from '@quasar/quasar-app-extension-qpdfviewer/src/component/async.js' | ||
| export default ({ Vue }) => { | ||
| Vue.component('q-pdfviewer', QPdfviewer) | ||
| export default ({ app }) => { | ||
| app.component('q-pdfviewer', QPdfviewer) | ||
| } |
@@ -1,104 +0,122 @@ | ||
| import Vue from 'vue' | ||
| import ModelToggleMixin from 'quasar/src/mixins/model-toggle.js' | ||
| /** | ||
| * Vue 3/Quasar 2 compatible QPdfviewer implementation. | ||
| * | ||
| * See the link below for main changes related to: | ||
| * - Render function arguments | ||
| * - Render function signature change | ||
| * - Props format change | ||
| * | ||
| * https://v3.vuejs.org/guide/migration/render-function-api.html#render-function-argument | ||
| */ | ||
| export default Vue.extend({ | ||
| name: 'QPdfviewer', | ||
| import { defineComponent, h } from "vue" | ||
| import { useQuasar } from "quasar" | ||
| mixins: [ ModelToggleMixin ], | ||
| export default defineComponent({ | ||
| name: "QPdfviewer", | ||
| props: { | ||
| src: String, | ||
| type: { | ||
| type: String, | ||
| default: 'html5', | ||
| validator: v => ['html5', 'pdfjs'].indexOf(v) !== -1 | ||
| }, | ||
| errorString: { | ||
| type: String, | ||
| default: 'This browser does not support PDFs. Download the PDF to view it:' | ||
| }, | ||
| contentStyle: [String, Object, Array], | ||
| contentClass: [String, Object, Array], | ||
| innerContentStyle: [String, Object, Array], | ||
| innerContentClass: [String, Object, Array] | ||
| }, | ||
| props: { | ||
| src: String, | ||
| type: { | ||
| type: String, | ||
| default: "html5", | ||
| validator: (v) => ["html5", "pdfjs"].indexOf(v) !== -1, | ||
| }, | ||
| errorString: { | ||
| type: String, | ||
| default: | ||
| "This browser does not support PDFs. Download the PDF to view it:", | ||
| }, | ||
| contentStyle: [String, Object, Array], | ||
| contentClass: [String, Object, Array], | ||
| innerContentStyle: [String, Object, Array], | ||
| innerContentClass: [String, Object, Array], | ||
| }, | ||
| data () { | ||
| return { | ||
| hashId: 'q-pdfviewer-' + Math.random().toString(36).substr(2, 9) | ||
| } | ||
| }, | ||
| emits: [ | ||
| ], | ||
| methods: { | ||
| __renderObject (h) { | ||
| return h('object', { | ||
| class: this.innerContentClass, | ||
| style: this.innerContentStyle, | ||
| attrs: { | ||
| id: this.hashId, | ||
| data: this.src, | ||
| type: 'application/pdf', | ||
| width: '100%', | ||
| height: '100%' | ||
| }, | ||
| on: { | ||
| ...this.$listeners | ||
| } | ||
| }, [ | ||
| // browser object not supported, try iframe | ||
| this.__renderIFrame(h) | ||
| ]) | ||
| }, | ||
| data() { | ||
| return { | ||
| hashId: "q-pdfviewer-" + Math.random().toString(36).substr(2, 9) | ||
| } | ||
| }, | ||
| __renderIFrame (h) { | ||
| return h('iframe', { | ||
| staticClass: 'q-pdfviewer__iframe', | ||
| attrs: { | ||
| src: this.src, | ||
| width: '100%', | ||
| height: '100%' | ||
| } | ||
| }, [ | ||
| // iframe not supported either, give user a link to download | ||
| this.__renderText(h) | ||
| ]) | ||
| }, | ||
| // Use discrete render fnction | ||
| render(prop) { | ||
| const $q = useQuasar() | ||
| __renderIFramePDFJS (h) { | ||
| return h('iframe', { | ||
| staticClass: 'q-pdfviewer__iframe', | ||
| attrs: { | ||
| src: 'pdfjs/web/viewer.html?file=' + this.src | ||
| } | ||
| }, [ | ||
| // iframe not supported either, give user a link to download | ||
| this.__renderText(h) | ||
| ]) | ||
| }, | ||
| function __renderObject () { | ||
| return h('object', { | ||
| // Change to new format style for Vue3 | ||
| class: [prop.innerContentClass], | ||
| style: [prop.innerContentStyle], | ||
| id: prop.hashId, | ||
| data: prop.src, | ||
| type: 'application/pdf', | ||
| width: '100%', | ||
| height: '100%' | ||
| }, [ | ||
| // browser object not supported, try iframe | ||
| __renderIFrame() | ||
| ]) | ||
| } | ||
| __renderText (h) { | ||
| // TODO: ???? | ||
| return h('p', 'This browser does not support PDFs. Download the PDF to view it:', [ | ||
| h('a', { | ||
| attrs: { | ||
| href: this.src, | ||
| target: '_blank' | ||
| } | ||
| }) | ||
| ]) | ||
| } | ||
| }, | ||
| function __renderIFrame () { | ||
| return h('iframe', { | ||
| // Change to new format style for Vue3 | ||
| class: ['q-pdfviewer__iframe'], | ||
| src: prop.src, | ||
| width: '100%', | ||
| height: '100%' | ||
| }, [ | ||
| // iframe not supported either, give user a link to download | ||
| __renderText() | ||
| ]) | ||
| } | ||
| render (h) { | ||
| if (this.value === true && this.src !== void 0 && this.src.length > 0) { | ||
| return h('div', { | ||
| staticClass: 'q-pdfviewer', | ||
| class: this.contentClass, | ||
| style: this.contentStyle | ||
| }, [ | ||
| this.$q.platform.is.electron || this.type === 'pdfjs' ? this.__renderIFramePDFJS(h) : this.__renderObject(h) | ||
| ]) | ||
| } | ||
| return '' | ||
| } | ||
| }) | ||
| function __renderIFramePDFJS () { | ||
| return h('iframe', { | ||
| // Change to new format style for Vue3 | ||
| class: ['q-pdfviewer__iframe'], | ||
| src: '/pdfjs/web/viewer.html?file=' + encodeURIComponent(prop.src), | ||
| width: '100%', | ||
| height: '100%' | ||
| }, [ | ||
| // iframe not supported either, give user a link to download | ||
| __renderText() | ||
| ]) | ||
| } | ||
| function __renderText () { | ||
| // Render a link to the PDF | ||
| return h('a', { | ||
| // Change to new format style for Vue3 | ||
| href: prop.src, | ||
| target: '_blank' | ||
| }) | ||
| } | ||
| if (prop.src !== void 0 && prop.src.length > 0) { | ||
| return h( | ||
| "div", | ||
| { | ||
| // Change to new format style for Vue3 | ||
| class: ["q-pdfviewer", prop.contentClass], | ||
| style: [prop.contentStyle], | ||
| }, | ||
| [ | ||
| $q.platform.is.electron || prop.type === "pdfjs" | ||
| ? __renderIFramePDFJS(h) | ||
| : __renderObject(h), | ||
| ] | ||
| ); | ||
| } | ||
| return ""; | ||
| }, | ||
| setup() { | ||
| return { | ||
| } | ||
| } | ||
| }) |
| { | ||
| "type": "component", | ||
| "props": { | ||
| "value": { | ||
| "type": "Boolean", | ||
| "category": "behavior", | ||
| "desc": "Use v-model to control visible state" | ||
| }, | ||
| "src": { | ||
| "type": "String", | ||
| "category": "model", | ||
| "required": "true", | ||
| "desc": "Source path to the PDF", | ||
@@ -24,3 +21,4 @@ "examples": [ | ||
| "examples": [ | ||
| "type=\"html5\"" | ||
| "type=\"html5\"", | ||
| "type=\"pdfjs\"" | ||
| ] | ||
@@ -27,0 +25,0 @@ }, |
@@ -7,2 +7,10 @@ /** | ||
| */ | ||
| function extendWebpack (cfg, { isClient, isServer }, api) { | ||
| cfg.module.rules.push({ | ||
| test: /\.worker\.js$/, | ||
| use: { | ||
| loader: 'worker-loader' | ||
| } | ||
| }) | ||
| } | ||
@@ -24,3 +32,3 @@ const extendConf = function (conf) { | ||
| // quasar compatibility check | ||
| api.compatibleWith('@quasar/app', '^1.0.0 || ^2.0.0') | ||
| api.compatibleWith('quasar', '^2.0.0') | ||
@@ -32,2 +40,5 @@ // register JSON api | ||
| api.extendQuasarConf(extendConf) | ||
| // extend webpack config | ||
| api.extendWebpack(extendWebpack) | ||
| } |
Fixed alerts
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
10466855
- Dev dependency count
- decreased by-100%
0
- Lines of code
- increased by0.03%
81947
- Number of medium supply chain risk alerts
- decreased by-7.69%
12
Worsened metrics
- Number of lines in readme file
- decreased by-4.11%
140
No dependency changes