├── .github ├── FUNDING.yml └── ISSUE_TEMPLATE │ ├── bug_report.md │ └── feature_request.md ├── .gitignore ├── LICENSE ├── README.md ├── app-extension ├── .npmignore ├── README.md ├── package.json └── src │ ├── boot │ └── register.js │ └── index.js ├── demo ├── .editorconfig ├── .eslintignore ├── .eslintrc.js ├── .gitignore ├── .postcssrc.js ├── .stylintrc ├── README.md ├── babel.config.js ├── package.json ├── quasar.conf.js ├── quasar.extensions.json ├── src-electron │ ├── icons │ │ ├── icon.icns │ │ ├── icon.ico │ │ └── linux-512x512.png │ └── main-process │ │ ├── electron-main.dev.js │ │ └── electron-main.js ├── src-ssr │ ├── extension.js │ └── index.js └── src │ ├── 404.html │ ├── App.vue │ ├── assets │ ├── page-utils.js │ ├── quasar-logo-full.svg │ └── sad.svg │ ├── boot │ ├── components.js │ └── qribbon.js │ ├── components │ ├── ExampleCard.vue │ ├── ExampleTitle.vue │ └── Hero.vue │ ├── css │ ├── app.sass │ └── quasar.variables.sass │ ├── examples │ ├── Avatar.vue │ ├── Colors.vue │ ├── Corners.vue │ ├── Full.vue │ ├── Glow.vue │ ├── Icon.vue │ ├── Inline.vue │ ├── Leaf.vue │ ├── Marquee.vue │ ├── Menu.vue │ ├── Sides.vue │ ├── ToolBarTitle.vue │ └── Vertical.vue │ ├── index.template.html │ ├── layouts │ └── MyLayout.vue │ ├── markdown │ └── qribbon.md │ ├── pages │ ├── Error404.vue │ ├── Examples.vue │ ├── Index.vue │ └── RibbonBuilder.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 │ └── store │ ├── common │ ├── actions.js │ ├── getters.js │ ├── index.js │ ├── mutations.js │ └── state.js │ ├── index.js │ └── ribbon │ ├── actions.js │ ├── getters.js │ ├── index.js │ ├── mutations.js │ └── state.js ├── docs ├── 404.html ├── css │ └── app.f9401864.css ├── fonts │ ├── KFOkCnqEu92Fr1MmgVxIIzQ.5cb7edfc.woff │ ├── KFOlCnqEu92Fr1MmEU9fBBc-.87284894.woff │ ├── KFOlCnqEu92Fr1MmSU5fBBc-.b00849e0.woff │ ├── KFOlCnqEu92Fr1MmWUlfBBc-.adcde98f.woff │ ├── KFOlCnqEu92Fr1MmYUtfBBc-.bb1e4dc6.woff │ ├── KFOmCnqEu92Fr1Mu4mxM.60fa3c06.woff │ ├── fa-brands-400.c5e0f14f.woff │ ├── fa-brands-400.cccc9d29.woff2 │ ├── fa-regular-400.c4f508e7.woff │ ├── fa-regular-400.f5f2566b.woff2 │ ├── fa-solid-900.333bae20.woff │ ├── fa-solid-900.44d537ab.woff2 │ ├── flUhRq6tzZclQEJ-Vdg-IuiaDsNa.29b882f0.woff │ └── flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.0509ab09.woff2 ├── index.html ├── js │ ├── 2d22c0ff.a3b9c05c.js │ ├── 4b47640d.df1cd4aa.js │ ├── 87a80ed6.13010dbc.js │ ├── app.cbf75784.js │ ├── bfe78a4c.57d578fd.js │ ├── d99338c8.26312c70.js │ ├── runtime.5b263ee3.js │ └── vendor.450234b3.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 └── ui ├── .editorconfig ├── .eslintignore ├── .eslintrc.js ├── .npmignore ├── README.md ├── build ├── build.api.js ├── config.js ├── entry │ ├── index.common.js │ ├── index.esm.js │ └── index.umd.js ├── index.js ├── script.clean.js ├── script.css.js ├── script.javascript.js ├── script.open-umd.js └── utils.js ├── dev ├── .editorconfig ├── .gitignore ├── .postcssrc.js ├── README.md ├── babel.config.js ├── package.json ├── quasar.conf.js └── src │ ├── App.vue │ ├── assets │ └── .gitkeep │ ├── boot │ └── register.js │ ├── components │ └── .gitkeep │ ├── css │ └── app.sass │ ├── index.template.html │ ├── layouts │ └── MyLayout.vue │ ├── pages │ ├── Corner.vue │ ├── Index.vue │ └── Test1.vue │ ├── router │ ├── index.js │ ├── pages.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 ├── package.json ├── src ├── components │ ├── QRibbon.js │ ├── QRibbon.json │ ├── QRibbon.sass │ └── sass │ │ ├── common │ │ ├── glow.sass │ │ └── main.sass │ │ ├── corner │ │ └── main.sass │ │ ├── horizontal │ │ └── main.sass │ │ └── vertical │ │ └── main.sass ├── index.js ├── index.sass └── mixins │ └── colorize.js └── umd-test.html /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: [webnoob, rstoenescu] # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2] 4 | patreon: # Replace with a single Patreon username 5 | open_collective: # Replace with a single Open Collective username 6 | ko_fi: # Replace with a single Ko-fi username 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 9 | liberapay: # Replace with a single Liberapay username 10 | issuehunt: # Replace with a single IssueHunt username 11 | otechie: # Replace with a single Otechie username 12 | custom: # Replace with a single custom sponsorship URL -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | For a legitimate bug, in order to process faster, please go here https://codesandbox.io/s/qcalendar-bx1y7, fork the codesandbox, add code to reproduce the bug and submit link here: 11 | 12 | **Describe the bug** 13 | A clear and concise description of what the bug is. 14 | 15 | **To Reproduce** 16 | Steps to reproduce the behavior: 17 | 1. Go to '...' 18 | 2. Click on '....' 19 | 3. Scroll down to '....' 20 | 4. See error 21 | 22 | **Expected behavior** 23 | A clear and concise description of what you expected to happen. 24 | 25 | **Screenshots** 26 | If applicable, add screenshots to help explain your problem. 27 | 28 | **Desktop (please complete the following information):** 29 | - OS: [e.g. iOS] 30 | - Browser [e.g. chrome, safari] 31 | - Version [e.g. 22] 32 | 33 | **Smartphone (please complete the following information):** 34 | - Device: [e.g. iPhone6] 35 | - OS: [e.g. iOS8.1] 36 | - Browser [e.g. stock browser, safari] 37 | - Version [e.g. 22] 38 | 39 | **Additional context** 40 | Add any other context about the problem here. 41 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 12 | 13 | **Describe the solution you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Describe alternatives you've considered** 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | **Additional context** 20 | Add any other context or screenshots about the feature request here. 21 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .thumbs.db 3 | node_modules 4 | dist 5 | yarn.lock 6 | npm-debug.log* 7 | yarn-debug.log* 8 | yarn-error.log* 9 | 10 | # Editor directories and files 11 | .idea 12 | .vscode 13 | *.suo 14 | *.ntvs* 15 | *.njsproj 16 | *.sln 17 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) Jeff Galbraith 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 13 | all 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 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | > It's likely this App Extension will be deprecated (no support for Quasar v2/Vue 3) unless it gets a strong representation from developers using it. 2 | 3 | QRibbon (Vue Plugin, UMD and Quasar App Extension) 4 | === 5 | 6 | ![@quasar/quasar-ui-qribbon](https://img.shields.io/npm/v/@quasar/quasar-ui-qribbon.svg?label=@quasar/quasar-ui-qribbon) 7 | ![@quasar/quasar-app-extension-qribbon](https://img.shields.io/npm/v/@quasar/quasar-app-extension-qribbon.svg?label=@quasar/quasar-app-extension-qribbon) 8 | [![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/quasarframework/quasar-ui-qribbon.svg)]() 9 | [![GitHub repo size in bytes](https://img.shields.io/github/repo-size/quasarframework/quasar-ui-qribbon.svg)]() 10 | 11 | # Structure 12 | 13 | * [/ui](ui) - standalone npm package (more information can be found here) 14 | * [/app-extension](app-extension) - Quasar app extension 15 | * [/demo](demo) - docs, demo and examples project 16 | * [live demo](https://quasarframework.github.io/quasar-ui-qribbon/docs) - live docs, demo and examples 17 | 18 | # Donate 19 | If you appreciate the work that went into this, please consider donating to [Quasar](https://donate.quasar.dev) or [Allan](https://github.com/sponsors/webnoob). 20 | 21 | # License 22 | MIT (c) Allan Gaunt 23 | -------------------------------------------------------------------------------- /app-extension/.npmignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .thumbs.db 3 | yarn.lock 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Editor directories and files 9 | .idea 10 | .vscode 11 | *.suo 12 | *.ntvs* 13 | *.njsproj 14 | *.sln 15 | .editorconfig 16 | .eslintignore 17 | .eslintrc.js 18 | -------------------------------------------------------------------------------- /app-extension/README.md: -------------------------------------------------------------------------------- 1 | # Quasar App Extension qribbon 2 | 3 | > Add a short description of your App Extension. What does it do? How is it beneficial? Why would someone want to use it? 4 | 5 | [![npm](https://img.shields.io/npm/v/quasar-app-extension-qribbon.svg?label=quasar-app-extension-qribbon)](https://www.npmjs.com/package/quasar-app-extension-qribbon) 6 | [![npm](https://img.shields.io/npm/dt/quasar-app-extension-qribbon.svg)](https://www.npmjs.com/package/quasar-app-extension-qribbon) 7 | 8 | # Examples and Documentation for QRibbon UI Component 9 | Can be found [here](https://quasarframework.github.io/quasar-ui-qribbon) 10 | 11 | # Install 12 | ```bash 13 | quasar ext add @quasar/qribbon 14 | ``` 15 | Quasar CLI will retrieve it from NPM and install the extension. 16 | 17 | ## Prompts 18 | 19 | > If your app extension uses prompts, explain them here, otherwise remove this section. 20 | 21 | # Uninstall 22 | ```bash 23 | quasar ext remove @quasar/qribbon 24 | ``` 25 | 26 | # Donate 27 | If you appreciate the work that went into this, please consider donating to [Quasar](https://donate.quasar.dev) or [Allan](https://github.com/sponsors/webnoob). 28 | 29 | # License 30 | MIT (c) Allan Gaunt 31 | -------------------------------------------------------------------------------- /app-extension/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@quasar/quasar-app-extension-qribbon", 3 | "version": "1.0.0-beta.11", 4 | "description": "QRibbon - Quasar App Extension", 5 | "author": "Allan Gaunt ", 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 | }, 12 | "publishConfig": { 13 | "access": "public" 14 | }, 15 | "repository": { 16 | "type": "git", 17 | "url": "git+https://github.com/quasarframework/quasar-ui-qribbon.git" 18 | }, 19 | "bugs": "https://github.com/quasarframework/quasar-ui-qribbon/issues", 20 | "homepage": "https://github.com/quasarframework/quasar-ui-qribbon", 21 | "keywords": [ 22 | "quasar", 23 | "app", 24 | "app extension", 25 | "extension", 26 | "ribbon", 27 | "qribbon", 28 | "corner" 29 | ], 30 | "dependencies": { 31 | "@quasar/quasar-ui-qribbon": "1.0.0-beta.11" 32 | }, 33 | "engines": { 34 | "node": ">= 8.9.0", 35 | "npm": ">= 5.6.0", 36 | "yarn": ">= 1.6.0" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /app-extension/src/boot/register.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import VuePlugin from '@quasar/quasar-ui-qribbon' 3 | 4 | Vue.use(VuePlugin) 5 | -------------------------------------------------------------------------------- /app-extension/src/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Quasar App Extension index/runner script 3 | * (runs on each dev/build) 4 | * 5 | * Docs: https://quasar.dev/app-extensions/development-guide/index-api 6 | * API: https://github.com/quasarframework/quasar/blob/master/app/lib/app-extension/IndexAPI.js 7 | */ 8 | 9 | function extendConf (conf) { 10 | // register our boot file 11 | conf.boot.push('~@quasar/quasar-app-extension-qribbon/src/boot/register.js') 12 | 13 | // make sure app extension files & ui package gets transpiled 14 | conf.build.transpileDependencies.push(/quasar-app-extension-qribbon[\\/]src/) 15 | 16 | // make sure the stylesheet goes through webpack to avoid SSR issues 17 | conf.css.push('~@quasar/quasar-ui-qribbon/src/index.sass') 18 | } 19 | 20 | module.exports = function (api) { 21 | // Quasar compatibility check; you may need 22 | // hard dependencies, as in a minimum version of the "quasar" 23 | // package or a minimum version of "@quasar/app" CLI 24 | api.compatibleWith('quasar', '^1.1.1') 25 | api.compatibleWith('@quasar/app', '^1.1.0') 26 | 27 | // Uncomment the line below if you provide a JSON API for your component 28 | api.registerDescribeApi('QRibbon', '~@quasar/quasar-ui-qribbon/dist/api/QRibbon.json') 29 | 30 | // We extend /quasar.conf.js 31 | api.extendQuasarConf(extendConf) 32 | } 33 | -------------------------------------------------------------------------------- /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 | 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 | -------------------------------------------------------------------------------- /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 | # QRibbon Demo App 2 | 3 | Here for testing QRibbon 4 | -------------------------------------------------------------------------------- /demo/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@quasar/babel-preset-app' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "demo", 3 | "version": "1.0.0-beta.5", 4 | "description": "QRibbon Demo - A Quasar Framework app", 5 | "productName": "QRibbon Demo", 6 | "cordovaId": "org.cordova.quasar.app", 7 | "author": "Allan Gaunt ", 8 | "private": true, 9 | "scripts": { 10 | "build-demo": "quasar build && cp ./src/404.html ./dist/spa && rm -rf ../docs && cp -r ./dist/spa/. ../docs", 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.3.3", 17 | "quasar": "^1.4.4", 18 | "raw-loader": "^3.1.0" 19 | }, 20 | "devDependencies": { 21 | "@quasar/app": "^1.2.4", 22 | "@quasar/quasar-app-extension-qmarkdown": "^1.0.1", 23 | "@quasar/quasar-app-extension-qpublish": "^1.0.0-alpha.13", 24 | "@vue/eslint-config-standard": "^4.0.0", 25 | "babel-eslint": "^10.0.3", 26 | "devtron": "^1.4.0", 27 | "electron": "^7.1.1", 28 | "electron-debug": "^3.0.1", 29 | "electron-devtools-installer": "^2.2.4", 30 | "eslint": "^6.6.0", 31 | "eslint-loader": "^3.0.2", 32 | "eslint-plugin-vue": "^6.0.0" 33 | }, 34 | "engines": { 35 | "node": ">= 8.9.0", 36 | "npm": ">= 5.6.0", 37 | "yarn": ">= 1.6.0" 38 | }, 39 | "browserslist": [ 40 | "last 1 version, not dead, ie >= 11" 41 | ] 42 | } 43 | -------------------------------------------------------------------------------- /demo/quasar.conf.js: -------------------------------------------------------------------------------- 1 | // Configuration for your app 2 | 3 | const path = require('path') 4 | 5 | module.exports = function (ctx) { 6 | return { 7 | // app boot file (/src/boot) 8 | // --> boot files are part of "main.js" 9 | boot: [ 10 | 'qribbon', 11 | 'components' 12 | ], 13 | 14 | css: [ 15 | 'app.sass' 16 | ], 17 | 18 | extras: [ 19 | // 'ionicons-v4', 20 | // 'mdi-v3', 21 | 'fontawesome-v5', 22 | // 'eva-icons', 23 | // 'themify', 24 | // 'roboto-font-latin-ext', // this or either 'roboto-font', NEVER both! 25 | 26 | 'roboto-font', // optional, you are not bound to it 27 | 'material-icons' // optional, you are not bound to it 28 | ], 29 | 30 | framework: { 31 | // iconSet: 'ionicons-v4', 32 | // lang: 'de', // Quasar language 33 | 34 | // all: true, // --- includes everything; for dev only! 35 | 36 | components: [ 37 | 'QAvatar', 38 | 'QBtn', 39 | 'QCard', 40 | 'QCardSection', 41 | 'QCheckbox', 42 | 'QColor', 43 | 'QDrawer', 44 | 'QExpansionItem', 45 | 'QHeader', 46 | 'QIcon', 47 | 'QInput', 48 | 'QItem', 49 | 'QItemLabel', 50 | 'QItemSection', 51 | 'QLayout', 52 | 'QList', 53 | 'QMenu', 54 | 'QPage', 55 | 'QPageContainer', 56 | 'QPageScroller', 57 | 'QPopupProxy', 58 | 'QScrollArea', 59 | 'QSelect', 60 | 'QSeparator', 61 | 'QSpace', 62 | 'QTabs', 63 | 'QTab', 64 | 'QTabPanels', 65 | 'QTabPanel', 66 | 'QToolbar', 67 | 'QToolbarTitle' 68 | ], 69 | 70 | directives: [ 71 | 'ClosePopup', 72 | 'Ripple' 73 | ], 74 | 75 | // Quasar plugins 76 | plugins: [ 77 | 'Notify', 78 | 'Platform' 79 | ] 80 | }, 81 | 82 | supportIE: true, 83 | 84 | build: { 85 | scopeHoisting: true, 86 | vueRouterMode: 'history', 87 | publicPath: 'quasar-ui-qribbon', 88 | // vueCompiler: true, 89 | // gzip: true, 90 | // analyze: true, 91 | // extractCSS: false, 92 | extendWebpack (cfg) { 93 | cfg.module.rules.push({ 94 | enforce: 'pre', 95 | test: /\.(js|vue)$/, 96 | loader: 'eslint-loader', 97 | exclude: /node_modules/ 98 | }) 99 | }, 100 | 101 | chainWebpack (chain) { 102 | chain.resolve.alias.merge({ 103 | 'ui': path.resolve(__dirname, '../ui/src/index.js'), 104 | 'api': path.resolve(__dirname, '../ui/dist/api/QRibbon.json'), 105 | 'sass': path.resolve(__dirname, '../ui/src/index.sass') 106 | }) 107 | } 108 | 109 | }, 110 | 111 | devServer: { 112 | // https: true, 113 | // port: 8080, 114 | open: true, // opens browser window automatically 115 | watchOptions: { 116 | ignored: [ 117 | 'node_modules', 118 | '!node_modules/@quasar/quasar-app-extension-qribbon', 119 | '!node_modules/@quasar/quasar-ui-qribbon' 120 | ] 121 | } 122 | }, 123 | 124 | // animations: 'all', // --- includes all animations 125 | animations: [], 126 | 127 | ssr: { 128 | pwa: false 129 | }, 130 | 131 | pwa: { 132 | // workboxPluginMode: 'InjectManifest', 133 | // workboxOptions: {}, // only for NON InjectManifest 134 | manifest: { 135 | // name: 'Quasar App', 136 | // short_name: 'Quasar-PWA', 137 | // description: 'Best PWA App in town!', 138 | display: 'standalone', 139 | orientation: 'portrait', 140 | background_color: '#ffffff', 141 | theme_color: '#027be3', 142 | icons: [ 143 | { 144 | 'src': 'statics/icons/icon-128x128.png', 145 | 'sizes': '128x128', 146 | 'type': 'image/png' 147 | }, 148 | { 149 | 'src': 'statics/icons/icon-192x192.png', 150 | 'sizes': '192x192', 151 | 'type': 'image/png' 152 | }, 153 | { 154 | 'src': 'statics/icons/icon-256x256.png', 155 | 'sizes': '256x256', 156 | 'type': 'image/png' 157 | }, 158 | { 159 | 'src': 'statics/icons/icon-384x384.png', 160 | 'sizes': '384x384', 161 | 'type': 'image/png' 162 | }, 163 | { 164 | 'src': 'statics/icons/icon-512x512.png', 165 | 'sizes': '512x512', 166 | 'type': 'image/png' 167 | } 168 | ] 169 | } 170 | }, 171 | 172 | cordova: { 173 | // id: 'org.cordova.quasar.app' 174 | // noIosLegacyBuildFlag: true // uncomment only if you know what you are doing 175 | }, 176 | 177 | electron: { 178 | // bundler: 'builder', // or 'packager' 179 | 180 | extendWebpack (cfg) { 181 | // do something with Electron main process Webpack cfg 182 | // chainWebpack also available besides this extendWebpack 183 | }, 184 | 185 | packager: { 186 | // https://github.com/electron-userland/electron-packager/blob/master/docs/api.md#options 187 | 188 | // OS X / Mac App Store 189 | // appBundleId: '', 190 | // appCategoryType: '', 191 | // osxSign: '', 192 | // protocol: 'myapp://path', 193 | 194 | // Window only 195 | // win32metadata: { ... } 196 | }, 197 | 198 | builder: { 199 | // https://www.electron.build/configuration/configuration 200 | 201 | // appId: 'quasar-app' 202 | } 203 | } 204 | } 205 | } 206 | -------------------------------------------------------------------------------- /demo/quasar.extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "@quasar/qmarkdown": { 3 | "import_md": true, 4 | "import_vmd": true 5 | }, 6 | "@quasar/qpublish": {} 7 | } -------------------------------------------------------------------------------- /demo/src-electron/icons/icon.icns: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/quasarframework/quasar-ui-qribbon/bbfa1abac83ab88b39c1e505edd48cb20fb1b78f/demo/src-electron/icons/icon.icns -------------------------------------------------------------------------------- /demo/src-electron/icons/icon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/quasarframework/quasar-ui-qribbon/bbfa1abac83ab88b39c1e505edd48cb20fb1b78f/demo/src-electron/icons/icon.ico -------------------------------------------------------------------------------- /demo/src-electron/icons/linux-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/quasarframework/quasar-ui-qribbon/bbfa1abac83ab88b39c1e505edd48cb20fb1b78f/demo/src-electron/icons/linux-512x512.png -------------------------------------------------------------------------------- /demo/src-electron/main-process/electron-main.dev.js: -------------------------------------------------------------------------------- 1 | /** 2 | * This file is used specifically and only for development. It installs 3 | * `electron-debug` & `vue-devtools`. There shouldn't be any need to 4 | * modify this file, but it can be used to extend your development 5 | * environment. 6 | */ 7 | 8 | // Install `electron-debug` with `devtron` 9 | require('electron-debug')({ showDevTools: true }) 10 | 11 | // Install `vue-devtools` 12 | require('electron').app.on('ready', () => { 13 | let installExtension = require('electron-devtools-installer') 14 | installExtension.default(installExtension.VUEJS_DEVTOOLS) 15 | .then(() => {}) 16 | .catch(err => { 17 | console.log('Unable to install `vue-devtools`: \n', err) 18 | }) 19 | }) 20 | 21 | // Require `main` process to boot app 22 | require('./electron-main') 23 | -------------------------------------------------------------------------------- /demo/src-electron/main-process/electron-main.js: -------------------------------------------------------------------------------- 1 | import { app, BrowserWindow } from 'electron' 2 | 3 | /** 4 | * Set `__statics` path to static files in production; 5 | * The reason we are setting it here is that the path needs to be evaluated at runtime 6 | */ 7 | if (process.env.PROD) { 8 | global.__statics = require('path').join(__dirname, 'statics').replace(/\\/g, '\\\\') 9 | } 10 | 11 | let mainWindow 12 | 13 | function createWindow () { 14 | /** 15 | * Initial window options 16 | */ 17 | mainWindow = new BrowserWindow({ 18 | width: 1000, 19 | height: 600, 20 | useContentSize: true, 21 | webPreferences: { 22 | nodeIntegration: true 23 | } 24 | }) 25 | 26 | mainWindow.loadURL(process.env.APP_URL) 27 | 28 | mainWindow.on('closed', () => { 29 | mainWindow = null 30 | }) 31 | } 32 | 33 | app.on('ready', createWindow) 34 | 35 | app.on('window-all-closed', () => { 36 | if (process.platform !== 'darwin') { 37 | app.quit() 38 | } 39 | }) 40 | 41 | app.on('activate', () => { 42 | if (mainWindow === null) { 43 | createWindow() 44 | } 45 | }) 46 | -------------------------------------------------------------------------------- /demo/src-ssr/extension.js: -------------------------------------------------------------------------------- 1 | /* 2 | * This file runs in a Node context (it's NOT transpiled by Babel), so use only 3 | * the ES6 features that are supported by your Node version. https://node.green/ 4 | * 5 | * All content of this folder will be copied as is to the output folder. So only import: 6 | * 1. node_modules (and yarn/npm install dependencies -- NOT to devDependecies though) 7 | * 2. create files in this folder and import only those with the relative path 8 | * 9 | * Note: This file is used for both PRODUCTION & DEVELOPMENT. 10 | * Note: Changes to this file (but not any file it imports!) are picked up by the 11 | * development server, but such updates are costly since the dev-server needs a reboot. 12 | */ 13 | 14 | module.exports.extendApp = function ({ app }) { 15 | /* 16 | Extend the parts of the express app that you 17 | want to use with development server too. 18 | 19 | Example: app.use(), app.get() etc 20 | */ 21 | } 22 | -------------------------------------------------------------------------------- /demo/src-ssr/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | * This file runs in a Node context (it's NOT transpiled by Babel), so use only 3 | * the ES6 features that are supported by your Node version. https://node.green/ 4 | * 5 | * All content of this folder will be copied as is to the output folder. So only import: 6 | * 1. node_modules (and yarn/npm install dependencies -- NOT to devDependecies though) 7 | * 2. create files in this folder and import only those with the relative path 8 | * 9 | * Note: This file is used only for PRODUCTION. It is not picked up while in dev mode. 10 | * If you are looking to add common DEV & PROD logic to the express app, then use 11 | * "src-ssr/extension.js" 12 | */ 13 | 14 | const 15 | express = require('express'), 16 | compression = require('compression') 17 | 18 | const 19 | ssr = require('../ssr'), 20 | extension = require('./extension'), 21 | app = express(), 22 | port = process.env.PORT || 3000 23 | 24 | const serve = (path, cache) => express.static(ssr.resolveWWW(path), { 25 | maxAge: cache ? 1000 * 60 * 60 * 24 * 30 : 0 26 | }) 27 | 28 | // gzip 29 | app.use(compression({ threshold: 0 })) 30 | 31 | // serve this with no cache, if built with PWA: 32 | if (ssr.settings.pwa) { 33 | app.use('/service-worker.js', serve('service-worker.js')) 34 | } 35 | 36 | // serve "www" folder 37 | app.use('/', serve('.', true)) 38 | 39 | // we extend the custom common dev & prod parts here 40 | extension.extendApp({ app }) 41 | 42 | // this should be last get(), rendering with SSR 43 | app.get('*', (req, res) => { 44 | res.setHeader('Content-Type', 'text/html') 45 | 46 | // SECURITY HEADERS 47 | // read more about headers here: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers 48 | // the following headers help protect your site from common XSS attacks in browsers that respect headers 49 | // you will probably want to use .env variables to drop in appropriate URLs below, 50 | // and potentially look here for inspiration: 51 | // https://ponyfoo.com/articles/content-security-policy-in-express-apps 52 | 53 | // https://developer.mozilla.org/en-us/docs/Web/HTTP/Headers/X-Frame-Options 54 | // res.setHeader('X-frame-options', 'SAMEORIGIN') // one of DENY | SAMEORIGIN | ALLOW-FROM https://example.com 55 | 56 | // https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-XSS-Protection 57 | // res.setHeader('X-XSS-Protection', 1) 58 | 59 | // https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Content-Type-Options 60 | // res.setHeader('X-Content-Type-Options', 'nosniff') 61 | 62 | // https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin 63 | // res.setHeader('Access-Control-Allow-Origin', '*') // one of '*', '' where origin is one SINGLE origin 64 | 65 | // https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-DNS-Prefetch-Control 66 | // res.setHeader('X-DNS-Prefetch-Control', 'off') // may be slower, but stops some leaks 67 | 68 | // https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy 69 | // res.setHeader('Content-Security-Policy', 'default-src https:') 70 | 71 | // https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/sandbox 72 | // res.setHeader('Content-Security-Policy', 'sandbox') // this will lockdown your server!!! 73 | // here are a few that you might like to consider adding to your CSP 74 | // object-src, media-src, script-src, frame-src, unsafe-inline 75 | 76 | ssr.renderToString({ req, res }, (err, html) => { 77 | if (err) { 78 | if (err.url) { 79 | res.redirect(err.url) 80 | } 81 | else if (err.code === 404) { 82 | res.status(404).send('404 | Page Not Found') 83 | } 84 | else { 85 | // Render Error Page or Redirect 86 | res.status(500).send('500 | Internal Server Error') 87 | if (ssr.settings.debug) { 88 | console.error(`500 on ${req.url}`) 89 | console.error(err) 90 | console.error(err.stack) 91 | } 92 | } 93 | } 94 | else { 95 | res.send(html) 96 | } 97 | }) 98 | }) 99 | 100 | app.listen(port, () => { 101 | console.log(`Server listening at port ${port}`) 102 | }) 103 | -------------------------------------------------------------------------------- /demo/src/404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | QRibbon 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 | 28 | export function makeUrl (slug) { 29 | window.location = window.location.origin + window.location.pathname + '#' + slug 30 | } 31 | -------------------------------------------------------------------------------- /demo/src/assets/sad.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /demo/src/boot/components.js: -------------------------------------------------------------------------------- 1 | import Sides from '../examples/Sides' 2 | import Vertical from '../examples/Vertical' 3 | import Colors from '../examples/Colors' 4 | import Full from '../examples/Full' 5 | import Corners from '../examples/Corners' 6 | import Inline from '../examples/Inline' 7 | import ToolBarTitle from '../examples/ToolBarTitle' 8 | import Menu from '../examples/Menu' 9 | // import Marquee from '../examples/Marquee' 10 | import Glow from '../examples/Glow' 11 | import Avatar from '../examples/Avatar' 12 | import Leaf from '../examples/Leaf' 13 | import Icon from '../examples/Icon' 14 | 15 | export default ({ Vue }) => { 16 | Vue.component('Sides', Sides) 17 | Vue.component('Vertical', Vertical) 18 | Vue.component('Colors', Colors) 19 | Vue.component('Full', Full) 20 | Vue.component('Corners', Corners) 21 | Vue.component('Inline', Inline) 22 | Vue.component('ToolBarTitle', ToolBarTitle) 23 | Vue.component('Menu', Menu) 24 | // Vue.component('Marquee', Marquee) 25 | Vue.component('Glow', Glow) 26 | Vue.component('Avatar', Avatar) 27 | Vue.component('Leaf', Leaf) 28 | Vue.component('Icon', Icon) 29 | } 30 | -------------------------------------------------------------------------------- /demo/src/boot/qribbon.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import VuePlugin from 'ui' // "ui" is aliased in quasar.conf.js 3 | 4 | Vue.use(VuePlugin) 5 | -------------------------------------------------------------------------------- /demo/src/components/ExampleCard.vue: -------------------------------------------------------------------------------- 1 | 68 | 69 | 120 | 121 | 123 | -------------------------------------------------------------------------------- /demo/src/components/ExampleTitle.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 29 | -------------------------------------------------------------------------------- /demo/src/components/Hero.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 41 | -------------------------------------------------------------------------------- /demo/src/css/app.sass: -------------------------------------------------------------------------------- 1 | // app global css 2 | @import 'sass' 3 | 4 | .border-radius 5 | [class^=qribbon__] 6 | border-radius: 3px 5px 5px 0 7 | 8 | $fgColor: red 9 | $bgColor: blue 10 | 11 | .quasar 12 | position: absolute 13 | left: 10px 14 | bottom: 10px 15 | opacity: 0.5 16 | 17 | .byline 18 | position: absolute 19 | bottom: 10px 20 | right: 10px 21 | opacity: 0.5 22 | 23 | .byline a 24 | color: unset 25 | 26 | .donate 27 | position: absolute 28 | right: 10px 29 | top: 10px 30 | opacity: 0.5 31 | 32 | .qribbon__horizontal--left 33 | .q-toolbar__title 34 | padding: 0 20px !important 35 | 36 | .example-title 37 | cursor: pointer 38 | &:after 39 | content: ' #' 40 | opacity: 0 41 | &:hover:after 42 | opacity: 1 43 | 44 | .example-page 45 | padding: 16px 46px 46 | font-weight: 300 47 | max-width: 900px 48 | margin-left: auto 49 | margin-right: auto 50 | 51 | .box-ribbon-wrapper 52 | background: $grey-3 53 | 54 | .q-dark 55 | .box-ribbon-wrapper 56 | background: $grey-6 57 | 58 | body 59 | padding: 0 60 | margin: 0 61 | font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif 62 | line-height: 1.5 63 | background-color: #f8f8ff 64 | color: #606c71 65 | 66 | a 67 | color: #1e6bb8 68 | text-decoration: none 69 | &:hover 70 | text-decoration: underline 71 | 72 | .btn 73 | display: inline-block 74 | margin-bottom: 1rem 75 | color: rgba(255, 255, 255, 0.7) 76 | background-color: rgba(255, 255, 255, 0.08) 77 | border-color: rgba(255, 255, 255, 0.2) 78 | border-style: solid 79 | border-width: 1px 80 | border-radius: 0.3rem 81 | transition: color 0.2s, background-color 0.2s, border-color 0.2s 82 | 83 | &:hover 84 | color: rgba(255, 255, 255, 0.8) 85 | text-decoration: none 86 | background-color: rgba(255, 255, 255, 0.2) 87 | border-color: rgba(255, 255, 255, 0.3) 88 | 89 | .btn + .btn 90 | margin-left: 1rem 91 | 92 | .project-name 93 | font-weight 700 94 | 95 | @media screen and (min-width: 64em) 96 | .btn 97 | padding: 0.75rem 1rem; 98 | 99 | @media screen and (min-width: 42em) and (max-width: 64em) 100 | .btn 101 | padding: 0.6rem 0.9rem 102 | font-size: 0.9rem 103 | 104 | @media screen and (max-width: 42em) 105 | .btn 106 | display: block 107 | width: 100% 108 | padding: 0.75rem 109 | font-size: 0.9rem 110 | .btn + .btn 111 | margin-left: 0 112 | .byline 113 | left: 0 114 | align-text center 115 | .quasar 116 | opacity: 0 117 | 118 | .page-header 119 | position: relative 120 | color: #fff 121 | text-align: center 122 | background-color: $bgColor 123 | background-image: linear-gradient(120deg, $bgColor, $fgColor) 124 | 125 | @media screen and (min-width: 64em) 126 | .page-header 127 | padding: 3rem 4rem 128 | 129 | @media screen and (min-width: 42em) and (max-width: 64em) 130 | .page-header 131 | padding: 2rem 4rem 132 | 133 | @media screen and (max-width: 42em) 134 | .page-header 135 | padding: 2rem 1rem 1rem 1rem 136 | 137 | .project-name 138 | font-weight: 700 139 | margin-top: 0 140 | margin-bottom: 0.1rem 141 | 142 | @media screen and (min-width: 64em) 143 | .project-name 144 | font-size: 4.25rem 145 | 146 | @media screen and (min-width: 42em) and (max-width: 64em) 147 | .project-name 148 | font-size: 3.25rem 149 | 150 | @media screen and (max-width: 42em) 151 | .project-name 152 | font-size: 2.75rem 153 | 154 | .project-tagline 155 | font-weight: normal 156 | opacity: 0.7 157 | 158 | @media screen and (min-width: 64em) 159 | .project-tagline 160 | font-size: 1.75rem 161 | 162 | @media screen and (min-width: 42em) and (max-width: 64em) 163 | .project-tagline 164 | font-size: 1.25rem 165 | 166 | @media screen and (max-width: 42em) 167 | .project-tagline 168 | font-size: 1rem 169 | 170 | .main-content :first-child 171 | margin-top: 0 172 | .main-content img 173 | max-width: 100% 174 | .main-content h1, .main-content h2, .main-content h3, .main-content h4, .main-content h5, .main-content h6 175 | margin-top: 2rem 176 | margin-bottom: 1rem 177 | font-weight: normal 178 | color: #159957 179 | .main-content p 180 | margin-bottom: 1em 181 | .main-content code 182 | padding: 2px 4px 183 | font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace 184 | font-size: 0.9rem 185 | color: #383e41 186 | background-color: #f3f6fa 187 | border-radius: 0.3rem 188 | .main-content pre 189 | padding: 0.8rem 190 | margin-top: 0 191 | margin-bottom: 1rem 192 | font: 1rem Consolas, "Liberation Mono", Menlo, Courier, monospace 193 | color: #567482 194 | word-wrap: normal 195 | background-color: #f3f6fa 196 | border: solid 1px #dce6f0 197 | border-radius: 0.3rem 198 | .main-content pre > code 199 | padding: 0 200 | margin: 0 201 | font-size: 0.9rem 202 | color: #567482 203 | word-break: normal 204 | white-space: pre 205 | background: transparent 206 | border: 0 207 | .main-content .highlight 208 | margin-bottom: 1rem 209 | .main-content .highlight pre 210 | margin-bottom: 0 211 | word-break: normal 212 | .main-content .highlight pre, .main-content pre 213 | padding: 0.8rem 214 | overflow: auto 215 | font-size: 0.9rem 216 | line-height: 1.45 217 | border-radius: 0.3rem 218 | .main-content pre code, .main-content pre tt 219 | display: inline 220 | max-width: initial 221 | padding: 0 222 | margin: 0 223 | overflow: initial 224 | line-height: inherit 225 | word-wrap: normal 226 | background-color: transparent 227 | border: 0 228 | .main-content pre code:before, .main-content pre code:after, .main-content pre tt:before, .main-content pre tt:after 229 | content: normal 230 | .main-content ul, .main-content ol 231 | margin-top: 0 232 | .main-content blockquote 233 | padding: 0 1rem 234 | margin-left: 0 235 | color: #819198 236 | border-left: 0.3rem solid #dce6f0 237 | .main-content blockquote > :first-child 238 | margin-top: 0 239 | .main-content blockquote > :last-child 240 | margin-bottom: 0 241 | .main-content table 242 | display: block 243 | width: 100% 244 | overflow: auto 245 | word-break: normal 246 | word-break: keep-all 247 | .main-content table th 248 | font-weight: bold 249 | .main-content table th, .main-content table td 250 | padding: 0.5rem 1rem 251 | border: 1px solid #e9ebec 252 | .main-content dl 253 | padding: 0 254 | .main-content dl dt 255 | padding: 0 256 | margin-top: 1rem 257 | font-size: 1rem 258 | font-weight: bold 259 | .main-content dl dd 260 | padding: 0 261 | margin-bottom: 1rem 262 | .main-content hr 263 | height: 2px 264 | padding: 0 265 | margin: 1rem 0 266 | background-color: #eff0f1 267 | border: 0 268 | 269 | @media screen and (min-width: 64em) 270 | .main-content 271 | max-width: 64rem 272 | padding: 2rem 6rem 273 | margin: 0 auto 274 | font-size: 1.1rem 275 | 276 | @media screen and (min-width: 42em) and (max-width: 64em) 277 | .main-content 278 | padding: 2rem 4rem 279 | font-size: 1.1rem 280 | 281 | @media screen and (max-width: 42em) 282 | .main-content 283 | padding: 2rem 1rem 284 | font-size: 1rem 285 | 286 | .site-footer 287 | padding-top: 2rem 288 | margin-top: 2rem 289 | border-top: solid 1px #eff0f1 290 | 291 | .site-footer-owner 292 | display: block 293 | font-weight: bold 294 | 295 | .site-footer-credits 296 | color: #819198 297 | 298 | @media screen and (min-width: 64em) 299 | .site-footer 300 | font-size: 1rem 301 | 302 | @media screen and (min-width: 42em) and (max-width: 64em) 303 | .site-footer 304 | font-size: 1rem 305 | 306 | @media screen and (max-width: 42em) 307 | .site-footer 308 | font-size: 0.9rem 309 | 310 | .ribbon-wrapper.move-1 311 | .qribbon__vertical--top-left, 312 | .qribbon__vertical--bottom-left 313 | left: 20px 314 | 315 | .ribbon-wrapper.move-2 316 | .qribbon__vertical--top-left, 317 | .qribbon__vertical--bottom-left 318 | left: 70px 319 | 320 | .ribbon-wrapper.move-3 321 | .qribbon__vertical--top-left, 322 | .qribbon__vertical--bottom-left 323 | left: 120px 324 | 325 | .ribbon-wrapper 326 | height: 50px 327 | 328 | .border-radius 329 | [class^=qribbon__] 330 | border-radius: 3px 5px 5px 0 331 | 332 | .box-ribbon-wrapper 333 | width: 90% 334 | min-height: 400px 335 | margin: 0 auto 336 | position: relative 337 | 338 | .github-text 339 | font-size: 14px 340 | 341 | a 342 | border-top: 1px dashed white 343 | border-bottom: 1px dashed white 344 | transform: rotate(45deg) 345 | text-decoration: none 346 | padding: 2px 0 347 | 348 | .qribbon-avatar 349 | [class*=horizontal--right].decorate-rounded-out 350 | border-top-left-radius: 45px 351 | border-bottom-left-radius: 45px 352 | padding-left: 5px 353 | 354 | .border-radius-top 355 | [class^=qribbon__] 356 | border-radius: 5px 5px 0 0 357 | 358 | .example-title 359 | white-space: unset 360 | 361 | .qribbon__container 362 | font-family: "Roboto", "-apple-system", "Helvetica Neue", Helvetica, Arial, sans-serif 363 | -------------------------------------------------------------------------------- /demo/src/css/quasar.variables.sass: -------------------------------------------------------------------------------- 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/Avatar.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 27 | -------------------------------------------------------------------------------- /demo/src/examples/Colors.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 19 | -------------------------------------------------------------------------------- /demo/src/examples/Corners.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 50 | -------------------------------------------------------------------------------- /demo/src/examples/Full.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 22 | -------------------------------------------------------------------------------- /demo/src/examples/Glow.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 31 | -------------------------------------------------------------------------------- /demo/src/examples/Icon.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 22 | -------------------------------------------------------------------------------- /demo/src/examples/Inline.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 19 | -------------------------------------------------------------------------------- /demo/src/examples/Leaf.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 19 | -------------------------------------------------------------------------------- /demo/src/examples/Marquee.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 18 | -------------------------------------------------------------------------------- /demo/src/examples/Menu.vue: -------------------------------------------------------------------------------- 1 | 62 | 63 | 68 | -------------------------------------------------------------------------------- /demo/src/examples/Sides.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 19 | -------------------------------------------------------------------------------- /demo/src/examples/ToolBarTitle.vue: -------------------------------------------------------------------------------- 1 | 60 | 61 | 65 | -------------------------------------------------------------------------------- /demo/src/examples/Vertical.vue: -------------------------------------------------------------------------------- 1 | 38 | 39 | 42 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /demo/src/layouts/MyLayout.vue: -------------------------------------------------------------------------------- 1 | 148 | 149 | 210 | 211 | 213 | -------------------------------------------------------------------------------- /demo/src/markdown/qribbon.md: -------------------------------------------------------------------------------- 1 | QRibbon (@quasar/qribbon) 2 | === 3 | 4 | > Please note, this is currently a work-in-progress (WIP). 5 | 6 | QRibbon is a [Quasar App Extension](https://quasar.dev/app-extensions/introduction). It allows you to display ribbons on your page. 7 | 8 | # Install 9 | To add this App Extension to your Quasar application, run the following (in your Quasar app folder): 10 | 11 | ``` 12 | quasar ext add @quasar/qribbon 13 | ``` 14 | 15 | # Uninstall 16 | To remove this App Extension from your Quasar application, run the following (in your Quasar app folder): 17 | 18 | ``` 19 | quasar ext remove @quasar/qribbon 20 | ``` 21 | 22 | # Describe 23 | You can use `quasar describe QRibbon` 24 | 25 | # Source 26 | Can be found [here](https://github.com/quasarframework/app-extension-qribbon/). 27 | 28 | # Docs 29 | Can be found [here](https://quasarframework.github.io/app-extension-qribbon/). 30 | 31 | # Examples 32 | Can be found [here](https://quasarframework.github.io/app-extension-qribbon/examples). 33 | 34 | # Interactive Demo / QRibbon Builder 35 | Can be found [here](https://quasarframework.github.io/app-extension-qribbon/builder). 36 | 37 | # Demo (source) Project 38 | Can be found [here](https://github.com/quasarframework/app-extension-qribbon/tree/master/demo). 39 | -------------------------------------------------------------------------------- /demo/src/pages/Error404.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 23 | -------------------------------------------------------------------------------- /demo/src/pages/Examples.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 24 | 25 | 98 | -------------------------------------------------------------------------------- /demo/src/pages/Index.vue: -------------------------------------------------------------------------------- 1 | 25 | 26 | 69 | -------------------------------------------------------------------------------- /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 | component: () => import('layouts/MyLayout.vue'), 6 | children: [ 7 | { path: '', redirect: '/docs' }, 8 | { path: '/docs', component: () => import('pages/Index.vue') }, 9 | { path: '/examples', component: () => import('pages/Examples.vue') }, 10 | { path: '/builder', component: () => import('pages/RibbonBuilder.vue') } 11 | ] 12 | } 13 | ] 14 | 15 | // Always leave this as last one 16 | if (process.env.MODE !== 'ssr') { 17 | routes.push({ 18 | path: '*', 19 | component: () => import('pages/Error404.vue') 20 | }) 21 | } 22 | 23 | export default routes 24 | -------------------------------------------------------------------------------- /demo/src/statics/app-logo-128x128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/quasarframework/quasar-ui-qribbon/bbfa1abac83ab88b39c1e505edd48cb20fb1b78f/demo/src/statics/app-logo-128x128.png -------------------------------------------------------------------------------- /demo/src/statics/icons/apple-icon-120x120.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/quasarframework/quasar-ui-qribbon/bbfa1abac83ab88b39c1e505edd48cb20fb1b78f/demo/src/statics/icons/apple-icon-120x120.png -------------------------------------------------------------------------------- /demo/src/statics/icons/apple-icon-152x152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/quasarframework/quasar-ui-qribbon/bbfa1abac83ab88b39c1e505edd48cb20fb1b78f/demo/src/statics/icons/apple-icon-152x152.png -------------------------------------------------------------------------------- /demo/src/statics/icons/apple-icon-167x167.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/quasarframework/quasar-ui-qribbon/bbfa1abac83ab88b39c1e505edd48cb20fb1b78f/demo/src/statics/icons/apple-icon-167x167.png -------------------------------------------------------------------------------- /demo/src/statics/icons/apple-icon-180x180.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/quasarframework/quasar-ui-qribbon/bbfa1abac83ab88b39c1e505edd48cb20fb1b78f/demo/src/statics/icons/apple-icon-180x180.png -------------------------------------------------------------------------------- /demo/src/statics/icons/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/quasarframework/quasar-ui-qribbon/bbfa1abac83ab88b39c1e505edd48cb20fb1b78f/demo/src/statics/icons/favicon-16x16.png -------------------------------------------------------------------------------- /demo/src/statics/icons/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/quasarframework/quasar-ui-qribbon/bbfa1abac83ab88b39c1e505edd48cb20fb1b78f/demo/src/statics/icons/favicon-32x32.png -------------------------------------------------------------------------------- /demo/src/statics/icons/favicon-96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/quasarframework/quasar-ui-qribbon/bbfa1abac83ab88b39c1e505edd48cb20fb1b78f/demo/src/statics/icons/favicon-96x96.png -------------------------------------------------------------------------------- /demo/src/statics/icons/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/quasarframework/quasar-ui-qribbon/bbfa1abac83ab88b39c1e505edd48cb20fb1b78f/demo/src/statics/icons/favicon.ico -------------------------------------------------------------------------------- /demo/src/statics/icons/icon-128x128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/quasarframework/quasar-ui-qribbon/bbfa1abac83ab88b39c1e505edd48cb20fb1b78f/demo/src/statics/icons/icon-128x128.png -------------------------------------------------------------------------------- /demo/src/statics/icons/icon-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/quasarframework/quasar-ui-qribbon/bbfa1abac83ab88b39c1e505edd48cb20fb1b78f/demo/src/statics/icons/icon-192x192.png -------------------------------------------------------------------------------- /demo/src/statics/icons/icon-256x256.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/quasarframework/quasar-ui-qribbon/bbfa1abac83ab88b39c1e505edd48cb20fb1b78f/demo/src/statics/icons/icon-256x256.png -------------------------------------------------------------------------------- /demo/src/statics/icons/icon-384x384.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/quasarframework/quasar-ui-qribbon/bbfa1abac83ab88b39c1e505edd48cb20fb1b78f/demo/src/statics/icons/icon-384x384.png -------------------------------------------------------------------------------- /demo/src/statics/icons/icon-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/quasarframework/quasar-ui-qribbon/bbfa1abac83ab88b39c1e505edd48cb20fb1b78f/demo/src/statics/icons/icon-512x512.png -------------------------------------------------------------------------------- /demo/src/statics/icons/ms-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/quasarframework/quasar-ui-qribbon/bbfa1abac83ab88b39c1e505edd48cb20fb1b78f/demo/src/statics/icons/ms-icon-144x144.png -------------------------------------------------------------------------------- /demo/src/statics/icons/safari-pinned-tab.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /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 ribbon from './ribbon' 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 | ribbon, 18 | common 19 | }, 20 | 21 | // enable strict mode (adds overhead!) 22 | // for dev mode only 23 | strict: process.env.DEV 24 | }) 25 | 26 | return Store 27 | } 28 | -------------------------------------------------------------------------------- /demo/src/store/ribbon/actions.js: -------------------------------------------------------------------------------- 1 | /* 2 | export function someAction (context) { 3 | } 4 | */ 5 | -------------------------------------------------------------------------------- /demo/src/store/ribbon/getters.js: -------------------------------------------------------------------------------- 1 | // export const calendarView = (state) => state.calendarView 2 | -------------------------------------------------------------------------------- /demo/src/store/ribbon/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/ribbon/mutations.js: -------------------------------------------------------------------------------- 1 | // export const calendarView = (state, view) => { 2 | // state.calendarView = view 3 | // } 4 | -------------------------------------------------------------------------------- /demo/src/store/ribbon/state.js: -------------------------------------------------------------------------------- 1 | export default { 2 | // calendarView: 'day', 3 | } 4 | -------------------------------------------------------------------------------- /docs/404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | QRibbon 404 Redirect 8 | 9 | 12 | 13 | 14 | 15 | 16 | 17 |               18 |               19 |               20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /docs/fonts/KFOkCnqEu92Fr1MmgVxIIzQ.5cb7edfc.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/quasarframework/quasar-ui-qribbon/bbfa1abac83ab88b39c1e505edd48cb20fb1b78f/docs/fonts/KFOkCnqEu92Fr1MmgVxIIzQ.5cb7edfc.woff -------------------------------------------------------------------------------- /docs/fonts/KFOlCnqEu92Fr1MmEU9fBBc-.87284894.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/quasarframework/quasar-ui-qribbon/bbfa1abac83ab88b39c1e505edd48cb20fb1b78f/docs/fonts/KFOlCnqEu92Fr1MmEU9fBBc-.87284894.woff -------------------------------------------------------------------------------- /docs/fonts/KFOlCnqEu92Fr1MmSU5fBBc-.b00849e0.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/quasarframework/quasar-ui-qribbon/bbfa1abac83ab88b39c1e505edd48cb20fb1b78f/docs/fonts/KFOlCnqEu92Fr1MmSU5fBBc-.b00849e0.woff -------------------------------------------------------------------------------- /docs/fonts/KFOlCnqEu92Fr1MmWUlfBBc-.adcde98f.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/quasarframework/quasar-ui-qribbon/bbfa1abac83ab88b39c1e505edd48cb20fb1b78f/docs/fonts/KFOlCnqEu92Fr1MmWUlfBBc-.adcde98f.woff -------------------------------------------------------------------------------- /docs/fonts/KFOlCnqEu92Fr1MmYUtfBBc-.bb1e4dc6.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/quasarframework/quasar-ui-qribbon/bbfa1abac83ab88b39c1e505edd48cb20fb1b78f/docs/fonts/KFOlCnqEu92Fr1MmYUtfBBc-.bb1e4dc6.woff -------------------------------------------------------------------------------- /docs/fonts/KFOmCnqEu92Fr1Mu4mxM.60fa3c06.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/quasarframework/quasar-ui-qribbon/bbfa1abac83ab88b39c1e505edd48cb20fb1b78f/docs/fonts/KFOmCnqEu92Fr1Mu4mxM.60fa3c06.woff -------------------------------------------------------------------------------- /docs/fonts/fa-brands-400.c5e0f14f.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/quasarframework/quasar-ui-qribbon/bbfa1abac83ab88b39c1e505edd48cb20fb1b78f/docs/fonts/fa-brands-400.c5e0f14f.woff -------------------------------------------------------------------------------- /docs/fonts/fa-brands-400.cccc9d29.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/quasarframework/quasar-ui-qribbon/bbfa1abac83ab88b39c1e505edd48cb20fb1b78f/docs/fonts/fa-brands-400.cccc9d29.woff2 -------------------------------------------------------------------------------- /docs/fonts/fa-regular-400.c4f508e7.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/quasarframework/quasar-ui-qribbon/bbfa1abac83ab88b39c1e505edd48cb20fb1b78f/docs/fonts/fa-regular-400.c4f508e7.woff -------------------------------------------------------------------------------- /docs/fonts/fa-regular-400.f5f2566b.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/quasarframework/quasar-ui-qribbon/bbfa1abac83ab88b39c1e505edd48cb20fb1b78f/docs/fonts/fa-regular-400.f5f2566b.woff2 -------------------------------------------------------------------------------- /docs/fonts/fa-solid-900.333bae20.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/quasarframework/quasar-ui-qribbon/bbfa1abac83ab88b39c1e505edd48cb20fb1b78f/docs/fonts/fa-solid-900.333bae20.woff -------------------------------------------------------------------------------- /docs/fonts/fa-solid-900.44d537ab.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/quasarframework/quasar-ui-qribbon/bbfa1abac83ab88b39c1e505edd48cb20fb1b78f/docs/fonts/fa-solid-900.44d537ab.woff2 -------------------------------------------------------------------------------- /docs/fonts/flUhRq6tzZclQEJ-Vdg-IuiaDsNa.29b882f0.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/quasarframework/quasar-ui-qribbon/bbfa1abac83ab88b39c1e505edd48cb20fb1b78f/docs/fonts/flUhRq6tzZclQEJ-Vdg-IuiaDsNa.29b882f0.woff -------------------------------------------------------------------------------- /docs/fonts/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.0509ab09.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/quasarframework/quasar-ui-qribbon/bbfa1abac83ab88b39c1e505edd48cb20fb1b78f/docs/fonts/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.0509ab09.woff2 -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | QRibbon Demo
-------------------------------------------------------------------------------- /docs/js/2d22c0ff.a3b9c05c.js: -------------------------------------------------------------------------------- 1 | (window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["2d22c0ff"],{f241:function(t,e,a){"use strict";a.r(e);var r=function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("q-layout",{attrs:{view:"HHh LpR fFf"}},[a("q-header",{attrs:{elevated:""}},[a("q-toolbar",[a("q-btn",{attrs:{flat:"",dense:"",round:"","aria-label":"Menu"},on:{click:function(e){t.leftDrawerOpen=!t.leftDrawerOpen}}},[a("q-icon",{attrs:{name:"menu"}})],1),a("q-toolbar-title",[t._v("\n QRibbon "),a("span",{staticClass:"text-subtitle2"},[t._v("v"+t._s(t.version))])]),a("q-space"),a("q-btn",{attrs:{flat:"",round:"",icon:t.$q.dark.isActive?"brightness_2":"brightness_5"},on:{click:function(e){return t.$q.dark.toggle()}}}),t.$q.screen.width>500?a("div",[t._v("Quasar v"+t._s(t.$q.version))]):t._e(),!0!==t.noRightDrawer?a("q-btn",{attrs:{flat:"",dense:"",round:"","aria-label":"Table of Contents"},on:{click:function(e){t.rightDrawerOpen=!t.rightDrawerOpen}}},[a("q-icon",{attrs:{name:"menu"}})],1):t._e()],1)],1),a("q-drawer",{attrs:{bordered:""},model:{value:t.leftDrawerOpen,callback:function(e){t.leftDrawerOpen=e},expression:"leftDrawerOpen"}},[a("q-list",[a("q-item-label",{attrs:{header:""}},[t._v("QRibbon")]),a("q-item",{attrs:{clickable:"",to:"/docs"}},[a("q-item-section",{attrs:{avatar:""}},[a("q-icon",{attrs:{name:"home"}})],1),a("q-item-section",[a("q-item-label",[t._v("QRibbon API")])],1)],1),a("q-item",{attrs:{clickable:"",to:"/examples"}},[a("q-item-section",{attrs:{avatar:""}},[a("q-icon",{attrs:{name:"?"}})],1),a("q-item-section",[a("q-item-label",[t._v("Examples")])],1)],1),a("q-item",{attrs:{clickable:"",to:"/builder"}},[a("q-item-section",{attrs:{avatar:""}},[a("q-icon",{attrs:{name:"build"}})],1),a("q-item-section",[a("q-item-label",[t._v("Ribbon Builder")])],1)],1),a("q-item-label",{attrs:{header:""}},[t._v("Essential Quasar Links")]),a("q-item",{attrs:{clickable:"",tag:"a",target:"_blank",href:"https://quasar.dev"}},[a("q-item-section",{attrs:{avatar:""}},[a("q-icon",{attrs:{name:"school"}})],1),a("q-item-section",[a("q-item-label",[t._v("Docs")]),a("q-item-label",{attrs:{caption:""}},[t._v("quasar.dev")])],1)],1),a("q-item",{attrs:{clickable:"",tag:"a",target:"_blank",href:"https://github.com/quasarframework/"}},[a("q-item-section",{attrs:{avatar:""}},[a("q-icon",{attrs:{name:"code"}})],1),a("q-item-section",[a("q-item-label",[t._v("Github")]),a("q-item-label",{attrs:{caption:""}},[t._v("github.com/quasarframework")])],1)],1),a("q-item",{attrs:{clickable:"",tag:"a",target:"_blank",href:"https://chat.quasar.dev"}},[a("q-item-section",{attrs:{avatar:""}},[a("q-icon",{attrs:{name:"chat"}})],1),a("q-item-section",[a("q-item-label",[t._v("Discord Chat Channel")]),a("q-item-label",{attrs:{caption:""}},[t._v("chat.quasar.dev")])],1)],1),a("q-item",{attrs:{clickable:"",tag:"a",target:"_blank",href:"https://forum.quasar.dev"}},[a("q-item-section",{attrs:{avatar:""}},[a("q-icon",{attrs:{name:"record_voice_over"}})],1),a("q-item-section",[a("q-item-label",[t._v("Forum")]),a("q-item-label",{attrs:{caption:""}},[t._v("forum.quasar.dev")])],1)],1),a("q-item",{attrs:{clickable:"",tag:"a",target:"_blank",href:"https://twitter.com/quasarframework"}},[a("q-item-section",{attrs:{avatar:""}},[a("q-icon",{attrs:{name:"rss_feed"}})],1),a("q-item-section",[a("q-item-label",[t._v("Twitter")]),a("q-item-label",{attrs:{caption:""}},[t._v("@quasarframework")])],1)],1)],1)],1),!0!==t.noRightDrawer?a("q-drawer",{ref:"drawer",attrs:{side:"right",bordered:""},model:{value:t.rightDrawerOpen,callback:function(e){t.rightDrawerOpen=e},expression:"rightDrawerOpen"}},[a("q-scroll-area",{staticClass:"fit"},[a("q-list",{attrs:{dense:""}},t._l(t.toc,(function(e){return a("q-item",{directives:[{name:"ripple",rawName:"v-ripple"}],key:e.id,attrs:{clickable:"",dense:"",active:t.activeToc===e.id},on:{click:function(a){return t.scrollTo(e.id)}}},[e.level>1?a("q-item-section",{attrs:{side:""}},[t._v(" • ")]):t._e(),a("q-item-section",{class:"toc-item toc-level-"+e.level},[t._v(t._s(e.label))])],1)})),1)],1)],1):t._e(),a("q-page-container",[a("router-view")],1)],1)},i=[],n=(a("8e6e"),a("8a81"),a("ac6a"),a("cadf"),a("06db"),a("456d"),a("c47a")),o=a.n(n),s=a("2f62"),c=a("0831"),l=a("384e");function m(t,e){var a=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),a.push.apply(a,r)}return a}function q(t){for(var e=1;e Please note, this is currently a work-in-progress (WIP).\n\nQRibbon is a [Quasar App Extension](https://quasar.dev/app-extensions/introduction). It allows you to display ribbons on your page.\n\n# Install\nTo add this App Extension to your Quasar application, run the following (in your Quasar app folder):\n\n```\nquasar ext add @quasar/qribbon\n```\n\n# Uninstall\nTo remove this App Extension from your Quasar application, run the following (in your Quasar app folder):\n\n```\nquasar ext remove @quasar/qribbon\n```\n\n# Describe\nYou can use `quasar describe QRibbon`\n\n# Source\nCan be found [here](https://github.com/quasarframework/app-extension-qribbon/).\n\n# Docs\nCan be found [here](https://quasarframework.github.io/app-extension-qribbon/).\n\n# Examples\nCan be found [here](https://quasarframework.github.io/app-extension-qribbon/examples).\n\n# Interactive Demo / QRibbon Builder\nCan be found [here](https://quasarframework.github.io/app-extension-qribbon/builder).\n\n# Demo (source) Project\nCan be found [here](https://github.com/quasarframework/app-extension-qribbon/tree/master/demo).\n",s=o("9cdd"),l={name:"PageIndex",components:{Hero:r["a"]},data:function(){return{markdown:i,json:s}},computed:{toc:{get:function(){return this.$store.state.common.toc},set:function(t){this.$store.commit("common/toc",t)}}},methods:{onToc:function(t){t.push({id:"QRibbon-API",label:"QRibbon API",level:1,children:Array(0)}),t.push({id:"Donate",label:"Donate",level:1,children:Array(0)}),this.toc=t}}},c=l,u=o("2877"),p=Object(u["a"])(c,a,n,!1,null,null,null);e["default"]=p.exports},"9cdd":function(t){t.exports=JSON.parse('{"type":"component","props":{"type":{"type":"String","category":"behavior","desc":"Tells the component which type of ribbon is to be used","default":"horizontal","values":["horizontal","corner","vertical"],"examples":["type=\\"horizontal\\"","type=\\"vertical\\""]},"position":{"type":"String","category":"behavior","desc":"Tells the component which position is to be used. If `horizontal`, then only `left` or `right` are applicable. Otherwise, the remaining positions can be used with `vertical` or `corner`","default":"`left` or `top-left`","values":["left","right","full","top left","top right","bottom left","bottom right"],"examples":["position=\\"left\\"","position=\\"top right\\""]},"color":{"type":"String","category":"style","desc":"Set the text color using any CSS color, Quasar Color or CSS var pointing to a color","default":"white","examples":["color=\\"orange-8\\"","color=\\"--blue-grey-6\\""]},"background-color":{"type":"String","category":"style","desc":"Set the background color using any CSS color, Quasar Color or CSS var pointing to a color","default":"#027BE3","examples":["background-color=\\"orange-8\\"","background-color=\\"--blue-grey-6\\""]},"leaf-color":{"type":"String","category":"style","desc":"CSS Color for the leaf","default":"Auto-shaded based on `background-color`","examples":["leaf-color=\\"#6A687A\\"","leaf-color=\\"#536271\\""]},"leaf-position":{"type":"String","category":"behavior","desc":"For `horizontal` use `top` or `bottom`, for `vertical` use `left` or `right`","default":"`bottom` or `left`","values":["top","bottom","left","right"],"examples":["leaf-position=\\"bottom\\"","leaf-position=\\"left\\""]},"size":{"type":"String","category":"style","desc":"Use `full` to full the container","default":"null","values":["null","full"],"examples":["size=\\"full\\""]},"decoration":{"type":"String","category":"style","desc":"The type of decoration to use with the ribbon. Cannot be used with `corner` type ribbon","default":"null","values":["null","rounded-in","rounded-out","point-in","point-out"],"examples":["decoration=\\"rounded-in\\"","decoration=\\"point-out\\""]},"inline":{"type":"Boolean","category":"behavior","desc":"Used when 2 QRibbons are required to be inline (on left and right along the same X axis). Both QRibbon\'s must be wrapped with the following: `
`"},"glow":{"type":"Boolean","category":"behavior","desc":"Add a moving glow to the ribbon"},"glow-speed":{"type":"Number","category":"behavior","desc":"The duration (in seconds) it takes for the animation to complete","default":"1.5","examples":[":glow-speed=\\"3\\"",":glow-speed=\\"1.75\\""]},"glow-iteration-count":{"type":"String","category":"behavior","desc":"A number or string representing how many times the animation will run","default":"infinite","examples":["glow-iteration-count=\\"infinite\\"","glow-iteration-count=\\"10\\""]}},"slots":{"default":{"desc":"Any content can be entered into the default slot and it will show in the ribbon"}}}')}}]); -------------------------------------------------------------------------------- /docs/js/runtime.5b263ee3.js: -------------------------------------------------------------------------------- 1 | (function(e){function r(r){for(var n,a,i=r[0],c=r[1],f=r[2],l=0,s=[];l -------------------------------------------------------------------------------- /ui/.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 | -------------------------------------------------------------------------------- /ui/.eslintignore: -------------------------------------------------------------------------------- 1 | docs 2 | -------------------------------------------------------------------------------- /ui/.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 | -------------------------------------------------------------------------------- /ui/.npmignore: -------------------------------------------------------------------------------- 1 | /build 2 | /dev 3 | umd-test.html 4 | 5 | .DS_Store 6 | .thumbs.db 7 | yarn.lock 8 | npm-debug.log* 9 | yarn-debug.log* 10 | yarn-error.log* 11 | 12 | # Editor directories and files 13 | .idea 14 | .vscode 15 | *.suo 16 | *.ntvs* 17 | *.njsproj 18 | *.sln 19 | .editorconfig 20 | 21 | # Linters 22 | .eslintignore 23 | .eslintrc.js 24 | 25 | # Other 26 | /src/components/QRibbon.json 27 | -------------------------------------------------------------------------------- /ui/README.md: -------------------------------------------------------------------------------- 1 | # Component QRibbon 2 | 3 | [![npm](https://img.shields.io/npm/v/@quasar/quasar-ui-qribbon.svg?label=quasar-ui-qribbon)](https://www.npmjs.com/package/@quasar/quasar-ui-qribbon) 4 | [![npm](https://img.shields.io/npm/dt/@quasar/quasar-ui-qribbon.svg)](https://www.npmjs.com/package/@quasar/quasar-ui-qribbon) 5 | 6 | # QRibbon 7 | Add Ribbons to your Quasar Apps 8 | 9 | 10 | # Usage 11 | 12 | ## Quasar CLI project 13 | 14 | Install the [App Extension](../app-extension). 15 | 16 | **OR**: 17 | 18 | Create and register a boot file: 19 | 20 | ```js 21 | import Vue from 'vue' 22 | import { QRibbon } from '@quasar/quasar-ui-qribbon' 23 | import '@quasar/quasar-ui-qribbon/dist/index.css' 24 | 25 | Vue.use(Plugin) 26 | ``` 27 | 28 | **OR**: 29 | 30 | ```html 31 | 32 | 33 | 42 | ``` 43 | 44 | ## Vue CLI project 45 | 46 | ```js 47 | import Vue from 'vue' 48 | import { QRibbon } from '@quasar/quasar-ui-qribbon' 49 | import '@quasar/quasar-ui-qribbon/dist/index.css' 50 | 51 | Vue.use(Plugin) 52 | ``` 53 | 54 | **OR**: 55 | 56 | ```html 57 | 58 | 59 | 68 | ``` 69 | 70 | ## UMD variant 71 | 72 | Exports `window.QRibbon`. 73 | 74 | Add the following tag(s) after the Quasar ones: 75 | 76 | ```html 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | ``` 86 | If you need the RTL variant of the CSS, then go for the following (instead of the above stylesheet link): 87 | ```html 88 | 89 | ``` 90 | 91 | # Setup 92 | ```bash 93 | $ yarn 94 | ``` 95 | 96 | # Developing 97 | ```bash 98 | # start dev in SPA mode 99 | $ yarn dev 100 | 101 | # start dev in UMD mode 102 | $ yarn dev:umd 103 | 104 | # start dev in SSR mode 105 | $ yarn dev:ssr 106 | 107 | # start dev in Cordova iOS mode 108 | $ yarn dev:ios 109 | 110 | # start dev in Cordova Android mode 111 | $ yarn dev:android 112 | 113 | # start dev in Electron mode 114 | $ yarn dev:electron 115 | ``` 116 | 117 | # Building package 118 | ```bash 119 | $ yarn build 120 | ``` 121 | 122 | # Donate 123 | If you appreciate the work that went into this, please consider donating to [Quasar](https://donate.quasar.dev) or [Allan](https://github.com/sponsors/webnoob). 124 | 125 | # License 126 | MIT (c) Allan Gaunt 127 | -------------------------------------------------------------------------------- /ui/build/build.api.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | global.rootDir = path.resolve(__dirname, '..') 3 | global.distDir = path.resolve(__dirname, '../dist') 4 | 5 | require('quasar-json-api')() 6 | -------------------------------------------------------------------------------- /ui/build/config.js: -------------------------------------------------------------------------------- 1 | const { name, author, version } = require('../package.json') 2 | const year = (new Date()).getFullYear() 3 | 4 | module.exports = { 5 | name, 6 | version, 7 | banner: 8 | '/*!\n' + 9 | ' * ' + name + ' v' + version + '\n' + 10 | ' * (c) ' + year + ' ' + author + '\n' + 11 | ' * Released under the MIT License.\n' + 12 | ' */\n' 13 | } 14 | -------------------------------------------------------------------------------- /ui/build/entry/index.common.js: -------------------------------------------------------------------------------- 1 | import Plugin from '../../src/index' 2 | 3 | export default Plugin 4 | -------------------------------------------------------------------------------- /ui/build/entry/index.esm.js: -------------------------------------------------------------------------------- 1 | import Plugin from '../../src/index' 2 | 3 | export default Plugin 4 | export * from '../../src/index' 5 | -------------------------------------------------------------------------------- /ui/build/entry/index.umd.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Plugin from '../../src/index' 3 | 4 | Vue.use(Plugin) 5 | 6 | export * from '../../src/index' 7 | -------------------------------------------------------------------------------- /ui/build/index.js: -------------------------------------------------------------------------------- 1 | process.env.NODE_ENV = 'production' 2 | 3 | const parallel = require('os').cpus().length > 1 4 | const runJob = parallel ? require('child_process').fork : require 5 | const { join } = require('path') 6 | const { createFolder } = require('./utils') 7 | const { green, blue } = require('chalk') 8 | 9 | console.log() 10 | 11 | require('./script.clean.js') 12 | 13 | console.log(` 📦 Building ${green('v' + require('../package.json').version)}...${parallel ? blue(' [multi-threaded]') : ''}\n`) 14 | 15 | createFolder('dist') 16 | 17 | runJob(join(__dirname, './script.javascript')) 18 | runJob(join(__dirname, './script.css')) 19 | -------------------------------------------------------------------------------- /ui/build/script.clean.js: -------------------------------------------------------------------------------- 1 | var 2 | rimraf = require('rimraf'), 3 | path = require('path') 4 | 5 | rimraf.sync(path.resolve(__dirname, '../dist/*')) 6 | console.log(` 💥 Cleaned build artifacts.\n`) 7 | -------------------------------------------------------------------------------- /ui/build/script.css.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const sass = require('node-sass') 3 | const postcss = require('postcss') 4 | const cssnano = require('cssnano') 5 | const rtl = require('postcss-rtl') 6 | const autoprefixer = require('autoprefixer') 7 | 8 | const buildConf = require('./config') 9 | const buildUtils = require('./utils') 10 | 11 | const postCssCompiler = postcss([ autoprefixer ]) 12 | const postCssRtlCompiler = postcss([ rtl({}) ]) 13 | 14 | const nano = postcss([ 15 | cssnano({ 16 | preset: ['default', { 17 | mergeLonghand: false, 18 | convertValues: false, 19 | cssDeclarationSorter: false, 20 | reduceTransforms: false 21 | }] 22 | }) 23 | ]) 24 | 25 | Promise 26 | .all([ 27 | generate('src/index.sass', `dist/index`) 28 | ]) 29 | .catch(e => { 30 | console.error(e) 31 | process.exit(1) 32 | }) 33 | 34 | /** 35 | * Helpers 36 | */ 37 | 38 | function resolve (_path) { 39 | return path.resolve(__dirname, '..', _path) 40 | } 41 | 42 | function generate (src, dest) { 43 | src = resolve(src) 44 | dest = resolve(dest) 45 | 46 | return new Promise((resolve, reject) => { 47 | sass.render({ file: src, includePaths: ['node_modules'] }, (err, result) => { 48 | if (err) { 49 | reject(err) 50 | return 51 | } 52 | 53 | resolve(result.css) 54 | }) 55 | }) 56 | .then(code => buildConf.banner + code) 57 | .then(code => postCssCompiler.process(code, { from: void 0 })) 58 | .then(code => { 59 | code.warnings().forEach(warn => { 60 | console.warn(warn.toString()) 61 | }) 62 | return code.css 63 | }) 64 | .then(code => Promise.all([ 65 | generateUMD(dest, code), 66 | postCssRtlCompiler.process(code, { from: void 0 }) 67 | .then(code => generateUMD(dest, code.css, '.rtl')) 68 | ])) 69 | } 70 | 71 | function generateUMD (dest, code, ext = '') { 72 | return buildUtils.writeFile(`${dest}${ext}.css`, code, true) 73 | .then(code => nano.process(code, { from: void 0 })) 74 | .then(code => buildUtils.writeFile(`${dest}${ext}.min.css`, code.css, true)) 75 | } 76 | -------------------------------------------------------------------------------- /ui/build/script.javascript.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const rollup = require('rollup') 3 | const uglify = require('uglify-es') 4 | const buble = require('@rollup/plugin-buble') 5 | const json = require('@rollup/plugin-json') 6 | const nodeResolve = require('rollup-plugin-node-resolve') 7 | 8 | const buildConf = require('./config') 9 | const buildUtils = require('./utils') 10 | 11 | const bubleConfig = { 12 | objectAssign: 'Object.assign' 13 | } 14 | 15 | const rollupPlugins = [ 16 | nodeResolve({ 17 | extensions: ['.js'], 18 | preferBuiltins: false 19 | }), 20 | json(), 21 | buble(bubleConfig) 22 | ] 23 | 24 | const builds = [ 25 | { 26 | rollup: { 27 | input: { 28 | input: resolve(`entry/index.esm.js`) 29 | }, 30 | output: { 31 | file: resolve(`../dist/index.esm.js`), 32 | format: 'es' 33 | } 34 | }, 35 | build: { 36 | // unminified: true, 37 | minified: true 38 | } 39 | }, 40 | { 41 | rollup: { 42 | input: { 43 | input: resolve(`entry/index.common.js`) 44 | }, 45 | output: { 46 | file: resolve(`../dist/index.common.js`), 47 | format: 'cjs' 48 | } 49 | }, 50 | build: { 51 | // unminified: true, 52 | minified: true 53 | } 54 | }, 55 | { 56 | rollup: { 57 | input: { 58 | input: resolve(`entry/index.umd.js`) 59 | }, 60 | output: { 61 | name: 'QRibbon', 62 | file: resolve(`../dist/index.umd.js`), 63 | format: 'umd' 64 | } 65 | }, 66 | build: { 67 | unminified: true, 68 | minified: true, 69 | minExt: true 70 | } 71 | } 72 | ] 73 | 74 | build(builds) 75 | .then(() => { 76 | require('./build.api') 77 | }) 78 | 79 | /** 80 | * Helpers 81 | */ 82 | 83 | function resolve (_path) { 84 | return path.resolve(__dirname, _path) 85 | } 86 | 87 | function build (builds) { 88 | return Promise 89 | .all(builds.map(genConfig).map(buildEntry)) 90 | .catch(buildUtils.logError) 91 | } 92 | 93 | function genConfig (opts) { 94 | Object.assign(opts.rollup.input, { 95 | plugins: rollupPlugins, 96 | external: [ 'vue', 'quasar' ] 97 | }) 98 | 99 | Object.assign(opts.rollup.output, { 100 | banner: buildConf.banner, 101 | globals: { vue: 'Vue', quasar: 'Quasar' } 102 | }) 103 | 104 | return opts 105 | } 106 | 107 | function addExtension (filename, ext = 'min') { 108 | const insertionPoint = filename.lastIndexOf('.') 109 | return `${filename.slice(0, insertionPoint)}.${ext}${filename.slice(insertionPoint)}` 110 | } 111 | 112 | function buildEntry (config) { 113 | return rollup 114 | .rollup(config.rollup.input) 115 | .then(bundle => bundle.generate(config.rollup.output)) 116 | .then(({ output }) => { 117 | const code = config.rollup.output.format === 'umd' 118 | ? injectVueRequirement(output[0].code) 119 | : output[0].code 120 | 121 | return config.build.unminified 122 | ? buildUtils.writeFile(config.rollup.output.file, code) 123 | : code 124 | }) 125 | .then(code => { 126 | if (!config.build.minified) { 127 | return code 128 | } 129 | 130 | const minified = uglify.minify(code, { 131 | compress: { 132 | pure_funcs: ['makeMap'] 133 | } 134 | }) 135 | 136 | if (minified.error) { 137 | return Promise.reject(minified.error) 138 | } 139 | 140 | return buildUtils.writeFile( 141 | config.build.minExt === true 142 | ? addExtension(config.rollup.output.file) 143 | : config.rollup.output.file, 144 | buildConf.banner + minified.code, 145 | true 146 | ) 147 | }) 148 | .catch(err => { 149 | console.error(err) 150 | process.exit(1) 151 | }) 152 | } 153 | 154 | function injectVueRequirement (code) { 155 | const index = code.indexOf(`Vue = Vue && Vue.hasOwnProperty('default') ? Vue['default'] : Vue`) 156 | 157 | if (index === -1) { 158 | return code 159 | } 160 | 161 | const checkMe = ` if (Vue === void 0) { 162 | console.error('[ Quasar ] Vue is required to run. Please add a script tag for it before loading Quasar.') 163 | return 164 | } 165 | ` 166 | 167 | return code.substring(0, index - 1) + 168 | checkMe + 169 | code.substring(index) 170 | } 171 | -------------------------------------------------------------------------------- /ui/build/script.open-umd.js: -------------------------------------------------------------------------------- 1 | const { resolve } = require('path') 2 | const open = require('open') 3 | 4 | open( 5 | resolve(__dirname, '../umd-test.html') 6 | ) 7 | -------------------------------------------------------------------------------- /ui/build/utils.js: -------------------------------------------------------------------------------- 1 | const 2 | fs = require('fs'), 3 | path = require('path'), 4 | zlib = require('zlib'), 5 | { green, blue, red, cyan } = require('chalk'), 6 | kebabRegex = /[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g 7 | 8 | function getSize (code) { 9 | return (code.length / 1024).toFixed(2) + 'kb' 10 | } 11 | 12 | module.exports.createFolder = function (folder) { 13 | const dir = path.join(__dirname, '..', folder) 14 | if (!fs.existsSync(dir)) { 15 | fs.mkdirSync(dir) 16 | } 17 | } 18 | 19 | module.exports.writeFile = function (dest, code, zip) { 20 | const banner = dest.indexOf('.json') > -1 21 | ? red('[json]') 22 | : dest.indexOf('.js') > -1 23 | ? green('[js] ') 24 | : dest.indexOf('.ts') > -1 25 | ? cyan('[ts] ') 26 | : blue('[css] ') 27 | 28 | return new Promise((resolve, reject) => { 29 | function report (extra) { 30 | console.log(`${banner} ${path.relative(process.cwd(), dest).padEnd(41)} ${getSize(code).padStart(8)}${extra || ''}`) 31 | resolve(code) 32 | } 33 | 34 | fs.writeFile(dest, code, err => { 35 | if (err) return reject(err) 36 | if (zip) { 37 | zlib.gzip(code, (err, zipped) => { 38 | if (err) return reject(err) 39 | report(` (gzipped: ${getSize(zipped).padStart(8)})`) 40 | }) 41 | } 42 | else { 43 | report() 44 | } 45 | }) 46 | }) 47 | } 48 | 49 | module.exports.readFile = function (file) { 50 | return fs.readFileSync(file, 'utf-8') 51 | } 52 | 53 | module.exports.logError = function (err) { 54 | console.error('\n' + red('[Error]'), err) 55 | console.log() 56 | } 57 | -------------------------------------------------------------------------------- /ui/dev/.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 | -------------------------------------------------------------------------------- /ui/dev/.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 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | -------------------------------------------------------------------------------- /ui/dev/.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 | -------------------------------------------------------------------------------- /ui/dev/README.md: -------------------------------------------------------------------------------- 1 | # Dev app (playground) 2 | 3 | Adding .vue files to src/pages/ will auto-add them to the Index page list. 4 | -------------------------------------------------------------------------------- /ui/dev/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@quasar/babel-preset-app' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /ui/dev/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "dev", 3 | "version": "1.0.0", 4 | "description": "A Quasar Framework app", 5 | "productName": "Quasar App", 6 | "cordovaId": "org.cordova.quasar.app", 7 | "private": true, 8 | "scripts": { 9 | "dev": "quasar dev", 10 | "dev:ssr": "quasar dev -m ssr", 11 | "dev:ios": "quasar dev -m ios", 12 | "dev:android": "quasar dev -m android", 13 | "dev:electron": "quasar dev -m electron" 14 | }, 15 | "dependencies": { 16 | "@quasar/extras": "^1.3.3" 17 | }, 18 | "devDependencies": { 19 | "@quasar/app": "^1.2.3" 20 | }, 21 | "engines": { 22 | "node": ">= 8.9.0", 23 | "npm": ">= 5.6.0", 24 | "yarn": ">= 1.6.0" 25 | }, 26 | "browserslist": [ 27 | "last 1 version, not dead, ie >= 11" 28 | ] 29 | } 30 | -------------------------------------------------------------------------------- /ui/dev/quasar.conf.js: -------------------------------------------------------------------------------- 1 | // Configuration for your app 2 | // https://quasar.dev/quasar-cli/quasar-conf-js 3 | 4 | const path = require('path') 5 | 6 | module.exports = function (ctx) { 7 | return { 8 | // app boot file (/src/boot) 9 | // --> boot files are part of "main.js" 10 | boot: [ 11 | 'register.js' 12 | ], 13 | 14 | css: [ 15 | 'app.sass' 16 | ], 17 | 18 | extras: [ 19 | // 'ionicons-v4', 20 | // 'mdi-v4', 21 | // 'fontawesome-v5', 22 | // 'eva-icons', 23 | // 'themify', 24 | // 'roboto-font-latin-ext', // this or either 'roboto-font', NEVER both! 25 | 26 | 'roboto-font', // optional, you are not bound to it 27 | 'material-icons' // optional, you are not bound to it 28 | ], 29 | 30 | framework: { 31 | // iconSet: 'ionicons-v4', // Quasar icon set 32 | // lang: 'de', // Quasar language pack 33 | 34 | // Possible values for "all": 35 | // * 'auto' - Auto-import needed Quasar components & directives 36 | // (slightly higher compile time; next to minimum bundle size; most convenient) 37 | // * false - Manually specify what to import 38 | // (fastest compile time; minimum bundle size; most tedious) 39 | // * true - Import everything from Quasar 40 | // (not treeshaking Quasar; biggest bundle size; convenient) 41 | all: 'auto', 42 | 43 | components: [], 44 | directives: [], 45 | 46 | // Quasar plugins 47 | plugins: [] 48 | }, 49 | 50 | supportIE: false, 51 | 52 | // animations: 'all', // --- includes all animations 53 | animations: [], 54 | 55 | build: { 56 | vueRouterMode: 'history', 57 | 58 | chainWebpack (chain) { 59 | chain.resolve.alias.merge({ 60 | 'ui': path.resolve(__dirname, '../src/index.js') 61 | }) 62 | } 63 | }, 64 | 65 | devServer: { 66 | // port: 8080, 67 | open: true // opens browser window automatically 68 | } 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /ui/dev/src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | -------------------------------------------------------------------------------- /ui/dev/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/quasarframework/quasar-ui-qribbon/bbfa1abac83ab88b39c1e505edd48cb20fb1b78f/ui/dev/src/assets/.gitkeep -------------------------------------------------------------------------------- /ui/dev/src/boot/register.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import VuePlugin from 'ui' // "ui" is aliased in quasar.conf.js 3 | 4 | Vue.use(VuePlugin) 5 | -------------------------------------------------------------------------------- /ui/dev/src/components/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/quasarframework/quasar-ui-qribbon/bbfa1abac83ab88b39c1e505edd48cb20fb1b78f/ui/dev/src/components/.gitkeep -------------------------------------------------------------------------------- /ui/dev/src/css/app.sass: -------------------------------------------------------------------------------- 1 | // app global css in Sass form 2 | @import '../../../src/index.sass' 3 | 4 | .ribbon-wrapper.move-1 5 | .qribbon__vertical--top-left, 6 | .qribbon__vertical--bottom-left 7 | left: 20px 8 | 9 | .ribbon-wrapper.move-2 10 | .qribbon__vertical--top-left, 11 | .qribbon__vertical--bottom-left 12 | left: 70px 13 | 14 | .ribbon-wrapper.move-3 15 | .qribbon__vertical--top-left, 16 | .qribbon__vertical--bottom-left 17 | left: 120px 18 | 19 | .ribbon-wrapper 20 | height: 50px 21 | 22 | .border-radius 23 | [class^=qribbon__] 24 | border-radius: 3px 5px 5px 0 25 | 26 | .box-ribbon-wrapper 27 | width: 90% 28 | min-height: 400px 29 | margin: 0 auto 30 | position: relative 31 | 32 | .github-text 33 | font-size: 14px 34 | 35 | a 36 | border-top: 1px dashed white 37 | border-bottom: 1px dashed white 38 | transform: rotate(45deg) 39 | text-decoration: none 40 | padding: 2px 0 41 | 42 | .qribbon-avatar 43 | [class*=horizontal--right].decorate-rounded-out 44 | border-top-left-radius: 45px 45 | border-bottom-left-radius: 45px 46 | padding-left: 5px 47 | 48 | .border-radius-top 49 | [class^=qribbon__] 50 | border-radius: 5px 5px 0 0 51 | 52 | .example-title 53 | white-space: unset 54 | -------------------------------------------------------------------------------- /ui/dev/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 | 20 |
21 | 22 | 23 | -------------------------------------------------------------------------------- /ui/dev/src/layouts/MyLayout.vue: -------------------------------------------------------------------------------- 1 | 26 | 27 | 40 | -------------------------------------------------------------------------------- /ui/dev/src/pages/Corner.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 26 | -------------------------------------------------------------------------------- /ui/dev/src/pages/Index.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 33 | 34 | 39 | -------------------------------------------------------------------------------- /ui/dev/src/pages/Test1.vue: -------------------------------------------------------------------------------- 1 | 204 | 205 | 207 | 208 | 225 | -------------------------------------------------------------------------------- /ui/dev/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 | // we get each page from server first! 26 | if (process.env.MODE === 'ssr' && process.env.CLIENT) { 27 | console.log('!!!!') 28 | console.log('On route change we deliberately load page from server -- in order to test hydration errors') 29 | console.log('!!!!') 30 | 31 | let reload = false 32 | Router.beforeEach((to, _, next) => { 33 | if (reload) { 34 | window.location.href = to.fullPath 35 | return 36 | } 37 | reload = true 38 | next() 39 | }) 40 | } 41 | 42 | return Router 43 | } 44 | -------------------------------------------------------------------------------- /ui/dev/src/router/pages.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Export files list for /pages folder 3 | */ 4 | 5 | function kebabCase (str) { 6 | const result = str.replace( 7 | /[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g, 8 | match => '-' + match.toLowerCase() 9 | ) 10 | return (str[0] === str[0].toUpperCase()) 11 | ? result.substring(1) 12 | : result 13 | } 14 | 15 | function slugify (str) { 16 | return encodeURIComponent(String(str).trim().replace(/\s+/g, '-')) 17 | } 18 | 19 | export default require.context('../pages', true, /^\.\/.*\.vue$/) 20 | .keys() 21 | .map(page => page.slice(2).replace('.vue', '')) 22 | .filter(page => page !== "Index") 23 | .map(page => ({ 24 | file: page, 25 | title: page + '.vue', 26 | path: slugify(kebabCase(page)) 27 | })) 28 | -------------------------------------------------------------------------------- /ui/dev/src/router/routes.js: -------------------------------------------------------------------------------- 1 | import pages from './pages' 2 | 3 | const children = pages.map(page => ({ 4 | path: page.path, 5 | component: () => import('pages/' + page.file + '.vue') 6 | })) 7 | 8 | const routes = [ 9 | { 10 | path: '/', 11 | component: () => import('layouts/MyLayout.vue'), 12 | children: [ 13 | { path: '', component: () => import('pages/Index.vue') } 14 | ].concat(children) 15 | } 16 | ] 17 | 18 | export default routes 19 | -------------------------------------------------------------------------------- /ui/dev/src/statics/app-logo-128x128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/quasarframework/quasar-ui-qribbon/bbfa1abac83ab88b39c1e505edd48cb20fb1b78f/ui/dev/src/statics/app-logo-128x128.png -------------------------------------------------------------------------------- /ui/dev/src/statics/icons/apple-icon-120x120.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/quasarframework/quasar-ui-qribbon/bbfa1abac83ab88b39c1e505edd48cb20fb1b78f/ui/dev/src/statics/icons/apple-icon-120x120.png -------------------------------------------------------------------------------- /ui/dev/src/statics/icons/apple-icon-152x152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/quasarframework/quasar-ui-qribbon/bbfa1abac83ab88b39c1e505edd48cb20fb1b78f/ui/dev/src/statics/icons/apple-icon-152x152.png -------------------------------------------------------------------------------- /ui/dev/src/statics/icons/apple-icon-167x167.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/quasarframework/quasar-ui-qribbon/bbfa1abac83ab88b39c1e505edd48cb20fb1b78f/ui/dev/src/statics/icons/apple-icon-167x167.png -------------------------------------------------------------------------------- /ui/dev/src/statics/icons/apple-icon-180x180.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/quasarframework/quasar-ui-qribbon/bbfa1abac83ab88b39c1e505edd48cb20fb1b78f/ui/dev/src/statics/icons/apple-icon-180x180.png -------------------------------------------------------------------------------- /ui/dev/src/statics/icons/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/quasarframework/quasar-ui-qribbon/bbfa1abac83ab88b39c1e505edd48cb20fb1b78f/ui/dev/src/statics/icons/favicon-16x16.png -------------------------------------------------------------------------------- /ui/dev/src/statics/icons/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/quasarframework/quasar-ui-qribbon/bbfa1abac83ab88b39c1e505edd48cb20fb1b78f/ui/dev/src/statics/icons/favicon-32x32.png -------------------------------------------------------------------------------- /ui/dev/src/statics/icons/favicon-96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/quasarframework/quasar-ui-qribbon/bbfa1abac83ab88b39c1e505edd48cb20fb1b78f/ui/dev/src/statics/icons/favicon-96x96.png -------------------------------------------------------------------------------- /ui/dev/src/statics/icons/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/quasarframework/quasar-ui-qribbon/bbfa1abac83ab88b39c1e505edd48cb20fb1b78f/ui/dev/src/statics/icons/favicon.ico -------------------------------------------------------------------------------- /ui/dev/src/statics/icons/icon-128x128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/quasarframework/quasar-ui-qribbon/bbfa1abac83ab88b39c1e505edd48cb20fb1b78f/ui/dev/src/statics/icons/icon-128x128.png -------------------------------------------------------------------------------- /ui/dev/src/statics/icons/icon-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/quasarframework/quasar-ui-qribbon/bbfa1abac83ab88b39c1e505edd48cb20fb1b78f/ui/dev/src/statics/icons/icon-192x192.png -------------------------------------------------------------------------------- /ui/dev/src/statics/icons/icon-256x256.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/quasarframework/quasar-ui-qribbon/bbfa1abac83ab88b39c1e505edd48cb20fb1b78f/ui/dev/src/statics/icons/icon-256x256.png -------------------------------------------------------------------------------- /ui/dev/src/statics/icons/icon-384x384.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/quasarframework/quasar-ui-qribbon/bbfa1abac83ab88b39c1e505edd48cb20fb1b78f/ui/dev/src/statics/icons/icon-384x384.png -------------------------------------------------------------------------------- /ui/dev/src/statics/icons/icon-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/quasarframework/quasar-ui-qribbon/bbfa1abac83ab88b39c1e505edd48cb20fb1b78f/ui/dev/src/statics/icons/icon-512x512.png -------------------------------------------------------------------------------- /ui/dev/src/statics/icons/ms-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/quasarframework/quasar-ui-qribbon/bbfa1abac83ab88b39c1e505edd48cb20fb1b78f/ui/dev/src/statics/icons/ms-icon-144x144.png -------------------------------------------------------------------------------- /ui/dev/src/statics/icons/safari-pinned-tab.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /ui/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@quasar/quasar-ui-qribbon", 3 | "version": "1.0.0-beta.11", 4 | "author": "Allan Gaunt ", 5 | "description": "QRibbon - Quasar component", 6 | "license": "MIT", 7 | "module": "dist/index.esm.js", 8 | "main": "dist/index.common.js", 9 | "scripts": { 10 | "lint": "eslint --ext .js,.vue src", 11 | "lint-fix": "eslint --ext .js,.vue src --fix", 12 | "dev": "cd dev && yarn dev && cd ..", 13 | "dev:umd": "yarn build && node build/script.open-umd.js", 14 | "dev:ssr": "cd dev && yarn 'dev:ssr' && cd ..", 15 | "dev:ios": "cd dev && yarn 'dev:ios' && cd ..", 16 | "dev:android": "cd dev && yarn 'dev:android' && cd ..", 17 | "dev:electron": "cd dev && yarn 'dev:electron' && cd ..", 18 | "build": "node build/index.js", 19 | "build:js": "node build/script.javascript.js", 20 | "build:css": "node build/script.css.js", 21 | "build:api": "node build/build.api.js" 22 | }, 23 | "publishConfig": { 24 | "access": "public" 25 | }, 26 | "repository": { 27 | "type": "git", 28 | "url": "git+https://github.com/quasarframework/quasar-ui-qribbon.git" 29 | }, 30 | "bugs": "https://github.com/quasarframework/quasar-ui-qribbon/issues", 31 | "homepage": "https://github.com/quasarframework/quasar-ui-qribbon", 32 | "keywords": [ 33 | "quasar", 34 | "app", 35 | "app extension", 36 | "extension", 37 | "ribbon", 38 | "qribbon", 39 | "corner" 40 | ], 41 | "dependencies": { 42 | "q-colorize-mixin": "^1.0.0" 43 | }, 44 | "devDependencies": { 45 | "@vue/eslint-config-standard": "^4.0.0", 46 | "autoprefixer": "^9.7.1", 47 | "babel-eslint": "^10.0.3", 48 | "chalk": "^3.0.0", 49 | "cssnano": "^4.1.10", 50 | "eslint": "^6.6.0", 51 | "eslint-loader": "^3.0.2", 52 | "eslint-plugin-vue": "^6.0.0", 53 | "node-sass": "^4.13.0", 54 | "open": "^7.0.0", 55 | "postcss": "^7.0.21", 56 | "postcss-rtl": "^1.5.0", 57 | "quasar": "^1.4.1", 58 | "quasar-json-api": "^0.0.8", 59 | "rimraf": "^3.0.0", 60 | "rollup": "^1.26.5", 61 | "@rollup/plugin-buble": "^0.20.0", 62 | "@rollup/plugin-json": "^4.0.0", 63 | "rollup-plugin-node-resolve": "^5.2.0", 64 | "uglify-es": "^3.3.9", 65 | "zlib": "^1.0.5" 66 | }, 67 | "browserslist": [ 68 | "last 1 version, not dead, ie >= 11" 69 | ] 70 | } 71 | -------------------------------------------------------------------------------- /ui/src/components/QRibbon.js: -------------------------------------------------------------------------------- 1 | // Utils 2 | import slot from 'quasar/src/utils/slot.js' 3 | 4 | // Mixins 5 | import QRibbonColorize from '../mixins/colorize' 6 | 7 | export default { 8 | name: 'QRibbon', 9 | 10 | mixins: [ QRibbonColorize ], 11 | 12 | props: { 13 | position: { 14 | type: String, 15 | default: 'left', 16 | validator: (val) => [ 17 | 'top-left', 18 | 'top-right', 19 | 'bottom-left', 20 | 'bottom-right', 21 | 'left', 22 | 'right' 23 | ].includes(val) 24 | }, 25 | 26 | type: { 27 | type: String, 28 | default: 'horizontal', 29 | validator: (val) => [ 30 | 'horizontal', 31 | 'vertical', 32 | 'corner' 33 | ].includes(val) 34 | }, 35 | 36 | leafPosition: { 37 | type: String, 38 | default: 'bottom', 39 | validator: (val) => [ 40 | 'top', 41 | 'bottom', 42 | 'left', 43 | 'right' 44 | ].includes(val) 45 | }, 46 | 47 | size: { 48 | type: String, 49 | validator: (val) => [ 50 | 'full' 51 | ].includes(val) 52 | }, 53 | 54 | decoration: { 55 | type: String, 56 | validator: (val) => [ 57 | 'rounded-in', 58 | 'rounded-out', 59 | 'point-in', 60 | 'point-out', 61 | // Allow resetting of the prop for transparent wrappers 62 | // https://github.com/quasarframework/app-extension-qribbon/issues/15 63 | void 0 64 | ].includes(val) 65 | }, 66 | 67 | glow: Boolean, 68 | glowSpeed: { 69 | type: Number, 70 | default: 1.5 71 | }, 72 | glowIterationCount: { 73 | type: String, 74 | default: 'infinite' 75 | }, 76 | 77 | inline: Boolean, 78 | 79 | backgroundColor: { 80 | type: String, 81 | default: 'primary' 82 | } 83 | }, 84 | 85 | computed: { 86 | ribbonClass () { 87 | let className = `qribbon__${this.type}--${this.position}` 88 | if (this.size !== void 0) className += `-${this.size}` 89 | if (this.leafPosition !== void 0) className += ` leaf-${this.leafPosition}` 90 | if (this.decoration !== void 0) className += ` decorate-${this.decoration}` 91 | return className 92 | }, 93 | ribbonContainerClass () { 94 | return `qribbon__container ${this.position} ${this.inline ? 'inline' : ''}` 95 | }, 96 | styles () { 97 | let style = {} 98 | style['--qribbon-text-color'] = this.calculateColor(this.color, 'white') 99 | style['--qribbon-background-color'] = this.calculateColor(this.backgroundColor) 100 | style['--qribbon-leaf-color'] = this.bgLeafColor 101 | style['--qribbon-glow-speed'] = `${this.glowSpeed}s` 102 | style['--qribbon-glow-iteration-count'] = this.glowIterationCount 103 | return style 104 | } 105 | }, 106 | 107 | methods: { 108 | __renderDefaultRibbon (h) { 109 | return h('div', { 110 | staticClass: this.ribbonClass, 111 | style: this.styles 112 | }, [ 113 | this.glow ? h('div', { 114 | staticClass: 'glow' 115 | }) : null, 116 | slot(this, 'default') 117 | ]) 118 | }, 119 | 120 | __renderCornerRibbon (h) { 121 | return h('div', { 122 | staticClass: this.ribbonClass, 123 | style: this.styles 124 | }, [ 125 | h('div', [ 126 | this.glow ? h('div', { 127 | staticClass: 'glow' 128 | }) : null, 129 | slot(this, 'default') 130 | ]) 131 | ]) 132 | }, 133 | 134 | __renderRibbon (h) { 135 | switch (this.type) { 136 | case 'corner': 137 | return this.__renderCornerRibbon(h) 138 | default: 139 | return this.__renderDefaultRibbon(h) 140 | } 141 | } 142 | }, 143 | 144 | render (h) { 145 | return h('div', { 146 | staticClass: this.ribbonContainerClass 147 | }, [ 148 | this.__renderRibbon(h) 149 | ]) 150 | } 151 | } 152 | -------------------------------------------------------------------------------- /ui/src/components/QRibbon.json: -------------------------------------------------------------------------------- 1 | { 2 | "props": { 3 | "type": { 4 | "type": "String", 5 | "category": "behavior", 6 | "desc": "Tells the component which type of ribbon is to be used", 7 | "default": "horizontal", 8 | "values": [ "horizontal", "corner", "vertical" ], 9 | "examples": [ 10 | "type=\"horizontal\"", 11 | "type=\"vertical\"" 12 | ] 13 | }, 14 | "position": { 15 | "type": "String", 16 | "category": "behavior", 17 | "desc": "Tells the component which position is to be used. If `horizontal`, then only `left` or `right` are applicable. Otherwise, the remaining positions can be used with `vertical` or `corner`", 18 | "default": "`left` or `top-left`", 19 | "values": [ "left", "right", "full", "top left", "top right", "bottom left", "bottom right" ], 20 | "examples": [ 21 | "position=\"left\"", 22 | "position=\"top right\"" 23 | ] 24 | }, 25 | "color": { 26 | "type": "String", 27 | "category": "style", 28 | "desc": "Set the text color using any CSS color, Quasar Color or CSS var pointing to a color", 29 | "default": "white", 30 | "examples": [ 31 | "color=\"orange-8\"", 32 | "color=\"--blue-grey-6\"" 33 | ] 34 | }, 35 | "background-color": { 36 | "type": "String", 37 | "category": "style", 38 | "desc": "Set the background color using any CSS color, Quasar Color or CSS var pointing to a color", 39 | "default": "#027BE3", 40 | "examples": [ 41 | "background-color=\"orange-8\"", 42 | "background-color=\"--blue-grey-6\"" 43 | ] 44 | }, 45 | "leaf-color": { 46 | "type": "String", 47 | "category": "style", 48 | "desc": "CSS Color for the leaf", 49 | "default": "Auto-shaded based on `background-color`", 50 | "examples": [ 51 | "leaf-color=\"#6A687A\"", 52 | "leaf-color=\"#536271\"" 53 | ] 54 | }, 55 | "leaf-position": { 56 | "type": "String", 57 | "category": "behavior", 58 | "desc": "For `horizontal` use `top` or `bottom`, for `vertical` use `left` or `right`", 59 | "default": "`bottom` or `left`", 60 | "values": [ "top", "bottom", "left", "right" ], 61 | "examples": [ 62 | "leaf-position=\"bottom\"", 63 | "leaf-position=\"left\"" 64 | ] 65 | }, 66 | "size": { 67 | "type": "String", 68 | "category": "style", 69 | "desc": "Use `full` to full the container", 70 | "default": "null", 71 | "values": [ "null", "full" ], 72 | "examples": [ 73 | "size=\"full\"" 74 | ] 75 | }, 76 | "decoration": { 77 | "type": "String", 78 | "category": "style", 79 | "desc": "The type of decoration to use with the ribbon. Cannot be used with `corner` type ribbon", 80 | "default": "null", 81 | "values": [ "null", "rounded-in", "rounded-out", "point-in", "point-out" ], 82 | "examples": [ 83 | "decoration=\"rounded-in\"", 84 | "decoration=\"point-out\"" 85 | ] 86 | }, 87 | "inline": { 88 | "type": "Boolean", 89 | "category": "behavior", 90 | "desc": "Used when 2 QRibbons are required to be inline (on left and right along the same X axis). Both QRibbon's must be wrapped with the following: `
`" 91 | }, 92 | "glow": { 93 | "type": "Boolean", 94 | "category": "behavior", 95 | "desc": "Add a moving glow to the ribbon" 96 | }, 97 | "glow-speed": { 98 | "type": "Number", 99 | "category": "behavior", 100 | "desc": "The duration (in seconds) it takes for the animation to complete", 101 | "default": "1.5", 102 | "examples": [ 103 | ":glow-speed=\"3\"", 104 | ":glow-speed=\"1.75\"" 105 | ] 106 | }, 107 | "glow-iteration-count": { 108 | "type": "String", 109 | "category": "behavior", 110 | "desc": "A number or string representing how many times the animation will run", 111 | "default": "infinite", 112 | "examples": [ 113 | "glow-iteration-count=\"infinite\"", 114 | "glow-iteration-count=\"10\"" 115 | ] 116 | } 117 | }, 118 | "slots": { 119 | "default": { 120 | "desc": "Any content can be entered into the default slot and it will show in the ribbon" 121 | } 122 | } 123 | } 124 | -------------------------------------------------------------------------------- /ui/src/components/QRibbon.sass: -------------------------------------------------------------------------------- 1 | @import './sass/common/glow.sass' 2 | @import './sass/common/main.sass' 3 | @import './sass/corner/main.sass' 4 | @import './sass/horizontal/main.sass' 5 | @import './sass/vertical/main.sass' 6 | -------------------------------------------------------------------------------- /ui/src/components/sass/common/glow.sass: -------------------------------------------------------------------------------- 1 | @function __qribbon-linear-gradient($position) 2 | @return linear-gradient($position, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 1%, rgba(255, 255, 255, 1) 100%) 3 | 4 | @keyframes flow-ltr 5 | 0% 6 | left: -5% 7 | opacity: 0 8 | 50% 9 | left: 50% 10 | opacity: 0.3 11 | 100% 12 | left: 100% 13 | opacity: 0 14 | 15 | @keyframes flow-rtl 16 | 0% 17 | right: -5% 18 | opacity: 0 19 | 50% 20 | right: 50% 21 | opacity: 0.3 22 | 100% 23 | right: 100% 24 | opacity: 0 25 | 26 | @keyframes flow-ttb 27 | 0% 28 | top: -5% 29 | opacity: 0 30 | 50% 31 | top: 50% 32 | opacity: 0.3 33 | 100% 34 | top: 100% 35 | opacity: 0 36 | 37 | @keyframes flow-btt 38 | 0% 39 | bottom: -5% 40 | opacity: 0 41 | 50% 42 | bottom: 50% 43 | opacity: 0.3 44 | 100% 45 | bottom: 100% 46 | opacity: 0 47 | 48 | @keyframes flow-corner-tl 49 | 0% 50 | left: 0% 51 | bottom: 0% 52 | opacity: 0 53 | 50% 54 | left: 50% 55 | bottom: 50% 56 | opacity: 0.3 57 | 100% 58 | left: 100% 59 | bottom: 100% 60 | opacity: 0 61 | 62 | @keyframes flow-corner-tr 63 | 0% 64 | right: 0% 65 | bottom: 0% 66 | opacity: 0 67 | 50% 68 | right: 50% 69 | bottom: 50% 70 | opacity: 0.3 71 | 100% 72 | right: 100% 73 | bottom: 100% 74 | opacity: 0 75 | 76 | @keyframes flow-corner-bl 77 | 0% 78 | left: 0% 79 | bottom: 0% 80 | opacity: 0 81 | 50% 82 | left: 50% 83 | bottom: 50% 84 | opacity: 0.3 85 | 100% 86 | left: 100% 87 | bottom: 100% 88 | opacity: 0 89 | 90 | @keyframes flow-corner-br 91 | 0% 92 | right: 0% 93 | bottom: 0% 94 | opacity: 0 95 | 50% 96 | right: 50% 97 | bottom: 50% 98 | opacity: 0.3 99 | 100% 100 | right: 100% 101 | bottom: 100% 102 | opacity: 0 103 | 104 | [class^=qribbon__], 105 | [class^=qribbon__] 106 | .glow 107 | background: rgb(255, 255, 255) 108 | width: 40px 109 | height: 100% 110 | top: 0 111 | position: absolute 112 | animation-name: flow-ltr 113 | animation-duration: var(--qribbon-glow-speed, 1.5s) 114 | animation-timing-function: linear 115 | animation-delay: 0s 116 | animation-direction: normal 117 | animation-iteration-count: var(--qribbon-glow-iteration-count, 1.5s) 118 | animation-fill-mode: forwards 119 | animation-play-state: running 120 | background: __qribbon-linear-gradient(to right) 121 | 122 | [class^=qribbon__horizontal--right] 123 | .glow 124 | animation-name: flow-rtl 125 | background: __qribbon-linear-gradient(to left) 126 | 127 | [class^=qribbon__vertical--top] 128 | .glow 129 | width: 100% 130 | height: 40px 131 | right: 0 132 | animation-name: flow-ttb 133 | transform: skew(0) 134 | background: __qribbon-linear-gradient(to bottom) 135 | 136 | [class^=qribbon__vertical--bottom] 137 | .glow 138 | width: 100% 139 | height: 40px 140 | right: 0 141 | bottom: 0 142 | top: unset 143 | animation-name: flow-btt 144 | transform: skew(0) 145 | background: __qribbon-linear-gradient(to top) 146 | 147 | [class^=qribbon__corner--top-left] 148 | div 149 | .glow 150 | height: 100% 151 | width: 40px 152 | animation-name: flow-corner-tl 153 | transform: skew(45deg) 154 | background: __qribbon-linear-gradient(90deg) 155 | 156 | [class^=qribbon__corner--top-right] 157 | div 158 | .glow 159 | height: 100% 160 | width: 40px 161 | left: auto 162 | animation-name: flow-corner-tr 163 | transform: skew(-45deg) 164 | background: __qribbon-linear-gradient(-90deg) 165 | 166 | [class^=qribbon__corner--bottom-left] 167 | div 168 | .glow 169 | height: 100% 170 | width: 40px 171 | animation-name: flow-corner-bl 172 | transform: skew(-45deg) 173 | background: __qribbon-linear-gradient(90deg) 174 | 175 | [class^=qribbon__corner--bottom-right] 176 | div 177 | .glow 178 | height: 100% 179 | width: 40px 180 | animation-name: flow-corner-br 181 | left: auto 182 | transform: skew(45deg) 183 | background: __qribbon-linear-gradient(-90deg) 184 | -------------------------------------------------------------------------------- /ui/src/components/sass/common/main.sass: -------------------------------------------------------------------------------- 1 | $qribbon-width : 10px 2 | $qribbon-negative-width : -($qribbon-width) 3 | $qribbon-height : 0px 4 | 5 | .qribbon__container 6 | display: flex 7 | &.inline 8 | display: inline-flex 9 | 10 | .qribbon__container.right 11 | justify-content: flex-end 12 | 13 | @mixin __qribbon__pseudo--before-after 14 | width: $qribbon-width 15 | height: $qribbon-height 16 | bottom: $qribbon-negative-width 17 | border-top: $qribbon-width solid var(--qribbon-leaf-color, black) 18 | display: block 19 | position: absolute 20 | content: "" 21 | 22 | .q-toolbar 23 | .qribbon__container 24 | margin-left: -12px 25 | // For full width toolbars 26 | flex-grow: 1 27 | margin-right: -12px 28 | -------------------------------------------------------------------------------- /ui/src/components/sass/corner/main.sass: -------------------------------------------------------------------------------- 1 | .qribbon__corner--top-left 2 | top: -10px 3 | left: -10px 4 | 5 | &::before, 6 | &::after 7 | border-top-color: transparent 8 | border-left-color: transparent 9 | 10 | &::before 11 | top: 0 12 | right: 8px 13 | z-index: 9999 14 | 15 | &::after 16 | bottom: 8px 17 | left: 0 18 | z-index: 9999 19 | 20 | div 21 | right: -35px 22 | top: 40px 23 | transform: rotate(-45deg) 24 | 25 | .qribbon__corner--bottom-left 26 | bottom: -10px 27 | left: -10px 28 | 29 | &::before, 30 | &::after 31 | border-bottom-color: transparent 32 | border-left-color: transparent 33 | 34 | &::before 35 | bottom: 0 36 | right: 8px 37 | z-index: 9999 38 | 39 | &::after 40 | top: 8px 41 | left: 0 42 | z-index: 9999 43 | 44 | div 45 | right: -35px 46 | bottom: 40px 47 | transform: rotate(45deg) 48 | 49 | .qribbon__corner--top-right 50 | top: -10px 51 | right: -10px 52 | 53 | &::before, 54 | &::after 55 | border-top-color: transparent 56 | border-right-color: transparent 57 | 58 | &::before 59 | top: 0 60 | left: 8px 61 | z-index: 9999 62 | 63 | &::after 64 | bottom: 8px 65 | right: 0 66 | z-index: 9999 67 | 68 | div 69 | left: -35px 70 | top: 40px 71 | transform: rotate(45deg) 72 | 73 | .qribbon__corner--bottom-right 74 | bottom: -10px 75 | right: -10px 76 | 77 | &::before, 78 | &::after 79 | border-bottom-color: transparent 80 | border-right-color: transparent 81 | 82 | &::before 83 | bottom: 0 84 | left: 8px 85 | z-index: 9999 86 | 87 | &::after 88 | top: 8px 89 | right: 0 90 | z-index: 9999 91 | 92 | div 93 | left: -35px 94 | bottom: 40px 95 | transform: rotate(-45deg) 96 | .qribbon__corner--top-left, 97 | .qribbon__corner--top-right, 98 | .qribbon__corner--bottom-left, 99 | .qribbon__corner--bottom-right 100 | width: 150px 101 | height: 150px 102 | overflow: hidden 103 | position: absolute 104 | background: transparent !important 105 | z-index: 1 106 | 107 | &::before, 108 | &::after 109 | position: absolute 110 | z-index: -1 111 | content: '' 112 | display: block 113 | border: 5px solid var(--qribbon-leaf-color, black) 114 | 115 | div 116 | position: absolute 117 | display: block 118 | width: 250px 119 | padding: 7px 0 120 | background-color: var(--qribbon-background-color, black) 121 | text-transform: uppercase 122 | text-align: center 123 | color: var(--qribbon-text-color, black) 124 | 125 | a 126 | color: var(--qribbon-text-color, black) 127 | -------------------------------------------------------------------------------- /ui/src/components/sass/horizontal/main.sass: -------------------------------------------------------------------------------- 1 | @import '../common/main.sass' 2 | 3 | .qribbon__horizontal--left.leaf-bottom 4 | &::before 5 | @include __qribbon__pseudo--before-after 6 | border-left: $qribbon-width solid transparent 7 | left: 0 8 | 9 | .qribbon__horizontal--left.leaf-top 10 | &::before 11 | @include __qribbon__pseudo--before-after 12 | border-top: $qribbon-width solid transparent 13 | border-right: $qribbon-width solid var(--qribbon-leaf-color, black) 14 | top: $qribbon-negative-width 15 | left: 0 16 | 17 | .qribbon__horizontal--right.leaf-bottom 18 | &::before 19 | @include __qribbon__pseudo--before-after 20 | border-right: $qribbon-width solid transparent 21 | right: 0 22 | 23 | .qribbon__horizontal--right.leaf-top 24 | &::before 25 | @include __qribbon__pseudo--before-after 26 | border-top: $qribbon-width solid transparent 27 | border-left: $qribbon-width solid var(--qribbon-leaf-color, black) 28 | top: $qribbon-negative-width 29 | right: 0 30 | 31 | .qribbon__horizontal--left-full.leaf-bottom, 32 | .qribbon__horizontal--right-full.leaf-bottom 33 | &::before 34 | @include __qribbon__pseudo--before-after 35 | border-left: $qribbon-width solid transparent 36 | left: 0 37 | 38 | &::after 39 | @include __qribbon__pseudo--before-after 40 | border-right: $qribbon-width solid transparent 41 | right: 0 42 | 43 | .qribbon__horizontal--left-full.leaf-top, 44 | .qribbon__horizontal--right-full.leaf-top 45 | &::before 46 | @include __qribbon__pseudo--before-after 47 | border-top: $qribbon-width solid transparent 48 | border-right: $qribbon-width solid var(--qribbon-leaf-color, black) 49 | top: $qribbon-negative-width 50 | left: 0 51 | 52 | &::after 53 | @include __qribbon__pseudo--before-after 54 | border-top: $qribbon-width solid transparent 55 | border-left: $qribbon-width solid var(--qribbon-leaf-color, black) 56 | top: $qribbon-negative-width 57 | right: 0 58 | 59 | %qribbon__horizontal--left, 60 | %qribbon__horizontal--right 61 | padding: 5px 12px 62 | background: var(--qribbon-background-color, black) 63 | color: var(--qribbon-text-color, white) 64 | z-index: 1 65 | position: relative 66 | 67 | .qribbon__horizontal--left 68 | @extend %qribbon__horizontal--left 69 | left: $qribbon-negative-width 70 | right: inherit 71 | 72 | .qribbon__horizontal--right 73 | @extend %qribbon__horizontal--right 74 | margin-right: $qribbon-negative-width 75 | 76 | .qribbon__horizontal--left-full, 77 | .qribbon__horizontal--right-full 78 | @extend %qribbon__horizontal--left, %qribbon__horizontal--right 79 | left: $qribbon-negative-width 80 | flex-grow: 1 81 | margin-right: $qribbon-negative-width*2 82 | 83 | [class*=horizontal--left].decorate-point-in, 84 | [class*=horizontal--right].decorate-point-in 85 | &::after 86 | content: "" 87 | display: block 88 | position: absolute 89 | right: -12px 90 | top: 0 91 | bottom: 0 92 | border-left: 12px solid transparent 93 | border-right: 12px solid transparent 94 | border-top: 15px solid var(--qribbon-background-color, black) 95 | border-bottom: 15px solid var(--qribbon-background-color, black) 96 | 97 | [class*=horizontal--right].decorate-point-in 98 | &::after 99 | right: inherit 100 | left: -12px 101 | border-left: 12px solid transparent 102 | border-right: 12px solid transparent 103 | border-top: 15px solid var(--qribbon-background-color, black) 104 | border-bottom: 15px solid var(--qribbon-background-color, black) 105 | 106 | [class*=horizontal--left].decorate-point-out, 107 | [class*=horizontal--right].decorate-point-out 108 | &::after 109 | content: "" 110 | display: block 111 | position: absolute 112 | bottom: 0 113 | top: 0 114 | right: -24px 115 | border-top: 15px solid transparent 116 | border-bottom: 15px solid transparent 117 | border-right: 12px solid transparent 118 | border-left: 12px solid var(--qribbon-background-color, black) 119 | 120 | [class*=horizontal--right].decorate-point-out 121 | &::after 122 | left: -24px 123 | right: inherit 124 | border-top: 15px solid transparent 125 | border-bottom: 15px solid transparent 126 | border-left: 12px solid transparent 127 | border-right: 12px solid var(--qribbon-background-color, black) 128 | 129 | [class*=horizontal--left].decorate-rounded-in 130 | padding-right: 24px 131 | background: radial-gradient(circle at right, transparent 15px, var(--qribbon-background-color, black) 16px) 132 | 133 | [class*=horizontal--right].decorate-rounded-in 134 | padding-left: 24px 135 | background: radial-gradient(circle at left, transparent 15px, var(--qribbon-background-color, black) 16px) 136 | 137 | [class*=horizontal--left].decorate-rounded-out 138 | border-top-right-radius: 15px 139 | border-bottom-right-radius: 15px 140 | 141 | [class*=horizontal--right].decorate-rounded-out 142 | border-top-left-radius: 15px 143 | border-bottom-left-radius: 15px 144 | -------------------------------------------------------------------------------- /ui/src/components/sass/vertical/main.sass: -------------------------------------------------------------------------------- 1 | @import '../common/main.sass' 2 | 3 | .qribbon__vertical--top-left.leaf-left, 4 | .qribbon__vertical--top-right.leaf-left 5 | &::before 6 | @include __qribbon__pseudo--before-after 7 | border-top: $qribbon-width solid transparent 8 | border-right: $qribbon-width solid var(--qribbon-leaf-color, black) 9 | left: $qribbon-negative-width 10 | top: 0 11 | 12 | .qribbon__vertical--top-left.leaf-right, 13 | .qribbon__vertical--top-right.leaf-right 14 | &::before 15 | @include __qribbon__pseudo--before-after 16 | border-top: $qribbon-width solid transparent 17 | border-left: $qribbon-width solid var(--qribbon-leaf-color, black) 18 | right: $qribbon-negative-width 19 | top: 0 20 | 21 | .qribbon__vertical--bottom-left.leaf-left, 22 | .qribbon__vertical--bottom-right.leaf-left 23 | &::before 24 | @include __qribbon__pseudo--before-after 25 | border-top: none 26 | border-bottom: $qribbon-width solid transparent 27 | border-right: $qribbon-width solid var(--qribbon-leaf-color, black) 28 | left: $qribbon-negative-width 29 | bottom: 0 30 | 31 | .qribbon__vertical--bottom-left.leaf-right, 32 | .qribbon__vertical--bottom-right.leaf-right 33 | &::before 34 | @include __qribbon__pseudo--before-after 35 | border-top: none 36 | border-bottom: $qribbon-width solid transparent 37 | border-left: $qribbon-width solid var(--qribbon-leaf-color, black) 38 | right: $qribbon-negative-width 39 | bottom: 0 40 | 41 | .qribbon__vertical--right-full.leaf-left, 42 | .qribbon__vertical--left-full.leaf-left 43 | &::before 44 | @include __qribbon__pseudo--before-after 45 | border-top: none 46 | border-bottom: $qribbon-width solid transparent 47 | border-right: $qribbon-width solid var(--qribbon-leaf-color, black) 48 | left: $qribbon-negative-width 49 | top: unset 50 | bottom: 0 51 | 52 | &::after 53 | @include __qribbon__pseudo--before-after 54 | border-bottom: none 55 | border-top: $qribbon-width solid transparent 56 | border-right: $qribbon-width solid var(--qribbon-leaf-color, black) 57 | left: $qribbon-negative-width 58 | bottom: unset 59 | top: 0 60 | 61 | .qribbon__vertical--right-full.leaf-right, 62 | .qribbon__vertical--left-full.leaf-right 63 | &::before 64 | @include __qribbon__pseudo--before-after 65 | border-top: none 66 | border-bottom: $qribbon-width solid transparent 67 | border-left: $qribbon-width solid var(--qribbon-leaf-color, black) 68 | right: $qribbon-negative-width 69 | bottom: 0 70 | 71 | &::after 72 | @include __qribbon__pseudo--before-after 73 | border-bottom: none 74 | border-top: $qribbon-width solid transparent 75 | border-left: $qribbon-width solid var(--qribbon-leaf-color, black) 76 | right: $qribbon-negative-width 77 | top: 0 78 | 79 | .qribbon__vertical--top-left, 80 | .qribbon__vertical--bottom-left 81 | left: 0 82 | right: inherit 83 | 84 | .qribbon__vertical--bottom-right, 85 | .qribbon__vertical--top-right 86 | right: $qribbon-width*2 87 | left: inherit 88 | 89 | .qribbon__vertical--bottom-left, 90 | .qribbon__vertical--bottom-right 91 | position: absolute 92 | padding: 12px 5px 93 | bottom: $qribbon-negative-width 94 | writing-mode: vertical-rl 95 | background: var(--qribbon-background-color, black) 96 | color: var(--qribbon-text-color, white) 97 | z-index: 100 98 | 99 | .qribbon__vertical--top-left, 100 | .qribbon__vertical--top-right 101 | position: absolute 102 | padding: 12px 5px 103 | top: $qribbon-negative-width 104 | writing-mode: vertical-rl 105 | background: var(--qribbon-background-color, black) 106 | color: var(--qribbon-text-color, white) 107 | z-index: 100 108 | 109 | .qribbon__vertical--left-full 110 | @extend .qribbon__vertical--bottom-left, .qribbon__vertical--top-left 111 | left: 0 112 | right: inherit 113 | 114 | .qribbon__vertical--right-full 115 | @extend .qribbon__vertical--bottom-right, .qribbon__vertical--top-right 116 | right: $qribbon-width*2 117 | left: inherit 118 | 119 | [class*=vertical--top].decorate-point-in, 120 | [class*=vertical--bottom].decorate-point-in 121 | &::after 122 | content: "" 123 | display: block 124 | position: absolute 125 | bottom: -12px 126 | left: 0 127 | right: 0 128 | border-top: 12px solid transparent 129 | border-bottom: 12px solid transparent 130 | border-right: 15px solid var(--qribbon-background-color, black) 131 | border-left: 15px solid var(--qribbon-background-color, black) 132 | 133 | [class*=vertical--bottom].decorate-point-in 134 | &::after 135 | bottom: inherit 136 | top: -12px 137 | border-top: 12px solid transparent 138 | border-bottom: 12px solid transparent 139 | border-right: 15px solid var(--qribbon-background-color, black) 140 | border-left: 15px solid var(--qribbon-background-color, black) 141 | 142 | [class*=vertical--top].decorate-point-out, 143 | [class*=vertical--bottom].decorate-point-out 144 | &::after 145 | content: "" 146 | display: block 147 | position: absolute 148 | top: -24px 149 | left: 0 150 | right: 0 151 | border-top: 12px solid transparent 152 | border-right: 15px solid transparent 153 | border-left: 15px solid transparent 154 | border-bottom: 12px solid var(--qribbon-background-color, black) 155 | 156 | [class*=vertical--top].decorate-point-out 157 | &::after 158 | bottom: -24px 159 | top: inherit 160 | border-bottom: 12px solid transparent 161 | border-right: 15px solid transparent 162 | border-left: 15px solid transparent 163 | border-top: 12px solid var(--qribbon-background-color, black) 164 | 165 | [class*=vertical--top].decorate-rounded-in 166 | padding-bottom: 24px 167 | background: radial-gradient(circle at bottom, transparent 15px, var(--qribbon-background-color, black) 16px) 168 | 169 | [class*=vertical--bottom].decorate-rounded-in 170 | padding-top: 24px 171 | background: radial-gradient(circle at top, transparent 15px, var(--qribbon-background-color, black) 16px) 172 | 173 | [class*=vertical--bottom].decorate-rounded-out 174 | border-top-left-radius: 15px 175 | border-top-right-radius: 15px 176 | 177 | [class*=vertical--top].decorate-rounded-out 178 | border-bottom-left-radius: 15px 179 | border-bottom-right-radius: 15px 180 | -------------------------------------------------------------------------------- /ui/src/index.js: -------------------------------------------------------------------------------- 1 | import { version } from '../package.json' 2 | import QRibbon from './components/QRibbon' 3 | 4 | export { 5 | version, 6 | QRibbon 7 | } 8 | 9 | export default { 10 | version, 11 | QRibbon, 12 | 13 | install (Vue) { 14 | Vue.component(QRibbon.name, QRibbon) 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /ui/src/index.sass: -------------------------------------------------------------------------------- 1 | @import 'quasar/src/css/variables.sass' 2 | @import './components/QRibbon.sass' 3 | @import 'q-colorize-mixin/src/index.sass' 4 | -------------------------------------------------------------------------------- /ui/src/mixins/colorize.js: -------------------------------------------------------------------------------- 1 | import { QColorizeMixin } from 'q-colorize-mixin' 2 | import { colors } from 'quasar' 3 | const { lighten } = colors 4 | 5 | export default { 6 | name: 'QRibbonColorize', 7 | 8 | data () { 9 | return { 10 | __leafColor: 'black' 11 | } 12 | }, 13 | 14 | mixins: [ QColorizeMixin ], 15 | 16 | props: { 17 | leafColor: { 18 | type: String 19 | } 20 | }, 21 | 22 | computed: { 23 | bgLeafColor () { 24 | // TODO: Perhaps nesting ternary statements "can" get too much ... :D 25 | return this.leafColor // if leaf is defined then 26 | ? this.isCssColor(this.leafColor) // check to see if it's a CSS color 27 | ? this.leafColor // and just return it if so 28 | : this.makeQuasarColorVar(this.leafColor) // otherwise convert it to a quasar color 29 | : this.isCssColor(this.backgroundColor) && !this.isNamedCssColor(this.backgroundColor) // if leftColor not defined is bgColor a hex color 30 | ? lighten(this.backgroundColor, -25) // then we can lighten it 31 | : this.isCssColor(this.backgroundColor) // otherwise check and see if bgColor is a CSS color 32 | ? this.backgroundColor // and just return it 33 | : this.makeQuasarColorVar(this.backgroundColor, this.color) // otherwise return a quasar color. 34 | } 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /ui/umd-test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | UMD test 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | quasar-ui-qribbon v{{ version }} 22 | 23 | 24 |
Quasar v{{ $q.version }}
25 | 26 | 27 | 28 | 29 | 30 |
    31 |
  • In /ui, run: "yarn build"
    • 32 |
  • You need to build & refresh page on each change manually.
    • 33 |
  • Use self-closing tags only!
    • 34 |
  • Example: <my-component></my-component>
    • 35 |
36 | 37 | 38 | 39 |
40 | 41 | 42 | 43 | 44 | 45 | 46 | 57 | 58 | 59 | --------------------------------------------------------------------------------