@ifloppy/maxcraftmc-ui-svelte 0.1.0

package/src/StructuredList/StructuredList.svelte

@@ -0,0 +1,53 @@
+<script>
+  /**
+   * @event {string} change
+   */
+
+  /**
+   * Specify the selected structured list row value
+   * @type {string}
+   */
+  export let selected = undefined;
+
+  /** Set to `true` to use the condensed variant */
+  export let condensed = false;
+
+  /** Set to `true` to flush the list */
+  export let flush = false;
+
+  /** Set to `true` to use the selection variant */
+  export let selection = false;
+
+  import { createEventDispatcher, setContext } from "svelte";
+  import { writable } from "svelte/store";
+
+  const dispatch = createEventDispatcher();
+  const selectedValue = writable(selected);
+
+  setContext("StructuredListWrapper", {
+    selectedValue,
+    update: (value) => {
+      selectedValue.set(value);
+    },
+  });
+
+  $: selected = $selectedValue;
+  $: dispatch("change", $selectedValue);
+</script>
+
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+<div
+  role="table"
+  class:bx--structured-list={true}
+  class:bx--structured-list--selection={selection}
+  class:bx--structured-list--condensed={condensed}
+  class:bx--structured-list--flush={flush}
+  {...$$restProps}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+>
+  <slot />
+</div>

package/src/StructuredList/StructuredListBody.svelte

@@ -0,0 +1,13 @@
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+<div
+  role="rowgroup"
+  class:bx--structured-list-tbody={true}
+  {...$$restProps}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+>
+  <slot />
+</div>

package/src/StructuredList/StructuredListCell.svelte

@@ -0,0 +1,22 @@
+<script>
+  /** Set to `true` to use as a header */
+  export let head = false;
+
+  /** Set to `true` to prevent wrapping */
+  export let noWrap = false;
+</script>
+
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+<div
+  role={head ? "columnheader" : "cell"}
+  class:bx--structured-list-th={head}
+  class:bx--structured-list-td={!head}
+  class:bx--structured-list-content--nowrap={noWrap}
+  {...$$restProps}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+>
+  <slot />
+</div>

package/src/StructuredList/StructuredListHead.svelte

@@ -0,0 +1,13 @@
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+<div
+  role="rowgroup"
+  class:bx--structured-list-thead={true}
+  {...$$restProps}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+>
+  <slot />
+</div>

package/src/StructuredList/StructuredListInput.svelte

@@ -0,0 +1,45 @@
+<script>
+  /** Set to `true` to check the input */
+  export let checked = false;
+
+  /** Specify the title of the input */
+  export let title = "title";
+
+  /** Specify the value of the input */
+  export let value = "value";
+
+  /** Set an id for the input element */
+  export let id = "ccs-" + Math.random().toString(36);
+
+  /** Specify a name attribute for the input */
+  export let name = "";
+
+  /** Obtain a reference to the input HTML element */
+  export let ref = null;
+
+  import { getContext } from "svelte";
+
+  const { selectedValue, update } = getContext("StructuredListWrapper");
+
+  if (checked) {
+    update(value);
+  }
+
+  $: checked = $selectedValue === value;
+</script>
+
+<input
+  bind:this={ref}
+  type="radio"
+  tabindex="-1"
+  {checked}
+  {id}
+  {name}
+  {title}
+  {value}
+  class:bx--structured-list-input={true}
+  {...$$restProps}
+  on:change={() => {
+    update(value);
+  }}
+/>

package/src/StructuredList/StructuredListRow.svelte

