arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-02-01 12:47:57 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(Input/Textarea): allow null value in model (#3415)

Browse Source
This commit is contained in:
Iván Máximiliano, Lo Giudice
2025-03-07 14:17:30 -03:00
committed by GitHub
parent ed7710a890
commit cfe9b2ecf3
4 changed files with 18 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/runtime/components/Input.vue
View File

@@ -82,7 +82,7 @@ const props = withDefaults(defineProps<InputProps>(), {
const emits = defineEmits<InputEmits>() const emits = defineEmits<InputEmits>()
const slots = defineSlots<InputSlots>() const slots = defineSlots<InputSlots>()
const [modelValue, modelModifiers] = defineModel<string | number>() const [modelValue, modelModifiers] = defineModel<string | number | null>()
const { emitFormBlur, emitFormInput, emitFormChange, size: formGroupSize, color, id, name, highlight, disabled, emitFormFocus, ariaAttrs } = useFormField<InputProps>(props, { deferInputValidation: true }) const { emitFormBlur, emitFormInput, emitFormChange, size: formGroupSize, color, id, name, highlight, disabled, emitFormFocus, ariaAttrs } = useFormField<InputProps>(props, { deferInputValidation: true })
const { orientation, size: buttonGroupSize } = useButtonGroup<InputProps>(props) const { orientation, size: buttonGroupSize } = useButtonGroup<InputProps>(props)
@@ -111,15 +111,19 @@ function autoFocus() {
} }
// Custom function to handle the v-model properties // Custom function to handle the v-model properties
function updateInput(value: string) { function updateInput(value: string | null) {
if (modelModifiers.trim) { if (modelModifiers.trim) {
value = value.trim() value = value?.trim() ?? null
} }
if (modelModifiers.number || props.type === 'number') { if (modelModifiers.number || props.type === 'number') {
value = looseToNumber(value) value = looseToNumber(value)
} }
if (modelModifiers.nullify) {
value ||= null
}
modelValue.value = value modelValue.value = value
emitFormInput() emitFormInput()
} }

10
src/runtime/components/Textarea.vue
View File

@@ -74,7 +74,7 @@ const props = withDefaults(defineProps<TextareaProps>(), {
defineSlots<TextareaSlots>() defineSlots<TextareaSlots>()
const emits = defineEmits<TextareaEmits>() const emits = defineEmits<TextareaEmits>()
const [modelValue, modelModifiers] = defineModel<string | number>() const [modelValue, modelModifiers] = defineModel<string | number | null>()
const { emitFormFocus, emitFormBlur, emitFormInput, emitFormChange, size, color, id, name, highlight, disabled, ariaAttrs } = useFormField<TextareaProps>(props, { deferInputValidation: true }) const { emitFormFocus, emitFormBlur, emitFormInput, emitFormChange, size, color, id, name, highlight, disabled, ariaAttrs } = useFormField<TextareaProps>(props, { deferInputValidation: true })
@@ -94,15 +94,19 @@ function autoFocus() {
} }
// Custom function to handle the v-model properties // Custom function to handle the v-model properties
function updateInput(value: string) { function updateInput(value: string | null) {
if (modelModifiers.trim) { if (modelModifiers.trim) {
value = value.trim() value = value?.trim() ?? null
} }
if (modelModifiers.number) { if (modelModifiers.number) {
value = looseToNumber(value) value = looseToNumber(value)
} }
if (modelModifiers.nullify) {
value ||= null
}
modelValue.value = value modelValue.value = value
emitFormInput() emitFormInput()
} }

3
test/components/Input.spec.ts
View File

@@ -52,7 +52,8 @@ describe('Input', () => {
it.each([ it.each([
['with .trim modifier', { props: { modelModifiers: { trim: true } } }, { input: 'input ', expected: 'input' }], ['with .trim modifier', { props: { modelModifiers: { trim: true } } }, { input: 'input ', expected: 'input' }],
['with .number modifier', { props: { modelModifiers: { number: true } } }, { input: '42', expected: 42 }], ['with .number modifier', { props: { modelModifiers: { number: true } } }, { input: '42', expected: 42 }],
['with .lazy modifier', { props: { modelModifiers: { lazy: true } } }, { input: 'input', expected: 'input' }] ['with .lazy modifier', { props: { modelModifiers: { lazy: true } } }, { input: 'input', expected: 'input' }],
['with .nullify modifier', { props: { modelModifiers: { nullify: true } } }, { input: '', expected: null }]
])('%s works', async (_nameOrHtml: string, options: { props?: any, slots?: any }, spec: { input: any, expected: any }) => { ])('%s works', async (_nameOrHtml: string, options: { props?: any, slots?: any }, spec: { input: any, expected: any }) => {
const wrapper = mount(Input, { const wrapper = mount(Input, {
...options ...options

3
test/components/Textarea.spec.ts
View File

@@ -35,7 +35,8 @@ describe('Textarea', () => {
it.each([ it.each([
['with .trim modifier', { props: { modelModifiers: { trim: true } } }, { input: 'input ', expected: 'input' }], ['with .trim modifier', { props: { modelModifiers: { trim: true } } }, { input: 'input ', expected: 'input' }],
['with .number modifier', { props: { modelModifiers: { number: true } } }, { input: '42', expected: 42 }], ['with .number modifier', { props: { modelModifiers: { number: true } } }, { input: '42', expected: 42 }],
['with .lazy modifier', { props: { modelModifiers: { lazy: true } } }, { input: 'input', expected: 'input' }] ['with .lazy modifier', { props: { modelModifiers: { lazy: true } } }, { input: 'input', expected: 'input' }],
['with .nullify modifier', { props: { modelModifiers: { nullify: true } } }, { input: '', expected: null }]
])('%s works', async (_nameOrHtml: string, options: { props?: any, slots?: any }, spec: { input: any, expected: any }) => { ])('%s works', async (_nameOrHtml: string, options: { props?: any, slots?: any }, spec: { input: any, expected: any }) => {
const wrapper = mount(Textarea, { const wrapper = mount(Textarea, {
...options ...options