arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-20 06:51:46 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(Form): improve form control and input validation trigger (#487)

Browse Source 
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Romain Hamel
2023-08-12 16:48:53 +02:00
committed by Benjamin Canac
parent 60bb74675c
commit 6d7973f6e1
23 changed files with 529 additions and 381 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/runtime/components/forms/Input.vue
View File

@@ -1,7 +1,6 @@
<template>
<div :class="ui.wrapper">
<input
:id="name"
ref="input"
:name="name"
:value="modelValue"
@@ -36,7 +35,7 @@ import { ref, computed, onMounted, defineComponent } from 'vue'
import type { PropType } from 'vue'
import { defu } from 'defu'
import UIcon from '../elements/Icon.vue'
import { useFormEvents } from '../../composables/useFormEvents'
import { useFormGroup } from '../../composables/useFormGroup'
import { classNames } from '../../utils'
import { useAppConfig } from '#imports'
// TODO: Remove
@@ -147,7 +146,9 @@ export default defineComponent({
const ui = computed<Partial<typeof appConfig.ui.input>>(() => defu({}, props.ui, appConfig.ui.input))
const { emitFormBlur } = useFormEvents()
const { emitFormBlur, emitFormInput, formGroup } = useFormGroup()
const color = computed(() => formGroup?.error?.value ? 'red' : props.color)
const size = computed(() => formGroup?.size?.value ?? props.size)
const input = ref<HTMLInputElement | null>(null)
@@ -159,6 +160,7 @@ export default defineComponent({
const onInput = (event: InputEvent) => {
emit('update:modelValue', (event.target as HTMLInputElement).value)
emitFormInput()
}
const onBlur = (event: FocusEvent) => {
@@ -173,17 +175,17 @@ export default defineComponent({
})
const inputClass = computed(() => {
const variant = ui.value.color?.[props.color as string]?.[props.variant as string] || ui.value.variant[props.variant]
const variant = ui.value.color?.[color.value as string]?.[props.variant as string] || ui.value.variant[props.variant]
return classNames(
ui.value.base,
ui.value.rounded,
ui.value.placeholder,
ui.value.size[props.size],
props.padded ? ui.value.padding[props.size] : 'p-0',
variant?.replaceAll('{color}', props.color),
(isLeading.value || slots.leading) && ui.value.leading.padding[props.size],
(isTrailing.value || slots.trailing) && ui.value.trailing.padding[props.size]
ui.value.size[size.value],
props.padded ? ui.value.padding[size.value] : 'p-0',
variant?.replaceAll('{color}', color.value),
(isLeading.value || slots.leading) && ui.value.leading.padding[size.value],
(isTrailing.value || slots.trailing) && ui.value.trailing.padding[size.value]
)
})
@@ -215,15 +217,15 @@ export default defineComponent({
return classNames(
ui.value.icon.leading.wrapper,
ui.value.icon.leading.pointer,
ui.value.icon.leading.padding[props.size]
ui.value.icon.leading.padding[size.value]
)
})
const leadingIconClass = computed(() => {
return classNames(
ui.value.icon.base,
appConfig.ui.colors.includes(props.color) && ui.value.icon.color.replaceAll('{color}', props.color),
ui.value.icon.size[props.size],
appConfig.ui.colors.includes(color.value) && ui.value.icon.color.replaceAll('{color}', color.value),
ui.value.icon.size[size.value],
props.loading && 'animate-spin'
)
})
@@ -232,15 +234,15 @@ export default defineComponent({
return classNames(
ui.value.icon.trailing.wrapper,
ui.value.icon.trailing.pointer,
ui.value.icon.trailing.padding[props.size]
ui.value.icon.trailing.padding[size.value]
)
})
const trailingIconClass = computed(() => {
return classNames(
ui.value.icon.base,
appConfig.ui.colors.includes(props.color) && ui.value.icon.color.replaceAll('{color}', props.color),
ui.value.icon.size[props.size],
appConfig.ui.colors.includes(color.value) && ui.value.icon.color.replaceAll('{color}', color.value),
ui.value.icon.size[size.value],
props.loading && !isLeading.value && 'animate-spin'
)
})