quasar 2.18.6 → 2.19.0

package/src/components/tree/QTree.js

@@ -1,6 +1,13 @@
 import {
-  h, ref, computed, watch,
-  withDirectives, vShow, nextTick, getCurrentInstance, onBeforeUpdate
+  h,
+  ref,
+  computed,
+  watch,
+  withDirectives,
+  vShow,
+  nextTick,
+  getCurrentInstance,
+  onBeforeUpdate
 } from 'vue'
 
 import QIcon from '../icon/QIcon.js'
@@ -8,14 +15,16 @@ import QCheckbox from '../checkbox/QCheckbox.js'
 import QSlideTransition from '../slide-transition/QSlideTransition.js'
 import QSpinner from '../spinner/QSpinner.js'
 
-import useDark, { useDarkProps } from '../../composables/private.use-dark/use-dark.js'
+import useDark, {
+  useDarkProps
+} from '../../composables/private.use-dark/use-dark.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
 import { stopAndPrevent } from '../../utils/event/event.js'
 import { shouldIgnoreKey } from '../../utils/private.keyboard/key-composition.js'
 import { injectProp } from '../../utils/private.inject-obj-prop/inject-obj-prop.js'
 
-const tickStrategyOptions = [ 'none', 'strict', 'leaf', 'leaf-filtered' ]
+const tickStrategyOptions = ['none', 'strict', 'leaf', 'leaf-filtered']
 
 export default createComponent({
   name: 'QTree',
@@ -83,7 +92,7 @@ export default createComponent({
     'afterHide'
   ],
 
-  setup (props, { slots, emit }) {
+  setup(props, { slots, emit }) {
     const { proxy } = getCurrentInstance()
     const { $q } = proxy
 
@@ -99,67 +108,83 @@ export default createComponent({
       blurTargets = {}
     })
 
-    const classes = computed(() =>
-      `q-tree q-tree--${ props.dense === true ? 'dense' : 'standard' }`
-      + (props.noConnectors === true ? ' q-tree--no-connectors' : '')
-      + (isDark.value === true ? ' q-tree--dark' : '')
-      + (props.color !== void 0 ? ` text-${ props.color }` : '')
+    const classes = computed(
+      () =>
+        `q-tree q-tree--${props.dense === true ? 'dense' : 'standard'}` +
+        (props.noConnectors === true ? ' q-tree--no-connectors' : '') +
+        (isDark.value === true ? ' q-tree--dark' : '') +
+        (props.color !== void 0 ? ` text-${props.color}` : '')
     )
 
     const hasSelection = computed(() => props.selected !== void 0)
 
     const computedIcon = computed(() => props.icon || $q.iconSet.tree.icon)
 
-    const computedControlColor = computed(() => props.controlColor || props.color)
+    const computedControlColor = computed(
+      () => props.controlColor || props.color
+    )
 
-    const textColorClass = computed(() => (
-      props.textColor !== void 0
-        ? ` text-${ props.textColor }`
-        : ''
-    ))
+    const textColorClass = computed(() =>
+      props.textColor !== void 0 ? ` text-${props.textColor}` : ''
+    )
 
     const selectedColorClass = computed(() => {
       const color = props.selectedColor || props.color
-      return color ? ` text-${ color }` : ''
+      return color ? ` text-${color}` : ''
     })
 
-    const computedFilterMethod = computed(() => (
+    const computedFilterMethod = computed(() =>
       props.filterMethod !== void 0
         ? props.filterMethod
         : (node, filter) => {
             const filt = filter.toLowerCase()
-            return node[ props.labelKey ]
-            && node[ props.labelKey ].toLowerCase().indexOf(filt) !== -1
+            return (
+              node[props.labelKey] &&
+              node[props.labelKey].toLowerCase().indexOf(filt) !== -1
+            )
           }
-    ))
+    )
 
     const meta = computed(() => {
-      const meta = {}
+      const acc = {}
 
       const travel = (node, parent) => {
-        const tickStrategy = node.tickStrategy || (parent ? parent.tickStrategy : props.tickStrategy)
-        const
-          key = node[ props.nodeKey ],
-          isParent = node[ props.childrenKey ] && Array.isArray(node[ props.childrenKey ]) && node[ props.childrenKey ].length !== 0,
-          selectable = node.disabled !== true && hasSelection.value === true && node.selectable !== false,
+        const tickStrategy =
+          node.tickStrategy ||
+          (parent ? parent.tickStrategy : props.tickStrategy)
+        const key = node[props.nodeKey],
+          isParent =
+            node[props.childrenKey] &&
+            Array.isArray(node[props.childrenKey]) &&
+            node[props.childrenKey].length !== 0,
+          selectable =
+            node.disabled !== true &&
+            hasSelection.value === true &&
+            node.selectable !== false,
           expandable = node.disabled !== true && node.expandable !== false,
           hasTicking = tickStrategy !== 'none',
           strictTicking = tickStrategy === 'strict',
           leafFilteredTicking = tickStrategy === 'leaf-filtered',
-          leafTicking = tickStrategy === 'leaf' || tickStrategy === 'leaf-filtered'
+          leafTicking =
+            tickStrategy === 'leaf' || tickStrategy === 'leaf-filtered'
 
         let tickable = node.disabled !== true && node.tickable !== false
-        if (leafTicking === true && tickable === true && parent && parent.tickable !== true) {
+        if (
+          leafTicking === true &&
+          tickable === true &&
+          parent &&
+          parent.tickable !== true
+        ) {
           tickable = false
         }
 
         let localLazy = node.lazy
         if (
-          localLazy === true
-          && lazy.value[ key ] !== void 0
-          && Array.isArray(node[ props.childrenKey ]) === true
+          localLazy === true &&
+          lazy.value[key] !== void 0 &&
+          Array.isArray(node[props.childrenKey]) === true
         ) {
-          localLazy = lazy.value[ key ]
+          localLazy = lazy.value[key]
         }
 
         const m = {
@@ -168,71 +193,97 @@ export default createComponent({
           isParent,
           lazy: localLazy,
           disabled: node.disabled,
-          link: node.disabled !== true && (selectable === true || (expandable === true && (isParent === true || localLazy === true))),
+          link:
+            node.disabled !== true &&
+            (selectable === true ||
+              (expandable === true &&
+                (isParent === true || localLazy === true))),
           children: [],
-          matchesFilter: props.filter ? computedFilterMethod.value(node, props.filter) : true,
+          matchesFilter: props.filter
+            ? computedFilterMethod.value(node, props.filter)
+            : true,
 
           selected: key === props.selected && selectable === true,
           selectable,
-          expanded: isParent === true ? innerExpanded.value.includes(key) : false,
+          expanded:
+            isParent === true ? innerExpanded.value.includes(key) : false,
           expandable,
-          noTick: node.noTick === true || (strictTicking !== true && localLazy && localLazy !== 'loaded'),
+          noTick:
+            node.noTick === true ||
+            (strictTicking !== true && localLazy && localLazy !== 'loaded'),
           tickable,
           tickStrategy,
           hasTicking,
           strictTicking,
           leafFilteredTicking,
           leafTicking,
-          ticked: strictTicking === true
-            ? innerTicked.value.includes(key)
-            : (isParent === true ? false : innerTicked.value.includes(key))
+          ticked:
+            strictTicking === true
+              ? innerTicked.value.includes(key)
+              : isParent === true
+                ? false
+                : innerTicked.value.includes(key)
         }
 
-        meta[ key ] = m
+        acc[key] = m
 
         if (isParent === true) {
-          m.children = node[ props.childrenKey ].map(n => travel(n, m))
+          m.children = node[props.childrenKey].map(n => travel(n, m))
 
           if (props.filter) {
             if (m.matchesFilter !== true) {
               m.matchesFilter = m.children.some(n => n.matchesFilter)
-            }
-            else if (
-              m.noTick !== true
-              && m.disabled !== true
-              && m.tickable === true
-              && leafFilteredTicking === true
-              && m.children.every(n => n.matchesFilter !== true || n.noTick === true || n.tickable !== true) === true
+            } else if (
+              m.noTick !== true &&
+              m.disabled !== true &&
+              m.tickable === true &&
+              leafFilteredTicking === true &&
+              m.children.every(
+                n =>
+                  n.matchesFilter !== true ||
+                  n.noTick === true ||
+                  n.tickable !== true
+              ) === true
             ) {
               m.tickable = false
             }
           }
 
           if (m.matchesFilter === true) {
-            if (m.noTick !== true && strictTicking !== true && m.children.every(n => n.noTick) === true) {
+            if (
+              m.noTick !== true &&
+              strictTicking !== true &&
+              m.children.every(n => n.noTick) === true
+            ) {
               m.noTick = true
             }
 
             if (leafTicking) {
               m.ticked = false
-              m.indeterminate = m.children.some(node => node.indeterminate === true)
-              m.tickable = m.tickable === true && m.children.some(node => node.tickable)
+              m.indeterminate = m.children.some(
+                entry => entry.indeterminate === true
+              )
+              m.tickable =
+                m.tickable === true && m.children.some(entry => entry.tickable)
 
               if (m.indeterminate !== true) {
-                const sel = m.children
-                  .reduce((acc, meta) => (meta.ticked === true ? acc + 1 : acc), 0)
+                const sel = m.children.reduce(
+                  (localAcc, entry) =>
+                    entry.ticked === true ? localAcc + 1 : localAcc,
+                  0
+                )
 
                 if (sel === m.children.length) {
                   m.ticked = true
-                }
-                else if (sel > 0) {
+                } else if (sel > 0) {
                   m.indeterminate = true
                 }
               }
 
               if (m.indeterminate === true) {
-                m.indeterminateNextState = m.children
-                  .every(meta => meta.tickable !== true || meta.ticked !== true)
+                m.indeterminateNextState = m.children.every(
+                  entry => entry.tickable !== true || entry.ticked !== true
+                )
               }
             }
           }
@@ -242,18 +293,24 @@ export default createComponent({
       }
 
       props.nodes.forEach(node => travel(node, null))
-      return meta
+      return acc
     })
 
-    watch(() => props.ticked, val => {
-      innerTicked.value = val
-    })
+    watch(
+      () => props.ticked,
+      val => {
+        innerTicked.value = val
+      }
+    )
 
-    watch(() => props.expanded, val => {
-      innerExpanded.value = val
-    })
+    watch(
+      () => props.expanded,
+      val => {
+        innerExpanded.value = val
+      }
+    )
 
-    function getNodeByKey (key) {
+    function getNodeByKey(key) {
       const reduce = [].reduce
 
       const find = (result, node) => {
@@ -263,47 +320,44 @@ export default createComponent({
         if (Array.isArray(node) === true) {
           return reduce.call(Object(node), find, result)
         }
-        if (node[ props.nodeKey ] === key) {
+        if (node[props.nodeKey] === key) {
           return node
         }
-        if (node[ props.childrenKey ]) {
-          return find(null, node[ props.childrenKey ])
+        if (node[props.childrenKey]) {
+          return find(null, node[props.childrenKey])
         }
       }
 
       return find(null, props.nodes)
     }
 
-    function getTickedNodes () {
+    function getTickedNodes() {
       return innerTicked.value.map(key => getNodeByKey(key))
     }
 
-    function getExpandedNodes () {
+    function getExpandedNodes() {
       return innerExpanded.value.map(key => getNodeByKey(key))
     }
 
-    function isExpanded (key) {
-      return key && meta.value[ key ]
-        ? meta.value[ key ].expanded
-        : false
+    function isExpanded(key) {
+      return key && meta.value[key] ? meta.value[key].expanded : false
     }
 
-    function collapseAll () {
+    function collapseAll() {
       if (props.expanded !== void 0) {
         emit('update:expanded', [])
-      }
-      else {
+      } else {
         innerExpanded.value = []
       }
     }
 
-    function expandAll () {
+    function expandAll() {
       const expanded = []
       const travel = node => {
-        if (node[ props.childrenKey ] && node[ props.childrenKey ].length !== 0) {
+        if (node[props.childrenKey] && node[props.childrenKey].length !== 0) {
           if (node.expandable !== false && node.disabled !== true) {
-            expanded.push(node[ props.nodeKey ])
-            node[ props.childrenKey ].forEach(travel)
+            expanded.push(node[props.nodeKey])
+            node[props.childrenKey].forEach(travel)
           }
         }
       }
@@ -312,47 +366,51 @@ export default createComponent({
 
       if (props.expanded !== void 0) {
         emit('update:expanded', expanded)
-      }
-      else {
+      } else {
         innerExpanded.value = expanded
       }
     }
 
-    function setExpanded (key, state, node = getNodeByKey(key), m = meta.value[ key ]) {
+    function setExpanded(
+      key,
+      state,
+      node = getNodeByKey(key),
+      m = meta.value[key]
+    ) {
       if (m.lazy && m.lazy !== 'loaded') {
         if (m.lazy === 'loading') return
 
-        lazy.value[ key ] = 'loading'
-        if (Array.isArray(node[ props.childrenKey ]) !== true) {
-          node[ props.childrenKey ] = []
+        lazy.value[key] = 'loading'
+        if (Array.isArray(node[props.childrenKey]) !== true) {
+          node[props.childrenKey] = []
         }
         emit('lazyLoad', {
           node,
           key,
           done: children => {
-            lazy.value[ key ] = 'loaded'
-            node[ props.childrenKey ] = Array.isArray(children) === true ? children : []
+            lazy.value[key] = 'loaded'
+            node[props.childrenKey] =
+              Array.isArray(children) === true ? children : []
             nextTick(() => {
-              const localMeta = meta.value[ key ]
+              const localMeta = meta.value[key]
               if (localMeta?.isParent === true) {
                 localSetExpanded(key, true)
               }
             })
           },
           fail: () => {
-            delete lazy.value[ key ]
-            if (node[ props.childrenKey ].length === 0) {
-              delete node[ props.childrenKey ]
+            delete lazy.value[key]
+            if (node[props.childrenKey].length === 0) {
+              delete node[props.childrenKey]
             }
           }
         })
-      }
-      else if (m.isParent === true && m.expandable === true) {
+      } else if (m.isParent === true && m.expandable === true) {
         localSetExpanded(key, state)
       }
     }
 
-    function localSetExpanded (key, state) {
+    function localSetExpanded(key, state) {
       let target = innerExpanded.value
       const shouldEmit = props.expanded !== void 0
 
@@ -362,18 +420,17 @@ export default createComponent({
 
       if (state) {
         if (props.accordion) {
-          if (meta.value[ key ]) {
+          if (meta.value[key]) {
             const collapse = []
-            if (meta.value[ key ].parent) {
-              meta.value[ key ].parent.children.forEach(m => {
+            if (meta.value[key].parent) {
+              meta.value[key].parent.children.forEach(m => {
                 if (m.key !== key && m.expandable === true) {
                   collapse.push(m.key)
                 }
               })
-            }
-            else {
+            } else {
               props.nodes.forEach(node => {
-                const k = node[ props.nodeKey ]
+                const k = node[props.nodeKey]
                 if (k !== key) {
                   collapse.push(k)
                 }
@@ -385,28 +442,25 @@ export default createComponent({
           }
         }
 
-        target = target.concat([ key ])
-          .filter((key, index, self) => self.indexOf(key) === index)
-      }
-      else {
+        target = target
+          .concat([key])
+          .filter((entryKey, index, self) => self.indexOf(entryKey) === index)
+      } else {
         target = target.filter(k => k !== key)
       }
 
       if (shouldEmit === true) {
         emit('update:expanded', target)
-      }
-      else {
+      } else {
         innerExpanded.value = target
       }
     }
 
-    function isTicked (key) {
-      return key && meta.value[ key ]
-        ? meta.value[ key ].ticked
-        : false
+    function isTicked(key) {
+      return key && meta.value[key] ? meta.value[key].ticked : false
     }
 
-    function setTicked (keys, state) {
+    function setTicked(keys, state) {
       let target = innerTicked.value
       const shouldEmit = props.ticked !== void 0
 
@@ -415,10 +469,10 @@ export default createComponent({
       }
 
       if (state) {
-        target = target.concat(keys)
+        target = target
+          .concat(keys)
           .filter((key, index, self) => self.indexOf(key) === index)
-      }
-      else {
+      } else {
         target = target.filter(k => keys.includes(k) === false)
       }
 
@@ -427,35 +481,49 @@ export default createComponent({
       }
     }
 
-    function getSlotScope (node, meta, key) {
-      const scope = { tree: proxy, node, key, color: props.color, dark: isDark.value }
+    function getSlotScope(node, localMeta, key) {
+      const scope = {
+        tree: proxy,
+        node,
+        key,
+        color: props.color,
+        dark: isDark.value
+      }
 
       injectProp(
         scope,
         'expanded',
-        () => { return meta.expanded },
-        val => { val !== meta.expanded && setExpanded(key, val) }
+        () => localMeta.expanded,
+        val => {
+          if (val !== localMeta.expanded) {
+            setExpanded(key, val)
+          }
+        }
       )
 
       injectProp(
         scope,
         'ticked',
-        () => { return meta.ticked },
-        val => { val !== meta.ticked && setTicked([ key ], val) }
+        () => localMeta.ticked,
+        val => {
+          if (val !== localMeta.ticked) {
+            setTicked([key], val)
+          }
+        }
       )
 
       return scope
     }
 
-    function getChildren (nodes) {
+    function getChildren(nodes) {
       return (
         props.filter
-          ? nodes.filter(n => meta.value[ n[ props.nodeKey ] ].matchesFilter)
+          ? nodes.filter(n => meta.value[n[props.nodeKey]].matchesFilter)
           : nodes
       ).map(child => getNode(child))
     }
 
-    function getNodeMedia (node) {
+    function getNodeMedia(node) {
       if (node.icon !== void 0) {
         return h(QIcon, {
           class: 'q-tree__icon q-mr-sm',
@@ -466,183 +534,229 @@ export default createComponent({
       const src = node.img || node.avatar
       if (src) {
         return h('img', {
-          class: `q-tree__${ node.img ? 'img' : 'avatar' } q-mr-sm`,
+          class: `q-tree__${node.img ? 'img' : 'avatar'} q-mr-sm`,
           src
         })
       }
     }
 
-    function onShow () {
+    function onShow() {
       emit('afterShow')
     }
 
-    function onHide () {
+    function onHide() {
       emit('afterHide')
     }
 
-    function getNode (node) {
-      const
-        key = node[ props.nodeKey ],
-        m = meta.value[ key ],
+    function getNode(node) {
+      const key = node[props.nodeKey],
+        m = meta.value[key],
         header = node.header
-          ? slots[ `header-${ node.header }` ] || slots[ 'default-header' ]
-          : slots[ 'default-header' ]
+          ? slots[`header-${node.header}`] || slots['default-header']
+          : slots['default-header']
 
-      const children = m.isParent === true
-        ? getChildren(node[ props.childrenKey ])
-        : []
+      const children =
+        m.isParent === true ? getChildren(node[props.childrenKey]) : []
 
       const isParent = children.length !== 0 || (m.lazy && m.lazy !== 'loaded')
 
       let body = node.body
-        ? slots[ `body-${ node.body }` ] || slots[ 'default-body' ]
-        : slots[ 'default-body' ]
+        ? slots[`body-${node.body}`] || slots['default-body']
+        : slots['default-body']
 
-      const slotScope = header !== void 0 || body !== void 0
-        ? getSlotScope(node, m, key)
-        : null
+      const slotScope =
+        header !== void 0 || body !== void 0 ? getSlotScope(node, m, key) : null
 
       if (body !== void 0) {
         body = h('div', { class: 'q-tree__node-body relative-position' }, [
-          h('div', { class: textColorClass.value }, [
-            body(slotScope)
-          ])
+          h('div', { class: textColorClass.value }, [body(slotScope)])
         ])
       }
 
-      return h('div', {
-        key,
-        class: 'q-tree__node relative-position'
-          + ` q-tree__node--${ isParent === true ? 'parent' : 'child' }`
-      }, [
-        h('div', {
-          class: 'q-tree__node-header relative-position row no-wrap items-center'
-            + (m.link === true ? ' q-tree__node--link q-hoverable q-focusable' : '')
-            + (m.selected === true ? ' q-tree__node--selected' : '')
-            + (m.disabled === true ? ' q-tree__node--disabled' : ''),
-          tabindex: m.link === true ? 0 : -1,
-          ariaExpanded: children.length > 0 ? m.expanded : null,
-          role: 'treeitem',
-          onClick: (e) => {
-            onClick(node, m, e)
-          },
-          onKeypress (e) {
-            if (shouldIgnoreKey(e) !== true) {
-              if (e.keyCode === 13) { onClick(node, m, e, true) }
-              else if (e.keyCode === 32) { onExpandClick(node, m, e, true) }
-            }
-          }
-        }, [
-          h('div', {
-            class: 'q-focus-helper',
-            tabindex: -1,
-            ref: el => { blurTargets[ m.key ] = el }
-          }),
-
-          m.lazy === 'loading'
-            ? h(QSpinner, {
-              class: 'q-tree__spinner',
-              color: computedControlColor.value
-            })
-            : (
-                isParent === true
+      return h(
+        'div',
+        {
+          key,
+          class:
+            'q-tree__node relative-position' +
+            ` q-tree__node--${isParent === true ? 'parent' : 'child'}`
+        },
+        [
+          h(
+            'div',
+            {
+              class:
+                'q-tree__node-header relative-position row no-wrap items-center' +
+                (m.link === true
+                  ? ' q-tree__node--link q-hoverable q-focusable'
+                  : '') +
+                (m.selected === true ? ' q-tree__node--selected' : '') +
+                (m.disabled === true ? ' q-tree__node--disabled' : ''),
+              tabindex: m.link === true ? 0 : -1,
+              ariaExpanded: children.length > 0 ? m.expanded : null,
+              role: 'treeitem',
+              onClick: e => {
+                onClick(node, m, e)
+              },
+              onKeypress(e) {
+                if (shouldIgnoreKey(e) !== true) {
+                  if (e.keyCode === 13) {
+                    onClick(node, m, e, true)
+                  } else if (e.keyCode === 32) {
+                    onExpandClick(node, m, e, true)
+                  }
+                }
+              }
+            },
+            [
+              h('div', {
+                class: 'q-focus-helper',
+                tabindex: -1,
+                ref: el => {
+                  blurTargets[m.key] = el
+                }
+              }),
+
+              m.lazy === 'loading'
+                ? h(QSpinner, {
+                    class: 'q-tree__spinner',
+                    color: computedControlColor.value
+                  })
+                : isParent === true
                   ? h(QIcon, {
-                    class: 'q-tree__arrow'
-                    + (m.expanded === true ? ' q-tree__arrow--rotate' : ''),
-                    name: computedIcon.value,
-                    onClick (e) { onExpandClick(node, m, e) }
+                      class:
+                        'q-tree__arrow' +
+                        (m.expanded === true ? ' q-tree__arrow--rotate' : ''),
+                      name: computedIcon.value,
+                      onClick(e) {
+                        onExpandClick(node, m, e)
+                      }
+                    })
+                  : null,
+
+              m.hasTicking === true && m.noTick !== true
+                ? h(QCheckbox, {
+                    class: 'q-tree__tickbox',
+                    modelValue: m.indeterminate === true ? null : m.ticked,
+                    color: computedControlColor.value,
+                    dark: isDark.value,
+                    dense: true,
+                    keepColor: true,
+                    disable: m.tickable !== true,
+                    onKeydown: stopAndPrevent,
+                    'onUpdate:modelValue': v => {
+                      onTickedClick(m, v)
+                    }
                   })
-                  : null
-              ),
-
-          m.hasTicking === true && m.noTick !== true
-            ? h(QCheckbox, {
-              class: 'q-tree__tickbox',
-              modelValue: m.indeterminate === true ? null : m.ticked,
-              color: computedControlColor.value,
-              dark: isDark.value,
-              dense: true,
-              keepColor: true,
-              disable: m.tickable !== true,
-              onKeydown: stopAndPrevent,
-              'onUpdate:modelValue': v => {
-                onTickedClick(m, v)
-              }
-            })
-            : null,
-
-          h('div', {
-            class: 'q-tree__node-header-content col row no-wrap items-center'
-              + (m.selected === true ? selectedColorClass.value : textColorClass.value)
-          }, [
-            header
-              ? header(slotScope)
-              : [
-                  getNodeMedia(node),
-                  h('div', node[ props.labelKey ])
+                : null,
+
+              h(
+                'div',
+                {
+                  class:
+                    'q-tree__node-header-content col row no-wrap items-center' +
+                    (m.selected === true
+                      ? selectedColorClass.value
+                      : textColorClass.value)
+                },
+                [
+                  header
+                    ? header(slotScope)
+                    : [getNodeMedia(node), h('div', node[props.labelKey])]
                 ]
-          ])
-        ]),
-
-        isParent === true
-          ? (
-              props.noTransition === true
-                ? (
-                    m.expanded === true
-                      ? h('div', {
-                        class: 'q-tree__node-collapsible' + textColorClass.value,
-                        key: `${ key }__q`
-                      }, [
-                        body,
-                        h('div', {
-                          class: 'q-tree__children'
-                            + (m.disabled === true ? ' q-tree__node--disabled' : ''),
+              )
+            ]
+          ),
+
+          isParent === true
+            ? props.noTransition === true
+              ? m.expanded === true
+                ? h(
+                    'div',
+                    {
+                      class: 'q-tree__node-collapsible' + textColorClass.value,
+                      key: `${key}__q`
+                    },
+                    [
+                      body,
+                      h(
+                        'div',
+                        {
+                          class:
+                            'q-tree__children' +
+                            (m.disabled === true
+                              ? ' q-tree__node--disabled'
+                              : ''),
                           role: 'group'
-                        }, children)
-                      ])
-                      : null
+                        },
+                        children
+                      )
+                    ]
                   )
-
-                : h(QSlideTransition, {
-                  duration: props.duration,
-                  onShow,
-                  onHide
-                }, () => withDirectives(
-                  h('div', {
-                    class: 'q-tree__node-collapsible' + textColorClass.value,
-                    key: `${ key }__q`
-                  }, [
-                    body,
-                    h('div', {
-                      class: 'q-tree__children'
-                        + (m.disabled === true ? ' q-tree__node--disabled' : ''),
-                      role: 'group'
-                    }, children)
-                  ]),
-                  [ [ vShow, m.expanded ] ]
-                ))
-            )
-          : body
-      ])
+                : null
+              : h(
+                  QSlideTransition,
+                  {
+                    duration: props.duration,
+                    onShow,
+                    onHide
+                  },
+                  () =>
+                    withDirectives(
+                      h(
+                        'div',
+                        {
+                          class:
+                            'q-tree__node-collapsible' + textColorClass.value,
+                          key: `${key}__q`
+                        },
+                        [
+                          body,
+                          h(
+                            'div',
+                            {
+                              class:
+                                'q-tree__children' +
+                                (m.disabled === true
+                                  ? ' q-tree__node--disabled'
+                                  : ''),
+                              role: 'group'
+                            },
+                            children
+                          )
+                        ]
+                      ),
+                      [[vShow, m.expanded]]
+                    )
+                )
+            : body
+        ]
+      )
     }
 
-    function blur (key) {
-      blurTargets[ key ]?.focus()
+    function blur(key) {
+      blurTargets[key]?.focus()
     }
 
-    function onClick (node, meta, e, keyboard) {
-      keyboard !== true && meta.selectable !== false && blur(meta.key)
+    function onClick(node, localMeta, e, keyboard) {
+      if (keyboard !== true && localMeta.selectable !== false) {
+        blur(localMeta.key)
+      }
 
-      if (hasSelection.value && meta.selectable) {
+      if (hasSelection.value && localMeta.selectable) {
         if (props.noSelectionUnset === false) {
-          emit('update:selected', meta.key !== props.selected ? meta.key : null)
-        }
-        else if (meta.key !== props.selected) {
-          emit('update:selected', meta.key === void 0 ? null : meta.key)
+          emit(
+            'update:selected',
+            localMeta.key !== props.selected ? localMeta.key : null
+          )
+        } else if (localMeta.key !== props.selected) {
+          emit(
+            'update:selected',
+            localMeta.key === void 0 ? null : localMeta.key
+          )
         }
-      }
-      else {
-        onExpandClick(node, meta, e, keyboard)
+      } else {
+        onExpandClick(node, localMeta, e, keyboard)
       }
 
       if (typeof node.handler === 'function') {
@@ -650,46 +764,53 @@ export default createComponent({
       }
     }
 
-    function onExpandClick (node, meta, e, keyboard) {
+    function onExpandClick(node, localMeta, e, keyboard) {
       if (e !== void 0) {
         stopAndPrevent(e)
       }
-      keyboard !== true && meta.selectable !== false && blur(meta.key)
-      setExpanded(meta.key, !meta.expanded, node, meta)
+      if (keyboard !== true && localMeta.selectable !== false) {
+        blur(localMeta.key)
+      }
+      setExpanded(localMeta.key, !localMeta.expanded, node, localMeta)
     }
 
-    function onTickedClick (meta, state) {
-      if (meta.indeterminate === true) {
-        state = meta.indeterminateNextState
+    function onTickedClick(localMeta, state) {
+      if (localMeta.indeterminate === true) {
+        state = localMeta.indeterminateNextState
       }
-      if (meta.strictTicking) {
-        setTicked([ meta.key ], state)
-      }
-      else if (meta.leafTicking) {
+      if (localMeta.strictTicking) {
+        setTicked([localMeta.key], state)
+      } else if (localMeta.leafTicking) {
         const keys = []
-        const travel = meta => {
-          if (meta.isParent) {
-            if (state !== true && meta.noTick !== true && meta.tickable === true) {
-              keys.push(meta.key)
+        const travel = nodeMeta => {
+          if (nodeMeta.isParent) {
+            if (
+              state !== true &&
+              nodeMeta.noTick !== true &&
+              nodeMeta.tickable === true
+            ) {
+              keys.push(nodeMeta.key)
             }
-            if (meta.leafTicking === true) {
-              meta.children.forEach(travel)
+            if (nodeMeta.leafTicking === true) {
+              nodeMeta.children.forEach(travel)
             }
-          }
-          else if (
-            meta.noTick !== true
-            && meta.tickable === true
-            && (meta.leafFilteredTicking !== true || meta.matchesFilter === true)
+          } else if (
+            nodeMeta.noTick !== true &&
+            nodeMeta.tickable === true &&
+            (nodeMeta.leafFilteredTicking !== true ||
+              nodeMeta.matchesFilter === true)
           ) {
-            keys.push(meta.key)
+            keys.push(nodeMeta.key)
           }
         }
-        travel(meta)
+        travel(localMeta)
         setTicked(keys, state)
       }
     }
 
-    props.defaultExpandAll === true && expandAll()
+    if (props.defaultExpandAll === true) {
+      expandAll()
+    }
 
     // expose public methods
     Object.assign(proxy, {
@@ -708,16 +829,15 @@ export default createComponent({
       const children = getChildren(props.nodes)
 
       return h(
-        'div', {
+        'div',
+        {
           class: classes.value,
           role: 'tree'
         },
         children.length === 0
-          ? (
-              props.filter
-                ? props.noResultsLabel || $q.lang.tree.noResults
-                : props.noNodesLabel || $q.lang.tree.noNodes
-            )
+          ? props.filter
+            ? props.noResultsLabel || $q.lang.tree.noResults
+            : props.noNodesLabel || $q.lang.tree.noNodes
           : children
       )
     }