├── .editorconfig ├── .eslintignore ├── .eslintrc.js ├── .gitignore ├── .npmignore ├── LICENSE ├── README.md ├── _redirects ├── demo ├── .editorconfig ├── .eslintignore ├── .eslintrc.js ├── .gitignore ├── .postcssrc.js ├── .stylintrc ├── README.md ├── babel.config.js ├── package.json ├── quasar.conf.js ├── quasar.extensions.json └── src │ ├── 404.html │ ├── App.vue │ ├── assets │ ├── page-utils.js │ ├── quasar-logo-full.svg │ └── sad.svg │ ├── boot │ └── .gitkeep │ ├── components │ ├── EssentialLinks.vue │ ├── ExampleCard.vue │ ├── ExampleTitle.vue │ └── Hero.vue │ ├── css │ ├── app.styl │ └── quasar.variables.styl │ ├── examples │ ├── Animated.vue │ ├── Avatar.vue │ ├── Basic.vue │ ├── Colors.vue │ ├── Image.vue │ ├── ImageSize.vue │ ├── LineSizes.vue │ ├── Random.vue │ ├── Rows.vue │ ├── Title.vue │ └── TitleWidthHeight.vue │ ├── index.template.html │ ├── layouts │ ├── MainLayout.vue │ └── MyLayout.vue │ ├── markdown │ └── placeholder.md │ ├── pages │ ├── Error404.vue │ ├── Examples.vue │ └── Index.vue │ ├── router │ ├── index.js │ └── routes.js │ ├── statics │ ├── app-logo-128x128.png │ ├── icons │ │ ├── apple-icon-120x120.png │ │ ├── apple-icon-152x152.png │ │ ├── apple-icon-167x167.png │ │ ├── apple-icon-180x180.png │ │ ├── favicon-16x16.png │ │ ├── favicon-32x32.png │ │ ├── favicon-96x96.png │ │ ├── favicon.ico │ │ ├── icon-128x128.png │ │ ├── icon-192x192.png │ │ ├── icon-256x256.png │ │ ├── icon-384x384.png │ │ ├── icon-512x512.png │ │ ├── ms-icon-144x144.png │ │ └── safari-pinned-tab.svg │ ├── qplaceholder.png │ └── qplaceholder2.png │ └── store │ ├── common │ ├── actions.js │ ├── getters.js │ ├── index.js │ ├── mutations.js │ └── state.js │ └── index.js ├── docs ├── 404.html ├── _redirects ├── css │ ├── 4.8927fd4c.css │ └── app.38aeaa3a.css ├── fonts │ ├── KFOkCnqEu92Fr1MmgVxIIzQ.a45108d3.woff │ ├── KFOlCnqEu92Fr1MmEU9fBBc-.cea99d3e.woff │ ├── KFOlCnqEu92Fr1MmSU5fBBc-.865f928c.woff │ ├── KFOlCnqEu92Fr1MmWUlfBBc-.2267169e.woff │ ├── KFOlCnqEu92Fr1MmYUtfBBc-.bac8362e.woff │ ├── KFOmCnqEu92Fr1Mu4mxM.49ae34d4.woff │ ├── flUhRq6tzZclQEJ-Vdg-IuiaDsNa.2d36eb59.woff │ └── flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.492281ee.woff2 ├── index.html ├── js │ ├── 0.2fe7ceac.js │ ├── 10.10579f75.js │ ├── 11.6b8c6571.js │ ├── 12.698e0b57.js │ ├── 13.db75ed61.js │ ├── 14.e131b5f3.js │ ├── 15.9924b81b.js │ ├── 16.8fcf1a98.js │ ├── 17.0563f973.js │ ├── 18.ee1ca821.js │ ├── 4.e328ae49.js │ ├── 5.0378f022.js │ ├── 6.a5e9946b.js │ ├── 7.86b0444c.js │ ├── 8.7c577117.js │ ├── 9.4a154784.js │ ├── app.65bed4b1.js │ ├── runtime.66ce30ea.js │ └── vendor.54e8852a.js └── statics │ ├── app-logo-128x128.png │ ├── icons │ ├── apple-icon-120x120.png │ ├── apple-icon-152x152.png │ ├── apple-icon-167x167.png │ ├── apple-icon-180x180.png │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── favicon-96x96.png │ ├── favicon.ico │ ├── icon-128x128.png │ ├── icon-192x192.png │ ├── icon-256x256.png │ ├── icon-384x384.png │ ├── icon-512x512.png │ ├── ms-icon-144x144.png │ └── safari-pinned-tab.svg │ ├── qplaceholder.png │ └── qplaceholder2.png ├── package.json └── src ├── boot └── qplaceholder.js ├── component ├── QPlaceholder.js ├── placeholder-variable.styl └── placeholder.styl └── index.js /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | docs 2 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | 4 | parserOptions: { 5 | parser: 'babel-eslint', 6 | sourceType: 'module' 7 | }, 8 | 9 | env: { 10 | browser: true 11 | }, 12 | 13 | extends: [ 14 | // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention 15 | // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules. 16 | 'plugin:vue/essential', 17 | '@vue/standard' 18 | ], 19 | 20 | // required to lint *.vue files 21 | plugins: [ 22 | 'vue' 23 | ], 24 | 25 | globals: { 26 | 'ga': true, // Google Analytics 27 | 'cordova': true, 28 | '__statics': true, 29 | 'process': true 30 | }, 31 | 32 | // add your custom rules here 33 | rules: { 34 | // allow async-await 35 | 'generator-star-spacing': 'off', 36 | // allow paren-less arrow functions 37 | 'arrow-parens': 'off', 38 | 'one-var': 'off', 39 | 40 | 'import/first': 'off', 41 | 'import/named': 'error', 42 | 'import/namespace': 'error', 43 | 'import/default': 'error', 44 | 'import/export': 'error', 45 | 'import/extensions': 'off', 46 | 'import/no-unresolved': 'off', 47 | 'import/no-extraneous-dependencies': 'off', 48 | 'prefer-promise-reject-errors': 'off', 49 | 50 | // allow console.log during development only 51 | 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 52 | // allow debugger during development only 53 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off' 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .thumbs.db 3 | node_modules 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | yarn.lock 8 | 9 | # Editor directories and files 10 | .idea 11 | .vscode 12 | *.suo 13 | *.ntvs* 14 | *.njsproj 15 | *.sln 16 | 17 | demo/ 18 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | demo 2 | docs 3 | .git 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | .editorconfig 8 | .eslintrc.js 9 | .eslintignore 10 | _redirects 11 | .github 12 | yarn.lock 13 | _redirects 14 | .vscode 15 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Quasar Framework 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | > Note: QPlaceholder is now deprecated. Use the QSkeleton UI component built into Quasar Framework. 2 | 3 | QPlaceholder (@quasar/qplaceholder) 4 | === 5 | 6 | ![official icon](https://img.shields.io/badge/Quasar%201.0-Official%20UI%20App%20Extension-blue.svg) 7 | ![npm (scoped)](https://img.shields.io/npm/v/@quasar/quasar-app-extension-qplaceholder.svg?style=plastic) 8 | [![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/quasarframework/app-extension-qplaceholder.svg)]() 9 | [![GitHub repo size in bytes](https://img.shields.io/github/repo-size/quasarframework/app-extension-qplaceholder.svg)]() 10 | [![npm](https://img.shields.io/npm/dt/@quasar/quasar-app-extension-qplaceholder.svg)](https://www.npmjs.com/package/@quasar/quasar-app-extension-qplaceholder) 11 | 12 | QPlaceholder is an `UI App Extension` for [Quasar Framework v1](https://v1.quasar-framework.org/). It will not work with legacy versions of Quasar Framework. 13 | 14 | ![QPlaceholder](https://raw.githubusercontent.com/quasarframework/app-extension-qplaceholder/dev/demo/src/statics/qplaceholder2.png) 15 | 16 | This work is currently in `beta` and there are expected changes while things get worked out. Your help with testing is greatly appreciated. Suggestions and PRs welcomed. 17 | 18 | # Info 19 | QPlaceholder allows you to display a placeholder before your data arrives from your server. 20 | 21 | # Demo Project (source) 22 | Can be found [here](https://github.com/quasarframework/app-extension-qplaceholder/tree/master/demo). 23 | 24 | # Documentation and Examples 25 | Can be found [here](https://quasarframework.github.io/app-extension-qplaceholder). 26 | 27 | # Install 28 | To add this App Extension to your Quasar application, run the following (in your Quasar app folder): 29 | ``` 30 | quasar ext add @quasar/qplaceholder 31 | ``` 32 | 33 | # Uninstall 34 | To remove this App Extension from your Quasar application, run the following (in your Quasar app folder): 35 | ``` 36 | quasar ext remove @quasar/qplaceholder 37 | ``` 38 | 39 | # Describe 40 | (TBD) You can use `quasar describe QPlaceholder` 41 | 42 | # Donate 43 | If you appreciate the work that went into this App Extension, please consider [donating to Quasar](https://donate.quasar.dev). 44 | -------------------------------------------------------------------------------- /_redirects: -------------------------------------------------------------------------------- 1 | /* /index.html 200 2 | -------------------------------------------------------------------------------- /demo/.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /demo/.eslintignore: -------------------------------------------------------------------------------- 1 | /dist 2 | -------------------------------------------------------------------------------- /demo/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | parserOptions: { 4 | parser: 'babel-eslint', 5 | sourceType: 'module' 6 | }, 7 | env: { 8 | browser: true 9 | }, 10 | extends: [ 11 | // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention 12 | // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules. 13 | 'plugin:vue/essential', 14 | '@vue/standard', 15 | 'plugin:quasar/standard' 16 | ], 17 | // required to lint *.vue files 18 | plugins: [ 19 | 'vue', 20 | 'quasar' 21 | ], 22 | globals: { 23 | 'ga': true, // Google Analytics 24 | 'cordova': true, 25 | '__statics': true 26 | }, 27 | // add your custom rules here 28 | 'rules': { 29 | // allow async-await 30 | 'generator-star-spacing': 'off', 31 | // allow paren-less arrow functions 32 | 'arrow-parens': 'off', 33 | 'one-var': 'off', 34 | 'prefer-promise-reject-errors': 'off', 35 | 36 | 'import/first': 'off', 37 | 'import/named': 'error', 38 | 'import/namespace': 'error', 39 | 'import/default': 'error', 40 | 'import/export': 'error', 41 | 'import/extensions': 'off', 42 | 'import/no-unresolved': 'off', 43 | 'import/no-extraneous-dependencies': 'off', 44 | 45 | 'quasar/check-valid-props': 1, 46 | 47 | // allow console.log during development only 48 | 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 49 | // allow debugger during development only 50 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off' 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /demo/.gitignore: -------------------------------------------------------------------------------- 1 | .quasar 2 | .DS_Store 3 | .thumbs.db 4 | node_modules 5 | /dist 6 | /src-cordova/node_modules 7 | /src-cordova/platforms 8 | /src-cordova/plugins 9 | /src-cordova/www 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | yarn.lock 14 | 15 | # Editor directories and files 16 | .idea 17 | .vscode 18 | *.suo 19 | *.ntvs* 20 | *.njsproj 21 | *.sln 22 | -------------------------------------------------------------------------------- /demo/.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | plugins: [ 5 | // to edit target browsers: use "browserslist" field in package.json 6 | require('autoprefixer') 7 | ] 8 | } 9 | -------------------------------------------------------------------------------- /demo/.stylintrc: -------------------------------------------------------------------------------- 1 | { 2 | "blocks": "never", 3 | "brackets": "never", 4 | "colons": "never", 5 | "colors": "always", 6 | "commaSpace": "always", 7 | "commentSpace": "always", 8 | "cssLiteral": "never", 9 | "depthLimit": false, 10 | "duplicates": true, 11 | "efficient": "always", 12 | "extendPref": false, 13 | "globalDupe": true, 14 | "indentPref": 2, 15 | "leadingZero": "never", 16 | "maxErrors": false, 17 | "maxWarnings": false, 18 | "mixed": false, 19 | "namingConvention": false, 20 | "namingConventionStrict": false, 21 | "none": "never", 22 | "noImportant": false, 23 | "parenSpace": "never", 24 | "placeholder": false, 25 | "prefixVarsWithDollar": "always", 26 | "quotePref": "single", 27 | "semicolons": "never", 28 | "sortOrder": false, 29 | "stackedProperties": "never", 30 | "trailingWhitespace": "never", 31 | "universal": "never", 32 | "valid": true, 33 | "zeroUnits": "never", 34 | "zIndexNormalize": false 35 | } 36 | -------------------------------------------------------------------------------- /demo/README.md: -------------------------------------------------------------------------------- 1 | # Quasar App (demo) 2 | 3 | A Quasar Framework app 4 | 5 | ## Install the dependencies 6 | ```bash 7 | yarn 8 | ``` 9 | 10 | ### Start the app in development mode (hot-code reloading, error reporting, etc.) 11 | ```bash 12 | quasar dev 13 | ``` 14 | 15 | ### Lint the files 16 | ```bash 17 | yarn run lint 18 | ``` 19 | 20 | ### Build the app for production 21 | ```bash 22 | quasar build 23 | ``` 24 | 25 | ### Customize the configuration 26 | See [Configuring quasar.conf.js](https://quasar.dev/quasar-cli/quasar-conf-js). 27 | -------------------------------------------------------------------------------- /demo/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@quasar/babel-preset-app' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "quasar-app-extension-qplaceholder", 3 | "version": "0.0.1", 4 | "description": "QPlaceholder App Extension for Quasar", 5 | "productName": "QPlaceholder docs, examples and demo site", 6 | "cordovaId": "org.cordova.quasar.app", 7 | "author": "Jeff Galbraith ", 8 | "private": true, 9 | "scripts": { 10 | "build": "quasar build && cp ./src/404.html ./dist/spa", 11 | "lint": "eslint --ext .js,.vue src", 12 | "lint-fix": "eslint --ext .js,.vue src --fix", 13 | "test": "echo \"No test specified\" && exit 0" 14 | }, 15 | "dependencies": { 16 | "@quasar/extras": "^1.8.2", 17 | "quasar": "^1.12.5" 18 | }, 19 | "devDependencies": { 20 | "@quasar/app": "^1.9.6", 21 | "@quasar/quasar-app-extension-colorize": "^1.0.0-alpha.1", 22 | "@quasar/quasar-app-extension-qmarkdown": "^1.0.29", 23 | "@quasar/quasar-app-extension-qplaceholder": "^1.0.0-alpha.5", 24 | "@quasar/quasar-app-extension-qribbon": "^1.0.0-beta.14", 25 | "@vue/eslint-config-standard": "^5.1.2", 26 | "babel-eslint": "^10.1.0", 27 | "eslint": "^7.2.0", 28 | "eslint-loader": "^4.0.2", 29 | "eslint-plugin-import": "^2.21.2", 30 | "eslint-plugin-node": "^11.1.0", 31 | "eslint-plugin-promise": "^4.2.1", 32 | "eslint-plugin-quasar": "^1.0.0", 33 | "eslint-plugin-standard": "^4.0.1", 34 | "eslint-plugin-vue": "^6.2.2", 35 | "quasar-app-extension-qautomate": "^1.0.0-alpha.5", 36 | "quasar-app-extension-qplaceholder": "file:.." 37 | }, 38 | "engines": { 39 | "node": ">= 8.9.0", 40 | "npm": ">= 5.6.0", 41 | "yarn": ">= 1.6.0" 42 | }, 43 | "browserslist": [ 44 | "last 1 version, not dead, ie >= 11" 45 | ] 46 | } 47 | -------------------------------------------------------------------------------- /demo/quasar.conf.js: -------------------------------------------------------------------------------- 1 | // Configuration for your app 2 | // https://quasar.dev/quasar-cli/quasar-conf-js 3 | 4 | module.exports = function (ctx) { 5 | return { 6 | // app boot file (/src/boot) 7 | // --> boot files are part of "main.js" 8 | boot: [ 9 | ], 10 | 11 | css: [ 12 | 'app.styl' 13 | ], 14 | 15 | extras: [ 16 | // 'ionicons-v4', 17 | // 'mdi-v3', 18 | // 'fontawesome-v5', 19 | // 'eva-icons', 20 | // 'themify', 21 | // 'roboto-font-latin-ext', // this or either 'roboto-font', NEVER both! 22 | 23 | 'roboto-font', // optional, you are not bound to it 24 | 'material-icons' // optional, you are not bound to it 25 | ], 26 | 27 | framework: { 28 | // iconSet: 'ionicons-v4', 29 | // lang: 'de', // Quasar language 30 | 31 | // all: true, // --- includes everything; for dev only! 32 | 33 | components: [ 34 | 'QBtn', 35 | 'QCard', 36 | 'QCardSection', 37 | 'QDrawer', 38 | 'QExpansionItem', 39 | 'QHeader', 40 | 'QIcon', 41 | 'QItem', 42 | 'QItemLabel', 43 | 'QItemSection', 44 | 'QLayout', 45 | 'QList', 46 | 'QPage', 47 | 'QPageContainer', 48 | 'QPageScroller', 49 | 'QScrollArea', 50 | 'QSeparator', 51 | 'QTab', 52 | 'QTabPanel', 53 | 'QTabPanels', 54 | 'QTabs', 55 | 'QToolbar', 56 | 'QToolbarTitle', 57 | 'QTooltip' 58 | ], 59 | 60 | directives: [ 61 | 'Ripple', 62 | 'Scroll' 63 | ], 64 | 65 | // Quasar plugins 66 | plugins: [ 67 | 'Notify', 68 | 'Platform', 69 | 'Screen' 70 | ] 71 | }, 72 | 73 | supportIE: false, 74 | 75 | build: { 76 | scopeHoisting: true, 77 | vueRouterMode: 'history', 78 | publicPath: 'app-extension-qplaceholder', 79 | // vueCompiler: true, 80 | // gzip: true, 81 | // analyze: true, 82 | // extractCSS: false, 83 | extendWebpack (cfg) { 84 | cfg.module.rules.push({ 85 | enforce: 'pre', 86 | test: /\.(js|vue)$/, 87 | loader: 'eslint-loader', 88 | exclude: /node_modules/, 89 | options: { 90 | formatter: require('eslint').CLIEngine.getFormatter('stylish') 91 | } 92 | }) 93 | } 94 | }, 95 | 96 | devServer: { 97 | // https: true, 98 | // port: 8080, 99 | open: true, // opens browser window automatically 100 | watchOptions: { 101 | ignored: [ 102 | 'node_modules', 103 | '!node_modules/@quasar/quasar-app-extension-qplaceholder' 104 | ] 105 | } 106 | }, 107 | 108 | // animations: 'all', // --- includes all animations 109 | animations: [], 110 | 111 | ssr: { 112 | pwa: false 113 | }, 114 | 115 | pwa: { 116 | // workboxPluginMode: 'InjectManifest', 117 | // workboxOptions: {}, // only for NON InjectManifest 118 | manifest: { 119 | // name: 'Quasar App', 120 | // short_name: 'Quasar App', 121 | // description: 'A Quasar Framework app', 122 | display: 'standalone', 123 | orientation: 'portrait', 124 | background_color: '#ffffff', 125 | theme_color: '#027be3', 126 | icons: [ 127 | { 128 | 'src': 'statics/icons/icon-128x128.png', 129 | 'sizes': '128x128', 130 | 'type': 'image/png' 131 | }, 132 | { 133 | 'src': 'statics/icons/icon-192x192.png', 134 | 'sizes': '192x192', 135 | 'type': 'image/png' 136 | }, 137 | { 138 | 'src': 'statics/icons/icon-256x256.png', 139 | 'sizes': '256x256', 140 | 'type': 'image/png' 141 | }, 142 | { 143 | 'src': 'statics/icons/icon-384x384.png', 144 | 'sizes': '384x384', 145 | 'type': 'image/png' 146 | }, 147 | { 148 | 'src': 'statics/icons/icon-512x512.png', 149 | 'sizes': '512x512', 150 | 'type': 'image/png' 151 | } 152 | ] 153 | } 154 | }, 155 | 156 | cordova: { 157 | // id: 'org.cordova.quasar.app', 158 | // noIosLegacyBuildFlag: true, // uncomment only if you know what you are doing 159 | }, 160 | 161 | electron: { 162 | // bundler: 'builder', // or 'packager' 163 | 164 | extendWebpack (cfg) { 165 | // do something with Electron main process Webpack cfg 166 | // chainWebpack also available besides this extendWebpack 167 | }, 168 | 169 | packager: { 170 | // https://github.com/electron-userland/electron-packager/blob/master/docs/api.md#options 171 | 172 | // OS X / Mac App Store 173 | // appBundleId: '', 174 | // appCategoryType: '', 175 | // osxSign: '', 176 | // protocol: 'myapp://path', 177 | 178 | // Windows only 179 | // win32metadata: { ... } 180 | }, 181 | 182 | builder: { 183 | // https://www.electron.build/configuration/configuration 184 | 185 | // appId: 'demo' 186 | } 187 | } 188 | } 189 | } 190 | -------------------------------------------------------------------------------- /demo/quasar.extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "qautomate": { 3 | "quasarConfFixMode": "automatic", 4 | "sort": true 5 | }, 6 | "@quasar/qribbon": {}, 7 | "@quasar/qmarkdown": { 8 | "import_md": true, 9 | "import_vmd": true 10 | }, 11 | "@quasar/qplaceholder": {}, 12 | "@quasar/colorize": {} 13 | } -------------------------------------------------------------------------------- /demo/src/404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 404 Redirect 8 | 9 | 12 | 13 | 14 | 15 | 16 | 17 |               18 |               19 |               20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /demo/src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 15 | -------------------------------------------------------------------------------- /demo/src/assets/page-utils.js: -------------------------------------------------------------------------------- 1 | export function copyHeading (id) { 2 | const text = window.location.origin + window.location.pathname + '#' + id 3 | 4 | var textArea = document.createElement('textarea') 5 | textArea.className = 'fixed-top' 6 | textArea.value = text 7 | document.body.appendChild(textArea) 8 | textArea.focus() 9 | textArea.select() 10 | 11 | document.execCommand('copy') 12 | document.body.removeChild(textArea) 13 | 14 | this.$q.notify({ 15 | message: 'Anchor has been copied to clipboard.', 16 | color: 'white', 17 | textColor: 'primary', 18 | icon: 'done', 19 | position: 'top', 20 | timeout: 2000 21 | }) 22 | } 23 | 24 | export function slugify (str) { 25 | return encodeURIComponent(String(str).trim().replace(/\s+/g, '-')) 26 | } 27 | -------------------------------------------------------------------------------- /demo/src/assets/quasar-logo-full.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 19 | 21 | 43 | 45 | 46 | 48 | image/svg+xml 49 | 51 | 52 | 53 | 54 | 55 | 60 | 63 | 66 | 69 | 75 | 79 | 83 | 87 | 91 | 95 | 99 | 103 | 104 | 105 | 106 | 107 | 113 | 118 | 126 | 133 | 142 | 151 | 160 | 169 | 178 | 187 | 188 | 189 | 190 | 191 | 192 | -------------------------------------------------------------------------------- /demo/src/assets/sad.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /demo/src/boot/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/quasarframework/app-extension-qplaceholder/73ad84d9bed4e8959e19b864c98680a5477e0786/demo/src/boot/.gitkeep -------------------------------------------------------------------------------- /demo/src/components/EssentialLinks.vue: -------------------------------------------------------------------------------- 1 | 88 | 89 | 97 | 98 | 100 | -------------------------------------------------------------------------------- /demo/src/components/ExampleCard.vue: -------------------------------------------------------------------------------- 1 | 68 | 69 | 134 | 135 | 137 | -------------------------------------------------------------------------------- /demo/src/components/ExampleTitle.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 29 | -------------------------------------------------------------------------------- /demo/src/components/Hero.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 27 | -------------------------------------------------------------------------------- /demo/src/css/app.styl: -------------------------------------------------------------------------------- 1 | // app global css 2 | 3 | $fgColor ?= #ADADAD 4 | $bgColor ?= #121212 5 | 6 | .quasar 7 | position absolute 8 | left 10px 9 | bottom 10px 10 | opacity 0.5 11 | 12 | .byline 13 | position absolute 14 | bottom 10px 15 | right 10px 16 | opacity 0.5 17 | 18 | .qribbon__container 19 | position relative 20 | 21 | .qribbon__horizontal--left 22 | position unset !important 23 | padding unset !important 24 | margin-left -22px !important 25 | z-index 1 !important 26 | 27 | &:before 28 | margin-left -22px 29 | 30 | .example-title 31 | cursor pointer 32 | &:after 33 | content ' #' 34 | opacity 0 35 | &:hover:after 36 | opacity 1 37 | 38 | .example-page 39 | padding 16px 46px 40 | font-weight 300 41 | max-width 900px 42 | margin-left auto 43 | margin-right auto 44 | 45 | body { 46 | padding 0 47 | margin 0 48 | font-family "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif 49 | /* font-size 16px */ 50 | line-height 1.5 51 | background-color #f8f8ff 52 | color #606c71 } 53 | 54 | a 55 | color #1e6bb8 56 | text-decoration none 57 | &:hover 58 | text-decoration underline 59 | 60 | .btn 61 | display inline-block 62 | margin-bottom 1rem 63 | color rgba(255, 255, 255, 0.7) 64 | background-color rgba(255, 255, 255, 0.08) 65 | border-color rgba(255, 255, 255, 0.2) 66 | border-style solid 67 | border-width 1px 68 | border-radius 0.3rem 69 | transition color 0.2s, background-color 0.2s, border-color 0.2s 70 | &:hover 71 | color rgba(255, 255, 255, 0.8) 72 | text-decoration none 73 | background-color rgba(255, 255, 255, 0.2) 74 | border-color rgba(255, 255, 255, 0.3) 75 | 76 | .btn + .btn 77 | margin-left 1rem 78 | 79 | .project-name 80 | font-weight 700 81 | 82 | @media screen and (min-width 64em) 83 | .btn 84 | padding 0.75rem 1rem 85 | 86 | @media screen and (min-width 42em) and (max-width 64em) 87 | .btn 88 | padding 0.6rem 0.9rem 89 | font-size 0.9rem 90 | 91 | @media screen and (max-width 42em) 92 | .btn 93 | display block 94 | width 100% 95 | padding 0.75rem 96 | font-size 0.9rem 97 | .btn + .btn 98 | margin-left 0 99 | .byline 100 | left 0 101 | align-text center 102 | .quasar 103 | opacity 0 104 | 105 | .page-header 106 | position relative 107 | color #fff 108 | text-align center 109 | background-color $bgColor 110 | background-image linear-gradient(120deg, $bgColor, $fgColor) 111 | 112 | @media screen and (min-width 64em) 113 | .page-header 114 | padding 3rem 4rem 115 | 116 | @media screen and (min-width 42em) and (max-width 64em) 117 | .page-header 118 | padding 2rem 4rem 119 | 120 | @media screen and (max-width 42em) 121 | .page-header 122 | padding 2rem 1rem 1rem 1rem 123 | 124 | .project-name 125 | font-weight 700 126 | margin-top 0 127 | margin-bottom 0.1rem 128 | 129 | @media screen and (min-width 64em) 130 | .project-name 131 | font-size 4.25rem 132 | 133 | @media screen and (min-width 42em) and (max-width 64em) 134 | .project-name 135 | font-size 3.25rem 136 | 137 | @media screen and (max-width 42em) 138 | .project-name 139 | font-size 2.75rem 140 | 141 | .project-tagline 142 | font-weight normal 143 | opacity 0.7 144 | 145 | @media screen and (min-width 64em) 146 | .project-tagline 147 | font-size 1.75rem 148 | 149 | @media screen and (min-width 42em) and (max-width 64em) 150 | .project-tagline 151 | font-size 1.25rem 152 | 153 | @media screen and (max-width 42em) 154 | .project-tagline 155 | font-size 1rem 156 | 157 | .main-content :first-child 158 | margin-top 0 159 | .main-content img 160 | max-width 100% 161 | .main-content h1, .main-content h2, .main-content h3, .main-content h4, .main-content h5, .main-content h6 162 | margin-top 2rem 163 | margin-bottom 1rem 164 | font-weight normal 165 | color #159957 166 | .main-content p 167 | margin-bottom 1em 168 | .main-content code 169 | padding 2px 4px 170 | font-family Consolas, "Liberation Mono", Menlo, Courier, monospace 171 | font-size 0.9rem 172 | color #383e41 173 | background-color #f3f6fa 174 | border-radius 0.3rem 175 | .main-content pre 176 | padding 0.8rem 177 | margin-top 0 178 | margin-bottom 1rem 179 | font 1rem Consolas, "Liberation Mono", Menlo, Courier, monospace 180 | color #567482 181 | word-wrap normal 182 | background-color #f3f6fa 183 | border solid 1px #dce6f0 184 | border-radius 0.3rem 185 | .main-content pre > code 186 | padding 0 187 | margin 0 188 | font-size 0.9rem 189 | color #567482 190 | word-break normal 191 | white-space pre 192 | background transparent 193 | border 0 194 | .main-content .highlight 195 | margin-bottom 1rem 196 | .main-content .highlight pre 197 | margin-bottom 0 198 | word-break normal 199 | .main-content .highlight pre, .main-content pre 200 | padding 0.8rem 201 | overflow auto 202 | font-size 0.9rem 203 | line-height 1.45 204 | border-radius 0.3rem 205 | .main-content pre code, .main-content pre tt 206 | display inline 207 | max-width initial 208 | padding 0 209 | margin 0 210 | overflow initial 211 | line-height inherit 212 | word-wrap normal 213 | background-color transparent 214 | border 0 215 | .main-content pre code:before, .main-content pre code:after, .main-content pre tt:before, .main-content pre tt:after 216 | content normal 217 | .main-content ul, .main-content ol 218 | margin-top 0 219 | .main-content blockquote 220 | padding 0 1rem 221 | margin-left 0 222 | color #819198 223 | border-left 0.3rem solid #dce6f0 224 | .main-content blockquote > :first-child 225 | margin-top 0 226 | .main-content blockquote > :last-child 227 | margin-bottom 0 228 | .main-content table 229 | display block 230 | width 100% 231 | overflow auto 232 | word-break normal 233 | word-break keep-all 234 | .main-content table th 235 | font-weight bold 236 | .main-content table th, .main-content table td 237 | padding 0.5rem 1rem 238 | border 1px solid #e9ebec 239 | .main-content dl 240 | padding 0 241 | .main-content dl dt 242 | padding 0 243 | margin-top 1rem 244 | font-size 1rem 245 | font-weight bold 246 | .main-content dl dd 247 | padding 0 248 | margin-bottom 1rem 249 | .main-content hr 250 | height 2px 251 | padding 0 252 | margin 1rem 0 253 | background-color #eff0f1 254 | border 0 255 | 256 | @media screen and (min-width 64em) 257 | .main-content 258 | max-width 64rem 259 | padding 2rem 6rem 260 | margin 0 auto 261 | font-size 1.1rem 262 | 263 | @media screen and (min-width 42em) and (max-width 64em) 264 | .main-content 265 | padding 2rem 4rem 266 | font-size 1.1rem 267 | 268 | @media screen and (max-width 42em) 269 | .main-content 270 | padding 2rem 1rem 271 | font-size 1rem 272 | 273 | .site-footer 274 | padding-top 2rem 275 | margin-top 2rem 276 | border-top solid 1px #eff0f1 277 | 278 | .site-footer-owner 279 | display block 280 | font-weight bold 281 | 282 | .site-footer-credits 283 | color #819198 284 | 285 | @media screen and (min-width 64em) 286 | .site-footer 287 | font-size 1rem 288 | 289 | @media screen and (min-width 42em) and (max-width 64em) 290 | .site-footer 291 | font-size 1rem 292 | 293 | @media screen and (max-width 42em) 294 | .site-footer 295 | font-size 0.9rem 296 | -------------------------------------------------------------------------------- /demo/src/css/quasar.variables.styl: -------------------------------------------------------------------------------- 1 | // Quasar Stylus Variables 2 | // -------------------------------------------------- 3 | // To customize the look and feel of this app, you can override 4 | // the Stylus variables found in Quasar's source Stylus files. 5 | 6 | // Check documentation for full list of Quasar variables 7 | 8 | // It's highly recommended to change the default colors 9 | // to match your app's branding. 10 | // Tip: Use the "Theme Builder" on Quasar's documentation website. 11 | 12 | $primary = #027BE3 13 | $secondary = #26A69A 14 | $accent = #9C27B0 15 | 16 | $positive = #21BA45 17 | $negative = #C10015 18 | $info = #31CCEC 19 | $warning = #F2C037 20 | -------------------------------------------------------------------------------- /demo/src/examples/Animated.vue: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /demo/src/examples/Avatar.vue: -------------------------------------------------------------------------------- 1 | 10 | -------------------------------------------------------------------------------- /demo/src/examples/Basic.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /demo/src/examples/Colors.vue: -------------------------------------------------------------------------------- 1 | 33 | -------------------------------------------------------------------------------- /demo/src/examples/Image.vue: -------------------------------------------------------------------------------- 1 | 9 | -------------------------------------------------------------------------------- /demo/src/examples/ImageSize.vue: -------------------------------------------------------------------------------- 1 | 50 | -------------------------------------------------------------------------------- /demo/src/examples/LineSizes.vue: -------------------------------------------------------------------------------- 1 | 10 | -------------------------------------------------------------------------------- /demo/src/examples/Random.vue: -------------------------------------------------------------------------------- 1 | 9 | -------------------------------------------------------------------------------- /demo/src/examples/Rows.vue: -------------------------------------------------------------------------------- 1 | 23 | -------------------------------------------------------------------------------- /demo/src/examples/Title.vue: -------------------------------------------------------------------------------- 1 | 9 | -------------------------------------------------------------------------------- /demo/src/examples/TitleWidthHeight.vue: -------------------------------------------------------------------------------- 1 | 11 | -------------------------------------------------------------------------------- /demo/src/index.template.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | <%= htmlWebpackPlugin.options.productName %> 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 28 | 29 | 30 |
31 | 32 | 33 | -------------------------------------------------------------------------------- /demo/src/layouts/MainLayout.vue: -------------------------------------------------------------------------------- 1 | 79 | 80 | 126 | -------------------------------------------------------------------------------- /demo/src/layouts/MyLayout.vue: -------------------------------------------------------------------------------- 1 | 92 | 93 | 108 | 109 | 111 | -------------------------------------------------------------------------------- /demo/src/markdown/placeholder.md: -------------------------------------------------------------------------------- 1 | QPlaceholder 2 | === 3 | 4 | QPlaceholder is a [Quasar App Extension](https://quasar.dev/app-extensions/introduction). It allows you to display a placeholder before your data arrives from your server. 5 | 6 | ![QPlaceholder](statics/qplaceholder.png "QPlaceholder" =800x800) 7 | 8 | This work is currently in `beta` and there are expected changes while things get worked out. Your help with testing is greatly appreciated. Suggestions and PRs welcomed. 9 | 10 | # Install 11 | To add this App Extension to your Quasar application, run the following (in your Quasar app folder): 12 | ``` 13 | quasar ext add @quasar/qplaceholder 14 | ``` 15 | 16 | # Uninstall 17 | To remove this App Extension from your Quasar application, run the following (in your Quasar app folder): 18 | ``` 19 | quasar ext remove @quasar/qplaceholder 20 | ``` 21 | 22 | # Describe 23 | (TBD) You can use `quasar describe QPlaceholder` 24 | 25 | # Docs 26 | Can be found [here](https://quasarframework.github.io/app-extension-qplaceholder). 27 | 28 | # Examples 29 | Can be found [here](https://quasarframework.github.io/app-extension-qplaceholder/examples). 30 | 31 | # Demo (source) Project 32 | Can be found [here](https://github.com/quasarframework/app-extension-qplaceholder/tree/master/demo). 33 | 34 | # QPlaceholder API 35 | 36 | ## QPlaceholder Properties 37 | | Vue Property | Type | Description | 38 | | --- | --- | --- | 39 | | value | Boolean | v-model: use to show/hide the component | 40 | | animated | Boolean | make the component animated (performance hit) | 41 | | image-size | Number | how big to make the image placeholder (in px).
Default: 80 | 42 | | avatar | Boolean | make the image placeholder round | 43 | | title | Boolean | display a title placeholder | 44 | | title-width | Number | the width of the title placeholder as a percentage.
Default: 50 | 45 | | title-height | Number | the height of the title placeholder (in px).
Default 16 | 46 | | rows | Number | the number of placeholder rows to be displayed.
Default: 4 | 47 | | row-height | Number | the height of a row placeholder (in px).
Default: 12 | 48 | | random | Boolean | normally the width of a placeholder row is 100%. Using `random` causes each row to be different lengths | 49 | | color | String | The color of the placeholder foreground. Any color from the [Quasar Color Pallete](https://quasar.dev/style/color-palette) or any CSS color.
Default: #eee | 50 | | background-color | String | The color of the placeholder background. Any color from the [Quasar Color Pallete](https://quasar.dev/style/color-palette) or any CSS color.
Default: #eee | 51 | | shimmer-color | String | The color of the placeholder shimmer when `animated` is used. Any color from the [Quasar Color Pallete](https://quasar.dev/style/color-palette) or any CSS color.
Default: #eee | 52 | 53 | 54 | # Donate 55 | If you appreciate the work that went into this App Extension, please consider [donating to Quasar](https://donate.quasar.dev). 56 | 57 | --- 58 | This page created with [QMarkdown](https://quasarframework.github.io/app-extension-qmarkdown), another great Quasar App Extension. -------------------------------------------------------------------------------- /demo/src/pages/Error404.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 23 | -------------------------------------------------------------------------------- /demo/src/pages/Examples.vue: -------------------------------------------------------------------------------- 1 | 42 | 43 | 111 | 112 | 120 | -------------------------------------------------------------------------------- /demo/src/pages/Index.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 9 | 10 | 47 | -------------------------------------------------------------------------------- /demo/src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import VueRouter from 'vue-router' 3 | 4 | import routes from './routes' 5 | 6 | Vue.use(VueRouter) 7 | 8 | /* 9 | * If not building with SSR mode, you can 10 | * directly export the Router instantiation 11 | */ 12 | 13 | export default function (/* { store, ssrContext } */) { 14 | const Router = new VueRouter({ 15 | scrollBehavior: () => ({ x: 0, y: 0 }), 16 | routes, 17 | 18 | // Leave these as is and change from quasar.conf.js instead! 19 | // quasar.conf.js -> build -> vueRouterMode 20 | // quasar.conf.js -> build -> publicPath 21 | mode: process.env.VUE_ROUTER_MODE, 22 | base: process.env.VUE_ROUTER_BASE 23 | }) 24 | 25 | return Router 26 | } 27 | -------------------------------------------------------------------------------- /demo/src/router/routes.js: -------------------------------------------------------------------------------- 1 | 2 | const routes = [ 3 | { 4 | path: '/', 5 | redirect: '/docs' 6 | }, 7 | { 8 | path: '/docs', 9 | component: () => import('layouts/MainLayout.vue'), 10 | children: [ 11 | { path: '', component: () => import('pages/Index.vue') } 12 | ] 13 | }, 14 | { 15 | path: '/examples', 16 | component: () => import('layouts/MainLayout.vue'), 17 | children: [ 18 | { path: '', component: () => import('pages/Examples.vue') } 19 | ] 20 | } 21 | // { 22 | // path: '/', 23 | // component: () => import('layouts/MyLayout.vue'), 24 | // children: [ 25 | // { path: '', component: () => import('pages/Index.vue') } 26 | // ] 27 | // } 28 | ] 29 | 30 | // Always leave this as last one 31 | if (process.env.MODE !== 'ssr') { 32 | routes.push({ 33 | path: '*', 34 | component: () => import('pages/Error404.vue') 35 | }) 36 | } 37 | 38 | export default routes 39 | -------------------------------------------------------------------------------- /demo/src/statics/app-logo-128x128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/quasarframework/app-extension-qplaceholder/73ad84d9bed4e8959e19b864c98680a5477e0786/demo/src/statics/app-logo-128x128.png -------------------------------------------------------------------------------- /demo/src/statics/icons/apple-icon-120x120.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/quasarframework/app-extension-qplaceholder/73ad84d9bed4e8959e19b864c98680a5477e0786/demo/src/statics/icons/apple-icon-120x120.png -------------------------------------------------------------------------------- /demo/src/statics/icons/apple-icon-152x152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/quasarframework/app-extension-qplaceholder/73ad84d9bed4e8959e19b864c98680a5477e0786/demo/src/statics/icons/apple-icon-152x152.png -------------------------------------------------------------------------------- /demo/src/statics/icons/apple-icon-167x167.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/quasarframework/app-extension-qplaceholder/73ad84d9bed4e8959e19b864c98680a5477e0786/demo/src/statics/icons/apple-icon-167x167.png -------------------------------------------------------------------------------- /demo/src/statics/icons/apple-icon-180x180.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/quasarframework/app-extension-qplaceholder/73ad84d9bed4e8959e19b864c98680a5477e0786/demo/src/statics/icons/apple-icon-180x180.png -------------------------------------------------------------------------------- /demo/src/statics/icons/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/quasarframework/app-extension-qplaceholder/73ad84d9bed4e8959e19b864c98680a5477e0786/demo/src/statics/icons/favicon-16x16.png -------------------------------------------------------------------------------- /demo/src/statics/icons/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/quasarframework/app-extension-qplaceholder/73ad84d9bed4e8959e19b864c98680a5477e0786/demo/src/statics/icons/favicon-32x32.png -------------------------------------------------------------------------------- /demo/src/statics/icons/favicon-96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/quasarframework/app-extension-qplaceholder/73ad84d9bed4e8959e19b864c98680a5477e0786/demo/src/statics/icons/favicon-96x96.png -------------------------------------------------------------------------------- /demo/src/statics/icons/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/quasarframework/app-extension-qplaceholder/73ad84d9bed4e8959e19b864c98680a5477e0786/demo/src/statics/icons/favicon.ico -------------------------------------------------------------------------------- /demo/src/statics/icons/icon-128x128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/quasarframework/app-extension-qplaceholder/73ad84d9bed4e8959e19b864c98680a5477e0786/demo/src/statics/icons/icon-128x128.png -------------------------------------------------------------------------------- /demo/src/statics/icons/icon-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/quasarframework/app-extension-qplaceholder/73ad84d9bed4e8959e19b864c98680a5477e0786/demo/src/statics/icons/icon-192x192.png -------------------------------------------------------------------------------- /demo/src/statics/icons/icon-256x256.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/quasarframework/app-extension-qplaceholder/73ad84d9bed4e8959e19b864c98680a5477e0786/demo/src/statics/icons/icon-256x256.png -------------------------------------------------------------------------------- /demo/src/statics/icons/icon-384x384.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/quasarframework/app-extension-qplaceholder/73ad84d9bed4e8959e19b864c98680a5477e0786/demo/src/statics/icons/icon-384x384.png -------------------------------------------------------------------------------- /demo/src/statics/icons/icon-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/quasarframework/app-extension-qplaceholder/73ad84d9bed4e8959e19b864c98680a5477e0786/demo/src/statics/icons/icon-512x512.png -------------------------------------------------------------------------------- /demo/src/statics/icons/ms-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/quasarframework/app-extension-qplaceholder/73ad84d9bed4e8959e19b864c98680a5477e0786/demo/src/statics/icons/ms-icon-144x144.png -------------------------------------------------------------------------------- /demo/src/statics/icons/safari-pinned-tab.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /demo/src/statics/qplaceholder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/quasarframework/app-extension-qplaceholder/73ad84d9bed4e8959e19b864c98680a5477e0786/demo/src/statics/qplaceholder.png -------------------------------------------------------------------------------- /demo/src/statics/qplaceholder2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/quasarframework/app-extension-qplaceholder/73ad84d9bed4e8959e19b864c98680a5477e0786/demo/src/statics/qplaceholder2.png -------------------------------------------------------------------------------- /demo/src/store/common/actions.js: -------------------------------------------------------------------------------- 1 | /* 2 | export function someAction (context) { 3 | } 4 | */ 5 | -------------------------------------------------------------------------------- /demo/src/store/common/getters.js: -------------------------------------------------------------------------------- 1 | export const toc = (state) => state.toc 2 | -------------------------------------------------------------------------------- /demo/src/store/common/index.js: -------------------------------------------------------------------------------- 1 | import state from './state' 2 | import * as getters from './getters' 3 | import * as mutations from './mutations' 4 | import * as actions from './actions' 5 | 6 | export default { 7 | namespaced: true, 8 | state, 9 | getters, 10 | mutations, 11 | actions 12 | } 13 | -------------------------------------------------------------------------------- /demo/src/store/common/mutations.js: -------------------------------------------------------------------------------- 1 | export const toc = (state, toc) => { 2 | state.toc = toc 3 | } 4 | -------------------------------------------------------------------------------- /demo/src/store/common/state.js: -------------------------------------------------------------------------------- 1 | export default { 2 | toc: [] 3 | } 4 | -------------------------------------------------------------------------------- /demo/src/store/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Vuex from 'vuex' 3 | 4 | // import example from './module-example' 5 | import common from './common' 6 | 7 | Vue.use(Vuex) 8 | 9 | /* 10 | * If not building with SSR mode, you can 11 | * directly export the Store instantiation 12 | */ 13 | 14 | export default function (/* { ssrContext } */) { 15 | const Store = new Vuex.Store({ 16 | modules: { 17 | common 18 | }, 19 | 20 | // enable strict mode (adds overhead!) 21 | // for dev mode only 22 | strict: process.env.DEV 23 | }) 24 | 25 | return Store 26 | } 27 | -------------------------------------------------------------------------------- /docs/404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 404 Redirect 8 | 9 | 12 | 13 | 14 | 15 | 16 | 17 |               18 |               19 |               20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /docs/_redirects: -------------------------------------------------------------------------------- 1 | /* /index.html 200 2 | -------------------------------------------------------------------------------- /docs/css/4.8927fd4c.css: -------------------------------------------------------------------------------- 1 | .example-page{padding:16px 46px;font-weight:300;max-width:900px;margin-left:auto;margin-right:auto} -------------------------------------------------------------------------------- /docs/fonts/KFOkCnqEu92Fr1MmgVxIIzQ.a45108d3.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/quasarframework/app-extension-qplaceholder/73ad84d9bed4e8959e19b864c98680a5477e0786/docs/fonts/KFOkCnqEu92Fr1MmgVxIIzQ.a45108d3.woff -------------------------------------------------------------------------------- /docs/fonts/KFOlCnqEu92Fr1MmEU9fBBc-.cea99d3e.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/quasarframework/app-extension-qplaceholder/73ad84d9bed4e8959e19b864c98680a5477e0786/docs/fonts/KFOlCnqEu92Fr1MmEU9fBBc-.cea99d3e.woff -------------------------------------------------------------------------------- /docs/fonts/KFOlCnqEu92Fr1MmSU5fBBc-.865f928c.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/quasarframework/app-extension-qplaceholder/73ad84d9bed4e8959e19b864c98680a5477e0786/docs/fonts/KFOlCnqEu92Fr1MmSU5fBBc-.865f928c.woff -------------------------------------------------------------------------------- /docs/fonts/KFOlCnqEu92Fr1MmWUlfBBc-.2267169e.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/quasarframework/app-extension-qplaceholder/73ad84d9bed4e8959e19b864c98680a5477e0786/docs/fonts/KFOlCnqEu92Fr1MmWUlfBBc-.2267169e.woff -------------------------------------------------------------------------------- /docs/fonts/KFOlCnqEu92Fr1MmYUtfBBc-.bac8362e.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/quasarframework/app-extension-qplaceholder/73ad84d9bed4e8959e19b864c98680a5477e0786/docs/fonts/KFOlCnqEu92Fr1MmYUtfBBc-.bac8362e.woff -------------------------------------------------------------------------------- /docs/fonts/KFOmCnqEu92Fr1Mu4mxM.49ae34d4.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/quasarframework/app-extension-qplaceholder/73ad84d9bed4e8959e19b864c98680a5477e0786/docs/fonts/KFOmCnqEu92Fr1Mu4mxM.49ae34d4.woff -------------------------------------------------------------------------------- /docs/fonts/flUhRq6tzZclQEJ-Vdg-IuiaDsNa.2d36eb59.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/quasarframework/app-extension-qplaceholder/73ad84d9bed4e8959e19b864c98680a5477e0786/docs/fonts/flUhRq6tzZclQEJ-Vdg-IuiaDsNa.2d36eb59.woff -------------------------------------------------------------------------------- /docs/fonts/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.492281ee.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/quasarframework/app-extension-qplaceholder/73ad84d9bed4e8959e19b864c98680a5477e0786/docs/fonts/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.492281ee.woff2 -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | QPlaceholder docs, examples and demo site
-------------------------------------------------------------------------------- /docs/js/0.2fe7ceac.js: -------------------------------------------------------------------------------- 1 | (window["webpackJsonp"]=window["webpackJsonp"]||[]).push([[0],{"713b":function(e,t,r){"use strict";r.r(t);var n=function(){var e=this,t=e.$createElement,r=e._self._c||t;return r("q-layout",{attrs:{view:"HHh LpR fFf"}},[r("q-header",{attrs:{elevated:""}},[r("q-toolbar",[r("q-btn",{attrs:{flat:"",dense:"",round:"","aria-label":"Menu"},on:{click:function(t){e.leftDrawerOpen=!e.leftDrawerOpen}}},[r("q-icon",{attrs:{name:"menu"}})],1),e.$q.screen.width>500?r("q-toolbar-title",[e._v("\n QPlaceholder\n "),e.$q.screen.width<1077?r("q-tooltip",[e._v("\n QPlaceholder\n ")]):e._e()],1):e._e(),r("div",[e._v("Quasar v"+e._s(e.$q.version))]),r("q-btn",{attrs:{flat:"",dense:"",round:"","aria-label":"Table of Contents"},on:{click:function(t){e.rightDrawerOpen=!e.rightDrawerOpen}}},[r("q-icon",{attrs:{name:"menu"}})],1)],1)],1),r("q-drawer",{attrs:{bordered:"","content-style":"background-color: #f8f8ff"},model:{value:e.leftDrawerOpen,callback:function(t){e.leftDrawerOpen=t},expression:"leftDrawerOpen"}},[r("q-list",[r("q-item-label",{attrs:{header:""}},[e._v("Essential Links")])],1),r("essential-links")],1),r("q-drawer",{attrs:{side:"right",bordered:"","content-style":"background-color: #f8f8ff"},model:{value:e.rightDrawerOpen,callback:function(t){e.rightDrawerOpen=t},expression:"rightDrawerOpen"}},[r("q-scroll-area",{staticClass:"fit"},[r("q-list",{attrs:{dense:""}},e._l(e.toc,(function(t){return r("q-item",{directives:[{name:"ripple",rawName:"v-ripple"}],key:t.id,attrs:{clickable:"",dense:"",active:e.activeToc===t.id},on:{click:function(r){return e.scrollTo(t.id)}}},[t.level>1?r("q-item-section",{attrs:{side:""}},[e._v(" • ")]):e._e(),r("q-item-section",{class:"toc-item toc-level-"+t.level},[e._v(e._s(t.label))])],1)})),1)],1)],1),r("q-page-container",[r("router-view")],1)],1)},o=[],a=(r("8e6e"),r("8a81"),r("ac6a"),r("cadf"),r("06db"),r("456d"),r("c47a")),i=r.n(a),c=r("2f62"),l=r("0831");function s(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function f(e){for(var t=1;t1&&void 0!==arguments[1]?arguments[1]:1,a=d(t);this.tempToc.push({children:[],id:a,label:t,level:e})}}},w=T,k=(a("e872"),Object(m["a"])(w,n,s,!1,null,null,null));e["default"]=k.exports},1260:function(t,e,a){"use strict";a.r(e),e["default"]='\n'},"1d0c":function(t,e,a){"use strict";a.r(e),e["default"]='\n'},2123:function(t,e,a){"use strict";a.r(e),e["default"]='\n'},2514:function(t,e,a){"use strict";var n=function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("section",{staticClass:"page-header"},[a("div",{staticClass:"text-h1 project-name"},[t._v("QPlaceHolder")]),a("div",{staticClass:"text-h2 project-tagline"}),a("div",{staticClass:"byline"},[t._v("Created and maintained by Jeff Galbraith")]),a("div",{staticClass:"quasar"},[t._v("A Quasar Framework App Extension")]),a("q-btn",{staticClass:"btn",attrs:{type:"a",href:"https://github.com/quasarframework/app-extension-qplaceholder",target:"_blank",label:"View on GitHub","no-caps":"",flat:""}}),a("q-btn",{staticClass:"btn",attrs:{to:"/docs",label:"Docs","no-caps":"",flat:""}}),a("q-btn",{staticClass:"btn",attrs:{to:"/examples",label:"Examples","no-caps":"",flat:""}}),a("q-btn",{staticClass:"btn",attrs:{type:"a",href:"https://donate.quasar.dev",target:"_blank",label:"Donate","no-caps":"",flat:""}})],1),a("main",{staticClass:"flex flex-start justify-center inset-shadow"},[a("div",{staticClass:"q-pa-md col-12-sm col-8-md col-6-lg inset-shadow",staticStyle:{width:"100%",height:"3px"}}),a("div",{staticClass:"q-pa-md col-12-sm col-8-md col-6-lg bg-white shadow-1",staticStyle:{"max-width":"800px",width:"100%"}},[t._t("default")],2)])])},s=[],l={name:"Hero"},r=l,i=a("2877"),o=Object(i["a"])(r,n,s,!1,null,null,null);e["a"]=o.exports},"4c96":function(t,e,a){"use strict";a.r(e),e["default"]='\n'},"55e7":function(t,e,a){"use strict";a.r(e),e["default"]='\n'},6170:function(t,e,a){"use strict";a.r(e),e["default"]='\n'},"6d0c":function(t,e,a){"use strict";a.r(e),e["default"]='\n'},"90d3":function(t,e,a){"use strict";a.r(e),e["default"]='\n'},"9e54":function(t,e,a){"use strict";a.r(e),e["default"]='\n'},b656:function(t,e,a){},be43:function(t,e,a){"use strict";a.r(e),e["default"]='\n'},d4cb:function(t,e,a){"use strict";a.r(e),e["default"]='\n'},e872:function(t,e,a){"use strict";var n=a("b656"),s=a.n(n);s.a}}]); -------------------------------------------------------------------------------- /docs/js/5.0378f022.js: -------------------------------------------------------------------------------- 1 | (window["webpackJsonp"]=window["webpackJsonp"]||[]).push([[5],{c4e4:function(M,j){M.exports="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNjYuNyAxNjguOSIgd2lkdGg9IjE2Ni43IiBoZWlnaHQ9IjE2OC45IiBpc29sYXRpb249Imlzb2xhdGUiPjxkZWZzPjxjbGlwUGF0aD48cmVjdCB3aWR0aD0iMTY2LjciIGhlaWdodD0iMTY4LjkiLz48L2NsaXBQYXRoPjwvZGVmcz48ZyBjbGlwLXBhdGg9InVybCgjX2NsaXBQYXRoX1BQUGlFY09SaFJTWXdvcEVFTm5hUkZ6emVZU1htd3R0KSI+PHBhdGggZD0iTTY1LjYgMTM1LjJDNjUuNiAxMzcuMSA2NC4xIDEzOC42IDYyLjIgMTM4LjYgNjAuNCAxMzguNiA1OC45IDEzNy4xIDU4LjkgMTM1LjIgNTguOSAxMzAuNyA2MS45IDEyNi43IDY2LjggMTI0IDcxLjEgMTIxLjYgNzcgMTIwLjEgODMuMyAxMjAuMSA4OS43IDEyMC4xIDk1LjYgMTIxLjYgOTkuOSAxMjQgMTA0LjcgMTI2LjcgMTA3LjggMTMwLjcgMTA3LjggMTM1LjIgMTA3LjggMTM3LjEgMTA2LjMgMTM4LjYgMTA0LjQgMTM4LjYgMTAyLjYgMTM4LjYgMTAxLjEgMTM3LjEgMTAxLjEgMTM1LjIgMTAxLjEgMTMzLjMgOTkuNCAxMzEuMyA5Ni42IDEyOS44IDkzLjMgMTI3LjkgODguNiAxMjYuOCA4My4zIDEyNi44IDc4LjEgMTI2LjggNzMuNCAxMjcuOSA3MCAxMjkuOCA2Ny4zIDEzMS4zIDY1LjYgMTMzLjMgNjUuNiAxMzUuMlpNMTQ5LjIgMTUzLjNDMTQ5LjIgMTU3LjYgMTQ3LjUgMTYxLjUgMTQ0LjYgMTY0LjQgMTQxLjggMTY3LjIgMTM3LjkgMTY4LjkgMTMzLjYgMTY4LjkgMTI5LjMgMTY4LjkgMTI1LjQgMTY3LjIgMTIyLjYgMTY0LjQgMTIwLjkgMTYyLjggMTE5LjcgMTYwLjkgMTE4LjkgMTU4LjcgMTE0LjEgMTYxIDEwOSAxNjIuOCAxMDMuNyAxNjQuMSA5Ny4yIDE2NS44IDkwLjQgMTY2LjYgODMuMyAxNjYuNiA2MC4zIDE2Ni42IDM5LjUgMTU3LjMgMjQuNCAxNDIuMiA5LjMgMTI3LjEgMCAxMDYuMyAwIDgzLjMgMCA2MC4zIDkuMyAzOS41IDI0LjQgMjQuNCAzOS41IDkuMyA2MC4zIDAgODMuMyAwIDEwNi40IDAgMTI3LjIgOS4zIDE0Mi4zIDI0LjQgMTU3LjMgMzkuNSAxNjYuNyA2MC4zIDE2Ni43IDgzLjMgMTY2LjcgOTQuNSAxNjQuNSAxMDUuMSAxNjAuNSAxMTQuOSAxNTYuNiAxMjQuMiAxNTEuMSAxMzIuNyAxNDQuNCAxNDAgMTQ3IDE0NS4xIDE0OS4yIDE1MC4yIDE0OS4yIDE1My4zWk0xMzAuNyAxMjYuM0MxMzEuMSAxMjUuNSAxMzEuOCAxMjUgMTMyLjUgMTI0LjhMMTMyLjYgMTI0LjcgMTMyLjYgMTI0LjcgMTMyLjcgMTI0LjcgMTMyLjcgMTI0LjcgMTMyLjggMTI0LjcgMTMyLjkgMTI0LjYgMTMyLjkgMTI0LjYgMTMyLjkgMTI0LjYgMTMzIDEyNC42IDEzMyAxMjQuNkMxMzMgMTI0LjYgMTMzLjEgMTI0LjYgMTMzLjEgMTI0LjZMMTMzLjEgMTI0LjYgMTMzLjIgMTI0LjYgMTMzLjIgMTI0LjZDMTMzLjkgMTI0LjUgMTM0LjYgMTI0LjYgMTM1LjIgMTI1IDEzNS44IDEyNS4zIDEzNi4zIDEyNS44IDEzNi42IDEyNi40TDEzNi42IDEyNi40IDEzNi42IDEyNi40IDEzNi42IDEyNi40IDEzNi42IDEyNi40IDEzNi42IDEyNi40IDEzNi42IDEyNi41IDEzNi42IDEyNi41IDEzNi42IDEyNi41IDEzNi42IDEyNi41IDEzNi42IDEyNi41IDEzNi43IDEyNi41QzEzNyAxMjcuMiAxMzcuNyAxMjguMyAxMzguNCAxMjkuNkwxMzguNCAxMjkuNiAxMzguNSAxMjkuNyAxMzguNSAxMjkuNyAxMzguNiAxMjkuOCAxMzguNiAxMjkuOSAxMzguNiAxMjkuOSAxMzguNyAxMzAgMTM4LjcgMTMwLjEgMTM4LjcgMTMwLjEgMTM4LjcgMTMwLjEgMTM4LjggMTMwLjIgMTM4LjggMTMwLjIgMTM4LjggMTMwLjMgMTM4LjkgMTMwLjMgMTM4LjkgMTMwLjQgMTM4LjkgMTMwLjQgMTM4LjkgMTMwLjQgMTM5IDEzMC41IDEzOSAxMzAuNSAxMzkgMTMwLjYgMTM5LjEgMTMwLjcgMTM5LjEgMTMwLjcgMTM5LjEgMTMwLjcgMTM5LjIgMTMwLjggMTM5LjIgMTMwLjggMTM5LjIgMTMwLjlDMTM5LjggMTMxLjggMTQwLjQgMTMyLjkgMTQxIDEzMy45IDE0Ni41IDEyNy42IDE1MS4xIDEyMC4zIDE1NC4zIDExMi40IDE1OCAxMDMuNCAxNjAgOTMuNiAxNjAgODMuMyAxNjAgNjIuMSAxNTEuNCA0MyAxMzcuNiAyOS4xIDEyMy43IDE1LjIgMTA0LjUgNi43IDgzLjMgNi43IDYyLjIgNi43IDQzIDE1LjIgMjkuMSAyOS4xIDE1LjIgNDMgNi43IDYyLjEgNi43IDgzLjMgNi43IDEwNC41IDE1LjIgMTIzLjYgMjkuMSAxMzcuNSA0MyAxNTEuNCA2Mi4yIDE2MCA4My4zIDE2MCA4OS44IDE2MCA5Ni4xIDE1OS4yIDEwMi4xIDE1Ny43IDEwNy44IDE1Ni4yIDExMy4xIDE1NC4yIDExOC4xIDE1MS43TDExOC4xIDE1MS42IDExOC4yIDE1MS42IDExOC4yIDE1MS4zIDExOC4yIDE1MS4zIDExOC4zIDE1MSAxMTguMyAxNTEgMTE4LjQgMTUwLjcgMTE4LjQgMTUwLjYgMTE4LjUgMTUwLjQgMTE4LjUgMTUwLjMgMTE4LjUgMTUwIDExOC42IDE0OS45IDExOC42IDE0OS43IDExOC43IDE0OS42IDExOC44IDE0OS4zQzExOC45IDE0OC45IDExOSAxNDguNSAxMTkuMSAxNDguMkwxMTkuMiAxNDguMSAxMTkuMyAxNDcuOCAxMTkuMyAxNDcuNyAxMTkuNCAxNDcuNCAxMTkuNCAxNDcuNEMxMTkuNSAxNDcuMSAxMTkuNiAxNDYuOSAxMTkuNyAxNDYuN0wxMTkuNyAxNDYuNiAxMTkuOCAxNDYuMyAxMTkuOSAxNDYuMiAxMjAgMTQ1LjkgMTIwLjEgMTQ1LjlDMTIwLjIgMTQ1LjYgMTIwLjMgMTQ1LjMgMTIwLjQgMTQ1LjFMMTIwLjQgMTQ1LjEgMTIwLjYgMTQ0LjcgMTIwLjYgMTQ0LjYgMTIwLjcgMTQ0LjMgMTIwLjggMTQ0LjIgMTIwLjkgMTQzLjkgMTIwLjkgMTQzLjggMTIxIDE0My44IDEyMS4xIDE0My41IDEyMS4xIDE0My40IDEyMS4yIDE0My4yIDEyMS4zIDE0MyAxMjEuNCAxNDNDMTIxLjYgMTQyLjYgMTIxLjcgMTQyLjIgMTIyIDE0MS44TDEyMiAxNDEuNyAxMjIuMiAxNDEuNCAxMjIuMiAxNDEuMyAxMjIuNCAxNDAuOSAxMjIuNCAxNDAuOSAxMjIuNiAxNDAuNSAxMjIuNiAxNDAuNSAxMjIuOCAxNDAuMSAxMjMgMTM5LjggMTIzIDEzOS43IDEyMyAxMzkuNyAxMjMuNCAxMzguOSAxMjMuNSAxMzguOSAxMjMuNiAxMzguNiAxMjMuNyAxMzguNCAxMjMuOCAxMzguMyAxMjMuOSAxMzggMTI0IDEzNy45IDEyNC4yIDEzNy42IDEyNC4yIDEzNy41IDEyNC40IDEzNy4yIDEyNC40IDEzNy4yIDEyNC42IDEzNi44IDEyNC42IDEzNi44IDEyNC44IDEzNi40IDEyNC44IDEzNi40IDEyNSAxMzYuMSAxMjUuMSAxMzYgMTI1LjIgMTM1LjcgMTI1LjMgMTM1LjYgMTI1LjQgMTM1LjMgMTI1LjUgMTM1LjIgMTI1LjYgMTM1IDEyNS43IDEzNC44IDEyNS44IDEzNC42IDEyNS45IDEzNC40IDEyNi4yIDEzNCAxMjYuMiAxMzMuOSAxMjYuNCAxMzMuNiAxMjYuNCAxMzMuNiAxMjYuNiAxMzMuMyAxMjYuNiAxMzMuMiAxMjYuOCAxMzIuOSAxMjYuOCAxMzIuOSAxMjcgMTMyLjUgMTI3IDEzMi41IDEyNy4zIDEzMi4yIDEyNy40IDEzMS45IDEyNy40IDEzMS44IDEyNy42IDEzMS42IDEyNy43IDEzMS41IDEyNy44IDEzMS4zIDEyNy45IDEzMS4xIDEyOCAxMzEgMTI4LjEgMTMwLjggMTI4LjEgMTMwLjYgMTI4LjMgMTMwLjQgMTI4LjMgMTMwLjQgMTI4LjUgMTMwLjEgMTI4LjUgMTMwLjEgMTI4LjcgMTI5LjggMTI4LjcgMTI5LjggMTI4LjggMTI5LjUgMTI4LjggMTI5LjUgMTI4LjkgMTI5LjQgMTI4LjkgMTI5LjMgMTI5IDEyOS4zIDEyOSAxMjkuMiAxMjkgMTI5LjEgMTI5IDEyOS4xIDEyOS4xIDEyOSAxMjkuMSAxMjkgMTI5LjIgMTI4LjkgMTI5LjIgMTI4LjkgMTI5LjIgMTI4LjggMTI5LjIgMTI4LjggMTI5LjMgMTI4LjggMTI5LjMgMTI4LjggMTI5LjMgMTI4LjcgMTI5LjMgMTI4LjcgMTI5LjMgMTI4LjcgMTI5LjMgMTI4LjcgMTI5LjQgMTI4LjYgMTI5LjQgMTI4LjYgMTI5LjQgMTI4LjUgMTI5LjQgMTI4LjUgMTI5LjQgMTI4LjQgMTI5LjUgMTI4LjQgMTI5LjUgMTI4LjQgMTI5LjUgMTI4LjQgMTI5LjUgMTI4LjQgMTI5LjUgMTI4LjMgMTI5LjUgMTI4LjMgMTI5LjYgMTI4LjIgMTI5LjYgMTI4LjIgMTI5LjYgMTI4LjIgMTI5LjYgMTI4LjIgMTI5LjYgMTI4LjEgMTI5LjYgMTI4LjEgMTI5LjcgMTI4LjEgMTI5LjcgMTI4LjEgMTI5LjcgMTI4IDEyOS43IDEyOCAxMjkuOCAxMjcuOSAxMjkuOCAxMjcuOSAxMjkuOCAxMjcuOSAxMjkuOCAxMjcuOSAxMjkuOCAxMjcuOCAxMjkuOCAxMjcuOCAxMjkuOCAxMjcuOCAxMjkuOCAxMjcuOCAxMjkuOSAxMjcuNyAxMjkuOSAxMjcuNyAxMjkuOSAxMjcuNyAxMjkuOSAxMjcuNyAxMjkuOSAxMjcuNiAxMjkuOSAxMjcuNiAxMzAgMTI3LjYgMTMwIDEyNy42IDEzMCAxMjcuNSAxMzAgMTI3LjUgMTMwIDEyNy40IDEzMCAxMjcuNCAxMzAuMSAxMjcuNCAxMzAuMSAxMjcuNCAxMzAuMSAxMjcuNCAxMzAuMSAxMjcuNCAxMzAuMSAxMjcuMyAxMzAuMSAxMjcuMyAxMzAuMSAxMjcuMyAxMzAuMSAxMjcuMyAxMzAuMiAxMjcuMiAxMzAuMiAxMjcuMiAxMzAuMiAxMjcuMiAxMzAuMiAxMjcuMiAxMzAuMiAxMjcuMSAxMzAuMiAxMjcuMSAxMzAuMiAxMjcuMSAxMzAuMiAxMjcuMSAxMzAuMyAxMjcgMTMwLjMgMTI3IDEzMC4zIDEyNyAxMzAuMyAxMjcgMTMwLjMgMTI3IDEzMC4zIDEyNyAxMzAuNCAxMjYuOSAxMzAuNCAxMjYuOSAxMzAuNCAxMjYuOSAxMzAuNCAxMjYuOSAxMzAuNCAxMjYuOCAxMzAuNCAxMjYuOCAxMzAuNCAxMjYuOCAxMzAuNCAxMjYuOCAxMzAuNCAxMjYuOCAxMzAuNCAxMjYuOCAxMzAuNSAxMjYuNyAxMzAuNSAxMjYuNyAxMzAuNSAxMjYuNyAxMzAuNSAxMjYuNyAxMzAuNSAxMjYuNyAxMzAuNSAxMjYuNyAxMzAuNSAxMjYuNiAxMzAuNSAxMjYuNiAxMzAuNSAxMjYuNiAxMzAuNSAxMjYuNiAxMzAuNiAxMjYuNSAxMzAuNiAxMjYuNSAxMzAuNiAxMjYuNSAxMzAuNiAxMjYuNSAxMzAuNiAxMjYuNSAxMzAuNiAxMjYuNSAxMzAuNiAxMjYuNCAxMzAuNiAxMjYuNCAxMzAuNyAxMjYuNCAxMzAuNyAxMjYuNCAxMzAuNyAxMjYuNCAxMzAuNyAxMjYuNCAxMzAuNyAxMjYuMyAxMzAuNyAxMjYuMyAxMzAuNyAxMjYuMyAxMzAuNyAxMjYuM1pNMTQwIDE1OS42QzE0MS41IDE1OC4xIDE0Mi42IDE1NS44IDE0Mi42IDE1My4zIDE0Mi42IDE1MSAxNDAuMSAxNDYgMTM3LjQgMTQxLjFMMTM3LjQgMTQxLjEgMTM3LjQgMTQxLjEgMTM3LjQgMTQxLjFDMTM3IDE0MC40IDEzNi43IDEzOS44IDEzNi4zIDEzOS4xTDEzNi4yIDEzOSAxMzYuMiAxMzguOSAxMzYuMSAxMzguOSAxMzYuMSAxMzguOCAxMzYgMTM4LjUgMTM1LjkgMTM4LjVDMTM1LjIgMTM3LjIgMTM0LjUgMTM2LjEgMTMzLjkgMTM1TDEzMy44IDEzNC45IDEzMy44IDEzNC44IDEzMy44IDEzNC44IDEzMy43IDEzNC43IDEzMy42IDEzNC42IDEzMy42IDEzNC41IDEzMy40IDEzNC44IDEzMy4zIDEzNS4xIDEzMy4zIDEzNS4xIDEzMy4xIDEzNS40IDEzMy4xIDEzNS40IDEzMi45IDEzNS43IDEzMi43IDEzNiAxMzIuNyAxMzYgMTMyLjUgMTM2LjMgMTMyLjUgMTM2LjMgMTMyLjQgMTM2LjYgMTMyLjIgMTM2LjkgMTMyLjIgMTM2LjkgMTMyIDEzNy4yIDEzMS44IDEzNy41IDEzMS44IDEzNy41IDEzMS42IDEzNy45IDEzMS42IDEzNy45IDEzMS40IDEzOC4yIDEzMS40IDEzOC4yIDEzMS4yIDEzOC41IDEzMSAxMzguOSAxMzEgMTM4LjkgMTMwLjggMTM5LjIgMTMwLjggMTM5LjIgMTMwLjcgMTM5LjUgMTMwLjcgMTM5LjUgMTMwLjUgMTM5LjkgMTMwLjUgMTM5LjkgMTMwLjMgMTQwLjIgMTMwLjEgMTQwLjUgMTMwLjEgMTQwLjUgMTI5LjkgMTQwLjkgMTI5LjkgMTQwLjkgMTI5LjcgMTQxLjIgMTI5LjcgMTQxLjIgMTI5LjYgMTQxLjUgMTI5LjQgMTQxLjkgMTI5LjIgMTQyLjIgMTI5LjIgMTQyLjIgMTI5IDE0Mi42IDEyOSAxNDIuNiAxMjguOCAxNDIuOSAxMjguNiAxNDMuMiAxMjguNiAxNDMuMiAxMjguNSAxNDMuNiAxMjguMyAxNDMuOSAxMjguMyAxNDMuOSAxMjguMSAxNDQuMyAxMjguMSAxNDQuMyAxMjcuOSAxNDQuNiAxMjcuOSAxNDQuNiAxMjcuOCAxNDQuOSAxMjcuNiAxNDUuMiAxMjcuNCAxNDUuNiAxMjcuMyAxNDUuOSAxMjcuMyAxNDUuOSAxMjcuMSAxNDYuMiAxMjcgMTQ2LjUgMTI3IDE0Ni41IDEyNi44IDE0Ni44IDEyNi44IDE0Ni44IDEyNi43IDE0Ny4yIDEyNi43IDE0Ny4yIDEyNi41IDE0Ny41IDEyNi41IDE0Ny41IDEyNi40IDE0Ny44IDEyNi40IDE0Ny44IDEyNi4zIDE0OC4xIDEyNi4xIDE0OC40IDEyNiAxNDguNiAxMjYgMTQ4LjYgMTI1LjkgMTQ5IDEyNS45IDE0OSAxMjUuNyAxNDkuMyAxMjUuNyAxNDkuNSAxMjUuNyAxNDkuNSAxMjUuNiAxNDkuOCAxMjUuNiAxNDkuOCAxMjUuNCAxNTAgMTI1LjQgMTUwIDEyNS4zIDE1MC4zIDEyNS4zIDE1MC4zIDEyNS4zIDE1MC42IDEyNS4zIDE1MC42IDEyNS4yIDE1MC44IDEyNS4yIDE1MC44IDEyNS4xIDE1MS4xIDEyNS4xIDE1MS4xIDEyNSAxNTEuMyAxMjUgMTUxLjMgMTI1IDE1MS42IDEyNSAxNTEuNiAxMjQuOSAxNTEuOCAxMjQuOSAxNTEuOCAxMjQuOCAxNTIgMTI0LjggMTUyIDEyNC44IDE1Mi4yIDEyNC44IDE1Mi4yIDEyNC44IDE1Mi40IDEyNC44IDE1Mi40QzEyNC43IDE1Mi41IDEyNC43IDE1Mi41IDEyNC43IDE1Mi42TDEyNC43IDE1Mi42IDEyNC43IDE1Mi44IDEyNC43IDE1Mi44QzEyNC43IDE1Mi45IDEyNC43IDE1Mi45IDEyNC43IDE1M0wxMjQuNyAxNTMgMTI0LjYgMTUzLjIgMTI0LjYgMTUzLjIgMTI0LjYgMTUzLjMgMTI0LjYgMTUzLjRDMTI0LjcgMTU1LjkgMTI1LjcgMTU4LjEgMTI3LjMgMTU5LjcgMTI4LjkgMTYxLjMgMTMxLjEgMTYyLjMgMTMzLjYgMTYyLjMgMTM2LjEgMTYyLjMgMTM4LjMgMTYxLjMgMTQwIDE1OS42Wk0xMzUuMyA3Mi43QzEzNi4yIDc0LjMgMTM1LjYgNzYuMyAxMzMuOSA3Ny4yIDEzMi4zIDc4IDEzMC4zIDc3LjQgMTI5LjQgNzUuOCAxMjguNyA3NC4zIDEyNy42IDcyLjkgMTI2LjMgNzEuOSAxMjUgNzAuOCAxMjMuNCA3MC4xIDEyMS44IDY5LjZMMTIxLjggNjkuNkMxMjAuOCA2OS40IDExOS44IDY5LjIgMTE4LjkgNjkuMiAxMTcuOCA2OS4yIDExNi44IDY5LjMgMTE1LjggNjkuNSAxMTQgNjkuOSAxMTIuMyA2OC44IDExMS44IDY3IDExMS41IDY1LjIgMTEyLjYgNjMuNSAxMTQuNCA2MyAxMTUuOCA2Mi43IDExNy40IDYyLjYgMTE4LjkgNjIuNiAxMjAuNSA2Mi42IDEyMiA2Mi44IDEyMy40IDYzLjJMMTIzLjYgNjMuMkMxMjYuMSA2My45IDEyOC40IDY1LjEgMTMwLjQgNjYuNyAxMzIuNSA2OC4zIDEzNC4xIDcwLjQgMTM1LjMgNzIuN1pNMzcuMiA3NS44QzM2LjQgNzcuNCAzNC40IDc4IDMyLjcgNzcuMiAzMS4xIDc2LjMgMzAuNSA3NC4zIDMxLjMgNzIuNyAzMi41IDcwLjQgMzQuMiA2OC4zIDM2LjIgNjYuNyAzOC4yIDY1LjEgNDAuNiA2My45IDQzLjEgNjMuMkw0My4yIDYzLjJDNDQuNyA2Mi44IDQ2LjIgNjIuNiA0Ny43IDYyLjYgNDkuMyA2Mi42IDUwLjggNjIuNyA1Mi4zIDYzIDU0LjEgNjMuNSA1NS4yIDY1LjIgNTQuOCA2NyA1NC40IDY4LjggNTIuNiA2OS45IDUwLjkgNjkuNSA0OS45IDY5LjMgNDguOCA2OS4yIDQ3LjggNjkuMiA0Ni44IDY5LjIgNDUuOCA2OS40IDQ0LjkgNjkuNkw0NC45IDY5LjZDNDMuMiA3MC4xIDQxLjcgNzAuOCA0MC40IDcxLjkgMzkuMSA3Mi45IDM4IDc0LjMgMzcuMiA3NS44Wk0xMjUuMiA5Mi43QzEyNS4yIDkwLjcgMTI0LjUgODguOSAxMjMuMyA4Ny42IDEyMi4yIDg2LjUgMTIwLjYgODUuNyAxMTkgODUuNyAxMTcuMyA4NS43IDExNS44IDg2LjUgMTE0LjcgODcuNiAxMTMuNSA4OC45IDExMi44IDkwLjcgMTEyLjggOTIuNyAxMTIuOCA5NC42IDExMy41IDk2LjQgMTE0LjcgOTcuNyAxMTUuOCA5OC45IDExNy4zIDk5LjYgMTE5IDk5LjYgMTIwLjYgOTkuNiAxMjIuMiA5OC45IDEyMy4zIDk3LjcgMTI0LjUgOTYuNCAxMjUuMiA5NC42IDEyNS4yIDkyLjdaTTEyOC4yIDgzLjJDMTMwLjQgODUuNiAxMzEuOCA4OSAxMzEuOCA5Mi43IDEzMS44IDk2LjQgMTMwLjQgOTkuNyAxMjguMiAxMDIuMiAxMjUuOCAxMDQuNyAxMjIuNiAxMDYuMyAxMTkgMTA2LjMgMTE1LjQgMTA2LjMgMTEyLjEgMTA0LjcgMTA5LjggMTAyLjIgMTA3LjUgOTkuNyAxMDYuMSA5Ni40IDEwNi4xIDkyLjcgMTA2LjEgODkgMTA3LjUgODUuNiAxMDkuOCA4My4yIDExMi4xIDgwLjYgMTE1LjQgNzkuMSAxMTkgNzkuMSAxMjIuNiA3OS4xIDEyNS44IDgwLjYgMTI4LjIgODMuMlpNNTMuOSA5Mi43QzUzLjkgOTAuNyA1My4yIDg4LjkgNTIgODcuNiA1MC45IDg2LjUgNDkuNCA4NS43IDQ3LjcgODUuNyA0NiA4NS43IDQ0LjUgODYuNSA0My40IDg3LjYgNDIuMiA4OC45IDQxLjUgOTAuNyA0MS41IDkyLjcgNDEuNSA5NC42IDQyLjIgOTYuNCA0My40IDk3LjcgNDQuNSA5OC45IDQ2IDk5LjYgNDcuNyA5OS42IDQ5LjQgOTkuNiA1MC45IDk4LjkgNTIgOTcuNyA1My4yIDk2LjQgNTMuOSA5NC42IDUzLjkgOTIuN1pNNTYuOSA4My4yQzU5LjIgODUuNiA2MC41IDg5IDYwLjUgOTIuNyA2MC41IDk2LjQgNTkuMiA5OS43IDU2LjkgMTAyLjIgNTQuNSAxMDQuNyA1MS4zIDEwNi4zIDQ3LjcgMTA2LjMgNDQuMSAxMDYuMyA0MC45IDEwNC43IDM4LjUgMTAyLjIgMzYuMiA5OS43IDM0LjggOTYuNCAzNC44IDkyLjcgMzQuOCA4OSAzNi4yIDg1LjYgMzguNSA4My4yIDQwLjkgODAuNiA0NC4xIDc5LjEgNDcuNyA3OS4xIDUxLjMgNzkuMSA1NC41IDgwLjYgNTYuOSA4My4yWiIgZmlsbD0icmdiKDEsMjIsMzkpIiBmaWxsLW9wYWNpdHk9IjAuMiIvPjwvZz48L3N2Zz4K"},e51e:function(M,j,I){"use strict";I.r(j);var g=function(){var M=this,j=M.$createElement,I=M._self._c||j;return I("div",{staticClass:"fixed-center text-center"},[M._m(0),M._m(1),I("q-btn",{staticStyle:{width:"200px"},attrs:{color:"secondary"},on:{click:function(j){return M.$router.push("/")}}},[M._v("Go back")])],1)},A=[function(){var M=this,j=M.$createElement,g=M._self._c||j;return g("p",[g("img",{staticStyle:{width:"30vw","max-width":"150px"},attrs:{src:I("c4e4")}})])},function(){var M=this,j=M.$createElement,I=M._self._c||j;return I("p",{staticClass:"text-faded"},[M._v("Sorry, nothing here..."),I("strong",[M._v("(404)")])])}],N={name:"Error404"},D=N,T=I("2877"),x=Object(T["a"])(D,g,A,!1,null,null,null);j["default"]=x.exports}}]); -------------------------------------------------------------------------------- /docs/js/6.a5e9946b.js: -------------------------------------------------------------------------------- 1 | (window["webpackJsonp"]=window["webpackJsonp"]||[]).push([[6],{2514:function(e,t,a){"use strict";var o=function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("section",{staticClass:"page-header"},[a("div",{staticClass:"text-h1 project-name"},[e._v("QPlaceHolder")]),a("div",{staticClass:"text-h2 project-tagline"}),a("div",{staticClass:"byline"},[e._v("Created and maintained by Jeff Galbraith")]),a("div",{staticClass:"quasar"},[e._v("A Quasar Framework App Extension")]),a("q-btn",{staticClass:"btn",attrs:{type:"a",href:"https://github.com/quasarframework/app-extension-qplaceholder",target:"_blank",label:"View on GitHub","no-caps":"",flat:""}}),a("q-btn",{staticClass:"btn",attrs:{to:"/docs",label:"Docs","no-caps":"",flat:""}}),a("q-btn",{staticClass:"btn",attrs:{to:"/examples",label:"Examples","no-caps":"",flat:""}}),a("q-btn",{staticClass:"btn",attrs:{type:"a",href:"https://donate.quasar.dev",target:"_blank",label:"Donate","no-caps":"",flat:""}})],1),a("main",{staticClass:"flex flex-start justify-center inset-shadow"},[a("div",{staticClass:"q-pa-md col-12-sm col-8-md col-6-lg inset-shadow",staticStyle:{width:"100%",height:"3px"}}),a("div",{staticClass:"q-pa-md col-12-sm col-8-md col-6-lg bg-white shadow-1",staticStyle:{"max-width":"800px",width:"100%"}},[e._t("default")],2)])])},n=[],r={name:"Hero"},l=r,s=a("2877"),i=Object(s["a"])(l,o,n,!1,null,null,null);t["a"]=i.exports},"8b24":function(e,t,a){"use strict";a.r(t);var o=function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("hero",[a("q-markdown",{attrs:{src:e.markdown,toc:""},on:{data:e.onToc}})],1)},n=[],r=a("2514"),l='QPlaceholder\n===\n\nQPlaceholder is a [Quasar App Extension](https://quasar.dev/app-extensions/introduction). It allows you to display a placeholder before your data arrives from your server.\n\n![QPlaceholder](statics/qplaceholder.png "QPlaceholder" =800x800)\n\nThis work is currently in `beta` and there are expected changes while things get worked out. Your help with testing is greatly appreciated. Suggestions and PRs welcomed.\n\n# Install\nTo add this App Extension to your Quasar application, run the following (in your Quasar app folder):\n```\nquasar ext add @quasar/qplaceholder\n```\n\n# Uninstall\nTo remove this App Extension from your Quasar application, run the following (in your Quasar app folder):\n```\nquasar ext remove @quasar/qplaceholder\n```\n\n# Describe\n(TBD) You can use `quasar describe QPlaceholder`\n\n# Docs\nCan be found [here](https://quasarframework.github.io/app-extension-qplaceholder).\n\n# Examples\nCan be found [here](https://quasarframework.github.io/app-extension-qplaceholder/examples).\n\n# Demo (source) Project\nCan be found [here](https://github.com/quasarframework/app-extension-qplaceholder/tree/master/demo).\n\n# QPlaceholder API\n\n## QPlaceholder Properties\n| Vue Property | Type | Description |\n| --- | --- | --- |\n| value | Boolean | v-model: use to show/hide the component |\n| animated | Boolean | make the component animated (performance hit) |\n| image-size | Number | how big to make the image placeholder (in px).
Default: 80 |\n| avatar | Boolean | make the image placeholder round |\n| title | Boolean | display a title placeholder |\n| title-width | Number | the width of the title placeholder as a percentage.
Default: 50 |\n| title-height | Number | the height of the title placeholder (in px).
Default 16 |\n| rows | Number | the number of placeholder rows to be displayed.
Default: 4 |\n| row-height | Number | the height of a row placeholder (in px).
Default: 12 |\n| random | Boolean | normally the width of a placeholder row is 100%. Using `random` causes each row to be different lengths |\n| color | String | The color of the placeholder foreground. Any color from the [Quasar Color Pallete](https://quasar.dev/style/color-palette) or any CSS color.
Default: #eee |\n| background-color | String | The color of the placeholder background. Any color from the [Quasar Color Pallete](https://quasar.dev/style/color-palette) or any CSS color.
Default: #eee |\n| shimmer-color | String | The color of the placeholder shimmer when `animated` is used. Any color from the [Quasar Color Pallete](https://quasar.dev/style/color-palette) or any CSS color.
Default: #eee |\n\n\n# Donate\nIf you appreciate the work that went into this App Extension, please consider [donating to Quasar](https://donate.quasar.dev).\n\n---\nThis page created with [QMarkdown](https://quasarframework.github.io/app-extension-qmarkdown), another great Quasar App Extension.',s={name:"PageIndex",components:{Hero:r["a"]},data:function(){return{markdown:l}},computed:{toc:{get:function(){return this.$store.state.common.toc},set:function(e){this.$store.commit("common/toc",e)}}},methods:{onToc:function(e){this.toc=e}}},i=s,c=a("2877"),h=Object(c["a"])(i,o,n,!1,null,null,null);t["default"]=h.exports}}]); -------------------------------------------------------------------------------- /docs/js/7.86b0444c.js: -------------------------------------------------------------------------------- 1 | (window["webpackJsonp"]=window["webpackJsonp"]||[]).push([[7],{"4bd0":function(t,a,e){"use strict";e.r(a);var r=function(){var t=this,a=t.$createElement,e=t._self._c||a;return e("q-list",[e("q-item",{attrs:{clickable:"",to:"/docs"}},[e("q-item-section",{attrs:{avatar:""}},[e("q-icon",{attrs:{name:"bolt"}})],1),e("q-item-section",[e("q-item-label",[t._v("QPlaceholder docs")]),e("q-item-label",{attrs:{caption:""}},[t._v("Documentation")])],1)],1),e("q-item",{attrs:{clickable:"",to:"/examples"}},[e("q-item-section",{attrs:{avatar:""}},[e("q-icon",{attrs:{name:"bolt"}})],1),e("q-item-section",[e("q-item-label",[t._v("QPlaceholder examples")]),e("q-item-label",{attrs:{caption:""}},[t._v("Examples of how to do it")])],1)],1),e("q-separator"),e("q-item",{attrs:{clickable:"",tag:"a",target:"_blank",href:"https://github.com/quasarframework/app-extension-qplaceholder"}},[e("q-item-section",{attrs:{avatar:""}},[e("q-icon",{attrs:{name:"extension"}})],1),e("q-item-section",[e("q-item-label",[t._v("QPlaceholder home")]),e("q-item-label",{attrs:{caption:""}},[t._v("qplaceholder")])],1)],1),e("q-item",{attrs:{clickable:"",tag:"a",target:"_blank",href:"https://github.com/quasarframework/app-extension-qmarkdown"}},[e("q-item-section",{attrs:{avatar:""}},[e("q-icon",{attrs:{name:"extension"}})],1),e("q-item-section",[e("q-item-label",[t._v("QMarkdown home")]),e("q-item-label",{attrs:{caption:""}},[t._v("@quasar/qmarkdown")])],1)],1),e("q-separator"),e("q-item",{attrs:{clickable:"",tag:"a",target:"_blank",href:"http://quasar.dev"}},[e("q-item-section",{attrs:{avatar:""}},[e("q-icon",{attrs:{name:"school"}})],1),e("q-item-section",[e("q-item-label",[t._v("Docs")]),e("q-item-label",{attrs:{caption:""}},[t._v("quasar.dev")])],1)],1),e("q-item",{attrs:{clickable:"",tag:"a",target:"_blank",href:"https://github.com/quasarframework/"}},[e("q-item-section",{attrs:{avatar:""}},[e("q-icon",{attrs:{name:"code"}})],1),e("q-item-section",[e("q-item-label",[t._v("Github")]),e("q-item-label",{attrs:{caption:""}},[t._v("github.com/quasarframework")])],1)],1),e("q-item",{attrs:{clickable:"",tag:"a",target:"_blank",href:"http://chat.quasar.dev"}},[e("q-item-section",{attrs:{avatar:""}},[e("q-icon",{attrs:{name:"chat"}})],1),e("q-item-section",[e("q-item-label",[t._v("Discord Chat Channel")]),e("q-item-label",{attrs:{caption:""}},[t._v("chat.quasar.dev")])],1)],1),e("q-item",{attrs:{clickable:"",tag:"a",target:"_blank",href:"https://forum.quasar.dev"}},[e("q-item-section",{attrs:{avatar:""}},[e("q-icon",{attrs:{name:"record_voice_over"}})],1),e("q-item-section",[e("q-item-label",[t._v("Forum")]),e("q-item-label",{attrs:{caption:""}},[t._v("forum.quasar.dev")])],1)],1),e("q-item",{attrs:{clickable:"",tag:"a",target:"_blank",href:"https://twitter.com/quasarframework"}},[e("q-item-section",{attrs:{avatar:""}},[e("q-icon",{attrs:{name:"rss_feed"}})],1),e("q-item-section",[e("q-item-label",[t._v("Twitter")]),e("q-item-label",{attrs:{caption:""}},[t._v("@quasarframework")])],1)],1)],1)},i=[],s={name:"EssentailLinks",data:function(){return{}}},o=s,l=e("2877"),n=Object(l["a"])(o,r,i,!1,null,null,null);a["default"]=n.exports}}]); -------------------------------------------------------------------------------- /docs/js/8.7c577117.js: -------------------------------------------------------------------------------- 1 | (window["webpackJsonp"]=window["webpackJsonp"]||[]).push([[8],{b1d4:function(t,e,a){"use strict";a.r(e);var n=function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"q-pa-sm"},[a("q-placeholder",{attrs:{animated:""}})],1)},s=[],l=a("2877"),c={},r=Object(l["a"])(c,n,s,!1,null,null,null);e["default"]=r.exports}}]); -------------------------------------------------------------------------------- /docs/js/9.4a154784.js: -------------------------------------------------------------------------------- 1 | (window["webpackJsonp"]=window["webpackJsonp"]||[]).push([[9],{"5c87":function(a,t,e){"use strict";e.r(t);var n=function(){var a=this,t=a.$createElement,e=a._self._c||t;return e("div",{staticClass:"q-pa-sm"},[e("q-placeholder",{attrs:{animated:"",image:"",avatar:""}})],1)},s=[],l=e("2877"),c={},r=Object(l["a"])(c,n,s,!1,null,null,null);t["default"]=r.exports}}]); -------------------------------------------------------------------------------- /docs/js/app.65bed4b1.js: -------------------------------------------------------------------------------- 1 | (window["webpackJsonp"]=window["webpackJsonp"]||[]).push([[1],{0:function(e,t,n){e.exports=n("2f39")},"018e":function(e,t){},"2f39":function(e,t,n){"use strict";n.r(t);var r={};n.r(r),n.d(r,"toc",(function(){return U}));var a={};n.r(a),n.d(a,"toc",(function(){return W}));var o=n("967e"),c=n.n(o),u=(n("a481"),n("96cf"),n("fa84")),i=n.n(u),s=(n("7d6e"),n("e54f"),n("62f2"),n("7e6d"),n("46f6"),n("a1e8"),n("d5d7"),n("0336"),n("2b0e")),p=n("b05d"),l=n("9c40"),f=n("f09f"),b=n("a370"),d=n("9404"),h=n("3b73"),w=n("e359"),Q=n("0016"),x=n("66e5"),m=n("0170"),v=n("4074"),k=n("4d5a"),y=n("1c1c"),g=n("9989"),S=n("09e3"),T=n("5096"),P=n("4983"),I=n("eb85"),C=n("7460"),q=n("823b"),L=n("adad"),V=n("429b"),A=n("65c6"),B=n("6ac5"),E=n("05c0"),J=n("714f"),$=n("4396"),_=n("2a19"),j=n("0967"),D=n("09f9");s["a"].use(p["a"],{config:{},components:{QBtn:l["a"],QCard:f["a"],QCardSection:b["a"],QDrawer:d["a"],QExpansionItem:h["a"],QHeader:w["a"],QIcon:Q["a"],QItem:x["a"],QItemLabel:m["a"],QItemSection:v["a"],QLayout:k["a"],QList:y["a"],QPage:g["a"],QPageContainer:S["a"],QPageScroller:T["a"],QScrollArea:P["a"],QSeparator:I["a"],QTab:C["a"],QTabPanel:q["a"],QTabPanels:L["a"],QTabs:V["a"],QToolbar:A["a"],QToolbarTitle:B["a"],QTooltip:E["a"]},directives:{Ripple:J["a"],Scroll:$["a"]},plugins:{Notify:_["a"],Platform:j["b"],Screen:D["a"]}});var H=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{attrs:{id:"q-app"}},[n("router-view")],1)},N=[],O={name:"App"},R=O,z=n("2877"),F=Object(z["a"])(R,H,N,!1,null,null,null),G=F.exports,K=n("2f62"),M={toc:[]},U=function(e){return e.toc},W=function(e,t){e.toc=t},X=n("018e"),Y={namespaced:!0,state:M,getters:r,mutations:a,actions:X};s["a"].use(K["a"]);var Z=function(){var e=new K["a"].Store({modules:{common:Y},strict:!1});return e},ee=n("8c4f"),te=[{path:"/",redirect:"/docs"},{path:"/docs",component:function(){return n.e(0).then(n.bind(null,"713b"))},children:[{path:"",component:function(){return n.e(6).then(n.bind(null,"8b24"))}}]},{path:"/examples",component:function(){return n.e(0).then(n.bind(null,"713b"))},children:[{path:"",component:function(){return n.e(4).then(n.bind(null,"0960"))}}]}];te.push({path:"*",component:function(){return n.e(5).then(n.bind(null,"e51e"))}});var ne=te;s["a"].use(ee["a"]);var re=function(){var e=new ee["a"]({scrollBehavior:function(){return{x:0,y:0}},routes:ne,mode:"history",base:"/app-extension-qplaceholder/"});return e},ae=function(){return oe.apply(this,arguments)};function oe(){return oe=i()(c.a.mark((function e(){var t,n,r;return c.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:if("function"!==typeof Z){e.next=6;break}return e.next=3,Z({Vue:s["a"]});case 3:e.t0=e.sent,e.next=7;break;case 6:e.t0=Z;case 7:if(t=e.t0,"function"!==typeof re){e.next=14;break}return e.next=11,re({Vue:s["a"],store:t});case 11:e.t1=e.sent,e.next=15;break;case 14:e.t1=re;case 15:return n=e.t1,t.$router=n,r={router:n,store:t,render:function(e){return e(G)}},r.el="#q-app",e.abrupt("return",{app:r,store:t,router:n});case 20:case"end":return e.stop()}}),e)}))),oe.apply(this,arguments)}var ce=n("a670"),ue=n("4b46"),ie=n("190a"),se=n("c4cf"),pe=n("ba0a");function le(){return fe.apply(this,arguments)}function fe(){return fe=i()(c.a.mark((function e(){var t,n,r,a,o,u,i,p,l;return c.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,ae();case 2:t=e.sent,n=t.app,r=t.store,a=t.router,o=!0,u=function(e){o=!1,window.location.href=e},i=window.location.href.replace(window.location.origin,""),p=[ce["default"],ue["default"],ie["a"],se["a"],pe["a"]],l=0;case 11:if(!(!0===o&&l -------------------------------------------------------------------------------- /docs/statics/qplaceholder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/quasarframework/app-extension-qplaceholder/73ad84d9bed4e8959e19b864c98680a5477e0786/docs/statics/qplaceholder.png -------------------------------------------------------------------------------- /docs/statics/qplaceholder2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/quasarframework/app-extension-qplaceholder/73ad84d9bed4e8959e19b864c98680a5477e0786/docs/statics/qplaceholder2.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@quasar/quasar-app-extension-qplaceholder", 3 | "version": "1.0.0-alpha.6", 4 | "description": "Placeholder generation for your Quasar App", 5 | "author": "Jeff Galbraith ", 6 | "license": "MIT", 7 | "main": "src/index.js", 8 | "scripts": { 9 | "lint": "eslint --ext .js,.vue src", 10 | "lint-fix": "eslint --ext .js,.vue src --fix", 11 | "build-demo": "cd ./demo && yarn build && cd .. && cp ./_redirects ./demo/dist/spa && rm -r -f ./docs && cp -r ./demo/dist/spa/. ./docs", 12 | "test": "echo \"No test specified\" && exit 0" 13 | }, 14 | "publishConfig": { 15 | "access": "public" 16 | }, 17 | "repository": { 18 | "type": "git", 19 | "url": "git+https://github.com/quasarframework/app-extension-qplaceholder.git" 20 | }, 21 | "bugs": "https://github.com/quasarframework/app-extension-qplaceholder/issues", 22 | "homepage": "https://github.com/quasarframework/app-extension-qplaceholder", 23 | "engines": { 24 | "node": ">= 8.9.0", 25 | "npm": ">= 5.6.0", 26 | "yarn": ">= 1.6.0" 27 | }, 28 | "devDependencies": { 29 | "@vue/eslint-config-standard": "^5.1.2", 30 | "babel-eslint": "^10.1.0", 31 | "eslint": "^7.2.0", 32 | "eslint-loader": "^4.0.2", 33 | "eslint-plugin-vue": "^6.2.2" 34 | }, 35 | "dependencies": { 36 | "quasar-mixin-colorize": "^1.0.0-alpha.9" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/boot/qplaceholder.js: -------------------------------------------------------------------------------- 1 | import QPlaceholder from '@quasar/quasar-app-extension-qplaceholder/src/component/QPlaceholder' 2 | 3 | export default ({ Vue, ssrContext }) => { 4 | Vue.component('q-placeholder', QPlaceholder(ssrContext)) 5 | } 6 | -------------------------------------------------------------------------------- /src/component/QPlaceholder.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | 3 | // Styles 4 | import './placeholder.styl' 5 | import 'quasar-mixin-colorize/src/qColors.styl' 6 | 7 | import { Colorize, calculateColor } from 'quasar-mixin-colorize' 8 | 9 | export default function (ssrContext) { 10 | return Vue.extend({ 11 | name: 'q-placeholder', 12 | 13 | mixins: [Colorize], 14 | 15 | props: { 16 | value: Boolean, // visible/hide 17 | animated: Boolean, 18 | image: Boolean, 19 | imageSize: { 20 | type: Number, 21 | default: 80, 22 | validator: v => v > 0 23 | }, 24 | avatar: Boolean, 25 | title: Boolean, 26 | titleWidth: { 27 | type: Number, 28 | default: 50, 29 | validator: v => v > 0 30 | }, 31 | titleHeight: { 32 | type: Number, 33 | default: 16, 34 | validator: v => v > 0 35 | }, 36 | rows: { 37 | type: Number, 38 | default: 4, 39 | validator: v => v > 0 40 | }, 41 | rowHeight: { 42 | type: Number, 43 | default: 12, 44 | validator: v => v > 0 45 | }, 46 | random: Boolean, 47 | color: { 48 | type: String, 49 | default: '#eee' // any color 50 | }, 51 | backgroundColor: { 52 | type: String, 53 | default: '#fff' // any color 54 | }, 55 | shimmerColor: { 56 | type: String, 57 | default: '#ddd' 58 | } 59 | }, 60 | 61 | data () { 62 | return { 63 | } 64 | }, 65 | 66 | computed: { 67 | styles () { 68 | return { 69 | '--placeholder-color': calculateColor(this.color), 70 | '--placeholder-bgcolor': calculateColor(this.backgroundColor), 71 | '--placeholder-shimmercolor': calculateColor(this.shimmerColor) 72 | } 73 | } 74 | }, 75 | 76 | methods: { 77 | __renderTitle (h) { 78 | if (this.title !== true) return '' 79 | 80 | return h('h3', { 81 | staticClass: 'q-placeholder2__title' + 82 | (this.animated === true ? ' q-placeholder2__animated-background' : ''), 83 | style: { 84 | width: this.titleWidth + '%', 85 | minHeight: this.titleHeight + 'px', 86 | fontSize: this.titleHeight + 'px', 87 | lineHeight: this.titleHeight + 'px', 88 | ...this.styles 89 | } 90 | }) 91 | }, 92 | 93 | __renderRow (h) { 94 | let min = 50 95 | let max = 95 96 | let random = Math.round(Math.random() * (+max - +min) + +min) 97 | 98 | return h('ul', { 99 | staticClass: 'q-placeholder2__line' + 100 | (this.animated === true ? ' q-placeholder2__animated-background' : ''), 101 | style: { 102 | minHeight: this.rowHeight + 'px', 103 | marginTop: this.rowHeight + 'px', 104 | width: this.random ? random + '%' : '100%', 105 | ...this.styles 106 | } 107 | }) 108 | }, 109 | 110 | __renderRows (h) { 111 | return [...Array(parseInt(this.rows))] 112 | .map((_, i) => i) 113 | .map(idx => this.__renderRow(h)) 114 | }, 115 | 116 | __renderParagraph (h) { 117 | return h('ul', { 118 | staticClass: 'q-placeholder2__paragraph' 119 | }, [ 120 | this.__renderRows(h) 121 | ]) 122 | }, 123 | 124 | __renderContent (h) { 125 | return h('div', { 126 | staticClass: 'q-placeholder2__content q-placeholder2__column', 127 | style: { 128 | minHeight: '16px', 129 | overflow: 'hidden' 130 | } 131 | }, [ 132 | this.__renderTitle(h), 133 | this.__renderParagraph(h) 134 | ]) 135 | }, 136 | 137 | __renderImage (h) { 138 | if (this.image !== true) return '' 139 | 140 | return h('div', { 141 | staticClass: 'q-placeholder2__sidebar q-placeholder2__column', 142 | style: { 143 | minWidth: this.imageSize + 'px', 144 | maxWidth: this.imageSize + 'px', 145 | minHeight: this.imageSize + 'px', 146 | maxHeight: this.imageSize + 'px', 147 | ...this.styles 148 | } 149 | }, [ 150 | h('div', { 151 | staticClass: 'q-placeholder2__avatar' + 152 | (this.avatar === true ? ' q-placeholder2__avatar--circle' : '') + 153 | (this.animated === true ? ' q-placeholder2__animated-background' : ''), 154 | style: { 155 | '--placeholder-color': calculateColor(this.color), 156 | '--placeholder-bgcolor': calculateColor(this.backgroundColor), 157 | '--placeholder-shimmercolor': calculateColor(this.shimmerColor) 158 | } 159 | }) 160 | ]) 161 | } 162 | }, 163 | 164 | render (h) { 165 | return h('div', { 166 | staticClass: 'q-placeholder2 q-placeholder2__row', // this.classes, 167 | style: this.styles 168 | }, [ 169 | this.__renderImage(h), 170 | this.__renderContent(h) 171 | ]) 172 | } 173 | }) 174 | } 175 | -------------------------------------------------------------------------------- /src/component/placeholder-variable.styl: -------------------------------------------------------------------------------- 1 | $box-shadow ?= 1px 1px 7px 1px rgba(0,0,0,.2) -------------------------------------------------------------------------------- /src/component/placeholder.styl: -------------------------------------------------------------------------------- 1 | // @import './placeholder-variables' 2 | 3 | .q-placeholder2 4 | position relative 5 | overflow: hidden; 6 | background-color var(--placeholder-bgcolor, #fff) 7 | min-width: 50%; 8 | pointer-events: none; 9 | user-select: none; 10 | 11 | &__sidebar 12 | margin-right 16px 13 | 14 | &__avatar 15 | background-color var(--placeholder-color, #eee) 16 | vertical-align top 17 | width 100% 18 | height 100% 19 | 20 | &--circle 21 | border-radius 50% 22 | 23 | &__content 24 | width 100% 25 | 26 | &__title 27 | background-color var(--placeholder-color, #eee) 28 | margin-top 16px 29 | height 16px 30 | width 100% 31 | margin-block-start .5em 32 | margin-block-end .5em 33 | 34 | &__paragraph 35 | outline none 36 | list-style none 37 | margin-block-start 0 38 | margin-block-end 0 39 | margin-inline-start 0 40 | margin-inline-end 0 41 | padding-inline-start 0 42 | 43 | &__line 44 | background-color var(--placeholder-color, #eee) 45 | height 16px 46 | width 100% 47 | margin 0 48 | padding 0 49 | 50 | &:last-child 51 | margin-bottom .5em 52 | 53 | &__row 54 | display flex 55 | flex-direction row 56 | flex-wrap nowrap 57 | width 100% 58 | // border 1px solid black 59 | 60 | &__column 61 | display flex 62 | flex-direction column 63 | flex-basis 100% 64 | flex 1 65 | // border 1px solid black 66 | 67 | &__mask 68 | background-color var(--placeholder-bgcolor, #fff) 69 | 70 | &__divider 71 | background-color var(--placeholder-bgcolor, #fff) 72 | 73 | &__animated-background 74 | background linear-gradient(to right, var(--placeholder-color, #eee) 8%, var(--placeholder-shimmercolor, #ddd) 18%, var(--placeholder-color, #eee) 33%) 75 | animation q-placeholder2__shimmer 1.4s ease infinite 76 | background-size 1000% 100% 77 | animation-duration 2s 78 | 79 | @keyframes q-placeholder2__shimmer 80 | 0%{ 81 | background-position 100% 50% 82 | } 83 | 100%{ 84 | background-position 0 50% 85 | } 86 | 87 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Quasar App Extension index/runner script 3 | * (runs on each dev/build) 4 | * 5 | * API: https://github.com/quasarframework/quasar/blob/master/app/lib/app-extension/IndexAPI.js 6 | */ 7 | 8 | const extendConf = function (conf) { 9 | // make sure qplaceholder boot file is registered 10 | conf.boot.push('~@quasar/quasar-app-extension-qplaceholder/src/boot/qplaceholder.js') 11 | console.log(` App Extension (qplaceholder) Info: 'Adding qplaceholder boot reference to your quasar.conf.js'`) 12 | 13 | // make sure boot & component files transpile 14 | conf.build.transpileDependencies.push(/quasar-app-extension-qplaceholder[\\/]src/) 15 | 16 | // make sure these plugins are in the build 17 | // conf.framework.plugins.push('AppFullscreen') 18 | // conf.framework.plugins.push('Platform') 19 | // conf.framework.plugins.push('Screen') 20 | 21 | // conf.framework.directives.push('Scroll') 22 | 23 | // make sure qplaceholder css goes through webpack to avoid ssr issues 24 | conf.css.push('~@quasar/quasar-app-extension-qplaceholder/src/component/placeholder.styl') 25 | console.log(` App Extension (qplaceholder) Info: 'Adding placeholder.styl css reference to your quasar.conf.js'`) 26 | } 27 | 28 | module.exports = function (api) { 29 | // quasar compatibility check 30 | api.compatibleWith('@quasar/app', '^1.0.0 || ^2.0.0') 31 | 32 | // register JSON api 33 | // api.registerDescribeApi('QPlaceholder', './component/QPlaceholder.json') 34 | 35 | // extend quasar.conf 36 | api.extendQuasarConf(extendConf) 37 | } 38 | --------------------------------------------------------------------------------