vuetify 3.5.10 → 3.5.12

package/dist/vuetify-labs.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.5.10
+* Vuetify v3.5.12
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -317,7 +317,7 @@
     let char = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '0';
     return str + char.repeat(Math.max(0, length - str.length));
   }
-  function padStart(str, length) {
+  function padStart$1(str, length) {
     let char = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '0';
     return char.repeat(Math.max(0, length - str.length)) + str;
   }
@@ -2011,7 +2011,8 @@
     },
     timePicker: {
       am: 'AM',
-      pm: 'PM'
+      pm: 'PM',
+      title: 'Select Time'
     },
     pagination: {
       ariaLabel: {
@@ -3173,10 +3174,13 @@
     } = typeof transition === 'object' ? transition : {};
     return vue.h(component, vue.mergeProps(typeof transition === 'string' ? {
       name: disabled ? '' : transition
-    } : customProps, typeof transition === 'string' ? {} : {
+    } : customProps, typeof transition === 'string' ? {} : Object.fromEntries(Object.entries({
       disabled,
       group
-    }, rest), slots);
+    }).filter(_ref2 => {
+      let [_, v] = _ref2;
+      return v !== undefined;
+    })), rest), slots);
   };
 
   // Utilities
@@ -5087,19 +5091,27 @@
         href: vue.toRef(props, 'href')
       };
     }
-    const link = props.to ? RouterLink.useLink(props) : undefined;
+    // vue-router useLink `to` prop needs to be reactive and useLink will crash if undefined
+    const linkProps = vue.computed(() => ({
+      ...props,
+      to: props.to ? props.to : {}
+    }));
+    const routerLink = RouterLink.useLink(linkProps.value);
+    // Actual link needs to be undefined when to prop is not used
+    const link = vue.computed(() => props.to ? routerLink : undefined);
     const route = useRoute();
     return {
       isLink,
       isClickable,
-      route: link?.route,
-      navigate: link?.navigate,
-      isActive: link && vue.computed(() => {
-        if (!props.exact) return link.isActive?.value;
-        if (!route.value) return link.isExactActive?.value;
-        return link.isExactActive?.value && deepEqual(link.route.value.query, route.value.query);
+      route: link.value?.route,
+      navigate: link.value?.navigate,
+      isActive: vue.computed(() => {
+        if (!link.value) return false;
+        if (!props.exact) return link.value.isActive?.value ?? false;
+        if (!route.value) return link.value.isExactActive?.value ?? false;
+        return link.value.isExactActive?.value && deepEqual(link.value.route.value.query, route.value.query);
       }),
-      href: vue.computed(() => props.to ? link?.route.value.href : props.href)
+      href: vue.computed(() => props.to ? link.value?.route.value.href : props.href)
     };
   }
   const makeRouterProps = propsFactory({
@@ -5985,7 +5997,7 @@
     falseIcon: IconValue,
     trueIcon: IconValue,
     ripple: {
-      type: Boolean,
+      type: [Boolean, Object],
       default: true
     },
     multiple: {
@@ -6209,6 +6221,7 @@
           "onFocus": onFocus,
           "onInput": onInput,
           "aria-disabled": !!props.disabled,
+          "aria-label": props.label,
           "type": props.type,
           "value": trueValue.value,
           "name": props.name,
@@ -6668,14 +6681,15 @@
     vue.watch([isValid, errorMessages], () => {
       form?.update(uid.value, isValid.value, errorMessages.value);
     });
-    function reset() {
+    async function reset() {
       model.value = null;
-      vue.nextTick(resetValidation);
+      await vue.nextTick();
+      await resetValidation();
     }
-    function resetValidation() {
+    async function resetValidation() {
       isPristine.value = true;
       if (!validateOn.value.lazy) {
-        validate(true);
+        await validate(true);
       } else {
         internalErrorMessages.value = [];
       }
@@ -17511,8 +17525,8 @@
   function toISO(adapter, value) {
     const date = adapter.toJsDate(value);
     const year = date.getFullYear();
-    const month = padStart(String(date.getMonth() + 1), 2, '0');
-    const day = padStart(String(date.getDate()), 2, '0');
+    const month = padStart$1(String(date.getMonth() + 1), 2, '0');
+    const day = padStart$1(String(date.getDate()), 2, '0');
     return `${year}-${month}-${day}`;
   }
   function parseISO(value) {
@@ -23143,7 +23157,7 @@
         e.preventDefault();
         e.stopPropagation();
         const clipboardText = e?.clipboardData?.getData('Text') ?? '';
-        if (!isValidNumber(clipboardText)) return;
+        if (isValidNumber(clipboardText)) return;
         model.value = clipboardText.split('');
         inputRef.value?.[index].blur();
       }
@@ -23159,7 +23173,7 @@
         focusIndex.value = -1;
       }
       function isValidNumber(value) {
-        return props.type === 'number' && !isNaN(Number(value));
+        return props.type === 'number' && /[^0-9]/g.test(value);
       }
       provideDefaults({
         VField: {
@@ -26496,7 +26510,7 @@
             "flat": true,
             "key": "decrement-btn",
             "height": defaultHeight,
-            "icon": "mdi-chevron-down",
+            "icon": "$expand",
             "rounded": "0",
             "size": "small",
             "onClick": onClickDown
@@ -26508,7 +26522,7 @@
                 rounded: '0',
                 height: defaultHeight,
                 size: 'small',
-                icon: 'mdi-chevron-down'
+                icon: '$expand'
               }
             }
           }, {
@@ -26519,7 +26533,7 @@
             "flat": true,
             "key": "increment-btn",
             "height": defaultHeight,
-            "icon": "mdi-chevron-up",
+            "icon": "$collapse",
             "onClick": onClickUp,
             "rounded": "0",
             "size": "small"
@@ -26531,7 +26545,7 @@
                 height: defaultHeight,
                 rounded: '0',
                 size: 'small',
-                icon: 'mdi-chevron-up'
+                icon: '$collapse'
               }
             }
           }, {
@@ -26569,17 +26583,17 @@
                   ...slotProps
                 }
               } = _ref2;
-              return vue.createVNode("input", vue.mergeProps({
+              return vue.withDirectives(vue.createVNode("input", vue.mergeProps({
                 "ref": inputRef,
                 "type": "number",
-                "value": model.value,
+                "onUpdate:modelValue": $event => model.value = $event,
                 "class": fieldClass,
                 "max": props.max,
                 "min": props.min,
                 "step": props.step,
                 "onFocus": onFocus,
                 "onBlur": blur
-              }, inputAttrs), null);
+              }, inputAttrs), null), [[vue.vModelText, model.value]]);
             },
             'append-inner': controlVariant.value === 'split' ? () => vue.createVNode("div", {
               "class": "v-number-input__control"
@@ -26588,7 +26602,7 @@
             }, null), vue.createVNode(VBtn, {
               "flat": true,
               "height": "100%",
-              "icon": "mdi-plus",
+              "icon": "$plus",
               "tile": true,
               "onClick": onClickUp
             }, null)]) : !props.reverse ? () => vue.createVNode(vue.Fragment, null, [dividerNode(), controlNode()]) : undefined,
