feat(ui): further modernize codebase

Author: rstoenescu

.vscode/settings.json

@@ -25,6 +25,7 @@
     "**/dist": true,
     "**/.quasar": true,
     "**/quasar.config.js.temporary.*": true,
+    "ui/playground/src/mock-data": true,
     "utils/render-ssr-error/compiled-assets": true
   }
 }

ui/build/build.api.js

@@ -630,14 +630,12 @@ const arrayRE = /(\[.*\])/
 const objectRE = /(\{.*\})/
 const functionRE = /^(\s*\(\s*\)\s*=>\s*).+/
 function encodeDefaultValue(val, isFunction) {
-  if (typeof val === 'string') {
-    return `'${val}'`
-  }
+  if (typeof val === 'string') return `'${val}'`
 
   if (typeof val === 'function') {
     const fn = val.toString()
 
-    if (isFunction === true) return fn
+    if (isFunction) return fn
 
     const arrayMatch = fn.match(arrayRE)
     if (arrayMatch !== null) {
@@ -1373,14 +1371,14 @@ function fillAPI(apiType, list, encodeFn) {
 
           const isRuntimeFunction =
             runtimeTypes.length === 1 && runtimeTypes[0] === 'Function'
+
           const runtimeDefinableApiTypes =
             extractRuntimeDefinablePropTypes(apiTypes)
 
           // API "type" validation against runtime
           if (
             runtimeDefinableApiTypes.length !== runtimeTypes.length ||
-            runtimeDefinableApiTypes.every((t, i) => t === runtimeTypes[i]) ===
-              false
+            !runtimeDefinableApiTypes.every((t, i) => t === runtimeTypes[i])
           ) {
             logError(
               `${name}: wrong definition for prop "${apiPropName}" - ` +
@@ -1418,7 +1416,7 @@ function fillAPI(apiType, list, encodeFn) {
               if (apiEntry.default !== encodedValue) {
                 let handledAlready = false
 
-                if (isRuntimeFunction === true) {
+                if (isRuntimeFunction) {
                   const fn = runtimeDefaultValue.toString()
 
                   if (fn.includes('\n')) {

ui/build/build.types.js

@@ -149,7 +149,7 @@ function getPropDefinition({
   let propType = getTypeVal(definition)
 
   if (
-    (isCompProps === true || isRestParam) &&
+    (isCompProps || isRestParam) &&
     name !== 'model-value' &&
     !definition.required &&
     !propType.includes(' undefined')

ui/playground/src-ssr/server.js

@@ -118,31 +118,31 @@ const pngRE = /\.png$/
 
 export const renderPreloadTag = defineSsrRenderPreloadTag(
   (file /* , { ssrContext } */) => {
-    if (jsRE.test(file) === true) {
+    if (jsRE.test(file)) {
       return `<link rel="modulepreload" href="${file}" crossorigin>`
     }
 
-    if (cssRE.test(file) === true) {
+    if (cssRE.test(file)) {
       return `<link rel="stylesheet" href="${file}" crossorigin>`
     }
 
-    if (woffRE.test(file) === true) {
+    if (woffRE.test(file)) {
       return `<link rel="preload" href="${file}" as="font" type="font/woff" crossorigin>`
     }
 
-    if (woff2RE.test(file) === true) {
+    if (woff2RE.test(file)) {
       return `<link rel="preload" href="${file}" as="font" type="font/woff2" crossorigin>`
     }
 
-    if (gifRE.test(file) === true) {
+    if (gifRE.test(file)) {
       return `<link rel="preload" href="${file}" as="image" type="image/gif" crossorigin>`
     }
 
-    if (jpgRE.test(file) === true) {
+    if (jpgRE.test(file)) {
       return `<link rel="preload" href="${file}" as="image" type="image/jpeg" crossorigin>`
     }
 
-    if (pngRE.test(file) === true) {
+    if (pngRE.test(file)) {
       return `<link rel="preload" href="${file}" as="image" type="image/png" crossorigin>`
     }
 

ui/playground/src/composables/useLocalStorageConfig.js

@@ -5,9 +5,7 @@ function hasDifferentKeys(a, b) {
   const keys = Object.keys(a)
   const length = keys.length
 
-  if (length !== Object.keys(b).length) {
-    return true
-  }
+  if (length !== Object.keys(b).length) return true
 
   for (let i = length; i-- !== 0; ) {
     const key = keys[i]
@@ -33,7 +31,7 @@ export function useLocalStorageConfig(localStorageKey, definition) {
 
   if (config) {
     // if something changed in the definition, reset it to the default definition
-    if (hasDifferentKeys(config, definition) === true) {
+    if (hasDifferentKeys(config, definition)) {
       config = definition
       LocalStorage.set(localStorageKey, config)
     }

ui/playground/src/pages/IndexPage.vue

@@ -100,7 +100,7 @@ onMounted(() => {
   }
 
   window.addEventListener('keydown', onKeyup, { passive: false, capture: true })
-  if ($q.platform.is.desktop === true) filterRef.value.focus()
+  if ($q.platform.is.desktop) filterRef.value.focus()
 })
 
 onBeforeUnmount(() => {

ui/playground/src/pages/components/ajax-bar.vue

@@ -148,7 +148,7 @@ export default {
     },
 
     loadingState() {
-      return LoadingBar.isActive === true ? 'active' : 'idle'
+      return LoadingBar.isActive ? 'active' : 'idle'
     }
   },
   methods: {

ui/playground/src/pages/components/button-align-2.vue

@@ -221,9 +221,7 @@ export default {
   },
   computed: {
     rowClass() {
-      if (this.center === true) {
-        return 'items-center'
-      }
+      return this.center ? 'items-center' : ''
     },
 
     props() {

ui/playground/src/pages/components/button-functional.vue

@@ -160,8 +160,8 @@
           v-slot="{ href, route, isActive, isExactActive }"
         >
           <q-btn
-            :flat="isActive !== true"
-            :outline="isActive === true && isExactActive !== true"
+            :flat="!isActive"
+            :outline="isActive && !isExactActive"
             color="primary"
             size="lg"
             no-caps
@@ -175,8 +175,8 @@
           v-slot="{ href, route, isActive, isExactActive }"
         >
           <q-btn
-            :flat="isActive !== true"
-            :outline="isActive === true && isExactActive !== true"
+            :flat="!isActive"
+            :outline="isActive && !isExactActive"
             color="primary"
             size="lg"
             no-caps
@@ -190,8 +190,8 @@
           v-slot="{ href, route, isActive, isExactActive }"
         >
           <q-btn
-            :flat="isActive !== true"
-            :outline="isActive === true && isExactActive !== true"
+            :flat="!isActive"
+            :outline="isActive && !isExactActive"
             color="primary"
             size="lg"
             no-caps
@@ -205,8 +205,8 @@
           v-slot="{ href, route, isActive, isExactActive }"
         >
           <q-btn
-            :flat="isActive !== true"
-            :outline="isActive === true && isExactActive !== true"
+            :flat="!isActive"
+            :outline="isActive && !isExactActive"
             color="primary"
             size="lg"
             no-caps
@@ -220,8 +220,8 @@
           v-slot="{ href, route, isActive, isExactActive }"
         >
           <q-btn
-            :flat="isActive !== true"
-            :outline="isActive === true && isExactActive !== true"
+            :flat="!isActive"
+            :outline="isActive && !isExactActive"
             color="primary"
             size="lg"
             no-caps

ui/playground/src/pages/components/button.vue

@@ -1556,7 +1556,7 @@ export default {
     },
     handle(type, e, abort) {
       console.log(type, e)
-      if (abort === true) e.preventDefault()
+      if (abort) e.preventDefault()
     }
   },
   beforeUnmount() {