[Question]: Why is there a default prop for every controlled component?

[Saeid-Za]

Describe the question

There is this pattern of accepting default<model-name> in every component that accepts a model.
For example in this simplified version of Toggle.vue:

<script setup lang="ts">
import { computed } from 'vue'
import { useVModel } from '@vueuse/core'
import { Primitive } from '@/Primitive'

const props = withDefaults(defineProps<ToggleProps>(), {
  pressed: undefined,
  disabled: false,
  as: 'button',
})

const emits = defineEmits<ToggleEmits>()

const pressed = useVModel(props, 'pressed', emits, {
  defaultValue: props.defaultValue,
  passive: (props.pressed === undefined) as false,
})

function togglePressed() {
  pressed.value = !pressed.value
}
</script>

<template>
  <Primitive
    :type="as === 'button' ? 'button' : undefined"
    :as-child="props.asChild"
    :as="as"
    :aria-pressed="pressed"
    :data-state="dataState"
    :data-disabled="disabled ? '' : undefined"
    :disabled="disabled"
    @click="togglePressed"
  >
    <slot />
  </Primitive>
</template>

I guess this was added to be fully compatible with radix-ui api.
But Can't there be such implementation without adding extra surface area (default value to be exact) for user?

Since defineModel is stable, we can rewrite our logic and remove any default property, as they are duplicate of the model itself.

<script setup lang="ts">
import { Primitive } from '@/Primitive'

const props = withDefaults(defineProps<ToggleProps>(), {
  disabled: false,
  as: 'button',
})

defineEmits<ToggleEmits>()

const pressed = defineModel<boolean>('pressed', { default: false })

useForwardExpose()

function togglePressed() {
  pressed.value = !pressed.value
}
</script>

<template>
  <Primitive
    :type="as === 'button' ? 'button' : undefined"
    :as-child="props.asChild"
    :as="as"
    :aria-pressed="pressed"
    :data-state="dataState"
    :data-disabled="disabled ? '' : undefined"
    :disabled="disabled"
    @click="togglePressed"
  >
    <slot />
  </Primitive>
</template>

this is indeed a breaking change but it would remove the extra default value for any controlled radix-vue component and simplify logic for multi-layered components where modelValue is passed from one layer to another (via props passing or provide/inject)

[zernonia]

Thanks for the question @Saeid-Za !

1. Because in certain case we want a uncontrolled version of the component. Let's say I want to have default AccordionItem to be opened, thus we set defaultValue: 'accordion-2'. We can't use modelValue: 'accordion-2' because it would cause the Accordion internal state not to be updated. We can't also use v-model="accordion-2" (static value) as well.

2. We don't use defineModel as we wanna support 3.3 version. Also, using useVModel allow us to forward props and emits easily. We dont need to export another defineModel's types 1-by-1.

[Saeid-Za]

Thank you for the detailed response @zernonia !
Regarding the issues mentioned:

1. We can't use modelValue: 'accordion-2' because it would cause the Accordion internal state not to be updated.

This is interesting, I did not know such a limitation existed. I tried to implement a prototype replacing useModelValue with defineModel, had some success, but this limitation was the last barrier I faced.
To be more specefic, we can use modelValue with static value, but when an event listener is added by parent (useForwardPropsEmits in our case) the model stops being updated when child emits. There is no documentation regarding this limitation. I've opened an issue here.

2. We don't use defineModel as we wanna support 3.3 version.

This is not an issue of end-user. We're talking about adding vue 3.3+ to radix-vue codebase and since defineModel is a macro, any usage in radix-vue would be transformed to defineProps syntax after build & publish, which is supported by +3.X .

3. We don't need to export another defineModel's types 1-by-1.

I did not encounter such issue in my prototype. We never change the type of props or emits and because of that, we don't need to add any extra defineModel related typings.

[zernonia]

Thanks @Saeid-Za !

2. You are totally right. I forgot the fact that after compilation the Vue macro will be compiled away 👍🏻
3. What's your approach to this ya? Ideally we want to allow user to forward the props, and emits (super crucial part for shadcn-vue)

[Saeid-Za]

I'll share my (well, failed 😅) attempt in a repo.

[Saeid-Za]

Update

The issue opened in vue repo, was closed and was explained that this is the expected behavior.
Although this is a weird behavior but still expected, not yet documented. I'll try to propose this change but even if the proposal would be accepted, this would take a lot of time.

I marked your answer. Thanks again.