@@ -26597,7 +26611,7 @@
             }, [vue.createVNode(VBtn, {
               "flat": true,
               "height": "100%",
-              "icon": "mdi-minus",
+              "icon": "$minus",
               "tile": true,
               "onClick": onClickDown
             }, null), vue.createVNode(VDivider, {
@@ -27109,6 +27123,639 @@
 
   // Types
 
+  const makeVTimePickerClockProps = propsFactory({
+    allowedValues: Function,
+    ampm: Boolean,
+    color: String,
+    disabled: Boolean,
+    displayedValue: {
+      default: null
+    },
+    double: Boolean,
+    format: {
+      type: Function,
+      default: val => val
+    },
+    max: {
+      type: Number,
+      required: true
+    },
+    min: {
+      type: Number,
+      required: true
+    },
+    scrollable: Boolean,
+    readonly: Boolean,
+    rotate: {
+      type: Number,
+      default: 0
+    },
+    step: {
+      type: Number,
+      default: 1
+    },
+    modelValue: {
+      type: Number
+    }
+  }, 'VTimePickerClock');
+  const VTimePickerClock = genericComponent()({
+    name: 'VTimePickerClock',
+    props: makeVTimePickerClockProps(),
+    emits: {
+      change: val => val,
+      input: val => val
+    },
+    setup(props, _ref) {
+      let {
+        emit
+      } = _ref;
+      const clockRef = vue.ref(null);
+      const innerClockRef = vue.ref(null);
+      const inputValue = vue.ref(undefined);
+      const isDragging = vue.ref(false);
+      const valueOnMouseDown = vue.ref(null);
+      const valueOnMouseUp = vue.ref(null);
+      const {
+        textColorClasses,
+        textColorStyles
+      } = useTextColor(vue.toRef(props, 'color'));
+      const {
+        backgroundColorClasses,
+        backgroundColorStyles
+      } = useBackgroundColor(vue.toRef(props, 'color'));
+      const count = vue.computed(() => props.max - props.min + 1);
+      const roundCount = vue.computed(() => props.double ? count.value / 2 : count.value);
+      const degreesPerUnit = vue.computed(() => 360 / roundCount.value);
+      const degrees = vue.computed(() => degreesPerUnit.value * Math.PI / 180);
+      const displayedValue = vue.computed(() => props.modelValue == null ? props.min : props.modelValue);
+      const innerRadiusScale = vue.computed(() => 0.62);
+      const genChildren = vue.computed(() => {
+        const children = [];
+        for (let value = props.min; value <= props.max; value = value + props.step) {
+          children.push(value);
+        }
+        return children;
+      });
+      vue.watch(() => props.modelValue, val => {
+        inputValue.value = val;
+      });
+      function update(value) {
+        if (inputValue.value !== value) {
+          inputValue.value = value;
+        }
+        emit('input', value);
+      }
+      function isAllowed(value) {
+        return !props.allowedValues || props.allowedValues(value);
+      }
+      function wheel(e) {
+        e.preventDefault();
+        const delta = Math.sign(-e.deltaY || 1);
+        let value = displayedValue.value;
+        do {
+          value = value + delta;
+          value = (value - props.min + count.value) % count.value + props.min;
+        } while (!isAllowed(value) && value !== displayedValue.value);
+        if (value !== props.displayedValue) {
+          update(value);
+        }
+      }
+      function isInner(value) {
+        return props.double && value - props.min >= roundCount.value;
+      }
+      function handScale(value) {
+        return isInner(value) ? innerRadiusScale.value : 1;
+      }
+      function getPosition(value) {
+        const rotateRadians = props.rotate * Math.PI / 180;
+        return {
+          x: Math.sin((value - props.min) * degrees.value + rotateRadians) * handScale(value),
+          y: -Math.cos((value - props.min) * degrees.value + rotateRadians) * handScale(value)
+        };
+      }
+      function angleToValue(angle, insideClick) {
+        const value = (Math.round(angle / degreesPerUnit.value) + (insideClick ? roundCount.value : 0)) % count.value + props.min;
+
+        // Necessary to fix edge case when selecting left part of the value(s) at 12 o'clock
+        if (angle < 360 - degreesPerUnit.value / 2) return value;
+        return insideClick ? props.max - roundCount.value + 1 : props.min;
+      }
+      function getTransform(i) {
+        const {
+          x,
+          y
+        } = getPosition(i);
+        return {
+          left: `${50 + x * 50}%`,
+          top: `${50 + y * 50}%`
+        };
+      }
+      function euclidean(p0, p1) {
+        const dx = p1.x - p0.x;
+        const dy = p1.y - p0.y;
+        return Math.sqrt(dx * dx + dy * dy);
+      }
+      function angle(center, p1) {
+        const value = 2 * Math.atan2(p1.y - center.y - euclidean(center, p1), p1.x - center.x);
+        return Math.abs(value * 180 / Math.PI);
+      }
+      function setMouseDownValue(value) {
+        if (valueOnMouseDown.value === null) {
+          valueOnMouseDown.value = value;
+        }
+        valueOnMouseUp.value = value;
+        update(value);
+      }
+      function onDragMove(e) {
+        e.preventDefault();
+        if (!isDragging.value && e.type !== 'click' || !clockRef.value) return;
+        const {
+          width,
+          top,
+          left
+        } = clockRef.value?.getBoundingClientRect();
+        const {
+          width: innerWidth
+        } = innerClockRef.value?.getBoundingClientRect() ?? {
+          width: 0
+        };
+        const {
+          clientX,
+          clientY
+        } = 'touches' in e ? e.touches[0] : e;
+        const center = {
+          x: width / 2,
+          y: -width / 2
+        };
+        const coords = {
+          x: clientX - left,
+          y: top - clientY
+        };
+        const handAngle = Math.round(angle(center, coords) - props.rotate + 360) % 360;
+        const insideClick = props.double && euclidean(center, coords) < (innerWidth + innerWidth * innerRadiusScale.value) / 4;
+        const checksCount = Math.ceil(15 / degreesPerUnit.value);
+        let value;
+        for (let i = 0; i < checksCount; i++) {
+          value = angleToValue(handAngle + i * degreesPerUnit.value, insideClick);
+          if (isAllowed(value)) return setMouseDownValue(value);
+          value = angleToValue(handAngle - i * degreesPerUnit.value, insideClick);
+          if (isAllowed(value)) return setMouseDownValue(value);
+        }
+      }
+      function onMouseDown(e) {
+        e.preventDefault();
+        valueOnMouseDown.value = null;
+        valueOnMouseUp.value = null;
+        isDragging.value = true;
+        onDragMove(e);
+      }
+      function onMouseUp(e) {
+        e.stopPropagation();
+        isDragging.value = false;
+        if (valueOnMouseUp.value !== null && isAllowed(valueOnMouseUp.value)) {
+          emit('change', valueOnMouseUp.value);
+        }
+      }
+      useRender(() => {
+        return vue.createVNode("div", {
+          "class": [{
+            'v-time-picker-clock': true,
+            'v-time-picker-clock--indeterminate': props.modelValue == null,
+            'v-time-picker-clock--readonly': props.readonly
+          }],
+          "onMousedown": onMouseDown,
+          "onMouseup": onMouseUp,
+          "onMouseleave": e => isDragging.value && onMouseUp(e),
+          "onTouchstart": onMouseDown,
+          "onTouchend": onMouseUp,
+          "onMousemove": onDragMove,
+          "onTouchmove": onDragMove,
+          "onWheel": e => props.scrollable && wheel(e),
+          "ref": clockRef
+        }, [vue.createVNode("div", {
+          "class": "v-time-picker-clock__inner",
+          "ref": innerClockRef
+        }, [vue.createVNode("div", {
+          "class": [{
+            'v-time-picker-clock__hand': true,
+            'v-time-picker-clock__hand--inner': isInner(props.modelValue)
+          }, textColorClasses.value],
+          "style": [{
+            transform: `rotate(${props.rotate + degreesPerUnit.value * (displayedValue.value - props.min)}deg) scaleY(${handScale(displayedValue.value)})`
+          }, textColorStyles.value]
+        }, null), genChildren.value.map(value => {
+          const isActive = value === displayedValue.value;
+          return vue.createVNode("div", {
+            "class": [{
+              'v-time-picker-clock__item': true,
+              'v-time-picker-clock__item--active': isActive,
+              'v-time-picker-clock__item--disabled': props.disabled || !isAllowed(value)
+            }, isActive && backgroundColorClasses.value],
+            "style": [getTransform(value), isActive && backgroundColorStyles.value]
+          }, [vue.createVNode("span", null, [props.format(value)])]);
+        })])]);
+      });
+    }
+  });
+
+  // @ts-nocheck
+  /* eslint-disable */
+
+  const padStart = (string, targetLength, padString) => {
+    targetLength = targetLength >> 0;
+    string = String(string);
+    padString = String(padString);
+    if (string.length > targetLength) {
+      return String(string);
+    }
+    targetLength = targetLength - string.length;
+    if (targetLength > padString.length) {
+      padString += padString.repeat(targetLength / padString.length);
+    }
+    return padString.slice(0, targetLength) + String(string);
+  };
+  var pad = (function (n) {
+    let length = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
+    return padStart(n, length, '0');
+  });
+
+  // @ts-nocheck
+  /* eslint-disable */
+  var SelectingTimes = /*#__PURE__*/function (SelectingTimes) {
+    SelectingTimes[SelectingTimes["Hour"] = 1] = "Hour";
+    SelectingTimes[SelectingTimes["Minute"] = 2] = "Minute";
+    SelectingTimes[SelectingTimes["Second"] = 3] = "Second";
+    return SelectingTimes;
+  }(SelectingTimes || {});
+
+  const makeVTimePickerControlsProps = propsFactory({
+    ampm: Boolean,
+    ampmReadonly: Boolean,
+    color: String,
+    disabled: Boolean,
+    hour: Number,
+    minute: Number,
+    second: Number,
+    period: String,
+    readonly: Boolean,
+    useSeconds: Boolean,
+    selecting: Number,
+    value: Number
+  }, 'VTimePickerControls');
+  const VTimePickerControls = genericComponent()({
+    name: 'VTimePickerControls',
+    props: makeVTimePickerControlsProps(),
+    emits: {
+      'update:period': data => data,
+      'update:selecting': data => data
+    },
+    setup(props, _ref) {
+      let {
+        emit,
+        slots
+      } = _ref;
+      const {
+        t
+      } = useLocale();
+      useRender(() => {
+        let hour = props.hour;
+        if (props.ampm) {
+          hour = hour ? (hour - 1) % 12 + 1 : 12;
+        }
+        return vue.createVNode("div", {
+          "class": "v-time-picker-controls"
+        }, [vue.createVNode("div", {
+          "class": {
+            'v-time-picker-controls__time': true,
+            'v-time-picker-controls__time--with-seconds': props.useSeconds
+          }
+        }, [vue.createVNode(VBtn, {
+          "active": props.selecting === 1,
+          "color": props.selecting === 1 ? props.color : undefined,
+          "variant": "tonal",
+          "class": {
+            'v-time-picker-controls__time__btn': true,
+            'v-time-picker-controls__time--with-ampm__btn': props.ampm,
+            'v-time-picker-controls__time--with-seconds__btn': props.useSeconds
+          },
+          "text": props.hour == null ? '--' : pad(`${hour}`),
+          "onClick": () => emit('update:selecting', SelectingTimes.Hour)
+        }, null), vue.createVNode("span", {
+          "class": ['v-time-picker-controls__time__separator', {
+            'v-time-picker-controls--with-seconds__time__separator': props.useSeconds
+          }]
+        }, [vue.createTextVNode(":")]), vue.createVNode(VBtn, {
+          "active": props.selecting === 2,
+          "color": props.selecting === 2 ? props.color : undefined,
+          "class": {
+            'v-time-picker-controls__time__btn': true,
+            'v-time-picker-controls__time__btn__active': props.selecting === 2,
+            'v-time-picker-controls__time--with-ampm__btn': props.ampm,
+            'v-time-picker-controls__time--with-seconds__btn': props.useSeconds
+          },
+          "variant": "tonal",
+          "text": props.minute == null ? '--' : pad(props.minute),
+          "onClick": () => emit('update:selecting', SelectingTimes.Minute)
+        }, null), props.useSeconds && vue.createVNode("span", {
+          "class": ['v-time-picker-controls__time__separator', {
+            'v-time-picker-controls--with-seconds__time__separator': props.useSeconds
+          }],
+          "key": "secondsDivider"
+        }, [vue.createTextVNode(":")]), props.useSeconds && vue.createVNode(VBtn, {
+          "key": "secondsVal",
+          "variant": "tonal",
+          "onClick": () => emit('update:selecting', SelectingTimes.Second),
+          "class": {
+            'v-time-picker-controls__time__btn': true,
+            'v-time-picker-controls__time__btn__active': props.selecting === 3,
+            'v-time-picker-controls__time--with-seconds__btn': props.useSeconds
+          },
+          "text": props.second == null ? '--' : pad(props.second)
+        }, null), props.ampm && vue.createVNode("div", {
+          "class": ['v-time-picker-controls__ampm', {
+            'v-time-picker-controls__ampm--readonly': props.ampmReadonly
+          }]
+        }, [vue.createVNode(VBtn, {
+          "active": props.period === 'am',
+          "color": props.period === 'am' ? props.color : undefined,
+          "class": {
+            'v-time-picker-controls__ampm__am': true,
+            'v-time-picker-controls__ampm__btn': true,
+            'v-time-picker-controls__ampm__btn__active': props.period === 'am'
+          },
+          "text": t('$vuetify.timePicker.am'),
+          "variant": "tonal",
+          "onClick": () => props.period !== 'am' ? emit('update:period', 'am') : null
+        }, null), vue.createVNode(VBtn, {
+          "active": props.period === 'pm',
+          "color": props.period === 'pm' ? props.color : undefined,
+          "class": {
+            'v-time-picker-controls__ampm__pm': true,
+            'v-time-picker-controls__ampm__btn': true,
+            'v-time-picker-controls__ampm__btn__active': props.period === 'pm'
+          },
+          "text": t('$vuetify.timePicker.pm'),
+          "variant": "tonal",
+          "onClick": () => props.period !== 'pm' ? emit('update:period', 'pm') : null
+        }, null)])])]);
+      });
+      return {};
+    }
+  });
+
+  // Types
+
+  const rangeHours24 = createRange(24);
+  const rangeHours12am = createRange(12);
+  const rangeHours12pm = rangeHours12am.map(v => v + 12);
+  const range60 = createRange(60);
+  const selectingNames = {
+    1: 'hour',
+    2: 'minute',
+    3: 'second'
+  };
+  const makeVTimePickerProps = propsFactory({
+    allowedHours: [Function, Array],
+    allowedMinutes: [Function, Array],
+    allowedSeconds: [Function, Array],
+    ampmInTitle: Boolean,
+    disabled: Boolean,
+    format: {
+      type: String,
+      default: 'ampm'
+    },
+    max: String,
+    min: String,
+    modelValue: null,
+    readonly: Boolean,
+    scrollable: Boolean,
+    useSeconds: Boolean,
+    ...omit(makeVPickerProps({
+      title: '$vuetify.timePicker.title'
+    }), ['landscape'])
+  }, 'VTimePicker');
+  const VTimePicker = genericComponent()({
+    name: 'VTimePicker',
+    props: makeVTimePickerProps(),
+    emits: {
+      'update:hour': val => val,
+      'update:minute': val => val,
+      'update:period': val => val,
+      'update:second': val => val,
+      'update:modelValue': val => val
+    },
+    setup(props, _ref) {
+      let {
+        emit,
+        slots
+      } = _ref;
+      const {
+        t
+      } = useLocale();
+      const inputHour = vue.ref(null);
+      const inputMinute = vue.ref(null);
+      const inputSecond = vue.ref(null);
+      const lazyInputHour = vue.ref(null);
+      const lazyInputMinute = vue.ref(null);
+      const lazyInputSecond = vue.ref(null);
+      const period = vue.ref('am');
+      const selecting = vue.ref(SelectingTimes.Hour);
+      const controlsRef = vue.ref(null);
+      const clockRef = vue.ref(null);
+      const isAllowedHourCb = vue.computed(() => {
+        let cb;
+        if (props.allowedHours instanceof Array) {
+          cb = val => props.allowedHours.includes(val);
+        } else {
+          cb = props.allowedHours;
+        }
+        if (!props.min && !props.max) return cb;
+        const minHour = props.min ? Number(props.min.split(':')[0]) : 0;
+        const maxHour = props.max ? Number(props.max.split(':')[0]) : 23;
+        return val => {
+          return val >= minHour * 1 && val <= maxHour * 1 && (!cb || cb(val));
+        };
+      });
+      const isAllowedMinuteCb = vue.computed(() => {
+        let cb;
+        const isHourAllowed = !isAllowedHourCb.value || inputHour.value === null || isAllowedHourCb.value(inputHour.value);
+        if (props.allowedMinutes instanceof Array) {
+          cb = val => props.allowedMinutes.includes(val);
+        } else {
+          cb = props.allowedMinutes;
+        }
+        if (!props.min && !props.max) {
+          return isHourAllowed ? cb : () => false;
+        }
+        const [minHour, minMinute] = props.min ? props.min.split(':').map(Number) : [0, 0];
+        const [maxHour, maxMinute] = props.max ? props.max.split(':').map(Number) : [23, 59];
+        const minTime = minHour * 60 + minMinute * 1;
+        const maxTime = maxHour * 60 + maxMinute * 1;
+        return val => {
+          const time = 60 * inputHour.value + val;
+          return time >= minTime && time <= maxTime && isHourAllowed && (!cb || cb(val));
+        };
+      });
+      const isAllowedSecondCb = vue.computed(() => {
+        let cb;
+        const isHourAllowed = !isAllowedHourCb.value || inputHour.value === null || isAllowedHourCb.value(inputHour.value);
+        const isMinuteAllowed = isHourAllowed && (!isAllowedMinuteCb.value || inputMinute.value === null || isAllowedMinuteCb.value(inputMinute.value));
+        if (props.allowedSeconds instanceof Array) {
+          cb = val => props.allowedSeconds.includes(val);
+        } else {
+          cb = props.allowedSeconds;
+        }
+        if (!props.min && !props.max) {
+          return isMinuteAllowed ? cb : () => false;
+        }
+        const [minHour, minMinute, minSecond] = props.min ? props.min.split(':').map(Number) : [0, 0, 0];
+        const [maxHour, maxMinute, maxSecond] = props.max ? props.max.split(':').map(Number) : [23, 59, 59];
+        const minTime = minHour * 3600 + minMinute * 60 + (minSecond || 0) * 1;
+        const maxTime = maxHour * 3600 + maxMinute * 60 + (maxSecond || 0) * 1;
+        return val => {
+          const time = 3600 * inputHour.value + 60 * inputMinute.value + val;
+          return time >= minTime && time <= maxTime && isMinuteAllowed && (!cb || cb(val));
+        };
+      });
+      const isAmPm = vue.computed(() => {
+        return props.format === 'ampm';
+      });
+      vue.watch(() => props.modelValue, val => setInputData(val));
+      vue.onMounted(() => {
+        setInputData(props.modelValue);
+      });
+      function genValue() {
+        if (inputHour.value != null && inputMinute.value != null && (!props.useSeconds || inputSecond.value != null)) {
+          return `${pad(inputHour.value)}:${pad(inputMinute.value)}` + (props.useSeconds ? `:${pad(inputSecond.value)}` : '');
+        }
+        return null;
+      }
+      function emitValue() {
+        const value = genValue();
+        if (value !== null) emit('update:modelValue', value);
+      }
+      function convert24to12(hour) {
+        return hour ? (hour - 1) % 12 + 1 : 12;
+      }
+      function convert12to24(hour, period) {
+        return hour % 12 + (period === 'pm' ? 12 : 0);
+      }
+      function setInputData(value) {
+        if (value == null || value === '') {
+          inputHour.value = null;
+          inputMinute.value = null;
+          inputSecond.value = null;
+        } else if (value instanceof Date) {
+          inputHour.value = value.getHours();
+          inputMinute.value = value.getMinutes();
+          inputSecond.value = value.getSeconds();
+        } else {
+          const [hour,, minute,, second, period] = value.trim().toLowerCase().match(/^(\d+):(\d+)(:(\d+))?([ap]m)?$/) || new Array(6);
+          inputHour.value = period ? convert12to24(parseInt(hour, 10), period) : parseInt(hour, 10);
+          inputMinute.value = parseInt(minute, 10);
+          inputSecond.value = parseInt(second || 0, 10);
+        }
+        period.value = inputHour.value == null || inputHour.value < 12 ? 'am' : 'pm';
+      }
+      function firstAllowed(type, value) {
+        const allowedFn = type === 'hour' ? isAllowedHourCb.value : type === 'minute' ? isAllowedMinuteCb.value : isAllowedSecondCb.value;
+        if (!allowedFn) return value;
+
+        // TODO: clean up (Note from V2 code)
+        const range = type === 'minute' ? range60 : type === 'second' ? range60 : isAmPm.value ? value < 12 ? rangeHours12am : rangeHours12pm : rangeHours24;
+        const first = range.find(v => allowedFn((v + value) % range.length + range[0]));
+        return ((first || 0) + value) % range.length + range[0];
+      }
+      function setPeriod(val) {
+        period.value = val;
+        if (inputHour.value != null) {
+          const newHour = inputHour.value + (period.value === 'am' ? -12 : 12);
+          inputHour.value = firstAllowed('hour', newHour);
+        }
+        emit('update:period', val);
+        emitValue();
+        return true;
+      }
+      function onInput(value) {
+        if (selecting.value === SelectingTimes.Hour) {
+          inputHour.value = isAmPm.value ? convert12to24(value, period.value) : value;
+        } else if (selecting.value === SelectingTimes.Minute) {
+          inputMinute.value = value;
+        } else {
+          inputSecond.value = value;
+        }
+      }
+      function onChange(value) {
+        switch (selectingNames[selecting.value]) {
+          case 'hour':
+            emit('update:hour', value);
+            break;
+          case 'minutes':
+            emit('update:minute', value);
+            break;
+          case 'seconds':
+            emit('update:second', value);
+            break;
+        }
+        const emitChange = selecting.value === (props.useSeconds ? SelectingTimes.Second : SelectingTimes.Minute);
+        if (selecting.value === SelectingTimes.Hour) {
+          selecting.value = SelectingTimes.Minute;
+        } else if (props.useSeconds && selecting.value === SelectingTimes.Minute) {
+          selecting.value = SelectingTimes.Second;
+        }
+        if (inputHour.value === lazyInputHour.value && inputMinute.value === lazyInputMinute.value && (!props.useSeconds || inputSecond.value === lazyInputSecond.value)) return;
+        const time = genValue();
+        if (time === null) return;
+        lazyInputHour.value = inputHour.value;
+        lazyInputMinute.value = inputMinute.value;
+        props.useSeconds && (lazyInputSecond.value = inputSecond.value);
+        emitChange && emitValue();
+      }
+      useRender(() => {
+        const pickerProps = VPicker.filterProps(props);
+        const timePickerControlsProps = VTimePickerControls.filterProps(props);
+        const timePickerClockProps = VTimePickerClock.filterProps(omit(props, ['format', 'modelValue', 'min', 'max']));
+        return vue.createVNode(VPicker, vue.mergeProps(pickerProps, {
+          "color": undefined,
+          "class": ['v-time-picker', props.class],
+          "style": props.style
+        }), {
+          title: () => slots.title?.() ?? vue.createVNode("div", {
+            "class": "v-time-picker__title"
+          }, [t(props.title)]),
+          header: () => vue.createVNode(VTimePickerControls, vue.mergeProps(timePickerControlsProps, {
+            "ampm": isAmPm.value || props.ampmInTitle,
+            "ampmReadonly": isAmPm.value && !props.ampmInTitle,
+            "hour": inputHour.value,
+            "minute": inputMinute.value,
+            "period": period.value,
+            "second": inputSecond.value,
+            "selecting": selecting.value,
+            "onUpdate:period": val => setPeriod(val),
+            "onUpdate:selecting": value => selecting.value = value,
+            "ref": controlsRef
+          }), null),
+          default: () => vue.createVNode(VTimePickerClock, vue.mergeProps(timePickerClockProps, {
+            "allowedValues": selecting.value === SelectingTimes.Hour ? isAllowedHourCb.value : selecting.value === SelectingTimes.Minute ? isAllowedMinuteCb.value : isAllowedSecondCb.value,
+            "double": selecting.value === SelectingTimes.Hour && !isAmPm.value,
+            "format": selecting.value === SelectingTimes.Hour ? isAmPm.value ? convert24to12 : val => val : val => pad(val, 2),
+            "max": selecting.value === SelectingTimes.Hour ? isAmPm.value && period.value === 'am' ? 11 : 23 : 59,
+            "min": selecting.value === SelectingTimes.Hour && isAmPm.value && period.value === 'pm' ? 12 : 0,
+            "size": 20,
+            "step": selecting.value === SelectingTimes.Hour ? 1 : 5,
+            "modelValue": selecting.value === SelectingTimes.Hour ? inputHour.value : selecting.value === SelectingTimes.Minute ? inputMinute.value : inputSecond.value,
+            "onChange": onChange,
+            "onInput": onInput,
+            "ref": clockRef
+          }), null),
+          actions: slots.actions
+        });
+      });
+    }
+  });
+
+  // Types
+
   const makeVTreeviewGroupProps = propsFactory({
     ...omit(makeVListGroupProps({
       collapseIcon: '$treeviewCollapse',
@@ -27627,6 +28274,9 @@
     VTextField: VTextField,
     VTextarea: VTextarea,
     VThemeProvider: VThemeProvider,
+    VTimePicker: VTimePicker,
+    VTimePickerClock: VTimePickerClock,
+    VTimePickerControls: VTimePickerControls,
     VTimeline: VTimeline,
     VTimelineItem: VTimelineItem,
     VToolbar: VToolbar,
@@ -27862,7 +28512,7 @@
       goTo
     };
   }
-  const version$1 = "3.5.10";
+  const version$1 = "3.5.12";
   createVuetify$1.version = version$1;
 
   // Vue's inject() can only be used in setup
@@ -28115,7 +28765,7 @@
 
   /* eslint-disable local-rules/sort-imports */
 
-  const version = "3.5.10";
+  const version = "3.5.12";
 
   /* eslint-disable local-rules/sort-imports */