vuetify 3.5.3 → 3.5.5

package/dist/vuetify-labs.esm.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.5.3
+* Vuetify v3.5.5
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -545,6 +545,16 @@ function defer(timeout, cb) {
   const timeoutId = window.setTimeout(cb, timeout);
   return () => window.clearTimeout(timeoutId);
 }
+function isClickInsideElement(event, targetDiv) {
+  const mouseX = event.clientX;
+  const mouseY = event.clientY;
+  const divRect = targetDiv.getBoundingClientRect();
+  const divLeft = divRect.left;
+  const divTop = divRect.top;
+  const divRight = divRect.right;
+  const divBottom = divRect.bottom;
+  return mouseX >= divLeft && mouseX <= divRight && mouseY >= divTop && mouseY <= divBottom;
+}
 
 // Utilities
 const block = ['top', 'bottom'];
@@ -2156,7 +2166,7 @@ function provideLocale(props) {
   provide(LocaleSymbol, data);
   return data;
 }
-function genDefaults$2() {
+function genDefaults$3() {
   return {
     af: false,
     ar: true,
@@ -2203,7 +2213,7 @@ function genDefaults$2() {
   };
 }
 function createRtl(i18n, options) {
-  const rtl = ref(options?.rtl ?? genDefaults$2());
+  const rtl = ref(options?.rtl ?? genDefaults$3());
   const isRtl = computed(() => rtl.value[i18n.current.value] ?? false);
   return {
     isRtl,
@@ -2236,7 +2246,7 @@ const ThemeSymbol = Symbol.for('vuetify:theme');
 const makeThemeProps = propsFactory({
   theme: String
 }, 'theme');
-function genDefaults$1() {
+function genDefaults$2() {
   return {
     defaultTheme: 'light',
     variations: {
@@ -2323,8 +2333,8 @@ function genDefaults$1() {
   };
 }
 function parseThemeOptions() {
-  let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : genDefaults$1();
-  const defaults = genDefaults$1();
+  let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : genDefaults$2();
+  const defaults = genDefaults$2();
   if (!options) return {
     ...defaults,
     isDisabled: true
@@ -3107,12 +3117,14 @@ const makeRoundedProps = propsFactory({
   rounded: {
     type: [Boolean, Number, String],
     default: undefined
-  }
+  },
+  tile: Boolean
 }, '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 tile = isRef(props) ? props.value : props.tile;
     const classes = [];
     if (rounded === true || rounded === '') {
       classes.push(`${name}--rounded`);
@@ -3120,6 +3132,8 @@ function useRounded(props) {
       for (const value of String(rounded).split(' ')) {
         classes.push(`rounded-${value}`);
       }
+    } else if (tile) {
+      classes.push('rounded-0');
     }
     return classes;
   });
@@ -4110,6 +4124,8 @@ function useGroupItem(props, injectKey) {
     vm.emit('group:selected', {
       value
     });
+  }, {
+    flush: 'sync'
   });
   return {
     id,
@@ -4445,23 +4461,27 @@ const VClassIcon = defineComponent({
     };
   }
 });
-const defaultSets = {
-  svg: {
-    component: VSvgIcon
-  },
-  class: {
-    component: VClassIcon
-  }
-};
+function genDefaults$1() {
+  return {
+    svg: {
+      component: VSvgIcon
+    },
+    class: {
+      component: VClassIcon
+    }
+  };
+}
 
 // Composables
 function createIcons(options) {
+  const sets = genDefaults$1();
+  const defaultSet = options?.defaultSet ?? 'mdi';
+  if (defaultSet === 'mdi' && !sets.mdi) {
+    sets.mdi = mdi;
+  }
   return mergeDeep({
-    defaultSet: 'mdi',
-    sets: {
-      ...defaultSets,
-      mdi
-    },
+    defaultSet,
+    sets,
     aliases: {
       ...aliases,
       /* eslint-disable max-len */
@@ -5897,7 +5917,7 @@ const VAvatar = genericComponent()({
       }, null) : props.text : createVNode(VDefaultsProvider, {
         "key": "content-defaults",
         "defaults": {
-          VAvatar: {
+          VImg: {
             cover: true,
             image: props.image
           },
@@ -5906,7 +5926,7 @@ const VAvatar = genericComponent()({
           }
         }
       }, {
-        default: () => [slots.default?.()]
+        default: () => [slots.default()]
       }), genOverlays(false, 'v-avatar')]
     }));
     return {};
@@ -6465,7 +6485,8 @@ function createForm(props) {
     errors.value = results;
     model.value = invalid > 0 ? false : valid === items.value.length ? true : null;
   }, {
-    deep: true
+    deep: true,
+    flush: 'post'
   });
   provide(FormKey, {
     register: _ref => {
@@ -10569,9 +10590,9 @@ const VMenu = genericComponent()({
       unregister() {
         --openChildren.value;
       },
-      closeParents() {
+      closeParents(e) {
         setTimeout(() => {
-          if (!openChildren.value) {
+          if (!openChildren.value && (e == null || e && !isClickInsideElement(e, overlay.value.contentEl))) {
             isActive.value = false;
             parent?.closeParents();
           }
@@ -10604,8 +10625,8 @@ const VMenu = genericComponent()({
         document.removeEventListener('focusin', onFocusIn);
       }
     });
-    function onClickOutside() {
-      parent?.closeParents();
+    function onClickOutside(e) {
+      parent?.closeParents(e);
     }
     function onKeydown(e) {
       if (props.disabled) return;
@@ -11339,9 +11360,6 @@ function useVirtual(props, items) {
       });
     });
   });
-  watch(viewportHeight, (val, oldVal) => {
-    oldVal && calculateVisibleItems();
-  });
   onScopeDispose(() => {
     updateOffsets.clear();
   });
@@ -11364,6 +11382,17 @@ function useVirtual(props, items) {
   let lastScrollTop = 0;
   let scrollVelocity = 0;
   let lastScrollTime = 0;
+  watch(viewportHeight, (val, oldVal) => {
+    if (oldVal) {
+      calculateVisibleItems();
+      if (val < oldVal) {
+        requestAnimationFrame(() => {
+          scrollVelocity = 0;
+          calculateVisibleItems();
+        });
+      }
+    }
+  });
   function handleScroll() {
     if (!containerRef.value || !markerRef.value) return;
     const scrollTop = containerRef.value.scrollTop;
@@ -11816,9 +11845,10 @@ const VSelect = genericComponent()({
       }
     }
     function select(item) {
+      const index = model.value.findIndex(selection => props.valueComparator(selection.value, item.value));
+      const add = index === -1;
       if (props.multiple) {
-        const index = model.value.findIndex(selection => props.valueComparator(selection.value, item.value));
-        if (index === -1) {
+        if (add) {
           model.value = [...model.value, item];
         } else {
           const value = [...model.value];
@@ -11826,7 +11856,7 @@ const VSelect = genericComponent()({
           model.value = value;
         }
       } else {
-        model.value = [item];
+        model.value = add ? [item] : [];
         menu.value = false;
       }
     }
@@ -12363,11 +12393,11 @@ const VAutocomplete = genericComponent()({
     }
     const isSelecting = shallowRef(false);
     function select(item) {
-      let add = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
       if (item.props.disabled) return;
+      const index = model.value.findIndex(selection => props.valueComparator(selection.value, item.value));
+      const add = index === -1;
       if (props.multiple) {
-        const index = model.value.findIndex(selection => props.valueComparator(selection.value, item.value));
-        if (index === -1) {
+        if (add) {
           model.value = [...model.value, item];
         } else {
           const value = [...model.value];
@@ -12536,7 +12566,7 @@ const VAutocomplete = genericComponent()({
           function onChipClose(e) {
             e.stopPropagation();
             e.preventDefault();
-            select(item, false);
+            select(item);
           }
           const slotProps = {
             'onClick:close': onChipClose,
@@ -15808,8 +15838,8 @@ const VColorPicker = defineComponent({
   },
   setup(props) {
     const mode = useProxiedModel(props, 'mode');
-    const lastPickedColor = ref(null);
-    const currentColor = useProxiedModel(props, 'modelValue', undefined, v => {
+    const hue = ref(null);
+    const model = useProxiedModel(props, 'modelValue', undefined, v => {
       if (v == null || v === '') return null;
       let c;
       try {
@@ -15818,24 +15848,36 @@ const VColorPicker = defineComponent({
         consoleWarn(err);
         return null;
       }
-      if (lastPickedColor.value) {
-        c = {
-          ...c,
-          h: lastPickedColor.value.h
-        };
-        lastPickedColor.value = null;
-      }
       return c;
     }, v => {
       if (!v) return null;
       return extractColor(v, props.modelValue);
     });
+    const currentColor = computed(() => {
+      return model.value ? {
+        ...model.value,
+        h: hue.value ?? model.value.h
+      } : null;
+    });
     const {
       rtlClasses
     } = useRtl();
+    let externalChange = true;
+    watch(model, v => {
+      if (!externalChange) {
+        // prevent hue shift from rgb conversion inaccuracy
+        externalChange = true;
+        return;
+      }
+      if (!v) return;
+      hue.value = v.h;
+    }, {
+      immediate: true
+    });
     const updateColor = hsva => {
-      currentColor.value = hsva;
-      lastPickedColor.value = hsva;
+      externalChange = false;
+      hue.value = hsva.h;
+      model.value = hsva;
     };
     onMounted(() => {
       if (!props.modes.includes(mode.value)) mode.value = props.modes[0];
@@ -17605,7 +17647,8 @@ function createGoTo(options, locale) {
   };
 }
 async function scrollTo(_target, _options, horizontal, goTo) {
-  const options = mergeDeep(goTo?.options, _options);
+  const property = horizontal ? 'scrollLeft' : 'scrollTop';
+  const options = mergeDeep(goTo?.options ?? genDefaults(), _options);
   const rtl = goTo?.rtl.value;
   const target = (typeof _target === 'number' ? _target : getTarget(_target)) ?? 0;
   const container = options.container === 'parent' && target instanceof HTMLElement ? target.parentElement : getContainer(options.container);
@@ -17623,25 +17666,22 @@ async function scrollTo(_target, _options, horizontal, goTo) {
     }
   }
   targetLocation += options.offset;
-  const startLocation = (horizontal ? container.scrollLeft : container.scrollTop) ?? 0;
+  const startLocation = container[property] ?? 0;
   if (targetLocation === startLocation) return Promise.resolve(targetLocation);
   const startTime = performance.now();
   return new Promise(resolve => requestAnimationFrame(function step(currentTime) {
     const timeElapsed = currentTime - startTime;
-    const progress = Math.abs(options.duration ? Math.min(timeElapsed / options.duration, 1) : 1);
-    const location = Math.floor(startLocation + (targetLocation - startLocation) * ease(progress));
-    container[horizontal ? 'scrollLeft' : 'scrollTop'] = location;
-    if (progress === 1) return resolve(targetLocation);
-    let clientSize;
-    let reachEnd;
-    if (!horizontal) {
-      clientSize = container === document.body ? document.documentElement.clientHeight : container.clientHeight;
-      reachEnd = clientSize + container.scrollTop >= container.scrollHeight;
-      if (targetLocation > container.scrollTop && reachEnd) return resolve(targetLocation);
-    } else {
-      clientSize = container === document.body ? document.documentElement.clientWidth : container.clientWidth;
-      reachEnd = clientSize + container.scrollLeft >= container.scrollWidth;
-      if (targetLocation > container.scrollLeft && reachEnd) return resolve(targetLocation);
+    const progress = timeElapsed / options.duration;
+    const location = Math.floor(startLocation + (targetLocation - startLocation) * ease(Math.max(progress, 1)));
+    container[property] = location;
+
+    // Allow for some jitter if target time has elapsed
+    if (progress >= 1 && Math.abs(location - container[property]) < 10) {
+      return resolve(targetLocation);
+    } else if (progress > 2) {
+      // The target might not be reachable
+      consoleWarn('Scroll target is not reachable');
+      return resolve(container[property]);
     }
     requestAnimationFrame(step);
   }));
@@ -20578,12 +20618,13 @@ const VDatePickerMonth = genericComponent()({
       }, [(props.showAdjacentMonths || !item.isAdjacent) && createVNode(VDefaultsProvider, {
         "defaults": {
           VBtn: {
+            class: 'v-date-picker-month__day-btn',
             color: (item.isSelected || item.isToday) && !item.isDisabled ? props.color : undefined,
             disabled: item.isDisabled,
             icon: true,
             ripple: false,
             text: item.localized,
-            variant: item.isDisabled ? 'text' : item.isToday && !item.isSelected ? 'outlined' : 'flat',
+            variant: item.isDisabled ? item.isToday ? 'outlined' : 'text' : item.isToday && !item.isSelected ? 'outlined' : 'flat',
             onClick: () => onClick(item.date)
           }
         }
@@ -20609,6 +20650,7 @@ const VDatePickerMonths = genericComponent()({
   },
   setup(props, _ref) {
     let {
+      emit,
       slots
     } = _ref;
     const adapter = useDate();
@@ -20644,6 +20686,10 @@ const VDatePickerMonths = genericComponent()({
         onClick: () => onClick(i)
       };
       function onClick(i) {
+        if (model.value === i) {
+          emit('update:modelValue', model.value);
+          return;
+        }
         model.value = i;
       }
       return slots.month?.({
@@ -20652,9 +20698,7 @@ const VDatePickerMonths = genericComponent()({
         props: btnProps
       }) ?? createVNode(VBtn, mergeProps({
         "key": "month"
-      }, btnProps, {
-        "onClick": () => onClick(i)
-      }), null);
+      }, btnProps), null);
     })])]));
     return {};
   }
@@ -20679,6 +20723,7 @@ const VDatePickerYears = genericComponent()({
   },
   setup(props, _ref) {
     let {
+      emit,
       slots
     } = _ref;
     const adapter = useDate();
@@ -20729,7 +20774,13 @@ const VDatePickerYears = genericComponent()({
         rounded: true,
         text: year.text,
         variant: model.value === year.value ? 'flat' : 'text',
-        onClick: () => model.value = year.value
+        onClick: () => {
+          if (model.value === year.value) {
+            emit('update:modelValue', model.value);
+            return;
+          }
+          model.value = year.value;
+        }
       };
       return slots.year?.({
         year,
@@ -20879,7 +20930,7 @@ const VDatePicker = genericComponent()({
       return props.multiple && model.value.length > 1 ? t('$vuetify.datePicker.itemsSelected', model.value.length) : model.value[0] && adapter.isValid(model.value[0]) ? adapter.format(model.value[0], 'normalDateWithWeekday') : t(props.header);
     });
     const text = computed(() => {
-      return adapter.format(adapter.parseISO(`${year.value}-${month.value + 1}-01`), 'monthAndYear');
+      return adapter.format(adapter.date(new Date(year.value, month.value, 1)), 'monthAndYear');
     });
     // const headerIcon = computed(() => props.inputMode === 'calendar' ? props.keyboardIcon : props.calendarIcon)
     const headerTransition = computed(() => `date-picker-header${isReversing.value ? '-reverse' : ''}-transition`);
@@ -20922,7 +20973,9 @@ const VDatePicker = genericComponent()({
       } else {
         year.value++;
         month.value = 0;
+        onUpdateYear(year.value);
       }
+      onUpdateMonth(month.value);
     }
     function onClickPrev() {
       if (month.value > 0) {
@@ -20930,7 +20983,9 @@ const VDatePicker = genericComponent()({
       } else {
         year.value--;
         month.value = 11;
+        onUpdateYear(year.value);
       }
+      onUpdateMonth(month.value);
     }
     function onClickDate() {
       viewMode.value = 'month';
@@ -20941,14 +20996,14 @@ const VDatePicker = genericComponent()({
     function onClickYear() {
       viewMode.value = viewMode.value === 'year' ? 'month' : 'year';
     }
-    watch(month, () => {
+    function onUpdateMonth(value) {
       if (viewMode.value === 'months') onClickMonth();
-      emit('update:month', month.value);
-    });
-    watch(year, () => {
+      emit('update:month', value);
+    }
+    function onUpdateYear(value) {
       if (viewMode.value === 'year') onClickYear();
-      emit('update:year', year.value);
-    });
+      emit('update:year', value);
+    }
     watch(model, (val, oldVal) => {
       const before = adapter.date(wrapInArray(val)[0]);
       const after = adapter.date(wrapInArray(oldVal)[0]);
@@ -21004,14 +21059,14 @@ const VDatePicker = genericComponent()({
             "key": "date-picker-months"
           }, datePickerMonthsProps, {
             "modelValue": month.value,
-            "onUpdate:modelValue": $event => month.value = $event,
+            "onUpdate:modelValue": [$event => month.value = $event, onUpdateMonth],
             "min": minDate.value,
             "max": maxDate.value
           }), null) : viewMode.value === 'year' ? createVNode(VDatePickerYears, mergeProps({
             "key": "date-picker-years"
           }, datePickerYearsProps, {
             "modelValue": year.value,
-            "onUpdate:modelValue": $event => year.value = $event,
+            "onUpdate:modelValue": [$event => year.value = $event, onUpdateYear],
             "min": minDate.value,
             "max": maxDate.value
           }), null) : createVNode(VDatePickerMonth, mergeProps({
@@ -21020,9 +21075,9 @@ const VDatePicker = genericComponent()({
             "modelValue": model.value,
             "onUpdate:modelValue": $event => model.value = $event,
             "month": month.value,
-            "onUpdate:month": $event => month.value = $event,
+            "onUpdate:month": [$event => month.value = $event, onUpdateMonth],
             "year": year.value,
-            "onUpdate:year": $event => year.value = $event,
+            "onUpdate:year": [$event => year.value = $event, onUpdateYear],
             "min": minDate.value,
             "max": maxDate.value
           }), null)]
@@ -21040,7 +21095,9 @@ const VExpansionPanelSymbol = Symbol.for('vuetify:v-expansion-panel');
 const allowedVariants = ['default', 'accordion', 'inset', 'popout'];
 const makeVExpansionPanelsProps = propsFactory({
   color: String,
+  flat: Boolean,
   static: Boolean,
+  tile: Boolean,
   variant: {
     type: String,
     default: 'default',
@@ -21070,12 +21127,17 @@ const VExpansionPanels = genericComponent()({
     provideDefaults({
       VExpansionPanel: {
         color: toRef(props, 'color'),
-        readonly: toRef(props, 'readonly'),
+        readonly: toRef(props, 'readonly')
+      },
+      VExpansionPanelTitle: {
         static: toRef(props, 'static')
       }
     });
     useRender(() => createVNode(props.tag, {
-      "class": ['v-expansion-panels', themeClasses.value, variantClass.value, props.class],
+      "class": ['v-expansion-panels', {
+        'v-expansion-panels--flat': props.flat,
+        'v-expansion-panels--tile': props.tile
+      }, themeClasses.value, variantClass.value, props.class],
       "style": props.style
     }, slots));
     return {};
@@ -21359,7 +21421,7 @@ const VFileInput = genericComponent()({
       if (!isFocused.value) focus();
     }
     function onClickPrepend(e) {
-      onControlClick(e);
+      inputRef.value?.click();
     }
     function onControlMousedown(e) {
       emit('mousedown:control', e);
@@ -23813,12 +23875,11 @@ const VSnackbar = genericComponent()({
         "scrollStrategy": "none",
         "_disableGlobalStack": true
       }, scopeId), {
-        default: () => [genOverlays(false, 'v-snackbar'), props.timer && createVNode("div", {
+        default: () => [genOverlays(false, 'v-snackbar'), props.timer && !isHovering.value && createVNode("div", {
           "key": "timer",
           "class": "v-snackbar__timer"
         }, [createVNode(VProgressLinear, {
           "ref": timerRef,
-          "active": !isHovering.value,
           "color": typeof props.timer === 'string' ? props.timer : 'info',
           "max": props.timeout,
           "model-value": countdown.time.value
@@ -25802,7 +25863,7 @@ const VCalendar = genericComponent()({
       }, [!props.hideWeekNumber ? createVNode("div", {
         "key": "weekNumber0",
         "class": "v-calendar-weekly__head-weeknumber"
-      }, null) : '', props.weekdays.sort((a, b) => a - b).map(weekday => createVNode("div", {
+      }, null) : '', props.weekdays.map(weekday => createVNode("div", {
         "class": `v-calendar-weekly__head-weekday${!props.hideWeekNumber ? '-with-weeknumber' : ''}`
       }, [dayNames[weekday]]))]), props.viewMode === 'month' && createVNode("div", {
         "key": "VCalendarMonth",
@@ -25831,6 +25892,438 @@ const VCalendar = genericComponent()({
   }
 });
 
+// Utilities
+
+// Types
+
+const makeLineProps = propsFactory({
+  autoDraw: Boolean,
+  autoDrawDuration: [Number, String],
+  autoDrawEasing: {
+    type: String,
+    default: 'ease'
+  },
+  color: String,
+  gradient: {
+    type: Array,
+    default: () => []
+  },
+  gradientDirection: {
+    type: String,
+    validator: val => ['top', 'bottom', 'left', 'right'].includes(val),
+    default: 'top'
+  },
+  height: {
+    type: [String, Number],
+    default: 75
+  },
+  labels: {
+    type: Array,
+    default: () => []
+  },
+  labelSize: {
+    type: [Number, String],
+    default: 7
+  },
+  lineWidth: {
+    type: [String, Number],
+    default: 4
+  },
+  id: String,
+  modelValue: {
+    type: Array,
+    default: () => []
+  },
+  padding: {
+    type: [String, Number],
+    default: 8
+  },
+  showLabels: Boolean,
+  smooth: Boolean,
+  width: {
+    type: [Number, String],
+    default: 300
+  }
+}, 'Line');
+
+// Types
+
+const makeVBarlineProps = propsFactory({
+  autoLineWidth: Boolean,
+  ...makeLineProps()
+}, 'VBarline');
+const VBarline = genericComponent()({
+  name: 'VBarline',
+  props: makeVBarlineProps(),
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    const uid = getUid();
+    const id = computed(() => props.id || `barline-${uid}`);
+    const autoDrawDuration = computed(() => Number(props.autoDrawDuration) || 500);
+    const hasLabels = computed(() => {
+      return Boolean(props.showLabels || props.labels.length > 0 || !!slots?.label);
+    });
+    const lineWidth = computed(() => parseFloat(props.lineWidth) || 4);
+    const totalWidth = computed(() => Math.max(props.modelValue.length * lineWidth.value, Number(props.width)));
+    const boundary = computed(() => {
+      return {
+        minX: 0,
+        maxX: totalWidth.value,
+        minY: 0,
+        maxY: parseInt(props.height, 10)
+      };
+    });
+    function genBars(values, boundary) {
+      const {
+        minX,
+        maxX,
+        minY,
+        maxY
+      } = boundary;
+      const totalValues = values.length;
+      let maxValue = Math.max(...values);
+      let minValue = Math.min(...values);
+      if (minValue > 0) minValue = 0;
+      if (maxValue < 0) maxValue = 0;
+      const gridX = maxX / totalValues;
+      const gridY = (maxY - minY) / (maxValue - minValue || 1);
+      const horizonY = maxY - Math.abs(minValue * gridY);
+      return values.map((value, index) => {
+        const height = Math.abs(gridY * value);
+        return {
+          x: minX + index * gridX,
+          y: horizonY - height + +(value < 0) * height,
+          height,
+          value
+        };
+      });
+    }
+    const parsedLabels = computed(() => {
+      const labels = [];
+      const points = genBars(props.modelValue.map(item => typeof item === 'number' ? item : item.value), boundary.value);
+      const len = points.length;
+      for (let i = 0; labels.length < len; i++) {
+        const item = points[i];
+        let value = props.labels[i];
+        if (!value) {
+          value = typeof item === 'object' ? item.value : item;
+        }
+        labels.push({
+          x: item.x,
+          value: String(value)
+        });
+      }
+      return labels;
+    });
+    const bars = computed(() => genBars(props.modelValue.map(item => typeof item === 'number' ? item : item.value), boundary.value));
+    const offsetX = computed(() => (Math.abs(bars.value[0].x - bars.value[1].x) - lineWidth.value) / 2);
+    useRender(() => {
+      const gradientData = !props.gradient.slice().length ? [''] : props.gradient.slice().reverse();
+      return createVNode("svg", {
+        "display": "block"
+      }, [createVNode("defs", null, [createVNode("linearGradient", {
+        "id": id.value,
+        "gradientUnits": "userSpaceOnUse",
+        "x1": props.gradientDirection === 'left' ? '100%' : '0',
+        "y1": props.gradientDirection === 'top' ? '100%' : '0',
+        "x2": props.gradientDirection === 'right' ? '100%' : '0',
+        "y2": props.gradientDirection === 'bottom' ? '100%' : '0'
+      }, [gradientData.map((color, index) => createVNode("stop", {
+        "offset": index / Math.max(gradientData.length - 1, 1),
+        "stop-color": color || 'currentColor'
+      }, null))])]), createVNode("clipPath", {
+        "id": `${id.value}-clip`
+      }, [bars.value.map(item => createVNode("rect", {
+        "x": item.x + offsetX.value,
+        "y": item.y,
+        "width": lineWidth.value,
+        "height": item.height,
+        "rx": typeof props.smooth === 'number' ? props.smooth : props.smooth ? 2 : 0,
+        "ry": typeof props.smooth === 'number' ? props.smooth : props.smooth ? 2 : 0
+      }, [props.autoDraw && createVNode(Fragment, null, [createVNode("animate", {
+        "attributeName": "y",
+        "from": item.y + item.height,
+        "to": item.y,
+        "dur": `${autoDrawDuration.value}ms`,
+        "fill": "freeze"
+      }, null), createVNode("animate", {
+        "attributeName": "height",
+        "from": "0",
+        "to": item.height,
+        "dur": `${autoDrawDuration.value}ms`,
+        "fill": "freeze"
+      }, null)])]))]), hasLabels.value && createVNode("g", {
+        "key": "labels",
+        "style": {
+          textAnchor: 'middle',
+          dominantBaseline: 'mathematical',
+          fill: 'currentColor'
+        }
+      }, [parsedLabels.value.map((item, i) => createVNode("text", {
+        "x": item.x + offsetX.value + lineWidth.value / 2,
+        "y": parseInt(props.height, 10) - 2 + (parseInt(props.labelSize, 10) || 7 * 0.75),
+        "font-size": Number(props.labelSize) || 7
+      }, [slots.label?.({
+        index: i,
+        value: item.value
+      }) ?? item.value]))]), createVNode("g", {
+        "clip-path": `url(#${id.value}-clip)`,
+        "fill": `url(#${id.value})`
+      }, [createVNode("rect", {
+        "x": 0,
+        "y": 0,
+        "width": Math.max(props.modelValue.length * lineWidth.value, Number(props.width)),
+        "height": props.height
+      }, null)])]);
+    });
+  }
+});
+
+// @ts-nocheck
+/* eslint-disable */
+
+// import { checkCollinear, getDistance, moveTo } from './math'
+
+/**
+ * From https://github.com/unsplash/react-trend/blob/master/src/helpers/DOM.helpers.js#L18
+ */
+function genPath(points, radius) {
+  let fill = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  let height = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 75;
+  if (points.length === 0) return '';
+  const start = points.shift();
+  const end = points[points.length - 1];
+  return (fill ? `M${start.x} ${height - start.x + 2} L${start.x} ${start.y}` : `M${start.x} ${start.y}`) + points.map((point, index) => {
+    const next = points[index + 1];
+    const prev = points[index - 1] || start;
+    const isCollinear = next && checkCollinear(next, point, prev);
+    if (!next || isCollinear) {
+      return `L${point.x} ${point.y}`;
+    }
+    const threshold = Math.min(getDistance(prev, point), getDistance(next, point));
+    const isTooCloseForRadius = threshold / 2 < radius;
+    const radiusForPoint = isTooCloseForRadius ? threshold / 2 : radius;
+    const before = moveTo(prev, point, radiusForPoint);
+    const after = moveTo(next, point, radiusForPoint);
+    return `L${before.x} ${before.y}S${point.x} ${point.y} ${after.x} ${after.y}`;
+  }).join('') + (fill ? `L${end.x} ${height - start.x + 2} Z` : '');
+}
+function int(value) {
+  return parseInt(value, 10);
+}
+
+/**
+ * https://en.wikipedia.org/wiki/Collinearity
+ * x=(x1+x2)/2
+ * y=(y1+y2)/2
+ */
+function checkCollinear(p0, p1, p2) {
+  return int(p0.x + p2.x) === int(2 * p1.x) && int(p0.y + p2.y) === int(2 * p1.y);
+}
+function getDistance(p1, p2) {
+  return Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2));
+}
+function moveTo(to, from, radius) {
+  const vector = {
+    x: to.x - from.x,
+    y: to.y - from.y
+  };
+  const length = Math.sqrt(vector.x * vector.x + vector.y * vector.y);
+  const unitVector = {
+    x: vector.x / length,
+    y: vector.y / length
+  };
+  return {
+    x: from.x + unitVector.x * radius,
+    y: from.y + unitVector.y * radius
+  };
+}
+
+// Types
+
+const makeVTrendlineProps = propsFactory({
+  fill: Boolean,
+  ...makeLineProps()
+}, 'VTrendline');
+const VTrendline = genericComponent()({
+  name: 'VTrendline',
+  props: makeVTrendlineProps(),
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    const uid = getUid();
+    const id = computed(() => props.id || `trendline-${uid}`);
+    const autoDrawDuration = computed(() => Number(props.autoDrawDuration) || (props.fill ? 500 : 2000));
+    const lastLength = ref(0);
+    const path = ref(null);
+    function genPoints(values, boundary) {
+      const {
+        minX,
+        maxX,
+        minY,
+        maxY
+      } = boundary;
+      const totalValues = values.length;
+      const maxValue = Math.max(...values);
+      const minValue = Math.min(...values);
+      const gridX = (maxX - minX) / (totalValues - 1);
+      const gridY = (maxY - minY) / (maxValue - minValue || 1);
+      return values.map((value, index) => {
+        return {
+          x: minX + index * gridX,
+          y: maxY - (value - minValue) * gridY,
+          value
+        };
+      });
+    }
+    const hasLabels = computed(() => {
+      return Boolean(props.showLabels || props.labels.length > 0 || !!slots?.label);
+    });
+    const lineWidth = computed(() => {
+      return parseFloat(props.lineWidth) || 4;
+    });
+    const totalWidth = computed(() => Number(props.width));
+    const boundary = computed(() => {
+      const padding = Number(props.padding);
+      return {
+        minX: padding,
+        maxX: totalWidth.value - padding,
+        minY: padding,
+        maxY: parseInt(props.height, 10) - padding
+      };
+    });
+    const parsedLabels = computed(() => {
+      const labels = [];
+      const points = genPoints(props.modelValue.map(item => typeof item === 'number' ? item : item.value), boundary.value);
+      const len = points.length;
+      for (let i = 0; labels.length < len; i++) {
+        const item = points[i];
+        let value = props.labels[i];
+        if (!value) {
+          value = typeof item === 'object' ? item.value : item;
+        }
+        labels.push({
+          x: item.x,
+          value: String(value)
+        });
+      }
+      return labels;
+    });
+    watch(() => props.modelValue, async () => {
+      await nextTick();
+      if (!props.autoDraw || !path.value) return;
+      const pathRef = path.value;
+      const length = pathRef.getTotalLength();
+      if (!props.fill) {
+        // Initial setup to "hide" the line by using the stroke dash array
+        pathRef.style.strokeDasharray = `${length}`;
+        pathRef.style.strokeDashoffset = `${length}`;
+
+        // Force reflow to ensure the transition starts from this state
+        pathRef.getBoundingClientRect();
+
+        // Animate the stroke dash offset to "draw" the line
+        pathRef.style.transition = `stroke-dashoffset ${autoDrawDuration.value}ms ${props.autoDrawEasing}`;
+        pathRef.style.strokeDashoffset = '0';
+      } else {
+        // Your existing logic for filled paths remains the same
+        pathRef.style.transformOrigin = 'bottom center';
+        pathRef.style.transition = 'none';
+        pathRef.style.transform = `scaleY(0)`;
+        pathRef.getBoundingClientRect();
+        pathRef.style.transition = `transform ${autoDrawDuration.value}ms ${props.autoDrawEasing}`;
+        pathRef.style.transform = `scaleY(1)`;
+      }
+      lastLength.value = length;
+    }, {
+      immediate: true
+    });
+    useRender(() => {
+      const gradientData = !props.gradient.slice().length ? [''] : props.gradient.slice().reverse();
+      return createVNode("svg", {
+        "display": "block",
+        "stroke-width": parseFloat(props.lineWidth) ?? 4
+      }, [createVNode("defs", null, [createVNode("linearGradient", {
+        "id": id.value,
+        "gradientUnits": "userSpaceOnUse",
+        "x1": props.gradientDirection === 'left' ? '100%' : '0',
+        "y1": props.gradientDirection === 'top' ? '100%' : '0',
+        "x2": props.gradientDirection === 'right' ? '100%' : '0',
+        "y2": props.gradientDirection === 'bottom' ? '100%' : '0'
+      }, [gradientData.map((color, index) => createVNode("stop", {
+        "offset": index / Math.max(gradientData.length - 1, 1),
+        "stop-color": color || 'currentColor'
+      }, null))])]), hasLabels.value && createVNode("g", {
+        "key": "labels",
+        "style": {
+          textAnchor: 'middle',
+          dominantBaseline: 'mathematical',
+          fill: 'currentColor'
+        }
+      }, [parsedLabels.value.map((item, i) => createVNode("text", {
+        "x": item.x + lineWidth.value / 2 + lineWidth.value / 2,
+        "y": parseInt(props.height, 10) - 4 + (parseInt(props.labelSize, 10) || 7 * 0.75),
+        "font-size": Number(props.labelSize) || 7
+      }, [slots.label?.({
+        index: i,
+        value: item.value
+      }) ?? item.value]))]), createVNode("path", {
+        "ref": path,
+        "d": genPath(genPoints(props.modelValue.map(item => typeof item === 'number' ? item : item.value), boundary.value), props.smooth ? 8 : Number(props.smooth), props.fill, parseInt(props.height, 10)),
+        "fill": props.fill ? `url(#${id.value})` : 'none',
+        "stroke": props.fill ? 'none' : `url(#${id.value})`
+      }, null)]);
+    });
+  }
+});
+
+// Types
+
+// Types
+
+const makeVSparklineProps = propsFactory({
+  type: {
+    type: String,
+    default: 'trend'
+  },
+  ...makeVBarlineProps(),
+  ...makeVTrendlineProps()
+}, 'VSparkline');
+const VSparkline = genericComponent()({
+  name: 'VSparkline',
+  props: makeVSparklineProps(),
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    const {
+      textColorClasses,
+      textColorStyles
+    } = useTextColor(toRef(props, 'color'));
+    const hasLabels = computed(() => {
+      return Boolean(props.showLabels || props.labels.length > 0 || !!slots?.label);
+    });
+    const totalHeight = computed(() => {
+      let height = parseInt(props.height, 10);
+      if (hasLabels.value) height += parseInt(props.labelSize, 10) * 1.5;
+      return height;
+    });
+    useRender(() => {
+      const Tag = props.type === 'trend' ? VTrendline : VBarline;
+      const lineProps = props.type === 'trend' ? VTrendline.filterProps(props) : VBarline.filterProps(props);
+      return createVNode(Tag, mergeProps({
+        "key": props.type,
+        "class": textColorClasses.value,
+        "style": textColorStyles.value,
+        "viewBox": `0 0 ${props.width} ${parseInt(totalHeight.value, 10)}`
+      }, lineProps), slots);
+    });
+  }
+});
+
 var components = /*#__PURE__*/Object.freeze({
   __proto__: null,
   VAlert: VAlert,
@@ -25973,6 +26466,7 @@ var components = /*#__PURE__*/Object.freeze({
   VSlider: VSlider,
   VSnackbar: VSnackbar,
   VSpacer: VSpacer,
+  VSparkline: VSparkline,
   VStepper: VStepper,
   VStepperActions: VStepperActions,
   VStepperHeader: VStepperHeader,
@@ -26220,7 +26714,7 @@ function createVuetify$1() {
     goTo
   };
 }
-const version$1 = "3.5.3";
+const version$1 = "3.5.5";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -26234,7 +26728,7 @@ function inject(key) {
 
 /* eslint-disable local-rules/sort-imports */
 
-const version = "3.5.3";
+const version = "3.5.5";
 
 /* eslint-disable local-rules/sort-imports */