@ifloppy/maxcraftmc-ui-svelte 0.1.0

package/src/Notification/NotificationButton.svelte

@@ -0,0 +1,47 @@
+<script>
+  /**
+   * Set the type of notification
+   * @type {"toast" | "inline"}
+   */
+  export let notificationType = "toast";
+
+  /**
+   * Specify the icon to render
+   * @type {any}
+   */
+  export let icon = Close;
+
+  /**
+   * Specify the title of the icon
+   * @type {string}
+   */
+  export let title = undefined;
+
+  /** Specify the ARIA label for the icon */
+  export let iconDescription = "Close icon";
+
+  import Close from "../icons/Close.svelte";
+</script>
+
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+<button
+  type="button"
+  aria-label={iconDescription}
+  title={iconDescription}
+  class:bx--toast-notification__close-button={notificationType === "toast"}
+  class:bx--inline-notification__close-button={notificationType === "inline"}
+  {...$$restProps}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+>
+  <svelte:component
+    this={icon}
+    size={20}
+    {title}
+    class="{notificationType === 'toast' &&
+      'bx--toast-notification__close-icon'} {notificationType === 'inline' &&
+      'bx--inline-notification__close-icon'}"
+  />
+</button>

package/src/Notification/NotificationIcon.svelte

@@ -0,0 +1,41 @@
+<script>
+  /**
+   * Specify the kind of notification icon
+   * @type {"error" | "info" | "info-square" | "success" | "warning" | "warning-alt"}
+   */
+  export let kind = "error";
+
+  /**
+   * Set the type of notification
+   * @type {"toast" | "inline"}
+   */
+  export let notificationType = "toast";
+
+  /** Specify the ARIA label for the icon */
+  export let iconDescription;
+
+  import CheckmarkFilled from "../icons/CheckmarkFilled.svelte";
+  import ErrorFilled from "../icons/ErrorFilled.svelte";
+  import InformationFilled from "../icons/InformationFilled.svelte";
+  import InformationSquareFilled from "../icons/InformationSquareFilled.svelte";
+  import WarningFilled from "../icons/WarningFilled.svelte";
+  import WarningAltFilled from "../icons/WarningAltFilled.svelte";
+
+  const icons = {
+    error: ErrorFilled,
+    "info-square": InformationSquareFilled,
+    info: InformationFilled,
+    success: CheckmarkFilled,
+    warning: WarningFilled,
+    "warning-alt": WarningAltFilled,
+  };
+</script>
+
+<svelte:component
+  this={icons[kind]}
+  size={20}
+  title={iconDescription}
+  class="{notificationType === 'toast' &&
+    'bx--toast-notification__icon'} {notificationType === 'inline' &&
+    'bx--inline-notification__icon'}"
+/>

package/src/Notification/ToastNotification.svelte

