Initial code

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

.eslintrc.js

@@ -0,0 +1,55 @@
+module.exports = {
+  root: true,
+
+  parserOptions: {
+    parser: 'babel-eslint',
+    sourceType: 'module'
+  },
+
+  env: {
+    browser: true
+  },
+
+  extends: [
+    // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
+    // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
+    'plugin:vue/essential',
+    '@vue/standard'
+  ],
+
+  // required to lint *.vue files
+  plugins: [
+    'vue'
+  ],
+
+  globals: {
+    'ga': true, // Google Analytics
+    'cordova': true,
+    '__statics': true,
+    'process': true
+  },
+
+  // add your custom rules here
+  rules: {
+    // allow async-await
+    'generator-star-spacing': 'off',
+    // allow paren-less arrow functions
+    'arrow-parens': 'off',
+    'one-var': 'off',
+
+    'import/first': 'off',
+    'import/named': 'error',
+    'import/namespace': 'error',
+    'import/default': 'error',
+    'import/export': 'error',
+    'import/extensions': 'off',
+    'import/no-unresolved': 'off',
+    'import/no-extraneous-dependencies': 'off',
+    'prefer-promise-reject-errors': 'off',
+
+    // allow console.log during development only
+    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    // allow debugger during development only
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
+  }
+}

.gitignore

@@ -0,0 +1,61 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# next.js build output
+.next

README.md

