quasar 2.1.0

package/src/components/tabs/QTabs.json

@@ -0,0 +1,141 @@
+{
+  "meta": {
+    "docsUrl": "https://v2.quasar.dev/vue-components/tabs"
+  },
+
+  "props": {
+    "model-value":{
+      "extends": "model-value",
+      "type": [ "Number", "String" ],
+      "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\"" ]
+    },
+
+    "vertical": {
+      "type": "Boolean",
+      "desc": "Use vertical design (tabs one on top of each other rather than one next to the other horizontally)",
+      "category": "content"
+    },
+
+    "outside-arrows": {
+      "type": "Boolean",
+      "desc": "Reserve space for arrows to place them on each side of the tabs (the arrows fade when inactive)",
+      "category": "content"
+    },
+
+    "mobile-arrows": {
+      "type": "Boolean",
+      "desc": "Force display of arrows (if needed) on mobile",
+      "category": "content"
+    },
+
+    "align": {
+      "type": "String",
+      "desc": "Horizontal alignment the tabs within the tabs container",
+      "default": "center",
+      "values": [ "left", "center", "right", "justify" ],
+      "examples": [ "right" ],
+      "category": "content"
+    },
+
+    "breakpoint": {
+      "type": [ "Number", "String" ],
+      "desc": "Breakpoint (in pixels) of tabs container width at which the tabs automatically turn to a justify alignment",
+      "default": 600,
+      "examples": [ ":breakpoint=\"500\"" ],
+      "category": "content|behavior"
+    },
+
+    "active-color": {
+      "extends": "color",
+      "desc": "The color to be attributed to the text of the active tab",
+      "category": "style"
+    },
+
+    "active-bg-color": {
+      "extends": "color",
+      "desc": "The color to be attributed to the background of the active tab",
+      "category": "style"
+    },
+
+    "indicator-color": {
+      "extends": "color",
+      "desc": "The color to be attributed to the indicator (the underline) of the active tab",
+      "category": "style"
+    },
+
+    "content-class": {
+      "type": "String",
+      "desc": "Class definitions to be attributed to the content wrapper",
+      "examples": [ "my-special-class" ],
+      "category": "style"
+    },
+
+    "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" ],
+      "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" ],
+      "category": "content"
+    },
+
+    "stretch": {
+      "type": "Boolean",
+      "desc": "When used on flexbox parent, tabs will stretch to parent's height",
+      "category": "content"
+    },
+
+    "shrink": {
+      "type": "Boolean",
+      "desc": "By default, QTabs is set to grow to the available space; However, you can reverse that with this prop; Useful (and required) when placing the component in a QToolbar",
+      "category": "content"
+    },
+
+    "switch-indicator": {
+      "type": "Boolean",
+      "desc": "Switches the indicator position (on left of tab for vertical mode or above the tab for default horizontal mode)",
+      "category": "content"
+    },
+
+    "narrow-indicator": {
+      "type": "Boolean",
+      "desc": "Allows the indicator to be the same width as the tab's content (text or icon), instead of the whole width of the tab",
+      "category": "content"
+    },
+
+    "inline-label": {
+      "type": "Boolean",
+      "desc": "Allows the text to be inline with the icon, should one be used",
+      "category": "content"
+    },
+
+    "no-caps": {
+      "type": "Boolean",
+      "desc": "Turns off capitalizing all letters within the tab (which is the default)",
+      "category": "content"
+    },
+
+    "dense": {
+      "extends": "dense"
+    }
+  },
+
+  "slots": {
+    "default": {
+      "extends": "default"
+    }
+  },
+
+  "events": {
+    "update:model-value": {
+      "extends": "update:model-value"
+    }
+  }
+}

package/src/components/tabs/QTabs.sass

