@ifloppy/maxcraftmc-ui-svelte 0.1.0

package/src/OverflowMenu/OverflowMenu.svelte

@@ -0,0 +1,259 @@
+<script>
+  /**
+   * @event {null | { index: number; text: string; }} close
+   */
+
+  /**
+   * Specify the size of the overflow menu
+   * @type {"sm" | "xl"}
+   */
+  export let size = undefined;
+
+  /**
+   * Specify the direction of the overflow menu relative to the button
+   * @type {"top" | "bottom"}
+   */
+  export let direction = "bottom";
+
+  /** Set to `true` to open the menu */
+  export let open = false;
+
+  /** Set to `true` to enable the light variant */
+  export let light = false;
+
+  /** Set to `true` to flip the menu relative to the button */
+  export let flipped = false;
+
+  /**
+   * Specify the menu options class
+   * @type {string}
+   */
+  export let menuOptionsClass = undefined;
+
+  /**
+   * Specify the icon to render.
+   * Defaults to `<OverflowMenuVertical />`
+   * @type {any}
+   */
+  export let icon = OverflowMenuVertical;
+
+  /**
+   * Specify the icon class
+   * @type {string}
+   */
+  export let iconClass = undefined;
+
+  /** Specify the ARIA label for the icon */
+  export let iconDescription = "Open and close list of options";
+
+  /** Set an id for the button element */
+  export let id = "ccs-" + Math.random().toString(36);
+
+  /** Obtain a reference to the trigger button element */
+  export let buttonRef = null;
+
+  /** Obtain a reference to the overflow menu element */
+  export let menuRef = null;
+
+  import {
+    createEventDispatcher,
+    getContext,
+    setContext,
+    afterUpdate,
+  } from "svelte";
+  import { writable } from "svelte/store";
+  import OverflowMenuVertical from "../icons/OverflowMenuVertical.svelte";
+  import OverflowMenuHorizontal from "../icons/OverflowMenuHorizontal.svelte";
+
+  const ctxBreadcrumbItem = getContext("BreadcrumbItem");
+  const dispatch = createEventDispatcher();
+  const items = writable([]);
+  const currentId = writable(undefined);
+  const focusedId = writable(undefined);
+  const currentIndex = writable(-1);
+
+  let buttonWidth = undefined;
+  let onMountAfterUpdate = true;
+
+  $: if (ctxBreadcrumbItem) {
+    icon = OverflowMenuHorizontal;
+  }
+
+  setContext("OverflowMenu", {
+    focusedId,
+    items,
+    add: ({ id, text, primaryFocus, disabled }) => {
+      items.update((_) => {
+        if (primaryFocus) {
+          currentIndex.set(_.length);
+        }
+
+        return [..._, { id, text, primaryFocus, disabled, index: _.length }];
+      });
+    },
+    update: (id, item) => {
+      currentId.set(id);
+
+      dispatch("close", { index: item.index, text: item.text });
+      open = false;
+    },
+    change: (direction) => {
+      let index = $currentIndex + direction;
+
+      if (index < 0) {
+        index = $items.length - 1;
+      } else if (index >= $items.length) {
+        index = 0;
+      }
+
+      let disabled = $items[index].disabled;
+
+      while (disabled) {
+        index = index + direction;
+
+        if (index < 0) {
+          index = $items.length - 1;
+        } else if (index >= $items.length) {
+          index = 0;
+        }
+
+        disabled = $items[index].disabled;
+      }
+
+      currentIndex.set(index);
+    },
+  });
+
+  afterUpdate(() => {
+    if (open) {
+      const width = buttonRef.offsetWidth;
+      const height = buttonRef.offsetHeight;
+
+      buttonWidth = width;
+
+      if (!onMountAfterUpdate && $currentIndex < 0) {
+        menuRef.focus();
+      }
+
+      if (flipped) {
+        menuRef.style.left = "auto";
+        menuRef.style.right = 0;
+      }
+
+      if (direction === "top") {
+        menuRef.style.top = "auto";
+        menuRef.style.bottom = height + "px";
+      } else if (direction === "bottom") {
+        menuRef.style.top = height + "px";
+      }
+
+      if (ctxBreadcrumbItem) {
+        menuRef.style.top = height + 10 + "px";
+        menuRef.style.left = -11 + "px";
+      }
+    }
+
+    if (!open) {
+      items.set([]);
+      currentId.set(undefined);
+      currentIndex.set(0);
+    }
+
+    onMountAfterUpdate = false;
+  });
+
+  $: menuId = `menu-${id}`;
+  $: ariaLabel = $$props["aria-label"] || "menu";
+  $: if ($items[$currentIndex]) {
+    focusedId.set($items[$currentIndex].id);
+  }
+  $: styles = `<style>
+    #${id} .bx--overflow-menu-options.bx--overflow-menu-options:after {
+      width: ${buttonWidth ? buttonWidth + "px" : "2rem"};
+    }
+  <\/style>`;
+</script>
+
+<svelte:head>
+  {@html styles}
+</svelte:head>
+
+<svelte:window
+  on:click={({ target }) => {
+    if (buttonRef && buttonRef.contains(target)) return;
+    if (menuRef && !menuRef.contains(target)) {
+      dispatch("close");
+      open = false;
+    }
+  }}
+/>
+
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+<button
+  bind:this={buttonRef}
+  type="button"
+  aria-haspopup="true"
+  aria-expanded={open}
+  aria-label={ariaLabel}
+  aria-controls={open ? menuId : undefined}
+  {id}
+  class:bx--overflow-menu={true}
+  class:bx--overflow-menu--open={open}
+  class:bx--overflow-menu--light={light}
+  class:bx--overflow-menu--sm={size === "sm"}
+  class:bx--overflow-menu--xl={size === "xl"}
+  {...$$restProps}
+  on:click
+  on:click={({ target }) => {
+    if (!(menuRef && menuRef.contains(target))) {
+      open = !open;
+      if (!open) dispatch("close");
+    }
+  }}
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+  on:keydown
+  on:keydown={(e) => {
+    if (open) {
+      if (["ArrowDown", "ArrowLeft", "ArrowRight", "ArrowUp"].includes(e.key)) {
+        e.preventDefault();
+      } else if (e.key === "Escape") {
+        e.stopPropagation();
+        dispatch("close");
+        open = false;
+        buttonRef.focus();
+      }
+    }
+  }}
+>
+  <slot name="menu">
+    <svelte:component
+      this={icon}
+      aria-label={iconDescription}
+      title={iconDescription}
+      class="bx--overflow-menu__icon {iconClass}"
+    />
+  </slot>
+  {#if open}
+    <!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
+    <ul
+      bind:this={menuRef}
+      role="menu"
+      tabindex="-1"
+      id={menuId}
+      aria-label={ariaLabel}
+      data-floating-menu-direction={direction}
+      class:bx--overflow-menu-options={true}
+      class:bx--overflow-menu--flip={flipped}
+      class:bx--overflow-menu-options--open={open}
+      class:bx--overflow-menu-options--light={light}
+      class:bx--overflow-menu-options--sm={size === "sm"}
+      class:bx--overflow-menu-options--xl={size === "xl"}
+      class:bx--breadcrumb-menu-options={!!ctxBreadcrumbItem}
+      class={menuOptionsClass}
+    >
+      <slot />
+    </ul>
+  {/if}
+</button>

package/src/OverflowMenu/OverflowMenuItem.svelte

@@ -0,0 +1,117 @@
+<script>
+  /**
+   * Specify the item text.
+   * Alternatively, use the default slot
+   */
+  export let text = "Provide text";
+
+  /** Specify the `href` attribute if the item is a link */
+  export let href = "";
+
+  /** Set to `true` if the item should be focused when opening the menu */
+  export let primaryFocus = false;
+
+  /** Set to `true` to disable the item */
+  export let disabled = false;
+
+  /** Set to `true` to include a divider */
+  export let hasDivider = false;
+
+  /** Set to `true` to use the danger variant */
+  export let danger = false;
+
+  /** Set to `false` to omit the button `title` attribute */
+  export let requireTitle = true;
+
+  /** Set an id for the top-level element */
+  export let id = "ccs-" + Math.random().toString(36);
+
+  /** Obtain a reference to the HTML element */
+  export let ref = null;
+
+  import { getContext, afterUpdate } from "svelte";
+
+  const { focusedId, add, update, change, items } = getContext("OverflowMenu");
+
+  $: item = $items.find((_) => _.id === id);
+
+  add({ id, text, primaryFocus, disabled });
+
+  afterUpdate(() => {
+    if (ref && primaryFocus) {
+      ref.focus();
+    }
+  });
+
+  $: primaryFocus = $focusedId === id;
+  $: buttonProps = {
+    role: "menuitem",
+    tabindex: "-1",
+    class: "bx--overflow-menu-options__btn",
+    disabled: href ? undefined : disabled,
+    href: href ? href : undefined,
+    title: requireTitle ? ($$slots.default ? undefined : text) : undefined,
+  };
+</script>
+
+<li
+  role="none"
+  {id}
+  class:bx--overflow-menu-options__option={true}
+  class:bx--overflow-menu--divider={hasDivider}
+  class:bx--overflow-menu-options__option--danger={danger}
+  class:bx--overflow-menu-options__option--disabled={disabled}
+  {...$$restProps}
+>
+  {#if href}
+    <!-- svelte-ignore a11y-missing-attribute -->
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
+    <a
+      bind:this={ref}
+      {...buttonProps}
+      on:click
+      on:click={(e) => {
+        e.stopPropagation();
+        update(id, item);
+      }}
+      on:keydown
+      on:keydown={({ key }) => {
+        if (key === "ArrowDown") {
+          change(1);
+        } else if (key === "ArrowUp") {
+          change(-1);
+        }
+      }}
+    >
+      <slot>
+        <div class:bx--overflow-menu-options__option-content={true}>
+          {text}
+        </div>
+      </slot>
+    </a>
+  {:else}
+    <button
+      bind:this={ref}
+      {...buttonProps}
+      on:click
+      on:click={(e) => {
+        e.stopPropagation();
+        update(id, item);
+      }}
+      on:keydown
+      on:keydown={({ key }) => {
+        if (key === "ArrowDown") {
+          change(1);
+        } else if (key === "ArrowUp") {
+          change(-1);
+        }
+      }}
+    >
+      <slot>
+        <div class:bx--overflow-menu-options__option-content={true}>
+          {text}
+        </div>
+      </slot>
+    </button>
+  {/if}
+</li>

package/src/OverflowMenu/index.js

@@ -0,0 +1,2 @@
+export { default as OverflowMenu } from "./OverflowMenu.svelte";
+export { default as OverflowMenuItem } from "./OverflowMenuItem.svelte";

package/src/Pagination/Pagination.svelte

@@ -0,0 +1,216 @@
+<script>
+  /**
+   * @event {{ page?: number; pageSize?: number }} change - Dispatched after any user interaction
+   * @event {{ page: number; }} click:button--previous
+   * @event {{ page: number; }} click:button--next
+   * @event {{ pageSize: number; page: number; }} update
+   */
+
+  /** Specify the current page index */
+  export let page = 1;
+
+  /** Specify the total number of items */
+  export let totalItems = 0;
+
+  /**
+   * If `totalItems` is a large number, it can affect the
+   * rendering performance of this component since its value
+   * is used to calculate the number of pages in the native
+   * select dropdown. This value creates a small window of
+   * pages rendered around the current page. By default,
+   * a maximum of 1000 select items are rendered.
+   */
+  export let pageWindow = 1000;
+
+  /** Set to `true` to disable the pagination */
+  export let disabled = false;
+
+  /** Specify the forward button text */
+  export let forwardText = "Next page";
+
+  /** Specify the backward button text */
+  export let backwardText = "Previous page";
+
+  /** Specify the items per page text */
+  export let itemsPerPageText = "Items per page:";
+
+  /**
+   * Override the item text
+   * @type {(min: number, max: number) => string}
+   */
+  export let itemText = (min, max) =>
+    `${min.toLocaleString()}–${max.toLocaleString()} item${max === 1 ? "" : "s"}`;
+
+  /**
+   * Override the item range text
+   * @type {(min: number, max: number, total: number) => string}
+   */
+  export let itemRangeText = (min, max, total) =>
+    `${min.toLocaleString()}–${max.toLocaleString()} of ${total.toLocaleString()} item${max === 1 ? "" : "s"}`;
+
+  /** Set to `true` to disable the page input */
+  export let pageInputDisabled = false;
+
+  /** Set to `true` to disable the page size input */
+  export let pageSizeInputDisabled = false;
+
+  /** Specify the number of items to display in a page */
+  export let pageSize = 10;
+
+  /**
+   * Specify the available page sizes
+   * @type {ReadonlyArray<number>}
+   */
+  export let pageSizes = [10];
+
+  /** Set to `true` if the number of pages is unknown */
+  export let pagesUnknown = false;
+
+  /**
+   * Override the page text
+   * @type {(page: number) => string}
+   */
+  export let pageText = (page) => `page ${page.toLocaleString()}`;
+
+  /**
+   * Override the page range text
+   * @type {(current: number, total: number) => string}
+   */
+  export let pageRangeText = (current, total) =>
+    `of ${total.toLocaleString()} page${total === 1 ? "" : "s"}`;
+
+  /** Set an id for the top-level element */
+  export let id = "ccs-" + Math.random().toString(36);
+
+  import { afterUpdate, createEventDispatcher } from "svelte";
+  import CaretLeft from "../icons/CaretLeft.svelte";
+  import CaretRight from "../icons/CaretRight.svelte";
+  import Button from "../Button/Button.svelte";
+  import Select from "../Select/Select.svelte";
+  import SelectItem from "../Select/SelectItem.svelte";
+
+  const dispatch = createEventDispatcher();
+
+  /**
+   * Returns a subset of page numbers centered around the current page to prevent
+   * performance issues with large datasets. Creates a capped window of pages
+   * instead of potentially thousands, improving render speed and memory usage.
+   * @param {number} currentPage - The current page number
+   * @param {number} totalPages - Total number of pages
+   * @param {number} window - How many pages to show before/after current page
+   * @returns {number[]} Array of page numbers to display
+   */
+  function getWindowedPages(currentPage, totalPages, window) {
+    const start = Math.max(1, currentPage - window);
+    const end = Math.min(totalPages, currentPage + window);
+    return Array.from({ length: end - start + 1 }, (_, i) => start + i);
+  }
+
+  afterUpdate(() => {
+    if (page > totalPages) {
+      page = totalPages;
+    }
+  });
+
+  $: dispatch("update", { pageSize, page });
+  $: totalPages = Math.max(Math.ceil(totalItems / pageSize), 1);
+  $: selectItems = getWindowedPages(page, totalPages, pageWindow);
+  $: backButtonDisabled = disabled || page === 1;
+  $: forwardButtonDisabled = disabled || page === totalPages;
+</script>
+
+<div {id} class:bx--pagination={true} {...$$restProps}>
+  <div class:bx--pagination__left={true}>
+    {#if !pageSizeInputDisabled}
+      <label
+        id="bx--pagination-select-{id}-count-label"
+        for="bx--pagination-select-{id}"
+        class:bx--pagination__text={true}
+      >
+        {itemsPerPageText}
+      </label>
+      <Select
+        id="bx--pagination-select-{id}"
+        class="bx--select__item-count"
+        hideLabel
+        noLabel
+        inline
+        on:change={() => {
+          dispatch("change", { pageSize });
+        }}
+        bind:selected={pageSize}
+      >
+        {#each pageSizes as size, i (size)}
+          <SelectItem value={size} text={size.toString()} />
+        {/each}
+      </Select>
+    {/if}
+    <span class:bx--pagination__text={!pageSizeInputDisabled}>
+      {#if pagesUnknown}
+        {itemText(pageSize * (page - 1) + 1, page * pageSize)}
+      {:else}
+        {itemRangeText(
+          Math.min(pageSize * (page - 1) + 1, totalItems),
+          Math.min(page * pageSize, totalItems),
+          totalItems,
+        )}
+      {/if}
+    </span>
+  </div>
+  <div class:bx--pagination__right={true}>
+    {#if !pageInputDisabled}
+      <Select
+        id="bx--pagination-select-{id + 2}"
+        class="bx--select__page-number"
+        labelText="Page number, of {totalPages} pages"
+        inline
+        hideLabel
+        on:change={() => {
+          dispatch("change", { page });
+        }}
+        bind:selected={page}
+      >
+        {#each selectItems as size, i (size)}
+          <SelectItem value={size} text={size.toString()} />
+        {/each}
+      </Select>
+      <span class:bx--pagination__text={true}>
+        {#if pagesUnknown}
+          {pageText(page)}
+        {:else}{pageRangeText(page, totalPages)}{/if}
+      </span>
+    {/if}
+    <Button
+      kind="ghost"
+      tooltipAlignment="center"
+      tooltipPosition="top"
+      icon={CaretLeft}
+      iconDescription={backwardText}
+      disabled={backButtonDisabled}
+      class="bx--pagination__button bx--pagination__button--backward {backButtonDisabled
+        ? 'bx--pagination__button--no-index'
+        : ''}"
+      on:click={() => {
+        page--;
+        dispatch("click:button--previous", { page });
+        dispatch("change", { page });
+      }}
+    />
+    <Button
+      kind="ghost"
+      tooltipAlignment="end"
+      tooltipPosition="top"
+      icon={CaretRight}
+      iconDescription={forwardText}
+      disabled={forwardButtonDisabled}
+      class="bx--pagination__button bx--pagination__button--forward {forwardButtonDisabled
+        ? 'bx--pagination__button--no-index'
+        : ''}"
+      on:click={() => {
+        page++;
+        dispatch("click:button--next", { page });
+        dispatch("change", { page });
+      }}
+    />
+  </div>
+</div>

package/src/Pagination/PaginationSkeleton.svelte

@@ -0,0 +1,24 @@
+<script>
+  import SkeletonText from "../SkeletonText/SkeletonText.svelte";
+</script>
+
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
+  class:bx--pagination={true}
+  class:bx--skeleton={true}
+  {...$$restProps}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+>
+  <div class:bx--pagination__left={true}>
+    <SkeletonText width="70px" />
+    <SkeletonText width="35px" />
+    <SkeletonText width="105px" />
+  </div>
+  <div class:bx--pagination__right={true} class:bx--pagination--inline={true}>
+    <SkeletonText width="70px" />
+  </div>
+</div>

package/src/Pagination/index.js

@@ -0,0 +1,2 @@
+export { default as Pagination } from "./Pagination.svelte";
+export { default as PaginationSkeleton } from "./PaginationSkeleton.svelte";

package/src/PaginationNav/PaginationItem.svelte

@@ -0,0 +1,23 @@
+<script>
+  /** Specify the current page index */
+  export let page = 1;
+
+  /** Set to `true` to use the active state */
+  export let active = false;
+</script>
+
+<li class:bx--pagination-nav__list-item={true}>
+  <button
+    type="button"
+    data-page={page}
+    aria-current={active ? "page" : undefined}
+    class:bx--pagination-nav__page={true}
+    class:bx--pagination-nav__page--active={active}
+    on:click
+  >
+    <span class:bx--pagination-nav__accessibility-label={true}>
+      <slot />
+    </span>
+    {page}
+  </button>
+</li>