@c2n/status-panel 0.0.9

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Nguyen Thai Vinh
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,11 @@
+# `c2-status-panel`
+
+A composable Lit component for empty states, operation outcomes, recoverable errors and unavailable content.
+
+```html
+<c2-status-panel status="success" heading="Workspace ready" description="Everything is configured.">
+  <c2-button slot="actions">Continue</c2-button>
+</c2-status-panel>
+```
+
+// TODO

package/dist/status-panel.js

@@ -0,0 +1,102 @@
+import { LitElement, html, isServer, unsafeCSS } from "lit";
+import { property, state } from "lit/decorators.js";
+import { customElement } from "@c2n/core/element-helper.js";
+//#region src/status-panel.scss?inline
+var status_panel_default = "/* ex : var((width: 24px), width, c2-checkbox)  returns var(--c2-checkbox-width, 24px) */\n:host {\n  display: block;\n  width: var(--c2-status-panel__container--width,100%);\n  max-width: var(--c2-status-panel__container--max-width,720px);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n[hidden] {\n  display: none;\n}\n\n.container {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  min-height: var(--c2-status-panel__container--min-height,240px);\n  padding: var(--c2-status-panel__container--padding,40px 24px);\n  gap: var(--c2-status-panel__container--gap,24px);\n  border: var(--c2-status-panel__container--border,1px solid transparent);\n  border-radius: var(--c2-status-panel__container--border-radius,14px);\n  background-color: var(--c2-status-panel__container--background-color,transparent);\n  text-align: center;\n}\n\n.message,\n.header {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n\n.message {\n  gap: var(--c2-status-panel__container--gap,24px);\n}\n\n.header {\n  gap: var(--c2-status-panel__header--gap,6px);\n}\n\n.media {\n  display: grid;\n  flex: 0 0 auto;\n  place-items: center;\n  box-sizing: border-box;\n  width: var(--c2-status-panel__media--size,64px);\n  height: var(--c2-status-panel__media--size,64px);\n  overflow: hidden;\n  border-radius: var(--c2-status-panel__media--border-radius,999px);\n  background-color: var(--c2-status-panel__media--background-color,#f4f4f5);\n  color: var(--c2-status-panel__media--color,#71717a);\n}\n\n:host([status=info]) .media {\n  background-color: var(--c2-status-panel__media__info--background-color,#edf1fe);\n  color: var(--c2-status-panel__media__info--color,rgb(2, 101, 220));\n}\n\n:host([status=success]) .media {\n  background-color: var(--c2-status-panel__media__success--background-color,#ecfdf3);\n  color: var(--c2-status-panel__media__success--color,#15803d);\n}\n\n:host([status=warning]) .media {\n  background-color: var(--c2-status-panel__media__warning--background-color,#fffbeb);\n  color: var(--c2-status-panel__media__warning--color,#b45309);\n}\n\n:host([status=error]) .media {\n  background-color: var(--c2-status-panel__media__error--background-color,#fef2f2);\n  color: var(--c2-status-panel__media__error--color,#b91c1c);\n}\n\n.media svg,\n::slotted([slot=media]) {\n  display: grid;\n  place-items: center;\n  width: var(--c2-status-panel__media-icon--size,32px);\n  height: var(--c2-status-panel__media-icon--size,32px);\n}\n\n.media svg {\n  fill: none;\n  stroke: currentColor;\n  stroke-width: 1.8;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n}\n\n.title {\n  color: var(--c2-status-panel__title--color,#18181b);\n  font-size: var(--c2-status-panel__title--font-size,20px);\n  font-weight: var(--c2-status-panel__title--font-weight,600);\n  line-height: var(--c2-status-panel__title--line-height,28px);\n}\n\n.description {\n  max-width: var(--c2-status-panel__description--max-width,480px);\n  color: var(--c2-status-panel__description--color,#71717a);\n  font-size: var(--c2-status-panel__description--font-size,14px);\n  line-height: var(--c2-status-panel__description--line-height,20px);\n}\n\n.actions {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  gap: var(--c2-status-panel__actions--gap,8px);\n}\n\n.content {\n  box-sizing: border-box;\n  width: 100%;\n  max-width: var(--c2-status-panel__content--max-width,560px);\n  padding: var(--c2-status-panel__content--padding,16px);\n  border-radius: var(--c2-status-panel__content--border-radius,8px);\n  background-color: var(--c2-status-panel__content--background-color,#f4f4f5);\n}\n\n:host([align=start]) .container,\n:host([align=start]) .message,\n:host([align=start]) .header {\n  align-items: flex-start;\n  text-align: start;\n}\n\n:host([align=start]) .actions {\n  justify-content: flex-start;\n}";
+//#endregion
+//#region \0@oxc-project+runtime@0.148.0/helpers/esm/decorate.js
+function __decorate(decorators, target, key, desc) {
+	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+	else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+	return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+//#endregion
+//#region src/status-panel.ts
+var StatusPanel = class StatusPanel extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.status = "neutral";
+		this.align = "center";
+		this.heading = "";
+		this.description = "";
+		this.headingLevel = 2;
+		this.titleSlotted = false;
+		this.descriptionSlotted = false;
+		this.actionsSlotted = false;
+		this.contentSlotted = false;
+		this.handleSlotChange = (event) => {
+			const slot = event.currentTarget;
+			const assigned = slot.assignedElements().length > 0;
+			if (slot.name === "title") this.titleSlotted = assigned;
+			else if (slot.name === "description") this.descriptionSlotted = assigned;
+			else if (slot.name === "actions") this.actionsSlotted = assigned;
+			else if (slot.name === "content") this.contentSlotted = assigned;
+		};
+	}
+	static {
+		this.styles = unsafeCSS(status_panel_default);
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		if (!isServer) this.syncSlotState();
+	}
+	syncSlotState() {
+		this.titleSlotted = this.querySelector("[slot=\"title\"]") !== null;
+		this.descriptionSlotted = this.querySelector("[slot=\"description\"]") !== null;
+		this.actionsSlotted = this.querySelector("[slot=\"actions\"]") !== null;
+		this.contentSlotted = this.querySelector("[slot=\"content\"]") !== null;
+	}
+	renderDefaultMedia() {
+		if (this.status === "success") return html`<svg viewBox="0 0 24 24" aria-hidden="true"><path d="m5 12 4 4L19 6"></path></svg>`;
+		if (this.status === "warning") return html`<svg viewBox="0 0 24 24" aria-hidden="true">
+        <path d="M10.3 3.7 2.6 17a2 2 0 0 0 1.7 3h15.4a2 2 0 0 0 1.7-3L13.7 3.7a2 2 0 0 0-3.4 0Z"></path>
+        <path d="M12 9v4M12 17h.01"></path>
+      </svg>`;
+		if (this.status === "error") return html`<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12"></path></svg>`;
+		if (this.status === "info") return html`<svg viewBox="0 0 24 24" aria-hidden="true">
+        <circle cx="12" cy="12" r="9"></circle>
+        <path d="M12 11v5M12 8h.01"></path>
+      </svg>`;
+		return html`<svg viewBox="0 0 24 24" aria-hidden="true">
+      <path d="M4 8.5 7 4h10l3 4.5V19a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1Z"></path>
+      <path d="M4 13h4l1.5 2h5l1.5-2h4M7 4l2 4h6l2-4"></path>
+    </svg>`;
+	}
+	render() {
+		const hasTitle = Boolean(this.heading) || this.titleSlotted;
+		const hasDescription = Boolean(this.description) || this.descriptionSlotted;
+		return html`
+      <div class="container">
+        <div class="message">
+          <div class="media"><slot name="media" @slotchange=${this.handleSlotChange}>${this.renderDefaultMedia()}</slot></div>
+          <div class="header" ?hidden=${!hasTitle && !hasDescription}>
+            <div class="title" role="heading" aria-level=${this.headingLevel} ?hidden=${!hasTitle}>
+              <slot name="title" @slotchange=${this.handleSlotChange}>${this.heading}</slot>
+            </div>
+            <div class="description" ?hidden=${!hasDescription}>
+              <slot name="description" @slotchange=${this.handleSlotChange}>${this.description}</slot>
+            </div>
+          </div>
+        </div>
+        <div class="content" ?hidden=${!this.contentSlotted}><slot name="content" @slotchange=${this.handleSlotChange}></slot></div>
+        <div class="actions" ?hidden=${!this.actionsSlotted}><slot name="actions" @slotchange=${this.handleSlotChange}></slot></div>
+      </div>
+    `;
+	}
+};
+__decorate([property({ reflect: true })], StatusPanel.prototype, "status", void 0);
+__decorate([property({ reflect: true })], StatusPanel.prototype, "align", void 0);
+__decorate([property()], StatusPanel.prototype, "heading", void 0);
+__decorate([property()], StatusPanel.prototype, "description", void 0);
+__decorate([property({
+	type: Number,
+	attribute: "heading-level"
+})], StatusPanel.prototype, "headingLevel", void 0);
+__decorate([state()], StatusPanel.prototype, "titleSlotted", void 0);
+__decorate([state()], StatusPanel.prototype, "descriptionSlotted", void 0);
+__decorate([state()], StatusPanel.prototype, "actionsSlotted", void 0);
+__decorate([state()], StatusPanel.prototype, "contentSlotted", void 0);
+StatusPanel = __decorate([customElement("c2-status-panel")], StatusPanel);
+//#endregion
+export { StatusPanel };

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@c2n/status-panel",
+  "version": "0.0.9",
+  "type": "module",
+  "main": "dist/status-panel.js",
+  "exports": {
+    ".": {
+      "types": "./types/src/status-panel.d.ts",
+      "default": "./dist/status-panel.js"
+    },
+    "./react": {
+      "types": "./react.d.ts",
+      "default": "./react.js"
+    },
+    "./vue": {
+      "types": "./vue.d.ts",
+      "default": "./vue.js"
+    },
+    "./custom-elements.json": "./custom-elements.json"
+  },
+  "files": [
+    "dist",
+    "types",
+    "react.d.ts",
+    "react.js",
+    "vue.d.ts",
+    "vue.js"
+  ],
+  "keywords": [
+    "status-panel",
+    "web component",
+    "lit"
+  ],
+  "license": "MIT",
+  "author": "code2nguyen@gmail.com",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/code2nguyen/web-components.git"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "wireit",
+    "build:only": "vite build",
+    "type-check": "wireit"
+  },
+  "wireit": {
+    "type-check": {
+      "dependencies": [
+        "../../core:build"
+      ],
+      "command": "tsc -p tsconfig.lib.json --composite false"
+    },
+    "build": {
+      "dependencies": [
+        "type-check"
+      ],
+      "command": "vite build"
+    }
+  },
+  "dependencies": {
+    "@c2n/core": "0.0.9",
+    "lit": "3.3.3"
+  },
+  "devDependencies": {
+    "@c2n/config": "*"
+  },
+  "customElements": "custom-elements.json",
+  "gitHead": "e4768cce5e0fbd5bc3165cd493a1e8d57cf0fff4"
+}

