@ifloppy/maxcraftmc-ui-svelte 0.1.0

package/src/ImageLoader/ImageLoader.svelte

@@ -0,0 +1,117 @@
+<script>
+  /**
+   * @event {null} load
+   * @event {null} error
+   */
+
+  /**
+   * Specify the image source
+   */
+  export let src = "";
+
+  /**
+   * Specify the image alt text
+   */
+  export let alt = "";
+
+  /**
+   * Specify the aspect ratio for the image wrapper
+   * @type {"2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "3x2" | "9x16" | "1x2"}
+   */
+  export let ratio = undefined;
+
+  /**
+   * Set to `true` when `loaded` is `true` and `error` is false
+   */
+  export let loading = false;
+
+  /**
+   * Set to `true` when the image is loaded
+   */
+  export let loaded = false;
+
+  /**
+   * Set to `true` if an error occurs when loading the image
+   */
+  export let error = false;
+
+  /**
+   * Set to `true` to fade in the image on load
+   * The duration uses the `fast-02` value following Carbon guidelines on motion
+   */
+  export let fadeIn = false;
+
+  /**
+   * Method invoked to load the image provided a `src` value
+   * @type {(url?: string) => void}
+   */
+  export const loadImage = (url) => {
+    if (image != null) image = null;
+    loaded = false;
+    error = false;
+    image = new Image();
+    image.src = url || src;
+    image.onload = () => (loaded = true);
+    image.onerror = () => (error = true);
+  };
+
+  import { onMount, createEventDispatcher } from "svelte";
+  import { fade } from "svelte/transition";
+  import AspectRatio from "../AspectRatio/AspectRatio.svelte";
+
+  const dispatch = createEventDispatcher();
+
+  // "fast-02" duration (ms) from Carbon motion recommended for fading micro-interactions
+  const fast02 = 110;
+
+  let image = null;
+
+  $: loading = !loaded && !error;
+  $: if (src && typeof window !== "undefined") loadImage();
+  $: if (loaded) dispatch("load");
+  $: if (error) dispatch("error");
+
+  onMount(() => {
+    return () => (image = null);
+  });
+</script>
+
+{#if ratio === undefined}
+  {#if loading}
+    <slot name="loading" />
+  {/if}
+  {#key src}
+    {#if loaded}
+      <img
+        style:width="100%"
+        {...$$restProps}
+        {src}
+        {alt}
+        transition:fade|local={{ duration: fadeIn ? fast02 : 0 }}
+      />
+    {/if}
+  {/key}
+  {#if error}
+    <slot name="error" />
+  {/if}
+{:else}
+  <AspectRatio {ratio}>
+    {#if loading}
+      <slot name="loading" />
+    {/if}
+    {#key src}
+      {#if loaded}
+        <img
+          style:width="100%"
+          {...$$restProps}
+          {src}
+          {alt}
+          transition:fade|local={{ duration: fadeIn ? fast02 : 0 }}
+        />
+      {/if}
+    {/key}
+    {#if error}
+      <slot name="error" />
+    {/if}
+  </AspectRatio>
+{/if}

package/src/ImageLoader/index.js

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

package/src/InlineLoading/InlineLoading.svelte

@@ -0,0 +1,82 @@
+<script>
+  /**
+   * Set the loading status
+   * @type {"active" | "inactive" | "finished" | "error"}
+   */
+  export let status = "active";
+
+  /**
+   * Set the loading description
+   * @type {string}
+   */
+  export let description = undefined;
+
+  /**
+   * Specify a description for the loading icon.
+   * Defaults to the `status` prop for the "error" and "finished" states
+   * @type {string}
+   */
+  export let iconDescription = undefined;
+
+  /** Specify the timeout delay (ms) after `status` is set to "success" */
+  export let successDelay = 1500;
+
+  import { createEventDispatcher, afterUpdate, onMount } from "svelte";
+  import CheckmarkFilled from "../icons/CheckmarkFilled.svelte";
+  import ErrorFilled from "../icons/ErrorFilled.svelte";
+  import Loading from "../Loading/Loading.svelte";
+
+  const dispatch = createEventDispatcher();
+
+  let timeout = undefined;
+
+  onMount(() => {
+    return () => {
+      clearTimeout(timeout);
+    };
+  });
+
+  afterUpdate(() => {
+    if (status === "finished") {
+      timeout = setTimeout(() => {
+        dispatch("success");
+      }, successDelay);
+    }
+  });
+</script>
+
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
+  class:bx--inline-loading={true}
+  aria-live="assertive"
+  {...$$restProps}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+>
+  <div class:bx--inline-loading__animation={true}>
+    {#if status === "error"}
+      <ErrorFilled
+        class="bx--inline-loading--error"
+        title={iconDescription || status}
+      />
+    {:else if status === "finished"}
+      <CheckmarkFilled
+        class="bx--inline-loading__checkmark-container"
+        title={iconDescription || status}
+      />
+    {:else if status === "inactive" || status === "active"}
+      <Loading
+        small
+        description={iconDescription}
+        withOverlay={false}
+        active={status === "active"}
+      />
+    {/if}
+  </div>
+  {#if description}
+    <div class:bx--inline-loading__text={true}>{description}</div>
+  {/if}
+</div>

package/src/InlineLoading/index.js

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

package/src/Link/Link.svelte

@@ -0,0 +1,89 @@
+<script>
+  /**
+   * Specify the size of the link
+   * @type {"sm" | "lg"}
+   */
+  export let size = undefined;
+
+  /**
+   * Specify the href value
+   * @type {string}
+   */
+  export let href = undefined;
+
+  /** Set to `true` to use the inline variant */
+  export let inline = false;
+
+  /**
+   * Specify the icon to render
+   * `inline` must be `false`
+   * @type {any}
+   */
+  export let icon = undefined;
+
+  /** Set to `true` to disable the checkbox */
+  export let disabled = false;
+
+  /** Set to `true` to allow visited styles */
+  export let visited = false;
+
+  /** Obtain a reference to the top-level HTML element */
+  export let ref = null;
+</script>
+
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+<!-- svelte-ignore a11y-missing-attribute -->
+<!-- svelte-ignore a11y-no-redundant-roles -->
+<!-- svelte-ignore a11y-interactive-supports-focus -->
+{#if disabled}
+  <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+  <a
+    bind:this={ref}
+    role="link"
+    aria-disabled="true"
+    class:bx--link={true}
+    class:bx--link--disabled={disabled}
+    class:bx--link--inline={inline}
+    class:bx--link--visited={visited}
+    {...$$restProps}
+    on:click
+    on:mouseover
+    on:mouseenter
+    on:mouseleave
+  >
+    <slot />
+    {#if !inline && ($$slots.icon || icon)}
+      <div class:bx--link__icon={true}>
+        <slot name="icon">
+          <svelte:component this={icon} />
+        </slot>
+      </div>
+    {/if}
+  </a>
+{:else}
+  <a
+    bind:this={ref}
+    class:bx--link={true}
+    class:bx--link--disabled={disabled}
+    class:bx--link--inline={inline}
+    class:bx--link--visited={visited}
+    class:bx--link--sm={size === "sm"}
+    class:bx--link--lg={size === "lg"}
+    rel={$$restProps.target === "_blank" ? "noopener noreferrer" : undefined}
+    {href}
+    {...$$restProps}
+    on:click
+    on:mouseover
+    on:mouseenter
+    on:mouseleave
+  >
+    <slot />
+    {#if !inline && ($$slots.icon || icon)}
+      <div class:bx--link__icon={true}>
+        <slot name="icon">
+          <svelte:component this={icon} />
+        </slot>
+      </div>
+    {/if}
+  </a>
+{/if}

package/src/Link/OutboundLink.svelte

@@ -0,0 +1,18 @@
+<script>
+  /** @extends {"./Link.svelte"} LinkProps */
+
+  import Link from "./Link.svelte";
+  import Launch from "../icons/Launch.svelte";
+</script>
+
+<Link
+  {...$$restProps}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+  target="_blank"
+  icon={Launch}
+>
+  <slot />
+</Link>

package/src/Link/index.js

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

package/src/ListBox/ListBox.svelte

@@ -0,0 +1,64 @@
+<script>
+  /**
+   * Set the size of the list box
+   * @type {"sm" | "xl"}
+   */
+  export let size = undefined;
+
+  /**
+   * Set the type of the list box
+   * @type {"default" | "inline"}
+   */
+  export let type = "default";
+
+  /** Set to `true` to open the list box */
+  export let open = false;
+
+  /** Set to `true` to enable the light variant */
+  export let light = false;
+
+  /** Set to `true` to disable the list box */
+  export let disabled = false;
+
+  /** Set to `true` to indicate an invalid state */
+  export let invalid = false;
+
+  /** Specify the invalid state text */
+  export let invalidText = "";
+
+  /** Set to `true` to indicate an warning state */
+  export let warn = false;
+
+  /** Specify the warning state text */
+  export let warnText = "";
+</script>
+
+<div
+  role="listbox"
+  tabindex="-1"
+  data-invalid={invalid || undefined}
+  class:bx--list-box={true}
+  class:bx--list-box--sm={size === "sm"}
+  class:bx--list-box--xl={size === "xl"}
+  class:bx--list-box--inline={type === "inline"}
+  class:bx--list-box--disabled={disabled}
+  class:bx--list-box--expanded={open}
+  class:bx--list-box--light={light}
+  class:bx--list-box--warning={!invalid && warn}
+  {...$$restProps}
+  on:keydown
+  on:keydown={(e) => {
+    if (e.key === "Escape") {
+      e.stopPropagation();
+    }
+  }}
+  on:click|preventDefault
+>
+  <slot />
+</div>
+{#if invalid}
+  <div class:bx--form-requirement={true}>{invalidText}</div>
+{/if}
+{#if !invalid && warn}
+  <div class:bx--form-requirement={true}>{warnText}</div>
+{/if}

package/src/ListBox/ListBoxField.svelte

@@ -0,0 +1,67 @@
+<script>
+  /**
+   * @typedef {"close" | "open"} ListBoxFieldTranslationId
+   */
+
+  /** Set to `true` to disable the list box field */
+  export let disabled = false;
+
+  /** Specify the role attribute */
+  export let role = "combobox";
+
+  /** Specify the tabindex */
+  export let tabindex = "-1";
+
+  /** Default translation ids */
+  export const translationIds = { close: "close", open: "open" };
+
+  /**
+   * Override the default translation ids
+   * @type {(id: ListBoxFieldTranslationId) => string}
+   */
+  export let translateWithId = (id) => defaultTranslations[id];
+
+  /** 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 { getContext } from "svelte";
+
+  const defaultTranslations = {
+    [translationIds.close]: "Close menu",
+    [translationIds.open]: "Open menu",
+  };
+  const ctx = getContext("MultiSelect");
+
+  $: if (ctx && ref) {
+    ctx.declareRef({ key: "field", ref });
+  }
+
+  $: ariaExpanded = $$props["aria-expanded"];
+  $: menuId = `menu-${id}`;
+</script>
+
+<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+<div
+  bind:this={ref}
+  {role}
+  aria-expanded={ariaExpanded}
+  aria-owns={(ariaExpanded && menuId) || undefined}
+  aria-controls={(ariaExpanded && menuId) || undefined}
+  aria-disabled={disabled}
+  aria-label={ariaExpanded ? translateWithId("close") : translateWithId("open")}
+  tabindex={disabled ? "-1" : tabindex}
+  class:bx--list-box__field={true}
+  {...$$restProps}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+  on:keydown|stopPropagation
+  on:focus
+  on:blur
+>
+  <slot />
+</div>

package/src/ListBox/ListBoxMenu.svelte

@@ -0,0 +1,18 @@
+<script>
+  /** 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;
+</script>
+
+<div
+  bind:this={ref}
+  role="listbox"
+  id="menu-{id}"
+  class:bx--list-box__menu={true}
+  {...$$restProps}
+  on:scroll
+>
+  <slot />
+</div>

package/src/ListBox/ListBoxMenuIcon.svelte

@@ -0,0 +1,38 @@
+<script>
+  /**
+   * @typedef {"close" | "open"} ListBoxMenuIconTranslationId
+   */
+
+  /** Set to `true` to open the list box menu icon */
+  export let open = false;
+
+  /** Default translation ids */
+  export const translationIds = { close: "close", open: "open" };
+
+  /**
+   * Override the default translation ids
+   * @type {(id: ListBoxMenuIconTranslationId) => string}
+   */
+  export let translateWithId = (id) => defaultTranslations[id];
+
+  import ChevronDown from "../icons/ChevronDown.svelte";
+
+  const defaultTranslations = {
+    [translationIds.close]: "Close menu",
+    [translationIds.open]: "Open menu",
+  };
+
+  $: translationId = open ? translationIds.close : translationIds.open;
+  $: description =
+    translateWithId?.(translationId) ?? defaultTranslations[translationId];
+</script>
+
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
+  class:bx--list-box__menu-icon={true}
+  class:bx--list-box__menu-icon--open={open}
+  {...$$restProps}
+  on:click|preventDefault
+>
+  <ChevronDown aria-label={description} title={description} />
+</div>

package/src/ListBox/ListBoxMenuItem.svelte

@@ -0,0 +1,38 @@
+<script>
+  /** Set to `true` to enable the active state */
+  export let active = false;
+
+  /** Set to `true` to enable the highlighted state */
+  export let highlighted = false;
+
+  /** Set to `true` to disable the menu item */
+  export let disabled = false;
+
+  let ref = null;
+
+  $: isTruncated = ref?.offsetWidth < ref?.scrollWidth;
+  $: title = isTruncated ? ref?.innerText : undefined;
+  $: if (highlighted && ref && !ref.matches(":hover")) {
+    // Scroll highlighted item into view if using keyboard navigation
+    ref.scrollIntoView({ block: "nearest" });
+  }
+</script>
+
+<div
+  role="option"
+  tabindex="-1"
+  class:bx--list-box__menu-item={true}
+  class:bx--list-box__menu-item--active={active}
+  class:bx--list-box__menu-item--highlighted={highlighted || active}
+  aria-selected={active}
+  aria-disabled={disabled ? true : undefined}
+  disabled={disabled ? true : undefined}
+  {...$$restProps}
+  on:click
+  on:mouseenter
+  on:mouseleave
+>
+  <div bind:this={ref} {title} class:bx--list-box__menu-item__option={true}>
+    <slot />
+  </div>
+</div>

package/src/ListBox/ListBoxSelection.svelte

@@ -0,0 +1,114 @@
+<script>
+  /**
+   * @event {KeyboardEvent | MouseEvent} clear
+   */
+
+  /**
+   * @typedef {"clearAll" | "clearSelection"} ListBoxSelectionTranslationId
+   */
+
+  /**
+   * Specify the number of selected items
+   * @type {number}
+   */
+  export let selectionCount = undefined;
+
+  /** Set to `true` to disable the list box selection */
+  export let disabled = false;
+
+  /** Default translation ids */
+  export const translationIds = {
+    clearAll: "clearAll",
+    clearSelection: "clearSelection",
+  };
+
+  /**
+   * Override the default translation ids
+   * @type {(id: ListBoxSelectionTranslationId) => string}
+   */
+  export let translateWithId = (id) => defaultTranslations[id];
+
+  /** Obtain a reference to the top-level HTML element */
+  export let ref = null;
+
+  import { createEventDispatcher, getContext } from "svelte";
+  import Close from "../icons/Close.svelte";
+
+  const defaultTranslations = {
+    [translationIds.clearAll]: "Clear all selected items",
+    [translationIds.clearSelection]: "Clear selected item",
+  };
+  const dispatch = createEventDispatcher();
+  const ctx = getContext("MultiSelect");
+
+  $: if (ctx && ref) {
+    ctx.declareRef({ key: "selection", ref });
+  }
+  $: translationId =
+    selectionCount === undefined
+      ? translationIds.clearSelection
+      : translationIds.clearAll;
+  $: buttonLabel =
+    translateWithId?.(translationId) ?? defaultTranslations[translationId];
+  $: description =
+    translateWithId?.(translationId) ?? defaultTranslations[translationId];
+</script>
+
+{#if selectionCount !== undefined}
+  <div
+    class:bx--tag={true}
+    class:bx--tag--filter={true}
+    class:bx--tag--high-contrast={true}
+    class:bx--tag--disabled={disabled}
+  >
+    <span class:bx--tag__label={true} title={selectionCount}>
+      {selectionCount}
+    </span>
+    <div
+      bind:this={ref}
+      role="button"
+      tabindex={disabled ? -1 : 0}
+      class:bx--tag__close-icon={true}
+      on:click|preventDefault|stopPropagation={(e) => {
+        if (!disabled) {
+          dispatch("clear", e);
+        }
+      }}
+      on:keydown|stopPropagation={(e) => {
+        if (!disabled && (e.key === "Enter" || e.key === " ")) {
+          dispatch("clear", e);
+        }
+      }}
+      {disabled}
+      aria-label={buttonLabel}
+      title={description}
+    >
+      <Close />
+    </div>
+  </div>
+{:else}
+  <div
+    bind:this={ref}
+    role="button"
+    aria-label={description}
+    title={description}
+    tabindex={disabled ? "-1" : "0"}
+    class:bx--list-box__selection={true}
+    class:bx--tag--filter={selectionCount}
+    class:bx--list-box__selection--multi={selectionCount}
+    {...$$restProps}
+    on:click|preventDefault|stopPropagation={(e) => {
+      if (!disabled) {
+        dispatch("clear", e);
+      }
+    }}
+    on:keydown|stopPropagation={(e) => {
+      if (!disabled && (e.key === "Enter" || e.key === " ")) {
+        dispatch("clear", e);
+      }
+    }}
+  >
+    {#if selectionCount !== undefined}{selectionCount}{/if}
+    <Close />
+  </div>
+{/if}

package/src/ListBox/index.js

@@ -0,0 +1,6 @@
+export { default as ListBox } from "./ListBox.svelte";
+export { default as ListBoxField } from "./ListBoxField.svelte";
+export { default as ListBoxMenu } from "./ListBoxMenu.svelte";
+export { default as ListBoxMenuIcon } from "./ListBoxMenuIcon.svelte";
+export { default as ListBoxMenuItem } from "./ListBoxMenuItem.svelte";
+export { default as ListBoxSelection } from "./ListBoxSelection.svelte";

package/src/ListItem/ListItem.svelte

@@ -0,0 +1,12 @@
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+<li
+  class:bx--list__item={true}
+  {...$$restProps}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+>
+  <slot />
+</li>

package/src/ListItem/index.js

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