fix: set attributes for some specific components

FriedRiceNoodles · Feb 20, 2024 · 976fa87 · 976fa87
1 parent 11621cb
commit 976fa87
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 9 deletions.
diff --git a/packages/banana/src/carousel/index.ts b/packages/banana/src/carousel/index.ts
@@ -85,7 +85,7 @@ export default class BCarousel extends LitElement {
   }
 
   // Do not use this property directly, use internal _slidesPerView instead.
-  @property({ type: Number, reflect: true })
+  @property({ type: Number, reflect: true, attribute: 'slides-per-view' })
   slidesPerView = 1;
 
   private get _slidesPerView() {
@@ -96,13 +96,13 @@ export default class BCarousel extends LitElement {
   autoplay = false;
 
   // Unit: ms
-  @property({ type: Number })
+  @property({ type: Number, reflect: true, attribute: 'autoplay-delay' })
   autoplayDelay = 3000;
 
-  @property({ type: Boolean })
+  @property({ type: Boolean, reflect: true, attribute: 'pause-on-mouse-enter' })
   pauseOnMouseEnter = true;
 
-  @property({ type: Boolean, reflect: true })
+  @property({ type: Boolean, reflect: true, attribute: 'disable-drag' })
   disableDrag = false;
 
   @property({ type: Boolean, reflect: true })
@@ -115,7 +115,7 @@ export default class BCarousel extends LitElement {
   @property({ type: Boolean, reflect: true, attribute: 'disable-fill' })
   disableFill = false;
 
-  @property({ type: Boolean, reflect: true })
+  @property({ type: Boolean, reflect: true, attribute: 'auto-height' })
   autoHeight = false;
 
   @property({ type: Boolean, reflect: true })

diff --git a/packages/banana/src/dropdown/index.ts b/packages/banana/src/dropdown/index.ts
@@ -45,20 +45,20 @@ export default class BDropdown extends LitElement {
   margin = 4;
 
   // The time delay before dropdown content appears after mouse enter the trigger. Unit: ms.
-  @property({ type: Number, reflect: true })
+  @property({ type: Number, reflect: true, attribute: 'mouse-enter-delay' })
   mouseEnterDelay = 100;
 
   // The time delay before dropdown content disappears after mouse leave the dropdown content. Unit: ms.
-  @property({ type: Number, reflect: true })
+  @property({ type: Number, reflect: true, attribute: 'mouse-leave-delay' })
   mouseLeaveDelay = 100;
 
   @property({ reflect: true })
   placement: Placement = 'bottomLeft';
 
-  @property({ type: Boolean, reflect: true })
+  @property({ type: Boolean, reflect: true, attribute: 'auto-adjust-overflow' })
   autoAdjustOverflow = true;
 
-  @property({ reflect: true })
+  @property({ reflect: true, attribute: 'trigger-action' })
   triggerAction: 'hover' | 'click' = 'hover';
 
   @state()