@ifloppy/maxcraftmc-ui-svelte 0.1.0

package/src/DatePicker/DatePicker.svelte

@@ -0,0 +1,271 @@
+<script>
+  /**
+   * @event {string | { selectedDates: [dateFrom: Date, dateTo?: Date]; dateStr: string | { from: string; to: string; } }} change
+   */
+
+  /**
+   * Specify the date picker type
+   * @type {"simple" | "single" | "range"}
+   */
+  export let datePickerType = "simple";
+
+  /**
+   * Specify the date picker input value
+   * @type {number | string}
+   */
+  export let value = "";
+
+  /**
+   * Specify the date picker start date value (from)
+   * Only works with the "range" date picker type
+   * @type {string}
+   */
+  export let valueFrom = "";
+
+  /**
+   * Specify the date picker end date value (to)
+   * Only works with the "range" date picker type
+   * @type {string}
+   */
+  export let valueTo = "";
+
+  /** Specify the date format */
+  export let dateFormat = "m/d/Y";
+
+  /**
+   * Specify the maximum date
+   * @type {null | string | Date}
+   */
+  export let maxDate = null;
+
+  /**
+   * Specify the minimum date
+   * @type {null | string | Date}
+   */
+  export let minDate = null;
+
+  /**
+   * Specify the locale
+   * @type {import("flatpickr/dist/types/locale").CustomLocale | import("flatpickr/dist/types/locale").key}
+   */
+  export let locale = "en";
+
+  /** Set to `true` to use the short variant */
+  export let short = false;
+
+  /** Set to `true` to enable the light variant */
+  export let light = false;
+
+  /** Set an id for the date picker element */
+  export let id = "ccs-" + Math.random().toString(36);
+
+  /**
+   * Override the options passed to the Flatpickr instance.
+   * @see https://flatpickr.js.org/options
+   * @type {import("flatpickr/dist/types/options").Options}
+   */
+  export let flatpickrProps = { static: true };
+
+  import {
+    createEventDispatcher,
+    setContext,
+    afterUpdate,
+    onMount,
+  } from "svelte";
+  import { writable, derived } from "svelte/store";
+  import { createCalendar } from "./createCalendar";
+
+  const dispatch = createEventDispatcher();
+  const inputs = writable([]);
+  const inputIds = derived(inputs, (_) => _.map(({ id }) => id));
+  const labelTextEmpty = derived(
+    inputs,
+    (_) => _.filter(({ labelText }) => !!labelText).length === 0,
+  );
+  const inputValue = writable(value);
+  const inputValueFrom = writable(valueFrom);
+  const inputValueTo = writable(valueTo);
+  const mode = writable(datePickerType);
+  const range = derived(mode, (_) => _ === "range");
+  const hasCalendar = derived(mode, (_) => _ === "single" || _ === "range");
+
+  let calendar = null;
+  let datePickerRef = null;
+  let inputRef = null;
+  let inputRefTo = null;
+
+  setContext("DatePicker", {
+    range,
+    inputValue,
+    inputValueFrom,
+    inputValueTo,
+    inputIds,
+    hasCalendar,
+    add: (data) => {
+      inputs.update((_) => [..._, data]);
+    },
+    declareRef: ({ id, ref }) => {
+      if ($inputIds.indexOf(id) === 0) {
+        inputRef = ref;
+      } else {
+        inputRefTo = ref;
+      }
+    },
+    updateValue: ({ type, value }) => {
+      if ((!calendar && type === "input") || type === "change") {
+        inputValue.set(value);
+      }
+
+      if (!calendar && type === "change") {
+        dispatch("change", value);
+      }
+    },
+    blurInput: (relatedTarget) => {
+      if (calendar && !calendar.calendarContainer.contains(relatedTarget)) {
+        calendar.close();
+      }
+    },
+    openCalendar: () => {
+      calendar.open();
+    },
+    focusCalendar: () => {
+      (
+        calendar.selectedDateElem ||
+        calendar.todayDateElem ||
+        calendar.calendarContainer.querySelector(".flatpickr-day[tabindex]") ||
+        calendar.calendarContainer
+      ).focus();
+    },
+  });
+
+  async function initCalendar(options) {
+    if (calendar) {
+      calendar.set("minDate", minDate);
+      calendar.set("maxDate", maxDate);
+      calendar.set("locale", locale);
+      calendar.set("dateFormat", dateFormat);
+      Object.entries(flatpickrProps).forEach(([option, value]) => {
+        calendar.set(options, value);
+      });
+      return;
+    }
+
+    calendar = await createCalendar({
+      options: {
+        ...options,
+        appendTo: datePickerRef,
+        defaultDate: $inputValue,
+        mode: $mode,
+      },
+      base: inputRef,
+      input: inputRefTo,
+      dispatch: (event) => {
+        const detail = { selectedDates: calendar.selectedDates };
+
+        if ($range) {
+          const from = inputRef.value;
+          const to = inputRefTo.value;
+
+          detail.dateStr = {
+            from: inputRef.value,
+            to: inputRefTo.value,
+          };
+
+          valueFrom = from;
+          valueTo = to;
+        } else {
+          detail.dateStr = inputRef.value;
+        }
+
+        return dispatch(event, detail);
+      },
+    });
+    calendar?.calendarContainer?.setAttribute("role", "application");
+    calendar?.calendarContainer?.setAttribute(
+      "aria-label",
+      "calendar-container",
+    );
+  }
+
+  onMount(() => {
+    return () => {
+      if (calendar) {
+        calendar.destroy();
+        calendar = null;
+      }
+    };
+  });
+
+  afterUpdate(() => {
+    if (calendar) {
+      if ($range) {
+        calendar.setDate([$inputValueFrom, $inputValueTo]);
+
+        // workaround to remove the default range plugin separator "to"
+        inputRef.value = $inputValueFrom;
+      } else {
+        calendar.setDate($inputValue);
+      }
+    }
+  });
+
+  $: inputValue.set(value);
+  $: value = $inputValue;
+  $: inputValueFrom.set(valueFrom);
+  $: valueFrom = $inputValueFrom;
+  $: inputValueTo.set(valueTo);
+  $: valueTo = $inputValueTo;
+  $: if ($hasCalendar && inputRef) {
+    initCalendar({
+      dateFormat,
+      locale,
+      maxDate,
+      minDate,
+      // default to static: true so the
+      // date picker works inside a modal
+      static: true,
+      ...flatpickrProps,
+    });
+  }
+</script>
+
+<svelte:window
+  on:click={({ target }) => {
+    if (!calendar || !calendar.isOpen) return;
+    if (datePickerRef && datePickerRef.contains(target)) return;
+    if (!calendar.calendarContainer.contains(target)) calendar.close();
+  }}
+/>
+
+<!-- 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
+>
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
+  <div
+    bind:this={datePickerRef}
+    {id}
+    class:bx--date-picker={true}
+    class:bx--date-picker--short={short}
+    class:bx--date-picker--light={light}
+    class:bx--date-picker--simple={datePickerType === "simple"}
+    class:bx--date-picker--single={datePickerType === "single"}
+    class:bx--date-picker--range={datePickerType === "range"}
+    class:bx--date-picker--nolabel={datePickerType === "range" &&
+      $labelTextEmpty}
+    on:keydown={(e) => {
+      if (calendar?.isOpen && e.key === "Escape") {
+        e.stopPropagation();
+        calendar.close();
+      }
+    }}
+  >
+    <slot />
+  </div>
+</div>

