From 97581a2c92fcd3e27f6d446a901aea9633b2daee Mon Sep 17 00:00:00 2001 From: Blaine Landowski Date: Tue, 24 Oct 2023 15:35:41 -0500 Subject: [PATCH] inital working --- packages/vuetify/dev/vuetify.js | 1 - .../src/labs/VTimePicker/VTimePicker.tsx | 56 +++++++++++------- .../src/labs/VTimePicker/VTimePickerClock.tsx | 59 ++++++++++--------- .../src/labs/VTimePicker/VTimePickerTitle.tsx | 20 ++++--- 4 files changed, 76 insertions(+), 60 deletions(-) diff --git a/packages/vuetify/dev/vuetify.js b/packages/vuetify/dev/vuetify.js index 2a0dca74cd7..afe085950ed 100644 --- a/packages/vuetify/dev/vuetify.js +++ b/packages/vuetify/dev/vuetify.js @@ -20,7 +20,6 @@ export default createVuetify({ }, directives, ssr: !!process.env.VITE_SSR, - date, defaults, icons, locale, diff --git a/packages/vuetify/src/labs/VTimePicker/VTimePicker.tsx b/packages/vuetify/src/labs/VTimePicker/VTimePicker.tsx index 72e56c1c96c..d079c1779ba 100644 --- a/packages/vuetify/src/labs/VTimePicker/VTimePicker.tsx +++ b/packages/vuetify/src/labs/VTimePicker/VTimePicker.tsx @@ -21,6 +21,12 @@ import pad from '../VDatePicker/util/pad' // Types // import { VNode, PropType } from 'vue' import { SelectingTimes } from './SelectingTimes' +interface options extends Vue { + $refs: { + clockRef: HTMLElement + titleRef: HTMLElement + } +} // Utilities import { computed, onMounted, ref, shallowRef, watch } from 'vue' @@ -53,7 +59,8 @@ export const makeVTimePickerProps = propsFactory({ readonly: Boolean, scrollable: Boolean, useSeconds: Boolean, - value: null as any as PropType, + // value: null as any as PropType, + modelValue: null as any as PropType, ampmInTitle: Boolean, ...makeVPickerProps({ title: ''}) }, 'VTimePicker') @@ -65,10 +72,11 @@ export const VTimePicker = genericComponent()({ emits: [ 'input', - 'click:hours', - 'click:minutes', - 'click:seconds', + 'click:hour', + 'click:minute', + 'click:second', 'update:period', + 'update:modelValue', 'change' ], @@ -91,23 +99,23 @@ export const VTimePicker = genericComponent()({ return selecting.value === SelectingTimes.Hour }, set (v: boolean) { - this.selecting = SelectingTimes.Hour + selecting.value = SelectingTimes.Hour }, }) const selectingMinute = computed({ get (): boolean { - return this.selecting === SelectingTimes.Minute + return selecting.value === SelectingTimes.Minute }, set (v: boolean) { - this.selecting = SelectingTimes.Minute + selecting.value = SelectingTimes.Minute }, }) const selectingSecond = computed({ get (): boolean { - return this.selecting === SelectingTimes.Second + return selecting.value === SelectingTimes.Second }, set (v: boolean) { - this.selecting = SelectingTimes.Second + selecting.value = SelectingTimes.Second }, }) const isAllowedHourCb = computed((): AllowFunction => { @@ -133,7 +141,7 @@ export const VTimePicker = genericComponent()({ const isAllowedMinuteCb = computed((): AllowFunction => { let cb: AllowFunction - const isHourAllowed = !isAllowedHourCb.value || inputHour.value === null || isAllowedHourCb.value(this.inputHour) + const isHourAllowed = !isAllowedHourCb.value || inputHour.value === null || isAllowedHourCb.value(inputHour.value) if (props.allowedMinutes instanceof Array) { cb = (val: number) => (props.allowedMinutes as number[]).includes(val) } else { @@ -206,12 +214,13 @@ export const VTimePicker = genericComponent()({ useSeconds: props.useSeconds, selecting: selecting.value, })) + const titleRef = ref(null) + const clockRef = ref(null) - watch(props.value, val => setInputData(val)) + watch(props.modelValue, val => setInputData(val)) onMounted(() => { - setInputData(props.value) - // this.$on('update:period', this.setPeriod) + setInputData(props.modelValue) }) const genValue = () => { @@ -223,7 +232,7 @@ export const VTimePicker = genericComponent()({ } const emitValue = () => { const value = genValue() - if (value !== null) emit('input', value) + if (value !== null) emit('update:modelValue', value) } const setPeriod = (period: Period) => { period.value = period @@ -245,7 +254,7 @@ export const VTimePicker = genericComponent()({ } else { const [, hour, minute, , second, period] = value.trim().toLowerCase().match(/^(\d+):(\d+)(:(\d+))?([ap]m)?$/) || new Array(6) - inputHour.value = period ? this.convert12to24(parseInt(hour, 10), period as Period) : parseInt(hour, 10) + inputHour.value = period ? convert12to24(parseInt(hour, 10), period as Period) : parseInt(hour, 10) inputMinute.value = parseInt(minute, 10) inputSecond.value = parseInt(second || 0, 10) } @@ -269,6 +278,7 @@ export const VTimePicker = genericComponent()({ emitValue() } const onChange = (value: number) => { + console.log(selecting.value, value) emit(`click:${selectingNames[selecting.value]}`, value) const emitChange = selecting.value === (props.useSeconds ? SelectingTimes.Second : SelectingTimes.Minute) @@ -315,7 +325,6 @@ export const VTimePicker = genericComponent()({ const [pickerProps] = VPicker.filterProps(props) return ( ( (selecting.value = value) } - onUpdate:period={ (period: string) => emit('update:period', period) } - ref="title" + onUpdate:period={ (period: string) => setPeriod(period) && emit('update:period', period) } + ref={ titleRef } > ), default: () => ( @@ -362,14 +373,15 @@ export const VTimePicker = genericComponent()({ scrollable={ props.scrollable } size={20} step={ selecting.value === SelectingTimes.Hour ? 1 : 5 } - value={ selecting.value === SelectingTimes.Hour + modelValue={ selecting.value === SelectingTimes.Hour ? inputHour.value : (selecting.value === SelectingTimes.Minute ? inputMinute.value : inputSecond.value) } onInput={ onInput } - OnChange={ onChange } - ref="clock" + onUpdate:modelValue={ onInput } + onChange={ onChange } + ref={ clockRef } > ) diff --git a/packages/vuetify/src/labs/VTimePicker/VTimePickerClock.tsx b/packages/vuetify/src/labs/VTimePicker/VTimePickerClock.tsx index ab2f904b6e7..07739680852 100644 --- a/packages/vuetify/src/labs/VTimePicker/VTimePickerClock.tsx +++ b/packages/vuetify/src/labs/VTimePicker/VTimePickerClock.tsx @@ -25,8 +25,8 @@ interface Point { interface options extends Vue { $refs: { - clock: HTMLElement - innerClock: HTMLElement + clockRef: HTMLElement + innerClockRef: HTMLElement } } @@ -38,7 +38,7 @@ export const makeVTimePickerClockProps = propsFactory({ format: { type: Function, default: (val: string | number) => val, - } as PropValidator<(val: string | number) => string | number>, + } as PropValue<(val: string | number) => string | number>, max: { type: Number, required: true, @@ -57,7 +57,7 @@ export const makeVTimePickerClockProps = propsFactory({ type: Number, default: 1, }, - value: Number, + modelValue: Number, ...makeDateProps(), }, 'VTimePickerClock') @@ -76,9 +76,9 @@ export const VTimePickerClock = genericComponent()({ ], setup (props, { emit, slots }) { - const clock = ref(null) - const innerClock = ref(null) - const inputValue = ref(props.value) + const clockRef = ref(null) + const innerClockRef = ref(null) + const inputValue = ref(props.modelValue) const isDragging = ref(false) const valueOnMouseDown = ref(null as number | null) const valueOnMouseUp = ref(null as number | null) @@ -86,11 +86,10 @@ export const VTimePickerClock = genericComponent()({ const count = computed(() => props.max - props.min + 1) const degreesPerUnit = computed(() => 360 / roundCount.value) const degrees = computed(() => degreesPerUnit.value * Math.PI / 180) - const displayedValue = computed(() => props.value == null ? props.min : props.value) + const displayedValue = computed(() => props.modelValue == null ? props.min : props.modelValue) const innerRadiusScale = computed(() => 0.62) const roundCount = computed(() => props.double ? (count.value / 2) : count.value) - const wheel = (e: WheelEvent) => { e.preventDefault() @@ -101,8 +100,8 @@ export const VTimePickerClock = genericComponent()({ value = (value - props.min + count.value) % count.value + props.min } while (!isAllowed(value) && value !== displayedValue.value) - if (value !== this.displayedValue) { - this.update(value) + if (value !== props.displayedValue) { + update(value) } } const isInner = (value: number) => { @@ -147,25 +146,27 @@ export const VTimePickerClock = genericComponent()({ } const onDragMove = (e: MouseEvent | TouchEvent) => { e.preventDefault() - if ((!isDragging.value && e.type !== 'click') || !clock.value) return - - const { width, top, left } = clock.value.getBoundingClientRect() - const { width: innerWidth } = innerClock.value.getBoundingClientRect() + if ((!isDragging.value && e.type !== 'click') || !clockRef.value) return + const { width, top, left } = clockRef.value.getBoundingClientRect() + const { width: innerWidth } = innerClockRef.value.getBoundingClientRect() 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) - this.rotate + 360) % 360 + 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) + console.log(center, coords, angle(center, coords), handAngle, insideClick, checksCount) let value for (let i = 0; i < checksCount; i++) { value = angleToValue(handAngle + i * degreesPerUnit.value, insideClick) + console.log(value, isAllowed(value)) if (isAllowed(value)) return setMouseDownValue(value) value = angleToValue(handAngle - i * degreesPerUnit.value, insideClick) if (isAllowed(value)) return setMouseDownValue(value) } + console.log(value) } const angleToValue = (angle: number, insideClick: boolean): number => { const value = ( @@ -211,27 +212,27 @@ export const VTimePickerClock = genericComponent()({ return children }) - watch(props.value, val => { + watch(props.modelValue, val => { inputValue.value = val }) useRender(() => { return ( -
onMouseDown(e) } + onMouseup={ (e: MouseEvent) => onMouseUp(e) } onMouseleave={ (e: MouseEvent) => (isDragging && onMouseUp(e)) } - onTouchstart={ onMouseDown } - onTouchend={ onMouseUp } - onMousemove={ onDragMove } - onTouchmove={ onDragMove } + onTouchstart={ (e: MouseEvent) => onMouseDown(e) } + onTouchend={ (e: MouseEvent) => onMouseUp(e) } + onMousemove={ (e: DragEvent) => onDragMove(e) } + onTouchmove={ (e: DragEvent) => onDragMove(e) } onWheel={ (e: WheelEvent) => (props.scrollable && wheel(e)) } - ref="clock" + ref={ clockRef } > -
+
{ genChildren.value.map(value => ( @@ -242,7 +243,7 @@ export const VTimePickerClock = genericComponent()({ 'v-time-picker-clock__item--disabled': props.disabled || !isAllowed(value) } ]} - style={ { ...getTransform(value), color: value === props.value && (props.color || 'accent')} } + style={ { ...getTransform(value), color: value === props.modelValue && (props.color || 'accent')} } >{ props.format(value) }
)) } diff --git a/packages/vuetify/src/labs/VTimePicker/VTimePickerTitle.tsx b/packages/vuetify/src/labs/VTimePicker/VTimePickerTitle.tsx index db98464073a..ce99655e633 100644 --- a/packages/vuetify/src/labs/VTimePicker/VTimePickerTitle.tsx +++ b/packages/vuetify/src/labs/VTimePicker/VTimePickerTitle.tsx @@ -41,7 +41,11 @@ export const VTimePickerTitle = genericComponent()({ props: makeVTimePickerTitleProps(), - setup (props, { slots }) { + emits: [ + 'update:selecting', + ], + + setup (props, { emit, slots }) { const { t } = useLocale() useRender(() => { @@ -52,14 +56,14 @@ export const VTimePickerTitle = genericComponent()({ return (
- { props.hour == null ? '--' : props.ampm ? String(hour) : pad(hour) } - : - { props.minute == null ? '--' : pad(props.minute) } + emit('update:selecting', SelectingTimes.Hour) }>{ props.hour == null ? '--' : props.ampm ? String(hour) : pad(hour) } + : + emit('update:selecting', SelectingTimes.Minute) }>{ props.minute == null ? '--' : pad(props.minute) } { props.useSeconds && ( ) } @@ -67,11 +71,11 @@ export const VTimePickerTitle = genericComponent()({ props.ampm && (
- { (!this.ampmReadonly || this.period === 'am') ?{ t('$vuetify.timePicker.am') } : '' } - { (!this.ampmReadonly || this.period === 'pm') ? { t('$vuetify.timePicker.pm') } : '' } + { (!props.ampmReadonly || props.period === 'am') ?{ t('$vuetify.timePicker.am') } : '' } + { (!props.ampmReadonly || props.period === 'pm') ? { t('$vuetify.timePicker.pm') } : '' }
) }