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

package/lib/components/VAlert/VAlert.sass

@@ -1,190 +1,137 @@
-// Imports
-@import './_variables.scss'
+@forward './variables'
 
-// Theme
-+theme(v-alert) using ($material)
-  .v-alert--prominent .v-alert__icon
-    &:after
-      background: map-get($material, 'dividers')
+@use '../../styles/tools'
+@use './variables' as *
 
-// Sheet
-+sheet(v-alert, $alert-elevation, $alert-border-radius, $alert-shaped-border-radius)
-
-// Block
 .v-alert
-  display: block
-  font-size: $alert-font-size
-  margin-bottom: $alert-margin
-  padding: $alert-padding
+  display: grid
+  flex: 1 1
+  grid-template-areas: "prepend content append close" ". content . ."
+  grid-template-columns: max-content auto max-content max-content
   position: relative
-  transition: $primary-transition
+  padding: $alert-padding
+  overflow: hidden
+  --v-border-color: #{$alert-border-color}
 
-  &:not(.v-sheet--tile)
-    border-radius: $alert-border-radius
+  @include tools.position($alert-positions)
+  @include tools.rounded($alert-border-radius)
+  @include tools.variant($alert-variants...)
 
-  > .v-icon,
-  > .v-alert__content
-    +ltr()
-      margin-right: $alert-margin
+  &--prominent
+    grid-template-areas: "prepend content append close" "prepend content . ."
 
-    +rtl()
-      margin-left: $alert-margin
+  &.v-alert--border
+    --v-border-opacity: #{$alert-border-opacity}
 
-  > .v-icon + .v-alert__content
-    +ltr()
-      margin-right: 0
+    &.v-alert--border-start
+      padding-inline-start: $alert-padding + $alert-border-thin-width
 
-    +rtl()
-      margin-left: 0
+    &.v-alert--border-end
+      padding-inline-end: $alert-padding + $alert-border-thin-width
 
-  > .v-alert__content + .v-icon
-    +ltr()
-      margin-right: 0
+  &--variant-plain
+    transition: $alert-plain-transition
 
-    +rtl()
-      margin-left: 0
+  @at-root
+    @include tools.density('v-alert', $alert-density) using ($modifier)
+      padding-bottom: $alert-padding + $modifier
+      padding-top: $alert-padding + $modifier
+
+      &.v-alert--border-top
+        padding-top: $alert-padding + $alert-border-thin-width + $modifier
+
+      &.v-alert--border-bottom
+        padding-bottom: $alert-padding + $alert-border-thin-width + $modifier
 
-// Elements
 .v-alert__border
-  border-style: solid
-  border-width: $alert-border-width
-  content: ''
+  border-radius: inherit
+  bottom: 0
+  left: 0
+  opacity: var(--v-border-opacity)
   position: absolute
+  pointer-events: none
+  right: 0
+  top: 0
+  width: 100%
 
-  &:not(.v-alert__border--has-color)
-    opacity: $alert-border-opacity
-
-  &--left,
-  &--right
-    bottom: 0
-    top: 0
-
-  &--bottom,
-  &--top
-    left: 0
-    right: 0
-
-  &--bottom
-    border-bottom-left-radius: inherit
-    border-bottom-right-radius: inherit
-    bottom: 0
-
-  &--left
-    +ltr()
-      border-top-left-radius: inherit
-      border-bottom-left-radius: inherit
-      left: 0
-
-    +rtl()
-      border-top-right-radius: inherit
-      border-bottom-right-radius: inherit
-      right: 0
-
-  &--right
-    +ltr()
-      border-top-right-radius: inherit
-      border-bottom-right-radius: inherit
-      right: 0
-
-    +rtl()
-      border-top-left-radius: inherit
-      border-bottom-left-radius: inherit
-      left: 0
-
-  &--top
-    border-top-left-radius: inherit
-    border-top-right-radius: inherit
-    top: 0
+  @include tools.border($alert-border...)
 
