@ifloppy/maxcraftmc-ui-svelte 0.1.0

package/src/FileUploader/FileUploaderDropContainer.svelte

@@ -0,0 +1,129 @@
+<script>
+  /**
+   * @event {ReadonlyArray<File>} add
+   * @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;
+
+  /**
+   * Override the default behavior of validating uploaded files.
+   * By default, files are not validated
+   * @type {(files: ReadonlyArray<File>) => ReadonlyArray<File>}
+   */
+  export let validateFiles = (files) => files;
+
+  /** Specify the label text */
+  export let labelText = "Add file";
+
+  /** Specify the `role` attribute of the drop container */
+  export let role = "button";
+
+  /** Set to `true` to disable the input */
+  export let disabled = false;
+
+  /** 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 over = false;
+</script>
+
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
+  class:bx--file={true}
+  {...$$restProps}
+  on:dragover
+  on:dragover|preventDefault|stopPropagation={({ dataTransfer }) => {
+    if (!disabled) {
+      over = true;
+      dataTransfer.dropEffect = "copy";
+    }
+  }}
+  on:dragleave
+  on:dragleave|preventDefault|stopPropagation={({ dataTransfer }) => {
+    if (!disabled) {
+      over = false;
+      dataTransfer.dropEffect = "move";
+    }
+  }}
+  on:drop
+  on:drop|preventDefault|stopPropagation={({ dataTransfer }) => {
+    if (!disabled) {
+      over = false;
+      files = validateFiles([...dataTransfer.files]);
+      dispatch("add", files);
+      dispatch("change", files);
+    }
+  }}
+>
+  <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+  <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+  <label
+    for={id}
+    {tabindex}
+    class:bx--file-browse-btn={true}
+    class:bx--file-browse-btn--disabled={disabled}
+    on:keydown
+    on:keydown={({ key }) => {
+      if (key === " " || key === "Enter") {
+        ref.click();
+      }
+    }}
+  >
+    <div
+      {role}
+      class:bx--file__drop-container={true}
+      class:bx--file__drop-container--drag-over={over}
+    >
+      <slot name="labelText">
+        {labelText}
+      </slot>
+    </div>
+  </label>
+  <input
+    bind:this={ref}
+    type="file"
+    tabindex="-1"
+    {id}
+    {disabled}
+    {accept}
+    {name}
+    {multiple}
+    class:bx--file-input={true}
+    on:change={({ target }) => {
+      files = validateFiles([...target.files]);
+      dispatch("add", files);
+      dispatch("change", files);
+    }}
+    on:click
+    on:click={({ target }) => {
+      target.value = null;
+    }}
+  />
+</div>

package/src/FileUploader/FileUploaderItem.svelte

@@ -0,0 +1,79 @@
+<script>
+  /**
+   * @event {string} delete
+   */
+
+  /**
+   * Specify the file uploader status
+   * @type {"uploading" | "edit" | "complete"}
+   */
+  export let status = "uploading";
+
+  /**
+   * Specify the size of button skeleton
+   * @type {"default" | "field" | "small"}
+   */
+  export let size = "default";
+
+  /** Specify the ARIA label used for the status icons */
+  export let iconDescription = "";
+
+  /** Set to `true` to indicate an invalid state */
+  export let invalid = false;
+
+  /** Specify the error subject text */
+  export let errorSubject = "";
+
+  /** Specify the error body text */
+  export let errorBody = "";
+
+  /** Set an id for the top-level element */
+  export let id = "ccs-" + Math.random().toString(36);
+
+  /** Specify the file uploader name */
+  export let name = "";
+
+  import { createEventDispatcher } from "svelte";
+  import Filename from "./Filename.svelte";
+
+  const dispatch = createEventDispatcher();
+</script>
+
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<span
+  {id}
+  class:bx--file__selected-file={true}
+  class:bx--file__selected-file--invalid={invalid}
+  class:bx--file__selected-file--md={size === "field"}
+  class:bx--file__selected-file--sm={size === "small"}
+  {...$$restProps}
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+>
+  <p class:bx--file-filename={true}>{name}</p>
+  <span class:bx--file__state-container={true}>
+    <Filename
+      on:keydown={({ key }) => {
+        if (key === " " || key === "Enter") {
+          dispatch("delete", id);
+        }
+      }}
+      on:click={() => {
+        dispatch("delete", id);
+      }}
+      {iconDescription}
+      {status}
+      {invalid}
+    />
+  </span>
+  {#if invalid && errorSubject}
+    <div class:bx--form-requirement={true}>
+      <div class:bx--form-requirement__title={true}>{errorSubject}</div>
+      {#if errorBody}
+        <p class:bx--form-requirement__supplement={true}>{errorBody}</p>
+      {/if}
+    </div>
+  {/if}
+</span>

package/src/FileUploader/FileUploaderSkeleton.svelte

@@ -0,0 +1,19 @@
+<script>
+  import ButtonSkeleton from "../Button/ButtonSkeleton.svelte";
+  import SkeletonText from "../SkeletonText/SkeletonText.svelte";
+</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
+>
+  <SkeletonText heading width="100px" />
+  <SkeletonText width="225px" class="bx--label-description" />
+  <ButtonSkeleton />
+</div>

package/src/FileUploader/Filename.svelte

@@ -0,0 +1,57 @@
+<script>
+  /**
+   * @restProps {div | button | svg}
+   */
+
+  /**
+   * Specify the file name status
+   * @type {"uploading" | "edit" | "complete"}
+   */
+  export let status = "uploading";
+
+  /** Specify the ARIA label used for the status icons */
+  export let iconDescription = "";
+
+  /** Set to `true` to indicate an invalid state */
+  export let invalid = false;
+
+  import Close from "../icons/Close.svelte";
+  import CheckmarkFilled from "../icons/CheckmarkFilled.svelte";
+  import WarningFilled from "../icons/WarningFilled.svelte";
+  import Loading from "../Loading/Loading.svelte";
+</script>
+
+{#if status === "uploading"}
+  <Loading
+    description={iconDescription}
+    {...$$restProps}
+    small
+    withOverlay={false}
+  />
+{/if}
+
+{#if status === "edit"}
+  {#if invalid}
+    <WarningFilled class="bx--file-invalid" />
+  {/if}
+  <button
+    aria-label={iconDescription}
+    class:bx--file-close={true}
+    type="button"
+    tabindex="0"
+    {...$$restProps}
+    on:click
+    on:keydown
+  >
+    <Close />
+  </button>
+{/if}
+
+{#if status === "complete"}
+  <CheckmarkFilled
+    aria-label={iconDescription}
+    title={iconDescription}
+    class="bx--file-complete"
+    {...$$restProps}
+  />
+{/if}

package/src/FileUploader/index.js

@@ -0,0 +1,6 @@
+export { default as FileUploader } from "./FileUploader.svelte";
+export { default as FileUploaderButton } from "./FileUploaderButton.svelte";
+export { default as FileUploaderItem } from "./FileUploaderItem.svelte";
+export { default as FileUploaderDropContainer } from "./FileUploaderDropContainer.svelte";
+export { default as Filename } from "./Filename.svelte";
+export { default as FileUploaderSkeleton } from "./FileUploaderSkeleton.svelte";

package/src/FluidForm/FluidForm.svelte

@@ -0,0 +1,23 @@
+<script>
+  /**
+   * @restProps {form}
+   */
+
+  import { setContext } from "svelte";
+  import Form from "../Form/Form.svelte";
+
+  setContext("Form", { isFluid: true });
+</script>
+
+<Form
+  {...$$restProps}
+  class="bx--form--fluid {$$restProps.class}"
+  on:click
+  on:keydown
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+  on:submit
+>
+  <slot />
+</Form>

package/src/FluidForm/index.js

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

package/src/Form/Form.svelte

@@ -0,0 +1,20 @@
+<script>
+  /** Obtain a reference to the form element */
+  export let ref = null;
+</script>
+
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+<form
+  class:bx--form={true}
+  bind:this={ref}
+  {...$$restProps}
+  on:click
+  on:keydown
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+  on:submit
+>
+  <slot />
+</form>

package/src/Form/index.js

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

package/src/FormGroup/FormGroup.svelte

@@ -0,0 +1,44 @@
+<script>
+  /** Set to `true` for to remove the bottom margin */
+  export let noMargin = false;
+
+  /** Set to `true` to indicate an invalid state */
+  export let invalid = false;
+
+  /** Set to `true` to render a form requirement */
+  export let message = false;
+
+  /** Specify the message text */
+  export let messageText = "";
+
+  /** Specify the legend text */
+  export let legendText = "";
+
+  /** Specify an id for the legend element */
+  export let legendId = "";
+</script>
+
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+<fieldset
+  data-invalid={invalid || undefined}
+  class:bx--fieldset={true}
+  class:bx--fieldset--no-margin={noMargin}
+  aria-labelledby={$$restProps["aria-labelledby"] || legendId}
+  {...$$restProps}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+>
+  {#if legendText}
+    <legend
+      class:bx--label={true}
+      id={legendId || $$restProps["aria-labelledby"]}>{legendText}</legend
+    >
+  {/if}
+  <slot />
+  {#if message}
+    <div class:bx--form__requirement={true}>{messageText}</div>
+  {/if}
+</fieldset>

package/src/FormGroup/index.js

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

package/src/FormItem/FormItem.svelte

@@ -0,0 +1,12 @@
+<!-- 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
+>
+  <slot />
+</div>

package/src/FormItem/index.js

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

package/src/FormLabel/FormLabel.svelte

@@ -0,0 +1,18 @@
+<script>
+  /** Set an id to be used by the label element */
+  export let id = "ccs-" + Math.random().toString(36);
+</script>
+
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+<label
+  class:bx--label={true}
+  for={id}
+  {...$$restProps}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+>
+  <slot />
+</label>

package/src/FormLabel/index.js

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

package/src/Grid/Column.svelte

@@ -0,0 +1,119 @@
+<script>
+  /**
+   * @typedef {boolean | number} ColumnSize
+   * @typedef {{span?: ColumnSize; offset: number;}} ColumnSizeDescriptor
+   * @typedef {ColumnSize | ColumnSizeDescriptor} ColumnBreakpoint
+   * @restProps {div}
+   * @slot {{props: { class: string; [key: string]: any; }}}
+   */
+
+  /**
+   * @slot {{ props?: { class: string; } }}
+   */
+
+  /**
+   * Set to `true` to render a custom HTML element
+   * Props are destructured as `props` in the default slot (e.g., <Column let:props><article {...props}>...</article></Column>)
+   */
+  export let as = false;
+
+  /** Set to `true` to remove the gutter */
+  export let noGutter = false;
+
+  /** Set to `true` to remove the left gutter */
+  export let noGutterLeft = false;
+
+  /** Set to `true` to remove the right gutter */
+  export let noGutterRight = false;
+
+  /** Set to `true` to add top and bottom padding to the column */
+  export let padding = false;
+
+  /**
+   * Specify the aspect ratio of the column
+   * @type {"2x1" | "16x9" | "9x16" | "1x2" | "4x3" | "3x4" | "1x1"}
+   */
+  export let aspectRatio = undefined;
+
+  /**
+   * Set the small breakpoint
+   * @type {ColumnBreakpoint}
+   */
+  export let sm = undefined;
+
+  /**
+   * Set the medium breakpoint
+   * @type {ColumnBreakpoint}
+   */
+  export let md = undefined;
+
+  /**
+   * Set the large breakpoint
+   * @type {ColumnBreakpoint}
+   */
+  export let lg = undefined;
+
+  /**
+   * Set the extra large breakpoint
+   * @type {ColumnBreakpoint}
+   */
+  export let xlg = undefined;
+
+  /**
+   * Set the maximum breakpoint
+   * @type {ColumnBreakpoint}
+   */
+  export let max = undefined;
+
+  const breakpoints = ["sm", "md", "lg", "xlg", "max"];
+
+  $: columnClass = [sm, md, lg, xlg, max]
+    .map((breakpoint, i) => {
+      const name = breakpoints[i];
+
+      if (breakpoint === true) {
+        return `bx--col-${name}`;
+      } else if (typeof breakpoint === "number") {
+        return `bx--col-${name}-${breakpoint}`;
+      } else if (typeof breakpoint === "object") {
+        let bp = [];
+
+        if (typeof breakpoint.span === "number") {
+          bp = [...bp, `bx--col-${name}-${breakpoint.span}`];
+        } else if (breakpoint.span === true) {
+          bp = [...bp, `bx--col-${name}`];
+        }
+
+        if (typeof breakpoint.offset === "number") {
+          bp = [...bp, `bx--offset-${name}-${breakpoint.offset}`];
+        }
+
+        return bp.join(" ");
+      }
+    })
+    .filter(Boolean)
+    .join(" ");
+  $: props = {
+    ...$$restProps,
+    class: [
+      $$restProps.class,
+      columnClass,
+      !columnClass && "bx--col",
+      noGutter && "bx--no-gutter",
+      noGutterLeft && "bx--no-gutter--left",
+      noGutterRight && "bx--no-gutter--right",
+      aspectRatio && `bx--aspect-ratio bx--aspect-ratio--${aspectRatio}`,
+      padding && "bx--col-padding",
+    ]
+      .filter(Boolean)
+      .join(" "),
+  };
+</script>
+
+{#if as}
+  <slot {props} />
+{:else}
+  <div {...props}>
+    <slot />
+  </div>
+{/if}

package/src/Grid/Grid.svelte

@@ -0,0 +1,58 @@
+<script>
+  /**
+   * @restProps {div}
+   * @slot {{ props: { class: string; [key: string]: any; } }}
+   */
+
+  /**
+   * Set to `true` to render a custom HTML element
+   * Props are destructured as `props` in the default slot (e.g., <Grid let:props><header {...props}>...</header></Grid>)
+   */
+  export let as = false;
+
+  /** Set to `true` to use the condensed variant */
+  export let condensed = false;
+
+  /** Set to `true` to use the narrow variant */
+  export let narrow = false;
+
+  /** Set to `true` to use the fullWidth variant */
+  export let fullWidth = false;
+
+  /** Set to `true` to remove the gutter */
+  export let noGutter = false;
+
+  /** Set to `true` to remove the left gutter */
+  export let noGutterLeft = false;
+
+  /** Set to `true` to remove the right gutter */
+  export let noGutterRight = false;
+
+  /** Set to `true` to add top and bottom padding to all columns */
+  export let padding = false;
+
+  $: props = {
+    ...$$restProps,
+    class: [
+      $$restProps.class,
+      "bx--grid",
+      condensed && "bx--grid--condensed",
+      narrow && "bx--grid--narrow",
+      fullWidth && "bx--grid--full-width",
+      noGutter && "bx--no-gutter",
+      noGutterLeft && "bx--no-gutter--left",
+      noGutterRight && "bx--no-gutter--right",
+      padding && "bx--row-padding",
+    ]
+      .filter(Boolean)
+      .join(" "),
+  };
+</script>
+
+{#if as}
+  <slot {props} />
+{:else}
+  <div {...props}>
+    <slot />
+  </div>
+{/if}

package/src/Grid/Row.svelte

@@ -0,0 +1,54 @@
+<script>
+  /**
+   * @restProps {div}
+   * @slot {{ props: { class: string; [key: string]: any; } }}
+   */
+
+  /**
+   * Set to `true` to render a custom HTML element
+   * Props are destructured as `props` in the default slot (e.g., <Row let:props><section {...props}>...</section></Row>)
+   */
+  export let as = false;
+
+  /** Set to `true` to use the condensed variant */
+  export let condensed = false;
+
+  /** Set to `true` to use the narrow variant */
+  export let narrow = false;
+
+  /** Set to `true` to remove the gutter */
+  export let noGutter = false;
+
+  /** Set to `true` to remove the left gutter */
+  export let noGutterLeft = false;
+
+  /** Set to `true` to remove the right gutter */
+  export let noGutterRight = false;
+
+  /** Set to `true` to add top and bottom padding to all columns */
+  export let padding = false;
+
+  $: props = {
+    ...$$restProps,
+    class: [
+      $$restProps.class,
+      "bx--row",
+      condensed && "bx--row--condensed",
+      narrow && "bx--row--narrow",
+      noGutter && "bx--no-gutter",
+      noGutterLeft && "bx--no-gutter--left",
+      noGutterRight && "bx--no-gutter--right",
+      padding && "bx--row-padding",
+    ]
+      .filter(Boolean)
+      .join(" "),
+  };
+</script>
+
+{#if as}
+  <slot {props} />
+{:else}
+  <div {...props}>
+    <slot />
+  </div>
+{/if}

package/src/Grid/index.js

@@ -0,0 +1,3 @@
+export { default as Grid } from "./Grid.svelte";
+export { default as Row } from "./Row.svelte";
+export { default as Column } from "./Column.svelte";