fix: resolve issues in MR

src/pin-input-cell/events.ts

@@ -1,3 +1,4 @@
+import { BaseEvent } from '../utils';
 import {
   PIN_INPUT_CELL_ARROW_KEY_PRESSED_TYPE,
   PIN_INPUT_CELL_CLEARED_ALL_TYPE,
@@ -7,116 +8,46 @@ import {
 } from './constants';
 import { ValueChangedEventParams } from './types';
 
-export class PinInputCellFilled extends Event {
-  public message: string;
-  public details: ValueChangedEventParams;
-
-  constructor(
-    message: string,
-    details: ValueChangedEventParams,
-    eventInitDict: EventInit = {},
-  ) {
-    const _eventInitDict = {
-      bubbles: true,
-      composed: false,
-      ...eventInitDict,
-    };
-    const type = PIN_INPUT_CELL_FILLED_TYPE;
-    super(type, _eventInitDict);
-
-    this.details = details;
-    this.message = message;
+export class CellFilled extends BaseEvent<ValueChangedEventParams> {
+  static type = PIN_INPUT_CELL_FILLED_TYPE;
+  constructor(details: ValueChangedEventParams){
+    super(CellFilled.type, {details})
   }
 }
 
-export class PinInputCellCleared extends Event {
-  public message: string;
-  public details: ValueChangedEventParams;
-
+export class CellCleared extends BaseEvent<ValueChangedEventParams> {
+  static type = PIN_INPUT_CELL_CLEARED_TYPE;
   constructor(
-    message: string,
     details: ValueChangedEventParams,
-    eventInitDict: EventInit = {},
   ) {
-    const _eventInitDict = {
-      bubbles: true,
-      composed: false,
-      ...eventInitDict,
-    };
-
-    const type = PIN_INPUT_CELL_CLEARED_TYPE;
-    super(type, _eventInitDict);
-
-    this.details = details;
-    this.message = message;
+    super(CellCleared.type, {details});
   }
 }
 
-export class PinInputCellClearedAll extends Event {
-  public message: string;
-  public details: ValueChangedEventParams;
-
+export class CellClearedAll extends BaseEvent<ValueChangedEventParams> {
+  static type = PIN_INPUT_CELL_CLEARED_ALL_TYPE;
   constructor(
-    message: string,
     details: ValueChangedEventParams,
-    eventInitDict: EventInit = {},
   ) {
-    const _eventInitDict = {
-      bubbles: true,
-      composed: false,
-      ...eventInitDict,
-    };
-
-    const type = PIN_INPUT_CELL_CLEARED_ALL_TYPE;
-    super(type, _eventInitDict);
 
-    this.details = details;
-    this.message = message;
+    super(CellClearedAll.type, {details});
   }
 }
 
-export class PinInputCellArrowKeyPressed<T = 'left' | 'right'> extends Event {
-  public message: string;
-  public details: ValueChangedEventParams<T>;
-
+export class CellArrowKeyPressed<T = 'left' | 'right'> extends BaseEvent<ValueChangedEventParams<T>> {
+  static type = PIN_INPUT_CELL_ARROW_KEY_PRESSED_TYPE;
   constructor(
-    message: string,
     details: ValueChangedEventParams<T>,
-    eventInitDict: EventInit = {},
   ) {
-    const _eventInitDict = {
-      bubbles: true,
-      composed: false,
-      ...eventInitDict,
-    };
-
-    const type = PIN_INPUT_CELL_ARROW_KEY_PRESSED_TYPE;
-    super(type, _eventInitDict);
-
-    this.details = details;
-    this.message = message;
+    super(CellArrowKeyPressed.type, {details});
   }
 }
 
-export class PinInputCellOverflowValue extends Event {
-  public message: string;
-  public details: ValueChangedEventParams;
-
+export class CellOverflowValue extends BaseEvent<ValueChangedEventParams> {
+  static type = PIN_INPUT_CELL_OVERFLOW_VALUE_TYPE;
   constructor(
-    message: string,
     details: ValueChangedEventParams,
-    eventInitDict: EventInit = {},
   ) {
-    const _eventInitDict = {
-      bubbles: true,
-      composed: false,
-      ...eventInitDict,
-    };
-
-    const type = PIN_INPUT_CELL_OVERFLOW_VALUE_TYPE;
-    super(type, _eventInitDict);
-
-    this.details = details;
-    this.message = message;
+    super(CellOverflowValue.type, {details});
   }
 }

src/pin-input-cell/pin-input-cell.ts

@@ -9,11 +9,11 @@ import {
   persianToEnglish,
 } from './util';
 import {
-  PinInputCellArrowKeyPressed,
-  PinInputCellCleared,
-  PinInputCellClearedAll,
-  PinInputCellFilled,
-  PinInputCellOverflowValue,
+  CellArrowKeyPressed,
+  CellCleared,
+  CellClearedAll,
+  CellFilled,
+  CellOverflowValue,
 } from './events';
 
 export class PinInputCell extends LitElement {
@@ -56,7 +56,7 @@ export class PinInputCell extends LitElement {
 
   private async emitValueChanged() {
     await this.updateComplete;
-    const event = new PinInputCellFilled('PinInputCell filled', {
+    const event = new CellFilled({
       cell: this,
       index: this.index,
       value: this.value,
@@ -67,7 +67,7 @@ export class PinInputCell extends LitElement {
 
   private async emitValueCleared() {
     await this.updateComplete;
-    const event = new PinInputCellCleared('PinInputCell cleared', {
+    const event = new CellCleared({
       cell: this,
       index: this.index,
       value: this.value,
@@ -78,7 +78,7 @@ export class PinInputCell extends LitElement {
 
   private async emitDeletionWithMetaKeys() {
     await this.updateComplete;
-    const event = new PinInputCellClearedAll('PinInputCell cleared all', {
+    const event = new CellClearedAll({
       cell: this,
       index: this.index,
       value: this.value,
@@ -90,8 +90,7 @@ export class PinInputCell extends LitElement {
   private async emitArrowKeyPressed(key: 'ArrowLeft' | 'ArrowRight') {
     await this.updateComplete;
 
-    const event = new PinInputCellArrowKeyPressed<'left' | 'right'>(
-      'PinInputCell arrow key pressed',
+    const event = new CellArrowKeyPressed(
       {
         cell: this,
         index: this.index,
@@ -104,9 +103,7 @@ export class PinInputCell extends LitElement {
 
   private async emitOverflowedValue(value: string) {
     await this.updateComplete;
-    const event = new PinInputCellOverflowValue(
-      'PinInputCell Overflowed value',
-      {
+    const event = new CellOverflowValue({
         cell: this,
         index: this.index,
         value: value,

src/pin-input/constants.ts

@@ -1 +1 @@
-export const PIN_INPUT_FILLED_TYPE = 'input-filled';
+export const PIN_INPUT_FILLED_TYPE = 'filled';

src/pin-input/events.ts

@@ -1,25 +1,10 @@
+import { BaseEvent } from '../utils';
 import { PIN_INPUT_FILLED_TYPE } from './constants';
 import { InputFilledEventParams } from './types';
 
-export class PinInputFilled extends Event {
-  public message: string;
-  public details: InputFilledEventParams;
-
-  constructor(
-    message: string,
-    details: InputFilledEventParams,
-    eventInitDict: EventInit = {},
-  ) {
-    const _eventInitDict = {
-      bubbles: true,
-      composed: false,
-      ...eventInitDict,
-    };
-
-    const type = PIN_INPUT_FILLED_TYPE;
-    super(type, _eventInitDict);
-
-    this.details = details;
-    this.message = message;
+export class Filled extends BaseEvent<InputFilledEventParams> {
+  static type = PIN_INPUT_FILLED_TYPE;
+  constructor(details: InputFilledEventParams){
+    super(Filled.type, {details})
   }
 }

src/pin-input/pin-input.stories.ts

@@ -20,7 +20,7 @@ const Template: Story<ArgTypes> = (/*{}: ArgTypes*/) => html`
   <tap-pin-input
     title="عنوان"
     description="توضیحات"
-    @input-filled=${(e: Error) => console.log(e)}
+    @filled=${(e: Error) => console.log(e)}
   ></tap-pin-input>
 `;
 
@@ -41,7 +41,7 @@ const TemplateWithForm: Story<ArgTypes> = (/*{}: ArgTypes*/) => html`
     <tap-pin-input
       title="عنوان"
       description="توضیحات"
-      @input-filled=${(e: Error) => console.log(e)}
+      @filled=${(e: Error) => console.log(e)}
     ></tap-pin-input>
     <button type="submit">Submit</button>
   </form>