From ce28e662d6242b44cb26427bd2bd202f4fe9d8ae Mon Sep 17 00:00:00 2001 From: Benjamin Canac Date: Sat, 27 Apr 2024 22:16:41 +0200 Subject: [PATCH] chore: uniformize `defineModel` placement and `emits` --- src/runtime/components/Checkbox.vue | 4 ++-- src/runtime/components/Chip.vue | 3 ++- src/runtime/components/Form.vue | 6 +++--- src/runtime/components/Input.vue | 7 +++---- src/runtime/components/RadioGroup.vue | 14 +++++++------- src/runtime/components/Switch.vue | 4 ++-- src/runtime/components/Textarea.vue | 5 ++--- 7 files changed, 21 insertions(+), 22 deletions(-) diff --git a/src/runtime/components/Checkbox.vue b/src/runtime/components/Checkbox.vue index 8ed251ff..2ae0b3df 100644 --- a/src/runtime/components/Checkbox.vue +++ b/src/runtime/components/Checkbox.vue @@ -39,14 +39,14 @@ import { useId, useAppConfig, useFormField } from '#imports' const props = defineProps() defineSlots() +const modelValue = defineModel({ default: undefined }) + const rootProps = useForwardProps(reactivePick(props, 'as', 'required', 'value')) const appConfig = useAppConfig() const { inputId: _inputId, emitFormChange, size, color, name, disabled } = useFormField(props) const inputId = _inputId.value ?? useId() -const modelValue = defineModel({ default: undefined }) - const indeterminate = computed(() => (modelValue.value === undefined && props.indeterminate)) const checked = computed({ diff --git a/src/runtime/components/Chip.vue b/src/runtime/components/Chip.vue index 3e13998e..9705886b 100644 --- a/src/runtime/components/Chip.vue +++ b/src/runtime/components/Chip.vue @@ -32,10 +32,11 @@ import { computed, provide } from 'vue' import { Primitive } from 'radix-vue' import { useAvatarGroup } from '#imports' -const show = defineModel('show', { default: true }) const props = withDefaults(defineProps(), { as: 'div' }) defineSlots() +const show = defineModel('show', { default: true }) + const { size } = useAvatarGroup(props) const ui = computed(() => tv({ extend: chip, slots: props.ui })({ diff --git a/src/runtime/components/Form.vue b/src/runtime/components/Form.vue index 73b50d2e..84bf8f7e 100644 --- a/src/runtime/components/Form.vue +++ b/src/runtime/components/Form.vue @@ -43,7 +43,7 @@ const props = withDefaults(defineProps>(), { }, validateOnInputDelay: 300 }) -const emit = defineEmits>() +const emits = defineEmits>() defineSlots() const formId = props.id ?? useId() @@ -165,7 +165,7 @@ async function onSubmit(payload: Event) { ...event, data: props.state } - emit('submit', submitEvent) + emits('submit', submitEvent) } catch (error) { if (!(error instanceof FormValidationException)) { throw error @@ -177,7 +177,7 @@ async function onSubmit(payload: Event) { childrens: error.childrens } - emit('error', errorEvent) + emits('error', errorEvent) } } diff --git a/src/runtime/components/Input.vue b/src/runtime/components/Input.vue index 26633bee..ed0c0fac 100644 --- a/src/runtime/components/Input.vue +++ b/src/runtime/components/Input.vue @@ -50,12 +50,11 @@ const props = withDefaults(defineProps(), { type: 'text', autofocusDelay: 100 }) +const emits = defineEmits() +defineSlots() const [modelValue, modelModifiers] = defineModel() -const emit = defineEmits() -defineSlots() - const { emitFormBlur, emitFormInput, size, color, inputId, name, disabled } = useFormField(props) const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props) // const { size: sizeButtonGroup, rounded } = useInjectButtonGroup({ ui, props }) @@ -115,7 +114,7 @@ function onChange(event: Event) { function onBlur(event: FocusEvent) { emitFormBlur() - emit('blur', event) + emits('blur', event) } onMounted(() => { diff --git a/src/runtime/components/RadioGroup.vue b/src/runtime/components/RadioGroup.vue index 7099f3d8..ca42a7e7 100644 --- a/src/runtime/components/RadioGroup.vue +++ b/src/runtime/components/RadioGroup.vue @@ -47,6 +47,13 @@ const props = withDefaults(defineProps>(), { orientation: 've const emits = defineEmits() defineSlots>() +const modelValue = defineModel({ + set(value) { + emits('change', value) + return value + } +}) + const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'defaultValue', 'orientation', 'loop', 'required'), emits) const { emitFormChange, color, name, size, inputId: _inputId, disabled } = useFormField>(props) @@ -80,13 +87,6 @@ const normalizedOptions = computed(() => { return props.options.map(normalizeOption) }) -const modelValue = defineModel({ - set(value) { - emits('change', value) - return value - } -}) - // FIXME: I think there's a race condition between this and the v-model event. // This must be triggered after the value updates, otherwise the form validates // the previous value. diff --git a/src/runtime/components/Switch.vue b/src/runtime/components/Switch.vue index 7d4a0f2d..024e505a 100644 --- a/src/runtime/components/Switch.vue +++ b/src/runtime/components/Switch.vue @@ -40,11 +40,11 @@ import { useId, useAppConfig, useFormField } from '#imports' const props = defineProps() defineSlots() +const modelValue = defineModel({ default: undefined }) + const appConfig = useAppConfig() const rootProps = useForwardProps(reactivePick(props, 'as', 'required', 'value')) -const modelValue = defineModel({ default: undefined }) - const { inputId: _inputId, emitFormChange, size, color, name, disabled } = useFormField(props) const inputId = _inputId.value ?? useId() diff --git a/src/runtime/components/Textarea.vue b/src/runtime/components/Textarea.vue index 82deb1d6..a1761561 100644 --- a/src/runtime/components/Textarea.vue +++ b/src/runtime/components/Textarea.vue @@ -49,9 +49,8 @@ const props = withDefaults(defineProps(), { maxrows: 0, autofocusDelay: 100 }) - -const emit = defineEmits() defineSlots() +const emits = defineEmits() const [modelValue, modelModifiers] = defineModel() @@ -108,7 +107,7 @@ function onChange(event: Event) { function onBlur(event: FocusEvent) { emitFormBlur() - emit('blur', event) + emits('blur', event) } onMounted(() => {