@iyulab/components 0.4.0 → 1.0.0

package/dist/components/avatar/UAvatar.styles.js

@@ -0,0 +1,45 @@
+import { css } from "lit";
+//#region src/components/avatar/UAvatar.styles.ts
+var styles = css`
+  :host {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.5em;
+    height: 2.5em;
+    font-family: var(--u-font-base);
+    font-weight: 600;
+    color: var(--u-neutral-0);
+    background-color: var(--u-neutral-500);
+    vertical-align: middle;
+    overflow: hidden;
+    user-select: none;
+  }
+
+  :host([shape="circle"]) {
+    border-radius: 50%;
+  }
+  :host([shape="square"]) {
+    border-radius: 0;
+  }
+  :host([shape="rounded"]) {
+    border-radius: 0.375em;
+  }
+  :host([outline]) {
+    box-shadow: 0 0 0 0.125em var(--u-border-color);
+  }
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .label {
+    font-size: 1em;
+    line-height: 1;
+    text-transform: uppercase;
+  }
+`;
+//#endregion
+export { styles };

package/dist/components/badge/UBadge.d.ts

@@ -0,0 +1,28 @@
+import { nothing } from 'lit';
+import { UElement } from '../UElement.js';
+export type BadgeVariant = "pill" | "dot" | "square";
+export type BadgeColor = "neutral" | "blue" | "green" | "yellow" | "red" | "orange" | "teal" | "cyan" | "purple" | "pink";
+export type BadgeAnchor = "top-right" | "top-left" | "bottom-right" | "bottom-left";
+/**
+ * 상태, 숫자, 알림 등의 정보를 배지로 표시하는 컴포넌트입니다.
+ * anchor 속성으로 특정 요소 위치에 배치할 수 있습니다.
+ *
+ * @slot prefix - 배지 앞에 배치할 컨텐츠
+ * @slot - 배지의 주요 컨텐츠 (텍스트, 아이콘)
+ * @slot suffix - 배지 뒤에 배치할 컨텐츠
+ */
+export declare class UBadge extends UElement {
+    static styles: import('lit').CSSResultGroup[];
+    /** 배지 유형 */
+    variant: BadgeVariant;
+    /** 배지 색상 */
+    color: BadgeColor;
+    /** 부모 요소 기준 배치 위치 (설정 시 position: absolute) */
+    anchor?: BadgeAnchor;
+    render(): typeof nothing | import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-badge': UBadge;
+    }
+}

package/dist/components/badge/UBadge.js

