@vuetify/nightly 3.0.0-alpha.3 → 3.0.0-beta.2

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,124 @@
-// @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"; // 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 } from "../../composables/group.mjs";
+import { makeRouterProps } from "../../composables/router.mjs";
+import { makeTagProps } from "../../composables/tag.mjs";
+import { makeThemeProps } from "../../composables/theme.mjs";
+import { useTextColor } from "../../composables/color.mjs"; // Utilities
+
+import { computed, ref } from 'vue';
+import { defineComponent, pick, standardEasing, useRender } from "../../util/index.mjs";
+import { VTabsSymbol } from "./shared.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('#', '');
-    }
-
+    color: String,
+    sliderColor: String,
+    hideSlider: Boolean,
+    direction: {
+      type: String,
+      default: 'horizontal'
+    },
+    ...makeTagProps(),
+    ...makeRouterProps(),
+    ...makeGroupItemProps({
+      selectedClass: 'v-tab--selected'
+    }),
+    ...makeThemeProps()
   },
 
-  mounted() {
-    this.onRouteChange();
-  },
+  setup(props, _ref) {
+    let {
+      slots,
+      attrs
+    } = _ref;
+    const {
+      textColorClasses: sliderColorClasses,
+      textColorStyles: sliderColorStyles
+    } = useTextColor(props, 'sliderColor');
+    const isHorizontal = computed(() => props.direction === 'horizontal');
+    const isSelected = ref(false);
+    const rootEl = ref();
+    const sliderEl = ref();
 
-  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();
-    }
+    function updateSlider(_ref2) {
+      let {
+        value
+      } = _ref2;
+      isSelected.value = value;
 
-  },
+      if (value) {
+        var _rootEl$value, _rootEl$value$$el$par;
 
-  render(h) {
-    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);
+        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
+        });
       }
-    };
-    return h(tag, data, this.$slots.default);
+    }
+
+    useRender(() => {
+      const [btnProps] = pick(props, ['href', 'to', 'replace', 'icon', 'stacked', 'prependIcon', 'appendIcon', 'ripple', 'theme', 'disabled', 'selectedClass', 'value', 'color']);
+      return _createVNode(VBtn, _mergeProps({
+        "_as": "VTab",
+        "symbol": VTabsSymbol,
+        "ref": rootEl,
+        "class": ['v-tab'],
+        "tabindex": isSelected.value ? 0 : -1,
+        "role": "tab",
+        "aria-selected": String(isSelected.value),
+        "block": props.fixed,
+        "maxWidth": props.fixed ? 300 : undefined,
+        "variant": "text",
+        "rounded": 0
+      }, btnProps, attrs, {
+        "onGroup:selected": updateSlider
+      }), {
+        default: () => [slots.default ? slots.default() : props.title, !props.hideSlider && _createVNode("div", {
+          "ref": sliderEl,
+          "class": ['v-tab__slider', sliderColorClasses.value],
+          "style": sliderColorStyles.value
+        }, null)]
+      });
+    });
+    return {};
   }
 
 });