@@ -0,0 +1,131 @@
+<script>
+  /**
+   * @event {{ timeout: boolean }} close
+   */
+
+  /**
+   * Specify the kind of notification
+   * @type {"error" | "info" | "info-square" | "success" | "warning" | "warning-alt"}
+   */
+  export let kind = "error";
+
+  /** Set to `true` to use the low contrast variant */
+  export let lowContrast = false;
+
+  /** Set the timeout duration (ms) to hide the notification after opening it */
+  export let timeout = 0;
+
+  /** Set the `role` attribute */
+  export let role = "alert";
+
+  /** Specify the title text */
+  export let title = "";
+
+  /** Specify the subtitle text */
+  export let subtitle = "";
+
+  /** Specify the caption text */
+  export let caption = "";
+
+  /**
+   * Specify the ARIA label for the status icon
+   * @type {string}
+   * */
+  export let statusIconDescription = kind + " icon";
+
+  /** Specify the ARIA label for the close button */
+  export let closeButtonDescription = "Close notification";
+
+  /** Set to `true` to hide the close button */
+  export let hideCloseButton = false;
+
+  /**
+   * Set to `true` for the notification to span
+   * the full width of its containing element.
+   */
+  export let fullWidth = false;
+
+  import { createEventDispatcher, onMount } from "svelte";
+  import NotificationButton from "./NotificationButton.svelte";
+  import NotificationIcon from "./NotificationIcon.svelte";
+
+  const dispatch = createEventDispatcher();
+
+  let open = true;
+  let timeoutId = undefined;
+
+  function close(closeFromTimeout) {
+    // Clear the timer if the close button was clicked.
+    clearTimeout(timeoutId);
+
+    const shouldContinue = dispatch(
+      "close",
+      { timeout: closeFromTimeout === true },
+      { cancelable: true },
+    );
+    if (shouldContinue) {
+      open = false;
+    }
+  }
+
+  onMount(() => {
+    return () => {
+      clearTimeout(timeoutId);
+    };
+  });
+
+  $: if (typeof window !== "undefined") {
+    /**
+     * Clear the timer if {@link timeout} changes.
+     * If set to `0`, no new timeout is started.
+     * Else, a new timeout is started if {@link open} is not set to `false`.
+     */
+    clearTimeout(timeoutId);
+
+    /** Only start the timer of {@link open} has not been set to `false`. */
+    if (open && timeout) {
+      timeoutId = setTimeout(() => close(true), timeout);
+    }
+  }
+</script>
+
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+{#if open}
+  <div
+    {role}
+    class:bx--toast-notification={true}
+    class:bx--toast-notification--low-contrast={lowContrast}
+    class:bx--toast-notification--error={kind === "error"}
+    class:bx--toast-notification--info={kind === "info"}
+    class:bx--toast-notification--info-square={kind === "info-square"}
+    class:bx--toast-notification--success={kind === "success"}
+    class:bx--toast-notification--warning={kind === "warning"}
+    class:bx--toast-notification--warning-alt={kind === "warning-alt"}
+    style:width={fullWidth ? "100%" : undefined}
+    {...$$restProps}
+    on:click
+    on:mouseover
+    on:mouseenter
+    on:mouseleave
+  >
+    <NotificationIcon {kind} iconDescription={statusIconDescription} />
+    <div class:bx--toast-notification__details={true}>
+      <h3 class:bx--toast-notification__title={true}>
+        <slot name="title">{title}</slot>
+      </h3>
+      <div class:bx--toast-notification__subtitle={true}>
+        <slot name="subtitle">{subtitle}</slot>
+      </div>
+      <div class:bx--toast-notification__caption={true}>
+        <slot name="caption">{caption}</slot>
+      </div>
+      <slot />
+    </div>
+    {#if !hideCloseButton}
+      <NotificationButton
+        iconDescription={closeButtonDescription}
+        on:click={close}
+      />
+    {/if}
+  </div>
+{/if}

package/src/Notification/index.js

@@ -0,0 +1,5 @@
+export { default as ToastNotification } from "./ToastNotification.svelte";
+export { default as InlineNotification } from "./InlineNotification.svelte";
+export { default as NotificationActionButton } from "./NotificationActionButton.svelte";
+export { default as NotificationButton } from "./NotificationButton.svelte";
+export { default as NotificationIcon } from "./NotificationIcon.svelte";

package/src/NumberInput/NumberInput.svelte

@@ -0,0 +1,279 @@
+<script>
+  /**
+   * @typedef {"increment" | "decrement"} NumberInputTranslationId
+   * @event {null | number} change
+   * @event {null | number} input
+   */
+
+  /**
+   * Set the size of the input
+   * @type {"sm" | "xl"}
+   */
+  export let size = undefined;
+
+  /**
+   * Specify the input value.
+   * Use `null` to denote "no value"
+   * @type {null | number}
+   */
+  export let value = null;
+
+  /** Specify the step increment */
+  export let step = 1;
+
+  /**
+   * Specify the maximum value
+   * @type {number}
+   */
+  export let max = undefined;
+
+  /**
+   * Specify the minimum value
+   * @type {number}
+   */
+  export let min = undefined;
+
+  /** Set to `true` to enable the light variant */
+  export let light = false;
+
+  /** Set to `true` for the input to be read-only */
+  export let readonly = false;
+
+  /** Set to `true` to allow for an empty value */
+  export let allowEmpty = false;
+
+  /** Set to `true` to disable the input */
+  export let disabled = false;
+
+  /** Set to `true` to hide the input stepper buttons */
+  export let hideSteppers = false;
+
+  /** Specify the ARIA label for the increment icons */
+  export let iconDescription = "";
+
+  /** 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 = "";
+
+  /** Specify the helper text */
+  export let helperText = "";
+
+  /** Specify the label text */
+  export let label = "";
+
+  /** Set to `true` to visually hide the label text */
+  export let hideLabel = false;
+
+  /**
+   * Override the default translation ids
+   * @type {(id: NumberInputTranslationId) => string}
+   */
+  export let translateWithId = (id) => defaultTranslations[id];
+
+  /**
+   * Default translation ids
+   * @type {{ increment: "increment"; decrement: "decrement" }}
+   */
+  export const translationIds = {
+    increment: "increment",
+    decrement: "decrement",
+  };
+
+  /** Set an id for the input element */
+  export let id = "ccs-" + Math.random().toString(36);
+
+  /**
+   * Specify a name attribute for the input
+   * @type {string}
+   */
+  export let name = undefined;
+
+  /** Obtain a reference to the input HTML element */
+  export let ref = null;
+
+  import { createEventDispatcher } from "svelte";
+  import Add from "../icons/Add.svelte";
+  import Subtract from "../icons/Subtract.svelte";
+  import WarningFilled from "../icons/WarningFilled.svelte";
+  import WarningAltFilled from "../icons/WarningAltFilled.svelte";
+  import EditOff from "../icons/EditOff.svelte";
+
+  const defaultTranslations = {
+    [translationIds.increment]: "Increment number",
+    [translationIds.decrement]: "Decrement number",
+  };
+
+  const dispatch = createEventDispatcher();
+
+  function updateValue(isIncrementing) {
+    if (isIncrementing) {
+      ref.stepUp();
+    } else {
+      ref.stepDown();
+    }
+    value = +ref.value;
+
+    dispatch("input", value);
+    dispatch("change", value);
+  }
+
+  $: incrementLabel = translateWithId("increment");
+  $: decrementLabel = translateWithId("decrement");
+  $: error =
+    (invalid && !readonly) ||
+    (!allowEmpty && value == null) ||
+    value > max ||
+    (typeof value === "number" && value < min);
+  $: errorId = `error-${id}`;
+  $: ariaLabel =
+    $$props["aria-label"] ||
+    "Numeric input field with increment and decrement buttons";
+
+  function parse(raw) {
+    return raw != "" ? Number(raw) : null;
+  }
+
+  function onInput({ target }) {
+    value = parse(target.value);
+
+    dispatch("input", value);
+  }
+
+  function onChange({ target }) {
+    dispatch("change", parse(target.value));
+  }
+</script>
+
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
+  class:bx--form-item={true}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+>
+  <div
+    data-invalid={error || undefined}
+    class:bx--number={true}
+    class:bx--number--helpertext={true}
+    class:bx--number--readonly={readonly}
+    class:bx--number--light={light}
+    class:bx--number--nolabel={hideLabel}
+    class:bx--number--nosteppers={hideSteppers}
+    class:bx--number--sm={size === "sm"}
+    class:bx--number--xl={size === "xl"}
+  >
+    {#if $$slots.label || label}
+      <label
+        for={id}
+        class:bx--label={true}
+        class:bx--label--disabled={disabled}
+        class:bx--visually-hidden={hideLabel}
+      >
+        <slot name="label">{label}</slot>
+      </label>
+    {/if}
+    <div
+      class:bx--number__input-wrapper={true}
+      class:bx--number__input-wrapper--warning={!invalid && warn}
+    >
+      <input
+        bind:this={ref}
+        type="number"
+        pattern="[0-9]*"
+        aria-describedby={errorId}
+        data-invalid={error || undefined}
+        aria-invalid={error || undefined}
+        aria-label={label ? undefined : ariaLabel}
+        {disabled}
+        {id}
+        {name}
+        {max}
+        {min}
+        {step}
+        value={value ?? ""}
+        {readonly}
+        {...$$restProps}
+        on:change={onChange}
+        on:input={onInput}
+        on:keydown
+        on:keyup
+        on:focus
+        on:blur
+        on:paste
+      />
+      {#if readonly}
+        <EditOff class="bx--text-input__readonly-icon" />
+      {:else}
+        {#if invalid}
+          <WarningFilled class="bx--number__invalid" />
+        {/if}
+        {#if !invalid && warn}
+          <WarningAltFilled
+            class="bx--number__invalid bx--number__invalid--warning"
+          />
+        {/if}
+      {/if}
+      {#if !hideSteppers}
+        <div class:bx--number__controls={true}>
+          <button
+            type="button"
+            tabindex="-1"
+            title={decrementLabel || iconDescription}
+            aria-label={decrementLabel || iconDescription}
+            class:bx--number__control-btn={true}
+            class:down-icon={true}
+            on:click={() => {
+              updateValue(false);
+            }}
+            {disabled}
+          >
+            <Subtract class="down-icon" />
+          </button>
+          <div class:bx--number__rule-divider={true}></div>
+          <button
+            type="button"
+            tabindex="-1"
+            title={incrementLabel || iconDescription}
+            aria-label={incrementLabel || iconDescription}
+            class:bx--number__control-btn={true}
+            class:up-icon={true}
+            on:click={() => {
+              updateValue(true);
+            }}
+            {disabled}
+          >
+            <Add class="up-icon" />
+          </button>
+          <div class:bx--number__rule-divider={true}></div>
+        </div>
+      {/if}
+    </div>
+    {#if !error && !warn && helperText}
+      <div
+        class:bx--form__helper-text={true}
+        class:bx--form__helper-text--disabled={disabled}
+      >
+        {helperText}
+      </div>
+    {/if}
+    {#if error}
+      <div id={errorId} class:bx--form-requirement={true}>
+        {invalidText}
+      </div>
+    {/if}
+    {#if !error && warn}
+      <div id={errorId} class:bx--form-requirement={true}>{warnText}</div>
+    {/if}
+  </div>
+</div>

package/src/NumberInput/NumberInputSkeleton.svelte

@@ -0,0 +1,20 @@
+<script>
+  /** Set to `true` to hide the label text */
+  export let hideLabel = false;
+</script>
+
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
+  class:bx--form-item={true}
+  {...$$restProps}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+>
+  {#if !hideLabel}
+    <span class:bx--label={true} class:bx--skeleton={true}></span>
+  {/if}
+  <div class:bx--number={true} class:bx--skeleton={true}></div>
+</div>

package/src/NumberInput/index.js

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

package/src/OrderedList/OrderedList.svelte

@@ -0,0 +1,26 @@
+<script>
+  /** Set to `true` to use the nested variant */
+  export let nested = false;
+
+  /** Set to `true` to use native list styles */
+  export let native = false;
+
+  /** Set to `true` to use Carbon's expressive typesetting */
+  export let expressive = false;
+</script>
+
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+<ol
+  class:bx--list--ordered={!native}
+  class:bx--list--ordered--native={native}
+  class:bx--list--nested={nested}
+  class:bx--list--expressive={expressive}
+  {...$$restProps}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+>
+  <slot />
+</ol>

package/src/OrderedList/index.js

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