feat(QIcon/lang): backport from Qv2 - QIcon implementation and Quasar lang (quasarframework#11586)

* chore: fix linting errors

* chore: update some dependencies

* chore: test IE, RTL and dark auto in dev

* feat(lang): sync lang with improvements in Q2

* feat(QIcon): sync with Q2 implementation (and fix SVG detection)

* fix(Loading/LoadingBar,Notify): hide top app and prevent error related to vue-router in Vue Devtools beta

* Revert "chore: update some dependencies"

This reverts commit a6bacd9.

* Revert "feat(lang): sync lang with improvements in Q2"

This reverts commit c9d6f77.

* feat(lang): sync lang with improvements in Q2

Author: pdanpdan

ui/.eslintrc.js

@@ -19,30 +19,32 @@ module.exports = {
     'vue'
   ],
   globals: {
-    'cordova': true,
-    '__THEME__': true,
-    '__statics': true
+    cordova: true,
+    __THEME__: true,
+    __statics: true
   },
   // add your custom rules here
-  'rules': {
-    'brace-style': [2, 'stroustrup', { 'allowSingleLine': true }],
+  rules: {
+    'brace-style': [ 2, 'stroustrup', { allowSingleLine: true } ],
     'prefer-const': 2,
+    'no-undefined': 2,
+    'no-void': 0,
 
-    'vue/max-attributes-per-line': 'off',
-    'vue/valid-v-for': 'off',
-    'vue/require-default-prop': 'off',
-    'vue/require-prop-types': 'off',
-    'vue/require-v-for-key': 'off',
-    'vue/return-in-computed-property': 'off',
-    'vue/require-render-return': 'off',
-    'vue/singleline-html-element-content-newline': 'off',
-    'vue/no-side-effects-in-computed-properties': 'off',
-    'vue/array-bracket-spacing': 'off',
-    'vue/object-curly-spacing': 'off',
-    'vue/script-indent': 'off',
+    'vue/max-attributes-per-line': 0,
+    'vue/valid-v-for': 0,
+    'vue/require-default-prop': 0,
+    'vue/require-prop-types': 0,
+    'vue/require-v-for-key': 0,
+    'vue/return-in-computed-property': 0,
+    'vue/require-render-return': 0,
+    'vue/singleline-html-element-content-newline': 0,
+    'vue/no-side-effects-in-computed-properties': 0,
+    'vue/array-bracket-spacing': 0,
+    'vue/object-curly-spacing': 0,
+    'vue/script-indent': 0,
 
     // allow async-await
-    'generator-star-spacing': 'off',
+    'generator-star-spacing': 0,
 
     // allow paren-less arrow functions
     'arrow-parens': 0,

ui/build/build.api.js

@@ -217,7 +217,7 @@ function parseObject ({ banner, api, itemName, masterType, verifyCategory }) {
 
   const def = objectTypes[type]
 
-  for (let prop in obj) {
+  for (const prop in obj) {
     if ([ 'type', '__exemption' ].includes(prop)) {
       continue
     }
@@ -298,7 +298,7 @@ function parseObject ({ banner, api, itemName, masterType, verifyCategory }) {
   ;[ 'params', 'definition', 'scope', 'props' ].forEach(prop => {
     if (!obj[prop]) { return }
 
-    for (let item in obj[prop]) {
+    for (const item in obj[prop]) {
       parseObject({
         banner: `${banner}/"${prop}"/"${item}"`,
         api: api[itemName][prop],
@@ -375,7 +375,7 @@ function parseAPI (file, apiType) {
   }
 
   // "props", "slots", ...
-  for (let type in api) {
+  for (const type in api) {
     if (!topSections[apiType].includes(type)) {
       logError(`${banner} "${type}" is not recognized for a ${apiType}`)
       process.exit(1)
@@ -428,7 +428,7 @@ function parseAPI (file, apiType) {
 
     const isComponent = banner.indexOf('component') > -1
 
-    for (let itemName in api[type]) {
+    for (const itemName in api[type]) {
       parseObject({
         banner: `${banner} "${type}"/"${itemName}"`,
         api: api[type],

ui/build/build.types.js

@@ -68,7 +68,7 @@ function convertTypeVal (type, def, required) {
   if (fallbackComplexTypeMap.has(t)) {
     if (def.definition) {
       const propDefinitions = getPropDefinitions(def.definition, required, true)
-      let lines = []
+      const lines = []
       propDefinitions.forEach(p => lines.push(...p.split('\n')))
       return propDefinitions && propDefinitions.length > 0 ? `{\n        ${lines.join('\n        ')} }${t === 'Array' ? '[]' : ''}` : fallbackComplexTypeMap.get(t)
     }
@@ -143,7 +143,7 @@ function getMethodDefinition (key, methodDef, required) {
 }
 
 function getObjectParamDefinition (def, required) {
-  let res = []
+  const res = []
 
   Object.keys(def).forEach(propName => {
     const propDef = def[propName]
@@ -365,10 +365,10 @@ function writeIndexDTS (apis) {
   for (const key in injections) {
     const injectionDefs = injections[key]
     if (injectionDefs) {
-      const injectionName = `${ key.toUpperCase().replace('$', '') }VueGlobals`
-      writeLine(contents, `import { ${ injectionName }, QSingletonGlobals } from "./globals";`)
+      const injectionName = `${key.toUpperCase().replace('$', '')}VueGlobals`
+      writeLine(contents, `import { ${injectionName}, QSingletonGlobals } from "./globals";`)
       writeLine(contents, `declare module "./globals" {`)
-      writeLine(contents, `export interface ${ injectionName } {`)
+      writeLine(contents, `export interface ${injectionName} {`)
       for (const defKey in injectionDefs) {
         writeLines(contents, injectionDefs[defKey], 1)
       }

ui/build/build.web-types.js

@@ -37,7 +37,7 @@ module.exports.generate = function (data) {
         html: {
           'types-syntax': 'typescript',
           tags: data.components.map(({ api: { events, props, scopedSlots, slots, meta }, name }) => {
-            let slotTypes = []
+            const slotTypes = []
             if (slots) {
               Object.entries(slots).forEach(([name, slotApi]) => {
                 slotTypes.push({
@@ -71,7 +71,7 @@ module.exports.generate = function (data) {
                 symbol: name
               },
               attributes: props && Object.entries(props).map(([name, propApi]) => {
-                let result = {
+                const result = {
                   name,
                   value: {
                     kind: 'expression',
@@ -122,8 +122,8 @@ module.exports.generate = function (data) {
             return result
           }),
           attributes: data.directives.map(({ name, api: { modifiers, value, meta } }) => {
-            let valueType = value.type
-            let result = {
+            const valueType = value.type
+            const result = {
               name: 'v-' + kebabCase(name),
               source: {
                 module: 'quasar',
@@ -151,7 +151,7 @@ module.exports.generate = function (data) {
         }
       }
     }, null, 2)
-    let webTypesPath = path.resolve(__dirname, '../dist/web-types')
+    const webTypesPath = path.resolve(__dirname, '../dist/web-types')
 
     if (!fs.existsSync(webTypesPath)) {
       fs.mkdirSync(webTypesPath)

ui/dev/package.json

@@ -17,7 +17,8 @@
     "last 3 ChromeAndroid versions",
     "last 3 FirefoxAndroid versions",
     "last 2 iOS versions",
-    "last 2 Opera versions"
+    "last 2 Opera versions",
+    "ie 11"
   ],
   "engines": {
     "node": ">= 10.18.1",

ui/dev/quasar.conf.js

@@ -26,11 +26,14 @@ module.exports = function (ctx) {
     framework: {
       // iconSet: 'svg-mdi-v4',
       // config: { ripple: { early: true } },
+      config: {
+        dark: 'auto'
+      },
       importStrategy: 'all'
     },
 
     build: {
-      rtl: false,
+      rtl: true,
       vueRouterMode: 'history',
       // showProgress: false,
 

ui/dev/src/App.vue

@@ -10,7 +10,7 @@
     >
       <q-btn dense flat size="sm" icon="visibility" @click="showSelector = !showSelector" class="absolute-top-right z-top" />
       <template v-if="showSelector">
-        <q-toggle :value="$q.dark.isActive" @input="$q.dark.toggle" :label="`Dark Mode (${$q.dark.mode})`" />
+        <q-toggle :value="$q.dark.mode" @input="val => $q.dark.set(val)" toggle-indeterminate indeterminate-value="auto" :label="`Dark Mode (${$q.dark.mode})`" />
 
         <q-btn dense flat size="sm" :icon="lang === 'he' ? 'navigate_before' : 'navigate_next'" @click="lang = lang === 'en-us' ? 'he' : 'en-us'" class="absolute-bottom-right z-top" />
         <q-select