@vuetify/nightly 3.0.0-alpha.8 → 3.0.0-beta.0

package/lib/components/VSnackbar/VSnackbar.css

@@ -0,0 +1,136 @@
+.v-snackbar {
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  left: 0;
+  pointer-events: none;
+  right: 0;
+  top: 0;
+  width: 100%;
+}
+.v-snackbar:not(.v-snackbar--absolute) {
+  height: 100vh;
+  position: fixed;
+  z-index: 10000;
+}
+.v-snackbar:not(.v-snackbar--centered):not(.v-snackbar--top) {
+  align-items: flex-end;
+}
+.v-snackbar__wrapper {
+  align-items: center;
+  display: flex;
+  margin: 8px;
+  max-width: 672px;
+  min-height: 48px;
+  min-width: 344px;
+  padding: 0;
+  pointer-events: auto;
+  position: relative;
+  transition-duration: 0.15s;
+  transition-property: opacity, transform;
+  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  z-index: 1;
+  border-radius: 4px;
+}
+.v-snackbar--variant-plain, .v-snackbar--variant-outlined, .v-snackbar--variant-text, .v-snackbar--variant-contained-text {
+  background: transparent;
+  color: inherit;
+}
+.v-snackbar--variant-plain {
+  opacity: 0.62;
+}
+.v-snackbar--variant-plain:focus, .v-snackbar--variant-plain:hover {
+  opacity: 1;
+}
+.v-snackbar--variant-plain .v-snackbar__overlay {
+  display: none;
+}
+.v-snackbar--variant-contained, .v-snackbar--variant-contained-flat {
+  background: #333333;
+  color: rgb(var(--v-theme-on-surface-variant));
+}
+.v-snackbar--variant-contained {
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
+}
+.v-snackbar--variant-contained-flat {
+  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
+}
+.v-snackbar--variant-outlined {
+  border: thin solid currentColor;
+}
+.v-snackbar--variant-text .v-snackbar__overlay {
+  background: currentColor;
+}
+.v-snackbar--variant-contained-text .v-snackbar__underlay {
+  background: currentColor;
+  opacity: var(--v-activated-opacity);
+  border-radius: inherit;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  pointer-events: none;
+  transition: opacity 0.2s ease-in-out;
+}
+
+.v-snackbar__content {
+  flex-grow: 1;
+  font-size: 0.875rem;
+  font-weight: 400;
+  letter-spacing: 0.0178571429em;
+  line-height: 1.25rem;
+  margin-right: auto;
+  padding: 14px 16px;
+  text-align: initial;
+}
+.v-snackbar__actions {
+  align-items: center;
+  align-self: center;
+  display: flex;
+  margin-inline-end: 8px;
+}
+.v-snackbar__actions > .v-btn {
+  padding: 0 8px;
+  min-width: auto;
+}
+.v-snackbar--absolute {
+  height: 100%;
+  position: absolute;
+  z-index: 1;
+}
+.v-snackbar--multi-line .v-snackbar__wrapper {
+  min-height: 68px;
+}
+.v-snackbar--centered {
+  align-items: center;
+}
+.v-snackbar--start {
+  justify-content: flex-start;
+  right: auto;
+}
+.v-snackbar--end {
+  justify-content: flex-end;
+  left: auto;
+}
+.v-snackbar--bottom {
+  top: auto;
+}
+.v-snackbar--top {
+  align-items: flex-start;
+  bottom: auto;
+}
+.v-snackbar--vertical .v-snackbar__wrapper {
+  flex-direction: column;
+}
+.v-snackbar--vertical .v-snackbar__wrapper .v-snackbar__actions {
+  align-self: flex-end;
+  margin-bottom: 8px;
+}
+
+.v-snackbar-transition-enter-from.v-snackbar__wrapper {
+  transform: scale(0.8);
+}
+.v-snackbar-transition-enter-from.v-snackbar__wrapper, .v-snackbar-transition-leave-to.v-snackbar__wrapper {
+  opacity: 0;
+}