package/src/DatePicker/DatePickerInput.svelte

@@ -0,0 +1,173 @@
+<script>
+  /**
+   * Set the size of the input
+   * @type {"sm" | "xl"}
+   */
+  export let size = undefined;
+
+  /** Specify the input type */
+  export let type = "text";
+
+  /** Specify the input placeholder text */
+  export let placeholder = "";
+
+  /** Specify the Regular Expression for the input value */
+  export let pattern = "\\d{1,2}\\/\\d{1,2}\\/\\d{4}";
+
+  /** Set to `true` to disable the input */
+  export let disabled = false;
+
+  /** Specify the helper text */
+  export let helperText = "";
+
+  /** Specify the ARIA label for the calendar icon */
+  export let iconDescription = "";
+
+  /** Set an id for the input element */
+  export let id = "ccs-" + Math.random().toString(36);
+
+  /** 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 to `true` to indicate an warning state */
+  export let warn = false;
+
+  /** Specify the warning state text */
+  export let warnText = "";
+
+  /**
+   * Set a name for the input element
+   * @type {string}
+   */
+  export let name = undefined;
+
+  /** Obtain a reference to the input HTML element */
+  export let ref = null;
+
+  import { getContext } from "svelte";
+  import Calendar from "../icons/Calendar.svelte";
+  import WarningFilled from "../icons/WarningFilled.svelte";
+  import WarningAltFilled from "../icons/WarningAltFilled.svelte";
+
+  const {
+    range,
+    add,
+    hasCalendar,
+    declareRef,
+    inputIds,
+    updateValue,
+    blurInput,
+    openCalendar,
+    focusCalendar,
+    inputValue,
+    inputValueFrom,
+    inputValueTo,
+  } = getContext("DatePicker");
+
+  add({ id, labelText });
+
+  $: if (ref) declareRef({ id, ref });
+</script>
+
+<div
+  class:bx--date-picker-container={true}
+  class:bx--date-picker--nolabel={!labelText}
+>
+  {#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}
+  <div
+    class:bx--date-picker-input__wrapper={true}
+    class:bx--date-picker-input__wrapper--invalid={invalid}
+    class:bx--date-picker-input__wrapper--warn={warn}
+  >
+    <input
+      bind:this={ref}
+      data-invalid={invalid || undefined}
+      {id}
+      {name}
+      {placeholder}
+      {type}
+      {pattern}
+      {disabled}
+      {...$$restProps}
+      value={$range
+        ? $inputIds.indexOf(id) === 0
+          ? $inputValueFrom
+          : $inputValueTo
+        : $inputValue}
+      class:bx--date-picker__input={true}
+      class:bx--date-picker__input--invalid={invalid}
+      class:bx--date-picker__input--sm={size === "sm"}
+      class:bx--date-picker__input--xl={size === "xl"}
+      on:input
+      on:input={({ target }) => {
+        updateValue({ type: "input", value: target.value });
+      }}
+      on:change={({ target }) => {
+        updateValue({ type: "change", value: target.value });
+      }}
+      on:keydown
+      on:keydown={({ key }) => {
+        if (key === "ArrowDown") {
+          focusCalendar();
+        }
+      }}
+      on:keyup
+      on:blur
+      on:blur={({ relatedTarget }) => {
+        blurInput(relatedTarget);
+      }}
+      on:paste
+    />
+    {#if invalid}
+      <WarningFilled
+        class="bx--date-picker__icon bx--date-picker__icon--invalid"
+      />
+    {/if}
+    {#if !invalid && warn}
+      <WarningAltFilled
+        class="bx--date-picker__icon bx--date-picker__icon--warn"
+      />
+    {/if}
+    {#if $hasCalendar && !invalid && !warn}
+      <Calendar
+        class="bx--date-picker__icon"
+        aria-label={iconDescription}
+        on:click={openCalendar}
+      />
+    {/if}
+  </div>
+  {#if invalid}
+    <div class:bx--form-requirement={true}>{invalidText}</div>
+  {/if}
+  {#if !invalid && warn}
+    <div class:bx--form-requirement={true}>{warnText}</div>
+  {/if}
+  {#if !invalid && !warn && helperText}
+    <div
+      class:bx--form__helper-text={true}
+      class:bx--form__helper-text--disabled={disabled}
+    >
+      {helperText}
+    </div>
+  {/if}
+</div>

package/src/DatePicker/DatePickerSkeleton.svelte

@@ -0,0 +1,36 @@
+<script>
+  /** Set to `true` to use the range variant */
+  export let range = false;
+
+  /** 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-static-element-interactions -->
+<div
+  class:bx--form-item={true}
+  {...$$restProps}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+>
+  <div
+    class:bx--date-picker={true}
+    class:bx--skeleton={true}
+    class:bx--date-picker--range={true}
+    class:bx--date-picker--short={!range}
+    class:bx--date-picker--simple={!range}
+  >
+    {#each Array.from({ length: range ? 2 : 1 }, (_, i) => i) as input, i (input)}
+      <div class:bx--date-picker-container={true}>
+        <label for={id} class:bx--label={true}></label>
+        <div
+          class:bx--date-picker__input={true}
+          class:bx--skeleton={true}
+        ></div>
+      </div>
+    {/each}
+  </div>
+</div>

package/src/DatePicker/createCalendar.js

@@ -0,0 +1,100 @@
+import flatpickr from "flatpickr";
+
+let l10n;
+
+function updateClasses(instance) {
+  const {
+    calendarContainer,
+    days,
+    daysContainer,
+    weekdayContainer,
+    selectedDates,
+  } = instance;
+
+  calendarContainer.classList.add("bx--date-picker__calendar");
+  calendarContainer
+    .querySelector(".flatpickr-month")
+    .classList.add("bx--date-picker__month");
+
+  weekdayContainer.classList.add("bx--date-picker__weekdays");
+  weekdayContainer.querySelectorAll(".flatpickr-weekday").forEach((node) => {
+    node.classList.add("bx--date-picker__weekday");
+  });
+
+  daysContainer.classList.add("bx--date-picker__days");
+  days.querySelectorAll(".flatpickr-day").forEach((node) => {
+    node.classList.add("bx--date-picker__day");
+    if (node.classList.contains("today") && selectedDates.length > 0) {
+      node.classList.add("no-border");
+    } else if (node.classList.contains("today") && selectedDates.length === 0) {
+      node.classList.remove("no-border");
+    }
+  });
+}
+
+function updateMonthNode(instance) {
+  const monthText = instance.l10n.months.longhand[instance.currentMonth];
+  const staticMonthNode = instance.monthNav.querySelector(".cur-month");
+
+  if (staticMonthNode) {
+    staticMonthNode.textContent = monthText;
+  } else {
+    const monthSelectNode = instance.monthsDropdownContainer;
+    const span = document.createElement("span");
+    span.setAttribute("class", "cur-month");
+    span.textContent = monthText;
+    monthSelectNode.parentNode.replaceChild(span, monthSelectNode);
+  }
+}
+
+async function createCalendar({ options, base, input, dispatch }) {
+  let locale = options.locale;
+
+  if (options.locale === "en" && l10n && l10n.en) {
+    l10n.en.weekdays.shorthand.forEach((_, index) => {
+      const shorthand = _.slice(0, 2);
+      l10n.en.weekdays.shorthand[index] =
+        shorthand === "Th" ? "Th" : shorthand.charAt(0);
+    });
+
+    locale = l10n.en;
+  }
+
+  let rangePlugin;
+
+  if (options.mode === "range") {
+    const importee = await import("flatpickr/dist/esm/plugins/rangePlugin");
+    rangePlugin = importee.default;
+  }
+
+  return new flatpickr(base, {
+    allowInput: true,
+    disableMobile: true,
+    clickOpens: true,
+    locale,
+    plugins: [
+      options.mode === "range" && new rangePlugin({ position: "left", input }),
+    ].filter(Boolean),
+    nextArrow:
+      '<svg width="16px" height="16px" viewBox="0 0 16 16"><polygon points="11,8 6,13 5.3,12.3 9.6,8 5.3,3.7 6,3 "/><rect width="16" height="16" style="fill: none" /></svg>',
+    prevArrow:
+      '<svg width="16px" height="16px" viewBox="0 0 16 16"><polygon points="5,8 10,3 10.7,3.7 6.4,8 10.7,12.3 10,13 "/><rect width="16" height="16" style="fill: none" /></svg>',
+    onChange: () => {
+      dispatch("change");
+    },
+    onClose: () => {
+      dispatch("close");
+    },
+    onMonthChange: (s, d, instance) => {
+      updateMonthNode(instance);
+    },
+    onOpen: (s, d, instance) => {
+      dispatch("open");
+      updateClasses(instance);
+      updateMonthNode(instance);
+    },
+    ...options,
+  });
+}
+
+export { createCalendar };

package/src/DatePicker/index.js

@@ -0,0 +1,3 @@
+export { default as DatePicker } from "./DatePicker.svelte";
+export { default as DatePickerInput } from "./DatePickerInput.svelte";
+export { default as DatePickerSkeleton } from "./DatePickerSkeleton.svelte";