quasar 2.1.0

package/src/components/table/table-row-selection.js

@@ -0,0 +1,87 @@
+import { computed } from 'vue'
+
+export const useTableRowSelectionProps = {
+  selection: {
+    type: String,
+    default: 'none',
+    validator: v => [ 'single', 'multiple', 'none' ].includes(v)
+  },
+  selected: {
+    type: Array,
+    default: () => []
+  }
+}
+
+export const useTableRowSelectionEmits = [ 'update:selected', 'selection' ]
+
+export function useTableRowSelection (props, emit, computedRows, getRowKey) {
+  const selectedKeys = computed(() => {
+    const keys = {}
+    props.selected.map(getRowKey.value).forEach(key => {
+      keys[ key ] = true
+    })
+    return keys
+  })
+
+  const hasSelectionMode = computed(() => {
+    return props.selection !== 'none'
+  })
+
+  const singleSelection = computed(() => {
+    return props.selection === 'single'
+  })
+
+  const multipleSelection = computed(() => {
+    return props.selection === 'multiple'
+  })
+
+  const allRowsSelected = computed(() =>
+    computedRows.value.length > 0 && computedRows.value.every(
+      row => selectedKeys.value[ getRowKey.value(row) ] === true
+    )
+  )
+
+  const someRowsSelected = computed(() =>
+    allRowsSelected.value !== true
+    && computedRows.value.some(row => selectedKeys.value[ getRowKey.value(row) ] === true)
+  )
+
+  const rowsSelectedNumber = computed(() => props.selected.length)
+
+  function isRowSelected (key) {
+    return selectedKeys.value[ key ] === true
+  }
+
+  function clearSelection () {
+    emit('update:selected', [])
+  }
+
+  function updateSelection (keys, rows, added, evt) {
+    emit('selection', { rows, added, keys, evt })
+
+    const payload = singleSelection.value === true
+      ? (added === true ? rows : [])
+      : (
+          added === true
+            ? props.selected.concat(rows)
+            : props.selected.filter(
+              row => keys.includes(getRowKey.value(row)) === false
+            )
+        )
+
+    emit('update:selected', payload)
+  }
+
+  return {
+    hasSelectionMode,
+    singleSelection,
+    multipleSelection,
+    allRowsSelected,
+    someRowsSelected,
+    rowsSelectedNumber,
+
+    isRowSelected,
+    clearSelection,
+    updateSelection
+  }
+}

package/src/components/table/table-sort.js

@@ -0,0 +1,124 @@
+import { computed } from 'vue'
+
+import { sortDate } from '../../utils/private/sort.js'
+import { isNumber, isDate } from '../../utils/private/is.js'
+
+export const useTableSortProps = {
+  sortMethod: Function,
+  binaryStateSort: Boolean,
+  columnSortOrder: {
+    type: String,
+    validator: v => v === 'ad' || v === 'da',
+    default: 'ad'
+  }
+}
+
+export function useTableSort (props, computedPagination, colList, setPagination) {
+  const columnToSort = computed(() => {
+    const { sortBy } = computedPagination.value
+
+    return sortBy
+      ? colList.value.find(def => def.name === sortBy) || null
+      : null
+  })
+
+  const computedSortMethod = computed(() => (
+    props.sortMethod !== void 0
+      ? props.sortMethod
+      : (data, sortBy, descending) => {
+          const col = colList.value.find(def => def.name === sortBy)
+          if (col === void 0 || col.field === void 0) {
+            return data
+          }
+
+          const
+            dir = descending === true ? -1 : 1,
+            val = typeof col.field === 'function'
+              ? v => col.field(v)
+              : v => v[ col.field ]
+
+          return data.sort((a, b) => {
+            let
+              A = val(a),
+              B = val(b)
+
+            if (A === null || A === void 0) {
+              return -1 * dir
+            }
+            if (B === null || B === void 0) {
+              return 1 * dir
+            }
+            if (col.sort !== void 0) {
+              return col.sort(A, B, a, b) * dir
+            }
+            if (isNumber(A) === true && isNumber(B) === true) {
+              return (A - B) * dir
+            }
+            if (isDate(A) === true && isDate(B) === true) {
+              return sortDate(A, B) * dir
+            }
+            if (typeof A === 'boolean' && typeof B === 'boolean') {
+              return (A - B) * dir
+            }
+
+            [ A, B ] = [ A, B ].map(s => (s + '').toLocaleString().toLowerCase())
+
+            return A < B
+              ? -1 * dir
+              : (A === B ? 0 : dir)
+          })
+        }
+  ))
+
+  function sort (col /* String(col name) or Object(col definition) */) {
+    let sortOrder = props.columnSortOrder
+
+    if (col === Object(col)) {
+      if (col.sortOrder) {
+        sortOrder = col.sortOrder
+      }
+
+      col = col.name
+    }
+    else {
+      const def = colList.value.find(def => def.name === col)
+      if (def !== void 0 && def.sortOrder) {
+        sortOrder = def.sortOrder
+      }
+    }
+
+    let { sortBy, descending } = computedPagination.value
+
+    if (sortBy !== col) {
+      sortBy = col
+      descending = sortOrder === 'da'
+    }
+    else if (props.binaryStateSort === true) {
+      descending = !descending
+    }
+    else if (descending === true) {
+      if (sortOrder === 'ad') {
+        sortBy = null
+      }
+      else {
+        descending = false
+      }
+    }
+    else { // ascending
+      if (sortOrder === 'ad') {
+        descending = true
+      }
+      else {
+        sortBy = null
+      }
+    }
+
+    setPagination({ sortBy, descending, page: 1 })
+  }
+
+  return {
+    columnToSort,
+    computedSortMethod,
+    sort
+  }
+}