package/lib/components/VSnackbar/VSnackbar.mjs

@@ -1,24 +1,18 @@
-// @ts-nocheck
-
-/* eslint-disable */
+import { withDirectives as _withDirectives, vShow as _vShow, createVNode as _createVNode } from "vue";
 // Styles
-import "./VSnackbar.sass"; // Components
-
-import VSheet from "../VSheet/VSheet.mjs"; // Mixins
+import "./VSnackbar.css"; // Components
 
-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 { VDefaultsProvider } from "../VDefaultsProvider/index.mjs"; // Composables
 
-import mixins from "../../util/mixins.mjs";
-import { convertToUnit, getSlot } from "../../util/helpers.mjs";
-import { deprecate, removed } from "../../util/console.mjs"; // Types
+import { makePositionProps, usePosition } from "../../composables/position.mjs";
+import { useProxiedModel } from "../../composables/proxiedModel.mjs";
+import { makeTransitionProps, MaybeTransition } from "../../composables/transition.mjs";
+import { genOverlays, makeVariantProps, useVariant } from "../../composables/variant.mjs"; // Utilities
 
-export default mixins(VSheet, Colorable, Toggleable, PositionableFactory(['absolute', 'bottom', 'left', 'right', 'top'])
-/* @vue/component */
-).extend({
-  name: 'v-snackbar',
+import { onMounted, watch } from 'vue';
+import { defineComponent, useRender } from "../../util/index.mjs";
+export const VSnackbar = defineComponent({
+  name: 'VSnackbar',
   props: {
     app: Boolean,
     centered: Boolean,
@@ -27,169 +21,96 @@ export default mixins(VSheet, Colorable, Toggleable, PositionableFactory(['absol
       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
+    vertical: Boolean,
+    modelValue: Boolean,
+    ...makePositionProps(),
+    ...makeVariantProps(),
+    ...makeTransitionProps({
+      transition: 'v-snackbar-transition'
+    })
   },
-  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'
+  emits: {
+    'update:modelValue': v => true
   },
 
-  mounted() {
-    if (this.isActive) this.setTimeout();
-  },
-
-  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 {
+      positionClasses,
+      positionStyles
+    } = usePosition(props);
+    const {
+      colorClasses,
+      colorStyles,
+      variantClasses
+    } = useVariant(props);
+    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'
-        }
+    useRender(() => {
+      var _slots$default, _slots$actions;
+
+      return _createVNode("div", {
+        "class": ['v-snackbar', {
+          'v-snackbar--active': isActive.value,
+          'v-snackbar--bottom': props.bottom || !props.top,
+          'v-snackbar--centered': props.centered,
+          'v-snackbar--end': props.right,
+          'v-snackbar--multi-line': props.multiLine && !props.vertical,
+          'v-snackbar--start': props.left,
+          'v-snackbar--top': props.top,
+          'v-snackbar--vertical': props.vertical
+        }, positionClasses.value],
+        "style": [colorStyles.value, positionStyles.value]
+      }, [_createVNode(MaybeTransition, {
+        "transition": props.transition
+      }, {
+        default: () => [_withDirectives(_createVNode("div", {
+          "class": ['v-snackbar__wrapper', colorClasses.value, variantClasses.value],
+          "onPointerenter": onPointerenter,
+          "onPointerleave": startTimeout
+        }, [genOverlays(false, 'v-snackbar'), slots.default && _createVNode("div", {
+          "class": ['v-snackbar__content', props.contentClass],
+          "role": "status",
+          "aria-live": "polite"
+        }, [(_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots)]), slots.actions && _createVNode(VDefaultsProvider, {
+          "defaults": {
+            VBtn: {
+              variant: 'text',
+              ripple: false
+            }
+          }
+        }, {
+          default: () => [_createVNode("div", {
+            "class": "v-snackbar__actions"
+          }, [(_slots$actions = slots.actions) == null ? void 0 : _slots$actions.call(slots)])]
+        })]), [[_vShow, isActive.value]])]
       })]);
-    },
-
-    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
-        }
-      }, [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()]);
+    });
   }
 
 });

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":"AAAA;;AACA;AAEA;AACA,0B,CAEA;;OACOA,M,8BAEP;;OACOC,S;OACAC,S;OACAC,U;SACEC,OAAO,IAAIC,mB,yCAEpB;;OACOC,M;SACEC,a,EAAeC,O;SACfC,S,EAAWC,O,kCAEpB;;AAGA,eAAeJ,MAAM,CACnBN,MADmB,EAEnBC,SAFmB,EAGnBE,UAHmB,EAInBE,mBAAmB,CAAC,CAClB,UADkB,EAElB,QAFkB,EAGlB,MAHkB,EAIlB,OAJkB,EAKlB,KALkB,CAAD;AAOrB;AAXqB,CAAN,CAYbM,MAZa,CAYN;AACPC,EAAAA,IAAI,EAAE,YADC;AAGPC,EAAAA,KAAK,EAAE;AACLC,IAAAA,GAAG,EAAEC,OADA;AAELC,IAAAA,QAAQ,EAAED,OAFL;AAGLE,IAAAA,YAAY,EAAE;AACZC,MAAAA,IAAI,EAAEC,MADM;AAEZC,MAAAA,OAAO,EAAE;AAFG,KAHT;AAOLC,IAAAA,SAAS,EAAEN,OAPN;AAQLO,IAAAA,IAAI,EAAEP,OARD;AASLQ,IAAAA,OAAO,EAAE;AACPL,MAAAA,IAAI,EAAE,CAACM,MAAD,EAASL,MAAT,CADC;AAEPC,MAAAA,OAAO,EAAE;AAFF,KATJ;AAaLK,IAAAA,UAAU,EAAE;AACVP,MAAAA,IAAI,EAAE,CAACH,OAAD,EAAUI,MAAV,CADI;AAEVC,MAAAA,OAAO,EAAE,oBAFC;AAGVM,MAAAA,SAAS,EAAEC,CAAC,IAAI,OAAOA,CAAP,KAAa,QAAb,IAAyBA,CAAC,KAAK;AAHrC,KAbP;AAkBLC,IAAAA,QAAQ,EAAEb;AAlBL,GAHA;AAwBPc,EAAAA,IAAI,EAAE,OAAO;AACXC,IAAAA,aAAa,EAAE,CAAC;AADL,GAAP,CAxBC;AA4BPC,EAAAA,QAAQ,EAAE;AACRC,IAAAA,OAAO,GAAY;AACjB,aAAO;AACL,6BAAqB,KAAKC,QADrB;AAEL,2BAAmB,KAAKC,QAFnB;AAGL,2BAAmB,KAAKC,MAAL,IAAe,CAAC,KAAKC,GAHnC;AAIL,6BAAqB,KAAKpB,QAJrB;AAKL,mCAA2B,KAAKqB,aAL3B;AAML,yBAAiB,KAAKC,IANjB;AAOL,+BAAuB,KAAKjB,SAAL,IAAkB,CAAC,KAAKO,QAP1C;AAQL,0BAAkB,KAAKW,KARlB;AASL,yBAAiB,KAAKjB,IATjB;AAUL,wBAAgB,KAAKc,GAVhB;AAWL,6BAAqB,KAAKR;AAXrB,OAAP;AAaD,KAfO;;AAgBR;AACA;AACAS,IAAAA,aAAa,GAAa;AACxB,aACE,CAAC,KAAKf,IAAN,IACA,CAAC,KAAKkB,QAFR;AAID,KAvBO;;AAwBR;AACA;AACAC,IAAAA,MAAM,GAAa;AACjB,aAAO,KAAKJ,aAAL,GACH,CAAC,KAAKK,KADH,GAEHxC,SAAS,CAACyC,OAAV,CAAkBZ,QAAlB,CAA2BU,MAA3B,CAAkCG,IAAlC,CAAuC,IAAvC,CAFJ;AAGD,KA9BO;;AA+BRC,IAAAA,MAAM,GAAY;AAChB;AACA;AACA,UAAI,KAAKZ,QAAT,EAAmB,OAAO,EAAP;AAEnB,YAAM;AACJa,QAAAA,GADI;AAEJX,QAAAA,MAFI;AAGJY,QAAAA,MAHI;AAIJC,QAAAA,WAJI;AAKJV,QAAAA,IALI;AAMJC,QAAAA,KANI;AAOJH,QAAAA;AAPI,UAQF,KAAKa,QAAL,CAAcC,WARlB,CALgB,CAehB;AACA;;AACA,aAAO;AACLC,QAAAA,aAAa,EAAE5C,aAAa,CAAC4B,MAAM,GAAGY,MAAT,GAAkBC,WAAnB,CADvB;AAELI,QAAAA,WAAW,EAAE,CAAC,KAAKtC,GAAN,GAAYuC,SAAZ,GAAwB9C,aAAa,CAAC+B,IAAD,CAF7C;AAGLgB,QAAAA,YAAY,EAAE,CAAC,KAAKxC,GAAN,GAAYuC,SAAZ,GAAwB9C,aAAa,CAACgC,KAAD,CAH9C;AAILgB,QAAAA,UAAU,EAAEhD,aAAa,CAACuC,GAAG,GAAGV,GAAP;AAJpB,OAAP;AAMD;;AAtDO,GA5BH;AAqFPoB,EAAAA,KAAK,EAAE;AACLtB,IAAAA,QAAQ,EAAE,YADL;AAELX,IAAAA,OAAO,EAAE;AAFJ,GArFA;;AA0FPkC,EAAAA,OAAO,GAAI;AACT,QAAI,KAAKvB,QAAT,EAAmB,KAAKwB,UAAL;AACpB,GA5FM;;AA8FPC,EAAAA,OAAO,GAAI;AACT;AACA,QAAI,KAAKC,MAAL,CAAYC,cAAZ,CAA2B,aAA3B,CAAJ,EAA+C;AAC7CnD,MAAAA,OAAO,CAAC,aAAD,EAAgB,IAAhB,CAAP;AACD;AAED;AACA;;;AACA,QAAI,KAAKa,OAAL,IAAgB,CAApB,EAAuB;AACrBd,MAAAA,SAAS,CAAC,aAAD,EAAgB,IAAhB,EAAsB,IAAtB,CAAT;AACD;AACF,GAzGM;;AA2GPqD,EAAAA,OAAO,EAAE;AACPC,IAAAA,UAAU,GAAI;AACZ,aAAO,KAAKC,cAAL,CAAoB,KAApB,EAA2B;AAChCC,QAAAA,WAAW,EAAE;AADmB,OAA3B,EAEJ,CACDzD,OAAO,CAAC,IAAD,EAAO,QAAP,EAAiB;AACtB0D,QAAAA,KAAK,EAAE;AAAEC,UAAAA,KAAK,EAAE;AAAT;AADe,OAAjB,CADN,CAFI,CAAP;AAOD,KATM;;AAUPC,IAAAA,UAAU,GAAI;AACZ,aAAO,KAAKJ,cAAL,CAAoB,KAApB,EAA2B;AAChCC,QAAAA,WAAW,EAAE,kBADmB;AAEhCE,QAAAA,KAAK,EAAE;AACL,WAAC,KAAKlD,YAAN,GAAqB;AADhB,SAFyB;AAKhCiD,QAAAA,KAAK,EAAE;AACLG,UAAAA,IAAI,EAAE,QADD;AAEL,uBAAa;AAFR;AALyB,OAA3B,EASJ,CAAC7D,OAAO,CAAC,IAAD,CAAR,CATI,CAAP;AAUD,KArBM;;AAsBP8D,IAAAA,UAAU,GAAI;AACZ,YAAMC,QAAQ,GAAG,KAAKlC,aAAL,GACb,KAAKmC,kBADQ,GAEb,KAAKC,YAFT;AAIA,YAAM5C,IAAI,GAAG0C,QAAQ,CAAC,KAAKG,KAAN,EAAa;AAChCT,QAAAA,WAAW,EAAE,kBADmB;AAEhCE,QAAAA,KAAK,EAAEnE,MAAM,CAAC2C,OAAP,CAAeZ,QAAf,CAAwBC,OAAxB,CAAgCY,IAAhC,CAAqC,IAArC,CAFyB;AAGhC+B,QAAAA,KAAK,EAAE3E,MAAM,CAAC2C,OAAP,CAAeZ,QAAf,CAAwBc,MAAxB,CAA+BD,IAA/B,CAAoC,IAApC,CAHyB;AAIhCgC,QAAAA,UAAU,EAAE,CAAC;AACXhE,UAAAA,IAAI,EAAE,MADK;AAEXiE,UAAAA,KAAK,EAAE,KAAK3C;AAFD,SAAD,CAJoB;AAQhC4C,QAAAA,EAAE,EAAE;AACFC,UAAAA,UAAU,EAAE,MAAMC,MAAM,CAACC,YAAP,CAAoB,KAAKnD,aAAzB,CADhB;AAEFoD,UAAAA,UAAU,EAAE,KAAKxB;AAFf;AAR4B,OAAb,CAArB;AAcA,aAAO,KAAKM,cAAL,CAAoB,KAApB,EAA2BnC,IAA3B,EAAiC,CACtC,KAAKuC,UAAL,EADsC,EAEtC,KAAKL,UAAL,EAFsC,CAAjC,CAAP;AAID,KA7CM;;AA8CPoB,IAAAA,aAAa,GAAI;AACf,aAAO,KAAKnB,cAAL,CAAoB,YAApB,EAAkC;AACvCnD,QAAAA,KAAK,EAAE;AAAED,UAAAA,IAAI,EAAE,KAAKa;AAAb;AADgC,OAAlC,EAEJ,CAAC,KAAK6C,UAAL,EAAD,CAFI,CAAP;AAGD,KAlDM;;AAmDPZ,IAAAA,UAAU,GAAI;AACZsB,MAAAA,MAAM,CAACC,YAAP,CAAoB,KAAKnD,aAAzB;AAEA,YAAMP,OAAO,GAAGC,MAAM,CAAC,KAAKD,OAAN,CAAtB;;AAEA,UACE,CAAC,KAAKW,QAAN,IACA;AACA,OAAC,CAAD,EAAI,CAAC,CAAL,EAAQkD,QAAR,CAAiB7D,OAAjB,CAHF,EAIE;AACA;AACD;;AAED,WAAKO,aAAL,GAAqBkD,MAAM,CAACtB,UAAP,CAAkB,MAAM;AAC3C,aAAKxB,QAAL,GAAgB,KAAhB;AACD,OAFoB,EAElBX,OAFkB,CAArB;AAGD;;AAnEM,GA3GF;;AAiLP8D,EAAAA,MAAM,CAAEC,CAAF,EAAY;AAChB,WAAOA,CAAC,CAAC,KAAD,EAAQ;AACdrB,MAAAA,WAAW,EAAE,SADC;AAEdE,MAAAA,KAAK,EAAE,KAAKnC,OAFE;AAGd2C,MAAAA,KAAK,EAAE,KAAK9B;AAHE,KAAR,EAIL,CACD,KAAKpB,UAAL,KAAoB,KAApB,GACI,KAAK0D,aAAL,EADJ,GAEI,KAAKb,UAAL,EAHH,CAJK,CAAR;AASD;;AA3LM,CAZM,CAAf","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,"sources":["../../../src/components/VSnackbar/VSnackbar.tsx"],"names":["VDefaultsProvider","makePositionProps","usePosition","useProxiedModel","makeTransitionProps","MaybeTransition","genOverlays","makeVariantProps","useVariant","onMounted","watch","defineComponent","useRender","VSnackbar","name","props","app","Boolean","centered","contentClass","type","String","default","multiLine","timeout","Number","vertical","modelValue","transition","emits","v","setup","slots","isActive","positionClasses","positionStyles","colorClasses","colorStyles","variantClasses","startTimeout","value","activeTimeout","window","clearTimeout","setTimeout","onPointerenter","bottom","top","right","left","actions","VBtn","variant","ripple"],"mappings":"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","sourcesContent":["// Styles\nimport './VSnackbar.sass'\n\n// Components\nimport { VDefaultsProvider } from '@/components/VDefaultsProvider'\n\n// Composables\nimport { makePositionProps, usePosition } from '@/composables/position'\nimport { useProxiedModel } from '@/composables/proxiedModel'\nimport { makeTransitionProps, MaybeTransition } from '@/composables/transition'\nimport { genOverlays, makeVariantProps, useVariant } from '@/composables/variant'\n\n// Utilities\nimport { onMounted, watch } from 'vue'\nimport { defineComponent, useRender } from '@/util'\n\nexport const VSnackbar = defineComponent({\n  name: 'VSnackbar',\n\n  props: {\n    app: Boolean,\n    centered: Boolean,\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    ...makePositionProps(),\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 { positionClasses, positionStyles } = usePosition(props)\n\n    const { colorClasses, colorStyles, variantClasses } = useVariant(props)\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      <div\n        class={[\n          'v-snackbar',\n          {\n            'v-snackbar--active': isActive.value,\n            'v-snackbar--bottom': props.bottom || !props.top,\n            'v-snackbar--centered': props.centered,\n            'v-snackbar--end': props.right,\n            'v-snackbar--multi-line': props.multiLine && !props.vertical,\n            'v-snackbar--start': props.left,\n            'v-snackbar--top': props.top,\n            'v-snackbar--vertical': props.vertical,\n          },\n          positionClasses.value,\n        ]}\n        style={[\n          colorStyles.value,\n          positionStyles.value,\n        ]}\n      >\n        <MaybeTransition transition={ props.transition }>\n          <div\n            class={[\n              'v-snackbar__wrapper',\n              colorClasses.value,\n              variantClasses.value,\n            ]}\n            v-show={ isActive.value }\n            onPointerenter={ onPointerenter }\n            onPointerleave={ startTimeout }\n          >\n            { genOverlays(false, 'v-snackbar') }\n\n            { slots.default && (\n              <div\n                class={[\n                  'v-snackbar__content',\n                  props.contentClass,\n                ]}\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        </MaybeTransition>\n      </div>\n    ))\n  },\n})\n\nexport type VSnackbar = InstanceType<typeof VSnackbar>\n"],"file":"VSnackbar.mjs"}

