@vuetify/nightly 3.0.0-alpha.11 → 3.0.0-beta.0

package/lib/components/VTable/VTable.css

@@ -0,0 +1,143 @@
+.v-table {
+  background: rgb(var(--v-theme-surface));
+  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+}
+.v-table .v-table-divider {
+  border-right: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
+}
+.v-table .v-table__wrapper > table > thead > tr:last-child th {
+  border-bottom: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
+}
+.v-table .v-table__wrapper > table > tbody > tr:not(:last-child) td,
+.v-table .v-table__wrapper > table > tbody > tr:not(:last-child) th {
+  border-bottom: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
+}
+.v-table .v-table__wrapper > table > tbody > tr:hover {
+  background: rgba(var(--v-border-color), var(--v-hover-opacity));
+}
+.v-table .v-table__wrapper > table > tfoot > tr td,
+.v-table .v-table__wrapper > table > tfoot > tr th {
+  border-top: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
+}
+.v-table.v-table--fixed-header thead th {
+  background: rgb(var(--v-theme-surface));
+  box-shadow: inset 0 -1px 0 rgba(var(--v-border-color), var(--v-border-opacity));
+}
+.v-table.v-table--fixed-footer tfoot th,
+.v-table.v-table--fixed-footer tfoot td {
+  background: rgb(var(--v-theme-surface));
+  box-shadow: inset 0 1px 0 rgba(var(--v-border-color), var(--v-border-opacity));
+}
+
+.v-table {
+  border-radius: inherit;
+  line-height: 1.5;
+  max-width: 100%;
+}
+.v-table > .v-table__wrapper > table {
+  width: 100%;
+  border-spacing: 0;
+}
+.v-table > .v-table__wrapper > table > tbody > tr > td,
+.v-table > .v-table__wrapper > table > tbody > tr > th,
+.v-table > .v-table__wrapper > table > thead > tr > td,
+.v-table > .v-table__wrapper > table > thead > tr > th,
+.v-table > .v-table__wrapper > table > tfoot > tr > td,
+.v-table > .v-table__wrapper > table > tfoot > tr > th {
+  padding: 0 16px;
+  transition: height cubic-bezier(0.4, 0, 0.2, 1);
+}
+.v-table > .v-table__wrapper > table > tbody > tr > th,
+.v-table > .v-table__wrapper > table > thead > tr > th,
+.v-table > .v-table__wrapper > table > tfoot > tr > th {
+  user-select: none;
+  font-size: 0.75rem;
+}
+.v-table > .v-table__wrapper > table > tbody > tr > th.v-locale--is-ltr, .v-locale--is-ltr .v-table > .v-table__wrapper > table > tbody > tr > th,
+.v-table > .v-table__wrapper > table > thead > tr > th.v-locale--is-ltr,
+.v-locale--is-ltr .v-table > .v-table__wrapper > table > thead > tr > th,
+.v-table > .v-table__wrapper > table > tfoot > tr > th.v-locale--is-ltr,
+.v-locale--is-ltr .v-table > .v-table__wrapper > table > tfoot > tr > th {
+  text-align: left;
+}
+.v-table > .v-table__wrapper > table > tbody > tr > th.v-locale--is-rtl, .v-locale--is-rtl .v-table > .v-table__wrapper > table > tbody > tr > th,
+.v-table > .v-table__wrapper > table > thead > tr > th.v-locale--is-rtl,
+.v-locale--is-rtl .v-table > .v-table__wrapper > table > thead > tr > th,
+.v-table > .v-table__wrapper > table > tfoot > tr > th.v-locale--is-rtl,
+.v-locale--is-rtl .v-table > .v-table__wrapper > table > tfoot > tr > th {
+  text-align: right;
+}
+.v-table > .v-table__wrapper > table > tbody > tr > td,
+.v-table > .v-table__wrapper > table > thead > tr > td,
+.v-table > .v-table__wrapper > table > tfoot > tr > td {
+  font-size: 0.875rem;
+}
+.v-table--density-default > .v-table__wrapper > table > tbody > tr > th,
+.v-table--density-default > .v-table__wrapper > table > thead > tr > th,
+.v-table--density-default > .v-table__wrapper > table > tfoot > tr > th {
+  height: 48px;
+}
+.v-table--density-default > .v-table__wrapper > table > tbody > tr > td,
+.v-table--density-default > .v-table__wrapper > table > thead > tr > td,
+.v-table--density-default > .v-table__wrapper > table > tfoot > tr > td {
+  height: 48px;
+}
+
+.v-table--density-comfortable > .v-table__wrapper > table > tbody > tr > th,
+.v-table--density-comfortable > .v-table__wrapper > table > thead > tr > th,
+.v-table--density-comfortable > .v-table__wrapper > table > tfoot > tr > th {
+  height: 40px;
+}
+.v-table--density-comfortable > .v-table__wrapper > table > tbody > tr > td,
+.v-table--density-comfortable > .v-table__wrapper > table > thead > tr > td,
+.v-table--density-comfortable > .v-table__wrapper > table > tfoot > tr > td {
+  height: 40px;
+}
+
+.v-table--density-compact > .v-table__wrapper > table > tbody > tr > th,
+.v-table--density-compact > .v-table__wrapper > table > thead > tr > th,
+.v-table--density-compact > .v-table__wrapper > table > tfoot > tr > th {
+  height: 32px;
+}
+.v-table--density-compact > .v-table__wrapper > table > tbody > tr > td,
+.v-table--density-compact > .v-table__wrapper > table > thead > tr > td,
+.v-table--density-compact > .v-table__wrapper > table > tfoot > tr > td {
+  height: 32px;
+}
+
+.v-table__wrapper {
+  border-radius: inherit;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.v-table--has-top > .v-table__wrapper > table > tbody > tr:first-child:hover > td:first-child {
+  border-top-left-radius: 0;
+}
+.v-table--has-top > .v-table__wrapper > table > tbody > tr:first-child:hover > td:last-child {
+  border-top-right-radius: 0;
+}
+
+.v-table--has-bottom > .v-table__wrapper > table > tbody > tr:last-child:hover > td:first-child {
+  border-bottom-left-radius: 0;
+}
+.v-table--has-bottom > .v-table__wrapper > table > tbody > tr:last-child:hover > td:last-child {
+  border-bottom-right-radius: 0;
+}
+
+.v-table--fixed-height .v-table__wrapper {
+  overflow-y: auto;
+}
+
+.v-table--fixed-header > .v-table__wrapper > table > thead > tr > th {
+  border-bottom: 0px !important;
+  position: sticky;
+  top: 0;
+}
+
+.v-table--fixed-footer > .v-table__wrapper > table > tfoot > tr > td,
+.v-table--fixed-footer > .v-table__wrapper > table > tfoot > tr > th {
+  border-top: 0px !important;
+  position: sticky;
+  bottom: 0;
+}

package/lib/components/VTable/VTable.mjs

@@ -0,0 +1,54 @@
+import { createVNode as _createVNode } from "vue";
+// Styles
+import "./VTable.css"; // Composables
+
+import { makeTagProps } from "../../composables/tag.mjs";
+import { makeThemeProps, provideTheme } from "../../composables/theme.mjs"; // Utilities
+
+import { convertToUnit, defineComponent } from "../../util/index.mjs";
+import { makeDensityProps, useDensity } from "../../composables/density.mjs";
+export const VTable = defineComponent({
+  name: 'VTable',
+  props: {
+    fixedHeader: Boolean,
+    fixedFooter: Boolean,
+    height: [Number, String],
+    ...makeDensityProps(),
+    ...makeThemeProps(),
+    ...makeTagProps()
+  },
+
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    const {
+      themeClasses
+    } = provideTheme(props);
+    const {
+      densityClasses
+    } = useDensity(props);
+    return () => {
+      var _slots$top, _slots$default, _slots$bottom;
+
+      return _createVNode(props.tag, {
+        "class": ['v-table', {
+          'v-table--fixed-height': !!props.height,
+          'v-table--fixed-header': props.fixedHeader,
+          'v-table--fixed-footer': props.fixedFooter,
+          'v-table--has-top': !!slots.top,
+          'v-table--has-bottom': !!slots.bottom
+        }, themeClasses.value, densityClasses.value]
+      }, {
+        default: () => [(_slots$top = slots.top) == null ? void 0 : _slots$top.call(slots), slots.default && _createVNode("div", {
+          "class": "v-table__wrapper",
+          "style": {
+            height: convertToUnit(props.height)
+          }
+        }, [_createVNode("table", null, [(_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots)])]), (_slots$bottom = slots.bottom) == null ? void 0 : _slots$bottom.call(slots)]
+      });
+    };
+  }
+
+});
+//# sourceMappingURL=VTable.mjs.map

