@ifloppy/maxcraftmc-ui-svelte 0.1.0

package/src/PaginationNav/PaginationNav.svelte

@@ -0,0 +1,190 @@
+<script>
+  /**
+   * @event {{ page: number; }} change - fires after every user interaction
+   * @event {{ page: number; }} click:button--previous
+   * @event {{ page: number; }} click:button--next
+   */
+
+  /** Specify the current page index */
+  export let page = 1;
+
+  /** Specify the total number of pages */
+  export let total = 10;
+
+  /** Specify the total number of pages to show */
+  export let shown = 10;
+
+  /** Set to `true` to loop the navigation */
+  export let loop = false;
+
+  /** Specify the forward button text */
+  export let forwardText = "Next page";
+
+  /** Specify the backward button text */
+  export let backwardText = "Previous page";
+
+  /**
+   * Set the position of the tooltip relative to the pagination buttons.
+   * @type {"top" | "right" | "bottom" | "left" | "outside" | "inside"}
+   */
+  export let tooltipPosition = "bottom";
+
+  import { createEventDispatcher } from "svelte";
+  import CaretLeft from "../icons/CaretLeft.svelte";
+  import CaretRight from "../icons/CaretRight.svelte";
+  import PaginationItem from "./PaginationItem.svelte";
+  import PaginationOverflow from "./PaginationOverflow.svelte";
+  import Button from "../Button/Button.svelte";
+
+  const dispatch = createEventDispatcher();
+  const MIN = 4;
+
+  // number of overflow pages near the beginning of the nav
+  let front = 0;
+
+  // number of overflow pages near the end of the nav
+  let back = 0;
+
+  // number of nav overflow or items that may appear
+  $: fit = shown >= MIN ? shown : MIN;
+  $: startOffset = fit <= MIN && page > 1 ? 0 : 1;
+  $: if (fit >= total) {
+    front = 0;
+    back = 0;
+  }
+  $: if (fit < total) {
+    const split = Math.ceil(fit / 2) - 1;
+
+    front = page - split;
+    back = total - page - (fit - split) + 2;
+
+    if (front <= 1) {
+      back -= front <= 0 ? Math.abs(front) + 1 : 0;
+      front = 0;
+    }
+
+    if (back <= 1) {
+      front -= back <= 0 ? Math.abs(back) + 1 : 0;
+      back = 0;
+    }
+  }
+
+  // all enumerable items to render in between
+  // overflow menus
+  $: items = Array.from({ length: total })
+    .map((e, i) => i)
+    .slice(startOffset + front, (back + 1) * -1);
+</script>
+
+<nav aria-label="pagination" class:bx--pagination-nav={true} {...$$restProps}>
+  <ul class:bx--pagination-nav__list={true}>
+    <li class:bx--pagination-nav__list-item={true}>
+      <Button
+        kind="ghost"
+        tooltipAlignment="center"
+        tooltipPosition={tooltipPosition === "inside"
+          ? "right"
+          : tooltipPosition === "outside"
+            ? "left"
+            : tooltipPosition}
+        iconDescription={backwardText}
+        disabled={!loop && page === 1}
+        icon={CaretLeft}
+        on:click={() => {
+          if (page <= 1) {
+            if (loop) page = total;
+          } else {
+            page--;
+          }
+          dispatch("click:button--previous", { page });
+          dispatch("change", { page });
+        }}
+      />
+    </li>
+    {#if fit > MIN || (fit <= MIN && page <= 1)}
+      <PaginationItem
+        page={1}
+        active={page === 1}
+        on:click={() => {
+          page = 1;
+          dispatch("change", { page });
+        }}
+      >
+        {page === 1 ? "Active, Page" : "Page"}
+      </PaginationItem>
+    {/if}
+    <PaginationOverflow
+      fromIndex={startOffset}
+      count={front}
+      on:select={({ detail }) => {
+        page = detail.index;
+        dispatch("change", { page });
+      }}
+    />
+    {#each items as item}
+      <PaginationItem
+        page={item + 1}
+        active={page === item + 1}
+        on:click={() => {
+          page = item + 1;
+          dispatch("change", { page });
+        }}
+      >
+        {page === item ? "Active, Page" : "Page"}
+      </PaginationItem>
+    {/each}
+    <PaginationOverflow
+      fromIndex={total - back - 1}
+      count={back}
+      on:select={({ detail }) => {
+        page = detail.index;
+        dispatch("change", { page });
+      }}
+    />
+    {#if total > 1}
+      <PaginationItem
+        page={total}
+        active={page === total}
+        on:click={() => {
+          page = total;
+          dispatch("change", { page });
+        }}
+      >
+        {page === total ? "Active, Page" : "Page"}
+      </PaginationItem>
+    {/if}
+    <li class:bx--pagination-nav__list-item={true}>
+      <Button
+        kind="ghost"
+        tooltipAlignment="center"
+        tooltipPosition={tooltipPosition === "inside"
+          ? "left"
+          : tooltipPosition === "outside"
+            ? "right"
+            : tooltipPosition}
+        iconDescription={forwardText}
+        disabled={!loop && page === total}
+        icon={CaretRight}
+        on:click={() => {
+          if (page >= total) {
+            if (loop) page = 1;
+          } else {
+            page++;
+          }
+          dispatch("click:button--next", { page });
+          dispatch("change", { page });
+        }}
+      />
+    </li>
+  </ul>
+  <div
+    aria-live="polite"
+    aria-atomic="true"
+    class:bx--pagination-nav__accessibility-label={true}
+  >
+    Page
+    {page + 1}
+    of
+    {total}
+  </div>
+</nav>

package/src/PaginationNav/PaginationOverflow.svelte

@@ -0,0 +1,56 @@
+<script>
+  /**
+   * @event {{ index: number; }} select
+   */
+
+  /** Specify the pivot start index */
+  export let fromIndex = 0;
+
+  /** Specify the pivot end index */
+  export let count = 0;
+
+  import { createEventDispatcher } from "svelte";
+  import OverflowMenuHorizontal from "../icons/OverflowMenuHorizontal.svelte";
+  import PaginationItem from "./PaginationItem.svelte";
+
+  const dispatch = createEventDispatcher();
+
+  let value = "";
+</script>
+
+{#if count > 1}
+  <li class:bx--pagination-nav__list-item={true}>
+    <div class:bx--pagination-nav__select={true}>
+      <!-- svelte-ignore a11y-no-onchange -->
+      <select
+        aria-label="Select Page number"
+        {value}
+        class:bx--pagination-nav__page={true}
+        class:bx--pagination-nav__page--select={true}
+        on:change={({ target }) => {
+          value = "";
+          dispatch("select", { index: Number(target.value) });
+        }}
+      >
+        <option value="" hidden></option>
+        {#each Array.from({ length: count }, (_, i) => i) as i}
+          <option value={fromIndex + i + 1} data-page={fromIndex + i + 1}>
+            {fromIndex + i + 1}
+          </option>
+        {/each}
+      </select>
+      <div class:bx--pagination-nav__select-icon-wrapper={true}>
+        <OverflowMenuHorizontal class="bx--pagination-nav__select-icon" />
+      </div>
+    </div>
+  </li>
+{:else if count === 1}
+  <PaginationItem
+    page={fromIndex + 1}
+    on:click={() => {
+      dispatch("select", { index: fromIndex });
+    }}
+  >
+    Page
+  </PaginationItem>
+{/if}

package/src/PaginationNav/index.js

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

package/src/Popover/Popover.svelte

@@ -0,0 +1,73 @@
+<script>
+  /**
+   * @event {{ target: HTMLElement; }} click:outside
+   */
+
+  /** Set to `true` to display the popover */
+  export let open = false;
+
+  /** Set to `true` to close the popover on an outside click */
+  export let closeOnOutsideClick = false;
+
+  /** Set to `true` render a caret */
+  export let caret = false;
+
+  /**
+   * Specify the alignment of the caret
+   * @type {"top" | "top-left" | "top-right" | "bottom" | "bottom-left" | "bottom-right" | "left" | "left-bottom" | "left-top" | "right" | "right-bottom" | "right-top"}
+   */
+  export let align = "top";
+
+  /** Set to `true` to enable the light variant */
+  export let light = false;
+
+  /** Set to `true` to enable the high contrast variant */
+  export let highContrast = false;
+
+  /** Set to `true` to use a relative position */
+  export let relative = false;
+
+  import { createEventDispatcher } from "svelte";
+
+  const dispatch = createEventDispatcher();
+
+  let ref = null;
+</script>
+
+<svelte:window
+  on:click={(e) => {
+    if (!open) return;
+    if (!ref.contains(e.target)) {
+      dispatch("click:outside", { target: e.target });
+      if (closeOnOutsideClick) open = false;
+    }
+  }}
+/>
+
+<div
+  bind:this={ref}
+  class:bx--popover={true}
+  class:bx--popover--caret={caret}
+  class:bx--popover--light={light}
+  class:bx--popover--high-contrast={highContrast}
+  class:bx--popover--top={align === "top"}
+  class:bx--popover--top-left={align === "top-left"}
+  class:bx--popover--top-right={align === "top-right"}
+  class:bx--popover--bottom={align === "bottom"}
+  class:bx--popover--bottom-left={align === "bottom-left"}
+  class:bx--popover--bottom-right={align === "bottom-right"}
+  class:bx--popover--left={align === "left"}
+  class:bx--popover--left-bottom={align === "left-bottom"}
+  class:bx--popover--left-top={align === "left-top"}
+  class:bx--popover--right={align === "right"}
+  class:bx--popover--right-bottom={align === "right-bottom"}
+  class:bx--popover--right-top={align === "right-top"}
+  class:bx--popover--open={open}
+  class:bx--popover--relative={relative}
+  style:position={relative ? "relative" : undefined}
+  {...$$restProps}
+>
+  <div class:bx--popover-contents={true}>
+    <slot />
+  </div>
+</div>

package/src/Popover/index.js

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

package/src/ProgressBar/ProgressBar.svelte

@@ -0,0 +1,110 @@
+<script>
+  /**
+   * Specify the current value
+   * @type {number}
+   */
+  export let value = undefined;
+
+  /** Specify the maximum value */
+  export let max = 100;
+
+  /**
+   * Specify the kind of progress bar
+   * @type {"default" | "inline" | "indented"}
+   */
+  export let kind = "default";
+
+  /**
+   * Specify the status
+   * @type {"active" | "finished" | "error"}
+   */
+  export let status = "active";
+
+  /**
+   * Specify the size
+   * @type {"sm" | "md"}
+   */
+  export let size = "md";
+
+  /** Specify the label text */
+  export let labelText = "";
+
+  /** Set to `true` to visually hide the label text */
+  export let hideLabel = false;
+
+  /** Specify the helper text */
+  export let helperText = "";
+
+  /** Set an id for the progress bar element */
+  export let id = "ccs-" + Math.random().toString(36);
+
+  import CheckmarkFilled from "../icons/CheckmarkFilled.svelte";
+  import ErrorFilled from "../icons/ErrorFilled.svelte";
+
+  const statusIcons = {
+    error: ErrorFilled,
+    finished: CheckmarkFilled,
+  };
+
+  let helperId = "ccs-" + Math.random().toString(36);
+
+  $: indeterminate = value === undefined && status === "active";
+  let capped;
+  $: {
+    if (status === "error" || value < 0) {
+      capped = 0;
+    } else if (value > max) {
+      capped = max;
+    } else {
+      capped = value;
+    }
+  }
+</script>
+
+<div
+  class:bx--progress-bar={true}
+  class:bx--progress-bar--indeterminate={indeterminate}
+  class:bx--progress-bar--big={size === "md"}
+  class:bx--progress-bar--small={size === "sm"}
+  class:bx--progress-bar--inline={kind === "inline"}
+  class:bx--progress-bar--indented={kind === "indented"}
+  class:bx--progress-bar--error={status === "error"}
+  class:bx--progress-bar--finished={status === "finished"}
+  {...$$restProps}
+>
+  <label
+    for={id}
+    class:bx--progress-bar__label={true}
+    class:bx--visually-hidden={hideLabel}
+  >
+    <slot name="labelText">
+      {labelText}
+    </slot>
+    {#if status === "error" || status === "finished"}
+      <svelte:component
+        this={statusIcons[status]}
+        class="bx--progress-bar__status-icon"
+      />
+    {/if}
+  </label>
+  <div
+    role="progressbar"
+    {id}
+    class:bx--progress-bar__track={true}
+    aria-busy={status === "active"}
+    aria-valuemin={indeterminate ? undefined : 0}
+    aria-valuemax={indeterminate ? undefined : max}
+    aria-valuenow={indeterminate ? undefined : capped}
+    aria-describedby={helperText ? helperId : null}
+  >
+    <div
+      class:bx--progress-bar__bar={true}
+      style:transform={status === "active" && `scaleX(${capped / max})`}
+    ></div>
+  </div>
+  {#if helperText}
+    <div id={helperId} class:bx--progress-bar__helper-text={true}>
+      {helperText}
+    </div>
+  {/if}
+</div>

package/src/ProgressBar/index.js

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

package/src/ProgressIndicator/ProgressIndicator.svelte

@@ -0,0 +1,79 @@
+<script>
+  /** Specify the current step index */
+  export let currentIndex = 0;
+
+  /** Set to `true` to use the vertical variant */
+  export let vertical = false;
+
+  /** Set to `true` to specify whether the progress steps should be split equally in size in the div */
+  export let spaceEqually = false;
+
+  /** Set to `true` to prevent `currentIndex` from updating */
+  export let preventChangeOnClick = false;
+
+  import { createEventDispatcher, setContext } from "svelte";
+  import { writable, derived } from "svelte/store";
+
+  const dispatch = createEventDispatcher();
+  const steps = writable([]);
+  const stepsById = derived(steps, (steps) =>
+    steps.reduce((a, c) => ({ ...a, [c.id]: c }), {}),
+  );
+  const preventChangeOnClickStore = writable(preventChangeOnClick);
+
+  setContext("ProgressIndicator", {
+    steps,
+    stepsById,
+    preventChangeOnClick: { subscribe: preventChangeOnClickStore.subscribe },
+    add: (step) => {
+      steps.update((_) => {
+        if (step.id in $stepsById) {
+          return _.map((_step) => {
+            if (_step.id === step.id) return { ..._step, ...step };
+            return _step;
+          });
+        }
+
+        return [
+          ..._,
+          {
+            ...step,
+            index: _.length,
+            current: _.length === currentIndex,
+            complete: step.complete,
+          },
+        ];
+      });
+    },
+    change: (index) => {
+      if (preventChangeOnClick) return;
+      currentIndex = index;
+
+      /** @event {number} change */
+      dispatch("change", index);
+    },
+  });
+
+  $: steps.update((_) =>
+    _.map((step, i) => ({
+      ...step,
+      current: i === currentIndex,
+    })),
+  );
+  $: preventChangeOnClickStore.set(preventChangeOnClick);
+</script>
+
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+<ul
+  class:bx--progress={true}
+  class:bx--progress--vertical={vertical}
+  class:bx--progress--space-equal={spaceEqually && !vertical}
+  {...$$restProps}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+>
+  <slot />
+</ul>

package/src/ProgressIndicator/ProgressIndicatorSkeleton.svelte

@@ -0,0 +1,38 @@
+<script>
+  /** Set to `true` to use the vertical variant */
+  export let vertical = false;
+
+  /** Specify the number of steps to render */
+  export let count = 4;
+</script>
+
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+<ul
+  class:bx--progress={true}
+  class:bx--progress--vertical={vertical}
+  class:bx--skeleton={true}
+  {...$$restProps}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+>
+  {#each Array.from({ length: count }, (_, i) => i) as item, i (item)}
+    <li
+      class:bx--progress-step={true}
+      class:bx--progress-step--incomplete={true}
+    >
+      <div
+        class:bx--progress-step-button={true}
+        class:bx--progress-step-button--unclickable={true}
+      >
+        <svg>
+          <path d="M 7, 7 m -7, 0 a 7,7 0 1,0 14,0 a 7,7 0 1,0 -14,0"></path>
+        </svg>
+        <p class:bx--progress-label={true}></p>
+        <span class:bx--progress-line={true}></span>
+      </div>
+    </li>
+  {/each}
+</ul>

package/src/ProgressIndicator/ProgressStep.svelte

@@ -0,0 +1,107 @@
+<script>
+  /** Set to `true` for the complete variant */
+  export let complete = false;
+
+  /** Set to `true` to use the current variant */
+  export let current = false;
+
+  /** Set to `true` to disable the progress step */
+  export let disabled = false;
+
+  /** Set to `true` to indicate an invalid state */
+  export let invalid = false;
+
+  /** Specify the step description */
+  export let description = "";
+
+  /** Specify the step label */
+  export let label = "";
+
+  /** Specify the step secondary label */
+  export let secondaryLabel = "";
+
+  /** Set an id for the top-level element */
+  export let id = "ccs-" + Math.random().toString(36);
+
+  import { onMount, getContext } from "svelte";
+  import CheckmarkOutline from "../icons/CheckmarkOutline.svelte";
+  import Warning from "../icons/Warning.svelte";
+  import CircleDash from "../icons/CircleDash.svelte";
+  import Incomplete from "../icons/Incomplete.svelte";
+
+  let step = {};
+
+  const { stepsById, add, change, preventChangeOnClick } =
+    getContext("ProgressIndicator");
+
+  $: add({ id, complete, disabled });
+
+  const unsubscribe = stepsById.subscribe((value) => {
+    if (value[id]) {
+      step = value[id];
+      current = step.current;
+      complete = step.complete;
+    }
+  });
+
+  onMount(() => {
+    return () => {
+      unsubscribe();
+    };
+  });
+</script>
+
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+<li
+  {id}
+  class:bx--progress-step={true}
+  class:bx--progress-step--current={current}
+  class:bx--progress-step--complete={complete}
+  class:bx--progress-step--incomplete={!complete && !current}
+  class:bx--progress-step--disabled={disabled}
+  {...$$restProps}
+>
+  <button
+    type="button"
+    {disabled}
+    aria-disabled={disabled}
+    tabindex={!current && !disabled ? "0" : "-1"}
+    class:bx--progress-step-button={true}
+    class:bx--progress-step-button--unclickable={current ||
+      $preventChangeOnClick}
+    on:click
+    on:click={() => {
+      if (!step.complete) return;
+      change(step.index);
+    }}
+    on:mouseover
+    on:mouseenter
+    on:mouseleave
+    on:keydown
+    on:keydown={(e) => {
+      if (!step.complete) return;
+      if (e.key === " " || e.key === "Enter") {
+        change(step.index);
+      }
+    }}
+  >
+    {#if invalid}
+      <Warning class="bx--progress__warning" title={description} />
+    {:else if current}
+      <Incomplete title={description} />
+    {:else if complete}
+      <CheckmarkOutline title={description} />
+    {:else}
+      <CircleDash title={description} />
+    {/if}
+    <div class:bx--progress-text={true}>
+      <slot props={{ class: "bx--progress-label" }}>
+        <p class:bx--progress-label={true}>{label}</p>
+      </slot>
+      {#if secondaryLabel}
+        <p class:bx--progress-optional={true}>{secondaryLabel}</p>
+      {/if}
+    </div>
+    <span class:bx--progress-line={true}></span>
+  </button>
+</li>

package/src/ProgressIndicator/index.js

@@ -0,0 +1,3 @@
+export { default as ProgressIndicator } from "./ProgressIndicator.svelte";
+export { default as ProgressIndicatorSkeleton } from "./ProgressIndicatorSkeleton.svelte";
+export { default as ProgressStep } from "./ProgressStep.svelte";