@ifloppy/maxcraftmc-ui-svelte 0.1.0

package/src/Tag/Tag.svelte

@@ -0,0 +1,172 @@
+<script>
+  /** @restProps {div | span} */
+
+  /**
+   * Specify the type of tag
+   * @type {"red" | "magenta" | "purple" | "blue" | "cyan" | "teal" | "green" | "gray" | "cool-gray" | "warm-gray" | "high-contrast" | "outline"}
+   */
+  export let type = undefined;
+
+  /** @type {"sm" | "default"} */
+  export let size = "default";
+
+  /** Set to `true` to use filterable variant */
+  export let filter = false;
+
+  /** Set to `true` to disable a filterable tag */
+  export let disabled = false;
+
+  /** Set to `true` to render a `button` element instead of a `div` */
+  export let interactive = false;
+
+  /** Set to `true` to display the skeleton state */
+  export let skeleton = false;
+
+  /** Set the title for the close button in a filterable tag */
+  export let title = "Clear filter";
+
+  /**
+   * Specify the icon to render
+   * @type {any}
+   */
+  export let icon = undefined;
+
+  /** Set an id for the filterable tag */
+  export let id = "ccs-" + Math.random().toString(36);
+
+  import { createEventDispatcher } from "svelte";
+  import Close from "../icons/Close.svelte";
+  import TagSkeleton from "./TagSkeleton.svelte";
+
+  const dispatch = createEventDispatcher();
+</script>
+
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+{#if skeleton}
+  <TagSkeleton
+    {size}
+    {...$$restProps}
+    on:click
+    on:mouseover
+    on:mouseenter
+    on:mouseleave
+  />
+{:else if filter}
+  <div
+    aria-label={title}
+    {id}
+    class:bx--tag={true}
+    class:bx--tag--disabled={disabled}
+    class:bx--tag--filter={filter}
+    class:bx--tag--sm={size === "sm"}
+    class:bx--tag--red={type === "red"}
+    class:bx--tag--magenta={type === "magenta"}
+    class:bx--tag--purple={type === "purple"}
+    class:bx--tag--blue={type === "blue"}
+    class:bx--tag--cyan={type === "cyan"}
+    class:bx--tag--teal={type === "teal"}
+    class:bx--tag--green={type === "green"}
+    class:bx--tag--gray={type === "gray"}
+    class:bx--tag--cool-gray={type === "cool-gray"}
+    class:bx--tag--warm-gray={type === "warm-gray"}
+    class:bx--tag--high-contrast={type === "high-contrast"}
+    class:bx--tag--outline={type === "outline"}
+    {...$$restProps}
+  >
+    <slot props={{ class: "bx--tag__label" }}>
+      <span class:bx--tag__label={true}>{type}</span>
+    </slot>
+    <button
+      type="button"
+      aria-labelledby={id}
+      class:bx--tag__close-icon={true}
+      {disabled}
+      {title}
+      on:click
+      on:click|stopPropagation={() => {
+        dispatch("close");
+      }}
+      on:mouseover
+      on:mouseenter
+      on:mouseleave
+    >
+      <Close />
+    </button>
+  </div>
+{:else if interactive}
+  <button
+    type="button"
+    {id}
+    {disabled}
+    aria-disabled={disabled}
+    tabindex={disabled ? "-1" : undefined}
+    class:bx--tag={true}
+    class:bx--tag--interactive={true}
+    class:bx--tag--disabled={disabled}
+    class:bx--tag--sm={size === "sm"}
+    class:bx--tag--red={type === "red"}
+    class:bx--tag--magenta={type === "magenta"}
+    class:bx--tag--purple={type === "purple"}
+    class:bx--tag--blue={type === "blue"}
+    class:bx--tag--cyan={type === "cyan"}
+    class:bx--tag--teal={type === "teal"}
+    class:bx--tag--green={type === "green"}
+    class:bx--tag--gray={type === "gray"}
+    class:bx--tag--cool-gray={type === "cool-gray"}
+    class:bx--tag--warm-gray={type === "warm-gray"}
+    class:bx--tag--high-contrast={type === "high-contrast"}
+    class:bx--tag--outline={type === "outline"}
+    {...$$restProps}
+    on:click
+    on:mouseover
+    on:mouseenter
+    on:mouseleave
+  >
+    {#if $$slots.icon || icon}
+      <div class:bx--tag__custom-icon={true}>
+        <slot name="icon">
+          <svelte:component this={icon} />
+        </slot>
+      </div>
+    {/if}
+    <span>
+      <slot />
+    </span>
+  </button>
+{:else}
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
+  <div
+    {id}
+    class:bx--tag={true}
+    class:bx--tag--disabled={disabled}
+    class:bx--tag--sm={size === "sm"}
+    class:bx--tag--red={type === "red"}
+    class:bx--tag--magenta={type === "magenta"}
+    class:bx--tag--purple={type === "purple"}
+    class:bx--tag--blue={type === "blue"}
+    class:bx--tag--cyan={type === "cyan"}
+    class:bx--tag--teal={type === "teal"}
+    class:bx--tag--green={type === "green"}
+    class:bx--tag--gray={type === "gray"}
+    class:bx--tag--cool-gray={type === "cool-gray"}
+    class:bx--tag--warm-gray={type === "warm-gray"}
+    class:bx--tag--high-contrast={type === "high-contrast"}
+    class:bx--tag--outline={type === "outline"}
+    {...$$restProps}
+    on:click
+    on:mouseover
+    on:mouseenter
+    on:mouseleave
+  >
+    {#if $$slots.icon || icon}
+      <div class:bx--tag__custom-icon={true}>
+        <slot name="icon">
+          <svelte:component this={icon} />
+        </slot>
+      </div>
+    {/if}
+    <span>
+      <slot />
+    </span>
+  </div>
+{/if}

package/src/Tag/TagSkeleton.svelte

@@ -0,0 +1,17 @@
+<script>
+  /** @type {"sm" | "default"} */
+  export let size = "default";
+</script>
+
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<span
+  class:bx--tag={true}
+  class:bx--tag--sm={size === "sm"}
+  class:bx--skeleton={true}
+  {...$$restProps}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+></span>

package/src/Tag/index.js

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

package/src/TextArea/TextArea.svelte

@@ -0,0 +1,134 @@
+<script>
+  /**
+   * Specify the textarea value.
+   * @type {null | string}
+   */
+  export let value = "";
+
+  /** Specify the placeholder text */
+  export let placeholder = "";
+
+  /** Specify the number of cols */
+  export let cols = 50;
+
+  /** Specify the number of rows */
+  export let rows = 4;
+
+  /**
+   * Specify the max character count
+   * @type {number}
+   */
+  export let maxCount = undefined;
+
+  /** Set to `true` to enable the light variant */
+  export let light = false;
+
+  /** Set to `true` to disable the input */
+  export let disabled = false;
+
+  /** Set to `true` to use the read-only variant */
+  export let readonly = false;
+
+  /** Specify the helper text */
+  export let helperText = "";
+
+  /** 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 text for the invalid state */
+  export let invalidText = "";
+
+  /** Set an id for the textarea 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 textarea HTML element */
+  export let ref = null;
+
+  import WarningFilled from "../icons/WarningFilled.svelte";
+
+  $: errorId = `error-${id}`;
+</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
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+  class:bx--form-item={true}
+>
+  {#if labelText || $$slots.labelText}
+    <div class:bx--text-area__label-wrapper={true}>
+      <label
+        for={id}
+        class:bx--label={true}
+        class:bx--visually-hidden={hideLabel}
+        class:bx--label--disabled={disabled}
+      >
+        <slot name="labelText">
+          {labelText}
+        </slot>
+      </label>
+      {#if maxCount}
+        <div class:bx--label={true} class:bx--label--disabled={disabled}>
+          {(value ?? "").length}/{maxCount}
+        </div>
+      {/if}
+    </div>
+  {/if}
+  <div class:bx--text-area__wrapper={true} data-invalid={invalid || undefined}>
+    {#if invalid}
+      <WarningFilled class="bx--text-area__invalid-icon" />
+    {/if}
+    <textarea
+      bind:this={ref}
+      bind:value
+      aria-invalid={invalid || undefined}
+      aria-describedby={invalid ? errorId : undefined}
+      {disabled}
+      {id}
+      {name}
+      {cols}
+      {rows}
+      {placeholder}
+      {readonly}
+      class:bx--text-area={true}
+      class:bx--text-area--light={light}
+      class:bx--text-area--invalid={invalid}
+      maxlength={maxCount ?? undefined}
+      {...$$restProps}
+      on:change
+      on:input
+      on:keydown
+      on:keyup
+      on:focus
+      on:blur
+      on:paste
+    ></textarea>
+  </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}
+</div>

package/src/TextArea/TextAreaSkeleton.svelte

@@ -0,0 +1,20 @@
+<script>
+  /** Set to `true` to visually 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--skeleton={true} class:bx--text-area={true}></div>
+</div>

package/src/TextArea/index.js

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

package/src/TextInput/PasswordInput.svelte

@@ -0,0 +1,265 @@
+<script>
+  /**
+   * Set the size of the input
+   * @type {"sm" | "xl"}
+   */
+  export let size = undefined;
+
+  /**
+   * Specify the input value
+   * @type {number | string}
+   */
+  export let value = "";
+
+  /**
+   * Set to `"text"` to toggle the password visibility
+   * @type {"text" | "password"}
+   */
+  export let type = "password";
+
+  /** Specify the placeholder text */
+  export let placeholder = "";
+
+  /** Specify the hide password label text */
+  export let hidePasswordLabel = "Hide password";
+
+  /** Specify the show password label text */
+  export let showPasswordLabel = "Show password";
+
+  /**
+   * Set the alignment of the tooltip relative to the icon
+   * @type {"start" | "center" | "end"}
+   */
+  export let tooltipAlignment = "center";
+
+  /**
+   * Set the position of the tooltip relative to the icon
+   * @type {"top" | "right" | "bottom" | "left"}
+   */
+  export let tooltipPosition = "bottom";
+
+  /** 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 helper text */
+  export let helperText = "";
+
+  /** 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 text for the invalid state */
+  export let invalidText = "";
+
+  /** Set to `true` to indicate an warning state */
+  export let warn = false;
+
+  /** Specify the warning state text */
+  export let warnText = "";
+
+  /** Set to `true` to use inline version */
+  export let inline = false;
+
+  /** 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 { getContext } from "svelte";
+  import WarningFilled from "../icons/WarningFilled.svelte";
+  import WarningAltFilled from "../icons/WarningAltFilled.svelte";
+  import View from "../icons/View.svelte";
+  import ViewOff from "../icons/ViewOff.svelte";
+
+  const ctx = getContext("Form");
+
+  const isFluid = !!ctx && ctx.isFluid;
+  $: helperId = `helper-${id}`;
+  $: errorId = `error-${id}`;
+  $: warnId = `warn-${id}`;
+</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}
+  class:bx--text-input-wrapper={true}
+  class:bx--password-input-wrapper={!isFluid}
+  class:bx--text-input-wrapper--light={light}
+  class:bx--text-input-wrapper--inline={inline}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+>
+  {#if inline}
+    <label
+      for={id}
+      class:bx--label={true}
+      class:bx--visually-hidden={hideLabel}
+      class:bx--label--disabled={disabled}
+      class:bx--label--inline={inline}
+      class:bx--label--inline--sm={inline && size === "sm"}
+      class:bx--label--inline--xl={inline && size === "xl"}
+    >
+      <slot name="labelText">
+        {labelText}
+      </slot>
+    </label>
+    {#if !isFluid && helperText}
+      <div
+        id={helperId}
+        class:bx--form__helper-text={true}
+        class:bx--form__helper-text--disabled={disabled}
+        class:bx--form__helper-text--inline={inline}
+      >
+        {helperText}
+      </div>
+    {/if}
+  {/if}
+  {#if !inline && (labelText || $$slots.labelText)}
+    <label
+      for={id}
+      class:bx--label={true}
+      class:bx--visually-hidden={hideLabel}
+      class:bx--label--disabled={disabled}
+      class:bx--label--inline={inline}
+      class:bx--label--inline--sm={inline && size === "sm"}
+      class:bx--label--inline--xl={inline && size === "xl"}
+    >
+      <slot name="labelText">
+        {labelText}
+      </slot>
+    </label>
+  {/if}
+  <div
+    class:bx--text-input__field-outer-wrapper={true}
+    class:bx--text-input__field-outer-wrapper--inline={inline}
+  >
+    <div
+      class:bx--text-input__field-wrapper={true}
+      class:bx--text-input__field-wrapper--warning={warn}
+      data-invalid={invalid || undefined}
+    >
+      {#if invalid}
+        <WarningFilled class="bx--text-input__invalid-icon" />
+      {/if}
+      {#if !invalid && warn}
+        <WarningAltFilled
+          class="bx--text-input__invalid-icon
+            bx--text-input__invalid-icon--warning"
+        />
+      {/if}
+      <input
+        bind:this={ref}
+        data-invalid={invalid || undefined}
+        aria-invalid={invalid || undefined}
+        aria-describedby={invalid
+          ? errorId
+          : warn
+            ? warnId
+            : helperText
+              ? helperId
+              : undefined}
+        {id}
+        {name}
+        {placeholder}
+        {type}
+        value={value ?? ""}
+        {disabled}
+        class:bx--text-input={true}
+        class:bx--password-input={true}
+        class:bx--text-input--light={light}
+        class:bx--text-input--invalid={invalid}
+        class:bx--text-input--warning={warn}
+        class:bx--text-input--sm={size === "sm"}
+        class:bx--text-input--xl={size === "xl"}
+        {...$$restProps}
+        on:change
+        on:input
+        on:input={({ target }) => {
+          value = target.value;
+        }}
+        on:keydown
+        on:keyup
+        on:focus
+        on:blur
+        on:paste
+      />
+      {#if isFluid && invalid}
+        <hr class="bx--text-input__divider" />
+        <div class="bx--form-requirement" id={errorId}>
+          {invalidText}
+        </div>
+      {/if}
+      {#if !(isFluid && invalid)}
+        <button
+          type="button"
+          {disabled}
+          class:bx--text-input--password__visibility__toggle={true}
+          class:bx--btn={true}
+          class:bx--btn--icon-only={true}
+          class:bx--btn--disabled={disabled}
+          class:bx--tooltip__trigger={true}
+          class:bx--tooltip--a11y={true}
+          class:bx--tooltip--top={tooltipPosition === "top"}
+          class:bx--tooltip--right={tooltipPosition === "right"}
+          class:bx--tooltip--bottom={tooltipPosition === "bottom"}
+          class:bx--tooltip--left={tooltipPosition === "left"}
+          class:bx--tooltip--align-start={tooltipAlignment === "start"}
+          class:bx--tooltip--align-center={tooltipAlignment === "center"}
+          class:bx--tooltip--align-end={tooltipAlignment === "end"}
+          on:click={() => {
+            type = type === "password" ? "text" : "password";
+          }}
+        >
+          {#if !disabled}
+            <span class:bx--assistive-text={true}>
+              {#if type === "text"}
+                {hidePasswordLabel}
+              {:else}{showPasswordLabel}{/if}
+            </span>
+          {/if}
+          {#if type === "text"}
+            <ViewOff class="bx--icon-visibility-off" />
+          {:else}
+            <View class="bx--icon-visibility-on" />
+          {/if}
+        </button>
+      {/if}
+    </div>
+    {#if !isFluid && invalid}
+      <div class:bx--form-requirement={true} id={errorId}>
+        {invalidText}
+      </div>
+    {/if}
+    {#if !invalid && !warn && !isFluid && !inline && helperText}
+      <div
+        class:bx--form__helper-text={true}
+        class:bx--form__helper-text--disabled={disabled}
+        class:bx--form__helper-text--inline={inline}
+      >
+        {helperText}
+      </div>
+    {/if}
+    {#if !isFluid && !invalid && warn}
+      <div class:bx--form-requirement={true} id={warnId}>{warnText}</div>
+    {/if}
+  </div>
+</div>