vuetify 3.5.11 → 3.5.12

package/dist/vuetify-labs.esm.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.5.11
+* Vuetify v3.5.12
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -313,7 +313,7 @@ function padEnd(str, length) {
   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;
 }
@@ -2007,7 +2007,8 @@ var en = {
   },
   timePicker: {
     am: 'AM',
-    pm: 'PM'
+    pm: 'PM',
+    title: 'Select Time'
   },
   pagination: {
     ariaLabel: {
@@ -3169,10 +3170,13 @@ const MaybeTransition = (props, _ref) => {
   } = typeof transition === 'object' ? transition : {};
   return h(component, 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
@@ -5083,19 +5087,27 @@ function useLink(props, attrs) {
       href: 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 = 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 = computed(() => props.to ? routerLink : undefined);
   const route = useRoute();
   return {
     isLink,
     isClickable,
-    route: link?.route,
-    navigate: link?.navigate,
-    isActive: link && 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: 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: computed(() => props.to ? link?.route.value.href : props.href)
+    href: computed(() => props.to ? link.value?.route.value.href : props.href)
   };
 }
 const makeRouterProps = propsFactory({
@@ -5981,7 +5993,7 @@ const makeSelectionControlGroupProps = propsFactory({
   falseIcon: IconValue,
   trueIcon: IconValue,
   ripple: {
-    type: Boolean,
+    type: [Boolean, Object],
     default: true
   },
   multiple: {
@@ -6205,6 +6217,7 @@ const VSelectionControl = genericComponent()({
         "onFocus": onFocus,
         "onInput": onInput,
         "aria-disabled": !!props.disabled,
+        "aria-label": props.label,
         "type": props.type,
         "value": trueValue.value,
         "name": props.name,
@@ -6664,14 +6677,15 @@ function useValidation(props) {
   watch([isValid, errorMessages], () => {
     form?.update(uid.value, isValid.value, errorMessages.value);
   });
-  function reset() {
+  async function reset() {
     model.value = null;
-    nextTick(resetValidation);
+    await nextTick();
+    await resetValidation();
   }
-  function resetValidation() {
+  async function resetValidation() {
     isPristine.value = true;
     if (!validateOn.value.lazy) {
-      validate(true);
+      await validate(true);
     } else {
       internalErrorMessages.value = [];
     }
@@ -17507,8 +17521,8 @@ function format(value, formatString, locale, formats) {
 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) {
@@ -26565,17 +26579,17 @@ const VNumberInput = genericComponent()({
                 ...slotProps
               }
             } = _ref2;
-            return createVNode("input", mergeProps({
+            return withDirectives(createVNode("input", 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), [[vModelText, model.value]]);
           },
           'append-inner': controlVariant.value === 'split' ? () => createVNode("div", {
             "class": "v-number-input__control"
@@ -27105,6 +27119,639 @@ const VSpeedDial = genericComponent()({
 
 // 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 = ref(null);
+    const innerClockRef = ref(null);
+    const inputValue = ref(undefined);
+    const isDragging = ref(false);
+    const valueOnMouseDown = ref(null);
+    const valueOnMouseUp = ref(null);
+    const {
+      textColorClasses,
+      textColorStyles
+    } = useTextColor(toRef(props, 'color'));
+    const {
+      backgroundColorClasses,
+      backgroundColorStyles
+    } = useBackgroundColor(toRef(props, 'color'));
+    const count = computed(() => props.max - props.min + 1);
+    const roundCount = computed(() => props.double ? count.value / 2 : count.value);
+    const degreesPerUnit = computed(() => 360 / roundCount.value);
+    const degrees = computed(() => degreesPerUnit.value * Math.PI / 180);
+    const displayedValue = computed(() => props.modelValue == null ? props.min : props.modelValue);
+    const innerRadiusScale = computed(() => 0.62);
+    const genChildren = computed(() => {
+      const children = [];
+      for (let value = props.min; value <= props.max; value = value + props.step) {
+        children.push(value);
+      }
+      return children;
+    });
+    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 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
+      }, [createVNode("div", {
+        "class": "v-time-picker-clock__inner",
+        "ref": innerClockRef
+      }, [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 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]
+        }, [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 createVNode("div", {
+        "class": "v-time-picker-controls"
+      }, [createVNode("div", {
+        "class": {
+          'v-time-picker-controls__time': true,
+          'v-time-picker-controls__time--with-seconds': props.useSeconds
+        }
+      }, [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), createVNode("span", {
+        "class": ['v-time-picker-controls__time__separator', {
+          'v-time-picker-controls--with-seconds__time__separator': props.useSeconds
+        }]
+      }, [createTextVNode(":")]), 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 && createVNode("span", {
+        "class": ['v-time-picker-controls__time__separator', {
+          'v-time-picker-controls--with-seconds__time__separator': props.useSeconds
+        }],
+        "key": "secondsDivider"
+      }, [createTextVNode(":")]), props.useSeconds && 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 && createVNode("div", {
+        "class": ['v-time-picker-controls__ampm', {
+          'v-time-picker-controls__ampm--readonly': props.ampmReadonly
+        }]
+      }, [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), 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 = ref(null);
+    const inputMinute = ref(null);
+    const inputSecond = ref(null);
+    const lazyInputHour = ref(null);
+    const lazyInputMinute = ref(null);
+    const lazyInputSecond = ref(null);
+    const period = ref('am');
+    const selecting = ref(SelectingTimes.Hour);
+    const controlsRef = ref(null);
+    const clockRef = ref(null);
+    const isAllowedHourCb = 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 = 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 = 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 = computed(() => {
+      return props.format === 'ampm';
+    });
+    watch(() => props.modelValue, val => setInputData(val));
+    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 createVNode(VPicker, mergeProps(pickerProps, {
+        "color": undefined,
+        "class": ['v-time-picker', props.class],
+        "style": props.style
+      }), {
+        title: () => slots.title?.() ?? createVNode("div", {
+          "class": "v-time-picker__title"
+        }, [t(props.title)]),
+        header: () => createVNode(VTimePickerControls, 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: () => createVNode(VTimePickerClock, 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',
@@ -27623,6 +28270,9 @@ var components = /*#__PURE__*/Object.freeze({
   VTextField: VTextField,
   VTextarea: VTextarea,
   VThemeProvider: VThemeProvider,
+  VTimePicker: VTimePicker,
+  VTimePickerClock: VTimePickerClock,
+  VTimePickerControls: VTimePickerControls,
   VTimeline: VTimeline,
   VTimelineItem: VTimelineItem,
   VToolbar: VToolbar,
@@ -27858,7 +28508,7 @@ function createVuetify$1() {
     goTo
   };
 }
-const version$1 = "3.5.11";
+const version$1 = "3.5.12";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -28111,7 +28761,7 @@ var index = /*#__PURE__*/Object.freeze({
 
 /* eslint-disable local-rules/sort-imports */
 
-const version = "3.5.11";
+const version = "3.5.12";
 
 /* eslint-disable local-rules/sort-imports */