@ifloppy/maxcraftmc-ui-svelte 0.1.0

package/types/ContextMenu/ContextMenu.svelte.d.ts

@@ -0,0 +1,53 @@
+import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
+
+type $RestProps = SvelteHTMLElements["ul"];
+
+type $Props = {
+  /**
+   * Specify an element or list of elements to trigger the context menu.
+   * If no element is specified, the context menu applies to the entire window
+   * @default null
+   */
+  target?: null | ReadonlyArray<null | HTMLElement>;
+
+  /**
+   * Set to `true` to open the menu
+   * Either `x` and `y` must be greater than zero
+   * @default false
+   */
+  open?: boolean;
+
+  /**
+   * Specify the horizontal offset of the menu position
+   * @default 0
+   */
+  x?: number;
+
+  /**
+   * Specify the vertical offset of the menu position
+   * @default 0
+   */
+  y?: number;
+
+  /**
+   * Obtain a reference to the unordered list HTML element
+   * @default null
+   */
+  ref?: null | HTMLUListElement;
+
+  [key: `data-${string}`]: any;
+};
+
+export type ContextMenuProps = Omit<$RestProps, keyof $Props> & $Props;
+
+export default class ContextMenu extends SvelteComponentTyped<
+  ContextMenuProps,
+  {
+    open: CustomEvent<HTMLElement>;
+    click: WindowEventMap["click"];
+    keydown: WindowEventMap["keydown"];
+    close: CustomEvent<null>;
+  },
+  { default: {} }
+> {}

package/types/ContextMenu/ContextMenuDivider.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { SvelteComponentTyped } from "svelte";
+
+export type ContextMenuDividerProps = {};
+
+export default class ContextMenuDivider extends SvelteComponentTyped<
+  ContextMenuDividerProps,
+  Record<string, any>,
+  {}
+> {}

package/types/ContextMenu/ContextMenuGroup.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { SvelteComponentTyped } from "svelte";
+
+export type ContextMenuGroupProps = {
+  /**
+   * @default []
+   */
+  selectedIds?: ReadonlyArray<string>;
+
+  /**
+   * Specify the label text
+   * @default ""
+   */
+  labelText?: string;
+};
+
+export default class ContextMenuGroup extends SvelteComponentTyped<
+  ContextMenuGroupProps,
+  Record<string, any>,
+  { default: {} }
+> {}

package/types/ContextMenu/ContextMenuOption.svelte.d.ts

@@ -0,0 +1,86 @@
+import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
+
+type $RestProps = SvelteHTMLElements["li"];
+
+type $Props = {
+  /**
+   * Specify the kind of option
+   * @default "default"
+   */
+  kind?: "default" | "danger";
+
+  /**
+   * Set to `true` to enable the disabled state
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Set to `true` to indent the label
+   * @default false
+   */
+  indented?: boolean;
+
+  /**
+   * Specify the icon to render
+   * Icon is rendered to the left of the label text
+   * @default undefined
+   */
+  icon?: any;
+
+  /**
+   * Specify the label text.
+   * Alternatively, use the "labelText" slot (e.g., `<span slot="labelText">...</span>`)
+   * @default ""
+   */
+  labelText?: string;
+
+  /**
+   * Set to `true` to use the selected variant
+   * @default false
+   */
+  selected?: boolean;
+
+  /**
+   * Set to `true` to enable the selectable variant
+   * Automatically set to `true` if `selected` is `true`
+   * @default false
+   */
+  selectable?: boolean;
+
+  /**
+   * Specify the shortcut text.
+   * Alternatively, use the "shortcutText" slot (e.g., `<span slot="shortcutText">...</span>`)
+   * @default ""
+   */
+  shortcutText?: string;
+
+  /**
+   * Specify the id
+   * It's recommended to provide an id as a value to bind to within a selectable/radio menu group
+   * @default "ccs-" + Math.random().toString(36)
+   */
+  id?: string;
+
+  /**
+   * Obtain a reference to the list item HTML element
+   * @default null
+   */
+  ref?: null | HTMLLIElement;
+
+  [key: `data-${string}`]: any;
+};
+
+export type ContextMenuOptionProps = Omit<$RestProps, keyof $Props> & $Props;
+
+export default class ContextMenuOption extends SvelteComponentTyped<
+  ContextMenuOptionProps,
+  {
+    keydown: WindowEventMap["keydown"];
+    mouseenter: WindowEventMap["mouseenter"];
+    mouseleave: WindowEventMap["mouseleave"];
+    click: CustomEvent<null>;
+  },
+  { default: {}; icon: {}; labelText: {}; shortcutText: {} }
+> {}

