fix: convert events to concrete event classes

Tap30 · Aug 19, 2024 · 9e95ce6 · 9e95ce6
1 parent 73825d9
commit 9e95ce6
Show file tree

Hide file tree

Showing 13 changed files with 329 additions and 119 deletions.
diff --git a/eslint.config.js b/eslint.config.js
@@ -18,8 +18,8 @@ export default tseslint.config(
       },
     },
     rules: {
-      "@typescript-eslint/unbound-method": "off"
-    }
+      '@typescript-eslint/unbound-method': 'off',
+    },
   },
   {
     files: ['*.js'],

diff --git a/src/pin-input-cell/constants.ts b/src/pin-input-cell/constants.ts
@@ -0,0 +1,5 @@
+export const PIN_INPUT_CELL_FILLED_TYPE = 'cell-filled';
+export const PIN_INPUT_CELL_CLEARED_TYPE = 'cell-cleared';
+export const PIN_INPUT_CELL_CLEARED_ALL_TYPE = 'cell-cleared-all-with-meta-key';
+export const PIN_INPUT_CELL_ARROW_KEY_PRESSED_TYPE = 'arrow-key-pressed';
+export const PIN_INPUT_CELL_OVERFLOW_VALUE_TYPE = 'overflow-value';
diff --git a/src/pin-input-cell/events.ts b/src/pin-input-cell/events.ts
@@ -0,0 +1,122 @@
+import {
+  PIN_INPUT_CELL_ARROW_KEY_PRESSED_TYPE,
+  PIN_INPUT_CELL_CLEARED_ALL_TYPE,
+  PIN_INPUT_CELL_CLEARED_TYPE,
+  PIN_INPUT_CELL_FILLED_TYPE,
+  PIN_INPUT_CELL_OVERFLOW_VALUE_TYPE,
+} 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 PinInputCellCleared 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_CLEARED_TYPE;
+    super(type, _eventInitDict);
+
+    this.details = details;
+    this.message = message;
+  }
+}
+
+export class PinInputCellClearedAll 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_CLEARED_ALL_TYPE;
+    super(type, _eventInitDict);
+
+    this.details = details;
+    this.message = message;
+  }
+}
+
+export class PinInputCellArrowKeyPressed<T = 'left' | 'right'> extends Event {
+  public message: string;
+  public details: ValueChangedEventParams<T>;
+
+  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;
+  }
+}
+
+export class PinInputCellOverflowValue 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_OVERFLOW_VALUE_TYPE;
+    super(type, _eventInitDict);
+
+    this.details = details;
+    this.message = message;
+  }
+}
diff --git a/src/pin-input-cell/index.ts b/src/pin-input-cell/index.ts
@@ -1,6 +1,8 @@
 import { customElement } from 'lit/decorators.js';
 import { PinInputCell } from './pin-input-cell.js';
 import styles from './pin-input-cell.style.js';
+export * from './events.js';
+export * from './constants.js';
 
 @customElement('tap-pin-input-cell')
 export class TapPinInputCell extends PinInputCell {

diff --git a/src/pin-input-cell/pin-input-cell.style.ts b/src/pin-input-cell/pin-input-cell.style.ts
@@ -1,4 +1,4 @@
-import {css} from 'lit';
+import { css } from 'lit';
 
 export default css`
   :host {
@@ -7,30 +7,61 @@ export default css`
     --tap-pin-input-cell-max-cell-width-ratio: 1.25;
 
     --tap-pin-input-cell-font-family: var(--tap-sys-font-family);
-    --tap-pin-input-cell-font-size-small: var(--tap-sys-typography-headline-xs-size, 16px);
-    --tap-pin-input-cell-font-size-medium: var(--tap-sys-typography-headline-sm-size, 20px);
-    --tap-pin-input-cell-font-size-large: var(--tap-sys-typography-headline-md-size, 24px);
+    --tap-pin-input-cell-font-size-small: var(
+      --tap-sys-typography-headline-xs-size,
+      16px
+    );
+    --tap-pin-input-cell-font-size-medium: var(
+      --tap-sys-typography-headline-sm-size,
+      20px
+    );
+    --tap-pin-input-cell-font-size-large: var(
+      --tap-sys-typography-headline-md-size,
+      24px
+    );
 
-    --tap-pin-input-cell-font-weight-small: var(--tap-sys-typography-headline-xs-weight, 600);
-    --tap-pin-input-cell-font-weight-medium: var(--tap-sys-typography-headline-sm-weight, 600);
-    --tap-pin-input-cell-font-weight-large: var(--tap-sys-typography-headline-md-weight, 600);
+    --tap-pin-input-cell-font-weight-small: var(
+      --tap-sys-typography-headline-xs-weight,
+      600
+    );
+    --tap-pin-input-cell-font-weight-medium: var(
+      --tap-sys-typography-headline-sm-weight,
+      600
+    );
+    --tap-pin-input-cell-font-weight-large: var(
+      --tap-sys-typography-headline-md-weight,
+      600
+    );
 
-    --tap-pin-input-cell-line-height-small: var(--tap-sys-typography-headline-xs-height, 26px);
-    --tap-pin-input-cell-line-height-medium: var(--tap-sys-typography-headline-sm-height, 32px);
-    --tap-pin-input-cell-line-height-large: var(--tap-sys-typography-headline-md-height, 36px);
+    --tap-pin-input-cell-line-height-small: var(
+      --tap-sys-typography-headline-xs-height,
+      26px
+    );
+    --tap-pin-input-cell-line-height-medium: var(
+      --tap-sys-typography-headline-sm-height,
+      32px
+    );
+    --tap-pin-input-cell-line-height-large: var(
+      --tap-sys-typography-headline-md-height,
+      36px
+    );
 
     --tap-pin-input-cell-padding-small: var(--tap-sys-spacing-3, 6px);
     --tap-pin-input-cell-padding-medium: var(--tap-sys-spacing-4, 8px);
     --tap-pin-input-cell-padding-large: var(--tap-sys-spacing-5, 12px);
 
     --tap-pin-input-cell-bg-color: var(--tap-palette-gray-100);
     --tap-pin-input-cell-error-bg-color: var(--tap-palette-red-50);
-    --tap-pin-input-cell-disabled-bg-color: var(--tap-sys-color-surface-disabled);
+    --tap-pin-input-cell-disabled-bg-color: var(
+      --tap-sys-color-surface-disabled
+    );
     --tap-pin-input-cell-color: var(--tap-palette-black);
     --tap-pin-input-cell-disabled-color: var(--tap-sys-color-content-disabled);
 
     --tap-pin-input-cell-border-focus-color: var(--tap-sys-color-border-focus);
-    --tap-pin-input-cell-border-error-color: var(--tap-sys-color-border-negative);
+    --tap-pin-input-cell-border-error-color: var(
+      --tap-sys-color-border-negative
+    );
     --tap-pin-input-cell-border-disabled-color: transparent;
     --tap-pin-input-cell-border-radius: var(--tap-sys-radius-3);
     --tap-pin-input-cell-border-width: var(--tap-sys-stroke-4);
@@ -53,7 +84,8 @@ export default css`
     margin: 0;
     background-color: var(--tap-pin-input-cell-bg-color);
     color: var(--tap-pin-input-cell-color);
-    border: var(--tap-pin-input-cell-border-width) solid var(--tap-pin-input-cell-border-default-color);
+    border: var(--tap-pin-input-cell-border-width) solid
+      var(--tap-pin-input-cell-border-default-color);
     border-radius: var(--tap-pin-input-cell-border-radius);
     outline: none;
     min-width: 0;
@@ -62,7 +94,7 @@ export default css`
     min-width: var(--tap-pin-input-cell-height);
     max-width: calc(
       var(--tap-pin-input-cell-height) *
-      var(--tap-pin-input-cell-max-cell-width-ratio)
+        var(--tap-pin-input-cell-max-cell-width-ratio)
     );
   }