feat(types): use the SvelteComponentTyped interface in the TypeScript definitions (#515)

types/DataTable/DataTable.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="svelte" />
+import { SvelteComponentTyped } from "svelte";
 
 export type DataTableKey = string;
 
@@ -128,31 +129,32 @@ export interface DataTableProps {
   stickyHeader?: boolean;
 }
 
-export default class DataTable {
-  $$prop_def: DataTableProps;
-  $$slot_def: {
+export default class DataTable extends SvelteComponentTyped<
+  DataTableProps,
+  {
+    click: CustomEvent<{
+      header?: DataTableHeader;
+      row?: DataTableRow;
+      cell?: DataTableCell;
+    }>;
+    ["click:header--expand"]: CustomEvent<{ expanded: boolean }>;
+    ["click:header"]: CustomEvent<{
+      header: DataTableHeader;
+      sortDirection: "ascending" | "descending" | "none";
+    }>;
+    ["click:row"]: CustomEvent<DataTableRow>;
+    ["mouseenter:row"]: CustomEvent<DataTableRow>;
+    ["mouseleave:row"]: CustomEvent<DataTableRow>;
+    ["click:row--expand"]: CustomEvent<{
+      expanded: boolean;
+      row: DataTableRow;
+    }>;
+    ["click:cell"]: CustomEvent<DataTableCell>;
+  },
+  {
     default: {};
     cell: { row: DataTableRow; cell: DataTableCell };
     ["cell-header"]: { header: DataTableNonEmptyHeader };
     ["expanded-row"]: { row: DataTableRow };
-  };
-
-  $on(
-    eventname: "click",
-    cb: (event: CustomEvent<{ header?: DataTableHeader; row?: DataTableRow; cell?: DataTableCell }>) => void
-  ): () => void;
-  $on(eventname: "click:header--expand", cb: (event: CustomEvent<{ expanded: boolean }>) => void): () => void;
-  $on(
-    eventname: "click:header",
-    cb: (event: CustomEvent<{ header: DataTableHeader; sortDirection: "ascending" | "descending" | "none" }>) => void
-  ): () => void;
-  $on(eventname: "click:row", cb: (event: CustomEvent<DataTableRow>) => void): () => void;
-  $on(eventname: "mouseenter:row", cb: (event: CustomEvent<DataTableRow>) => void): () => void;
-  $on(eventname: "mouseleave:row", cb: (event: CustomEvent<DataTableRow>) => void): () => void;
-  $on(
-    eventname: "click:row--expand",
-    cb: (event: CustomEvent<{ expanded: boolean; row: DataTableRow }>) => void
-  ): () => void;
-  $on(eventname: "click:cell", cb: (event: CustomEvent<DataTableCell>) => void): () => void;
-  $on(eventname: string, cb: (event: Event) => void): () => void;
-}
+  }
+> {}

types/DataTable/DataTableSkeleton.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="svelte" />
+import { SvelteComponentTyped } from "svelte";
 import { DataTableHeader } from "../DataTable/DataTable";
 
 export interface DataTableSkeletonProps
@@ -48,13 +49,13 @@ export interface DataTableSkeletonProps
   showToolbar?: boolean;
 }
 
-export default class DataTableSkeleton {
-  $$prop_def: DataTableSkeletonProps;
-  $$slot_def: {};
-
-  $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
-  $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
-  $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
-  $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
-  $on(eventname: string, cb: (event: Event) => void): () => void;
-}
+export default class DataTableSkeleton extends SvelteComponentTyped<
+  DataTableSkeletonProps,
+  {
+    click: WindowEventMap["click"];
+    mouseover: WindowEventMap["mouseover"];
+    mouseenter: WindowEventMap["mouseenter"];
+    mouseleave: WindowEventMap["mouseleave"];
+  },
+  {}
+> {}

types/DataTable/Table.d.ts

@@ -1,6 +1,8 @@
 /// <reference types="svelte" />
+import { SvelteComponentTyped } from "svelte";
 