package/types/ContextMenu/ContextMenuRadioGroup.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { SvelteComponentTyped } from "svelte";
+
+export type ContextMenuRadioGroupProps = {
+  /**
+   * Set the selected radio group id
+   * @default ""
+   */
+  selectedId?: string;
+
+  /**
+   * Specify the label text
+   * @default ""
+   */
+  labelText?: string;
+};
+
+export default class ContextMenuRadioGroup extends SvelteComponentTyped<
+  ContextMenuRadioGroupProps,
+  Record<string, any>,
+  { default: {} }
+> {}

package/types/CopyButton/CopyButton.svelte.d.ts

@@ -0,0 +1,50 @@
+import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
+
+type $RestProps = SvelteHTMLElements["button"];
+
+type $Props = {
+  /**
+   * Set the feedback text shown after clicking the button
+   * @default "Copied!"
+   */
+  feedback?: string;
+
+  /**
+   * Set the timeout duration (ms) to display feedback text
+   * @default 2000
+   */
+  feedbackTimeout?: number;
+
+  /**
+   * Set the title and ARIA label for the copy button
+   * @default "Copy to clipboard"
+   */
+  iconDescription?: string;
+
+  /**
+   * Specify the text to copy
+   * @default undefined
+   */
+  text: string;
+
+  /**
+   * Override the default copy behavior of using the navigator.clipboard.writeText API to copy text
+   * @default async (text) => { try { await navigator.clipboard.writeText(text); } catch (e) { console.log(e); } }
+   */
+  copy?: (text: string) => void;
+
+  [key: `data-${string}`]: any;
+};
+
+export type CopyButtonProps = Omit<$RestProps, keyof $Props> & $Props;
+
+export default class CopyButton extends SvelteComponentTyped<
+  CopyButtonProps,
+  {
+    click: WindowEventMap["click"];
+    animationend: WindowEventMap["animationend"];
+    copy: CustomEvent<null>;
+  },
+  {}
+> {}

package/types/DataTable/DataTable.svelte.d.ts

