@ifloppy/maxcraftmc-ui-svelte 0.1.0

package/src/Tile/SelectableTile.svelte

@@ -0,0 +1,95 @@
+<script>
+  /**
+   * @event {string} "select"
+   * @event {string} "deselect"
+   */
+
+  /** Set to `true` to select the tile */
+  export let selected = false;
+
+  /** Set to `true` to enable the light variant */
+  export let light = false;
+
+  /** Set to `true` to disable the tile */
+  export let disabled = false;
+
+  /** Specify the title of the selectable tile */
+  export let title = "title";
+
+  /** Specify the value of the selectable tile */
+  export let value = "value";
+
+  /** Specify the tabindex */
+  export let tabindex = "0";
+
+  /** Specify the ARIA label for the selectable tile checkmark icon */
+  export let iconDescription = "Tile checkmark";
+
+  /** 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 = "";
+
+  /** Obtain a reference to the input HTML element */
+  export let ref = null;
+
+  import { createEventDispatcher } from "svelte";
+  import CheckmarkFilled from "../icons/CheckmarkFilled.svelte";
+
+  const dispatch = createEventDispatcher();
+
+  $: if (!disabled) dispatch(selected ? "select" : "deselect", id);
+</script>
+
+<input
+  bind:this={ref}
+  type="checkbox"
+  tabindex="-1"
+  class:bx--tile-input={true}
+  checked={selected}
+  {id}
+  {value}
+  {name}
+  {title}
+  {disabled}
+/>
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+<label
+  for={id}
+  tabindex={disabled ? undefined : tabindex}
+  class:bx--tile={true}
+  class:bx--tile--selectable={true}
+  class:bx--tile--is-selected={selected}
+  class:bx--tile--light={light}
+  class:bx--tile--disabled={disabled}
+  {...$$restProps}
+  on:click
+  on:click|preventDefault={() => {
+    if (disabled) return;
+    selected = !selected;
+  }}
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+  on:keydown
+  on:keydown={(e) => {
+    if (disabled) return;
+    if (e.key === " " || e.key === "Enter") {
+      e.preventDefault();
+      selected = !selected;
+    }
+  }}
+>
+  <span class:bx--tile__checkmark={true}>
+    <CheckmarkFilled aria-label={iconDescription} title={iconDescription} />
+  </span>
+  <span class:bx--tile-content={true}>
+    <slot />
+  </span>
+</label>

package/src/Tile/Tile.svelte

@@ -0,0 +1,18 @@
+<script>
+  /** Set to `true` to enable the light variant */
+  export let light = false;
+</script>
+
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
+  class:bx--tile={true}
+  class:bx--tile--light={light}
+  {...$$restProps}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+>
+  <slot />
+</div>

package/src/Tile/TileGroup.svelte

