vuetify 3.5.11 → 3.5.12

package/lib/labs/VTimePicker/VTimePickerClock.mjs

@@ -0,0 +1,244 @@
+import { createVNode as _createVNode } from "vue";
+// StylesthisValue
+// Styles
+import "./VTimePickerClock.css";
+
+// Composables
+import { useBackgroundColor, useTextColor } from "../../composables/color.mjs"; // Utilities
+import { computed, ref, toRef, watch } from 'vue';
+import { genericComponent, propsFactory, useRender } from "../../util/index.mjs"; // Types
+export 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');
+export 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)])]);
+      })])]);
+    });
+  }
+});
+//# sourceMappingURL=VTimePickerClock.mjs.map

package/lib/labs/VTimePicker/VTimePickerClock.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"VTimePickerClock.mjs","names":["useBackgroundColor","useTextColor","computed","ref","toRef","watch","genericComponent","propsFactory","useRender","makeVTimePickerClockProps","allowedValues","Function","ampm","Boolean","color","String","disabled","displayedValue","default","double","format","type","val","max","Number","required","min","scrollable","readonly","rotate","step","modelValue","VTimePickerClock","name","props","emits","change","input","setup","_ref","emit","clockRef","innerClockRef","inputValue","undefined","isDragging","valueOnMouseDown","valueOnMouseUp","textColorClasses","textColorStyles","backgroundColorClasses","backgroundColorStyles","count","roundCount","value","degreesPerUnit","degrees","Math","PI","innerRadiusScale","genChildren","children","push","update","isAllowed","wheel","e","preventDefault","delta","sign","deltaY","isInner","handScale","getPosition","rotateRadians","x","sin","y","cos","angleToValue","angle","insideClick","round","getTransform","i","left","top","euclidean","p0","p1","dx","dy","sqrt","center","atan2","abs","setMouseDownValue","onDragMove","width","getBoundingClientRect","innerWidth","clientX","clientY","touches","coords","handAngle","checksCount","ceil","onMouseDown","onMouseUp","stopPropagation","_createVNode","transform","map","isActive"],"sources":["../../../src/labs/VTimePicker/VTimePickerClock.tsx"],"sourcesContent":["// StylesthisValue\n// Styles\nimport './VTimePickerClock.sass'\n\n// Composables\nimport { useBackgroundColor, useTextColor } from '@/composables/color'\n\n// Utilities\nimport { computed, ref, toRef, watch } from 'vue'\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\ninterface Point {\n  x: number\n  y: number\n}\n\nexport const makeVTimePickerClockProps = propsFactory({\n  allowedValues: Function as PropType<(value: number) => boolean>,\n  ampm: Boolean,\n  color: String,\n  disabled: Boolean,\n  displayedValue: {\n    default: null,\n  },\n  double: Boolean,\n  format: {\n    type: Function,\n    default: (val: string | number) => val,\n  },\n  max: {\n    type: Number,\n    required: true,\n  },\n  min: {\n    type: Number,\n    required: true,\n  },\n  scrollable: Boolean,\n  readonly: Boolean,\n  rotate: {\n    type: Number,\n    default: 0,\n  },\n  step: {\n    type: Number,\n    default: 1,\n  },\n  modelValue: {\n    type: Number,\n  },\n}, 'VTimePickerClock')\n\nexport const VTimePickerClock = genericComponent()({\n  name: 'VTimePickerClock',\n\n  props: makeVTimePickerClockProps(),\n\n  emits: {\n    change: (val: number) => val,\n    input: (val: number) => val,\n  },\n\n  setup (props, { emit }) {\n    const clockRef = ref<HTMLElement | null>(null)\n    const innerClockRef = ref<HTMLElement | null>(null)\n    const inputValue = ref<number | undefined>(undefined)\n    const isDragging = ref(false)\n    const valueOnMouseDown = ref(null as number | null)\n    const valueOnMouseUp = ref(null as number | null)\n\n    const { textColorClasses, textColorStyles } = useTextColor(toRef(props, 'color'))\n    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'color'))\n\n    const count = computed(() => props.max - props.min + 1)\n    const roundCount = computed(() => props.double ? (count.value / 2) : count.value)\n    const degreesPerUnit = computed(() => 360 / roundCount.value)\n    const degrees = computed(() => degreesPerUnit.value * Math.PI / 180)\n    const displayedValue = computed(() => props.modelValue == null ? props.min : props.modelValue)\n    const innerRadiusScale = computed(() => 0.62)\n\n    const genChildren = computed(() => {\n      const children = []\n      for (let value = props.min; value <= props.max; value = value + props.step) {\n        children.push(value)\n      }\n      return children\n    })\n\n    watch(() => props.modelValue, val => {\n      inputValue.value = val\n    })\n\n    function update (value: number) {\n      if (inputValue.value !== value) {\n        inputValue.value = value\n      }\n      emit('input', value)\n    }\n\n    function isAllowed (value: number) {\n      return !props.allowedValues || props.allowedValues(value)\n    }\n\n    function wheel (e: WheelEvent) {\n      e.preventDefault()\n\n      const delta = Math.sign(-e.deltaY || 1)\n      let value = displayedValue.value\n      do {\n        value = value + delta\n        value = (value - props.min + count.value) % count.value + props.min\n      } while (!isAllowed(value) && value !== displayedValue.value)\n\n      if (value !== props.displayedValue) {\n        update(value)\n      }\n    }\n\n    function isInner (value: number) {\n      return props.double && (value - props.min >= roundCount.value)\n    }\n\n    function handScale (value: number) {\n      return isInner(value) ? innerRadiusScale.value : 1\n    }\n\n    function getPosition (value: number) {\n      const rotateRadians = props.rotate * Math.PI / 180\n      return {\n        x: Math.sin((value - props.min) * degrees.value + rotateRadians) * handScale(value),\n        y: -Math.cos((value - props.min) * degrees.value + rotateRadians) * handScale(value),\n      }\n    }\n\n    function angleToValue (angle: number, insideClick: boolean): number {\n      const value = (\n        Math.round(angle / degreesPerUnit.value) +\n        (insideClick ? roundCount.value : 0)\n      ) % count.value + props.min\n\n      // Necessary to fix edge case when selecting left part of the value(s) at 12 o'clock\n      if (angle < (360 - degreesPerUnit.value / 2)) return value\n\n      return insideClick ? props.max - roundCount.value + 1 : props.min\n    }\n\n    function getTransform (i: number) {\n      const { x, y } = getPosition(i)\n      return {\n        left: `${50 + x * 50}%`,\n        top: `${50 + y * 50}%`,\n      }\n    }\n\n    function euclidean (p0: Point, p1: Point) {\n      const dx = p1.x - p0.x\n      const dy = p1.y - p0.y\n\n      return Math.sqrt(dx * dx + dy * dy)\n    }\n\n    function angle (center: Point, p1: Point) {\n      const value = 2 * Math.atan2(p1.y - center.y - euclidean(center, p1), p1.x - center.x)\n      return Math.abs(value * 180 / Math.PI)\n    }\n\n    function setMouseDownValue (value: number) {\n      if (valueOnMouseDown.value === null) {\n        valueOnMouseDown.value = value\n      }\n\n      valueOnMouseUp.value = value\n      update(value)\n    }\n\n    function onDragMove (e: MouseEvent | TouchEvent) {\n      e.preventDefault()\n      if ((!isDragging.value && e.type !== 'click') || !clockRef.value) return\n      const { width, top, left } = clockRef.value?.getBoundingClientRect()\n      const { width: innerWidth }: DOMRect = innerClockRef.value?.getBoundingClientRect() ?? { width: 0 } as DOMRect\n      const { clientX, clientY } = 'touches' in e ? e.touches[0] : e\n      const center = { x: width / 2, y: -width / 2 }\n      const coords = { x: clientX - left, y: top - clientY }\n      const handAngle = Math.round(angle(center, coords) - props.rotate + 360) % 360\n      const insideClick = props.double && euclidean(center, coords) < (innerWidth as number + innerWidth * innerRadiusScale.value) / 4\n      const checksCount = Math.ceil(15 / degreesPerUnit.value)\n      let value\n\n      for (let i = 0; i < checksCount; i++) {\n        value = angleToValue(handAngle + i * degreesPerUnit.value, insideClick)\n        if (isAllowed(value)) return setMouseDownValue(value)\n\n        value = angleToValue(handAngle - i * degreesPerUnit.value, insideClick)\n        if (isAllowed(value)) return setMouseDownValue(value)\n      }\n    }\n\n    function onMouseDown (e: MouseEvent | TouchEvent) {\n      e.preventDefault()\n\n      valueOnMouseDown.value = null\n      valueOnMouseUp.value = null\n      isDragging.value = true\n      onDragMove(e)\n    }\n\n    function onMouseUp (e: MouseEvent | TouchEvent) {\n      e.stopPropagation()\n\n      isDragging.value = false\n      if (valueOnMouseUp.value !== null && isAllowed(valueOnMouseUp.value)) {\n        emit('change', valueOnMouseUp.value)\n      }\n    }\n\n    useRender(() => {\n      return (\n        <div\n          class={[\n            {\n              'v-time-picker-clock': true,\n              'v-time-picker-clock--indeterminate': props.modelValue == null,\n              'v-time-picker-clock--readonly': props.readonly,\n            },\n          ]}\n          onMousedown={ onMouseDown }\n          onMouseup={ onMouseUp }\n          onMouseleave={ (e: MouseEvent) => (isDragging.value && onMouseUp(e)) }\n          onTouchstart={ onMouseDown }\n          onTouchend={ onMouseUp }\n          onMousemove={ onDragMove }\n          onTouchmove={ onDragMove }\n          onWheel={ (e: WheelEvent) => (props.scrollable && wheel(e)) }\n          ref={ clockRef }\n        >\n          <div class=\"v-time-picker-clock__inner\" ref={ innerClockRef }>\n            <div\n              class={[\n                {\n                  'v-time-picker-clock__hand': true,\n                  'v-time-picker-clock__hand--inner': isInner(props.modelValue as number),\n                },\n                textColorClasses.value,\n              ]}\n              style={[\n                {\n                  transform: `rotate(${props.rotate + degreesPerUnit.value * (displayedValue.value - props.min)}deg) scaleY(${handScale(displayedValue.value)})`,\n                },\n                textColorStyles.value,\n              ]}\n            />\n\n            {\n              genChildren.value.map(value => {\n                const isActive = value === displayedValue.value\n\n                return (\n                  <div\n                    class={[\n                      {\n                        'v-time-picker-clock__item': true,\n                        'v-time-picker-clock__item--active': isActive,\n                        'v-time-picker-clock__item--disabled': props.disabled || !isAllowed(value),\n                      },\n                      isActive && backgroundColorClasses.value,\n                    ]}\n                    style={[\n                      getTransform(value),\n                      isActive && backgroundColorStyles.value,\n                    ]}\n                  >\n                    <span>{ props.format(value) }</span>\n                  </div>\n                )\n              })\n            }\n          </div>\n        </div>\n      )\n    })\n  },\n})\n\nexport type VTimePickerClock = InstanceType<typeof VTimePickerClock>\n"],"mappings":"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"}