-.v-alert__content
-  flex: 1 1 auto
+  .v-alert--border-start &
+    border-inline-start-width: $alert-border-thin-width
 
-.v-alert__dismissible
-  +ltr()
-    margin: -16px -8px -16px 8px
+  .v-alert--border-end &
+    border-inline-end-width: $alert-border-thin-width
 
-  +rtl()
-    margin: -16px 8px -16px -8px
+  .v-alert--border-top &
+    border-top-width: $alert-border-thin-width
 
-.v-alert__icon
-  align-self: flex-start
-  border-radius: 50%
-  height: $alert-icon-size
-  min-width: $alert-icon-size
-  position: relative
+  .v-alert--border-bottom &
+    border-bottom-width: $alert-border-thin-width
+
+.v-alert__close
+  cursor: pointer
+  display: flex
+  flex: 0 1 auto
+  grid-area: close
+  user-select: none
+
+.v-alert__content
+  align-self: center
+  grid-area: content
+  overflow: hidden
 
-  +ltr()
-    margin-right: 16px
+.v-alert__append,
+.v-alert__close
+  align-self: flex-start
+  margin-inline-start: $alert-append-margin-inline-start
 
-  +rtl()
-    margin-left: 16px
+.v-alert__append
+  align-self: flex-start
+  grid-area: append
 
-  &.v-icon
-    font-size: $alert-icon-size
+  + .v-alert__close
+    margin-inline-start: $alert-append-close-margin-inline-start
 
-.v-alert__wrapper
-  align-items: center
-  border-radius: inherit
+.v-alert__prepend
+  align-self: flex-start
   display: flex
+  align-items: center
+  grid-area: prepend
+  margin-inline-end: $alert-prepend-margin-inline-end
 
-// Modifiers
-.v-alert--border
-  &.v-alert--prominent
-    .v-alert__icon
-      +ltr()
-        margin-left: $alert-border-icon-margin
+  .v-alert--prominent &
+    align-self: center
 
-      +rtl()
-        margin-right: $alert-border-icon-margin
+.v-alert__underlay
+  grid-area: none
+  position: absolute
 
-.v-alert--dense
-  padding-top: $alert-padding / 2
-  padding-bottom: $alert-padding / 2
+  .v-alert--border-start &
+    border-top-left-radius: 0
+    border-bottom-left-radius: 0
 
-  .v-alert__border
-    border-width: $alert-dense-border-width
+  .v-alert--border-end &
+    border-top-right-radius: 0
+    border-bottom-right-radius: 0
 
-.v-alert--outlined
-  background: transparent !important
-  border: $alert-outline !important
+  .v-alert--border-top &
+    border-top-left-radius: 0
+    border-top-right-radius: 0
 
-  .v-alert__icon
-    color: inherit !important
+  .v-alert--border-bottom &
+    border-bottom-left-radius: 0
+    border-bottom-right-radius: 0
 
-.v-alert--prominent
-  .v-alert__icon
-    align-self: center
-    height: $alert-prominent-icon-size
-    min-width: $alert-prominent-icon-size
-
-    &.v-icon
-      font-size: $alert-prominent-icon-font-size
-
-      &:after
-        background: currentColor !important
-        border-radius: 50%
-        bottom: 0
-        content: ''
-        left: 0
-        opacity: 0.16
-        position: absolute
-        right: 0
-        top: 0
-
-  &.v-alert--dense .v-alert__icon.v-icon::after
-    transform: scale(1)
-
-.v-alert--text
-  background: transparent !important
-
-  &:before
-    background-color: currentColor
-    border-radius: inherit
-    bottom: 0
-    content: ''
-    left: 0
-    opacity: 0.12
-    position: absolute
-    pointer-events: none
-    right: 0
-    top: 0
+.v-alert-title
+  align-items: center
+  align-self: center
+  display: flex
+  font-size: $alert-title-font-size
+  font-weight: $alert-title-font-weight
+  hyphens: $alert-title-hyphens
+  letter-spacing: $alert-title-letter-spacing
+  line-height: $alert-title-line-height
+  overflow-wrap: $alert-title-overflow-wrap
+  text-transform: $alert-title-text-transform
+  word-break: $alert-title-word-break
+  word-wrap: $alert-title-word-wrap