package/react.d.ts

@@ -0,0 +1,24 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+//
+// JSX types for the custom elements of @c2n/status-panel. Import once, anywhere in the program:
+//
+//     import '@c2n/status-panel/react'
+//
+// Register the elements at module scope before React renders, or React writes an object prop as an
+// attribute and it stringifies.
+
+import type { DetailedHTMLProps, HTMLAttributes } from 'react'
+import type { StatusPanel } from '@c2n/status-panel'
+
+/** Standard React host-element attributes plus the element's own public properties. */
+type C2Props<T> = DetailedHTMLProps<HTMLAttributes<T>, T> & Partial<Omit<T, keyof HTMLElement>>
+
+declare module 'react' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'c2-status-panel': C2Props<StatusPanel>
+    }
+  }
+}
+
+export {}

package/react.js

@@ -0,0 +1,3 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+// Types only — see the matching .d.ts.
+export {}

package/types/src/status-panel.d.ts

@@ -0,0 +1,80 @@
+import { LitElement, type TemplateResult } from 'lit';
+export type StatusPanelStatus = 'neutral' | 'info' | 'success' | 'warning' | 'error';
+export type StatusPanelAlign = 'center' | 'start';
+/**
+ * Presents a meaningful application state with optional media, supporting copy, actions and additional content. Use it
+ * for empty collections, completed operations, errors, unavailable pages and other places where the user needs a clear
+ * explanation and next step.
+ *
+ * @tag c2-status-panel
+ *
+ * @slot media - Illustration, icon, avatar or other visual. A status icon is shown by default.
+ * @slot title - Short heading. Falls back to the `heading` attribute.
+ * @slot description - Supporting explanation. Falls back to the `description` attribute.
+ * @slot actions - Primary and secondary actions.
+ * @slot content - Additional details, lists or controls below the actions.
+ *
+ * @cssproperty {length} [--c2-status-panel__container--width=100%] - Panel width.
+ * @cssproperty {length} [--c2-status-panel__container--max-width=720px] - Maximum panel width.
+ * @cssproperty {length} [--c2-status-panel__container--min-height=240px] - Minimum panel height.
+ * @cssproperty {padding} [--c2-status-panel__container--padding=40px 24px] - Panel padding.
+ * @cssproperty {length} [--c2-status-panel__container--gap=24px] - Space between the message, actions and content.
+ * @cssproperty {border} [--c2-status-panel__container--border=1px solid transparent] - Panel border.
+ * @cssproperty {border-radius} [--c2-status-panel__container--border-radius=14px] - Panel corner radius.
+ * @cssproperty {color} [--c2-status-panel__container--background-color=transparent] - Panel background.
+ * @cssproperty {length} [--c2-status-panel__media--size=64px] - Media container width and height.
+ * @cssproperty {border-radius} [--c2-status-panel__media--border-radius=999px] - Media container corner radius.
+ * @cssproperty {color} [--c2-status-panel__media--background-color=#f4f4f5] - Neutral media background.
+ * @cssproperty {color} [--c2-status-panel__media--color=#71717a] - Neutral media colour.
+ * @cssproperty {length} [--c2-status-panel__media-icon--size=32px] - Default and slotted icon size.
+ * @cssproperty {color} [--c2-status-panel__media__info--background-color=#edf1fe] - Information media background.
+ * @cssproperty {color} [--c2-status-panel__media__info--color=rgb(2, 101, 220)] - Information media colour.
+ * @cssproperty {color} [--c2-status-panel__media__success--background-color=#ecfdf3] - Success media background.
+ * @cssproperty {color} [--c2-status-panel__media__success--color=#15803d] - Success media colour.
+ * @cssproperty {color} [--c2-status-panel__media__warning--background-color=#fffbeb] - Warning media background.
+ * @cssproperty {color} [--c2-status-panel__media__warning--color=#b45309] - Warning media colour.
+ * @cssproperty {color} [--c2-status-panel__media__error--background-color=#fef2f2] - Error media background.
+ * @cssproperty {color} [--c2-status-panel__media__error--color=#b91c1c] - Error media colour.
+ * @cssproperty {length} [--c2-status-panel__header--gap=6px] - Space between title and description.
+ * @cssproperty {color} [--c2-status-panel__title--color=#18181b] - Title colour.
+ * @cssproperty {font-size} [--c2-status-panel__title--font-size=20px] - Title font size.
+ * @cssproperty {font-weight} [--c2-status-panel__title--font-weight=600] - Title font weight.
+ * @cssproperty {line-height} [--c2-status-panel__title--line-height=28px] - Title line height.
+ * @cssproperty {color} [--c2-status-panel__description--color=#71717a] - Description colour.
+ * @cssproperty {font-size} [--c2-status-panel__description--font-size=14px] - Description font size.
+ * @cssproperty {line-height} [--c2-status-panel__description--line-height=20px] - Description line height.
+ * @cssproperty {length} [--c2-status-panel__description--max-width=480px] - Maximum readable description width.
+ * @cssproperty {length} [--c2-status-panel__actions--gap=8px] - Space between actions.
+ * @cssproperty {length} [--c2-status-panel__content--max-width=560px] - Maximum additional-content width.
+ * @cssproperty {padding} [--c2-status-panel__content--padding=16px] - Additional-content padding.
+ * @cssproperty {border-radius} [--c2-status-panel__content--border-radius=8px] - Additional-content corner radius.
+ * @cssproperty {color} [--c2-status-panel__content--background-color=#f4f4f5] - Additional-content background.
+ */
+export declare class StatusPanel extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Visual tone and default media icon. */
+    status: StatusPanelStatus;
+    /** Centers the composition or aligns it to the inline start. */
+    align: StatusPanelAlign;
+    /** Plain-text title fallback. Use the `title` slot for rich content. */
+    heading: string;
+    /** Plain-text description fallback. Use the `description` slot for rich content. */
+    description: string;
+    /** Accessible heading level used by the title region. */
+    headingLevel: number;
+    private titleSlotted;
+    private descriptionSlotted;
+    private actionsSlotted;
+    private contentSlotted;
+    connectedCallback(): void;
+    private syncSlotState;
+    private handleSlotChange;
+    private renderDefaultMedia;
+    render(): TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'c2-status-panel': StatusPanel;
+    }
+}
+//# sourceMappingURL=status-panel.d.ts.map