package/lib/components/VTabs/VTab.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VTabs/VTab.ts"],"names":["factory","GroupableFactory","Routable","Themeable","keyCodes","mixins","baseMixins","extend","name","props","ripple","type","Boolean","Object","default","data","proxyClass","computed","classes","options","call","disabled","groupClasses","value","to","href","$router","resolve","$route","append","replace","mounted","onRouteChange","methods","click","e","indexOf","preventDefault","detail","$el","blur","$emit","toggle","render","h","tag","generateRouteLink","attrs","String","isActive","role","tabindex","on","keydown","keyCode","enter","$slots"],"mappings":"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","sourcesContent":["// @ts-nocheck\n/* eslint-disable */\n\n// Mixins\nimport { factory as GroupableFactory } from '../../mixins/groupable'\nimport Routable from '../../mixins/routable'\nimport Themeable from '../../mixins/themeable'\n\n// Utilities\nimport { keyCodes } from './../../util/helpers'\nimport mixins from '../../util/mixins'\nimport { ExtractVue } from './../../util/mixins'\n\n// Types\nimport { VNode } from 'vue/types'\n\nconst baseMixins = mixins(\n  Routable,\n  // Must be after routable\n  // to overwrite activeClass\n  GroupableFactory('tabsBar'),\n  Themeable\n)\n\ninterface options extends ExtractVue<typeof baseMixins> {\n  $el: HTMLElement\n}\n\nexport default baseMixins.extend<options>().extend(\n  /* @vue/component */\n).extend({\n  name: 'v-tab',\n\n  props: {\n    ripple: {\n      type: [Boolean, Object],\n      default: true,\n    },\n  },\n\n  data: () => ({\n    proxyClass: 'v-tab--active',\n  }),\n\n  computed: {\n    classes (): object {\n      return {\n        'v-tab': true,\n        ...Routable.options.computed.classes.call(this),\n        'v-tab--disabled': this.disabled,\n        ...this.groupClasses,\n      }\n    },\n    value (): any {\n      let to = this.to || this.href || ''\n\n      if (this.$router &&\n        this.to === Object(this.to)\n      ) {\n        const resolve = this.$router.resolve(\n          this.to,\n          this.$route,\n          this.append\n        )\n\n        to = resolve.href\n      }\n\n      return to.replace('#', '')\n    },\n  },\n\n  mounted () {\n    this.onRouteChange()\n  },\n\n  methods: {\n    click (e: KeyboardEvent | MouseEvent): void {\n      // If user provides an\n      // actual link, do not\n      // prevent default\n      if (this.href &&\n        this.href.indexOf('#') > -1\n      ) e.preventDefault()\n\n      if (e.detail) this.$el.blur()\n\n      this.$emit('click', e)\n\n      this.to || this.toggle()\n    },\n  },\n\n  render (h): VNode {\n    const { tag, data } = this.generateRouteLink()\n\n    data.attrs = {\n      ...data.attrs,\n      'aria-selected': String(this.isActive),\n      role: 'tab',\n      tabindex: 0,\n    }\n    data.on = {\n      ...data.on,\n      keydown: (e: KeyboardEvent) => {\n        if (e.keyCode === keyCodes.enter) this.click(e)\n\n        this.$emit('keydown', e)\n      },\n    }\n\n    return h(tag, data, this.$slots.default)\n  },\n})\n"],"file":"VTab.mjs"}
+{"version":3,"sources":["../../../src/components/VTabs/VTab.tsx"],"names":["VBtn","makeGroupItemProps","makeRouterProps","makeTagProps","makeThemeProps","useTextColor","computed","ref","defineComponent","pick","standardEasing","useRender","VTabsSymbol","VTab","name","props","fixed","Boolean","icon","String","prependIcon","appendIcon","stacked","title","ripple","type","default","color","sliderColor","hideSlider","direction","selectedClass","setup","slots","attrs","textColorClasses","sliderColorClasses","textColorStyles","sliderColorStyles","isHorizontal","isSelected","rootEl","sliderEl","updateSlider","value","prevEl","$el","parentElement","querySelector","nextEl","getComputedStyle","prevBox","getBoundingClientRect","nextBox","xy","XY","rightBottom","widthHeight","prevPos","nextPos","delta","origin","Math","sign","size","abs","scale","max","initialScale","sigma","animate","backgroundColor","transform","transformOrigin","Array","fill","duration","easing","btnProps","undefined"],"mappings":"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","sourcesContent":["// Styles\nimport './VTab.sass'\n\n// Components\nimport { VBtn } from '@/components/VBtn'\n\n// Composables\nimport { makeGroupItemProps } from '@/composables/group'\nimport { makeRouterProps } from '@/composables/router'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps } from '@/composables/theme'\nimport { useTextColor } from '@/composables/color'\n\n// Utilities\nimport { computed, ref } from 'vue'\nimport { defineComponent, pick, standardEasing, useRender } from '@/util'\nimport { VTabsSymbol } from './shared'\n\n// Types\nimport type { PropType } from 'vue'\n\nexport const VTab = defineComponent({\n  name: 'VTab',\n\n  props: {\n    fixed: Boolean,\n    icon: [Boolean, String],\n    prependIcon: String,\n    appendIcon: String,\n\n    stacked: Boolean,\n    title: String,\n\n    ripple: {\n      type: Boolean,\n      default: true,\n    },\n    color: String,\n    sliderColor: String,\n    hideSlider: Boolean,\n\n    direction: {\n      type: String as PropType<'horizontal' | 'vertical'>,\n      default: 'horizontal',\n    },\n\n    ...makeTagProps(),\n    ...makeRouterProps(),\n    ...makeGroupItemProps({\n      selectedClass: 'v-tab--selected',\n    }),\n    ...makeThemeProps(),\n  },\n\n  setup (props, { slots, attrs }) {\n    const { textColorClasses: sliderColorClasses, textColorStyles: sliderColorStyles } = useTextColor(props, 'sliderColor')\n    const isHorizontal = computed(() => props.direction === 'horizontal')\n    const isSelected = ref(false)\n\n    const rootEl = ref<VBtn>()\n    const sliderEl = ref<HTMLElement>()\n\n    function updateSlider ({ value }: { value: boolean }) {\n      isSelected.value = value\n\n      if (value) {\n        const prevEl: HTMLElement | undefined = rootEl.value?.$el.parentElement?.querySelector('.v-tab--selected .v-tab__slider')\n        const nextEl = sliderEl.value\n\n        if (!prevEl || !nextEl) return\n\n        const color = getComputedStyle(prevEl).color\n\n        const prevBox = prevEl.getBoundingClientRect()\n        const nextBox = nextEl.getBoundingClientRect()\n\n        const xy = isHorizontal.value ? 'x' : 'y'\n        const XY = isHorizontal.value ? 'X' : 'Y'\n        const rightBottom = isHorizontal.value ? 'right' : 'bottom'\n        const widthHeight = isHorizontal.value ? 'width' : 'height'\n\n        const prevPos = prevBox[xy]\n        const nextPos = nextBox[xy]\n        const delta = prevPos > nextPos\n          ? prevBox[rightBottom] - nextBox[rightBottom]\n          : prevBox[xy] - nextBox[xy]\n        const origin =\n          Math.sign(delta) > 0 ? (isHorizontal.value ? 'right' : 'bottom')\n          : Math.sign(delta) < 0 ? (isHorizontal.value ? 'left' : 'top')\n          : 'center'\n        const size = Math.abs(delta) + (Math.sign(delta) < 0 ? prevBox[widthHeight] : nextBox[widthHeight])\n        const scale = size / Math.max(prevBox[widthHeight], nextBox[widthHeight])\n        const initialScale = prevBox[widthHeight] / nextBox[widthHeight]\n\n        const sigma = 1.5\n        nextEl.animate({\n          backgroundColor: [color, ''],\n          transform: [\n            `translate${XY}(${delta}px) scale${XY}(${initialScale})`,\n            `translate${XY}(${delta / sigma}px) scale${XY}(${(scale - 1) / sigma + 1})`,\n            '',\n          ],\n          transformOrigin: Array(3).fill(origin),\n        }, {\n          duration: 225,\n          easing: standardEasing,\n        })\n      }\n    }\n\n    useRender(() => {\n      const [btnProps] = pick(props, [\n        'href',\n        'to',\n        'replace',\n        'icon',\n        'stacked',\n        'prependIcon',\n        'appendIcon',\n        'ripple',\n        'theme',\n        'disabled',\n        'selectedClass',\n        'value',\n        'color',\n      ])\n\n      return (\n        <VBtn\n          _as=\"VTab\"\n          symbol={ VTabsSymbol }\n          ref={ rootEl }\n          class={[\n            'v-tab',\n          ]}\n          tabindex={ isSelected.value ? 0 : -1 }\n          role=\"tab\"\n          aria-selected={ String(isSelected.value) }\n          block={ props.fixed }\n          maxWidth={ props.fixed ? 300 : undefined }\n          variant=\"text\"\n          rounded={ 0 }\n          { ...btnProps }\n          { ...attrs }\n          onGroup:selected={ updateSlider }\n        >\n          { slots.default ? slots.default() : props.title }\n          { !props.hideSlider && (\n            <div\n              ref={ sliderEl }\n              class={[\n                'v-tab__slider',\n                sliderColorClasses.value,\n              ]}\n              style={ sliderColorStyles.value }\n            />\n          ) }\n        </VBtn>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VTab = InstanceType<typeof VTab>\n"],"file":"VTab.mjs"}

