boredgame/src/lib/components/CustomCheckbox.svelte

<script>
  /**
   * @event {boolean} check
   */

  /**
   * Specify the value of the checkbox
   * @type {any}
   */
  export let value = '';

  /** Specify whether the checkbox is checked */
  export let checked = false;

  /**
   * Specify the bound group
   * @type {any[]}
   */
  export let group = undefined;

  /** Specify whether the checkbox is indeterminate */
  export let indeterminate = false;

  /** Set to `true` to display the skeleton state */
  export let skeleton = false;

  /** Set to `true` to mark the field as required */
  export let required = false;

  /** Set to `true` for the checkbox to be read-only */
  export let readonly = false;

  /** Set to `true` to disable the checkbox */
  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 a name for the input element */
  export let name = '';

  /**
   * Specify the title attribute for the label element
   * @type {string}
   */
  export let title = undefined;

  /** Set an id for the input label */
  export let id = 'ccs-' + Math.random().toString(36);

  /** Obtain a reference to the input HTML element */
  export let ref = null;

  import { createEventDispatcher } from 'svelte';
  import CheckboxSkeleton from './CheckboxSkeleton.svelte';

  const dispatch = createEventDispatcher();

  $: useGroup = Array.isArray(group);
  $: checked = useGroup ? group.includes(value) : checked;
  $: dispatch('check', checked);
</script>

<!-- svelte-ignore a11y-mouse-events-have-key-events -->
{#if skeleton}
  <CheckboxSkeleton {...$$restProps} on:click on:mouseover on:mouseenter on:mouseleave />
{:else}
  <div
    class:bx--form-item={true}
    class:bx--checkbox-wrapper={true}
    {...$$restProps}
    on:click
    on:mouseover
    on:mouseenter
    on:mouseleave
  >
    <input
      bind:this={ref}
      type="checkbox"
      {value}
      {checked}
      {disabled}
      {id}
      {indeterminate}
      {name}
      {required}
      {readonly}
      class:bx--checkbox={true}
      on:change={() => {
        if (useGroup) {
          group = group.includes(value)
            ? group.filter((_value) => _value !== value)
            : [...group, value];
        } else {
          checked = !checked;
        }
      }}
      on:change
      on:blur
    />
    <label for={id} {title} class:bx--checkbox-label={true}>
      <span class:bx--checkbox-label-text={true} class:bx--visually-hidden={hideLabel}>
        <slot name="labelText">
          {labelText}
        </slot>
      </span>
    </label>
  </div>
{/if}