@@ -0,0 +1,40 @@
+import { UElement } from "../UElement.js";
+import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorateMetadata.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
+import { styles } from "./UBadge.styles.js";
+import { customElement, property } from "lit/decorators.js";
+import { html, nothing } from "lit";
+//#region src/components/badge/UBadge.ts
+var UBadge = class UBadge extends UElement {
+	constructor(..._args) {
+		super(..._args);
+		this.variant = "pill";
+		this.color = "neutral";
+	}
+	static {
+		this.styles = [super.styles, styles];
+	}
+	render() {
+		if (this.variant === "dot") return nothing;
+		return html`
+      <slot name="prefix"></slot>
+      <slot></slot>
+      <slot name="suffix"></slot>
+    `;
+	}
+};
+__decorate([property({
+	type: String,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UBadge.prototype, "variant", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UBadge.prototype, "color", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UBadge.prototype, "anchor", void 0);
+UBadge = __decorate([customElement("u-badge")], UBadge);
+//#endregion
+export { UBadge };

package/dist/components/badge/UBadge.styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import('lit').CSSResult;

package/dist/components/badge/UBadge.styles.js

@@ -0,0 +1,113 @@
+import { css } from "lit";
+//#region src/components/badge/UBadge.styles.ts
+var styles = css`
+  :host {
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    gap: 0.25em;
+    font-size: inherit;
+    font-weight: 600;
+    font-family: var(--u-font-base);
+    line-height: 1;
+    white-space: nowrap;
+    user-select: none;
+  }
+
+  /* === Variant (형태) === */
+  :host([variant="square"]) {
+    padding: 0.2em 0.5em;
+    border-radius: 0.2em;
+  }
+  :host([variant="pill"]) {
+    padding: 0.2em 0.5em;
+    border-radius: 999px;
+  }
+  :host([variant="dot"]) {
+    width: 0.6em;
+    height: 0.6em;
+    min-width: 0.6em;
+    min-height: 0.6em;
+    padding: 0;
+    border-radius: 50%;
+  }
+
+  /* === Color (색상) === */
+  :host([color="neutral"]) {
+    color: var(--u-neutral-800);
+    background-color: var(--u-neutral-200);
+  }
+  :host([color="blue"]) {
+    color: var(--u-neutral-0);
+    background-color: var(--u-blue-500);
+  }
+  :host([color="green"]) {
+    color: var(--u-neutral-0);
+    background-color: var(--u-green-500);
+  }
+  :host([color="yellow"]) {
+    color: var(--u-neutral-0);
+    background-color: var(--u-yellow-600);
+  }
+  :host([color="red"]) {
+    color: var(--u-neutral-0);
+    background-color: var(--u-red-500);
+  }
+  :host([color="orange"]) {
+    color: var(--u-neutral-0);
+    background-color: var(--u-orange-500);
+  }
+  :host([color="teal"]) {
+    color: var(--u-neutral-0);
+    background-color: var(--u-teal-500);
+  }
+  :host([color="cyan"]) {
+    color: var(--u-neutral-0);
+    background-color: var(--u-cyan-500);
+  }
+  :host([color="purple"]) {
+    color: var(--u-neutral-0);
+    background-color: var(--u-purple-500);
+  }
+  :host([color="pink"]) {
+    color: var(--u-neutral-0);
+    background-color: var(--u-pink-500);
+  }
+
+  /* === Anchor (위치 고정) === */
+  :host([anchor]) {
+    position: absolute;
+    z-index: 1;
+  }
+  :host([anchor="top-right"]) {
+    top: 0;
+    right: 0;
+    transform: translate(50%, -50%);
+  }
+  :host([anchor="top-left"]) {
+    top: 0;
+    left: 0;
+    transform: translate(-50%, -50%);
+  }
+  :host([anchor="bottom-right"]) {
+    bottom: 0;
+    right: 0;
+    transform: translate(50%, 50%);
+  }
+  :host([anchor="bottom-left"]) {
+    bottom: 0;
+    left: 0;
+    transform: translate(-50%, 50%);
+  }
+
+  /* === Slots === */
+  ::slotted([slot="prefix"]) {
+    margin-right: 0.25em;
+  }
+  ::slotted([slot="suffix"]) {
+    margin-left: 0.25em;
+  }
+`;
+//#endregion
+export { styles };

package/dist/components/breadcrumb/UBreadcrumb.d.ts

@@ -0,0 +1,24 @@
+import { UElement } from '../UElement.js';
+/**
+ * 현재 페이지 위치를 계층 구조로 표시하는 브레드크럼 컴포넌트입니다.
+ * 하위 u-breadcrumb-item을 조합하여 사용합니다.
+ *
+ * @slot - u-breadcrumb-item 요소들
+ * @slot separator - 구분자 커스텀 콘텐츠 (기본값: chevron-right 아이콘)
+ *
+ * @csspart nav - 내비게이션 요소
+ */
+export declare class UBreadcrumb extends UElement {
+    static styles: import('lit').CSSResultGroup[];
+    private separator?;
+    render(): import('lit-html').TemplateResult<1>;
+    private handleSlotChange;
+    private handleSeparatorSlotChange;
+    private appendSeparator;
+    private createSeparator;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-breadcrumb': UBreadcrumb;
+    }
+}

package/dist/components/breadcrumb/UBreadcrumb.js

@@ -0,0 +1,65 @@
+import { UElement } from "../UElement.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
+import "../icon/UIcon.js";
+import { styles } from "./UBreadcrumb.styles.js";
+import { customElement } from "lit/decorators.js";
+import { html } from "lit";
+//#region src/components/breadcrumb/UBreadcrumb.ts
+var UBreadcrumb = class UBreadcrumb extends UElement {
+	constructor(..._args) {
+		super(..._args);
+		this.handleSlotChange = (e) => {
+			const items = e.target.assignedElements({ flatten: true }).filter((el) => el instanceof HTMLElement);
+			this.appendSeparator(items);
+		};
+		this.handleSeparatorSlotChange = (e) => {
+			this.separator = e.target.assignedNodes({ flatten: true }).at(0);
+			const nodes = this.shadowRoot?.querySelectorAll("nav > *:not(.separator)") ?? [];
+			const items = Array.from(nodes).filter((el) => el instanceof HTMLElement);
+			this.appendSeparator(items);
+		};
+	}
+	static {
+		this.styles = [super.styles, styles];
+	}
+	render() {
+		return html`
+      <nav aria-label="breadcrumb" part="nav">
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </nav>
+      <div hidden aria-hidden="true">
+        <slot name="separator" @slotchange=${this.handleSeparatorSlotChange}></slot>
+      </div>
+    `;
+	}
+	appendSeparator(items) {
+		const nav = this.shadowRoot?.querySelector("nav");
+		if (!nav) return;
+		nav.querySelectorAll(".separator").forEach((el) => el.remove());
+		items.forEach((item) => item.removeAttribute("data-last"));
+		items.forEach((item, i) => {
+			item.style.order = String(i * 2);
+			if (i < items.length - 1) {
+				const sep = this.createSeparator(i);
+				nav.appendChild(sep);
+			} else item.setAttribute("data-last", "");
+		});
+	}
+	createSeparator(index) {
+		const sep = document.createElement("span");
+		sep.setAttribute("class", "separator");
+		sep.setAttribute("part", "separator");
+		sep.style.order = String(index * 2 + 1);
+		if (this.separator) sep.appendChild(this.separator.cloneNode(true));
+		else {
+			const icon = document.createElement("u-icon");
+			icon.setAttribute("lib", "internal");
+			icon.setAttribute("name", "chevron-right");
+			sep.appendChild(icon);
+		}
+		return sep;
+	}
+};
+UBreadcrumb = __decorate([customElement("u-breadcrumb")], UBreadcrumb);
+//#endregion
+export { UBreadcrumb };

package/dist/components/breadcrumb/UBreadcrumb.styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import('lit').CSSResult;

package/dist/components/breadcrumb/UBreadcrumb.styles.js

@@ -0,0 +1,37 @@
+import { css } from "lit";
+//#region src/components/breadcrumb/UBreadcrumb.styles.ts
+var styles = css`
+  :host {
+    display: block;
+    font-size: inherit;
+    font-family: var(--u-font-base);
+    color: var(--u-txt-color);
+    user-select: none;
+  }
+
+  nav {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    flex-wrap: nowrap;
+    gap: 0.15em;
+    overflow: hidden;
+  }
+
+  ::slotted([data-last]) {
+    font-weight: 500;
+    pointer-events: none;
+    cursor: default;
+  }
+
+  .separator {
+    flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+    color: var(--u-txt-color-weak);
+    font-size: 0.75em;
+    user-select: none;
+  }
+`;
+//#endregion
+export { styles };

package/dist/components/breadcrumb-item/UBreadcrumbItem.d.ts

@@ -0,0 +1,30 @@
+import { UElement } from '../UElement.js';
+/**
+ * 브레드크럼의 개별 항목을 나타내는 컴포넌트입니다.
+ *
+ * @slot prefix - 텍스트 앞에 표시할 컨텐츠 (아이콘 등)
+ * @slot - 아이콘과 텍스트
+ * @slot suffix - 텍스트 뒤에 표시할 컨텐츠
+ *
+ * @csspart link - 링크 요소
+ *
+ * @event navigate - 링크 클릭 시 발생 (취소 가능)
+ */
+export declare class UBreadcrumbItem extends UElement {
+    static styles: import('lit').CSSResultGroup[];
+    /** 비활성화 상태 */
+    disabled: boolean;
+    /** 링크 URL */
+    href?: string;
+    /** 링크 target 속성 */
+    target?: string;
+    /** 링크 rel 속성 */
+    rel?: string;
+    render(): import('lit-html').TemplateResult<1>;
+    private handleAnchorClick;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-breadcrumb-item': UBreadcrumbItem;
+    }
+}

package/dist/components/breadcrumb-item/UBreadcrumbItem.js

@@ -0,0 +1,52 @@
+import { UElement } from "../UElement.js";
+import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorateMetadata.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
+import { styles } from "./UBreadcrumbItem.styles.js";
+import { customElement, property } from "lit/decorators.js";
+import { html } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+//#region src/components/breadcrumb-item/UBreadcrumbItem.ts
+var UBreadcrumbItem = class UBreadcrumbItem extends UElement {
+	constructor(..._args) {
+		super(..._args);
+		this.disabled = false;
+		this.handleAnchorClick = (e) => {
+			if (this.disabled) {
+				e.preventDefault();
+				return;
+			}
+			if (!this.fire("navigate")) e.preventDefault();
+		};
+	}
+	static {
+		this.styles = [super.styles, styles];
+	}
+	render() {
+		if (this.href) return html`
+        <a part="link"
+          href=${this.href}
+          target=${ifDefined(this.target)}
+          rel=${ifDefined(this.rel)}
+          @click=${this.handleAnchorClick}
+        >
+          <slot name="prefix"></slot>
+          <slot></slot>
+          <slot name="suffix"></slot>
+        </a>`;
+		return html`
+      <slot name="prefix"></slot>
+      <slot></slot>
+      <slot name="suffix"></slot>
+    `;
+	}
+};
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Boolean)], UBreadcrumbItem.prototype, "disabled", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", String)], UBreadcrumbItem.prototype, "href", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", String)], UBreadcrumbItem.prototype, "target", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", String)], UBreadcrumbItem.prototype, "rel", void 0);
+UBreadcrumbItem = __decorate([customElement("u-breadcrumb-item")], UBreadcrumbItem);
+//#endregion
+export { UBreadcrumbItem };

