@ifloppy/maxcraftmc-ui-svelte 0.1.0

package/src/Dropdown/Dropdown.svelte

@@ -0,0 +1,336 @@
+<script>
+  /**
+   * @typedef {any} DropdownItemId
+   * @typedef {string} DropdownItemText
+   * @typedef {{ id: DropdownItemId; text: DropdownItemText; disabled?: boolean; }} DropdownItem
+   * @event {{ selectedId: DropdownItemId, selectedItem: DropdownItem }} select
+   * @slot {{ item: DropdownItem; index: number; }}
+   */
+
+  /**
+   * Set the dropdown items
+   * @type {ReadonlyArray<DropdownItem>}
+   */
+  export let items = [];
+
+  /**
+   * Override the display of a dropdown item
+   * @type {(item: DropdownItem) => string}
+   */
+  export let itemToString = (item) => item.text || item.id;
+
+  /**
+   * Specify the selected item id
+   * @type {DropdownItemId}
+   */
+  export let selectedId;
+
+  /**
+   * Specify the type of dropdown
+   * @type {"default" | "inline"}
+   */
+  export let type = "default";
+
+  /**
+   * Specify the direction of the dropdown menu
+   * @type {"bottom" | "top"}
+   */
+  export let direction = "bottom";
+
+  /**
+   * Specify the size of the dropdown field
+   * @type {"sm" | "lg" | "xl"}
+   */
+  export let size = undefined;
+
+  /** Set to `true` to open the dropdown */
+  export let open = false;
+
+  /** Set to `true` to enable the light variant */
+  export let light = false;
+
+  /** Set to `true` to disable the dropdown */
+  export let disabled = false;
+
+  /** Specify the title text */
+  export let titleText = "";
+
+  /** 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 list box label
+   * @type {string}
+   */
+  export let label = undefined;
+
+  /** Set to `true` to visually hide the label text */
+  export let hideLabel = false;
+
+  /**
+   * Override the chevron icon label based on the open state.
+   * Defaults to "Open menu" when closed and "Close menu" when open
+   * @type {(id: import("../ListBox/ListBoxMenuIcon.svelte").ListBoxMenuIconTranslationId) => string}
+   */
+  export let translateWithId = undefined;
+
+  /** Set an id for the list box component */
+  export let id = "ccs-" + Math.random().toString(36);
+
+  /**
+   * Specify a name attribute for the list box
+   * @type {string}
+   */
+  export let name = undefined;
+
+  /** Obtain a reference to the button HTML element */
+  export let ref = null;
+
+  import { createEventDispatcher, onMount } from "svelte";
+  import WarningFilled from "../icons/WarningFilled.svelte";
+  import WarningAltFilled from "../icons/WarningAltFilled.svelte";
+  import {
+    ListBox,
+    ListBoxMenu,
+    ListBoxMenuIcon,
+    ListBoxMenuItem,
+  } from "../ListBox";
+
+  const dispatch = createEventDispatcher();
+
+  let highlightedIndex = -1;
+
+  $: inline = type === "inline";
+  $: selectedItem = items.find((item) => item.id === selectedId);
+  $: if (!open) {
+    highlightedIndex = -1;
+  }
+
+  function change(dir) {
+    let index = highlightedIndex + dir;
+
+    if (items.length === 0) return;
+    if (index < 0) {
+      index = items.length - 1;
+    } else if (index >= items.length) {
+      index = 0;
+    }
+
+    let disabled = items[index].disabled;
+
+    while (disabled) {
+      index = index + dir;
+
+      if (index < 0) {
+        index = items.length - 1;
+      } else if (index >= items.length) {
+        index = 0;
+      }
+
+      disabled = items[index].disabled;
+    }
+
+    highlightedIndex = index;
+  }
+
+  const dispatchSelect = () => {
+    dispatch("select", {
+      selectedId,
+      selectedItem: items.find((item) => item.id === selectedId),
+    });
+  };
+
+  const pageClickHandler = ({ target }) => {
+    if (open && ref && !ref.contains(target)) {
+      open = false;
+    }
+  };
+
+  onMount(() => {
+    if (parent) {
+      parent.addEventListener("click", pageClickHandler);
+    }
+
+    return () => {
+      if (parent) {
+        parent.removeEventListener("click", pageClickHandler);
+      }
+    };
+  });
+</script>
+
+<svelte:window on:click={pageClickHandler} />
+
+<div
+  class:bx--dropdown__wrapper={true}
+  class:bx--list-box__wrapper={true}
+  class:bx--dropdown__wrapper--inline={inline}
+  class:bx--list-box__wrapper--inline={inline}
+  class:bx--dropdown__wrapper--inline--invalid={inline && invalid}
+  {...$$restProps}
+>
+  {#if titleText}
+    <label
+      for={id}
+      class:bx--label={true}
+      class:bx--label--disabled={disabled}
+      class:bx--visually-hidden={hideLabel}
+    >
+      {titleText}
+    </label>
+  {/if}
+  <ListBox
+    role={undefined}
+    {type}
+    {size}
+    {name}
+    aria-label={$$props["aria-label"]}
+    class="bx--dropdown 
+      {direction === 'top' && 'bx--list-box--up'} 
+      {invalid && 'bx--dropdown--invalid'} 
+      {!invalid && warn && 'bx--dropdown--warning'} 
+      {open && 'bx--dropdown--open'}
+      {size === 'sm' && 'bx--dropdown--sm'}
+      {size === 'xl' && 'bx--dropdown--xl'}
+      {inline && 'bx--dropdown--inline'}
+      {disabled && 'bx--dropdown--disabled'}
+      {light && 'bx--dropdown--light'}"
+    on:click={({ target }) => {
+      if (disabled) return;
+      open = ref.contains(target) ? !open : false;
+    }}
+    {disabled}
+    {open}
+    {invalid}
+    {invalidText}
+    {light}
+    {warn}
+    {warnText}
+  >
+    {#if invalid}
+      <WarningFilled class="bx--list-box__invalid-icon" />
+    {/if}
+    {#if !invalid && warn}
+      <WarningAltFilled
+        class="bx--list-box__invalid-icon bx--list-box__invalid-icon--warning"
+      />
+    {/if}
+    <button
+      bind:this={ref}
+      type="button"
+      class:bx--list-box__field={true}
+      tabindex="0"
+      aria-expanded={open}
+      on:keydown={(e) => {
+        const { key } = e;
+        if (["Enter", "ArrowDown", "ArrowUp"].includes(key)) {
+          e.preventDefault();
+        }
+        if (key === "Enter") {
+          open = !open;
+          if (
+            highlightedIndex > -1 &&
+            items[highlightedIndex].id !== selectedId
+          ) {
+            selectedId = items[highlightedIndex].id;
+            dispatchSelect();
+            open = false;
+          }
+        } else if (key === "Tab") {
+          open = false;
+        } else if (key === "ArrowDown") {
+          if (!open) open = true;
+          change(1);
+        } else if (key === "ArrowUp") {
+          if (!open) open = true;
+          change(-1);
+        } else if (key === "Escape") {
+          open = false;
+        }
+      }}
+      on:keyup={(e) => {
+        const { key } = e;
+        if ([" "].includes(key)) {
+          e.preventDefault();
+        } else {
+          return;
+        }
+        open = !open;
+
+        if (
+          highlightedIndex > -1 &&
+          items[highlightedIndex].id !== selectedId
+        ) {
+          selectedId = items[highlightedIndex].id;
+          dispatchSelect();
+          open = false;
+        }
+      }}
+      {disabled}
+      {translateWithId}
+      {id}
+    >
+      <span class:bx--list-box__label={true}>
+        {#if selectedItem}{itemToString(selectedItem)}{:else}{label}{/if}
+      </span>
+      <ListBoxMenuIcon
+        on:click={(e) => {
+          e.stopPropagation();
+          if (disabled) return;
+          open = !open;
+        }}
+        {translateWithId}
+        {open}
+      />
+    </button>
+    {#if open}
+      <ListBoxMenu aria-labelledby={id} {id}>
+        {#each items as item, i (item.id)}
+          <ListBoxMenuItem
+            id={item.id}
+            active={selectedId === item.id}
+            highlighted={highlightedIndex === i}
+            disabled={item.disabled}
+            on:click={(e) => {
+              if (item.disabled) {
+                e.stopPropagation();
+                return;
+              }
+              selectedId = item.id;
+              dispatchSelect();
+              ref.focus();
+            }}
+            on:mouseenter={() => {
+              if (item.disabled) return;
+              highlightedIndex = i;
+            }}
+          >
+            <slot {item} index={i}>
+              {itemToString(item)}
+            </slot>
+          </ListBoxMenuItem>
+        {/each}
+      </ListBoxMenu>
+    {/if}
+  </ListBox>
+  {#if !inline && !invalid && !warn && helperText}
+    <div
+      class:bx--form__helper-text={true}
+      class:bx--form__helper-text--disabled={disabled}
+    >
+      {helperText}
+    </div>
+  {/if}
+</div>

package/src/Dropdown/DropdownSkeleton.svelte

@@ -0,0 +1,23 @@
+<script>
+  /** Set to `true` to use the inline variant */
+  export let inline = false;
+</script>
+
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
+  class:bx--skeleton={true}
+  class:bx--dropdown-v2={true}
+  class:bx--list-box={true}
+  class:bx--form-item={true}
+  class:bx--list-box--inline={inline}
+  {...$$restProps}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+>
+  <div role="button" class:bx--list-box__field={true}>
+    <span class:bx--list-box__label={true}></span>
+  </div>
+</div>

package/src/Dropdown/index.js

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

package/src/FileUploader/FileUploader.svelte

@@ -0,0 +1,177 @@
+<script>
+  /**
+   * @event {ReadonlyArray<File>} add
+   * @event {ReadonlyArray<File>} remove
+   * @event {ReadonlyArray<File>} change
+   */
+
+  /**
+   * Specify the file uploader status
+   * @type {"uploading" | "edit" | "complete"}
+   */
+  export let status = "uploading";
+
+  /** Set to `true` to disable the file uploader */
+  export let disabled = false;
+
+  /**
+   * Specify the accepted file types
+   * @type {ReadonlyArray<string>}
+   */
+  export let accept = [];
+
+  /**
+   * Obtain a reference to the uploaded files
+   * @type {ReadonlyArray<File>}
+   */
+  export let files = [];
+
+  /** Set to `true` to allow multiple files */
+  export let multiple = false;
+
+  /**
+   * Programmatically clear the uploaded files
+   * @type {() => void}
+   */
+  export const clearFiles = () => {
+    files = [];
+  };
+
+  /**
+   * Specify the label title.
+   * Alternatively, use the named slot "labelTitle" (e.g., `<span slot="labelTitle">...</span>`)
+   */
+  export let labelTitle = "";
+
+  /**
+   * Specify the label description.
+   * Alternatively, use the named slot "labelDescription" (e.g., `<span slot="labelDescription">...</span>`)
+   */
+  export let labelDescription = "";
+
+  /**
+   * Specify the kind of file uploader button
+   * @type {import("../Button/Button.svelte").ButtonProps["kind"]}
+   */
+  export let kind = "primary";
+
+  /**
+   * Specify the size of the file uploader button
+   * @type {import("../Button/Button.svelte").ButtonProps["size"]}
+   */
+  export let size = "small";
+
+  /** Specify the button label */
+  export let buttonLabel = "";
+
+  /** Specify the ARIA label used for the status icons */
+  export let iconDescription = "Provide icon description";
+
+  /** Specify a name attribute for the file button uploader input */
+  export let name = "";
+
+  import { createEventDispatcher, afterUpdate } from "svelte";
+  import Filename from "./Filename.svelte";
+  import FileUploaderButton from "./FileUploaderButton.svelte";
+
+  const dispatch = createEventDispatcher();
+
+  let prevFiles = [];
+
+  /** @type {(file: File) => string} */
+  const getFileId = (file) => file.lastModified + file.name;
+
+  afterUpdate(() => {
+    const fileIds = files.map(getFileId);
+    const prevFileIds = prevFiles.map(getFileId);
+    const addedIds = fileIds.filter((_) => !prevFileIds.includes(_));
+    const removedIds = prevFileIds.filter((_) => !fileIds.includes(_));
+
+    if (addedIds.length > 0) {
+      dispatch(
+        "add",
+        addedIds.map((id) => files.find((file) => id === getFileId(file))),
+      );
+    }
+
+    if (removedIds.length > 0) {
+      dispatch(
+        "remove",
+        removedIds.map((id) =>
+          prevFiles.find((file) => id === getFileId(file)),
+        ),
+      );
+    }
+
+    prevFiles = [...files];
+  });
+</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 labelTitle || $$slots.labelTitle}
+    <p
+      class:bx--file--label={true}
+      class:bx--label-description--disabled={disabled}
+    >
+      <slot name="labelTitle">
+        {labelTitle}
+      </slot>
+    </p>
+  {/if}
+  {#if labelDescription || $$slots.labelDescription}
+    <p
+      class:bx--label-description={true}
+      class:bx--label-description--disabled={disabled}
+    >
+      <slot name="labelDescription">
+        {labelDescription}
+      </slot>
+    </p>
+  {/if}
+  <FileUploaderButton
+    {disabled}
+    disableLabelChanges
+    labelText={buttonLabel}
+    {accept}
+    {name}
+    {multiple}
+    {kind}
+    {size}
+    on:change
+    on:change={(e) => {
+      files = e.detail;
+    }}
+  />
+  <div class:bx--file-container={true}>
+    {#each files as { name }, i}
+      <span class:bx--file__selected-file={true}>
+        <p class:bx--file-filename={true}>{name}</p>
+        <span class:bx--file__state-container={true}>
+          <Filename
+            {iconDescription}
+            {status}
+            on:keydown
+            on:keydown={({ key }) => {
+              if (key === " " || key === "Enter") {
+                files = files.filter((_, index) => index !== i);
+              }
+            }}
+            on:click
+            on:click={() => {
+              files = files.filter((_, index) => index !== i);
+            }}
+          />
+        </span>
+      </span>
+    {/each}
+  </div>
+</div>

package/src/FileUploader/FileUploaderButton.svelte

@@ -0,0 +1,125 @@
+<script>
+  /**
+   * @event {ReadonlyArray<File>} change
+   */
+
+  /**
+   * Specify the accepted file types
+   * @type {ReadonlyArray<string>}
+   */
+  export let accept = [];
+
+  /**
+   * Obtain a reference to the uploaded files
+   * @type {ReadonlyArray<File>}
+   */
+  export let files = [];
+
+  /** Set to `true` to allow multiple files */
+  export let multiple = false;
+
+  /** Set to `true` to disable the input */
+  export let disabled = false;
+
+  /** Set to `true` to disable label changes */
+  export let disableLabelChanges = false;
+
+  /**
+   * Specify the kind of file uploader button
+   * @type {import("../Button/Button.svelte").ButtonProps["kind"]}
+   */
+  export let kind = "primary";
+
+  /**
+   * Specify the size of the file uploader button
+   * @type {import("../Button/Button.svelte").ButtonProps["size"]}
+   */
+  export let size = "small";
+
+  /** Specify the label text */
+  export let labelText = "Add file";
+
+  /** Specify the label role */
+  export let role = "button";
+
+  /** Specify `tabindex` attribute */
+  export let tabindex = "0";
+
+  /** Set an id for the input element */
+  export let id = "ccs-" + Math.random().toString(36);
+
+  /** Specify a name attribute for the input */
+  export let name = "";
+
+  /** Obtain a reference to the input HTML element */
+  export let ref = null;
+
+  import { createEventDispatcher } from "svelte";
+
+  const dispatch = createEventDispatcher();
+
+  let initialLabelText = labelText;
+
+  $: if (ref && files.length === 0) {
+    labelText = initialLabelText;
+    ref.value = "";
+  }
+</script>
+
+<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+<label
+  aria-disabled={disabled}
+  for={id}
+  tabindex={disabled ? "-1" : tabindex}
+  class:bx--btn={true}
+  class:bx--btn--disabled={disabled}
+  class:bx--btn--primary={kind === "primary"}
+  class:bx--btn--secondary={kind === "secondary"}
+  class:bx--btn--tertiary={kind === "tertiary"}
+  class:bx--btn--ghost={kind === "ghost"}
+  class:bx--btn--danger={kind === "danger"}
+  class:bx--btn--danger-tertiary={kind === "danger-tertiary"}
+  class:bx--btn--danger-ghost={kind === "danger-ghost"}
+  class:bx--btn--sm={size === "small"}
+  class:bx--btn--field={size === "field"}
+  class:bx--btn--lg={size === "lg"}
+  class:bx--btn--xl={size === "xl"}
+  on:keydown
+  on:keydown={({ key }) => {
+    if (key === " " || key === "Enter") {
+      ref.click();
+    }
+  }}
+>
+  <span {role}>
+    <slot name="labelText">
+      {labelText}
+    </slot>
+  </span>
+</label>
+<input
+  bind:this={ref}
+  type="file"
+  tabindex="-1"
+  {accept}
+  {disabled}
+  {id}
+  {multiple}
+  {name}
+  class:bx--visually-hidden={true}
+  {...$$restProps}
+  on:change|stopPropagation={({ target }) => {
+    files = [...target.files];
+
+    if (files && !disableLabelChanges) {
+      labelText = files.length > 1 ? `${files.length} files` : files[0].name;
+    }
+
+    dispatch("change", files);
+  }}
+  on:click
+  on:click={({ target }) => {
+    target.value = null;
+  }}
+/>