@@ -0,0 +1,189 @@
+.q-tab
+  padding: 0 16px
+  min-height: 48px
+  transition: color .3s, background-color .3s
+
+  text-transform: uppercase
+  white-space: nowrap
+
+  // for route tabs
+  color: inherit
+  text-decoration: none
+
+  &--full
+    min-height: 72px
+
+  &--no-caps
+    text-transform: none
+
+  &__content
+    height: inherit
+    padding: 4px 0
+    min-width: 40px
+
+    &--inline
+      .q-tab__icon + .q-tab__label
+        padding-left: 8px
+
+    .q-chip--floating
+      top: 0
+      right: -16px
+
+  &__icon
+    width: 24px
+    height: 24px
+    font-size: 24px
+
+  &__label
+    font-size: $button-font-size
+    line-height: $button-line-height
+    font-weight: $button-font-weight
+
+  .q-badge
+    top: 3px
+    right: -12px
+
+  &__alert, &__alert-icon
+    position: absolute
+
+  &__alert
+    top: 7px
+    right: -9px
+    height: 10px
+    width: 10px
+    border-radius: 50%
+    background: currentColor
+
+  &__alert-icon
+    top: 2px
+    right: -12px
+    font-size: 18px
+
+  &__indicator
+    opacity: 0
+    height: 2px
+    background: currentColor
+
+  &--active .q-tab__indicator
+    opacity: 1
+    transform-origin: left #{"/* rtl:ignore */"}
+
+  &--inactive
+    opacity: .85
+
+.q-tabs
+  position: relative
+  transition: color .3s, background-color .3s
+
+  &--scrollable
+    &.q-tabs__arrows--outside
+      &.q-tabs--horizontal
+        padding-left: 36px
+        padding-right: 36px
+
+      &.q-tabs--vertical
+        padding-top: 36px
+        padding-bottom: 36px
+
+      .q-tabs__arrow--faded
+        opacity: 0.3
+        pointer-events: none
+
+    &.q-tabs__arrows--inside
+      .q-tabs__arrow--faded
+        display: none
+
+  &--not-scrollable
+    .q-tabs__arrow
+      display: none
+    .q-tabs__content
+      border-radius: inherit
+
+  &__arrow
+    cursor: pointer
+    font-size: 32px
+    min-width: 36px
+    text-shadow: 0 0 3px #fff, 0 0 1px #fff, 0 0 1px #000
+    transition: opacity .3s
+
+  &__content
+    overflow: hidden
+    flex: 1 1 auto
+
+    &--align
+
+      &-center
+        justify-content: center
+
+      &-right
+        justify-content: flex-end
+
+      &-justify .q-tab
+        flex: 1 1 auto
+
+  &__offset
+    display: none
+
+  &--horizontal .q-tabs__arrow
+    height: 100%
+
+    &--left
+      top: 0
+      left: 0 #{"/* rtl:ignore */"}
+      bottom: 0
+
+    &--right
+      top: 0
+      right: 0 #{"/* rtl:ignore */"}
+      bottom: 0
+
+  &--vertical
+    display: block !important
+    height: 100%
+
+    .q-tabs__content
+      display: block !important
+      height: 100%
+
+    .q-tabs__arrow
+      width: 100%
+      height: 36px
+      text-align: center
+
+      &--left
+        top: 0
+        left: 0
+        right: 0
+
+      &--right
+        left: 0
+        right: 0
+        bottom: 0
+
+    .q-tab
+      padding: 0 8px
+
+    .q-tab__indicator
+      height: unset
+      width: 2px
+
+  &--vertical.q-tabs--not-scrollable
+    .q-tabs__content
+      height: 100%
+
+  &--vertical.q-tabs--dense
+    .q-tab__content
+      min-width: 24px
+
+
+  &--dense
+    .q-tab
+      min-height: 36px
+      &--full
+        min-height: 52px
+
+
+@media (min-width: $breakpoint-lg-min)
+  .q-header, .q-footer
+    .q-tab__content
+      min-width: 128px

package/src/components/tabs/index.js

@@ -0,0 +1,9 @@
+import QTabs from './QTabs.js'
+import QTab from './QTab.js'
+import QRouteTab from './QRouteTab.js'
+
+export {
+  QTabs,
+  QTab,
+  QRouteTab
+}

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