package/lib/components/VTable/VTable.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/VTable/VTable.tsx"],"names":["makeTagProps","makeThemeProps","provideTheme","convertToUnit","defineComponent","makeDensityProps","useDensity","VTable","name","props","fixedHeader","Boolean","fixedFooter","height","Number","String","setup","slots","themeClasses","densityClasses","top","bottom","value","default"],"mappings":";AAAA;AACA,sB,CAEA;;SACSA,Y;SACAC,c,EAAgBC,Y,uCAEzB;;SACSC,a,EAAeC,e;SACfC,gB,EAAkBC,U;AAE3B,OAAO,MAAMC,MAAM,GAAGH,eAAe,CAAC;AACpCI,EAAAA,IAAI,EAAE,QAD8B;AAGpCC,EAAAA,KAAK,EAAE;AACLC,IAAAA,WAAW,EAAEC,OADR;AAELC,IAAAA,WAAW,EAAED,OAFR;AAGLE,IAAAA,MAAM,EAAE,CAACC,MAAD,EAASC,MAAT,CAHH;AAKL,OAAGV,gBAAgB,EALd;AAML,OAAGJ,cAAc,EANZ;AAOL,OAAGD,YAAY;AAPV,GAH6B;;AAapCgB,EAAAA,KAAK,CAAEP,KAAF,QAAoB;AAAA,QAAX;AAAEQ,MAAAA;AAAF,KAAW;AACvB,UAAM;AAAEC,MAAAA;AAAF,QAAmBhB,YAAY,CAACO,KAAD,CAArC;AACA,UAAM;AAAEU,MAAAA;AAAF,QAAqBb,UAAU,CAACG,KAAD,CAArC;AAEA,WAAO;AAAA;;AAAA;AAAA,iBAEI,CACL,SADK,EAEL;AACE,mCAAyB,CAAC,CAACA,KAAK,CAACI,MADnC;AAEE,mCAAyBJ,KAAK,CAACC,WAFjC;AAGE,mCAAyBD,KAAK,CAACG,WAHjC;AAIE,8BAAoB,CAAC,CAACK,KAAK,CAACG,GAJ9B;AAKE,iCAAuB,CAAC,CAACH,KAAK,CAACI;AALjC,SAFK,EASLH,YAAY,CAACI,KATR,EAULH,cAAc,CAACG,KAVV;AAFJ;AAAA,sCAeDL,KAAK,CAACG,GAfL,qBAeD,gBAAAH,KAAK,CAfJ,EAiBDA,KAAK,CAACM,OAAN;AAAA,mBAEQ,kBAFR;AAAA,mBAGS;AAAEV,YAAAA,MAAM,EAAEV,aAAa,CAACM,KAAK,CAACI,MAAP;AAAvB;AAHT,2DAMMI,KAAK,CAACM,OANZ,qBAMM,oBAAAN,KAAK,CANX,IAjBC,mBA4BDA,KAAK,CAACI,MA5BL,qBA4BD,mBAAAJ,KAAK,CA5BJ;AAAA;AAAA,KAAP;AA+BD;;AAhDmC,CAAD,CAA9B","sourcesContent":["// Styles\nimport './VTable.sass'\n\n// Composables\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\n\n// Utilities\nimport { convertToUnit, defineComponent } from '@/util'\nimport { makeDensityProps, useDensity } from '@/composables/density'\n\nexport const VTable = defineComponent({\n  name: 'VTable',\n\n  props: {\n    fixedHeader: Boolean,\n    fixedFooter: Boolean,\n    height: [Number, String],\n\n    ...makeDensityProps(),\n    ...makeThemeProps(),\n    ...makeTagProps(),\n  },\n\n  setup (props, { slots }) {\n    const { themeClasses } = provideTheme(props)\n    const { densityClasses } = useDensity(props)\n\n    return () => (\n      <props.tag\n        class={[\n          'v-table',\n          {\n            'v-table--fixed-height': !!props.height,\n            'v-table--fixed-header': props.fixedHeader,\n            'v-table--fixed-footer': props.fixedFooter,\n            'v-table--has-top': !!slots.top,\n            'v-table--has-bottom': !!slots.bottom,\n          },\n          themeClasses.value,\n          densityClasses.value,\n        ]}\n      >\n        { slots.top?.() }\n\n        { slots.default && (\n          <div\n            class=\"v-table__wrapper\"\n            style={{ height: convertToUnit(props.height) }}\n          >\n            <table>\n              { slots.default?.() }\n            </table>\n          </div>\n        ) }\n\n        { slots.bottom?.() }\n      </props.tag>\n    )\n  },\n})\n"],"file":"VTable.mjs"}