@@ -0,0 +1,238 @@
+import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
+
+export type DataTableKey<Row = DataTableRow> =
+  import("./DataTableTypes.d.ts").PropertyPath<Row>;
+
+export type DataTableValue = any;
+
+export interface DataTableEmptyHeader<Row = DataTableRow> {
+  key: DataTableKey<Row> | (string & {});
+  empty: boolean;
+  display?: (item: DataTableValue, row: Row) => DataTableValue;
+  sort?: false | ((a: DataTableValue, b: DataTableValue) => number);
+  columnMenu?: boolean;
+  width?: string;
+  minWidth?: string;
+}
+
+export interface DataTableNonEmptyHeader<Row = DataTableRow> {
+  key: DataTableKey<Row>;
+  value: DataTableValue;
+  display?: (item: DataTableValue, row: Row) => DataTableValue;
+  sort?: false | ((a: DataTableValue, b: DataTableValue) => number);
+  columnMenu?: boolean;
+  width?: string;
+  minWidth?: string;
+}
+
+export type DataTableHeader<Row = DataTableRow> =
+  | DataTableNonEmptyHeader<Row>
+  | DataTableEmptyHeader<Row>;
+
+export interface DataTableRow {
+  id: any;
+  [key: string]: DataTableValue;
+}
+
+export type DataTableRowId = any;
+
+export interface DataTableCell<Row = DataTableRow> {
+  key: DataTableKey<Row> | (string & {});
+  value: DataTableValue;
+  display?: (item: DataTableValue, row: DataTableRow) => DataTableValue;
+}
+
+type $RestProps = SvelteHTMLElements["div"];
+
+type $Props<Row> = {
+  /**
+   * Specify the data table headers
+   * @default []
+   */
+  headers?: ReadonlyArray<DataTableHeader<Row>>;
+
+  /**
+   * Specify the rows the data table should render
+   * keys defined in `headers` are used for the row ids
+   * @default []
+   */
+  rows?: ReadonlyArray<Row>;
+
+  /**
+   * Set the size of the data table
+   * @default undefined
+   */
+  size?: "compact" | "short" | "medium" | "tall";
+
+  /**
+   * Specify the title of the data table
+   * @default ""
+   */
+  title?: string;
+
+  /**
+   * Specify the description of the data table
+   * @default ""
+   */
+  description?: string;
+
+  /**
+   * Specify a name attribute for the input elements
+   * in a selectable data table (radio or checkbox).
+   * When the table is inside a form, this name will
+   * be included in the form data on submit.
+   * @default "ccs-" + Math.random().toString(36)
+   */
+  inputName?: string;
+
+  /**
+   * Set to `true` to use zebra styles
+   * @default false
+   */
+  zebra?: boolean;
+
+  /**
+   * Set to `true` for the sortable variant
+   * @default false
+   */
+  sortable?: boolean;
+
+  /**
+   * Specify the header key to sort by
+   * @default null
+   */
+  sortKey?: DataTableKey<Row>;
+
+  /**
+   * Specify the sort direction
+   * @default "none"
+   */
+  sortDirection?: "none" | "ascending" | "descending";
+
+  /**
+   * 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?: ReadonlyArray<DataTableRowId>;
+
+  /**
+   * Specify the ids for rows that should not be expandable
+   * @default []
+   */
+  nonExpandableRowIds?: ReadonlyArray<DataTableRowId>;
+
+  /**
+   * 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?: ReadonlyArray<DataTableRowId>;
+
+  /**
+   * Specify the ids of rows that should not be selectable
+   * @default []
+   */
+  nonSelectableRowIds?: ReadonlyArray<DataTableRowId>;
+
+  /**
+   * Set to `true` to enable a sticky header
+   * @default false
+   */
+  stickyHeader?: boolean;
+
+  /**
+   * Set to `true` to use static width
+   * @default false
+   */
+  useStaticWidth?: boolean;
+
+  /**
+   * Specify the number of items to display in a page
+   * @default 0
+   */
+  pageSize?: number;
+
+  /**
+   * Set to `number` to set current page
+   * @default 0
+   */
+  page?: number;
+
+  [key: `data-${string}`]: any;
+};
+
+export type DataTableProps<Row> = Omit<$RestProps, keyof $Props<Row>> &
+  $Props<Row>;
+
+export default class DataTable<
+  Row extends DataTableRow = DataTableRow,
+> extends SvelteComponentTyped<
+  DataTableProps<Row>,
+  {
+    click: CustomEvent<{
+      header?: DataTableHeader<Row>;
+      row?: Row;
+      cell?: DataTableCell<Row>;
+    }>;
+    ["click:header--expand"]: CustomEvent<{ expanded: boolean }>;
+    ["click:header"]: CustomEvent<{
+      header: DataTableHeader<Row>;
+      sortDirection?: "ascending" | "descending" | "none";
+    }>;
+    ["click:header--select"]: CustomEvent<{
+      indeterminate: boolean;
+      selected: boolean;
+    }>;
+    ["click:row"]: CustomEvent<Row>;
+    ["mouseenter:row"]: CustomEvent<Row>;
+    ["mouseleave:row"]: CustomEvent<Row>;
+    ["click:row--expand"]: CustomEvent<{ expanded: boolean; row: Row }>;
+    ["click:row--select"]: CustomEvent<{ selected: boolean; row: Row }>;
+    ["click:cell"]: CustomEvent<DataTableCell<Row>>;
+  },
+  {
+    default: {};
+    cell: {
+      row: Row;
+      cell: DataTableCell<Row>;
+      rowIndex: number;
+      cellIndex: number;
+    };
+    ["cell-header"]: { header: DataTableNonEmptyHeader };
+    description: {};
+    ["expanded-row"]: { row: Row };
+    title: {};
+  }
+> {}

package/types/DataTable/DataTableSkeleton.svelte.d.ts

