Skip to content

Commit e32796a

Browse files
KaelWDKaelWD
authored
feat(VTimePicker): remove ampmInTitle prop (#21595)
closes #19637 closes #19957
1 parent 663b9a8 commit e32796a

File tree

2 files changed

+54
-68
lines changed

2 files changed

+54
-68
lines changed

‎packages/vuetify/src/labs/VTimePicker/VTimePicker.tsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,6 @@ export const makeVTimePickerProps = propsFactory({
3434
allowedHours: [Function, Array] as PropType<AllowFunction | number[]>,
3535
allowedMinutes: [Function, Array] as PropType<AllowFunction | number[]>,
3636
allowedSeconds: [Function, Array] as PropType<AllowFunction | number[]>,
37-
ampmInTitle: Boolean,
3837
disabled: Boolean,
3938
format: {
4039
type: String as PropType<'ampm' | '24hr'>,
@@ -313,8 +312,7 @@ export const VTimePicker = genericComponent<VTimePickerSlots>()({
313312
header: () => (
314313
<VTimePickerControls
315314
{ ...timePickerControlsProps }
316-
ampm={ isAmPm.value || props.ampmInTitle }
317-
ampmReadonly={ isAmPm.value && !props.ampmInTitle }
315+
ampm={ isAmPm.value }
318316
hour={ inputHour.value as number }
319317
minute={ inputMinute.value as number }
320318
period={ period.value }

‎packages/vuetify/src/labs/VTimePicker/VTimePickerControls.tsx

Lines changed: 53 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,6 @@ type Period = 'am' | 'pm'
1818

1919
export const makeVTimePickerControlsProps = propsFactory({
2020
ampm: Boolean,
21-
ampmInTitle: Boolean,
22-
ampmReadonly: Boolean,
2321
color: String,
2422
disabled: Boolean,
2523
hour: Number,
@@ -94,74 +92,64 @@ export const VTimePickerControls = genericComponent()({
9492
onClick={ () => emit('update:viewMode', 'minute') }
9593
/>
9694

97-
{
98-
props.useSeconds && (
99-
<span
100-
class={[
101-
'v-time-picker-controls__time__separator',
102-
{ 'v-time-picker-controls--with-seconds__time__separator': props.useSeconds },
103-
]}
104-
key="secondsDivider"
105-
>:</span>
106-
)
107-
}
108-
109-
{
110-
props.useSeconds && (
95+
{ props.useSeconds && (
96+
<span
97+
class={[
98+
'v-time-picker-controls__time__separator',
99+
{ 'v-time-picker-controls--with-seconds__time__separator': props.useSeconds },
100+
]}
101+
key="secondsDivider"
102+
>:</span>
103+
)}
104+
105+
{ props.useSeconds && (
106+
<VBtn
107+
key="secondsVal"
108+
active={ props.viewMode === 'second' }
109+
color={ props.viewMode === 'second' ? props.color : undefined }
110+
variant="tonal"
111+
onClick={ () => emit('update:viewMode', 'second') }
112+
class={{
113+
'v-time-picker-controls__time__btn': true,
114+
'v-time-picker-controls__time__btn__active': props.viewMode === 'second',
115+
'v-time-picker-controls__time--with-seconds__btn': props.useSeconds,
116+
}}
117+
disabled={ props.disabled }
118+
text={ props.second == null ? '--' : pad(props.second) }
119+
/>
120+
)}
121+
122+
{ props.ampm && (
123+
<div class="v-time-picker-controls__ampm">
111124
<VBtn
112-
key="secondsVal"
113-
active={ props.viewMode === 'second' }
114-
color={ props.viewMode === 'second' ? props.color : undefined }
115-
variant="tonal"
116-
onClick={ () => emit('update:viewMode', 'second') }
125+
active={ props.period === 'am' }
126+
color={ props.period === 'am' ? props.color : undefined }
117127
class={{
118-
'v-time-picker-controls__time__btn': true,
119-
'v-time-picker-controls__time__btn__active': props.viewMode === 'second',
120-
'v-time-picker-controls__time--with-seconds__btn': props.useSeconds,
128+
'v-time-picker-controls__ampm__am': true,
129+
'v-time-picker-controls__ampm__btn': true,
130+
'v-time-picker-controls__ampm__btn__active': props.period === 'am',
121131
}}
122132
disabled={ props.disabled }
123-
text={ props.second == null ? '--' : pad(props.second) }
133+
text={ t('$vuetify.timePicker.am') }
134+
variant={ props.disabled && props.period === 'am' ? 'elevated' : 'tonal' }
135+
onClick={ () => props.period !== 'am' ? emit('update:period', 'am') : null }
124136
/>
125-
)
126-
}
127-
128-
{
129-
props.ampm && props.ampmInTitle && (
130-
<div
131-
class={['v-time-picker-controls__ampm', {
132-
'v-time-picker-controls__ampm--readonly': props.ampmReadonly,
133-
}]}
134-
>
135-
<VBtn
136-
active={ props.period === 'am' }
137-
color={ props.period === 'am' ? props.color : undefined }
138-
class={{
139-
'v-time-picker-controls__ampm__am': true,
140-
'v-time-picker-controls__ampm__btn': true,
141-
'v-time-picker-controls__ampm__btn__active': props.period === 'am',
142-
}}
143-
disabled={ props.disabled }
144-
text={ t('$vuetify.timePicker.am') }
145-
variant={ props.disabled && props.period === 'am' ? 'elevated' : 'tonal' }
146-
onClick={ () => props.period !== 'am' ? emit('update:period', 'am') : null }
147-
/>
148-
149-
<VBtn
150-
active={ props.period === 'pm' }
151-
color={ props.period === 'pm' ? props.color : undefined }
152-
class={{
153-
'v-time-picker-controls__ampm__pm': true,
154-
'v-time-picker-controls__ampm__btn': true,
155-
'v-time-picker-controls__ampm__btn__active': props.period === 'pm',
156-
}}
157-
disabled={ props.disabled }
158-
text={ t('$vuetify.timePicker.pm') }
159-
variant={ props.disabled && props.period === 'pm' ? 'elevated' : 'tonal' }
160-
onClick={ () => props.period !== 'pm' ? emit('update:period', 'pm') : null }
161-
/>
162-
</div>
163-
)
164-
}
137+
138+
<VBtn
139+
active={ props.period === 'pm' }
140+
color={ props.period === 'pm' ? props.color : undefined }
141+
class={{
142+
'v-time-picker-controls__ampm__pm': true,
143+
'v-time-picker-controls__ampm__btn': true,
144+
'v-time-picker-controls__ampm__btn__active': props.period === 'pm',
145+
}}
146+
disabled={ props.disabled }
147+
text={ t('$vuetify.timePicker.pm') }
148+
variant={ props.disabled && props.period === 'pm' ? 'elevated' : 'tonal' }
149+
onClick={ () => props.period !== 'pm' ? emit('update:period', 'pm') : null }
150+
/>
151+
</div>
152+
)}
165153
</div>
166154
</div>
167155
)

0 commit comments

Comments
 (0)