package/dist/components/breadcrumb-item/UBreadcrumbItem.styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import('lit').CSSResult;

package/dist/components/breadcrumb-item/UBreadcrumbItem.styles.js

@@ -0,0 +1,41 @@
+import { css } from "lit";
+//#region src/components/breadcrumb-item/UBreadcrumbItem.styles.ts
+var styles = css`
+  :host {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.2em;
+    flex-shrink: 0;
+    color: var(--u-txt-color-weak);
+    font-size: inherit;
+    line-height: 1.5em;
+    cursor: pointer;
+  }
+  :host:hover {
+    color: var(--u-blue-700);
+  }
+  :host([disabled]) {
+    opacity: 0.5;
+    pointer-events: none;
+    cursor: default;
+  }
+
+  a {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.2em;
+    color: inherit;
+    text-decoration: none;
+    transition: color 0.2s ease;
+    cursor: inherit;
+  }
+
+  ::slotted([slot="prefix"]) {
+    margin-right: 0.2em;
+  }
+  ::slotted([slot="suffix"]) {
+    margin-left: 0.2em;
+  }
+`;
+//#endregion
+export { styles };

package/dist/components/button/UButton.d.ts

@@ -1,7 +1,50 @@
-import { UButton } from './UButton.component.js';
+import { TemplateResult } from 'lit';
+import { UElement } from '../UElement.js';
+export type ButtonVariant = "solid" | "surface" | "filled" | "outlined" | "ghost" | "link";
+export type ButtonType = "button" | "submit" | "reset";
+/**
+ * 클릭 가능한 버튼 컴포넌트입니다. href가 설정되면 앵커 태그로 렌더링됩니다.
+ *
+ * @slot - 버튼 내부 콘텐츠
+ * @slot prefix - 버튼 앞에 표시할 콘텐츠
+ * @slot suffix - 버튼 뒤에 표시할 콘텐츠
+ * @slot spinner - 로딩 시 표시할 커스텀 스피너
+ *
+ * @csspart link - 내부 앵커 요소 (href 설정 시)
+ * @csspart button - 내부 버튼 요소
+ * @csspart content - 콘텐츠 영역
+ * @csspart mask - 로딩 마스크 영역
+ */
+export declare class UButton extends UElement {
+    static styles: import('lit').CSSResultGroup[];
+    /** 버튼 스타일 변형 */
+    variant: ButtonVariant;
+    /** 경계선 둥글게 여부 */
+    rounded: boolean;
+    /** 비활성화 여부 */
+    disabled: boolean;
+    /** 로딩 상태 여부 */
+    loading: boolean;
+    /** 버튼 타입 */
+    type: ButtonType;
+    /** 링크 URL (설정 시 앵커 태그로 렌더링) */
+    href?: string;
+    /** 링크 타겟 */
+    target?: string;
+    /** 링크 관계 */
+    rel?: string;
+    /** 다운로드 파일명 */
+    download?: string;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): TemplateResult<1>;
+    private renderContent;
+    private renderMask;
+    private handleClick;
+    private handleSpinnerSlotChange;
+}
 declare global {
     interface HTMLElementTagNameMap {
-        "u-button": UButton;
+        'u-button': UButton;
     }
 }
