chore: uniformize defineModel placement and emits

src/runtime/components/Checkbox.vue

@@ -39,14 +39,14 @@ import { useId, useAppConfig, useFormField } from '#imports'
 const props = defineProps<CheckboxProps>()
 defineSlots<CheckboxSlots>()
 
+const modelValue = defineModel<boolean | undefined>({ default: undefined })
+
 const rootProps = useForwardProps(reactivePick(props, 'as', 'required', 'value'))
 
 const appConfig = useAppConfig()
 const { inputId: _inputId, emitFormChange, size, color, name, disabled } = useFormField<CheckboxProps>(props)
 const inputId = _inputId.value ?? useId()
 
-const modelValue = defineModel<boolean | undefined>({ default: undefined })
-
 const indeterminate = computed(() => (modelValue.value === undefined && props.indeterminate))
 
 const checked = computed({

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<boolean>('show', { default: true })
 const props = withDefaults(defineProps<ChipProps>(), { as: 'div' })
 defineSlots<ChipSlots>()
 
+const show = defineModel<boolean>('show', { default: true })
+
 const { size } = useAvatarGroup(props)
 
 const ui = computed(() => tv({ extend: chip, slots: props.ui })({

src/runtime/components/Form.vue

@@ -43,7 +43,7 @@ const props = withDefaults(defineProps<FormProps<T>>(), {
   },
   validateOnInputDelay: 300
 })
-const emit = defineEmits<FormEmits<T>>()
+const emits = defineEmits<FormEmits<T>>()
 defineSlots<FormSlots>()
 
 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)
   }
 }
 

src/runtime/components/Input.vue

@@ -50,12 +50,11 @@ const props = withDefaults(defineProps<InputProps>(), {
   type: 'text',
   autofocusDelay: 100
 })
+const emits = defineEmits<InputEmits>()
+defineSlots<InputSlots>()
 
 const [modelValue, modelModifiers] = defineModel<string | number>()
 
-const emit = defineEmits<InputEmits>()
-defineSlots<InputSlots>()
-
 const { emitFormBlur, emitFormInput, size, color, inputId, name, disabled } = useFormField<InputProps>(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(() => {

src/runtime/components/RadioGroup.vue

@@ -47,6 +47,13 @@ const props = withDefaults(defineProps<RadioGroupProps<T>>(), { orientation: 've
 const emits = defineEmits<RadioGroupEmits>()
 defineSlots<RadioGroupSlots<T>>()
 
+const modelValue = defineModel<T>({
+  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<RadioGroupProps<T>>(props)
@@ -80,13 +87,6 @@ const normalizedOptions = computed(() => {
   return props.options.map(normalizeOption)
 })
 
-const modelValue = defineModel<T>({
-  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.

src/runtime/components/Switch.vue

@@ -40,11 +40,11 @@ import { useId, useAppConfig, useFormField } from '#imports'
 const props = defineProps<SwitchProps>()
 defineSlots<SwitchSlots>()
 
+const modelValue = defineModel<boolean | undefined>({ default: undefined })
+
 const appConfig = useAppConfig()
 const rootProps = useForwardProps(reactivePick(props, 'as', 'required', 'value'))
 
-const modelValue = defineModel<boolean | undefined>({ default: undefined })
-
 const { inputId: _inputId, emitFormChange, size, color, name, disabled } = useFormField<SwitchProps>(props)
 const inputId = _inputId.value ?? useId()
 

src/runtime/components/Textarea.vue

@@ -49,9 +49,8 @@ const props = withDefaults(defineProps<TextareaProps>(), {
   maxrows: 0,
   autofocusDelay: 100
 })
-
-const emit = defineEmits<TextareaEmits>()
 defineSlots<TextareaSlots>()
+const emits = defineEmits<TextareaEmits>()
 
 const [modelValue, modelModifiers] = defineModel<string | number>()
 
@@ -108,7 +107,7 @@ function onChange(event: Event) {
 
 function onBlur(event: FocusEvent) {
   emitFormBlur()
-  emit('blur', event)
+  emits('blur', event)
 }
 
 onMounted(() => {