vuetify 3.5.4 → 3.5.5

package/dist/vuetify-labs.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.5.4
+* Vuetify v3.5.5
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -549,6 +549,16 @@
     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'];
@@ -2160,7 +2170,7 @@
     vue.provide(LocaleSymbol, data);
     return data;
   }
-  function genDefaults$2() {
+  function genDefaults$3() {
     return {
       af: false,
       ar: true,
@@ -2207,7 +2217,7 @@
     };
   }
   function createRtl(i18n, options) {
-    const rtl = vue.ref(options?.rtl ?? genDefaults$2());
+    const rtl = vue.ref(options?.rtl ?? genDefaults$3());
     const isRtl = vue.computed(() => rtl.value[i18n.current.value] ?? false);
     return {
       isRtl,
@@ -2240,7 +2250,7 @@
   const makeThemeProps = propsFactory({
     theme: String
   }, 'theme');
-  function genDefaults$1() {
+  function genDefaults$2() {
     return {
       defaultTheme: 'light',
       variations: {
@@ -2327,8 +2337,8 @@
     };
   }
   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
@@ -3111,12 +3121,14 @@
     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 = vue.computed(() => {
       const rounded = vue.isRef(props) ? props.value : props.rounded;
+      const tile = vue.isRef(props) ? props.value : props.tile;
       const classes = [];
       if (rounded === true || rounded === '') {
         classes.push(`${name}--rounded`);
@@ -3124,6 +3136,8 @@
         for (const value of String(rounded).split(' ')) {
           classes.push(`rounded-${value}`);
         }
+      } else if (tile) {
+        classes.push('rounded-0');
       }
       return classes;
     });
@@ -4114,6 +4128,8 @@
       vm.emit('group:selected', {
         value
       });
+    }, {
+      flush: 'sync'
     });
     return {
       id,
@@ -4449,23 +4465,27 @@
       };
     }
   });
-  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 */
@@ -6469,7 +6489,8 @@
       errors.value = results;
       model.value = invalid > 0 ? false : valid === items.value.length ? true : null;
     }, {
-      deep: true
+      deep: true,
+      flush: 'post'
     });
     vue.provide(FormKey, {
       register: _ref => {
@@ -10573,9 +10594,9 @@
         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();
             }
@@ -10608,8 +10629,8 @@
           document.removeEventListener('focusin', onFocusIn);
         }
       });
-      function onClickOutside() {
-        parent?.closeParents();
+      function onClickOutside(e) {
+        parent?.closeParents(e);
       }
       function onKeydown(e) {
         if (props.disabled) return;
@@ -11343,9 +11364,6 @@
         });
       });
     });
-    vue.watch(viewportHeight, (val, oldVal) => {
-      oldVal && calculateVisibleItems();
-    });
     vue.onScopeDispose(() => {
       updateOffsets.clear();
     });
@@ -11368,6 +11386,17 @@
     let lastScrollTop = 0;
     let scrollVelocity = 0;
     let lastScrollTime = 0;
+    vue.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;
@@ -11820,9 +11849,10 @@
         }
       }
       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];
@@ -11830,7 +11860,7 @@
             model.value = value;
           }
         } else {
-          model.value = [item];
+          model.value = add ? [item] : [];
           menu.value = false;
         }
       }
@@ -12367,11 +12397,11 @@
       }
       const isSelecting = vue.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];
@@ -12540,7 +12570,7 @@
             function onChipClose(e) {
               e.stopPropagation();
               e.preventDefault();
-              select(item, false);
+              select(item);
             }
             const slotProps = {
               'onClick:close': onChipClose,
@@ -17621,7 +17651,8 @@
     };
   }
   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);
@@ -17639,25 +17670,22 @@
       }
     }
     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);
     }));
@@ -20594,12 +20622,13 @@
         }, [(props.showAdjacentMonths || !item.isAdjacent) && vue.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)
             }
           }
@@ -20625,6 +20654,7 @@
     },
     setup(props, _ref) {
       let {
+        emit,
         slots
       } = _ref;
       const adapter = useDate();
@@ -20660,6 +20690,10 @@
           onClick: () => onClick(i)
         };
         function onClick(i) {
+          if (model.value === i) {
+            emit('update:modelValue', model.value);
+            return;
+          }
           model.value = i;
         }
         return slots.month?.({
@@ -20668,9 +20702,7 @@
           props: btnProps
         }) ?? vue.createVNode(VBtn, vue.mergeProps({
           "key": "month"
-        }, btnProps, {
-          "onClick": () => onClick(i)
-        }), null);
+        }, btnProps), null);
       })])]));
       return {};
     }