package/lib/{components → labs}/VTimePicker/VTimePickerClock.sass

@@ -1,32 +1,27 @@
 @import './_variables.scss'
 
 // Theme
-+theme(v-time-picker-clock) using ($material)
-  background: map-deep-get($material, 'picker', 'clock')
-
-  .v-time-picker-clock__item--disabled
-    color: map-deep-get($material, 'buttons', 'disabled')
+.v-time-picker-clock
+  background: rgb(var(--v-theme-background))
+  color: rgb(var(--v-theme-on-background))
 
-    &.v-time-picker-clock__item--active
-      color: map-deep-get($material-dark, 'buttons', 'disabled')
 
-  &--indeterminate
-    .v-time-picker-clock__hand
-      background-color: map-deep-get($material, 'picker', 'indeterminateTime')
+  &:after
+    color: rgb(var(--v-theme-primary))
 
-    &:after
-      color: map-deep-get($material, 'picker', 'indeterminateTime')
-
-    .v-time-picker-clock__item--active
-      background-color: map-deep-get($material, 'picker', 'indeterminateTime')
+  .v-time-picker-clock__item--active
+    background-color: rgb(var(--v-theme-surface-variant))
+    color: rgb(var(--v-theme-on-surface-variant))
 
 .v-time-picker-clock
