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

package/lib/components/VSystemBar/VSystemBar.mjs

@@ -1,62 +1,77 @@
 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 { provideDefaults } from "../../composables/defaults.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 } 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');
+    } = useRounded(props);
+    const height = computed(() => {
+      var _props$height;
+
+      return ((_props$height = props.height) != null ? _props$height : props.window) ? 32 : 24;
+    });
+    const {
+      layoutItemStyles
+    } = useLayoutItem({
+      id: props.name,
+      priority: computed(() => parseInt(props.priority, 10)),
+      position: ref('top'),
+      layoutSize: height,
+      elementSize: height,
+      active: computed(() => true),
+      absolute: toRef(props, 'absolute')
+    });
+    provideDefaults({
+      VBtn: {
+        variant: 'text',
+        density: 'compact'
+      }
+    }, {
+      scoped: true
+    });
     return () => _createVNode(props.tag, {
-      "class": [{
-        'v-system-bar': true,
-        'v-system-bar--lights-out': props.lightsOut,
+      "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);
   }
 
 });

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,"sources":["../../../src/components/VSystemBar/VSystemBar.tsx"],"names":["makeElevationProps","useElevation","makeLayoutItemProps","useLayoutItem","makeRoundedProps","useRounded","makeTagProps","makeThemeProps","provideTheme","provideDefaults","useBackgroundColor","computed","ref","toRef","defineComponent","VSystemBar","name","props","color","String","height","Number","window","Boolean","setup","slots","themeClasses","backgroundColorClasses","backgroundColorStyles","elevationClasses","roundedClasses","layoutItemStyles","id","priority","parseInt","position","layoutSize","elementSize","active","absolute","VBtn","variant","density","scoped","value"],"mappings":";AAAA;AACA,0B,CAEA;;SACSA,kB,EAAoBC,Y;SACpBC,mB,EAAqBC,a;SACrBC,gB,EAAkBC,U;SAClBC,Y;SACAC,c,EAAgBC,Y;SAChBC,e;SACAC,kB,uCAET;;AACA,SAASC,QAAT,EAAmBC,GAAnB,EAAwBC,KAAxB,QAAqC,KAArC;SACSC,e;AAET,OAAO,MAAMC,UAAU,GAAGD,eAAe,CAAC;AACxCE,EAAAA,IAAI,EAAE,YADkC;AAGxCC,EAAAA,KAAK,EAAE;AACLC,IAAAA,KAAK,EAAEC,MADF;AAELC,IAAAA,MAAM,EAAE,CAACC,MAAD,EAASF,MAAT,CAFH;AAGLG,IAAAA,MAAM,EAAEC,OAHH;AAKL,OAAGvB,kBAAkB,EALhB;AAML,OAAGE,mBAAmB,EANjB;AAOL,OAAGE,gBAAgB,EAPd;AAQL,OAAGE,YAAY,EARV;AASL,OAAGC,cAAc;AATZ,GAHiC;;AAexCiB,EAAAA,KAAK,CAAEP,KAAF,QAAoB;AAAA,QAAX;AAAEQ,MAAAA;AAAF,KAAW;AACvB,UAAM;AAAEC,MAAAA;AAAF,QAAmBlB,YAAY,CAACS,KAAD,CAArC;AACA,UAAM;AAAEU,MAAAA,sBAAF;AAA0BC,MAAAA;AAA1B,QAAoDlB,kBAAkB,CAACG,KAAK,CAACI,KAAD,EAAQ,OAAR,CAAN,CAA5E;AACA,UAAM;AAAEY,MAAAA;AAAF,QAAuB5B,YAAY,CAACgB,KAAD,CAAzC;AACA,UAAM;AAAEa,MAAAA;AAAF,QAAqBzB,UAAU,CAACY,KAAD,CAArC;AACA,UAAMG,MAAM,GAAGT,QAAQ,CAAC;AAAA;;AAAA,aAAM,kBAAAM,KAAK,CAACG,MAAN,4BAAgBH,KAAK,CAACK,MAAtB,IAA+B,EAA/B,GAAoC,EAA1C;AAAA,KAAD,CAAvB;AACA,UAAM;AAAES,MAAAA;AAAF,QAAuB5B,aAAa,CAAC;AACzC6B,MAAAA,EAAE,EAAEf,KAAK,CAACD,IAD+B;AAEzCiB,MAAAA,QAAQ,EAAEtB,QAAQ,CAAC,MAAMuB,QAAQ,CAACjB,KAAK,CAACgB,QAAP,EAAiB,EAAjB,CAAf,CAFuB;AAGzCE,MAAAA,QAAQ,EAAEvB,GAAG,CAAC,KAAD,CAH4B;AAIzCwB,MAAAA,UAAU,EAAEhB,MAJ6B;AAKzCiB,MAAAA,WAAW,EAAEjB,MAL4B;AAMzCkB,MAAAA,MAAM,EAAE3B,QAAQ,CAAC,MAAM,IAAP,CANyB;AAOzC4B,MAAAA,QAAQ,EAAE1B,KAAK,CAACI,KAAD,EAAQ,UAAR;AAP0B,KAAD,CAA1C;AAUAR,IAAAA,eAAe,CAAC;AACd+B,MAAAA,IAAI,EAAE;AACJC,QAAAA,OAAO,EAAE,MADL;AAEJC,QAAAA,OAAO,EAAE;AAFL;AADQ,KAAD,EAKZ;AAAEC,MAAAA,MAAM,EAAE;AAAV,KALY,CAAf;AAOA,WAAO;AAAA,eAEI,CACL,cADK,EAEL;AAAE,gCAAwB1B,KAAK,CAACK;AAAhC,OAFK,EAGLI,YAAY,CAACkB,KAHR,EAILjB,sBAAsB,CAACiB,KAJlB,EAKLf,gBAAgB,CAACe,KALZ,EAMLd,cAAc,CAACc,KANV,CAFJ;AAAA,eAUI,CACLhB,qBAAqB,CAACgB,KADjB,EAELb,gBAAgB,CAACa,KAFZ;AAVJ,OAcOnB,KAdP,CAAP;AAiBD;;AAvDuC,CAAD,CAAlC","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 { provideDefaults } from '@/composables/defaults'\nimport { useBackgroundColor } from '@/composables/color'\n\n// Utilities\nimport { computed, ref, toRef } from 'vue'\nimport { defineComponent } 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      priority: computed(() => parseInt(props.priority, 10)),\n      position: ref('top'),\n      layoutSize: height,\n      elementSize: height,\n      active: computed(() => true),\n      absolute: toRef(props, 'absolute'),\n    })\n\n    provideDefaults({\n      VBtn: {\n        variant: 'text',\n        density: 'compact',\n      },\n    }, { scoped: true })\n\n    return () => (\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})\n"],"file":"VSystemBar.mjs"}

package/lib/components/VSystemBar/VSystemBar.sass

@@ -1,41 +1,29 @@
-// Imports
-@import './index'
+@forward './variables'
+@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,36 @@
+@use 'sass:map';
+@use '../../styles/settings';
+@use '../../styles/tools';
+
 // 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;
+$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;
+$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,"sources":["../../../src/components/VSystemBar/index.ts"],"names":["VSystemBar"],"mappings":"SAASA,U","sourcesContent":["export { VSystemBar } from './VSystemBar'\n"],"file":"index.mjs"}

package/lib/components/VTable/VTable.css

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

package/lib/components/VTable/VTable.mjs

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

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

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

package/lib/components/VTable/VTable.sass

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

package/lib/components/VTable/_mixins.scss

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