@vuetify/nightly 3.0.0-beta.10 → 3.0.0-beta.13

package/lib/components/VSwitch/index.d.ts

@@ -0,0 +1,175 @@
+import * as vue from 'vue';
+import { PropType, JSXComponent } from 'vue';
+
+declare function deepEqual(a: any, b: any): boolean;
+declare type EventProp<T = (...args: any[]) => any> = T | T[];
+declare const EventProp: PropType<EventProp<(...args: any[]) => any>>;
+
+declare type ValidationResult = string | boolean;
+declare type ValidationRule = ValidationResult | PromiseLike<ValidationResult> | ((value: any) => ValidationResult) | ((value: any) => PromiseLike<ValidationResult>);
+
+declare type IconValue = string | JSXComponent;
+declare const IconValue: PropType<IconValue>;
+
+declare const VSwitch: vue.DefineComponent<{
+    density: {
+        type: vue.PropType<"default" | "compact" | "comfortable" | null>;
+        default: string;
+        validator: (v: any) => boolean;
+    };
+    theme: StringConstructor;
+    color: StringConstructor;
+    disabled: BooleanConstructor;
+    error: BooleanConstructor;
+    id: StringConstructor;
+    inline: BooleanConstructor;
+    label: StringConstructor;
+    falseIcon: vue.PropType<IconValue>;
+    trueIcon: vue.PropType<IconValue>;
+    ripple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    multiple: {
+        type: vue.PropType<boolean | null>;
+        default: null;
+    };
+    name: StringConstructor;
+    readonly: BooleanConstructor;
+    trueValue: null;
+    falseValue: null;
+    modelValue: null;
+    type: StringConstructor;
+    value: null;
+    valueComparator: {
+        type: vue.PropType<typeof deepEqual>;
+        default: typeof deepEqual;
+    };
+    errorMessages: {
+        type: vue.PropType<string | string[]>;
+        default: () => never[];
+    };
+    maxErrors: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    rules: {
+        type: vue.PropType<ValidationRule[]>;
+        default: () => never[];
+    };
+    validationValue: null;
+    appendIcon: vue.PropType<IconValue>;
+    prependIcon: vue.PropType<IconValue>;
+    hideDetails: vue.PropType<boolean | "auto">;
+    messages: {
+        type: vue.PropType<string | string[]>;
+        default: () => never[];
+    };
+    direction: {
+        type: vue.PropType<"horizontal" | "vertical">;
+        default: string;
+        validator: (v: any) => boolean;
+    };
+    'onClick:prepend': vue.PropType<EventProp<(...args: any[]) => any>>;
+    'onClick:append': vue.PropType<EventProp<(...args: any[]) => any>>;
+    indeterminate: BooleanConstructor;
+    inset: BooleanConstructor;
+    flat: BooleanConstructor;
+    loading: {
+        type: (StringConstructor | BooleanConstructor)[];
+        default: boolean;
+    };
+}, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+    'update:indeterminate': (val: boolean) => true;
+}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    density: {
+        type: vue.PropType<"default" | "compact" | "comfortable" | null>;
+        default: string;
+        validator: (v: any) => boolean;
+    };
+    theme: StringConstructor;
+    color: StringConstructor;
+    disabled: BooleanConstructor;
+    error: BooleanConstructor;
+    id: StringConstructor;
+    inline: BooleanConstructor;
+    label: StringConstructor;
+    falseIcon: vue.PropType<IconValue>;
+    trueIcon: vue.PropType<IconValue>;
+    ripple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    multiple: {
+        type: vue.PropType<boolean | null>;
+        default: null;
+    };
+    name: StringConstructor;
+    readonly: BooleanConstructor;
+    trueValue: null;
+    falseValue: null;
+    modelValue: null;
+    type: StringConstructor;
+    value: null;
+    valueComparator: {
+        type: vue.PropType<typeof deepEqual>;
+        default: typeof deepEqual;
+    };
+    errorMessages: {
+        type: vue.PropType<string | string[]>;
+        default: () => never[];
+    };
+    maxErrors: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    rules: {
+        type: vue.PropType<ValidationRule[]>;
+        default: () => never[];
+    };
+    validationValue: null;
+    appendIcon: vue.PropType<IconValue>;
+    prependIcon: vue.PropType<IconValue>;
+    hideDetails: vue.PropType<boolean | "auto">;
+    messages: {
+        type: vue.PropType<string | string[]>;
+        default: () => never[];
+    };
+    direction: {
+        type: vue.PropType<"horizontal" | "vertical">;
+        default: string;
+        validator: (v: any) => boolean;
+    };
+    'onClick:prepend': vue.PropType<EventProp<(...args: any[]) => any>>;
+    'onClick:append': vue.PropType<EventProp<(...args: any[]) => any>>;
+    indeterminate: BooleanConstructor;
+    inset: BooleanConstructor;
+    flat: BooleanConstructor;
+    loading: {
+        type: (StringConstructor | BooleanConstructor)[];
+        default: boolean;
+    };
+}>> & {
+    "onUpdate:indeterminate"?: ((val: boolean) => any) | undefined;
+}, {
+    flat: boolean;
+    inline: boolean;
+    error: boolean;
+    direction: "horizontal" | "vertical";
+    inset: boolean;
+    loading: string | boolean;
+    disabled: boolean;
+    multiple: boolean | null;
+    readonly: boolean;
+    indeterminate: boolean;
+    messages: string | string[];
+    density: "default" | "compact" | "comfortable" | null;
+    ripple: boolean;
+    errorMessages: string | string[];
+    maxErrors: string | number;
+    rules: ValidationRule[];
+    valueComparator: typeof deepEqual;
+}>;
+declare type VSwitch = InstanceType<typeof VSwitch>;
+
+export { VSwitch };