-  border-radius: 100%
+  margin: 0 auto
+  background: rgb(var(--v-theme-surface-light))
+  border-radius: 50%
   position: relative
-  transition: $primary-transition
+  transition: none
   user-select: none
-  width: 100%
-  padding-top: 100%
+  height: 256px
+  width: 256px
   flex: 1 0 auto
 
   &__container
@@ -36,20 +31,8 @@
     justify-content: center
     padding: $time-picker-clock-padding
 
-  &__ampm
-    display: flex
-    flex-direction: row
-    justify-content: space-between
-    align-items: flex-end
-    position: absolute
-    width: 100%
-    height: 100%
-    top: 0
-    left: 0
-    margin: 0
-    padding: $time-picker-ampm-padding
-
   &__hand
+    background-color: currentColor
     height: $time-picker-clock-hand-height
     width: $time-picker-clock-hand-width
     bottom: 50%
@@ -81,14 +64,18 @@
       top: 100%
       left: 50%
       border-radius: 100%
-      border-style: solid
-      border-color: inherit
-      background-color: inherit
+      background-color: currentColor
       transform: translate(-50%, -50%)
 
     &--inner:after
       height: $time-picker-clock-inner-hand-height
 
+  &--readonly
+    pointer-events: none
+
+  .v-time-picker-clock__item--disabled
+    opacity: var(--v-disabled-opacity)
+
 .v-picker--full-width
   .v-time-picker-clock__container
     max-width: $time-picker-clock-max-width
