@ifloppy/maxcraftmc-ui-svelte 0.1.0

package/src/ComposedModal/ModalFooter.svelte

@@ -0,0 +1,90 @@
+<script>
+  /**
+   * @event {{ text: string; }} click:button--secondary
+   */
+
+  /** Specify the primary button text */
+  export let primaryButtonText = "";
+
+  /**
+   * Specify the primary button icon
+   * @type {any}
+   */
+  export let primaryButtonIcon = undefined;
+
+  /** Set to `true` to disable the primary button */
+  export let primaryButtonDisabled = false;
+
+  /**
+   * Specify a class for the primary button
+   * @type {string}
+   */
+  export let primaryClass = undefined;
+
+  /** Specify the secondary button text */
+  export let secondaryButtonText = "";
+
+  /**
+   * 2-tuple prop to render two secondary buttons for a 3 button modal
+   * supersedes `secondaryButtonText`
+   * @type {[{ text: string; }, { text: string; }]}
+   */
+  export let secondaryButtons = [];
+
+  /**
+   * Specify a class for the secondary button
+   * @type {string}
+   */
+  export let secondaryClass = undefined;
+
+  /** Set to `true` to use the danger variant */
+  export let danger = false;
+
+  import { getContext, createEventDispatcher } from "svelte";
+  import Button from "../Button/Button.svelte";
+
+  const dispatch = createEventDispatcher();
+  const { closeModal, submit } = getContext("ComposedModal");
+</script>
+
+<div
+  class:bx--modal-footer={true}
+  class:bx--modal-footer--three-button={secondaryButtons.length === 2}
+  {...$$restProps}
+>
+  {#if secondaryButtons.length > 0}
+    {#each secondaryButtons as button}
+      <Button
+        kind="secondary"
+        on:click={() => {
+          dispatch("click:button--secondary", { text: button.text });
+        }}
+      >
+        {button.text}
+      </Button>
+    {/each}
+  {:else if secondaryButtonText}
+    <Button
+      kind="secondary"
+      class={secondaryClass}
+      on:click={() => {
+        closeModal();
+        dispatch("click:button--secondary", { text: secondaryButtonText });
+      }}
+    >
+      {secondaryButtonText}
+    </Button>
+  {/if}
+  {#if primaryButtonText}
+    <Button
+      kind={danger ? "danger" : "primary"}
+      disabled={primaryButtonDisabled}
+      class={primaryClass}
+      icon={primaryButtonIcon}
+      on:click={submit}
+    >
+      {primaryButtonText}
+    </Button>
+  {/if}
+  <slot />
+</div>

package/src/ComposedModal/ModalHeader.svelte

@@ -0,0 +1,65 @@
+<script>
+  /** Specify the modal title */
+  export let title = "";
+
+  /** Specify the modal label */
+  export let label = "";
+
+  /** Specify the label class */
+  export let labelClass = "";
+
+  /** Specify the title class */
+  export let titleClass = "";
+
+  /** Specify the close class */
+  export let closeClass = "";
+
+  /** Specify the close icon class */
+  export let closeIconClass = "";
+
+  /** Specify the ARIA label for the close icon */
+  export let iconDescription = "Close";
+
+  import { getContext } from "svelte";
+  import Close from "../icons/Close.svelte";
+
+  const { closeModal, updateLabel } = getContext("ComposedModal");
+
+  $: updateLabel(label);
+</script>
+
+<div class:bx--modal-header={true} {...$$restProps}>
+  {#if label}
+    <h2
+      class:bx--modal-header__label={true}
+      class:bx--type-delta={true}
+      class={labelClass}
+    >
+      {label}
+    </h2>
+  {/if}
+  {#if title}
+    <h3
+      class:bx--modal-header__heading={true}
+      class:bx--type-beta={true}
+      class={titleClass}
+    >
+      {title}
+    </h3>
+  {/if}
+  <slot />
+  <button
+    type="button"
+    aria-label={iconDescription}
+    class:bx--modal-close={true}
+    class={closeClass}
+    on:click
+    on:click={closeModal}
+  >
+    <Close
+      size={20}
+      class="bx--modal-close__icon {closeIconClass}"
+      aria-hidden="true"
+    />
+  </button>
+</div>

package/src/ComposedModal/index.js

@@ -0,0 +1,4 @@
+export { default as ComposedModal } from "./ComposedModal.svelte";
+export { default as ModalHeader } from "./ModalHeader.svelte";
+export { default as ModalBody } from "./ModalBody.svelte";
+export { default as ModalFooter } from "./ModalFooter.svelte";

package/src/ContentSwitcher/ContentSwitcher.svelte

@@ -0,0 +1,74 @@
+<script>
+  /**
+   * @event {number} change
+   */
+
+  /** Set the selected index of the switch item */
+  export let selectedIndex = 0;
+
+  /**
+   * Specify the size of the content switcher
+   * @type {"sm" | "xl"}
+   */
+  export let size = undefined;
+
+  import { afterUpdate, createEventDispatcher, setContext } from "svelte";
+  import { writable } from "svelte/store";
+
+  const dispatch = createEventDispatcher();
+  const currentId = writable(null);
+
+  $: currentIndex = -1;
+  $: switches = [];
+  $: if (switches[currentIndex]) {
+    dispatch("change", currentIndex);
+    currentId.set(switches[currentIndex].id);
+  }
+
+  setContext("ContentSwitcher", {
+    currentId,
+    add: ({ id, text, selected }) => {
+      if (selected) {
+        selectedIndex = switches.length;
+      }
+
+      switches = [...switches, { id, text, selected }];
+    },
+    update: (id) => {
+      selectedIndex = switches.map(({ id }) => id).indexOf(id);
+    },
+    change: (direction) => {
+      let index = currentIndex + direction;
+
+      if (index < 0) {
+        index = switches.length - 1;
+      } else if (index >= switches.length) {
+        index = 0;
+      }
+
+      selectedIndex = index;
+    },
+  });
+
+  afterUpdate(() => {
+    if (selectedIndex !== currentIndex) {
+      currentIndex = selectedIndex;
+    }
+  });
+</script>
+
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+<!-- svelte-ignore a11y-interactive-supports-focus -->
+<div
+  role="tablist"
+  class:bx--content-switcher={true}
+  class:bx--content-switcher--sm={size === "sm"}
+  class:bx--content-switcher--xl={size === "xl"}
+  {...$$restProps}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+>
+  <slot />
+</div>

package/src/ContentSwitcher/Switch.svelte

@@ -0,0 +1,72 @@
+<script>
+  /**
+   * Specify the switch text.
+   * Alternatively, use the "text" slot  (e.g., `<span slot="text">...</span>`)
+   */
+  export let text = "Provide text";
+
+  /** Set to `true` for the switch to be selected */
+  export let selected = false;
+
+  /** Set to `true` to disable the switch */
+  export let disabled = false;
+
+  /** Set an id for the button element */
+  export let id = "ccs-" + Math.random().toString(36);
+
+  /** Obtain a reference to the button HTML element */
+  export let ref = null;
+
+  import { afterUpdate, getContext, onMount } from "svelte";
+
+  const ctx = getContext("ContentSwitcher");
+
+  ctx.add({ id, text, selected });
+
+  const unsubscribe = ctx.currentId.subscribe((currentId) => {
+    selected = currentId === id;
+  });
+
+  afterUpdate(() => {
+    if (selected) {
+      ref.focus();
+    }
+  });
+
+  onMount(() => {
+    return () => unsubscribe();
+  });
+</script>
+
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+<button
+  bind:this={ref}
+  type="button"
+  role="tab"
+  tabindex={selected ? "0" : "-1"}
+  aria-selected={selected}
+  {disabled}
+  {id}
+  class:bx--content-switcher-btn={true}
+  class:bx--content-switcher--selected={selected}
+  {...$$restProps}
+  on:click
+  on:click|preventDefault={() => {
+    ctx.update(id);
+  }}
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+  on:keydown
+  on:keydown={({ key }) => {
+    if (key === "ArrowRight") {
+      ctx.change(1);
+    } else if (key === "ArrowLeft") {
+      ctx.change(-1);
+    }
+  }}
+>
+  <span class:bx--content-switcher__label={true}>
+    <slot>{text}</slot>
+  </span>
+</button>

package/src/ContentSwitcher/index.js

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

package/src/ContextMenu/ContextMenu.svelte

@@ -0,0 +1,196 @@
+<script>
+  /**
+   * @event {HTMLElement} open
+   */
+
+  /**
+   * 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
+   * @type {null | ReadonlyArray<null | HTMLElement>}
+   */
+  export let target = null;
+
+  /**
+   * Set to `true` to open the menu
+   * Either `x` and `y` must be greater than zero
+   */
+  export let open = false;
+
+  /** Specify the horizontal offset of the menu position */
+  export let x = 0;
+
+  /** Specify the vertical offset of the menu position */
+  export let y = 0;
+
+  /** Obtain a reference to the unordered list HTML element */
+  export let ref = null;
+
+  import {
+    onMount,
+    setContext,
+    getContext,
+    afterUpdate,
+    createEventDispatcher,
+  } from "svelte";
+  import { writable } from "svelte/store";
+
+  const dispatch = createEventDispatcher();
+  const position = writable([x, y]);
+  const currentIndex = writable(-1);
+  const hasPopup = writable(false);
+  const menuOffsetX = writable(0);
+  const ctx = getContext("ContextMenu");
+
+  let options = [];
+  let direction = 1;
+  let prevX = 0;
+  let prevY = 0;
+  let focusIndex = -1;
+  let openDetail = null;
+
+  function close() {
+    open = false;
+    x = 0;
+    y = 0;
+    prevX = 0;
+    prevY = 0;
+    focusIndex = -1;
+  }
+
+  /** @type {(e: MouseEvent) => void} */
+  function openMenu(e) {
+    e.preventDefault();
+    const { height, width } = ref.getBoundingClientRect();
+
+    if (open || x === 0) {
+      if (window.innerWidth - width < e.x) {
+        x = e.x - width;
+      } else {
+        x = e.x;
+      }
+    }
+
+    if (open || y === 0) {
+      menuOffsetX.set(e.x);
+
+      if (window.innerHeight - height < e.y) {
+        y = e.y - height;
+      } else {
+        y = e.y;
+      }
+    }
+    position.set([x, y]);
+    open = true;
+    openDetail = e.target;
+  }
+
+  $: if (target != null) {
+    if (Array.isArray(target)) {
+      target.forEach((node) => node?.addEventListener("contextmenu", openMenu));
+    } else {
+      target.addEventListener("contextmenu", openMenu);
+    }
+  }
+
+  onMount(() => {
+    return () => {
+      if (target != null) {
+        if (Array.isArray(target)) {
+          target.forEach((node) =>
+            node?.removeEventListener("contextmenu", openMenu),
+          );
+        } else {
+          target.removeEventListener("contextmenu", openMenu);
+        }
+      }
+    };
+  });
+
+  setContext("ContextMenu", {
+    menuOffsetX,
+    currentIndex,
+    position,
+    close,
+    setPopup: (popup) => {
+      hasPopup.set(popup);
+    },
+  });
+
+  afterUpdate(() => {
+    if (open) {
+      options = [...ref.querySelectorAll("li[data-nested='false']")];
+
+      if (level === 1) {
+        if (prevX !== x || prevY !== y) ref.focus();
+        prevX = x;
+        prevY = y;
+      }
+
+      dispatch("open", openDetail);
+    } else {
+      dispatch("close");
+    }
+
+    if (!$hasPopup && options[focusIndex]) options[focusIndex].focus();
+  });
+
+  $: level = !ctx ? 1 : 2;
+  $: currentIndex.set(focusIndex);
+</script>
+
+<svelte:window
+  on:contextmenu={(e) => {
+    if (target != null) return;
+    if (level > 1) return;
+    if (!ref) return;
+    openMenu(e);
+  }}
+  on:click={(e) => {
+    if (!open) return;
+    close();
+  }}
+  on:keydown={(e) => {
+    if (open && e.key === "Escape") close();
+  }}
+/>
+
+<!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
+<ul
+  bind:this={ref}
+  role="menu"
+  tabindex="-1"
+  data-direction={direction}
+  data-level={level}
+  class:bx--menu={true}
+  class:bx--menu--open={open}
+  class:bx--menu--invisible={open && x === 0 && y === 0}
+  class:bx--menu--root={level === 1}
+  style:left="{x}px"
+  style:top="{y}px"
+  {...$$restProps}
+  on:click
+  on:click={({ target }) => {
+    const closestOption = target.closest("[tabindex]");
+
+    if (closestOption && closestOption.getAttribute("role") !== "menuitem") {
+      close();
+    }
+  }}
+  on:keydown
+  on:keydown={(e) => {
+    if (open) e.preventDefault();
+    if ($hasPopup) return;
+
+    if (e.key === "ArrowDown") {
+      if (focusIndex < options.length - 1) focusIndex++;
+    } else if (e.key === "ArrowUp") {
+      if (focusIndex === -1) {
+        focusIndex = options.length - 1;
+      } else {
+        if (focusIndex > 0) focusIndex--;
+      }
+    }
+  }}
+>
+  <slot />
+</ul>

package/src/ContextMenu/ContextMenuDivider.svelte

@@ -0,0 +1 @@
+<li role="separator" class:bx--menu-divider={true}></li>

package/src/ContextMenu/ContextMenuGroup.svelte

@@ -0,0 +1,36 @@
+<script>
+  /** @type {ReadonlyArray<string>} */
+  export let selectedIds = [];
+
+  /** Specify the label text */
+  export let labelText = "";
+
+  import { setContext } from "svelte";
+  import { writable } from "svelte/store";
+
+  const currentIds = writable([]);
+
+  setContext("ContextMenuGroup", {
+    currentIds,
+    addOption: ({ id }) => {
+      if (!selectedIds.includes(id)) {
+        selectedIds = [...selectedIds, id];
+      }
+    },
+    toggleOption: ({ id }) => {
+      if (!selectedIds.includes(id)) {
+        selectedIds = [...selectedIds, id];
+      } else {
+        selectedIds = selectedIds.filter((_) => _ !== id);
+      }
+    },
+  });
+
+  $: currentIds.set(selectedIds);
+</script>
+
+<li role="none">
+  <ul role="group" aria-label={labelText}>
+    <slot />
+  </ul>
+</li>