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

Jump to bottom

fix(VNumberInput): use VTextField as the base component #19714

Merged
merged 2 commits into from
May 6, 2024
Merged

fix(VNumberInput): use VTextField as the base component #19714

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2ebc62b
fix(VNumberInput): use VTextField as the base component
yuwu9145 Apr 29, 2024
6750d51
chore: disable tab navigation on controls
yuwu9145 May 3, 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
184 changes: 72 additions & 112 deletions packages/vuetify/src/labs/VNumberInput/VNumberInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,27 +5,24 @@ import './VNumberInput.sass'
import { VBtn } from '../../components/VBtn'
import { VDefaultsProvider } from '../../components/VDefaultsProvider'
import { VDivider } from '../../components/VDivider'
import { filterFieldProps, makeVFieldProps, VField } from '@/components/VField/VField'
import { makeVInputProps, VInput } from '@/components/VInput/VInput'
import { makeVTextFieldProps, VTextField } from '@/components/VTextField/VTextField'

// Composables
import { makeFocusProps, useFocus } from '@/composables/focus'
import { useProxiedModel } from '@/composables/proxiedModel'

// Utilities
import { computed, ref, watchEffect } from 'vue'
import { clamp, filterInputAttrs, genericComponent, getDecimals, only, propsFactory, useRender } from '@/util'
import { computed, watchEffect } from 'vue'
import { clamp, genericComponent, getDecimals, omit, propsFactory, useRender } from '@/util'

// Types
import type { PropType } from 'vue'
import type { VFieldSlots } from '@/components/VField/VField'
import type { VInputSlots } from '@/components/VInput/VInput'
import type { VTextFieldSlots } from '@/components/VTextField/VTextField'

type ControlSlot = {
click: () => void
}

type VNumberInputSlots = Omit<VInputSlots & VFieldSlots, 'default'> & {
type VNumberInputSlots = Omit<VTextFieldSlots, 'default'> & {
increment: ControlSlot
decrement: ControlSlot
}
Expand All @@ -52,31 +49,7 @@ const makeVNumberInputProps = propsFactory({
default: 1,
},

...only(makeVInputProps(), [
'density',
'disabled',
'focused',
'hideDetails',
'hint',
'label',
'persistentHint',
'readonly',
]),
...only(makeVFieldProps(), [
'baseColor',
'bgColor',
'class',
'color',
'disabled',
'error',
'loading',
'reverse',
'rounded',
'style',
'theme',
'variant',
]),
...makeFocusProps(),
...omit(makeVTextFieldProps(), ['appendInnerIcon', 'prependInnerIcon']),
}, 'VNumberInput')