package/lib/components/VAlert/VAlertTitle.mjs

@@ -0,0 +1,4 @@
+// Utilities
+import { createSimpleFunctional } from "../../util/index.mjs";
+export const VAlertTitle = createSimpleFunctional('v-alert-title');
+//# sourceMappingURL=VAlertTitle.mjs.map

package/lib/components/VAlert/VAlertTitle.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/VAlert/VAlertTitle.ts"],"names":["createSimpleFunctional","VAlertTitle"],"mappings":"AAAA;SACSA,sB;AAET,OAAO,MAAMC,WAAW,GAAGD,sBAAsB,CAAC,eAAD,CAA1C","sourcesContent":["// Utilities\nimport { createSimpleFunctional } from '@/util'\n\nexport const VAlertTitle = createSimpleFunctional('v-alert-title')\n"],"file":"VAlertTitle.mjs"}

package/lib/components/VAlert/_variables.scss

@@ -1,16 +1,52 @@
-@import '../../styles/styles.sass';
+@use '../../styles/settings';
+@use '../../styles/tools';
 
-$alert-elevation: 0 !default;
-$alert-border-opacity: 0.26 !default;
-$alert-border-radius: $border-radius-root !default;
-$alert-shaped-border-radius: map-get($rounded, 'xl') $alert-border-radius !default;
-$alert-border-width: 4px !default;
-$alert-dense-border-width: medium !default;
-$alert-font-size: 16px !default;
-$alert-icon-size: 24px !default;
-$alert-margin: 16px !default;
-$alert-outline: thin solid currentColor !default;
+// VAlert
+$alert-background: rgb(var(--v-theme-on-surface-variant)) !default;
+$alert-border-color: currentColor !default;
+$alert-border-opacity: .38 !default;
+$alert-border-radius: settings.$border-radius-root !default;
+$alert-border-style: settings.$border-style-root !default;
+$alert-border-thin-width: 8px !default;
+$alert-border-width: 0 !default;
+$alert-color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !default;
+$alert-density: ('default': 0, 'comfortable': -1, 'compact': -2) !default;
+$alert-elevation: 1 !default;
 $alert-padding: 16px !default;
-$alert-prominent-icon-font-size: 32px !default;
-$alert-prominent-icon-size: 48px !default;
-$alert-border-icon-margin: 8px !default;
+$alert-plain-opacity: .62 !default;
+$alert-plain-transition: .2s opacity settings.$standard-easing !default;
+$alert-positions: absolute fixed sticky !default;
+$alert-prepend-margin-inline-end: 16px !default;
+$alert-append-margin-inline-start: 90px !default;
+$alert-append-close-margin-inline-start: 16px !default;
+
+// VAlertTitle
+$alert-title-font-size: tools.map-deep-get(settings.$typography, 'h6', 'size') !default;
+$alert-title-font-weight: tools.map-deep-get(settings.$typography, 'h6', 'weight') !default;
+$alert-title-hyphens: auto !default;
+$alert-title-letter-spacing: tools.map-deep-get(settings.$typography, 'h6', 'letter-spacing') !default;
+// $alert-title-line-height: tools.map-deep-get(settings.$typography, 'h6', 'line-height') !default;
+$alert-title-line-height: 1.75rem !default;
+$alert-title-overflow-wrap: normal !default;
+$alert-title-text-transform: none !default;
+$alert-title-word-break: normal !default;
+$alert-title-word-wrap: break-word !default;
+
+// VAlertText
+$alert-text-line-height: 1.35 !default;
+
+// Lists
+$alert-border: (
+  $alert-border-color,
+  $alert-border-style,
+  $alert-border-width,
+  $alert-border-thin-width
+);
+
+$alert-variants: (
+  $alert-background,
+  $alert-color,
+  $alert-elevation,
+  $alert-plain-opacity,
+  'v-alert'
+);

