Removed more generated assets
This commit is contained in:
CodingPhoenixx
@@ -13,6 +13,7 @@ export class Icons {
|
||||
mail: html`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75" /></svg>`,
|
||||
desktop: html`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="M9 17.25v1.007a3 3 0 0 1-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0 1 15 18.257V17.25m6-12V15a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 15V5.25m18 0A2.25 2.25 0 0 0 18.75 3H5.25A2.25 2.25 0 0 0 3 5.25m18 0V12a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 12V5.25" /></svg>`,
|
||||
tools: html`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="M11.42 15.17 17.25 21A2.652 2.652 0 0 0 21 17.25l-5.877-5.877M11.42 15.17l2.496-3.03c.317-.384.74-.626 1.208-.766M11.42 15.17l-4.655 5.653a2.548 2.548 0 1 1-3.586-3.586l6.837-5.63m5.108-.233c.55-.164 1.163-.188 1.743-.14a4.5 4.5 0 0 0 4.486-6.336l-3.276 3.277a3.004 3.004 0 0 1-2.25-2.25l3.276-3.276a4.5 4.5 0 0 0-6.336 4.486c.091 1.076-.071 2.264-.904 2.95l-.102.085m-1.745 1.437L5.909 7.5H4.5L2.25 3.75l1.5-1.5L7.5 4.5v1.409l4.26 4.26m-1.745 1.437 1.745-1.437m6.615 8.206L15.75 15.75M4.867 19.125h.008v.008h-.008v-.008Z" /></svg>`,
|
||||
map: html`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="M9 6.75V15m6-6v8.25m.503 3.498 4.875-2.437c.381-.19.622-.58.622-1.006V4.82c0-.836-.88-1.38-1.628-1.006l-3.869 1.934c-.317.159-.69.159-1.006 0L9.503 3.252a1.125 1.125 0 0 0-1.006 0L3.622 5.689C3.24 5.88 3 6.27 3 6.695V19.18c0 .836.88 1.38 1.628 1.006l3.869-1.934c.317-.159.69-.159 1.006 0l4.994 2.497c.317.158.69.158 1.006 0Z" /></svg>`,
|
||||
map_pin: html`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z" /></svg>`,
|
||||
clock: html`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /></svg>`,
|
||||
table: html`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="M3.375 19.5h17.25m-17.25 0a1.125 1.125 0 0 1-1.125-1.125M3.375 19.5h7.5c.621 0 1.125-.504 1.125-1.125m-9.75 0V5.625m0 12.75v-1.5c0-.621.504-1.125 1.125-1.125m18.375 2.625V5.625m0 12.75c0 .621-.504 1.125-1.125 1.125m1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125m0 3.75h-7.5A1.125 1.125 0 0 1 12 18.375m9.75-12.75c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125m19.5 0v1.5c0 .621-.504 1.125-1.125 1.125M2.25 5.625v1.5c0 .621.504 1.125 1.125 1.125m0 0h17.25m-17.25 0h7.5c.621 0 1.125.504 1.125 1.125M3.375 8.25c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125m17.25-3.75h-7.5c-.621 0-1.125.504-1.125 1.125m8.625-1.125c.621 0 1.125.504 1.125 1.125v1.5c0 .621-.504 1.125-1.125 1.125m-17.25 0h7.5m-7.5 0c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125M12 10.875v-1.5m0 1.5c0 .621-.504 1.125-1.125 1.125M12 10.875c0 .621.504 1.125 1.125 1.125m-2.25 0c.621 0 1.125.504 1.125 1.125M13.125 12h7.5m-7.5 0c-.621 0-1.125.504-1.125 1.125M20.625 12c.621 0 1.125.504 1.125 1.125v1.5c0 .621-.504 1.125-1.125 1.125m-17.25 0h7.5M12 14.625v-1.5m0 1.5c0 .621-.504 1.125-1.125 1.125M12 14.625c0 .621.504 1.125 1.125 1.125m-2.25 0c.621 0 1.125.504 1.125 1.125m0 1.5v-1.5m0 0c0-.621.504-1.125 1.125-1.125m0 0h7.5" /></svg>`,
|
||||
@@ -23,5 +24,12 @@ export class Icons {
|
||||
document_text: html`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" /></svg>`,
|
||||
bin: html`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" /></svg>`,
|
||||
stack: html`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="M6.429 9.75 2.25 12l4.179 2.25m0-4.5 5.571 3 5.571-3m-11.142 0L2.25 7.5 12 2.25l9.75 5.25-4.179 2.25m0 0L21.75 12l-4.179 2.25m0 0 4.179 2.25L12 21.75 2.25 16.5l4.179-2.25m11.142 0-5.571 3-5.571-3" /></svg>`,
|
||||
visible: html`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" /></svg>`,
|
||||
hide: html`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88" /></svg>`,
|
||||
folder: html`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 9.776c.112-.017.227-.026.344-.026h15.812c.117 0 .232.009.344.026m-16.5 0a2.25 2.25 0 0 0-1.883 2.542l.857 6a2.25 2.25 0 0 0 2.227 1.932H19.05a2.25 2.25 0 0 0 2.227-1.932l.857-6a2.25 2.25 0 0 0-1.883-2.542m-16.5 0V6A2.25 2.25 0 0 1 6 3.75h3.879a1.5 1.5 0 0 1 1.06.44l2.122 2.12a1.5 1.5 0 0 0 1.06.44H18A2.25 2.25 0 0 1 20.25 9v.776" /></svg>`,
|
||||
warning: html`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z" /></svg>`,
|
||||
info: html`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" /></svg>`,
|
||||
error: html`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /></svg>`,
|
||||
success: html`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /></svg>`,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
import { LitElement, html, css } from 'lit';
|
||||
import { customElement, property } from 'lit/decorators.js';
|
||||
import { LitElement, html, css } from "lit";
|
||||
import { customElement, property } from "lit/decorators.js";
|
||||
import { Icons } from "./icons";
|
||||
|
||||
export type NotificationType = 'success' | 'warning' | 'error';
|
||||
export type NotificationType = "success" | "warning" | "error" | "info";
|
||||
|
||||
@customElement('notify-bar')
|
||||
@customElement("notify-bar")
|
||||
export class NotifyBar extends LitElement {
|
||||
static styles = css`
|
||||
:host {
|
||||
@@ -87,57 +88,56 @@ export class NotifyBar extends LitElement {
|
||||
background: color-mix(in srgb, #30a46c 8%, transparent);
|
||||
border-color: color-mix(in srgb, #30a46c 25%, transparent);
|
||||
}
|
||||
|
||||
.bar.info {
|
||||
color: var(--color-accent);
|
||||
background: color-mix(in srgb, var(--color-accent) 8%, transparent);
|
||||
border-color: color-mix(in srgb, var(--color-accent) 25%, transparent);
|
||||
}
|
||||
`;
|
||||
|
||||
@property() type: NotificationType = 'error';
|
||||
@property() type: NotificationType = "error";
|
||||
@property() message: string | null = null;
|
||||
@property({ type: Boolean }) dismissible = true;
|
||||
|
||||
private dismiss() {
|
||||
this.message = null;
|
||||
this.dispatchEvent(
|
||||
new CustomEvent('dismissed', { bubbles: true, composed: true })
|
||||
new CustomEvent("dismissed", { bubbles: true, composed: true }),
|
||||
);
|
||||
this.requestUpdate();
|
||||
}
|
||||
|
||||
private renderIcon() {
|
||||
if (this.type === 'error') {
|
||||
return html`
|
||||
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="12" cy="12" r="10" />
|
||||
<line x1="15" y1="9" x2="9" y2="15" />
|
||||
<line x1="9" y1="9" x2="15" y2="15" />
|
||||
</svg>
|
||||
`;
|
||||
if (this.type === "error") {
|
||||
return Icons.icons.error;
|
||||
}
|
||||
if (this.type === 'warning') {
|
||||
return html`
|
||||
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z" />
|
||||
<line x1="12" y1="9" x2="12" y2="13" />
|
||||
<line x1="12" y1="17" x2="12.01" y2="17" />
|
||||
</svg>
|
||||
`;
|
||||
if (this.type === "warning") {
|
||||
return Icons.icons.warning;
|
||||
}
|
||||
return html`
|
||||
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M22 11.08V12a10 10 0 11-5.93-9.14" />
|
||||
<polyline points="22 4 12 14.01 9 11.01" />
|
||||
</svg>
|
||||
`;
|
||||
if (this.type === "info") {
|
||||
return Icons.icons.info;
|
||||
}
|
||||
return Icons.icons.success;
|
||||
}
|
||||
|
||||
render() {
|
||||
if (!this.message) return null;
|
||||
return html`
|
||||
<div class="bar ${this.type}">
|
||||
${this.renderIcon()}
|
||||
<span class="icon">${this.renderIcon()}</span>
|
||||
<span class="content">${this.message}</span>
|
||||
${this.dismissible
|
||||
? html`
|
||||
<button class="close" @click=${this.dismiss} aria-label="Close">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<line x1="18" y1="6" x2="6" y2="18" />
|
||||
<line x1="6" y1="6" x2="18" y2="18" />
|
||||
</svg>
|
||||
|
||||
@@ -1,23 +1,24 @@
|
||||
import { LitElement, html, css } from 'lit';
|
||||
import { customElement, state } from 'lit/decorators.js';
|
||||
import '../components/ui-button';
|
||||
import '../components/ui-button-secondary';
|
||||
import '../components/ui-badge';
|
||||
import '../components/ui-card';
|
||||
import '../components/card-backdrop';
|
||||
import '../components/card-header';
|
||||
import '../components/auth-card';
|
||||
import '../components/stat-card';
|
||||
import '../components/icon-card';
|
||||
import '../components/form-input';
|
||||
import '../components/horizontal-divider';
|
||||
import '../components/notify-bar';
|
||||
import '../components/ui-link';
|
||||
import '../components/circle-chart';
|
||||
import '../components/loading-bar';
|
||||
import '../components/line-chart';
|
||||
import { LitElement, html, css } from "lit";
|
||||
import { customElement, state } from "lit/decorators.js";
|
||||
import "../components/ui-button";
|
||||
import "../components/ui-button-secondary";
|
||||
import "../components/ui-badge";
|
||||
import "../components/ui-card";
|
||||
import "../components/card-backdrop";
|
||||
import "../components/card-header";
|
||||
import "../components/auth-card";
|
||||
import "../components/stat-card";
|
||||
import "../components/icon-card";
|
||||
import "../components/form-input";
|
||||
import "../components/horizontal-divider";
|
||||
import "../components/notify-bar";
|
||||
import "../components/ui-link";
|
||||
import "../components/circle-chart";
|
||||
import "../components/loading-bar";
|
||||
import "../components/line-chart";
|
||||
import { Icons } from "../components/icons";
|
||||
|
||||
@customElement('dev-page')
|
||||
@customElement("dev-page")
|
||||
export class DevPage extends LitElement {
|
||||
static styles = css`
|
||||
:host {
|
||||
@@ -171,7 +172,7 @@ export class DevPage extends LitElement {
|
||||
}
|
||||
`;
|
||||
|
||||
@state() inputValue = '';
|
||||
@state() inputValue = "";
|
||||
@state() notifyVisible = true;
|
||||
|
||||
render() {
|
||||
@@ -179,9 +180,7 @@ export class DevPage extends LitElement {
|
||||
<div class="container">
|
||||
<div class="page-header">
|
||||
<h1>Component Library</h1>
|
||||
<p>
|
||||
All available UI components with variants and states
|
||||
</p>
|
||||
<p>All available UI components with variants and states</p>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
@@ -232,9 +231,7 @@ export class DevPage extends LitElement {
|
||||
</svg>
|
||||
With Icon
|
||||
</ui-button-secondary>
|
||||
<ui-button-secondary disabled>
|
||||
Disabled
|
||||
</ui-button-secondary>
|
||||
<ui-button-secondary disabled> Disabled </ui-button-secondary>
|
||||
</div>
|
||||
<div class="component-label">Secondary Full Width</div>
|
||||
<div class="component-preview col">
|
||||
@@ -262,50 +259,15 @@ export class DevPage extends LitElement {
|
||||
<div class="component-label">With Icon</div>
|
||||
<div class="component-preview">
|
||||
<ui-badge variant="accent">
|
||||
<svg
|
||||
slot="icon"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M12 2L2 7l10 5 10-5-10-5z" />
|
||||
<path d="M2 17l10 5 10-5" />
|
||||
<path d="M2 12l10 5 10-5" />
|
||||
</svg>
|
||||
<span slot="icon">${Icons.icons.stack}</span>
|
||||
Platform
|
||||
</ui-badge>
|
||||
<ui-badge variant="success">
|
||||
<svg
|
||||
slot="icon"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<circle cx="12" cy="12" r="10" />
|
||||
<path d="M8 12l2.5 2.5L16 9" />
|
||||
</svg>
|
||||
<span slot="icon">${Icons.icons.success}</span>
|
||||
Live
|
||||
</ui-badge>
|
||||
<ui-badge variant="error">
|
||||
<svg
|
||||
slot="icon"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<circle cx="12" cy="12" r="10" />
|
||||
<line x1="15" y1="9" x2="9" y2="15" />
|
||||
<line x1="9" y1="9" x2="15" y2="15" />
|
||||
</svg>
|
||||
<span slot="icon">${Icons.icons.error}</span>
|
||||
Offline
|
||||
</ui-badge>
|
||||
</div>
|
||||
@@ -320,6 +282,10 @@ export class DevPage extends LitElement {
|
||||
<div class="component-group">
|
||||
<div class="component-label">Types</div>
|
||||
<div class="component-preview col">
|
||||
<notify-bar
|
||||
type="info"
|
||||
message="Competition is currently active."
|
||||
></notify-bar>
|
||||
<notify-bar
|
||||
type="success"
|
||||
message="Competition successfully created."
|
||||
@@ -389,7 +355,9 @@ export class DevPage extends LitElement {
|
||||
</div>
|
||||
<div class="component-label">Live Value</div>
|
||||
<div class="component-preview">
|
||||
<span style="font-size:0.85rem;color:color-mix(in srgb,var(--color-text) 60%,transparent)">
|
||||
<span
|
||||
style="font-size:0.85rem;color:color-mix(in srgb,var(--color-text) 60%,transparent)"
|
||||
>
|
||||
Current value: "${this.inputValue}"
|
||||
</span>
|
||||
</div>
|
||||
@@ -404,22 +372,10 @@ export class DevPage extends LitElement {
|
||||
<div class="component-group">
|
||||
<div class="component-label">Grid</div>
|
||||
<div class="component-preview grid-4">
|
||||
<stat-card
|
||||
value="42"
|
||||
label="Competitions"
|
||||
></stat-card>
|
||||
<stat-card
|
||||
value="318"
|
||||
label="Pilots"
|
||||
></stat-card>
|
||||
<stat-card
|
||||
value="1,240"
|
||||
label="Tasks"
|
||||
></stat-card>
|
||||
<stat-card
|
||||
value="12"
|
||||
label="Countries"
|
||||
></stat-card>
|
||||
<stat-card value="42" label="Competitions"></stat-card>
|
||||
<stat-card value="318" label="Pilots"></stat-card>
|
||||
<stat-card value="1,240" label="Tasks"></stat-card>
|
||||
<stat-card value="12" label="Countries"></stat-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -436,35 +392,13 @@ export class DevPage extends LitElement {
|
||||
heading="Real-Time Scoring"
|
||||
description="Scores update live as judges submit results."
|
||||
>
|
||||
<svg
|
||||
slot="icon"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<circle cx="12" cy="12" r="10" />
|
||||
<polyline points="12 6 12 12 16 14" />
|
||||
</svg>
|
||||
${Icons.icons.clock}
|
||||
</icon-card>
|
||||
<icon-card
|
||||
heading="GPS Integration"
|
||||
description="Import GPS tracks and calculate distances automatically."
|
||||
>
|
||||
<svg
|
||||
slot="icon"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z" />
|
||||
<circle cx="12" cy="10" r="3" />
|
||||
</svg>
|
||||
${Icons.icons.map_pin}
|
||||
</icon-card>
|
||||
</div>
|
||||
</div>
|
||||
@@ -486,8 +420,8 @@ export class DevPage extends LitElement {
|
||||
<p
|
||||
style="margin:0;font-size:0.9rem;color:color-mix(in srgb,var(--color-text) 60%,transparent)"
|
||||
>
|
||||
This is the default card layout with a header
|
||||
component inside.
|
||||
This is the default card layout with a header component
|
||||
inside.
|
||||
</p>
|
||||
<horizontal-divider></horizontal-divider>
|
||||
<ui-button full>Action</ui-button>
|
||||
@@ -584,9 +518,21 @@ export class DevPage extends LitElement {
|
||||
<div class="component-label">Variants</div>
|
||||
<div class="component-preview col">
|
||||
<loading-bar label="Accent" value="72"></loading-bar>
|
||||
<loading-bar label="Success" value="100" variant="success"></loading-bar>
|
||||
<loading-bar label="Warning" value="45" variant="warning"></loading-bar>
|
||||
<loading-bar label="Error" value="18" variant="error"></loading-bar>
|
||||
<loading-bar
|
||||
label="Success"
|
||||
value="100"
|
||||
variant="success"
|
||||
></loading-bar>
|
||||
<loading-bar
|
||||
label="Warning"
|
||||
value="45"
|
||||
variant="warning"
|
||||
></loading-bar>
|
||||
<loading-bar
|
||||
label="Error"
|
||||
value="18"
|
||||
variant="error"
|
||||
></loading-bar>
|
||||
</div>
|
||||
<div class="component-label">Sizes</div>
|
||||
<div class="component-preview col">
|
||||
@@ -596,12 +542,15 @@ export class DevPage extends LitElement {
|
||||
</div>
|
||||
<div class="component-label">Indeterminate</div>
|
||||
<div class="component-preview col">
|
||||
<loading-bar label="Loading…" indeterminate hideValue></loading-bar>
|
||||
<loading-bar
|
||||
label="Loading…"
|
||||
indeterminate
|
||||
hideValue
|
||||
></loading-bar>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="section">
|
||||
<div class="section-head">
|
||||
<h2>Line Chart</h2>
|
||||
@@ -618,8 +567,8 @@ export class DevPage extends LitElement {
|
||||
showArea
|
||||
.series=${[
|
||||
{
|
||||
label: 'Pilot A',
|
||||
color: 'var(--color-accent)',
|
||||
label: "Pilot A",
|
||||
color: "var(--color-accent)",
|
||||
points: [
|
||||
{ x: 0, y: 20 },
|
||||
{ x: 1, y: 420 },
|
||||
@@ -631,8 +580,8 @@ export class DevPage extends LitElement {
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'Pilot B',
|
||||
color: '#30a46c',
|
||||
label: "Pilot B",
|
||||
color: "#30a46c",
|
||||
points: [
|
||||
{ x: 1, y: 380 },
|
||||
{ x: 2, y: 450 },
|
||||
@@ -654,7 +603,6 @@ export class DevPage extends LitElement {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="section">
|
||||
<div class="section-head">
|
||||
<h2>Circle Chart</h2>
|
||||
@@ -667,12 +615,12 @@ export class DevPage extends LitElement {
|
||||
heading="Pilots by Category"
|
||||
centerText="Pilots"
|
||||
.segments=${[
|
||||
{ label: 'Sport', value: 124, color: 'var(--color-accent)' },
|
||||
{ label: 'Serial', value: 89, color: '#30a46c' },
|
||||
{ label: 'Open', value: 47, color: '#e79d13' },
|
||||
{ label: 'Tandem', value: 18, color: '#e5484d' },
|
||||
{ label: "Sport", value: 124, color: "var(--color-accent)" },
|
||||
{ label: "Serial", value: 89, color: "#30a46c" },
|
||||
{ label: "Open", value: 47, color: "#e79d13" },
|
||||
{ label: "Tandem", value: 18, color: "#e5484d" },
|
||||
]}
|
||||
></circle-chart>
|
||||
></circle-chart>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user