package/lib/components/VSystemBar/index.d.ts

@@ -0,0 +1,61 @@
+import * as vue from 'vue';
+
+declare const VSystemBar: vue.DefineComponent<{
+    theme: StringConstructor;
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    rounded: {
+        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    name: {
+        type: StringConstructor;
+    };
+    order: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    absolute: BooleanConstructor;
+    elevation: {
+        type: (StringConstructor | NumberConstructor)[];
+        validator(v: any): boolean;
+    };
+    color: StringConstructor;
+    height: (StringConstructor | NumberConstructor)[];
+    window: BooleanConstructor;
+}, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    theme: StringConstructor;
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    rounded: {
+        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    name: {
+        type: StringConstructor;
+    };
+    order: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    absolute: BooleanConstructor;
+    elevation: {
+        type: (StringConstructor | NumberConstructor)[];
+        validator(v: any): boolean;
+    };
+    color: StringConstructor;
+    height: (StringConstructor | NumberConstructor)[];
+    window: BooleanConstructor;
+}>>, {
+    window: boolean;
+    absolute: boolean;
+    order: string | number;
+    tag: string;
+    rounded: string | number | boolean;
+}>;
+
+export { VSystemBar };

package/lib/components/VTable/index.d.ts

@@ -0,0 +1,39 @@
+import * as vue from 'vue';
+
+declare const VTable: vue.DefineComponent<{
+    theme: StringConstructor;
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    density: {
+        type: vue.PropType<"default" | "compact" | "comfortable" | null>;
+        default: string;
+        validator: (v: any) => boolean;
+    };
+    fixedHeader: BooleanConstructor;
+    fixedFooter: BooleanConstructor;
+    height: (StringConstructor | NumberConstructor)[];
+}, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    theme: StringConstructor;
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    density: {
+        type: vue.PropType<"default" | "compact" | "comfortable" | null>;
+        default: string;
+        validator: (v: any) => boolean;
+    };
+    fixedHeader: BooleanConstructor;
+    fixedFooter: BooleanConstructor;
+    height: (StringConstructor | NumberConstructor)[];
+}>>, {
+    tag: string;
+    density: "default" | "compact" | "comfortable" | null;
+    fixedHeader: boolean;
+    fixedFooter: boolean;
+}>;
+declare type VTable = InstanceType<typeof VTable>;
+
+export { VTable };

package/lib/components/VTabs/VTab.mjs

