Adicionar suporte a v-model ao SegmentedControl#1093
Conversation
- Refactor SegmentedControl to <script setup> - Add v-model support using defineModel - Maintain backward compatibility with existing props and events - Update documentation with v-model examples - Add unit tests for v-model functionality - Update project version to 3.159.0 Co-authored-by: lucasn4s <17988272+lucasn4s@users.noreply.github.com>
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
Greptile SummaryEste PR adiciona suporte a
Confidence Score: 3/5Eu corrigiria estes comportamentos antes de fazer o merge.
|
| Filename | Overview |
|---|---|
| src/components/SegmentedControl.vue | Adiciona v-model, mas a inicialização do modelo pode alterar o estado do pai e não cobre listas carregadas depois do mount. |
| docs/components/navegação/segmented-control.md | Documenta o novo uso com v-model, mas o exemplo referencia um estado não declarado. |
| docs/.docgen/components-metadata.json | Atualiza os metadados do componente, mas não lista o evento update:modelValue. |
Reviews (1): Last reviewed commit: "feat: add v-model support to SegmentedCo..." | Re-trigger Greptile
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
| onMounted(() => { | ||
| if (!model.value && props.segments.length > 0) { | ||
| model.value = props.segments[0]; | ||
| } |
There was a problem hiding this comment.
model.value durante o mount quando o valor inicial é vazio. Em um uso controlado como v-model="selected" com selected = '', o componente emite update:modelValue antes de qualquer clique e troca o estado do pai para o primeiro segmento. Isso pode disparar filtros, watchers ou chamadas de API como se o usuário tivesse feito uma seleção.
Rule Used: What: Sempre responda em português (PT-BR) durante... (source)
| }, | ||
| } | ||
| onMounted(() => { | ||
| if (!model.value && props.segments.length > 0) { |
There was a problem hiding this comment.
!model.value trata valores falsy como ausência. Como o componente compara o segmento diretamente com o modelo, um segmento válido como string vazia, 0 ou false pode ser selecionado pelo pai, mas este branch sobrescreve esse valor com o primeiro item no mount. Isso impede o componente de respeitar valores controlados que sejam falsy.
Rule Used: What: Sempre responda em português (PT-BR) durante... (source)
| onMounted(() => { | ||
| if (!model.value && props.segments.length > 0) { | ||
| model.value = props.segments[0]; | ||
| } | ||
| }); |
There was a problem hiding this comment.
onMounted. Se o componente montar com segments=[] e a lista chegar depois de uma busca ou renderização condicional, props.segments.length será zero no mount e nenhum watch selecionará o primeiro item quando a lista for preenchida. Nesse fluxo, o componente fica sem segmento ativo mesmo sem valor inicial.
Rule Used: What: Sempre responda em português (PT-BR) durante... (source)
| "events": [ | ||
| { | ||
| "name": "click", | ||
| "type": { | ||
| "names": [ | ||
| "undefined" | ||
| ] | ||
| }, | ||
| "properties": [ | ||
| { | ||
| "type": { | ||
| "names": [ | ||
| "undefined" | ||
| ] | ||
| }, | ||
| "name": "<anonymous1>" | ||
| } | ||
| ] | ||
| "description": "Evento emitido quando o componente é clicado." | ||
| } |
There was a problem hiding this comment.
CdsSegmentedControl continua listando apenas o evento click. Como o PR adiciona v-model, a tabela de eventos renderizada por APITable não mostra update:modelValue, embora a página de docs já tenha incluído esse evento no preview. O novo contrato fica documentado de forma inconsistente.
Rule Used: What: Sempre responda em português (PT-BR) durante... (source)
| <CdsSegmentedControl | ||
| v-model="activeSegment" | ||
| :segments="['Segmento 1', 'Segmento 2', 'Segmento 3']" | ||
| /> |
There was a problem hiding this comment.
v-model="activeSegment", mas a página não declara activeSegment no <script setup>. Quem copiar o exemplo com o script da página ficará com um binding inexistente, e se o trecho for renderizado em Vue ele acessará uma variável não definida. Declare o ref usado no exemplo ou ajuste o snippet para usar um estado existente.
Rule Used: What: Sempre responda em português (PT-BR) durante... (source)
1 participant
Adicionado suporte a two-way binding com
v-modelao componenteSegmentedControl.Principais mudanças:
<script setup>.v-modelutilizandodefineModel.v-model.v-model.3.159.0.Fixes #1092
PR created automatically by Jules for task 3936232099814014702 started by @lucasn4s