@vuetify/nightly 3.3.4-master.2023-06-14 → 3.3.4-master.2023-06-16

package/CHANGELOG.md

@@ -1,14 +1,17 @@
-# [](https://github.com/vuetifyjs/vuetify/compare/v3.3.4-master.2023-06-14...v) (2023-06-14)
+# [](https://github.com/vuetifyjs/vuetify/compare/v3.3.4-master.2023-06-16...v) (2023-06-16)
 
 
 
-## [3.3.4-master.2023-06-14](https://github.com/vuetifyjs/vuetify/compare/v3.3.4...v3.3.4-master.2023-06-14) (2023-06-14)
+## [3.3.4-master.2023-06-16](https://github.com/vuetifyjs/vuetify/compare/v3.3.4...v3.3.4-master.2023-06-16) (2023-06-16)
 
 
 ### Bug Fixes
 
 * **VDatePicker:** don't throw on empty model ([e5e3d84](https://github.com/vuetifyjs/vuetify/commit/e5e3d8425e1f8914b01497a4275e23a683ef5d70)), closes [#17601](https://github.com/vuetifyjs/vuetify/issues/17601)
 * **VDatePicker:** remove legacy sass imports ([0ecd917](https://github.com/vuetifyjs/vuetify/commit/0ecd917069d1b4e725dacacef2b0457a76fb094c)), closes [#17603](https://github.com/vuetifyjs/vuetify/issues/17603)
+* **VDatePicker:** remove set height, update to better match spec ([2ce7096](https://github.com/vuetifyjs/vuetify/commit/2ce70963fd5d35c3191efd8b255df558014a1e6c))
+* **VDatePicker:** year / month transition ([1673b96](https://github.com/vuetifyjs/vuetify/commit/1673b96480ad557bad742087fc21e89a1544361a))
+* **VDatePickerMonth:** remove defined height ([80af8e6](https://github.com/vuetifyjs/vuetify/commit/80af8e6ca1ca4c054561d6c591f07ee72dd14ca7))
 
 
 ### Reverts

package/dist/json/attributes.json

@@ -3555,10 +3555,6 @@
     "type": "string\n",
     "description": "Text shown when no **display-date** is set."
   },
-  "v-date-picker/transition": {
-    "type": "string\n",
-    "description": "Sets the component transition. Can be one of the [built in](/styles/transitions/) or custom transition."
-  },
   "v-date-picker/multiple": {
     "type": "boolean\n",
     "description": "Allow the selection of multiple dates"

package/dist/json/tags.json

@@ -1150,7 +1150,6 @@
       "tag",
       "theme",
       "title",
-      "transition",
       "view-mode",
       "width"
     ],

package/dist/json/web-types.json

@@ -2,7 +2,7 @@
   "$schema": "http://json.schemastore.org/web-types",
   "framework": "vue",
   "name": "vuetify",
-  "version": "3.3.4-master.2023-06-14",
+  "version": "3.3.4-master.2023-06-16",
   "contributions": {
     "html": {
       "types-syntax": "typescript",
@@ -15074,16 +15074,6 @@
                 "type": "string\n"
               }
             },
-            {
-              "name": "transition",
-              "description": "Sets the component transition. Can be one of the [built in](/styles/transitions/) or custom transition.",
-              "doc-url": "https://vuetifyjs.com/api/v-date-picker#props",
-              "default": "'fade'",
-              "value": {
-                "kind": "expression",
-                "type": "string\n"
-              }
-            },
             {
               "name": "multiple",
               "description": "Allow the selection of multiple dates",
@@ -15487,7 +15477,7 @@
               "name": "displayDate",
               "description": "MISSING DESCRIPTION",
               "doc-url": "https://vuetifyjs.com/api/v-date-picker-controls#props",
-              "default": "new Date('2023-06-14T12:04:40.054Z')",
+              "default": "new Date('2023-06-16T12:04:33.744Z')",
               "value": {
                 "kind": "expression",
                 "type": "any\n"
@@ -15694,7 +15684,7 @@
               "name": "displayDate",
               "description": "MISSING DESCRIPTION",
               "doc-url": "https://vuetifyjs.com/api/v-date-picker-month#props",
-              "default": "new Date('2023-06-14T12:04:40.054Z')",
+              "default": "new Date('2023-06-16T12:04:33.744Z')",
               "value": {
                 "kind": "expression",
                 "type": "any\n"

package/dist/vuetify-labs.css

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.3.4-master.2023-06-14
+* Vuetify v3.3.4-master.2023-06-16
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -16180,19 +16180,17 @@ html.overflow-y-hidden {
 
 .v-date-picker {
   overflow: hidden;
-  width: 358px;
 }
 .v-date-picker .v-date-picker-month {
-  padding-bottom: 8px;
   padding-inline-start: 12px;
   padding-inline-end: 12px;
 }
 .v-date-picker .v-date-picker-month .v-date-picker-month__day {
-  height: 40px;
-  width: 40px;
+  height: 48px;
+  width: 48px;
 }
 .v-date-picker .v-date-picker-month .v-date-picker-month__day .v-btn {
-  --v-btn-height: 24px;
+  --v-btn-height: 28px;
   --v-btn-size: 0.85rem;
 }.v-date-picker-controls {
   display: flex;
@@ -16200,10 +16198,12 @@ html.overflow-y-hidden {
   justify-content: space-between;
   font-size: 0.875rem;
   padding-inline-start: 24px;
+  padding-top: 4px;
+  padding-bottom: 4px;
   padding-inline-end: 12px;
 }
 .v-date-picker-controls .v-btn:last-child {
-  margin-left: 24px;
+  margin-left: 4px;
 }
 
 .v-date-picker-controls__date {
@@ -16264,7 +16264,6 @@ html.overflow-y-hidden {
 }.v-date-picker-month {
   display: flex;
   justify-content: center;
-  height: 268px;
   min-width: 328px;
   --v-date-picker-month-day-diff: 4px;
 }
@@ -16337,6 +16336,23 @@ html.overflow-y-hidden {
 .v-date-picker-month__day--selected.v-date-picker-month__day--end.v-date-picker-month__day--week-start .v-date-picker-month__day--range,
 .v-date-picker-month__day--selected.v-date-picker-month__day--start.v-date-picker-month__day--week-end .v-date-picker-month__day--range {
   display: none;
+}.v-date-picker-years {
+  height: 308px;
+  overflow-y: scroll;
+}
+
+.v-date-picker-years__content {
+  display: grid;
+  flex: 1 1;
+  justify-content: space-around;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 8px 24px;
+  padding-inline-start: 36px;
+  padding-inline-end: 36px;
+}
+.v-date-picker-years__content .v-btn {
+  padding-inline-start: 8px;
+  padding-inline-end: 8px;
 }.v-infinite-scroll--horizontal {
   display: flex;
   flex-direction: row;
@@ -16362,23 +16378,6 @@ html.overflow-y-hidden {
   display: flex;
   justify-content: center;
   padding: 8px;
-}.v-date-picker-years {
-  height: 268px;
-  overflow-y: scroll;
-}
-
-.v-date-picker-years__content {
-  display: grid;
-  flex: 1 1;
-  justify-content: space-around;
-  grid-template-columns: repeat(3, 1fr);
-  grid-gap: 8px 24px;
-  padding-inline-start: 36px;
-  padding-inline-end: 36px;
-}
-.v-date-picker-years__content .v-btn {
-  padding-inline-start: 8px;
-  padding-inline-end: 8px;
 }.v-picker.v-sheet {
   box-shadow: 0px 3px 1px -2px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 2px 2px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 1px 5px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.12));
   border-radius: 4px;
@@ -16386,7 +16385,7 @@ html.overflow-y-hidden {
   grid-auto-rows: min-content;
   grid-template-areas: "title" "header" "body";
   overflow: hidden;
-  width: 358px;
+  width: 360px;
 }
 .v-picker.v-sheet.v-picker--with-actions {
   grid-template-areas: "title" "header" "body" "actions";

package/dist/vuetify-labs.d.ts

@@ -72016,9 +72016,6 @@ declare const VDatePicker: {
         $: vue.ComponentInternalInstance;
         $data: {};
         $props: {
-            transition?: NonNullable<string | boolean | (vue.TransitionProps & {
-                component?: vue.Component | undefined;
-            })> | undefined;
             header?: string | undefined;
             style?: vue.StyleValue | undefined;
             title?: string | undefined;
@@ -72151,9 +72148,6 @@ declare const VDatePicker: {
         $emit: ((event: "update:modelValue", date: any[]) => void) & ((event: "update:focused", focused: boolean) => void) & ((event: "update:inputMode", inputMode: "calendar" | "keyboard") => void) & ((event: "update:displayDate", date: any) => void) & ((event: "update:viewMode", viewMode: "month" | "year") => void) & ((event: "click:cancel") => void) & ((event: "click:save") => void);
         $el: any;
         $options: vue.ComponentOptionsBase<{
-            transition: NonNullable<string | boolean | (vue.TransitionProps & {
-                component?: vue.Component | undefined;
-            })>;
             header: string;
             style: vue.StyleValue;
             title: string;
@@ -72236,9 +72230,6 @@ declare const VDatePicker: {
             'click:cancel': () => true;
             'click:save': () => true;
         }, string, {
-            transition: NonNullable<string | boolean | (vue.TransitionProps & {
-                component?: vue.Component | undefined;
-            })>;
             header: string;
             style: vue.StyleValue;
             title: string;
@@ -72292,9 +72283,6 @@ declare const VDatePicker: {
         $nextTick: typeof vue.nextTick;
         $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...args: any) => any, options?: vue.WatchOptions<boolean> | undefined): vue.WatchStopHandle;
     } & {
-        transition: NonNullable<string | boolean | (vue.TransitionProps & {
-            component?: vue.Component | undefined;
-        })>;
         header: string;
         style: vue.StyleValue;
         title: string;
@@ -72373,9 +72361,6 @@ declare const VDatePicker: {
     __isTeleport?: undefined;
     __isSuspense?: undefined;
 } & vue.ComponentOptionsBase<{
-    transition: NonNullable<string | boolean | (vue.TransitionProps & {
-        component?: vue.Component | undefined;
-    })>;
     header: string;
     style: vue.StyleValue;
     title: string;
@@ -72458,9 +72443,6 @@ declare const VDatePicker: {
     'click:cancel': () => true;
     'click:save': () => true;
 }, string, {
-    transition: NonNullable<string | boolean | (vue.TransitionProps & {
-        component?: vue.Component | undefined;
-    })>;
     header: string;
     style: vue.StyleValue;
     title: string;
@@ -72571,20 +72553,6 @@ declare const VDatePicker: {
         type: StringConstructor[];
         default: string;
     };
-    transition: Omit<{
-        type: vue.PropType<string | boolean | (vue.TransitionProps & {
-            component?: vue.Component | undefined;
-        })>;
-        default: string;
-        validator: (val: unknown) => boolean;
-    }, "type" | "default"> & {
-        type: vue.PropType<NonNullable<string | boolean | (vue.TransitionProps & {
-            component?: vue.Component | undefined;
-        })>>;
-        default: NonNullable<string | boolean | (vue.TransitionProps & {
-            component?: vue.Component | undefined;
-        })>;
-    };
     inputMode: {
         type: vue.PropType<"calendar" | "keyboard">;
         default: string;
@@ -72692,20 +72660,6 @@ declare const VDatePicker: {
         type: StringConstructor[];
         default: string;
     };
-    transition: Omit<{
-        type: vue.PropType<string | boolean | (vue.TransitionProps & {
-            component?: vue.Component | undefined;
-        })>;
-        default: string;
-        validator: (val: unknown) => boolean;
-    }, "type" | "default"> & {
-        type: vue.PropType<NonNullable<string | boolean | (vue.TransitionProps & {
-            component?: vue.Component | undefined;
-        })>>;
-        default: NonNullable<string | boolean | (vue.TransitionProps & {
-            component?: vue.Component | undefined;
-        })>;
-    };
     inputMode: {
         type: vue.PropType<"calendar" | "keyboard">;
         default: string;

package/dist/vuetify-labs.esm.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.3.4-master.2023-06-14
+* Vuetify v3.3.4-master.2023-06-16
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -19104,12 +19104,14 @@ function useVirtual(props, items, offset) {
     const direction = scrollTop < lastScrollTop ? UP : DOWN;
     const midPointIndex = calculateMidPointIndex(scrollTop + height / 2);
     const buffer = Math.round(visibleItems.value / 3);
-    if (direction === UP && midPointIndex <= first.value + buffer * 2 - 1) {
-      first.value = clamp(midPointIndex - buffer, 0, items.value.length);
-    } else if (direction === DOWN && midPointIndex >= first.value + buffer * 2 - 1) {
-      first.value = clamp(midPointIndex - buffer, 0, items.value.length - visibleItems.value);
+    const firstIndex = midPointIndex - buffer;
+    const lastIndex = first.value + buffer * 2 - 1;
+    if (direction === UP && midPointIndex <= lastIndex) {
+      first.value = clamp(firstIndex, 0, items.value.length);
+    } else if (direction === DOWN && midPointIndex >= lastIndex) {
+      first.value = clamp(firstIndex, 0, items.value.length - visibleItems.value);
     }
-    lastScrollTop = containerRef.value.scrollTop;
+    lastScrollTop = scrollTop;
   }
   function scrollToIndex(index) {
     if (!containerRef.value) return;
@@ -22576,9 +22578,6 @@ const makeVDatePickerProps = propsFactory({
   },
   hideActions: Boolean,
   ...makeDateProps(),
-  ...makeTransitionProps({
-    transition: 'fade'
-  }),
   ...makeVDatePickerControlsProps(),
   ...makeVDatePickerMonthProps(),
   ...makeVDatePickerYearsProps(),
@@ -22663,16 +22662,19 @@ const VDatePicker = genericComponent()({
           "onUpdate:displayDate": $event => displayDate.value = $event,
           "viewMode": viewMode.value,
           "onUpdate:viewMode": $event => viewMode.value = $event
-        }), null), createVNode(MaybeTransition, {
-          "transition": props.transition,
-          "mode": "out-in"
+        }), null), createVNode(VFadeTransition, {
+          "hideOnLeave": true
         }, {
-          default: () => [viewMode.value === 'month' ? createVNode(VDatePickerMonth, mergeProps(datePickerMonthProps, {
+          default: () => [viewMode.value === 'month' ? createVNode(VDatePickerMonth, mergeProps({
+            "key": "date-picker-month"
+          }, datePickerMonthProps, {
             "modelValue": model.value,
             "onUpdate:modelValue": $event => model.value = $event,
             "displayDate": displayDate.value,
             "onUpdate:displayDate": $event => displayDate.value = $event
-          }), null) : createVNode(VDatePickerYears, mergeProps(datePickerYearsProps, {
+          }), null) : createVNode(VDatePickerYears, mergeProps({
+            "key": "date-picker-years"
+          }, datePickerYearsProps, {
             "displayDate": displayDate.value,
             "onUpdate:displayDate": $event => displayDate.value = $event,
             "viewMode": viewMode.value,
@@ -23417,7 +23419,7 @@ function createVuetify$1() {
     date
   };
 }
-const version$1 = "3.3.4-master.2023-06-14";
+const version$1 = "3.3.4-master.2023-06-16";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -23431,7 +23433,7 @@ function inject(key) {
 
 /* eslint-disable local-rules/sort-imports */
 
-const version = "3.3.4-master.2023-06-14";
+const version = "3.3.4-master.2023-06-16";
 
 /* eslint-disable local-rules/sort-imports */