@@ -0,0 +1,67 @@
+import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
+
+import type { DataTableHeader } from "./DataTable.svelte";
+
+type $RestProps = SvelteHTMLElements["div"];
+
+type $Props = {
+  /**
+   * Specify the number of columns
+   * Superseded by `headers` if `headers` is a non-empty array
+   * @default 5
+   */
+  columns?: number;
+
+  /**
+   * Specify the number of rows
+   * @default 5
+   */
+  rows?: number;
+
+  /**
+   * Set the size of the data table
+   * @default undefined
+   */
+  size?: "compact" | "short" | "tall";
+
+  /**
+   * Set to `true` to apply zebra styles to the datatable rows
+   * @default false
+   */
+  zebra?: boolean;
+
+  /**
+   * Set to `false` to hide the header
+   * @default true
+   */
+  showHeader?: boolean;
+
+  /**
+   * Set the column headers
+   * Supersedes `columns` if value is a non-empty array
+   * @default []
+   */
+  headers?: ReadonlyArray<string | Partial<DataTableHeader>>;
+
+  /**
+   * Set to `false` to hide the toolbar
+   * @default true
+   */
+  showToolbar?: boolean;
+
+  [key: `data-${string}`]: any;
+};
+
+export type DataTableSkeletonProps = Omit<$RestProps, keyof $Props> & $Props;
+
+export default class DataTableSkeleton extends SvelteComponentTyped<
+  DataTableSkeletonProps,
+  {
+    click: WindowEventMap["click"];
+    mouseover: WindowEventMap["mouseover"];
+    mouseenter: WindowEventMap["mouseenter"];
+    mouseleave: WindowEventMap["mouseleave"];
+  },
+  {}
+> {}

package/types/DataTable/DataTableTypes.d.ts

@@ -0,0 +1,18 @@
+type PathDepth = [never, 0, 1, 2, ...0[]];
+
+type Join<K, P> = K extends string | number
+  ? P extends string | number
+    ? `${K}${"" extends P ? "" : "."}${P}`
+    : never
+  : never;
+
+// For performance, the maximum traversal depth is 10.
+export type PropertyPath<T, D extends number = 10> = [D] extends [never]
+  ? never
+  : T extends object
+    ? {
+        [K in keyof T]-?: K extends string | number
+          ? `${K}` | Join<K, PropertyPath<T[K], PathDepth[D]>>
+          : never;
+      }[keyof T]
+    : "";

package/types/DataTable/Table.svelte.d.ts

@@ -0,0 +1,52 @@
+import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
+
+type $RestProps = SvelteHTMLElements["section"];
+
+type $Props = {
+  /**
+   * Set the size of the table
+   * @default undefined
+   */
+  size?: "compact" | "short" | "medium" | "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 sortable variant
+   * @default false
+   */
+  sortable?: boolean;
+
+  /**
+   * Set to `true` to enable a sticky header
+   * @default false
+   */
+  stickyHeader?: boolean;
+
+  /**
+   * Set the style attribute on the `table` element
+   * @default undefined
+   */
+  tableStyle?: string;
+
+  [key: `data-${string}`]: any;
+};
+
+export type TableProps = Omit<$RestProps, keyof $Props> & $Props;
+
+export default class Table extends SvelteComponentTyped<
+  TableProps,
+  Record<string, any>,
+  { default: {} }
+> {}

package/types/DataTable/TableBody.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
+
+type $RestProps = SvelteHTMLElements["tbody"];
+
+type $Props = {
+  [key: `data-${string}`]: any;
+};
+
+export type TableBodyProps = Omit<$RestProps, keyof $Props> & $Props;
+
+export default class TableBody extends SvelteComponentTyped<
+  TableBodyProps,
+  Record<string, any>,
+  { default: {} }
+> {}

package/types/DataTable/TableCell.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
+
+type $RestProps = SvelteHTMLElements["td"];
+
+type $Props = {
+  [key: `data-${string}`]: any;
+};
+
+export type TableCellProps = Omit<$RestProps, keyof $Props> & $Props;
+
+export default class TableCell extends SvelteComponentTyped<
+  TableCellProps,
+  {
+    click: WindowEventMap["click"];
+    mouseover: WindowEventMap["mouseover"];
+    mouseenter: WindowEventMap["mouseenter"];
+    mouseleave: WindowEventMap["mouseleave"];
+  },
+  { default: {} }
+> {}

package/types/DataTable/TableContainer.svelte.d.ts

@@ -0,0 +1,40 @@
+import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
+
+type $RestProps = SvelteHTMLElements["div"];
+
+type $Props = {
+  /**
+   * 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;
+
+  /**
+   * Set to `true` to use static width
+   * @default false
+   */
+  useStaticWidth?: boolean;
+
+  [key: `data-${string}`]: any;
+};
+
+export type TableContainerProps = Omit<$RestProps, keyof $Props> & $Props;
+
+export default class TableContainer extends SvelteComponentTyped<
+  TableContainerProps,
+  Record<string, any>,
+  { default: {} }
+> {}