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

package/lib/components/VSnackbar/VSnackbar.mjs

@@ -1,195 +1,135 @@
-// @ts-nocheck
-
-/* eslint-disable */
+import { mergeProps as _mergeProps, resolveDirective as _resolveDirective, createVNode as _createVNode } from "vue";
 // Styles
-import "./VSnackbar.sass"; // Components
-
-import VSheet from "../VSheet/VSheet.mjs"; // Mixins
-
-import Colorable from "../../mixins/colorable/index.mjs";
-import Themeable from "../../mixins/themeable/index.mjs";
-import Toggleable from "../../mixins/toggleable/index.mjs";
-import { factory as PositionableFactory } from "../../mixins/positionable.mjs"; // Utilities
-
-import mixins from "../../util/mixins.mjs";
-import { convertToUnit, getSlot } from "../../util/helpers.mjs";
-import { deprecate, removed } from "../../util/console.mjs"; // Types
-
-export default mixins(VSheet, Colorable, Toggleable, PositionableFactory(['absolute', 'bottom', 'left', 'right', 'top'])
-/* @vue/component */
-).extend({
-  name: 'v-snackbar',
+import "./VSnackbar.css"; // Components
+
+import { VDefaultsProvider } from "../VDefaultsProvider/index.mjs";
+import { VOverlay } from "../VOverlay/index.mjs"; // Composables
+
+import { genOverlays, makeVariantProps, useVariant } from "../../composables/variant.mjs";
+import { makeLocationProps, useLocation } from "../../composables/location.mjs";
+import { makePositionProps, usePosition } from "../../composables/position.mjs";
+import { makeRoundedProps, useRounded } from "../../composables/rounded.mjs";
+import { makeTransitionProps } from "../../composables/transition.mjs";
+import { useProxiedModel } from "../../composables/proxiedModel.mjs";
+import { useScopeId } from "../../composables/scopeId.mjs";
+import { forwardRefs } from "../../composables/forwardRefs.mjs"; // Utilities
+
+import { onMounted, ref, watch } from 'vue';
+import { defineComponent, useRender } from "../../util/index.mjs";
+export const VSnackbar = defineComponent({
+  name: 'VSnackbar',
   props: {
-    app: Boolean,
-    centered: Boolean,
     contentClass: {
       type: String,
       default: ''
     },
     multiLine: Boolean,
-    text: Boolean,
     timeout: {
       type: [Number, String],
       default: 5000
     },
-    transition: {
-      type: [Boolean, String],
-      default: 'v-snack-transition',
-      validator: v => typeof v === 'string' || v === false
-    },
-    vertical: Boolean
-  },
-  data: () => ({
-    activeTimeout: -1
-  }),
-  computed: {
-    classes() {
-      return {
-        'v-snack--absolute': this.absolute,
-        'v-snack--active': this.isActive,
-        'v-snack--bottom': this.bottom || !this.top,
-        'v-snack--centered': this.centered,
-        'v-snack--has-background': this.hasBackground,
-        'v-snack--left': this.left,
-        'v-snack--multi-line': this.multiLine && !this.vertical,
-        'v-snack--right': this.right,
-        'v-snack--text': this.text,
-        'v-snack--top': this.top,
-        'v-snack--vertical': this.vertical
-      };
-    },
-
-    // Text and outlined styles both
-    // use transparent backgrounds
-    hasBackground() {
-      return !this.text && !this.outlined;
-    },
-
-    // Snackbar is dark by default
-    // override themeable logic.
-    isDark() {
-      return this.hasBackground ? !this.light : Themeable.options.computed.isDark.call(this);
-    },
-
-    styles() {
-      // Styles are not needed when
-      // using the absolute prop.
-      if (this.absolute) return {};
-      const {
-        bar,
-        bottom,
-        footer,
-        insetFooter,
-        left,
-        right,
-        top
-      } = this.$vuetify.application; // Should always move for y-axis
-      // applicationable components.
-
-      return {
-        paddingBottom: convertToUnit(bottom + footer + insetFooter),
-        paddingLeft: !this.app ? undefined : convertToUnit(left),
-        paddingRight: !this.app ? undefined : convertToUnit(right),
-        paddingTop: convertToUnit(bar + top)
-      };
-    }
-
-  },
-  watch: {
-    isActive: 'setTimeout',
-    timeout: 'setTimeout'
+    vertical: Boolean,
+    modelValue: Boolean,
+    ...makeLocationProps({
+      location: 'bottom'
+    }),
+    ...makePositionProps(),
+    ...makeRoundedProps(),
+    ...makeVariantProps(),
+    ...makeTransitionProps({
+      transition: 'v-snackbar-transition'
+    })
   },
-
-  mounted() {
-    if (this.isActive) this.setTimeout();
+  emits: {
+    'update:modelValue': v => true
   },
 
-  created() {
-    /* istanbul ignore next */
-    if (this.$attrs.hasOwnProperty('auto-height')) {
-      removed('auto-height', this);
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    const isActive = useProxiedModel(props, 'modelValue');
+    const {
+      locationStyles
+    } = useLocation(props);
+    const {
+      positionClasses
+    } = usePosition(props);
+    const {
+      scopeId
+    } = useScopeId();
+    const {
+      colorClasses,
+      colorStyles,
+      variantClasses
+    } = useVariant(props);
+    const {
+      roundedClasses
+    } = useRounded(props);
+    const overlay = ref();
+    watch(isActive, startTimeout);
+    watch(() => props.timeout, startTimeout);
+    onMounted(() => {
+      if (isActive.value) startTimeout();
+    });
+    let activeTimeout = -1;
+
+    function startTimeout() {
+      window.clearTimeout(activeTimeout);
+      const timeout = Number(props.timeout);
+      if (!isActive.value || timeout === -1) return;
+      activeTimeout = window.setTimeout(() => {
+        isActive.value = false;
+      }, timeout);
     }
-    /* istanbul ignore next */
-    // eslint-disable-next-line eqeqeq
-
 
-    if (this.timeout == 0) {
-      deprecate('timeout="0"', '-1', this);
+    function onPointerenter() {
+      window.clearTimeout(activeTimeout);
     }
-  },
-
-  methods: {
-    genActions() {
-      return this.$createElement('div', {
-        staticClass: 'v-snack__action '
-      }, [getSlot(this, 'action', {
-        attrs: {
-          class: 'v-snack__btn'
-        }
-      })]);
-    },
-
-    genContent() {
-      return this.$createElement('div', {
-        staticClass: 'v-snack__content',
-        class: {
-          [this.contentClass]: true
-        },
-        attrs: {
-          role: 'status',
-          'aria-live': 'polite'
-        }
-      }, [getSlot(this)]);
-    },
-
-    genWrapper() {
-      const setColor = this.hasBackground ? this.setBackgroundColor : this.setTextColor;
-      const data = setColor(this.color, {
-        staticClass: 'v-snack__wrapper',
-        class: VSheet.options.computed.classes.call(this),
-        style: VSheet.options.computed.styles.call(this),
-        directives: [{
-          name: 'show',
-          value: this.isActive
-        }],
-        on: {
-          mouseenter: () => window.clearTimeout(this.activeTimeout),
-          mouseleave: this.setTimeout
-        }
-      });
-      return this.$createElement('div', data, [this.genContent(), this.genActions()]);
-    },
 
-    genTransition() {
-      return this.$createElement('transition', {
-        props: {
-          name: this.transition
+    useRender(() => _createVNode(VOverlay, _mergeProps({
+      "modelValue": isActive.value,
+      "onUpdate:modelValue": $event => isActive.value = $event,
+      "ref": overlay,
+      "class": ['v-snackbar', {
+        'v-snackbar--active': isActive.value,
+        'v-snackbar--multi-line': props.multiLine && !props.vertical,
+        'v-snackbar--vertical': props.vertical
+      }, positionClasses.value],
+      "style": [colorStyles.value],
+      "contentProps": {
+        style: locationStyles.value
+      },
+      "contentClass": props.contentClass,
+      "persistent": true,
+      "noClickAnimation": true,
+      "scrim": false,
+      "scrollStrategy": "none",
+      "transition": props.transition
+    }, scopeId), {
+      default: () => [_createVNode("div", {
+        "class": ['v-snackbar__wrapper', colorClasses.value, roundedClasses.value, variantClasses.value],
+        "onPointerenter": onPointerenter,
+        "onPointerleave": startTimeout
+      }, [genOverlays(false, 'v-snackbar'), slots.default && _createVNode("div", {
+        "class": "v-snackbar__content",
+        "role": "status",
+        "aria-live": "polite"
+      }, [slots.default()]), slots.actions && _createVNode(VDefaultsProvider, {
+        "defaults": {
+          VBtn: {
+            variant: 'text',
+            ripple: false
+          }
         }
-      }, [this.genWrapper()]);
-    },
-
-    setTimeout() {
-      window.clearTimeout(this.activeTimeout);
-      const timeout = Number(this.timeout);
-
-      if (!this.isActive || // TODO: remove 0 in v3
-      [0, -1].includes(timeout)) {
-        return;
-      }
-
-      this.activeTimeout = window.setTimeout(() => {
-        this.isActive = false;
-      }, timeout);
-    }
-
-  },
-
-  render(h) {
-    return h('div', {
-      staticClass: 'v-snack',
-      class: this.classes,
-      style: this.styles
-    }, [this.transition !== false ? this.genTransition() : this.genWrapper()]);
+      }, {
+        default: () => [_createVNode("div", {
+          "class": "v-snackbar__actions"
+        }, [slots.actions()])]
+      })])],
+      activator: slots.activator
+    }));
+    return forwardRefs({}, overlay);
   }
 
 });

package/lib/components/VSnackbar/VSnackbar.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VSnackbar/VSnackbar.ts"],"names":["VSheet","Colorable","Themeable","Toggleable","factory","PositionableFactory","mixins","convertToUnit","getSlot","deprecate","removed","extend","name","props","app","Boolean","centered","contentClass","type","String","default","multiLine","text","timeout","Number","transition","validator","v","vertical","data","activeTimeout","computed","classes","absolute","isActive","bottom","top","hasBackground","left","right","outlined","isDark","light","options","call","styles","bar","footer","insetFooter","$vuetify","application","paddingBottom","paddingLeft","undefined","paddingRight","paddingTop","watch","mounted","setTimeout","created","$attrs","hasOwnProperty","methods","genActions","$createElement","staticClass","attrs","class","genContent","role","genWrapper","setColor","setBackgroundColor","setTextColor","color","style","directives","value","on","mouseenter","window","clearTimeout","mouseleave","genTransition","includes","render","h"],"mappings":"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","sourcesContent":["// @ts-nocheck\n/* eslint-disable */\n\n// Styles\nimport './VSnackbar.sass'\n\n// Components\nimport VSheet from '../VSheet/VSheet'\n\n// Mixins\nimport Colorable from '../../mixins/colorable'\nimport Themeable from '../../mixins/themeable'\nimport Toggleable from '../../mixins/toggleable'\nimport { factory as PositionableFactory } from '../../mixins/positionable'\n\n// Utilities\nimport mixins from '../../util/mixins'\nimport { convertToUnit, getSlot } from '../../util/helpers'\nimport { deprecate, removed } from '../../util/console'\n\n// Types\nimport { PropType, VNode } from 'vue'\n\nexport default mixins(\n  VSheet,\n  Colorable,\n  Toggleable,\n  PositionableFactory([\n    'absolute',\n    'bottom',\n    'left',\n    'right',\n    'top',\n  ])\n/* @vue/component */\n).extend({\n  name: 'v-snackbar',\n\n  props: {\n    app: Boolean,\n    centered: Boolean,\n    contentClass: {\n      type: String,\n      default: '',\n    },\n    multiLine: Boolean,\n    text: Boolean,\n    timeout: {\n      type: [Number, String],\n      default: 5000,\n    },\n    transition: {\n      type: [Boolean, String] as PropType<false | string>,\n      default: 'v-snack-transition',\n      validator: v => typeof v === 'string' || v === false,\n    },\n    vertical: Boolean,\n  },\n\n  data: () => ({\n    activeTimeout: -1,\n  }),\n\n  computed: {\n    classes (): object {\n      return {\n        'v-snack--absolute': this.absolute,\n        'v-snack--active': this.isActive,\n        'v-snack--bottom': this.bottom || !this.top,\n        'v-snack--centered': this.centered,\n        'v-snack--has-background': this.hasBackground,\n        'v-snack--left': this.left,\n        'v-snack--multi-line': this.multiLine && !this.vertical,\n        'v-snack--right': this.right,\n        'v-snack--text': this.text,\n        'v-snack--top': this.top,\n        'v-snack--vertical': this.vertical,\n      }\n    },\n    // Text and outlined styles both\n    // use transparent backgrounds\n    hasBackground (): boolean {\n      return (\n        !this.text &&\n        !this.outlined\n      )\n    },\n    // Snackbar is dark by default\n    // override themeable logic.\n    isDark (): boolean {\n      return this.hasBackground\n        ? !this.light\n        : Themeable.options.computed.isDark.call(this)\n    },\n    styles (): object {\n      // Styles are not needed when\n      // using the absolute prop.\n      if (this.absolute) return {}\n\n      const {\n        bar,\n        bottom,\n        footer,\n        insetFooter,\n        left,\n        right,\n        top,\n      } = this.$vuetify.application\n\n      // Should always move for y-axis\n      // applicationable components.\n      return {\n        paddingBottom: convertToUnit(bottom + footer + insetFooter),\n        paddingLeft: !this.app ? undefined : convertToUnit(left),\n        paddingRight: !this.app ? undefined : convertToUnit(right),\n        paddingTop: convertToUnit(bar + top),\n      }\n    },\n  },\n\n  watch: {\n    isActive: 'setTimeout',\n    timeout: 'setTimeout',\n  },\n\n  mounted () {\n    if (this.isActive) this.setTimeout()\n  },\n\n  created () {\n    /* istanbul ignore next */\n    if (this.$attrs.hasOwnProperty('auto-height')) {\n      removed('auto-height', this)\n    }\n\n    /* istanbul ignore next */\n    // eslint-disable-next-line eqeqeq\n    if (this.timeout == 0) {\n      deprecate('timeout=\"0\"', '-1', this)\n    }\n  },\n\n  methods: {\n    genActions () {\n      return this.$createElement('div', {\n        staticClass: 'v-snack__action ',\n      }, [\n        getSlot(this, 'action', {\n          attrs: { class: 'v-snack__btn' },\n        }),\n      ])\n    },\n    genContent () {\n      return this.$createElement('div', {\n        staticClass: 'v-snack__content',\n        class: {\n          [this.contentClass]: true,\n        },\n        attrs: {\n          role: 'status',\n          'aria-live': 'polite',\n        },\n      }, [getSlot(this)])\n    },\n    genWrapper () {\n      const setColor = this.hasBackground\n        ? this.setBackgroundColor\n        : this.setTextColor\n\n      const data = setColor(this.color, {\n        staticClass: 'v-snack__wrapper',\n        class: VSheet.options.computed.classes.call(this),\n        style: VSheet.options.computed.styles.call(this),\n        directives: [{\n          name: 'show',\n          value: this.isActive,\n        }],\n        on: {\n          mouseenter: () => window.clearTimeout(this.activeTimeout),\n          mouseleave: this.setTimeout,\n        },\n      })\n\n      return this.$createElement('div', data, [\n        this.genContent(),\n        this.genActions(),\n      ])\n    },\n    genTransition () {\n      return this.$createElement('transition', {\n        props: { name: this.transition },\n      }, [this.genWrapper()])\n    },\n    setTimeout () {\n      window.clearTimeout(this.activeTimeout)\n\n      const timeout = Number(this.timeout)\n\n      if (\n        !this.isActive ||\n        // TODO: remove 0 in v3\n        [0, -1].includes(timeout)\n      ) {\n        return\n      }\n\n      this.activeTimeout = window.setTimeout(() => {\n        this.isActive = false\n      }, timeout)\n    },\n  },\n\n  render (h): VNode {\n    return h('div', {\n      staticClass: 'v-snack',\n      class: this.classes,\n      style: this.styles,\n    }, [\n      this.transition !== false\n        ? this.genTransition()\n        : this.genWrapper(),\n    ])\n  },\n})\n"],"file":"VSnackbar.mjs"}
+{"version":3,"file":"VSnackbar.mjs","names":["VDefaultsProvider","VOverlay","genOverlays","makeVariantProps","useVariant","makeLocationProps","useLocation","makePositionProps","usePosition","makeRoundedProps","useRounded","makeTransitionProps","useProxiedModel","useScopeId","forwardRefs","onMounted","ref","watch","defineComponent","useRender","VSnackbar","name","props","contentClass","type","String","default","multiLine","Boolean","timeout","Number","vertical","modelValue","location","transition","emits","v","setup","slots","isActive","locationStyles","positionClasses","scopeId","colorClasses","colorStyles","variantClasses","roundedClasses","overlay","startTimeout","value","activeTimeout","window","clearTimeout","setTimeout","onPointerenter","style","actions","VBtn","variant","ripple","activator"],"sources":["../../../src/components/VSnackbar/VSnackbar.tsx"],"sourcesContent":["// Styles\nimport './VSnackbar.sass'\n\n// Components\nimport { VDefaultsProvider } from '@/components/VDefaultsProvider'\nimport { VOverlay } from '@/components/VOverlay'\n\n// Composables\nimport { genOverlays, makeVariantProps, useVariant } from '@/composables/variant'\nimport { makeLocationProps, useLocation } from '@/composables/location'\nimport { makePositionProps, usePosition } from '@/composables/position'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeTransitionProps } from '@/composables/transition'\nimport { useProxiedModel } from '@/composables/proxiedModel'\nimport { useScopeId } from '@/composables/scopeId'\nimport { forwardRefs } from '@/composables/forwardRefs'\n\n// Utilities\nimport { onMounted, ref, watch } from 'vue'\nimport { defineComponent, useRender } from '@/util'\n\nexport const VSnackbar = defineComponent({\n  name: 'VSnackbar',\n\n  props: {\n    contentClass: {\n      type: String,\n      default: '',\n    },\n    multiLine: Boolean,\n    timeout: {\n      type: [Number, String],\n      default: 5000,\n    },\n    vertical: Boolean,\n\n    modelValue: Boolean,\n\n    ...makeLocationProps({ location: 'bottom' } as const),\n    ...makePositionProps(),\n    ...makeRoundedProps(),\n    ...makeVariantProps(),\n    ...makeTransitionProps({ transition: 'v-snackbar-transition' }),\n  },\n\n  emits: {\n    'update:modelValue': (v: boolean) => true,\n  },\n\n  setup (props, { slots }) {\n    const isActive = useProxiedModel(props, 'modelValue')\n    const { locationStyles } = useLocation(props)\n    const { positionClasses } = usePosition(props)\n    const { scopeId } = useScopeId()\n\n    const { colorClasses, colorStyles, variantClasses } = useVariant(props)\n    const { roundedClasses } = useRounded(props)\n\n    const overlay = ref<VOverlay>()\n\n    watch(isActive, startTimeout)\n    watch(() => props.timeout, startTimeout)\n\n    onMounted(() => {\n      if (isActive.value) startTimeout()\n    })\n\n    let activeTimeout = -1\n    function startTimeout () {\n      window.clearTimeout(activeTimeout)\n      const timeout = Number(props.timeout)\n\n      if (!isActive.value || timeout === -1) return\n\n      activeTimeout = window.setTimeout(() => {\n        isActive.value = false\n      }, timeout)\n    }\n\n    function onPointerenter () {\n      window.clearTimeout(activeTimeout)\n    }\n\n    useRender(() => (\n      <VOverlay\n        v-model={ isActive.value }\n        ref={ overlay }\n        class={[\n          'v-snackbar',\n          {\n            'v-snackbar--active': isActive.value,\n            'v-snackbar--multi-line': props.multiLine && !props.vertical,\n            'v-snackbar--vertical': props.vertical,\n          },\n          positionClasses.value,\n        ]}\n        style={[colorStyles.value]}\n        contentProps={{\n          style: locationStyles.value,\n        }}\n        contentClass={ props.contentClass }\n        persistent\n        noClickAnimation\n        scrim={ false }\n        scrollStrategy=\"none\"\n        transition={ props.transition }\n        { ...scopeId }\n        v-slots={{ activator: slots.activator }}\n      >\n        <div\n          class={[\n            'v-snackbar__wrapper',\n            colorClasses.value,\n            roundedClasses.value,\n            variantClasses.value,\n          ]}\n          onPointerenter={ onPointerenter }\n          onPointerleave={ startTimeout }\n        >\n          { genOverlays(false, 'v-snackbar') }\n\n          { slots.default && (\n            <div\n              class=\"v-snackbar__content\"\n              role=\"status\"\n              aria-live=\"polite\"\n            >\n              { slots.default() }\n            </div>\n          ) }\n\n          { slots.actions && (\n            <VDefaultsProvider\n              defaults={{\n                VBtn: {\n                  variant: 'text',\n                  ripple: false,\n                },\n              }}\n            >\n              <div class=\"v-snackbar__actions\">\n                { slots.actions() }\n              </div>\n            </VDefaultsProvider>\n          ) }\n        </div>\n      </VOverlay>\n    ))\n\n    return forwardRefs({}, overlay)\n  },\n})\n\nexport type VSnackbar = InstanceType<typeof VSnackbar>\n"],"mappings":"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"}

package/lib/components/VSnackbar/VSnackbar.sass

@@ -1,34 +1,21 @@
-@import './_variables.scss'
+@use '../../styles/tools'
+@use '../../styles/settings'
+@use './variables' as *
 
-+theme(v-snack) using ($material)
-  &__wrapper
-    color: map-deep-get($material, 'text', 'primary')
-
-+sheet(v-snack__wrapper, $snackbar-elevation, $snackbar-border-radius, $snackbar-shaped-border-radius)
-
-.v-snack
-  bottom: $snackbar-bottom
-  display: flex
-  font-size: $snackbar-font-size
+.v-snackbar
   justify-content: center
-  left: $snackbar-left
-  pointer-events: none
-  right: $snackbar-right
-  top: $snackbar-top
-  width: 100%
+  padding-inline-end: var(--v-scrollbar-offset)
 
-  &:not(.v-snack--absolute)
+  &:not(.v-snackbar--absolute)
     height: 100vh
     position: fixed
     z-index: $snackbar-z-index
 
-  &:not(.v-snack--centered):not(.v-snack--top)
+  &:not(.v-snackbar--centered):not(.v-snackbar--top)
     align-items: flex-end
 
   &__wrapper
     align-items: center
-    // TODO: move this to sheet in v3
-    border-color: currentColor !important
     display: flex
     margin: $snackbar-wrapper-margin
     max-width: $snackbar-wrapper-max-width
@@ -37,104 +24,62 @@
     padding: $snackbar-wrapper-padding
     pointer-events: auto
     position: relative
-    transition-duration: .15s
-    transition-property: opacity, transform
-    transition-timing-function: map-get($transition, 'linear-out-slow-in')
 
-    &.theme--dark
-      background-color: $snackbar-background-color
-      color: $snackbar-color
+    @include tools.rounded($snackbar-border-radius)
+
+    @at-root .v-snackbar
+      @include tools.variant($snackbar-variants...)
 
   &__content
     flex-grow: 1
-    font-size: $snackbar-content-font-size
-    font-weight: $snackbar-content-font-weight
-    letter-spacing: $snackbar-content-letter-spacing
-    line-height: $snackbar-content-line-height
+    font-size: $snackbar-font-size
+    font-weight: $snackbar-font-weight
+    letter-spacing: $snackbar-letter-spacing
+    line-height: $snackbar-line-height
     margin-right: auto
     padding: $snackbar-content-padding
     text-align: initial
 
-  &__action
+  &__actions
     align-items: center
     align-self: center
     display: flex
+    margin-inline-end: $snackbar-action-margin
 
-    // Snackbar actions shouldn't have ripples
-    .v-ripple__container
-      display: none
-
-    +ltr()
-      margin-right: $snackbar-action-margin
-
-    +rtl()
-      margin-left: $snackbar-action-margin
-
-  // Increased specificity to change
-  // the default padding of .v-btn
-  &__action > .v-snack__btn.v-btn
-    padding: $snackbar-btn-padding
-
-  &__btn
-    margin-left: $snackbar-btn-margin-left
-    margin-right: $snackbar-btn-margin-right
-    margin: $snackbar-content-first-btn-margin
-    min-width: auto
+    & > .v-btn
+      padding: $snackbar-btn-padding
+      min-width: auto
 
   &--absolute
     height: 100%
     position: absolute
     z-index: $snackbar-absolute-z-index
 
-  &--centered
-    align-items: center
-
-  &--left
-    justify-content: flex-start
-    right: auto
-
   &--multi-line &__wrapper
     min-height: $snackbar-multi-line-wrapper-min-height
 
-  &--right
-    justify-content: flex-end
-    left: auto
-
-  &:not(.v-snack--has-background) &__wrapper
-    box-shadow: none !important
-
-  &--bottom
-    top: auto
-
-  &--text &__wrapper:before
-    background-color: currentColor
-    border-radius: inherit
-    bottom: 0
-    content: ''
-    left: 0
-    opacity: 0.12
-    pointer-events: none
-    position: absolute
-    right: 0
-    top: 0
-
-  &--top
-    align-items: flex-start
-    bottom: auto
-
   &--vertical &__wrapper
     flex-direction: column
 
-    .v-snack__action
+    .v-snackbar__actions
       align-self: flex-end
       margin-bottom: $snackbar-vertical-action-margin-bottom
 
-.v-snack-transition
-  &-enter
-    &.v-snack__wrapper
-      transform: scale($snackbar-transition-wrapper-transform)
+.v-snackbar-transition
+  &-enter-active,
+  &-leave-active
+    transition-duration: .15s
+    transition-timing-function: settings.$decelerated-easing
+
+  &-enter-active
+    transition-property: opacity, transform
+
+  &-enter-from
+    opacity: 0
+    transform: scale($snackbar-transition-scale)
+
+  &-leave-active
+    transition-property: opacity
 
-  &-enter,
   &-leave-to
-    &.v-snack__wrapper
-      opacity: 0
+    opacity: 0

package/lib/components/VSnackbar/_variables.scss

@@ -1,40 +1,35 @@
-@import '../../styles/styles.sass';
+@use '../../styles/settings';
+@use '../../styles/tools';
 
+// VSnackbar
 $snackbar-absolute-z-index: 1 !default;
 $snackbar-action-margin: 8px !default;
-$snackbar-background-color: #333333 !default;
-$snackbar-border-radius: $border-radius-root !default;
-$snackbar-bottom: 0 !default;
+$snackbar-border-radius: settings.$border-radius-root !default;
+$snackbar-plain-opacity: .62 !default;
 $snackbar-btn-padding: 0 8px !default;
-$snackbar-color: hsla(0, 0%, 100%, .87) !default;
-$snackbar-content-font-size: map-deep-get($headings, 'body-2', 'size') !default;
-$snackbar-content-font-weight: map-deep-get($headings, 'body-2', 'weight') !default;
-$snackbar-content-letter-spacing: map-deep-get($headings, 'body-2', 'letter-spacing') !default;
-$snackbar-content-line-height: map-deep-get($headings, 'body-2', 'line-height') !default;
+$snackbar-background: rgb(var(--v-theme-surface-variant)) !default;
+$snackbar-color: rgb(var(--v-theme-on-surface-variant)) !default;
+$snackbar-font-size: tools.map-deep-get(settings.$typography, 'body-2', 'size') !default;
+$snackbar-font-weight: tools.map-deep-get(settings.$typography, 'body-2', 'weight') !default;
+$snackbar-letter-spacing: tools.map-deep-get(settings.$typography, 'body-2', 'letter-spacing') !default;
+$snackbar-line-height: tools.map-deep-get(settings.$typography, 'body-2', 'line-height') !default;
 $snackbar-content-padding: 14px 16px !default;
-$snackbar-content-text-transform: map-deep-get($headings, 'body-2', 'text-transform') !default;
 $snackbar-elevation: 6 !default;
-$snackbar-left: 0 !default;
 $snackbar-multi-line-wrapper-min-height: 68px !default;
-$snackbar-right: 0 !default;
-$snackbar-shaped-border-radius: map-get($rounded, 'xl') $snackbar-border-radius !default;
-$snackbar-top: 0 !default;
-$snackbar-transition-wrapper-transform: .8 !default;
+$snackbar-transition-scale: .8 !default;
 $snackbar-vertical-action-margin-bottom: 8px !default;
-$snackbar-vertical-wrapper-btn-margin-top: 0 !default;
-$snackbar-vertical-wrapper-padding: initial !default;
 $snackbar-wrapper-margin: 8px !default;
 $snackbar-wrapper-max-width: 672px !default;
 $snackbar-wrapper-min-height: 48px !default;
 $snackbar-wrapper-min-width: 344px !default;
 $snackbar-wrapper-padding: 0 !default;
-$snackbar-z-index: 1000 !default;
+$snackbar-z-index: 10000 !default;
 
-// TODO: remove in v3
-$snackbar-btn-margin-left: 0 !default;
-$snackbar-btn-margin-right: 0 !default;
-$snackbar-content-first-btn-margin: 0 !default;
-$snackbar-corner-offset: 0 !default;
-$snackbar-font-size: $snackbar-content-font-size !default;
-$snackbar-wrapper-max-width: $snackbar-content-max-width !default;
-$snackbar-wrapper-min-width: $snackbar-content-min-width !default;
+// List
+$snackbar-variants: (
+  $snackbar-background,
+  $snackbar-color,
+  $snackbar-elevation,
+  $snackbar-plain-opacity,
+  'v-snackbar'
+);

package/lib/components/VSnackbar/index.mjs

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VSnackbar/index.ts"],"names":["VSnackbar"],"mappings":"OAAOA,S;AAEP,SAASA,SAAT;AACA,eAAeA,SAAf","sourcesContent":["import VSnackbar from './VSnackbar'\n\nexport { VSnackbar }\nexport default VSnackbar\n"],"file":"index.mjs"}
+{"version":3,"file":"index.mjs","names":["VSnackbar"],"sources":["../../../src/components/VSnackbar/index.ts"],"sourcesContent":["export { VSnackbar } from './VSnackbar'\n"],"mappings":"SAASA,S"}