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

package/dist/vuetify-labs.d.ts

@@ -101,6 +101,9 @@ type DisplayBreakpoint = 'xs' | Breakpoint;
 type DisplayThresholds = {
     [key in DisplayBreakpoint]: number;
 };
+interface DisplayProps {
+    mobileBreakpoint?: number | DisplayBreakpoint;
+}
 interface DisplayOptions {
     mobileBreakpoint?: number | DisplayBreakpoint;
     thresholds?: Partial<DisplayThresholds>;
@@ -148,7 +151,35 @@ interface DisplayInstance {
     thresholds: Ref<DisplayThresholds>;
     update(): void;
 }
-declare function useDisplay(): DisplayInstance;
+declare function useDisplay(props?: DisplayProps, name?: string): {
+    displayClasses: vue.ComputedRef<{
+        [x: string]: boolean;
+    }>;
+    mobile: vue.ComputedRef<boolean>;
+    xs: Ref<boolean>;
+    sm: Ref<boolean>;
+    md: Ref<boolean>;
+    lg: Ref<boolean>;
+    xl: Ref<boolean>;
+    xxl: Ref<boolean>;
+    smAndUp: Ref<boolean>;
+    mdAndUp: Ref<boolean>;
+    lgAndUp: Ref<boolean>;
+    xlAndUp: Ref<boolean>;
+    smAndDown: Ref<boolean>;
+    mdAndDown: Ref<boolean>;
+    lgAndDown: Ref<boolean>;
+    xlAndDown: Ref<boolean>;
+    name: Ref<DisplayBreakpoint>;
+    height: Ref<number>;
+    width: Ref<number>;
+    mobileBreakpoint: Ref<number | DisplayBreakpoint>;
+    platform: Ref<DisplayPlatform>;
+    thresholds: Ref<DisplayThresholds>;
+    /** @internal */
+    ssr: boolean;
+    update(): void;
+};
 
 declare const block: readonly ["top", "bottom"];
 declare const inline: readonly ["start", "end", "left", "right"];
@@ -7624,6 +7655,7 @@ declare const VBanner: {
             }>) => void)[] | undefined;
             "v-slot:prepend"?: false | (() => vue.VNodeChild) | undefined;
             lines?: "one" | "two" | "three" | undefined;
+            mobileBreakpoint?: number | DisplayBreakpoint | undefined;
             avatar?: string | undefined;
             "v-slot:actions"?: false | (() => vue.VNodeChild) | undefined;
         };
