refactor(types): use typed SvelteComponent interface for typing components

This commit is contained in:
Eric Liu 2020-11-25 15:29:55 -08:00
commit dab82d3479
156 changed files with 1379 additions and 1667 deletions

View file

@ -1,4 +1,5 @@
/// <reference types="svelte" />
import { SvelteComponent } from "svelte";
export type DataTableKey = string;
@ -125,31 +126,22 @@ export interface DataTableProps {
stickyHeader?: boolean;
}
export default class DataTable {
$$prop_def: DataTableProps;
$$slot_def: {
export default class DataTable extends SvelteComponent<
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;
}
}
> {}

View file

@ -1,4 +1,5 @@
/// <reference types="svelte" />
import { SvelteComponent } from "svelte";
export interface TableProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["section"]> {
/**
@ -37,11 +38,4 @@ 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 SvelteComponent<TableProps, {}, { default: {} }> {}

View file

@ -1,12 +1,6 @@
/// <reference types="svelte" />
import { SvelteComponent } from "svelte";
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 SvelteComponent<TableBodyProps, {}, { default: {} }> {}

View file

@ -1,16 +1,15 @@
/// <reference types="svelte" />
import { SvelteComponent } from "svelte";
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 SvelteComponent<
TableCellProps,
{
click: WindowEventMap["click"];
mouseover: WindowEventMap["mouseover"];
mouseenter: WindowEventMap["mouseenter"];
mouseleave: WindowEventMap["mouseleave"];
},
{ default: {} }
> {}

View file

@ -1,4 +1,5 @@
/// <reference types="svelte" />
import { SvelteComponent } from "svelte";
export interface TableContainerProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
/**
@ -20,11 +21,4 @@ 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 SvelteComponent<TableContainerProps, {}, { default: {} }> {}

View file

@ -1,16 +1,15 @@
/// <reference types="svelte" />
import { SvelteComponent } from "svelte";
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 SvelteComponent<
TableHeadProps,
{
click: WindowEventMap["click"];
mouseover: WindowEventMap["mouseover"];
mouseenter: WindowEventMap["mouseenter"];
mouseleave: WindowEventMap["mouseleave"];
},
{ default: {} }
> {}

View file

@ -1,4 +1,5 @@
/// <reference types="svelte" />
import { SvelteComponent } from "svelte";
export interface TableHeaderProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["th"]> {
/**
@ -20,15 +21,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 SvelteComponent<
TableHeaderProps,
{
mouseover: WindowEventMap["mouseover"];
mouseenter: WindowEventMap["mouseenter"];
mouseleave: WindowEventMap["mouseleave"];
click: WindowEventMap["click"];
},
{ default: {} }
> {}

View file

@ -1,16 +1,15 @@
/// <reference types="svelte" />
import { SvelteComponent } from "svelte";
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 SvelteComponent<
TableRowProps,
{
click: WindowEventMap["click"];
mouseover: WindowEventMap["mouseover"];
mouseenter: WindowEventMap["mouseenter"];
mouseleave: WindowEventMap["mouseleave"];
},
{ default: {} }
> {}

View file

@ -1,4 +1,5 @@
/// <reference types="svelte" />
import { SvelteComponent } from "svelte";
export interface ToolbarProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["section"]> {
/**
@ -8,11 +9,4 @@ 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 SvelteComponent<ToolbarProps, {}, { default: {} }> {}

View file

@ -1,4 +1,5 @@
/// <reference types="svelte" />
import { SvelteComponent } from "svelte";
export interface ToolbarBatchActionsProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
/**
@ -8,11 +9,4 @@ 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 SvelteComponent<ToolbarBatchActionsProps, {}, { default: {} }> {}

View file

@ -1,12 +1,6 @@
/// <reference types="svelte" />
import { SvelteComponent } 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 SvelteComponent<ToolbarContentProps, {}, { default: {} }> {}

View file

@ -1,13 +1,7 @@
/// <reference types="svelte" />
import { SvelteComponent } 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 SvelteComponent<ToolbarMenuProps, {}, { default: {} }> {}

View file

@ -1,15 +1,11 @@
/// <reference types="svelte" />
import { SvelteComponent } 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 SvelteComponent<
ToolbarMenuItemProps,
{ click: WindowEventMap["click"]; keydown: WindowEventMap["keydown"] },
{ default: {} }
> {}

View file

@ -1,4 +1,5 @@
/// <reference types="svelte" />
import { SvelteComponent } from "svelte";
export interface ToolbarSearchProps {
/**
@ -32,13 +33,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 SvelteComponent<
ToolbarSearchProps,
{
change: WindowEventMap["change"];
input: WindowEventMap["input"];
focus: WindowEventMap["focus"];
blur: WindowEventMap["blur"];
},
{}
> {}