package/lib/components/VAlert/index.mjs

@@ -1,4 +1,3 @@
-import VAlert from "./VAlert.mjs";
-export { VAlert };
-export default VAlert;
+export { VAlert } from "./VAlert.mjs";
+export { VAlertTitle } from "./VAlertTitle.mjs";
 //# sourceMappingURL=index.mjs.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VAlert/index.ts"],"names":["VAlert"],"mappings":"OAAOA,M;AAEP,SAASA,MAAT;AACA,eAAeA,MAAf","sourcesContent":["import VAlert from './VAlert'\n\nexport { VAlert }\nexport default VAlert\n"],"file":"index.mjs"}
+{"version":3,"sources":["../../../src/components/VAlert/index.ts"],"names":["VAlert","VAlertTitle"],"mappings":"SAASA,M;SACAC,W","sourcesContent":["export { VAlert } from './VAlert'\nexport { VAlertTitle } from './VAlertTitle'\n"],"file":"index.mjs"}

package/lib/components/VApp/VApp.css

@@ -0,0 +1,29 @@
+.v-application {
+  display: flex;
+  background: rgb(var(--v-theme-background));
+  color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
+}
+.v-application a {
+  cursor: pointer;
+}
+
+.v-application__wrap {
+  flex: 1 1 auto;
+  backface-visibility: hidden;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  max-width: 100%;
+  position: relative;
+}
+
+@-moz-document url-prefix() {
+  @media print {
+    .v-application {
+      display: block;
+    }
+    .v-application__wrap {
+      display: block;
+    }
+  }
+}

package/lib/components/VApp/VApp.mjs

@@ -1,38 +1,52 @@
 import { createVNode as _createVNode } from "vue";
 // Styles
-import "./VApp.sass"; // Composables
+import "./VApp.css"; // Composables
 
-import { useTheme } from "../../composables/theme.mjs";
+import { makeThemeProps, provideTheme } from "../../composables/theme.mjs";
 import { createLayout, makeLayoutProps } from "../../composables/layout.mjs"; // Utilities
 
-import { defineComponent } from 'vue';
-import { makeProps } from "../../util/index.mjs";
+import { defineComponent, useRender } from "../../util/index.mjs";
 import { useRtl } from "../../composables/rtl.mjs";
