Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(VDateInput): create new component #19680

Merged
merged 10 commits into from
Apr 26, 2024
Merged

feat(VDateInput): create new component #19680

Changes from 1 commit
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
b34ca39
feat(VDateInput): create new component
johnleider Apr 24, 2024
4310799
fix(VDateInput): maintain focus while navigating date picker
johnleider Apr 24, 2024
92b8ae5
fix(VDateInput): omit active prop from date picker
johnleider Apr 24, 2024
a7ad91b
fix(VDateInput): typings and missing slot
johnleider Apr 24, 2024
34bc232
docs(api-generator): add missing descriptions
johnleider Apr 24, 2024
8c4fcf8
docs(VDateInput): create docs page
johnleider Apr 24, 2024
fe485f3
feat(VDateInput): improve text-field model display
johnleider Apr 25, 2024
6803d03
feat(VDateInput): add support for hiding actions
johnleider Apr 26, 2024
c1784c3
fix(VDateInput): only close menu if using hideActions after model select
johnleider Apr 26, 2024
308e672
docs(VDateInput): complete page content
johnleider Apr 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
feat(VDateInput): improve text-field model display
  • Loading branch information
@johnleider
johnleider committed Apr 25, 2024
commit fe485f3bc9f7685debe949e2fceae35b3278efe0
28 changes: 23 additions & 5 deletions packages/vuetify/src/labs/VDateInput/VDateInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,12 @@ import { makeVConfirmEditProps, VConfirmEdit } from '@/labs/VConfirmEdit/VConfir
// Composables
import { useDate } from '@/composables/date'
import { makeFocusProps, useFocus } from '@/composables/focus'
import { useLocale } from '@/composables/locale'
import { useProxiedModel } from '@/composables/proxiedModel'

// Utilities
import { computed, shallowRef } from 'vue'
import { genericComponent, omit, propsFactory, useRender } from '@/util'
import { genericComponent, omit, propsFactory, useRender, wrapInArray } from '@/util'

// Types
export interface VDateInputSlots {
Expand All @@ -22,8 +23,8 @@ export const makeVDateInputProps = propsFactory({
...makeFocusProps(),
...makeVConfirmEditProps(),
...makeVTextFieldProps({
label: 'mm/dd/yyyy',
prependIcon: 'mdi-calendar',
placeholder: 'mm/dd/yyyy',
prependIcon: '$calendar',
}),
...omit(makeVDatePickerProps({
weeksInMonth: 'dynamic' as const,
Expand All @@ -41,12 +42,30 @@ export const VDateInput = genericComponent()({
},

setup (props, { slots }) {
const { t } = useLocale()
const adapter = useDate()
const { isFocused, focus, blur } = useFocus(props)
const model = useProxiedModel(props, 'modelValue')
const model = useProxiedModel(props, 'modelValue', props.multiple ? [] : null)
const menu = shallowRef(false)

const display = computed(() => {
const value = wrapInArray(model.value)

if (!value.length) return null

if (props.multiple === true) {
return t('$vuetify.datePicker.itemsSelected', value.length)
}

if (props.multiple === 'range') {
const start = value[0]
const end = value[value.length - 1]

return adapter.isValid(start) && adapter.isValid(end)
? `${adapter.format(start, 'keyboardDate')} - ${adapter.format(end, 'keyboardDate')}`
: ''
}

return adapter.isValid(model.value) ? adapter.format(model.value, 'keyboardDate') : ''
})

Expand Down Expand Up @@ -85,7 +104,6 @@ export const VDateInput = genericComponent()({
{ ...textFieldProps }
modelValue={ display.value }
onKeydown={ onKeydown }
dirty={ menu.value }
focused={ menu.value || isFocused.value }
onFocus={ focus }
onBlur={ blur }
Expand Down
Loading