From a9cbd83e6d4b74cb88279be700442771fb921e76 Mon Sep 17 00:00:00 2001 From: "dilan.dogan2" Date: Mon, 16 Dec 2024 21:12:12 +0300 Subject: [PATCH] feat(datepicker): fix some bugs --- src/components/calendar/bl-calendar.test.ts | 3 +-- src/components/calendar/bl-calendar.ts | 4 +--- src/components/datepicker/bl-datepicker.test.ts | 13 ++++++------- src/components/datepicker/bl-datepicker.ts | 9 +++------ 4 files changed, 11 insertions(+), 18 deletions(-) diff --git a/src/components/calendar/bl-calendar.test.ts b/src/components/calendar/bl-calendar.test.ts index 01d8951b..b5b91266 100644 --- 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 index 330887e4..fe41b27e 100644 --- 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; + @event("bl-calendar-change") _onBlCalendarChange: EventDispatcher; static get styles(): CSSResultGroup { return [style]; diff --git a/src/components/datepicker/bl-datepicker.test.ts b/src/components/datepicker/bl-datepicker.test.ts index e0a713b6..d5e120d9 100644 --- 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,7 +78,7 @@ 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; @@ -87,7 +86,7 @@ describe("BlDatepicker", () => { }); - 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 index 8a006265..cff6392c 100644 --- 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; + @event("bl-datepicker-change") private _onBlDatepickerChange: EventDispatcher; 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 {