@ifloppy/maxcraftmc-ui-svelte 0.1.0

package/examples/svelte-basic/+page.svelte

@@ -0,0 +1,150 @@
+<script>
+  import {
+    Button,
+    ButtonSet,
+    Checkbox,
+    ClickableTile,
+    Header,
+    HeaderUtilities,
+    HeaderGlobalAction,
+    Content,
+    NumberInput,
+    PaginationNav,
+    PasswordInput,
+    RadioButton,
+    RadioButtonGroup,
+    Select,
+    SelectItem,
+    TextInput,
+    Toggle,
+    ToastNotification,
+  } from "carbon-components-svelte";
+  import Home from "carbon-icons-svelte/lib/Home.svelte";
+
+  let slots = 6;
+  let enabled = true;
+  let checked = true;
+  let mode = "survival";
+  let page = 4;
+  let region = "spawn";
+</script>
+
+<Header company="MaxCraftMC" platformName="Example" href="/">
+  <HeaderUtilities>
+    <HeaderGlobalAction icon={Home} iconDescription="首页" href="/" />
+  </HeaderUtilities>
+</Header>
+
+<Content>
+  <section class="demo">
+    <div class="intro">
+      <p class="eyebrow">MaxCraft UI</p>
+      <h1>Carbon-compatible Svelte components</h1>
+      <p>Use Carbon component names with MaxCraft styling.</p>
+      <ButtonSet>
+        <Button href="/login">进入个人中心</Button>
+        <Button kind="secondary" href="/posts/address/">服务器地址</Button>
+        <Button kind="tertiary" href="/posts/guide/">新玩家指南</Button>
+      </ButtonSet>
+    </div>
+
+    <div class="grid">
+      <ClickableTile href="/posts/guide/">
+        <h3>新玩家指南</h3>
+        <p>查看入服前需要了解的资料。</p>
+      </ClickableTile>
+
+      <ClickableTile href="/posts/address/">
+        <h3>服务器地址</h3>
+        <p>选择线路并复制连接信息。</p>
+      </ClickableTile>
+    </div>
+
+    <div class="panel">
+      <TextInput labelText="Minecraft ID" placeholder="Steve" />
+      <PasswordInput labelText="指令令牌" placeholder="token" />
+      <Select labelText="目标区域" bind:selected={region}>
+        <SelectItem value="spawn" text="主城" />
+        <SelectItem value="nether" text="下界交通" />
+        <SelectItem value="end" text="末地大厅" />
+      </Select>
+      <NumberInput
+        label="玩家席位"
+        min={1}
+        max={12}
+        bind:value={slots}
+        iconDescription="调整席位"
+      />
+    </div>
+
+    <div class="panel controls">
+      <Toggle labelText="启用白名单" bind:toggled={enabled} />
+      <Toggle size="sm" hideLabel labelText="快速开关" bind:toggled={enabled} />
+      <Checkbox labelText="记住这个设备" bind:checked />
+      <RadioButtonGroup legendText="游戏模式" bind:selected={mode}>
+        <RadioButton value="survival" labelText="生存" />
+        <RadioButton value="creative" labelText="创造" />
+        <RadioButton value="spectator" labelText="旁观" />
+      </RadioButtonGroup>
+    </div>
+
+    <div class="panel">
+      <PaginationNav total={18} shown={6} bind:page />
+    </div>
+
+    <ToastNotification
+      title="已应用主题"
+      subtitle="组件仍使用 Carbon Svelte API。"
+      kind="success"
+      hideCloseButton
+    />
+  </section>
+</Content>
+
+<style>
+  .demo {
+    display: grid;
+    max-width: 64rem;
+    gap: 1.25rem;
+  }
+
+  .eyebrow {
+    margin-bottom: 0.5rem;
+    color: var(--cds-text-02);
+    font-size: 0.875rem;
+    font-weight: 800;
+  }
+
+  .intro {
+    display: grid;
+    gap: 0.75rem;
+  }
+
+  .intro h1,
+  .intro p {
+    margin: 0;
+  }
+
+  .grid,
+  .panel {
+    display: grid;
+    min-width: 0;
+    gap: 1rem;
+  }
+
+  .grid {
+    grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
+  }
+
+  .panel {
+    padding: 1rem;
+    border: 4px solid var(--mc-border, #3b2f24);
+    background: var(--cds-layer, #ffffff);
+    box-shadow: 0 6px 0 rgb(0 0 0 / 0.16);
+  }
+
+  .controls {
+    grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
+    align-items: start;
+  }
+</style>

package/package.json

@@ -0,0 +1,80 @@
+{
+  "name": "@ifloppy/maxcraftmc-ui-svelte",
+  "version": "0.1.0",
+  "license": "Apache-2.0",
+  "description": "MaxCraft themed compatibility build of carbon-components-svelte 0.89.4.",
+  "type": "module",
+  "svelte": "./src/index.js",
+  "main": "./src/index.js",
+  "types": "./types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./types/index.d.ts",
+      "svelte": "./src/index.js",
+      "import": "./src/index.js"
+    },
+    "./css/*": "./css/*",
+    "./src/*.svelte": {
+      "types": "./types/*.svelte.d.ts",
+      "import": "./src/*.svelte"
+    },
+    "./src/*.js": {
+      "types": "./types/*.d.ts",
+      "import": "./src/*.js"
+    },
+    "./src/*": {
+      "types": "./types/*.d.ts",
+      "import": "./src/*.js"
+    }
+  },
+  "sideEffects": [
+    "css/*.css"
+  ],
+  "files": [
+    "src",
+    "types",
+    "css",
+    "tokens",
+    "docs",
+    "examples/hugo-head.html",
+    "examples/hugo-module-mounts.toml",
+    "examples/svelte-basic",
+    "examples/component-gallery/index.html",
+    "examples/component-gallery/src",
+    "examples/component-gallery/vite.config.js",
+    "NOTICE",
+    "README.md",
+    "CHANGELOG.md"
+  ],
+  "scripts": {
+    "check": "node scripts/check-api-compat.mjs && node scripts/check-export-targets.mjs && node scripts/check-vite-smoke.mjs && node scripts/check-no-placeholders.mjs && node scripts/check-css-entrypoints.mjs && node scripts/check-docs.mjs && node scripts/check-gallery-coverage.mjs",
+    "build": "npm run check && npm pack --dry-run",
+    "gallery:build": "vite build examples/component-gallery",
+    "gallery:audit": "node scripts/audit-component-gallery.mjs",
+    "test": "npm run check"
+  },
+  "dependencies": {
+    "flatpickr": "4.6.9"
+  },
+  "peerDependencies": {
+    "svelte": ">=3 <6"
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^5.0.0",
+    "carbon-components-svelte": "0.89.4",
+    "vite": "^6.2.5"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://github1:FloppyBetaStudio/maxcraft-ui.git"
+  },
+  "keywords": [
+    "carbon",
+    "svelte",
+    "maxcraft",
+    "component-library"
+  ]
+}

