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

package/lib/components/VSystemBar/VSystemBar.mjs

@@ -1,62 +1,65 @@
 import { createVNode as _createVNode, resolveDirective as _resolveDirective } from "vue";
 // Styles
-import "./VSystemBar.sass"; // Composables
+import "./VSystemBar.css"; // Composables
 
-import { makeBorderProps, useBorder } from "../../composables/border.mjs";
-import { makeDimensionProps, useDimension } from "../../composables/dimensions.mjs";
 import { makeElevationProps, useElevation } from "../../composables/elevation.mjs";
-import { makePositionProps, usePosition } from "../../composables/position.mjs";
+import { makeLayoutItemProps, useLayoutItem } from "../../composables/layout.mjs";
 import { makeRoundedProps, useRounded } from "../../composables/rounded.mjs";
 import { makeTagProps } from "../../composables/tag.mjs";
-import { useTheme } from "../../composables/theme.mjs"; // Utilities
+import { makeThemeProps, provideTheme } from "../../composables/theme.mjs";
+import { useBackgroundColor } from "../../composables/color.mjs"; // Utilities
 
-import { defineComponent } from 'vue';
-import { makeProps } from "../../util/index.mjs";
-export default defineComponent({
+import { computed, ref, toRef } from 'vue';
+import { defineComponent, useRender } from "../../util/index.mjs";
+export const VSystemBar = defineComponent({
   name: 'VSystemBar',
-  props: makeProps({
-    lightsOut: Boolean,
+  props: {
+    color: String,
+    height: [Number, String],
     window: Boolean,
-    ...makeBorderProps(),
-    ...makeDimensionProps(),
     ...makeElevationProps(),
-    ...makePositionProps(),
+    ...makeLayoutItemProps(),
     ...makeRoundedProps(),
-    ...makeTagProps()
-  }),
+    ...makeTagProps(),
+    ...makeThemeProps()
+  },
 
-  setup(props, {
-    slots
-  }) {
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
     const {
       themeClasses
-    } = useTheme();
+    } = provideTheme(props);
     const {
-      borderClasses
-    } = useBorder(props, 'v-system-bar');
-    const {
-      dimensionStyles
-    } = useDimension(props);
+      backgroundColorClasses,
+      backgroundColorStyles
+    } = useBackgroundColor(toRef(props, 'color'));
     const {
       elevationClasses
     } = useElevation(props);
-    const {
-      positionClasses,
-      positionStyles
-    } = usePosition(props, 'v-system-bar');
     const {
       roundedClasses
-    } = useRounded(props, 'v-system-bar');
-    return () => _createVNode(props.tag, {
-      "class": [{
-        'v-system-bar': true,
-        'v-system-bar--lights-out': props.lightsOut,
+    } = useRounded(props);
+    const height = computed(() => props.height ?? (props.window ? 32 : 24));
+    const {
+      layoutItemStyles
+    } = useLayoutItem({
+      id: props.name,
+      order: computed(() => parseInt(props.order, 10)),
+      position: ref('top'),
+      layoutSize: height,
+      elementSize: height,
+      active: computed(() => true),
+      absolute: toRef(props, 'absolute')
+    });
+    useRender(() => _createVNode(props.tag, {
+      "class": ['v-system-bar', {
         'v-system-bar--window': props.window
-      }, themeClasses.value, borderClasses.value, elevationClasses.value, positionClasses.value, roundedClasses.value],
-      "style": [dimensionStyles.value, positionStyles.value]
-    }, { ...slots,
-      _: 1
-    }, 8, ["class", "style"]);
+      }, themeClasses.value, backgroundColorClasses.value, elevationClasses.value, roundedClasses.value],
+      "style": [backgroundColorStyles.value, layoutItemStyles.value]
+    }, slots));
+    return {};
   }
 
 });

