feat(datepicker): fix some bugs

Trendyol · Dec 16, 2024 · a9cbd83 · a9cbd83
1 parent 13b3ab0
commit a9cbd83
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 18 deletions.
diff --git a/src/components/calendar/bl-calendar.test.ts b/src/components/calendar/bl-calendar.test.ts
@@ -1,7 +1,6 @@
 import { expect, fixture, html } from "@open-wc/testing";
 import "./bl-calendar";
 import { BlButton, BlCalendar } from "../../baklava";
-import { blCalendarChangedEvent } from "./bl-calendar";
 import { CALENDAR_TYPES, CALENDAR_VIEWS, FIRST_MONTH_INDEX, LAST_MONTH_INDEX } from "./bl-calendar.constant";
 import sinon from "sinon";
 
@@ -93,7 +92,7 @@ describe("bl-calendar", () => {
       selectedDates = customEvent.detail;
     };
 
-    singleTypeCalendar.addEventListener(blCalendarChangedEvent, onBlCalendarChanged);
+    singleTypeCalendar.addEventListener("bl-calendar-change", onBlCalendarChanged);
     const daysButtons = Array.from(singleTypeCalendar.shadowRoot?.querySelectorAll(".day-wrapper bl-button") || []) as BlButton[];
 
     daysButtons[0].click();

diff --git a/src/components/calendar/bl-calendar.ts b/src/components/calendar/bl-calendar.ts
@@ -14,8 +14,6 @@ import {
 import style from "./bl-calendar.css";
 import { Calendar, CalendarDay, CalendarView } from "./bl-calendar.types";
 
-export const blCalendarChangedEvent = "bl-calendar-change";
-
 /**
  * @tag bl-calendar
  * @summary Baklava Calendar component
@@ -37,7 +35,7 @@ export default class BlCalendar extends DatepickerCalendarMixin {
   /**
    * Fires when date selection changes
    */
-  @event(blCalendarChangedEvent) _onBlCalendarChange: EventDispatcher<Date[]>;
+  @event("bl-calendar-change") _onBlCalendarChange: EventDispatcher<Date[]>;
 
   static get styles(): CSSResultGroup {
     return [style];

diff --git a/src/components/datepicker/bl-datepicker.test.ts b/src/components/datepicker/bl-datepicker.test.ts
@@ -1,7 +1,6 @@
 import { aTimeout, expect, fixture, html } from "@open-wc/testing";
-import BlDatepicker, { blDatepickerChangedEvent } from "./bl-datepicker";
+import BlDatepicker from "./bl-datepicker";
 import { BlButton, BlDatePicker } from "../../baklava";
-import { blCalendarChangedEvent } from "../calendar/bl-calendar";
 import { CALENDAR_TYPES } from "../calendar/bl-calendar.constant";
 import sinon from "sinon";
 
@@ -69,7 +68,7 @@ describe("BlDatepicker", () => {
     element._inputEl?.click();
     await element.updateComplete;
 
-    element._calendarEl?.dispatchEvent(new CustomEvent(blCalendarChangedEvent, { detail: [new Date()] }));
+    element._calendarEl?.dispatchEvent(new CustomEvent("bl-calendar-change", { detail: [new Date()] }));
     await element.updateComplete;
     await aTimeout(400);
     expect(element._selectedDates.length).to.equal(1);
@@ -79,15 +78,15 @@ describe("BlDatepicker", () => {
   it("should trigger datepicker change event on date selection", async () => {
     const testDate = new Date(2023, 1, 1);
 
-    element.addEventListener(blDatepickerChangedEvent, (event) => {
+    element.addEventListener("bl-datepicker-change", (event) => {
       const customEvent = event as CustomEvent;
 
       expect(customEvent).to.exist;
       expect(customEvent.detail).to.deep.equal([testDate]);
 
     });
 
-    element._calendarEl.dispatchEvent(new CustomEvent(blCalendarChangedEvent, { detail: [testDate] }));
+    element._calendarEl.dispatchEvent(new CustomEvent("bl-calendar-change", { detail: [testDate] }));
 
     await element.updateComplete;
   });
@@ -130,7 +129,7 @@ describe("BlDatepicker", () => {
     element.type = CALENDAR_TYPES.MULTIPLE;
     await element.updateComplete;
 
-    element._calendarEl?.dispatchEvent(new CustomEvent(blCalendarChangedEvent, { detail: dates }));
+    element._calendarEl?.dispatchEvent(new CustomEvent("bl-calendar-change", { detail: dates }));
     await element.updateComplete;
 
     expect(element._selectedDates.length).to.equal(2);
@@ -152,7 +151,7 @@ describe("BlDatepicker", () => {
     element.type = CALENDAR_TYPES.RANGE;
     await element.updateComplete;
 
-    element._calendarEl?.dispatchEvent(new CustomEvent(blCalendarChangedEvent, { detail: [startDate, endDate] }));
+    element._calendarEl?.dispatchEvent(new CustomEvent("bl-calendar-change", { detail: [startDate, endDate] }));
     await element.updateComplete;
 
     expect(element._selectedDates.length).to.equal(2);

diff --git a/src/components/datepicker/bl-datepicker.ts b/src/components/datepicker/bl-datepicker.ts
@@ -10,16 +10,13 @@ import BlInput, { InputSize } from "../input/bl-input";
 import "../tooltip/bl-tooltip";
 import style from "./bl-datepicker.css";
 
-export const blDatepickerTag = "bl-datepicker";
-export const blDatepickerChangedEvent = "bl-datepicker-change";
-
 /**
  * @tag bl-datepicker
  * @summary Baklava DatePicker component
  *
  * @cssproperty [--bl-datepicker-input-width] - Sets the width of datepicker input
  **/
-@customElement(blDatepickerTag)
+@customElement("bl-datepicker")
 export default class BlDatepicker extends DatepickerCalendarMixin {
   /**
    * Defines the datepicker input placeholder
@@ -85,7 +82,7 @@ export default class BlDatepicker extends DatepickerCalendarMixin {
   /**
    * Fires when date selection is changed
    */
-  @event(blDatepickerChangedEvent) private _onBlDatepickerChanged: EventDispatcher<Date[]>;
+  @event("bl-datepicker-change") private _onBlDatepickerChange: EventDispatcher<Date[]>;
 
   static get styles(): CSSResultGroup {
     return [style];
@@ -139,7 +136,7 @@ export default class BlDatepicker extends DatepickerCalendarMixin {
       }
     }
 
-    this._onBlDatepickerChanged(this._selectedDates);
+    this._onBlDatepickerChange(this._selectedDates);
   }
 
   formatDate(date: Date): string {