package/src/components/tabs/QRouteTab.js

@@ -0,0 +1,36 @@
+import { defineComponent, computed, watch } from 'vue'
+
+import useRouterLink, { useRouterLinkProps } from '../../composables/private/use-router-link.js'
+import useTab, { useTabProps, useTabEmits } from './use-tab.js'
+
+export default defineComponent({
+  name: 'QRouteTab',
+
+  props: {
+    ...useRouterLinkProps,
+    ...useTabProps,
+    to: { required: true }
+  },
+
+  emits: useTabEmits,
+
+  setup (props, { slots, emit }) {
+    const rData = useRouterLink()
+
+    const { renderTab, $tabs } = useTab(
+      props,
+      slots,
+      emit,
+      {
+        exact: computed(() => props.exact),
+        ...rData
+      }
+    )
+
+    watch(() => props.name + props.exact + (rData.linkRoute.value || {}).href, () => {
+      $tabs.verifyRouteModel()
+    })
+
+    return () => renderTab(rData.linkTag.value, rData.linkProps.value)
+  }
+})

package/src/components/tabs/QRouteTab.json

@@ -0,0 +1,55 @@
+{
+  "meta": {
+    "docsUrl": "https://v2.quasar.dev/vue-components/tabs"
+  },
+
+  "mixins": [ "components/tabs/QTab", "composables/private/use-router-link" ],
+
+  "props": {
+    "to": {
+      "required": true,
+      "category": "general"
+    }
+  },
+
+  "events": {
+    "click": {
+      "desc": "Emitted when component is clicked (activated)",
+      "params": {
+        "evt": {
+          "type": "Object",
+          "desc": "JS event object; If you want to cancel navigation set synchronously 'evt.navigate' to false",
+          "__exemption": [ "examples" ]
+        },
+        "navigateFn": {
+          "type": "Function",
+          "desc": "When you need to control the time at which the tab should trigger the route navigation then set 'evt.navigate' to false and call this function; Useful if you have async work to be done before the actual route navigation",
+          "params": {
+            "to": {
+              "type": [ "String", "Object" ],
+              "desc": "Equivalent to Vue Router <router-link> 'to' property",
+              "examples": [
+                "/home/dashboard",
+                "{ name: 'my-route-name' }"
+              ],
+              "default": "Tab's 'to' property"
+            },
+
+            "append": {
+              "type": "Boolean",
+              "desc": "Equivalent to Vue Router <router-link> 'append' property",
+              "default": "Tab's 'append' property"
+            },
+
+            "replace": {
+              "type": "Boolean",
+              "desc": "Equivalent to Vue Router <router-link> 'replace' property",
+              "default": "Tab's 'replace' property"
+            }
+          },
+          "returns": null
+        }
+      }
+    }
+  }
+}

package/src/components/tabs/QTab.js