package/lib/components/VTabs/VTab.sass

@@ -0,0 +1,30 @@
+@forward './variables'
+@use './variables' as *
+
+.v-tab
+  --v-btn-height: 100%
+  display: inline-flex
+  position: relative
+  max-width: $tab-max-width
+  min-width: $tab-min-width
+
+  .v-slide-group--vertical &
+    justify-content: start
+
+.v-tab__slider
+  position: absolute
+  bottom: 0
+  left: 0
+  height: $tab-slider-size
+  width: 100%
+  background: currentColor
+  pointer-events: none
+  opacity: 0
+
+  .v-tab--selected &
+    opacity: 1
+
+  .v-slide-group--vertical &
+    top: 0
+    height: 100%
+    width: $tab-slider-size

package/lib/components/VTabs/VTabs.css

@@ -0,0 +1,71 @@
+.v-tabs {
+  display: flex;
+}
+.v-tabs--density-default {
+  height: 48px;
+}
+.v-tabs--density-default.v-tabs--stacked {
+  height: 72px;
+}
+
+.v-tabs--density-comfortable {
+  height: 44px;
+}
+.v-tabs--density-comfortable.v-tabs--stacked {
+  height: 68px;
+}
+
+.v-tabs--density-compact {
+  height: 36px;
+}
+.v-tabs--density-compact.v-tabs--stacked {
+  height: 60px;
+}
+
+.v-tabs.v-slide-group--vertical {
+  height: auto;
+}
+.v-tabs.v-slide-group--vertical .v-tab {
+  --v-btn-height: 48px;
+}
+
+.v-tabs--align-with-title:not(.v-slide-group--has-affixes) .v-tab:first-child {
+  margin-inline-start: 42px;
+}
+
+.v-tabs--fixed-tabs .v-slide-group__content > *:last-child,
+.v-tabs--centered .v-slide-group__content > *:last-child {
+  margin-inline-end: auto;
+}
+.v-tabs--fixed-tabs .v-slide-group__content > *:first-child,
+.v-tabs--centered .v-slide-group__content > *:first-child {
+  margin-inline-start: auto;
+}
+
+.v-tabs--grow {
+  flex-grow: 1;
+}
+.v-tabs--grow .v-tab {
+  flex: 1 0 auto;
+  max-width: none;
+}
+
+.v-tabs--end .v-tab:first-child {
+  margin-inline-start: auto;
+}
+.v-tabs--end .v-tab:last-child {
+  margin-inline-end: 0;
+}
+
+@media (max-width: 1279.98px) {
+  .v-tabs.v-slide-group--is-overflowing:not(.v-slide-group--has-affixes) .v-tab:first-child {
+    margin-inline-start: 52px;
+  }
+  .v-tabs.v-slide-group--is-overflowing:not(.v-slide-group--has-affixes) .v-tab:last-child {
+    margin-inline-end: 52px;
+  }
+}
+.v-toolbar__content > .v-tabs,
+.v-toolbar__content .v-tab {
+  height: inherit;
+}