quasar 2.18.6 → 2.19.0

package/src/components/tabs/QTabs.json

@@ -4,12 +4,12 @@
   },
 
   "props": {
-    "model-value":{
+    "model-value": {
       "extends": "model-value",
-      "type": [ "Number", "String", "null", "undefined" ],
+      "type": ["Number", "String", "null", "undefined"],
       "desc": "Model of the component defining current panel name; Either use this property (along with a listener for 'update:modelValue' event) OR use v-model directive",
       "required": false,
-      "examples": [ "# v-model=\"selectedTab\"" ]
+      "examples": ["# v-model=\"selectedTab\""]
     },
 
     "vertical": {
@@ -34,12 +34,12 @@
       "type": "String",
       "desc": "Horizontal alignment the tabs within the tabs container",
       "default": "'center'",
-      "values": [ "'left'", "'center'", "'right'", "'justify'" ],
+      "values": ["'left'", "'center'", "'right'", "'justify'"],
       "category": "content"
     },
 
     "breakpoint": {
-      "type": [ "Number", "String" ],
+      "type": ["Number", "String"],
       "desc": "Breakpoint (in pixels) of tabs container width at which the tabs automatically turn to a justify alignment",
       "default": "600",
       "category": "content|behavior"
@@ -66,14 +66,14 @@
     "content-class": {
       "type": "String",
       "desc": "Class definitions to be attributed to the content wrapper",
-      "examples": [ "'my-special-class'" ],
+      "examples": ["'my-special-class'"],
       "category": "style"
     },
 
     "active-class": {
       "type": "String",
       "desc": "The class to be set on the active tab",
-      "examples": [ "'my-active-class'" ],
+      "examples": ["'my-active-class'"],
       "category": "style",
       "addedIn": "v2.1.4"
     },
@@ -81,14 +81,14 @@
     "left-icon": {
       "type": "String",
       "desc": "The name of an icon to replace the default arrow used to scroll through the tabs to the left, when the tabs extend past the width of the tabs container",
-      "examples": [ "'arrow_left'" ],
+      "examples": ["'arrow_left'"],
       "category": "content"
     },
 
     "right-icon": {
       "type": "String",
       "desc": "The name of an icon to replace the default arrow used to scroll through the tabs to the right, when the tabs extend past the width of the tabs container",
-      "examples": [ "'arrow_right'" ],
+      "examples": ["'arrow_right'"],
       "category": "content"
     },
 

package/src/components/tabs/index.js

@@ -2,8 +2,4 @@ import QTabs from './QTabs.js'
 import QTab from './QTab.js'
 import QRouteTab from './QRouteTab.js'
 
-export {
-  QTabs,
-  QTab,
-  QRouteTab
-}
+export { QTabs, QTab, QRouteTab }

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

@@ -1,11 +1,23 @@
-import { h, ref, computed, inject, onBeforeUnmount, onMounted, withDirectives, getCurrentInstance } from 'vue'
+import {
+  h,
+  ref,
+  computed,
+  inject,
+  onBeforeUnmount,
+  onMounted,
+  withDirectives,
+  getCurrentInstance
+} from 'vue'
 
 import QIcon from '../icon/QIcon.js'
 
 import Ripple from '../../directives/ripple/Ripple.js'
 
 import { hMergeSlot } from '../../utils/private.render/render.js'
-import { isKeyCode, shouldIgnoreKey } from '../../utils/private.keyboard/key-composition.js'
+import {
+  isKeyCode,
+  shouldIgnoreKey
+} from '../../utils/private.keyboard/key-composition.js'
 import { tabsKey, emptyRenderFn } from '../../utils/private.symbols/symbols.js'
 import { stopAndPrevent } from '../../utils/event/event.js'
 import uid from '../../utils/uid/uid.js'
@@ -13,34 +25,34 @@ import { isDeepEqual } from '../../utils/is/is.js'
 
 let id = 0
 
-export const useTabEmits = [ 'click', 'keydown' ]
+export const useTabEmits = ['click', 'keydown']
 
 export const useTabProps = {
   icon: String,
-  label: [ Number, String ],
+  label: [Number, String],
 
-  alert: [ Boolean, String ],
+  alert: [Boolean, String],
   alertIcon: String,
 
   name: {
-    type: [ Number, String ],
-    default: () => `t_${ id++ }`
+    type: [Number, String],
+    default: () => `t_${id++}`
   },
 
   noCaps: Boolean,
 
-  tabindex: [ String, Number ],
+  tabindex: [String, Number],
   disable: Boolean,
 
   contentClass: String,
 
   ripple: {
-    type: [ Boolean, Object ],
+    type: [Boolean, Object],
     default: true
   }
 }
 
-export default function (props, slots, emit, routeData) {
+export default function useTab(props, slots, emit, routeData) {
   const $tabs = inject(tabsKey, emptyRenderFn)
   if ($tabs === emptyRenderFn) {
     console.error('QTab/QRouteTab component needs to be child of QTabs')
@@ -53,52 +65,62 @@ export default function (props, slots, emit, routeData) {
   const rootRef = ref(null)
   const tabIndicatorRef = ref(null)
 
-  const ripple = computed(() => (
+  const ripple = computed(() =>
     props.disable === true || 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)
 
-  const classes = computed(() =>
-    'q-tab relative-position self-stretch flex flex-center text-center'
-    + (
-      isActive.value === true
-        ? (
-            ' q-tab--active'
-            + ($tabs.tabProps.value.activeClass ? ' ' + $tabs.tabProps.value.activeClass : '')
-            + ($tabs.tabProps.value.activeColor ? ` text-${ $tabs.tabProps.value.activeColor }` : '')
-            + ($tabs.tabProps.value.activeBgColor ? ` bg-${ $tabs.tabProps.value.activeBgColor }` : '')
-          )
-        : ' q-tab--inactive'
-    )
-    + (props.icon && props.label && $tabs.tabProps.value.inlineLabel === false ? ' q-tab--full' : '')
-    + (props.noCaps === true || $tabs.tabProps.value.noCaps === true ? ' q-tab--no-caps' : '')
-    + (props.disable === true ? ' disabled' : ' q-focusable q-hoverable cursor-pointer')
-    + (routeData !== void 0 ? routeData.linkClass.value : '')
+  const classes = computed(
+    () =>
+      'q-tab relative-position self-stretch flex flex-center text-center' +
+      (isActive.value === true
+        ? ' q-tab--active' +
+          ($tabs.tabProps.value.activeClass
+            ? ' ' + $tabs.tabProps.value.activeClass
+            : '') +
+          ($tabs.tabProps.value.activeColor
+            ? ` text-${$tabs.tabProps.value.activeColor}`
+            : '') +
+          ($tabs.tabProps.value.activeBgColor
+            ? ` bg-${$tabs.tabProps.value.activeBgColor}`
+            : '')
+        : ' q-tab--inactive') +
+      (props.icon && props.label && $tabs.tabProps.value.inlineLabel === false
+        ? ' q-tab--full'
+        : '') +
+      (props.noCaps === true || $tabs.tabProps.value.noCaps === true
+        ? ' q-tab--no-caps'
+        : '') +
+      (props.disable === true
+        ? ' disabled'
+        : ' q-focusable q-hoverable cursor-pointer') +
+      (routeData !== void 0 ? routeData.linkClass.value : '')
   )
 
-  const innerClass = computed(() =>
-    'q-tab__content self-stretch flex-center relative-position q-anchor--skip non-selectable '
-    + ($tabs.tabProps.value.inlineLabel === true ? 'row no-wrap q-tab__content--inline' : 'column')
-    + (props.contentClass !== void 0 ? ` ${ props.contentClass }` : '')
+  const innerClass = computed(
+    () =>
+      'q-tab__content self-stretch flex-center relative-position q-anchor--skip non-selectable ' +
+      ($tabs.tabProps.value.inlineLabel === true
+        ? '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)
-    )
+  const tabIndex = computed(() =>
+    props.disable === true ||
+    $tabs.hasFocus.value === true ||
+    (isActive.value === false && $tabs.hasActiveTab.value === true)
       ? -1
       : props.tabindex || 0
-  ))
+  )
 
-  function onClick (e, keyboard) {
+  function onClick(e, keyboard) {
     if (keyboard !== true && e?.qAvoidFocus !== true) {
       blurTargetRef.value?.focus()
     }
@@ -124,12 +146,16 @@ export default function (props, slots, emit, routeData) {
         // 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
-          ? ($tabs.avoidRouteWatcher = uid())
-          : null
-
-        return routeData.navigateToRouterLink(e, { ...opts, returnRouterError: true })
-          .catch(err => { hardError = err })
+        const reqId =
+          opts.to === void 0 || isDeepEqual(opts.to, props.to) === true
+            ? ($tabs.avoidRouteWatcher = uid())
+            : null
+
+        return routeData
+          .navigateToRouterLink(e, { ...opts, returnRouterError: true })
+          .catch(err => {
+            hardError = err
+          })
           .then(softError => {
             if (reqId === $tabs.avoidRouteWatcher) {
               $tabs.avoidRouteWatcher = false
@@ -138,23 +164,26 @@ export default function (props, slots, emit, routeData) {
               // when navigating to the same route (on all other soft errors,
               // like when navigation was aborted in a nav guard, we don't activate this tab)
               if (
-                hardError === void 0 && (
-                  softError === void 0
-                  || (softError.message?.startsWith('Avoided redundant navigation') === true)
-                )
+                hardError === void 0 &&
+                (softError === void 0 ||
+                  softError.message?.startsWith(
+                    'Avoided redundant navigation'
+                  ) === true)
               ) {
                 $tabs.updateModel({ name: props.name })
               }
             }
 
             if (opts.returnRouterError === true) {
-              return hardError !== void 0 ? Promise.reject(hardError) : softError
+              return hardError !== void 0
+                ? Promise.reject(hardError)
+                : softError
             }
           })
       }
 
       emit('click', e, go)
-      e.defaultPrevented !== true && go()
+      if (e.defaultPrevented !== true) go()
 
       return
     }
@@ -162,69 +191,67 @@ export default function (props, slots, emit, routeData) {
     emit('click', e)
   }
 
-  function onKeydown (e) {
-    if (isKeyCode(e, [ 13, 32 ])) {
+  function onKeydown(e) {
+    if (isKeyCode(e, [13, 32])) {
       onClick(e, true)
-    }
-    else if (
-      shouldIgnoreKey(e) !== true
-      && e.keyCode >= 35
-      && e.keyCode <= 40
-      && e.altKey !== true
-      && e.metaKey !== true
+    } else if (
+      shouldIgnoreKey(e) !== true &&
+      e.keyCode >= 35 &&
+      e.keyCode <= 40 &&
+      e.altKey !== true &&
+      e.metaKey !== true
     ) {
-      $tabs.onKbdNavigate(e.keyCode, proxy.$el) === true && stopAndPrevent(e)
+      if ($tabs.onKbdNavigate(e.keyCode, proxy.$el) === true) stopAndPrevent(e)
     }
 
     emit('keydown', e)
   }
 
-  function getContent () {
-    const
-      narrow = $tabs.tabProps.value.narrowIndicator,
+  function getContent() {
+    const narrow = $tabs.tabProps.value.narrowIndicator,
       content = [],
       indicator = h('div', {
         ref: tabIndicatorRef,
-        class: [
-          'q-tab__indicator',
-          $tabs.tabProps.value.indicatorClass
-        ]
+        class: ['q-tab__indicator', $tabs.tabProps.value.indicatorClass]
       })
 
-    props.icon !== void 0 && content.push(
-      h(QIcon, {
-        class: 'q-tab__icon',
-        name: props.icon
-      })
-    )
-
-    props.label !== void 0 && content.push(
-      h('div', { class: 'q-tab__label' }, props.label)
-    )
-
-    props.alert !== false && content.push(
-      props.alertIcon !== void 0
-        ? h(QIcon, {
-          class: 'q-tab__alert-icon',
-          color: props.alert !== true
-            ? props.alert
-            : void 0,
-          name: props.alertIcon
-        })
-        : h('div', {
-          class: 'q-tab__alert'
-            + (props.alert !== true ? ` text-${ props.alert }` : '')
+    if (props.icon !== void 0) {
+      content.push(
+        h(QIcon, {
+          class: 'q-tab__icon',
+          name: props.icon
         })
-    )
+      )
+    }
+
+    if (props.label !== void 0) {
+      content.push(h('div', { class: 'q-tab__label' }, props.label))
+    }
+
+    if (props.alert !== false) {
+      content.push(
+        props.alertIcon !== void 0
+          ? h(QIcon, {
+              class: 'q-tab__alert-icon',
+              color: props.alert !== true ? props.alert : void 0,
+              name: props.alertIcon
+            })
+          : h('div', {
+              class:
+                'q-tab__alert' +
+                (props.alert !== true ? ` text-${props.alert}` : '')
+            })
+      )
+    }
 
-    narrow === true && content.push(indicator)
+    if (narrow === true) content.push(indicator)
 
     const node = [
       h('div', { class: 'q-focus-helper', tabindex: -1, ref: blurTargetRef }),
       h('div', { class: innerClass.value }, hMergeSlot(slots.default, content))
     ]
 
-    narrow === false && node.push(indicator)
+    if (narrow === false) node.push(indicator)
 
     return node
   }
@@ -244,7 +271,7 @@ export default function (props, slots, emit, routeData) {
     $tabs.registerTab(tabData)
   })
 
-  function renderTab (tag, customData) {
+  function renderTab(tag, customData) {
     const data = {
       ref: rootRef,
       class: classes.value,
@@ -257,10 +284,7 @@ export default function (props, slots, emit, routeData) {
       ...customData
     }
 
-    return withDirectives(
-      h(tag, data, getContent()),
-      [ [ Ripple, ripple.value ] ]
-    )
+    return withDirectives(h(tag, data, getContent()), [[Ripple, ripple.value]])
   }
 
   return { renderTab, $tabs }

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

@@ -5,31 +5,31 @@
     },
 
     "label": {
-      "type": [ "Number", "String" ],
+      "type": ["Number", "String"],
       "desc": "A number or string to label the tab",
-      "examples": [ "'Home'" ],
+      "examples": ["'Home'"],
       "category": "content"
     },
 
     "alert": {
-      "type": [ "Boolean", "String" ],
+      "type": ["Boolean", "String"],
       "desc": "Adds an alert symbol to the tab, notifying the user there are some updates; If its value is not a Boolean, then you can specify a color",
-      "examples": [ "'purple'" ],
+      "examples": ["'purple'"],
       "category": "content"
     },
 
     "alert-icon": {
       "type": "String",
       "desc": "Adds a floating icon to the tab, notifying the user there are some updates; It's displayed only if 'alert' is set; Can use the color specified by 'alert' prop",
-      "examples": [ "'alarm_on'" ],
+      "examples": ["'alarm_on'"],
       "category": "content"
     },
 
     "name": {
-      "type": [ "Number", "String" ],
+      "type": ["Number", "String"],
       "desc": "Panel name",
       "default": "# a random UUID",
-      "examples": [ "'home'", "1" ],
+      "examples": ["'home'", "1"],
       "category": "general"
     },
 
@@ -42,7 +42,7 @@
     "content-class": {
       "type": "String",
       "desc": "Class definitions to be attributed to the content wrapper",
-      "examples": [ "'my-special-class'" ],
+      "examples": ["'my-special-class'"],
       "category": "style"
     },