@@ -0,0 +1,105 @@
+QPdfViewer (@quasar/qpdfviewer)
+===
+
+![official icon](https://img.shields.io/badge/Quasar%201.0-Official%20UI%20App%20Extension-blue.svg)
+![npm (scoped)](https://img.shields.io/npm/v/@quasar/quasar-app-extension-qpdfviewer.svg?style=plastic)
+[![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/quasarframework/app-extension-qpdfviewer.svg)]()
+[![GitHub repo size in bytes](https://img.shields.io/github/repo-size/quasarframework/app-extension-qpdfviewer.svg)]()
+[![npm](https://img.shields.io/npm/dt/@quasar/quasar-app-extension-qpdfviewer.svg)](https://www.npmjs.com/package/@quasar/quasar-app-extension-qpdfviewer)
+
+QPdfViewer is an `UI App Extension` for [Quasar Framework v1](https://v1.quasar-framework.org/). It will not work with legacy versions of Quasar Framework.
+
+This work is currently in `beta` and there are expected changes while things get worked out. Your help with testing is greatly appreciated.
+
+# Info
+QPdfViewer allows you to have markdown in your web pages. You can either use the standard default slot or use the property `src` to define your markdown.
+
+# Install
+To add this App Extension to your Quasar application, run the following (in your Quasar app folder):
+```
+quasar ext add @quasar/qpdfviewer
+```
+
+# Uninstall
+To remove this App Extension from your Quasar application, run the following (in your Quasar app folder):
+```
+quasar ext remove @quasar/qpdfviewer
+```
+
+# Describe
+You can use `quasar describe QPdfViewer`
+
+# Test Project
+Can be found [here](https://github.com/hawkeye64/quasar-app-extension-qpdfviewer).
+
+# Demo
+Can be found [here](https://qpdfviewer.netlify.com/#/).
+
+# Example Code
+Be sure to check out the Test Project for more examples.
+```
+<q-pdfviewer
+  v-model="show"
+  src="'https://www.ets.org/Media/Tests/GRE/pdf/gre_research_validity_data.pdf'"
+  content-class="absolute"
+/>
+
+or
+
+<template>
+  <div class="container q-pa-lg">
+    <q-pdfviewer
+      v-model="show"
+      :src="src"
+      content-class="fit container"
+      inner-content-class="fit container"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Container',
+  props: {
+    src: String
+  },
+
+  data () {
+    return {
+      show: true
+    }
+  }
+}
+</script>
+
+<style>
+.container {
+  max-width: 50%;
+  max-height: 70%;
+  min-width: 400px;
+  min-height: 600px;
+  width: 100%;
+  height: 100%;
+}
+</style>
+
+```
+
+---
+NOTE:
+  QPdfviewer uses the `<object>` tag for displaying the PDF. Should the browser not support this, the fallback is to use an `<iframe>`. And, should this also not be supported by the browser, then some text will be displayed with a link to the PDF so the user can download it for off-line viewing.
+
+---
+
+# QPdfviewer Vue Properties
+| Vue&nbsp;Property | Type	| Description |
+|---|---|---|
+| value | Boolean | Use v-model to toggle visiblity |
+| src | String | Path to the PDF source |
+| error-string | String | Set this if you wish to change from the default error string |
+| content-class | [String, Object, Array] | Style definitions to be attributed to the PDF container |
+| content-style | [String, Object, Array] | Style definitions to be attributed to the PDF container |
+| inner-content-class | [String, Object, Array] | Style definitions to be attributed to the PDF object |
+| inner-content-style | [String, Object, Array] | Style definitions to be attributed to the PDF object |
+
+QPdfViewer has no events or slots.

package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@quasar/quasar-app-extension-qpdfviewer",
+  "version": "1.0.0-alpha.1",
+  "description": "QPdfviewer is an app extension for viewing PDF files",
+  "author": "Hawkeye64 <[email protected]>",
+  "main": "src/index.js",
+  "scripts": {
+    "lint": "eslint --ext .js,.vue src",
+    "lint-fix": "eslint --ext .js,.vue src --fix",
+    "test": "echo \"No test specified\" && exit 0"
+  },
+  "engines": {
+    "node": ">= 8.9.0",
+    "npm": ">= 5.6.0",
+    "yarn": ">= 1.6.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "bugs": "https://github.com/quasarframework/app-extension-qpdfviewer/issues",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/quasarframework/app-extension-qpdfviewer.git"
+  },
+  "homepage": "https://github.com/quasarframework/app-extension-qpdfviewer",
+  "license": "MIT",
+  "keywords": [
+    "quasar",
+    "app",
+    "app extension",
+    "extension",
+    "pdf",
+    "viewer"
+  ],
+  "devDependencies": {
+    "@vue/eslint-config-standard": "^4.0.0",
+    "babel-eslint": "^10.0.1",
+    "eslint": "^5.15.3",
+    "eslint-loader": "^2.1.2",
+    "eslint-plugin-vue": "^5.2.2"
+  }
+}

src/boot/qpdfviewer.js

@@ -0,0 +1,5 @@
+import QPdfviewer from '@quasar/quasar-app-extension-qpdfviewer/src/component/QPdfviewer'
+
+export default async ({ Vue }) => {
+  Vue.component('q-pdfviewer', QPdfviewer)
+}

src/component/QPdfviewer.js

@@ -0,0 +1,105 @@
+import Vue from 'vue'
+// import slot from 'quasar/src/utils/slot.js'
+import ModelToggleMixin from 'quasar/src/mixins/model-toggle.js'
+
+export default Vue.extend({
+  name: 'QPdfviewer',
+
+  mixins: [ ModelToggleMixin ],
+
+  props: {
+    src: String,
+    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: ''
+    }
+  },
+
+  created () {
+    this.hashId = this.__generateId()
+  },
+
+  methods: {
+    __generateId () {
+      return 'q-pdfviewer-' + Math.random().toString(36).substr(2, 9)
+    },
+    __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%'
+        },
+        nativeOn: {
+          onerror: this.__onError,
+          onload: this.__onLoad
+        }
+      }, [
+        // browser object not supported, try iframe
+        this.__renderIFrame(h)
+      ])
+    },
+
+    __renderIFrame (h) {
+      return h('iframe', {
+        style: {
+          border: 'none'
+        },
+        attrs: {
+          src: this.src,
+          width: '100%',
+          height: '100%'
+        }
+      }, [
+        // iframe not supported either, give user a link to download
+        this.__renderText(h)
+      ])
+    },
+
+    __renderText (h) {
+      return h('p', 'This browser does not support PDFs. Download the PDF to view it:', [
+        this.__renderLink(h)
+      ])
+    },
+
+    __renderLink (h) {
+      return h('a', {
+        attrs: {
+          href: this.src,
+          target: '_blank'
+        }
+      })
+    }
+  },
+
+  render (h) {
+    // don't display
+    if (!this.value) {
+      return null
+    }
+    if (this.src === void 0 || this.src.length === 0) {
+      return null
+    }
+    return h('div', {
+      staticClass: 'q-pdfviewer',
+      class: this.contentClass,
+      style: this.contentStyle
+    }, [
+      this.__renderObject(h)
+    ])
+  }
+})