fix CI

package.json

@@ -46,9 +46,9 @@
     "@antfu/eslint-config": "2.8.0",
     "eslint": "^8.57.0",
     "playwright": "^1.42.1",
-    "typescript": "^5.3.3",
+    "typescript": "^5.4.2",
     "vite": "^5.1.5",
-    "vitepress": "1.0.0-rc.44",
+    "vitepress": "1.0.0-rc.45",
     "vitest": "^1.3.1",
     "vue": "^3.4.21",
     "vue-tsc": "^2.0.5"

packages/core/package.json

@@ -66,10 +66,10 @@
     "tabbable": "^6.2.0"
   },
   "devDependencies": {
-    "@types/node": "^20.11.24",
+    "@types/node": "^20.11.25",
     "fast-glob": "^3.3.2",
     "lightningcss": "^1.24.0",
-    "typescript": "^5.3.3",
+    "typescript": "^5.4.2",
     "vite": "^5.1.5",
     "vite-plugin-dts": "^3.7.3"
   }

packages/core/src/components/_parent.ts

@@ -23,10 +23,10 @@ export interface ParentOptions<E extends string> {
    */
   initEvents?: boolean
   /**
-   * An Object of with events listener
+   * An object to instantiate events listeners
    * @default undefined
    */
-  on?: Record<E, (e: CustomEvent<Parent>) => void>
+  on?: Partial<Record<E, (e: CustomEvent<Parent>) => void | undefined>>
 }
 
 export interface ParentEvent {
@@ -51,19 +51,6 @@ export default abstract class Parent<E extends string = 'init' | 'destroy'> {
       throw this.error('The element/selector provided cannot be found.')
 
     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
   }
 
@@ -107,6 +94,20 @@ export default abstract class Parent<E extends string = 'init' | 'destroy'> {
    * Init the component
    */
   public init() {
+    if (this.opts.on) {
+      for (const key in this.opts.on) {
+        if (Object.prototype.hasOwnProperty.call(this.opts.on, key)) {
+          const element = this.opts.on[key]
+          if (!element)
+            continue
+          this.el.addEventListener(
+            `c.${this.name}.${key}`,
+            e => element(e as CustomEvent<Parent>),
+          )
+        }
+      }
+    }
+
     this.emitEvent('init')
     if (this.accessibilityStatus.styles)
       this.el.classList.add(`c-${this.name}--a11y`)

packages/core/src/components/collapse.ts

@@ -10,7 +10,7 @@ declare global {
 
 export interface CollapseOptions extends ParentOptions<Events> {}
 
-export default class Collapse extends Parent {
+export default class Collapse extends Parent<Events> {
   declare public opts: CollapseOptions
   private triggers: HTMLElement[] = []
   private expanded = false

packages/core/src/components/drag.ts

@@ -8,7 +8,7 @@ declare global {
 
 export interface DragOptions extends ParentOptions<Events> {}
 
-export default class Drag extends Parent {
+export default class Drag extends Parent<Events> {
   declare public opts: DragOptions
   private isDown = false
   private draggableClass = 'c-drag--draggable'

packages/core/src/components/drilldown.ts

@@ -27,7 +27,7 @@ interface DrilldownItem {
   level: number
 }
 
-export default class Drilldown extends Parent {
+export default class Drilldown extends Parent<Events> {
   declare public opts: DrilldownOptions
   private currentEl: HTMLUListElement | null = null
   private wrapper: HTMLUListElement | null = null

packages/core/src/components/dropdown.ts

@@ -33,7 +33,7 @@ export interface DropdownOptions extends ParentOptions<Events> {
   mutationObserver?: boolean
 }
 
-export default class Dropdown extends Parent {
+export default class Dropdown extends Parent<Events> {
   declare public opts: DropdownOptions
   private triggerEl: HTMLButtonElement | HTMLLinkElement | null = null
   private menuEl: HTMLUListElement | null = null

packages/core/src/components/marquee.ts

@@ -36,7 +36,7 @@ export interface MarqueeOptions extends ParentOptions<Events> {
   mutationObserver?: boolean
 }
 
-export default class Marquee extends Parent {
+export default class Marquee extends Parent<Events> {
   declare public opts: MarqueeOptions
   private containerEl: HTMLElement | null = null
   private resizeObserver?: ResizeObserver

packages/vue/demo/package.json

@@ -14,7 +14,7 @@
   "devDependencies": {
     "@compotes/vue": "workspace:*",
     "@vitejs/plugin-vue": "^5.0.4",
-    "typescript": "^5.3.3",
+    "typescript": "^5.4.2",
     "vite": "^5.1.5",
     "vue-tsc": "^2.0.5"
   }

packages/vue/demo/src/App.vue

@@ -1,9 +1,16 @@
 <script setup lang="ts">
 import { useCollapse } from '@compotes/vue'
 import { shallowRef } from 'vue'
+import 'compotes/css/collapse'
 
 const collapseEl = shallowRef<null | HTMLElement>(null)
-useCollapse(collapseEl)
+useCollapse(collapseEl, {
+  on: {
+    init: () => {
+      console.log('init')
+    },
+  },
+})
 </script>
 
 <template>

packages/vue/package.json

@@ -58,7 +58,7 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",
-    "typescript": "^5.3.3",
+    "typescript": "^5.4.2",
     "vite": "^5.1.5",
     "vue": "^3.4.21",
     "vue-tsc": "^2.0.5"

packages/vue/src/composables/_parent.ts

@@ -3,9 +3,9 @@ import type { Ref, ShallowRef } from 'vue'
 import { onMounted, onUnmounted, onUpdated, shallowRef } from 'vue'
 
 export function useParent<T extends Parent>(
-  ComponentClass: new (el: HTMLElement, options: ParentOptions<'init' | 'destroy'>) => T,
+  ComponentClass: new (el: HTMLElement, options: ParentOptions<string>) => T,
   el: Ref<HTMLElement | null>,
-  options: ParentOptions<'init' | 'destroy'> = {},
+  options: ParentOptions<string> = {},
 ) {
   const component: ShallowRef<T | null> = shallowRef(null)