@@ -20695,6 +20727,7 @@
     },
     setup(props, _ref) {
       let {
+        emit,
         slots
       } = _ref;
       const adapter = useDate();
@@ -20745,7 +20778,13 @@
           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,
@@ -20938,7 +20977,9 @@
         } else {
           year.value++;
           month.value = 0;
+          onUpdateYear(year.value);
         }
+        onUpdateMonth(month.value);
       }
       function onClickPrev() {
         if (month.value > 0) {
@@ -20946,7 +20987,9 @@
         } else {
           year.value--;
           month.value = 11;
+          onUpdateYear(year.value);
         }
+        onUpdateMonth(month.value);
       }
       function onClickDate() {
         viewMode.value = 'month';
@@ -20957,14 +21000,14 @@
       function onClickYear() {
         viewMode.value = viewMode.value === 'year' ? 'month' : 'year';
       }
-      vue.watch(month, () => {
+      function onUpdateMonth(value) {
         if (viewMode.value === 'months') onClickMonth();
-        emit('update:month', month.value);
-      });
-      vue.watch(year, () => {
+        emit('update:month', value);
+      }
+      function onUpdateYear(value) {
         if (viewMode.value === 'year') onClickYear();
-        emit('update:year', year.value);
-      });
+        emit('update:year', value);
+      }
       vue.watch(model, (val, oldVal) => {
         const before = adapter.date(wrapInArray(val)[0]);
         const after = adapter.date(wrapInArray(oldVal)[0]);
@@ -21020,14 +21063,14 @@
               "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' ? vue.createVNode(VDatePickerYears, vue.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) : vue.createVNode(VDatePickerMonth, vue.mergeProps({
@@ -21036,9 +21079,9 @@
               "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)]
@@ -21056,7 +21099,9 @@
   const allowedVariants = ['default', 'accordion', 'inset', 'popout'];
   const makeVExpansionPanelsProps = propsFactory({
     color: String,
+    flat: Boolean,
     static: Boolean,
+    tile: Boolean,
     variant: {
       type: String,
       default: 'default',
@@ -21086,12 +21131,17 @@
       provideDefaults({
         VExpansionPanel: {
           color: vue.toRef(props, 'color'),
-          readonly: vue.toRef(props, 'readonly'),
+          readonly: vue.toRef(props, 'readonly')
+        },
+        VExpansionPanelTitle: {
           static: vue.toRef(props, 'static')
         }
       });
       useRender(() => vue.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 {};
@@ -21375,7 +21425,7 @@
         if (!isFocused.value) focus();
       }
       function onClickPrepend(e) {
-        onControlClick(e);
+        inputRef.value?.click();
       }
       function onControlMousedown(e) {
         emit('mousedown:control', e);
@@ -25817,7 +25867,7 @@
         }, [!props.hideWeekNumber ? vue.createVNode("div", {
           "key": "weekNumber0",
           "class": "v-calendar-weekly__head-weeknumber"
-        }, null) : '', props.weekdays.sort((a, b) => a - b).map(weekday => vue.createVNode("div", {
+        }, null) : '', props.weekdays.map(weekday => vue.createVNode("div", {
           "class": `v-calendar-weekly__head-weekday${!props.hideWeekNumber ? '-with-weeknumber' : ''}`
         }, [dayNames[weekday]]))]), props.viewMode === 'month' && vue.createVNode("div", {
           "key": "VCalendarMonth",
@@ -25846,6 +25896,438 @@
     }
   });
 
+  // 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 = vue.computed(() => props.id || `barline-${uid}`);
+      const autoDrawDuration = vue.computed(() => Number(props.autoDrawDuration) || 500);
+      const hasLabels = vue.computed(() => {
+        return Boolean(props.showLabels || props.labels.length > 0 || !!slots?.label);
+      });
+      const lineWidth = vue.computed(() => parseFloat(props.lineWidth) || 4);
+      const totalWidth = vue.computed(() => Math.max(props.modelValue.length * lineWidth.value, Number(props.width)));
+      const boundary = vue.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 = vue.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 = vue.computed(() => genBars(props.modelValue.map(item => typeof item === 'number' ? item : item.value), boundary.value));
+      const offsetX = vue.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 vue.createVNode("svg", {
+          "display": "block"
+        }, [vue.createVNode("defs", null, [vue.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) => vue.createVNode("stop", {
+          "offset": index / Math.max(gradientData.length - 1, 1),
+          "stop-color": color || 'currentColor'
+        }, null))])]), vue.createVNode("clipPath", {
+          "id": `${id.value}-clip`
+        }, [bars.value.map(item => vue.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 && vue.createVNode(vue.Fragment, null, [vue.createVNode("animate", {
+          "attributeName": "y",
+          "from": item.y + item.height,
+          "to": item.y,
+          "dur": `${autoDrawDuration.value}ms`,
+          "fill": "freeze"
+        }, null), vue.createVNode("animate", {
+          "attributeName": "height",
+          "from": "0",
+          "to": item.height,
+          "dur": `${autoDrawDuration.value}ms`,
+          "fill": "freeze"
+        }, null)])]))]), hasLabels.value && vue.createVNode("g", {
+          "key": "labels",
+          "style": {
+            textAnchor: 'middle',
+            dominantBaseline: 'mathematical',
+            fill: 'currentColor'
+          }
+        }, [parsedLabels.value.map((item, i) => vue.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]))]), vue.createVNode("g", {
+          "clip-path": `url(#${id.value}-clip)`,
+          "fill": `url(#${id.value})`
+        }, [vue.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 = vue.computed(() => props.id || `trendline-${uid}`);
+      const autoDrawDuration = vue.computed(() => Number(props.autoDrawDuration) || (props.fill ? 500 : 2000));
+      const lastLength = vue.ref(0);
+      const path = vue.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 = vue.computed(() => {
+        return Boolean(props.showLabels || props.labels.length > 0 || !!slots?.label);
+      });
+      const lineWidth = vue.computed(() => {
+        return parseFloat(props.lineWidth) || 4;
+      });
+      const totalWidth = vue.computed(() => Number(props.width));
+      const boundary = vue.computed(() => {
+        const padding = Number(props.padding);
+        return {
+          minX: padding,
+          maxX: totalWidth.value - padding,
+          minY: padding,
+          maxY: parseInt(props.height, 10) - padding
+        };
+      });
+      const parsedLabels = vue.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;
+      });
+      vue.watch(() => props.modelValue, async () => {
+        await vue.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 vue.createVNode("svg", {
+          "display": "block",
+          "stroke-width": parseFloat(props.lineWidth) ?? 4
+        }, [vue.createVNode("defs", null, [vue.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) => vue.createVNode("stop", {
+          "offset": index / Math.max(gradientData.length - 1, 1),
+          "stop-color": color || 'currentColor'
+        }, null))])]), hasLabels.value && vue.createVNode("g", {
+          "key": "labels",
+          "style": {
+            textAnchor: 'middle',
+            dominantBaseline: 'mathematical',
+            fill: 'currentColor'
+          }
+        }, [parsedLabels.value.map((item, i) => vue.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]))]), vue.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(vue.toRef(props, 'color'));
+      const hasLabels = vue.computed(() => {
+        return Boolean(props.showLabels || props.labels.length > 0 || !!slots?.label);
+      });
+      const totalHeight = vue.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 vue.createVNode(Tag, vue.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,
@@ -25988,6 +26470,7 @@
     VSlider: VSlider,
     VSnackbar: VSnackbar,
     VSpacer: VSpacer,
+    VSparkline: VSparkline,
     VStepper: VStepper,
     VStepperActions: VStepperActions,
     VStepperHeader: VStepperHeader,
@@ -26235,7 +26718,7 @@
       goTo
     };
   }
-  const version$1 = "3.5.4";
+  const version$1 = "3.5.5";
   createVuetify$1.version = version$1;
 
   // Vue's inject() can only be used in setup
@@ -26249,7 +26732,7 @@
 
   /* eslint-disable local-rules/sort-imports */
 
-  const version = "3.5.4";
+  const version = "3.5.5";
 
   /* eslint-disable local-rules/sort-imports */