@@ -105,6 +105,7 @@ export const VTab = defineComponent({
         "tabindex": isSelected.value ? 0 : -1,
         "role": "tab",
         "aria-selected": String(isSelected.value),
+        "active": false,
         "block": props.fixed,
         "maxWidth": props.fixed ? 300 : undefined,
         "variant": "text",

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

@@ -1 +1 @@
-{"version":3,"file":"VTab.mjs","names":["VBtn","IconValue","makeGroupItemProps","makeRouterProps","makeTagProps","makeThemeProps","useTextColor","computed","ref","animate","defineComponent","pick","standardEasing","useRender","VTabsSymbol","VTab","name","props","fixed","Boolean","icon","String","Function","Object","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","backgroundColor","transform","transformOrigin","Array","fill","duration","easing","btnProps","undefined"],"sources":["../../../src/components/VTabs/VTab.tsx"],"sourcesContent":["// Styles\nimport './VTab.sass'\n\n// Components\nimport { VBtn } from '@/components/VBtn'\n\n// Composables\nimport { IconValue } from '@/composables/icons'\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 { animate, defineComponent, pick, standardEasing, useRender } from '@/util'\n\n// Types\nimport { VTabsSymbol } from './shared'\nimport type { PropType } from 'vue'\n\nexport const VTab = defineComponent({\n  name: 'VTab',\n\n  props: {\n    fixed: Boolean,\n    icon: [Boolean, String, Function, Object] as PropType<boolean | IconValue>,\n    prependIcon: IconValue,\n    appendIcon: IconValue,\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        animate(nextEl, {\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"],"mappings":"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"}
+{"version":3,"file":"VTab.mjs","names":["VBtn","IconValue","makeGroupItemProps","makeRouterProps","makeTagProps","makeThemeProps","useTextColor","computed","ref","animate","defineComponent","pick","standardEasing","useRender","VTabsSymbol","VTab","name","props","fixed","Boolean","icon","String","Function","Object","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","backgroundColor","transform","transformOrigin","Array","fill","duration","easing","btnProps","undefined"],"sources":["../../../src/components/VTabs/VTab.tsx"],"sourcesContent":["// Styles\nimport './VTab.sass'\n\n// Components\nimport { VBtn } from '@/components/VBtn'\n\n// Composables\nimport { IconValue } from '@/composables/icons'\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 { animate, defineComponent, pick, standardEasing, useRender } from '@/util'\n\n// Types\nimport { VTabsSymbol } from './shared'\nimport type { PropType } from 'vue'\n\nexport const VTab = defineComponent({\n  name: 'VTab',\n\n  props: {\n    fixed: Boolean,\n    icon: [Boolean, String, Function, Object] as PropType<boolean | IconValue>,\n    prependIcon: IconValue,\n    appendIcon: IconValue,\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        animate(nextEl, {\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          active={ false }\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"],"mappings":"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"}

package/lib/components/VTabs/index.d.ts

@@ -0,0 +1,178 @@
+import * as vue from 'vue';
+import { PropType, JSXComponent } from 'vue';
+import * as vue_router from 'vue-router';
+
+declare type TabItem = string | Record<string, any>;
+declare const VTabs: vue.DefineComponent<{
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    density: {
+        type: PropType<"default" | "compact" | "comfortable" | null>;
+        default: string;
+        validator: (v: any) => boolean;
+    };
+    alignWithTitle: BooleanConstructor;
+    color: StringConstructor;
+    direction: {
+        type: PropType<"horizontal" | "vertical">;
+        default: string;
+    };
+    fixedTabs: BooleanConstructor;
+    items: {
+        type: PropType<TabItem[]>;
+        default: () => never[];
+    };
+    stacked: BooleanConstructor;
+    bgColor: StringConstructor;
+    centered: BooleanConstructor;
+    grow: BooleanConstructor;
+    height: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    hideSlider: BooleanConstructor;
+    optional: BooleanConstructor;
+    end: BooleanConstructor;
+    sliderColor: StringConstructor;
+    modelValue: null;
+}, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+    'update:modelValue': (v: unknown) => true;
+}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    density: {
+        type: PropType<"default" | "compact" | "comfortable" | null>;
+        default: string;
+        validator: (v: any) => boolean;
+    };
+    alignWithTitle: BooleanConstructor;
+    color: StringConstructor;
+    direction: {
+        type: PropType<"horizontal" | "vertical">;
+        default: string;
+    };
+    fixedTabs: BooleanConstructor;
+    items: {
+        type: PropType<TabItem[]>;
+        default: () => never[];
+    };
+    stacked: BooleanConstructor;
+    bgColor: StringConstructor;
+    centered: BooleanConstructor;
+    grow: BooleanConstructor;
+    height: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    hideSlider: BooleanConstructor;
+    optional: BooleanConstructor;
+    end: BooleanConstructor;
+    sliderColor: StringConstructor;
+    modelValue: null;
+}>> & {
+    "onUpdate:modelValue"?: ((v: unknown) => any) | undefined;
+}, {
+    optional: boolean;
+    height: string | number;
+    end: boolean;
+    direction: "horizontal" | "vertical";
+    tag: string;
+    items: TabItem[];
+    density: "default" | "compact" | "comfortable" | null;
+    centered: boolean;
+    stacked: boolean;
+    grow: boolean;
+    hideSlider: boolean;
+    alignWithTitle: boolean;
+    fixedTabs: boolean;
+}>;
+declare type VTabs = InstanceType<typeof VTabs>;
+
+declare type IconValue = string | JSXComponent;
+declare const IconValue: PropType<IconValue>;
+
+declare const VTab: vue.DefineComponent<{
+    theme: StringConstructor;
+    value: null;
+    disabled: BooleanConstructor;
+    selectedClass: {
+        type: PropType<string>;
+        default: string;
+    };
+    href: StringConstructor;
+    replace: BooleanConstructor;
+    to: PropType<vue_router.RouteLocationRaw>;
+    exact: BooleanConstructor;
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    fixed: BooleanConstructor;
+    icon: PropType<boolean | IconValue>;
+    prependIcon: PropType<IconValue>;
+    appendIcon: PropType<IconValue>;
+    stacked: BooleanConstructor;
+    title: StringConstructor;
+    ripple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    color: StringConstructor;
+    sliderColor: StringConstructor;
+    hideSlider: BooleanConstructor;
+    direction: {
+        type: PropType<"horizontal" | "vertical">;
+        default: string;
+    };
+}, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    theme: StringConstructor;
+    value: null;
+    disabled: BooleanConstructor;
+    selectedClass: {
+        type: PropType<string>;
+        default: string;
+    };
+    href: StringConstructor;
+    replace: BooleanConstructor;
+    to: PropType<vue_router.RouteLocationRaw>;
+    exact: BooleanConstructor;
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    fixed: BooleanConstructor;
+    icon: PropType<boolean | IconValue>;
+    prependIcon: PropType<IconValue>;
+    appendIcon: PropType<IconValue>;
+    stacked: BooleanConstructor;
+    title: StringConstructor;
+    ripple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    color: StringConstructor;
+    sliderColor: StringConstructor;
+    hideSlider: BooleanConstructor;
+    direction: {
+        type: PropType<"horizontal" | "vertical">;
+        default: string;
+    };
+}>>, {
+    replace: boolean;
+    fixed: boolean;
+    exact: boolean;
+    direction: "horizontal" | "vertical";
+    disabled: boolean;
+    tag: string;
+    selectedClass: string;
+    stacked: boolean;
+    ripple: boolean;
+    hideSlider: boolean;
+}>;
+declare type VTab = InstanceType<typeof VTab>;
+
+export { VTab, VTabs };

package/lib/components/VTextField/VTextField.css

@@ -1,6 +1,7 @@
 /* region BLOCK */
 .v-text-field input {
   color: inherit;
+  opacity: 0;
   flex: 1;
   transition: 0.15s opacity cubic-bezier(0.4, 0, 0.2, 1);
   min-width: 0;
@@ -26,9 +27,7 @@
   padding-inline-start: 16px;
   padding-inline-end: 16px;
 }
-.v-text-field .v-field--has-label input {
-  opacity: 0;
-}
+.v-text-field .v-field--no-label input,
 .v-text-field .v-field--active input {
   opacity: 1;
 }

package/lib/components/VTextField/VTextField.sass

@@ -6,6 +6,7 @@
 .v-text-field
   input
     color: inherit
+    opacity: 0
     flex: $text-field-input-flex
     transition: $text-field-input-transition
     min-width: 0
@@ -32,10 +33,7 @@
     padding-inline-start: $text-field-details-padding-inline
     padding-inline-end: $text-field-details-padding-inline
 
-  .v-field--has-label
-    input
-      opacity: 0
-
+  .v-field--no-label,
   .v-field--active
     input
       opacity: 1