@vuetify/nightly 3.0.0-next-20220107.0 → 3.0.0-next-20220112.0

package/dist/json/attributes.json

@@ -2779,29 +2779,25 @@
     "type": "any",
     "description": "Show buttons for going to first and last page"
   },
-  "v-pagination/tag": {
-    "type": "string",
-    "description": "Specify a custom tag used on the root element."
-  },
-  "v-pagination/elevation": {
-    "type": "number|string",
-    "description": "Designates an elevation applied to the component between 0 and 24. You can find more information on the [elevation page](/styles/elevation)."
+  "v-pagination/border": {
+    "type": "boolean|number|string",
+    "description": "Applies border styles to component."
   },
   "v-pagination/density": {
     "type": "string",
     "description": "Adjusts the spacing within the component. Available options are: **default**, **comfortable**, and **compact**."
   },
-  "v-pagination/rounded": {
-    "type": "boolean|number|string",
-    "description": ""
+  "v-pagination/elevation": {
+    "type": "number|string",
+    "description": "Designates an elevation applied to the component between 0 and 24. You can find more information on the [elevation page](/styles/elevation)."
   },
   "v-pagination/size": {
     "type": "string|number",
     "description": "Sets the height and width of the component. Default unit is px. Can also use the following predefined sizes: **x-small**, **small**, **default**, **large**, and **x-large**."
   },
-  "v-pagination/border": {
-    "type": "boolean|number|string",
-    "description": "Applies border styles to component."
+  "v-pagination/tag": {
+    "type": "string",
+    "description": "Specify a custom tag used on the root element."
   },
   "v-pagination/theme": {
     "type": "string",

package/dist/json/tags.json

@@ -1061,7 +1061,6 @@
       "page-aria-label",
       "prev-icon",
       "previous-aria-label",
-      "rounded",
       "show-first-last-page",
       "size",
       "start",

package/dist/json/web-types.json

@@ -2,7 +2,7 @@
   "$schema": "http://json.schemastore.org/web-types",
   "framework": "vue",
   "name": "vuetify",
-  "version": "3.0.0-next-20220107.0",
+  "version": "3.0.0-next-20220112.0",
   "contributions": {
     "html": {
       "types-syntax": "typescript",
@@ -9633,22 +9633,14 @@
               }
             },
             {
-              "name": "tag",
-              "description": "Specify a custom tag used on the root element.",
-              "doc-url": "https://vuetifyjs.com/api/v-pagination#props",
-              "default": "'nav'",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              }
-            },
-            {
-              "name": "elevation",
-              "description": "Designates an elevation applied to the component between 0 and 24. You can find more information on the [elevation page](/styles/elevation).",
+              "name": "border",
+              "description": "Applies border styles to component.",
               "doc-url": "https://vuetifyjs.com/api/v-pagination#props",
+              "default": "false",
               "value": {
                 "kind": "expression",
                 "type": [
+                  "boolean",
                   "number",
                   "string"
                 ]
@@ -9665,14 +9657,12 @@
               }
             },
             {
-              "name": "rounded",
-              "description": "",
+              "name": "elevation",
+              "description": "Designates an elevation applied to the component between 0 and 24. You can find more information on the [elevation page](/styles/elevation).",
               "doc-url": "https://vuetifyjs.com/api/v-pagination#props",
-              "default": "false",
               "value": {
                 "kind": "expression",
                 "type": [
-                  "boolean",
                   "number",
                   "string"
                 ]
@@ -9692,17 +9682,13 @@
               }
             },
             {
-              "name": "border",
-              "description": "Applies border styles to component.",
+              "name": "tag",
+              "description": "Specify a custom tag used on the root element.",
               "doc-url": "https://vuetifyjs.com/api/v-pagination#props",
-              "default": "false",
+              "default": "'nav'",
               "value": {
                 "kind": "expression",
-                "type": [
-                  "boolean",
-                  "number",
-                  "string"
-                ]
+                "type": "string"
               }
             },
             {

package/dist/vuetify.css

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.0.0-next-20220107.0
+* Vuetify v3.0.0-next-20220112.0
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -20035,24 +20035,8 @@ html.overflow-y-hidden {
 }
 
 .v-pagination .v-btn {
-  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);
   border-radius: 4px;
 }
-.v-pagination .v-btn.v-btn--density-default {
-  height: calc(var(--v-btn-height) + 0px);
-  width: calc(var(--v-btn-height) + 0px);
-}
-.v-pagination .v-btn.v-btn--density-comfortable {
-  height: calc(var(--v-btn-height) + -4px);
-  width: calc(var(--v-btn-height) + -4px);
-}
-.v-pagination .v-btn.v-btn--density-compact {
-  height: calc(var(--v-btn-height) + -8px);
-  width: calc(var(--v-btn-height) + -8px);
-}
-.v-pagination__list .v-btn--elevated {
-  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-pagination__item--is-active .v-btn__overlay {
   opacity: var(--v-border-opacity);
 }.v-btn-group {

package/dist/vuetify.d.ts

@@ -6567,6 +6567,7 @@ declare const VMessages: vue.DefineComponent<{
                 leaveAbsolute: boolean;
                 origin: string;
             }>;
+            leaveAbsolute: boolean;
             group: boolean;
         }>;
         default: string | false | (vue.TransitionProps & {
@@ -6605,10 +6606,12 @@ declare const VMessages: vue.DefineComponent<{
                 leaveAbsolute: boolean;
                 origin: string;
             }>;
+            leaveAbsolute: boolean;
             group: boolean;
         };
     };
     active: BooleanConstructor;
+    color: StringConstructor;
     value: {
         type: PropType<string | string[]>;
         default: () => never[];
@@ -6616,6 +6619,7 @@ declare const VMessages: vue.DefineComponent<{
 }, () => JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<{
     transition?: unknown;
     active?: unknown;
+    color?: unknown;
     value?: unknown;
 } & {
     value: string | string[];
@@ -6655,10 +6659,13 @@ declare const VMessages: vue.DefineComponent<{
             leaveAbsolute: boolean;
             origin: string;
         }>;
+        leaveAbsolute: boolean;
         group: boolean;
     };
     active: boolean;
-} & {}>, {
+} & {
+    color?: string | undefined;
+}>, {
     value: string | string[];
     transition: string | false | (vue.TransitionProps & {
         component?: vue.Component<any, any, any, vue.ComputedOptions, vue.MethodOptions> | undefined;
@@ -6696,6 +6703,7 @@ declare const VMessages: vue.DefineComponent<{
             leaveAbsolute: boolean;
             origin: string;
         }>;
+        leaveAbsolute: boolean;
         group: boolean;
     };
     active: boolean;
@@ -6837,31 +6845,27 @@ declare const VPagination: vue.DefineComponent<{
         default: "text" | "contained" | "outlined" | "plain" | "contained-text";
     };
     theme: StringConstructor;
-    border: (StringConstructor | NumberConstructor | BooleanConstructor)[];
-    size: {
-        type: (StringConstructor | NumberConstructor)[];
+    tag: Omit<{
+        type: StringConstructor;
+        default: string;
+    }, "default" | "type"> & {
+        type: vue.PropType<string>;
         default: string;
     };
-    rounded: {
-        type: (StringConstructor | NumberConstructor | BooleanConstructor)[];
-        default: undefined;
-    };
-    density: {
-        type: vue.PropType<"default" | "comfortable" | "compact" | null>;
+    size: {
+        type: (StringConstructor | NumberConstructor)[];
         default: string;
-        validator: (v: any) => boolean;
     };
     elevation: {
         type: (StringConstructor | NumberConstructor)[];
         validator(v: any): boolean;
     };
-    tag: Omit<{
-        type: StringConstructor;
-        default: string;
-    }, "default" | "type"> & {
-        type: vue.PropType<string>;
+    density: {
+        type: vue.PropType<"default" | "comfortable" | "compact" | null>;
         default: string;
+        validator: (v: any) => boolean;
     };
+    border: (StringConstructor | NumberConstructor | BooleanConstructor)[];
     start: {
         type: (StringConstructor | NumberConstructor)[];
         default: number;
@@ -6937,12 +6941,11 @@ declare const VPagination: vue.DefineComponent<{
     textColor?: unknown;
     variant?: unknown;
     theme?: unknown;
-    border?: unknown;
+    tag?: unknown;
     size?: unknown;
-    rounded?: unknown;
-    density?: unknown;
     elevation?: unknown;
-    tag?: unknown;
+    density?: unknown;
+    border?: unknown;
     start?: unknown;
     modelValue?: unknown;
     disabled?: unknown;
@@ -6987,7 +6990,6 @@ declare const VPagination: vue.DefineComponent<{
     theme?: string | undefined;
     border?: string | number | boolean | undefined;
     elevation?: string | number | undefined;
-    rounded?: string | number | boolean | undefined;
     color?: string | undefined;
     textColor?: string | undefined;
     totalVisible?: string | number | undefined;
@@ -7002,7 +7004,6 @@ declare const VPagination: vue.DefineComponent<{
     tag: string;
     ariaLabel: string;
     density: "default" | "comfortable" | "compact" | null;
-    rounded: string | number | boolean;
     modelValue: number;
     start: string | number;
     ellipsis: string;

package/dist/vuetify.esm.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.0.0-next-20220107.0
+* Vuetify v3.0.0-next-20220112.0
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -247,6 +247,9 @@ function convertToUnit(str) {
 function isObject(obj) {
   return obj !== null && typeof obj === 'object' && !Array.isArray(obj);
 }
+function isComponentInstance(obj) {
+  return obj == null ? void 0 : obj.$el;
+} // KeyboardEvent.keyCode aliases
 
 const keyCodes = Object.freeze({
   enter: 13,
@@ -4777,6 +4780,7 @@ const VMessages = defineComponent({
   name: 'VMessages',
   props: {
     active: Boolean,
+    color: String,
     value: {
       type: [Array, String],
       default: () => []
@@ -4784,6 +4788,7 @@ const VMessages = defineComponent({
     ...makeTransitionProps({
       transition: {
         component: VSlideYTransition,
+        leaveAbsolute: true,
         group: true
       }
     })
@@ -4794,20 +4799,25 @@ const VMessages = defineComponent({
       slots
     } = _ref;
     const messages = computed(() => wrapInArray(props.value));
+    const {
+      textColorClasses,
+      textColorStyles
+    } = useTextColor(computed(() => props.color));
     return () => {
       var _slots$default;
 
       return createVNode(MaybeTransition, {
         "transition": props.transition,
         "tag": "div",
-        "class": "v-messages"
+        "class": ['v-messages', textColorClasses.value],
+        "style": textColorStyles.value
       }, {
         default: () => [messages.value.length > 0 && props.active && messages.value.map((message, i) => createVNode("div", {
           "class": "v-messages__message",
-          "key": i
+          "key": `${i}-${messages.value}`
         }, [message])), slots == null ? void 0 : (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots)],
         _: 1
-      }, 8, ["transition"]);
+      }, 8, ["transition", "class", "style"]);
     };
   }
 
@@ -5111,10 +5121,11 @@ const VInput = genericComponent()({
         "class": "v-input__details"
       }, [createVNode(VMessages, {
         "active": showMessages,
-        "value": errorMessages.value || (hasMessages ? props.messages : props.hint)
+        "color": isValid.value === false ? 'error' : undefined,
+        "value": errorMessages.value.length > 0 ? errorMessages.value : hasMessages ? props.messages : props.hint
       }, {
         default: slots.messages
-      }, 8, ["active", "value"]), (_slots$details = slots.details) == null ? void 0 : _slots$details.call(slots, slotProps.value)])], 2);
+      }, 8, ["active", "color", "value"]), (_slots$details = slots.details) == null ? void 0 : _slots$details.call(slots, slotProps.value)])], 2);
     });
     return {
       isValid,
@@ -5819,6 +5830,14 @@ function useActivator(props, isActive) {
 
     return events;
   });
+  const activatorRef = ref();
+  watchEffect(() => {
+    if (!activatorRef.value) return;
+    nextTick(() => {
+      const activator = activatorRef.value;
+      activatorEl.value = isComponentInstance(activator) ? activator.$el : activator;
+    });
+  });
   let scope;
   watch(() => !!props.activator, val => {
     if (val && IN_BROWSER) {
@@ -5826,6 +5845,7 @@ function useActivator(props, isActive) {
       scope.run(() => {
         _useActivator(props, {
           activatorEl,
+          activatorRef,
           activatorEvents
         });
       });
@@ -5838,6 +5858,7 @@ function useActivator(props, isActive) {
   });
   return {
     activatorEl,
+    activatorRef,
     activatorEvents
   };
 }
@@ -6623,6 +6644,7 @@ const VOverlay = genericComponent()({
     }));
     const {
       activatorEl,
+      activatorRef,
       activatorEvents
     } = useActivator(props, isActive);
     const {
@@ -6717,8 +6739,7 @@ const VOverlay = genericComponent()({
       return createVNode(Fragment, null, [(_slots$activator = slots.activator) == null ? void 0 : _slots$activator.call(slots, {
         isActive: isActive.value,
         props: mergeProps({
-          modelValue: isActive.value,
-          'onUpdate:modelValue': val => isActive.value = val
+          ref: activatorRef
         }, toHandlers(activatorEvents.value), props.activatorProps)
       }), createVNode(Teleport, {
         "disabled": !teleportTarget.value,
@@ -10151,14 +10172,13 @@ const VPagination = defineComponent({
       default: '...'
     },
     showFirstLastPage: Boolean,
+    ...makeBorderProps(),
+    ...makeDensityProps(),
+    ...makeElevationProps(),
+    ...makeSizeProps(),
     ...makeTagProps({
       tag: 'nav'
     }),
-    ...makeElevationProps(),
-    ...makeDensityProps(),
-    ...makeRoundedProps(),
-    ...makeSizeProps(),
-    ...makeBorderProps(),
     ...makeThemeProps(),
     ...makeVariantProps({
       variant: 'text'
@@ -10252,12 +10272,15 @@ const VPagination = defineComponent({
       refs,
       updateRef
     } = useRefs();
+    provideDefaults({
+      VBtn: {
+        border: toRef(props, 'border'),
+        density: toRef(props, 'density'),
+        size: toRef(props, 'size'),
+        variant: toRef(props, 'variant')
+      }
+    });
     const items = computed(() => {
-      const sharedProps = {
-        density: props.density,
-        rounded: props.rounded,
-        size: props.size
-      };
       return range.value.map((item, index) => {
         const ref = e => updateRef(e, index);
 
@@ -10265,13 +10288,11 @@ const VPagination = defineComponent({
           return {
             isActive: false,
             page: item,
-            props: { ...sharedProps,
+            props: {
               ref,
               ellipsis: true,
               icon: true,
-              disabled: true,
-              variant: props.variant,
-              border: props.border
+              disabled: true
             }
           };
         } else {
@@ -10279,14 +10300,12 @@ const VPagination = defineComponent({
           return {
             isActive,
             page: n(item),
-            props: { ...sharedProps,
+            props: {
               ref,
               ellipsis: false,
               icon: true,
               disabled: !!props.disabled || props.length < 2,
               elevation: props.elevation,
-              variant: props.variant,
-              border: props.border,
               color: isActive ? props.color : undefined,
               ariaCurrent: isActive,
               ariaLabel: t(isActive ? props.currentPageAriaLabel : props.pageAriaLabel, index + 1),
@@ -10297,39 +10316,31 @@ const VPagination = defineComponent({
       });
     });
     const controls = computed(() => {
-      const sharedProps = {
-        color: undefined,
-        density: props.density,
-        rounded: props.rounded,
-        size: props.size,
-        variant: props.variant,
-        border: props.border
-      };
       const prevDisabled = !!props.disabled || page.value <= start.value;
       const nextDisabled = !!props.disabled || page.value >= start.value + length.value - 1;
       return {
-        first: props.showFirstLastPage ? { ...sharedProps,
+        first: props.showFirstLastPage ? {
           icon: isRtl.value ? props.lastIcon : props.firstIcon,
           onClick: e => setValue(e, start.value, 'first'),
           disabled: prevDisabled,
           ariaLabel: t(props.firstAriaLabel),
           ariaDisabled: prevDisabled
         } : undefined,
-        prev: { ...sharedProps,
+        prev: {
           icon: isRtl.value ? props.nextIcon : props.prevIcon,
           onClick: e => setValue(e, page.value - 1, 'prev'),
           disabled: prevDisabled,
           ariaLabel: t(props.previousAriaLabel),
           ariaDisabled: prevDisabled
         },
-        next: { ...sharedProps,
+        next: {
           icon: isRtl.value ? props.prevIcon : props.nextIcon,
           onClick: e => setValue(e, page.value + 1, 'next'),
           disabled: nextDisabled,
           ariaLabel: t(props.nextAriaLabel),
           ariaDisabled: nextDisabled
         },
-        last: props.showFirstLastPage ? { ...sharedProps,
+        last: props.showFirstLastPage ? {
           icon: isRtl.value ? props.firstIcon : props.lastIcon,
           onClick: e => setValue(e, start.value + length.value - 1, 'last'),
           disabled: nextDisabled,
@@ -13308,7 +13319,7 @@ const createVuetify = function () {
     ...options
   });
 };
-const version = "3.0.0-next-20220107.0";
+const version = "3.0.0-next-20220112.0";
 
 export { components, createVuetify, directives, provideRtl, useDisplay, useLayout, useRtl, useTheme, version };
 //# sourceMappingURL=vuetify.esm.js.map