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

package/dist/vuetify.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>;
@@ -60474,17 +60529,17 @@ declare module '@vue/runtime-core' {
     VAlert: typeof import('vuetify/components')['VAlert']
     VAlertTitle: typeof import('vuetify/components')['VAlertTitle']
     VAutocomplete: typeof import('vuetify/components')['VAutocomplete']
-    VBadge: typeof import('vuetify/components')['VBadge']
     VAvatar: typeof import('vuetify/components')['VAvatar']
+    VBadge: typeof import('vuetify/components')['VBadge']
     VBanner: typeof import('vuetify/components')['VBanner']
     VBannerActions: typeof import('vuetify/components')['VBannerActions']
     VBannerText: typeof import('vuetify/components')['VBannerText']
     VBottomNavigation: typeof import('vuetify/components')['VBottomNavigation']
-    VBtn: typeof import('vuetify/components')['VBtn']
-    VBtnGroup: typeof import('vuetify/components')['VBtnGroup']
     VBreadcrumbs: typeof import('vuetify/components')['VBreadcrumbs']
     VBreadcrumbsItem: typeof import('vuetify/components')['VBreadcrumbsItem']
     VBreadcrumbsDivider: typeof import('vuetify/components')['VBreadcrumbsDivider']
+    VBtn: typeof import('vuetify/components')['VBtn']
+    VBtnGroup: typeof import('vuetify/components')['VBtnGroup']
     VBtnToggle: typeof import('vuetify/components')['VBtnToggle']
     VCard: typeof import('vuetify/components')['VCard']
     VCardActions: typeof import('vuetify/components')['VCardActions']
@@ -60496,14 +60551,14 @@ declare module '@vue/runtime-core' {
     VCarouselItem: typeof import('vuetify/components')['VCarouselItem']
     VCheckbox: typeof import('vuetify/components')['VCheckbox']
     VCheckboxBtn: typeof import('vuetify/components')['VCheckboxBtn']
-    VChipGroup: typeof import('vuetify/components')['VChipGroup']
     VChip: typeof import('vuetify/components')['VChip']
+    VChipGroup: typeof import('vuetify/components')['VChipGroup']
     VCode: typeof import('vuetify/components')['VCode']
     VColorPicker: typeof import('vuetify/components')['VColorPicker']
     VCombobox: typeof import('vuetify/components')['VCombobox']
     VCounter: typeof import('vuetify/components')['VCounter']
-    VDivider: typeof import('vuetify/components')['VDivider']
     VDialog: typeof import('vuetify/components')['VDialog']
+    VDivider: typeof import('vuetify/components')['VDivider']
     VExpansionPanels: typeof import('vuetify/components')['VExpansionPanels']
     VExpansionPanel: typeof import('vuetify/components')['VExpansionPanel']
     VExpansionPanelText: typeof import('vuetify/components')['VExpansionPanelText']
@@ -60517,8 +60572,8 @@ declare module '@vue/runtime-core' {
     VSvgIcon: typeof import('vuetify/components')['VSvgIcon']
     VLigatureIcon: typeof import('vuetify/components')['VLigatureIcon']
     VClassIcon: typeof import('vuetify/components')['VClassIcon']
-    VInput: typeof import('vuetify/components')['VInput']
     VImg: typeof import('vuetify/components')['VImg']
+    VInput: typeof import('vuetify/components')['VInput']
     VItemGroup: typeof import('vuetify/components')['VItemGroup']
     VItem: typeof import('vuetify/components')['VItem']
     VKbd: typeof import('vuetify/components')['VKbd']
@@ -60542,20 +60597,21 @@ declare module '@vue/runtime-core' {
     VProgressLinear: typeof import('vuetify/components')['VProgressLinear']
     VRadioGroup: typeof import('vuetify/components')['VRadioGroup']
     VRating: typeof import('vuetify/components')['VRating']
+    VSelect: typeof import('vuetify/components')['VSelect']
     VSelectionControl: typeof import('vuetify/components')['VSelectionControl']
     VSelectionControlGroup: typeof import('vuetify/components')['VSelectionControlGroup']
     VSheet: typeof import('vuetify/components')['VSheet']
-    VSlider: typeof import('vuetify/components')['VSlider']
-    VSnackbar: typeof import('vuetify/components')['VSnackbar']
     VSlideGroup: typeof import('vuetify/components')['VSlideGroup']
     VSlideGroupItem: typeof import('vuetify/components')['VSlideGroupItem']
+    VSlider: typeof import('vuetify/components')['VSlider']
+    VSnackbar: typeof import('vuetify/components')['VSnackbar']
     VSwitch: typeof import('vuetify/components')['VSwitch']
     VSystemBar: typeof import('vuetify/components')['VSystemBar']
-    VTable: typeof import('vuetify/components')['VTable']
     VTabs: typeof import('vuetify/components')['VTabs']
     VTab: typeof import('vuetify/components')['VTab']
-    VTextField: typeof import('vuetify/components')['VTextField']
+    VTable: typeof import('vuetify/components')['VTable']
     VTextarea: typeof import('vuetify/components')['VTextarea']
+    VTextField: typeof import('vuetify/components')['VTextField']
     VTimeline: typeof import('vuetify/components')['VTimeline']
     VTimelineItem: typeof import('vuetify/components')['VTimelineItem']
     VToolbar: typeof import('vuetify/components')['VToolbar']
@@ -60565,7 +60621,6 @@ declare module '@vue/runtime-core' {
     VWindow: typeof import('vuetify/components')['VWindow']
     VWindowItem: typeof import('vuetify/components')['VWindowItem']
     VDefaultsProvider: typeof import('vuetify/components')['VDefaultsProvider']
-    VSelect: typeof import('vuetify/components')['VSelect']
     VForm: typeof import('vuetify/components')['VForm']
     VContainer: typeof import('vuetify/components')['VContainer']
     VCol: typeof import('vuetify/components')['VCol']

package/dist/vuetify.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.
 */
@@ -2113,9 +2113,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',
@@ -2148,10 +2148,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',
@@ -9295,10 +9295,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
@@ -11880,6 +11900,7 @@ const makeVBannerProps = propsFactory({
   ...makeComponentProps(),
   ...makeDensityProps(),
   ...makeDimensionProps(),
+  ...makeDisplayProps(),
   ...makeElevationProps(),
   ...makeLocationProps(),
   ...makePositionProps(),
@@ -11901,8 +11922,9 @@ const VBanner = genericComponent()({
       densityClasses
     } = useDensity(props);
     const {
+      displayClasses,
       mobile
-    } = useDisplay();
+    } = useDisplay(props);
     const {
       dimensionStyles
     } = useDimension(props);
@@ -11938,7 +11960,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"
       }, {
@@ -16936,6 +16958,7 @@ const makeVNavigationDrawerProps = propsFactory({
   sticky: Boolean,
   ...makeBorderProps(),
   ...makeComponentProps(),
+  ...makeDisplayProps(),
   ...makeElevationProps(),
   ...makeLayoutItemProps(),
   ...makeRoundedProps(),
@@ -16974,8 +16997,9 @@ const VNavigationDrawer = genericComponent()({
       elevationClasses
     } = useElevation(props);
     const {
+      displayClasses,
       mobile
-    } = useDisplay();
+    } = useDisplay(props);
     const {
       roundedClasses
     } = useRounded(props);
@@ -17086,7 +17110,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", {
@@ -18138,6 +18162,7 @@ const makeVSlideGroupProps = propsFactory({
     validator: v => typeof v === 'boolean' || ['always', 'desktop', 'mobile'].includes(v)
   },
   ...makeComponentProps(),
+  ...makeDisplayProps(),
   ...makeTagProps(),
   ...makeGroupProps({
     selectedClass: 'v-slide-group-item--active'
@@ -18157,8 +18182,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);
@@ -18378,7 +18404,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
@@ -20433,7 +20459,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
@@ -20458,7 +20484,7 @@ const createVuetify = function () {
     ...options
   });
 };
-const version = "3.3.12-dev.2023-08-17";
+const version = "3.3.12-dev.2023-08-18";
 createVuetify.version = version;
 
 export { components, createVuetify, directives, useDefaults, useDisplay, useLayout, useLocale, useRtl, useTheme, version };