package/lib/components/VSystemBar/VSystemBar.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VSystemBar/VSystemBar.tsx"],"names":["makeBorderProps","useBorder","makeDimensionProps","useDimension","makeElevationProps","useElevation","makePositionProps","usePosition","makeRoundedProps","useRounded","makeTagProps","useTheme","defineComponent","makeProps","name","props","lightsOut","Boolean","window","setup","slots","themeClasses","borderClasses","dimensionStyles","elevationClasses","positionClasses","positionStyles","roundedClasses","value"],"mappings":";AAAA;AACA,2B,CAEA;;SACSA,e,EAAiBC,S;SACjBC,kB,EAAoBC,Y;SACpBC,kB,EAAoBC,Y;SACpBC,iB,EAAmBC,W;SACnBC,gB,EAAkBC,U;SAClBC,Y;SACAC,Q,uCAET;;AACA,SAASC,eAAT,QAAgC,KAAhC;SACSC,S;AAET,eAAeD,eAAe,CAAC;AAC7BE,EAAAA,IAAI,EAAE,YADuB;AAG7BC,EAAAA,KAAK,EAAEF,SAAS,CAAC;AACfG,IAAAA,SAAS,EAAEC,OADI;AAEfC,IAAAA,MAAM,EAAED,OAFO;AAGf,OAAGjB,eAAe,EAHH;AAIf,OAAGE,kBAAkB,EAJN;AAKf,OAAGE,kBAAkB,EALN;AAMf,OAAGE,iBAAiB,EANL;AAOf,OAAGE,gBAAgB,EAPJ;AAQf,OAAGE,YAAY;AARA,GAAD,CAHa;;AAc7BS,EAAAA,KAAK,CAAEJ,KAAF,EAAS;AAAEK,IAAAA;AAAF,GAAT,EAAoB;AACvB,UAAM;AAAEC,MAAAA;AAAF,QAAmBV,QAAQ,EAAjC;AACA,UAAM;AAAEW,MAAAA;AAAF,QAAoBrB,SAAS,CAACc,KAAD,EAAQ,cAAR,CAAnC;AACA,UAAM;AAAEQ,MAAAA;AAAF,QAAsBpB,YAAY,CAACY,KAAD,CAAxC;AACA,UAAM;AAAES,MAAAA;AAAF,QAAuBnB,YAAY,CAACU,KAAD,CAAzC;AACA,UAAM;AAAEU,MAAAA,eAAF;AAAmBC,MAAAA;AAAnB,QAAsCnB,WAAW,CAACQ,KAAD,EAAQ,cAAR,CAAvD;AACA,UAAM;AAAEY,MAAAA;AAAF,QAAqBlB,UAAU,CAACM,KAAD,EAAQ,cAAR,CAArC;AAEA,WAAO;AAAA,eAEI,CACL;AACE,wBAAgB,IADlB;AAEE,oCAA4BA,KAAK,CAACC,SAFpC;AAGE,gCAAwBD,KAAK,CAACG;AAHhC,OADK,EAMLG,YAAY,CAACO,KANR,EAOLN,aAAa,CAACM,KAPT,EAQLJ,gBAAgB,CAACI,KARZ,EASLH,eAAe,CAACG,KATX,EAULD,cAAc,CAACC,KAVV,CAFJ;AAAA,eAcI,CACLL,eAAe,CAACK,KADX,EAELF,cAAc,CAACE,KAFV;AAdJ,YAkBOR,KAlBP;AAAA;AAAA,6BAAP;AAqBD;;AA3C4B,CAAD,CAA9B","sourcesContent":["// Styles\nimport './VSystemBar.sass'\n\n// Composables\nimport { makeBorderProps, useBorder } from '@/composables/border'\nimport { makeDimensionProps, useDimension } from '@/composables/dimensions'\nimport { makeElevationProps, useElevation } from '@/composables/elevation'\nimport { makePositionProps, usePosition } from '@/composables/position'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeTagProps } from '@/composables/tag'\nimport { useTheme } from '@/composables/theme'\n\n// Utilities\nimport { defineComponent } from 'vue'\nimport { makeProps } from '@/util'\n\nexport default defineComponent({\n  name: 'VSystemBar',\n\n  props: makeProps({\n    lightsOut: Boolean,\n    window: Boolean,\n    ...makeBorderProps(),\n    ...makeDimensionProps(),\n    ...makeElevationProps(),\n    ...makePositionProps(),\n    ...makeRoundedProps(),\n    ...makeTagProps(),\n  }),\n\n  setup (props, { slots }) {\n    const { themeClasses } = useTheme()\n    const { borderClasses } = useBorder(props, 'v-system-bar')\n    const { dimensionStyles } = useDimension(props)\n    const { elevationClasses } = useElevation(props)\n    const { positionClasses, positionStyles } = usePosition(props, 'v-system-bar')\n    const { roundedClasses } = useRounded(props, 'v-system-bar')\n\n    return () => (\n      <props.tag\n        class={[\n          {\n            'v-system-bar': true,\n            'v-system-bar--lights-out': props.lightsOut,\n            'v-system-bar--window': props.window,\n          },\n          themeClasses.value,\n          borderClasses.value,\n          elevationClasses.value,\n          positionClasses.value,\n          roundedClasses.value,\n        ]}\n        style={[\n          dimensionStyles.value,\n          positionStyles.value,\n        ]}\n        v-slots={ slots }\n      />\n    )\n  },\n})\n"],"file":"VSystemBar.mjs"}
+{"version":3,"file":"VSystemBar.mjs","names":["makeElevationProps","useElevation","makeLayoutItemProps","useLayoutItem","makeRoundedProps","useRounded","makeTagProps","makeThemeProps","provideTheme","useBackgroundColor","computed","ref","toRef","defineComponent","useRender","VSystemBar","name","props","color","String","height","Number","window","Boolean","setup","slots","themeClasses","backgroundColorClasses","backgroundColorStyles","elevationClasses","roundedClasses","layoutItemStyles","id","order","parseInt","position","layoutSize","elementSize","active","absolute","value"],"sources":["../../../src/components/VSystemBar/VSystemBar.tsx"],"sourcesContent":["// Styles\nimport './VSystemBar.sass'\n\n// Composables\nimport { makeElevationProps, useElevation } from '@/composables/elevation'\nimport { makeLayoutItemProps, useLayoutItem } from '@/composables/layout'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { useBackgroundColor } from '@/composables/color'\n\n// Utilities\nimport { computed, ref, toRef } from 'vue'\nimport { defineComponent, useRender } from '@/util'\n\nexport const VSystemBar = defineComponent({\n  name: 'VSystemBar',\n\n  props: {\n    color: String,\n    height: [Number, String],\n    window: Boolean,\n\n    ...makeElevationProps(),\n    ...makeLayoutItemProps(),\n    ...makeRoundedProps(),\n    ...makeTagProps(),\n    ...makeThemeProps(),\n  },\n\n  setup (props, { slots }) {\n    const { themeClasses } = provideTheme(props)\n    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'color'))\n    const { elevationClasses } = useElevation(props)\n    const { roundedClasses } = useRounded(props)\n    const height = computed(() => props.height ?? (props.window ? 32 : 24))\n    const { layoutItemStyles } = useLayoutItem({\n      id: props.name,\n      order: computed(() => parseInt(props.order, 10)),\n      position: ref('top'),\n      layoutSize: height,\n      elementSize: height,\n      active: computed(() => true),\n      absolute: toRef(props, 'absolute'),\n    })\n\n    useRender(() => (\n      <props.tag\n        class={[\n          'v-system-bar',\n          { 'v-system-bar--window': props.window },\n          themeClasses.value,\n          backgroundColorClasses.value,\n          elevationClasses.value,\n          roundedClasses.value,\n        ]}\n        style={[\n          backgroundColorStyles.value,\n          layoutItemStyles.value,\n        ]}\n        v-slots={ slots }\n      />\n    ))\n\n    return {}\n  },\n})\n"],"mappings":";AAAA;AACA,0B,CAEA;;SACSA,kB,EAAoBC,Y;SACpBC,mB,EAAqBC,a;SACrBC,gB,EAAkBC,U;SAClBC,Y;SACAC,c,EAAgBC,Y;SAChBC,kB,uCAET;;AACA,SAASC,QAAT,EAAmBC,GAAnB,EAAwBC,KAAxB,QAAqC,KAArC;SACSC,e,EAAiBC,S;AAE1B,OAAO,MAAMC,UAAU,GAAGF,eAAe,CAAC;EACxCG,IAAI,EAAE,YADkC;EAGxCC,KAAK,EAAE;IACLC,KAAK,EAAEC,MADF;IAELC,MAAM,EAAE,CAACC,MAAD,EAASF,MAAT,CAFH;IAGLG,MAAM,EAAEC,OAHH;IAKL,GAAGvB,kBAAkB,EALhB;IAML,GAAGE,mBAAmB,EANjB;IAOL,GAAGE,gBAAgB,EAPd;IAQL,GAAGE,YAAY,EARV;IASL,GAAGC,cAAc;EATZ,CAHiC;;EAexCiB,KAAK,CAAEP,KAAF,QAAoB;IAAA,IAAX;MAAEQ;IAAF,CAAW;IACvB,MAAM;MAAEC;IAAF,IAAmBlB,YAAY,CAACS,KAAD,CAArC;IACA,MAAM;MAAEU,sBAAF;MAA0BC;IAA1B,IAAoDnB,kBAAkB,CAACG,KAAK,CAACK,KAAD,EAAQ,OAAR,CAAN,CAA5E;IACA,MAAM;MAAEY;IAAF,IAAuB5B,YAAY,CAACgB,KAAD,CAAzC;IACA,MAAM;MAAEa;IAAF,IAAqBzB,UAAU,CAACY,KAAD,CAArC;IACA,MAAMG,MAAM,GAAGV,QAAQ,CAAC,MAAMO,KAAK,CAACG,MAAN,KAAiBH,KAAK,CAACK,MAAN,GAAe,EAAf,GAAoB,EAArC,CAAP,CAAvB;IACA,MAAM;MAAES;IAAF,IAAuB5B,aAAa,CAAC;MACzC6B,EAAE,EAAEf,KAAK,CAACD,IAD+B;MAEzCiB,KAAK,EAAEvB,QAAQ,CAAC,MAAMwB,QAAQ,CAACjB,KAAK,CAACgB,KAAP,EAAc,EAAd,CAAf,CAF0B;MAGzCE,QAAQ,EAAExB,GAAG,CAAC,KAAD,CAH4B;MAIzCyB,UAAU,EAAEhB,MAJ6B;MAKzCiB,WAAW,EAAEjB,MAL4B;MAMzCkB,MAAM,EAAE5B,QAAQ,CAAC,MAAM,IAAP,CANyB;MAOzC6B,QAAQ,EAAE3B,KAAK,CAACK,KAAD,EAAQ,UAAR;IAP0B,CAAD,CAA1C;IAUAH,SAAS,CAAC;MAAA,SAEC,CACL,cADK,EAEL;QAAE,wBAAwBG,KAAK,CAACK;MAAhC,CAFK,EAGLI,YAAY,CAACc,KAHR,EAILb,sBAAsB,CAACa,KAJlB,EAKLX,gBAAgB,CAACW,KALZ,EAMLV,cAAc,CAACU,KANV,CAFD;MAAA,SAUC,CACLZ,qBAAqB,CAACY,KADjB,EAELT,gBAAgB,CAACS,KAFZ;IAVD,GAcIf,KAdJ,CAAD,CAAT;IAkBA,OAAO,EAAP;EACD;;AAlDuC,CAAD,CAAlC"}