-export default defineComponent({
+export const VApp = defineComponent({
   name: 'VApp',
-  props: makeProps({
-    theme: String,
-    ...makeLayoutProps()
-  }),
+  props: { ...makeLayoutProps({
+      fullHeight: true
+    }),
+    ...makeThemeProps()
+  },
 
-  setup(props, {
-    slots
-  }) {
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    const theme = provideTheme(props);
     const {
-      themeClasses
-    } = useTheme();
-    const {
-      layoutClasses
+      layoutClasses,
+      layoutStyles,
+      getLayoutItem,
+      items,
+      layoutRef
     } = createLayout(props);
     const {
       rtlClasses
     } = useRtl();
-    return () => _createVNode("div", {
-      "class": ['v-application', themeClasses.value, layoutClasses.value, rtlClasses.value],
-      "data-app": "true"
-    }, [_createVNode("div", {
-      "class": "v-application__wrap"
-    }, [slots.default == null ? void 0 : slots.default()])], 2);
+    useRender(() => {
+      var _slots$default;
+
+      return _createVNode("div", {
+        "ref": layoutRef,
+        "class": ['v-application', theme.themeClasses.value, layoutClasses.value, rtlClasses.value],
+        "style": layoutStyles.value,
+        "data-app": "true"
+      }, [_createVNode("div", {
+        "class": "v-application__wrap"
+      }, [(_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots)])]);
+    });
+    return {
+      getLayoutItem,
+      items,
+      theme
+    };
   }
 
 });

package/lib/components/VApp/VApp.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VApp/VApp.tsx"],"names":["useTheme","createLayout","makeLayoutProps","defineComponent","makeProps","useRtl","name","props","theme","String","setup","slots","themeClasses","layoutClasses","rtlClasses","value","default"],"mappings":";AAAA;AACA,qB,CAEA;;SACSA,Q;SACAC,Y,EAAcC,e,wCAEvB;;AACA,SAASC,eAAT,QAAgC,KAAhC;SACSC,S;SACAC,M;AAET,eAAeF,eAAe,CAAC;AAC7BG,EAAAA,IAAI,EAAE,MADuB;AAG7BC,EAAAA,KAAK,EAAEH,SAAS,CAAC;AACfI,IAAAA,KAAK,EAAEC,MADQ;AAEf,OAAGP,eAAe;AAFH,GAAD,CAHa;;AAQ7BQ,EAAAA,KAAK,CAAEH,KAAF,EAAS;AAAEI,IAAAA;AAAF,GAAT,EAAoB;AACvB,UAAM;AAAEC,MAAAA;AAAF,QAAmBZ,QAAQ,EAAjC;AACA,UAAM;AAAEa,MAAAA;AAAF,QAAoBZ,YAAY,CAACM,KAAD,CAAtC;AACA,UAAM;AAAEO,MAAAA;AAAF,QAAiBT,MAAM,EAA7B;AAEA,WAAO;AAAA,eAEI,CACL,eADK,EAELO,YAAY,CAACG,KAFR,EAGLF,aAAa,CAACE,KAHT,EAILD,UAAU,CAACC,KAJN,CAFJ;AAAA,kBAQM;AARN;AAAA,eAUQ;AAVR,QAWCJ,KAAK,CAACK,OAXP,oBAWCL,KAAK,CAACK,OAAN,EAXD,OAAP;AAeD;;AA5B4B,CAAD,CAA9B","sourcesContent":["// Styles\nimport './VApp.sass'\n\n// Composables\nimport { useTheme } from '@/composables/theme'\nimport { createLayout, makeLayoutProps } from '@/composables/layout'\n\n// Utilities\nimport { defineComponent } from 'vue'\nimport { makeProps } from '@/util'\nimport { useRtl } from '@/composables/rtl'\n\nexport default defineComponent({\n  name: 'VApp',\n\n  props: makeProps({\n    theme: String,\n    ...makeLayoutProps(),\n  }),\n\n  setup (props, { slots }) {\n    const { themeClasses } = useTheme()\n    const { layoutClasses } = createLayout(props)\n    const { rtlClasses } = useRtl()\n\n    return () => (\n      <div\n        class={[\n          'v-application',\n          themeClasses.value,\n          layoutClasses.value,\n          rtlClasses.value,\n        ]}\n        data-app=\"true\"\n      >\n        <div class=\"v-application__wrap\">\n          { slots.default?.() }\n        </div>\n      </div>\n    )\n  },\n})\n"],"file":"VApp.mjs"}
+{"version":3,"sources":["../../../src/components/VApp/VApp.tsx"],"names":["makeThemeProps","provideTheme","createLayout","makeLayoutProps","defineComponent","useRender","useRtl","VApp","name","props","fullHeight","setup","slots","theme","layoutClasses","layoutStyles","getLayoutItem","items","layoutRef","rtlClasses","themeClasses","value","default"],"mappings":";AAAA;AACA,oB,CAEA;;SACSA,c,EAAgBC,Y;SAChBC,Y,EAAcC,e,wCAEvB;;SACSC,e,EAAiBC,S;SACjBC,M;AAET,OAAO,MAAMC,IAAI,GAAGH,eAAe,CAAC;AAClCI,EAAAA,IAAI,EAAE,MAD4B;AAGlCC,EAAAA,KAAK,EAAE,EACL,GAAGN,eAAe,CAAC;AAAEO,MAAAA,UAAU,EAAE;AAAd,KAAD,CADb;AAEL,OAAGV,cAAc;AAFZ,GAH2B;;AAQlCW,EAAAA,KAAK,CAAEF,KAAF,QAAoB;AAAA,QAAX;AAAEG,MAAAA;AAAF,KAAW;AACvB,UAAMC,KAAK,GAAGZ,YAAY,CAACQ,KAAD,CAA1B;AACA,UAAM;AAAEK,MAAAA,aAAF;AAAiBC,MAAAA,YAAjB;AAA+BC,MAAAA,aAA/B;AAA8CC,MAAAA,KAA9C;AAAqDC,MAAAA;AAArD,QAAmEhB,YAAY,CAACO,KAAD,CAArF;AACA,UAAM;AAAEU,MAAAA;AAAF,QAAiBb,MAAM,EAA7B;AAEAD,IAAAA,SAAS,CAAC;AAAA;;AAAA;AAAA,eAEAa,SAFA;AAAA,iBAGC,CACL,eADK,EAELL,KAAK,CAACO,YAAN,CAAmBC,KAFd,EAGLP,aAAa,CAACO,KAHT,EAILF,UAAU,CAACE,KAJN,CAHD;AAAA,iBASEN,YAAY,CAACM,KATf;AAAA,oBAUG;AAVH;AAAA,iBAYK;AAZL,4BAaFT,KAAK,CAACU,OAbJ,qBAaF,oBAAAV,KAAK,CAbH;AAAA,KAAD,CAAT;AAkBA,WAAO;AACLI,MAAAA,aADK;AAELC,MAAAA,KAFK;AAGLJ,MAAAA;AAHK,KAAP;AAKD;;AApCiC,CAAD,CAA5B","sourcesContent":["// Styles\nimport './VApp.sass'\n\n// Composables\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { createLayout, makeLayoutProps } from '@/composables/layout'\n\n// Utilities\nimport { defineComponent, useRender } from '@/util'\nimport { useRtl } from '@/composables/rtl'\n\nexport const VApp = defineComponent({\n  name: 'VApp',\n\n  props: {\n    ...makeLayoutProps({ fullHeight: true }),\n    ...makeThemeProps(),\n  },\n\n  setup (props, { slots }) {\n    const theme = provideTheme(props)\n    const { layoutClasses, layoutStyles, getLayoutItem, items, layoutRef } = createLayout(props)\n    const { rtlClasses } = useRtl()\n\n    useRender(() => (\n      <div\n        ref={ layoutRef }\n        class={[\n          'v-application',\n          theme.themeClasses.value,\n          layoutClasses.value,\n          rtlClasses.value,\n        ]}\n        style={ layoutStyles.value }\n        data-app=\"true\"\n      >\n        <div class=\"v-application__wrap\">\n          { slots.default?.() }\n        </div>\n      </div>\n    ))\n\n    return {\n      getLayoutItem,\n      items,\n      theme,\n    }\n  },\n})\n\nexport type VApp = InstanceType<typeof VApp>\n"],"file":"VApp.mjs"}

package/lib/components/VApp/VApp.sass

@@ -1,10 +1,7 @@
-@import './index'
-
 .v-application
   display: flex
   background: rgb(var(--v-theme-background))
-  color: rgb(var(--v-theme-on-background))
-  --v-theme-overlay-multiplier: var(--v-theme-background-overlay-multiplier)
+  color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity))
 
   a
     cursor: pointer

package/lib/components/VApp/index.mjs

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

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

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

package/lib/components/VAppBar/VAppBar.css

@@ -0,0 +1,10 @@
+.v-app-bar {
+  display: flex;
+}
+.v-app-bar.v-toolbar {
+  background: rgb(var(--v-theme-surface));
+  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+}
+.v-app-bar.v-toolbar:not(.v-toolbar--flat) {
+  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
+}