edit: remove submit button disabled state

This commit is contained in:
axolotle 2023-12-29 15:59:07 +01:00
parent 89a50ab18f
commit 01affca1da
4 changed files with 11 additions and 26 deletions

View file

@ -18,33 +18,20 @@ const attrs = computed(() => {
props.loading === true
? props.loadingIcon || 'loading'
: props.loading === false
? 'thumb-up'
: props.icon,
? 'thumb-up'
: props.icon,
iconClass: props.loading ? 'animate-spin' : '',
...baseAttrs,
}
})
const onClick = (e: MouseEvent) => {
if (props.loading !== null) {
if (props.loading) {
e.preventDefault()
}
}
</script>
<template>
<YButton
v-bind="attrs"
:aria-disabled="loading !== null"
:class="{ 'btn-disabled no-animation': loading !== null }"
type="submit"
@click="onClick"
/>
<YButton v-bind="attrs" type="submit" @click="onClick" />
</template>
<style scoped>
.btn-disabled {
pointer-events: unset;
cursor: not-allowed;
}
</style>

View file

@ -9,7 +9,7 @@ import type { Feedback } from '@/composables/form'
const { t } = useI18n()
const user = await useUser()
const loading: Ref<boolean | null> = ref(false)
const loading: Ref<boolean> = ref(false)
const feedback: Ref<Feedback> = ref(null)
const { handleSubmit, setFieldError, resetForm, meta } = useForm({
@ -29,9 +29,8 @@ const { handleSubmit, setFieldError, resetForm, meta } = useForm({
watch(
() => meta.value.dirty,
(value) => {
// remove loading and feedback on edition
// remove global feedback on edition
if (value) {
loading.value = null
feedback.value = null
}
},
@ -49,7 +48,7 @@ const onSubmit = handleSubmit(async (form) => {
if (error.value) {
// Reset form dirty state but keep previous values
resetForm({ values: form })
resetForm({ values: { ...form, mail: user.value.mail } })
const errData = error.value.data
let message
@ -67,7 +66,7 @@ const onSubmit = handleSubmit(async (form) => {
} else if (data.value) {
Object.assign(user.value, data)
resetForm({
values: data.value,
values: { ...data.value, mail: user.value.mail },
})
feedback.value = {
variant: 'success',

View file

@ -7,7 +7,7 @@ import type { Feedback } from '@/composables/form'
const { t } = useI18n()
const loading: Ref<boolean | null> = ref(false)
const loading: Ref<boolean> = ref(false)
const feedback: Ref<Feedback> = ref(null)
const { handleSubmit, setFieldError, resetForm, meta } = useForm({
@ -37,9 +37,8 @@ const { handleSubmit, setFieldError, resetForm, meta } = useForm({
watch(
() => meta.value.dirty,
(value) => {
// remove loading and feedback on edition
// remove global feedback on edition
if (value) {
loading.value = null
feedback.value = null
}
},

View file

@ -3,7 +3,7 @@ import type { Feedback } from '@/composables/form'
withDefaults(
defineProps<{
loading: boolean | null
loading: boolean
feedback?: Feedback
submitVariant?: 'success' | 'warning' | 'error'
}>(),