Changes
4 changed files (+67/-12)
-
-
@@ -66,6 +66,19 @@ }),); } for (const demo of document.querySelectorAll("[data-id=no_workspaces]")) { demo.setListResponse( create(ListResponseSchema, { result: { case: "ok", value: { workspaces: [], }, }, }), ); } for (const demo of document.querySelectorAll("[data-id=system_error]")) { demo.setListResponse( create(ListResponseSchema, {
-
@@ -105,6 +118,17 @@ </p><ThemeMatrixPreview> <yamori-workspace-list data-id="demo"></yamori-workspace-list> </ThemeMatrixPreview> <h2>No Workspaces</h2> <p> ワークスペースが一つも存在しない場合はフォールバックの UI を表示します。 <code>empty-fallback</code> スロットの内容をそのまま表示します。 </p> <Preview title="No workspaces"> <yamori-workspace-list data-id="no_workspaces"> <p slot="empty-fallback">FALLBACK</p> </yamori-workspace-list> </Preview> <h2>System Error</h2> <p>
-
-
-
@@ -1,12 +1,16 @@// SPDX-FileCopyrightText: 2024 Shota FUJI <pockawoooh@gmail.com> // SPDX-License-Identifier: AGPL-3.0-only import { BadgeInfo } from "lucide"; import { BadgeInfo, BadgeX, FilePlus2 } from "lucide"; import { createLucideElement } from "./builder.ts"; export const LucideBadgeInfo = createLucideElement("lucide-badge-info", BadgeInfo); export const LucideBadgeX = createLucideElement("lucide-badge-x", BadgeX); export const LucideFilePlus2 = createLucideElement("lucide-file-plus2", FilePlus2); export function registerLucideIcons(): void { LucideBadgeInfo.register(); LucideBadgeX.register(); LucideFilePlus2.register(); }
-
-
-
@@ -20,3 +20,7 @@ .list > :not(:last-child) {border-bottom: 1px solid oklch(var(--color-border) / var(--alpha-border-subtle)); } .fallback { display: contents; }
-
-
-
@@ -12,6 +12,8 @@ import { wrapElement, YamoriElement } from "../../element.ts";import { YamoriButton } from "../../components/button/button.ts"; import { YamoriCallout } from "../../components/callout/callout.ts"; import { YamoriEmpty } from "../../components/empty/empty.ts"; import { LucideBadgeX } from "../../lucide/icons.ts"; import { YamoriWorkspaceListEntry } from "../workspace-list-entry/workspace-list-entry.ts"; import css from "./workspace-list.css?inline";
-
@@ -30,7 +32,13 @@ type ObservedAttributes = readonly ["pending", "list-response"];export const YamoriWorkspaceList = wrapElement({ tagName: "yamori-workspace-list", dependencies: [YamoriButton, YamoriCallout, YamoriWorkspaceListEntry], dependencies: [ YamoriButton, YamoriCallout, YamoriEmpty, LucideBadgeX, YamoriWorkspaceListEntry, ], constructor: class extends YamoriElement { static get observedAttributes(): ObservedAttributes { return ["pending", "list-response"];
-
@@ -128,37 +136,52 @@ }switch (this.#data.result.case) { case "systemError": { const callout = document.createElement(YamoriCallout.tagName) as InstanceType< typeof YamoriCallout.constructor const empty = document.createElement(YamoriEmpty.tagName) as InstanceType< typeof YamoriEmpty.constructor >; const icon = document.createElement(LucideBadgeX.tagName) as InstanceType< typeof LucideBadgeX.constructor >; icon.slot = "icon"; empty.appendChild(icon); const title = document.createElement("span"); title.slot = "title"; title.textContent = `取得エラー (${this.#data.result.value.code})`; callout.appendChild(title); title.textContent = "取得エラー"; empty.appendChild(title); const message = document.createTextNode( `ワークスペース一覧の取得に失敗しました。`, empty.append( "ワークスペース一覧の取得に失敗しました。", document.createElement("br"), `エラーコード: ${this.#data.result.value.code}`, ); callout.appendChild(message); const retry = document.createElement(YamoriButton.tagName) as InstanceType< typeof YamoriButton.constructor >; retry.slot = "action"; retry.textContent = "再試行"; retry.textContent = "再取得"; retry.addEventListener("click", (event) => { event.preventDefault(); event.stopPropagation(); this.dispatchEvent(new RetryEvent()); }); callout.appendChild(retry); empty.appendChild(retry); this.#shadow.insertBefore(callout, this.#endMarker); this.#shadow.insertBefore(empty, this.#endMarker); return; } case "ok": { if (this.#data.result.value.workspaces.length === 0) { const slot = document.createElement("slot"); slot.name = "empty-fallback"; slot.classList.add("fallback"); this.#shadow.insertBefore(slot, this.#endMarker); return; } const list = document.createElement("ul"); list.classList.add("list"); this.#shadow.insertBefore(list, this.#endMarker);
-