-export interface TableProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["section"]> {
+export interface TableProps
+  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["section"]> {
   /**
    * Set the size of the table
    */
@@ -37,11 +39,8 @@ export interface TableProps extends svelte.JSX.HTMLAttributes<HTMLElementTagName
   stickyHeader?: boolean;
 }
 
-export default class Table {
-  $$prop_def: TableProps;
-  $$slot_def: {
-    default: {};
-  };
-
-  $on(eventname: string, cb: (event: Event) => void): () => void;
-}
+export default class Table extends SvelteComponentTyped<
+  TableProps,
+  {},
+  { default: {} }
+> {}

types/DataTable/TableBody.d.ts

@@ -1,12 +1,11 @@
 /// <reference types="svelte" />
+import { SvelteComponentTyped } from "svelte";
 
-export interface TableBodyProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["tbody"]> {}
+export interface TableBodyProps
+  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["tbody"]> {}
 
-export default class TableBody {
-  $$prop_def: TableBodyProps;
-  $$slot_def: {
-    default: {};
-  };
-
-  $on(eventname: string, cb: (event: Event) => void): () => void;
-}
+export default class TableBody extends SvelteComponentTyped<
+  TableBodyProps,
+  {},
+  { default: {} }
+> {}

types/DataTable/TableCell.d.ts

@@ -1,16 +1,16 @@
 /// <reference types="svelte" />
+import { SvelteComponentTyped } from "svelte";
 
-export interface TableCellProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["td"]> {}
+export interface TableCellProps
+  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["td"]> {}
 
-export default class TableCell {
-  $$prop_def: TableCellProps;
-  $$slot_def: {
-    default: {};
-  };
-
-  $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
-  $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
-  $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
-  $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
-  $on(eventname: string, cb: (event: Event) => void): () => void;
-}
+export default class TableCell extends SvelteComponentTyped<
+  TableCellProps,
+  {
+    click: WindowEventMap["click"];
+    mouseover: WindowEventMap["mouseover"];
+    mouseenter: WindowEventMap["mouseenter"];
+    mouseleave: WindowEventMap["mouseleave"];
+  },
+  { default: {} }
+> {}

types/DataTable/TableContainer.d.ts

@@ -1,6 +1,8 @@
 /// <reference types="svelte" />
+import { SvelteComponentTyped } from "svelte";
 
-export interface TableContainerProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+export interface TableContainerProps
+  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
   /**
    * Specify the title of the data table
    * @default ""
@@ -20,11 +22,8 @@ export interface TableContainerProps extends svelte.JSX.HTMLAttributes<HTMLEleme
   stickyHeader?: boolean;
 }
 
-export default class TableContainer {
-  $$prop_def: TableContainerProps;
-  $$slot_def: {
-    default: {};
-  };
-
-  $on(eventname: string, cb: (event: Event) => void): () => void;
-}
+export default class TableContainer extends SvelteComponentTyped<
+  TableContainerProps,
+  {},
+  { default: {} }
+> {}

types/DataTable/TableHead.d.ts

@@ -1,16 +1,16 @@
 /// <reference types="svelte" />
+import { SvelteComponentTyped } from "svelte";
 
-export interface TableHeadProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["thead"]> {}
+export interface TableHeadProps
+  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["thead"]> {}
 
-export default class TableHead {
-  $$prop_def: TableHeadProps;
-  $$slot_def: {
-    default: {};
-  };
-
-  $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
-  $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
-  $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
-  $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
-  $on(eventname: string, cb: (event: Event) => void): () => void;
-}
+export default class TableHead extends SvelteComponentTyped<
+  TableHeadProps,
+  {
+    click: WindowEventMap["click"];
+    mouseover: WindowEventMap["mouseover"];
+    mouseenter: WindowEventMap["mouseenter"];
+    mouseleave: WindowEventMap["mouseleave"];
+  },
+  { default: {} }
+> {}

types/DataTable/TableHeader.d.ts

@@ -1,6 +1,8 @@
 /// <reference types="svelte" />
+import { SvelteComponentTyped } from "svelte";
 
-export interface TableHeaderProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["th"]> {
+export interface TableHeaderProps
+  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["th"]> {
   /**
    * Specify the `scope` attribute
    * @default "col"
@@ -20,15 +22,13 @@ export interface TableHeaderProps extends svelte.JSX.HTMLAttributes<HTMLElementT
   id?: string;
 }
 
-export default class TableHeader {
-  $$prop_def: TableHeaderProps;
-  $$slot_def: {
-    default: {};
-  };
-
-  $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
-  $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
-  $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
-  $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
-  $on(eventname: string, cb: (event: Event) => void): () => void;
-}
+export default class TableHeader extends SvelteComponentTyped<
+  TableHeaderProps,
+  {
+    mouseover: WindowEventMap["mouseover"];
+    mouseenter: WindowEventMap["mouseenter"];
+    mouseleave: WindowEventMap["mouseleave"];
+    click: WindowEventMap["click"];
+  },
+  { default: {} }
+> {}

types/DataTable/TableRow.d.ts

@@ -1,16 +1,16 @@
 /// <reference types="svelte" />
+import { SvelteComponentTyped } from "svelte";
 
-export interface TableRowProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["tr"]> {}
+export interface TableRowProps
+  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["tr"]> {}
 
-export default class TableRow {
-  $$prop_def: TableRowProps;
-  $$slot_def: {
-    default: {};
-  };
-
-  $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
-  $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
-  $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
-  $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
-  $on(eventname: string, cb: (event: Event) => void): () => void;
-}
+export default class TableRow extends SvelteComponentTyped<
+  TableRowProps,
+  {
+    click: WindowEventMap["click"];
+    mouseover: WindowEventMap["mouseover"];
+    mouseenter: WindowEventMap["mouseenter"];
+    mouseleave: WindowEventMap["mouseleave"];
+  },
+  { default: {} }
+> {}

types/DataTable/Toolbar.d.ts

@@ -1,6 +1,8 @@
 /// <reference types="svelte" />
+import { SvelteComponentTyped } from "svelte";
 
-export interface ToolbarProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["section"]> {
+export interface ToolbarProps
+  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["section"]> {
   /**
    * Specify the toolbar size
    * @default "default"
@@ -8,11 +10,8 @@ export interface ToolbarProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNa
   size?: "sm" | "default";
 }
 
-export default class Toolbar {
-  $$prop_def: ToolbarProps;
-  $$slot_def: {
-    default: {};
-  };
-
-  $on(eventname: string, cb: (event: Event) => void): () => void;
-}
+export default class Toolbar extends SvelteComponentTyped<
+  ToolbarProps,
+  {},
+  { default: {} }
+> {}

types/DataTable/ToolbarBatchActions.d.ts

@@ -1,6 +1,8 @@
 /// <reference types="svelte" />
+import { SvelteComponentTyped } from "svelte";
 
-export interface ToolbarBatchActionsProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+export interface ToolbarBatchActionsProps
+  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
   /**
    * Override the total items selected text
    * @default (totalSelected) => `${totalSelected} item${totalSelected === 1 ? "" : "s"} selected`
@@ -8,11 +10,8 @@ export interface ToolbarBatchActionsProps extends svelte.JSX.HTMLAttributes<HTML
   formatTotalSelected?: (totalSelected: number) => string;
 }
 
-export default class ToolbarBatchActions {
-  $$prop_def: ToolbarBatchActionsProps;
-  $$slot_def: {
-    default: {};
-  };
-
-  $on(eventname: string, cb: (event: Event) => void): () => void;
-}
+export default class ToolbarBatchActions extends SvelteComponentTyped<
+  ToolbarBatchActionsProps,
+  {},
+  { default: {} }
+> {}

types/DataTable/ToolbarContent.d.ts

@@ -1,12 +1,10 @@
 /// <reference types="svelte" />
+import { SvelteComponentTyped } from "svelte";
 
 export interface ToolbarContentProps {}
 
-export default class ToolbarContent {
-  $$prop_def: ToolbarContentProps;
-  $$slot_def: {
-    default: {};
-  };
-
-  $on(eventname: string, cb: (event: Event) => void): () => void;
-}
+export default class ToolbarContent extends SvelteComponentTyped<
+  ToolbarContentProps,
+  {},
+  { default: {} }
+> {}

types/DataTable/ToolbarMenu.d.ts

@@ -1,13 +1,11 @@
 /// <reference types="svelte" />
+import { SvelteComponentTyped } from "svelte";
 import { OverflowMenuProps } from "../OverflowMenu/OverflowMenu";
 
 export interface ToolbarMenuProps extends OverflowMenuProps {}
 
-export default class ToolbarMenu {
-  $$prop_def: ToolbarMenuProps;
-  $$slot_def: {
-    default: {};
-  };
-
-  $on(eventname: string, cb: (event: Event) => void): () => void;
-}
+export default class ToolbarMenu extends SvelteComponentTyped<
+  ToolbarMenuProps,
+  {},
+  { default: {} }
+> {}

types/DataTable/ToolbarMenuItem.d.ts

@@ -1,15 +1,11 @@
 /// <reference types="svelte" />
+import { SvelteComponentTyped } from "svelte";
 import { OverflowMenuItemProps } from "../OverflowMenu/OverflowMenuItem";
 
 export interface ToolbarMenuItemProps extends OverflowMenuItemProps {}
 
-export default class ToolbarMenuItem {
-  $$prop_def: ToolbarMenuItemProps;
-  $$slot_def: {
-    default: {};
-  };
-
-  $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
-  $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void;
-  $on(eventname: string, cb: (event: Event) => void): () => void;
-}
+export default class ToolbarMenuItem extends SvelteComponentTyped<
+  ToolbarMenuItemProps,
+  { click: WindowEventMap["click"]; keydown: WindowEventMap["keydown"] },
+  { default: {} }
+> {}

types/DataTable/ToolbarSearch.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="svelte" />
+import { SvelteComponentTyped } from "svelte";
 
 export interface ToolbarSearchProps {
   /**
@@ -38,13 +39,13 @@ export interface ToolbarSearchProps {
   ref?: null | HTMLInputElement;
 }
 
-export default class ToolbarSearch {
-  $$prop_def: ToolbarSearchProps;
-  $$slot_def: {};
-
-  $on(eventname: "change", cb: (event: WindowEventMap["change"]) => void): () => void;
-  $on(eventname: "input", cb: (event: WindowEventMap["input"]) => void): () => void;
-  $on(eventname: "focus", cb: (event: WindowEventMap["focus"]) => void): () => void;
-  $on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void;
-  $on(eventname: string, cb: (event: Event) => void): () => void;
-}
+export default class ToolbarSearch extends SvelteComponentTyped<
+  ToolbarSearchProps,
+  {
+    change: WindowEventMap["change"];
+    input: WindowEventMap["input"];
+    focus: WindowEventMap["focus"];
+    blur: WindowEventMap["blur"];
+  },
+  {}
+> {}