@@ -132,7 +119,6 @@
     width: $time-picker-indicator-size
 
   &--active
-    color: map-get($shades, 'white')
     cursor: default
     z-index: 2
 
@@ -143,6 +129,3 @@
   .v-time-picker-clock
     &__container
       flex-direction: row
-
-    &__ampm
-      flex-direction: column

package/lib/labs/VTimePicker/VTimePickerControls.css

@@ -0,0 +1,104 @@
+.v-time-picker-controls {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.875rem;
+  padding-top: 4px;
+  padding-bottom: 4px;
+  margin-bottom: 36px;
+}
+.v-time-picker-controls__text {
+  padding-bottom: 12px;
+}
+.v-time-picker-controls__time {
+  display: flex;
+  white-space: nowrap;
+  direction: ltr;
+  justify-content: center;
+}
+.v-time-picker-controls__time__btn.v-btn--density-default.v-btn {
+  width: 96px;
+  height: 80px;
+  font-size: 56px;
+}
+.v-time-picker-controls__time__btn.v-btn--density-default.v-btn__active {
+  background: rgb(var(--v-theme-primary));
+}
+.v-time-picker-controls__time__btn.v-btn--density-default.v-btn.v-time-picker-controls__time--with-ampm__btn {
+  width: 96px;
+  height: 80px;
+}
+.v-time-picker-controls__time__btn.v-btn--density-default.v-btn.v-time-picker-controls__time--with-seconds__btn {
+  width: 64px;
+  height: 80px;
+  font-size: 40px;
+}
+.v-time-picker-controls__time__separator {
+  font-size: 56px;
+  height: 80px;
+  width: 24px;
+  text-align: center;
+}
+.v-time-picker-controls__time__separator.v-time-picker-controls--with-seconds__time__separator {
+  height: 80px;
+  font-size: 56px;
+}
+
+.v-time-picker-controls__ampm {
+  margin-left: 12px;
+  align-self: flex-end;
+  display: flex;
+  flex-direction: column;
+  font-size: 18px;
+  text-transform: uppercase;
+}
+.v-time-picker-controls__ampm--readonly {
+  pointer-events: none;
+}
+.v-time-picker-controls__ampm--readonly .v-picker__title__btn.v-picker__title__btn--active {
+  opacity: 0.6;
+}
+.v-time-picker-controls__ampm__btn.v-btn.v-btn--density-default {
+  font-size: 18px;
+  padding: 0 8px;
+  min-width: 52px;
+  height: 40px;
+}
+.v-time-picker-controls__ampm__btn.v-btn.v-btn--density-default.v-time-picker-controls__ampm__am {
+  border-radius: 4px 4px 0 0;
+  border: 1px solid;
+}
+.v-time-picker-controls__ampm__btn.v-btn.v-btn--density-default.v-time-picker-controls__ampm__pm {
+  border-radius: 0 0 4px 4px;
+  border: 1px solid;
+  border-top: none;
+}
+.v-time-picker-controls__ampm__btn.v-btn.v-btn--density-default__active {
+  background: rgb(var(--v-theme-primary));
+}
+
+.v-picker__title--landscape .v-time-picker-controls {
+  flex-direction: column;
+  justify-content: center;
+  height: 100%;
+}
+.v-picker__title--landscape .v-time-picker-controls__time {
+  text-align: right;
+}
+.v-picker__title--landscape .v-time-picker-controls__time .v-picker__title__btn,
+.v-picker__title--landscape .v-time-picker-controls__time span {
+  height: 55px;
+  font-size: 55px;
+}
+.v-picker__title--landscape .v-time-picker-controls__ampm {
+  margin: 16px 0 0;
+  align-self: initial;
+  text-align: center;
+}
+
+.v-picker--time .v-picker__title--landscape {
+  padding: 0;
+}
+.v-picker--time .v-picker__title--landscape .v-time-picker-controls__time {
+  text-align: center;
+}