package/lib/components/VTable/VTable.sass

@@ -0,0 +1,156 @@
+@forward './variables'
+@use '../../styles/tools'
+@use '../../styles/settings'
+@use './variables' as *
+@use './mixins' as *
+
+// Theme
+.v-table
+  @include tools.theme($table-theme...)
+
+  .v-table-divider
+    border-right: $table-border
+
+  .v-table__wrapper
+    > table
+      > thead
+        > tr
+          &:last-child
+            th
+              border-bottom: $table-border
+
+      > tbody
+        > tr
+          &:not(:last-child)
+            td,
+            th
+              border-bottom: $table-border
+
+          &:hover
+            background: $table-hover-color
+
+      > tfoot
+        > tr
+            td,
+            th
+              border-top: $table-border
+
+  &.v-table--fixed-header
+    thead th
+      background: $table-background
+      box-shadow: inset 0 -1px 0 $table-border-color
+
+  &.v-table--fixed-footer
+    tfoot
+      th,
+      td
+        background: $table-background
+        box-shadow: inset 0 1px 0 $table-border-color
+
+// Block
+.v-table
+  border-radius: inherit
+  // Do not inherit line-height
+  line-height: $table-line-height
+  max-width: 100%
+
+  > .v-table__wrapper
+    > table
+      width: 100%
+      border-spacing: 0
+
+      > tbody,
+      > thead,
+      > tfoot
+        > tr
+          > td,
+          > th
+            padding: 0 16px
+            transition: height settings.$standard-easing
+
+          > th
+            user-select: none
+            font-size: $table-header-font-size
+
+            @include tools.ltr()
+              text-align: left
+
+            @include tools.rtl()
+              text-align: right
+
+          > td
+            font-size: $table-row-font-size
+
+  @at-root
+    @include tools.density('v-table', $table-density) using ($modifier)
+      > .v-table__wrapper
+        > table
+          > tbody,
+          > thead,
+          > tfoot
+            > tr
+              > th
+                height: $table-header-height + $modifier
+
+              > td
+                height: $table-row-height + $modifier
+
+// Elements
+.v-table__wrapper
+  border-radius: inherit
+  overflow-x: auto
+  overflow-y: hidden
+
+// Modifiers
+.v-table--has-top
+  > .v-table__wrapper
+    > table
+      > tbody
+        > tr
+          &:first-child
+            &:hover
+              > td
+                &:first-child
+                  border-top-left-radius: 0
+
+                &:last-child
+                  border-top-right-radius: 0
+
+.v-table--has-bottom
+  > .v-table__wrapper
+    > table
+      > tbody
+        > tr
+          &:last-child
+            &:hover
+              > td
+                &:first-child
+                  border-bottom-left-radius: 0
+
+                &:last-child
+                  border-bottom-right-radius: 0
+
+.v-table--fixed-height
+  .v-table__wrapper
+    overflow-y: auto
+
+.v-table--fixed-header
+  > .v-table__wrapper
+    > table
+      > thead
+        > tr
+          > th
+            border-bottom: 0px !important
+            position: sticky
+            top: 0
+
+.v-table--fixed-footer
+  > .v-table__wrapper
+    > table
+      > tfoot
+        > tr
+          > td,
+          > th
+              border-top: 0px !important
+              position: sticky
+              bottom: 0