package/lib/components/VSystemBar/VSystemBar.sass

@@ -1,41 +1,28 @@
-// Imports
-@import './index'
+@use '../../styles/tools'
+@use './variables' as *
 
 .v-system-bar
   align-items: center
-  background: $system-bar-background
   display: flex
   flex: $system-bar-flex
-  font-size: $system-bar-font-size
-  font-weight: $system-bar-font-weight
   height: $system-bar-height
-  justify-content: flex-end
+  justify-content: $system-bar-justify-content
+  max-width: 100%
   padding: $system-bar-padding
   position: relative
+  text-align: $system-bar-text-align
+  width: 100%
 
-  i
-    color: $system-bar-icon-color
-    font-size: $system-bar-icon-font-size
+  .v-icon
+    opacity: $system-bar-icon-opacity
 
-  // Defaults missing in variables @include border($system-bar-query)
-  +elevation($system-bar-elevation)
-  +position($system-bar-positions)
-  +rounded($system-bar-border-radius)
-
-  +ltr()
-    text-align: right
-
-  +rtl()
-    text-align: left
-
-  &--lights-out
-    background: $system-bar-lights-out-background
+  @include tools.elevation($system-bar-elevation)
+  @include tools.position($system-bar-positions)
+  @include tools.theme($system-bar-theme...)
+  @include tools.typography($system-bar-typography...)
 
   &--rounded