package/lib/components/VSnackbar/VSnackbar.sass

@@ -1,15 +1,11 @@
-@import './_variables.scss'
+@forward './variables'
+@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
+.v-snackbar
   bottom: $snackbar-bottom
   display: flex
-  font-size: $snackbar-font-size
   justify-content: center
   left: $snackbar-left
   pointer-events: none
@@ -17,18 +13,16 @@
   top: $snackbar-top
   width: 100%
 
-  &: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
@@ -39,85 +33,56 @@
     position: relative
     transition-duration: .15s
     transition-property: opacity, transform
-    transition-timing-function: map-get($transition, 'linear-out-slow-in')
+    transition-timing-function: settings.$decelerated-easing
+    z-index: 1
 
-    &.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
 
+  &--multi-line &__wrapper
+    min-height: $snackbar-multi-line-wrapper-min-height
+
   &--centered
     align-items: center
 
-  &--left
+  &--start
     justify-content: flex-start
     right: auto
 
-  &--multi-line &__wrapper
-    min-height: $snackbar-multi-line-wrapper-min-height
-
-  &--right
+  &--end
     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
@@ -125,16 +90,16 @@
   &--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-from
+    &.v-snackbar__wrapper
+      transform: scale($snackbar-transition-scale)
 
-  &-enter,
+  &-enter-from,
   &-leave-to
-    &.v-snack__wrapper
+    &.v-snackbar__wrapper
       opacity: 0