@vuetify/nightly 3.8.7-master.2025-06-02 → 3.8.8-dev.2025-06-04

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

@@ -145,14 +145,18 @@ export declare const makeVSwitchProps: <Defaults extends {
         default: boolean;
     }, "type" | "default"> & {
         type: import("vue").PropType<unknown extends Defaults["ripple"] ? boolean | {
-            class: string;
+            class?: string;
+            keys?: number[];
         } | undefined : boolean | {
-            class: string;
+            class?: string;
+            keys?: number[];
         } | Defaults["ripple"] | undefined>;
         default: unknown extends Defaults["ripple"] ? boolean | {
-            class: string;
+            class?: string;
+            keys?: number[];
         } | undefined : NonNullable<boolean | {
-            class: string;
+            class?: string;
+            keys?: number[];
         } | undefined> | Defaults["ripple"];
     };
     multiple: unknown extends Defaults["multiple"] ? {
@@ -391,7 +395,8 @@ export declare const VSwitch: {
         valueComparator: typeof import("../../util/index.js").deepEqual;
         density: import("../../composables/density.js").Density;
         ripple: boolean | {
-            class: string;
+            class?: string;
+            keys?: number[];
         } | undefined;
         centerAffix: boolean;
         glow: boolean;
@@ -415,6 +420,7 @@ export declare const VSwitch: {
         baseColor?: string | undefined;
         prependIcon?: IconValue | undefined;
         appendIcon?: IconValue | undefined;
+        iconColor?: string | boolean | undefined;
         defaultsTarget?: string | undefined;
         falseIcon?: IconValue | undefined;
         trueIcon?: IconValue | undefined;
@@ -422,7 +428,6 @@ export declare const VSwitch: {
         falseValue?: any;
         'onClick:append'?: ((args_0: MouseEvent) => void) | undefined;
         'onClick:prepend'?: ((args_0: MouseEvent) => void) | undefined;
-        iconColor?: string | boolean | undefined;
         hint?: string | undefined;
         hideDetails?: boolean | "auto" | undefined;
     } & {
@@ -452,7 +457,8 @@ export declare const VSwitch: {
         valueComparator: typeof import("../../util/index.js").deepEqual;
         density: import("../../composables/density.js").Density;
         ripple: boolean | {
-            class: string;
+            class?: string;
+            keys?: number[];
         } | undefined;
         centerAffix: boolean;
         glow: boolean;
@@ -505,7 +511,8 @@ export declare const VSwitch: {
         valueComparator: typeof import("../../util/index.js").deepEqual;
         density: import("../../composables/density.js").Density;
         ripple: boolean | {
-            class: string;
+            class?: string;
+            keys?: number[];
         } | undefined;
         centerAffix: boolean;
         glow: boolean;
@@ -529,6 +536,7 @@ export declare const VSwitch: {
         baseColor?: string | undefined;
         prependIcon?: IconValue | undefined;
         appendIcon?: IconValue | undefined;
+        iconColor?: string | boolean | undefined;
         defaultsTarget?: string | undefined;
         falseIcon?: IconValue | undefined;
         trueIcon?: IconValue | undefined;
@@ -536,7 +544,6 @@ export declare const VSwitch: {
         falseValue?: any;
         'onClick:append'?: ((args_0: MouseEvent) => void) | undefined;
         'onClick:prepend'?: ((args_0: MouseEvent) => void) | undefined;
-        iconColor?: string | boolean | undefined;
         hint?: string | undefined;
         hideDetails?: boolean | "auto" | undefined;
     } & {
@@ -562,7 +569,8 @@ export declare const VSwitch: {
         valueComparator: typeof import("../../util/index.js").deepEqual;
         density: import("../../composables/density.js").Density;
         ripple: boolean | {
-            class: string;
+            class?: string;
+            keys?: number[];
         } | undefined;
         centerAffix: boolean;
         glow: boolean;
@@ -592,7 +600,8 @@ export declare const VSwitch: {
     valueComparator: typeof import("../../util/index.js").deepEqual;
     density: import("../../composables/density.js").Density;
     ripple: boolean | {
-        class: string;
+        class?: string;
+        keys?: number[];
     } | undefined;
     centerAffix: boolean;
     glow: boolean;
@@ -616,6 +625,7 @@ export declare const VSwitch: {
     baseColor?: string | undefined;
     prependIcon?: IconValue | undefined;
     appendIcon?: IconValue | undefined;
+    iconColor?: string | boolean | undefined;
     defaultsTarget?: string | undefined;
     falseIcon?: IconValue | undefined;
     trueIcon?: IconValue | undefined;
@@ -623,7 +633,6 @@ export declare const VSwitch: {
     falseValue?: any;
     'onClick:append'?: ((args_0: MouseEvent) => void) | undefined;
     'onClick:prepend'?: ((args_0: MouseEvent) => void) | undefined;
-    iconColor?: string | boolean | undefined;
     hint?: string | undefined;
     hideDetails?: boolean | "auto" | undefined;
 } & {
@@ -653,7 +662,8 @@ export declare const VSwitch: {
     valueComparator: typeof import("../../util/index.js").deepEqual;
     density: import("../../composables/density.js").Density;
     ripple: boolean | {
-        class: string;
+        class?: string;
+        keys?: number[];
     } | undefined;
     centerAffix: boolean;
     glow: boolean;

package/lib/components/VTable/VTable.css

@@ -37,6 +37,12 @@
   width: 100%;
   height: 100%;
 }
+.v-table.v-table--striped-even > .v-table__wrapper > table > tbody > tr:nth-child(even) {
+  background-color: rgba(var(--v-border-color), var(--v-hover-opacity));
+}
+.v-table.v-table--striped-odd > .v-table__wrapper > table > tbody > tr:nth-child(odd) {
+  background-color: rgba(var(--v-border-color), var(--v-hover-opacity));
+}
 .v-table.v-table--fixed-header > .v-table__wrapper > table > thead > tr > th {
   background: rgb(var(--v-theme-surface));
   box-shadow: inset 0 -1px 0 rgba(var(--v-border-color), var(--v-border-opacity));

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

@@ -1,9 +1,11 @@
+import type { PropType } from 'vue';
 export type VTableSlots = {
     default: never;
     top: never;
     bottom: never;
     wrapper: never;
 };
+export type Striped = null | 'odd' | 'even';
 export declare const makeVTableProps: <Defaults extends {
     theme?: unknown;
     tag?: unknown;
@@ -14,69 +16,83 @@ export declare const makeVTableProps: <Defaults extends {
     fixedFooter?: unknown;
     height?: unknown;
     hover?: unknown;
+    striped?: unknown;
 } = {}>(defaults?: Defaults | undefined) => {
     theme: unknown extends Defaults["theme"] ? StringConstructor : {
-        type: import("vue").PropType<unknown extends Defaults["theme"] ? string : string | Defaults["theme"]>;
+        type: PropType<unknown extends Defaults["theme"] ? string : string | Defaults["theme"]>;
         default: unknown extends Defaults["theme"] ? string : string | Defaults["theme"];
     };
     tag: unknown extends Defaults["tag"] ? {
-        type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
+        type: PropType<string | import("../../util/index.js").JSXComponent>;
         default: string;
     } : Omit<{
-        type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
+        type: PropType<string | import("../../util/index.js").JSXComponent>;
         default: string;
     }, "type" | "default"> & {
-        type: import("vue").PropType<unknown extends Defaults["tag"] ? string | import("../../util/index.js").JSXComponent : string | import("../../util/index.js").JSXComponent | Defaults["tag"]>;
+        type: PropType<unknown extends Defaults["tag"] ? string | import("../../util/index.js").JSXComponent : string | import("../../util/index.js").JSXComponent | Defaults["tag"]>;
         default: unknown extends Defaults["tag"] ? string | import("../../util/index.js").JSXComponent : NonNullable<string | import("../../util/index.js").JSXComponent> | Defaults["tag"];
     };
     density: unknown extends Defaults["density"] ? {
-        type: import("vue").PropType<import("../../composables/density.js").Density>;
+        type: PropType<import("../../composables/density.js").Density>;
         default: string;
         validator: (v: any) => boolean;
     } : Omit<{
-        type: import("vue").PropType<import("../../composables/density.js").Density>;
+        type: PropType<import("../../composables/density.js").Density>;
         default: string;
         validator: (v: any) => boolean;
     }, "type" | "default"> & {
-        type: import("vue").PropType<unknown extends Defaults["density"] ? import("../../composables/density.js").Density : import("../../composables/density.js").Density | Defaults["density"]>;
+        type: PropType<unknown extends Defaults["density"] ? import("../../composables/density.js").Density : import("../../composables/density.js").Density | Defaults["density"]>;
         default: unknown extends Defaults["density"] ? import("../../composables/density.js").Density : NonNullable<import("../../composables/density.js").Density> | Defaults["density"];
     };
-    class: unknown extends Defaults["class"] ? import("vue").PropType<any> : {
-        type: import("vue").PropType<unknown extends Defaults["class"] ? any : any>;
+    class: unknown extends Defaults["class"] ? PropType<any> : {
+        type: PropType<unknown extends Defaults["class"] ? any : any>;
         default: unknown extends Defaults["class"] ? any : any;
     };
     style: unknown extends Defaults["style"] ? {
-        type: import("vue").PropType<import("vue").StyleValue>;
+        type: PropType<import("vue").StyleValue>;
         default: null;
     } : Omit<{
-        type: import("vue").PropType<import("vue").StyleValue>;
+        type: PropType<import("vue").StyleValue>;
         default: null;
     }, "type" | "default"> & {
-        type: import("vue").PropType<unknown extends Defaults["style"] ? import("vue").StyleValue : import("vue").StyleValue | Defaults["style"]>;
+        type: PropType<unknown extends Defaults["style"] ? import("vue").StyleValue : import("vue").StyleValue | Defaults["style"]>;
         default: unknown extends Defaults["style"] ? import("vue").StyleValue : NonNullable<import("vue").StyleValue> | Defaults["style"];
     };
     fixedHeader: unknown extends Defaults["fixedHeader"] ? BooleanConstructor : {
-        type: import("vue").PropType<unknown extends Defaults["fixedHeader"] ? boolean : boolean | Defaults["fixedHeader"]>;
+        type: PropType<unknown extends Defaults["fixedHeader"] ? boolean : boolean | Defaults["fixedHeader"]>;
         default: unknown extends Defaults["fixedHeader"] ? boolean : boolean | Defaults["fixedHeader"];
     };
     fixedFooter: unknown extends Defaults["fixedFooter"] ? BooleanConstructor : {
-        type: import("vue").PropType<unknown extends Defaults["fixedFooter"] ? boolean : boolean | Defaults["fixedFooter"]>;
+        type: PropType<unknown extends Defaults["fixedFooter"] ? boolean : boolean | Defaults["fixedFooter"]>;
         default: unknown extends Defaults["fixedFooter"] ? boolean : boolean | Defaults["fixedFooter"];
     };
     height: unknown extends Defaults["height"] ? (StringConstructor | NumberConstructor)[] : {
-        type: import("vue").PropType<unknown extends Defaults["height"] ? string | number : string | number | Defaults["height"]>;
+        type: PropType<unknown extends Defaults["height"] ? string | number : string | number | Defaults["height"]>;
         default: unknown extends Defaults["height"] ? string | number : NonNullable<string | number> | Defaults["height"];
     };
     hover: unknown extends Defaults["hover"] ? BooleanConstructor : {
-        type: import("vue").PropType<unknown extends Defaults["hover"] ? boolean : boolean | Defaults["hover"]>;
+        type: PropType<unknown extends Defaults["hover"] ? boolean : boolean | Defaults["hover"]>;
         default: unknown extends Defaults["hover"] ? boolean : boolean | Defaults["hover"];
     };
+    striped: unknown extends Defaults["striped"] ? {
+        type: PropType<Striped>;
+        default: null;
+        validator: (v: any) => boolean;
+    } : Omit<{
+        type: PropType<Striped>;
+        default: null;
+        validator: (v: any) => boolean;
+    }, "type" | "default"> & {
+        type: PropType<unknown extends Defaults["striped"] ? Striped : Striped | Defaults["striped"]>;
+        default: unknown extends Defaults["striped"] ? Striped : Defaults["striped"] | NonNullable<Striped>;
+    };
 };
 export declare const VTable: {
     new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
         style: import("vue").StyleValue;
         tag: string | import("../../util/index.js").JSXComponent;
         density: import("../../composables/density.js").Density;
+        striped: Striped;
         hover: boolean;
         fixedHeader: boolean;
         fixedFooter: boolean;
@@ -106,6 +122,7 @@ export declare const VTable: {
         style: import("vue").StyleValue;
         tag: string | import("../../util/index.js").JSXComponent;
         density: import("../../composables/density.js").Density;
+        striped: Striped;
         hover: boolean;
         fixedHeader: boolean;
         fixedFooter: boolean;
@@ -125,6 +142,7 @@ export declare const VTable: {
         style: import("vue").StyleValue;
         tag: string | import("../../util/index.js").JSXComponent;
         density: import("../../composables/density.js").Density;
+        striped: Striped;
         hover: boolean;
         fixedHeader: boolean;
         fixedFooter: boolean;
@@ -154,6 +172,7 @@ export declare const VTable: {
         style: import("vue").StyleValue;
         tag: string | import("../../util/index.js").JSXComponent;
         density: import("../../composables/density.js").Density;
+        striped: Striped;
         hover: boolean;
         fixedHeader: boolean;
         fixedFooter: boolean;
@@ -165,6 +184,7 @@ export declare const VTable: {
     style: import("vue").StyleValue;
     tag: string | import("../../util/index.js").JSXComponent;
     density: import("../../composables/density.js").Density;
+    striped: Striped;
     hover: boolean;
     fixedHeader: boolean;
     fixedFooter: boolean;
@@ -194,6 +214,7 @@ export declare const VTable: {
     style: import("vue").StyleValue;
     tag: string | import("../../util/index.js").JSXComponent;
     density: import("../../composables/density.js").Density;
+    striped: Striped;
     hover: boolean;
     fixedHeader: boolean;
     fixedFooter: boolean;
@@ -205,42 +226,52 @@ export declare const VTable: {
 }>>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & import("../../util/index.js").FilterPropsOptions<{
     theme: StringConstructor;
     tag: {
-        type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
+        type: PropType<string | import("../../util/index.js").JSXComponent>;
         default: string;
     };
     density: {
-        type: import("vue").PropType<import("../../composables/density.js").Density>;
+        type: PropType<import("../../composables/density.js").Density>;
         default: string;
         validator: (v: any) => boolean;
     };
-    class: import("vue").PropType<import("../../composables/component.js").ClassValue>;
+    class: PropType<import("../../composables/component.js").ClassValue>;
     style: {
-        type: import("vue").PropType<import("vue").StyleValue>;
+        type: PropType<import("vue").StyleValue>;
         default: null;
     };
     fixedHeader: BooleanConstructor;
     fixedFooter: BooleanConstructor;
     height: (StringConstructor | NumberConstructor)[];
     hover: BooleanConstructor;
+    striped: {
+        type: PropType<Striped>;
+        default: null;
+        validator: (v: any) => boolean;
+    };
 }, import("vue").ExtractPropTypes<{
     theme: StringConstructor;
     tag: {
-        type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
+        type: PropType<string | import("../../util/index.js").JSXComponent>;
         default: string;
     };
     density: {
-        type: import("vue").PropType<import("../../composables/density.js").Density>;
+        type: PropType<import("../../composables/density.js").Density>;
         default: string;
         validator: (v: any) => boolean;
     };
-    class: import("vue").PropType<import("../../composables/component.js").ClassValue>;
+    class: PropType<import("../../composables/component.js").ClassValue>;
     style: {
-        type: import("vue").PropType<import("vue").StyleValue>;
+        type: PropType<import("vue").StyleValue>;
         default: null;
     };
     fixedHeader: BooleanConstructor;
     fixedFooter: BooleanConstructor;
     height: (StringConstructor | NumberConstructor)[];
     hover: BooleanConstructor;
+    striped: {
+        type: PropType<Striped>;
+        default: null;
+        validator: (v: any) => boolean;
+    };
 }>>;
 export type VTable = InstanceType<typeof VTable>;

package/lib/components/VTable/VTable.js

@@ -7,12 +7,17 @@ import { makeComponentProps } from "../../composables/component.js";
 import { makeDensityProps, useDensity } from "../../composables/density.js";
 import { makeTagProps } from "../../composables/tag.js";
 import { makeThemeProps, provideTheme } from "../../composables/theme.js"; // Utilities
-import { convertToUnit, genericComponent, propsFactory, useRender } from "../../util/index.js";
+import { convertToUnit, genericComponent, propsFactory, useRender } from "../../util/index.js"; // Types
 export const makeVTableProps = propsFactory({
   fixedHeader: Boolean,
   fixedFooter: Boolean,
   height: [Number, String],
   hover: Boolean,
+  striped: {
+    type: String,
+    default: null,
+    validator: v => ['even', 'odd'].includes(v)
+  },
   ...makeComponentProps(),
   ...makeDensityProps(),
   ...makeTagProps(),
@@ -39,7 +44,9 @@ export const VTable = genericComponent()({
         'v-table--fixed-footer': props.fixedFooter,
         'v-table--has-top': !!slots.top,
         'v-table--has-bottom': !!slots.bottom,
-        'v-table--hover': props.hover
+        'v-table--hover': props.hover,
+        'v-table--striped-even': props.striped === 'even',
+        'v-table--striped-odd': props.striped === 'odd'
       }, themeClasses.value, densityClasses.value, props.class]),
       "style": _normalizeStyle(props.style)
     }, {

package/lib/components/VTable/VTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"VTable.js","names":["makeComponentProps","makeDensityProps","useDensity","makeTagProps","makeThemeProps","provideTheme","convertToUnit","genericComponent","propsFactory","useRender","makeVTableProps","fixedHeader","Boolean","fixedFooter","height","Number","String","hover","VTable","name","props","setup","_ref","slots","emit","themeClasses","densityClasses","_createVNode","tag","_normalizeClass","top","bottom","value","class","_normalizeStyle","style","default","_createElementVNode","wrapper"],"sources":["../../../src/components/VTable/VTable.tsx"],"sourcesContent":["// Styles\nimport './VTable.sass'\n\n// Composables\nimport { makeComponentProps } from '@/composables/component'\nimport { makeDensityProps, useDensity } from '@/composables/density'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\n\n// Utilities\nimport { convertToUnit, genericComponent, propsFactory, useRender } from '@/util'\n\nexport type VTableSlots = {\n  default: never\n  top: never\n  bottom: never\n  wrapper: never\n}\n\nexport const makeVTableProps = propsFactory({\n  fixedHeader: Boolean,\n  fixedFooter: Boolean,\n  height: [Number, String],\n  hover: Boolean,\n\n  ...makeComponentProps(),\n  ...makeDensityProps(),\n  ...makeTagProps(),\n  ...makeThemeProps(),\n}, 'VTable')\n\nexport const VTable = genericComponent<VTableSlots>()({\n  name: 'VTable',\n\n  props: makeVTableProps(),\n\n  setup (props, { slots, emit }) {\n    const { themeClasses } = provideTheme(props)\n    const { densityClasses } = useDensity(props)\n\n    useRender(() => (\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            'v-table--hover': props.hover,\n          },\n          themeClasses.value,\n          densityClasses.value,\n          props.class,\n        ]}\n        style={ props.style }\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        ) : slots.wrapper?.()}\n\n        { slots.bottom?.() }\n      </props.tag>\n    ))\n\n    return {}\n  },\n})\n\nexport type VTable = InstanceType<typeof VTable>\n"],"mappings":";AAAA;AACA;;AAEA;AAAA,SACSA,kBAAkB;AAAA,SAClBC,gBAAgB,EAAEC,UAAU;AAAA,SAC5BC,YAAY;AAAA,SACZC,cAAc,EAAEC,YAAY,sCAErC;AAAA,SACSC,aAAa,EAAEC,gBAAgB,EAAEC,YAAY,EAAEC,SAAS;AASjE,OAAO,MAAMC,eAAe,GAAGF,YAAY,CAAC;EAC1CG,WAAW,EAAEC,OAAO;EACpBC,WAAW,EAAED,OAAO;EACpBE,MAAM,EAAE,CAACC,MAAM,EAAEC,MAAM,CAAC;EACxBC,KAAK,EAAEL,OAAO;EAEd,GAAGZ,kBAAkB,CAAC,CAAC;EACvB,GAAGC,gBAAgB,CAAC,CAAC;EACrB,GAAGE,YAAY,CAAC,CAAC;EACjB,GAAGC,cAAc,CAAC;AACpB,CAAC,EAAE,QAAQ,CAAC;AAEZ,OAAO,MAAMc,MAAM,GAAGX,gBAAgB,CAAc,CAAC,CAAC;EACpDY,IAAI,EAAE,QAAQ;EAEdC,KAAK,EAAEV,eAAe,CAAC,CAAC;EAExBW,KAAKA,CAAED,KAAK,EAAAE,IAAA,EAAmB;IAAA,IAAjB;MAAEC,KAAK;MAAEC;IAAK,CAAC,GAAAF,IAAA;IAC3B,MAAM;MAAEG;IAAa,CAAC,GAAGpB,YAAY,CAACe,KAAK,CAAC;IAC5C,MAAM;MAAEM;IAAe,CAAC,GAAGxB,UAAU,CAACkB,KAAK,CAAC;IAE5CX,SAAS,CAAC,MAAAkB,YAAA,CAAAP,KAAA,CAAAQ,GAAA;MAAA,SAAAC,eAAA,CAEC,CACL,SAAS,EACT;QACE,uBAAuB,EAAE,CAAC,CAACT,KAAK,CAACN,MAAM;QACvC,uBAAuB,EAAEM,KAAK,CAACT,WAAW;QAC1C,uBAAuB,EAAES,KAAK,CAACP,WAAW;QAC1C,kBAAkB,EAAE,CAAC,CAACU,KAAK,CAACO,GAAG;QAC/B,qBAAqB,EAAE,CAAC,CAACP,KAAK,CAACQ,MAAM;QACrC,gBAAgB,EAAEX,KAAK,CAACH;MAC1B,CAAC,EACDQ,YAAY,CAACO,KAAK,EAClBN,cAAc,CAACM,KAAK,EACpBZ,KAAK,CAACa,KAAK,CACZ;MAAA,SAAAC,eAAA,CACOd,KAAK,CAACe,KAAK;IAAA;MAAAC,OAAA,EAAAA,CAAA,MAEjBb,KAAK,CAACO,GAAG,GAAG,CAAC,EAEbP,KAAK,CAACa,OAAO,GAAAC,mBAAA;QAAA;QAAA,SAGJ;UAAEvB,MAAM,EAAER,aAAa,CAACc,KAAK,CAACN,MAAM;QAAE;MAAC,IAAAuB,mBAAA,iBAG1Cd,KAAK,CAACa,OAAO,CAAC,CAAC,OAGnBb,KAAK,CAACe,OAAO,GAAG,CAAC,EAEnBf,KAAK,CAACQ,MAAM,GAAG,CAAC;IAAA,EAErB,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"file":"VTable.js","names":["makeComponentProps","makeDensityProps","useDensity","makeTagProps","makeThemeProps","provideTheme","convertToUnit","genericComponent","propsFactory","useRender","makeVTableProps","fixedHeader","Boolean","fixedFooter","height","Number","String","hover","striped","type","default","validator","v","includes","VTable","name","props","setup","_ref","slots","emit","themeClasses","densityClasses","_createVNode","tag","_normalizeClass","top","bottom","value","class","_normalizeStyle","style","_createElementVNode","wrapper"],"sources":["../../../src/components/VTable/VTable.tsx"],"sourcesContent":["// Styles\nimport './VTable.sass'\n\n// Composables\nimport { makeComponentProps } from '@/composables/component'\nimport { makeDensityProps, useDensity } from '@/composables/density'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\n\n// Utilities\nimport { convertToUnit, genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\n\nexport type VTableSlots = {\n  default: never\n  top: never\n  bottom: never\n  wrapper: never\n}\n\nexport type Striped = null | 'odd' | 'even'\n\nexport const makeVTableProps = propsFactory({\n  fixedHeader: Boolean,\n  fixedFooter: Boolean,\n  height: [Number, String],\n  hover: Boolean,\n  striped: {\n    type: String as PropType<Striped>,\n    default: null,\n    validator: (v: any) => ['even', 'odd'].includes(v),\n  },\n\n  ...makeComponentProps(),\n  ...makeDensityProps(),\n  ...makeTagProps(),\n  ...makeThemeProps(),\n}, 'VTable')\n\nexport const VTable = genericComponent<VTableSlots>()({\n  name: 'VTable',\n\n  props: makeVTableProps(),\n\n  setup (props, { slots, emit }) {\n    const { themeClasses } = provideTheme(props)\n    const { densityClasses } = useDensity(props)\n\n    useRender(() => (\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            'v-table--hover': props.hover,\n            'v-table--striped-even': props.striped === 'even',\n            'v-table--striped-odd': props.striped === 'odd',\n          },\n          themeClasses.value,\n          densityClasses.value,\n          props.class,\n        ]}\n        style={ props.style }\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        ) : slots.wrapper?.()}\n\n        { slots.bottom?.() }\n      </props.tag>\n    ))\n\n    return {}\n  },\n})\n\nexport type VTable = InstanceType<typeof VTable>\n"],"mappings":";AAAA;AACA;;AAEA;AAAA,SACSA,kBAAkB;AAAA,SAClBC,gBAAgB,EAAEC,UAAU;AAAA,SAC5BC,YAAY;AAAA,SACZC,cAAc,EAAEC,YAAY,sCAErC;AAAA,SACSC,aAAa,EAAEC,gBAAgB,EAAEC,YAAY,EAAEC,SAAS,+BAEjE;AAYA,OAAO,MAAMC,eAAe,GAAGF,YAAY,CAAC;EAC1CG,WAAW,EAAEC,OAAO;EACpBC,WAAW,EAAED,OAAO;EACpBE,MAAM,EAAE,CAACC,MAAM,EAAEC,MAAM,CAAC;EACxBC,KAAK,EAAEL,OAAO;EACdM,OAAO,EAAE;IACPC,IAAI,EAAEH,MAA2B;IACjCI,OAAO,EAAE,IAAI;IACbC,SAAS,EAAGC,CAAM,IAAK,CAAC,MAAM,EAAE,KAAK,CAAC,CAACC,QAAQ,CAACD,CAAC;EACnD,CAAC;EAED,GAAGtB,kBAAkB,CAAC,CAAC;EACvB,GAAGC,gBAAgB,CAAC,CAAC;EACrB,GAAGE,YAAY,CAAC,CAAC;EACjB,GAAGC,cAAc,CAAC;AACpB,CAAC,EAAE,QAAQ,CAAC;AAEZ,OAAO,MAAMoB,MAAM,GAAGjB,gBAAgB,CAAc,CAAC,CAAC;EACpDkB,IAAI,EAAE,QAAQ;EAEdC,KAAK,EAAEhB,eAAe,CAAC,CAAC;EAExBiB,KAAKA,CAAED,KAAK,EAAAE,IAAA,EAAmB;IAAA,IAAjB;MAAEC,KAAK;MAAEC;IAAK,CAAC,GAAAF,IAAA;IAC3B,MAAM;MAAEG;IAAa,CAAC,GAAG1B,YAAY,CAACqB,KAAK,CAAC;IAC5C,MAAM;MAAEM;IAAe,CAAC,GAAG9B,UAAU,CAACwB,KAAK,CAAC;IAE5CjB,SAAS,CAAC,MAAAwB,YAAA,CAAAP,KAAA,CAAAQ,GAAA;MAAA,SAAAC,eAAA,CAEC,CACL,SAAS,EACT;QACE,uBAAuB,EAAE,CAAC,CAACT,KAAK,CAACZ,MAAM;QACvC,uBAAuB,EAAEY,KAAK,CAACf,WAAW;QAC1C,uBAAuB,EAAEe,KAAK,CAACb,WAAW;QAC1C,kBAAkB,EAAE,CAAC,CAACgB,KAAK,CAACO,GAAG;QAC/B,qBAAqB,EAAE,CAAC,CAACP,KAAK,CAACQ,MAAM;QACrC,gBAAgB,EAAEX,KAAK,CAACT,KAAK;QAC7B,uBAAuB,EAAES,KAAK,CAACR,OAAO,KAAK,MAAM;QACjD,sBAAsB,EAAEQ,KAAK,CAACR,OAAO,KAAK;MAC5C,CAAC,EACDa,YAAY,CAACO,KAAK,EAClBN,cAAc,CAACM,KAAK,EACpBZ,KAAK,CAACa,KAAK,CACZ;MAAA,SAAAC,eAAA,CACOd,KAAK,CAACe,KAAK;IAAA;MAAArB,OAAA,EAAAA,CAAA,MAEjBS,KAAK,CAACO,GAAG,GAAG,CAAC,EAEbP,KAAK,CAACT,OAAO,GAAAsB,mBAAA;QAAA;QAAA,SAGJ;UAAE5B,MAAM,EAAER,aAAa,CAACoB,KAAK,CAACZ,MAAM;QAAE;MAAC,IAAA4B,mBAAA,iBAG1Cb,KAAK,CAACT,OAAO,CAAC,CAAC,OAGnBS,KAAK,CAACc,OAAO,GAAG,CAAC,EAEnBd,KAAK,CAACQ,MAAM,GAAG,CAAC;IAAA,EAErB,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/components/VTable/VTable.sass

@@ -48,6 +48,20 @@
                 background: $table-hover-color
                 pointer-events: none
                 @include tools.absolute(true)
+    
+    &.v-table--striped-even
+      > .v-table__wrapper
+        > table
+          > tbody
+            > tr:nth-child(even)
+              background-color: $table-stripe-color
+    
+    &.v-table--striped-odd
+      > .v-table__wrapper
+        > table
+          > tbody
+            > tr:nth-child(odd)
+              background-color: $table-stripe-color
 
     &.v-table--fixed-header
       > .v-table__wrapper

package/lib/components/VTable/_variables.scss

@@ -18,6 +18,7 @@ $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-column-padding: 0 16px !default;
+$table-stripe-color: rgba(var(--v-border-color), var(--v-hover-opacity)) !default;
 $table-transition-duration: 0.28s !default;
 $table-transition-property: box-shadow, opacity, background, height !default;
 $table-transition-timing-function: settings.$standard-easing !default;