package/src/Accordion/Accordion.svelte

@@ -0,0 +1,60 @@
+<script>
+  /** @extends {"./AccordionSkeleton.svelte"} AccordionSkeletonProps */
+
+  /**
+   * Specify alignment of accordion item chevron icon
+   * @type {"start" | "end"}
+   */
+  export let align = "end";
+
+  /**
+   * Specify the size of the accordion
+   * @type {"sm" | "xl"}
+   */
+  export let size = undefined;
+
+  /** Set to `true` to disable the accordion */
+  export let disabled = false;
+
+  /** Set to `true` to display the skeleton state */
+  export let skeleton = false;
+
+  import { setContext } from "svelte";
+  import { writable } from "svelte/store";
+  import AccordionSkeleton from "./AccordionSkeleton.svelte";
+
+  const disableItems = writable(disabled);
+
+  $: disableItems.set(disabled);
+
+  setContext("Accordion", { disableItems });
+</script>
+
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+{#if skeleton}
+  <AccordionSkeleton
+    {...$$restProps}
+    {align}
+    {size}
+    on:click
+    on:mouseover
+    on:mouseenter
+    on:mouseleave
+  />
+{:else}
+  <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+  <ul
+    class:bx--accordion={true}
+    class:bx--accordion--start={align === "start"}
+    class:bx--accordion--end={align === "end"}
+    class:bx--accordion--sm={size === "sm"}
+    class:bx--accordion--xl={size === "xl"}
+    {...$$restProps}
+    on:click
+    on:mouseover
+    on:mouseenter
+    on:mouseleave
+  >
+    <slot />
+  </ul>
+{/if}

package/src/Accordion/AccordionItem.svelte

@@ -0,0 +1,79 @@
+<script>
+  /**
+   * Specify the title of the accordion item heading.
+   * Alternatively, use the "title" slot (e.g., `<div slot="title">...</div>`)
+   */
+  export let title = "title";
+
+  /** Set to `true` to open the first accordion item */
+  export let open = false;
+
+  /** Set to `true` to disable the accordion item */
+  export let disabled = false;
+
+  /** Specify the ARIA label for the accordion item chevron icon */
+  export let iconDescription = "Expand/Collapse";
+
+  import { onMount, getContext } from "svelte";
+  import ChevronRight from "../icons/ChevronRight.svelte";
+
+  let initialDisabled = disabled;
+
+  const ctx = getContext("Accordion");
+  const unsubscribe = ctx.disableItems.subscribe((value) => {
+    if (!value && initialDisabled) return;
+    disabled = value;
+  });
+
+  let animation = undefined;
+
+  onMount(() => {
+    return () => {
+      unsubscribe();
+    };
+  });
+</script>
+
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+<li
+  class:bx--accordion__item={true}
+  class:bx--accordion__item--active={open}
+  class:bx--accordion__item--disabled={disabled}
+  class:bx--accordion__item--expanding={animation === "expanding"}
+  class:bx--accordion__item--collapsing={animation === "collapsing"}
+  {...$$restProps}
+  on:animationend
+  on:animationend={() => {
+    animation = undefined;
+  }}
+>
+  <button
+    type="button"
+    class:bx--accordion__heading={true}
+    title={iconDescription}
+    aria-expanded={open}
+    {disabled}
+    on:click
+    on:click={() => {
+      open = !open;
+      animation = open ? "expanding" : "collapsing";
+    }}
+    on:mouseover
+    on:mouseenter
+    on:mouseleave
+    on:keydown
+    on:keydown={({ key }) => {
+      if (open && key === "Escape") {
+        open = false;
+      }
+    }}
+  >
+    <ChevronRight class="bx--accordion__arrow" aria-label={iconDescription} />
+    <div class:bx--accordion__title={true}>
+      <slot name="title">{title}</slot>
+    </div>
+  </button>
+  <div class:bx--accordion__content={true}>
+    <slot />
+  </div>
+</li>

package/src/Accordion/AccordionSkeleton.svelte

@@ -0,0 +1,63 @@
+<script>
+  /** Specify the number of accordion items to render */
+  export let count = 4;
+
+  /**
+   * Specify alignment of accordion item chevron icon
+   * @type {"start" | "end"}
+   */
+  export let align = "end";
+
+  /**
+   * Specify the size of the accordion
+   * @type {"sm" | "xl"}
+   */
+  export let size = undefined;
+
+  /** Set to `false` to close the first accordion item */
+  export let open = true;
+
+  import ChevronRight from "../icons/ChevronRight.svelte";
+  import SkeletonText from "../SkeletonText/SkeletonText.svelte";
+</script>
+
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+<ul
+  class:bx--skeleton={true}
+  class:bx--accordion={true}
+  class:bx--accordion--start={align === "start"}
+  class:bx--accordion--end={align === "end"}
+  class:bx--accordion--sm={size === "sm"}
+  class:bx--accordion--xl={size === "xl"}
+  {...$$restProps}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+>
+  {#if open}
+    <li
+      class:bx--accordion__item={true}
+      class:bx--accordion__item--active={true}
+    >
+      <span class:bx--accordion__heading={true}>
+        <ChevronRight class="bx--accordion__arrow" />
+        <SkeletonText class="bx--accordion__title" />
+      </span>
+      <div class:bx--accordion__content={true}>
+        <SkeletonText width="90%" />
+        <SkeletonText width="80%" />
+        <SkeletonText width="95%" />
+      </div>
+    </li>
+  {/if}
+  {#each Array.from({ length: open ? count - 1 : count }, (_, i) => i) as item (item)}
+    <li class:bx--accordion__item={true}>
+      <span class:bx--accordion__heading={true}>
+        <ChevronRight class="bx--accordion__arrow" />
+        <SkeletonText class="bx--accordion__title" />
+      </span>
+    </li>
+  {/each}
+</ul>

package/src/Accordion/index.js

@@ -0,0 +1,3 @@
+export { default as Accordion } from "./Accordion.svelte";
+export { default as AccordionItem } from "./AccordionItem.svelte";
+export { default as AccordionSkeleton } from "./AccordionSkeleton.svelte";

package/src/AspectRatio/AspectRatio.svelte

@@ -0,0 +1,25 @@
+<script>
+  /**
+   * Specify the aspect ratio
+   * @type {"2x1" | "2x3" | "16x9" | "4x3" | "1x1" | "3x4" | "3x2" | "9x16" | "1x2"}
+   */
+  export let ratio = "2x1";
+</script>
+
+<div
+  class:bx--aspect-ratio={true}
+  class:bx--aspect-ratio--2x1={ratio === "2x1"}
+  class:bx--aspect-ratio--2x3={ratio === "2x3"}
+  class:bx--aspect-ratio--16x9={ratio === "16x9"}
+  class:bx--aspect-ratio--4x3={ratio === "4x3"}
+  class:bx--aspect-ratio--1x1={ratio === "1x1"}
+  class:bx--aspect-ratio--3x4={ratio === "3x4"}
+  class:bx--aspect-ratio--3x2={ratio === "3x2"}
+  class:bx--aspect-ratio--9x16={ratio === "9x16"}
+  class:bx--aspect-ratio--1x2={ratio === "1x2"}
+  {...$$restProps}
+>
+  <div class:bx--aspect-ratio--object={true}>
+    <slot />
+  </div>
+</div>

package/src/AspectRatio/index.js

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

package/src/Breadcrumb/Breadcrumb.svelte

@@ -0,0 +1,40 @@
+<script>
+  /** @extends {"./BreadcrumbSkeleton.svelte"} BreadcrumbSkeletonProps */
+
+  /** Set to `true` to hide the breadcrumb trailing slash */
+  export let noTrailingSlash = false;
+
+  /** Set to `true` to display skeleton state */
+  export let skeleton = false;
+
+  import BreadcrumbSkeleton from "./BreadcrumbSkeleton.svelte";
+</script>
+
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+{#if skeleton}
+  <BreadcrumbSkeleton
+    {noTrailingSlash}
+    {...$$restProps}
+    on:click
+    on:mouseover
+    on:mouseenter
+    on:mouseleave
+  />
+{:else}
+  <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+  <nav
+    aria-label="Breadcrumb"
+    {...$$restProps}
+    on:click
+    on:mouseover
+    on:mouseenter
+    on:mouseleave
+  >
+    <ol
+      class:bx--breadcrumb={true}
+      class:bx--breadcrumb--no-trailing-slash={noTrailingSlash}
+    >
+      <slot />
+    </ol>
+  </nav>
+{/if}

package/src/Breadcrumb/BreadcrumbItem.svelte

@@ -0,0 +1,46 @@
+<script>
+  /**
+   * @slot {{props?: { ["aria-current"]?: string; class: "bx--link"; }}}
+   */
+
+  /**
+   * Set the `href` to use an anchor link
+   * @type {string}
+   */
+  export let href = undefined;
+
+  /** Set to `true` if the breadcrumb item represents the current page */
+  export let isCurrentPage = false;
+
+  import Link from "../Link/Link.svelte";
+
+  import { setContext } from "svelte";
+
+  setContext("BreadcrumbItem", {});
+</script>
+
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+<li
+  class:bx--breadcrumb-item={true}
+  class:bx--breadcrumb-item--current={isCurrentPage &&
+    $$restProps["aria-current"] !== "page"}
+  {...$$restProps}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+>
+  {#if href}
+    <Link {href} aria-current={$$restProps["aria-current"]}>
+      <slot />
+    </Link>
+  {:else}
+    <slot
+      props={{
+        "aria-current": $$restProps["aria-current"],
+        class: "bx--link",
+      }}
+    />
+  {/if}
+</li>

package/src/Breadcrumb/BreadcrumbSkeleton.svelte

@@ -0,0 +1,26 @@
+<script>
+  /** Set to `true` to hide the breadcrumb trailing slash */
+  export let noTrailingSlash = false;
+
+  /** Specify the number of breadcrumb items to render */
+  export let count = 3;
+</script>
+
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
+  class:bx--skeleton={true}
+  class:bx--breadcrumb={true}
+  class:bx--breadcrumb--no-trailing-slash={noTrailingSlash}
+  {...$$restProps}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+>
+  {#each Array.from({ length: count }, (_, i) => i) as item (item)}
+    <div class:bx--breadcrumb-item={true}>
+      <span class:bx--link={true}>&nbsp;</span>
+    </div>
+  {/each}
+</div>

package/src/Breadcrumb/index.js

@@ -0,0 +1,3 @@
+export { default as Breadcrumb } from "./Breadcrumb.svelte";
+export { default as BreadcrumbItem } from "./BreadcrumbItem.svelte";
+export { default as BreadcrumbSkeleton } from "./BreadcrumbSkeleton.svelte";

package/src/Breakpoint/Breakpoint.svelte

@@ -0,0 +1,47 @@
+<script>
+  /**
+   * @typedef {"sm" | "md" | "lg" | "xlg" | "max"} BreakpointSize
+   * @typedef {320 | 672 | 1056 | 1312 | 1584} BreakpointValue
+   * @event {{ size: BreakpointSize; breakpointValue: BreakpointValue; }} change
+   * @slot {{ size: BreakpointSize; sizes: Record<BreakpointSize, boolean>; }}
+   */
+
+  /**
+   * Determine the current Carbon grid breakpoint size
+   * @type {BreakpointSize}
+   */
+  export let size = undefined;
+
+  /**
+   * Carbon grid sizes as an object
+   * @type {Record<BreakpointSize, boolean>}
+   */
+  export let sizes = {
+    sm: false,
+    md: false,
+    lg: false,
+    xlg: false,
+    max: false,
+  };
+
+  import { createEventDispatcher } from "svelte";
+  import { breakpointObserver } from "./breakpointObserver";
+  import { breakpoints } from "./breakpoints";
+
+  const dispatch = createEventDispatcher();
+  const observer = breakpointObserver();
+
+  $: size = $observer;
+  $: sizes = {
+    sm: size == "sm",
+    md: size == "md",
+    lg: size == "lg",
+    xlg: size == "xlg",
+    max: size == "max",
+  };
+  $: if (size != undefined)
+    // svelte-ignore reactive_declaration_non_reactive_property
+    dispatch("change", { size, breakpointValue: breakpoints[size] });
+</script>
+
+<slot {size} {sizes} />

package/src/Breakpoint/breakpointObserver.d.ts

@@ -0,0 +1,28 @@
+import type { Readable, Subscriber, Unsubscriber } from "svelte/store";
+import type { BreakpointSize, BreakpointValue } from "./breakpoints";
+
+/**
+ * Creates a readable store that returns the current breakpoint size.
+ * It also provides functions for creating derived stores used to do comparisons.
+ */
+export function breakpointObserver(): {
+  subscribe: (
+    this: void,
+    run: Subscriber<any>,
+    invalidate?: (value?: any) => void,
+  ) => Unsubscriber;
+  /**
+   * Returns a store readable store that returns whether the current
+   * breakpoint is smaller than {@link size}.
+   * @param {BreakpointSize} size Size to compare against.
+   */
+  smallerThan: (size: BreakpointSize) => Readable<boolean>;
+  /**
+   * Returns a store readable store that returns whether the current
+   * breakpoint is larger than {@link size}.
+   * @param {BreakpointSize} size Size to compare against.
+   */
+  largerThan: (size: BreakpointSize) => Readable<boolean>;
+};
+
+export default breakpointObserver;