@ifloppy/maxcraftmc-ui-svelte 0.1.0

package/src/Loading/Loading.svelte

@@ -0,0 +1,76 @@
+<script>
+  /** Set to `true` to use the small variant */
+  export let small = false;
+
+  /** Set to `false` to disable the active state */
+  export let active = true;
+
+  /** Set to `false` to disable the overlay */
+  export let withOverlay = true;
+
+  /** Specify the description to describe the loading state */
+  export let description = "loading";
+
+  $: spinnerRadius = small ? "42" : "44";
+</script>
+
+{#if withOverlay}
+  <div
+    class:bx--loading-overlay={true}
+    class:bx--loading-overlay--stop={!active}
+    {...$$restProps}
+  >
+    <div
+      aria-atomic="true"
+      aria-live={active ? "assertive" : "off"}
+      class:bx--loading={true}
+      class:bx--loading--small={small}
+      class:bx--loading--stop={!active}
+    >
+      <svg class:bx--loading__svg={true} viewBox="0 0 100 100">
+        <title>{description}</title>
+        {#if small}
+          <circle
+            class:bx--loading__background={true}
+            cx="50%"
+            cy="50%"
+            r={spinnerRadius}
+          ></circle>
+        {/if}
+        <circle
+          class:bx--loading__stroke={true}
+          cx="50%"
+          cy="50%"
+          r={spinnerRadius}
+        ></circle>
+      </svg>
+    </div>
+  </div>
+{:else}
+  <div
+    aria-atomic="true"
+    aria-live={active ? "assertive" : "off"}
+    class:bx--loading={true}
+    class:bx--loading--small={small}
+    class:bx--loading--stop={!active}
+    {...$$restProps}
+  >
+    <svg class:bx--loading__svg={true} viewBox="0 0 100 100">
+      <title>{description}</title>
+      {#if small}
+        <circle
+          class:bx--loading__background={true}
+          cx="50%"
+          cy="50%"
+          r={spinnerRadius}
+        ></circle>
+      {/if}
+      <circle
+        class:bx--loading__stroke={true}
+        cx="50%"
+        cy="50%"
+        r={spinnerRadius}
+      ></circle>
+    </svg>
+  </div>
+{/if}

package/src/Loading/index.js

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

package/src/LocalStorage/LocalStorage.svelte

@@ -0,0 +1,71 @@
+<script>
+  /**
+   * @event {null} save
+   * @event {{ prevValue: any; value: any; }} update
+   */
+
+  /**
+   * Specify the local storage key
+   */
+  export let key = "local-storage-key";
+
+  /**
+   * Provide a value to persist
+   * @type {any}
+   */
+  export let value = "";
+
+  /**
+   * Remove the persisted key value from the browser's local storage
+   * @type {() => void}
+   */
+  export function clearItem() {
+    localStorage.removeItem(key);
+  }
+
+  /**
+   * Clear all key values from the browser's local storage
+   * @type {() => void}
+   */
+  export function clearAll() {
+    localStorage.clear();
+  }
+
+  import { onMount, afterUpdate, createEventDispatcher } from "svelte";
+
+  const dispatch = createEventDispatcher();
+
+  let prevValue = value;
+
+  function setItem() {
+    if (typeof value === "object") {
+      localStorage.setItem(key, JSON.stringify(value));
+    } else {
+      localStorage.setItem(key, value);
+    }
+  }
+
+  onMount(() => {
+    const item = localStorage.getItem(key);
+
+    if (item != null) {
+      try {
+        value = JSON.parse(item);
+      } catch (e) {
+        value = item;
+      }
+    } else {
+      setItem(value);
+      dispatch("save");
+    }
+  });
+
+  afterUpdate(() => {
+    if (prevValue !== value) {
+      setItem(value);
+      dispatch("update", { prevValue, value });
+    }
+
+    prevValue = value;
+  });
+</script>

package/src/LocalStorage/index.js

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

package/src/Modal/Modal.svelte

@@ -0,0 +1,304 @@
+<script>
+  /**
+   * @event {{ open: boolean; }} transitionend
+   * @event {{ text: string; }} click:button--secondary
+   */
+
+  /**
+   * Set the size of the modal
+   * @type {"xs" | "sm" | "lg"}
+   */
+  export let size = undefined;
+
+  /** Set to `true` to open the modal */
+  export let open = false;
+
+  /** Set to `true` to use the danger variant */
+  export let danger = false;
+
+  /** Set to `true` to enable alert mode */
+  export let alert = false;
+
+  /** Set to `true` to use the passive variant */
+  export let passiveModal = false;
+
+  /**
+   * Specify the modal heading
+   * @type {string}
+   */
+  export let modalHeading = undefined;
+
+  /**
+   * Specify the modal label
+   * @type {string}
+   */
+  export let modalLabel = undefined;
+
+  /**
+   * Specify the ARIA label for the modal
+   * @type {string}
+   */
+  export let modalAriaLabel = undefined;
+
+  /** Specify the ARIA label for the close icon */
+  export let iconDescription = "Close the modal";
+
+  /** Set to `true` if the modal contains form elements */
+  export let hasForm = false;
+
+  /** Set to `true` if the modal contains scrolling content */
+  export let hasScrollingContent = false;
+
+  /** Specify the primary button text */
+  export let primaryButtonText = "";
+
+  /** Set to `true` to disable the primary button */
+  export let primaryButtonDisabled = false;
+
+  /**
+   * Specify the primary button icon
+   * @type {any}
+   */
+  export let primaryButtonIcon = undefined;
+
+  /**
+   * Set to `true` for the "submit" and "click:button--primary" events
+   * to be dispatched when pressing "Enter"
+   */
+  export let shouldSubmitOnEnter = true;
+
+  /** 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 selector to be focused when opening the modal */
+  export let selectorPrimaryFocus = "[data-modal-primary-focus]";
+
+  /** Set to `true` to prevent the modal from closing when clicking outside */
+  export let preventCloseOnClickOutside = false;
+
+  /** Set an id for the top-level element */
+  export let id = "ccs-" + Math.random().toString(36);
+
+  /** Obtain a reference to the top-level HTML element */
+  export let ref = null;
+
+  import { createEventDispatcher, afterUpdate } from "svelte";
+  import Close from "../icons/Close.svelte";
+  import Button from "../Button/Button.svelte";
+  import { trackModal } from "./modalStore";
+  import { writable } from "svelte/store";
+
+  const dispatch = createEventDispatcher();
+
+  let buttonRef = null;
+  let innerModal = null;
+  let opened = false;
+  let didClickInnerModal = false;
+
+  function focus(element) {
+    const node =
+      (element || innerModal).querySelector(selectorPrimaryFocus) || buttonRef;
+    node.focus();
+  }
+
+  const openStore = writable(open);
+  $: $openStore = open;
+  trackModal(openStore);
+
+  afterUpdate(() => {
+    if (opened) {
+      if (!open) {
+        opened = false;
+        dispatch("close");
+      }
+    } else if (open) {
+      opened = true;
+      focus();
+      dispatch("open");
+    }
+  });
+
+  $: modalLabelId = `bx--modal-header__label--modal-${id}`;
+  $: modalHeadingId = `bx--modal-header__heading--modal-${id}`;
+  $: modalBodyId = `bx--modal-body--${id}`;
+  $: ariaLabel =
+    modalLabel || $$props["aria-label"] || modalAriaLabel || modalHeading;
+</script>
+
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+<div
+  bind:this={ref}
+  role="presentation"
+  {id}
+  class:bx--modal={true}
+  class:bx--modal-tall={!passiveModal}
+  class:is-visible={open}
+  class:bx--modal--danger={danger}
+  {...$$restProps}
+  on:keydown
+  on:keydown={(e) => {
+    if (open) {
+      if (e.key === "Escape") {
+        open = false;
+      } else if (e.key === "Tab") {
+        // trap focus
+
+        // taken from github.com/carbon-design-system/carbon/packages/react/src/internal/keyboard/navigation.js
+        const selectorTabbable = `
+  a[href], area[href], input:not([disabled]):not([tabindex='-1']),
+  button:not([disabled]):not([tabindex='-1']),select:not([disabled]):not([tabindex='-1']),
+  textarea:not([disabled]):not([tabindex='-1']),
+  iframe, object, embed, *[tabindex]:not([tabindex='-1']):not([disabled]), *[contenteditable=true]
+`;
+
+        const tabbable = Array.from(ref.querySelectorAll(selectorTabbable));
+
+        let index = tabbable.indexOf(document.activeElement);
+        if (index === -1 && e.shiftKey) index = 0;
+
+        index += tabbable.length + (e.shiftKey ? -1 : 1);
+        index %= tabbable.length;
+
+        tabbable[index].focus();
+        e.preventDefault();
+      } else if (
+        shouldSubmitOnEnter &&
+        e.key === "Enter" &&
+        !primaryButtonDisabled
+      ) {
+        dispatch("submit");
+        dispatch("click:button--primary");
+      }
+    }
+  }}
+  on:click
+  on:click={() => {
+    if (!didClickInnerModal && !preventCloseOnClickOutside) open = false;
+    didClickInnerModal = false;
+  }}
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+  on:transitionend={(e) => {
+    if (e.propertyName === "transform") {
+      dispatch("transitionend", { open });
+    }
+  }}
+>
+  <div
+    bind:this={innerModal}
+    tabindex="-1"
+    role={alert ? (passiveModal ? "alert" : "alertdialog") : "dialog"}
+    aria-describedby={alert && !passiveModal ? modalBodyId : undefined}
+    aria-modal="true"
+    aria-label={ariaLabel}
+    class:bx--modal-container={true}
+    class:bx--modal-container--xs={size === "xs"}
+    class:bx--modal-container--sm={size === "sm"}
+    class:bx--modal-container--lg={size === "lg"}
+    on:click={() => {
+      didClickInnerModal = true;
+    }}
+  >
+    <div class:bx--modal-header={true}>
+      {#if passiveModal}
+        <button
+          bind:this={buttonRef}
+          type="button"
+          aria-label={iconDescription}
+          class:bx--modal-close={true}
+          on:click={() => {
+            open = false;
+          }}
+        >
+          <Close size={20} class="bx--modal-close__icon" aria-hidden="true" />
+        </button>
+      {/if}
+      {#if modalLabel}
+        <h2 id={modalLabelId} class:bx--modal-header__label={true}>
+          <slot name="label">{modalLabel}</slot>
+        </h2>
+      {/if}
+      <h3 id={modalHeadingId} class:bx--modal-header__heading={true}>
+        <slot name="heading">{modalHeading}</slot>
+      </h3>
+      {#if !passiveModal}
+        <button
+          bind:this={buttonRef}
+          type="button"
+          aria-label={iconDescription}
+          class:bx--modal-close={true}
+          on:click={() => {
+            open = false;
+          }}
+        >
+          <Close size={20} class="bx--modal-close__icon" aria-hidden="true" />
+        </button>
+      {/if}
+    </div>
+    <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+    <div
+      id={modalBodyId}
+      class:bx--modal-content={true}
+      class:bx--modal-content--with-form={hasForm}
+      class:bx--modal-scroll-content={hasScrollingContent}
+      tabindex={hasScrollingContent ? "0" : undefined}
+      role={hasScrollingContent ? "region" : undefined}
+      aria-label={hasScrollingContent ? ariaLabel : undefined}
+      aria-labelledby={modalLabel ? modalLabelId : modalHeadingId}
+    >
+      <slot />
+    </div>
+    {#if hasScrollingContent}
+      <div class:bx--modal-content--overflow-indicator={true}></div>
+    {/if}
+    {#if !passiveModal}
+      <div
+        class:bx--modal-footer={true}
+        class:bx--modal-footer--three-button={secondaryButtons.length === 2}
+      >
+        {#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"
+            on:click={() => {
+              dispatch("click:button--secondary", {
+                text: secondaryButtonText,
+              });
+            }}
+          >
+            {secondaryButtonText}
+          </Button>
+        {/if}
+        <Button
+          kind={danger ? "danger" : "primary"}
+          disabled={primaryButtonDisabled}
+          icon={primaryButtonIcon}
+          on:click={() => {
+            dispatch("submit");
+            dispatch("click:button--primary");
+          }}
+        >
+          {primaryButtonText}
+        </Button>
+      </div>
+    {/if}
+  </div>
+</div>

package/src/Modal/index.js

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

package/src/Modal/modalStore.js

@@ -0,0 +1,36 @@
+import { onMount } from "svelte";
+import { get, writable } from "svelte/store";
+
+/** A set of stores indicating whether a modal is open. */
+const stores = new Set();
+
+/** Store for the number of open modals. */
+const modalsOpen = writable(0);
+
+const updateModalsOpen = () =>
+  modalsOpen.set([...stores].filter((open) => get(open)).length);
+
+/**
+ * Adds a modal's store to the open modal tracking.
+ * Has to be called during component initialization.
+ * Modal is automatically removed on destroy.
+ * @param {import('svelte/store').Readable<boolean>} openStore
+ *   Store that indicates whether the modal is opened.
+ */
+export const trackModal = (openStore) =>
+  onMount(() => {
+    stores.add(openStore);
+    const unsubscribe = openStore.subscribe(updateModalsOpen);
+
+    return () => {
+      unsubscribe();
+      stores.delete(openStore);
+
+      updateModalsOpen();
+    };
+  });
+
+modalsOpen.subscribe((openCount) => {
+  if (typeof document !== "undefined")
+    document.body.classList.toggle("bx--body--with-modal-open", openCount > 0);
+});