@@ -0,0 +1,16 @@
+import { defineComponent } from 'vue'
+
+import useTab, { useTabProps, useTabEmits } from './use-tab.js'
+
+export default defineComponent({
+  name: 'QTab',
+
+  props: useTabProps,
+
+  emits: useTabEmits,
+
+  setup (props, { slots, emit }) {
+    const { renderTab } = useTab(props, slots, emit)
+    return () => renderTab('div')
+  }
+})

package/src/components/tabs/QTab.json

@@ -0,0 +1,78 @@
+{
+  "meta": {
+    "docsUrl": "https://v2.quasar.dev/vue-components/tabs"
+  },
+
+  "props": {
+    "icon": {
+      "extends": "icon"
+    },
+
+    "label": {
+      "type": [ "Number", "String" ],
+      "desc": "A number or string to label the tab",
+      "examples": [ "Home" ],
+      "category": "content"
+    },
+
+    "alert": {
+      "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": [
+        "alert",
+        "alert=\"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": [
+        "alert-icon=\"alarm_on\""
+      ],
+      "category": "content"
+    },
+
+    "name": {
+      "type": [ "Number", "String" ],
+      "desc": "Panel name",
+      "default": "A random UID",
+      "examples": [
+        "home", ":name=\"1\""
+      ],
+      "category": "general"
+    },
+
+    "no-caps": {
+      "type": "Boolean",
+      "desc": "Turns off capitalizing all letters within the tab (which is the default)",
+      "category": "content"
+    },
+
+    "content-class": {
+      "type": "String",
+      "desc": "Class definitions to be attributed to the content wrapper",
+      "examples": [ "my-special-class" ],
+      "category": "style"
+    },
+
+    "ripple": {
+      "extends": "ripple"
+    },
+
+    "tabindex": {
+      "extends": "tabindex"
+    },
+
+    "disable": {
+      "extends": "disable"
+    }
+  },
+
+  "slots": {
+    "default": {
+      "desc": "Suggestion: QMenu, QTooltip"
+    }
+  }
+}

package/src/components/tabs/QTabs.js

@@ -0,0 +1,465 @@
+import { h, defineComponent, ref, computed, watch, nextTick, onBeforeUnmount, onActivated, getCurrentInstance, provide } from 'vue'
+
+import QIcon from '../icon/QIcon.js'
+import QResizeObserver from '../resize-observer/QResizeObserver.js'
+
+import useTick from '../../composables/private/use-tick.js'
+import useTimeout from '../../composables/private/use-timeout.js'
+
+import { noop } from '../../utils/event.js'
+import { hSlot } from '../../utils/private/render.js'
+import { tabsKey } from '../../utils/private/symbols.js'
+
+function getIndicatorClass (color, top, vertical) {
+  const pos = vertical === true
+    ? [ 'left', 'right' ]
+    : [ 'top', 'bottom' ]
+
+  return `absolute-${ top === true ? pos[ 0 ] : pos[ 1 ] }${ color ? ` text-${ color }` : '' }`
+}
+
+const alignValues = [ 'left', 'center', 'right', 'justify' ]
+
+export default defineComponent({
+  name: 'QTabs',
+
+  props: {
+    modelValue: [ Number, String ],
+
+    align: {
+      type: String,
+      default: 'center',
+      validator: v => alignValues.includes(v)
+    },
+    breakpoint: {
+      type: [ String, Number ],
+      default: 600
+    },
+
+    vertical: Boolean,
+    shrink: Boolean,
+    stretch: Boolean,
+
+    activeColor: String,
+    activeBgColor: String,
+    indicatorColor: String,
+    leftIcon: String,
+    rightIcon: String,
+
+    outsideArrows: Boolean,
+    mobileArrows: Boolean,
+
+    switchIndicator: Boolean,
+
+    narrowIndicator: Boolean,
+    inlineLabel: Boolean,
+    noCaps: Boolean,
+
+    dense: Boolean,
+
+    contentClass: String,
+
+    'onUpdate:modelValue': Function
+  },
+
+  setup (props, { slots, emit }) {
+    const vm = getCurrentInstance()
+    const { proxy: { $q } } = vm
+
+    const { registerTick, prepareTick } = useTick()
+    const { registerTimeout } = useTimeout()
+
+    const rootRef = ref(null)
+    const contentRef = ref(null)
+
+    const currentModel = ref(props.modelValue)
+    const scrollable = ref(false)
+    const leftArrow = ref(true)
+    const rightArrow = ref(false)
+    const justify = ref(false)
+
+    const arrowsEnabled = computed(() =>
+      $q.platform.is.desktop === true || props.mobileArrows === true
+    )
+
+    const tabList = []
+
+    let localFromRoute = false, animateTimer, scrollTimer, unwatchRoute
+    let localUpdateArrows = arrowsEnabled.value === true
+      ? updateArrowsFn
+      : noop
+
+    const tabProps = computed(() => ({
+      activeColor: props.activeColor,
+      activeBgColor: props.activeBgColor,
+      indicatorClass: getIndicatorClass(
+        props.indicatorColor,
+        props.switchIndicator,
+        props.vertical
+      ),
+      narrowIndicator: props.narrowIndicator,
+      inlineLabel: props.inlineLabel,
+      noCaps: props.noCaps
+    }))
+
+    const alignClass = computed(() => {
+      const align = scrollable.value === true
+        ? 'left'
+        : (justify.value === true ? 'justify' : props.align)
+
+      return `q-tabs__content--align-${ align }`
+    })
+
+    const classes = computed(() =>
+      'q-tabs row no-wrap items-center'
+      + ` q-tabs--${ scrollable.value === true ? '' : 'not-' }scrollable`
+      + ` q-tabs--${ props.vertical === true ? 'vertical' : 'horizontal' }`
+      + ` q-tabs__arrows--${ arrowsEnabled.value === true && props.outsideArrows === true ? 'outside' : 'inside' }`
+      + (props.dense === true ? ' q-tabs--dense' : '')
+      + (props.shrink === true ? ' col-shrink' : '')
+      + (props.stretch === true ? ' self-stretch' : '')
+    )
+
+    const innerClass = computed(() =>
+      'q-tabs__content row no-wrap items-center self-stretch hide-scrollbar '
+      + alignClass.value
+      + (props.contentClass !== void 0 ? ` ${ props.contentClass }` : '')
+      + ($q.platform.is.mobile === true ? ' scroll' : '')
+    )
+
+    const domProps = computed(() => (
+      props.vertical === true
+        ? { container: 'height', content: 'offsetHeight', scroll: 'scrollHeight' }
+        : { container: 'width', content: 'offsetWidth', scroll: 'scrollWidth' }
+    ))
+
+    watch(() => props.modelValue, name => {
+      updateModel({ name, setCurrent: true, skipEmit: true })
+    })
+
+    watch(() => props.outsideArrows, () => {
+      nextTick(recalculateScroll())
+    })
+
+    watch(arrowsEnabled, v => {
+      localUpdateArrows = v === true
+        ? updateArrowsFn
+        : noop
+
+      nextTick(recalculateScroll())
+    })
+
+    function updateModel ({ name, setCurrent, skipEmit, fromRoute }) {
+      if (currentModel.value !== name) {
+        skipEmit !== true && emit('update:modelValue', name)
+        if (
+          setCurrent === true
+          || props[ 'onUpdate:modelValue' ] === void 0
+        ) {
+          animate(currentModel.value, name)
+          currentModel.value = name
+        }
+      }
+
+      if (fromRoute !== void 0) {
+        localFromRoute = fromRoute
+      }
+    }
+
+    function recalculateScroll () {
+      registerTick(() => {
+        if (vm.isDeactivated !== true && vm.isUnmounted !== true) {
+          updateContainer({
+            width: rootRef.value.offsetWidth,
+            height: rootRef.value.offsetHeight
+          })
+        }
+      })
+
+      prepareTick()
+    }
+
+    function updateContainer (domSize) {
+      // it can be called faster than component being initialized
+      // so we need to protect against that case
+      // (one example of such case is the docs release notes page)
+      if (domProps.value === void 0 || contentRef.value === null) { return }
+
+      const
+        size = domSize[ domProps.value.container ],
+        scrollSize = Math.min(
+          contentRef.value[ domProps.value.scroll ],
+          Array.prototype.reduce.call(
+            contentRef.value.children,
+            (acc, el) => acc + el[ domProps.value.content ],
+            0
+          )
+        ),
+        scroll = size > 0 && scrollSize > size // when there is no tab, in Chrome, size === 0 and scrollSize === 1
+
+      if (scrollable.value !== scroll) {
+        scrollable.value = scroll
+      }
+
+      // Arrows need to be updated even if the scroll status was already true
+      scroll === true && nextTick(localUpdateArrows)
+
+      const localJustify = size < parseInt(props.breakpoint, 10)
+
+      if (justify.value !== localJustify) {
+        justify.value = localJustify
+      }
+    }
+
+    function animate (oldName, newName) {
+      const
+        oldTab = oldName !== void 0 && oldName !== null && oldName !== ''
+          ? tabList.find(tab => tab.name.value === oldName)
+          : null,
+        newTab = newName !== void 0 && newName !== null && newName !== ''
+          ? tabList.find(tab => tab.name.value === newName)
+          : null
+
+      if (oldTab && newTab) {
+        const
+          oldEl = oldTab.tabIndicatorRef.value,
+          newEl = newTab.tabIndicatorRef.value
+
+        clearTimeout(animateTimer)
+
+        oldEl.style.transition = 'none'
+        oldEl.style.transform = 'none'
+        newEl.style.transition = 'none'
+        newEl.style.transform = 'none'
+
+        const
+          oldPos = oldEl.getBoundingClientRect(),
+          newPos = newEl.getBoundingClientRect()
+
+        newEl.style.transform = props.vertical === true
+          ? `translate3d(0,${ oldPos.top - newPos.top }px,0) scale3d(1,${ newPos.height ? oldPos.height / newPos.height : 1 },1)`
+          : `translate3d(${ oldPos.left - newPos.left }px,0,0) scale3d(${ newPos.width ? oldPos.width / newPos.width : 1 },1,1)`
+
+        // allow scope updates to kick in (QRouteTab needs more time)
+        nextTick(() => {
+          animateTimer = setTimeout(() => {
+            newEl.style.transition = 'transform .25s cubic-bezier(.4, 0, .2, 1)'
+            newEl.style.transform = 'none'
+          }, 70)
+        })
+      }
+
+      if (newTab && scrollable.value === true) {
+        const
+          { left, width, top, height } = contentRef.value.getBoundingClientRect(),
+          newPos = newTab.rootRef.value.getBoundingClientRect()
+
+        let offset = props.vertical === true ? newPos.top - top : newPos.left - left
+
+        if (offset < 0) {
+          contentRef.value[ props.vertical === true ? 'scrollTop' : 'scrollLeft' ] += Math.floor(offset)
+          localUpdateArrows()
+          return
+        }
+
+        offset += props.vertical === true ? newPos.height - height : newPos.width - width
+        if (offset > 0) {
+          contentRef.value[ props.vertical === true ? 'scrollTop' : 'scrollLeft' ] += Math.ceil(offset)
+          localUpdateArrows()
+        }
+      }
+    }
+
+    function updateArrowsFn () {
+      const content = contentRef.value
+      if (content !== null) {
+        const
+          rect = content.getBoundingClientRect(),
+          pos = props.vertical === true ? content.scrollTop : content.scrollLeft
+
+        leftArrow.value = pos > 0
+        rightArrow.value = props.vertical === true
+          ? Math.ceil(pos + rect.height) < content.scrollHeight
+          : Math.ceil(pos + rect.width) < content.scrollWidth
+      }
+    }
+
+    function animScrollTo (value) {
+      stopAnimScroll()
+      scrollTowards(value)
+
+      scrollTimer = setInterval(() => {
+        if (scrollTowards(value)) {
+          stopAnimScroll()
+        }
+      }, 5)
+    }
+
+    function scrollToStart () {
+      animScrollTo(0)
+    }
+
+    function scrollToEnd () {
+      animScrollTo(9999)
+    }
+
+    function stopAnimScroll () {
+      clearInterval(scrollTimer)
+    }
+
+    function scrollTowards (value) {
+      const content = contentRef.value
+      let
+        pos = props.vertical === true ? content.scrollTop : content.scrollLeft,
+        done = false
+
+      const direction = value < pos ? -1 : 1
+
+      pos += direction * 5
+      if (pos < 0) {
+        done = true
+        pos = 0
+      }
+      else if (
+        (direction === -1 && pos <= value)
+        || (direction === 1 && pos >= value)
+      ) {
+        done = true
+        pos = value
+      }
+
+      content[ props.vertical === true ? 'scrollTop' : 'scrollLeft' ] = pos
+      localUpdateArrows()
+
+      return done
+    }
+
+    function getRouteList () {
+      return tabList.filter(tab => tab.routerProps !== void 0 && tab.routerProps.hasLink.value === true)
+    }
+
+    // do not use directly; use verifyRouteModel() instead
+    function updateActiveRoute () {
+      let href = '', name = null, wasActive = localFromRoute
+
+      getRouteList().forEach(tab => {
+        if (
+          tab.routerProps !== void 0
+          && tab.routerProps[ tab.routerProps.exact.value === true ? 'linkIsExactActive' : 'linkIsActive' ].value === true
+          && tab.routerProps.linkRoute.value.href.length > href.length
+        ) {
+          href = tab.routerProps.linkRoute.value.href
+          name = tab.name.value
+        }
+        else if (currentModel.value === tab.name.value) {
+          wasActive = true
+        }
+      })
+
+      if (wasActive === true || name !== null) {
+        updateModel({ name, setCurrent: true, fromRoute: true })
+      }
+    }
+
+    function verifyRouteModel () {
+      registerTimeout(updateActiveRoute)
+    }
+
+    function registerTab (getTab) {
+      tabList.push(getTab)
+
+      const routeList = getRouteList()
+
+      if (routeList.length > 0) {
+        if (unwatchRoute === void 0) {
+          unwatchRoute = watch(() => vm.proxy.$route, verifyRouteModel)
+        }
+
+        verifyRouteModel()
+      }
+    }
+
+    /*
+     * Vue has an aggressive diff (in-place replacement) so we cannot
+     * ensure that the instance getting destroyed is the actual tab
+     * reported here. As a result, we cannot use its name or check
+     * if it's a route one to make the necessary updates. We need to
+     * always check the existing list again and infer the changes.
+     */
+    function unregisterTab (tabData) {
+      tabList.splice(tabList.indexOf(tabData), 1)
+
+      if (unwatchRoute !== void 0) {
+        const routeList = getRouteList()
+
+        if (routeList.length === 0) {
+          unwatchRoute()
+          unwatchRoute = void 0
+        }
+
+        verifyRouteModel()
+      }
+    }
+
+    provide(tabsKey, {
+      currentModel,
+      tabProps,
+
+      registerTab,
+      unregisterTab,
+
+      verifyRouteModel,
+      updateModel,
+      recalculateScroll
+    })
+
+    onBeforeUnmount(() => {
+      clearTimeout(animateTimer)
+      unwatchRoute !== void 0 && unwatchRoute()
+    })
+
+    onActivated(recalculateScroll)
+
+    return () => {
+      const child = [
+        h(QResizeObserver, { onResize: updateContainer }),
+
+        h('div', {
+          ref: contentRef,
+          class: innerClass.value,
+          onScroll: localUpdateArrows
+        }, hSlot(slots.default))
+      ]
+
+      arrowsEnabled.value === true && child.push(
+        h(QIcon, {
+          class: 'q-tabs__arrow q-tabs__arrow--left absolute q-tab__icon'
+            + (leftArrow.value === true ? '' : ' q-tabs__arrow--faded'),
+          name: props.leftIcon || $q.iconSet.tabs[ props.vertical === true ? 'up' : 'left' ],
+          onMousedown: scrollToStart,
+          onTouchstartPassive: scrollToStart,
+          onMouseup: stopAnimScroll,
+          onMouseleave: stopAnimScroll,
+          onTouchend: stopAnimScroll
+        }),
+
+        h(QIcon, {
+          class: 'q-tabs__arrow q-tabs__arrow--right absolute q-tab__icon'
+            + (rightArrow.value === true ? '' : ' q-tabs__arrow--faded'),
+          name: props.rightIcon || $q.iconSet.tabs[ props.vertical === true ? 'down' : 'right' ],
+          onMousedown: scrollToEnd,
+          onTouchstartPassive: scrollToEnd,
+          onMouseup: stopAnimScroll,
+          onMouseleave: stopAnimScroll,
+          onTouchend: stopAnimScroll
+        })
+      )
+
+      return h('div', {
+        ref: rootRef,
+        class: classes.value,
+        role: 'tablist'
+      }, child)
+    }
+  }
+})