@ifloppy/maxcraftmc-ui-svelte 0.1.0

package/src/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/src/DataTable/Table.svelte

@@ -0,0 +1,60 @@
+<script>
+  /**
+   * Set the size of the table
+   * @type {"compact" | "short" | "medium" | "tall"}
+   */
+  export let size = undefined;
+
+  /** Set to `true` to use zebra styles */
+  export let zebra = false;
+
+  /** Set to `true` to use static width */
+  export let useStaticWidth = false;
+
+  /** Set to `true` for the sortable variant */
+  export let sortable = false;
+
+  /** Set to `true` to enable a sticky header */
+  export let stickyHeader = false;
+
+  /**
+   * Set the style attribute on the `table` element
+   * @type {string}
+   */
+  export let tableStyle = undefined;
+</script>
+
+{#if stickyHeader}
+  <section class:bx--data-table_inner-container={true} {...$$restProps}>
+    <table
+      class:bx--data-table={true}
+      class:bx--data-table--compact={size === "compact"}
+      class:bx--data-table--short={size === "short"}
+      class:bx--data-table--tall={size === "tall"}
+      class:bx--data-table--md={size === "medium"}
+      class:bx--data-table--sort={sortable}
+      class:bx--data-table--zebra={zebra}
+      class:bx--data-table--static={useStaticWidth}
+      class:bx--data-table--sticky-header={stickyHeader}
+      style={tableStyle}
+    >
+      <slot />
+    </table>
+  </section>
+{:else}
+  <table
+    class:bx--data-table={true}
+    class:bx--data-table--compact={size === "compact"}
+    class:bx--data-table--short={size === "short"}
+    class:bx--data-table--tall={size === "tall"}
+    class:bx--data-table--md={size === "medium"}
+    class:bx--data-table--sort={sortable}
+    class:bx--data-table--zebra={zebra}
+    class:bx--data-table--static={useStaticWidth}
+    class:bx--data-table--sticky-header={stickyHeader}
+    {...$$restProps}
+    style={tableStyle}
+  >
+    <slot />
+  </table>
+{/if}

package/src/DataTable/TableBody.svelte

@@ -0,0 +1,3 @@
+<tbody aria-live="polite" {...$$restProps}>
+  <slot />
+</tbody>

package/src/DataTable/TableCell.svelte

@@ -0,0 +1,4 @@
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+<td {...$$restProps} on:click on:mouseover on:mouseenter on:mouseleave>
+  <slot />
+</td>

package/src/DataTable/TableContainer.svelte

@@ -0,0 +1,28 @@
+<script>
+  /** Specify the title of the data table */
+  export let title = "";
+
+  /** Specify the description of the data table */
+  export let description = "";
+
+  /** Set to `true` to enable a sticky header */
+  export let stickyHeader = false;
+
+  /** Set to `true` to use static width */
+  export let useStaticWidth = false;
+</script>
+
+<div
+  class:bx--data-table-container={true}
+  class:bx--data-table-container--static={useStaticWidth}
+  class:bx--data-table--max-width={stickyHeader}
+  {...$$restProps}
+>
+  {#if title}
+    <div class:bx--data-table-header={true}>
+      <h4 class:bx--data-table-header__title={true}>{title}</h4>
+      <p class:bx--data-table-header__description={true}>{description}</p>
+    </div>
+  {/if}
+  <slot />
+</div>

package/src/DataTable/TableHead.svelte

@@ -0,0 +1,5 @@
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+<thead {...$$restProps} on:click on:mouseover on:mouseenter on:mouseleave>
+  <slot />
+</thead>

package/src/DataTable/TableHeader.svelte

@@ -0,0 +1,76 @@
+<script>
+  /** Set to `true` for the sortable variant */
+  export let sortable = false;
+
+  /**
+   * Specify the sort direction
+   * @type {"none" | "ascending" | "descending"}
+   */
+  export let sortDirection = "none";
+
+  /** Set to `true` if the column sorting */
+  export let active = false;
+
+  /** Specify the `scope` attribute */
+  export let scope = "col";
+
+  /**
+   * Override the default id translations
+   * @type {() => string}
+   */
+  export let translateWithId = () => "";
+
+  /** Set an id for the top-level element */
+  export let id = "ccs-" + Math.random().toString(36);
+
+  import ArrowUp from "../icons/ArrowUp.svelte";
+  import ArrowsVertical from "../icons/ArrowsVertical.svelte";
+
+  // TODO: translate with id
+  $: ariaLabel = translateWithId();
+</script>
+
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+{#if sortable}
+  <th
+    aria-sort={active ? sortDirection : "none"}
+    {scope}
+    data-header={id}
+    {...$$restProps}
+    on:mouseover
+    on:mouseenter
+    on:mouseleave
+  >
+    <button
+      type="button"
+      class:bx--table-sort={true}
+      class:bx--table-sort--active={active}
+      class:bx--table-sort--ascending={active && sortDirection === "descending"}
+      on:click
+    >
+      <div class:bx--table-header-label={true}>
+        <slot />
+      </div>
+      <ArrowUp size={20} aria-label={ariaLabel} class="bx--table-sort__icon" />
+      <ArrowsVertical
+        size={20}
+        aria-label={ariaLabel}
+        class="bx--table-sort__icon-unsorted"
+      />
+    </button>
+  </th>
+{:else}
+  <th
+    {scope}
+    data-header={id}
+    {...$$restProps}
+    on:click
+    on:mouseover
+    on:mouseenter
+    on:mouseleave
+  >
+    <div class:bx--table-header-label={true}>
+      <slot />
+    </div>
+  </th>
+{/if}

package/src/DataTable/TableRow.svelte

@@ -0,0 +1,4 @@
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+<tr {...$$restProps} on:click on:mouseover on:mouseenter on:mouseleave>
+  <slot />
+</tr>

package/src/DataTable/Toolbar.svelte

@@ -0,0 +1,34 @@
+<script>
+  /**
+   * Specify the toolbar size
+   * @type {"sm" | "default"}
+   */
+  export let size = "default";
+
+  import { setContext } from "svelte";
+  import { writable } from "svelte/store";
+
+  let ref = null;
+
+  const overflowVisible = writable(false);
+
+  setContext("Toolbar", {
+    overflowVisible,
+    setOverflowVisible: (visible) => {
+      overflowVisible.set(visible);
+      if (ref) ref.style.overflow = visible ? "visible" : "inherit";
+    },
+  });
+</script>
+
+<section
+  bind:this={ref}
+  aria-label="data table toolbar"
+  class:bx--table-toolbar={true}
+  class:bx--table-toolbar--small={size === "sm"}
+  class:bx--table-toolbar--normal={size === "default"}
+  style:z-index={1}
+  {...$$restProps}
+>
+  <slot />
+</section>

package/src/DataTable/ToolbarBatchActions.svelte

@@ -0,0 +1,99 @@
+<script>
+  /**
+   * @event {null} cancel
+   */
+
+  /**
+   * Override the total items selected text
+   * @type {(totalSelected: number) => string}
+   */
+  export let formatTotalSelected = (totalSelected) =>
+    `${totalSelected} item${totalSelected === 1 ? "" : "s"} selected`;
+
+  /**
+   * Use a boolean to show or hide the toolbar
+   * @type {undefined | boolean}
+   */
+  export let active = undefined;
+
+  import {
+    onMount,
+    getContext,
+    createEventDispatcher,
+    afterUpdate,
+  } from "svelte";
+
+  import Button from "../Button/Button.svelte";
+
+  let batchSelectedIds = [];
+  let prevActive;
+
+  const dispatch = createEventDispatcher();
+
+  const ctx = getContext("DataTable");
+
+  function cancel() {
+    const shouldContinue = dispatch("cancel", null, { cancelable: true });
+
+    if (shouldContinue) {
+      ctx.resetSelectedRowIds();
+    }
+  }
+
+  $: showActions = batchSelectedIds.length > 0 || active;
+  $: {
+    if (prevActive !== active && active === false) {
+      showActions = false;
+    }
+
+    prevActive = active;
+  }
+
+  const unsubscribe = ctx.batchSelectedIds.subscribe((value) => {
+    batchSelectedIds = value;
+  });
+
+  let overflowVisible = false;
+
+  const ctxToolbar = getContext("Toolbar");
+  const unsubscribeOverflow = ctxToolbar.overflowVisible.subscribe((value) => {
+    overflowVisible = value;
+  });
+
+  onMount(() => {
+    return () => {
+      unsubscribe();
+      unsubscribeOverflow();
+    };
+  });
+
+  afterUpdate(() => {
+    if (active === false && showActions) {
+      active = true;
+    }
+  });
+</script>
+
+{#if !overflowVisible}
+  <div
+    class:bx--batch-actions={true}
+    class:bx--batch-actions--active={showActions}
+    {...$$restProps}
+  >
+    <div class:bx--batch-summary={true}>
+      <p class:bx--batch-summary__para={true}>
+        <span> {formatTotalSelected(batchSelectedIds.length)} </span>
+      </p>
+    </div>
+    <div class:bx--action-list={true}>
+      <slot />
+      <Button
+        class="bx--batch-summary__cancel"
+        tabindex={showActions ? "0" : "-1"}
+        on:click={cancel}
+      >
+        <slot name="cancel">Cancel</slot>
+      </Button>
+    </div>
+  </div>
+{/if}

package/src/DataTable/ToolbarContent.svelte

@@ -0,0 +1,3 @@
+<div class:bx--toolbar-content={true}>
+  <slot />
+</div>

package/src/DataTable/ToolbarMenu.svelte

@@ -0,0 +1,23 @@
+<script>
+  /** @extends {"../OverflowMenu/OverflowMenu.svelte"} OverflowMenuProps */
+
+  import { getContext } from "svelte";
+  import Settings from "../icons/Settings.svelte";
+  import OverflowMenu from "../OverflowMenu/OverflowMenu.svelte";
+
+  const ctx = getContext("Toolbar") ?? {};
+
+  let menuRef = null;
+
+  $: ctx.setOverflowVisible?.(menuRef != null);
+</script>
+
+<OverflowMenu
+  bind:menuRef
+  icon={Settings}
+  {...$$restProps}
+  class="bx--toolbar-action bx--overflow-menu {$$restProps.class}"
+  flipped
+>
+  <slot />
+</OverflowMenu>

package/src/DataTable/ToolbarMenuItem.svelte

@@ -0,0 +1,9 @@
+<script>
+  /** @extends {"../OverflowMenu/OverflowMenuItem.svelte"} OverflowMenuItemProps */
+
+  import OverflowMenuItem from "../OverflowMenu/OverflowMenuItem.svelte";
+</script>
+
+<OverflowMenuItem {...$$restProps} on:click on:keydown>
+  <slot />
+</OverflowMenuItem>

package/src/DataTable/ToolbarSearch.svelte

@@ -0,0 +1,122 @@
+<script>
+  /**
+   * @restProps {input}
+   * @event {null} clear
+   */
+
+  /**
+   * Specify the value of the search input
+   * @type {number | string}
+   */
+  export let value = "";
+
+  /** Set to `true` to expand the search bar */
+  export let expanded = false;
+
+  /** Set to `true` to keep the search bar expanded */
+  export let persistent = false;
+
+  /** Set to `true` to disable the search bar */
+  export let disabled = false;
+
+  /**
+   * Set to `true` to filter table rows using the search value.
+   *
+   * If `true`, the default search excludes `id`, `cells` fields and
+   * only does a basic comparison on string and number type cell values.
+   *
+   * To implement your own client-side filtering, pass a function
+   * that accepts a row and value and returns a boolean.
+   * @type {boolean | ((row: import("./DataTable.svelte").DataTableRow, value: number | string) => boolean)}
+   */
+  export let shouldFilterRows = false;
+
+  /**
+   * The filtered row ids
+   * @type {ReadonlyArray<import("./DataTable.svelte").DataTableRowId>}
+   */
+  export let filteredRowIds = [];
+
+  /** Specify the tabindex */
+  export let tabindex = "0";
+
+  /**
+   * Obtain a reference to the input HTML element
+   * @type {null | HTMLInputElement}
+   */
+  export let ref = null;
+
+  import { tick, getContext, afterUpdate, onMount } from "svelte";
+  import Search from "../Search/Search.svelte";
+
+  const ctx = getContext("DataTable") ?? {};
+
+  let rows = null;
+  let unsubscribe = null;
+
+  $: if (shouldFilterRows) {
+    unsubscribe = ctx?.tableRows.subscribe((tableRows) => {
+      // Only update if the rows have actually changed.
+      // This approach works in both Svelte 4 and Svelte 5.
+      if (JSON.stringify(tableRows) !== JSON.stringify(rows)) {
+        rows = tableRows;
+      }
+    });
+  } else {
+    rows = null;
+  }
+
+  onMount(() => {
+    return () => {
+      unsubscribe?.();
+    };
+  });
+
+  afterUpdate(() => {
+    // Only filter rows in a callback to avoid an infinite update loop.
+    if (rows !== null) {
+      filteredRowIds = ctx?.filterRows(value, shouldFilterRows);
+    }
+  });
+
+  async function expandSearch() {
+    await tick();
+    if (disabled || persistent || expanded) return;
+    expanded = true;
+    await tick();
+    ref.focus();
+  }
+
+  $: expanded = !!value.length;
+  $: classes = [
+    expanded && "bx--toolbar-search-container-active",
+    persistent
+      ? "bx--toolbar-search-container-persistent"
+      : "bx--toolbar-search-container-expandable",
+    disabled && "bx--toolbar-search-container-disabled",
+  ]
+    .filter(Boolean)
+    .join(" ");
+</script>
+
+<Search
+  {tabindex}
+  {disabled}
+  {...$$restProps}
+  searchClass="{classes} {$$restProps.class}"
+  bind:ref
+  bind:value
+  on:clear
+  on:clear={expandSearch}
+  on:change
+  on:input
+  on:focus
+  on:focus={expandSearch}
+  on:blur
+  on:blur={() => {
+    expanded = !persistent && !!value.length;
+  }}
+  on:keyup
+  on:keydown
+  on:paste
+/>

package/src/DataTable/index.js

@@ -0,0 +1,15 @@
+export { default as DataTable } from "./DataTable.svelte";
+export { default as DataTableSkeleton } from "./DataTableSkeleton.svelte";
+export { default as Table } from "./Table.svelte";
+export { default as TableBody } from "./TableBody.svelte";
+export { default as TableCell } from "./TableCell.svelte";
+export { default as TableContainer } from "./TableContainer.svelte";
+export { default as TableHead } from "./TableHead.svelte";
+export { default as TableHeader } from "./TableHeader.svelte";
+export { default as TableRow } from "./TableRow.svelte";
+export { default as Toolbar } from "./Toolbar.svelte";
+export { default as ToolbarContent } from "./ToolbarContent.svelte";
+export { default as ToolbarSearch } from "./ToolbarSearch.svelte";
+export { default as ToolbarBatchActions } from "./ToolbarBatchActions.svelte";
+export { default as ToolbarMenu } from "./ToolbarMenu.svelte";
+export { default as ToolbarMenuItem } from "./ToolbarMenuItem.svelte";