feat(accordion)!: add two way binding

BREAKING CHANGE: Renamed is-actvie to value and balCollapse to balChange
baloise · Jan 8, 2022 · eeda1c0 · eeda1c0
1 parent 631d889
commit eeda1c0
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 17 deletions.
diff --git a/packages/components/src/components/bal-accordion/bal-accordion.tsx b/packages/components/src/components/bal-accordion/bal-accordion.tsx
@@ -1,10 +1,13 @@
-import { Component, Host, h, Prop, Method, Event, EventEmitter } from '@stencil/core'
+import { Component, Host, h, Prop, Method, Event, EventEmitter, Watch } from '@stencil/core'
+import { debounceEvent } from '../../helpers/helpers'
 import { ColorTypesBasic, BalButtonColor } from '../../types/color.types'
 
 @Component({
   tag: 'bal-accordion',
 })
 export class Accordion {
+  private didInit = false
+
   /**
    * Type defines the theme of the accordion toggle
    */
@@ -13,7 +16,27 @@ export class Accordion {
   /**
    * Controls if the accordion is collapsed or not
    */
-  @Prop({ mutable: true, reflect: true }) isActive = false
+  @Prop({ mutable: true, reflect: true }) value = false
+
+  /**
+   * Update the native input element when the value changes
+   */
+  @Watch('value')
+  protected async valueChanged(newValue: boolean, oldValue: boolean) {
+    if (this.didInit && newValue !== oldValue) {
+      this.balChange.emit(newValue)
+    }
+  }
+
+  /**
+   * Set the amount of time, in milliseconds, to wait to trigger the `balChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.
+   */
+  @Prop() debounce = 0
+
+  @Watch('debounce')
+  protected debounceChanged() {
+    this.balChange = debounceEvent(this.balChange, this.debounce)
+  }
 
   /**
    * Label of the open trigger button
@@ -43,45 +66,56 @@ export class Accordion {
   /**
    * Emmited when the accordion has changed
    */
-  @Event() balCollapse!: EventEmitter<boolean>
+  @Event() balChange!: EventEmitter<boolean>
+
+  connectedCallback() {
+    this.debounceChanged()
+  }
+
+  componentDidLoad() {
+    this.didInit = true
+    if (this.value !== undefined) {
+      this.valueChanged(this.value, false)
+    }
+  }
 
   /**
    * Open the accordion
    */
   @Method()
-  async open() {
-    this.isActive = true
-    this.balCollapse.emit(this.isActive)
+  async present() {
+    this.value = true
+    // this.balChange.emit(this.value)
   }
 
   /**
    * Close the accordion
    */
   @Method()
-  async close() {
-    this.isActive = false
-    this.balCollapse.emit(this.isActive)
+  async dismiss() {
+    this.value = false
+    // this.balChange.emit(this.value)
   }
 
   /**
    * Triggers the accordion
    */
   @Method()
   async toggle() {
-    this.isActive = !this.isActive
-    this.balCollapse.emit(this.isActive)
+    this.value = !this.value
+    // this.balChange.emit(this.value)
   }
 
   get buttonType(): BalButtonColor {
     return `${this.color}-light` as BalButtonColor
   }
 
   get label() {
-    return this.isActive ? this.closeLabel : this.openLabel
+    return this.value ? this.closeLabel : this.openLabel
   }
 
   get icon() {
-    return this.isActive ? this.closeIcon : this.openIcon
+    return this.value ? this.closeIcon : this.openIcon
   }
 
   render() {
@@ -94,13 +128,13 @@ export class Accordion {
           icon={this.icon}
           onClick={() => this.toggle()}
           top-rounded={!this.card}
-          bottomRounded={!this.isActive}
+          bottomRounded={!this.value}
         >
           {this.label}
         </bal-button>
         <div
           class={['accordion-content', `is-${this.color}`].join(' ')}
-          style={{ display: this.isActive ? 'block' : 'none' }}
+          style={{ display: this.value ? 'block' : 'none' }}
         >
           <slot></slot>
         </div>

diff --git a/packages/components/src/components/bal-accordion/stories/bal-accordion.stories.ts b/packages/components/src/components/bal-accordion/stories/bal-accordion.stories.ts
@@ -15,7 +15,7 @@ export default component.story
 export const Basic = args => ({
   components: { ...component.components },
   setup: () => ({ args }),
-  template: `<bal-accordion v-bind="args" class="box">
+  template: `<bal-accordion v-bind="args" v-model="args.value" class="box">
   <p class="p-4">
    {{ args.content }}
   </p>

diff --git a/packages/components/src/components/bal-accordion/test/bal-accordion.e2e.ts b/packages/components/src/components/bal-accordion/test/bal-accordion.e2e.ts
@@ -10,7 +10,7 @@ describe('bal-accordion', () => {
     await page.setContent(`
     <bal-accordion open-label="OPEN" close-label="CLOSE">TEST CONTENT</bal-accordion>
     `)
-    balCollapseEvent = await page.spyOnEvent('balCollapse')
+    balCollapseEvent = await page.spyOnEvent('balChange')
     balAccordionTriggerElement = await page.find('bal-accordion bal-button')
   })