@@ -7675,6 +7707,7 @@ declare const VBanner: {
             theme?: string | undefined;
             rounded?: string | number | boolean | undefined;
             lines?: "one" | "two" | "three" | undefined;
+            mobileBreakpoint?: number | DisplayBreakpoint | undefined;
             avatar?: string | undefined;
         } & {
             $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
@@ -7758,6 +7791,7 @@ declare const VBanner: {
         theme?: string | undefined;
         rounded?: string | number | boolean | undefined;
         lines?: "one" | "two" | "three" | undefined;
+        mobileBreakpoint?: number | DisplayBreakpoint | undefined;
         avatar?: string | undefined;
     } & {
         $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
@@ -7805,6 +7839,7 @@ declare const VBanner: {
     theme?: string | undefined;
     rounded?: string | number | boolean | undefined;
     lines?: "one" | "two" | "three" | undefined;
+    mobileBreakpoint?: number | DisplayBreakpoint | undefined;
     avatar?: string | undefined;
 } & {
     $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
@@ -7863,6 +7898,7 @@ declare const VBanner: {
         type: (StringConstructor | NumberConstructor)[];
         validator(v: any): boolean;
     };
+    mobileBreakpoint: PropType<number | DisplayBreakpoint>;
     height: (StringConstructor | NumberConstructor)[];
     maxHeight: (StringConstructor | NumberConstructor)[];
     maxWidth: (StringConstructor | NumberConstructor)[];
@@ -7906,6 +7942,7 @@ declare const VBanner: {
         type: (StringConstructor | NumberConstructor)[];
         validator(v: any): boolean;
     };
+    mobileBreakpoint: PropType<number | DisplayBreakpoint>;
     height: (StringConstructor | NumberConstructor)[];
     maxHeight: (StringConstructor | NumberConstructor)[];
     maxWidth: (StringConstructor | NumberConstructor)[];
@@ -35148,6 +35185,7 @@ declare const VNavigationDrawer: {
             "v-slot:append"?: false | (() => vue.VNodeChild) | undefined;
             "v-slot:prepend"?: false | (() => vue.VNodeChild) | undefined;
             "onUpdate:modelValue"?: ((val: boolean) => any) | undefined;
+            mobileBreakpoint?: number | DisplayBreakpoint | undefined;
             "onUpdate:rail"?: ((val: boolean) => any) | undefined;
         };
         $attrs: {
@@ -35202,6 +35240,7 @@ declare const VNavigationDrawer: {
             elevation?: string | number | undefined;
             theme?: string | undefined;
             rounded?: string | number | boolean | undefined;
+            mobileBreakpoint?: number | DisplayBreakpoint | undefined;
         } & {
             $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                 default?: (() => vue.VNodeChild) | undefined;
@@ -35309,6 +35348,7 @@ declare const VNavigationDrawer: {
         elevation?: string | number | undefined;
         theme?: string | undefined;
         rounded?: string | number | boolean | undefined;
+        mobileBreakpoint?: number | DisplayBreakpoint | undefined;
     } & {
         $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
             default?: (() => vue.VNodeChild) | undefined;
@@ -35364,6 +35404,7 @@ declare const VNavigationDrawer: {
     elevation?: string | number | undefined;
     theme?: string | undefined;
     rounded?: string | number | boolean | undefined;
+    mobileBreakpoint?: number | DisplayBreakpoint | undefined;
 } & {
     $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
         default?: (() => vue.VNodeChild) | undefined;
@@ -35448,6 +35489,7 @@ declare const VNavigationDrawer: {
         type: (StringConstructor | NumberConstructor)[];
         validator(v: any): boolean;
     };
+    mobileBreakpoint: PropType<number | DisplayBreakpoint>;
     class: PropType<any>;
     style: {
         type: PropType<vue.StyleValue>;
@@ -35514,6 +35556,7 @@ declare const VNavigationDrawer: {
         type: (StringConstructor | NumberConstructor)[];
         validator(v: any): boolean;
     };
+    mobileBreakpoint: PropType<number | DisplayBreakpoint>;
     class: PropType<any>;
     style: {
         type: PropType<vue.StyleValue>;
@@ -42571,6 +42614,7 @@ declare const VSlideGroup: {
                 [key: string]: any;
             }>) => void)[] | undefined;
             "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+            mobileBreakpoint?: number | DisplayBreakpoint | undefined;
             showArrows?: string | boolean | undefined;
             "v-slot:next"?: false | ((arg: SlideGroupSlot) => vue.VNodeChild) | undefined;
             "v-slot:prev"?: false | ((arg: SlideGroupSlot) => vue.VNodeChild) | undefined;
@@ -42612,6 +42656,7 @@ declare const VSlideGroup: {
             class?: any;
             mandatory?: boolean | "force" | undefined;
             modelValue?: any;
+            mobileBreakpoint?: number | DisplayBreakpoint | undefined;
             showArrows?: string | boolean | undefined;
         } & {
             $children?: vue.VNodeChild | {
@@ -42695,6 +42740,7 @@ declare const VSlideGroup: {
         class?: any;
         mandatory?: boolean | "force" | undefined;
         modelValue?: any;
+        mobileBreakpoint?: number | DisplayBreakpoint | undefined;
         showArrows?: string | boolean | undefined;
     } & {
         $children?: vue.VNodeChild | {
@@ -42738,6 +42784,7 @@ declare const VSlideGroup: {
     class?: any;
     mandatory?: boolean | "force" | undefined;
     modelValue?: any;
+    mobileBreakpoint?: number | DisplayBreakpoint | undefined;
     showArrows?: string | boolean | undefined;
 } & {
     $children?: vue.VNodeChild | {
@@ -42802,6 +42849,7 @@ declare const VSlideGroup: {
         type: StringConstructor;
         default: string;
     };
+    mobileBreakpoint: PropType<number | DisplayBreakpoint>;
     class: PropType<any>;
     style: {
         type: PropType<vue.StyleValue>;
@@ -42845,6 +42893,7 @@ declare const VSlideGroup: {
         type: StringConstructor;
         default: string;
     };
+    mobileBreakpoint: PropType<number | DisplayBreakpoint>;
     class: PropType<any>;
     style: {
         type: PropType<vue.StyleValue>;
@@ -46822,6 +46871,7 @@ declare const VTabs: {
             }>) => void)[] | undefined;
             "onUpdate:modelValue"?: ((v: unknown) => any) | undefined;
             bgColor?: string | undefined;
+            mobileBreakpoint?: number | DisplayBreakpoint | undefined;
             showArrows?: string | boolean | undefined;
             sliderColor?: string | undefined;
         };
@@ -46866,6 +46916,7 @@ declare const VTabs: {
             class?: any;
             modelValue?: any;
             bgColor?: string | undefined;
+            mobileBreakpoint?: number | DisplayBreakpoint | undefined;
             showArrows?: string | boolean | undefined;
             sliderColor?: string | undefined;
         } & {
@@ -46952,6 +47003,7 @@ declare const VTabs: {
         class?: any;
         modelValue?: any;
         bgColor?: string | undefined;
+        mobileBreakpoint?: number | DisplayBreakpoint | undefined;
         showArrows?: string | boolean | undefined;
         sliderColor?: string | undefined;
     } & {
@@ -46995,6 +47047,7 @@ declare const VTabs: {
     class?: any;
     modelValue?: any;
     bgColor?: string | undefined;
+    mobileBreakpoint?: number | DisplayBreakpoint | undefined;
     showArrows?: string | boolean | undefined;
     sliderColor?: string | undefined;
 } & {
@@ -47060,6 +47113,7 @@ declare const VTabs: {
         default: string;
     };
     disabled: BooleanConstructor;
+    mobileBreakpoint: PropType<number | DisplayBreakpoint>;
     class: PropType<any>;
     style: {
         type: PropType<vue.StyleValue>;
@@ -47130,6 +47184,7 @@ declare const VTabs: {
         default: string;
     };
     disabled: BooleanConstructor;
+    mobileBreakpoint: PropType<number | DisplayBreakpoint>;
     class: PropType<any>;
     style: {
         type: PropType<vue.StyleValue>;

package/dist/vuetify-labs.esm.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.
 */
@@ -2125,9 +2125,9 @@ const defaultThemeOptions = {
         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',
@@ -2160,10 +2160,10 @@ const defaultThemeOptions = {
         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',
@@ -9307,10 +9307,30 @@ function createDisplay(options, ssr) {
     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 = inject$1(DisplaySymbol);
   if (!display) throw new Error('Could not find Vuetify display injection');
-  return display;
+  const mobile = 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 = computed(() => {
+    if (!name) return {};
+    return {
+      [`${name}--mobile`]: mobile.value
+    };
+  });
+  return {
+    ...display,
+    displayClasses,
+    mobile
+  };
 }
 
 // Composables
@@ -11892,6 +11912,7 @@ const makeVBannerProps = propsFactory({
   ...makeComponentProps(),
   ...makeDensityProps(),
   ...makeDimensionProps(),
+  ...makeDisplayProps(),
   ...makeElevationProps(),
   ...makeLocationProps(),
   ...makePositionProps(),
@@ -11913,8 +11934,9 @@ const VBanner = genericComponent()({
       densityClasses
     } = useDensity(props);
     const {
+      displayClasses,
       mobile
-    } = useDisplay();
+    } = useDisplay(props);
     const {
       dimensionStyles
     } = useDimension(props);
@@ -11950,7 +11972,7 @@ const VBanner = genericComponent()({
           '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"
       }, {
@@ -16948,6 +16970,7 @@ const makeVNavigationDrawerProps = propsFactory({
   sticky: Boolean,
   ...makeBorderProps(),
   ...makeComponentProps(),
+  ...makeDisplayProps(),
   ...makeElevationProps(),
   ...makeLayoutItemProps(),
   ...makeRoundedProps(),
@@ -16986,8 +17009,9 @@ const VNavigationDrawer = genericComponent()({
       elevationClasses
     } = useElevation(props);
     const {
+      displayClasses,
       mobile
-    } = useDisplay();
+    } = useDisplay(props);
     const {
       roundedClasses
     } = useRounded(props);
@@ -17098,7 +17122,7 @@ const VNavigationDrawer = genericComponent()({
           '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 && createVNode("div", {
@@ -18150,6 +18174,7 @@ const makeVSlideGroupProps = propsFactory({
     validator: v => typeof v === 'boolean' || ['always', 'desktop', 'mobile'].includes(v)
   },
   ...makeComponentProps(),
+  ...makeDisplayProps(),
   ...makeTagProps(),
   ...makeGroupProps({
     selectedClass: 'v-slide-group-item--active'
@@ -18169,8 +18194,9 @@ const VSlideGroup = genericComponent()({
       isRtl
     } = useRtl();
     const {
+      displayClasses,
       mobile
-    } = useDisplay();
+    } = useDisplay(props);
     const group = useGroup(props, props.symbol);
     const isOverflowing = shallowRef(false);
     const scrollOffset = shallowRef(0);
@@ -18390,7 +18416,7 @@ const VSlideGroup = genericComponent()({
         '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
@@ -24536,7 +24562,7 @@ function createVuetify$1() {
     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
@@ -24550,7 +24576,7 @@ function inject(key) {
 
 /* eslint-disable local-rules/sort-imports */
 
-const version = "3.3.12-dev.2023-08-17";
+const version = "3.3.12-dev.2023-08-18";
 
 /* eslint-disable local-rules/sort-imports */