gui: コールアウトコンポーネント エラー表示なんかに必要なため。

Changes

5 changed files (+133/-0)

• packages/gui/src/components/callout/callout.css (new)
  • @@ -0,0 +1,50 @@
    + /* + * 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; + border: 1px solid oklch(var(--color-border) / var(--alpha-border-medium)); + + background-color: oklch(var(--color-bg)); + border-radius: var(--space-px-2); + box-shadow: 2px 2px 4px 0 oklch(0% 0% 0deg / 5%); + overflow: hidden; + } + + .title { + display: block; + font-size: var(--font-sm); + font-weight: var(--font-bold); + padding: var(--space-px-2) var(--space-px-5); + + color: oklch(var(--color-fg) / var(--alpha-fg-subtle)); + } + + .body { + display: flex; + flex-direction: column; + gap: var(--space-px-8); + padding: var(--space-px-4); + } + + .message { + display: block; + } + + .actions { + display: flex; + justify-content: flex-end; + gap: var(--space-px-6); + } + + :host(:not(:has([slot="action"]))) .actions { + display: none; + }
• packages/gui/src/components/callout/callout.ts (new)
  • @@ -0,0 +1,41 @@
    + // SPDX-FileCopyrightText: 2024 Shota FUJI <pockawoooh@gmail.com> + // SPDX-License-Identifier: AGPL-3.0-only + + import { wrapElement, YamoriElement } from "../../element.ts"; + + import css from "./callout.css?inline"; + + export const YamoriCallout = wrapElement( + "yamori-callout", + class extends YamoriElement { + constructor() { + super(); + + const shadow = this.attachShadow({ + mode: "open", + }); + + const style = document.createElement("style"); + style.textContent = css; + shadow.appendChild(style); + + const titleSlot = document.createElement("slot"); + titleSlot.name = "title"; + titleSlot.classList.add("title"); + shadow.appendChild(titleSlot); + + const body = document.createElement("div"); + body.classList.add("body"); + shadow.appendChild(body); + + const messageSlot = document.createElement("slot"); + messageSlot.classList.add("message"); + body.appendChild(messageSlot); + + const actions = document.createElement("slot"); + actions.name = "action"; + actions.classList.add("actions"); + body.appendChild(actions); + } + }, + );
• packages/gui/src/docs/layouts/DocsLayout.astro
  • @@ -100,6 +100,9 @@ <NavBarGroup title="Components">
    <NavBarItem href="/components/button/"> Button </NavBarItem> + <NavBarItem href="/components/callout/"> + Callout + </NavBarItem> </NavBarGroup> <NavBarGroup title="Widgets"> <NavBarItem href="/widgets/workspace-list/">
• packages/gui/src/docs/pages/components/callout.astro (new)
  • @@ -0,0 +1,37 @@
    + --- + // 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"; + --- + + <DocsLayout title="Callout"> + <Document> + <p> + エラーや警告といったページ内要素に関連する重要な情報を表示する UI です。 + </p> + <ThemeMatrixPreview> + <yamori-callout> + <span slot="title">タイトル</span> + + メッセージ。 + + <yamori-button slot="action" inline>操作1</yamori-button> + <yamori-button slot="action" inline>操作2</yamori-button> + </yamori-callout> + </ThemeMatrixPreview> + <p> + <code>action</code> スロットは未指定とすることができます。 + </p> + <Preview title="No named slots"> + <yamori-callout> + <span slot="title">タイトル</span> + + メッセージ。 + </yamori-callout> + </Preview> + </Document> + </DocsLayout>
• packages/gui/src/lib.ts
  • @@ -2,6 +2,7 @@ // SPDX-FileCopyrightText: 2024 Shota FUJI <pockawoooh@gmail.com>
    // SPDX-License-Identifier: AGPL-3.0-only import { YamoriButton } from "./components/button/button.ts"; + import { YamoriCallout } from "./components/callout/callout.ts"; import { YamoriWorkspaceList } from "./widgets/workspace-list/workspace-list.ts"; import { YamoriWorkspaceListEntry } from "./widgets/workspace-list-entry/workspace-list-entry.ts";
  • @@ -12,6 +13,7 @@ export { YamoriWorkspaceList, YamoriWorkspaceListEntry };
    export function registerComponents(): void { YamoriButton.register(); + YamoriCallout.register(); } export function registerWidgets(): void {