-export { UButton };

package/dist/components/button/UButton.js

@@ -1,5 +1,105 @@
-import { UButton } from './UButton.component.js';
-
-UButton.define("u-button");
-
+import { UElement } from "../UElement.js";
+import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorateMetadata.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
+import "../spinner/USpinner.js";
+import { styles } from "./UButton.styles.js";
+import { customElement, property } from "lit/decorators.js";
+import { html } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+//#region src/components/button/UButton.ts
+var UButton = class UButton extends UElement {
+	constructor(..._args) {
+		super(..._args);
+		this.variant = "solid";
+		this.rounded = false;
+		this.disabled = false;
+		this.loading = false;
+		this.type = "button";
+		this.handleClick = (e) => {
+			if (this.disabled || this.loading) {
+				e.preventDefault();
+				e.stopImmediatePropagation();
+			}
+		};
+		this.handleSpinnerSlotChange = (e) => {
+			const hasSpinner = e.target.assignedNodes().length > 0;
+			this.toggleAttribute("has-spinner", hasSpinner);
+		};
+	}
+	static {
+		this.styles = [super.styles, styles];
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.addEventListener("click", this.handleClick);
+	}
+	disconnectedCallback() {
+		this.removeEventListener("click", this.handleClick);
+		super.disconnectedCallback();
+	}
+	render() {
+		if (this.href) return html`
+        <a part="link"
+          ?disabled=${this.disabled || this.loading}
+          tabindex=${this.disabled || this.loading ? -1 : 0}
+          href=${ifDefined(this.disabled || this.loading ? void 0 : this.href)}
+          download=${ifDefined(this.download)}
+          target=${ifDefined(this.target)}
+          rel=${ifDefined(this.rel)}
+        >
+          ${this.renderContent()}
+        </a>
+        ${this.renderMask()}
+      `;
+		return html`
+      <button part="button"
+        type=${this.type}
+        ?disabled=${this.disabled || this.loading}
+      >
+        ${this.renderContent()}
+      </button>
+      ${this.renderMask()}
+    `;
+	}
+	renderContent() {
+		return html`
+      <slot name="prefix"></slot>
+      <div class="content" part="content">
+        <slot></slot>
+      </div>
+      <slot name="suffix"></slot>
+    `;
+	}
+	renderMask() {
+		return html`
+      <div class="mask" part="mask" ?hidden=${!this.loading}>
+        <u-spinner></u-spinner>
+        <slot name="spinner" @slotchange=${this.handleSpinnerSlotChange}></slot>
+      </div>
+    `;
+	}
+};
+__decorate([property({
+	type: String,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UButton.prototype, "variant", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UButton.prototype, "rounded", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UButton.prototype, "disabled", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UButton.prototype, "loading", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", Object)], UButton.prototype, "type", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", String)], UButton.prototype, "href", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", String)], UButton.prototype, "target", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", String)], UButton.prototype, "rel", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", String)], UButton.prototype, "download", void 0);
+UButton = __decorate([customElement("u-button")], UButton);
+//#endregion
 export { UButton };