quasar 2.19.2 → 2.20.0

package/src/components/editor/QEditor.js

@@ -1,23 +1,23 @@
 import {
-  h,
-  ref,
   computed,
-  watch,
-  onMounted,
-  onBeforeUnmount,
+  getCurrentInstance,
+  h,
   nextTick,
-  getCurrentInstance
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  watch
 } from 'vue'
 
 import Caret from './editor-caret.js'
-import { getToolbar, getFonts, getLinkEditor } from './editor-utils.js'
+import { getFonts, getLinkEditor, getToolbar } from './editor-utils.js'
 
 import useDark, {
   useDarkProps
 } from '../../composables/private.use-dark/use-dark.js'
 import useFullscreen, {
-  useFullscreenProps,
-  useFullscreenEmits
+  useFullscreenEmits,
+  useFullscreenProps
 } from '../../composables/private.use-fullscreen/use-fullscreen.js'
 import useSplitAttrs from '../../composables/use-split-attrs/use-split-attrs.js'
 
@@ -52,7 +52,7 @@ export default createComponent({
 
     toolbar: {
       type: Array,
-      validator: v => v.length === 0 || v.every(group => group.length),
+      validator: v => v.every(group => group.length),
       // long line on purpose for API validation purposes:
       // oxfmt-ignore
       default: () => [['left', 'center', 'right', 'justify'], ['bold', 'italic', 'underline', 'strike'], ['undo', 'redo']]
@@ -116,7 +116,7 @@ export default createComponent({
     let defaultFont, offsetBottom
     let lastEmit = props.modelValue
 
-    if (__QUASAR_SSR_SERVER__ !== true) {
+    if (!__QUASAR_SSR_SERVER__) {
       document.execCommand(
         'defaultParagraphSeparator',
         false,
@@ -130,7 +130,7 @@ export default createComponent({
     )
 
     const buttonProps = computed(() => {
-      const flat = props.toolbarOutline !== true && props.toolbarPush !== true
+      const flat = !props.toolbarOutline && !props.toolbarPush
 
       return {
         type: 'a',
@@ -324,6 +324,7 @@ export default createComponent({
         'size-1': {
           cmd: 'fontSize',
           param: '1',
+          // oxlint-disable-next-line unicorn/explicit-length-check
           icon: i.size1 || i.size,
           tip: e.size1,
           htmlTip: `<font size="1">${e.size1}</font>`
@@ -331,6 +332,7 @@ export default createComponent({
         'size-2': {
           cmd: 'fontSize',
           param: '2',
+          // oxlint-disable-next-line unicorn/explicit-length-check
           icon: i.size2 || i.size,
           tip: e.size2,
           htmlTip: `<font size="2">${e.size2}</font>`
@@ -338,6 +340,7 @@ export default createComponent({
         'size-3': {
           cmd: 'fontSize',
           param: '3',
+          // oxlint-disable-next-line unicorn/explicit-length-check
           icon: i.size3 || i.size,
           tip: e.size3,
           htmlTip: `<font size="3">${e.size3}</font>`
@@ -345,6 +348,7 @@ export default createComponent({
         'size-4': {
           cmd: 'fontSize',
           param: '4',
+          // oxlint-disable-next-line unicorn/explicit-length-check
           icon: i.size4 || i.size,
           tip: e.size4,
           htmlTip: `<font size="4">${e.size4}</font>`
@@ -352,6 +356,7 @@ export default createComponent({
         'size-5': {
           cmd: 'fontSize',
           param: '5',
+          // oxlint-disable-next-line unicorn/explicit-length-check
           icon: i.size5 || i.size,
           tip: e.size5,
           htmlTip: `<font size="5">${e.size5}</font>`
@@ -359,6 +364,7 @@ export default createComponent({
         'size-6': {
           cmd: 'fontSize',
           param: '6',
+          // oxlint-disable-next-line unicorn/explicit-length-check
           icon: i.size6 || i.size,
           tip: e.size6,
           htmlTip: `<font size="6">${e.size6}</font>`
@@ -366,6 +372,7 @@ export default createComponent({
         'size-7': {
           cmd: 'fontSize',
           param: '7',
+          // oxlint-disable-next-line unicorn/explicit-length-check
           icon: i.size7 || i.size,
           tip: e.size7,
           htmlTip: `<font size="7">${e.size7}</font>`
@@ -417,12 +424,12 @@ export default createComponent({
                   (buttonDef.value[obj.cmd] &&
                     buttonDef.value[obj.cmd].type === 'no-state')))
               ? obj
-              : Object.assign({ type: 'toggle' }, obj)
-          } else {
-            return {
-              type: 'slot',
-              slot: token
-            }
+              : { type: 'toggle', ...obj }
+          }
+
+          return {
+            type: 'slot',
+            slot: token
           }
         })
       )
@@ -502,13 +509,13 @@ export default createComponent({
 
     const classes = computed(
       () =>
-        `q-editor q-editor--${isViewingSource.value === true ? 'source' : 'default'}` +
-        (props.disable === true ? ' disabled' : '') +
-        (inFullscreen.value === true ? ' fullscreen column' : '') +
-        (props.square === true ? ' q-editor--square no-border-radius' : '') +
-        (props.flat === true ? ' q-editor--flat' : '') +
-        (props.dense === true ? ' q-editor--dense' : '') +
-        (isDark.value === true ? ' q-editor--dark q-dark' : '')
+        `q-editor q-editor--${isViewingSource.value ? 'source' : 'default'}` +
+        (props.disable ? ' disabled' : '') +
+        (inFullscreen.value ? ' fullscreen column' : '') +
+        (props.square ? ' q-editor--square no-border-radius' : '') +
+        (props.flat ? ' q-editor--flat' : '') +
+        (props.dense ? ' q-editor--dense' : '') +
+        (isDark.value ? ' q-editor--dark q-dark' : '')
     )
 
     const innerClass = computed(() => [
@@ -521,12 +528,12 @@ export default createComponent({
     ])
 
     const attributes = computed(() =>
-      props.disable === true ? { 'aria-disabled': 'true' } : {}
+      props.disable ? { 'aria-disabled': 'true' } : {}
     )
 
     function onInput() {
       if (contentRef.value !== null) {
-        const prop = `inner${isViewingSource.value === true ? 'Text' : 'HTML'}`
+        const prop = `inner${isViewingSource.value ? 'Text' : 'HTML'}`
         const val = contentRef.value[prop]
 
         if (val !== props.modelValue) {
@@ -539,7 +546,7 @@ export default createComponent({
     function onKeydown(e) {
       emit('keydown', e)
 
-      if (e.ctrlKey !== true || shouldIgnoreKey(e) === true) {
+      if (!e.ctrlKey || shouldIgnoreKey(e)) {
         refreshToolbar()
         return
       }
@@ -582,10 +589,10 @@ export default createComponent({
 
       if (
         root !== null &&
-        root.contains(e.target) === true &&
-        (e.relatedTarget === null || root.contains(e.relatedTarget) !== true)
+        root.contains(e.target) &&
+        (e.relatedTarget === null || !root.contains(e.relatedTarget))
       ) {
-        const prop = `inner${isViewingSource.value === true ? 'Text' : 'HTML'}`
+        const prop = `inner${isViewingSource.value ? 'Text' : 'HTML'}`
         eVm.caret.restorePosition(contentRef.value[prop].length)
         refreshToolbar()
       }
@@ -596,8 +603,8 @@ export default createComponent({
 
       if (
         root !== null &&
-        root.contains(e.target) === true &&
-        (e.relatedTarget === null || root.contains(e.relatedTarget) !== true)
+        root.contains(e.target) &&
+        (e.relatedTarget === null || !root.contains(e.relatedTarget))
       ) {
         eVm.caret.savePosition()
         refreshToolbar()
@@ -614,14 +621,14 @@ export default createComponent({
 
     function setContent(v, restorePosition) {
       if (contentRef.value !== null) {
-        if (restorePosition === true) {
+        if (restorePosition) {
           eVm.caret.savePosition()
         }
 
-        const prop = `inner${isViewingSource.value === true ? 'Text' : 'HTML'}`
+        const prop = `inner${isViewingSource.value ? 'Text' : 'HTML'}`
         contentRef.value[prop] = v
 
-        if (restorePosition === true) {
+        if (restorePosition) {
           eVm.caret.restorePosition(contentRef.value[prop].length)
           refreshToolbar()
         }
@@ -724,7 +731,7 @@ export default createComponent({
         {
           ref: rootRef,
           class: classes.value,
-          style: { height: inFullscreen.value === true ? '100%' : null },
+          style: { height: inFullscreen.value ? '100%' : null },
           ...attributes.value,
           onFocusin,
           onFocusout

package/src/components/editor/editor-caret.js

@@ -1,5 +1,7 @@
 import { noop } from '../../utils/event/event.js'
 
+const tagList = ['div', 'li', 'ul', 'ol', 'blockquote']
+
 function getBlockElement(el, parent) {
   if (parent && el === parent) {
     return null
@@ -7,9 +9,7 @@ function getBlockElement(el, parent) {
 
   const nodeName = el.nodeName.toLowerCase()
 
-  if (['div', 'li', 'ul', 'ol', 'blockquote'].includes(nodeName) === true) {
-    return el
-  }
+  if (tagList.includes(nodeName)) return el
 
   const style = window.getComputedStyle
       ? window.getComputedStyle(el)
@@ -26,7 +26,7 @@ function getBlockElement(el, parent) {
 function isChildOf(el, parent, orSame) {
   return !el || el === document.body
     ? false
-    : (orSame === true && el === parent) ||
+    : (orSame && el === parent) ||
         (parent === document ? document.body : parent).contains(el.parentNode)
 }
 
@@ -186,46 +186,48 @@ export default class Caret {
   }
 
   hasParents(list, recursive, el = this.parent) {
-    if (el === null) {
-      return false
-    }
+    if (el === null) return false
 
-    if (list.includes(el.nodeName.toLowerCase()) === true) {
+    if (list.includes(el.nodeName.toLowerCase())) {
       return true
     }
 
-    return recursive === true
-      ? this.hasParents(list, recursive, el.parentNode)
-      : false
+    return recursive ? this.hasParents(list, recursive, el.parentNode) : false
   }
 
   is(cmd, param) {
-    if (this.selection === null) {
-      return false
-    }
+    if (this.selection === null) return false
 
     switch (cmd) {
-      case 'formatBlock':
+      case 'formatBlock': {
         return (
           (param === 'DIV' && this.parent === this.el) ||
           this.hasParent(param, param === 'PRE')
         )
-      case 'link':
+      }
+      case 'link': {
         return this.hasParent('A', true)
-      case 'fontSize':
+      }
+      case 'fontSize': {
         return document.queryCommandValue(cmd) === param
-      case 'fontName':
+      }
+      case 'fontName': {
         const res = document.queryCommandValue(cmd)
         return res === `"${param}"` || res === param
-      case 'fullscreen':
+      }
+      case 'fullscreen': {
         return this.eVm.inFullscreen.value
-      case 'viewsource':
+      }
+      case 'viewsource': {
         return this.eVm.isViewingSource.value
-      case void 0:
+      }
+      case void 0: {
         return false
-      default:
+      }
+      default: {
         const state = document.queryCommandState(cmd)
         return param !== void 0 ? state === param : state
+      }
     }
   }
 
@@ -292,7 +294,7 @@ export default class Caret {
         const url = selection ? selection.toString() : ''
 
         if (
-          !url.length &&
+          url.length === 0 &&
           (!this.range || !this.range.cloneContents().querySelector('img'))
         ) {
           return
@@ -315,7 +317,7 @@ export default class Caret {
 
       return
     } else if (cmd === 'viewsource') {
-      this.eVm.isViewingSource.value = this.eVm.isViewingSource.value === false
+      this.eVm.isViewingSource.value = !this.eVm.isViewingSource.value
       this.eVm.setContent(this.eVm.props.modelValue)
       done()
 
@@ -328,13 +330,7 @@ export default class Caret {
   }
 
   selectWord(sel) {
-    if (
-      sel === null ||
-      sel.isCollapsed !== true ||
-      /* IE 11 */ sel.modify === void 0
-    ) {
-      return sel
-    }
+    if (sel === null || !sel.isCollapsed) return sel
 
     // Detect if selection is backwards
     const range = document.createRange()

package/src/components/editor/editor-utils.js

@@ -35,7 +35,7 @@ function getBtn(eVm, btn, clickHandler, active = false) {
 
   if (eVm.$q.platform.is.desktop && (btn.tip || btn.htmlTip)) {
     const Key = btn.key
-      ? h('div', [h('small', `(CTRL + ${String.fromCharCode(btn.key)})`)])
+      ? h('div', [h('small', `(CTRL + ${String.fromCodePoint(btn.key)})`)])
       : null
 
     child.push(
@@ -143,7 +143,7 @@ function getDropdown(eVm, btn) {
           }
         },
         () => [
-          noIcons === true
+          noIcons
             ? null
             : h(
                 QItemSection,
@@ -291,13 +291,16 @@ export function getLinkEditor(eVm) {
           link = evt.target.value
         },
         onKeydown: evt => {
-          if (shouldIgnoreKey(evt) === true) return
+          if (shouldIgnoreKey(evt)) return
 
           switch (evt.keyCode) {
-            case 13: // ENTER key
+            case 13: {
+              // ENTER key
               prevent(evt)
               return updateLink()
-            case 27: // ESCAPE key
+            }
+            case 27: {
+              // ESCAPE key
               prevent(evt)
               eVm.caret.restore()
               if (
@@ -308,6 +311,7 @@ export function getLinkEditor(eVm) {
               }
               eVm.editLinkUrl.value = null
               break
+            }
           }
         }
       }),

package/src/components/expansion-item/QExpansionItem.js

@@ -1,13 +1,13 @@
 import {
-  h,
-  shallowReactive,
-  ref,
   computed,
-  watch,
-  withDirectives,
   getCurrentInstance,
+  h,
+  onBeforeUnmount,
+  ref,
+  shallowReactive,
   vShow,
-  onBeforeUnmount
+  watch,
+  withDirectives
 } from 'vue'
 
 import QItem from '../item/QItem.js'
@@ -23,8 +23,8 @@ import useDark, {
 import useId from '../../composables/use-id/use-id.js'
 import { useRouterLinkProps } from '../../composables/private.use-router-link/use-router-link.js'
 import useModelToggle, {
-  useModelToggleProps,
-  useModelToggleEmits
+  useModelToggleEmits,
+  useModelToggleProps
 } from '../../composables/private.use-model-toggle/use-model-toggle.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
@@ -97,8 +97,8 @@ export default createComponent({
     const classes = computed(
       () =>
         'q-expansion-item q-item-type' +
-        ` q-expansion-item--${showing.value === true ? 'expanded' : 'collapsed'}` +
-        ` q-expansion-item--${props.popup === true ? 'popup' : 'standard'}`
+        ` q-expansion-item--${showing.value ? 'expanded' : 'collapsed'}` +
+        ` q-expansion-item--${props.popup ? 'popup' : 'standard'}`
     )
 
     const contentStyle = computed(() => {
@@ -106,7 +106,7 @@ export default createComponent({
         return null
       }
 
-      const dir = $q.lang.rtl === true ? 'Right' : 'Left'
+      const dir = $q.lang.rtl ? 'Right' : 'Left'
       return {
         ['padding' + dir]: props.contentInsetLevel * 56 + 'px'
       }
@@ -114,7 +114,7 @@ export default createComponent({
 
     const hasLink = computed(
       () =>
-        props.disable !== true &&
+        !props.disable &&
         (props.href !== void 0 ||
           (props.to !== void 0 && props.to !== null && props.to !== ''))
     )
@@ -127,27 +127,21 @@ export default createComponent({
       return acc
     })
 
-    const isClickable = computed(
-      () => hasLink.value === true || props.expandIconToggle !== true
-    )
+    const isClickable = computed(() => hasLink.value || !props.expandIconToggle)
 
     const expansionIcon = computed(() =>
-      props.expandedIcon !== void 0 && showing.value === true
+      props.expandedIcon !== void 0 && showing.value
         ? props.expandedIcon
         : props.expandIcon ||
-          $q.iconSet.expansionItem[
-            props.denseToggle === true ? 'denseIcon' : 'icon'
-          ]
+          $q.iconSet.expansionItem[props.denseToggle ? 'denseIcon' : 'icon']
     )
 
     const activeToggleIcon = computed(
-      () =>
-        props.disable !== true &&
-        (hasLink.value === true || props.expandIconToggle === true)
+      () => !props.disable && (hasLink.value || props.expandIconToggle)
     )
 
     const headerSlotScope = computed(() => ({
-      expanded: showing.value === true,
+      expanded: showing.value,
       detailsId: targetUid.value,
       toggle,
       show,
@@ -158,13 +152,11 @@ export default createComponent({
       const toggleAriaLabel =
         props.toggleAriaLabel !== void 0
           ? props.toggleAriaLabel
-          : $q.lang.label[showing.value === true ? 'collapse' : 'expand'](
-              props.label
-            )
+          : $q.lang.label[showing.value ? 'collapse' : 'expand'](props.label)
 
       return {
         role: 'button',
-        'aria-expanded': showing.value === true ? 'true' : 'false',
+        'aria-expanded': showing.value ? 'true' : 'false',
         'aria-controls': targetUid.value,
         'aria-label': toggleAriaLabel
       }
@@ -179,7 +171,7 @@ export default createComponent({
     )
 
     function onHeaderClick(e) {
-      if (hasLink.value !== true) toggle(e)
+      if (!hasLink.value) toggle(e)
       emit('click', e)
     }
 
@@ -188,9 +180,7 @@ export default createComponent({
     }
 
     function toggleIcon(e, keyboard) {
-      if (keyboard !== true && e.qAvoidFocus !== true) {
-        blurTargetRef.value?.focus()
-      }
+      if (!keyboard && !e.qAvoidFocus) blurTargetRef.value?.focus()
 
       toggle(e)
       stopAndPrevent(e)
@@ -209,12 +199,12 @@ export default createComponent({
         uniqueId = uid()
       }
 
-      if (showing.value === true) {
+      if (showing.value) {
         itemGroups[props.group] = uniqueId
       }
 
       const stopShowWatcher = watch(showing, val => {
-        if (val === true) {
+        if (val) {
           itemGroups[props.group] = uniqueId
         } else if (itemGroups[props.group] === uniqueId) {
           delete itemGroups[props.group]
@@ -246,10 +236,10 @@ export default createComponent({
       const data = {
         class: [
           'q-focusable relative-position cursor-pointer' +
-            `${props.denseToggle === true && props.switchToggleSide === true ? ' items-end' : ''}`,
+            `${props.denseToggle && props.switchToggleSide ? ' items-end' : ''}`,
           props.expandIconClass
         ],
-        side: props.switchToggleSide !== true,
+        side: !props.switchToggleSide,
         avatar: props.switchToggleSide
       }
 
@@ -257,14 +247,14 @@ export default createComponent({
         h(QIcon, {
           class:
             'q-expansion-item__toggle-icon' +
-            (props.expandedIcon === void 0 && showing.value === true
+            (props.expandedIcon === void 0 && showing.value
               ? ' q-expansion-item__toggle-icon--rotated'
               : ''),
           name: expansionIcon.value
         })
       ]
 
-      if (activeToggleIcon.value === true) {
+      if (activeToggleIcon.value) {
         Object.assign(data, {
           tabindex: 0,
           ...toggleAriaAttrs.value,
@@ -289,7 +279,7 @@ export default createComponent({
       let child
 
       if (slots.header !== void 0) {
-        child = [].concat(slots.header(headerSlotScope.value))
+        child = [slots.header(headerSlotScope.value)].flat()
       } else {
         child = [
           h(QItemSection, () => [
@@ -306,12 +296,12 @@ export default createComponent({
         ]
 
         if (props.icon) {
-          child[props.switchToggleSide === true ? 'push' : 'unshift'](
+          child[props.switchToggleSide ? 'push' : 'unshift'](
             h(
               QItemSection,
               {
-                side: props.switchToggleSide === true,
-                avatar: props.switchToggleSide !== true
+                side: props.switchToggleSide,
+                avatar: !props.switchToggleSide
               },
               () => h(QIcon, { name: props.icon })
             )
@@ -319,10 +309,8 @@ export default createComponent({
         }
       }
 
-      if (props.disable !== true && props.hideExpandIcon !== true) {
-        child[props.switchToggleSide === true ? 'unshift' : 'push'](
-          getToggleIcon()
-        )
+      if (!props.disable && !props.hideExpandIcon) {
+        child[props.switchToggleSide ? 'unshift' : 'push'](getToggleIcon())
       }
 
       return child
@@ -339,13 +327,13 @@ export default createComponent({
         insetLevel: props.headerInsetLevel
       }
 
-      if (isClickable.value === true) {
+      if (isClickable.value) {
         data.clickable = true
         data.onClick = onHeaderClick
 
         Object.assign(
           data,
-          hasLink.value === true ? linkProps.value : toggleAriaAttrs.value
+          hasLink.value ? linkProps.value : toggleAriaAttrs.value
         )
       }
 
@@ -383,7 +371,7 @@ export default createComponent({
         )
       ]
 
-      if (props.expandSeparator === true) {
+      if (props.expandSeparator) {
         node.push(
           h(QSeparator, {
             class: