add events on with ts rework

package.json

@@ -43,14 +43,14 @@
     "publish": "pnpm run -r publish"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "2.7.0",
+    "@antfu/eslint-config": "2.8.0",
     "eslint": "^8.57.0",
     "playwright": "^1.42.1",
     "typescript": "^5.3.3",
-    "vite": "^5.1.4",
+    "vite": "^5.1.5",
     "vitepress": "1.0.0-rc.44",
     "vitest": "^1.3.1",
     "vue": "^3.4.21",
-    "vue-tsc": "^2.0.3"
+    "vue-tsc": "^2.0.5"
   }
 }

packages/core/package.json

@@ -70,7 +70,7 @@
     "fast-glob": "^3.3.2",
     "lightningcss": "^1.24.0",
     "typescript": "^5.3.3",
-    "vite": "^5.1.4",
+    "vite": "^5.1.5",
     "vite-plugin-dts": "^3.7.3"
   }
 }

packages/core/src/components/_parent.ts

@@ -1,6 +1,6 @@
 import ErrorCompotes from '../utils/error'
 
-export interface ParentOptions {
+export interface ParentOptions<E extends string> {
   /**
    * Init the component on creation.
    * @default true
@@ -22,6 +22,11 @@ export interface ParentOptions {
    * @default true
    */
   initEvents?: boolean
+  /**
+   * An Object of with events listener
+   * @default undefined
+   */
+  on?: Record<E, (e: CustomEvent<Parent>) => void>
 }
 
 export interface ParentEvent {
@@ -31,13 +36,13 @@ export interface ParentEvent {
   el: Element | Window
 }
 
-export default abstract class Parent {
+export default abstract class Parent<E extends string = 'init' | 'destroy'> {
   protected name = ''
   public el: HTMLElement
-  public opts: ParentOptions
+  public opts: ParentOptions<E>
   protected events: ParentEvent[] = []
 
-  constructor(el: HTMLElement | string, options: ParentOptions = {}) {
+  constructor(el: HTMLElement | string, options: ParentOptions<E> = {}) {
     const checkEl = typeof el === 'string'
       ? document.querySelector<HTMLElement>(el)
       : el
@@ -47,6 +52,18 @@ export default abstract class Parent {
 
     this.el = checkEl
 
+    if (options.on) {
+      for (const key in options.on) {
+        if (Object.prototype.hasOwnProperty.call(options.on, key)) {
+          const element = options.on[key]
+          this.el.addEventListener(
+            `c.${this.name}.${key}`,
+            e => element(e as CustomEvent<Parent>),
+          )
+        }
+      }
+    }
+
     this.opts = options
   }
 
@@ -142,7 +159,7 @@ export default abstract class Parent {
   /**
    * Options of the component
    */
-  public get options(): ParentOptions {
+  public get options() {
     return this.opts
   }
 

packages/core/src/components/collapse.ts

@@ -2,18 +2,13 @@ import type { ParentOptions } from './_parent'
 import Parent from './_parent'
 import { getTransitionDuration } from './../utils/animation'
 
+type Events = 'init' | 'destroy' | 'show' | 'shown' | 'hide' | 'hidden' | 'destroy'
+
 declare global {
-  interface HTMLElementEventMap {
-    'c.collapse.init': CustomEvent<Collapse>
-    'c.collapse.show': CustomEvent<Collapse>
-    'c.collapse.shown': CustomEvent<Collapse>
-    'c.collapse.hide': CustomEvent<Collapse>
-    'c.collapse.hidden': CustomEvent<Collapse>
-    'c.collapse.destroy': CustomEvent<Collapse>
-  }
+  interface HTMLElementEventMap extends Record<`c.collapse.${Events}`, CustomEvent<Collapse>> {}
 }
 
-export interface CollapseOptions extends ParentOptions {}
+export interface CollapseOptions extends ParentOptions<Events> {}
 
 export default class Collapse extends Parent {
   declare public opts: CollapseOptions

packages/core/src/components/drag.ts

@@ -1,15 +1,12 @@
 import Parent, { type ParentOptions } from './_parent'
 
+type Events = 'init' | 'start' | 'end' | 'destroy'
+
 declare global {
-  interface HTMLElementEventMap {
-    'c.drag.init': CustomEvent<Drag>
-    'c.drag.start': CustomEvent<Drag>
-    'c.drag.end': CustomEvent<Drag>
-    'c.drag.destroy': CustomEvent<Drag>
-  }
+  interface HTMLElementEventMap extends Record<`c.drag.${Events}`, CustomEvent<Drag>> {}
 }
 
-export interface DragOptions extends ParentOptions {}
+export interface DragOptions extends ParentOptions<Events> {}
 
 export default class Drag extends Parent {
   declare public opts: DragOptions

packages/core/src/components/drilldown.ts

@@ -3,18 +3,13 @@ import { focusChar, focusFirst, focusLast, focusSibling, generateId } from '../u
 import Parent, { type ParentOptions } from './_parent'
 import { getTransitionDuration } from './../utils/animation'
 
+type Events = 'init' | 'destroy' | 'update' | 'next' | 'back' | 'reset'
+
 declare global {
-  interface HTMLElementEventMap {
-    'c.drilldown.init': CustomEvent<Drilldown>
-    'c.drilldown.destroy': CustomEvent<Drilldown>
-    'c.drilldown.update': CustomEvent<Drilldown>
-    'c.drilldown.next': CustomEvent<Drilldown>
-    'c.drilldown.back': CustomEvent<Drilldown>
-    'c.drilldown.reset': CustomEvent<Drilldown>
-  }
+  interface HTMLElementEventMap extends Record<`c.drilldown.${Events}`, CustomEvent<Drilldown>> {}
 }
 
-export interface DrilldownOptions extends ParentOptions {
+export interface DrilldownOptions extends ParentOptions<Events> {
   /**
    * Adjust height dynamically with the current menu height
    * @default false

packages/core/src/components/dropdown.ts

@@ -1,16 +1,13 @@
 import { focusFirst, focusLast, focusSibling, generateId } from '../utils/accessibility'
 import Parent, { type ParentOptions } from './_parent'
 
+type Events = 'init' | 'opened' | 'closed' | 'destroy'
+
 declare global {
-  interface HTMLElementEventMap {
-    'c.dropdown.init': CustomEvent<Dropdown>
-    'c.dropdown.destroy': CustomEvent<Dropdown>
-    'c.dropdown.opened': CustomEvent<Dropdown>
-    'c.dropdown.closed': CustomEvent<Dropdown>
-  }
+  interface HTMLElementEventMap extends Record<`c.dropdown.${Events}`, CustomEvent<Dropdown>> {}
 }
 
-export interface DropdownOptions extends ParentOptions {
+export interface DropdownOptions extends ParentOptions<Events> {
   /**
    * Define open mode, by default you need to `click` on the trigger element
    * but you can configure it to display the dropdown on `hover`.

packages/core/src/components/marquee.ts

@@ -1,17 +1,13 @@
 import { tabbable } from 'tabbable'
 import Parent, { type ParentOptions } from './_parent'
 
+type Events = 'init' | 'play' | 'pause' | 'loop' | 'destroy'
+
 declare global {
-  interface HTMLElementEventMap {
-    'c.marquee.init': CustomEvent<Marquee>
-    'c.marquee.destroy': CustomEvent<Marquee>
-    'c.marquee.play': CustomEvent<Marquee>
-    'c.marquee.pause': CustomEvent<Marquee>
-    'c.marquee.loop': CustomEvent<Marquee>
-  }
+  interface HTMLElementEventMap extends Record<`c.marquee.${Events}`, CustomEvent<Marquee>> {}
 }
 
-export interface MarqueeOptions extends ParentOptions {
+export interface MarqueeOptions extends ParentOptions<Events> {
   /**
    * Clone elements to fill the Marquee. Useful for infinite loop
    * @default false

packages/vue/demo/package.json

@@ -15,7 +15,7 @@
     "@compotes/vue": "workspace:*",
     "@vitejs/plugin-vue": "^5.0.4",
     "typescript": "^5.3.3",
-    "vite": "^5.1.4",
-    "vue-tsc": "^2.0.3"
+    "vite": "^5.1.5",
+    "vue-tsc": "^2.0.5"
   }
 }

packages/vue/demo/tsconfig.json

@@ -1,25 +1,25 @@
 {
   "compilerOptions": {
     "target": "ES2020",
+    "jsx": "preserve",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
     "useDefineForClassFields": true,
     "module": "ESNext",
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "skipLibCheck": true,
 
     /* Bundler mode */
     "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
     "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "preserve",
+    "allowImportingTsExtensions": true,
 
     /* Linting */
     "strict": true,
+    "noFallthroughCasesInSwitch": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
+    "noEmit": true,
+    "isolatedModules": true,
+    "skipLibCheck": true
   },
-  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
-  "references": [{ "path": "./tsconfig.node.json" }]
+  "references": [{ "path": "./tsconfig.node.json" }],
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
 }

packages/vue/demo/tsconfig.node.json

@@ -1,11 +1,11 @@
 {
   "compilerOptions": {
     "composite": true,
-    "skipLibCheck": true,
     "module": "ESNext",
     "moduleResolution": "bundler",
+    "strict": true,
     "allowSyntheticDefaultImports": true,
-    "strict": true
+    "skipLibCheck": true
   },
   "include": ["vite.config.ts"]
 }

packages/vue/package.json

@@ -59,9 +59,9 @@
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",
     "typescript": "^5.3.3",
-    "vite": "^5.1.4",
+    "vite": "^5.1.5",
     "vue": "^3.4.21",
-    "vue-tsc": "^2.0.3"
+    "vue-tsc": "^2.0.5"
   },
   "publishConfig": {
     "access": "public"