From 1237ebc2424c2c44a32111e54038cd2ffa3d9fe8 Mon Sep 17 00:00:00 2001 From: Jeff Galbraith Date: Fri, 20 Mar 2020 06:42:13 -0600 Subject: [PATCH] chore: Lots of updates --- LICENSE | 2 +- app-extension/LICENSE | 21 +++ app-extension/README.md | 9 +- app-extension/package.json | 2 +- app-extension/src/index.js | 5 +- ui/.eslintignore | 3 +- ui/.eslintrc.js | 1 + ui/LICENSE | 21 +++ ui/README.md | 18 +-- ui/build/index.js | 3 + ui/build/script.app-ext.js | 60 ++++++++ ui/build/script.javascript.js | 10 +- ui/dev/package.json | 4 +- ui/package.json | 50 ++++--- ui/src/components/QRibbon.js | 2 +- ui/src/components/QRibbon.json | 265 ++++++++++++++++++--------------- 16 files changed, 314 insertions(+), 162 deletions(-) create mode 100644 app-extension/LICENSE create mode 100644 ui/LICENSE create mode 100644 ui/build/script.app-ext.js diff --git a/LICENSE b/LICENSE index cae1302..ff70d3e 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ The MIT License (MIT) -Copyright (c) Jeff Galbraith +Copyright (c) Allan Gaunt Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/app-extension/LICENSE b/app-extension/LICENSE new file mode 100644 index 0000000..ff70d3e --- /dev/null +++ b/app-extension/LICENSE @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) Allan Gaunt + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in +all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +THE SOFTWARE. diff --git a/app-extension/README.md b/app-extension/README.md index 8b9f4ba..79f6201 100644 --- a/app-extension/README.md +++ b/app-extension/README.md @@ -1,9 +1,7 @@ # Quasar App Extension qribbon -> Add a short description of your App Extension. What does it do? How is it beneficial? Why would someone want to use it? - -[![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) -[![npm](https://img.shields.io/npm/dt/quasar-app-extension-qribbon.svg)](https://www.npmjs.com/package/quasar-app-extension-qribbon) +[![npm](https://img.shields.io/npm/v/@quasar/quasar-app-extension-qribbon.svg?label=@quasar/quasar-app-extension-qribbon)](https://www.npmjs.com/package/@quasar/quasar-app-extension-qribbon) +[![npm](https://img.shields.io/npm/dt/@quasar/quasar-app-extension-qribbon.svg)](https://www.npmjs.com/package/@quasar/quasar-app-extension-qribbon) # Examples and Documentation for QRibbon UI Component Can be found [here](https://quasarframework.github.io/quasar-ui-qribbon) @@ -14,9 +12,6 @@ quasar ext add @quasar/qribbon ``` Quasar CLI will retrieve it from NPM and install the extension. -## Prompts - -> If your app extension uses prompts, explain them here, otherwise remove this section. # Uninstall ```bash diff --git a/app-extension/package.json b/app-extension/package.json index 8cde4c9..a1db665 100644 --- a/app-extension/package.json +++ b/app-extension/package.json @@ -28,7 +28,7 @@ "corner" ], "dependencies": { - "@quasar/quasar-ui-qribbon": "1.0.0-beta.11" + "@quasar/quasar-ui-qribbon": "^1.0.0-beta.11" }, "engines": { "node": ">= 8.9.0", diff --git a/app-extension/src/index.js b/app-extension/src/index.js index 3bd0aac..0026078 100644 --- a/app-extension/src/index.js +++ b/app-extension/src/index.js @@ -12,6 +12,7 @@ function extendConf (conf) { // make sure app extension files & ui package gets transpiled conf.build.transpileDependencies.push(/quasar-app-extension-qribbon[\\/]src/) + conf.build.transpileDependencies.push(/quasar-ui-qribbon[\\/]src/) // make sure the stylesheet goes through webpack to avoid SSR issues conf.css.push('~@quasar/quasar-ui-qribbon/src/index.sass') @@ -21,8 +22,8 @@ module.exports = function (api) { // Quasar compatibility check; you may need // hard dependencies, as in a minimum version of the "quasar" // package or a minimum version of "@quasar/app" CLI - api.compatibleWith('quasar', '^1.1.1') - api.compatibleWith('@quasar/app', '^1.1.0') + api.compatibleWith('quasar', '^1.5.0') + api.compatibleWith('@quasar/app', '^1.3.0') // Uncomment the line below if you provide a JSON API for your component api.registerDescribeApi('QRibbon', '~@quasar/quasar-ui-qribbon/dist/api/QRibbon.json') diff --git a/ui/.eslintignore b/ui/.eslintignore index d8f8d46..c9ff878 100644 --- a/ui/.eslintignore +++ b/ui/.eslintignore @@ -1 +1,2 @@ -docs +/docs +/dist diff --git a/ui/.eslintrc.js b/ui/.eslintrc.js index a789acd..19646b2 100644 --- a/ui/.eslintrc.js +++ b/ui/.eslintrc.js @@ -47,6 +47,7 @@ module.exports = { 'import/no-extraneous-dependencies': 'off', 'prefer-promise-reject-errors': 'off', + 'no-void': 'off', // allow console.log during development only 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', // allow debugger during development only diff --git a/ui/LICENSE b/ui/LICENSE new file mode 100644 index 0000000..ff70d3e --- /dev/null +++ b/ui/LICENSE @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) Allan Gaunt + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in +all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +THE SOFTWARE. diff --git a/ui/README.md b/ui/README.md index c2bbc28..16160e7 100644 --- a/ui/README.md +++ b/ui/README.md @@ -1,7 +1,7 @@ # Component QRibbon -[![npm](https://img.shields.io/npm/v/quasar-ui-qribbon.svg?label=quasar-ui-qribbon)](https://www.npmjs.com/package/quasar-ui-qribbon) -[![npm](https://img.shields.io/npm/dt/quasar-ui-qribbon.svg)](https://www.npmjs.com/package/quasar-ui-qribbon) +[![npm](https://img.shields.io/npm/v/@quasar/quasar-ui-qribbon.svg?label=@quasar/quasar-ui-qribbon)](https://www.npmjs.com/package/@quasar/quasar-ui-qribbon) +[![npm](https://img.shields.io/npm/dt/@quasar/quasar-ui-qribbon.svg)](https://www.npmjs.com/package/@quasar/quasar-ui-qribbon) # QRibbon Add Ribbons to your Quasar Apps @@ -28,10 +28,10 @@ Vue.use(Plugin) **OR**: ```html - + + ``` If you need the RTL variant of the CSS, then go for the following (instead of the above stylesheet link): ```html - + ``` # Setup diff --git a/ui/build/index.js b/ui/build/index.js index 4eff9b4..c1aa8ad 100644 --- a/ui/build/index.js +++ b/ui/build/index.js @@ -8,11 +8,14 @@ const { green, blue } = require('chalk') console.log() +require('./script.app-ext.js').syncAppExt() require('./script.clean.js') console.log(` 📦 Building ${green('v' + require('../package.json').version)}...${parallel ? blue(' [multi-threaded]') : ''}\n`) createFolder('dist') +createFolder('dist/api') +createFolder('dist/vetur') runJob(join(__dirname, './script.javascript')) runJob(join(__dirname, './script.css')) diff --git a/ui/build/script.app-ext.js b/ui/build/script.app-ext.js new file mode 100644 index 0000000..29e1be0 --- /dev/null +++ b/ui/build/script.app-ext.js @@ -0,0 +1,60 @@ +const + fs = require('fs'), + path = require('path'), + root = path.resolve(__dirname, '../..'), + resolvePath = file => path.resolve(root, file), + { blue } = require('chalk') + +const writeJson = function (file, json) { + return fs.writeFileSync(file, JSON.stringify(json, null, 2) + '\n', 'utf-8') +} + +module.exports.syncAppExt = function (both = true) { + // make sure this project has an app-extension project + const appExtDir = resolvePath('app-extension') + if (!fs.existsSync(appExtDir)) { + return + } + + // make sure this project has an ui project + const uiDir = resolvePath('ui') + if (!fs.existsSync(uiDir)) { + return + } + + // get version and name from ui package.json + const { name, version } = require(resolvePath(resolvePath('ui/package.json'))) + + // read app-ext package.json + const appExtFile = resolvePath('app-extension/package.json') + let appExtJson = require(appExtFile), + finished = false + + // sync version numbers + if (both === true) { + appExtJson.version = version + } + + // check dependencies + if (appExtJson.dependencies !== void 0) { + if (appExtJson.dependencies[name] !== void 0) { + appExtJson.dependencies[name] = '^' + version + finished = true + } + } + // check devDependencies, if not finished + if (finished === false && appExtJson.devDependencies !== void 0) { + if (appExtJson.devDependencies[name] !== void 0) { + appExtJson.devDependencies[name] = '^' + version + finished = true + } + } + + if (finished === true) { + writeJson(appExtFile, appExtJson) + console.log(` ⭐️ App Extension version ${blue(appExtJson.name)} synced with UI version.\n`) + return + } + + console.error(` App Extension version and dependency NOT synced.\n`) +} diff --git a/ui/build/script.javascript.js b/ui/build/script.javascript.js index e8bf1c4..04c7ade 100644 --- a/ui/build/script.javascript.js +++ b/ui/build/script.javascript.js @@ -3,7 +3,8 @@ const rollup = require('rollup') const uglify = require('uglify-es') const buble = require('@rollup/plugin-buble') const json = require('@rollup/plugin-json') -const nodeResolve = require('rollup-plugin-node-resolve') +const cjs = require('@rollup/plugin-commonjs') +const nodeResolve = require('@rollup/plugin-node-resolve') const buildConf = require('./config') const buildUtils = require('./utils') @@ -12,12 +13,19 @@ const bubleConfig = { objectAssign: 'Object.assign' } +const cjsConfig = { + include: [ + /node_modules/ + ] +} + const rollupPlugins = [ nodeResolve({ extensions: ['.js'], preferBuiltins: false }), json(), + cjs(cjsConfig), buble(bubleConfig) ] diff --git a/ui/dev/package.json b/ui/dev/package.json index eca7d7b..551f06c 100644 --- a/ui/dev/package.json +++ b/ui/dev/package.json @@ -13,10 +13,10 @@ "dev:electron": "quasar dev -m electron" }, "dependencies": { - "@quasar/extras": "^1.3.3" + "@quasar/extras": "^1.6.0" }, "devDependencies": { - "@quasar/app": "^1.2.3" + "@quasar/app": "^1.6.0" }, "engines": { "node": ">= 8.9.0", diff --git a/ui/package.json b/ui/package.json index 3fc67c6..975150a 100644 --- a/ui/package.json +++ b/ui/package.json @@ -20,6 +20,10 @@ "build:css": "node build/script.css.js", "build:api": "node build/build.api.js" }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/webnoob" + }, "publishConfig": { "access": "public" }, @@ -38,29 +42,39 @@ "qribbon", "corner" ], + "vetur": { + "tags": "dist/vetur/tags.json", + "attributes": "dist/vetur/attributes.json" + }, "dependencies": { - "q-colorize-mixin": "^1.0.0" + "q-colorize-mixin": "^1.0.6" }, "devDependencies": { - "@vue/eslint-config-standard": "^4.0.0", - "autoprefixer": "^9.7.1", - "babel-eslint": "^10.0.3", + "@rollup/plugin-buble": "^0.21.1", + "@rollup/plugin-commonjs": "^11.0.2", + "@rollup/plugin-json": "^4.0.2", + "@rollup/plugin-node-resolve": "^7.1.1", + "@vue/eslint-config-standard": "^5.1.2", + "autoprefixer": "^9.7.4", + "babel-eslint": "^10.1.0", "chalk": "^3.0.0", "cssnano": "^4.1.10", - "eslint": "^6.6.0", - "eslint-loader": "^3.0.2", - "eslint-plugin-vue": "^6.0.0", - "node-sass": "^4.13.0", - "open": "^7.0.0", - "postcss": "^7.0.21", - "postcss-rtl": "^1.5.0", - "quasar": "^1.4.1", - "quasar-json-api": "^0.0.8", - "rimraf": "^3.0.0", - "rollup": "^1.26.5", - "@rollup/plugin-buble": "^0.20.0", - "@rollup/plugin-json": "^4.0.0", - "rollup-plugin-node-resolve": "^5.2.0", + "eslint": "^6.8.0", + "eslint-loader": "^3.0.3", + "eslint-plugin-import": "^2.20.1", + "eslint-plugin-node": "^11.0.0", + "eslint-plugin-promise": "^4.2.1", + "eslint-plugin-quasar": "^1.0.0-alpha.18", + "eslint-plugin-standard": "^4.0.1", + "eslint-plugin-vue": "^6.2.2", + "node-sass": "^4.13.1", + "open": "^7.0.3", + "postcss": "^7.0.27", + "postcss-rtl": "^1.7.3", + "quasar": "^1.9.10", + "quasar-json-api": "^0.0.21", + "rimraf": "^3.0.2", + "rollup": "^2.1.0", "uglify-es": "^3.3.9", "zlib": "^1.0.5" }, diff --git a/ui/src/components/QRibbon.js b/ui/src/components/QRibbon.js index 6b68b1d..17c3899 100644 --- a/ui/src/components/QRibbon.js +++ b/ui/src/components/QRibbon.js @@ -1,5 +1,5 @@ // Utils -import slot from 'quasar/src/utils/slot.js' +import { slot } from 'quasar/src/utils/slot.js' // Mixins import QRibbonColorize from '../mixins/colorize' diff --git a/ui/src/components/QRibbon.json b/ui/src/components/QRibbon.json index 7a97db4..72b8e12 100644 --- a/ui/src/components/QRibbon.json +++ b/ui/src/components/QRibbon.json @@ -1,123 +1,150 @@ { - "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\"" - ] - } + "meta":{ + "docsUrl":"https://quasarframework.github.io/quasar-ui-qribbon/docs" }, - "slots": { - "default": { - "desc": "Any content can be entered into the default slot and it will show in the ribbon" - } + "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", + "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":[ + "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" + } } }