carbon-design-system / carbon-components-vue

Vue implementation of the Carbon Design System
http://vue.carbondesignsystem.com
Apache License 2.0
597 stars 176 forks source link

feat: accordion v-model #1568

Closed davidnixon closed 4 months ago

davidnixon commented 5 months ago

What did you do?

Added a v-model for accordion items open state

Why did you do it?

I have a design that calls for an "auto close" of sections such that when one section is opened, other sections close. There is not a way to implement this in current component.

How have you tested it?

With local story and in test app that implements the "auto close"

Were docs updated if needed?

davidnixon commented 5 months ago

FWIW, auto close code is included in the "docs" area of the storybook

// example auto close
// <cv-accordion @change="onAutoClose">
const open = ref({
  accItem1: false,
  accItem2: false,
  accItem3: false,
  accItem4: false,
});
function autoClose(ev) {
  if (ev.change.open) {
    for (let state in open.value) {
      if (state !== ev.change.id) open.value[state] = false;
    }
  }
}
davidnixon commented 5 months ago

@OlkaB could you review this one?