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

package/dist/vuetify.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.
 */
@@ -251,6 +251,9 @@
   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,
@@ -4781,6 +4784,7 @@
     name: 'VMessages',
     props: {
       active: Boolean,
+      color: String,
       value: {
         type: [Array, String],
         default: () => []
@@ -4788,6 +4792,7 @@
       ...makeTransitionProps({
         transition: {
           component: VSlideYTransition,
+          leaveAbsolute: true,
           group: true
         }
       })
@@ -4798,20 +4803,25 @@
         slots
       } = _ref;
       const messages = vue.computed(() => wrapInArray(props.value));
+      const {
+        textColorClasses,
+        textColorStyles
+      } = useTextColor(vue.computed(() => props.color));
       return () => {
         var _slots$default;
 
         return vue.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) => vue.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"]);
       };
     }
 
@@ -5115,10 +5125,11 @@
           "class": "v-input__details"
         }, [vue.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,
@@ -5823,6 +5834,14 @@
 
       return events;
     });
+    const activatorRef = vue.ref();
+    vue.watchEffect(() => {
+      if (!activatorRef.value) return;
+      vue.nextTick(() => {
+        const activator = activatorRef.value;
+        activatorEl.value = isComponentInstance(activator) ? activator.$el : activator;
+      });
+    });
     let scope;
     vue.watch(() => !!props.activator, val => {
       if (val && IN_BROWSER) {
@@ -5830,6 +5849,7 @@
         scope.run(() => {
           _useActivator(props, {
             activatorEl,
+            activatorRef,
             activatorEvents
           });
         });
@@ -5842,6 +5862,7 @@
     });
     return {
       activatorEl,
+      activatorRef,
       activatorEvents
     };
   }
@@ -6627,6 +6648,7 @@
       }));
       const {
         activatorEl,
+        activatorRef,
         activatorEvents
       } = useActivator(props, isActive);
       const {
@@ -6721,8 +6743,7 @@
         return vue.createVNode(vue.Fragment, null, [(_slots$activator = slots.activator) == null ? void 0 : _slots$activator.call(slots, {
           isActive: isActive.value,
           props: vue.mergeProps({
-            modelValue: isActive.value,
-            'onUpdate:modelValue': val => isActive.value = val
+            ref: activatorRef
           }, vue.toHandlers(activatorEvents.value), props.activatorProps)
         }), vue.createVNode(vue.Teleport, {
           "disabled": !teleportTarget.value,
@@ -10155,14 +10176,13 @@
         default: '...'
       },
       showFirstLastPage: Boolean,
+      ...makeBorderProps(),
+      ...makeDensityProps(),
+      ...makeElevationProps(),
+      ...makeSizeProps(),
       ...makeTagProps({
         tag: 'nav'
       }),
-      ...makeElevationProps(),
-      ...makeDensityProps(),
-      ...makeRoundedProps(),
-      ...makeSizeProps(),
-      ...makeBorderProps(),
       ...makeThemeProps(),
       ...makeVariantProps({
         variant: 'text'
@@ -10256,12 +10276,15 @@
         refs,
         updateRef
       } = useRefs();
+      provideDefaults({
+        VBtn: {
+          border: vue.toRef(props, 'border'),
+          density: vue.toRef(props, 'density'),
+          size: vue.toRef(props, 'size'),
+          variant: vue.toRef(props, 'variant')
+        }
+      });
       const items = vue.computed(() => {
-        const sharedProps = {
-          density: props.density,
-          rounded: props.rounded,
-          size: props.size
-        };
         return range.value.map((item, index) => {
           const ref = e => updateRef(e, index);
 
@@ -10269,13 +10292,11 @@
             return {
               isActive: false,
               page: item,
-              props: { ...sharedProps,
+              props: {
                 ref,
                 ellipsis: true,
                 icon: true,
-                disabled: true,
-                variant: props.variant,
-                border: props.border
+                disabled: true
               }
             };
           } else {
@@ -10283,14 +10304,12 @@
             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),
@@ -10301,39 +10320,31 @@
         });
       });
       const controls = vue.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,
@@ -13312,7 +13323,7 @@
       ...options
     });
   };
-  const version = "3.0.0-next-20220107.0";
+  const version = "3.0.0-next-20220112.0";
 
   exports.components = components;
   exports.createVuetify = createVuetify;