package/types/src/status-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"status-panel.d.ts","sourceRoot":"","sources":["../../src/status-panel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAA6B,KAAK,cAAc,EAAE,MAAM,KAAK,CAAA;AAKhF,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAA;AACpF,MAAM,MAAM,gBAAgB,GAAG,QAAQ,GAAG,OAAO,CAAA;AAEjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;AACH,qBACa,WAAY,SAAQ,UAAU;IACzC,OAAgB,MAAM,0BAAoB;IAE1C,0CAA0C;IACb,MAAM,EAAE,iBAAiB,CAAY;IAElE,gEAAgE;IACnC,KAAK,EAAE,gBAAgB,CAAW;IAE/D,wEAAwE;IAC5D,OAAO,SAAK;IAExB,oFAAoF;IACxE,WAAW,SAAK;IAE5B,yDAAyD;IACD,YAAY,SAAI;IAE/D,OAAO,CAAC,YAAY,CAAQ;IAC5B,OAAO,CAAC,kBAAkB,CAAQ;IAClC,OAAO,CAAC,cAAc,CAAQ;IAC9B,OAAO,CAAC,cAAc,CAAQ;IAE9B,iBAAiB;IAK1B,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,gBAAgB,CAOvB;IAED,OAAO,CAAC,kBAAkB;IAqBjB,MAAM;CAsBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,WAAW,CAAA;KAC/B;CACF"}

