@vuetify/nightly 3.3.12-dev.2023-08-17 → 3.3.12-dev.2023-08-18

package/dist/vuetify.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.3.12-dev.2023-08-17
+* Vuetify v3.3.12-dev.2023-08-18
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -2117,9 +2117,9 @@
           surface: '#FFFFFF',
           'surface-variant': '#424242',
           'on-surface-variant': '#EEEEEE',
-          primary: '#6200EE',
-          'primary-darken-1': '#3700B3',
-          secondary: '#03DAC6',
+          primary: '#1867C0',
+          'primary-darken-1': '#1F5592',
+          secondary: '#48A9A6',
           'secondary-darken-1': '#018786',
           error: '#B00020',
           info: '#2196F3',
@@ -2152,10 +2152,10 @@
           surface: '#212121',
           'surface-variant': '#BDBDBD',
           'on-surface-variant': '#424242',
-          primary: '#BB86FC',
-          'primary-darken-1': '#3700B3',
-          secondary: '#03DAC5',
-          'secondary-darken-1': '#03DAC5',
+          primary: '#2196F3',
+          'primary-darken-1': '#277CC1',
+          secondary: '#54B6B2',
+          'secondary-darken-1': '#48A9A6',
           error: '#CF6679',
           info: '#2196F3',
           success: '#4CAF50',
@@ -9299,10 +9299,30 @@
       ssr: !!ssr
     };
   }
+  const makeDisplayProps = propsFactory({
+    mobileBreakpoint: [Number, String]
+  }, 'display');
   function useDisplay() {
+    let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    let name = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : getCurrentInstanceName();
     const display = vue.inject(DisplaySymbol);
     if (!display) throw new Error('Could not find Vuetify display injection');
-    return display;
+    const mobile = vue.computed(() => {
+      if (!props.mobileBreakpoint) return display.mobile.value;
+      const breakpointValue = typeof props.mobileBreakpoint === 'number' ? props.mobileBreakpoint : display.thresholds.value[props.mobileBreakpoint];
+      return display.width.value < breakpointValue;
+    });
+    const displayClasses = vue.computed(() => {
+      if (!name) return {};
+      return {
+        [`${name}--mobile`]: mobile.value
+      };
+    });
+    return {
+      ...display,
+      displayClasses,
+      mobile
+    };
   }
 
   // Composables
@@ -11884,6 +11904,7 @@
     ...makeComponentProps(),
     ...makeDensityProps(),
     ...makeDimensionProps(),
+    ...makeDisplayProps(),
     ...makeElevationProps(),
     ...makeLocationProps(),
     ...makePositionProps(),
@@ -11905,8 +11926,9 @@
         densityClasses
       } = useDensity(props);
       const {
+        displayClasses,
         mobile
-      } = useDisplay();
+      } = useDisplay(props);
       const {
         dimensionStyles
       } = useDimension(props);
@@ -11942,7 +11964,7 @@
             'v-banner--stacked': props.stacked || mobile.value,
             'v-banner--sticky': props.sticky,
             [`v-banner--${props.lines}-line`]: !!props.lines
-          }, borderClasses.value, densityClasses.value, elevationClasses.value, positionClasses.value, roundedClasses.value, themeClasses.value, props.class],
+          }, borderClasses.value, densityClasses.value, displayClasses.value, elevationClasses.value, positionClasses.value, roundedClasses.value, themeClasses.value, props.class],
           "style": [dimensionStyles.value, locationStyles.value, props.style],
           "role": "banner"
         }, {
@@ -16940,6 +16962,7 @@
     sticky: Boolean,
     ...makeBorderProps(),
     ...makeComponentProps(),
+    ...makeDisplayProps(),
     ...makeElevationProps(),
     ...makeLayoutItemProps(),
     ...makeRoundedProps(),
@@ -16978,8 +17001,9 @@
         elevationClasses
       } = useElevation(props);
       const {
+        displayClasses,
         mobile
-      } = useDisplay();
+      } = useDisplay(props);
       const {
         roundedClasses
       } = useRounded(props);
@@ -17090,7 +17114,7 @@
             'v-navigation-drawer--temporary': isTemporary.value,
             'v-navigation-drawer--active': isActive.value,
             'v-navigation-drawer--sticky': isSticky.value
-          }, themeClasses.value, backgroundColorClasses.value, borderClasses.value, elevationClasses.value, roundedClasses.value, props.class],
+          }, themeClasses.value, backgroundColorClasses.value, borderClasses.value, displayClasses.value, elevationClasses.value, roundedClasses.value, props.class],
           "style": [backgroundColorStyles.value, layoutItemStyles.value, dragStyles.value, ssrBootStyles.value, stickyStyles.value, props.style]
         }, scopeId, attrs), {
           default: () => [hasImage && vue.createVNode("div", {
@@ -18142,6 +18166,7 @@
       validator: v => typeof v === 'boolean' || ['always', 'desktop', 'mobile'].includes(v)
     },
     ...makeComponentProps(),
+    ...makeDisplayProps(),
     ...makeTagProps(),
     ...makeGroupProps({
       selectedClass: 'v-slide-group-item--active'
@@ -18161,8 +18186,9 @@
         isRtl
       } = useRtl();
       const {
+        displayClasses,
         mobile
-      } = useDisplay();
+      } = useDisplay(props);
       const group = useGroup(props, props.symbol);
       const isOverflowing = vue.shallowRef(false);
       const scrollOffset = vue.shallowRef(0);
@@ -18382,7 +18408,7 @@
           'v-slide-group--vertical': !isHorizontal.value,
           'v-slide-group--has-affixes': hasAffixes.value,
           'v-slide-group--is-overflowing': isOverflowing.value
-        }, props.class],
+        }, displayClasses.value, props.class],
         "style": props.style,
         "tabindex": isFocused.value || group.selected.value.length ? -1 : 0,
         "onFocus": onFocus
@@ -20437,7 +20463,7 @@
       date
     };
   }
-  const version$1 = "3.3.12-dev.2023-08-17";
+  const version$1 = "3.3.12-dev.2023-08-18";
   createVuetify$1.version = version$1;
 
   // Vue's inject() can only be used in setup
@@ -20462,7 +20488,7 @@
       ...options
     });
   };
-  const version = "3.3.12-dev.2023-08-17";
+  const version = "3.3.12-dev.2023-08-18";
   createVuetify.version = version;
 
   exports.components = components;