export const VNumberInput = genericComponent<VNumberInputSlots>()({
Expand All @@ -86,11 +59,6 @@ export const VNumberInput = genericComponent<VNumberInputSlots>()({

props: {
...makeVNumberInputProps(),

modelValue: {
type: Number,
default: undefined,
},
},

emits: {
Expand All @@ -99,8 +67,6 @@ export const VNumberInput = genericComponent<VNumberInputSlots>()({

setup (props, { attrs, emit, slots }) {
const model = useProxiedModel(props, 'modelValue')
const { isFocused, focus, blur } = useFocus(props)
const inputRef = ref<HTMLInputElement>()

const stepDecimals = computed(() => getDecimals(props.step))
const modelDecimals = computed(() => model.value != null ? getDecimals(model.value) : 0)
Expand All @@ -120,10 +86,6 @@ export const VNumberInput = genericComponent<VNumberInputSlots>()({
}
})

function onFocus () {
if (!isFocused.value) focus()
}

const controlVariant = computed(() => {
return props.hideInput ? 'stacked' : props.controlVariant
})
Expand Down Expand Up @@ -156,7 +118,7 @@ export const VNumberInput = genericComponent<VNumberInputSlots>()({

function onKeydown (e: KeyboardEvent) {
if (
['Enter', 'ArrowLeft', 'ArrowRight', 'Backspace'].includes(e.key) ||
['Enter', 'ArrowLeft', 'ArrowRight', 'Backspace', 'Tab'].includes(e.key) ||
e.ctrlKey
) return

Expand All @@ -177,15 +139,12 @@ export const VNumberInput = genericComponent<VNumberInputSlots>()({
}
}

function onInput (e: Event) {
const el = e.target as HTMLInputElement
model.value = el.value ? +(el.value) : undefined
function onModelUpdate (v: string) {
model.value = v ? +(v) : undefined
}

useRender(() => {
const fieldProps = filterFieldProps(props)
const [rootAttrs, inputAttrs] = filterInputAttrs(attrs)
const { modelValue: _, ...inputProps } = VInput.filterProps(props)
const { modelValue: _, ...textFieldProps } = VTextField.filterProps(props)

function controlNode () {
const defaultHeight = controlVariant.value === 'stacked' ? 'auto' : '100%'
Expand All @@ -201,6 +160,7 @@ export const VNumberInput = genericComponent<VNumberInputSlots>()({
name="decrement-btn"
icon="$expand"
size="small"
tabindex="-1"
onClick={ onClickDown }
/>
) : (
Expand Down Expand Up @@ -236,6 +196,7 @@ export const VNumberInput = genericComponent<VNumberInputSlots>()({
icon="$collapse"
onClick={ onClickUp }
size="small"
tabindex="-1"
/>
) : (
<VDefaultsProvider
Expand All @@ -262,8 +223,53 @@ export const VNumberInput = genericComponent<VNumberInputSlots>()({
return !props.hideInput && !props.inset ? <VDivider vertical /> : undefined
}

const appendInnerControl =
controlVariant.value === 'split'
? (
<div class="v-number-input__control">
<VDivider vertical />

<VBtn
flat
height="100%"
icon="$plus"
tile
tabindex="-1"
onClick={ onClickUp }
/>
</div>
) : (!props.reverse
? <>{ dividerNode() }{ controlNode() }</>
: undefined)

const hasAppendInner = slots['append-inner'] || appendInnerControl

const prependInnerControl =
controlVariant.value === 'split'
? (
<div class="v-number-input__control">
<VBtn
flat
height="100%"
icon="$minus"
tile
tabindex="-1"
onClick={ onClickDown }
/>

<VDivider vertical />
</div>
) : (props.reverse
? <>{ controlNode() }{ dividerNode() }</>
: undefined)

const hasPrependInner = slots['prepend-inner'] || prependInnerControl

return (
<VInput
<VTextField
modelValue={ model.value }
onUpdate:modelValue={ onModelUpdate }
onKeydown={ onKeydown }
class={[
'v-number-input',
{
Expand All @@ -276,71 +282,25 @@ export const VNumberInput = genericComponent<VNumberInputSlots>()({
},
props.class,
]}
{ ...rootAttrs }
{ ...inputProps }
focused={ isFocused.value }
{ ...textFieldProps }
style={ props.style }
>
{{
...slots,
default: () => (
<VField
{ ...fieldProps }
active
focused={ isFocused.value }
>
{{
...slots,
default: ({
props: { class: fieldClass, ...slotProps },
}) => (
<input
ref={ inputRef }
type="text"
value={ model.value }
onInput={ onInput }
onKeydown={ onKeydown }
class={ fieldClass }
onFocus={ onFocus }
onBlur={ blur }
{ ...inputAttrs }
/>
),
'append-inner': controlVariant.value === 'split' ? () => (
<div class="v-number-input__control">
<VDivider vertical />

<VBtn
flat
height="100%"
icon="$plus"
tile
onClick={ onClickUp }
/>
</div>
) : (!props.reverse
? () => <>{ dividerNode() }{ controlNode() }</>
: undefined),
'prepend-inner': controlVariant.value === 'split' ? () => (
<div class="v-number-input__control">
<VBtn
flat
height="100%"
icon="$minus"
tile
onClick={ onClickDown }
/>

<VDivider vertical />
</div>
) : (props.reverse
? () => <>{ controlNode() }{ dividerNode() }</>
: undefined),
}}
</VField>
),
'append-inner': hasAppendInner ? (...args) => (
<>
{ slots['append-inner']?.(...args) }
{ appendInnerControl }
</>
) : undefined,
'prepend-inner': hasPrependInner ? (...args) => (
<>
{ prependInnerControl }
{ slots['prepend-inner']?.(...args) }
</>
) : undefined,
}}
</VInput>
</VTextField>
)
})
},
Expand Down
Loading