-    +rounded($system-bar-rounded-border-radius)
+    @include tools.rounded($system-bar-border-radius)
 
   &--window
     height: $system-bar-window-height
-
-    i
-      font-size: $system-bar-window-icon-font-size

package/lib/components/VSystemBar/_variables.scss

@@ -1,26 +1,37 @@
-// Defaults
-$system-bar-background: rgba(var(--v-theme-on-background), 0.02) !default;
-$system-bar-border-radius: map-get($rounded, 0) !default;
-$system-bar-icon-color: rgba(var(--v-theme-on-background), 0.50) !default;
+@use 'sass:map';
+@use '../../styles/settings';
+@use '../../styles/tools';
+
+// VSystemBar
+$system-bar-background: rgba(var(--v-theme-on-surface-variant)) !default;
+$system-bar-border-radius: map.get(settings.$rounded, 0) !default;
+$system-bar-color: rgba(var(--v-theme-on-variant), var(--v-medium-emphasis-opacity)) !default;
 $system-bar-elevation: 0 !default;
 $system-bar-flex: 1 1 auto !default;
-$system-bar-font-size: map-deep-get($headings, 'body-1', 'size') !default;
-$system-bar-font-weight: map-deep-get($headings, 'body-1', 'weight') !default;
+$system-bar-font-size: tools.map-deep-get(settings.$typography, 'caption', 'size') !default;
+$system-bar-font-weight: tools.map-deep-get(settings.$typography, 'caption', 'weight') !default;
 $system-bar-height: 24px !default;