package/lib/labs/VTimePicker/VTimePickerControls.mjs

@@ -0,0 +1,125 @@
+import { createTextVNode as _createTextVNode, createVNode as _createVNode } from "vue";
+// Styles
+import "./VTimePickerControls.css";
+
+// Components
+import { VBtn } from "../../components/VBtn/index.mjs";
+import { pad } from "../../components/VDatePicker/util/index.mjs"; // Composables
+import { useLocale } from "../../composables/locale.mjs"; // Utilities
+import { genericComponent, propsFactory, useRender } from "../../util/index.mjs"; // Types
+import { SelectingTimes } from "./SelectingTimes.mjs";
+export 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');
+export 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 {};
+  }
+});
+//# sourceMappingURL=VTimePickerControls.mjs.map

package/lib/labs/VTimePicker/VTimePickerControls.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"VTimePickerControls.mjs","names":["VBtn","pad","useLocale","genericComponent","propsFactory","useRender","SelectingTimes","makeVTimePickerControlsProps","ampm","Boolean","ampmReadonly","color","String","disabled","hour","Number","minute","second","period","readonly","useSeconds","selecting","value","VTimePickerControls","name","props","emits","data","setup","_ref","emit","slots","t","_createVNode","undefined","onClick","Hour","_createTextVNode","Minute","Second"],"sources":["../../../src/labs/VTimePicker/VTimePickerControls.tsx"],"sourcesContent":["// Styles\nimport './VTimePickerControls.sass'\n\n// Components\nimport { VBtn } from '@/components/VBtn'\nimport { pad } from '@/components/VDatePicker/util'\n\n// Composables\nimport { useLocale } from '@/composables/locale'\n\n// Utilities\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport { SelectingTimes } from './SelectingTimes'\ntype Period = 'am' | 'pm'\n\nexport const makeVTimePickerControlsProps = propsFactory({\n  ampm: Boolean,\n  ampmReadonly: Boolean,\n  color: String,\n  disabled: Boolean,\n  hour: Number,\n  minute: Number,\n  second: Number,\n  period: String,\n  readonly: Boolean,\n  useSeconds: Boolean,\n  selecting: Number,\n  value: Number,\n}, 'VTimePickerControls')\n\nexport const VTimePickerControls = genericComponent()({\n  name: 'VTimePickerControls',\n\n  props: makeVTimePickerControlsProps(),\n\n  emits: {\n    'update:period': (data: Period) => data,\n    'update:selecting': (data: 1 | 2 | 3) => data,\n  },\n\n  setup (props, { emit, slots }) {\n    const { t } = useLocale()\n\n    useRender(() => {\n      let hour = props.hour\n      if (props.ampm) {\n        hour = hour ? ((hour - 1) % 12 + 1) : 12\n      }\n      return (\n        <div class=\"v-time-picker-controls\">\n          <div\n            class={{\n              'v-time-picker-controls__time': true,\n              'v-time-picker-controls__time--with-seconds': props.useSeconds,\n            }}\n          >\n            <VBtn\n              active={ props.selecting === 1 }\n              color={ props.selecting === 1 ? props.color : undefined }\n              variant=\"tonal\"\n              class={{\n                'v-time-picker-controls__time__btn': true,\n                'v-time-picker-controls__time--with-ampm__btn': props.ampm,\n                'v-time-picker-controls__time--with-seconds__btn': props.useSeconds,\n              }}\n              text={ props.hour == null ? '--' : pad(`${hour}`) }\n              onClick={ () => emit('update:selecting', SelectingTimes.Hour) }\n            />\n\n            <span\n              class={[\n                'v-time-picker-controls__time__separator',\n                { 'v-time-picker-controls--with-seconds__time__separator': props.useSeconds },\n              ]}\n            >:</span>\n\n            <VBtn\n              active={ props.selecting === 2 }\n              color={ props.selecting === 2 ? props.color : undefined }\n              class={{\n                'v-time-picker-controls__time__btn': true,\n                'v-time-picker-controls__time__btn__active': props.selecting === 2,\n                'v-time-picker-controls__time--with-ampm__btn': props.ampm,\n                'v-time-picker-controls__time--with-seconds__btn': props.useSeconds,\n              }}\n              variant=\"tonal\"\n              text={ props.minute == null ? '--' : pad(props.minute) }\n              onClick={ () => emit('update:selecting', SelectingTimes.Minute) }\n            />\n\n            {\n              props.useSeconds && (\n                <span\n                  class={[\n                    'v-time-picker-controls__time__separator',\n                    { 'v-time-picker-controls--with-seconds__time__separator': props.useSeconds },\n                  ]}\n                  key=\"secondsDivider\"\n                >:</span>\n              )\n            }\n\n            {\n              props.useSeconds && (\n                <VBtn\n                  key=\"secondsVal\"\n                  variant=\"tonal\"\n                  onClick={ () => emit('update:selecting', SelectingTimes.Second) }\n                  class={{\n                    'v-time-picker-controls__time__btn': true,\n                    'v-time-picker-controls__time__btn__active': props.selecting === 3,\n                    'v-time-picker-controls__time--with-seconds__btn': props.useSeconds,\n                  }}\n                  text={ props.second == null ? '--' : pad(props.second) }\n                />\n              )\n            }\n\n            {\n              props.ampm && (\n                <div\n                  class={['v-time-picker-controls__ampm', {\n                    'v-time-picker-controls__ampm--readonly': props.ampmReadonly,\n                  }]}\n                >\n                  <VBtn\n                    active={ props.period === 'am' }\n                    color={ props.period === 'am' ? props.color : undefined }\n                    class={{\n                      'v-time-picker-controls__ampm__am': true,\n                      'v-time-picker-controls__ampm__btn': true,\n                      'v-time-picker-controls__ampm__btn__active': props.period === 'am',\n                    }}\n                    text={ t('$vuetify.timePicker.am') }\n                    variant=\"tonal\"\n                    onClick={ () => props.period !== 'am' ? emit('update:period', 'am') : null }\n                  />\n\n                  <VBtn\n                    active={ props.period === 'pm' }\n                    color={ props.period === 'pm' ? props.color : undefined }\n                    class={{\n                      'v-time-picker-controls__ampm__pm': true,\n                      'v-time-picker-controls__ampm__btn': true,\n                      'v-time-picker-controls__ampm__btn__active': props.period === 'pm',\n                    }}\n                    text={ t('$vuetify.timePicker.pm') }\n                    variant=\"tonal\"\n                    onClick={ () => props.period !== 'pm' ? emit('update:period', 'pm') : null }\n                  />\n                </div>\n              )\n            }\n          </div>\n        </div>\n      )\n    })\n\n    return {}\n  },\n\n})\n\nexport type VTimePickerControls = InstanceType<typeof VTimePickerControls>\n"],"mappings":"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"}