quasar 2.19.2 → 2.20.0

package/src/components/tabs/use-tab.js

@@ -1,12 +1,12 @@
 import {
-  h,
-  ref,
   computed,
+  getCurrentInstance,
+  h,
   inject,
   onBeforeUnmount,
   onMounted,
-  withDirectives,
-  getCurrentInstance
+  ref,
+  withDirectives
 } from 'vue'
 
 import QIcon from '../icon/QIcon.js'
@@ -18,7 +18,7 @@ import {
   isKeyCode,
   shouldIgnoreKey
 } from '../../utils/private.keyboard/key-composition.js'
-import { tabsKey, emptyRenderFn } from '../../utils/private.symbols/symbols.js'
+import { emptyRenderFn, tabsKey } from '../../utils/private.symbols/symbols.js'
 import { stopAndPrevent } from '../../utils/event/event.js'
 import uid from '../../utils/uid/uid.js'
 import { isDeepEqual } from '../../utils/is/is.js'
@@ -66,12 +66,13 @@ export default function useTab(props, slots, emit, routeData) {
   const tabIndicatorRef = ref(null)
 
   const ripple = computed(() =>
-    props.disable === true || props.ripple === false
+    props.disable || props.ripple === false
       ? false
-      : Object.assign(
-          { keyCodes: [13, 32], early: true },
-          props.ripple === true ? {} : props.ripple
-        )
+      : {
+          keyCodes: [13, 32],
+          early: true,
+          ...(props.ripple === true ? {} : props.ripple)
+        }
   )
 
   const isActive = computed(() => $tabs.currentModel.value === props.name)
@@ -79,7 +80,7 @@ export default function useTab(props, slots, emit, routeData) {
   const classes = computed(
     () =>
       'q-tab relative-position self-stretch flex flex-center text-center' +
-      (isActive.value === true
+      (isActive.value
         ? ' q-tab--active' +
           ($tabs.tabProps.value.activeClass
             ? ' ' + $tabs.tabProps.value.activeClass
@@ -91,13 +92,11 @@ export default function useTab(props, slots, emit, routeData) {
             ? ` bg-${$tabs.tabProps.value.activeBgColor}`
             : '')
         : ' q-tab--inactive') +
-      (props.icon && props.label && $tabs.tabProps.value.inlineLabel === false
+      (props.icon && props.label && !$tabs.tabProps.value.inlineLabel
         ? ' q-tab--full'
         : '') +
-      (props.noCaps === true || $tabs.tabProps.value.noCaps === true
-        ? ' q-tab--no-caps'
-        : '') +
-      (props.disable === true
+      (props.noCaps || $tabs.tabProps.value.noCaps ? ' q-tab--no-caps' : '') +
+      (props.disable
         ? ' disabled'
         : ' q-focusable q-hoverable cursor-pointer') +
       (routeData !== void 0 ? routeData.linkClass.value : '')
@@ -106,30 +105,28 @@ export default function useTab(props, slots, emit, routeData) {
   const innerClass = computed(
     () =>
       'q-tab__content self-stretch flex-center relative-position q-anchor--skip non-selectable ' +
-      ($tabs.tabProps.value.inlineLabel === true
+      ($tabs.tabProps.value.inlineLabel
         ? 'row no-wrap q-tab__content--inline'
         : 'column') +
       (props.contentClass !== void 0 ? ` ${props.contentClass}` : '')
   )
 
   const tabIndex = computed(() =>
-    props.disable === true ||
-    $tabs.hasFocus.value === true ||
-    (isActive.value === false && $tabs.hasActiveTab.value === true)
+    props.disable ||
+    $tabs.hasFocus.value ||
+    (!isActive.value && $tabs.hasActiveTab.value)
       ? -1
       : props.tabindex || 0
   )
 
   function onClick(e, keyboard) {
-    if (keyboard !== true && e?.qAvoidFocus !== true) {
+    if (!keyboard && !e?.qAvoidFocus) {
       blurTargetRef.value?.focus()
     }
 
-    if (props.disable === true) {
+    if (props.disable) {
       // we should hinder native navigation though
-      if (routeData?.hasRouterLink.value === true) {
-        stopAndPrevent(e)
-      }
+      if (routeData?.hasRouterLink.value === true) stopAndPrevent(e)
       return
     }
 
@@ -140,14 +137,14 @@ export default function useTab(props, slots, emit, routeData) {
       return
     }
 
-    if (routeData.hasRouterLink.value === true) {
+    if (routeData.hasRouterLink.value) {
       const go = (opts = {}) => {
         // if requiring to go to another route, then we
         // let the QTabs route watcher do its job,
         // otherwise directly select this
         let hardError
         const reqId =
-          opts.to === void 0 || isDeepEqual(opts.to, props.to) === true
+          opts.to === void 0 || isDeepEqual(opts.to, props.to)
             ? ($tabs.avoidRouteWatcher = uid())
             : null
 
@@ -174,7 +171,7 @@ export default function useTab(props, slots, emit, routeData) {
               }
             }
 
-            if (opts.returnRouterError === true) {
+            if (opts.returnRouterError) {
               return hardError !== void 0
                 ? Promise.reject(hardError)
                 : softError
@@ -183,7 +180,7 @@ export default function useTab(props, slots, emit, routeData) {
       }
 
       emit('click', e, go)
-      if (e.defaultPrevented !== true) go()
+      if (!e.defaultPrevented) go()
 
       return
     }
@@ -195,13 +192,14 @@ export default function useTab(props, slots, emit, routeData) {
     if (isKeyCode(e, [13, 32])) {
       onClick(e, true)
     } else if (
-      shouldIgnoreKey(e) !== true &&
+      !shouldIgnoreKey(e) &&
       e.keyCode >= 35 &&
       e.keyCode <= 40 &&
-      e.altKey !== true &&
-      e.metaKey !== true
+      !e.altKey &&
+      !e.metaKey &&
+      $tabs.onKbdNavigate(e.keyCode, proxy.$el)
     ) {
-      if ($tabs.onKbdNavigate(e.keyCode, proxy.$el) === true) stopAndPrevent(e)
+      stopAndPrevent(e)
     }
 
     emit('keydown', e)
@@ -228,7 +226,7 @@ export default function useTab(props, slots, emit, routeData) {
       content.push(h('div', { class: 'q-tab__label' }, props.label))
     }
 
-    if (props.alert !== false) {
+    if (props.alert) {
       content.push(
         props.alertIcon !== void 0
           ? h(QIcon, {
@@ -244,14 +242,14 @@ export default function useTab(props, slots, emit, routeData) {
       )
     }
 
-    if (narrow === true) content.push(indicator)
+    if (narrow) content.push(indicator)
 
     const node = [
       h('div', { class: 'q-focus-helper', tabindex: -1, ref: blurTargetRef }),
       h('div', { class: innerClass.value }, hMergeSlot(slots.default, content))
     ]
 
-    if (narrow === false) node.push(indicator)
+    if (!narrow) node.push(indicator)
 
     return node
   }
@@ -277,8 +275,8 @@ export default function useTab(props, slots, emit, routeData) {
       class: classes.value,
       tabindex: tabIndex.value,
       role: 'tab',
-      'aria-selected': isActive.value === true ? 'true' : 'false',
-      'aria-disabled': props.disable === true ? 'true' : void 0,
+      'aria-selected': isActive.value ? 'true' : 'false',
+      'aria-disabled': props.disable ? 'true' : void 0,
       onClick,
       onKeydown,
       ...customData