-$system-bar-icon-font-size: 16px !default;
+$system-bar-icon-opacity: var(--v-medium-emphasis-opacity) !default;
+$system-bar-justify-content: flex-end !default;
+$system-bar-letter-spacing: tools.map-deep-get(settings.$typography, 'caption', 'letter-spacing') !default;
 $system-bar-lights-out-background: rgba(var(--v-theme-background), 0.7) !default;
+$system-bar-line-height: tools.map-deep-get(settings.$typography, 'caption', 'line-height') !default;
 $system-bar-padding: 0 8px !default;
 $system-bar-positions: absolute fixed !default;
-$system-bar-rounded-border-radius: map-get($rounded, 0) !default;
+$system-bar-text-align: end !default;
+$system-bar-text-transform: tools.map-deep-get(settings.$typography, 'caption', 'text-transform') !default;
 $system-bar-window-height: 32px !default;
-$system-bar-window-icon-font-size: 20px !default;
 
-$system-bar-query: () !default;
-$system-bar-query: map-deep-merge(
-  (
-    'border-radius': $system-bar-border-radius,
-    'elevation': $system-bar-elevation,
-    'position': $system-bar-positions
-  ),
-  $system-bar-query
-) !default;
+// Lists
+$system-bar-theme: (
+  $system-bar-background,
+  $system-bar-color
+);
+
+$system-bar-typography: (
+  $system-bar-font-size,
+  $system-bar-font-weight,
+  $system-bar-letter-spacing,
+  $system-bar-line-height,
+  $system-bar-text-transform
+);

package/lib/components/VSystemBar/index.mjs

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VSystemBar/index.ts"],"names":["default","VSystemBar"],"mappings":"SAASA,OAAO,IAAIC,U","sourcesContent":["export { default as VSystemBar } from './VSystemBar'\n"],"file":"index.mjs"}
+{"version":3,"file":"index.mjs","names":["VSystemBar"],"sources":["../../../src/components/VSystemBar/index.ts"],"sourcesContent":["export { VSystemBar } from './VSystemBar'\n"],"mappings":"SAASA,U"}

package/lib/components/VTable/VTable.css

