@vuetify/nightly 3.4.0-dev.2023-11-09 → 3.4.0-dev.2023-12-01

package/dist/vuetify.esm.js

@@ -1,10 +1,10 @@
 /*!
-* Vuetify v3.4.0-dev.2023-11-09
+* Vuetify v3.4.0-dev.2023-12-01
 * Forged by John Leider
 * Released under the MIT License.
 */
 
-import { Fragment, reactive, computed, watchEffect, toRefs, capitalize, isVNode, Comment, unref, warn, ref, provide, shallowRef, inject as inject$1, defineComponent as defineComponent$1, camelize, h, getCurrentInstance as getCurrentInstance$1, onBeforeUnmount, watch, readonly, onDeactivated, onActivated, onMounted, onScopeDispose, effectScope, toRaw, createVNode, TransitionGroup, Transition, mergeProps, onBeforeMount, nextTick, withDirectives, resolveDirective, vShow, isRef, toRef, Text, resolveDynamicComponent, Teleport, cloneVNode, createTextVNode, onUnmounted, withModifiers, toDisplayString, onBeforeUpdate, vModelText } from 'vue';
+import { Fragment, reactive, computed, watchEffect, toRefs, capitalize, isVNode, Comment, unref, warn, ref, provide, shallowRef, inject as inject$1, defineComponent as defineComponent$1, camelize, h, getCurrentInstance as getCurrentInstance$1, onBeforeUnmount, watch, readonly, onDeactivated, onActivated, onMounted, onScopeDispose, effectScope, toRaw, createVNode, TransitionGroup, Transition, mergeProps, isRef, toRef, onBeforeMount, nextTick, withDirectives, resolveDirective, vShow, Text, resolveDynamicComponent, Teleport, cloneVNode, createTextVNode, onUnmounted, withModifiers, toDisplayString, onBeforeUpdate, vModelText } from 'vue';
 
 // Types
 // eslint-disable-line vue/prefer-import-from-vue