package/lib/components/VTable/_mixins.scss

@@ -0,0 +1,25 @@
+@use 'sass:map';
+@use './variables' as *;
+
+@mixin table-density ($densities) {
+  @each $density, $properties in $densities {
+    .v-table--density-#{$density} {
+      > .v-table__wrapper {
+        > table {
+          > tbody,
+          > thead,
+          > tfoot {
+            > tr {
+              > th {
+                height: map-get($properties, header)
+              }
+              > td {
+                height: map-get($properties, row)
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/lib/components/VTable/_variables.scss

@@ -0,0 +1,21 @@
+@use 'sass:math';
+@use 'sass:map';
+@use '../../styles/settings';
+@use '../../styles/tools';
+
+$table-background: rgb(var(--v-theme-surface)) !default;
+$table-color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !default;
+$table-density: ('default': 0, 'comfortable': -2, 'compact': -4) !default;
+$table-header-height: 48px !default;
+$table-row-height: $table-header-height !default;
+$table-header-font-size: tools.map-deep-get(settings.$typography, 'caption', 'size') !default;
+$table-row-font-size: tools.map-deep-get(settings.$typography, 'subtitle-2', 'size') !default;
+$table-border-color: rgba(var(--v-border-color), var(--v-border-opacity)) !default;
+$table-border: thin solid $table-border-color !default;
+$table-hover-color: rgba(var(--v-border-color), var(--v-hover-opacity)) !default;
+$table-line-height: 1.5 !default;
+
+$table-theme: (
+  $table-background,
+  $table-color,
+);

package/lib/components/VTable/index.mjs

@@ -0,0 +1,2 @@
+export { VTable } from "./VTable.mjs";
+//# sourceMappingURL=index.mjs.map

package/lib/components/VTable/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/VTable/index.ts"],"names":["VTable"],"mappings":"SAASA,M","sourcesContent":["export { VTable } from './VTable'\n"],"file":"index.mjs"}

package/lib/components/VTabs/VTab.css

@@ -0,0 +1,29 @@
+.v-tab {
+  --v-btn-height: 100%;
+  display: inline-flex;
+  position: relative;
+  max-width: 360px;
+  min-width: 90px;
+}
+.v-slide-group--vertical .v-tab {
+  justify-content: start;
+}
+
+.v-tab__slider {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: 2px;
+  width: 100%;
+  background: currentColor;
+  pointer-events: none;
+  opacity: 0;
+}
+.v-tab--selected .v-tab__slider {
+  opacity: 1;
+}
+.v-slide-group--vertical .v-tab__slider {
+  top: 0;
+  height: 100%;
+  width: 2px;
+}

package/lib/components/VTabs/VTab.mjs

@@ -1,84 +1,128 @@
-// @ts-nocheck
+import { mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
+// Styles
+import "./VTab.css"; // Components
 
-/* eslint-disable */
-// Mixins
-import { factory as GroupableFactory } from "../../mixins/groupable.mjs";
-import Routable from "../../mixins/routable/index.mjs";
-import Themeable from "../../mixins/themeable/index.mjs"; // Utilities
+import { VBtn } from "../VBtn/index.mjs";
+import { VTabsSymbol } from "./VTabs.mjs"; // Composables
 
-import { keyCodes } from "./../../util/helpers.mjs";
-import mixins from "../../util/mixins.mjs";
-const baseMixins = mixins(Routable, // Must be after routable
-// to overwrite activeClass
-GroupableFactory('tabsBar'), Themeable);
-export default baseMixins.extend().extend().extend({
-  name: 'v-tab',
+import { makeGroupItemProps, useGroupItem } from "../../composables/group.mjs";
+import { makeRouterProps } from "../../composables/router.mjs";
+import { makeTagProps } from "../../composables/tag.mjs";
+import { makeThemeProps } from "../../composables/theme.mjs";
+import { provideDefaults } from "../../composables/defaults.mjs";
+import { useTextColor } from "../../composables/color.mjs"; // Utilities
+
+import { computed, ref, toRef, watch } from 'vue';
+import { defineComponent, pick, standardEasing, useRender } from "../../util/index.mjs"; // Types
+
+export const VTab = defineComponent({
+  name: 'VTab',
   props: {
+    fixed: Boolean,
+    icon: [Boolean, String],
+    prependIcon: String,
+    appendIcon: String,
+    stacked: Boolean,
+    title: String,
     ripple: {
-      type: [Boolean, Object],
+      type: Boolean,
       default: true
-    }
-  },
-  data: () => ({
-    proxyClass: 'v-tab--active'
-  }),
-  computed: {
-    classes() {
-      return {
-        'v-tab': true,
-        ...Routable.options.computed.classes.call(this),
-        'v-tab--disabled': this.disabled,
-        ...this.groupClasses
-      };
     },
-
-    value() {
-      let to = this.to || this.href || '';
-
-      if (this.$router && this.to === Object(this.to)) {
-        const resolve = this.$router.resolve(this.to, this.$route, this.append);
-        to = resolve.href;
-      }
-
-      return to.replace('#', '');
-    }
-
-  },
-
-  mounted() {
-    this.onRouteChange();
-  },
-
-  methods: {
-    click(e) {
-      // If user provides an
-      // actual link, do not
-      // prevent default
-      if (this.href && this.href.indexOf('#') > -1) e.preventDefault();
-      if (e.detail) this.$el.blur();
-      this.$emit('click', e);
-      this.to || this.toggle();
-    }
-
+    color: String,
+    sliderColor: String,
+    hideSlider: Boolean,
+    direction: {
+      type: String,
+      default: 'horizontal'
+    },
+    ...makeTagProps(),
+    ...makeRouterProps(),
+    ...makeGroupItemProps({
+      selectedClass: 'v-tab--selected'
+    }),
+    ...makeThemeProps()
   },
 
-  render(h) {
+  setup(props, _ref) {
+    let {
+      slots,
+      attrs
+    } = _ref;
     const {
-      tag,
-      data
-    } = this.generateRouteLink();
-    data.attrs = { ...data.attrs,
-      'aria-selected': String(this.isActive),
-      role: 'tab',
-      tabindex: 0
-    };
-    data.on = { ...data.on,
-      keydown: e => {
-        if (e.keyCode === keyCodes.enter) this.click(e);
-        this.$emit('keydown', e);
+      isSelected,
+      select,
+      selectedClass
+    } = useGroupItem(props, VTabsSymbol);
+    const {
+      textColorClasses: sliderColorClasses,
+      textColorStyles: sliderColorStyles
+    } = useTextColor(props, 'sliderColor');
+    const isHorizontal = computed(() => props.direction === 'horizontal');
+    provideDefaults({
+      VBtn: {
+        block: toRef(props, 'fixed'),
+        maxWidth: computed(() => props.fixed ? 300 : undefined),
+        color: computed(() => isSelected.value ? props.color : undefined),
+        variant: 'text',
+        rounded: 0
+      }
+    }, {
+      scoped: true
+    });
+    const rootEl = ref();
+    const sliderEl = ref();
+    watch(isSelected, isSelected => {
+      if (isSelected) {
+        var _rootEl$value, _rootEl$value$$el$par;
+
+        const prevEl = (_rootEl$value = rootEl.value) == null ? void 0 : (_rootEl$value$$el$par = _rootEl$value.$el.parentElement) == null ? void 0 : _rootEl$value$$el$par.querySelector('.v-tab--selected .v-tab__slider');
+        const nextEl = sliderEl.value;
+        if (!prevEl || !nextEl) return;
+        const color = getComputedStyle(prevEl).color;
+        const prevBox = prevEl.getBoundingClientRect();
+        const nextBox = nextEl.getBoundingClientRect();
+        const xy = isHorizontal.value ? 'x' : 'y';
+        const XY = isHorizontal.value ? 'X' : 'Y';
+        const rightBottom = isHorizontal.value ? 'right' : 'bottom';
+        const widthHeight = isHorizontal.value ? 'width' : 'height';
+        const prevPos = prevBox[xy];
+        const nextPos = nextBox[xy];
+        const delta = prevPos > nextPos ? prevBox[rightBottom] - nextBox[rightBottom] : prevBox[xy] - nextBox[xy];
+        const origin = Math.sign(delta) > 0 ? isHorizontal.value ? 'right' : 'bottom' : Math.sign(delta) < 0 ? isHorizontal.value ? 'left' : 'top' : 'center';
+        const size = Math.abs(delta) + (Math.sign(delta) < 0 ? prevBox[widthHeight] : nextBox[widthHeight]);
+        const scale = size / Math.max(prevBox[widthHeight], nextBox[widthHeight]);
+        const initialScale = prevBox[widthHeight] / nextBox[widthHeight];
+        const sigma = 1.5;
+        nextEl.animate({
+          backgroundColor: [color, ''],
+          transform: [`translate${XY}(${delta}px) scale${XY}(${initialScale})`, `translate${XY}(${delta / sigma}px) scale${XY}(${(scale - 1) / sigma + 1})`, ''],
+          transformOrigin: Array(3).fill(origin)
+        }, {
+          duration: 225,
+          easing: standardEasing
+        });
       }
+    });
+    useRender(() => {
+      const [btnProps] = pick(props, ['href', 'to', 'replace', 'icon', 'stacked', 'prependIcon', 'appendIcon', 'ripple', 'theme', 'disabled']);
+      return _createVNode(VBtn, _mergeProps({
+        "ref": rootEl,
+        "class": ['v-tab', selectedClass.value],
+        "tabindex": isSelected.value ? 0 : -1,
+        "role": "tab",
+        "aria-selected": String(isSelected.value),
+        "onClick": () => !props.disabled && select(!isSelected.value)
+      }, btnProps, attrs), {
+        default: () => [slots.default ? slots.default() : props.title, !props.hideSlider && _createVNode("div", {
+          "ref": sliderEl,
+          "class": ['v-tab__slider', sliderColorClasses.value],
+          "style": sliderColorStyles.value
+        }, null)]
+      });
+    });
+    return {
+      isSelected
     };
-    return h(tag, data, this.$slots.default);
   }
 
 });