Merge pull request #181 from quasarframework/feat/vitev2-webpackv4

Author: hawkeye64

README.md

@@ -1,7 +1,6 @@
 > If you are looking for QIconPicker that works with Quasar v1/Vue v2, then look into the [qv1 branch](https://github.com/quasarframework/quasar-ui-qiconpicker/tree/qv1). Documentation can be found [here](https://quasarframework.github.io/quasar-ui-qiconpicker).
 
-QIconPicker (Vue v3 Plugin, UMD and Quasar v2 App Extension)
-===
+# QIconPicker (Vue v3 Plugin, UMD and Quasar v2 App Extension)
 
 ![](https://img.shields.io/npm/v/@quasar/quasar-ui-qiconpicker/next?label=@quasar/quasar-ui-qiconpicker)
 ![](https://img.shields.io/npm/v/@quasar/quasar-app-extension-qiconpicker/next?label=@quasar/quasar-app-extension-qiconpicker)
@@ -11,12 +10,14 @@ QIconPicker (Vue v3 Plugin, UMD and Quasar v2 App Extension)
 ![QIconPicker](https://raw.githubusercontent.com/quasarframework/quasar-ui-qiconpicker/dev/demo/public/q-icon-picker.png)
 
 # Structure
-* [/ui](ui) - standalone npm package (go here for more details)
-* [/app-extension](app-extension) - Quasar app extension
-* [/demo](https://github.com/quasarframework/quasar-ui-qiconpicker/tree/master/demo) - demo and examples
-* [Live Demo](https://qiconpicker.netlify.app/)
+
+- [/ui](ui) - standalone npm package (go here for more details)
+- [/app-extension](app-extension) - Quasar app extension
+- [/docs](https://github.com/quasarframework/quasar-ui-qiconpicker/tree/main/docs) - demo and examples
+- [Live Demo](https://qiconpicker.netlify.app/)
 
 # Demo Workflow
+
 If you fork or download this project, make sure you have the Quasar CLI globally installed:
 
 ```
@@ -26,6 +27,7 @@ yarn global add @quasar/cli
 ```
 
 The workflow to build the demo, on a fresh project, is as follows:
+
 ```
 $ cd ui
 $ yarn
@@ -36,7 +38,9 @@ $ quasar dev
 ```
 
 # Donate
+
 If you appreciate the work that went into this, please consider donating to [Quasar](https://donate.quasar.dev) or [Jeff](https://github.com/sponsors/hawkeye64).
 
 # License
+
 MIT (c) Jeff Galbraith <[email protected]>

app-extension/src/index.js

@@ -6,7 +6,7 @@
  * API: https://github.com/quasarframework/quasar/blob/master/app/lib/app-extension/IndexAPI.js
  */
 
-function extendConf (conf, api) {
+function extendConf(conf, api) {
   // register our boot file
   conf.boot.push('~@quasar/quasar-app-extension-qiconpicker/src/boot/register.js')
 
@@ -27,11 +27,10 @@ module.exports = function (api) {
   api.compatibleWith('quasar', '^2.0.0')
 
   if (api.hasVite === true) {
-    api.compatibleWith('@quasar/app-vite', '^1.0.0-alpha.0')
-  }
-  else {
+    api.compatibleWith('@quasar/app-vite', '^1.0.0 || ^2.0.0 || ^2.0.0-alpha.1')
+  } else {
     // should be "@quasar/app-webpack" but that is not backward compatible
-    api.compatibleWith('@quasar/app', '^3.0.0')
+    api.compatibleWith('@quasar/app', '^3.0.0 || ^4.0.0 || ^4.0.0-alpha.1')
   }
 
   api.compatibleWith('@quasar/extras', '^1.10.0') // needed for latest font and svg support

docs/package.json

@@ -23,43 +23,43 @@
     "dev:electron": "quasar dev -m electron"
   },
   "dependencies": {
-    "@quasar/extras": "^1.13.4",
+    "@quasar/extras": "^1.16.4",
     "@quasar/quasar-ui-qiconpicker": "./ui",
-    "core-js": "^3.21.1",
-    "quasar": "^2.6.2",
+    "core-js": "^3.30.2",
+    "quasar": "^2.12.0",
     "quasar-ui-example-viewer": "^2.0.0-alpha.9",
     "quasar-ui-json-api-viewer": "^2.0.0-alpha.6",
-    "vue": "^3.2.31",
-    "vue-router": "^4.0.14"
+    "vue": "^3.3.4",
+    "vue-router": "^4.2.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.17.8",
-    "@babel/eslint-parser": "^7.17.0",
+    "@babel/core": "^7.22.1",
+    "@babel/eslint-parser": "^7.21.8",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/preset-env": "^7.16.11",
+    "@babel/preset-env": "^7.22.4",
     "@quasar/app": "^3.3.3",
-    "babel-loader": "8.2.4",
-    "eslint": "^8.12.0",
-    "eslint-config-standard": "^16.0.3",
-    "eslint-plugin-import": "^2.25.4",
+    "babel-loader": "9.1.2",
+    "eslint": "^8.41.0",
+    "eslint-config-standard": "^17.1.0",
+    "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^6.0.0",
-    "eslint-plugin-vue": "^8.5.0",
-    "eslint-webpack-plugin": "^3.1.1",
+    "eslint-plugin-promise": "^6.1.1",
+    "eslint-plugin-vue": "^9.14.1",
+    "eslint-webpack-plugin": "^4.0.1",
     "gray-matter": "^4.0.3",
-    "markdown-it": "^12.3.2",
+    "markdown-it": "^13.0.1",
     "markdown-it-abbr": "^1.0.4",
     "markdown-it-container": "^3.0.0",
     "markdown-it-deflist": "^2.1.0",
-    "markdown-it-emoji": "^2.0.0",
+    "markdown-it-emoji": "^2.0.2",
     "markdown-it-footnote": "^3.0.3",
     "markdown-it-imsize": "^2.0.1",
     "markdown-it-ins": "^3.0.1",
     "markdown-it-mark": "^3.0.1",
     "markdown-it-sub": "^1.0.0",
     "markdown-it-sup": "^1.0.0",
     "markdown-it-task-lists": "^2.1.1",
-    "prismjs": "^1.27.0",
+    "prismjs": "^1.29.0",
     "raw-loader": "^4.0.2",
     "toml": "^3.0.0",
     "ware-loader": "^0.2.4"

docs/src/examples/UsingQInput.vue

@@ -17,7 +17,7 @@
                 v-model:model-pagination="data.pagination"
                 icon-set="material-icons"
                 tooltips
-                style="height: 300px; width: 300px; background-color: white;"
+                class="pop-up"
               />
             </q-popup-proxy>
           </q-icon>
@@ -33,9 +33,11 @@ import { QIconPicker } from '@quasar/quasar-ui-qiconpicker/src/index'
 import '@quasar/quasar-ui-qiconpicker/src/index.sass'
 
 export default defineComponent({
+
   components: {
     QIconPicker
   },
+
   setup() {
     const data = ref({
       value: '',
@@ -46,15 +48,20 @@ export default defineComponent({
       }
     })
 
-    watch(()=> data.value.value, () =>  {
+    watch(() => data.value.value, () => {
       data.value.showIconPicker = false
     })
 
     return {
       data
     }
-
-
   }
 })
 </script>
+
+<style scoped>
+.pop-up {
+  height: 300px;
+  width: 300px;
+}
+</style>

docs/src/examples/UsingQInputWithFilter.vue

@@ -30,7 +30,7 @@
                 :filter="data.filter"
                 icon-set="material-icons"
                 tooltips
-                style="height: 300px; width: 300px; background-color: white;"
+                style="height: 300px; width: 300px;"
               />
             </q-popup-proxy>
           </q-icon>
@@ -46,9 +46,11 @@ import { QIconPicker } from '@quasar/quasar-ui-qiconpicker/src/index'
 import '@quasar/quasar-ui-qiconpicker/src/index.sass'
 
 export default defineComponent({
+
   components: {
     QIconPicker
   },
+
   setup() {
     const data = ref({
       value: '',
@@ -67,8 +69,6 @@ export default defineComponent({
     return {
       data
     }
-
-
   }
 })
 </script>

ui/build/icons/build.material-icons-base.js

@@ -1,6 +1,6 @@
 const path = require('path')
-const { green, blue, red } = require('kolorist')
-const { readFile, writeFile } = require('../utils')
+const {green, blue, red} = require('kolorist')
+const {readFile, writeFile} = require('../utils')
 
 const themeMap = {
   baseline: '',
@@ -9,14 +9,26 @@ const themeMap = {
   sharp: 's_'
 }
 
-function run (googleIcons, theme) {
+function run(googleIcons, theme) {
   const name = 'material-icons' + (theme === 'baseline' ? '' : '-' + theme)
   // console.log(`${blue('[building]')}  ${name}...`)
   const inputLocation = `../../src/components/icon-set/${name}.js`
   const outputLocation = `../../src/components/icon-set/${name}.js`
   const oldIcons = {}
   const icons = []
   const blacklisted = [
+    'grade',
+    'grading',
+    'dynamic_feed',
+    'o_dynamic_feed',
+    'r_dynamic_feed',
+    's_dynamic_feed',
+    's_grade',
+    's_grading',
+    'r_grade',
+    'r_grading',
+    'o_grade',
+    'o_grading'
   ]
   const whiteListed = {
     baseline: [
@@ -74,15 +86,15 @@ function run (googleIcons, theme) {
   fa.forEach(f => {
     const name = f.name
     const tags = f.tags
-    oldIcons[name] = { tags: Array(tags).join(',') }
+    oldIcons[name] = {tags: Array(tags).join(',')}
   })
 
   googleIcons.forEach(gi => {
     gi.name = themeMap[theme] + gi.name
   })
 
   whiteListed[theme].forEach(name => {
-    googleIcons.push({ name: themeMap[theme] + name })
+    googleIcons.push({name: themeMap[theme] + name})
   })
 
   googleIcons.sort((a, b) => {
@@ -94,14 +106,22 @@ function run (googleIcons, theme) {
       const name = gi.name
       if (blacklisted.includes(name) === false) {
         if (oldIcons[name]) {
-          const tags = oldIcons[name].tags.split(',').map(tag => {
-            if (tag === '') return tag
-            return "'" + tag + "'"
-          }).join(', ')
-          icons.push(`{ name: '${name}', tags: [${tags}] }`)
-        }
-        else {
-          icons.push(`{ name: '${name}', tags: [] }`)
+
+          const oldTags = oldIcons[name].tags
+            .split(',')
+
+          // Merge old and new tags
+          const tagsWithoutDuplicates = [...new Set(oldTags.concat(gi.tags))];
+          const newTags = tagsWithoutDuplicates
+            .filter(tag => tag !== "")
+            .map(tag => "'" + tag + "'")
+            .join(', ')
+
+          // Add merged tags old/new
+          icons.push(`{ name: '${name}', tags: [${newTags}] }`)
+        } else {
+          // Add new tags
+          icons.push(`{ name: '${name}', tags: [${gi.tags}] }`)
         }
       }
     })
@@ -127,6 +147,7 @@ function run (googleIcons, theme) {
   output += '}\n'
 
   writeFile(path.resolve(__dirname, outputLocation), output)
+    .catch(exception => console.error(exception))
   console.log(`${blue('[icon]')} ${green(name + ':')} ${icons.length} generated`)
 }
 

ui/package.json

@@ -35,6 +35,7 @@
     "icons:themify": "node build/icons/build.themify.js",
     "icons:bootstrap-icons": "node build/icons/build.bootstrap-icons.js",
     "icons:fontawesome": "node build/icons/build.fontawesome.js",
+    "icons:material": "node build/icons/build.google.material-icons.js",
     "icons:all": "node build/icons/build.all.js"
   },
   "funding": {
@@ -62,41 +63,41 @@
     "attributes": "dist/vetur/attributes.json"
   },
   "devDependencies": {
-    "@babel/core": "^7.17.8",
-    "@babel/eslint-parser": "^7.17.0",
+    "@babel/core": "^7.22.1",
+    "@babel/eslint-parser": "^7.21.8",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/preset-env": "^7.16.11",
-    "@quasar/extras": "^1.13.4",
-    "@rollup/plugin-buble": "^0.21.3",
-    "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "^13.1.3",
-    "@rollup/plugin-replace": "^4.0.0",
-    "@types/node": "^17.0.23",
-    "@typescript-eslint/eslint-plugin": "^5.17.0",
-    "@typescript-eslint/parser": "^5.17.0",
-    "autoprefixer": "^10.4.4",
-    "cross-fetch": "^3.1.5",
-    "cssnano": "^5.1.5",
-    "eslint": "^8.12.0",
-    "eslint-config-standard": "^16.0.3",
-    "eslint-plugin-import": "^2.25.4",
-    "eslint-plugin-jsdoc": "^38.1.3",
+    "@babel/preset-env": "^7.22.4",
+    "@quasar/extras": "^1.16.4",
+    "@rollup/plugin-buble": "^1.0.2",
+    "@rollup/plugin-json": "^6.0.0",
+    "@rollup/plugin-node-resolve": "^15.0.2",
+    "@rollup/plugin-replace": "^5.0.2",
+    "@types/node": "^20.2.5",
+    "@typescript-eslint/eslint-plugin": "^5.59.8",
+    "@typescript-eslint/parser": "^5.59.8",
+    "autoprefixer": "^10.4.14",
+    "cross-fetch": "^3.1.6",
+    "cssnano": "^6.0.1",
+    "eslint": "^8.41.0",
+    "eslint-config-standard": "^17.1.0",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-jsdoc": "^45.0.0",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^6.0.0",
+    "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-quasar": "^1.1.0",
-    "eslint-plugin-vue": "^8.5.0",
-    "eslint-webpack-plugin": "^3.1.1",
-    "fs-extra": "^10.0.1",
-    "kolorist": "^1.5.1",
-    "open": "^8.4.0",
-    "postcss": "^8.4.12",
-    "quasar": "^2.6.2",
+    "eslint-plugin-vue": "^9.14.1",
+    "eslint-webpack-plugin": "^4.0.1",
+    "fs-extra": "^11.1.1",
+    "kolorist": "^1.8.0",
+    "open": "^9.1.0",
+    "postcss": "^8.4.24",
+    "quasar": "^2.12.0",
     "quasar-json-api": "^2.0.0-alpha.3",
-    "rimraf": "^3.0.2",
-    "rollup": "^2.70.1",
-    "rtlcss": "^3.5.0",
-    "sass": "^1.49.9",
-    "uglify-js": "^3.15.3",
+    "rimraf": "^5.0.1",
+    "rollup": "^3.23.0",
+    "rtlcss": "^4.1.0",
+    "sass": "^1.62.1",
+    "uglify-js": "^3.17.4",
     "zlib": "^1.0.5"
   },
   "browserslist": [