@@ -0,0 +1,144 @@
+.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));
+  z-index: 1;
+}
+.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,55 @@
+import { createVNode as _createVNode } from "vue";
+// Styles
+import "./VTable.css"; // Composables
+
+import { makeDensityProps, useDensity } from "../../composables/density.mjs";
+import { makeTagProps } from "../../composables/tag.mjs";
+import { makeThemeProps, provideTheme } from "../../composables/theme.mjs"; // Utilities
+
+import { convertToUnit, defineComponent, useRender } from "../../util/index.mjs";
+export const VTable = defineComponent({
+  name: 'VTable',
+  props: {
+    fixedHeader: Boolean,
+    fixedFooter: Boolean,
+    height: [Number, String],
+    ...makeDensityProps(),
+    ...makeTagProps(),
+    ...makeThemeProps()
+  },
+
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    const {
+      themeClasses
+    } = provideTheme(props);
+    const {
+      densityClasses
+    } = useDensity(props);
+    useRender(() => {
+      var _slots$top, _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$bottom = slots.bottom) == null ? void 0 : _slots$bottom.call(slots)]
+      });
+    });
+    return {};
+  }
+
+});
+//# sourceMappingURL=VTable.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VTable.mjs","names":["makeDensityProps","useDensity","makeTagProps","makeThemeProps","provideTheme","convertToUnit","defineComponent","useRender","VTable","name","props","fixedHeader","Boolean","fixedFooter","height","Number","String","setup","slots","themeClasses","densityClasses","top","bottom","value","default"],"sources":["../../../src/components/VTable/VTable.tsx"],"sourcesContent":["// Styles\nimport './VTable.sass'\n\n// Composables\nimport { makeDensityProps, useDensity } from '@/composables/density'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\n\n// Utilities\nimport { convertToUnit, defineComponent, useRender } from '@/util'\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    ...makeTagProps(),\n    ...makeThemeProps(),\n  },\n\n  setup (props, { slots }) {\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          },\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    return {}\n  },\n})\n\nexport type VTable = InstanceType<typeof VTable>\n"],"mappings":";AAAA;AACA,sB,CAEA;;SACSA,gB,EAAkBC,U;SAClBC,Y;SACAC,c,EAAgBC,Y,uCAEzB;;SACSC,a,EAAeC,e,EAAiBC,S;AAEzC,OAAO,MAAMC,MAAM,GAAGF,eAAe,CAAC;EACpCG,IAAI,EAAE,QAD8B;EAGpCC,KAAK,EAAE;IACLC,WAAW,EAAEC,OADR;IAELC,WAAW,EAAED,OAFR;IAGLE,MAAM,EAAE,CAACC,MAAD,EAASC,MAAT,CAHH;IAKL,GAAGhB,gBAAgB,EALd;IAML,GAAGE,YAAY,EANV;IAOL,GAAGC,cAAc;EAPZ,CAH6B;;EAapCc,KAAK,CAAEP,KAAF,QAAoB;IAAA,IAAX;MAAEQ;IAAF,CAAW;IACvB,MAAM;MAAEC;IAAF,IAAmBf,YAAY,CAACM,KAAD,CAArC;IACA,MAAM;MAAEU;IAAF,IAAqBnB,UAAU,CAACS,KAAD,CAArC;IAEAH,SAAS,CAAC;MAAA;;MAAA;QAAA,SAEC,CACL,SADK,EAEL;UACE,yBAAyB,CAAC,CAACG,KAAK,CAACI,MADnC;UAEE,yBAAyBJ,KAAK,CAACC,WAFjC;UAGE,yBAAyBD,KAAK,CAACG,WAHjC;UAIE,oBAAoB,CAAC,CAACK,KAAK,CAACG,GAJ9B;UAKE,uBAAuB,CAAC,CAACH,KAAK,CAACI;QALjC,CAFK,EASLH,YAAY,CAACI,KATR,EAULH,cAAc,CAACG,KAVV;MAFD;QAAA,8BAeJL,KAAK,CAACG,GAfF,qBAeJ,gBAAAH,KAAK,CAfD,EAiBJA,KAAK,CAACM,OAAN;UAAA,SAEQ,kBAFR;UAAA,SAGS;YAAEV,MAAM,EAAET,aAAa,CAACK,KAAK,CAACI,MAAP;UAAvB;QAHT,iCAMMI,KAAK,CAACM,OAAN,EANN,IAjBI,mBA4BJN,KAAK,CAACI,MA5BF,qBA4BJ,mBAAAJ,KAAK,CA5BD;MAAA;IAAA,CAAD,CAAT;IAgCA,OAAO,EAAP;EACD;;AAlDmC,CAAD,CAA9B"}

package/lib/components/VTable/VTable.sass

@@ -0,0 +1,156 @@
+@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
+      z-index: 1
+
+  &.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,23 @@
+@use 'sass:math';
+@use 'sass:map';
+@use '../../styles/settings';
+@use '../../styles/tools';
+
+// VTable
+$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;
+
+// Lists
+$table-theme: (
+  $table-background,
+  $table-color,
+);