@ifloppy/maxcraftmc-ui-svelte 0.1.0

package/src/Select/Select.svelte

@@ -0,0 +1,248 @@
+<script>
+  /**
+   * @event {string | number} update The selected value.
+   */
+
+  /**
+   * Specify the selected item value
+   * @type {string | number}
+   */
+  export let selected = undefined;
+
+  /**
+   * Set the size of the select input
+   * @type {"sm" | "xl"}
+   */
+  export let size = undefined;
+
+  /** Set to `true` to use the inline variant */
+  export let inline = false;
+
+  /** Set to `true` to enable the light variant */
+  export let light = false;
+
+  /** Set to `true` to disable the select element */
+  export let disabled = false;
+
+  /** 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;
+
+  /** 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 = "";
+
+  /** Set to `true` to not render a label */
+  export let noLabel = false;
+
+  /** Specify the label text */
+  export let labelText = "";
+
+  /** Set to `true` to visually hide the label text */
+  export let hideLabel = false;
+
+  /** Obtain a reference to the select HTML element */
+  export let ref = null;
+
+  /** Set to `true` to mark the field as required */
+  export let required = false;
+
+  import { createEventDispatcher, setContext, afterUpdate } from "svelte";
+  import { writable } from "svelte/store";
+  import ChevronDown from "../icons/ChevronDown.svelte";
+  import WarningFilled from "../icons/WarningFilled.svelte";
+  import WarningAltFilled from "../icons/WarningAltFilled.svelte";
+
+  const dispatch = createEventDispatcher();
+  const selectedValue = writable(selected);
+  const defaultSelectId = writable(null);
+  const defaultValue = writable(null);
+  const itemTypesByValue = writable({});
+
+  setContext("Select", {
+    selectedValue,
+    setDefaultValue: (id, value) => {
+      /**
+       * Use the first `SelectItem` value as the
+       * default value if `selected` is `undefined`.
+       */
+      if ($defaultValue === null) {
+        defaultSelectId.set(id);
+        defaultValue.set(value);
+      } else {
+        if ($defaultSelectId === id) {
+          selectedValue.set(value);
+        }
+      }
+
+      itemTypesByValue.update((types) => ({
+        ...types,
+        [value]: typeof value,
+      }));
+    },
+  });
+
+  const handleChange = ({ target }) => {
+    let value = target.value;
+
+    if ($itemTypesByValue[value] === "number") {
+      value = Number(value);
+    }
+
+    selectedValue.set(value);
+  };
+
+  let prevSelected = undefined;
+
+  afterUpdate(() => {
+    if (selected !== $selectedValue) {
+      selected = $selectedValue;
+      if (prevSelected !== undefined) {
+        dispatch("update", $selectedValue);
+      }
+    }
+
+    prevSelected = selected;
+  });
+
+  $: errorId = `error-${id}`;
+  $: selectedValue.set(selected ?? $defaultValue);
+</script>
+
+<div class:bx--form-item={true} {...$$restProps}>
+  <div
+    class:bx--select={true}
+    class:bx--select--inline={inline}
+    class:bx--select--light={light}
+    class:bx--select--invalid={invalid}
+    class:bx--select--disabled={disabled}
+    class:bx--select--warning={warn}
+  >
+    {#if !noLabel}
+      <label
+        for={id}
+        class:bx--label={true}
+        class:bx--visually-hidden={hideLabel}
+        class:bx--label--disabled={disabled}
+      >
+        <slot name="labelText">
+          {labelText}
+        </slot>
+      </label>
+    {/if}
+    {#if inline}
+      <div class:bx--select-input--inline__wrapper={true}>
+        <div
+          class:bx--select-input__wrapper={true}
+          data-invalid={invalid || undefined}
+        >
+          <select
+            bind:this={ref}
+            aria-describedby={invalid ? errorId : undefined}
+            aria-invalid={invalid || undefined}
+            disabled={disabled || undefined}
+            required={required || undefined}
+            {id}
+            {name}
+            class:bx--select-input={true}
+            class:bx--select-input--sm={size === "sm"}
+            class:bx--select-input--xl={size === "xl"}
+            on:change={handleChange}
+            on:change
+            on:input
+            on:focus
+            on:blur
+          >
+            <slot />
+          </select>
+          <ChevronDown class="bx--select__arrow" />
+          {#if invalid}
+            <WarningFilled class="bx--select__invalid-icon" />
+          {/if}
+        </div>
+        {#if invalid}
+          <div class:bx--form-requirement={true} id={errorId}>
+            {invalidText}
+          </div>
+        {/if}
+      </div>
+      {#if !invalid && !warn && helperText}
+        <div
+          class:bx--form__helper-text={true}
+          class:bx--form__helper-text--disabled={disabled}
+        >
+          {helperText}
+        </div>
+      {/if}
+    {/if}
+    {#if !inline}
+      <div
+        class:bx--select-input__wrapper={true}
+        data-invalid={invalid || undefined}
+      >
+        <select
+          bind:this={ref}
+          {id}
+          {name}
+          aria-describedby={invalid ? errorId : undefined}
+          disabled={disabled || undefined}
+          required={required || undefined}
+          aria-invalid={invalid || undefined}
+          class:bx--select-input={true}
+          class:bx--select-input--sm={size === "sm"}
+          class:bx--select-input--xl={size === "xl"}
+          on:change={handleChange}
+          on:change
+          on:input
+          on:focus
+          on:blur
+        >
+          <slot />
+        </select>
+        <ChevronDown class="bx--select__arrow" />
+        {#if invalid}
+          <WarningFilled class="bx--select__invalid-icon" />
+        {/if}
+        {#if !invalid && warn}
+          <WarningAltFilled
+            class="bx--select__invalid-icon bx--select__invalid-icon--warning"
+          />
+        {/if}
+      </div>
+      {#if !invalid && helperText}
+        <div
+          class:bx--form__helper-text={true}
+          class:bx--form__helper-text--disabled={disabled}
+        >
+          {helperText}
+        </div>
+      {/if}
+      {#if invalid}
+        <div id={errorId} class:bx--form-requirement={true}>
+          {invalidText}
+        </div>
+      {/if}
+      {#if !invalid && warn}
+        <div id={errorId} class:bx--form-requirement={true}>
+          {warnText}
+        </div>
+      {/if}
+    {/if}
+  </div>
+</div>

package/src/Select/SelectItem.svelte

@@ -0,0 +1,63 @@
+<script>
+  /**
+   * Specify the option value
+   * @type {string | number}
+   */
+  export let value = "";
+
+  /**
+   * Specify the option text
+   * If not specified, the value will be used as the text.
+   * @type {string}
+   */
+  export let text = undefined;
+
+  /** Set to `true` to hide the option */
+  export let hidden = false;
+
+  /** Set to `true` to disable the option */
+  export let disabled = false;
+
+  let className = undefined;
+
+  /**
+   * Specify the class of the `option` element
+   * @type {string}
+   */
+  export { className as class };
+
+  /**
+   * Specify the style of the `option` element
+   * @type {string}
+   */
+  export let style = undefined;
+
+  import { getContext, onMount } from "svelte";
+
+  const id = "ccs-" + Math.random().toString(36);
+  const ctx = getContext("Select") || getContext("TimePickerSelect");
+
+  $: ctx?.setDefaultValue?.(id, value);
+
+  let selected = false;
+
+  const unsubscribe = ctx.selectedValue.subscribe((currentValue) => {
+    selected = currentValue === value;
+  });
+
+  onMount(() => {
+    return () => unsubscribe();
+  });
+</script>
+
+<option
+  {value}
+  {disabled}
+  {hidden}
+  {selected}
+  class:bx--select-option={true}
+  class={className}
+  {style}
+>
+  {text ?? value}
+</option>

package/src/Select/SelectItemGroup.svelte

@@ -0,0 +1,11 @@
+<script>
+  /** Set to `true` to disable the optgroup element */
+  export let disabled = false;
+
+  /** Specify the label attribute of the optgroup element */
+  export let label = "Provide label";
+</script>
+
+<optgroup {label} {disabled} class:bx--select-optgroup={true} {...$$restProps}>
+  <slot />
+</optgroup>

package/src/Select/SelectSkeleton.svelte

@@ -0,0 +1,22 @@
+<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--select={true} class:bx--skeleton={true}>
+    <div class:bx--select-input={true}></div>
+  </div>
+</div>

package/src/Select/index.js

@@ -0,0 +1,4 @@
+export { default as Select } from "./Select.svelte";
+export { default as SelectSkeleton } from "./SelectSkeleton.svelte";
+export { default as SelectItem } from "./SelectItem.svelte";
+export { default as SelectItemGroup } from "./SelectItemGroup.svelte";

package/src/SkeletonPlaceholder/SkeletonPlaceholder.svelte

@@ -0,0 +1,10 @@
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
+  class:bx--skeleton__placeholder={true}
+  {...$$restProps}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+></div>

package/src/SkeletonPlaceholder/index.js

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

package/src/SkeletonText/SkeletonText.svelte

@@ -0,0 +1,50 @@
+<script>
+  /** Specify the number of lines to render */
+  export let lines = 3;
+
+  /** Set to `true` to use the heading size variant */
+  export let heading = false;
+
+  /** Set to `true` to use the paragraph size variant */
+  export let paragraph = false;
+
+  /** Specify the width of the text (% or px) */
+  export let width = "100%";
+
+  const RANDOM = [0.973, 0.153, 0.567];
+
+  $: widthNum = parseInt(width, 10);
+  $: widthPx = width.includes("px");
+</script>
+
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+{#if paragraph}
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
+  <div {...$$restProps} on:click on:mouseover on:mouseenter on:mouseleave>
+    {#each Array.from({ length: lines }).map((_, i) => {
+      const min = widthPx ? widthNum - 75 : 0;
+      const max = widthPx ? widthNum : 75;
+      const rand = Math.floor(RANDOM[i % 3] * (max - min + 1)) + min + "px";
+
+      return widthPx ? rand : `calc(${width} - ${rand})`;
+    }) as width}
+      <p
+        class:bx--skeleton__text={true}
+        class:bx--skeleton__heading={heading}
+        style:width
+      ></p>
+    {/each}
+  </div>
+{:else}
+  <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+  <p
+    class:bx--skeleton__text={true}
+    class:bx--skeleton__heading={heading}
+    style:width
+    {...$$restProps}
+    on:click
+    on:mouseover
+    on:mouseenter
+    on:mouseleave
+  ></p>
+{/if}

package/src/SkeletonText/index.js

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

package/src/Slider/Slider.svelte

@@ -0,0 +1,232 @@
+<script>
+  /**
+   * @event {number} change
+   * @event {number} input
+   */
+
+  /** Specify the value of the slider */
+  export let value = 0;
+
+  /** Set the maximum slider value */
+  export let max = 100;
+
+  /** Specify the label for the max value */
+  export let maxLabel = "";
+
+  /** Set the minimum slider value */
+  export let min = 0;
+
+  /** Specify the label for the min value */
+  export let minLabel = "";
+
+  /** Set the step value */
+  export let step = 1;
+
+  /** Set the step multiplier value */
+  export let stepMultiplier = 4;
+
+  /** Set to `true` to require a value */
+  export let required = false;
+
+  /** Specify the input type */
+  export let inputType = "number";
+
+  /** Set to `true` to disable the slider */
+  export let disabled = false;
+
+  /** Set to `true` to enable the light variant */
+  export let light = false;
+
+  /** Set to `true` to hide the text input */
+  export let hideTextInput = false;
+
+  /**
+   * Set to `true` for the slider to span
+   * the full width of its containing element.
+   */
+  export let fullWidth = false;
+
+  /** Set an id for the slider div element */
+  export let id = "ccs-" + Math.random().toString(36);
+
+  /** Set to `true` to indicate an invalid state */
+  export let invalid = false;
+
+  /**
+   * Specify the label text.
+   * Alternatively, use the "labelText" slot (e.g., `<span slot="labelText">...</span>`)
+   */
+  export let labelText = "";
+
+  /** Set to `true` to visually hide the label text */
+  export let hideLabel = false;
+
+  /** Set a name for the slider element */
+  export let name = "";
+
+  /** Obtain a reference to the HTML element */
+  export let ref = null;
+
+  import { createEventDispatcher } from "svelte";
+
+  const dispatch = createEventDispatcher();
+
+  let trackRef = null;
+  let dragging = false;
+  let holding = false;
+
+  function startDragging() {
+    dragging = true;
+  }
+
+  function startHolding() {
+    holding = true;
+  }
+
+  function stopHolding() {
+    holding = false;
+    dragging = false;
+  }
+
+  function move() {
+    if (holding) {
+      startDragging();
+    }
+  }
+
+  function calcValue(e) {
+    if (disabled) return;
+
+    const offsetX = e.touches ? e.touches[0].clientX : e.clientX;
+    const { left, width } = trackRef.getBoundingClientRect();
+    let nextValue =
+      min +
+      Math.round(((max - min) * ((offsetX - left) / width)) / step) * step;
+
+    if (nextValue <= min) {
+      nextValue = min;
+    } else if (nextValue >= max) {
+      nextValue = max;
+    }
+
+    value = nextValue;
+    dispatch("input", value);
+  }
+
+  $: labelId = `label-${id}`;
+  $: range = max - min;
+  $: left = ((value - min) / range) * 100;
+  $: {
+    if (value <= min) {
+      value = min;
+    } else if (value >= max) {
+      value = max;
+    }
+
+    if (dragging) {
+      calcValue(event);
+      dragging = false;
+    }
+
+    if (!holding && !disabled) {
+      dispatch("change", value);
+    }
+  }
+</script>
+
+<svelte:window
+  on:mousemove={move}
+  on:touchmove={move}
+  on:mouseup={stopHolding}
+  on:touchend={stopHolding}
+  on:touchcancel={stopHolding}
+/>
+
+<!-- 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
+>
+  <label
+    for={id}
+    id={labelId}
+    class:bx--label={true}
+    class:bx--label--disabled={disabled}
+    class:bx--visually-hidden={hideLabel}
+  >
+    <slot name="labelText">
+      {labelText}
+    </slot>
+  </label>
+  <div class:bx--slider-container={true} style:width={fullWidth && "100%"}>
+    <span class:bx--slider__range-label={true}>{minLabel || min}</span>
+    <div
+      bind:this={ref}
+      role="presentation"
+      tabindex="-1"
+      class:bx--slider={true}
+      class:bx--slider--disabled={disabled}
+      style:max-width={fullWidth ? "none" : undefined}
+      on:mousedown={startDragging}
+      on:mousedown={startHolding}
+      on:touchstart={startHolding}
+      on:keydown={({ shiftKey, key }) => {
+        const keys = {
+          ArrowDown: -1,
+          ArrowLeft: -1,
+          ArrowRight: 1,
+          ArrowUp: 1,
+        };
+        if (keys[key]) {
+          value +=
+            step * (shiftKey ? range / step / stepMultiplier : 1) * keys[key];
+        }
+      }}
+    >
+      <div
+        role="slider"
+        tabindex="0"
+        class:bx--slider__thumb={true}
+        style:left="{left}%"
+        aria-valuemax={max}
+        aria-valuemin={min}
+        aria-valuenow={value}
+        aria-labelledby={labelId}
+        {id}
+      ></div>
+      <div bind:this={trackRef} class:bx--slider__track={true}></div>
+      <div
+        class:bx--slider__filled-track={true}
+        style:transform="translate(0, -50%) scaleX({left / 100})"
+      ></div>
+    </div>
+    <span class:bx--slider__range-label={true}>{maxLabel || max}</span>
+    <input
+      type={hideTextInput ? "hidden" : inputType}
+      id="input-{id}"
+      {name}
+      class:bx--text-input={true}
+      class:bx--slider-text-input={true}
+      class:bx--text-input--light={light}
+      class:bx--text-input--invalid={invalid}
+      {value}
+      aria-labelledby={$$props["aria-label"] ? undefined : labelId}
+      aria-label={$$props["aria-label"] || "Slider number input"}
+      {disabled}
+      {required}
+      {min}
+      {max}
+      {step}
+      on:change={({ target }) => {
+        value = Number(target.value);
+      }}
+      data-invalid={invalid || null}
+      aria-invalid={invalid || null}
+    />
+  </div>
+</div>

package/src/Slider/SliderSkeleton.svelte

@@ -0,0 +1,28 @@
+<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--slider-container={true} class:bx--skeleton={true}>
+    <span class:bx--slider__range-label={true}></span>
+    <div class:bx--slider={true}>
+      <div class:bx--slider__track={true}></div>
+      <div class:bx--slider__filled-track={true}></div>
+      <div class:bx--slider__thumb={true}></div>
+    </div>
+    <span class:bx--slider__range-label={true}></span>
+  </div>
+</div>

package/src/Slider/index.js

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