gui: Empty UI Result とか呼ばれたりすることもあるけど、用途を考えれば Empty の方が適切。

Changes

11 changed files (+207/-2)

• bun.lockb
• packages/gui/package.json
  • @@ -26,7 +26,8 @@ "@bufbuild/protobuf": "^2.2.2",
    "@fontsource-variable/inter": "^5.1.0", "@fontsource/ibm-plex-sans-jp": "^5.1.0", "@fontsource/monaspace-neon": "^5.1.0", - "@yamori/proto": "workspace:*" + "@yamori/proto": "workspace:*", + "lucide": "^0.468.0" }, "devDependencies": { "astro": "^5.0.3",
• packages/gui/src/components/empty/empty.css (new)
  • @@ -0,0 +1,51 @@
    + /* + * SPDX-FileCopyrightText: 2024 Shota FUJI <pockawoooh@gmail.com> + * SPDX-License-Identifier: AGPL-3.0-only + */ + + :not(:is(style, script)) { + all: unset; + box-sizing: border-box; + } + + :host { + display: flex; + flex-direction: column; + gap: var(--space-px-6); + align-items: center; + } + + .icon { + display: flex; + font-size: var(--space-px-12); + margin-block-end: var(--space-px-8); + } + + :host(:not(:has([slot="icon"]))) .icon { + display: none; + } + + .title { + font-size: var(--font-lg); + font-weight: var(--font-bold); + color: oklch(var(--color-fg) / var(--alpha-fg-strong)); + } + + :host(:not(:has([slot="title"]))) .title { + display: none; + } + + .actions { + display: flex; + flex-direction: column; + align-items: stretch; + gap: var(--space-px-6); + min-width: 0; + width: 100%; + max-width: 20rem; + margin-block-start: var(--space-px-10); + } + + :host(:not(:has([slot="action"]))) .actions { + display: none; + }
• packages/gui/src/components/empty/empty.ts (new)
  • @@ -0,0 +1,45 @@
    + // SPDX-FileCopyrightText: 2024 Shota FUJI <pockawoooh@gmail.com> + // SPDX-License-Identifier: AGPL-3.0-only + + import { wrapElement, YamoriElement } from "../../element.ts"; + + import css from "./empty.css?inline"; + + export const YamoriEmpty = wrapElement({ + tagName: "yamori-empty", + constructor: class extends YamoriElement { + constructor() { + super(); + + const shadow = this.attachShadow({ + mode: "open", + }); + + const style = document.createElement("style"); + style.textContent = css; + shadow.appendChild(style); + + const icon = document.createElement("slot"); + icon.name = "icon"; + icon.classList.add("icon"); + shadow.appendChild(icon); + + const title = document.createElement("slot"); + title.name = "title"; + title.classList.add("title"); + shadow.appendChild(title); + + const body = document.createElement("slot"); + shadow.appendChild(body); + + const actions = document.createElement("slot"); + actions.name = "action"; + actions.classList.add("actions"); + shadow.appendChild(actions); + } + + override connectedCallback() { + super.connectedCallback(); + } + }, + });
• packages/gui/src/docs/components/ThemeMatrixPreview.astro
  • @@ -34,7 +34,7 @@
    <div class="matrix"> { matrix.map((overrides) => ( - <Preview {...overrides}> + <Preview title={Astro.props.title} {...overrides}> <slot /> </Preview> ))
• packages/gui/src/docs/layouts/DocsLayout.astro
  • @@ -102,6 +102,9 @@ </NavBarItem>
    <NavBarItem href="/components/callout/"> Callout </NavBarItem> + <NavBarItem href="/components/empty/"> + Empty + </NavBarItem> </NavBarGroup> <NavBarGroup title="Widgets"> <NavBarItem href="/widgets/workspace-list/">
• packages/gui/src/docs/pages/components/empty.astro (new)
  • @@ -0,0 +1,40 @@
    + --- + // SPDX-FileCopyrightText: 2024 Shota FUJI <pockawoooh@gmail.com> + // SPDX-License-Identifier: AGPL-3.0-only + + import DocsLayout from "../../layouts/DocsLayout.astro"; + import Document from "../../components/Document.astro"; + import Preview from "../../components/Preview.astro"; + import ThemeMatrixPreview from "../../components/ThemeMatrixPreview.astro"; + --- + + <script> + import { YamoriButton } from "../../../components/button/button.ts"; + import { YamoriEmpty } from "../../../components/empty/empty.ts"; + import { LucideBadgeInfo } from "../../../lucide/icons.ts"; + + YamoriButton.register(); + YamoriEmpty.register(); + LucideBadgeInfo.register(); + </script> + + <DocsLayout title="Empty"> + <Document> + <p> + データがまだ存在しない場合や取得に失敗した場合など、ページやセクションの主たるコンテンツが空の場合に表示する + UI です。 + </p> + <ThemeMatrixPreview title="Demo"> + <yamori-empty> + <lucide-badge-info slot="icon" /> + + <span slot="title">データがありません</span> + + データを追加しましょう。 + + <yamori-button slot="action">追加</yamori-button> + <yamori-button slot="action">閉じる</yamori-button> + </yamori-empty> + </ThemeMatrixPreview> + </Document> + </DocsLayout>
• packages/gui/src/lib.ts
  • @@ -3,10 +3,15 @@ // SPDX-License-Identifier: AGPL-3.0-only
    import { YamoriButton } from "./components/button/button.ts"; import { YamoriCallout } from "./components/callout/callout.ts"; + import { YamoriEmpty } from "./components/empty/empty.ts"; import { YamoriWorkspaceList } from "./widgets/workspace-list/workspace-list.ts"; import { YamoriWorkspaceListEntry } from "./widgets/workspace-list-entry/workspace-list-entry.ts"; + import { registerLucideIcons } from "./lucide/icons.ts"; + + export * from "./lucide/icons.ts"; + export { YamoriButton, YamoriCallout }; export { YamoriWorkspaceList, YamoriWorkspaceListEntry };
  • @@ -14,6 +19,7 @@
    export function registerComponents(): void { YamoriButton.register(); YamoriCallout.register(); + YamoriEmpty.register(); } export function registerWidgets(): void {
  • @@ -24,4 +30,5 @@
    export function register(): void { registerComponents(); registerWidgets(); + registerLucideIcons(); }
• packages/gui/src/lucide/builder.css (new)
  • @@ -0,0 +1,13 @@
    + /* + * SPDX-FileCopyrightText: 2024 Shota FUJI <pockawoooh@gmail.com> + * SPDX-License-Identifier: AGPL-3.0-only + */ + + :host { + display: inline-flex; + } + + .icon { + width: auto; + height: var(--lucide-icon-size, 1em); + }
• packages/gui/src/lucide/builder.ts (new)
  • @@ -0,0 +1,33 @@
    + // SPDX-FileCopyrightText: 2024 Shota FUJI <pockawoooh@gmail.com> + // SPDX-License-Identifier: AGPL-3.0-only + + import { createElement, type IconNode } from "lucide"; + + import { wrapElement, YamoriElement } from "../element.ts"; + + import css from "./builder.css?inline"; + + export function createLucideElement(tagName: string, icon: IconNode) { + return wrapElement({ + tagName, + constructor: class extends YamoriElement { + constructor() { + super(); + + const shadow = this.attachShadow({ mode: "open" }); + + const style = document.createElement("style"); + style.textContent = css; + shadow.appendChild(style); + + const body = createElement(icon); + body.classList.add("icon"); + shadow.appendChild(body); + } + + override connectedCallback() { + super.connectedCallback(); + } + }, + }); + }
• packages/gui/src/lucide/icons.ts (new)
  • @@ -0,0 +1,12 @@
    + // SPDX-FileCopyrightText: 2024 Shota FUJI <pockawoooh@gmail.com> + // SPDX-License-Identifier: AGPL-3.0-only + + import { BadgeInfo } from "lucide"; + + import { createLucideElement } from "./builder.ts"; + + export const LucideBadgeInfo = createLucideElement("lucide-badge-info", BadgeInfo); + + export function registerLucideIcons(): void { + LucideBadgeInfo.register(); + }