@@ -0,0 +1,66 @@
+<script>
+  /**
+   * @event {string} select
+   */
+
+  /**
+   * Specify the selected tile value
+   * @type {string}
+   */
+  export let selected = undefined;
+
+  /** Set to `true` to disable the tile group */
+  export let disabled = false;
+
+  /**
+   * Set to `true` to require the selection of a radio button
+   * @type {boolean}
+   */
+  export let required = undefined;
+
+  /**
+   * Specify a name attribute for the radio button inputs
+   * @type {string}
+   */
+  export let name = undefined;
+
+  /** Specify the legend text */
+  export let legend = "";
+
+  import { createEventDispatcher, setContext } from "svelte";
+  import { writable, readonly } from "svelte/store";
+
+  const dispatch = createEventDispatcher();
+  const selectedValue = writable(selected);
+  const groupName = writable(name);
+  const groupRequired = writable(required);
+
+  setContext("TileGroup", {
+    selectedValue,
+    groupName: readonly(groupName),
+    groupRequired: readonly(groupRequired),
+    add: ({ checked, value }) => {
+      if (checked) {
+        selectedValue.set(value);
+      }
+    },
+    update: (value) => {
+      selectedValue.set(value);
+      dispatch("select", value);
+    },
+  });
+
+  $: selected = $selectedValue;
+  $: selectedValue.set(selected);
+  $: $groupName = name;
+  $: $groupRequired = required;
+</script>
+
+<fieldset {disabled} class:bx--tile-group={true} {...$$restProps}>
+  {#if legend}
+    <legend class:bx--label={true}>{legend}</legend>
+  {/if}
+  <div>
+    <slot />
+  </div>
+</fieldset>

package/src/Tile/index.js

@@ -0,0 +1,6 @@
+export { default as Tile } from "./Tile.svelte";
+export { default as ClickableTile } from "./ClickableTile.svelte";
+export { default as ExpandableTile } from "./ExpandableTile.svelte";
+export { default as SelectableTile } from "./SelectableTile.svelte";
+export { default as RadioTile } from "./RadioTile.svelte";
+export { default as TileGroup } from "./TileGroup.svelte";

package/src/TimePicker/TimePicker.svelte

@@ -0,0 +1,115 @@
+<script>
+  /**
+   * Specify the size of the input
+   * @type {"sm" | "xl"}
+   */
+  export let size = undefined;
+
+  /**
+   * Specify the input value
+   * @type {string}
+   */
+  export let value = "";
+
+  /** Specify the input placeholder text */
+  export let placeholder = "hh:mm";
+
+  /** Specify the `pattern` attribute for the input element */
+  export let pattern = "(1[012]|[1-9]):[0-5][0-9](\\s)?";
+
+  /** Specify the `maxlength` input attribute */
+  export let maxlength = 5;
+
+  /** Set to `true` to enable the light variant */
+  export let light = false;
+
+  /** Set to `true` to disable the input */
+  export let disabled = false;
+
+  /** Specify the label text */
+  export let labelText = "";
+
+  /** Set to `true` to visually hide the label text */
+  export let hideLabel = false;
+
+  /** Set to `true` to indicate an invalid state */
+  export let invalid = false;
+
+  /** Specify the invalid state text */
+  export let invalidText = "";
+
+  /** 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;
+</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
+    class:bx--time-picker={true}
+    class:bx--time-picker--light={light}
+    class:bx--time-picker--invalid={invalid}
+    class:bx--time-picker--sm={size === "sm"}
+    class:bx--time-picker--xl={size === "xl"}
+    class:bx--select--light={light}
+  >
+    <div class:bx--time-picker__input={true}>
+      {#if labelText || $$slots.labelText}
+        <label
+          for={id}
+          class:bx--label={true}
+          class:bx--visually-hidden={hideLabel}
+          class:bx--label--disabled={disabled}
+        >
+          <slot name="labelText">
+            {labelText}
+          </slot>
+        </label>
+      {/if}
+      <input
+        bind:this={ref}
+        bind:value
+        type="text"
+        data-invalid={invalid || undefined}
+        {pattern}
+        {placeholder}
+        {maxlength}
+        {id}
+        {name}
+        {disabled}
+        {...$$restProps}
+        class:bx--time-picker__input-field={true}
+        class:bx--text-input={true}
+        class:bx--text-input--light={light}
+        class:bx--text-input--invalid={invalid}
+        on:change
+        on:input
+        on:keydown
+        on:keyup
+        on:focus
+        on:blur
+        on:paste
+      />
+    </div>
+    <slot />
+  </div>
+  {#if invalid}
+    <div class:bx--form-requirement={true}>{invalidText}</div>
+  {/if}
+</div>

package/src/TimePicker/TimePickerSelect.svelte

@@ -0,0 +1,78 @@
+<script>
+  /**
+   * Specify the select value
+   * @type {number | string}
+   */
+  export let value = "";
+
+  /** Set to `true` to disable the select */
+  export let disabled = false;
+
+  /** Specify the ARIA label for the chevron icon */
+  export let iconDescription = "Open list of options";
+
+  /** Specify the label text */
+  export let labelText = "";
+
+  /** Set an id for the select element */
+  export let id = "ccs-" + Math.random().toString(36);
+
+  /**
+   * Specify a name attribute for the select element
+   * @type {string}
+   */
+  export let name = undefined;
+
+  /** Obtain a reference to the select HTML element */
+  export let ref = null;
+
+  import { setContext } from "svelte";
+  import { writable } from "svelte/store";
+  import ChevronDown from "../icons/ChevronDown.svelte";
+
+  const selectedValue = writable(value);
+
+  setContext("TimePickerSelect", { selectedValue });
+
+  $: selectedValue.set(value);
+  $: value = $selectedValue;
+</script>
+
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
+  class:bx--select={true}
+  class:bx--time-picker__select={true}
+  {...$$restProps}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+>
+  {#if labelText || $$slots.labelText}
+    <label for={id} class:bx--label={true} class:bx--visually-hidden={true}>
+      <slot name="labelText">
+        {labelText}
+      </slot>
+    </label>
+  {/if}
+  <!-- svelte-ignore a11y-no-onchange -->
+  <select
+    bind:this={ref}
+    {id}
+    {name}
+    {disabled}
+    {value}
+    class:bx--select-input={true}
+    on:change={({ target }) => {
+      selectedValue.set(target.value);
+    }}
+  >
+    <slot />
+  </select>
+  <ChevronDown
+    aria-label={iconDescription}
+    title={iconDescription}
+    class="bx--select__arrow"
+  />
+</div>

package/src/TimePicker/index.js

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

package/src/Toggle/Toggle.svelte

@@ -0,0 +1,107 @@
+<script>
+  /**
+   * @event {{ toggled: boolean; }} toggle
+   */
+
+  /**
+   * Specify the toggle size
+   * @type {"default" | "sm"}
+   */
+  export let size = "default";
+
+  /** Set to `true` to toggle the checkbox input */
+  export let toggled = false;
+
+  /** Set to `true` to disable checkbox input */
+  export let disabled = false;
+
+  /** Specify the label for the untoggled state */
+  export let labelA = "Off";
+
+  /** Specify the label for the toggled state */
+  export let labelB = "On";
+
+  /** Specify the label text */
+  export let labelText = "";
+
+  /** Set to `true` to visually hide the label text */
+  export let hideLabel = false;
+
+  /** Set an id for the input element */
+  export let id = "ccs-" + Math.random().toString(36);
+
+  /**
+   * Specify a name attribute for the checkbox input
+   * @type {string}
+   */
+  export let name = undefined;
+
+  import { createEventDispatcher } from "svelte";
+
+  const dispatch = createEventDispatcher();
+
+  $: dispatch("toggle", { toggled });
+</script>
+
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
+  class:bx--form-item={true}
+  style:user-select="none"
+  {...$$restProps}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+>
+  <!-- svelte-ignore a11y-role-has-required-aria-props -->
+  <input
+    role="switch"
+    type="checkbox"
+    class:bx--toggle-input={true}
+    class:bx--toggle-input--small={size === "sm"}
+    checked={toggled}
+    on:change={() => {
+      toggled = !toggled;
+    }}
+    on:change
+    on:keyup={(e) => {
+      if (e.key === " " || e.key === "Enter") {
+        e.preventDefault();
+        toggled = !toggled;
+      }
+    }}
+    on:keyup
+    on:focus
+    on:blur
+    {disabled}
+    {id}
+    {name}
+  />
+  <label
+    aria-label={labelText ? undefined : $$props["aria-label"] || "Toggle"}
+    for={id}
+    class:bx--toggle-input__label={true}
+  >
+    <span class:bx--visually-hidden={hideLabel}>
+      <slot name="labelText">
+        {labelText}
+      </slot>
+    </span>
+    <span
+      class:bx--toggle__switch={true}
+      style:margin-top={hideLabel ? 0 : undefined}
+    >
+      <span aria-hidden="true" class:bx--toggle__text--off={true}>
+        <slot name="labelA">
+          {labelA}
+        </slot>
+      </span>
+      <span aria-hidden="true" class:bx--toggle__text--on={true}>
+        <slot name="labelB">
+          {labelB}
+        </slot>
+      </span>
+    </span>
+  </label>
+</div>

package/src/Toggle/ToggleSkeleton.svelte

@@ -0,0 +1,51 @@
+<script>
+  /**
+   * Specify the toggle size
+   * @type {"default" | "sm"}
+   */
+  export let size = "default";
+
+  /** Specify the label text */
+  export let labelText = "";
+
+  /** Set an id for the input element */
+  export let id = "ccs-" + Math.random().toString(36);
+</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
+>
+  <input
+    type="checkbox"
+    {id}
+    class:bx--toggle={true}
+    class:bx--toggle--small={size === "sm"}
+    class:bx--skeleton={true}
+  />
+  <label
+    aria-label={labelText
+      ? undefined
+      : $$props["aria-label"] || "Toggle is loading"}
+    for={id}
+    class:bx--toggle__label={true}
+    class:bx--skeleton={true}
+  >
+    {#if labelText || $$slots.labelText}
+      <span class:bx--toggle__label-text={true}>
+        <slot name="labelText">
+          {labelText}
+        </slot>
+      </span>
+    {/if}
+    <span class:bx--toggle__text--left={true}></span>
+    <span class:bx--toggle__appearance={true}></span>
+    <span class:bx--toggle__text--right={true}></span>
+  </label>
+</div>

package/src/Toggle/index.js

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