@@ -2989,6 +2989,101 @@ const VResponsive = genericComponent()({
 
 // Types
 
+// Composables
+function useColor(colors) {
+  return destructComputed(() => {
+    const classes = [];
+    const styles = {};
+    if (colors.value.background) {
+      if (isCssColor(colors.value.background)) {
+        styles.backgroundColor = colors.value.background;
+        if (!colors.value.text && isParsableColor(colors.value.background)) {
+          const backgroundColor = parseColor(colors.value.background);
+          if (backgroundColor.a == null || backgroundColor.a === 1) {
+            const textColor = getForeground(backgroundColor);
+            styles.color = textColor;
+            styles.caretColor = textColor;
+          }
+        }
+      } else {
+        classes.push(`bg-${colors.value.background}`);
+      }
+    }
+    if (colors.value.text) {
+      if (isCssColor(colors.value.text)) {
+        styles.color = colors.value.text;
+        styles.caretColor = colors.value.text;
+      } else {
+        classes.push(`text-${colors.value.text}`);
+      }
+    }
+    return {
+      colorClasses: classes,
+      colorStyles: styles
+    };
+  });
+}
+function useTextColor(props, name) {
+  const colors = computed(() => ({
+    text: isRef(props) ? props.value : name ? props[name] : null
+  }));
+  const {
+    colorClasses: textColorClasses,
+    colorStyles: textColorStyles
+  } = useColor(colors);
+  return {
+    textColorClasses,
+    textColorStyles
+  };
+}
+function useBackgroundColor(props, name) {
+  const colors = computed(() => ({
+    background: isRef(props) ? props.value : name ? props[name] : null
+  }));
+  const {
+    colorClasses: backgroundColorClasses,
+    colorStyles: backgroundColorStyles
+  } = useColor(colors);
+  return {
+    backgroundColorClasses,
+    backgroundColorStyles
+  };
+}
+
+// Utilities
+
+// Types
+
+// Composables
+const makeRoundedProps = propsFactory({
+  rounded: {
+    type: [Boolean, Number, String],
+    default: undefined
+  }
+}, 'rounded');
+function useRounded(props) {
+  let name = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : getCurrentInstanceName();
+  const roundedClasses = computed(() => {
+    const rounded = isRef(props) ? props.value : props.rounded;
+    const classes = [];
+    if (rounded === true || rounded === '') {
+      classes.push(`${name}--rounded`);
+    } else if (typeof rounded === 'string' || rounded === 0) {
+      for (const value of String(rounded).split(' ')) {
+        classes.push(`rounded-${value}`);
+      }
+    }
+    return classes;
+  });
+  return {
+    roundedClasses
+  };
+}
+
+// Utilities
+
+// Types
+
 const makeTransitionProps = propsFactory({
   transition: {
     type: [Boolean, String, Object],
@@ -3069,6 +3164,7 @@ const Intersect = {
 const makeVImgProps = propsFactory({
   alt: String,
   cover: Boolean,
+  color: String,
   draggable: {
     type: [Boolean, String],
     default: undefined
@@ -3097,6 +3193,7 @@ const makeVImgProps = propsFactory({
   position: String,
   ...makeVResponsiveProps(),
   ...makeComponentProps(),
+  ...makeRoundedProps(),
   ...makeTransitionProps()
 }, 'VImg');
 const VImg = genericComponent()({
@@ -3115,6 +3212,13 @@ const VImg = genericComponent()({
       emit,
       slots
     } = _ref;
+    const {
+      backgroundColorClasses,
+      backgroundColorStyles
+    } = useBackgroundColor(toRef(props, 'color'));
+    const {
+      roundedClasses
+    } = useRounded(props);
     const currentSrc = shallowRef(''); // Set from srcset
     const image = ref();
     const state = shallowRef(props.eager ? 'loading' : 'idle');
@@ -3307,10 +3411,10 @@ const VImg = genericComponent()({
       return withDirectives(createVNode(VResponsive, mergeProps({
         "class": ['v-img', {
           'v-img--booting': !isBooted.value
-        }, props.class],
+        }, backgroundColorClasses.value, roundedClasses.value, props.class],
         "style": [{
           width: convertToUnit(props.width === 'auto' ? naturalWidth.value : props.width)
-        }, props.style]
+        }, backgroundColorStyles.value, props.style]
       }, responsiveProps, {
         "aspectRatio": aspectRatio.value,
         "aria-label": props.alt,
@@ -3366,71 +3470,6 @@ function useBorder(props) {
 
 // Types
 
-// Composables
-function useColor(colors) {
-  return destructComputed(() => {
-    const classes = [];
-    const styles = {};
-    if (colors.value.background) {
-      if (isCssColor(colors.value.background)) {
-        styles.backgroundColor = colors.value.background;
-        if (!colors.value.text && isParsableColor(colors.value.background)) {
-          const backgroundColor = parseColor(colors.value.background);
-          if (backgroundColor.a == null || backgroundColor.a === 1) {
-            const textColor = getForeground(backgroundColor);
-            styles.color = textColor;
-            styles.caretColor = textColor;
-          }
-        }
-      } else {
-        classes.push(`bg-${colors.value.background}`);
-      }
-    }
-    if (colors.value.text) {
-      if (isCssColor(colors.value.text)) {
-        styles.color = colors.value.text;
-        styles.caretColor = colors.value.text;
-      } else {
-        classes.push(`text-${colors.value.text}`);
-      }
-    }
-    return {
-      colorClasses: classes,
-      colorStyles: styles
-    };
-  });
-}
-function useTextColor(props, name) {
-  const colors = computed(() => ({
-    text: isRef(props) ? props.value : name ? props[name] : null
-  }));
-  const {
-    colorClasses: textColorClasses,
-    colorStyles: textColorStyles
-  } = useColor(colors);
-  return {
-    textColorClasses,
-    textColorStyles
-  };
-}
-function useBackgroundColor(props, name) {
-  const colors = computed(() => ({
-    background: isRef(props) ? props.value : name ? props[name] : null
-  }));
-  const {
-    colorClasses: backgroundColorClasses,
-    colorStyles: backgroundColorStyles
-  } = useColor(colors);
-  return {
-    backgroundColorClasses,
-    backgroundColorStyles
-  };
-}
-
-// Utilities
-
-// Types
-
 // Composables
 const makeElevationProps = propsFactory({
   elevation: {
@@ -3457,36 +3496,6 @@ function useElevation(props) {
   };
 }
 
-// Utilities
-
-// Types
-
-// Composables
-const makeRoundedProps = propsFactory({
-  rounded: {
-    type: [Boolean, Number, String],
-    default: undefined
-  }
-}, 'rounded');
-function useRounded(props) {
-  let name = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : getCurrentInstanceName();
-  const roundedClasses = computed(() => {
-    const rounded = isRef(props) ? props.value : props.rounded;
-    const classes = [];
-    if (rounded === true || rounded === '') {
-      classes.push(`${name}--rounded`);
-    } else if (typeof rounded === 'string' || rounded === 0) {
-      for (const value of String(rounded).split(' ')) {
-        classes.push(`rounded-${value}`);
-      }
-    }
-    return classes;
-  });
-  return {
-    roundedClasses
-  };
-}
-
 // Types
 
 const allowedDensities$1 = [null, 'prominent', 'default', 'comfortable', 'compact'];
@@ -25103,7 +25112,7 @@ function createVuetify$1() {
     date
   };
 }
-const version$1 = "3.4.0-dev.2023-11-09";
+const version$1 = "3.4.0-dev.2023-12-01";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -25128,7 +25137,7 @@ const createVuetify = function () {
     ...options
   });
 };
-const version = "3.4.0-dev.2023-11-09";
+const version = "3.4.0-dev.2023-12-01";
 createVuetify.version = version;
 
 export { components, createVuetify, directives, useDate, useDefaults, useDisplay, useLayout, useLocale, useRtl, useTheme, version };