@@ -0,0 +1,44 @@
+<script>
+  /** Set to `true` to use as a header */
+  export let head = false;
+
+  /** Set to `true` to render a label slot */
+  export let label = false;
+
+  /** Specify the tabindex */
+  export let tabindex = "0";
+</script>
+
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+{#if label}
+  <!-- svelte-ignore a11y-label-has-associated-control -->
+  <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+  <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+  <label
+    {tabindex}
+    class:bx--structured-list-row={true}
+    class:bx--structured-list-row--header-row={head}
+    {...$$restProps}
+    on:click
+    on:mouseover
+    on:mouseenter
+    on:mouseleave
+    on:keydown
+  >
+    <slot />
+  </label>
+{:else}
+  <!-- svelte-ignore a11y-interactive-supports-focus -->
+  <div
+    role="row"
+    class:bx--structured-list-row={true}
+    class:bx--structured-list-row--header-row={head}
+    {...$$restProps}
+    on:click
+    on:mouseover
+    on:mouseenter
+    on:mouseleave
+  >
+    <slot />
+  </div>
+{/if}

package/src/StructuredList/StructuredListSkeleton.svelte

@@ -0,0 +1,36 @@
+<script>
+  /** Specify the number of rows */
+  export let rows = 5;
+</script>
+
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
+  class:bx--skeleton={true}
+  class:bx--structured-list={true}
+  {...$$restProps}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+>
+  <div class:bx--structured-list-thead={true}>
+    <div
+      class:bx--structured-list-row={true}
+      class:bx--structured-list-row--header-row={true}
+    >
+      <div class:bx--structured-list-th={true}><span></span></div>
+      <div class:bx--structured-list-th={true}><span></span></div>
+      <div class:bx--structured-list-th={true}><span></span></div>
+    </div>
+  </div>
+  <div class:bx--structured-list-tbody={true}>
+    {#each Array.from({ length: rows }, (_, i) => i) as row, i (row)}
+      <div class:bx--structured-list-row={true}>
+        <div class:bx--structured-list-td={true}></div>
+        <div class:bx--structured-list-td={true}></div>
+        <div class:bx--structured-list-td={true}></div>
+      </div>
+    {/each}
+  </div>
+</div>

package/src/StructuredList/index.js

@@ -0,0 +1,7 @@
+export { default as StructuredList } from "./StructuredList.svelte";
+export { default as StructuredListSkeleton } from "./StructuredListSkeleton.svelte";
+export { default as StructuredListBody } from "./StructuredListBody.svelte";
+export { default as StructuredListHead } from "./StructuredListHead.svelte";
+export { default as StructuredListCell } from "./StructuredListCell.svelte";
+export { default as StructuredListRow } from "./StructuredListRow.svelte";
+export { default as StructuredListInput } from "./StructuredListInput.svelte";

package/src/Tabs/Tab.svelte

@@ -0,0 +1,74 @@
+<script>
+  /**
+   * Specify the tab label.
+   * Alternatively, use the default slot (e.g., `<Tab><span>Label</span></Tab>`)
+   */
+  export let label = "";
+
+  /** Specify the href attribute */
+  export let href = "#";
+
+  /** Set to `true` to disable the tab */
+  export let disabled = false;
+
+  /** Specify the tabindex */
+  export let tabindex = "0";
+
+  /** Set an id for the top-level element */
+  export let id = "ccs-" + Math.random().toString(36);
+
+  /** Obtain a reference to the anchor HTML element */
+  export let ref = null;
+
+  import { getContext } from "svelte";
+
+  const { selectedTab, useAutoWidth, add, update, change } = getContext("Tabs");
+
+  add({ id, label, disabled });
+
+  $: selected = $selectedTab === id;
+</script>
+
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+<li
+  tabindex="-1"
+  role="presentation"
+  class:bx--tabs__nav-item={true}
+  class:bx--tabs__nav-item--disabled={disabled}
+  class:bx--tabs__nav-item--selected={selected}
+  {...$$restProps}
+  on:click|preventDefault
+  on:click|preventDefault={() => {
+    if (!disabled) {
+      update(id);
+    }
+  }}
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+  on:keydown={({ key }) => {
+    if (!disabled) {
+      if (key === "ArrowRight") {
+        change(1);
+      } else if (key === "ArrowLeft") {
+        change(-1);
+      } else if (key === " " || key === "Enter") {
+        update(id);
+      }
+    }
+  }}
+>
+  <a
+    bind:this={ref}
+    role="tab"
+    tabindex={disabled ? "-1" : tabindex}
+    aria-selected={selected}
+    aria-disabled={disabled}
+    {id}
+    {href}
+    class:bx--tabs__nav-link={true}
+    style:width={$useAutoWidth ? "auto" : undefined}
+  >
+    <slot>{label}</slot>
+  </a>
+</li>

package/src/Tabs/TabContent.svelte

@@ -0,0 +1,26 @@
+<script>
+  /** Set an id for the top-level element */
+  export let id = "ccs-" + Math.random().toString(36);
+
+  import { getContext } from "svelte";
+
+  const { selectedContent, addContent, tabs, contentById } = getContext("Tabs");
+
+  addContent({ id });
+
+  $: selected = $selectedContent === id;
+  $: index = $contentById[id].index;
+  $: tabId = $tabs[index].id;
+</script>
+
+<div
+  role="tabpanel"
+  aria-labelledby={tabId}
+  aria-hidden={!selected}
+  hidden={selected ? undefined : ""}
+  {id}
+  class:bx--tab-content={true}
+  {...$$restProps}
+>
+  <slot />
+</div>

package/src/Tabs/Tabs.svelte

@@ -0,0 +1,168 @@
+<script>
+  /**
+   * @event {number} change
+   */
+
+  /** Specify the selected tab index */
+  export let selected = 0;
+
+  /**
+   * Specify the type of tabs
+   * @type {"default" | "container"}
+   */
+  export let type = "default";
+
+  /** Set to `true` for tabs to have an auto-width */
+  export let autoWidth = false;
+
+  /**
+   * Specify the ARIA label for the chevron icon
+   * @type {string}
+   */
+  export let iconDescription = "Show menu options";
+
+  /** Specify the tab trigger href attribute */
+  export let triggerHref = "#";
+
+  import { createEventDispatcher, afterUpdate, setContext, tick } from "svelte";
+  import { writable, derived } from "svelte/store";
+  import ChevronDown from "../icons/ChevronDown.svelte";
+
+  const dispatch = createEventDispatcher();
+
+  const tabs = writable([]);
+  const tabsById = derived(tabs, (_) =>
+    _.reduce((a, c) => ({ ...a, [c.id]: c }), {}),
+  );
+  const useAutoWidth = writable(autoWidth);
+  const selectedTab = writable(undefined);
+  const content = writable([]);
+  const contentById = derived(content, (_) =>
+    _.reduce((a, c) => ({ ...a, [c.id]: c }), {}),
+  );
+  const selectedContent = writable(undefined);
+
+  let refTabList = null;
+
+  setContext("Tabs", {
+    tabs,
+    contentById,
+    selectedTab,
+    selectedContent,
+    useAutoWidth,
+    add: (data) => {
+      tabs.update((_) => [..._, { ...data, index: _.length }]);
+    },
+    addContent: (data) => {
+      content.update((_) => [..._, { ...data, index: _.length }]);
+    },
+    update: (id) => {
+      currentIndex = $tabsById[id].index;
+    },
+    change: async (direction) => {
+      let index = currentIndex + direction;
+
+      if (index < 0) {
+        index = $tabs.length - 1;
+      } else if (index >= $tabs.length) {
+        index = 0;
+      }
+
+      let disabled = $tabs[index].disabled;
+
+      while (disabled) {
+        index = index + direction;
+
+        if (index < 0) {
+          index = $tabs.length - 1;
+        } else if (index >= $tabs.length) {
+          index = 0;
+        }
+
+        disabled = $tabs[index].disabled;
+      }
+
+      currentIndex = index;
+
+      await tick();
+      const activeTab =
+        refTabList?.querySelectorAll("[role='tab']")[currentIndex];
+      activeTab?.focus();
+    },
+  });
+
+  afterUpdate(() => {
+    selected = currentIndex;
+
+    if (prevIndex > -1 && prevIndex !== currentIndex) {
+      dispatch("change", currentIndex);
+    }
+
+    prevIndex = currentIndex;
+  });
+
+  let dropdownHidden = true;
+  let currentIndex = selected;
+  let prevIndex = -1;
+
+  $: currentIndex = selected;
+  $: currentTab = $tabs[currentIndex] || undefined;
+  $: currentContent = $content[currentIndex] || undefined;
+  $: {
+    if (currentTab) {
+      selectedTab.set(currentTab.id);
+    }
+
+    if (currentContent) {
+      selectedContent.set(currentContent.id);
+    }
+  }
+  $: if ($selectedTab) {
+    dropdownHidden = true;
+  }
+  $: useAutoWidth.set(autoWidth);
+</script>
+
+<div
+  role="navigation"
+  class:bx--tabs={true}
+  class:bx--tabs--container={type === "container"}
+  {...$$restProps}
+>
+  <div
+    role="listbox"
+    tabindex="0"
+    class:bx--tabs-trigger={true}
+    aria-label={$$props["aria-label"] || "listbox"}
+    on:click={() => {
+      dropdownHidden = !dropdownHidden;
+    }}
+    on:keypress
+    on:keypress={() => {
+      dropdownHidden = !dropdownHidden;
+    }}
+  >
+    <a
+      tabindex="-1"
+      class:bx--tabs-trigger-text={true}
+      href={triggerHref}
+      on:click|preventDefault
+      on:click|preventDefault|stopPropagation={() => {
+        dropdownHidden = !dropdownHidden;
+      }}
+    >
+      {#if currentTab}{currentTab.label}{/if}
+    </a>
+    <ChevronDown aria-hidden="true" title={iconDescription} />
+  </div>
+  <!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
+  <ul
+    bind:this={refTabList}
+    role="tablist"
+    class:bx--tabs__nav={true}
+    class:bx--tabs__nav--hidden={dropdownHidden}
+  >
+    <slot />
+  </ul>
+</div>
+<slot name="content" />

package/src/Tabs/TabsSkeleton.svelte

@@ -0,0 +1,34 @@
+<script>
+  /** Specify the number of tabs to render */
+  export let count = 4;
+
+  /**
+   * Specify the type of tabs
+   * @type {"default" | "container"}
+   */
+  export let type = "default";
+</script>
+
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
+  class:bx--tabs={true}
+  class:bx--skeleton={true}
+  class:bx--tabs--scrollable={true}
+  class:bx--tabs--scrollable--container={type === "container"}
+  {...$$restProps}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+>
+  <ul class:bx--tabs--scrollable__nav={true}>
+    {#each Array.from({ length: count }, (_, i) => i) as item}
+      <li class:bx--tabs--scrollable__nav-item={true}>
+        <div class:bx--tabs__nav-link={true}>
+          <span></span>
+        </div>
+      </li>
+    {/each}
+  </ul>
+</div>

package/src/Tabs/index.js

@@ -0,0 +1,4 @@
+export { default as Tabs } from "./Tabs.svelte";
+export { default as Tab } from "./Tab.svelte";
+export { default as TabContent } from "./TabContent.svelte";
+export { default as TabsSkeleton } from "./TabsSkeleton.svelte";