@@ -0,0 +1,199 @@
+import { h, ref, computed, inject, onBeforeUnmount, onMounted } from 'vue'
+
+import QIcon from '../icon/QIcon.js'
+
+import Ripple from '../../directives/Ripple.js'
+
+import { hMergeSlot, hDir } from '../../utils/private/render.js'
+import { isKeyCode } from '../../utils/private/key-composition.js'
+import { tabsKey } from '../../utils/private/symbols.js'
+
+let uid = 0
+
+export const useTabEmits = [ 'click', 'keyup' ]
+
+export const useTabProps = {
+  icon: String,
+  label: [ Number, String ],
+
+  alert: [ Boolean, String ],
+  alertIcon: String,
+
+  name: {
+    type: [ Number, String ],
+    default: () => `t_${ uid++ }`
+  },
+
+  noCaps: Boolean,
+
+  tabindex: [ String, Number ],
+  disable: Boolean,
+
+  contentClass: String,
+
+  ripple: {
+    type: [ Boolean, Object ],
+    default: true
+  }
+}
+
+export default function (props, slots, emit, routerProps) {
+  const $tabs = inject(tabsKey, () => {
+    console.error('QTab/QRouteTab component needs to be child of QTabs')
+  })
+
+  const blurTargetRef = ref(null)
+  const rootRef = ref(null)
+  const tabIndicatorRef = ref(null)
+
+  const isActive = computed(() => $tabs.currentModel.value === props.name)
+
+  const classes = computed(() =>
+    'q-tab relative-position self-stretch flex flex-center text-center'
+    + ` q-tab--${ isActive.value === true ? '' : 'in' }active`
+    + (
+      isActive.value === true
+        ? (
+            ($tabs.tabProps.value.activeColor ? ` text-${ $tabs.tabProps.value.activeColor }` : '')
+            + ($tabs.tabProps.value.activeBgColor ? ` bg-${ $tabs.tabProps.value.activeBgColor }` : '')
+          )
+        : ''
+    )
+    + (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')
+    + (routerProps !== void 0 && routerProps.linkClass.value !== '' ? ` ${ routerProps.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 tabIndex = computed(() => (
+    props.disable === true || isActive.value === true ? -1 : props.tabindex || 0
+  ))
+
+  function onClick (e, keyboard) {
+    keyboard !== true && blurTargetRef.value !== null && blurTargetRef.value.focus()
+
+    if (props.disable !== true) {
+      if (routerProps !== void 0) {
+        if (routerProps.hasLink.value === true) {
+          const go = () => {
+            e.__qNavigate = true
+            routerProps.navigateToLink(e)
+          }
+
+          emit('click', e, go)
+          e.defaultPrevented !== true && go()
+        }
+        else {
+          emit('click', e)
+        }
+      }
+      else {
+        emit('click', e)
+        $tabs.updateModel({ name: props.name, fromRoute: false })
+      }
+    }
+  }
+
+  function onKeyup (e) {
+    isKeyCode(e, 13) === true && onClick(e, true)
+    emit('keyup', e)
+  }
+
+  function getContent () {
+    const
+      narrow = $tabs.tabProps.value.narrowIndicator,
+      content = [],
+      indicator = h('div', {
+        ref: tabIndicatorRef,
+        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 }` : '')
+        })
+    )
+
+    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)
+
+    return node
+  }
+
+  const tabData = {
+    name: computed(() => props.name),
+    rootRef,
+    tabIndicatorRef,
+    routerProps
+  }
+
+  onBeforeUnmount(() => {
+    $tabs.unregisterTab(tabData)
+    $tabs.recalculateScroll()
+  })
+
+  onMounted(() => {
+    $tabs.registerTab(tabData)
+    $tabs.recalculateScroll()
+  })
+
+  function renderTab (tag, customData) {
+    const data = {
+      ref: rootRef,
+      class: classes.value,
+      tabindex: tabIndex.value,
+      role: 'tab',
+      'aria-selected': isActive.value,
+      'aria-disabled': props.disable === true ? 'true' : void 0,
+      onClick,
+      onKeyup,
+      ...customData
+    }
+
+    return hDir(
+      tag,
+      data,
+      getContent(),
+      'main',
+      props.ripple !== false && props.disable === false,
+      () => [ [ Ripple, props.ripple ] ]
+    )
+  }
+
+  return { renderTab, $tabs }
+}