package/vue.d.ts

@@ -0,0 +1,33 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+//
+// Vue template types for the custom elements of @c2n/status-panel. Import once, anywhere in the program:
+//
+//     import '@c2n/status-panel/vue'
+//
+// Tell the compiler about the tags as well, or every c2-* tag is resolved as a Vue component and renders
+// nothing: template.compilerOptions.isCustomElement = (tag) => tag.startsWith('c2-') in vite.config.ts.
+
+import type { DefineComponent, HTMLAttributes } from 'vue'
+import type { StatusPanel } from '@c2n/status-panel'
+
+/** The element's own public properties, plus every attribute Vue understands on a host element. */
+type C2Props<T> = Partial<Omit<T, keyof HTMLElement>> & HTMLAttributes
+
+declare module 'vue' {
+  interface GlobalComponents {
+    'c2-status-panel': DefineComponent<
+      C2Props<StatusPanel> & {
+        'heading-level'?: unknown
+      }
+    >
+  }
+}
+
+declare module '@vue/runtime-dom' {
+  interface HTMLAttributes {
+    /** Vue's own definition omits it, and slotting a plain element into a component needs it. */
+    slot?: string
+  }
+}
+
+export {}

package/vue.js

@@ -0,0 +1,3 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+// Types only — see the matching .d.ts.
+export {}