refactor(types): rewrite type definitions to account for intrinsic attributes

types/DataTable/DataTable.d.ts

@@ -0,0 +1,122 @@
+/// <reference types="svelte" />
+
+type Headers = {
+  key: string;
+  value: string;
+  display?: (item) => string;
+  sort?: (a, b) => number;
+  empty?: boolean;
+  columnMenu?: boolean;
+}[];
+
+export default class DataTable {
+  $$prop_def: {
+    /**
+     * Specify the data table headers
+     * @default []
+     */
+    headers?: Headers;
+
+    /**
+     * Specify the rows the data table should render
+     * keys defined in `headers` are used for the row ids
+     * @default []
+     */
+    rows?: Object[];
+
+    /**
+     * Set the size of the data table
+     */
+    size?: "compact" | "short" | "tall";
+
+    /**
+     * Specify the title of the data table
+     * @default ""
+     */
+    title?: string;
+
+    /**
+     * Specify the description of the data table
+     * @default ""
+     */
+    description?: string;
+
+    /**
+     * Set to `true` to use zebra styles
+     * @default false
+     */
+    zebra?: boolean;
+
+    /**
+     * Set to `true` for the sortable variant
+     * @default false
+     */
+    sortable?: boolean;
+
+    /**
+     * Set to `true` for the expandable variant
+     * Automatically set to `true` if `batchExpansion` is `true`
+     * @default false
+     */
+    expandable?: boolean;
+
+    /**
+     * Set to `true` to enable batch expansion
+     * @default false
+     */
+    batchExpansion?: boolean;
+
+    /**
+     * Specify the row ids to be expanded
+     * @default []
+     */
+    expandedRowIds?: string[];
+
+    /**
+     * Set to `true` for the radio selection variant
+     * @default false
+     */
+    radio?: boolean;
+
+    /**
+     * Set to `true` for the selectable variant
+     * Automatically set to `true` if `radio` or `batchSelection` are `true`
+     * @default false
+     */
+    selectable?: boolean;
+
+    /**
+     * Set to `true` to enable batch selection
+     * @default false
+     */
+    batchSelection?: boolean;
+
+    /**
+     * Specify the row ids to be selected
+     * @default []
+     */
+    selectedRowIds?: string[];
+
+    /**
+     * Set to `true` to enable a sticky header
+     * @default false
+     */
+    stickyHeader?: boolean;
+  };
+
+  $$slot_def: {
+    default: {};
+    cell: { row: any; cell: any };
+    ["expanded-row"]: { row: any };
+  };
+
+  $on(eventname: "click:header--expand", cb: (event: CustomEvent<any>) => void): () => void;
+  $on(eventname: "click", cb: (event: CustomEvent<any>) => void): () => void;
+  $on(eventname: "click:header", cb: (event: CustomEvent<any>) => void): () => void;
+  $on(eventname: "click:row", cb: (event: CustomEvent<any>) => void): () => void;
+  $on(eventname: "mouseenter:row", cb: (event: CustomEvent<any>) => void): () => void;
+  $on(eventname: "mouseleave:row", cb: (event: CustomEvent<any>) => void): () => void;
+  $on(eventname: "click:row--expand", cb: (event: CustomEvent<any>) => void): () => void;
+  $on(eventname: "click:cell", cb: (event: CustomEvent<any>) => void): () => void;
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/DataTable/Table.d.ts

@@ -0,0 +1,46 @@
+/// <reference types="svelte" />
+
+export default class Table {
+  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["table"]> & {
+    /**
+     * Set the size of the table
+     */
+    size?: "compact" | "short" | "tall";
+
+    /**
+     * Set to `true` to use zebra styles
+     * @default false
+     */
+    zebra?: boolean;
+
+    /**
+     * Set to `true` to use static width
+     * @default false
+     */
+    useStaticWidth?: boolean;
+
+    /**
+     * Set to `true` for the bordered variant
+     * @default false
+     */
+    shouldShowBorder?: boolean;
+
+    /**
+     * Set to `true` for the sortable variant
+     * @default false
+     */
+    sortable?: boolean;
+
+    /**
+     * Set to `true` to enable a sticky header
+     * @default false
+     */
+    stickyHeader?: boolean;
+  };
+
+  $$slot_def: {
+    default: {};
+  };
+
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/DataTable/TableBody.d.ts

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

types/DataTable/TableCell.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="svelte" />
+
+export default class TableCell {
+  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["td"]> & {};
+
+  $$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;
+}

types/DataTable/TableContainer.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="svelte" />
+
+export default class TableContainer {
+  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
+    /**
+     * Specify the title of the data table
+     * @default ""
+     */
+    title?: string;
+
+    /**
+     * Specify the description of the data table
+     * @default ""
+     */
+    description?: string;
+
+    /**
+     * Set to `true` to enable a sticky header
+     * @default false
+     */
+    stickyHeader?: boolean;
+  };
+
+  $$slot_def: {
+    default: {};
+  };
+
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/DataTable/TableHead.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="svelte" />
+
+export default class TableHead {
+  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["thead"]> & {};
+
+  $$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;
+}

types/DataTable/TableHeader.d.ts

@@ -0,0 +1,32 @@
+/// <reference types="svelte" />
+
+export default class TableHeader {
+  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["th"]> & {
+    /**
+     * Specify the `scope` attribute
+     * @default "col"
+     */
+    scope?: string;
+
+    /**
+     * Override the default id translations
+     * @default () => ""
+     */
+    translateWithId?: () => string;
+
+    /**
+     * Set an id for the top-level element
+     */
+    id?: string;
+  };
+
+  $$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;
+}

types/DataTable/TableRow.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="svelte" />
+
+export default class TableRow {
+  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["tr"]> & {};
+
+  $$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;
+}

types/DataTable/Toolbar.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="svelte" />
+
+export default class Toolbar {
+  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["section"]> & {
+    /**
+     * Specify the toolbar size
+     * @default "default"
+     */
+    size?: "sm" | "default";
+  };
+
+  $$slot_def: {
+    default: {};
+  };
+
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/DataTable/ToolbarBatchActions.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="svelte" />
+
+export default class ToolbarBatchActions {
+  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
+    /**
+     * Override the total items selected text
+     * @default (totalSelected) => `${totalSelected} item${totalSelected === 1 ? "" : "s"} selected`
+     */
+    formatTotalSelected?: (totalSelected: number) => string;
+  };
+
+  $$slot_def: {
+    default: {};
+  };
+
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/DataTable/ToolbarContent.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="svelte" />
+
+export default class ToolbarContent {
+  $$prop_def: {};
+
+  $$slot_def: {
+    default: {};
+  };
+
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/DataTable/ToolbarMenu.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="svelte" />
+
+export default class ToolbarMenu {
+  $$prop_def: {};
+
+  $$slot_def: {
+    default: {};
+  };
+
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/DataTable/ToolbarMenuItem.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="svelte" />
+
+export default class ToolbarMenuItem {
+  $$prop_def: {};
+
+  $$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;
+}

types/DataTable/ToolbarSearch.d.ts

@@ -0,0 +1,43 @@
+/// <reference types="svelte" />
+
+export default class ToolbarSearch {
+  $$prop_def: {
+    /**
+     * Specify the value of the search input
+     * @default ""
+     */
+    value?: string;
+
+    /**
+     * Set to `true` to expand the search bar
+     * @default false
+     */
+    expanded?: boolean;
+
+    /**
+     * Set to `true` to keep the search bar expanded
+     * @default false
+     */
+    persistent?: boolean;
+
+    /**
+     * Specify the tabindex
+     * @default "0"
+     */
+    tabindex?: string;
+
+    /**
+     * Obtain a reference to the input HTML element
+     * @default null
+     */
+    ref?: null | HTMLInputElement;
+  };
+
+  $$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;
+}